@substrate-system/password-input 0.0.1 → 0.0.2

package/README.md

@@ -1,5 +1,5 @@
 # Password Input
-![tests](https://github.com/substrate-system/password-input/actions/workflows/nodejs.yml/badge.svg)
+[![tests](https://img.shields.io/github/actions/workflow/status/substrate-system/password-input/nodejs.yml?style=flat-square)](https://github.com/substrate-system/password-input/actions/workflows/nodejs.yml)
 [![types](https://img.shields.io/npm/types/@substrate-system/password-input?style=flat-square)](README.md)
 [![module](https://img.shields.io/badge/module-ESM%2FCJS-blue?style=flat-square)](README.md)
 [![install size](https://flat.badgen.net/packagephobia/install/@bicycle-codes/keys?cache-control=no-cache)](https://packagephobia.com/result?p=@bicycle-codes/keys)
@@ -26,10 +26,16 @@ Accessible by default — `aria-*` attributes, the `id` attribute, and a
 - [API](#api)
   * [ESM](#esm)
   * [Common JS](#common-js)
+  * [Attributes](#attributes)
+    + [Supported `aria-*` attributes](#supported-aria--attributes)
+    + [Usage Notes](#usage-notes)
+    + [Example](#example)
 - [Use](#use)
   * [JS](#js)
   * [HTML](#html)
   * [pre-built](#pre-built)
+    + [copy](#copy)
+    + [HTML](#html-1)
 - [CSS](#css)
   * [Import CSS](#import-css)
 - [Notes](#notes)
@@ -58,6 +64,63 @@ import { PasswordInput } from '@substrate-system/password-input'
 ```js
 require('@substrate-system/password-input')
 ```
+
+### Attributes
+
+You can pass attributes on `<password-input>`, and the component maps them to
+the inner `<input>` as described below. Do not pass the `type` attribute.
+That is controlled by the component.
+
+| Attribute | Should pass? | Behavior |
+| --- | --- | --- |
+| `label` | Optional, recommended | Renders visible label text above the input. |
+| `visible` | Optional | If present, initial state is visible text (`type="text"`). If absent, initial state is hidden (`type="password"`). |
+| `id` | Recommended when used with external labels/help text | Moved to the inner `<input id="...">` and removed from `<password-input>`. |
+| `aria-*` | Recommended for accessibility | Any supported ARIA attribute passed on `<password-input>` is moved to the inner `<input>` and removed from `<password-input>`. |
+| Standard input attributes (`name`, `placeholder`, `value`, `autocomplete`, `required`, `disabled`, `readonly`, `minlength`, `maxlength`, `pattern`, etc.) | Optional as needed | Forwarded to the inner `<input>`. |
+
+#### Supported `aria-*` attributes
+
+`aria-activedescendant`, `aria-atomic`, `aria-autocomplete`,
+`aria-braillelabel`, `aria-brailleroledescription`, `aria-busy`,
+`aria-checked`, `aria-colcount`, `aria-colindex`, `aria-colindextext`,
+`aria-colspan`, `aria-controls`, `aria-current`, `aria-describedby`,
+`aria-description`, `aria-details`, `aria-disabled`, `aria-dropeffect`,
+`aria-errormessage`, `aria-expanded`, `aria-flowto`, `aria-grabbed`,
+`aria-haspopup`, `aria-hidden`, `aria-invalid`, `aria-keyshortcuts`,
+`aria-label`, `aria-labelledby`, `aria-level`, `aria-live`, `aria-modal`,
+`aria-multiline`, `aria-multiselectable`, `aria-orientation`, `aria-owns`,
+`aria-placeholder`, `aria-posinset`, `aria-pressed`, `aria-readonly`,
+`aria-relevant`, `aria-required`, `aria-roledescription`, `aria-rowcount`,
+`aria-rowindex`, `aria-rowindextext`, `aria-rowspan`, `aria-selected`,
+`aria-setsize`, `aria-sort`, `aria-valuemax`, `aria-valuemin`,
+`aria-valuenow`, `aria-valuetext`
+
+#### Usage Notes
+
+- Do **not** pass `type`. The component controls `type` internally
+  (`password` or `text`) based on the visibility toggle.
+- If an ARIA attribute changes later (`setAttribute('aria-label', '...')` on
+  `<password-input>`), the inner `<input>` is updated through
+  `attributeChangedCallback`.
+
+#### Example
+
+```html
+<password-input
+    id="account-password"
+    label="New Password"
+    name="password"
+    placeholder="At least 12 characters"
+    autocomplete="new-password"
+    required
+    minlength="12"
+    aria-describedby="password-help">
+</password-input>
+<p id="password-help">Use a strong, unique password.</p>
+```
+
+
 ## Use
 
 This calls the global function `customElements.define`. Just import, then use
@@ -134,4 +197,3 @@ Implementation notes.
 
 Without this guard, the second callback would treat the host removal as a
 real “delete” request and clear the input attribute you just transferred.
-

package/dist/index.cjs

@@ -32,6 +32,37 @@ class PasswordInput extends HTMLElement {
     __name(this, "PasswordInput");
   }
   static TAG = "password-input";
+  static INPUT_ATTRIBUTES = [
+    "accept",
+    "alt",
+    "autocomplete",
+    "autocapitalize",
+    "autocorrect",
+    "autofocus",
+    "capture",
+    "dirname",
+    "disabled",
+    "enterkeyhint",
+    "form",
+    "inputmode",
+    "list",
+    "max",
+    "maxlength",
+    "min",
+    "minlength",
+    "multiple",
+    "name",
+    "pattern",
+    "placeholder",
+    "readonly",
+    "required",
+    "size",
+    "spellcheck",
+    "step",
+    "tabindex",
+    "title",
+    "value"
+  ];
   static ARIA_ATTRIBUTES = [
     "aria-activedescendant",
     "aria-atomic",
@@ -87,10 +118,11 @@ class PasswordInput extends HTMLElement {
     "aria-valuenow",
     "aria-valuetext"
   ];
-  static observedAttributes = ["visible", "label"].concat(PasswordInput.ARIA_ATTRIBUTES);
+  static observedAttributes = ["visible", "label", "id"].concat(PasswordInput.INPUT_ATTRIBUTES).concat(PasswordInput.ARIA_ATTRIBUTES);
   inputId = null;
   inputAriaAttributes = {};
   ignoredAriaCallbackNames = /* @__PURE__ */ new Set();
+  ignoredIdCallback = false;
   // empty string = is visible
   // null = not visible
   handleChange_visible(_, _newValue) {
@@ -117,6 +149,32 @@ class PasswordInput extends HTMLElement {
       this.removeAttribute(name);
     }
   }
+  handleChange_id(_oldValue, newValue) {
+    if (this.ignoredIdCallback) {
+      this.ignoredIdCallback = false;
+      return;
+    }
+    if (newValue === null) {
+      this.inputId = null;
+      this.querySelector("input")?.removeAttribute("id");
+      return;
+    }
+    this.inputId = newValue;
+    this.querySelector("input")?.setAttribute("id", newValue);
+    if (this.hasAttribute("id")) {
+      this.ignoredIdCallback = true;
+      this.removeAttribute("id");
+    }
+  }
+  handleChange_inputAttribute(name, newValue) {
+    const input = this.querySelector("input");
+    if (!input) return;
+    if (newValue === null) {
+      input.removeAttribute(name);
+      return;
+    }
+    input.setAttribute(name, newValue);
+  }
   /**
    * Listen for change in visiblity.
    *
@@ -125,10 +183,18 @@ class PasswordInput extends HTMLElement {
    * @param  {string} newValue The new attribute value
    */
   async attributeChangedCallback(name, oldValue, newValue) {
+    if (name === "id") {
+      this.handleChange_id(oldValue, newValue);
+      return;
+    }
     if (name.startsWith("aria-")) {
       this.handleChange_aria(name, oldValue, newValue);
       return;
     }
+    if (PasswordInput.INPUT_ATTRIBUTES.includes(name)) {
+      this.handleChange_inputAttribute(name, newValue);
+      return;
+    }
     if (this[`handleChange_${name}`]) {
       this[`handleChange_${name}`](oldValue, newValue);
     }
@@ -228,7 +294,10 @@ class PasswordInput extends HTMLElement {
                 </span>
             </div>
         `;
-    this.removeAttribute("id");
+    if (this.hasAttribute("id")) {
+      this.ignoredIdCallback = true;
+      this.removeAttribute("id");
+    }
     for (const attr of hostAriaAttributes) {
       this.ignoredAriaCallbackNames.add(attr.name);
       this.removeAttribute(attr.name);

package/dist/index.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/index.ts"],
-  "sourcesContent": ["import { define } from '@substrate-system/web-component/util'\nimport { define as slashDefine } from '@substrate-system/icons/eye-slash'\nimport { define as regularDefine } from '@substrate-system/icons/eye-regular'\n// import Debug from '@substrate-system/debug'\n// const debug = Debug('password-input')\n\nslashDefine()\nregularDefine()\n\n// for docuement.querySelector\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'password-input':PasswordInput\n    }\n}\n\nexport class PasswordInput extends HTMLElement {\n    static TAG = 'password-input'\n    static ARIA_ATTRIBUTES = [\n        'aria-activedescendant',\n        'aria-atomic',\n        'aria-autocomplete',\n        'aria-braillelabel',\n        'aria-brailleroledescription',\n        'aria-busy',\n        'aria-checked',\n        'aria-colcount',\n        'aria-colindex',\n        'aria-colindextext',\n        'aria-colspan',\n        'aria-controls',\n        'aria-current',\n        'aria-describedby',\n        'aria-description',\n        'aria-details',\n        'aria-disabled',\n        'aria-dropeffect',\n        'aria-errormessage',\n        'aria-expanded',\n        'aria-flowto',\n        'aria-grabbed',\n        'aria-haspopup',\n        'aria-hidden',\n        'aria-invalid',\n        'aria-keyshortcuts',\n        'aria-label',\n        'aria-labelledby',\n        'aria-level',\n        'aria-live',\n        'aria-modal',\n        'aria-multiline',\n        'aria-multiselectable',\n        'aria-orientation',\n        'aria-owns',\n        'aria-placeholder',\n        'aria-posinset',\n        'aria-pressed',\n        'aria-readonly',\n        'aria-relevant',\n        'aria-required',\n        'aria-roledescription',\n        'aria-rowcount',\n        'aria-rowindex',\n        'aria-rowindextext',\n        'aria-rowspan',\n        'aria-selected',\n        'aria-setsize',\n        'aria-sort',\n        'aria-valuemax',\n        'aria-valuemin',\n        'aria-valuenow',\n        'aria-valuetext'\n    ]\n\n    static observedAttributes = (['visible', 'label'])\n        .concat(PasswordInput.ARIA_ATTRIBUTES)\n\n    inputId:string|null = null\n    inputAriaAttributes:Record<string, string> = {}\n    ignoredAriaCallbackNames:Set<string> = new Set()\n\n    // empty string = is visible\n    // null = not visible\n    handleChange_visible (_, _newValue) {\n        this.reRender()\n    }\n\n    handleChange_label (_oldValue, _newValue) {\n        this.render()\n        this._listen()\n    }\n\n    handleChange_aria (\n        name:string,\n        _oldValue:string|null,\n        newValue:string|null\n    ) {\n        if (this.ignoredAriaCallbackNames.has(name)) {\n            this.ignoredAriaCallbackNames.delete(name)\n            return\n        }\n\n        if (newValue === null) {\n            delete this.inputAriaAttributes[name]\n            this.querySelector('input')?.removeAttribute(name)\n            return\n        }\n\n        this.inputAriaAttributes[name] = newValue\n        this.querySelector('input')?.setAttribute(name, newValue)\n\n        if (this.hasAttribute(name)) {\n            this.ignoredAriaCallbackNames.add(name)\n            this.removeAttribute(name)\n        }\n    }\n\n    /**\n     * Listen for change in visiblity.\n     *\n     * @param  {string} name     The attribute name\n     * @param  {string} oldValue The old attribute value\n     * @param  {string} newValue The new attribute value\n     */\n    async attributeChangedCallback (\n        name:string,\n        oldValue:string,\n        newValue:string\n    ) {\n        if (name.startsWith('aria-')) {\n            this.handleChange_aria(name, oldValue, newValue)\n            return\n        }\n\n        if (this[`handleChange_${name}`]) {\n            this[`handleChange_${name}`](oldValue, newValue)\n        }\n    }\n\n    connectedCallback () {\n        this.render()\n        this._listen()\n    }\n\n    _listen () {\n        const btn = this.querySelector('button')!\n        btn.addEventListener('click', (ev) => {\n            ev.preventDefault()\n            this.isVisible = !this.isVisible\n        })\n    }\n\n    getType ():'text'|'password' {\n        return this.isVisible ? 'text' : 'password'\n    }\n\n    set isVisible (value:boolean) {\n        if (value) {\n            this.setAttribute('visible', '')\n        } else {\n            this.removeAttribute('visible')\n        }\n    }\n\n    get isVisible ():boolean {\n        return this.hasAttribute('visible')\n    }\n\n    set label (value:string|null) {\n        if (value === null) {\n            this.removeAttribute('label')\n            return\n        }\n\n        this.setAttribute('label', value)\n    }\n\n    get label ():string|null {\n        return this.getAttribute('label')\n    }\n\n    getButtonContent () {\n        return (this.isVisible ?\n            '<eye-regular></eye-regular><span class=\"visually-hidden\">Hide</span>' :\n            '<eye-slash></eye-slash><span class=\"visually-hidden\">Show</span>')\n    }\n\n    /**\n     * Change the visibility button state.\n     */\n    reRender () {\n        const btn = this.querySelector('.pw-visibility')\n        btn!.innerHTML = this.getButtonContent()\n        this.setAttribute('type', this.getType())\n        this.querySelector('input')?.setAttribute('type', this.getType())\n    }\n\n    render () {\n        const name = this.getAttribute('name')\n        const label = this.getAttribute('label')\n        const hostId = this.getAttribute('id')\n        const hostAriaAttributes = Array.from(this.attributes)\n            .filter(attr => attr.name.startsWith('aria-'))\n\n        if (hostId !== null) {\n            this.inputId = hostId\n        }\n\n        for (const attr of hostAriaAttributes) {\n            this.inputAriaAttributes[attr.name] = attr.value\n        }\n\n        // create object from attributes\n        const attrs = Array.from(this.attributes)\n            .filter(attr =>\n                attr.name !== 'label' &&\n                attr.name !== 'id' &&\n                !attr.name.startsWith('aria-')\n            )\n            .map(attr => attr.name + (attr.value === '' ?\n                '' :\n                ('=' + `\"${attr.value}\"`))\n            )\n            .join(' ')\n\n        const classes = (this.getAttribute('class') ?? '').split(' ')\n            .concat(['password', 'input', name || ''])\n            .filter(Boolean)\n            .join(' ')\n\n        const idAttribute = this.inputId ? `id=\"${this.inputId}\"` : ''\n        const ariaAttributes = Object.entries(this.inputAriaAttributes)\n            .map(([attrName, attrValue]) => {\n                return (attrName + (attrValue === '' ?\n                    '' :\n                    ('=' + `\"${attrValue}\"`)))\n            })\n            .join(' ')\n\n        this.innerHTML = label ? `\n            <label class=\"${classes}\">\n                <span class=\"label-content\">${label}</span>\n                <span class=\"input\">\n                    <input\n                        ${idAttribute}\n                        ${ariaAttributes}\n                        ${attrs}\n                        type=${this.getType()} />\n                    <button class=\"pw-visibility\">\n                        ${this.getButtonContent()}\n                    </button>\n                </span>\n            </label>\n        ` : `\n            <div class=\"${classes}\">\n                <span class=\"input\">\n                    <input\n                        ${idAttribute}\n                        ${ariaAttributes}\n                        ${attrs}\n                        type=${this.getType()} />\n                    <button class=\"pw-visibility\">\n                        ${this.getButtonContent()}\n                    </button>\n                </span>\n            </div>\n        `\n\n        this.removeAttribute('id')\n        for (const attr of hostAriaAttributes) {\n            this.ignoredAriaCallbackNames.add(attr.name)\n            this.removeAttribute(attr.name)\n        }\n    }\n}\n\ndefine(PasswordInput.TAG, PasswordInput)\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { define } from '@substrate-system/web-component/util'\nimport { define as slashDefine } from '@substrate-system/icons/eye-slash'\nimport { define as regularDefine } from '@substrate-system/icons/eye-regular'\n// import Debug from '@substrate-system/debug'\n// const debug = Debug('password-input')\n\nslashDefine()\nregularDefine()\n\n// for docuement.querySelector\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'password-input':PasswordInput\n    }\n}\n\nexport class PasswordInput extends HTMLElement {\n    static TAG = 'password-input'\n    static INPUT_ATTRIBUTES = [\n        'accept',\n        'alt',\n        'autocomplete',\n        'autocapitalize',\n        'autocorrect',\n        'autofocus',\n        'capture',\n        'dirname',\n        'disabled',\n        'enterkeyhint',\n        'form',\n        'inputmode',\n        'list',\n        'max',\n        'maxlength',\n        'min',\n        'minlength',\n        'multiple',\n        'name',\n        'pattern',\n        'placeholder',\n        'readonly',\n        'required',\n        'size',\n        'spellcheck',\n        'step',\n        'tabindex',\n        'title',\n        'value'\n    ]\n\n    static ARIA_ATTRIBUTES = [\n        'aria-activedescendant',\n        'aria-atomic',\n        'aria-autocomplete',\n        'aria-braillelabel',\n        'aria-brailleroledescription',\n        'aria-busy',\n        'aria-checked',\n        'aria-colcount',\n        'aria-colindex',\n        'aria-colindextext',\n        'aria-colspan',\n        'aria-controls',\n        'aria-current',\n        'aria-describedby',\n        'aria-description',\n        'aria-details',\n        'aria-disabled',\n        'aria-dropeffect',\n        'aria-errormessage',\n        'aria-expanded',\n        'aria-flowto',\n        'aria-grabbed',\n        'aria-haspopup',\n        'aria-hidden',\n        'aria-invalid',\n        'aria-keyshortcuts',\n        'aria-label',\n        'aria-labelledby',\n        'aria-level',\n        'aria-live',\n        'aria-modal',\n        'aria-multiline',\n        'aria-multiselectable',\n        'aria-orientation',\n        'aria-owns',\n        'aria-placeholder',\n        'aria-posinset',\n        'aria-pressed',\n        'aria-readonly',\n        'aria-relevant',\n        'aria-required',\n        'aria-roledescription',\n        'aria-rowcount',\n        'aria-rowindex',\n        'aria-rowindextext',\n        'aria-rowspan',\n        'aria-selected',\n        'aria-setsize',\n        'aria-sort',\n        'aria-valuemax',\n        'aria-valuemin',\n        'aria-valuenow',\n        'aria-valuetext'\n    ]\n\n    static observedAttributes = (['visible', 'label', 'id'])\n        .concat(PasswordInput.INPUT_ATTRIBUTES)\n        .concat(PasswordInput.ARIA_ATTRIBUTES)\n\n    inputId:string|null = null\n    inputAriaAttributes:Record<string, string> = {}\n    ignoredAriaCallbackNames:Set<string> = new Set()\n    ignoredIdCallback = false\n\n    // empty string = is visible\n    // null = not visible\n    handleChange_visible (_, _newValue) {\n        this.reRender()\n    }\n\n    handleChange_label (_oldValue, _newValue) {\n        this.render()\n        this._listen()\n    }\n\n    handleChange_aria (\n        name:string,\n        _oldValue:string|null,\n        newValue:string|null\n    ) {\n        if (this.ignoredAriaCallbackNames.has(name)) {\n            this.ignoredAriaCallbackNames.delete(name)\n            return\n        }\n\n        if (newValue === null) {\n            delete this.inputAriaAttributes[name]\n            this.querySelector('input')?.removeAttribute(name)\n            return\n        }\n\n        this.inputAriaAttributes[name] = newValue\n        this.querySelector('input')?.setAttribute(name, newValue)\n\n        if (this.hasAttribute(name)) {\n            this.ignoredAriaCallbackNames.add(name)\n            this.removeAttribute(name)\n        }\n    }\n\n    handleChange_id (_oldValue:string|null, newValue:string|null) {\n        if (this.ignoredIdCallback) {\n            this.ignoredIdCallback = false\n            return\n        }\n\n        if (newValue === null) {\n            this.inputId = null\n            this.querySelector('input')?.removeAttribute('id')\n            return\n        }\n\n        this.inputId = newValue\n        this.querySelector('input')?.setAttribute('id', newValue)\n\n        if (this.hasAttribute('id')) {\n            this.ignoredIdCallback = true\n            this.removeAttribute('id')\n        }\n    }\n\n    handleChange_inputAttribute (name:string, newValue:string|null) {\n        const input = this.querySelector('input')\n        if (!input) return\n\n        if (newValue === null) {\n            input.removeAttribute(name)\n            return\n        }\n\n        input.setAttribute(name, newValue)\n    }\n\n    /**\n     * Listen for change in visiblity.\n     *\n     * @param  {string} name     The attribute name\n     * @param  {string} oldValue The old attribute value\n     * @param  {string} newValue The new attribute value\n     */\n    async attributeChangedCallback (\n        name:string,\n        oldValue:string,\n        newValue:string\n    ) {\n        if (name === 'id') {\n            this.handleChange_id(oldValue, newValue)\n            return\n        }\n\n        if (name.startsWith('aria-')) {\n            this.handleChange_aria(name, oldValue, newValue)\n            return\n        }\n\n        if (PasswordInput.INPUT_ATTRIBUTES.includes(name)) {\n            this.handleChange_inputAttribute(name, newValue)\n            return\n        }\n\n        if (this[`handleChange_${name}`]) {\n            this[`handleChange_${name}`](oldValue, newValue)\n        }\n    }\n\n    connectedCallback () {\n        this.render()\n        this._listen()\n    }\n\n    _listen () {\n        const btn = this.querySelector('button')!\n        btn.addEventListener('click', (ev) => {\n            ev.preventDefault()\n            this.isVisible = !this.isVisible\n        })\n    }\n\n    getType ():'text'|'password' {\n        return this.isVisible ? 'text' : 'password'\n    }\n\n    set isVisible (value:boolean) {\n        if (value) {\n            this.setAttribute('visible', '')\n        } else {\n            this.removeAttribute('visible')\n        }\n    }\n\n    get isVisible ():boolean {\n        return this.hasAttribute('visible')\n    }\n\n    set label (value:string|null) {\n        if (value === null) {\n            this.removeAttribute('label')\n            return\n        }\n\n        this.setAttribute('label', value)\n    }\n\n    get label ():string|null {\n        return this.getAttribute('label')\n    }\n\n    getButtonContent () {\n        return (this.isVisible ?\n            '<eye-regular></eye-regular><span class=\"visually-hidden\">Hide</span>' :\n            '<eye-slash></eye-slash><span class=\"visually-hidden\">Show</span>')\n    }\n\n    /**\n     * Change the visibility button state.\n     */\n    reRender () {\n        const btn = this.querySelector('.pw-visibility')\n        btn!.innerHTML = this.getButtonContent()\n        this.setAttribute('type', this.getType())\n        this.querySelector('input')?.setAttribute('type', this.getType())\n    }\n\n    render () {\n        const name = this.getAttribute('name')\n        const label = this.getAttribute('label')\n        const hostId = this.getAttribute('id')\n        const hostAriaAttributes = Array.from(this.attributes)\n            .filter(attr => attr.name.startsWith('aria-'))\n\n        if (hostId !== null) {\n            this.inputId = hostId\n        }\n\n        for (const attr of hostAriaAttributes) {\n            this.inputAriaAttributes[attr.name] = attr.value\n        }\n\n        // create string from attributes\n        const attrs = Array.from(this.attributes)\n            .filter(attr =>\n                attr.name !== 'label' &&\n                attr.name !== 'id' &&\n                !attr.name.startsWith('aria-')\n            )\n            .map(attr => attr.name + (attr.value === '' ?\n                '' :\n                ('=' + `\"${attr.value}\"`))\n            )\n            .join(' ')\n\n        const classes = (this.getAttribute('class') ?? '').split(' ')\n            .concat(['password', 'input', name || ''])\n            .filter(Boolean)\n            .join(' ')\n\n        const idAttribute = this.inputId ? `id=\"${this.inputId}\"` : ''\n        const ariaAttributes = Object.entries(this.inputAriaAttributes)\n            .map(([attrName, attrValue]) => {\n                return (attrName + (attrValue === '' ?\n                    '' :\n                    ('=' + `\"${attrValue}\"`)))\n            })\n            .join(' ')\n\n        this.innerHTML = label ? `\n            <label class=\"${classes}\">\n                <span class=\"label-content\">${label}</span>\n                <span class=\"input\">\n                    <input\n                        ${idAttribute}\n                        ${ariaAttributes}\n                        ${attrs}\n                        type=${this.getType()} />\n                    <button class=\"pw-visibility\">\n                        ${this.getButtonContent()}\n                    </button>\n                </span>\n            </label>\n        ` : `\n            <div class=\"${classes}\">\n                <span class=\"input\">\n                    <input\n                        ${idAttribute}\n                        ${ariaAttributes}\n                        ${attrs}\n                        type=${this.getType()} />\n                    <button class=\"pw-visibility\">\n                        ${this.getButtonContent()}\n                    </button>\n                </span>\n            </div>\n        `\n\n        if (this.hasAttribute('id')) {\n            this.ignoredIdCallback = true\n            this.removeAttribute('id')\n        }\n        for (const attr of hostAriaAttributes) {\n            this.ignoredAriaCallbackNames.add(attr.name)\n            this.removeAttribute(attr.name)\n        }\n    }\n}\n\ndefine(PasswordInput.TAG, PasswordInput)\n"],
+  "mappings": "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",
   "names": ["slashDefine", "regularDefine"]
 }

package/dist/index.d.ts

@@ -5,14 +5,18 @@ declare global {
 }
 export declare class PasswordInput extends HTMLElement {
     static TAG: string;
+    static INPUT_ATTRIBUTES: string[];
     static ARIA_ATTRIBUTES: string[];
     static observedAttributes: string[];
     inputId: string | null;
     inputAriaAttributes: Record<string, string>;
     ignoredAriaCallbackNames: Set<string>;
+    ignoredIdCallback: boolean;
     handleChange_visible(_: any, _newValue: any): void;
     handleChange_label(_oldValue: any, _newValue: any): void;
     handleChange_aria(name: string, _oldValue: string | null, newValue: string | null): void;
+    handleChange_id(_oldValue: string | null, newValue: string | null): void;
+    handleChange_inputAttribute(name: string, newValue: string | null): void;
     /**
      * Listen for change in visiblity.
      *

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAUA,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,gBAAgB,EAAC,aAAa,CAAA;KACjC;CACJ;AAED,qBAAa,aAAc,SAAQ,WAAW;IAC1C,MAAM,CAAC,GAAG,SAAmB;IAC7B,MAAM,CAAC,eAAe,WAsDrB;IAED,MAAM,CAAC,kBAAkB,WACiB;IAE1C,OAAO,EAAC,MAAM,GAAC,IAAI,CAAO;IAC1B,mBAAmB,EAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAK;IAC/C,wBAAwB,EAAC,GAAG,CAAC,MAAM,CAAC,CAAY;IAIhD,oBAAoB,CAAE,CAAC,KAAA,EAAE,SAAS,KAAA;IAIlC,kBAAkB,CAAE,SAAS,KAAA,EAAE,SAAS,KAAA;IAKxC,iBAAiB,CACb,IAAI,EAAC,MAAM,EACX,SAAS,EAAC,MAAM,GAAC,IAAI,EACrB,QAAQ,EAAC,MAAM,GAAC,IAAI;IAsBxB;;;;;;OAMG;IACG,wBAAwB,CAC1B,IAAI,EAAC,MAAM,EACX,QAAQ,EAAC,MAAM,EACf,QAAQ,EAAC,MAAM;IAYnB,iBAAiB;IAKjB,OAAO;IAQP,OAAO,IAAI,MAAM,GAAC,UAAU;IAI5B,IAAI,SAAS,CAAE,KAAK,EAAC,OAAO,EAM3B;IAED,IAAI,SAAS,IAAI,OAAO,CAEvB;IAED,IAAI,KAAK,CAAE,KAAK,EAAC,MAAM,GAAC,IAAI,EAO3B;IAED,IAAI,KAAK,IAAI,MAAM,GAAC,IAAI,CAEvB;IAED,gBAAgB;IAMhB;;OAEG;IACH,QAAQ;IAOR,MAAM;CA6ET"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAUA,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,gBAAgB,EAAC,aAAa,CAAA;KACjC;CACJ;AAED,qBAAa,aAAc,SAAQ,WAAW;IAC1C,MAAM,CAAC,GAAG,SAAmB;IAC7B,MAAM,CAAC,gBAAgB,WA8BtB;IAED,MAAM,CAAC,eAAe,WAsDrB;IAED,MAAM,CAAC,kBAAkB,WAEiB;IAE1C,OAAO,EAAC,MAAM,GAAC,IAAI,CAAO;IAC1B,mBAAmB,EAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAK;IAC/C,wBAAwB,EAAC,GAAG,CAAC,MAAM,CAAC,CAAY;IAChD,iBAAiB,UAAQ;IAIzB,oBAAoB,CAAE,CAAC,KAAA,EAAE,SAAS,KAAA;IAIlC,kBAAkB,CAAE,SAAS,KAAA,EAAE,SAAS,KAAA;IAKxC,iBAAiB,CACb,IAAI,EAAC,MAAM,EACX,SAAS,EAAC,MAAM,GAAC,IAAI,EACrB,QAAQ,EAAC,MAAM,GAAC,IAAI;IAsBxB,eAAe,CAAE,SAAS,EAAC,MAAM,GAAC,IAAI,EAAE,QAAQ,EAAC,MAAM,GAAC,IAAI;IAqB5D,2BAA2B,CAAE,IAAI,EAAC,MAAM,EAAE,QAAQ,EAAC,MAAM,GAAC,IAAI;IAY9D;;;;;;OAMG;IACG,wBAAwB,CAC1B,IAAI,EAAC,MAAM,EACX,QAAQ,EAAC,MAAM,EACf,QAAQ,EAAC,MAAM;IAsBnB,iBAAiB;IAKjB,OAAO;IAQP,OAAO,IAAI,MAAM,GAAC,UAAU;IAI5B,IAAI,SAAS,CAAE,KAAK,EAAC,OAAO,EAM3B;IAED,IAAI,SAAS,IAAI,OAAO,CAEvB;IAED,IAAI,KAAK,CAAE,KAAK,EAAC,MAAM,GAAC,IAAI,EAO3B;IAED,IAAI,KAAK,IAAI,MAAM,GAAC,IAAI,CAEvB;IAED,gBAAgB;IAMhB;;OAEG;IACH,QAAQ;IAOR,MAAM;CAgFT"}

package/dist/index.js

@@ -10,6 +10,37 @@ class PasswordInput extends HTMLElement {
     __name(this, "PasswordInput");
   }
   static TAG = "password-input";
+  static INPUT_ATTRIBUTES = [
+    "accept",
+    "alt",
+    "autocomplete",
+    "autocapitalize",
+    "autocorrect",
+    "autofocus",
+    "capture",
+    "dirname",
+    "disabled",
+    "enterkeyhint",
+    "form",
+    "inputmode",
+    "list",
+    "max",
+    "maxlength",
+    "min",
+    "minlength",
+    "multiple",
+    "name",
+    "pattern",
+    "placeholder",
+    "readonly",
+    "required",
+    "size",
+    "spellcheck",
+    "step",
+    "tabindex",
+    "title",
+    "value"
+  ];
   static ARIA_ATTRIBUTES = [
     "aria-activedescendant",
     "aria-atomic",
@@ -65,10 +96,11 @@ class PasswordInput extends HTMLElement {
     "aria-valuenow",
     "aria-valuetext"
   ];
-  static observedAttributes = ["visible", "label"].concat(PasswordInput.ARIA_ATTRIBUTES);
+  static observedAttributes = ["visible", "label", "id"].concat(PasswordInput.INPUT_ATTRIBUTES).concat(PasswordInput.ARIA_ATTRIBUTES);
   inputId = null;
   inputAriaAttributes = {};
   ignoredAriaCallbackNames = /* @__PURE__ */ new Set();
+  ignoredIdCallback = false;
   // empty string = is visible
   // null = not visible
   handleChange_visible(_, _newValue) {
@@ -95,6 +127,32 @@ class PasswordInput extends HTMLElement {
       this.removeAttribute(name);
     }
   }
+  handleChange_id(_oldValue, newValue) {
+    if (this.ignoredIdCallback) {
+      this.ignoredIdCallback = false;
+      return;
+    }
+    if (newValue === null) {
+      this.inputId = null;
+      this.querySelector("input")?.removeAttribute("id");
+      return;
+    }
+    this.inputId = newValue;
+    this.querySelector("input")?.setAttribute("id", newValue);
+    if (this.hasAttribute("id")) {
+      this.ignoredIdCallback = true;
+      this.removeAttribute("id");
+    }
+  }
+  handleChange_inputAttribute(name, newValue) {
+    const input = this.querySelector("input");
+    if (!input) return;
+    if (newValue === null) {
+      input.removeAttribute(name);
+      return;
+    }
+    input.setAttribute(name, newValue);
+  }
   /**
    * Listen for change in visiblity.
    *
@@ -103,10 +161,18 @@ class PasswordInput extends HTMLElement {
    * @param  {string} newValue The new attribute value
    */
   async attributeChangedCallback(name, oldValue, newValue) {
+    if (name === "id") {
+      this.handleChange_id(oldValue, newValue);
+      return;
+    }
     if (name.startsWith("aria-")) {
       this.handleChange_aria(name, oldValue, newValue);
       return;
     }
+    if (PasswordInput.INPUT_ATTRIBUTES.includes(name)) {
+      this.handleChange_inputAttribute(name, newValue);
+      return;
+    }
     if (this[`handleChange_${name}`]) {
       this[`handleChange_${name}`](oldValue, newValue);
     }
@@ -206,7 +272,10 @@ class PasswordInput extends HTMLElement {
                 </span>
             </div>
         `;
-    this.removeAttribute("id");
+    if (this.hasAttribute("id")) {
+      this.ignoredIdCallback = true;
+      this.removeAttribute("id");
+    }
     for (const attr of hostAriaAttributes) {
       this.ignoredAriaCallbackNames.add(attr.name);
       this.removeAttribute(attr.name);

package/dist/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/index.ts"],
-  "sourcesContent": ["import { define } from '@substrate-system/web-component/util'\nimport { define as slashDefine } from '@substrate-system/icons/eye-slash'\nimport { define as regularDefine } from '@substrate-system/icons/eye-regular'\n// import Debug from '@substrate-system/debug'\n// const debug = Debug('password-input')\n\nslashDefine()\nregularDefine()\n\n// for docuement.querySelector\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'password-input':PasswordInput\n    }\n}\n\nexport class PasswordInput extends HTMLElement {\n    static TAG = 'password-input'\n    static ARIA_ATTRIBUTES = [\n        'aria-activedescendant',\n        'aria-atomic',\n        'aria-autocomplete',\n        'aria-braillelabel',\n        'aria-brailleroledescription',\n        'aria-busy',\n        'aria-checked',\n        'aria-colcount',\n        'aria-colindex',\n        'aria-colindextext',\n        'aria-colspan',\n        'aria-controls',\n        'aria-current',\n        'aria-describedby',\n        'aria-description',\n        'aria-details',\n        'aria-disabled',\n        'aria-dropeffect',\n        'aria-errormessage',\n        'aria-expanded',\n        'aria-flowto',\n        'aria-grabbed',\n        'aria-haspopup',\n        'aria-hidden',\n        'aria-invalid',\n        'aria-keyshortcuts',\n        'aria-label',\n        'aria-labelledby',\n        'aria-level',\n        'aria-live',\n        'aria-modal',\n        'aria-multiline',\n        'aria-multiselectable',\n        'aria-orientation',\n        'aria-owns',\n        'aria-placeholder',\n        'aria-posinset',\n        'aria-pressed',\n        'aria-readonly',\n        'aria-relevant',\n        'aria-required',\n        'aria-roledescription',\n        'aria-rowcount',\n        'aria-rowindex',\n        'aria-rowindextext',\n        'aria-rowspan',\n        'aria-selected',\n        'aria-setsize',\n        'aria-sort',\n        'aria-valuemax',\n        'aria-valuemin',\n        'aria-valuenow',\n        'aria-valuetext'\n    ]\n\n    static observedAttributes = (['visible', 'label'])\n        .concat(PasswordInput.ARIA_ATTRIBUTES)\n\n    inputId:string|null = null\n    inputAriaAttributes:Record<string, string> = {}\n    ignoredAriaCallbackNames:Set<string> = new Set()\n\n    // empty string = is visible\n    // null = not visible\n    handleChange_visible (_, _newValue) {\n        this.reRender()\n    }\n\n    handleChange_label (_oldValue, _newValue) {\n        this.render()\n        this._listen()\n    }\n\n    handleChange_aria (\n        name:string,\n        _oldValue:string|null,\n        newValue:string|null\n    ) {\n        if (this.ignoredAriaCallbackNames.has(name)) {\n            this.ignoredAriaCallbackNames.delete(name)\n            return\n        }\n\n        if (newValue === null) {\n            delete this.inputAriaAttributes[name]\n            this.querySelector('input')?.removeAttribute(name)\n            return\n        }\n\n        this.inputAriaAttributes[name] = newValue\n        this.querySelector('input')?.setAttribute(name, newValue)\n\n        if (this.hasAttribute(name)) {\n            this.ignoredAriaCallbackNames.add(name)\n            this.removeAttribute(name)\n        }\n    }\n\n    /**\n     * Listen for change in visiblity.\n     *\n     * @param  {string} name     The attribute name\n     * @param  {string} oldValue The old attribute value\n     * @param  {string} newValue The new attribute value\n     */\n    async attributeChangedCallback (\n        name:string,\n        oldValue:string,\n        newValue:string\n    ) {\n        if (name.startsWith('aria-')) {\n            this.handleChange_aria(name, oldValue, newValue)\n            return\n        }\n\n        if (this[`handleChange_${name}`]) {\n            this[`handleChange_${name}`](oldValue, newValue)\n        }\n    }\n\n    connectedCallback () {\n        this.render()\n        this._listen()\n    }\n\n    _listen () {\n        const btn = this.querySelector('button')!\n        btn.addEventListener('click', (ev) => {\n            ev.preventDefault()\n            this.isVisible = !this.isVisible\n        })\n    }\n\n    getType ():'text'|'password' {\n        return this.isVisible ? 'text' : 'password'\n    }\n\n    set isVisible (value:boolean) {\n        if (value) {\n            this.setAttribute('visible', '')\n        } else {\n            this.removeAttribute('visible')\n        }\n    }\n\n    get isVisible ():boolean {\n        return this.hasAttribute('visible')\n    }\n\n    set label (value:string|null) {\n        if (value === null) {\n            this.removeAttribute('label')\n            return\n        }\n\n        this.setAttribute('label', value)\n    }\n\n    get label ():string|null {\n        return this.getAttribute('label')\n    }\n\n    getButtonContent () {\n        return (this.isVisible ?\n            '<eye-regular></eye-regular><span class=\"visually-hidden\">Hide</span>' :\n            '<eye-slash></eye-slash><span class=\"visually-hidden\">Show</span>')\n    }\n\n    /**\n     * Change the visibility button state.\n     */\n    reRender () {\n        const btn = this.querySelector('.pw-visibility')\n        btn!.innerHTML = this.getButtonContent()\n        this.setAttribute('type', this.getType())\n        this.querySelector('input')?.setAttribute('type', this.getType())\n    }\n\n    render () {\n        const name = this.getAttribute('name')\n        const label = this.getAttribute('label')\n        const hostId = this.getAttribute('id')\n        const hostAriaAttributes = Array.from(this.attributes)\n            .filter(attr => attr.name.startsWith('aria-'))\n\n        if (hostId !== null) {\n            this.inputId = hostId\n        }\n\n        for (const attr of hostAriaAttributes) {\n            this.inputAriaAttributes[attr.name] = attr.value\n        }\n\n        // create object from attributes\n        const attrs = Array.from(this.attributes)\n            .filter(attr =>\n                attr.name !== 'label' &&\n                attr.name !== 'id' &&\n                !attr.name.startsWith('aria-')\n            )\n            .map(attr => attr.name + (attr.value === '' ?\n                '' :\n                ('=' + `\"${attr.value}\"`))\n            )\n            .join(' ')\n\n        const classes = (this.getAttribute('class') ?? '').split(' ')\n            .concat(['password', 'input', name || ''])\n            .filter(Boolean)\n            .join(' ')\n\n        const idAttribute = this.inputId ? `id=\"${this.inputId}\"` : ''\n        const ariaAttributes = Object.entries(this.inputAriaAttributes)\n            .map(([attrName, attrValue]) => {\n                return (attrName + (attrValue === '' ?\n                    '' :\n                    ('=' + `\"${attrValue}\"`)))\n            })\n            .join(' ')\n\n        this.innerHTML = label ? `\n            <label class=\"${classes}\">\n                <span class=\"label-content\">${label}</span>\n                <span class=\"input\">\n                    <input\n                        ${idAttribute}\n                        ${ariaAttributes}\n                        ${attrs}\n                        type=${this.getType()} />\n                    <button class=\"pw-visibility\">\n                        ${this.getButtonContent()}\n                    </button>\n                </span>\n            </label>\n        ` : `\n            <div class=\"${classes}\">\n                <span class=\"input\">\n                    <input\n                        ${idAttribute}\n                        ${ariaAttributes}\n                        ${attrs}\n                        type=${this.getType()} />\n                    <button class=\"pw-visibility\">\n                        ${this.getButtonContent()}\n                    </button>\n                </span>\n            </div>\n        `\n\n        this.removeAttribute('id')\n        for (const attr of hostAriaAttributes) {\n            this.ignoredAriaCallbackNames.add(attr.name)\n            this.removeAttribute(attr.name)\n        }\n    }\n}\n\ndefine(PasswordInput.TAG, PasswordInput)\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { define } from '@substrate-system/web-component/util'\nimport { define as slashDefine } from '@substrate-system/icons/eye-slash'\nimport { define as regularDefine } from '@substrate-system/icons/eye-regular'\n// import Debug from '@substrate-system/debug'\n// const debug = Debug('password-input')\n\nslashDefine()\nregularDefine()\n\n// for docuement.querySelector\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'password-input':PasswordInput\n    }\n}\n\nexport class PasswordInput extends HTMLElement {\n    static TAG = 'password-input'\n    static INPUT_ATTRIBUTES = [\n        'accept',\n        'alt',\n        'autocomplete',\n        'autocapitalize',\n        'autocorrect',\n        'autofocus',\n        'capture',\n        'dirname',\n        'disabled',\n        'enterkeyhint',\n        'form',\n        'inputmode',\n        'list',\n        'max',\n        'maxlength',\n        'min',\n        'minlength',\n        'multiple',\n        'name',\n        'pattern',\n        'placeholder',\n        'readonly',\n        'required',\n        'size',\n        'spellcheck',\n        'step',\n        'tabindex',\n        'title',\n        'value'\n    ]\n\n    static ARIA_ATTRIBUTES = [\n        'aria-activedescendant',\n        'aria-atomic',\n        'aria-autocomplete',\n        'aria-braillelabel',\n        'aria-brailleroledescription',\n        'aria-busy',\n        'aria-checked',\n        'aria-colcount',\n        'aria-colindex',\n        'aria-colindextext',\n        'aria-colspan',\n        'aria-controls',\n        'aria-current',\n        'aria-describedby',\n        'aria-description',\n        'aria-details',\n        'aria-disabled',\n        'aria-dropeffect',\n        'aria-errormessage',\n        'aria-expanded',\n        'aria-flowto',\n        'aria-grabbed',\n        'aria-haspopup',\n        'aria-hidden',\n        'aria-invalid',\n        'aria-keyshortcuts',\n        'aria-label',\n        'aria-labelledby',\n        'aria-level',\n        'aria-live',\n        'aria-modal',\n        'aria-multiline',\n        'aria-multiselectable',\n        'aria-orientation',\n        'aria-owns',\n        'aria-placeholder',\n        'aria-posinset',\n        'aria-pressed',\n        'aria-readonly',\n        'aria-relevant',\n        'aria-required',\n        'aria-roledescription',\n        'aria-rowcount',\n        'aria-rowindex',\n        'aria-rowindextext',\n        'aria-rowspan',\n        'aria-selected',\n        'aria-setsize',\n        'aria-sort',\n        'aria-valuemax',\n        'aria-valuemin',\n        'aria-valuenow',\n        'aria-valuetext'\n    ]\n\n    static observedAttributes = (['visible', 'label', 'id'])\n        .concat(PasswordInput.INPUT_ATTRIBUTES)\n        .concat(PasswordInput.ARIA_ATTRIBUTES)\n\n    inputId:string|null = null\n    inputAriaAttributes:Record<string, string> = {}\n    ignoredAriaCallbackNames:Set<string> = new Set()\n    ignoredIdCallback = false\n\n    // empty string = is visible\n    // null = not visible\n    handleChange_visible (_, _newValue) {\n        this.reRender()\n    }\n\n    handleChange_label (_oldValue, _newValue) {\n        this.render()\n        this._listen()\n    }\n\n    handleChange_aria (\n        name:string,\n        _oldValue:string|null,\n        newValue:string|null\n    ) {\n        if (this.ignoredAriaCallbackNames.has(name)) {\n            this.ignoredAriaCallbackNames.delete(name)\n            return\n        }\n\n        if (newValue === null) {\n            delete this.inputAriaAttributes[name]\n            this.querySelector('input')?.removeAttribute(name)\n            return\n        }\n\n        this.inputAriaAttributes[name] = newValue\n        this.querySelector('input')?.setAttribute(name, newValue)\n\n        if (this.hasAttribute(name)) {\n            this.ignoredAriaCallbackNames.add(name)\n            this.removeAttribute(name)\n        }\n    }\n\n    handleChange_id (_oldValue:string|null, newValue:string|null) {\n        if (this.ignoredIdCallback) {\n            this.ignoredIdCallback = false\n            return\n        }\n\n        if (newValue === null) {\n            this.inputId = null\n            this.querySelector('input')?.removeAttribute('id')\n            return\n        }\n\n        this.inputId = newValue\n        this.querySelector('input')?.setAttribute('id', newValue)\n\n        if (this.hasAttribute('id')) {\n            this.ignoredIdCallback = true\n            this.removeAttribute('id')\n        }\n    }\n\n    handleChange_inputAttribute (name:string, newValue:string|null) {\n        const input = this.querySelector('input')\n        if (!input) return\n\n        if (newValue === null) {\n            input.removeAttribute(name)\n            return\n        }\n\n        input.setAttribute(name, newValue)\n    }\n\n    /**\n     * Listen for change in visiblity.\n     *\n     * @param  {string} name     The attribute name\n     * @param  {string} oldValue The old attribute value\n     * @param  {string} newValue The new attribute value\n     */\n    async attributeChangedCallback (\n        name:string,\n        oldValue:string,\n        newValue:string\n    ) {\n        if (name === 'id') {\n            this.handleChange_id(oldValue, newValue)\n            return\n        }\n\n        if (name.startsWith('aria-')) {\n            this.handleChange_aria(name, oldValue, newValue)\n            return\n        }\n\n        if (PasswordInput.INPUT_ATTRIBUTES.includes(name)) {\n            this.handleChange_inputAttribute(name, newValue)\n            return\n        }\n\n        if (this[`handleChange_${name}`]) {\n            this[`handleChange_${name}`](oldValue, newValue)\n        }\n    }\n\n    connectedCallback () {\n        this.render()\n        this._listen()\n    }\n\n    _listen () {\n        const btn = this.querySelector('button')!\n        btn.addEventListener('click', (ev) => {\n            ev.preventDefault()\n            this.isVisible = !this.isVisible\n        })\n    }\n\n    getType ():'text'|'password' {\n        return this.isVisible ? 'text' : 'password'\n    }\n\n    set isVisible (value:boolean) {\n        if (value) {\n            this.setAttribute('visible', '')\n        } else {\n            this.removeAttribute('visible')\n        }\n    }\n\n    get isVisible ():boolean {\n        return this.hasAttribute('visible')\n    }\n\n    set label (value:string|null) {\n        if (value === null) {\n            this.removeAttribute('label')\n            return\n        }\n\n        this.setAttribute('label', value)\n    }\n\n    get label ():string|null {\n        return this.getAttribute('label')\n    }\n\n    getButtonContent () {\n        return (this.isVisible ?\n            '<eye-regular></eye-regular><span class=\"visually-hidden\">Hide</span>' :\n            '<eye-slash></eye-slash><span class=\"visually-hidden\">Show</span>')\n    }\n\n    /**\n     * Change the visibility button state.\n     */\n    reRender () {\n        const btn = this.querySelector('.pw-visibility')\n        btn!.innerHTML = this.getButtonContent()\n        this.setAttribute('type', this.getType())\n        this.querySelector('input')?.setAttribute('type', this.getType())\n    }\n\n    render () {\n        const name = this.getAttribute('name')\n        const label = this.getAttribute('label')\n        const hostId = this.getAttribute('id')\n        const hostAriaAttributes = Array.from(this.attributes)\n            .filter(attr => attr.name.startsWith('aria-'))\n\n        if (hostId !== null) {\n            this.inputId = hostId\n        }\n\n        for (const attr of hostAriaAttributes) {\n            this.inputAriaAttributes[attr.name] = attr.value\n        }\n\n        // create string from attributes\n        const attrs = Array.from(this.attributes)\n            .filter(attr =>\n                attr.name !== 'label' &&\n                attr.name !== 'id' &&\n                !attr.name.startsWith('aria-')\n            )\n            .map(attr => attr.name + (attr.value === '' ?\n                '' :\n                ('=' + `\"${attr.value}\"`))\n            )\n            .join(' ')\n\n        const classes = (this.getAttribute('class') ?? '').split(' ')\n            .concat(['password', 'input', name || ''])\n            .filter(Boolean)\n            .join(' ')\n\n        const idAttribute = this.inputId ? `id=\"${this.inputId}\"` : ''\n        const ariaAttributes = Object.entries(this.inputAriaAttributes)\n            .map(([attrName, attrValue]) => {\n                return (attrName + (attrValue === '' ?\n                    '' :\n                    ('=' + `\"${attrValue}\"`)))\n            })\n            .join(' ')\n\n        this.innerHTML = label ? `\n            <label class=\"${classes}\">\n                <span class=\"label-content\">${label}</span>\n                <span class=\"input\">\n                    <input\n                        ${idAttribute}\n                        ${ariaAttributes}\n                        ${attrs}\n                        type=${this.getType()} />\n                    <button class=\"pw-visibility\">\n                        ${this.getButtonContent()}\n                    </button>\n                </span>\n            </label>\n        ` : `\n            <div class=\"${classes}\">\n                <span class=\"input\">\n                    <input\n                        ${idAttribute}\n                        ${ariaAttributes}\n                        ${attrs}\n                        type=${this.getType()} />\n                    <button class=\"pw-visibility\">\n                        ${this.getButtonContent()}\n                    </button>\n                </span>\n            </div>\n        `\n\n        if (this.hasAttribute('id')) {\n            this.ignoredIdCallback = true\n            this.removeAttribute('id')\n        }\n        for (const attr of hostAriaAttributes) {\n            this.ignoredAriaCallbackNames.add(attr.name)\n            this.removeAttribute(attr.name)\n        }\n    }\n}\n\ndefine(PasswordInput.TAG, PasswordInput)\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/index.min.js

@@ -1,6 +1,6 @@
-var R=Object.defineProperty;var i=(t,e)=>R(t,"name",{value:e,configurable:!0});var q=Object.defineProperty,O=i((t,e)=>q(t,"name",{value:e,configurable:!0}),"__name");function $(t){return Object.keys(t).reduce((e,a)=>{let r=t[a];return r?typeof r=="boolean"?r?(e+` ${a}`).trim():e:Array.isArray(r)?e+` ${a}="${r.join(" ")}"`:(e+` ${a}="${r}"`).trim():e},"")}i($,"toAttributes");O($,"toAttributes");var D=Object.defineProperty,b=i((t,e)=>D(t,"name",{value:e,configurable:!0}),"__name");function x(t){return document.createElement(t).constructor!==window.HTMLElement}i(x,"isRegistered");b(x,"isRegistered");function f(t,e){window&&"customElements"in window&&(x(t)||window.customElements.define(t,e))}i(f,"define");b(f,"define");var se=document.querySelector.bind(document),oe=document.querySelectorAll.bind(document);function I(t,e){return t.matches||(t=t.parentElement),t.matches(e)?t:t.closest(e)}i(I,"match");b(I,"match");var z=Object.defineProperty,B=i((t,e)=>z(t,"name",{value:e,configurable:!0}),"__name");function T(t){return Object.keys(t).reduce((e,a)=>{let r=t[a];return r?typeof r=="boolean"?r?(e+` ${a}`).trim():e:Array.isArray(r)?e+` ${a}="${r.join(" ")}"`:(e+` ${a}="${r}"`).trim():e},"")}i(T,"toAttributes");B(T,"toAttributes");var F=Object.defineProperty,H=i((t,e)=>F(t,"name",{value:e,configurable:!0}),"__name");function L(t){return document.createElement(t).constructor!==window.HTMLElement}i(L,"isRegistered");H(L,"isRegistered");function o(t,e){window&&"customElements"in window&&(L(t)||window.customElements.define(t,e))}i(o,"define");H(o,"define");var fe=document.querySelector.bind(document),he=document.querySelectorAll.bind(document);var V=Object.defineProperty,G=i((t,e)=>V(t,"name",{value:e,configurable:!0}),"__name"),N=/[\s\u2000-\u206F\u2E00-\u2E7F\\'!"#$%&()*+,\-.\/:;<=>?@\[\]^_`{|}~]+/,W=/[A-ZÀ-Ý\u00C0-\u00D6\u00D9-\u00DD][a-zà-ÿ]/g,U=/[A-ZÀ-Ý\u00C0-\u00D6\u00D9-\u00DD]+/g;function s(t){return t=t.replace(W,function(e){return" "+(e[0].toLowerCase()||e[0])+e[1]}),t=t.replace(U,function(e){return" "+e.toLowerCase()}),t.trim().split(N).join("-").replace(/^-/,"").replace(/-\s*$/,"")}i(s,"kebabCase");G(s,"kebabCase");var Z=Object.defineProperty,J=i((t,e)=>Z(t,"name",{value:e,configurable:!0}),"__name");function l(t,e){return function(a){let r=t(a);return typeof window>"u"?`<${e} class="icon">
+var q=Object.defineProperty;var i=(t,e)=>q(t,"name",{value:e,configurable:!0});var R=Object.defineProperty,M=i((t,e)=>R(t,"name",{value:e,configurable:!0}),"__name");function T(t){return Object.keys(t).reduce((e,n)=>{let r=t[n];return r?typeof r=="boolean"?r?(e+` ${n}`).trim():e:Array.isArray(r)?e+` ${n}="${r.join(" ")}"`:(e+` ${n}="${r}"`).trim():e},"")}i(T,"toAttributes");M(T,"toAttributes");var O=Object.defineProperty,b=i((t,e)=>O(t,"name",{value:e,configurable:!0}),"__name");function $(t){return document.createElement(t).constructor!==window.HTMLElement}i($,"isRegistered");b($,"isRegistered");function h(t,e){window&&"customElements"in window&&($(t)||window.customElements.define(t,e))}i(h,"define");b(h,"define");var se=document.querySelector.bind(document),oe=document.querySelectorAll.bind(document);function B(t,e){return t.matches||(t=t.parentElement),t.matches(e)?t:t.closest(e)}i(B,"match");b(B,"match");var z=Object.defineProperty,D=i((t,e)=>z(t,"name",{value:e,configurable:!0}),"__name");function x(t){return Object.keys(t).reduce((e,n)=>{let r=t[n];return r?typeof r=="boolean"?r?(e+` ${n}`).trim():e:Array.isArray(r)?e+` ${n}="${r.join(" ")}"`:(e+` ${n}="${r}"`).trim():e},"")}i(x,"toAttributes");D(x,"toAttributes");var N=Object.defineProperty,S=i((t,e)=>N(t,"name",{value:e,configurable:!0}),"__name");function I(t){return document.createElement(t).constructor!==window.HTMLElement}i(I,"isRegistered");S(I,"isRegistered");function o(t,e){window&&"customElements"in window&&(I(t)||window.customElements.define(t,e))}i(o,"define");S(o,"define");var he=document.querySelector.bind(document),pe=document.querySelectorAll.bind(document);var F=Object.defineProperty,U=i((t,e)=>F(t,"name",{value:e,configurable:!0}),"__name"),G=/[\s\u2000-\u206F\u2E00-\u2E7F\\'!"#$%&()*+,\-.\/:;<=>?@\[\]^_`{|}~]+/,W=/[A-ZÀ-Ý\u00C0-\u00D6\u00D9-\u00DD][a-zà-ÿ]/g,V=/[A-ZÀ-Ý\u00C0-\u00D6\u00D9-\u00DD]+/g;function s(t){return t=t.replace(W,function(e){return" "+(e[0].toLowerCase()||e[0])+e[1]}),t=t.replace(V,function(e){return" "+e.toLowerCase()}),t.trim().split(G).join("-").replace(/^-/,"").replace(/-\s*$/,"")}i(s,"kebabCase");U(s,"kebabCase");var Z=Object.defineProperty,J=i((t,e)=>Z(t,"name",{value:e,configurable:!0}),"__name");function l(t,e){return function(n){let r=t(n);return typeof window>"u"?`<${e} class="icon">
                 ${r}
-            </${e}>`:r}}i(l,"createRenderer");J(l,"createRenderer");var K=Object.defineProperty,P=i((t,e)=>K(t,"name",{value:e,configurable:!0}),"__name"),h=l(S,"eye-slash");function S({title:t}={}){return t||(t="Hide"),`<svg
+            </${e}>`:r}}i(l,"createRenderer");J(l,"createRenderer");var K=Object.defineProperty,P=i((t,e)=>K(t,"name",{value:e,configurable:!0}),"__name"),p=l(k,"eye-slash");function k({title:t}={}){return t||(t="Hide"),`<svg
         class="icon eye-slash"
         xmlns="http://www.w3.org/2000/svg"
         viewBox="0 0 640 512"
@@ -10,7 +10,7 @@ var R=Object.defineProperty;var i=(t,e)=>R(t,"name",{value:e,configurable:!0});v
         <title id=${s(t)}>${t}</title>
         <!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
         <path d="M38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2S-1.2 34.7 9.2 42.9l592 464c10.4 8.2 25.5 6.3 33.7-4.1s6.3-25.5-4.1-33.7L525.6 386.7c39.6-40.6 66.4-86.1 79.9-118.4c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C465.5 68.8 400.8 32 320 32c-68.2 0-125 26.3-169.3 60.8L38.8 5.1zM223.1 149.5C248.6 126.2 282.7 112 320 112c79.5 0 144 64.5 144 144c0 24.9-6.3 48.3-17.4 68.7L408 294.5c8.4-19.3 10.6-41.4 4.8-63.3c-11.1-41.5-47.8-69.4-88.6-71.1c-5.8-.2-9.2 6.1-7.4 11.7c2.1 6.4 3.3 13.2 3.3 20.3c0 10.2-2.4 19.8-6.6 28.3l-90.3-70.8zM373 389.9c-16.4 6.5-34.3 10.1-53 10.1c-79.5 0-144-64.5-144-144c0-6.9 .5-13.6 1.4-20.2L83.1 161.5C60.3 191.2 44 220.8 34.5 243.7c-3.3 7.9-3.3 16.7 0 24.6c14.9 35.7 46.2 87.7 93 131.1C174.5 443.2 239.2 480 320 480c47.8 0 89.9-12.9 126.2-32.5L373 389.9z" />
-    </svg>`}i(S,"createHtml");P(S,"createHtml");function Q({title:t}){return`<eye-slash>${h({title:t})}</eye-slash>`}i(Q,"outerHtml");P(Q,"outerHtml");var X=Object.defineProperty,j=i((t,e)=>X(t,"name",{value:e,configurable:!0}),"__name"),u=class extends HTMLElement{static{i(this,"EyeSlash")}static{j(this,"EyeSlash")}static TAG="eye-slash";_title;constructor(){super(),this._title=this.getAttribute("title")||"Hide"}attributeChangedCallback(e,a,r){this._title=r,this.render()}connectedCallback(){let e=this.getAttribute("title");e==null?this._title="Hide":this._title=e,this.render()}render(){let e=this._title;this.innerHTML=h({title:e})}};function m(){o(u.TAG,u)}i(m,"define");j(m,"define");var Y=Object.defineProperty,E=i((t,e)=>Y(t,"name",{value:e,configurable:!0}),"__name"),p=l(M,"eye-regular");function M({title:t}={}){t||(t="Show");let e=s(t);return`<svg
+    </svg>`}i(k,"createHtml");P(k,"createHtml");function Q({title:t}){return`<eye-slash>${p({title:t})}</eye-slash>`}i(Q,"outerHtml");P(Q,"outerHtml");var X=Object.defineProperty,H=i((t,e)=>X(t,"name",{value:e,configurable:!0}),"__name"),u=class extends HTMLElement{static{i(this,"EyeSlash")}static{H(this,"EyeSlash")}static TAG="eye-slash";_title;constructor(){super(),this._title=this.getAttribute("title")||"Hide"}attributeChangedCallback(e,n,r){this._title=r,this.render()}connectedCallback(){let e=this.getAttribute("title");e==null?this._title="Hide":this._title=e,this.render()}render(){let e=this._title;this.innerHTML=p({title:e})}};function f(){o(u.TAG,u)}i(f,"define");H(f,"define");var Y=Object.defineProperty,E=i((t,e)=>Y(t,"name",{value:e,configurable:!0}),"__name"),m=l(L,"eye-regular");function L({title:t}={}){t||(t="Show");let e=s(t);return`<svg
         class="icon eye-regular"
         xmlns="http://www.w3.org/2000/svg"
         viewBox="0 0 576 512"
@@ -20,14 +20,14 @@ var R=Object.defineProperty;var i=(t,e)=>R(t,"name",{value:e,configurable:!0});v
         <title id="${e}">${t}</title>
         <!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
         <path d="M288 80c-65.2 0-118.8 29.6-159.9 67.7C89.6 183.5 63 226 49.4 256c13.6 30 40.2 72.5 78.6 108.3C169.2 402.4 222.8 432 288 432s118.8-29.6 159.9-67.7C486.4 328.5 513 286 526.6 256c-13.6-30-40.2-72.5-78.6-108.3C406.8 109.6 353.2 80 288 80zM95.4 112.6C142.5 68.8 207.2 32 288 32s145.5 36.8 192.6 80.6c46.8 43.5 78.1 95.4 93 131.1c3.3 7.9 3.3 16.7 0 24.6c-14.9 35.7-46.2 87.7-93 131.1C433.5 443.2 368.8 480 288 480s-145.5-36.8-192.6-80.6C48.6 356 17.3 304 2.5 268.3c-3.3-7.9-3.3-16.7 0-24.6C17.3 208 48.6 156 95.4 112.6zM288 336c44.2 0 80-35.8 80-80s-35.8-80-80-80c-.7 0-1.3 0-2 0c1.3 5.1 2 10.5 2 16c0 35.3-28.7 64-64 64c-5.5 0-10.9-.7-16-2c0 .7 0 1.3 0 2c0 44.2 35.8 80 80 80zm0-208a128 128 0 1 1 0 256 128 128 0 1 1 0-256z" />
-    </svg>`}i(M,"createHtml");E(M,"createHtml");function ee({title:t}){return`<eye-regular>${p({title:t})}</eye-regular>`}i(ee,"outerHtml");E(ee,"outerHtml");var te=Object.defineProperty,k=i((t,e)=>te(t,"name",{value:e,configurable:!0}),"__name"),c=class extends HTMLElement{static{i(this,"EyeRegular")}static{k(this,"EyeRegular")}static TAG="eye-regular";_title;constructor(){super(),this._title=this.getAttribute("title")||"See"}attributeChangedCallback(e,a,r){this._title=r,this.render()}connectedCallback(){let e=this.getAttribute("title");e==null?this._title="See":this._title=e,this.render()}render(){let e=this._title;e&&(this.innerHTML=p({title:e}))}};function g(){o(c.TAG,c)}i(g,"define");k(g,"define");m();g();var d=class t extends HTMLElement{static{i(this,"PasswordInput")}static TAG="password-input";static ARIA_ATTRIBUTES=["aria-activedescendant","aria-atomic","aria-autocomplete","aria-braillelabel","aria-brailleroledescription","aria-busy","aria-checked","aria-colcount","aria-colindex","aria-colindextext","aria-colspan","aria-controls","aria-current","aria-describedby","aria-description","aria-details","aria-disabled","aria-dropeffect","aria-errormessage","aria-expanded","aria-flowto","aria-grabbed","aria-haspopup","aria-hidden","aria-invalid","aria-keyshortcuts","aria-label","aria-labelledby","aria-level","aria-live","aria-modal","aria-multiline","aria-multiselectable","aria-orientation","aria-owns","aria-placeholder","aria-posinset","aria-pressed","aria-readonly","aria-relevant","aria-required","aria-roledescription","aria-rowcount","aria-rowindex","aria-rowindextext","aria-rowspan","aria-selected","aria-setsize","aria-sort","aria-valuemax","aria-valuemin","aria-valuenow","aria-valuetext"];static observedAttributes=["visible","label"].concat(t.ARIA_ATTRIBUTES);inputId=null;inputAriaAttributes={};ignoredAriaCallbackNames=new Set;handleChange_visible(e,a){this.reRender()}handleChange_label(e,a){this.render(),this._listen()}handleChange_aria(e,a,r){if(this.ignoredAriaCallbackNames.has(e)){this.ignoredAriaCallbackNames.delete(e);return}if(r===null){delete this.inputAriaAttributes[e],this.querySelector("input")?.removeAttribute(e);return}this.inputAriaAttributes[e]=r,this.querySelector("input")?.setAttribute(e,r),this.hasAttribute(e)&&(this.ignoredAriaCallbackNames.add(e),this.removeAttribute(e))}async attributeChangedCallback(e,a,r){if(e.startsWith("aria-")){this.handleChange_aria(e,a,r);return}this[`handleChange_${e}`]&&this[`handleChange_${e}`](a,r)}connectedCallback(){this.render(),this._listen()}_listen(){this.querySelector("button").addEventListener("click",a=>{a.preventDefault(),this.isVisible=!this.isVisible})}getType(){return this.isVisible?"text":"password"}set isVisible(e){e?this.setAttribute("visible",""):this.removeAttribute("visible")}get isVisible(){return this.hasAttribute("visible")}set label(e){if(e===null){this.removeAttribute("label");return}this.setAttribute("label",e)}get label(){return this.getAttribute("label")}getButtonContent(){return this.isVisible?'<eye-regular></eye-regular><span class="visually-hidden">Hide</span>':'<eye-slash></eye-slash><span class="visually-hidden">Show</span>'}reRender(){let e=this.querySelector(".pw-visibility");e.innerHTML=this.getButtonContent(),this.setAttribute("type",this.getType()),this.querySelector("input")?.setAttribute("type",this.getType())}render(){let e=this.getAttribute("name"),a=this.getAttribute("label"),r=this.getAttribute("id"),_=Array.from(this.attributes).filter(n=>n.name.startsWith("aria-"));r!==null&&(this.inputId=r);for(let n of _)this.inputAriaAttributes[n.name]=n.value;let y=Array.from(this.attributes).filter(n=>n.name!=="label"&&n.name!=="id"&&!n.name.startsWith("aria-")).map(n=>n.name+(n.value===""?"":`="${n.value}"`)).join(" "),A=(this.getAttribute("class")??"").split(" ").concat(["password","input",e||""]).filter(Boolean).join(" "),v=this.inputId?`id="${this.inputId}"`:"",w=Object.entries(this.inputAriaAttributes).map(([n,C])=>n+(C===""?"":`="${C}"`)).join(" ");this.innerHTML=a?`
-            <label class="${A}">
-                <span class="label-content">${a}</span>
+    </svg>`}i(L,"createHtml");E(L,"createHtml");function ee({title:t}){return`<eye-regular>${m({title:t})}</eye-regular>`}i(ee,"outerHtml");E(ee,"outerHtml");var te=Object.defineProperty,j=i((t,e)=>te(t,"name",{value:e,configurable:!0}),"__name"),c=class extends HTMLElement{static{i(this,"EyeRegular")}static{j(this,"EyeRegular")}static TAG="eye-regular";_title;constructor(){super(),this._title=this.getAttribute("title")||"See"}attributeChangedCallback(e,n,r){this._title=r,this.render()}connectedCallback(){let e=this.getAttribute("title");e==null?this._title="See":this._title=e,this.render()}render(){let e=this._title;e&&(this.innerHTML=m({title:e}))}};function g(){o(c.TAG,c)}i(g,"define");j(g,"define");f();g();var d=class t extends HTMLElement{static{i(this,"PasswordInput")}static TAG="password-input";static INPUT_ATTRIBUTES=["accept","alt","autocomplete","autocapitalize","autocorrect","autofocus","capture","dirname","disabled","enterkeyhint","form","inputmode","list","max","maxlength","min","minlength","multiple","name","pattern","placeholder","readonly","required","size","spellcheck","step","tabindex","title","value"];static ARIA_ATTRIBUTES=["aria-activedescendant","aria-atomic","aria-autocomplete","aria-braillelabel","aria-brailleroledescription","aria-busy","aria-checked","aria-colcount","aria-colindex","aria-colindextext","aria-colspan","aria-controls","aria-current","aria-describedby","aria-description","aria-details","aria-disabled","aria-dropeffect","aria-errormessage","aria-expanded","aria-flowto","aria-grabbed","aria-haspopup","aria-hidden","aria-invalid","aria-keyshortcuts","aria-label","aria-labelledby","aria-level","aria-live","aria-modal","aria-multiline","aria-multiselectable","aria-orientation","aria-owns","aria-placeholder","aria-posinset","aria-pressed","aria-readonly","aria-relevant","aria-required","aria-roledescription","aria-rowcount","aria-rowindex","aria-rowindextext","aria-rowspan","aria-selected","aria-setsize","aria-sort","aria-valuemax","aria-valuemin","aria-valuenow","aria-valuetext"];static observedAttributes=["visible","label","id"].concat(t.INPUT_ATTRIBUTES).concat(t.ARIA_ATTRIBUTES);inputId=null;inputAriaAttributes={};ignoredAriaCallbackNames=new Set;ignoredIdCallback=!1;handleChange_visible(e,n){this.reRender()}handleChange_label(e,n){this.render(),this._listen()}handleChange_aria(e,n,r){if(this.ignoredAriaCallbackNames.has(e)){this.ignoredAriaCallbackNames.delete(e);return}if(r===null){delete this.inputAriaAttributes[e],this.querySelector("input")?.removeAttribute(e);return}this.inputAriaAttributes[e]=r,this.querySelector("input")?.setAttribute(e,r),this.hasAttribute(e)&&(this.ignoredAriaCallbackNames.add(e),this.removeAttribute(e))}handleChange_id(e,n){if(this.ignoredIdCallback){this.ignoredIdCallback=!1;return}if(n===null){this.inputId=null,this.querySelector("input")?.removeAttribute("id");return}this.inputId=n,this.querySelector("input")?.setAttribute("id",n),this.hasAttribute("id")&&(this.ignoredIdCallback=!0,this.removeAttribute("id"))}handleChange_inputAttribute(e,n){let r=this.querySelector("input");if(r){if(n===null){r.removeAttribute(e);return}r.setAttribute(e,n)}}async attributeChangedCallback(e,n,r){if(e==="id"){this.handleChange_id(n,r);return}if(e.startsWith("aria-")){this.handleChange_aria(e,n,r);return}if(t.INPUT_ATTRIBUTES.includes(e)){this.handleChange_inputAttribute(e,r);return}this[`handleChange_${e}`]&&this[`handleChange_${e}`](n,r)}connectedCallback(){this.render(),this._listen()}_listen(){this.querySelector("button").addEventListener("click",n=>{n.preventDefault(),this.isVisible=!this.isVisible})}getType(){return this.isVisible?"text":"password"}set isVisible(e){e?this.setAttribute("visible",""):this.removeAttribute("visible")}get isVisible(){return this.hasAttribute("visible")}set label(e){if(e===null){this.removeAttribute("label");return}this.setAttribute("label",e)}get label(){return this.getAttribute("label")}getButtonContent(){return this.isVisible?'<eye-regular></eye-regular><span class="visually-hidden">Hide</span>':'<eye-slash></eye-slash><span class="visually-hidden">Show</span>'}reRender(){let e=this.querySelector(".pw-visibility");e.innerHTML=this.getButtonContent(),this.setAttribute("type",this.getType()),this.querySelector("input")?.setAttribute("type",this.getType())}render(){let e=this.getAttribute("name"),n=this.getAttribute("label"),r=this.getAttribute("id"),A=Array.from(this.attributes).filter(a=>a.name.startsWith("aria-"));r!==null&&(this.inputId=r);for(let a of A)this.inputAriaAttributes[a.name]=a.value;let _=Array.from(this.attributes).filter(a=>a.name!=="label"&&a.name!=="id"&&!a.name.startsWith("aria-")).map(a=>a.name+(a.value===""?"":`="${a.value}"`)).join(" "),y=(this.getAttribute("class")??"").split(" ").concat(["password","input",e||""]).filter(Boolean).join(" "),v=this.inputId?`id="${this.inputId}"`:"",C=Object.entries(this.inputAriaAttributes).map(([a,w])=>a+(w===""?"":`="${w}"`)).join(" ");this.innerHTML=n?`
+            <label class="${y}">
+                <span class="label-content">${n}</span>
                 <span class="input">
                     <input
                         ${v}
-                        ${w}
-                        ${y}
+                        ${C}
+                        ${_}
                         type=${this.getType()} />
                     <button class="pw-visibility">
                         ${this.getButtonContent()}
@@ -35,17 +35,17 @@ var R=Object.defineProperty;var i=(t,e)=>R(t,"name",{value:e,configurable:!0});v
                 </span>
             </label>
         `:`
-            <div class="${A}">
+            <div class="${y}">
                 <span class="input">
                     <input
                         ${v}
-                        ${w}
-                        ${y}
+                        ${C}
+                        ${_}
                         type=${this.getType()} />
                     <button class="pw-visibility">
                         ${this.getButtonContent()}
                     </button>
                 </span>
             </div>
-        `,this.removeAttribute("id");for(let n of _)this.ignoredAriaCallbackNames.add(n.name),this.removeAttribute(n.name)}};f(d.TAG,d);export{d as PasswordInput};
+        `,this.hasAttribute("id")&&(this.ignoredIdCallback=!0,this.removeAttribute("id"));for(let a of A)this.ignoredAriaCallbackNames.add(a.name),this.removeAttribute(a.name)}};h(d.TAG,d);export{d as PasswordInput};
 //# sourceMappingURL=index.min.js.map

package/dist/index.min.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../node_modules/@substrate-system/web-component/src/attributes.ts", "../node_modules/@substrate-system/web-component/src/util.ts", "../node_modules/@substrate-system/icons/node_modules/@substrate-system/web-component/src/attributes.ts", "../node_modules/@substrate-system/icons/node_modules/@substrate-system/web-component/src/util.ts", "../node_modules/@substrate-system/kebab-case/src/index.ts", "../node_modules/@substrate-system/icons/src/util.ts", "../node_modules/@substrate-system/icons/src/render/eye-slash.ts", "../node_modules/@substrate-system/icons/src/eye-slash.ts", "../node_modules/@substrate-system/icons/src/render/eye-regular.ts", "../node_modules/@substrate-system/icons/src/eye-regular.ts", "../src/index.ts"],
-  "sourcesContent": ["export type Attrs = Record<string, undefined|null|string|number|boolean|(string|number)[]>\n\n/**\n * Transform an object into an HTML attributes string. The object should be\n * like `{ attributeName: value }`.\n *\n * @param attrs An object for the attributes.\n * @returns {string} A string suitable for use as HTML attributes.\n */\nexport function toAttributes (attrs:Attrs):string {\n    return Object.keys(attrs).reduce((acc, k) => {\n        const value = attrs[k]\n        if (!value) return acc\n\n        if (typeof value === 'boolean') {\n            if (value) return (acc + ` ${k}`).trim()\n            return acc\n        }\n\n        if (Array.isArray(value)) {\n            return (acc + ` ${k}=\"${value.join(' ')}\"`)\n        }\n\n        return (acc + ` ${k}=\"${value}\"`).trim()\n    }, '')\n}\n", "export { toAttributes } from './attributes.js'\n\n/**\n * Check if the given tag name has been registered.\n *\n * @see {@link https://stackoverflow.com/a/28210364 stackoverflow}\n * @param {string} elName The custom element tag name.\n * @returns {boolean} True if the given name has been registered already.\n */\nexport function isRegistered (elName:string):boolean {\n    return document.createElement(elName).constructor !== window.HTMLElement\n}\n\nexport function define (name:string, element:CustomElementConstructor) {\n    if (!window) return\n    if (!('customElements' in window)) return\n\n    if (!isRegistered(name)) {\n        window.customElements.define(name, element)\n    }\n}\n\nexport const qs = document.querySelector.bind(document)\nexport const qsa = document.querySelectorAll.bind(document)\n\n/**\n * Get the closes parent element matching the given selector.\n * @param el Element to start from\n * @param s Selector for an element\n * @returns {HTMLElement|null} The closes parent element that matches.\n */\nexport function match (el:HTMLElement, s:string):HTMLElement|null {\n    if (!el.matches) el = el.parentElement!\n    return el.matches(s) ? el : el.closest(s)\n}\n", "export type Attrs = Record<string, undefined|null|string|number|boolean|(string|number)[]>\n\n/**\n * Transform an object into an HTML attributes string. The object should be\n * like `{ attributeName: value }`.\n *\n * @param attrs An object for the attributes.\n * @returns {string} A string suitable for use as HTML attributes.\n */\nexport function toAttributes (attrs:Attrs):string {\n    return Object.keys(attrs).reduce((acc, k) => {\n        const value = attrs[k]\n        if (!value) return acc\n\n        if (typeof value === 'boolean') {\n            if (value) return (acc + ` ${k}`).trim()\n            return acc\n        }\n\n        if (Array.isArray(value)) {\n            return (acc + ` ${k}=\"${value.join(' ')}\"`)\n        }\n\n        return (acc + ` ${k}=\"${value}\"`).trim()\n    }, '')\n}\n", "export { toAttributes } from './attributes.js'\n\n/**\n * Check if the given tag name has been registered.\n *\n * @see {@link https://stackoverflow.com/a/28210364 stackoverflow}\n * @param {string} elName The custom element tag name.\n * @returns {boolean} True if the given name has been registered already.\n */\nexport function isRegistered (elName:string):boolean {\n    return document.createElement(elName).constructor !== window.HTMLElement\n}\n\nexport function define (name:string, element:CustomElementConstructor) {\n    if (!window) return\n    if (!('customElements' in window)) return\n\n    if (!isRegistered(name)) {\n        window.customElements.define(name, element)\n    }\n}\n\nexport const qs = document.querySelector.bind(document)\nexport const qsa = document.querySelectorAll.bind(document)\n", "// any combination of spaces and punctuation characters\n// thanks to http://stackoverflow.com/a/25575009\nconst wordSeparators = /[\\s\\u2000-\\u206F\\u2E00-\\u2E7F\\\\'!\"#$%&()*+,\\-.\\/:;<=>?@\\[\\]^_`{|}~]+/\nconst capitalPlusLower = /[A-Z\u00C0-\u00DD\\u00C0-\\u00D6\\u00D9-\\u00DD][a-z\u00E0-\u00FF]/g\nconst capitals = /[A-Z\u00C0-\u00DD\\u00C0-\\u00D6\\u00D9-\\u00DD]+/g\n\nexport function kebabCase (str:string):string {\n    // replace word starts with space + lower case equivalent for later parsing\n    // 1) treat cap + lower as start of new word\n    str = str.replace(capitalPlusLower, function (match) {\n    // match is one caps followed by one non-cap\n        return ' ' + (match[0].toLowerCase() || match[0]) + match[1]\n    })\n    // 2) treat all remaining capitals as words\n    str = str.replace(capitals, function (match) {\n    // match is a series of caps\n        return ' ' + match.toLowerCase()\n    })\n    return str\n        .trim()\n        .split(wordSeparators)\n        .join('-')\n        .replace(/^-/, '')\n        .replace(/-\\s*$/, '')\n}\n\nexport default kebabCase\n", "import { type Attrs } from '@substrate-system/web-component/attributes'\n\nexport function createRenderer (\n    createHtml:(attrs?:Attrs)=>string,\n    tag:string\n) {\n    return function (attrs?:Attrs):string {\n        const html = createHtml(attrs)\n\n        // running in node?\n        return typeof window === 'undefined' ?\n            `<${tag} class=\"icon\">\n                ${html}\n            </${tag}>` :\n            html\n    }\n}\n", "import { kebabCase } from '@substrate-system/kebab-case'\nimport { createRenderer } from '../util.js'\n\nexport const eyeSlash = createRenderer(createHtml, 'eye-slash')\n\nfunction createHtml ({ title }:{ title?:string } = {}) {\n    if (!title) title = 'Hide'\n\n    const html = `<svg\n        class=\"icon eye-slash\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 640 512\"\n        role=\"image\"\n        aria-labelledby=\"${kebabCase(title)}\"\n    >\n        <title id=${kebabCase(title)}>${title}</title>\n        <!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->\n        <path d=\"M38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2S-1.2 34.7 9.2 42.9l592 464c10.4 8.2 25.5 6.3 33.7-4.1s6.3-25.5-4.1-33.7L525.6 386.7c39.6-40.6 66.4-86.1 79.9-118.4c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C465.5 68.8 400.8 32 320 32c-68.2 0-125 26.3-169.3 60.8L38.8 5.1zM223.1 149.5C248.6 126.2 282.7 112 320 112c79.5 0 144 64.5 144 144c0 24.9-6.3 48.3-17.4 68.7L408 294.5c8.4-19.3 10.6-41.4 4.8-63.3c-11.1-41.5-47.8-69.4-88.6-71.1c-5.8-.2-9.2 6.1-7.4 11.7c2.1 6.4 3.3 13.2 3.3 20.3c0 10.2-2.4 19.8-6.6 28.3l-90.3-70.8zM373 389.9c-16.4 6.5-34.3 10.1-53 10.1c-79.5 0-144-64.5-144-144c0-6.9 .5-13.6 1.4-20.2L83.1 161.5C60.3 191.2 44 220.8 34.5 243.7c-3.3 7.9-3.3 16.7 0 24.6c14.9 35.7 46.2 87.7 93 131.1C174.5 443.2 239.2 480 320 480c47.8 0 89.9-12.9 126.2-32.5L373 389.9z\" />\n    </svg>`\n\n    return html\n}\n\nexport function outerHtml ({ title }:{ title?:string }) {\n    return `<eye-slash>${eyeSlash({ title })}</eye-slash>`\n}\n", "import { define as _define } from '@substrate-system/web-component/util'\nimport { eyeSlash as render } from './render/eye-slash'\n\n// for document.querySelector\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'eye-slash': EyeSlash\n    }\n}\n\nexport class EyeSlash extends HTMLElement {\n    static TAG = 'eye-slash'\n    _title:string\n\n    constructor () {\n        super()\n        this._title = this.getAttribute('title') || 'Hide'\n    }\n\n    /**\n     * Only watching for 'title'.\n     */\n    attributeChangedCallback (_name, _oldValue, newValue) {\n        this._title = newValue\n        this.render()\n    }\n\n    connectedCallback () {\n        const title = this.getAttribute('title')\n        if (title === undefined || title === null) {\n            this._title = 'Hide'\n        } else {\n            this._title = title\n        }\n\n        this.render()\n    }\n\n    render () {\n        const title = this._title\n\n        this.innerHTML = render({ title })\n    }\n}\n\nexport function define () {\n    _define(EyeSlash.TAG, EyeSlash)\n}\n", "import { kebabCase } from '@substrate-system/kebab-case'\nimport { createRenderer } from '../util.js'\n\nexport const render = createRenderer(createHtml, 'eye-regular')\n\nfunction createHtml ({ title }:{ title?:string } = {}) {\n    if (!title) title = 'Show'\n    const kebabTitle = kebabCase(title)\n\n    const html = `<svg\n        class=\"icon eye-regular\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 576 512\"\n        role=\"image\"\n        aria-labelledby=\"${kebabTitle}\"\n    >\n        <title id=\"${kebabTitle}\">${title}</title>\n        <!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->\n        <path d=\"M288 80c-65.2 0-118.8 29.6-159.9 67.7C89.6 183.5 63 226 49.4 256c13.6 30 40.2 72.5 78.6 108.3C169.2 402.4 222.8 432 288 432s118.8-29.6 159.9-67.7C486.4 328.5 513 286 526.6 256c-13.6-30-40.2-72.5-78.6-108.3C406.8 109.6 353.2 80 288 80zM95.4 112.6C142.5 68.8 207.2 32 288 32s145.5 36.8 192.6 80.6c46.8 43.5 78.1 95.4 93 131.1c3.3 7.9 3.3 16.7 0 24.6c-14.9 35.7-46.2 87.7-93 131.1C433.5 443.2 368.8 480 288 480s-145.5-36.8-192.6-80.6C48.6 356 17.3 304 2.5 268.3c-3.3-7.9-3.3-16.7 0-24.6C17.3 208 48.6 156 95.4 112.6zM288 336c44.2 0 80-35.8 80-80s-35.8-80-80-80c-.7 0-1.3 0-2 0c1.3 5.1 2 10.5 2 16c0 35.3-28.7 64-64 64c-5.5 0-10.9-.7-16-2c0 .7 0 1.3 0 2c0 44.2 35.8 80 80 80zm0-208a128 128 0 1 1 0 256 128 128 0 1 1 0-256z\" />\n    </svg>`\n\n    return html\n}\n\nexport function outerHtml ({ title }:{ title?:string }) {\n    return `<eye-regular>${render({ title })}</eye-regular>`\n}\n", "import { define as _define } from '@substrate-system/web-component/util'\nimport { render } from './render/eye-regular.js'\n\n// for document.querySelector\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'eye-regular': EyeRegular\n    }\n}\n\nexport class EyeRegular extends HTMLElement {\n    static TAG = 'eye-regular'\n    _title:string\n\n    constructor () {\n        super()\n        this._title = this.getAttribute('title') || 'See'\n    }\n\n    /**\n     * Only watching for 'title'.\n     */\n    attributeChangedCallback (_name, _oldValue, newValue) {\n        this._title = newValue\n        this.render()\n    }\n\n    connectedCallback () {\n        const title = this.getAttribute('title')\n        if (title === undefined || title === null) {\n            this._title = 'See'\n        } else {\n            this._title = title\n        }\n\n        this.render()\n    }\n\n    render () {\n        const title = this._title\n        if (!title) return\n\n        this.innerHTML = render({ title })\n    }\n}\n\nexport function define () {\n    _define(EyeRegular.TAG, EyeRegular)\n}\n", "import { define } from '@substrate-system/web-component/util'\nimport { define as slashDefine } from '@substrate-system/icons/eye-slash'\nimport { define as regularDefine } from '@substrate-system/icons/eye-regular'\n// import Debug from '@substrate-system/debug'\n// const debug = Debug('password-input')\n\nslashDefine()\nregularDefine()\n\n// for docuement.querySelector\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'password-input':PasswordInput\n    }\n}\n\nexport class PasswordInput extends HTMLElement {\n    static TAG = 'password-input'\n    static ARIA_ATTRIBUTES = [\n        'aria-activedescendant',\n        'aria-atomic',\n        'aria-autocomplete',\n        'aria-braillelabel',\n        'aria-brailleroledescription',\n        'aria-busy',\n        'aria-checked',\n        'aria-colcount',\n        'aria-colindex',\n        'aria-colindextext',\n        'aria-colspan',\n        'aria-controls',\n        'aria-current',\n        'aria-describedby',\n        'aria-description',\n        'aria-details',\n        'aria-disabled',\n        'aria-dropeffect',\n        'aria-errormessage',\n        'aria-expanded',\n        'aria-flowto',\n        'aria-grabbed',\n        'aria-haspopup',\n        'aria-hidden',\n        'aria-invalid',\n        'aria-keyshortcuts',\n        'aria-label',\n        'aria-labelledby',\n        'aria-level',\n        'aria-live',\n        'aria-modal',\n        'aria-multiline',\n        'aria-multiselectable',\n        'aria-orientation',\n        'aria-owns',\n        'aria-placeholder',\n        'aria-posinset',\n        'aria-pressed',\n        'aria-readonly',\n        'aria-relevant',\n        'aria-required',\n        'aria-roledescription',\n        'aria-rowcount',\n        'aria-rowindex',\n        'aria-rowindextext',\n        'aria-rowspan',\n        'aria-selected',\n        'aria-setsize',\n        'aria-sort',\n        'aria-valuemax',\n        'aria-valuemin',\n        'aria-valuenow',\n        'aria-valuetext'\n    ]\n\n    static observedAttributes = (['visible', 'label'])\n        .concat(PasswordInput.ARIA_ATTRIBUTES)\n\n    inputId:string|null = null\n    inputAriaAttributes:Record<string, string> = {}\n    ignoredAriaCallbackNames:Set<string> = new Set()\n\n    // empty string = is visible\n    // null = not visible\n    handleChange_visible (_, _newValue) {\n        this.reRender()\n    }\n\n    handleChange_label (_oldValue, _newValue) {\n        this.render()\n        this._listen()\n    }\n\n    handleChange_aria (\n        name:string,\n        _oldValue:string|null,\n        newValue:string|null\n    ) {\n        if (this.ignoredAriaCallbackNames.has(name)) {\n            this.ignoredAriaCallbackNames.delete(name)\n            return\n        }\n\n        if (newValue === null) {\n            delete this.inputAriaAttributes[name]\n            this.querySelector('input')?.removeAttribute(name)\n            return\n        }\n\n        this.inputAriaAttributes[name] = newValue\n        this.querySelector('input')?.setAttribute(name, newValue)\n\n        if (this.hasAttribute(name)) {\n            this.ignoredAriaCallbackNames.add(name)\n            this.removeAttribute(name)\n        }\n    }\n\n    /**\n     * Listen for change in visiblity.\n     *\n     * @param  {string} name     The attribute name\n     * @param  {string} oldValue The old attribute value\n     * @param  {string} newValue The new attribute value\n     */\n    async attributeChangedCallback (\n        name:string,\n        oldValue:string,\n        newValue:string\n    ) {\n        if (name.startsWith('aria-')) {\n            this.handleChange_aria(name, oldValue, newValue)\n            return\n        }\n\n        if (this[`handleChange_${name}`]) {\n            this[`handleChange_${name}`](oldValue, newValue)\n        }\n    }\n\n    connectedCallback () {\n        this.render()\n        this._listen()\n    }\n\n    _listen () {\n        const btn = this.querySelector('button')!\n        btn.addEventListener('click', (ev) => {\n            ev.preventDefault()\n            this.isVisible = !this.isVisible\n        })\n    }\n\n    getType ():'text'|'password' {\n        return this.isVisible ? 'text' : 'password'\n    }\n\n    set isVisible (value:boolean) {\n        if (value) {\n            this.setAttribute('visible', '')\n        } else {\n            this.removeAttribute('visible')\n        }\n    }\n\n    get isVisible ():boolean {\n        return this.hasAttribute('visible')\n    }\n\n    set label (value:string|null) {\n        if (value === null) {\n            this.removeAttribute('label')\n            return\n        }\n\n        this.setAttribute('label', value)\n    }\n\n    get label ():string|null {\n        return this.getAttribute('label')\n    }\n\n    getButtonContent () {\n        return (this.isVisible ?\n            '<eye-regular></eye-regular><span class=\"visually-hidden\">Hide</span>' :\n            '<eye-slash></eye-slash><span class=\"visually-hidden\">Show</span>')\n    }\n\n    /**\n     * Change the visibility button state.\n     */\n    reRender () {\n        const btn = this.querySelector('.pw-visibility')\n        btn!.innerHTML = this.getButtonContent()\n        this.setAttribute('type', this.getType())\n        this.querySelector('input')?.setAttribute('type', this.getType())\n    }\n\n    render () {\n        const name = this.getAttribute('name')\n        const label = this.getAttribute('label')\n        const hostId = this.getAttribute('id')\n        const hostAriaAttributes = Array.from(this.attributes)\n            .filter(attr => attr.name.startsWith('aria-'))\n\n        if (hostId !== null) {\n            this.inputId = hostId\n        }\n\n        for (const attr of hostAriaAttributes) {\n            this.inputAriaAttributes[attr.name] = attr.value\n        }\n\n        // create object from attributes\n        const attrs = Array.from(this.attributes)\n            .filter(attr =>\n                attr.name !== 'label' &&\n                attr.name !== 'id' &&\n                !attr.name.startsWith('aria-')\n            )\n            .map(attr => attr.name + (attr.value === '' ?\n                '' :\n                ('=' + `\"${attr.value}\"`))\n            )\n            .join(' ')\n\n        const classes = (this.getAttribute('class') ?? '').split(' ')\n            .concat(['password', 'input', name || ''])\n            .filter(Boolean)\n            .join(' ')\n\n        const idAttribute = this.inputId ? `id=\"${this.inputId}\"` : ''\n        const ariaAttributes = Object.entries(this.inputAriaAttributes)\n            .map(([attrName, attrValue]) => {\n                return (attrName + (attrValue === '' ?\n                    '' :\n                    ('=' + `\"${attrValue}\"`)))\n            })\n            .join(' ')\n\n        this.innerHTML = label ? `\n            <label class=\"${classes}\">\n                <span class=\"label-content\">${label}</span>\n                <span class=\"input\">\n                    <input\n                        ${idAttribute}\n                        ${ariaAttributes}\n                        ${attrs}\n                        type=${this.getType()} />\n                    <button class=\"pw-visibility\">\n                        ${this.getButtonContent()}\n                    </button>\n                </span>\n            </label>\n        ` : `\n            <div class=\"${classes}\">\n                <span class=\"input\">\n                    <input\n                        ${idAttribute}\n                        ${ariaAttributes}\n                        ${attrs}\n                        type=${this.getType()} />\n                    <button class=\"pw-visibility\">\n                        ${this.getButtonContent()}\n                    </button>\n                </span>\n            </div>\n        `\n\n        this.removeAttribute('id')\n        for (const attr of hostAriaAttributes) {\n            this.ignoredAriaCallbackNames.add(attr.name)\n            this.removeAttribute(attr.name)\n        }\n    }\n}\n\ndefine(PasswordInput.TAG, PasswordInput)\n"],
-  "mappings": "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",
-  "names": ["toAttributes", "attrs", "acc", "k", "value", "__name", "isRegistered", "elName", "__name", "define", "name", "element", "qs", "qsa", "match", "el", "s", "toAttributes", "attrs", "acc", "k", "value", "__name", "isRegistered", "elName", "__name", "define", "name", "element", "qs", "qsa", "wordSeparators", "capitalPlusLower", "capitals", "kebabCase", "str", "match", "__name", "createRenderer", "createHtml", "tag", "attrs", "html", "__name", "eyeSlash", "createRenderer", "createHtml", "title", "kebabCase", "__name", "outerHtml", "EyeSlash", "__name", "_name", "_oldValue", "newValue", "title", "eyeSlash", "define", "render", "createRenderer", "createHtml", "title", "kebabTitle", "kebabCase", "__name", "outerHtml", "EyeRegular", "__name", "_name", "_oldValue", "newValue", "title", "render", "define", "define", "PasswordInput", "_PasswordInput", "__name", "_", "_newValue", "_oldValue", "name", "newValue", "oldValue", "ev", "value", "btn", "label", "hostId", "hostAriaAttributes", "attr", "attrs", "classes", "idAttribute", "ariaAttributes", "attrName", "attrValue"]
+  "sourcesContent": ["export type Attrs = Record<string, undefined|null|string|number|boolean|(string|number)[]>\n\n/**\n * Transform an object into an HTML attributes string. The object should be\n * like `{ attributeName: value }`.\n *\n * @param attrs An object for the attributes.\n * @returns {string} A string suitable for use as HTML attributes.\n */\nexport function toAttributes (attrs:Attrs):string {\n    return Object.keys(attrs).reduce((acc, k) => {\n        const value = attrs[k]\n        if (!value) return acc\n\n        if (typeof value === 'boolean') {\n            if (value) return (acc + ` ${k}`).trim()\n            return acc\n        }\n\n        if (Array.isArray(value)) {\n            return (acc + ` ${k}=\"${value.join(' ')}\"`)\n        }\n\n        return (acc + ` ${k}=\"${value}\"`).trim()\n    }, '')\n}\n", "export { toAttributes } from './attributes.js'\n\n/**\n * Check if the given tag name has been registered.\n *\n * @see {@link https://stackoverflow.com/a/28210364 stackoverflow}\n * @param {string} elName The custom element tag name.\n * @returns {boolean} True if the given name has been registered already.\n */\nexport function isRegistered (elName:string):boolean {\n    return document.createElement(elName).constructor !== window.HTMLElement\n}\n\nexport function define (name:string, element:CustomElementConstructor) {\n    if (!window) return\n    if (!('customElements' in window)) return\n\n    if (!isRegistered(name)) {\n        window.customElements.define(name, element)\n    }\n}\n\nexport const qs = document.querySelector.bind(document)\nexport const qsa = document.querySelectorAll.bind(document)\n\n/**\n * Get the closes parent element matching the given selector.\n * @param el Element to start from\n * @param s Selector for an element\n * @returns {HTMLElement|null} The closes parent element that matches.\n */\nexport function match (el:HTMLElement, s:string):HTMLElement|null {\n    if (!el.matches) el = el.parentElement!\n    return el.matches(s) ? el : el.closest(s)\n}\n", "export type Attrs = Record<string, undefined|null|string|number|boolean|(string|number)[]>\n\n/**\n * Transform an object into an HTML attributes string. The object should be\n * like `{ attributeName: value }`.\n *\n * @param attrs An object for the attributes.\n * @returns {string} A string suitable for use as HTML attributes.\n */\nexport function toAttributes (attrs:Attrs):string {\n    return Object.keys(attrs).reduce((acc, k) => {\n        const value = attrs[k]\n        if (!value) return acc\n\n        if (typeof value === 'boolean') {\n            if (value) return (acc + ` ${k}`).trim()\n            return acc\n        }\n\n        if (Array.isArray(value)) {\n            return (acc + ` ${k}=\"${value.join(' ')}\"`)\n        }\n\n        return (acc + ` ${k}=\"${value}\"`).trim()\n    }, '')\n}\n", "export { toAttributes } from './attributes.js'\n\n/**\n * Check if the given tag name has been registered.\n *\n * @see {@link https://stackoverflow.com/a/28210364 stackoverflow}\n * @param {string} elName The custom element tag name.\n * @returns {boolean} True if the given name has been registered already.\n */\nexport function isRegistered (elName:string):boolean {\n    return document.createElement(elName).constructor !== window.HTMLElement\n}\n\nexport function define (name:string, element:CustomElementConstructor) {\n    if (!window) return\n    if (!('customElements' in window)) return\n\n    if (!isRegistered(name)) {\n        window.customElements.define(name, element)\n    }\n}\n\nexport const qs = document.querySelector.bind(document)\nexport const qsa = document.querySelectorAll.bind(document)\n", "// any combination of spaces and punctuation characters\n// thanks to http://stackoverflow.com/a/25575009\nconst wordSeparators = /[\\s\\u2000-\\u206F\\u2E00-\\u2E7F\\\\'!\"#$%&()*+,\\-.\\/:;<=>?@\\[\\]^_`{|}~]+/\nconst capitalPlusLower = /[A-Z\u00C0-\u00DD\\u00C0-\\u00D6\\u00D9-\\u00DD][a-z\u00E0-\u00FF]/g\nconst capitals = /[A-Z\u00C0-\u00DD\\u00C0-\\u00D6\\u00D9-\\u00DD]+/g\n\nexport function kebabCase (str:string):string {\n    // replace word starts with space + lower case equivalent for later parsing\n    // 1) treat cap + lower as start of new word\n    str = str.replace(capitalPlusLower, function (match) {\n    // match is one caps followed by one non-cap\n        return ' ' + (match[0].toLowerCase() || match[0]) + match[1]\n    })\n    // 2) treat all remaining capitals as words\n    str = str.replace(capitals, function (match) {\n    // match is a series of caps\n        return ' ' + match.toLowerCase()\n    })\n    return str\n        .trim()\n        .split(wordSeparators)\n        .join('-')\n        .replace(/^-/, '')\n        .replace(/-\\s*$/, '')\n}\n\nexport default kebabCase\n", "import { type Attrs } from '@substrate-system/web-component/attributes'\n\nexport function createRenderer (\n    createHtml:(attrs?:Attrs)=>string,\n    tag:string\n) {\n    return function (attrs?:Attrs):string {\n        const html = createHtml(attrs)\n\n        // running in node?\n        return typeof window === 'undefined' ?\n            `<${tag} class=\"icon\">\n                ${html}\n            </${tag}>` :\n            html\n    }\n}\n", "import { kebabCase } from '@substrate-system/kebab-case'\nimport { createRenderer } from '../util.js'\n\nexport const eyeSlash = createRenderer(createHtml, 'eye-slash')\n\nfunction createHtml ({ title }:{ title?:string } = {}) {\n    if (!title) title = 'Hide'\n\n    const html = `<svg\n        class=\"icon eye-slash\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 640 512\"\n        role=\"image\"\n        aria-labelledby=\"${kebabCase(title)}\"\n    >\n        <title id=${kebabCase(title)}>${title}</title>\n        <!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->\n        <path d=\"M38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2S-1.2 34.7 9.2 42.9l592 464c10.4 8.2 25.5 6.3 33.7-4.1s6.3-25.5-4.1-33.7L525.6 386.7c39.6-40.6 66.4-86.1 79.9-118.4c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C465.5 68.8 400.8 32 320 32c-68.2 0-125 26.3-169.3 60.8L38.8 5.1zM223.1 149.5C248.6 126.2 282.7 112 320 112c79.5 0 144 64.5 144 144c0 24.9-6.3 48.3-17.4 68.7L408 294.5c8.4-19.3 10.6-41.4 4.8-63.3c-11.1-41.5-47.8-69.4-88.6-71.1c-5.8-.2-9.2 6.1-7.4 11.7c2.1 6.4 3.3 13.2 3.3 20.3c0 10.2-2.4 19.8-6.6 28.3l-90.3-70.8zM373 389.9c-16.4 6.5-34.3 10.1-53 10.1c-79.5 0-144-64.5-144-144c0-6.9 .5-13.6 1.4-20.2L83.1 161.5C60.3 191.2 44 220.8 34.5 243.7c-3.3 7.9-3.3 16.7 0 24.6c14.9 35.7 46.2 87.7 93 131.1C174.5 443.2 239.2 480 320 480c47.8 0 89.9-12.9 126.2-32.5L373 389.9z\" />\n    </svg>`\n\n    return html\n}\n\nexport function outerHtml ({ title }:{ title?:string }) {\n    return `<eye-slash>${eyeSlash({ title })}</eye-slash>`\n}\n", "import { define as _define } from '@substrate-system/web-component/util'\nimport { eyeSlash as render } from './render/eye-slash'\n\n// for document.querySelector\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'eye-slash': EyeSlash\n    }\n}\n\nexport class EyeSlash extends HTMLElement {\n    static TAG = 'eye-slash'\n    _title:string\n\n    constructor () {\n        super()\n        this._title = this.getAttribute('title') || 'Hide'\n    }\n\n    /**\n     * Only watching for 'title'.\n     */\n    attributeChangedCallback (_name, _oldValue, newValue) {\n        this._title = newValue\n        this.render()\n    }\n\n    connectedCallback () {\n        const title = this.getAttribute('title')\n        if (title === undefined || title === null) {\n            this._title = 'Hide'\n        } else {\n            this._title = title\n        }\n\n        this.render()\n    }\n\n    render () {\n        const title = this._title\n\n        this.innerHTML = render({ title })\n    }\n}\n\nexport function define () {\n    _define(EyeSlash.TAG, EyeSlash)\n}\n", "import { kebabCase } from '@substrate-system/kebab-case'\nimport { createRenderer } from '../util.js'\n\nexport const render = createRenderer(createHtml, 'eye-regular')\n\nfunction createHtml ({ title }:{ title?:string } = {}) {\n    if (!title) title = 'Show'\n    const kebabTitle = kebabCase(title)\n\n    const html = `<svg\n        class=\"icon eye-regular\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 576 512\"\n        role=\"image\"\n        aria-labelledby=\"${kebabTitle}\"\n    >\n        <title id=\"${kebabTitle}\">${title}</title>\n        <!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->\n        <path d=\"M288 80c-65.2 0-118.8 29.6-159.9 67.7C89.6 183.5 63 226 49.4 256c13.6 30 40.2 72.5 78.6 108.3C169.2 402.4 222.8 432 288 432s118.8-29.6 159.9-67.7C486.4 328.5 513 286 526.6 256c-13.6-30-40.2-72.5-78.6-108.3C406.8 109.6 353.2 80 288 80zM95.4 112.6C142.5 68.8 207.2 32 288 32s145.5 36.8 192.6 80.6c46.8 43.5 78.1 95.4 93 131.1c3.3 7.9 3.3 16.7 0 24.6c-14.9 35.7-46.2 87.7-93 131.1C433.5 443.2 368.8 480 288 480s-145.5-36.8-192.6-80.6C48.6 356 17.3 304 2.5 268.3c-3.3-7.9-3.3-16.7 0-24.6C17.3 208 48.6 156 95.4 112.6zM288 336c44.2 0 80-35.8 80-80s-35.8-80-80-80c-.7 0-1.3 0-2 0c1.3 5.1 2 10.5 2 16c0 35.3-28.7 64-64 64c-5.5 0-10.9-.7-16-2c0 .7 0 1.3 0 2c0 44.2 35.8 80 80 80zm0-208a128 128 0 1 1 0 256 128 128 0 1 1 0-256z\" />\n    </svg>`\n\n    return html\n}\n\nexport function outerHtml ({ title }:{ title?:string }) {\n    return `<eye-regular>${render({ title })}</eye-regular>`\n}\n", "import { define as _define } from '@substrate-system/web-component/util'\nimport { render } from './render/eye-regular.js'\n\n// for document.querySelector\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'eye-regular': EyeRegular\n    }\n}\n\nexport class EyeRegular extends HTMLElement {\n    static TAG = 'eye-regular'\n    _title:string\n\n    constructor () {\n        super()\n        this._title = this.getAttribute('title') || 'See'\n    }\n\n    /**\n     * Only watching for 'title'.\n     */\n    attributeChangedCallback (_name, _oldValue, newValue) {\n        this._title = newValue\n        this.render()\n    }\n\n    connectedCallback () {\n        const title = this.getAttribute('title')\n        if (title === undefined || title === null) {\n            this._title = 'See'\n        } else {\n            this._title = title\n        }\n\n        this.render()\n    }\n\n    render () {\n        const title = this._title\n        if (!title) return\n\n        this.innerHTML = render({ title })\n    }\n}\n\nexport function define () {\n    _define(EyeRegular.TAG, EyeRegular)\n}\n", "import { define } from '@substrate-system/web-component/util'\nimport { define as slashDefine } from '@substrate-system/icons/eye-slash'\nimport { define as regularDefine } from '@substrate-system/icons/eye-regular'\n// import Debug from '@substrate-system/debug'\n// const debug = Debug('password-input')\n\nslashDefine()\nregularDefine()\n\n// for docuement.querySelector\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'password-input':PasswordInput\n    }\n}\n\nexport class PasswordInput extends HTMLElement {\n    static TAG = 'password-input'\n    static INPUT_ATTRIBUTES = [\n        'accept',\n        'alt',\n        'autocomplete',\n        'autocapitalize',\n        'autocorrect',\n        'autofocus',\n        'capture',\n        'dirname',\n        'disabled',\n        'enterkeyhint',\n        'form',\n        'inputmode',\n        'list',\n        'max',\n        'maxlength',\n        'min',\n        'minlength',\n        'multiple',\n        'name',\n        'pattern',\n        'placeholder',\n        'readonly',\n        'required',\n        'size',\n        'spellcheck',\n        'step',\n        'tabindex',\n        'title',\n        'value'\n    ]\n\n    static ARIA_ATTRIBUTES = [\n        'aria-activedescendant',\n        'aria-atomic',\n        'aria-autocomplete',\n        'aria-braillelabel',\n        'aria-brailleroledescription',\n        'aria-busy',\n        'aria-checked',\n        'aria-colcount',\n        'aria-colindex',\n        'aria-colindextext',\n        'aria-colspan',\n        'aria-controls',\n        'aria-current',\n        'aria-describedby',\n        'aria-description',\n        'aria-details',\n        'aria-disabled',\n        'aria-dropeffect',\n        'aria-errormessage',\n        'aria-expanded',\n        'aria-flowto',\n        'aria-grabbed',\n        'aria-haspopup',\n        'aria-hidden',\n        'aria-invalid',\n        'aria-keyshortcuts',\n        'aria-label',\n        'aria-labelledby',\n        'aria-level',\n        'aria-live',\n        'aria-modal',\n        'aria-multiline',\n        'aria-multiselectable',\n        'aria-orientation',\n        'aria-owns',\n        'aria-placeholder',\n        'aria-posinset',\n        'aria-pressed',\n        'aria-readonly',\n        'aria-relevant',\n        'aria-required',\n        'aria-roledescription',\n        'aria-rowcount',\n        'aria-rowindex',\n        'aria-rowindextext',\n        'aria-rowspan',\n        'aria-selected',\n        'aria-setsize',\n        'aria-sort',\n        'aria-valuemax',\n        'aria-valuemin',\n        'aria-valuenow',\n        'aria-valuetext'\n    ]\n\n    static observedAttributes = (['visible', 'label', 'id'])\n        .concat(PasswordInput.INPUT_ATTRIBUTES)\n        .concat(PasswordInput.ARIA_ATTRIBUTES)\n\n    inputId:string|null = null\n    inputAriaAttributes:Record<string, string> = {}\n    ignoredAriaCallbackNames:Set<string> = new Set()\n    ignoredIdCallback = false\n\n    // empty string = is visible\n    // null = not visible\n    handleChange_visible (_, _newValue) {\n        this.reRender()\n    }\n\n    handleChange_label (_oldValue, _newValue) {\n        this.render()\n        this._listen()\n    }\n\n    handleChange_aria (\n        name:string,\n        _oldValue:string|null,\n        newValue:string|null\n    ) {\n        if (this.ignoredAriaCallbackNames.has(name)) {\n            this.ignoredAriaCallbackNames.delete(name)\n            return\n        }\n\n        if (newValue === null) {\n            delete this.inputAriaAttributes[name]\n            this.querySelector('input')?.removeAttribute(name)\n            return\n        }\n\n        this.inputAriaAttributes[name] = newValue\n        this.querySelector('input')?.setAttribute(name, newValue)\n\n        if (this.hasAttribute(name)) {\n            this.ignoredAriaCallbackNames.add(name)\n            this.removeAttribute(name)\n        }\n    }\n\n    handleChange_id (_oldValue:string|null, newValue:string|null) {\n        if (this.ignoredIdCallback) {\n            this.ignoredIdCallback = false\n            return\n        }\n\n        if (newValue === null) {\n            this.inputId = null\n            this.querySelector('input')?.removeAttribute('id')\n            return\n        }\n\n        this.inputId = newValue\n        this.querySelector('input')?.setAttribute('id', newValue)\n\n        if (this.hasAttribute('id')) {\n            this.ignoredIdCallback = true\n            this.removeAttribute('id')\n        }\n    }\n\n    handleChange_inputAttribute (name:string, newValue:string|null) {\n        const input = this.querySelector('input')\n        if (!input) return\n\n        if (newValue === null) {\n            input.removeAttribute(name)\n            return\n        }\n\n        input.setAttribute(name, newValue)\n    }\n\n    /**\n     * Listen for change in visiblity.\n     *\n     * @param  {string} name     The attribute name\n     * @param  {string} oldValue The old attribute value\n     * @param  {string} newValue The new attribute value\n     */\n    async attributeChangedCallback (\n        name:string,\n        oldValue:string,\n        newValue:string\n    ) {\n        if (name === 'id') {\n            this.handleChange_id(oldValue, newValue)\n            return\n        }\n\n        if (name.startsWith('aria-')) {\n            this.handleChange_aria(name, oldValue, newValue)\n            return\n        }\n\n        if (PasswordInput.INPUT_ATTRIBUTES.includes(name)) {\n            this.handleChange_inputAttribute(name, newValue)\n            return\n        }\n\n        if (this[`handleChange_${name}`]) {\n            this[`handleChange_${name}`](oldValue, newValue)\n        }\n    }\n\n    connectedCallback () {\n        this.render()\n        this._listen()\n    }\n\n    _listen () {\n        const btn = this.querySelector('button')!\n        btn.addEventListener('click', (ev) => {\n            ev.preventDefault()\n            this.isVisible = !this.isVisible\n        })\n    }\n\n    getType ():'text'|'password' {\n        return this.isVisible ? 'text' : 'password'\n    }\n\n    set isVisible (value:boolean) {\n        if (value) {\n            this.setAttribute('visible', '')\n        } else {\n            this.removeAttribute('visible')\n        }\n    }\n\n    get isVisible ():boolean {\n        return this.hasAttribute('visible')\n    }\n\n    set label (value:string|null) {\n        if (value === null) {\n            this.removeAttribute('label')\n            return\n        }\n\n        this.setAttribute('label', value)\n    }\n\n    get label ():string|null {\n        return this.getAttribute('label')\n    }\n\n    getButtonContent () {\n        return (this.isVisible ?\n            '<eye-regular></eye-regular><span class=\"visually-hidden\">Hide</span>' :\n            '<eye-slash></eye-slash><span class=\"visually-hidden\">Show</span>')\n    }\n\n    /**\n     * Change the visibility button state.\n     */\n    reRender () {\n        const btn = this.querySelector('.pw-visibility')\n        btn!.innerHTML = this.getButtonContent()\n        this.setAttribute('type', this.getType())\n        this.querySelector('input')?.setAttribute('type', this.getType())\n    }\n\n    render () {\n        const name = this.getAttribute('name')\n        const label = this.getAttribute('label')\n        const hostId = this.getAttribute('id')\n        const hostAriaAttributes = Array.from(this.attributes)\n            .filter(attr => attr.name.startsWith('aria-'))\n\n        if (hostId !== null) {\n            this.inputId = hostId\n        }\n\n        for (const attr of hostAriaAttributes) {\n            this.inputAriaAttributes[attr.name] = attr.value\n        }\n\n        // create string from attributes\n        const attrs = Array.from(this.attributes)\n            .filter(attr =>\n                attr.name !== 'label' &&\n                attr.name !== 'id' &&\n                !attr.name.startsWith('aria-')\n            )\n            .map(attr => attr.name + (attr.value === '' ?\n                '' :\n                ('=' + `\"${attr.value}\"`))\n            )\n            .join(' ')\n\n        const classes = (this.getAttribute('class') ?? '').split(' ')\n            .concat(['password', 'input', name || ''])\n            .filter(Boolean)\n            .join(' ')\n\n        const idAttribute = this.inputId ? `id=\"${this.inputId}\"` : ''\n        const ariaAttributes = Object.entries(this.inputAriaAttributes)\n            .map(([attrName, attrValue]) => {\n                return (attrName + (attrValue === '' ?\n                    '' :\n                    ('=' + `\"${attrValue}\"`)))\n            })\n            .join(' ')\n\n        this.innerHTML = label ? `\n            <label class=\"${classes}\">\n                <span class=\"label-content\">${label}</span>\n                <span class=\"input\">\n                    <input\n                        ${idAttribute}\n                        ${ariaAttributes}\n                        ${attrs}\n                        type=${this.getType()} />\n                    <button class=\"pw-visibility\">\n                        ${this.getButtonContent()}\n                    </button>\n                </span>\n            </label>\n        ` : `\n            <div class=\"${classes}\">\n                <span class=\"input\">\n                    <input\n                        ${idAttribute}\n                        ${ariaAttributes}\n                        ${attrs}\n                        type=${this.getType()} />\n                    <button class=\"pw-visibility\">\n                        ${this.getButtonContent()}\n                    </button>\n                </span>\n            </div>\n        `\n\n        if (this.hasAttribute('id')) {\n            this.ignoredIdCallback = true\n            this.removeAttribute('id')\n        }\n        for (const attr of hostAriaAttributes) {\n            this.ignoredAriaCallbackNames.add(attr.name)\n            this.removeAttribute(attr.name)\n        }\n    }\n}\n\ndefine(PasswordInput.TAG, PasswordInput)\n"],
+  "mappings": "sKASO,SAASA,EAAcC,EAAoB,CAC9C,OAAO,OAAO,KAAKA,CAAK,EAAE,OAAO,CAACC,EAAKC,IAAM,CACzC,IAAMC,EAAQH,EAAME,CAAC,EACrB,OAAKC,EAED,OAAOA,GAAU,UACbA,GAAeF,EAAM,IAAIC,CAAC,IAAI,KAAK,EAChCD,EAGP,MAAM,QAAQE,CAAK,EACXF,EAAM,IAAIC,CAAC,KAAKC,EAAM,KAAK,GAAG,CAAC,KAGnCF,EAAM,IAAIC,CAAC,KAAKC,CAAK,KAAK,KAAK,EAXpBF,CAYvB,EAAG,EAAE,CACT,CAhBgBG,EAAAL,EAAA,gBAAAK,EAAAL,EAAA,cAAA,yFCAT,SAASM,EAAcC,EAAuB,CACjD,OAAO,SAAS,cAAcA,CAAM,EAAE,cAAgB,OAAO,WACjE,CAFgBC,EAAAF,EAAA,gBAAAE,EAAAF,EAAA,cAAA,EAIT,SAASG,EAAQC,EAAaC,EAAkC,CAC9D,QACC,mBAAoB,SAErBL,EAAaI,CAAI,GAClB,OAAO,eAAe,OAAOA,EAAMC,CAAO,EAElD,CAPgBH,EAAAC,EAAA,UAAAD,EAAAC,EAAA,QAAA,EAST,IAAMG,GAAK,SAAS,cAAc,KAAK,QAAQ,EACzCC,GAAM,SAAS,iBAAiB,KAAK,QAAQ,EAQnD,SAASC,EAAOC,EAAgBC,EAA2B,CAC9D,OAAKD,EAAG,UAASA,EAAKA,EAAG,eAClBA,EAAG,QAAQC,CAAC,EAAID,EAAKA,EAAG,QAAQC,CAAC,CAC5C,CAHgBR,EAAAM,EAAA,SAAAN,EAAAM,EAAA,OAAA,yFCtBT,SAASG,EAAcC,EAAoB,CAC9C,OAAO,OAAO,KAAKA,CAAK,EAAE,OAAO,CAACC,EAAKC,IAAM,CACzC,IAAMC,EAAQH,EAAME,CAAC,EACrB,OAAKC,EAED,OAAOA,GAAU,UACbA,GAAeF,EAAM,IAAIC,CAAC,IAAI,KAAK,EAChCD,EAGP,MAAM,QAAQE,CAAK,EACXF,EAAM,IAAIC,CAAC,KAAKC,EAAM,KAAK,GAAG,CAAC,KAGnCF,EAAM,IAAIC,CAAC,KAAKC,CAAK,KAAK,KAAK,EAXpBF,CAYvB,EAAG,EAAE,CACT,CAhBgBG,EAAAL,EAAA,gBAAAK,EAAAL,EAAA,cAAA,yFCAT,SAASM,EAAcC,EAAuB,CACjD,OAAO,SAAS,cAAcA,CAAM,EAAE,cAAgB,OAAO,WACjE,CAFgBC,EAAAF,EAAA,gBAAAE,EAAAF,EAAA,cAAA,EAIT,SAASG,EAAQC,EAAaC,EAAkC,CAC9D,QACC,mBAAoB,SAErBL,EAAaI,CAAI,GAClB,OAAO,eAAe,OAAOA,EAAMC,CAAO,EAElD,CAPgBH,EAAAC,EAAA,UAAAD,EAAAC,EAAA,QAAA,EAST,IAAMG,GAAK,SAAS,cAAc,KAAK,QAAQ,EACzCC,GAAM,SAAS,iBAAiB,KAAK,QAAQ,yFCrBpDC,EAAiB,uEACjBC,EAAmB,8CACnBC,EAAW,uCAEV,SAASC,EAAWC,EAAmB,CAG1C,OAAAA,EAAMA,EAAI,QAAQH,EAAkB,SAAUI,EAAO,CAEjD,MAAO,KAAOA,EAAM,CAAC,EAAE,YAAY,GAAKA,EAAM,CAAC,GAAKA,EAAM,CAAC,CAC/D,CAAC,EAEDD,EAAMA,EAAI,QAAQF,EAAU,SAAUG,EAAO,CAEzC,MAAO,IAAMA,EAAM,YAAY,CACnC,CAAC,EACMD,EACF,KAAK,EACL,MAAMJ,CAAc,EACpB,KAAK,GAAG,EACR,QAAQ,KAAM,EAAE,EAChB,QAAQ,QAAS,EAAE,CAC5B,CAlBgBM,EAAAH,EAAA,aAAAG,EAAAH,EAAA,WAAA,yFCJT,SAASI,EACZC,EACAC,EACF,CACE,OAAO,SAAUC,EAAqB,CAClC,IAAMC,EAAOH,EAAWE,CAAK,EAG7B,OAAO,OAAO,OAAW,IACrB,IAAID,CAAG;kBACDE,CAAI;gBACNF,CAAG,IACPE,CACR,CACJ,CAdgBC,EAAAL,EAAA,kBAAAK,EAAAL,EAAA,gBAAA,yFCCHM,EAAWC,EAAeC,EAAY,WAAW,EAE9D,SAASA,EAAY,CAAE,MAAAC,CAAM,EAAsB,CAAC,EAAG,CACnD,OAAKA,IAAOA,EAAQ,QAEP;;;;;2BAKUC,EAAUD,CAAK,CAAC;;oBAEvBC,EAAUD,CAAK,CAAC,IAAIA,CAAK;;;WAM7C,CAhBSE,EAAAH,EAAA,cAAAG,EAAAH,EAAA,YAAA,EAkBF,SAASI,EAAW,CAAE,MAAAH,CAAM,EAAqB,CACpD,MAAO,cAAcH,EAAS,CAAE,MAAAG,CAAM,CAAC,CAAC,cAC5C,CAFgBE,EAAAC,EAAA,aAAAD,EAAAC,EAAA,WAAA,yFCbHC,EAAN,cAAuB,WAAY,OAAA,CAAAC,EAAA,iBAV1C,MAU0C,CAAAA,EAAA,KAAA,UAAA,CAAA,CACtC,OAAO,IAAM,YACb,OAEA,aAAe,CACX,MAAM,EACN,KAAK,OAAS,KAAK,aAAa,OAAO,GAAK,MAChD,CAKA,yBAA0BC,EAAOC,EAAWC,EAAU,CAClD,KAAK,OAASA,EACd,KAAK,OAAO,CAChB,CAEA,mBAAqB,CACjB,IAAMC,EAAQ,KAAK,aAAa,OAAO,EACZA,GAAU,KACjC,KAAK,OAAS,OAEd,KAAK,OAASA,EAGlB,KAAK,OAAO,CAChB,CAEA,QAAU,CACN,IAAMA,EAAQ,KAAK,OAEnB,KAAK,UAAYC,EAAO,CAAE,MAAAD,CAAM,CAAC,CACrC,CACJ,EAEO,SAASE,GAAU,CACtBA,EAAQP,EAAS,IAAKA,CAAQ,CAClC,CAFgBC,EAAAM,EAAA,UAAAN,EAAAM,EAAA,QAAA,yFC1CHC,EAASC,EAAeC,EAAY,aAAa,EAE9D,SAASA,EAAY,CAAE,MAAAC,CAAM,EAAsB,CAAC,EAAG,CAC9CA,IAAOA,EAAQ,QACpB,IAAMC,EAAaC,EAAUF,CAAK,EAclC,MAZa;;;;;2BAKUC,CAAU;;qBAEhBA,CAAU,KAAKD,CAAK;;;WAMzC,CAjBSG,EAAAJ,EAAA,cAAAI,EAAAJ,EAAA,YAAA,EAmBF,SAASK,GAAW,CAAE,MAAAJ,CAAM,EAAqB,CACpD,MAAO,gBAAgBH,EAAO,CAAE,MAAAG,CAAM,CAAC,CAAC,gBAC5C,CAFgBG,EAAAC,GAAA,aAAAD,EAAAC,GAAA,WAAA,2FCdHC,EAAN,cAAyB,WAAY,OAAA,CAAAC,EAAA,mBAV5C,MAU4C,CAAAA,EAAA,KAAA,YAAA,CAAA,CACxC,OAAO,IAAM,cACb,OAEA,aAAe,CACX,MAAM,EACN,KAAK,OAAS,KAAK,aAAa,OAAO,GAAK,KAChD,CAKA,yBAA0BC,EAAOC,EAAWC,EAAU,CAClD,KAAK,OAASA,EACd,KAAK,OAAO,CAChB,CAEA,mBAAqB,CACjB,IAAMC,EAAQ,KAAK,aAAa,OAAO,EACZA,GAAU,KACjC,KAAK,OAAS,MAEd,KAAK,OAASA,EAGlB,KAAK,OAAO,CAChB,CAEA,QAAU,CACN,IAAMA,EAAQ,KAAK,OACdA,IAEL,KAAK,UAAYC,EAAO,CAAE,MAAAD,CAAM,CAAC,EACrC,CACJ,EAEO,SAASE,GAAU,CACtBA,EAAQP,EAAW,IAAKA,CAAU,CACtC,CAFgBC,EAAAM,EAAA,UAAAN,EAAAM,EAAA,QAAA,ECxChBC,EAAY,EACZA,EAAc,EASP,IAAMC,EAAN,MAAMC,UAAsB,WAAY,CAhB/C,MAgB+C,CAAAC,EAAA,sBAC3C,OAAO,IAAM,iBACb,OAAO,iBAAmB,CACtB,SACA,MACA,eACA,iBACA,cACA,YACA,UACA,UACA,WACA,eACA,OACA,YACA,OACA,MACA,YACA,MACA,YACA,WACA,OACA,UACA,cACA,WACA,WACA,OACA,aACA,OACA,WACA,QACA,OACJ,EAEA,OAAO,gBAAkB,CACrB,wBACA,cACA,oBACA,oBACA,8BACA,YACA,eACA,gBACA,gBACA,oBACA,eACA,gBACA,eACA,mBACA,mBACA,eACA,gBACA,kBACA,oBACA,gBACA,cACA,eACA,gBACA,cACA,eACA,oBACA,aACA,kBACA,aACA,YACA,aACA,iBACA,uBACA,mBACA,YACA,mBACA,gBACA,eACA,gBACA,gBACA,gBACA,uBACA,gBACA,gBACA,oBACA,eACA,gBACA,eACA,YACA,gBACA,gBACA,gBACA,gBACJ,EAEA,OAAO,mBAAsB,CAAC,UAAW,QAAS,IAAI,EACjD,OAAOD,EAAc,gBAAgB,EACrC,OAAOA,EAAc,eAAe,EAEzC,QAAsB,KACtB,oBAA6C,CAAC,EAC9C,yBAAuC,IAAI,IAC3C,kBAAoB,GAIpB,qBAAsBE,EAAGC,EAAW,CAChC,KAAK,SAAS,CAClB,CAEA,mBAAoBC,EAAWD,EAAW,CACtC,KAAK,OAAO,EACZ,KAAK,QAAQ,CACjB,CAEA,kBACIE,EACAD,EACAE,EACF,CACE,GAAI,KAAK,yBAAyB,IAAID,CAAI,EAAG,CACzC,KAAK,yBAAyB,OAAOA,CAAI,EACzC,MACJ,CAEA,GAAIC,IAAa,KAAM,CACnB,OAAO,KAAK,oBAAoBD,CAAI,EACpC,KAAK,cAAc,OAAO,GAAG,gBAAgBA,CAAI,EACjD,MACJ,CAEA,KAAK,oBAAoBA,CAAI,EAAIC,EACjC,KAAK,cAAc,OAAO,GAAG,aAAaD,EAAMC,CAAQ,EAEpD,KAAK,aAAaD,CAAI,IACtB,KAAK,yBAAyB,IAAIA,CAAI,EACtC,KAAK,gBAAgBA,CAAI,EAEjC,CAEA,gBAAiBD,EAAuBE,EAAsB,CAC1D,GAAI,KAAK,kBAAmB,CACxB,KAAK,kBAAoB,GACzB,MACJ,CAEA,GAAIA,IAAa,KAAM,CACnB,KAAK,QAAU,KACf,KAAK,cAAc,OAAO,GAAG,gBAAgB,IAAI,EACjD,MACJ,CAEA,KAAK,QAAUA,EACf,KAAK,cAAc,OAAO,GAAG,aAAa,KAAMA,CAAQ,EAEpD,KAAK,aAAa,IAAI,IACtB,KAAK,kBAAoB,GACzB,KAAK,gBAAgB,IAAI,EAEjC,CAEA,4BAA6BD,EAAaC,EAAsB,CAC5D,IAAMC,EAAQ,KAAK,cAAc,OAAO,EACxC,GAAKA,EAEL,IAAID,IAAa,KAAM,CACnBC,EAAM,gBAAgBF,CAAI,EAC1B,MACJ,CAEAE,EAAM,aAAaF,EAAMC,CAAQ,EACrC,CASA,MAAM,yBACFD,EACAG,EACAF,EACF,CACE,GAAID,IAAS,KAAM,CACf,KAAK,gBAAgBG,EAAUF,CAAQ,EACvC,MACJ,CAEA,GAAID,EAAK,WAAW,OAAO,EAAG,CAC1B,KAAK,kBAAkBA,EAAMG,EAAUF,CAAQ,EAC/C,MACJ,CAEA,GAAIN,EAAc,iBAAiB,SAASK,CAAI,EAAG,CAC/C,KAAK,4BAA4BA,EAAMC,CAAQ,EAC/C,MACJ,CAEI,KAAK,gBAAgBD,CAAI,EAAE,GAC3B,KAAK,gBAAgBA,CAAI,EAAE,EAAEG,EAAUF,CAAQ,CAEvD,CAEA,mBAAqB,CACjB,KAAK,OAAO,EACZ,KAAK,QAAQ,CACjB,CAEA,SAAW,CACK,KAAK,cAAc,QAAQ,EACnC,iBAAiB,QAAUG,GAAO,CAClCA,EAAG,eAAe,EAClB,KAAK,UAAY,CAAC,KAAK,SAC3B,CAAC,CACL,CAEA,SAA6B,CACzB,OAAO,KAAK,UAAY,OAAS,UACrC,CAEA,IAAI,UAAWC,EAAe,CACtBA,EACA,KAAK,aAAa,UAAW,EAAE,EAE/B,KAAK,gBAAgB,SAAS,CAEtC,CAEA,IAAI,WAAqB,CACrB,OAAO,KAAK,aAAa,SAAS,CACtC,CAEA,IAAI,MAAOA,EAAmB,CAC1B,GAAIA,IAAU,KAAM,CAChB,KAAK,gBAAgB,OAAO,EAC5B,MACJ,CAEA,KAAK,aAAa,QAASA,CAAK,CACpC,CAEA,IAAI,OAAqB,CACrB,OAAO,KAAK,aAAa,OAAO,CACpC,CAEA,kBAAoB,CAChB,OAAQ,KAAK,UACT,uEACA,kEACR,CAKA,UAAY,CACR,IAAMC,EAAM,KAAK,cAAc,gBAAgB,EAC/CA,EAAK,UAAY,KAAK,iBAAiB,EACvC,KAAK,aAAa,OAAQ,KAAK,QAAQ,CAAC,EACxC,KAAK,cAAc,OAAO,GAAG,aAAa,OAAQ,KAAK,QAAQ,CAAC,CACpE,CAEA,QAAU,CACN,IAAMN,EAAO,KAAK,aAAa,MAAM,EAC/BO,EAAQ,KAAK,aAAa,OAAO,EACjCC,EAAS,KAAK,aAAa,IAAI,EAC/BC,EAAqB,MAAM,KAAK,KAAK,UAAU,EAChD,OAAOC,GAAQA,EAAK,KAAK,WAAW,OAAO,CAAC,EAE7CF,IAAW,OACX,KAAK,QAAUA,GAGnB,QAAWE,KAAQD,EACf,KAAK,oBAAoBC,EAAK,IAAI,EAAIA,EAAK,MAI/C,IAAMC,EAAQ,MAAM,KAAK,KAAK,UAAU,EACnC,OAAOD,GACJA,EAAK,OAAS,SACdA,EAAK,OAAS,MACd,CAACA,EAAK,KAAK,WAAW,OAAO,CACjC,EACC,IAAIA,GAAQA,EAAK,MAAQA,EAAK,QAAU,GACrC,GACC,KAAUA,EAAK,KAAK,IACzB,EACC,KAAK,GAAG,EAEPE,GAAW,KAAK,aAAa,OAAO,GAAK,IAAI,MAAM,GAAG,EACvD,OAAO,CAAC,WAAY,QAASZ,GAAQ,EAAE,CAAC,EACxC,OAAO,OAAO,EACd,KAAK,GAAG,EAEPa,EAAc,KAAK,QAAU,OAAO,KAAK,OAAO,IAAM,GACtDC,EAAiB,OAAO,QAAQ,KAAK,mBAAmB,EACzD,IAAI,CAAC,CAACC,EAAUC,CAAS,IACdD,GAAYC,IAAc,GAC9B,GACC,KAAUA,CAAS,IAC3B,EACA,KAAK,GAAG,EAEb,KAAK,UAAYT,EAAQ;AAAA,4BACLK,CAAO;AAAA,8CACWL,CAAK;AAAA;AAAA;AAAA,0BAGzBM,CAAW;AAAA,0BACXC,CAAc;AAAA,0BACdH,CAAK;AAAA,+BACA,KAAK,QAAQ,CAAC;AAAA;AAAA,0BAEnB,KAAK,iBAAiB,CAAC;AAAA;AAAA;AAAA;AAAA,UAIrC;AAAA,0BACcC,CAAO;AAAA;AAAA;AAAA,0BAGPC,CAAW;AAAA,0BACXC,CAAc;AAAA,0BACdH,CAAK;AAAA,+BACA,KAAK,QAAQ,CAAC;AAAA;AAAA,0BAEnB,KAAK,iBAAiB,CAAC;AAAA;AAAA;AAAA;AAAA,UAMrC,KAAK,aAAa,IAAI,IACtB,KAAK,kBAAoB,GACzB,KAAK,gBAAgB,IAAI,GAE7B,QAAWD,KAAQD,EACf,KAAK,yBAAyB,IAAIC,EAAK,IAAI,EAC3C,KAAK,gBAAgBA,EAAK,IAAI,CAEtC,CACJ,EAEAjB,EAAOC,EAAc,IAAKA,CAAa",
+  "names": ["toAttributes", "attrs", "acc", "k", "value", "__name", "isRegistered", "elName", "__name", "define", "name", "element", "qs", "qsa", "match", "el", "s", "toAttributes", "attrs", "acc", "k", "value", "__name", "isRegistered", "elName", "__name", "define", "name", "element", "qs", "qsa", "wordSeparators", "capitalPlusLower", "capitals", "kebabCase", "str", "match", "__name", "createRenderer", "createHtml", "tag", "attrs", "html", "__name", "eyeSlash", "createRenderer", "createHtml", "title", "kebabCase", "__name", "outerHtml", "EyeSlash", "__name", "_name", "_oldValue", "newValue", "title", "eyeSlash", "define", "render", "createRenderer", "createHtml", "title", "kebabTitle", "kebabCase", "__name", "outerHtml", "EyeRegular", "__name", "_name", "_oldValue", "newValue", "title", "render", "define", "define", "PasswordInput", "_PasswordInput", "__name", "_", "_newValue", "_oldValue", "name", "newValue", "input", "oldValue", "ev", "value", "btn", "label", "hostId", "hostAriaAttributes", "attr", "attrs", "classes", "idAttribute", "ariaAttributes", "attrName", "attrValue"]
 }

package/dist/meta.json

@@ -1,7 +1,7 @@
 {
   "inputs": {
     "src/index.ts": {
-      "bytes": 7849,
+      "bytes": 9764,
       "imports": [],
       "format": "esm"
     }
@@ -11,7 +11,7 @@
       "imports": [],
       "exports": [],
       "inputs": {},
-      "bytes": 12085
+      "bytes": 15150
     },
     "dist/index.js": {
       "imports": [
@@ -37,10 +37,10 @@
       "entryPoint": "src/index.ts",
       "inputs": {
         "src/index.ts": {
-          "bytesInOutput": 6512
+          "bytesInOutput": 8092
         }
       },
-      "bytes": 6703
+      "bytes": 8283
     }
   }
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@substrate-system/password-input",
   "type": "module",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "main": "dist/index.js",
   "files": [
     "./dist/*"
@@ -18,7 +18,7 @@
     "build-docs": "typedoc --tsconfig tsconfig.build.json ./src/index.ts",
     "build": "mkdir -p ./dist && rm -rf ./dist/* && npm run build-cjs && npm run build-esm && npm run build-esm:min && npm run build-css && npm run build-css:min",
     "start": "vite",
-    "toc": "markdown-toc --maxdepth 3 -i README.md",
+    "toc": "markdown-toc --maxdepth 4 -i README.md",
     "preversion": "npm run lint && stylelint src/*.css",
     "version": "npm run toc && auto-changelog -p --template keepachangelog --breaking-pattern 'BREAKING CHANGE:' && git add CHANGELOG.md README.md",
     "postversion": "git push --follow-tags && npm publish",