@xlabs-store/core 0.0.1 → 0.0.2

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

@@ -1,1313 +0,0 @@
-import { r as registerInstance, c as createEvent, a as getElement, h, H as Host } from './index-ig_mFsVk.js';
-import { t as translate } from './locale.service-D66tF8_2.js';
-import { P as PortalController } from './portal-controller-COpzIi1n.js';
-import { g as getIcon } from './config-BPeosvTA.js';
-
-/**
- * X-Select Types
- *
- * Export all types and interfaces for x-select component
- */
-/** Type guard to check if an option is an OptionGroup */
-function isOptionGroup(option) {
-    return 'options' in option && Array.isArray(option.options);
-}
-
-const xSelectCss = () => `@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;width:100%;position:relative;font-family:inherit;-webkit-box-sizing:border-box;box-sizing:border-box}:host *,:host *::before,:host *::after{-webkit-box-sizing:border-box;box-sizing:border-box}.x-select-wrapper{position:relative;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;width:100%}.x-select-selector{position:relative;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;width:100%;min-width:0;padding:0 var(--x-control-padding-horizontal, var(--x-spacing-md, 12px));min-height:var(--x-control-height, var(--x-size-control-height, 32px));background-color:var(--x-control-bg, var(--x-color-bg-container, #ffffff));border:var(--x-control-border-width, var(--x-border-width-base, 1px)) solid var(--x-control-border-color, var(--x-color-border, #d9d9d9));border-radius:var(--x-control-border-radius, var(--x-border-radius-base, 6px));-webkit-transition:all 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);transition:all 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);-webkit-box-sizing:border-box;box-sizing:border-box}.x-select-selector:hover:not(.disabled):not([disabled]):not([class*=-disabled]){border-color:var(--x-control-border-color-hover, var(--x-color-primary-hover, #4096ff))}.x-select-selector{-ms-flex-wrap:wrap;flex-wrap:wrap;padding-right:calc(var(--x-select-padding-horizontal, var(--x-control-padding-horizontal, var(--x-spacing-md, 12px))) + 18px);cursor:pointer;overflow:hidden}:host(.x-select-focused) .x-select-selector,:host(.x-select-open) .x-select-selector{border-color:var(--x-select-border-color-focus, var(--x-control-border-color-focus, var(--x-color-primary, #1677ff))) !important;-webkit-box-shadow:var(--x-select-focus-shadow, 0 0 0 2px rgba(22, 119, 255, 0.1));box-shadow:var(--x-select-focus-shadow, 0 0 0 2px rgba(22, 119, 255, 0.1))}:host(.x-select-disabled) .x-select-selector.disabled,:host(.x-select-disabled) .x-select-selector[disabled],:host(.x-select-disabled) .x-select-selector[class*=-disabled]{background-color:var(--x-control-bg-disabled, var(--x-color-bg-container-disabled, rgba(0, 0, 0, 0.04)));border-color:var(--x-control-border-color-disabled, var(--x-color-border, #d9d9d9));color:var(--x-control-color-disabled, var(--x-color-text-disabled, rgba(0, 0, 0, 0.25)));cursor:not-allowed}:host(.x-select-disabled) .x-select-selector.disabled:hover,:host(.x-select-disabled) .x-select-selector[disabled]:hover,:host(.x-select-disabled) .x-select-selector[class*=-disabled]:hover{border-color:var(--x-control-border-color-disabled, var(--x-color-border, #d9d9d9)) !important}:host(.x-select-disabled) .x-select-selector:hover{border-color:var(--x-select-border-color-disabled, var(--x-control-border-color-disabled, var(--x-color-border, #d9d9d9)))}:host(.x-select-disabled) .x-select-arrow{color:var(--x-select-color-disabled, var(--x-control-color-disabled, var(--x-color-text-disabled, rgba(0, 0, 0, 0.25))))}:host(.x-select-borderless) .x-select-selector{background-color:transparent;border-color:transparent;-webkit-box-shadow:none;box-shadow:none}:host(.x-select-borderless) .x-select-selector:hover{border-color:transparent}:host(.x-select-borderless) .x-select-selector.focused,:host(.x-select-borderless) .x-select-selector:focus-within{border-color:transparent;-webkit-box-shadow:none;box-shadow:none}:host(.x-select-status-error) .x-select-selector{border-color:var(--x-control-border-color-error, var(--x-color-error, #ff4d4f))}:host(.x-select-status-error) .x-select-selector:hover:not(.disabled):not([disabled]){border-color:var(--x-control-border-color-error-hover, var(--x-color-error-hover, #ff7875))}:host(.x-select-status-error) .x-select-selector.focused,:host(.x-select-status-error) .x-select-selector:focus-within{border-color:var(--x-control-border-color-error, var(--x-color-error, #ff4d4f));-webkit-box-shadow:0 0 0 3px var(--x-control-focus-shadow-error-color, var(--x-color-error-bg, rgba(255, 38, 5, 0.06)));box-shadow:0 0 0 3px var(--x-control-focus-shadow-error-color, var(--x-color-error-bg, rgba(255, 38, 5, 0.06)))}:host(.x-select-status-error.x-select-focused) .x-select-selector,:host(.x-select-status-error.x-select-open) .x-select-selector{-webkit-box-shadow:0 0 0 2px rgba(255, 77, 79, 0.1);box-shadow:0 0 0 2px rgba(255, 77, 79, 0.1)}:host(.x-select-status-warning) .x-select-selector{border-color:var(--x-control-border-color-warning, var(--x-color-warning, #faad14))}:host(.x-select-status-warning) .x-select-selector:hover:not(.disabled):not([disabled]){border-color:var(--x-control-border-color-warning-hover, var(--x-color-warning-hover, #ffc53d))}:host(.x-select-status-warning) .x-select-selector.focused,:host(.x-select-status-warning) .x-select-selector:focus-within{border-color:var(--x-control-border-color-warning, var(--x-color-warning, #faad14));-webkit-box-shadow:0 0 0 3px var(--x-control-focus-shadow-warning-color, var(--x-color-warning-bg, rgba(255, 215, 5, 0.1)));box-shadow:0 0 0 3px var(--x-control-focus-shadow-warning-color, var(--x-color-warning-bg, rgba(255, 215, 5, 0.1)))}:host(.x-select-status-warning.x-select-focused) .x-select-selector,:host(.x-select-status-warning.x-select-open) .x-select-selector{-webkit-box-shadow:0 0 0 2px rgba(250, 173, 20, 0.1);box-shadow:0 0 0 2px rgba(250, 173, 20, 0.1)}:host(.x-select-small) .x-select-selector{min-height:var(--x-control-height-sm, var(--x-size-control-height-sm, 24px));padding:0 var(--x-control-padding-horizontal-sm, var(--x-spacing-sm, 8px));font-size:var(--x-control-font-size-sm, var(--x-font-size-sm, 12px))}:host(.x-select-small) .x-select-selector input,:host(.x-select-small) .x-select-selector textarea{line-height:calc(var(--x-control-height-sm, var(--x-size-control-height-sm, 24px)) - 2px)}:host(.x-select-small) .x-select-selector{padding-right:calc(var(--x-select-padding-horizontal-sm, var(--x-control-padding-horizontal-sm, var(--x-spacing-sm, 8px))) + 14px)}:host(.x-select-large) .x-select-selector{min-height:var(--x-control-height-lg, var(--x-size-control-height-lg, 40px));padding:0 var(--x-control-padding-horizontal, var(--x-spacing-md, 12px));font-size:var(--x-control-font-size-lg, var(--x-font-size-lg, 16px))}:host(.x-select-large) .x-select-selector input,:host(.x-select-large) .x-select-selector textarea{line-height:calc(var(--x-control-height-lg, var(--x-size-control-height-lg, 40px)) - 2px)}:host(.x-select-large) .x-select-selector{padding-right:calc(var(--x-select-padding-horizontal-lg, var(--x-control-padding-horizontal, var(--x-spacing-md, 12px))) + 20px)}.x-select-selection-item{-ms-flex:1;flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;line-height:calc(var(--x-select-height, var(--x-control-height, var(--x-size-control-height, 32px))) - 2px);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;pointer-events:none}:host(.x-select-small) .x-select-selection-item{line-height:calc(var(--x-select-height-sm, var(--x-control-height-sm, var(--x-size-control-height-sm, 24px))) - 2px)}:host(.x-select-large) .x-select-selection-item{line-height:calc(var(--x-select-height-lg, var(--x-control-height-lg, var(--x-size-control-height-lg, 40px))) - 2px)}.x-select-selection-placeholder{position:absolute;top:50%;right:30px;left:var(--x-select-padding-horizontal, var(--x-control-padding-horizontal, var(--x-spacing-md, 12px)));-webkit-transform:translateY(-50%);transform:translateY(-50%);color:var(--x-select-placeholder-color, var(--x-control-placeholder-color, var(--x-color-text-placeholder, rgba(0, 0, 0, 0.25))));pointer-events:none;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;-webkit-transition:all var(--x-select-motion-duration, var(--x-motion-duration-mid, 0.2s));transition:all var(--x-select-motion-duration, var(--x-motion-duration-mid, 0.2s))}:host(.x-select-small) .x-select-selection-placeholder{left:var(--x-select-padding-horizontal-sm, var(--x-control-padding-horizontal-sm, var(--x-spacing-sm, 8px)))}:host(.x-select-large) .x-select-selection-placeholder{left:var(--x-select-padding-horizontal-lg, var(--x-control-padding-horizontal, var(--x-spacing-md, 12px)))}.x-select-selection-search{position:relative;width:100%;max-width:100%}.x-select-selection-search-input{width:100%;height:100%;min-width:4px;padding:0;margin:0;background:transparent;border:none;outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;color:inherit;font-size:inherit;font-family:inherit;cursor:inherit}.x-select-selection-search-input::-webkit-search-cancel-button{display:none}.x-select-selection-search-mirror{position:absolute;top:0;left:0;z-index:999;white-space:pre;visibility:hidden;pointer-events:none}:host(.x-select-single) .x-select-selection-search{position:absolute;top:0;right:30px;bottom:0;left:var(--x-select-padding-horizontal, var(--x-control-padding-horizontal, var(--x-spacing-md, 12px)))}:host(.x-select-single) .x-select-selection-search-input{width:100%;height:100%}:host(.x-select-single:not(.x-select-show-search)) .x-select-selection-search-input{cursor:pointer}.x-select-selection-overflow{position:relative;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;width:100%;max-width:100%;padding-right:24px}:host(.x-select-multiple) .x-select-selector{padding:1px 4px;padding-right:calc(var(--x-select-padding-horizontal, var(--x-control-padding-horizontal, var(--x-spacing-md, 12px))) + 18px)}:host(.x-select-multiple) .x-select-selection-item{position:relative;display:-ms-flexbox;display:flex;-ms-flex:none;flex:none;-ms-flex-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;max-width:100%;height:var(--x-select-tag-height, 24px);margin-top:2px;margin-bottom:2px;margin-right:4px;padding:0 4px 0 8px;line-height:calc(var(--x-select-tag-height, 24px) - 2px);background:var(--x-select-tag-bg, var(--x-color-fill-quaternary, rgba(0, 0, 0, 0.02)));border:1px solid var(--x-select-tag-border-color, var(--x-color-border-secondary, #f0f0f0));border-radius:var(--x-select-tag-border-radius, var(--x-border-radius-sm, 4px));cursor:default;-webkit-transition:all var(--x-select-motion-duration, var(--x-motion-duration-mid, 0.2s));transition:all var(--x-select-motion-duration, var(--x-motion-duration-mid, 0.2s));-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;pointer-events:auto}:host(.x-select-multiple) .x-select-selection-item-content{display:inline-block;margin-right:4px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;max-width:100%}:host(.x-select-multiple) .x-select-selection-item-remove{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;color:var(--x-select-icon-color, var(--x-color-text-quaternary, rgba(0, 0, 0, 0.25)));font-size:10px;line-height:1;cursor:pointer;-webkit-transition:color var(--x-select-motion-duration, var(--x-motion-duration-mid, 0.2s));transition:color var(--x-select-motion-duration, var(--x-motion-duration-mid, 0.2s))}:host(.x-select-multiple) .x-select-selection-item-remove:hover{color:var(--x-select-icon-color-hover, var(--x-color-text-secondary, rgba(0, 0, 0, 0.45)))}:host(.x-select-multiple) .x-select-selection-item-rest{padding-right:8px;background:transparent;border:none}:host(.x-select-multiple) .x-select-selection-item-rest .x-select-selection-item-content{margin-right:0;color:var(--x-select-color, var(--x-control-color, var(--x-color-text, rgba(0, 0, 0, 0.88))))}:host(.x-select-multiple) .x-select-selection-search{position:relative;max-width:100%;margin-top:2px;margin-bottom:2px;-webkit-margin-start:0;margin-inline-start:0;padding:0;-ms-flex:1;flex:1;min-width:4px}:host(.x-select-multiple) .x-select-selection-search-input{width:100%;min-width:4px;height:calc(var(--x-select-tag-height, 24px) - 2px)}:host(.x-select-multiple) .x-select-selection-placeholder{position:absolute;left:8px}.x-select-suffix{position:absolute;top:50%;right:var(--x-select-padding-horizontal, var(--x-control-padding-horizontal, var(--x-spacing-md, 12px)));-webkit-transform:translateY(-50%);transform:translateY(-50%);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:4px;pointer-events:none}:host(.x-select-small) .x-select-suffix{right:var(--x-select-padding-horizontal-sm, var(--x-control-padding-horizontal-sm, var(--x-spacing-sm, 8px)))}:host(.x-select-large) .x-select-suffix{right:var(--x-select-padding-horizontal-lg, var(--x-control-padding-horizontal, var(--x-spacing-md, 12px)))}.x-select-arrow{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;height:12px;color:var(--x-select-icon-color, var(--x-color-text-quaternary, rgba(0, 0, 0, 0.25)));font-size:12px;line-height:1;text-align:center;pointer-events:none;-webkit-transition:-webkit-transform var(--x-select-motion-duration, var(--x-motion-duration-mid, 0.2s));transition:-webkit-transform var(--x-select-motion-duration, var(--x-motion-duration-mid, 0.2s));transition:transform var(--x-select-motion-duration, var(--x-motion-duration-mid, 0.2s));transition:transform var(--x-select-motion-duration, var(--x-motion-duration-mid, 0.2s)), -webkit-transform var(--x-select-motion-duration, var(--x-motion-duration-mid, 0.2s))}.x-select-arrow-open{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.x-select-arrow-loading{display:-ms-inline-flexbox;display:inline-flex}.x-select-clear{display:none;-ms-flex-align:center;align-items:center;color:var(--x-select-icon-color, var(--x-color-text-quaternary, rgba(0, 0, 0, 0.25)));font-size:12px;cursor:pointer;pointer-events:auto;-webkit-transition:color var(--x-select-motion-duration, var(--x-motion-duration-mid, 0.2s));transition:color var(--x-select-motion-duration, var(--x-motion-duration-mid, 0.2s))}.x-select-clear:hover{color:var(--x-select-icon-color-hover, var(--x-color-text-secondary, rgba(0, 0, 0, 0.45)))}:host(.x-select-allow-clear) .x-select-wrapper:hover .x-select-clear,:host(.x-select-allow-clear.x-select-focused) .x-select-clear{display:-ms-flexbox;display:flex}.x-select-dropdown{position:relative;z-index:var(--x-select-dropdown-z-index, var(--x-z-index-dropdown, 1050));min-width:100%;max-height:256px;padding:var(--x-select-dropdown-padding, var(--x-spacing-xxs, 4px)) 0;overflow:hidden;background-color:var(--x-select-dropdown-bg, var(--x-color-bg-elevated, #ffffff));border-radius:var(--x-select-dropdown-border-radius, var(--x-border-radius-lg, 8px));-webkit-box-shadow:var(--x-select-dropdown-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));box-shadow:var(--x-select-dropdown-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));outline:none;opacity:1;-webkit-transition:opacity var(--x-select-motion-duration, var(--x-motion-duration-mid, 0.2s)), -webkit-transform var(--x-select-motion-duration, var(--x-motion-duration-mid, 0.2s));transition:opacity var(--x-select-motion-duration, var(--x-motion-duration-mid, 0.2s)), -webkit-transform var(--x-select-motion-duration, var(--x-motion-duration-mid, 0.2s));transition:opacity var(--x-select-motion-duration, var(--x-motion-duration-mid, 0.2s)), transform var(--x-select-motion-duration, var(--x-motion-duration-mid, 0.2s));transition:opacity var(--x-select-motion-duration, var(--x-motion-duration-mid, 0.2s)), transform var(--x-select-motion-duration, var(--x-motion-duration-mid, 0.2s)), -webkit-transform var(--x-select-motion-duration, var(--x-motion-duration-mid, 0.2s))}.x-select-dropdown-hidden{opacity:0;-webkit-transform:scaleY(0.8);transform:scaleY(0.8);pointer-events:none}.x-select-dropdown-content{overflow-y:auto;overflow-anchor:none}.x-select-dropdown-placement-bottom,.x-select-dropdown-placement-bottomLeft,.x-select-dropdown-placement-bottomRight{-webkit-transform-origin:top center;transform-origin:top center}.x-select-dropdown-placement-top,.x-select-dropdown-placement-topLeft,.x-select-dropdown-placement-topRight{-webkit-transform-origin:bottom center;transform-origin:bottom center}.x-select-item-empty{display:block;min-height:32px;padding:5px 12px;color:var(--x-select-placeholder-color, var(--x-control-placeholder-color, var(--x-color-text-placeholder, rgba(0, 0, 0, 0.25))));font-size:var(--x-select-font-size, var(--x-control-font-size, var(--x-font-size-base, 14px)));line-height:22px;text-align:center}.x-select-option-group{padding:0}.x-select-option-group:not(:first-child){margin-top:4px;padding-top:4px;border-top:1px solid rgba(0, 0, 0, 0.06)}.x-select-option-group-label{padding:4px 12px 4px 12px;color:rgba(0, 0, 0, 0.45);font-size:12px;font-weight:600;line-height:1.5;cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.x-select-option-in-group{padding-left:24px !important}.x-select-option{position:relative;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;min-height:32px;padding:5px 12px;color:var(--x-color-text, rgba(0, 0, 0, 0.88));font-weight:400;font-size:14px;line-height:22px;cursor:pointer;-webkit-transition:background 0.3s ease;transition:background 0.3s ease}.x-select-option:hover:not(.x-select-option-disabled){background-color:rgba(0, 0, 0, 0.04)}.x-select-option-content{-ms-flex:1;flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.x-select-option-state{-ms-flex:none;flex:none;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;margin-left:8px;color:var(--x-color-primary, #1677ff);font-size:12px}.x-select-option-selected{font-weight:600;background-color:#e6f4ff}.x-select-option-selected:hover{background-color:#e6f4ff}.x-select-option-active:not(.x-select-option-disabled){background-color:rgba(0, 0, 0, 0.04)}.x-select-option-disabled{color:var(--x-color-text-disabled, rgba(0, 0, 0, 0.25));cursor:not-allowed}.x-select-option-disabled:hover{background-color:transparent}::slotted(x-select-option){display:-ms-flexbox;display:flex}::slotted(x-select-option[hidden]){display:none !important}`;
-
-const XSelect = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.xChange = createEvent(this, "xChange", 7);
-        this.xSearch = createEvent(this, "xSearch", 7);
-        this.xDropdownVisibleChange = createEvent(this, "xDropdownVisibleChange", 7);
-        this.xBlur = createEvent(this, "xBlur", 7);
-        this.xFocus = createEvent(this, "xFocus", 7);
-        this.xClear = createEvent(this, "xClear", 7);
-        this.xDeselect = createEvent(this, "xDeselect", 7);
-        this.xSelect = createEvent(this, "xSelect", 7);
-    }
-    get el() { return getElement(this); }
-    // ==================== Props ====================
-    /**
-     * Whether the select is disabled.
-     * @example
-     * <x-select disabled></x-select>
-     */
-    disabled = false;
-    /**
-     * The mode of select: 'multiple' | 'tags' | undefined (single).
-     * @example
-     * <x-select mode="multiple"></x-select>
-     */
-    mode;
-    /**
-     * Whether to show the clear button.
-     * @example
-     * <x-select allowClear></x-select>
-     */
-    allowClear = false;
-    /**
-     * Whether to show search input.
-     * @example
-     * <x-select showSearch></x-select>
-     */
-    showSearch = false;
-    /**
-     * Placeholder text.
-     * @example
-     * <x-select placeholder="Choose one"></x-select>
-     */
-    placeholder = translate('Select.placeholder', {}, 'Please select');
-    /**
-     * Size of select: 'large' | 'middle' | 'small'.
-     * @example
-     * <x-select size="small"></x-select>
-     */
-    size = 'middle';
-    /**
-     * Current selected value.
-     * @example
-     * <x-select value="a"></x-select>
-     */
-    value;
-    /**
-     * Default selected value.
-     * @example
-     * <x-select defaultValue="a"></x-select>
-     */
-    defaultValue;
-    /**
-     * Whether dropdown is open (controlled).
-     * @example
-     * <x-select open></x-select>
-     */
-    open = false;
-    /**
-     * Whether to show loading spinner.
-     * @example
-     * <x-select loading></x-select>
-     */
-    loading = false;
-    /**
-     * Maximum number of tags to display in multiple mode.
-     * @example
-     * <x-select mode="multiple" maxTagCount={2}></x-select>
-     */
-    maxTagCount;
-    /**
-     * Placeholder for hidden tags.
-     * @example
-     * <x-select mode="multiple" maxTagPlaceholder="+ more"></x-select>
-     */
-    maxTagPlaceholder;
-    /**
-     * Maximum length of tag text to display.
-     * @example
-     * <x-select mode="multiple" maxTagTextLength={8}></x-select>
-     */
-    maxTagTextLength;
-    /**
-     * Whether to show border.
-     * @example
-     * <x-select bordered={false}></x-select>
-     */
-    bordered = true;
-    /**
-     * Validation status: 'error' | 'warning'.
-     * @example
-     * <x-select status="error"></x-select>
-     */
-    status;
-    /**
-     * Dropdown placement.
-     * @example
-     * <x-select placement="bottomRight"></x-select>
-     */
-    placement = 'bottomLeft';
-    /**
-     * Whether to include label in value object.
-     * @example
-     * <x-select labelInValue></x-select>
-     */
-    labelInValue = false;
-    /**
-     * Custom filter function for search.
-     * @example
-     * <x-select filterOption={(input, opt) => opt.label.startsWith(input)}></x-select>
-     */
-    filterOption = true;
-    /**
-     * Sort function for filtered options.
-     * @example
-     * <x-select filterSort={(a, b) => a.label.localeCompare(b.label)}></x-select>
-     */
-    filterSort;
-    /**
-     * Text to show when no options match search.
-     * @example
-     * <x-select notFoundContent="Empty"></x-select>
-     */
-    notFoundContent = translate('Select.notFoundContent', {}, 'No data');
-    /**
-     * Whether auto focus on mount.
-     * @example
-     * <x-select autofocus></x-select>
-     */
-    autofocus = false;
-    /**
-     * ID for the input element.
-     * @example
-     * <x-select inputId="country"></x-select>
-     */
-    inputId;
-    /**
-     * Name attribute for form.
-     * @example
-     * <x-select name="country"></x-select>
-     */
-    name;
-    /**
-     * Trigger actions to open dropdown.
-     * @example
-     * <x-select showAction={['click','focus']}></x-select>
-     */
-    showAction = ['click'];
-    /**
-     * Custom dropdown class.
-     * @example
-     * <x-select dropdownClassName="my-select-dropdown"></x-select>
-     */
-    dropdownClassName;
-    /**
-     * Custom dropdown style.
-     * @example
-     * <x-select dropdownStyle={{ minWidth: '240px' }}></x-select>
-     */
-    dropdownStyle;
-    /**
-     * Whether dropdown matches selector width.
-     * @example
-     * <x-select dropdownMatchSelectWidth={false}></x-select>
-     */
-    dropdownMatchSelectWidth = true;
-    /**
-     * Height of dropdown list.
-     * @example
-     * <x-select listHeight={300}></x-select>
-     */
-    listHeight = 256;
-    /**
-     * Number of items to render initially and per scroll.
-     * @example
-     * <x-select pageSize={50}></x-select>
-     */
-    pageSize = 100;
-    /**
-     * Options data, use this instead of x-select-option children. Supports SelectOption and OptionGroup.
-     * @example
-     * <x-select options={[{ value: 'a', label: 'A' }]}></x-select>
-     */
-    options;
-    // ==================== Events ====================
-    /**
-     * Emitted when value changes.
-     * @example
-     * <x-select onXChange={(ev) => console.log(ev.detail)}></x-select>
-     */
-    xChange;
-    /**
-     * Emitted when search value changes.
-     * @example
-     * <x-select onXSearch={(ev) => console.log(ev.detail)}></x-select>
-     */
-    xSearch;
-    /**
-     * Emitted when dropdown opens/closes.
-     * @example
-     * <x-select onXDropdownVisibleChange={(ev) => console.log(ev.detail)}></x-select>
-     */
-    xDropdownVisibleChange;
-    /**
-     * Emitted on blur.
-     * @example
-     * <x-select onXBlur={(ev) => console.log(ev)}></x-select>
-     */
-    xBlur;
-    /**
-     * Emitted on focus.
-     * @example
-     * <x-select onXFocus={(ev) => console.log(ev)}></x-select>
-     */
-    xFocus;
-    /**
-     * Emitted when clear button is clicked.
-     * @example
-     * <x-select onXClear={() => {}}></x-select>
-     */
-    xClear;
-    /**
-     * Emitted when a tag is removed.
-     * @example
-     * <x-select onXDeselect={(ev) => console.log(ev.detail)}></x-select>
-     */
-    xDeselect;
-    /**
-     * Emitted when an option is selected.
-     * @example
-     * <x-select onXSelect={(ev) => console.log(ev.detail)}></x-select>
-     */
-    xSelect;
-    // ==================== State ====================
-    /**
-     * Current search input value.
-     */
-    searchValue = '';
-    /**
-     * Selected options state.
-     */
-    selectedOptions = [];
-    /**
-     * Focus state.
-     */
-    focused = false;
-    /**
-     * Active option index for keyboard navigation.
-     */
-    activeIndex = -1;
-    /**
-     * Flattened internal options.
-     */
-    internalOptions = [];
-    /**
-     * Visible option count for incremental rendering.
-     */
-    visibleCount = 100;
-    // ==================== Refs ====================
-    /**
-     * Input element reference.
-     */
-    inputRef;
-    /**
-     * Dropdown content wrapper reference.
-     */
-    dropdownRef;
-    /**
-     * Mutation observer for slotted options.
-     */
-    mutationObserver;
-    /**
-     * Portal instance for dropdown.
-     */
-    portalInstance = null;
-    /**
-     * Dropdown element reference.
-     */
-    dropdownEl = null;
-    // ==================== Computed ====================
-    /**
-     * Whether current mode is multiple or tags.
-     * @returns boolean
-     */
-    get isMultiple() {
-        return this.mode === 'multiple' || this.mode === 'tags';
-    }
-    /**
-     * Whether any value is selected.
-     * @returns boolean
-     */
-    get hasValue() {
-        return this.selectedOptions.length > 0;
-    }
-    /**
-     * Options filtered by search input and filterOption.
-     * @returns SelectOption[]
-     */
-    get filteredOptions() {
-        if (!this.showSearch || !this.searchValue) {
-            return this.internalOptions;
-        }
-        return this.internalOptions.filter((opt) => {
-            if (this.filterOption === false)
-                return true;
-            const search = this.searchValue.toLowerCase();
-            if (typeof this.filterOption === 'function') {
-                return this.filterOption(this.searchValue, opt);
-            }
-            return opt.label.toLowerCase().includes(search);
-        });
-    }
-    // ==================== Lifecycle ====================
-    /**
-     * Start observing slot changes for options.
-     * @returns void
-     */
-    connectedCallback() {
-        this.mutationObserver = new MutationObserver(() => {
-            this.syncOptionsFromSlot();
-        });
-        this.mutationObserver.observe(this.el, { childList: true, subtree: true });
-    }
-    /**
-     * Initialize value and options before render.
-     * @returns void
-     */
-    componentWillLoad() {
-        if (this.value === undefined && this.defaultValue !== undefined) {
-            this.value = this.defaultValue;
-        }
-        this.syncOptionsFromSlot();
-        this.syncSelectedFromValue();
-        this.visibleCount = this.pageSize;
-    }
-    /**
-     * Auto focus on mount when enabled.
-     * @returns void
-     */
-    componentDidLoad() {
-        if (this.autofocus && !this.disabled) {
-            this.setFocus();
-        }
-    }
-    /**
-     * Update portal after render.
-     * @returns void
-     */
-    componentDidRender() {
-        this.updatePortal();
-    }
-    /**
-     * Cleanup observer and portal on disconnect.
-     * @returns void
-     */
-    disconnectedCallback() {
-        this.mutationObserver?.disconnect();
-        this.destroyPortal();
-    }
-    // ==================== Watchers ====================
-    /**
-     * Sync selected options when value changes.
-     * @returns void
-     */
-    onValueChange() {
-        this.syncSelectedFromValue();
-    }
-    /**
-     * Handle open state changes.
-     * @param isOpen - Open state.
-     * @returns void
-     */
-    onOpenChange(isOpen) {
-        this.xDropdownVisibleChange.emit(isOpen);
-        if (isOpen) {
-            this.activeIndex = this.getInitialActiveIndex();
-            this.syncOptionsFromSlot();
-            this.visibleCount = this.pageSize;
-        }
-        else {
-            this.searchValue = '';
-            this.activeIndex = -1;
-        }
-    }
-    /**
-     * Sync options when options prop changes.
-     * @returns void
-     */
-    onOptionsChange() {
-        this.syncOptionsFromSlot();
-        this.syncSelectedFromValue();
-    }
-    // ==================== Listeners ====================
-    /**
-     * Close dropdown when clicking outside.
-     * @param ev - Mouse event.
-     * @returns void
-     */
-    handleWindowClick(ev) {
-        if (!this.open)
-            return;
-        const path = ev.composedPath();
-        const isInsideComponent = path.includes(this.el);
-        const portalEl = this.portalInstance?.getElement();
-        const isInsidePortal = portalEl ? path.includes(portalEl) : false;
-        // Also check if click is on the portal container itself (optional but good for safety)
-        const isPortalContainer = ev.target?.closest('.x-portal-container');
-        if (!isInsideComponent && !isInsidePortal && !isPortalContainer) {
-            this.closeDropdown();
-        }
-    }
-    /**
-     * Handle keyboard navigation and selection.
-     * @param ev - Keyboard event.
-     * @returns void
-     */
-    handleKeydown(ev) {
-        if (this.disabled)
-            return;
-        const options = this.filteredOptions;
-        switch (ev.key) {
-            case 'ArrowDown':
-                ev.preventDefault();
-                this.handleArrowDown(options);
-                break;
-            case 'ArrowUp':
-                ev.preventDefault();
-                this.handleArrowUp(options);
-                break;
-            case 'Enter':
-                ev.preventDefault();
-                this.handleEnter(options);
-                break;
-            case 'Escape':
-                ev.preventDefault();
-                this.closeDropdown();
-                break;
-            case 'Backspace':
-                this.handleBackspace();
-                break;
-            case 'Tab':
-                if (this.open) {
-                    this.closeDropdown();
-                }
-                break;
-            case 'Home':
-                if (this.open) {
-                    ev.preventDefault();
-                    this.activeIndex = 0;
-                }
-                break;
-            case 'End':
-                if (this.open) {
-                    ev.preventDefault();
-                    this.activeIndex = options.length - 1;
-                }
-                break;
-        }
-    }
-    // ==================== Public Methods ====================
-    /**
-     * Focus the select input.
-     * @returns Promise<void>
-     * @example
-     * await el.setFocus()
-     */
-    async setFocus() {
-        this.inputRef?.focus();
-    }
-    /**
-     * Blur the select input.
-     * @returns Promise<void>
-     * @example
-     * await el.setBlur()
-     */
-    async setBlur() {
-        this.inputRef?.blur();
-    }
-    // ==================== Private Methods ====================
-    /**
-     * Flattens the options array, extracting options from OptionGroups.
-     * This creates a single list of options for easier navigation and filtering.
-     *
-     * @param options - The mixed list of options and option groups.
-     * @returns SelectOption[] - A flat list of all selectable options.
-     */
-    flattenOptions(options) {
-        const result = [];
-        for (const opt of options) {
-            if (isOptionGroup(opt)) {
-                // Add all options from the group
-                result.push(...opt.options);
-            }
-            else {
-                result.push(opt);
-            }
-        }
-        return result;
-    }
-    /**
-     * Synchronizes internal options state from either the `options` prop or slotted `x-select-option` elements.
-     * Priority is given to the `options` prop.
-     *
-     * Flow:
-     * 1. If `options` prop exists, flatten and use it.
-     * 2. If not, query for `x-select-option` elements in the slot.
-     * 3. Map elements to `SelectOption` objects, extracting value, label, and disabled state.
-     */
-    syncOptionsFromSlot() {
-        // If options prop is provided, flatten and use it
-        if (this.options && this.options.length > 0) {
-            this.internalOptions = this.flattenOptions(this.options);
-            return;
-        }
-        // Otherwise, sync from slot children
-        const optionElements = Array.from(this.el.querySelectorAll('x-select-option'));
-        this.internalOptions = optionElements.map((opt) => ({
-            value: opt.value,
-            label: opt.label || opt.textContent?.trim() || String(opt.value),
-            disabled: opt.disabled,
-        }));
-    }
-    /**
-     * Synchronizes `selectedOptions` state based on the current `value` prop.
-     * Handles both single and multiple selection modes, as well as `labelInValue` format.
-     *
-     * Flow:
-     * 1. If `value` is undefined/null, clear selection.
-     * 2. If `labelInValue` is true, map the object(s) directly to selected options.
-     * 3. If `labelInValue` is false, find the corresponding options from `internalOptions` using the value.
-     *    - If option found, use its label.
-     *    - If not found, fallback to string representation of value.
-     */
-    syncSelectedFromValue() {
-        if (this.value === undefined || this.value === null) {
-            this.selectedOptions = [];
-            return;
-        }
-        if (this.labelInValue) {
-            if (this.isMultiple) {
-                const vals = (Array.isArray(this.value) ? this.value : [this.value]);
-                this.selectedOptions = vals.map((v) => ({
-                    value: v.value,
-                    label: v.label,
-                }));
-            }
-            else {
-                const val = this.value;
-                this.selectedOptions = [{ value: val.value, label: val.label }];
-            }
-        }
-        else {
-            if (this.isMultiple) {
-                const vals = (Array.isArray(this.value) ? this.value : []);
-                this.selectedOptions = vals.map((v) => {
-                    const opt = this.internalOptions.find((o) => o.value === v);
-                    return { value: v, label: opt?.label || String(v) };
-                });
-            }
-            else {
-                const v = this.value;
-                const opt = this.internalOptions.find((o) => o.value === v);
-                this.selectedOptions = opt
-                    ? [{ value: opt.value, label: opt.label }]
-                    : [{ value: v, label: String(v) }];
-            }
-        }
-    }
-    /**
-     * Determines the initial active index for the dropdown.
-     *
-     * Flow:
-     * 1. If there is a selected option, find its index in the filtered options.
-     * 2. If no selection, find the first non-disabled option.
-     *
-     * @returns number - The index of the option to highlight.
-     */
-    getInitialActiveIndex() {
-        const options = this.filteredOptions;
-        if (this.selectedOptions.length > 0) {
-            const selectedValue = this.selectedOptions[0].value;
-            const index = options.findIndex((o) => o.value === selectedValue);
-            if (index >= 0)
-                return index;
-        }
-        return options.findIndex((o) => !o.disabled);
-    }
-    /**
-     * Opens the dropdown menu.
-     *
-     * Flow:
-     * 1. Checks if disabled or already open.
-     * 2. Sets `open` state to true.
-     * 3. Calculates initial active index.
-     * 4. Focuses the input element.
-     */
-    openDropdown() {
-        if (this.disabled || this.open)
-            return;
-        this.open = true;
-        this.activeIndex = this.getInitialActiveIndex();
-        requestAnimationFrame(() => {
-            this.inputRef?.focus();
-        });
-    }
-    /**
-     * Closes the dropdown menu.
-     * Resets search value and active index.
-     */
-    closeDropdown() {
-        if (!this.open)
-            return;
-        this.open = false;
-        this.searchValue = '';
-        this.activeIndex = -1;
-    }
-    /**
-     * Toggles the dropdown open/closed state.
-     */
-    toggleDropdown() {
-        if (this.disabled)
-            return;
-        if (this.open) {
-            this.closeDropdown();
-        }
-        else {
-            this.openDropdown();
-        }
-    }
-    /**
-     * Handles the selection of an option.
-     *
-     * Flow:
-     * 1. Checks if option is disabled.
-     * 2. If multiple mode:
-     *    - Checks if already selected.
-     *    - If yes, deselects it.
-     *    - If no, adds to selection and emits change.
-     *    - Clears search but keeps dropdown open and input focused.
-     * 3. If single mode:
-     *    - Sets selection to just this option.
-     *    - Emits change.
-     *    - Closes dropdown.
-     *
-     * @param option - The option being selected.
-     */
-    selectOption(option) {
-        if (option.disabled)
-            return;
-        if (this.isMultiple) {
-            const exists = this.selectedOptions.some((o) => o.value === option.value);
-            if (exists) {
-                this.deselectOption(option);
-            }
-            else {
-                this.selectedOptions = [...this.selectedOptions, option];
-                this.emitChange();
-                this.xSelect.emit(option);
-            }
-            this.searchValue = '';
-            this.inputRef?.focus();
-        }
-        else {
-            this.selectedOptions = [option];
-            this.emitChange();
-            this.xSelect.emit(option);
-            this.closeDropdown();
-        }
-    }
-    /**
-     * Removes an option from the selection.
-     *
-     * Flow:
-     * 1. Filters out the option from `selectedOptions`.
-     * 2. Emits change event.
-     * 3. Emits `xDeselect` event.
-     *
-     * @param option - The option to remove.
-     */
-    deselectOption(option) {
-        this.selectedOptions = this.selectedOptions.filter((o) => o.value !== option.value);
-        this.emitChange();
-        this.xDeselect.emit(option);
-    }
-    /**
-     * Emits the `xChange` event with the current value.
-     * Normalizes the value format based on `labelInValue` and mode (single/multiple).
-     */
-    emitChange() {
-        let emitValue;
-        let emitOption;
-        if (this.isMultiple) {
-            emitOption = this.selectedOptions;
-            emitValue = this.labelInValue
-                ? this.selectedOptions.map((o) => ({ value: o.value, label: o.label }))
-                : this.selectedOptions.map((o) => o.value);
-        }
-        else {
-            const opt = this.selectedOptions[0];
-            emitOption = opt;
-            emitValue = this.labelInValue
-                ? opt ? { value: opt.value, label: opt.label } : undefined
-                : opt?.value;
-        }
-        this.value = emitValue;
-        this.xChange.emit({ value: emitValue, option: emitOption });
-    }
-    // ==================== Keyboard Handlers ====================
-    /**
-     * Handles ArrowDown key press.
-     * Moves active focus to the next non-disabled option.
-     * Opens dropdown if closed.
-     *
-     * @param options - The list of currently visible options.
-     */
-    handleArrowDown(options) {
-        if (!this.open) {
-            this.openDropdown();
-            return;
-        }
-        let nextIndex = this.activeIndex + 1;
-        while (nextIndex < options.length && options[nextIndex]?.disabled) {
-            nextIndex++;
-        }
-        if (nextIndex < options.length) {
-            this.activeIndex = nextIndex;
-            this.scrollToActiveOption();
-        }
-    }
-    /**
-     * Handles ArrowUp key press.
-     * Moves active focus to the previous non-disabled option.
-     * Opens dropdown if closed.
-     *
-     * @param options - The list of currently visible options.
-     */
-    handleArrowUp(options) {
-        if (!this.open) {
-            this.openDropdown();
-            return;
-        }
-        let prevIndex = this.activeIndex - 1;
-        while (prevIndex >= 0 && options[prevIndex]?.disabled) {
-            prevIndex--;
-        }
-        if (prevIndex >= 0) {
-            this.activeIndex = prevIndex;
-            this.scrollToActiveOption();
-        }
-    }
-    /**
-     * Handles Enter key press.
-     * Selects the currently active option if open.
-     * Opens dropdown if closed.
-     *
-     * @param options - The list of currently visible options.
-     */
-    handleEnter(options) {
-        if (this.open && this.activeIndex >= 0 && options[this.activeIndex]) {
-            this.selectOption(options[this.activeIndex]);
-        }
-        else if (!this.open) {
-            this.openDropdown();
-        }
-    }
-    /**
-     * Handles Backspace key press.
-     * Removes the last selected tag if in multiple mode and search input is empty.
-     */
-    handleBackspace() {
-        if (this.isMultiple && !this.searchValue && this.selectedOptions.length > 0) {
-            const lastOption = this.selectedOptions[this.selectedOptions.length - 1];
-            this.deselectOption(lastOption);
-        }
-    }
-    /**
-     * Scrolls the dropdown to ensure the active option is visible.
-     */
-    scrollToActiveOption() {
-        if (!this.dropdownRef || this.activeIndex < 0)
-            return;
-        const items = this.dropdownRef.querySelectorAll('.x-select-option');
-        const activeItem = items[this.activeIndex];
-        if (activeItem) {
-            activeItem.scrollIntoView({ block: 'nearest' });
-        }
-    }
-    // ==================== Event Handlers ====================
-    /**
-     * Handles click on the main selector element.
-     * Toggles dropdown if trigger includes 'click'.
-     */
-    handleSelectorClick = (e) => {
-        e.preventDefault();
-        if (this.showAction.includes('click')) {
-            this.toggleDropdown();
-        }
-        this.inputRef?.focus();
-    };
-    /**
-     * Handles focus event on the input.
-     * Opens dropdown if trigger includes 'focus'.
-     */
-    handleInputFocus = (e) => {
-        this.focused = true;
-        this.xFocus.emit(e);
-        if (this.showAction.includes('focus')) {
-            this.openDropdown();
-        }
-    };
-    /**
-     * Handles blur event on the input.
-     * Delays blur processing to allow for clicks on dropdown items.
-     */
-    handleInputBlur = (e) => {
-        setTimeout(() => {
-            if (!this.el.contains(document.activeElement)) {
-                this.focused = false;
-                this.xBlur.emit(e);
-            }
-        }, 150);
-    };
-    /**
-     * Handles input changes for search functionality.
-     * Updates search value, resets active index to 0, and opens dropdown.
-     */
-    handleSearchInput = (e) => {
-        const target = e.target;
-        this.searchValue = target.value;
-        this.xSearch.emit(this.searchValue);
-        if (!this.open) {
-            this.openDropdown();
-        }
-        this.activeIndex = 0;
-    };
-    /**
-     * Handles click on the clear icon.
-     * Clears selection and search value.
-     */
-    handleClear = (e) => {
-        e.stopPropagation();
-        e.preventDefault();
-        this.selectedOptions = [];
-        this.value = this.isMultiple ? [] : undefined;
-        this.emitChange();
-        this.xClear.emit();
-    };
-    /**
-     * Handles click on a tag's remove icon (multiple mode).
-     * Deselects the specific option associated with the tag.
-     */
-    handleTagRemove = (e, option) => {
-        e.stopPropagation();
-        e.preventDefault();
-        this.deselectOption(option);
-    };
-    /**
-     * Handles click on an option in the dropdown.
-     * Selects the clicked option.
-     */
-    handleOptionClick = (option) => {
-        if (!option.disabled) {
-            this.selectOption(option);
-        }
-    };
-    /**
-     * Handles scroll event on the dropdown content.
-     * Implements infinite/lazy loading by checking if scroll is near bottom.
-     * Increases `visibleCount` to render more options.
-     */
-    handleDropdownScroll = (e) => {
-        const target = e.target;
-        const threshold = 20; // px from bottom
-        if (target.scrollTop + target.clientHeight >= target.scrollHeight - threshold) {
-            if (this.visibleCount < this.filteredOptions.length) {
-                this.visibleCount += this.pageSize;
-            }
-        }
-    };
-    // ==================== Portal Methods ====================
-    /**
-     * Builds the dropdown DOM structure for the portal.
-     *
-     * Flow:
-     * 1. Creates or reuses `x-select-dropdown-content` element.
-     * 2. Calculates width (match select or fixed).
-     * 3. Sets classes and styles.
-     * 4. Renders options (handling groups if present) or "Not Found" state.
-     * 5. Attaches scroll listener for lazy loading.
-     *
-     * @returns HTMLElement - The constructed dropdown element.
-     */
-    buildDropdownElement() {
-        if (!this.dropdownEl) {
-            this.dropdownEl = document.createElement('x-select-dropdown-content');
-            this.dropdownEl.setDropdownRef = (el) => {
-                this.dropdownRef = el || undefined;
-            };
-        }
-        const dropdownEl = this.dropdownEl;
-        const options = this.filteredOptions;
-        const hasOptions = options.length > 0;
-        // Calculate width - use wrapper element for full width
-        let width;
-        if (typeof this.dropdownMatchSelectWidth === 'number') {
-            width = `${this.dropdownMatchSelectWidth}px`;
-        }
-        else if (this.dropdownMatchSelectWidth) {
-            const wrapperEl = this.getWrapperEl();
-            if (wrapperEl) {
-                width = `${wrapperEl.offsetWidth}px`;
-            }
-        }
-        // Set classes
-        const classes = {
-            'x-select-dropdown': true,
-            'x-select-dropdown-hidden': !this.open,
-            [`x-select-dropdown-placement-${this.placement}`]: true,
-            [this.dropdownClassName || '']: !!this.dropdownClassName,
-        };
-        // Set styles
-        const styles = {
-            ...this.dropdownStyle,
-            ...(width ? { width } : {}),
-        };
-        dropdownEl.dropdownClasses = classes;
-        dropdownEl.dropdownStyle = styles;
-        // Build content
-        let contentWrapper = dropdownEl.querySelector('.x-select-dropdown-content');
-        if (!contentWrapper) {
-            contentWrapper = document.createElement('div');
-            contentWrapper.className = 'x-select-dropdown-content';
-            contentWrapper.style.maxHeight = `${this.listHeight}px`;
-            contentWrapper.style.overflowY = 'auto';
-            dropdownEl.appendChild(contentWrapper);
-        }
-        // Preserve scroll position
-        const scrollTop = contentWrapper.scrollTop;
-        // Clear content
-        contentWrapper.innerHTML = '';
-        // Listen for scroll for lazy loading
-        contentWrapper.removeEventListener('scroll', this.handleDropdownScroll);
-        contentWrapper.addEventListener('scroll', this.handleDropdownScroll);
-        if (!hasOptions) {
-            const emptyDiv = document.createElement('div');
-            emptyDiv.className = 'x-select-item-empty';
-            emptyDiv.textContent = this.notFoundContent;
-            contentWrapper.appendChild(emptyDiv);
-        }
-        else {
-            // Check if we have option groups
-            if (this.options && this.options.some(isOptionGroup)) {
-                this.renderOptionsWithGroups(contentWrapper, options.slice(0, this.visibleCount));
-            }
-            else {
-                options.slice(0, this.visibleCount).forEach((option, index) => {
-                    const optionEl = this.createOptionElement(option, index);
-                    contentWrapper.appendChild(optionEl);
-                });
-            }
-        }
-        // Restore scroll position
-        if (scrollTop > 0) {
-            contentWrapper.scrollTop = scrollTop;
-        }
-        return dropdownEl;
-    }
-    /**
-     * Creates a single option DOM element.
-     *
-     * Flow:
-     * 1. Determines state (selected, active, disabled).
-     * 2. Sets ARIA attributes.
-     * 3. Renders label content.
-     * 4. If selected, renders a checkmark icon.
-     * 5. Attaches click listener.
-     *
-     * @param option - The option data.
-     * @param index - The index of the option.
-     * @returns HTMLElement - The option element.
-     */
-    createOptionElement(option, index) {
-        const isSelected = this.selectedOptions.some((o) => o.value === option.value);
-        const isActive = index === this.activeIndex;
-        const optionEl = document.createElement('div');
-        optionEl.className = [
-            'x-select-option',
-            isSelected ? 'x-select-option-selected' : '',
-            isActive ? 'x-select-option-active' : '',
-            option.disabled ? 'x-select-option-disabled' : '',
-        ].filter(Boolean).join(' ');
-        optionEl.setAttribute('role', 'option');
-        optionEl.setAttribute('aria-selected', String(isSelected));
-        optionEl.setAttribute('aria-disabled', String(!!option.disabled));
-        // Content
-        const contentSpan = document.createElement('span');
-        contentSpan.className = 'x-select-option-content';
-        contentSpan.textContent = option.label;
-        optionEl.appendChild(contentSpan);
-        // Selected icon
-        if (isSelected) {
-            const iconSpan = document.createElement('span');
-            iconSpan.className = 'x-select-option-state';
-            iconSpan.innerHTML = `
-        <svg viewBox="64 64 896 896" width="1em" height="1em" fill="currentColor">
-          <path d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 00-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"/>
-        </svg>
-      `;
-            optionEl.appendChild(iconSpan);
-        }
-        // Click handler
-        optionEl.addEventListener('click', (e) => {
-            e.preventDefault();
-            e.stopPropagation();
-            this.handleOptionClick(option);
-        });
-        return optionEl;
-    }
-    /**
-     * Renders options respecting OptionGroup structure.
-     * Iterates through groups and options, creating headers and items.
-     *
-     * @param container - The container to append elements to.
-     * @param filteredOptions - The flat list of filtered options to verify visibility.
-     */
-    renderOptionsWithGroups(container, filteredOptions) {
-        if (!this.options)
-            return;
-        let globalIndex = 0;
-        for (const opt of this.options) {
-            if (isOptionGroup(opt)) {
-                // Render group header
-                const groupEl = document.createElement('div');
-                groupEl.className = 'x-select-option-group';
-                const groupLabel = document.createElement('div');
-                groupLabel.className = 'x-select-option-group-label';
-                groupLabel.textContent = opt.label;
-                groupEl.appendChild(groupLabel);
-                // Render group options
-                for (const groupOption of opt.options) {
-                    // Check if this option is in filtered list
-                    const isFiltered = filteredOptions.some(fo => fo.value === groupOption.value);
-                    if (!isFiltered)
-                        continue;
-                    const optionEl = this.createOptionElement(groupOption, globalIndex);
-                    optionEl.classList.add('x-select-option-in-group');
-                    groupEl.appendChild(optionEl);
-                    globalIndex++;
-                }
-                // Only append group if it has visible options
-                if (groupEl.querySelectorAll('.x-select-option').length > 0) {
-                    container.appendChild(groupEl);
-                }
-            }
-            else {
-                // Check if this option is in filtered list
-                const isFiltered = filteredOptions.some(fo => fo.value === opt.value);
-                if (!isFiltered)
-                    continue;
-                const optionEl = this.createOptionElement(opt, globalIndex);
-                container.appendChild(optionEl);
-                globalIndex++;
-            }
-        }
-    }
-    /**
-     * Retrieves the wrapper element from the shadow DOM.
-     * @returns HTMLElement | undefined
-     */
-    getWrapperEl() {
-        return this.el.shadowRoot?.querySelector('.x-select-wrapper');
-    }
-    /**
-     * Creates or updates the portal instance for the dropdown.
-     * Manages position, content, and open state.
-     */
-    updatePortal() {
-        if (!this.open) {
-            this.destroyPortal();
-            return;
-        }
-        const dropdownElement = this.buildDropdownElement();
-        if (!this.portalInstance) {
-            this.portalInstance = PortalController.create({
-                open: true,
-                target: this.getWrapperEl(),
-                placement: this.placement,
-                zIndex: 1050,
-                content: dropdownElement,
-            });
-        }
-        else {
-            this.portalInstance.update({
-                open: true,
-                target: this.getWrapperEl(),
-                placement: this.placement,
-                content: dropdownElement,
-            });
-        }
-    }
-    /**
-     * Destroys the portal instance and clears the dropdown element reference.
-     */
-    destroyPortal() {
-        if (this.portalInstance) {
-            this.portalInstance.destroy();
-            this.portalInstance = null;
-        }
-        this.dropdownEl = null;
-    }
-    // ==================== Render Methods ====================
-    /**
-     * Renders the arrow icon or loading spinner.
-     * @returns JSX.Element
-     */
-    renderArrowIcon() {
-        if (this.loading) {
-            return (h("span", { class: "x-select-arrow x-select-arrow-loading", part: "arrow" }, h("x-icon", { spin: true, name: getIcon('loading') })));
-        }
-        return (h("span", { class: { 'x-select-arrow': true, 'x-select-arrow-open': this.open }, part: "arrow" }, h("x-icon", { name: getIcon('arrowDown') })));
-    }
-    /**
-     * Renders the clear icon if allowed and value exists.
-     * @returns JSX.Element | null
-     */
-    renderClearIcon() {
-        if (!this.allowClear || !this.hasValue || this.disabled)
-            return null;
-        return (h("span", { class: "x-select-clear", part: "clear", onClick: this.handleClear }, h("x-icon", { name: getIcon('clear') })));
-    }
-    /**
-     * Renders a selected tag item (for multiple/tags mode).
-     *
-     * @param option - The option to render as a tag.
-     * @returns JSX.Element
-     */
-    renderTag(option) {
-        const label = this.maxTagTextLength && option.label.length > this.maxTagTextLength
-            ? option.label.slice(0, this.maxTagTextLength) + '...'
-            : option.label;
-        return (h("span", { class: "x-select-selection-item", key: String(option.value) }, h("span", { class: "x-select-selection-item-content" }, label), !this.disabled && (h("span", { class: "x-select-selection-item-remove", onClick: (e) => this.handleTagRemove(e, option) }, h("x-icon", { name: getIcon('checkSmall') })))));
-    }
-    /**
-     * Renders the selector content for multiple/tags mode.
-     * Includes tags, hidden tag counter, search input, and placeholder.
-     *
-     * @returns JSX.Element
-     */
-    renderMultipleSelector() {
-        const maxCount = typeof this.maxTagCount === 'number' ? this.maxTagCount : this.selectedOptions.length;
-        const visibleTags = this.selectedOptions.slice(0, maxCount);
-        const hiddenCount = this.selectedOptions.length - maxCount;
-        const showPlaceholder = !this.hasValue && !this.searchValue;
-        return (h("div", { class: "x-select-selection-overflow" }, visibleTags.map((opt) => this.renderTag(opt)), hiddenCount > 0 && (h("span", { class: "x-select-selection-item x-select-selection-item-rest" }, h("span", { class: "x-select-selection-item-content" }, this.maxTagPlaceholder || `+ ${hiddenCount} ...`))), h("span", { class: "x-select-selection-search" }, h("input", { ref: (el) => (this.inputRef = el), id: this.inputId, name: this.name, class: "x-select-selection-search-input", type: "text", value: this.searchValue, disabled: this.disabled, readOnly: !this.showSearch && this.mode !== 'tags', autoComplete: "off", onInput: this.handleSearchInput, onFocus: this.handleInputFocus, onBlur: this.handleInputBlur }), h("span", { class: "x-select-selection-search-mirror" }, this.searchValue, "\u00A0")), showPlaceholder && (h("span", { class: "x-select-selection-placeholder" }, this.placeholder))));
-    }
-    /**
-     * Renders the selector content for single selection mode.
-     * Includes selected label (or placeholder) and search input.
-     *
-     * @returns JSX.Element[]
-     */
-    renderSingleSelector() {
-        const showPlaceholder = !this.hasValue && !this.searchValue;
-        const displayLabel = this.hasValue ? this.selectedOptions[0].label : '';
-        return [
-            h("span", { class: "x-select-selection-search" }, h("input", { ref: (el) => (this.inputRef = el), id: this.inputId, name: this.name, class: "x-select-selection-search-input", type: "text", value: this.searchValue, disabled: this.disabled, readOnly: !this.showSearch, autoComplete: "off", onInput: this.handleSearchInput, onFocus: this.handleInputFocus, onBlur: this.handleInputBlur, style: { opacity: this.open ? '1' : '0' } })),
-            h("span", { class: "x-select-selection-item", style: {
-                    visibility: this.open && this.searchValue ? 'hidden' : 'visible',
-                    opacity: this.open && this.showSearch ? '0.4' : '1'
-                } }, displayLabel),
-            showPlaceholder && (h("span", { class: "x-select-selection-placeholder" }, this.placeholder)),
-        ];
-    }
-    /**
-     * Main render method for the Select component.
-     *
-     * Flow:
-     * 1. Calculates host classes based on props (size, mode, status, etc.).
-     * 2. Renders the main wrapper.
-     * 3. Renders the selector (single or multiple) inside the wrapper.
-     * 4. Renders suffix icons (clear, arrow/loading).
-     *
-     * @returns JSX.Element
-     */
-    render() {
-        const hostClasses = {
-            'x-select': true,
-            'x-select-single': !this.isMultiple,
-            'x-select-multiple': this.isMultiple,
-            'x-select-open': this.open,
-            'x-select-focused': this.focused,
-            'x-select-disabled': this.disabled,
-            'x-select-loading': this.loading,
-            'x-select-show-search': this.showSearch || this.mode === 'tags',
-            'x-select-allow-clear': this.allowClear,
-            'x-select-borderless': !this.bordered,
-            [`x-select-${this.size}`]: true,
-            [`x-select-status-${this.status}`]: !!this.status,
-        };
-        return (h(Host, { key: '592a104db5de8006a1ad6fc50a85e3017748b0bc', class: hostClasses, role: "combobox", "aria-haspopup": "listbox", "aria-expanded": String(this.open), "aria-disabled": String(this.disabled) }, h("div", { key: 'f766f29c9b6c2c35f353e64aef873e78980bdb15', class: {
-                'x-select-wrapper': true,
-                'disabled': this.disabled,
-            }, part: "wrapper" }, h("div", { key: 'fc7a4a196080d652c8544222da6f5bf03ef15033', class: {
-                'x-select-selector': true,
-                'disabled': this.disabled,
-            }, part: "selector", onClick: this.handleSelectorClick }, this.isMultiple ? this.renderMultipleSelector() : this.renderSingleSelector()), h("span", { key: '7a1f7574a4a91187935751f9cae38558cb26674d', class: "x-select-suffix" }, this.renderClearIcon(), this.renderArrowIcon()))));
-    }
-    static get watchers() { return {
-        "value": [{
-                "onValueChange": 0
-            }],
-        "open": [{
-                "onOpenChange": 0
-            }],
-        "options": [{
-                "onOptionsChange": 0
-            }]
-    }; }
-};
-XSelect.style = xSelectCss();
-
-const selectDropdownContentCss = () => `@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;width:100%;position:relative;font-family:inherit;-webkit-box-sizing:border-box;box-sizing:border-box}:host *,:host *::before,:host *::after{-webkit-box-sizing:border-box;box-sizing:border-box}.x-select-wrapper{position:relative;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;width:100%}.x-select-selector{position:relative;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;width:100%;min-width:0;padding:0 var(--x-control-padding-horizontal, var(--x-spacing-md, 12px));min-height:var(--x-control-height, var(--x-size-control-height, 32px));background-color:var(--x-control-bg, var(--x-color-bg-container, #ffffff));border:var(--x-control-border-width, var(--x-border-width-base, 1px)) solid var(--x-control-border-color, var(--x-color-border, #d9d9d9));border-radius:var(--x-control-border-radius, var(--x-border-radius-base, 6px));-webkit-transition:all 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);transition:all 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);-webkit-box-sizing:border-box;box-sizing:border-box}.x-select-selector:hover:not(.disabled):not([disabled]):not([class*=-disabled]){border-color:var(--x-control-border-color-hover, var(--x-color-primary-hover, #4096ff))}.x-select-selector{-ms-flex-wrap:wrap;flex-wrap:wrap;padding-right:calc(var(--x-select-padding-horizontal, var(--x-control-padding-horizontal, var(--x-spacing-md, 12px))) + 18px);cursor:pointer;overflow:hidden}:host(.x-select-focused) .x-select-selector,:host(.x-select-open) .x-select-selector{border-color:var(--x-select-border-color-focus, var(--x-control-border-color-focus, var(--x-color-primary, #1677ff))) !important;-webkit-box-shadow:var(--x-select-focus-shadow, 0 0 0 2px rgba(22, 119, 255, 0.1));box-shadow:var(--x-select-focus-shadow, 0 0 0 2px rgba(22, 119, 255, 0.1))}:host(.x-select-disabled) .x-select-selector.disabled,:host(.x-select-disabled) .x-select-selector[disabled],:host(.x-select-disabled) .x-select-selector[class*=-disabled]{background-color:var(--x-control-bg-disabled, var(--x-color-bg-container-disabled, rgba(0, 0, 0, 0.04)));border-color:var(--x-control-border-color-disabled, var(--x-color-border, #d9d9d9));color:var(--x-control-color-disabled, var(--x-color-text-disabled, rgba(0, 0, 0, 0.25)));cursor:not-allowed}:host(.x-select-disabled) .x-select-selector.disabled:hover,:host(.x-select-disabled) .x-select-selector[disabled]:hover,:host(.x-select-disabled) .x-select-selector[class*=-disabled]:hover{border-color:var(--x-control-border-color-disabled, var(--x-color-border, #d9d9d9)) !important}:host(.x-select-disabled) .x-select-selector:hover{border-color:var(--x-select-border-color-disabled, var(--x-control-border-color-disabled, var(--x-color-border, #d9d9d9)))}:host(.x-select-disabled) .x-select-arrow{color:var(--x-select-color-disabled, var(--x-control-color-disabled, var(--x-color-text-disabled, rgba(0, 0, 0, 0.25))))}:host(.x-select-borderless) .x-select-selector{background-color:transparent;border-color:transparent;-webkit-box-shadow:none;box-shadow:none}:host(.x-select-borderless) .x-select-selector:hover{border-color:transparent}:host(.x-select-borderless) .x-select-selector.focused,:host(.x-select-borderless) .x-select-selector:focus-within{border-color:transparent;-webkit-box-shadow:none;box-shadow:none}:host(.x-select-status-error) .x-select-selector{border-color:var(--x-control-border-color-error, var(--x-color-error, #ff4d4f))}:host(.x-select-status-error) .x-select-selector:hover:not(.disabled):not([disabled]){border-color:var(--x-control-border-color-error-hover, var(--x-color-error-hover, #ff7875))}:host(.x-select-status-error) .x-select-selector.focused,:host(.x-select-status-error) .x-select-selector:focus-within{border-color:var(--x-control-border-color-error, var(--x-color-error, #ff4d4f));-webkit-box-shadow:0 0 0 3px var(--x-control-focus-shadow-error-color, var(--x-color-error-bg, rgba(255, 38, 5, 0.06)));box-shadow:0 0 0 3px var(--x-control-focus-shadow-error-color, var(--x-color-error-bg, rgba(255, 38, 5, 0.06)))}:host(.x-select-status-error.x-select-focused) .x-select-selector,:host(.x-select-status-error.x-select-open) .x-select-selector{-webkit-box-shadow:0 0 0 2px rgba(255, 77, 79, 0.1);box-shadow:0 0 0 2px rgba(255, 77, 79, 0.1)}:host(.x-select-status-warning) .x-select-selector{border-color:var(--x-control-border-color-warning, var(--x-color-warning, #faad14))}:host(.x-select-status-warning) .x-select-selector:hover:not(.disabled):not([disabled]){border-color:var(--x-control-border-color-warning-hover, var(--x-color-warning-hover, #ffc53d))}:host(.x-select-status-warning) .x-select-selector.focused,:host(.x-select-status-warning) .x-select-selector:focus-within{border-color:var(--x-control-border-color-warning, var(--x-color-warning, #faad14));-webkit-box-shadow:0 0 0 3px var(--x-control-focus-shadow-warning-color, var(--x-color-warning-bg, rgba(255, 215, 5, 0.1)));box-shadow:0 0 0 3px var(--x-control-focus-shadow-warning-color, var(--x-color-warning-bg, rgba(255, 215, 5, 0.1)))}:host(.x-select-status-warning.x-select-focused) .x-select-selector,:host(.x-select-status-warning.x-select-open) .x-select-selector{-webkit-box-shadow:0 0 0 2px rgba(250, 173, 20, 0.1);box-shadow:0 0 0 2px rgba(250, 173, 20, 0.1)}:host(.x-select-small) .x-select-selector{min-height:var(--x-control-height-sm, var(--x-size-control-height-sm, 24px));padding:0 var(--x-control-padding-horizontal-sm, var(--x-spacing-sm, 8px));font-size:var(--x-control-font-size-sm, var(--x-font-size-sm, 12px))}:host(.x-select-small) .x-select-selector input,:host(.x-select-small) .x-select-selector textarea{line-height:calc(var(--x-control-height-sm, var(--x-size-control-height-sm, 24px)) - 2px)}:host(.x-select-small) .x-select-selector{padding-right:calc(var(--x-select-padding-horizontal-sm, var(--x-control-padding-horizontal-sm, var(--x-spacing-sm, 8px))) + 14px)}:host(.x-select-large) .x-select-selector{min-height:var(--x-control-height-lg, var(--x-size-control-height-lg, 40px));padding:0 var(--x-control-padding-horizontal, var(--x-spacing-md, 12px));font-size:var(--x-control-font-size-lg, var(--x-font-size-lg, 16px))}:host(.x-select-large) .x-select-selector input,:host(.x-select-large) .x-select-selector textarea{line-height:calc(var(--x-control-height-lg, var(--x-size-control-height-lg, 40px)) - 2px)}:host(.x-select-large) .x-select-selector{padding-right:calc(var(--x-select-padding-horizontal-lg, var(--x-control-padding-horizontal, var(--x-spacing-md, 12px))) + 20px)}.x-select-selection-item{-ms-flex:1;flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;line-height:calc(var(--x-select-height, var(--x-control-height, var(--x-size-control-height, 32px))) - 2px);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;pointer-events:none}:host(.x-select-small) .x-select-selection-item{line-height:calc(var(--x-select-height-sm, var(--x-control-height-sm, var(--x-size-control-height-sm, 24px))) - 2px)}:host(.x-select-large) .x-select-selection-item{line-height:calc(var(--x-select-height-lg, var(--x-control-height-lg, var(--x-size-control-height-lg, 40px))) - 2px)}.x-select-selection-placeholder{position:absolute;top:50%;right:30px;left:var(--x-select-padding-horizontal, var(--x-control-padding-horizontal, var(--x-spacing-md, 12px)));-webkit-transform:translateY(-50%);transform:translateY(-50%);color:var(--x-select-placeholder-color, var(--x-control-placeholder-color, var(--x-color-text-placeholder, rgba(0, 0, 0, 0.25))));pointer-events:none;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;-webkit-transition:all var(--x-select-motion-duration, var(--x-motion-duration-mid, 0.2s));transition:all var(--x-select-motion-duration, var(--x-motion-duration-mid, 0.2s))}:host(.x-select-small) .x-select-selection-placeholder{left:var(--x-select-padding-horizontal-sm, var(--x-control-padding-horizontal-sm, var(--x-spacing-sm, 8px)))}:host(.x-select-large) .x-select-selection-placeholder{left:var(--x-select-padding-horizontal-lg, var(--x-control-padding-horizontal, var(--x-spacing-md, 12px)))}.x-select-selection-search{position:relative;width:100%;max-width:100%}.x-select-selection-search-input{width:100%;height:100%;min-width:4px;padding:0;margin:0;background:transparent;border:none;outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;color:inherit;font-size:inherit;font-family:inherit;cursor:inherit}.x-select-selection-search-input::-webkit-search-cancel-button{display:none}.x-select-selection-search-mirror{position:absolute;top:0;left:0;z-index:999;white-space:pre;visibility:hidden;pointer-events:none}:host(.x-select-single) .x-select-selection-search{position:absolute;top:0;right:30px;bottom:0;left:var(--x-select-padding-horizontal, var(--x-control-padding-horizontal, var(--x-spacing-md, 12px)))}:host(.x-select-single) .x-select-selection-search-input{width:100%;height:100%}:host(.x-select-single:not(.x-select-show-search)) .x-select-selection-search-input{cursor:pointer}.x-select-selection-overflow{position:relative;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;width:100%;max-width:100%;padding-right:24px}:host(.x-select-multiple) .x-select-selector{padding:1px 4px;padding-right:calc(var(--x-select-padding-horizontal, var(--x-control-padding-horizontal, var(--x-spacing-md, 12px))) + 18px)}:host(.x-select-multiple) .x-select-selection-item{position:relative;display:-ms-flexbox;display:flex;-ms-flex:none;flex:none;-ms-flex-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;max-width:100%;height:var(--x-select-tag-height, 24px);margin-top:2px;margin-bottom:2px;margin-right:4px;padding:0 4px 0 8px;line-height:calc(var(--x-select-tag-height, 24px) - 2px);background:var(--x-select-tag-bg, var(--x-color-fill-quaternary, rgba(0, 0, 0, 0.02)));border:1px solid var(--x-select-tag-border-color, var(--x-color-border-secondary, #f0f0f0));border-radius:var(--x-select-tag-border-radius, var(--x-border-radius-sm, 4px));cursor:default;-webkit-transition:all var(--x-select-motion-duration, var(--x-motion-duration-mid, 0.2s));transition:all var(--x-select-motion-duration, var(--x-motion-duration-mid, 0.2s));-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;pointer-events:auto}:host(.x-select-multiple) .x-select-selection-item-content{display:inline-block;margin-right:4px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;max-width:100%}:host(.x-select-multiple) .x-select-selection-item-remove{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;color:var(--x-select-icon-color, var(--x-color-text-quaternary, rgba(0, 0, 0, 0.25)));font-size:10px;line-height:1;cursor:pointer;-webkit-transition:color var(--x-select-motion-duration, var(--x-motion-duration-mid, 0.2s));transition:color var(--x-select-motion-duration, var(--x-motion-duration-mid, 0.2s))}:host(.x-select-multiple) .x-select-selection-item-remove:hover{color:var(--x-select-icon-color-hover, var(--x-color-text-secondary, rgba(0, 0, 0, 0.45)))}:host(.x-select-multiple) .x-select-selection-item-rest{padding-right:8px;background:transparent;border:none}:host(.x-select-multiple) .x-select-selection-item-rest .x-select-selection-item-content{margin-right:0;color:var(--x-select-color, var(--x-control-color, var(--x-color-text, rgba(0, 0, 0, 0.88))))}:host(.x-select-multiple) .x-select-selection-search{position:relative;max-width:100%;margin-top:2px;margin-bottom:2px;-webkit-margin-start:0;margin-inline-start:0;padding:0;-ms-flex:1;flex:1;min-width:4px}:host(.x-select-multiple) .x-select-selection-search-input{width:100%;min-width:4px;height:calc(var(--x-select-tag-height, 24px) - 2px)}:host(.x-select-multiple) .x-select-selection-placeholder{position:absolute;left:8px}.x-select-suffix{position:absolute;top:50%;right:var(--x-select-padding-horizontal, var(--x-control-padding-horizontal, var(--x-spacing-md, 12px)));-webkit-transform:translateY(-50%);transform:translateY(-50%);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:4px;pointer-events:none}:host(.x-select-small) .x-select-suffix{right:var(--x-select-padding-horizontal-sm, var(--x-control-padding-horizontal-sm, var(--x-spacing-sm, 8px)))}:host(.x-select-large) .x-select-suffix{right:var(--x-select-padding-horizontal-lg, var(--x-control-padding-horizontal, var(--x-spacing-md, 12px)))}.x-select-arrow{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;height:12px;color:var(--x-select-icon-color, var(--x-color-text-quaternary, rgba(0, 0, 0, 0.25)));font-size:12px;line-height:1;text-align:center;pointer-events:none;-webkit-transition:-webkit-transform var(--x-select-motion-duration, var(--x-motion-duration-mid, 0.2s));transition:-webkit-transform var(--x-select-motion-duration, var(--x-motion-duration-mid, 0.2s));transition:transform var(--x-select-motion-duration, var(--x-motion-duration-mid, 0.2s));transition:transform var(--x-select-motion-duration, var(--x-motion-duration-mid, 0.2s)), -webkit-transform var(--x-select-motion-duration, var(--x-motion-duration-mid, 0.2s))}.x-select-arrow-open{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.x-select-arrow-loading{display:-ms-inline-flexbox;display:inline-flex}.x-select-clear{display:none;-ms-flex-align:center;align-items:center;color:var(--x-select-icon-color, var(--x-color-text-quaternary, rgba(0, 0, 0, 0.25)));font-size:12px;cursor:pointer;pointer-events:auto;-webkit-transition:color var(--x-select-motion-duration, var(--x-motion-duration-mid, 0.2s));transition:color var(--x-select-motion-duration, var(--x-motion-duration-mid, 0.2s))}.x-select-clear:hover{color:var(--x-select-icon-color-hover, var(--x-color-text-secondary, rgba(0, 0, 0, 0.45)))}:host(.x-select-allow-clear) .x-select-wrapper:hover .x-select-clear,:host(.x-select-allow-clear.x-select-focused) .x-select-clear{display:-ms-flexbox;display:flex}.x-select-dropdown{position:relative;z-index:var(--x-select-dropdown-z-index, var(--x-z-index-dropdown, 1050));min-width:100%;max-height:256px;padding:var(--x-select-dropdown-padding, var(--x-spacing-xxs, 4px)) 0;overflow:hidden;background-color:var(--x-select-dropdown-bg, var(--x-color-bg-elevated, #ffffff));border-radius:var(--x-select-dropdown-border-radius, var(--x-border-radius-lg, 8px));-webkit-box-shadow:var(--x-select-dropdown-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));box-shadow:var(--x-select-dropdown-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));outline:none;opacity:1;-webkit-transition:opacity var(--x-select-motion-duration, var(--x-motion-duration-mid, 0.2s)), -webkit-transform var(--x-select-motion-duration, var(--x-motion-duration-mid, 0.2s));transition:opacity var(--x-select-motion-duration, var(--x-motion-duration-mid, 0.2s)), -webkit-transform var(--x-select-motion-duration, var(--x-motion-duration-mid, 0.2s));transition:opacity var(--x-select-motion-duration, var(--x-motion-duration-mid, 0.2s)), transform var(--x-select-motion-duration, var(--x-motion-duration-mid, 0.2s));transition:opacity var(--x-select-motion-duration, var(--x-motion-duration-mid, 0.2s)), transform var(--x-select-motion-duration, var(--x-motion-duration-mid, 0.2s)), -webkit-transform var(--x-select-motion-duration, var(--x-motion-duration-mid, 0.2s))}.x-select-dropdown-hidden{opacity:0;-webkit-transform:scaleY(0.8);transform:scaleY(0.8);pointer-events:none}.x-select-dropdown-content{overflow-y:auto;overflow-anchor:none}.x-select-dropdown-placement-bottom,.x-select-dropdown-placement-bottomLeft,.x-select-dropdown-placement-bottomRight{-webkit-transform-origin:top center;transform-origin:top center}.x-select-dropdown-placement-top,.x-select-dropdown-placement-topLeft,.x-select-dropdown-placement-topRight{-webkit-transform-origin:bottom center;transform-origin:bottom center}.x-select-item-empty{display:block;min-height:32px;padding:5px 12px;color:var(--x-select-placeholder-color, var(--x-control-placeholder-color, var(--x-color-text-placeholder, rgba(0, 0, 0, 0.25))));font-size:var(--x-select-font-size, var(--x-control-font-size, var(--x-font-size-base, 14px)));line-height:22px;text-align:center}.x-select-option-group{padding:0}.x-select-option-group:not(:first-child){margin-top:4px;padding-top:4px;border-top:1px solid rgba(0, 0, 0, 0.06)}.x-select-option-group-label{padding:4px 12px 4px 12px;color:rgba(0, 0, 0, 0.45);font-size:12px;font-weight:600;line-height:1.5;cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.x-select-option-in-group{padding-left:24px !important}.x-select-option{position:relative;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;min-height:32px;padding:5px 12px;color:var(--x-color-text, rgba(0, 0, 0, 0.88));font-weight:400;font-size:14px;line-height:22px;cursor:pointer;-webkit-transition:background 0.3s ease;transition:background 0.3s ease}.x-select-option:hover:not(.x-select-option-disabled){background-color:rgba(0, 0, 0, 0.04)}.x-select-option-content{-ms-flex:1;flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.x-select-option-state{-ms-flex:none;flex:none;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;margin-left:8px;color:var(--x-color-primary, #1677ff);font-size:12px}.x-select-option-selected{font-weight:600;background-color:#e6f4ff}.x-select-option-selected:hover{background-color:#e6f4ff}.x-select-option-active:not(.x-select-option-disabled){background-color:rgba(0, 0, 0, 0.04)}.x-select-option-disabled{color:var(--x-color-text-disabled, rgba(0, 0, 0, 0.25));cursor:not-allowed}.x-select-option-disabled:hover{background-color:transparent}::slotted(x-select-option){display:-ms-flexbox;display:flex}::slotted(x-select-option[hidden]){display:none !important}`;
-
-const XSelectDropdownContent = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-    }
-    get el() { return getElement(this); }
-    /**
-     * Class map for dropdown wrapper.
-     * @example
-     * <x-select-dropdown-content dropdownClasses={{ 'x-select-dropdown': true }}></x-select-dropdown-content>
-     */
-    dropdownClasses = {};
-    /**
-     * Inline style map for dropdown wrapper.
-     * @example
-     * <x-select-dropdown-content dropdownStyle={{ width: '240px' }}></x-select-dropdown-content>
-     */
-    dropdownStyle = {};
-    /**
-     * Callback to pass dropdown element ref.
-     * @example
-     * <x-select-dropdown-content setDropdownRef={(el) => console.log(el)}></x-select-dropdown-content>
-     */
-    setDropdownRef;
-    /**
-     * Dropdown element reference.
-     */
-    dropdownEl = null;
-    /**
-     * Provide dropdown ref after initial render.
-     * @returns void
-     */
-    componentDidLoad() {
-        this.setDropdownRef?.(this.dropdownEl);
-    }
-    /**
-     * Cleanup dropdown ref on disconnect.
-     * @returns void
-     */
-    disconnectedCallback() {
-        this.setDropdownRef?.(null);
-    }
-    /**
-     * Capture dropdown ref and forward to callback.
-     * @param el - Dropdown element.
-     * @returns void
-     */
-    setRef = (el) => {
-        this.dropdownEl = el;
-        this.setDropdownRef?.(el);
-    };
-    /**
-     * Render dropdown wrapper and slots.
-     * @returns JSX.Element
-     * @example
-     * <x-select-dropdown-content dropdownStyle={{ width: '240px' }}></x-select-dropdown-content>
-     */
-    render() {
-        return (h("div", { key: 'f6720d05773f48450e3d5ae510b59f7c401458a7', class: this.dropdownClasses, style: this.dropdownStyle, ref: this.setRef, part: "dropdown", role: "listbox" }, h("div", { key: '69156751d70dad249dae6eeb6981016443b32340', class: "x-select-dropdown-content" }, h("slot", { key: '41f1594469ac9645aa763345c7c4d99390c59b4b' }), h("slot", { key: '7fc60ac830eeff2d0f540bf9c9afa4c6cf28b35d', name: "notFoundContent" }))));
-    }
-};
-XSelectDropdownContent.style = selectDropdownContentCss();
-
-export { XSelect as x_select, XSelectDropdownContent as x_select_dropdown_content };