@xlabs-store/core 0.0.1 → 0.0.2

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

@@ -20,6 +20,12 @@ export class XModalContent {
      * <x-modal-content modalTitle="Confirm"></x-modal-content>
      */
     modalTitle;
+    /**
+     * Help text displayed as a tooltip next to the modal title.
+     * @example
+     * <x-modal-content helpText="This is help info"></x-modal-content>
+     */
+    helpText;
     /**
      * Whether to show the header.
      */
@@ -94,6 +100,10 @@ export class XModalContent {
      * Whether OK button is danger style.
      */
     okDanger = false;
+    /**
+     * Whether OK button is disabled.
+     */
+    okDisabled = false;
     /**
      * Modal type (info, success, error, warning, confirm).
      */
@@ -110,6 +120,14 @@ export class XModalContent {
      * <x-modal-content footerContent="<b>Footer</b>"></x-modal-content>
      */
     footerContent = '';
+    /**
+     * Body content - Array of DOM nodes or single Node.
+     */
+    bodyNodes;
+    /**
+     * Footer content - Array of DOM nodes or single Node.
+     */
+    footerNodes;
     /**
      * Body style.
      */
@@ -149,12 +167,18 @@ export class XModalContent {
      */
     getTypeIcon() {
         switch (this.type) {
-            case 'info': return getIcon('info');
-            case 'success': return getIcon('check');
-            case 'error': return getIcon('close');
-            case 'warning': return getIcon('warning');
-            case 'confirm': return getIcon('question');
-            default: return null;
+            case 'info':
+                return getIcon('info');
+            case 'success':
+                return getIcon('check');
+            case 'error':
+                return getIcon('close');
+            case 'warning':
+                return getIcon('warning');
+            case 'confirm':
+                return getIcon('question');
+            default:
+                return null;
         }
     }
     /**
@@ -171,6 +195,41 @@ export class XModalContent {
     handleCancel = () => {
         this.xCancel.emit();
     };
+    /**
+     * Sync nodes to their respective containers.
+     */
+    syncNodes() {
+        if (this.bodyNodes) {
+            const container = this.el.querySelector('.x-modal-body-content-nodes');
+            if (container) {
+                const currentNodes = Array.from(container.childNodes);
+                const targetNodes = Array.isArray(this.bodyNodes) ? this.bodyNodes : [this.bodyNodes];
+                const isSame = currentNodes.length === targetNodes.length && currentNodes.every((node, i) => node === targetNodes[i]);
+                if (!isSame) {
+                    container.innerHTML = '';
+                    targetNodes.forEach(node => container.appendChild(node));
+                }
+            }
+        }
+        if (this.footerNodes) {
+            const container = this.el.querySelector('.x-modal-footer-nodes');
+            if (container) {
+                const currentNodes = Array.from(container.childNodes);
+                const targetNodes = Array.isArray(this.footerNodes) ? this.footerNodes : [this.footerNodes];
+                const isSame = currentNodes.length === targetNodes.length && currentNodes.every((node, i) => node === targetNodes[i]);
+                if (!isSame) {
+                    container.innerHTML = '';
+                    targetNodes.forEach(node => container.appendChild(node));
+                }
+            }
+        }
+    }
+    componentDidLoad() {
+        this.syncNodes();
+    }
+    componentDidUpdate() {
+        this.syncNodes();
+    }
     /**
      * Render modal markup with header, body, and footer.
      *
@@ -195,21 +254,21 @@ export class XModalContent {
             [`x-modal-${this.type}`]: !!this.type,
         };
         const isMethod = !!this.type || (this.el && this.el.getAttribute('type') !== null);
-        return (h("div", { key: 'ed9186dab41efba82f9242403267b8d60645c70b', class: "x-modal-content-root" }, this.mask && h("div", { key: 'a80602f9c327e9c6e50820265fc6c05cefc4dfc3', class: "x-modal-mask", style: this.maskStyle }), h("div", { key: '793f6a17288ea512194c87dc863fc7b0e6dd2698', class: wrapClasses, onClick: this.handleWrapClick, style: this.wrapStyle }, h("div", { key: '45e4106829225768c488bfa947ba35f67439e5cc', class: {
+        return (h("div", { key: '67b86d080302e8d3101069c53d1df41b5cc46975', class: "x-modal-content-root" }, this.mask && h("div", { key: '1f3314d1fc1f4e80f1bebfaf9e18793ed57c4acd', class: "x-modal-mask", style: this.maskStyle }), h("div", { key: '2d34d2e357b867bfca7c3132bcd91b0c02183f67', class: wrapClasses, onClick: this.handleWrapClick, style: this.wrapStyle }, h("div", { key: '21b9546d280b4653611668f9c3c0482cd1b36431', class: {
                 'x-modal-content': true,
                 'x-modal-method-content-wrapper': isMethod,
-            }, style: contentStyle }, this.showHeader && (h("div", { key: '657b790ce55b75fbdc51b795a15988604ff1670e', class: {
+            }, style: contentStyle }, this.showHeader && (h("div", { key: '90274df295b935b9fffe2c5567f4f72654ab5817', class: {
                 'x-modal-header': true,
                 'x-modal-header-method': isMethod,
-            } }, !isMethod && h("div", { key: '86cd2c8edfbebcc36b713e64cf511a0311602c21', class: "x-modal-title" }, this.modalTitle), this.closable && (h("button", { key: 'd6bc942667195387a8963dc7053cd87b1f04352a', class: "x-modal-close", onClick: this.handleCancel, "aria-label": translate('global.close', {}, 'Close') }, h("x-icon", { key: '09db89790538be78a2e5865448f17d44f6b6f4e0', name: getIcon('close') }))))), h("div", { key: 'b67e64ccd84f06753ec9fa17d06ee3a076ed236c', class: {
+            } }, !isMethod && (h("div", { key: 'c1b9d4d51ed04ce5173b2fd241ca5a91404e7952', class: "x-modal-title-wrapper" }, h("div", { key: '7e355f3a9cc72e7a4c0850a3867c9d1d821bb7eb', class: "x-modal-title" }, this.modalTitle), this.helpText && (h("div", { key: 'b06f24f482749a5f368e60a1bfafd3b44905dc3f', class: "x-modal-help-icon", title: this.helpText }, h("x-icon", { key: '217e149601ff448c8a503e8518c87e098d75e641', name: getIcon('info') }), h("div", { key: '7ded4537d7b982c0e5f4f1f7130b9cc54be3f08c', class: "x-modal-help-tooltip" }, this.helpText))))), this.closable && (h("button", { key: 'be090912a94bc2e6a313a93fa353d961e6622bb3', class: "x-modal-close", onClick: this.handleCancel, "aria-label": translate('global.close', {}, 'Close') }, h("x-icon", { key: '91de206bb379de04e37d5a11b291b4bbfd61442a', name: getIcon('close') }))))), h("div", { key: 'c4c766a3f6d8408c962908fd72c5e641232fd4fb', class: {
                 'x-modal-body': true,
                 'x-modal-body-method': isMethod,
-            }, style: this.bodyStyle }, isMethod && (h("div", { key: '1cb50550d6230792d4c2b7fa96e0cad06306879a', class: "x-modal-method-centered" }, this.getTypeIcon() && (h("div", { key: 'da131b6d1b86b4cd6f4351a68e2a5a9bcdce28e6', class: `x-modal-method-icon-circle x-modal-method-icon-${this.type}` }, h("x-icon", { key: '78882dc5345de487bbc82827fe852c29fba3c7c4', name: this.getTypeIcon() }))), this.modalTitle && h("h3", { key: '47b55ded22cc27c2dd1bdaa8737fafbc29b6a0d2', class: "x-modal-method-title-centered" }, this.modalTitle), h("div", { key: 'c75c28d9c137f87b2149d9372e906465b2708c00', class: "x-modal-method-message-centered", innerHTML: this.bodyContent }))), !isMethod && (h("div", { key: '9a5e31dee18538efd63451ea21a41d9f43e815e8', class: "x-modal-body-content" }, this.bodyContent ? h("div", { innerHTML: this.bodyContent }) : h("slot", null)))), this.footer && (h("div", { key: 'd6f5d825aa8b373bbaedb26fb28f9122e5ba6a0a', class: {
+            }, style: this.bodyStyle }, isMethod && (h("div", { key: '8af05a8ac9b9f8ab6cf58112625198bbb522757f', class: "x-modal-method-centered" }, this.getTypeIcon() && (h("div", { key: 'd950c3e41d5719123ec749f73671f87ff89b522c', class: `x-modal-method-icon-circle x-modal-method-icon-${this.type}` }, h("x-icon", { key: 'ceabf804705317e56fc189ea57220bcba0fee083', name: this.getTypeIcon() }))), this.modalTitle && h("h3", { key: '1433313361ebe6d107c9efce8ee418ff6a3cb392', class: "x-modal-method-title-centered" }, this.modalTitle), h("div", { key: 'e6b31b2699b8578f5cf5463a8ac55417cc30c5c6', class: "x-modal-method-message-centered", innerHTML: this.bodyContent }))), !isMethod && (h("div", { key: '9c19676b5fc310ef4db8f37d23c93b90d376060e', class: "x-modal-body-content" }, this.bodyNodes && (Array.isArray(this.bodyNodes) ? this.bodyNodes.length > 0 : true) ? (h("div", { class: "x-modal-body-content-nodes" })) : this.bodyContent ? (h("div", { innerHTML: this.bodyContent })) : (h("slot", null))))), this.footer && (h("div", { key: '587f77ae7c86bffbe1ac4c5b2195de3a5e146190', class: {
                 'x-modal-footer': true,
                 'x-modal-footer-method': isMethod,
-            } }, this.footerContent ? (h("div", { innerHTML: this.footerContent })) : ([
+            } }, this.footerNodes && (Array.isArray(this.footerNodes) ? this.footerNodes.length > 0 : true) ? (h("div", { class: "x-modal-footer-nodes" })) : this.footerContent ? (h("div", { innerHTML: this.footerContent })) : ([
             this.cancelText !== null && (h("x-button", { onClick: this.handleCancel, loading: this.cancelLoading, class: "x-modal-footer-btn-cancel" }, this.cancelText)),
-            h("x-button", { type: this.okType, danger: this.okDanger || this.type === 'error', onClick: this.handleOk, loading: this.okLoading, class: "x-modal-footer-btn-ok" }, this.okText),
+            h("x-button", { type: this.okType, danger: this.okDanger || this.type === 'error', onClick: this.handleOk, loading: this.okLoading, disabled: this.okDisabled, class: "x-modal-footer-btn-ok" }, this.okText),
         ])))))));
     }
     static get is() { return "x-modal-content"; }
@@ -247,6 +306,28 @@ export class XModalContent {
                 "reflect": false,
                 "attribute": "modal-title"
             },
+            "helpText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-modal-content helpText=\"This is help info\"></x-modal-content>"
+                        }],
+                    "text": "Help text displayed as a tooltip next to the modal title."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "help-text"
+            },
             "showHeader": {
                 "type": "boolean",
                 "mutable": false,
@@ -540,6 +621,26 @@ export class XModalContent {
                 "attribute": "ok-danger",
                 "defaultValue": "false"
             },
+            "okDisabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether OK button is disabled."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "ok-disabled",
+                "defaultValue": "false"
+            },
             "type": {
                 "type": "string",
                 "mutable": false,
@@ -605,6 +706,50 @@ export class XModalContent {
                 "attribute": "footer-content",
                 "defaultValue": "''"
             },
+            "bodyNodes": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Node[] | Node",
+                    "resolved": "Node | Node[]",
+                    "references": {
+                        "Node": {
+                            "location": "global",
+                            "id": "global::Node"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Body content - Array of DOM nodes or single Node."
+                },
+                "getter": false,
+                "setter": false
+            },
+            "footerNodes": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Node[] | Node",
+                    "resolved": "Node | Node[]",
+                    "references": {
+                        "Node": {
+                            "location": "global",
+                            "id": "global::Node"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Footer content - Array of DOM nodes or single Node."
+                },
+                "getter": false,
+                "setter": false
+            },
             "bodyStyle": {
                 "type": "unknown",
                 "mutable": false,

package/dist/collection/components/x-notification/notification-service.js

@@ -6,7 +6,7 @@
  *
  * Usage:
  * ```ts
- * import { notification } from '@xlabs/core';
+ * import { notification } from '@xlabs-store/core';
  *
  * // Basic usage
  * notification.info({
@@ -171,8 +171,7 @@ const generateKey = () => `notification-${++notificationCounter}`;
 const enforceMaxCount = (placement) => {
     if (!globalConfig.maxCount)
         return;
-    const placementNotifications = Array.from(activeNotifications.entries())
-        .filter(([, data]) => data.placement === placement);
+    const placementNotifications = Array.from(activeNotifications.entries()).filter(([, data]) => data.placement === placement);
     while (placementNotifications.length >= globalConfig.maxCount) {
         const [key, data] = placementNotifications.shift();
         data.element.close();
@@ -243,7 +242,7 @@ const showNotification = (type, config) => {
     // Add to container
     const containerPromise = getContainer(placement);
     if (containerPromise instanceof Promise) {
-        containerPromise.then((container) => {
+        containerPromise.then(container => {
             container.appendChild(notificationEl);
         });
     }
@@ -313,7 +312,7 @@ const destroy = (key) => {
 const config = (options) => {
     Object.assign(globalConfig, options);
     // Recreate containers with new settings
-    containers.forEach((container) => {
+    containers.forEach(container => {
         if (container.parentElement) {
             container.remove();
         }
@@ -324,11 +323,11 @@ const config = (options) => {
  * Notification Service
  */
 export const notification = {
-    info: (cfg) => showNotification('info', cfg),
-    success: (cfg) => showNotification('success', cfg),
-    error: (cfg) => showNotification('error', cfg),
-    warning: (cfg) => showNotification('warning', cfg),
-    open: (cfg) => showNotification(cfg.type, cfg),
+    info: cfg => showNotification('info', cfg),
+    success: cfg => showNotification('success', cfg),
+    error: cfg => showNotification('error', cfg),
+    warning: cfg => showNotification('warning', cfg),
+    open: cfg => showNotification(cfg.type, cfg),
     destroy,
     config,
 };

package/dist/collection/components/x-notification/x-notification.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;
@@ -417,6 +420,7 @@
 .x-notification-content-text {
   flex: 1;
   min-width: 0;
+  padding-right: var(--x-notification-content-padding-right, 28px);
 }
 
 .x-notification-message {

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

@@ -245,7 +245,7 @@ export class XNotification {
      * await el.getClosePromise()
      */
     async getClosePromise() {
-        return new Promise((resolve) => {
+        return new Promise(resolve => {
             this.closeResolver = resolve;
         });
     }
@@ -302,19 +302,19 @@ export class XNotification {
         if (!this.type && !this.icon)
             return null;
         const iconHtml = this.icon || (this.type ? getTypeIcon(this.type) : '');
-        return (h("span", { class: `x-notification-icon${this.type ? ` x-notification-icon-${this.type}` : ''}`, innerHTML: iconHtml }));
+        return h("span", { class: `x-notification-icon${this.type ? ` x-notification-icon-${this.type}` : ''}`, innerHTML: iconHtml });
     }
     /**
      * Render notification container and progress bar.
      * @returns JSX.Element
      */
     render() {
-        return (h(Host, { key: '5ff0d613edb227be7bd51be45c87c6f0f1715932', class: {
+        return (h(Host, { key: '0f7b7ecf34762955e6004a9e59c9fab0c7a9e564', class: {
                 'x-notification': true,
                 'x-notification-visible': this.visible,
                 'x-notification-closing': this.closing,
                 [this.getPlacementClass()]: true,
-            }, role: this.ariaRole, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, h("div", { key: 'bccba5c2dfd515ad30c0b4f36cf91422dfe1121d', class: "x-notification-content" }, this.renderIcon(), h("div", { key: '5a7d54d796f2e0e3d4c5d5ee5cb961de90aafdec', class: "x-notification-content-text" }, h("div", { key: 'ec7bca3ea4edac0e03825a940383bbe05469d7ab', class: "x-notification-message", innerHTML: this.message }), this.description && (h("div", { key: '5784a7c41210e39f5c6b75ccff29e805e75d50e2', class: "x-notification-description", innerHTML: this.description })), this.btn && (h("div", { key: '3d960ca68a08f5cbe53c0092cde5f3a480805897', class: "x-notification-btn", innerHTML: this.btn }))), h("button", { key: 'a5bd67b921703c1aaf34737099982c6b6b6a5aa8', class: "x-notification-close", "aria-label": "Close", onClick: () => this.close() }, this.closeIcon ? (h("span", { innerHTML: this.closeIcon })) : (h("x-icon", { name: getIcon('close') })))), this.showProgress && this.duration > 0 && (h("div", { key: 'f7764f25a829eb3a1eba5f41feaba9b8b5f02dea', class: "x-notification-progress", style: { animationDuration: `${this.progressDuration}s` } }))));
+            }, role: this.ariaRole, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, h("div", { key: '283cf15391e7bd87ed6dfc0b7c51ef9823081782', class: "x-notification-content" }, this.renderIcon(), h("div", { key: '77151b7e7fb48524486467cc79ee2cce507e3361', class: "x-notification-content-text" }, h("div", { key: '8842b28b1613cb28add41487e4586cd4d3255a0a', class: "x-notification-message", innerHTML: this.message }), this.description && h("div", { key: 'a3bd7f42ad8ad833d74bf03adf5382716081f1c9', class: "x-notification-description", innerHTML: this.description }), this.btn && h("div", { key: 'f4a6cbe9b308f13a7bad1e984e09f33ee94c4853', class: "x-notification-btn", innerHTML: this.btn })), h("button", { key: '5b6fbdc06d9f874a3c6f228e7f85b87f10d84cd5', class: "x-notification-close", "aria-label": "Close", onClick: () => this.close() }, this.closeIcon ? h("span", { innerHTML: this.closeIcon }) : h("x-icon", { name: getIcon('close') }))), this.showProgress && this.duration > 0 && h("div", { key: 'f4e06fbac0b33f519b3906d4cc37fa769946e0e6', class: "x-notification-progress", style: { animationDuration: `${this.progressDuration}s` } })));
     }
     static get is() { return "x-notification"; }
     static get encapsulation() { return "shadow"; }

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

@@ -50,7 +50,7 @@ export class XPageHeader {
      * <x-page-header headerTitle="Title" subTitle="Sub"></x-page-header>
      */
     render() {
-        return (h(Host, { key: '6758518becd28942908221de8ee09d10588ef636', class: "x-page-header" }, h("div", { key: '87ef2421c55a06173675361364e985b7d132c095', class: "x-page-header-heading" }, h("div", { key: '12d48a6a4f16853340c4e661434f428e2b4b5cba', class: "x-page-header-heading-left" }, this.backIcon && (h("div", { key: '71152960df84104308d39b9a5aeb91477b4f78f1', class: "x-page-header-back", onClick: () => this.handleBack() }, h("div", { key: 'afd5b61061e7e293350779308f823004fd88aabd', class: "x-page-header-back-button", role: "button", tabindex: "0" }, h("slot", { key: '099910d36ebc895ca267be24d31144991e045c91', name: "backIcon" }, h("span", { key: 'dd7037aecdec8a21c118a31b0ad3302e7aab1c4e', role: "img", "aria-label": "arrow-left", class: "anticon anticon-arrow-left" }, h("svg", { key: '8cbace2af5f55268fcf3d838bd81759d9beab805', viewBox: "64 64 896 896", focusable: "false", "data-icon": "arrow-left", width: "1em", height: "1em", fill: "currentColor", "aria-hidden": "true" }, h("path", { key: '7558104ad7a91240ac0be5888301b65fd584ae09', d: "M872 474H286.9l350.2-304c5.6-4.9 2.2-14-5.2-14h-88.5c-3.9 0-7.6 1.4-10.5 3.9L155 487.8a31.96 31.96 0 000 48.3L535.1 866c1.5 1.3 3.3 2 5.2 2h91.5c7.4 0 10.8-9.2 5.2-14L286.9 550H872c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8z" }))))))), this.headerTitle && h("span", { key: 'd6577e799d33b93a9b34a4b30f173c9f5eb73973', class: "x-page-header-heading-title", title: this.headerTitle }, this.headerTitle), h("slot", { key: '07e699fe57fdb4b189f950b07b3818857ae0eb4e', name: "title" }), this.subTitle && h("span", { key: 'feccfe77194af04de00df0cd31dbd5017377adfc', class: "x-page-header-heading-sub-title", title: this.subTitle }, this.subTitle), h("slot", { key: 'fe0b0591d53a192dab09d8b4b7cb663049e6fce3', name: "subTitle" }), h("span", { key: '34a90ec4329a682d4339866f15cce8b1b3fe5251', class: "x-page-header-heading-tags" }, h("slot", { key: 'd1b1429f69ab870e996f2700a3cfa904839d906f', name: "tags" }))), h("div", { key: '4504b707b589c5e63f5b7c0fdaaace23fc59f78c', class: "x-page-header-heading-extra" }, h("slot", { key: 'ab10e4956aacdf2800ee5f6f3476306ae6d71af5', name: "extra" }))), h("div", { key: '75b83e04f895cc163788ac749c8c5a5329851eda', class: "x-page-header-content" }, h("slot", { key: 'f8488a71b5f6b6ba11a20b4f4c99404ed557b40f' })), h("div", { key: 'f3e01f4fca5b2eabf8e8792d58ec1f4ba8a41e98', class: "x-page-header-footer" }, h("slot", { key: 'ca2ec9ce350cf3a7ac687c1679c890449617296d', name: "footer" }))));
+        return (h(Host, { key: '8440364c2cbf4fcae8448a9449f8a89e1e83f80d', class: "x-page-header" }, h("div", { key: 'b4c22e4cdf451110f0e0fea59de011a117b88054', class: "x-page-header-heading" }, h("div", { key: '866dbf2db4c8dec2ff3f3715f20ffb21b016d088', class: "x-page-header-heading-left" }, this.backIcon && (h("div", { key: 'fdcbac15e5064345de315b7c17f9c84ae54ad848', class: "x-page-header-back", onClick: () => this.handleBack() }, h("div", { key: '5c5b2f3b5dc1ab83773c7953fa70b2e27cb1900e', class: "x-page-header-back-button", role: "button", tabindex: "0" }, h("slot", { key: '4d4ff76f4ff0d50cb70b36037be715de21d15ef3', name: "backIcon" }, h("span", { key: 'f98f56ad03d931af4adc318224b38d4b91edf2a5', role: "img", "aria-label": "arrow-left", class: "anticon anticon-arrow-left" }, h("svg", { key: '14f82e0ce1a960b1f4cd5fdd7717f154159bbfbd', viewBox: "64 64 896 896", focusable: "false", "data-icon": "arrow-left", width: "1em", height: "1em", fill: "currentColor", "aria-hidden": "true" }, h("path", { key: '557b48718ed9cf74a746479307d95960de148b08', d: "M872 474H286.9l350.2-304c5.6-4.9 2.2-14-5.2-14h-88.5c-3.9 0-7.6 1.4-10.5 3.9L155 487.8a31.96 31.96 0 000 48.3L535.1 866c1.5 1.3 3.3 2 5.2 2h91.5c7.4 0 10.8-9.2 5.2-14L286.9 550H872c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8z" }))))))), this.headerTitle && (h("span", { key: 'a4b05c59820677d83cb6741298214eeaeeb30a2c', class: "x-page-header-heading-title", title: this.headerTitle }, this.headerTitle)), h("slot", { key: '37e86662bf2bc4d8356de986cbfe56f194f52eb9', name: "title" }), this.subTitle && (h("span", { key: '5123ff35cb57c18b05e3a011091e0a8eb25fe3d8', class: "x-page-header-heading-sub-title", title: this.subTitle }, this.subTitle)), h("slot", { key: 'fdda458a19f901306b844df95b0a054faa2059b1', name: "subTitle" }), h("span", { key: '25ba900033890cc8a5b0bda27b3f2647be6bf147', class: "x-page-header-heading-tags" }, h("slot", { key: '957a82d97a5073625b75881657e79353efbe225c', name: "tags" }))), h("div", { key: '81694345e94faa7e5462c213128b749c2e18a7ef', class: "x-page-header-heading-extra" }, h("slot", { key: 'b4653f3bc40c745f932fbbce2e938e2f6ed415bc', name: "extra" }))), h("div", { key: '7c39e9d7e1b2af8d8a53b93bbe0828ed599fb368', class: "x-page-header-content" }, h("slot", { key: 'd0bd61e0cd35d553a241f250baae13af2bb04367' })), h("div", { key: 'f9a184622b0d0b036e1bc685f193a7a0e6312da4', class: "x-page-header-footer" }, h("slot", { key: 'fd58ae1ec05141bcb03458f2f498e0cc239ab55c', name: "footer" }))));
     }
     static get is() { return "x-page-header"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/x-pagination/x-pagination.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;
@@ -597,6 +600,12 @@
   align-items: center;
   list-style: none;
 }
+.x-pagination-options .x-pagination-options-size-changer {
+  display: inline-block;
+  width: auto;
+  min-width: 125px;
+  margin-inline-start: var(--x-pagination-item-margin, var(--x-spacing-xs, 8px));
+}
 
 .x-pagination-options-quick-jumper {
   display: inline-flex;

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

@@ -300,7 +300,7 @@ export class XPagination {
         const newSize = Number(e.detail.value);
         if (newSize !== this.internalPageSize) {
             // Calculate the current page in the new sizing to keep the user at the same data point
-            const newCurrent = Math.ceil((this.range[0]) / newSize);
+            const newCurrent = Math.ceil(this.range[0] / newSize);
             this.internalPageSize = newSize;
             this.internalCurrent = newCurrent;
             this.xShowSizeChange.emit({
@@ -429,10 +429,18 @@ export class XPagination {
                 return undefined;
             if (isPage)
                 return String(page);
-            if (type === 'jump-prev')
-                return `${translate('Pagination.prev_page', {}, 'Previous')} ${this.showLessItems ? 3 : 5} ${translate('Pagination.page', {}, 'pages')}`;
-            if (type === 'jump-next')
-                return `${translate('Pagination.next_page', {}, 'Next')} ${this.showLessItems ? 3 : 5} ${translate('Pagination.page', {}, 'pages')}`;
+            if (type === 'jump-prev') {
+                const label = translate('Pagination.prev_page', {}, 'Previous');
+                const jumpLabel = this.showLessItems ? '3' : '5';
+                const pageLabel = translate('Pagination.page', {}, 'pages');
+                return `${label} ${jumpLabel} ${pageLabel}`;
+            }
+            if (type === 'jump-next') {
+                const label = translate('Pagination.next_page', {}, 'Next');
+                const jumpLabel = this.showLessItems ? '3' : '5';
+                const pageLabel = translate('Pagination.page', {}, 'pages');
+                return `${label} ${jumpLabel} ${pageLabel}`;
+            }
             return undefined;
         };
         const renderContent = () => {
@@ -473,7 +481,7 @@ export class XPagination {
             'x-pagination-options': true,
             [classNames.options || '']: !!classNames.options,
         };
-        const options = pageSizeOptions.map((size) => ({
+        const options = pageSizeOptions.map(size => ({
             value: size,
             label: `${size} ${translate('Pagination.items_per_page', {}, '/ page')}`,
         }));
@@ -482,9 +490,7 @@ export class XPagination {
     /** Renders the numeric input for jumping to a specific page. */
     renderQuickJumper() {
         const { disabled, showQuickJumper, classNames, styles } = this;
-        const goButton = typeof showQuickJumper === 'object'
-            ? showQuickJumper.goButton
-            : translate('global.go', {}, 'Go');
+        const goButton = typeof showQuickJumper === 'object' ? showQuickJumper.goButton : translate('global.go', {}, 'Go');
         const jumperClasses = {
             'x-pagination-options-quick-jumper': true,
             [classNames.jumper || '']: !!classNames.jumper,
@@ -531,7 +537,7 @@ export class XPagination {
     // ==================== Render ====================
     /** Main render entry point. Manages visibility and switcher between mode layouts. */
     render() {
-        const { hideOnSinglePage, disabled, size, align, simple, showQuickJumper, classNames, styles, } = this;
+        const { hideOnSinglePage, disabled, size, align, simple, showQuickJumper, classNames, styles } = this;
         // Hide on single page
         if (hideOnSinglePage && this.totalPages <= 1) {
             return null;
@@ -555,9 +561,7 @@ export class XPagination {
                 [`x-pagination-align-${align}`]: true,
                 [classNames.root || '']: !!classNames.root,
             } }, h("ul", { class: "x-pagination", style: styles.root, part: "pagination", role: "navigation", "aria-label": "Pagination" }, this.renderTotal(), this.renderPrev(), pageNumbers.map((page, index) => {
-            const type = typeof page === 'number'
-                ? 'page'
-                : page;
+            const type = typeof page === 'number' ? 'page' : page;
             return this.renderItem(page, type, index);
         }), this.renderNext(), this.shouldShowSizeChanger && this.renderSizeChanger(), showQuickJumper && this.renderQuickJumper())));
     }
@@ -1188,7 +1192,7 @@ export class XPagination {
                             "name": "event",
                             "text": "xChange"
                         }],
-                    "text": "Emitted when current page number or page size is changed.\r\nUseful for triggering data re-fetching."
+                    "text": "Emitted when current page number or page size is changed.\nUseful for triggering data re-fetching."
                 },
                 "complexType": {
                     "original": "PaginationChangeEventDetail",

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

@@ -69,7 +69,7 @@ export class XPopconfirmContent {
             [`x-popconfirm-placement-${this.placement}`]: true,
             'x-popconfirm-hidden': this.hidden,
         };
-        return (h(Host, { key: '30456ec8e9a28dd8f00ce9ed15c7ffc167b8dc89', class: classes }, h("div", { key: '59899946b03554dd14081932dfa1caf32b0ac964', class: "x-popconfirm-arrow" }), h("div", { key: '9b1d34aeb5f84b455b984d306ade4dd713ee3a13', class: "x-popconfirm-inner" }, h("div", { key: 'e4be2e1de459b2978b3fc103481167403b278c0c', class: "x-popconfirm-inner-content" }, h("div", { key: '37f035b29f9381a811c42b30900d5b4f16d8a9bb', class: "x-popconfirm-message" }, h("span", { key: '3251d661ef79022fa5efd795f2adf285c0881cb7', class: "x-popconfirm-message-icon" }, "!"), h("div", { key: 'de0790ada050078a393d4ac2ee08d20044c59604', class: "x-popconfirm-message-title" }, this.confirmTitle)), h("div", { key: 'ad67a15274bac9d73846d218be23bbfad5e6eb20', class: "x-popconfirm-buttons" }, h("x-button", { key: '1dc90aaeb8f7273c231052f0fa793fbbab51e64d', size: "small", onClick: () => this.cancelCallback?.() }, this.cancelText), h("x-button", { key: 'af827c33e32aae9f8eb8b2293d41c3cefb2426c8', size: "small", type: "primary", onClick: () => this.confirmCallback?.() }, this.okText))))));
+        return (h(Host, { key: '41306e0d096a028dcac1cf7ca669adb3b284fb63', class: classes }, h("div", { key: '12ed6ded455a3a3a85d1d5c588ce850893f79e37', class: "x-popconfirm-arrow" }), h("div", { key: '00e1ef44ff8a1e68d248c40f62e295897604899a', class: "x-popconfirm-inner" }, h("div", { key: 'a0e52309f32a4f97308990cda6ee7ddce4808ceb', class: "x-popconfirm-inner-content" }, h("div", { key: 'c84b9f225f4593dfe1b09ba46c295abd19bb5875', class: "x-popconfirm-message" }, h("span", { key: '192daabcc7ed89cbd706184883f0c37091422707', class: "x-popconfirm-message-icon" }, "!"), h("div", { key: '40ca5e150f64ef47bd615cc3d79159243f8faf12', class: "x-popconfirm-message-title" }, this.confirmTitle)), h("div", { key: '349263be3cab3345e41f945d00d650bb636dc4e7', class: "x-popconfirm-buttons" }, h("x-button", { key: '0cb4cf647fed12f88d7adcbb0446dec3d7e92455', size: "small", onClick: () => this.cancelCallback?.() }, this.cancelText), h("x-button", { key: '0bb3424a06196b921e93064174d4f830a8c45a1e', size: "small", type: "primary", onClick: () => this.confirmCallback?.() }, this.okText))))));
     }
     static get is() { return "x-popconfirm-content"; }
     static get originalStyleUrls() {

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

@@ -166,7 +166,7 @@ export class XPopconfirm {
      * </x-popconfirm>
      */
     render() {
-        return (h(Host, { key: 'c4909ed4a24ea4389cd762f70a827b88bb248520', class: "x-popconfirm" }, h("div", { key: 'c01729db23741adf1932b85263f25ce0b99dd1fe', class: "x-popconfirm-trigger", onClick: () => this.toggle() }, h("slot", { key: '2720dfa117d98f4229dcf163c903bc21a71c9c8f' }))));
+        return (h(Host, { key: '9614409181950554da183cb7004462a37fedb745', class: "x-popconfirm" }, h("div", { key: '3cacaf8e312f17d8b5cb908257bd6dc294ea0d47', class: "x-popconfirm-trigger", onClick: () => this.toggle() }, h("slot", { key: '2e1299fb5409430989bff5612971d6855d9007f1' }))));
     }
     static get is() { return "x-popconfirm"; }
     static get encapsulation() { return "shadow"; }

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

@@ -78,7 +78,7 @@ export class XPopoverContent {
             'x-popover-hidden': this.hidden,
             [this.contentClass || '']: !!this.contentClass,
         };
-        return (h(Host, { key: 'b948dbdb61a8213de272d33c24a3ec20254ee6ff', class: classes, onMouseEnter: (ev) => this.mouseEnterPopover?.(ev), onMouseLeave: (ev) => this.mouseLeavePopover?.(ev) }, h("div", { key: '996a05418f154b8a76ec40bc762e82d021672562', class: "x-popover-arrow" }), h("div", { key: '48ca4c9f425c776e9422b99627a146bfd18382d7', class: "x-popover-inner" }, this.popoverTitle && (h("div", { key: 'e2d31f80e31df45c4415309ac3518a01dd749c0f', class: "x-popover-title" }, this.popoverTitle)), h("div", { key: 'e8727b440e39c0f04dba02dfa802ee9c7735adec', class: "x-popover-inner-content" }, this.content, h("slot", { key: 'c4872c221f2e639ef106b31589e6f638b1bd8995', name: "content" })))));
+        return (h(Host, { key: '5b6a55710bf2a4a464485ac39024325ff564ec83', class: classes, onMouseEnter: ev => this.mouseEnterPopover?.(ev), onMouseLeave: ev => this.mouseLeavePopover?.(ev) }, h("div", { key: '14689ffd0cea37a028067ef22e13c9f0a8d6da25', class: "x-popover-arrow" }), h("div", { key: '4ae76090124cc38a74cd0c2e8ee058905015de46', class: "x-popover-inner" }, this.popoverTitle && h("div", { key: '34d12a66914033369bf0f3027b21291c2bbbafbe', class: "x-popover-title" }, this.popoverTitle), h("div", { key: '2a1677c504947b4834772b24372dec03fe67d426', class: "x-popover-inner-content" }, this.content, h("slot", { key: '4eb3a7bc3c91c22a65de4454be0a8d6a7677c1f1', name: "content" })))));
     }
     static get is() { return "x-popover-content"; }
     static get originalStyleUrls() {