@xlabs-store/core 0.0.1 → 0.0.2

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

@@ -203,7 +203,7 @@ export class XPopover {
      * @returns {JSX.Element} The component tree.
      */
     render() {
-        return (h(Host, { key: '37bcdc5da5a0ff94640494ac499ba599d6f27900', class: "x-popover-wrapper" }, h("div", { key: 'ce22172182c96e972e4621bd49609baaf08932c0', class: "x-popover-trigger" }, h("slot", { key: 'cc3860811241624a4df21471b9f6359477412dd0' }))));
+        return (h(Host, { key: '32655638a6d939da816b8947fd699e274ae5a974', class: "x-popover-wrapper" }, h("div", { key: '8afed79b78b50642783f8f63da2200065c2ec954', class: "x-popover-trigger" }, h("slot", { key: '8da63b72033e77fc1ee6a7564d9340d4f80336ed' }))));
     }
     static get is() { return "x-popover"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/x-portal/positioning.js

@@ -63,7 +63,7 @@ export class PositioningEngine {
                 const style = window.getComputedStyle(currentNode);
                 const overflow = style.overflow + style.overflowX + style.overflowY;
                 if (/auto|scroll|overlay|hidden/.test(overflow)) {
-                    // Additional check for actual scrollable content, 
+                    // Additional check for actual scrollable content,
                     // but we usually bind to any container with overflow declarations.
                     scrollParents.push(currentNode);
                 }
@@ -100,20 +100,14 @@ export class PositioningEngine {
         const viewHeight = window.innerHeight || document.documentElement.clientHeight;
         const viewWidth = window.innerWidth || document.documentElement.clientWidth;
         // Check global viewport limits first
-        if (rect.bottom < 0 ||
-            rect.top > viewHeight ||
-            rect.right < 0 ||
-            rect.left > viewWidth) {
+        if (rect.bottom < 0 || rect.top > viewHeight || rect.right < 0 || rect.left > viewWidth) {
             return false;
         }
         // Check scroll parents bounds
         for (const parent of this.scrollParents) {
             if (parent instanceof HTMLElement) {
                 const parentRect = parent.getBoundingClientRect();
-                if (rect.bottom < parentRect.top ||
-                    rect.top > parentRect.bottom ||
-                    rect.right < parentRect.left ||
-                    rect.left > parentRect.right) {
+                if (rect.bottom < parentRect.top || rect.top > parentRect.bottom || rect.right < parentRect.left || rect.left > parentRect.right) {
                     return false;
                 }
             }
@@ -149,14 +143,15 @@ export class PositioningEngine {
         if (this.options.flip) {
             const collision = this.getCollisionOverflow(coords, floatRect);
             const severity = this.calculateSeverity(collision);
-            if (severity > 5) { // Threshold to avoid micro-flips
+            if (severity > 5) {
+                // Threshold to avoid micro-flips
                 const flipped = this.getFlippedPlacement(placement, collision);
                 if (flipped !== placement) {
                     const flippedCoords = this.getCoordinates(refRect, floatRect, flipped);
                     const flippedOffset = this.getOffsetForPlacement(flipped);
                     const finalFlippedCoords = {
                         x: flippedCoords.x + flippedOffset.x,
-                        y: flippedCoords.y + flippedOffset.y
+                        y: flippedCoords.y + flippedOffset.y,
                     };
                     const flippedCollision = this.getCollisionOverflow(finalFlippedCoords, floatRect);
                     const flippedSeverity = this.calculateSeverity(flippedCollision);
@@ -248,10 +243,10 @@ export class PositioningEngine {
         const scrollX = strategy === 'absolute' ? window.scrollX : 0;
         const scrollY = strategy === 'absolute' ? window.scrollY : 0;
         return {
-            top: Math.max(0, (boundary.top + scrollY) - pos.y),
-            right: Math.max(0, (pos.x + rect.width) - (boundary.right + scrollX)),
-            bottom: Math.max(0, (pos.y + rect.height) - (boundary.bottom + scrollY)),
-            left: Math.max(0, (boundary.left + scrollX) - pos.x)
+            top: Math.max(0, boundary.top + scrollY - pos.y),
+            right: Math.max(0, pos.x + rect.width - (boundary.right + scrollX)),
+            bottom: Math.max(0, pos.y + rect.height - (boundary.bottom + scrollY)),
+            left: Math.max(0, boundary.left + scrollX - pos.x),
         };
     }
     calculateSeverity(overflow) {
@@ -326,7 +321,7 @@ export function createPositioning(reference, floating, options) {
     const engine = new PositioningEngine(reference, floating, options);
     return {
         update: () => engine.update(),
-        setOptions: (opts) => engine.setOptions(opts),
+        setOptions: opts => engine.setOptions(opts),
         destroy: () => engine.destroy(),
     };
 }

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

@@ -68,12 +68,12 @@ export class XProgress {
         const percentStyle = {
             width: `${this.percent}%`,
             height: `${this.strokeWidth}px`,
-            background: this.strokeColor
+            background: this.strokeColor,
         };
         // Style for the background trail.
         const trailStyle = {
             height: `${this.strokeWidth}px`,
-            background: this.trailColor
+            background: this.trailColor,
         };
         return (h("div", { class: "x-progress-outer" }, h("div", { class: "x-progress-inner", style: trailStyle }, h("div", { class: "x-progress-bg", style: percentStyle }))));
     }
@@ -104,12 +104,12 @@ export class XProgress {
         };
         // Stroke path styling with status-based fallback colors.
         const strokePathStyle = {
-            stroke: this.strokeColor || (this.status === 'success' ? '#52c41a' : (this.status === 'exception' ? '#ff4d4f' : '#1890ff')),
+            stroke: this.strokeColor || (this.status === 'success' ? '#52c41a' : this.status === 'exception' ? '#ff4d4f' : '#1890ff'),
             strokeDasharray: `${circumference}px ${circumference}px`,
             strokeDashoffset: `${strokeDashoffset}px`,
-            transition: 'stroke-dashoffset 0.3s ease 0s, stroke 0.3s ease'
+            transition: 'stroke-dashoffset 0.3s ease 0s, stroke 0.3s ease',
         };
-        return (h("div", { class: "x-progress-inner", style: { width: `${this.width}px`, height: `${this.width}px`, fontSize: `${this.width * 0.15 + 6}px` } }, h("svg", { viewBox: "0 0 100 100" }, h("path", { class: "x-progress-circle-trail", d: `M 50,50 m 0,-${radius} a ${radius},${radius} 0 1 1 0,${2 * radius} a ${radius},${radius} 0 1 1 0,-${2 * radius}`, "stroke-width": this.strokeWidth, "fill-opacity": "0", style: trailPathStyle }), h("path", { class: "x-progress-circle-path", d: `M 50,50 m 0,-${radius} a ${radius},${radius} 0 1 1 0,${2 * radius} a ${radius},${radius} 0 1 1 0,-${2 * radius}`, "stroke-width": this.strokeWidth, "fill-opacity": "0", style: strokePathStyle })), this.showInfo && (h("span", { class: "x-progress-text" }, this.status === 'exception' ? '×' : (this.status === 'success' ? '✓' : `${this.percent}%`)))));
+        return (h("div", { class: "x-progress-inner", style: { width: `${this.width}px`, height: `${this.width}px`, fontSize: `${this.width * 0.15 + 6}px` } }, h("svg", { viewBox: "0 0 100 100" }, h("path", { class: "x-progress-circle-trail", d: `M 50,50 m 0,-${radius} a ${radius},${radius} 0 1 1 0,${2 * radius} a ${radius},${radius} 0 1 1 0,-${2 * radius}`, "stroke-width": this.strokeWidth, "fill-opacity": "0", style: trailPathStyle }), h("path", { class: "x-progress-circle-path", d: `M 50,50 m 0,-${radius} a ${radius},${radius} 0 1 1 0,${2 * radius} a ${radius},${radius} 0 1 1 0,-${2 * radius}`, "stroke-width": this.strokeWidth, "fill-opacity": "0", style: strokePathStyle })), this.showInfo && (h("span", { class: "x-progress-text" }, this.status === 'exception' ? '×' : this.status === 'success' ? '✓' : `${this.percent}%`))));
     }
     /**
      * Render progress container and info text.
@@ -118,12 +118,12 @@ export class XProgress {
      * <x-progress percent={55}></x-progress>
      */
     render() {
-        return (h(Host, { key: '123cf8cd46a82088004c5046017578bbbb6884f1', class: {
+        return (h(Host, { key: '1db6195397925e036ed37340cdbd335728dc24b9', class: {
                 'x-progress': true,
                 [`x-progress-${this.type}`]: true,
                 [`x-progress-status-${this.status}`]: true,
-                'x-progress-show-info': this.showInfo
-            } }, this.type === 'line' ? this.renderLine() : this.renderCircle(), this.type === 'line' && this.showInfo && (h("span", { key: '960371d9aa35487a22eff03e4c911661396d6df7', class: "x-progress-text" }, this.status === 'exception' ? '×' : (this.status === 'success' ? '✓' : `${this.percent}%`)))));
+                'x-progress-show-info': this.showInfo,
+            } }, this.type === 'line' ? this.renderLine() : this.renderCircle(), this.type === 'line' && this.showInfo && (h("span", { key: 'e415934293374717ab51280a9c3917214a8485b9', class: "x-progress-text" }, this.status === 'exception' ? '×' : this.status === 'success' ? '✓' : `${this.percent}%`))));
     }
     static get is() { return "x-progress"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/x-qr-code/x-qr-code.css

@@ -19,7 +19,8 @@
   box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
 }
 
-.qr-svg-container, canvas {
+.qr-svg-container,
+canvas {
   width: 100%;
   height: 100%;
   animation: qr-fade-in 0.5s cubic-bezier(0.16, 1, 0.3, 1);

package/dist/collection/components/x-qr-code/x-qr-code.js

@@ -12,6 +12,8 @@ export class XQRCode {
     size = 256;
     /** Error correction level */
     ec = 'M';
+    /** Whether to use a Web Worker for generation (Experimental) */
+    useWorker = false;
     /** Rendering type: 'svg' or 'canvas' */
     type = 'svg';
     /** Show gradient effect (SVG only) */
@@ -72,7 +74,7 @@ export class XQRCode {
     }
     // ===== Render =====
     render() {
-        return (h("div", { key: '7ed0e5fc4b8420634962d1992faff7779a0d41d0', class: "qr-wrapper", style: { width: `${this.size}px`, height: `${this.size}px` } }, this.type === 'svg' ? (h("div", { class: "qr-svg-container", innerHTML: this.svgContent })) : (h("canvas", { ref: (el) => (this.canvas = el), style: { display: 'block' } }))));
+        return (h("div", { key: 'aa3070bffb2a293e81e15bc77772197ee49d8594', class: "qr-wrapper", style: { width: `${this.size}px`, height: `${this.size}px` } }, this.type === 'svg' ? (h("div", { class: "qr-svg-container", innerHTML: this.svgContent })) : (h("canvas", { ref: el => (this.canvas = el), style: { display: 'block' } }))));
     }
     static get is() { return "x-qr-code"; }
     static get encapsulation() { return "shadow"; }
@@ -155,6 +157,26 @@ export class XQRCode {
                 "attribute": "ec",
                 "defaultValue": "'M'"
             },
+            "useWorker": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to use a Web Worker for generation (Experimental)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "use-worker",
+                "defaultValue": "false"
+            },
             "type": {
                 "type": "string",
                 "mutable": false,

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

@@ -59,7 +59,7 @@ export class XRadio {
      * @example
      * <x-radio placement="end"></x-radio>
      */
-    placement = 'start';
+    placement = 'end';
     /**
      * Radio label alignment.
      * @default 'center'
@@ -263,7 +263,7 @@ export class XRadio {
         const radioStyles = this.styles?.radio;
         const innerStyles = this.styles?.inner;
         const labelStyles = this.styles?.label;
-        return (h(Host, { key: '73c3b076a9ec6eddd0978ff6aa8cca6e8f776526', class: wrapperClasses, style: wrapperStyles, onClick: this.handleClick, onKeyDown: this.handleKeyDown, role: "radio", "aria-checked": this.checked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', tabindex: this.disabled ? -1 : 0 }, h("span", { key: '99b9cf1d6c8a56ad7c868d6b4a6d0dbda220c9f4', class: radioClasses, style: radioStyles }, h("input", { key: '68e873e4984a6f972dfa9531de6d387db4400bf7', ref: (el) => (this.inputEl = el), type: "radio", class: "x-radio-input", id: this.radioId, checked: this.checked, disabled: this.disabled, name: this.name, value: this.value, tabIndex: -1, onFocus: this.handleFocus, onBlur: this.handleBlur, onChange: (e) => e.stopPropagation() }), h("span", { key: 'b74110568edc7a6c43a42efed8bf0788e6f932c9', class: innerClasses, style: innerStyles })), h("span", { key: '1d6a28efc70aadf65bccceb22c8ccbc294c9987b', class: labelClasses, style: labelStyles }, h("slot", { key: 'eb70a0875223ff3b54ae4d3cc0d0d6b3ee6629e5' }))));
+        return (h(Host, { key: '0dd025af57e702bcd58443cab4c02d621ad7a611', class: wrapperClasses, style: wrapperStyles, onClick: this.handleClick, onKeyDown: this.handleKeyDown, role: "radio", "aria-checked": this.checked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', tabindex: this.disabled ? -1 : 0 }, h("span", { key: '1ac0531fc16863eb595a340a84741d60a249d973', class: radioClasses, style: radioStyles }, h("input", { key: '479f5e5c1ac7944dab767c3a57d6281a8db452b9', ref: el => (this.inputEl = el), type: "radio", class: "x-radio-input", id: this.radioId, checked: this.checked, disabled: this.disabled, name: this.name, value: this.value, tabIndex: -1, onFocus: this.handleFocus, onBlur: this.handleBlur, onChange: e => e.stopPropagation() }), h("span", { key: '088f41b0a42752d455758f5c237b9dd7b4535780', class: innerClasses, style: innerStyles })), h("span", { key: '043e9624ecbbf646e06f64267ba2691681cf88f4', class: labelClasses, style: labelStyles }, h("slot", { key: '5d8cc9263d0087b5e54887f42172993323b33184' }))));
     }
     static get is() { return "x-radio"; }
     static get encapsulation() { return "shadow"; }
@@ -433,7 +433,7 @@ export class XRadio {
                 "setter": false,
                 "reflect": false,
                 "attribute": "placement",
-                "defaultValue": "'start'"
+                "defaultValue": "'end'"
             },
             "alignment": {
                 "type": "string",
@@ -650,7 +650,7 @@ export class XRadio {
                             "text": "Promise<void> - Resolves when focus is set."
                         }, {
                             "name": "example",
-                            "text": "const radio = document.querySelector('x-radio');\r\nawait radio.setFocus();"
+                            "text": "const radio = document.querySelector('x-radio');\nawait radio.setFocus();"
                         }]
                 }
             },
@@ -673,7 +673,7 @@ export class XRadio {
                             "text": "Promise<void> - Resolves when focus is removed."
                         }, {
                             "name": "example",
-                            "text": "const radio = document.querySelector('x-radio');\r\nawait radio.removeFocus();"
+                            "text": "const radio = document.querySelector('x-radio');\nawait radio.removeFocus();"
                         }]
                 }
             }

package/dist/collection/components/x-radio-group/x-radio-group.css

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

package/dist/collection/components/x-radio-group/x-radio-group.js

@@ -55,7 +55,7 @@ export class XRadioGroup {
      * Radio group label placement.
      * @default 'start'
      */
-    placement = 'start';
+    placement = 'end';
     /**
      * Radio group label alignment.
      * @default 'center'
@@ -102,7 +102,7 @@ export class XRadioGroup {
                 this.value = newValue;
                 this.xChange.emit({
                     value: this.value,
-                    nativeEvent: ev.detail.nativeEvent
+                    nativeEvent: ev.detail.nativeEvent,
                 });
             }
         }
@@ -134,11 +134,9 @@ export class XRadioGroup {
             [`x-radio-group-${this.direction}`]: !!this.direction,
             [this.classNames?.root ?? '']: !!this.classNames?.root,
         };
-        return (h(Host, { key: 'd21930c1f70c23539d2a29fd47372502e2053735', class: rootClasses, style: this.styles?.root, role: "radiogroup" }, this.options && this.options.length > 0 ? (this.options.map((opt, i) => {
+        return (h(Host, { key: 'eadfb14dd13f561c991d0653f4f8ca540b69cb66', class: rootClasses, style: this.styles?.root, role: "radiogroup" }, this.options && this.options.length > 0 ? (this.options.map((opt, i) => {
             const isPrimitive = typeof opt === 'string' || typeof opt === 'number';
-            const option = isPrimitive
-                ? { label: opt.toString(), value: opt }
-                : opt;
+            const option = isPrimitive ? { label: opt.toString(), value: opt } : opt;
             return (h("x-radio", { key: `radio-${i}-${option.value}`, value: option.value, checked: this.value === option.value, disabled: this.disabled || option.disabled, name: this.name, placement: option.placement || this.placement, alignment: option.alignment || this.alignment }, option.label));
         })) : (h("slot", { onSlotchange: this.handleSlotChange }))));
     }
@@ -393,7 +391,7 @@ export class XRadioGroup {
                 "setter": false,
                 "reflect": false,
                 "attribute": "placement",
-                "defaultValue": "'start'"
+                "defaultValue": "'end'"
             },
             "alignment": {
                 "type": "string",
@@ -479,7 +477,7 @@ export class XRadioGroup {
         return [{
                 "method": "xChange",
                 "name": "xChange",
-                "bubbles": true,
+                "bubbles": false,
                 "cancelable": true,
                 "composed": true,
                 "docs": {

package/dist/collection/components/x-range-picker/range-picker-dropdown-content/range-picker-dropdown-content.css

@@ -95,6 +95,7 @@
   --x-color-text-label: rgba(0, 0, 0, 0.65);
   --x-color-text-description: rgba(0, 0, 0, 0.45);
   --x-color-text-light-solid: #ffffff;
+  --x-color-text-processing: #ffffff;
   /** Background Colors **/
   --x-color-bg-container: #ffffff;
   --x-color-bg-elevated: #ffffff;
@@ -137,8 +138,10 @@
   --x-color-light-shade: #d7d8da;
   --x-color-light-tint: #f5f6f9;
   /** Font Family **/
-  --x-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-  --x-font-family-code: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
+  --x-font-family:
+    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
+    'Noto Color Emoji';
+  --x-font-family-code: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
   /** Font Sizes **/
   --x-font-size: 14px;
   --x-font-size-sm: 12px;
@@ -432,7 +435,8 @@
   border-collapse: collapse;
   table-layout: fixed;
 }
-.x-range-picker-content th, .x-range-picker-content td {
+.x-range-picker-content th,
+.x-range-picker-content td {
   position: relative;
   min-width: var(--x-picker-cell-size, 24px);
   font-weight: 400;

package/dist/collection/components/x-range-picker/range-picker-dropdown-content/range-picker-dropdown-content.js

@@ -606,7 +606,7 @@ export class XRangePickerDropdownContent {
             date: newDate,
             side,
             type,
-            value
+            value,
         });
     };
     // ==================== Render Methods ====================
@@ -617,7 +617,7 @@ export class XRangePickerDropdownContent {
     renderPresets() {
         if (!this.presets || this.presets.length === 0)
             return null;
-        return (h("div", { class: "x-range-picker-presets" }, h("ul", { class: "x-range-picker-presets-list" }, this.presets.map(preset => (h("li", { class: "x-range-picker-preset-item", onClick: (e) => this.handlePresetClick(e, preset) }, preset.label))))));
+        return (h("div", { class: "x-range-picker-presets" }, h("ul", { class: "x-range-picker-presets-list" }, this.presets.map(preset => (h("li", { class: "x-range-picker-preset-item", onClick: e => this.handlePresetClick(e, preset) }, preset.label))))));
     }
     /**
      * Render header for a panel.
@@ -632,10 +632,10 @@ export class XRangePickerDropdownContent {
         const startYear = Math.floor(year / 10) * 10 - 1;
         const showMonthNav = mode === 'date' || mode === 'week';
         const showDecadeNav = mode === 'year';
-        return (h("div", { class: "x-range-picker-header" }, h("button", { type: "button", class: "x-range-picker-header-btn super-prev-btn", tabIndex: -1, onClick: (e) => this.handleHeaderAction(e, showDecadeNav ? 'prevDecade' : 'prevYear', side) }, h("x-icon", { slot: "icon", name: getIcon('doubleArrowLeft') })), showMonthNav && (h("button", { type: "button", class: "x-range-picker-header-btn prev-btn", tabIndex: -1, onClick: (e) => this.handleHeaderAction(e, 'prevMonth', side) }, h("x-icon", { slot: "icon", name: getIcon('arrowLeft') }))), h("div", { class: "x-range-picker-header-view" }, mode === 'year' ? (h("span", { class: "x-range-picker-header-year-range" }, startYear + 1, "-", startYear + 10)) : ([
-            mode === 'date' && (h("button", { type: "button", class: "x-range-picker-header-month-btn", onClick: (e) => this.handlePanelModeChange(e, 'month', side) }, translate('DatePicker.lang.monthsFull', undefined, DEFAULT_MONTHS_FULL)[month])),
-            (mode === 'date' || mode === 'month' || mode === 'quarter') && (h("button", { type: "button", class: "x-range-picker-header-year-btn", onClick: (e) => this.handlePanelModeChange(e, 'year', side) }, year))
-        ])), showMonthNav && (h("button", { type: "button", class: "x-range-picker-header-btn next-btn", tabIndex: -1, onClick: (e) => this.handleHeaderAction(e, 'nextMonth', side) }, h("x-icon", { slot: "icon", name: getIcon('arrowRight') }))), h("button", { type: "button", class: "x-range-picker-header-btn super-next-btn", tabIndex: -1, onClick: (e) => this.handleHeaderAction(e, showDecadeNav ? 'nextDecade' : 'nextYear', side) }, h("x-icon", { slot: "icon", name: getIcon('doubleArrowRight') }))));
+        return (h("div", { class: "x-range-picker-header" }, h("button", { type: "button", class: "x-range-picker-header-btn super-prev-btn", tabIndex: -1, onClick: e => this.handleHeaderAction(e, showDecadeNav ? 'prevDecade' : 'prevYear', side) }, h("x-icon", { slot: "icon", name: getIcon('doubleArrowLeft') })), showMonthNav && (h("button", { type: "button", class: "x-range-picker-header-btn prev-btn", tabIndex: -1, onClick: e => this.handleHeaderAction(e, 'prevMonth', side) }, h("x-icon", { slot: "icon", name: getIcon('arrowLeft') }))), h("div", { class: "x-range-picker-header-view" }, mode === 'year' ? (h("span", { class: "x-range-picker-header-year-range" }, startYear + 1, "-", startYear + 10)) : ([
+            mode === 'date' && (h("button", { type: "button", class: "x-range-picker-header-month-btn", onClick: e => this.handlePanelModeChange(e, 'month', side) }, translate('DatePicker.lang.monthsFull', undefined, DEFAULT_MONTHS_FULL)[month])),
+            (mode === 'date' || mode === 'month' || mode === 'quarter') && (h("button", { type: "button", class: "x-range-picker-header-year-btn", onClick: e => this.handlePanelModeChange(e, 'year', side) }, year)),
+        ])), showMonthNav && (h("button", { type: "button", class: "x-range-picker-header-btn next-btn", tabIndex: -1, onClick: e => this.handleHeaderAction(e, 'nextMonth', side) }, h("x-icon", { slot: "icon", name: getIcon('arrowRight') }))), h("button", { type: "button", class: "x-range-picker-header-btn super-next-btn", tabIndex: -1, onClick: e => this.handleHeaderAction(e, showDecadeNav ? 'nextDecade' : 'nextYear', side) }, h("x-icon", { slot: "icon", name: getIcon('doubleArrowRight') }))));
     }
     /**
      * Render month selection body.
@@ -657,7 +657,7 @@ export class XRangePickerDropdownContent {
                     'x-range-picker-cell': true,
                     'x-range-picker-cell-in-view': true,
                     'x-range-picker-cell-today': isCurrentMonth,
-                }, onClick: (e) => this.handleMonthCellClick(e, month, _side) }, h("div", { class: "x-range-picker-cell-inner" }, month_short[month] || DEFAULT_MONTHS_SHORT[month])));
+                }, onClick: e => this.handleMonthCellClick(e, month, _side) }, h("div", { class: "x-range-picker-cell-inner" }, month_short[month] || DEFAULT_MONTHS_SHORT[month])));
         }))))))));
     }
     /**
@@ -678,7 +678,7 @@ export class XRangePickerDropdownContent {
                     'x-range-picker-cell': true,
                     'x-range-picker-cell-in-view': isInView,
                     'x-range-picker-cell-today': isCurrentYear,
-                }, onClick: (e) => this.handleYearCellClick(e, year, _side) }, h("div", { class: "x-range-picker-cell-inner" }, year)));
+                }, onClick: e => this.handleYearCellClick(e, year, _side) }, h("div", { class: "x-range-picker-cell-inner" }, year)));
         }))))))));
     }
     /**
@@ -690,7 +690,7 @@ export class XRangePickerDropdownContent {
     renderQuarterBody(_side, _viewDate) {
         const quarters = translate('DatePicker.lang.quarters', undefined, DEFAULT_QUARTERS);
         // Quarter Logic
-        return (h("div", { class: "x-range-picker-body" }, h("table", { class: "x-range-picker-content x-range-picker-quarter-panel" }, h("tbody", null, h("tr", null, [1, 2, 3, 4].map(q => (h("td", { class: "x-range-picker-cell x-range-picker-cell-in-view", onClick: (e) => this.handleQuarterCellClick(e, q, _side) }, h("div", { class: "x-range-picker-cell-inner" }, quarters[q - 1]?.label ?? DEFAULT_QUARTERS[q - 1] ?? `Q${q}`)))))))));
+        return (h("div", { class: "x-range-picker-body" }, h("table", { class: "x-range-picker-content x-range-picker-quarter-panel" }, h("tbody", null, h("tr", null, [1, 2, 3, 4].map(q => (h("td", { class: "x-range-picker-cell x-range-picker-cell-in-view", onClick: e => this.handleQuarterCellClick(e, q, _side) }, h("div", { class: "x-range-picker-cell-inner" }, quarters[q - 1]?.label ?? DEFAULT_QUARTERS[q - 1] ?? `Q${q}`)))))))));
     }
     /**
      * Render a time column for hours/minutes/seconds.
@@ -705,7 +705,7 @@ export class XRangePickerDropdownContent {
         return (h("div", { class: "x-range-picker-time-column" }, h("ul", { class: "x-range-picker-time-list" }, items.map(item => (h("li", { class: {
                 'x-range-picker-time-cell': true,
                 'x-range-picker-time-cell-selected': item === selectedValue,
-            }, onClick: (e) => this.handleTimeClick(e, type, item, side) }, h("div", { class: "x-range-picker-time-cell-inner" }, this.formatNumber(item))))))));
+            }, onClick: e => this.handleTimeClick(e, type, item, side) }, h("div", { class: "x-range-picker-time-cell-inner" }, this.formatNumber(item))))))));
     }
     /**
      * Render time selection body.
@@ -740,7 +740,7 @@ export class XRangePickerDropdownContent {
                     'x-range-picker-cell-range-end': day.isRangeEnd,
                     'x-range-picker-cell-disabled': day.isDisabled,
                     'x-range-picker-cell-hover': isHovered,
-                }, onClick: (e) => this.handleDateClick(e, day, side), onMouseEnter: (e) => this.handleDateHover(e, day, side) }, h("div", { class: "x-range-picker-cell-inner" }, day.date.getDate())));
+                }, onClick: e => this.handleDateClick(e, day, side), onMouseEnter: e => this.handleDateHover(e, day, side) }, h("div", { class: "x-range-picker-cell-inner" }, day.date.getDate())));
         }))))))));
     }
     /**
@@ -788,7 +788,7 @@ export class XRangePickerDropdownContent {
         return (h("div", { class: "x-range-picker-footer" }, h("div", { class: "x-range-picker-footer-ranges" }, h("button", { type: "button", class: {
                 'x-range-picker-ok-btn': true,
                 'x-range-picker-ok-btn-disabled': isDisabled,
-            }, disabled: isDisabled, onClick: (e) => this.handleOkClick(e) }, translate('DatePicker.lang.ok', {}, 'OK')))));
+            }, disabled: isDisabled, onClick: e => this.handleOkClick(e) }, translate('DatePicker.lang.ok', {}, 'OK')))));
     }
     /**
      * Render range picker dropdown content.
@@ -801,7 +801,7 @@ export class XRangePickerDropdownContent {
             'x-range-picker-dropdown': true,
             ...this.dropdownClasses,
         };
-        return (h("div", { key: '74f75fdac43cec3caed69138bb48e7a0e1e2ec7b', class: dropdownClasses, style: this.dropdownStyle, ref: this.setRef }, h("div", { key: 'b19c57889d00a313ca4ea8f0deb4a4dc5692c438', class: "x-range-picker-panel-container" }, this.renderPresets(), h("div", { key: '39a5880d6e990224ed9267c593384fa694864385', class: "x-range-picker-panels-wrapper" }, h("div", { key: '6099062ff9fbf819b778357e753efe42bc90858e', class: "x-range-picker-panels" }, this.renderPanel('left', this.leftViewDate), this.renderPanel('right', this.rightViewDate)), this.renderFooter()))));
+        return (h("div", { key: '638c3c0729c415627c5ea67dcc76463ed7ac3004', class: dropdownClasses, style: this.dropdownStyle, ref: this.setRef }, h("div", { key: '5e9dcd673555d1d60edd843420213f5ce5b067b3', class: "x-range-picker-panel-container" }, this.renderPresets(), h("div", { key: '18de474e9210ed48630f2d365fe3ba1ccafb874a', class: "x-range-picker-panels-wrapper" }, h("div", { key: 'beee460307d707e4ad69932c4d2696bd7ca4c7ff', class: "x-range-picker-panels" }, this.renderPanel('left', this.leftViewDate), this.renderPanel('right', this.rightViewDate)), this.renderFooter()))));
     }
     static get is() { return "x-range-picker-dropdown-content"; }
     static get originalStyleUrls() {

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

@@ -1,4 +1,4 @@
-import { Host, h, } from "@stencil/core";
+import { Host, h } from "@stencil/core";
 import { getIcon } from "../../utils/config";
 import { PortalController } from "../x-portal/portal-controller";
 import { translate } from "../../locales/locale.service";
@@ -37,10 +37,7 @@ export class XRangePicker {
      * @example
      * <x-range-picker placeholder={['From', 'To']}></x-range-picker>
      */
-    placeholder = [
-        translate('RangePicker.startPlaceholder', {}, 'Start date'),
-        translate('RangePicker.endPlaceholder', {}, 'End date'),
-    ];
+    placeholder = [translate('RangePicker.startPlaceholder', {}, 'Start date'), translate('RangePicker.endPlaceholder', {}, 'End date')];
     /**
      * Size of range picker.
      * @example
@@ -471,13 +468,7 @@ export class XRangePicker {
         const hours = String(date.getHours()).padStart(2, '0');
         const minutes = String(date.getMinutes()).padStart(2, '0');
         const seconds = String(date.getSeconds()).padStart(2, '0');
-        return this.format
-            .replace('YYYY', String(year))
-            .replace('MM', month)
-            .replace('DD', day)
-            .replace('HH', hours)
-            .replace('mm', minutes)
-            .replace('ss', seconds);
+        return this.format.replace('YYYY', String(year)).replace('MM', month).replace('DD', day).replace('HH', hours).replace('mm', minutes).replace('ss', seconds);
     }
     /**
      * Convert date to yyyy-mm-dd.
@@ -1060,23 +1051,23 @@ export class XRangePicker {
     render() {
         const hasValue = this.value?.start || this.value?.end;
         const showClear = this.allowClear && hasValue && !this.disabled && this.hovering;
-        return (h(Host, { key: '00e19a33c1014868a9633dbdc51b41ee3a05dc21', class: {
+        return (h(Host, { key: '0cf46d441d7e85bb09dc47b07d0d23f5d3cc7d55', class: {
                 'x-range-picker': true,
                 'x-range-picker-focused': this.focused,
                 'x-range-picker-disabled': this.disabled,
                 'x-range-picker-borderless': !this.bordered,
                 [`x-range-picker-${this.size}`]: true,
                 [`x-range-picker-status-${this.status}`]: !!this.status,
-            } }, h("div", { key: 'f00988e37cfc98011cfd6ed3fbad7b5a961eec26', ref: el => (this.wrapperRef = el), class: {
+            } }, h("div", { key: '878820b10e8302c4930784f1523d2971262a4f5b', ref: el => (this.wrapperRef = el), class: {
                 'x-range-picker-input': true,
                 'disabled': this.disabled,
-            }, onClick: () => this.openDropdown(), onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, h("div", { key: 'e1edad50e940ccfba7c8d94b2de866ec8a3d1bcf', class: "x-range-picker-input-wrapper" }, h("input", { key: 'a208a2d3ffdf282eeda0ebda1c76b3187d4fa25f', ref: el => (this.startInputRef = el), id: this.inputId, name: this.name ? `${this.name}_start` : undefined, type: "text", class: {
+            }, onClick: () => this.openDropdown(), onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, h("div", { key: '4cec5118d41e1becfcc76c4290eb36ba372d3c1b', class: "x-range-picker-input-wrapper" }, h("input", { key: '77cae3898340bb69e18ae6b4afe0339594236f34', ref: el => (this.startInputRef = el), id: this.inputId, name: this.name ? `${this.name}_start` : undefined, type: "text", class: {
                 'x-range-picker-input-start': true,
                 'x-range-picker-input-active': this.activeField === 'start',
-            }, value: this.startInputValue, placeholder: this.placeholder[0], disabled: this.disabled, readOnly: this.inputReadOnly || true, autoComplete: "off", onFocus: this.handleStartInputFocus, onBlur: this.handleInputBlur }), h("span", { key: '4879213dd2dfadedfa47fc6565a56dd381ed7719', class: "x-range-picker-separator" }, h("x-icon", { key: '308b44c0879bb6d1f4fa78ddc4df19d73bb3c4eb', name: "trending_flat", style: { fontSize: '12px', color: 'var(--x-color-text-quaternary)' } })), h("input", { key: '7d08499999e884c85f5f00a3c712285de6bb0458', ref: el => (this.endInputRef = el), name: this.name ? `${this.name}_end` : undefined, type: "text", class: {
+            }, value: this.startInputValue, placeholder: this.placeholder[0], disabled: this.disabled, readOnly: this.inputReadOnly || true, autoComplete: "off", onFocus: this.handleStartInputFocus, onBlur: this.handleInputBlur }), h("span", { key: '2ec2dbcbbd8ba5de5665f7ebf631adda039808e8', class: "x-range-picker-separator" }, h("x-icon", { key: 'fb465ba477c34f70b648d8216891f6bb11bf678f', name: "trending_flat", style: { fontSize: '12px', color: 'var(--x-color-text-quaternary)' } })), h("input", { key: '7ce94eba2520d4f975ccbf205fdb4addab6c3a4b', ref: el => (this.endInputRef = el), name: this.name ? `${this.name}_end` : undefined, type: "text", class: {
                 'x-range-picker-input-end': true,
                 'x-range-picker-input-active': this.activeField === 'end',
-            }, value: this.endInputValue, placeholder: this.placeholder[1], disabled: this.disabled, readOnly: this.inputReadOnly || true, autoComplete: "off", onFocus: this.handleEndInputFocus, onBlur: this.handleInputBlur })), h("span", { key: '420c892277f1def6e5c445b9682cbfacf332b1d8', class: "x-range-picker-suffix" }, showClear ? (h("span", { class: "x-range-picker-clear", onClick: e => this.handleClear(e) }, this.renderClearIcon())) : (h("span", { class: "x-range-picker-icon" }, this.renderCalendarIcon()))))));
+            }, value: this.endInputValue, placeholder: this.placeholder[1], disabled: this.disabled, readOnly: this.inputReadOnly || true, autoComplete: "off", onFocus: this.handleEndInputFocus, onBlur: this.handleInputBlur })), h("span", { key: 'd2907e7bf07c3178b19ded34a9a017d13c7249b4', class: "x-range-picker-suffix" }, showClear ? (h("span", { class: "x-range-picker-clear", onClick: e => this.handleClear(e) }, this.renderClearIcon())) : (h("span", { class: "x-range-picker-icon" }, this.renderCalendarIcon()))))));
     }
     static get is() { return "x-range-picker"; }
     static get encapsulation() { return "shadow"; }
@@ -1189,7 +1180,7 @@ export class XRangePicker {
                 },
                 "getter": false,
                 "setter": false,
-                "defaultValue": "[\r\n    translate('RangePicker.startPlaceholder', {}, 'Start date'),\r\n    translate('RangePicker.endPlaceholder', {}, 'End date'),\r\n  ]"
+                "defaultValue": "[translate('RangePicker.startPlaceholder', {}, 'Start date'), translate('RangePicker.endPlaceholder', {}, 'End date')]"
             },
             "size": {
                 "type": "string",