@xlabs-store/core 0.0.1 → 0.0.2

package/dist/collection/components/x-icon/x-icon.css

@@ -96,6 +96,7 @@
   --x-color-text-label: rgba(0, 0, 0, 0.65);
   --x-color-text-description: rgba(0, 0, 0, 0.45);
   --x-color-text-light-solid: #ffffff;
+  --x-color-text-processing: #ffffff;
   /** Background Colors **/
   --x-color-bg-container: #ffffff;
   --x-color-bg-elevated: #ffffff;
@@ -138,8 +139,10 @@
   --x-color-light-shade: #d7d8da;
   --x-color-light-tint: #f5f6f9;
   /** Font Family **/
-  --x-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-  --x-font-family-code: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
+  --x-font-family:
+    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
+    'Noto Color Emoji';
+  --x-font-family-code: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
   /** Font Sizes **/
   --x-font-size: 14px;
   --x-font-size-sm: 12px;

package/dist/collection/components/x-icon/x-icon.js

@@ -20,7 +20,7 @@ export class XIcon {
      * @example
      * <x-icon name="settings" type="round"></x-icon>
      */
-    type = "outline";
+    type = 'outline';
     /**
      * Name of the icon.
      * @example
@@ -130,7 +130,7 @@ export class XIcon {
             [`icon-type-${this.type}`]: !!this.type,
             [`icon-${this.name}`]: !!this.name,
         };
-        return (h(Host, { key: '9d2a0962e0aaeb38e4821da7b032e4b351341e1c', class: classes, style: style }, this.name || h("slot", { key: '1abba8504048d89268dc13acf0ab7622e03b862d' })));
+        return (h(Host, { key: 'b2459b7a45594aed51a2f8beb9fc505f51febec1', class: classes, style: style }, this.name || h("slot", { key: 'c06caf477d76dbb2a86c86ecc7d4d6c1cf33d315' })));
     }
     static get is() { return "x-icon"; }
     static get encapsulation() { return "shadow"; }
@@ -196,7 +196,7 @@ export class XIcon {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "\"solid\" | \"outline\" | \"round\"",
+                    "original": "'solid' | 'outline' | 'round'",
                     "resolved": "\"outline\" | \"round\" | \"solid\"",
                     "references": {}
                 },
@@ -213,7 +213,7 @@ export class XIcon {
                 "setter": false,
                 "reflect": false,
                 "attribute": "type",
-                "defaultValue": "\"outline\""
+                "defaultValue": "'outline'"
             },
             "name": {
                 "type": "string",
@@ -250,7 +250,7 @@ export class XIcon {
                 "docs": {
                     "tags": [{
                             "name": "example",
-                            "text": "<x-icon name=\"home\" size={24}></x-icon>\r\n<x-icon name=\"home\" size=\"2em\"></x-icon>"
+                            "text": "<x-icon name=\"home\" size={24}></x-icon>\n<x-icon name=\"home\" size=\"2em\"></x-icon>"
                         }],
                     "text": "Size of the icon."
                 },
@@ -272,7 +272,7 @@ export class XIcon {
                 "docs": {
                     "tags": [{
                             "name": "example",
-                            "text": "<x-icon name=\"home\" color=\"red\"></x-icon>\r\n<x-icon name=\"home\" color=\"#ff0000\"></x-icon>"
+                            "text": "<x-icon name=\"home\" color=\"red\"></x-icon>\n<x-icon name=\"home\" color=\"#ff0000\"></x-icon>"
                         }],
                     "text": "Color of the icon."
                 },

package/dist/collection/components/x-image/x-image.css

@@ -96,6 +96,7 @@
   --x-color-text-label: rgba(0, 0, 0, 0.65);
   --x-color-text-description: rgba(0, 0, 0, 0.45);
   --x-color-text-light-solid: #ffffff;
+  --x-color-text-processing: #ffffff;
   /** Background Colors **/
   --x-color-bg-container: #ffffff;
   --x-color-bg-elevated: #ffffff;
@@ -138,8 +139,10 @@
   --x-color-light-shade: #d7d8da;
   --x-color-light-tint: #f5f6f9;
   /** Font Family **/
-  --x-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-  --x-font-family-code: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
+  --x-font-family:
+    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
+    'Noto Color Emoji';
+  --x-font-family-code: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
   /** Font Sizes **/
   --x-font-size: 14px;
   --x-font-size-sm: 12px;

package/dist/collection/components/x-image/x-image.js

@@ -262,14 +262,14 @@ export class XImage {
         }
         const isPreviewEnabled = !!this.preview;
         const showCloseIcon = this.previewConfig.closeIcon !== false;
-        return (h(Host, { key: 'bb95b1a93bb027fc3b9a8ec1ccc43c4073697c2a', class: {
+        return (h(Host, { key: '7adb9e6ffce60aeb488e25b71ea74ddb76a3e331', class: {
                 'x-image': true,
                 'x-image-error': this.isError,
                 [this.rootClassName || '']: !!this.rootClassName,
-            }, style: style }, this.isLoading && this.placeholder && (h("div", { key: '4a74c3bc1e1dd379b0e6cf8643d00eac31e48198', class: "x-image-placeholder" }, h("slot", { key: 'ae5938670022b5aca6948dfbfa9d45321737126b', name: "placeholder" }, h("div", { key: '8a499eb96a298ee6fb7b51b46da8be04f68c9869', class: "x-image-placeholder-default" })))), h("img", { key: '2603924c780366f6859f5ac758482e4c111d89f7', class: {
+            }, style: style }, this.isLoading && this.placeholder && (h("div", { key: 'a69cd27d58a8e50713f696616ffe3ffe3133be13', class: "x-image-placeholder" }, h("slot", { key: '9ba6b38850fc0b0572e74738cd28682c68fa1fac', name: "placeholder" }, h("div", { key: '48cc8277389d40f04067c2d5aab71a4a563b86d7', class: "x-image-placeholder-default" })))), h("img", { key: 'a4aa46f1d5628c634c262fda3edfe450990ff125', class: {
                 'x-image-img': true,
                 'x-image-img-loading': this.isLoading,
-            }, src: imgSrc, alt: this.alt, crossOrigin: this.crossOrigin, loading: this.loading, onError: (e) => this.handleError(e), onLoad: (e) => this.handleLoad(e), onClick: () => isPreviewEnabled && this.openPreview(), ...(this.referrerPolicy ? { 'referrerpolicy': this.referrerPolicy } : {}) }), isPreviewEnabled && !this.isError && (h("div", { key: '5714cba98437c6bb7c056d377474ff4b095b75f7', class: "x-image-mask", onClick: () => this.openPreview() }, h("div", { key: 'abca6fec5707b253a5b0398a038b55aec0366d50', class: "x-image-mask-info" }, h("slot", { key: 'd4e32732fb77aeb621e1f6d4f8a8db8307b10bd6', name: "preview-mask" }, h("span", { key: '5223b8db442847cbafa20aff1c24ed2a8f4bb92d', class: "x-image-mask-icon" }, h("x-icon", { key: '118729ea00b31a30921435f977c1571f3542e2e8', name: getIcon('eye') })), h("span", { key: '8f4af313c1af576f21e742882120b19885ba8f6b' }, translate('Image.preview', {}, 'Preview')))))), isPreviewEnabled && this.isPreviewVisible && (h("div", { key: '7a3acb2225fa82d090355cae35c7ea1a618878fc', class: "x-image-preview", onWheel: this.handleWheel }, h("div", { key: '6d6933adb42a1205bfdcce6bbfbd4d34e70d11b0', class: "x-image-preview-mask", onClick: () => this.closePreview() }), h("div", { key: '049c24d84c358d5df1d5cd7675be8dd80ce91645', class: "x-image-preview-wrap" }, showCloseIcon && (h("button", { key: 'e9c11f95f25d3d19386b717aed6bdd6c23df5989', class: "x-image-preview-close", onClick: () => this.closePreview() }, h("x-icon", { key: 'e01f98539d963596635c8c1788d19039f21b756a', name: getIcon('close') }))), h("div", { key: '80bb64b516446d3a635a5d06f4d0613162211eba', class: "x-image-preview-operations" }, h("button", { key: '0a07f0967aa349e97032db2201604616f6845810', class: "x-image-preview-operation", onClick: () => this.flipX(), title: "Flip Horizontal" }, h("x-icon", { key: '46ee62460bf15f8fddfbeb5d492a41d10775b75d', name: getIcon('flipX') })), h("button", { key: '5797a256d2e1ca333ba2280e6add5f503a08731f', class: "x-image-preview-operation", onClick: () => this.flipY(), title: "Flip Vertical" }, h("x-icon", { key: 'ad8374c20c1318318dd3eb00037f42987bb3241f', name: getIcon('flipY'), style: { transform: 'rotate(90deg)' } })), h("button", { key: 'f9da947ad172a9968b3b66e69d099237035e8703', class: "x-image-preview-operation", onClick: () => this.rotateLeft(), title: "Rotate Left" }, h("x-icon", { key: '04fd2630e26178805b3d08e5e413f1fac935b7a7', name: getIcon('rotateLeft') })), h("button", { key: '08f4906ed045057c41b22a299b97bb730ce47c21', class: "x-image-preview-operation", onClick: () => this.rotateRight(), title: "Rotate Right" }, h("x-icon", { key: '1f3856cea3846315cc24b617ecb1d722f22ab7ba', name: getIcon('rotateRight') })), h("button", { key: '8648dd9483d2b44867f0814a4cf912bae1f67cbc', class: "x-image-preview-operation", onClick: () => this.zoomOut(), title: "Zoom Out" }, h("x-icon", { key: '0e0d234ae8565fb7304b8f7a4f3d5af29fc339e6', name: getIcon('zoomOut') })), h("button", { key: 'd07d2c894ea72e36610eef5472e61c5ea0835167', class: "x-image-preview-operation", onClick: () => this.zoomIn(), title: "Zoom In" }, h("x-icon", { key: '9a5a978a543d3782369f32c7a23f3dc6665632f6', name: getIcon('zoomIn') }))), h("div", { key: 'e6856b8d2a1a024ae3d5fb7232e586cad3ca283c', class: "x-image-preview-body" }, h("img", { key: '2dbc165faa1e6c4f1f86297e7dc7ed578784eadf', class: "x-image-preview-img", src: this.previewConfig.src || imgSrc, alt: this.alt, style: { transform: this.getTransformStyle() }, onClick: (e) => e.stopPropagation() })))))));
+            }, src: imgSrc, alt: this.alt, crossOrigin: this.crossOrigin, loading: this.loading, onError: e => this.handleError(e), onLoad: e => this.handleLoad(e), onClick: () => isPreviewEnabled && this.openPreview(), ...(this.referrerPolicy ? { referrerpolicy: this.referrerPolicy } : {}) }), isPreviewEnabled && !this.isError && (h("div", { key: '0a81fcf9306c8869e83417f1fdfd5a6179fa3631', class: "x-image-mask", onClick: () => this.openPreview() }, h("div", { key: '4ecbd1fa4aa0f2fe681fbda84db6980b6459747c', class: "x-image-mask-info" }, h("slot", { key: 'ea0a4461d758758d0aa9b1ddd577f50b2b86600e', name: "preview-mask" }, h("span", { key: 'ce36e16ec5372792cb208b2f1c36d3b537574efd', class: "x-image-mask-icon" }, h("x-icon", { key: '835e985bfbba17047fa7ef33533f64279c31dd15', name: getIcon('eye') })), h("span", { key: '224b5c92b4c9efc3c59f97515f77f6179674409c' }, translate('Image.preview', {}, 'Preview')))))), isPreviewEnabled && this.isPreviewVisible && (h("div", { key: '64135485027a507fb4e179984980087bc6a38382', class: "x-image-preview", onWheel: this.handleWheel }, h("div", { key: 'aadfd15795a5e1aa97bd3d243e4890ae90b8df9d', class: "x-image-preview-mask", onClick: () => this.closePreview() }), h("div", { key: 'afa754c067738e77054e46dc8e25439f8c2630ad', class: "x-image-preview-wrap" }, showCloseIcon && (h("button", { key: 'e7ca3d490eba8533fc77d0ad8bc5fc556fa4618e', class: "x-image-preview-close", onClick: () => this.closePreview() }, h("x-icon", { key: '25cd90e2a709a492fa8ed8c204095a5f6d2154e4', name: getIcon('close') }))), h("div", { key: '05f267927afb8f4187ec13991937043fef80ce18', class: "x-image-preview-operations" }, h("button", { key: '8a5fbec7420e707ef5986e354aafe192f90f88fa', class: "x-image-preview-operation", onClick: () => this.flipX(), title: "Flip Horizontal" }, h("x-icon", { key: 'b368814a23ccab5016db6618a495f00479a1692f', name: getIcon('flipX') })), h("button", { key: '167314810b66949eeb02e1d4975b3581bf00b012', class: "x-image-preview-operation", onClick: () => this.flipY(), title: "Flip Vertical" }, h("x-icon", { key: '848fcb9fc0a7b5c13070a49672f5f60879ee5f6e', name: getIcon('flipY'), style: { transform: 'rotate(90deg)' } })), h("button", { key: 'd6d7dd05a039b116cccf0d47f3544f33d5c76223', class: "x-image-preview-operation", onClick: () => this.rotateLeft(), title: "Rotate Left" }, h("x-icon", { key: '569ddc272a7ca369385d1c3df7c71e838c99c4c8', name: getIcon('rotateLeft') })), h("button", { key: 'd7f21cb943bd416a9dcdcd1a7c73a50cc833f17c', class: "x-image-preview-operation", onClick: () => this.rotateRight(), title: "Rotate Right" }, h("x-icon", { key: '75fbe9ad4c8d0792572618dfcf391794183b49c1', name: getIcon('rotateRight') })), h("button", { key: '5728df4a82304b1b71c46cb6e79c22d7896c0c31', class: "x-image-preview-operation", onClick: () => this.zoomOut(), title: "Zoom Out" }, h("x-icon", { key: 'b37a8429c5cf4ee07d2a3026dc7719821fdb73c7', name: getIcon('zoomOut') })), h("button", { key: 'b368ce8106b2168c06b78fa7c38db87fdee8a4bc', class: "x-image-preview-operation", onClick: () => this.zoomIn(), title: "Zoom In" }, h("x-icon", { key: '9d5bcdbd5cdd4ba6a11f042579907e37129bd9d2', name: getIcon('zoomIn') }))), h("div", { key: '85fe528c8caa15fe0b649e1025a958dd0119e36a', class: "x-image-preview-body" }, h("img", { key: '3c8da294c5507b16af2ceb0738128d60ecde8e3c', class: "x-image-preview-img", src: this.previewConfig.src || imgSrc, alt: this.alt, style: { transform: this.getTransformStyle() }, onClick: e => e.stopPropagation() })))))));
     }
     static get is() { return "x-image"; }
     static get encapsulation() { return "shadow"; }
@@ -342,7 +342,7 @@ export class XImage {
                 "docs": {
                     "tags": [{
                             "name": "example",
-                            "text": "<x-image height=\"200px\" />\r\n<x-image height={200} />"
+                            "text": "<x-image height=\"200px\" />\n<x-image height={200} />"
                         }],
                     "text": "Image height"
                 },
@@ -364,7 +364,7 @@ export class XImage {
                 "docs": {
                     "tags": [{
                             "name": "example",
-                            "text": "<x-image width=\"100%\" />\r\n<x-image width={300} />"
+                            "text": "<x-image width=\"100%\" />\n<x-image width={300} />"
                         }],
                     "text": "Image width"
                 },
@@ -438,7 +438,7 @@ export class XImage {
                 "docs": {
                     "tags": [{
                             "name": "example",
-                            "text": "<x-image preview />\r\n<x-image preview={{ src: 'large.png', minScale: 0.5 }} />"
+                            "text": "<x-image preview />\n<x-image preview={{ src: 'large.png', minScale: 0.5 }} />"
                         }],
                     "text": "Whether to enable preview or preview config"
                 },

package/dist/collection/components/x-infinite-scroll/x-infinite-scroll.css

@@ -96,6 +96,7 @@
   --x-color-text-label: rgba(0, 0, 0, 0.65);
   --x-color-text-description: rgba(0, 0, 0, 0.45);
   --x-color-text-light-solid: #ffffff;
+  --x-color-text-processing: #ffffff;
   /** Background Colors **/
   --x-color-bg-container: #ffffff;
   --x-color-bg-elevated: #ffffff;
@@ -138,8 +139,10 @@
   --x-color-light-shade: #d7d8da;
   --x-color-light-tint: #f5f6f9;
   /** Font Family **/
-  --x-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-  --x-font-family-code: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
+  --x-font-family:
+    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
+    'Noto Color Emoji';
+  --x-font-family-code: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
   /** Font Sizes **/
   --x-font-size: 14px;
   --x-font-size-sm: 12px;

package/dist/collection/components/x-infinite-scroll/x-infinite-scroll.js

@@ -72,7 +72,7 @@ export class XInfiniteScroll {
         if (this.disabled || !this.hasMore) {
             return;
         }
-        this.observer = new IntersectionObserver((entries) => {
+        this.observer = new IntersectionObserver(entries => {
             const entry = entries[0];
             if (entry.isIntersecting && !this.loading && this.hasMore && !this.disabled) {
                 this.xLoadMore.emit();
@@ -101,7 +101,7 @@ export class XInfiniteScroll {
      * </x-infinite-scroll>
      */
     render() {
-        return (h(Host, { key: '2c402e182338838f2303fbd7d7e6d72a85b75f61', class: "x-infinite-scroll" }, h("div", { key: '55688e4590660c16c6ed413d3a2cfea10120229b', class: "x-infinite-scroll-content" }, h("slot", { key: '163f8b5f05846f1b5f3ac7bbc2f8da847bc67cb9' })), h("div", { key: '84ee17b317206114bc8e6720f0ee7f4cee78f77a', ref: (el) => (this.sentinel = el), class: "x-infinite-scroll-sentinel" }), h("div", { key: 'f3305017c26f8d9c4e659dfefffc12cae882def0', class: "x-infinite-scroll-status" }, this.loading && (h("div", { key: '601ff13b31d6f0f7cea639d108a13fb26b0bd27e', class: "x-infinite-scroll-loading" }, h("x-spin", { key: '8bc76127a6b9a818496c281ae0bb0f4a1c84c1bb', spinning: true, size: "small", tip: this.loadingText }))), !this.hasMore && (h("div", { key: '61dc13b4f7a0a9b12e1edab1b0bc8a2e7e2510f6', class: "x-infinite-scroll-no-more" }, h("slot", { key: 'f1bfe2b4ad1482e989b5c5ad750413e4ce2a7704', name: "noMore" }, this.noMoreText))))));
+        return (h(Host, { key: '096788e6f8979a160900b5e4f1e50b8ed45595e6', class: "x-infinite-scroll" }, h("div", { key: '2cfe24d963736ceefaf0bce393b0b58ae4bd5451', class: "x-infinite-scroll-content" }, h("slot", { key: 'a8fb3b00256d181b0e26e85b253660abcabdffb3' })), h("div", { key: '5278b0fd7ec177707f6f90aaf6f14c340d98316a', ref: el => (this.sentinel = el), class: "x-infinite-scroll-sentinel" }), h("div", { key: 'abd3dec40aff21261b5749fe91c4da826ba23fdf', class: "x-infinite-scroll-status" }, this.loading && (h("div", { key: '687c5a55cdae413adb5c4d19ed0af928bf1d8094', class: "x-infinite-scroll-loading" }, h("x-spin", { key: '062bb9872ad91951e43a3fce68794945b789081a', spinning: true, size: "small", tip: this.loadingText }))), !this.hasMore && (h("div", { key: 'c4958032f48158b6300f41f99ab53e497424be3e', class: "x-infinite-scroll-no-more" }, h("slot", { key: 'c05f1b3a5ee006fc550f80463c6b4c5a9fd769f3', name: "noMore" }, this.noMoreText))))));
     }
     static get is() { return "x-infinite-scroll"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/x-input/x-input.css

@@ -96,6 +96,7 @@
   --x-color-text-label: rgba(0, 0, 0, 0.65);
   --x-color-text-description: rgba(0, 0, 0, 0.45);
   --x-color-text-light-solid: #ffffff;
+  --x-color-text-processing: #ffffff;
   /** Background Colors **/
   --x-color-bg-container: #ffffff;
   --x-color-bg-elevated: #ffffff;
@@ -138,8 +139,10 @@
   --x-color-light-shade: #d7d8da;
   --x-color-light-tint: #f5f6f9;
   /** Font Family **/
-  --x-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-  --x-font-family-code: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
+  --x-font-family:
+    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
+    'Noto Color Emoji';
+  --x-font-family-code: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
   /** Font Sizes **/
   --x-font-size: 14px;
   --x-font-size-sm: 12px;
@@ -386,6 +389,12 @@
   background-color: var(--x-input-bg, var(--x-control-bg, var(--x-color-bg-container, #ffffff)));
   cursor: default;
 }
+.x-input-affix-wrapper.x-input-affix-wrapper-textarea {
+  align-items: flex-start;
+  height: auto;
+  min-height: var(--x-textarea-min-height, 32px);
+  padding-block: var(--x-input-padding-block, var(--x-control-padding-vertical, var(--x-spacing-xxs, 4px)));
+}
 
 .x-input-affix-wrapper-focused {
   border-color: var(--x-input-border-color-focus, var(--x-control-border-color-focus, var(--x-color-primary, #1677ff))) !important;
@@ -472,13 +481,27 @@
 }
 .x-input[type=number] {
   -moz-appearance: textfield;
+  appearance: textfield;
 }
 .x-input[type=number]::-webkit-outer-spin-button, .x-input[type=number]::-webkit-inner-spin-button {
   -webkit-appearance: none;
+  appearance: none;
   margin: 0;
 }
 .x-input[type=search]::-webkit-search-cancel-button, .x-input[type=search]::-webkit-search-decoration {
   -webkit-appearance: none;
+  appearance: none;
+}
+
+.x-input-affix-wrapper-textarea .x-input {
+  max-height: var(--x-textarea-max-height, none);
+  height: auto;
+  resize: vertical;
+  line-height: var(--x-input-line-height, var(--x-line-height-base, 1.5714285714));
+  padding-block: 0;
+  overflow-y: auto;
+  word-wrap: break-word;
+  white-space: pre-wrap;
 }
 
 .x-input-affix-wrapper-small {

package/dist/collection/components/x-input/x-input.js

@@ -1,4 +1,4 @@
-import { Host, h, } from "@stencil/core";
+import { Host, h } from "@stencil/core";
 import { getIcon } from "../../utils/config";
 export class XInput {
     /**
@@ -116,6 +116,12 @@ export class XInput {
      * <x-input type="password"></x-input>
      */
     type = 'text';
+    /**
+     * The number of lines for textarea
+     * @example
+     * <x-input type="textarea" rows={4}></x-input>
+     */
+    rows;
     /**
      * The input content value
      * @example
@@ -457,10 +463,7 @@ export class XInput {
      * @returns boolean
      */
     hasSuffix() {
-        return (!!this.suffixIcon ||
-            this.allowClear ||
-            this.type === 'password' ||
-            this.showCount);
+        return !!this.suffixIcon || this.allowClear || this.type === 'password' || this.showCount;
     }
     // ========================================
     // RENDER METHODS
@@ -500,7 +503,7 @@ export class XInput {
      * @returns JSX.Element | null
      */
     renderSuffix() {
-        const showClear = this.allowClear && this.value && !this.disabled && !this.readOnly && this.hovering;
+        const showClear = this.allowClear && this.value && !this.disabled && this.hovering;
         const isPassword = this.type === 'password' && this.showPasswordToggle;
         if (!this.hasSuffix() && !showClear)
             return null;
@@ -511,7 +514,10 @@ export class XInput {
      * @returns JSX.Element
      */
     renderInput() {
-        return (h("input", { ref: el => (this.inputRef = el), id: this.inputId, name: this.name, class: "x-input", type: this.getInputType(), value: this.value, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readOnly, maxLength: this.maxLength, min: this.min, max: this.max, step: this.step, pattern: this.pattern, required: this.required, autoComplete: this.autocomplete, spellcheck: this.spellcheck, "aria-invalid": this.status === 'error' ? 'true' : undefined, onInput: this.handleInput, onKeyDown: this.handleKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur }));
+        if (this.type === 'textarea') {
+            return (h("textarea", { part: "textarea", ref: el => (this.inputRef = el), id: this.inputId, name: this.name, class: "x-input", value: this.value, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readOnly, maxLength: this.maxLength, rows: this.rows, required: this.required, spellcheck: this.spellcheck, "aria-invalid": this.status === 'error' ? 'true' : undefined, onInput: this.handleInput, onKeyDown: this.handleKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur }));
+        }
+        return (h("input", { part: "input", ref: el => (this.inputRef = el), id: this.inputId, name: this.name, class: "x-input", type: this.getInputType(), value: this.value, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readOnly, maxLength: this.maxLength, min: this.min, max: this.max, step: this.step, pattern: this.pattern, required: this.required, autoComplete: this.autocomplete, spellcheck: this.spellcheck, "aria-invalid": this.status === 'error' ? 'true' : undefined, onInput: this.handleInput, onKeyDown: this.handleKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur }));
     }
     /**
      * Render input with addons and affixes.
@@ -542,8 +548,9 @@ export class XInput {
             [`x-input-affix-wrapper-status-${this.status}`]: !!this.status,
             'x-input-affix-wrapper-has-prefix': this.hasPrefix(),
             'x-input-affix-wrapper-has-suffix': this.hasSuffix(),
+            'x-input-affix-wrapper-textarea': this.type === 'textarea',
         };
-        return (h(Host, { key: '4df8b3203a3cf17705ec1fcc56e016503414d633', class: wrapperClasses }, this.addonBefore && (h("span", { key: '00788fdccceee9722e9b452dc2557a91db2f7abf', class: "x-input-group-addon x-input-group-addon-before" }, this.addonBefore, h("slot", { key: '9c63be1e6b447d77f346f47955459e225b993dec', name: "addonBefore" }))), h("div", { key: '213841b2078abf21f8026632b1f82acebcbefa39', class: affixWrapperClasses, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, this.renderPrefix(), this.renderInput(), this.renderSuffix()), this.addonAfter && (h("span", { key: '89597130f3daf173bbf798e6b5fd4d7032c60198', class: "x-input-group-addon x-input-group-addon-after" }, this.addonAfter, h("slot", { key: 'c1a9c1e9e626437b790d05448f85c6b052bdcb0a', name: "addonAfter" })))));
+        return (h(Host, { key: '2431bf6f00360ffb6a91ab947ee141f9bbcc9c59', class: wrapperClasses }, this.addonBefore && (h("span", { key: '5f0326e232aa2519be4dbb4ff703d735d092a525', class: "x-input-group-addon x-input-group-addon-before" }, this.addonBefore, h("slot", { key: '40c442a66638f3c5a620cc7ff3eb584ca6db5341', name: "addonBefore" }))), h("div", { key: 'e249b83a8dacdf90eaa78c2831e422a12fb8c398', class: affixWrapperClasses, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, this.renderPrefix(), this.renderInput(), this.renderSuffix()), this.addonAfter && (h("span", { key: '190976f4deafa6ac8e5cb4e46dc708018a63f0b9', class: "x-input-group-addon x-input-group-addon-after" }, this.addonAfter, h("slot", { key: '84167812d926a3293ebe24cc7e9d3871d8780676', name: "addonAfter" })))));
     }
     static get is() { return "x-input"; }
     static get encapsulation() { return "shadow"; }
@@ -966,7 +973,7 @@ export class XInput {
                 "mutable": false,
                 "complexType": {
                     "original": "InputType",
-                    "resolved": "\"color\" | \"email\" | \"number\" | \"password\" | \"search\" | \"tel\" | \"text\" | \"url\"",
+                    "resolved": "\"color\" | \"email\" | \"number\" | \"password\" | \"search\" | \"tel\" | \"text\" | \"textarea\" | \"url\"",
                     "references": {
                         "InputType": {
                             "location": "import",
@@ -991,6 +998,28 @@ export class XInput {
                 "attribute": "type",
                 "defaultValue": "'text'"
             },
+            "rows": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-input type=\"textarea\" rows={4}></x-input>"
+                        }],
+                    "text": "The number of lines for textarea"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "rows"
+            },
             "value": {
                 "type": "string",
                 "mutable": true,