@xlabs-store/core 0.0.1 → 0.0.3

package/dist/collection/components/x-select-option/x-select-option.js

@@ -52,12 +52,12 @@ export class XSelectOption {
      * @returns JSX.Element - The host element representing an option.
      */
     render() {
-        return (h(Host, { key: 'b75e12cc85f999090a9d9eb574c1b43aa6ae9efa', class: {
+        return (h(Host, { key: '94eaccf957bf46beb89b9de06baf9f5dfd46979b', class: {
                 'x-select-option': true,
                 'x-select-option-selected': this.selected,
                 'x-select-option-active': this.active,
                 'x-select-option-disabled': this.disabled,
-            }, title: this.optionTitle, role: "option", "aria-selected": this.selected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false' }, h("div", { key: '3d1c1ae207aa4b141397b85bfd125f8e2f3a5f44', class: "x-select-option-content" }, h("slot", { key: 'dbce7dfb1f1191b5d5c7ef8dde91cdfecf09d835' })), this.selected && (h("div", { key: 'd21e3a536ab6cf8620e23980c7b8190c3d136d58', class: "x-select-option-state" }, h("span", { key: '7af063874895dac03505c74ad8170c2a0a1d167b', role: "img", "aria-label": "check", class: "anticon anticon-check x-select-selected-icon" }, h("svg", { key: '075e667053ece6734193ca634fa45fa7e6696789', viewBox: "64 64 896 896", focusable: "false", "data-icon": "check", width: "1em", height: "1em", fill: "currentColor", "aria-hidden": "true" }, h("path", { key: '2a3d658eb3695351173e899b62e00ba82d6d3b57', d: "M912 190h-69c-4.4 0-8 3.6-8 8v27.1c0 1.8.7 3.6 2 4.9l376 474c2.5 3.2 6.4 5 10.5 5h54c4.1 0 8-1.8 10.5-5L910 202.9c1.3-1.3 2-3.1 2-4.9V198c0-4.4-3.6-8-8-8z" }), h("path", { key: '3e90191a7ef5a60245d81217fa0b707d56d42e82', d: "M912 190h-69c-4.4 0-8 3.6-8 8v27.1c0 1.8.7 3.6 2 4.9l376 474c2.5 3.2 6.4 5 10.5 5h54c4.1 0 8-1.8 10.5-5L910 202.9c1.3-1.3 2-3.1 2-4.9V198c0-4.4-3.6-8-8-8z", opacity: "0" }), h("path", { key: '90da6aa15798242c541d003cbcaca1f0da74bed3', d: "M433.1 657.7a31.8 31.8 0 0051.7 0l206.8-271.6c6.6-8.6 3.7-21.4-5.9-24.1l-42.4-11.9c-3.4-1-7.1.2-9.3 3.1L459 554.5l-86.6-97.4c-2.2-2.5-5.8-3.5-9.1-2.5l-43 12.1c-9.6 2.7-12.5 15.5-5.9 24.1l118.7 166.9z" })))))));
+            }, title: this.optionTitle, role: "option", "aria-selected": this.selected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false' }, h("div", { key: 'dd3246db40f40e8e39e546d528bd5f56864c5b57', class: "x-select-option-content" }, h("slot", { key: '91d5b20ee2e59fe0ca24f4ea52d4aafd9920af52' })), this.selected && (h("div", { key: '2ef0f08e45ec985c6278d67f42c26ecdc79752ae', class: "x-select-option-state" }, h("span", { key: '30d721e5d9ddce14433dad3cf682d6627ff3abeb', role: "img", "aria-label": "check", class: "anticon anticon-check x-select-selected-icon" }, h("svg", { key: '582fe6231ee10127a37224237ffb27a419d482de', viewBox: "64 64 896 896", focusable: "false", "data-icon": "check", width: "1em", height: "1em", fill: "currentColor", "aria-hidden": "true" }, h("path", { key: '26dc106c54103c9f6c467e0b3b5d73bc50db6856', d: "M912 190h-69c-4.4 0-8 3.6-8 8v27.1c0 1.8.7 3.6 2 4.9l376 474c2.5 3.2 6.4 5 10.5 5h54c4.1 0 8-1.8 10.5-5L910 202.9c1.3-1.3 2-3.1 2-4.9V198c0-4.4-3.6-8-8-8z" }), h("path", { key: '043973406bc9ab755f78d7ed982ee4f4838e6bd2', d: "M912 190h-69c-4.4 0-8 3.6-8 8v27.1c0 1.8.7 3.6 2 4.9l376 474c2.5 3.2 6.4 5 10.5 5h54c4.1 0 8-1.8 10.5-5L910 202.9c1.3-1.3 2-3.1 2-4.9V198c0-4.4-3.6-8-8-8z", opacity: "0" }), h("path", { key: '6ab0ac760ab72a689868100e182060941042d272', d: "M433.1 657.7a31.8 31.8 0 0051.7 0l206.8-271.6c6.6-8.6 3.7-21.4-5.9-24.1l-42.4-11.9c-3.4-1-7.1.2-9.3 3.1L459 554.5l-86.6-97.4c-2.2-2.5-5.8-3.5-9.1-2.5l-43 12.1c-9.6 2.7-12.5 15.5-5.9 24.1l118.7 166.9z" })))))));
     }
     static get is() { return "x-select-option"; }
     static get originalStyleUrls() {
@@ -132,7 +132,7 @@ export class XSelectOption {
                             "name": "example",
                             "text": "<x-select-option label=\"United States\"></x-select-option>"
                         }],
-                    "text": "The label of the option (used for display in the select box when selected)\r\nIf not provided, will try to use the text content."
+                    "text": "The label of the option (used for display in the select box when selected)\nIf not provided, will try to use the text content."
                 },
                 "getter": false,
                 "setter": false,

package/dist/collection/components/x-sider/x-sider.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;
@@ -351,14 +354,14 @@
 }
 
 .x-layout-sider-trigger {
-  position: fixed;
+  position: absolute;
   bottom: 0;
   z-index: 1;
   height: var(--x-sider-trigger-height, var(--x-spacing-xxxl, 48px));
   color: var(--x-sider-trigger-color, var(--x-color-text-light-solid, #ffffff));
   line-height: var(--x-sider-trigger-height, var(--x-spacing-xxxl, 48px));
   text-align: center;
-  background: var(--x-sider-trigger-bg, rgba(0, 0, 0, 0.75));
+  background: var(--x-sider-trigger-bg, var(--x-color-bg-spotlight, rgba(0, 0, 0, 0.75)));
   cursor: pointer;
   transition: all var(--x-sider-motion-duration-fast, var(--x-motion-duration-fast, 0.1s));
 }

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

@@ -118,10 +118,10 @@ export class XSider {
         };
         const style = {
             '--x-sider-width': siderWidth,
-            flex: `0 0 ${siderWidth}`,
-            maxWidth: siderWidth,
-            minWidth: siderWidth,
-            width: siderWidth,
+            'flex': `0 0 ${siderWidth}`,
+            'maxWidth': siderWidth,
+            'minWidth': siderWidth,
+            'width': siderWidth,
         };
         const renderTrigger = () => {
             if (!collapsible || trigger === null) {
@@ -131,10 +131,8 @@ export class XSider {
                 return (h("div", { class: "x-layout-sider-trigger", onClick: this.toggleCollapse, style: { width: siderWidth } }, trigger));
             }
             // Default trigger icon (simple arrow)
-            const arrowIcon = collapsed
-                ? (reverseArrow ? '<' : '>')
-                : (reverseArrow ? '>' : '<');
-            return (h("div", { class: "x-layout-sider-trigger", onClick: this.toggleCollapse, style: { width: siderWidth } }, arrowIcon));
+            const arrowIcon = collapsed ? (reverseArrow ? 'keyboard_arrow_left' : 'keyboard_arrow_right') : reverseArrow ? 'keyboard_arrow_right' : 'keyboard_arrow_left';
+            return (h("div", { class: "x-layout-sider-trigger", onClick: this.toggleCollapse, style: { width: siderWidth } }, h("x-icon", { name: arrowIcon })));
         };
         return (h(Host, { style: style }, h("aside", { class: classes }, h("div", { class: "x-layout-sider-children" }, h("slot", null)), renderTrigger())));
     }
@@ -253,7 +251,7 @@ export class XSider {
                     "references": {
                         "SiderTheme": {
                             "location": "local",
-                            "path": "E:/projects/fintvn/labs/packages/core/src/components/x-sider/x-sider.tsx",
+                            "path": "/run/media/cpanel/volumes/projects/fintvn/labs/packages/core/src/components/x-sider/x-sider.tsx",
                             "id": "src/components/x-sider/x-sider.tsx::SiderTheme"
                         }
                     }

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

@@ -56,13 +56,13 @@ export class XSkeleton {
         if (!this.loading) {
             return h("slot", null);
         }
-        const rows = typeof this.paragraph === 'object' ? this.paragraph.rows : (this.paragraph ? 3 : 0);
+        const rows = typeof this.paragraph === 'object' ? this.paragraph.rows : this.paragraph ? 3 : 0;
         return (h(Host, { class: {
                 'x-skeleton': true,
                 'x-skeleton-active': this.active,
                 'x-skeleton-with-avatar': this.avatar,
-                'x-skeleton-round': this.round
-            } }, this.avatar && (h("div", { class: "x-skeleton-header" }, h("span", { class: "x-skeleton-avatar" }))), h("div", { class: "x-skeleton-content" }, this.showTitle && (h("h3", { class: "x-skeleton-title" })), rows > 0 && (h("ul", { class: "x-skeleton-paragraph" }, Array.from({ length: rows }).map((_, i) => (h("li", { style: { width: i === rows - 1 ? '61%' : undefined } }))))))));
+                'x-skeleton-round': this.round,
+            } }, this.avatar && (h("div", { class: "x-skeleton-header" }, h("span", { class: "x-skeleton-avatar" }))), h("div", { class: "x-skeleton-content" }, this.showTitle && h("h3", { class: "x-skeleton-title" }), rows > 0 && (h("ul", { class: "x-skeleton-paragraph" }, Array.from({ length: rows }).map((_, i) => (h("li", { style: { width: i === rows - 1 ? '61%' : undefined } }))))))));
     }
     static get is() { return "x-skeleton"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,4 +1,4 @@
-import { Host, h, } from "@stencil/core";
+import { Host, h } from "@stencil/core";
 /**
  * Slider component supporting single and range values with keyboard and mouse input.
  */
@@ -115,9 +115,7 @@ export class XSlider {
     /* ---------------- LIFECYCLE ---------------- */
     componentWillLoad() {
         if (this.value === undefined) {
-            this.value = this.range
-                ? [this.min, this.max]
-                : this.defaultValue;
+            this.value = this.range ? [this.min, this.max] : this.defaultValue;
         }
     }
     onValueChange() {
@@ -160,7 +158,7 @@ export class XSlider {
     snap(v) {
         if (this.step === null) {
             const steps = this.getSteps();
-            return steps.reduce((prev, curr) => Math.abs(curr - v) < Math.abs(prev - v) ? curr : prev);
+            return steps.reduce((prev, curr) => (Math.abs(curr - v) < Math.abs(prev - v) ? curr : prev));
         }
         return Math.round(v / this.step) * this.step;
     }
@@ -189,9 +187,7 @@ export class XSlider {
      */
     getValueFromEvent(e) {
         const rect = this.rail.getBoundingClientRect();
-        const ratio = this.vertical
-            ? (rect.bottom - e.clientY) / rect.height
-            : (e.clientX - rect.left) / rect.width;
+        const ratio = this.vertical ? (rect.bottom - e.clientY) / rect.height : (e.clientX - rect.left) / rect.width;
         const v = this.min + this.clamp(ratio) * (this.max - this.min);
         return this.snap(this.clamp(v));
     }
@@ -235,9 +231,7 @@ export class XSlider {
             return;
         this.isDragging = true;
         if (this.range) {
-            this.activeThumb =
-                index ??
-                    this.getClosestThumb(this.getValueFromEvent(e));
+            this.activeThumb = index ?? this.getClosestThumb(this.getValueFromEvent(e));
         }
         this.updateValue(e);
         document.addEventListener('mousemove', this.onMouseMove);
@@ -322,11 +316,7 @@ export class XSlider {
     onKeyDown = (e, index) => {
         if (this.disabled)
             return;
-        const delta = e.key === 'ArrowRight' || e.key === 'ArrowUp'
-            ? this.step ?? 1
-            : e.key === 'ArrowLeft' || e.key === 'ArrowDown'
-                ? -(this.step ?? 1)
-                : 0;
+        const delta = e.key === 'ArrowRight' || e.key === 'ArrowUp' ? (this.step ?? 1) : e.key === 'ArrowLeft' || e.key === 'ArrowDown' ? -(this.step ?? 1) : 0;
         if (!delta)
             return;
         e.preventDefault();
@@ -366,24 +356,22 @@ export class XSlider {
      * @returns JSX.Element
      */
     render() {
-        const values = this.range
-            ? this.value
-            : [this.value];
+        const values = this.range ? this.value : [this.value];
         const p1 = this.percent(values[0]);
         const p2 = this.range ? this.percent(values[1]) : p1;
-        return (h(Host, { key: '90fc23fbdcc78816be8c8d32d3e46e4687d3fad6', class: {
+        return (h(Host, { key: 'c88c074325af15e798567374fff8458d9b9ce361', class: {
                 'x-slider': true,
                 'x-slider-vertical': this.vertical,
                 'x-slider-disabled': this.disabled,
-            } }, h("div", { key: '9ff4c3df41adfcd7cc3f7c65784fc569b6693ff3', class: "x-slider-rail", ref: el => (this.rail = el), onClick: e => this.onMouseDown(e) }), h("div", { key: '0c5f77c19a65e251e46d0393e626bfe96abd18c9', class: "x-slider-track", style: {
+            } }, h("div", { key: '982087a24f83d790da01b29b49620716991d8704', class: "x-slider-rail", ref: el => (this.rail = el), onClick: e => this.onMouseDown(e) }), h("div", { key: '5491e2434c256b50cb059616edee68a4456f268c', class: "x-slider-track", style: {
                 [this.vertical ? 'height' : 'width']: `${this.range ? p2 - p1 : p1}%`,
                 [this.vertical ? 'bottom' : 'left']: `${this.range ? p1 : 0}%`,
             } }), values.map((v, i) => {
             const percent = this.percent(v);
             return (h("div", { class: "x-slider-handle", style: {
                     [this.vertical ? 'bottom' : 'left']: `${percent}%`,
-                }, tabindex: 0, role: "slider", "aria-valuemin": this.min, "aria-valuemax": this.max, "aria-valuenow": v, onMouseDown: e => this.onMouseDown(e, i), onKeyDown: e => this.onKeyDown(e, i) }, this.tooltip && (h("div", { class: "x-slider-tooltip" }, v))));
-        }), h("div", { key: 'f3dd9f0c39947e115fd6160c1003cf48f93e97af', class: "x-slider-marks" }, this.renderMarks())));
+                }, tabindex: 0, role: "slider", "aria-valuemin": this.min, "aria-valuemax": this.max, "aria-valuenow": v, onMouseDown: e => this.onMouseDown(e, i), onKeyDown: e => this.onKeyDown(e, i) }, this.tooltip && h("div", { class: "x-slider-tooltip" }, v)));
+        }), h("div", { key: 'f556088d994f7ec76d9101be8d807940a4ae95cb', class: "x-slider-marks" }, this.renderMarks())));
     }
     static get is() { return "x-slider"; }
     static get encapsulation() { return "shadow"; }

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

@@ -75,7 +75,7 @@ export class XSpace {
             gapSize = typeof size[0] === 'number' ? size[0] : 8;
         }
         style['--x-space-gap'] = `${gapSize}px`;
-        return (h(Host, { key: '858d52ab60afb1ce6ae25b60bf708d28df10a970', style: style }, h("div", { key: '29a9092cb2b342567ade1d7e49500394dbbc3e93', class: "x-space" }, h("slot", { key: 'd2d088eee3a4c98392003f6c85743f0304848cee' }))));
+        return (h(Host, { key: '67a681628b205c19e4a38cb05dabe29b123d432d', style: style }, h("div", { key: 'd4eaf5d6fa382e912248c9923259bbea13e9ee18', class: "x-space" }, h("slot", { key: 'e71f84f099b054362e4bcaab4e329e9156d57975' }))));
     }
     static get is() { return "x-space"; }
     static get encapsulation() { return "shadow"; }
@@ -100,7 +100,7 @@ export class XSpace {
                     "references": {
                         "SpaceAlign": {
                             "location": "local",
-                            "path": "E:/projects/fintvn/labs/packages/core/src/components/x-space/x-space.tsx",
+                            "path": "/run/media/cpanel/volumes/projects/fintvn/labs/packages/core/src/components/x-space/x-space.tsx",
                             "id": "src/components/x-space/x-space.tsx::SpaceAlign"
                         }
                     }
@@ -128,7 +128,7 @@ export class XSpace {
                     "references": {
                         "SpaceDirection": {
                             "location": "local",
-                            "path": "E:/projects/fintvn/labs/packages/core/src/components/x-space/x-space.tsx",
+                            "path": "/run/media/cpanel/volumes/projects/fintvn/labs/packages/core/src/components/x-space/x-space.tsx",
                             "id": "src/components/x-space/x-space.tsx::SpaceDirection"
                         }
                     }
@@ -157,7 +157,7 @@ export class XSpace {
                     "references": {
                         "SpaceSize": {
                             "location": "local",
-                            "path": "E:/projects/fintvn/labs/packages/core/src/components/x-space/x-space.tsx",
+                            "path": "/run/media/cpanel/volumes/projects/fintvn/labs/packages/core/src/components/x-space/x-space.tsx",
                             "id": "src/components/x-space/x-space.tsx::SpaceSize"
                         }
                     }

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

@@ -44,7 +44,7 @@ export class XSpin {
     render() {
         // Detect whether the component has child content or text.
         const hasChildren = this.el.children.length > 0 || this.el.textContent.trim().length > 0;
-        return (h(Host, { key: '372b35a20ebf809d62950e45838f85457aabf165', class: {
+        return (h(Host, { key: 'f346892a1c56a212418d5e9bdf50c6178bed4763', class: {
                 'x-spin': true,
                 'x-spin-nested-loading': hasChildren,
                 [`x-spin-${this.size}`]: true,

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

@@ -206,12 +206,12 @@ export class XSplitter {
         });
         const remainingSize = availableSize - totalDefinedSize;
         const flexSize = flexPanelCount > 0 ? remainingSize / flexPanelCount : 0;
-        this.panelInfos.forEach((info) => {
+        this.panelInfos.forEach(info => {
             if (info.size === -1) {
                 info.size = Math.max(info.min, Math.min(info.max, flexSize));
             }
         });
-        this.panelSizes = this.panelInfos.map((info) => info.size);
+        this.panelSizes = this.panelInfos.map(info => info.size);
         this.updatePanelStyles();
     }
     parseSize(size, total) {
@@ -495,7 +495,13 @@ export class XSplitter {
             e.preventDefault();
             this.resetToDefault(index);
         };
-        return (h("div", { class: barClasses, key: `bar-${index}`, onMouseDown: handleMouseDown, onDblClick: handleDoubleClick, onKeyDown: (e) => this.handleKeyDown(e, index), style: this.styles?.bar, tabIndex: 0, role: "separator", "aria-orientation": direction }, h("div", { class: "x-splitter-bar-dragger", style: this.styles?.handle }, this.draggerIcon ? (h("span", { class: "x-splitter-bar-dragger-icon", innerHTML: this.draggerIcon })) : (h("span", { class: "x-splitter-bar-dragger-icon" }, direction === 'horizontal' ? (h("svg", { viewBox: "0 0 8 32", width: "8", height: "32", fill: "currentColor" }, h("rect", { x: "3", y: "0", width: "2", height: "32", rx: "1", opacity: "0.4" }))) : (h("svg", { viewBox: "0 0 32 8", width: "32", height: "8", fill: "currentColor" }, h("rect", { x: "0", y: "3", width: "32", height: "2", rx: "1", opacity: "0.4" })))))), showStartArrow && (h("button", { type: "button", class: "x-splitter-bar-collapse-btn x-splitter-bar-collapse-start", onMouseDown: (e) => e.stopPropagation(), onClick: (e) => { e.stopPropagation(); this.toggleCollapse(index, 'start'); }, "aria-label": "Collapse previous panel" }, this.collapsibleIcon?.start ? (h("span", { innerHTML: this.collapsibleIcon.start })) : (this.renderCollapseArrow(direction, 'start', prevCollapsed)))), showEndArrow && (h("button", { type: "button", class: "x-splitter-bar-collapse-btn x-splitter-bar-collapse-end", onMouseDown: (e) => e.stopPropagation(), onClick: (e) => { e.stopPropagation(); this.toggleCollapse(index, 'end'); }, "aria-label": "Collapse next panel" }, this.collapsibleIcon?.end ? (h("span", { innerHTML: this.collapsibleIcon.end })) : (this.renderCollapseArrow(direction, 'end', nextCollapsed))))));
+        return (h("div", { class: barClasses, key: `bar-${index}`, onMouseDown: handleMouseDown, onDblClick: handleDoubleClick, onKeyDown: e => this.handleKeyDown(e, index), style: this.styles?.bar, tabIndex: 0, role: "separator", "aria-orientation": direction }, h("div", { class: "x-splitter-bar-dragger", style: this.styles?.handle }, this.draggerIcon ? (h("span", { class: "x-splitter-bar-dragger-icon", innerHTML: this.draggerIcon })) : (h("span", { class: "x-splitter-bar-dragger-icon" }, direction === 'horizontal' ? (h("svg", { viewBox: "0 0 8 32", width: "8", height: "32", fill: "currentColor" }, h("rect", { x: "3", y: "0", width: "2", height: "32", rx: "1", opacity: "0.4" }))) : (h("svg", { viewBox: "0 0 32 8", width: "32", height: "8", fill: "currentColor" }, h("rect", { x: "0", y: "3", width: "32", height: "2", rx: "1", opacity: "0.4" })))))), showStartArrow && (h("button", { type: "button", class: "x-splitter-bar-collapse-btn x-splitter-bar-collapse-start", onMouseDown: e => e.stopPropagation(), onClick: e => {
+                e.stopPropagation();
+                this.toggleCollapse(index, 'start');
+            }, "aria-label": "Collapse previous panel" }, this.collapsibleIcon?.start ? h("span", { innerHTML: this.collapsibleIcon.start }) : this.renderCollapseArrow(direction, 'start', prevCollapsed))), showEndArrow && (h("button", { type: "button", class: "x-splitter-bar-collapse-btn x-splitter-bar-collapse-end", onMouseDown: e => e.stopPropagation(), onClick: e => {
+                e.stopPropagation();
+                this.toggleCollapse(index, 'end');
+            }, "aria-label": "Collapse next panel" }, this.collapsibleIcon?.end ? h("span", { innerHTML: this.collapsibleIcon.end }) : this.renderCollapseArrow(direction, 'end', nextCollapsed)))));
     }
     getCollapsibleConfig(collapsible) {
         if (!collapsible)
@@ -576,7 +582,7 @@ export class XSplitter {
                 content.push(this.renderDragBar(index));
             }
         });
-        return (h(Host, { key: '65754cfed5bb06105771ec9d3d730adb73979652', class: hostClasses }, h("div", { key: '6742e777848152398293727e80d0d4be273bf69b', class: "x-splitter-container", ref: this.setContainerRef, style: this.styles?.container }, content.length > 0 ? content : h("slot", null)), this.lazy && this.isDragging && this.lazyPosition !== null && (h("div", { key: 'a0016aa0570b0fc4db9de0c45b0e04131ec157c8', class: {
+        return (h(Host, { key: '5a453a0ae661a1ba253a5f8ee8374dfdfe3ca494', class: hostClasses }, h("div", { key: 'd841ee436d55152f8339d200093364bb103f1ab4', class: "x-splitter-container", ref: this.setContainerRef, style: this.styles?.container }, content.length > 0 ? content : h("slot", null)), this.lazy && this.isDragging && this.lazyPosition !== null && (h("div", { key: '6ea8c3ff1c420316083c25f1a1e9e5bd18053837', class: {
                 'x-splitter-lazy-indicator': true,
                 'x-splitter-lazy-indicator-horizontal': direction === 'horizontal',
                 'x-splitter-lazy-indicator-vertical': direction === 'vertical',
@@ -637,7 +643,7 @@ export class XSplitter {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Orientation (alias for vertical layout)\r\nSimultaneously existing with orientation, orientation takes priority"
+                    "text": "Orientation (alias for vertical layout)\nSimultaneously existing with orientation, orientation takes priority"
                 },
                 "getter": false,
                 "setter": false,
@@ -683,7 +689,7 @@ export class XSplitter {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Left Panel\r\nRight Panel\r\nLazy mode - dragging does not update size immediately, but updates when released"
+                    "text": "Left Panel\nRight Panel\nLazy mode - dragging does not update size immediately, but updates when released"
                 },
                 "getter": false,
                 "setter": false,
@@ -738,7 +744,7 @@ export class XSplitter {
                 "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "{\r\n    container?: string;\r\n    bar?: string;\r\n    handle?: string;\r\n  }",
+                    "original": "{\n    container?: string;\n    bar?: string;\n    handle?: string;\n  }",
                     "resolved": "{ container?: string; bar?: string; handle?: string; }",
                     "references": {}
                 },
@@ -755,7 +761,7 @@ export class XSplitter {
                 "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "{\r\n    container?: Record<string, string>;\r\n    bar?: Record<string, string>;\r\n    handle?: Record<string, string>;\r\n  }",
+                    "original": "{\n    container?: Record<string, string>;\n    bar?: Record<string, string>;\n    handle?: Record<string, string>;\n  }",
                     "resolved": "{ container?: Record<string, string>; bar?: Record<string, string>; handle?: Record<string, string>; }",
                     "references": {
                         "Record": {

package/dist/collection/components/x-splitter-panel/x-splitter-panel.js

@@ -76,7 +76,7 @@ export class XSplitterPanel {
             'x-splitter-panel': true,
             'x-splitter-panel-resizable': this.resizable,
         };
-        return (h(Host, { key: '08300e8175426d88dcb05110dc6eae0faccddc4d', class: hostClasses }, h("div", { key: '9f154314674cf89391c711d3df44b097b2c0fa26', class: "x-splitter-panel-content" }, h("slot", { key: '34325ac37de1ae0f234cdc6e5e18b75eb4212cac' }))));
+        return (h(Host, { key: '3884626455873ec493298a123c0d2ab4a9bc009b', class: hostClasses }, h("div", { key: 'c54ac671a4f513f3e5c563aa2c3f17be36b11b2f', class: "x-splitter-panel-content" }, h("slot", { key: '65330bb89f9a497b8c5cec4be17b23acd5c39324' }))));
     }
     static get is() { return "x-splitter-panel"; }
     static get encapsulation() { return "shadow"; }

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

@@ -91,7 +91,7 @@ export class XStatistic {
      * @returns JSX.Element
      */
     render() {
-        return (h(Host, { key: '956f3e481db22ee0f5fa8935b9ee9045d6ecbebb', class: "x-statistic" }, this.statisticTitle && h("div", { key: '4f7b8eb01ef7dc0faf6cb60e192318d967a01990', class: "x-statistic-title" }, this.statisticTitle), h("div", { key: 'e55909df139df6ecf58959b2899d2f200dbcebed', class: "x-statistic-content" }, this.valuePrefix && h("span", { key: '079f0b2e39c6d48c852e26cfab31546a4fc8d9ac', class: "x-statistic-content-prefix" }, this.valuePrefix), h("span", { key: '046fba862290809c615e4bbfff71936ab3fee697', class: "x-statistic-content-value" }, this.loading ? h("x-skeleton", { paragraph: false }) : this.formatValue(this.value)), this.suffix && h("span", { key: '19471d7b5a65c8dd2ef495b423907d3a4ccd9f67', class: "x-statistic-content-suffix" }, this.suffix))));
+        return (h(Host, { key: '1629c268707749e1a3d61c61bddc43c127cf5c20', class: "x-statistic" }, this.statisticTitle && h("div", { key: 'a9200d2932e49766cb1517c30c1fedcf2d8ae4d0', class: "x-statistic-title" }, this.statisticTitle), h("div", { key: 'b8d63d5696555594789a24a34a0c8662c3ef1153', class: "x-statistic-content" }, this.valuePrefix && h("span", { key: '06880e93db7c883e75118b535ce046aad30990a4', class: "x-statistic-content-prefix" }, this.valuePrefix), h("span", { key: '5b882e98d8fcdef0718375abe1cebbeb801f1fb4', class: "x-statistic-content-value" }, this.loading ? h("x-skeleton", { paragraph: false }) : this.formatValue(this.value)), this.suffix && h("span", { key: 'bfb21070c64f8dc80d42379c78f7d4fea6fc30fb', class: "x-statistic-content-suffix" }, this.suffix))));
     }
     static get is() { return "x-statistic"; }
     static get encapsulation() { return "shadow"; }

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

@@ -115,14 +115,14 @@ export class XStep {
         }
         // Finish status - check icon
         if (this.status === 'finish') {
-            return (h("span", { class: "x-steps-icon", part: "icon-inner" }, h("x-icon", { name: 'check' })));
+            return (h("span", { class: "x-steps-icon", part: "icon-inner" }, h("x-icon", { name: "check" })));
         }
         // Error status - close icon
         if (this.status === 'error') {
-            return (h("span", { class: "x-steps-icon", part: "icon-inner" }, h("x-icon", { name: 'close' })));
+            return (h("span", { class: "x-steps-icon", part: "icon-inner" }, h("x-icon", { name: "close" })));
         }
         // Default - show step number
-        const iconContent = h("span", { class: "x-steps-icon", part: "icon-inner" }, this._stepNumber);
+        const iconContent = (h("span", { class: "x-steps-icon", part: "icon-inner" }, this._stepNumber));
         // Progress circle logic
         if (this.percent !== undefined && this.status === 'process') {
             const diameter = this._size === 'small' ? 24 : 32;
@@ -135,7 +135,7 @@ export class XStep {
             return (h("div", { class: "x-steps-progress-icon" }, h("svg", { viewBox: `0 0 ${diameter} ${diameter}`, width: "100%", height: "100%" }, h("path", { class: "x-steps-progress-trail", d: `M ${diameter / 2},${diameter / 2} m 0,-${radius} a ${radius},${radius} 0 1 1 0,${2 * radius} a ${radius},${radius} 0 1 1 0,-${2 * radius}`, "stroke-width": strokeWidth, "fill-opacity": "0" }), h("path", { class: "x-steps-progress-path", d: `M ${diameter / 2},${diameter / 2} m 0,-${radius} a ${radius},${radius} 0 1 1 0,${2 * radius} a ${radius},${radius} 0 1 1 0,-${2 * radius}`, "stroke-width": strokeWidth, "stroke-linecap": "round", "fill-opacity": "0", style: {
                     strokeDasharray: `${circumference} ${circumference}`,
                     strokeDashoffset: `${offset}`,
-                    transition: 'stroke-dashoffset 0.3s ease 0s, stroke-dasharray 0.3s ease 0s, stroke 0.3s, stroke-width 0.06s ease 0.3s, opacity .3s ease 0s'
+                    transition: 'stroke-dashoffset 0.3s ease 0s, stroke-dasharray 0.3s ease 0s, stroke 0.3s, stroke-width 0.06s ease 0.3s, opacity .3s ease 0s',
                 } })), iconContent));
         }
         return iconContent;
@@ -165,7 +165,7 @@ export class XStep {
             'x-steps-item-clickable': this._clickable && !this.disabled,
             'x-steps-item-with-progress': this.percent !== undefined,
         };
-        return (h(Host, { key: '0a30a2ec552e3262b31f6903877f54a85c04ebf0', class: hostClasses, onClick: this.handleClick }, h("div", { key: 'bef7a534c4e6a5ada9be216a98a59015ddc33d7f', class: "x-steps-item-container", part: "container" }, h("div", { key: 'c1f221e983d1a7d3dbe2343496a3d663a5ec10c0', class: "x-steps-item-tail", part: "rail" }), h("div", { key: '1f981fd53fccb39649fe4967f0ef33ee8e058266', class: "x-steps-item-icon", part: "icon" }, this.renderIcon()), h("div", { key: '069998504f2fcf1c7fa7f7a98b8b68b034df0af8', class: "x-steps-item-content", part: "content" }, h("div", { key: '2df06b645db442e5648aaa3d6710a8205a47d454', class: "x-steps-item-title", part: "title" }, this.stepTitle, this.subTitle && h("span", { key: '8fdbf4bcdf8edd6d3750d33b3ae318e9c97903df', class: "x-steps-item-subtitle", part: "subtitle" }, this.subTitle)), this.description && h("div", { key: 'b1fafcab57961a23c00ff8e82311209313b66308', class: "x-steps-item-description", part: "description" }, this.description), h("slot", { key: '8544b702d5510891c2e6b93d7c73061e43131dca' })))));
+        return (h(Host, { key: 'f96533a2b3cef82e91e0856c2a604a19871474bf', class: hostClasses, onClick: this.handleClick }, h("div", { key: '8e563e5c4a0c7b6a497202e69cbacbd1046a07c1', class: "x-steps-item-container", part: "container" }, h("div", { key: '15aedd34d22ba46bce35f2576d1c9bf941743984', class: "x-steps-item-tail", part: "rail" }), h("div", { key: '8653fdf0b34b8729c311586e5693effd2ecb8845', class: "x-steps-item-icon", part: "icon" }, this.renderIcon()), h("div", { key: 'a6ad2b33540458d02e06fee304a4064450dd07db', class: "x-steps-item-content", part: "content" }, h("div", { key: '94e1617f6e0523dfa30deb5f56ba4124dbbb85ac', class: "x-steps-item-title", part: "title" }, this.stepTitle, this.subTitle && (h("span", { key: '0668f7eacdbf48ba7881598671297b38ad47492a', class: "x-steps-item-subtitle", part: "subtitle" }, this.subTitle))), this.description && (h("div", { key: 'b712c9be6b2f02547ba71e0b39dd5dc32988a0d8', class: "x-steps-item-description", part: "description" }, this.description)), h("slot", { key: '33c5302a27aa88602bf0b0f3f1eb8d6fee53339f' })))));
     }
     static get is() { return "x-step"; }
     static get encapsulation() { return "shadow"; }

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

@@ -369,7 +369,7 @@ export class XSteps {
                 // x-steps has @Event xStepClick. This is outgoing.
                 // x-steps needs to listen to incoming 'xStepClick' from children.
                 // I need to add @Listen('xStepClick') in x-steps.tsx.
-                onClick: (e) => {
+                onClick: e => {
                     // Stop propagation if needed, but we rely on custom event
                     e.stopPropagation();
                 }, onXStepClick: (e) => {
@@ -399,11 +399,9 @@ export class XSteps {
     render() {
         const hasItems = this.items && this.items.length > 0;
         // Favor labelPlacement, fallback to titlePlacement if labelPlacement is default (this logic depends on usage, but here assume labelPlacement is primary)
-        // Actually, to support deprecated correctly: if titlePlacement is set (and not default), use it? 
+        // Actually, to support deprecated correctly: if titlePlacement is set (and not default), use it?
         // Simplified: use titlePlacement only if labelPlacement is 'horizontal' (default) and titlePlacement is NOT 'horizontal'.
-        const effectiveLabelPlacement = (this.labelPlacement === 'horizontal' && this.titlePlacement !== 'horizontal')
-            ? this.titlePlacement
-            : this.labelPlacement;
+        const effectiveLabelPlacement = this.labelPlacement === 'horizontal' && this.titlePlacement !== 'horizontal' ? this.titlePlacement : this.labelPlacement;
         const classes = {
             'x-steps': true,
             [`x-steps-${this.internalDirection}`]: true,
@@ -414,7 +412,7 @@ export class XSteps {
             [`x-steps-label-${effectiveLabelPlacement}`]: this.internalDirection === 'horizontal',
             [this.classNames?.root ?? '']: !!this.classNames?.root,
         };
-        return (h(Host, { key: 'd8e38e332addd002b428fb4678a30a7757f21514', class: classes, style: this.styles?.root }, hasItems ? this.renderItems() : h("slot", { onSlotchange: () => this.updateSteps() })));
+        return (h(Host, { key: '4b129fad201a39b061ff513296e4d2c5dc75dc22', class: classes, style: this.styles?.root }, hasItems ? this.renderItems() : h("slot", { onSlotchange: () => this.updateSteps() })));
     }
     static get is() { return "x-steps"; }
     static get encapsulation() { return "shadow"; }