@xlabs-store/core 0.0.1

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

@@ -0,0 +1,145 @@
+import { r as registerInstance, a as getElement, h, H as Host } from './index-ig_mFsVk.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 XCarousel = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    get el() { return getElement(this); }
+    /**
+     * Enable autoplay rotation.
+     * @example
+     * <x-carousel autoplay></x-carousel>
+     */
+    autoplay = false;
+    /**
+     * Position of navigation dots.
+     * @example
+     * <x-carousel dotPosition="top"></x-carousel>
+     */
+    dotPosition = 'bottom';
+    /**
+     * Whether to show navigation dots.
+     * @example
+     * <x-carousel dots={false}></x-carousel>
+     */
+    dots = true;
+    /**
+     * Transition effect.
+     * @example
+     * <x-carousel effect="fade"></x-carousel>
+     */
+    effect = 'scrollx';
+    /**
+     * Active slide index.
+     */
+    activeIndex = 0;
+    /**
+     * Total number of slides.
+     */
+    count = 0;
+    /**
+     * Autoplay timer handle.
+     */
+    timer;
+    /**
+     * Initialize slide count and autoplay on load.
+     * @returns void
+     * @example
+     * <x-carousel autoplay></x-carousel>
+     */
+    componentDidLoad() {
+        this.count = this.el.children.length;
+        if (this.autoplay) {
+            this.startTimer();
+        }
+    }
+    /**
+     * Stop autoplay on disconnect.
+     * @returns void
+     * @example
+     * <x-carousel></x-carousel>
+     */
+    disconnectedCallback() {
+        this.stopTimer();
+    }
+    /**
+     * Start autoplay interval.
+     * @returns void
+     * @example
+     * <x-carousel autoplay></x-carousel>
+     */
+    startTimer() {
+        this.timer = setInterval(() => {
+            this.next();
+        }, 3000);
+    }
+    /**
+     * Stop autoplay interval.
+     * @returns void
+     * @example
+     * <x-carousel></x-carousel>
+     */
+    stopTimer() {
+        // Clear and reset timer when exists.
+        if (this.timer) {
+            clearInterval(this.timer);
+            this.timer = null;
+        }
+    }
+    /**
+     * Advance to next slide.
+     * @returns void
+     * @example
+     * <x-carousel></x-carousel>
+     */
+    next() {
+        this.activeIndex = (this.activeIndex + 1) % this.count;
+    }
+    /**
+     * Jump to a specific slide and reset autoplay timer.
+     * @param index - Slide index to activate.
+     * @returns void
+     * @example
+     * <x-carousel></x-carousel>
+     */
+    goTo(index) {
+        this.activeIndex = index;
+        if (this.autoplay) {
+            this.stopTimer();
+            this.startTimer();
+        }
+    }
+    /**
+     * Render carousel track and dot navigation.
+     *
+     * Flow:
+     * 1. Renders the host with classes for dot position.
+     * 2. Renders the track container.
+     *    - Applies `transform` (translateX) for 'scrollx' effect based on `activeIndex`.
+     *    - Applies `opacity` for 'fade' effect.
+     * 3. Projects slides via default slot.
+     * 4. Renders navigation dots if enabled.
+     *    - Iterates `count` times.
+     *    - Highlights the dot matching `activeIndex`.
+     *    - Binds click handler to `goTo(i)`.
+     *
+     * @returns JSX.Element
+     * @example
+     * <x-carousel><div>Slide</div></x-carousel>
+     */
+    render() {
+        return (h(Host, { key: '8e5a2b5d12ee7bf278bcdfca6409db2782a0d23b', class: {
+                'x-carousel': true,
+                [`x-carousel-${this.dotPosition}`]: true
+            } }, h("div", { key: '6e3d5e9092b4162a7570752ec4bff34e8fb06ab1', class: "x-carousel-content" }, h("div", { key: 'e61cb9b1f3c073694d658125a6fa94681ae9ef46', 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
+            } }, h("slot", { key: '5b8b3529d999c49c7610881bd56a0d99cb7a076a' }))), this.dots && (h("ul", { key: '36486dbdc67cca67729515232249f11466161dd2', class: "x-carousel-dots" }, Array.from({ length: this.count }).map((_, i) => (h("li", { class: { 'x-carousel-dot-active': i === this.activeIndex }, onClick: () => this.goTo(i) }, h("button", null))))))));
+    }
+};
+XCarousel.style = xCarouselCss();
+
+export { XCarousel as x_carousel };

package/dist/esm/x-cascader-dropdown-content.entry.js

@@ -0,0 +1,362 @@
+import { r as registerInstance, c as createEvent, a as getElement, h } from './index-ig_mFsVk.js';
+import { g as getIcon } from './config-BPeosvTA.js';
+
+const cascaderDropdownContentCss = () => `@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}.x-cascader-dropdown{-webkit-box-sizing:border-box;box-sizing:border-box;margin:0;padding:var(--x-dropdown-padding-block, var(--x-padding-xs, 4px)) var(--x-dropdown-padding-inline, 0);color:var(--x-dropdown-color, var(--x-color-text, rgba(0, 0, 0, 0.88)));font-size:var(--x-dropdown-font-size, var(--x-font-size, 14px));line-height:var(--x-dropdown-line-height, var(--x-line-height, 1.5714285714));list-style:none;font-family:var(--x-dropdown-font-family, var(--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"));background:var(--x-dropdown-bg, var(--x-color-bg-elevated, #ffffff));border-radius:var(--x-dropdown-border-radius, var(--x-border-radius-lg, 8px));-webkit-box-shadow:var(--x-dropdown-box-shadow, var(--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)));box-shadow:var(--x-dropdown-box-shadow, var(--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)));outline:none;background:var(--x-cascader-menu-bg, var(--x-dropdown-bg, var(--x-color-bg-elevated, #ffffff)));border-radius:var(--x-cascader-border-radius, var(--x-control-border-radius-sm, var(--x-border-radius-sm, 4px)));-webkit-box-shadow:var(--x-cascader-menu-shadow, var(--x-dropdown-box-shadow, var(--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))));box-shadow:var(--x-cascader-menu-shadow, var(--x-dropdown-box-shadow, var(--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))));padding:0;overflow:hidden}.x-cascader-dropdown-hidden{display:none}.x-cascader-menus{display:-ms-flexbox;display:flex;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-ms-flex-align:start;align-items:flex-start}.x-cascader-menu{display:inline-block;min-width:var(--x-cascader-menu-min-width, 111px);height:var(--x-cascader-menu-height, 180px);margin:0;padding:var(--x-cascader-spacing-xxs, var(--x-dropdown-padding-block, var(--x-padding-xs, 4px))) 0;overflow:auto;vertical-align:top;list-style:none;border-right:var(--x-cascader-border-width, var(--x-control-border-width, var(--x-border-width-base, 1px))) solid var(--x-cascader-menu-border-color, var(--x-color-split, rgba(5, 5, 5, 0.06)))}.x-cascader-menu:last-child{border-right:0}.x-cascader-menu-empty{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;min-width:150px;min-height:100px;padding:16px;color:rgba(0, 0, 0, 0.25);font-size:var(--x-cascader-font-size, var(--x-control-font-size, var(--x-font-size-base, 14px)))}.x-cascader-menu-item{position:relative;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;border-radius:var(--x-dropdown-item-border-radius, var(--x-border-radius-sm, 4px));padding:var(--x-dropdown-item-padding-vertical, var(--x-padding-xxs, 4px)) var(--x-dropdown-item-padding-horizontal, var(--x-padding-sm, 12px));clear:both;margin:0;color:var(--x-dropdown-color, var(--x-color-text, rgba(0, 0, 0, 0.88)));font-weight:normal;font-size:var(--x-dropdown-font-size, var(--x-font-size, 14px));line-height:var(--x-dropdown-line-height, var(--x-line-height, 1.5714285714));cursor:pointer;-webkit-transition:all 0.3s;transition:all 0.3s}.x-cascader-menu-item:hover{background-color:var(--x-dropdown-item-bg-hover, var(--x-control-item-bg-hover, rgba(0, 0, 0, 0.04)))}.x-cascader-menu-item{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;cursor:pointer}.x-cascader-menu-item:hover:not(.x-cascader-menu-item-disabled){background:var(--x-cascader-item-bg-hover, var(--x-dropdown-item-bg-hover, var(--x-control-item-bg-hover, rgba(0, 0, 0, 0.04))))}.x-cascader-menu-item-active{background:var(--x-cascader-item-bg-active, var(--x-dropdown-item-bg-active, var(--x-control-item-bg-active, #e6f4ff)));color:var(--x-cascader-color-primary, var(--x-control-border-color-focus, var(--x-color-primary, #1677ff)));font-weight:var(--x-cascader-font-weight-active, var(--x-dropdown-item-color-selected, var(--x-font-weight-strong, 600)))}.x-cascader-menu-item-disabled{color:var(--x-dropdown-item-color-disabled, var(--x-color-text-disabled, rgba(0, 0, 0, 0.25)));cursor:not-allowed}.x-cascader-menu-item-disabled:hover{background-color:transparent}.x-cascader-menu-item-loading{cursor:wait}.x-cascader-menu-item-content{-ms-flex:1;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}.x-cascader-menu-item-expand-icon{margin-left:8px;color:var(--x-cascader-item-expand-color, var(--x-color-text-secondary, rgba(0, 0, 0, 0.65)));font-size:10px;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center}.x-cascader-menu-item-loading-icon{margin-left:8px;color:var(--x-cascader-color-primary, var(--x-control-border-color-focus, var(--x-color-primary, #1677ff)));display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center}.x-cascader-checkbox{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:var(--x-dropdown-checkbox-size, 16px);height:var(--x-dropdown-checkbox-size, 16px);margin-right:8px;border:1px solid var(--x-dropdown-checkbox-border-color, var(--x-color-border, #d9d9d9));border-radius:var(--x-dropdown-checkbox-border-radius, var(--x-border-radius-sm, 4px));background:#fff;-webkit-transition:all 0.2s;transition:all 0.2s;cursor:pointer;-ms-flex-negative:0;flex-shrink:0;position:relative}.x-cascader-checkbox-inner{display:block;width:100%;height:100%;position:relative}.x-cascader-checkbox-inner::after{content:"";position:absolute;top:50%;left:50%;width:5.7142857143px;height:9.1428571429px;border:2px solid #fff;border-top:0;border-left:0;-webkit-transform:rotate(45deg) scale(0) translate(-50%, -50%);transform:rotate(45deg) scale(0) translate(-50%, -50%);opacity:0;-webkit-transition:all 0.1s cubic-bezier(0.71, -0.46, 0.88, 0.6), opacity 0.1s;transition:all 0.1s cubic-bezier(0.71, -0.46, 0.88, 0.6), opacity 0.1s;-webkit-box-sizing:border-box;box-sizing:border-box}.x-cascader-checkbox-checked{background-color:var(--x-dropdown-checkbox-color, var(--x-color-primary, #1677ff));border-color:var(--x-dropdown-checkbox-color, var(--x-color-primary, #1677ff))}.x-cascader-checkbox-checked .x-dropdown-checkbox-inner::after{-webkit-transform:translate(-50%, -50%) rotate(45deg) scale(1);transform:translate(-50%, -50%) rotate(45deg) scale(1);opacity:1;position:absolute;top:45%;left:25%}.x-cascader-checkbox-indeterminate{background-color:#fff;border-color:#d9d9d9}.x-cascader-checkbox-indeterminate .x-dropdown-checkbox-inner::after{display:none}.x-cascader-checkbox-indeterminate::after{content:"";width:8px;height:8px;background-color:var(--x-dropdown-checkbox-color, var(--x-color-primary, #1677ff));border-radius:2px;position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%)}.x-cascader-checkbox-disabled{cursor:not-allowed;background-color:rgba(0, 0, 0, 0.04);border-color:#d9d9d9}.x-cascader-checkbox-disabled.x-dropdown-checkbox-checked{background-color:rgba(0, 0, 0, 0.04);border-color:#d9d9d9}.x-cascader-checkbox-disabled.x-dropdown-checkbox-checked .x-dropdown-checkbox-inner::after{border-color:rgba(0, 0, 0, 0.25)}.x-cascader-checkbox{width:var(--x-cascader-checkbox-size, var(--x-dropdown-checkbox-size, 16px));height:var(--x-cascader-checkbox-size, var(--x-dropdown-checkbox-size, 16px));border-radius:var(--x-cascader-checkbox-border-radius, var(--x-dropdown-checkbox-border-radius, var(--x-border-radius-sm, 4px)))}.x-cascader-checkbox-checked{background:var(--x-cascader-checkbox-color, var(--x-dropdown-checkbox-color, var(--x-color-primary, #1677ff)));border-color:var(--x-cascader-checkbox-color, var(--x-dropdown-checkbox-color, var(--x-color-primary, #1677ff)))}`;
+
+const XCascaderDropdownContent = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.xItemClick = createEvent(this, "xItemClick", 7);
+        this.xItemHover = createEvent(this, "xItemHover", 7);
+    }
+    get el() { return getElement(this); }
+    // ==================== Props ====================
+    /**
+     * Mapping of CSS classes applied to the dropdown's outer wrapper.
+     * Useful for conveying state like 'hidden' or 'placement'.
+     * @type {CascaderDropdownClassMap}
+     * @example
+     * <x-cascader-dropdown-content dropdownClasses={{ 'x-cascader-dropdown': true, 'hidden': false }} />
+     */
+    dropdownClasses = {};
+    /**
+     * Inline CSS styles applied to the dropdown's outer wrapper.
+     * Useful for dynamic positioning or width adjustments.
+     * @type {CascaderDropdownStyleMap}
+     * @example
+     * <x-cascader-dropdown-content dropdownStyle={{ width: '240px', left: '10px' }} />
+     */
+    dropdownStyle = {};
+    /**
+     * Optional callback function to retrieve the underlying DOM element reference of the dropdown.
+     * @type {CascaderDropdownRefCallback}
+     * @example
+     * <x-cascader-dropdown-content setDropdownRef={(el) => this.myRef = el} />
+     */
+    setDropdownRef;
+    /**
+     * A multi-dimensional array representing the current hierarchy of options to display.
+     * Each entry in the outer array represents a column in the cascader.
+     * @type {CascaderOption[][]}
+     * @example
+     * <x-cascader-dropdown-content activeOptions={[[{ label: 'A', value: 'a' }], [{ label: 'B', value: 'b' }]]} />
+     */
+    activeOptions = [];
+    /**
+     * The list of options representing the currently selected path in the hierarchy.
+     * @type {CascaderOption[]}
+     * @example
+     * <x-cascader-dropdown-content selectedPath={[{ label: 'A', value: 'a' }]} />
+     */
+    selectedPath = [];
+    /**
+     * The list of options representing the path currently highlighted/hovered by the user.
+     * @type {CascaderOption[]}
+     * @example
+     * <x-cascader-dropdown-content hoveredPath={[{ label: 'A', value: 'a' }]} />
+     */
+    hoveredPath = [];
+    /**
+     * Whether the component is in multiple selection mode (enabling checkboxes).
+     * @type {boolean}
+     * @default false
+     * @example
+     * <x-cascader-dropdown-content multiple={true} />
+     */
+    multiple = false;
+    /**
+     * Specifies which interaction (click or hover) triggers the expansion of a sub-menu.
+     * @type {CascaderExpandTrigger}
+     * @default 'click'
+     * @example
+     * <x-cascader-dropdown-content expandTrigger="hover" />
+     */
+    expandTrigger = 'click';
+    /**
+     * Custom mapping configuration for option data fields (label, value, children).
+     * @type {CascaderFieldNames}
+     * @example
+     * <x-cascader-dropdown-content fieldNames={{ label: 'name', value: 'id' }} />
+     */
+    fieldNames = { value: 'value', label: 'label', children: 'children' };
+    /**
+     * Content to display when no options are available in a specific column.
+     * @type {string}
+     * @default 'No data'
+     * @example
+     * <x-cascader-dropdown-content notFoundContent="Nothing here" />
+     */
+    notFoundContent = 'No data';
+    // ==================== Events ====================
+    // ==================== Events ====================
+    /**
+     * Emitted when a menu item is clicked.
+     * Provides the option data and its depth in the hierarchy.
+     * @event xItemClick
+     * @example
+     * <x-cascader-dropdown-content onXItemClick={(ev) => handleItemClick(ev.detail)} />
+     */
+    xItemClick;
+    /**
+     * Emitted when a menu item is hovered.
+     * This is typically used to trigger sub-menu expansion if expandTrigger is 'hover'.
+     * @event xItemHover
+     * @example
+     * <x-cascader-dropdown-content onXItemHover={(ev) => handleItemHover(ev.detail)} />
+     */
+    xItemHover;
+    // ==================== State ====================
+    /**
+     * Visible item counts per menu depth.
+     */
+    visibleCounts = [];
+    /**
+     * Page size for incremental rendering.
+     * @example
+     * <x-cascader-dropdown-content pageSize={100}></x-cascader-dropdown-content>
+     */
+    pageSize = 50;
+    // ==================== Refs ====================
+    /**
+     * Dropdown element reference.
+     */
+    dropdownEl = null;
+    // ==================== Lifecycle ====================
+    /**
+     * Stencil lifecycle: Component has loaded.
+     * Initializes visibility counts for lazy rendering.
+     */
+    componentDidLoad() {
+        this.setDropdownRef?.(this.dropdownEl);
+        this.initVisibleCounts();
+    }
+    /**
+     * WATCHER: Resets visibility counts when the available options change.
+     */
+    handleOptionsChange() {
+        this.initVisibleCounts();
+    }
+    /**
+     * Initializes the visible item counts for each column based on the pageSize.
+     * This prevents rendering thousands of DOM elements at once.
+     * @returns {void}
+     */
+    initVisibleCounts() {
+        this.visibleCounts = this.activeOptions.map(() => this.pageSize);
+    }
+    /**
+     * Handles the scroll event on an individual menu column.
+     * Implements a threshold-based pagination/lazy rendering for long lists of options.
+     *
+     * @param {Event} e - The native scroll event.
+     * @param {number} depth - The hierarchical depth index of the column being scrolled.
+     * @returns {void}
+     */
+    handleMenuScroll = (e, depth) => {
+        const target = e.target;
+        const threshold = 20; // Pixels from bottom before loading more items
+        // Check if user has scrolled near the bottom of the column
+        if (target.scrollTop + target.clientHeight >= target.scrollHeight - threshold) {
+            // If there are still hidden items in the current column, reveal more
+            if (this.visibleCounts[depth] < this.activeOptions[depth].length) {
+                const newCounts = [...this.visibleCounts];
+                newCounts[depth] += this.pageSize;
+                this.visibleCounts = newCounts;
+            }
+        }
+    };
+    /**
+     * Stencil lifecycle: Component is removed from the DOM.
+     * Cleans up the external reference to the dropdown.
+     */
+    disconnectedCallback() {
+        this.setDropdownRef?.(null);
+    }
+    // ==================== Private Methods ====================
+    /**
+     * Capture dropdown ref and forward to callback.
+     * @param {HTMLDivElement | null} el - Dropdown element.
+     * @returns {void}
+     */
+    setRef = (el) => {
+        this.dropdownEl = el;
+        this.setDropdownRef?.(el);
+    };
+    /**
+     * Safe getter for an option's value based on custom `fieldNames`.
+     * @param {CascaderOption} option - The option object.
+     * @returns {string} The resolved value.
+     */
+    getOptionValue(option) {
+        const field = this.fieldNames.value || 'value';
+        return option[field];
+    }
+    /**
+     * Safe getter for an option's label based on custom `fieldNames`.
+     * @param {CascaderOption} option - The option object.
+     * @returns {string} The resolved label.
+     */
+    getOptionLabel(option) {
+        const field = this.fieldNames.label || 'label';
+        return option[field];
+    }
+    /**
+     * Safe getter for an option's children array based on custom `fieldNames`.
+     * @param {CascaderOption} option - The option object.
+     * @returns {CascaderOption[] | undefined} The resolved children array.
+     */
+    getOptionChildren(option) {
+        const field = this.fieldNames.children || 'children';
+        return option[field];
+    }
+    /**
+     * Determines if a specific option is part of the currently selected path.
+     * @param {CascaderOption} option - The option to check.
+     * @param {number} depth - The hierarchical level of the option.
+     * @returns {boolean} True if selected at this depth.
+     */
+    isOptionSelected(option, depth) {
+        if (depth >= this.selectedPath.length)
+            return false;
+        return this.getOptionValue(this.selectedPath[depth]) === this.getOptionValue(option);
+    }
+    /**
+     * Determines if a specific option is currently being hovered or is part of the active path.
+     * @param {CascaderOption} option - The option to check.
+     * @param {number} depth - The hierarchical level of the option.
+     * @returns {boolean} True if active at this depth.
+     */
+    isOptionActive(option, depth) {
+        if (depth >= this.hoveredPath.length)
+            return false;
+        return this.getOptionValue(this.hoveredPath[depth]) === this.getOptionValue(option);
+    }
+    /**
+     * Handles user click on a menu item.
+     * @param {CascaderOption} option - The clicked option.
+     * @param {number} depth - The menu depth.
+     * @returns {void}
+     */
+    handleItemClick = (option, depth) => {
+        if (option.disabled)
+            return;
+        this.xItemClick.emit({ option, depth });
+    };
+    /**
+     * Handles user hover on a menu item.
+     * Only emits hover event if `expandTrigger` is set to 'hover'.
+     * @param {CascaderOption} option - The hovered option.
+     * @param {number} depth - The menu depth.
+     * @returns {void}
+     */
+    handleItemHover = (option, depth) => {
+        if (option.disabled || this.expandTrigger !== 'hover')
+            return;
+        this.xItemHover.emit({ option, depth });
+    };
+    // ==================== Render Methods ====================
+    // ==================== Render Methods ====================
+    /**
+     * Renders a custom checkbox icon for items in multiple selection mode.
+     * @param {boolean} checked - Current checked state of the item.
+     * @returns {JSX.Element} The rendered checkbox element.
+     */
+    renderCheckbox(checked) {
+        return (h("span", { class: {
+                'x-cascader-checkbox': true,
+                'x-cascader-checkbox-checked': checked,
+            } }, h("span", { class: "x-cascader-checkbox-inner" })));
+    }
+    /**
+     * Renders a loading spinner icon for asynchronous item loading.
+     * @returns {JSX.Element} The rendered loading icon element.
+     */
+    renderLoadingIcon() {
+        return (h("span", { class: "x-cascader-menu-item-loading-icon" }, h("x-icon", { spin: true, name: getIcon('loading') })));
+    }
+    /**
+     * Renders an arrow icon indicating that a menu item has children/sub-menu.
+     * @returns {JSX.Element} The rendered expand icon element.
+     */
+    renderExpandIcon() {
+        return (h("span", { class: "x-cascader-menu-item-expand-icon" }, h("x-icon", { name: getIcon('arrowRight') })));
+    }
+    /**
+     * Renders a single menu item (li) within a column.
+     * Handles active, selected, disabled, and loading states.
+     *
+     * @param {CascaderOption} option - The option data to render.
+     * @param {number} depth - The hierarchical level of the item.
+     * @returns {JSX.Element} The rendered list item element.
+     */
+    renderMenuItem(option, depth) {
+        const children = this.getOptionChildren(option);
+        const hasChildren = children && children.length > 0;
+        // Check if the item is still loading its children
+        const isLoading = option.isLeaf === false && (!children || children.length === 0);
+        const isActive = this.isOptionActive(option, depth);
+        const isSelected = this.isOptionSelected(option, depth);
+        const isDisabled = !!option.disabled;
+        return (h("li", { class: {
+                'x-cascader-menu-item': true,
+                'x-cascader-menu-item-active': isActive,
+                'x-cascader-menu-item-selected': isSelected,
+                'x-cascader-menu-item-disabled': isDisabled,
+                'x-cascader-menu-item-loading': isLoading,
+            }, onClick: () => this.handleItemClick(option, depth), onMouseEnter: () => this.handleItemHover(option, depth) }, this.multiple && this.renderCheckbox(isSelected), h("span", { class: "x-cascader-menu-item-content" }, this.getOptionLabel(option)), isLoading && this.renderLoadingIcon(), hasChildren && !isLoading && this.renderExpandIcon()));
+    }
+    /**
+     * Renders a full menu column (ul) for a specific depth.
+     * Includes lazy rendering logic based on scroll position.
+     *
+     * Flow:
+     * 1. Determines the number of items to render based on `visibleCounts` (virtual scrolling/pagination).
+     * 2. Slices the options array to the visible subset.
+     * 3. Renders a `<ul>` container with a scroll listener.
+     * 4. Maps over the visible options to render `<li>` items via `renderMenuItem`.
+     *
+     * @param {CascaderOption[]} options - The list of options in this column.
+     * @param {number} depth - The hierarchical depth index.
+     * @param {boolean} isLast - Whether this is the rightmost column.
+     * @returns {JSX.Element} The rendered menu column element.
+     */
+    renderMenu(options, depth, isLast) {
+        const visibleCount = this.visibleCounts[depth] || this.pageSize;
+        const visibleOptions = options.slice(0, visibleCount);
+        return (h("ul", { class: "x-cascader-menu", style: { borderRight: isLast ? 'none' : undefined }, onScroll: (e) => this.handleMenuScroll(e, depth) }, visibleOptions.map(option => this.renderMenuItem(option, depth))));
+    }
+    /**
+     * Renders the container for all menu columns.
+     * If no data is available, renders an empty state message.
+     * @returns {JSX.Element} The rendered menus or empty state.
+     */
+    renderMenus() {
+        // Show empty state if there are no options at the root level
+        if (this.activeOptions.length === 0 || this.activeOptions[0].length === 0) {
+            return (h("div", { class: "x-cascader-menu-empty" }, this.notFoundContent));
+        }
+        return (h("div", { class: "x-cascader-menus" }, this.activeOptions.map((options, depth) => this.renderMenu(options, depth, depth === this.activeOptions.length - 1))));
+    }
+    /**
+     * Main render method for the dropdown content.
+     * This is typically rendered in a portal.
+     *
+     * Flow:
+     * 1. Renders a wrapper `div` with dynamic classes and styles.
+     * 2. Sets the ref for external access.
+     * 3. Calls `renderMenus` to generate the column structure.
+     *
+     * @returns {JSX.Element} The full dropdown JSX structure.
+     */
+    render() {
+        return (h("div", { key: '8072b2afdff94efa72f84323f58588e7af80df1c', class: this.dropdownClasses, style: this.dropdownStyle, ref: this.setRef, part: "dropdown" }, h("div", { key: '2de326060141e98f10df71510c8fe0040cd965ef', class: "x-cascader-dropdown-content" }, this.renderMenus())));
+    }
+    static get watchers() { return {
+        "activeOptions": [{
+                "handleOptionsChange": 0
+            }]
+    }; }
+};
+XCascaderDropdownContent.style = cascaderDropdownContentCss();
+
+export { XCascaderDropdownContent as x_cascader_dropdown_content };