@xlabs-store/core 0.0.1 → 0.0.2

package/dist/collection/components/x-rate/x-rate.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-rate/x-rate.js

@@ -177,7 +177,7 @@ export class XRate {
         if (this.hoverValue !== undefined && index + 1 <= this.hoverValue) {
             className += ' x-rate-star-focused';
         }
-        return (h("li", { class: className, onMouseMove: (e) => this.handleHover(e, index), onClick: (e) => this.handleClick(e, index) }, h("div", { class: "x-rate-star-first" }, this.character ? this.character : (h("span", { role: "img", "aria-label": "star", class: "anticon anticon-star" }, h("svg", { viewBox: "64 64 896 896", focusable: "false", "data-icon": "star", width: "1em", height: "1em", fill: "currentColor", "aria-hidden": "true" }, h("path", { d: "M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L486 753.6l227.1 119.5c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z" }))))), h("div", { class: "x-rate-star-second" }, this.character ? this.character : (h("span", { role: "img", "aria-label": "star", class: "anticon anticon-star" }, h("svg", { viewBox: "64 64 896 896", focusable: "false", "data-icon": "star", width: "1em", height: "1em", fill: "currentColor", "aria-hidden": "true" }, h("path", { d: "M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L486 753.6l227.1 119.5c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z" })))))));
+        return (h("li", { class: className, onMouseMove: e => this.handleHover(e, index), onClick: e => this.handleClick(e, index) }, h("div", { class: "x-rate-star-first" }, this.character ? (this.character) : (h("span", { role: "img", "aria-label": "star", class: "anticon anticon-star" }, h("svg", { viewBox: "64 64 896 896", focusable: "false", "data-icon": "star", width: "1em", height: "1em", fill: "currentColor", "aria-hidden": "true" }, h("path", { d: "M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L486 753.6l227.1 119.5c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z" }))))), h("div", { class: "x-rate-star-second" }, this.character ? (this.character) : (h("span", { role: "img", "aria-label": "star", class: "anticon anticon-star" }, h("svg", { viewBox: "64 64 896 896", focusable: "false", "data-icon": "star", width: "1em", height: "1em", fill: "currentColor", "aria-hidden": "true" }, h("path", { d: "M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L486 753.6l227.1 119.5c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z" })))))));
     }
     /**
      * Main render method for the Rate component.
@@ -194,10 +194,10 @@ export class XRate {
         for (let i = 0; i < this.count; i++) {
             stars.push(this.renderStar(i));
         }
-        return (h(Host, { key: 'fccb318ea5d24184cf111d1717344cd97d282b37', class: {
+        return (h(Host, { key: 'dfe12b86614e80e6c19e5f3cb07157c2548016dd', class: {
                 'x-rate': true,
                 'x-rate-disabled': this.disabled,
-            }, onMouseLeave: () => this.handleLeave() }, h("ul", { key: 'a28953a4a42ec67aa7fb8f65b0eae53c5de5aa01', class: "x-rate-star-list" }, stars)));
+            }, onMouseLeave: () => this.handleLeave() }, h("ul", { key: 'd1c439595f6471bc80d09e507ffb8df344588d11', class: "x-rate-star-list" }, stars)));
     }
     static get is() { return "x-rate"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/x-result/x-result.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-result/x-result.js

@@ -56,28 +56,28 @@ export class XResult {
      * @returns JSX.Element - The SVG element for success status.
      */
     renderSuccessIcon() {
-        return h("x-icon", { size: this.iconSize, fill: true, type: 'round', name: getIcon('success') });
+        return h("x-icon", { size: this.iconSize, fill: true, type: "round", name: getIcon('success') });
     }
     /**
      * Renders the error icon (close-circle).
      * @returns JSX.Element - The SVG element for error status.
      */
     renderErrorIcon() {
-        return h("x-icon", { size: this.iconSize, fill: true, type: 'round', name: getIcon('error') });
+        return h("x-icon", { size: this.iconSize, fill: true, type: "round", name: getIcon('error') });
     }
     /**
      * Renders the info icon (exclamation-circle).
      * @returns JSX.Element - The SVG element for info status.
      */
     renderInfoIcon() {
-        return h("x-icon", { size: this.iconSize, fill: true, type: 'round', name: getIcon('info') });
+        return h("x-icon", { size: this.iconSize, fill: true, type: "round", name: getIcon('info') });
     }
     /**
      * Renders the warning icon (warning triangle).
      * @returns JSX.Element - The SVG element for warning status.
      */
     renderWarningIcon() {
-        return h("x-icon", { size: this.iconSize, fill: true, type: 'round', name: getIcon('warning') });
+        return h("x-icon", { size: this.iconSize, fill: true, type: "round", name: getIcon('warning') });
     }
     /**
      * Renders the 403 status illustration.
@@ -189,21 +189,22 @@ export class XResult {
         const hasTitle = this.resultTitle || this.hasSlotContent('title');
         const hasSubTitle = this.subTitle || this.hasSlotContent('subTitle');
         const hasExtra = this.hasSlotContent('extra');
-        const hasContent = this.hasSlotContent(null) || Array.from(this.el.childNodes).some(node => !node['slot'] && (node.nodeType === Node.ELEMENT_NODE || (node.nodeType === Node.TEXT_NODE && node.textContent?.trim())));
+        const hasContent = this.hasSlotContent(null) ||
+            Array.from(this.el.childNodes).some(node => !node['slot'] && (node.nodeType === Node.ELEMENT_NODE || (node.nodeType === Node.TEXT_NODE && node.textContent?.trim())));
         const hostStyle = this.styles?.root ? { cssText: this.styles.root } : undefined;
-        return (h(Host, { key: '815f4027d20d5cde949e983cf3b827f71a4f94e4', class: this.getHostClasses(), style: hostStyle }, this.renderIcon(), hasTitle && (h("div", { key: '46263db169a9441f28b763cb5cda7398b948076d', class: {
+        return (h(Host, { key: '6af6ff10e6cf19cdaea19aeab0d399aa711a6275', class: this.getHostClasses(), style: hostStyle }, this.renderIcon(), hasTitle && (h("div", { key: '16334db885b1868c9a26e638376ce048c1fed07f', class: {
                 'x-result-title': true,
                 [this.classNames?.title || '']: !!this.classNames?.title,
-            }, style: this.styles?.title ? { cssText: this.styles.title } : undefined }, h("slot", { key: 'aea1e4bffbbc13385cbc5578a9eb5ed2b95489e8', name: "title" }, this.resultTitle))), hasSubTitle && (h("div", { key: 'ebe5149df5e0767d9f9c97c3c66dd78c9179b065', class: {
+            }, style: this.styles?.title ? { cssText: this.styles.title } : undefined }, h("slot", { key: '2531068f8a0e93f848ae46ad03378113b8fd3339', name: "title" }, this.resultTitle))), hasSubTitle && (h("div", { key: 'e9fe42cf0fa83d8e6463e3ce8a9a190a50ad7f27', class: {
                 'x-result-subtitle': true,
                 [this.classNames?.subTitle || '']: !!this.classNames?.subTitle,
-            }, style: this.styles?.subTitle ? { cssText: this.styles.subTitle } : undefined }, h("slot", { key: '6d12de2cdb988925e0ae3c1f1676026c9b027f72', name: "subTitle" }, this.subTitle))), hasExtra && (h("div", { key: 'ce4880488c3d2f169f70a08c557e8c0d36920030', class: {
+            }, style: this.styles?.subTitle ? { cssText: this.styles.subTitle } : undefined }, h("slot", { key: '4e03798d3bb5445b5e677f8bd5558f3a8f363260', name: "subTitle" }, this.subTitle))), hasExtra && (h("div", { key: 'a4618e7840f5036f301a8f80a168b69801941d66', class: {
                 'x-result-extra': true,
                 [this.classNames?.extra || '']: !!this.classNames?.extra,
-            }, style: this.styles?.extra ? { cssText: this.styles.extra } : undefined }, h("slot", { key: 'aabf4df9d72924b0ddc23df5fad6af5cca7f2e8d', name: "extra" }))), hasContent && (h("div", { key: 'f54e568aec6abad6c31c5c3858bbd854708aa2f1', class: {
+            }, style: this.styles?.extra ? { cssText: this.styles.extra } : undefined }, h("slot", { key: '7a8de29e2cf35351a2a87e0bbc45941f6978b726', name: "extra" }))), hasContent && (h("div", { key: 'a60d6b33dc17e8c9972ca9829574e318d4c5e091', class: {
                 'x-result-content': true,
                 [this.classNames?.content || '']: !!this.classNames?.content,
-            }, style: this.styles?.content ? { cssText: this.styles.content } : undefined }, h("slot", { key: 'd47bd66d66453c5a576142ddbb1c6ad6f2036e95' })))));
+            }, style: this.styles?.content ? { cssText: this.styles.content } : undefined }, h("slot", { key: '9e5dc6b8e25dedcd49476bbae2db4538577131a0' })))));
     }
     static get is() { return "x-result"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/x-row/x-row.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-row/x-row.js

@@ -71,7 +71,7 @@ export class XRow {
             style['--x-row-gutter-y'] = `${gutterY}px`;
             style['--x-row-margin-y'] = `-${gutterY / 2}px`;
         }
-        return (h(Host, { key: '3973935e4573f194ff7c01476aedd7ec12c33fe3', style: style }, h("slot", { key: 'e5b420f22375f2268ebe422f96c62d0608f3345c' })));
+        return (h(Host, { key: 'd22c2dddd385511d292071b6109110b793aa0bcb', style: style }, h("slot", { key: 'a9096d5cff6cd9e0019bad3a02000d12b749e468' })));
     }
     static get is() { return "x-row"; }
     static get encapsulation() { return "shadow"; }
@@ -96,7 +96,7 @@ export class XRow {
                     "references": {
                         "RowAlign": {
                             "location": "local",
-                            "path": "E:/projects/fintvn/labs/packages/core/src/components/x-row/x-row.tsx",
+                            "path": "/run/media/cpanel/volumes/projects/fintvn/labs/packages/core/src/components/x-row/x-row.tsx",
                             "id": "src/components/x-row/x-row.tsx::RowAlign"
                         }
                     }
@@ -131,7 +131,7 @@ export class XRow {
                             "name": "example",
                             "text": "<x-row gutter={[16, 8]}></x-row>"
                         }],
-                    "text": "Spacing between grids, could be a number or a object like { xs: 8, sm: 16, md: 24}\r\nFor simplicity in this version, we accept number or [number, number]"
+                    "text": "Spacing between grids, could be a number or a object like { xs: 8, sm: 16, md: 24}\nFor simplicity in this version, we accept number or [number, number]"
                 },
                 "getter": false,
                 "setter": false,
@@ -148,7 +148,7 @@ export class XRow {
                     "references": {
                         "RowJustify": {
                             "location": "local",
-                            "path": "E:/projects/fintvn/labs/packages/core/src/components/x-row/x-row.tsx",
+                            "path": "/run/media/cpanel/volumes/projects/fintvn/labs/packages/core/src/components/x-row/x-row.tsx",
                             "id": "src/components/x-row/x-row.tsx::RowJustify"
                         }
                     }

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

@@ -95,6 +95,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;
@@ -137,8 +138,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-segmented/x-segmented.js

@@ -120,7 +120,7 @@ export class XSegmented {
             const activeItem = items[index];
             this.thumbStyle = {
                 transform: `translateX(${activeItem.offsetLeft}px)`,
-                width: `${activeItem.offsetWidth}px`
+                width: `${activeItem.offsetWidth}px`,
             };
         }
     }
@@ -174,19 +174,19 @@ export class XSegmented {
      */
     render() {
         const options = this.normalizeOptions();
-        return (h(Host, { key: '11f02d21deaa61f518736437d47420e65385ddac', class: {
+        return (h(Host, { key: '714e09eb965ed113f663e1d3c950adc6506a7f47', class: {
                 'x-segmented-host': true,
-                'x-segmented-host-block': this.block
-            } }, h("div", { key: 'f7f77d807c7cffe0d46fd1357cf1f0b9330d4673', class: {
+                'x-segmented-host-block': this.block,
+            } }, h("div", { key: '5a7ee12fe4cb07eed56d9e906cba648a92254f1a', class: {
                 'x-segmented': true,
                 'x-segmented-block': this.block,
                 [`x-segmented-${this.size}`]: true,
-                'x-segmented-disabled': this.disabled
-            } }, h("div", { key: '2710d71aad0c408d984e17b436b2a00b5c4e8197', class: "x-segmented-group" }, h("div", { key: '645214cd76268f424ec1b9d2a55ca8b0932fddd3', class: "x-segmented-thumb", style: this.thumbStyle }), options.map((option) => (h("div", { class: {
+                'x-segmented-disabled': this.disabled,
+            } }, h("div", { key: '01d739bfbd50b1c1c785adff4e8362f10d8e3889', class: "x-segmented-group" }, h("div", { key: 'fea8e78aa4cfda9eafb3e8b254ac08a9368ad43d', class: "x-segmented-thumb", style: this.thumbStyle }), options.map(option => (h("div", { class: {
                 'x-segmented-item': true,
                 'x-segmented-item-selected': this.innerValue === option.value,
                 'x-segmented-item-disabled': !!(this.disabled || option.disabled),
-                ...(option.className ? { [option.className]: true } : {})
+                ...(option.className ? { [option.className]: true } : {}),
             }, title: option.title, onClick: () => this.handleItemClick(option.value, !!option.disabled) }, option.icon && (h("span", { class: "x-segmented-item-icon" }, h("x-icon", { name: option.icon }))), h("span", null, option.label))))))));
     }
     static get is() { return "x-segmented"; }
@@ -223,7 +223,7 @@ export class XSegmented {
                 "docs": {
                     "tags": [{
                             "name": "example",
-                            "text": "<x-segmented options={['Daily', 'Weekly', 'Monthly']} />\r\n<x-segmented options={[{ label: 'Daily', value: 'Daily', icon: 'bars' }]} />"
+                            "text": "<x-segmented options={['Daily', 'Weekly', 'Monthly']} />\n<x-segmented options={[{ label: 'Daily', value: 'Daily', icon: 'bars' }]} />"
                         }],
                     "text": "Options to show"
                 },

package/dist/collection/components/x-select/select-dropdown-content/select-dropdown-content.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;
@@ -345,7 +348,8 @@
   position: relative;
   display: flex;
   align-items: center;
-  width: 100%;
+  width: auto;
+  min-width: 100%;
 }
 
 .x-select-selector {
@@ -361,6 +365,8 @@
   border-radius: var(--x-control-border-radius, var(--x-border-radius-base, 6px));
   transition: all 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
   box-sizing: border-box;
+  width: auto;
+  min-width: 100%;
 }
 .x-select-selector:hover:not(.disabled):not([disabled]):not([class*=-disabled]) {
   border-color: var(--x-control-border-color-hover, var(--x-color-primary-hover, #4096ff));
@@ -466,7 +472,8 @@
 }
 
 .x-select-selection-item {
-  flex: 1;
+  flex: 1 1 auto;
+  min-width: 0;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;

package/dist/collection/components/x-select/select-dropdown-content/select-dropdown-content.js

@@ -59,7 +59,7 @@ export class XSelectDropdownContent {
      * <x-select-dropdown-content dropdownStyle={{ width: '240px' }}></x-select-dropdown-content>
      */
     render() {
-        return (h("div", { key: 'f6720d05773f48450e3d5ae510b59f7c401458a7', class: this.dropdownClasses, style: this.dropdownStyle, ref: this.setRef, part: "dropdown", role: "listbox" }, h("div", { key: '69156751d70dad249dae6eeb6981016443b32340', class: "x-select-dropdown-content" }, h("slot", { key: '41f1594469ac9645aa763345c7c4d99390c59b4b' }), h("slot", { key: '7fc60ac830eeff2d0f540bf9c9afa4c6cf28b35d', name: "notFoundContent" }))));
+        return (h("div", { key: '76a0a07ecb739f523000b8838126bbe793473078', class: this.dropdownClasses, style: this.dropdownStyle, ref: this.setRef, part: "dropdown", role: "listbox" }, h("div", { key: 'a6185a287a78adff25a5bf676cbe5f5dceb0548b', class: "x-select-dropdown-content" }, h("slot", { key: '0171f21053929302534a54d1573a6206e79e7b27' }), h("slot", { key: '6310ddfb461583c71541b9333d97d76327f3b461', name: "notFoundContent" }))));
     }
     static get is() { return "x-select-dropdown-content"; }
     static get originalStyleUrls() {

package/dist/collection/components/x-select/x-select.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;
@@ -341,7 +344,8 @@
   position: relative;
   display: flex;
   align-items: center;
-  width: 100%;
+  width: auto;
+  min-width: 100%;
 }
 
 .x-select-selector {
@@ -357,6 +361,8 @@
   border-radius: var(--x-control-border-radius, var(--x-border-radius-base, 6px));
   transition: all 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
   box-sizing: border-box;
+  width: auto;
+  min-width: 100%;
 }
 .x-select-selector:hover:not(.disabled):not([disabled]):not([class*=-disabled]) {
   border-color: var(--x-control-border-color-hover, var(--x-color-primary-hover, #4096ff));
@@ -462,7 +468,8 @@
 }
 
 .x-select-selection-item {
-  flex: 1;
+  flex: 1 1 auto;
+  min-width: 0;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;

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

@@ -1,4 +1,4 @@
-import { Host, h, } from "@stencil/core";
+import { Host, h } from "@stencil/core";
 import { translate } from "../../locales/locale.service";
 import { PortalController } from "../x-portal";
 import { getIcon } from "../../utils/config";
@@ -318,7 +318,7 @@ export class XSelect {
         if (!this.showSearch || !this.searchValue) {
             return this.internalOptions;
         }
-        return this.internalOptions.filter((opt) => {
+        return this.internalOptions.filter(opt => {
             if (this.filterOption === false)
                 return true;
             const search = this.searchValue.toLowerCase();
@@ -532,7 +532,7 @@ export class XSelect {
         }
         // Otherwise, sync from slot children
         const optionElements = Array.from(this.el.querySelectorAll('x-select-option'));
-        this.internalOptions = optionElements.map((opt) => ({
+        this.internalOptions = optionElements.map(opt => ({
             value: opt.value,
             label: opt.label || opt.textContent?.trim() || String(opt.value),
             disabled: opt.disabled,
@@ -550,14 +550,14 @@ export class XSelect {
      *    - If not found, fallback to string representation of value.
      */
     syncSelectedFromValue() {
-        if (this.value === undefined || this.value === null) {
+        if (!this.value && this.value !== 0) {
             this.selectedOptions = [];
             return;
         }
         if (this.labelInValue) {
             if (this.isMultiple) {
                 const vals = (Array.isArray(this.value) ? this.value : [this.value]);
-                this.selectedOptions = vals.map((v) => ({
+                this.selectedOptions = vals.map(v => ({
                     value: v.value,
                     label: v.label,
                 }));
@@ -570,17 +570,15 @@ export class XSelect {
         else {
             if (this.isMultiple) {
                 const vals = (Array.isArray(this.value) ? this.value : []);
-                this.selectedOptions = vals.map((v) => {
-                    const opt = this.internalOptions.find((o) => o.value === v);
+                this.selectedOptions = vals.map(v => {
+                    const opt = this.internalOptions.find(o => o.value == v);
                     return { value: v, label: opt?.label || String(v) };
                 });
             }
             else {
                 const v = this.value;
-                const opt = this.internalOptions.find((o) => o.value === v);
-                this.selectedOptions = opt
-                    ? [{ value: opt.value, label: opt.label }]
-                    : [{ value: v, label: String(v) }];
+                const opt = this.internalOptions.find(o => o.value == v);
+                this.selectedOptions = opt ? [{ value: opt.value, label: opt.label }] : v === '' ? [] : [{ value: v, label: String(v) }];
             }
         }
     }
@@ -597,11 +595,11 @@ export class XSelect {
         const options = this.filteredOptions;
         if (this.selectedOptions.length > 0) {
             const selectedValue = this.selectedOptions[0].value;
-            const index = options.findIndex((o) => o.value === selectedValue);
+            const index = options.findIndex(o => o.value == selectedValue);
             if (index >= 0)
                 return index;
         }
-        return options.findIndex((o) => !o.disabled);
+        return options.findIndex(o => !o.disabled);
     }
     /**
      * Opens the dropdown menu.
@@ -666,7 +664,7 @@ export class XSelect {
         if (option.disabled)
             return;
         if (this.isMultiple) {
-            const exists = this.selectedOptions.some((o) => o.value === option.value);
+            const exists = this.selectedOptions.some(o => o.value == option.value);
             if (exists) {
                 this.deselectOption(option);
             }
@@ -696,7 +694,7 @@ export class XSelect {
      * @param option - The option to remove.
      */
     deselectOption(option) {
-        this.selectedOptions = this.selectedOptions.filter((o) => o.value !== option.value);
+        this.selectedOptions = this.selectedOptions.filter(o => o.value !== option.value);
         this.emitChange();
         this.xDeselect.emit(option);
     }
@@ -709,16 +707,12 @@ export class XSelect {
         let emitOption;
         if (this.isMultiple) {
             emitOption = this.selectedOptions;
-            emitValue = this.labelInValue
-                ? this.selectedOptions.map((o) => ({ value: o.value, label: o.label }))
-                : this.selectedOptions.map((o) => o.value);
+            emitValue = this.labelInValue ? this.selectedOptions.map(o => ({ value: o.value, label: o.label })) : this.selectedOptions.map(o => o.value);
         }
         else {
             const opt = this.selectedOptions[0];
             emitOption = opt;
-            emitValue = this.labelInValue
-                ? opt ? { value: opt.value, label: opt.label } : undefined
-                : opt?.value;
+            emitValue = this.labelInValue ? (opt ? { value: opt.value, label: opt.label } : undefined) : opt?.value;
         }
         this.value = emitValue;
         this.xChange.emit({ value: emitValue, option: emitOption });
@@ -998,7 +992,7 @@ export class XSelect {
      * @returns HTMLElement - The option element.
      */
     createOptionElement(option, index) {
-        const isSelected = this.selectedOptions.some((o) => o.value === option.value);
+        const isSelected = this.selectedOptions.some(o => o.value == option.value);
         const isActive = index === this.activeIndex;
         const optionEl = document.createElement('div');
         optionEl.className = [
@@ -1006,7 +1000,9 @@ export class XSelect {
             isSelected ? 'x-select-option-selected' : '',
             isActive ? 'x-select-option-active' : '',
             option.disabled ? 'x-select-option-disabled' : '',
-        ].filter(Boolean).join(' ');
+        ]
+            .filter(Boolean)
+            .join(' ');
         optionEl.setAttribute('role', 'option');
         optionEl.setAttribute('aria-selected', String(isSelected));
         optionEl.setAttribute('aria-disabled', String(!!option.disabled));
@@ -1019,15 +1015,15 @@ export class XSelect {
         if (isSelected) {
             const iconSpan = document.createElement('span');
             iconSpan.className = 'x-select-option-state';
-            iconSpan.innerHTML = `
-        <svg viewBox="64 64 896 896" width="1em" height="1em" fill="currentColor">
-          <path d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 00-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"/>
-        </svg>
+            iconSpan.innerHTML = `
+        <svg viewBox="64 64 896 896" width="1em" height="1em" fill="currentColor">
+          <path d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 00-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"/>
+        </svg>
       `;
             optionEl.appendChild(iconSpan);
         }
         // Click handler
-        optionEl.addEventListener('click', (e) => {
+        optionEl.addEventListener('click', e => {
             e.preventDefault();
             e.stopPropagation();
             this.handleOptionClick(option);
@@ -1153,10 +1149,8 @@ export class XSelect {
      * @returns JSX.Element
      */
     renderTag(option) {
-        const label = this.maxTagTextLength && option.label.length > this.maxTagTextLength
-            ? option.label.slice(0, this.maxTagTextLength) + '...'
-            : option.label;
-        return (h("span", { class: "x-select-selection-item", key: String(option.value) }, h("span", { class: "x-select-selection-item-content" }, label), !this.disabled && (h("span", { class: "x-select-selection-item-remove", onClick: (e) => this.handleTagRemove(e, option) }, h("x-icon", { name: getIcon('checkSmall') })))));
+        const label = this.maxTagTextLength && option.label.length > this.maxTagTextLength ? option.label.slice(0, this.maxTagTextLength) + '...' : option.label;
+        return (h("span", { class: "x-select-selection-item", key: String(option.value) }, h("span", { class: "x-select-selection-item-content" }, label), !this.disabled && (h("span", { class: "x-select-selection-item-remove", onClick: e => this.handleTagRemove(e, option) }, h("x-icon", { name: getIcon('checkSmall') })))));
     }
     /**
      * Renders the selector content for multiple/tags mode.
@@ -1169,7 +1163,7 @@ export class XSelect {
         const visibleTags = this.selectedOptions.slice(0, maxCount);
         const hiddenCount = this.selectedOptions.length - maxCount;
         const showPlaceholder = !this.hasValue && !this.searchValue;
-        return (h("div", { class: "x-select-selection-overflow" }, visibleTags.map((opt) => this.renderTag(opt)), hiddenCount > 0 && (h("span", { class: "x-select-selection-item x-select-selection-item-rest" }, h("span", { class: "x-select-selection-item-content" }, this.maxTagPlaceholder || `+ ${hiddenCount} ...`))), h("span", { class: "x-select-selection-search" }, h("input", { ref: (el) => (this.inputRef = el), id: this.inputId, name: this.name, class: "x-select-selection-search-input", type: "text", value: this.searchValue, disabled: this.disabled, readOnly: !this.showSearch && this.mode !== 'tags', autoComplete: "off", onInput: this.handleSearchInput, onFocus: this.handleInputFocus, onBlur: this.handleInputBlur }), h("span", { class: "x-select-selection-search-mirror" }, this.searchValue, "\u00A0")), showPlaceholder && (h("span", { class: "x-select-selection-placeholder" }, this.placeholder))));
+        return (h("div", { class: "x-select-selection-overflow" }, visibleTags.map(opt => this.renderTag(opt)), hiddenCount > 0 && (h("span", { class: "x-select-selection-item x-select-selection-item-rest" }, h("span", { class: "x-select-selection-item-content" }, this.maxTagPlaceholder || `+ ${hiddenCount} ...`))), h("span", { class: "x-select-selection-search" }, h("input", { ref: el => (this.inputRef = el), id: this.inputId, name: this.name, class: "x-select-selection-search-input", type: "text", value: this.searchValue, disabled: this.disabled, readOnly: !this.showSearch && this.mode !== 'tags', autoComplete: "off", onInput: this.handleSearchInput, onFocus: this.handleInputFocus, onBlur: this.handleInputBlur }), h("span", { class: "x-select-selection-search-mirror" }, this.searchValue, "\u00A0")), showPlaceholder && h("span", { class: "x-select-selection-placeholder" }, this.placeholder)));
     }
     /**
      * Renders the selector content for single selection mode.
@@ -1181,12 +1175,12 @@ export class XSelect {
         const showPlaceholder = !this.hasValue && !this.searchValue;
         const displayLabel = this.hasValue ? this.selectedOptions[0].label : '';
         return [
-            h("span", { class: "x-select-selection-search" }, h("input", { ref: (el) => (this.inputRef = el), id: this.inputId, name: this.name, class: "x-select-selection-search-input", type: "text", value: this.searchValue, disabled: this.disabled, readOnly: !this.showSearch, autoComplete: "off", onInput: this.handleSearchInput, onFocus: this.handleInputFocus, onBlur: this.handleInputBlur, style: { opacity: this.open ? '1' : '0' } })),
+            h("span", { class: "x-select-selection-search" }, h("input", { ref: el => (this.inputRef = el), id: this.inputId, name: this.name, class: "x-select-selection-search-input", type: "text", value: this.searchValue, disabled: this.disabled, readOnly: !this.showSearch, autoComplete: "off", onInput: this.handleSearchInput, onFocus: this.handleInputFocus, onBlur: this.handleInputBlur, style: { opacity: this.open ? '1' : '0' } })),
             h("span", { class: "x-select-selection-item", style: {
                     visibility: this.open && this.searchValue ? 'hidden' : 'visible',
-                    opacity: this.open && this.showSearch ? '0.4' : '1'
+                    opacity: this.open && this.showSearch ? '0.4' : '1',
                 } }, displayLabel),
-            showPlaceholder && (h("span", { class: "x-select-selection-placeholder" }, this.placeholder)),
+            showPlaceholder && h("span", { class: "x-select-selection-placeholder" }, this.placeholder),
         ];
     }
     /**
@@ -1215,13 +1209,13 @@ export class XSelect {
             [`x-select-${this.size}`]: true,
             [`x-select-status-${this.status}`]: !!this.status,
         };
-        return (h(Host, { key: '592a104db5de8006a1ad6fc50a85e3017748b0bc', class: hostClasses, role: "combobox", "aria-haspopup": "listbox", "aria-expanded": String(this.open), "aria-disabled": String(this.disabled) }, h("div", { key: 'f766f29c9b6c2c35f353e64aef873e78980bdb15', class: {
+        return (h(Host, { key: '7bbdcaa5eeec958e005e1767a8bee8c75c419b38', class: hostClasses, role: "combobox", "aria-haspopup": "listbox", "aria-expanded": String(this.open), "aria-disabled": String(this.disabled) }, h("div", { key: '0ad12ae40c80e23eeebd890e9e707eead709896d', class: {
                 'x-select-wrapper': true,
                 'disabled': this.disabled,
-            }, part: "wrapper" }, h("div", { key: 'fc7a4a196080d652c8544222da6f5bf03ef15033', class: {
+            }, part: "wrapper" }, h("div", { key: 'ec8dd98daf8c5091c8de20230a634fcb11978c47', class: {
                 'x-select-selector': true,
                 'disabled': this.disabled,
-            }, part: "selector", onClick: this.handleSelectorClick }, this.isMultiple ? this.renderMultipleSelector() : this.renderSingleSelector()), h("span", { key: '7a1f7574a4a91187935751f9cae38558cb26674d', class: "x-select-suffix" }, this.renderClearIcon(), this.renderArrowIcon()))));
+            }, part: "selector", onClick: this.handleSelectorClick }, this.isMultiple ? this.renderMultipleSelector() : this.renderSingleSelector()), h("span", { key: '5e79b2d404da2efd19f9350154df86f56b4baa25', class: "x-select-suffix" }, this.renderClearIcon(), this.renderArrowIcon()))));
     }
     static get is() { return "x-select"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/x-select-option/x-select-option.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;