@xlabs-store/core 0.0.1 → 0.0.3

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

@@ -25,11 +25,11 @@ export class XTableCell {
      */
     customStyle;
     render() {
-        return (h(Host, { key: 'b22403e480e5211ff3e0fc2535748fc7ab09a0f2', class: {
+        return (h(Host, { key: 'fb9f5541f1822ac88a4cea73a230faf9debe7b39', class: {
                 'x-table-cell': true,
                 [`x-table-align-${this.align}`]: true,
                 [this.cellClass]: !!this.cellClass,
-            }, style: this.customStyle, role: "cell" }, h("slot", { key: '74cfc0323e58ef2a3cc4f1e18160126106ffcb3d' })));
+            }, style: this.customStyle, role: "cell" }, h("slot", { key: 'c2a761ffeb2b3d35ed96e2f93a937b79c75182f1' })));
     }
     static get is() { return "x-table-cell"; }
     static get originalStyleUrls() {

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

@@ -35,16 +35,19 @@ export class XTableRow {
         });
         this.customCellIndices = indices;
     }
-    getCellValue(record, dataIndex) {
-        if (!dataIndex || !record)
+    getCellValue(record, dataIndex, key) {
+        if (!record)
             return undefined;
-        if (Array.isArray(dataIndex)) {
-            return dataIndex.reduce((obj, k) => obj?.[k], record);
+        const prop = dataIndex || key;
+        if (!prop)
+            return undefined;
+        if (Array.isArray(prop)) {
+            return prop.reduce((obj, k) => obj?.[k], record);
         }
-        return record[dataIndex];
+        return record[prop];
     }
     renderAutoCell(column) {
-        const value = this.getCellValue(this.record, column.dataIndex);
+        const value = this.getCellValue(this.record, column.dataIndex, column.key);
         const content = column.render ? column.render(value, this.record, this.index) : value;
         const style = {};
         if (column.width) {
@@ -62,8 +65,8 @@ export class XTableRow {
             }, style: style, colSpan: column.colSpan, rowSpan: column.rowSpan }, content));
     }
     render() {
-        const cols = this.columns.length > 0 ? this.columns : (this.tableEl?.internalColumns || []);
-        return (h(Host, { key: '0ca38c484384fe3ad2ce5e6f3540ae7faa8c9f03', class: "x-table-row" }, cols.map(column => {
+        const cols = this.columns.length > 0 ? this.columns : this.tableEl?.internalColumns || [];
+        return (h(Host, { key: 'aa867bab96f5e3e9aa18e8094b79f5a106f80f19', class: "x-table-row" }, cols.map(column => {
             const dataIndex = (Array.isArray(column.dataIndex) ? column.dataIndex.join('.') : column.dataIndex) || column.key;
             if (dataIndex && this.customCellIndices.has(dataIndex)) {
                 return h("slot", { name: `cell-${dataIndex}` });

package/dist/collection/components/x-tabs/x-tabs.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;
@@ -505,6 +508,18 @@
   display: inline-block;
 }
 
+.x-tabs-tab-edit-input {
+  border: 1px solid var(--x-color-primary, #1677ff);
+  border-radius: 2px;
+  padding: 2px 4px;
+  font-size: inherit;
+  font-family: inherit;
+  width: 100px;
+  outline: none;
+  background: transparent;
+  color: inherit;
+}
+
 .x-tabs-tab-remove {
   display: inline-flex;
   align-items: center;

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

@@ -141,6 +141,11 @@ export class XTabs {
      * <x-tabs styles={{ header: { background: '#fff' } }}></x-tabs>
      */
     styles;
+    /**
+     * Whether tab labels can be renamed (via double click).
+     * @default false
+     */
+    editable = false;
     // ==================== Events ====================
     /**
      * Callback when active tab changes.
@@ -166,6 +171,12 @@ export class XTabs {
      * <x-tabs onXTabScroll={(ev) => console.log(ev.detail)}></x-tabs>
      */
     xTabScroll;
+    /**
+     * Callback when tab label is renamed.
+     * @example
+     * <x-tabs onXTabRename={(ev) => console.log(ev.detail)}></x-tabs>
+     */
+    xTabRename;
     // ==================== State ====================
     /**
      * Internal tab metadata list.
@@ -175,6 +186,14 @@ export class XTabs {
      * Ink bar inline style.
      */
     inkBarStyle = {};
+    /**
+     * Key of the tab currently being renamed.
+     */
+    editingKey = null;
+    /**
+     * Current value of the renaming input.
+     */
+    editingLabel = '';
     // ==================== Lifecycle ====================
     componentWillLoad() {
         if (!this.activeKey && this.defaultActiveKey) {
@@ -255,7 +274,7 @@ export class XTabs {
                 // Query slotted children from light DOM
                 const tabPanes = Array.from(this.el.children).filter((child) => child.tagName.toLowerCase() === 'x-tab-pane');
                 newTabs = tabPanes.map((pane) => ({
-                    key: pane.tabKey || pane.getAttribute('tab-key') || pane.getAttribute('key') || '',
+                    key: pane.paneKey || pane.key || pane.tabKey || pane.getAttribute('pane-key') || pane.getAttribute('key') || pane.getAttribute('tab-key') || '',
                     label: pane.tab || pane.getAttribute('tab') || '',
                     disabled: pane.disabled || pane.hasAttribute('disabled'),
                     closable: pane.closable !== false && pane.getAttribute('closable') !== 'false',
@@ -292,7 +311,7 @@ export class XTabs {
     updateChildren(activeKey) {
         const tabPanes = Array.from(this.el.children).filter((child) => child.tagName.toLowerCase() === 'x-tab-pane');
         tabPanes.forEach((pane) => {
-            const key = pane.getAttribute('key') || pane.getAttribute('tab-key') || pane.tabKey;
+            const key = pane.paneKey || pane.key || pane.tabKey || pane.getAttribute('pane-key') || pane.getAttribute('key') || pane.getAttribute('tab-key');
             const isActive = key === activeKey;
             if (pane.active !== isActive) {
                 pane.active = isActive;
@@ -384,6 +403,55 @@ export class XTabs {
             this.xChange.emit({ activeKey: key, previousKey });
         }
     };
+    /**
+     * Handle double click on a tab to start renaming.
+     * @param key - Tab key.
+     * @param label - Current tab label.
+     * @param e - Mouse event.
+     */
+    handleTabDoubleClick = (key, label, e) => {
+        if (!this.editable)
+            return;
+        e.stopPropagation();
+        this.editingKey = key;
+        this.editingLabel = label;
+    };
+    /**
+     * Handle renaming input changes.
+     * @param e - Change event.
+     */
+    handleLabelChange = (e) => {
+        this.editingLabel = e.target.value;
+    };
+    /**
+     * Handle renaming input blur or Enter key.
+     */
+    handleLabelSubmit = () => {
+        if (this.editingKey !== null) {
+            const tabIndex = this.tabs.findIndex(t => t.key === this.editingKey);
+            if (tabIndex !== -1 && this.tabs[tabIndex].label !== this.editingLabel) {
+                // Optimistic update
+                const newTabs = [...this.tabs];
+                newTabs[tabIndex] = { ...newTabs[tabIndex], label: this.editingLabel };
+                this.tabs = newTabs;
+                this.xTabRename.emit({ key: this.editingKey, label: this.editingLabel });
+            }
+        }
+        this.editingKey = null;
+        this.editingLabel = '';
+    };
+    /**
+     * Handle keydown in renaming input.
+     */
+    handleLabelKeyDown = (e) => {
+        if (e.key === 'Enter') {
+            this.handleLabelSubmit();
+        }
+        else if (e.key === 'Escape') {
+            this.editingKey = null;
+            this.editingLabel = '';
+        }
+    };
     /**
      * Emit add action for editable-card tabs.
      * @param e - Mouse event.
@@ -485,15 +553,15 @@ export class XTabs {
      */
     renderTabs() {
         const gutterStyle = this.getTabBarGutterStyle();
-        return this.tabs.map((tab) => (h("div", { "data-key": tab.key, class: {
+        return this.tabs.map(tab => (h("div", { "data-key": tab.key, class: {
                 'x-tabs-tab': true,
                 'x-tabs-tab-active': this.activeKey === tab.key,
                 'x-tabs-tab-disabled': tab.disabled,
                 [this.classNames?.item ?? '']: !!this.classNames?.item,
-            }, style: { ...gutterStyle, ...this.styles?.item }, onClick: (e) => this.handleTabClick(tab.key, tab.disabled, e), role: "tab", "aria-selected": this.activeKey === tab.key ? 'true' : 'false', "aria-disabled": tab.disabled ? 'true' : 'false', tabindex: tab.disabled ? -1 : 0 }, h("div", { class: "x-tabs-tab-btn" }, tab.icon && h("x-icon", { name: tab.icon, class: "x-tabs-tab-icon" }), h("span", { class: "x-tabs-tab-label" }, tab.label)), this.type === 'editable-card' && tab.closable && (h("button", { type: "button", class: {
+            }, style: { ...gutterStyle, ...this.styles?.item }, onClick: e => this.handleTabClick(tab.key, tab.disabled, e), role: "tab", "aria-selected": this.activeKey === tab.key ? 'true' : 'false', "aria-disabled": tab.disabled ? 'true' : 'false', tabindex: tab.disabled ? -1 : 0, onDblClick: e => this.handleTabDoubleClick(tab.key, tab.label, e) }, h("div", { class: "x-tabs-tab-btn" }, tab.icon && h("x-icon", { name: tab.icon, class: "x-tabs-tab-icon" }), this.editingKey === tab.key ? (h("input", { type: "text", class: "x-tabs-tab-edit-input", value: this.editingLabel, onInput: this.handleLabelChange, onBlur: this.handleLabelSubmit, onKeyDown: this.handleLabelKeyDown, ref: el => el?.focus(), onClick: e => e.stopPropagation() })) : (h("span", { class: "x-tabs-tab-label" }, tab.label))), this.type === 'editable-card' && tab.closable && (h("button", { type: "button", class: {
                 'x-tabs-tab-remove': true,
                 [this.classNames?.remove ?? '']: !!this.classNames?.remove,
-            }, style: this.styles?.remove, onClick: (e) => this.handleRemoveClick(tab.key, e), "aria-label": "Remove tab" }, this.renderRemoveIcon())))));
+            }, style: this.styles?.remove, onClick: e => this.handleRemoveClick(tab.key, e), "aria-label": "Remove tab" }, this.renderRemoveIcon())))));
     }
     /**
      * Render add button for editable-card tabs.
@@ -544,7 +612,7 @@ export class XTabs {
                 }
                 return (h("div", { class: {
                         'x-tabs-tabpane': true,
-                        'x-tabs-tabpane-active': isActive
+                        'x-tabs-tabpane-active': isActive,
                     }, key: item.key, role: "tabpanel", "aria-hidden": !isActive ? 'true' : 'false', style: { display: isActive ? 'block' : 'none' } }, item.children));
             });
         }
@@ -584,20 +652,20 @@ export class XTabs {
             ...this.tabBarStyle,
             ...this.styles?.header,
         };
-        return (h(Host, { key: '75b714ece12fb1a6f975efdc28fb39ec0dfc206a', class: classes, style: this.styles?.root }, h("div", { key: '333885c06f2da2589fcb55c98367ea5364a615a5', class: {
+        return (h(Host, { key: '3c25a51a4e1391091fe5736075b1e9f616bf2735', class: classes, style: this.styles?.root }, h("div", { key: '5da39a5306d18e4b401e072db022f95f1d96e62b', class: {
                 'x-tabs-nav': true,
                 [this.classNames?.header ?? '']: !!this.classNames?.header,
-            }, style: navStyle, role: "tablist" }, this.renderExtraContent('left'), h("div", { key: '982e919f467ebf5f170378cbbe7539d50234e66c', class: {
+            }, style: navStyle, role: "tablist" }, this.renderExtraContent('left'), h("div", { key: '0b04cb3ff938268c5052caf6a90049be9b9cc1b3', class: {
                 'x-tabs-nav-wrap': true,
                 [this.classNames?.nav ?? '']: !!this.classNames?.nav,
-            }, style: this.styles?.nav }, h("div", { key: '03d3159c78338984bb822c2d26a28b7bcd4413f5', class: "x-tabs-nav-list", ref: (el) => (this.navListEl = el) }, this.renderTabs(), this.renderAddButton(), this.type === 'line' && (h("div", { key: '7fa84f3fa0f53299e83c9c28c54344f7883bb284', class: {
+            }, style: this.styles?.nav }, h("div", { key: 'f7d849a84c65cc4f6b280e35e522bebd64988946', class: "x-tabs-nav-list", ref: el => (this.navListEl = el) }, this.renderTabs(), this.renderAddButton(), this.type === 'line' && (h("div", { key: '0bd7ec3f6f02d9aabaae028391195a807c41b393', class: {
                 'x-tabs-ink-bar': true,
                 'x-tabs-ink-bar-animated': this.isInkBarAnimated(),
                 [this.classNames?.indicator ?? '']: !!this.classNames?.indicator,
-            }, style: { ...this.inkBarStyle, ...this.styles?.indicator } })))), this.renderExtraContent('right')), h("div", { key: '362ef70990f92f33d63398cc2eca2019a03f605d', class: {
+            }, style: { ...this.inkBarStyle, ...this.styles?.indicator } })))), this.renderExtraContent('right')), h("div", { key: 'cc72e83f22ba37dc9e87bc29193f181d53110eb4', class: {
                 'x-tabs-content-holder': true,
                 [this.classNames?.content ?? '']: !!this.classNames?.content,
-            }, style: this.styles?.content }, h("div", { key: 'f930efcfc080942790e636f826cb293f72d23b7c', class: "x-tabs-content" }, this.renderContent()))));
+            }, style: this.styles?.content }, h("div", { key: 'ee8b25ea9953fc404962122c47e3fa9275b29ac3', class: "x-tabs-content" }, this.renderContent()))));
     }
     static get is() { return "x-tabs"; }
     static get encapsulation() { return "shadow"; }
@@ -1082,13 +1150,38 @@ export class XTabs {
                 },
                 "getter": false,
                 "setter": false
+            },
+            "editable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Whether tab labels can be renamed (via double click)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "editable",
+                "defaultValue": "false"
             }
         };
     }
     static get states() {
         return {
             "tabs": {},
-            "inkBarStyle": {}
+            "inkBarStyle": {},
+            "editingKey": {},
+            "editingLabel": {}
         };
     }
     static get events() {
@@ -1192,6 +1285,31 @@ export class XTabs {
                         }
                     }
                 }
+            }, {
+                "method": "xTabRename",
+                "name": "xTabRename",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-tabs onXTabRename={(ev) => console.log(ev.detail)}></x-tabs>"
+                        }],
+                    "text": "Callback when tab label is renamed."
+                },
+                "complexType": {
+                    "original": "TabsRenameEventDetail",
+                    "resolved": "TabsRenameEventDetail",
+                    "references": {
+                        "TabsRenameEventDetail": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-tabs/types.ts::TabsRenameEventDetail",
+                            "referenceLocation": "TabsRenameEventDetail"
+                        }
+                    }
+                }
             }];
     }
     static get methods() {

package/dist/collection/components/x-tag/x-tag.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;
@@ -988,7 +991,7 @@ a.x-tag-content:hover {
 }
 
 :host(.x-tag-processing.x-tag-solid) {
-  color: var(--x-tag-processing-color, var(--x-color-primary, #1677ff));
+  color: var(--x-color-text-processing, #fff);
   background: var(--x-tag-processing-color, var(--x-color-primary, #1677ff));
   border-color: var(--x-tag-processing-color, var(--x-color-primary, #1677ff));
 }

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

@@ -2,10 +2,7 @@ import { Host, h } from "@stencil/core";
 import { getIcon } from "../../utils/config";
 /* eslint-disable @typescript-eslint/no-inferrable-types */
 // Preset colors list
-const PRESET_COLORS = [
-    'magenta', 'red', 'volcano', 'orange', 'gold', 'lime', 'green',
-    'cyan', 'blue', 'geekblue', 'purple', 'pink'
-];
+const PRESET_COLORS = ['magenta', 'red', 'volcano', 'orange', 'gold', 'lime', 'green', 'cyan', 'blue', 'geekblue', 'purple', 'pink'];
 // Status colors
 const STATUS_COLORS = ['success', 'processing', 'error', 'warning', 'default'];
 /**

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

@@ -181,7 +181,7 @@ export class XTextarea {
      * @returns JSX.Element
      */
     render() {
-        return (h(Host, { key: '7336e2d3945d33f7a4ee8d18966d49c7dffff769', class: {
+        return (h(Host, { key: 'a355254490f3dfeea03090ea27adb5609b0c6997', class: {
                 'x-textarea-wrapper': true,
                 'x-textarea-wrapper-disabled': this.disabled,
                 'x-textarea-wrapper-focused': this.focused,
@@ -189,10 +189,10 @@ export class XTextarea {
                 'x-textarea-wrapper-warning': this.status === 'warning',
                 'x-textarea-wrapper-borderless': !this.bordered,
                 'x-textarea-show-count': this.showCount,
-            } }, h("textarea", { key: '662c51000b0f313ebba4cefe5249a32a6e4225a4', class: {
+            } }, h("textarea", { key: '2db5eed054c8ec736f141f3b6253d85d0c4728d2', class: {
                 'x-textarea': true,
                 'disabled': this.disabled,
-            }, disabled: this.disabled, maxLength: this.maxLength, value: this.value, placeholder: this.placeholder, rows: this.rows, onInput: (e) => this.handleInput(e), onKeyDown: (e) => this.handleKeyDown(e), onFocus: () => this.focused = true, onBlur: () => this.focused = false }), this.allowClear && this.value && (h("span", { key: '03d488cc303a172cffd64fe85f653f0f8a2620b7', class: "x-textarea-clear-icon", onClick: (e) => this.handleClear(e) }, h("span", { key: '88a02fb55371f35bc0a45159aee3bd324d706f7c', role: "img", "aria-label": "close-circle", class: "anticon anticon-close-circle" }, h("x-icon", { key: '976c1ef0428afb40a70fde38446d52952b37d57c', name: getIcon('clear') })))), this.showCount && (h("span", { key: '07e2ff90d325eba478d87f24305032194417c64c', class: "x-textarea-data-count", "data-count": `${this.value ? this.value.length : 0}${this.maxLength ? ` / ${this.maxLength}` : ''}` }, this.value ? this.value.length : 0, this.maxLength ? ` / ${this.maxLength}` : ''))));
+            }, disabled: this.disabled, maxLength: this.maxLength, value: this.value, placeholder: this.placeholder, rows: this.rows, onInput: e => this.handleInput(e), onKeyDown: e => this.handleKeyDown(e), onFocus: () => (this.focused = true), onBlur: () => (this.focused = false) }), this.allowClear && this.value && (h("span", { key: '457cf56e27cddf4b2d5351f6eafa72bcf5b86f75', class: "x-textarea-clear-icon", onClick: e => this.handleClear(e) }, h("span", { key: '57b0e1bb3952f84532d98d95c7e02732643fa75e', role: "img", "aria-label": "close-circle", class: "anticon anticon-close-circle" }, h("x-icon", { key: '1343997b5828fd7e9f26dd95c21543f4af01cb91', name: getIcon('clear') })))), this.showCount && (h("span", { key: '4b8a07811209e3dd777954f1c448e15b98382971', class: "x-textarea-data-count", "data-count": `${this.value ? this.value.length : 0}${this.maxLength ? ` / ${this.maxLength}` : ''}` }, this.value ? this.value.length : 0, this.maxLength ? ` / ${this.maxLength}` : ''))));
     }
     static get is() { return "x-textarea"; }
     static get encapsulation() { return "shadow"; }
@@ -235,7 +235,7 @@ export class XTextarea {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
-                    "original": "boolean | { minRows?: number, maxRows?: number }",
+                    "original": "boolean | { minRows?: number; maxRows?: number }",
                     "resolved": "boolean | { minRows?: number; maxRows?: number; }",
                     "references": {}
                 },
@@ -543,7 +543,7 @@ export class XTextarea {
                     "text": "Emitted when textarea resizes."
                 },
                 "complexType": {
-                    "original": "{ width: number, height: number }",
+                    "original": "{ width: number; height: number }",
                     "resolved": "{ width: number; height: number; }",
                     "references": {}
                 }

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

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

@@ -376,7 +376,7 @@ export class XTimePickerDropdownContent {
             'x-time-picker-dropdown': true,
             ...this.dropdownClasses,
         };
-        return (h("div", { key: '3c4e5876d6d701e948b9fa1ba6944ed225a356d5', class: dropdownClasses, style: this.dropdownStyle, ref: this.setRef }, h("div", { key: '17b6eaf9b968e0fea45aa628f81a97f44c363ac8', class: "x-time-picker-panel-container" }, h("div", { key: '6166ac632d61f8bb6d13620548a1183c634ffcef', class: "x-time-picker-panel" }, h("div", { key: '1f6d4742432bad83f3a79c9305d362d0607511f8', class: "x-time-picker-panel-content" }, this.renderHourColumn(), this.renderMinuteColumn(), this.showSecond && this.renderSecondColumn(), this.use12Hours && this.renderAmPmColumn())), this.renderFooter())));
+        return (h("div", { key: '97edd3b0d94eba870e63b0c6cd8f01ea51fdda6d', class: dropdownClasses, style: this.dropdownStyle, ref: this.setRef }, h("div", { key: '89c4fc6c324b7b69b4e9e84b06d3c901abb882e5', class: "x-time-picker-panel-container" }, h("div", { key: 'd0deb8978f7eba1e7a0c55c192d716db4046a225', class: "x-time-picker-panel" }, h("div", { key: 'f1eb527fa9e695cd62b61a7a09273bf67dbb997a', class: "x-time-picker-panel-content" }, this.renderHourColumn(), this.renderMinuteColumn(), this.showSecond && this.renderSecondColumn(), this.use12Hours && this.renderAmPmColumn())), this.renderFooter())));
     }
     static get is() { return "x-time-picker-dropdown-content"; }
     static get originalStyleUrls() {

package/dist/collection/components/x-time-picker/x-time-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-time-picker/x-time-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";
@@ -408,10 +408,7 @@ export class XTimePicker {
         const h = String(hour).padStart(2, '0');
         const m = String(this.selectedMinute).padStart(2, '0');
         const s = String(this.selectedSecond).padStart(2, '0');
-        let result = this.format
-            .replace('HH', h)
-            .replace('mm', m)
-            .replace('ss', s);
+        let result = this.format.replace('HH', h).replace('mm', m).replace('ss', s);
         if (this.use12Hours) {
             result = result.replace('A', this.selectedPeriod);
         }
@@ -737,10 +734,10 @@ export class XTimePicker {
             [`x-time-picker-${this.size}`]: true,
             [`x-time-picker-status-${this.status}`]: !!this.status,
         };
-        return (h(Host, { key: '2d1c34e7fdd47198cb3c7fcba371efeb0f0e52b1', class: hostClasses }, h("div", { key: '91556b58579b41e887d0290608d3a4137e517184', ref: el => (this.wrapperRef = el), class: {
+        return (h(Host, { key: '81eb647ce69e742751675837e2b50e699776b848', class: hostClasses }, h("div", { key: 'c3889902b2e9be9e0a673ee9c00bb15304d4ec4b', ref: el => (this.wrapperRef = el), class: {
                 'x-time-picker-wrapper': true,
                 'disabled': this.disabled,
-            }, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, h("div", { key: 'fbfdf3442817c35bb29f3c96bbe5c9aac017b6aa', class: "x-time-picker-input", onClick: () => this.openDropdown() }, h("input", { key: '4d7f00a4d18e7034b18a8271ff067bda17b186c5', 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 || true, autoComplete: "off", onFocus: this.handleInputFocus, onBlur: this.handleInputBlur })), h("span", { key: 'b04f94f4bf630ef4e93185f402e8cd4b19cb865d', class: "x-time-picker-suffix" }, showClear ? (h("span", { class: "x-time-picker-clear", onClick: e => this.handleClear(e) }, this.renderClearIcon())) : (h("span", { class: "x-time-picker-icon" }, this.renderClockIcon()))))));
+            }, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, h("div", { key: '91d43e895b98f44aabd84300678ccb620315a62f', class: "x-time-picker-input", onClick: () => this.openDropdown() }, h("input", { key: 'e55122bcc6f917b744615acbd5c3ea528a2bdb17', 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 || true, autoComplete: "off", onFocus: this.handleInputFocus, onBlur: this.handleInputBlur })), h("span", { key: '796c0d3878829f10a546d2dfca0deeff066a7031', class: "x-time-picker-suffix" }, showClear ? (h("span", { class: "x-time-picker-clear", onClick: e => this.handleClear(e) }, this.renderClearIcon())) : (h("span", { class: "x-time-picker-icon" }, this.renderClockIcon()))))));
     }
     static get is() { return "x-time-picker"; }
     static get encapsulation() { return "shadow"; }

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

@@ -34,12 +34,12 @@ export class XTimeline {
      * @returns JSX.Element
      */
     render() {
-        return (h(Host, { key: 'bfa7de885a1eb1d63564efe2e3938428a1bf8874', class: {
+        return (h(Host, { key: '3ea86739c3e85bbac4dc28785c146879e59ad958', class: {
                 'x-timeline': true,
                 [`x-timeline-${this.mode}`]: true,
                 'x-timeline-pending': !!this.pending,
                 'x-timeline-reverse': this.reverse,
-            } }, h("slot", { key: '97d47e6190366fcb459edb3dd8831d28303b8dec' }), this.pending && (h("x-timeline-item", { key: 'ee327f0aa491206b19d080f700f05bcf38b385c0', class: "x-timeline-item-pending" }, typeof this.pending === 'string' ? this.pending : h("slot", { name: "pending" })))));
+            } }, h("slot", { key: '1ecfaafa74e58ed37f8043d76727dbb6b678362d' }), this.pending && h("x-timeline-item", { key: '981272a9e177dc41c641791a3f66f8d5ce9d5ed4', class: "x-timeline-item-pending" }, typeof this.pending === 'string' ? this.pending : h("slot", { name: "pending" }))));
     }
     static get is() { return "x-timeline"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/x-timeline-item/x-timeline-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;