@grayscale-dev/dragon 0.1.5 → 0.1.6

package/README.md

@@ -23,7 +23,7 @@ npm --workspace packages/ui run build:manifest
 npm --workspace packages/ui run test
 ```
 
-Covers value/property sync, native `input`/`change` events, form association, focus forwarding, styling hooks, and manifest integrity.
+Covers value/property sync, native `input`/`change` events, form association, focus forwarding, styling hooks, masking behavior, and manifest integrity.
 
 **Usage (Vanilla)**
 
@@ -142,7 +142,27 @@ dui-input::part(input) {
 
 - `label-position="above"` (default): label sits above the field.
 - `label-position="floating"`: label sits like a placeholder and floats to the top-left on focus or when the input has a value.
-- Floating mode hides placeholder text to avoid overlap with the label.
+- Floating mode hides placeholder text to avoid overlap with the label, unless regex placeholder mode is enabled while focused.
+
+**Masking**
+
+`regex` enables mask formatting using a supported regex-like pattern.
+
+- Example phone pattern: `^\(\d{3}\)\s\d{3}-\d{4}$`
+- As the user types, input is normalized to the mask shape.
+- `show-regex-placeholder` shows a generated placeholder such as `(xxx) xxx-xxxx`.
+- With `label-position="floating"`, the regex placeholder appears only while focused.
+
+Example:
+
+```html
+<dui-input
+  label="Phone"
+  label-position="floating"
+  regex="^\(\d{3}\)\s\d{3}-\d{4}$"
+  show-regex-placeholder
+></dui-input>
+```
 
 **Form Behavior**
 

package/dist/components/dui-input.d.ts

@@ -11,21 +11,30 @@ export declare class DuiInput extends LitElement {
     autocomplete?: string;
     label: string;
     labelPosition: 'floating' | 'above';
+    regex: string;
+    showRegexPlaceholder: boolean;
+    showRegexPlaceholer: boolean;
     private inputEl?;
     private internals?;
     private defaultValue?;
+    private mask;
+    private isFocused;
     constructor();
     connectedCallback(): void;
+    willUpdate(changed: Map<string, unknown>): void;
     updated(changed: Map<string, unknown>): void;
     focus(options?: FocusOptions): void;
     blur(): void;
     formResetCallback(): void;
     formStateRestoreCallback(state: unknown): void;
     formDisabledCallback(disabled: boolean): void;
+    private normalizeMaskedValue;
     private syncFormValue;
     private handleInput;
     private handleChange;
     private handleKeydown;
+    private handleFocus;
+    private handleBlur;
     render(): import("lit-html").TemplateResult<1>;
 }
 declare global {

package/dist/index.js

@@ -1,19 +1,107 @@
-import { css as h, LitElement as c, html as d } from "lit";
-import { property as l, query as f, customElement as b } from "lit/decorators.js";
-import { ifDefined as u } from "lit/directives/if-defined.js";
-var g = Object.defineProperty, v = Object.getOwnPropertyDescriptor, a = (t, i, n, r) => {
-  for (var o = r > 1 ? void 0 : r ? v(i, n) : i, s = t.length - 1, p; s >= 0; s--)
-    (p = t[s]) && (o = (r ? p(i, n, o) : p(o)) || o);
-  return r && o && g(i, n, o), o;
+import { css as w, LitElement as $, html as m } from "lit";
+import { property as u, query as V, customElement as P } from "lit/decorators.js";
+import { ifDefined as x } from "lit/directives/if-defined.js";
+var z = Object.defineProperty, R = Object.getOwnPropertyDescriptor, r = (t, e, i, s) => {
+  for (var l = s > 1 ? void 0 : s ? R(e, i) : e, a = t.length - 1, n; a >= 0; a--)
+    (n = t[a]) && (l = (s ? n(e, i, l) : n(l)) || l);
+  return s && l && z(e, i, l), l;
 };
-let e = class extends c {
+function E(t) {
+  const e = t.trim();
+  if (e.startsWith("/") && e.lastIndexOf("/") > 0) {
+    const i = e.lastIndexOf("/");
+    return e.slice(1, i);
+  }
+  return e;
+}
+function f(t, e) {
+  if (t[e] !== "{")
+    return { count: 1, nextIndex: e };
+  let i = e + 1, s = "";
+  for (; i < t.length && /\d/.test(t[i]); )
+    s += t[i], i += 1;
+  return !s || t[i] !== "}" ? { count: 1, nextIndex: e } : {
+    count: Number(s),
+    nextIndex: i + 1
+  };
+}
+function g(t, e, i) {
+  const s = Number.isFinite(i) && i > 0 ? Math.floor(i) : 1;
+  for (let l = 0; l < s; l += 1)
+    e.kind === "slot" ? t.push({ kind: "slot", test: e.test, placeholder: e.placeholder }) : t.push({ kind: "literal", value: e.value });
+}
+function k(t) {
+  if (!t.trim()) return null;
+  let e = E(t);
+  if (e.startsWith("^") && (e = e.slice(1)), e.endsWith("$") && (e = e.slice(0, -1)), !e) return null;
+  const i = [];
+  for (let l = 0; l < e.length; l += 1) {
+    const a = e[l];
+    if (a === "\\") {
+      const h = e[l + 1];
+      if (!h) return null;
+      let d;
+      h === "d" ? d = { kind: "slot", test: (c) => /^\d$/.test(c), placeholder: "x" } : h === "w" ? d = { kind: "slot", test: (c) => /^\w$/.test(c), placeholder: "x" } : h === "s" ? d = { kind: "literal", value: " " } : d = { kind: "literal", value: h };
+      const p = f(e, l + 2);
+      g(i, d, p.count), l = p.nextIndex - 1;
+      continue;
+    }
+    if (a === "[") {
+      const h = e.indexOf("]", l + 1);
+      if (h === -1) return null;
+      const d = e.slice(l + 1, h);
+      if (!d) return null;
+      const p = new RegExp(`^[${d}]$`), c = {
+        kind: "slot",
+        test: (y) => p.test(y),
+        placeholder: "x"
+      }, v = f(e, h + 1);
+      g(i, c, v.count), l = v.nextIndex - 1;
+      continue;
+    }
+    if (a === ".") {
+      const h = {
+        kind: "slot",
+        test: (p) => /^[\s\S]$/.test(p),
+        placeholder: "x"
+      }, d = f(e, l + 1);
+      g(i, h, d.count), l = d.nextIndex - 1;
+      continue;
+    }
+    if (a === "+" || a === "*" || a === "?" || a === "{" || a === "}")
+      return null;
+    const n = { kind: "literal", value: a }, b = f(e, l + 1);
+    g(i, n, b.count), l = b.nextIndex - 1;
+  }
+  const s = i.map((l) => l.kind === "literal" ? l.value : l.placeholder).join("");
+  return {
+    source: e,
+    tokens: i,
+    placeholder: s
+  };
+}
+let o = class extends $ {
   constructor() {
-    super(), this.value = "", this.placeholder = "", this.name = "", this.disabled = !1, this.required = !1, this.type = "text", this.label = "", this.labelPosition = "above", "attachInternals" in this && (this.internals = this.attachInternals());
+    super(), this.value = "", this.placeholder = "", this.name = "", this.disabled = !1, this.required = !1, this.type = "text", this.label = "", this.labelPosition = "above", this.regex = "", this.showRegexPlaceholder = !1, this.showRegexPlaceholer = !1, this.mask = null, this.isFocused = !1, "attachInternals" in this && (this.internals = this.attachInternals());
   }
   connectedCallback() {
-    super.connectedCallback(), this.defaultValue === void 0 && (this.defaultValue = this.getAttribute("value") ?? ""), this.syncFormValue();
+    if (super.connectedCallback(), this.mask = k(this.regex), this.defaultValue === void 0) {
+      const t = this.getAttribute("value") ?? "";
+      this.defaultValue = this.normalizeMaskedValue(t);
+    }
+    this.value = this.normalizeMaskedValue(this.value), this.syncFormValue();
+  }
+  willUpdate(t) {
+    t.has("regex") && (this.mask = k(this.regex), this.defaultValue = this.normalizeMaskedValue(this.getAttribute("value") ?? "")), t.has("showRegexPlaceholer") && this.showRegexPlaceholer && (this.showRegexPlaceholder = !0);
   }
   updated(t) {
+    if (t.has("value") || t.has("regex")) {
+      const e = this.normalizeMaskedValue(this.value);
+      if (e !== this.value) {
+        this.value = e;
+        return;
+      }
+    }
     (t.has("value") || t.has("disabled")) && this.syncFormValue();
   }
   focus(t) {
@@ -26,11 +114,31 @@ let e = class extends c {
     this.value = this.defaultValue ?? "";
   }
   formStateRestoreCallback(t) {
-    typeof t == "string" && (this.value = t);
+    typeof t == "string" && (this.value = this.normalizeMaskedValue(t));
   }
   formDisabledCallback(t) {
     this.disabled = t;
   }
+  normalizeMaskedValue(t) {
+    if (!this.mask) return t;
+    const e = this.mask.tokens.filter(
+      (n) => n.kind === "slot"
+    ), i = [];
+    let s = 0;
+    for (const n of t) {
+      if (s >= e.length) break;
+      e[s].test(n) && (i.push(n), s += 1);
+    }
+    let l = "", a = 0;
+    for (const n of this.mask.tokens)
+      if (n.kind === "slot") {
+        if (a >= i.length)
+          break;
+        l += i[a], a += 1;
+      } else
+        i.length > 0 && a <= i.length && (l += n.value);
+    return l;
+  }
   syncFormValue() {
     if (this.internals) {
       if (this.disabled) {
@@ -42,24 +150,33 @@ let e = class extends c {
   }
   handleInput(t) {
     t.stopPropagation();
-    const i = t.target;
-    this.value = i.value, this.dispatchEvent(new Event("input", { bubbles: !0, composed: !0 }));
+    const e = t.target, i = this.normalizeMaskedValue(e.value);
+    e.value !== i && (e.value = i), this.value = i, this.dispatchEvent(new Event("input", { bubbles: !0, composed: !0 }));
   }
   handleChange(t) {
     t.stopPropagation();
-    const i = t.target;
-    this.value = i.value, this.dispatchEvent(new Event("change", { bubbles: !0, composed: !0 }));
+    const e = t.target, i = this.normalizeMaskedValue(e.value);
+    e.value !== i && (e.value = i), this.value = i, this.dispatchEvent(new Event("change", { bubbles: !0, composed: !0 }));
   }
   handleKeydown(t) {
     if (t.key !== "Enter") return;
-    const i = t.target;
-    this.value = i.value, this.dispatchEvent(new Event("change", { bubbles: !0, composed: !0 }));
+    const e = t.target, i = this.normalizeMaskedValue(e.value);
+    e.value !== i && (e.value = i), this.value = i, this.dispatchEvent(new Event("change", { bubbles: !0, composed: !0 }));
+  }
+  handleFocus() {
+    this.isFocused = !0, this.requestUpdate();
+  }
+  handleBlur() {
+    this.isFocused = !1, this.requestUpdate();
   }
   render() {
-    const t = this.label.length > 0, i = t && this.labelPosition === "floating", n = this.value.length > 0, r = i ? void 0 : this.placeholder || void 0;
-    return d`
-      <div class="field ${i ? "floating" : ""}" data-has-value=${n}>
-        ${t ? d`<label for="input">${this.label}</label>` : null}
+    const t = this.label.length > 0, e = t && this.labelPosition === "floating", i = this.value.length > 0, s = (this.showRegexPlaceholder || this.showRegexPlaceholer) && this.mask !== null, l = s ? this.mask?.placeholder : void 0;
+    let a;
+    e ? a = s && this.isFocused ? l : void 0 : s ? a = l : a = this.placeholder || void 0;
+    const n = this.label || a || this.placeholder || l || void 0;
+    return m`
+      <div class="field ${e ? "floating" : ""}" data-has-value=${i}>
+        ${t ? m`<label for="input">${this.label}</label>` : null}
         <input
           id="input"
           part="input"
@@ -68,9 +185,11 @@ let e = class extends c {
           .name=${this.name}
           ?disabled=${this.disabled}
           ?required=${this.required}
-          placeholder=${u(r)}
-          autocomplete=${u(this.autocomplete)}
-          aria-label=${u(this.label || this.placeholder || void 0)}
+          .placeholder=${a ?? ""}
+          autocomplete=${x(this.autocomplete)}
+          aria-label=${x(n)}
+          @focus=${this.handleFocus}
+          @blur=${this.handleBlur}
           @input=${this.handleInput}
           @change=${this.handleChange}
           @keydown=${this.handleKeydown}
@@ -79,8 +198,8 @@ let e = class extends c {
     `;
   }
 };
-e.formAssociated = !0;
-e.styles = h`
+o.formAssociated = !0;
+o.styles = w`
     :host {
       display: inline-block;
       width: 100%;
@@ -116,7 +235,7 @@ e.styles = h`
 
     .field.floating[data-has-value='true'] label,
     :host(:focus-within) .field.floating label {
-      top: 7px;
+      top: 4px;
       transform: scale(0.85);
       color: var(--ui-input-label-color, #475569);
     }
@@ -138,10 +257,6 @@ e.styles = h`
       color: var(--ui-input-placeholder-color, #9aa4b2);
     }
 
-    .field.floating input::placeholder {
-      color: transparent;
-    }
-
     input:focus {
       box-shadow: var(--ui-input-focus-ring, 0 0 0 3px rgba(24, 98, 255, 0.25));
     }
@@ -158,39 +273,48 @@ e.styles = h`
       padding-left: var(--ui-input-floating-padding-left, 12px);
     }
   `;
-a([
-  l({ type: String })
-], e.prototype, "value", 2);
-a([
-  l({ type: String })
-], e.prototype, "placeholder", 2);
-a([
-  l({ type: String, reflect: !0 })
-], e.prototype, "name", 2);
-a([
-  l({ type: Boolean, reflect: !0 })
-], e.prototype, "disabled", 2);
-a([
-  l({ type: Boolean, reflect: !0 })
-], e.prototype, "required", 2);
-a([
-  l({ type: String, reflect: !0 })
-], e.prototype, "type", 2);
-a([
-  l({ type: String, reflect: !0 })
-], e.prototype, "autocomplete", 2);
-a([
-  l({ type: String })
-], e.prototype, "label", 2);
-a([
-  l({ type: String, attribute: "label-position" })
-], e.prototype, "labelPosition", 2);
-a([
-  f("input")
-], e.prototype, "inputEl", 2);
-e = a([
-  b("dui-input")
-], e);
+r([
+  u({ type: String })
+], o.prototype, "value", 2);
+r([
+  u({ type: String })
+], o.prototype, "placeholder", 2);
+r([
+  u({ type: String, reflect: !0 })
+], o.prototype, "name", 2);
+r([
+  u({ type: Boolean, reflect: !0 })
+], o.prototype, "disabled", 2);
+r([
+  u({ type: Boolean, reflect: !0 })
+], o.prototype, "required", 2);
+r([
+  u({ type: String, reflect: !0 })
+], o.prototype, "type", 2);
+r([
+  u({ type: String, reflect: !0 })
+], o.prototype, "autocomplete", 2);
+r([
+  u({ type: String })
+], o.prototype, "label", 2);
+r([
+  u({ type: String, attribute: "label-position" })
+], o.prototype, "labelPosition", 2);
+r([
+  u({ type: String, reflect: !0 })
+], o.prototype, "regex", 2);
+r([
+  u({ type: Boolean, attribute: "show-regex-placeholder", reflect: !0 })
+], o.prototype, "showRegexPlaceholder", 2);
+r([
+  u({ type: Boolean, attribute: "show-regex-placeholer", reflect: !0 })
+], o.prototype, "showRegexPlaceholer", 2);
+r([
+  V("input")
+], o.prototype, "inputEl", 2);
+o = r([
+  P("dui-input")
+], o);
 export {
-  e as DuiInput
+  o as DuiInput
 };

package/dist/manifest.json

@@ -17,11 +17,25 @@
         },
         {
           "name": "placeholder",
-          "description": "Placeholder text shown when value is empty. Hidden in floating label mode.",
+          "description": "Placeholder text shown when value is empty. Hidden in floating label mode unless regex placeholder is enabled while focused.",
           "type": "string",
           "default": "",
           "control": "text"
         },
+        {
+          "name": "regex",
+          "description": "Regex-like mask definition. Supported patterns include escaped literals and quantified slots such as ^\\(\\d{3}\\)\\s\\d{3}-\\d{4}$.",
+          "type": "string",
+          "default": "",
+          "control": "text"
+        },
+        {
+          "name": "show-regex-placeholder",
+          "description": "If true and regex is valid, placeholder is generated from the regex mask (for floating labels, shown only while focused).",
+          "type": "boolean",
+          "default": false,
+          "control": "boolean"
+        },
         {
           "name": "name",
           "description": "Name used when submitting with a form.",
@@ -90,6 +104,18 @@
           "type": "string",
           "default": ""
         },
+        {
+          "name": "regex",
+          "description": "Mask source pattern used to constrain input formatting.",
+          "type": "string",
+          "default": ""
+        },
+        {
+          "name": "showRegexPlaceholder",
+          "description": "Enables regex-derived placeholder text.",
+          "type": "boolean",
+          "default": false
+        },
         {
           "name": "labelPosition",
           "description": "Reflects the label presentation mode.",
@@ -243,35 +269,41 @@
             "description": "Native input behavior options.",
             "order": 2
           },
+          {
+            "id": "mask",
+            "label": "Mask",
+            "description": "Regex masking controls.",
+            "order": 3
+          },
           {
             "id": "typography",
             "label": "Typography",
-            "order": 3
+            "order": 4
           },
           {
             "id": "spacing",
             "label": "Spacing",
-            "order": 4
+            "order": 5
           },
           {
             "id": "floating",
             "label": "Floating Label",
-            "order": 5
+            "order": 6
           },
           {
             "id": "shape",
             "label": "Shape",
-            "order": 6
+            "order": 7
           },
           {
             "id": "color",
             "label": "Color",
-            "order": 7
+            "order": 8
           },
           {
             "id": "state",
             "label": "States",
-            "order": 8
+            "order": 9
           }
         ],
         "controls": [
@@ -331,6 +363,22 @@
             "label": "Required",
             "order": 4
           },
+          {
+            "id": "regex",
+            "kind": "attribute",
+            "ref": "regex",
+            "group": "mask",
+            "label": "Regex Mask",
+            "order": 1
+          },
+          {
+            "id": "show-regex-placeholder",
+            "kind": "attribute",
+            "ref": "show-regex-placeholder",
+            "group": "mask",
+            "label": "Show Regex Placeholder",
+            "order": 2
+          },
           {
             "id": "token-font-size",
             "kind": "cssToken",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@grayscale-dev/dragon",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "description": "Framework-agnostic Web Components built with Lit.",
   "type": "module",
   "files": [