@xlabs-store/core 0.0.1 → 0.0.2

package/dist/cjs/x-anchor-link.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-C7sKs9A2.js');
+var index = require('./index-Cy2P_ln3.js');
 
 const xAnchorLinkCss = () => `@charset "UTF-8";:host{display:block;padding:var(--x-anchor-link-padding, var(--x-spacing-xs, 8px)) 0 var(--x-anchor-link-padding, var(--x-spacing-xs, 8px)) var(--x-anchor-link-padding-left, var(--x-spacing-md, 16px));line-height:var(--x-anchor-link-line-height, 1.1428571429)}.x-anchor-link-title{display:block;position:relative;margin-bottom:var(--x-anchor-link-title-margin-bottom, var(--x-spacing-xs, 8px));overflow:hidden;color:var(--x-anchor-link-title-color, var(--x-color-text, rgba(0, 0, 0, 0.88)));white-space:nowrap;text-overflow:ellipsis;-webkit-transition:all var(--x-anchor-link-motion-duration, var(--x-motion-duration-mid, 0.2s));transition:all var(--x-anchor-link-motion-duration, var(--x-motion-duration-mid, 0.2s));text-decoration:none;cursor:pointer}.x-anchor-link-title:hover{color:var(--x-anchor-link-title-color-hover, var(--x-color-primary, #1677ff))}.x-anchor-link-title.x-anchor-link-title-active{color:var(--x-anchor-link-title-color-active, var(--x-color-primary, #1677ff))}`;
 
@@ -48,7 +48,7 @@ const XAnchorLink = class {
         const event = new CustomEvent('x-anchor-link-click', {
             bubbles: true,
             composed: true,
-            detail: this.href
+            detail: this.href,
         });
         this.el.dispatchEvent(event);
     }
@@ -59,7 +59,7 @@ const XAnchorLink = class {
      * <x-anchor-link href="#a" linkTitle="A"></x-anchor-link>
      */
     render() {
-        return (index.h(index.Host, { key: 'bbb80ce07fae95d32553c2d0d78fd03c2139d92f', class: "x-anchor-link" }, index.h("a", { key: 'd6d9d9155755d6fa882f323983b46fa3ba67106f', class: "x-anchor-link-title", href: this.href, title: this.linkTitle, target: this.target, onClick: (e) => this.handleClick(e) }, this.linkTitle), index.h("slot", { key: '157980ab5819e933a6f4f3bfcef0e59560d6512e' })));
+        return (index.h(index.Host, { key: '5e500712a52ac64fa8a830c56458ade349a3e470', class: "x-anchor-link" }, index.h("a", { key: 'e570ce3efc608994951cee2225d4a577225957cf', class: "x-anchor-link-title", href: this.href, title: this.linkTitle, target: this.target, onClick: e => this.handleClick(e) }, this.linkTitle), index.h("slot", { key: '0c1e858eceb022cb459c12ed1fb3c44aa8fcc6d2' })));
     }
 };
 XAnchorLink.style = xAnchorLinkCss();

package/dist/cjs/x-anchor.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-C7sKs9A2.js');
+var index = require('./index-Cy2P_ln3.js');
 
 const xAnchorCss = () => `@charset "UTF-8";:host{display:block;font-size:var(--x-anchor-font-size, var(--x-font-size-base, 14px));line-height:var(--x-anchor-line-height, var(--x-line-height-base, 1.5714285714));color:var(--x-anchor-color, var(--x-color-text, rgba(0, 0, 0, 0.88)))}.x-anchor-wrapper{margin:0;padding:0;background-color:var(--x-anchor-bg, transparent)}.x-anchor{position:relative;padding-left:var(--x-anchor-ink-line-width, 2px)}.x-anchor-ink{position:absolute;top:0;left:0;height:100%}.x-anchor-ink::before{position:relative;display:block;width:var(--x-anchor-ink-line-width, 2px);height:100%;margin:0 auto;background-color:var(--x-anchor-ink-line-color, var(--x-color-split, rgba(5, 5, 5, 0.06)));content:" "}.x-anchor-ink-ball{position:absolute;left:50%;display:none;width:var(--x-anchor-ink-ball-size, var(--x-spacing-xs, 8px));height:var(--x-anchor-ink-ball-size, var(--x-spacing-xs, 8px));background-color:var(--x-anchor-ink-ball-bg, var(--x-color-bg-container, #ffffff));border:var(--x-anchor-ink-ball-border-width, 2px) solid var(--x-anchor-ink-color, var(--x-color-primary, #1677ff));border-radius:var(--x-anchor-ink-ball-size, var(--x-spacing-xs, 8px));-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);-webkit-transition:top var(--x-anchor-motion-duration, var(--x-motion-duration-mid, 0.2s)) ease-in-out;transition:top var(--x-anchor-motion-duration, var(--x-motion-duration-mid, 0.2s)) ease-in-out}.x-anchor-ink-ball.visible{display:inline-block}:host(.x-anchor-fixed) .x-anchor{position:fixed;top:0;z-index:var(--x-anchor-fixed-z-index, 10)}`;
 
@@ -133,11 +133,13 @@ const XAnchor = class {
         this.xClick.emit(href);
         this.xChange.emit(href);
         // Scroll to target
-        const targetId = href.replace('#', '');
-        const targetElement = document.getElementById(targetId);
-        // Only scroll when target exists.
-        if (targetElement) {
-            targetElement.scrollIntoView({ behavior: 'smooth' });
+        if (href && typeof href === 'string') {
+            const targetId = href.replace('#', '');
+            const targetElement = document.getElementById(targetId);
+            // Only scroll when target exists.
+            if (targetElement) {
+                targetElement.scrollIntoView({ behavior: 'smooth' });
+            }
         }
     }
     /**
@@ -147,10 +149,10 @@ const XAnchor = class {
      * <x-anchor><x-anchor-link href="#a">A</x-anchor-link></x-anchor>
      */
     render() {
-        return (index.h(index.Host, { key: 'a0a756440fd704a07519645ce505f9ce15837bad', class: "x-anchor-wrapper", onClick: (e) => this.handleLinkClick(e) }, index.h("div", { key: '94778c4fa7439857bb4b978dc5411143c2a9f20a', class: {
+        return (index.h(index.Host, { key: 'b4e789c716914f891bf128d06823783db9b7e5de', class: "x-anchor-wrapper" }, index.h("div", { key: '83def197170598a19c057e39fa63d0b32b6ae4e9', class: {
                 'x-anchor': true,
-                'x-anchor-fixed': this.affix
-            } }, index.h("div", { key: 'a9e0497bf73864a973256ee47eb471eb30aef7ab', class: "x-anchor-ink" }, index.h("span", { key: 'fbc02cb2f48f572153b21fd0817d2a033205ff95', class: "x-anchor-ink-ball", style: { top: '0px' } })), index.h("slot", { key: '1654cb42245a657af7d75990fc62b89b1ad02899' }))));
+                'x-anchor-fixed': this.affix,
+            } }, index.h("div", { key: '8fefd380a314dd205c1571f814da8f3f2433081c', class: "x-anchor-ink" }, index.h("span", { key: '2cf03205ae587ddac0b2d3a84baab630347effbd', class: "x-anchor-ink-ball", style: { top: '0px' } })), index.h("slot", { key: '8a804828065a8a6bd8a2cc7cbb932e5a07de28be' }))));
     }
 };
 XAnchor.style = xAnchorCss();

package/dist/cjs/x-app.cjs.entry.js

@@ -1,11 +1,11 @@
 'use strict';
 
-var index = require('./index-C7sKs9A2.js');
-var notificationService = require('./notification-service-m6I5U9aG.js');
-var modalService = require('./modal-service-BtAF0mFq.js');
-var portalController = require('./portal-controller-CtYVbhXL.js');
-var locale_service = require('./locale.service-Cz-aZQnr.js');
-var config = require('./config-BP9bROYD.js');
+var index = require('./index-Cy2P_ln3.js');
+var notificationService = require('./notification-service-v7LRmTyh.js');
+var modalService = require('./modal-service-FQpCPk_L.js');
+var portalController = require('./portal-controller-DJft2QkA.js');
+var locale_service = require('./locale.service-DT6E8Rzd.js');
+var config = require('./config-BYR5qIIZ.js');
 
 const xAppCss = () => `.x-app{display:block;position:relative;width:100%;height:100%}.x-app.fixed{position:fixed;top:0;left:0;width:100%;height:100%}`;
 
@@ -62,18 +62,18 @@ const XApp = class {
         }
     }
     /**
-   * Register global services when app is loaded.
-   *
-   * Flow:
-   * 1. Calls `registerApp` utility.
-   * 2. Binds singleton instances for `message`, `modal`, and `notification`.
-   *    - Enables usage of `message.success()`, etc., globally.
-   * 3. Sets the initial locale.
-   *
-   * @returns void
-   * @example
-   * <x-app></x-app>
-   */
+     * Register global services when app is loaded.
+     *
+     * Flow:
+     * 1. Calls `registerApp` utility.
+     * 2. Binds singleton instances for `message`, `modal`, and `notification`.
+     *    - Enables usage of `message.success()`, etc., globally.
+     * 3. Sets the initial locale.
+     *
+     * @returns void
+     * @example
+     * <x-app></x-app>
+     */
     componentDidLoad() {
         portalController.registerApp({
             message: notificationService.message,
@@ -121,7 +121,7 @@ const XApp = class {
      * <x-app><div>Content</div></x-app>
      */
     render() {
-        return (index.h(index.Host, { key: '34b77f573de801358c8c0b09c6a121407717c739', class: `x-app ${this.fixed ? 'fixed' : ''}` }, index.h("slot", { key: '7fa6125909a8bc20a0156961eda757b62d71fa9d' }), index.h("div", { key: 'cb32a17155a6ca84f3570ef6aa3aeb228ca2bf62', class: "x-app-service-container", ref: (el) => (this.container = el) })));
+        return (index.h(index.Host, { key: '93172aab18bd624930d4e8897d2b93885d9564c3', class: `x-app ${this.fixed ? 'fixed' : ''}` }, index.h("slot", { key: 'c4087dcd2372b490fba54bc6118425671f1813d1' }), index.h("div", { key: 'cf394998ded51fdad775865984fd651f19ea5404', class: "x-app-service-container", ref: el => (this.container = el) })));
     }
     static get watchers() { return {
         "locale": [{

package/dist/cjs/x-back-top.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-C7sKs9A2.js');
+var index = require('./index-Cy2P_ln3.js');
 
 const xBackTopCss = () => `@charset "UTF-8";:host{position:fixed;right:var(--x-back-top-right, 100px);bottom:var(--x-back-top-bottom, 50px);z-index:var(--x-back-top-z-index, var(--x-z-index-popup, 1050));width:var(--x-back-top-size, var(--x-control-height-lg, 40px));height:var(--x-back-top-size, var(--x-control-height-lg, 40px));cursor:pointer;display:none;-webkit-box-sizing:border-box;box-sizing:border-box}:host(.x-back-top-visible){display:block}.x-back-top-content{width:var(--x-back-top-size, var(--x-control-height-lg, 40px));height:var(--x-back-top-size, var(--x-control-height-lg, 40px));overflow:hidden;color:var(--x-back-top-content-color, var(--x-color-white, #ffffff));text-align:center;background-color:var(--x-back-top-content-bg, var(--x-color-text-secondary, rgba(0, 0, 0, 0.45)));border-radius:var(--x-back-top-content-border-radius, 20px);-webkit-transition:all var(--x-back-top-motion-duration, var(--x-motion-duration-mid, 0.2s));transition:all var(--x-back-top-motion-duration, var(--x-motion-duration-mid, 0.2s))}.x-back-top-content:hover{background-color:var(--x-back-top-content-bg-hover, var(--x-color-text, rgba(0, 0, 0, 0.88)))}.x-back-top-icon{font-size:var(--x-back-top-icon-font-size, var(--x-font-size-xxl, 24px));line-height:var(--x-back-top-size, var(--x-control-height-lg, 40px));display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}`;
 
@@ -68,7 +68,7 @@ const XBackTop = class {
     scrollToTop() {
         window.scrollTo({
             top: 0,
-            behavior: 'smooth'
+            behavior: 'smooth',
         });
     }
     /**
@@ -78,10 +78,10 @@ const XBackTop = class {
      * <x-back-top><span>Top</span></x-back-top>
      */
     render() {
-        return (index.h(index.Host, { key: '0014f1884f6dfae9f11f0afbd2e734ded3094d06', class: {
+        return (index.h(index.Host, { key: 'cecff0e7c05c272d0ed2e14a65c8b959e006da37', class: {
                 'x-back-top': true,
                 'x-back-top-visible': this.visible,
-            }, onClick: () => this.scrollToTop() }, index.h("div", { key: '5645a8759ce8c21df162006dd64d82b6eee951d2', class: "x-back-top-content" }, index.h("slot", { key: '9073f22954a5a3c9b386184c2df017d7a6e2699f' }, index.h("div", { key: 'd38d425542ec4a59ca712c8f92ba54f14635aad1', class: "x-back-top-icon" }, index.h("svg", { key: '4880a607c6dc42c7600ff1d89b7014fad3f9ba25', viewBox: "64 64 896 896", focusable: "false", "data-icon": "vertical-align-top", width: "1em", height: "1em", fill: "currentColor", "aria-hidden": "true" }, index.h("path", { key: 'ad194bce7bdfe5ba32c1dfae73260c840fb82bce', d: "M859.9 168H164.1c-4.5 0-8.1 3.6-8.1 8v60c0 4.4 3.6 8 8.1 8h695.8c4.5 0 8.1-3.6 8.1-8v-60c0-4.4-3.6-8-8.1-8zM518.3 555.9l187.6 233.1c5.2 6.5 3.5 16.3-3.9 20.4l-49.4 27.3c-6.2 3.4-13.9 1.8-18-4.1L512 634.1 389.4 832.6c-4.1 5.9-11.8 7.5-18 4.1l-49.4-27.3c-7.4-4.1-9.1-13.9-3.9-20.4l187.6-233.1c7.5-9.4 22.5-9.4 30 0z" }), index.h("path", { key: 'e50e348256ac30bc7692d25208c4099950d486e3', d: "M512 320c-4.4 0-8 3.6-8 8v480c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V328c0-4.4-3.6-8-8-8h-48z" })))))));
+            }, onClick: () => this.scrollToTop() }, index.h("div", { key: 'a13ea09092312a75dfb560beaf149c062abe3d8e', class: "x-back-top-content" }, index.h("slot", { key: 'a2c477317092e2a7120f3d710138921c37074cef' }, index.h("div", { key: 'f57ca99cd344f2c652a3e8455decec9e1e5008fe', class: "x-back-top-icon" }, index.h("svg", { key: '3030ed6d655692c44744964a25bc88c4186a4ea5', viewBox: "64 64 896 896", focusable: "false", "data-icon": "vertical-align-top", width: "1em", height: "1em", fill: "currentColor", "aria-hidden": "true" }, index.h("path", { key: '0fd433153d52df340257274075f378d50ccd338a', d: "M859.9 168H164.1c-4.5 0-8.1 3.6-8.1 8v60c0 4.4 3.6 8 8.1 8h695.8c4.5 0 8.1-3.6 8.1-8v-60c0-4.4-3.6-8-8.1-8zM518.3 555.9l187.6 233.1c5.2 6.5 3.5 16.3-3.9 20.4l-49.4 27.3c-6.2 3.4-13.9 1.8-18-4.1L512 634.1 389.4 832.6c-4.1 5.9-11.8 7.5-18 4.1l-49.4-27.3c-7.4-4.1-9.1-13.9-3.9-20.4l187.6-233.1c7.5-9.4 22.5-9.4 30 0z" }), index.h("path", { key: '9c13dfe777e30b6b551adf0c6dc7c6a40a4dbf97', d: "M512 320c-4.4 0-8 3.6-8 8v480c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V328c0-4.4-3.6-8-8-8h-48z" })))))));
     }
 };
 XBackTop.style = xBackTopCss();

package/dist/cjs/x-breadcrumb_2.cjs.entry.js

@@ -0,0 +1,124 @@
+'use strict';
+
+var index = require('./index-Cy2P_ln3.js');
+
+const xBreadcrumbCss = () => `@charset "UTF-8";:host{display:block;color:var(--x-breadcrumb-color, var(--x-color-text-secondary, rgba(0, 0, 0, 0.45)));font-size:var(--x-breadcrumb-font-size, var(--x-font-size-base, 14px))}.x-breadcrumb{-webkit-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0;color:var(--x-breadcrumb-color, var(--x-color-text-secondary, rgba(0, 0, 0, 0.45)));font-variant:tabular-nums;line-height:var(--x-breadcrumb-line-height, var(--x-line-height-base, 1.5715));list-style:none;-webkit-font-feature-settings:"tnum";font-feature-settings:"tnum";font-size:var(--x-breadcrumb-font-size, var(--x-font-size-base, 14px))}ol{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:0;padding:0;list-style:none}`;
+
+const XBreadcrumb = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    get el() { return index.getElement(this); }
+    /**
+     * Custom separator.
+     * @example
+     * <x-breadcrumb separator=">">
+     *   <x-breadcrumb-item>Home</x-breadcrumb-item>
+     * </x-breadcrumb>
+     */
+    separator = '/';
+    /**
+     * Update child breadcrumb items after initial render.
+     * @returns void
+     * @example
+     * <x-breadcrumb separator=">"></x-breadcrumb>
+     */
+    componentDidLoad() {
+        this.updateChildren();
+    }
+    /**
+     * Propagate separator attribute to child breadcrumb items.
+     *
+     * Flow:
+     * 1. Selects all `x-breadcrumb-item` children within the host.
+     * 2. Iterates over each item.
+     * 3. Sets the `separator` attribute to match the parent's configuration.
+     *
+     * @returns void
+     * @example
+     * <x-breadcrumb separator="/"></x-breadcrumb>
+     */
+    updateChildren() {
+        const items = Array.from(this.el.querySelectorAll('x-breadcrumb-item'));
+        items.forEach(item => {
+            item.setAttribute('separator', this.separator);
+        });
+    }
+    /**
+     * Render breadcrumb list with slot for items.
+     * @returns JSX.Element
+     * @example
+     * <x-breadcrumb>
+     *   <x-breadcrumb-item>Home</x-breadcrumb-item>
+     * </x-breadcrumb>
+     */
+    render() {
+        return (index.h(index.Host, { key: '9563e87cd1fd5ac98b5fc6fbf3b0d88cce1718bb' }, index.h("nav", { key: '8dc25f45dd4ae991f4c94a3d83730fad564ba41a', class: "x-breadcrumb" }, index.h("ol", { key: 'fc77b989f1af0ce08772e0dd938cfaa6d9081188' }, index.h("slot", { key: '8ff1d20772c0baf960f7e43b73cb79514c3f0db3', onSlotchange: () => this.updateChildren() })))));
+    }
+};
+XBreadcrumb.style = xBreadcrumbCss();
+
+const xBreadcrumbItemCss = () => `@charset "UTF-8";:host{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center}li{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center}.x-breadcrumb-link{color:var(--x-breadcrumb-item-link-color, var(--x-color-text-secondary, rgba(0, 0, 0, 0.45)));-webkit-transition:color var(--x-breadcrumb-item-motion-duration, var(--x-motion-duration-mid, 0.2s));transition:color var(--x-breadcrumb-item-motion-duration, var(--x-motion-duration-mid, 0.2s));cursor:pointer;text-decoration:none}.x-breadcrumb-link:hover{color:var(--x-breadcrumb-item-link-color-hover, var(--x-color-primary, #1677ff))}a.x-breadcrumb-link{text-decoration:none}.x-breadcrumb-separator{margin:0 var(--x-breadcrumb-item-separator-margin-inline, var(--x-spacing-xs, 8px));color:var(--x-breadcrumb-item-separator-color, var(--x-color-text-secondary, rgba(0, 0, 0, 0.45)))}:host(:last-child) .x-breadcrumb-separator{display:none}:host(:last-child) .x-breadcrumb-link{color:var(--x-breadcrumb-item-last-color, var(--x-color-text, rgba(0, 0, 0, 0.88)));cursor:default}:host(:last-child) .x-breadcrumb-link:hover{color:var(--x-breadcrumb-item-last-color, var(--x-color-text, rgba(0, 0, 0, 0.88)))}`;
+
+const XBreadcrumbItem = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.xClick = index.createEvent(this, "xClick", 7);
+    }
+    /**
+     * Target of hyperlink.
+     * @example
+     * <x-breadcrumb-item href="/home">Home</x-breadcrumb-item>
+     */
+    href;
+    /**
+     * Separator (passed from parent).
+     * @example
+     * <x-breadcrumb-item separator=">">Home</x-breadcrumb-item>
+     */
+    separator = '/';
+    /**
+     * Click event.
+     * @example
+     * <x-breadcrumb-item onXClick={(ev) => console.log(ev.detail)}>Home</x-breadcrumb-item>
+     */
+    xClick;
+    /**
+     * Handle click: allow navigation when href exists, otherwise prevent default.
+     *
+     * Flow:
+     * 1. Checks if `href` prop is provided.
+     * 2. If no `href` (text-only item):
+     *    - Calls `e.preventDefault()` to stop any default action.
+     * 3. Emits `xClick` event with the original mouse event.
+     *
+     * @param e - Mouse click event.
+     * @returns void
+     * @example
+     * <x-breadcrumb-item>Home</x-breadcrumb-item>
+     */
+    handleClick = (e) => {
+        // If href is not provided, prevent default to avoid navigation.
+        if (this.href) ;
+        else {
+            e.preventDefault();
+        }
+        this.xClick.emit(e);
+    };
+    /**
+     * Render breadcrumb link and separator.
+     * @returns JSX.Element
+     * @example
+     * <x-breadcrumb-item href="/home">Home</x-breadcrumb-item>
+     */
+    render() {
+        const { href, separator } = this;
+        // Choose anchor or span based on href availability.
+        const content = href ? (index.h("a", { href: href, class: "x-breadcrumb-link", onClick: this.handleClick }, index.h("slot", null))) : (index.h("span", { class: "x-breadcrumb-link", onClick: this.handleClick }, index.h("slot", null)));
+        return (index.h(index.Host, { key: 'bfbf8af99887d25277f509786f2ba98cce8c6917' }, index.h("li", { key: 'dc34f414949a6ac1b111bd7db04c5f9781de9e08' }, content, index.h("span", { key: 'b46cbc9ac6c3177e6b621c9e5a1b059b8a747905', class: "x-breadcrumb-separator" }, separator))));
+    }
+};
+XBreadcrumbItem.style = xBreadcrumbItemCss();
+
+exports.x_breadcrumb = XBreadcrumb;
+exports.x_breadcrumb_item = XBreadcrumbItem;

package/dist/cjs/x-carousel.cjs.entry.js

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./index-C7sKs9A2.js');
+var index = require('./index-Cy2P_ln3.js');
 
-const xCarouselCss = () => `@charset "UTF-8";:root{--x-color-primary:#1677ff;--x-color-primary-rgb:22, 119, 255;--x-color-primary-contrast:#ffffff;--x-color-primary-contrast-rgb:255, 255, 255;--x-color-primary-shade:#0958d9;--x-color-primary-tint:#4096ff;--x-color-primary-bg:#e6f4ff;--x-color-primary-bg-hover:#bae0ff;--x-color-primary-border:#91caff;--x-color-primary-border-hover:#69b1ff;--x-color-primary-hover:#4096ff;--x-color-primary-active:#0958d9;--x-color-primary-text:#1677ff;--x-color-primary-text-hover:#4096ff;--x-color-primary-text-active:#0958d9;--x-color-secondary:#3dc2ff;--x-color-secondary-rgb:61, 194, 255;--x-color-secondary-contrast:#ffffff;--x-color-secondary-contrast-rgb:255, 255, 255;--x-color-secondary-shade:#36abe0;--x-color-secondary-tint:#50c8ff;--x-color-success:#52c41a;--x-color-success-rgb:82, 196, 26;--x-color-success-contrast:#ffffff;--x-color-success-contrast-rgb:255, 255, 255;--x-color-success-shade:#389e0d;--x-color-success-tint:#73d13d;--x-color-success-bg:#f6ffed;--x-color-success-bg-hover:#d9f7be;--x-color-success-border:#b7eb8f;--x-color-success-border-hover:#95de64;--x-color-success-hover:#73d13d;--x-color-success-active:#389e0d;--x-color-success-text:#52c41a;--x-color-success-text-hover:#73d13d;--x-color-success-text-active:#389e0d;--x-color-warning:#faad14;--x-color-warning-rgb:250, 173, 20;--x-color-warning-contrast:#000000;--x-color-warning-contrast-rgb:0, 0, 0;--x-color-warning-shade:#d48806;--x-color-warning-tint:#ffc53d;--x-color-warning-bg:#fffbe6;--x-color-warning-bg-hover:#fff1b8;--x-color-warning-border:#ffe58f;--x-color-warning-border-hover:#ffd666;--x-color-warning-hover:#ffc53d;--x-color-warning-active:#d48806;--x-color-warning-text:#faad14;--x-color-warning-text-hover:#ffc53d;--x-color-warning-text-active:#d48806;--x-color-danger:#ff4d4f;--x-color-danger-rgb:255, 77, 79;--x-color-danger-contrast:#ffffff;--x-color-danger-contrast-rgb:255, 255, 255;--x-color-danger-shade:#cf1322;--x-color-danger-tint:#ff7875;--x-color-error:#ff4d4f;--x-color-error-rgb:255, 77, 79;--x-color-error-bg:#fff2f0;--x-color-error-bg-hover:#ffccc7;--x-color-error-border:#ffa39e;--x-color-error-border-hover:#ff7875;--x-color-error-hover:#ff7875;--x-color-error-active:#d9363e;--x-color-error-text:#ff4d4f;--x-color-error-text-hover:#ff7875;--x-color-error-text-active:#d9363e;--x-color-info:#1677ff;--x-color-info-rgb:22, 119, 255;--x-color-info-bg:#e6f4ff;--x-color-info-bg-hover:#bae0ff;--x-color-info-border:#91caff;--x-color-info-border-hover:#69b1ff;--x-color-info-hover:#69b1ff;--x-color-info-active:#0958d9;--x-color-info-text:#1677ff;--x-color-info-text-hover:#69b1ff;--x-color-info-text-active:#0958d9;--x-color-text:rgba(0, 0, 0, 0.88);--x-color-text-secondary:rgba(0, 0, 0, 0.65);--x-color-text-tertiary:rgba(0, 0, 0, 0.45);--x-color-text-quaternary:rgba(0, 0, 0, 0.25);--x-color-text-disabled:rgba(0, 0, 0, 0.25);--x-color-text-placeholder:rgba(0, 0, 0, 0.25);--x-color-text-heading:rgba(0, 0, 0, 0.88);--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-bg-container:#ffffff;--x-color-bg-elevated:#ffffff;--x-color-bg-layout:#f5f5f5;--x-color-bg-spotlight:rgba(0, 0, 0, 0.85);--x-color-bg-mask:rgba(0, 0, 0, 0.45);--x-color-bg-base:#ffffff;--x-color-bg-container-disabled:#f5f5f5;--x-color-bg-container-loading:rgba(255, 255, 255, 0.65);--x-color-white:#ffffff;--x-color-fill:rgba(0, 0, 0, 0.15);--x-color-fill-secondary:rgba(0, 0, 0, 0.06);--x-color-fill-tertiary:rgba(0, 0, 0, 0.04);--x-color-fill-quaternary:rgba(0, 0, 0, 0.02);--x-color-border:#d9d9d9;--x-color-border-secondary:#f0f0f0;--x-color-border-bg:#ffffff;--x-color-split:rgba(5, 5, 5, 0.06);--x-color-dark:#222428;--x-color-dark-rgb:34, 36, 40;--x-color-dark-contrast:#ffffff;--x-color-dark-contrast-rgb:255, 255, 255;--x-color-dark-shade:#1e2023;--x-color-dark-tint:#383a3e;--x-color-medium:#92949c;--x-color-medium-rgb:146, 148, 156;--x-color-medium-contrast:#ffffff;--x-color-medium-contrast-rgb:255, 255, 255;--x-color-medium-shade:#808289;--x-color-medium-tint:#9d9fa6;--x-color-light:#f4f5f8;--x-color-light-rgb:244, 245, 248;--x-color-light-contrast:#000000;--x-color-light-contrast-rgb:0, 0, 0;--x-color-light-shade:#d7d8da;--x-color-light-tint:#f5f6f9;--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-size:14px;--x-font-size-sm:12px;--x-font-size-lg:16px;--x-font-size-xl:20px;--x-font-size-heading-1:38px;--x-font-size-heading-2:30px;--x-font-size-heading-3:24px;--x-font-size-heading-4:20px;--x-font-size-heading-5:16px;--x-line-height:1.5714285714285714;--x-line-height-lg:1.5;--x-line-height-sm:1.6666666666666667;--x-line-height-heading-1:1.2105263157894737;--x-line-height-heading-2:1.2666666666666666;--x-line-height-heading-3:1.3333333333333333;--x-line-height-heading-4:1.4;--x-line-height-heading-5:1.5;--x-font-weight-normal:400;--x-font-weight-medium:500;--x-font-weight-semibold:600;--x-font-weight-strong:600;--x-font-size-base:14px;--x-font-size-xxl:24px;--x-line-height-base:1.5714285714285714;--x-spacing-xxs:4px;--x-spacing-xs:8px;--x-spacing-sm:12px;--x-spacing-md:16px;--x-spacing-lg:20px;--x-spacing-xl:24px;--x-spacing-xxl:32px;--x-spacing-xxxl:48px;--x-margin-xxs:4px;--x-margin-xs:8px;--x-margin-sm:12px;--x-margin-md:16px;--x-margin-lg:24px;--x-margin-xl:32px;--x-margin-xxl:48px;--x-padding-xxs:4px;--x-padding-xs:8px;--x-padding-sm:12px;--x-padding-md:16px;--x-padding-lg:24px;--x-padding-content-horizontal-lg:24px;--x-padding-content-vertical-lg:12px;--x-padding-content-horizontal:16px;--x-padding-content-vertical:12px;--x-padding-content-horizontal-sm:16px;--x-padding-content-vertical-sm:8px;--x-border-radius:6px;--x-border-radius-xs:2px;--x-border-radius-sm:4px;--x-border-radius-lg:8px;--x-border-radius-xl:12px;--x-border-radius-outer:4px;--x-border-radius-base:6px;--x-border-width:1px;--x-border-width-base:1px;--x-shadow:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-shadow-secondary:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-shadow-tertiary:0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02);--x-shadow-lg:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-secondary:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-tertiary:0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02);--x-box-shadow-popover-arrow:2px 2px 5px rgba(0, 0, 0, 0.05);--x-box-shadow-card:0 1px 2px -2px rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.12), 0 5px 12px 4px rgba(0, 0, 0, 0.09);--x-box-shadow-drawer-right:-6px 0 16px 0 rgba(0, 0, 0, 0.08), -3px 0 6px -4px rgba(0, 0, 0, 0.12), -9px 0 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-drawer-left:6px 0 16px 0 rgba(0, 0, 0, 0.08), 3px 0 6px -4px rgba(0, 0, 0, 0.12), 9px 0 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-drawer-up:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-drawer-down:0 -6px 16px 0 rgba(0, 0, 0, 0.08), 0 -3px 6px -4px rgba(0, 0, 0, 0.12), 0 -9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-tabs-overflow-left:inset 10px 0 8px -8px rgba(0, 0, 0, 0.08);--x-box-shadow-tabs-overflow-right:inset -10px 0 8px -8px rgba(0, 0, 0, 0.08);--x-box-shadow-tabs-overflow-top:inset 0 10px 8px -8px rgba(0, 0, 0, 0.08);--x-box-shadow-tabs-overflow-bottom:inset 0 -10px 8px -8px rgba(0, 0, 0, 0.08);--x-motion-duration-fast:0.1s;--x-motion-duration-mid:0.2s;--x-motion-duration-slow:0.3s;--x-motion-ease-in-out:cubic-bezier(0.645, 0.045, 0.355, 1);--x-motion-ease-out:cubic-bezier(0.215, 0.61, 0.355, 1);--x-motion-ease-in:cubic-bezier(0.55, 0.055, 0.675, 0.19);--x-motion-ease-out-back:cubic-bezier(0.12, 0.4, 0.29, 1.46);--x-motion-ease-in-back:cubic-bezier(0.71, -0.46, 0.88, 0.6);--x-motion-ease-in-out-circle:cubic-bezier(0.78, 0.14, 0.15, 0.86);--x-motion-ease-out-circle:cubic-bezier(0.08, 0.82, 0.17, 1);--x-motion-ease-in-circle:cubic-bezier(0.6, 0.04, 0.98, 0.34);--x-motion-ease-in-quint:cubic-bezier(0.755, 0.05, 0.855, 0.06);--x-motion-ease-out-quint:cubic-bezier(0.23, 1, 0.32, 1);--x-z-index-base:0;--x-z-index-popup-base:1000;--x-z-index-popup:1030;--x-z-index-affix:10;--x-z-index-modal:1000;--x-z-index-modal-mask:1000;--x-z-index-drawer:1000;--x-z-index-popover:1030;--x-z-index-dropdown:1050;--x-z-index-tooltip:1070;--x-z-index-notification:1080;--x-z-index-message:1090;--x-z-index-popconfirm:1060;--x-z-index-table-fixed:10;--x-opacity-loading:0.65;--x-opacity-image:1;--x-opacity-disabled:0.5;--x-control-height:32px;--x-control-height-xs:24px;--x-control-height-sm:24px;--x-control-height-lg:40px;--x-control-radio-size:16px;--x-control-checkbox-size:16px;--x-control-padding-horizontal:12px;--x-control-padding-horizontal-sm:8px;--x-control-outline-width:2px;--x-control-outline:rgba(5, 145, 255, 0.1);--x-control-item-bg-hover:rgba(0, 0, 0, 0.04);--x-control-item-bg-active:#e6f4ff;--x-control-item-bg-active-hover:#bae0ff;--x-control-item-bg-active-disabled:rgba(0, 0, 0, 0.15);--x-control-tmp-outline:rgba(0, 0, 0, 0.02);--x-color-yellow:#fadb14;--x-color-yellow-rgb:250, 219, 20;--x-font-family-base:var(--x-font-family);--x-color-link:#1677ff;--x-color-link-hover:#69b1ff;--x-color-link-active:#0958d9;--x-color-icon:rgba(0, 0, 0, 0.45);--x-color-icon-hover:rgba(0, 0, 0, 0.88);--x-color-highlight:#ff4d4f;--x-color-bg-text-hover:rgba(0, 0, 0, 0.06);--x-color-bg-text-active:rgba(0, 0, 0, 0.15);--x-screen-xs:480px;--x-screen-xs-min:480px;--x-screen-xs-max:575px;--x-screen-sm:576px;--x-screen-sm-min:576px;--x-screen-sm-max:767px;--x-screen-md:768px;--x-screen-md-min:768px;--x-screen-md-max:991px;--x-screen-lg:992px;--x-screen-lg-min:992px;--x-screen-lg-max:1199px;--x-screen-xl:1200px;--x-screen-xl-min:1200px;--x-screen-xl-max:1599px;--x-screen-xxl:1600px;--x-screen-xxl-min:1600px;--x-color-fill-content:rgba(0, 0, 0, 0.06);--x-color-fill-content-hover:rgba(0, 0, 0, 0.15);--x-color-fill-alter:rgba(0, 0, 0, 0.02);--x-scrollbar-width:12px;--x-scrollbar-track-bg:rgba(0, 0, 0, 0.04);--x-scrollbar-thumb-bg:rgba(0, 0, 0, 0.25);--x-scrollbar-thumb-bg-hover:rgba(0, 0, 0, 0.35);--x-menu-dark-bg:#001529;--x-menu-dark-item-bg:#001529;--x-menu-dark-popup-bg:#001529;--x-menu-dark-submenu-item-bg:#000c17}:host{display:block;position:relative;width:100%;height:100%;overflow:hidden}.x-carousel-content{width:100%;height:100%;overflow:hidden}.x-carousel-track{display:-ms-flexbox;display:flex;width:100%;height:100%;-webkit-transition:-webkit-transform var(--x-carousel-motion-duration, 0.5s) ease;transition:-webkit-transform var(--x-carousel-motion-duration, 0.5s) ease;transition:transform var(--x-carousel-motion-duration, 0.5s) ease;transition:transform var(--x-carousel-motion-duration, 0.5s) ease, -webkit-transform var(--x-carousel-motion-duration, 0.5s) ease}::slotted(*){-ms-flex-negative:0;flex-shrink:0;width:100%;height:100%;display:block}.x-carousel-dots{position:absolute;display:-ms-flexbox;display:flex;list-style:none;padding:0;margin:0;z-index:10}:host(.x-carousel-bottom) .x-carousel-dots{bottom:var(--x-carousel-dots-spacing, var(--x-spacing-md, 16px));left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}:host(.x-carousel-top) .x-carousel-dots{top:var(--x-carousel-dots-spacing, var(--x-spacing-md, 16px));left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}:host(.x-carousel-left) .x-carousel-dots{left:var(--x-carousel-dots-spacing, var(--x-spacing-md, 16px));top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);-ms-flex-direction:column;flex-direction:column}:host(.x-carousel-right) .x-carousel-dots{right:var(--x-carousel-dots-spacing, var(--x-spacing-md, 16px));top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);-ms-flex-direction:column;flex-direction:column}.x-carousel-dots li{margin:0 var(--x-carousel-dot-gap, var(--x-spacing-xxs, 4px))}.x-carousel-dots button{display:block;width:var(--x-carousel-dot-width, var(--x-spacing-md, 16px));height:var(--x-carousel-dot-height, 3px);padding:0;color:transparent;font-size:0;background:var(--x-carousel-dot-bg, var(--x-color-white, #ffffff));border:0;border-radius:var(--x-carousel-dot-border-radius, 1px);outline:none;cursor:pointer;opacity:var(--x-carousel-dot-opacity, 0.3);-webkit-transition:all var(--x-carousel-dot-motion-duration, var(--x-motion-duration-slow, 0.3s));transition:all var(--x-carousel-dot-motion-duration, var(--x-motion-duration-slow, 0.3s))}.x-carousel-dot-active button{background:var(--x-carousel-dot-bg, var(--x-color-white, #ffffff));opacity:var(--x-carousel-dot-opacity-active, 1);width:var(--x-carousel-dot-width-active, var(--x-spacing-lg, 24px))}`;
+const xCarouselCss = () => `@charset "UTF-8";:root{--x-color-primary:#1677ff;--x-color-primary-rgb:22, 119, 255;--x-color-primary-contrast:#ffffff;--x-color-primary-contrast-rgb:255, 255, 255;--x-color-primary-shade:#0958d9;--x-color-primary-tint:#4096ff;--x-color-primary-bg:#e6f4ff;--x-color-primary-bg-hover:#bae0ff;--x-color-primary-border:#91caff;--x-color-primary-border-hover:#69b1ff;--x-color-primary-hover:#4096ff;--x-color-primary-active:#0958d9;--x-color-primary-text:#1677ff;--x-color-primary-text-hover:#4096ff;--x-color-primary-text-active:#0958d9;--x-color-secondary:#3dc2ff;--x-color-secondary-rgb:61, 194, 255;--x-color-secondary-contrast:#ffffff;--x-color-secondary-contrast-rgb:255, 255, 255;--x-color-secondary-shade:#36abe0;--x-color-secondary-tint:#50c8ff;--x-color-success:#52c41a;--x-color-success-rgb:82, 196, 26;--x-color-success-contrast:#ffffff;--x-color-success-contrast-rgb:255, 255, 255;--x-color-success-shade:#389e0d;--x-color-success-tint:#73d13d;--x-color-success-bg:#f6ffed;--x-color-success-bg-hover:#d9f7be;--x-color-success-border:#b7eb8f;--x-color-success-border-hover:#95de64;--x-color-success-hover:#73d13d;--x-color-success-active:#389e0d;--x-color-success-text:#52c41a;--x-color-success-text-hover:#73d13d;--x-color-success-text-active:#389e0d;--x-color-warning:#faad14;--x-color-warning-rgb:250, 173, 20;--x-color-warning-contrast:#000000;--x-color-warning-contrast-rgb:0, 0, 0;--x-color-warning-shade:#d48806;--x-color-warning-tint:#ffc53d;--x-color-warning-bg:#fffbe6;--x-color-warning-bg-hover:#fff1b8;--x-color-warning-border:#ffe58f;--x-color-warning-border-hover:#ffd666;--x-color-warning-hover:#ffc53d;--x-color-warning-active:#d48806;--x-color-warning-text:#faad14;--x-color-warning-text-hover:#ffc53d;--x-color-warning-text-active:#d48806;--x-color-danger:#ff4d4f;--x-color-danger-rgb:255, 77, 79;--x-color-danger-contrast:#ffffff;--x-color-danger-contrast-rgb:255, 255, 255;--x-color-danger-shade:#cf1322;--x-color-danger-tint:#ff7875;--x-color-error:#ff4d4f;--x-color-error-rgb:255, 77, 79;--x-color-error-bg:#fff2f0;--x-color-error-bg-hover:#ffccc7;--x-color-error-border:#ffa39e;--x-color-error-border-hover:#ff7875;--x-color-error-hover:#ff7875;--x-color-error-active:#d9363e;--x-color-error-text:#ff4d4f;--x-color-error-text-hover:#ff7875;--x-color-error-text-active:#d9363e;--x-color-info:#1677ff;--x-color-info-rgb:22, 119, 255;--x-color-info-bg:#e6f4ff;--x-color-info-bg-hover:#bae0ff;--x-color-info-border:#91caff;--x-color-info-border-hover:#69b1ff;--x-color-info-hover:#69b1ff;--x-color-info-active:#0958d9;--x-color-info-text:#1677ff;--x-color-info-text-hover:#69b1ff;--x-color-info-text-active:#0958d9;--x-color-text:rgba(0, 0, 0, 0.88);--x-color-text-secondary:rgba(0, 0, 0, 0.65);--x-color-text-tertiary:rgba(0, 0, 0, 0.45);--x-color-text-quaternary:rgba(0, 0, 0, 0.25);--x-color-text-disabled:rgba(0, 0, 0, 0.25);--x-color-text-placeholder:rgba(0, 0, 0, 0.25);--x-color-text-heading:rgba(0, 0, 0, 0.88);--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;--x-color-bg-container:#ffffff;--x-color-bg-elevated:#ffffff;--x-color-bg-layout:#f5f5f5;--x-color-bg-spotlight:rgba(0, 0, 0, 0.85);--x-color-bg-mask:rgba(0, 0, 0, 0.45);--x-color-bg-base:#ffffff;--x-color-bg-container-disabled:#f5f5f5;--x-color-bg-container-loading:rgba(255, 255, 255, 0.65);--x-color-white:#ffffff;--x-color-fill:rgba(0, 0, 0, 0.15);--x-color-fill-secondary:rgba(0, 0, 0, 0.06);--x-color-fill-tertiary:rgba(0, 0, 0, 0.04);--x-color-fill-quaternary:rgba(0, 0, 0, 0.02);--x-color-border:#d9d9d9;--x-color-border-secondary:#f0f0f0;--x-color-border-bg:#ffffff;--x-color-split:rgba(5, 5, 5, 0.06);--x-color-dark:#222428;--x-color-dark-rgb:34, 36, 40;--x-color-dark-contrast:#ffffff;--x-color-dark-contrast-rgb:255, 255, 255;--x-color-dark-shade:#1e2023;--x-color-dark-tint:#383a3e;--x-color-medium:#92949c;--x-color-medium-rgb:146, 148, 156;--x-color-medium-contrast:#ffffff;--x-color-medium-contrast-rgb:255, 255, 255;--x-color-medium-shade:#808289;--x-color-medium-tint:#9d9fa6;--x-color-light:#f4f5f8;--x-color-light-rgb:244, 245, 248;--x-color-light-contrast:#000000;--x-color-light-contrast-rgb:0, 0, 0;--x-color-light-shade:#d7d8da;--x-color-light-tint:#f5f6f9;--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-size:14px;--x-font-size-sm:12px;--x-font-size-lg:16px;--x-font-size-xl:20px;--x-font-size-heading-1:38px;--x-font-size-heading-2:30px;--x-font-size-heading-3:24px;--x-font-size-heading-4:20px;--x-font-size-heading-5:16px;--x-line-height:1.5714285714285714;--x-line-height-lg:1.5;--x-line-height-sm:1.6666666666666667;--x-line-height-heading-1:1.2105263157894737;--x-line-height-heading-2:1.2666666666666666;--x-line-height-heading-3:1.3333333333333333;--x-line-height-heading-4:1.4;--x-line-height-heading-5:1.5;--x-font-weight-normal:400;--x-font-weight-medium:500;--x-font-weight-semibold:600;--x-font-weight-strong:600;--x-font-size-base:14px;--x-font-size-xxl:24px;--x-line-height-base:1.5714285714285714;--x-spacing-xxs:4px;--x-spacing-xs:8px;--x-spacing-sm:12px;--x-spacing-md:16px;--x-spacing-lg:20px;--x-spacing-xl:24px;--x-spacing-xxl:32px;--x-spacing-xxxl:48px;--x-margin-xxs:4px;--x-margin-xs:8px;--x-margin-sm:12px;--x-margin-md:16px;--x-margin-lg:24px;--x-margin-xl:32px;--x-margin-xxl:48px;--x-padding-xxs:4px;--x-padding-xs:8px;--x-padding-sm:12px;--x-padding-md:16px;--x-padding-lg:24px;--x-padding-content-horizontal-lg:24px;--x-padding-content-vertical-lg:12px;--x-padding-content-horizontal:16px;--x-padding-content-vertical:12px;--x-padding-content-horizontal-sm:16px;--x-padding-content-vertical-sm:8px;--x-border-radius:6px;--x-border-radius-xs:2px;--x-border-radius-sm:4px;--x-border-radius-lg:8px;--x-border-radius-xl:12px;--x-border-radius-outer:4px;--x-border-radius-base:6px;--x-border-width:1px;--x-border-width-base:1px;--x-shadow:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-shadow-secondary:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-shadow-tertiary:0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02);--x-shadow-lg:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-secondary:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-tertiary:0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02);--x-box-shadow-popover-arrow:2px 2px 5px rgba(0, 0, 0, 0.05);--x-box-shadow-card:0 1px 2px -2px rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.12), 0 5px 12px 4px rgba(0, 0, 0, 0.09);--x-box-shadow-drawer-right:-6px 0 16px 0 rgba(0, 0, 0, 0.08), -3px 0 6px -4px rgba(0, 0, 0, 0.12), -9px 0 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-drawer-left:6px 0 16px 0 rgba(0, 0, 0, 0.08), 3px 0 6px -4px rgba(0, 0, 0, 0.12), 9px 0 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-drawer-up:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-drawer-down:0 -6px 16px 0 rgba(0, 0, 0, 0.08), 0 -3px 6px -4px rgba(0, 0, 0, 0.12), 0 -9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-tabs-overflow-left:inset 10px 0 8px -8px rgba(0, 0, 0, 0.08);--x-box-shadow-tabs-overflow-right:inset -10px 0 8px -8px rgba(0, 0, 0, 0.08);--x-box-shadow-tabs-overflow-top:inset 0 10px 8px -8px rgba(0, 0, 0, 0.08);--x-box-shadow-tabs-overflow-bottom:inset 0 -10px 8px -8px rgba(0, 0, 0, 0.08);--x-motion-duration-fast:0.1s;--x-motion-duration-mid:0.2s;--x-motion-duration-slow:0.3s;--x-motion-ease-in-out:cubic-bezier(0.645, 0.045, 0.355, 1);--x-motion-ease-out:cubic-bezier(0.215, 0.61, 0.355, 1);--x-motion-ease-in:cubic-bezier(0.55, 0.055, 0.675, 0.19);--x-motion-ease-out-back:cubic-bezier(0.12, 0.4, 0.29, 1.46);--x-motion-ease-in-back:cubic-bezier(0.71, -0.46, 0.88, 0.6);--x-motion-ease-in-out-circle:cubic-bezier(0.78, 0.14, 0.15, 0.86);--x-motion-ease-out-circle:cubic-bezier(0.08, 0.82, 0.17, 1);--x-motion-ease-in-circle:cubic-bezier(0.6, 0.04, 0.98, 0.34);--x-motion-ease-in-quint:cubic-bezier(0.755, 0.05, 0.855, 0.06);--x-motion-ease-out-quint:cubic-bezier(0.23, 1, 0.32, 1);--x-z-index-base:0;--x-z-index-popup-base:1000;--x-z-index-popup:1030;--x-z-index-affix:10;--x-z-index-modal:1000;--x-z-index-modal-mask:1000;--x-z-index-drawer:1000;--x-z-index-popover:1030;--x-z-index-dropdown:1050;--x-z-index-tooltip:1070;--x-z-index-notification:1080;--x-z-index-message:1090;--x-z-index-popconfirm:1060;--x-z-index-table-fixed:10;--x-opacity-loading:0.65;--x-opacity-image:1;--x-opacity-disabled:0.5;--x-control-height:32px;--x-control-height-xs:24px;--x-control-height-sm:24px;--x-control-height-lg:40px;--x-control-radio-size:16px;--x-control-checkbox-size:16px;--x-control-padding-horizontal:12px;--x-control-padding-horizontal-sm:8px;--x-control-outline-width:2px;--x-control-outline:rgba(5, 145, 255, 0.1);--x-control-item-bg-hover:rgba(0, 0, 0, 0.04);--x-control-item-bg-active:#e6f4ff;--x-control-item-bg-active-hover:#bae0ff;--x-control-item-bg-active-disabled:rgba(0, 0, 0, 0.15);--x-control-tmp-outline:rgba(0, 0, 0, 0.02);--x-color-yellow:#fadb14;--x-color-yellow-rgb:250, 219, 20;--x-font-family-base:var(--x-font-family);--x-color-link:#1677ff;--x-color-link-hover:#69b1ff;--x-color-link-active:#0958d9;--x-color-icon:rgba(0, 0, 0, 0.45);--x-color-icon-hover:rgba(0, 0, 0, 0.88);--x-color-highlight:#ff4d4f;--x-color-bg-text-hover:rgba(0, 0, 0, 0.06);--x-color-bg-text-active:rgba(0, 0, 0, 0.15);--x-screen-xs:480px;--x-screen-xs-min:480px;--x-screen-xs-max:575px;--x-screen-sm:576px;--x-screen-sm-min:576px;--x-screen-sm-max:767px;--x-screen-md:768px;--x-screen-md-min:768px;--x-screen-md-max:991px;--x-screen-lg:992px;--x-screen-lg-min:992px;--x-screen-lg-max:1199px;--x-screen-xl:1200px;--x-screen-xl-min:1200px;--x-screen-xl-max:1599px;--x-screen-xxl:1600px;--x-screen-xxl-min:1600px;--x-color-fill-content:rgba(0, 0, 0, 0.06);--x-color-fill-content-hover:rgba(0, 0, 0, 0.15);--x-color-fill-alter:rgba(0, 0, 0, 0.02);--x-scrollbar-width:12px;--x-scrollbar-track-bg:rgba(0, 0, 0, 0.04);--x-scrollbar-thumb-bg:rgba(0, 0, 0, 0.25);--x-scrollbar-thumb-bg-hover:rgba(0, 0, 0, 0.35);--x-menu-dark-bg:#001529;--x-menu-dark-item-bg:#001529;--x-menu-dark-popup-bg:#001529;--x-menu-dark-submenu-item-bg:#000c17}:host{display:block;position:relative;width:100%;height:100%;overflow:hidden}.x-carousel-content{width:100%;height:100%;overflow:hidden}.x-carousel-track{display:-ms-flexbox;display:flex;width:100%;height:100%;-webkit-transition:-webkit-transform var(--x-carousel-motion-duration, 0.5s) ease;transition:-webkit-transform var(--x-carousel-motion-duration, 0.5s) ease;transition:transform var(--x-carousel-motion-duration, 0.5s) ease;transition:transform var(--x-carousel-motion-duration, 0.5s) ease, -webkit-transform var(--x-carousel-motion-duration, 0.5s) ease}::slotted(*){-ms-flex-negative:0;flex-shrink:0;width:100%;height:100%;display:block}.x-carousel-dots{position:absolute;display:-ms-flexbox;display:flex;list-style:none;padding:0;margin:0;z-index:10}:host(.x-carousel-bottom) .x-carousel-dots{bottom:var(--x-carousel-dots-spacing, var(--x-spacing-md, 16px));left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}:host(.x-carousel-top) .x-carousel-dots{top:var(--x-carousel-dots-spacing, var(--x-spacing-md, 16px));left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}:host(.x-carousel-left) .x-carousel-dots{left:var(--x-carousel-dots-spacing, var(--x-spacing-md, 16px));top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);-ms-flex-direction:column;flex-direction:column}:host(.x-carousel-right) .x-carousel-dots{right:var(--x-carousel-dots-spacing, var(--x-spacing-md, 16px));top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);-ms-flex-direction:column;flex-direction:column}.x-carousel-dots li{margin:0 var(--x-carousel-dot-gap, var(--x-spacing-xxs, 4px))}.x-carousel-dots button{display:block;width:var(--x-carousel-dot-width, var(--x-spacing-md, 16px));height:var(--x-carousel-dot-height, 3px);padding:0;color:transparent;font-size:0;background:var(--x-carousel-dot-bg, var(--x-color-white, #ffffff));border:0;border-radius:var(--x-carousel-dot-border-radius, 1px);outline:none;cursor:pointer;opacity:var(--x-carousel-dot-opacity, 0.3);-webkit-transition:all var(--x-carousel-dot-motion-duration, var(--x-motion-duration-slow, 0.3s));transition:all var(--x-carousel-dot-motion-duration, var(--x-motion-duration-slow, 0.3s))}.x-carousel-dot-active button{background:var(--x-carousel-dot-bg, var(--x-color-white, #ffffff));opacity:var(--x-carousel-dot-opacity-active, 1);width:var(--x-carousel-dot-width-active, var(--x-spacing-lg, 24px))}`;
 
 const XCarousel = class {
     constructor(hostRef) {
@@ -132,14 +132,14 @@ const XCarousel = class {
      * <x-carousel><div>Slide</div></x-carousel>
      */
     render() {
-        return (index.h(index.Host, { key: '8e5a2b5d12ee7bf278bcdfca6409db2782a0d23b', class: {
+        return (index.h(index.Host, { key: '9562b0f02ab8f2c41433f0ccbba428acef674827', class: {
                 'x-carousel': true,
-                [`x-carousel-${this.dotPosition}`]: true
-            } }, index.h("div", { key: '6e3d5e9092b4162a7570752ec4bff34e8fb06ab1', class: "x-carousel-content" }, index.h("div", { key: 'e61cb9b1f3c073694d658125a6fa94681ae9ef46', class: "x-carousel-track", style: {
+                [`x-carousel-${this.dotPosition}`]: true,
+            } }, index.h("div", { key: 'dd1eb8940cff9a0fe1d513cd3449e559452ee207', class: "x-carousel-content" }, index.h("div", { key: 'accfc7eabe6190b08d483bdd90990490583f81b9', class: "x-carousel-track", style: {
                 // Translate track for scroll effect or keep for fade.
                 transform: this.effect === 'scrollx' ? `translateX(-${this.activeIndex * 100}%)` : 'none',
-                opacity: this.effect === 'fade' ? '1' : undefined
-            } }, index.h("slot", { key: '5b8b3529d999c49c7610881bd56a0d99cb7a076a' }))), this.dots && (index.h("ul", { key: '36486dbdc67cca67729515232249f11466161dd2', class: "x-carousel-dots" }, Array.from({ length: this.count }).map((_, i) => (index.h("li", { class: { 'x-carousel-dot-active': i === this.activeIndex }, onClick: () => this.goTo(i) }, index.h("button", null))))))));
+                opacity: this.effect === 'fade' ? '1' : undefined,
+            } }, index.h("slot", { key: '31263f10d1f4afd413850e6f4a66db37d93d49b5' }))), this.dots && (index.h("ul", { key: '2dce1416c5133e37a14699f5bc462ea94b130fc1', class: "x-carousel-dots" }, Array.from({ length: this.count }).map((_, i) => (index.h("li", { class: { 'x-carousel-dot-active': i === this.activeIndex }, onClick: () => this.goTo(i) }, index.h("button", null))))))));
     }
 };
 XCarousel.style = xCarouselCss();