@xlabs-store/core 0.0.1

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

@@ -0,0 +1,1313 @@
+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 };