@xlabs-store/core 0.0.1 → 0.0.2

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

@@ -653,22 +653,18 @@ export class XDatePickerDropdownContent {
         const minuteStep = typeof this.minuteStep === 'number' && this.minuteStep > 0 ? this.minuteStep : 1;
         const secondStep = typeof this.secondStep === 'number' && this.secondStep > 0 ? this.secondStep : 1;
         const maxHours = this.use12Hours ? 12 : 24;
-        const hours = Array.from({ length: Math.ceil(maxHours / hourStep) }, (_, i) => this.use12Hours ? (i * hourStep) || 12 : i * hourStep);
+        const hours = Array.from({ length: Math.ceil(maxHours / hourStep) }, (_, i) => (this.use12Hours ? i * hourStep || 12 : i * hourStep));
         const minutes = Array.from({ length: Math.ceil(60 / minuteStep) }, (_, i) => i * minuteStep);
         const seconds = Array.from({ length: Math.ceil(60 / secondStep) }, (_, i) => i * secondStep);
         // Format selected time for display
-        const displayHour = this.use12Hours
-            ? (this.selectedHour % 12 || 12)
-            : this.selectedHour;
+        const displayHour = this.use12Hours ? this.selectedHour % 12 || 12 : this.selectedHour;
         const ampm = this.selectedHour >= 12 ? 'PM' : 'AM';
         const timeDisplay = this.use12Hours
             ? `${String(displayHour).padStart(2, '0')}:${String(this.selectedMinute).padStart(2, '0')}:${String(this.selectedSecond).padStart(2, '0')} ${ampm}`
             : `${String(this.selectedHour).padStart(2, '0')}:${String(this.selectedMinute).padStart(2, '0')}:${String(this.selectedSecond).padStart(2, '0')}`;
         return (h("div", { class: "x-picker-time-panel" }, h("div", { class: "x-picker-time-panel-header x-picker-header" }, h("span", { class: "x-picker-time-panel-header-title x-picker-header-view" }, timeDisplay)), h("div", { class: "x-picker-time-panel-content" }, h("div", { class: "x-picker-time-panel-column" }, h("div", { class: "x-picker-time-panel-column-header" }, translate('DatePicker.lang.hour', {}, 'Hour')), h("ul", { class: "x-picker-time-panel-column-list" }, hours.map(hour => (h("li", { class: {
                 'x-picker-time-panel-cell': true,
-                'x-picker-time-panel-cell-selected': this.use12Hours
-                    ? (this.selectedHour % 12 || 12) === hour
-                    : this.selectedHour === hour,
+                'x-picker-time-panel-cell-selected': this.use12Hours ? (this.selectedHour % 12 || 12) === hour : this.selectedHour === hour,
             }, onClick: () => this.handleTimeSelect('hour', hour) }, String(hour).padStart(2, '0')))))), h("div", { class: "x-picker-time-panel-column" }, h("div", { class: "x-picker-time-panel-column-header" }, translate('DatePicker.lang.minute', {}, 'Minute')), h("ul", { class: "x-picker-time-panel-column-list" }, minutes.map(minute => (h("li", { class: {
                 'x-picker-time-panel-cell': true,
                 'x-picker-time-panel-cell-selected': this.selectedMinute === minute,
@@ -729,10 +725,10 @@ export class XDatePickerDropdownContent {
             'x-picker-panel': true,
             'x-picker-panel-with-time': this.showTime && this.panelMode === 'date',
         };
-        return (h("div", { key: '145816e811eac10e03059d124ec05f659f1c9648', class: {
+        return (h("div", { key: '0d2b28945bc3e834646202b91ca7bd6371b189a1', class: {
                 'x-date-picker-dropdown': true,
                 ...this.dropdownClasses,
-            }, style: this.dropdownStyle, ref: this.setRef, part: "dropdown" }, h("div", { key: '1632f084bd43caa04c452e2b887c066b02269420', class: "x-picker-panel-container" }, this.showTime && this.panelMode === 'date' ? (
+            }, style: this.dropdownStyle, ref: this.setRef, part: "dropdown" }, h("div", { key: '85ca1a540cc7c89ad290351e816d4bef20119d61', class: "x-picker-panel-container" }, this.showTime && this.panelMode === 'date' ? (
         // Layout with date and time side by side
         h("div", { class: "x-picker-datetime-panel" }, h("div", { class: "x-picker-date-panel-wrapper" }, this.renderPanel()), h("div", { class: "x-picker-time-panel-wrapper" }, this.renderTimePanel()))) : (
         // Normal layout without time

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

@@ -1,4 +1,4 @@
-import { Host, h, } from "@stencil/core";
+import { Host, h } from "@stencil/core";
 import { PortalController } from "../x-portal/portal-controller";
 import { getIcon } from "../../utils/config";
 import { translate } from "../../locales/locale.service";
@@ -195,6 +195,10 @@ export class XDatePicker {
      * <x-date-picker weekStartDay={1}></x-date-picker>
      */
     weekStartDay = 0;
+    /**
+     * If true, and no value is provided, defaults to the first day of the current year.
+     */
+    useFirstDayOfYearDefault = false;
     // ========================================
     // STATE
     // ========================================
@@ -287,6 +291,14 @@ export class XDatePicker {
         else if (this.defaultPickerValue) {
             this.currentViewDate = this.parseDate(this.defaultPickerValue) || new Date();
         }
+        else if (this.useFirstDayOfYearDefault && !this.value && !this.defaultValue) {
+            const now = new Date();
+            const firstDay = new Date(now.getFullYear(), 0, 1);
+            this.value = firstDay.toISOString().split('T')[0];
+            this.currentViewDate = firstDay;
+            this.inputValue = this.formatDate(firstDay);
+            this.extractTime(firstDay);
+        }
         // Set initial panel mode based on picker prop
         this.panelMode = this.getInitialPanelMode();
     }
@@ -511,10 +523,7 @@ export class XDatePicker {
      * @returns Date | null
      */
     parseDate(dateStr) {
-        if (!dateStr)
-            return null;
-        const date = new Date(dateStr);
-        return isNaN(date.getTime()) ? null : date;
+        return this.parseInputValue(dateStr);
     }
     /**
      * Get the default format based on picker mode
@@ -876,7 +885,7 @@ export class XDatePicker {
             // Apply current time selection
             date.setHours(this.selectedHour, this.selectedMinute, this.selectedSecond);
         }
-        const dateStr = this.toDateString(date);
+        const dateStr = this.showTime ? date.toISOString() : this.toDateString(date);
         this.value = dateStr;
         this.inputValue = this.formatDate(date);
         this.currentViewDate = date;
@@ -1033,12 +1042,7 @@ export class XDatePicker {
         if (!inputValue || !inputValue.trim())
             return null;
         const value = inputValue.trim();
-        // Try direct ISO parse first
-        let date = new Date(value);
-        if (!isNaN(date.getTime()))
-            return date;
-        // Parse based on format
-        const format = this.format.toUpperCase();
+        const effectiveFormat = this.getEffectiveFormat().toUpperCase();
         // Common formats patterns
         const patterns = [
             {
@@ -1082,8 +1086,21 @@ export class XDatePicker {
                 parse: m => new Date(+m[3], +m[2] - 1, +m[1]),
             },
         ];
-        // Try to match input against all patterns
+        // 1. Try to match the input against the CURRENT effective format first
+        const preferredPattern = patterns.find(p => effectiveFormat.includes(p.format));
+        if (preferredPattern) {
+            const match = value.match(preferredPattern.regex);
+            if (match) {
+                const parsed = preferredPattern.parse(match);
+                if (parsed && !isNaN(parsed.getTime())) {
+                    return parsed;
+                }
+            }
+        }
+        // 2. Try to match input against all other patterns if preferred failed
         for (const pattern of patterns) {
+            if (preferredPattern && pattern.format === preferredPattern.format)
+                continue;
             const match = value.match(pattern.regex);
             if (match) {
                 const parsed = pattern.parse(match);
@@ -1092,22 +1109,27 @@ export class XDatePicker {
                 }
             }
         }
-        // Try parsing with flexible format (numbers only)
+        // 3. Try parsing with flexible format (numbers only)
         const numbersOnly = value.replace(/\D/g, '');
         if (numbersOnly.length === 8) {
+            let date;
             // Could be YYYYMMDD or DDMMYYYY
-            if (format.startsWith('YYYY')) {
+            if (effectiveFormat.startsWith('YYYY')) {
                 date = new Date(+numbersOnly.slice(0, 4), +numbersOnly.slice(4, 6) - 1, +numbersOnly.slice(6, 8));
             }
-            else if (format.startsWith('DD')) {
+            else if (effectiveFormat.startsWith('DD')) {
                 date = new Date(+numbersOnly.slice(4, 8), +numbersOnly.slice(2, 4) - 1, +numbersOnly.slice(0, 2));
             }
-            else if (format.startsWith('MM')) {
+            else if (effectiveFormat.startsWith('MM')) {
                 date = new Date(+numbersOnly.slice(4, 8), +numbersOnly.slice(0, 2) - 1, +numbersOnly.slice(2, 4));
             }
-            if (!isNaN(date.getTime()))
+            if (date && !isNaN(date.getTime()))
                 return date;
         }
+        // 4. Last resort: Try direct native parse
+        const nativeDate = new Date(value);
+        if (!isNaN(nativeDate.getTime()))
+            return nativeDate;
         return null;
     }
     /**
@@ -1138,7 +1160,7 @@ export class XDatePicker {
                 const date = this.parseInputValue(this.inputValue);
                 if (date && !this.isDateDisabled(date)) {
                     // Apply the date
-                    const dateStr = this.toDateString(date);
+                    const dateStr = this.showTime ? date.toISOString() : this.toDateString(date);
                     this.value = dateStr;
                     this.inputValue = this.formatDate(date);
                     this.currentViewDate = date;
@@ -1214,10 +1236,10 @@ export class XDatePicker {
             [`x-picker-${this.size}`]: true,
             [`x-picker-status-${this.status}`]: !!this.status,
         };
-        return (h(Host, { key: '2624f3204269edda5b9c6885849a1157373901a1', class: hostClasses }, h("div", { key: '8be5c72ac3f7d4ac6552307432d8352fe31a4a33', ref: el => (this.wrapperRef = el), class: {
+        return (h(Host, { key: '45b2eb27bef613a840e0586ab2398c3ae37af9af', class: hostClasses }, h("div", { key: '29282e58f048229e13070fbc6a5603f32bc8b53e', ref: el => (this.wrapperRef = el), class: {
                 'x-picker-wrapper': true,
                 'disabled': this.disabled,
-            } }, h("div", { key: '8e1effa81fc92a9dbfa5ab76427e19dd66e54517', class: "x-picker-input", onClick: () => this.openDropdown() }, h("input", { key: '4a10f356eac53d4c24366008f3562bd6caf7f2aa', ref: el => (this.inputRef = el), id: this.inputId, name: this.name, type: "text", value: this.inputValue, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.inputReadOnly, autoComplete: "off", onInput: e => this.handleInputChange(e), onFocus: e => this.handleInputFocus(e), onBlur: e => this.handleInputBlur(e) })), h("span", { key: 'ffca45dfa43ed2c0ad6324ad9035600a415b575d', class: "x-picker-suffix" }, showClear && (h("span", { key: '971d8462185669bdb60a3c0f42a0a7ba888fc340', class: "x-picker-clear", onClick: e => this.handleClear(e) }, this.renderClearIcon())), h("span", { key: '333fe7ff5344837b076608f0570eb161e5915297', class: "x-picker-icon", onClick: () => {
+            } }, h("div", { key: '2261b72bc994eb49ff031bf6a49de245fa866cc2', class: "x-picker-input", onClick: () => this.openDropdown() }, h("input", { key: '991644b34374641b47e42b6391480e68039c3293', ref: el => (this.inputRef = el), id: this.inputId, name: this.name, type: "text", value: this.inputValue, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.inputReadOnly, autoComplete: "off", onInput: e => this.handleInputChange(e), onFocus: e => this.handleInputFocus(e), onBlur: e => this.handleInputBlur(e) })), h("span", { key: 'ad9e4b0ba93cebb6cc6c9776efa4d0c7fca48d1f', class: "x-picker-suffix" }, showClear && (h("span", { key: '8b3427c81057c3d14f7c144f622a0b4be4613258', class: "x-picker-clear", onClick: e => this.handleClear(e) }, this.renderClearIcon())), h("span", { key: 'ee48cd831b1b96eb290097dc4eb41218935d39fe', class: "x-picker-icon", onClick: () => {
                 this.openDropdown();
                 this.inputRef?.focus();
             } }, this.renderCalendarIcon())))));
@@ -1402,7 +1424,7 @@ export class XDatePicker {
                             "name": "example",
                             "text": "<x-date-picker format=\"DD/MM/YYYY\"></x-date-picker>"
                         }],
-                    "text": "Date format for display (simplified: YYYY-MM-DD, DD/MM/YYYY, etc.)\r\nIf not specified, uses default format based on picker mode:\r\n- date: YYYY-MM-DD (or YYYY-MM-DD HH:mm:ss with showTime)\r\n- week: YYYY-wo\r\n- month: YYYY-MM\r\n- quarter: YYYY-[Q]Q\r\n- year: YYYY"
+                    "text": "Date format for display (simplified: YYYY-MM-DD, DD/MM/YYYY, etc.)\nIf not specified, uses default format based on picker mode:\n- date: YYYY-MM-DD (or YYYY-MM-DD HH:mm:ss with showTime)\n- week: YYYY-wo\n- month: YYYY-MM\n- quarter: YYYY-[Q]Q\n- year: YYYY"
                 },
                 "getter": false,
                 "setter": false,
@@ -1688,7 +1710,7 @@ export class XDatePicker {
                             "name": "example",
                             "text": "<x-date-picker disabledDate={(d) => d.startsWith('2026-01')}></x-date-picker>"
                         }],
-                    "text": "Function to determine if a date should be disabled\r\nAccepts date string 'YYYY-MM-DD' and returns boolean"
+                    "text": "Function to determine if a date should be disabled\nAccepts date string 'YYYY-MM-DD' and returns boolean"
                 },
                 "getter": false,
                 "setter": false
@@ -1914,6 +1936,26 @@ export class XDatePicker {
                 "reflect": false,
                 "attribute": "week-start-day",
                 "defaultValue": "0"
+            },
+            "useFirstDayOfYearDefault": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If true, and no value is provided, defaults to the first day of the current year."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "use-first-day-of-year-default",
+                "defaultValue": "false"
             }
         };
     }

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

@@ -195,13 +195,13 @@ export class XDescriptions {
         const hostStyle = {
             '--x-descriptions-column-count': String(this.currentColumn),
         };
-        return (h(Host, { key: '80c7abb0c07f2dbf15720fa8a448390d67b7e57f', class: {
+        return (h(Host, { key: '09d79fb2050c34d84cfae7c2b0daf915c52ad9c3', class: {
                 'x-descriptions': true,
                 'x-descriptions-bordered': this.bordered,
                 [`x-descriptions-${this.size}`]: true,
                 [`x-descriptions-${this.layout}`]: true,
                 'x-descriptions-colon': this.colon,
-            }, style: hostStyle }, this.descriptionTitle && (h("div", { key: 'f052a2bc9cb3950cd8445f808c797e0f7b164cc6', class: "x-descriptions-header" }, h("div", { key: '80a2919fdbb541d8979c3a650712d2f0f2636565', class: "x-descriptions-title" }, this.descriptionTitle), h("div", { key: 'df61e5f6bec9e46637f540213bbfbaa1d147601b', class: "x-descriptions-extra" }, h("slot", { key: 'a02e104beb1466f1ccb014f11ccc6a5d98cbb549', name: "extra" })))), h("div", { key: '54b9e0ff14c250ceed9e1996b58c0f22cc31cef0', class: "x-descriptions-view" }, h("table", { key: '20f839facd10f0884b833f01a31d1d7ad72bf4e5', class: "x-descriptions-table" }, h("tbody", { key: 'cb27649f93111306bb888eed28b62146caad1f30', class: "x-descriptions-tbody" }, this.renderItems())))));
+            }, style: hostStyle }, this.descriptionTitle && (h("div", { key: '618087addbbf809b8193f3d044ebf2fe5c197637', class: "x-descriptions-header" }, h("div", { key: '18fa1bc31f18ab68e4d0e508df988b4f38eef3c4', class: "x-descriptions-title" }, this.descriptionTitle), h("div", { key: 'a505767506cf1d95205267df120a30ef2881ca6f', class: "x-descriptions-extra" }, h("slot", { key: '3c9424298047ae941210cfb1007330e76e9eb208', name: "extra" })))), h("div", { key: '470c027ef682ce5e8ce348fa22e838cfad520f79', class: "x-descriptions-view" }, h("table", { key: '9cc0f29f7f44579864f014bf6d1d9650b81caebf', class: "x-descriptions-table" }, h("tbody", { key: '50d92f7b7874bc37dd5c7951dfe376868cb60f75', class: "x-descriptions-tbody" }, this.renderItems())))));
     }
     static get is() { return "x-descriptions"; }
     static get encapsulation() { return "shadow"; }
@@ -284,7 +284,7 @@ export class XDescriptions {
                             "name": "example",
                             "text": "<x-descriptions column={3}></x-descriptions>"
                         }],
-                    "text": "Number of columns in the descriptions list.\r\nCan be a number or responsive config object"
+                    "text": "Number of columns in the descriptions list.\nCan be a number or responsive config object"
                 },
                 "getter": false,
                 "setter": false,

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

@@ -87,15 +87,15 @@ export class XDescriptionsItem {
         const labelStyleStr = this.getLabelStyleString();
         const contentStyleStr = this.getContentStyleString();
         const colonText = this.colon ? ':' : '';
-        return (h(Host, { key: 'e515f7a3143de8b3725197672ecc06595fe22e89', class: {
+        return (h(Host, { key: '54ff636ef1c5526226721d649529df4bfc366c15', class: {
                 'x-descriptions-item': true,
             }, style: {
                 '--x-descriptions-item-span': String(this.span),
-                gridColumn: `span ${this.span}`,
-            } }, h("div", { key: '5b6bc34d8a88b4cf50757bdff6d1b7b495c9f6f6', class: "x-descriptions-item-container" }, this.label !== undefined && (h("span", { key: 'e8e8f92398544aece6f7aa5a1d695326ac0f0cd3', class: {
+                'gridColumn': `span ${this.span}`,
+            } }, h("div", { key: '04799bd563aac01321a9db330f1b8de4fc9e38e1', class: "x-descriptions-item-container" }, this.label !== undefined && (h("span", { key: 'a843c2a21da117a9a85a46117460f6f752b388d1', class: {
                 'x-descriptions-item-label': true,
                 'x-descriptions-item-label-colon': this.colon,
-            }, style: labelStyleStr ? { cssText: labelStyleStr } : undefined }, this.label, colonText)), h("span", { key: '72e7c2202bfbf1b84f640d034d91a42eff9d18e3', class: "x-descriptions-item-content", style: contentStyleStr ? { cssText: contentStyleStr } : undefined }, h("slot", { key: '58c6d86eb7d281171fe0eb94acf378b43bcbf6b5' })))));
+            }, style: labelStyleStr ? { cssText: labelStyleStr } : undefined }, this.label, colonText)), h("span", { key: 'd44550e4be47d613c4f1e9b5642edd38eadfa1aa', class: "x-descriptions-item-content", style: contentStyleStr ? { cssText: contentStyleStr } : undefined }, h("slot", { key: '2b6e5b5360da8aac71a6722d0f4daccbc1eaec3d' })))));
     }
     static get is() { return "x-descriptions-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -110,7 +110,7 @@ export class XDivider {
                 style['--x-divider-margin-right'] = orientationMargin;
             }
         }
-        return (h(Host, { key: 'c01c2f45c5bd8644531889d9787efb9afaa53e5f', class: classes, style: style }, type === 'horizontal' && hasContent && (h("span", { key: 'de69f4795c2069fe4844d087827f33c625759e9a', class: "x-divider-inner-text" }, h("slot", { key: 'cb0b0e462a05bd6035579554f5665a4baf52b856', onSlotchange: this.handleSlotChange }))), (!hasContent || type === 'vertical') && h("slot", { key: '054ecd7d528d560edffbf86722a1e8084f29890e', onSlotchange: this.handleSlotChange })));
+        return (h(Host, { key: 'c7c797375a3876c8a61a012f843d011f9302af3b', class: classes, style: style }, type === 'horizontal' && hasContent && (h("span", { key: 'fd265dbfbbc708a241aac92acac5d74b773beb2e', class: "x-divider-inner-text" }, h("slot", { key: 'ca7006d5293d384e2ec9cf1e986dcf934a87c886', onSlotchange: this.handleSlotChange }))), (!hasContent || type === 'vertical') && h("slot", { key: 'e0e2188a00dcb4586923e913580bf4871174af23', onSlotchange: this.handleSlotChange })));
     }
     static get is() { return "x-divider"; }
     static get encapsulation() { return "shadow"; }
@@ -158,7 +158,7 @@ export class XDivider {
                     "references": {
                         "DividerOrientation": {
                             "location": "local",
-                            "path": "E:/projects/fintvn/labs/packages/core/src/components/x-divider/x-divider.tsx",
+                            "path": "/run/media/cpanel/volumes/projects/fintvn/labs/packages/core/src/components/x-divider/x-divider.tsx",
                             "id": "src/components/x-divider/x-divider.tsx::DividerOrientation"
                         }
                     }
@@ -210,7 +210,7 @@ export class XDivider {
                     "references": {
                         "DividerType": {
                             "location": "local",
-                            "path": "E:/projects/fintvn/labs/packages/core/src/components/x-divider/x-divider.tsx",
+                            "path": "/run/media/cpanel/volumes/projects/fintvn/labs/packages/core/src/components/x-divider/x-divider.tsx",
                             "id": "src/components/x-divider/x-divider.tsx::DividerType"
                         }
                     }

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

@@ -160,12 +160,14 @@ export class XDrawer {
         const slot = this.el.shadowRoot?.querySelector(selector);
         if (slot) {
             const nodes = slot.assignedNodes({ flatten: true });
-            return nodes.map(node => {
+            return nodes
+                .map(node => {
                 if (node.nodeType === Node.ELEMENT_NODE) {
                     return node.outerHTML;
                 }
                 return node.textContent || '';
-            }).join('');
+            })
+                .join('');
         }
         return '';
     }
@@ -248,10 +250,10 @@ export class XDrawer {
      * @returns JSX.Element
      */
     render() {
-        return (h(Host, { key: 'a6ee04e45ff4d3e3a5f50ce4feecb7eae886d3f7', class: {
+        return (h(Host, { key: '5ff7c1a00e3c39e2b463491de24e7b8ed1d1755c', class: {
                 'x-drawer': true,
                 'x-drawer-open': this.open,
-            } }, h("div", { key: '22c1a3a583ba657353da9f317d0ab8fd9fd626aa', style: { display: 'none' } }, h("slot", { key: '4cc9b5ad72f7a05ba43a2cf97ac491972ec47483' }), h("slot", { key: '497cf0644134c8feec24f795f66ff311117ab06f', name: "title" }), h("slot", { key: 'b67c6ae93f61c6b54e6201ae953218e5b3ded5a5', name: "extra" }), h("slot", { key: '0a1abf0a54204cf749eafa1e177440ebb52b4469', name: "footer" }))));
+            } }, h("div", { key: '0066d10dfeb9ce27d0776f812f0d8b2da0717c2a', style: { display: 'none' } }, h("slot", { key: '8a3825d6bf3daaae32d28836d969b7e2ad58f477' }), h("slot", { key: '0f6e88dcd6dacaf5c7cf0616ee30f536a75fef16', name: "title" }), h("slot", { key: '91fe469e3a6b3642306facefe418b2d577e98d05', name: "extra" }), h("slot", { key: 'c74e03899b49afa630a5b65b3711825be501daba', name: "footer" }))));
     }
     static get is() { return "x-drawer"; }
     static get encapsulation() { return "shadow"; }

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

@@ -160,7 +160,7 @@ export class XDrawerContent {
         const isHorizontal = this.placement === 'left' || this.placement === 'right';
         const isVertical = this.placement === 'top' || this.placement === 'bottom';
         const wrapperStyle = {
-            zIndex: this.zIndex.toString()
+            zIndex: this.zIndex.toString(),
         };
         if (isHorizontal) {
             if (this.size === 'large') {
@@ -178,12 +178,12 @@ export class XDrawerContent {
                 wrapperStyle.height = typeof this.height === 'number' ? `${this.height}px` : this.height;
             }
         }
-        return (h("div", { key: '9bc1da305bc7864c081a8750119915c253a08577', class: {
+        return (h("div", { key: '200898650fb08063a53685785dfd0f228ac63543', class: {
                 'x-drawer-content-root': true,
                 'x-drawer-open': this.animatedOpen,
                 [`x-drawer-${this.placement}`]: true,
-                [`x-drawer-${this.size}`]: true
-            }, style: { zIndex: this.zIndex.toString() } }, this.mask && (h("div", { key: '32357867d64e5fab4ae6160e643d17c5d6418f03', class: "x-drawer-mask", onClick: this.handleMaskClick })), h("div", { key: '71fa2484467da96b60f92cd3f5cafa80624ae0f9', class: "x-drawer-content-wrapper", style: wrapperStyle }, h("div", { key: '643bde857e0fb88d9641eed6b5030af7db09f85e', class: "x-drawer-content" }, h("div", { key: 'b5dadf8077a2870ad10d017a352a2d38abb5338a', class: "x-drawer-wrapper-body" }, (this.drawerTitle || this.closable || this.extraContent) && (h("div", { key: '42eede558d8ab5073d3492bdbcd2022366a1bf38', class: "x-drawer-header" }, h("div", { key: '8467cc77c15c9f3559ab25aac7c455e7550db86b', class: "x-drawer-header-title" }, this.closable && (h("button", { key: '0d9dbb8e6710353a2061f8dda666d75091b07a22', class: "x-drawer-close", onClick: this.handleClose, "aria-label": translate('Drawer.close', {}, 'Close') }, h("x-icon", { key: '2633415133911e2d9e6b822d39ab8a6c8537aada', name: getIcon('close') }))), this.drawerTitle && (h("div", { key: '5fe7ece0ec1be9fd0a53aabeb3d60acb9eb54d11', class: "x-drawer-title" }, this.drawerTitle)), this.titleContent && (h("div", { key: '2857fbc547da07fc8134c2b8e87ee67a3809e95c', class: "x-drawer-title", innerHTML: this.titleContent }))), this.extraContent && (h("div", { key: 'e43e0264b362d6c57a48d0e88d1197bae0f3a0f8', class: "x-drawer-extra", innerHTML: this.extraContent })))), h("div", { key: '68f409491486ff98eaca4471957c34af826bb734', class: "x-drawer-body", innerHTML: this.bodyContent }), this.footerContent && (h("div", { key: '2213f2a69ee55635066e544d0b47ec29ca294a09', class: "x-drawer-footer", innerHTML: this.footerContent })))))));
+                [`x-drawer-${this.size}`]: true,
+            }, style: { zIndex: this.zIndex.toString() } }, this.mask && h("div", { key: 'f3d8620a78cac7546b5266eca3daa11988fb1989', class: "x-drawer-mask", onClick: this.handleMaskClick }), h("div", { key: '28baba14abe60fb3bb9b55412e370e333aa82d32', class: "x-drawer-content-wrapper", style: wrapperStyle }, h("div", { key: 'b0e834e38323e64df41e518ac62167425fae7b5c', class: "x-drawer-content" }, h("div", { key: '3bd526e409ba818e16ca65e1be20ef55ea4340c7', class: "x-drawer-wrapper-body" }, (this.drawerTitle || this.closable || this.extraContent) && (h("div", { key: 'd4ac40383b15e485a7f691211fd56a304ddc1c30', class: "x-drawer-header" }, h("div", { key: '9d0d8983a436d92adbd909cef5b8ab255c42d3fb', class: "x-drawer-header-title" }, this.closable && (h("button", { key: '27f5d5342d59394e8077582774087fa0a679d8f9', class: "x-drawer-close", onClick: this.handleClose, "aria-label": translate('Drawer.close', {}, 'Close') }, h("x-icon", { key: 'b94e36c04d808cc7855aa5a6b1ab2c869cc2d3fe', name: getIcon('close') }))), this.drawerTitle && h("div", { key: '5bc1f8883a12b5f3362414efbc87736bcd949354', class: "x-drawer-title" }, this.drawerTitle), this.titleContent && h("div", { key: '0f41e94123d15627c3fb95cfc6686ffe08caea94', class: "x-drawer-title", innerHTML: this.titleContent })), this.extraContent && h("div", { key: 'e65f359fb76b442efe1cde8129c8479d24d8bfef', class: "x-drawer-extra", innerHTML: this.extraContent }))), h("div", { key: '8fbe55f53dcc4ecbdaa55fe53d8cc785de45952e', class: "x-drawer-body", innerHTML: this.bodyContent }), this.footerContent && h("div", { key: 'e651e8f51be0795082262dc43959d21bad04d5f3', class: "x-drawer-footer", innerHTML: this.footerContent }))))));
     }
     static get is() { return "x-drawer-content"; }
     static get originalStyleUrls() {

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

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

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

@@ -90,7 +90,7 @@ export class XDropdownContent {
      * <x-dropdown-content overlayClasses={{ 'x-dropdown': true }}></x-dropdown-content>
      */
     render() {
-        return (h("div", { key: '3df424e623d42d803717f984c68072f310d9be6f', class: this.overlayClasses, style: this.overlayStyle, ref: this.setRef, onMouseEnter: (ev) => this.overlayMouseEnter?.(ev), onMouseLeave: (ev) => this.overlayMouseLeave?.(ev), part: "dropdown", role: "listbox", "aria-hidden": !this.isOpen }, this.showArrow && h("div", { key: '513147579a30a659637b8493cf1eeade67a41aa2', class: "x-dropdown-arrow", part: "arrow" }), h("div", { key: '61be59c9eb825d556e90ddbd6a46043407475f46', class: "x-dropdown-content" }, h("slot", { key: '22284a7a0fe300c49a6e614de55f34614d92c77d' }), h("slot", { key: '1cff971d7a6bdba672f1a9dc947cfcd2cc12ccc0', name: "overlay" }))));
+        return (h("div", { key: '9da366c1a116c96fa810607f8c24d3d95b7790d0', class: this.overlayClasses, style: this.overlayStyle, ref: this.setRef, onMouseEnter: ev => this.overlayMouseEnter?.(ev), onMouseLeave: ev => this.overlayMouseLeave?.(ev), part: "dropdown", role: "listbox", "aria-hidden": !this.isOpen }, this.showArrow && h("div", { key: '8681bc299919d4056cc475ceed3109d50b340e41', class: "x-dropdown-arrow", part: "arrow" }), h("div", { key: '0d0c158139f9ea894432cfd256aab6bae6066c8d', class: "x-dropdown-content" }, h("slot", { key: '30cef6b4ce75b7cc20998f1c9045e943020da27c' }), h("slot", { key: '2bca3cedbabb9b1657c584d74124650eb9f7bfd3', name: "overlay" }))));
     }
     static get is() { return "x-dropdown-content"; }
     static get originalStyleUrls() {

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