kemet-ui 4.0.2 → 5.0.0

package/dist/elements/multi-input.d.ts

@@ -1,124 +0,0 @@
-import * as lit_html from 'lit-html';
-import * as lit from 'lit';
-import { LitElement } from 'lit';
-import { a as TypeRoundedSizes, T as TypeStatus, K as KemetField, c as KemetCombo } from '../constants-CcB9aXsT.js';
-import '../form-controller-BR0gZhrG.js';
-
-interface InterfaceSelections {
-    element: HTMLUListElement;
-    text: string;
-    id: string;
-}
-/**
- * @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 {boolean} disabled - The disable attribute
- * @prop {boolean} required - The required attribute
- * @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 {TypeRoundedSizes} rounded - Displays rounded corners
- * @prop {boolean} filled - Displays a filled input box
- * @prop {ValidityState} validity - The HTML5 validity object.
-
- *
- * @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-focus - Fires when the input receives focus
- * @event kemet-blur - Fires when the input loses focus
- * @event kemet-input - Fires when the input receives input
- * @event kemet-change - Fires when the input changes
- * @event kemet-invalid - Fires when the input is invalid
- *
- */
-declare class KemetMultiInput extends LitElement {
-    static styles: lit.CSSResult[];
-    slug: string;
-    placeholder: string;
-    disabled: boolean;
-    filled: boolean;
-    rounded: TypeRoundedSizes;
-    name: string;
-    status: TypeStatus;
-    required: boolean;
-    invalid: boolean;
-    validateOnBlur: boolean;
-    value: string;
-    selections: InterfaceSelections[];
-    paddingLeft: number;
-    field: KemetField;
-    combo: KemetCombo;
-    chips: {
-        offsetWidth: number;
-    };
-    input: HTMLInputElement;
-    firstUpdated(): void;
-    updated(): void;
-    render(): lit_html.TemplateResult<1>;
-    /**
-     * Handles when a selection is made from a combo
-     * @private
-     * @param event
-     */
-    addComboItem(event: CustomEvent): void;
-    /**
-     * Handles when the input receives input
-     * @private
-     */
-    handleInput(event: Event): void;
-    /**
-     * Handles when the input is focused
-     */
-    handleFocus(): void;
-    handleBlur(): void;
-    handleChange(event: Event): void;
-    handleInvalid(event: Event): void;
-    /**
-     * Renders the chips from the selections of the combo
-     * @private
-     */
-    makeSelections(): lit_html.TemplateResult<1>;
-    /**
-     * calculates padding to properly place the cursor of the input
-     * @private
-     */
-    calculatePadding(): void;
-    /**
-     * handle removing a chip from the selections
-     * @private
-     */
-    handleRemoveChip(event: any): void;
-    handleComboClose(event: MouseEvent): void;
-    handleKeydown(event: KeyboardEvent): void;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'kemet-multi-input': KemetMultiInput;
-    }
-}
-
-export { type InterfaceSelections, KemetMultiInput as default };

package/dist/elements/multi-input.js

@@ -1,368 +0,0 @@
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp(target, key, result);
-  return result;
-};
-
-// src/elements/multi-input.ts
-var multi_input_exports = {};
-__export(multi_input_exports, {
-  default: () => KemetMultiInput
-});
-module.exports = __toCommonJS(multi_input_exports);
-var import_lit2 = require("lit");
-var import_decorators = require("lit/decorators.js");
-var import_live = require("lit/directives/live.js");
-
-// src/styles/elements/multi-input.ts
-var import_lit = require("lit");
-var stylesBase = import_lit.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-input-border-radius-rounded: 0;
-
-    --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;
-    border-radius: var(--kemet-input-border-radius-rounded);
-  }
-
-  :host([status=error]) input {
-    --kemet-input-border: 1px solid rgb(var(--kemet-color-error));
-  }
-
-  :host([status=success]) input {
-    --kemet-input-border: 1px solid rgb(var(--kemet-color-success));
-  }
-
-  :host([status=warning]) input {
-    --kemet-input-border: 1px solid rgb(var(--kemet-color-warning));
-  }
-
-  :host([disabled]) input {
-    opacity: 0.5;
-  }
-
-  :host([rounded]) input {
-    --kemet-input-border-radius-rounded: var(--kemet-border-radius-md);
-  }
-
-  :host([rounded=sm]) input {
-    --kemet-input-border-radius-rounded: var(--kemet-border-radius-sm);
-  }
-
-  :host([rounded=lg]) input {
-    --kemet-input-border-radius-rounded: var(--kemet-border-radius-lg);
-  }
-
-  :host([rounded=xl]) input {
-    --kemet-input-border-radius-rounded: var(--kemet-border-radius-xl);
-  }
-
-  :host([rounded=circle]) input {
-    --kemet-input-border-radius-rounded: var(--kemet-border-radius-circle);
-  }
-
-  :host([rounded=pill]) input {
-    --kemet-input-border-radius-rounded: var(--kemet-border-radius-pill);
-  }
-
-  :host([rounded=circle]) input {
-    --kemet-input-border-radius-rounded: var(--kemet-border-radius-circle);
-  }
-
-  :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
-  }
-`;
-
-// src/utilities/events.ts
-var emitEvent = (element, name, detail, bubbles = true, composed = true) => {
-  element.dispatchEvent(
-    new CustomEvent(name, { bubbles, composed, detail })
-  );
-};
-
-// src/elements/multi-input.ts
-var KemetMultiInput = class extends import_lit2.LitElement {
-  constructor() {
-    super(...arguments);
-    this.slug = "input";
-    this.placeholder = "";
-    this.disabled = false;
-    this.filled = false;
-    this.name = "input";
-    this.status = "standard" /* Standard */;
-    this.required = false;
-    this.validateOnBlur = false;
-    this.value = "";
-    this.selections = [];
-  }
-  firstUpdated() {
-    this.field = this.closest("kemet-field");
-    this.combo = this.field.querySelector("kemet-combo");
-    document.addEventListener("click", this.handleComboClose.bind(this));
-    if (this.combo) {
-      this.combo.addEventListener("kemet-selection", (event) => this.addComboItem(event));
-    }
-  }
-  updated() {
-    if (this.chips) this.calculatePadding();
-  }
-  render() {
-    return import_lit2.html`
-      <div>
-        <input
-          part="input"
-          id=${this.slug}
-          name=${this.name}
-          placeholder=${this.placeholder}
-          ?required=${this.required}
-          ?disabled=${this.disabled}
-          @input=${this.handleInput}
-          @focus=${this.handleFocus}
-          @blur=${this.handleBlur}
-          @change=${this.handleChange}
-          @invalid=${this.handleInvalid}
-          @keydown=${this.handleKeydown}
-          .value=${(0, import_live.live)(this.value)}
-        />
-         ${this.makeSelections()}
-      </div>
-    `;
-  }
-  /**
-   * Handles when a selection is made from a combo
-   * @private
-   * @param event
-   */
-  addComboItem(event) {
-    this.value = "";
-    this.status = "standard" /* Standard */;
-    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) {
-    this.value = event.target.value;
-    emitEvent(this, "kemet-input", {
-      element: this,
-      validity: this.input.validity,
-      status: this.status,
-      value: event.target.value
-    });
-  }
-  /**
-   * Handles when the input is focused
-   */
-  handleFocus() {
-    emitEvent(this, "kemet-focus", this);
-  }
-  handleBlur() {
-    emitEvent(this, "kemet-blur", this);
-    if (this.validateOnBlur) {
-      this.input.checkValidity();
-    }
-  }
-  handleChange(event) {
-    emitEvent(this, "kemet-change", {
-      element: this,
-      validity: this.input.validity,
-      status: this.status,
-      value: event.target.value
-    });
-  }
-  handleInvalid(event) {
-    this.status = "error" /* Error */;
-    emitEvent(this, "kemet-invalid", {
-      element: this,
-      validity: this.input.validity,
-      status: this.status,
-      value: event.target.value
-    });
-  }
-  /**
-   * Renders the chips from the selections of the combo
-   * @private
-   */
-  makeSelections() {
-    const selections = this.selections.map((selection) => import_lit2.html`
-      <li part="chip">
-        <span>${selection.text}</span>
-        <button @click=${this.handleRemoveChip}>&times;</button>
-      </li>
-    `);
-    if (this.selections) {
-      return import_lit2.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);
-  }
-  handleComboClose(event) {
-    if (event.target !== this && this.combo) {
-      this.combo.show = false;
-    }
-  }
-  handleKeydown(event) {
-    if (event.key === "Escape" /* ESCAPE */) {
-      this.combo.show = false;
-    }
-  }
-};
-KemetMultiInput.styles = [stylesBase];
-__decorateClass([
-  (0, import_decorators.property)({ type: String })
-], KemetMultiInput.prototype, "slug", 2);
-__decorateClass([
-  (0, import_decorators.property)({ type: String })
-], KemetMultiInput.prototype, "placeholder", 2);
-__decorateClass([
-  (0, import_decorators.property)({ type: Boolean })
-], KemetMultiInput.prototype, "disabled", 2);
-__decorateClass([
-  (0, import_decorators.property)({ type: Boolean })
-], KemetMultiInput.prototype, "filled", 2);
-__decorateClass([
-  (0, import_decorators.property)({ reflect: true })
-], KemetMultiInput.prototype, "rounded", 2);
-__decorateClass([
-  (0, import_decorators.property)({ type: String })
-], KemetMultiInput.prototype, "name", 2);
-__decorateClass([
-  (0, import_decorators.property)({ reflect: true })
-], KemetMultiInput.prototype, "status", 2);
-__decorateClass([
-  (0, import_decorators.property)({ type: Boolean })
-], KemetMultiInput.prototype, "required", 2);
-__decorateClass([
-  (0, import_decorators.property)({ type: Boolean })
-], KemetMultiInput.prototype, "invalid", 2);
-__decorateClass([
-  (0, import_decorators.property)({ type: Boolean, attribute: "validate-on-blur" })
-], KemetMultiInput.prototype, "validateOnBlur", 2);
-__decorateClass([
-  (0, import_decorators.state)()
-], KemetMultiInput.prototype, "value", 2);
-__decorateClass([
-  (0, import_decorators.state)()
-], KemetMultiInput.prototype, "selections", 2);
-__decorateClass([
-  (0, import_decorators.state)()
-], KemetMultiInput.prototype, "paddingLeft", 2);
-__decorateClass([
-  (0, import_decorators.state)()
-], KemetMultiInput.prototype, "field", 2);
-__decorateClass([
-  (0, import_decorators.state)()
-], KemetMultiInput.prototype, "combo", 2);
-__decorateClass([
-  (0, import_decorators.query)("[part=chips]")
-], KemetMultiInput.prototype, "chips", 2);
-__decorateClass([
-  (0, import_decorators.query)("input")
-], KemetMultiInput.prototype, "input", 2);
-KemetMultiInput = __decorateClass([
-  (0, import_decorators.customElement)("kemet-multi-input")
-], KemetMultiInput);
-//# sourceMappingURL=multi-input.js.map

package/dist/elements/multi-input.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/elements/multi-input.ts","../../src/styles/elements/multi-input.ts","../../src/utilities/events.ts"],"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/elements/multi-input';\nimport { emitEvent } from '../utilities/events';\nimport { EnumKeyCodes as EnumKeys, EnumStatuses, TypeRoundedSizes, TypeStatus } from '../utilities/constants';\nimport KemetField from './field';\nimport KemetCombo from './combo';\n\nexport interface InterfaceSelections {\n  element: HTMLUListElement;\n  text: string;\n  id: string;\n}\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 {boolean} disabled - The disable attribute\n * @prop {boolean} required - The required attribute\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 {TypeRoundedSizes} rounded - Displays rounded corners\n * @prop {boolean} filled - Displays a filled input box\n * @prop {ValidityState} validity - The HTML5 validity object.\n\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-focus - Fires when the input receives focus\n * @event kemet-blur - Fires when the input loses focus\n * @event kemet-input - Fires when the input receives input\n * @event kemet-change - Fires when the input changes\n * @event kemet-invalid - Fires when the input is invalid\n *\n */\n\n@customElement('kemet-multi-input')\nexport default class KemetMultiInput extends LitElement {\n  static styles = [stylesBase];\n\n  @property({ type: String })\n  slug: string = 'input';\n\n  @property({ type: String })\n  placeholder: string = '';\n\n  @property({ type: Boolean })\n  disabled: boolean = false;\n\n  @property({ type: Boolean })\n  filled: boolean = false;\n\n  @property({ reflect: true })\n  rounded: TypeRoundedSizes;\n\n  @property({ type: String })\n  name: string = 'input';\n\n  @property({ reflect: true })\n  status: TypeStatus = EnumStatuses.Standard;\n\n  @property({ type: Boolean })\n  required: boolean = false;\n\n  @property({ type: Boolean })\n  invalid: boolean;\n\n  @property({ type: Boolean, attribute: 'validate-on-blur' })\n  validateOnBlur: boolean = false;\n\n  @state()\n  value: string = '';\n\n  @state()\n  selections: InterfaceSelections[] = [];\n\n  @state()\n  paddingLeft: number;\n\n  @state()\n  field: KemetField;\n\n  @state()\n  combo: KemetCombo;\n\n  @query('[part=chips]')\n  chips: { offsetWidth: number; };\n\n  @query('input')\n  input: HTMLInputElement;\n\n  firstUpdated() {\n    // elements\n    this.field = this.closest('kemet-field');\n    this.combo = this.field.querySelector('kemet-combo');\n\n    document.addEventListener('click', this.handleComboClose.bind(this));\n\n    if (this.combo) {\n      this.combo.addEventListener('kemet-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=${this.slug}\n          name=${this.name}\n          placeholder=${this.placeholder}\n          ?required=${this.required}\n          ?disabled=${this.disabled}\n          @input=${this.handleInput}\n          @focus=${this.handleFocus}\n          @blur=${this.handleBlur}\n          @change=${this.handleChange}\n          @invalid=${this.handleInvalid}\n          @keydown=${this.handleKeydown}\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    this.status = EnumStatuses.Standard;\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: Event) {\n    this.value = (event.target as HTMLInputElement).value;\n    emitEvent(this, 'kemet-input', {\n      element: this,\n      validity: this.input.validity,\n      status: this.status,\n      value: (event.target as HTMLInputElement).value\n    });\n  }\n\n  /**\n   * Handles when the input is focused\n   */\n  handleFocus() {\n    emitEvent(this, 'kemet-focus', this);\n  }\n\n  handleBlur() {\n    emitEvent(this, 'kemet-blur', this);\n    if (this.validateOnBlur) {\n      this.input.checkValidity();\n    }\n  }\n\n  handleChange(event: Event) {\n    emitEvent(this, 'kemet-change', {\n      element: this,\n      validity: this.input.validity,\n      status: this.status,\n      value: (event.target as HTMLInputElement).value\n    });\n  }\n\n  handleInvalid(event: Event) {\n    this.status = EnumStatuses.Error;\n    emitEvent(this, 'kemet-invalid', {\n      element: this,\n      validity: this.input.validity,\n      status: this.status,\n      value: (event.target as HTMLInputElement).value\n    });\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  handleComboClose(event: MouseEvent) {\n    if (event.target !== this && this.combo) {\n      this.combo.show = false;\n    }\n  }\n\n  handleKeydown(event: KeyboardEvent) {\n    if (event.key === EnumKeys.ESCAPE) {\n      this.combo.show = false;\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-multi-input': KemetMultiInput\n  }\n}\n","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    --kemet-input-border-radius-rounded: 0;\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    border-radius: var(--kemet-input-border-radius-rounded);\n  }\n\n  :host([status=error]) input {\n    --kemet-input-border: 1px solid rgb(var(--kemet-color-error));\n  }\n\n  :host([status=success]) input {\n    --kemet-input-border: 1px solid rgb(var(--kemet-color-success));\n  }\n\n  :host([status=warning]) input {\n    --kemet-input-border: 1px solid rgb(var(--kemet-color-warning));\n  }\n\n  :host([disabled]) input {\n    opacity: 0.5;\n  }\n\n  :host([rounded]) input {\n    --kemet-input-border-radius-rounded: var(--kemet-border-radius-md);\n  }\n\n  :host([rounded=sm]) input {\n    --kemet-input-border-radius-rounded: var(--kemet-border-radius-sm);\n  }\n\n  :host([rounded=lg]) input {\n    --kemet-input-border-radius-rounded: var(--kemet-border-radius-lg);\n  }\n\n  :host([rounded=xl]) input {\n    --kemet-input-border-radius-rounded: var(--kemet-border-radius-xl);\n  }\n\n  :host([rounded=circle]) input {\n    --kemet-input-border-radius-rounded: var(--kemet-border-radius-circle);\n  }\n\n  :host([rounded=pill]) input {\n    --kemet-input-border-radius-rounded: var(--kemet-border-radius-pill);\n  }\n\n  :host([rounded=circle]) input {\n    --kemet-input-border-radius-rounded: var(--kemet-border-radius-circle);\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","export const emitEvent = (element, name, detail, bubbles = true, composed = true) => {\n  element.dispatchEvent(\n    new CustomEvent(name, { bubbles, composed, detail }),\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAAAA,cAAiC;AACjC,wBAEO;AACP,kBAAqB;;;ACJrB,iBAAoB;AAEb,IAAM,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACFnB,IAAM,YAAY,CAAC,SAAS,MAAM,QAAQ,UAAU,MAAM,WAAW,SAAS;AACnF,UAAQ;AAAA,IACN,IAAI,YAAY,MAAM,EAAE,SAAS,UAAU,OAAO,CAAC;AAAA,EACrD;AACF;;;AF6DA,IAAqB,kBAArB,cAA6C,uBAAW;AAAA,EAAxD;AAAA;AAIE,gBAAe;AAGf,uBAAsB;AAGtB,oBAAoB;AAGpB,kBAAkB;AAMlB,gBAAe;AAGf;AAGA,oBAAoB;AAMpB,0BAA0B;AAG1B,iBAAgB;AAGhB,sBAAoC,CAAC;AAAA;AAAA,EAiBrC,eAAe;AAEb,SAAK,QAAQ,KAAK,QAAQ,aAAa;AACvC,SAAK,QAAQ,KAAK,MAAM,cAAc,aAAa;AAEnD,aAAS,iBAAiB,SAAS,KAAK,iBAAiB,KAAK,IAAI,CAAC;AAEnE,QAAI,KAAK,OAAO;AACd,WAAK,MAAM,iBAAiB,mBAAmB,CAAC,UAAuB,KAAK,aAAa,KAAK,CAAC;AAAA,IACjG;AAAA,EACF;AAAA,EAEA,UAAU;AACR,QAAI,KAAK,MAAO,MAAK,iBAAiB;AAAA,EACxC;AAAA,EAEA,SAAS;AACP,WAAO;AAAA;AAAA;AAAA;AAAA,eAII,KAAK,IAAI;AAAA,iBACP,KAAK,IAAI;AAAA,wBACF,KAAK,WAAW;AAAA,sBAClB,KAAK,QAAQ;AAAA,sBACb,KAAK,QAAQ;AAAA,mBAChB,KAAK,WAAW;AAAA,mBAChB,KAAK,WAAW;AAAA,kBACjB,KAAK,UAAU;AAAA,oBACb,KAAK,YAAY;AAAA,qBAChB,KAAK,aAAa;AAAA,qBAClB,KAAK,aAAa;AAAA,uBACpB,kBAAK,KAAK,KAAK,CAAC;AAAA;AAAA,WAExB,KAAK,eAAe,CAAC;AAAA;AAAA;AAAA,EAG9B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQA,aAAa,OAAoB;AAC/B,SAAK,QAAQ;AACb,SAAK;AACL,UAAM,YAAY,KAAK,WAAW,KAAK,eAAa,UAAU,OAAO,MAAM,OAAO,EAAE;AACpF,QAAI,CAAC,UAAW,MAAK,aAAa,CAAC,GAAG,KAAK,YAAY,MAAM,MAAM;AAAA,EACrE;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,YAAY,OAAc;AACxB,SAAK,QAAS,MAAM,OAA4B;AAChD,cAAU,MAAM,eAAe;AAAA,MAC7B,SAAS;AAAA,MACT,UAAU,KAAK,MAAM;AAAA,MACrB,QAAQ,KAAK;AAAA,MACb,OAAQ,MAAM,OAA4B;AAAA,IAC5C,CAAC;AAAA,EACH;AAAA;AAAA;AAAA;AAAA,EAKA,cAAc;AACZ,cAAU,MAAM,eAAe,IAAI;AAAA,EACrC;AAAA,EAEA,aAAa;AACX,cAAU,MAAM,cAAc,IAAI;AAClC,QAAI,KAAK,gBAAgB;AACvB,WAAK,MAAM,cAAc;AAAA,IAC3B;AAAA,EACF;AAAA,EAEA,aAAa,OAAc;AACzB,cAAU,MAAM,gBAAgB;AAAA,MAC9B,SAAS;AAAA,MACT,UAAU,KAAK,MAAM;AAAA,MACrB,QAAQ,KAAK;AAAA,MACb,OAAQ,MAAM,OAA4B;AAAA,IAC5C,CAAC;AAAA,EACH;AAAA,EAEA,cAAc,OAAc;AAC1B,SAAK;AACL,cAAU,MAAM,iBAAiB;AAAA,MAC/B,SAAS;AAAA,MACT,UAAU,KAAK,MAAM;AAAA,MACrB,QAAQ,KAAK;AAAA,MACb,OAAQ,MAAM,OAA4B;AAAA,IAC5C,CAAC;AAAA,EACH;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,iBAAiB;AACf,UAAM,aAAa,KAAK,WAAW,IAAI,eAAa;AAAA;AAAA,gBAExC,UAAU,IAAI;AAAA,yBACL,KAAK,gBAAgB;AAAA;AAAA,KAEzC;AAED,QAAI,KAAK,YAAY;AACnB,aAAO,oCAAwB,UAAU;AAAA,IAC3C;AAEA,WAAO;AAAA,EACT;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,mBAAmB;AACjB,SAAK,cAAc,KAAK,MAAM,cAAc;AAAA,EAC9C;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,iBAAiB,OAAO;AACtB,UAAM,OAAO,MAAM,OAAO,QAAQ,aAAa,EAAE,cAAc,MAAM,EAAE;AACvE,SAAK,aAAa,KAAK,WAAW,OAAO,eAAa,UAAU,SAAS,IAAI;AAAA,EAC/E;AAAA,EAEA,iBAAiB,OAAmB;AAClC,QAAI,MAAM,WAAW,QAAQ,KAAK,OAAO;AACvC,WAAK,MAAM,OAAO;AAAA,IACpB;AAAA,EACF;AAAA,EAEA,cAAc,OAAsB;AAClC,QAAI,MAAM,+BAAyB;AACjC,WAAK,MAAM,OAAO;AAAA,IACpB;AAAA,EACF;AACF;AAxMqB,gBACZ,SAAS,CAAC,UAAU;AAG3B;AAAA,MADC,4BAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAHP,gBAInB;AAGA;AAAA,MADC,4BAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GANP,gBAOnB;AAGA;AAAA,MADC,4BAAS,EAAE,MAAM,QAAQ,CAAC;AAAA,GATR,gBAUnB;AAGA;AAAA,MADC,4BAAS,EAAE,MAAM,QAAQ,CAAC;AAAA,GAZR,gBAanB;AAGA;AAAA,MADC,4BAAS,EAAE,SAAS,KAAK,CAAC;AAAA,GAfR,gBAgBnB;AAGA;AAAA,MADC,4BAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAlBP,gBAmBnB;AAGA;AAAA,MADC,4BAAS,EAAE,SAAS,KAAK,CAAC;AAAA,GArBR,gBAsBnB;AAGA;AAAA,MADC,4BAAS,EAAE,MAAM,QAAQ,CAAC;AAAA,GAxBR,gBAyBnB;AAGA;AAAA,MADC,4BAAS,EAAE,MAAM,QAAQ,CAAC;AAAA,GA3BR,gBA4BnB;AAGA;AAAA,MADC,4BAAS,EAAE,MAAM,SAAS,WAAW,mBAAmB,CAAC;AAAA,GA9BvC,gBA+BnB;AAGA;AAAA,MADC,yBAAM;AAAA,GAjCY,gBAkCnB;AAGA;AAAA,MADC,yBAAM;AAAA,GApCY,gBAqCnB;AAGA;AAAA,MADC,yBAAM;AAAA,GAvCY,gBAwCnB;AAGA;AAAA,MADC,yBAAM;AAAA,GA1CY,gBA2CnB;AAGA;AAAA,MADC,yBAAM;AAAA,GA7CY,gBA8CnB;AAGA;AAAA,MADC,yBAAM,cAAc;AAAA,GAhDF,gBAiDnB;AAGA;AAAA,MADC,yBAAM,OAAO;AAAA,GAnDK,gBAoDnB;AApDmB,kBAArB;AAAA,MADC,iCAAc,mBAAmB;AAAA,GACb;","names":["import_lit"]}

package/dist/elements/multi-input.mjs

@@ -1,10 +0,0 @@
-import {
-  KemetMultiInput
-} from "../chunk-FIFFC63Y.mjs";
-import "../chunk-LHEY3UOF.mjs";
-import "../chunk-42U43NKG.mjs";
-import "../chunk-SAWN7RJP.mjs";
-export {
-  KemetMultiInput as default
-};
-//# sourceMappingURL=multi-input.mjs.map

package/dist/elements/multi-input.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/elements/option.d.mts

@@ -1,30 +0,0 @@
-import * as lit_html from 'lit-html';
-import { LitElement } from 'lit';
-
-/**
- * @since 1.0.0
- * @status stable
- *
- * @tagname kemet-option
- * @summary An option in a select.
- *
- * @prop {string} label - The label of the option
- * @prop {string} value - The value of the options
- * @prop {boolean} disabled - Determines whether to disable the option
- * @prop {boolean} selected - Selects the option if true
- *
- */
-declare class KemetOption extends LitElement {
-    label: string;
-    value: string;
-    disabled: boolean;
-    selected: boolean;
-    render(): lit_html.TemplateResult<1>;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'kemet-option': KemetOption;
-    }
-}
-
-export { KemetOption as default };

package/dist/elements/option.d.ts

@@ -1,30 +0,0 @@
-import * as lit_html from 'lit-html';
-import { LitElement } from 'lit';
-
-/**
- * @since 1.0.0
- * @status stable
- *
- * @tagname kemet-option
- * @summary An option in a select.
- *
- * @prop {string} label - The label of the option
- * @prop {string} value - The value of the options
- * @prop {boolean} disabled - Determines whether to disable the option
- * @prop {boolean} selected - Selects the option if true
- *
- */
-declare class KemetOption extends LitElement {
-    label: string;
-    value: string;
-    disabled: boolean;
-    selected: boolean;
-    render(): lit_html.TemplateResult<1>;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'kemet-option': KemetOption;
-    }
-}
-
-export { KemetOption as default };

package/dist/elements/option.js

@@ -1,59 +0,0 @@
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp(target, key, result);
-  return result;
-};
-
-// src/elements/option.ts
-var option_exports = {};
-__export(option_exports, {
-  default: () => KemetOption
-});
-module.exports = __toCommonJS(option_exports);
-var import_lit = require("lit");
-var import_decorators = require("lit/decorators.js");
-var KemetOption = class extends import_lit.LitElement {
-  constructor() {
-    super(...arguments);
-    this.value = "";
-  }
-  render() {
-    return import_lit.html`<slot></slot>`;
-  }
-};
-__decorateClass([
-  (0, import_decorators.property)({ type: String })
-], KemetOption.prototype, "label", 2);
-__decorateClass([
-  (0, import_decorators.property)({ type: String })
-], KemetOption.prototype, "value", 2);
-__decorateClass([
-  (0, import_decorators.property)({ type: Boolean })
-], KemetOption.prototype, "disabled", 2);
-__decorateClass([
-  (0, import_decorators.property)({ type: Boolean })
-], KemetOption.prototype, "selected", 2);
-KemetOption = __decorateClass([
-  (0, import_decorators.customElement)("kemet-option")
-], KemetOption);
-//# sourceMappingURL=option.js.map

package/dist/elements/option.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/elements/option.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-option\n * @summary An option in a select.\n *\n * @prop {string} label - The label of the option\n * @prop {string} value - The value of the options\n * @prop {boolean} disabled - Determines whether to disable the option\n * @prop {boolean} selected - Selects the option if true\n *\n */\n\n@customElement('kemet-option')\nexport default class KemetOption extends LitElement {\n  @property({ type: String })\n  label: string;\n\n  @property({ type: String })\n  value: string = '';\n\n  @property({ type: Boolean })\n  disabled: boolean;\n\n  @property({ type: Boolean })\n  selected: boolean;\n\n  render() {\n    return html`<slot></slot>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-option': KemetOption\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAAiC;AACjC,wBAAwC;AAiBxC,IAAqB,cAArB,cAAyC,sBAAW;AAAA,EAApD;AAAA;AAKE,iBAAgB;AAAA;AAAA,EAQhB,SAAS;AACP,WAAO;AAAA,EACT;AACF;AAdE;AAAA,MADC,4BAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GADP,YAEnB;AAGA;AAAA,MADC,4BAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAJP,YAKnB;AAGA;AAAA,MADC,4BAAS,EAAE,MAAM,QAAQ,CAAC;AAAA,GAPR,YAQnB;AAGA;AAAA,MADC,4BAAS,EAAE,MAAM,QAAQ,CAAC;AAAA,GAVR,YAWnB;AAXmB,cAArB;AAAA,MADC,iCAAc,cAAc;AAAA,GACR;","names":[]}

package/dist/elements/option.mjs

@@ -1,8 +0,0 @@
-import {
-  KemetOption
-} from "../chunk-MJLS4VOS.mjs";
-import "../chunk-SAWN7RJP.mjs";
-export {
-  KemetOption as default
-};
-//# sourceMappingURL=option.mjs.map

package/dist/elements/option.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}