@substrate-system/password-input 0.0.0

package/LICENSE

@@ -0,0 +1,168 @@
+# Big Time Public License
+
+Version 2.0.2
+
+<https://bigtimelicense.com/versions/2.0.2>
+
+## Purpose
+
+These terms let you use and share this software for noncommercial purposes
+and in small business for free, while also guaranteeing that paid licenses
+for big businesses will be available on fair, reasonable, and
+nondiscriminatory terms.
+
+## Acceptance
+
+In order to get any license under these terms, you must agree to them as
+both strict obligations and conditions to all your licenses.
+
+## Noncommercial Purposes
+
+You may use the software for any noncommercial purpose.
+
+## Personal Uses
+
+Personal use for research, experiment, and testing for the benefit of
+public knowledge, personal study, private entertainment, hobby projects,
+amateur pursuits, or religious observance, without any anticipated
+commercial application, count as use for noncommercial purposes.
+
+## Noncommercial Organizations
+
+Use by any charitable organization, educational institution, public
+research organization, public safety or health organization, environmental
+protection organization, or government institution counts as use for
+noncommercial purposes, regardless of the source of funding or obligations
+resulting from the funding.
+
+## Small Business
+
+You may use the software for the benefit of your company if it meets all
+these criteria:
+
+1.  had fewer than 20 total individuals working as employees and
+    independent contractors at all times during the last tax year
+
+2.  earned less than $1,000,000 total revenue in the last tax year
+
+3.  received less than $1,000,000 total debt, equity, and other investment
+    in the last five tax years, counting investment in predecessor
+    companies that reorganized into, merged with, or spun out your company
+
+All dollar figures are United States dollars as of 2019.  Adjust for them
+inflation according to the United States Bureau of Labor Statistics'
+consumer price index for all urban consumers, United States city average,
+for all items, not seasonally adjusted, with 1982–1984=100 reference base.
+
+## Big Business
+
+You may use the software for the benefit of your company:
+
+1.  for 128 days after your company stops qualifying under
+    [Small Business](#small-business)
+
+2.  indefinitely, if the licensor or their legal successor does not offer
+fair, reasonable, and nondiscriminatory terms for a commercial license for
+the software within 32 days of [written request](#how-to-request) and
+negotiate in good faith to conclude a deal
+
+## How to Request
+
+If this software includes an address for the licensor or an agent of the
+licensor in a standard place, such as in documentation, software package
+metadata, or an "about" page or screen, try to request a fair commercial
+license at that address.  If this package includes both online and offline
+addresses, try online before offline.  If you can't deliver a request that
+way, or this software doesn't include any addressees, spend one hour online
+researching an address, recording all your searches and inquiries as you
+go, and try any addresses that you find.  If you can't find any addresses,
+or if those addresses also fail, that counts as failure to offer a fair
+commercial license by the licensor under [Big Business](#big-business).
+
+## Fair, Reasonable, and Nondiscriminatory Terms
+
+Fair, reasonable, and nondiscriminatory terms may license the software
+perpetually or for a term, and may or may not cover new versions of the
+software.  If the licensor advertises license terms and a pricing structure
+for generally available commercial licenses, the licensor proposes license
+terms and a price as advertised, and a customer not affiliated with the
+licensor has bought a commercial license for the software on substantially
+equivalent terms in the past year, the proposal is fair, reasonable, and
+nondiscriminatory.
+
+## Copyright License
+
+The licensor grants you a copyright license to do everything with the
+software that would otherwise infringe the licensor's copyright in it for
+any purpose allowed by these terms.
+
+## Notices
+
+You must ensure that anyone who gets a copy of any part of the software
+from you also gets a copy of these terms or the URL for them above, as well
+as copies of any plain-text lines beginning with `Required Notice:` that
+the licensor provided with the software.  For example:
+
+> Required Notice: Copyright Nick Thomas (https://nichoth.com)
+
+## Patent License
+
+The licensor grants you a patent license for the software that covers
+patent claims the licensor can license, or becomes able to license, that
+you would infringe by using the software.
+
+## Fair Use
+
+You may have "fair use" rights for the software under the law. These terms
+do not limit them.
+
+## No Other Rights
+
+These terms do not allow you to sublicense or transfer any of your licenses
+to anyone else, or prevent the licensor from granting licenses to anyone
+else.  These terms do not imply any other licenses.
+
+## Patent Defense
+
+If you make any written claim that the software infringes or contributes to
+infringement of any patent, your patent license for the software granted
+under these terms ends immediately. If your company makes such a claim,
+your patent license ends immediately for work on behalf of your company.
+
+## Violations
+
+The first time you are notified in writing that you have violated any of
+these terms, or done anything with the software not covered by your
+licenses, your licenses can nonetheless continue if you come into full
+compliance with these terms, and take practical steps to correct past
+violations, within 32 days of receiving notice.  Otherwise, all your
+licenses end immediately.
+
+## No Liability
+
+***As far as the law allows, the software comes as is, without any warranty
+or condition, and the licensor will not be liable to you for any damages
+arising out of these terms or the use or nature of the software, under any
+kind of legal claim.***
+
+## Definitions
+
+The **licensor** is the individual or entity offering these terms, and
+the **software** is the software the licensor makes available under these
+terms.
+
+**You** refers to the individual or entity agreeing to these terms.
+
+**Your company** is any legal entity, sole proprietorship, or other kind of
+organization that you work for, plus all organizations that have control
+over, are under the control of, or are under common control with that
+organization.  **Control** means ownership of substantially all the assets
+of an entity, or the power to direct its management and policies by vote,
+contract, or otherwise.  Control can be direct or indirect.
+
+**Your licenses** are all the licenses granted to you for the software
+under these terms.
+
+**Use** means anything you do with the software requiring one of your
+licenses.
+

package/README.md

@@ -0,0 +1,136 @@
+# Password Input
+![tests](https://github.com/substrate-system/password-input/actions/workflows/nodejs.yml/badge.svg)
+[![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)
+[![GZip size](https://img.badgesize.io/https%3A%2F%2Fesm.sh%2F%40substrate-system%2Fpassword-input%2Fes2022%2Ffile.mjs?style=flat-square&compression=gzip)](https://esm.sh/@substrate-system/password-input/es2022/password-input.mjs)
+[![semantic versioning](https://img.shields.io/badge/semver-2.0.0-blue?logo=semver&style=flat-square)](https://semver.org/)
+[![Common Changelog](https://nichoth.github.io/badge/common-changelog.svg)](./CHANGELOG.md)
+[![license](https://img.shields.io/badge/license-Big_Time-blue?style=flat-square)](LICENSE)
+
+
+A password input with less style than
+[password-field](https://github.com/substrate-system/password-field).
+
+Accessible by default — `aria-*` attributes, the `id` attribute, and a
+`label` attribute, if present, are all handled correctly.
+
+
+[See a live demo](https://substrate-system.github.io/password-input/)
+
+<details><summary><h2>Contents</h2></summary>
+
+<!-- toc -->
+
+- [Install](#install)
+- [API](#api)
+  * [ESM](#esm)
+  * [Common JS](#common-js)
+- [CSS](#css)
+  * [Import CSS](#import-css)
+  * [Customize CSS via some variables](#customize-css-via-some-variables)
+- [Use](#use)
+  * [JS](#js)
+  * [HTML](#html)
+  * [pre-built](#pre-built)
+
+<!-- tocstop -->
+
+</details>
+
+## Install
+
+```sh
+npm i -S @substrate-system/password-input
+```
+
+## API
+
+This exposes ESM and common JS via [package.json `exports` field](https://nodejs.org/api/packages.html#exports).
+
+### ESM
+```js
+import { PasswordInput } from '@substrate-system/password-input'
+```
+
+### Common JS
+```js
+require('@substrate-system/password-input')
+```
+## Use
+
+This calls the global function `customElements.define`. Just import, then use
+the tag in your HTML.
+
+### JS
+```js
+import '@substrate-system/password-input'
+```
+
+### HTML
+```html
+<div>
+    <password-input></password-input>
+</div>
+```
+
+### pre-built
+This package exposes minified JS and CSS files too. Copy them to a location that is
+accessible to your web server, then link to them in HTML.
+
+#### copy
+```sh
+cp ./node_modules/@substrate-system/password-input/dist/index.min.js ./public/password-input.min.js
+cp ./node_modules/@substrate-system/password-input/dist/style.min.css ./public/password-input.css
+```
+
+#### HTML
+```html
+<head>
+    <link rel="stylesheet" href="./password-input.css">
+</head>
+<body>
+    <!-- ... -->
+    <script type="module" src="./password-input.min.js"></script>
+</body>
+```
+
+---
+
+## CSS
+
+### Import CSS
+
+```js
+import '@substrate-system/password-input/css'
+```
+
+Or minified:
+```js
+import '@substrate-system/password-input/min/css'
+```
+
+---
+
+## Notes
+
+Implementation notes.
+
+### `ignoredAriaCallbackNames` property
+
+1. You set an `aria-*` attribute on `<password-input>`.
+2. `attributeChangedCallback` routes to `handleChange_aria` (index.ts (line 105)).
+3. `handleChange_aria` copies that value to the inner `<input>`
+   (index.ts (line 189)).
+4. Then it removes the same `aria-*` from the host (index.ts (line 194))
+   so host stays clean.
+5. That removal triggers `attributeChangedCallback` again with
+   `newValue === null`.
+6. The guard sees the name in `ignoredAriaCallbackNames`, deletes it, and
+   returns early (index.ts (line 178)),
+   so it does not remove the attribute from the input/cache.
+
+
+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

@@ -0,0 +1,239 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var index_exports = {};
+__export(index_exports, {
+  PasswordInput: () => PasswordInput
+});
+module.exports = __toCommonJS(index_exports);
+var import_util = require("@substrate-system/web-component/util");
+var import_eye_slash = require("@substrate-system/icons/eye-slash");
+var import_eye_regular = require("@substrate-system/icons/eye-regular");
+(0, import_eye_slash.define)();
+(0, import_eye_regular.define)();
+class PasswordInput extends HTMLElement {
+  static {
+    __name(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(PasswordInput.ARIA_ATTRIBUTES);
+  inputId = null;
+  inputAriaAttributes = {};
+  ignoredAriaCallbackNames = /* @__PURE__ */ new Set();
+  // empty string = is visible
+  // null = not visible
+  handleChange_visible(_, _newValue) {
+    this.reRender();
+  }
+  handleChange_label(_oldValue, _newValue) {
+    this.render();
+    this._listen();
+  }
+  handleChange_aria(name, _oldValue, newValue) {
+    if (this.ignoredAriaCallbackNames.has(name)) {
+      this.ignoredAriaCallbackNames.delete(name);
+      return;
+    }
+    if (newValue === null) {
+      delete this.inputAriaAttributes[name];
+      this.querySelector("input")?.removeAttribute(name);
+      return;
+    }
+    this.inputAriaAttributes[name] = newValue;
+    this.querySelector("input")?.setAttribute(name, newValue);
+    if (this.hasAttribute(name)) {
+      this.ignoredAriaCallbackNames.add(name);
+      this.removeAttribute(name);
+    }
+  }
+  /**
+   * Listen for change in visiblity.
+   *
+   * @param  {string} name     The attribute name
+   * @param  {string} oldValue The old attribute value
+   * @param  {string} newValue The new attribute value
+   */
+  async attributeChangedCallback(name, oldValue, newValue) {
+    if (name.startsWith("aria-")) {
+      this.handleChange_aria(name, oldValue, newValue);
+      return;
+    }
+    if (this[`handleChange_${name}`]) {
+      this[`handleChange_${name}`](oldValue, newValue);
+    }
+  }
+  connectedCallback() {
+    this.render();
+    this._listen();
+  }
+  _listen() {
+    const btn = this.querySelector("button");
+    btn.addEventListener("click", (ev) => {
+      ev.preventDefault();
+      this.isVisible = !this.isVisible;
+    });
+  }
+  getType() {
+    return this.isVisible ? "text" : "password";
+  }
+  set isVisible(value) {
+    if (value) {
+      this.setAttribute("visible", "");
+    } else {
+      this.removeAttribute("visible");
+    }
+  }
+  get isVisible() {
+    return this.hasAttribute("visible");
+  }
+  set label(value) {
+    if (value === null) {
+      this.removeAttribute("label");
+      return;
+    }
+    this.setAttribute("label", value);
+  }
+  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>';
+  }
+  /**
+   * Change the visibility button state.
+   */
+  reRender() {
+    const btn = this.querySelector(".pw-visibility");
+    btn.innerHTML = this.getButtonContent();
+    this.setAttribute("type", this.getType());
+    this.querySelector("input")?.setAttribute("type", this.getType());
+  }
+  render() {
+    const name = this.getAttribute("name");
+    const label = this.getAttribute("label");
+    const hostId = this.getAttribute("id");
+    const hostAriaAttributes = Array.from(this.attributes).filter((attr) => attr.name.startsWith("aria-"));
+    if (hostId !== null) {
+      this.inputId = hostId;
+    }
+    for (const attr of hostAriaAttributes) {
+      this.inputAriaAttributes[attr.name] = attr.value;
+    }
+    const attrs = Array.from(this.attributes).filter(
+      (attr) => attr.name !== "label" && attr.name !== "id" && !attr.name.startsWith("aria-")
+    ).map(
+      (attr) => attr.name + (attr.value === "" ? "" : `="${attr.value}"`)
+    ).join(" ");
+    const classes = (this.getAttribute("class") ?? "").split(" ").concat(["password", "input", name || ""]).filter(Boolean).join(" ");
+    const idAttribute = this.inputId ? `id="${this.inputId}"` : "";
+    const ariaAttributes = Object.entries(this.inputAriaAttributes).map(([attrName, attrValue]) => {
+      return attrName + (attrValue === "" ? "" : `="${attrValue}"`);
+    }).join(" ");
+    this.innerHTML = label ? `
+            <label class="${classes}">
+                <span class="label-content">${label}</span>
+                <span class="input">
+                    <input
+                        ${idAttribute}
+                        ${ariaAttributes}
+                        ${attrs}
+                        type=${this.getType()} />
+                    <button class="pw-visibility">
+                        ${this.getButtonContent()}
+                    </button>
+                </span>
+            </label>
+        ` : `
+            <div class="${classes}">
+                <span class="input">
+                    <input
+                        ${idAttribute}
+                        ${ariaAttributes}
+                        ${attrs}
+                        type=${this.getType()} />
+                    <button class="pw-visibility">
+                        ${this.getButtonContent()}
+                    </button>
+                </span>
+            </div>
+        `;
+    this.removeAttribute("id");
+    for (const attr of hostAriaAttributes) {
+      this.ignoredAriaCallbackNames.add(attr.name);
+      this.removeAttribute(attr.name);
+    }
+  }
+}
+(0, import_util.define)(PasswordInput.TAG, PasswordInput);
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +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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",
+  "names": ["slashDefine", "regularDefine"]
+}

package/dist/index.css

@@ -0,0 +1,70 @@
+@import "@substrate-system/icons/css";
+@import "@substrate-system/a11y/visually-hidden";
+
+password-input {
+  display: block;
+
+  & .password.input {
+    flex-wrap: wrap;
+    align-items: center;
+    min-width: 100%;
+    display: flex;
+
+    & .label-content {
+      width: 100%;
+    }
+
+    & span.input {
+      align-items: center;
+      width: 100%;
+      display: flex;
+    }
+
+    & input {
+      border: 1px solid;
+      border-radius: 0;
+      outline: 1px solid #0000;
+      width: 100%;
+      padding: 1rem 1rem .8rem;
+      transition: all .2s;
+
+      &:focus {
+        outline: 1px solid;
+      }
+
+      &:disabled {
+        & + .pw-visibility {
+          opacity: .4;
+          pointer-events: none;
+          cursor: default;
+        }
+      }
+    }
+
+    & button.pw-visibility {
+      cursor: pointer;
+      background-color: #0000;
+      border: none;
+      outline: 2px solid #0000;
+      width: 2.4rem;
+      height: 2.4rem;
+      transition: all .2s;
+      position: relative;
+      right: 3rem;
+
+      &:focus-visible {
+        & .icon {
+          width: 100%;
+          height: 100%;
+        }
+
+        outline-offset: 2px;
+        outline: 2px solid;
+      }
+    }
+  }
+}
+
+password-input:not(:defined) {
+  visibility: hidden;
+}

package/dist/index.d.ts

@@ -0,0 +1,38 @@
+declare global {
+    interface HTMLElementTagNameMap {
+        'password-input': PasswordInput;
+    }
+}
+export declare class PasswordInput extends HTMLElement {
+    static TAG: string;
+    static ARIA_ATTRIBUTES: string[];
+    static observedAttributes: string[];
+    inputId: string | null;
+    inputAriaAttributes: Record<string, string>;
+    ignoredAriaCallbackNames: Set<string>;
+    handleChange_visible(_: any, _newValue: any): void;
+    handleChange_label(_oldValue: any, _newValue: any): void;
+    handleChange_aria(name: string, _oldValue: string | null, newValue: string | null): void;
+    /**
+     * Listen for change in visiblity.
+     *
+     * @param  {string} name     The attribute name
+     * @param  {string} oldValue The old attribute value
+     * @param  {string} newValue The new attribute value
+     */
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): Promise<void>;
+    connectedCallback(): void;
+    _listen(): void;
+    getType(): 'text' | 'password';
+    set isVisible(value: boolean);
+    get isVisible(): boolean;
+    set label(value: string | null);
+    get label(): string | null;
+    getButtonContent(): "<eye-regular></eye-regular><span class=\"visually-hidden\">Hide</span>" | "<eye-slash></eye-slash><span class=\"visually-hidden\">Show</span>";
+    /**
+     * Change the visibility button state.
+     */
+    reRender(): void;
+    render(): void;
+}
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +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"}

package/dist/index.js

@@ -0,0 +1,220 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { define } from "@substrate-system/web-component/util";
+import { define as slashDefine } from "@substrate-system/icons/eye-slash";
+import { define as regularDefine } from "@substrate-system/icons/eye-regular";
+slashDefine();
+regularDefine();
+class PasswordInput extends HTMLElement {
+  static {
+    __name(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(PasswordInput.ARIA_ATTRIBUTES);
+  inputId = null;
+  inputAriaAttributes = {};
+  ignoredAriaCallbackNames = /* @__PURE__ */ new Set();
+  // empty string = is visible
+  // null = not visible
+  handleChange_visible(_, _newValue) {
+    this.reRender();
+  }
+  handleChange_label(_oldValue, _newValue) {
+    this.render();
+    this._listen();
+  }
+  handleChange_aria(name, _oldValue, newValue) {
+    if (this.ignoredAriaCallbackNames.has(name)) {
+      this.ignoredAriaCallbackNames.delete(name);
+      return;
+    }
+    if (newValue === null) {
+      delete this.inputAriaAttributes[name];
+      this.querySelector("input")?.removeAttribute(name);
+      return;
+    }
+    this.inputAriaAttributes[name] = newValue;
+    this.querySelector("input")?.setAttribute(name, newValue);
+    if (this.hasAttribute(name)) {
+      this.ignoredAriaCallbackNames.add(name);
+      this.removeAttribute(name);
+    }
+  }
+  /**
+   * Listen for change in visiblity.
+   *
+   * @param  {string} name     The attribute name
+   * @param  {string} oldValue The old attribute value
+   * @param  {string} newValue The new attribute value
+   */
+  async attributeChangedCallback(name, oldValue, newValue) {
+    if (name.startsWith("aria-")) {
+      this.handleChange_aria(name, oldValue, newValue);
+      return;
+    }
+    if (this[`handleChange_${name}`]) {
+      this[`handleChange_${name}`](oldValue, newValue);
+    }
+  }
+  connectedCallback() {
+    this.render();
+    this._listen();
+  }
+  _listen() {
+    const btn = this.querySelector("button");
+    btn.addEventListener("click", (ev) => {
+      ev.preventDefault();
+      this.isVisible = !this.isVisible;
+    });
+  }
+  getType() {
+    return this.isVisible ? "text" : "password";
+  }
+  set isVisible(value) {
+    if (value) {
+      this.setAttribute("visible", "");
+    } else {
+      this.removeAttribute("visible");
+    }
+  }
+  get isVisible() {
+    return this.hasAttribute("visible");
+  }
+  set label(value) {
+    if (value === null) {
+      this.removeAttribute("label");
+      return;
+    }
+    this.setAttribute("label", value);
+  }
+  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>';
+  }
+  /**
+   * Change the visibility button state.
+   */
+  reRender() {
+    const btn = this.querySelector(".pw-visibility");
+    btn.innerHTML = this.getButtonContent();
+    this.setAttribute("type", this.getType());
+    this.querySelector("input")?.setAttribute("type", this.getType());
+  }
+  render() {
+    const name = this.getAttribute("name");
+    const label = this.getAttribute("label");
+    const hostId = this.getAttribute("id");
+    const hostAriaAttributes = Array.from(this.attributes).filter((attr) => attr.name.startsWith("aria-"));
+    if (hostId !== null) {
+      this.inputId = hostId;
+    }
+    for (const attr of hostAriaAttributes) {
+      this.inputAriaAttributes[attr.name] = attr.value;
+    }
+    const attrs = Array.from(this.attributes).filter(
+      (attr) => attr.name !== "label" && attr.name !== "id" && !attr.name.startsWith("aria-")
+    ).map(
+      (attr) => attr.name + (attr.value === "" ? "" : `="${attr.value}"`)
+    ).join(" ");
+    const classes = (this.getAttribute("class") ?? "").split(" ").concat(["password", "input", name || ""]).filter(Boolean).join(" ");
+    const idAttribute = this.inputId ? `id="${this.inputId}"` : "";
+    const ariaAttributes = Object.entries(this.inputAriaAttributes).map(([attrName, attrValue]) => {
+      return attrName + (attrValue === "" ? "" : `="${attrValue}"`);
+    }).join(" ");
+    this.innerHTML = label ? `
+            <label class="${classes}">
+                <span class="label-content">${label}</span>
+                <span class="input">
+                    <input
+                        ${idAttribute}
+                        ${ariaAttributes}
+                        ${attrs}
+                        type=${this.getType()} />
+                    <button class="pw-visibility">
+                        ${this.getButtonContent()}
+                    </button>
+                </span>
+            </label>
+        ` : `
+            <div class="${classes}">
+                <span class="input">
+                    <input
+                        ${idAttribute}
+                        ${ariaAttributes}
+                        ${attrs}
+                        type=${this.getType()} />
+                    <button class="pw-visibility">
+                        ${this.getButtonContent()}
+                    </button>
+                </span>
+            </div>
+        `;
+    this.removeAttribute("id");
+    for (const attr of hostAriaAttributes) {
+      this.ignoredAriaCallbackNames.add(attr.name);
+      this.removeAttribute(attr.name);
+    }
+  }
+}
+define(PasswordInput.TAG, PasswordInput);
+export {
+  PasswordInput
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +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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",
+  "names": []
+}

package/dist/index.min.css

@@ -0,0 +1 @@
+@import "@substrate-system/icons/css";@import "@substrate-system/a11y/visually-hidden";password-input{display:block;& .password.input{flex-wrap:wrap;align-items:center;min-width:100%;display:flex;& .label-content{width:100%}& span.input{align-items:center;width:100%;display:flex}& input{border:1px solid;border-radius:0;outline:1px solid #0000;width:100%;padding:1rem 1rem .8rem;transition:all .2s;&:focus{outline:1px solid}&:disabled{&+.pw-visibility{opacity:.4;pointer-events:none;cursor:default}}}& button.pw-visibility{cursor:pointer;background-color:#0000;border:none;outline:2px solid #0000;width:2.4rem;height:2.4rem;transition:all .2s;position:relative;right:3rem;&:focus-visible{& .icon{width:100%;height:100%}outline-offset:2px;outline:2px solid}}}}password-input:not(:defined){visibility:hidden}

package/dist/index.min.js

@@ -0,0 +1,51 @@
+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">
+                ${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
+        class="icon eye-slash"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 640 512"
+        role="image"
+        aria-labelledby="${s(t)}"
+    >
+        <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
+        class="icon eye-regular"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 576 512"
+        role="image"
+        aria-labelledby="${e}"
+    >
+        <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>
+                <span class="input">
+                    <input
+                        ${v}
+                        ${w}
+                        ${y}
+                        type=${this.getType()} />
+                    <button class="pw-visibility">
+                        ${this.getButtonContent()}
+                    </button>
+                </span>
+            </label>
+        `:`
+            <div class="${A}">
+                <span class="input">
+                    <input
+                        ${v}
+                        ${w}
+                        ${y}
+                        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};
+//# sourceMappingURL=index.min.js.map

package/dist/index.min.js.map

@@ -0,0 +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"]
+}

package/dist/meta.json

@@ -0,0 +1,46 @@
+{
+  "inputs": {
+    "src/index.ts": {
+      "bytes": 7849,
+      "imports": [],
+      "format": "esm"
+    }
+  },
+  "outputs": {
+    "dist/index.js.map": {
+      "imports": [],
+      "exports": [],
+      "inputs": {},
+      "bytes": 12085
+    },
+    "dist/index.js": {
+      "imports": [
+        {
+          "path": "@substrate-system/web-component/util",
+          "kind": "import-statement",
+          "external": true
+        },
+        {
+          "path": "@substrate-system/icons/eye-slash",
+          "kind": "import-statement",
+          "external": true
+        },
+        {
+          "path": "@substrate-system/icons/eye-regular",
+          "kind": "import-statement",
+          "external": true
+        }
+      ],
+      "exports": [
+        "PasswordInput"
+      ],
+      "entryPoint": "src/index.ts",
+      "inputs": {
+        "src/index.ts": {
+          "bytesInOutput": 6512
+        }
+      },
+      "bytes": 6703
+    }
+  }
+}

package/package.json

@@ -0,0 +1,73 @@
+{
+  "name": "@substrate-system/password-input",
+  "type": "module",
+  "version": "0.0.0",
+  "main": "dist/index.js",
+  "files": [
+    "./dist/*"
+  ],
+  "scripts": {
+    "lint": "eslint \"./**/*.{ts,js}\"",
+    "test": "esbuild --bundle ./test/index.ts | tapout",
+    "build-css": "lightningcss --nesting src/index.css -o dist/index.css",
+    "build-css:min": "lightningcss --nesting --minify src/index.css -o dist/index.min.css",
+    "build-cjs": "esbuild src/*.ts --format=cjs --keep-names --tsconfig=tsconfig.build.json --outdir=./dist --out-extension:.js=.cjs --sourcemap",
+    "build-esm": "esbuild src/*.ts --format=esm --metafile=dist/meta.json --keep-names --tsconfig=tsconfig.build.json --outdir=./dist --sourcemap && tsc --emitDeclarationOnly --project tsconfig.build.json --outDir dist",
+    "build-esm:min": "esbuild ./src/*.ts --format=esm --keep-names --bundle --tsconfig=tsconfig.build.json --minify --out-extension:.js=.min.js --outdir=./dist --sourcemap",
+    "build-example": "mkdir -p ./public && rm -rf ./public/* && NODE_ENV=development vite --mode development --base=\"/password-input\" build",
+    "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",
+    "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",
+    "prepublishOnly": "npm run build"
+  },
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./css": "./dist/index.css",
+    "./min/css": "./dist/index.min.css",
+    "./min/*": {
+      "import": "./dist/*.min.js",
+      "require": "./dist/*.min.cjs"
+    },
+    "./*": {
+      "import": "./dist/*.js",
+      "require": "./dist/*.cjs"
+    }
+  },
+  "dependencies": {
+    "@substrate-system/a11y": "^0.0.17",
+    "@substrate-system/icons": "^0.1.29",
+    "@substrate-system/web-component": "^0.0.43"
+  },
+  "devDependencies": {
+    "@substrate-system/debug": "^0.9.32",
+    "@substrate-system/dom": "^0.1.13",
+    "@substrate-system/tapout": "^0.0.35",
+    "@substrate-system/tapzero": "^0.10.16",
+    "@typescript-eslint/eslint-plugin": "^8.7.0",
+    "@typescript-eslint/parser": "^8.7.0",
+    "auto-changelog": "^2.4.0",
+    "browserslist": "^4.28.1",
+    "esbuild": "^0.27.2",
+    "eslint": "^8.57.0",
+    "eslint-config-standard": "^17.1.0",
+    "lightningcss": "^1.30.2",
+    "lightningcss-cli": "^1.30.2",
+    "markdown-toc": "^1.2.0",
+    "stylelint": "^17.0.0",
+    "stylelint-config-standard": "^40.0.0",
+    "tap-spec": "^5.0.0",
+    "tape-run": "^11.0.0",
+    "typedoc": "^0.28.1",
+    "typescript": "^5.7.3",
+    "vite": "^7.3.0"
+  },
+  "author": "nichoth <nichoth@nichoth.com> (https://nichoth.com)",
+  "license": "SEE LICENSE IN LICENSE"
+}