kemet-ui 3.1.0 → 4.0.1

package/dist/elements/input.js

@@ -0,0 +1,696 @@
+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/input.ts
+var input_exports = {};
+__export(input_exports, {
+  EnumAriaAutoComplete: () => EnumAriaAutoComplete,
+  EnumAutoComplete: () => EnumAutoComplete,
+  EnumInputModes: () => EnumInputModes,
+  EnumInputTypes: () => EnumInputTypes,
+  ariaAutoComplete: () => ariaAutoComplete,
+  autoComplete: () => autoComplete,
+  default: () => KemetInput,
+  inputModes: () => inputModes,
+  inputTypes: () => inputTypes
+});
+module.exports = __toCommonJS(input_exports);
+var import_lit2 = require("lit");
+var import_decorators = require("lit/decorators.js");
+var import_if_defined = require("lit/directives/if-defined.js");
+var import_live = require("lit/directives/live.js");
+
+// src/utilities/form-controller.ts
+var FormSubmitController = class {
+  constructor(host, options = void 0) {
+    (this.host = host).addController(this);
+    this.options = {
+      form: (input) => input.closest("form"),
+      name: (input) => input.name,
+      value: (input) => input.value,
+      disabled: (input) => input.disabled,
+      ...options
+    };
+    this.handleFormData = this.handleFormData.bind(this);
+    this.handleFormSubmit = this.handleFormSubmit.bind(this);
+  }
+  hostConnected() {
+    this.form = this.options.form(this.host);
+    if (this.form) {
+      this.form.addEventListener("formdata", this.handleFormData);
+      this.form.addEventListener("submit", this.handleFormSubmit);
+    }
+  }
+  hostDisconnected() {
+    if (this.form) {
+      this.form.removeEventListener("formdata", this.handleFormData);
+      this.form.removeEventListener("submit", this.handleFormSubmit);
+      this.form = void 0;
+    }
+  }
+  handleFormData(event) {
+    const disabled = this.options.disabled(this.host);
+    const name = this.options.name(this.host);
+    const value = this.options.value(this.host);
+    if (!disabled && typeof name === "string" && typeof value !== "undefined") {
+      event.formData?.append(name, value.toString());
+    }
+  }
+  handleFormSubmit(event) {
+    event.preventDefault();
+    event.stopImmediatePropagation();
+    const disabled = this.options.disabled(this.host);
+    this.form = this.options.form(this.host);
+    if (this.form && !disabled) {
+      const components = this.form.querySelectorAll("kemet-input, kemet-textarea, kemet-select, kemet-checkbox, kemet-radios");
+      components.forEach((component) => {
+        if (component.checkValidity) {
+          component.checkValidity();
+          if (!component.checkValidity()) {
+            component.status = "error";
+            component.invalid = true;
+            component.dispatchEvent(
+              new CustomEvent("kemet-input-status", {
+                bubbles: true,
+                composed: true,
+                detail: {
+                  status: "error",
+                  validity: component.validity ? component.validity : {},
+                  element: component
+                }
+              })
+            );
+          }
+          if (component.checkLimitValidity && !component.checkLimitValidity()) {
+            component.status = "error";
+            component.invalid = true;
+            component.dispatchEvent(
+              new CustomEvent("kemet-input-status", {
+                bubbles: true,
+                composed: true,
+                detail: {
+                  status: "error",
+                  validity: { passedLimit: true },
+                  element: component
+                }
+              })
+            );
+          }
+        }
+      });
+    }
+  }
+  submit() {
+    const button = document.createElement("button");
+    if (this.form) {
+      button.type = "submit";
+      button.style.position = "absolute";
+      button.style.width = "0";
+      button.style.height = "0";
+      button.style.clip = "rect(0 0 0 0)";
+      button.style.clipPath = "inset(50%)";
+      button.style.overflow = "hidden";
+      button.style.whiteSpace = "nowrap";
+      this.form.append(button);
+      button.click();
+      button.remove();
+    }
+  }
+};
+
+// src/utilities/events.ts
+var emitEvent = (element, name, detail, bubbles = true, composed = true) => {
+  element.dispatchEvent(
+    new CustomEvent(name, { bubbles, composed, detail })
+  );
+};
+
+// src/styles/elements/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-color-error: 1px solid rgb(var(--kemet-color-error));
+    --kemet-input-border-color-success: 1px solid rgb(var(--kemet-color-success));
+    --kemet-input-border-color-warning: 1px solid rgb(var(--kemet-color-warning));
+    --kemet-input-icon-left-padding: 3rem;
+    --kemet-input-icon-right-padding: 3rem;
+    --kemet-input-border-radius-rounded: 0;
+    --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));
+
+    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);
+  }
+
+  input[type='color'] {
+    min-width: 10rem;
+  }
+
+  input[type='search']::-webkit-search-decoration,
+  input[type='search']::-webkit-search-cancel-button,
+  input[type='search']::-webkit-search-results-button,
+  input[type='search']::-webkit-search-results-decoration {
+    display: none;
+  }
+
+  :host([status='error']) input {
+    border: var(--kemet-input-border-color-error);
+  }
+
+  :host([status='success']) input {
+    border: var(--kemet-input-border-color-success);
+  }
+
+  :host([status='warning']) input {
+    border: var(--kemet-input-border-color-warning);
+  }
+
+  :host([disabled]) input {
+    opacity: 0.5;
+  }
+
+  :host([icon-left]) input {
+    padding-left: var(--kemet-input-icon-left-padding);
+  }
+
+  :host([icon-right]) input {
+    padding-right: var(--kemet-input-icon-right-padding);
+  }
+
+  :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([filled]) input {
+    border: var(--kemet-input-border-filled);
+    color: var(--kemet-input-color-filled);
+    background-color: var(--kemet-input-background-color-filled);
+  }
+
+  :host([filled]) kemet-icon,
+  :host([filled]) input::placeholder {
+    color: var(--kemet-input-color-filled);
+  }
+
+  :host([status='error'][filled]) input {
+    background-color: var(--kemet-input-background-color-error);
+  }
+
+  :host([status='success'][filled]) input {
+    background-color: var(--kemet-input-background-color-success);
+  }
+
+  :host([status='warning'][filled]) input {
+    background-color: var(--kemet-input-background-color-warning);
+  }
+
+  kemet-icon-bootstrap,
+  ::slotted(kemet-icon-bootstrap) {
+    color: rgb(var(--kemet-color-text));
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+  kemet-icon-bootstrap.left,
+  :host([icon-left]) ::slotted(kemet-icon-bootstrap) {
+    left: 1rem;
+  }
+
+  kemet-icon-bootstrap.right,
+  :host([icon-right]) ::slotted(kemet-icon-bootstrap) {
+    right: 1rem;
+  }
+
+  kemet-icon-bootstrap.eye,
+  kemet-icon-bootstrap.search {
+    cursor: pointer;
+  }
+
+  :host([status='error']) ::slotted(kemet-icon-bootstrap) {
+    color: rgb(var(--kemet-color-error));
+  }
+
+  :host([status='warning']) ::slotted(kemet-icon-bootstrap) {
+    color: rgb(var(--kemet-color-error));
+  }
+
+  :host([status='success']) ::slotted(kemet-icon-bootstrap) {
+    color: rgb(var(--kemet-color-success));
+  }
+`;
+
+// src/elements/input.ts
+var inputTypes = ["text", "color", "date", "datetime-local", "email", "password", "hidden", "month", "number", "reset", "search", "tel", "time", "url", "week"];
+var EnumInputTypes = /* @__PURE__ */ ((EnumInputTypes2) => {
+  EnumInputTypes2["Text"] = "text";
+  EnumInputTypes2["Color"] = "color";
+  EnumInputTypes2["Date"] = "date";
+  EnumInputTypes2["DateTimeLocal"] = "datetime-local";
+  EnumInputTypes2["Email"] = "email";
+  EnumInputTypes2["Password"] = "password";
+  EnumInputTypes2["Hidden"] = "hidden";
+  EnumInputTypes2["Month"] = "month";
+  EnumInputTypes2["Number"] = "number";
+  EnumInputTypes2["Reset"] = "reset";
+  EnumInputTypes2["Search"] = "search";
+  EnumInputTypes2["Tel"] = "tel";
+  EnumInputTypes2["Time"] = "time";
+  EnumInputTypes2["Url"] = "url";
+  EnumInputTypes2["Week"] = "week";
+  return EnumInputTypes2;
+})(EnumInputTypes || {});
+var ariaAutoComplete = ["inline", "list", "both", "none"];
+var EnumAriaAutoComplete = /* @__PURE__ */ ((EnumAriaAutoComplete2) => {
+  EnumAriaAutoComplete2["Inline"] = "inline";
+  EnumAriaAutoComplete2["List"] = "list";
+  EnumAriaAutoComplete2["Both"] = "both";
+  EnumAriaAutoComplete2["None"] = "none";
+  return EnumAriaAutoComplete2;
+})(EnumAriaAutoComplete || {});
+var autoComplete = ["on", "off", "additional-name", "address-level1", "address-level2", "address-level3", "address-level4", "address-line1", "address-line2", "address-line3", "bday", "bday-year", "bday-day", "bday-month", "billing", "cc-additional-name"];
+var EnumAutoComplete = /* @__PURE__ */ ((EnumAutoComplete2) => {
+  EnumAutoComplete2["On"] = "on";
+  EnumAutoComplete2["Off"] = "off";
+  EnumAutoComplete2["AdditionalName"] = "additional-name";
+  EnumAutoComplete2["AddressLevel1"] = "address-level1";
+  EnumAutoComplete2["AddressLevel2"] = "address-level2";
+  EnumAutoComplete2["AddressLevel3"] = "address-level3";
+  EnumAutoComplete2["AddressLevel4"] = "address-level4";
+  EnumAutoComplete2["AddressLine1"] = "address-line1";
+  EnumAutoComplete2["AddressLine2"] = "address-line2";
+  EnumAutoComplete2["AddressLine3"] = "address-line3";
+  EnumAutoComplete2["Bday"] = "bday";
+  EnumAutoComplete2["BdayYear"] = "bday-year";
+  EnumAutoComplete2["BdayDay"] = "bday-day";
+  EnumAutoComplete2["BdayMonth"] = "bday-month";
+  EnumAutoComplete2["Billing"] = "billing";
+  EnumAutoComplete2["CcAdditionalName"] = "cc-additional-name";
+  return EnumAutoComplete2;
+})(EnumAutoComplete || {});
+var inputModes = ["none", "text", "decimal", "numeric", "tel", "search", "email", "url"];
+var EnumInputModes = /* @__PURE__ */ ((EnumInputModes2) => {
+  EnumInputModes2["None"] = "none";
+  EnumInputModes2["Text"] = "text";
+  EnumInputModes2["Decimal"] = "decimal";
+  EnumInputModes2["Numeric"] = "numeric";
+  EnumInputModes2["Tel"] = "tel";
+  EnumInputModes2["Search"] = "search";
+  EnumInputModes2["Email"] = "email";
+  EnumInputModes2["Url"] = "url";
+  return EnumInputModes2;
+})(EnumInputModes || {});
+var KemetInput = class extends import_lit2.LitElement {
+  constructor() {
+    super();
+    this.name = "input";
+    this.type = "text" /* Text */;
+    this.value = "";
+    this.status = "standard" /* Standard */;
+    this.validateOnBlur = false;
+    this.isPasswordVisible = false;
+    this.focused = false;
+    this.formSubmitController = new FormSubmitController(this);
+  }
+  firstUpdated() {
+    this.input = this.shadowRoot.querySelector("input");
+    this.field = this.closest("kemet-field");
+    this.form = this.closest("form");
+    this.slug = this.field ? this.field.slug : "input";
+    if (this.field) {
+      this.field.addEventListener("kemet-status-change", (event) => this.handleStatus(event));
+    }
+  }
+  render() {
+    return import_lit2.html`
+      <div>
+        <slot name="left" @slotchange=${this.handleLeftChange}></slot>
+        <input
+          part="input"
+          id=${this.slug}
+          name=${this.name}
+          placeholder=${(0, import_if_defined.ifDefined)(this.placeholder)}
+          minlength=${(0, import_if_defined.ifDefined)(this.minlength)}
+          maxlength=${(0, import_if_defined.ifDefined)(this.maxlength)}
+          min=${(0, import_if_defined.ifDefined)(this.min)}
+          max=${(0, import_if_defined.ifDefined)(this.max)}
+          step=${(0, import_if_defined.ifDefined)(this.step)}
+          autocomplete=${(0, import_if_defined.ifDefined)(this.autocomplete)}
+          aria-autocomplete=${(0, import_if_defined.ifDefined)(this.ariaAutoComplete)}
+          aria-controls=${(0, import_if_defined.ifDefined)(this.ariaControls)}
+          aria-activedescendant=${(0, import_if_defined.ifDefined)(this.ariaActiveDescendant)}
+          pattern=${(0, import_if_defined.ifDefined)(this.pattern)}
+          inputmode=${(0, import_if_defined.ifDefined)(this.inputmode)}
+          aria-invalid=${this.invalid ? "true" : "false"}
+          ?autofocus=${this.autofocus}
+          ?disabled=${this.disabled}
+          ?readonly=${this.readonly}
+          ?required=${this.required}
+          .type="${this.type === "password" && this.isPasswordVisible ? "text" : this.type}"
+          .value=${(0, import_live.live)(this.value)}
+          @change=${this.handleChange}
+          @input=${this.handleInput}
+          @invalid=${this.handleInvalid}
+          @focus=${this.handleFocus}
+          @blur=${this.handleBlur}
+        />
+        <slot name="right" @slotchange=${this.handleRightChange}></slot>
+        ${this.makeIconClear()} ${this.makeVisibilityToggle()}
+      </div>
+    `;
+  }
+  handleLeftChange() {
+    const left = this.querySelector('[slot="left"]');
+    if (left) this.iconLeft = true;
+  }
+  handleRightChange() {
+    const right = this.querySelector('[slot="right"]');
+    if (right) this.iconRight = true;
+  }
+  makeIconClear() {
+    if (this.type === "search" && this.value !== "") {
+      return import_lit2.html`
+        <kemet-icon-bootstrap class="search right" icon="x-lg" @click=${() => this.handleClear()}></kemet-icon-bootstrap>
+      `;
+    }
+    return null;
+  }
+  makeVisibilityToggle() {
+    if (this.type === "password" /* Password */) {
+      this.iconRight = true;
+      return import_lit2.html`<kemet-icon-bootstrap
+        class="eye right"
+        icon="${this.isPasswordVisible ? "eye" : "eye-slash"}"
+        @click=${() => this.togglePasswordVisibility()}
+      ></kemet-icon-bootstrap>`;
+    }
+    return null;
+  }
+  /**
+   * Handles when the input receives focus
+   * @private
+   */
+  handleFocus() {
+    this.focused = true;
+    emitEvent(this, "kemet-focus", this);
+  }
+  /**
+   * Handles when the input loses focus
+   * @private
+   */
+  handleBlur() {
+    if (this.validateOnBlur && this.form) {
+      this.input?.reportValidity();
+      this.validity = this.input?.validity;
+    }
+    this.focused = false;
+    emitEvent(this, "kemet-blur", this);
+  }
+  /**
+   * Handles when the input changes value
+   * @private
+   */
+  handleChange(event) {
+    this.value = this.input.value;
+    if (this.input.checkValidity() && this.checkLimitValidity() && this.status !== "success" /* Success */) {
+      this.invalid = false;
+      this.status = "standard" /* Standard */;
+      this.validity = this.input.validity;
+      emitEvent(this, "kemet-status-change", {
+        status: "standard" /* Standard */,
+        validity: this.input.validity,
+        element: this,
+        value: event.target.value
+      });
+    }
+  }
+  /**
+   * Handles when the input receives input
+   * @private
+   */
+  handleInput(event) {
+    this.value = this.input.value;
+    emitEvent(this, "kemet-input", {
+      status: this.status,
+      validity: this.input.validity,
+      element: event.target,
+      value: event.target.value
+    });
+  }
+  /**
+   * Handles when the input has an error
+   * @private
+   */
+  handleInvalid(event) {
+    this.validity = this.input?.validity;
+    if (this.validateOnBlur) {
+      this.invalid = true;
+      this.status = "error" /* Error */;
+      emitEvent(this, "kemet-status-change", {
+        status: "error" /* Error */,
+        validity: this.input?.validity,
+        element: this,
+        value: event.target.value
+      });
+    }
+  }
+  handleStatus(event) {
+    this.status = event.detail.status;
+  }
+  /**
+   * Toggles password visibility
+   * @private
+   */
+  togglePasswordVisibility() {
+    this.isPasswordVisible = !this.isPasswordVisible;
+  }
+  /**
+   * Handles the clear button for search
+   * @private
+   */
+  handleClear() {
+    this.value = "";
+    emitEvent(this, "kemet-input", {
+      status: this.status,
+      validity: this.input.validity,
+      element: this,
+      value: ""
+    });
+  }
+  /**
+   * Checks the validity of the character limit for the count component
+   * @public
+   * @method checkLimitValidity
+   * @returns {boolean}
+   */
+  checkLimitValidity() {
+    if (this.field) {
+      const count = this.field.querySelector("kemet-count");
+      if (count) {
+        return this.value.length < count.limit;
+      }
+    }
+    return true;
+  }
+  /**
+   * Checks the validity of the standard input
+   * @public
+   * @method checkValidity
+   * @returns {boolean}
+   */
+  checkValidity() {
+    return this.input?.checkValidity();
+  }
+  /**
+   * Focuses the standard input
+   * @public
+   * @method focus
+   * @returns {void}
+   */
+  focus() {
+    this.input?.focus();
+  }
+};
+KemetInput.styles = [stylesBase];
+__decorateClass([
+  (0, import_decorators.property)({ type: String })
+], KemetInput.prototype, "slug", 2);
+__decorateClass([
+  (0, import_decorators.property)({ type: String })
+], KemetInput.prototype, "name", 2);
+__decorateClass([
+  (0, import_decorators.property)({ type: String })
+], KemetInput.prototype, "placeholder", 2);
+__decorateClass([
+  (0, import_decorators.property)({ type: Number })
+], KemetInput.prototype, "minlength", 2);
+__decorateClass([
+  (0, import_decorators.property)({ type: Number })
+], KemetInput.prototype, "maxlength", 2);
+__decorateClass([
+  (0, import_decorators.property)({ type: String })
+], KemetInput.prototype, "min", 2);
+__decorateClass([
+  (0, import_decorators.property)({ type: String })
+], KemetInput.prototype, "max", 2);
+__decorateClass([
+  (0, import_decorators.property)({ type: Number })
+], KemetInput.prototype, "step", 2);
+__decorateClass([
+  (0, import_decorators.property)({ type: String })
+], KemetInput.prototype, "autocomplete", 2);
+__decorateClass([
+  (0, import_decorators.property)({ type: String })
+], KemetInput.prototype, "pattern", 2);
+__decorateClass([
+  (0, import_decorators.property)({ type: String })
+], KemetInput.prototype, "inputmode", 2);
+__decorateClass([
+  (0, import_decorators.property)({ type: Boolean })
+], KemetInput.prototype, "autofocus", 2);
+__decorateClass([
+  (0, import_decorators.property)({ type: Boolean, reflect: true })
+], KemetInput.prototype, "disabled", 2);
+__decorateClass([
+  (0, import_decorators.property)({ type: Boolean })
+], KemetInput.prototype, "readonly", 2);
+__decorateClass([
+  (0, import_decorators.property)({ type: Boolean, reflect: true })
+], KemetInput.prototype, "required", 2);
+__decorateClass([
+  (0, import_decorators.property)({ type: String })
+], KemetInput.prototype, "type", 2);
+__decorateClass([
+  (0, import_decorators.property)({ type: String, reflect: true })
+], KemetInput.prototype, "value", 2);
+__decorateClass([
+  (0, import_decorators.property)({ type: Boolean, reflect: true })
+], KemetInput.prototype, "invalid", 2);
+__decorateClass([
+  (0, import_decorators.property)({ type: String, reflect: true })
+], KemetInput.prototype, "status", 2);
+__decorateClass([
+  (0, import_decorators.property)({ type: Boolean, attribute: "validate-on-blur" })
+], KemetInput.prototype, "validateOnBlur", 2);
+__decorateClass([
+  (0, import_decorators.property)({ type: String, attribute: "aria-autocomplete" })
+], KemetInput.prototype, "ariaAutoComplete", 2);
+__decorateClass([
+  (0, import_decorators.property)({ type: String, attribute: "aria-controls" })
+], KemetInput.prototype, "ariaControls", 2);
+__decorateClass([
+  (0, import_decorators.property)({ type: String, attribute: "aria-activedescendant" })
+], KemetInput.prototype, "ariaActiveDescendant", 2);
+__decorateClass([
+  (0, import_decorators.property)({ type: Boolean, reflect: true })
+], KemetInput.prototype, "filled", 2);
+__decorateClass([
+  (0, import_decorators.property)({ type: Boolean, reflect: true, attribute: "icon-right" })
+], KemetInput.prototype, "iconRight", 2);
+__decorateClass([
+  (0, import_decorators.property)({ type: Boolean, reflect: true, attribute: "icon-left" })
+], KemetInput.prototype, "iconLeft", 2);
+__decorateClass([
+  (0, import_decorators.property)({ type: Object })
+], KemetInput.prototype, "validity", 2);
+__decorateClass([
+  (0, import_decorators.property)({ type: Boolean })
+], KemetInput.prototype, "isPasswordVisible", 2);
+__decorateClass([
+  (0, import_decorators.property)({ type: String })
+], KemetInput.prototype, "inputType", 2);
+__decorateClass([
+  (0, import_decorators.property)({ type: Boolean, reflect: true })
+], KemetInput.prototype, "focused", 2);
+__decorateClass([
+  (0, import_decorators.property)({ type: String, reflect: true })
+], KemetInput.prototype, "rounded", 2);
+__decorateClass([
+  (0, import_decorators.state)()
+], KemetInput.prototype, "field", 2);
+__decorateClass([
+  (0, import_decorators.state)()
+], KemetInput.prototype, "form", 2);
+__decorateClass([
+  (0, import_decorators.state)()
+], KemetInput.prototype, "input", 2);
+KemetInput = __decorateClass([
+  (0, import_decorators.customElement)("kemet-input")
+], KemetInput);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  EnumAriaAutoComplete,
+  EnumAutoComplete,
+  EnumInputModes,
+  EnumInputTypes,
+  ariaAutoComplete,
+  autoComplete,
+  inputModes,
+  inputTypes
+});
+//# sourceMappingURL=input.js.map