kemet-ui 3.1.0 → 4.0.0

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

@@ -1,119 +0,0 @@
-import { LitElement, TemplateResult } from 'lit';
-import { FormSubmitController } from '../../utilities/controllers/forms';
-import { KemetFieldInterface } from '../kemet-field/types';
-import type KemetOption from './kemet-option';
-/**
- * @since 1.0.0
- * @status stable
- *
- * @tagname kemet-select
- * @summary An enhanced select element.
- *
- * @prop {string} slug - A string the uniquely identifies the select
- * @prop {string} name - The name of the select
- * @prop {string} value - The value of the select
- * @prop {array} options - The options the select contains
- * @prop {string} status - The status of the select
- * @prop {boolean} required - Determines whether the field is required
- * @prop {boolean} disabled - Determines whether the field is disabled
- * @prop {boolean} multiple - Support of multiple choice selections
- * @prop {string} icon - The dropdown icon
- * @prop {number} iconSize - The dropdown icon size
- * @prop {boolean} filled - Displays a filled select
- * @prop {boolean} rounded - Displays rounded corners
- *
- * @csspart select
- *
- * @cssproperty --kemet-select-padding - The padding on the textarea.
- * @cssproperty --kemet-select-border - The border of the textarea.
- * @cssproperty --kemet-select-border-color-error - The border of the error state.
- * @cssproperty --kemet-select-border-color-success - The border of the success state.
- * @cssproperty --kemet-select-border-color-warning - The border of the warning state.
- * @cssproperty --kemet-select-border-radius-rounded - The border radius on rounded.
- * @cssproperty --kemet-select-border-filled - The border on filled.
- * @cssproperty --kemet-select-color-filled - The color on filled.
- * @cssproperty --kemet-select-background-color-filled - The background-color on filled.
- * @cssproperty --kemet-select-background-color-error - The error state background color.
- * @cssproperty --kemet-select-background-color-success - The success state background color.
- * @cssproperty --kemet-select-background-color-warning - The warning state background color.
- * @cssproperty --kemet-select-icon-right - The space on the right of the icon.
- *
- * @event kemet-input-focused - Fires when the input receives and loses focus
- * @event kemet-input-status - Fires when there's a change in status
- * @event kemet-input-change - Fires when the select input changes
- *
- */
-interface IOptions {
-    label: string;
-    value: string;
-    disabled: boolean;
-    selected: boolean;
-}
-export default class KemetSelect extends LitElement {
-    formSubmitController: FormSubmitController;
-    static styles: import("lit").CSSResult[];
-    slug: string;
-    name: string;
-    value: string;
-    options: IOptions[];
-    status: string;
-    required: boolean;
-    disabled: boolean;
-    multiple: boolean;
-    icon: string;
-    iconSize: number;
-    filled: boolean;
-    rounded: boolean;
-    invalid: boolean;
-    control: KemetFieldInterface;
-    select: HTMLSelectElement;
-    selectedOption: HTMLOptionElement;
-    optionElements: NodeListOf<KemetOption>;
-    hasFocus: boolean;
-    constructor();
-    firstUpdated(): void;
-    render(): TemplateResult<1>;
-    /**
-     * Generates the option elements
-     * @private
-     * @returns {TemplateResult} An option element
-     */
-    makeOptions(): TemplateResult<1>[];
-    /**
-     * Generates a dropdown icon
-     * @private
-     */
-    makeIcon(): TemplateResult<1>;
-    /**
-     * Handles when the input receives focus
-     * @private
-     */
-    handleFocus(): void;
-    /**
-     * Handles when the input loses focus
-     * @private
-     */
-    handleBlur(): void;
-    /**
-     * Handles when the input changes value
-     * @private
-     */
-    handleChange(): void;
-    /**
-     * Handles when the input has an error
-     * @private
-     */
-    handleInvalid(): void;
-    /**
-     * Checks the validity of the standard select
-     * @public
-     * @returns {boolean}
-     */
-    checkValidity(): boolean;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'kemet-select': KemetSelect;
-    }
-}
-export {};

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

@@ -1,198 +0,0 @@
-import { __decorate } from "tslib";
-import { html, LitElement } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
-import { FormSubmitController } from '../../utilities/controllers/forms';
-import { emitEvent } from '../../utilities/misc/events';
-import { stylesSelect } from './styles';
-let KemetSelect = class KemetSelect extends LitElement {
-    constructor() {
-        super();
-        this.name = 'select';
-        this.icon = 'chevron-down';
-        this.iconSize = 16;
-        /** @internal */
-        this.formSubmitController = new FormSubmitController(this);
-        /** @internal */
-        this.control = this.closest('kemet-field');
-    }
-    firstUpdated() {
-        this.select = this.shadowRoot.querySelector('select');
-        this.selectedOption = this.querySelector('[selected]');
-        this.value = this.selectedOption ? this.selectedOption.value : '';
-    }
-    render() {
-        return html `
-      <select
-        part="select"
-        id=${this.slug}
-        name=${this.name}
-        ?required=${this.required}
-        ?disabled=${this.disabled}
-        ?multiple=${this.multiple}
-        @change=${this.handleChange}
-        @focus=${this.handleFocus}
-        @blur=${this.handleBlur}
-        @invalid=${this.handleInvalid}
-      >
-        ${this.makeOptions()}
-      </select>
-      ${this.makeIcon()}
-      <slot @slotchange=${() => this.makeOptions()}></slot>
-    `;
-    }
-    /**
-     * Generates the option elements
-     * @private
-     * @returns {TemplateResult} An option element
-     */
-    makeOptions() {
-        this.options = [];
-        this.optionElements = this.querySelectorAll('kemet-option');
-        this.optionElements.forEach((option) => {
-            this.options = this.options.concat({
-                label: option.label,
-                value: option.value,
-                disabled: option.disabled,
-                selected: option.selected,
-            });
-        });
-        return this.options.map(option => html `<option value=${option.value} ?disabled=${option.disabled} ?selected=${option.selected}>
-          ${option.label}
-        </option>`);
-    }
-    /**
-     * Generates a dropdown icon
-     * @private
-     */
-    makeIcon() {
-        if (this.icon || this.icon !== '') {
-            return html `<kemet-icon icon=${this.icon} size=${this.iconSize}></kemet-icon>`;
-        }
-        return null;
-    }
-    /**
-     * Handles when the input receives focus
-     * @private
-     */
-    handleFocus() {
-        this.hasFocus = true;
-        emitEvent(this, 'kemet-input-focused', true);
-    }
-    /**
-     * Handles when the input loses focus
-     * @private
-     */
-    handleBlur() {
-        this.hasFocus = false;
-        emitEvent(this, 'kemet-input-focused', false);
-        this.select.checkValidity();
-        if (!this.select.checkValidity()) {
-            this.invalid = true;
-            this.status = 'error';
-            this.control.status = 'error';
-            emitEvent(this, 'kemet-input-status', {
-                status: 'error',
-                validity: this.select.validity,
-                element: this,
-            });
-        }
-    }
-    /**
-     * Handles when the input changes value
-     * @private
-     */
-    handleChange() {
-        this.value = this.select.value;
-        emitEvent(this, 'kemet-input-change', this.value);
-        if (this.select.checkValidity()) {
-            this.invalid = false;
-            this.status = 'standard';
-            emitEvent(this, 'kemet-input-status', {
-                status: 'standard',
-                validity: this.select.validity,
-                element: this,
-            });
-        }
-    }
-    /**
-     * Handles when the input has an error
-     * @private
-     */
-    handleInvalid() {
-        this.invalid = true;
-        this.status = 'error';
-        emitEvent(this, 'kemet-input-status', {
-            status: 'error',
-            validity: this.select.validity,
-            element: this,
-        });
-    }
-    /**
-     * Checks the validity of the standard select
-     * @public
-     * @returns {boolean}
-     */
-    checkValidity() {
-        return this.select.checkValidity();
-    }
-};
-KemetSelect.styles = [stylesSelect];
-__decorate([
-    property({ type: String })
-], KemetSelect.prototype, "slug", void 0);
-__decorate([
-    property({ type: String })
-], KemetSelect.prototype, "name", void 0);
-__decorate([
-    property({ type: String })
-], KemetSelect.prototype, "value", void 0);
-__decorate([
-    property({ type: Array })
-], KemetSelect.prototype, "options", void 0);
-__decorate([
-    property({ type: String, reflect: true })
-], KemetSelect.prototype, "status", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], KemetSelect.prototype, "required", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], KemetSelect.prototype, "disabled", void 0);
-__decorate([
-    property({ type: Boolean })
-], KemetSelect.prototype, "multiple", void 0);
-__decorate([
-    property({ type: String })
-], KemetSelect.prototype, "icon", void 0);
-__decorate([
-    property({ type: Number, attribute: 'icon-size' })
-], KemetSelect.prototype, "iconSize", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], KemetSelect.prototype, "filled", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], KemetSelect.prototype, "rounded", void 0);
-__decorate([
-    state()
-], KemetSelect.prototype, "invalid", void 0);
-__decorate([
-    state()
-], KemetSelect.prototype, "control", void 0);
-__decorate([
-    state()
-], KemetSelect.prototype, "select", void 0);
-__decorate([
-    state()
-], KemetSelect.prototype, "selectedOption", void 0);
-__decorate([
-    state()
-], KemetSelect.prototype, "optionElements", void 0);
-__decorate([
-    state()
-], KemetSelect.prototype, "hasFocus", void 0);
-KemetSelect = __decorate([
-    customElement('kemet-select')
-], KemetSelect);
-export default KemetSelect;
-//# sourceMappingURL=kemet-select.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"kemet-select.js","sourceRoot":"","sources":["../../../src/components/kemet-select/kemet-select.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, TemplateResult } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { FormSubmitController } from '../../utilities/controllers/forms';\nimport { emitEvent } from '../../utilities/misc/events';\nimport { KemetFieldInterface } from '../kemet-field/types';\nimport { stylesSelect } from './styles';\n\nimport type KemetOption from './kemet-option';\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-select\n * @summary An enhanced select element.\n *\n * @prop {string} slug - A string the uniquely identifies the select\n * @prop {string} name - The name of the select\n * @prop {string} value - The value of the select\n * @prop {array} options - The options the select contains\n * @prop {string} status - The status of the select\n * @prop {boolean} required - Determines whether the field is required\n * @prop {boolean} disabled - Determines whether the field is disabled\n * @prop {boolean} multiple - Support of multiple choice selections\n * @prop {string} icon - The dropdown icon\n * @prop {number} iconSize - The dropdown icon size\n * @prop {boolean} filled - Displays a filled select\n * @prop {boolean} rounded - Displays rounded corners\n *\n * @csspart select\n *\n * @cssproperty --kemet-select-padding - The padding on the textarea.\n * @cssproperty --kemet-select-border - The border of the textarea.\n * @cssproperty --kemet-select-border-color-error - The border of the error state.\n * @cssproperty --kemet-select-border-color-success - The border of the success state.\n * @cssproperty --kemet-select-border-color-warning - The border of the warning state.\n * @cssproperty --kemet-select-border-radius-rounded - The border radius on rounded.\n * @cssproperty --kemet-select-border-filled - The border on filled.\n * @cssproperty --kemet-select-color-filled - The color on filled.\n * @cssproperty --kemet-select-background-color-filled - The background-color on filled.\n * @cssproperty --kemet-select-background-color-error - The error state background color.\n * @cssproperty --kemet-select-background-color-success - The success state background color.\n * @cssproperty --kemet-select-background-color-warning - The warning state background color.\n * @cssproperty --kemet-select-icon-right - The space on the right of the icon.\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\n * @event kemet-input-change - Fires when the select input changes\n *\n */\n\ninterface IOptions {\n  label: string;\n  value: string;\n  disabled: boolean;\n  selected: boolean;\n}\n\n@customElement('kemet-select')\nexport default class KemetSelect extends LitElement {\n  formSubmitController: FormSubmitController;\n\n  static styles = [stylesSelect];\n\n  @property({ type: String })\n  slug: string;\n\n  @property({ type: String })\n  name: string = 'select';\n\n  @property({ type: String })\n  value: string;\n\n  @property({ type: Array })\n  options: IOptions[];\n\n  @property({ type: String, reflect: true })\n  status: string;\n\n  @property({ type: Boolean, reflect: true })\n  required: boolean;\n\n  @property({ type: Boolean, reflect: true })\n  disabled: boolean;\n\n  @property({ type: Boolean })\n  multiple: boolean;\n\n  @property({ type: String })\n  icon: string = 'chevron-down';\n\n  @property({ type: Number, attribute: 'icon-size' })\n  iconSize: number = 16;\n\n  @property({ type: Boolean, reflect: true })\n  filled: boolean;\n\n  @property({ type: Boolean, reflect: true })\n  rounded: boolean;\n\n  @state()\n  invalid: boolean;\n\n  @state()\n  control: KemetFieldInterface;\n\n  @state()\n  select: HTMLSelectElement;\n\n  @state()\n  selectedOption: HTMLOptionElement;\n\n  @state()\n  optionElements: NodeListOf<KemetOption>;\n\n  @state()\n  hasFocus: boolean;\n\n  constructor() {\n    super();\n\n    /** @internal */\n    this.formSubmitController = new FormSubmitController(this);\n\n    /** @internal */\n    this.control = this.closest('kemet-field');\n  }\n\n  firstUpdated() {\n    this.select = this.shadowRoot.querySelector('select');\n    this.selectedOption = this.querySelector('[selected]');\n    this.value = this.selectedOption ? this.selectedOption.value : '';\n  }\n\n  render() {\n    return html`\n      <select\n        part=\"select\"\n        id=${this.slug}\n        name=${this.name}\n        ?required=${this.required}\n        ?disabled=${this.disabled}\n        ?multiple=${this.multiple}\n        @change=${this.handleChange}\n        @focus=${this.handleFocus}\n        @blur=${this.handleBlur}\n        @invalid=${this.handleInvalid}\n      >\n        ${this.makeOptions()}\n      </select>\n      ${this.makeIcon()}\n      <slot @slotchange=${() => this.makeOptions()}></slot>\n    `;\n  }\n\n  /**\n   * Generates the option elements\n   * @private\n   * @returns {TemplateResult} An option element\n   */\n  makeOptions(): TemplateResult<1>[] {\n    this.options = [];\n    this.optionElements = this.querySelectorAll('kemet-option');\n\n    this.optionElements.forEach((option: KemetOption) => {\n      this.options = this.options.concat({\n        label: option.label,\n        value: option.value,\n        disabled: option.disabled,\n        selected: option.selected,\n      });\n    });\n\n    return this.options.map(\n      option => html`<option value=${option.value} ?disabled=${option.disabled} ?selected=${option.selected}>\n          ${option.label}\n        </option>`,\n    );\n  }\n\n  /**\n   * Generates a dropdown icon\n   * @private\n   */\n  makeIcon() {\n    if (this.icon || this.icon !== '') {\n      return html`<kemet-icon icon=${this.icon} size=${this.iconSize}></kemet-icon>`;\n    }\n\n    return null;\n  }\n\n  /**\n   * Handles when the input receives focus\n   * @private\n   */\n  handleFocus() {\n    this.hasFocus = true;\n    emitEvent(this, 'kemet-input-focused', true);\n  }\n\n  /**\n   * Handles when the input loses focus\n   * @private\n   */\n  handleBlur() {\n    this.hasFocus = false;\n    emitEvent(this, 'kemet-input-focused', false);\n\n    this.select.checkValidity();\n\n    if (!this.select.checkValidity()) {\n      this.invalid = true;\n      this.status = 'error';\n      this.control.status = 'error';\n\n      emitEvent(this, 'kemet-input-status', {\n        status: 'error',\n        validity: this.select.validity,\n        element: this,\n      });\n    }\n  }\n\n  /**\n   * Handles when the input changes value\n   * @private\n   */\n  handleChange() {\n    this.value = this.select.value;\n    emitEvent(this, 'kemet-input-change', this.value);\n\n    if (this.select.checkValidity()) {\n      this.invalid = false;\n      this.status = 'standard';\n\n      emitEvent(this, 'kemet-input-status', {\n        status: 'standard',\n        validity: this.select.validity,\n        element: this,\n      });\n    }\n  }\n\n  /**\n   * Handles when the input has an error\n   * @private\n   */\n  handleInvalid() {\n    this.invalid = true;\n    this.status = 'error';\n\n    emitEvent(this, 'kemet-input-status', {\n      status: 'error',\n      validity: this.select.validity,\n      element: this,\n    });\n  }\n\n  /**\n   * Checks the validity of the standard select\n   * @public\n   * @returns {boolean}\n   */\n  checkValidity(): boolean {\n    return this.select.checkValidity();\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-select': KemetSelect\n  }\n}\n"]}

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

@@ -1,3 +0,0 @@
-import './kemet-select';
-import './kemet-option';
-import '../kemet-field/kemet-field';

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

@@ -1,53 +0,0 @@
-import { html, render } from 'lit';
-import { expect } from '@wdio/globals';
-import userEvent from '@testing-library/user-event';
-import { fireEvent, waitFor } from '@testing-library/dom';
-import './kemet-select';
-import './kemet-option';
-import '../kemet-field/kemet-field';
-describe('Select', () => {
-    const templates = {
-        default: html `
-      <kemet-field label="Label">
-        <kemet-select slot="input" required>
-          <kemet-option label="Choose Item" value=""></kemet-option>
-          <kemet-option label="Item 1" value="1"></kemet-option>
-          <kemet-option label="Item 2" value="2"></kemet-option>
-          <kemet-option label="Item 3" value="3"></kemet-option>
-        </kemet-select>
-      </kemet-field>
-    `,
-        selected: html `
-      <kemet-field label="Label">
-        <kemet-select slot="input" required>
-          <kemet-option selected label="Choose Item" value=""></kemet-option>
-          <kemet-option label="Item 1" value="1"></kemet-option>
-          <kemet-option label="Item 2" value="2"></kemet-option>
-          <kemet-option label="Item 3" value="3"></kemet-option>
-        </kemet-select>
-      </kemet-field>
-    `,
-    };
-    it('makes a selection properly', async () => {
-        render(templates.selected, document.body);
-        const kemetSelect = document.querySelector('kemet-select');
-        await waitFor(async () => {
-            const select = kemetSelect.shadowRoot.querySelector('select');
-            await userEvent.selectOptions(select, '3');
-            fireEvent.blur(select);
-            expect(kemetSelect.value).toBe('3');
-        });
-    });
-    it('attempts to select an invalid option', async () => {
-        render(templates.default, document.body);
-        const kemetSelect = document.querySelector('kemet-select');
-        await waitFor(async () => {
-            const select = kemetSelect.shadowRoot.querySelector('select');
-            await userEvent.selectOptions(select, '');
-            fireEvent.blur(select);
-            kemetSelect.checkValidity();
-            expect(kemetSelect.status).toBe('error');
-        });
-    });
-});
-//# sourceMappingURL=spec.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"spec.js","sourceRoot":"","sources":["../../../src/components/kemet-select/spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,KAAK,CAAC;AACnC,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AACvC,OAAO,SAAS,MAAM,6BAA6B,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAE1D,OAAO,gBAAgB,CAAC;AACxB,OAAO,gBAAgB,CAAC;AACxB,OAAO,4BAA4B,CAAC;AAEpC,QAAQ,CAAC,QAAQ,EAAE,GAAG,EAAE;IACtB,MAAM,SAAS,GAAG;QAChB,OAAO,EAAE,IAAI,CAAA;;;;;;;;;KASZ;QACD,QAAQ,EAAE,IAAI,CAAA;;;;;;;;;KASb;KACF,CAAC;IAEF,EAAE,CAAC,4BAA4B,EAAE,KAAK,IAAI,EAAE;QAC1C,MAAM,CAAC,SAAS,CAAC,QAAQ,EAAE,QAAQ,CAAC,IAAI,CAAC,CAAC;QAC1C,MAAM,WAAW,GAAG,QAAQ,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;QAC3D,MAAM,OAAO,CAAC,KAAK,IAAI,EAAE;YACvB,MAAM,MAAM,GAAG,WAAW,CAAC,UAAU,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;YAC9D,MAAM,SAAS,CAAC,aAAa,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;YAC3C,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;YACvB,MAAM,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QACtC,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,sCAAsC,EAAE,KAAK,IAAI,EAAE;QACpD,MAAM,CAAC,SAAS,CAAC,OAAO,EAAE,QAAQ,CAAC,IAAI,CAAC,CAAC;QACzC,MAAM,WAAW,GAAG,QAAQ,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;QAC3D,MAAM,OAAO,CAAC,KAAK,IAAI,EAAE;YACvB,MAAM,MAAM,GAAG,WAAW,CAAC,UAAU,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;YAC9D,MAAM,SAAS,CAAC,aAAa,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC;YAC1C,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;YACvB,WAAW,CAAC,aAAa,EAAE,CAAC;YAC5B,MAAM,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QAC3C,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { html, render } from 'lit';\nimport { expect } from '@wdio/globals';\nimport userEvent from '@testing-library/user-event';\nimport { fireEvent, waitFor } from '@testing-library/dom';\n\nimport './kemet-select';\nimport './kemet-option';\nimport '../kemet-field/kemet-field';\n\ndescribe('Select', () => {\n  const templates = {\n    default: html`\n      <kemet-field label=\"Label\">\n        <kemet-select slot=\"input\" required>\n          <kemet-option label=\"Choose Item\" value=\"\"></kemet-option>\n          <kemet-option label=\"Item 1\" value=\"1\"></kemet-option>\n          <kemet-option label=\"Item 2\" value=\"2\"></kemet-option>\n          <kemet-option label=\"Item 3\" value=\"3\"></kemet-option>\n        </kemet-select>\n      </kemet-field>\n    `,\n    selected: html`\n      <kemet-field label=\"Label\">\n        <kemet-select slot=\"input\" required>\n          <kemet-option selected label=\"Choose Item\" value=\"\"></kemet-option>\n          <kemet-option label=\"Item 1\" value=\"1\"></kemet-option>\n          <kemet-option label=\"Item 2\" value=\"2\"></kemet-option>\n          <kemet-option label=\"Item 3\" value=\"3\"></kemet-option>\n        </kemet-select>\n      </kemet-field>\n    `,\n  };\n\n  it('makes a selection properly', async () => {\n    render(templates.selected, document.body);\n    const kemetSelect = document.querySelector('kemet-select');\n    await waitFor(async () => {\n      const select = kemetSelect.shadowRoot.querySelector('select');\n      await userEvent.selectOptions(select, '3');\n      fireEvent.blur(select);\n      expect(kemetSelect.value).toBe('3');\n    });\n  });\n\n  it('attempts to select an invalid option', async () => {\n    render(templates.default, document.body);\n    const kemetSelect = document.querySelector('kemet-select');\n    await waitFor(async () => {\n      const select = kemetSelect.shadowRoot.querySelector('select');\n      await userEvent.selectOptions(select, '');\n      fireEvent.blur(select);\n      kemetSelect.checkValidity();\n      expect(kemetSelect.status).toBe('error');\n    });\n  });\n});\n"]}

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

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/components/kemet-select/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsF9B,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const stylesSelect = css`\n  :host {\n    --kemet-select-padding: 1rem;\n    --kemet-select-border: 1px solid rgb(var(--kemet-color-foreground));\n    --kemet-select-border-color-error: 1px solid rgb(var(--kemet-color-error));\n    --kemet-select-border-color-success: 1px solid rgb(var(--kemet-color-success));\n    --kemet-select-border-color-warning: 1px solid rgb(var(--kemet-color-warning));\n    --kemet-select-border-radius-rounded: var(--kemet-border-radius-md);\n    --kemet-select-border-filled: none;\n    --kemet-select-color-filled: rgb(var(--kemet-color-white));\n    --kemet-select-background-color-filled: rgb(var(--kemet-color-primary));\n    --kemet-select-color-filled: rgb(var(--kemet-color-white));\n    --kemet-select-background-color-error: rgb(var(--kemet-color-error));\n    --kemet-select-background-color-success: rgb(var(--kemet-color-success));\n    --kemet-select-background-color-success: rgb(var(--kemet-color-success));\n    --kemet-select-background-color-warning: rgb(var(--kemet-color-warning));\n    --kemet-select-icon-right: 1rem;\n\n    position: relative;\n    display: block;\n  }\n\n  select {\n    color: rgb(var(--kemet-color-text));\n    display: block;\n    font-size: 1rem;\n    width: 100%;\n    padding: var(--kemet-select-padding);\n    border: var(--kemet-select-border);\n    appearance: none;\n    box-sizing: border-box;\n    background-color: transparent;\n  }\n\n  option {\n    color: rgb(var(--kemet-color-black));\n  }\n\n  :host([status='error']) select {\n    border: var(--kemet-select-border-color-error);\n  }\n\n  :host([status='success']) select {\n    border: var(--kemet-select-border-color-success);\n  }\n\n  :host([status='warning']) select {\n    border: var(--kemet-select-border-color-warning);\n  }\n\n  :host([disabled]) select {\n    opacity: 0.5;\n  }\n\n  :host([rounded]) select {\n    border-radius: var(--kemet-select-border-radius-rounded);\n  }\n\n  :host([filled]) select {\n    border: var(--kemet-select-border-filled);\n    color: var(--kemet-select-color-filled);\n    background-color: var(--kemet-select-background-color-filled);\n  }\n\n  :host([filled]) kemet-icon {\n    color: var(--kemet-select-color-filled);\n  }\n\n  :host([status='error'][filled]) select {\n    background-color: var(--kemet-select-background-color-error);\n  }\n\n  :host([status='success'][filled]) select {\n    background-color: var(--kemet-select-background-color-success);\n  }\n\n  :host([status='warning'][filled]) select {\n    background-color: var(--kemet-select-background-color-warning);\n  }\n\n  kemet-icon {\n    position: absolute;\n    right: var(--kemet-select-icon-right);\n    top: 50%;\n    transform: translateY(-50%);\n  }\n`;\n"]}

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

@@ -1,20 +0,0 @@
-export interface KemetSelectInterface extends HTMLElement {
-    slug?: string;
-    name?: string;
-    value?: string;
-    options?: any[];
-    status?: string;
-    required?: boolean;
-    disabled?: boolean;
-    multiple?: boolean;
-    icon?: string;
-    iconSize?: number;
-    filled?: boolean;
-    rounded?: boolean;
-}
-export interface KemetOptionInterface extends HTMLElement {
-    label?: string;
-    value?: string;
-    disabled?: boolean;
-    selected?: boolean;
-}

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

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/kemet-select/types.ts"],"names":[],"mappings":"","sourcesContent":["export interface KemetSelectInterface extends HTMLElement {\n  slug?: string,\n  name?: string,\n  value?: string,\n  options?: any[],\n  status?: string,\n  required?: boolean,\n  disabled?: boolean,\n  multiple?: boolean,\n  icon?: string,\n  iconSize?: number,\n  filled?: boolean,\n  rounded?: boolean,\n}\n\nexport interface KemetOptionInterface extends HTMLElement {\n  label?: string,\n  value?: string,\n  disabled?: boolean,\n  selected?: boolean,\n}\n"]}

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

@@ -1,10 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/web-components';
-import '../kemet-sortable';
-import '../kemet-sortable-item';
-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-sortable/docs/stories.js

@@ -1,29 +0,0 @@
-import { html } from 'lit';
-import '../kemet-sortable';
-import '../kemet-sortable-item';
-import '../../kemet-tabs/kemet-tabs';
-import '../../kemet-tabs/kemet-tab';
-import '../../kemet-tabs/kemet-tab-panel';
-const meta = {
-    title: 'Components / Sortable',
-    component: 'kemet-sortable',
-    args: {
-        numItems: 3,
-    },
-};
-export default meta;
-const Template = (args) => {
-    const items = [];
-    for (let i = 0; i < args.numItems; i += 1) {
-        items.push(html `<kemet-sortable-item>Item ${i + 1}</kemet-sortable-item>`);
-    }
-    return html `
-    <kemet-sortable>
-      ${items}
-    </kemet-sortable>
-  `;
-};
-export const Standard = {
-    render: args => Template(args),
-};
-//# sourceMappingURL=stories.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../../src/components/kemet-sortable/docs/stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAG3B,OAAO,mBAAmB,CAAC;AAC3B,OAAO,wBAAwB,CAAC;AAEhC,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,QAAQ,EAAE,CAAC;KACZ;CACF,CAAC;AACF,eAAe,IAAI,CAAC;AAIpB,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE;IACxB,MAAM,KAAK,GAAG,EAAE,CAAC;IAEjB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC;QAC1C,KAAK,CAAC,IAAI,CAAC,IAAI,CAAA,6BAA6B,CAAC,GAAG,CAAC,wBAAwB,CAAC,CAAC;IAC7E,CAAC;IAED,OAAO,IAAI,CAAA;;QAEL,KAAK;;GAEV,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC;CAC/B,CAAC","sourcesContent":["import { html } from 'lit';\nimport type { Meta, StoryObj } from '@storybook/web-components';\n\nimport '../kemet-sortable';\nimport '../kemet-sortable-item';\n\nimport '../../kemet-tabs/kemet-tabs';\nimport '../../kemet-tabs/kemet-tab';\nimport '../../kemet-tabs/kemet-tab-panel';\n\nconst meta: Meta = {\n  title: 'Components / Sortable',\n  component: 'kemet-sortable',\n  args: {\n    numItems: 3,\n  },\n};\nexport default meta;\n\ntype Story = StoryObj;\n\nconst Template = (args) => {\n  const items = [];\n\n  for (let i = 0; i < args.numItems; i += 1) {\n    items.push(html`<kemet-sortable-item>Item ${i + 1}</kemet-sortable-item>`);\n  }\n\n  return html`\n    <kemet-sortable>\n      ${items}\n    </kemet-sortable>\n  `;\n};\n\nexport const Standard: Story = {\n  render: args => Template(args),\n};\n"]}

package/dist/components/kemet-sortable/kemet-sortable-item.d.ts

@@ -1,21 +0,0 @@
-import { LitElement } from 'lit';
-/**
- * @since 1.3.0
- * @status stable
- *
- * @tagname kemet-sortable-item
- * @summary An item in a sortable list.
- *
- * @prop {boolean} ghost - Automatically set to true when an item is dragged to a new spot.
- */
-export default class KemetSortableItem extends LitElement {
-    static styles: import("lit").CSSResult[];
-    ghost: boolean;
-    firstUpdated(): void;
-    render(): import("lit-html").TemplateResult<1>;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'kemet-sortable-item': KemetSortableItem;
-    }
-}

package/dist/components/kemet-sortable/kemet-sortable-item.js

@@ -1,30 +0,0 @@
-import { __decorate } from "tslib";
-import { html, LitElement } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { stylesSortableItem } from './styles';
-/**
- * @since 1.3.0
- * @status stable
- *
- * @tagname kemet-sortable-item
- * @summary An item in a sortable list.
- *
- * @prop {boolean} ghost - Automatically set to true when an item is dragged to a new spot.
- */
-let KemetSortableItem = class KemetSortableItem extends LitElement {
-    firstUpdated() {
-        this.draggable = true;
-    }
-    render() {
-        return html `<slot></slot>`;
-    }
-};
-KemetSortableItem.styles = [stylesSortableItem];
-__decorate([
-    property({ type: Boolean, reflect: true })
-], KemetSortableItem.prototype, "ghost", void 0);
-KemetSortableItem = __decorate([
-    customElement('kemet-sortable-item')
-], KemetSortableItem);
-export default KemetSortableItem;
-//# sourceMappingURL=kemet-sortable-item.js.map

package/dist/components/kemet-sortable/kemet-sortable-item.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"kemet-sortable-item.js","sourceRoot":"","sources":["../../../src/components/kemet-sortable/kemet-sortable-item.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAC;AAE9C;;;;;;;;GAQG;AAGY,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,UAAU;IAMvD,YAAY;QACV,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;IACxB,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA,eAAe,CAAC;IAC7B,CAAC;;AAXM,wBAAM,GAAG,CAAC,kBAAkB,CAAC,AAAvB,CAAwB;AAGrC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;gDAC5B;AAJI,iBAAiB;IADrC,aAAa,CAAC,qBAAqB,CAAC;GAChB,iBAAiB,CAarC;eAboB,iBAAiB","sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { stylesSortableItem } from './styles';\n\n/**\n * @since 1.3.0\n * @status stable\n *\n * @tagname kemet-sortable-item\n * @summary An item in a sortable list.\n *\n * @prop {boolean} ghost - Automatically set to true when an item is dragged to a new spot.\n */\n\n@customElement('kemet-sortable-item')\nexport default class KemetSortableItem extends LitElement {\n  static styles = [stylesSortableItem];\n\n  @property({ type: Boolean, reflect: true })\n  ghost: boolean;\n\n  firstUpdated() {\n    this.draggable = true;\n  }\n\n  render() {\n    return html`<slot></slot>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-sortable-item': KemetSortableItem\n  }\n}\n"]}

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

@@ -1,25 +0,0 @@
-import { LitElement } from 'lit';
-import type KemetSortableItem from './kemet-sortable-item';
-/**
- * @since 1.3.0
- * @status stable
- *
- * @tagname kemet-sortable
- * @summary A list that can be sorted by drag and drop.
- *
- * @event kemet-sortable-drag-end - Fires when an item has been moved to a new spot.
- */
-export default class KemetSortable extends LitElement {
-    static styles: import("lit").CSSResult[];
-    sortableItem: KemetSortableItem;
-    firstUpdated(): void;
-    render(): import("lit-html").TemplateResult<1>;
-    handleDragStart(event: DragEvent): void;
-    handleDragOver(event: DragEvent): void;
-    handleDragEnd(event: DragEvent): void;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'kemet-sortable': KemetSortable;
-    }
-}