kemet-ui 3.0.0 → 3.1.0

package/dist/components/kemet-icon/kemet-icon.js

@@ -48,7 +48,7 @@ let KemetIcon = class KemetIcon extends LitElement {
         }
         const svgElement = parser.parseFromString(svgString, 'image/svg+xml').documentElement;
         const svgPrevious = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('svg');
-        if (svgElement.tagName === 'svg') {
+        if (svgElement.tagName.toLowerCase() === 'svg') {
             svgElement.setAttribute('id', this.icon);
             svgElement.setAttribute('width', `${this.size}px`);
             svgElement.setAttribute('height', `${this.size}px`);

package/dist/components/kemet-icon/kemet-icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"kemet-icon.js","sourceRoot":"","sources":["../../../src/components/kemet-icon/kemet-icon.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable max-len */\n/* eslint-disable no-console */\nimport { html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { stylesBase } from './styles';\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-icon\n * @summary An element that represents an icon from a predefined set of open sourced icons.\n *\n * @prop {string} icon - The name of the icon to reference.\n * @prop {string} set - The sprite map from an open source project that an icon belongs too. Values include: (bootstrap | font-awesome-brand | font-awesome-regular | font-awesome-solid)\n * @prop {number} size - The width and height of the icon in pixels.\n *\n */\n\n@customElement('kemet-icon')\nexport default class KemetIcon extends LitElement {\n  static styles = [stylesBase];\n\n  @property({ type: String })\n  icon: string = 'alarm';\n\n  @property({ type: String })\n  set: string = 'bootstrap';\n\n  @property({ type: Number })\n  size: number = 16;\n\n  updated() {\n    this.getIcon();\n    this.style.width = `${this.size}px`;\n    this.style.height = `${this.size}px`;\n  }\n\n  render() {\n    return html``;\n  }\n\n  async getIcon() {\n    const parser = new DOMParser();\n    let svgString;\n\n    try {\n      svgString = await fetch(`${this.getUrl()}/${this.icon}.svg`)\n        .then(response => response.text());\n\n      if (svgString.indexOf('</svg>') < 0) {\n        throw new Error('Not a valid svg.');\n      }\n    } catch (error) {\n      svgString = '';\n      console.error(error);\n    }\n\n    const svgElement = parser.parseFromString(svgString, 'image/svg+xml').documentElement;\n    const svgPrevious = this.shadowRoot?.querySelector('svg');\n\n    if (svgElement.tagName === 'svg') {\n      svgElement.setAttribute('id', this.icon);\n      svgElement.setAttribute('width', `${this.size}px`);\n      svgElement.setAttribute('height', `${this.size}px`);\n      svgElement.setAttribute('fill', 'currentColor');\n\n      if (svgPrevious) svgPrevious.remove();\n      this.shadowRoot?.appendChild(svgElement);\n    } else {\n      console.error(`Could not find icon \"${this.icon}\" in set \"${this.set}\"`);\n\n      const errorIconString = `\n        <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" id=\"kemet-error\" style=\"enable-background:new 0 0 512 512;\" version=\"1.1\" viewBox=\"0 0 512 512\" xml:space=\"preserve\" width=\"${this.size}\" height=\"${this.size}\">\n          <style type=\"text/css\">\n            .st0{fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;}\n            .st1{fill-rule:evenodd;clip-rule:evenodd;fill:#EC1C24;}\n          </style>\n          <g>\n            <path class=\"st0\" d=\"M256,0c70.7,0,134.7,28.7,181,75c46.3,46.3,75,110.3,75,181c0,70.7-28.7,134.7-75,181   c-46.3,46.3-110.3,75-181,75c-70.7,0-134.7-28.7-181-75C28.7,390.7,0,326.7,0,256c0-70.7,28.7-134.7,75-181S185.3,0,256,0z\"/>\n            <path class=\"st1\" d=\"M512,256c0-70.7-28.7-134.7-75-181C390.7,28.7,326.7,0,256,0C193,0,135.5,22.8,90.9,60.6l-0.1-0.1   C85.3,65.1,80,69.9,75,75c-5,5.1-9.9,10.3-14.5,15.8l0.1,0.1C22.8,135.5,0,193,0,256c0,70.7,28.7,134.7,75,181   c46.3,46.3,110.3,75,181,75c63,0,120.5-22.8,165.1-60.6l0.1,0.1c5.4-4.6,10.7-9.5,15.8-14.5c5-5,9.9-10.3,14.5-15.8l-0.1-0.1   C489.2,376.6,512,319,512,256z M256,42.9c58.9,0,112.1,23.9,150.7,62.4c38.6,38.6,62.4,91.9,62.4,150.7c0,51.1-18.1,98-48.1,134.8   L121.2,90.9C158,60.9,204.9,42.9,256,42.9z M256,469.1c-58.8,0-112.1-23.9-150.7-62.4C66.7,368.1,42.9,314.9,42.9,256   c0-51.1,18.1-98,48.1-134.8l299.8,299.8C354,451.1,307.1,469.1,256,469.1z\"/>\n          </g>\n        </svg>\n      `;\n\n      const errorIconElement = parser.parseFromString(errorIconString, 'image/svg+xml').documentElement;\n\n      if (svgPrevious) svgPrevious.remove();\n      this.shadowRoot?.appendChild(errorIconElement);\n    }\n  }\n\n  getUrl() {\n    let url;\n\n    switch (this.set) {\n      case 'bootstrap': url = 'https://unpkg.com/bootstrap-icons@latest/icons'; break;\n      case 'font-awesome-brands': url = 'https://unpkg.com/@fortawesome/fontawesome-free@latest/svgs/brands'; break;\n      case 'font-awesome-regular': url = 'https://unpkg.com/@fortawesome/fontawesome-free@latest/svgs/regular'; break;\n      case 'font-awesome-solid': url = 'https://unpkg.com/@fortawesome/fontawesome-free@latest/svgs/solid'; break;\n      default: url = 'https://unpkg.com/bootstrap-icons@latest/icons';\n    }\n\n    return url;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-icon': KemetIcon\n  }\n}\n"]}
+{"version":3,"file":"kemet-icon.js","sourceRoot":"","sources":["../../../src/components/kemet-icon/kemet-icon.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable max-len */\n/* eslint-disable no-console */\nimport { html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { stylesBase } from './styles';\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-icon\n * @summary An element that represents an icon from a predefined set of open sourced icons.\n *\n * @prop {string} icon - The name of the icon to reference.\n * @prop {string} set - The sprite map from an open source project that an icon belongs too. Values include: (bootstrap | font-awesome-brand | font-awesome-regular | font-awesome-solid)\n * @prop {number} size - The width and height of the icon in pixels.\n *\n */\n\n@customElement('kemet-icon')\nexport default class KemetIcon extends LitElement {\n  static styles = [stylesBase];\n\n  @property({ type: String })\n  icon: string = 'alarm';\n\n  @property({ type: String })\n  set: string = 'bootstrap';\n\n  @property({ type: Number })\n  size: number = 16;\n\n  updated() {\n    this.getIcon();\n    this.style.width = `${this.size}px`;\n    this.style.height = `${this.size}px`;\n  }\n\n  render() {\n    return html``;\n  }\n\n  async getIcon() {\n    const parser = new DOMParser();\n    let svgString;\n\n    try {\n      svgString = await fetch(`${this.getUrl()}/${this.icon}.svg`)\n        .then(response => response.text());\n\n      if (svgString.indexOf('</svg>') < 0) {\n        throw new Error('Not a valid svg.');\n      }\n    } catch (error) {\n      svgString = '';\n      console.error(error);\n    }\n\n    const svgElement = parser.parseFromString(svgString, 'image/svg+xml').documentElement;\n    const svgPrevious = this.shadowRoot?.querySelector('svg');\n\n    if (svgElement.tagName.toLowerCase() === 'svg') {\n      svgElement.setAttribute('id', this.icon);\n      svgElement.setAttribute('width', `${this.size}px`);\n      svgElement.setAttribute('height', `${this.size}px`);\n      svgElement.setAttribute('fill', 'currentColor');\n\n      if (svgPrevious) svgPrevious.remove();\n      this.shadowRoot?.appendChild(svgElement);\n    } else {\n      console.error(`Could not find icon \"${this.icon}\" in set \"${this.set}\"`);\n\n      const errorIconString = `\n        <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" id=\"kemet-error\" style=\"enable-background:new 0 0 512 512;\" version=\"1.1\" viewBox=\"0 0 512 512\" xml:space=\"preserve\" width=\"${this.size}\" height=\"${this.size}\">\n          <style type=\"text/css\">\n            .st0{fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;}\n            .st1{fill-rule:evenodd;clip-rule:evenodd;fill:#EC1C24;}\n          </style>\n          <g>\n            <path class=\"st0\" d=\"M256,0c70.7,0,134.7,28.7,181,75c46.3,46.3,75,110.3,75,181c0,70.7-28.7,134.7-75,181   c-46.3,46.3-110.3,75-181,75c-70.7,0-134.7-28.7-181-75C28.7,390.7,0,326.7,0,256c0-70.7,28.7-134.7,75-181S185.3,0,256,0z\"/>\n            <path class=\"st1\" d=\"M512,256c0-70.7-28.7-134.7-75-181C390.7,28.7,326.7,0,256,0C193,0,135.5,22.8,90.9,60.6l-0.1-0.1   C85.3,65.1,80,69.9,75,75c-5,5.1-9.9,10.3-14.5,15.8l0.1,0.1C22.8,135.5,0,193,0,256c0,70.7,28.7,134.7,75,181   c46.3,46.3,110.3,75,181,75c63,0,120.5-22.8,165.1-60.6l0.1,0.1c5.4-4.6,10.7-9.5,15.8-14.5c5-5,9.9-10.3,14.5-15.8l-0.1-0.1   C489.2,376.6,512,319,512,256z M256,42.9c58.9,0,112.1,23.9,150.7,62.4c38.6,38.6,62.4,91.9,62.4,150.7c0,51.1-18.1,98-48.1,134.8   L121.2,90.9C158,60.9,204.9,42.9,256,42.9z M256,469.1c-58.8,0-112.1-23.9-150.7-62.4C66.7,368.1,42.9,314.9,42.9,256   c0-51.1,18.1-98,48.1-134.8l299.8,299.8C354,451.1,307.1,469.1,256,469.1z\"/>\n          </g>\n        </svg>\n      `;\n\n      const errorIconElement = parser.parseFromString(errorIconString, 'image/svg+xml').documentElement;\n\n      if (svgPrevious) svgPrevious.remove();\n      this.shadowRoot?.appendChild(errorIconElement);\n    }\n  }\n\n  getUrl() {\n    let url;\n\n    switch (this.set) {\n      case 'bootstrap': url = 'https://unpkg.com/bootstrap-icons@latest/icons'; break;\n      case 'font-awesome-brands': url = 'https://unpkg.com/@fortawesome/fontawesome-free@latest/svgs/brands'; break;\n      case 'font-awesome-regular': url = 'https://unpkg.com/@fortawesome/fontawesome-free@latest/svgs/regular'; break;\n      case 'font-awesome-solid': url = 'https://unpkg.com/@fortawesome/fontawesome-free@latest/svgs/solid'; break;\n      default: url = 'https://unpkg.com/bootstrap-icons@latest/icons';\n    }\n\n    return url;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-icon': KemetIcon\n  }\n}\n"]}

package/dist/components/kemet-icon/spec.d.ts

@@ -0,0 +1 @@
+import './kemet-icon';

package/dist/components/kemet-icon/spec.js

@@ -0,0 +1,69 @@
+import { html, render } from 'lit';
+import { expect } from '@wdio/globals';
+import { waitFor } from '@testing-library/dom';
+import './kemet-icon';
+describe('Icon', () => {
+    const templates = {
+        default: html `<kemet-icon></kemet-icon>`,
+        fontAwesomeBrands: html `<kemet-icon set="font-awesome-brands"></kemet-icon>`,
+        fontAwesomeRegular: html `<kemet-icon set="font-awesome-regular"></kemet-icon>`,
+        fontAwesomeSolid: html `<kemet-icon set="font-awesome-solid"></kemet-icon>`,
+        invalidSet: html `<kemet-icon set="invalid"></kemet-icon>`,
+        inline: html `
+      <kemet-icon>
+        <svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+          <path d="M 16 2 C 13.25 2 11 4.25 11 7 C 11 8.957031 12.113281 10.875 13.15625 12.4375 C 13.289063 12.640625 13.429688 12.8125 13.5625 13 L 8 13 L 8 16.15625 L 9.15625 16 L 14.90625 15.1875 L 14 28.9375 L 13.9375 30 L 18.0625 30 L 18 28.9375 L 17.09375 15.1875 L 22.84375 16 L 24 16.15625 L 24 13 L 18.4375 13 C 18.570313 12.8125 18.710938 12.640625 18.84375 12.4375 C 19.886719 10.875 21 8.957031 21 7 C 21 4.25 18.75 2 16 2 Z M 16 4 C 17.667969 4 19 5.332031 19 7 C 19 8.078125 18.113281 9.914063 17.15625 11.34375 C 16.574219 12.21875 16.367188 12.429688 16 12.875 C 15.632813 12.429688 15.425781 12.21875 14.84375 11.34375 C 13.886719 9.914063 13 8.078125 13 7 C 13 5.332031 14.332031 4 16 4 Z"></path>
+        </svg>
+      </kemet-icon>
+    `,
+        inlineText: html `
+      <kemet-icon>
+        <span>No Icon</span>
+      </kemet-icon>
+    `,
+    };
+    // TODO why is this failing
+    it.skip('displays an icon', async () => {
+        render(templates.default, document.body);
+        await waitFor(() => {
+            const svg = document.querySelector('kemet-icon').shadowRoot.querySelector('svg');
+            expect(svg).toBeTruthy();
+        });
+    });
+    it('display an inline icon', async () => {
+        render(templates.inline, document.body);
+        await waitFor(() => {
+            const svg = document.querySelector('kemet-icon').querySelector('svg');
+            expect(svg).toBeTruthy();
+        });
+    });
+    it('renders nothing when no icon is passed inline', async () => {
+        render(templates.inlineText, document.body);
+        await waitFor(() => {
+            const kemetIcon = document.querySelector('kemet-icon');
+            const hasIcon = kemetIcon.shadowRoot.querySelector('svg');
+            expect(hasIcon).toBeFalsy();
+        });
+    });
+    it('renders the font awesome brand set', () => {
+        render(templates.fontAwesomeBrands, document.body);
+        const kemetIcon = document.querySelector('kemet-icon');
+        expect(kemetIcon.set).toBe('font-awesome-brands');
+    });
+    it('renders the font awesome regular set', () => {
+        render(templates.fontAwesomeRegular, document.body);
+        const kemetIcon = document.querySelector('kemet-icon');
+        expect(kemetIcon.set).toBe('font-awesome-regular');
+    });
+    it('renders the font awesome solid set', () => {
+        render(templates.fontAwesomeSolid, document.body);
+        const kemetIcon = document.querySelector('kemet-icon');
+        expect(kemetIcon.set).toBe('font-awesome-solid');
+    });
+    it('renders default set', () => {
+        render(templates.invalidSet, document.body);
+        const kemetIcon = document.querySelector('kemet-icon');
+        expect(kemetIcon.set).toBe('invalid');
+    });
+});
+//# sourceMappingURL=spec.js.map

package/dist/components/kemet-icon/spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"spec.js","sourceRoot":"","sources":["../../../src/components/kemet-icon/spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, render } from 'lit';\nimport { expect } from '@wdio/globals';\nimport { waitFor } from '@testing-library/dom';\n\nimport './kemet-icon';\n\ndescribe('Icon', () => {\n  const templates = {\n    default: html`<kemet-icon></kemet-icon>`,\n    fontAwesomeBrands: html`<kemet-icon set=\"font-awesome-brands\"></kemet-icon>`,\n    fontAwesomeRegular: html`<kemet-icon set=\"font-awesome-regular\"></kemet-icon>`,\n    fontAwesomeSolid: html`<kemet-icon set=\"font-awesome-solid\"></kemet-icon>`,\n    invalidSet: html`<kemet-icon set=\"invalid\"></kemet-icon>`,\n    inline: html`\n      <kemet-icon>\n        <svg viewBox=\"0 0 32 32\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M 16 2 C 13.25 2 11 4.25 11 7 C 11 8.957031 12.113281 10.875 13.15625 12.4375 C 13.289063 12.640625 13.429688 12.8125 13.5625 13 L 8 13 L 8 16.15625 L 9.15625 16 L 14.90625 15.1875 L 14 28.9375 L 13.9375 30 L 18.0625 30 L 18 28.9375 L 17.09375 15.1875 L 22.84375 16 L 24 16.15625 L 24 13 L 18.4375 13 C 18.570313 12.8125 18.710938 12.640625 18.84375 12.4375 C 19.886719 10.875 21 8.957031 21 7 C 21 4.25 18.75 2 16 2 Z M 16 4 C 17.667969 4 19 5.332031 19 7 C 19 8.078125 18.113281 9.914063 17.15625 11.34375 C 16.574219 12.21875 16.367188 12.429688 16 12.875 C 15.632813 12.429688 15.425781 12.21875 14.84375 11.34375 C 13.886719 9.914063 13 8.078125 13 7 C 13 5.332031 14.332031 4 16 4 Z\"></path>\n        </svg>\n      </kemet-icon>\n    `,\n    inlineText: html`\n      <kemet-icon>\n        <span>No Icon</span>\n      </kemet-icon>\n    `,\n  };\n\n  // TODO why is this failing\n  it.skip('displays an icon', async () => {\n    render(templates.default, document.body);\n    await waitFor(() => {\n      const svg = document.querySelector('kemet-icon').shadowRoot.querySelector('svg');\n      expect(svg).toBeTruthy();\n    });\n  });\n\n  it('display an inline icon', async () => {\n    render(templates.inline, document.body);\n    await waitFor(() => {\n      const svg = document.querySelector('kemet-icon').querySelector('svg');\n      expect(svg).toBeTruthy();\n    });\n  });\n\n  it('renders nothing when no icon is passed inline', async () => {\n    render(templates.inlineText, document.body);\n    await waitFor(() => {\n      const kemetIcon = document.querySelector('kemet-icon');\n      const hasIcon = kemetIcon.shadowRoot.querySelector('svg');\n      expect(hasIcon).toBeFalsy();\n    });\n  });\n\n  it('renders the font awesome brand set', () => {\n    render(templates.fontAwesomeBrands, document.body);\n    const kemetIcon = document.querySelector('kemet-icon');\n    expect(kemetIcon.set).toBe('font-awesome-brands');\n  });\n\n  it('renders the font awesome regular set', () => {\n    render(templates.fontAwesomeRegular, document.body);\n    const kemetIcon = document.querySelector('kemet-icon');\n    expect(kemetIcon.set).toBe('font-awesome-regular');\n  });\n\n  it('renders the font awesome solid set', () => {\n    render(templates.fontAwesomeSolid, document.body);\n    const kemetIcon = document.querySelector('kemet-icon');\n    expect(kemetIcon.set).toBe('font-awesome-solid');\n  });\n\n  it('renders default set', () => {\n    render(templates.invalidSet, document.body);\n    const kemetIcon = document.querySelector('kemet-icon');\n    expect(kemetIcon.set).toBe('invalid');\n  });\n});\n"]}

package/dist/components/kemet-input/docs/stories.d.ts

@@ -5,7 +5,7 @@ import '../../kemet-tabs/kemet-tab';
 import '../../kemet-tabs/kemet-tab-panel';
 declare const meta: Meta;
 export default meta;
-declare type Story = StoryObj;
+type Story = StoryObj;
 export declare const Standard: Story;
 export declare const Rounded: Story;
 export declare const Filled: Story;

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

@@ -26,7 +26,7 @@ import { TypeAriaAutoComplete, TypeAutoComplete, TypeStatus } from './types';
  * @prop {boolean} required - The required attribute
  * @prop {string} type - The type of input
  * @prop {string} value - The input's value
- * @prop {boolean} invalid - States whether or not the input is invalid
+ * @prop {boolean} invalid - States whether the input is invalid
  * @prop {string} status - The status of the input
  * @prop {boolean} validateOnBlur - Activates validation on blur
  * @prop {string} ariaAutoComplete - Aria Autocomplete
@@ -108,28 +108,9 @@ export default class KemetInput extends LitElement {
     constructor();
     firstUpdated(): void;
     render(): import("lit-html").TemplateResult<1>;
-    /**
-     * Makes the right icon
-     * @private
-     * @returns {templateResult} A right icon
-     */
     makeIconRight(): import("lit-html").TemplateResult<1>;
-    /**
-     * Makes the left icon
-     * @private
-     * @returns {templateResult} A left icon
-     */
     makeIconLeft(): import("lit-html").TemplateResult<1>;
-    /**
-     * Makes a clear icon for search.
-     * @private
-     * @returns {templateResult} A search icon
-     */
     makeIconClear(): import("lit-html").TemplateResult<1>;
-    /**
-     * Makes a password visibility toggle button
-     * @returns {templateResult} A mask or unmask icon
-     */
     makeVisibilityToggle(): import("lit-html").TemplateResult<1>;
     setPasswordIcon(): "eye" | "eye-slash";
     /**
@@ -157,7 +138,7 @@ export default class KemetInput extends LitElement {
      * @private
      */
     handleInvalid(): void;
-    handleStatus(event: any): void;
+    handleStatus(event: CustomEvent): void;
     /**
      * Toggles password visibility
      * @private
@@ -170,7 +151,7 @@ export default class KemetInput extends LitElement {
     handleClear(): void;
     /**
      * Checks the validity of the character limit for the count component
-     * @private
+     * @public
      * @returns {boolean}
      */
     checkLimitValidity(): boolean;

package/dist/components/kemet-input/kemet-input.js

@@ -30,7 +30,7 @@ import { stylesBase } from './styles';
  * @prop {boolean} required - The required attribute
  * @prop {string} type - The type of input
  * @prop {string} value - The input's value
- * @prop {boolean} invalid - States whether or not the input is invalid
+ * @prop {boolean} invalid - States whether the input is invalid
  * @prop {string} status - The status of the input
  * @prop {boolean} validateOnBlur - Activates validation on blur
  * @prop {string} ariaAutoComplete - Aria Autocomplete
@@ -84,7 +84,6 @@ let KemetInput = class KemetInput extends LitElement {
         /** @internal */
         this.formSubmitController = new FormSubmitController(this);
     }
-    ;
     firstUpdated() {
         // elements
         this.input = this.shadowRoot.querySelector('input');
@@ -92,7 +91,7 @@ let KemetInput = class KemetInput extends LitElement {
         this.form = this.closest('form');
         this.slug = this.field ? this.field.slug : 'input';
         if (this.field) {
-            this.field.addEventListener('fmc-password-status', event => this.handleStatus(event));
+            this.field.addEventListener('kemet-password-status', (event) => this.handleStatus(event));
         }
     }
     render() {
@@ -132,11 +131,6 @@ let KemetInput = class KemetInput extends LitElement {
       </div>
     `;
     }
-    /**
-     * Makes the right icon
-     * @private
-     * @returns {templateResult} A right icon
-     */
     makeIconRight() {
         if (this.iconRight) {
             return html `
@@ -145,11 +139,6 @@ let KemetInput = class KemetInput extends LitElement {
         }
         return null;
     }
-    /**
-     * Makes the left icon
-     * @private
-     * @returns {templateResult} A left icon
-     */
     makeIconLeft() {
         if (this.iconLeft) {
             return html `
@@ -158,11 +147,6 @@ let KemetInput = class KemetInput extends LitElement {
         }
         return null;
     }
-    /**
-     * Makes a clear icon for search.
-     * @private
-     * @returns {templateResult} A search icon
-     */
     makeIconClear() {
         if (this.type === 'search' && this.value !== '') {
             return html `
@@ -171,10 +155,6 @@ let KemetInput = class KemetInput extends LitElement {
         }
         return null;
     }
-    /**
-     * Makes a password visibility toggle button
-     * @returns {templateResult} A mask or unmask icon
-     */
     makeVisibilityToggle() {
         if (this.type === 'password') {
             return html `<kemet-icon
@@ -274,7 +254,7 @@ let KemetInput = class KemetInput extends LitElement {
     }
     /**
      * Checks the validity of the character limit for the count component
-     * @private
+     * @public
      * @returns {boolean}
      */
     checkLimitValidity() {

package/dist/components/kemet-input/kemet-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"kemet-input.js","sourceRoot":"","sources":["../../../src/components/kemet-input/kemet-input.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { live } from 'lit/directives/live.js';\nimport { FormSubmitController } from '../../utilities/controllers/forms';\nimport { emitEvent } from '../../utilities/misc/events';\nimport { KemetFieldInterface } from '../kemet-field/types';\nimport { stylesBase } from './styles';\nimport { TypeAriaAutoComplete, TypeAutoComplete, TypeStatus } from './types';\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-input\n * @summary An enhanced input element.\n *\n * @prop {string} slug - Used for the id of the input. Should match the slug used in a control if applicable.\n * @prop {string} name - The name of the input\n * @prop {string} placeholder - The placeholder attribute\n * @prop {string} minlength - The minlength attribute\n * @prop {string} maxlength - The maxlength attribute\n * @prop {string} min - The min attribute\n * @prop {string} max - The max attribute\n * @prop {string} step - The step attribute\n * @prop {string} autocomplete - The autocomplete attribute\n * @prop {string} pattern - The pattern attribute\n * @prop {string} inputmode - The input mode attribute\n * @prop {boolean} autofocus - The autofocus attribute\n * @prop {boolean} disabled - The disable attribute\n * @prop {boolean} readonly - The readonly attribute\n * @prop {boolean} required - The required attribute\n * @prop {string} type - The type of input\n * @prop {string} value - The input's value\n * @prop {boolean} invalid - States whether or not the input is invalid\n * @prop {string} status - The status of the input\n * @prop {boolean} validateOnBlur - Activates validation on blur\n * @prop {string} ariaAutoComplete - Aria Autocomplete\n * @prop {string} ariaControls - Aria Controls\n * @prop {string} ariaActiveDescendant - Aria Active Descendant\n * @prop {boolean} rounded - Displays rounded corners\n * @prop {boolean} filled - Displays a filled input box\n * @prop {string} iconRight - Custom Icon to the right of the input\n * @prop {string} iconLeft - Custom Icon to the left of the input\n * @prop {number} iconSize - Size of the icons\n * @prop {object} validity - The HTML5 validity object.\n * @prop {boolean} isPasswordVisible - Manages password visibility\n * @prop {string} inputType - Input Type of keypress handled through handleInput(e)\n * @prop {boolean} focused - Determines if the input is focused\n *\n * @csspart input\n *\n * @cssproperty --kemet-input-height - The height of the input.\n * @cssproperty --kemet-input-padding - The padding on the input.\n * @cssproperty --kemet-input-border - The border of the input.\n * @cssproperty --kemet-input-border-color-error -  The border of the error state.\n * @cssproperty --kemet-input-border-color-success - The border of the success state.\n * @cssproperty --kemet-input-border-color-warning - The border of the warning state.\n * @cssproperty --kemet-input-icon-left-padding - The icon-left padding.\n * @cssproperty --kemet-input-icon-right-padding - The icon-right padding.\n * @cssproperty --kemet-input-border-radius-rounded - The border radius on rounded.\n * @cssproperty --kemet-input-border-filled - The border on filled.\n * @cssproperty --kemet-input-color-filled - The color on filled.\n * @cssproperty --kemet-input-background-color-filled - The background-color on filled.\n * @cssproperty --kemet-input-background-color-error - The error state background color.\n * @cssproperty --kemet-input-background-color-success - The success state background color.\n * @cssproperty --kemet-input-background-color-warning - The warning state background color.\n *\n * @event kemet-input-focused - Fires when the input receives and loses focus\n * @event kemet-input-status Fires when there's a change in status. This event includes an object that reports: 1) the status. 2) HTML5 validity object. 3) the component element.\n * Use the validity object to support custom validation messages.\n * @event kemet-input-input - Fires when the input receives input\n *\n */\n\n@customElement('kemet-input')\nexport default class KemetInput extends LitElement {\n  /** @internal */\n  formSubmitController: FormSubmitController;\n\n  static styles = [stylesBase];\n\n  @property({ type: String })\n  slug: string;\n\n  @property({ type: String })\n  name: string = 'input';\n\n  @property({ type: String })\n  placeholder: string;\n\n  @property({ type: Number })\n  minlength: number;\n\n  @property({ type: Number })\n  maxlength: number;\n\n  @property({ type: String })\n  min: string;\n\n  @property({ type: String })\n  max: string;\n\n  @property({ type: Number })\n  step: number;\n\n  @property({ type: String })\n  autocomplete: TypeAutoComplete;\n\n  @property({ type: String })\n  pattern: string;\n\n  @property({ type: String })\n  inputmode: string;\n\n  @property({ type: Boolean })\n  autofocus: boolean;\n\n  @property({ type: Boolean, reflect: true })\n  disabled: boolean;\n\n  @property({ type: Boolean })\n  readonly: boolean;\n\n  @property({ type: Boolean, reflect: true })\n  required: boolean;\n\n  @property({ type: String })\n  type: string = 'text';\n\n  @property({ type: String, reflect: true })\n  value: string = '';\n\n  @property({ type: Boolean, reflect: true })\n  invalid: boolean;\n\n  @property({ type: String, reflect: true })\n  status: TypeStatus = 'standard';\n\n  @property({ type: Boolean, attribute: 'validate-on-blur' })\n  validateOnBlur: boolean = false;\n\n  @property({ type: String, attribute: 'aria-autocomplete' })\n  ariaAutoComplete: TypeAriaAutoComplete;\n\n  @property({ type: String, attribute: 'aria-controls' })\n  ariaControls: string;\n\n  @property({ type: String, attribute: 'aria-activedescendant' })\n  ariaActiveDescendant: string;\n\n  @property({ type: Boolean, reflect: true })\n  rounded: boolean;\n\n  @property({ type: Boolean, reflect: true })\n  filled: boolean;\n\n  @property({ type: String, reflect: true, attribute: 'icon-right' })\n  iconRight: string;\n\n  @property({ type: String, reflect: true, attribute: 'icon-left' })\n  iconLeft: string;\n\n  @property({ type: Number })\n  iconSize: number = 20;\n\n  @property({ type: Object })\n  validity: object;\n\n  @property({ type: Boolean })\n  isPasswordVisible: boolean = false;;\n\n  @property({ type: String })\n  inputType: string;\n\n  @property({ type: Boolean, reflect: true })\n  focused: boolean = false;\n\n  @state()\n  field: KemetFieldInterface;\n\n  @state()\n  form: HTMLFormElement;\n\n  @state()\n  input: HTMLInputElement;\n\n  constructor() {\n    super();\n\n    /** @internal */\n    this.formSubmitController = new FormSubmitController(this);\n  }\n\n  firstUpdated() {\n    // elements\n    this.input = this.shadowRoot.querySelector('input');\n    this.field = this.closest('kemet-field');\n    this.form = this.closest('form');\n    this.slug = this.field ? this.field.slug : 'input';\n\n    if (this.field) {\n      this.field.addEventListener('fmc-password-status', event => this.handleStatus(event));\n    }\n  }\n\n  render() {\n    return html`\n      <div>\n        ${this.makeIconLeft()}\n        <input\n          part=\"input\"\n          id=${this.slug}\n          name=${this.name}\n          placeholder=${ifDefined(this.placeholder)}\n          minlength=${ifDefined(this.minlength)}\n          maxlength=${ifDefined(this.maxlength)}\n          min=${ifDefined(this.min)}\n          max=${ifDefined(this.max)}\n          step=${ifDefined(this.step)}\n          autocomplete=${ifDefined(this.autocomplete)}\n          aria-autocomplete=${ifDefined(this.ariaAutoComplete)}\n          aria-controls=${ifDefined(this.ariaControls)}\n          aria-activedescendant=${ifDefined(this.ariaActiveDescendant)}\n          pattern=${ifDefined(this.pattern)}\n          inputmode=${ifDefined(this.inputmode)}\n          aria-invalid=${this.invalid ? 'true' : 'false'}\n          ?autofocus=${this.autofocus}\n          ?disabled=${this.disabled}\n          ?readonly=${this.readonly}\n          ?required=${this.required}\n          .type=\"${this.type === 'password' && this.isPasswordVisible ? 'text' : this.type}\"\n          .value=${live(this.value)}\n          @change=${this.handleChange}\n          @input=${this.handleInput}\n          @invalid=${this.handleInvalid}\n          @focus=${this.handleFocus}\n          @blur=${this.handleBlur}\n        />\n        ${this.makeIconRight()} ${this.makeIconClear()} ${this.makeVisibilityToggle()}\n      </div>\n    `;\n  }\n\n  /**\n   * Makes the right icon\n   * @private\n   * @returns {templateResult} A right icon\n   */\n  makeIconRight() {\n    if (this.iconRight) {\n      return html`\n        <kemet-icon class=\"right\" icon=\"${this.iconRight}\" size=\"${this.iconSize ? this.iconSize : 20}\"></kemet-icon>\n      `;\n    }\n\n    return null;\n  }\n\n  /**\n   * Makes the left icon\n   * @private\n   * @returns {templateResult} A left icon\n   */\n  makeIconLeft() {\n    if (this.iconLeft) {\n      return html`\n        <kemet-icon class=\"left\" icon=\"${this.iconLeft}\" size=\"${this.iconSize ? this.iconSize : 16}\"></kemet-icon>\n      `;\n    }\n\n    return null;\n  }\n\n  /**\n   * Makes a clear icon for search.\n   * @private\n   * @returns {templateResult} A search icon\n   */\n  makeIconClear() {\n    if (this.type === 'search' && this.value !== '') {\n      return html`\n        <kemet-icon class=\"search right\" icon=\"x-lg\" size=\"${this.iconSize}\" @click=${() => this.handleClear()}></kemet-icon>\n      `;\n    }\n\n    return null;\n  }\n\n  /**\n   * Makes a password visibility toggle button\n   * @returns {templateResult} A mask or unmask icon\n   */\n  makeVisibilityToggle() {\n    if (this.type === 'password') {\n      return html`<kemet-icon\n        class=\"eye right\"\n        icon=\"${this.setPasswordIcon()}\"\n        @click=${() => this.togglePasswordVisibility()}\n      ></kemet-icon>`;\n    }\n\n    return null;\n  }\n\n  setPasswordIcon() {\n    if (this.isPasswordVisible) {\n      return 'eye';\n    }\n\n    return 'eye-slash';\n  }\n\n  /**\n   * Handles when the input receives focus\n   * @private\n   */\n  handleFocus() {\n    this.focused = true;\n    emitEvent(this, 'kemet-input-focused', true);\n  }\n\n  /**\n   * Handles when the input loses focus\n   * @private\n   */\n  handleBlur() {\n    if (this.validateOnBlur && this.form && !this.form.noValidate) {\n      this.input?.checkValidity();\n      this.validity = this.input?.validity;\n    }\n\n    this.focused = false;\n    emitEvent(this, 'kemet-input-focused', false);\n  }\n\n  /**\n   * Handles when the input changes value\n   * @private\n   */\n  handleChange() {\n    this.value = this.input.value;\n\n    if (this.input.checkValidity() && this.checkLimitValidity() && this.status !== 'success') {\n      this.invalid = false;\n      this.status = 'standard';\n      this.validity = this.input.validity;\n\n      emitEvent(this, 'kemet-input-status', {\n        status: 'standard',\n        validity: this.input.validity,\n        element: this,\n      });\n    }\n  }\n\n  /**\n   * Handles when the input receives input\n   * @private\n   */\n  handleInput() {\n    this.value = this.input.value;\n    emitEvent(this, 'kemet-input-input', this.value);\n  }\n\n  /**\n   * Handles when the input has an error\n   * @private\n   */\n  handleInvalid() {\n    this.validity = this.input?.validity;\n\n    if (this.validateOnBlur) {\n      this.invalid = true;\n      this.status = 'error';\n\n      emitEvent(this, 'kemet-input-status', {\n        status: 'error',\n        validity: this.input?.validity,\n        element: this,\n      });\n    }\n  }\n\n  handleStatus(event) {\n    this.status = event.detail.status;\n  }\n\n  /**\n   * Toggles password visibility\n   * @private\n   */\n  togglePasswordVisibility() {\n    this.isPasswordVisible = !this.isPasswordVisible;\n  }\n\n  /**\n   * Handles the clear button for search\n   * @private\n   */\n  handleClear() {\n    this.value = '';\n    emitEvent(this, 'kemet-input-input', this.value);\n  }\n\n  /**\n   * Checks the validity of the character limit for the count component\n   * @private\n   * @returns {boolean}\n   */\n  checkLimitValidity() {\n    if (this.field) {\n      const count = this.field.querySelector('kemet-count');\n      if (count) {\n        return this.value.length < count.limit;\n      }\n    }\n\n    return true;\n  }\n\n  /**\n   * Checks the validity of the standard input\n   * @public\n   * @returns {boolean}\n   */\n  checkValidity() {\n    return this.input?.checkValidity();\n  }\n\n  /**\n   * Focuses the standard input\n   * @public\n   */\n  focus() {\n    this.input?.focus();\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-input': KemetInput\n  }\n}\n"]}
+{"version":3,"file":"kemet-input.js","sourceRoot":"","sources":["../../../src/components/kemet-input/kemet-input.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { live } from 'lit/directives/live.js';\nimport { FormSubmitController } from '../../utilities/controllers/forms';\nimport { emitEvent } from '../../utilities/misc/events';\nimport { KemetFieldInterface } from '../kemet-field/types';\nimport { stylesBase } from './styles';\nimport { TypeAriaAutoComplete, TypeAutoComplete, TypeStatus } from './types';\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-input\n * @summary An enhanced input element.\n *\n * @prop {string} slug - Used for the id of the input. Should match the slug used in a control if applicable.\n * @prop {string} name - The name of the input\n * @prop {string} placeholder - The placeholder attribute\n * @prop {string} minlength - The minlength attribute\n * @prop {string} maxlength - The maxlength attribute\n * @prop {string} min - The min attribute\n * @prop {string} max - The max attribute\n * @prop {string} step - The step attribute\n * @prop {string} autocomplete - The autocomplete attribute\n * @prop {string} pattern - The pattern attribute\n * @prop {string} inputmode - The input mode attribute\n * @prop {boolean} autofocus - The autofocus attribute\n * @prop {boolean} disabled - The disable attribute\n * @prop {boolean} readonly - The readonly attribute\n * @prop {boolean} required - The required attribute\n * @prop {string} type - The type of input\n * @prop {string} value - The input's value\n * @prop {boolean} invalid - States whether the input is invalid\n * @prop {string} status - The status of the input\n * @prop {boolean} validateOnBlur - Activates validation on blur\n * @prop {string} ariaAutoComplete - Aria Autocomplete\n * @prop {string} ariaControls - Aria Controls\n * @prop {string} ariaActiveDescendant - Aria Active Descendant\n * @prop {boolean} rounded - Displays rounded corners\n * @prop {boolean} filled - Displays a filled input box\n * @prop {string} iconRight - Custom Icon to the right of the input\n * @prop {string} iconLeft - Custom Icon to the left of the input\n * @prop {number} iconSize - Size of the icons\n * @prop {object} validity - The HTML5 validity object.\n * @prop {boolean} isPasswordVisible - Manages password visibility\n * @prop {string} inputType - Input Type of keypress handled through handleInput(e)\n * @prop {boolean} focused - Determines if the input is focused\n *\n * @csspart input\n *\n * @cssproperty --kemet-input-height - The height of the input.\n * @cssproperty --kemet-input-padding - The padding on the input.\n * @cssproperty --kemet-input-border - The border of the input.\n * @cssproperty --kemet-input-border-color-error -  The border of the error state.\n * @cssproperty --kemet-input-border-color-success - The border of the success state.\n * @cssproperty --kemet-input-border-color-warning - The border of the warning state.\n * @cssproperty --kemet-input-icon-left-padding - The icon-left padding.\n * @cssproperty --kemet-input-icon-right-padding - The icon-right padding.\n * @cssproperty --kemet-input-border-radius-rounded - The border radius on rounded.\n * @cssproperty --kemet-input-border-filled - The border on filled.\n * @cssproperty --kemet-input-color-filled - The color on filled.\n * @cssproperty --kemet-input-background-color-filled - The background-color on filled.\n * @cssproperty --kemet-input-background-color-error - The error state background color.\n * @cssproperty --kemet-input-background-color-success - The success state background color.\n * @cssproperty --kemet-input-background-color-warning - The warning state background color.\n *\n * @event kemet-input-focused - Fires when the input receives and loses focus\n * @event kemet-input-status Fires when there's a change in status. This event includes an object that reports: 1) the status. 2) HTML5 validity object. 3) the component element.\n * Use the validity object to support custom validation messages.\n * @event kemet-input-input - Fires when the input receives input\n *\n */\n\n@customElement('kemet-input')\nexport default class KemetInput extends LitElement {\n  /** @internal */\n  formSubmitController: FormSubmitController;\n\n  static styles = [stylesBase];\n\n  @property({ type: String })\n  slug: string;\n\n  @property({ type: String })\n  name: string = 'input';\n\n  @property({ type: String })\n  placeholder: string;\n\n  @property({ type: Number })\n  minlength: number;\n\n  @property({ type: Number })\n  maxlength: number;\n\n  @property({ type: String })\n  min: string;\n\n  @property({ type: String })\n  max: string;\n\n  @property({ type: Number })\n  step: number;\n\n  @property({ type: String })\n  autocomplete: TypeAutoComplete;\n\n  @property({ type: String })\n  pattern: string;\n\n  @property({ type: String })\n  inputmode: string;\n\n  @property({ type: Boolean })\n  autofocus: boolean;\n\n  @property({ type: Boolean, reflect: true })\n  disabled: boolean;\n\n  @property({ type: Boolean })\n  readonly: boolean;\n\n  @property({ type: Boolean, reflect: true })\n  required: boolean;\n\n  @property({ type: String })\n  type: string = 'text';\n\n  @property({ type: String, reflect: true })\n  value: string = '';\n\n  @property({ type: Boolean, reflect: true })\n  invalid: boolean;\n\n  @property({ type: String, reflect: true })\n  status: TypeStatus = 'standard';\n\n  @property({ type: Boolean, attribute: 'validate-on-blur' })\n  validateOnBlur: boolean = false;\n\n  @property({ type: String, attribute: 'aria-autocomplete' })\n  ariaAutoComplete: TypeAriaAutoComplete;\n\n  @property({ type: String, attribute: 'aria-controls' })\n  ariaControls: string;\n\n  @property({ type: String, attribute: 'aria-activedescendant' })\n  ariaActiveDescendant: string;\n\n  @property({ type: Boolean, reflect: true })\n  rounded: boolean;\n\n  @property({ type: Boolean, reflect: true })\n  filled: boolean;\n\n  @property({ type: String, reflect: true, attribute: 'icon-right' })\n  iconRight: string;\n\n  @property({ type: String, reflect: true, attribute: 'icon-left' })\n  iconLeft: string;\n\n  @property({ type: Number })\n  iconSize: number = 20;\n\n  @property({ type: Object })\n  validity: object;\n\n  @property({ type: Boolean })\n  isPasswordVisible: boolean = false;\n\n  @property({ type: String })\n  inputType: string;\n\n  @property({ type: Boolean, reflect: true })\n  focused: boolean = false;\n\n  @state()\n  field: KemetFieldInterface;\n\n  @state()\n  form: HTMLFormElement;\n\n  @state()\n  input: HTMLInputElement;\n\n  constructor() {\n    super();\n\n    /** @internal */\n    this.formSubmitController = new FormSubmitController(this);\n  }\n\n  firstUpdated() {\n    // elements\n    this.input = this.shadowRoot.querySelector('input');\n    this.field = this.closest('kemet-field');\n    this.form = this.closest('form');\n    this.slug = this.field ? this.field.slug : 'input';\n\n    if (this.field) {\n      this.field.addEventListener('kemet-password-status', (event: CustomEvent) => this.handleStatus(event));\n    }\n  }\n\n  render() {\n    return html`\n      <div>\n        ${this.makeIconLeft()}\n        <input\n          part=\"input\"\n          id=${this.slug}\n          name=${this.name}\n          placeholder=${ifDefined(this.placeholder)}\n          minlength=${ifDefined(this.minlength)}\n          maxlength=${ifDefined(this.maxlength)}\n          min=${ifDefined(this.min)}\n          max=${ifDefined(this.max)}\n          step=${ifDefined(this.step)}\n          autocomplete=${ifDefined(this.autocomplete)}\n          aria-autocomplete=${ifDefined(this.ariaAutoComplete)}\n          aria-controls=${ifDefined(this.ariaControls)}\n          aria-activedescendant=${ifDefined(this.ariaActiveDescendant)}\n          pattern=${ifDefined(this.pattern)}\n          inputmode=${ifDefined(this.inputmode)}\n          aria-invalid=${this.invalid ? 'true' : 'false'}\n          ?autofocus=${this.autofocus}\n          ?disabled=${this.disabled}\n          ?readonly=${this.readonly}\n          ?required=${this.required}\n          .type=\"${this.type === 'password' && this.isPasswordVisible ? 'text' : this.type}\"\n          .value=${live(this.value)}\n          @change=${this.handleChange}\n          @input=${this.handleInput}\n          @invalid=${this.handleInvalid}\n          @focus=${this.handleFocus}\n          @blur=${this.handleBlur}\n        />\n        ${this.makeIconRight()} ${this.makeIconClear()} ${this.makeVisibilityToggle()}\n      </div>\n    `;\n  }\n\n  makeIconRight() {\n    if (this.iconRight) {\n      return html`\n        <kemet-icon class=\"right\" icon=\"${this.iconRight}\" size=\"${this.iconSize ? this.iconSize : 20}\"></kemet-icon>\n      `;\n    }\n\n    return null;\n  }\n\n  makeIconLeft() {\n    if (this.iconLeft) {\n      return html`\n        <kemet-icon class=\"left\" icon=\"${this.iconLeft}\" size=\"${this.iconSize ? this.iconSize : 16}\"></kemet-icon>\n      `;\n    }\n\n    return null;\n  }\n\n  makeIconClear() {\n    if (this.type === 'search' && this.value !== '') {\n      return html`\n        <kemet-icon class=\"search right\" icon=\"x-lg\" size=\"${this.iconSize}\" @click=${() => this.handleClear()}></kemet-icon>\n      `;\n    }\n\n    return null;\n  }\n\n  makeVisibilityToggle() {\n    if (this.type === 'password') {\n      return html`<kemet-icon\n        class=\"eye right\"\n        icon=\"${this.setPasswordIcon()}\"\n        @click=${() => this.togglePasswordVisibility()}\n      ></kemet-icon>`;\n    }\n\n    return null;\n  }\n\n  setPasswordIcon() {\n    if (this.isPasswordVisible) {\n      return 'eye';\n    }\n\n    return 'eye-slash';\n  }\n\n  /**\n   * Handles when the input receives focus\n   * @private\n   */\n  handleFocus() {\n    this.focused = true;\n    emitEvent(this, 'kemet-input-focused', true);\n  }\n\n  /**\n   * Handles when the input loses focus\n   * @private\n   */\n  handleBlur() {\n    if (this.validateOnBlur && this.form && !this.form.noValidate) {\n      this.input?.checkValidity();\n      this.validity = this.input?.validity;\n    }\n\n    this.focused = false;\n    emitEvent(this, 'kemet-input-focused', false);\n  }\n\n  /**\n   * Handles when the input changes value\n   * @private\n   */\n  handleChange() {\n    this.value = this.input.value;\n\n    if (this.input.checkValidity() && this.checkLimitValidity() && this.status !== 'success') {\n      this.invalid = false;\n      this.status = 'standard';\n      this.validity = this.input.validity;\n\n      emitEvent(this, 'kemet-input-status', {\n        status: 'standard',\n        validity: this.input.validity,\n        element: this,\n      });\n    }\n  }\n\n  /**\n   * Handles when the input receives input\n   * @private\n   */\n  handleInput() {\n    this.value = this.input.value;\n    emitEvent(this, 'kemet-input-input', this.value);\n  }\n\n  /**\n   * Handles when the input has an error\n   * @private\n   */\n  handleInvalid() {\n    this.validity = this.input?.validity;\n\n    if (this.validateOnBlur) {\n      this.invalid = true;\n      this.status = 'error';\n\n      emitEvent(this, 'kemet-input-status', {\n        status: 'error',\n        validity: this.input?.validity,\n        element: this,\n      });\n    }\n  }\n\n  handleStatus(event: CustomEvent) {\n    this.status = event.detail.status;\n  }\n\n  /**\n   * Toggles password visibility\n   * @private\n   */\n  togglePasswordVisibility() {\n    this.isPasswordVisible = !this.isPasswordVisible;\n  }\n\n  /**\n   * Handles the clear button for search\n   * @private\n   */\n  handleClear() {\n    this.value = '';\n    emitEvent(this, 'kemet-input-input', this.value);\n  }\n\n  /**\n   * Checks the validity of the character limit for the count component\n   * @public\n   * @returns {boolean}\n   */\n  checkLimitValidity(): boolean {\n    if (this.field) {\n      const count = this.field.querySelector('kemet-count');\n      if (count) {\n        return this.value.length < count.limit;\n      }\n    }\n\n    return true;\n  }\n\n  /**\n   * Checks the validity of the standard input\n   * @public\n   * @returns {boolean}\n   */\n  checkValidity(): boolean {\n    return this.input?.checkValidity();\n  }\n\n  /**\n   * Focuses the standard input\n   * @public\n   */\n  focus() {\n    this.input?.focus();\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-input': KemetInput\n  }\n}\n"]}

package/dist/components/kemet-input/spec.d.ts

@@ -0,0 +1 @@
+import './kemet-input';

package/dist/components/kemet-input/spec.js

@@ -0,0 +1,83 @@
+import { html, render } from 'lit';
+import { expect } from '@wdio/globals';
+import userEvent from '@testing-library/user-event';
+import { fireEvent, waitFor } from '@testing-library/dom';
+import './kemet-input';
+describe('Input', () => {
+    const templates = {
+        default: html `<kemet-input></kemet-input>`,
+        disabled: html `<kemet-input disabled></kemet-input>`,
+        search: html `<kemet-input type="search"></kemet-input>`,
+        icons: html `<kemet-input icon-left="chevron-left" icon-right="chevron-right"></kemet-input>`,
+        validateImmediately: html `<kemet-input required validate-on-blur pattern="^[a-zA-Z0-9]*$"></kemet-input>`,
+        password: html `
+      <kemet-field slug="field" label="Password">
+        <kemet-input type="password" pattern="^[a-zA-Z0-9]*$" required validate-on-blur placeholder="Password"></kemet-input>
+      </kemet-field>
+    `,
+    };
+    it('handles changes to the input properly', async () => {
+        render(templates.default, document.body);
+        const kemetInput = document.querySelector('kemet-input');
+        await waitFor(async () => {
+            const input = kemetInput.shadowRoot.querySelector('input');
+            // TODO figure out why useEvent is not generating code coverage
+            fireEvent.change(input, { target: { value: 'test' } });
+            fireEvent.blur(input);
+            expect(kemetInput.status).toBe('standard');
+        });
+    });
+    it('focuses correctly', async () => {
+        render(templates.default, document.body);
+        const kemetInput = document.querySelector('kemet-input');
+        await waitFor(async () => {
+            kemetInput.focus();
+            fireEvent.focus(kemetInput.shadowRoot.querySelector('input'));
+            expect(kemetInput.focused).toBe(true);
+        });
+    });
+    it('renders a left and right icon', async () => {
+        render(templates.icons, document.body);
+    });
+    it('should not set a value when user types into a disabled field', async () => {
+        render(templates.disabled, document.body);
+        const kemetInput = document.querySelector('kemet-input');
+        await waitFor(async () => {
+            await userEvent.type(kemetInput.shadowRoot.querySelector('input'), 'random text');
+            await userEvent.click(document.body);
+            expect(kemetInput.value).toBeFalsy();
+        });
+    });
+    it('should error on blur when validate-on-blur is set and invalid value is entered', async () => {
+        render(templates.validateImmediately, document.body);
+        const kemetInput = document.querySelector('kemet-input');
+        await waitFor(async () => {
+            const input = kemetInput.shadowRoot.querySelector('input');
+            fireEvent.change(input, 'te$t');
+            fireEvent.blur(input);
+            expect(kemetInput.status).toBe('error');
+        });
+    });
+    it('should display a visibility icon and toggle it on a password input', async () => {
+        render(templates.password, document.body);
+        const passwordInput = document.querySelector('[type="password"]');
+        await waitFor(async () => {
+            const visibilityIcon = passwordInput.shadowRoot.querySelector('kemet-icon');
+            if (visibilityIcon)
+                await userEvent.click(visibilityIcon);
+            expect(visibilityIcon.getAttribute('icon')).toBe('eye');
+        });
+    });
+    it('should clear user text when close button is clicked on search type', async () => {
+        render(templates.search, document.body);
+        const kemetInput = document.querySelector('kemet-input');
+        await waitFor(async () => {
+            await userEvent.type(kemetInput.shadowRoot.querySelector('input'), 'random text');
+            expect(kemetInput.value).toBe('random text');
+            const closeIcon = kemetInput.shadowRoot.querySelector('kemet-icon');
+            await userEvent.click(closeIcon);
+            expect(kemetInput.value).toBe('');
+        });
+    });
+});
+//# sourceMappingURL=spec.js.map

package/dist/components/kemet-input/spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"spec.js","sourceRoot":"","sources":["../../../src/components/kemet-input/spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, render } from 'lit';\nimport { expect } from '@wdio/globals';\nimport userEvent from '@testing-library/user-event';\nimport { fireEvent, waitFor } from '@testing-library/dom';\n\nimport KemetIcon from '../kemet-icon/kemet-icon';\nimport './kemet-input';\n\ndescribe('Input', () => {\n  const templates = {\n    default: html`<kemet-input></kemet-input>`,\n    disabled: html`<kemet-input disabled></kemet-input>`,\n    search: html`<kemet-input type=\"search\"></kemet-input>`,\n    icons: html`<kemet-input icon-left=\"chevron-left\" icon-right=\"chevron-right\"></kemet-input>`,\n    validateImmediately: html`<kemet-input required validate-on-blur pattern=\"^[a-zA-Z0-9]*$\"></kemet-input>`,\n    password: html`\n      <kemet-field slug=\"field\" label=\"Password\">\n        <kemet-input type=\"password\" pattern=\"^[a-zA-Z0-9]*$\" required validate-on-blur placeholder=\"Password\"></kemet-input>\n      </kemet-field>\n    `,\n  };\n\n  it('handles changes to the input properly', async () => {\n    render(templates.default, document.body);\n    const kemetInput = document.querySelector('kemet-input');\n\n    await waitFor(async () => {\n      const input = kemetInput.shadowRoot.querySelector('input');\n      // TODO figure out why useEvent is not generating code coverage\n      fireEvent.change(input, { target: { value: 'test' } });\n      fireEvent.blur(input);\n      expect(kemetInput.status).toBe('standard');\n    });\n  });\n\n  it('focuses correctly', async () => {\n    render(templates.default, document.body);\n    const kemetInput = document.querySelector('kemet-input');\n\n    await waitFor(async () => {\n      kemetInput.focus();\n      fireEvent.focus(kemetInput.shadowRoot.querySelector('input'));\n      expect(kemetInput.focused).toBe(true);\n    });\n  });\n\n  it('renders a left and right icon', async () => {\n    render(templates.icons, document.body);\n  });\n\n  it('should not set a value when user types into a disabled field', async () => {\n    render(templates.disabled, document.body);\n    const kemetInput = document.querySelector('kemet-input');\n\n    await waitFor(async () => {\n      await userEvent.type(kemetInput.shadowRoot.querySelector('input'), 'random text');\n      await userEvent.click(document.body);\n      expect(kemetInput.value).toBeFalsy();\n    });\n  });\n\n  it('should error on blur when validate-on-blur is set and invalid value is entered', async () => {\n    render(templates.validateImmediately, document.body);\n    const kemetInput = document.querySelector('kemet-input');\n\n    await waitFor(async () => {\n      const input = kemetInput.shadowRoot.querySelector('input');\n      fireEvent.change(input, 'te$t');\n      fireEvent.blur(input);\n      expect(kemetInput.status).toBe('error');\n    });\n  });\n\n  it('should display a visibility icon and toggle it on a password input', async () => {\n    render(templates.password, document.body);\n    const passwordInput = document.querySelector('[type=\"password\"]');\n\n    await waitFor(async () => {\n      const visibilityIcon = passwordInput.shadowRoot.querySelector('kemet-icon') as KemetIcon;\n      if (visibilityIcon) await userEvent.click(visibilityIcon);\n      expect(visibilityIcon.getAttribute('icon')).toBe('eye');\n    });\n  });\n\n  it('should clear user text when close button is clicked on search type', async () => {\n    render(templates.search, document.body);\n    const kemetInput = document.querySelector('kemet-input');\n\n    await waitFor(async () => {\n      await userEvent.type(kemetInput.shadowRoot.querySelector('input'), 'random text');\n      expect(kemetInput.value).toBe('random text');\n      const closeIcon = kemetInput.shadowRoot.querySelector('kemet-icon') as KemetIcon;\n      await userEvent.click(closeIcon);\n      expect(kemetInput.value).toBe('');\n    });\n  });\n});\n"]}

package/dist/components/kemet-input/types.d.ts

@@ -1,6 +1,6 @@
-export declare type TypeStatus = 'standard' | 'error' | 'success' | 'warning';
-export declare type TypeAriaAutoComplete = 'inline' | 'list' | 'both' | 'none';
-export declare type TypeAutoComplete = 'on' | 'off' | 'additional-name' | 'address-level1' | 'address-level2' | 'address-level3' | 'address-level4' | 'address-line1' | 'address-line2' | 'address-line3' | 'bday' | 'bday-year' | 'bday-day' | 'bday-month' | 'billing' | 'cc-additional-name';
+export type TypeStatus = 'standard' | 'error' | 'success' | 'warning';
+export type TypeAriaAutoComplete = 'inline' | 'list' | 'both' | 'none';
+export type TypeAutoComplete = 'on' | 'off' | 'additional-name' | 'address-level1' | 'address-level2' | 'address-level3' | 'address-level4' | 'address-line1' | 'address-line2' | 'address-line3' | 'bday' | 'bday-year' | 'bday-day' | 'bday-month' | 'billing' | 'cc-additional-name';
 export interface KemetInputInterface extends HTMLElement {
     slug?: string;
     name?: string;

package/dist/components/kemet-modal/docs/stories.d.ts

@@ -7,6 +7,6 @@ import '../../kemet-tabs/kemet-tab-panel';
 import '../../kemet-button/kemet-button';
 declare const meta: Meta;
 export default meta;
-declare type Story = StoryObj;
+type Story = StoryObj;
 export declare const Standard: Story;
 export declare const Rounded: Story;

package/dist/components/kemet-modal/docs/stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../../src/components/kemet-modal/docs/stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAA;AAIxD,OAAO,gBAAgB,CAAC;AACxB,OAAO,sBAAsB,CAAC;AAE9B,OAAO,6BAA6B,CAAC;AACrC,OAAO,4BAA4B,CAAC;AACpC,OAAO,kCAAkC,CAAC;AAC1C,OAAO,iCAAiC,CAAC;AAEzC,MAAM,IAAI,GAAS;IACjB,KAAK,EAAE,oBAAoB;IAC3B,SAAS,EAAE,aAAa;IACxB,IAAI,EAAE;QACJ,eAAe,EAAE,IAAI;KACtB;IACD,QAAQ,EAAE;QACR,MAAM,EAAE;YACN,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,OAAO,EAAE,CAAC,gBAAgB,EAAE,aAAa,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,EAAE,WAAW,EAAE,iBAAiB,EAAE,eAAe,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,EAAE,eAAe,EAAE,aAAa,CAAC;SACpM;KACF;CACF,CAAC;AACF,eAAe,IAAI,CAAC;AAIpB,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE;IACxB,MAAM,SAAS,GAAG,GAAG,EAAE;QACrB,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC;QACpD,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC;IACtB,CAAC,CAAC;IAEF,MAAM,YAAY,GAAG,CAAC,OAAO,EAAE,EAAE;QAC/B,IAAI,OAAO,EAAE;YACX,OAAO,IAAI,CAAA;;;;OAIV,CAAC;SACH;QAED,OAAO,IAAI,CAAC;IACd,CAAC,CAAC;IAEF,OAAO,IAAI,CAAA;4BACe,GAAG,EAAE,CAAC,SAAS,EAAE;2BAClB,IAAI,CAAC,MAAM,aAAa,IAAI,CAAC,OAAO,YAAY,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,sBAAsB,IAAI,CAAC,YAAY;;UAE9H,YAAY,CAAC,IAAI,CAAC,eAAe,CAAC;;;;;GAKzC,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC;CACjC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC;IAChC,IAAI,EAAE;QACJ,OAAO,EAAE,IAAI;KACd;CACF,CAAC","sourcesContent":["import { html } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport type { Meta, StoryObj } from '@storybook/web-components';\nimport { TypeEffect } from '../types';\n\nimport '../kemet-modal';\nimport '../kemet-modal-close';\n\nimport '../../kemet-tabs/kemet-tabs';\nimport '../../kemet-tabs/kemet-tab';\nimport '../../kemet-tabs/kemet-tab-panel';\nimport '../../kemet-button/kemet-button';\n\nconst meta: Meta = {\n  title: 'Components / Modal',\n  component: 'kemet-modal',\n  args: {\n    displayCloseBtn: true,\n  },\n  argTypes: {\n    effect: {\n      control: { type: 'select' },\n      options: ['fadein-scaleup', 'slide-right', 'slide-bottom', 'newspaper', 'fall', 'side-fall', 'flip-horizontal', 'flip-vertical', 'sign-3d', 'super-scaled', 'slit', 'rotate-bottom', 'rotate-left'],\n    },\n  },\n};\nexport default meta;\n\ntype Story = StoryObj;\n\nconst Template = (args) => {\n  const openModal = () => {\n    const modal = document.querySelector('kemet-modal');\n    modal.opened = true;\n  };\n\n  const makeCloseBtn = (display) => {\n    if (display) {\n      return html`\n        <kemet-modal-close tabindex=\"0\" role=\"button\" aria-label=\"Close Button\" style=\"display:flex;\">\n          <kemet-icon icon=\"x-circle\" size=\"24\" kemet-background-color=\"white\" kemet-border-radius=\"circle\"></kemet-icon>\n        </kemet-modal-close>\n      `;\n    }\n\n    return null;\n  };\n\n  return html`\n    <kemet-button @click=\"${() => openModal()}\">Open Modal</kemet-button>\n    <kemet-modal ?opened=${args.opened} ?rounded=${args.rounded} effect=\"${ifDefined(args.effect)}\" ?close-on-click=\"${args.closeOnClick}\">\n      <div kemet-padding=\"xl\">\n        ${makeCloseBtn(args.displayCloseBtn)}\n        <h2 kemet-margin=\"none\">Modal Title</h2>\n        <p>Your modal contents <a href=\"http://google.com\" kemet-color=\"primary\"><strong>here</strong></a>.</p>\n      </div>\n    </kemet-modal>\n  `;\n};\n\nexport const Standard: Story = {\n  render: (args) => Template(args),\n};\n\nexport const Rounded: Story = {\n  render: (args) => Template(args),\n  args: {\n    rounded: true\n  }\n};\n"]}
+{"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../../src/components/kemet-modal/docs/stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAA;AAIxD,OAAO,gBAAgB,CAAC;AACxB,OAAO,sBAAsB,CAAC;AAE9B,OAAO,6BAA6B,CAAC;AACrC,OAAO,4BAA4B,CAAC;AACpC,OAAO,kCAAkC,CAAC;AAC1C,OAAO,iCAAiC,CAAC;AAEzC,MAAM,IAAI,GAAS;IACjB,KAAK,EAAE,oBAAoB;IAC3B,SAAS,EAAE,aAAa;IACxB,IAAI,EAAE;QACJ,eAAe,EAAE,IAAI;KACtB;IACD,QAAQ,EAAE;QACR,MAAM,EAAE;YACN,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,OAAO,EAAE,CAAC,gBAAgB,EAAE,aAAa,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,EAAE,WAAW,EAAE,iBAAiB,EAAE,eAAe,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,EAAE,eAAe,EAAE,aAAa,CAAC;SACpM;KACF;CACF,CAAC;AACF,eAAe,IAAI,CAAC;AAIpB,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE;IACxB,MAAM,SAAS,GAAG,GAAG,EAAE;QACrB,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC;QACpD,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC;IACtB,CAAC,CAAC;IAEF,MAAM,YAAY,GAAG,CAAC,OAAO,EAAE,EAAE;QAC/B,IAAI,OAAO,EAAE,CAAC;YACZ,OAAO,IAAI,CAAA;;;;OAIV,CAAC;QACJ,CAAC;QAED,OAAO,IAAI,CAAC;IACd,CAAC,CAAC;IAEF,OAAO,IAAI,CAAA;4BACe,GAAG,EAAE,CAAC,SAAS,EAAE;2BAClB,IAAI,CAAC,MAAM,aAAa,IAAI,CAAC,OAAO,YAAY,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,sBAAsB,IAAI,CAAC,YAAY;;UAE9H,YAAY,CAAC,IAAI,CAAC,eAAe,CAAC;;;;;GAKzC,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC;CACjC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC;IAChC,IAAI,EAAE;QACJ,OAAO,EAAE,IAAI;KACd;CACF,CAAC","sourcesContent":["import { html } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport type { Meta, StoryObj } from '@storybook/web-components';\nimport { TypeEffect } from '../types';\n\nimport '../kemet-modal';\nimport '../kemet-modal-close';\n\nimport '../../kemet-tabs/kemet-tabs';\nimport '../../kemet-tabs/kemet-tab';\nimport '../../kemet-tabs/kemet-tab-panel';\nimport '../../kemet-button/kemet-button';\n\nconst meta: Meta = {\n  title: 'Components / Modal',\n  component: 'kemet-modal',\n  args: {\n    displayCloseBtn: true,\n  },\n  argTypes: {\n    effect: {\n      control: { type: 'select' },\n      options: ['fadein-scaleup', 'slide-right', 'slide-bottom', 'newspaper', 'fall', 'side-fall', 'flip-horizontal', 'flip-vertical', 'sign-3d', 'super-scaled', 'slit', 'rotate-bottom', 'rotate-left'],\n    },\n  },\n};\nexport default meta;\n\ntype Story = StoryObj;\n\nconst Template = (args) => {\n  const openModal = () => {\n    const modal = document.querySelector('kemet-modal');\n    modal.opened = true;\n  };\n\n  const makeCloseBtn = (display) => {\n    if (display) {\n      return html`\n        <kemet-modal-close tabindex=\"0\" role=\"button\" aria-label=\"Close Button\" style=\"display:flex;\">\n          <kemet-icon icon=\"x-circle\" size=\"24\" kemet-background-color=\"white\" kemet-border-radius=\"circle\"></kemet-icon>\n        </kemet-modal-close>\n      `;\n    }\n\n    return null;\n  };\n\n  return html`\n    <kemet-button @click=\"${() => openModal()}\">Open Modal</kemet-button>\n    <kemet-modal ?opened=${args.opened} ?rounded=${args.rounded} effect=\"${ifDefined(args.effect)}\" ?close-on-click=\"${args.closeOnClick}\">\n      <div kemet-padding=\"xl\">\n        ${makeCloseBtn(args.displayCloseBtn)}\n        <h2 kemet-margin=\"none\">Modal Title</h2>\n        <p>Your modal contents <a href=\"http://google.com\" kemet-color=\"primary\"><strong>here</strong></a>.</p>\n      </div>\n    </kemet-modal>\n  `;\n};\n\nexport const Standard: Story = {\n  render: (args) => Template(args),\n};\n\nexport const Rounded: Story = {\n  render: (args) => Template(args),\n  args: {\n    rounded: true\n  }\n};\n"]}

package/dist/components/kemet-modal/kemet-modal-close.js.map

@@ -1 +1 @@
-{"version":3,"file":"kemet-modal-close.js","sourceRoot":"","sources":["../../../src/components/kemet-modal/kemet-modal-close.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AAExD;;;;;;;;;GASG;AAGH,IAAqB,eAAe,GAApC,MAAqB,eAAgB,SAAQ,UAAU;IAarD,MAAM;QACJ,OAAO,IAAI,CAAA;qBACM,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,EAAE,WAAW,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,EAAE;KAC/D,CAAC;IACJ,CAAC;IAED,KAAK;QACH,SAAS,CAAC,IAAI,EAAE,2BAA2B,EAAE,IAAI,CAAC,CAAC;IACrD,CAAC;CACF,CAAA;AArBQ,sBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;KAQF;CACF,CAAC;AAXiB,eAAe;IADnC,aAAa,CAAC,mBAAmB,CAAC;GACd,eAAe,CAsBnC;eAtBoB,eAAe","sourcesContent":["import { css, html, LitElement } from 'lit';\nimport { customElement } from 'lit/decorators.js';\nimport { emitEvent } from '../../utilities/misc/events';\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-modal-close\n * @summary A close button for a modal.\n *\n * @event kemet-modal-close-pressed - Fires when the close button is pressed\n *\n */\n\n@customElement('kemet-modal-close')\nexport default class KemetModalClose extends LitElement {\n  static styles = [\n    css`\n      :host {\n        position: absolute;\n        top: 0.5rem;\n        right: 0.5rem;\n        border-radius: var(--kemet-border-radius-circle);\n        cursor: pointer;\n      }\n    `,\n  ];\n\n  render() {\n    return html`\n      <slot @keyup=${() => this.close()} @click=${() => this.close()}></slot>\n    `;\n  }\n\n  close() {\n    emitEvent(this, 'kemet-modal-close-pressed', this);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-modal-close': KemetModalClose\n  }\n}\n"]}
+{"version":3,"file":"kemet-modal-close.js","sourceRoot":"","sources":["../../../src/components/kemet-modal/kemet-modal-close.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AAExD;;;;;;;;;GASG;AAGY,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,UAAU;IAarD,MAAM;QACJ,OAAO,IAAI,CAAA;qBACM,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,EAAE,WAAW,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,EAAE;KAC/D,CAAC;IACJ,CAAC;IAED,KAAK;QACH,SAAS,CAAC,IAAI,EAAE,2BAA2B,EAAE,IAAI,CAAC,CAAC;IACrD,CAAC;;AApBM,sBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;KAQF;CACF,AAVY,CAUX;AAXiB,eAAe;IADnC,aAAa,CAAC,mBAAmB,CAAC;GACd,eAAe,CAsBnC;eAtBoB,eAAe","sourcesContent":["import { css, html, LitElement } from 'lit';\nimport { customElement } from 'lit/decorators.js';\nimport { emitEvent } from '../../utilities/misc/events';\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-modal-close\n * @summary A close button for a modal.\n *\n * @event kemet-modal-close-pressed - Fires when the close button is pressed\n *\n */\n\n@customElement('kemet-modal-close')\nexport default class KemetModalClose extends LitElement {\n  static styles = [\n    css`\n      :host {\n        position: absolute;\n        top: 0.5rem;\n        right: 0.5rem;\n        border-radius: var(--kemet-border-radius-circle);\n        cursor: pointer;\n      }\n    `,\n  ];\n\n  render() {\n    return html`\n      <slot @keyup=${() => this.close()} @click=${() => this.close()}></slot>\n    `;\n  }\n\n  close() {\n    emitEvent(this, 'kemet-modal-close-pressed', this);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-modal-close': KemetModalClose\n  }\n}\n"]}

package/dist/components/kemet-modal/kemet-modal.d.ts

@@ -5,7 +5,7 @@ import { TypeEffect } from './types';
  * @status stable
  *
  * @tagname kemet-modal
- * @summary A dialog that has many built in effects and flexible styles.
+ * @summary A dialog that has many built-in effects and flexible styles.
  *
  * @prop {boolean} opened
  * @prop {string} effect
@@ -42,15 +42,15 @@ export default class KemetModal extends LitElement {
     /** @internal */
     focusableSelector: string;
     /** @internal */
-    focusableElements: any;
+    focusableElements: NodeListOf<Element>;
     constructor();
     firstUpdated(): void;
-    updated(prevProps: any): void;
+    updated(prevProps: Map<string, never>): void;
     render(): import("lit-html").TemplateResult<1>;
     isMobile(): void;
     handleOpen(): void;
     handleClose(): void;
-    handleFocusableDown(event: any): void;
+    handleFocusableDown(event: KeyboardEvent): void;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/components/kemet-modal/kemet-modal.js

@@ -1,6 +1,6 @@
 import { __decorate } from "tslib";
 import { html, LitElement } from 'lit';
-import { customElement, property, query, state } from 'lit/decorators.js';
+import { customElement, property, query, state, } from 'lit/decorators.js';
 import { stylesBase, stylesEffects } from './styles';
 import { emitEvent } from '../../utilities/misc/events';
 /**
@@ -8,7 +8,7 @@ import { emitEvent } from '../../utilities/misc/events';
  * @status stable
  *
  * @tagname kemet-modal
- * @summary A dialog that has many built in effects and flexible styles.
+ * @summary A dialog that has many built-in effects and flexible styles.
  *
  * @prop {boolean} opened
  * @prop {string} effect
@@ -62,7 +62,7 @@ let KemetModal = class KemetModal extends LitElement {
             this.isMobile();
         });
         this.focusableElements.forEach((element) => {
-            element.addEventListener('keydown', event => this.handleFocusableDown(event));
+            element.addEventListener('keydown', (event) => this.handleFocusableDown(event));
         });
     }
     updated(prevProps) {