@dumiflex/wp-kit 0.5.0 → 0.6.0

package/CHANGELOG.md

@@ -1,5 +1,37 @@
 # Changelog
 
+## [0.6.0](https://github.com/DumiFlex/wp-kit/compare/v0.5.0...v0.6.0) (2026-11-02)
+
+
+### ⚠ BREAKING CHANGES
+
+* WpButton, CloseButton and ConfirmDialog are removed. Use Button (size="sm" on the canvas; variant="ghost" icon="times" aria-label="Close" for a close button) and ConfirmModal (visible -> open, variant="danger" -> tone="danger"). Button shows its aria-label as a kit tooltip instead of a title attribute. Modal's panel classes are scoped; a ModalShell backdrop close needs mousedown and click on the backdrop.
+* RangeSlider is removed (use Slider with a [low, high] v-model); _skeleton.css and .wp-skel-bar are removed (use Skeleton); unused global classes are removed from theme/tokens.css.
+* WpCheck is removed; use Checkbox (same v-model, size, disabled and --check-on). Toggle is removed; use <WpSwitch size="md"> (error becomes invalid). ColorPicker is removed; use <ColorField presets size="md"> (test hooks are <dataTest>, <dataTest>-preset, <dataTest>-hex). The global .wp-check, .wp-checkbox* and .wp-radio classes are removed.
+
+### Features
+
+* **site:** API tables under every piece, read from the components' own types ([#58](https://github.com/DumiFlex/wp-kit/issues/58)) ([e23973a](https://github.com/DumiFlex/wp-kit/commit/e23973acf57f158068594dc0d63f8172084ab945))
+* **site:** search bar that finds pieces and sections ([#52](https://github.com/DumiFlex/wp-kit/issues/52)) ([8989669](https://github.com/DumiFlex/wp-kit/commit/8989669c43bc8f1511266525ee6a8b9007ee2891))
+* Slider snap settles the thumb on its marks (all the time, or within a distance) ([#60](https://github.com/DumiFlex/wp-kit/issues/60)) ([9b1b5ac](https://github.com/DumiFlex/wp-kit/commit/9b1b5acf1f0d604814b300d7158691fbab007ee0))
+* WorkingLine and entrance classes; AI animations on the kit site ([#56](https://github.com/DumiFlex/wp-kit/issues/56)) ([430df62](https://github.com/DumiFlex/wp-kit/commit/430df624e27e9181d174a7572f70369c7a7b428c))
+
+
+### Bug Fixes
+
+* centre icons on whole pixels; no link underline on a link drawn as a button ([#59](https://github.com/DumiFlex/wp-kit/issues/59)) ([9de9468](https://github.com/DumiFlex/wp-kit/commit/9de94684688879cdd396f948b54650c43918a9fc))
+* chip text clipped in Firefox, refresh icon wobbling as it spins ([#53](https://github.com/DumiFlex/wp-kit/issues/53)) ([02e0c84](https://github.com/DumiFlex/wp-kit/commit/02e0c8405293e39206ea8c810822b00029ee2f44))
+* circles follow the look's corner cap (square in Terminal and TUI) ([#61](https://github.com/DumiFlex/wp-kit/issues/61)) ([7ae84ba](https://github.com/DumiFlex/wp-kit/commit/7ae84baae4024e20b4e67f7b5fb4ec314d3a55b4))
+* tooltip and popover outlines survive a host's CSS reset ([#63](https://github.com/DumiFlex/wp-kit/issues/63)) ([fd8a334](https://github.com/DumiFlex/wp-kit/commit/fd8a334ac86cca52f83f9e0ac7b3bc3ed3b92a98))
+
+
+### Refactoring
+
+* fold RangeSlider into Slider, drop dead global CSS; write the one-piece rule ([#57](https://github.com/DumiFlex/wp-kit/issues/57)) ([2e5d024](https://github.com/DumiFlex/wp-kit/commit/2e5d0240bbb78b467940f19ee50f4de0623ef69d))
+* one Button and one Modal (WpButton, CloseButton and ConfirmDialog folded in) ([#62](https://github.com/DumiFlex/wp-kit/issues/62)) ([591546d](https://github.com/DumiFlex/wp-kit/commit/591546db46a1d6f3fa6ccef10c484bbe40689e94))
+* one Checkbox, one switch, one colour field ([#54](https://github.com/DumiFlex/wp-kit/issues/54)) ([06dba67](https://github.com/DumiFlex/wp-kit/commit/06dba67d9495773bcb1088c09763b30654972bff))
+* one menu (menu.css, Popover variant="menu", Select on Popover) ([#55](https://github.com/DumiFlex/wp-kit/issues/55)) ([e39dc1f](https://github.com/DumiFlex/wp-kit/commit/e39dc1f27f8d0d1efec5bae609b0bf19543d015b))
+
 ## [0.5.0](https://github.com/DumiFlex/wp-kit/compare/v0.4.0...v0.5.0) (2026-11-02)
 
 

package/README.md

@@ -57,6 +57,11 @@ If you already import the kit as `@/kit/...`, alias `@/kit` to `node_modules/@du
 
 - **Vue 3.5** and **PrimeIcons 7** (peer dependencies). Icons are `pi pi-*` classes. The kit imports nothing else at runtime.
 - **A theme:** the kit's own sheets above. A host with its own colour sheet can define the names in [`SHARED_TOKENS`](https://github.com/DumiFlex/wp-kit/blob/main/src/tokens.ts) instead and use the pieces that read only those.
+- **A layer order, if your app uses cascade layers** (Tailwind 4 does). A few pieces (the tooltip, Popover, DropdownMenu, the entrance classes) put their rules in `@layer wp-extension`, so a host page's unlayered CSS wins a clash (that keeps the kit polite on the ComfyUI canvas). Their outlines are drawn as rings, so a reset like Tailwind's preflight (`border-width: 0`) can't strip them. If your own CSS is layered, declare the order in your page's `<head>`, before any stylesheet, with the kit above your reset and below your utilities:
+
+  ```html
+  <style>@layer theme, base, wp-extension, components, utilities;</style>
+  ```
 
 ## Versions
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dumiflex/wp-kit",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "Vue 3 component kit shared by the Wildcard Pipeline manager, canvas and community site.",
   "keywords": [
     "vue",
@@ -53,8 +53,8 @@
     "npm-readme": "node scripts/npm-readme.mjs"
   },
   "peerDependencies": {
-    "vue": "^3.5.0",
-    "primeicons": "^7.0.0 || ^8.0.0"
+    "primeicons": "^7.0.0 || ^8.0.0",
+    "vue": "^3.5.0"
   },
   "devDependencies": {
     "@types/node": "^22.10.0",
@@ -72,6 +72,7 @@
     "vite": "5.4.21",
     "vitest": "2.1.9",
     "vue": "3.5.44",
+    "vue-component-meta": "2.2.12",
     "vue-eslint-parser": "10.4.0",
     "vue-tsc": "2.2.12"
   }

package/src/Avatar.vue

@@ -68,7 +68,7 @@ const hue = computed(() => {
 .wp-avatar {
   --_s: var(--wp-control-h-md);
   position: relative; display: inline-grid; place-items: center; flex: none; overflow: hidden;
-  width: var(--_s); height: var(--_s); border-radius: 50%; /* round: avatar */
+  width: var(--_s); height: var(--_s); border-radius: min(50%, var(--wp-radius-cap, 999px));
   background: color-mix(in srgb, var(--_hue) 22%, var(--wp-bg-2));
   color: color-mix(in srgb, var(--_hue) 70%, var(--wp-text));
   box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--_hue) 30%, transparent);

package/src/Banner.vue

@@ -14,7 +14,7 @@
  * that is part of the page (a docs tip): `role="note"`, never announced.
  */
 import { computed, useSlots } from "vue";
-import CloseButton from "./CloseButton.vue";
+import Button from "./Button.vue";
 
 export type BannerTone = "neutral" | "info" | "success" | "warn" | "danger" | "accent";
 
@@ -60,11 +60,11 @@ const iconClass = computed(() => props.icon ?? TONE_ICON[props.tone]);
       <div v-if="slots.default" class="wp-banner__text"><slot /></div>
     </div>
     <div v-if="slots.actions" class="wp-banner__actions"><slot name="actions" /></div>
-    <CloseButton
-      v-if="dismissible"
+    <Button v-if="dismissible" variant="ghost"
+      icon="times"
       class="wp-banner__close"
       size="sm"
-      :label="dismissLabel"
+      :aria-label="dismissLabel"
       @click="emit('dismiss')"
     />
   </div>

package/src/Button.vue

@@ -1,103 +1,132 @@
 <script setup lang="ts">
 /**
- * Button — single source of truth for app buttons.
+ * Button: the one button, in the manager, on the canvas and on the
+ * community site (WpButton and CloseButton were folded in).
+ *
+ *   <Button variant="primary" icon="plus">Add module</Button>
+ *   <Button variant="ghost" icon="download" aria-label="Download snapshot" />
+ *   <Button variant="ghost" icon="times" aria-label="Close" kbd="Esc" @click="close" />
+ *   <Button variant="add" icon="plus" size="sm" block>Add rule</Button>
+ *   <Button as="a" href="/docs" variant="link">Read the docs</Button>
  *
  * Variants:
- *   primary   — solid accent; main CTA per surface
- *   secondary — subtle filled; default
- *   ghost     — transparent with hover bg; tertiary
- *   danger    — red-tinted; destructive actions
- *   link      — text-only; inline CTAs
- *   outline   — neutral bordered ghost (not accent: an accent outline read as
- *               a second primary)
- *   add       — dashed, quiet: the "Add a row" button at the end of a list
+ *   primary   solid accent; the main action of a surface
+ *   secondary subtle filled; the default
+ *   ghost     transparent with a hover fill; tertiary actions, close (×)
+ *   danger    red-tinted; destructive actions
+ *   link      text only; inline actions
+ *   outline   neutral bordered ghost (an accent outline read as a second primary)
+ *   add       dashed and quiet: the "Add a row" button at the end of a list
  *
- * `block` stretches it to the full width of its container. `pressed` makes
- * it a toggle (aria-pressed, accent tint while on).
+ * Sizes follow the control scale: sm 24 (the canvas) / md 32 (default) / lg 40.
+ * `icon` / `iconRight` take a PrimeIcons name, with or without `pi-`.
  *
- * Sizes follow the control scale: sm 24 / md 32 (default) / lg 40.
+ * With no slot content it is an icon button (square, `.wp-btn--icon`); give
+ * it an `aria-label`, which is also its tooltip (`hint` sets another, `kbd`
+ * adds a key chip). Use `hint`, not `v-tooltip` on the component, which would
+ * fight the button's own. `pressed` makes it a toggle (aria-pressed, accent
+ * tint while on). `block` stretches it to its container.
  *
- * States: default · hover · active · focus-visible · disabled · loading.
  * Disabled fades to 45% with a not-allowed cursor and no hover change.
- * Loading keeps the variant's own colours, swaps the lead icon for the
- * sparkle LoadingMark in the label colour, sets aria-busy and ignores clicks.
+ * Loading keeps the variant's colours, swaps the lead icon for the sparkle,
+ * sets aria-busy and ignores clicks.
  *
- * Icon-only mode auto-engages when no slot content is provided (.wp-btn--icon).
- * Pass `aria-label` for screen reader text when using icon-only mode.
+ * `as="a"` draws a link that looks like a button (pass `href`, `target`…);
+ * disabled then sets aria-disabled and takes it out of the tab order.
  *
- * The styles live in kit/button.css, shared with the canvas
- * Button twin.
+ * Its stylesheet (`button.css`) is pulled in scoped, so the canvas never
+ * carries the `.wp-btn` classes globally; the manager also loads it globally
+ * for the few hand-written `.wp-btn` links. Row icon buttons on the canvas
+ * are WpIconButton.
  */
 import { computed, useSlots } from "vue";
 import Icon from "./Icon.vue";
 import LoadingMark from "./LoadingMark.vue";
+import { vTooltip } from "./tooltip";
 
 type Variant = "primary" | "secondary" | "ghost" | "danger" | "link" | "outline" | "add";
 type Size = "sm" | "md" | "lg";
 
-interface Props {
+const props = withDefaults(defineProps<{
   variant?: Variant | undefined;
   size?: Size | undefined;
+  /** PrimeIcons name ("plus" or "pi-plus"), drawn before the label. */
   icon?: string | undefined;
+  /** PrimeIcons name drawn after the label (a chevron, an external link). */
   iconRight?: string | undefined;
   loading?: boolean | undefined;
   disabled?: boolean | undefined;
+  /** Stretch to the container's full width. */
   block?: boolean | undefined;
   /** Makes it a toggle (`aria-pressed`): on, it wears the accent tint. */
   pressed?: boolean | undefined;
   type?: "button" | "submit" | "reset" | undefined;
   ariaLabel?: string | undefined;
-}
-const props = withDefaults(defineProps<Props>(), {
+  /** Tooltip text; an icon button shows its aria-label when this is unset. */
+  hint?: string | undefined;
+  /** A shortcut shown in the tooltip's key chip, e.g. "Esc". */
+  kbd?: string | undefined;
+  /** `a` draws a link that looks like a button. */
+  as?: "button" | "a" | undefined;
+}>(), {
   variant: "secondary",
   size: "md",
   type: "button",
   pressed: undefined,
+  icon: undefined,
+  iconRight: undefined,
+  ariaLabel: undefined,
+  hint: undefined,
+  kbd: undefined,
+  as: "button",
 });
 
-const emit = defineEmits<{
-  (e: "click", evt: MouseEvent): void;
-}>();
+const emit = defineEmits<{ click: [evt: MouseEvent] }>();
 
 const slots = useSlots();
-
-const hasContent = computed(() => Boolean(slots.default));
-
-/** Native hover tooltip for icon-only buttons. Their `aria-label` names them
- *  for screen readers, but a sighted user hovering a bare icon gets nothing —
- *  so mirror the label into `title` when there's no visible text. A button with
- *  text already says what it does, so it stays untitled. */
-const titleAttr = computed(() =>
-  !hasContent.value && props.ariaLabel ? props.ariaLabel : undefined);
+const iconOnly = computed(() => !slots.default);
+const isLink = computed(() => props.as === "a");
+const off = computed(() => Boolean(props.disabled || props.loading));
 
 const classes = computed(() => [
   "wp-btn",
   `wp-btn--${props.variant}`,
   `wp-btn--${props.size}`,
-  !hasContent.value && "wp-btn--icon",
+  iconOnly.value && "wp-btn--icon",
   props.block && "wp-btn--block",
 ]);
 
-function onClick(e: MouseEvent) {
-  if (props.disabled || props.loading) return;
+const markSize = computed(() => (props.size === "lg" ? 16 : props.size === "md" ? 14 : 12));
+
+function onClick(e: MouseEvent): void {
+  if (off.value) {
+    // A link can't be disabled natively; stop it following its href.
+    if (isLink.value) e.preventDefault();
+    return;
+  }
   emit("click", e);
 }
 </script>
 
 <template>
-  <button
-    :type="type"
+  <component
+    :is="as"
+    v-tooltip="{ text: hint ?? (iconOnly ? ariaLabel : undefined), kbd }"
+    :type="isLink ? undefined : type"
     :class="classes"
-    :disabled="disabled || loading"
+    :disabled="isLink ? undefined : off"
+    :aria-disabled="isLink && off ? 'true' : undefined"
+    :tabindex="isLink && off ? -1 : undefined"
     :aria-label="ariaLabel"
-    :title="titleAttr"
     :aria-busy="loading || undefined"
     :aria-pressed="pressed === undefined ? undefined : pressed"
     @click="onClick"
   >
-    <LoadingMark v-if="loading" variant="sparkle" mono :size="size === 'lg' ? 16 : 14" decorative />
+    <LoadingMark v-if="loading" variant="sparkle" mono :size="markSize" decorative />
     <Icon v-else-if="icon" :name="icon" />
-    <span v-if="hasContent" class="wp-btn__label"><slot /></span>
+    <span v-if="!iconOnly" class="wp-btn__label"><slot /></span>
     <Icon v-if="iconRight" :name="iconRight" />
-  </button>
+  </component>
 </template>
+
+<style scoped src="./button.css"></style>

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); }