kemet-ui 4.0.2 → 5.0.0

package/dist/elements/textarea/index.js

@@ -0,0 +1,497 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+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/textarea/index.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/utilities/form-controller.ts
+var FormSubmitController = class {
+  constructor(host, options = {}) {
+    (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/elements/textarea/styles.css.ts
+import { css } from "lit";
+var styles_css_default = css`:host {
+  /* public */
+  --kemet-textarea-padding: 1rem;
+  --kemet-textarea-color: var(--kemet-color-font-base);
+  --kemet-textarea-font-color: var(--kemet-color-font-base);
+  --kemet-textarea-border: 1px solid var(--kemet-textarea-color);
+  --kemet-textarea-border-radius: 0;
+
+  /* private */
+  --_kemet-textarea-background-color: transparent;
+
+  position: relative;
+  display: block;
+}
+
+textarea {
+  color: var(--kemet-textarea-font-color);
+  display: block;
+  width: 100%;
+  padding: var(--kemet-textarea-padding);
+  border: var(--kemet-textarea-border);
+  appearance: none;
+  box-sizing: border-box;
+  background: var(--_kemet-textarea-background-color);
+  border-radius: var(--kemet-textarea-border-radius);
+}
+
+:host([polarity=dark]) {
+  --kemet-textarea-color: var(--kemet-color-font-inverse-base);
+  --kemet-textarea-font-color: var(--kemet-color-font-inverse-base);
+}
+
+:host([disabled]) {
+  --kemet-textarea-font-color: var(--kemet-color-font-disabled);
+  --kemet-textarea-color: var(--kemet-color-background-disabled);
+}
+
+:host([rounded]) {
+  --kemet-textarea-border-radius: var(--kemet-border-radius-md);
+}
+
+:host([rounded=sm]) {
+  --kemet-textarea-border-radius: var(--kemet-border-radius-sm);
+}
+
+:host([rounded=md]) {
+  --kemet-textarea-border-radius: var(--kemet-border-radius-md);
+}
+
+:host([rounded=lg]) {
+  --kemet-textarea-border-radius: var(--kemet-border-radius-lg);
+}
+
+:host([rounded=xl]) {
+  --kemet-textarea-border-radius: var(--kemet-border-radius-xl);
+}
+
+:host([rounded=circle]) {
+  --kemet-textarea-border-radius: var(--kemet-border-radius-circle);
+}
+
+:host([rounded=pill]) {
+  --kemet-textarea-border-radius: var(--kemet-border-radius-pill);
+}
+
+:host([filled]) {
+  --kemet-textarea-font-color: var(--kemet-color-font-inverse-base);
+  --_kemet-textarea-background-color: var(--kemet-color-background-inverse);
+  --kemet-textarea-border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+
+:host([appearance=brand][filled]) {
+  --_kemet-textarea-background-color: var(--kemet-color-brand-primary-base);
+}
+
+:host([appearance=error][filled]) {
+  --_kemet-textarea-background-color: var(--kemet-color-font-error);
+}
+
+:host([appearance=success][fiiled]) {
+  --_kemet-textarea-background-color: var(--kemet-color-font-success);
+}
+
+:host([appearance=warning][filled]) {
+  --_kemet-textarea-background-color: var(--kemet-color-font-warning);
+}
+
+:host([appearance=link][filled]) {
+  --_kemet-textarea-background-color: var(--kemet-color-font-link);
+}
+
+
+:host([appearance=brand]) {
+  --kemet-textarea-color: var(--kemet-color-brand-primary-base);
+}
+
+:host([appearance=error]) {
+  --kemet-textarea-color: var(--kemet-color-background-error);
+}
+
+:host([appearance=success]) {
+  --kemet-textarea-color: var(--kemet-color-background-success);
+}
+
+:host([appearance=warning]) {
+  --kemet-textarea-color: var(--kemet-color-background-warning);
+}
+
+:host([appearance=info]) {
+  --kemet-textarea-color: var(--kemet-color-background-info);
+}
+
+:host([appearance=link]) {
+  --kemet-textarea-color: var(--kemet-color-background-link);
+}
+`;
+
+// src/elements/textarea/index.ts
+var HTMLKemetTextareaElement = class extends LitElement {
+  constructor() {
+    super();
+    this.slug = "textarea";
+    this.name = "textarea";
+    this.autofocus = false;
+    this.value = "";
+    this.rows = 4;
+    this.autocorrect = false;
+    this.dom = "initializing";
+    this.formSubmitController = new FormSubmitController(this);
+  }
+  firstUpdated() {
+    this.form = this.closest("form");
+    this.control = this.closest("kemet-field");
+    this.textarea = this.shadowRoot?.querySelector("textarea");
+    emitEvent(this, "kemet-textarea-mounted", {
+      bubbles: true,
+      composed: true,
+      detail: {
+        element: this
+      }
+    });
+    this.dom = "mounted";
+  }
+  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-textarea-focused", {
+        bubbles: true,
+        composed: true,
+        detail: { focused: true, element: this }
+      })
+    );
+  }
+  /**
+   * Handles when the textarea loses focus
+   * @private
+   */
+  handleBlur() {
+    this.hasFocus = false;
+    this.dispatchEvent(
+      new CustomEvent("kemet-textarea-focused", {
+        bubbles: true,
+        composed: true,
+        detail: { focused: false, element: this }
+      })
+    );
+    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.validity = this.textarea.validity;
+      this.dispatchEvent(
+        new CustomEvent("kemet-textarea-appearance-change", {
+          bubbles: true,
+          composed: true,
+          detail: {
+            appearance: "neutral" /* Neutral */,
+            validity: this.textarea.validity,
+            element: this
+          }
+        })
+      );
+    }
+  }
+  /**
+   * Handles when the textarea receives input
+   * @private
+   */
+  handleInput() {
+    this.value = this.textarea.value;
+    this.dispatchEvent(
+      new CustomEvent("kemet-textarea-input", {
+        bubbles: true,
+        composed: true,
+        detail: { value: this.value, element: this }
+      })
+    );
+  }
+  /**
+   * Handles when the textarea has an error
+   * @private
+   */
+  handleInvalid() {
+    this.validity = this.textarea.validity;
+    if (this.validateOnBlur) {
+      this.invalid = true;
+      this.appearance = "error" /* Error */;
+      this.dispatchEvent(
+        new CustomEvent("kemet-textarea-appearance-change", {
+          bubbles: true,
+          composed: true,
+          detail: {
+            appearance: "error" /* 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();
+  }
+};
+HTMLKemetTextareaElement.styles = [styles_css_default];
+__decorateClass([
+  property({ type: String })
+], HTMLKemetTextareaElement.prototype, "slug", 2);
+__decorateClass([
+  property({ type: String })
+], HTMLKemetTextareaElement.prototype, "name", 2);
+__decorateClass([
+  property({ type: String })
+], HTMLKemetTextareaElement.prototype, "placeholder", 2);
+__decorateClass([
+  property({ type: Number })
+], HTMLKemetTextareaElement.prototype, "minlength", 2);
+__decorateClass([
+  property({ type: Number })
+], HTMLKemetTextareaElement.prototype, "maxlength", 2);
+__decorateClass([
+  property({ type: String })
+], HTMLKemetTextareaElement.prototype, "inputmode", 2);
+__decorateClass([
+  property({ type: Boolean })
+], HTMLKemetTextareaElement.prototype, "autofocus", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], HTMLKemetTextareaElement.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: Boolean })
+], HTMLKemetTextareaElement.prototype, "readonly", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], HTMLKemetTextareaElement.prototype, "required", 2);
+__decorateClass([
+  property({ type: String })
+], HTMLKemetTextareaElement.prototype, "value", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], HTMLKemetTextareaElement.prototype, "invalid", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], HTMLKemetTextareaElement.prototype, "appearance", 2);
+__decorateClass([
+  property({ type: Number })
+], HTMLKemetTextareaElement.prototype, "rows", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "validate-on-blur" })
+], HTMLKemetTextareaElement.prototype, "validateOnBlur", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], HTMLKemetTextareaElement.prototype, "filled", 2);
+__decorateClass([
+  property({ reflect: true })
+], HTMLKemetTextareaElement.prototype, "rounded", 2);
+__decorateClass([
+  property({ type: Boolean })
+], HTMLKemetTextareaElement.prototype, "autocorrect", 2);
+__decorateClass([
+  state()
+], HTMLKemetTextareaElement.prototype, "form", 2);
+__decorateClass([
+  state()
+], HTMLKemetTextareaElement.prototype, "control", 2);
+__decorateClass([
+  state()
+], HTMLKemetTextareaElement.prototype, "textarea", 2);
+__decorateClass([
+  state()
+], HTMLKemetTextareaElement.prototype, "hasFocus", 2);
+__decorateClass([
+  state()
+], HTMLKemetTextareaElement.prototype, "validity", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], HTMLKemetTextareaElement.prototype, "polarity", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], HTMLKemetTextareaElement.prototype, "dom", 2);
+HTMLKemetTextareaElement = __decorateClass([
+  customElement("kemet-textarea")
+], HTMLKemetTextareaElement);
+export {
+  HTMLKemetTextareaElement as default
+};
+//# sourceMappingURL=index.js.map

package/dist/elements/textarea/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/elements/textarea/index.ts","../../../src/utilities/form-controller.ts","../../../src/utilities/events.ts","../../../src/elements/textarea/styles.css.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } 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 HTMLKemetFieldElement from '../field';\nimport { EnumAppearances, EnumRoundedSizes } from '../../utilities/constants';\nimport { emitEvent } from '../../utilities/events';\nimport styles from './styles.css.ts';\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 {EnumAppearances}  appearance\n * @prop {boolean}  validateOnBlur\n * @prop {EnumRoundedSizes}  rounded\n * @prop {boolean}  filled\n * @prop {number}  rows\n * @prop {boolean} autocorrect\n * @prop {'light' | 'dark'} polarity - Determines if the component has a dark or light background\n * @prop {string} dom - The status of dom initalization.\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 * @fires kemet-textarea-focused - Fired when the textarea is focused or blurred\n * @detail {boolean} focused - Whether the textarea is focused\n *\n * @fires kemet-textarea-input - Fired when the textarea receives input\n * @detail {string} value - The value of the textarea\n *\n * @fires kemet-textarea-appearance-change - Fired when the textarea appearance changes\n * @detail {EnumAppearances} appearance - The appearance of the textarea\n *\n * @fires kemet-textarea-mounted - Fired when the textarea is mounted to the DOM\n * @detail {HTMLElement} element - The textarea element\n *\n */\n\n@customElement('kemet-textarea')\nexport default class HTMLKemetTextareaElement extends LitElement {\n  formSubmitController: FormSubmitController;\n\n  static styles = [styles];\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 = false;\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  appearance?: EnumAppearances;\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?: EnumRoundedSizes;\n\n  @property({ type: Boolean })\n  autocorrect: boolean = false;\n\n  @state()\n  form!: HTMLFormElement;\n\n  @state()\n  control!: HTMLKemetFieldElement;\n\n  @state()\n  textarea!: HTMLTextAreaElement;\n\n  @state()\n  hasFocus!: boolean;\n\n  @state()\n  validity!: ValidityState;\n\n  @property({ type: String, reflect: true })\n  polarity?: 'light' | 'dark';\n\n  @property({ type: String, reflect: true })\n  dom: string = 'initializing';\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') as HTMLFormElement;\n    this.control = this.closest('kemet-field') as HTMLKemetFieldElement;\n    this.textarea = this.shadowRoot?.querySelector('textarea') as HTMLTextAreaElement;\n\n    emitEvent(this, 'kemet-textarea-mounted', {\n      bubbles: true,\n      composed: true,\n      detail: {\n        element: this,\n      },\n    });\n    this.dom = 'mounted';\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-textarea-focused', {\n        bubbles: true,\n        composed: true,\n        detail: { focused: true, element: this },\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-textarea-focused', {\n        bubbles: true,\n        composed: true,\n        detail: { focused: false, element: this },\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.validity = this.textarea.validity;\n\n      /**\n       * Fires when there's a change in status\n       */\n      this.dispatchEvent(\n        new CustomEvent('kemet-textarea-appearance-change', {\n          bubbles: true,\n          composed: true,\n          detail: {\n            appearance: EnumAppearances.Neutral,\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-textarea-input', {\n        bubbles: true,\n        composed: true,\n        detail: { value: this.value, element: this },\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.appearance = EnumAppearances.Error;\n\n      /**\n       * Fires when there's a change in status\n       */\n      this.dispatchEvent(\n        new CustomEvent('kemet-textarea-appearance-change', {\n          bubbles: true,\n          composed: true,\n          detail: {\n            appearance: EnumAppearances.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': HTMLKemetTextareaElement\n  }\n}\n","export class FormSubmitController {\n  host: any;\n  form: HTMLFormElement | null | undefined;\n  options: {\n    form: (input: any) => HTMLFormElement | null | undefined;\n    name: (input: any) => string;\n    value: (input: any) => any;\n    disabled: (input: any) => boolean;\n  };\n\n  constructor(host: any, options: Partial<{\n    form: (input: any) => HTMLFormElement | null | undefined;\n    name: (input: any) => string;\n    value: (input: any) => any;\n    disabled: (input: any) => boolean;\n  }> = {}) {\n    (this.host = host).addController(this);\n\n    this.options = {\n      form: (input: any) => input.closest('form'),\n      name: (input: any) => input.name,\n      value: (input: any) => input.value,\n      disabled: (input: any) => 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: FormDataEvent) {\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: SubmitEvent) {\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: any) => {\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","export const emitEvent = (element, name, detail, bubbles = true, composed = true) => {\n  element.dispatchEvent(\n    new CustomEvent(name, { bubbles, composed, detail }),\n  );\n};\n","import { css } from 'lit';\n\nexport default css`:host {\n  /* public */\n  --kemet-textarea-padding: 1rem;\n  --kemet-textarea-color: var(--kemet-color-font-base);\n  --kemet-textarea-font-color: var(--kemet-color-font-base);\n  --kemet-textarea-border: 1px solid var(--kemet-textarea-color);\n  --kemet-textarea-border-radius: 0;\n\n  /* private */\n  --_kemet-textarea-background-color: transparent;\n\n  position: relative;\n  display: block;\n}\n\ntextarea {\n  color: var(--kemet-textarea-font-color);\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: var(--_kemet-textarea-background-color);\n  border-radius: var(--kemet-textarea-border-radius);\n}\n\n:host([polarity=dark]) {\n  --kemet-textarea-color: var(--kemet-color-font-inverse-base);\n  --kemet-textarea-font-color: var(--kemet-color-font-inverse-base);\n}\n\n:host([disabled]) {\n  --kemet-textarea-font-color: var(--kemet-color-font-disabled);\n  --kemet-textarea-color: var(--kemet-color-background-disabled);\n}\n\n:host([rounded]) {\n  --kemet-textarea-border-radius: var(--kemet-border-radius-md);\n}\n\n:host([rounded=sm]) {\n  --kemet-textarea-border-radius: var(--kemet-border-radius-sm);\n}\n\n:host([rounded=md]) {\n  --kemet-textarea-border-radius: var(--kemet-border-radius-md);\n}\n\n:host([rounded=lg]) {\n  --kemet-textarea-border-radius: var(--kemet-border-radius-lg);\n}\n\n:host([rounded=xl]) {\n  --kemet-textarea-border-radius: var(--kemet-border-radius-xl);\n}\n\n:host([rounded=circle]) {\n  --kemet-textarea-border-radius: var(--kemet-border-radius-circle);\n}\n\n:host([rounded=pill]) {\n  --kemet-textarea-border-radius: var(--kemet-border-radius-pill);\n}\n\n:host([filled]) {\n  --kemet-textarea-font-color: var(--kemet-color-font-inverse-base);\n  --_kemet-textarea-background-color: var(--kemet-color-background-inverse);\n  --kemet-textarea-border: 1px solid rgba(255, 255, 255, 0.1);\n}\n\n\n:host([appearance=brand][filled]) {\n  --_kemet-textarea-background-color: var(--kemet-color-brand-primary-base);\n}\n\n:host([appearance=error][filled]) {\n  --_kemet-textarea-background-color: var(--kemet-color-font-error);\n}\n\n:host([appearance=success][fiiled]) {\n  --_kemet-textarea-background-color: var(--kemet-color-font-success);\n}\n\n:host([appearance=warning][filled]) {\n  --_kemet-textarea-background-color: var(--kemet-color-font-warning);\n}\n\n:host([appearance=link][filled]) {\n  --_kemet-textarea-background-color: var(--kemet-color-font-link);\n}\n\n\n:host([appearance=brand]) {\n  --kemet-textarea-color: var(--kemet-color-brand-primary-base);\n}\n\n:host([appearance=error]) {\n  --kemet-textarea-color: var(--kemet-color-background-error);\n}\n\n:host([appearance=success]) {\n  --kemet-textarea-color: var(--kemet-color-background-success);\n}\n\n:host([appearance=warning]) {\n  --kemet-textarea-color: var(--kemet-color-background-warning);\n}\n\n:host([appearance=info]) {\n  --kemet-textarea-color: var(--kemet-color-background-info);\n}\n\n:host([appearance=link]) {\n  --kemet-textarea-color: var(--kemet-color-background-link);\n}\n`;\n"],"mappings":"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","names":[]}

package/dist/elements/textarea/styles.css.d.ts

@@ -0,0 +1,5 @@
+import * as lit from 'lit';
+
+declare const _default: lit.CSSResult;
+
+export { _default as default };

package/dist/elements/textarea/styles.css.js

@@ -0,0 +1,123 @@
+// src/elements/textarea/styles.css.ts
+import { css } from "lit";
+var styles_css_default = css`:host {
+  /* public */
+  --kemet-textarea-padding: 1rem;
+  --kemet-textarea-color: var(--kemet-color-font-base);
+  --kemet-textarea-font-color: var(--kemet-color-font-base);
+  --kemet-textarea-border: 1px solid var(--kemet-textarea-color);
+  --kemet-textarea-border-radius: 0;
+
+  /* private */
+  --_kemet-textarea-background-color: transparent;
+
+  position: relative;
+  display: block;
+}
+
+textarea {
+  color: var(--kemet-textarea-font-color);
+  display: block;
+  width: 100%;
+  padding: var(--kemet-textarea-padding);
+  border: var(--kemet-textarea-border);
+  appearance: none;
+  box-sizing: border-box;
+  background: var(--_kemet-textarea-background-color);
+  border-radius: var(--kemet-textarea-border-radius);
+}
+
+:host([polarity=dark]) {
+  --kemet-textarea-color: var(--kemet-color-font-inverse-base);
+  --kemet-textarea-font-color: var(--kemet-color-font-inverse-base);
+}
+
+:host([disabled]) {
+  --kemet-textarea-font-color: var(--kemet-color-font-disabled);
+  --kemet-textarea-color: var(--kemet-color-background-disabled);
+}
+
+:host([rounded]) {
+  --kemet-textarea-border-radius: var(--kemet-border-radius-md);
+}
+
+:host([rounded=sm]) {
+  --kemet-textarea-border-radius: var(--kemet-border-radius-sm);
+}
+
+:host([rounded=md]) {
+  --kemet-textarea-border-radius: var(--kemet-border-radius-md);
+}
+
+:host([rounded=lg]) {
+  --kemet-textarea-border-radius: var(--kemet-border-radius-lg);
+}
+
+:host([rounded=xl]) {
+  --kemet-textarea-border-radius: var(--kemet-border-radius-xl);
+}
+
+:host([rounded=circle]) {
+  --kemet-textarea-border-radius: var(--kemet-border-radius-circle);
+}
+
+:host([rounded=pill]) {
+  --kemet-textarea-border-radius: var(--kemet-border-radius-pill);
+}
+
+:host([filled]) {
+  --kemet-textarea-font-color: var(--kemet-color-font-inverse-base);
+  --_kemet-textarea-background-color: var(--kemet-color-background-inverse);
+  --kemet-textarea-border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+
+:host([appearance=brand][filled]) {
+  --_kemet-textarea-background-color: var(--kemet-color-brand-primary-base);
+}
+
+:host([appearance=error][filled]) {
+  --_kemet-textarea-background-color: var(--kemet-color-font-error);
+}
+
+:host([appearance=success][fiiled]) {
+  --_kemet-textarea-background-color: var(--kemet-color-font-success);
+}
+
+:host([appearance=warning][filled]) {
+  --_kemet-textarea-background-color: var(--kemet-color-font-warning);
+}
+
+:host([appearance=link][filled]) {
+  --_kemet-textarea-background-color: var(--kemet-color-font-link);
+}
+
+
+:host([appearance=brand]) {
+  --kemet-textarea-color: var(--kemet-color-brand-primary-base);
+}
+
+:host([appearance=error]) {
+  --kemet-textarea-color: var(--kemet-color-background-error);
+}
+
+:host([appearance=success]) {
+  --kemet-textarea-color: var(--kemet-color-background-success);
+}
+
+:host([appearance=warning]) {
+  --kemet-textarea-color: var(--kemet-color-background-warning);
+}
+
+:host([appearance=info]) {
+  --kemet-textarea-color: var(--kemet-color-background-info);
+}
+
+:host([appearance=link]) {
+  --kemet-textarea-color: var(--kemet-color-background-link);
+}
+`;
+export {
+  styles_css_default as default
+};
+//# sourceMappingURL=styles.css.js.map

package/dist/elements/textarea/styles.css.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/elements/textarea/styles.css.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport default css`:host {\n  /* public */\n  --kemet-textarea-padding: 1rem;\n  --kemet-textarea-color: var(--kemet-color-font-base);\n  --kemet-textarea-font-color: var(--kemet-color-font-base);\n  --kemet-textarea-border: 1px solid var(--kemet-textarea-color);\n  --kemet-textarea-border-radius: 0;\n\n  /* private */\n  --_kemet-textarea-background-color: transparent;\n\n  position: relative;\n  display: block;\n}\n\ntextarea {\n  color: var(--kemet-textarea-font-color);\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: var(--_kemet-textarea-background-color);\n  border-radius: var(--kemet-textarea-border-radius);\n}\n\n:host([polarity=dark]) {\n  --kemet-textarea-color: var(--kemet-color-font-inverse-base);\n  --kemet-textarea-font-color: var(--kemet-color-font-inverse-base);\n}\n\n:host([disabled]) {\n  --kemet-textarea-font-color: var(--kemet-color-font-disabled);\n  --kemet-textarea-color: var(--kemet-color-background-disabled);\n}\n\n:host([rounded]) {\n  --kemet-textarea-border-radius: var(--kemet-border-radius-md);\n}\n\n:host([rounded=sm]) {\n  --kemet-textarea-border-radius: var(--kemet-border-radius-sm);\n}\n\n:host([rounded=md]) {\n  --kemet-textarea-border-radius: var(--kemet-border-radius-md);\n}\n\n:host([rounded=lg]) {\n  --kemet-textarea-border-radius: var(--kemet-border-radius-lg);\n}\n\n:host([rounded=xl]) {\n  --kemet-textarea-border-radius: var(--kemet-border-radius-xl);\n}\n\n:host([rounded=circle]) {\n  --kemet-textarea-border-radius: var(--kemet-border-radius-circle);\n}\n\n:host([rounded=pill]) {\n  --kemet-textarea-border-radius: var(--kemet-border-radius-pill);\n}\n\n:host([filled]) {\n  --kemet-textarea-font-color: var(--kemet-color-font-inverse-base);\n  --_kemet-textarea-background-color: var(--kemet-color-background-inverse);\n  --kemet-textarea-border: 1px solid rgba(255, 255, 255, 0.1);\n}\n\n\n:host([appearance=brand][filled]) {\n  --_kemet-textarea-background-color: var(--kemet-color-brand-primary-base);\n}\n\n:host([appearance=error][filled]) {\n  --_kemet-textarea-background-color: var(--kemet-color-font-error);\n}\n\n:host([appearance=success][fiiled]) {\n  --_kemet-textarea-background-color: var(--kemet-color-font-success);\n}\n\n:host([appearance=warning][filled]) {\n  --_kemet-textarea-background-color: var(--kemet-color-font-warning);\n}\n\n:host([appearance=link][filled]) {\n  --_kemet-textarea-background-color: var(--kemet-color-font-link);\n}\n\n\n:host([appearance=brand]) {\n  --kemet-textarea-color: var(--kemet-color-brand-primary-base);\n}\n\n:host([appearance=error]) {\n  --kemet-textarea-color: var(--kemet-color-background-error);\n}\n\n:host([appearance=success]) {\n  --kemet-textarea-color: var(--kemet-color-background-success);\n}\n\n:host([appearance=warning]) {\n  --kemet-textarea-color: var(--kemet-color-background-warning);\n}\n\n:host([appearance=info]) {\n  --kemet-textarea-color: var(--kemet-color-background-info);\n}\n\n:host([appearance=link]) {\n  --kemet-textarea-color: var(--kemet-color-background-link);\n}\n`;\n"],"mappings":";AAAA,SAAS,WAAW;AAEpB,IAAO,qBAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;","names":[]}