@xlabs-store/core 0.0.1 → 0.0.2

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

@@ -105,7 +105,7 @@ export class XCol {
         if (push)
             style['--x-col-push'] = push;
         // Responsive props - we will use classes to trigger media queries in CSS
-        // Note: This is a simplified implementation. 
+        // Note: This is a simplified implementation.
         // Ideally we would parse objects for xs={{ span: 4, offset: 2 }} etc.
         // For now we assume number/string for span.
         const classes = {
@@ -122,7 +122,7 @@ export class XCol {
             [`x-col-xl-${xl}`]: !!xl,
             [`x-col-xxl-${xxl}`]: !!xxl,
         };
-        return (h(Host, { key: 'c57cb3e4fe1339edc56b99ceb63db1a1c004b23d', class: classes, style: style }, h("slot", { key: '684f92fff73142aaee3461fb7830085db428306f' })));
+        return (h(Host, { key: '62dabfbfdde72a344b6ac6e6265a17811e3edcef', class: classes, style: style }, h("slot", { key: '415a40ec5d7e90bc275547c46a53cca92a00d060' })));
     }
     static get is() { return "x-col"; }
     static get encapsulation() { return "shadow"; }
@@ -147,7 +147,7 @@ export class XCol {
                     "references": {
                         "ColSpanType": {
                             "location": "local",
-                            "path": "E:/projects/fintvn/labs/packages/core/src/components/x-col/x-col.tsx",
+                            "path": "/run/media/cpanel/volumes/projects/fintvn/labs/packages/core/src/components/x-col/x-col.tsx",
                             "id": "src/components/x-col/x-col.tsx::ColSpanType"
                         }
                     }
@@ -175,7 +175,7 @@ export class XCol {
                     "references": {
                         "ColSpanType": {
                             "location": "local",
-                            "path": "E:/projects/fintvn/labs/packages/core/src/components/x-col/x-col.tsx",
+                            "path": "/run/media/cpanel/volumes/projects/fintvn/labs/packages/core/src/components/x-col/x-col.tsx",
                             "id": "src/components/x-col/x-col.tsx::ColSpanType"
                         }
                     }
@@ -203,7 +203,7 @@ export class XCol {
                     "references": {
                         "ColSpanType": {
                             "location": "local",
-                            "path": "E:/projects/fintvn/labs/packages/core/src/components/x-col/x-col.tsx",
+                            "path": "/run/media/cpanel/volumes/projects/fintvn/labs/packages/core/src/components/x-col/x-col.tsx",
                             "id": "src/components/x-col/x-col.tsx::ColSpanType"
                         }
                     }
@@ -231,7 +231,7 @@ export class XCol {
                     "references": {
                         "ColSpanType": {
                             "location": "local",
-                            "path": "E:/projects/fintvn/labs/packages/core/src/components/x-col/x-col.tsx",
+                            "path": "/run/media/cpanel/volumes/projects/fintvn/labs/packages/core/src/components/x-col/x-col.tsx",
                             "id": "src/components/x-col/x-col.tsx::ColSpanType"
                         }
                     }
@@ -259,7 +259,7 @@ export class XCol {
                     "references": {
                         "ColSpanType": {
                             "location": "local",
-                            "path": "E:/projects/fintvn/labs/packages/core/src/components/x-col/x-col.tsx",
+                            "path": "/run/media/cpanel/volumes/projects/fintvn/labs/packages/core/src/components/x-col/x-col.tsx",
                             "id": "src/components/x-col/x-col.tsx::ColSpanType"
                         }
                     }
@@ -287,7 +287,7 @@ export class XCol {
                     "references": {
                         "FlexType": {
                             "location": "local",
-                            "path": "E:/projects/fintvn/labs/packages/core/src/components/x-col/x-col.tsx",
+                            "path": "/run/media/cpanel/volumes/projects/fintvn/labs/packages/core/src/components/x-col/x-col.tsx",
                             "id": "src/components/x-col/x-col.tsx::FlexType"
                         }
                     }
@@ -315,7 +315,7 @@ export class XCol {
                     "references": {
                         "ColSpanType": {
                             "location": "local",
-                            "path": "E:/projects/fintvn/labs/packages/core/src/components/x-col/x-col.tsx",
+                            "path": "/run/media/cpanel/volumes/projects/fintvn/labs/packages/core/src/components/x-col/x-col.tsx",
                             "id": "src/components/x-col/x-col.tsx::ColSpanType"
                         }
                     }
@@ -343,7 +343,7 @@ export class XCol {
                     "references": {
                         "ColSpanType": {
                             "location": "local",
-                            "path": "E:/projects/fintvn/labs/packages/core/src/components/x-col/x-col.tsx",
+                            "path": "/run/media/cpanel/volumes/projects/fintvn/labs/packages/core/src/components/x-col/x-col.tsx",
                             "id": "src/components/x-col/x-col.tsx::ColSpanType"
                         }
                     }
@@ -371,7 +371,7 @@ export class XCol {
                     "references": {
                         "ColSpanType": {
                             "location": "local",
-                            "path": "E:/projects/fintvn/labs/packages/core/src/components/x-col/x-col.tsx",
+                            "path": "/run/media/cpanel/volumes/projects/fintvn/labs/packages/core/src/components/x-col/x-col.tsx",
                             "id": "src/components/x-col/x-col.tsx::ColSpanType"
                         }
                     }
@@ -399,7 +399,7 @@ export class XCol {
                     "references": {
                         "ColSpanType": {
                             "location": "local",
-                            "path": "E:/projects/fintvn/labs/packages/core/src/components/x-col/x-col.tsx",
+                            "path": "/run/media/cpanel/volumes/projects/fintvn/labs/packages/core/src/components/x-col/x-col.tsx",
                             "id": "src/components/x-col/x-col.tsx::ColSpanType"
                         }
                     }
@@ -427,7 +427,7 @@ export class XCol {
                     "references": {
                         "ColSpanType": {
                             "location": "local",
-                            "path": "E:/projects/fintvn/labs/packages/core/src/components/x-col/x-col.tsx",
+                            "path": "/run/media/cpanel/volumes/projects/fintvn/labs/packages/core/src/components/x-col/x-col.tsx",
                             "id": "src/components/x-col/x-col.tsx::ColSpanType"
                         }
                     }
@@ -455,7 +455,7 @@ export class XCol {
                     "references": {
                         "ColSpanType": {
                             "location": "local",
-                            "path": "E:/projects/fintvn/labs/packages/core/src/components/x-col/x-col.tsx",
+                            "path": "/run/media/cpanel/volumes/projects/fintvn/labs/packages/core/src/components/x-col/x-col.tsx",
                             "id": "src/components/x-col/x-col.tsx::ColSpanType"
                         }
                     }

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

@@ -1,4 +1,4 @@
-import { Host, h, } from "@stencil/core";
+import { Host, h } from "@stencil/core";
 /* eslint-disable @typescript-eslint/no-inferrable-types */
 export class XCollapse {
     el;
@@ -172,7 +172,7 @@ export class XCollapse {
         }
         // Emit change event
         this.xChange.emit({
-            key: this.accordion ? (this.internalActiveKey[0] || '') : this.internalActiveKey,
+            key: this.accordion ? this.internalActiveKey[0] || '' : this.internalActiveKey,
         });
         this.updatePanels();
     }
@@ -270,7 +270,7 @@ export class XCollapse {
      * </x-collapse>
      */
     render() {
-        return (h(Host, { key: '26be5fd2272a1777b5ad50bec1a095bd2dbc0e1a', class: this.getHostClasses() }, h("slot", { key: 'd5760d3acccd6085e6d8b415c456afd246bbd769', onSlotchange: this.handleSlotChange })));
+        return (h(Host, { key: '067b1c06d32a271ea896cb110990b19caac22ae4', class: this.getHostClasses() }, h("slot", { key: '586e3bfd2f77e9e72df962e99d3aed80dda7d080', onSlotchange: this.handleSlotChange })));
     }
     static get is() { return "x-collapse"; }
     static get encapsulation() { return "shadow"; }
@@ -412,7 +412,7 @@ export class XCollapse {
                             "name": "example",
                             "text": "<x-collapse collapsible=\"icon\"></x-collapse>"
                         }],
-                    "text": "Specify whether the panel be collapsible or the trigger area of collapsible\r\n- header: Click header to collapse\r\n- icon: Click icon to collapse\r\n- disabled: Cannot collapse"
+                    "text": "Specify whether the panel be collapsible or the trigger area of collapsible\n- header: Click header to collapse\n- icon: Click icon to collapse\n- disabled: Cannot collapse"
                 },
                 "getter": false,
                 "setter": false,

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

@@ -1,4 +1,4 @@
-import { Host, h, } from "@stencil/core";
+import { Host, h } from "@stencil/core";
 import { getIcon } from "../../utils/config";
 /* eslint-disable @typescript-eslint/no-inferrable-types */
 export class XCollapsePanel {
@@ -222,7 +222,7 @@ export class XCollapsePanel {
      * <x-collapse-panel header="Header">Content</x-collapse-panel>
      */
     render() {
-        return (h(Host, { key: '7fbbc1f036d13b94304253006760d2afaae1c51b', class: this.getHostClasses() }, this.renderHeader(), this.renderContent()));
+        return (h(Host, { key: '6f8257919ec7f0395d1787d62795d9b48edef810', class: this.getHostClasses() }, this.renderHeader(), this.renderContent()));
     }
     static get is() { return "x-collapse-panel"; }
     static get encapsulation() { return "shadow"; }
@@ -350,7 +350,7 @@ export class XCollapsePanel {
                             "name": "example",
                             "text": "<x-collapse-panel collapsible=\"disabled\"></x-collapse-panel>"
                         }],
-                    "text": "Collapsible mode for this specific item\r\n- header: Click header to collapse\r\n- icon: Click icon to collapse\r\n- disabled: Cannot collapse"
+                    "text": "Collapsible mode for this specific item\n- header: Click header to collapse\n- icon: Click icon to collapse\n- disabled: Cannot collapse"
                 },
                 "getter": false,
                 "setter": false,
@@ -372,7 +372,7 @@ export class XCollapsePanel {
                             "name": "example",
                             "text": "<x-collapse-panel active></x-collapse-panel>"
                         }],
-                    "text": "Whether the panel is currently active (expanded)\r\nControlled by parent x-collapse"
+                    "text": "Whether the panel is currently active (expanded)\nControlled by parent x-collapse"
                 },
                 "getter": false,
                 "setter": false,

package/dist/collection/components/x-color-picker/x-color-picker-panel.js

@@ -253,7 +253,7 @@ export class XColorPickerPanel {
             { value: 'rgb', label: 'RGB' },
             { value: 'hsb', label: 'HSB' },
         ];
-        return (h("div", { class: "x-color-picker-format-dropdown" }, h("button", { type: "button", class: "x-color-picker-format-trigger", onClick: this.toggleFormatDropdown, onBlur: () => setTimeout(this.closeFormatDropdown, 150) }, h("span", null, this.format.toUpperCase()), h("svg", { class: { 'x-color-picker-format-arrow': true, 'is-open': this.formatDropdownOpen }, viewBox: "64 64 896 896", width: "1em", height: "1em", fill: "currentColor" }, h("path", { d: "M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z" }))), this.formatDropdownOpen && (h("div", { class: "x-color-picker-format-menu" }, formats.map((f) => (h("div", { class: {
+        return (h("div", { class: "x-color-picker-format-dropdown" }, h("button", { type: "button", class: "x-color-picker-format-trigger", onClick: this.toggleFormatDropdown, onBlur: () => setTimeout(this.closeFormatDropdown, 150) }, h("span", null, this.format.toUpperCase()), h("svg", { class: { 'x-color-picker-format-arrow': true, 'is-open': this.formatDropdownOpen }, viewBox: "64 64 896 896", width: "1em", height: "1em", fill: "currentColor" }, h("path", { d: "M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z" }))), this.formatDropdownOpen && (h("div", { class: "x-color-picker-format-menu" }, formats.map(f => (h("div", { class: {
                 'x-color-picker-format-option': true,
                 'is-selected': this.format === f.value,
             }, onClick: () => this.handleFormatChange(f.value) }, f.label)))))));
@@ -266,19 +266,17 @@ export class XColorPickerPanel {
             return (h("div", { class: "x-color-picker-input-group" }, h("div", { class: "x-color-picker-input-wrapper" }, h("input", { type: "text", class: "x-color-picker-input x-color-picker-input-hex", value: color.toHex().toUpperCase(), maxLength: 8, onChange: this.handleHexInputChange }), h("span", { class: "x-color-picker-input-label" }, "#")), !this.disabledAlpha && (h("div", { class: "x-color-picker-input-wrapper x-color-picker-input-alpha-wrapper" }, h("input", { type: "number", class: "x-color-picker-input x-color-picker-input-alpha", value: Math.round(rgb.a * 100), min: 0, max: 100, onChange: this.handleAlphaInputChange }), h("span", { class: "x-color-picker-input-label" }, "%")))));
         }
         else if (this.format === 'rgb') {
-            return (h("div", { class: "x-color-picker-input-group" }, h("div", { class: "x-color-picker-input-wrapper" }, h("input", { type: "number", class: "x-color-picker-input", value: Math.round(rgb.r), min: 0, max: 255, onChange: (e) => this.handleRgbInputChange(0, e) }), h("span", { class: "x-color-picker-input-label" }, "R")), h("div", { class: "x-color-picker-input-wrapper" }, h("input", { type: "number", class: "x-color-picker-input", value: Math.round(rgb.g), min: 0, max: 255, onChange: (e) => this.handleRgbInputChange(1, e) }), h("span", { class: "x-color-picker-input-label" }, "G")), h("div", { class: "x-color-picker-input-wrapper" }, h("input", { type: "number", class: "x-color-picker-input", value: Math.round(rgb.b), min: 0, max: 255, onChange: (e) => this.handleRgbInputChange(2, e) }), h("span", { class: "x-color-picker-input-label" }, "B")), !this.disabledAlpha && (h("div", { class: "x-color-picker-input-wrapper x-color-picker-input-alpha-wrapper" }, h("input", { type: "number", class: "x-color-picker-input x-color-picker-input-alpha", value: Math.round(rgb.a * 100), min: 0, max: 100, onChange: this.handleAlphaInputChange }), h("span", { class: "x-color-picker-input-label" }, "%")))));
+            return (h("div", { class: "x-color-picker-input-group" }, h("div", { class: "x-color-picker-input-wrapper" }, h("input", { type: "number", class: "x-color-picker-input", value: Math.round(rgb.r), min: 0, max: 255, onChange: e => this.handleRgbInputChange(0, e) }), h("span", { class: "x-color-picker-input-label" }, "R")), h("div", { class: "x-color-picker-input-wrapper" }, h("input", { type: "number", class: "x-color-picker-input", value: Math.round(rgb.g), min: 0, max: 255, onChange: e => this.handleRgbInputChange(1, e) }), h("span", { class: "x-color-picker-input-label" }, "G")), h("div", { class: "x-color-picker-input-wrapper" }, h("input", { type: "number", class: "x-color-picker-input", value: Math.round(rgb.b), min: 0, max: 255, onChange: e => this.handleRgbInputChange(2, e) }), h("span", { class: "x-color-picker-input-label" }, "B")), !this.disabledAlpha && (h("div", { class: "x-color-picker-input-wrapper x-color-picker-input-alpha-wrapper" }, h("input", { type: "number", class: "x-color-picker-input x-color-picker-input-alpha", value: Math.round(rgb.a * 100), min: 0, max: 100, onChange: this.handleAlphaInputChange }), h("span", { class: "x-color-picker-input-label" }, "%")))));
         }
         else {
-            return (h("div", { class: "x-color-picker-input-group" }, h("div", { class: "x-color-picker-input-wrapper" }, h("input", { type: "number", class: "x-color-picker-input", value: Math.round(hsb.h), min: 0, max: 360, onChange: (e) => this.handleHsbInputChange(0, e) }), h("span", { class: "x-color-picker-input-label" }, "H")), h("div", { class: "x-color-picker-input-wrapper" }, h("input", { type: "number", class: "x-color-picker-input", value: Math.round(hsb.s * 100), min: 0, max: 100, onChange: (e) => this.handleHsbInputChange(1, e) }), h("span", { class: "x-color-picker-input-label" }, "S")), h("div", { class: "x-color-picker-input-wrapper" }, h("input", { type: "number", class: "x-color-picker-input", value: Math.round(hsb.b * 100), min: 0, max: 100, onChange: (e) => this.handleHsbInputChange(2, e) }), h("span", { class: "x-color-picker-input-label" }, "B")), !this.disabledAlpha && (h("div", { class: "x-color-picker-input-wrapper x-color-picker-input-alpha-wrapper" }, h("input", { type: "number", class: "x-color-picker-input x-color-picker-input-alpha", value: Math.round(hsb.a * 100), min: 0, max: 100, onChange: this.handleAlphaInputChange }), h("span", { class: "x-color-picker-input-label" }, "%")))));
+            return (h("div", { class: "x-color-picker-input-group" }, h("div", { class: "x-color-picker-input-wrapper" }, h("input", { type: "number", class: "x-color-picker-input", value: Math.round(hsb.h), min: 0, max: 360, onChange: e => this.handleHsbInputChange(0, e) }), h("span", { class: "x-color-picker-input-label" }, "H")), h("div", { class: "x-color-picker-input-wrapper" }, h("input", { type: "number", class: "x-color-picker-input", value: Math.round(hsb.s * 100), min: 0, max: 100, onChange: e => this.handleHsbInputChange(1, e) }), h("span", { class: "x-color-picker-input-label" }, "S")), h("div", { class: "x-color-picker-input-wrapper" }, h("input", { type: "number", class: "x-color-picker-input", value: Math.round(hsb.b * 100), min: 0, max: 100, onChange: e => this.handleHsbInputChange(2, e) }), h("span", { class: "x-color-picker-input-label" }, "B")), !this.disabledAlpha && (h("div", { class: "x-color-picker-input-wrapper x-color-picker-input-alpha-wrapper" }, h("input", { type: "number", class: "x-color-picker-input x-color-picker-input-alpha", value: Math.round(hsb.a * 100), min: 0, max: 100, onChange: this.handleAlphaInputChange }), h("span", { class: "x-color-picker-input-label" }, "%")))));
         }
     }
     renderPresets() {
         if (!this.presets || this.presets.length === 0)
             return null;
-        return this.presets.map((preset) => (h("div", { class: "x-color-picker-presets" }, preset.label && (h("div", { class: "x-color-picker-presets-label" }, h("span", null, preset.label))), h("div", { class: "x-color-picker-presets-colors" }, preset.colors.map((presetColor) => {
-            const colorStr = typeof presetColor === 'string'
-                ? presetColor
-                : presetColor.color || '#000';
+        return this.presets.map(preset => (h("div", { class: "x-color-picker-presets" }, preset.label && (h("div", { class: "x-color-picker-presets-label" }, h("span", null, preset.label))), h("div", { class: "x-color-picker-presets-colors" }, preset.colors.map(presetColor => {
+            const colorStr = typeof presetColor === 'string' ? presetColor : presetColor.color || '#000';
             return (h("div", { class: "x-color-picker-preset-color", onClick: () => this.handlePresetColorClick(colorStr) }, h("div", { class: "x-color-picker-preset-color-inner", style: { background: colorStr } })));
         })))));
     }
@@ -286,7 +284,7 @@ export class XColorPickerPanel {
         if (!this.color)
             return null;
         const hsb = this.color.toHsb();
-        return (h("div", { class: "x-color-picker-panel" }, h("div", { class: "x-color-picker-palette", ref: (el) => (this.paletteRef = el), style: { background: `hsl(${hsb.h}, 100%, 50%)` }, onMouseDown: this.handlePaletteMouseDown }, h("div", { class: "x-color-picker-palette-saturation" }), h("div", { class: "x-color-picker-palette-brightness" }), h("div", { class: "x-color-picker-palette-handler", style: {
+        return (h("div", { class: "x-color-picker-panel" }, h("div", { class: "x-color-picker-palette", ref: el => (this.paletteRef = el), style: { background: `hsl(${hsb.h}, 100%, 50%)` }, onMouseDown: this.handlePaletteMouseDown }, h("div", { class: "x-color-picker-palette-saturation" }), h("div", { class: "x-color-picker-palette-brightness" }), h("div", { class: "x-color-picker-palette-handler", style: {
                 left: `${hsb.s * 100}%`,
                 top: `${(1 - hsb.b) * 100}%`,
                 background: this.color.toHexString(),

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

@@ -1,4 +1,4 @@
-import { Host, h, } from "@stencil/core";
+import { Host, h } from "@stencil/core";
 import { PortalController } from "../x-portal";
 import { getIcon } from "../../utils/config";
 import { createColor } from "./types";
@@ -105,6 +105,13 @@ export class XColorPicker {
      * <x-color-picker trigger="hover"></x-color-picker>
      */
     trigger = 'click';
+    /**
+     * Trigger element type
+     * @default 'default'
+     * @example
+     * <x-color-picker triggerType="button"></x-color-picker>
+     */
+    triggerType = 'default';
     /**
      * Value of color
      * @example
@@ -530,16 +537,36 @@ export class XColorPicker {
             'x-color-picker-disabled': this.disabled,
             [this.classNames?.root ?? '']: !!this.classNames?.root,
         };
-        const colorValue = this.internalColor && !this.isCleared
-            ? this.internalColor.toCssString()
-            : 'transparent';
-        return (h(Host, { key: 'f8f38365b7fd8c36aac0d9dc1799fc568516fea9', class: hostClasses, style: this.styles?.root }, h("div", { key: '8df150a9ac5477f34c21ef391c6a110a9518127e', class: "x-color-picker-trigger", ref: (el) => (this.triggerRef = el), onClick: this.handleTriggerClick, onMouseEnter: this.handleTriggerMouseEnter, onMouseLeave: this.handleTriggerMouseLeave, tabindex: this.disabled ? -1 : 0, role: "button", "aria-haspopup": "true", "aria-expanded": this.internalOpen ? 'true' : 'false' }, h("slot", { key: '77c612bde00f68546e52eb30351f9e26c724bbd8' }, h("div", { key: '19ddcbfc6acea0c985d263abeae54facb1878856', class: {
-                'x-color-picker-color-block': true,
-                'x-color-picker-color-block-cleared': this.isCleared,
-            } }, h("div", { key: 'd6223ba45365f694a1b760fc0779273903a3e080', class: "x-color-picker-color-block-inner", style: { background: colorValue } })), this.showText && (h("span", { key: 'b80debccfafa45df16aeabedfafcc9e0721a3a4d', class: "x-color-picker-text" }, this.getDisplayText())), this.allowClear && !this.isCleared && this.internalColor && (h("span", { key: '8caa5439b9ad31915420be95deb94eff604bc411', class: "x-color-picker-clear", onClick: this.handleClear }, this.renderCloseIcon())), h("span", { key: 'ed22036212268e812ebfe9869918cd31fcebaaef', class: {
-                'x-color-picker-arrow': true,
-                'x-color-picker-arrow-open': this.internalOpen,
-            } }, this.renderDownArrow())))));
+        const colorValue = this.internalColor && !this.isCleared ? this.internalColor.toCssString() : 'transparent';
+        const triggerProps = {
+            ref: el => (this.triggerRef = el),
+            onClick: this.handleTriggerClick,
+            onMouseEnter: this.handleTriggerMouseEnter,
+            onMouseLeave: this.handleTriggerMouseLeave,
+            tabindex: this.disabled ? -1 : 0,
+            'aria-haspopup': 'true',
+            'aria-expanded': this.internalOpen ? 'true' : 'false',
+        };
+        let triggerElement;
+        if (this.triggerType === 'button') {
+            triggerElement = (h("x-button", { key: '0566d5ae3fe8afd3a8eb5e07a5d0b79458c0364f', ...triggerProps, disabled: this.disabled, size: this.size }, h("slot", { key: '366f04861c72e52c7c912ed09c1b07d351cfe078', name: 'icon', slot: 'icon' }), h("slot", { key: 'a06aa8e698b200bb458eed7cd73897834fd8ab6f' })));
+        }
+        else if (this.triggerType === 'avatar') {
+            triggerElement = (h("x-avatar", { key: '9da5d5f5ffb2598cb611ea83b9c2696bb07049f7', ...triggerProps, size: this.size === 'middle' ? 'default' : this.size }, h("slot", { key: '5bee2993e40c10ad76b5c40b046409acd54cd91c', name: 'icon', slot: 'icon' })));
+        }
+        else if (this.triggerType === 'div') {
+            triggerElement = (h("div", { key: '7773eb625124ea6a2bda1e53db258d0c99f5ca2d', ...triggerProps, role: "button" }, h("slot", { key: 'c4da8e507a8da7ee6c39088177fca48e55614026' })));
+        }
+        else {
+            triggerElement = (h("div", { key: '9d18c48ad04f8c2aef91128d9e9ed772c4ca873a', class: "x-color-picker-trigger", ...triggerProps, role: "button" }, h("slot", { key: '7d38d9300cf8021954a1da6dc22fb6ccddaef9fb' }, h("div", { key: '73cbfcdf0ce393436f7442c7e404af4f5e04b85f', class: {
+                    'x-color-picker-color-block': true,
+                    'x-color-picker-color-block-cleared': this.isCleared,
+                } }, h("div", { key: '472853f69d8be09b8051ff3c22709077b6add932', class: "x-color-picker-color-block-inner", style: { background: colorValue } })), this.showText && h("span", { key: 'dcc67f930e4ced9bb235a945d358613c824041a1', class: "x-color-picker-text" }, this.getDisplayText()), this.allowClear && !this.isCleared && this.internalColor && (h("span", { key: 'c88ca57086881d5523f493e73544f58f1ba8ae60', class: "x-color-picker-clear", onClick: this.handleClear }, this.renderCloseIcon())), h("span", { key: '2af51200ce37900257ea1ec6f3a129abe772f6ad', class: {
+                    'x-color-picker-arrow': true,
+                    'x-color-picker-arrow-open': this.internalOpen,
+                } }, this.renderDownArrow()))));
+        }
+        return (h(Host, { key: 'ee042073140980b98b957f06f560ea6a3dc465d1', class: hostClasses, style: this.styles?.root }, triggerElement));
     }
     static get is() { return "x-color-picker"; }
     static get encapsulation() { return "shadow"; }
@@ -900,7 +927,7 @@ export class XColorPicker {
             },
             "trigger": {
                 "type": "string",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "ColorPickerTrigger",
                     "resolved": "\"click\" | \"hover\"",
@@ -931,6 +958,39 @@ export class XColorPicker {
                 "attribute": "trigger",
                 "defaultValue": "'click'"
             },
+            "triggerType": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "ColorPickerTriggerType",
+                    "resolved": "\"avatar\" | \"button\" | \"default\" | \"div\"",
+                    "references": {
+                        "ColorPickerTriggerType": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-color-picker/types.ts::ColorPickerTriggerType",
+                            "referenceLocation": "ColorPickerTriggerType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'default'"
+                        }, {
+                            "name": "example",
+                            "text": "<x-color-picker triggerType=\"button\"></x-color-picker>"
+                        }],
+                    "text": "Trigger element type"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "trigger-type",
+                "defaultValue": "'default'"
+            },
             "value": {
                 "type": "string",
                 "mutable": true,

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

@@ -140,7 +140,7 @@ export class XComment {
         if (!this.avatar) {
             return null;
         }
-        return (h("x-avatar", { src: this.avatar, size: 32, alt: "Comment avatar" }));
+        return h("x-avatar", { src: this.avatar, size: 32, alt: "Comment avatar" });
     }
     /**
      * Render datetime slot or text.
@@ -176,10 +176,10 @@ export class XComment {
         const hasAuthorContent = this.hasAuthorSlot || this.author;
         const hasDatetimeContent = this.hasDatetimeSlot || this.datetime;
         const showAuthorSection = hasAuthorContent || hasDatetimeContent;
-        return (h(Host, { key: '42505e2663103c4187d775874a37102d4a696e34', class: {
+        return (h(Host, { key: 'e27bcdd0e96366a8844676660ae60ae72e1401aa', class: {
                 'x-comment': true,
                 'x-comment-nested-parent': this.hasNestedComments,
-            } }, h("div", { key: '7afe56095b158504d7bafd34288c929ffa5e98fb', class: "x-comment-inner" }, h("div", { key: '643323f9092161a82cbde8857d13dc61a7f7941a', class: "x-comment-avatar" }, this.renderAvatar()), h("div", { key: 'ad1266ced67b82e988709f8d933522d1b6e94b64', class: "x-comment-content" }, showAuthorSection && (h("div", { key: 'f0cfc499b3c83eb7ff0e81d7626fcd45abafea83', class: "x-comment-content-author" }, hasAuthorContent && (h("span", { key: 'eee70bcf6fa0c08a0de6a07f8d4772342f8deded', class: "x-comment-content-author-name" }, this.renderAuthor())), hasDatetimeContent && (h("span", { key: '9bfa35e23e056af3d2950be88dcf196c11d540fe', class: "x-comment-content-author-time" }, this.renderDatetime())))), h("div", { key: '14e2e7ea18d0290aaa06165bec8f7a31a1ce3d7d', class: "x-comment-content-detail" }, this.renderContent()), h("ul", { key: '58d293cd404284b7b2746fcbacc675517f923bd8', class: "x-comment-actions" }, h("slot", { key: '2c1cd80793e2c6e41b7bf64a91f02a1df56ecd93', name: "actions" })))), h("div", { key: 'fe822b0a109badfd23670f0c74b92129ab69f68d', class: "x-comment-nested" }, h("slot", { key: 'c993e91ce0aba5f843cd1b0cd983e7276a62a664' }))));
+            } }, h("div", { key: '6585a103484d58bb2d885544e10d5857a8dd4ce1', class: "x-comment-inner" }, h("div", { key: '15b5d988ead34671577faabb8fe7c5656021cad3', class: "x-comment-avatar" }, this.renderAvatar()), h("div", { key: '6500e77d4411dde2207a6cb30aeec453700ce0e7', class: "x-comment-content" }, showAuthorSection && (h("div", { key: 'c5cc4c4c393077a078c9a75cc49407043b37c4af', class: "x-comment-content-author" }, hasAuthorContent && h("span", { key: '883dd55c2d9e917b14364b76b872ef7d2e2dc470', class: "x-comment-content-author-name" }, this.renderAuthor()), hasDatetimeContent && h("span", { key: '7a5d5449f515af1e1f24f893439d2280a0b46710', class: "x-comment-content-author-time" }, this.renderDatetime()))), h("div", { key: '739597c787d8690367d50afc0786ea07896317fb', class: "x-comment-content-detail" }, this.renderContent()), h("ul", { key: '077b4622360f077539308ac8f51407609f8dfc5f', class: "x-comment-actions" }, h("slot", { key: '774a6ac38ef9f95342526d74719fa8ff3759a502', name: "actions" })))), h("div", { key: '81c3d6eab2adcee07f7ea678feb403be4ab9d006', class: "x-comment-nested" }, h("slot", { key: '4be625ce18d6ed282aec24a775c11dbdd8361744' }))));
     }
     static get is() { return "x-comment"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/x-content/x-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;
@@ -334,7 +337,6 @@
   min-height: 0;
   color: var(--x-content-color, var(--x-color-text, rgba(0, 0, 0, 0.88)));
   font-family: var(--x-content-font-family, var(--x-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif));
-  background-color: var(--x-content-bg, var(--x-color-bg-container, #ffffff));
   position: relative;
 }
 
@@ -342,7 +344,6 @@
   flex: 1;
   min-height: 0;
   color: var(--x-content-color, var(--x-color-text, rgba(0, 0, 0, 0.88)));
-  background-color: var(--x-content-bg, var(--x-color-bg-container, #ffffff));
   width: 100%;
   height: 100%;
   box-sizing: border-box;

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

@@ -72,7 +72,7 @@ export class XContent {
             return;
         }
         let resolve;
-        const promise = new Promise((r) => (resolve = r));
+        const promise = new Promise(r => (resolve = r));
         const fromY = el.scrollTop;
         const fromX = el.scrollLeft;
         const deltaY = y != null ? y - fromY : 0;
@@ -137,10 +137,10 @@ export class XContent {
      * </x-content>
      */
     render() {
-        return (h(Host, { key: '7dbe9bdd36626dfbdfdde60db2b8ffef2cc76bb7', class: {
+        return (h(Host, { key: 'f4091cda400228cc7183ff2b942d8733fa8d4c9b', class: {
                 'x-content-scroll-y': this.scrollY,
                 'x-content-scroll-x': this.scrollX,
-            } }, h("main", { key: '8954532d48b86b2be59245bcbd6a397f1c86ebc9', class: "x-layout-content inner-scroll", ref: el => this.scrollEl = el, onScroll: this.scrollEvents ? this.onScroll : undefined }, h("slot", { key: 'd1fa112e698b10f7acfe4846a7546a7d38ba3d56' }))));
+            } }, h("main", { key: 'b261a2e6c96a1c89cc408fa94821150b981bc77e', class: "x-layout-content inner-scroll", ref: el => (this.scrollEl = el), onScroll: this.scrollEvents ? this.onScroll : undefined }, h("slot", { key: '9aa281c9218e01e6c2424056a496509fa50582aa' }))));
     }
     static get is() { return "x-content"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/x-date-picker/date-picker-dropdown-content/date-picker-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;
@@ -431,7 +434,8 @@
   border-collapse: collapse;
   table-layout: fixed;
 }
-.x-picker-content th, .x-picker-content td {
+.x-picker-content th,
+.x-picker-content td {
   position: relative;
   min-width: var(--x-picker-cell-size, 24px);
   font-weight: 400;