kemet-ui 4.0.0 → 4.0.2

package/dist/elements/textarea.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/elements/textarea.ts","../../src/utilities/form-controller.ts","../../src/styles/elements/textarea.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { live } from 'lit/directives/live.js';\nimport { FormSubmitController } from '../utilities/form-controller';\nimport KemetField from './field';\nimport { EnumStatuses, TypeRoundedSizes, TypeStatus } from '../utilities/constants';\nimport { stylesTextarea } from '../styles/elements/textarea';\n\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-textarea\n * @summary An enhanced textarea element.\n *\n * @prop {string} slug\n * @prop {string}  name\n * @prop {string}  placeholder\n * @prop {number}  minlength\n * @prop {number}  maxlength\n * @prop {string}  inputmode\n * @prop {boolean}  disabled\n * @prop {boolean}  readonly\n * @prop {boolean}  required\n * @prop {string}  value\n * @prop {boolean}  invalid\n * @prop {TypeStatus}  status\n * @prop {boolean}  validateOnBlur\n * @prop {TypeRoundedSizes}  rounded\n * @prop {boolean}  filled\n * @prop {number}  rows\n * @prop {boolean} autocorrect\n *\n *\n * @csspart textarea\n *\n * @cssproperty --kemet-textarea-padding - The padding on the textarea.\n * @cssproperty --kemet-textarea-border - The border of the textarea.\n * @cssproperty --kemet-textarea-border-color-error - The border of the error state.\n * @cssproperty --kemet-textarea-border-color-success - The border of the success state.\n * @cssproperty --kemet-textarea-border-color-warning - The border of the warning state.\n * @cssproperty --kemet-textarea-border-radius-rounded - The border radius on rounded.\n * @cssproperty --kemet-textarea-border-filled - The border on filled.\n * @cssproperty --kemet-textarea-color-filled - The color on filled.\n * @cssproperty --kemet-textarea-background-color-filled - The background-color on filled.\n * @cssproperty --kemet-textarea-background-color-error - The error state background color.\n * @cssproperty --kemet-textarea-background-color-success - The success state background color.\n * @cssproperty --kemet-textarea-background-color-warning - The warning state background color.\n *\n */\n\n@customElement('kemet-textarea')\nexport default class KemetTextarea extends LitElement {\n  formSubmitController: FormSubmitController;\n\n  static styles = [stylesTextarea];\n\n  @property({ type: String })\n  slug: string = 'textarea';\n\n  @property({ type: String })\n  name: string = 'textarea';\n\n  @property({ type: String })\n  placeholder: string;\n\n  @property({ type: Number })\n  minlength: number;\n\n  @property({ type: Number })\n  maxlength: number;\n\n  @property({ type: String })\n  inputmode: string;\n\n  @property({ type: Boolean })\n  autofocus: boolean;\n\n  @property({ type: Boolean, reflect: true })\n  disabled: boolean;\n\n  @property({ type: Boolean })\n  readonly: boolean;\n\n  @property({ type: Boolean, reflect: true })\n  required: boolean;\n\n  @property({ type: String })\n  value: string = '';\n\n  @property({ type: Boolean, reflect: true })\n  invalid: boolean;\n\n  @property({ type: String, reflect: true })\n  status: TypeStatus = EnumStatuses.Standard;\n\n  @property({ type: Number })\n  rows: number = 4;\n\n  @property({ type: Boolean, attribute: 'validate-on-blur' })\n  validateOnBlur: boolean;\n\n  @property({ type: Boolean, reflect: true })\n  filled: boolean;\n\n  @property({ reflect: true })\n  rounded: TypeRoundedSizes;\n\n  @property({ type: Boolean })\n  autocorrect: boolean;\n\n  @state()\n  form: HTMLFormElement;\n\n  @state()\n  control: KemetField;\n\n  @state()\n  textarea: HTMLTextAreaElement;\n\n  @state()\n  hasFocus: boolean;\n\n  @state()\n  validity: ValidityState;\n\n  constructor() {\n    super();\n\n    /** @internal */\n    this.formSubmitController = new FormSubmitController(this);\n  }\n\n  firstUpdated() {\n    // elements\n    this.form = this.closest('form');\n    this.control = this.closest('kemet-field');\n    this.textarea = this.shadowRoot.querySelector('textarea');\n  }\n\n  render() {\n    return html`\n      <textarea\n        part=\"textarea\"\n        id=${this.slug}\n        name=${this.name}\n        .value=${live(this.value)}\n        ?disabled=${this.disabled}\n        ?readonly=${this.readonly}\n        ?required=${this.required}\n        placeholder=${ifDefined(this.placeholder)}\n        rows=${ifDefined(this.rows)}\n        minlength=${ifDefined(this.minlength)}\n        maxlength=${ifDefined(this.maxlength)}\n        autocorrect=${ifDefined(this.autocorrect)}\n        ?autofocus=${this.autofocus}\n        spellcheck=${ifDefined(this.spellcheck)}\n        inputmode=${ifDefined(this.inputmode)}\n        @change=${this.handleChange}\n        @input=${this.handleInput}\n        @focus=${this.handleFocus}\n        @blur=${this.handleBlur}\n        @invalid=${this.handleInvalid}\n      ></textarea>\n    `;\n  }\n\n  /**\n   * Handles when the textarea receives focus\n   * @private\n   */\n  handleFocus() {\n    this.hasFocus = true;\n\n    /**\n     * Fires when the input receives and loses focus\n     */\n    this.dispatchEvent(\n      new CustomEvent('kemet-input-focused', {\n        bubbles: true,\n        composed: true,\n        detail: true,\n      }),\n    );\n  }\n\n  /**\n   * Handles when the textarea loses focus\n   * @private\n   */\n  handleBlur() {\n    this.hasFocus = false;\n\n    /**\n     * Fires when the input receives and loses focus\n     */\n    this.dispatchEvent(\n      new CustomEvent('kemet-input-focused', {\n        bubbles: true,\n        composed: true,\n        detail: false,\n      }),\n    );\n\n    if (this.validateOnBlur && this.form) {\n      this.textarea.checkValidity();\n      this.validity = this.textarea.validity;\n    }\n  }\n\n  /**\n   * Handles when the textarea changes value\n   * @private\n   */\n  handleChange() {\n    this.value = this.textarea.value;\n\n    if (this.textarea.checkValidity() && this.checkLimitValidity()) {\n      this.invalid = false;\n      this.status = EnumStatuses.Standard;\n      this.validity = this.textarea.validity;\n\n      /**\n       * Fires when there's a change in status\n       */\n      this.dispatchEvent(\n        new CustomEvent('kemet-input-status', {\n          bubbles: true,\n          composed: true,\n          detail: {\n            status: 'standard',\n            validity: this.textarea.validity,\n            element: this,\n          },\n        }),\n      );\n    }\n  }\n\n  /**\n   * Handles when the textarea receives input\n   * @private\n   */\n  handleInput() {\n    this.value = this.textarea.value;\n\n    /**\n     * Fires when the input receives input\n     */\n    this.dispatchEvent(\n      new CustomEvent('kemet-input-input', {\n        bubbles: true,\n        composed: true,\n        detail: this.value,\n      }),\n    );\n  }\n\n  /**\n   * Handles when the textarea has an error\n   * @private\n   */\n  handleInvalid() {\n    this.validity = this.textarea.validity;\n\n    if (this.validateOnBlur) {\n      this.invalid = true;\n      this.status = EnumStatuses.Error;\n\n      /**\n       * Fires when there's a change in status\n       */\n      this.dispatchEvent(\n        new CustomEvent('kemet-input-status', {\n          bubbles: true,\n          composed: true,\n          detail: {\n            status: 'error',\n            validity: this.textarea.validity,\n            element: this,\n          },\n        }),\n      );\n    }\n  }\n\n  /**\n   * Checks the validity of the character limit for the count component\n   * @private\n   * @returns {boolean}\n   */\n  checkLimitValidity(): boolean {\n    if (this.control) {\n      const count = this.control.querySelector('kemet-count');\n      if (count) {\n        return this.value.length < count.limit;\n      }\n    }\n\n    return true;\n  }\n\n  /**\n   * Checks the validity of the standard input\n   * @public\n   * @returns {boolean}\n   */\n  checkValidity(): boolean {\n    return this.textarea.checkValidity();\n  }\n\n  /**\n   * Focuses the standard input\n   * @public\n   */\n  focus() {\n    return this.textarea.focus();\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-textarea': KemetTextarea\n  }\n}\n","export class FormSubmitController {\n  host;\n  form;\n  options;\n\n  constructor(host, options = undefined) {\n    (this.host = host).addController(this);\n\n    this.options = {\n      form: input => input.closest('form'),\n      name: input => input.name,\n      value: input => input.value,\n      disabled: input => input.disabled,\n      ...options,\n    };\n\n    this.handleFormData = this.handleFormData.bind(this);\n    this.handleFormSubmit = this.handleFormSubmit.bind(this);\n  }\n\n  hostConnected() {\n    this.form = this.options.form(this.host);\n\n    if (this.form) {\n      this.form.addEventListener('formdata', this.handleFormData);\n      this.form.addEventListener('submit', this.handleFormSubmit);\n    }\n  }\n\n  hostDisconnected() {\n    if (this.form) {\n      this.form.removeEventListener('formdata', this.handleFormData);\n      this.form.removeEventListener('submit', this.handleFormSubmit);\n      this.form = undefined;\n    }\n  }\n\n  handleFormData(event) {\n    const disabled = this.options.disabled(this.host);\n    const name = this.options.name(this.host);\n    const value = this.options.value(this.host);\n\n    if (!disabled && typeof name === 'string' && typeof value !== 'undefined') {\n      // TODO recreate a scenario where value will be an array\n      // if (Array.isArray(value)) {\n      //   value.forEach((val) => {\n      //     event.formData?.append(name, val.toString());\n      //   });\n      // } else {\n      //   event.formData?.append(name, value.toString());\n      // }\n      event.formData?.append(name, value.toString());\n    }\n  }\n\n  handleFormSubmit(event) {\n    event.preventDefault();\n    event.stopImmediatePropagation();\n\n    const disabled = this.options.disabled(this.host);\n    this.form = this.options.form(this.host);\n\n    if (this.form && !disabled) {\n      const components = this.form.querySelectorAll('kemet-input, kemet-textarea, kemet-select, kemet-checkbox, kemet-radios');\n\n      components.forEach((component) => {\n        if (component.checkValidity) {\n          component.checkValidity();\n\n          if (!component.checkValidity()) {\n            component.status = 'error';\n            component.invalid = true;\n\n            component.dispatchEvent(\n              new CustomEvent('kemet-input-status', {\n                bubbles: true,\n                composed: true,\n                detail: {\n                  status: 'error',\n                  validity: component.validity ? component.validity : {},\n                  element: component,\n                },\n              }),\n            );\n          }\n\n          if (component.checkLimitValidity && !component.checkLimitValidity()) {\n            component.status = 'error';\n            component.invalid = true;\n\n            component.dispatchEvent(\n              new CustomEvent('kemet-input-status', {\n                bubbles: true,\n                composed: true,\n                detail: {\n                  status: 'error',\n                  validity: { passedLimit: true },\n                  element: component,\n                },\n              }),\n            );\n          }\n        }\n      });\n    }\n  }\n\n  submit() {\n    const button = document.createElement('button');\n\n    if (this.form) {\n      button.type = 'submit';\n      button.style.position = 'absolute';\n      button.style.width = '0';\n      button.style.height = '0';\n      button.style.clip = 'rect(0 0 0 0)';\n      button.style.clipPath = 'inset(50%)';\n      button.style.overflow = 'hidden';\n      button.style.whiteSpace = 'nowrap';\n      this.form.append(button);\n      button.click();\n      button.remove();\n    }\n  }\n}\n","import { css } from 'lit';\n\nexport const stylesTextarea = css`\n  :host {\n    --kemet-textarea-padding: 1rem;\n    --kemet-textarea-border: 1px solid rgb(var(--kemet-color-foreground));\n    --kemet-textarea-border-color-error: 1px solid rgb(var(--kemet-color-error));\n    --kemet-textarea-border-color-success: 1px solid rgb(var(--kemet-color-success));\n    --kemet-textarea-border-color-warning: 1px solid rgb(var(--kemet-color-warning));\n    --kemet-textarea-icon-left-padding: 3rem;\n    --kemet-textarea-icon-right-padding: 3rem;\n    --kemet-textarea-border-filled: none;\n    --kemet-textarea-color-filled: rgb(var(--kemet-color-white));\n    --kemet-textarea-background-color-filled: rgb(var(--kemet-color-primary));\n    --kemet-textarea-background-color-error: rgb(var(--kemet-color-error));\n    --kemet-textarea-background-color-success: rgb(var(--kemet-color-success));\n    --kemet-textarea-background-color-warning: rgb(var(--kemet-color-warning));\n    --kemet-textarea-border-radius-rounded: 0;\n\n    position: relative;\n    display: block;\n  }\n\n  textarea {\n    color: rgb(var(--kemet-color-text));\n    display: block;\n    width: 100%;\n    padding: var(--kemet-textarea-padding);\n    border: var(--kemet-textarea-border);\n    appearance: none;\n    box-sizing: border-box;\n    background: transparent;\n    border-radius: var(--kemet-textarea-border-radius-rounded);\n  }\n\n  :host([status='error']) textarea {\n    border: var(--kemet-textarea-border-color-error);\n  }\n\n  :host([status='success']) textarea {\n    border: var(--kemet-textarea-border-color-success);\n  }\n\n  :host([status='warning']) textarea {\n    border: var(--kemet-textarea-border-color-warning);\n  }\n\n  :host([disabled]) textarea {\n    opacity: 0.5;\n  }\n\n  :host([icon-left]) textarea {\n    padding-left: var(--kemet-textarea-icon-left-padding);\n  }\n\n  :host([icon-right]) textarea {\n    padding-right: var(--kemet-textarea-icon-right-padding);\n  }\n\n  :host([rounded]) textarea {\n    --kemet-textarea-border-radius-rounded: var(--kemet-border-radius-md);\n  }\n\n  :host([rounded=sm]) textarea {\n    --kemet-textarea-border-radius-rounded: var(--kemet-border-radius-sm);\n  }\n\n  :host([rounded=md]) textarea {\n    --kemet-textarea-border-radius-rounded: var(--kemet-border-radius-md);\n  }\n\n  :host([rounded=lg]) textarea {\n    --kemet-textarea-border-radius-rounded: var(--kemet-border-radius-lg);\n  }\n\n  :host([rounded=xl]) textarea {\n    --kemet-textarea-border-radius-rounded: var(--kemet-border-radius-xl);\n  }\n\n  :host([rounded=circle]) textarea {\n    --kemet-textarea-border-radius-rounded: var(--kemet-border-radius-circle);\n  }\n\n  :host([rounded=pill]) textarea {\n    --kemet-textarea-border-radius-rounded: var(--kemet-border-radius-pill);\n  }\n\n  :host([filled]) textarea {\n    border: var(--kemet-textarea-border-filled);\n    color: var(--kemet-textarea-color-filled);\n    background-color: var(--kemet-textarea-background-color-filled);\n  }\n\n  :host([filled]) textarea::placeholder {\n    color: var(--kemet-textarea-color-filled);\n  }\n\n  :host([status='error'][filled]) textarea {\n    background-color: var(--kemet-textarea-background-color-error);\n  }\n\n  :host([status='success'][filled]) textarea {\n    background-color: var(--kemet-textarea-background-color-success);\n  }\n\n  :host([status='warning'][filled]) textarea {\n    background-color: var(--kemet-textarea-background-color-warning);\n  }\n`;\n"],"mappings":"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","names":["import_lit"]}

package/dist/elements/textarea.mjs

@@ -0,0 +1,364 @@
+import "../chunk-42U43NKG.mjs";
+import {
+  FormSubmitController
+} from "../chunk-VDX3OED3.mjs";
+import {
+  __decorateClass
+} from "../chunk-SAWN7RJP.mjs";
+
+// src/elements/textarea.ts
+import { html, LitElement } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { live } from "lit/directives/live.js";
+
+// src/styles/elements/textarea.ts
+import { css } from "lit";
+var stylesTextarea = css`
+  :host {
+    --kemet-textarea-padding: 1rem;
+    --kemet-textarea-border: 1px solid rgb(var(--kemet-color-foreground));
+    --kemet-textarea-border-color-error: 1px solid rgb(var(--kemet-color-error));
+    --kemet-textarea-border-color-success: 1px solid rgb(var(--kemet-color-success));
+    --kemet-textarea-border-color-warning: 1px solid rgb(var(--kemet-color-warning));
+    --kemet-textarea-icon-left-padding: 3rem;
+    --kemet-textarea-icon-right-padding: 3rem;
+    --kemet-textarea-border-filled: none;
+    --kemet-textarea-color-filled: rgb(var(--kemet-color-white));
+    --kemet-textarea-background-color-filled: rgb(var(--kemet-color-primary));
+    --kemet-textarea-background-color-error: rgb(var(--kemet-color-error));
+    --kemet-textarea-background-color-success: rgb(var(--kemet-color-success));
+    --kemet-textarea-background-color-warning: rgb(var(--kemet-color-warning));
+    --kemet-textarea-border-radius-rounded: 0;
+
+    position: relative;
+    display: block;
+  }
+
+  textarea {
+    color: rgb(var(--kemet-color-text));
+    display: block;
+    width: 100%;
+    padding: var(--kemet-textarea-padding);
+    border: var(--kemet-textarea-border);
+    appearance: none;
+    box-sizing: border-box;
+    background: transparent;
+    border-radius: var(--kemet-textarea-border-radius-rounded);
+  }
+
+  :host([status='error']) textarea {
+    border: var(--kemet-textarea-border-color-error);
+  }
+
+  :host([status='success']) textarea {
+    border: var(--kemet-textarea-border-color-success);
+  }
+
+  :host([status='warning']) textarea {
+    border: var(--kemet-textarea-border-color-warning);
+  }
+
+  :host([disabled]) textarea {
+    opacity: 0.5;
+  }
+
+  :host([icon-left]) textarea {
+    padding-left: var(--kemet-textarea-icon-left-padding);
+  }
+
+  :host([icon-right]) textarea {
+    padding-right: var(--kemet-textarea-icon-right-padding);
+  }
+
+  :host([rounded]) textarea {
+    --kemet-textarea-border-radius-rounded: var(--kemet-border-radius-md);
+  }
+
+  :host([rounded=sm]) textarea {
+    --kemet-textarea-border-radius-rounded: var(--kemet-border-radius-sm);
+  }
+
+  :host([rounded=md]) textarea {
+    --kemet-textarea-border-radius-rounded: var(--kemet-border-radius-md);
+  }
+
+  :host([rounded=lg]) textarea {
+    --kemet-textarea-border-radius-rounded: var(--kemet-border-radius-lg);
+  }
+
+  :host([rounded=xl]) textarea {
+    --kemet-textarea-border-radius-rounded: var(--kemet-border-radius-xl);
+  }
+
+  :host([rounded=circle]) textarea {
+    --kemet-textarea-border-radius-rounded: var(--kemet-border-radius-circle);
+  }
+
+  :host([rounded=pill]) textarea {
+    --kemet-textarea-border-radius-rounded: var(--kemet-border-radius-pill);
+  }
+
+  :host([filled]) textarea {
+    border: var(--kemet-textarea-border-filled);
+    color: var(--kemet-textarea-color-filled);
+    background-color: var(--kemet-textarea-background-color-filled);
+  }
+
+  :host([filled]) textarea::placeholder {
+    color: var(--kemet-textarea-color-filled);
+  }
+
+  :host([status='error'][filled]) textarea {
+    background-color: var(--kemet-textarea-background-color-error);
+  }
+
+  :host([status='success'][filled]) textarea {
+    background-color: var(--kemet-textarea-background-color-success);
+  }
+
+  :host([status='warning'][filled]) textarea {
+    background-color: var(--kemet-textarea-background-color-warning);
+  }
+`;
+
+// src/elements/textarea.ts
+var KemetTextarea = class extends LitElement {
+  constructor() {
+    super();
+    this.slug = "textarea";
+    this.name = "textarea";
+    this.value = "";
+    this.status = "standard" /* Standard */;
+    this.rows = 4;
+    this.formSubmitController = new FormSubmitController(this);
+  }
+  firstUpdated() {
+    this.form = this.closest("form");
+    this.control = this.closest("kemet-field");
+    this.textarea = this.shadowRoot.querySelector("textarea");
+  }
+  render() {
+    return html`
+      <textarea
+        part="textarea"
+        id=${this.slug}
+        name=${this.name}
+        .value=${live(this.value)}
+        ?disabled=${this.disabled}
+        ?readonly=${this.readonly}
+        ?required=${this.required}
+        placeholder=${ifDefined(this.placeholder)}
+        rows=${ifDefined(this.rows)}
+        minlength=${ifDefined(this.minlength)}
+        maxlength=${ifDefined(this.maxlength)}
+        autocorrect=${ifDefined(this.autocorrect)}
+        ?autofocus=${this.autofocus}
+        spellcheck=${ifDefined(this.spellcheck)}
+        inputmode=${ifDefined(this.inputmode)}
+        @change=${this.handleChange}
+        @input=${this.handleInput}
+        @focus=${this.handleFocus}
+        @blur=${this.handleBlur}
+        @invalid=${this.handleInvalid}
+      ></textarea>
+    `;
+  }
+  /**
+   * Handles when the textarea receives focus
+   * @private
+   */
+  handleFocus() {
+    this.hasFocus = true;
+    this.dispatchEvent(
+      new CustomEvent("kemet-input-focused", {
+        bubbles: true,
+        composed: true,
+        detail: true
+      })
+    );
+  }
+  /**
+   * Handles when the textarea loses focus
+   * @private
+   */
+  handleBlur() {
+    this.hasFocus = false;
+    this.dispatchEvent(
+      new CustomEvent("kemet-input-focused", {
+        bubbles: true,
+        composed: true,
+        detail: false
+      })
+    );
+    if (this.validateOnBlur && this.form) {
+      this.textarea.checkValidity();
+      this.validity = this.textarea.validity;
+    }
+  }
+  /**
+   * Handles when the textarea changes value
+   * @private
+   */
+  handleChange() {
+    this.value = this.textarea.value;
+    if (this.textarea.checkValidity() && this.checkLimitValidity()) {
+      this.invalid = false;
+      this.status = "standard" /* Standard */;
+      this.validity = this.textarea.validity;
+      this.dispatchEvent(
+        new CustomEvent("kemet-input-status", {
+          bubbles: true,
+          composed: true,
+          detail: {
+            status: "standard",
+            validity: this.textarea.validity,
+            element: this
+          }
+        })
+      );
+    }
+  }
+  /**
+   * Handles when the textarea receives input
+   * @private
+   */
+  handleInput() {
+    this.value = this.textarea.value;
+    this.dispatchEvent(
+      new CustomEvent("kemet-input-input", {
+        bubbles: true,
+        composed: true,
+        detail: this.value
+      })
+    );
+  }
+  /**
+   * Handles when the textarea has an error
+   * @private
+   */
+  handleInvalid() {
+    this.validity = this.textarea.validity;
+    if (this.validateOnBlur) {
+      this.invalid = true;
+      this.status = "error" /* Error */;
+      this.dispatchEvent(
+        new CustomEvent("kemet-input-status", {
+          bubbles: true,
+          composed: true,
+          detail: {
+            status: "error",
+            validity: this.textarea.validity,
+            element: this
+          }
+        })
+      );
+    }
+  }
+  /**
+   * Checks the validity of the character limit for the count component
+   * @private
+   * @returns {boolean}
+   */
+  checkLimitValidity() {
+    if (this.control) {
+      const count = this.control.querySelector("kemet-count");
+      if (count) {
+        return this.value.length < count.limit;
+      }
+    }
+    return true;
+  }
+  /**
+   * Checks the validity of the standard input
+   * @public
+   * @returns {boolean}
+   */
+  checkValidity() {
+    return this.textarea.checkValidity();
+  }
+  /**
+   * Focuses the standard input
+   * @public
+   */
+  focus() {
+    return this.textarea.focus();
+  }
+};
+KemetTextarea.styles = [stylesTextarea];
+__decorateClass([
+  property({ type: String })
+], KemetTextarea.prototype, "slug", 2);
+__decorateClass([
+  property({ type: String })
+], KemetTextarea.prototype, "name", 2);
+__decorateClass([
+  property({ type: String })
+], KemetTextarea.prototype, "placeholder", 2);
+__decorateClass([
+  property({ type: Number })
+], KemetTextarea.prototype, "minlength", 2);
+__decorateClass([
+  property({ type: Number })
+], KemetTextarea.prototype, "maxlength", 2);
+__decorateClass([
+  property({ type: String })
+], KemetTextarea.prototype, "inputmode", 2);
+__decorateClass([
+  property({ type: Boolean })
+], KemetTextarea.prototype, "autofocus", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], KemetTextarea.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: Boolean })
+], KemetTextarea.prototype, "readonly", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], KemetTextarea.prototype, "required", 2);
+__decorateClass([
+  property({ type: String })
+], KemetTextarea.prototype, "value", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], KemetTextarea.prototype, "invalid", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], KemetTextarea.prototype, "status", 2);
+__decorateClass([
+  property({ type: Number })
+], KemetTextarea.prototype, "rows", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "validate-on-blur" })
+], KemetTextarea.prototype, "validateOnBlur", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], KemetTextarea.prototype, "filled", 2);
+__decorateClass([
+  property({ reflect: true })
+], KemetTextarea.prototype, "rounded", 2);
+__decorateClass([
+  property({ type: Boolean })
+], KemetTextarea.prototype, "autocorrect", 2);
+__decorateClass([
+  state()
+], KemetTextarea.prototype, "form", 2);
+__decorateClass([
+  state()
+], KemetTextarea.prototype, "control", 2);
+__decorateClass([
+  state()
+], KemetTextarea.prototype, "textarea", 2);
+__decorateClass([
+  state()
+], KemetTextarea.prototype, "hasFocus", 2);
+__decorateClass([
+  state()
+], KemetTextarea.prototype, "validity", 2);
+KemetTextarea = __decorateClass([
+  customElement("kemet-textarea")
+], KemetTextarea);
+export {
+  KemetTextarea as default
+};
+//# sourceMappingURL=textarea.mjs.map

package/dist/elements/textarea.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/elements/textarea.ts","../../src/styles/elements/textarea.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { live } from 'lit/directives/live.js';\nimport { FormSubmitController } from '../utilities/form-controller';\nimport KemetField from './field';\nimport { EnumStatuses, TypeRoundedSizes, TypeStatus } from '../utilities/constants';\nimport { stylesTextarea } from '../styles/elements/textarea';\n\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-textarea\n * @summary An enhanced textarea element.\n *\n * @prop {string} slug\n * @prop {string}  name\n * @prop {string}  placeholder\n * @prop {number}  minlength\n * @prop {number}  maxlength\n * @prop {string}  inputmode\n * @prop {boolean}  disabled\n * @prop {boolean}  readonly\n * @prop {boolean}  required\n * @prop {string}  value\n * @prop {boolean}  invalid\n * @prop {TypeStatus}  status\n * @prop {boolean}  validateOnBlur\n * @prop {TypeRoundedSizes}  rounded\n * @prop {boolean}  filled\n * @prop {number}  rows\n * @prop {boolean} autocorrect\n *\n *\n * @csspart textarea\n *\n * @cssproperty --kemet-textarea-padding - The padding on the textarea.\n * @cssproperty --kemet-textarea-border - The border of the textarea.\n * @cssproperty --kemet-textarea-border-color-error - The border of the error state.\n * @cssproperty --kemet-textarea-border-color-success - The border of the success state.\n * @cssproperty --kemet-textarea-border-color-warning - The border of the warning state.\n * @cssproperty --kemet-textarea-border-radius-rounded - The border radius on rounded.\n * @cssproperty --kemet-textarea-border-filled - The border on filled.\n * @cssproperty --kemet-textarea-color-filled - The color on filled.\n * @cssproperty --kemet-textarea-background-color-filled - The background-color on filled.\n * @cssproperty --kemet-textarea-background-color-error - The error state background color.\n * @cssproperty --kemet-textarea-background-color-success - The success state background color.\n * @cssproperty --kemet-textarea-background-color-warning - The warning state background color.\n *\n */\n\n@customElement('kemet-textarea')\nexport default class KemetTextarea extends LitElement {\n  formSubmitController: FormSubmitController;\n\n  static styles = [stylesTextarea];\n\n  @property({ type: String })\n  slug: string = 'textarea';\n\n  @property({ type: String })\n  name: string = 'textarea';\n\n  @property({ type: String })\n  placeholder: string;\n\n  @property({ type: Number })\n  minlength: number;\n\n  @property({ type: Number })\n  maxlength: number;\n\n  @property({ type: String })\n  inputmode: string;\n\n  @property({ type: Boolean })\n  autofocus: boolean;\n\n  @property({ type: Boolean, reflect: true })\n  disabled: boolean;\n\n  @property({ type: Boolean })\n  readonly: boolean;\n\n  @property({ type: Boolean, reflect: true })\n  required: boolean;\n\n  @property({ type: String })\n  value: string = '';\n\n  @property({ type: Boolean, reflect: true })\n  invalid: boolean;\n\n  @property({ type: String, reflect: true })\n  status: TypeStatus = EnumStatuses.Standard;\n\n  @property({ type: Number })\n  rows: number = 4;\n\n  @property({ type: Boolean, attribute: 'validate-on-blur' })\n  validateOnBlur: boolean;\n\n  @property({ type: Boolean, reflect: true })\n  filled: boolean;\n\n  @property({ reflect: true })\n  rounded: TypeRoundedSizes;\n\n  @property({ type: Boolean })\n  autocorrect: boolean;\n\n  @state()\n  form: HTMLFormElement;\n\n  @state()\n  control: KemetField;\n\n  @state()\n  textarea: HTMLTextAreaElement;\n\n  @state()\n  hasFocus: boolean;\n\n  @state()\n  validity: ValidityState;\n\n  constructor() {\n    super();\n\n    /** @internal */\n    this.formSubmitController = new FormSubmitController(this);\n  }\n\n  firstUpdated() {\n    // elements\n    this.form = this.closest('form');\n    this.control = this.closest('kemet-field');\n    this.textarea = this.shadowRoot.querySelector('textarea');\n  }\n\n  render() {\n    return html`\n      <textarea\n        part=\"textarea\"\n        id=${this.slug}\n        name=${this.name}\n        .value=${live(this.value)}\n        ?disabled=${this.disabled}\n        ?readonly=${this.readonly}\n        ?required=${this.required}\n        placeholder=${ifDefined(this.placeholder)}\n        rows=${ifDefined(this.rows)}\n        minlength=${ifDefined(this.minlength)}\n        maxlength=${ifDefined(this.maxlength)}\n        autocorrect=${ifDefined(this.autocorrect)}\n        ?autofocus=${this.autofocus}\n        spellcheck=${ifDefined(this.spellcheck)}\n        inputmode=${ifDefined(this.inputmode)}\n        @change=${this.handleChange}\n        @input=${this.handleInput}\n        @focus=${this.handleFocus}\n        @blur=${this.handleBlur}\n        @invalid=${this.handleInvalid}\n      ></textarea>\n    `;\n  }\n\n  /**\n   * Handles when the textarea receives focus\n   * @private\n   */\n  handleFocus() {\n    this.hasFocus = true;\n\n    /**\n     * Fires when the input receives and loses focus\n     */\n    this.dispatchEvent(\n      new CustomEvent('kemet-input-focused', {\n        bubbles: true,\n        composed: true,\n        detail: true,\n      }),\n    );\n  }\n\n  /**\n   * Handles when the textarea loses focus\n   * @private\n   */\n  handleBlur() {\n    this.hasFocus = false;\n\n    /**\n     * Fires when the input receives and loses focus\n     */\n    this.dispatchEvent(\n      new CustomEvent('kemet-input-focused', {\n        bubbles: true,\n        composed: true,\n        detail: false,\n      }),\n    );\n\n    if (this.validateOnBlur && this.form) {\n      this.textarea.checkValidity();\n      this.validity = this.textarea.validity;\n    }\n  }\n\n  /**\n   * Handles when the textarea changes value\n   * @private\n   */\n  handleChange() {\n    this.value = this.textarea.value;\n\n    if (this.textarea.checkValidity() && this.checkLimitValidity()) {\n      this.invalid = false;\n      this.status = EnumStatuses.Standard;\n      this.validity = this.textarea.validity;\n\n      /**\n       * Fires when there's a change in status\n       */\n      this.dispatchEvent(\n        new CustomEvent('kemet-input-status', {\n          bubbles: true,\n          composed: true,\n          detail: {\n            status: 'standard',\n            validity: this.textarea.validity,\n            element: this,\n          },\n        }),\n      );\n    }\n  }\n\n  /**\n   * Handles when the textarea receives input\n   * @private\n   */\n  handleInput() {\n    this.value = this.textarea.value;\n\n    /**\n     * Fires when the input receives input\n     */\n    this.dispatchEvent(\n      new CustomEvent('kemet-input-input', {\n        bubbles: true,\n        composed: true,\n        detail: this.value,\n      }),\n    );\n  }\n\n  /**\n   * Handles when the textarea has an error\n   * @private\n   */\n  handleInvalid() {\n    this.validity = this.textarea.validity;\n\n    if (this.validateOnBlur) {\n      this.invalid = true;\n      this.status = EnumStatuses.Error;\n\n      /**\n       * Fires when there's a change in status\n       */\n      this.dispatchEvent(\n        new CustomEvent('kemet-input-status', {\n          bubbles: true,\n          composed: true,\n          detail: {\n            status: 'error',\n            validity: this.textarea.validity,\n            element: this,\n          },\n        }),\n      );\n    }\n  }\n\n  /**\n   * Checks the validity of the character limit for the count component\n   * @private\n   * @returns {boolean}\n   */\n  checkLimitValidity(): boolean {\n    if (this.control) {\n      const count = this.control.querySelector('kemet-count');\n      if (count) {\n        return this.value.length < count.limit;\n      }\n    }\n\n    return true;\n  }\n\n  /**\n   * Checks the validity of the standard input\n   * @public\n   * @returns {boolean}\n   */\n  checkValidity(): boolean {\n    return this.textarea.checkValidity();\n  }\n\n  /**\n   * Focuses the standard input\n   * @public\n   */\n  focus() {\n    return this.textarea.focus();\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-textarea': KemetTextarea\n  }\n}\n","import { css } from 'lit';\n\nexport const stylesTextarea = css`\n  :host {\n    --kemet-textarea-padding: 1rem;\n    --kemet-textarea-border: 1px solid rgb(var(--kemet-color-foreground));\n    --kemet-textarea-border-color-error: 1px solid rgb(var(--kemet-color-error));\n    --kemet-textarea-border-color-success: 1px solid rgb(var(--kemet-color-success));\n    --kemet-textarea-border-color-warning: 1px solid rgb(var(--kemet-color-warning));\n    --kemet-textarea-icon-left-padding: 3rem;\n    --kemet-textarea-icon-right-padding: 3rem;\n    --kemet-textarea-border-filled: none;\n    --kemet-textarea-color-filled: rgb(var(--kemet-color-white));\n    --kemet-textarea-background-color-filled: rgb(var(--kemet-color-primary));\n    --kemet-textarea-background-color-error: rgb(var(--kemet-color-error));\n    --kemet-textarea-background-color-success: rgb(var(--kemet-color-success));\n    --kemet-textarea-background-color-warning: rgb(var(--kemet-color-warning));\n    --kemet-textarea-border-radius-rounded: 0;\n\n    position: relative;\n    display: block;\n  }\n\n  textarea {\n    color: rgb(var(--kemet-color-text));\n    display: block;\n    width: 100%;\n    padding: var(--kemet-textarea-padding);\n    border: var(--kemet-textarea-border);\n    appearance: none;\n    box-sizing: border-box;\n    background: transparent;\n    border-radius: var(--kemet-textarea-border-radius-rounded);\n  }\n\n  :host([status='error']) textarea {\n    border: var(--kemet-textarea-border-color-error);\n  }\n\n  :host([status='success']) textarea {\n    border: var(--kemet-textarea-border-color-success);\n  }\n\n  :host([status='warning']) textarea {\n    border: var(--kemet-textarea-border-color-warning);\n  }\n\n  :host([disabled]) textarea {\n    opacity: 0.5;\n  }\n\n  :host([icon-left]) textarea {\n    padding-left: var(--kemet-textarea-icon-left-padding);\n  }\n\n  :host([icon-right]) textarea {\n    padding-right: var(--kemet-textarea-icon-right-padding);\n  }\n\n  :host([rounded]) textarea {\n    --kemet-textarea-border-radius-rounded: var(--kemet-border-radius-md);\n  }\n\n  :host([rounded=sm]) textarea {\n    --kemet-textarea-border-radius-rounded: var(--kemet-border-radius-sm);\n  }\n\n  :host([rounded=md]) textarea {\n    --kemet-textarea-border-radius-rounded: var(--kemet-border-radius-md);\n  }\n\n  :host([rounded=lg]) textarea {\n    --kemet-textarea-border-radius-rounded: var(--kemet-border-radius-lg);\n  }\n\n  :host([rounded=xl]) textarea {\n    --kemet-textarea-border-radius-rounded: var(--kemet-border-radius-xl);\n  }\n\n  :host([rounded=circle]) textarea {\n    --kemet-textarea-border-radius-rounded: var(--kemet-border-radius-circle);\n  }\n\n  :host([rounded=pill]) textarea {\n    --kemet-textarea-border-radius-rounded: var(--kemet-border-radius-pill);\n  }\n\n  :host([filled]) textarea {\n    border: var(--kemet-textarea-border-filled);\n    color: var(--kemet-textarea-color-filled);\n    background-color: var(--kemet-textarea-background-color-filled);\n  }\n\n  :host([filled]) textarea::placeholder {\n    color: var(--kemet-textarea-color-filled);\n  }\n\n  :host([status='error'][filled]) textarea {\n    background-color: var(--kemet-textarea-background-color-error);\n  }\n\n  :host([status='success'][filled]) textarea {\n    background-color: var(--kemet-textarea-background-color-success);\n  }\n\n  :host([status='warning'][filled]) textarea {\n    background-color: var(--kemet-textarea-background-color-warning);\n  }\n`;\n"],"mappings":"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","names":[]}

package/dist/elements/timer-display.d.mts

@@ -0,0 +1,30 @@
+import * as lit_html from 'lit-html';
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+import { TypeFormats } from './timer.mjs';
+
+/**
+ * @since 3.1.0
+ * @status stable
+ *
+ * @tagname kemet-timer-display
+ * @summary Displays remaining time
+ *
+ * @prop {TypeFormats} format - The format to display the remaining time in
+ */
+declare class KemetTimerDisplay extends LitElement {
+    static styles: lit.CSSResult[];
+    format: TypeFormats;
+    displayTime: string;
+    constructor();
+    render(): lit_html.TemplateResult<1>;
+    getTime(): void;
+    getTimeInSeconds(time: any): any;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kemet-timer-display': KemetTimerDisplay;
+    }
+}
+
+export { KemetTimerDisplay as default };

package/dist/elements/timer-display.d.ts

@@ -0,0 +1,30 @@
+import * as lit_html from 'lit-html';
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+import { TypeFormats } from './timer.js';
+
+/**
+ * @since 3.1.0
+ * @status stable
+ *
+ * @tagname kemet-timer-display
+ * @summary Displays remaining time
+ *
+ * @prop {TypeFormats} format - The format to display the remaining time in
+ */
+declare class KemetTimerDisplay extends LitElement {
+    static styles: lit.CSSResult[];
+    format: TypeFormats;
+    displayTime: string;
+    constructor();
+    render(): lit_html.TemplateResult<1>;
+    getTime(): void;
+    getTimeInSeconds(time: any): any;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kemet-timer-display': KemetTimerDisplay;
+    }
+}
+
+export { KemetTimerDisplay as default };

package/dist/elements/timer-display.js

@@ -0,0 +1,103 @@
+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/timer-display.ts
+var timer_display_exports = {};
+__export(timer_display_exports, {
+  default: () => KemetTimerDisplay
+});
+module.exports = __toCommonJS(timer_display_exports);
+var import_lit2 = require("lit");
+var import_decorators = require("lit/decorators.js");
+
+// src/styles/elements/timer.ts
+var import_lit = require("lit");
+var stylesBase = import_lit.css`
+  :host {
+    display: block;
+  }
+`;
+var stylesDisplay = import_lit.css`
+  :host {
+    display: inline-block;
+  }
+`;
+
+// src/elements/timer-display.ts
+var KemetTimerDisplay = class extends import_lit2.LitElement {
+  constructor() {
+    super();
+    this.format = "seconds";
+    this.getTime();
+  }
+  render() {
+    return import_lit2.html`${this.displayTime}`;
+  }
+  getTime() {
+    this.closest("kemet-timer").addEventListener("kemet-increment", (event) => {
+      const secondsLeft = event.detail;
+      switch (this.format) {
+        case "seconds":
+          this.displayTime = (secondsLeft % 60 < 10 ? `0${secondsLeft % 60}` : secondsLeft % 60).toString();
+          break;
+        case "minutes":
+          this.displayTime = Math.floor(secondsLeft % 86400 % 3600 / 60).toString();
+          break;
+        case "hours":
+          this.displayTime = Math.floor(secondsLeft % 86400 / 3600).toString();
+          break;
+        case "days":
+          this.displayTime = Math.floor(secondsLeft / 86400).toString();
+          break;
+        default:
+          this.displayTime = (secondsLeft % 60 < 10 ? `0${secondsLeft % 60}` : secondsLeft % 60).toString();
+      }
+    });
+  }
+  getTimeInSeconds(time) {
+    switch (this.format) {
+      case "minutes":
+        return time * 60;
+      case "hours":
+        return time * 60 * 60;
+      case "days":
+        return time * 60 * 60 * 24;
+      default:
+        return time;
+    }
+  }
+};
+KemetTimerDisplay.styles = [stylesDisplay];
+__decorateClass([
+  (0, import_decorators.property)({ type: String })
+], KemetTimerDisplay.prototype, "format", 2);
+__decorateClass([
+  (0, import_decorators.state)()
+], KemetTimerDisplay.prototype, "displayTime", 2);
+KemetTimerDisplay = __decorateClass([
+  (0, import_decorators.customElement)("kemet-timer-display")
+], KemetTimerDisplay);
+//# sourceMappingURL=timer-display.js.map

package/dist/elements/timer-display.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/elements/timer-display.ts","../../src/styles/elements/timer.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { stylesDisplay } from '../styles/elements/timer';\nimport { TypeFormats } from './timer';\n\n/**\n * @since 3.1.0\n * @status stable\n *\n * @tagname kemet-timer-display\n * @summary Displays remaining time\n *\n * @prop {TypeFormats} format - The format to display the remaining time in\n */\n\n@customElement('kemet-timer-display')\nexport default class KemetTimerDisplay extends LitElement {\n  static styles = [stylesDisplay];\n\n  @property({ type: String })\n  format: TypeFormats = 'seconds';\n\n  @state()\n  displayTime: string;\n\n  constructor() {\n    super();\n    this.getTime();\n  }\n\n  render() {\n    return html`${this.displayTime}`;\n  }\n\n  getTime() {\n    this.closest('kemet-timer').addEventListener('kemet-increment', (event: CustomEvent) => {\n      const secondsLeft = event.detail;\n      switch (this.format) {\n        case 'seconds':\n          this.displayTime = (secondsLeft % 60 < 10 ? `0${secondsLeft % 60}` : secondsLeft % 60).toString();\n          break;\n        case 'minutes':\n          this.displayTime = Math.floor((secondsLeft % 86400) % 3600 / 60).toString();\n          break;\n        case 'hours':\n          this.displayTime = Math.floor((secondsLeft % 86400) / 3600).toString();\n          break;\n        case 'days':\n          this.displayTime = Math.floor(secondsLeft / 86400).toString();\n          break;\n        default:\n          this.displayTime = (secondsLeft % 60 < 10 ? `0${secondsLeft % 60}` : secondsLeft % 60).toString();\n      }\n    });\n  }\n\n  getTimeInSeconds(time) {\n    switch (this.format) {\n      case 'minutes': return time * 60;\n      case 'hours': return time * 60 * 60;\n      case 'days': return time * 60 * 60 * 24;\n      default: return time;\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-timer-display': KemetTimerDisplay\n  }\n}\n","import { css } from 'lit';\n\nexport const stylesBase = css`\n  :host {\n    display: block;\n  }\n`;\n\nexport const stylesDisplay = css`\n  :host {\n    display: inline-block;\n  }\n`;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAAAA,cAAiC;AACjC,wBAA+C;;;ACD/C,iBAAoB;AAEb,IAAM,aAAa;AAAA;AAAA;AAAA;AAAA;AAMnB,IAAM,gBAAgB;AAAA;AAAA;AAAA;AAAA;;;ADQ7B,IAAqB,oBAArB,cAA+C,uBAAW;AAAA,EASxD,cAAc;AACZ,UAAM;AANR,kBAAsB;AAOpB,SAAK,QAAQ;AAAA,EACf;AAAA,EAEA,SAAS;AACP,WAAO,mBAAO,KAAK,WAAW;AAAA,EAChC;AAAA,EAEA,UAAU;AACR,SAAK,QAAQ,aAAa,EAAE,iBAAiB,mBAAmB,CAAC,UAAuB;AACtF,YAAM,cAAc,MAAM;AAC1B,cAAQ,KAAK,QAAQ;AAAA,QACnB,KAAK;AACH,eAAK,eAAe,cAAc,KAAK,KAAK,IAAI,cAAc,EAAE,KAAK,cAAc,IAAI,SAAS;AAChG;AAAA,QACF,KAAK;AACH,eAAK,cAAc,KAAK,MAAO,cAAc,QAAS,OAAO,EAAE,EAAE,SAAS;AAC1E;AAAA,QACF,KAAK;AACH,eAAK,cAAc,KAAK,MAAO,cAAc,QAAS,IAAI,EAAE,SAAS;AACrE;AAAA,QACF,KAAK;AACH,eAAK,cAAc,KAAK,MAAM,cAAc,KAAK,EAAE,SAAS;AAC5D;AAAA,QACF;AACE,eAAK,eAAe,cAAc,KAAK,KAAK,IAAI,cAAc,EAAE,KAAK,cAAc,IAAI,SAAS;AAAA,MACpG;AAAA,IACF,CAAC;AAAA,EACH;AAAA,EAEA,iBAAiB,MAAM;AACrB,YAAQ,KAAK,QAAQ;AAAA,MACnB,KAAK;AAAW,eAAO,OAAO;AAAA,MAC9B,KAAK;AAAS,eAAO,OAAO,KAAK;AAAA,MACjC,KAAK;AAAQ,eAAO,OAAO,KAAK,KAAK;AAAA,MACrC;AAAS,eAAO;AAAA,IAClB;AAAA,EACF;AACF;AAhDqB,kBACZ,SAAS,CAAC,aAAa;AAG9B;AAAA,MADC,4BAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAHP,kBAInB;AAGA;AAAA,MADC,yBAAM;AAAA,GANY,kBAOnB;AAPmB,oBAArB;AAAA,MADC,iCAAc,qBAAqB;AAAA,GACf;","names":["import_lit"]}

package/dist/elements/timer-display.mjs

@@ -0,0 +1,9 @@
+import {
+  KemetTimerDisplay
+} from "../chunk-5CL7F5XK.mjs";
+import "../chunk-CK7STPSD.mjs";
+import "../chunk-SAWN7RJP.mjs";
+export {
+  KemetTimerDisplay as default
+};
+//# sourceMappingURL=timer-display.mjs.map

package/dist/elements/timer-display.mjs.map

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