kemet-ui 3.0.1 → 3.1.0

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

@@ -0,0 +1,193 @@
+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

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

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

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

@@ -0,0 +1,87 @@
+import { css } from 'lit';
+export const stylesBase = css `
+  :host {
+    --kemet-input-height: 50px;
+    --kemet-input-padding: 0.5rem 1rem;
+    --kemet-input-border: 1px solid rgb(var(--kemet-color-foreground));
+    --kemet-input-border-radius-rounded: var(--kemet-border-radius-lg);
+    --kemet-input-border-filled: none;
+    --kemet-input-color-filled: rgb(var(--kemet-color-white));
+    --kemet-input-background-color-filled: rgb(var(--kemet-color-primary));
+    --kemet-input-color-filled: rgb(var(--kemet-color-white));
+    --kemet-input-background-color-error: rgb(var(--kemet-color-error));
+    --kemet-input-background-color-success: rgb(var(--kemet-color-success));
+    --kemet-input-background-color-warning: rgb(var(--kemet-color-warning));
+
+    --kemet-multi-input-chip-color: rgb(var(--kemet-color-background));
+    --kemet-multi-input-chip-background: rgb(var(--kemet-color-foreground));
+
+    position: relative;
+    display: block;
+  }
+
+  input {
+    color: rgb(var(--kemet-color-text));
+    display: block;
+    font-size: 1rem;
+    width: 100%;
+    height: var(--kemet-input-height);
+    padding: var(--kemet-input-padding);
+    border: var(--kemet-input-border);
+    appearance: none;
+    box-sizing: border-box;
+    background-color: transparent;
+  }
+
+  :host([disabled]) input {
+    opacity: 0.5;
+  }
+
+  :host([rounded]) input {
+    border-radius: var(--kemet-input-border-radius-rounded);
+  }
+
+  :host([filled]) input {
+    border: var(--kemet-input-border-filled);
+    color: var(--kemet-input-color-filled);
+    background-color: var(--kemet-input-background-color-filled);
+  }
+
+  div {
+    display: flex;
+    gap: 1rem;
+    flex-direction: column;
+  }
+
+  ul {
+    display: flex;
+    gap: 0.5rem;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    flex-wrap: wrap;
+  }
+
+  li {
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+    padding: 0.25rem 0.5rem;
+    color: var(--kemet-multi-input-chip-color);
+    background-color: var(--kemet-multi-input-chip-background);
+  }
+
+  :host([rounded]) li {
+    border-radius: var(--kemet-input-border-radius-rounded);
+  }
+
+  button {
+    color: inherit;
+    cursor: pointer;
+    font-size: 1.25rem;
+    padding: 0;
+    border: 0;
+    background-color: transparent
+  }
+`;
+//# sourceMappingURL=styles.js.map

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

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

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

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

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

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

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

@@ -6,5 +6,5 @@ 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;

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

@@ -1 +1 @@
-{"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"]}
+{"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/types.d.ts

@@ -1,4 +1,4 @@
-export declare type TypeStatus = 'standard' | 'error' | 'success' | 'warning';
+export type TypeStatus = 'standard' | 'error' | 'success' | 'warning';
 export interface KemetPasswordInterface extends HTMLElement {
     rules?: any[];
     show?: boolean;

package/dist/components/kemet-popper/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 OnClick: Story;

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

@@ -1 +1 @@
-{"version":3,"file":"kemet-popper-close.js","sourceRoot":"","sources":["../../../src/components/kemet-popper/kemet-popper-close.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,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,gBAAgB,GAArC,MAAqB,gBAAiB,SAAQ,UAAU;IAatD,MAAM;QACJ,OAAO,IAAI,CAAA;uBACQ,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,EAAE,WAAW,CAAC,KAAoB,EAAE,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC;;;KAGnG,CAAC;IACJ,CAAC;IAED,KAAK;QACH,SAAS,CAAC,IAAI,EAAE,wBAAwB,EAAE,IAAI,CAAC,CAAC;IAClD,CAAC;IAED,cAAc,CAAC,KAAoB;QACjC,KAAK,CAAC,cAAc,EAAE,CAAC;QAEvB,IAAI,KAAK,CAAC,IAAI,KAAK,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,EAAE;YACnD,IAAI,CAAC,KAAK,EAAE,CAAC;SACd;IACH,CAAC;CACF,CAAA;AA/BQ,uBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;KAQF;CACF,CAAC;AAXiB,gBAAgB;IADpC,aAAa,CAAC,oBAAoB,CAAC;GACf,gBAAgB,CAgCpC;eAhCoB,gBAAgB","sourcesContent":["import { html, css, LitElement } from 'lit';\nimport { customElement } from 'lit/decorators.js';\nimport { emitEvent } from '../../utilities/misc/events';\n\n/**\n * @since 2.0.0\n * @status stable\n *\n * @tagname kemet-popper-close\n * @summary A close button for the popper\n *\n * @event kemet-popper-close-btn\n *\n */\n\n@customElement('kemet-popper-close')\nexport default class KemetPopperClose extends LitElement {\n  static styles = [\n    css`\n      button {\n        font: inherit;\n        color: inherit;\n        cursor: pointer;\n        border: 0;\n        background: transparent;\n      }\n    `,\n  ];\n\n  render() {\n    return html`\n      <button @click=${() => this.close()} @keyup=${(event: KeyboardEvent) => this.handleKeyboard(event)}>\n        <slot></slot>\n      </button>\n    `;\n  }\n\n  close() {\n    emitEvent(this, 'kemet-popper-close-btn', this);\n  }\n\n  handleKeyboard(event: KeyboardEvent) {\n    event.preventDefault();\n\n    if (event.code === 'Space' || event.key === 'Enter') {\n      this.close();\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-popper-close': KemetPopperClose\n  }\n}\n"]}
+{"version":3,"file":"kemet-popper-close.js","sourceRoot":"","sources":["../../../src/components/kemet-popper/kemet-popper-close.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,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,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,UAAU;IAatD,MAAM;QACJ,OAAO,IAAI,CAAA;uBACQ,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,EAAE,WAAW,CAAC,KAAoB,EAAE,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC;;;KAGnG,CAAC;IACJ,CAAC;IAED,KAAK;QACH,SAAS,CAAC,IAAI,EAAE,wBAAwB,EAAE,IAAI,CAAC,CAAC;IAClD,CAAC;IAED,cAAc,CAAC,KAAoB;QACjC,KAAK,CAAC,cAAc,EAAE,CAAC;QAEvB,IAAI,KAAK,CAAC,IAAI,KAAK,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,EAAE,CAAC;YACpD,IAAI,CAAC,KAAK,EAAE,CAAC;QACf,CAAC;IACH,CAAC;;AA9BM,uBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;KAQF;CACF,AAVY,CAUX;AAXiB,gBAAgB;IADpC,aAAa,CAAC,oBAAoB,CAAC;GACf,gBAAgB,CAgCpC;eAhCoB,gBAAgB","sourcesContent":["import { html, css, LitElement } from 'lit';\nimport { customElement } from 'lit/decorators.js';\nimport { emitEvent } from '../../utilities/misc/events';\n\n/**\n * @since 2.0.0\n * @status stable\n *\n * @tagname kemet-popper-close\n * @summary A close button for the popper\n *\n * @event kemet-popper-close-btn\n *\n */\n\n@customElement('kemet-popper-close')\nexport default class KemetPopperClose extends LitElement {\n  static styles = [\n    css`\n      button {\n        font: inherit;\n        color: inherit;\n        cursor: pointer;\n        border: 0;\n        background: transparent;\n      }\n    `,\n  ];\n\n  render() {\n    return html`\n      <button @click=${() => this.close()} @keyup=${(event: KeyboardEvent) => this.handleKeyboard(event)}>\n        <slot></slot>\n      </button>\n    `;\n  }\n\n  close() {\n    emitEvent(this, 'kemet-popper-close-btn', this);\n  }\n\n  handleKeyboard(event: KeyboardEvent) {\n    event.preventDefault();\n\n    if (event.code === 'Space' || event.key === 'Enter') {\n      this.close();\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-popper-close': KemetPopperClose\n  }\n}\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"kemet-popper.js","sourceRoot":"","sources":["../../../src/components/kemet-popper/kemet-popper.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement } from 'lit';\nimport {\n  customElement, property, query, queryAll, state,\n} from 'lit/decorators.js';\nimport { createPopper } from '@popperjs/core/dist/esm';\nimport { emitEvent } from '../../utilities/misc/events';\nimport { TypeFireOn, TypePlacement } from './types';\nimport { stylesPopper } from './styles';\n// import { stylesPopperFade, stylesPopperScale, stylesPopperSlide, stylesPopperFall, stylesPopperFlipHorizontal, stylesPopperFlipVertical, stylesPopperSign, stylesPopperSuperScaled } from './styles.effects';\n\n/**\n * @since 2.0.0\n * @status stable\n *\n * @tagname kemet-popper\n * @summary A wrapper component for the popper.js lib.\n *\n * @event kemet-popper-opened - Fires when the popper opens\n * @event kemet-popper-closed - Fires when the popper closes\n *\n * @slot trigger - Controls opening and closing the popover.\n * @slot content - The contents of the popover.\n *\n * @csspart trigger - Contains the trigger for the popover.\n * @csspart content - Contains the content for the popover.\n *\n * @cssproperty --kemet-popper-padding - The padding in the content slot.\n * @cssproperty --kemet-popper-border-color - The border color of the content.\n * @cssproperty --kemet-popper-background-color - The background color of the content.\n *\n * @prop {TypePlacement} placement - The position of the popper over the trigger.\n * @prop {boolean} opened - Determines if the Popper is opened or closed\n * @prop {TypeFireOn} fireOn - Activate the Popper on Click or Hover\n * @prop {string} strategy - Sets the strategy option in Popper's api\n * @prop {number} skidding - Sets an offset to the Popper from the trigger\n * @prop {number} distance - Sets spacing between the Popper and the trigger\n *\n */\n\n@customElement('kemet-popper')\nexport default class KemetPopper extends LitElement {\n  static styles = [stylesPopper];\n\n  @property({ type: String, reflect: true })\n  placement: TypePlacement = 'top';\n\n  @property({ type: Boolean, reflect: true })\n  opened: boolean;\n\n  @property({ type: String, attribute: 'fire-on' })\n  fireOn: TypeFireOn = 'hover';\n\n  @property({ type: String })\n  strategy: 'fixed' | 'absolute' = 'fixed';\n\n  @property({ type: Number })\n  skidding: number = 0;\n\n  @property({ type: Number })\n  distance: number = 0;\n\n  /** @internal */\n  @state()\n  popperInstance: { setOptions: (arg0: { placement: TypePlacement; strategy: 'fixed' | 'absolute'; modifiers: { name: string; options: { offset: number[]; }; }[]; }) => void; };\n\n  /** @internal */\n  @query('#trigger')\n  triggerElement: HTMLElement;\n\n  /** @internal */\n  @query('#content')\n  contentElement: HTMLElement;\n\n  /** @internal */\n  @queryAll('body, a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, *[tabindex], *[contenteditable], kemet-popper-close')\n  focusableElements: NodeListOf<Element>;\n\n  constructor() {\n    super();\n    this.addEventListener('kemet-popper-close-btn', () => { this.opened = false; });\n  }\n\n  firstUpdated() {\n    if (this.fireOn === 'click') {\n      this.focusableElements.forEach((element) => {\n        element.addEventListener('keydown', (event: KeyboardEvent) => this.handleFocusableDown(event));\n      });\n    }\n  }\n\n  updated(prevProps: Map<string, never>) {\n    this.refresh();\n\n    if (!prevProps.get('opened') && this.opened === true) {\n      emitEvent(this, 'kemet-popper-opened', this);\n    }\n\n    if (prevProps.get('opened') && this.opened === false) {\n      emitEvent(this, 'kemet-popper-closed', this);\n    }\n  }\n\n  render() {\n    // eslint-disable-next-line lit-a11y/mouse-events-have-key-events\n    return html`\n      <div\n        id=\"trigger\"\n        part=\"trigger\"\n        tabIndex=\"0\"\n        @click=${this.fireOn === 'click' ? (event: MouseEvent) => this.toggle(event) : null}\n        @keyup=${this.fireOn === 'click' ? (event: KeyboardEvent) => this.handleKeyUp(event) : null}\n        @mouseover=${this.fireOn !== 'click' ? () => { this.opened = true; } : null}\n        @focus=${this.fireOn !== 'click' ? () => { this.opened = true; } : null}\n        @mouseout=${this.fireOn !== 'click' ? () => { this.opened = false; } : null}\n        @blur=${this.fireOn !== 'click' ? () => { this.opened = false; } : null}\n      >\n        <slot name=\"trigger\"></slot>\n      </div>\n      <div\n        id=\"content\"\n        @mouseover=${this.fireOn !== 'click' ? () => { this.opened = true; } : null}\n        @mouseout=${this.fireOn !== 'click' ? () => { this.opened = false; } : null}\n      >\n        <slot name=\"content\" @slotchange=${() => this.makePopper()}></slot>\n      </div>\n    `;\n  }\n\n  refresh() {\n    this.popperInstance?.setOptions({\n      placement: this.placement,\n      strategy: this.strategy,\n      modifiers: [\n        { name: 'offset', options: { offset: [this.skidding, this.distance] } },\n      ],\n    });\n  }\n\n  makePopper() {\n    this.popperInstance = createPopper(this.triggerElement, this.contentElement, {\n      placement: this.placement,\n      strategy: this.strategy,\n      modifiers: [\n        { name: 'offset', options: { offset: [this.skidding, this.distance] } },\n      ],\n    });\n  }\n\n  toggle(event: MouseEvent | KeyboardEvent) {\n    const target = event.target as HTMLElement;\n    const isSlotTrigger = target.getAttribute('slot') === 'trigger';\n    const isPartTrigger = target.getAttribute('part') === 'trigger';\n\n    if (isSlotTrigger || isPartTrigger) {\n      this.opened = !this.opened;\n    }\n  }\n\n  handleKeyUp(event: KeyboardEvent) {\n    event.preventDefault();\n\n    if (event.key === 'Escape') {\n      this.opened = false;\n    }\n\n    if (event.key === 'Enter' || event.code === 'Space') {\n      this.toggle(event);\n    }\n  }\n\n  handleFocusableDown(event: KeyboardEvent) {\n    const firstFocusable = this.focusableElements[0] as HTMLElement;\n    const lastFocusable = this.focusableElements[this.focusableElements.length - 1] as HTMLElement;\n\n    if (event.key === 'Tab') {\n      if (event.shiftKey && document.activeElement === firstFocusable) {\n        event.preventDefault();\n        lastFocusable.focus();\n      } else if (!event.shiftKey && document.activeElement === lastFocusable) {\n        event.preventDefault();\n        firstFocusable.focus();\n      }\n    }\n  }\n }\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-popper': KemetPopper\n  }\n}\n"]}
+{"version":3,"file":"kemet-popper.js","sourceRoot":"","sources":["../../../src/components/kemet-popper/kemet-popper.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement } from 'lit';\nimport {\n  customElement, property, query, queryAll, state,\n} from 'lit/decorators.js';\nimport { createPopper } from '@popperjs/core/dist/esm';\nimport { emitEvent } from '../../utilities/misc/events';\nimport { TypeFireOn, TypePlacement } from './types';\nimport { stylesPopper } from './styles';\n// import { stylesPopperFade, stylesPopperScale, stylesPopperSlide, stylesPopperFall, stylesPopperFlipHorizontal, stylesPopperFlipVertical, stylesPopperSign, stylesPopperSuperScaled } from './styles.effects';\n\n/**\n * @since 2.0.0\n * @status stable\n *\n * @tagname kemet-popper\n * @summary A wrapper component for the popper.js lib.\n *\n * @event kemet-popper-opened - Fires when the popper opens\n * @event kemet-popper-closed - Fires when the popper closes\n *\n * @slot trigger - Controls opening and closing the popover.\n * @slot content - The contents of the popover.\n *\n * @csspart trigger - Contains the trigger for the popover.\n * @csspart content - Contains the content for the popover.\n *\n * @cssproperty --kemet-popper-padding - The padding in the content slot.\n * @cssproperty --kemet-popper-border-color - The border color of the content.\n * @cssproperty --kemet-popper-background-color - The background color of the content.\n *\n * @prop {TypePlacement} placement - The position of the popper over the trigger.\n * @prop {boolean} opened - Determines if the Popper is opened or closed\n * @prop {TypeFireOn} fireOn - Activate the Popper on Click or Hover\n * @prop {string} strategy - Sets the strategy option in Popper's api\n * @prop {number} skidding - Sets an offset to the Popper from the trigger\n * @prop {number} distance - Sets spacing between the Popper and the trigger\n *\n */\n\n@customElement('kemet-popper')\nexport default class KemetPopper extends LitElement {\n  static styles = [stylesPopper];\n\n  @property({ type: String, reflect: true })\n  placement: TypePlacement = 'top';\n\n  @property({ type: Boolean, reflect: true })\n  opened: boolean;\n\n  @property({ type: String, attribute: 'fire-on' })\n  fireOn: TypeFireOn = 'hover';\n\n  @property({ type: String })\n  strategy: 'fixed' | 'absolute' = 'fixed';\n\n  @property({ type: Number })\n  skidding: number = 0;\n\n  @property({ type: Number })\n  distance: number = 0;\n\n  /** @internal */\n  @state()\n  popperInstance: { setOptions: (arg0: { placement: TypePlacement; strategy: 'fixed' | 'absolute'; modifiers: { name: string; options: { offset: number[]; }; }[]; }) => void; };\n\n  /** @internal */\n  @query('#trigger')\n  triggerElement: HTMLElement;\n\n  /** @internal */\n  @query('#content')\n  contentElement: HTMLElement;\n\n  /** @internal */\n  @queryAll('body, a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, *[tabindex], *[contenteditable], kemet-popper-close')\n  focusableElements: NodeListOf<Element>;\n\n  constructor() {\n    super();\n    this.addEventListener('kemet-popper-close-btn', () => { this.opened = false; });\n  }\n\n  firstUpdated() {\n    if (this.fireOn === 'click') {\n      this.focusableElements.forEach((element) => {\n        element.addEventListener('keydown', (event: KeyboardEvent) => this.handleFocusableDown(event));\n      });\n    }\n  }\n\n  updated(prevProps: Map<string, never>) {\n    this.refresh();\n\n    if (!prevProps.get('opened') && this.opened === true) {\n      emitEvent(this, 'kemet-popper-opened', this);\n    }\n\n    if (prevProps.get('opened') && this.opened === false) {\n      emitEvent(this, 'kemet-popper-closed', this);\n    }\n  }\n\n  render() {\n    // eslint-disable-next-line lit-a11y/mouse-events-have-key-events\n    return html`\n      <div\n        id=\"trigger\"\n        part=\"trigger\"\n        tabIndex=\"0\"\n        @click=${this.fireOn === 'click' ? (event: MouseEvent) => this.toggle(event) : null}\n        @keyup=${this.fireOn === 'click' ? (event: KeyboardEvent) => this.handleKeyUp(event) : null}\n        @mouseover=${this.fireOn !== 'click' ? () => { this.opened = true; } : null}\n        @focus=${this.fireOn !== 'click' ? () => { this.opened = true; } : null}\n        @mouseout=${this.fireOn !== 'click' ? () => { this.opened = false; } : null}\n        @blur=${this.fireOn !== 'click' ? () => { this.opened = false; } : null}\n      >\n        <slot name=\"trigger\"></slot>\n      </div>\n      <div\n        id=\"content\"\n        @mouseover=${this.fireOn !== 'click' ? () => { this.opened = true; } : null}\n        @mouseout=${this.fireOn !== 'click' ? () => { this.opened = false; } : null}\n      >\n        <slot name=\"content\" @slotchange=${() => this.makePopper()}></slot>\n      </div>\n    `;\n  }\n\n  refresh() {\n    this.popperInstance?.setOptions({\n      placement: this.placement,\n      strategy: this.strategy,\n      modifiers: [\n        { name: 'offset', options: { offset: [this.skidding, this.distance] } },\n      ],\n    });\n  }\n\n  makePopper() {\n    this.popperInstance = createPopper(this.triggerElement, this.contentElement, {\n      placement: this.placement,\n      strategy: this.strategy,\n      modifiers: [\n        { name: 'offset', options: { offset: [this.skidding, this.distance] } },\n      ],\n    });\n  }\n\n  toggle(event: MouseEvent | KeyboardEvent) {\n    const target = event.target as HTMLElement;\n    const isSlotTrigger = target.getAttribute('slot') === 'trigger';\n    const isPartTrigger = target.getAttribute('part') === 'trigger';\n\n    if (isSlotTrigger || isPartTrigger) {\n      this.opened = !this.opened;\n    }\n  }\n\n  handleKeyUp(event: KeyboardEvent) {\n    event.preventDefault();\n\n    if (event.key === 'Escape') {\n      this.opened = false;\n    }\n\n    if (event.key === 'Enter' || event.code === 'Space') {\n      this.toggle(event);\n    }\n  }\n\n  handleFocusableDown(event: KeyboardEvent) {\n    const firstFocusable = this.focusableElements[0] as HTMLElement;\n    const lastFocusable = this.focusableElements[this.focusableElements.length - 1] as HTMLElement;\n\n    if (event.key === 'Tab') {\n      if (event.shiftKey && document.activeElement === firstFocusable) {\n        event.preventDefault();\n        lastFocusable.focus();\n      } else if (!event.shiftKey && document.activeElement === lastFocusable) {\n        event.preventDefault();\n        firstFocusable.focus();\n      }\n    }\n  }\n }\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-popper': KemetPopper\n  }\n}\n"]}

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

@@ -1,3 +1,3 @@
-export declare type TypePlacement = 'auto' | 'auto-start' | 'auto-end' | 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'right' | 'right-start' | 'right-end' | 'left' | 'left-start' | 'left-end';
-export declare type TypeFireOn = 'click' | 'hover';
-export declare type TypeEffect = 'none' | 'fade' | 'scale' | 'slide' | 'fall' | 'flip-horizontal' | 'flip-vertical' | 'sign' | 'super-scaled';
+export type TypePlacement = 'auto' | 'auto-start' | 'auto-end' | 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'right' | 'right-start' | 'right-end' | 'left' | 'left-start' | 'left-end';
+export type TypeFireOn = 'click' | 'hover';
+export type TypeEffect = 'none' | 'fade' | 'scale' | 'slide' | 'fall' | 'flip-horizontal' | 'flip-vertical' | 'sign' | 'super-scaled';

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

@@ -6,7 +6,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 Vertical: Story;
 export declare const Filled: Story;

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

@@ -1 +1 @@
-{"version":3,"file":"kemet-radio.js","sourceRoot":"","sources":["../../../src/components/kemet-radio/kemet-radio.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAS,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC1E,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC;AAC9C,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AACxD,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAGvC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AAGH,IAAqB,UAAU,GAA/B,MAAqB,UAAW,SAAQ,UAAU;IAAlD;;QAIE,UAAK,GAAW,EAAE,CAAC;QAYnB,aAAQ,GAAY,KAAK,CAAC;IA0E5B,CAAC;IA/DC,YAAY;QACV,MAAM,aAAa,GAAG,IAAI,CAAC,OAAO,CAAC,cAAc,CAAwB,CAAC;QAE1E,IAAI,CAAC,IAAI,GAAG,aAAa,CAAC,IAAI,IAAI,cAAc,CAAC;QACjD,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;QACpD,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;QAEnC,IAAI,IAAI,CAAC,OAAO,EAAE;YAChB,IAAI,CAAC,YAAY,CAAC,cAAc,EAAE,MAAM,CAAC,CAAC;SAC3C;aAAM;YACL,IAAI,CAAC,YAAY,CAAC,cAAc,EAAE,OAAO,CAAC,CAAC;SAC5C;IACH,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;;;iBAIE,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC;mBAClB,IAAI,CAAC,KAAK;qBACR,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC;sBACjB,IAAI,CAAC,QAAQ;kBACjB,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,EAAE;mBACtB,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE;;2CAEA,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,OAAO,EAAE;4BAC3C,IAAI,CAAC,KAAK;;KAEjC,CAAC;IACJ,CAAC;IAED,KAAK;QACH,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC;IACrB,CAAC;IAED,IAAI;QACF,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;IACpB,CAAC;IAED,KAAK;QACH,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC;IACrB,CAAC;IAED,UAAU;QACR,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;QACrB,SAAS,CAAC,IAAI,EAAE,qBAAqB,EAAE,KAAK,CAAC,CAAC;IAChD,CAAC;IAED,WAAW;QACT,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;QACpB,SAAS,CAAC,IAAI,EAAE,qBAAqB,EAAE,IAAI,CAAC,CAAC;IAC/C,CAAC;IAED,OAAO;QACL,IAAI,IAAI,CAAC,OAAO,EAAE;YAChB,OAAO,IAAI,CAAA;;OAEV,CAAC;SACH;QAED,OAAO,IAAI,CAAC;IACd,CAAC;CACF,CAAA;AAzFQ,iBAAM,GAAG,CAAC,WAAW,CAAC,CAAC;AAG9B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yCACR;AAGnB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CAC1B;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCACd;AAGb;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yCACb;AAGd;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;4CACjB;AAG1B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CAC1B;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0CAC3B;AAGhB;IADC,KAAK,EAAE;yCACgB;AAzBL,UAAU;IAD9B,aAAa,CAAC,aAAa,CAAC;GACR,UAAU,CA0F9B;eA1FoB,UAAU","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 { emitEvent } from '../../utilities/misc/events';\nimport { stylesRadio } from './styles';\nimport { KemetRadioInterface } from './types';\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-radio\n * @summary An enhanced radio button.\n *\n * @prop {string} label - The text next to the radio button\n * @prop {boolean} checked - Determines whether or not the button is checked\n * @prop {string} name - The name of the field\n * @prop {string} value - The value of the radio button\n * @prop {boolean} disabled - Determines if the button should be disabled\n * @prop {boolean} focused - Is true when the button is focused on\n * @prop {boolean} filled - Displayed the button as a filled button\n *\n * @csspart label - The label that contains the radio button.\n * @csspart button - The radio button.\n * @csspart text - The text next to the radio button.\n * @csspart dot - The circle that fills the radio button.\n *\n * @cssproperty --kemet-radio-size - The size of the radio button.\n * @cssproperty --kemet-radio-border - The outer border of the radio button.\n * @cssproperty --kemet-radio-dot-color - The color of the radio button's dot.\n * @cssproperty --kemet-radio-dot-border-width - The border width of the radio button's dot.\n * @cssproperty --kemet-radio-dot-border-color - The border color of the radio button's dot.\n * @cssproperty --kemet-radio-dot-color-filled - The filled color of the radio button.\n * @cssproperty --kemet-radio-dot-ring-color - The ring color of the radio button's dot.\n *\n * @event kemet-radio-focused -  Fires when the checkbox loses or receives focus\n * @event kemet-radio-focused - Fires when the checkbox loses or receives focus\n *\n */\n\n@customElement('kemet-radio')\nexport default class KemetRadio extends LitElement {\n  static styles = [stylesRadio];\n\n  @property({ type: String })\n  label: string = '';\n\n  @property({ type: Boolean, reflect: true })\n  checked: boolean;\n\n  @property({ type: String })\n  name: string;\n\n  @property({ type: String })\n  value: string;\n\n  @property({ type: Boolean, reflect: true })\n  disabled: boolean = false;\n\n  @property({ type: Boolean, reflect: true })\n  focused: boolean;\n\n  @property({ type: Boolean, reflect: true })\n  filled: boolean;\n\n  @state()\n  input: HTMLInputElement;\n\n  firstUpdated() {\n    const radiosElement = this.closest('kemet-radios') as KemetRadioInterface;\n\n    this.name = radiosElement.name || 'radio-button';\n    this.input = this.shadowRoot.querySelector('input');\n    this.setAttribute('role', 'radio');\n\n    if (this.checked) {\n      this.setAttribute('aria-checked', 'true');\n    } else {\n      this.setAttribute('aria-checked', 'false');\n    }\n  }\n\n  render() {\n    return html`\n      <label part=\"label\">\n        <input\n          type=\"radio\"\n          name=${ifDefined(this.name)}\n          .value=${this.value}\n          .checked=${live(this.checked)}\n          .disabled=${this.disabled}\n          @blur=${() => this.handleBlur()}\n          @focus=${() => this.handleFocus()}\n        />\n        <button part=\"button\" aria-label=${this.label}>${this.makeDot()}</button>\n        <span part=\"text\">${this.label}</span>\n      </label>\n    `;\n  }\n\n  click() {\n    this.input.click();\n  }\n\n  blur() {\n    this.input.blur();\n  }\n\n  focus() {\n    this.input.focus();\n  }\n\n  handleBlur() {\n    this.focused = false;\n    emitEvent(this, 'kemet-radio-focused', false);\n  }\n\n  handleFocus() {\n    this.focused = true;\n    emitEvent(this, 'kemet-radio-focused', true);\n  }\n\n  makeDot() {\n    if (this.checked) {\n      return html`\n        <span part=\"dot\"></span>\n      `;\n    }\n\n    return null;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-radio': KemetRadio\n  }\n}\n"]}
+{"version":3,"file":"kemet-radio.js","sourceRoot":"","sources":["../../../src/components/kemet-radio/kemet-radio.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 { emitEvent } from '../../utilities/misc/events';\nimport { stylesRadio } from './styles';\nimport { KemetRadioInterface } from './types';\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-radio\n * @summary An enhanced radio button.\n *\n * @prop {string} label - The text next to the radio button\n * @prop {boolean} checked - Determines whether or not the button is checked\n * @prop {string} name - The name of the field\n * @prop {string} value - The value of the radio button\n * @prop {boolean} disabled - Determines if the button should be disabled\n * @prop {boolean} focused - Is true when the button is focused on\n * @prop {boolean} filled - Displayed the button as a filled button\n *\n * @csspart label - The label that contains the radio button.\n * @csspart button - The radio button.\n * @csspart text - The text next to the radio button.\n * @csspart dot - The circle that fills the radio button.\n *\n * @cssproperty --kemet-radio-size - The size of the radio button.\n * @cssproperty --kemet-radio-border - The outer border of the radio button.\n * @cssproperty --kemet-radio-dot-color - The color of the radio button's dot.\n * @cssproperty --kemet-radio-dot-border-width - The border width of the radio button's dot.\n * @cssproperty --kemet-radio-dot-border-color - The border color of the radio button's dot.\n * @cssproperty --kemet-radio-dot-color-filled - The filled color of the radio button.\n * @cssproperty --kemet-radio-dot-ring-color - The ring color of the radio button's dot.\n *\n * @event kemet-radio-focused -  Fires when the checkbox loses or receives focus\n * @event kemet-radio-focused - Fires when the checkbox loses or receives focus\n *\n */\n\n@customElement('kemet-radio')\nexport default class KemetRadio extends LitElement {\n  static styles = [stylesRadio];\n\n  @property({ type: String })\n  label: string = '';\n\n  @property({ type: Boolean, reflect: true })\n  checked: boolean;\n\n  @property({ type: String })\n  name: string;\n\n  @property({ type: String })\n  value: string;\n\n  @property({ type: Boolean, reflect: true })\n  disabled: boolean = false;\n\n  @property({ type: Boolean, reflect: true })\n  focused: boolean;\n\n  @property({ type: Boolean, reflect: true })\n  filled: boolean;\n\n  @state()\n  input: HTMLInputElement;\n\n  firstUpdated() {\n    const radiosElement = this.closest('kemet-radios') as KemetRadioInterface;\n\n    this.name = radiosElement.name || 'radio-button';\n    this.input = this.shadowRoot.querySelector('input');\n    this.setAttribute('role', 'radio');\n\n    if (this.checked) {\n      this.setAttribute('aria-checked', 'true');\n    } else {\n      this.setAttribute('aria-checked', 'false');\n    }\n  }\n\n  render() {\n    return html`\n      <label part=\"label\">\n        <input\n          type=\"radio\"\n          name=${ifDefined(this.name)}\n          .value=${this.value}\n          .checked=${live(this.checked)}\n          .disabled=${this.disabled}\n          @blur=${() => this.handleBlur()}\n          @focus=${() => this.handleFocus()}\n        />\n        <button part=\"button\" aria-label=${this.label}>${this.makeDot()}</button>\n        <span part=\"text\">${this.label}</span>\n      </label>\n    `;\n  }\n\n  click() {\n    this.input.click();\n  }\n\n  blur() {\n    this.input.blur();\n  }\n\n  focus() {\n    this.input.focus();\n  }\n\n  handleBlur() {\n    this.focused = false;\n    emitEvent(this, 'kemet-radio-focused', false);\n  }\n\n  handleFocus() {\n    this.focused = true;\n    emitEvent(this, 'kemet-radio-focused', true);\n  }\n\n  makeDot() {\n    if (this.checked) {\n      return html`\n        <span part=\"dot\"></span>\n      `;\n    }\n\n    return null;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-radio': KemetRadio\n  }\n}\n"]}

package/dist/components/kemet-radio/kemet-radios.js.map

@@ -1 +1 @@
-{"version":3,"file":"kemet-radios.js","sourceRoot":"","sources":["../../../src/components/kemet-radio/kemet-radios.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { FormSubmitController } from '../../utilities/controllers/forms';\nimport { emitEvent } from '../../utilities/misc/events';\nimport { stylesRadios } from './styles';\nimport { TypeAxis, TypeStatus } from './types';\n\nimport type KemetRadio from './kemet-radio';\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-radios\n * @summary A group of radio buttons.\n *\n * @prop {string} legend - The legend text for the fieldset\n * @prop {string} axis - The direction of the button's layout\n * @prop {string} value - The value of the selected radio button\n * @prop {string} name - The name of the radio button set\n * @prop {string} status - The status of the radio button set\n * @prop {string} message - Validation message for the user\n * @prop {boolean} required - Determines whether the radio button set is required\n *\n * @csspart fieldset - The fieldset element.\n * @csspart legend - The legend element.\n *\n * @event kemet-radios-change - Fires when the state of the checkbox changes\n *\n */\n\n@customElement('kemet-radios')\nexport default class KemetRadios extends LitElement {\n  formSubmitController: FormSubmitController;\n\n  static styles = [stylesRadios];\n\n  @property({ type: String })\n  legend: string = '';\n\n  @property({ type: String, reflect: true })\n  axis: TypeAxis = 'horizontal';\n\n  @property({ type: String })\n  value: string;\n\n  @property({ type: String })\n  name: string = 'radios';\n\n  @property({ type: String, reflect: true })\n  status: TypeStatus = 'standard';\n\n  @property({ type: String })\n  message: string;\n\n  @property({ type: Boolean })\n  required: boolean;\n\n  @state()\n  radios: NodeListOf<KemetRadio>;\n\n  constructor() {\n    super();\n\n    /** @internal */\n    this.formSubmitController = new FormSubmitController(this);\n  }\n\n  firstUpdated() {\n    this.radios = this.querySelectorAll('kemet-radio');\n    this.setAttribute('role', 'radiogroup');\n  }\n\n  render() {\n    return html`\n      <fieldset part=\"fieldset\">\n        ${this.legend !== '' ? html`<legend part=\"legend\">${this.legend}</legend>` : null}\n        <slot @click=${(event: MouseEvent) => this.handleClick(event)} @keydown=${(event: KeyboardEvent) => this.handleKeyDown(event)} @slotchange=${() => this.handleSlotChange()}></slot>\n      </fieldset>\n      ${this.makeMessage()}\n    `;\n  }\n\n  handleClick(event: MouseEvent) {\n    const target = event.target as KemetRadio;\n\n    this.radios.forEach((radio) => {\n      radio.checked = false;\n      radio.tabIndex = radio === target ? 0 : -1;\n      radio.setAttribute('aria-checked', 'false');\n    });\n\n    if (!target.disabled) {\n      target.checked = true;\n      target.setAttribute('aria-checked', 'true');\n      this.value = target.value;\n      this.status = 'standard';\n\n      emitEvent(this, 'kemet-radios-change', target);\n    }\n  }\n\n  handleKeyDown(event: KeyboardEvent) {\n    const radios = Array.from(this.radios);\n    const arrowKeys = ['ArrowUp', 'ArrowRight', 'ArrowDown', 'ArrowLeft'];\n    const forwardKeys = ['ArrowRight', 'ArrowDown'];\n    const shift: number = forwardKeys.includes(event.key) ? 1 : -1;\n    const checkedIndex: number | KemetRadio = radios.findIndex((radio: KemetRadio) => radio.checked) ?? radios[0];\n\n    let index: number;\n\n    if (typeof checkedIndex === 'number') {\n      index = checkedIndex + shift;\n    } else {\n      index = shift;\n    }\n\n    if (arrowKeys.includes(event.key)) {\n      if (index < 0) {\n        index = radios.length - 1;\n      }\n\n      if (index > radios.length - 1) {\n        index = 0;\n      }\n\n      this.radios.forEach((radio) => {\n        radio.checked = false;\n        radio.tabIndex = -1;\n      });\n\n      this.radios[index].focus();\n      this.radios[index].checked = true;\n      this.radios[index].tabIndex = 0;\n    }\n  }\n\n  handleSlotChange() {\n    const radios = Array.from(this.radios);\n    const checkedRadio = radios.find((radio: KemetRadio) => radio.checked) as KemetRadio;\n\n    this.radios.forEach((radio: KemetRadio) => {\n      radio.tabIndex = -1;\n      radio.input.tabIndex = -1;\n    });\n\n    if (checkedRadio) {\n      checkedRadio.tabIndex = 0;\n    }\n  }\n\n  makeMessage() {\n    if (this.status === 'error' || this.status === 'warning') {\n      return html`<span part=\"message\">${this.message}</span>`;\n    }\n\n    return null;\n  }\n\n  checkValidity() {\n    if (this.required) {\n      return !!this.value;\n    }\n\n    return true;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-radios': KemetRadios\n  }\n}\n"]}
+{"version":3,"file":"kemet-radios.js","sourceRoot":"","sources":["../../../src/components/kemet-radio/kemet-radios.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { FormSubmitController } from '../../utilities/controllers/forms';\nimport { emitEvent } from '../../utilities/misc/events';\nimport { stylesRadios } from './styles';\nimport { TypeAxis, TypeStatus } from './types';\n\nimport type KemetRadio from './kemet-radio';\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-radios\n * @summary A group of radio buttons.\n *\n * @prop {string} legend - The legend text for the fieldset\n * @prop {string} axis - The direction of the button's layout\n * @prop {string} value - The value of the selected radio button\n * @prop {string} name - The name of the radio button set\n * @prop {string} status - The status of the radio button set\n * @prop {string} message - Validation message for the user\n * @prop {boolean} required - Determines whether the radio button set is required\n *\n * @csspart fieldset - The fieldset element.\n * @csspart legend - The legend element.\n *\n * @event kemet-radios-change - Fires when the state of the checkbox changes\n *\n */\n\n@customElement('kemet-radios')\nexport default class KemetRadios extends LitElement {\n  formSubmitController: FormSubmitController;\n\n  static styles = [stylesRadios];\n\n  @property({ type: String })\n  legend: string = '';\n\n  @property({ type: String, reflect: true })\n  axis: TypeAxis = 'horizontal';\n\n  @property({ type: String })\n  value: string;\n\n  @property({ type: String })\n  name: string = 'radios';\n\n  @property({ type: String, reflect: true })\n  status: TypeStatus = 'standard';\n\n  @property({ type: String })\n  message: string;\n\n  @property({ type: Boolean })\n  required: boolean;\n\n  @state()\n  radios: NodeListOf<KemetRadio>;\n\n  constructor() {\n    super();\n\n    /** @internal */\n    this.formSubmitController = new FormSubmitController(this);\n  }\n\n  firstUpdated() {\n    this.radios = this.querySelectorAll('kemet-radio');\n    this.setAttribute('role', 'radiogroup');\n  }\n\n  render() {\n    return html`\n      <fieldset part=\"fieldset\">\n        ${this.legend !== '' ? html`<legend part=\"legend\">${this.legend}</legend>` : null}\n        <slot @click=${(event: MouseEvent) => this.handleClick(event)} @keydown=${(event: KeyboardEvent) => this.handleKeyDown(event)} @slotchange=${() => this.handleSlotChange()}></slot>\n      </fieldset>\n      ${this.makeMessage()}\n    `;\n  }\n\n  handleClick(event: MouseEvent) {\n    const target = event.target as KemetRadio;\n\n    this.radios.forEach((radio) => {\n      radio.checked = false;\n      radio.tabIndex = radio === target ? 0 : -1;\n      radio.setAttribute('aria-checked', 'false');\n    });\n\n    if (!target.disabled) {\n      target.checked = true;\n      target.setAttribute('aria-checked', 'true');\n      this.value = target.value;\n      this.status = 'standard';\n\n      emitEvent(this, 'kemet-radios-change', target);\n    }\n  }\n\n  handleKeyDown(event: KeyboardEvent) {\n    const radios = Array.from(this.radios);\n    const arrowKeys = ['ArrowUp', 'ArrowRight', 'ArrowDown', 'ArrowLeft'];\n    const forwardKeys = ['ArrowRight', 'ArrowDown'];\n    const shift: number = forwardKeys.includes(event.key) ? 1 : -1;\n    const checkedIndex: number | KemetRadio = radios.findIndex((radio: KemetRadio) => radio.checked) ?? radios[0];\n\n    let index: number;\n\n    if (typeof checkedIndex === 'number') {\n      index = checkedIndex + shift;\n    } else {\n      index = shift;\n    }\n\n    if (arrowKeys.includes(event.key)) {\n      if (index < 0) {\n        index = radios.length - 1;\n      }\n\n      if (index > radios.length - 1) {\n        index = 0;\n      }\n\n      this.radios.forEach((radio) => {\n        radio.checked = false;\n        radio.tabIndex = -1;\n      });\n\n      this.radios[index].focus();\n      this.radios[index].checked = true;\n      this.radios[index].tabIndex = 0;\n    }\n  }\n\n  handleSlotChange() {\n    const radios = Array.from(this.radios);\n    const checkedRadio = radios.find((radio: KemetRadio) => radio.checked) as KemetRadio;\n\n    this.radios.forEach((radio: KemetRadio) => {\n      radio.tabIndex = -1;\n      radio.input.tabIndex = -1;\n    });\n\n    if (checkedRadio) {\n      checkedRadio.tabIndex = 0;\n    }\n  }\n\n  makeMessage() {\n    if (this.status === 'error' || this.status === 'warning') {\n      return html`<span part=\"message\">${this.message}</span>`;\n    }\n\n    return null;\n  }\n\n  checkValidity() {\n    if (this.required) {\n      return !!this.value;\n    }\n\n    return true;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-radios': KemetRadios\n  }\n}\n"]}

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

@@ -0,0 +1,3 @@
+import './kemet-radio';
+import './kemet-radios';
+import '../kemet-button/kemet-button';