kemet-ui 3.1.0 → 4.0.0

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

@@ -1,193 +0,0 @@
-import { __decorate } from "tslib";
-import { html, LitElement } from 'lit';
-import { customElement, property, query, state, } from 'lit/decorators.js';
-import { live } from 'lit/directives/live.js';
-import { stylesBase } from './styles';
-import { emitEvent } from '../../utilities/misc/events';
-/**
- * @since 3.1.0
- * @status stable
- *
- * @tagname kemet-multi-input
- * @summary An input element that accepts multiple items from a combo.
- *
- * @prop {string} slug - Used for the id of the input. Should match the slug used in a control if applicable.
- * @prop {string} name - The name of the input
- * @prop {string} placeholder - The placeholder attribute
- * @prop {string} minlength - The minlength attribute
- * @prop {string} maxlength - The maxlength attribute
- * @prop {string} min - The min attribute
- * @prop {string} max - The max attribute
- * @prop {string} step - The step attribute
- * @prop {string} autocomplete - The autocomplete attribute
- * @prop {string} pattern - The pattern attribute
- * @prop {string} inputmode - The input mode attribute
- * @prop {boolean} autofocus - The autofocus attribute
- * @prop {boolean} disabled - The disable attribute
- * @prop {boolean} readonly - The readonly attribute
- * @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 the input is invalid
- * @prop {string} status - The status of the input
- * @prop {boolean} validateOnBlur - Activates validation on blur
- * @prop {string} ariaAutoComplete - Aria Autocomplete
- * @prop {string} ariaControls - Aria Controls
- * @prop {string} ariaActiveDescendant - Aria Active Descendant
- * @prop {boolean} rounded - Displays rounded corners
- * @prop {boolean} filled - Displays a filled input box
- * @prop {string} iconRight - Custom Icon to the right of the input
- * @prop {string} iconLeft - Custom Icon to the left of the input
- * @prop {number} iconSize - Size of the icons
- * @prop {object} validity - The HTML5 validity object.
- * @prop {boolean} isPasswordVisible - Manages password visibility
- * @prop {string} inputType - Input Type of keypress handled through handleInput(e)
- * @prop {boolean} focused - Determines if the input is focused
- *
- * @csspart input
- *
- * @cssproperty --kemet-input-height - The height of the input.
- * @cssproperty --kemet-input-padding - The padding on the input.
- * @cssproperty --kemet-input-border - The border of the input.
- * @cssproperty --kemet-input-border-color-error -  The border of the error state.
- * @cssproperty --kemet-input-border-color-success - The border of the success state.
- * @cssproperty --kemet-input-border-color-warning - The border of the warning state.
- * @cssproperty --kemet-input-icon-left-padding - The icon-left padding.
- * @cssproperty --kemet-input-icon-right-padding - The icon-right padding.
- * @cssproperty --kemet-input-border-radius-rounded - The border radius on rounded.
- * @cssproperty --kemet-input-border-filled - The border on filled.
- * @cssproperty --kemet-input-color-filled - The color on filled.
- * @cssproperty --kemet-input-background-color-filled - The background-color on filled.
- * @cssproperty --kemet-input-background-color-error - The error state background color.
- * @cssproperty --kemet-input-background-color-success - The success state background color.
- * @cssproperty --kemet-input-background-color-warning - The warning state background color.
- *
- * @event kemet-input-focused - Fires when the input receives and loses focus
- * @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.
- * Use the validity object to support custom validation messages.
- * @event kemet-input-input - Fires when the input receives input
- *
- */
-let KemetMultiInput = class KemetMultiInput extends LitElement {
-    constructor() {
-        /** @internal */
-        // formSubmitController: FormSubmitController;
-        super(...arguments);
-        this.rounded = false;
-        this.name = 'input';
-        this.value = '';
-        this.selections = [];
-    }
-    firstUpdated() {
-        // elements
-        this.field = this.closest('kemet-field');
-        this.combo = this.field.querySelector('kemet-combo');
-        if (this.combo) {
-            this.combo.addEventListener('kemet-combo-selection', (event) => this.addComboItem(event));
-        }
-    }
-    updated() {
-        if (this.chips)
-            this.calculatePadding();
-    }
-    render() {
-        return html `
-      <div>
-        <input
-          part="input"
-          id="input"
-          name=${this.name}
-          @input=${this.handleInput}
-          @focus=${this.handleFocus}
-          .value=${live(this.value)}
-        />
-         ${this.makeSelections()}
-      </div>
-    `;
-    }
-    /**
-     * Handles when a selection is made from a combo
-     * @private
-     * @param event
-     */
-    addComboItem(event) {
-        this.value = '';
-        const isPresent = this.selections.find(selection => selection.id === event.detail.id);
-        if (!isPresent)
-            this.selections = [...this.selections, event.detail];
-    }
-    /**
-     * Handles when the input receives input
-     * @private
-     */
-    handleInput(event) {
-        emitEvent(this, 'kemet-input-input', event.target.value);
-    }
-    /**
-     * Handles when the input is focused
-     */
-    handleFocus(event) {
-        emitEvent(this, 'kemet-multi-input-focus', event.target.value);
-    }
-    /**
-     * Renders the chips from the selections of the combo
-     * @private
-     */
-    makeSelections() {
-        const selections = this.selections.map(selection => html `
-      <li part="chip">
-        <span>${selection.text}</span>
-        <button @click=${this.handleRemoveChip}>&times;</button>
-      </li>
-    `);
-        if (this.selections) {
-            return html `<ul part="chips">${selections}</ul>`;
-        }
-        return null;
-    }
-    /**
-     * calculates padding to properly place the cursor of the input
-     * @private
-     */
-    calculatePadding() {
-        this.paddingLeft = this.chips.offsetWidth + 16;
-    }
-    /**
-     * handle removing a chip from the selections
-     * @private
-     */
-    handleRemoveChip(event) {
-        const text = event.target.closest('[part=chip]').querySelector('span').innerText;
-        this.selections = this.selections.filter(selection => selection.text !== text);
-    }
-};
-KemetMultiInput.styles = [stylesBase];
-__decorate([
-    property({ type: Boolean })
-], KemetMultiInput.prototype, "rounded", void 0);
-__decorate([
-    property({ type: String })
-], KemetMultiInput.prototype, "name", void 0);
-__decorate([
-    state()
-], KemetMultiInput.prototype, "value", void 0);
-__decorate([
-    state()
-], KemetMultiInput.prototype, "selections", void 0);
-__decorate([
-    state()
-], KemetMultiInput.prototype, "paddingLeft", void 0);
-__decorate([
-    state()
-], KemetMultiInput.prototype, "field", void 0);
-__decorate([
-    state()
-], KemetMultiInput.prototype, "combo", void 0);
-__decorate([
-    query('[part=chips]')
-], KemetMultiInput.prototype, "chips", void 0);
-KemetMultiInput = __decorate([
-    customElement('kemet-multi-input')
-], KemetMultiInput);
-export default KemetMultiInput;
-//# sourceMappingURL=kemet-multi-input.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"kemet-multi-input.js","sourceRoot":"","sources":["../../../src/components/kemet-multi-input/kemet-multi-input.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement } from 'lit';\nimport {\n customElement, property, query, state,\n} from 'lit/decorators.js';\nimport { live } from 'lit/directives/live.js';\nimport { stylesBase } from './styles';\nimport { emitEvent } from '../../utilities/misc/events';\nimport { IComboSelection } from './types';\n\n/**\n * @since 3.1.0\n * @status stable\n *\n * @tagname kemet-multi-input\n * @summary An input element that accepts multiple items from a combo.\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-multi-input')\nexport default class KemetMultiInput extends LitElement {\n  /** @internal */\n  // formSubmitController: FormSubmitController;\n\n  static styles = [stylesBase];\n\n  @property({ type: Boolean })\n  rounded: boolean = false;\n\n  @property({ type: String })\n  name: string = 'input';\n\n  @state()\n  value: string = '';\n\n  @state()\n  selections: IComboSelection[] = [];\n\n  @state()\n  paddingLeft: number;\n\n  @state()\n  field;\n\n  @state()\n  combo;\n\n  @query('[part=chips]')\n  chips;\n\n  firstUpdated() {\n    // elements\n    this.field = this.closest('kemet-field');\n    this.combo = this.field.querySelector('kemet-combo');\n\n    if (this.combo) {\n      this.combo.addEventListener('kemet-combo-selection', (event: CustomEvent) => this.addComboItem(event));\n    }\n  }\n\n  updated() {\n    if (this.chips) this.calculatePadding();\n  }\n\n  render() {\n    return html`\n      <div>\n        <input\n          part=\"input\"\n          id=\"input\"\n          name=${this.name}\n          @input=${this.handleInput}\n          @focus=${this.handleFocus}\n          .value=${live(this.value)}\n        />\n         ${this.makeSelections()}\n      </div>\n    `;\n  }\n\n  /**\n   * Handles when a selection is made from a combo\n   * @private\n   * @param event\n   */\n\n  addComboItem(event: CustomEvent) {\n    this.value = '';\n    const isPresent = this.selections.find(selection => selection.id === event.detail.id);\n    if (!isPresent) this.selections = [...this.selections, event.detail];\n  }\n\n  /**\n   * Handles when the input receives input\n   * @private\n   */\n  handleInput(event) {\n    emitEvent(this, 'kemet-input-input', event.target.value);\n  }\n\n  /**\n   * Handles when the input is focused\n   */\n  handleFocus(event) {\n    emitEvent(this, 'kemet-multi-input-focus', event.target.value);\n  }\n\n  /**\n   * Renders the chips from the selections of the combo\n   * @private\n   */\n  makeSelections() {\n    const selections = this.selections.map(selection => html`\n      <li part=\"chip\">\n        <span>${selection.text}</span>\n        <button @click=${this.handleRemoveChip}>&times;</button>\n      </li>\n    `);\n\n    if (this.selections) {\n      return html`<ul part=\"chips\">${selections}</ul>`;\n    }\n\n    return null;\n  }\n\n  /**\n   * calculates padding to properly place the cursor of the input\n   * @private\n   */\n  calculatePadding() {\n    this.paddingLeft = this.chips.offsetWidth + 16;\n  }\n\n  /**\n   * handle removing a chip from the selections\n   * @private\n   */\n  handleRemoveChip(event) {\n    const text = event.target.closest('[part=chip]').querySelector('span').innerText;\n    this.selections = this.selections.filter(selection => selection.text !== text);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-multi-input': KemetMultiInput\n  }\n}\n"]}

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

@@ -1 +0,0 @@
-export declare const stylesBase: import("lit").CSSResult;

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

@@ -1 +0,0 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/components/kemet-multi-input/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoF5B,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const stylesBase = css`\n  :host {\n    --kemet-input-height: 50px;\n    --kemet-input-padding: 0.5rem 1rem;\n    --kemet-input-border: 1px solid rgb(var(--kemet-color-foreground));\n    --kemet-input-border-radius-rounded: var(--kemet-border-radius-lg);\n    --kemet-input-border-filled: none;\n    --kemet-input-color-filled: rgb(var(--kemet-color-white));\n    --kemet-input-background-color-filled: rgb(var(--kemet-color-primary));\n    --kemet-input-color-filled: rgb(var(--kemet-color-white));\n    --kemet-input-background-color-error: rgb(var(--kemet-color-error));\n    --kemet-input-background-color-success: rgb(var(--kemet-color-success));\n    --kemet-input-background-color-warning: rgb(var(--kemet-color-warning));\n\n    --kemet-multi-input-chip-color: rgb(var(--kemet-color-background));\n    --kemet-multi-input-chip-background: rgb(var(--kemet-color-foreground));\n\n    position: relative;\n    display: block;\n  }\n\n  input {\n    color: rgb(var(--kemet-color-text));\n    display: block;\n    font-size: 1rem;\n    width: 100%;\n    height: var(--kemet-input-height);\n    padding: var(--kemet-input-padding);\n    border: var(--kemet-input-border);\n    appearance: none;\n    box-sizing: border-box;\n    background-color: transparent;\n  }\n\n  :host([disabled]) input {\n    opacity: 0.5;\n  }\n\n  :host([rounded]) input {\n    border-radius: var(--kemet-input-border-radius-rounded);\n  }\n\n  :host([filled]) input {\n    border: var(--kemet-input-border-filled);\n    color: var(--kemet-input-color-filled);\n    background-color: var(--kemet-input-background-color-filled);\n  }\n\n  div {\n    display: flex;\n    gap: 1rem;\n    flex-direction: column;\n  }\n\n  ul {\n    display: flex;\n    gap: 0.5rem;\n    margin: 0;\n    padding: 0;\n    list-style: none;\n    flex-wrap: wrap;\n  }\n\n  li {\n    display: flex;\n    gap: 0.5rem;\n    align-items: center;\n    padding: 0.25rem 0.5rem;\n    color: var(--kemet-multi-input-chip-color);\n    background-color: var(--kemet-multi-input-chip-background);\n  }\n\n  :host([rounded]) li {\n    border-radius: var(--kemet-input-border-radius-rounded);\n  }\n\n  button {\n    color: inherit;\n    cursor: pointer;\n    font-size: 1.25rem;\n    padding: 0;\n    border: 0;\n    background-color: transparent\n  }\n`;\n"]}

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

@@ -1,5 +0,0 @@
-export interface IComboSelection {
-    element: HTMLUListElement;
-    text: string;
-    id: string;
-}

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

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=types.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/kemet-multi-input/types.ts"],"names":[],"mappings":"","sourcesContent":["export interface IComboSelection {\n  element: HTMLUListElement;\n  text: string;\n  id: string;\n}\n"]}

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

@@ -1,10 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/web-components';
-import '../kemet-password';
-import '../../kemet-input/kemet-input';
-import '../../kemet-tabs/kemet-tabs';
-import '../../kemet-tabs/kemet-tab';
-import '../../kemet-tabs/kemet-tab-panel';
-declare const meta: Meta;
-export default meta;
-type Story = StoryObj;
-export declare const Standard: Story;

package/dist/components/kemet-password/docs/stories.js

@@ -1,29 +0,0 @@
-import { html } from 'lit';
-import '../kemet-password';
-import '../../kemet-input/kemet-input';
-import '../../kemet-tabs/kemet-tabs';
-import '../../kemet-tabs/kemet-tab';
-import '../../kemet-tabs/kemet-tab-panel';
-const meta = {
-    title: 'Components / Password',
-    component: 'kemet-password',
-    args: {
-        rules: [
-            { pattern: '(?=.{8,}$)', message: 'At least 8 characters long' },
-            { pattern: '(?=.*[a-z])(?=.*[A-Z])', message: 'Uppercase and lowercase' },
-            { pattern: '(?=.*[0-9])', message: 'At least one number (0-9)' },
-        ],
-        message: 'Please make sure you meet all the requirements.',
-    },
-};
-export default meta;
-const Template = (args) => html `
-  <kemet-field slug="new-password" label="New Password">
-    <kemet-input slot="input" type="password" name="new-password"></kemet-input>
-    <kemet-password slot="component" message=${args.message} .rules=${args.rules}></kemet-password>
-  </kemet-field>
-`;
-export const Standard = {
-    render: (args) => Template(args),
-};
-//# sourceMappingURL=stories.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../../src/components/kemet-password/docs/stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAG3B,OAAO,mBAAmB,CAAC;AAE3B,OAAO,+BAA+B,CAAC;AACvC,OAAO,6BAA6B,CAAC;AACrC,OAAO,4BAA4B,CAAC;AACpC,OAAO,kCAAkC,CAAC;AAE1C,MAAM,IAAI,GAAS;IACjB,KAAK,EAAE,uBAAuB;IAC9B,SAAS,EAAE,gBAAgB;IAC3B,IAAI,EAAE;QACJ,KAAK,EAAE;YACL,EAAE,OAAO,EAAE,YAAY,EAAE,OAAO,EAAE,4BAA4B,EAAE;YAChE,EAAE,OAAO,EAAE,wBAAwB,EAAE,OAAO,EAAE,yBAAyB,EAAE;YACzE,EAAE,OAAO,EAAE,aAAa,EAAE,OAAO,EAAE,2BAA2B,EAAE;SACjE;QACD,OAAO,EAAE,iDAAiD;KAC3D;CACF,CAAC;AACF,eAAe,IAAI,CAAC;AAIpB,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;;+CAGgB,IAAI,CAAC,OAAO,WAAW,IAAI,CAAC,KAAK;;CAE/E,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,MAAM,EAAE,CAAC,IAAS,EAAE,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC;CACtC,CAAC","sourcesContent":["import { html } from 'lit';\nimport type { Meta, StoryObj } from '@storybook/web-components';\n\nimport '../kemet-password';\n\nimport '../../kemet-input/kemet-input';\nimport '../../kemet-tabs/kemet-tabs';\nimport '../../kemet-tabs/kemet-tab';\nimport '../../kemet-tabs/kemet-tab-panel';\n\nconst meta: Meta = {\n  title: 'Components / Password',\n  component: 'kemet-password',\n  args: {\n    rules: [\n      { pattern: '(?=.{8,}$)', message: 'At least 8 characters long' },\n      { pattern: '(?=.*[a-z])(?=.*[A-Z])', message: 'Uppercase and lowercase' },\n      { pattern: '(?=.*[0-9])', message: 'At least one number (0-9)' },\n    ],\n    message: 'Please make sure you meet all the requirements.',\n  },\n};\nexport default meta;\n\ntype Story = StoryObj;\n\nconst Template = (args) => html`\n  <kemet-field slug=\"new-password\" label=\"New Password\">\n    <kemet-input slot=\"input\" type=\"password\" name=\"new-password\"></kemet-input>\n    <kemet-password slot=\"component\" message=${args.message} .rules=${args.rules}></kemet-password>\n  </kemet-field>\n`;\n\nexport const Standard: Story = {\n  render: (args: any) => Template(args),\n};\n"]}

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

@@ -1,83 +0,0 @@
-import { LitElement, TemplateResult } from 'lit';
-import { KemetFieldInterface } from '../kemet-field/types';
-import { KemetInputInterface } from '../kemet-input/types';
-import { KemetTextareaInterface } from '../kemet-textarea/types';
-import { TypeStatus } from './types';
-/**
- * @since 1.2.0
- * @status stable
- *
- * @tagname kemet-password
- * @summary Gauges the strength of a password entered by the user.
- *
- * @prop {array} rules - An array of objects containing the rules the password must meet.
- * @prop {boolean} show - Controls the display of the component.
- * @prop {string} value - The value of the input component.
- * @prop {string} message - A message that is above the rules.
- * @prop {string} strength - The strength of the password. Weak | Better | Strong.
- * @prop {string} icon
- * @prop {number} iconSize
- *
- * @event kemet-password-status - Fires when there's a change in status.
- *
- * @csspart status - The status message.
- * @csspart indicator - The strength indicator bars.
- * @csspart message - A message to display to the user.
- * @csspart rules - A description of rules to follow.
- *
- */
-interface IOptions {
-    pattern: string;
-    message: string;
-    meetsCriteria?: boolean;
-}
-export default class KemetPassword extends LitElement {
-    static styles: import("lit").CSSResult[];
-    rules: IOptions[];
-    show: boolean;
-    value: string;
-    message: string;
-    strength: string;
-    icon: string;
-    iconSize: number;
-    status: TypeStatus;
-    field: KemetFieldInterface;
-    input: KemetInputInterface | KemetTextareaInterface;
-    firstUpdated(): void;
-    render(): TemplateResult<1>;
-    /**
-     * Makes the list of rules
-     * @private
-     * @returns {TemplateResult<1>[]} the criteria rules
-     */
-    makeRules(): TemplateResult<1>[];
-    /**
-     * Makes the check icon if the criteria has been met
-     * @param {boolean} meetsCriteria
-     * @private
-     * @returns {TemplateResult} an icon component
-     */
-    makeCheckIcon(meetsCriteria: boolean): TemplateResult;
-    /**
-     * Handles the kemet-input-input event
-     * @param {*} event
-     * @private
-     */
-    handleInput(event: CustomEvent): void;
-    /**
-     * Determines the strength of the password
-     * @private
-     */
-    setStrength(): void;
-    /**
-     * Determines whether to show or hide the component
-     * @private
-     */
-    visibility(): void;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'kemet-password': KemetPassword;
-    }
-}
-export {};

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

@@ -1,155 +0,0 @@
-import { __decorate } from "tslib";
-import { html, LitElement } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
-import { emitEvent } from '../../utilities/misc/events';
-import { stylesBase } from './styles';
-let KemetPassword = class KemetPassword extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.rules = [
-            { pattern: '(?=.{8,}$)', message: 'At least 8 characters long' },
-            { pattern: '(?=.*[a-z])(?=.*[A-Z])', message: 'Uppercase and lowercase' },
-            { pattern: '(?=.*[0-9])', message: 'At least one number (0-9)' },
-        ];
-        this.message = 'Please make sure you meet all the requirements.';
-        this.icon = 'check2';
-        this.iconSize = 16;
-    }
-    firstUpdated() {
-        // elements
-        this.field = this.closest('kemet-field');
-        this.input = this.field.querySelector('[slot="input"]');
-        // events listeners
-        this.input.addEventListener('kemet-input-input', this.handleInput.bind(this));
-    }
-    render() {
-        return html `
-      <div role="alert" aria-live="assertive">
-        <div class="status status--${this.strength}" part="status">
-          <span>${this.strength}</span>
-          <ul class="indicator" part="indicator">
-            <li></li>
-            <li></li>
-            <li></li>
-          </ul>
-        </div>
-        <p class="message" part="message">${this.message}</p>
-        <ul class="rules" part="rules">
-          ${this.makeRules()}
-        </ul>
-      </div>
-    `;
-    }
-    /**
-     * Makes the list of rules
-     * @private
-     * @returns {TemplateResult<1>[]} the criteria rules
-     */
-    makeRules() {
-        if (this.input) {
-            return this.rules.map((rule, index) => {
-                const regExp = new RegExp(rule.pattern);
-                const meetsCriteria = regExp.test(this.input.value);
-                this.rules[index].meetsCriteria = meetsCriteria;
-                return html `<li>${this.makeCheckIcon(meetsCriteria)} ${rule.message}</li>`;
-            });
-        }
-        return null;
-    }
-    /**
-     * Makes the check icon if the criteria has been met
-     * @param {boolean} meetsCriteria
-     * @private
-     * @returns {TemplateResult} an icon component
-     */
-    makeCheckIcon(meetsCriteria) {
-        if (meetsCriteria) {
-            return html `<kemet-icon icon=${this.icon} size=${this.iconSize}></kemet-icon>`;
-        }
-        return null;
-    }
-    /**
-     * Handles the kemet-input-input event
-     * @param {*} event
-     * @private
-     */
-    handleInput(event) {
-        this.value = event.detail;
-        this.setStrength();
-        this.visibility();
-    }
-    /**
-     * Determines the strength of the password
-     * @private
-     */
-    setStrength() {
-        // We use a setTimeout here because makeRules adds the meetsCriteria
-        // property to the rules. We need that to be set by render() before
-        // setting the Strength because the percentage calc is based on it
-        setTimeout(() => {
-            const totalRules = this.rules.length;
-            const metRules = this.rules.filter(rule => rule.meetsCriteria).length;
-            const metRulesPercentage = Math.round((metRules / totalRules) * 100) / 100;
-            if (metRulesPercentage <= 0.33) {
-                this.strength = 'weak';
-                this.status = 'error';
-            }
-            if (metRulesPercentage > 0.33 && metRulesPercentage <= 0.67) {
-                this.strength = 'better';
-                this.status = 'error';
-            }
-            if (metRulesPercentage > 0.67) {
-                this.strength = 'strong';
-                this.status = 'success';
-            }
-            emitEvent(this, 'kemet-password-status', {
-                status: this.status,
-                validity: { meetsPasswordCriteria: this.status === 'success' },
-                element: this,
-            });
-        }, 1);
-    }
-    /**
-     * Determines whether to show or hide the component
-     * @private
-     */
-    visibility() {
-        this.show = this.value.length > 0;
-    }
-};
-KemetPassword.styles = [stylesBase];
-__decorate([
-    property({ type: Array })
-], KemetPassword.prototype, "rules", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], KemetPassword.prototype, "show", void 0);
-__decorate([
-    property({ type: String })
-], KemetPassword.prototype, "value", void 0);
-__decorate([
-    property({ type: String })
-], KemetPassword.prototype, "message", void 0);
-__decorate([
-    property({ type: String })
-], KemetPassword.prototype, "strength", void 0);
-__decorate([
-    property({ type: String })
-], KemetPassword.prototype, "icon", void 0);
-__decorate([
-    property({ type: Number })
-], KemetPassword.prototype, "iconSize", void 0);
-__decorate([
-    state()
-], KemetPassword.prototype, "status", void 0);
-__decorate([
-    state()
-], KemetPassword.prototype, "field", void 0);
-__decorate([
-    state()
-], KemetPassword.prototype, "input", void 0);
-KemetPassword = __decorate([
-    customElement('kemet-password')
-], KemetPassword);
-export default KemetPassword;
-//# sourceMappingURL=kemet-password.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"kemet-password.js","sourceRoot":"","sources":["../../../src/components/kemet-password/kemet-password.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, TemplateResult } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { emitEvent } from '../../utilities/misc/events';\nimport { KemetFieldInterface } from '../kemet-field/types';\nimport { KemetInputInterface } from '../kemet-input/types';\nimport { KemetTextareaInterface } from '../kemet-textarea/types';\nimport { stylesBase } from './styles';\nimport { TypeStatus } from './types';\n\n/**\n * @since 1.2.0\n * @status stable\n *\n * @tagname kemet-password\n * @summary Gauges the strength of a password entered by the user.\n *\n * @prop {array} rules - An array of objects containing the rules the password must meet.\n * @prop {boolean} show - Controls the display of the component.\n * @prop {string} value - The value of the input component.\n * @prop {string} message - A message that is above the rules.\n * @prop {string} strength - The strength of the password. Weak | Better | Strong.\n * @prop {string} icon\n * @prop {number} iconSize\n *\n * @event kemet-password-status - Fires when there's a change in status.\n *\n * @csspart status - The status message.\n * @csspart indicator - The strength indicator bars.\n * @csspart message - A message to display to the user.\n * @csspart rules - A description of rules to follow.\n *\n */\n\ninterface IOptions {\n  pattern: string;\n  message: string;\n  meetsCriteria?: boolean;\n}\n\n@customElement('kemet-password')\nexport default class KemetPassword extends LitElement {\n  static styles = [stylesBase];\n\n  @property({ type: Array })\n  rules: IOptions[] = [\n    { pattern: '(?=.{8,}$)', message: 'At least 8 characters long' },\n    { pattern: '(?=.*[a-z])(?=.*[A-Z])', message: 'Uppercase and lowercase' },\n    { pattern: '(?=.*[0-9])', message: 'At least one number (0-9)' },\n  ];\n\n  @property({ type: Boolean, reflect: true })\n  show: boolean;\n\n  @property({ type: String })\n  value: string;\n\n  @property({ type: String })\n  message: string = 'Please make sure you meet all the requirements.';\n\n  @property({ type: String })\n  strength: string;\n\n  @property({ type: String })\n  icon: string = 'check2';\n\n  @property({ type: Number })\n  iconSize: number = 16;\n\n  @state()\n  status: TypeStatus;\n\n  @state()\n  field: KemetFieldInterface;\n\n  @state()\n  input: KemetInputInterface | KemetTextareaInterface;\n\n  firstUpdated() {\n    // elements\n    this.field = this.closest('kemet-field');\n    this.input = this.field.querySelector('[slot=\"input\"]');\n\n    // events listeners\n    this.input.addEventListener('kemet-input-input', this.handleInput.bind(this));\n  }\n\n  render() {\n    return html`\n      <div role=\"alert\" aria-live=\"assertive\">\n        <div class=\"status status--${this.strength}\" part=\"status\">\n          <span>${this.strength}</span>\n          <ul class=\"indicator\" part=\"indicator\">\n            <li></li>\n            <li></li>\n            <li></li>\n          </ul>\n        </div>\n        <p class=\"message\" part=\"message\">${this.message}</p>\n        <ul class=\"rules\" part=\"rules\">\n          ${this.makeRules()}\n        </ul>\n      </div>\n    `;\n  }\n\n  /**\n   * Makes the list of rules\n   * @private\n   * @returns {TemplateResult<1>[]} the criteria rules\n   */\n  makeRules(): TemplateResult<1>[] {\n    if (this.input) {\n      return this.rules.map((rule, index) => {\n        const regExp = new RegExp(rule.pattern);\n        const meetsCriteria = regExp.test(this.input.value);\n        this.rules[index].meetsCriteria = meetsCriteria;\n        return html`<li>${this.makeCheckIcon(meetsCriteria)} ${rule.message}</li>`;\n      });\n    }\n\n    return null;\n  }\n\n  /**\n   * Makes the check icon if the criteria has been met\n   * @param {boolean} meetsCriteria\n   * @private\n   * @returns {TemplateResult} an icon component\n   */\n  makeCheckIcon(meetsCriteria: boolean): TemplateResult {\n    if (meetsCriteria) {\n      return html`<kemet-icon icon=${this.icon} size=${this.iconSize}></kemet-icon>`;\n    }\n\n    return null;\n  }\n\n  /**\n   * Handles the kemet-input-input event\n   * @param {*} event\n   * @private\n   */\n  handleInput(event: CustomEvent) {\n    this.value = event.detail;\n    this.setStrength();\n    this.visibility();\n  }\n\n  /**\n   * Determines the strength of the password\n   * @private\n   */\n  setStrength() {\n    // We use a setTimeout here because makeRules adds the meetsCriteria\n    // property to the rules. We need that to be set by render() before\n    // setting the Strength because the percentage calc is based on it\n    setTimeout(() => {\n      const totalRules = this.rules.length;\n      const metRules = this.rules.filter(rule => rule.meetsCriteria).length;\n      const metRulesPercentage = Math.round((metRules / totalRules) * 100) / 100;\n\n      if (metRulesPercentage <= 0.33) {\n        this.strength = 'weak';\n        this.status = 'error';\n      }\n\n      if (metRulesPercentage > 0.33 && metRulesPercentage <= 0.67) {\n        this.strength = 'better';\n        this.status = 'error';\n      }\n\n      if (metRulesPercentage > 0.67) {\n        this.strength = 'strong';\n        this.status = 'success';\n      }\n\n      emitEvent(this, 'kemet-password-status', {\n        status: this.status,\n        validity: { meetsPasswordCriteria: this.status === 'success' },\n        element: this,\n      });\n    }, 1);\n  }\n\n  /**\n   * Determines whether to show or hide the component\n   * @private\n   */\n  visibility() {\n    this.show = this.value.length > 0;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-password': KemetPassword\n  }\n}\n"]}

package/dist/components/kemet-password/styles.d.ts

@@ -1 +0,0 @@
-export declare const stylesBase: import("lit").CSSResult;

package/dist/components/kemet-password/styles.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/components/kemet-password/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6E5B,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const stylesBase = css`\n  :host {\n    color: inherit;\n    display: none;\n  }\n\n  :host([show]) {\n    display: block;\n  }\n\n  p {\n    margin: 1.6rem 0;\n  }\n\n  .status {\n    display: grid;\n    align-items: center;\n    grid-template-columns: 1fr auto;\n    line-height: 1;\n    margin-top: 0.8rem;\n  }\n\n  .status > span {\n    text-transform: capitalize;\n  }\n\n  .status--weak,\n  .status--better {\n    color: rgb(var(--kemet-color-error));\n  }\n\n  .status--strong {\n    color: rgb(var(--kemet-color-success));\n  }\n\n  .indicator {\n    display: flex;\n    gap: 0.4rem;\n    margin: 0;\n    list-style: none;\n  }\n\n  .indicator li {\n    width: 1.6rem;\n    height: 0.2rem;\n  }\n\n  .status--weak .indicator li:nth-child(1) {\n    background-color: rgb(var(--kemet-color-error));\n  }\n\n  .status--better .indicator li:nth-child(1),\n  .status--better .indicator li:nth-child(2) {\n    background-color: rgb(var(--kemet-color-error));\n  }\n\n  .status--strong .indicator li {\n    background-color: rgb(var(--kemet-color-success));\n  }\n\n  .rules {\n    color: rgb(var(--kemet-color-foreground));\n    line-height: 1.5;\n    list-style: none;\n    font-size: 90%;\n    padding-left: 2rem;\n  }\n\n  .rules li {\n    position: relative;\n  }\n\n  .rules kemet-icon {\n    color: rgb(var(--kemet-color-success));\n    position: absolute;\n    left: -2rem;\n  }\n`;\n"]}

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

@@ -1,10 +0,0 @@
-export type TypeStatus = 'standard' | 'error' | 'success' | 'warning';
-export interface KemetPasswordInterface extends HTMLElement {
-    rules?: any[];
-    show?: boolean;
-    value?: string;
-    message?: string;
-    strength?: string;
-    icon?: string;
-    iconSize?: number;
-}

package/dist/components/kemet-password/types.js

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=types.js.map

package/dist/components/kemet-password/types.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/kemet-password/types.ts"],"names":[],"mappings":"","sourcesContent":["export type TypeStatus = 'standard' | 'error' | 'success' | 'warning';\n\nexport interface KemetPasswordInterface extends HTMLElement {\n  rules?: any[],\n  show?: boolean,\n  value?: string,\n  message?: string,\n  strength?: string,\n  icon?: string,\n  iconSize?: number,\n}\n"]}

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

@@ -1,12 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/web-components';
-import '../kemet-popper';
-import '../kemet-popper-close';
-import '../../kemet-tabs/kemet-tabs';
-import '../../kemet-tabs/kemet-tab';
-import '../../kemet-tabs/kemet-tab-panel';
-import '../../kemet-button/kemet-button';
-declare const meta: Meta;
-export default meta;
-type Story = StoryObj;
-export declare const Standard: Story;
-export declare const OnClick: Story;