@dumiflex/wp-kit 0.10.0 → 0.12.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## [0.12.0](https://github.com/DumiFlex/wp-kit/compare/v0.11.0...v0.12.0) (2026-11-03)
+
+
+### Features
+
+* Input and Textarea take mono and an accent / warn tone, and size themselves border-box ([#98](https://github.com/DumiFlex/wp-kit/issues/98)) ([7b1023f](https://github.com/DumiFlex/wp-kit/commit/7b1023f699e7f9b37904abf0200ed805f1db23a7))
+
+## [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)
 
 

package/package.json

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

package/src/Input.vue

@@ -24,6 +24,10 @@ interface Props {
   suffix?: string | undefined;
   id?: string | undefined;
   ariaLabel?: string | undefined;
+  /** Mono text: variable names, ids, tags. */
+  mono?: boolean | undefined;
+  /** "accent" marks a value changed from its default, "warn" one that needs a look. */
+  tone?: "accent" | "warn" | undefined;
 }
 const props = withDefaults(defineProps<Props>(), {
   type: "text",
@@ -57,7 +61,7 @@ function onInput(e: Event) {
 </script>
 
 <template>
-  <div v-if="wrapped" :class="groupClasses" :aria-invalid="error || undefined">
+  <div v-if="wrapped" :class="groupClasses" :aria-invalid="error || undefined" :data-tone="tone">
     <span v-if="icon" class="wp-input-group__icon" aria-hidden="true">
       <Icon :name="icon" />
     </span>
@@ -65,6 +69,7 @@ function onInput(e: Event) {
     <input
       :id="id"
       :class="inputClasses"
+      :data-mono="mono || undefined"
       :type="type"
       :value="modelValue"
       :placeholder="placeholder"
@@ -85,6 +90,8 @@ function onInput(e: Event) {
     v-else
     :id="id"
     :class="inputClasses"
+    :data-mono="mono || undefined"
+    :data-tone="tone"
     :type="type"
     :value="modelValue"
     :placeholder="placeholder"
@@ -97,3 +104,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

@@ -10,6 +10,10 @@ interface Props {
   error?: boolean | undefined;
   id?: string | undefined;
   ariaLabel?: string | undefined;
+  /** Mono text: templates, tag lists. */
+  mono?: boolean | undefined;
+  /** "accent" marks a value changed from its default, "warn" one that needs a look. */
+  tone?: "accent" | "warn" | undefined;
 }
 const props = withDefaults(defineProps<Props>(), { rows: 3 });
 
@@ -44,6 +48,8 @@ watch(() => props.modelValue, () => {
     :id="id"
     ref="taRef"
     class="wp-textarea"
+    :data-mono="mono || undefined"
+    :data-tone="tone"
     :rows="rows"
     :value="modelValue"
     :placeholder="placeholder"
@@ -55,3 +61,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,138 @@
+/* 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`.
+ *
+ * `data-mono` sets the text in the mono face (variable names, ids, tags);
+ * `data-tone="accent"` marks a value changed from its default (accent border
+ * and text), `data-tone="warn"` one that needs a look (an empty binding). */
+
+.wp-input,
+.wp-textarea,
+.wp-input-group { box-sizing: border-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; }
+
+/* Mono text and tones (see the top of this file). On a prefixed field the
+ * group draws the border, so the tone sits on the group. */
+.wp-input[data-mono],
+.wp-textarea[data-mono] { font-family: var(--wp-font-mono); font-size: 12px; }
+.wp-input--sm[data-mono] { font-size: 11px; }
+.wp-input[data-tone="accent"],
+.wp-textarea[data-tone="accent"],
+.wp-input-group[data-tone="accent"] { border-color: var(--wp-accent-500); }
+.wp-input[data-tone="accent"],
+.wp-textarea[data-tone="accent"],
+.wp-input-group[data-tone="accent"] .wp-input,
+.wp-input-group[data-tone="accent"] .wp-input-group__affix { color: var(--wp-accent-text); }
+.wp-input[data-tone="warn"],
+.wp-textarea[data-tone="warn"],
+.wp-input-group[data-tone="warn"] { border-color: var(--wp-warn); }
+.wp-input-group[data-tone="warn"] .wp-input-group__affix { color: var(--wp-warn); }

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

@@ -58,8 +58,8 @@ export const LOCAL_TOKENS = ["--wp-hsv-hue", "--wp-lm-o", "--wp-select-line-h",
 export const PAGE_PIECES = [
   "axis-color.ts", "kind-colour.ts", "matrix-axis.ts", "BundleMeta.vue", "ConstraintMatrixPreview.vue", "PostCard.vue", "TokenizedValue.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",
+  "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",