xv-webcomponents 0.1.39 → 0.1.41

package/dist/collection/components/xv-tabs/xv-tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"xv-tabs.js","sourceRoot":"","sources":["../../../src/components/xv-tabs/xv-tabs.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Element, Prop, Event, EventEmitter, State, Listen } from '@stencil/core';\nimport { TAB_TAGS, TABS_VATIANT } from './_vars';\nimport { SIZE_VAR } from '../../types/enum';\n\n@Component({\n  tag: 'xv-tabs-v2',\n  styleUrl: 'xv-tabs.scss',\n  shadow: true,\n})\nexport class XvTabs {\n  @Element() el: HTMLElement;\n  /**\n   * Index of active tab\n   */\n  @Prop({ reflect: true, mutable: true }) active: number | string = 0;\n  /**\n   * Emit event to outside\n   */\n  @Event() activeChange: EventEmitter<number | string>;\n  /**\n   * Show loader\n   */\n  @Prop({ reflect: true }) loading?: boolean;\n  /**\n   * Variant of tabs from TABS_VATIANT enum\n   */\n  @Prop() variant: TABS_VATIANT = TABS_VATIANT.DEFAULT;\n  /**\n   * Message when have no tabs\n   */\n  @Prop() emptyMessage?: string;\n  /**\n   * local variable for tab labels collection\n   */\n  @State() tabElements: HTMLElement[] = [];\n  /**\n   * Is show arrows for scroll\n   */\n  @State() showArrows: boolean = false;\n\n  @Listen('resize', { target: 'window' })\n  updateArrowVisibility() {\n    const container = this.el.shadowRoot?.querySelector('.tab-headers_container') as HTMLElement | null;\n    if (!container) return;\n\n    this.showArrows = container.scrollWidth > container.clientWidth;\n  }\n\n  private collectTabs = () => {\n    if (!this.tabElements.length) {\n      this.tabElements = Array.from(this.el.querySelectorAll(TAB_TAGS.TAB));\n      this.tabElements.forEach((tab) => {\n        if (tab.hasAttribute('name') && !this.active) {\n          this.active = tab.getAttribute('name');\n        }\n      })\n\n      setTimeout(() => this.updateArrowVisibility(), 100);\n    }\n  }\n\n  private updateTabClasses() {\n    this.tabElements.forEach((tab, i) => {\n      tab.classList.toggle(\n        'active',\n        (tab.getAttribute('name') || `${i}`) === `${this.active}`\n      );\n    });\n  }\n\n  private handleTabClick(active: string | number) {\n    if (active === this.active) return;\n\n    this.active = active;\n    this.activeChange.emit(Number(this.active) || this.active);\n    this.scrollToActiveTab();\n  }\n\n  private scrollToActiveTab() {\n    if (!this.showArrows) return;\n\n    // wait next JS tik\n    setTimeout(() => {\n      this.el.shadowRoot\n        .querySelector('.tab-headers_tab.active')\n        .scrollIntoView({ behavior: 'smooth', inline: 'center', block: 'nearest' });\n    });\n  }\n\n  private setTab(count: number = 1) {\n    const currentIdx = this.tabElements.findIndex(\n      (tab, i) =>\n        (tab.getAttribute('name') || `${i}`) === `${this.active}`\n      );\n    const nextIdx = currentIdx + count;\n\n    if (nextIdx < 0 || nextIdx >= this.tabElements.length) return;\n\n    const nextTab = this.tabElements[nextIdx];\n\n    if (!nextTab || nextTab.hasAttribute('disabled')) return;\n\n    this.active = nextTab.getAttribute('name') || `${nextIdx}`;\n    this.scrollToActiveTab();\n  }\n\n  render() {\n    if (this.loading) {\n      return (\n        <Host class=\"xv-tabs\" variant={this.variant}>\n          <xv-loader-v2 size={SIZE_VAR.XL} />\n        </Host>\n      )\n    }\n\n    return (\n      <Host class=\"xv-tabs\" variant={this.variant}>\n        <div class=\"tab-headers\" role=\"tablist\">\n          <button\n            hidden={!this.showArrows || !this.tabElements?.length}\n            aria-label=\"Previous\"\n            class=\"tab-headers_btn prev\"\n            onClick={() => this.setTab(-1)}\n          />\n          <div class=\"tab-headers_container\">\n            {this.tabElements?.length ? this.tabElements.map((tab, index) => (\n              <button\n                role=\"tab\"\n                disabled={!!tab.getAttribute('disabled') || !!(tab as any)?.disabled}\n                class={{\n                  'tab-headers_tab': true,\n                  active: (tab.getAttribute('name') || `${index}`) === `${this.active}`,\n                }}\n                onClick={() => this.handleTabClick(tab.getAttribute('name') || `${index}`)}\n              >\n                {tab.getAttribute('label') || `Tab ${index + 1}`}\n              </button>\n            )) : this.emptyMessage && <p class=\"xv-tabs_empty\">{this.emptyMessage}</p>}\n          </div>\n          <button\n            aria-label=\"Next\"\n            hidden={!this.showArrows || !this.tabElements?.length}\n            class=\"tab-headers_btn next\"\n            onClick={() => this.setTab(1)}\n          />\n        </div>\n\n        <div\n          class=\"tab-content-wrapper\"\n          role=\"tabpanel\"\n          tabindex={-1}\n        >\n          <slot onSlotchange={this.collectTabs} />\n        </div>\n      </Host>\n    );\n  }\n\n  componentDidRender() {\n    this.updateTabClasses();\n  }\n}\n"]}
+{"version":3,"file":"xv-tabs.js","sourceRoot":"","sources":["../../../src/components/xv-tabs/xv-tabs.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Element, Prop, Event, EventEmitter, State, Listen } from '@stencil/core';\nimport { TAB_TAGS, TABS_VATIANT } from './_vars';\nimport { SIZE_VAR } from '../../types/enum';\n\n@Component({\n  tag: 'xv-tabs-v2',\n  styleUrl: 'xv-tabs.scss',\n  shadow: true,\n})\nexport class XvTabs {\n  @Element() el: HTMLElement;\n  /**\n   * Index of active tab\n   */\n  @Prop({ reflect: true, mutable: true }) active: number | string = 0;\n  /**\n   * Emit event to outside\n   */\n  @Event() activeChange: EventEmitter<number | string>;\n  /**\n   * Show loader\n   */\n  @Prop({ reflect: true }) loading?: boolean;\n  /**\n   * Variant of tabs from TABS_VATIANT enum\n   */\n  @Prop() variant: TABS_VATIANT = TABS_VATIANT.DEFAULT;\n  /**\n   * Message when have no tabs\n   */\n  @Prop() emptyMessage?: string;\n  /**\n   * local variable for tab labels collection\n   */\n  @State() tabElements: HTMLElement[] = [];\n  /**\n   * Is show arrows for scroll\n   */\n  @State() showArrows: boolean = false;\n\n  @Listen('resize', { target: 'window' })\n  updateArrowVisibility() {\n    const container = this.el.shadowRoot?.querySelector('.tab-headers_container') as HTMLElement | null;\n    if (!container) return;\n\n    this.showArrows = container.scrollWidth > container.clientWidth;\n  }\n\n  private collectTabs = () => {\n    if (!this.tabElements.length) {\n      this.tabElements = Array.from(this.el.querySelectorAll(TAB_TAGS.TAB));\n      this.tabElements.forEach((tab) => {\n        if (tab.hasAttribute('name') && !this.active) {\n          this.active = tab.getAttribute('name');\n        }\n      })\n\n      setTimeout(() => this.updateArrowVisibility(), 100);\n    }\n  }\n\n  private updateTabClasses() {\n    this.tabElements.forEach((tab, i) => {\n      tab.classList.toggle(\n        'active',\n        (tab.getAttribute('name') || `${i}`) === `${this.active}`\n      );\n    });\n  }\n\n  private handleTabClick(active: string | number) {\n    if (active === this.active) return;\n\n    this.active = active;\n    this.activeChange.emit(Number(this.active) || this.active);\n    this.scrollToActiveTab();\n  }\n\n  private scrollToActiveTab() {\n    if (!this.showArrows) return;\n\n    // wait next JS tik\n    setTimeout(() => {\n      this.el.shadowRoot\n        .querySelector('.tab-headers_tab.active')\n        .scrollIntoView({ behavior: 'smooth', inline: 'center', block: 'nearest' });\n    });\n  }\n\n  private setTab(count: number = 1) {\n    const currentIdx = this.tabElements.findIndex(\n      (tab, i) =>\n        (tab.getAttribute('name') || `${i}`) === `${this.active}`\n      );\n    const nextIdx = currentIdx + count;\n\n    if (nextIdx < 0 || nextIdx >= this.tabElements.length) return;\n\n    const nextTab = this.tabElements[nextIdx];\n\n    if (!nextTab || nextTab.hasAttribute('disabled')) return;\n\n    this.handleTabClick(nextTab.getAttribute('name') || nextIdx);\n  }\n\n  render() {\n    if (this.loading) {\n      return (\n        <Host class=\"xv-tabs\" variant={this.variant}>\n          <xv-loader-v2 size={SIZE_VAR.XL} />\n        </Host>\n      )\n    }\n\n    return (\n      <Host class=\"xv-tabs\" variant={this.variant}>\n        <div class=\"tab-headers\" role=\"tablist\">\n          <button\n            hidden={!this.showArrows || !this.tabElements?.length}\n            aria-label=\"Previous\"\n            class=\"tab-headers_btn prev\"\n            onClick={() => this.setTab(-1)}\n          />\n          <div class=\"tab-headers_container\">\n            {this.tabElements?.length ? this.tabElements.map((tab, index) => (\n              <button\n                role=\"tab\"\n                disabled={!!tab.getAttribute('disabled') || !!(tab as any)?.disabled}\n                class={{\n                  'tab-headers_tab': true,\n                  active: (tab.getAttribute('name') || `${index}`) === `${this.active}`,\n                }}\n                onClick={() => this.handleTabClick(tab.getAttribute('name') || `${index}`)}\n              >\n                {tab.getAttribute('label') || `Tab ${index + 1}`}\n              </button>\n            )) : this.emptyMessage && <p class=\"xv-tabs_empty\">{this.emptyMessage}</p>}\n          </div>\n          <button\n            aria-label=\"Next\"\n            hidden={!this.showArrows || !this.tabElements?.length}\n            class=\"tab-headers_btn next\"\n            onClick={() => this.setTab(1)}\n          />\n        </div>\n\n        <div\n          class=\"tab-content-wrapper\"\n          role=\"tabpanel\"\n          tabindex={-1}\n        >\n          <slot onSlotchange={this.collectTabs} />\n        </div>\n      </Host>\n    );\n  }\n\n  componentDidRender() {\n    this.updateTabClasses();\n  }\n}\n"]}

package/dist/collection/components/xv-tag/xv-tag.js

@@ -13,7 +13,7 @@ export class XvTag {
         this.closeClick.emit(e);
     }
     render() {
-        return (h(Host, { key: '14b055dd7dedf6b5fcba8b8b3eb2f5f508d805a9', style: { color: this.color, background: this.bg }, class: `xv-tag ${this.disabled ? 'disabled' : ''} ${this.size}` }, h("div", { key: 'f68b22e13acb0cde1e9f80260625a72439a412df', class: "xv-tag_content" }, h("slot", { key: 'c4bbfc6909234057747f0cb4b13fd6a24f14a356' })), this.closeable && (h("button", { key: 'e05cd88033f44a852c7de9615fde4a4ebcee0d79', onClick: this.closeHandler.bind(this), class: "xv-tag_close" }))));
+        return (h(Host, { key: '0f30c136dab805c0c443c6ca81d8245d4ec6f0b5', style: { color: this.color, background: this.bg }, class: `xv-tag ${this.disabled ? 'disabled' : ''} ${this.size}` }, h("div", { key: 'ac1ee723f78ed280af64ea13b8475d7f0ddd01ee', class: "xv-tag_content" }, h("slot", { key: 'b808df5553d25f32bbe875c1ff68f68b6a6d4c73' })), this.closeable && (h("button", { key: '23784cc30119255ad0e7f80a8d23322922e2c633', onClick: this.closeHandler.bind(this), class: "xv-tag_close" }))));
     }
     static get is() { return "xv-tag-v2"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/xv-text-input/xv-text-input.css

@@ -1,123 +1,144 @@
 :host {
-  --text-input-padding-x: 16px;
-  --text-input-padding-y: 11px;
-  display: inline-flex;
-  flex-direction: column;
-  row-gap: calc(var(--text-input-padding-y) / 2);
+  display: inline-block;
   text-align: left;
-  font-family: var(--ff-body, Tahoma);
 }
-:host .label {
-  margin: 0;
+:host .control_label {
+  display: block;
+  margin-bottom: var(--spacing-03);
   color: var(--text-secondary, #515151);
+  font-family: var(--ff-body, Tahoma);
   font-size: var(--fz-sm, 12px);
+  font-style: normal;
   font-weight: 700;
-  line-height: 133.333%;
+  line-height: var(--fz-md);
   letter-spacing: 0.32px;
 }
-:host .control {
-  margin: 0;
-  position: relative;
-  box-sizing: border-box;
+:host .control_input {
   display: flex;
-  column-gap: 5px;
-  align-items: center;
-  flex-direction: row;
-}
-:host .control input {
-  width: 100%;
-  background-color: var(--field-02, #FFF);
-  border: 1px solid var(--border-strong-01, #E3E3E3);
+  border: 1px solid var(--border-subtle-01);
+  outline: 2px solid transparent;
+  background-color: transparent;
   border-radius: 3px;
-  padding-block: var(--text-input-padding-y);
-  padding-inline-start: var(--text-input-padding-x);
-  padding-inline-end: var(--text-input-padding-x);
+  transition: 250ms ease-in-out border-color, 250ms ease-in-out outline-color;
+}
+:host .control_input:hover {
+  border-color: var(--border-subtle-selected-01);
+}
+:host .control_input:focus-within {
+  outline-color: var(--focus);
+}
+:host .control_input.error {
+  outline-color: var(--support-error);
+}
+:host .control_input.readonly {
+  border-radius: 0;
+  border-top-width: 0;
+  border-left-width: 0;
+  border-right-width: 0;
+  outline-color: transparent;
+}
+:host .control_input input[type=text] {
   flex: 1;
-  outline: 2px solid transparent;
-  color: var(--text-primary, #333);
-  font-size: var(--fz-md, 14px);
+  border: none;
+  outline: none;
+  -moz-appearance: textfield;
+  background-color: transparent;
+  margin: 0;
+  padding-block: 0;
+  padding-inline: var(--spacing-05);
+  box-sizing: border-box;
+  color: var(--text-primary);
+  min-width: 20px;
   font-style: normal;
   font-weight: 400;
-  line-height: 128.571%;
   letter-spacing: 0.16px;
-  transition: 0.2s ease-in-out border-color, 0.2s ease-in-out outline-color;
 }
-:host .control input.withIcon {
-  padding-inline-end: calc(var(--text-input-padding-x) + 22px);
+:host .control_input input[type=text]::-webkit-inner-spin-button, :host .control_input input[type=text]::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
 }
-:host .control input::placeholder {
-  color: var(--text-placeholder, #ACACAC);
+:host .control_input__icons {
+  display: inline-flex;
+  align-items: stretch;
+  column-gap: 2px;
+  padding-right: var(--spacing-05);
 }
-:host .control input:focus {
-  outline: 2px solid var(--focus, #273435);
+:host .control_input__icons .status-icon {
+  display: inline-flex;
+  align-items: center;
+  align-self: center;
+  font-size: 1.35em;
+}
+:host .control_input__icons .status-icon.error {
+  background-color: var(--support-error);
+  color: white;
+  width: 16px;
+  height: 16px;
+  border-radius: 8px;
+  font-size: 12px;
+  font-weight: bold;
+  align-items: center;
+  justify-content: center;
+}
+:host .control_input__icons .status-icon.warning {
+  color: var(--support-warning);
+}
+:host .control_input__icons hr {
+  border: none;
+  outline: none;
+  width: 2px;
+  height: 60%;
+  align-self: center;
+  background-color: var(--border-subtle-01);
+  display: inline-flex;
 }
-:host .control_icon {
-  position: absolute;
-  top: calc(50% - 9px);
-  right: var(--text-input-padding-y);
-  width: 18px;
-  height: 18px;
+:host .control_input.xs {
+  height: 16px;
 }
-:host .control_icon.error {
-  color: var(--support-error, #F1290E);
+:host .control_input.sm {
+  height: 32px;
 }
-:host .control_icon.warning {
-  color: var(--support-warning, #FF7F04);
+:host .control_input.md {
+  height: 40px;
 }
-:host .helper {
-  margin: 0;
+:host .control_input.lg {
+  height: 48px;
+}
+:host .control_input.xl {
+  height: 60px;
+}
+:host .message {
+  margin: var(--spacing-02) 0 0;
   color: var(--text-helper, #646464);
   font-size: var(--fz-sm, 12px);
-  line-height: 133.333%;
+  font-style: normal;
+  font-weight: 400;
+  line-height: var(--fz-md, 16px);
   letter-spacing: 0.32px;
 }
-
-:host([status=error]) .control input {
-  border-color: var(--support-error, #F1290E);
-}
-:host([status=error]) .control input:focus {
-  outline-color: var(--support-error, #F1290E);
-}
-:host([status=error]) .helper {
-  color: var(--text-error, #D62512);
-}
-
-:host([readonly]) .control input {
-  border-top-color: transparent;
-  border-right-color: transparent;
-  border-left-color: transparent;
-  cursor: default;
-  background-color: transparent;
+:host .message.error {
+  color: var(--text-error);
 }
-:host([readonly]) .control input:focus {
-  outline-color: transparent;
+:host .message.warning {
+  color: var(--text-secondary, #515151);
 }
 
-:host([disabled]) {
-  opacity: 0.4;
-}
-:host([disabled]) .control input {
+:host(.disabled) {
   cursor: not-allowed;
 }
-
-:host([size=xs]) {
-  --text-input-padding-y: 4px;
-  --text-input-padding-x: 6px;
-}
-
-:host([size=sm]) {
-  --text-input-padding-y: 7px;
-}
-
-:host([size=md]) {
-  --text-input-padding-y: 11px;
+:host(.disabled) .control_label,
+:host(.disabled) .control_input input[type=text],
+:host(.disabled) .control_input input[type=text]::placeholder,
+:host(.disabled) .message:not(.error) {
+  color: var(--text-disabled);
+  cursor: not-allowed;
 }
-
-:host([size=lg]) {
-  --text-input-padding-y: 15px;
+:host(.disabled) .control_input__icons,
+:host(.disabled) .message.error {
+  opacity: 0.5;
+  cursor: not-allowed;
 }
 
-:host([size=xl]) {
-  --text-input-padding-y: 16px;
-  --text-input-padding-x: 18px;
+:host([block]) {
+  display: block;
 }

package/dist/collection/components/xv-text-input/xv-text-input.js

@@ -1,6 +1,5 @@
 import { h, Host } from "@stencil/core";
 import { SIZE_VAR } from "../../types/enum";
-import { TextInputStatus } from "./_vars";
 /**
  * xv-text-input — custom input
  * ti get data you can use default Input event
@@ -8,38 +7,25 @@ import { TextInputStatus } from "./_vars";
  */
 export class XvTextInput {
     constructor() {
-        this.helper = '';
-        this.size = SIZE_VAR.MD;
-        this.status = TextInputStatus.DEF;
+        this.type = 'text';
         this.value = '';
-        this.disabled = false;
-        this.readonly = false;
         this.loading = false;
+        this.size = SIZE_VAR.MD;
         this.handleInput = (e) => {
             const target = e.target;
             this.value = target.value;
             this.valueChange.emit(this.value);
             this.internals.setFormValue(target.value);
         };
-        this.getControlIcon = (status) => {
-            if (this.loading) {
-                return h("xv-loader-v2", { class: "control_icon", size: SIZE_VAR.XS });
-            }
-            switch (status) {
-                case TextInputStatus.ERROR: {
-                    return (h("svg", { class: "control_icon error", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512" }, h("path", { fill: "currentColor", d: "M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24l0 112c0 13.3-10.7 24-24 24s-24-10.7-24-24l0-112c0-13.3 10.7-24 24-24zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z" })));
-                }
-                case TextInputStatus.WARNING:
-                    return (h("svg", { class: "control_icon warning", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512" }, h("path", { fill: "currentColor", d: "M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7 .2 40.1S486.3 480 472 480L40 480c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8 .2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24l0 112c0 13.3 10.7 24 24 24s24-10.7 24-24l0-112c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z" })));
-                default: return null;
-            }
-        };
     }
     render() {
-        return (h(Host, { key: 'ff06aea5ae7498aaf2c855da8ee0f7a0522456e4', name: this.name, class: "xv-text-input", role: "textbox", tabindex: this.disabled ? -1 : false }, this.label && h("label", { key: 'cf8084b9c0aab74c87297e1af0ea6d069cb6b8f1', class: "label" }, this.label), h("div", { key: '9ebc989deb41e835f30c72f4777d94cadd68a023', class: "control" }, h("input", { key: '82b18d350f325ae32daad68552ac083dd2c3b157', type: "text", class: { withIcon: this.status !== TextInputStatus.DEF }, readonly: this.readonly, value: this.value, disabled: this.disabled, onInput: this.handleInput, placeholder: this.placeholder }), this.getControlIcon(this.status)), this.helper && h("p", { key: '070097a66e9a21872b8245305a24070fc5b8f443', class: "helper" }, this.helper)));
-    }
-    componentWillLoad() {
-        this.internals.setFormValue(this.value);
+        return (h(Host, { key: 'b6a0c46c10d556b41af3b2699b0cf75f54d38215', class: { disabled: !!this.disabled } }, h("label", { key: '39863902604461d77cefe6e11958f09e14d00007', class: "control" }, this.label && h("span", { key: '88d1301fa0f1cb47d391ef3932bdeb084d3df0b7', class: "control_label" }, this.label), h("div", { key: '0e8dff5c41c7375ae4d77af5c5c60312a74ae319', class: {
+                'control_input': true,
+                readonly: !!this.readonly,
+                [this.size]: true,
+                error: !!this.error,
+                warning: !!this.warning,
+            } }, h("input", { key: 'c8bb49371f49c3b42c83472f9a9e68d05a28801d', type: this.type, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, onInput: this.handleInput, name: this.name, value: this.value }), h("div", { key: 'c0af21628c89dc843ad00168a539327fb47a9ed2', class: "control_input__icons" }, this.loading && h("xv-loader-v2", { key: '2916d327464f17ff4bb140c54dd209101ef90f07', size: SIZE_VAR.XS }), !!this.error ? (h("span", { class: "status-icon error", "aria-hidden": "true" }, "!")) : !!this.warning ? (h("span", { class: "status-icon warning", "aria-hidden": "true" }, "\u26A0")) : null))), this.helper && h("p", { key: 'c67ce9f2f5fdfeddf3f42bc1dda62ff4ac9b9801', class: "message" }, this.helper), typeof this.error === 'string' ? (h("p", { class: "message error" }, this.error)) : typeof this.warning === 'string' ? (h("p", { class: "message warning" }, this.warning)) : null));
     }
     static get is() { return "xv-text-input-v2"; }
     static get encapsulation() { return "shadow"; }
@@ -56,6 +42,26 @@ export class XvTextInput {
     }
     static get properties() {
         return {
+            "type": {
+                "type": "string",
+                "attribute": "type",
+                "mutable": false,
+                "complexType": {
+                    "original": "'text' | 'email' | 'password' | 'url' | 'tel'",
+                    "resolved": "\"email\" | \"password\" | \"tel\" | \"text\" | \"url\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'text'"
+            },
             "label": {
                 "type": "string",
                 "attribute": "label",
@@ -66,14 +72,14 @@ export class XvTextInput {
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": ""
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true
+                "reflect": false
             },
             "placeholder": {
                 "type": "string",
@@ -94,9 +100,9 @@ export class XvTextInput {
                 "setter": false,
                 "reflect": true
             },
-            "helper": {
+            "name": {
                 "type": "string",
-                "attribute": "helper",
+                "attribute": "name",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -111,12 +117,31 @@ export class XvTextInput {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true,
+                "reflect": true
+            },
+            "value": {
+                "type": "string",
+                "attribute": "value",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
                 "defaultValue": "''"
             },
-            "name": {
+            "helper": {
                 "type": "string",
-                "attribute": "name",
+                "attribute": "helper",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -131,79 +156,64 @@ export class XvTextInput {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true
+                "reflect": false
             },
-            "size": {
-                "type": "string",
-                "attribute": "size",
+            "error": {
+                "type": "any",
+                "attribute": "error",
                 "mutable": false,
                 "complexType": {
-                    "original": "SIZE_VAR",
-                    "resolved": "SIZE_VAR.LG | SIZE_VAR.MD | SIZE_VAR.SM | SIZE_VAR.XL | SIZE_VAR.XS",
-                    "references": {
-                        "SIZE_VAR": {
-                            "location": "import",
-                            "path": "../../types/enum",
-                            "id": "src/types/enum.ts::SIZE_VAR"
-                        }
-                    }
+                    "original": "string | boolean",
+                    "resolved": "boolean | string",
+                    "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": ""
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true,
-                "defaultValue": "SIZE_VAR.MD"
+                "reflect": false
             },
-            "status": {
-                "type": "string",
-                "attribute": "status",
+            "warning": {
+                "type": "any",
+                "attribute": "warning",
                 "mutable": false,
                 "complexType": {
-                    "original": "TextInputStatus",
-                    "resolved": "TextInputStatus.DEF | TextInputStatus.ERROR | TextInputStatus.WARNING",
-                    "references": {
-                        "TextInputStatus": {
-                            "location": "import",
-                            "path": "./_vars",
-                            "id": "src/components/xv-text-input/_vars.ts::TextInputStatus"
-                        }
-                    }
+                    "original": "string | boolean",
+                    "resolved": "boolean | string",
+                    "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": ""
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true,
-                "defaultValue": "TextInputStatus.DEF"
+                "reflect": false
             },
-            "value": {
-                "type": "string",
-                "attribute": "value",
-                "mutable": true,
+            "readonly": {
+                "type": "boolean",
+                "attribute": "readonly",
+                "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
+                    "original": "boolean",
+                    "resolved": "boolean",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": ""
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true,
-                "defaultValue": "''"
+                "reflect": false
             },
             "disabled": {
                 "type": "boolean",
@@ -215,19 +225,18 @@ export class XvTextInput {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": ""
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true,
-                "defaultValue": "false"
+                "reflect": false
             },
-            "readonly": {
+            "loading": {
                 "type": "boolean",
-                "attribute": "readonly",
+                "attribute": "loading",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -242,12 +251,12 @@ export class XvTextInput {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true,
+                "reflect": false,
                 "defaultValue": "false"
             },
-            "loading": {
+            "block": {
                 "type": "boolean",
-                "attribute": "loading",
+                "attribute": "block",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -255,6 +264,31 @@ export class XvTextInput {
                     "references": {}
                 },
                 "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "size": {
+                "type": "string",
+                "attribute": "size",
+                "mutable": false,
+                "complexType": {
+                    "original": "SIZE_VAR",
+                    "resolved": "SIZE_VAR.LG | SIZE_VAR.MD | SIZE_VAR.SM | SIZE_VAR.XL | SIZE_VAR.XS",
+                    "references": {
+                        "SIZE_VAR": {
+                            "location": "import",
+                            "path": "../../types/enum",
+                            "id": "src/types/enum.ts::SIZE_VAR"
+                        }
+                    }
+                },
+                "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
@@ -263,7 +297,7 @@ export class XvTextInput {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
-                "defaultValue": "false"
+                "defaultValue": "SIZE_VAR.MD"
             }
         };
     }
@@ -285,7 +319,6 @@ export class XvTextInput {
                 }
             }];
     }
-    static get elementRef() { return "el"; }
     static get attachInternalsMemberName() { return "internals"; }
 }
 //# sourceMappingURL=xv-text-input.js.map