@xlabs-store/core 0.0.1 → 0.0.3

package/dist/collection/components/x-timeline-item/x-timeline-item.js

@@ -34,10 +34,10 @@ export class XTimelineItem {
      * @returns JSX.Element
      */
     render() {
-        return (h(Host, { key: 'b80942485cff15ffe6d17ddab05a876d805ce86a', class: {
+        return (h(Host, { key: '4a48d2253e10171c89741afc20d55dde4f8dac03', class: {
                 'x-timeline-item': true,
                 [`x-timeline-item-${this.color}`]: ['blue', 'red', 'green', 'gray'].includes(this.color),
-            }, style: !['blue', 'red', 'green', 'gray'].includes(this.color) ? { '--timeline-dot-color': this.color } : {} }, h("div", { key: '1188f1d24e5b93f4198576d3cab66e6e8e912deb', class: "x-timeline-item-tail" }), h("div", { key: 'eb3fe7d6f02b9c5d68d5dbd743927e1b9aa711a1', class: "x-timeline-item-head" }, h("slot", { key: '8b35ac2d138f0aca8bea07d19376ffe44bf077ef', name: "dot" })), h("div", { key: '2095fc75bf0b68866ad35216d69c9a50b924b743', class: "x-timeline-item-content" }, h("slot", { key: 'cbb962dc8e184125aad941a697253f73e3ec85c3' }))));
+            }, style: !['blue', 'red', 'green', 'gray'].includes(this.color) ? { '--timeline-dot-color': this.color } : {} }, h("div", { key: '5c59c0ed3c0aef744e85488469d9f355f59ad209', class: "x-timeline-item-tail" }), h("div", { key: 'e0d41efc83391a6292599f3a73970fb5709e35ad', class: "x-timeline-item-head" }, h("slot", { key: '19fedeab9c19b43b8fe7eab6b4c8b1df1053f743', name: "dot" })), h("div", { key: 'a19c7e085ce5067abc6934e851da24a0b61f7a00', class: "x-timeline-item-content" }, h("slot", { key: '1b3eb9abd39de98791c09332dd5d7cd871e40b4f' }))));
     }
     static get is() { return "x-timeline-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,4 +1,4 @@
-import { Host, h, } from "@stencil/core";
+import { Host, h } from "@stencil/core";
 import { PortalController } from "../x-portal";
 /**
  * @component x-tooltip
@@ -358,9 +358,7 @@ export class XTooltip {
      * @returns HTMLElement | undefined
      */
     getTriggerEl() {
-        return this.el.shadowRoot
-            ? this.el.shadowRoot.querySelector('.x-tooltip-trigger')
-            : this.el.querySelector('.x-tooltip-trigger');
+        return this.el.shadowRoot ? this.el.shadowRoot.querySelector('.x-tooltip-trigger') : this.el.querySelector('.x-tooltip-trigger');
     }
     // ==================== Portal Methods ====================
     /**
@@ -522,11 +520,11 @@ export class XTooltip {
      * @returns JSX.Element
      */
     render() {
-        return (h(Host, { key: '7f714f3aef2633cd18aac1fe03be7c840f01aa81', class: {
+        return (h(Host, { key: '92ea194b0e8fe089c5309599125007211e903e2f', class: {
                 'x-tooltip-wrapper': true,
                 'x-tooltip-open': this.isOpen,
                 'x-tooltip-color': this.color ? true : false,
-            }, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onFocus: this.handleFocus, onBlur: this.handleBlur, onClick: this.handleClick, onContextMenu: this.handleContextMenu }, h("span", { key: 'ae94a1ccfc97a0ba7bddb87394e7cbe0e4a4ff2a', class: "x-tooltip-trigger" }, h("slot", { key: '1f2ca22b7b432abe47e12d69e3ea94efe4c06c08' }))));
+            }, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onFocus: this.handleFocus, onBlur: this.handleBlur, onClick: this.handleClick, onContextMenu: this.handleContextMenu }, h("span", { key: '2c26bf181ec1a749557f3db5e7d67d8c9b0380ed', class: "x-tooltip-trigger" }, h("slot", { key: 'a2bb7f21d35317b4412ab6f87b5559455a1eb8bd' }))));
     }
     static get is() { return "x-tooltip"; }
     static get encapsulation() { return "shadow"; }
@@ -557,7 +555,7 @@ export class XTooltip {
                             "name": "example",
                             "text": "<x-tooltip tooltip-title=\"Info\"></x-tooltip>"
                         }],
-                    "text": "The text shown in the tooltip.\r\nUse `tooltipTitle` to avoid conflict with native `title` attribute."
+                    "text": "The text shown in the tooltip.\nUse `tooltipTitle` to avoid conflict with native `title` attribute."
                 },
                 "getter": false,
                 "setter": false,
@@ -722,7 +720,7 @@ export class XTooltip {
                             "name": "example",
                             "text": "<x-tooltip arrow={false}></x-tooltip>"
                         }],
-                    "text": "Whether to show arrow.\r\nCan be a boolean or an object with `pointAtCenter` option."
+                    "text": "Whether to show arrow.\nCan be a boolean or an object with `pointAtCenter` option."
                 },
                 "getter": false,
                 "setter": false,

package/dist/collection/components/x-tooltip-content/x-tooltip-content.js

@@ -71,11 +71,11 @@ export class XTooltipContent {
         if (this.color) {
             style['--x-tooltip-color'] = this.color;
         }
-        return (h(Host, { key: 'a583a96aef26105e6b21504201ffda958a46103c', class: classes, style: style, role: "tooltip" }, h("div", { key: '9cf9e614628b794ff569e26d679507c437395548', class: {
+        return (h(Host, { key: '0360c8b6848edcd9ca556a616b377f606e0bb910', class: classes, style: style, role: "tooltip" }, h("div", { key: '1bcc0e3090ee9490dacfbbcb636c677a5dabacaf', class: {
                 'x-tooltip-content-inner': true,
                 'x-tooltip-content-color': this.color ? true : false,
                 [this.contentClass || '']: !!this.contentClass,
-            } }, this.tooltipTitle, h("slot", { key: '799907798ddfca9bf4ccdee5850301af616f8127' })), this.showArrow && (h("div", { key: '0a9215b4cbb5f583188851171cb3a50bd26683a2', class: "x-tooltip-content-arrow" }))));
+            } }, this.tooltipTitle, h("slot", { key: 'ff0ad7809b27a8039e1cfe26a8e9ed8111fc1082' })), this.showArrow && h("div", { key: 'd8cda4959875c845728c1cd0f3a0aea08a01a7b5', class: "x-tooltip-content-arrow" })));
     }
     static get is() { return "x-tooltip-content"; }
     static get originalStyleUrls() {

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

@@ -70,7 +70,7 @@ export class XTourPanel {
         if (!this.step)
             return null;
         const { title, description, cover, nextButtonProps, prevButtonProps } = this.step;
-        return (h(Host, { class: "x-tour-panel" }, this.arrow && h("div", { class: "x-tour-arrow" }), h("div", { class: "x-tour-content" }, h("button", { class: "x-tour-close", onClick: () => this.xClose.emit() }, h("x-icon", { name: "close" })), cover && (h("div", { class: "x-tour-cover" }, typeof cover === 'string' ? h("img", { src: cover, alt: "cover" }) : cover)), h("div", { class: "x-tour-header" }, typeof title === 'string' ? h("div", { class: "x-tour-title" }, title) : title), h("div", { class: "x-tour-description" }, typeof description === 'string' ? h("div", null, description) : description), h("div", { class: "x-tour-footer" }, h("div", { class: "x-tour-indicators" }, this.current + 1, " / ", this.total), h("div", { class: "x-tour-buttons" }, this.current > 0 && (h("x-button", { size: "small", ...(prevButtonProps || {}), onClick: () => this.xPrev.emit() }, prevButtonProps?.children || 'Previous')), h("x-button", { type: "primary", size: "small", ...(nextButtonProps || {}), onClick: () => this.xNext.emit() }, nextButtonProps?.children || (this.current === this.total - 1 ? 'Finish' : 'Next')))))));
+        return (h(Host, { class: "x-tour-panel" }, this.arrow && h("div", { class: "x-tour-arrow" }), h("div", { class: "x-tour-content" }, h("button", { class: "x-tour-close", onClick: () => this.xClose.emit() }, h("x-icon", { name: "close" })), cover && h("div", { class: "x-tour-cover" }, typeof cover === 'string' ? h("img", { src: cover, alt: "cover" }) : cover), h("div", { class: "x-tour-header" }, typeof title === 'string' ? h("div", { class: "x-tour-title" }, title) : title), h("div", { class: "x-tour-description" }, typeof description === 'string' ? h("div", null, description) : description), h("div", { class: "x-tour-footer" }, h("div", { class: "x-tour-indicators" }, this.current + 1, " / ", this.total), h("div", { class: "x-tour-buttons" }, this.current > 0 && (h("x-button", { size: "small", ...(prevButtonProps || {}), onClick: () => this.xPrev.emit() }, prevButtonProps?.children || 'Previous')), h("x-button", { type: "primary", size: "small", ...(nextButtonProps || {}), onClick: () => this.xNext.emit() }, nextButtonProps?.children || (this.current === this.total - 1 ? 'Finish' : 'Next')))))));
     }
     static get is() { return "x-tour-panel"; }
     static get encapsulation() { return "shadow"; }

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

@@ -237,10 +237,10 @@ export class XTour {
                 zIndex: this.zIndex + 1,
                 content: panel,
                 offset: 12,
-                onPlacementChange: (p) => {
+                onPlacementChange: p => {
                     this.activePlacement = p;
                     panel.placement = p;
-                }
+                },
             });
         }
         else {
@@ -250,10 +250,10 @@ export class XTour {
                 placement: step.placement || 'bottom',
                 zIndex: this.zIndex + 1,
                 content: panel,
-                onPlacementChange: (p) => {
+                onPlacementChange: p => {
                     this.activePlacement = p;
                     panel.placement = p;
-                }
+                },
             });
         }
         this.updateTargetRect();
@@ -306,15 +306,15 @@ export class XTour {
             const w = width + padding * 2;
             const h = height + padding * 2;
             // Anti-clockwise to create a hole
-            maskPath += ` M ${x + r} ${y} 
-                    h ${w - r * 2} 
-                    a ${r} ${r} 0 0 1 ${r} ${r} 
-                    v ${h - r * 2} 
-                    a ${r} ${r} 0 0 1 -${r} ${r} 
-                    h -${w - r * 2} 
-                    a ${r} ${r} 0 0 1 -${r} -${r} 
-                    v -${h - r * 2} 
-                    a ${r} ${r} 0 0 1 ${r} -${r} 
+            maskPath += ` M ${x + r} ${y} 
+                    h ${w - r * 2} 
+                    a ${r} ${r} 0 0 1 ${r} ${r} 
+                    v ${h - r * 2} 
+                    a ${r} ${r} 0 0 1 -${r} ${r} 
+                    h -${w - r * 2} 
+                    a ${r} ${r} 0 0 1 -${r} -${r} 
+                    v -${h - r * 2} 
+                    a ${r} ${r} 0 0 1 ${r} -${r} 
                     Z`;
         }
         return (h(Host, { style: { zIndex: `${this.zIndex}` } }, this.mask && (h("div", { class: "x-tour-mask" }, h("svg", { class: "x-tour-svg", width: "100%", height: "100%", viewBox: `0 0 ${windowWidth} ${windowHeight}` }, h("path", { class: "x-tour-mask-path", d: maskPath, "fill-rule": "evenodd" }))))));
@@ -420,7 +420,7 @@ export class XTour {
                 "docs": {
                     "tags": [{
                             "name": "example",
-                            "text": "<x-tour mask={false} />\r\n<x-tour mask={{ style: { background: 'rgba(0,0,0,0.5)' } }} />"
+                            "text": "<x-tour mask={false} />\n<x-tour mask={{ style: { background: 'rgba(0,0,0,0.5)' } }} />"
                         }],
                     "text": "Whether to show mask"
                 },
@@ -466,7 +466,7 @@ export class XTour {
                 "docs": {
                     "tags": [{
                             "name": "example",
-                            "text": "<x-tour arrow={false} />\r\n<x-tour arrow={{ pointAtCenter: true }} />"
+                            "text": "<x-tour arrow={false} />\n<x-tour arrow={{ pointAtCenter: true }} />"
                         }],
                     "text": "Arrow of the tour panel"
                 },

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

@@ -169,8 +169,7 @@ export class XTransfer {
         if (!searchValue)
             return items;
         const lowerSearch = searchValue.toLowerCase();
-        return items.filter(item => item.title.toLowerCase().includes(lowerSearch) ||
-            (item.description && item.description.toLowerCase().includes(lowerSearch)));
+        return items.filter(item => item.title.toLowerCase().includes(lowerSearch) || (item.description && item.description.toLowerCase().includes(lowerSearch)));
     }
     /**
      * Apply pagination to items.
@@ -299,7 +298,7 @@ export class XTransfer {
         // Remove moved keys from selection
         this.selectedKeys = this.selectedKeys.filter(k => !moveKeys.includes(k));
         this.targetKeys = newTargetKeys;
-        this.xChange.emit({ targetKeys: newTargetKeys, direction, moveKeys });
+        this.xChange.emit({ value: newTargetKeys, targetKeys: newTargetKeys, direction, moveKeys });
         this.emitSelectChange();
     }
     /**
@@ -359,7 +358,7 @@ export class XTransfer {
         if (!this.showSearch)
             return null;
         const value = direction === 'left' ? this.sourceSearchValue : this.targetSearchValue;
-        return (h("div", { class: "x-transfer-list-body-search-wrapper" }, h("input", { type: "text", class: "x-transfer-list-search", placeholder: this.searchPlaceholder, value: value, disabled: this.disabled, onInput: (e) => this.handleSearch(direction, e.target.value) }), value && (h("span", { class: "x-transfer-list-search-clear", onClick: () => this.handleClearSearch(direction) }, h("x-icon", { name: getIcon('clear') })))));
+        return (h("div", { class: "x-transfer-list-body-search-wrapper" }, h("input", { type: "text", class: "x-transfer-list-search", placeholder: this.searchPlaceholder, value: value, disabled: this.disabled, onInput: e => this.handleSearch(direction, e.target.value) }), value && (h("span", { class: "x-transfer-list-search-clear", onClick: () => this.handleClearSearch(direction) }, h("x-icon", { name: getIcon('clear') })))));
     }
     /**
      * Render pagination controls.
@@ -408,7 +407,7 @@ export class XTransfer {
                 'x-transfer-list-header-checkbox': true,
                 'x-transfer-list-header-checkbox-checked': isAllChecked,
                 'x-transfer-list-header-checkbox-indeterminate': isIndeterminate,
-            }, onClick: () => this.handleSelectAll(direction) }, h("span", { class: "x-transfer-checkbox-inner" }))), h("span", { class: "x-transfer-list-header-title" }, selectedCount > 0 && h("span", { class: "x-transfer-list-header-selected" }, selectedCount, "/"), filteredItems.length, " ", title)), this.renderSearch(direction), h("ul", { class: "x-transfer-list-content", onScroll: (e) => this.handleScroll(direction, e) }, pagedItems.length === 0 ? (h("li", { class: "x-transfer-list-content-empty" }, h("x-empty", { description: this.notFoundContent }))) : (pagedItems.map(item => {
+            }, onClick: () => this.handleSelectAll(direction) }, h("span", { class: "x-transfer-checkbox-inner" }))), h("span", { class: "x-transfer-list-header-title" }, selectedCount > 0 && h("span", { class: "x-transfer-list-header-selected" }, selectedCount, "/"), filteredItems.length, " ", title)), this.renderSearch(direction), h("ul", { class: "x-transfer-list-content", onScroll: e => this.handleScroll(direction, e) }, pagedItems.length === 0 ? (h("li", { class: "x-transfer-list-content-empty" }, h("x-empty", { description: this.notFoundContent }))) : (pagedItems.map(item => {
             const checked = this.selectedKeys.includes(item.key);
             const itemDisabled = item.disabled || this.disabled;
             return (h("li", { class: {
@@ -419,13 +418,14 @@ export class XTransfer {
                     'x-transfer-checkbox': true,
                     'x-transfer-checkbox-checked': checked,
                     'x-transfer-checkbox-disabled': itemDisabled,
-                } }, h("span", { class: "x-transfer-checkbox-inner" })), h("span", { class: "x-transfer-list-content-item-text" }, item.title, item.description && (h("span", { class: "x-transfer-list-content-item-description" }, item.description))), this.oneWay && !isLeft && (h("span", { class: "x-transfer-list-content-item-remove", onClick: (e) => {
+                } }, h("span", { class: "x-transfer-checkbox-inner" })), h("span", { class: "x-transfer-list-content-item-text" }, item.title, item.description && h("span", { class: "x-transfer-list-content-item-description" }, item.description)), this.oneWay && !isLeft && (h("span", { class: "x-transfer-list-content-item-remove", onClick: e => {
                     e.stopPropagation();
                     this.targetKeys = this.targetKeys.filter(k => k !== item.key);
                     this.xChange.emit({
+                        value: this.targetKeys,
                         targetKeys: this.targetKeys,
                         direction: 'left',
-                        moveKeys: [item.key]
+                        moveKeys: [item.key],
                     });
                 } }, h("x-icon", { name: getIcon('delete') })))));
         }))), this.renderPagination(direction, filteredItems.length)));
@@ -472,7 +472,7 @@ export class XTransfer {
      * @returns JSX.Element
      */
     render() {
-        return (h(Host, { key: 'bf4d435040edf41ca00174e66584923041552230', class: {
+        return (h(Host, { key: '2f70458cba3b4d5a43748547e8370ce4604c70a5', class: {
                 'x-transfer': true,
                 'x-transfer-disabled': this.disabled,
             } }, this.renderList('left'), this.renderOperations(), this.renderList('right')));

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

@@ -446,7 +446,7 @@ export class XTree {
                 this.xLoadData.emit({
                     expandedKeys: this.internalExpandedKeys,
                     node,
-                    expanded: true
+                    expanded: true,
                 });
             }
         }
@@ -511,7 +511,7 @@ export class XTree {
             checkedKeys: this.internalCheckedKeys,
             node,
             checked,
-            halfCheckedKeys: this.halfCheckedKeys
+            halfCheckedKeys: this.halfCheckedKeys,
         });
     }
     /**
@@ -527,7 +527,7 @@ export class XTree {
         e.stopPropagation();
         this.xDragStart.emit({
             node,
-            nativeEvent: e
+            nativeEvent: e,
         });
     }
     /**
@@ -541,7 +541,7 @@ export class XTree {
         this.dragOverNodeKey = node.key;
         this.xDragEnter.emit({
             node,
-            nativeEvent: e
+            nativeEvent: e,
         });
     }
     /**
@@ -554,7 +554,7 @@ export class XTree {
         e.stopPropagation();
         this.xDragOver.emit({
             node,
-            nativeEvent: e
+            nativeEvent: e,
         });
     }
     /**
@@ -566,7 +566,7 @@ export class XTree {
         e.stopPropagation();
         this.xDragLeave.emit({
             node,
-            nativeEvent: e
+            nativeEvent: e,
         });
     }
     /**
@@ -579,7 +579,7 @@ export class XTree {
         this.dragOverNodeKey = null;
         this.xDragEnd.emit({
             node,
-            nativeEvent: e
+            nativeEvent: e,
         });
     }
     /**
@@ -593,7 +593,7 @@ export class XTree {
         this.dragOverNodeKey = null;
         this.xDrop.emit({
             node,
-            nativeEvent: e
+            nativeEvent: e,
         });
     }
     /**
@@ -705,7 +705,7 @@ export class XTree {
                 return (h("span", { class: {
                         'x-tree-switcher': true,
                         'x-tree-switcher-leaf-line': true,
-                        'x-tree-switcher-leaf-line-last': isLast
+                        'x-tree-switcher-leaf-line-last': isLast,
                     } }, h("span", { class: "x-tree-switcher-leaf-line-icon" })));
             }
             return h("span", { class: "x-tree-switcher x-tree-switcher-leaf" });
@@ -715,7 +715,7 @@ export class XTree {
                 'x-tree-switcher-open': expanded,
                 'x-tree-switcher-close': !expanded,
                 'x-tree-switcher-last': isLast,
-            }, onClick: (e) => this.handleExpand(node, e) }, h("span", { class: "x-tree-switcher-icon" }, h("x-icon", { name: getIcon('arrowDown') }))));
+            }, onClick: e => this.handleExpand(node, e) }, h("span", { class: "x-tree-switcher-icon" }, h("x-icon", { name: getIcon('arrowDown') }))));
     }
     /**
      * Render the checkbox for a node.
@@ -735,7 +735,7 @@ export class XTree {
                 'x-tree-checkbox-checked': checked,
                 'x-tree-checkbox-indeterminate': halfChecked && !checked,
                 'x-tree-checkbox-disabled': disabled,
-            }, onClick: (e) => !disabled && this.handleCheck(node, e) }, h("span", { class: "x-tree-checkbox-inner" })));
+            }, onClick: e => !disabled && this.handleCheck(node, e) }, h("span", { class: "x-tree-checkbox-inner" })));
     }
     /**
      * Render the node icon.
@@ -745,7 +745,7 @@ export class XTree {
     renderIcon(node) {
         if (!this.showIcon && !node.icon)
             return null;
-        return (h("span", { class: "x-tree-iconEle" }, node.icon ? h("x-icon", { name: node.icon }) : h("x-icon", { name: getIcon('file') })));
+        return h("span", { class: "x-tree-iconEle" }, node.icon ? h("x-icon", { name: node.icon }) : h("x-icon", { name: getIcon('file') }));
     }
     /**
      * Render a single tree node row.
@@ -776,11 +776,11 @@ export class XTree {
                 'x-tree-treenode-leaf': !hasChildren,
                 'x-tree-treenode-drag-over': this.dragOverNodeKey === node.key,
                 'x-tree-treenode-focused': this.focusedKey === node.key,
-            }, draggable: this.allowDrag && !isDisabled, role: "treeitem", "aria-selected": selected ? 'true' : 'false', "aria-expanded": hasChildren ? (expanded ? 'true' : 'false') : null, "aria-level": level + 1, "aria-disabled": isDisabled ? 'true' : 'false', tabindex: this.focusedKey === node.key ? 0 : -1, onClick: (e) => {
+            }, draggable: this.allowDrag && !isDisabled, role: "treeitem", "aria-selected": selected ? 'true' : 'false', "aria-expanded": hasChildren ? (expanded ? 'true' : 'false') : null, "aria-level": level + 1, "aria-disabled": isDisabled ? 'true' : 'false', tabindex: this.focusedKey === node.key ? 0 : -1, onClick: e => {
                 this.focusedKey = node.key;
                 // Native click will handle selection
                 console.log(e);
-            }, onKeyDown: (e) => this.handleKeyDown(e), onDragStart: (e) => this.handleDragStart(node, e), onDragEnter: (e) => this.handleDragEnter(node, e), onDragOver: (e) => this.handleDragOver(node, e), onDragLeave: (e) => this.handleDragLeave(node, e), onDragEnd: (e) => this.handleDragEnd(node, e), onDrop: (e) => this.handleDrop(node, e) }, Array.from({ length: level }).map((_, i) => (h("span", { key: `indent-${i}`, class: {
+            }, onKeyDown: e => this.handleKeyDown(e), onDragStart: e => this.handleDragStart(node, e), onDragEnter: e => this.handleDragEnter(node, e), onDragOver: e => this.handleDragOver(node, e), onDragLeave: e => this.handleDragLeave(node, e), onDragEnd: e => this.handleDragEnd(node, e), onDrop: e => this.handleDrop(node, e) }, Array.from({ length: level }).map((_, i) => (h("span", { key: `indent-${i}`, class: {
                 'x-tree-indent-unit': true,
                 'x-tree-indent-unit-start': i === 0,
                 'x-tree-indent-unit-end': parentChain[i],
@@ -789,7 +789,7 @@ export class XTree {
                 'x-tree-node-content-wrapper-open': expanded,
                 'x-tree-node-content-wrapper-close': !expanded && hasChildren,
                 'x-tree-node-selected': selected,
-            }, onClick: (e) => this.handleSelect(node, e) }, this.renderIcon(node), h("span", { class: "x-tree-title" }, node.title), this.renderActions(node))));
+            }, onClick: e => this.handleSelect(node, e) }, this.renderIcon(node), h("span", { class: "x-tree-title" }, node.title), this.renderActions(node))));
     }
     /**
      * Render custom actions for a tree node.
@@ -807,13 +807,13 @@ export class XTree {
         return (h("span", { class: {
                 'x-tree-actions': true,
                 'x-tree-actions-hover': showActions === 'hover',
-            }, onClick: (e) => e.stopPropagation() }, actions.map(action => {
+            }, onClick: e => e.stopPropagation() }, actions.map(action => {
             const hasChildren = action.children && action.children.length > 0;
             const actionContent = (h("span", { class: {
                     'x-tree-action-item': true,
                     'x-tree-action-item-disabled': action.disabled,
                     'x-tree-action-item-danger': action.danger,
-                }, title: action.label, onClick: (e) => {
+                }, title: action.label, onClick: e => {
                     if (!hasChildren) {
                         if (!action.disabled) {
                             this.xAction.emit({ action, node });
@@ -822,7 +822,7 @@ export class XTree {
                     }
                 } }, action.icon && h("x-icon", { name: action.icon }), !action.icon && action.label && h("span", null, action.label)));
             if (hasChildren && !action.disabled) {
-                return (h("x-dropdown", { menu: { items: action.children }, trigger: "click", onXMenuClick: (e) => {
+                return (h("x-dropdown", { menu: { items: action.children }, trigger: "click", onXMenuClick: e => {
                         this.xAction.emit({ action: e.detail.item, node });
                     } }, actionContent));
             }
@@ -874,28 +874,27 @@ export class XTree {
             const flattened = this.flattenedNodes;
             const totalHeight = flattened.length * this.itemHeight;
             const startIndex = Math.max(0, Math.floor(this.scrollTop / this.itemHeight) - 5); // buffer 5
-            const endIndex = Math.min(flattened.length - 1, Math.ceil((this.scrollTop + this.height) / this.itemHeight) + 5 // buffer 5
-            );
+            const endIndex = Math.min(flattened.length - 1, Math.ceil((this.scrollTop + this.height) / this.itemHeight) + 5);
             const visibleItems = flattened.slice(startIndex, endIndex + 1);
             const offsetY = startIndex * this.itemHeight;
-            content = (h("div", { key: 'df4416972cd0e0909034b5fda7eea292c2f0820c', class: "x-tree-virtual-holder", style: { height: `${this.height}px`, overflow: 'auto', position: 'relative' }, onScroll: this.handleScroll }, h("div", { key: '2d3e1aa6d2190030de99f367684b438745136765', style: { height: `${totalHeight}px`, position: 'relative' } }, h("div", { key: '5e06ecc42b061f269d8bc962279d96469bb4822a', style: {
+            content = (h("div", { key: 'a5bbb38ef4185d1b4ab8a2d7316d37ed002f9f4a', class: "x-tree-virtual-holder", style: { height: `${this.height}px`, overflow: 'auto', position: 'relative' }, onScroll: this.handleScroll }, h("div", { key: '99d9a96622c0d31d96dc6d306366ec79aa8ba6ef', style: { height: `${totalHeight}px`, position: 'relative' } }, h("div", { key: '72ee8d09cfab55704e5b8cca82674d7c0e8d05b1', style: {
                     transform: `translateY(${offsetY}px)`,
                     position: 'absolute',
                     top: '0',
                     left: '0',
-                    right: '0'
+                    right: '0',
                 } }, visibleItems.map(item => this.renderTreeNode(item.node, item.level, item.parentChain, item.isLast))))));
         }
         else {
-            content = (h("div", { key: '95e6a1e97b1d9f27a5d201e46ad933705e2fe29b', class: "x-tree-list-holder" }, h("div", { key: 'ba66d45c266bc8ab9e15322eeda386fdfa2fac5c', class: "x-tree-list-holder-inner" }, this.renderTreeNodes(this.treeData))));
+            content = (h("div", { key: 'f9254f8d0db40458c2c29e6e376564fb760e9bd8', class: "x-tree-list-holder" }, h("div", { key: '7a5dccc6358a7e95fbdf92045ea14a6e6171e124', class: "x-tree-list-holder-inner" }, this.renderTreeNodes(this.treeData))));
         }
-        return (h(Host, { key: '321dd6c5185aa80c17d6c1a46701aee79101d567', class: {
+        return (h(Host, { key: '1f80b5c75be991be3c1f28659761d3f4863c87ba', class: {
                 'x-tree': true,
                 'x-tree-show-line': this.showLine,
                 'x-tree-icon-hide': !this.showIcon,
                 'x-tree-block-node': this.blockNode,
                 'x-tree-directory': false,
-            } }, h("div", { key: 'd0dc97d35b527725dc7f991f1742019c76f7944f', class: "x-tree-list", role: "tree" }, content)));
+            } }, h("div", { key: '9a26ac6ca19686dedd63a0cf054564e4ea6dc218', class: "x-tree-list", role: "tree" }, content)));
     }
     static get is() { return "x-tree"; }
     static get encapsulation() { return "shadow"; }
@@ -1428,7 +1427,7 @@ export class XTree {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Custom actions for all nodes (right side)\r\nIf a node has its own actions, they will take priority."
+                    "text": "Custom actions for all nodes (right side)\nIf a node has its own actions, they will take priority."
                 },
                 "getter": false,
                 "setter": false

package/dist/collection/components/x-tree-select/tree-select-dropdown-content/tree-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;

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

@@ -323,7 +323,7 @@ export class XTreeSelectDropdownContent {
         for (let i = 0; i < level; i++) {
             indentUnits.push(h("span", { class: "x-tree-indent-unit", key: i }));
         }
-        return (h("span", { class: "x-tree-indent" }, indentUnits));
+        return h("span", { class: "x-tree-indent" }, indentUnits);
     }
     /**
      * Render expand/collapse switcher.
@@ -339,7 +339,7 @@ export class XTreeSelectDropdownContent {
             'x-tree-switcher-close': hasChildNodes && !isExpanded,
             'x-tree-switcher-leaf': !hasChildNodes,
         };
-        return (h("span", { class: switcherClasses, onClick: (e) => hasChildNodes && this.handleNodeExpand(node, e) }, h("span", { class: "x-tree-switcher-icon" }, h("x-icon", { name: getIcon('arrowRight') }))));
+        return (h("span", { class: switcherClasses, onClick: e => hasChildNodes && this.handleNodeExpand(node, e) }, h("span", { class: "x-tree-switcher-icon" }, h("x-icon", { name: getIcon('arrowRight') }))));
     }
     /**
      * Render checkbox for treeCheckable mode.
@@ -356,7 +356,7 @@ export class XTreeSelectDropdownContent {
             'x-tree-checkbox-indeterminate': !isChecked && isHalfChecked,
             'x-tree-checkbox-disabled': isDisabled,
         };
-        return (h("span", { class: checkboxClasses, onClick: (e) => this.handleNodeCheck(node, e) }, h("span", { class: "x-tree-checkbox-inner" })));
+        return (h("span", { class: checkboxClasses, onClick: e => this.handleNodeCheck(node, e) }, h("span", { class: "x-tree-checkbox-inner" })));
     }
     /**
      * Render node title and optional icon.
@@ -365,7 +365,7 @@ export class XTreeSelectDropdownContent {
      */
     renderNodeContent(node) {
         const title = this.getNodeTitle(node);
-        return (h("span", { class: "x-tree-node-content-wrapper" }, node.icon && (h("span", { class: "x-tree-iconEle", innerHTML: node.icon })), h("span", { class: "x-tree-title" }, title)));
+        return (h("span", { class: "x-tree-node-content-wrapper" }, node.icon && h("span", { class: "x-tree-iconEle", innerHTML: node.icon }), h("span", { class: "x-tree-title" }, title)));
     }
     /**
      * Render a tree node and its children.
@@ -390,7 +390,7 @@ export class XTreeSelectDropdownContent {
             'x-tree-treenode-selected': !this.treeCheckable && isSelected,
             'x-tree-treenode-checked': this.treeCheckable && isChecked,
         };
-        return (h("div", { class: "x-tree-treenode-wrapper", key: nodeKey }, h("div", { class: nodeClasses, onClick: (e) => !this.treeCheckable && this.handleNodeClick(node, e) }, this.renderIndent(level), this.renderSwitcher(node), this.treeCheckable && this.renderCheckbox(node), this.renderNodeContent(node)), hasChildNodes && isExpanded && children && (h("div", { class: "x-tree-child-tree" }, children.map(child => this.renderTreeNode(child, level + 1))))));
+        return (h("div", { class: "x-tree-treenode-wrapper", key: nodeKey }, h("div", { class: nodeClasses, onClick: e => !this.treeCheckable && this.handleNodeClick(node, e) }, this.renderIndent(level), this.renderSwitcher(node), this.treeCheckable && this.renderCheckbox(node), this.renderNodeContent(node)), hasChildNodes && isExpanded && children && h("div", { class: "x-tree-child-tree" }, children.map(child => this.renderTreeNode(child, level + 1)))));
     }
     /**
      * Render tree nodes recursively.
@@ -426,7 +426,7 @@ export class XTreeSelectDropdownContent {
             'x-tree-select-tree': true,
             'x-tree-line': this.treeLine,
         };
-        return (h("div", { key: 'baab5dc7e243c61b783e67cd5452279720c25feb', class: this.dropdownClasses, style: this.dropdownStyle, ref: this.setRef, part: "dropdown" }, !hasVisibleData ? (this.renderEmpty()) : (h("div", { class: treeClasses }, this.renderTree(this.treeData)))));
+        return (h("div", { key: '369cf93a2576672a749e93b62fe61e7c7136ab9d', class: this.dropdownClasses, style: this.dropdownStyle, ref: this.setRef, part: "dropdown" }, !hasVisibleData ? this.renderEmpty() : h("div", { class: treeClasses }, this.renderTree(this.treeData))));
     }
     static get is() { return "x-tree-select-dropdown-content"; }
     static get originalStyleUrls() {