@xlabs-store/core 0.0.1

package/dist/esm/x-tree-select-dropdown-content.entry.js

@@ -0,0 +1,437 @@
+import { r as registerInstance, c as createEvent, a as getElement, h } from './index-ig_mFsVk.js';
+import { g as getIcon } from './config-BPeosvTA.js';
+
+const treeSelectDropdownContentCss = () => `@charset "UTF-8";:root{--x-color-primary:#1677ff;--x-color-primary-rgb:22, 119, 255;--x-color-primary-contrast:#ffffff;--x-color-primary-contrast-rgb:255, 255, 255;--x-color-primary-shade:#0958d9;--x-color-primary-tint:#4096ff;--x-color-primary-bg:#e6f4ff;--x-color-primary-bg-hover:#bae0ff;--x-color-primary-border:#91caff;--x-color-primary-border-hover:#69b1ff;--x-color-primary-hover:#4096ff;--x-color-primary-active:#0958d9;--x-color-primary-text:#1677ff;--x-color-primary-text-hover:#4096ff;--x-color-primary-text-active:#0958d9;--x-color-secondary:#3dc2ff;--x-color-secondary-rgb:61, 194, 255;--x-color-secondary-contrast:#ffffff;--x-color-secondary-contrast-rgb:255, 255, 255;--x-color-secondary-shade:#36abe0;--x-color-secondary-tint:#50c8ff;--x-color-success:#52c41a;--x-color-success-rgb:82, 196, 26;--x-color-success-contrast:#ffffff;--x-color-success-contrast-rgb:255, 255, 255;--x-color-success-shade:#389e0d;--x-color-success-tint:#73d13d;--x-color-success-bg:#f6ffed;--x-color-success-bg-hover:#d9f7be;--x-color-success-border:#b7eb8f;--x-color-success-border-hover:#95de64;--x-color-success-hover:#73d13d;--x-color-success-active:#389e0d;--x-color-success-text:#52c41a;--x-color-success-text-hover:#73d13d;--x-color-success-text-active:#389e0d;--x-color-warning:#faad14;--x-color-warning-rgb:250, 173, 20;--x-color-warning-contrast:#000000;--x-color-warning-contrast-rgb:0, 0, 0;--x-color-warning-shade:#d48806;--x-color-warning-tint:#ffc53d;--x-color-warning-bg:#fffbe6;--x-color-warning-bg-hover:#fff1b8;--x-color-warning-border:#ffe58f;--x-color-warning-border-hover:#ffd666;--x-color-warning-hover:#ffc53d;--x-color-warning-active:#d48806;--x-color-warning-text:#faad14;--x-color-warning-text-hover:#ffc53d;--x-color-warning-text-active:#d48806;--x-color-danger:#ff4d4f;--x-color-danger-rgb:255, 77, 79;--x-color-danger-contrast:#ffffff;--x-color-danger-contrast-rgb:255, 255, 255;--x-color-danger-shade:#cf1322;--x-color-danger-tint:#ff7875;--x-color-error:#ff4d4f;--x-color-error-rgb:255, 77, 79;--x-color-error-bg:#fff2f0;--x-color-error-bg-hover:#ffccc7;--x-color-error-border:#ffa39e;--x-color-error-border-hover:#ff7875;--x-color-error-hover:#ff7875;--x-color-error-active:#d9363e;--x-color-error-text:#ff4d4f;--x-color-error-text-hover:#ff7875;--x-color-error-text-active:#d9363e;--x-color-info:#1677ff;--x-color-info-rgb:22, 119, 255;--x-color-info-bg:#e6f4ff;--x-color-info-bg-hover:#bae0ff;--x-color-info-border:#91caff;--x-color-info-border-hover:#69b1ff;--x-color-info-hover:#69b1ff;--x-color-info-active:#0958d9;--x-color-info-text:#1677ff;--x-color-info-text-hover:#69b1ff;--x-color-info-text-active:#0958d9;--x-color-text:rgba(0, 0, 0, 0.88);--x-color-text-secondary:rgba(0, 0, 0, 0.65);--x-color-text-tertiary:rgba(0, 0, 0, 0.45);--x-color-text-quaternary:rgba(0, 0, 0, 0.25);--x-color-text-disabled:rgba(0, 0, 0, 0.25);--x-color-text-placeholder:rgba(0, 0, 0, 0.25);--x-color-text-heading:rgba(0, 0, 0, 0.88);--x-color-text-label:rgba(0, 0, 0, 0.65);--x-color-text-description:rgba(0, 0, 0, 0.45);--x-color-text-light-solid:#ffffff;--x-color-bg-container:#ffffff;--x-color-bg-elevated:#ffffff;--x-color-bg-layout:#f5f5f5;--x-color-bg-spotlight:rgba(0, 0, 0, 0.85);--x-color-bg-mask:rgba(0, 0, 0, 0.45);--x-color-bg-base:#ffffff;--x-color-bg-container-disabled:#f5f5f5;--x-color-bg-container-loading:rgba(255, 255, 255, 0.65);--x-color-white:#ffffff;--x-color-fill:rgba(0, 0, 0, 0.15);--x-color-fill-secondary:rgba(0, 0, 0, 0.06);--x-color-fill-tertiary:rgba(0, 0, 0, 0.04);--x-color-fill-quaternary:rgba(0, 0, 0, 0.02);--x-color-border:#d9d9d9;--x-color-border-secondary:#f0f0f0;--x-color-border-bg:#ffffff;--x-color-split:rgba(5, 5, 5, 0.06);--x-color-dark:#222428;--x-color-dark-rgb:34, 36, 40;--x-color-dark-contrast:#ffffff;--x-color-dark-contrast-rgb:255, 255, 255;--x-color-dark-shade:#1e2023;--x-color-dark-tint:#383a3e;--x-color-medium:#92949c;--x-color-medium-rgb:146, 148, 156;--x-color-medium-contrast:#ffffff;--x-color-medium-contrast-rgb:255, 255, 255;--x-color-medium-shade:#808289;--x-color-medium-tint:#9d9fa6;--x-color-light:#f4f5f8;--x-color-light-rgb:244, 245, 248;--x-color-light-contrast:#000000;--x-color-light-contrast-rgb:0, 0, 0;--x-color-light-shade:#d7d8da;--x-color-light-tint:#f5f6f9;--x-font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--x-font-family-code:"SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;--x-font-size:14px;--x-font-size-sm:12px;--x-font-size-lg:16px;--x-font-size-xl:20px;--x-font-size-heading-1:38px;--x-font-size-heading-2:30px;--x-font-size-heading-3:24px;--x-font-size-heading-4:20px;--x-font-size-heading-5:16px;--x-line-height:1.5714285714285714;--x-line-height-lg:1.5;--x-line-height-sm:1.6666666666666667;--x-line-height-heading-1:1.2105263157894737;--x-line-height-heading-2:1.2666666666666666;--x-line-height-heading-3:1.3333333333333333;--x-line-height-heading-4:1.4;--x-line-height-heading-5:1.5;--x-font-weight-normal:400;--x-font-weight-medium:500;--x-font-weight-semibold:600;--x-font-weight-strong:600;--x-font-size-base:14px;--x-font-size-xxl:24px;--x-line-height-base:1.5714285714285714;--x-spacing-xxs:4px;--x-spacing-xs:8px;--x-spacing-sm:12px;--x-spacing-md:16px;--x-spacing-lg:20px;--x-spacing-xl:24px;--x-spacing-xxl:32px;--x-spacing-xxxl:48px;--x-margin-xxs:4px;--x-margin-xs:8px;--x-margin-sm:12px;--x-margin-md:16px;--x-margin-lg:24px;--x-margin-xl:32px;--x-margin-xxl:48px;--x-padding-xxs:4px;--x-padding-xs:8px;--x-padding-sm:12px;--x-padding-md:16px;--x-padding-lg:24px;--x-padding-content-horizontal-lg:24px;--x-padding-content-vertical-lg:12px;--x-padding-content-horizontal:16px;--x-padding-content-vertical:12px;--x-padding-content-horizontal-sm:16px;--x-padding-content-vertical-sm:8px;--x-border-radius:6px;--x-border-radius-xs:2px;--x-border-radius-sm:4px;--x-border-radius-lg:8px;--x-border-radius-xl:12px;--x-border-radius-outer:4px;--x-border-radius-base:6px;--x-border-width:1px;--x-border-width-base:1px;--x-shadow:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-shadow-secondary:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-shadow-tertiary:0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02);--x-shadow-lg:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-secondary:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-tertiary:0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02);--x-box-shadow-popover-arrow:2px 2px 5px rgba(0, 0, 0, 0.05);--x-box-shadow-card:0 1px 2px -2px rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.12), 0 5px 12px 4px rgba(0, 0, 0, 0.09);--x-box-shadow-drawer-right:-6px 0 16px 0 rgba(0, 0, 0, 0.08), -3px 0 6px -4px rgba(0, 0, 0, 0.12), -9px 0 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-drawer-left:6px 0 16px 0 rgba(0, 0, 0, 0.08), 3px 0 6px -4px rgba(0, 0, 0, 0.12), 9px 0 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-drawer-up:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-drawer-down:0 -6px 16px 0 rgba(0, 0, 0, 0.08), 0 -3px 6px -4px rgba(0, 0, 0, 0.12), 0 -9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-tabs-overflow-left:inset 10px 0 8px -8px rgba(0, 0, 0, 0.08);--x-box-shadow-tabs-overflow-right:inset -10px 0 8px -8px rgba(0, 0, 0, 0.08);--x-box-shadow-tabs-overflow-top:inset 0 10px 8px -8px rgba(0, 0, 0, 0.08);--x-box-shadow-tabs-overflow-bottom:inset 0 -10px 8px -8px rgba(0, 0, 0, 0.08);--x-motion-duration-fast:0.1s;--x-motion-duration-mid:0.2s;--x-motion-duration-slow:0.3s;--x-motion-ease-in-out:cubic-bezier(0.645, 0.045, 0.355, 1);--x-motion-ease-out:cubic-bezier(0.215, 0.61, 0.355, 1);--x-motion-ease-in:cubic-bezier(0.55, 0.055, 0.675, 0.19);--x-motion-ease-out-back:cubic-bezier(0.12, 0.4, 0.29, 1.46);--x-motion-ease-in-back:cubic-bezier(0.71, -0.46, 0.88, 0.6);--x-motion-ease-in-out-circle:cubic-bezier(0.78, 0.14, 0.15, 0.86);--x-motion-ease-out-circle:cubic-bezier(0.08, 0.82, 0.17, 1);--x-motion-ease-in-circle:cubic-bezier(0.6, 0.04, 0.98, 0.34);--x-motion-ease-in-quint:cubic-bezier(0.755, 0.05, 0.855, 0.06);--x-motion-ease-out-quint:cubic-bezier(0.23, 1, 0.32, 1);--x-z-index-base:0;--x-z-index-popup-base:1000;--x-z-index-popup:1030;--x-z-index-affix:10;--x-z-index-modal:1000;--x-z-index-modal-mask:1000;--x-z-index-drawer:1000;--x-z-index-popover:1030;--x-z-index-dropdown:1050;--x-z-index-tooltip:1070;--x-z-index-notification:1080;--x-z-index-message:1090;--x-z-index-popconfirm:1060;--x-z-index-table-fixed:10;--x-opacity-loading:0.65;--x-opacity-image:1;--x-opacity-disabled:0.5;--x-control-height:32px;--x-control-height-xs:24px;--x-control-height-sm:24px;--x-control-height-lg:40px;--x-control-radio-size:16px;--x-control-checkbox-size:16px;--x-control-padding-horizontal:12px;--x-control-padding-horizontal-sm:8px;--x-control-outline-width:2px;--x-control-outline:rgba(5, 145, 255, 0.1);--x-control-item-bg-hover:rgba(0, 0, 0, 0.04);--x-control-item-bg-active:#e6f4ff;--x-control-item-bg-active-hover:#bae0ff;--x-control-item-bg-active-disabled:rgba(0, 0, 0, 0.15);--x-control-tmp-outline:rgba(0, 0, 0, 0.02);--x-color-yellow:#fadb14;--x-color-yellow-rgb:250, 219, 20;--x-font-family-base:var(--x-font-family);--x-color-link:#1677ff;--x-color-link-hover:#69b1ff;--x-color-link-active:#0958d9;--x-color-icon:rgba(0, 0, 0, 0.45);--x-color-icon-hover:rgba(0, 0, 0, 0.88);--x-color-highlight:#ff4d4f;--x-color-bg-text-hover:rgba(0, 0, 0, 0.06);--x-color-bg-text-active:rgba(0, 0, 0, 0.15);--x-screen-xs:480px;--x-screen-xs-min:480px;--x-screen-xs-max:575px;--x-screen-sm:576px;--x-screen-sm-min:576px;--x-screen-sm-max:767px;--x-screen-md:768px;--x-screen-md-min:768px;--x-screen-md-max:991px;--x-screen-lg:992px;--x-screen-lg-min:992px;--x-screen-lg-max:1199px;--x-screen-xl:1200px;--x-screen-xl-min:1200px;--x-screen-xl-max:1599px;--x-screen-xxl:1600px;--x-screen-xxl-min:1600px;--x-color-fill-content:rgba(0, 0, 0, 0.06);--x-color-fill-content-hover:rgba(0, 0, 0, 0.15);--x-color-fill-alter:rgba(0, 0, 0, 0.02);--x-scrollbar-width:12px;--x-scrollbar-track-bg:rgba(0, 0, 0, 0.04);--x-scrollbar-thumb-bg:rgba(0, 0, 0, 0.25);--x-scrollbar-thumb-bg-hover:rgba(0, 0, 0, 0.35);--x-menu-dark-bg:#001529;--x-menu-dark-item-bg:#001529;--x-menu-dark-popup-bg:#001529;--x-menu-dark-submenu-item-bg:#000c17}.x-tree-select-dropdown{-webkit-box-sizing:border-box;box-sizing:border-box;margin:0;padding:var(--x-dropdown-padding-block, var(--x-padding-xs, 4px)) var(--x-dropdown-padding-inline, 0);color:var(--x-dropdown-color, var(--x-color-text, rgba(0, 0, 0, 0.88)));font-size:var(--x-dropdown-font-size, var(--x-font-size, 14px));line-height:var(--x-dropdown-line-height, var(--x-line-height, 1.5714285714));list-style:none;font-family:var(--x-dropdown-font-family, var(--x-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"));background:var(--x-dropdown-bg, var(--x-color-bg-elevated, #ffffff));border-radius:var(--x-dropdown-border-radius, var(--x-border-radius-lg, 8px));-webkit-box-shadow:var(--x-dropdown-box-shadow, var(--x-box-shadow-secondary, 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05)));box-shadow:var(--x-dropdown-box-shadow, var(--x-box-shadow-secondary, 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05)));outline:none;background:var(--x-tree-select-dropdown-bg, var(--x-dropdown-bg, var(--x-color-bg-elevated, #ffffff)));border-radius:var(--x-tree-select-dropdown-border-radius, var(--x-dropdown-border-radius, var(--x-border-radius-lg, 8px)));-webkit-box-shadow:var(--x-tree-select-dropdown-shadow, var(--x-dropdown-box-shadow, var(--x-box-shadow-secondary, 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05))));box-shadow:var(--x-tree-select-dropdown-shadow, var(--x-dropdown-box-shadow, var(--x-box-shadow-secondary, 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05))));padding:var(--x-tree-select-dropdown-padding-vertical, var(--x-dropdown-padding-block, var(--x-padding-xs, 4px)));max-height:var(--x-tree-select-dropdown-max-height, 256px);overflow:auto}.x-tree-select-dropdown-hidden{display:none}.x-tree-select-tree{padding:0}.x-tree-select-empty{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;padding:24px 16px;color:rgba(0, 0, 0, 0.25)}.x-tree-select-empty-image{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}.x-tree-select-empty-image svg{width:64px;height:41px}.x-tree-select-empty-description{margin-top:8px;font-size:var(--x-tree-select-font-size, var(--x-dropdown-font-size, var(--x-font-size, 14px)))}.x-tree-treenode{position:relative;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;border-radius:var(--x-dropdown-item-border-radius, var(--x-border-radius-sm, 4px));padding:var(--x-dropdown-item-padding-vertical, var(--x-padding-xxs, 4px)) var(--x-dropdown-item-padding-horizontal, var(--x-padding-sm, 12px));clear:both;margin:0;color:var(--x-dropdown-color, var(--x-color-text, rgba(0, 0, 0, 0.88)));font-weight:normal;font-size:var(--x-dropdown-font-size, var(--x-font-size, 14px));line-height:var(--x-dropdown-line-height, var(--x-line-height, 1.5714285714));cursor:pointer;-webkit-transition:all 0.3s;transition:all 0.3s}.x-tree-treenode:hover{background-color:var(--x-dropdown-item-bg-hover, var(--x-control-item-bg-hover, rgba(0, 0, 0, 0.04)))}.x-tree-treenode:hover{background-color:transparent}.x-tree-treenode:hover:not(.x-tree-treenode-disabled){background-color:var(--x-tree-select-node-hover-bg, var(--x-dropdown-item-bg-hover, var(--x-control-item-bg-hover, rgba(0, 0, 0, 0.04))))}.x-tree-treenode-disabled{color:var(--x-dropdown-item-color-disabled, var(--x-color-text-disabled, rgba(0, 0, 0, 0.25)));cursor:not-allowed}.x-tree-treenode-disabled:hover{background-color:transparent}.x-tree-treenode-selected{background-color:var(--x-dropdown-item-bg-selected, var(--x-control-item-bg-active, #e6f4ff));font-weight:var(--x-dropdown-item-color-selected, var(--x-font-weight-strong, 600));background-color:var(--x-tree-select-node-selected-bg, var(--x-dropdown-item-bg-selected, var(--x-control-item-bg-active, #e6f4ff)));color:var(--x-tree-select-color-primary, var(--x-control-border-color-focus, var(--x-color-primary, #1677ff)))}.x-tree-treenode-selected:hover:not(.x-tree-treenode-disabled){background-color:var(--x-tree-select-node-selected-bg, var(--x-dropdown-item-bg-selected, var(--x-control-item-bg-active, #e6f4ff)))}.x-tree-treenode-checked{background-color:var(--x-tree-select-node-selected-bg, var(--x-dropdown-item-bg-selected, var(--x-control-item-bg-active, #e6f4ff)))}.x-tree-treenode-checked:hover:not(.x-tree-treenode-disabled){background-color:var(--x-tree-select-node-selected-bg, var(--x-dropdown-item-bg-selected, var(--x-control-item-bg-active, #e6f4ff)))}.x-tree-indent{display:-ms-inline-flexbox;display:inline-flex;height:100%;-ms-flex-item-align:stretch;align-self:stretch}.x-tree-indent-unit{display:inline-block;width:24px;height:100%;position:relative}.x-tree-line .x-tree-indent-unit::before{content:"";position:absolute;top:0;right:12px;bottom:0;border-right:1px solid #d9d9d9}.x-tree-line .x-tree-indent-unit:last-child::before{display:none}.x-tree-line .x-tree-indent-unit-end::before{display:none}.x-tree-line .x-tree-treenode-wrapper:last-child>.x-tree-treenode>.x-tree-indent>.x-tree-indent-unit::before{height:50%}.x-tree-line .x-tree-switcher::after{content:"";position:absolute;top:50%;left:-6px;width:6px;height:1px;background:#d9d9d9}.x-tree-switcher{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:24px;height:24px;margin-right:4px;cursor:pointer;color:rgba(0, 0, 0, 0.45);-ms-flex-negative:0;flex-shrink:0;position:relative}.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:10px;-webkit-transition:-webkit-transform 0.3s;transition:-webkit-transform 0.3s;transition:transform 0.3s;transition:transform 0.3s, -webkit-transform 0.3s}.x-tree-switcher-icon svg{width:1em;height:1em}.x-tree-switcher-open .x-tree-switcher-icon{-webkit-transform:rotate(90deg);transform:rotate(90deg)}.x-tree-switcher-close .x-tree-switcher-icon{-webkit-transform:rotate(0deg);transform:rotate(0deg)}.x-tree-switcher-leaf{cursor:default;color:transparent}.x-tree-switcher-leaf .x-tree-switcher-icon{visibility:hidden}.x-tree-switcher-noop{cursor:default}.x-tree-checkbox{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:var(--x-dropdown-checkbox-size, 16px);height:var(--x-dropdown-checkbox-size, 16px);margin-right:8px;border:1px solid var(--x-dropdown-checkbox-border-color, var(--x-color-border, #d9d9d9));border-radius:var(--x-dropdown-checkbox-border-radius, var(--x-border-radius-sm, 4px));background:#fff;-webkit-transition:all 0.2s;transition:all 0.2s;cursor:pointer;-ms-flex-negative:0;flex-shrink:0;position:relative}.x-tree-checkbox-inner{display:block;width:100%;height:100%;position:relative}.x-tree-checkbox-inner::after{content:"";position:absolute;top:50%;left:50%;width:5.7142857143px;height:9.1428571429px;border:2px solid #fff;border-top:0;border-left:0;-webkit-transform:rotate(45deg) scale(0) translate(-50%, -50%);transform:rotate(45deg) scale(0) translate(-50%, -50%);opacity:0;-webkit-transition:all 0.1s cubic-bezier(0.71, -0.46, 0.88, 0.6), opacity 0.1s;transition:all 0.1s cubic-bezier(0.71, -0.46, 0.88, 0.6), opacity 0.1s;-webkit-box-sizing:border-box;box-sizing:border-box}.x-tree-checkbox-checked{background-color:var(--x-dropdown-checkbox-color, var(--x-color-primary, #1677ff));border-color:var(--x-dropdown-checkbox-color, var(--x-color-primary, #1677ff))}.x-tree-checkbox-checked .x-dropdown-checkbox-inner::after{-webkit-transform:translate(-50%, -50%) rotate(45deg) scale(1);transform:translate(-50%, -50%) rotate(45deg) scale(1);opacity:1;position:absolute;top:45%;left:25%}.x-tree-checkbox-indeterminate{background-color:#fff;border-color:#d9d9d9}.x-tree-checkbox-indeterminate .x-dropdown-checkbox-inner::after{display:none}.x-tree-checkbox-indeterminate::after{content:"";width:8px;height:8px;background-color:var(--x-dropdown-checkbox-color, var(--x-color-primary, #1677ff));border-radius:2px;position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%)}.x-tree-checkbox-disabled{cursor:not-allowed;background-color:rgba(0, 0, 0, 0.04);border-color:#d9d9d9}.x-tree-checkbox-disabled.x-dropdown-checkbox-checked{background-color:rgba(0, 0, 0, 0.04);border-color:#d9d9d9}.x-tree-checkbox-disabled.x-dropdown-checkbox-checked .x-dropdown-checkbox-inner::after{border-color:rgba(0, 0, 0, 0.25)}.x-tree-checkbox{width:var(--x-tree-select-checkbox-size, var(--x-dropdown-checkbox-size, 16px));height:var(--x-tree-select-checkbox-size, var(--x-dropdown-checkbox-size, 16px));border-radius:var(--x-tree-select-checkbox-border-radius, var(--x-dropdown-checkbox-border-radius, var(--x-border-radius-sm, 4px)))}.x-tree-checkbox-checked{background:var(--x-tree-select-checkbox-color, var(--x-dropdown-checkbox-color, var(--x-color-primary, #1677ff)));border-color:var(--x-tree-select-checkbox-color, var(--x-dropdown-checkbox-color, var(--x-color-primary, #1677ff)))}.x-tree-checkbox-indeterminate{border-color:var(--x-tree-select-checkbox-color, var(--x-dropdown-checkbox-color, var(--x-color-primary, #1677ff)))}.x-tree-checkbox-indeterminate .x-tree-checkbox-inner::before{content:"";position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);width:8px;height:8px;background:var(--x-tree-select-checkbox-color, var(--x-dropdown-checkbox-color, var(--x-color-primary, #1677ff)));border-radius:2px}.x-tree-node-content-wrapper{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex:1;flex:1;min-width:0;overflow:hidden;cursor:pointer;-webkit-transition:background-color 0.2s;transition:background-color 0.2s;padding:0 4px;border-radius:var(--x-tree-select-node-border-radius, var(--x-dropdown-item-border-radius, var(--x-border-radius-sm, 4px)))}.x-tree-iconEle{margin-right:8px;font-size:12px;min-width:12px;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:24px;height:24px;font-size:14px}.x-tree-title{-ms-flex:1;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.x-tree-title-highlight{color:var(--x-tree-select-color-primary, var(--x-control-border-color-focus, var(--x-color-primary, #1677ff)));font-weight:600}`;
+
+const XTreeSelectDropdownContent = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.xNodeClick = createEvent(this, "xNodeClick", 7);
+        this.xNodeExpand = createEvent(this, "xNodeExpand", 7);
+        this.xNodeCheck = createEvent(this, "xNodeCheck", 7);
+    }
+    get el() { return getElement(this); }
+    // ==================== Props ====================
+    /**
+     * Class map for dropdown wrapper.
+     * @example
+     * <x-tree-select-dropdown-content dropdownClasses={{ 'x-tree-dropdown': true }}></x-tree-select-dropdown-content>
+     */
+    dropdownClasses = {};
+    /**
+     * Inline style map for dropdown wrapper.
+     * @example
+     * <x-tree-select-dropdown-content dropdownStyle={{ width: '240px' }}></x-tree-select-dropdown-content>
+     */
+    dropdownStyle = {};
+    /**
+     * Callback to pass dropdown element ref.
+     * @example
+     * <x-tree-select-dropdown-content setDropdownRef={(el) => console.log(el)}></x-tree-select-dropdown-content>
+     */
+    setDropdownRef;
+    /**
+     * Tree data.
+     * @example
+     * <x-tree-select-dropdown-content treeData={[{ title: 'A', value: 'a' }]}></x-tree-select-dropdown-content>
+     */
+    treeData = [];
+    /**
+     * Currently selected values.
+     * @example
+     * <x-tree-select-dropdown-content selectedValues={['a']}></x-tree-select-dropdown-content>
+     */
+    selectedValues = [];
+    /**
+     * Currently expanded node keys.
+     * @example
+     * <x-tree-select-dropdown-content expandedKeys={['a']}></x-tree-select-dropdown-content>
+     */
+    expandedKeys = [];
+    /**
+     * Checked keys for treeCheckable mode.
+     * @example
+     * <x-tree-select-dropdown-content checkedKeys={['a']}></x-tree-select-dropdown-content>
+     */
+    checkedKeys = [];
+    /**
+     * Half-checked (indeterminate) keys.
+     * @example
+     * <x-tree-select-dropdown-content halfCheckedKeys={['a']}></x-tree-select-dropdown-content>
+     */
+    halfCheckedKeys = [];
+    /**
+     * Whether multiple selection is enabled.
+     * @example
+     * <x-tree-select-dropdown-content multiple></x-tree-select-dropdown-content>
+     */
+    multiple = false;
+    /**
+     * Whether tree nodes are checkable.
+     * @example
+     * <x-tree-select-dropdown-content treeCheckable></x-tree-select-dropdown-content>
+     */
+    treeCheckable = false;
+    /**
+     * Whether to show tree line.
+     * @example
+     * <x-tree-select-dropdown-content treeLine></x-tree-select-dropdown-content>
+     */
+    treeLine = false;
+    /**
+     * Custom field names.
+     * @example
+     * <x-tree-select-dropdown-content fieldNames={{ label: 'name', value: 'id', children: 'nodes' }}></x-tree-select-dropdown-content>
+     */
+    fieldNames = { value: 'value', label: 'label', children: 'children' };
+    /**
+     * Content shown when no data.
+     * @example
+     * <x-tree-select-dropdown-content notFoundContent="Empty"></x-tree-select-dropdown-content>
+     */
+    notFoundContent = 'No data';
+    /**
+     * Search value for highlighting matches.
+     * @example
+     * <x-tree-select-dropdown-content searchValue="ap"></x-tree-select-dropdown-content>
+     */
+    searchValue = '';
+    /**
+     * Custom filter function.
+     * @example
+     * <x-tree-select-dropdown-content filterTreeNode={(v, n) => n.title?.includes(v)}></x-tree-select-dropdown-content>
+     */
+    filterTreeNode;
+    // ==================== Events ====================
+    /**
+     * Emitted when a node is clicked (for selection).
+     * @example
+     * <x-tree-select-dropdown-content onXNodeClick={(ev) => console.log(ev.detail)}></x-tree-select-dropdown-content>
+     */
+    xNodeClick;
+    /**
+     * Emitted when a node is expanded/collapsed.
+     * @example
+     * <x-tree-select-dropdown-content onXNodeExpand={(ev) => console.log(ev.detail)}></x-tree-select-dropdown-content>
+     */
+    xNodeExpand;
+    /**
+     * Emitted when a checkbox is toggled.
+     * @example
+     * <x-tree-select-dropdown-content onXNodeCheck={(ev) => console.log(ev.detail)}></x-tree-select-dropdown-content>
+     */
+    xNodeCheck;
+    // ==================== Refs ====================
+    /**
+     * Dropdown element reference.
+     */
+    dropdownEl = null;
+    // ==================== Lifecycle ====================
+    componentDidLoad() {
+        this.setDropdownRef?.(this.dropdownEl);
+    }
+    disconnectedCallback() {
+        this.setDropdownRef?.(null);
+    }
+    // ==================== Private Methods - Refs ====================
+    /**
+     * Capture dropdown ref and forward to callback.
+     * @param el - Dropdown element.
+     * @returns void
+     */
+    setRef = (el) => {
+        this.dropdownEl = el;
+        this.setDropdownRef?.(el);
+    };
+    // ==================== Private Methods - Field Accessors ====================
+    /**
+     * Get node value using field mapping.
+     * @param node - Tree node.
+     * @returns string
+     */
+    getNodeValue(node) {
+        if (!node)
+            return '';
+        const field = this.fieldNames?.value || 'value';
+        return node[field] ?? node.key ?? '';
+    }
+    /**
+     * Get node title using field mapping.
+     * @param node - Tree node.
+     * @returns string
+     */
+    getNodeTitle(node) {
+        if (!node)
+            return '';
+        const field = this.fieldNames?.label || 'label';
+        return node[field] ?? node.title ?? '';
+    }
+    /**
+     * Get node children using field mapping.
+     * @param node - Tree node.
+     * @returns TreeSelectNode[] | undefined
+     */
+    getNodeChildren(node) {
+        if (!node)
+            return undefined;
+        const field = this.fieldNames?.children || 'children';
+        return node[field];
+    }
+    // ==================== Private Methods - State Checks ====================
+    /**
+     * Check expanded state for node.
+     * @param node - Tree node.
+     * @returns boolean
+     */
+    isNodeExpanded(node) {
+        if (!node)
+            return false;
+        const key = node.key ?? this.getNodeValue(node);
+        return this.expandedKeys?.includes(key) ?? false;
+    }
+    /**
+     * Check selected state for node.
+     * @param node - Tree node.
+     * @returns boolean
+     */
+    isNodeSelected(node) {
+        if (!node)
+            return false;
+        const value = this.getNodeValue(node);
+        return this.selectedValues?.includes(value) ?? false;
+    }
+    /**
+     * Check checked state for node.
+     * @param node - Tree node.
+     * @returns boolean
+     */
+    isNodeChecked(node) {
+        if (!node)
+            return false;
+        const key = node.key ?? this.getNodeValue(node);
+        return this.checkedKeys?.includes(key) ?? false;
+    }
+    /**
+     * Check half-checked state for node.
+     * @param node - Tree node.
+     * @returns boolean
+     */
+    isNodeHalfChecked(node) {
+        if (!node)
+            return false;
+        const key = node.key ?? this.getNodeValue(node);
+        return this.halfCheckedKeys?.includes(key) ?? false;
+    }
+    /**
+     * Check if node has children.
+     * @param node - Tree node.
+     * @returns boolean
+     */
+    hasChildren(node) {
+        if (!node)
+            return false;
+        if (node.isLeaf)
+            return false;
+        const children = this.getNodeChildren(node);
+        return !!children && children.length > 0;
+    }
+    /**
+     * Determine if node matches current filter.
+     * @param node - Tree node.
+     * @returns boolean
+     */
+    matchesFilter(node) {
+        if (!this.searchValue)
+            return true;
+        if (this.filterTreeNode) {
+            return this.filterTreeNode(this.searchValue, node);
+        }
+        const searchLower = this.searchValue.toLowerCase();
+        const title = this.getNodeTitle(node).toLowerCase();
+        return title.includes(searchLower);
+    }
+    /**
+     * Check if any children match filter.
+     * @param node - Tree node.
+     * @returns boolean
+     */
+    hasMatchedChildren(node) {
+        const children = this.getNodeChildren(node);
+        if (!children)
+            return false;
+        return children.some(child => this.matchesFilter(child) || this.hasMatchedChildren(child));
+    }
+    /**
+     * Determine whether node should be shown.
+     * Note: The treeData passed to this component is already filtered by the parent.
+     * We only need to check if we should show based on internal visibility logic,
+     * but for search, we trust the parent's filtering.
+     * @param node - Tree node.
+     * @returns boolean
+     */
+    shouldShowNode(node) {
+        // If treeData is already filtered, we should show everything in it.
+        // However, if we want to support highlighting or other features, we might need to check.
+        // But given the parent handles filtering, we can just return true here.
+        return !!node;
+    }
+    // ==================== Private Methods - Event Handlers ====================
+    /**
+     * Handle node click and emit selection event.
+     * @param node - Tree node.
+     * @param e - Mouse event.
+     * @returns void
+     */
+    handleNodeClick = (node, e) => {
+        e.stopPropagation();
+        if (node.disabled)
+            return;
+        const value = this.getNodeValue(node);
+        this.xNodeClick.emit({ node, value });
+    };
+    /**
+     * Handle node expand/collapse.
+     * @param node - Tree node.
+     * @param e - Mouse event.
+     * @returns void
+     */
+    handleNodeExpand = (node, e) => {
+        e.stopPropagation();
+        const isExpanded = this.isNodeExpanded(node);
+        this.xNodeExpand.emit({ node, expanded: !isExpanded });
+    };
+    /**
+     * Handle node checkbox toggle.
+     * @param node - Tree node.
+     * @param e - Mouse event.
+     * @returns void
+     */
+    handleNodeCheck = (node, e) => {
+        e.stopPropagation();
+        if (node.disabled || node.disableCheckbox)
+            return;
+        const isChecked = this.isNodeChecked(node);
+        this.xNodeCheck.emit({ node, checked: !isChecked });
+    };
+    // ==================== Render Methods ====================
+    /**
+     * Render indentation units for tree node level.
+     * @param level - Tree depth level.
+     * @returns JSX.Element | null
+     */
+    renderIndent(level) {
+        if (level === 0)
+            return null;
+        const indentUnits = [];
+        for (let i = 0; i < level; i++) {
+            indentUnits.push(h("span", { class: "x-tree-indent-unit", key: i }));
+        }
+        return (h("span", { class: "x-tree-indent" }, indentUnits));
+    }
+    /**
+     * Render expand/collapse switcher.
+     * @param node - Tree node.
+     * @returns JSX.Element
+     */
+    renderSwitcher(node) {
+        const hasChildNodes = this.hasChildren(node);
+        const isExpanded = this.isNodeExpanded(node);
+        const switcherClasses = {
+            'x-tree-switcher': true,
+            'x-tree-switcher-open': hasChildNodes && isExpanded,
+            'x-tree-switcher-close': hasChildNodes && !isExpanded,
+            'x-tree-switcher-leaf': !hasChildNodes,
+        };
+        return (h("span", { class: switcherClasses, onClick: (e) => hasChildNodes && this.handleNodeExpand(node, e) }, h("span", { class: "x-tree-switcher-icon" }, h("x-icon", { name: getIcon('arrowRight') }))));
+    }
+    /**
+     * Render checkbox for treeCheckable mode.
+     * @param node - Tree node.
+     * @returns JSX.Element
+     */
+    renderCheckbox(node) {
+        const isChecked = this.isNodeChecked(node);
+        const isHalfChecked = this.isNodeHalfChecked(node);
+        const isDisabled = node.disabled || node.disableCheckbox;
+        const checkboxClasses = {
+            'x-tree-checkbox': true,
+            'x-tree-checkbox-checked': isChecked,
+            'x-tree-checkbox-indeterminate': !isChecked && isHalfChecked,
+            'x-tree-checkbox-disabled': isDisabled,
+        };
+        return (h("span", { class: checkboxClasses, onClick: (e) => this.handleNodeCheck(node, e) }, h("span", { class: "x-tree-checkbox-inner" })));
+    }
+    /**
+     * Render node title and optional icon.
+     * @param node - Tree node.
+     * @returns JSX.Element
+     */
+    renderNodeContent(node) {
+        const title = this.getNodeTitle(node);
+        return (h("span", { class: "x-tree-node-content-wrapper" }, node.icon && (h("span", { class: "x-tree-iconEle", innerHTML: node.icon })), h("span", { class: "x-tree-title" }, title)));
+    }
+    /**
+     * Render a tree node and its children.
+     * @param node - Tree node.
+     * @param level - Depth level.
+     * @returns JSX.Element | null
+     */
+    renderTreeNode(node, level) {
+        if (!node)
+            return null;
+        if (!this.shouldShowNode(node))
+            return null;
+        const isExpanded = this.isNodeExpanded(node);
+        const isSelected = this.isNodeSelected(node);
+        const isChecked = this.isNodeChecked(node);
+        const hasChildNodes = this.hasChildren(node);
+        const children = this.getNodeChildren(node);
+        const nodeKey = node.key ?? this.getNodeValue(node);
+        const nodeClasses = {
+            'x-tree-treenode': true,
+            'x-tree-treenode-disabled': !!node.disabled,
+            'x-tree-treenode-selected': !this.treeCheckable && isSelected,
+            'x-tree-treenode-checked': this.treeCheckable && isChecked,
+        };
+        return (h("div", { class: "x-tree-treenode-wrapper", key: nodeKey }, h("div", { class: nodeClasses, onClick: (e) => !this.treeCheckable && this.handleNodeClick(node, e) }, this.renderIndent(level), this.renderSwitcher(node), this.treeCheckable && this.renderCheckbox(node), this.renderNodeContent(node)), hasChildNodes && isExpanded && children && (h("div", { class: "x-tree-child-tree" }, children.map(child => this.renderTreeNode(child, level + 1))))));
+    }
+    /**
+     * Render tree nodes recursively.
+     * @param nodes - Node list.
+     * @param level - Depth level.
+     * @returns Array<JSX.Element | null>
+     */
+    renderTree(nodes, level = 0) {
+        if (!nodes || !Array.isArray(nodes))
+            return [];
+        return nodes
+            .filter(node => node != null)
+            .map(node => this.renderTreeNode(node, level))
+            .filter(Boolean);
+    }
+    /**
+     * Render empty state when no data matches.
+     * @returns JSX.Element
+     */
+    renderEmpty() {
+        return (h("div", { class: "x-tree-select-empty" }, h("div", { class: "x-tree-select-empty-image" }, h("svg", { viewBox: "0 0 64 41" }, h("g", { transform: "translate(0 1)", fill: "none", "fill-rule": "evenodd" }, h("ellipse", { fill: "#f5f5f5", cx: "32", cy: "33", rx: "32", ry: "7" }), h("g", { "fill-rule": "nonzero", stroke: "#d9d9d9" }, h("path", { d: "M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z" }), h("path", { d: "M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z", fill: "#fafafa" }))))), h("div", { class: "x-tree-select-empty-description" }, this.notFoundContent)));
+    }
+    /**
+     * Render dropdown tree content.
+     * @returns JSX.Element
+     * @example
+     * <x-tree-select-dropdown-content treeData={[{ title: 'A', value: 'a' }]}></x-tree-select-dropdown-content>
+     */
+    render() {
+        const hasData = this.treeData && this.treeData.length > 0;
+        const hasVisibleData = hasData && this.treeData.some(node => this.shouldShowNode(node));
+        const treeClasses = {
+            'x-tree-select-tree': true,
+            'x-tree-line': this.treeLine,
+        };
+        return (h("div", { key: 'baab5dc7e243c61b783e67cd5452279720c25feb', class: this.dropdownClasses, style: this.dropdownStyle, ref: this.setRef, part: "dropdown" }, !hasVisibleData ? (this.renderEmpty()) : (h("div", { class: treeClasses }, this.renderTree(this.treeData)))));
+    }
+};
+XTreeSelectDropdownContent.style = treeSelectDropdownContentCss();
+
+export { XTreeSelectDropdownContent as x_tree_select_dropdown_content };

package/dist/esm/x-virtual-scroll.entry.js

@@ -0,0 +1,201 @@
+import { r as registerInstance, a as getElement, h, H as Host } from './index-ig_mFsVk.js';
+
+const xVirtualScrollCss = () => `:host{display:block;-webkit-box-sizing:border-box;box-sizing:border-box;font-family:var(--x-font-family)}.x-virtual-scroll-host{display:block;width:100%}.x-virtual-scroll-container{background:var(--x-color-bg-base, #ffffff);border:var(--x-border-width-base, 1px) var(--x-virtual-scroll-border-style, solid) var(--x-color-border, #d9d9d9);border-radius:var(--x-border-radius-base, 8px);-webkit-box-sizing:border-box;box-sizing:border-box;}.x-virtual-scroll-container::-webkit-scrollbar{width:8px}.x-virtual-scroll-container::-webkit-scrollbar-track{background:transparent}.x-virtual-scroll-container::-webkit-scrollbar-thumb{background:rgba(0, 0, 0, 0.2);border-radius:4px}.x-virtual-scroll-container::-webkit-scrollbar-thumb:hover{background:rgba(0, 0, 0, 0.3)}.x-virtual-scroll-container{scrollbar-width:thin;scrollbar-color:rgba(0, 0, 0, 0.2) transparent}.x-virtual-scroll-spacer{width:100%}.x-virtual-scroll-items{will-change:transform}.x-virtual-scroll-item{-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;padding:var(--x-padding-xs, 8px) var(--x-padding-md, 12px);-webkit-transition:background-color 0.3s ease;transition:background-color 0.3s ease;border-bottom:1px solid var(--x-color-split, rgba(5, 5, 5, 0.06))}.x-virtual-scroll-item:last-child{border-bottom:none}.x-virtual-scroll-item.x-virtual-scroll-item-hoverable:hover{background:var(--x-color-background-hover, #fafafa)}.x-virtual-scroll-item.selected{background:var(--x-color-primary-contrast, #e6f4ff)}.x-virtual-scroll-item-default{width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}`;
+
+const XVirtualScroll = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    get el() { return getElement(this); }
+    /**
+     * Array of items to render.
+     * @example
+     * <x-virtual-scroll items={[{ name: 'A' }]}></x-virtual-scroll>
+     */
+    items = [];
+    /**
+     * Height of each item in pixels.
+     * @example
+     * <x-virtual-scroll itemHeight={48}></x-virtual-scroll>
+     */
+    itemHeight = 40;
+    /**
+     * Container height in pixels.
+     * @example
+     * <x-virtual-scroll height={300}></x-virtual-scroll>
+     */
+    height = 300;
+    /**
+     * Number of items to render outside viewport (buffer).
+     * @example
+     * <x-virtual-scroll overscan={8}></x-virtual-scroll>
+     */
+    overscan = 5;
+    /**
+     * Width of the container.
+     * @example
+     * <x-virtual-scroll width="100%"></x-virtual-scroll>
+     */
+    width = '100%';
+    /**
+     * Custom CSS class for items.
+     * @example
+     * <x-virtual-scroll itemClass="my-item"></x-virtual-scroll>
+     */
+    itemClass = '';
+    /**
+     * Enable hover effect on items.
+     * @example
+     * <x-virtual-scroll hoverable={false}></x-virtual-scroll>
+     */
+    hoverable = true;
+    /**
+     * Current scroll offset in pixels.
+     */
+    scrollTop = 0;
+    /**
+     * Visible item range derived from scroll position.
+     */
+    visibleRange = { start: 0, end: 0 };
+    /**
+     * Scroll container reference.
+     */
+    scrollContainerRef;
+    /**
+     * Initialize visible range before render.
+     * @returns void
+     * @example
+     * <x-virtual-scroll></x-virtual-scroll>
+     */
+    componentWillLoad() {
+        this.updateVisibleRange();
+    }
+    updateVisibleRange() {
+        const { scrollTop, itemHeight, height, overscan, items } = this;
+        const totalItems = items.length;
+        // Calculate which items should be visible
+        const startIndex = Math.max(0, Math.floor(scrollTop / itemHeight) - overscan);
+        const endIndex = Math.min(totalItems - 1, Math.ceil((scrollTop + height) / itemHeight) + overscan);
+        this.visibleRange = {
+            start: startIndex,
+            end: endIndex,
+        };
+    }
+    /**
+     * Handle scroll event and update scrollTop state.
+     * @param event - Scroll event from container.
+     * @returns void
+     * @example
+     * <x-virtual-scroll></x-virtual-scroll>
+     */
+    handleScroll = (event) => {
+        const target = event.target;
+        this.scrollTop = target.scrollTop;
+    };
+    /**
+     * Scroll to specific index.
+     * @param index - Item index to scroll to.
+     * @param behavior - Scroll behavior.
+     * @returns Promise<void>
+     * @example
+     * await el.scrollToIndex(10, 'smooth')
+     */
+    async scrollToIndex(index, behavior = 'smooth') {
+        if (this.scrollContainerRef && index >= 0 && index < this.items.length) {
+            const scrollTop = index * this.itemHeight;
+            this.scrollContainerRef.scrollTo({
+                top: scrollTop,
+                behavior,
+            });
+        }
+    }
+    /**
+     * Get current scroll position.
+     * @returns Promise<number>
+     * @example
+     * const top = await el.getScrollTop()
+     */
+    async getScrollTop() {
+        return this.scrollTop;
+    }
+    /**
+     * Get visible range.
+     * @returns Promise<{ start: number; end: number }>
+     * @example
+     * const range = await el.getVisibleRange()
+     */
+    async getVisibleRange() {
+        return this.visibleRange;
+    }
+    /**
+     * Render the virtualized list with a spacer and visible window.
+     *
+     * Flow:
+     * 1. Calculates `totalHeight` of the list (items * itemHeight) to set the scrollable area.
+     * 2. Calculates `offsetY` (start index * itemHeight) to position the visible slice correctly.
+     * 3. Slices the `items` array to get only the `visibleItems` based on `visibleRange`.
+     * 4. Renders:
+     *    - Host element with specified width.
+     *    - Container div with `overflow: auto` and explicit height.
+     *    - Spacer div with `totalHeight` to force the scrollbar.
+     *    - Items container div positioned absolutely with `translateY(offsetY)` to simulate position.
+     *    - Map of `visibleItems` to render content (using slot or default text).
+     *
+     * @returns JSX.Element
+     * @example
+     * <x-virtual-scroll items={[1,2,3]}></x-virtual-scroll>
+     */
+    render() {
+        const { items, itemHeight, height, width, visibleRange, itemClass, hoverable } = this;
+        const totalHeight = items.length * itemHeight;
+        const offsetY = visibleRange.start * itemHeight;
+        // Get visible items
+        const visibleItems = items.slice(visibleRange.start, visibleRange.end + 1);
+        return (h(Host, { key: 'd717a359fa4fa3037a75f1363aacbb4dcea2ccaa', class: "x-virtual-scroll-host", style: {
+                width: width,
+            } }, h("div", { key: 'ff88b01940db972a4685e7ac349a61ba338bc860', class: "x-virtual-scroll-container", style: {
+                height: `${height}px`,
+                overflow: 'auto',
+                position: 'relative',
+            }, onScroll: this.handleScroll, ref: (el) => (this.scrollContainerRef = el) }, h("div", { key: '7d32d8c277a41209eadf6ae8d260396972c84a6f', class: "x-virtual-scroll-spacer", style: {
+                height: `${totalHeight}px`,
+                position: 'relative',
+            } }, h("div", { key: 'a582f1e5d2b6da550ab4c4af630dfdff8b1c6a5d', class: "x-virtual-scroll-items", style: {
+                transform: `translateY(${offsetY}px)`,
+                position: 'absolute',
+                top: '0',
+                left: '0',
+                right: '0',
+            } }, visibleItems.map((item, index) => {
+            const actualIndex = visibleRange.start + index;
+            return (h("div", { class: {
+                    'x-virtual-scroll-item': true,
+                    'x-virtual-scroll-item-hoverable': hoverable,
+                    [itemClass]: !!itemClass,
+                }, style: {
+                    height: `${itemHeight}px`,
+                    overflow: 'hidden',
+                }, key: actualIndex, "data-index": actualIndex }, h("slot", { name: `item-${actualIndex}` }, h("div", { class: "x-virtual-scroll-item-default" }, typeof item === 'string' ? item : JSON.stringify(item)))));
+        }))))));
+    }
+    static get watchers() { return {
+        "scrollTop": [{
+                "updateVisibleRange": 0
+            }],
+        "items": [{
+                "updateVisibleRange": 0
+            }],
+        "itemHeight": [{
+                "updateVisibleRange": 0
+            }],
+        "height": [{
+                "updateVisibleRange": 0
+            }],
+        "overscan": [{
+                "updateVisibleRange": 0
+            }]
+    }; }
+};
+XVirtualScroll.style = xVirtualScrollCss();
+
+export { XVirtualScroll as x_virtual_scroll };