@xlabs-store/core 0.0.1 → 0.0.2

package/dist/collection/components/x-auto-complete/x-auto-complete.css

@@ -105,6 +105,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;
@@ -147,8 +148,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-auto-complete/x-auto-complete.js

@@ -1,6 +1,6 @@
-import { Host, h, } from "@stencil/core";
+import { Host, h } from "@stencil/core";
 import { PortalController } from "../x-portal";
-import { isOptionGroup, flattenOptions, filterOptions, getOptionLabel, getOptionKey, } from "./types";
+import { isOptionGroup, flattenOptions, filterOptions, getOptionLabel, getOptionKey } from "./types";
 import { getIcon } from "../../utils/config";
 /**
  * AutoComplete Component - Following Ant Design Specification
@@ -163,6 +163,12 @@ export class XAutoComplete {
      * <x-auto-complete styles={{ root: { minWidth: '200px' } }}></x-auto-complete>
      */
     styles;
+    /**
+     * Whether the dropdown menu opens when clicked or focused.
+     * @example
+     * <x-auto-complete openOnFocus></x-auto-complete>
+     */
+    openOnFocus = false;
     // ==================== Events ====================
     /**
      * Called when leaving the input field.
@@ -354,13 +360,11 @@ export class XAutoComplete {
     handleWindowClick(ev) {
         if (!this.isOpen)
             return;
-        const target = ev.target;
-        // Check if click is inside component
-        if (this.el.contains(target))
-            return;
-        // Check if click is inside portal dropdown
+        const path = ev.composedPath();
+        const isInsideComponent = path.includes(this.el);
         const portalEl = this.portalInstance?.getElement?.();
-        if (portalEl?.contains(target))
+        const isInsidePortal = portalEl ? path.includes(portalEl) : false;
+        if (isInsideComponent || isInsidePortal)
             return;
         this.closeDropdown();
     }
@@ -433,7 +437,7 @@ export class XAutoComplete {
         let opts = this.options;
         console.log('[x-auto-complete] syncOptions called', {
             options: this.options,
-            type: typeof this.options
+            type: typeof this.options,
         });
         // Handle case when options is passed as JSON string via attribute
         if (typeof opts === 'string') {
@@ -469,7 +473,7 @@ export class XAutoComplete {
         console.log('[x-auto-complete] openDropdown called', {
             disabled: this.disabled,
             isOpen: this.isOpen,
-            filteredOptions: this.filteredOptions
+            filteredOptions: this.filteredOptions,
         });
         if (this.disabled || this.isOpen)
             return;
@@ -586,7 +590,10 @@ export class XAutoComplete {
         if (this.disabled)
             return;
         this.inputRef?.focus();
-        // Don't toggle here, let handleInputFocus handle opening
+        // If openOnFocus is enabled and there are options, open dropdown on click
+        if (this.openOnFocus && !this.isOpen && (this.filteredOptions.length > 0 || this.internalOptions.length > 0)) {
+            this.openDropdown();
+        }
     };
     /**
      * Handle input focus.
@@ -596,8 +603,8 @@ export class XAutoComplete {
     handleInputFocus = (e) => {
         this.focused = true;
         this.xFocus.emit(e);
-        // Only open on focus if defaultOpen is true and there are options
-        if (this.defaultOpen && (this.filteredOptions.length > 0 || this.internalOptions.length > 0)) {
+        // Only open on focus if defaultOpen or openOnFocus is true and there are options
+        if ((this.defaultOpen || this.openOnFocus) && (this.filteredOptions.length > 0 || this.internalOptions.length > 0)) {
             this.openDropdown();
         }
     };
@@ -749,11 +756,9 @@ export class XAutoComplete {
     createOptionElement(option, index) {
         const isActive = index === this.activeIndex;
         const optionEl = document.createElement('div');
-        optionEl.className = [
-            'x-auto-complete-option',
-            isActive ? 'x-auto-complete-option-active' : '',
-            option.disabled ? 'x-auto-complete-option-disabled' : '',
-        ].filter(Boolean).join(' ');
+        optionEl.className = ['x-auto-complete-option', isActive ? 'x-auto-complete-option-active' : '', option.disabled ? 'x-auto-complete-option-disabled' : '']
+            .filter(Boolean)
+            .join(' ');
         optionEl.setAttribute('role', 'option');
         optionEl.setAttribute('aria-disabled', String(!!option.disabled));
         optionEl.setAttribute('data-value', String(option.value));
@@ -762,7 +767,7 @@ export class XAutoComplete {
         contentSpan.textContent = getOptionLabel(option);
         optionEl.appendChild(contentSpan);
         // Click handler
-        optionEl.addEventListener('click', (e) => {
+        optionEl.addEventListener('click', e => {
             e.preventDefault();
             e.stopPropagation();
             this.handleOptionClick(option);
@@ -788,7 +793,7 @@ export class XAutoComplete {
                 groupEl.appendChild(groupLabel);
                 // Render group options
                 for (const groupOption of opt.options) {
-                    const isFiltered = filteredOptions.some((fo) => getOptionKey(fo) === getOptionKey(groupOption));
+                    const isFiltered = filteredOptions.some(fo => getOptionKey(fo) === getOptionKey(groupOption));
                     if (!isFiltered)
                         continue;
                     const optionEl = this.createOptionElement(groupOption, globalIndex);
@@ -802,7 +807,7 @@ export class XAutoComplete {
                 }
             }
             else {
-                const isFiltered = filteredOptions.some((fo) => getOptionKey(fo) === getOptionKey(opt));
+                const isFiltered = filteredOptions.some(fo => getOptionKey(fo) === getOptionKey(opt));
                 if (!isFiltered)
                     continue;
                 const optionEl = this.createOptionElement(opt, globalIndex);
@@ -821,7 +826,7 @@ export class XAutoComplete {
             internalOpen: this.internalOpen,
             filteredOptionsLength: this.filteredOptions.length,
             notFoundContent: this.notFoundContent,
-            wrapperRef: !!this.wrapperRef
+            wrapperRef: !!this.wrapperRef,
         });
         // Close portal if not open, or if no options available at all
         if (!this.isOpen || this.internalOptions.length === 0) {
@@ -886,7 +891,7 @@ export class XAutoComplete {
     renderSuffix() {
         if (!this.suffixIcon && !this.allowClear)
             return null;
-        return (h("span", { class: "x-auto-complete-suffix", part: "suffix" }, this.renderClearIcon(), this.suffixIcon && !this.hasValue && (h("x-icon", { name: this.suffixIcon }))));
+        return (h("span", { class: "x-auto-complete-suffix", part: "suffix" }, this.renderClearIcon(), this.suffixIcon && !this.hasValue && h("x-icon", { name: this.suffixIcon })));
     }
     /**
      * Render autocomplete input and suffix/prefix.
@@ -908,9 +913,8 @@ export class XAutoComplete {
             'x-auto-complete-wrapper': true,
             'x-auto-complete-wrapper-disabled': this.disabled,
             'x-auto-complete-wrapper-focused': this.focused,
-            'disabled': this.disabled,
         };
-        return (h(Host, { key: 'e4efb8a025cb43b6aea230ca5af35cf842f8fce0', class: hostClasses, style: this.styles?.root }, h("div", { key: '9176bedb4795fb7f2bcdc03f1da19009459be3e8', class: wrapperClasses, part: "wrapper", ref: (el) => (this.wrapperRef = el), onClick: this.handleWrapperClick }, this.renderPrefix(), h("input", { key: 'd8d240696400f6b93374d248c12cdfc40047bba0', ref: (el) => (this.inputRef = el), class: {
+        return (h(Host, { key: 'fe89a005d50a75fcada78d01ac7e55d3b4afa7b0', class: hostClasses, style: this.styles?.root }, h("div", { key: 'd77dbaf392b2323baf913efe94a436b08c1af4fa', class: wrapperClasses, part: "wrapper", ref: el => (this.wrapperRef = el), onClick: this.handleWrapperClick }, this.renderPrefix(), h("input", { key: 'a4b600cd41e261d1bf268fa81126fbd0f8e1327c', ref: el => (this.inputRef = el), class: {
                 'x-auto-complete-input': true,
                 [this.classNames?.input || '']: !!this.classNames?.input,
             }, style: this.styles?.input, part: "input", type: "text", autocomplete: "off", role: "combobox", "aria-haspopup": "listbox", "aria-expanded": String(this.isOpen), "aria-autocomplete": "list", disabled: this.disabled, placeholder: this.placeholder, value: this.searchValue, onFocus: this.handleInputFocus, onBlur: this.handleInputBlur, onInput: this.handleInput }), this.renderSuffix())));
@@ -1520,6 +1524,29 @@ export class XAutoComplete {
                 },
                 "getter": false,
                 "setter": false
+            },
+            "openOnFocus": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-auto-complete openOnFocus></x-auto-complete>"
+                        }],
+                    "text": "Whether the dropdown menu opens when clicked or focused."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "open-on-focus",
+                "defaultValue": "false"
             }
         };
     }

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

@@ -42,9 +42,9 @@ export class XAvatar {
      */
     alt = '';
     /**
-     * Icon type (for icon avatar, use slot="icon" instead).
+     * Icon name to display inside the avatar.
      * @example
-     * <x-avatar icon="user"><x-icon slot="icon" name="user"></x-icon></x-avatar>
+     * <x-avatar icon="user"></x-avatar>
      */
     icon;
     /**
@@ -80,6 +80,9 @@ export class XAvatar {
      * Whether component is mounted to allow measurements.
      */
     mounted = false;
+    handleSrcChange() {
+        this.isImgExist = true;
+    }
     /**
      * Text element reference used for measuring width.
      */
@@ -218,9 +221,9 @@ export class XAvatar {
         if (this.src && this.isImgExist) {
             return (h("img", { class: "x-avatar-image", src: this.src, srcSet: this.srcSet, alt: this.alt, draggable: this.imgDraggable, crossOrigin: this.crossOrigin || undefined, onError: this.handleImgLoadError }));
         }
-        // Icon avatar (via slot)
-        if (this.icon) {
-            return (h("span", { class: "x-avatar-icon" }, h("slot", { name: "icon" })));
+        // Icon avatar (via slot or prop)
+        if (this.icon || this.el.querySelector('[slot="icon"]')) {
+            return (h("span", { class: "x-avatar-icon" }, this.icon ? h("x-icon", { name: this.icon }) : h("slot", { name: "icon" })));
         }
         // Text/Letter avatar
         const textStyle = {};
@@ -232,7 +235,7 @@ export class XAvatar {
             textStyle.transformOrigin = '0 center';
             textStyle.marginLeft = `-${Math.round((this.textRef?.offsetWidth || 0) / 2)}px`;
         }
-        return (h("span", { class: "x-avatar-string", ref: (el) => (this.textRef = el), style: textStyle }, h("slot", null)));
+        return (h("span", { class: "x-avatar-string", ref: el => (this.textRef = el), style: textStyle }, h("slot", null)));
     }
     /**
      * Build host class map based on size, shape, and content type.
@@ -243,7 +246,7 @@ export class XAvatar {
     getHostClasses() {
         const sizeClass = this.getSizeClass();
         const hasImage = this.src && this.isImgExist;
-        const hasIcon = !!this.icon;
+        const hasIcon = !!this.icon || !!this.el.querySelector('[slot="icon"]');
         return {
             'x-avatar': true,
             [`x-avatar-${this.shape}`]: true,
@@ -259,7 +262,7 @@ export class XAvatar {
      * <x-avatar size={40}>AB</x-avatar>
      */
     render() {
-        return (h(Host, { key: 'f4ec3bed6c5f9e11b1c603da7b22db56462abe5d', class: this.getHostClasses(), style: this.getSizeStyle() }, this.renderContent()));
+        return (h(Host, { key: '1efb52801b4a9ffa4ef0f8cfaf5a9a82eddbab94', class: this.getHostClasses(), style: this.getSizeStyle() }, this.renderContent()));
     }
     static get is() { return "x-avatar"; }
     static get encapsulation() { return "shadow"; }
@@ -398,7 +401,7 @@ export class XAvatar {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "alt",
                 "defaultValue": "''"
             },
@@ -415,13 +418,13 @@ export class XAvatar {
                 "docs": {
                     "tags": [{
                             "name": "example",
-                            "text": "<x-avatar icon=\"user\"><x-icon slot=\"icon\" name=\"user\"></x-icon></x-avatar>"
+                            "text": "<x-avatar icon=\"user\"></x-avatar>"
                         }],
-                    "text": "Icon type (for icon avatar, use slot=\"icon\" instead)."
+                    "text": "Icon name to display inside the avatar."
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "icon"
             },
             "gap": {
@@ -466,7 +469,7 @@ export class XAvatar {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "img-draggable",
                 "defaultValue": "true"
             },
@@ -489,7 +492,7 @@ export class XAvatar {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "cross-origin"
             }
         };
@@ -530,4 +533,10 @@ export class XAvatar {
             }];
     }
     static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "src",
+                "methodName": "handleSrcChange"
+            }];
+    }
 }

package/dist/collection/components/x-back-top/x-back-top.js

@@ -63,7 +63,7 @@ export class XBackTop {
     scrollToTop() {
         window.scrollTo({
             top: 0,
-            behavior: 'smooth'
+            behavior: 'smooth',
         });
     }
     /**
@@ -73,10 +73,10 @@ export class XBackTop {
      * <x-back-top><span>Top</span></x-back-top>
      */
     render() {
-        return (h(Host, { key: '0014f1884f6dfae9f11f0afbd2e734ded3094d06', class: {
+        return (h(Host, { key: 'cecff0e7c05c272d0ed2e14a65c8b959e006da37', class: {
                 'x-back-top': true,
                 'x-back-top-visible': this.visible,
-            }, onClick: () => this.scrollToTop() }, h("div", { key: '5645a8759ce8c21df162006dd64d82b6eee951d2', class: "x-back-top-content" }, h("slot", { key: '9073f22954a5a3c9b386184c2df017d7a6e2699f' }, h("div", { key: 'd38d425542ec4a59ca712c8f92ba54f14635aad1', class: "x-back-top-icon" }, h("svg", { key: '4880a607c6dc42c7600ff1d89b7014fad3f9ba25', viewBox: "64 64 896 896", focusable: "false", "data-icon": "vertical-align-top", width: "1em", height: "1em", fill: "currentColor", "aria-hidden": "true" }, h("path", { key: 'ad194bce7bdfe5ba32c1dfae73260c840fb82bce', d: "M859.9 168H164.1c-4.5 0-8.1 3.6-8.1 8v60c0 4.4 3.6 8 8.1 8h695.8c4.5 0 8.1-3.6 8.1-8v-60c0-4.4-3.6-8-8.1-8zM518.3 555.9l187.6 233.1c5.2 6.5 3.5 16.3-3.9 20.4l-49.4 27.3c-6.2 3.4-13.9 1.8-18-4.1L512 634.1 389.4 832.6c-4.1 5.9-11.8 7.5-18 4.1l-49.4-27.3c-7.4-4.1-9.1-13.9-3.9-20.4l187.6-233.1c7.5-9.4 22.5-9.4 30 0z" }), h("path", { key: 'e50e348256ac30bc7692d25208c4099950d486e3', d: "M512 320c-4.4 0-8 3.6-8 8v480c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V328c0-4.4-3.6-8-8-8h-48z" })))))));
+            }, onClick: () => this.scrollToTop() }, h("div", { key: 'a13ea09092312a75dfb560beaf149c062abe3d8e', class: "x-back-top-content" }, h("slot", { key: 'a2c477317092e2a7120f3d710138921c37074cef' }, h("div", { key: 'f57ca99cd344f2c652a3e8455decec9e1e5008fe', class: "x-back-top-icon" }, h("svg", { key: '3030ed6d655692c44744964a25bc88c4186a4ea5', viewBox: "64 64 896 896", focusable: "false", "data-icon": "vertical-align-top", width: "1em", height: "1em", fill: "currentColor", "aria-hidden": "true" }, h("path", { key: '0fd433153d52df340257274075f378d50ccd338a', d: "M859.9 168H164.1c-4.5 0-8.1 3.6-8.1 8v60c0 4.4 3.6 8 8.1 8h695.8c4.5 0 8.1-3.6 8.1-8v-60c0-4.4-3.6-8-8.1-8zM518.3 555.9l187.6 233.1c5.2 6.5 3.5 16.3-3.9 20.4l-49.4 27.3c-6.2 3.4-13.9 1.8-18-4.1L512 634.1 389.4 832.6c-4.1 5.9-11.8 7.5-18 4.1l-49.4-27.3c-7.4-4.1-9.1-13.9-3.9-20.4l187.6-233.1c7.5-9.4 22.5-9.4 30 0z" }), h("path", { key: '9c13dfe777e30b6b551adf0c6dc7c6a40a4dbf97', d: "M512 320c-4.4 0-8 3.6-8 8v480c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V328c0-4.4-3.6-8-8-8h-48z" })))))));
     }
     static get is() { return "x-back-top"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,8 +1,5 @@
 import { Host, h } from "@stencil/core";
-const PRESET_COLORS = [
-    'pink', 'red', 'yellow', 'orange', 'cyan', 'green', 'blue', 'purple',
-    'geekblue', 'magenta', 'volcano', 'gold', 'lime'
-];
+const PRESET_COLORS = ['pink', 'red', 'yellow', 'orange', 'cyan', 'green', 'blue', 'purple', 'geekblue', 'magenta', 'volcano', 'gold', 'lime'];
 /**
  * Badge component for counts, dots, and status indicators.
  */
@@ -120,8 +117,7 @@ export class XBadge {
         if (slot) {
             const assignedNodes = slot.assignedNodes({ flatten: true });
             // Consider both element nodes and non-empty text nodes.
-            this.hasChildren = assignedNodes.some(node => node.nodeType === Node.ELEMENT_NODE ||
-                (node.nodeType === Node.TEXT_NODE && node.textContent?.trim()));
+            this.hasChildren = assignedNodes.some(node => node.nodeType === Node.ELEMENT_NODE || (node.nodeType === Node.TEXT_NODE && node.textContent?.trim()));
         }
         else {
             // Fallback when slot is not yet available.
@@ -204,7 +200,7 @@ export class XBadge {
             return {};
         }
         return {
-            background: this.color,
+            'background': this.color,
             '--x-badge-color': this.color,
         };
     }

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

@@ -38,7 +38,7 @@ export class XBreadcrumb {
      */
     updateChildren() {
         const items = Array.from(this.el.querySelectorAll('x-breadcrumb-item'));
-        items.forEach((item) => {
+        items.forEach(item => {
             item.setAttribute('separator', this.separator);
         });
     }
@@ -51,7 +51,7 @@ export class XBreadcrumb {
      * </x-breadcrumb>
      */
     render() {
-        return (h(Host, { key: 'd322508c58f0734b461df2625af0a30d50d5f997' }, h("nav", { key: '824f4dcac24d36d69be0c8a494ca2dbd27579409', class: "x-breadcrumb" }, h("ol", { key: 'f3b2cc6bfa9054d9ee9542889ead708eeea883fb' }, h("slot", { key: '43bc2aa200f5f17d07747603282dd8e2210724ea', onSlotchange: () => this.updateChildren() })))));
+        return (h(Host, { key: '9563e87cd1fd5ac98b5fc6fbf3b0d88cce1718bb' }, h("nav", { key: '8dc25f45dd4ae991f4c94a3d83730fad564ba41a', class: "x-breadcrumb" }, h("ol", { key: 'fc77b989f1af0ce08772e0dd938cfaa6d9081188' }, h("slot", { key: '8ff1d20772c0baf960f7e43b73cb79514c3f0db3', onSlotchange: () => this.updateChildren() })))));
     }
     static get is() { return "x-breadcrumb"; }
     static get encapsulation() { return "shadow"; }
@@ -80,7 +80,7 @@ export class XBreadcrumb {
                 "docs": {
                     "tags": [{
                             "name": "example",
-                            "text": "<x-breadcrumb separator=\">\">\r\n  <x-breadcrumb-item>Home</x-breadcrumb-item>\r\n</x-breadcrumb>"
+                            "text": "<x-breadcrumb separator=\">\">\n  <x-breadcrumb-item>Home</x-breadcrumb-item>\n</x-breadcrumb>"
                         }],
                     "text": "Custom separator."
                 },

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

@@ -55,7 +55,7 @@ export class XBreadcrumbItem {
         const { href, separator } = this;
         // Choose anchor or span based on href availability.
         const content = href ? (h("a", { href: href, class: "x-breadcrumb-link", onClick: this.handleClick }, h("slot", null))) : (h("span", { class: "x-breadcrumb-link", onClick: this.handleClick }, h("slot", null)));
-        return (h(Host, { key: 'da628acfac30cbee80bb89eae77999ab3d0be409' }, h("li", { key: 'a9c2ad41cd165250e65de210a5ec0fc4a4c2edd7' }, content, h("span", { key: 'e9bfd86c1b1e59131005904ee80fd6fef79aac08', class: "x-breadcrumb-separator" }, separator))));
+        return (h(Host, { key: 'bfbf8af99887d25277f509786f2ba98cce8c6917' }, h("li", { key: 'dc34f414949a6ac1b111bd7db04c5f9781de9e08' }, content, h("span", { key: 'b46cbc9ac6c3177e6b621c9e5a1b059b8a747905', class: "x-breadcrumb-separator" }, separator))));
     }
     static get is() { return "x-breadcrumb-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -195,7 +195,7 @@ export class XButton {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "block",
                 "defaultValue": "false"
             },
@@ -299,7 +299,7 @@ export class XButton {
                     "references": {
                         "ButtonHTMLType": {
                             "location": "local",
-                            "path": "E:/projects/fintvn/labs/packages/core/src/components/x-button/x-button.tsx",
+                            "path": "/run/media/cpanel/volumes/projects/fintvn/labs/packages/core/src/components/x-button/x-button.tsx",
                             "id": "src/components/x-button/x-button.tsx::ButtonHTMLType"
                         }
                     }
@@ -351,7 +351,7 @@ export class XButton {
                     "references": {
                         "ButtonShape": {
                             "location": "local",
-                            "path": "E:/projects/fintvn/labs/packages/core/src/components/x-button/x-button.tsx",
+                            "path": "/run/media/cpanel/volumes/projects/fintvn/labs/packages/core/src/components/x-button/x-button.tsx",
                             "id": "src/components/x-button/x-button.tsx::ButtonShape"
                         }
                     }
@@ -361,7 +361,7 @@ export class XButton {
                 "docs": {
                     "tags": [{
                             "name": "example",
-                            "text": "<x-button shape=\"circle\" aria-label=\"Add\">\r\n  <x-icon name=\"add\"></x-icon>\r\n</x-button>"
+                            "text": "<x-button shape=\"circle\" aria-label=\"Add\">\n  <x-icon name=\"add\"></x-icon>\n</x-button>"
                         }],
                     "text": "Can be set to circle, round or omitted."
                 },
@@ -380,7 +380,7 @@ export class XButton {
                     "references": {
                         "ButtonSize": {
                             "location": "local",
-                            "path": "E:/projects/fintvn/labs/packages/core/src/components/x-button/x-button.tsx",
+                            "path": "/run/media/cpanel/volumes/projects/fintvn/labs/packages/core/src/components/x-button/x-button.tsx",
                             "id": "src/components/x-button/x-button.tsx::ButtonSize"
                         }
                     }
@@ -431,7 +431,7 @@ export class XButton {
                     "references": {
                         "ButtonType": {
                             "location": "local",
-                            "path": "E:/projects/fintvn/labs/packages/core/src/components/x-button/x-button.tsx",
+                            "path": "/run/media/cpanel/volumes/projects/fintvn/labs/packages/core/src/components/x-button/x-button.tsx",
                             "id": "src/components/x-button/x-button.tsx::ButtonType"
                         }
                     }
@@ -462,7 +462,7 @@ export class XButton {
         return [{
                 "method": "xClick",
                 "name": "xClick",
-                "bubbles": true,
+                "bubbles": false,
                 "cancelable": true,
                 "composed": true,
                 "docs": {

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

@@ -33,6 +33,10 @@ export class XCaptcha {
      * Whether the component is disabled.
      */
     disabled = false;
+    /**
+     * Whether to hide the internal error message display.
+     */
+    hideError = false;
     // ==================== State ====================
     /**
      * Current generated captcha value.
@@ -77,14 +81,10 @@ export class XCaptcha {
             return false;
         }
         // Match check
-        const match = this.caseSensitive
-            ? trimmedInput === this.captchaValue
-            : trimmedInput.toLowerCase() === this.captchaValue.toLowerCase();
+        const match = this.caseSensitive ? trimmedInput === this.captchaValue : trimmedInput.toLowerCase() === this.captchaValue.toLowerCase();
         if (!match) {
             this.errorMessage = this.error || this.message;
             this.xValidate.emit({ isValid: false, message: this.errorMessage });
-            // Optional: auto refresh on failure
-            this.refresh();
             return false;
         }
         this.errorMessage = '';
@@ -125,10 +125,10 @@ export class XCaptcha {
     };
     // ==================== Render ====================
     render() {
-        return (h(Host, { key: '1bd1fea59dfbec6d6b60d886391453b1b4f8f337', class: { 'x-captcha-disabled': this.disabled } }, h("div", { key: 'dd7a1285b87c0a3afc4c45b0f56273f7feda49f7', class: "x-captcha-container" }, this.label && h("label", { key: '0abc8c0f11cfd688eee69392234e0c496c075dc7', class: "x-captcha-label" }, this.label), h("div", { key: '47c98fec9069e62e9da19a92c3c5b7371fbcca31', class: "x-captcha-display-row" }, h("div", { key: '755f4e3d757279522f212dcfd1363993483c5bca', class: "x-captcha-box", onClick: () => !this.disabled && this.refresh(), title: "Click to refresh" }, this.captchaValue), h("button", { key: '57a3fa5ef45ee020f205241610dcd6d9d0760080', type: "button", class: "x-captcha-refresh-btn", onClick: () => !this.disabled && this.refresh(), disabled: this.disabled, title: "Refresh captcha" }, "\u21BB")), h("div", { key: '6f068925a07edf8aa8cf5ce6d9678772ad699eb0', class: "x-captcha-input-container" }, h("input", { key: '0ded3402d561f93ede0a29c399febce9104db817', type: "text", class: {
+        return (h(Host, { key: 'b2d5f97dafd9602e22750fba0179a41df12eee91', class: { 'x-captcha-disabled': this.disabled } }, h("div", { key: '8c009e4556d4a0ff62628340156f2390f7facb86', class: "x-captcha-container" }, this.label && h("label", { key: '4ce36d65cdf6c449296578a90e827a6a6fa8a06e', class: "x-captcha-label" }, this.label), h("div", { key: 'c4af38fa373f8819420cdabcea6e257e364dda6c', class: "x-captcha-display-row" }, h("div", { key: '0c8aed25b3938de176955951f324b2172ff8f0fb', class: "x-captcha-box", onClick: () => !this.disabled && this.refresh(), title: "Click to refresh" }, this.captchaValue), h("button", { key: 'c20a79d5cb75fd381fc09b7c4fa9e11703b682cd', type: "button", class: "x-captcha-refresh-btn", onClick: () => !this.disabled && this.refresh(), disabled: this.disabled, title: "Refresh captcha" }, "\u21BB")), h("div", { key: '216fe9d83c62a821dfa470700e28ca657cdfb18f', class: "x-captcha-input-container" }, h("input", { key: 'a23f44e96efc6b1ad9405de28ebb8d3f548698da', type: "text", class: {
                 'x-captcha-input': true,
-                'x-captcha-input-error': !!this.errorMessage
-            }, value: this.value, placeholder: this.placeholder, onInput: this.handleInput, disabled: this.disabled })), this.errorMessage && h("div", { key: '119b822ecca17f9501add2f77125334239ed58e9', class: "x-captcha-error-msg" }, this.errorMessage))));
+                'x-captcha-input-error': !!this.errorMessage,
+            }, value: this.value, placeholder: this.placeholder, onInput: this.handleInput, disabled: this.disabled })), !this.hideError && this.errorMessage && h("div", { key: 'cef94638adad8c593588d6a27e34dae292793058', class: "x-captcha-error-msg" }, this.errorMessage))));
     }
     static get is() { return "x-captcha"; }
     static get encapsulation() { return "shadow"; }
@@ -303,6 +303,26 @@ export class XCaptcha {
                 "attribute": "disabled",
                 "defaultValue": "false"
             },
+            "hideError": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to hide the internal error message display."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "hide-error",
+                "defaultValue": "false"
+            },
             "value": {
                 "type": "string",
                 "mutable": true,

package/dist/collection/components/x-card/x-card.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;
@@ -422,11 +425,13 @@
   font-weight: normal;
   font-size: var(--x-card-font-size, var(--x-font-size-base, 14px));
 }
-.x-card-extra a, .x-card-extra ::slotted(a) {
+.x-card-extra a,
+.x-card-extra ::slotted(a) {
   color: var(--x-card-link-color, var(--x-color-primary, #1677ff));
   text-decoration: none;
 }
-.x-card-extra a:hover, .x-card-extra ::slotted(a):hover {
+.x-card-extra a:hover,
+.x-card-extra ::slotted(a):hover {
   color: var(--x-card-link-color-hover, var(--x-color-primary-hover, #4096ff));
 }
 

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

@@ -170,7 +170,7 @@ export class XCard {
      * <x-card cardTitle="Title">Body</x-card>
      */
     render() {
-        return (h(Host, { key: '6a4be274dd57cf6880f87a95d11203895dd936a8', class: {
+        return (h(Host, { key: 'a42df9c27deebc6a2d3fc455388332c8fae67359', class: {
                 'x-card': true,
                 'x-card-bordered': this.bordered,
                 'x-card-hoverable': this.hoverable,

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

@@ -130,14 +130,14 @@ export class XCarousel {
      * <x-carousel><div>Slide</div></x-carousel>
      */
     render() {
-        return (h(Host, { key: '8e5a2b5d12ee7bf278bcdfca6409db2782a0d23b', class: {
+        return (h(Host, { key: '9562b0f02ab8f2c41433f0ccbba428acef674827', class: {
                 'x-carousel': true,
-                [`x-carousel-${this.dotPosition}`]: true
-            } }, h("div", { key: '6e3d5e9092b4162a7570752ec4bff34e8fb06ab1', class: "x-carousel-content" }, h("div", { key: 'e61cb9b1f3c073694d658125a6fa94681ae9ef46', class: "x-carousel-track", style: {
+                [`x-carousel-${this.dotPosition}`]: true,
+            } }, h("div", { key: 'dd1eb8940cff9a0fe1d513cd3449e559452ee207', class: "x-carousel-content" }, h("div", { key: 'accfc7eabe6190b08d483bdd90990490583f81b9', class: "x-carousel-track", style: {
                 // Translate track for scroll effect or keep for fade.
                 transform: this.effect === 'scrollx' ? `translateX(-${this.activeIndex * 100}%)` : 'none',
-                opacity: this.effect === 'fade' ? '1' : undefined
-            } }, h("slot", { key: '5b8b3529d999c49c7610881bd56a0d99cb7a076a' }))), this.dots && (h("ul", { key: '36486dbdc67cca67729515232249f11466161dd2', class: "x-carousel-dots" }, Array.from({ length: this.count }).map((_, i) => (h("li", { class: { 'x-carousel-dot-active': i === this.activeIndex }, onClick: () => this.goTo(i) }, h("button", null))))))));
+                opacity: this.effect === 'fade' ? '1' : undefined,
+            } }, h("slot", { key: '31263f10d1f4afd413850e6f4a66db37d93d49b5' }))), this.dots && (h("ul", { key: '2dce1416c5133e37a14699f5bc462ea94b130fc1', class: "x-carousel-dots" }, Array.from({ length: this.count }).map((_, i) => (h("li", { class: { 'x-carousel-dot-active': i === this.activeIndex }, onClick: () => this.goTo(i) }, h("button", null))))))));
     }
     static get is() { return "x-carousel"; }
     static get encapsulation() { return "shadow"; }