@dumiflex/wp-kit 0.7.1 → 0.9.0

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # Changelog
 
+## [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)
+
+
+### Features
+
+* Chip stat tiles and DataTable rows that unfold ([8c1cade](https://github.com/DumiFlex/wp-kit/commit/8c1cade94cb5bd1900ca8fca948a4b18fa6ba4f5))
+
+
+### Bug Fixes
+
+* Lightbox closes on a click anywhere dark, the bar and around the picture included ([#79](https://github.com/DumiFlex/wp-kit/issues/79)) ([a6eb440](https://github.com/DumiFlex/wp-kit/commit/a6eb44053641342a96f795b2c75af82d5417c334))
+
 ## [0.7.1](https://github.com/DumiFlex/wp-kit/compare/v0.7.0...v0.7.1) (2026-11-03)
 
 

package/package.json

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

package/src/Chip.vue

@@ -18,6 +18,12 @@
  * filters reads at a glance. `count` puts a small number after the label.
  * `size`: `xs` (default, a label in a line of text), `sm` (24px, a filter
  * row) or `md` (32px, next to a md control).
+ *
+ * `variant="stat"` is the same chip as a tile: the `count` big on top, the
+ * label under it and a top edge in `color` (a summary row whose tiles also
+ * filter the list below):
+ *
+ *   <Chip variant="stat" :color="roleColour(r)" :count="n" :pressed="on.has(r)" @click="flip(r)">{{ label }}</Chip>
  */
 import { computed, type Component } from "vue";
 import Icon from "./Icon.vue";
@@ -45,9 +51,11 @@ interface Props {
   /** A status dot before the label, in the chip's colour. */
   dot?: boolean | undefined;
   size?: "xs" | "sm" | "md" | undefined;
+  /** `pill` (default) or `stat`: a tile with the count big on top. */
+  variant?: "pill" | "stat" | undefined;
   disabled?: boolean | undefined;
 }
-const props = withDefaults(defineProps<Props>(), { tone: "default", as: "span", size: "xs", pressed: undefined });
+const props = withDefaults(defineProps<Props>(), { tone: "default", as: "span", size: "xs", variant: "pill", pressed: undefined });
 
 const emit = defineEmits<{
   (e: "remove"): void;
@@ -56,19 +64,21 @@ const emit = defineEmits<{
 const toggle = computed(() => props.pressed !== undefined);
 const tag = computed(() => (toggle.value ? "button" : props.as));
 const pressable = computed(() => tag.value !== "span");
+const stat = computed(() => props.variant === "stat");
 const classes = computed(() => [
   "wp-chip",
   `wp-chip--${props.size}`,
+  stat.value && "wp-chip--stat",
   pressable.value && "wp-chip--action",
   toggle.value && "wp-chip--toggle",
   toggle.value && props.color && "wp-chip--tinted",
-  !toggle.value && (props.color ? "wp-chip--color" : props.tone !== "default" && `wp-chip--${props.tone}`),
+  !toggle.value && !stat.value && (props.color ? "wp-chip--color" : props.tone !== "default" && `wp-chip--${props.tone}`),
 ]);
 
 const colorStyle = computed(() => {
   if (!props.color) return undefined;
   const c = props.color;
-  if (toggle.value) return { "--wp-chip-c": c };
+  if (toggle.value || stat.value) return { "--wp-chip-c": c };
   return {
     color: `color-mix(in oklab, ${c} 65%, var(--wp-text))`,
     background: `color-mix(in oklab, ${c} 18%, transparent)`,
@@ -94,9 +104,15 @@ 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 : 12" />
-    <slot />
-    <span v-if="count !== undefined" class="wp-chip__count">{{ count }}</span>
+    <Icon v-if="icon && !stat" class="wp-chip__icon" :name="icon" :size="size === 'xs' ? 10 : 12" />
+    <template v-if="stat">
+      <span v-if="count !== undefined" class="wp-chip__stat-n">{{ count }}</span>
+      <span class="wp-chip__stat-label"><slot /></span>
+    </template>
+    <template v-else>
+      <slot />
+      <span v-if="count !== undefined" class="wp-chip__count">{{ count }}</span>
+    </template>
     <button
       v-if="removable && !pressable"
       type="button"
@@ -163,4 +179,37 @@ function onRemove(e: MouseEvent) {
   background: color-mix(in oklab, var(--wp-chip-c) 22%, transparent);
   color: inherit;
 }
+
+/* A stat tile: the count big on top, the label under it, a top edge in its
+   colour. Pressed, it fills with a little of that colour. */
+.wp-chip--stat {
+  --wp-chip-c: var(--wp-border-strong);
+  box-sizing: border-box;
+  height: auto;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--wp-space-1);
+  padding: var(--wp-space-4) var(--wp-space-5);
+  border: 1px solid var(--wp-border);
+  border-top: 3px solid var(--wp-chip-c);
+  border-radius: min(8px, var(--wp-radius-cap, 999px));
+  background: var(--wp-bg-2);
+  color: var(--wp-text);
+  font-size: var(--wp-text-xs);
+  line-height: 1.3;
+  text-align: left;
+  white-space: normal;
+}
+.wp-chip--stat.wp-chip--toggle[aria-pressed="true"] {
+  border-color: var(--wp-chip-c);
+  background: color-mix(in oklab, var(--wp-chip-c) 12%, var(--wp-bg-2));
+  color: var(--wp-text);
+}
+.wp-chip__stat-n {
+  font-size: var(--wp-text-xl);
+  font-weight: var(--wp-weight-semibold);
+  font-variant-numeric: tabular-nums;
+  line-height: 1.2;
+}
+.wp-chip__stat-label { color: var(--wp-text-muted); }
 </style>

package/src/DataTable.vue

@@ -20,9 +20,11 @@
  *
  * `row-clickable` makes each row open something (a trace, a detail panel):
  * rows take focus, and a click or Enter emits `row-click`. `active-key`
- * marks the row that is open.
+ * marks the row that is open. With a `#detail` slot the open row unfolds:
+ * the slot is drawn full width under it and each row says `aria-expanded`
+ * (toggle `active-key` in `row-click` to open and close it).
  */
-import { computed } from "vue";
+import { computed, useSlots } from "vue";
 import Checkbox from "./Checkbox.vue";
 import Skeleton from "./Skeleton.vue";
 
@@ -146,6 +148,10 @@ function toggleRow(row: T, on: boolean): void {
   emit("update:selected", on ? [...props.selected.filter((x) => x !== k), k] : props.selected.filter((x) => x !== k));
 }
 
+const slots = useSlots();
+const hasDetail = computed(() => Boolean(slots.detail));
+const isActive = (row: T): boolean => props.activeKey !== null && keyOf(row) === props.activeKey;
+
 const span = computed(() => props.columns.length + (props.selectable ? 1 : 0));
 </script>
 
@@ -212,13 +218,13 @@ const span = computed(() => props.columns.length + (props.selectable ? 1 : 0));
           </td>
         </tr>
         <template v-else>
+          <template v-for="(row, index) in shown" :key="keyOf(row)">
           <tr
-            v-for="(row, index) in shown"
-            :key="keyOf(row)"
             v-bind="rowAttrs ? rowAttrs(row) : {}"
             :aria-selected="selectable ? picked.has(keyOf(row)) : undefined"
             :data-selected="selectable && picked.has(keyOf(row)) ? 'true' : undefined"
-            :data-active="activeKey !== null && keyOf(row) === activeKey ? 'true' : undefined"
+            :data-active="isActive(row) ? 'true' : undefined"
+            :aria-expanded="rowClickable && hasDetail ? isActive(row) : undefined"
             :data-clickable="rowClickable || undefined"
             :tabindex="rowClickable ? 0 : undefined"
             @click="rowClickable && emit('row-click', row)"
@@ -240,6 +246,10 @@ const span = computed(() => props.columns.length + (props.selectable ? 1 : 0));
               <slot :name="`cell-${c.key}`" :row="row" :value="cell(row, c.key)" :index="index">{{ cell(row, c.key) ?? "" }}</slot>
             </td>
           </tr>
+          <tr v-if="hasDetail && isActive(row)" class="wp-data-table__detail">
+            <td :colspan="span"><slot name="detail" :row="row" :index="index" /></td>
+          </tr>
+          </template>
         </template>
       </tbody>
     </table>
@@ -248,6 +258,7 @@ const span = computed(() => props.columns.length + (props.selectable ? 1 : 0));
 
 <style scoped>
 .wp-data-table { overflow: auto; }
+.wp-data-table__detail > td { background: var(--wp-bg-2); }
 .wp-data-table th[data-align="right"], .wp-data-table td[data-align="right"] { text-align: right; }
 .wp-data-table th[data-align="center"], .wp-data-table td[data-align="center"] { text-align: center; }
 .wp-data-table th[data-align="right"] .wp-data-table__sort { flex-direction: row-reverse; }

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

@@ -102,11 +102,15 @@ watch(() => props.open, async (v, was) => {
       :aria-label="image ? `${image.alt}, ${at + 1} of ${count}` : 'Image viewer'"
       @click.self="close"
     >
-      <div class="wp-lightbox__bar">
+      <!-- The bar spans the width: its empty part is dark area too, so it closes. -->
+      <!-- eslint-disable-next-line vuejs-accessibility/click-events-have-key-events, vuejs-accessibility/no-static-element-interactions -->
+      <div class="wp-lightbox__bar" @click.self="close">
         <span v-if="count > 1" class="wp-lightbox__count" aria-hidden="true">{{ at + 1 }} / {{ count }}</span>
         <Button variant="ghost" icon="times" aria-label="Close" class="wp-lightbox__close" kbd="Esc" @click="close" />
       </div>
-      <figure v-if="image" class="wp-lightbox__figure" :data-zoom="zoom || undefined">
+      <!-- Space around a small picture is dark area too; the picture and its zoom keep their clicks. -->
+      <!-- eslint-disable-next-line vuejs-accessibility/click-events-have-key-events, vuejs-accessibility/no-static-element-interactions -->
+      <figure v-if="image" class="wp-lightbox__figure" :data-zoom="zoom || undefined" @click.self="close">
         <!-- An image with no src yet (still rendering): its shape, not an empty frame. -->
         <Skeleton v-if="!image.src" class="wp-lightbox__loading" shape="block" width="min(70vw, 640px)" height="min(60vh, 480px)" label="Still loading" />
         <WpImageZoom v-else-if="zoom" v-model:zoom="level" class="wp-lightbox__zoom" :src="image.src" :alt="image.alt" size="md" minimap />

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