@dumiflex/wp-kit 0.7.0 → 0.8.0

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # Changelog
 
+## [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)
+
+
+### Bug Fixes
+
+* payload previews load their sheet once; SelectionBar says "1 report selected" ([#75](https://github.com/DumiFlex/wp-kit/issues/75)) ([d2774da](https://github.com/DumiFlex/wp-kit/commit/d2774dae3970f3b093778b0d84c5480a43961f9d))
+
 ## [0.7.0](https://github.com/DumiFlex/wp-kit/compare/v0.6.0...v0.7.0) (2026-11-03)
 
 

package/package.json

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

package/src/BundlePreview.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+// The shared preview sheet (wp-pv-* classes), loaded once for every preview.
+import "./preview.css";
 /**
  * Bundle: what the bundle needs from outside vs what it sets (folded from
  * its children), then a child list beside the selected child's own full
@@ -195,7 +197,6 @@ const counts = computed(() => {
   </div>
 </template>
 
-<style scoped src="./preview.css"></style>
 <style scoped>
 .wp-bd-flow {
   display: grid;

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

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+// The shared preview sheet (wp-pv-* classes), loaded once for every preview.
+import "./preview.css";
 /** Combine: the template in its own block, its negative under it, and a
  *  list of the variables it reads with where each one is used. */
 import { computed, ref } from "vue";
@@ -130,7 +132,6 @@ const shown = computed(() => (showAll.value ? inputs.value : inputs.value.slice(
   </div>
 </template>
 
-<style scoped src="./preview.css"></style>
 <style scoped>
 .wp-cb__out {
   font-family: var(--wp-font-mono);

package/src/ConstraintPreview.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+// The shared preview sheet (wp-pv-* classes), loaded once for every preview.
+import "./preview.css";
 /**
  * Constraint: counts up top, then the grouped matrix (ConstraintMatrixPreview)
  * or, for a big matrix, a searchable list of only the cells that do
@@ -226,7 +228,6 @@ function fmtFactor(f: number): string {
   </div>
 </template>
 
-<style scoped src="./preview.css"></style>
 <style scoped>
 .wp-cn-wrap {
   padding: 14px 16px 16px;

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

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+// The shared preview sheet (wp-pv-* classes), loaded once for every preview.
+import "./preview.css";
 /**
  * Derivation as rule cards: what it reads / writes / sends to negatives,
  * then per rule IF / ELSE IF / ELSE with nested AND / OR groups and every
@@ -191,7 +193,6 @@ function toggle(i: number): void {
   </div>
 </template>
 
-<style scoped src="./preview.css"></style>
 <style scoped>
 .wp-dv-io {
   display: flex;

package/src/FixedValuesPreview.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+// The shared preview sheet (wp-pv-* classes), loaded once for every preview.
+import "./preview.css";
 /** Fixed values as a searchable variable → value → negative table, paged so
  *  a long list stays short until asked. */
 import { computed, ref } from "vue";
@@ -181,4 +183,3 @@ function toggle(i: number): void {
   </div>
 </template>
 
-<style scoped src="./preview.css"></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/PayloadPreview.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+// The shared preview sheet (wp-pv-* classes), loaded once for every preview.
+import "./preview.css";
 /**
  * Rich, read-only preview of a published module or bundle payload: the
  * community post page and its embed draw it, and the manager can too.
@@ -146,7 +148,6 @@ const KNOWN = new Set(["wildcard", "fixed_values", "combine", "derivation", "con
   </p>
 </template>
 
-<style scoped src="./preview.css"></style>
 <style scoped>
 .wp-payload-raw {
   padding: 18px 24px 22px;

package/src/SelectionBar.vue

@@ -11,16 +11,20 @@
  * `#start` sits right after the count (a filter, an option), the default slot
  * on the right before Clear. `sticky` keeps it at the top of its scroll area
  * while the list scrolls under it (`--wp-selection-bar-top` moves it below a
- * fixed header). `noun` says what is selected ("3 options selected"). Escape
+ * fixed header). `noun` says what is selected ("3 options selected");
+ * `noun-one` is its singular for a count of 1 ("1 option selected"), by
+ * default the noun without its last "s". Escape
  * inside the bar clears, like Clear; the count is read out as it changes.
  */
-import { onBeforeUnmount, onMounted, ref } from "vue";
+import { computed, onBeforeUnmount, onMounted, ref } from "vue";
 import Button from "./Button.vue";
 
 const props = withDefaults(defineProps<{
   count: number;
   /** What a row is, plural ("options"); left out it says "3 selected". */
   noun?: string | undefined;
+  /** The noun for one row ("option"); defaults to `noun` without its last "s". */
+  nounOne?: string | undefined;
   /** Stick to the top of the scroll area. */
   sticky?: boolean | undefined;
   /** Hide the Clear button (the host clears another way). */
@@ -28,10 +32,17 @@ const props = withDefaults(defineProps<{
   clearLabel?: string | undefined;
   /** The toolbar's accessible name. */
   label?: string | undefined;
-}>(), { noun: undefined, clearLabel: "Clear", label: "Bulk actions" });
+}>(), { noun: undefined, nounOne: undefined, clearLabel: "Clear", label: "Bulk actions" });
 
 const emit = defineEmits<{ clear: [] }>();
 
+/** "3 options selected", "1 option selected", or "3 selected" with no noun. */
+const countText = computed(() => {
+  if (!props.noun) return `${props.count} selected`;
+  const one = props.nounOne ?? props.noun.replace(/s$/, "");
+  return `${props.count} ${props.count === 1 ? one : props.noun} selected`;
+});
+
 function onKeydown(ev: KeyboardEvent): void {
   if (ev.key !== "Escape" || props.hideClear) return;
   ev.stopPropagation();
@@ -55,7 +66,7 @@ onBeforeUnmount(() => root.value?.removeEventListener("keydown", onKeydown));
     :data-sticky="sticky || undefined"
     data-test="selection-bar"
   >
-    <span class="wp-selbar__count" aria-live="polite" data-test="selection-count">{{ count }}{{ noun ? ` ${noun}` : "" }} selected</span>
+    <span class="wp-selbar__count" aria-live="polite" data-test="selection-count">{{ countText }}</span>
     <slot name="start" />
     <span class="wp-selbar__spacer" />
     <slot />

package/src/WildcardPreview.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+// The shared preview sheet (wp-pv-* classes), loaded once for every preview.
+import "./preview.css";
 /**
  * Wildcard preview built for big pools: a stats strip, search + filters,
  * tag facets with counts, and options as table rows (chance, tags,
@@ -504,7 +506,6 @@ function isLong(o: WildcardOption): boolean {
   </div>
 </template>
 
-<style scoped src="./preview.css"></style>
 <style scoped>
 .wp-wc__split[data-facets] {
   display: grid;

package/src/preview.css

@@ -1,7 +1,10 @@
 /* Shared chrome for the per-type payload previews (stats strip, toolbar,
-   row tables, section labels). Each preview pulls it in scoped
-   (`<style scoped src="./preview.css">`), so it styles only that piece's own
-   markup. Every selector is `.wp-pv-*`. */
+   row tables, section labels). Every preview imports it from its script
+   (`import "./preview.css"`), so a page carries ONE copy however many
+   previews it shows; pulled in scoped, each piece got its own copy (seven in
+   the community embed). Every selector is `.wp-pv-*`, so it is safe global.
+   Unlayered like button.css and menu.css: in @layer wp-extension a host's
+   unlayered reset (Tailwind's preflight) would strip its borders. */
 
 .wp-pv {
   container-type: inline-size;