@dumiflex/wp-kit 0.4.0 → 0.6.0

package/src/CodeBlock.vue

@@ -8,17 +8,27 @@
  *   <CodeBlock :code="json" language="JSON" max-height="240px" />
  *   <CodeBlock :code="log" title="Request" line-numbers v-model:wrap="wrap" />
  *
- * No syntax colours (they cost bundle for little gain here). A block that
+ * Syntax colours come from `language` (JSON, TS, Vue/HTML, CSS, shell, the
+ * prompt template grammar; see highlight.ts), or from `syntax` when the head
+ * shows a title instead of a language tag:
+ *
+ *   <CodeBlock :code="template" title="Template" syntax="prompt" />
+ *
+ * Unknown languages stay plain. The colours are shared tokens, so a block
+ * reads right on the canvas, in the manager and in light mode. A block that
  * scrolls can be focused, so the keyboard can scroll it too.
  */
 import { computed, ref, watch } from "vue";
 import CopyButton from "./CopyButton.vue";
 import { vTooltip } from "./tooltip";
+import { highlight, highlightLanguage, highlightLines } from "./highlight";
 
 const props = withDefaults(defineProps<{
   code: string;
-  /** A small tag in the head, e.g. "JSON". */
+  /** A small tag in the head, e.g. "JSON". Also picks the syntax colours. */
   language?: string | undefined;
+  /** Syntax colours without a tag in the head ("prompt", "json", "ts" …). */
+  syntax?: string | undefined;
   /** A name in the head, e.g. "Prompt as sent". */
   title?: string | undefined;
   /** Wrap long lines. Bind with v-model:wrap, or leave it to the button. */
@@ -31,7 +41,7 @@ const props = withDefaults(defineProps<{
   /** Leave out the head (copy and wrap). */
   bare?: boolean | undefined;
   size?: "sm" | "md" | undefined;
-}>(), { language: undefined, title: undefined, wrap: undefined, maxHeight: undefined, size: "md" });
+}>(), { language: undefined, syntax: undefined, title: undefined, wrap: undefined, maxHeight: undefined, size: "md" });
 
 const emit = defineEmits<{ (e: "update:wrap", v: boolean): void }>();
 
@@ -43,7 +53,8 @@ function toggleWrap(): void {
   emit("update:wrap", own.value);
 }
 
-const lines = computed(() => props.code.replace(/\n$/, "").split("\n"));
+const tokens = computed(() => highlight(props.code, highlightLanguage(props.syntax ?? props.language)));
+const lines = computed(() => highlightLines(highlight(props.code.replace(/\n$/, ""), highlightLanguage(props.syntax ?? props.language))));
 const name = computed(() => props.title ?? props.language ?? "Code");
 </script>
 
@@ -69,7 +80,7 @@ const name = computed(() => props.title ?? props.language ?? "Code");
       tabindex="0"
       :aria-label="name"
       :style="{ maxHeight }"
-    ><code v-if="!lineNumbers" class="wp-code__code">{{ code }}</code><code v-else class="wp-code__code wp-code__code--numbered"><span v-for="(l, i) in lines" :key="i" class="wp-code__line"><span class="wp-code__num" aria-hidden="true">{{ i + 1 }}</span><span class="wp-code__text">{{ l || "\u00a0" }}</span></span></code></pre>
+    ><code v-if="!lineNumbers" class="wp-code__code"><template v-for="(t, i) in tokens" :key="i"><span v-if="t.kind !== 'plain'" :class="`wp-code__t--${t.kind}`">{{ t.text }}</span><template v-else>{{ t.text }}</template></template></code><code v-else class="wp-code__code wp-code__code--numbered"><span v-for="(l, i) in lines" :key="i" class="wp-code__line"><span class="wp-code__num" aria-hidden="true">{{ i + 1 }}</span><span class="wp-code__text"><template v-for="(t, j) in l" :key="j"><span v-if="t.kind !== 'plain'" :class="`wp-code__t--${t.kind}`">{{ t.text }}</span><template v-else>{{ t.text }}</template></template><template v-if="!l.length">{{ "\u00a0" }}</template></span></span></code></pre>
   </figure>
 </template>
 
@@ -96,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); }
@@ -104,6 +115,8 @@ const name = computed(() => props.title ?? props.language ?? "Code");
   margin: 0; padding: var(--wp-space-4); overflow: auto;
   color: var(--wp-text); font: 400 var(--wp-text-sm)/1.55 var(--wp-font-mono);
   white-space: pre; tab-size: 2;
+  /* Code shows as written: no `===` or `<!--` ligatures. */
+  font-variant-ligatures: none;
 }
 .wp-code[data-size="sm"] .wp-code__pre { padding: var(--wp-space-3); font-size: var(--wp-text-xs); }
 .wp-code[data-wrap] .wp-code__pre { white-space: pre-wrap; overflow-wrap: anywhere; }
@@ -116,4 +129,18 @@ const name = computed(() => props.title ?? props.language ?? "Code");
   color: var(--wp-text-dim); user-select: none; font-variant-numeric: tabular-nums;
 }
 .wp-code__text { display: table-cell; }
+
+/* Syntax colours: shared tokens only, so they hold on the canvas and in light mode. */
+.wp-code__t--keyword { color: var(--wp-violet); }
+.wp-code__t--string { color: var(--wp-green); }
+.wp-code__t--number { color: var(--wp-amber); }
+.wp-code__t--comment { color: var(--wp-text-dim); font-style: italic; }
+.wp-code__t--punct { color: var(--wp-text-muted); }
+.wp-code__t--key, .wp-code__t--attr { color: var(--wp-teal); }
+.wp-code__t--tag { color: var(--wp-rose); }
+.wp-code__t--fn { color: var(--wp-info); }
+.wp-code__t--var { color: var(--wp-accent-text); }
+.wp-code__t--ref { color: var(--wp-teal); }
+.wp-code__t--brace { color: var(--wp-amber); }
+.wp-code__t--escape { color: var(--wp-text-dim); }
 </style>

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/Combobox.vue

@@ -175,7 +175,7 @@ function setOpen(v: boolean): void {
 <!-- Popover's autofocus prop is off here: focus stays in the box you type in. -->
 <!-- eslint-disable vuejs-accessibility/no-autofocus -->
 <template>
-  <Popover :open="open" role="group" match-width :autofocus="false" :label="`${ariaLabel} choices`" @update:open="setOpen">
+  <Popover :open="open" variant="menu" role="group" match-width :max-height="280" :autofocus="false" :label="`${ariaLabel} choices`" @update:open="setOpen">
     <template #trigger>
       <!-- A click on the box's padding focuses the text field, which has the keys. -->
       <!-- eslint-disable-next-line vuejs-accessibility/click-events-have-key-events, vuejs-accessibility/no-static-element-interactions -->
@@ -245,7 +245,7 @@ function setOpen(v: boolean): void {
         v-for="(o, i) in matches"
         :id="`${listId}-${i}`"
         :key="String(o.value)"
-        class="wp-combo__opt"
+        class="wp-combo__opt wp-menu__item"
         role="option"
         :aria-selected="isPicked(o.value)"
         :aria-disabled="o.disabled || undefined"
@@ -265,6 +265,7 @@ function setOpen(v: boolean): void {
 </template>
 
 <style scoped src="./field.css"></style>
+<style scoped src="./menu.css"></style>
 
 <style scoped>
 .wp-combo {
@@ -284,7 +285,7 @@ function setOpen(v: boolean): void {
   color: var(--wp-text); font-size: var(--wp-text-xs); line-height: 1;
 }
 .wp-combo[data-size="sm"] .wp-combo__chip { height: 16px; padding-left: 5px; font-size: 10.5px; }
-.wp-combo__chip-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.wp-combo__chip-text { min-width: 0; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .wp-combo__remove, .wp-combo__clear {
   display: inline-grid; place-items: center; width: 16px; height: 16px; padding: 0;
   border: 0; border-radius: min(50%, var(--wp-radius-cap, 999px)); background: transparent; color: var(--wp-text-muted); cursor: pointer;
@@ -299,7 +300,7 @@ function setOpen(v: boolean): void {
   position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
   color: var(--wp-text-muted); font-size: 10px; pointer-events: none;
 }
-.wp-combo[data-size="sm"] .wp-combo__caret { right: 8px; font-size: 9px; }
+.wp-combo[data-size="sm"] .wp-combo__caret { right: 8px; font-size: 10px; }
 .wp-combo__field {
   flex: 1 0 6ch; min-width: 6ch; height: calc(var(--_h) - 8px); margin: 0; padding: 0 2px;
   border: 0; outline: none; background: transparent; color: inherit; font: inherit;
@@ -311,20 +312,15 @@ function setOpen(v: boolean): void {
   position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
   clip: rect(0 0 0 0); white-space: nowrap; border: 0;
 }
-.wp-combo__list { margin: calc(var(--wp-space-2) * -1); padding: 0; list-style: none; max-height: 280px; overflow: auto; }
-.wp-combo__opt {
-  display: flex; align-items: flex-start; gap: var(--wp-space-2);
-  padding: 6px var(--wp-space-4) 6px var(--wp-space-2); border-radius: var(--wp-radius-sm);
-  color: var(--wp-text); font-size: var(--wp-text-sm); cursor: pointer;
-}
-.wp-combo__opt:hover, .wp-combo__opt[data-active] { background: var(--wp-row-hover); }
-.wp-combo__opt[data-active] { box-shadow: inset 2px 0 0 var(--wp-accent); }
-.wp-combo__opt[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
+/* The panel and the rows' padding, corners, text and states are the shared
+ * menu look (Popover variant="menu" + menu.css); the list scrolls in the panel. */
+.wp-combo__list { margin: 0; padding: 0; list-style: none; }
+.wp-combo__opt { display: flex; align-items: flex-start; gap: var(--wp-space-2); }
 .wp-combo__tick { width: 14px; margin-top: 2px; font-size: 10px; color: var(--wp-accent); visibility: hidden; }
 .wp-combo__tick[data-on] { visibility: visible; }
 .wp-combo__opt-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
 .wp-combo__hint { color: var(--wp-text-muted); font-size: var(--wp-text-xs); }
-.wp-combo__empty { padding: 6px var(--wp-space-4); color: var(--wp-text-muted); font-size: var(--wp-text-sm); }
+.wp-combo__empty { padding: 6px 8px; color: var(--wp-text-muted); font-size: 12px; }
 @media (prefers-reduced-motion: reduce) {
   .wp-combo { transition: none; }
 }

package/src/ConfirmModal.vue

@@ -2,22 +2,23 @@
 /**
  * Ask before an action, in the manager's own dialog.
  *
- * A thin wrapper on Modal: the same backdrop, focus trap, Escape and focus
- * return as every other manager dialog, with a Cancel button and a confirm
- * button that names the action. The canvas keeps `ConfirmDialog`, which
- * wears the node colours; this one wears the manager's.
+ * Built on Modal: the same backdrop, focus trap, Escape and focus return as
+ * every other dialog, with a Cancel button and a confirm button that names
+ * the action. One confirm for the manager, the canvas and the community site
+ * (ConfirmDialog was folded in: `visible` → `v-model:open`/`open`,
+ * `variant="danger"` → `tone="danger"`); it wears the colours of its side.
  *
  * Escape, the backdrop, the ✕ and Cancel all emit `cancel`. Enter confirms
  * unless focus is on a button or a text box (which then gets the key itself).
- * The `confirm-*` data-test names match ConfirmDialog's, so a test can drive
- * either.
+ * Data-test names: `confirm-title`, `confirm-body`, `confirm-cancel`,
+ * `confirm-confirm`.
  *
  * `requireType` makes the user type that exact text before Confirm works
  * (deleting an account); `confirmDisabled` holds Confirm off for a gate the
  * page owns (a required reason in the slot). `warn` asks about something
  * that can be undone but matters: an outlined button and an info mark.
  */
-import { computed, onBeforeUnmount, ref, watch } from "vue";
+import { computed, ref, watch } from "vue";
 import Modal from "./Modal.vue";
 import Button from "./Button.vue";
 import Icon from "./Icon.vue";
@@ -70,26 +71,15 @@ function onKeydown(ev: KeyboardEvent): void {
   emit("confirm");
 }
 
-watch(
-  () => props.open,
-  (open) => {
-    if (open) {
-      typed.value = "";
-      window.addEventListener("keydown", onKeydown);
-    }
-    else window.removeEventListener("keydown", onKeydown);
-  },
-  { immediate: true },
-);
-onBeforeUnmount(() => window.removeEventListener("keydown", onKeydown));
+watch(() => props.open, (open) => { if (open) typed.value = ""; }, { immediate: true });
 </script>
 
 <template>
-  <Modal :open="open" size="sm" @update:open="onOpen">
+  <Modal :open="open" size="sm" @update:open="onOpen" @keydown="onKeydown">
     <template #header="{ titleId }">
       <span class="wp-confirm-modal__head" :class="`wp-confirm-modal__head--${tone}`">
         <Icon :name="tone === 'danger' ? 'exclamation-triangle' : 'info-circle'" />
-        <h3 :id="titleId" class="wp-modal__title" data-test="confirm-title">{{ title }}</h3>
+        <h3 :id="titleId" class="wp-confirm-modal__title" data-test="confirm-title">{{ title }}</h3>
       </span>
     </template>
     <div class="wp-confirm-modal__body">
@@ -123,7 +113,7 @@ onBeforeUnmount(() => window.removeEventListener("keydown", onKeydown));
 }
 .wp-confirm-modal__head--danger { color: var(--wp-danger); }
 .wp-confirm-modal__head--warn { color: var(--wp-warn); }
-.wp-confirm-modal__head .wp-modal__title { color: var(--wp-text); }
+.wp-confirm-modal__title { margin: 0; font-size: var(--wp-text-md); font-weight: 600; color: var(--wp-text); }
 .wp-confirm-modal__text {
   margin: 0;
   color: var(--wp-text-muted);

package/src/ContextMenu.vue

@@ -204,7 +204,7 @@ function isSectionEntry(entry: ContextMenuEntry): entry is ContextMenuSection {
     <ul
       v-if="visible"
       ref="menuEl"
-      class="wp-ctxmenu"
+      class="wp-ctxmenu wp-menu"
       :style="{ left: `${pos.x}px`, top: `${pos.y}px` }"
       role="menu"
       @click.stop
@@ -235,7 +235,8 @@ function isSectionEntry(entry: ContextMenuEntry): entry is ContextMenuSection {
                can't see it); keys come from the menu's own keydown. -->
           <!-- eslint-disable-next-line vuejs-accessibility/no-static-element-interactions, vuejs-accessibility/click-events-have-key-events, vuejs-accessibility/mouse-events-have-key-events -->
           <li
-            class="wp-ctxmenu__item"
+            class="wp-ctxmenu__item wp-menu__item"
+            :data-active="activeIndex === i || undefined"
             :class="{
               'wp-ctxmenu__item--danger': entry.danger,
               'wp-ctxmenu__item--accent': entry.accent,
@@ -268,26 +269,16 @@ function isSectionEntry(entry: ContextMenuEntry): entry is ContextMenuSection {
   </Teleport>
 </template>
 
+<style scoped src="./menu.css"></style>
+
 <style scoped>
+/* The panel (background, border, corners, padding, shadow, layer, text) and
+ * the rows' padding, corners and hover / active / disabled states are the
+ * shared menu look (menu.css), the same as Select's and Combobox's lists. */
 .wp-ctxmenu {
   position: fixed;
-  z-index: 10000;
-  background: var(--wp-bg-2);
-  border: 1px solid var(--wp-border-strong);
-  border-radius: var(--wp-radius-sm);
-  box-shadow: var(--wp-shadow-md);
-  /* Tighter padding than the old 4px-0 to match the v2 mockup. Items
-   * carry their own 6px padding + rounded corners so the menu reads
-   * as a stack of pills, not a flat list. */
-  padding: 4px;
-  /* Bumped from 180px to 250px — subtitles wrap awkwardly at narrower
-   * widths. Existing callers without subtitles still fit comfortably. */
+  /* Subtitles wrap awkwardly below 250px. */
   min-width: 250px;
-  list-style: none;
-  margin: 0;
-  font-family: var(--wp-font-sans, sans-serif);
-  font-size: 12px;
-  color: var(--wp-text);
   user-select: none;
 }
 /* Header — scope label at the top of the menu. Border-bottom acts as
@@ -319,21 +310,16 @@ function isSectionEntry(entry: ContextMenuEntry): entry is ContextMenuSection {
   padding: 6px 8px 4px 8px;
 }
 .wp-ctxmenu__item {
-  padding: 6px 8px;
-  border-radius: min(4px, var(--wp-radius-cap, 999px));
-  cursor: pointer;
   white-space: nowrap;
   display: flex;
   align-items: center;
   gap: 8px;
 }
-.wp-ctxmenu__item--active,
-.wp-ctxmenu__item:hover { background: var(--wp-accent-glow); color: var(--wp-accent); }
 /* A checkable item's tick: always takes its room, shows only when on. */
 .wp-ctxmenu__check { width: 14px; font-size: 11px; text-align: center; visibility: hidden; color: var(--wp-accent); }
 .wp-ctxmenu__check[data-on] { visibility: visible; }
 .wp-ctxmenu__item--danger { color: var(--wp-red); }
-.wp-ctxmenu__item--danger.wp-ctxmenu__item--active,
+.wp-ctxmenu__item--danger[data-active="true"],
 .wp-ctxmenu__item--danger:hover { background: var(--wp-red-bg); color: var(--wp-red); }
 /* Accent variant — recommended action highlight. Tinted background +
  * accent text in idle state so the eye lands on it; hover uses the
@@ -342,16 +328,11 @@ function isSectionEntry(entry: ContextMenuEntry): entry is ContextMenuSection {
   color: var(--wp-accent);
   background: color-mix(in oklab, var(--wp-accent) 12%, transparent);
 }
-.wp-ctxmenu__item--accent.wp-ctxmenu__item--active,
+.wp-ctxmenu__item--accent[data-active="true"],
 .wp-ctxmenu__item--accent:hover {
   background: var(--wp-accent-glow);
   color: var(--wp-accent);
 }
-.wp-ctxmenu__item--disabled {
-  color: var(--wp-text-dim);
-  cursor: not-allowed;
-}
-.wp-ctxmenu__item--disabled:hover { background: transparent; color: var(--wp-text-dim); }
 .wp-ctxmenu__icon,
 .wp-ctxmenu__icon-spacer {
   width: 14px;

package/src/CopyButton.vue

@@ -119,7 +119,7 @@ onBeforeUnmount(() => clearTimeout(timer));
 .wp-copy-btn[data-size="lg"] { min-width: var(--wp-control-h-lg); height: var(--wp-control-h-lg); }
 .wp-copy-btn[data-variant="secondary"] { background: var(--wp-bg-3); border-color: var(--wp-border); color: var(--wp-text); }
 .wp-copy-btn:not([data-inline]) .pi { font-size: 12px; }
-.wp-copy-btn[data-size="sm"]:not([data-inline]) .pi { font-size: 11px; }
+.wp-copy-btn[data-size="sm"]:not([data-inline]) .pi { font-size: 12px; }
 .wp-copy-btn:not([data-inline]):hover:not(:disabled) { background: var(--wp-bg-3); border-color: var(--wp-border); color: var(--wp-text); }
 .wp-copy-btn[data-variant="secondary"]:hover:not(:disabled) { background: var(--wp-bg-4); border-color: var(--wp-border-strong); }
 .wp-copy-btn:not([data-inline]):focus-visible { outline: none; box-shadow: 0 0 0 2px var(--wp-border-focus); }

package/src/DataTable.vue

@@ -24,6 +24,7 @@
  */
 import { computed } from "vue";
 import Checkbox from "./Checkbox.vue";
+import Skeleton from "./Skeleton.vue";
 
 export interface DataColumn<R> {
   key: string;
@@ -164,7 +165,6 @@ const span = computed(() => props.columns.length + (props.selectable ? 1 : 0));
         <tr>
           <th v-if="selectable" class="wp-data-table__check" scope="col">
             <Checkbox
-              class="wp-checkbox--inline"
               :model-value="allPicked"
               :indeterminate="somePicked"
               :disabled="loading || allKeys.length === 0"
@@ -202,8 +202,8 @@ const span = computed(() => props.columns.length + (props.selectable ? 1 : 0));
       </thead>
       <tbody>
         <template v-if="loading && rows.length === 0">
-          <tr v-for="n in loadingRows" :key="`skel-${n}`" class="wp-row-skel" aria-hidden="true">
-            <td v-for="i in span" :key="i"><span class="wp-skel-bar" :style="{ width: `${40 + ((n * 17 + i * 23) % 50)}%` }" /></td>
+          <tr v-for="n in loadingRows" :key="`skel-${n}`" class="wp-data-table__loading" aria-hidden="true">
+            <td v-for="i in span" :key="i"><Skeleton :width="`${40 + ((n * 17 + i * 23) % 50)}%`" /></td>
           </tr>
         </template>
         <tr v-else-if="shown.length === 0" class="wp-data-table__empty">
@@ -226,7 +226,6 @@ const span = computed(() => props.columns.length + (props.selectable ? 1 : 0));
           >
             <td v-if="selectable" class="wp-data-table__check" @click.stop>
               <Checkbox
-                class="wp-checkbox--inline"
                 :model-value="picked.has(keyOf(row))"
                 aria-label="Select row"
                 @update:model-value="(on: boolean) => toggleRow(row, on)"

package/src/DatePicker.vue

@@ -209,7 +209,7 @@ function clear(): void {
   padding: 0 var(--wp-space-2); border: 0; border-radius: var(--wp-radius-sm);
   background: transparent; color: var(--wp-text-muted); cursor: pointer; font: inherit;
 }
-.wp-date__nav .pi { font-size: 11px; }
+.wp-date__nav .pi { font-size: 12px; }
 .wp-date__nav:hover, .wp-date__link:hover:not(:disabled) { background: var(--wp-row-hover); color: var(--wp-text); }
 .wp-date__nav:focus-visible, .wp-date__link:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--wp-border-focus); }
 .wp-date__link:disabled { opacity: 0.45; cursor: not-allowed; }

package/src/Disclosure.vue

@@ -120,7 +120,8 @@ function toggle(): void {
 .wp-disclosure__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .wp-disclosure__chev {
   flex: none;
-  font-size: 0.75em;
+  /* A whole even size: 0.75em came to 9px and sat half a pixel off. */
+  font-size: 10px;
   color: var(--wp-text-muted);
   transition: transform var(--wp-motion-swap) var(--wp-motion-curve-collapse);
 }

package/src/Drawer.vue

@@ -5,7 +5,7 @@
  * Tab stays inside it and focus goes back where it was. With `modal` off
  * there is no backdrop, Tab moves on to the page and the page stays usable.
  */
-import CloseButton from "./CloseButton.vue";
+import Button from "./Button.vue";
 import { ref, useId, useSlots } from "vue";
 import { useDialogFocus } from "./useDialogFocus";
 
@@ -66,7 +66,7 @@ useDialogFocus(panel, () => props.open, {
           <h3 v-if="title" :id="titleId" class="wp-drawer__title">{{ title }}</h3>
           <slot name="header" />
           <span class="wp-spacer" />
-          <CloseButton kbd="Esc" data-test="drawer-close" @click="close" />
+          <Button variant="ghost" icon="times" aria-label="Close" kbd="Esc" data-test="drawer-close" @click="close" />
         </header>
         <div class="wp-drawer__body">
           <slot />

package/src/DropZone.vue

@@ -15,7 +15,7 @@
  */
 import { computed, ref } from "vue";
 import { dragItemMaybeAccepted, fileAccepted, formatBytes } from "./drop-zone";
-import WpButton from "./WpButton.vue";
+import Button from "./Button.vue";
 
 export interface RejectedFile { file: File; reason: string }
 
@@ -152,7 +152,7 @@ defineExpose({ browse });
       <span class="wp-drop__label">{{ over === "refuse" ? refuseWhy : mainLabel }}</span>
       <span v-if="hint && over !== 'refuse'" class="wp-drop__hint">{{ hint }}{{ maxSize ? ` · up to ${formatBytes(maxSize)}` : "" }}</span>
     </span>
-    <WpButton class="wp-drop__browse" variant="secondary" size="sm" icon="pi-folder-open" :disabled="disabled" @click="browse">{{ browseLabel }}</WpButton>
+    <Button class="wp-drop__browse" variant="secondary" size="sm" icon="pi-folder-open" :disabled="disabled" @click="browse">{{ browseLabel }}</Button>
     <input ref="inputEl" class="wp-drop__input" type="file" :accept="accept" :multiple="multiple" tabindex="-1" aria-hidden="true" @change="onPicked">
   </div>
 </template>

package/src/HsvPicker.vue

@@ -2,7 +2,7 @@
 /**
  * HsvPicker — saturation/value square + hue slider.
  *
- * Shared between manager ColorPicker / TweaksPanel AND the canvas
+ * Shared between ColorField / TweaksPanel AND the canvas
  * bundle modal. CSS uses `--wp-*` tokens with hardcoded fallbacks so
  * the picker renders inside the extension where the manager spacing
  * tokens (`--wp-space-*`) aren't loaded.
@@ -167,7 +167,7 @@ const hueCursorStyle = computed(() => ({
   position: absolute;
   width: 14px;
   height: 14px;
-  border-radius: 50%; /* round: picker cursor on the colour field */
+  border-radius: min(50%, var(--wp-radius-cap, 999px));
   border: 2px solid #fff;
   box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), 0 1px 2px rgba(0, 0, 0, 0.45);
   transform: translate(-50%, -50%);

package/src/IconPicker.vue

@@ -144,7 +144,7 @@ function pick(name: string | null): void {
   line-height: 1;
 }
 .wp-iconpick__none { color: var(--wp-text-dim); line-height: 1; }
-.wp-iconpick__caret { font-size: 9px; color: var(--wp-text-dim); line-height: 1; }
+.wp-iconpick__caret { font-size: 10px; color: var(--wp-text-dim); line-height: 1; }
 </style>
 
 <style>