@grayscale-dev/dragon 0.1.6 → 0.1.7

package/README.md

@@ -150,8 +150,9 @@ dui-input::part(input) {
 
 - 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.
+- `regex-placeholder` provides explicit placeholder text for regex mode.
+- If `regex-placeholder` is empty, no regex placeholder is shown.
+- With `label-position="floating"`, regex placeholder appears only while focused.
 
 Example:
 
@@ -160,7 +161,7 @@ Example:
   label="Phone"
   label-position="floating"
   regex="^\(\d{3}\)\s\d{3}-\d{4}$"
-  show-regex-placeholder
+  regex-placeholder="(xxx) xxx-xxxx"
 ></dui-input>
 ```
 

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

@@ -12,8 +12,7 @@ export declare class DuiInput extends LitElement {
     label: string;
     labelPosition: 'floating' | 'above';
     regex: string;
-    showRegexPlaceholder: boolean;
-    showRegexPlaceholer: boolean;
+    regexPlaceholder: string;
     private inputEl?;
     private internals?;
     private defaultValue?;

package/dist/index.js

@@ -1,10 +1,10 @@
-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 { css as $, LitElement as V, html as m } from "lit";
+import { property as p, query as w, customElement as z } 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;
+var P = Object.defineProperty, S = Object.getOwnPropertyDescriptor, r = (t, e, i, a) => {
+  for (var l = a > 1 ? void 0 : a ? S(e, i) : e, n = t.length - 1, o; n >= 0; n--)
+    (o = t[n]) && (l = (a ? o(e, i, l) : o(l)) || l);
+  return a && l && P(e, i, l), l;
 };
 function E(t) {
   const e = t.trim();
@@ -17,17 +17,17 @@ function E(t) {
 function f(t, e) {
   if (t[e] !== "{")
     return { count: 1, nextIndex: e };
-  let i = e + 1, s = "";
+  let i = e + 1, a = "";
   for (; i < t.length && /\d/.test(t[i]); )
-    s += t[i], i += 1;
-  return !s || t[i] !== "}" ? { count: 1, nextIndex: e } : {
-    count: Number(s),
+    a += t[i], i += 1;
+  return !a || t[i] !== "}" ? { count: 1, nextIndex: e } : {
+    count: Number(a),
     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)
+  const a = Number.isFinite(i) && i > 0 ? Math.floor(i) : 1;
+  for (let l = 0; l < a; 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) {
@@ -36,53 +36,53 @@ function k(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;
+    const n = e[l];
+    if (n === "\\") {
+      const u = e[l + 1];
+      if (!u) 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;
+      u === "d" ? d = { kind: "slot", test: (c) => /^\d$/.test(c), placeholder: "x" } : u === "w" ? d = { kind: "slot", test: (c) => /^\w$/.test(c), placeholder: "x" } : u === "s" ? d = { kind: "literal", value: " " } : d = { kind: "literal", value: u };
+      const h = f(e, l + 2);
+      g(i, d, h.count), l = h.nextIndex - 1;
       continue;
     }
-    if (a === "[") {
-      const h = e.indexOf("]", l + 1);
-      if (h === -1) return null;
-      const d = e.slice(l + 1, h);
+    if (n === "[") {
+      const u = e.indexOf("]", l + 1);
+      if (u === -1) return null;
+      const d = e.slice(l + 1, u);
       if (!d) return null;
-      const p = new RegExp(`^[${d}]$`), c = {
+      const h = new RegExp(`^[${d}]$`), c = {
         kind: "slot",
-        test: (y) => p.test(y),
+        test: (y) => h.test(y),
         placeholder: "x"
-      }, v = f(e, h + 1);
+      }, v = f(e, u + 1);
       g(i, c, v.count), l = v.nextIndex - 1;
       continue;
     }
-    if (a === ".") {
-      const h = {
+    if (n === ".") {
+      const u = {
         kind: "slot",
-        test: (p) => /^[\s\S]$/.test(p),
+        test: (h) => /^[\s\S]$/.test(h),
         placeholder: "x"
       }, d = f(e, l + 1);
-      g(i, h, d.count), l = d.nextIndex - 1;
+      g(i, u, d.count), l = d.nextIndex - 1;
       continue;
     }
-    if (a === "+" || a === "*" || a === "?" || a === "{" || a === "}")
+    if (n === "+" || n === "*" || n === "?" || n === "{" || n === "}")
       return null;
-    const n = { kind: "literal", value: a }, b = f(e, l + 1);
-    g(i, n, b.count), l = b.nextIndex - 1;
+    const o = { kind: "literal", value: n }, b = f(e, l + 1);
+    g(i, o, b.count), l = b.nextIndex - 1;
   }
-  const s = i.map((l) => l.kind === "literal" ? l.value : l.placeholder).join("");
+  const a = i.map((l) => l.kind === "literal" ? l.value : l.placeholder).join("");
   return {
     source: e,
     tokens: i,
-    placeholder: s
+    placeholder: a
   };
 }
-let o = class extends $ {
+let s = class extends V {
   constructor() {
-    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());
+    super(), this.value = "", this.placeholder = "", this.name = "", this.disabled = !1, this.required = !1, this.type = "text", this.label = "", this.labelPosition = "above", this.regex = "", this.regexPlaceholder = "", this.mask = null, this.isFocused = !1, "attachInternals" in this && (this.internals = this.attachInternals());
   }
   connectedCallback() {
     if (super.connectedCallback(), this.mask = k(this.regex), this.defaultValue === void 0) {
@@ -92,7 +92,7 @@ let o = class extends $ {
     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);
+    t.has("regex") && (this.mask = k(this.regex), this.defaultValue = this.normalizeMaskedValue(this.getAttribute("value") ?? ""));
   }
   updated(t) {
     if (t.has("value") || t.has("regex")) {
@@ -122,21 +122,21 @@ let o = class extends $ {
   normalizeMaskedValue(t) {
     if (!this.mask) return t;
     const e = this.mask.tokens.filter(
-      (n) => n.kind === "slot"
+      (o) => o.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 a = 0;
+    for (const o of t) {
+      if (a >= e.length) break;
+      e[a].test(o) && (i.push(o), a += 1);
     }
-    let l = "", a = 0;
-    for (const n of this.mask.tokens)
-      if (n.kind === "slot") {
-        if (a >= i.length)
+    let l = "", n = 0;
+    for (const o of this.mask.tokens)
+      if (o.kind === "slot") {
+        if (n >= i.length)
           break;
-        l += i[a], a += 1;
+        l += i[n], n += 1;
       } else
-        i.length > 0 && a <= i.length && (l += n.value);
+        i.length > 0 && n <= i.length && (l += o.value);
     return l;
   }
   syncFormValue() {
@@ -170,10 +170,10 @@ let o = class extends $ {
     this.isFocused = !1, this.requestUpdate();
   }
   render() {
-    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;
+    const t = this.label.length > 0, e = t && this.labelPosition === "floating", i = this.value.length > 0, a = this.regexPlaceholder.trim() || void 0;
+    let l;
+    e ? l = a && this.isFocused ? a : void 0 : a ? l = a : l = this.placeholder || void 0;
+    const n = this.label || l || this.placeholder || a || void 0;
     return m`
       <div class="field ${e ? "floating" : ""}" data-has-value=${i}>
         ${t ? m`<label for="input">${this.label}</label>` : null}
@@ -185,7 +185,7 @@ let o = class extends $ {
           .name=${this.name}
           ?disabled=${this.disabled}
           ?required=${this.required}
-          .placeholder=${a ?? ""}
+          .placeholder=${l ?? ""}
           autocomplete=${x(this.autocomplete)}
           aria-label=${x(n)}
           @focus=${this.handleFocus}
@@ -198,8 +198,8 @@ let o = class extends $ {
     `;
   }
 };
-o.formAssociated = !0;
-o.styles = w`
+s.formAssociated = !0;
+s.styles = $`
     :host {
       display: inline-block;
       width: 100%;
@@ -274,47 +274,44 @@ o.styles = w`
     }
   `;
 r([
-  u({ type: String })
-], o.prototype, "value", 2);
+  p({ type: String })
+], s.prototype, "value", 2);
 r([
-  u({ type: String })
-], o.prototype, "placeholder", 2);
+  p({ type: String })
+], s.prototype, "placeholder", 2);
 r([
-  u({ type: String, reflect: !0 })
-], o.prototype, "name", 2);
+  p({ type: String, reflect: !0 })
+], s.prototype, "name", 2);
 r([
-  u({ type: Boolean, reflect: !0 })
-], o.prototype, "disabled", 2);
+  p({ type: Boolean, reflect: !0 })
+], s.prototype, "disabled", 2);
 r([
-  u({ type: Boolean, reflect: !0 })
-], o.prototype, "required", 2);
+  p({ type: Boolean, reflect: !0 })
+], s.prototype, "required", 2);
 r([
-  u({ type: String, reflect: !0 })
-], o.prototype, "type", 2);
+  p({ type: String, reflect: !0 })
+], s.prototype, "type", 2);
 r([
-  u({ type: String, reflect: !0 })
-], o.prototype, "autocomplete", 2);
+  p({ type: String, reflect: !0 })
+], s.prototype, "autocomplete", 2);
 r([
-  u({ type: String })
-], o.prototype, "label", 2);
+  p({ type: String })
+], s.prototype, "label", 2);
 r([
-  u({ type: String, attribute: "label-position" })
-], o.prototype, "labelPosition", 2);
+  p({ type: String, attribute: "label-position" })
+], s.prototype, "labelPosition", 2);
 r([
-  u({ type: String, reflect: !0 })
-], o.prototype, "regex", 2);
+  p({ type: String, reflect: !0 })
+], s.prototype, "regex", 2);
 r([
-  u({ type: Boolean, attribute: "show-regex-placeholder", reflect: !0 })
-], o.prototype, "showRegexPlaceholder", 2);
+  p({ type: String, attribute: "regex-placeholder" })
+], s.prototype, "regexPlaceholder", 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);
+  w("input")
+], s.prototype, "inputEl", 2);
+s = r([
+  z("dui-input")
+], s);
 export {
-  o as DuiInput
+  s as DuiInput
 };

package/dist/manifest.json

@@ -17,7 +17,7 @@
         },
         {
           "name": "placeholder",
-          "description": "Placeholder text shown when value is empty. Hidden in floating label mode unless regex placeholder is enabled while focused.",
+          "description": "Placeholder text shown when value is empty. Hidden in floating label mode unless explicit regex placeholder mode is enabled while focused.",
           "type": "string",
           "default": "",
           "control": "text"
@@ -30,11 +30,11 @@
           "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": "regex-placeholder",
+          "description": "Explicit placeholder text for regex mode. If omitted, regex placeholder is not shown.",
+          "type": "string",
+          "default": "",
+          "control": "text"
         },
         {
           "name": "name",
@@ -111,10 +111,10 @@
           "default": ""
         },
         {
-          "name": "showRegexPlaceholder",
-          "description": "Enables regex-derived placeholder text.",
-          "type": "boolean",
-          "default": false
+          "name": "regexPlaceholder",
+          "description": "Explicit placeholder text used when regex-placeholder is provided.",
+          "type": "string",
+          "default": ""
         },
         {
           "name": "labelPosition",
@@ -372,11 +372,11 @@
             "order": 1
           },
           {
-            "id": "show-regex-placeholder",
+            "id": "regex-placeholder",
             "kind": "attribute",
-            "ref": "show-regex-placeholder",
+            "ref": "regex-placeholder",
             "group": "mask",
-            "label": "Show Regex Placeholder",
+            "label": "Regex Placeholder",
             "order": 2
           },
           {

package/package.json

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