@grayscale-dev/dragon 0.1.6 → 0.1.8

package/README.md

@@ -146,12 +146,15 @@ dui-input::part(input) {
 
 **Masking**
 
-`regex` enables mask formatting using a supported regex-like pattern.
+`regex` uses the IMask regex engine with full JavaScript `RegExp` syntax.
 
-- 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 single digit: `\d`
+- Example unlimited digits: `\d*`
+- Example phone validation shape: `^\(\d{3}\)\s\d{3}-\d{4}$`
+- As the user types, input is constrained by the regex.
+- `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 +163,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,12 +12,11 @@ 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?;
-    private mask;
+    private compiledRegex;
     private isFocused;
     constructor();
     connectedCallback(): void;
@@ -28,7 +27,7 @@ export declare class DuiInput extends LitElement {
     formResetCallback(): void;
     formStateRestoreCallback(state: unknown): void;
     formDisabledCallback(disabled: boolean): void;
-    private normalizeMaskedValue;
+    private normalizeWithRegex;
     private syncFormValue;
     private handleInput;
     private handleChange;