@dumiflex/wp-kit 0.8.0 → 0.10.0

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # Changelog
 
+## [0.10.0](https://github.com/DumiFlex/wp-kit/compare/v0.9.0...v0.10.0) (2026-11-03)
+
+
+### Features
+
+* Combobox mono, for variable names and ids ([e9ddc4f](https://github.com/DumiFlex/wp-kit/commit/e9ddc4f7a5c78e1a2f2adfe8d69046f771d95840))
+
+
+### Bug Fixes
+
+* Chip carries its own base styles, so it is styled on the ComfyUI canvas ([5d81a79](https://github.com/DumiFlex/wp-kit/commit/5d81a791010a9a72c5491dfc08cc1ed44af1b25f))
+
+## [0.9.0](https://github.com/DumiFlex/wp-kit/compare/v0.8.0...v0.9.0) (2026-11-03)
+
+
+### Features
+
+* named colour swatches with a swatch slot, and a natural-shape ImageGrid ([4184232](https://github.com/DumiFlex/wp-kit/commit/4184232477b87557298c10c1b7d9310664f6c0a2))
+
+
+### Bug Fixes
+
+* draw the switch track in one piece at canvas zooms ([#84](https://github.com/DumiFlex/wp-kit/issues/84)) ([9d38d0d](https://github.com/DumiFlex/wp-kit/commit/9d38d0d71dc2a855f72de8925cd774eb05b35d10))
+
 ## [0.8.0](https://github.com/DumiFlex/wp-kit/compare/v0.7.1...v0.8.0) (2026-11-03)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dumiflex/wp-kit",
-  "version": "0.8.0",
+  "version": "0.10.0",
   "description": "Vue 3 component kit shared by the Wildcard Pipeline manager, canvas and community site.",
   "keywords": [
     "vue",

package/src/Chip.vue

@@ -129,6 +129,47 @@ function onRemove(e: MouseEvent) {
 </template>
 
 <style scoped>
+/* The base pill, its tones, dot and ✕ live here too, not only in the page
+   theme (theme/tokens.css), so a Chip on the ComfyUI canvas, which never
+   loads that sheet, is styled the same. Shared tokens only. */
+.wp-chip {
+  display: inline-flex; align-items: center; gap: 4px;
+  padding: 1px 7px;
+  border: 1px solid var(--wp-border);
+  border-radius: var(--wp-radius-cap, 999px);
+  background: var(--wp-bg-3);
+  color: var(--wp-text-muted);
+  font-family: var(--wp-font-sans);
+  font-size: 10.5px;
+  font-weight: 500;
+  white-space: nowrap;
+}
+.wp-chip--accent {
+  color: var(--wp-accent-text-strong);
+  background: color-mix(in oklab, var(--wp-accent-500) 16%, transparent);
+  border-color: color-mix(in oklab, var(--wp-accent-500) 38%, transparent);
+}
+.wp-chip--success { color: var(--wp-success); background: color-mix(in oklab, var(--wp-success) 14%, transparent); border-color: color-mix(in oklab, var(--wp-success) 36%, transparent); }
+.wp-chip--warn { color: var(--wp-warn); background: color-mix(in oklab, var(--wp-warn) 14%, transparent); border-color: color-mix(in oklab, var(--wp-warn) 36%, transparent); }
+.wp-chip--danger { color: var(--wp-danger); background: color-mix(in oklab, var(--wp-danger) 14%, transparent); border-color: color-mix(in oklab, var(--wp-danger) 36%, transparent); }
+.wp-chip--info { color: var(--wp-info); background: color-mix(in oklab, var(--wp-info) 14%, transparent); border-color: color-mix(in oklab, var(--wp-info) 36%, transparent); }
+.wp-chip__dot { width: 7px; height: 7px; border-radius: var(--wp-radius-cap, 999px); background: currentColor; }
+.wp-chip__close {
+  position: relative; display: inline-grid; place-items: center;
+  width: 12px; height: 12px; margin: 0 -2px 0 1px; padding: 0;
+  border: none; border-radius: 0; background: none;
+  color: inherit; opacity: 0.65; cursor: pointer; line-height: 0;
+  transition: opacity var(--wp-motion-quick) ease;
+}
+.wp-chip__close::after { content: ""; position: absolute; inset: -4px; }
+.wp-chip__close:hover { opacity: 1; }
+.wp-chip__close:focus-visible { outline: 2px solid var(--wp-accent-500); outline-offset: 1px; border-radius: min(2px, var(--wp-radius-cap, 999px)); opacity: 1; }
+.wp-chip--color { font-weight: 500; }
+/* A bordered pill on the canvas: a radius a hair under half its height, so
+   Firefox draws it in one piece at ComfyUI's zooms (0.64, 0.8). */
+.wp-chip--xs { border-radius: min(9px, var(--wp-radius-cap, 999px)); }
+.wp-chip--sm { border-radius: min(calc(var(--wp-control-h-sm) / 2 - 1px), var(--wp-radius-cap, 999px)); }
+.wp-chip--md { border-radius: min(calc(var(--wp-control-h-md) / 2 - 1px), var(--wp-radius-cap, 999px)); }
 /* 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; }
@@ -207,7 +248,7 @@ function onRemove(e: MouseEvent) {
 }
 .wp-chip__stat-n {
   font-size: var(--wp-text-xl);
-  font-weight: var(--wp-weight-semibold);
+  font-weight: 600;
   font-variant-numeric: tabular-nums;
   line-height: 1.2;
 }

package/src/Combobox.vue

@@ -10,6 +10,8 @@
  *   <Combobox v-model="model" :options="models" aria-label="Model" />
  *   <Combobox v-model="cats" multiple :options="categories" aria-label="Categories" />
  *
+ * `mono` sets the box and the options in the mono font (variable names, ids).
+ *
  * APG "combobox with list autocomplete": focus stays in the text field and
  * the lit option is named by aria-activedescendant.
  */
@@ -33,6 +35,8 @@ const props = withDefaults(defineProps<{
   emptyText?: string | undefined;
   /** How many options the list shows at once (it scrolls past that). */
   limit?: number | undefined;
+  /** The box and the options in the mono font (variable names, ids). */
+  mono?: boolean | undefined;
 }>(), {
   multiple: false, placeholder: "Choose…", size: "md", ariaLabel: "Choose",
   clearable: false, emptyText: "No matches", limit: 50,
@@ -186,6 +190,7 @@ function setOpen(v: boolean): void {
         :data-multiple="multiple || undefined"
         :data-disabled="disabled || undefined"
         :data-invalid="invalid || undefined"
+        :data-mono="mono || undefined"
         @click="inputEl?.focus(); wanted = true"
       >
         <template v-if="multiple">
@@ -238,6 +243,7 @@ function setOpen(v: boolean): void {
       role="listbox"
       :aria-label="`${ariaLabel} choices`"
       :aria-multiselectable="multiple || undefined"
+      :data-mono="mono || undefined"
     >
       <!-- Options are lit with aria-activedescendant; the text field keeps focus and the keys. -->
       <!-- eslint-disable-next-line vuejs-accessibility/click-events-have-key-events, vuejs-accessibility/interactive-supports-focus -->
@@ -324,4 +330,7 @@ function setOpen(v: boolean): void {
 @media (prefers-reduced-motion: reduce) {
   .wp-combo { transition: none; }
 }
+/* mono: names and ids read in the mono font, in the box and the list. */
+.wp-combo[data-mono] .wp-combo__field, .wp-combo[data-mono] .wp-combo__chip-text,
+.wp-combo__list[data-mono] .wp-combo__opt-text { font-family: var(--wp-font-mono); }
 </style>

package/src/ImageGrid.vue

@@ -11,9 +11,15 @@
  * Tiles are buttons in reading order (one Tab stop each). A tile with no
  * `src` yet (a frame still rendering) draws a Skeleton and can't be opened;
  * the Lightbox steps only through the images that are there.
+ *
+ * `aspect="auto"` keeps each picture's own shape, `columns` fixes the column
+ * count and `hint` puts a magnifier on a tile under the pointer, so one
+ * screenshot that opens full size is `<ImageGrid :images="[shot]" aspect="auto"
+ * :columns="1" hint />`. A picture that fails to load emits `error`.
  */
 import { computed, ref } from "vue";
 import Lightbox from "./Lightbox.vue";
+import Icon from "./Icon.vue";
 import Skeleton from "./Skeleton.vue";
 import Checkbox from "./Checkbox.vue";
 
@@ -23,8 +29,12 @@ const props = withDefaults(defineProps<{
   images: GridImage[];
   /** Smallest tile width in px. */
   minSize?: number | undefined;
-  /** Width / height of a tile. */
-  aspect?: number | undefined;
+  /** Width / height of a tile; `"auto"` keeps each picture's own shape (no crop). */
+  aspect?: number | "auto" | undefined;
+  /** A fixed number of columns instead of as many as fit `minSize` (1 = one picture full width). */
+  columns?: number | undefined;
+  /** A magnifier in the corner of each tile on hover and focus. */
+  hint?: boolean | undefined;
   gap?: "sm" | "md" | undefined;
   selectable?: boolean | undefined;
   selected?: string[] | undefined;
@@ -36,6 +46,8 @@ const props = withDefaults(defineProps<{
 const emit = defineEmits<{
   (e: "update:selected", v: string[]): void;
   (e: "open", index: number): void;
+  /** A picture failed to load. */
+  (e: "error", index: number): void;
 }>();
 
 const open = ref(false);
@@ -63,7 +75,12 @@ function toggle(id: string, on: boolean): void {
     class="wp-image-grid__list"
     :data-gap="gap"
     :aria-label="ariaLabel"
-    :style="{ '--_min': `${minSize}px`, '--_aspect': String(aspect) }"
+    :data-aspect="aspect === 'auto' ? 'auto' : undefined"
+    :style="{
+      '--_min': `${minSize}px`,
+      '--_aspect': String(aspect),
+      ...(columns ? { gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))` } : {}),
+    }"
   >
     <li
       v-for="(img, i) in images"
@@ -79,7 +96,8 @@ function toggle(id: string, on: boolean): void {
         :data-loading="!img.src || undefined"
         @click="show(i)"
       >
-        <img v-if="img.thumb || img.src" class="wp-image-grid__img" :src="img.thumb || img.src" alt="" loading="lazy">
+        <img v-if="img.thumb || img.src" class="wp-image-grid__img" :src="img.thumb || img.src" alt="" loading="lazy" @error="emit('error', i)">
+        <span v-if="hint && img.src" class="wp-image-grid__hint" aria-hidden="true"><Icon name="search-plus" :size="12" /></span>
         <Skeleton v-else class="wp-image-grid__empty" shape="block" width="100%" height="100%" />
       </button>
       <Checkbox
@@ -114,6 +132,15 @@ function toggle(id: string, on: boolean): void {
 .wp-image-grid__open:focus-visible { outline: none; border-color: var(--wp-border-focus); box-shadow: var(--wp-focus-ring); }
 .wp-image-grid__tile[data-selected] .wp-image-grid__open { border-color: var(--wp-accent); box-shadow: 0 0 0 2px var(--wp-accent-glow); }
 .wp-image-grid__img { display: block; width: 100%; height: 100%; object-fit: cover; }
+.wp-image-grid__list[data-aspect="auto"] .wp-image-grid__open { position: relative; aspect-ratio: auto; }
+.wp-image-grid__list[data-aspect="auto"] .wp-image-grid__img { height: auto; }
+.wp-image-grid__open { position: relative; }
+.wp-image-grid__hint {
+  position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 24px; height: 24px;
+  border-radius: min(6px, var(--wp-radius-cap, 999px)); background: var(--wp-scrim); color: var(--wp-on-media);
+  opacity: 0; transition: opacity var(--wp-motion-hover);
+}
+.wp-image-grid__open:hover .wp-image-grid__hint, .wp-image-grid__open:focus-visible .wp-image-grid__hint { opacity: 1; }
 .wp-image-grid__open[data-loading] { cursor: progress; }
 .wp-image-grid__empty { width: 100%; height: 100%; }
 .wp-image-grid__check { position: absolute; top: 6px; left: 6px; }
@@ -122,6 +149,6 @@ function toggle(id: string, on: boolean): void {
   text-overflow: ellipsis; white-space: nowrap;
 }
 @media (prefers-reduced-motion: reduce) {
-  .wp-image-grid__open { transition: none; }
+  .wp-image-grid__open, .wp-image-grid__hint { transition: none; }
 }
 </style>

package/src/RadioGroup.vue

@@ -18,7 +18,9 @@
  *
  * `variant="swatch"` draws each option as a round colour swatch (its
  * `color`), in a row, with the label as its name and tooltip: an accent or
- * frame colour picked from a few.
+ * frame colour picked from a few. `named` writes each label under its
+ * swatch, and the `swatch` slot draws a swatch itself (a split "theme's own"
+ * circle, a rainbow for "custom"; the slot gets `{ option, checked }`).
  */
 import { nextTick, ref } from "vue";
 
@@ -45,9 +47,14 @@ const props = withDefaults(defineProps<{
   testPrefix?: string | undefined;
   /** `swatch`: round colour swatches in a row, named by their label. */
   variant?: "default" | "swatch" | undefined;
+  /** With `variant="swatch"`: show each label under its swatch. */
+  named?: boolean | undefined;
 }>(), { orientation: "vertical", size: "md", ariaLabel: undefined, testPrefix: undefined, variant: "default" });
 
-defineSlots<{ label?: (p: { option: RadioOption<T> }) => unknown }>();
+defineSlots<{
+  label?: (p: { option: RadioOption<T> }) => unknown;
+  swatch?: (p: { option: RadioOption<T>; checked: boolean }) => unknown;
+}>();
 
 const emit = defineEmits<{ (e: "update:modelValue", v: T): void }>();
 const rootEl = ref<HTMLElement | null>(null);
@@ -93,6 +100,7 @@ function onKeydown(ev: KeyboardEvent, at: T): void {
     :data-size="size"
     :data-cards="cards || undefined"
     :data-variant="variant"
+    :data-named="variant === 'swatch' && named ? '' : undefined"
   >
     <!-- Each radio has a tabindex (roving: only the checked one is a Tab stop). -->
     <!-- eslint-disable-next-line vuejs-accessibility/interactive-supports-focus -->
@@ -106,18 +114,19 @@ function onKeydown(ev: KeyboardEvent, at: T): void {
       :tabindex="!disabled && o.value === tabStop() ? 0 : -1"
       :data-checked="modelValue === o.value || undefined"
       :data-test="testPrefix ? `${testPrefix}-${o.value}` : undefined"
-      :aria-label="variant === 'swatch' ? o.label : undefined"
-      :title="variant === 'swatch' ? o.label : undefined"
+      :aria-label="variant === 'swatch' && !named ? o.label : undefined"
+      :title="variant === 'swatch' && !named ? o.label : undefined"
       @click="!o.disabled && pick(o.value)"
       @keydown="onKeydown($event, o.value)"
     >
       <span
         v-if="variant === 'swatch'"
         class="wp-radio-group__swatch"
-        :style="{ background: o.color }"
+        :style="$slots.swatch ? undefined : { background: o.color }"
         aria-hidden="true"
-      />
+      ><slot name="swatch" :option="o" :checked="modelValue === o.value" /></span>
       <span v-else class="wp-radio-group__dot" aria-hidden="true" />
+      <span v-if="variant === 'swatch' && named" class="wp-radio-group__name">{{ o.label }}</span>
       <span v-if="variant !== 'swatch'" class="wp-radio-group__text">
         <span class="wp-radio-group__label"><slot name="label" :option="o">{{ o.label }}</slot></span>
         <span v-if="o.hint" class="wp-radio-group__hint">{{ o.hint }}</span>
@@ -169,6 +178,17 @@ function onKeydown(ev: KeyboardEvent, at: T): void {
   box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--wp-text) 18%, transparent);
 }
 .wp-radio-group[data-size="sm"] .wp-radio-group__swatch { width: 16px; height: 16px; }
+/* Named swatches: the label under each, the ring drawn round the swatch only. */
+.wp-radio-group[data-named] .wp-radio-group__opt {
+  flex-direction: column; align-items: center; gap: var(--wp-space-2); min-width: 52px;
+  padding: var(--wp-space-2); border-radius: var(--wp-radius-sm);
+}
+.wp-radio-group[data-named] .wp-radio-group__swatch { width: 28px; height: 28px; overflow: hidden; }
+.wp-radio-group__name { color: var(--wp-text-muted); font-size: var(--wp-text-xs); line-height: 1.2; text-align: center; }
+.wp-radio-group[data-named] .wp-radio-group__opt[data-checked] .wp-radio-group__name { color: var(--wp-text); }
+.wp-radio-group[data-variant="swatch"][data-named] .wp-radio-group__opt[data-checked] { box-shadow: none; }
+.wp-radio-group[data-named] .wp-radio-group__opt[data-checked] .wp-radio-group__swatch { box-shadow: 0 0 0 2px var(--wp-bg-1), 0 0 0 4px var(--wp-accent); }
+.wp-radio-group[data-variant="swatch"][data-named] .wp-radio-group__opt:focus-visible { box-shadow: 0 0 0 2px var(--wp-border-focus); }
 .wp-radio-group[data-variant="swatch"] .wp-radio-group__opt[data-checked] { box-shadow: 0 0 0 2px var(--wp-accent); }
 .wp-radio-group[data-variant="swatch"] .wp-radio-group__opt:focus-visible { box-shadow: 0 0 0 2px var(--wp-border-focus); }
 .wp-radio-group[data-variant="swatch"] .wp-radio-group__opt[data-checked]:focus-visible { box-shadow: 0 0 0 2px var(--wp-accent), 0 0 0 4px var(--wp-border-focus); }

package/src/WpSwitch.vue

@@ -92,7 +92,9 @@ function flip(): void {
   height: var(--switch-h);
   box-sizing: border-box;
   border: 1px solid var(--wp-border-strong);
-  border-radius: var(--wp-radius-cap, 999px);
+  /* A hair under half the height, not 999px: on the ComfyUI canvas Firefox
+     draws a bordered full pill in pieces that seam at zooms like 0.64 / 0.8. */
+  border-radius: min(calc(var(--switch-h) / 2 - 1px), var(--wp-radius-cap, 999px));
   background: var(--wp-bg-3);
   transition: background var(--wp-motion-quick), border-color var(--wp-motion-quick);
 }

package/src/tokens.ts

@@ -57,7 +57,7 @@ export const LOCAL_TOKENS = ["--wp-hsv-hue", "--wp-lm-o", "--wp-select-line-h",
 /** Pieces that need a page with src/theme/ loaded (not the canvas). */
 export const PAGE_PIECES = [
   "axis-color.ts", "kind-colour.ts", "matrix-axis.ts", "BundleMeta.vue", "ConstraintMatrixPreview.vue", "PostCard.vue", "TokenizedValue.vue",
-  "Card.vue", "Chip.vue", "ChoiceCards.vue",
+  "Card.vue", "ChoiceCards.vue",
   "DataTable.vue", "Drawer.vue", "EmptyState.vue", "Field.vue", "Icon.vue", "Input.vue",
   "ListFilter.vue", "RelativeDate.vue", "Select.vue", "Textarea.vue", "ToastHost.vue",
   // The payload previews and post loading shapes (community post pages).