kemet-ui 4.0.0 → 4.0.2

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

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

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

@@ -0,0 +1 @@
+{"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":"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","names":["import_lit"]}

package/dist/elements/multi-input.mjs

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

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

package/dist/elements/option.d.mts

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

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

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

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

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

package/dist/elements/option.mjs.map

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