@dumiflex/wp-kit 0.5.0 → 0.7.0

package/src/Checkbox.vue

@@ -1,109 +1,247 @@
 <script setup lang="ts">
-import { computed } from "vue";
+/**
+ * The one checkbox, for the manager, the community site and canvas widgets.
+ *
+ *   <Checkbox v-model="picked" label="Include in bundle" />
+ *   <Checkbox v-model="on" size="sm" aria-label="Enabled" />           a row's box
+ *   <Checkbox :model-value="false" indeterminate label="Some selected" />
+ *   <Checkbox v-model="favorites" field label="Favorites only" />
+ *
+ * Box: a `<button role="checkbox">`, so a wrapping `<label>` ticks it like an
+ * input. Click, Space and Enter toggle. `size="sm"` is the 12px box of the
+ * canvas rows' on/off mark; md is 14px. A parent can tint the checked fill
+ * with `--check-on` (a bundle header uses its bundle colour).
+ *
+ * Without a label the box is the root: `class`, `title`, `data-test` and a
+ * parent's scoped styles land on it. With a label (prop or the default slot)
+ * or `field`, the root is a wrapper around the box and the words, and a click
+ * on the words toggles too.
+ *
+ * The styles are scoped and read only SHARED_TOKENS, so the box ships in the
+ * canvas chunk and wears each side's colours.
+ */
+import { computed, useAttrs, useId, useSlots } from "vue";
+
+defineOptions({ inheritAttrs: false });
 
 interface Props {
-  modelValue: boolean;
+  /** Checked state: use with `v-model` or `:model-value` + `@update:model-value`. */
+  modelValue?: boolean | undefined;
   label?: string | undefined;
   disabled?: boolean | undefined;
   error?: boolean | undefined;
   id?: string | undefined;
   ariaLabel?: string | undefined;
+  size?: "sm" | "md" | undefined;
   /**
-   * Tri-state indicator. When true AND `modelValue` is false, the
-   * checkbox renders a horizontal dash instead of a checkmark and
-   * announces `aria-checked="mixed"`. Used by group/select-all
-   * controls where the underlying collection is partially selected.
-   * `modelValue=true` always wins — a fully-checked box never
-   * renders as indeterminate even if the prop is set.
+   * Tri-state indicator. When true AND `modelValue` is false, the box shows a
+   * dash and announces `aria-checked="mixed"` (a select-all over a partial
+   * selection). `modelValue=true` always wins.
    */
   indeterminate?: boolean | undefined;
   /**
    * Draw the whole row as an input-height field (border, fill, full width)
-   * whose label fills it, for a yes/no filter that sits in a form grid
-   * beside Selects (the list pages' "Favorites only").
+   * whose label fills it, for a yes/no filter in a form grid beside Selects
+   * (the list pages' "Favorites only").
    */
   field?: boolean | undefined;
 }
-const props = defineProps<Props>();
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: false,
+  label: undefined,
+  disabled: false,
+  error: false,
+  id: undefined,
+  ariaLabel: undefined,
+  size: "md",
+  indeterminate: false,
+  field: false,
+});
 
-const emit = defineEmits<{
-  (e: "update:modelValue", v: boolean): void;
-}>();
+const emit = defineEmits<{ "update:modelValue": [next: boolean] }>();
 
-const showIndeterminate = computed<boolean>(
-  () => !!props.indeterminate && !props.modelValue,
-);
+const attrs = useAttrs();
+const slots = useSlots();
+const labelId = useId();
 
+const hasLabel = computed(() => !!props.label || !!slots.default);
+/** The wrapper is a real box (label beside the box, or the field look). */
+const wrapped = computed(() => hasLabel.value || props.field);
+const showIndeterminate = computed(() => props.indeterminate && !props.modelValue);
 const ariaChecked = computed<"true" | "false" | "mixed">(() => {
   if (props.modelValue) return "true";
-  if (showIndeterminate.value) return "mixed";
-  return "false";
+  return showIndeterminate.value ? "mixed" : "false";
 });
 
-function toggle() {
+function toggle(): void {
   if (props.disabled) return;
   emit("update:modelValue", !props.modelValue);
 }
 </script>
 
 <template>
-  <span class="wp-checkbox" :class="{ 'is-disabled': disabled, 'wp-checkbox--field': field }">
-    <!-- Wrapper is a <span> rather than a <label> on purpose. Native <label>
-         re-dispatches click on its associated form control in some pointer
-         paths (notably when the click target is the SVG inside the button),
-         firing the button's @click twice — which double-toggled and left
-         the underlying model unchanged when a parent also wired a click
-         handler. The span wrapper has no synthetic-dispatch behavior. -->
+  <span
+    v-if="wrapped"
+    v-bind="attrs"
+    class="wp-checkbox"
+    :class="[`wp-checkbox--${size}`, { 'wp-checkbox--field': field, 'is-disabled': disabled }]"
+  >
+    <!-- With a label the root is a <span>, not a <label>: a native label
+         re-dispatches the click on its control in some pointer paths (a click
+         on the tick SVG), which toggled twice and left the model unchanged.
+         No comment sits beside the roots: it would make the root a fragment. -->
     <button
+      :id="id"
+      :aria-label="ariaLabel ?? label"
+      :aria-labelledby="!ariaLabel && !label ? labelId : undefined"
       type="button"
+      role="checkbox"
       class="wp-check"
+      :class="{ 'wp-check--sm': size === 'sm' }"
       :data-checked="modelValue ? 'true' : 'false'"
       :data-indeterminate="showIndeterminate ? 'true' : 'false'"
       :aria-checked="ariaChecked"
-      :aria-label="ariaLabel ?? label"
       :aria-invalid="error || undefined"
+      :aria-disabled="disabled || undefined"
       :disabled="disabled"
-      role="checkbox"
       @click="toggle"
+      @keydown.enter.prevent="toggle"
     >
-      <!-- tokens.css gives `.wp-check svg` pointer-events: none so the entire
-           button area (including the check mark) is a single click target —
-           clicks land on the button itself, not the SVG child. Without this,
-           a click on the SVG centerpoint could route through wrapper-bubble
-           paths in some browsers/automation drivers and double-fire toggle.
-           No inline style here: the TUI look hides the drawn mark (it reads
-           [x] instead), and an inline display would beat it. -->
-      <svg
-        v-if="modelValue"
-        viewBox="0 0 12 12"
-        fill="none"
-        aria-hidden="true"
-      >
-        <path
-          d="M3 6.2l2.2 2.2L9 4.4"
-          stroke="currentColor"
-          stroke-width="1.8"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        />
+      <!-- No inline style on the marks: the TUI look hides them (it writes
+           [x] / [-]) and an inline display would beat that rule. -->
+      <svg v-if="modelValue" viewBox="0 0 12 12" fill="none" aria-hidden="true">
+        <path d="M3 6.2l2.2 2.2L9 4.4" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" />
       </svg>
-      <!-- Indeterminate dash. Same pointer-events rule as the checkmark. -->
-      <svg
-        v-else-if="showIndeterminate"
-        viewBox="0 0 12 12"
-        fill="none"
-        aria-hidden="true"
-      >
-        <path
-          d="M3 6h6"
-          stroke="currentColor"
-          stroke-width="1.8"
-          stroke-linecap="round"
-        />
+      <svg v-else-if="showIndeterminate" viewBox="0 0 12 12" fill="none" aria-hidden="true">
+        <path d="M3 6h6" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" />
       </svg>
     </button>
     <!-- A click on the words toggles too, like a <label>; keyboard users use the box itself. -->
     <!-- eslint-disable-next-line vuejs-accessibility/click-events-have-key-events, vuejs-accessibility/no-static-element-interactions -->
-    <span v-if="label" class="wp-checkbox__label" @click="toggle">{{ label }}</span>
+    <span :id="labelId" class="wp-checkbox__label" @click="toggle"><slot>{{ label }}</slot></span>
   </span>
+  <button
+    v-else
+    v-bind="attrs"
+    :id="id"
+    :aria-label="ariaLabel"
+    type="button"
+    role="checkbox"
+    class="wp-check"
+    :class="{ 'wp-check--sm': size === 'sm' }"
+    :data-checked="modelValue ? 'true' : 'false'"
+    :data-indeterminate="showIndeterminate ? 'true' : 'false'"
+    :aria-checked="ariaChecked"
+    :aria-invalid="error || undefined"
+    :aria-disabled="disabled || undefined"
+    :disabled="disabled"
+    @click="toggle"
+    @keydown.enter.prevent="toggle"
+  >
+    <!-- Box only: the box is the root, so the caller's class, scoped styles,
+         title and data-test land on it. -->
+    <svg v-if="modelValue" viewBox="0 0 12 12" fill="none" aria-hidden="true">
+      <path d="M3 6.2l2.2 2.2L9 4.4" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" />
+    </svg>
+    <svg v-else-if="showIndeterminate" viewBox="0 0 12 12" fill="none" aria-hidden="true">
+      <path d="M3 6h6" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" />
+    </svg>
+  </button>
 </template>
+
+<style scoped>
+/* State selectors sit in :where() so every rule stays at the base box's
+ * weight: the looks (theme/looks.css: TUI's [x], Soft's round corners) are
+ * one notch heavier and win, as they did over the old global sheet. */
+.wp-checkbox {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  min-height: var(--wp-control-h-md);
+  color: var(--wp-text);
+  font: var(--wp-text-sm) / 1.3 var(--wp-font-sans);
+  cursor: pointer;
+  user-select: none;
+}
+.wp-checkbox--sm { gap: 6px; min-height: var(--wp-control-h-sm); font-size: var(--wp-text-xs); }
+.wp-checkbox:where(.is-disabled) { cursor: not-allowed; }
+.wp-checkbox:where(.is-disabled) .wp-checkbox__label { opacity: 0.5; }
+
+.wp-check {
+  appearance: none;
+  box-sizing: border-box;
+  width: 14px;
+  height: 14px;
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  margin: 0;
+  /* A visible edge on the empty box: the hairline border tokens vanish on a dark row. */
+  border: 1.5px solid color-mix(in srgb, var(--wp-text-dim) 70%, transparent);
+  border-radius: min(3px, var(--wp-radius-cap, 999px));
+  background: var(--wp-bg);
+  color: transparent;
+  font: inherit;
+  line-height: 0;
+  cursor: pointer;
+  transition: background var(--wp-motion-quick), border-color var(--wp-motion-quick), color var(--wp-motion-quick);
+}
+.wp-check svg { width: 9px; height: 9px; display: block; pointer-events: none; }
+.wp-check--sm { width: 12px; height: 12px; border-width: 1px; border-radius: min(2px, var(--wp-radius-cap, 999px)); }
+.wp-check--sm svg { width: 7px; height: 7px; }
+.wp-check:focus-visible { outline: none; box-shadow: var(--wp-focus-ring); }
+.wp-check:where(:not(:disabled, [aria-checked="true"], [aria-checked="mixed"]):hover) { border-color: var(--wp-accent-500); }
+.wp-check:where([aria-invalid="true"]) { border-color: var(--wp-error-border); }
+/* accent-600 under a white mark: ≥ 4.5:1 in both themes. */
+.wp-check:where([aria-checked="true"], [aria-checked="mixed"]) {
+  background: var(--check-on, var(--wp-accent-600));
+  border-color: var(--check-on, var(--wp-accent-500));
+  color: var(--wp-on-accent);
+}
+/* Disabled: grey, so a ticked disabled box doesn't read as a live one. */
+.wp-check:where(:disabled) {
+  cursor: not-allowed;
+  background: var(--wp-bg-3);
+  border-color: var(--wp-border);
+  opacity: 0.6;
+}
+.wp-check:where(:disabled[aria-checked="true"], :disabled[aria-checked="mixed"]) {
+  background: var(--wp-text-dim);
+  border-color: var(--wp-text-dim);
+  color: var(--wp-bg-1);
+}
+
+/* Field look: an input-height box in a form grid. The label fills it, so a
+ * click anywhere toggles once (the label toggles, the box toggles). */
+.wp-checkbox--field {
+  display: flex;
+  width: 100%;
+  height: var(--wp-control-h-md);
+  box-sizing: border-box;
+  gap: 0;
+  background: var(--wp-bg-2);
+  border: 1px solid var(--wp-border);
+  border-radius: var(--wp-radius-sm);
+  transition: border-color var(--wp-motion-quick);
+}
+.wp-checkbox--field.wp-checkbox--sm { height: var(--wp-control-h-sm); }
+.wp-checkbox--field:hover { border-color: var(--wp-border-strong); }
+.wp-checkbox--field:focus-within { border-color: var(--wp-accent-500); }
+.wp-checkbox--field .wp-check { margin-left: 10px; }
+.wp-checkbox--field .wp-checkbox__label {
+  flex: 1;
+  align-self: stretch;
+  display: flex;
+  align-items: center;
+  padding: 0 10px 0 8px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .wp-check, .wp-checkbox--field { transition: none; }
+}
+</style>

package/src/Chip.vue

@@ -94,7 +94,7 @@ function onRemove(e: MouseEvent) {
     <span v-if="dot" class="wp-chip__dot" aria-hidden="true" />
     <!-- 10px sub-ICON_SM: the chip font is 10.5px and a 12px icon read
          oversized next to it. Larger chips get a larger icon. -->
-    <Icon v-if="icon" class="wp-chip__icon" :name="icon" :size="size === 'xs' ? 10 : 11" />
+    <Icon v-if="icon" class="wp-chip__icon" :name="icon" :size="size === 'xs' ? 10 : 12" />
     <slot />
     <span v-if="count !== undefined" class="wp-chip__count">{{ count }}</span>
     <button
@@ -113,7 +113,10 @@ function onRemove(e: MouseEvent) {
 </template>
 
 <style scoped>
-/* xs is the base `.wp-chip` in theme/tokens.css (19px). sm and md sit on the
+/* xs is the base `.wp-chip` in theme/tokens.css, held at 20px here: its
+   content height was 19.2px, which put every icon half a pixel off. */
+.wp-chip--xs { box-sizing: border-box; height: 20px; }
+/* xs is the base `.wp-chip` in theme/tokens.css. sm and md sit on the
    control height scale so a filter row lines up with the fields beside it. */
 .wp-chip--sm, .wp-chip--md {
   height: var(--wp-control-h-sm);

package/src/CodeBlock.vue

@@ -107,7 +107,7 @@ const name = computed(() => props.title ?? props.language ?? "Code");
   margin: 0; padding: 0; border: 0; border-radius: var(--wp-radius-sm);
   background: transparent; color: var(--wp-text-muted); cursor: pointer;
 }
-.wp-code__tool .pi { font-size: 11px; }
+.wp-code__tool .pi { font-size: 12px; }
 .wp-code__tool:hover { background: var(--wp-row-hover); color: var(--wp-text); }
 .wp-code__tool[aria-pressed="true"] { color: var(--wp-accent-text); background: var(--wp-bg-3); }
 .wp-code__tool:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--wp-border-focus); }

package/src/ColorField.vue

@@ -8,14 +8,20 @@
  * so it follows the swatch on scroll and closes on Escape or a click
  * outside. Works on the canvas (`size="sm"`) and in the manager.
  *
+ * `presets` adds a row of preset swatches under the square (`true` for the
+ * kit's COLOUR_PRESETS, or a list of hex colours); a click takes one and
+ * closes. `compact` shows the swatch alone, for a tight spot (a name row).
+ *
  *   <ColorField v-model="labelColor" alpha allow-none size="sm" aria-label="Label band" />
+ *   <ColorField v-model="color" presets size="md" aria-label="Category colour" />
  */
 import { computed, ref, watch } from "vue";
 import HsvPicker from "./HsvPicker.vue";
 import Popover from "./Popover.vue";
 import WpNumber from "./WpNumber.vue";
-import WpButton from "./WpButton.vue";
+import Button from "./Button.vue";
 import { rgbToHex } from "./hsv";
+import { COLOUR_PRESETS } from "./colour-presets";
 
 const props = withDefaults(defineProps<{
   modelValue: string;
@@ -23,11 +29,15 @@ const props = withDefaults(defineProps<{
   alpha?: boolean | undefined;
   /** Offer "None" (writes `none`). */
   allowNone?: boolean | undefined;
+  /** Preset swatches: `true` for COLOUR_PRESETS, or your own hex list. */
+  presets?: readonly string[] | boolean | undefined;
+  /** The swatch alone, without the value beside it. */
+  compact?: boolean | undefined;
   size?: "sm" | "md" | undefined;
   ariaLabel?: string | undefined;
   disabled?: boolean | undefined;
   dataTest?: string | undefined;
-}>(), { alpha: false, allowNone: false, size: "sm", ariaLabel: "Colour", disabled: false, dataTest: undefined });
+}>(), { alpha: false, allowNone: false, presets: false, compact: false, size: "sm", ariaLabel: "Colour", disabled: false, dataTest: undefined });
 
 const emit = defineEmits<{ "update:modelValue": [value: string] }>();
 
@@ -79,6 +89,17 @@ function onDraft(ev: Event): void {
   const p = parse(v);
   if (p) emit("update:modelValue", compose(p.rgb, props.alpha ? p.alpha : 255));
 }
+const presetList = computed<readonly string[]>(() => {
+  if (props.presets === true) return COLOUR_PRESETS;
+  return Array.isArray(props.presets) ? props.presets : [];
+});
+function isActivePreset(preset: string): boolean {
+  return !isNone.value && preset.trim().toLowerCase() === rgb.value && alphaValue.value === 255;
+}
+function pickPreset(preset: string): void {
+  emit("update:modelValue", preset);
+  open.value = false;
+}
 function pickNone(): void {
   emit("update:modelValue", "none");
   open.value = false;
@@ -92,7 +113,7 @@ function pickNone(): void {
         v-bind="triggerProps"
         type="button"
         class="wp-color-field wp-field-box"
-        :class="[`wp-color-field--${size}`, `wp-field-box--${size}`, { 'is-none': isNone }]"
+        :class="[`wp-color-field--${size}`, `wp-field-box--${size}`, { 'is-none': isNone, 'wp-color-field--compact': compact }]"
         :disabled="disabled"
         :aria-label="`${ariaLabel}: ${shown}`"
         :data-test="dataTest"
@@ -100,7 +121,7 @@ function pickNone(): void {
         <span class="wp-color-field__chip" aria-hidden="true">
           <span class="wp-color-field__fill" :style="{ background: swatch }" />
         </span>
-        <span class="wp-color-field__value" aria-hidden="true">{{ shown }}</span>
+        <span v-if="!compact" class="wp-color-field__value" aria-hidden="true">{{ shown }}</span>
       </button>
     </template>
     <div class="wp-color-field__panel" @keydown.stop>
@@ -128,7 +149,21 @@ function pickNone(): void {
           @update:model-value="onOpacity"
         />
       </div>
-      <WpButton
+      <div v-if="presetList.length" class="wp-color-field__presets" role="group" :aria-label="`${ariaLabel} presets`">
+        <button
+          v-for="preset in presetList"
+          :key="preset"
+          type="button"
+          class="wp-color-field__preset"
+          :style="{ background: preset }"
+          :title="preset"
+          :aria-pressed="isActivePreset(preset)"
+          :aria-label="`Use ${preset}`"
+          :data-test="dataTest ? `${dataTest}-preset` : undefined"
+          @click="pickPreset(preset)"
+        />
+      </div>
+      <Button
         v-if="allowNone"
         size="sm"
         variant="ghost"
@@ -136,7 +171,7 @@ function pickNone(): void {
         :pressed="isNone"
         :data-test="dataTest ? `${dataTest}-none` : undefined"
         @click="pickNone"
-      >None</WpButton>
+      >None</Button>
     </div>
   </Popover>
 </template>
@@ -165,6 +200,8 @@ function pickNone(): void {
   /* Checks show through a see-through colour. */
   background: repeating-conic-gradient(var(--wp-bg-4) 0 25%, var(--wp-bg-1) 0 50%) 0 0 / 8px 8px;
 }
+.wp-color-field--md .wp-color-field__chip { width: 20px; height: 20px; border-radius: min(4px, var(--wp-radius-cap, 999px)); }
+.wp-color-field--compact { padding: 0 3px; }
 .wp-color-field__fill { position: absolute; inset: 0; }
 .wp-color-field.is-none .wp-color-field__chip::after {
   content: "";
@@ -185,4 +222,21 @@ function pickNone(): void {
 .wp-color-field__row { display: flex; gap: 6px; align-items: center; }
 .wp-color-field__hex { flex: 1; min-width: 0; height: var(--wp-field-h); padding: 0 6px; font-family: var(--wp-font-mono, monospace); }
 .wp-color-field__alpha { width: 72px; flex: none; }
+.wp-color-field__presets { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
+.wp-color-field__preset {
+  width: 100%;
+  aspect-ratio: 1 / 1;
+  min-width: 0;
+  padding: 0;
+  border: 1px solid var(--wp-border);
+  border-radius: min(4px, var(--wp-radius-cap, 999px));
+  cursor: pointer;
+  transition: transform var(--wp-motion-quick), box-shadow var(--wp-motion-quick);
+}
+.wp-color-field__preset:hover { transform: scale(1.08); }
+.wp-color-field__preset:focus-visible { outline: none; box-shadow: var(--wp-focus-ring); }
+.wp-color-field__preset[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--wp-bg-1), 0 0 0 4px var(--wp-accent-500); }
+@media (prefers-reduced-motion: reduce) {
+  .wp-color-field__preset { transition: none; }
+}
 </style>

package/src/CombinePreview.vue

@@ -0,0 +1,150 @@
+<script setup lang="ts">
+/** Combine: the template in its own block, its negative under it, and a
+ *  list of the variables it reads with where each one is used. */
+import { computed, ref } from "vue";
+import TokenizedValue from "./TokenizedValue.vue";
+import Button from "./Button.vue";
+import { readString, readStrings, scanText, type Obj } from "./preview-readers";
+
+const props = defineProps<{
+  inner: Obj | null;
+  refMap: ReadonlyMap<string, string>;
+}>();
+
+const PAGE = 6;
+
+const template = computed(() => readString(props.inner, "template") ?? "");
+const negative = computed(() => readString(props.inner, "negative") ?? "");
+const output = computed(() => readString(props.inner, "output_var"));
+const tplScan = computed(() => scanText(template.value));
+const negScan = computed(() => scanText(negative.value));
+
+interface InputRow {
+  name: string;
+  where: string;
+}
+const inputs = computed<InputRow[]>(() => {
+  const names = [
+    ...new Set([
+      ...readStrings(props.inner, "input_vars"),
+      ...tplScan.value.vars,
+      ...negScan.value.vars,
+      ...negScan.value.negVars,
+    ]),
+  ];
+  return names.map((name) => {
+    const where: string[] = [];
+    if (tplScan.value.vars.includes(name)) where.push("template");
+    if (negScan.value.vars.includes(name)) where.push("negative");
+    if (negScan.value.negVars.includes(name) || tplScan.value.negVars.includes(name))
+      where.push("negative (.neg)");
+    return { name, where: where.join(", ") || "declared, not used" };
+  });
+});
+const showAll = ref(false);
+const shown = computed(() => (showAll.value ? inputs.value : inputs.value.slice(0, PAGE)));
+</script>
+
+<template>
+  <div class="wp-pv">
+    <div class="wp-pv-stats">
+      <div class="wp-pv-stat">
+        <b>{{ inputs.length }}</b><span>input{{ inputs.length === 1 ? "" : "s" }}</span>
+      </div>
+      <div
+        v-if="tplScan.picks"
+        class="wp-pv-stat"
+      >
+        <b>{{ tplScan.picks }}</b><span>inline pick{{ tplScan.picks === 1 ? "" : "s" }}</span>
+      </div>
+      <div class="wp-pv-stat">
+        <b>{{ negative ? "yes" : "no" }}</b><span>negative</span>
+      </div>
+    </div>
+    <div class="wp-pv-sec">
+      Template<template v-if="output">
+        → <span class="wp-cb__out">${{ output }}</span>
+      </template>
+    </div>
+    <div
+      class="wp-pv-block wp-combine__template"
+      data-test="combine-template"
+    >
+      <TokenizedValue
+        :value="template"
+        :uuid-to-name="refMap"
+      />
+    </div>
+    <template v-if="negative">
+      <div class="wp-pv-sec wp-cb__neglabel">
+        Negative
+      </div>
+      <div
+        class="wp-pv-block wp-pv-block--neg"
+        data-test="combine-negative"
+      >
+        <TokenizedValue
+          :value="negative"
+          :uuid-to-name="refMap"
+        />
+      </div>
+    </template>
+    <template v-if="inputs.length">
+      <div class="wp-pv-sec">
+        Inputs
+      </div>
+      <table class="wp-pv-table">
+        <colgroup>
+          <col style="width: 180px">
+          <col>
+        </colgroup>
+        <tbody>
+          <tr
+            v-for="i in shown"
+            :key="i.name"
+            data-test="combine-input"
+          >
+            <td class="wp-pv-var">
+              ${{ i.name }}
+            </td>
+            <td :class="{ 'wp-cb__unused': i.where === 'declared, not used' }">
+              {{ i.where }}
+            </td>
+          </tr>
+        </tbody>
+      </table>
+      <div
+        v-if="inputs.length > PAGE"
+        class="wp-pv-more"
+      >
+        <Button
+          variant="link"
+          size="sm"
+          @click="showAll = !showAll"
+        >
+          {{ showAll ? "Show fewer" : `Show ${inputs.length - PAGE} more` }}
+        </Button>
+      </div>
+    </template>
+    <div class="wp-cb__pad" />
+  </div>
+</template>
+
+<style scoped src="./preview.css"></style>
+<style scoped>
+.wp-cb__out {
+  font-family: var(--wp-font-mono);
+  color: var(--wp-success);
+  text-transform: none;
+  letter-spacing: 0;
+}
+.wp-cb__neglabel {
+  color: var(--wp-danger-text, var(--wp-danger));
+}
+.wp-cb__unused {
+  color: var(--wp-text-dim);
+}
+.wp-cb__pad {
+  height: 6px;
+}
+</style>