@xlabs-store/core 0.0.1 → 0.0.3

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

@@ -1,732 +0,0 @@
-import { r as registerInstance, c as createEvent, a as getElement, h, H as Host } from './index-ig_mFsVk.js';
-import { P as PortalController } from './portal-controller-COpzIi1n.js';
-
-const xDropdownCss = () => `@charset "UTF-8";:root{--x-color-primary:#1677ff;--x-color-primary-rgb:22, 119, 255;--x-color-primary-contrast:#ffffff;--x-color-primary-contrast-rgb:255, 255, 255;--x-color-primary-shade:#0958d9;--x-color-primary-tint:#4096ff;--x-color-primary-bg:#e6f4ff;--x-color-primary-bg-hover:#bae0ff;--x-color-primary-border:#91caff;--x-color-primary-border-hover:#69b1ff;--x-color-primary-hover:#4096ff;--x-color-primary-active:#0958d9;--x-color-primary-text:#1677ff;--x-color-primary-text-hover:#4096ff;--x-color-primary-text-active:#0958d9;--x-color-secondary:#3dc2ff;--x-color-secondary-rgb:61, 194, 255;--x-color-secondary-contrast:#ffffff;--x-color-secondary-contrast-rgb:255, 255, 255;--x-color-secondary-shade:#36abe0;--x-color-secondary-tint:#50c8ff;--x-color-success:#52c41a;--x-color-success-rgb:82, 196, 26;--x-color-success-contrast:#ffffff;--x-color-success-contrast-rgb:255, 255, 255;--x-color-success-shade:#389e0d;--x-color-success-tint:#73d13d;--x-color-success-bg:#f6ffed;--x-color-success-bg-hover:#d9f7be;--x-color-success-border:#b7eb8f;--x-color-success-border-hover:#95de64;--x-color-success-hover:#73d13d;--x-color-success-active:#389e0d;--x-color-success-text:#52c41a;--x-color-success-text-hover:#73d13d;--x-color-success-text-active:#389e0d;--x-color-warning:#faad14;--x-color-warning-rgb:250, 173, 20;--x-color-warning-contrast:#000000;--x-color-warning-contrast-rgb:0, 0, 0;--x-color-warning-shade:#d48806;--x-color-warning-tint:#ffc53d;--x-color-warning-bg:#fffbe6;--x-color-warning-bg-hover:#fff1b8;--x-color-warning-border:#ffe58f;--x-color-warning-border-hover:#ffd666;--x-color-warning-hover:#ffc53d;--x-color-warning-active:#d48806;--x-color-warning-text:#faad14;--x-color-warning-text-hover:#ffc53d;--x-color-warning-text-active:#d48806;--x-color-danger:#ff4d4f;--x-color-danger-rgb:255, 77, 79;--x-color-danger-contrast:#ffffff;--x-color-danger-contrast-rgb:255, 255, 255;--x-color-danger-shade:#cf1322;--x-color-danger-tint:#ff7875;--x-color-error:#ff4d4f;--x-color-error-rgb:255, 77, 79;--x-color-error-bg:#fff2f0;--x-color-error-bg-hover:#ffccc7;--x-color-error-border:#ffa39e;--x-color-error-border-hover:#ff7875;--x-color-error-hover:#ff7875;--x-color-error-active:#d9363e;--x-color-error-text:#ff4d4f;--x-color-error-text-hover:#ff7875;--x-color-error-text-active:#d9363e;--x-color-info:#1677ff;--x-color-info-rgb:22, 119, 255;--x-color-info-bg:#e6f4ff;--x-color-info-bg-hover:#bae0ff;--x-color-info-border:#91caff;--x-color-info-border-hover:#69b1ff;--x-color-info-hover:#69b1ff;--x-color-info-active:#0958d9;--x-color-info-text:#1677ff;--x-color-info-text-hover:#69b1ff;--x-color-info-text-active:#0958d9;--x-color-text:rgba(0, 0, 0, 0.88);--x-color-text-secondary:rgba(0, 0, 0, 0.65);--x-color-text-tertiary:rgba(0, 0, 0, 0.45);--x-color-text-quaternary:rgba(0, 0, 0, 0.25);--x-color-text-disabled:rgba(0, 0, 0, 0.25);--x-color-text-placeholder:rgba(0, 0, 0, 0.25);--x-color-text-heading:rgba(0, 0, 0, 0.88);--x-color-text-label:rgba(0, 0, 0, 0.65);--x-color-text-description:rgba(0, 0, 0, 0.45);--x-color-text-light-solid:#ffffff;--x-color-bg-container:#ffffff;--x-color-bg-elevated:#ffffff;--x-color-bg-layout:#f5f5f5;--x-color-bg-spotlight:rgba(0, 0, 0, 0.85);--x-color-bg-mask:rgba(0, 0, 0, 0.45);--x-color-bg-base:#ffffff;--x-color-bg-container-disabled:#f5f5f5;--x-color-bg-container-loading:rgba(255, 255, 255, 0.65);--x-color-white:#ffffff;--x-color-fill:rgba(0, 0, 0, 0.15);--x-color-fill-secondary:rgba(0, 0, 0, 0.06);--x-color-fill-tertiary:rgba(0, 0, 0, 0.04);--x-color-fill-quaternary:rgba(0, 0, 0, 0.02);--x-color-border:#d9d9d9;--x-color-border-secondary:#f0f0f0;--x-color-border-bg:#ffffff;--x-color-split:rgba(5, 5, 5, 0.06);--x-color-dark:#222428;--x-color-dark-rgb:34, 36, 40;--x-color-dark-contrast:#ffffff;--x-color-dark-contrast-rgb:255, 255, 255;--x-color-dark-shade:#1e2023;--x-color-dark-tint:#383a3e;--x-color-medium:#92949c;--x-color-medium-rgb:146, 148, 156;--x-color-medium-contrast:#ffffff;--x-color-medium-contrast-rgb:255, 255, 255;--x-color-medium-shade:#808289;--x-color-medium-tint:#9d9fa6;--x-color-light:#f4f5f8;--x-color-light-rgb:244, 245, 248;--x-color-light-contrast:#000000;--x-color-light-contrast-rgb:0, 0, 0;--x-color-light-shade:#d7d8da;--x-color-light-tint:#f5f6f9;--x-font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--x-font-family-code:"SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;--x-font-size:14px;--x-font-size-sm:12px;--x-font-size-lg:16px;--x-font-size-xl:20px;--x-font-size-heading-1:38px;--x-font-size-heading-2:30px;--x-font-size-heading-3:24px;--x-font-size-heading-4:20px;--x-font-size-heading-5:16px;--x-line-height:1.5714285714285714;--x-line-height-lg:1.5;--x-line-height-sm:1.6666666666666667;--x-line-height-heading-1:1.2105263157894737;--x-line-height-heading-2:1.2666666666666666;--x-line-height-heading-3:1.3333333333333333;--x-line-height-heading-4:1.4;--x-line-height-heading-5:1.5;--x-font-weight-normal:400;--x-font-weight-medium:500;--x-font-weight-semibold:600;--x-font-weight-strong:600;--x-font-size-base:14px;--x-font-size-xxl:24px;--x-line-height-base:1.5714285714285714;--x-spacing-xxs:4px;--x-spacing-xs:8px;--x-spacing-sm:12px;--x-spacing-md:16px;--x-spacing-lg:20px;--x-spacing-xl:24px;--x-spacing-xxl:32px;--x-spacing-xxxl:48px;--x-margin-xxs:4px;--x-margin-xs:8px;--x-margin-sm:12px;--x-margin-md:16px;--x-margin-lg:24px;--x-margin-xl:32px;--x-margin-xxl:48px;--x-padding-xxs:4px;--x-padding-xs:8px;--x-padding-sm:12px;--x-padding-md:16px;--x-padding-lg:24px;--x-padding-content-horizontal-lg:24px;--x-padding-content-vertical-lg:12px;--x-padding-content-horizontal:16px;--x-padding-content-vertical:12px;--x-padding-content-horizontal-sm:16px;--x-padding-content-vertical-sm:8px;--x-border-radius:6px;--x-border-radius-xs:2px;--x-border-radius-sm:4px;--x-border-radius-lg:8px;--x-border-radius-xl:12px;--x-border-radius-outer:4px;--x-border-radius-base:6px;--x-border-width:1px;--x-border-width-base:1px;--x-shadow:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-shadow-secondary:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-shadow-tertiary:0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02);--x-shadow-lg:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-secondary:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-tertiary:0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02);--x-box-shadow-popover-arrow:2px 2px 5px rgba(0, 0, 0, 0.05);--x-box-shadow-card:0 1px 2px -2px rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.12), 0 5px 12px 4px rgba(0, 0, 0, 0.09);--x-box-shadow-drawer-right:-6px 0 16px 0 rgba(0, 0, 0, 0.08), -3px 0 6px -4px rgba(0, 0, 0, 0.12), -9px 0 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-drawer-left:6px 0 16px 0 rgba(0, 0, 0, 0.08), 3px 0 6px -4px rgba(0, 0, 0, 0.12), 9px 0 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-drawer-up:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-drawer-down:0 -6px 16px 0 rgba(0, 0, 0, 0.08), 0 -3px 6px -4px rgba(0, 0, 0, 0.12), 0 -9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-tabs-overflow-left:inset 10px 0 8px -8px rgba(0, 0, 0, 0.08);--x-box-shadow-tabs-overflow-right:inset -10px 0 8px -8px rgba(0, 0, 0, 0.08);--x-box-shadow-tabs-overflow-top:inset 0 10px 8px -8px rgba(0, 0, 0, 0.08);--x-box-shadow-tabs-overflow-bottom:inset 0 -10px 8px -8px rgba(0, 0, 0, 0.08);--x-motion-duration-fast:0.1s;--x-motion-duration-mid:0.2s;--x-motion-duration-slow:0.3s;--x-motion-ease-in-out:cubic-bezier(0.645, 0.045, 0.355, 1);--x-motion-ease-out:cubic-bezier(0.215, 0.61, 0.355, 1);--x-motion-ease-in:cubic-bezier(0.55, 0.055, 0.675, 0.19);--x-motion-ease-out-back:cubic-bezier(0.12, 0.4, 0.29, 1.46);--x-motion-ease-in-back:cubic-bezier(0.71, -0.46, 0.88, 0.6);--x-motion-ease-in-out-circle:cubic-bezier(0.78, 0.14, 0.15, 0.86);--x-motion-ease-out-circle:cubic-bezier(0.08, 0.82, 0.17, 1);--x-motion-ease-in-circle:cubic-bezier(0.6, 0.04, 0.98, 0.34);--x-motion-ease-in-quint:cubic-bezier(0.755, 0.05, 0.855, 0.06);--x-motion-ease-out-quint:cubic-bezier(0.23, 1, 0.32, 1);--x-z-index-base:0;--x-z-index-popup-base:1000;--x-z-index-popup:1030;--x-z-index-affix:10;--x-z-index-modal:1000;--x-z-index-modal-mask:1000;--x-z-index-drawer:1000;--x-z-index-popover:1030;--x-z-index-dropdown:1050;--x-z-index-tooltip:1070;--x-z-index-notification:1080;--x-z-index-message:1090;--x-z-index-popconfirm:1060;--x-z-index-table-fixed:10;--x-opacity-loading:0.65;--x-opacity-image:1;--x-opacity-disabled:0.5;--x-control-height:32px;--x-control-height-xs:24px;--x-control-height-sm:24px;--x-control-height-lg:40px;--x-control-radio-size:16px;--x-control-checkbox-size:16px;--x-control-padding-horizontal:12px;--x-control-padding-horizontal-sm:8px;--x-control-outline-width:2px;--x-control-outline:rgba(5, 145, 255, 0.1);--x-control-item-bg-hover:rgba(0, 0, 0, 0.04);--x-control-item-bg-active:#e6f4ff;--x-control-item-bg-active-hover:#bae0ff;--x-control-item-bg-active-disabled:rgba(0, 0, 0, 0.15);--x-control-tmp-outline:rgba(0, 0, 0, 0.02);--x-color-yellow:#fadb14;--x-color-yellow-rgb:250, 219, 20;--x-font-family-base:var(--x-font-family);--x-color-link:#1677ff;--x-color-link-hover:#69b1ff;--x-color-link-active:#0958d9;--x-color-icon:rgba(0, 0, 0, 0.45);--x-color-icon-hover:rgba(0, 0, 0, 0.88);--x-color-highlight:#ff4d4f;--x-color-bg-text-hover:rgba(0, 0, 0, 0.06);--x-color-bg-text-active:rgba(0, 0, 0, 0.15);--x-screen-xs:480px;--x-screen-xs-min:480px;--x-screen-xs-max:575px;--x-screen-sm:576px;--x-screen-sm-min:576px;--x-screen-sm-max:767px;--x-screen-md:768px;--x-screen-md-min:768px;--x-screen-md-max:991px;--x-screen-lg:992px;--x-screen-lg-min:992px;--x-screen-lg-max:1199px;--x-screen-xl:1200px;--x-screen-xl-min:1200px;--x-screen-xl-max:1599px;--x-screen-xxl:1600px;--x-screen-xxl-min:1600px;--x-color-fill-content:rgba(0, 0, 0, 0.06);--x-color-fill-content-hover:rgba(0, 0, 0, 0.15);--x-color-fill-alter:rgba(0, 0, 0, 0.02);--x-scrollbar-width:12px;--x-scrollbar-track-bg:rgba(0, 0, 0, 0.04);--x-scrollbar-thumb-bg:rgba(0, 0, 0, 0.25);--x-scrollbar-thumb-bg-hover:rgba(0, 0, 0, 0.35);--x-menu-dark-bg:#001529;--x-menu-dark-item-bg:#001529;--x-menu-dark-popup-bg:#001529;--x-menu-dark-submenu-item-bg:#000c17}:host{display:inline-block;position:relative;font-family:var(--x-dropdown-font-family, var(--x-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif));font-size:var(--x-dropdown-font-size, var(--x-font-size-base, 14px));line-height:var(--x-dropdown-line-height, var(--x-line-height-base, 1.5714))}:host(.x-dropdown-disabled){cursor:not-allowed;pointer-events:none}:host(.x-dropdown-disabled) .x-dropdown-trigger{cursor:not-allowed;opacity:0.5;pointer-events:none}:host(.x-dropdown-disabled) .x-dropdown-overlay{display:none}.x-dropdown-trigger{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;cursor:pointer}.x-dropdown-overlay{position:relative;z-index:var(--x-dropdown-z-index, var(--x-z-index-dropdown, 1050));min-width:var(--x-dropdown-min-width, 120px);opacity:1;visibility:visible;-webkit-animation:x-dropdown-fade-in var(--x-dropdown-motion-duration, var(--x-motion-duration-fast, 0.15s)) var(--x-dropdown-motion-ease, cubic-bezier(0.215, 0.61, 0.355, 1));animation:x-dropdown-fade-in var(--x-dropdown-motion-duration, var(--x-motion-duration-fast, 0.15s)) var(--x-dropdown-motion-ease, cubic-bezier(0.215, 0.61, 0.355, 1))}.x-dropdown-overlay.x-dropdown-hidden{display:none !important;opacity:0;pointer-events:none}@-webkit-keyframes x-dropdown-fade-in{from{opacity:0;-webkit-transform:scale(0.95);transform:scale(0.95)}to{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}@keyframes x-dropdown-fade-in{from{opacity:0;-webkit-transform:scale(0.95);transform:scale(0.95)}to{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}.x-dropdown-content{position:relative;z-index:1;background:var(--x-dropdown-bg, var(--x-color-bg-container, #ffffff));border-radius:var(--x-dropdown-border-radius, var(--x-border-radius-lg, 8px));-webkit-box-shadow:var(--x-dropdown-shadow, var(--x-box-shadow-secondary, 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05)));box-shadow:var(--x-dropdown-shadow, var(--x-box-shadow-secondary, 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05)));overflow:hidden}.x-dropdown-placement-bottom,.x-dropdown-placement-bottomLeft,.x-dropdown-placement-bottomRight{top:100%;margin-top:var(--x-dropdown-offset, var(--x-spacing-xxs, 4px));-webkit-transform-origin:top center;transform-origin:top center}.x-dropdown-placement-top,.x-dropdown-placement-topLeft,.x-dropdown-placement-topRight{bottom:100%;margin-bottom:var(--x-dropdown-offset, var(--x-spacing-xxs, 4px));-webkit-transform-origin:bottom center;transform-origin:bottom center}.x-dropdown-placement-bottom{left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.x-dropdown-placement-bottom.x-dropdown-hidden{-webkit-transform:translateX(-50%) scale(0.95);transform:translateX(-50%) scale(0.95)}.x-dropdown-placement-bottomLeft{left:0}.x-dropdown-placement-bottomRight{right:0}.x-dropdown-placement-top{left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.x-dropdown-placement-top.x-dropdown-hidden{-webkit-transform:translateX(-50%) scale(0.95);transform:translateX(-50%) scale(0.95)}.x-dropdown-placement-topLeft{left:0}.x-dropdown-placement-topRight{right:0}.x-dropdown-arrow{position:absolute;width:var(--x-dropdown-arrow-size, 8px);height:var(--x-dropdown-arrow-size, 8px);background:var(--x-dropdown-bg, var(--x-color-bg-container, #ffffff));-webkit-transform:rotate(45deg);transform:rotate(45deg);z-index:0;-webkit-box-shadow:-2px -2px 5px rgba(0, 0, 0, 0.06);box-shadow:-2px -2px 5px rgba(0, 0, 0, 0.06)}.x-dropdown-placement-bottom .x-dropdown-arrow,.x-dropdown-placement-bottomLeft .x-dropdown-arrow,.x-dropdown-placement-bottomRight .x-dropdown-arrow{top:calc(var(--x-dropdown-arrow-size, 8px) / -2)}.x-dropdown-placement-top .x-dropdown-arrow,.x-dropdown-placement-topLeft .x-dropdown-arrow,.x-dropdown-placement-topRight .x-dropdown-arrow{bottom:calc(var(--x-dropdown-arrow-size, 8px) / -2);-webkit-box-shadow:2px 2px 5px rgba(0, 0, 0, 0.06);box-shadow:2px 2px 5px rgba(0, 0, 0, 0.06)}.x-dropdown-placement-bottom .x-dropdown-arrow,.x-dropdown-placement-top .x-dropdown-arrow{left:50%;margin-left:calc(var(--x-dropdown-arrow-size, 8px) / -2)}.x-dropdown-placement-bottomLeft .x-dropdown-arrow,.x-dropdown-placement-topLeft .x-dropdown-arrow{left:var(--x-dropdown-arrow-offset, var(--x-spacing-md, 16px))}.x-dropdown-placement-bottomRight .x-dropdown-arrow,.x-dropdown-placement-topRight .x-dropdown-arrow{right:var(--x-dropdown-arrow-offset, var(--x-spacing-md, 16px))}.x-dropdown-arrow-point-at-center.x-dropdown-placement-bottomLeft .x-dropdown-arrow,.x-dropdown-arrow-point-at-center.x-dropdown-placement-topLeft .x-dropdown-arrow{left:50%;margin-left:calc(var(--x-dropdown-arrow-size, 8px) / -2)}.x-dropdown-arrow-point-at-center.x-dropdown-placement-bottomRight .x-dropdown-arrow,.x-dropdown-arrow-point-at-center.x-dropdown-placement-topRight .x-dropdown-arrow{right:50%;margin-right:calc(var(--x-dropdown-arrow-size, 8px) / -2)}.x-dropdown-menu{margin:0;padding:var(--x-dropdown-padding-block, var(--x-spacing-xxs, 4px)) 0;list-style:none;background:var(--x-dropdown-bg, var(--x-color-bg-container, #ffffff));border-radius:var(--x-dropdown-border-radius, var(--x-border-radius-lg, 8px));outline:none}.x-dropdown-menu-item{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:var(--x-dropdown-item-gap, var(--x-spacing-xs, 8px));padding:var(--x-dropdown-item-padding-block, 5px) var(--x-dropdown-item-padding-inline, 12px);color:var(--x-dropdown-color, var(--x-color-text, rgba(0, 0, 0, 0.88)));font-size:var(--x-dropdown-font-size, var(--x-font-size-base, 14px));line-height:var(--x-dropdown-line-height, var(--x-line-height-base, 1.5714));cursor:pointer;-webkit-transition:background-color var(--x-dropdown-motion-duration, var(--x-motion-duration-fast, 0.15s));transition:background-color var(--x-dropdown-motion-duration, var(--x-motion-duration-fast, 0.15s))}.x-dropdown-menu-item:hover:not(.x-dropdown-menu-item-disabled){background-color:var(--x-dropdown-item-bg-hover, var(--x-color-bg-text-hover, rgba(0, 0, 0, 0.04)))}.x-dropdown-menu-item:active:not(.x-dropdown-menu-item-disabled){background-color:var(--x-dropdown-item-bg-active, var(--x-color-bg-text-active, rgba(0, 0, 0, 0.08)))}.x-dropdown-menu-item-disabled{color:var(--x-dropdown-color-disabled, var(--x-color-text-disabled, rgba(0, 0, 0, 0.25)));cursor:not-allowed}.x-dropdown-menu-item-danger{color:var(--x-dropdown-color-danger, var(--x-color-error, #ff4d4f))}.x-dropdown-menu-item-danger:hover:not(.x-dropdown-menu-item-disabled){color:var(--x-dropdown-color-danger, var(--x-color-error, #ff4d4f));background-color:var(--x-dropdown-item-bg-danger-hover, var(--x-color-error-bg, #fff2f0))}.x-dropdown-menu-item-selected{font-weight:var(--x-dropdown-item-font-weight-selected, var(--x-font-weight-semibold, 600));background-color:var(--x-dropdown-item-bg-selected, var(--x-color-primary-bg, #e6f4ff))}.x-dropdown-menu-item-icon{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;font-size:var(--x-dropdown-item-icon-size, 14px);color:inherit}.x-dropdown-menu-item-content{-ms-flex:1;flex:1;min-width:0}.x-dropdown-menu-item-selected-icon{margin-left:auto;font-size:12px;color:var(--x-dropdown-color-primary, var(--x-color-primary, #1677ff))}.x-dropdown-menu-item-divider{height:1px;margin:var(--x-dropdown-divider-margin, var(--x-spacing-xxs, 4px)) 0;background-color:var(--x-dropdown-divider-color, var(--x-color-border, #d9d9d9));list-style:none}.x-dropdown-menu-item-group{list-style:none}.x-dropdown-menu-item-group-title{padding:var(--x-dropdown-group-title-padding, 5px 12px);color:var(--x-dropdown-color-secondary, var(--x-color-text-secondary, rgba(0, 0, 0, 0.45)));font-size:var(--x-dropdown-font-size-sm, var(--x-font-size-sm, 12px));font-weight:var(--x-dropdown-group-title-font-weight, var(--x-font-weight-semibold, 600))}.x-dropdown-menu-item-group-list{margin:0;padding:0;list-style:none}.x-dropdown-menu-submenu{position:relative;list-style:none}.x-dropdown-menu-submenu:hover>.x-dropdown-menu-sub,.x-dropdown-menu-submenu.x-dropdown-menu-submenu-open>.x-dropdown-menu-sub{opacity:1;visibility:visible;pointer-events:auto}.x-dropdown-menu-submenu::after{content:"";position:absolute;top:0;right:-8px;width:8px;height:100%}.x-dropdown-menu-submenu.x-dropdown-menu-item-disabled>.x-dropdown-menu-submenu-title{color:var(--x-dropdown-color-disabled, var(--x-color-text-disabled, rgba(0, 0, 0, 0.25)));cursor:not-allowed}.x-dropdown-menu-submenu.x-dropdown-menu-item-disabled>.x-dropdown-menu-submenu-title:hover{background-color:transparent}.x-dropdown-menu-submenu.x-dropdown-menu-item-disabled:hover>.x-dropdown-menu-sub{opacity:0;visibility:hidden;pointer-events:none}.x-dropdown-menu-submenu-title{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:var(--x-dropdown-item-gap, var(--x-spacing-xs, 8px));padding:var(--x-dropdown-item-padding-block, 5px) var(--x-dropdown-item-padding-inline, 12px);color:var(--x-dropdown-color, var(--x-color-text, rgba(0, 0, 0, 0.88)));font-size:var(--x-dropdown-font-size, var(--x-font-size-base, 14px));line-height:var(--x-dropdown-line-height, var(--x-line-height-base, 1.5714));cursor:pointer;-webkit-transition:background-color var(--x-dropdown-motion-duration, var(--x-motion-duration-fast, 0.15s));transition:background-color var(--x-dropdown-motion-duration, var(--x-motion-duration-fast, 0.15s))}.x-dropdown-menu-submenu-title:hover{background-color:var(--x-dropdown-item-bg-hover, var(--x-color-bg-text-hover, rgba(0, 0, 0, 0.04)))}.x-dropdown-menu-submenu-title .x-dropdown-menu-item-text{-ms-flex:1;flex:1}.x-dropdown-menu-submenu-arrow{font-size:10px;color:var(--x-dropdown-color-secondary, var(--x-color-text-secondary, rgba(0, 0, 0, 0.45)));-webkit-transition:-webkit-transform var(--x-dropdown-motion-duration, var(--x-motion-duration-fast, 0.15s));transition:-webkit-transform var(--x-dropdown-motion-duration, var(--x-motion-duration-fast, 0.15s));transition:transform var(--x-dropdown-motion-duration, var(--x-motion-duration-fast, 0.15s));transition:transform var(--x-dropdown-motion-duration, var(--x-motion-duration-fast, 0.15s)), -webkit-transform var(--x-dropdown-motion-duration, var(--x-motion-duration-fast, 0.15s))}.x-dropdown-menu-submenu:hover>.x-dropdown-menu-submenu-title .x-dropdown-menu-submenu-arrow{-webkit-transform:translateX(2px);transform:translateX(2px)}.x-dropdown-menu-sub{position:absolute;top:-var(--x-dropdown-padding-block, var(--x-spacing-xxs, 4px));left:calc(100% + 4px);min-width:var(--x-dropdown-min-width, 120px);padding:var(--x-dropdown-padding-block, var(--x-spacing-xxs, 4px)) 0;background:var(--x-dropdown-bg, var(--x-color-bg-container, #ffffff));border-radius:var(--x-dropdown-border-radius, var(--x-border-radius-lg, 8px));-webkit-box-shadow:var(--x-dropdown-shadow, var(--x-box-shadow-secondary, 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05)));box-shadow:var(--x-dropdown-shadow, var(--x-box-shadow-secondary, 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05)));opacity:0;visibility:hidden;pointer-events:none;z-index:1;-webkit-transition:opacity var(--x-dropdown-motion-duration, var(--x-motion-duration-fast, 0.15s)), visibility var(--x-dropdown-motion-duration, var(--x-motion-duration-fast, 0.15s));transition:opacity var(--x-dropdown-motion-duration, var(--x-motion-duration-fast, 0.15s)), visibility var(--x-dropdown-motion-duration, var(--x-motion-duration-fast, 0.15s))}.x-dropdown-menu-sub .x-dropdown-menu-submenu{position:relative;list-style:none}.x-dropdown-menu-sub .x-dropdown-menu-submenu:hover>.x-dropdown-menu-sub{opacity:1;visibility:visible;pointer-events:auto}.x-dropdown-menu-sub .x-dropdown-menu-submenu::after{content:"";position:absolute;top:0;right:-8px;width:8px;height:100%}.x-dropdown-menu-sub .x-dropdown-menu-sub{z-index:2}.x-dropdown-menu-sub .x-dropdown-menu-sub .x-dropdown-menu-sub{z-index:3}.x-dropdown-menu-sub .x-dropdown-menu-sub .x-dropdown-menu-sub .x-dropdown-menu-sub{z-index:4}`;
-
-let activeDropdown = null;
-const XDropdown = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.xOpenChange = createEvent(this, "xOpenChange", 7);
-        this.xMenuClick = createEvent(this, "xMenuClick", 7);
-    }
-    get el() { return getElement(this); }
-    // ==================== Props ====================
-    /**
-     * Whether the dropdown arrow should be visible.
-     * @example
-     * <x-dropdown arrow></x-dropdown>
-     */
-    arrow = false;
-    /**
-     * Whether to adjust dropdown placement automatically when dropdown is off screen.
-     * @example
-     * <x-dropdown autoAdjustOverflow={false}></x-dropdown>
-     */
-    autoAdjustOverflow = true;
-    /**
-     * Whether the dropdown menu is disabled.
-     * @example
-     * <x-dropdown disabled></x-dropdown>
-     */
-    disabled = false;
-    /**
-     * Whether destroy dropdown when hidden.
-     * @example
-     * <x-dropdown destroyOnHidden></x-dropdown>
-     */
-    destroyOnHidden = false;
-    /**
-     * The menu configuration.
-     * @example
-     * <x-dropdown menu={{ items: [{ key: '1', label: 'Item' }] }}></x-dropdown>
-     */
-    menu;
-    /**
-     * Placement of popup menu.
-     * @example
-     * <x-dropdown placement="bottomRight"></x-dropdown>
-     */
-    placement = 'bottomLeft';
-    /**
-     * The trigger mode which executes the dropdown action.
-     * @example
-     * <x-dropdown trigger="click"></x-dropdown>
-     */
-    trigger = 'hover';
-    /**
-     * Whether the dropdown menu is currently open (controlled).
-     * @example
-     * <x-dropdown open></x-dropdown>
-     */
-    open;
-    /**
-     * Custom class names for dropdown parts.
-     * @example
-     * <x-dropdown classNames={{ root: 'my-dropdown' }}></x-dropdown>
-     */
-    classNames = {};
-    /**
-     * Custom styles for dropdown parts.
-     * @example
-     * <x-dropdown styles={{ root: { minWidth: '200px' } }}></x-dropdown>
-     */
-    styles = {};
-    // ==================== Events ====================
-    /**
-     * Called when the open state is changed.
-     * @example
-     * <x-dropdown onXOpenChange={(ev) => console.log(ev.detail)}></x-dropdown>
-     */
-    xOpenChange;
-    /**
-     * Called when a menu item is clicked.
-     * @example
-     * <x-dropdown onXMenuClick={(ev) => console.log(ev.detail)}></x-dropdown>
-     */
-    xMenuClick;
-    // ==================== State ====================
-    /**
-     * Internal open state for uncontrolled mode.
-     */
-    internalOpen = false;
-    /**
-     * Context menu position when trigger is contextMenu.
-     */
-    contextMenuPosition = null;
-    /**
-     * Selected menu item keys.
-     */
-    selectedKeys = [];
-    /**
-     * Internal destroy flag for destroyOnHidden.
-     */
-    isDestroyed = false;
-    /**
-     * Current placement from portal.
-     */
-    currentPlacement;
-    /**
-     * Hover close timeout.
-     */
-    hoverTimer = null;
-    /**
-     * Overlay element reference.
-     */
-    overlayRef = null;
-    /**
-     * Portal instance for overlay.
-     */
-    portalInstance = null;
-    // ==================== Lifecycle ====================
-    /**
-     * Initialize internal state before render.
-     * @returns void
-     */
-    componentWillLoad() {
-        this.internalOpen = this.open ?? false;
-        this.currentPlacement = this.placement;
-        if (this.menu?.selectedKeys) {
-            this.selectedKeys = this.menu.selectedKeys;
-        }
-        else if (this.menu?.defaultSelectedKeys) {
-            this.selectedKeys = this.menu.defaultSelectedKeys;
-        }
-    }
-    /**
-     * Sync placement to internal state.
-     * @param newVal - New placement.
-     * @returns void
-     */
-    watchPlacement(newVal) {
-        this.currentPlacement = newVal;
-    }
-    /**
-     * Cleanup timers and portal on disconnect.
-     * @returns void
-     */
-    disconnectedCallback() {
-        if (this.hoverTimer) {
-            clearTimeout(this.hoverTimer);
-        }
-        if (this.portalInstance) {
-            this.portalInstance.destroy();
-            this.portalInstance = null;
-        }
-        if (activeDropdown === this) {
-            activeDropdown = null;
-        }
-    }
-    /**
-     * Sync controlled open state and update portal.
-     * @param newValue - Open state.
-     * @returns void
-     */
-    watchOpen(newValue) {
-        if (newValue !== undefined) {
-            this.internalOpen = newValue;
-            if (newValue && this.destroyOnHidden) {
-                this.isDestroyed = false;
-            }
-            this.updatePortal();
-        }
-    }
-    /**
-     * Update portal after render.
-     * @returns void
-     */
-    componentDidRender() {
-        this.updatePortal();
-    }
-    // ==================== Listeners ====================
-    /**
-     * Close dropdown when clicking outside.
-     * @param ev - Mouse event.
-     * @returns void
-     */
-    handleWindowClick(ev) {
-        if (!this.internalOpen)
-            return;
-        if (this.el.contains(ev.target))
-            return;
-        if (this.overlayRef?.contains(ev.target))
-            return;
-        this.setOpen(false, 'trigger');
-    }
-    /**
-     * Close dropdown on Escape key.
-     * @param ev - Keyboard event.
-     * @returns void
-     */
-    handleKeyDown(ev) {
-        if (ev.key === 'Escape' && this.internalOpen) {
-            this.setOpen(false, 'trigger');
-        }
-    }
-    // ==================== Helpers ====================
-    /**
-     * Get open state (controlled or internal).
-     * @returns boolean
-     */
-    get isOpen() {
-        return this.open !== undefined ? this.open : this.internalOpen;
-    }
-    /**
-     * Determine whether arrow should be shown.
-     * @returns boolean
-     */
-    get showArrow() {
-        return this.arrow === true || (typeof this.arrow === 'object' && !!this.arrow);
-    }
-    /**
-     * Determine arrow point-at-center behavior.
-     * @returns boolean
-     */
-    get arrowPointAtCenter() {
-        return typeof this.arrow === 'object' && this.arrow.pointAtCenter === true;
-    }
-    /**
-     * Get trigger element inside shadow root.
-     * @returns HTMLElement | undefined
-     */
-    getTriggerEl() {
-        return this.el.shadowRoot
-            ? this.el.shadowRoot.querySelector('.x-dropdown-trigger')
-            : this.el.querySelector('.x-dropdown-trigger');
-    }
-    /**
-     * Check if a trigger mode is enabled.
-     * @param type - Trigger type.
-     * @returns boolean
-     */
-    isTrigger(type) {
-        if (Array.isArray(this.trigger)) {
-            return this.trigger.includes(type);
-        }
-        return this.trigger === type;
-    }
-    /**
-     * Update open state and emit change event.
-     *
-     * Flow:
-     * 1. Checks disabled state.
-     * 2. Manages `activeDropdown` singleton to close other dropdowns if opening.
-     * 3. Updates `internalOpen` state.
-     * 4. Handles `destroyOnHidden` logic.
-     * 5. Emits `xOpenChange`.
-     * 6. Resets context menu position if closing.
-     *
-     * @param open - Open state.
-     * @param source - Event source.
-     * @returns void
-     */
-    setOpen(open, source) {
-        if (this.disabled)
-            return;
-        if (open) {
-            if (activeDropdown && activeDropdown !== this) {
-                activeDropdown.setOpen(false, 'trigger');
-            }
-            activeDropdown = this;
-        }
-        else if (activeDropdown === this) {
-            activeDropdown = null;
-        }
-        this.internalOpen = open;
-        if (!open && this.destroyOnHidden) {
-            this.isDestroyed = true;
-        }
-        this.xOpenChange.emit({ open, source });
-        // Reset context menu position when closing
-        if (!open) {
-            this.contextMenuPosition = null;
-        }
-    }
-    // ==================== Handlers ====================
-    /**
-     * Handle trigger mouse enter for hover mode.
-     * @returns void
-     */
-    handleMouseEnter = () => {
-        if (this.disabled)
-            return;
-        if (this.isTrigger('hover')) {
-            if (this.hoverTimer) {
-                clearTimeout(this.hoverTimer);
-                this.hoverTimer = null;
-            }
-            this.setOpen(true, 'trigger');
-        }
-    };
-    /**
-     * Handle trigger mouse leave for hover mode.
-     * @returns void
-     */
-    handleMouseLeave = () => {
-        if (this.disabled)
-            return;
-        if (this.isTrigger('hover')) {
-            this.hoverTimer = setTimeout(() => {
-                this.setOpen(false, 'trigger');
-            }, 100);
-        }
-    };
-    /**
-     * Keep dropdown open when hovering overlay in hover mode.
-     * @returns void
-     */
-    handleOverlayMouseEnter = () => {
-        if (this.disabled)
-            return;
-        if (this.isTrigger('hover')) {
-            if (this.hoverTimer) {
-                clearTimeout(this.hoverTimer);
-                this.hoverTimer = null;
-            }
-        }
-    };
-    /**
-     * Close dropdown when leaving overlay in hover mode.
-     * @returns void
-     */
-    handleOverlayMouseLeave = () => {
-        if (this.disabled)
-            return;
-        if (this.isTrigger('hover')) {
-            this.hoverTimer = setTimeout(() => {
-                this.setOpen(false, 'trigger');
-            }, 100);
-        }
-    };
-    /**
-     * Toggle dropdown on click trigger.
-     * @param e - Mouse event.
-     * @returns void
-     */
-    handleClick = (e) => {
-        if (this.disabled)
-            return;
-        if (this.isTrigger('click')) {
-            e.stopPropagation();
-            this.setOpen(!this.isOpen, 'trigger');
-        }
-    };
-    /**
-     * Open dropdown at context menu position.
-     * @param e - Mouse event.
-     * @returns void
-     */
-    handleContextMenu = (e) => {
-        if (this.disabled)
-            return;
-        if (this.isTrigger('contextMenu')) {
-            e.preventDefault();
-            e.stopPropagation();
-            // Get position relative to the host element
-            const rect = this.el.getBoundingClientRect();
-            this.contextMenuPosition = {
-                x: e.clientX - rect.left,
-                y: e.clientY - rect.top,
-            };
-            this.setOpen(true, 'trigger');
-        }
-    };
-    /**
-     * Handle menu item selection and emit click event.
-     * @param item - Menu item.
-     * @param keyPath - Path of keys.
-     * @param e - Mouse event.
-     * @returns void
-     */
-    handleMenuItemClick = (item, keyPath, e) => {
-        if (item.disabled)
-            return;
-        // Handle selection if selectable
-        if (this.menu?.selectable) {
-            if (this.menu.multiple) {
-                if (this.selectedKeys.includes(item.key)) {
-                    this.selectedKeys = this.selectedKeys.filter(k => k !== item.key);
-                }
-                else {
-                    this.selectedKeys = [...this.selectedKeys, item.key];
-                }
-            }
-            else {
-                this.selectedKeys = [item.key];
-            }
-        }
-        this.xMenuClick.emit({
-            key: item.key,
-            keyPath,
-            item,
-            domEvent: e,
-        });
-        // Close dropdown after click (unless selectable)
-        if (!this.menu?.selectable) {
-            this.setOpen(false, 'menu');
-        }
-    };
-    // ==================== Render Helpers ====================
-    /**
-     * Build overlay style from styles prop.
-     * @returns style map
-     */
-    getOverlayStyle() {
-        const style = { ...(this.styles.root || {}) };
-        return style;
-    }
-    /**
-     * Build overlay element and render menu items.
-     * @returns HTMLElement
-     */
-    buildOverlayElement() {
-        // Create x-dropdown-content element
-        const overlayEl = document.createElement('x-dropdown-content');
-        const overlayClasses = {
-            'x-dropdown-overlay': true,
-            [`x-dropdown-placement-${this.currentPlacement || this.placement}`]: true,
-            'x-dropdown-hidden': !this.isOpen,
-            'x-dropdown-show-arrow': this.showArrow,
-            'x-dropdown-arrow-point-at-center': this.arrowPointAtCenter,
-            [this.classNames.root || '']: !!this.classNames.root,
-        };
-        // Set props on element
-        overlayEl.overlayClasses = overlayClasses;
-        overlayEl.overlayStyle = this.getOverlayStyle();
-        overlayEl.showArrow = this.showArrow;
-        overlayEl.isOpen = this.isOpen;
-        overlayEl.overlayMouseEnter = this.handleOverlayMouseEnter;
-        overlayEl.overlayMouseLeave = this.handleOverlayMouseLeave;
-        overlayEl.setOverlayRef = (el) => {
-            this.overlayRef = el;
-        };
-        // Render menu into overlay element
-        if (this.menu?.items && this.menu.items.length > 0) {
-            const menuEl = document.createElement('ul');
-            menuEl.className = 'x-dropdown-menu';
-            menuEl.setAttribute('role', 'menu');
-            menuEl.setAttribute('part', 'menu');
-            this.renderMenuItemsImperative(menuEl, this.menu.items);
-            overlayEl.appendChild(menuEl);
-        }
-        return overlayEl;
-    }
-    /**
-     * Render menu items into an element.
-     * @param container - Parent element.
-     * @param items - Menu items.
-     * @param keyPath - Current key path.
-     * @returns void
-     */
-    renderMenuItemsImperative(container, items, keyPath = []) {
-        items.forEach(item => {
-            const li = this.createMenuItemElement(item, keyPath);
-            if (li)
-                container.appendChild(li);
-        });
-    }
-    /**
-     * Create menu item element based on item type.
-     *
-     * Flow:
-     * 1. Handles 'divider': Creates separator li.
-     * 2. Handles 'group': Creates title and recursive list of children.
-     * 3. Handles 'submenu' (children present):
-     *    - Creates title with icon and arrow.
-     *    - Recursively builds submenu list.
-     * 4. Handles regular item:
-     *    - Sets classes for disabled, danger, selected states.
-     *    - Attaches click listener.
-     *    - Renders icon and content.
-     *
-     * @param item - Menu item.
-     * @param keyPath - Current key path.
-     * @returns HTMLElement | null
-     */
-    createMenuItemElement(item, keyPath = []) {
-        const currentPath = [...keyPath, item.key];
-        // Divider
-        if (item.type === 'divider') {
-            const li = document.createElement('li');
-            li.className = 'x-dropdown-menu-item-divider';
-            li.setAttribute('data-key', item.key);
-            return li;
-        }
-        // Group
-        if (item.type === 'group') {
-            const li = document.createElement('li');
-            li.className = 'x-dropdown-menu-item-group';
-            li.setAttribute('data-key', item.key);
-            const title = document.createElement('div');
-            title.className = 'x-dropdown-menu-item-group-title';
-            title.textContent = item.label;
-            li.appendChild(title);
-            const groupList = document.createElement('ul');
-            groupList.className = 'x-dropdown-menu-item-group-list';
-            if (item.children) {
-                this.renderMenuItemsImperative(groupList, item.children, currentPath);
-            }
-            li.appendChild(groupList);
-            return li;
-        }
-        // Submenu
-        if (item.children && item.children.length > 0) {
-            const li = document.createElement('li');
-            li.className = 'x-dropdown-menu-submenu' + (item.disabled ? ' x-dropdown-menu-item-disabled' : '');
-            li.setAttribute('data-key', item.key);
-            const titleDiv = document.createElement('div');
-            titleDiv.className = 'x-dropdown-menu-submenu-title';
-            if (item.icon) {
-                const iconSpan = document.createElement('span');
-                iconSpan.className = 'x-dropdown-menu-item-icon';
-                iconSpan.innerHTML = `<x-icon name="${item.icon}"></x-icon>`;
-                titleDiv.appendChild(iconSpan);
-            }
-            const textSpan = document.createElement('span');
-            textSpan.className = 'x-dropdown-menu-item-text';
-            textSpan.textContent = item.label;
-            titleDiv.appendChild(textSpan);
-            const arrowSpan = document.createElement('span');
-            arrowSpan.className = 'x-dropdown-menu-submenu-arrow';
-            arrowSpan.textContent = '›';
-            titleDiv.appendChild(arrowSpan);
-            li.appendChild(titleDiv);
-            const subMenu = document.createElement('ul');
-            subMenu.className = 'x-dropdown-menu x-dropdown-menu-sub';
-            this.renderMenuItemsImperative(subMenu, item.children, currentPath);
-            li.appendChild(subMenu);
-            return li;
-        }
-        // Regular item
-        const isSelected = this.selectedKeys.includes(item.key);
-        const li = document.createElement('li');
-        const classList = [
-            'x-dropdown-menu-item',
-            item.disabled ? 'x-dropdown-menu-item-disabled' : '',
-            item.danger ? 'x-dropdown-menu-item-danger' : '',
-            isSelected ? 'x-dropdown-menu-item-selected' : '',
-            this.classNames.item || '',
-        ].filter(Boolean);
-        li.className = classList.join(' ');
-        li.setAttribute('data-key', item.key);
-        li.setAttribute('part', 'item');
-        li.setAttribute('role', 'menuitem');
-        if (item.disabled)
-            li.setAttribute('aria-disabled', 'true');
-        li.addEventListener('click', (e) => this.handleMenuItemClick(item, currentPath, e));
-        if (item.icon) {
-            const iconSpan = document.createElement('span');
-            iconSpan.className = 'x-dropdown-menu-item-icon';
-            iconSpan.setAttribute('part', 'item-icon');
-            if (item.icon.trim().startsWith('<')) {
-                iconSpan.innerHTML = item.icon;
-            }
-            else {
-                iconSpan.innerHTML = `<x-icon name="${item.icon}"></x-icon>`;
-            }
-            li.appendChild(iconSpan);
-        }
-        const contentSpan = document.createElement('span');
-        contentSpan.className = 'x-dropdown-menu-item-content';
-        contentSpan.setAttribute('part', 'item-content');
-        contentSpan.innerHTML = item.label;
-        li.appendChild(contentSpan);
-        if (isSelected && this.menu?.selectable) {
-            const checkSpan = document.createElement('span');
-            checkSpan.className = 'x-dropdown-menu-item-selected-icon';
-            checkSpan.textContent = '✓';
-            li.appendChild(checkSpan);
-        }
-        return li;
-    }
-    /**
-     * Create or update portal for dropdown overlay.
-     * @returns void
-     */
-    updatePortal() {
-        const shouldRender = !this.destroyOnHidden || !this.isDestroyed || this.isOpen;
-        if (!shouldRender || !this.isOpen) {
-            if (this.portalInstance) {
-                this.portalInstance.destroy();
-                this.portalInstance = null;
-            }
-            return;
-        }
-        // Build overlay element with x-dropdown-content
-        const overlayElement = this.buildOverlayElement();
-        if (!this.portalInstance) {
-            this.portalInstance = PortalController.create({
-                open: this.isOpen,
-                target: this.getTriggerEl(),
-                placement: this.placement,
-                zIndex: 1050,
-                content: overlayElement,
-                onPlacementChange: (p) => {
-                    this.currentPlacement = p;
-                },
-            });
-        }
-        else {
-            this.portalInstance.update({
-                open: this.isOpen,
-                target: this.getTriggerEl(),
-                placement: this.placement,
-                content: overlayElement,
-                onPlacementChange: (p) => {
-                    this.currentPlacement = p;
-                },
-            });
-        }
-    }
-    // ==================== Render ====================
-    /**
-     * Render dropdown trigger and slot.
-     * @returns JSX.Element
-     */
-    render() {
-        const { disabled, isOpen } = this;
-        return (h(Host, { key: '3c55a2db25661bc0c639dee2c6e4dc37d3bf5d9c', class: {
-                'x-dropdown-open': isOpen,
-                'x-dropdown-disabled': disabled,
-            }, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, h("div", { key: '0293f96b0503c6fed3acd4b1068a94541082a771', class: "x-dropdown-trigger", onClick: this.handleClick, onContextMenu: this.handleContextMenu }, h("slot", { key: '781896114c9317e4c8e9dd3a4a4d9b1169b6f5c4' }))));
-    }
-    static get watchers() { return {
-        "placement": [{
-                "watchPlacement": 0
-            }],
-        "open": [{
-                "watchOpen": 0
-            }]
-    }; }
-};
-XDropdown.style = xDropdownCss();
-
-const dropdownContentCss = () => `@charset "UTF-8";:root{--x-color-primary:#1677ff;--x-color-primary-rgb:22, 119, 255;--x-color-primary-contrast:#ffffff;--x-color-primary-contrast-rgb:255, 255, 255;--x-color-primary-shade:#0958d9;--x-color-primary-tint:#4096ff;--x-color-primary-bg:#e6f4ff;--x-color-primary-bg-hover:#bae0ff;--x-color-primary-border:#91caff;--x-color-primary-border-hover:#69b1ff;--x-color-primary-hover:#4096ff;--x-color-primary-active:#0958d9;--x-color-primary-text:#1677ff;--x-color-primary-text-hover:#4096ff;--x-color-primary-text-active:#0958d9;--x-color-secondary:#3dc2ff;--x-color-secondary-rgb:61, 194, 255;--x-color-secondary-contrast:#ffffff;--x-color-secondary-contrast-rgb:255, 255, 255;--x-color-secondary-shade:#36abe0;--x-color-secondary-tint:#50c8ff;--x-color-success:#52c41a;--x-color-success-rgb:82, 196, 26;--x-color-success-contrast:#ffffff;--x-color-success-contrast-rgb:255, 255, 255;--x-color-success-shade:#389e0d;--x-color-success-tint:#73d13d;--x-color-success-bg:#f6ffed;--x-color-success-bg-hover:#d9f7be;--x-color-success-border:#b7eb8f;--x-color-success-border-hover:#95de64;--x-color-success-hover:#73d13d;--x-color-success-active:#389e0d;--x-color-success-text:#52c41a;--x-color-success-text-hover:#73d13d;--x-color-success-text-active:#389e0d;--x-color-warning:#faad14;--x-color-warning-rgb:250, 173, 20;--x-color-warning-contrast:#000000;--x-color-warning-contrast-rgb:0, 0, 0;--x-color-warning-shade:#d48806;--x-color-warning-tint:#ffc53d;--x-color-warning-bg:#fffbe6;--x-color-warning-bg-hover:#fff1b8;--x-color-warning-border:#ffe58f;--x-color-warning-border-hover:#ffd666;--x-color-warning-hover:#ffc53d;--x-color-warning-active:#d48806;--x-color-warning-text:#faad14;--x-color-warning-text-hover:#ffc53d;--x-color-warning-text-active:#d48806;--x-color-danger:#ff4d4f;--x-color-danger-rgb:255, 77, 79;--x-color-danger-contrast:#ffffff;--x-color-danger-contrast-rgb:255, 255, 255;--x-color-danger-shade:#cf1322;--x-color-danger-tint:#ff7875;--x-color-error:#ff4d4f;--x-color-error-rgb:255, 77, 79;--x-color-error-bg:#fff2f0;--x-color-error-bg-hover:#ffccc7;--x-color-error-border:#ffa39e;--x-color-error-border-hover:#ff7875;--x-color-error-hover:#ff7875;--x-color-error-active:#d9363e;--x-color-error-text:#ff4d4f;--x-color-error-text-hover:#ff7875;--x-color-error-text-active:#d9363e;--x-color-info:#1677ff;--x-color-info-rgb:22, 119, 255;--x-color-info-bg:#e6f4ff;--x-color-info-bg-hover:#bae0ff;--x-color-info-border:#91caff;--x-color-info-border-hover:#69b1ff;--x-color-info-hover:#69b1ff;--x-color-info-active:#0958d9;--x-color-info-text:#1677ff;--x-color-info-text-hover:#69b1ff;--x-color-info-text-active:#0958d9;--x-color-text:rgba(0, 0, 0, 0.88);--x-color-text-secondary:rgba(0, 0, 0, 0.65);--x-color-text-tertiary:rgba(0, 0, 0, 0.45);--x-color-text-quaternary:rgba(0, 0, 0, 0.25);--x-color-text-disabled:rgba(0, 0, 0, 0.25);--x-color-text-placeholder:rgba(0, 0, 0, 0.25);--x-color-text-heading:rgba(0, 0, 0, 0.88);--x-color-text-label:rgba(0, 0, 0, 0.65);--x-color-text-description:rgba(0, 0, 0, 0.45);--x-color-text-light-solid:#ffffff;--x-color-bg-container:#ffffff;--x-color-bg-elevated:#ffffff;--x-color-bg-layout:#f5f5f5;--x-color-bg-spotlight:rgba(0, 0, 0, 0.85);--x-color-bg-mask:rgba(0, 0, 0, 0.45);--x-color-bg-base:#ffffff;--x-color-bg-container-disabled:#f5f5f5;--x-color-bg-container-loading:rgba(255, 255, 255, 0.65);--x-color-white:#ffffff;--x-color-fill:rgba(0, 0, 0, 0.15);--x-color-fill-secondary:rgba(0, 0, 0, 0.06);--x-color-fill-tertiary:rgba(0, 0, 0, 0.04);--x-color-fill-quaternary:rgba(0, 0, 0, 0.02);--x-color-border:#d9d9d9;--x-color-border-secondary:#f0f0f0;--x-color-border-bg:#ffffff;--x-color-split:rgba(5, 5, 5, 0.06);--x-color-dark:#222428;--x-color-dark-rgb:34, 36, 40;--x-color-dark-contrast:#ffffff;--x-color-dark-contrast-rgb:255, 255, 255;--x-color-dark-shade:#1e2023;--x-color-dark-tint:#383a3e;--x-color-medium:#92949c;--x-color-medium-rgb:146, 148, 156;--x-color-medium-contrast:#ffffff;--x-color-medium-contrast-rgb:255, 255, 255;--x-color-medium-shade:#808289;--x-color-medium-tint:#9d9fa6;--x-color-light:#f4f5f8;--x-color-light-rgb:244, 245, 248;--x-color-light-contrast:#000000;--x-color-light-contrast-rgb:0, 0, 0;--x-color-light-shade:#d7d8da;--x-color-light-tint:#f5f6f9;--x-font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--x-font-family-code:"SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;--x-font-size:14px;--x-font-size-sm:12px;--x-font-size-lg:16px;--x-font-size-xl:20px;--x-font-size-heading-1:38px;--x-font-size-heading-2:30px;--x-font-size-heading-3:24px;--x-font-size-heading-4:20px;--x-font-size-heading-5:16px;--x-line-height:1.5714285714285714;--x-line-height-lg:1.5;--x-line-height-sm:1.6666666666666667;--x-line-height-heading-1:1.2105263157894737;--x-line-height-heading-2:1.2666666666666666;--x-line-height-heading-3:1.3333333333333333;--x-line-height-heading-4:1.4;--x-line-height-heading-5:1.5;--x-font-weight-normal:400;--x-font-weight-medium:500;--x-font-weight-semibold:600;--x-font-weight-strong:600;--x-font-size-base:14px;--x-font-size-xxl:24px;--x-line-height-base:1.5714285714285714;--x-spacing-xxs:4px;--x-spacing-xs:8px;--x-spacing-sm:12px;--x-spacing-md:16px;--x-spacing-lg:20px;--x-spacing-xl:24px;--x-spacing-xxl:32px;--x-spacing-xxxl:48px;--x-margin-xxs:4px;--x-margin-xs:8px;--x-margin-sm:12px;--x-margin-md:16px;--x-margin-lg:24px;--x-margin-xl:32px;--x-margin-xxl:48px;--x-padding-xxs:4px;--x-padding-xs:8px;--x-padding-sm:12px;--x-padding-md:16px;--x-padding-lg:24px;--x-padding-content-horizontal-lg:24px;--x-padding-content-vertical-lg:12px;--x-padding-content-horizontal:16px;--x-padding-content-vertical:12px;--x-padding-content-horizontal-sm:16px;--x-padding-content-vertical-sm:8px;--x-border-radius:6px;--x-border-radius-xs:2px;--x-border-radius-sm:4px;--x-border-radius-lg:8px;--x-border-radius-xl:12px;--x-border-radius-outer:4px;--x-border-radius-base:6px;--x-border-width:1px;--x-border-width-base:1px;--x-shadow:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-shadow-secondary:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-shadow-tertiary:0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02);--x-shadow-lg:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-secondary:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-tertiary:0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02);--x-box-shadow-popover-arrow:2px 2px 5px rgba(0, 0, 0, 0.05);--x-box-shadow-card:0 1px 2px -2px rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.12), 0 5px 12px 4px rgba(0, 0, 0, 0.09);--x-box-shadow-drawer-right:-6px 0 16px 0 rgba(0, 0, 0, 0.08), -3px 0 6px -4px rgba(0, 0, 0, 0.12), -9px 0 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-drawer-left:6px 0 16px 0 rgba(0, 0, 0, 0.08), 3px 0 6px -4px rgba(0, 0, 0, 0.12), 9px 0 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-drawer-up:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-drawer-down:0 -6px 16px 0 rgba(0, 0, 0, 0.08), 0 -3px 6px -4px rgba(0, 0, 0, 0.12), 0 -9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-tabs-overflow-left:inset 10px 0 8px -8px rgba(0, 0, 0, 0.08);--x-box-shadow-tabs-overflow-right:inset -10px 0 8px -8px rgba(0, 0, 0, 0.08);--x-box-shadow-tabs-overflow-top:inset 0 10px 8px -8px rgba(0, 0, 0, 0.08);--x-box-shadow-tabs-overflow-bottom:inset 0 -10px 8px -8px rgba(0, 0, 0, 0.08);--x-motion-duration-fast:0.1s;--x-motion-duration-mid:0.2s;--x-motion-duration-slow:0.3s;--x-motion-ease-in-out:cubic-bezier(0.645, 0.045, 0.355, 1);--x-motion-ease-out:cubic-bezier(0.215, 0.61, 0.355, 1);--x-motion-ease-in:cubic-bezier(0.55, 0.055, 0.675, 0.19);--x-motion-ease-out-back:cubic-bezier(0.12, 0.4, 0.29, 1.46);--x-motion-ease-in-back:cubic-bezier(0.71, -0.46, 0.88, 0.6);--x-motion-ease-in-out-circle:cubic-bezier(0.78, 0.14, 0.15, 0.86);--x-motion-ease-out-circle:cubic-bezier(0.08, 0.82, 0.17, 1);--x-motion-ease-in-circle:cubic-bezier(0.6, 0.04, 0.98, 0.34);--x-motion-ease-in-quint:cubic-bezier(0.755, 0.05, 0.855, 0.06);--x-motion-ease-out-quint:cubic-bezier(0.23, 1, 0.32, 1);--x-z-index-base:0;--x-z-index-popup-base:1000;--x-z-index-popup:1030;--x-z-index-affix:10;--x-z-index-modal:1000;--x-z-index-modal-mask:1000;--x-z-index-drawer:1000;--x-z-index-popover:1030;--x-z-index-dropdown:1050;--x-z-index-tooltip:1070;--x-z-index-notification:1080;--x-z-index-message:1090;--x-z-index-popconfirm:1060;--x-z-index-table-fixed:10;--x-opacity-loading:0.65;--x-opacity-image:1;--x-opacity-disabled:0.5;--x-control-height:32px;--x-control-height-xs:24px;--x-control-height-sm:24px;--x-control-height-lg:40px;--x-control-radio-size:16px;--x-control-checkbox-size:16px;--x-control-padding-horizontal:12px;--x-control-padding-horizontal-sm:8px;--x-control-outline-width:2px;--x-control-outline:rgba(5, 145, 255, 0.1);--x-control-item-bg-hover:rgba(0, 0, 0, 0.04);--x-control-item-bg-active:#e6f4ff;--x-control-item-bg-active-hover:#bae0ff;--x-control-item-bg-active-disabled:rgba(0, 0, 0, 0.15);--x-control-tmp-outline:rgba(0, 0, 0, 0.02);--x-color-yellow:#fadb14;--x-color-yellow-rgb:250, 219, 20;--x-font-family-base:var(--x-font-family);--x-color-link:#1677ff;--x-color-link-hover:#69b1ff;--x-color-link-active:#0958d9;--x-color-icon:rgba(0, 0, 0, 0.45);--x-color-icon-hover:rgba(0, 0, 0, 0.88);--x-color-highlight:#ff4d4f;--x-color-bg-text-hover:rgba(0, 0, 0, 0.06);--x-color-bg-text-active:rgba(0, 0, 0, 0.15);--x-screen-xs:480px;--x-screen-xs-min:480px;--x-screen-xs-max:575px;--x-screen-sm:576px;--x-screen-sm-min:576px;--x-screen-sm-max:767px;--x-screen-md:768px;--x-screen-md-min:768px;--x-screen-md-max:991px;--x-screen-lg:992px;--x-screen-lg-min:992px;--x-screen-lg-max:1199px;--x-screen-xl:1200px;--x-screen-xl-min:1200px;--x-screen-xl-max:1599px;--x-screen-xxl:1600px;--x-screen-xxl-min:1600px;--x-color-fill-content:rgba(0, 0, 0, 0.06);--x-color-fill-content-hover:rgba(0, 0, 0, 0.15);--x-color-fill-alter:rgba(0, 0, 0, 0.02);--x-scrollbar-width:12px;--x-scrollbar-track-bg:rgba(0, 0, 0, 0.04);--x-scrollbar-thumb-bg:rgba(0, 0, 0, 0.25);--x-scrollbar-thumb-bg-hover:rgba(0, 0, 0, 0.35);--x-menu-dark-bg:#001529;--x-menu-dark-item-bg:#001529;--x-menu-dark-popup-bg:#001529;--x-menu-dark-submenu-item-bg:#000c17}:host{display:inline-block;position:relative;font-family:var(--x-dropdown-font-family, var(--x-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif));font-size:var(--x-dropdown-font-size, var(--x-font-size-base, 14px));line-height:var(--x-dropdown-line-height, var(--x-line-height-base, 1.5714))}:host(.x-dropdown-disabled){cursor:not-allowed;pointer-events:none}:host(.x-dropdown-disabled) .x-dropdown-trigger{cursor:not-allowed;opacity:0.5;pointer-events:none}:host(.x-dropdown-disabled) .x-dropdown-overlay{display:none}.x-dropdown-trigger{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;cursor:pointer}.x-dropdown-overlay{position:relative;z-index:var(--x-dropdown-z-index, var(--x-z-index-dropdown, 1050));min-width:var(--x-dropdown-min-width, 120px);opacity:1;visibility:visible;-webkit-animation:x-dropdown-fade-in var(--x-dropdown-motion-duration, var(--x-motion-duration-fast, 0.15s)) var(--x-dropdown-motion-ease, cubic-bezier(0.215, 0.61, 0.355, 1));animation:x-dropdown-fade-in var(--x-dropdown-motion-duration, var(--x-motion-duration-fast, 0.15s)) var(--x-dropdown-motion-ease, cubic-bezier(0.215, 0.61, 0.355, 1))}.x-dropdown-overlay.x-dropdown-hidden{display:none !important;opacity:0;pointer-events:none}@-webkit-keyframes x-dropdown-fade-in{from{opacity:0;-webkit-transform:scale(0.95);transform:scale(0.95)}to{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}@keyframes x-dropdown-fade-in{from{opacity:0;-webkit-transform:scale(0.95);transform:scale(0.95)}to{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}.x-dropdown-content{position:relative;z-index:1;background:var(--x-dropdown-bg, var(--x-color-bg-container, #ffffff));border-radius:var(--x-dropdown-border-radius, var(--x-border-radius-lg, 8px));-webkit-box-shadow:var(--x-dropdown-shadow, var(--x-box-shadow-secondary, 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05)));box-shadow:var(--x-dropdown-shadow, var(--x-box-shadow-secondary, 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05)));overflow:hidden}.x-dropdown-placement-bottom,.x-dropdown-placement-bottomLeft,.x-dropdown-placement-bottomRight{top:100%;margin-top:var(--x-dropdown-offset, var(--x-spacing-xxs, 4px));-webkit-transform-origin:top center;transform-origin:top center}.x-dropdown-placement-top,.x-dropdown-placement-topLeft,.x-dropdown-placement-topRight{bottom:100%;margin-bottom:var(--x-dropdown-offset, var(--x-spacing-xxs, 4px));-webkit-transform-origin:bottom center;transform-origin:bottom center}.x-dropdown-placement-bottom{left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.x-dropdown-placement-bottom.x-dropdown-hidden{-webkit-transform:translateX(-50%) scale(0.95);transform:translateX(-50%) scale(0.95)}.x-dropdown-placement-bottomLeft{left:0}.x-dropdown-placement-bottomRight{right:0}.x-dropdown-placement-top{left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.x-dropdown-placement-top.x-dropdown-hidden{-webkit-transform:translateX(-50%) scale(0.95);transform:translateX(-50%) scale(0.95)}.x-dropdown-placement-topLeft{left:0}.x-dropdown-placement-topRight{right:0}.x-dropdown-arrow{position:absolute;width:var(--x-dropdown-arrow-size, 8px);height:var(--x-dropdown-arrow-size, 8px);background:var(--x-dropdown-bg, var(--x-color-bg-container, #ffffff));-webkit-transform:rotate(45deg);transform:rotate(45deg);z-index:0;-webkit-box-shadow:-2px -2px 5px rgba(0, 0, 0, 0.06);box-shadow:-2px -2px 5px rgba(0, 0, 0, 0.06)}.x-dropdown-placement-bottom .x-dropdown-arrow,.x-dropdown-placement-bottomLeft .x-dropdown-arrow,.x-dropdown-placement-bottomRight .x-dropdown-arrow{top:calc(var(--x-dropdown-arrow-size, 8px) / -2)}.x-dropdown-placement-top .x-dropdown-arrow,.x-dropdown-placement-topLeft .x-dropdown-arrow,.x-dropdown-placement-topRight .x-dropdown-arrow{bottom:calc(var(--x-dropdown-arrow-size, 8px) / -2);-webkit-box-shadow:2px 2px 5px rgba(0, 0, 0, 0.06);box-shadow:2px 2px 5px rgba(0, 0, 0, 0.06)}.x-dropdown-placement-bottom .x-dropdown-arrow,.x-dropdown-placement-top .x-dropdown-arrow{left:50%;margin-left:calc(var(--x-dropdown-arrow-size, 8px) / -2)}.x-dropdown-placement-bottomLeft .x-dropdown-arrow,.x-dropdown-placement-topLeft .x-dropdown-arrow{left:var(--x-dropdown-arrow-offset, var(--x-spacing-md, 16px))}.x-dropdown-placement-bottomRight .x-dropdown-arrow,.x-dropdown-placement-topRight .x-dropdown-arrow{right:var(--x-dropdown-arrow-offset, var(--x-spacing-md, 16px))}.x-dropdown-arrow-point-at-center.x-dropdown-placement-bottomLeft .x-dropdown-arrow,.x-dropdown-arrow-point-at-center.x-dropdown-placement-topLeft .x-dropdown-arrow{left:50%;margin-left:calc(var(--x-dropdown-arrow-size, 8px) / -2)}.x-dropdown-arrow-point-at-center.x-dropdown-placement-bottomRight .x-dropdown-arrow,.x-dropdown-arrow-point-at-center.x-dropdown-placement-topRight .x-dropdown-arrow{right:50%;margin-right:calc(var(--x-dropdown-arrow-size, 8px) / -2)}.x-dropdown-menu{margin:0;padding:var(--x-dropdown-padding-block, var(--x-spacing-xxs, 4px)) 0;list-style:none;background:var(--x-dropdown-bg, var(--x-color-bg-container, #ffffff));border-radius:var(--x-dropdown-border-radius, var(--x-border-radius-lg, 8px));outline:none}.x-dropdown-menu-item{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:var(--x-dropdown-item-gap, var(--x-spacing-xs, 8px));padding:var(--x-dropdown-item-padding-block, 5px) var(--x-dropdown-item-padding-inline, 12px);color:var(--x-dropdown-color, var(--x-color-text, rgba(0, 0, 0, 0.88)));font-size:var(--x-dropdown-font-size, var(--x-font-size-base, 14px));line-height:var(--x-dropdown-line-height, var(--x-line-height-base, 1.5714));cursor:pointer;-webkit-transition:background-color var(--x-dropdown-motion-duration, var(--x-motion-duration-fast, 0.15s));transition:background-color var(--x-dropdown-motion-duration, var(--x-motion-duration-fast, 0.15s))}.x-dropdown-menu-item:hover:not(.x-dropdown-menu-item-disabled){background-color:var(--x-dropdown-item-bg-hover, var(--x-color-bg-text-hover, rgba(0, 0, 0, 0.04)))}.x-dropdown-menu-item:active:not(.x-dropdown-menu-item-disabled){background-color:var(--x-dropdown-item-bg-active, var(--x-color-bg-text-active, rgba(0, 0, 0, 0.08)))}.x-dropdown-menu-item-disabled{color:var(--x-dropdown-color-disabled, var(--x-color-text-disabled, rgba(0, 0, 0, 0.25)));cursor:not-allowed}.x-dropdown-menu-item-danger{color:var(--x-dropdown-color-danger, var(--x-color-error, #ff4d4f))}.x-dropdown-menu-item-danger:hover:not(.x-dropdown-menu-item-disabled){color:var(--x-dropdown-color-danger, var(--x-color-error, #ff4d4f));background-color:var(--x-dropdown-item-bg-danger-hover, var(--x-color-error-bg, #fff2f0))}.x-dropdown-menu-item-selected{font-weight:var(--x-dropdown-item-font-weight-selected, var(--x-font-weight-semibold, 600));background-color:var(--x-dropdown-item-bg-selected, var(--x-color-primary-bg, #e6f4ff))}.x-dropdown-menu-item-icon{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;font-size:var(--x-dropdown-item-icon-size, 14px);color:inherit}.x-dropdown-menu-item-content{-ms-flex:1;flex:1;min-width:0}.x-dropdown-menu-item-selected-icon{margin-left:auto;font-size:12px;color:var(--x-dropdown-color-primary, var(--x-color-primary, #1677ff))}.x-dropdown-menu-item-divider{height:1px;margin:var(--x-dropdown-divider-margin, var(--x-spacing-xxs, 4px)) 0;background-color:var(--x-dropdown-divider-color, var(--x-color-border, #d9d9d9));list-style:none}.x-dropdown-menu-item-group{list-style:none}.x-dropdown-menu-item-group-title{padding:var(--x-dropdown-group-title-padding, 5px 12px);color:var(--x-dropdown-color-secondary, var(--x-color-text-secondary, rgba(0, 0, 0, 0.45)));font-size:var(--x-dropdown-font-size-sm, var(--x-font-size-sm, 12px));font-weight:var(--x-dropdown-group-title-font-weight, var(--x-font-weight-semibold, 600))}.x-dropdown-menu-item-group-list{margin:0;padding:0;list-style:none}.x-dropdown-menu-submenu{position:relative;list-style:none}.x-dropdown-menu-submenu:hover>.x-dropdown-menu-sub,.x-dropdown-menu-submenu.x-dropdown-menu-submenu-open>.x-dropdown-menu-sub{opacity:1;visibility:visible;pointer-events:auto}.x-dropdown-menu-submenu::after{content:"";position:absolute;top:0;right:-8px;width:8px;height:100%}.x-dropdown-menu-submenu.x-dropdown-menu-item-disabled>.x-dropdown-menu-submenu-title{color:var(--x-dropdown-color-disabled, var(--x-color-text-disabled, rgba(0, 0, 0, 0.25)));cursor:not-allowed}.x-dropdown-menu-submenu.x-dropdown-menu-item-disabled>.x-dropdown-menu-submenu-title:hover{background-color:transparent}.x-dropdown-menu-submenu.x-dropdown-menu-item-disabled:hover>.x-dropdown-menu-sub{opacity:0;visibility:hidden;pointer-events:none}.x-dropdown-menu-submenu-title{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:var(--x-dropdown-item-gap, var(--x-spacing-xs, 8px));padding:var(--x-dropdown-item-padding-block, 5px) var(--x-dropdown-item-padding-inline, 12px);color:var(--x-dropdown-color, var(--x-color-text, rgba(0, 0, 0, 0.88)));font-size:var(--x-dropdown-font-size, var(--x-font-size-base, 14px));line-height:var(--x-dropdown-line-height, var(--x-line-height-base, 1.5714));cursor:pointer;-webkit-transition:background-color var(--x-dropdown-motion-duration, var(--x-motion-duration-fast, 0.15s));transition:background-color var(--x-dropdown-motion-duration, var(--x-motion-duration-fast, 0.15s))}.x-dropdown-menu-submenu-title:hover{background-color:var(--x-dropdown-item-bg-hover, var(--x-color-bg-text-hover, rgba(0, 0, 0, 0.04)))}.x-dropdown-menu-submenu-title .x-dropdown-menu-item-text{-ms-flex:1;flex:1}.x-dropdown-menu-submenu-arrow{font-size:10px;color:var(--x-dropdown-color-secondary, var(--x-color-text-secondary, rgba(0, 0, 0, 0.45)));-webkit-transition:-webkit-transform var(--x-dropdown-motion-duration, var(--x-motion-duration-fast, 0.15s));transition:-webkit-transform var(--x-dropdown-motion-duration, var(--x-motion-duration-fast, 0.15s));transition:transform var(--x-dropdown-motion-duration, var(--x-motion-duration-fast, 0.15s));transition:transform var(--x-dropdown-motion-duration, var(--x-motion-duration-fast, 0.15s)), -webkit-transform var(--x-dropdown-motion-duration, var(--x-motion-duration-fast, 0.15s))}.x-dropdown-menu-submenu:hover>.x-dropdown-menu-submenu-title .x-dropdown-menu-submenu-arrow{-webkit-transform:translateX(2px);transform:translateX(2px)}.x-dropdown-menu-sub{position:absolute;top:-var(--x-dropdown-padding-block, var(--x-spacing-xxs, 4px));left:calc(100% + 4px);min-width:var(--x-dropdown-min-width, 120px);padding:var(--x-dropdown-padding-block, var(--x-spacing-xxs, 4px)) 0;background:var(--x-dropdown-bg, var(--x-color-bg-container, #ffffff));border-radius:var(--x-dropdown-border-radius, var(--x-border-radius-lg, 8px));-webkit-box-shadow:var(--x-dropdown-shadow, var(--x-box-shadow-secondary, 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05)));box-shadow:var(--x-dropdown-shadow, var(--x-box-shadow-secondary, 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05)));opacity:0;visibility:hidden;pointer-events:none;z-index:1;-webkit-transition:opacity var(--x-dropdown-motion-duration, var(--x-motion-duration-fast, 0.15s)), visibility var(--x-dropdown-motion-duration, var(--x-motion-duration-fast, 0.15s));transition:opacity var(--x-dropdown-motion-duration, var(--x-motion-duration-fast, 0.15s)), visibility var(--x-dropdown-motion-duration, var(--x-motion-duration-fast, 0.15s))}.x-dropdown-menu-sub .x-dropdown-menu-submenu{position:relative;list-style:none}.x-dropdown-menu-sub .x-dropdown-menu-submenu:hover>.x-dropdown-menu-sub{opacity:1;visibility:visible;pointer-events:auto}.x-dropdown-menu-sub .x-dropdown-menu-submenu::after{content:"";position:absolute;top:0;right:-8px;width:8px;height:100%}.x-dropdown-menu-sub .x-dropdown-menu-sub{z-index:2}.x-dropdown-menu-sub .x-dropdown-menu-sub .x-dropdown-menu-sub{z-index:3}.x-dropdown-menu-sub .x-dropdown-menu-sub .x-dropdown-menu-sub .x-dropdown-menu-sub{z-index:4}`;
-
-const XDropdownContent = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-    }
-    get el() { return getElement(this); }
-    /**
-     * Class map for content wrapper.
-     * @example
-     * <x-dropdown-content overlayClasses={{ 'x-dropdown': true }}></x-dropdown-content>
-     */
-    overlayClasses = {};
-    /**
-     * Inline style map for content wrapper.
-     * @example
-     * <x-dropdown-content overlayStyle={{ width: '200px' }}></x-dropdown-content>
-     */
-    overlayStyle = {};
-    /**
-     * Whether to show arrow.
-     * @example
-     * <x-dropdown-content showArrow></x-dropdown-content>
-     */
-    showArrow = false;
-    /**
-     * Whether content is open (for aria).
-     * @example
-     * <x-dropdown-content isOpen></x-dropdown-content>
-     */
-    isOpen = false;
-    /**
-     * Mouse enter handler.
-     * @example
-     * <x-dropdown-content overlayMouseEnter={(ev) => console.log(ev)}></x-dropdown-content>
-     */
-    overlayMouseEnter;
-    /**
-     * Mouse leave handler.
-     * @example
-     * <x-dropdown-content overlayMouseLeave={(ev) => console.log(ev)}></x-dropdown-content>
-     */
-    overlayMouseLeave;
-    /**
-     * Callback to pass content element ref.
-     * @example
-     * <x-dropdown-content setOverlayRef={(el) => console.log(el)}></x-dropdown-content>
-     */
-    setOverlayRef;
-    /**
-     * Overlay element reference.
-     */
-    overlayEl = null;
-    /**
-     * Provide overlay ref after initial render.
-     * @returns void
-     */
-    componentDidLoad() {
-        this.setOverlayRef?.(this.overlayEl);
-    }
-    /**
-     * Cleanup overlay ref on disconnect.
-     * @returns void
-     */
-    disconnectedCallback() {
-        this.setOverlayRef?.(null);
-    }
-    /**
-     * Capture overlay ref and forward to callback.
-     * @param el - Overlay element.
-     * @returns void
-     */
-    setRef = (el) => {
-        this.overlayEl = el;
-        this.setOverlayRef?.(el);
-    };
-    /**
-     * Render dropdown content wrapper and slots.
-     * @returns JSX.Element
-     * @example
-     * <x-dropdown-content overlayClasses={{ 'x-dropdown': true }}></x-dropdown-content>
-     */
-    render() {
-        return (h("div", { key: '3df424e623d42d803717f984c68072f310d9be6f', class: this.overlayClasses, style: this.overlayStyle, ref: this.setRef, onMouseEnter: (ev) => this.overlayMouseEnter?.(ev), onMouseLeave: (ev) => this.overlayMouseLeave?.(ev), part: "dropdown", role: "listbox", "aria-hidden": !this.isOpen }, this.showArrow && h("div", { key: '513147579a30a659637b8493cf1eeade67a41aa2', class: "x-dropdown-arrow", part: "arrow" }), h("div", { key: '61be59c9eb825d556e90ddbd6a46043407475f46', class: "x-dropdown-content" }, h("slot", { key: '22284a7a0fe300c49a6e614de55f34614d92c77d' }), h("slot", { key: '1cff971d7a6bdba672f1a9dc947cfcd2cc12ccc0', name: "overlay" }))));
-    }
-};
-XDropdownContent.style = dropdownContentCss();
-
-export { XDropdown as x_dropdown, XDropdownContent as x_dropdown_content };