@dumiflex/wp-kit 0.9.0 → 0.10.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # 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)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dumiflex/wp-kit",
-  "version": "0.9.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/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).