@dumiflex/wp-kit 0.11.0 → 0.12.0

package/CHANGELOG.md

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

package/package.json

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

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"

package/src/input.css

@@ -3,7 +3,15 @@
  * 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`. */
+ * 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 {
@@ -111,3 +119,20 @@
   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); }