@xlabs-store/core 0.0.1

package/dist/esm/x-color-picker_9.entry.js

@@ -0,0 +1,3075 @@
+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';
+import { g as getIcon } from './config-BPeosvTA.js';
+import { c as createColor } from './types-C_QdJRdB.js';
+import { A as AbstractControl } from './abstract-control-XBF88YT_.js';
+import { t as translate } from './locale.service-D66tF8_2.js';
+
+const xColorPickerCss = () => `: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;font-size:14px;line-height:1.5715}:host(.x-color-picker-disabled){cursor:not-allowed}.x-color-picker-trigger{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;min-width:44px;height:32px;padding:4px 8px;background-color:#fff;border:1px solid #d9d9d9;border-radius:6px;cursor:pointer;-webkit-transition:all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);transition:all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);gap:8px}.x-color-picker-trigger:hover{border-color:#4096ff}.x-color-picker-trigger:focus-visible{border-color:#1677ff;outline:none;-webkit-box-shadow:0 0 0 2px rgba(22, 119, 255, 0.1);box-shadow:0 0 0 2px rgba(22, 119, 255, 0.1)}:host(.x-color-picker-sm) .x-color-picker-trigger{height:24px;padding:0 4px;font-size:12px;border-radius:4px}:host(.x-color-picker-sm) .x-color-picker-color-block{width:16px;height:16px}:host(.x-color-picker-lg) .x-color-picker-trigger{height:40px;padding:4px 12px}:host(.x-color-picker-lg) .x-color-picker-color-block{width:28px;height:28px}:host(.x-color-picker-disabled) .x-color-picker-trigger{background-color:#f5f5f5;border-color:#d9d9d9;cursor:not-allowed}:host(.x-color-picker-disabled) .x-color-picker-trigger:hover{border-color:#d9d9d9}:host(.x-color-picker-disabled) .x-color-picker-text{color:rgba(0, 0, 0, 0.25)}.x-color-picker-color-block{position:relative;width:24px;height:24px;border-radius:4px;overflow:hidden;-webkit-box-shadow:inset 0 0 1px 0 rgba(0, 0, 0, 0.25);box-shadow:inset 0 0 1px 0 rgba(0, 0, 0, 0.25)}.x-color-picker-color-block::before{content:"";position:absolute;inset:0;background-image:conic-gradient(rgba(0, 0, 0, 0.06) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.06) 50%, rgba(0, 0, 0, 0.06) 75%, transparent 75%);background-size:8px 8px;z-index:0}.x-color-picker-color-block-inner{position:relative;width:100%;height:100%;border-radius:inherit;z-index:1}.x-color-picker-color-block-cleared .x-color-picker-color-block-inner::after{content:"";position:absolute;top:50%;left:-2px;right:-2px;height:2px;background:#ff4d4f;-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}.x-color-picker-text{color:rgba(0, 0, 0, 0.88);font-size:inherit;white-space:nowrap}.x-color-picker-arrow{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;color:rgba(0, 0, 0, 0.45);font-size:12px;-webkit-transition:-webkit-transform 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);transition:-webkit-transform 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);transition:transform 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);transition:transform 0.2s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.2s cubic-bezier(0.645, 0.045, 0.355, 1)}.x-color-picker-arrow.x-color-picker-arrow-open{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.x-color-picker-clear{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:16px;height:16px;color:rgba(0, 0, 0, 0.45);font-size:12px;cursor:pointer;-webkit-transition:color 0.2s;transition:color 0.2s}.x-color-picker-clear:hover{color:rgba(0, 0, 0, 0.88)}`;
+
+const XColorPicker = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.xChange = createEvent(this, "xChange", 7);
+        this.xChangeComplete = createEvent(this, "xChangeComplete", 7);
+        this.xFormatChange = createEvent(this, "xFormatChange", 7);
+        this.xOpenChange = createEvent(this, "xOpenChange", 7);
+        this.xClear = createEvent(this, "xClear", 7);
+    }
+    get el() { return getElement(this); }
+    // ==================== Props ====================
+    /**
+     * Allow clearing color selected
+     * @default false
+     * @example
+     * <x-color-picker allowClear></x-color-picker>
+     */
+    allowClear = false;
+    /**
+     * Default value of color
+     * @example
+     * <x-color-picker defaultValue="#ff4d4f"></x-color-picker>
+     */
+    defaultValue;
+    /**
+     * Default format of color
+     * @default 'hex'
+     * @example
+     * <x-color-picker defaultFormat="rgb"></x-color-picker>
+     */
+    defaultFormat = 'hex';
+    /**
+     * Disable ColorPicker
+     * @default false
+     * @example
+     * <x-color-picker disabled></x-color-picker>
+     */
+    disabled = false;
+    /**
+     * Disable Alpha slider
+     * @default false
+     * @example
+     * <x-color-picker disabledAlpha></x-color-picker>
+     */
+    disabledAlpha = false;
+    /**
+     * Disable format selector
+     * @default false
+     * @example
+     * <x-color-picker disabledFormat></x-color-picker>
+     */
+    disabledFormat = false;
+    /**
+     * Format of color
+     * @example
+     * <x-color-picker format="hsb"></x-color-picker>
+     */
+    format;
+    /**
+     * Whether to show popup
+     * @example
+     * <x-color-picker open></x-color-picker>
+     */
+    open;
+    /**
+     * Preset colors
+     * @example
+     * <x-color-picker presets={[{ label: 'Primary', colors: ['#1677ff'] }]}></x-color-picker>
+     */
+    presets;
+    /**
+     * Placement of popup
+     * @default 'bottomLeft'
+     * @example
+     * <x-color-picker placement="topLeft"></x-color-picker>
+     */
+    placement = 'bottomLeft';
+    /**
+     * Show color text
+     * @default false
+     * @example
+     * <x-color-picker showText></x-color-picker>
+     */
+    showText = false;
+    /**
+     * Size of trigger
+     * @default 'middle'
+     * @example
+     * <x-color-picker size="small"></x-color-picker>
+     */
+    size = 'middle';
+    /**
+     * Trigger mode
+     * @default 'click'
+     * @example
+     * <x-color-picker trigger="hover"></x-color-picker>
+     */
+    trigger = 'click';
+    /**
+     * Value of color
+     * @example
+     * <x-color-picker value="#1677ff"></x-color-picker>
+     */
+    value;
+    /**
+     * Custom class names
+     * @example
+     * <x-color-picker classNames={{ root: 'my-color-picker' }}></x-color-picker>
+     */
+    classNames;
+    /**
+     * Custom styles
+     * @example
+     * <x-color-picker styles={{ root: { minWidth: '120px' } }}></x-color-picker>
+     */
+    styles;
+    // ==================== Events ====================
+    /**
+     * Callback when value is changed
+     * @example
+     * <x-color-picker onXChange={(ev) => console.log(ev.detail)}></x-color-picker>
+     */
+    xChange;
+    /**
+     * Called when color pick ends
+     * @example
+     * <x-color-picker onXChangeComplete={(ev) => console.log(ev.detail)}></x-color-picker>
+     */
+    xChangeComplete;
+    /**
+     * Callback when format is changed
+     * @example
+     * <x-color-picker onXFormatChange={(ev) => console.log(ev.detail)}></x-color-picker>
+     */
+    xFormatChange;
+    /**
+     * Callback when open is changed
+     * @example
+     * <x-color-picker onXOpenChange={(ev) => console.log(ev.detail)}></x-color-picker>
+     */
+    xOpenChange;
+    /**
+     * Called when clear
+     * @example
+     * <x-color-picker onXClear={() => {}}></x-color-picker>
+     */
+    xClear;
+    // ==================== State ====================
+    /**
+     * Internal open state for uncontrolled mode.
+     */
+    internalOpen = false;
+    /**
+     * Internal color format.
+     */
+    internalFormat = 'hex';
+    /**
+     * Internal color object.
+     */
+    internalColor = null;
+    /**
+     * Cleared state flag.
+     */
+    isCleared = false;
+    // ==================== Private Properties ====================
+    /**
+     * Trigger element reference.
+     */
+    triggerRef;
+    /**
+     * Portal instance for panel.
+     */
+    portalInstance = null;
+    /**
+     * Panel element reference.
+     */
+    panelElement = null;
+    /**
+     * Dragging flag for hover behavior.
+     */
+    isDragging = false;
+    // ==================== Lifecycle ====================
+    /**
+     * Initialize format and color.
+     * @returns void
+     */
+    componentWillLoad() {
+        // Initialize format
+        this.internalFormat = this.format ?? this.defaultFormat;
+        // Initialize color
+        const initialValue = this.value ?? this.defaultValue ?? '#1677ff';
+        if (typeof initialValue === 'string') {
+            this.internalColor = createColor(initialValue);
+        }
+    }
+    /**
+     * Cleanup portal on disconnect.
+     * @returns void
+     */
+    disconnectedCallback() {
+        this.destroyPortal();
+    }
+    // ==================== Watchers ====================
+    /**
+     * Sync internal color when value changes.
+     * @param newValue - New color value.
+     * @returns void
+     */
+    handleValueChange(newValue) {
+        if (typeof newValue === 'string') {
+            this.internalColor = createColor(newValue);
+            this.isCleared = false;
+        }
+    }
+    /**
+     * Sync format when format prop changes.
+     * @param newFormat - New format.
+     * @returns void
+     */
+    handleFormatChange(newFormat) {
+        if (newFormat) {
+            this.internalFormat = newFormat;
+        }
+    }
+    /**
+     * Sync open state when controlled prop changes.
+     * @param newOpen - Open state.
+     * @returns void
+     */
+    handleOpenPropChange(newOpen) {
+        if (newOpen !== undefined) {
+            this.setOpen(newOpen);
+        }
+    }
+    // ==================== Listeners ====================
+    /**
+     * Close panel on outside click.
+     *
+     * Flow:
+     * 1. Checks if panel is open.
+     * 2. Determines click target.
+     * 3. Checks if click is inside the trigger element or the portal panel.
+     * 4. If outside both, closes the panel by calling \`setOpen(false)\`.
+     *
+     * @param e - Mouse event.
+     * @returns void
+     */
+    handleDocumentClick(e) {
+        if (!this.internalOpen)
+            return;
+        const path = e.composedPath();
+        const isInsideTrigger = path.includes(this.el);
+        const portalEl = this.portalInstance?.getElement();
+        const isInsidePanel = portalEl ? path.includes(portalEl) : false;
+        if (!isInsideTrigger && !isInsidePanel) {
+            this.setOpen(false);
+        }
+    }
+    /**
+     * Close panel on Escape key.
+     * @param e - Keyboard event.
+     * @returns void
+     */
+    handleKeydown(e) {
+        if (e.key === 'Escape' && this.internalOpen) {
+            this.setOpen(false);
+        }
+    }
+    // ==================== Public Methods ====================
+    /**
+     * Get current color object
+     * @returns Promise<Color | null>
+     * @example
+     * const color = await el.getColor()
+     */
+    async getColor() {
+        return this.internalColor;
+    }
+    // ==================== Private Methods ====================
+    /**
+     * Update open state and portal.
+     *
+     * Flow:
+     * 1. Checks if disabled; returns if true.
+     * 2. Updates `internalOpen` state.
+     * 3. Emits `xOpenChange` event.
+     * 4. Calls `updatePortal` (if opening) or `destroyPortal` (if closing).
+     *
+     * @param open - Open state.
+     * @returns void
+     */
+    setOpen(open) {
+        if (this.disabled)
+            return;
+        this.internalOpen = open;
+        this.xOpenChange.emit({ open });
+        if (open) {
+            this.updatePortal();
+        }
+        else {
+            this.destroyPortal();
+        }
+    }
+    /**
+     * Handle trigger click.
+     * @returns void
+     */
+    handleTriggerClick = () => {
+        if (this.trigger === 'click') {
+            this.setOpen(!this.internalOpen);
+        }
+    };
+    /**
+     * Handle trigger mouse enter.
+     * @returns void
+     */
+    handleTriggerMouseEnter = () => {
+        if (this.trigger === 'hover') {
+            this.setOpen(true);
+        }
+    };
+    /**
+     * Handle trigger mouse leave.
+     * @returns void
+     */
+    handleTriggerMouseLeave = () => {
+        if (this.trigger === 'hover' && !this.isDragging) {
+            const portalEl = this.portalInstance?.getElement();
+            setTimeout(() => {
+                if (!portalEl?.matches(':hover') && !this.el.matches(':hover')) {
+                    this.setOpen(false);
+                }
+            }, 100);
+        }
+    };
+    /**
+     * Handle clear action.
+     * @param e - Event.
+     * @returns void
+     */
+    handleClear = (e) => {
+        e.stopPropagation();
+        this.isCleared = true;
+        this.xClear.emit();
+    };
+    // ==================== Portal Management ====================
+    /**
+     * Build color picker panel element.
+     * @returns HTMLElement
+     */
+    buildPanelElement() {
+        // Create x-color-picker-panel component
+        const panelEl = document.createElement('x-color-picker-panel');
+        // Set props on the panel element
+        panelEl.color = this.internalColor;
+        panelEl.format = this.internalFormat;
+        panelEl.disabledAlpha = this.disabledAlpha;
+        panelEl.disabledFormat = this.disabledFormat;
+        panelEl.presets = this.presets;
+        panelEl.allowClear = this.allowClear;
+        // Apply custom class and styles
+        if (this.classNames?.popup) {
+            panelEl.classList.add(...this.classNames.popup.split(' '));
+        }
+        if (this.styles?.popup) {
+            Object.assign(panelEl.style, this.styles.popup);
+        }
+        // Bind events
+        panelEl.addEventListener('colorChange', (e) => {
+            this.handleColorChange(e.detail);
+        });
+        panelEl.addEventListener('colorChangeComplete', (e) => {
+            this.xChangeComplete.emit(e.detail);
+            this.isDragging = false;
+        });
+        panelEl.addEventListener('formatChange', (e) => {
+            this.internalFormat = e.detail;
+            this.xFormatChange.emit({ format: e.detail });
+        });
+        panelEl.addEventListener('colorClear', () => {
+            this.isCleared = true;
+            this.xClear.emit();
+            this.setOpen(false);
+        });
+        // Track dragging state
+        panelEl.addEventListener('mousedown', () => {
+            this.isDragging = true;
+        });
+        return panelEl;
+    }
+    /**
+     * Get trigger element for portal target.
+     * @returns HTMLElement
+     */
+    getWrapperEl() {
+        return this.triggerRef;
+    }
+    /**
+     * Create or update portal for panel.
+     *
+     * Flow:
+     * 1. Checks if `internalOpen` is true.
+     * 2. Builds or reuses the panel element.
+     * 3. Uses `PortalController` to render the panel:
+     *    - Creates new instance if none exists.
+     *    - Updates existing instance with new content/position.
+     * 4. Requests animation frame to ensure position update.
+     *
+     * @returns void
+     */
+    updatePortal() {
+        if (!this.internalOpen) {
+            this.destroyPortal();
+            return;
+        }
+        this.panelElement = this.buildPanelElement();
+        if (!this.portalInstance) {
+            this.portalInstance = PortalController.create({
+                open: true,
+                target: this.getWrapperEl(),
+                placement: this.placement,
+                content: this.panelElement,
+                zIndex: 1050,
+            });
+        }
+        else {
+            this.portalInstance.update({
+                open: true,
+                target: this.getWrapperEl(),
+                placement: this.placement,
+                content: this.panelElement,
+            });
+        }
+        // Update position after render
+        requestAnimationFrame(() => {
+            if (this.portalInstance) {
+                this.portalInstance.update({});
+            }
+        });
+    }
+    /**
+     * Destroy portal instance if present.
+     * @returns void
+     */
+    destroyPortal() {
+        if (this.portalInstance) {
+            this.portalInstance.destroy();
+            this.portalInstance = null;
+            this.panelElement = null;
+        }
+    }
+    /**
+     * Handle color change from panel.
+     * @param color - New color.
+     * @returns void
+     */
+    handleColorChange(color) {
+        this.internalColor = color;
+        this.isCleared = false;
+        this.value = color.toHexString();
+        this.xChange.emit({
+            color,
+            css: color.toCssString(),
+        });
+        // Update panel element with new color
+        if (this.panelElement) {
+            this.panelElement.color = color;
+        }
+    }
+    // ==================== Render ====================
+    /**
+     * Get display text for current color.
+     * @returns string
+     */
+    getDisplayText() {
+        if (!this.internalColor || this.isCleared)
+            return '';
+        if (typeof this.showText === 'function') {
+            return this.showText(this.internalColor);
+        }
+        switch (this.internalFormat) {
+            case 'rgb':
+                return this.internalColor.toRgbString();
+            case 'hsb':
+                return this.internalColor.toHsbString();
+            default:
+                return this.internalColor.toHexString().toUpperCase();
+        }
+    }
+    /**
+     * Render down arrow icon.
+     * @returns JSX.Element
+     */
+    renderDownArrow() {
+        return (
+        // <svg viewBox="64 64 896 896" focusable="false" width="1em" height="1em" fill="currentColor">
+        //   <path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z" />
+        // </svg>
+        h("x-icon", { name: getIcon('arrowDown') }));
+    }
+    /**
+     * Render clear icon.
+     * @returns JSX.Element
+     */
+    renderCloseIcon() {
+        return (
+        // <svg viewBox="64 64 896 896" focusable="false" width="1em" height="1em" fill="currentColor">
+        //   <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z" />
+        // </svg>
+        h("x-icon", { name: getIcon('clear') }));
+    }
+    /**
+     * Render trigger and optional text.
+     * @returns JSX.Element
+     */
+    render() {
+        const hostClasses = {
+            'x-color-picker': true,
+            'x-color-picker-sm': this.size === 'small',
+            'x-color-picker-lg': this.size === 'large',
+            'x-color-picker-disabled': this.disabled,
+            [this.classNames?.root ?? '']: !!this.classNames?.root,
+        };
+        const colorValue = this.internalColor && !this.isCleared
+            ? this.internalColor.toCssString()
+            : 'transparent';
+        return (h(Host, { key: 'f8f38365b7fd8c36aac0d9dc1799fc568516fea9', class: hostClasses, style: this.styles?.root }, h("div", { key: '8df150a9ac5477f34c21ef391c6a110a9518127e', class: "x-color-picker-trigger", ref: (el) => (this.triggerRef = el), onClick: this.handleTriggerClick, onMouseEnter: this.handleTriggerMouseEnter, onMouseLeave: this.handleTriggerMouseLeave, tabindex: this.disabled ? -1 : 0, role: "button", "aria-haspopup": "true", "aria-expanded": this.internalOpen ? 'true' : 'false' }, h("slot", { key: '77c612bde00f68546e52eb30351f9e26c724bbd8' }, h("div", { key: '19ddcbfc6acea0c985d263abeae54facb1878856', class: {
+                'x-color-picker-color-block': true,
+                'x-color-picker-color-block-cleared': this.isCleared,
+            } }, h("div", { key: 'd6223ba45365f694a1b760fc0779273903a3e080', class: "x-color-picker-color-block-inner", style: { background: colorValue } })), this.showText && (h("span", { key: 'b80debccfafa45df16aeabedfafcc9e0721a3a4d', class: "x-color-picker-text" }, this.getDisplayText())), this.allowClear && !this.isCleared && this.internalColor && (h("span", { key: '8caa5439b9ad31915420be95deb94eff604bc411', class: "x-color-picker-clear", onClick: this.handleClear }, this.renderCloseIcon())), h("span", { key: 'ed22036212268e812ebfe9869918cd31fcebaaef', class: {
+                'x-color-picker-arrow': true,
+                'x-color-picker-arrow-open': this.internalOpen,
+            } }, this.renderDownArrow())))));
+    }
+    static get watchers() { return {
+        "value": [{
+                "handleValueChange": 0
+            }],
+        "format": [{
+                "handleFormatChange": 0
+            }],
+        "open": [{
+                "handleOpenPropChange": 0
+            }]
+    }; }
+};
+XColorPicker.style = xColorPickerCss();
+
+const xDividerCss = () => `@charset "UTF-8";:root{--x-color-primary:#1677ff;--x-color-primary-rgb:22, 119, 255;--x-color-primary-contrast:#ffffff;--x-color-primary-contrast-rgb:255, 255, 255;--x-color-primary-shade:#0958d9;--x-color-primary-tint:#4096ff;--x-color-primary-bg:#e6f4ff;--x-color-primary-bg-hover:#bae0ff;--x-color-primary-border:#91caff;--x-color-primary-border-hover:#69b1ff;--x-color-primary-hover:#4096ff;--x-color-primary-active:#0958d9;--x-color-primary-text:#1677ff;--x-color-primary-text-hover:#4096ff;--x-color-primary-text-active:#0958d9;--x-color-secondary:#3dc2ff;--x-color-secondary-rgb:61, 194, 255;--x-color-secondary-contrast:#ffffff;--x-color-secondary-contrast-rgb:255, 255, 255;--x-color-secondary-shade:#36abe0;--x-color-secondary-tint:#50c8ff;--x-color-success:#52c41a;--x-color-success-rgb:82, 196, 26;--x-color-success-contrast:#ffffff;--x-color-success-contrast-rgb:255, 255, 255;--x-color-success-shade:#389e0d;--x-color-success-tint:#73d13d;--x-color-success-bg:#f6ffed;--x-color-success-bg-hover:#d9f7be;--x-color-success-border:#b7eb8f;--x-color-success-border-hover:#95de64;--x-color-success-hover:#73d13d;--x-color-success-active:#389e0d;--x-color-success-text:#52c41a;--x-color-success-text-hover:#73d13d;--x-color-success-text-active:#389e0d;--x-color-warning:#faad14;--x-color-warning-rgb:250, 173, 20;--x-color-warning-contrast:#000000;--x-color-warning-contrast-rgb:0, 0, 0;--x-color-warning-shade:#d48806;--x-color-warning-tint:#ffc53d;--x-color-warning-bg:#fffbe6;--x-color-warning-bg-hover:#fff1b8;--x-color-warning-border:#ffe58f;--x-color-warning-border-hover:#ffd666;--x-color-warning-hover:#ffc53d;--x-color-warning-active:#d48806;--x-color-warning-text:#faad14;--x-color-warning-text-hover:#ffc53d;--x-color-warning-text-active:#d48806;--x-color-danger:#ff4d4f;--x-color-danger-rgb:255, 77, 79;--x-color-danger-contrast:#ffffff;--x-color-danger-contrast-rgb:255, 255, 255;--x-color-danger-shade:#cf1322;--x-color-danger-tint:#ff7875;--x-color-error:#ff4d4f;--x-color-error-rgb:255, 77, 79;--x-color-error-bg:#fff2f0;--x-color-error-bg-hover:#ffccc7;--x-color-error-border:#ffa39e;--x-color-error-border-hover:#ff7875;--x-color-error-hover:#ff7875;--x-color-error-active:#d9363e;--x-color-error-text:#ff4d4f;--x-color-error-text-hover:#ff7875;--x-color-error-text-active:#d9363e;--x-color-info:#1677ff;--x-color-info-rgb:22, 119, 255;--x-color-info-bg:#e6f4ff;--x-color-info-bg-hover:#bae0ff;--x-color-info-border:#91caff;--x-color-info-border-hover:#69b1ff;--x-color-info-hover:#69b1ff;--x-color-info-active:#0958d9;--x-color-info-text:#1677ff;--x-color-info-text-hover:#69b1ff;--x-color-info-text-active:#0958d9;--x-color-text:rgba(0, 0, 0, 0.88);--x-color-text-secondary:rgba(0, 0, 0, 0.65);--x-color-text-tertiary:rgba(0, 0, 0, 0.45);--x-color-text-quaternary:rgba(0, 0, 0, 0.25);--x-color-text-disabled:rgba(0, 0, 0, 0.25);--x-color-text-placeholder:rgba(0, 0, 0, 0.25);--x-color-text-heading:rgba(0, 0, 0, 0.88);--x-color-text-label:rgba(0, 0, 0, 0.65);--x-color-text-description:rgba(0, 0, 0, 0.45);--x-color-text-light-solid:#ffffff;--x-color-bg-container:#ffffff;--x-color-bg-elevated:#ffffff;--x-color-bg-layout:#f5f5f5;--x-color-bg-spotlight:rgba(0, 0, 0, 0.85);--x-color-bg-mask:rgba(0, 0, 0, 0.45);--x-color-bg-base:#ffffff;--x-color-bg-container-disabled:#f5f5f5;--x-color-bg-container-loading:rgba(255, 255, 255, 0.65);--x-color-white:#ffffff;--x-color-fill:rgba(0, 0, 0, 0.15);--x-color-fill-secondary:rgba(0, 0, 0, 0.06);--x-color-fill-tertiary:rgba(0, 0, 0, 0.04);--x-color-fill-quaternary:rgba(0, 0, 0, 0.02);--x-color-border:#d9d9d9;--x-color-border-secondary:#f0f0f0;--x-color-border-bg:#ffffff;--x-color-split:rgba(5, 5, 5, 0.06);--x-color-dark:#222428;--x-color-dark-rgb:34, 36, 40;--x-color-dark-contrast:#ffffff;--x-color-dark-contrast-rgb:255, 255, 255;--x-color-dark-shade:#1e2023;--x-color-dark-tint:#383a3e;--x-color-medium:#92949c;--x-color-medium-rgb:146, 148, 156;--x-color-medium-contrast:#ffffff;--x-color-medium-contrast-rgb:255, 255, 255;--x-color-medium-shade:#808289;--x-color-medium-tint:#9d9fa6;--x-color-light:#f4f5f8;--x-color-light-rgb:244, 245, 248;--x-color-light-contrast:#000000;--x-color-light-contrast-rgb:0, 0, 0;--x-color-light-shade:#d7d8da;--x-color-light-tint:#f5f6f9;--x-font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--x-font-family-code:"SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;--x-font-size:14px;--x-font-size-sm:12px;--x-font-size-lg:16px;--x-font-size-xl:20px;--x-font-size-heading-1:38px;--x-font-size-heading-2:30px;--x-font-size-heading-3:24px;--x-font-size-heading-4:20px;--x-font-size-heading-5:16px;--x-line-height:1.5714285714285714;--x-line-height-lg:1.5;--x-line-height-sm:1.6666666666666667;--x-line-height-heading-1:1.2105263157894737;--x-line-height-heading-2:1.2666666666666666;--x-line-height-heading-3:1.3333333333333333;--x-line-height-heading-4:1.4;--x-line-height-heading-5:1.5;--x-font-weight-normal:400;--x-font-weight-medium:500;--x-font-weight-semibold:600;--x-font-weight-strong:600;--x-font-size-base:14px;--x-font-size-xxl:24px;--x-line-height-base:1.5714285714285714;--x-spacing-xxs:4px;--x-spacing-xs:8px;--x-spacing-sm:12px;--x-spacing-md:16px;--x-spacing-lg:20px;--x-spacing-xl:24px;--x-spacing-xxl:32px;--x-spacing-xxxl:48px;--x-margin-xxs:4px;--x-margin-xs:8px;--x-margin-sm:12px;--x-margin-md:16px;--x-margin-lg:24px;--x-margin-xl:32px;--x-margin-xxl:48px;--x-padding-xxs:4px;--x-padding-xs:8px;--x-padding-sm:12px;--x-padding-md:16px;--x-padding-lg:24px;--x-padding-content-horizontal-lg:24px;--x-padding-content-vertical-lg:12px;--x-padding-content-horizontal:16px;--x-padding-content-vertical:12px;--x-padding-content-horizontal-sm:16px;--x-padding-content-vertical-sm:8px;--x-border-radius:6px;--x-border-radius-xs:2px;--x-border-radius-sm:4px;--x-border-radius-lg:8px;--x-border-radius-xl:12px;--x-border-radius-outer:4px;--x-border-radius-base:6px;--x-border-width:1px;--x-border-width-base:1px;--x-shadow:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-shadow-secondary:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-shadow-tertiary:0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02);--x-shadow-lg:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-secondary:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-tertiary:0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02);--x-box-shadow-popover-arrow:2px 2px 5px rgba(0, 0, 0, 0.05);--x-box-shadow-card:0 1px 2px -2px rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.12), 0 5px 12px 4px rgba(0, 0, 0, 0.09);--x-box-shadow-drawer-right:-6px 0 16px 0 rgba(0, 0, 0, 0.08), -3px 0 6px -4px rgba(0, 0, 0, 0.12), -9px 0 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-drawer-left:6px 0 16px 0 rgba(0, 0, 0, 0.08), 3px 0 6px -4px rgba(0, 0, 0, 0.12), 9px 0 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-drawer-up:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-drawer-down:0 -6px 16px 0 rgba(0, 0, 0, 0.08), 0 -3px 6px -4px rgba(0, 0, 0, 0.12), 0 -9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-tabs-overflow-left:inset 10px 0 8px -8px rgba(0, 0, 0, 0.08);--x-box-shadow-tabs-overflow-right:inset -10px 0 8px -8px rgba(0, 0, 0, 0.08);--x-box-shadow-tabs-overflow-top:inset 0 10px 8px -8px rgba(0, 0, 0, 0.08);--x-box-shadow-tabs-overflow-bottom:inset 0 -10px 8px -8px rgba(0, 0, 0, 0.08);--x-motion-duration-fast:0.1s;--x-motion-duration-mid:0.2s;--x-motion-duration-slow:0.3s;--x-motion-ease-in-out:cubic-bezier(0.645, 0.045, 0.355, 1);--x-motion-ease-out:cubic-bezier(0.215, 0.61, 0.355, 1);--x-motion-ease-in:cubic-bezier(0.55, 0.055, 0.675, 0.19);--x-motion-ease-out-back:cubic-bezier(0.12, 0.4, 0.29, 1.46);--x-motion-ease-in-back:cubic-bezier(0.71, -0.46, 0.88, 0.6);--x-motion-ease-in-out-circle:cubic-bezier(0.78, 0.14, 0.15, 0.86);--x-motion-ease-out-circle:cubic-bezier(0.08, 0.82, 0.17, 1);--x-motion-ease-in-circle:cubic-bezier(0.6, 0.04, 0.98, 0.34);--x-motion-ease-in-quint:cubic-bezier(0.755, 0.05, 0.855, 0.06);--x-motion-ease-out-quint:cubic-bezier(0.23, 1, 0.32, 1);--x-z-index-base:0;--x-z-index-popup-base:1000;--x-z-index-popup:1030;--x-z-index-affix:10;--x-z-index-modal:1000;--x-z-index-modal-mask:1000;--x-z-index-drawer:1000;--x-z-index-popover:1030;--x-z-index-dropdown:1050;--x-z-index-tooltip:1070;--x-z-index-notification:1080;--x-z-index-message:1090;--x-z-index-popconfirm:1060;--x-z-index-table-fixed:10;--x-opacity-loading:0.65;--x-opacity-image:1;--x-opacity-disabled:0.5;--x-control-height:32px;--x-control-height-xs:24px;--x-control-height-sm:24px;--x-control-height-lg:40px;--x-control-radio-size:16px;--x-control-checkbox-size:16px;--x-control-padding-horizontal:12px;--x-control-padding-horizontal-sm:8px;--x-control-outline-width:2px;--x-control-outline:rgba(5, 145, 255, 0.1);--x-control-item-bg-hover:rgba(0, 0, 0, 0.04);--x-control-item-bg-active:#e6f4ff;--x-control-item-bg-active-hover:#bae0ff;--x-control-item-bg-active-disabled:rgba(0, 0, 0, 0.15);--x-control-tmp-outline:rgba(0, 0, 0, 0.02);--x-color-yellow:#fadb14;--x-color-yellow-rgb:250, 219, 20;--x-font-family-base:var(--x-font-family);--x-color-link:#1677ff;--x-color-link-hover:#69b1ff;--x-color-link-active:#0958d9;--x-color-icon:rgba(0, 0, 0, 0.45);--x-color-icon-hover:rgba(0, 0, 0, 0.88);--x-color-highlight:#ff4d4f;--x-color-bg-text-hover:rgba(0, 0, 0, 0.06);--x-color-bg-text-active:rgba(0, 0, 0, 0.15);--x-screen-xs:480px;--x-screen-xs-min:480px;--x-screen-xs-max:575px;--x-screen-sm:576px;--x-screen-sm-min:576px;--x-screen-sm-max:767px;--x-screen-md:768px;--x-screen-md-min:768px;--x-screen-md-max:991px;--x-screen-lg:992px;--x-screen-lg-min:992px;--x-screen-lg-max:1199px;--x-screen-xl:1200px;--x-screen-xl-min:1200px;--x-screen-xl-max:1599px;--x-screen-xxl:1600px;--x-screen-xxl-min:1600px;--x-color-fill-content:rgba(0, 0, 0, 0.06);--x-color-fill-content-hover:rgba(0, 0, 0, 0.15);--x-color-fill-alter:rgba(0, 0, 0, 0.02);--x-scrollbar-width:12px;--x-scrollbar-track-bg:rgba(0, 0, 0, 0.04);--x-scrollbar-thumb-bg:rgba(0, 0, 0, 0.25);--x-scrollbar-thumb-bg-hover:rgba(0, 0, 0, 0.35);--x-menu-dark-bg:#001529;--x-menu-dark-item-bg:#001529;--x-menu-dark-popup-bg:#001529;--x-menu-dark-submenu-item-bg:#000c17}:host{display:block;-webkit-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0;color:var(--x-divider-color, var(--x-color-text, rgba(0, 0, 0, 0.88)));font-size:var(--x-divider-font-size, var(--x-font-size-base, 14px));font-variant:tabular-nums;line-height:var(--x-divider-line-height, var(--x-line-height-base, 1.5714));list-style:none;-webkit-font-feature-settings:"tnum";font-feature-settings:"tnum";border-top:var(--x-divider-border-width, var(--x-border-width-base, 1px)) solid var(--x-divider-border-color, var(--x-color-split, rgba(5, 5, 5, 0.06)))}:host(.x-divider-vertical){position:relative;top:var(--x-divider-vertical-top, -0.06em);display:inline-block;height:var(--x-divider-vertical-height, 0.9em);margin:0 var(--x-divider-margin-horizontal, var(--x-spacing-xs, 8px));vertical-align:middle;border-top:0;border-left:var(--x-divider-border-width, var(--x-border-width-base, 1px)) solid var(--x-divider-border-color, var(--x-color-split, rgba(5, 5, 5, 0.06)))}:host(.x-divider-horizontal){display:-ms-flexbox;display:flex;clear:both;width:100%;min-width:100%;margin:var(--x-divider-margin-vertical, var(--x-spacing-lg, 24px)) 0}:host(.x-divider-dashed){background:none;border-color:var(--x-divider-border-color, var(--x-color-split, rgba(5, 5, 5, 0.06)));border-style:dashed;border-width:var(--x-divider-border-width, var(--x-border-width-base, 1px)) 0 0}:host(.x-divider-horizontal.x-divider-with-text){display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;margin:var(--x-divider-with-text-margin, var(--x-spacing-md, 16px)) 0;color:var(--x-divider-color, var(--x-color-text, rgba(0, 0, 0, 0.88)));font-weight:var(--x-divider-font-weight, var(--x-font-weight-medium, 500));font-size:var(--x-divider-font-size-lg, var(--x-font-size-lg, 16px));white-space:nowrap;text-align:center;border-top:0;border-top-color:var(--x-divider-border-color, var(--x-color-split, rgba(5, 5, 5, 0.06)))}:host(.x-divider-horizontal.x-divider-with-text)::before,:host(.x-divider-horizontal.x-divider-with-text)::after{position:relative;width:50%;border-top:var(--x-divider-border-width, var(--x-border-width-base, 1px)) solid transparent;border-top-color:inherit;border-bottom:0;-webkit-transform:translateY(50%);transform:translateY(50%);content:"";-ms-flex:1;flex:1}:host(.x-divider-horizontal.x-divider-with-text-left)::before{-ms-flex:0 0 var(--x-divider-text-margin-left, 5%);flex:0 0 var(--x-divider-text-margin-left, 5%);width:var(--x-divider-text-margin-left, 5%)}:host(.x-divider-horizontal.x-divider-with-text-left)::after{-ms-flex:1;flex:1}:host(.x-divider-horizontal.x-divider-with-text-right)::before{-ms-flex:1;flex:1}:host(.x-divider-horizontal.x-divider-with-text-right)::after{-ms-flex:0 0 var(--x-divider-text-margin-right, 5%);flex:0 0 var(--x-divider-text-margin-right, 5%);width:var(--x-divider-text-margin-right, 5%)}.x-divider-inner-text{display:inline-block;padding:0 var(--x-divider-text-padding, 1em)}:host(.x-divider-plain) .x-divider-inner-text{font-weight:normal;font-size:var(--x-divider-font-size, var(--x-font-size-base, 14px))}`;
+
+const XDivider = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    get el() { return getElement(this); }
+    /**
+     * Tracks whether the divider has text content.
+     */
+    hasContent = false;
+    /**
+     * Whether line is dashed.
+     * @example
+     * <x-divider dashed></x-divider>
+     */
+    dashed = false;
+    /**
+     * The position of title inside divider.
+     * @example
+     * <x-divider orientation="left">Left</x-divider>
+     */
+    orientation = 'center';
+    /**
+     * Divider text show as plain style.
+     * @example
+     * <x-divider plain>Text</x-divider>
+     */
+    plain = false;
+    /**
+     * The direction type of divider.
+     * @example
+     * <x-divider type="vertical"></x-divider>
+     */
+    type = 'horizontal';
+    /**
+     * The margin-left/right of the title.
+     * @example
+     * <x-divider orientation="left" orientationMargin="12px">Text</x-divider>
+     */
+    orientationMargin;
+    /**
+     * Check for initial slot content.
+     * @returns void
+     * @example
+     * <x-divider>Text</x-divider>
+     */
+    componentWillLoad() {
+        this.checkContent();
+    }
+    /**
+     * Determine if default slot has content.
+     * @returns void
+     * @example
+     * <x-divider>Text</x-divider>
+     */
+    checkContent() {
+        // Initial check, though slotchange is better for dynamic updates
+        this.hasContent = this.el.innerHTML.trim().length > 0;
+    }
+    /**
+     * Update content state when slot changes.
+     * @param e - Slot change event.
+     * @returns void
+     * @example
+     * <x-divider>Text</x-divider>
+     */
+    handleSlotChange = (e) => {
+        const slot = e.target;
+        this.hasContent = slot.assignedNodes({ flatten: true }).length > 0;
+    };
+    /**
+     * Render divider with optional text and orientation styles.
+     *
+     * Flow:
+     * 1. Constructs class map based on type (horizontal/vertical), style (dashed/plain), and content presence.
+     * 2. Calculates orientation styles (margin-left/right) if needed.
+     * 3. Renders Host element.
+     * 4. If horizontal with content:
+     *    - Renders text wrapper span.
+     *    - Projects slot.
+     * 5. Otherwise (vertical or empty):
+     *    - Projects slot directly.
+     *
+     * @returns JSX.Element
+     * @example
+     * <x-divider orientation="right">Right</x-divider>
+     */
+    render() {
+        const { dashed, orientation, plain, type, orientationMargin, hasContent } = this;
+        // Build classes based on type and text presence.
+        const classes = {
+            'x-divider': true,
+            [`x-divider-${type}`]: true,
+            [`x-divider-with-text`]: hasContent && type === 'horizontal',
+            [`x-divider-with-text-${orientation}`]: hasContent && type === 'horizontal',
+            'x-divider-dashed': dashed,
+            'x-divider-plain': plain,
+        };
+        // Apply margin styles when orientation is left/right.
+        const style = {};
+        if (orientationMargin && type === 'horizontal' && hasContent) {
+            // Apply margin for left or right alignment.
+            if (orientation === 'left') {
+                style['--x-divider-margin-left'] = orientationMargin;
+            }
+            else if (orientation === 'right') {
+                style['--x-divider-margin-right'] = orientationMargin;
+            }
+        }
+        return (h(Host, { key: 'c01c2f45c5bd8644531889d9787efb9afaa53e5f', class: classes, style: style }, type === 'horizontal' && hasContent && (h("span", { key: 'de69f4795c2069fe4844d087827f33c625759e9a', class: "x-divider-inner-text" }, h("slot", { key: 'cb0b0e462a05bd6035579554f5665a4baf52b856', onSlotchange: this.handleSlotChange }))), (!hasContent || type === 'vertical') && h("slot", { key: '054ecd7d528d560edffbf86722a1e8084f29890e', onSlotchange: this.handleSlotChange })));
+    }
+};
+XDivider.style = xDividerCss();
+
+/**
+ * FormControl — Tracks value & validity of an individual form control
+ * Mirrors Angular's FormControl API 100%
+ */
+class FormControl extends AbstractControl {
+    constructor(formState = null, validatorsOrOptions, asyncValidators) {
+        super();
+        this._initialize(formState, validatorsOrOptions, asyncValidators);
+        this._updateValueAndValidity({ onlySelf: true, emitEvent: false });
+    }
+    get value() {
+        return this._value;
+    }
+    setValue(value, options = {}) {
+        this._value = value;
+        if (this._onChange.length && options.emitModelToViewChange !== false) {
+            this._onChange.forEach(changeFn => changeFn(this._value));
+        }
+        this._updateValueAndValidity(options);
+        if (options.emitEvent !== false) {
+            this._emitValueChange(this._value);
+        }
+    }
+    patchValue(value, options = {}) {
+        this.setValue(value, options);
+    }
+    reset(formState = null, options = {}) {
+        this._initialize(formState, this._validators, this._asyncValidators);
+        this.markAsPristine(options);
+        this.markAsUntouched(options);
+        this._updateValueAndValidity(options);
+        if (options.emitEvent !== false) {
+            this._emitValueChange(this._value);
+        }
+    }
+    // ─── Internal ────────────────────────────────────────────────
+    _initialize(formState, validatorsOrOptions, asyncValidators) {
+        if (this._isFormControlOptions(validatorsOrOptions)) {
+            this._applyValidators(validatorsOrOptions);
+            this._updateOn = validatorsOrOptions.updateOn || 'change';
+        }
+        else {
+            this._applyValidators(validatorsOrOptions, asyncValidators);
+        }
+        if (formState !== null && typeof formState === 'object' && 'value' in formState) {
+            const state = formState;
+            this._value = state.value;
+            if (state.disabled) {
+                this.disable({ onlySelf: true, emitEvent: false });
+            }
+        }
+        else {
+            this._value = formState;
+        }
+    }
+    _isFormControlOptions(obj) {
+        return !!obj && typeof obj === 'object' && !Array.isArray(obj) && ('validators' in obj || 'asyncValidators' in obj || 'updateOn' in obj);
+    }
+    _runValidation() {
+        if (this._status === 'DISABLED')
+            return;
+        this._errors = this._runValidators(this._value);
+        this._status = this._calculateStatus();
+        if (this._status === 'VALID' && this._asyncValidators.length > 0) {
+            this._runAsyncValidators(this._value);
+        }
+    }
+}
+
+const xFormItemCss = () => `@charset "UTF-8";:root{--x-color-primary:#1677ff;--x-color-primary-rgb:22, 119, 255;--x-color-primary-contrast:#ffffff;--x-color-primary-contrast-rgb:255, 255, 255;--x-color-primary-shade:#0958d9;--x-color-primary-tint:#4096ff;--x-color-primary-bg:#e6f4ff;--x-color-primary-bg-hover:#bae0ff;--x-color-primary-border:#91caff;--x-color-primary-border-hover:#69b1ff;--x-color-primary-hover:#4096ff;--x-color-primary-active:#0958d9;--x-color-primary-text:#1677ff;--x-color-primary-text-hover:#4096ff;--x-color-primary-text-active:#0958d9;--x-color-secondary:#3dc2ff;--x-color-secondary-rgb:61, 194, 255;--x-color-secondary-contrast:#ffffff;--x-color-secondary-contrast-rgb:255, 255, 255;--x-color-secondary-shade:#36abe0;--x-color-secondary-tint:#50c8ff;--x-color-success:#52c41a;--x-color-success-rgb:82, 196, 26;--x-color-success-contrast:#ffffff;--x-color-success-contrast-rgb:255, 255, 255;--x-color-success-shade:#389e0d;--x-color-success-tint:#73d13d;--x-color-success-bg:#f6ffed;--x-color-success-bg-hover:#d9f7be;--x-color-success-border:#b7eb8f;--x-color-success-border-hover:#95de64;--x-color-success-hover:#73d13d;--x-color-success-active:#389e0d;--x-color-success-text:#52c41a;--x-color-success-text-hover:#73d13d;--x-color-success-text-active:#389e0d;--x-color-warning:#faad14;--x-color-warning-rgb:250, 173, 20;--x-color-warning-contrast:#000000;--x-color-warning-contrast-rgb:0, 0, 0;--x-color-warning-shade:#d48806;--x-color-warning-tint:#ffc53d;--x-color-warning-bg:#fffbe6;--x-color-warning-bg-hover:#fff1b8;--x-color-warning-border:#ffe58f;--x-color-warning-border-hover:#ffd666;--x-color-warning-hover:#ffc53d;--x-color-warning-active:#d48806;--x-color-warning-text:#faad14;--x-color-warning-text-hover:#ffc53d;--x-color-warning-text-active:#d48806;--x-color-danger:#ff4d4f;--x-color-danger-rgb:255, 77, 79;--x-color-danger-contrast:#ffffff;--x-color-danger-contrast-rgb:255, 255, 255;--x-color-danger-shade:#cf1322;--x-color-danger-tint:#ff7875;--x-color-error:#ff4d4f;--x-color-error-rgb:255, 77, 79;--x-color-error-bg:#fff2f0;--x-color-error-bg-hover:#ffccc7;--x-color-error-border:#ffa39e;--x-color-error-border-hover:#ff7875;--x-color-error-hover:#ff7875;--x-color-error-active:#d9363e;--x-color-error-text:#ff4d4f;--x-color-error-text-hover:#ff7875;--x-color-error-text-active:#d9363e;--x-color-info:#1677ff;--x-color-info-rgb:22, 119, 255;--x-color-info-bg:#e6f4ff;--x-color-info-bg-hover:#bae0ff;--x-color-info-border:#91caff;--x-color-info-border-hover:#69b1ff;--x-color-info-hover:#69b1ff;--x-color-info-active:#0958d9;--x-color-info-text:#1677ff;--x-color-info-text-hover:#69b1ff;--x-color-info-text-active:#0958d9;--x-color-text:rgba(0, 0, 0, 0.88);--x-color-text-secondary:rgba(0, 0, 0, 0.65);--x-color-text-tertiary:rgba(0, 0, 0, 0.45);--x-color-text-quaternary:rgba(0, 0, 0, 0.25);--x-color-text-disabled:rgba(0, 0, 0, 0.25);--x-color-text-placeholder:rgba(0, 0, 0, 0.25);--x-color-text-heading:rgba(0, 0, 0, 0.88);--x-color-text-label:rgba(0, 0, 0, 0.65);--x-color-text-description:rgba(0, 0, 0, 0.45);--x-color-text-light-solid:#ffffff;--x-color-bg-container:#ffffff;--x-color-bg-elevated:#ffffff;--x-color-bg-layout:#f5f5f5;--x-color-bg-spotlight:rgba(0, 0, 0, 0.85);--x-color-bg-mask:rgba(0, 0, 0, 0.45);--x-color-bg-base:#ffffff;--x-color-bg-container-disabled:#f5f5f5;--x-color-bg-container-loading:rgba(255, 255, 255, 0.65);--x-color-white:#ffffff;--x-color-fill:rgba(0, 0, 0, 0.15);--x-color-fill-secondary:rgba(0, 0, 0, 0.06);--x-color-fill-tertiary:rgba(0, 0, 0, 0.04);--x-color-fill-quaternary:rgba(0, 0, 0, 0.02);--x-color-border:#d9d9d9;--x-color-border-secondary:#f0f0f0;--x-color-border-bg:#ffffff;--x-color-split:rgba(5, 5, 5, 0.06);--x-color-dark:#222428;--x-color-dark-rgb:34, 36, 40;--x-color-dark-contrast:#ffffff;--x-color-dark-contrast-rgb:255, 255, 255;--x-color-dark-shade:#1e2023;--x-color-dark-tint:#383a3e;--x-color-medium:#92949c;--x-color-medium-rgb:146, 148, 156;--x-color-medium-contrast:#ffffff;--x-color-medium-contrast-rgb:255, 255, 255;--x-color-medium-shade:#808289;--x-color-medium-tint:#9d9fa6;--x-color-light:#f4f5f8;--x-color-light-rgb:244, 245, 248;--x-color-light-contrast:#000000;--x-color-light-contrast-rgb:0, 0, 0;--x-color-light-shade:#d7d8da;--x-color-light-tint:#f5f6f9;--x-font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--x-font-family-code:"SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;--x-font-size:14px;--x-font-size-sm:12px;--x-font-size-lg:16px;--x-font-size-xl:20px;--x-font-size-heading-1:38px;--x-font-size-heading-2:30px;--x-font-size-heading-3:24px;--x-font-size-heading-4:20px;--x-font-size-heading-5:16px;--x-line-height:1.5714285714285714;--x-line-height-lg:1.5;--x-line-height-sm:1.6666666666666667;--x-line-height-heading-1:1.2105263157894737;--x-line-height-heading-2:1.2666666666666666;--x-line-height-heading-3:1.3333333333333333;--x-line-height-heading-4:1.4;--x-line-height-heading-5:1.5;--x-font-weight-normal:400;--x-font-weight-medium:500;--x-font-weight-semibold:600;--x-font-weight-strong:600;--x-font-size-base:14px;--x-font-size-xxl:24px;--x-line-height-base:1.5714285714285714;--x-spacing-xxs:4px;--x-spacing-xs:8px;--x-spacing-sm:12px;--x-spacing-md:16px;--x-spacing-lg:20px;--x-spacing-xl:24px;--x-spacing-xxl:32px;--x-spacing-xxxl:48px;--x-margin-xxs:4px;--x-margin-xs:8px;--x-margin-sm:12px;--x-margin-md:16px;--x-margin-lg:24px;--x-margin-xl:32px;--x-margin-xxl:48px;--x-padding-xxs:4px;--x-padding-xs:8px;--x-padding-sm:12px;--x-padding-md:16px;--x-padding-lg:24px;--x-padding-content-horizontal-lg:24px;--x-padding-content-vertical-lg:12px;--x-padding-content-horizontal:16px;--x-padding-content-vertical:12px;--x-padding-content-horizontal-sm:16px;--x-padding-content-vertical-sm:8px;--x-border-radius:6px;--x-border-radius-xs:2px;--x-border-radius-sm:4px;--x-border-radius-lg:8px;--x-border-radius-xl:12px;--x-border-radius-outer:4px;--x-border-radius-base:6px;--x-border-width:1px;--x-border-width-base:1px;--x-shadow:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-shadow-secondary:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-shadow-tertiary:0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02);--x-shadow-lg:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-secondary:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-tertiary:0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02);--x-box-shadow-popover-arrow:2px 2px 5px rgba(0, 0, 0, 0.05);--x-box-shadow-card:0 1px 2px -2px rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.12), 0 5px 12px 4px rgba(0, 0, 0, 0.09);--x-box-shadow-drawer-right:-6px 0 16px 0 rgba(0, 0, 0, 0.08), -3px 0 6px -4px rgba(0, 0, 0, 0.12), -9px 0 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-drawer-left:6px 0 16px 0 rgba(0, 0, 0, 0.08), 3px 0 6px -4px rgba(0, 0, 0, 0.12), 9px 0 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-drawer-up:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-drawer-down:0 -6px 16px 0 rgba(0, 0, 0, 0.08), 0 -3px 6px -4px rgba(0, 0, 0, 0.12), 0 -9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-tabs-overflow-left:inset 10px 0 8px -8px rgba(0, 0, 0, 0.08);--x-box-shadow-tabs-overflow-right:inset -10px 0 8px -8px rgba(0, 0, 0, 0.08);--x-box-shadow-tabs-overflow-top:inset 0 10px 8px -8px rgba(0, 0, 0, 0.08);--x-box-shadow-tabs-overflow-bottom:inset 0 -10px 8px -8px rgba(0, 0, 0, 0.08);--x-motion-duration-fast:0.1s;--x-motion-duration-mid:0.2s;--x-motion-duration-slow:0.3s;--x-motion-ease-in-out:cubic-bezier(0.645, 0.045, 0.355, 1);--x-motion-ease-out:cubic-bezier(0.215, 0.61, 0.355, 1);--x-motion-ease-in:cubic-bezier(0.55, 0.055, 0.675, 0.19);--x-motion-ease-out-back:cubic-bezier(0.12, 0.4, 0.29, 1.46);--x-motion-ease-in-back:cubic-bezier(0.71, -0.46, 0.88, 0.6);--x-motion-ease-in-out-circle:cubic-bezier(0.78, 0.14, 0.15, 0.86);--x-motion-ease-out-circle:cubic-bezier(0.08, 0.82, 0.17, 1);--x-motion-ease-in-circle:cubic-bezier(0.6, 0.04, 0.98, 0.34);--x-motion-ease-in-quint:cubic-bezier(0.755, 0.05, 0.855, 0.06);--x-motion-ease-out-quint:cubic-bezier(0.23, 1, 0.32, 1);--x-z-index-base:0;--x-z-index-popup-base:1000;--x-z-index-popup:1030;--x-z-index-affix:10;--x-z-index-modal:1000;--x-z-index-modal-mask:1000;--x-z-index-drawer:1000;--x-z-index-popover:1030;--x-z-index-dropdown:1050;--x-z-index-tooltip:1070;--x-z-index-notification:1080;--x-z-index-message:1090;--x-z-index-popconfirm:1060;--x-z-index-table-fixed:10;--x-opacity-loading:0.65;--x-opacity-image:1;--x-opacity-disabled:0.5;--x-control-height:32px;--x-control-height-xs:24px;--x-control-height-sm:24px;--x-control-height-lg:40px;--x-control-radio-size:16px;--x-control-checkbox-size:16px;--x-control-padding-horizontal:12px;--x-control-padding-horizontal-sm:8px;--x-control-outline-width:2px;--x-control-outline:rgba(5, 145, 255, 0.1);--x-control-item-bg-hover:rgba(0, 0, 0, 0.04);--x-control-item-bg-active:#e6f4ff;--x-control-item-bg-active-hover:#bae0ff;--x-control-item-bg-active-disabled:rgba(0, 0, 0, 0.15);--x-control-tmp-outline:rgba(0, 0, 0, 0.02);--x-color-yellow:#fadb14;--x-color-yellow-rgb:250, 219, 20;--x-font-family-base:var(--x-font-family);--x-color-link:#1677ff;--x-color-link-hover:#69b1ff;--x-color-link-active:#0958d9;--x-color-icon:rgba(0, 0, 0, 0.45);--x-color-icon-hover:rgba(0, 0, 0, 0.88);--x-color-highlight:#ff4d4f;--x-color-bg-text-hover:rgba(0, 0, 0, 0.06);--x-color-bg-text-active:rgba(0, 0, 0, 0.15);--x-screen-xs:480px;--x-screen-xs-min:480px;--x-screen-xs-max:575px;--x-screen-sm:576px;--x-screen-sm-min:576px;--x-screen-sm-max:767px;--x-screen-md:768px;--x-screen-md-min:768px;--x-screen-md-max:991px;--x-screen-lg:992px;--x-screen-lg-min:992px;--x-screen-lg-max:1199px;--x-screen-xl:1200px;--x-screen-xl-min:1200px;--x-screen-xl-max:1599px;--x-screen-xxl:1600px;--x-screen-xxl-min:1600px;--x-color-fill-content:rgba(0, 0, 0, 0.06);--x-color-fill-content-hover:rgba(0, 0, 0, 0.15);--x-color-fill-alter:rgba(0, 0, 0, 0.02);--x-scrollbar-width:12px;--x-scrollbar-track-bg:rgba(0, 0, 0, 0.04);--x-scrollbar-thumb-bg:rgba(0, 0, 0, 0.25);--x-scrollbar-thumb-bg-hover:rgba(0, 0, 0, 0.35);--x-menu-dark-bg:#001529;--x-menu-dark-item-bg:#001529;--x-menu-dark-popup-bg:#001529;--x-menu-dark-submenu-item-bg:#000c17}:host{display:block;margin-bottom:var(--x-form-item-margin-bottom, var(--x-spacing-lg, 24px));-webkit-transition:all var(--x-form-item-motion-duration, var(--x-motion-duration-mid, 0.2s)) var(--x-form-item-motion-ease-out, var(--x-motion-ease-out, cubic-bezier(0.215, 0.61, 0.355, 1)));transition:all var(--x-form-item-motion-duration, var(--x-motion-duration-mid, 0.2s)) var(--x-form-item-motion-ease-out, var(--x-motion-ease-out, cubic-bezier(0.215, 0.61, 0.355, 1)));-webkit-box-sizing:border-box;box-sizing:border-box;padding:0;color:var(--x-form-item-color, var(--x-color-text, rgba(0, 0, 0, 0.88)));font-size:var(--x-form-item-font-size, var(--x-font-size-base, 14px));font-variant:tabular-nums;line-height:var(--x-form-item-line-height, var(--x-line-height-base, 1.5715));list-style:none;-webkit-font-feature-settings:"tnum";font-feature-settings:"tnum"}:host(.x-form-item-horizontal) .x-form-item-row{display:-ms-flexbox;display:flex;-ms-flex-flow:row wrap;flex-flow:row wrap;min-width:0}:host(.x-form-item-vertical) .x-form-item-row{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}:host(.x-form-item-vertical) .x-form-item-label{text-align:left;padding:0 0 8px;line-height:var(--x-form-item-line-height, var(--x-line-height-base, 1.5715))}:host(.x-form-item-vertical) .x-form-item-label label::after{display:none}:host(.x-form-item-inline){display:-ms-inline-flexbox;display:inline-flex;margin-right:var(--x-form-item-inline-margin-right, 16px);margin-bottom:0}:host(.x-form-item-inline) .x-form-item-row{display:-ms-flexbox;display:flex;-ms-flex-wrap:nowrap;flex-wrap:nowrap}:host(.x-form-item-horizontal) .x-form-item-row{display:-ms-flexbox;display:flex;-ms-flex-flow:row wrap;flex-flow:row wrap}:host(.x-form-item-vertical) .x-form-item-row{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}:host(.x-form-item-vertical) .x-form-item-label{text-align:left;margin-right:0;padding:0 0 var(--x-form-item-explain-padding-top, var(--x-spacing-xxs, 4px));width:100%}:host(.x-form-item-vertical) .x-form-item-label label{height:auto}:host(.x-form-item-vertical) .x-form-item-label label::after{display:none !important}:host(.x-form-item-inline){display:-ms-inline-flexbox;display:inline-flex;margin-right:var(--x-form-item-inline-margin-right, 16px);margin-bottom:0}:host(.x-form-item-inline) .x-form-item-row{display:-ms-flexbox;display:flex;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-ms-flex-align:center;align-items:center}:host(.x-form-item-inline) .x-form-item-label{margin-right:var(--x-form-item-inline-label-margin-right, 8px)}.x-form-item-row{display:-ms-flexbox;display:flex;-ms-flex-flow:row wrap;flex-flow:row wrap;min-width:0;width:100%}.x-form-item-label{-ms-flex-positive:0;flex-grow:0;overflow:hidden;white-space:nowrap;vertical-align:middle;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center}.x-form-item-label.x-form-item-label-left{-ms-flex-pack:start !important;justify-content:flex-start !important;text-align:left !important}.x-form-item-label.x-form-item-label-right{-ms-flex-pack:end !important;justify-content:flex-end !important;text-align:right !important}.x-form-item-label.x-form-item-label-center{-ms-flex-pack:center !important;justify-content:center !important;text-align:center !important}.x-form-item-label{margin-right:var(--x-form-item-label-margin-right, var(--x-spacing-md, 16px));line-height:var(--x-form-item-control-height, var(--x-control-height, 32px))}.x-form-item-label label{position:relative;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;max-width:100%;height:var(--x-form-item-control-height, var(--x-control-height, 32px));color:var(--x-form-item-color, var(--x-color-text, rgba(0, 0, 0, 0.88)));font-size:var(--x-form-item-font-size, var(--x-font-size-base, 14px))}.x-form-item-label label::after{content:":";position:relative;top:-0.5px;margin:0 var(--x-form-item-label-colon-margin-inline, var(--x-spacing-xs, 8px)) 0 var(--x-form-item-label-colon-margin-inline-start, 2px)}.x-form-item-label label.x-form-item-no-colon::after{content:" "}.x-form-item-label label.x-form-item-required::before{display:inline-block;margin-right:var(--x-form-item-required-margin-right, var(--x-spacing-xxs, 4px));color:var(--x-form-item-color-error, var(--x-color-error, #ff4d4f));font-size:var(--x-form-item-font-size, var(--x-font-size-base, 14px));font-family:SimSun, sans-serif;line-height:1;content:"*"}.x-form-item-control{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-positive:1;flex-grow:1}.x-form-item-control-input{position:relative;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;min-height:var(--x-form-item-control-height, var(--x-control-height, 32px))}.x-form-item-control-input-content{-ms-flex:auto;flex:auto;max-width:100%}.x-form-item-children-icon{position:absolute;top:50%;right:var(--x-form-item-control-padding-horizontal, var(--x-control-padding-horizontal, 11px));z-index:1;width:var(--x-form-item-icon-size, var(--x-spacing-md, 16px));height:var(--x-form-item-icon-size, var(--x-spacing-md, 16px));margin-top:calc(var(--x-form-item-icon-size, var(--x-spacing-md, 16px)) / -2);font-size:var(--x-form-item-icon-size, var(--x-spacing-md, 16px));line-height:var(--x-form-item-icon-size, var(--x-spacing-md, 16px));text-align:center;visibility:visible;-webkit-animation:zoomIn var(--x-form-item-motion-duration, var(--x-motion-duration-mid, 0.2s)) var(--x-form-item-motion-ease-out-back, var(--x-motion-ease-out-back, cubic-bezier(0.12, 0.4, 0.29, 1.46)));animation:zoomIn var(--x-form-item-motion-duration, var(--x-motion-duration-mid, 0.2s)) var(--x-form-item-motion-ease-out-back, var(--x-motion-ease-out-back, cubic-bezier(0.12, 0.4, 0.29, 1.46)));pointer-events:none}.x-form-item-explain{clear:both;min-height:var(--x-form-item-explain-min-height, var(--x-spacing-lg, 24px));margin-top:var(--x-form-item-explain-margin-top, -2px);color:var(--x-form-item-color-secondary, var(--x-color-text-secondary, rgba(0, 0, 0, 0.45)));font-size:var(--x-form-item-font-size, var(--x-font-size-base, 14px));line-height:var(--x-form-item-line-height, var(--x-line-height-base, 1.5715));-webkit-transition:color var(--x-form-item-motion-duration, var(--x-motion-duration-mid, 0.2s)) var(--x-form-item-motion-ease-in-out, var(--x-motion-ease-in-out, cubic-bezier(0.645, 0.045, 0.355, 1)));transition:color var(--x-form-item-motion-duration, var(--x-motion-duration-mid, 0.2s)) var(--x-form-item-motion-ease-in-out, var(--x-motion-ease-in-out, cubic-bezier(0.645, 0.045, 0.355, 1)));padding-top:var(--x-form-item-explain-padding-top, var(--x-spacing-xxs, 4px))}:host(.x-form-item-has-error) .x-form-item-children-icon{color:var(--x-form-item-color-error, var(--x-color-error, #ff4d4f))}:host(.x-form-item-has-error) .x-form-item-explain{color:var(--x-form-item-color-error, var(--x-color-error, #ff4d4f))}:host(.x-form-item-has-warning) .x-form-item-children-icon{color:var(--x-form-item-color-warning, var(--x-color-warning, #faad14))}:host(.x-form-item-has-warning) .x-form-item-explain{color:var(--x-form-item-color-warning, var(--x-color-warning, #faad14))}:host(.x-form-item-has-success) .x-form-item-children-icon{color:var(--x-form-item-color-success, var(--x-color-success, #52c41a))}:host-context(.x-form-vertical) .x-form-item{-ms-flex-direction:column;flex-direction:column}:host-context(.x-form-vertical) .x-form-item-label{text-align:left;margin-right:0;padding:0 0 var(--x-form-item-explain-padding-top, var(--x-spacing-xxs, 4px));line-height:var(--x-form-item-line-height, var(--x-line-height-base, 1.5715))}:host-context(.x-form-vertical) .x-form-item-label label{height:auto}:host-context(.x-form-vertical) .x-form-item-label label::after{display:none}@-webkit-keyframes zoomIn{0%{-webkit-transform:scale(0);transform:scale(0);opacity:0}100%{-webkit-transform:scale(1);transform:scale(1);opacity:1}}@keyframes zoomIn{0%{-webkit-transform:scale(0);transform:scale(0);opacity:0}100%{-webkit-transform:scale(1);transform:scale(1);opacity:1}}.anticon-spin{-webkit-animation:loadingCircle 1s infinite linear;animation:loadingCircle 1s infinite linear}@-webkit-keyframes loadingCircle{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes loadingCircle{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}`;
+
+const XFormItem = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    get el() { return getElement(this); }
+    /**
+     * Label text
+     * @example
+     * <x-form-item label="Email"></x-form-item>
+     */
+    label;
+    /**
+     * The validation status. If not provided, it will be automatically inferred from the form control.
+     * @example
+     * <x-form-item validateStatus="error"></x-form-item>
+     */
+    validateStatus;
+    /**
+     * The help message. If not provided, it will be automatically inferred from the form control errors.
+     * @example
+     * <x-form-item help="Required"></x-form-item>
+     */
+    help;
+    /**
+     * Whether to show the required mark. If not provided, it will be automatically inferred from the form control validators.
+     * @example
+     * <x-form-item required label="Name"></x-form-item>
+     */
+    required = false;
+    /**
+     * Whether to show the colon after label
+     * @example
+     * <x-form-item colon={false} label="Name"></x-form-item>
+     */
+    colon = true;
+    /**
+     * Whether to show the feedback icon
+     * @example
+     * <x-form-item hasFeedback validateStatus="success"></x-form-item>
+     */
+    hasFeedback = false;
+    /**
+     * Label column layout (e.g. span)
+     * @example
+     * <x-form-item labelCol="span: 6"></x-form-item>
+     */
+    labelCol;
+    /**
+     * Wrapper column layout
+     * @example
+     * <x-form-item wrapperCol="span: 18"></x-form-item>
+     */
+    wrapperCol;
+    /**
+     * Label alignment in horizontal layout
+     */
+    labelAlign;
+    /**
+     * Form layout (overrides parent x-form layout)
+     */
+    layout;
+    /**
+     * Field name for form binding
+     */
+    name;
+    /**
+     * Props of children node, for example checkbox should be 'checked'
+     */
+    valuePropName = 'value';
+    /**
+     * Extra prompt message
+     */
+    extra;
+    control;
+    status;
+    errorMessage;
+    parentLayout;
+    parentColon;
+    parentHideRequiredMark;
+    parentLabelAlign;
+    formEl = null;
+    unsubscribe = null;
+    observer = null;
+    nameChanged() {
+        this.connectControl();
+    }
+    componentWillLoad() {
+        this.formEl = this.el.closest('x-form');
+        if (this.formEl) {
+            this.syncParentProps();
+            this.setupObserver();
+        }
+        this.connectControl();
+    }
+    syncParentProps() {
+        if (this.formEl) {
+            this.parentLayout = this.formEl.getAttribute('layout') || this.formEl.layout || 'horizontal';
+            this.parentColon = this.formEl.getAttribute('colon') !== 'false' && this.formEl.colon !== false;
+            this.parentHideRequiredMark = this.formEl.getAttribute('hide-required-mark') === 'true' || this.formEl.hideRequiredMark === true;
+            this.parentLabelAlign = this.formEl.labelAlign || 'right';
+        }
+    }
+    setupObserver() {
+        if (this.formEl && !this.observer) {
+            this.observer = new MutationObserver((mutations) => {
+                mutations.forEach((mutation) => {
+                    if (mutation.type === 'attributes' && (mutation.attributeName === 'layout' ||
+                        mutation.attributeName === 'colon' ||
+                        mutation.attributeName === 'hide-required-mark')) {
+                        this.syncParentProps();
+                    }
+                });
+            });
+            this.observer.observe(this.formEl, { attributes: true });
+        }
+    }
+    disconnectedCallback() {
+        if (this.unsubscribe) {
+            this.unsubscribe();
+        }
+        if (this.observer) {
+            this.observer.disconnect();
+        }
+    }
+    connectControl() {
+        if (this.unsubscribe) {
+            this.unsubscribe();
+        }
+        if (this.formEl && this.formEl.form && this.name) {
+            let control = this.formEl.form.get(this.name);
+            if (!control) {
+                // Self-registration: create a control if it doesn't exist
+                const initialValue = this.formEl.initialValues?.[this.name];
+                control = new FormControl(initialValue);
+                this.formEl.form.addControl(this.name, control);
+            }
+            if (control) {
+                this.control = control;
+                this.syncState(control);
+                this.unsubscribe = control.stateChanges(() => {
+                    this.syncState(control);
+                });
+                // Update child component value
+                this.updateChildValue(control.value);
+            }
+        }
+    }
+    syncState(control) {
+        if (control.touched || control.dirty) {
+            this.validateStatus = control.invalid ? 'error' : (control.pending ? 'validating' : 'success');
+            if (control.errors && !this.help) {
+                this.errorMessage = Object.values(control.errors)[0];
+            }
+            else {
+                this.errorMessage = '';
+            }
+        }
+        const internalControl = control;
+        const validators = (internalControl._validators || internalControl.validators || []);
+        const isRequired = Array.isArray(validators) && validators.some((v) => v.name === 'required' ||
+            (v.toString && v.toString().includes('required')) ||
+            (v.validator && v.validator.name === 'required'));
+        if (isRequired && !this.required) {
+            this.required = true;
+        }
+    }
+    updateChildValue(value) {
+        const input = this.el.querySelector('x-input, x-input-number, x-select, x-checkbox, x-switch');
+        if (input && input[this.valuePropName] !== value) {
+            input[this.valuePropName] = value;
+        }
+    }
+    handleControlChange = (ev) => {
+        if (this.control && this.name) {
+            const detail = ev.detail;
+            const value = detail?.[this.valuePropName] !== undefined
+                ? detail[this.valuePropName]
+                : (detail?.value !== undefined ? detail.value : ev.target[this.valuePropName]);
+            this.control.setValue(value);
+            this.control.markAsDirty();
+        }
+    };
+    handleControlBlur = () => {
+        if (this.control) {
+            this.control.markAsTouched();
+        }
+    };
+    componentDidLoad() {
+        // Listen to changes from child inputs
+        this.el.addEventListener('xChange', this.handleControlChange);
+        this.el.addEventListener('xBlur', this.handleControlBlur);
+    }
+    render() {
+        const displayHelp = this.help || this.errorMessage;
+        const layout = this.layout || this.parentLayout || 'horizontal';
+        const isHorizontal = layout === 'horizontal';
+        const isVertical = layout === 'vertical';
+        const isInline = layout === 'inline';
+        const showColon = this.el.hasAttribute('colon') ? this.colon : this.parentColon;
+        const hideMark = this.parentHideRequiredMark;
+        return (h(Host, { key: '9e53e5534b7091f5041150f831adec589cffa581', class: {
+                'x-form-item': true,
+                'x-form-item-with-help': !!displayHelp,
+                'x-form-item-has-error': this.validateStatus === 'error',
+                'x-form-item-has-warning': this.validateStatus === 'warning',
+                'x-form-item-has-success': this.validateStatus === 'success',
+                'x-form-item-validating': this.validateStatus === 'validating',
+                'x-form-item-has-feedback': this.hasFeedback,
+                'x-form-item-horizontal': isHorizontal,
+                'x-form-item-vertical': isVertical,
+                'x-form-item-inline': isInline,
+            } }, h("div", { key: 'c5dd09be09f559f986fb4d36c70f5c391622b107', class: "x-form-item-row" }, this.label && (h("div", { key: 'f77d9c4d9b5241a540546b9d674178f375e92c6d', class: {
+                'x-form-item-label': true,
+                ...(typeof this.labelCol === 'string' ? { [this.labelCol]: true } : {}),
+                [`x-form-item-label-${this.labelAlign || this.parentLabelAlign || 'right'}`]: true
+            }, style: typeof this.labelCol === 'object' && this.labelCol?.span ? {
+                flex: `0 0 ${(this.labelCol.span / 24) * 100}%`,
+                maxWidth: `${(this.labelCol.span / 24) * 100}%`
+            } : {} }, h("label", { key: 'e4464d27147d1cee39619ad37cb7c5a6f9cb3139', class: {
+                'x-form-item-required': this.required && !hideMark,
+                'x-form-item-no-colon': !showColon
+            }, title: this.label }, this.label))), h("div", { key: '508207d8171598a5d2122eddc91ab9ddbedb8494', class: {
+                'x-form-item-control': true,
+                ...(typeof this.wrapperCol === 'string' ? { [this.wrapperCol]: true } : {})
+            }, style: typeof this.wrapperCol === 'object' && this.wrapperCol?.span ? {
+                flex: `0 0 ${(this.wrapperCol.span / 24) * 100}%`,
+                maxWidth: `${(this.wrapperCol.span / 24) * 100}%`
+            } : {} }, h("div", { key: 'b47d5161aaf6f42cd47781118b11094c599e240b', class: "x-form-item-control-input" }, h("div", { key: '3437bb735c66cafb7c463f7be885f19470fdf137', class: "x-form-item-control-input-content" }, h("slot", { key: '7f8b3ce874b4281e3a3f9eec36fe1f2a7a772a44' })), this.hasFeedback && this.validateStatus && (h("span", { key: '4e032dde91980865acc598ecb093d293f1188fa7', class: "x-form-item-children-icon" }, this.validateStatus === 'success' && (h("span", { key: 'b7af17e662a03db206209e6ac5fbb8e43630d2d5', role: "img", "aria-label": "check-circle", class: "anticon anticon-check-circle" }, h("svg", { key: '14772b5dbf639304b9fc6dc3fc64355a45ca880d', viewBox: "64 64 896 896", focusable: "false", "data-icon": "check-circle", width: "1em", height: "1em", fill: "currentColor", "aria-hidden": "true" }, h("path", { key: '1f5f902d9fd9cca98d5c6e0858a98bafcc346ae5', d: "M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 01-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z" })))), this.validateStatus === 'error' && (h("span", { key: 'a26ddb33d965813b3b07c20579f96ea37a5ea5b7', role: "img", "aria-label": "close-circle", class: "anticon anticon-close-circle" }, h("svg", { key: 'c5a5ecb10bcbbb892a339747122e8245f0f19543', viewBox: "64 64 896 896", focusable: "false", "data-icon": "close-circle", width: "1em", height: "1em", fill: "currentColor", "aria-hidden": "true" }, h("path", { key: '5ad8e00a4a77691849eaede2b8a23baaf029805f', d: "M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z" })))), this.validateStatus === 'warning' && (h("span", { key: '7ebd6dd058a5c99ac84a9d2941d89638b2b1e52a', role: "img", "aria-label": "exclamation-circle", class: "anticon anticon-exclamation-circle" }, h("svg", { key: 'b3e076d376e5b977fa8a7a3aeed8e827d393e340', viewBox: "64 64 896 896", focusable: "false", "data-icon": "exclamation-circle", width: "1em", height: "1em", fill: "currentColor", "aria-hidden": "true" }, h("path", { key: '57965d3b6febe5754bff10a1971e2a6f7e6f742c', d: "M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z" })))), this.validateStatus === 'validating' && (h("span", { key: 'c6f937df1576cf819f82b781a51b4251327e58d0', role: "img", "aria-label": "loading", class: "anticon anticon-loading" }, h("svg", { key: '0ddc19bd99b81eb8d9cbfeef27713a84738821bc', viewBox: "0 0 1024 1024", focusable: "false", "data-icon": "loading", width: "1em", height: "1em", fill: "currentColor", "aria-hidden": "true", class: "anticon-spin" }, h("path", { key: '4170c00b2eb78bca579c05afcde8c6f74b2534f6', d: "M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z" }))))))), displayHelp && (h("div", { key: 'c0fee0d5924b829c6e83fdde04e6f6b8083763c6', class: "x-form-item-explain" }, h("div", { key: '95dfa6a1a8d9643934e09c13ec7266fd8e824df4', role: "alert" }, displayHelp))), this.extra && (h("div", { key: 'b71cc65d15e1eae8ce0a904d0db956c0f549dcce', class: "x-form-item-extra" }, this.extra))))));
+    }
+    static get watchers() { return {
+        "name": [{
+                "nameChanged": 0
+            }]
+    }; }
+};
+XFormItem.style = xFormItemCss();
+
+/**
+ * X-Input-Number Types - Following Ant Design Specification
+ */
+/**
+ * Helper to validate if value is within range
+ */
+/**
+ * Helper to clamp value within range
+ */
+function clampValue(value, min, max, precision) {
+    if (value === null || value === undefined || value === '') {
+        return value;
+    }
+    let numValue = typeof value === 'string' ? parseFloat(value) : value;
+    if (isNaN(numValue)) {
+        return null;
+    }
+    // Clamp to range
+    numValue = Math.min(Math.max(numValue, min), max);
+    // Apply precision
+    if (precision !== undefined && precision >= 0) {
+        numValue = parseFloat(numValue.toFixed(precision));
+    }
+    return numValue;
+}
+/**
+ * Helper to format number with precision
+ */
+function formatWithPrecision(value, precision) {
+    if (value === null || value === undefined || value === '') {
+        return '';
+    }
+    const numValue = typeof value === 'string' ? parseFloat(value) : value;
+    if (isNaN(numValue)) {
+        return '';
+    }
+    if (precision !== undefined && precision >= 0) {
+        return numValue.toFixed(precision);
+    }
+    return String(numValue);
+}
+/**
+ * Helper to add step with precision handling
+ */
+function addStep(value, step, direction, precision) {
+    let numValue = 0;
+    if (value !== null && value !== undefined && value !== '') {
+        numValue = typeof value === 'string' ? parseFloat(value) : value;
+        if (isNaN(numValue)) {
+            numValue = 0;
+        }
+    }
+    const offset = direction === 'up' ? step : -step;
+    let nextValue = numValue + offset;
+    // Handle floating point precision issues
+    if (precision !== undefined && precision >= 0) {
+        nextValue = parseFloat(nextValue.toFixed(precision));
+    }
+    else {
+        // Auto-detect precision from step
+        const stepStr = String(step);
+        const decimalIndex = stepStr.indexOf('.');
+        if (decimalIndex !== -1) {
+            const stepPrecision = stepStr.length - decimalIndex - 1;
+            nextValue = parseFloat(nextValue.toFixed(stepPrecision));
+        }
+    }
+    return nextValue;
+}
+
+const xInputNumberCss = () => `: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:-ms-inline-flexbox;display:inline-flex;width:100%;font-size:var(--x-input-number-font-size, var(--x-control-font-size, var(--x-font-size-base, 14px)));line-height:var(--x-input-number-line-height, var(--x-line-height-base, 1.5714285714));color:var(--x-input-number-color, var(--x-control-color, var(--x-color-text, rgba(0, 0, 0, 0.88))));-webkit-box-sizing:border-box;box-sizing:border-box}:host(.x-input-number-small){width:100%;font-size:var(--x-input-number-font-size-sm, var(--x-font-size-base, 14px))}:host(.x-input-number-large){width:100%;font-size:var(--x-input-number-font-size-lg, var(--x-font-size-lg, 16px))}.x-input-number-wrapper{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-input-number-wrapper:hover:not(.disabled):not([disabled]):not([class*=-disabled]){border-color:var(--x-control-border-color-hover, var(--x-color-primary-hover, #4096ff))}.x-input-number-wrapper.focused:not(.disabled):not([disabled]):not([class*=-disabled]),.x-input-number-wrapper:focus-within:not(.disabled):not([disabled]):not([class*=-disabled]){border-color:var(--x-control-border-color-focus, var(--x-color-primary, #1677ff)) !important;-webkit-box-shadow:0 0 0 3px var(--x-color-primary-bg, rgba(22, 119, 255, 0.06));box-shadow:0 0 0 3px var(--x-color-primary-bg, rgba(22, 119, 255, 0.06));z-index:1;outline:none}.x-input-number-wrapper{display:-ms-inline-flexbox;display:inline-flex;padding:0;background-color:var(--x-input-number-bg, var(--x-control-bg, var(--x-color-bg-container, #ffffff)))}.x-input-number-wrapper:hover .x-input-number-handler-wrap{opacity:1}.x-input-number-wrapper.x-input-number-focused .x-input-number-handler-wrap{opacity:1}.x-input-number-wrapper.x-input-number-disabled.disabled,.x-input-number-wrapper.x-input-number-disabled[disabled],.x-input-number-wrapper.x-input-number-disabled[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}.x-input-number-wrapper.x-input-number-disabled.disabled:hover,.x-input-number-wrapper.x-input-number-disabled[disabled]:hover,.x-input-number-wrapper.x-input-number-disabled[class*=-disabled]:hover{border-color:var(--x-control-border-color-disabled, var(--x-color-border, #d9d9d9)) !important}.x-input-number-wrapper.x-input-number-disabled .x-input-number-input{color:var(--x-input-number-disabled-color, var(--x-control-color-disabled, var(--x-color-text-disabled, rgba(0, 0, 0, 0.25))));cursor:not-allowed}.x-input-number-wrapper.x-input-number-disabled .x-input-number-handler-wrap{display:none}.x-input-number-wrapper.x-input-number-readonly .x-input-number-handler-wrap{display:none}.x-input-number-wrapper.x-input-number-out-of-range .x-input-number-input{color:var(--x-input-number-out-of-range-color, var(--x-color-error, #ff4d4f))}.x-input-number-wrapper.x-input-number-status-error{border-color:var(--x-control-border-color-error, var(--x-color-error, #ff4d4f))}.x-input-number-wrapper.x-input-number-status-error:hover:not(.disabled):not([disabled]){border-color:var(--x-control-border-color-error-hover, var(--x-color-error-hover, #ff7875))}.x-input-number-wrapper.x-input-number-status-error.focused,.x-input-number-wrapper.x-input-number-status-error: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)))}.x-input-number-wrapper.x-input-number-status-warning{border-color:var(--x-control-border-color-warning, var(--x-color-warning, #faad14))}.x-input-number-wrapper.x-input-number-status-warning:hover:not(.disabled):not([disabled]){border-color:var(--x-control-border-color-warning-hover, var(--x-color-warning-hover, #ffc53d))}.x-input-number-wrapper.x-input-number-status-warning.focused,.x-input-number-wrapper.x-input-number-status-warning: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)))}.x-input-number-wrapper.x-input-number-borderless{background-color:transparent;border-color:transparent;-webkit-box-shadow:none;box-shadow:none}.x-input-number-wrapper.x-input-number-borderless:hover{border-color:transparent}.x-input-number-wrapper.x-input-number-borderless.focused,.x-input-number-wrapper.x-input-number-borderless:focus-within{border-color:transparent;-webkit-box-shadow:none;box-shadow:none}.x-input-number-wrapper.x-input-number-filled{background-color:var(--x-color-fill-tertiary, rgba(0, 0, 0, 0.04));border-color:transparent}.x-input-number-wrapper.x-input-number-filled:hover:not(.disabled):not([disabled]){background-color:var(--x-color-fill-secondary, rgba(0, 0, 0, 0.06));border-color:transparent}.x-input-number-wrapper.x-input-number-filled.focused,.x-input-number-wrapper.x-input-number-filled:focus-within{background-color:var(--x-control-bg, var(--x-color-bg-container, #ffffff));border-color:var(--x-control-border-color-focus, var(--x-color-primary, #1677ff))}.x-input-number-input-wrap{-ms-flex:1;flex:1;min-width:0}.x-input-number-input{width:100%;height:var(--x-input-number-height, var(--x-control-height, var(--x-size-control-height, 32px)));padding:var(--x-input-number-padding-vertical, var(--x-control-padding-vertical, 4px)) var(--x-input-number-padding-horizontal, var(--x-control-padding-horizontal, 11px));background-color:transparent;border:none;border-radius:var(--x-input-number-border-radius, var(--x-border-radius-base, 6px));outline:none;color:inherit;font-size:inherit;line-height:inherit;text-align:left;-webkit-transition:all var(--x-input-number-motion-duration, var(--x-motion-duration-mid, 0.2s)) var(--x-input-number-motion-ease, var(--x-motion-ease-in-out, cubic-bezier(0.645, 0.045, 0.355, 1)));transition:all var(--x-input-number-motion-duration, var(--x-motion-duration-mid, 0.2s)) var(--x-input-number-motion-ease, var(--x-motion-ease-in-out, cubic-bezier(0.645, 0.045, 0.355, 1)));-webkit-box-sizing:border-box;box-sizing:border-box;-moz-appearance:textfield;-webkit-appearance:textfield;appearance:textfield}.x-input-number-input::-webkit-inner-spin-button,.x-input-number-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.x-input-number-input::-webkit-input-placeholder{color:var(--x-input-number-placeholder-color, var(--x-control-placeholder-color, var(--x-color-text-placeholder, rgba(0, 0, 0, 0.25))))}.x-input-number-input::-moz-placeholder{color:var(--x-input-number-placeholder-color, var(--x-control-placeholder-color, var(--x-color-text-placeholder, rgba(0, 0, 0, 0.25))))}.x-input-number-input:-ms-input-placeholder{color:var(--x-input-number-placeholder-color, var(--x-control-placeholder-color, var(--x-color-text-placeholder, rgba(0, 0, 0, 0.25))))}.x-input-number-input::-ms-input-placeholder{color:var(--x-input-number-placeholder-color, var(--x-control-placeholder-color, var(--x-color-text-placeholder, rgba(0, 0, 0, 0.25))))}.x-input-number-input::placeholder{color:var(--x-input-number-placeholder-color, var(--x-control-placeholder-color, var(--x-color-text-placeholder, rgba(0, 0, 0, 0.25))))}.x-input-number-small .x-input-number-input{height:var(--x-input-number-height-sm, var(--x-control-height-sm, var(--x-size-control-height-sm, 24px)));padding:0 var(--x-input-number-padding-horizontal-sm, var(--x-control-padding-horizontal-sm, 7px))}.x-input-number-small{border-radius:var(--x-input-number-border-radius-sm, var(--x-border-radius-sm, 4px))}.x-input-number-small .x-input-number-handler-wrap{width:var(--x-input-number-handler-width-sm, 18px)}.x-input-number-large .x-input-number-input{height:var(--x-input-number-height-lg, var(--x-control-height-lg, var(--x-size-control-height-lg, 40px)));padding:var(--x-input-number-padding-vertical, var(--x-control-padding-vertical, 4px)) var(--x-input-number-padding-horizontal-lg, var(--x-control-padding-horizontal, 11px));font-size:var(--x-input-number-font-size-lg, var(--x-font-size-lg, 16px))}.x-input-number-large{border-radius:var(--x-input-number-border-radius-lg, var(--x-border-radius-lg, 8px))}.x-input-number-large .x-input-number-handler-wrap{width:var(--x-input-number-handler-width-lg, 24px)}.x-input-number-handler-wrap{position:absolute;top:0;right:0;width:var(--x-input-number-handler-width, 22px);height:100%;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;background-color:var(--x-input-number-handler-bg, var(--x-color-bg-container, #fff));border-left:var(--x-input-number-border-width, var(--x-control-border-width, var(--x-border-width-base, 1px))) solid var(--x-input-number-handler-border-color, var(--x-color-border, #d9d9d9));border-radius:0 var(--x-input-number-border-radius, var(--x-border-radius-base, 6px)) var(--x-input-number-border-radius, var(--x-border-radius-base, 6px)) 0;opacity:0;-webkit-transition:opacity var(--x-input-number-motion-duration-fast, var(--x-motion-duration-fast, 0.1s)) ease;transition:opacity var(--x-input-number-motion-duration-fast, var(--x-motion-duration-fast, 0.1s)) ease;overflow:hidden}.x-input-number-handler{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;-ms-flex:1;flex:1;height:50%;color:var(--x-input-number-handler-color, var(--x-color-text-tertiary, rgba(0, 0, 0, 0.45)));font-size:7px;cursor:pointer;-webkit-transition:all var(--x-input-number-motion-duration-fast, var(--x-motion-duration-fast, 0.1s)) var(--x-input-number-motion-ease, var(--x-motion-ease-in-out, cubic-bezier(0.645, 0.045, 0.355, 1)));transition:all var(--x-input-number-motion-duration-fast, var(--x-motion-duration-fast, 0.1s)) var(--x-input-number-motion-ease, var(--x-motion-ease-in-out, cubic-bezier(0.645, 0.045, 0.355, 1)));-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.x-input-number-handler:hover{height:60%;color:var(--x-input-number-handler-color-hover, var(--x-color-primary, #1677ff))}.x-input-number-handler:active{background-color:var(--x-input-number-handler-active-bg, var(--x-color-fill-alter, rgba(0, 0, 0, 0.02)))}.x-input-number-handler.x-input-number-handler-disabled{color:var(--x-input-number-disabled-color, var(--x-control-color-disabled, var(--x-color-text-disabled, rgba(0, 0, 0, 0.25))));cursor:not-allowed}.x-input-number-handler.x-input-number-handler-disabled:hover{height:50%;color:var(--x-input-number-disabled-color, var(--x-control-color-disabled, var(--x-color-text-disabled, rgba(0, 0, 0, 0.25))))}.x-input-number-handler-up{border-bottom:var(--x-input-number-border-width, var(--x-control-border-width, var(--x-border-width-base, 1px))) solid var(--x-input-number-handler-border-color, var(--x-color-border, #d9d9d9));border-radius:0 var(--x-input-number-border-radius, var(--x-border-radius-base, 6px)) 0 0}.x-input-number-handler-down{border-radius:0 0 var(--x-input-number-border-radius, var(--x-border-radius-base, 6px)) 0}.x-input-number-handler-up-inner,.x-input-number-handler-down-inner{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:12px;height:12px}.x-input-number-handler-up-inner svg,.x-input-number-handler-down-inner svg{width:1em;height:1em}.x-input-number-prefix,.x-input-number-suffix{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;color:var(--x-input-number-color, var(--x-control-color, var(--x-color-text, rgba(0, 0, 0, 0.88))))}.x-input-number-prefix{padding-left:var(--x-input-number-padding-horizontal, var(--x-control-padding-horizontal, 11px))}.x-input-number-suffix{padding-right:var(--x-input-number-padding-horizontal, var(--x-control-padding-horizontal, 11px))}.x-input-number-has-affix .x-input-number-input{padding-left:8px;padding-right:8px}.x-input-number-group-addon{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;padding:0 12px;background-color:var(--x-input-number-addon-bg, var(--x-color-fill-alter, rgba(0, 0, 0, 0.02)));border:var(--x-input-number-border-width, var(--x-control-border-width, var(--x-border-width-base, 1px))) solid var(--x-input-number-border-color, var(--x-control-border-color, var(--x-color-border, #d9d9d9)));color:var(--x-input-number-addon-color, var(--x-color-text, rgba(0, 0, 0, 0.88)));font-size:var(--x-input-number-font-size, var(--x-control-font-size, var(--x-font-size-base, 14px)));white-space:nowrap;-webkit-transition:all var(--x-input-number-motion-duration, var(--x-motion-duration-mid, 0.2s)) var(--x-input-number-motion-ease, var(--x-motion-ease-in-out, cubic-bezier(0.645, 0.045, 0.355, 1)));transition:all var(--x-input-number-motion-duration, var(--x-motion-duration-mid, 0.2s)) var(--x-input-number-motion-ease, var(--x-motion-ease-in-out, cubic-bezier(0.645, 0.045, 0.355, 1)))}.x-input-number-group-addon-before{border-right:0;border-radius:var(--x-input-number-border-radius, var(--x-border-radius-base, 6px)) 0 0 var(--x-input-number-border-radius, var(--x-border-radius-base, 6px))}.x-input-number-group-addon-after{border-left:0;border-radius:0 var(--x-input-number-border-radius, var(--x-border-radius-base, 6px)) var(--x-input-number-border-radius, var(--x-border-radius-base, 6px)) 0}.x-input-number-has-addon{border-radius:0}:host:has(.x-input-number-group-addon-before) .x-input-number-wrapper{border-top-left-radius:0;border-bottom-left-radius:0}:host:has(.x-input-number-group-addon-after) .x-input-number-wrapper{border-top-right-radius:0;border-bottom-right-radius:0}`;
+
+const XInputNumber = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.xChange = createEvent(this, "xChange", 7);
+        this.xPressEnter = createEvent(this, "xPressEnter", 7);
+        this.xStep = createEvent(this, "xStep", 7);
+        this.xFocus = createEvent(this, "xFocus", 7);
+        this.xBlur = createEvent(this, "xBlur", 7);
+    }
+    get el() { return getElement(this); }
+    // ==================== Props ====================
+    /**
+     * The label text displayed after (on the right side of) the input field
+     * @example
+     * <x-input-number addonAfter="USD"></x-input-number>
+     */
+    addonAfter;
+    /**
+     * The label text displayed before (on the left side of) the input field
+     * @example
+     * <x-input-number addonBefore="$"></x-input-number>
+     */
+    addonBefore;
+    /**
+     * Whether to get focus when component mounted
+     * @default false
+     * @example
+     * <x-input-number autoFocus></x-input-number>
+     */
+    autoFocus = false;
+    /**
+     * Whether to show +/- controls
+     * @default true
+     * @example
+     * <x-input-number controls={false}></x-input-number>
+     */
+    controls = true;
+    /**
+     * Custom decimal separator
+     * @example
+     * <x-input-number decimalSeparator=","></x-input-number>
+     */
+    decimalSeparator;
+    /**
+     * Default value
+     * @example
+     * <x-input-number defaultValue={3}></x-input-number>
+     */
+    defaultValue;
+    /**
+     * Whether the input is disabled
+     * @default false
+     * @example
+     * <x-input-number disabled></x-input-number>
+     */
+    disabled = false;
+    /**
+     * Specifies the format of the value presented
+     * @example
+     * <x-input-number formatter={(v) => `$${v}`}></x-input-number>
+     */
+    formatter;
+    /**
+     * Whether to enable keyboard behavior
+     * @default true
+     * @example
+     * <x-input-number keyboard={false}></x-input-number>
+     */
+    keyboard = true;
+    /**
+     * The max value
+     * @default Number.MAX_SAFE_INTEGER
+     * @example
+     * <x-input-number max={100}></x-input-number>
+     */
+    max = Number.MAX_SAFE_INTEGER;
+    /**
+     * The min value
+     * @default Number.MIN_SAFE_INTEGER
+     * @example
+     * <x-input-number min={0}></x-input-number>
+     */
+    min = Number.MIN_SAFE_INTEGER;
+    /**
+     * Specifies the value extracted from formatter
+     * @example
+     * <x-input-number parser={(v) => v.replace(/[^\d.]/g, '')}></x-input-number>
+     */
+    parser;
+    /**
+     * Placeholder text
+     * @example
+     * <x-input-number placeholder="Amount"></x-input-number>
+     */
+    placeholder;
+    /**
+     * The precision of input value
+     * @example
+     * <x-input-number precision={2}></x-input-number>
+     */
+    precision;
+    /**
+     * The prefix icon/text for the Input
+     * @example
+     * <x-input-number prefixIcon="calculate"></x-input-number>
+     */
+    prefixIcon;
+    /**
+     * Whether the input is read only
+     * @default false
+     * @example
+     * <x-input-number readOnly></x-input-number>
+     */
+    readOnly = false;
+    /**
+     * The size of the input box
+     * @default 'middle'
+     * @example
+     * <x-input-number size="small"></x-input-number>
+     */
+    size = 'middle';
+    /**
+     * Set validation status
+     * @example
+     * <x-input-number status="error"></x-input-number>
+     */
+    status;
+    /**
+     * The number to which the current value is increased or decreased
+     * @default 1
+     * @example
+     * <x-input-number step={0.5}></x-input-number>
+     */
+    step = 1;
+    /**
+     * Set value as string to support high precision decimals
+     * @default false
+     * @example
+     * <x-input-number stringMode></x-input-number>
+     */
+    stringMode = false;
+    /**
+     * The suffix icon/text for the Input
+     * @example
+     * <x-input-number suffix="kg"></x-input-number>
+     */
+    suffix;
+    /**
+     * Current value
+     * @example
+     * <x-input-number value={10}></x-input-number>
+     */
+    value;
+    /**
+     * Variants of Input
+     * @default 'outlined'
+     * @example
+     * <x-input-number variant="filled"></x-input-number>
+     */
+    variant = 'outlined';
+    /**
+     * Enable wheel to change value
+     * @default false
+     * @example
+     * <x-input-number changeOnWheel></x-input-number>
+     */
+    changeOnWheel = false;
+    /**
+     * Custom class names
+     * @example
+     * <x-input-number classNames={{ root: 'my-input-number' }}></x-input-number>
+     */
+    classNames;
+    /**
+     * Custom styles
+     * @example
+     * <x-input-number styles={{ root: { width: '200px' } }}></x-input-number>
+     */
+    styles;
+    // ==================== Events ====================
+    /**
+     * Emitted when value is changed
+     * @example
+     * <x-input-number onXChange={(ev) => console.log(ev.detail)}></x-input-number>
+     */
+    xChange;
+    /**
+     * Emitted when the user presses Enter
+     * @example
+     * <x-input-number onXPressEnter={(ev) => console.log(ev.key)}></x-input-number>
+     */
+    xPressEnter;
+    /**
+     * Emitted when step button is clicked
+     * @example
+     * <x-input-number onXStep={(ev) => console.log(ev.detail)}></x-input-number>
+     */
+    xStep;
+    /**
+     * Emitted when input gets focus
+     * @example
+     * <x-input-number onXFocus={(ev) => console.log(ev)}></x-input-number>
+     */
+    xFocus;
+    /**
+     * Emitted when input loses focus
+     * @example
+     * <x-input-number onXBlur={(ev) => console.log(ev)}></x-input-number>
+     */
+    xBlur;
+    // ==================== State ====================
+    /**
+     * Focus state.
+     */
+    focused = false;
+    /**
+     * Display value in input.
+     */
+    inputValue = '';
+    /**
+     * Typing state to avoid clamping mid-typing.
+     */
+    isTyping = false;
+    // ==================== Private Properties ====================
+    /**
+     * Input element reference.
+     */
+    inputRef;
+    /**
+     * Timer for long-press stepping.
+     */
+    holdTimer;
+    // ==================== Lifecycle ====================
+    /**
+     * Initialize value before render.
+     * @returns void
+     */
+    componentWillLoad() {
+        // Initialize value
+        if (this.value === undefined && this.defaultValue !== undefined) {
+            this.value = this.defaultValue;
+        }
+        this.updateInputValue();
+    }
+    /**
+     * Auto focus on mount when enabled.
+     * @returns void
+     */
+    componentDidLoad() {
+        if (this.autoFocus && this.inputRef) {
+            this.inputRef.focus();
+        }
+    }
+    /**
+     * Cleanup timers on disconnect.
+     * @returns void
+     */
+    disconnectedCallback() {
+        if (this.holdTimer) {
+            clearInterval(this.holdTimer);
+        }
+    }
+    // ==================== Watchers ====================
+    /**
+     * Sync input display when value changes.
+     * @returns void
+     */
+    handleValueChange() {
+        if (!this.isTyping) {
+            this.updateInputValue();
+        }
+    }
+    // ==================== Public Methods ====================
+    /**
+     * Focus the input element
+     * @returns Promise<void>
+     * @example
+     * await el.setFocus()
+     */
+    async setFocus() {
+        this.inputRef?.focus();
+    }
+    /**
+     * Remove focus from the input element
+     * @returns Promise<void>
+     * @example
+     * await el.setBlur()
+     */
+    async setBlur() {
+        this.inputRef?.blur();
+    }
+    // ==================== Private Methods ====================
+    /**
+     * Update formatted input display value.
+     *
+     * Flow:
+     * 1. Checks if `value` is valid.
+     * 2. Formats value using `formatter` prop or default `formatWithPrecision`.
+     * 3. Replaces decimal separator if custom one is provided.
+     * 4. Updates `inputValue` state (which is displayed in the input).
+     *
+     * @returns void
+     */
+    updateInputValue() {
+        let displayValue = '';
+        if (this.value !== null && this.value !== undefined && this.value !== '') {
+            if (this.formatter) {
+                displayValue = this.formatter(this.value, {
+                    userTyping: this.isTyping,
+                    input: this.inputValue,
+                });
+            }
+            else {
+                displayValue = formatWithPrecision(this.value, this.precision);
+            }
+            // Apply custom decimal separator
+            if (this.decimalSeparator && this.decimalSeparator !== '.') {
+                displayValue = displayValue.replace('.', this.decimalSeparator);
+            }
+        }
+        this.inputValue = displayValue;
+    }
+    /**
+     * Parse input string into numeric value.
+     *
+     * Flow:
+     * 1. Handles empty or invalid inputs.
+     * 2. Applies `parser` prop if provided.
+     * 3. Normalizes custom decimal separator to dot.
+     * 4. Removes non-numeric characters.
+     * 5. Parses string to float.
+     *
+     * @param input - Input string.
+     * @returns InputNumberValue
+     */
+    parseValue(input) {
+        if (!input || input === '' || input === '-') {
+            return null;
+        }
+        let value = input;
+        // Apply parser if provided
+        if (this.parser) {
+            return this.parser(value);
+        }
+        // Replace custom decimal separator
+        if (this.decimalSeparator && this.decimalSeparator !== '.') {
+            value = value.replace(new RegExp(`\\${this.decimalSeparator}`, 'g'), '.');
+        }
+        // Remove non-numeric characters
+        value = value.replace(/[^\d.-]/g, '');
+        const numValue = parseFloat(value);
+        return isNaN(numValue) ? null : numValue;
+    }
+    /**
+     * Handle input change and emit events.
+     *
+     * Flow:
+     * 1. Updates `inputValue` state from target.
+     * 2. Sets `isTyping` flag to true (prevents auto-formatting while typing).
+     * 3. Parses value.
+     * 4. Updates `value` state (without clamping, to allow intermediate invalid states while typing).
+     * 5. Emits `xChange` event.
+     *
+     * @param e - Input event.
+     * @returns void
+     */
+    handleInput = (e) => {
+        const target = e.target;
+        this.inputValue = target.value;
+        this.isTyping = true;
+        const parsedValue = this.parseValue(target.value);
+        if (parsedValue !== null) {
+            // Don't clamp while typing, just update value
+            this.value = this.stringMode ? String(parsedValue) : parsedValue;
+            this.xChange.emit({ value: this.value });
+        }
+    };
+    /**
+     * Handle input focus.
+     * @param e - Focus event.
+     * @returns void
+     */
+    handleFocus = (e) => {
+        this.focused = true;
+        this.xFocus.emit(e);
+    };
+    /**
+     * Handle input blur and clamp value.
+     * @param e - Focus event.
+     * @returns void
+     */
+    handleBlur = (e) => {
+        this.focused = false;
+        this.isTyping = false;
+        // Validate and clamp value on blur
+        let finalValue = this.value;
+        if (finalValue !== null && finalValue !== undefined && finalValue !== '') {
+            finalValue = clampValue(finalValue, this.min, this.max, this.precision);
+        }
+        if (finalValue !== this.value) {
+            this.value = finalValue;
+            this.xChange.emit({ value: this.value });
+        }
+        this.updateInputValue();
+        this.xBlur.emit(e);
+    };
+    /**
+     * Handle keyboard input and stepping.
+     * @param e - Keyboard event.
+     * @returns void
+     */
+    handleKeyDown = (e) => {
+        if (e.key === 'Enter') {
+            this.xPressEnter.emit(e);
+            this.handleBlur(e);
+        }
+        else if (this.keyboard) {
+            if (e.key === 'ArrowUp') {
+                e.preventDefault();
+                this.handleStep('up');
+            }
+            else if (e.key === 'ArrowDown') {
+                e.preventDefault();
+                this.handleStep('down');
+            }
+        }
+    };
+    /**
+     * Handle mouse wheel for stepping.
+     * @param e - Wheel event.
+     * @returns void
+     */
+    handleWheel = (e) => {
+        if (!this.changeOnWheel || !this.focused || this.disabled || this.readOnly) {
+            return;
+        }
+        e.preventDefault();
+        if (e.deltaY < 0) {
+            this.handleStep('up');
+        }
+        else if (e.deltaY > 0) {
+            this.handleStep('down');
+        }
+    };
+    /**
+     * Handle step change.
+     *
+     * Flow:
+     * 1. Checks if disabled or readonly.
+     * 2. Calculates next value using `addStep`.
+     * 3. Clamps result within bounds.
+     * 4. Updates `value` and `inputValue`.
+     * 5. Emits `xChange` and `xStep` events.
+     *
+     * @param type - Step direction.
+     * @returns void
+     */
+    handleStep = (type) => {
+        if (this.disabled || this.readOnly)
+            return;
+        const nextValue = addStep(this.value, this.step, type, this.precision);
+        const clampedValue = clampValue(nextValue, this.min, this.max, this.precision);
+        if (clampedValue !== null) {
+            this.value = this.stringMode ? String(clampedValue) : clampedValue;
+            this.isTyping = false;
+            this.updateInputValue();
+            this.xChange.emit({ value: this.value });
+            this.xStep.emit({
+                value: this.value,
+                offset: type === 'up' ? this.step : -this.step,
+                type,
+            });
+        }
+    };
+    /**
+     * Handle step button press and start repeat.
+     * @param type - Step direction.
+     * @param e - Mouse event.
+     * @returns void
+     */
+    handleStepMouseDown = (type, e) => {
+        e.preventDefault();
+        this.handleStep(type);
+        // Long press handling
+        let delay = 600;
+        const repeatStep = () => {
+            this.handleStep(type);
+            delay = Math.max(50, delay * 0.9);
+            this.holdTimer = window.setTimeout(repeatStep, delay);
+        };
+        this.holdTimer = window.setTimeout(repeatStep, delay);
+    };
+    /**
+     * Stop long-press stepping.
+     * @returns void
+     */
+    handleStepMouseUp = () => {
+        if (this.holdTimer) {
+            clearTimeout(this.holdTimer);
+            this.holdTimer = undefined;
+        }
+    };
+    /**
+     * Check if step-up is disabled.
+     * @returns boolean
+     */
+    isUpDisabled() {
+        if (this.disabled || this.readOnly)
+            return true;
+        const numValue = typeof this.value === 'string' ? parseFloat(this.value) : this.value;
+        return numValue !== null && numValue !== undefined && !isNaN(numValue) && numValue >= this.max;
+    }
+    /**
+     * Check if step-down is disabled.
+     * @returns boolean
+     */
+    isDownDisabled() {
+        if (this.disabled || this.readOnly)
+            return true;
+        const numValue = typeof this.value === 'string' ? parseFloat(this.value) : this.value;
+        return numValue !== null && numValue !== undefined && !isNaN(numValue) && numValue <= this.min;
+    }
+    /**
+     * Check if current value is out of range.
+     * @returns boolean
+     */
+    isOutOfRange() {
+        if (this.value === null || this.value === undefined || this.value === '') {
+            return false;
+        }
+        const numValue = typeof this.value === 'string' ? parseFloat(this.value) : this.value;
+        if (isNaN(numValue))
+            return false;
+        return numValue < this.min || numValue > this.max;
+    }
+    // ==================== Render ====================
+    /**
+     * Render up icon.
+     * @returns JSX.Element
+     */
+    renderUpIcon() {
+        return (
+        // <svg viewBox="64 64 896 896" focusable="false" width="1em" height="1em" fill="currentColor">
+        //   <path d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z" />
+        // </svg>
+        h("x-icon", { name: getIcon('arrowUp') }));
+    }
+    /**
+     * Render down icon.
+     * @returns JSX.Element
+     */
+    renderDownIcon() {
+        return (
+        // <svg viewBox="64 64 896 896" focusable="false" width="1em" height="1em" fill="currentColor">
+        //   <path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z" />
+        // </svg>
+        h("x-icon", { name: getIcon('arrowDown') }));
+    }
+    /**
+     * Render input number with controls.
+     * @returns JSX.Element
+     * @example
+     * <x-input-number min={0} max={10} step={1}></x-input-number>
+     */
+    render() {
+        const hasAddon = !!this.addonBefore || !!this.addonAfter;
+        const hasAffix = !!this.prefixIcon || !!this.suffix;
+        const wrapperClasses = {
+            'x-input-number-wrapper': true,
+            'x-input-number-focused': this.focused,
+            'x-input-number-disabled': this.disabled,
+            'x-input-number-readonly': this.readOnly,
+            'disabled': this.disabled,
+            'readonly': this.readOnly,
+            'x-input-number-out-of-range': this.isOutOfRange(),
+            'x-input-number-status-error': this.status === 'error',
+            'x-input-number-status-warning': this.status === 'warning',
+            [`x-input-number-${this.size}`]: true,
+            [`x-input-number-${this.variant}`]: true,
+            'x-input-number-has-addon': hasAddon,
+            'x-input-number-has-affix': hasAffix,
+            [this.classNames?.root ?? '']: !!this.classNames?.root,
+        };
+        return (h(Host, { key: '121ff396550785581268cf58bbba452398aa194e', class: {
+                'x-input-number': true,
+                [`x-input-number-${this.size}`]: true,
+            } }, this.addonBefore && (h("span", { key: '65f9ebae015943f7748f625888a9257d3424d7de', class: "x-input-number-group-addon x-input-number-group-addon-before" }, h("slot", { key: 'eeaa2f4a4c22a04597109330901320ce5ca4d17a', name: "addonBefore" }, this.addonBefore))), h("div", { key: '4f13fea7319c6ea1520860a3eb62e758ed5f7e86', class: wrapperClasses, style: this.styles?.root }, this.prefixIcon && (h("span", { key: '5aef84bfd3445b9eba412a03c5bf3d6f4839849d', class: { 'x-input-number-prefix': true, [this.classNames?.prefix ?? '']: !!this.classNames?.prefix } }, h("slot", { key: 'e4d077e06a16fd89ea7e4d98767840b408123669', name: "prefix" }, this.prefixIcon))), h("div", { key: '95e44d6fb300e9a94c5bcbb64602523ee87bf26d', class: "x-input-number-input-wrap" }, h("input", { key: '9c416504c66b8ac7faa07dc2f83eca2867bb8d42', ref: (el) => (this.inputRef = el), class: {
+                'x-input-number-input': true,
+                [this.classNames?.input ?? '']: !!this.classNames?.input,
+            }, style: this.styles?.input, type: "text", inputMode: "decimal", autocomplete: "off", role: "spinbutton", "aria-valuemin": this.min, "aria-valuemax": this.max, "aria-valuenow": this.value, value: this.inputValue, disabled: this.disabled, readOnly: this.readOnly, placeholder: this.placeholder, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, onWheel: this.handleWheel })), this.suffix && (h("span", { key: 'f5d9448d1dd2f00cc7c874230e7aa44ee08d9116', class: { 'x-input-number-suffix': true, [this.classNames?.suffix ?? '']: !!this.classNames?.suffix } }, h("slot", { key: 'f58380ae67766132439c8146d823e2a86b6bf32b', name: "suffix" }, this.suffix))), this.controls && (h("div", { key: '72e5024bf232d212300639b5b2030093b2149531', class: { 'x-input-number-handler-wrap': true, [this.classNames?.handlers ?? '']: !!this.classNames?.handlers } }, h("span", { key: '67968406dee6198ff1cc652351d39ac53e6043ef', class: {
+                'x-input-number-handler': true,
+                'x-input-number-handler-up': true,
+                'x-input-number-handler-disabled': this.isUpDisabled(),
+            }, onMouseDown: (e) => !this.isUpDisabled() && this.handleStepMouseDown('up', e), onMouseUp: this.handleStepMouseUp, onMouseLeave: this.handleStepMouseUp }, h("span", { key: 'fba5d46dc0b52db13e8315e3201c87f23fd08f84', class: "x-input-number-handler-up-inner" }, this.renderUpIcon())), h("span", { key: '3ecbdf11351a90ebc795f021f0cccb05cf1e08f9', class: {
+                'x-input-number-handler': true,
+                'x-input-number-handler-down': true,
+                'x-input-number-handler-disabled': this.isDownDisabled(),
+            }, onMouseDown: (e) => !this.isDownDisabled() && this.handleStepMouseDown('down', e), onMouseUp: this.handleStepMouseUp, onMouseLeave: this.handleStepMouseUp }, h("span", { key: '4335fd45f1a1842d1419a8e5edc2449f45f3faf8', class: "x-input-number-handler-down-inner" }, this.renderDownIcon()))))), this.addonAfter && (h("span", { key: '0ca6d501421a7641e0ed055b1abd5f0d29e498d2', class: "x-input-number-group-addon x-input-number-group-addon-after" }, h("slot", { key: '41f103cb4fe2b0c7a6e6d2dccf82ac3b2a983f56', name: "addonAfter" }, this.addonAfter)))));
+    }
+    static get watchers() { return {
+        "value": [{
+                "handleValueChange": 0
+            }]
+    }; }
+};
+XInputNumber.style = xInputNumberCss();
+
+const xModalCss = () => `@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:none;position:fixed;top:0;left:0;width:100%;height:100%;z-index:var(--x-modal-z-index, 1000);font-family:var(--x-modal-font-family, var(--x-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif))}:host(.x-modal-open){display:block}.x-modal-mask{position:fixed;top:0;left:0;width:100%;height:100%;background-color:var(--x-modal-mask-bg, var(--x-color-bg-mask, rgba(0, 0, 0, 0.45)));z-index:var(--x-modal-mask-z-index, 1000)}.x-modal-wrap{position:fixed;top:0;left:0;width:100%;height:100%;overflow:auto;outline:0;z-index:var(--x-modal-z-index, 1000);display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:flex-start;-ms-flex-pack:center;justify-content:center;padding:var(--x-modal-padding-top, 100px) 0 var(--x-modal-padding-bottom, var(--x-spacing-xl, 24px))}:host(.x-modal-centered) .x-modal-wrap{-ms-flex-align:center;align-items:center;padding:0}.x-modal-content{position:relative;background-color:var(--x-modal-content-bg, var(--x-color-bg-container, #ffffff));background-clip:padding-box;border:0;border-radius:var(--x-modal-content-border-radius, var(--x-border-radius-lg, 8px));-webkit-box-shadow:var(--x-modal-content-shadow, var(--x-box-shadow, 0 6px 16px 0 rgba(0, 0, 0, 0.08)));box-shadow:var(--x-modal-content-shadow, var(--x-box-shadow, 0 6px 16px 0 rgba(0, 0, 0, 0.08)));pointer-events:auto;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.x-modal-header{padding:var(--x-modal-header-padding-block, var(--x-spacing-md, 16px)) var(--x-modal-header-padding-inline, var(--x-spacing-xl, 24px));color:var(--x-modal-title-color, var(--x-color-text-heading, rgba(0, 0, 0, 0.88)));background:var(--x-modal-header-bg, var(--x-color-bg-container, #ffffff));border-bottom:var(--x-modal-header-border-width, var(--x-border-width, 1px)) solid var(--x-modal-header-border-color, var(--x-color-border-secondary, #f0f0f0));border-radius:var(--x-modal-content-border-radius, var(--x-border-radius-lg, 8px)) var(--x-modal-content-border-radius, var(--x-border-radius-lg, 8px)) 0 0;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center}.x-modal-title{margin:0;color:var(--x-modal-title-color, var(--x-color-text-heading, rgba(0, 0, 0, 0.88)));font-weight:var(--x-modal-title-font-weight, var(--x-font-weight-strong, 600));font-size:var(--x-modal-title-font-size, var(--x-font-size-lg, 16px));line-height:var(--x-modal-close-size, 22px);word-wrap:break-word}.x-modal-close{display:block;width:var(--x-modal-close-size, 22px);height:var(--x-modal-close-size, 22px);margin-right:var(--x-modal-close-margin-end, -12px);padding:0;color:var(--x-modal-close-color, var(--x-color-icon, rgba(0, 0, 0, 0.45)));font-weight:var(--x-modal-close-font-weight, 700);line-height:var(--x-modal-close-line-height, 1);text-decoration:none;background:transparent;border:0;outline:0;cursor:pointer;-webkit-transition:color var(--x-modal-motion-duration, var(--x-motion-duration-slow, 0.3s));transition:color var(--x-modal-motion-duration, var(--x-motion-duration-slow, 0.3s))}.x-modal-close:hover{color:var(--x-modal-close-color-hover, var(--x-color-icon-hover, rgba(0, 0, 0, 0.88)));text-decoration:none}.x-modal-body{padding:var(--x-modal-body-padding, var(--x-spacing-xl, 24px));font-size:var(--x-modal-body-font-size, var(--x-font-size-base, 14px));line-height:var(--x-modal-body-line-height, var(--x-line-height-base, 1.5714));word-wrap:break-word}.x-modal-footer{padding:var(--x-modal-footer-padding-block, var(--x-spacing-sm, 8px)) var(--x-modal-footer-padding-inline, var(--x-spacing-md, 16px));text-align:right;background:transparent;border-top:var(--x-modal-header-border-width, var(--x-border-width, 1px)) solid var(--x-modal-footer-border-color, var(--x-color-border-secondary, #f0f0f0));border-radius:0 0 var(--x-modal-footer-border-radius, var(--x-border-radius-xs, 2px)) var(--x-modal-footer-border-radius, var(--x-border-radius-xs, 2px));display:-ms-flexbox;display:flex;-ms-flex-pack:end;justify-content:flex-end;gap:var(--x-modal-footer-gap, var(--x-spacing-xs, 8px))}`;
+
+const XModal = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.xOk = createEvent(this, "xOk", 7);
+        this.xCancel = createEvent(this, "xCancel", 7);
+    }
+    get el() { return getElement(this); }
+    /**
+     * Whether the modal is visible.
+     * @example
+     * <x-modal visible></x-modal>
+     */
+    visible = false;
+    /**
+     * Modal title.
+     * @example
+     * <x-modal modalTitle="Confirm"></x-modal>
+     */
+    modalTitle;
+    /**
+     * Width of the modal.
+     * @example
+     * <x-modal width={600}></x-modal>
+     */
+    width = 520;
+    /**
+     * Whether to show footer.
+     * @example
+     * <x-modal footer={false}></x-modal>
+     */
+    footer = true;
+    /**
+     * Whether to show close button.
+     * @example
+     * <x-modal closable={false}></x-modal>
+     */
+    closable = true;
+    /**
+     * Whether to show mask.
+     * @example
+     * <x-modal mask={false}></x-modal>
+     */
+    mask = true;
+    /**
+     * Whether clicking mask closes modal.
+     * @example
+     * <x-modal maskClosable={false}></x-modal>
+     */
+    maskClosable = true;
+    /**
+     * Whether to center the modal.
+     * @example
+     * <x-modal centered></x-modal>
+     */
+    centered = false;
+    /**
+     * OK button text.
+     * @example
+     * <x-modal okText="OK"></x-modal>
+     */
+    okText = translate('Modal.okText', {}, 'OK');
+    /**
+     * Cancel button text.
+     * @example
+     * <x-modal cancelText="Cancel"></x-modal>
+     */
+    cancelText = translate('Modal.cancelText', {}, 'Cancel');
+    /**
+     * OK button loading state.
+     * @example
+     * <x-modal okLoading></x-modal>
+     */
+    okLoading = false;
+    /**
+     * Cancel button loading state.
+     * @example
+     * <x-modal cancelLoading></x-modal>
+     */
+    cancelLoading = false;
+    /**
+     * OK button type.
+     * @example
+     * <x-modal okType="primary"></x-modal>
+     */
+    okType = 'primary';
+    /**
+     * Modal type (info, success, error, warning, confirm).
+     * @example
+     * <x-modal type="info"></x-modal>
+     */
+    type;
+    /**
+     * Event emitted when OK button is clicked.
+     * @example
+     * <x-modal onXOk={() => {}}></x-modal>
+     */
+    xOk;
+    /**
+     * Event emitted when Cancel button or modal is closed.
+     * @example
+     * <x-modal onXCancel={() => {}}></x-modal>
+     */
+    xCancel;
+    /**
+     * Portal instance for modal content.
+     */
+    portalInstance = null;
+    /**
+     * Create portal on initial visible state.
+     * @returns void
+     */
+    componentDidLoad() {
+        if (this.visible) {
+            this.updatePortal();
+        }
+    }
+    /**
+     * Cleanup portal on disconnect.
+     * @returns void
+     */
+    disconnectedCallback() {
+        this.destroyPortal();
+    }
+    handleVisibleChange() {
+        this.updatePortal();
+    }
+    handlePropsChange() {
+        if (this.visible) {
+            this.updatePortal();
+        }
+    }
+    /**
+     * Get body content from slot.
+     * @returns string
+     */
+    getBodyContent() {
+        const slot = this.el.shadowRoot?.querySelector('slot:not([name])');
+        if (slot) {
+            const nodes = slot.assignedNodes({ flatten: true });
+            return nodes.map(node => {
+                if (node.nodeType === Node.ELEMENT_NODE) {
+                    return node.outerHTML;
+                }
+                return node.textContent || '';
+            }).join('');
+        }
+        return '';
+    }
+    /**
+     * Get footer content from slot.
+     * @returns string
+     */
+    getFooterContent() {
+        const slot = this.el.shadowRoot?.querySelector('slot[name="footer"]');
+        if (slot) {
+            const nodes = slot.assignedNodes({ flatten: true });
+            if (nodes.length > 0) {
+                return nodes.map(node => {
+                    if (node.nodeType === Node.ELEMENT_NODE) {
+                        return node.outerHTML;
+                    }
+                    return node.textContent || '';
+                }).join('');
+            }
+        }
+        return '';
+    }
+    /**
+     * Build modal content element for portal.
+     *
+     * Flow:
+     * 1. Creates `x-modal-content` element.
+     * 2. Assigns all visual props (title, width, footer, etc.).
+     * 3. Injects body and footer content extracted from slots.
+     * 4. Attaches `xOk` and `xCancel` event listeners to forward events.
+     *
+     * @returns HTMLElement
+     */
+    buildModalElement() {
+        const modalEl = document.createElement('x-modal-content');
+        // Set properties
+        modalEl.modalTitle = this.modalTitle;
+        modalEl.width = this.width;
+        modalEl.footer = this.footer;
+        modalEl.closable = this.closable;
+        modalEl.mask = this.mask;
+        modalEl.maskClosable = this.maskClosable;
+        modalEl.centered = this.centered;
+        modalEl.okText = this.okText;
+        modalEl.cancelText = this.cancelText;
+        modalEl.okLoading = this.okLoading;
+        modalEl.cancelLoading = this.cancelLoading;
+        modalEl.okType = this.okType;
+        modalEl.type = this.type;
+        // Get slot content
+        modalEl.bodyContent = this.getBodyContent();
+        modalEl.footerContent = this.getFooterContent();
+        // Attach event listeners
+        modalEl.addEventListener('xOk', () => {
+            this.xOk.emit();
+        });
+        modalEl.addEventListener('xCancel', () => {
+            this.xCancel.emit();
+        });
+        return modalEl;
+    }
+    /**
+     * Update portal with modal content.
+     * @returns void
+     */
+    updatePortal() {
+        if (!this.visible) {
+            this.destroyPortal();
+            return;
+        }
+        // Build modal element
+        const modalElement = this.buildModalElement();
+        if (!this.portalInstance) {
+            // Create new portal instance
+            this.portalInstance = PortalController.create({
+                open: true,
+                zIndex: 1000,
+                content: modalElement,
+            });
+        }
+        else {
+            // Update existing portal
+            this.portalInstance.update({
+                open: true,
+                content: modalElement,
+            });
+        }
+    }
+    /**
+     * Destroy portal instance.
+     * @returns void
+     */
+    destroyPortal() {
+        if (this.portalInstance) {
+            this.portalInstance.destroy();
+            this.portalInstance = null;
+        }
+    }
+    /**
+     * Render hidden slots to capture content for portal.
+     * @returns JSX.Element
+     */
+    render() {
+        return (h(Host, { key: 'c3e46fc9b067f8d4700762b5bb0d284dc190c1e8', class: {
+                'x-modal': true,
+                'x-modal-open': this.visible,
+            } }, h("div", { key: 'd620493f845e4b86b29fa46b868dbab2d632908a', style: { display: 'none' } }, h("slot", { key: '202a7875383dfb9f3c6b5fc9a5183a916d0b9563' }), h("slot", { key: '10e85c6d0994bf249c3974bdb881efda16385702', name: "footer" }))));
+    }
+    static get watchers() { return {
+        "visible": [{
+                "handleVisibleChange": 0
+            }],
+        "modalTitle": [{
+                "handlePropsChange": 0
+            }],
+        "width": [{
+                "handlePropsChange": 0
+            }],
+        "footer": [{
+                "handlePropsChange": 0
+            }],
+        "closable": [{
+                "handlePropsChange": 0
+            }],
+        "mask": [{
+                "handlePropsChange": 0
+            }],
+        "maskClosable": [{
+                "handlePropsChange": 0
+            }],
+        "centered": [{
+                "handlePropsChange": 0
+            }],
+        "okText": [{
+                "handlePropsChange": 0
+            }],
+        "cancelText": [{
+                "handlePropsChange": 0
+            }],
+        "okLoading": [{
+                "handlePropsChange": 0
+            }],
+        "cancelLoading": [{
+                "handlePropsChange": 0
+            }],
+        "okType": [{
+                "handlePropsChange": 0
+            }],
+        "type": [{
+                "handlePropsChange": 0
+            }]
+    }; }
+};
+XModal.style = xModalCss();
+
+const xSliderCss = () => `@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;width:100%;height:var(--x-slider-height, var(--x-spacing-md, 16px));margin:var(--x-slider-margin-vertical, var(--x-spacing-sm, 12px)) var(--x-slider-margin-horizontal, var(--x-spacing-xs, 8px));padding:var(--x-slider-padding, var(--x-spacing-xxs, 4px)) 0;-ms-touch-action:none;touch-action:none;cursor:pointer;-webkit-box-sizing:border-box;box-sizing:border-box}:host(.x-slider-disabled){cursor:not-allowed}:host(.x-slider-vertical){width:var(--x-slider-height, var(--x-spacing-md, 16px));height:100%;margin:var(--x-slider-margin-horizontal, var(--x-spacing-xs, 8px)) var(--x-slider-margin-vertical, var(--x-spacing-sm, 12px));padding:0 var(--x-slider-padding, var(--x-spacing-xxs, 4px))}.x-slider-rail{position:absolute;top:50%;left:0;width:100%;height:var(--x-slider-track-height, 4px);background:var(--x-slider-rail-bg, var(--x-color-fill-secondary, rgba(0, 0, 0, 0.06)));border-radius:var(--x-slider-border-radius, var(--x-border-radius-xs, 4px));-webkit-transform:translateY(-50%);transform:translateY(-50%);-webkit-transition:background var(--x-slider-motion-duration, var(--x-motion-duration-mid, 0.2s));transition:background var(--x-slider-motion-duration, var(--x-motion-duration-mid, 0.2s))}:host(.x-slider-vertical) .x-slider-rail{top:0;left:50%;width:var(--x-slider-track-height, 4px);height:100%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.x-slider-track{position:absolute;top:50%;height:var(--x-slider-track-height, 4px);background:var(--x-slider-track-bg, var(--x-color-primary-bg-hover, #91caff));border-radius:var(--x-slider-border-radius, var(--x-border-radius-xs, 4px));-webkit-transform:translateY(-50%);transform:translateY(-50%);-webkit-transition:all var(--x-slider-motion-duration, var(--x-motion-duration-mid, 0.2s));transition:all var(--x-slider-motion-duration, var(--x-motion-duration-mid, 0.2s))}:host(.x-slider-vertical) .x-slider-track{left:50%;width:var(--x-slider-track-height, 4px);-webkit-transform:translateX(-50%);transform:translateX(-50%)}.x-slider-handle{position:absolute;top:50%;width:var(--x-slider-handle-size, var(--x-font-size-base, 14px));height:var(--x-slider-handle-size, var(--x-font-size-base, 14px));background:var(--x-slider-handle-bg, var(--x-color-white, #ffffff));border:2px solid var(--x-slider-handle-border-color, var(--x-color-primary, #1677ff));border-radius:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);-webkit-transition:border-color var(--x-slider-motion-duration, var(--x-motion-duration-mid, 0.2s)), -webkit-box-shadow var(--x-slider-motion-duration-slow, var(--x-motion-duration-slow, 0.3s)), -webkit-transform var(--x-slider-motion-duration, var(--x-motion-duration-mid, 0.2s)) var(--x-slider-motion-ease, var(--x-motion-ease-out-back, cubic-bezier(0.34, 1.56, 0.64, 1)));transition:border-color var(--x-slider-motion-duration, var(--x-motion-duration-mid, 0.2s)), -webkit-box-shadow var(--x-slider-motion-duration-slow, var(--x-motion-duration-slow, 0.3s)), -webkit-transform var(--x-slider-motion-duration, var(--x-motion-duration-mid, 0.2s)) var(--x-slider-motion-ease, var(--x-motion-ease-out-back, cubic-bezier(0.34, 1.56, 0.64, 1)));transition:border-color var(--x-slider-motion-duration, var(--x-motion-duration-mid, 0.2s)), box-shadow var(--x-slider-motion-duration-slow, var(--x-motion-duration-slow, 0.3s)), transform var(--x-slider-motion-duration, var(--x-motion-duration-mid, 0.2s)) var(--x-slider-motion-ease, var(--x-motion-ease-out-back, cubic-bezier(0.34, 1.56, 0.64, 1)));transition:border-color var(--x-slider-motion-duration, var(--x-motion-duration-mid, 0.2s)), box-shadow var(--x-slider-motion-duration-slow, var(--x-motion-duration-slow, 0.3s)), transform var(--x-slider-motion-duration, var(--x-motion-duration-mid, 0.2s)) var(--x-slider-motion-ease, var(--x-motion-ease-out-back, cubic-bezier(0.34, 1.56, 0.64, 1))), -webkit-box-shadow var(--x-slider-motion-duration-slow, var(--x-motion-duration-slow, 0.3s)), -webkit-transform var(--x-slider-motion-duration, var(--x-motion-duration-mid, 0.2s)) var(--x-slider-motion-ease, var(--x-motion-ease-out-back, cubic-bezier(0.34, 1.56, 0.64, 1)));cursor:-webkit-grab;cursor:grab;z-index:2}.x-slider-handle:hover{border-color:var(--x-slider-handle-border-color-hover, var(--x-color-primary, #1677ff))}.x-slider-handle:active{cursor:-webkit-grabbing;cursor:grabbing;-webkit-transform:translate(-50%, -50%) scale(1.1);transform:translate(-50%, -50%) scale(1.1);-webkit-box-shadow:var(--x-slider-handle-focus-shadow, 0 0 0 5px var(--x-color-primary-bg, rgba(22, 119, 255, 0.1)));box-shadow:var(--x-slider-handle-focus-shadow, 0 0 0 5px var(--x-color-primary-bg, rgba(22, 119, 255, 0.1)))}.x-slider-handle:focus{outline:none;border-color:var(--x-slider-handle-border-color-hover, var(--x-color-primary, #1677ff));-webkit-box-shadow:var(--x-slider-handle-focus-shadow, 0 0 0 5px var(--x-color-primary-bg, rgba(22, 119, 255, 0.1)));box-shadow:var(--x-slider-handle-focus-shadow, 0 0 0 5px var(--x-color-primary-bg, rgba(22, 119, 255, 0.1)))}:host(.x-slider-vertical) .x-slider-handle{left:50%;top:auto;-webkit-transform:translate(-50%, 50%);transform:translate(-50%, 50%)}.x-slider-tooltip{position:absolute;bottom:120%;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);padding:4px 8px;font-size:12px;background:#000;color:#fff;border-radius:4px;white-space:nowrap;opacity:0;pointer-events:none;-webkit-transition:opacity 0.2s ease;transition:opacity 0.2s ease}.x-slider-handle:hover .x-slider-tooltip,.x-slider-handle:active .x-slider-tooltip{opacity:1}:host(.x-slider-vertical) .x-slider-tooltip{left:120%;bottom:auto;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.x-slider-marks{position:absolute;top:100%;left:0;width:100%;margin-top:8px;font-size:12px}:host(.x-slider-vertical) .x-slider-marks{left:100%;top:0;width:auto;height:100%;margin-left:8px}.x-slider-mark{position:absolute;-webkit-transform:translateX(-50%);transform:translateX(-50%);color:rgba(0, 0, 0, 0.45);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;white-space:nowrap}:host(.x-slider-vertical) .x-slider-mark{-webkit-transform:translateY(50%);transform:translateY(50%)}:host(.x-slider-disabled) .x-slider-rail{background:var(--x-slider-rail-bg-disabled, var(--x-color-fill-tertiary, rgba(0, 0, 0, 0.04)))}:host(.x-slider-disabled) .x-slider-track{background:var(--x-slider-track-bg-disabled, var(--x-color-text-quaternary, rgba(0, 0, 0, 0.25)))}:host(.x-slider-disabled) .x-slider-handle{border-color:var(--x-slider-handle-border-color-disabled, var(--x-color-text-quaternary, rgba(0, 0, 0, 0.25)));cursor:not-allowed;-webkit-box-shadow:none;box-shadow:none;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%)}:host(.x-slider-disabled) .x-slider-tooltip{display:none}`;
+
+const XSlider = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.xChange = createEvent(this, "xChange", 7);
+        this.xAfterChange = createEvent(this, "xAfterChange", 7);
+    }
+    get el() { return getElement(this); }
+    /* ---------------- PROPS ---------------- */
+    /**
+     * Minimum slider value.
+     * @example
+     * <x-slider min={0}></x-slider>
+     */
+    min = 0;
+    /**
+     * Maximum slider value.
+     * @example
+     * <x-slider max={100}></x-slider>
+     */
+    max = 100;
+    /**
+     * Step size between values, or null to use marks.
+     * @example
+     * <x-slider step={5}></x-slider>
+     */
+    step = 1;
+    /**
+     * Enable range mode with two thumbs.
+     * @example
+     * <x-slider range></x-slider>
+     */
+    range = false;
+    /**
+     * Render slider vertically.
+     * @example
+     * <x-slider vertical></x-slider>
+     */
+    vertical = false;
+    /**
+     * Disable interaction.
+     * @example
+     * <x-slider disabled></x-slider>
+     */
+    disabled = false;
+    /**
+     * Allow thumbs to cross in range mode.
+     * @example
+     * <x-slider range allowCross={false}></x-slider>
+     */
+    allowCross = true;
+    /**
+     * Push behavior or minimum distance between thumbs.
+     * @example
+     * <x-slider range pushable={10}></x-slider>
+     */
+    pushable = false;
+    /**
+     * Allow dragging the selected track in range mode.
+     * @example
+     * <x-slider range draggableTrack></x-slider>
+     */
+    draggableTrack = false;
+    /**
+     * Show tooltip values on handles.
+     * @example
+     * <x-slider tooltip={false}></x-slider>
+     */
+    tooltip = true;
+    /**
+     * Marks displayed on the rail.
+     * @example
+     * <x-slider marks={{ 0: '0', 100: '100' }}></x-slider>
+     */
+    marks = {};
+    /**
+     * Controlled value for slider.
+     * @example
+     * <x-slider value={50}></x-slider>
+     */
+    value;
+    /**
+     * Default value when uncontrolled.
+     * @example
+     * <x-slider defaultValue={20}></x-slider>
+     */
+    defaultValue = 0;
+    /* ---------------- STATE ---------------- */
+    /**
+     * Active thumb index while dragging.
+     */
+    activeThumb = null;
+    /**
+     * Whether a drag interaction is active.
+     */
+    isDragging = false;
+    /* ---------------- EVENTS ---------------- */
+    /**
+     * Emits on value change.
+     * @example
+     * <x-slider onXChange={(ev) => console.log(ev.detail)}></x-slider>
+     */
+    xChange;
+    /**
+     * Emits after drag interaction ends.
+     * @example
+     * <x-slider onXAfterChange={(ev) => console.log(ev.detail)}></x-slider>
+     */
+    xAfterChange;
+    /**
+     * Rail element reference for position calculations.
+     */
+    rail;
+    /* ---------------- LIFECYCLE ---------------- */
+    componentWillLoad() {
+        if (this.value === undefined) {
+            this.value = this.range
+                ? [this.min, this.max]
+                : this.defaultValue;
+        }
+    }
+    onValueChange() {
+        this.xChange.emit(this.value);
+    }
+    /* ---------------- UTIL ---------------- */
+    /**
+     * Clamp value within min and max.
+     * @param v - Input value.
+     * @returns number
+     * @example
+     * this.clamp(120)
+     */
+    clamp(v) {
+        return Math.min(this.max, Math.max(this.min, v));
+    }
+    /**
+     * Build list of steps based on step or marks.
+     * @returns number[]
+     * @example
+     * this.getSteps()
+     */
+    getSteps() {
+        if (this.step === null) {
+            return Object.keys(this.marks).map(Number);
+        }
+        const arr = [];
+        for (let v = this.min; v <= this.max; v += this.step) {
+            arr.push(v);
+        }
+        return arr;
+    }
+    /**
+     * Snap value to nearest step or mark.
+     * @param v - Raw value.
+     * @returns number
+     * @example
+     * this.snap(42)
+     */
+    snap(v) {
+        if (this.step === null) {
+            const steps = this.getSteps();
+            return steps.reduce((prev, curr) => Math.abs(curr - v) < Math.abs(prev - v) ? curr : prev);
+        }
+        return Math.round(v / this.step) * this.step;
+    }
+    /**
+     * Convert value to percentage along the rail.
+     * @param v - Value to convert.
+     * @returns number
+     * @example
+     * this.percent(50)
+     */
+    percent(v) {
+        return ((v - this.min) / (this.max - this.min)) * 100;
+    }
+    /**
+     * Calculates the slider value based on a mouse event.
+     *
+     * Flow:
+     * 1. Gets the bounding rectangle of the rail.
+     * 2. Calculates the ratio of the mouse position relative to the rail's width (or height if vertical).
+     * 3. Maps the ratio to the [min, max] range.
+     * 4. Clamps the value to ensure it stays within bounds.
+     * 5. Snaps the value to the nearest step.
+     *
+     * @param e - The mouse event.
+     * @returns number - The calculated value.
+     */
+    getValueFromEvent(e) {
+        const rect = this.rail.getBoundingClientRect();
+        const ratio = this.vertical
+            ? (rect.bottom - e.clientY) / rect.height
+            : (e.clientX - rect.left) / rect.width;
+        const v = this.min + this.clamp(ratio) * (this.max - this.min);
+        return this.snap(this.clamp(v));
+    }
+    /* ---------------- PUSH LOGIC ---------------- */
+    /**
+     * Enforces the `pushable` constraint between range thumbs.
+     * Ensures thumbs maintain a minimum distance from each other.
+     *
+     * @param values - Current range values [v1, v2].
+     * @param index - The index of the thumb actively being moved.
+     * @returns [number, number] - The adjusted values.
+     */
+    pushRange(values, index) {
+        if (!this.pushable)
+            return values;
+        const distance = typeof this.pushable === 'number' ? this.pushable : 1;
+        if (index === 0 && values[1] - values[0] < distance) {
+            values[1] = values[0] + distance;
+        }
+        if (index === 1 && values[1] - values[0] < distance) {
+            values[0] = values[1] - distance;
+        }
+        return values;
+    }
+    /* ---------------- MOUSE ---------------- */
+    /**
+     * Handles the mouse down event to initiate dragging.
+     *
+     * Flow:
+     * 1. Checks if disabled.
+     * 2. Sets `isDragging` flag.
+     * 3. Determines which thumb is active (closest to click if not specified).
+     * 4. Updates the value immediately.
+     * 5. Attaches global mouse listeners for drag and release.
+     *
+     * @param e - The mouse event.
+     * @param index - Optional index of the handle being clicked.
+     */
+    onMouseDown = (e, index) => {
+        if (this.disabled)
+            return;
+        this.isDragging = true;
+        if (this.range) {
+            this.activeThumb =
+                index ??
+                    this.getClosestThumb(this.getValueFromEvent(e));
+        }
+        this.updateValue(e);
+        document.addEventListener('mousemove', this.onMouseMove);
+        document.addEventListener('mouseup', this.onMouseUp);
+    };
+    /**
+     * Handles mouse move during drag.
+     * Updates the value if dragging is active.
+     */
+    onMouseMove = (e) => {
+        if (!this.isDragging)
+            return;
+        this.updateValue(e);
+    };
+    /**
+     * Handles mouse up to end drag.
+     * Clears state, emits final change event, and removes listeners.
+     */
+    onMouseUp = () => {
+        this.isDragging = false;
+        this.activeThumb = null;
+        this.xAfterChange.emit(this.value);
+        document.removeEventListener('mousemove', this.onMouseMove);
+        document.removeEventListener('mouseup', this.onMouseUp);
+    };
+    /**
+     * Updates the slider value logic during interaction.
+     *
+     * Flow:
+     * 1. Calculates new value from event.
+     * 2. If single mode, updates value directly.
+     * 3. If range mode:
+     *    - Handles track dragging (moving both thumbs).
+     *    - Handles individual thumb dragging.
+     *    - Enforces `allowCross` constraint (swapping thumbs if needed).
+     *    - Enforces `pushRange` constraint.
+     *
+     * @param e - The mouse event.
+     */
+    updateValue(e) {
+        const v = this.getValueFromEvent(e);
+        if (!this.range) {
+            this.value = v;
+            return;
+        }
+        let values = [...this.value];
+        if (this.draggableTrack && this.activeThumb === null) {
+            const diff = v - values[0];
+            values = [values[0] + diff, values[1] + diff];
+        }
+        else {
+            values[this.activeThumb] = v;
+            if (!this.allowCross) {
+                if (this.activeThumb === 0)
+                    values[0] = Math.min(values[0], values[1]);
+                else
+                    values[1] = Math.max(values[1], values[0]);
+            }
+            values = this.pushRange(values, this.activeThumb);
+        }
+        this.value = values;
+    }
+    /**
+     * Finds the index of the thumb closest to the given value.
+     * Used to determine which thumb to move when clicking on the rail.
+     *
+     * @param v - The target value.
+     * @returns number - 0 or 1.
+     */
+    getClosestThumb(v) {
+        const [v1, v2] = this.value;
+        return Math.abs(v - v1) < Math.abs(v - v2) ? 0 : 1;
+    }
+    /* ---------------- KEYBOARD ---------------- */
+    /**
+     * Handles keyboard navigation for fine-tuning values.
+     * Supports Arrow keys for stepping up/down.
+     *
+     * @param e - Keyboard event.
+     * @param index - Index of the handle focused.
+     */
+    onKeyDown = (e, index) => {
+        if (this.disabled)
+            return;
+        const delta = e.key === 'ArrowRight' || e.key === 'ArrowUp'
+            ? this.step ?? 1
+            : e.key === 'ArrowLeft' || e.key === 'ArrowDown'
+                ? -(this.step ?? 1)
+                : 0;
+        if (!delta)
+            return;
+        e.preventDefault();
+        if (!this.range) {
+            this.value = this.clamp(this.value + delta);
+        }
+        else {
+            const values = [...this.value];
+            values[index] = this.clamp(values[index] + delta);
+            this.value = values;
+        }
+    };
+    /* ---------------- RENDER ---------------- */
+    /**
+     * Renders the marks (ticks) along the slider rail.
+     *
+     * @returns JSX.Element[] - List of mark elements positioned by percentage.
+     */
+    renderMarks() {
+        return Object.entries(this.marks).map(([k, label]) => {
+            const percent = this.percent(Number(k));
+            return (h("div", { class: "x-slider-mark", style: {
+                    [this.vertical ? 'bottom' : 'left']: `${percent}%`,
+                } }, label));
+        });
+    }
+    /**
+     * Main render method for the Slider component.
+     *
+     * Structure:
+     * - Host element with classes for vertical/disabled state.
+     * - Rail: The background line.
+     * - Track: The active/colored segment indicating selected range.
+     * - Handles: Draggable knobs for interacting with values.
+     * - Marks: Optional labeled ticks.
+     *
+     * @returns JSX.Element
+     */
+    render() {
+        const values = this.range
+            ? this.value
+            : [this.value];
+        const p1 = this.percent(values[0]);
+        const p2 = this.range ? this.percent(values[1]) : p1;
+        return (h(Host, { key: '90fc23fbdcc78816be8c8d32d3e46e4687d3fad6', class: {
+                'x-slider': true,
+                'x-slider-vertical': this.vertical,
+                'x-slider-disabled': this.disabled,
+            } }, h("div", { key: '9ff4c3df41adfcd7cc3f7c65784fc569b6693ff3', class: "x-slider-rail", ref: el => (this.rail = el), onClick: e => this.onMouseDown(e) }), h("div", { key: '0c5f77c19a65e251e46d0393e626bfe96abd18c9', class: "x-slider-track", style: {
+                [this.vertical ? 'height' : 'width']: `${this.range ? p2 - p1 : p1}%`,
+                [this.vertical ? 'bottom' : 'left']: `${this.range ? p1 : 0}%`,
+            } }), values.map((v, i) => {
+            const percent = this.percent(v);
+            return (h("div", { class: "x-slider-handle", style: {
+                    [this.vertical ? 'bottom' : 'left']: `${percent}%`,
+                }, tabindex: 0, role: "slider", "aria-valuemin": this.min, "aria-valuemax": this.max, "aria-valuenow": v, onMouseDown: e => this.onMouseDown(e, i), onKeyDown: e => this.onKeyDown(e, i) }, this.tooltip && (h("div", { class: "x-slider-tooltip" }, v))));
+        }), h("div", { key: 'f3dd9f0c39947e115fd6160c1003cf48f93e97af', class: "x-slider-marks" }, this.renderMarks())));
+    }
+    static get watchers() { return {
+        "value": [{
+                "onValueChange": 0
+            }]
+    }; }
+};
+XSlider.style = xSliderCss();
+
+const xSwitchCss = () => `@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{margin:0;padding:0;color:var(--x-switch-inner-color, var(--x-color-white, #ffffff));font-size:var(--x-switch-font-size, var(--x-font-size-sm, 12px));line-height:var(--x-switch-height, 22px);list-style:none;position:relative;display:inline-block;min-width:var(--x-switch-min-width, 44px);height:var(--x-switch-height, 22px);vertical-align:middle;background:var(--x-switch-bg, var(--x-color-text-quaternary, rgba(0, 0, 0, 0.25)));border:0;border-radius:100px;cursor:pointer;-webkit-transition:all var(--x-switch-motion-duration, var(--x-motion-duration-fast, 0.1s)) var(--x-switch-motion-timing, ease-in-out);transition:all var(--x-switch-motion-duration, var(--x-motion-duration-fast, 0.1s)) var(--x-switch-motion-timing, ease-in-out);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host(.x-switch-checked){background:var(--x-switch-bg-checked, var(--x-color-primary, #1677ff))}:host(.x-switch-checked):not(.x-switch-disabled):not(.x-switch-loading):hover{background:var(--x-switch-bg-checked-hover, var(--x-color-primary-hover, #4096ff))}:host(.x-switch-disabled){cursor:not-allowed;opacity:var(--x-switch-opacity-disabled, var(--x-opacity-disabled, 0.65))}:host(.x-switch-loading){cursor:not-allowed;opacity:var(--x-switch-opacity-disabled, var(--x-opacity-disabled, 0.65))}.x-switch-handle{position:absolute;top:var(--x-switch-handle-offset, 2px);left:var(--x-switch-handle-offset, 2px);width:var(--x-switch-handle-size, 18px);height:var(--x-switch-handle-size, 18px);background:var(--x-switch-handle-bg, var(--x-color-white, #ffffff));border-radius:var(--x-switch-handle-size, 18px);-webkit-transition:all var(--x-switch-motion-duration, var(--x-motion-duration-fast, 0.1s)) var(--x-switch-motion-timing, ease-in-out);transition:all var(--x-switch-motion-duration, var(--x-motion-duration-fast, 0.1s)) var(--x-switch-motion-timing, ease-in-out);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}.x-switch-handle::before{position:absolute;top:0;right:0;bottom:0;left:0;background-color:transparent;border-radius:calc(var(--x-switch-handle-size, 18px) / 2);-webkit-box-shadow:var(--x-switch-handle-shadow, var(--x-shadow-tertiary, 0 2px 4px 0 rgba(0, 21, 41, 0.08)));box-shadow:var(--x-switch-handle-shadow, var(--x-shadow-tertiary, 0 2px 4px 0 rgba(0, 21, 41, 0.08)));-webkit-transition:all var(--x-switch-motion-duration, var(--x-motion-duration-fast, 0.1s)) var(--x-switch-motion-timing, ease-in-out);transition:all var(--x-switch-motion-duration, var(--x-motion-duration-fast, 0.1s)) var(--x-switch-motion-timing, ease-in-out);content:""}:host(.x-switch-checked) .x-switch-handle{left:calc(100% - var(--x-switch-handle-size, 18px) - var(--x-switch-handle-offset, 2px))}.x-switch-inner{display:block;margin:0 7px 0 25px;color:var(--x-switch-inner-color, var(--x-color-white, #ffffff));font-size:var(--x-switch-font-size, var(--x-font-size-sm, 12px));-webkit-transition:margin var(--x-switch-motion-duration, var(--x-motion-duration-fast, 0.1s)) var(--x-switch-motion-timing, ease-in-out);transition:margin var(--x-switch-motion-duration, var(--x-motion-duration-fast, 0.1s)) var(--x-switch-motion-timing, ease-in-out)}:host(.x-switch-checked) .x-switch-inner{margin:0 25px 0 7px}:host(.x-switch-small){min-width:var(--x-switch-min-width-sm, 28px);height:var(--x-switch-height-sm, 16px);line-height:var(--x-switch-height-sm, 16px)}:host(.x-switch-small) .x-switch-handle{width:var(--x-switch-handle-size-sm, 12px);height:var(--x-switch-handle-size-sm, 12px)}:host(.x-switch-small.x-switch-checked) .x-switch-handle{left:calc(100% - var(--x-switch-handle-size-sm, 12px) - var(--x-switch-handle-offset, 2px))}:host(.x-switch-small) .x-switch-inner{margin:0 5px 0 18px}:host(.x-switch-small.x-switch-checked) .x-switch-inner{margin:0 18px 0 5px}.x-switch-loading-icon{color:var(--x-switch-loading-color, var(--x-color-text-secondary, rgba(0, 0, 0, 0.45)));font-size:var(--x-switch-font-size, var(--x-font-size-sm, 12px))}@-webkit-keyframes loadingCircle{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes loadingCircle{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.anticon-spin{display:inline-block;-webkit-animation:loadingCircle 1s infinite linear;animation:loadingCircle 1s infinite linear}`;
+
+const XSwitch = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.xChange = createEvent(this, "xChange", 7);
+        this.xClick = createEvent(this, "xClick", 7);
+    }
+    /**
+     * Whether the switch is automatically focused.
+     * @example
+     * <x-switch autoFocus></x-switch>
+     */
+    autoFocus = false;
+    /**
+     * Determine whether the Switch is checked.
+     * @example
+     * <x-switch checked></x-switch>
+     */
+    checked = false;
+    /**
+     * The content to be shown when the state is checked.
+     * @example
+     * <x-switch checkedChildren="On"></x-switch>
+     */
+    checkedChildren;
+    /**
+     * Whether to set the initial state.
+     * @example
+     * <x-switch defaultChecked></x-switch>
+     */
+    defaultChecked = false;
+    /**
+     * Disable switch.
+     * @example
+     * <x-switch disabled></x-switch>
+     */
+    disabled = false;
+    /**
+     * Loading state of switch.
+     * @example
+     * <x-switch loading></x-switch>
+     */
+    loading = false;
+    /**
+     * The size of the Switch.
+     * @example
+     * <x-switch size="small"></x-switch>
+     */
+    size = 'default';
+    /**
+     * The content to be shown when the state is unchecked.
+     * @example
+     * <x-switch unCheckedChildren="Off"></x-switch>
+     */
+    unCheckedChildren;
+    /**
+     * Emits when checked state changes.
+     * @example
+     * <x-switch onXChange={(ev) => console.log(ev.detail)}></x-switch>
+     */
+    xChange;
+    /**
+     * Emits when switch is clicked.
+     * @example
+     * <x-switch onXClick={(ev) => console.log(ev.detail)}></x-switch>
+     */
+    xClick;
+    /**
+     * Component lifecycle method called before loading.
+     * Initializes the checked state if `defaultChecked` is true.
+     */
+    componentWillLoad() {
+        if (this.defaultChecked) {
+            this.checked = true;
+        }
+    }
+    /**
+     * Handles click events to toggle the switch state.
+     *
+     * Flow:
+     * 1. Checks if disabled or loading; if so, returns immediately.
+     * 2. Toggles the `checked` state.
+     * 3. Emits `xChange` with the new boolean state.
+     * 4. Emits `xClick` with the original event.
+     *
+     * @param e - The click event.
+     */
+    handleClick(e) {
+        if (this.disabled || this.loading)
+            return;
+        this.checked = !this.checked;
+        this.xChange.emit(this.checked);
+        this.xClick.emit(e);
+    }
+    /**
+     * Renders the Switch component.
+     *
+     * Structure:
+     * - Host element serves as the container and click target.
+     * - Handle: The moving circle part (contains loading spinner if active).
+     * - Inner: The text label (On/Off) depending on checked state.
+     *
+     * @returns JSX.Element
+     */
+    render() {
+        return (h(Host, { key: '1503ee5789c9b75305a76eac0e2eece6c2422fa0', class: {
+                'x-switch': true,
+                'x-switch-checked': this.checked,
+                'x-switch-disabled': this.disabled,
+                'x-switch-loading': this.loading,
+                'x-switch-small': this.size === 'small',
+            }, onClick: (e) => this.handleClick(e) }, h("div", { key: 'b6ff513a02e20c628773c7424536c59b1e279f40', class: "x-switch-handle" }, this.loading && (h("span", { key: '79ae4f5fe973ef32f912eddcd312016eb7d43113', role: "img", "aria-label": "loading", class: "anticon anticon-loading x-switch-loading-icon" }, h("svg", { key: 'cc4f860e48867197507817752d901e6b4439aed4', viewBox: "0 0 1024 1024", focusable: "false", "data-icon": "loading", width: "1em", height: "1em", fill: "currentColor", "aria-hidden": "true", class: "anticon-spin" }, h("path", { key: '61d09ab8a2b080403e93bafb51e59c1624258097', d: "M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z" }))))), h("span", { key: '6bc8ccdd4d4468eae859ed05618a037fe8c324b9', class: "x-switch-inner" }, this.checked ? this.checkedChildren : this.unCheckedChildren)));
+    }
+};
+XSwitch.style = xSwitchCss();
+
+const xTooltipCss = () => `@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-tooltip-font-family, var(--x-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif))}.x-tooltip-trigger{display:inline-block}.x-tooltip{position:absolute;z-index:var(--x-tooltip-z-index, var(--x-tooltip-z-index, var(--x-z-index-tooltip, 1070)));display:block;visibility:visible;font-size:var(--x-tooltip-font-size, var(--x-font-size, 14px));line-height:var(--x-tooltip-line-height, var(--x-line-height, 1.5714));word-wrap:break-word;opacity:1;-webkit-transition:opacity var(--x-tooltip-motion-duration, var(--x-motion-duration-slow, 0.3s)), visibility var(--x-tooltip-motion-duration, var(--x-motion-duration-slow, 0.3s));transition:opacity var(--x-tooltip-motion-duration, var(--x-motion-duration-slow, 0.3s)), visibility var(--x-tooltip-motion-duration, var(--x-motion-duration-slow, 0.3s));white-space:nowrap;max-width:var(--x-tooltip-max-width, 250px);pointer-events:none}.x-tooltip.x-tooltip-hidden{opacity:0;visibility:hidden;pointer-events:none}.x-tooltip-inner{min-width:var(--x-tooltip-min-width, 30px);min-height:var(--x-tooltip-min-height, var(--x-control-height, 32px));padding:var(--x-tooltip-padding-block, var(--x-spacing-xxs, 4px)) var(--x-tooltip-padding-inline, var(--x-spacing-xs, 8px));color:var(--x-tooltip-color, var(--x-color-white, #ffffff));text-align:left;text-decoration:none;word-wrap:break-word;background-color:var(--x-tooltip-color, var(--x-tooltip-bg, var(--x-color-bg-spotlight, rgba(0, 0, 0, 0.85))));border-radius:var(--x-tooltip-border-radius, var(--x-border-radius-xs, 4px));-webkit-box-shadow:var(--x-tooltip-shadow, var(--x-shadow-secondary, 0 6px 16px 0 rgba(0, 0, 0, 0.08)));box-shadow:var(--x-tooltip-shadow, var(--x-shadow-secondary, 0 6px 16px 0 rgba(0, 0, 0, 0.08)))}.x-tooltip-arrow{position:absolute;width:0;height:0;border-color:transparent;border-style:solid}.x-tooltip-placement-top{bottom:100%;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);padding-bottom:var(--x-tooltip-offset, var(--x-spacing-xs, 8px))}.x-tooltip-placement-top .x-tooltip-arrow{bottom:var(--x-tooltip-arrow-offset-vertical, 3px);left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);border-width:var(--x-tooltip-arrow-size, 5px) var(--x-tooltip-arrow-size, 5px) 0;border-top-color:var(--x-tooltip-color, var(--x-tooltip-bg, var(--x-color-bg-spotlight, rgba(0, 0, 0, 0.85))))}.x-tooltip-placement-topLeft{bottom:100%;left:0;padding-bottom:var(--x-tooltip-offset, var(--x-spacing-xs, 8px))}.x-tooltip-placement-topLeft .x-tooltip-arrow{bottom:var(--x-tooltip-arrow-offset-vertical, 3px);left:var(--x-tooltip-arrow-offset-horizontal, 16px);border-width:var(--x-tooltip-arrow-size, 5px) var(--x-tooltip-arrow-size, 5px) 0;border-top-color:var(--x-tooltip-color, var(--x-tooltip-bg, var(--x-color-bg-spotlight, rgba(0, 0, 0, 0.85))))}.x-tooltip-placement-topRight{bottom:100%;right:0;padding-bottom:var(--x-tooltip-offset, var(--x-spacing-xs, 8px))}.x-tooltip-placement-topRight .x-tooltip-arrow{bottom:var(--x-tooltip-arrow-offset-vertical, 3px);right:var(--x-tooltip-arrow-offset-horizontal, 16px);border-width:var(--x-tooltip-arrow-size, 5px) var(--x-tooltip-arrow-size, 5px) 0;border-top-color:var(--x-tooltip-color, var(--x-tooltip-bg, var(--x-color-bg-spotlight, rgba(0, 0, 0, 0.85))))}.x-tooltip-placement-bottom{top:100%;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);padding-top:var(--x-tooltip-offset, var(--x-spacing-xs, 8px))}.x-tooltip-placement-bottom .x-tooltip-arrow{top:var(--x-tooltip-arrow-offset-vertical, 3px);left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);border-width:0 var(--x-tooltip-arrow-size, 5px) var(--x-tooltip-arrow-size, 5px);border-bottom-color:var(--x-tooltip-color, var(--x-tooltip-bg, var(--x-color-bg-spotlight, rgba(0, 0, 0, 0.85))))}.x-tooltip-placement-bottomLeft{top:100%;left:0;padding-top:var(--x-tooltip-offset, var(--x-spacing-xs, 8px))}.x-tooltip-placement-bottomLeft .x-tooltip-arrow{top:var(--x-tooltip-arrow-offset-vertical, 3px);left:var(--x-tooltip-arrow-offset-horizontal, 16px);border-width:0 var(--x-tooltip-arrow-size, 5px) var(--x-tooltip-arrow-size, 5px);border-bottom-color:var(--x-tooltip-color, var(--x-tooltip-bg, var(--x-color-bg-spotlight, rgba(0, 0, 0, 0.85))))}.x-tooltip-placement-bottomRight{top:100%;right:0;padding-top:var(--x-tooltip-offset, var(--x-spacing-xs, 8px))}.x-tooltip-placement-bottomRight .x-tooltip-arrow{top:var(--x-tooltip-arrow-offset-vertical, 3px);right:var(--x-tooltip-arrow-offset-horizontal, 16px);border-width:0 var(--x-tooltip-arrow-size, 5px) var(--x-tooltip-arrow-size, 5px);border-bottom-color:var(--x-tooltip-color, var(--x-tooltip-bg, var(--x-color-bg-spotlight, rgba(0, 0, 0, 0.85))))}.x-tooltip-placement-left{right:100%;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);padding-right:var(--x-tooltip-offset, var(--x-spacing-xs, 8px))}.x-tooltip-placement-left .x-tooltip-arrow{right:var(--x-tooltip-arrow-offset-vertical, 3px);top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);border-width:var(--x-tooltip-arrow-size, 5px) 0 var(--x-tooltip-arrow-size, 5px) var(--x-tooltip-arrow-size, 5px);border-left-color:var(--x-tooltip-color, var(--x-tooltip-bg, var(--x-color-bg-spotlight, rgba(0, 0, 0, 0.85))))}.x-tooltip-placement-leftTop{right:100%;top:0;padding-right:var(--x-tooltip-offset, var(--x-spacing-xs, 8px))}.x-tooltip-placement-leftTop .x-tooltip-arrow{right:var(--x-tooltip-arrow-offset-vertical, 3px);top:var(--x-tooltip-arrow-edge-offset, 8px);border-width:var(--x-tooltip-arrow-size, 5px) 0 var(--x-tooltip-arrow-size, 5px) var(--x-tooltip-arrow-size, 5px);border-left-color:var(--x-tooltip-color, var(--x-tooltip-bg, var(--x-color-bg-spotlight, rgba(0, 0, 0, 0.85))))}.x-tooltip-placement-leftBottom{right:100%;bottom:0;padding-right:var(--x-tooltip-offset, var(--x-spacing-xs, 8px))}.x-tooltip-placement-leftBottom .x-tooltip-arrow{right:var(--x-tooltip-arrow-offset-vertical, 3px);bottom:var(--x-tooltip-arrow-edge-offset, 8px);border-width:var(--x-tooltip-arrow-size, 5px) 0 var(--x-tooltip-arrow-size, 5px) var(--x-tooltip-arrow-size, 5px);border-left-color:var(--x-tooltip-color, var(--x-tooltip-bg, var(--x-color-bg-spotlight, rgba(0, 0, 0, 0.85))))}.x-tooltip-placement-right{left:100%;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);padding-left:var(--x-tooltip-offset, var(--x-spacing-xs, 8px))}.x-tooltip-placement-right .x-tooltip-arrow{left:var(--x-tooltip-arrow-offset-vertical, 3px);top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);border-width:var(--x-tooltip-arrow-size, 5px) var(--x-tooltip-arrow-size, 5px) var(--x-tooltip-arrow-size, 5px) 0;border-right-color:var(--x-tooltip-color, var(--x-tooltip-bg, var(--x-color-bg-spotlight, rgba(0, 0, 0, 0.85))))}.x-tooltip-placement-rightTop{left:100%;top:0;padding-left:var(--x-tooltip-offset, var(--x-spacing-xs, 8px))}.x-tooltip-placement-rightTop .x-tooltip-arrow{left:var(--x-tooltip-arrow-offset-vertical, 3px);top:var(--x-tooltip-arrow-edge-offset, 8px);border-width:var(--x-tooltip-arrow-size, 5px) var(--x-tooltip-arrow-size, 5px) var(--x-tooltip-arrow-size, 5px) 0;border-right-color:var(--x-tooltip-color, var(--x-tooltip-bg, var(--x-color-bg-spotlight, rgba(0, 0, 0, 0.85))))}.x-tooltip-placement-rightBottom{left:100%;bottom:0;padding-left:var(--x-tooltip-offset, var(--x-spacing-xs, 8px))}.x-tooltip-placement-rightBottom .x-tooltip-arrow{left:var(--x-tooltip-arrow-offset-vertical, 3px);bottom:var(--x-tooltip-arrow-edge-offset, 8px);border-width:var(--x-tooltip-arrow-size, 5px) var(--x-tooltip-arrow-size, 5px) var(--x-tooltip-arrow-size, 5px) 0;border-right-color:var(--x-tooltip-color, var(--x-tooltip-bg, var(--x-color-bg-spotlight, rgba(0, 0, 0, 0.85))))}`;
+
+const XTooltip = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.openChange = createEvent(this, "openChange", 7);
+    }
+    get el() { return getElement(this); }
+    // ==================== Props ====================
+    /**
+     * The text shown in the tooltip.
+     * Use `tooltipTitle` to avoid conflict with native `title` attribute.
+     * @example
+     * <x-tooltip tooltip-title="Info"></x-tooltip>
+     */
+    tooltipTitle;
+    /**
+     * The position of the tooltip relative to the target.
+     * @default 'top'
+     * @example
+     * <x-tooltip placement="bottom"></x-tooltip>
+     */
+    placement = 'top';
+    /**
+     * Tooltip trigger mode.
+     * @default 'hover'
+     * @example
+     * <x-tooltip trigger="click"></x-tooltip>
+     */
+    trigger = 'hover';
+    /**
+     * Background color of the tooltip.
+     * @example
+     * <x-tooltip color="#333"></x-tooltip>
+     */
+    color;
+    /**
+     * Whether the floating tooltip card is visible or not (controlled mode).
+     * @example
+     * <x-tooltip open></x-tooltip>
+     */
+    open;
+    /**
+     * Whether the floating tooltip card is visible by default.
+     * @example
+     * <x-tooltip defaultOpen></x-tooltip>
+     */
+    defaultOpen = false;
+    /**
+     * Whether to show arrow.
+     * Can be a boolean or an object with `pointAtCenter` option.
+     * @default true
+     * @example
+     * <x-tooltip arrow={false}></x-tooltip>
+     */
+    arrow = true;
+    /**
+     * Delay in seconds before tooltip is shown on mouse enter.
+     * @default 0.1
+     * @example
+     * <x-tooltip mouseEnterDelay={0.5}></x-tooltip>
+     */
+    mouseEnterDelay = 0.1;
+    /**
+     * Delay in seconds before tooltip is hidden on mouse leave.
+     * @default 0.1
+     * @example
+     * <x-tooltip mouseLeaveDelay={0.5}></x-tooltip>
+     */
+    mouseLeaveDelay = 0.1;
+    /**
+     * Whether to destroy tooltip on hide.
+     * @default false
+     * @example
+     * <x-tooltip destroyTooltipOnHide></x-tooltip>
+     */
+    destroyTooltipOnHide = false;
+    /**
+     * Whether to adjust popup placement automatically when popup is off screen.
+     * @default true
+     * @example
+     * <x-tooltip autoAdjustOverflow={false}></x-tooltip>
+     */
+    autoAdjustOverflow = true;
+    /**
+     * Z-index of the tooltip.
+     * @example
+     * <x-tooltip zIndex={2000}></x-tooltip>
+     */
+    zIndex = 9999;
+    /**
+     * Custom class names for tooltip parts.
+     * @example
+     * <x-tooltip classNames={{ root: 'my-tooltip' }}></x-tooltip>
+     */
+    classNames;
+    /**
+     * Custom styles for tooltip parts.
+     * @example
+     * <x-tooltip styles={{ root: { background: '#000' } }}></x-tooltip>
+     */
+    styles;
+    // ==================== Events ====================
+    /**
+     * Callback executed when visibility of the tooltip card is changed.
+     * @example
+     * <x-tooltip onOpenChange={(ev) => console.log(ev.detail)}></x-tooltip>
+     */
+    openChange;
+    // ==================== State ====================
+    /**
+     * Internal visibility state.
+     */
+    visible = false;
+    // ==================== Private ====================
+    /**
+     * Portal instance for tooltip content.
+     */
+    portalInstance = null;
+    /**
+     * Timeout for delayed show.
+     */
+    showTimeout;
+    /**
+     * Timeout for delayed hide.
+     */
+    hideTimeout;
+    // ==================== Computed ====================
+    get isOpen() {
+        return this.open ?? this.visible;
+    }
+    // ==================== Lifecycle ====================
+    componentWillLoad() {
+        this.visible = this.open ?? this.defaultOpen ?? false;
+    }
+    componentDidLoad() {
+        this.addEventListeners();
+    }
+    componentDidRender() {
+        this.updatePortal();
+    }
+    disconnectedCallback() {
+        this.clearTimeouts();
+        this.removeEventListeners();
+        this.destroyPortal();
+    }
+    // ==================== Watchers ====================
+    handleOpenChange(newValue) {
+        if (newValue !== undefined) {
+            this.setVisible(newValue);
+        }
+    }
+    // ==================== Methods ====================
+    /**
+     * Show the tooltip programmatically.
+     * @returns Promise<void>
+     * @example
+     * await el.show()
+     */
+    async show() {
+        this.setVisible(true);
+    }
+    /**
+     * Hide the tooltip programmatically.
+     * @returns Promise<void>
+     * @example
+     * await el.hide()
+     */
+    async hide() {
+        this.setVisible(false);
+    }
+    // ==================== Private Methods ====================
+    /**
+     * Clear pending show/hide timeouts.
+     * @returns void
+     */
+    clearTimeouts() {
+        if (this.showTimeout) {
+            clearTimeout(this.showTimeout);
+            this.showTimeout = undefined;
+        }
+        if (this.hideTimeout) {
+            clearTimeout(this.hideTimeout);
+            this.hideTimeout = undefined;
+        }
+    }
+    /**
+     * Update internal visibility and emit openChange.
+     * @param visible - New visibility state.
+     * @returns void
+     */
+    setVisible(visible) {
+        if (this.visible === visible)
+            return;
+        this.visible = visible;
+        this.openChange.emit({ open: visible });
+    }
+    /**
+     * Delay showing tooltip based on mouseEnterDelay.
+     * @returns void
+     */
+    delayShow = () => {
+        this.clearTimeouts();
+        const delay = (this.mouseEnterDelay ?? 0.1) * 1000;
+        this.showTimeout = setTimeout(() => {
+            if (this.open === undefined) {
+                this.setVisible(true);
+            }
+        }, delay);
+    };
+    /**
+     * Delay hiding tooltip based on mouseLeaveDelay.
+     * @returns void
+     */
+    delayHide = () => {
+        this.clearTimeouts();
+        const delay = (this.mouseLeaveDelay ?? 0.1) * 1000;
+        this.hideTimeout = setTimeout(() => {
+            if (this.open === undefined) {
+                this.setVisible(false);
+            }
+        }, delay);
+    };
+    /**
+     * Handle trigger mouse enter for hover mode.
+     * @returns void
+     */
+    handleMouseEnter = () => {
+        if (this.trigger === 'hover') {
+            this.delayShow();
+        }
+    };
+    /**
+     * Handle trigger mouse leave for hover mode.
+     * @returns void
+     */
+    handleMouseLeave = () => {
+        if (this.trigger === 'hover') {
+            this.delayHide();
+        }
+    };
+    /**
+     * Handle focus for focus trigger mode.
+     * @returns void
+     */
+    handleFocus = () => {
+        if (this.trigger === 'focus') {
+            this.delayShow();
+        }
+    };
+    /**
+     * Handle blur for focus trigger mode.
+     * @returns void
+     */
+    handleBlur = () => {
+        if (this.trigger === 'focus') {
+            this.delayHide();
+        }
+    };
+    /**
+     * Handle click for click trigger mode.
+     * @returns void
+     */
+    handleClick = () => {
+        if (this.trigger === 'click') {
+            if (this.open === undefined) {
+                this.setVisible(!this.visible);
+            }
+        }
+    };
+    /**
+     * Handle context menu trigger mode.
+     * @param e - Mouse event.
+     * @returns void
+     */
+    handleContextMenu = (e) => {
+        if (this.trigger === 'contextMenu') {
+            e.preventDefault();
+            if (this.open === undefined) {
+                this.setVisible(!this.visible);
+            }
+        }
+    };
+    /**
+     * Close tooltip when clicking outside.
+     * @param e - Mouse event.
+     * @returns void
+     */
+    handleDocumentClick = (e) => {
+        if (this.trigger === 'click' || this.trigger === 'contextMenu') {
+            const target = e.target;
+            // Check if click is inside component
+            if (this.el.contains(target))
+                return;
+            // Check if click is inside portal
+            const portalEl = this.portalInstance?.getElement?.();
+            if (portalEl?.contains(target))
+                return;
+            if (this.open === undefined) {
+                this.setVisible(false);
+            }
+        }
+    };
+    /**
+     * Handle hover inside portal to prevent hide.
+     * @returns void
+     */
+    handlePortalMouseEnter = () => {
+        if (this.trigger === 'hover') {
+            this.clearTimeouts();
+        }
+    };
+    /**
+     * Handle mouse leave from portal for hover trigger.
+     * @returns void
+     */
+    handlePortalMouseLeave = () => {
+        if (this.trigger === 'hover') {
+            this.delayHide();
+        }
+    };
+    /**
+     * Add global event listeners.
+     * @returns void
+     */
+    addEventListeners() {
+        document.addEventListener('click', this.handleDocumentClick);
+    }
+    /**
+     * Remove global event listeners.
+     * @returns void
+     */
+    removeEventListeners() {
+        document.removeEventListener('click', this.handleDocumentClick);
+    }
+    /**
+     * Determine whether to render arrow.
+     * @returns boolean
+     */
+    shouldShowArrow() {
+        if (typeof this.arrow === 'boolean') {
+            return this.arrow;
+        }
+        return this.arrow !== undefined;
+    }
+    /**
+     * Get trigger element inside shadow root.
+     * @returns HTMLElement | undefined
+     */
+    getTriggerEl() {
+        return this.el.shadowRoot
+            ? this.el.shadowRoot.querySelector('.x-tooltip-trigger')
+            : this.el.querySelector('.x-tooltip-trigger');
+    }
+    // ==================== Portal Methods ====================
+    /**
+     * Calculate arrow position based on trigger element and placement
+     * @returns { arrowX: number; arrowY: number }
+     */
+    calculateArrowPosition() {
+        const triggerEl = this.getTriggerEl();
+        if (!triggerEl) {
+            return { arrowX: 0, arrowY: 0 };
+        }
+        const triggerRect = triggerEl.getBoundingClientRect();
+        const triggerWidth = triggerRect.width;
+        const triggerHeight = triggerRect.height;
+        let arrowX = 0;
+        let arrowY = 0;
+        // Calculate arrow position based on placement
+        // We want the arrow to point at the center of the trigger
+        switch (this.placement) {
+            // Top placements - arrow points down, X is relative to trigger center
+            case 'top':
+                arrowX = triggerWidth / 2;
+                arrowY = 0;
+                break;
+            case 'topLeft':
+                arrowX = Math.min(20, triggerWidth / 2);
+                arrowY = 0;
+                break;
+            case 'topRight':
+                arrowX = triggerWidth - Math.min(20, triggerWidth / 2);
+                arrowY = 0;
+                break;
+            // Bottom placements - arrow points up, X is relative to trigger center
+            case 'bottom':
+                arrowX = triggerWidth / 2;
+                arrowY = 0;
+                break;
+            case 'bottomLeft':
+                arrowX = Math.min(20, triggerWidth / 2);
+                arrowY = 0;
+                break;
+            case 'bottomRight':
+                arrowX = triggerWidth - Math.min(20, triggerWidth / 2);
+                arrowY = 0;
+                break;
+            // Left placements - arrow points right, Y is relative to trigger center
+            case 'left':
+                arrowX = 0;
+                arrowY = triggerHeight / 2;
+                break;
+            case 'leftTop':
+                arrowX = 0;
+                arrowY = Math.min(16, triggerHeight / 2);
+                break;
+            case 'leftBottom':
+                arrowX = 0;
+                arrowY = triggerHeight - Math.min(16, triggerHeight / 2);
+                break;
+            // Right placements - arrow points left, Y is relative to trigger center
+            case 'right':
+                arrowX = 0;
+                arrowY = triggerHeight / 2;
+                break;
+            case 'rightTop':
+                arrowX = 0;
+                arrowY = Math.min(16, triggerHeight / 2);
+                break;
+            case 'rightBottom':
+                arrowX = 0;
+                arrowY = triggerHeight - Math.min(16, triggerHeight / 2);
+                break;
+        }
+        return { arrowX, arrowY };
+    }
+    /**
+     * Build tooltip content element for portal.
+     * @returns HTMLElement
+     */
+    buildTooltipElement() {
+        // Create x-tooltip-content component
+        const tooltipEl = document.createElement('x-tooltip-content');
+        // Set properties
+        tooltipEl.tooltipTitle = this.tooltipTitle || '';
+        tooltipEl.placement = this.placement;
+        tooltipEl.showArrow = this.shouldShowArrow();
+        if (this.color) {
+            tooltipEl.color = this.color;
+        }
+        if (this.classNames?.root) {
+            tooltipEl.contentClass = this.classNames.root;
+        }
+        // Calculate and set arrow position CSS variables
+        const { arrowX, arrowY } = this.calculateArrowPosition();
+        tooltipEl.style.setProperty('--arrow-x', `${arrowX}px`);
+        tooltipEl.style.setProperty('--arrow-y', `${arrowY}px`);
+        // Add event listeners for hover on portal
+        tooltipEl.addEventListener('mouseenter', this.handlePortalMouseEnter);
+        tooltipEl.addEventListener('mouseleave', this.handlePortalMouseLeave);
+        return tooltipEl;
+    }
+    /**
+     * Create or update portal content for tooltip.
+     * @returns void
+     */
+    updatePortal() {
+        const hasTitle = !!this.tooltipTitle;
+        if (!this.isOpen || !hasTitle) {
+            if (this.portalInstance) {
+                this.portalInstance.destroy();
+                this.portalInstance = null;
+            }
+            return;
+        }
+        const tooltipElement = this.buildTooltipElement();
+        if (!this.portalInstance) {
+            this.portalInstance = PortalController.create({
+                open: this.isOpen,
+                target: this.getTriggerEl(),
+                placement: this.placement,
+                zIndex: this.zIndex || 9999,
+                offset: 8, // arrow size (5px) + gap (3px)
+                content: tooltipElement,
+                flip: false,
+                shift: this.autoAdjustOverflow !== false,
+            });
+        }
+        else {
+            this.portalInstance.update({
+                open: this.isOpen,
+                target: this.getTriggerEl(),
+                placement: this.placement,
+                offset: 8,
+                content: tooltipElement,
+                flip: false,
+                shift: this.autoAdjustOverflow !== false,
+            });
+        }
+    }
+    /**
+     * Destroy portal instance if present.
+     * @returns void
+     */
+    destroyPortal() {
+        if (this.portalInstance) {
+            this.portalInstance.destroy();
+            this.portalInstance = null;
+        }
+    }
+    // ==================== Render ====================
+    /**
+     * Renders the Tooltip component.
+     *
+     * Flow:
+     * 1. Constructs host classes based on visibility and color.
+     * 2. Attaches event listeners for all trigger modes (hover, focus, click, contextMenu).
+     * 3. Renders a trigger wrapper `span` that wraps the default slot.
+     * 4. The actual tooltip content is rendered via a Portal (managed by `updatePortal`) to escape container clipping.
+     *
+     * @returns JSX.Element
+     */
+    render() {
+        return (h(Host, { key: '7f714f3aef2633cd18aac1fe03be7c840f01aa81', class: {
+                'x-tooltip-wrapper': true,
+                'x-tooltip-open': this.isOpen,
+                'x-tooltip-color': this.color ? true : false,
+            }, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onFocus: this.handleFocus, onBlur: this.handleBlur, onClick: this.handleClick, onContextMenu: this.handleContextMenu }, h("span", { key: 'ae94a1ccfc97a0ba7bddb87394e7cbe0e4a4ff2a', class: "x-tooltip-trigger" }, h("slot", { key: '1f2ca22b7b432abe47e12d69e3ea94efe4c06c08' }))));
+    }
+    static get watchers() { return {
+        "open": [{
+                "handleOpenChange": 0
+            }]
+    }; }
+};
+XTooltip.style = xTooltipCss();
+
+const xTooltipContentCss = () => `.x-tooltip-content{position:relative;display:block;font-family:var(--x-tooltip-font-family, var(--x-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif));font-size:var(--x-tooltip-font-size, var(--x-font-size-sm, 14px));line-height:var(--x-tooltip-line-height, var(--x-line-height, 1.5714));word-wrap:break-word;white-space:normal;max-width:var(--x-tooltip-max-width, 250px);pointer-events:auto;-webkit-animation:x-tooltip-fade-in var(--x-tooltip-motion-duration, 0.2s) ease-out;animation:x-tooltip-fade-in var(--x-tooltip-motion-duration, 0.2s) ease-out}@-webkit-keyframes x-tooltip-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-tooltip-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-tooltip-content-inner{min-width:var(--x-tooltip-min-width, 30px);min-height:var(--x-tooltip-min-height, 32px);padding:var(--x-tooltip-padding-block, 6px) var(--x-tooltip-padding-inline, 8px)}.x-tooltip-content-inner:not(.x-tooltip-content-color){color:var(--x-tooltip-color, #ffffff)}.x-tooltip-content-inner.x-tooltip-content-color{color:white}.x-tooltip-content-inner{text-align:left;text-decoration:none;word-wrap:break-word;background-color:var(--x-tooltip-color, var(--x-tooltip-bg, rgba(0, 0, 0, 0.85)));border-radius:var(--x-tooltip-border-radius, 6px);-webkit-box-shadow:var(--x-tooltip-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-tooltip-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));-webkit-box-sizing:border-box;box-sizing:border-box}.x-tooltip-content-arrow{position:absolute;width:0;height:0;border-style:solid;border-color:transparent;pointer-events:none}[class*=x-tooltip-content-placement-top]{-webkit-transform-origin:bottom center;transform-origin:bottom center}[class*=x-tooltip-content-placement-bottom]{-webkit-transform-origin:top center;transform-origin:top center}[class*=x-tooltip-content-placement-left]{-webkit-transform-origin:right center;transform-origin:right center}[class*=x-tooltip-content-placement-right]{-webkit-transform-origin:left center;transform-origin:left center}.x-tooltip-content-placement-top{padding-bottom:var(--x-tooltip-arrow-size, 8px)}.x-tooltip-content-placement-top .x-tooltip-content-arrow{bottom:0;left:var(--arrow-x, 50%);-webkit-transform:translateX(-50%);transform:translateX(-50%);border-width:var(--x-tooltip-arrow-size, 8px) var(--x-tooltip-arrow-size, 8px) 0;border-top-color:var(--x-tooltip-color, var(--x-tooltip-bg, rgba(0, 0, 0, 0.85)))}.x-tooltip-content-placement-topLeft{padding-bottom:var(--x-tooltip-arrow-size, 8px)}.x-tooltip-content-placement-topLeft .x-tooltip-content-arrow{bottom:0;left:var(--arrow-x, 16px);-webkit-transform:translateX(-50%);transform:translateX(-50%);border-width:var(--x-tooltip-arrow-size, 8px) var(--x-tooltip-arrow-size, 8px) 0;border-top-color:var(--x-tooltip-color, var(--x-tooltip-bg, rgba(0, 0, 0, 0.85)))}.x-tooltip-content-placement-topRight{padding-bottom:var(--x-tooltip-arrow-size, 8px)}.x-tooltip-content-placement-topRight .x-tooltip-content-arrow{bottom:0;right:var(--arrow-x, 16px);-webkit-transform:translateX(50%);transform:translateX(50%);border-width:var(--x-tooltip-arrow-size, 8px) var(--x-tooltip-arrow-size, 8px) 0;border-top-color:var(--x-tooltip-color, var(--x-tooltip-bg, rgba(0, 0, 0, 0.85)))}.x-tooltip-content-placement-bottom{padding-top:var(--x-tooltip-arrow-size, 8px)}.x-tooltip-content-placement-bottom .x-tooltip-content-arrow{top:0;left:var(--arrow-x, 50%);-webkit-transform:translateX(-50%);transform:translateX(-50%);border-width:0 var(--x-tooltip-arrow-size, 8px) var(--x-tooltip-arrow-size, 8px);border-bottom-color:var(--x-tooltip-color, var(--x-tooltip-bg, rgba(0, 0, 0, 0.85)))}.x-tooltip-content-placement-bottomLeft{padding-top:var(--x-tooltip-arrow-size, 8px)}.x-tooltip-content-placement-bottomLeft .x-tooltip-content-arrow{top:0;left:var(--arrow-x, 16px);-webkit-transform:translateX(-50%);transform:translateX(-50%);border-width:0 var(--x-tooltip-arrow-size, 8px) var(--x-tooltip-arrow-size, 8px);border-bottom-color:var(--x-tooltip-color, var(--x-tooltip-bg, rgba(0, 0, 0, 0.85)))}.x-tooltip-content-placement-bottomRight{padding-top:var(--x-tooltip-arrow-size, 8px)}.x-tooltip-content-placement-bottomRight .x-tooltip-content-arrow{top:0;right:var(--arrow-x, 16px);-webkit-transform:translateX(50%);transform:translateX(50%);border-width:0 var(--x-tooltip-arrow-size, 8px) var(--x-tooltip-arrow-size, 8px);border-bottom-color:var(--x-tooltip-color, var(--x-tooltip-bg, rgba(0, 0, 0, 0.85)))}.x-tooltip-content-placement-left{padding-right:var(--x-tooltip-arrow-size, 8px)}.x-tooltip-content-placement-left .x-tooltip-content-arrow{right:0;top:var(--arrow-y, 50%);-webkit-transform:translateY(-50%);transform:translateY(-50%);border-width:var(--x-tooltip-arrow-size, 8px) 0 var(--x-tooltip-arrow-size, 8px) var(--x-tooltip-arrow-size, 8px);border-left-color:var(--x-tooltip-color, var(--x-tooltip-bg, rgba(0, 0, 0, 0.85)))}.x-tooltip-content-placement-leftTop{padding-right:var(--x-tooltip-arrow-size, 8px)}.x-tooltip-content-placement-leftTop .x-tooltip-content-arrow{right:0;top:var(--arrow-y, 12px);-webkit-transform:translateY(-50%);transform:translateY(-50%);border-width:var(--x-tooltip-arrow-size, 8px) 0 var(--x-tooltip-arrow-size, 8px) var(--x-tooltip-arrow-size, 8px);border-left-color:var(--x-tooltip-color, var(--x-tooltip-bg, rgba(0, 0, 0, 0.85)))}.x-tooltip-content-placement-leftBottom{padding-right:var(--x-tooltip-arrow-size, 8px)}.x-tooltip-content-placement-leftBottom .x-tooltip-content-arrow{right:0;bottom:var(--arrow-y, 12px);-webkit-transform:translateY(50%);transform:translateY(50%);border-width:var(--x-tooltip-arrow-size, 8px) 0 var(--x-tooltip-arrow-size, 8px) var(--x-tooltip-arrow-size, 8px);border-left-color:var(--x-tooltip-color, var(--x-tooltip-bg, rgba(0, 0, 0, 0.85)))}.x-tooltip-content-placement-right{padding-left:var(--x-tooltip-arrow-size, 8px)}.x-tooltip-content-placement-right .x-tooltip-content-arrow{left:0;top:var(--arrow-y, 50%);-webkit-transform:translateY(-50%);transform:translateY(-50%);border-width:var(--x-tooltip-arrow-size, 8px) var(--x-tooltip-arrow-size, 8px) var(--x-tooltip-arrow-size, 8px) 0;border-right-color:var(--x-tooltip-color, var(--x-tooltip-bg, rgba(0, 0, 0, 0.85)))}.x-tooltip-content-placement-rightTop{padding-left:var(--x-tooltip-arrow-size, 8px)}.x-tooltip-content-placement-rightTop .x-tooltip-content-arrow{left:0;top:var(--arrow-y, 12px);-webkit-transform:translateY(-50%);transform:translateY(-50%);border-width:var(--x-tooltip-arrow-size, 8px) var(--x-tooltip-arrow-size, 8px) var(--x-tooltip-arrow-size, 8px) 0;border-right-color:var(--x-tooltip-color, var(--x-tooltip-bg, rgba(0, 0, 0, 0.85)))}.x-tooltip-content-placement-rightBottom{padding-left:var(--x-tooltip-arrow-size, 8px)}.x-tooltip-content-placement-rightBottom .x-tooltip-content-arrow{left:0;bottom:var(--arrow-y, 12px);-webkit-transform:translateY(50%);transform:translateY(50%);border-width:var(--x-tooltip-arrow-size, 8px) var(--x-tooltip-arrow-size, 8px) var(--x-tooltip-arrow-size, 8px) 0;border-right-color:var(--x-tooltip-color, var(--x-tooltip-bg, rgba(0, 0, 0, 0.85)))}.x-tooltip-content-hidden{display:none;pointer-events:none}`;
+
+const XTooltipContent = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    get el() { return getElement(this); }
+    // ==================== Props ====================
+    /**
+     * Tooltip title/content text.
+     * @example
+     * <x-tooltip-content tooltipTitle="Info"></x-tooltip-content>
+     */
+    tooltipTitle;
+    /**
+     * Placement of the tooltip.
+     * @example
+     * <x-tooltip-content placement="bottom"></x-tooltip-content>
+     */
+    placement = 'top';
+    /**
+     * Whether to show arrow.
+     * @example
+     * <x-tooltip-content showArrow={false}></x-tooltip-content>
+     */
+    showArrow = true;
+    /**
+     * Custom background color.
+     * @example
+     * <x-tooltip-content color="#333"></x-tooltip-content>
+     */
+    color;
+    /**
+     * Custom class for the content.
+     * @example
+     * <x-tooltip-content contentClass="my-tooltip"></x-tooltip-content>
+     */
+    contentClass;
+    /**
+     * Whether the tooltip is hidden.
+     * @example
+     * <x-tooltip-content hidden></x-tooltip-content>
+     */
+    hidden = false;
+    // ==================== Render ====================
+    /**
+     * Render tooltip content, arrow, and slot.
+     * @returns JSX.Element
+     * @example
+     * <x-tooltip-content tooltipTitle="Tip"></x-tooltip-content>
+     */
+    render() {
+        // Build class map based on placement and visibility.
+        const classes = {
+            'x-tooltip-content': true,
+            [`x-tooltip-content-placement-${this.placement}`]: true,
+            'x-tooltip-content-hidden': this.hidden,
+            [this.contentClass || '']: !!this.contentClass,
+        };
+        // Apply CSS variable for custom color.
+        const style = {};
+        if (this.color) {
+            style['--x-tooltip-color'] = this.color;
+        }
+        return (h(Host, { key: 'a583a96aef26105e6b21504201ffda958a46103c', class: classes, style: style, role: "tooltip" }, h("div", { key: '9cf9e614628b794ff569e26d679507c437395548', class: {
+                'x-tooltip-content-inner': true,
+                'x-tooltip-content-color': this.color ? true : false,
+                [this.contentClass || '']: !!this.contentClass,
+            } }, this.tooltipTitle, h("slot", { key: '799907798ddfca9bf4ccdee5850301af616f8127' })), this.showArrow && (h("div", { key: '0a9215b4cbb5f583188851171cb3a50bd26683a2', class: "x-tooltip-content-arrow" }))));
+    }
+};
+XTooltipContent.style = xTooltipContentCss();
+
+export { XColorPicker as x_color_picker, XDivider as x_divider, XFormItem as x_form_item, XInputNumber as x_input_number, XModal as x_modal, XSlider as x_slider, XSwitch as x_switch, XTooltip as x_tooltip, XTooltipContent as x_tooltip_content };