@xlabs-store/core 0.0.1

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

@@ -0,0 +1,1548 @@
+import { r as registerInstance, a as getElement, h, H as Host, c as createEvent } from './index-ig_mFsVk.js';
+import { t as translate } from './locale.service-D66tF8_2.js';
+import { g as getIcon } from './config-BPeosvTA.js';
+import { T as TreeService } from './tree.service-Dgxy93Bg.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) {
+        registerInstance(this, hostRef);
+    }
+    get el() { return 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 (h(Host, { key: 'd322508c58f0734b461df2625af0a30d50d5f997' }, h("nav", { key: '824f4dcac24d36d69be0c8a494ca2dbd27579409', class: "x-breadcrumb" }, h("ol", { key: 'f3b2cc6bfa9054d9ee9542889ead708eeea883fb' }, h("slot", { key: '43bc2aa200f5f17d07747603282dd8e2210724ea', 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) {
+        registerInstance(this, hostRef);
+        this.xClick = 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 ? (h("a", { href: href, class: "x-breadcrumb-link", onClick: this.handleClick }, h("slot", null))) : (h("span", { class: "x-breadcrumb-link", onClick: this.handleClick }, h("slot", null)));
+        return (h(Host, { key: 'da628acfac30cbee80bb89eae77999ab3d0be409' }, h("li", { key: 'a9c2ad41cd165250e65de210a5ec0fc4a4c2edd7' }, content, h("span", { key: 'e9bfd86c1b1e59131005904ee80fd6fef79aac08', class: "x-breadcrumb-separator" }, separator))));
+    }
+};
+XBreadcrumbItem.style = xBreadcrumbItemCss();
+
+const xDescriptionsCss = () => `@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;-webkit-box-sizing:border-box;box-sizing:border-box}.x-descriptions-header{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;margin-bottom:var(--x-descriptions-header-margin-bottom, var(--x-spacing-xl, 24px))}.x-descriptions-title{-ms-flex:auto;flex:auto;overflow:hidden;color:var(--x-descriptions-title-color, var(--x-color-text, rgba(0, 0, 0, 0.88)));font-weight:var(--x-descriptions-title-font-weight, var(--x-font-weight-strong, 600));font-size:var(--x-descriptions-title-font-size, var(--x-font-size-lg, 16px));line-height:var(--x-descriptions-title-line-height, var(--x-line-height-base, 1.5714285714));white-space:nowrap;text-overflow:ellipsis}.x-descriptions-extra{-webkit-margin-start:auto;margin-inline-start:auto;color:var(--x-color-text, rgba(0, 0, 0, 0.88));font-size:var(--x-font-size-base, 14px)}.x-descriptions-view{width:100%;overflow:hidden}.x-descriptions-table{width:100%;table-layout:fixed;border-collapse:collapse}.x-descriptions-tbody{display:block}:host(.x-descriptions-small){font-size:var(--x-font-size-sm, 12px)}:host(.x-descriptions-default){font-size:var(--x-font-size-base, 14px)}:host(.x-descriptions-large){font-size:var(--x-font-size-lg, 16px)}:host(.x-descriptions-bordered) .x-descriptions-view{border:var(--x-descriptions-border-width, var(--x-border-width-base, 1px)) solid var(--x-descriptions-border-color, var(--x-color-split, rgba(5, 5, 5, 0.06)));border-radius:var(--x-border-radius, 6px)}:host(.x-descriptions-bordered) .x-descriptions-table{border-collapse:collapse}:host(.x-descriptions-horizontal) .x-descriptions-tbody{display:grid;grid-template-columns:repeat(var(--x-descriptions-column-count, 3), 1fr)}:host(.x-descriptions-vertical) .x-descriptions-tbody{display:grid;grid-template-columns:repeat(var(--x-descriptions-column-count, 3), 1fr)}`;
+
+const XDescriptions = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    get el() { return getElement(this); }
+    /**
+     * Title of the descriptions list.
+     * @example
+     * <x-descriptions descriptionTitle="Profile"></x-descriptions>
+     */
+    descriptionTitle;
+    /**
+     * Whether to display the border.
+     * @example
+     * <x-descriptions bordered></x-descriptions>
+     */
+    bordered = false;
+    /**
+     * Number of columns in the descriptions list.
+     * Can be a number or responsive config object
+     * @example
+     * <x-descriptions column={3}></x-descriptions>
+     */
+    column = 3;
+    /**
+     * Layout direction.
+     * @example
+     * <x-descriptions layout="vertical"></x-descriptions>
+     */
+    layout = 'horizontal';
+    /**
+     * Size of the list.
+     * @example
+     * <x-descriptions size="small"></x-descriptions>
+     */
+    size = 'default';
+    /**
+     * Whether to show colon after label.
+     * @example
+     * <x-descriptions colon={false}></x-descriptions>
+     */
+    colon = true;
+    /**
+     * Items to display (alternative to using slot).
+     * @example
+     * <x-descriptions items={[{ label: 'Name', children: 'Jane' }]}></x-descriptions>
+     */
+    items;
+    /**
+     * Custom label style for all items.
+     * @example
+     * <x-descriptions labelStyle={{ color: 'gray' }}></x-descriptions>
+     */
+    labelStyle;
+    /**
+     * Custom content style for all items.
+     * @example
+     * <x-descriptions contentStyle={{ color: 'black' }}></x-descriptions>
+     */
+    contentStyle;
+    /**
+     * Computed column count for current width.
+     */
+    currentColumn = 3;
+    /**
+     * Resize observer for responsive columns.
+     */
+    resizeObserver;
+    /**
+     * Initialize column count before render.
+     * @returns void
+     * @example
+     * <x-descriptions column={3}></x-descriptions>
+     */
+    componentWillLoad() {
+        this.updateColumn();
+    }
+    /**
+     * Setup resize observer when responsive config is used.
+     * @returns void
+     * @example
+     * <x-descriptions column={{ md: 2, lg: 3 }}></x-descriptions>
+     */
+    componentDidLoad() {
+        if (typeof this.column === 'object') {
+            this.setupResizeObserver();
+        }
+    }
+    /**
+     * Disconnect resize observer.
+     * @returns void
+     * @example
+     * <x-descriptions></x-descriptions>
+     */
+    disconnectedCallback() {
+        this.resizeObserver?.disconnect();
+    }
+    /**
+     * Initialize ResizeObserver for responsive layout.
+     * @returns void
+     * @example
+     * <x-descriptions column={{ sm: 1, md: 2 }}></x-descriptions>
+     */
+    setupResizeObserver() {
+        if (typeof ResizeObserver !== 'undefined') {
+            this.resizeObserver = new ResizeObserver(() => {
+                this.updateColumn();
+            });
+            this.resizeObserver.observe(this.el);
+        }
+    }
+    /**
+     * Compute columns based on responsive breakpoints.
+     *
+     * Flow:
+     * 1. If `column` is a fixed number, use it directly.
+     * 2. If `column` is a config object:
+     *    - Measure client width or window width.
+     *    - Match against breakpoints (xxl, xl, lg, md, sm, xs).
+     *    - Set `currentColumn` to the matched value or default to 3.
+     *
+     * @returns void
+     * @example
+     * <x-descriptions column={{ xs: 1, md: 2, lg: 3 }}></x-descriptions>
+     */
+    updateColumn() {
+        if (typeof this.column === 'number') {
+            this.currentColumn = this.column;
+            return;
+        }
+        const width = this.el.clientWidth || window.innerWidth;
+        const config = this.column;
+        // Responsive breakpoints
+        if (width >= 1600 && config.xxl !== undefined) {
+            this.currentColumn = config.xxl;
+        }
+        else if (width >= 1200 && config.xl !== undefined) {
+            this.currentColumn = config.xl;
+        }
+        else if (width >= 992 && config.lg !== undefined) {
+            this.currentColumn = config.lg;
+        }
+        else if (width >= 768 && config.md !== undefined) {
+            this.currentColumn = config.md;
+        }
+        else if (width >= 576 && config.sm !== undefined) {
+            this.currentColumn = config.sm;
+        }
+        else if (config.xs !== undefined) {
+            this.currentColumn = config.xs;
+        }
+        else {
+            this.currentColumn = 3;
+        }
+    }
+    /**
+     * Get the current column count
+     * @returns Promise<number>
+     * @example
+     * const count = await el.getColumnCount()
+     */
+    async getColumnCount() {
+        return this.currentColumn;
+    }
+    /**
+     * Render items from props or default slot.
+     *
+     * Flow:
+     * 1. Checks if `items` prop is provided.
+     * 2. If no items, renders default `<slot />` (for manual item composition).
+     * 3. If items exist, maps them to `<x-descriptions-item>` elements.
+     *    - Passes label, span, styles, and children.
+     *
+     * @returns JSX.Element
+     * @example
+     * <x-descriptions items={[{ label: 'Name', children: 'Jane' }]}></x-descriptions>
+     */
+    renderItems() {
+        if (!this.items || this.items.length === 0) {
+            return h("slot", null);
+        }
+        return this.items.map((item, index) => (h("x-descriptions-item", { key: item.key || index, label: item.label, span: item.span, colon: this.colon, labelStyle: item.labelStyle || this.labelStyle, contentStyle: item.contentStyle || this.contentStyle }, item.children)));
+    }
+    /**
+     * Render descriptions table with header and body.
+     * @returns JSX.Element
+     * @example
+     * <x-descriptions descriptionTitle="Info"></x-descriptions>
+     */
+    render() {
+        const hostStyle = {
+            '--x-descriptions-column-count': String(this.currentColumn),
+        };
+        return (h(Host, { key: '80c7abb0c07f2dbf15720fa8a448390d67b7e57f', class: {
+                'x-descriptions': true,
+                'x-descriptions-bordered': this.bordered,
+                [`x-descriptions-${this.size}`]: true,
+                [`x-descriptions-${this.layout}`]: true,
+                'x-descriptions-colon': this.colon,
+            }, style: hostStyle }, this.descriptionTitle && (h("div", { key: 'f052a2bc9cb3950cd8445f808c797e0f7b164cc6', class: "x-descriptions-header" }, h("div", { key: '80a2919fdbb541d8979c3a650712d2f0f2636565', class: "x-descriptions-title" }, this.descriptionTitle), h("div", { key: 'df61e5f6bec9e46637f540213bbfbaa1d147601b', class: "x-descriptions-extra" }, h("slot", { key: 'a02e104beb1466f1ccb014f11ccc6a5d98cbb549', name: "extra" })))), h("div", { key: '54b9e0ff14c250ceed9e1996b58c0f22cc31cef0', class: "x-descriptions-view" }, h("table", { key: '20f839facd10f0884b833f01a31d1d7ad72bf4e5', class: "x-descriptions-table" }, h("tbody", { key: 'cb27649f93111306bb888eed28b62146caad1f30', class: "x-descriptions-tbody" }, this.renderItems())))));
+    }
+};
+XDescriptions.style = xDescriptionsCss();
+
+const xImageCss = () => `@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:inline-block;position:relative}.x-image{position:relative;display:inline-block}.x-image.x-image-error .x-image-img{cursor:default}.x-image.x-image-error .x-image-mask{display:none}.x-image-img{width:100%;height:100%;vertical-align:middle;-o-object-fit:cover;object-fit:cover;cursor:pointer;border-radius:var(--x-image-border-radius, 0);-webkit-transition:opacity var(--x-image-motion-duration, 0.3s);transition:opacity var(--x-image-motion-duration, 0.3s)}.x-image-img.x-image-img-loading{opacity:0}.x-image-placeholder{position:absolute;top:0;right:0;bottom:0;left:0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}.x-image-placeholder-default{width:100%;height:100%;background:-webkit-gradient(linear, left top, right top, color-stop(25%, rgba(190, 190, 190, 0.2)), color-stop(37%, rgba(129, 129, 129, 0.24)), color-stop(63%, rgba(190, 190, 190, 0.2)));background:linear-gradient(90deg, rgba(190, 190, 190, 0.2) 25%, rgba(129, 129, 129, 0.24) 37%, rgba(190, 190, 190, 0.2) 63%);background-size:400% 100%;-webkit-animation:x-image-placeholder-skeleton 1.4s ease infinite;animation:x-image-placeholder-skeleton 1.4s ease infinite}@-webkit-keyframes x-image-placeholder-skeleton{0%{background-position:100% 50%}100%{background-position:0 50%}}@keyframes x-image-placeholder-skeleton{0%{background-position:100% 50%}100%{background-position:0 50%}}.x-image-mask{position:absolute;top:0;right:0;bottom:0;left:0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;color:var(--x-image-mask-color, #fff);background:var(--x-image-mask-bg, rgba(0, 0, 0, 0.5));cursor:pointer;opacity:0;-webkit-transition:opacity var(--x-image-motion-duration, 0.3s);transition:opacity var(--x-image-motion-duration, 0.3s);border-radius:var(--x-image-border-radius, 0)}.x-image-mask:hover{opacity:1}.x-image-mask-info{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:4px;font-size:var(--x-image-mask-font-size, 14px);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding:0 4px}.x-image-mask-icon{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}.x-image-mask-icon svg{width:1em;height:1em}.x-image-preview{position:fixed;top:0;right:0;bottom:0;left:0;z-index:var(--x-image-preview-z-index, 1080);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;outline:0}.x-image-preview-mask{position:absolute;top:0;right:0;bottom:0;left:0;z-index:0;background:var(--x-image-preview-mask-bg, rgba(0, 0, 0, 0.45))}.x-image-preview-wrap{position:relative;z-index:1;width:100%;height:100%;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.x-image-preview-close{position:absolute;top:16px;right:16px;z-index:10;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:40px;height:40px;color:var(--x-image-preview-operation-color, rgba(255, 255, 255, 0.85));background:transparent;border:none;cursor:pointer;-webkit-transition:color var(--x-image-motion-duration, 0.3s);transition:color var(--x-image-motion-duration, 0.3s)}.x-image-preview-close:hover{color:var(--x-image-preview-operation-hover-color, #fff)}.x-image-preview-close svg{width:18px;height:18px}.x-image-preview-operations{position:absolute;bottom:32px;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);z-index:var(--x-image-preview-operations-z-index, 1);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;padding:12px 24px;background:var(--x-image-preview-operation-bg, rgba(0, 0, 0, 0.1));border-radius:100px}.x-image-preview-operation{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;padding:12px;margin:var(--x-image-preview-operation-margin, 0 12px);color:var(--x-image-preview-operation-color, rgba(255, 255, 255, 0.85));background:transparent;border:none;cursor:pointer;-webkit-transition:all var(--x-image-motion-duration, 0.3s);transition:all var(--x-image-motion-duration, 0.3s);border-radius:4px}.x-image-preview-operation:hover{color:var(--x-image-preview-operation-hover-color, #fff);background:rgba(255, 255, 255, 0.1)}.x-image-preview-operation:disabled{color:var(--x-image-preview-operation-disabled-color, rgba(255, 255, 255, 0.25));cursor:not-allowed}.x-image-preview-operation svg{width:var(--x-image-preview-operation-size, 18px);height:var(--x-image-preview-operation-size, 18px)}.x-image-preview-body{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:100%;overflow:hidden}.x-image-preview-img{max-width:100%;max-height:100%;-o-object-fit:contain;object-fit:contain;cursor:-webkit-grab;cursor:grab;-webkit-transition:-webkit-transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);transition:-webkit-transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);transition:transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);transition:transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.x-image-preview-img:active{cursor:-webkit-grabbing;cursor:grabbing}`;
+
+const DEFAULT_SCALE_STEP = 0.5;
+const MIN_SCALE = 1;
+const MAX_SCALE = 50;
+const XImage = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.xError = createEvent(this, "xError", 7);
+        this.xLoad = createEvent(this, "xLoad", 7);
+        this.xPreviewVisibleChange = createEvent(this, "xPreviewVisibleChange", 7);
+    }
+    get el() { return getElement(this); }
+    /**
+     * Image alt text
+     * @example
+     * <x-image alt="Profile picture" />
+     */
+    alt;
+    /**
+     * Fallback image source when error occurs
+     * @example
+     * <x-image src="broken.png" fallback="default.png" />
+     */
+    fallback;
+    /**
+     * Image height
+     * @example
+     * <x-image height="200px" />
+     * <x-image height={200} />
+     */
+    height;
+    /**
+     * Image width
+     * @example
+     * <x-image width="100%" />
+     * <x-image width={300} />
+     */
+    width;
+    /**
+     * Image source URL
+     * @example
+     * <x-image src="https://example.com/image.png" />
+     */
+    src;
+    /**
+     * Whether to show placeholder while loading
+     * @example
+     * <x-image placeholder />
+     */
+    placeholder = false;
+    /**
+     * Whether to enable preview or preview config
+     * @example
+     * <x-image preview />
+     * <x-image preview={{ src: 'large.png', minScale: 0.5 }} />
+     */
+    preview = true;
+    /**
+     * Root class name
+     * @example
+     * <x-image rootClassName="my-image-wrapper" />
+     */
+    rootClassName;
+    /**
+     * The attribute indicating how the element handles crossorigin requests
+     * @example
+     * <x-image crossOrigin="anonymous" />
+     */
+    crossOrigin;
+    /**
+     * Indicates which referrer to use when fetching the resource
+     * @example
+     * <x-image referrerPolicy="no-referrer" />
+     */
+    referrerPolicy;
+    /**
+     * Loading behavior (lazy, eager)
+     * @example
+     * <x-image loading="lazy" />
+     */
+    loading;
+    isError = false;
+    isLoading = true;
+    isPreviewVisible = false;
+    transform = {
+        x: 0,
+        y: 0,
+        rotate: 0,
+        scale: 1,
+        flipX: false,
+        flipY: false,
+    };
+    /**
+     * Emitted when image load fails
+     */
+    xError;
+    /**
+     * Emitted when image loads successfully
+     */
+    xLoad;
+    /**
+     * Emitted when preview visibility changes
+     */
+    xPreviewVisibleChange;
+    previewConfig = {};
+    componentWillLoad() {
+        this.parsePreviewConfig();
+    }
+    previewChanged() {
+        this.parsePreviewConfig();
+    }
+    srcChanged() {
+        this.isError = false;
+        this.isLoading = true;
+    }
+    parsePreviewConfig() {
+        if (typeof this.preview === 'boolean') {
+            this.previewConfig = {};
+        }
+        else if (typeof this.preview === 'object') {
+            this.previewConfig = this.preview;
+        }
+    }
+    /**
+     * Handles image load errors.
+     * Updates state to show error or fallback and emits error event.
+     * @param {Event} event - The error event.
+     */
+    handleError(event) {
+        this.isError = true;
+        this.isLoading = false;
+        this.xError.emit({
+            src: this.src || '',
+            error: event,
+        });
+    }
+    /**
+     * Handles successful image loading.
+     * Updates loading state and emits load event.
+     * @param {Event} event - The load event.
+     */
+    handleLoad(event) {
+        this.isLoading = false;
+        this.xLoad.emit({
+            src: this.src || '',
+            event: event,
+        });
+    }
+    /**
+     * Open preview modal.
+     *
+     * Flow:
+     * 1. Checks if preview is enabled.
+     * 2. Sets `isPreviewVisible` to true.
+     * 3. Resets transform (zoom/rotate) to default.
+     * 4. Emits `xPreviewVisibleChange` event.
+     * 5. Adds global `keydown` listener for Escape key.
+     */
+    openPreview() {
+        if (!this.preview)
+            return;
+        this.isPreviewVisible = true;
+        this.resetTransform();
+        this.xPreviewVisibleChange.emit({
+            visible: true,
+            src: this.src || '',
+        });
+        // Add keyboard listener
+        document.addEventListener('keydown', this.handleKeyDown);
+    }
+    closePreview() {
+        this.isPreviewVisible = false;
+        this.xPreviewVisibleChange.emit({
+            visible: false,
+            src: this.src || '',
+        });
+        // Remove keyboard listener
+        document.removeEventListener('keydown', this.handleKeyDown);
+    }
+    handleKeyDown = (e) => {
+        if (e.key === 'Escape') {
+            this.closePreview();
+        }
+    };
+    resetTransform() {
+        this.transform = {
+            x: 0,
+            y: 0,
+            rotate: 0,
+            scale: 1,
+            flipX: false,
+            flipY: false,
+        };
+    }
+    getScaleStep() {
+        return this.previewConfig.scaleStep ?? DEFAULT_SCALE_STEP;
+    }
+    getMinScale() {
+        return this.previewConfig.minScale ?? MIN_SCALE;
+    }
+    getMaxScale() {
+        return this.previewConfig.maxScale ?? MAX_SCALE;
+    }
+    zoomIn() {
+        const newScale = Math.min(this.transform.scale + this.getScaleStep(), this.getMaxScale());
+        this.transform = { ...this.transform, scale: newScale };
+    }
+    zoomOut() {
+        const newScale = Math.max(this.transform.scale - this.getScaleStep(), this.getMinScale());
+        this.transform = { ...this.transform, scale: newScale };
+    }
+    rotateLeft() {
+        this.transform = { ...this.transform, rotate: this.transform.rotate - 90 };
+    }
+    rotateRight() {
+        this.transform = { ...this.transform, rotate: this.transform.rotate + 90 };
+    }
+    flipX() {
+        this.transform = { ...this.transform, flipX: !this.transform.flipX };
+    }
+    flipY() {
+        this.transform = { ...this.transform, flipY: !this.transform.flipY };
+    }
+    handleWheel = (e) => {
+        e.preventDefault();
+        if (e.deltaY > 0) {
+            this.zoomOut();
+        }
+        else {
+            this.zoomIn();
+        }
+    };
+    getTransformStyle() {
+        const { x, y, rotate, scale, flipX, flipY } = this.transform;
+        const scaleX = flipX ? -scale : scale;
+        const scaleY = flipY ? -scale : scale;
+        return `translate(${x}px, ${y}px) rotate(${rotate}deg) scale(${scaleX}, ${scaleY})`;
+    }
+    disconnectedCallback() {
+        document.removeEventListener('keydown', this.handleKeyDown);
+    }
+    /**
+     * Render image with optional placeholder and preview.
+     *
+     * Flow:
+     * 1. Determines effective image source (fallback if error).
+     * 2. Renders Host with error/loading classes.
+     * 3. Renders Placeholder if loading.
+     * 4. Renders main `<img>` tag with load/error handlers.
+     * 5. Renders Preview Mask if enabled and not error.
+     * 6. Renders Preview Modal if visible:
+     *    - Includes toolbar (zoom, rotate, flip).
+     *    - Includes close button.
+     *    - Renders transformed preview image.
+     *
+     * @returns JSX.Element
+     */
+    render() {
+        const imgSrc = this.isError && this.fallback ? this.fallback : this.src;
+        const style = {};
+        if (this.width) {
+            style.width = typeof this.width === 'number' ? `${this.width}px` : this.width;
+        }
+        if (this.height) {
+            style.height = typeof this.height === 'number' ? `${this.height}px` : this.height;
+        }
+        const isPreviewEnabled = !!this.preview;
+        const showCloseIcon = this.previewConfig.closeIcon !== false;
+        return (h(Host, { key: 'bb95b1a93bb027fc3b9a8ec1ccc43c4073697c2a', class: {
+                'x-image': true,
+                'x-image-error': this.isError,
+                [this.rootClassName || '']: !!this.rootClassName,
+            }, style: style }, this.isLoading && this.placeholder && (h("div", { key: '4a74c3bc1e1dd379b0e6cf8643d00eac31e48198', class: "x-image-placeholder" }, h("slot", { key: 'ae5938670022b5aca6948dfbfa9d45321737126b', name: "placeholder" }, h("div", { key: '8a499eb96a298ee6fb7b51b46da8be04f68c9869', class: "x-image-placeholder-default" })))), h("img", { key: '2603924c780366f6859f5ac758482e4c111d89f7', class: {
+                'x-image-img': true,
+                'x-image-img-loading': this.isLoading,
+            }, src: imgSrc, alt: this.alt, crossOrigin: this.crossOrigin, loading: this.loading, onError: (e) => this.handleError(e), onLoad: (e) => this.handleLoad(e), onClick: () => isPreviewEnabled && this.openPreview(), ...(this.referrerPolicy ? { 'referrerpolicy': this.referrerPolicy } : {}) }), isPreviewEnabled && !this.isError && (h("div", { key: '5714cba98437c6bb7c056d377474ff4b095b75f7', class: "x-image-mask", onClick: () => this.openPreview() }, h("div", { key: 'abca6fec5707b253a5b0398a038b55aec0366d50', class: "x-image-mask-info" }, h("slot", { key: 'd4e32732fb77aeb621e1f6d4f8a8db8307b10bd6', name: "preview-mask" }, h("span", { key: '5223b8db442847cbafa20aff1c24ed2a8f4bb92d', class: "x-image-mask-icon" }, h("x-icon", { key: '118729ea00b31a30921435f977c1571f3542e2e8', name: getIcon('eye') })), h("span", { key: '8f4af313c1af576f21e742882120b19885ba8f6b' }, translate('Image.preview', {}, 'Preview')))))), isPreviewEnabled && this.isPreviewVisible && (h("div", { key: '7a3acb2225fa82d090355cae35c7ea1a618878fc', class: "x-image-preview", onWheel: this.handleWheel }, h("div", { key: '6d6933adb42a1205bfdcce6bbfbd4d34e70d11b0', class: "x-image-preview-mask", onClick: () => this.closePreview() }), h("div", { key: '049c24d84c358d5df1d5cd7675be8dd80ce91645', class: "x-image-preview-wrap" }, showCloseIcon && (h("button", { key: 'e9c11f95f25d3d19386b717aed6bdd6c23df5989', class: "x-image-preview-close", onClick: () => this.closePreview() }, h("x-icon", { key: 'e01f98539d963596635c8c1788d19039f21b756a', name: getIcon('close') }))), h("div", { key: '80bb64b516446d3a635a5d06f4d0613162211eba', class: "x-image-preview-operations" }, h("button", { key: '0a07f0967aa349e97032db2201604616f6845810', class: "x-image-preview-operation", onClick: () => this.flipX(), title: "Flip Horizontal" }, h("x-icon", { key: '46ee62460bf15f8fddfbeb5d492a41d10775b75d', name: getIcon('flipX') })), h("button", { key: '5797a256d2e1ca333ba2280e6add5f503a08731f', class: "x-image-preview-operation", onClick: () => this.flipY(), title: "Flip Vertical" }, h("x-icon", { key: 'ad8374c20c1318318dd3eb00037f42987bb3241f', name: getIcon('flipY'), style: { transform: 'rotate(90deg)' } })), h("button", { key: 'f9da947ad172a9968b3b66e69d099237035e8703', class: "x-image-preview-operation", onClick: () => this.rotateLeft(), title: "Rotate Left" }, h("x-icon", { key: '04fd2630e26178805b3d08e5e413f1fac935b7a7', name: getIcon('rotateLeft') })), h("button", { key: '08f4906ed045057c41b22a299b97bb730ce47c21', class: "x-image-preview-operation", onClick: () => this.rotateRight(), title: "Rotate Right" }, h("x-icon", { key: '1f3856cea3846315cc24b617ecb1d722f22ab7ba', name: getIcon('rotateRight') })), h("button", { key: '8648dd9483d2b44867f0814a4cf912bae1f67cbc', class: "x-image-preview-operation", onClick: () => this.zoomOut(), title: "Zoom Out" }, h("x-icon", { key: '0e0d234ae8565fb7304b8f7a4f3d5af29fc339e6', name: getIcon('zoomOut') })), h("button", { key: 'd07d2c894ea72e36610eef5472e61c5ea0835167', class: "x-image-preview-operation", onClick: () => this.zoomIn(), title: "Zoom In" }, h("x-icon", { key: '9a5a978a543d3782369f32c7a23f3dc6665632f6', name: getIcon('zoomIn') }))), h("div", { key: 'e6856b8d2a1a024ae3d5fb7232e586cad3ca283c', class: "x-image-preview-body" }, h("img", { key: '2dbc165faa1e6c4f1f86297e7dc7ed578784eadf', class: "x-image-preview-img", src: this.previewConfig.src || imgSrc, alt: this.alt, style: { transform: this.getTransformStyle() }, onClick: (e) => e.stopPropagation() })))))));
+    }
+    static get watchers() { return {
+        "preview": [{
+                "previewChanged": 0
+            }],
+        "src": [{
+                "srcChanged": 0
+            }]
+    }; }
+};
+XImage.style = xImageCss();
+
+const xTreeCss = () => `@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;-webkit-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0;color:var(--x-tree-color, var(--x-color-text, rgba(0, 0, 0, 0.88)));font-size:var(--x-tree-font-size, var(--x-font-size-base, 14px));line-height:var(--x-tree-line-height, var(--x-line-height-base, 1.5714285714));list-style:none;-webkit-font-feature-settings:"tnum";font-feature-settings:"tnum";background:var(--x-tree-bg, transparent)}.x-tree-list{position:relative}.x-tree-list-holder-inner{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.x-tree-treenode{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;padding:var(--x-tree-node-padding, var(--x-spacing-xxs, 4px)) 0;outline:none;cursor:pointer;-webkit-transition:background-color var(--x-tree-motion-duration, var(--x-motion-duration-mid, 0.2s));transition:background-color var(--x-tree-motion-duration, var(--x-motion-duration-mid, 0.2s))}.x-tree-treenode:hover{background-color:var(--x-tree-node-bg-hover, var(--x-color-bg-text-hover, rgba(0, 0, 0, 0.04)))}.x-tree-treenode.x-tree-treenode-disabled{cursor:not-allowed;opacity:0.5}.x-tree-treenode.x-tree-treenode-disabled:hover{background-color:transparent}.x-tree-treenode.x-tree-treenode-selected{background-color:var(--x-tree-node-bg-selected, var(--x-color-primary-bg, #e6f4ff))}.x-tree-indent-unit{display:inline-block;width:var(--x-tree-indent, var(--x-spacing-xl, 24px));-ms-flex-item-align:stretch;align-self:stretch}:host(.x-tree-show-line) .x-tree-indent-unit{position:relative}:host(.x-tree-show-line) .x-tree-indent-unit::before{position:absolute;top:0;bottom:0;inset-inline-end:calc(var(--x-tree-indent, var(--x-spacing-xl, 24px)) / 2);-webkit-border-end:1px solid var(--x-tree-line-color, var(--x-color-border, #d9d9d9));border-inline-end:1px solid var(--x-tree-line-color, var(--x-color-border, #d9d9d9));content:""}:host(.x-tree-show-line) .x-tree-indent-unit.x-tree-indent-unit-end::before{display:none}.x-tree-switcher{position:relative;-ms-flex:none;flex:none;-ms-flex-item-align:stretch;align-self:stretch;width:var(--x-tree-switcher-size, 24px);margin:0;line-height:var(--x-tree-switcher-size, 24px);text-align:center;cursor:pointer;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.x-tree-switcher-icon{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;font-size:var(--x-tree-switcher-icon-size, 10px);-webkit-transition:-webkit-transform var(--x-tree-motion-duration, var(--x-motion-duration-mid, 0.2s));transition:-webkit-transform var(--x-tree-motion-duration, var(--x-motion-duration-mid, 0.2s));transition:transform var(--x-tree-motion-duration, var(--x-motion-duration-mid, 0.2s));transition:transform var(--x-tree-motion-duration, var(--x-motion-duration-mid, 0.2s)), -webkit-transform var(--x-tree-motion-duration, var(--x-motion-duration-mid, 0.2s));-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}.x-tree-switcher-icon svg{-webkit-transition:-webkit-transform var(--x-tree-motion-duration, var(--x-motion-duration-mid, 0.2s));transition:-webkit-transform var(--x-tree-motion-duration, var(--x-motion-duration-mid, 0.2s));transition:transform var(--x-tree-motion-duration, var(--x-motion-duration-mid, 0.2s));transition:transform var(--x-tree-motion-duration, var(--x-motion-duration-mid, 0.2s)), -webkit-transform var(--x-tree-motion-duration, var(--x-motion-duration-mid, 0.2s))}.x-tree-switcher-open .x-tree-switcher-icon{-webkit-transform:rotate(0deg);transform:rotate(0deg)}.x-tree-switcher-leaf{cursor:default}.x-tree-switcher-loading{cursor:default}.x-tree-switcher-loading-icon{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;color:var(--x-tree-loading-color, var(--x-color-primary, #1677ff))}.x-tree-checkbox{margin:0 var(--x-tree-checkbox-margin-right, var(--x-spacing-xs, 8px)) 0 0;line-height:1;white-space:nowrap;outline:none;cursor:pointer;position:relative;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}.x-tree-checkbox-inner{position:relative;display:block;width:var(--x-tree-checkbox-size, var(--x-font-size-lg, 16px));height:var(--x-tree-checkbox-size, var(--x-font-size-lg, 16px));background-color:var(--x-tree-checkbox-bg, var(--x-color-bg-container, #ffffff));border:var(--x-tree-checkbox-border-width, var(--x-border-width, 1px)) solid var(--x-tree-checkbox-border-color, var(--x-color-border, #d9d9d9));border-radius:var(--x-tree-checkbox-border-radius, var(--x-border-radius-sm, 4px));-webkit-transition:all var(--x-tree-motion-duration, var(--x-motion-duration-mid, 0.2s));transition:all var(--x-tree-motion-duration, var(--x-motion-duration-mid, 0.2s))}.x-tree-checkbox:hover .x-tree-checkbox-inner{border-color:var(--x-tree-checkbox-border-color-checked, var(--x-color-primary, #1677ff))}.x-tree-checkbox-checked .x-tree-checkbox-inner{background-color:var(--x-tree-checkbox-bg-checked, var(--x-color-primary, #1677ff));border-color:var(--x-tree-checkbox-border-color-checked, var(--x-color-primary, #1677ff))}.x-tree-checkbox-checked .x-tree-checkbox-inner::after{position:absolute;display:table;border:var(--x-tree-checkbox-check-border-width, 2px) solid var(--x-tree-checkbox-check-color, var(--x-color-white, #ffffff));border-top:0;border-left:0;-webkit-transform:rotate(45deg) scale(1) translate(-50%, -50%);transform:rotate(45deg) scale(1) translate(-50%, -50%);opacity:1;-webkit-transition:var(--x-tree-checkbox-check-transition, 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s);transition:var(--x-tree-checkbox-check-transition, 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s);content:"";top:50%;left:22%;width:var(--x-tree-checkbox-check-width, 5.71px);height:var(--x-tree-checkbox-check-height, 9.14px)}.x-tree-checkbox-indeterminate .x-tree-checkbox-inner{background-color:var(--x-tree-checkbox-bg, var(--x-color-bg-container, #ffffff));border-color:var(--x-tree-checkbox-border-color-checked, var(--x-color-primary, #1677ff))}.x-tree-checkbox-indeterminate .x-tree-checkbox-inner::after{position:absolute;top:50%;left:50%;width:var(--x-tree-checkbox-indeterminate-size, 8px);height:var(--x-tree-checkbox-indeterminate-size, 8px);background-color:var(--x-tree-checkbox-bg-checked, var(--x-color-primary, #1677ff));border:0;-webkit-transform:translate(-50%, -50%) scale(1);transform:translate(-50%, -50%) scale(1);opacity:1;content:""}.x-tree-checkbox-disabled{cursor:not-allowed}.x-tree-checkbox-disabled .x-tree-checkbox-inner{background-color:var(--x-tree-checkbox-bg-disabled, var(--x-color-bg-container-disabled, #f5f5f5));border-color:var(--x-tree-checkbox-border-color, var(--x-color-border, #d9d9d9)) !important}.x-tree-checkbox-disabled .x-tree-checkbox-inner::after{border-color:var(--x-tree-checkbox-check-color-disabled, var(--x-color-text-disabled, rgba(0, 0, 0, 0.25)))}.x-tree-node-content-wrapper{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;min-height:var(--x-tree-node-height, var(--x-control-height-sm, 24px));padding:0 var(--x-tree-node-padding, var(--x-spacing-xxs, 4px));color:inherit;line-height:var(--x-tree-node-height, var(--x-control-height-sm, 24px));background:transparent;border-radius:var(--x-tree-border-radius, var(--x-border-radius, 6px));cursor:pointer;-webkit-transition:all var(--x-tree-motion-duration, var(--x-motion-duration-mid, 0.2s));transition:all var(--x-tree-motion-duration, var(--x-motion-duration-mid, 0.2s));-ms-flex:auto;flex:auto}.x-tree-iconEle{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:var(--x-tree-icon-size, 16px);height:var(--x-tree-icon-size, 16px);-webkit-margin-end:var(--x-tree-icon-margin, var(--x-spacing-xxs, 4px));margin-inline-end:var(--x-tree-icon-margin, var(--x-spacing-xxs, 4px));color:var(--x-tree-icon-color, var(--x-color-text-secondary, rgba(0, 0, 0, 0.45)))}.x-tree-title{display:inline-block;-ms-flex:auto;flex:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.x-tree-actions{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;margin-left:auto;padding-left:var(--x-tree-actions-padding-left, 8px);opacity:1;-webkit-transition:opacity var(--x-tree-motion-duration, var(--x-motion-duration-mid, 0.2s));transition:opacity var(--x-tree-motion-duration, var(--x-motion-duration-mid, 0.2s))}.x-tree-actions.x-tree-actions-hover{opacity:0}.x-tree-treenode:hover .x-tree-actions-hover{opacity:1}.x-tree-action-item{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:var(--x-tree-action-item-size, 24px);height:var(--x-tree-action-item-size, 24px);margin-left:var(--x-tree-action-item-margin-left, 4px);color:var(--x-tree-icon-color, var(--x-color-text-secondary, rgba(0, 0, 0, 0.45)));border-radius:var(--x-tree-border-radius, var(--x-border-radius, 6px));cursor:pointer;-webkit-transition:all var(--x-tree-motion-duration, var(--x-motion-duration-mid, 0.2s));transition:all var(--x-tree-motion-duration, var(--x-motion-duration-mid, 0.2s))}.x-tree-action-item:hover{color:var(--x-tree-color, var(--x-color-text, rgba(0, 0, 0, 0.88)));background-color:var(--x-tree-node-bg-hover, var(--x-color-bg-text-hover, rgba(0, 0, 0, 0.04)))}.x-tree-action-item.x-tree-action-item-danger:hover{color:var(--x-color-error, #ff4d4f);background-color:var(--x-color-error-bg, #fff2f0)}.x-tree-action-item.x-tree-action-item-disabled{color:var(--x-tree-checkbox-check-color-disabled, var(--x-color-text-disabled, rgba(0, 0, 0, 0.25)));cursor:not-allowed}.x-tree-action-item.x-tree-action-item-disabled:hover{background-color:transparent}.x-tree-action-item x-icon{font-size:var(--x-tree-action-item-icon-size, 14px)}.x-tree-child-tree{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.x-tree-child-tree-open{display:-ms-flexbox;display:flex}:host(.x-tree-show-line) .x-tree-switcher{background:var(--x-tree-bg, transparent)}:host(.x-tree-show-line) .x-tree-switcher-leaf-line{position:relative}:host(.x-tree-show-line) .x-tree-switcher-leaf-line::before{position:absolute;top:0;bottom:-var(--x-tree-node-padding, var(--x-spacing-xxs, 4px));inset-inline-start:calc(var(--x-tree-switcher-size, 24px) / 2 - 0.5px);-webkit-margin-start:-1px;margin-inline-start:-1px;-webkit-border-end:1px solid var(--x-tree-line-color, var(--x-color-border, #d9d9d9));border-inline-end:1px solid var(--x-tree-line-color, var(--x-color-border, #d9d9d9));content:""}:host(.x-tree-show-line) .x-tree-switcher-leaf-line::after{position:absolute;top:calc(var(--x-tree-node-height, var(--x-control-height-sm, 24px)) / 2);width:calc(var(--x-tree-switcher-size, 24px) / 2);height:0;border-bottom:1px solid var(--x-tree-line-color, var(--x-color-border, #d9d9d9));content:""}:host(.x-tree-show-line) .x-tree-switcher-leaf-line.x-tree-switcher-leaf-line-last::before{bottom:auto;height:calc(var(--x-tree-node-height, var(--x-control-height-sm, 24px)) / 2)}:host(.x-tree-show-line) .x-tree-switcher-open .x-tree-switcher-icon,:host(.x-tree-show-line) .x-tree-switcher-close .x-tree-switcher-icon{position:relative;z-index:1;background:var(--x-tree-bg, transparent)}:host(.x-tree-show-line) .x-tree-switcher-open::before,:host(.x-tree-show-line) .x-tree-switcher-close::before{position:absolute;top:0;bottom:-var(--x-tree-node-padding, var(--x-spacing-xxs, 4px));inset-inline-start:calc(var(--x-tree-switcher-size, 24px) / 2 - 0.5px);-webkit-margin-start:-1px;margin-inline-start:-1px;-webkit-border-end:1px solid var(--x-tree-line-color, var(--x-color-border, #d9d9d9));border-inline-end:1px solid var(--x-tree-line-color, var(--x-color-border, #d9d9d9));content:""}:host(.x-tree-show-line) .x-tree-switcher-open::after,:host(.x-tree-show-line) .x-tree-switcher-close::after{position:absolute;top:calc(var(--x-tree-node-height, var(--x-control-height-sm, 24px)) / 2);width:calc(var(--x-tree-switcher-size, 24px) / 2);height:0;border-bottom:1px solid var(--x-tree-line-color, var(--x-color-border, #d9d9d9));content:""}:host(.x-tree-show-line) .x-tree-switcher-open.x-tree-switcher-last::before,:host(.x-tree-show-line) .x-tree-switcher-close.x-tree-switcher-last::before{bottom:auto;height:calc(var(--x-tree-node-height, var(--x-control-height-sm, 24px)) / 2)}:host(.x-tree-block-node) .x-tree-list-holder-inner{-ms-flex-align:stretch;align-items:stretch}:host(.x-tree-block-node) .x-tree-treenode:hover{background-color:var(--x-tree-node-bg-hover, var(--x-color-bg-text-hover, rgba(0, 0, 0, 0.04)))}:host(.x-tree-block-node) .x-tree-node-content-wrapper{-ms-flex:auto;flex:auto;border-radius:0}:host(.x-tree-block-node) .x-tree-node-content-wrapper:hover{background-color:transparent}:host(.x-tree-block-node) .x-tree-treenode.x-tree-treenode-selected .x-tree-node-content-wrapper{background-color:transparent}`;
+
+const XTree = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.xExpand = createEvent(this, "xExpand", 7);
+        this.xSelect = createEvent(this, "xSelect", 7);
+        this.xCheck = createEvent(this, "xCheck", 7);
+        this.xDragStart = createEvent(this, "xDragStart", 7);
+        this.xDragEnter = createEvent(this, "xDragEnter", 7);
+        this.xDragOver = createEvent(this, "xDragOver", 7);
+        this.xDragLeave = createEvent(this, "xDragLeave", 7);
+        this.xDragEnd = createEvent(this, "xDragEnd", 7);
+        this.xDrop = createEvent(this, "xDrop", 7);
+        this.xLoadData = createEvent(this, "xLoadData", 7);
+        this.xAction = createEvent(this, "xAction", 7);
+    }
+    get el() { return getElement(this); }
+    /**
+     * Tree data
+     * @example
+     * <x-tree treeData={[{ key: '1', title: 'Node' }]}></x-tree>
+     */
+    treeData = [];
+    /**
+     * Show checkbox
+     * @example
+     * <x-tree checkable></x-tree>
+     */
+    checkable = false;
+    /**
+     * Allow node selection
+     * @example
+     * <x-tree selectable={false}></x-tree>
+     */
+    selectable = true;
+    /**
+     * Allow multiple selection
+     * @example
+     * <x-tree multiple></x-tree>
+     */
+    multiple = false;
+    /**
+     * Expanded keys (controlled)
+     * @example
+     * <x-tree expandedKeys={['1']}></x-tree>
+     */
+    expandedKeys = [];
+    /**
+     * Selected keys (controlled)
+     * @example
+     * <x-tree selectedKeys={['1']}></x-tree>
+     */
+    selectedKeys = [];
+    /**
+     * Checked keys (controlled)
+     * @example
+     * <x-tree checkedKeys={['1']}></x-tree>
+     */
+    checkedKeys = [];
+    /**
+     * Default expanded keys (uncontrolled)
+     * @example
+     * <x-tree defaultExpandedKeys={['1']}></x-tree>
+     */
+    defaultExpandedKeys = [];
+    /**
+     * Default selected keys (uncontrolled)
+     * @example
+     * <x-tree defaultSelectedKeys={['1']}></x-tree>
+     */
+    defaultSelectedKeys = [];
+    /**
+     * Default checked keys (uncontrolled)
+     * @example
+     * <x-tree defaultCheckedKeys={['1']}></x-tree>
+     */
+    defaultCheckedKeys = [];
+    /**
+     * Expand all nodes by default
+     * @example
+     * <x-tree defaultExpandAll></x-tree>
+     */
+    defaultExpandAll = false;
+    /**
+     * Expand parent nodes when checking
+     * @example
+     * <x-tree autoExpandParent={false}></x-tree>
+     */
+    autoExpandParent = true;
+    /**
+     * Show connecting lines
+     * @example
+     * <x-tree showLine></x-tree>
+     */
+    showLine = false;
+    /**
+     * Show icon before node title
+     * @example
+     * <x-tree showIcon></x-tree>
+     */
+    showIcon = false;
+    /**
+     * Whether to block the entire row
+     * @example
+     * <x-tree blockNode></x-tree>
+     */
+    blockNode = false;
+    /**
+     * Disabled the entire tree
+     * @example
+     * <x-tree disabled></x-tree>
+     */
+    disabled = false;
+    /**
+     * Whether to enable drag
+     * @example
+     * <x-tree allowDrag></x-tree>
+     */
+    allowDrag = false;
+    /**
+     * Virtual scroll (for large data)
+     * @example
+     * <x-tree virtual></x-tree>
+     */
+    virtual = false;
+    /**
+     * Height for virtual scroll
+     * @example
+     * <x-tree height={300}></x-tree>
+     */
+    height;
+    /**
+     * Item height for virtual scroll
+     * @example
+     * <x-tree itemHeight={32}></x-tree>
+     */
+    itemHeight = 32;
+    /**
+     * Check strictly (parent-child independent)
+     * @example
+     * <x-tree checkStrictly></x-tree>
+     */
+    checkStrictly = false;
+    /**
+     * Internal expanded keys.
+     */
+    internalExpandedKeys = [];
+    /**
+     * Internal selected keys.
+     */
+    internalSelectedKeys = [];
+    /**
+     * Internal checked keys.
+     */
+    internalCheckedKeys = [];
+    /**
+     * Half-checked keys for non-strict mode.
+     */
+    halfCheckedKeys = [];
+    /**
+     * Loading keys for async nodes.
+     */
+    loadingKeys = [];
+    /**
+     * Drag over node key.
+     */
+    dragOverNodeKey = null;
+    /**
+     * Scroll top for virtual scroll.
+     */
+    scrollTop = 0;
+    /**
+     * Filter value for tree nodes.
+     * @example
+     * <x-tree filterValue="search text"></x-tree>
+     */
+    filterValue = '';
+    /**
+     * Custom actions for all nodes (right side)
+     * If a node has its own actions, they will take priority.
+     */
+    actions;
+    /**
+     * Whether to show actions only on hover (for all nodes)
+     */
+    showActions;
+    /**
+     * Filter function (optional).
+     * @example
+     * <x-tree filterTreeNode={(node, value) => node.title.includes(value)}></x-tree>
+     */
+    filterTreeNode;
+    /**
+     * Flattened nodes for virtual scroll cache.
+     */
+    flattenedNodes = [];
+    /**
+     * Internal focused key for keyboard navigation.
+     */
+    focusedKey = null;
+    /**
+     * Tree Service Instance
+     */
+    treeService = new TreeService({ id: 'key', children: 'children' });
+    /**
+     * Emitted when expand state changes.
+     * @example
+     * <x-tree onXExpand={(ev) => console.log(ev.detail)}></x-tree>
+     */
+    xExpand;
+    /**
+     * Emitted when selection changes.
+     * @example
+     * <x-tree onXSelect={(ev) => console.log(ev.detail)}></x-tree>
+     */
+    xSelect;
+    /**
+     * Emitted when check state changes.
+     * @example
+     * <x-tree onXCheck={(ev) => console.log(ev.detail)}></x-tree>
+     */
+    xCheck;
+    /**
+     * Emitted when drag starts.
+     * @example
+     * <x-tree onXDragStart={(ev) => console.log(ev.detail)}></x-tree>
+     */
+    xDragStart;
+    /**
+     * Emitted when drag enters.
+     * @example
+     * <x-tree onXDragEnter={(ev) => console.log(ev.detail)}></x-tree>
+     */
+    xDragEnter;
+    /**
+     * Emitted when dragging over.
+     * @example
+     * <x-tree onXDragOver={(ev) => console.log(ev.detail)}></x-tree>
+     */
+    xDragOver;
+    /**
+     * Emitted when drag leaves.
+     * @example
+     * <x-tree onXDragLeave={(ev) => console.log(ev.detail)}></x-tree>
+     */
+    xDragLeave;
+    /**
+     * Emitted when drag ends.
+     * @example
+     * <x-tree onXDragEnd={(ev) => console.log(ev.detail)}></x-tree>
+     */
+    xDragEnd;
+    /**
+     * Emitted when drop happens.
+     * @example
+     * <x-tree onXDrop={(ev) => console.log(ev.detail)}></x-tree>
+     */
+    xDrop;
+    /**
+     * Emitted when data loading is required.
+     * @example
+     * <x-tree onXLoadData={(ev) => console.log(ev.detail)}></x-tree>
+     */
+    xLoadData;
+    /**
+     * Emitted when a custom action is clicked.
+     * @example
+     * <x-tree onXAction={(ev) => console.log('Action:', ev.detail.action, 'Node:', ev.detail.node)}></x-tree>
+     */
+    xAction;
+    /**
+     * Initialize internal state from defaults.
+     *
+     * Flow:
+     * 1. If defaultExpandAll is true, expand all nodes.
+     * 2. Otherwise, use defaultExpandedKeys.
+     * 3. Initialize selectedKeys and checkedKeys from defaults.
+     * 4. Update half-checked keys if not in strict mode.
+     */
+    componentWillLoad() {
+        // Initialize internal state from default props
+        if (this.defaultExpandAll) {
+            this.internalExpandedKeys = this.treeService.getAllKeys(this.treeData);
+        }
+        else if (this.defaultExpandedKeys.length > 0) {
+            this.internalExpandedKeys = [...this.defaultExpandedKeys];
+        }
+        if (this.defaultSelectedKeys.length > 0) {
+            this.internalSelectedKeys = [...this.defaultSelectedKeys];
+        }
+        if (this.selectedKeys?.length > 0) {
+            this.internalSelectedKeys = [...this.selectedKeys];
+        }
+        if (this.defaultCheckedKeys.length > 0) {
+            this.internalCheckedKeys = [...this.defaultCheckedKeys];
+        }
+        if (this.checkedKeys?.length > 0) {
+            this.internalCheckedKeys = [...this.checkedKeys];
+        }
+        if (this.internalCheckedKeys.length > 0 && !this.checkStrictly) {
+            this.halfCheckedKeys = this.treeService.calculateHalfCheckedKeys(this.internalCheckedKeys, this.treeData);
+        }
+        if (this.autoExpandParent) {
+            const keysToExpand = new Set(this.internalExpandedKeys);
+            const expandParents = (keys) => {
+                keys.forEach(key => {
+                    let parent = this.treeService.getParentId(key, this.treeData);
+                    while (parent) {
+                        keysToExpand.add(parent);
+                        parent = this.treeService.getParentId(parent, this.treeData);
+                    }
+                });
+            };
+            if (this.internalSelectedKeys.length > 0)
+                expandParents(this.internalSelectedKeys);
+            if (this.internalCheckedKeys.length > 0)
+                expandParents(this.internalCheckedKeys);
+            this.internalExpandedKeys = Array.from(keysToExpand);
+        }
+        if (this.expandedKeys?.length > 0) {
+            this.internalExpandedKeys = [...new Set([...this.internalExpandedKeys, ...this.expandedKeys])];
+        }
+        if (this.virtual) {
+            this.updateFlattenedNodes();
+        }
+    }
+    /**
+     * Handle scroll event for virtual scroll.
+     * @param event - Scroll event.
+     */
+    handleScroll = (event) => {
+        if (!this.virtual)
+            return;
+        const target = event.target;
+        this.scrollTop = target.scrollTop;
+    };
+    watchTreeData() {
+        if (this.defaultExpandAll) {
+            this.internalExpandedKeys = this.treeService.getAllKeys(this.treeData);
+        }
+        else if (this.autoExpandParent) {
+            // Need to expand parents of selected/checked items if applicable
+            const keysToExpand = new Set(this.internalExpandedKeys);
+            const expandParents = (keys) => {
+                keys.forEach(key => {
+                    let parent = this.treeService.getParentId(key, this.treeData);
+                    while (parent) {
+                        keysToExpand.add(parent);
+                        parent = this.treeService.getParentId(parent, this.treeData);
+                    }
+                });
+            };
+            if (this.internalSelectedKeys.length > 0)
+                expandParents(this.internalSelectedKeys);
+            if (this.internalCheckedKeys.length > 0)
+                expandParents(this.internalCheckedKeys);
+            this.internalExpandedKeys = Array.from(keysToExpand);
+        }
+        this.updateFlattenedNodes();
+    }
+    watchExpandedKeys(newVal) {
+        if (newVal && newVal.length > 0) {
+            this.internalExpandedKeys = [...newVal];
+            this.updateFlattenedNodes();
+        }
+    }
+    watchFilterValue() {
+        this.updateFlattenedNodes();
+        // Auto expand parent nodes of matched items
+        if (this.filterValue) {
+            const expandedKeys = new Set(this.internalExpandedKeys);
+            const loop = (nodes) => {
+                nodes.forEach(node => {
+                    if (this.checkFilter(node)) {
+                        // Expand parents
+                        let parent = this.treeService.getParentId(node.key, this.treeData);
+                        while (parent) {
+                            expandedKeys.add(parent);
+                            parent = this.treeService.getParentId(parent, this.treeData);
+                        }
+                    }
+                    if (node.children) {
+                        loop(node.children);
+                    }
+                });
+            };
+            loop(this.treeData);
+            this.internalExpandedKeys = Array.from(expandedKeys);
+            // Re-flatten after expansion
+            this.updateFlattenedNodes();
+        }
+    }
+    /**
+     * Check if node matches filter.
+     */
+    checkFilter(node) {
+        if (!this.filterValue)
+            return true;
+        if (this.filterTreeNode) {
+            return this.filterTreeNode(node, this.filterValue);
+        }
+        return node.title.toLowerCase().includes(this.filterValue.toLowerCase());
+    }
+    hasMatchingChild(node) {
+        if (!node.children)
+            return false;
+        return node.children.some(child => {
+            if (this.checkFilter(child))
+                return true;
+            return this.hasMatchingChild(child);
+        });
+    }
+    /**
+     * Sync internal selected keys when prop changes.
+     * @param newVal - New selected keys.
+     */
+    watchSelectedKeys(newVal) {
+        if (newVal) {
+            this.internalSelectedKeys = [...newVal];
+            if (this.autoExpandParent) {
+                const keysToExpand = new Set(this.internalExpandedKeys);
+                newVal.forEach(key => {
+                    let parent = this.treeService.getParentId(key, this.treeData);
+                    while (parent) {
+                        keysToExpand.add(parent);
+                        parent = this.treeService.getParentId(parent, this.treeData);
+                    }
+                });
+                this.internalExpandedKeys = Array.from(keysToExpand);
+                this.updateFlattenedNodes();
+            }
+        }
+    }
+    /**
+     * Sync internal checked keys when prop changes.
+     * @param newVal - New checked keys.
+     */
+    watchCheckedKeys(newVal) {
+        if (newVal) {
+            this.internalCheckedKeys = [...newVal];
+            if (!this.checkStrictly) {
+                this.halfCheckedKeys = this.treeService.calculateHalfCheckedKeys(this.internalCheckedKeys, this.treeData);
+            }
+        }
+    }
+    handleExpand(node, e) {
+        e.stopPropagation();
+        if (node.isLeaf || node.disabled || this.disabled)
+            return;
+        const expanded = !this.internalExpandedKeys.includes(node.key);
+        if (expanded) {
+            // Async load data if node has no children and is not a leaf
+            if ((!node.children || node.children.length === 0) && !node.isLeaf) {
+                this.loadingKeys = [...this.loadingKeys, node.key];
+                this.xLoadData.emit({
+                    expandedKeys: this.internalExpandedKeys,
+                    node,
+                    expanded: true
+                });
+            }
+        }
+        this.internalExpandedKeys = this.treeService.toggleExpand(node, this.internalExpandedKeys);
+        if (this.virtual) {
+            this.updateFlattenedNodes();
+        }
+        this.expandedKeys = this.internalExpandedKeys;
+        this.xExpand.emit({ expandedKeys: this.internalExpandedKeys, node, expanded });
+    }
+    /**
+     * Update the list of flattened nodes for virtual scroll.
+     */
+    updateFlattenedNodes() {
+        const flattened = [];
+        // Recursive function to flatten the tree
+        // It filters nodes if filterValue is set
+        const flatten = (nodes, level, parentChain) => {
+            let filteredNodes = nodes;
+            if (this.filterValue) {
+                filteredNodes = nodes.filter(node => {
+                    const matches = this.checkFilter(node);
+                    const hasMatchingChild = this.hasMatchingChild(node);
+                    return matches || hasMatchingChild;
+                });
+            }
+            filteredNodes.forEach((node, index) => {
+                const isLast = index === filteredNodes.length - 1;
+                const currentChain = [...parentChain, isLast];
+                flattened.push({ node, level, parentChain, isLast });
+                if (this.internalExpandedKeys.includes(node.key) && node.children && node.children.length > 0) {
+                    flatten(node.children, level + 1, currentChain);
+                }
+            });
+        };
+        flatten(this.treeData, 0, []);
+        this.flattenedNodes = flattened;
+    }
+    handleSelect(node, e) {
+        e.stopPropagation();
+        if (!this.selectable || node.disabled || this.disabled)
+            return;
+        if (node.selectable === false)
+            return;
+        const selected = !this.internalSelectedKeys.includes(node.key);
+        this.internalSelectedKeys = this.treeService.toggleSelect(node, this.internalSelectedKeys, this.multiple);
+        this.selectedKeys = this.internalSelectedKeys;
+        this.xSelect.emit({ selectedKeys: this.internalSelectedKeys, node, selected });
+    }
+    handleCheck(node, e) {
+        e.stopPropagation();
+        if (node.disabled || node.disableCheckbox || this.disabled)
+            return;
+        const checked = !this.internalCheckedKeys.includes(node.key);
+        const result = this.treeService.toggleCheck(node, checked, this.internalCheckedKeys, this.treeData, this.checkStrictly);
+        this.internalCheckedKeys = result.checkedKeys;
+        if (!this.checkStrictly) {
+            this.halfCheckedKeys = result.halfCheckedKeys;
+        }
+        this.checkedKeys = this.internalCheckedKeys;
+        this.xCheck.emit({
+            checkedKeys: this.internalCheckedKeys,
+            node,
+            checked,
+            halfCheckedKeys: this.halfCheckedKeys
+        });
+    }
+    /**
+     * Handle drag start.
+     * @param node - The node being dragged.
+     * @param e - Drag event.
+     */
+    handleDragStart(node, e) {
+        if (this.disabled || node.disabled) {
+            e.preventDefault();
+            return;
+        }
+        e.stopPropagation();
+        this.xDragStart.emit({
+            node,
+            nativeEvent: e
+        });
+    }
+    /**
+     * Handle drag enter.
+     * @param node - The node being entered.
+     * @param e - Drag event.
+     */
+    handleDragEnter(node, e) {
+        e.preventDefault();
+        e.stopPropagation();
+        this.dragOverNodeKey = node.key;
+        this.xDragEnter.emit({
+            node,
+            nativeEvent: e
+        });
+    }
+    /**
+     * Handle drag over.
+     * @param node - The node being dragged over.
+     * @param e - Drag event.
+     */
+    handleDragOver(node, e) {
+        e.preventDefault();
+        e.stopPropagation();
+        this.xDragOver.emit({
+            node,
+            nativeEvent: e
+        });
+    }
+    /**
+     * Handle drag leave.
+     * @param node - The node being left.
+     * @param e - Drag event.
+     */
+    handleDragLeave(node, e) {
+        e.stopPropagation();
+        this.xDragLeave.emit({
+            node,
+            nativeEvent: e
+        });
+    }
+    /**
+     * Handle drag end.
+     * @param node - The node being dragged.
+     * @param e - Drag event.
+     */
+    handleDragEnd(node, e) {
+        e.stopPropagation();
+        this.dragOverNodeKey = null;
+        this.xDragEnd.emit({
+            node,
+            nativeEvent: e
+        });
+    }
+    /**
+     * Handle drop.
+     * @param node - The node being dropped on.
+     * @param e - Drag event.
+     */
+    handleDrop(node, e) {
+        e.preventDefault();
+        e.stopPropagation();
+        this.dragOverNodeKey = null;
+        this.xDrop.emit({
+            node,
+            nativeEvent: e
+        });
+    }
+    /**
+     * Handle key down event.
+     * @param e - Keyboard event.
+     */
+    handleKeyDown(e) {
+        if (this.disabled)
+            return;
+        const visibleNodes = this.flattenedNodes.map(item => item.node);
+        const focusedIndex = visibleNodes.findIndex(n => n.key === this.focusedKey);
+        let nextIndex = focusedIndex;
+        switch (e.key) {
+            case 'ArrowDown':
+                e.preventDefault();
+                if (focusedIndex < visibleNodes.length - 1) {
+                    nextIndex = focusedIndex + 1;
+                }
+                else if (focusedIndex === -1 && visibleNodes.length > 0) {
+                    nextIndex = 0;
+                }
+                break;
+            case 'ArrowUp':
+                e.preventDefault();
+                if (focusedIndex > 0) {
+                    nextIndex = focusedIndex - 1;
+                }
+                else if (focusedIndex === -1 && visibleNodes.length > 0) {
+                    nextIndex = visibleNodes.length - 1;
+                }
+                break;
+            case 'ArrowRight':
+                e.preventDefault();
+                if (focusedIndex !== -1) {
+                    const node = visibleNodes[focusedIndex];
+                    if (!node.isLeaf && (!node.children || node.children.length > 0)) {
+                        if (!this.internalExpandedKeys.includes(node.key)) {
+                            this.handleExpand(node, e);
+                        }
+                        else {
+                            // Move to first child if already expanded
+                            nextIndex = focusedIndex + 1;
+                        }
+                    }
+                }
+                break;
+            case 'ArrowLeft':
+                e.preventDefault();
+                if (focusedIndex !== -1) {
+                    const node = visibleNodes[focusedIndex];
+                    if (this.internalExpandedKeys.includes(node.key)) {
+                        this.handleExpand(node, e);
+                    }
+                    else {
+                        const parentKey = this.treeService.getParentId(node.key, this.treeData);
+                        if (parentKey) {
+                            const parentIndex = visibleNodes.findIndex(n => n.key === parentKey);
+                            if (parentIndex !== -1) {
+                                nextIndex = parentIndex;
+                            }
+                        }
+                    }
+                }
+                break;
+            case 'Enter':
+            case ' ':
+                e.preventDefault();
+                if (focusedIndex !== -1) {
+                    const node = visibleNodes[focusedIndex];
+                    if (this.checkable) {
+                        this.handleCheck(node, e);
+                    }
+                    else {
+                        this.handleSelect(node, e);
+                    }
+                }
+                break;
+        }
+        if (nextIndex !== focusedIndex && nextIndex !== -1) {
+            this.focusedKey = visibleNodes[nextIndex].key;
+            // Scroll into view if virtual
+            if (this.virtual && this.height) {
+                const itemTop = nextIndex * this.itemHeight;
+                if (itemTop < this.scrollTop) {
+                    this.scrollTop = itemTop;
+                }
+                else if (itemTop + this.itemHeight > this.scrollTop + this.height) {
+                    this.scrollTop = itemTop + this.itemHeight - this.height;
+                }
+            }
+        }
+    }
+    /**
+     * Render the switcher icon (arrow or loading).
+     * @param node - The node to render switcher for.
+     * @param expanded - Whether the node is expanded.
+     * @param isLast - Whether the node is the last child.
+     * @returns JSX.Element
+     */
+    renderSwitcher(node, expanded, isLast) {
+        const hasChildren = node.children && node.children.length > 0;
+        const isLeaf = node.isLeaf || (!hasChildren && node.isLeaf !== false);
+        const isLoading = this.loadingKeys.includes(node.key);
+        if (isLoading) {
+            return (h("span", { class: "x-tree-switcher x-tree-switcher-loading" }, h("span", { class: "x-tree-switcher-loading-icon" }, h("x-icon", { spin: true, name: getIcon('loading') }))));
+        }
+        if (isLeaf) {
+            if (this.showLine) {
+                return (h("span", { class: {
+                        'x-tree-switcher': true,
+                        'x-tree-switcher-leaf-line': true,
+                        'x-tree-switcher-leaf-line-last': isLast
+                    } }, h("span", { class: "x-tree-switcher-leaf-line-icon" })));
+            }
+            return h("span", { class: "x-tree-switcher x-tree-switcher-leaf" });
+        }
+        return (h("span", { class: {
+                'x-tree-switcher': true,
+                'x-tree-switcher-open': expanded,
+                'x-tree-switcher-close': !expanded,
+                'x-tree-switcher-last': isLast,
+            }, onClick: (e) => this.handleExpand(node, e) }, h("span", { class: "x-tree-switcher-icon" }, h("x-icon", { name: getIcon('arrowDown') }))));
+    }
+    /**
+     * Render the checkbox for a node.
+     * @param node - The node to render checkbox for.
+     * @returns JSX.Element
+     */
+    renderCheckbox(node) {
+        if (!this.checkable)
+            return null;
+        if (node.checkable === false)
+            return null;
+        const checked = this.internalCheckedKeys.includes(node.key);
+        const halfChecked = this.halfCheckedKeys.includes(node.key);
+        const disabled = node.disabled || node.disableCheckbox || this.disabled;
+        return (h("span", { class: {
+                'x-tree-checkbox': true,
+                'x-tree-checkbox-checked': checked,
+                'x-tree-checkbox-indeterminate': halfChecked && !checked,
+                'x-tree-checkbox-disabled': disabled,
+            }, onClick: (e) => !disabled && this.handleCheck(node, e) }, h("span", { class: "x-tree-checkbox-inner" })));
+    }
+    /**
+     * Render the node icon.
+     * @param node - The node to render icon for.
+     * @returns JSX.Element
+     */
+    renderIcon(node) {
+        if (!this.showIcon && !node.icon)
+            return null;
+        return (h("span", { class: "x-tree-iconEle" }, node.icon ? h("x-icon", { name: node.icon }) : h("x-icon", { name: getIcon('file') })));
+    }
+    /**
+     * Render a single tree node row.
+     *
+     * Flow:
+     * 1. Determine state (expanded, selected, disabled).
+     * 2. Render indentation.
+     * 3. Render switcher.
+     * 4. Render checkbox.
+     * 5. Render content (icon + title).
+     * @param node - The node to render.
+     * @param level - Indentation level.
+     * @param parentChain - Chain of parent nodes' last child status.
+     * @param isLast - Whether the current node is the last child.
+     * @returns JSX.Element
+     */
+    renderTreeNode(node, level = 0, parentChain = [], isLast = false) {
+        const expanded = this.internalExpandedKeys.includes(node.key);
+        const selected = this.internalSelectedKeys.includes(node.key);
+        const hasChildren = node.children && node.children.length > 0;
+        const isDisabled = node.disabled || this.disabled;
+        return (h("div", { class: {
+                'x-tree-treenode': true,
+                'x-tree-treenode-disabled': isDisabled,
+                'x-tree-treenode-switcher-open': expanded,
+                'x-tree-treenode-switcher-close': !expanded && hasChildren,
+                'x-tree-treenode-selected': selected,
+                'x-tree-treenode-leaf': !hasChildren,
+                'x-tree-treenode-drag-over': this.dragOverNodeKey === node.key,
+                'x-tree-treenode-focused': this.focusedKey === node.key,
+            }, draggable: this.allowDrag && !isDisabled, role: "treeitem", "aria-selected": selected ? 'true' : 'false', "aria-expanded": hasChildren ? (expanded ? 'true' : 'false') : null, "aria-level": level + 1, "aria-disabled": isDisabled ? 'true' : 'false', tabindex: this.focusedKey === node.key ? 0 : -1, onClick: (e) => {
+                this.focusedKey = node.key;
+                // Native click will handle selection
+                console.log(e);
+            }, onKeyDown: (e) => this.handleKeyDown(e), onDragStart: (e) => this.handleDragStart(node, e), onDragEnter: (e) => this.handleDragEnter(node, e), onDragOver: (e) => this.handleDragOver(node, e), onDragLeave: (e) => this.handleDragLeave(node, e), onDragEnd: (e) => this.handleDragEnd(node, e), onDrop: (e) => this.handleDrop(node, e) }, Array.from({ length: level }).map((_, i) => (h("span", { key: `indent-${i}`, class: {
+                'x-tree-indent-unit': true,
+                'x-tree-indent-unit-start': i === 0,
+                'x-tree-indent-unit-end': parentChain[i],
+            } }))), this.renderSwitcher(node, expanded, isLast), this.renderCheckbox(node), h("span", { class: {
+                'x-tree-node-content-wrapper': true,
+                'x-tree-node-content-wrapper-open': expanded,
+                'x-tree-node-content-wrapper-close': !expanded && hasChildren,
+                'x-tree-node-selected': selected,
+            }, onClick: (e) => this.handleSelect(node, e) }, this.renderIcon(node), h("span", { class: "x-tree-title" }, node.title), this.renderActions(node))));
+    }
+    /**
+     * Render custom actions for a tree node.
+     * Actions typically appear on hover or always on the right side.
+     * If an action has children, it renders as a dropdown menu.
+     *
+     * @param node - The node to render actions for.
+     * @returns JSX.Element
+     */
+    renderActions(node) {
+        const actions = node.actions || this.actions;
+        const showActions = node.showActions || this.showActions;
+        if (!actions || actions.length === 0)
+            return null;
+        return (h("span", { class: {
+                'x-tree-actions': true,
+                'x-tree-actions-hover': showActions === 'hover',
+            }, onClick: (e) => e.stopPropagation() }, actions.map(action => {
+            const hasChildren = action.children && action.children.length > 0;
+            const actionContent = (h("span", { class: {
+                    'x-tree-action-item': true,
+                    'x-tree-action-item-disabled': action.disabled,
+                    'x-tree-action-item-danger': action.danger,
+                }, title: action.label, onClick: (e) => {
+                    if (!hasChildren) {
+                        if (!action.disabled) {
+                            this.xAction.emit({ action, node });
+                        }
+                        e.stopPropagation();
+                    }
+                } }, action.icon && h("x-icon", { name: action.icon }), !action.icon && action.label && h("span", null, action.label)));
+            if (hasChildren && !action.disabled) {
+                return (h("x-dropdown", { menu: { items: action.children }, trigger: "click", onXMenuClick: (e) => {
+                        this.xAction.emit({ action: e.detail.item, node });
+                    } }, actionContent));
+            }
+            return actionContent;
+        })));
+    }
+    /**
+     * Recursively render tree nodes.
+     *
+     * Flow:
+     * 1. Iterate through nodes.
+     * 2. Render current node.
+     * 3. If expanded and has children, recursively render children in a container.
+     * @param nodes - List of nodes to render.
+     * @param level - Current indentation level.
+     * @param parentChain - Chain of parent nodes' last child status.
+     * @returns Array of JSX elements.
+     */
+    renderTreeNodes(nodes, level = 0, parentChain = []) {
+        const result = [];
+        // Apply filter if present
+        let visibleNodes = nodes;
+        if (this.filterValue) {
+            visibleNodes = nodes.filter(node => {
+                const matches = this.checkFilter(node);
+                const hasMatchingChild = this.hasMatchingChild(node);
+                return matches || hasMatchingChild;
+            });
+        }
+        visibleNodes.forEach((node, index) => {
+            const isLast = index === visibleNodes.length - 1;
+            const currentChain = [...parentChain, isLast];
+            result.push(this.renderTreeNode(node, level, parentChain, isLast));
+            const expanded = this.internalExpandedKeys.includes(node.key);
+            if (node.children && node.children.length > 0 && expanded) {
+                result.push(h("div", { class: "x-tree-child-tree x-tree-child-tree-open" }, this.renderTreeNodes(node.children, level + 1, currentChain)));
+            }
+        });
+        return result;
+    }
+    /**
+     * Render the tree component.
+     * @returns JSX.Element
+     */
+    render() {
+        let content;
+        if (this.virtual && this.height) {
+            // Use cached flattened nodes
+            const flattened = this.flattenedNodes;
+            const totalHeight = flattened.length * this.itemHeight;
+            const startIndex = Math.max(0, Math.floor(this.scrollTop / this.itemHeight) - 5); // buffer 5
+            const endIndex = Math.min(flattened.length - 1, Math.ceil((this.scrollTop + this.height) / this.itemHeight) + 5 // buffer 5
+            );
+            const visibleItems = flattened.slice(startIndex, endIndex + 1);
+            const offsetY = startIndex * this.itemHeight;
+            content = (h("div", { key: 'df4416972cd0e0909034b5fda7eea292c2f0820c', class: "x-tree-virtual-holder", style: { height: `${this.height}px`, overflow: 'auto', position: 'relative' }, onScroll: this.handleScroll }, h("div", { key: '2d3e1aa6d2190030de99f367684b438745136765', style: { height: `${totalHeight}px`, position: 'relative' } }, h("div", { key: '5e06ecc42b061f269d8bc962279d96469bb4822a', style: {
+                    transform: `translateY(${offsetY}px)`,
+                    position: 'absolute',
+                    top: '0',
+                    left: '0',
+                    right: '0'
+                } }, visibleItems.map(item => this.renderTreeNode(item.node, item.level, item.parentChain, item.isLast))))));
+        }
+        else {
+            content = (h("div", { key: '95e6a1e97b1d9f27a5d201e46ad933705e2fe29b', class: "x-tree-list-holder" }, h("div", { key: 'ba66d45c266bc8ab9e15322eeda386fdfa2fac5c', class: "x-tree-list-holder-inner" }, this.renderTreeNodes(this.treeData))));
+        }
+        return (h(Host, { key: '321dd6c5185aa80c17d6c1a46701aee79101d567', class: {
+                'x-tree': true,
+                'x-tree-show-line': this.showLine,
+                'x-tree-icon-hide': !this.showIcon,
+                'x-tree-block-node': this.blockNode,
+                'x-tree-directory': false,
+            } }, h("div", { key: 'd0dc97d35b527725dc7f991f1742019c76f7944f', class: "x-tree-list", role: "tree" }, content)));
+    }
+    static get watchers() { return {
+        "treeData": [{
+                "watchTreeData": 0
+            }],
+        "expandedKeys": [{
+                "watchExpandedKeys": 0
+            }],
+        "filterValue": [{
+                "watchFilterValue": 0
+            }],
+        "selectedKeys": [{
+                "watchSelectedKeys": 0
+            }],
+        "checkedKeys": [{
+                "watchCheckedKeys": 0
+            }]
+    }; }
+};
+XTree.style = xTreeCss();
+
+export { XBreadcrumb as x_breadcrumb, XBreadcrumbItem as x_breadcrumb_item, XDescriptions as x_descriptions, XImage as x_image, XTree as x_tree };