@dumiflex/wp-kit 0.9.0 → 0.11.0

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # Changelog
 
+## [0.11.0](https://github.com/DumiFlex/wp-kit/compare/v0.10.0...v0.11.0) (2026-11-03)
+
+
+### Features
+
+* Popover takes a virtual anchor and passes attrs to its panel; Input and Textarea style themselves on the canvas ([#94](https://github.com/DumiFlex/wp-kit/issues/94)) ([d5e17ef](https://github.com/DumiFlex/wp-kit/commit/d5e17eff909e259d1ed8dbfa3b0fbc2060e9e213))
+
+## [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.11.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/Input.vue

@@ -97,3 +97,5 @@ function onInput(e: Event) {
     @focus="(e) => emit('focus', e)"
   />
 </template>
+
+<style scoped src="./input.css"></style>

package/src/Popover.vue

@@ -17,6 +17,15 @@
  *
  *   <Popover :open="!!cell" :anchor="cell?.el" label="Cell rule" @update:open="cell = null">…</Popover>
  *
+ * A list that follows the text caret, or a card opened at a point, passes a
+ * virtual anchor instead: anything with `getBoundingClientRect()` (see
+ * `VirtualAnchor` in floating.ts). Hand it a new object to move the panel.
+ *
+ *   <Popover :open="!!at" :anchor="at" :autofocus="false" role="listbox" @update:open="at = null">…</Popover>
+ *
+ * Attributes (`class`, `data-test`, `@mouseenter` …) go on the panel, so a
+ * hover card can keep itself open while the pointer is over it.
+ *
  * `variant="menu"` draws the panel as a menu (`menu.css`, the look Select's
  * list, ContextMenu and Combobox share): tighter padding, 4px from the
  * trigger, above modals, and it closes once its trigger scrolls out of view.
@@ -24,9 +33,11 @@
  * scrolls past that instead of covering its trigger.
  */
 import { computed, nextTick, onBeforeUnmount, ref, useId, watch } from "vue";
-import { placeFloating, roomOn, viewportSize, type Placement, type Side } from "./floating";
+import { placeFloating, roomOn, viewportSize, type Placement, type Side, type VirtualAnchor } from "./floating";
 import { provideFloatingLayer, useFloatingChild } from "./floating-layer";
 
+defineOptions({ inheritAttrs: false });
+
 const props = withDefaults(defineProps<{
   open: boolean;
   placement?: Placement | undefined;
@@ -38,8 +49,9 @@ const props = withDefaults(defineProps<{
   autofocus?: boolean | undefined;
   /** "dialog" for panels with controls, "menu"/"listbox" when the content is one. */
   role?: "dialog" | "menu" | "listbox" | "group" | undefined;
-  /** Place the panel against this element instead of the trigger slot. */
-  anchor?: HTMLElement | null | undefined;
+  /** Place the panel against this element (or a virtual anchor: a caret, a
+   *  point) instead of the trigger slot. */
+  anchor?: HTMLElement | VirtualAnchor | null | undefined;
   /** "menu" for a list of choices (Select, Combobox): the shared menu look. */
   variant?: "panel" | "menu" | undefined;
   /** Tallest the panel grows, in px, before it scrolls. */
@@ -59,12 +71,19 @@ const MIN_HEIGHT = 80;
 const FOCUSABLE = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), '
   + 'textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
 
-function trigger(): HTMLElement | null {
+/** What the panel is placed against: the anchor prop or the trigger slot. */
+function trigger(): HTMLElement | VirtualAnchor | null {
   if (props.anchor) return props.anchor;
   const el = anchorEl.value;
   return (el?.firstElementChild as HTMLElement | null) ?? el;
 }
 
+/** The anchor as an element, when it is one (a virtual anchor takes no focus). */
+function anchorElement(): HTMLElement | null {
+  const a = props.anchor;
+  return a instanceof HTMLElement ? a : null;
+}
+
 function setOpen(v: boolean): void {
   if (v !== props.open) emit("update:open", v);
 }
@@ -105,7 +124,9 @@ function triggerGone(): boolean {
   if (!t) return false;
   const r = t.getBoundingClientRect();
   const view = viewportSize();
-  return r.bottom < 0 || r.top > view.height || r.right < 0 || r.left > view.width;
+  const bottom = r.top + r.height;
+  const right = r.left + r.width;
+  return bottom < 0 || r.top > view.height || right < 0 || r.left > view.width;
 }
 
 function onScroll(ev: Event): void {
@@ -126,7 +147,8 @@ function onPointerDown(ev: PointerEvent): void {
   if (layer.owns(path)) return;
   if (panelEl.value && path.includes(panelEl.value)) return;
   if (anchorEl.value && path.includes(anchorEl.value)) return;
-  if (props.anchor && path.includes(props.anchor)) return;
+  const own = anchorElement();
+  if (own && path.includes(own)) return;
   setOpen(false);
 }
 
@@ -137,7 +159,8 @@ function onKeydown(ev: KeyboardEvent): void {
   ev.preventDefault();
   ev.stopPropagation();
   setOpen(false);
-  trigger()?.focus();
+  const t = trigger();
+  if (t instanceof HTMLElement) t.focus();
 }
 
 function listen(on: boolean): void {
@@ -183,6 +206,7 @@ defineExpose({ place });
       :role="role"
       :aria-label="label"
       tabindex="-1"
+      v-bind="$attrs"
       :style="{
         left: `${pos.x}px`,
         top: `${pos.y}px`,

package/src/Textarea.vue

@@ -55,3 +55,5 @@ watch(() => props.modelValue, () => {
     @focus="(e) => emit('focus', e)"
   />
 </template>
+
+<style scoped src="./input.css"></style>

package/src/floating.ts

@@ -17,6 +17,18 @@ export interface Rect {
   height: number;
 }
 
+/** Something a panel can be placed against without being an element: the
+ *  text caret, a selection, a point the pointer was at. */
+export interface VirtualAnchor {
+  getBoundingClientRect(): Rect;
+}
+
+/** A virtual anchor for a fixed rectangle (a point is width and height 0). */
+export function rectAnchor(rect: Rect): VirtualAnchor {
+  const r = { left: rect.left, top: rect.top, width: rect.width, height: rect.height };
+  return { getBoundingClientRect: () => r };
+}
+
 export interface Size {
   width: number;
   height: number;

package/src/input.css

@@ -0,0 +1,113 @@
+/* Input and Textarea: the text field and the box around a prefixed one
+ * (`.wp-input-group`: an icon, a `$` prefix, a unit or the readonly lock).
+ * Scoped into Input.vue and Textarea.vue so a field looks right on the
+ * canvas, which never loads theme/tokens.css; the theme imports it too so
+ * a page can still write `.wp-input-group` around another field. Shared
+ * tokens only. The other field pieces draw field.css' `.wp-field-box`. */
+
+.wp-input,
+.wp-textarea {
+  height: var(--wp-control-h-md);
+  width: 100%;
+  background: var(--wp-bg-2);
+  color: var(--wp-text);
+  border: 1px solid var(--wp-border);
+  border-radius: var(--wp-radius-sm);
+  padding: 0 10px;
+  font-size: 12.5px;
+  outline: none;
+  transition: border-color var(--wp-motion-quick), background var(--wp-motion-quick), box-shadow var(--wp-motion-quick);
+}
+.wp-textarea {
+  height: auto;
+  padding: 8px 10px;
+  resize: vertical;
+  min-height: var(--wp-control-h-md);
+  line-height: 1.5;
+}
+.wp-input:focus-visible,
+.wp-textarea:focus-visible {
+  border-color: var(--wp-accent-500);
+  box-shadow: var(--wp-focus-ring);
+  background: var(--wp-bg-1);
+}
+/* Retain :focus fallback for browsers/contexts that don't support :focus-visible */
+.wp-input:focus,
+.wp-textarea:focus {
+  border-color: var(--wp-accent-500);
+  box-shadow: var(--wp-focus-ring);
+  background: var(--wp-bg-1);
+}
+/* Error state on standalone controls (when not wrapped in .wp-field) */
+.wp-input[aria-invalid="true"],
+.wp-textarea[aria-invalid="true"] {
+  border-color: var(--wp-error-border);
+}
+.wp-input::placeholder, .wp-textarea::placeholder { color: var(--wp-text-dim); }
+.wp-input--sm { height: var(--wp-control-h-sm); font-size: 12px; padding: 0 8px; }
+.wp-input--lg { height: var(--wp-control-h-lg); font-size: 13.5px; padding: 0 12px; }
+/* Readonly: shown, not editable. Dimmer fill, no focus ring (Input adds a lock). */
+.wp-input[readonly],
+.wp-textarea[readonly] {
+  background: var(--wp-bg-1);
+  color: var(--wp-text-muted);
+  border-style: dashed;
+  cursor: default;
+}
+.wp-input[readonly]:focus,
+.wp-input[readonly]:focus-visible,
+.wp-textarea[readonly]:focus,
+.wp-textarea[readonly]:focus-visible { box-shadow: none; border-color: var(--wp-border-strong); background: var(--wp-bg-1); }
+.wp-input:disabled,
+.wp-textarea:disabled { opacity: 0.45; cursor: not-allowed; }
+
+.wp-input-group {
+  display: inline-flex; align-items: stretch; width: 100%;
+  border: 1px solid var(--wp-border); border-radius: var(--wp-radius-sm);
+  background: var(--wp-bg-2);
+  overflow: hidden;
+  height: var(--wp-control-h-md);
+  min-height: var(--wp-control-h-md);
+  flex-shrink: 0;
+  transition: border-color var(--wp-motion-quick), box-shadow var(--wp-motion-quick);
+}
+.wp-input-group:focus-within {
+  border-color: var(--wp-accent-500);
+  box-shadow: var(--wp-focus-ring);
+}
+/* Inline icon and prefix/suffix text: no box, no divider, sitting in the
+ * field's own padding so "$" reads as part of "$hair". */
+.wp-input-group__icon,
+.wp-input-group__affix,
+.wp-input-group__lock {
+  display: inline-flex; align-items: center; flex-shrink: 0;
+  color: var(--wp-text-dim);
+  user-select: none;
+}
+.wp-input-group__icon { padding-left: 10px; }
+.wp-input-group__icon .pi { font-size: 14px; line-height: 1; }
+.wp-input-group__affix { font-family: var(--wp-font-mono); font-size: 12.5px; }
+.wp-input-group__affix--prefix { padding-left: 10px; }
+.wp-input-group__affix--suffix { padding-right: 10px; }
+.wp-input-group__lock { padding-right: 10px; }
+.wp-input-group__icon + .wp-input,
+.wp-input-group__icon + .wp-input-group__affix--prefix { padding-left: 7px; }
+.wp-input-group__affix--prefix + .wp-input { padding-left: 2px; }
+.wp-input-group .wp-input:has(+ .wp-input-group__affix--suffix),
+.wp-input-group .wp-input:has(+ .wp-input-group__lock) { padding-right: 4px; }
+.wp-input-group--sm { height: var(--wp-control-h-sm); min-height: var(--wp-control-h-sm); }
+.wp-input-group--lg { height: var(--wp-control-h-lg); min-height: var(--wp-control-h-lg); }
+.wp-input-group--readonly { background: var(--wp-bg-1); border-style: dashed; }
+.wp-input-group--readonly:focus-within { box-shadow: none; border-color: var(--wp-border-strong); }
+.wp-input-group--readonly .wp-input[readonly] { border: none; }
+.wp-input-group--disabled { opacity: 0.45; cursor: not-allowed; }
+.wp-input-group--disabled .wp-input:disabled { opacity: 1; }
+.wp-input-group[aria-invalid="true"] { border-color: var(--wp-error-border); }
+.wp-input-group .wp-input {
+  border: none !important;
+  background: transparent !important;
+  border-radius: 0;
+  height: 100%;
+  flex: 1;
+}
+.wp-input-group .wp-input:focus { box-shadow: none; }

package/src/theme/tokens.css

@@ -1,3 +1,4 @@
+@import "../input.css";
 /* =========================================================
    Wildcard Pipeline — Design Tokens & Base
    PrimeVue 4 Aura-inspired, dark, brand-customized.
@@ -704,10 +705,11 @@ input, textarea, select { font: inherit; }
  * canvas Button (component standard, rule 8). main.ts loads it right after
  * this file. */
 
-/* ---------- Inputs ---------- */
-.wp-input,
-.wp-select,
-.wp-textarea {
+/* ---------- Inputs ----------
+ * Input and Textarea (and the .wp-input-group around a prefixed field) are
+ * drawn by ../input.css, imported at the top of this file and scoped into
+ * Input.vue / Textarea.vue so they look the same on the canvas. */
+.wp-select {
   height: var(--wp-input-h);
   width: 100%;
   background: var(--wp-bg-2);
@@ -719,51 +721,14 @@ input, textarea, select { font: inherit; }
   outline: none;
   transition: border-color .12s, background .12s, box-shadow .12s;
 }
-.wp-textarea {
-  height: auto;
-  padding: 8px 10px;
-  resize: vertical;
-  min-height: var(--wp-input-h);
-  line-height: 1.5;
-}
-.wp-input:focus-visible,
 .wp-select:focus-visible,
-.wp-textarea:focus-visible {
+.wp-select:focus {
   border-color: var(--wp-accent-500);
   box-shadow: var(--wp-focus-ring);
   background: var(--wp-bg-1);
 }
-/* Retain :focus fallback for browsers/contexts that don't support :focus-visible */
-.wp-input:focus,
-.wp-select:focus,
-.wp-textarea:focus {
-  border-color: var(--wp-accent-500);
-  box-shadow: var(--wp-focus-ring);
-  background: var(--wp-bg-1);
-}
-/* Error state on standalone controls (when not wrapped in .wp-field) */
-.wp-input[aria-invalid="true"],
-.wp-select[aria-invalid="true"],
-.wp-textarea[aria-invalid="true"] {
-  border-color: var(--wp-error-border);
-}
-.wp-input::placeholder, .wp-textarea::placeholder { color: var(--wp-text-dim); }
-.wp-input--sm, .wp-select--sm { height: var(--wp-input-h-sm); font-size: 12px; padding: 0 8px; }
-.wp-input--lg { height: var(--wp-control-h-lg); font-size: 13.5px; padding: 0 12px; }
-/* Readonly: shown, not editable. Dimmer fill, no focus ring (Input adds a lock). */
-.wp-input[readonly],
-.wp-textarea[readonly] {
-  background: var(--wp-bg-1);
-  color: var(--wp-text-muted);
-  border-style: dashed;
-  cursor: default;
-}
-.wp-input[readonly]:focus,
-.wp-input[readonly]:focus-visible,
-.wp-textarea[readonly]:focus,
-.wp-textarea[readonly]:focus-visible { box-shadow: none; border-color: var(--wp-border-strong); background: var(--wp-bg-1); }
-.wp-input:disabled,
-.wp-textarea:disabled { opacity: 0.45; cursor: not-allowed; }
+.wp-select[aria-invalid="true"] { border-color: var(--wp-error-border); }
+.wp-select--sm { height: var(--wp-input-h-sm); font-size: 12px; padding: 0 8px; }
 /* Custom select trigger button — flex layout so label + spacer + chevron align. */
 .wp-select {
   display: flex;
@@ -793,56 +758,7 @@ input, textarea, select { font: inherit; }
   border-color: var(--wp-error-border);
 }
 
-.wp-input-group {
-  display: inline-flex; align-items: stretch; width: 100%;
-  border: 1px solid var(--wp-border); border-radius: var(--wp-radius-sm);
-  background: var(--wp-bg-2);
-  overflow: hidden;
-  height: var(--wp-input-h);
-  min-height: var(--wp-input-h);
-  flex-shrink: 0;
-  transition: border-color .12s, box-shadow .12s;
-}
-.wp-input-group:focus-within {
-  border-color: var(--wp-accent-500);
-  box-shadow: var(--wp-focus-ring);
-}
-/* Inline icon and prefix/suffix text: no box, no divider, sitting in the
- * field's own padding so "$" reads as part of "$hair". */
-.wp-input-group__icon,
-.wp-input-group__affix,
-.wp-input-group__lock {
-  display: inline-flex; align-items: center; flex-shrink: 0;
-  color: var(--wp-text-dim);
-  user-select: none;
-}
-.wp-input-group__icon { padding-left: 10px; }
-.wp-input-group__icon .pi { font-size: 14px; line-height: 1; }
-.wp-input-group__affix { font-family: var(--wp-font-mono); font-size: 12.5px; }
-.wp-input-group__affix--prefix { padding-left: 10px; }
-.wp-input-group__affix--suffix { padding-right: 10px; }
-.wp-input-group__lock { padding-right: 10px; }
-.wp-input-group__icon + .wp-input,
-.wp-input-group__icon + .wp-input-group__affix--prefix { padding-left: 7px; }
-.wp-input-group__affix--prefix + .wp-input { padding-left: 2px; }
-.wp-input-group .wp-input:has(+ .wp-input-group__affix--suffix),
-.wp-input-group .wp-input:has(+ .wp-input-group__lock) { padding-right: 4px; }
-.wp-input-group--sm { height: var(--wp-control-h-sm); min-height: var(--wp-control-h-sm); }
-.wp-input-group--lg { height: var(--wp-control-h-lg); min-height: var(--wp-control-h-lg); }
-.wp-input-group--readonly { background: var(--wp-bg-1); border-style: dashed; }
-.wp-input-group--readonly:focus-within { box-shadow: none; border-color: var(--wp-border-strong); }
-.wp-input-group--readonly .wp-input[readonly] { border: none; }
-.wp-input-group--disabled { opacity: 0.45; cursor: not-allowed; }
-.wp-input-group--disabled .wp-input:disabled { opacity: 1; }
-.wp-input-group[aria-invalid="true"] { border-color: var(--wp-error-border); }
-.wp-input-group .wp-input {
-  border: none !important;
-  background: transparent !important;
-  border-radius: 0;
-  height: 100%;
-  flex: 1;
-}
-.wp-input-group .wp-input:focus { box-shadow: none; }
+
 
 /* ---------- Chips / tags ---------- */
 .wp-chip {

package/src/tokens.ts

@@ -57,9 +57,9 @@ 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",
-  "DataTable.vue", "Drawer.vue", "EmptyState.vue", "Field.vue", "Icon.vue", "Input.vue",
-  "ListFilter.vue", "RelativeDate.vue", "Select.vue", "Textarea.vue", "ToastHost.vue",
+  "Card.vue", "ChoiceCards.vue",
+  "DataTable.vue", "Drawer.vue", "EmptyState.vue", "Field.vue", "Icon.vue",
+  "ListFilter.vue", "RelativeDate.vue", "Select.vue", "ToastHost.vue",
   // The payload previews and post loading shapes (community post pages).
   "PayloadPreview.vue", "WildcardPreview.vue", "FixedValuesPreview.vue", "CombinePreview.vue", "DerivationPreview.vue",
   "DerivationCondition.vue", "ConstraintPreview.vue", "BundlePreview.vue", "PreviewGroup.vue", "preview.css", "RichText.vue",