@xlabs-store/core 0.0.1

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

@@ -0,0 +1,3227 @@
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-ig_mFsVk.js';
+import { g as getIcon } from './config-BPeosvTA.js';
+import { A as AbstractControl } from './abstract-control-XBF88YT_.js';
+
+const xAlertCss = () => `@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:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;padding:var(--x-alert-spacing-sm, var(--x-spacing-sm, 8px)) var(--x-alert-spacing-lg, var(--x-spacing-lg, 16px));word-wrap:break-word;border-radius:var(--x-alert-border-radius-sm, var(--x-border-radius-sm, 4px));position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;margin-bottom:var(--x-alert-spacing-lg, var(--x-spacing-lg, 16px));color:var(--x-alert-color-text, var(--x-color-text, rgba(0, 0, 0, 0.88)));font-size:var(--x-alert-font-size, var(--x-font-size-base, 14px));font-family:var(--x-alert-font-family, var(--x-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif));line-height:var(--x-alert-line-height, var(--x-line-height-base, 1.5714));list-style:none;-webkit-font-feature-settings:"tnum";font-feature-settings:"tnum";background-color:var(--x-alert-color-bg-layout, var(--x-color-bg-layout, #f5f5f5));border:var(--x-alert-border-width, var(--x-border-width-base, 1px)) solid transparent}.x-alert-content{-ms-flex:1;flex:1;min-width:0}.x-alert-icon{margin-right:var(--x-alert-spacing-xs, var(--x-spacing-xs, 8px));font-size:var(--x-alert-font-size, var(--x-font-size-base, 14px));height:var(--x-alert-font-size, var(--x-font-size-base, 14px));line-height:var(--x-alert-font-size, var(--x-font-size-base, 14px));display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center}.x-alert-description{font-size:var(--x-alert-font-size, var(--x-font-size-base, 14px));line-height:22px;display:none}:host(.x-alert-success){background-color:var(--x-alert-color-success-bg, var(--x-color-success-bg, #f6ffed));border-color:var(--x-alert-color-success-border, var(--x-color-success-border, #b7eb8f))}:host(.x-alert-success) .x-alert-icon{color:var(--x-alert-color-success, var(--x-color-success, #52c41a))}:host(.x-alert-info){background-color:var(--x-alert-color-info-bg, var(--x-color-info-bg, #e6f4ff));border-color:var(--x-alert-color-info-border, var(--x-color-info-border, #91caff))}:host(.x-alert-info) .x-alert-icon{color:var(--x-alert-color-primary, var(--x-color-primary, #1677ff))}:host(.x-alert-warning){background-color:var(--x-alert-color-warning-bg, var(--x-color-warning-bg, #fffbe6));border-color:var(--x-alert-color-warning-border, var(--x-color-warning-border, #ffe58f))}:host(.x-alert-warning) .x-alert-icon{color:var(--x-alert-color-warning, var(--x-color-warning, #faad14))}:host(.x-alert-error){background-color:var(--x-alert-color-error-bg, var(--x-color-error-bg, #fff2f0));border-color:var(--x-alert-color-error-border, var(--x-color-error-border, #ffccc7))}:host(.x-alert-error) .x-alert-icon{color:var(--x-alert-color-error, var(--x-color-error, #ff4d4f))}.x-alert-close-icon{margin-left:var(--x-alert-spacing-xs, var(--x-spacing-xs, 8px));padding:0;overflow:hidden;font-size:var(--x-alert-font-size-sm, var(--x-font-size-sm, 12px));line-height:var(--x-alert-font-size-sm, var(--x-font-size-sm, 12px));background-color:transparent;border:none;outline:none;cursor:pointer;color:var(--x-alert-color-text-tertiary, var(--x-color-text-tertiary, rgba(0, 0, 0, 0.45)));-webkit-transition:color var(--x-alert-motion-duration-mid, var(--x-motion-duration-mid, 0.2s));transition:color var(--x-alert-motion-duration-mid, var(--x-motion-duration-mid, 0.2s));display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}.x-alert-close-icon:hover{color:var(--x-alert-color-text-secondary, var(--x-color-text-secondary, rgba(0, 0, 0, 0.65)))}:host(.x-alert-with-description){-ms-flex-align:start;align-items:flex-start;padding:var(--x-alert-spacing-lg, var(--x-spacing-lg, 16px)) var(--x-alert-spacing-xl, var(--x-spacing-xl, 24px))}:host(.x-alert-with-description) .x-alert-icon{margin-right:var(--x-alert-spacing-md, var(--x-spacing-md, 16px));font-size:var(--x-alert-font-size-xxl, var(--x-font-size-xxl, 24px));height:var(--x-alert-font-size-xxl, var(--x-font-size-xxl, 24px));line-height:var(--x-alert-font-size-xxl, var(--x-font-size-xxl, 24px));margin-top:2px;}:host(.x-alert-with-description) .x-alert-message{display:block;margin-bottom:var(--x-alert-spacing-xxs, var(--x-spacing-xxs, 4px));color:var(--x-alert-color-text, var(--x-color-text, rgba(0, 0, 0, 0.88)));font-size:var(--x-alert-font-size-lg, var(--x-font-size-lg, 16px));font-weight:500;}:host(.x-alert-with-description) .x-alert-description{display:block;color:var(--x-alert-color-text, var(--x-color-text, rgba(0, 0, 0, 0.88)))}:host(.x-alert-with-description) .x-alert-close-icon{margin-top:4px;}:host(.x-alert-banner){margin-bottom:0;border:0;border-radius:0}`;
+
+const XAlert = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.xClose = createEvent(this, "xClose", 7);
+    }
+    /**
+     * Content of Alert.
+     * @example
+     * <x-alert message="Info"></x-alert>
+     */
+    message;
+    /**
+     * Additional content of Alert.
+     * @example
+     * <x-alert description="Details"></x-alert>
+     */
+    description;
+    /**
+     * Type of Alert style, options: success, info, warning, error.
+     * @example
+     * <x-alert type="success" message="Saved"></x-alert>
+     */
+    type = 'info';
+    /**
+     * Whether Alert can be closed.
+     * @example
+     * <x-alert closable message="Closable"></x-alert>
+     */
+    closable = false;
+    /**
+     * Whether to show icon.
+     * @example
+     * <x-alert showIcon message="With icon"></x-alert>
+     */
+    showIcon = false;
+    /**
+     * Whether to show as banner.
+     * @example
+     * <x-alert banner message="Banner"></x-alert>
+     */
+    banner = false;
+    /**
+     * Internal closed state for dismissible alerts.
+     */
+    closed = false;
+    /**
+     * Emits when the alert is closed.
+     * @example
+     * <x-alert onXClose={() => console.log('closed')}></x-alert>
+     */
+    xClose;
+    /**
+     * Handle close action and emit close event.
+     * @param e - Mouse click event from close button.
+     * @returns void
+     * @example
+     * <x-alert closable onXClose={() => {}}></x-alert>
+     */
+    handleClose(e) {
+        e.preventDefault();
+        this.closed = true;
+        this.xClose.emit();
+    }
+    /**
+     * Render alert content, icon, and close button.
+     *
+     * Flow:
+     * 1. Checks if `closed` state is true; if so, returns null to remove from DOM.
+     * 2. Determines if description is present to adjust styling.
+     * 3. Constructs host classes based on type, icon presence, banner mode, and closability.
+     * 4. Renders the status icon if `showIcon` is true.
+     *    - Selects the appropriate SVG based on `type` (success, info, warning, error).
+     * 5. Renders the message and description content.
+     * 6. Renders the close button if `closable` is true.
+     *
+     * @returns JSX.Element | null
+     * @example
+     * <x-alert type="warning" message="Warning"></x-alert>
+     */
+    render() {
+        // Hide alert entirely after it is closed.
+        if (this.closed)
+            return null;
+        const isDescription = !!this.description;
+        return (h(Host, { class: {
+                'x-alert': true,
+                [`x-alert-${this.type}`]: true,
+                'x-alert-with-description': isDescription,
+                'x-alert-no-icon': !this.showIcon,
+                'x-alert-banner': this.banner,
+                'x-alert-closable': this.closable,
+            }, role: "alert" }, this.showIcon && (h("span", { class: "x-alert-icon" }, this.type === 'success' && (h("span", { role: "img", "aria-label": "check-circle", class: "anticon anticon-check-circle" }, h("svg", { viewBox: "64 64 896 896", focusable: "false", "data-icon": "check-circle", width: "1em", height: "1em", fill: "currentColor", "aria-hidden": "true" }, h("path", { 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.type === 'info' && (h("span", { role: "img", "aria-label": "info-circle", class: "anticon anticon-info-circle" }, h("svg", { viewBox: "64 64 896 896", focusable: "false", "data-icon": "info-circle", width: "1em", height: "1em", fill: "currentColor", "aria-hidden": "true" }, h("path", { d: "M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm32 664c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V456c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v172zm-32-309.3c-28.7 0-52-23.3-52-52s23.3-52 52-52 52 23.3 52 52-23.3 52-52 52z" })))), this.type === 'warning' && (h("span", { role: "img", "aria-label": "exclamation-circle", class: "anticon anticon-exclamation-circle" }, h("svg", { viewBox: "64 64 896 896", focusable: "false", "data-icon": "exclamation-circle", width: "1em", height: "1em", fill: "currentColor", "aria-hidden": "true" }, h("path", { 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.type === 'error' && (h("span", { role: "img", "aria-label": "close-circle", class: "anticon anticon-close-circle" }, h("svg", { viewBox: "64 64 896 896", focusable: "false", "data-icon": "close-circle", width: "1em", height: "1em", fill: "currentColor", "aria-hidden": "true" }, h("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" })))))), h("div", { class: "x-alert-content" }, this.message && h("div", { class: "x-alert-message" }, this.message), this.description && h("div", { class: "x-alert-description" }, this.description)), this.closable && (h("button", { type: "button", class: "x-alert-close-icon", onClick: (e) => this.handleClose(e) }, h("x-icon", { name: getIcon('close') })))));
+    }
+};
+XAlert.style = xAlertCss();
+
+const xBadgeCss = () => `@charset "UTF-8";:host{-webkit-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0;color:var(--x-badge-color, var(--x-color-text, rgba(0, 0, 0, 0.88)));font-size:var(--x-badge-font-size, var(--x-font-size-base, 14px));font-variant:tabular-nums;line-height:var(--x-badge-line-height, var(--x-line-height-base, 1.5714285714));list-style:none;-webkit-font-feature-settings:"tnum";font-feature-settings:"tnum";position:relative;display:inline-block;line-height:var(--x-badge-line-height-tight, 1);vertical-align:middle}:host(.x-badge-not-a-wrapper){vertical-align:middle}:host(.x-badge-not-a-wrapper) .x-badge-count,:host(.x-badge-not-a-wrapper) .x-badge-dot{-webkit-transform:none;transform:none;position:relative;top:auto;inset-inline-end:auto;display:block}.x-badge-count{z-index:auto;min-width:var(--x-badge-count-min-width, 20px);height:var(--x-badge-count-height, 20px);padding:0 var(--x-badge-count-padding, var(--x-padding-xxs, 6px));color:var(--x-badge-count-color, var(--x-color-white, #fff));font-weight:normal;font-size:var(--x-badge-count-font-size, var(--x-font-size-sm, 12px));line-height:var(--x-badge-count-height, 20px);white-space:nowrap;text-align:center;background:var(--x-badge-count-bg, var(--x-color-error, #ff4d4f));border-radius:var(--x-badge-count-border-radius, 10px);-webkit-box-shadow:0 0 0 1px var(--x-badge-shadow-color, var(--x-color-white, #fff));box-shadow:0 0 0 1px var(--x-badge-shadow-color, var(--x-color-white, #fff));-webkit-transition:background var(--x-badge-motion-duration, 0.1s);transition:background var(--x-badge-motion-duration, 0.1s);position:absolute;top:0;inset-inline-end:0;-webkit-transform:translate(50%, -50%);transform:translate(50%, -50%);-webkit-transform-origin:100% 0%;transform-origin:100% 0%}.x-badge-count-sm{min-width:var(--x-badge-count-min-width-sm, 14px);height:var(--x-badge-count-height-sm, 14px);padding:0 var(--x-badge-count-padding-sm, var(--x-padding-xxs, 4px));font-size:var(--x-badge-count-font-size-sm, var(--x-font-size-sm, 12px));line-height:var(--x-badge-count-height-sm, 14px);border-radius:var(--x-badge-count-border-radius-sm, 7px)}.x-badge-multiple-words{padding:0 var(--x-badge-count-padding, var(--x-padding-xxs, 6px))}.x-badge-dot{z-index:auto;width:var(--x-badge-dot-size, 6px);height:var(--x-badge-dot-size, 6px);background:var(--x-badge-dot-bg, var(--x-color-error, #ff4d4f));border-radius:100%;-webkit-box-shadow:0 0 0 1px var(--x-badge-shadow-color, var(--x-color-white, #fff));box-shadow:0 0 0 1px var(--x-badge-shadow-color, var(--x-color-white, #fff));position:absolute;top:0;inset-inline-end:0;-webkit-transform:translate(50%, -50%);transform:translate(50%, -50%);-webkit-transform-origin:100% 0%;transform-origin:100% 0%}:host(.x-badge-status){line-height:inherit;vertical-align:baseline;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center}.x-badge-status-dot{position:relative;top:var(--x-badge-status-dot-top, -1px);display:inline-block;width:var(--x-badge-dot-size, 6px);height:var(--x-badge-dot-size, 6px);vertical-align:middle;border-radius:50%}.x-badge-status-success{background-color:var(--x-badge-status-success-bg, var(--x-color-success, #52c41a))}.x-badge-status-processing{position:relative;background-color:var(--x-badge-status-processing-bg, var(--x-color-primary, #1677ff))}.x-badge-status-processing::after{position:absolute;top:0;inset-inline-start:0;width:100%;height:100%;border:1px solid var(--x-badge-status-processing-bg, var(--x-color-primary, #1677ff));border-radius:50%;-webkit-animation:x-badge-status-processing 1.2s infinite ease-in-out;animation:x-badge-status-processing 1.2s infinite ease-in-out;content:""}.x-badge-status-default{background-color:var(--x-badge-status-default-bg, var(--x-color-text-placeholder, #d9d9d9))}.x-badge-status-error{background-color:var(--x-badge-status-error-bg, var(--x-color-error, #ff4d4f))}.x-badge-status-warning{background-color:var(--x-badge-status-warning-bg, var(--x-color-warning, #faad14))}.x-badge-status-text{-webkit-margin-start:var(--x-badge-status-text-margin, var(--x-spacing-xs, 8px));margin-inline-start:var(--x-badge-status-text-margin, var(--x-spacing-xs, 8px));color:var(--x-badge-color, var(--x-color-text, rgba(0, 0, 0, 0.88)));font-size:var(--x-badge-font-size, var(--x-font-size-base, 14px))}.x-badge-color-pink{background:#eb2f96}.x-badge-color-red{background:#f5222d}.x-badge-color-yellow{background:#fadb14}.x-badge-color-orange{background:#fa8c16}.x-badge-color-cyan{background:#13c2c2}.x-badge-color-green{background:#52c41a}.x-badge-color-blue{background:#1677ff}.x-badge-color-purple{background:#722ed1}.x-badge-color-geekblue{background:#2f54eb}.x-badge-color-magenta{background:#eb2f96}.x-badge-color-volcano{background:#fa541c}.x-badge-color-gold{background:#faad14}.x-badge-color-lime{background:#a0d911}@-webkit-keyframes x-badge-status-processing{0%{-webkit-transform:scale(0.8);transform:scale(0.8);opacity:0.5}100%{-webkit-transform:scale(2.4);transform:scale(2.4);opacity:0}}@keyframes x-badge-status-processing{0%{-webkit-transform:scale(0.8);transform:scale(0.8);opacity:0.5}100%{-webkit-transform:scale(2.4);transform:scale(2.4);opacity:0}}`;
+
+const PRESET_COLORS$1 = [
+    'pink', 'red', 'yellow', 'orange', 'cyan', 'green', 'blue', 'purple',
+    'geekblue', 'magenta', 'volcano', 'gold', 'lime'
+];
+const XBadge = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    get el() { return getElement(this); }
+    /**
+     * Number to show in badge.
+     * @example
+     * <x-badge count={3}></x-badge>
+     */
+    count;
+    /**
+     * Whether to display a red dot instead of count.
+     * @example
+     * <x-badge dot></x-badge>
+     */
+    dot = false;
+    /**
+     * Max count to show.
+     * @example
+     * <x-badge count={120} overflowCount={99}></x-badge>
+     */
+    overflowCount = 99;
+    /**
+     * Whether to show badge when count is 0.
+     * @example
+     * <x-badge count={0} showZero></x-badge>
+     */
+    showZero = false;
+    /**
+     * Set Badge as a status dot.
+     * @example
+     * <x-badge status="success" text="Done"></x-badge>
+     */
+    status;
+    /**
+     * If status is set, text sets the display text of the status dot.
+     * @example
+     * <x-badge status="warning" text="Pending"></x-badge>
+     */
+    text;
+    /**
+     * Customize Badge dot color (supports preset colors or custom hex/rgb).
+     * @example
+     * <x-badge color="#ff4d4f" count={1}></x-badge>
+     */
+    color;
+    /**
+     * Set offset of the badge dot [left, top].
+     * @example
+     * <x-badge offset={[10, -2]} count={5}></x-badge>
+     */
+    offset;
+    /**
+     * Size of the badge.
+     * @example
+     * <x-badge size="small" count={2}></x-badge>
+     */
+    size = 'default';
+    /**
+     * Text to show when hovering over the badge.
+     * @example
+     * <x-badge badgeTitle="Notifications" count={9}></x-badge>
+     */
+    badgeTitle;
+    /**
+     * Used to display the classNames of the badge.
+     * @example
+     * <x-badge classNames={{ root: 'my-badge' }} count={1}></x-badge>
+     */
+    classNames;
+    /**
+     * Used to display the styles of the badge.
+     * @example
+     * <x-badge styles={{ indicator: 'background: red;' }} count={1}></x-badge>
+     */
+    styles;
+    /**
+     * Track whether component has child content.
+     */
+    hasChildren = false;
+    /**
+     * Initialize child detection before render.
+     * @returns void
+     * @example
+     * <x-badge count={1}><button>Inbox</button></x-badge>
+     */
+    componentWillLoad() {
+        this.checkChildren();
+    }
+    countChanged() {
+        // Trigger re-render when count changes
+    }
+    /**
+     * Detect whether default slot has child nodes.
+     *
+     * Flow:
+     * 1. Queries the default `<slot>`.
+     * 2. If slot exists:
+     *    - Gets `assignedNodes`.
+     *    - Checks if any node is an Element or non-empty Text.
+     * 3. If slot doesn't exist (yet):
+     *    - Checks `el.childNodes` length.
+     * 4. Updates `hasChildren` state, which toggles wrapper mode.
+     *
+     * @returns void
+     * @example
+     * <x-badge count={1}><span>Inbox</span></x-badge>
+     */
+    checkChildren() {
+        const slot = this.el.shadowRoot?.querySelector('slot');
+        if (slot) {
+            const assignedNodes = slot.assignedNodes({ flatten: true });
+            // Consider both element nodes and non-empty text nodes.
+            this.hasChildren = assignedNodes.some(node => node.nodeType === Node.ELEMENT_NODE ||
+                (node.nodeType === Node.TEXT_NODE && node.textContent?.trim()));
+        }
+        else {
+            // Fallback when slot is not yet available.
+            this.hasChildren = this.el.childNodes.length > 0;
+        }
+    }
+    /**
+     * Check if color matches preset palette.
+     * @param color - Color to test.
+     * @returns boolean
+     * @example
+     * this.isPresetColor('red')
+     */
+    isPresetColor(color) {
+        return PRESET_COLORS$1.includes(color);
+    }
+    /**
+     * Compute display count text based on dot/overflow rules.
+     *
+     * Flow:
+     * 1. If `dot` is true, returns null (no text).
+     * 2. If `count` is string, returns as-is.
+     * 3. If `count` is number:
+     *    - Checks against `overflowCount`.
+     *    - Returns `${overflowCount}+` if exceeded.
+     *    - Otherwise returns count.
+     *
+     * @returns string | number | null
+     * @example
+     * <x-badge count={120} overflowCount={99}></x-badge>
+     */
+    getDisplayCount() {
+        // Dot mode does not show any number.
+        if (this.dot) {
+            return null;
+        }
+        // String counts are displayed as-is.
+        if (typeof this.count === 'string') {
+            return this.count;
+        }
+        // Numeric counts respect overflowCount.
+        if (typeof this.count === 'number') {
+            if (this.count > this.overflowCount) {
+                return `${this.overflowCount}+`;
+            }
+            return this.count;
+        }
+        return null;
+    }
+    /**
+     * Compute inline offset styles for indicator.
+     * @returns Record<string, string>
+     * @example
+     * <x-badge offset={[8, -4]} count={1}></x-badge>
+     */
+    getOffsetStyle() {
+        if (!this.offset) {
+            return {};
+        }
+        const [left, top] = this.offset;
+        const leftValue = typeof left === 'number' ? `${left}px` : left;
+        const topValue = typeof top === 'number' ? `${top}px` : top;
+        return {
+            marginTop: topValue,
+            right: `calc(-100% + ${leftValue})`,
+        };
+    }
+    /**
+     * Compute custom color styles for indicator.
+     * @returns Record<string, string>
+     * @example
+     * <x-badge color="#52c41a" count={1}></x-badge>
+     */
+    getColorStyle() {
+        if (!this.color) {
+            return {};
+        }
+        // Preset colors use CSS classes instead of inline styles.
+        if (this.isPresetColor(this.color)) {
+            return {};
+        }
+        return {
+            background: this.color,
+            '--x-badge-color': this.color,
+        };
+    }
+    /**
+     * Decide if the badge indicator should be hidden.
+     * @returns boolean
+     * @example
+     * <x-badge count={0} showZero={false}></x-badge>
+     */
+    isHidden() {
+        const count = typeof this.count === 'number' ? this.count : null;
+        const isZero = count === 0 || count === null;
+        // Show if dot mode
+        if (this.dot) {
+            return false;
+        }
+        // Show if count is string (like "new")
+        if (typeof this.count === 'string') {
+            return false;
+        }
+        // Hide if zero and showZero is false
+        if (isZero && !this.showZero) {
+            return true;
+        }
+        return false;
+    }
+    /**
+     * Render status-style badge with dot and optional text.
+     * @returns JSX.Element
+     * @example
+     * <x-badge status="success" text="Done"></x-badge>
+     */
+    renderStatusBadge() {
+        const dotStyle = this.getColorStyle();
+        return (h(Host, { class: {
+                'x-badge': true,
+                'x-badge-status': true,
+                [this.classNames?.root || '']: !!this.classNames?.root,
+            }, style: this.styles?.root ? { cssText: this.styles.root } : undefined }, h("span", { class: {
+                'x-badge-status-dot': true,
+                [`x-badge-status-${this.status}`]: !!this.status,
+                [`x-badge-color-${this.color}`]: !!this.color && this.isPresetColor(this.color),
+                [this.classNames?.indicator || '']: !!this.classNames?.indicator,
+            }, style: {
+                ...dotStyle,
+                ...(this.styles?.indicator ? { cssText: this.styles.indicator } : {}),
+            } }), this.text && h("span", { class: "x-badge-status-text" }, this.text)));
+    }
+    /**
+     * Render badge in count/dot mode or status mode.
+     *
+     * Flow:
+     * 1. If `status` prop is present, calls `renderStatusBadge` (standalone dot with text).
+     * 2. Otherwise (Count/Dot mode):
+     *    - Calculates `displayCount` and `isHidden` status.
+     *    - Renders host element with classes indicating wrapper mode (`hasChildren`).
+     *    - Projects slot content.
+     *    - If not hidden, renders `<sup>` element for the badge:
+     *      - Applies classes for dot, count, size, color.
+     *      - Applies offset styles.
+     *
+     * @returns JSX.Element
+     * @example
+     * <x-badge count={5}><button>Inbox</button></x-badge>
+     */
+    render() {
+        // Status Badge mode
+        if (this.status) {
+            return this.renderStatusBadge();
+        }
+        const displayCount = this.getDisplayCount();
+        const isHidden = this.isHidden();
+        const offsetStyle = this.getOffsetStyle();
+        const colorStyle = this.getColorStyle();
+        const titleText = this.badgeTitle ?? (typeof this.count === 'number' ? String(this.count) : undefined);
+        return (h(Host, { class: {
+                'x-badge': true,
+                'x-badge-not-a-wrapper': !this.hasChildren,
+                [this.classNames?.root || '']: !!this.classNames?.root,
+            }, style: this.styles?.root ? { cssText: this.styles.root } : undefined }, h("slot", null), !isHidden && (h("sup", { class: {
+                'x-badge-count': !this.dot,
+                'x-badge-dot': this.dot,
+                'x-badge-multiple-words': !this.dot && String(displayCount || '').length > 1,
+                'x-badge-count-sm': this.size === 'small',
+                [`x-badge-color-${this.color}`]: !!this.color && this.isPresetColor(this.color),
+                [this.classNames?.indicator || '']: !!this.classNames?.indicator,
+            }, style: {
+                ...offsetStyle,
+                ...colorStyle,
+                ...(this.styles?.indicator ? { cssText: this.styles.indicator } : {}),
+            }, title: titleText }, displayCount))));
+    }
+    static get watchers() { return {
+        "count": [{
+                "countChanged": 0
+            }]
+    }; }
+};
+XBadge.style = xBadgeCss();
+
+const xFloatButtonCss = () => `@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;position:fixed;z-index:var(--x-float-button-z-index, var(--x-z-index-popup, 99));right:var(--x-float-button-right, var(--x-spacing-xl, 24px));bottom:var(--x-float-button-bottom, var(--x-spacing-xl, 24px))}.x-float-btn{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;width:var(--x-float-button-size, var(--x-control-height-lg, 40px));height:var(--x-float-button-size, var(--x-control-height-lg, 40px));background-color:var(--x-float-button-bg, var(--x-color-bg-container, #ffffff));color:var(--x-float-button-color, var(--x-color-text, rgba(0, 0, 0, 0.88)));border-radius:var(--x-float-button-border-radius, 50%);-webkit-box-shadow:var(--x-float-button-shadow, var(--x-shadow-secondary, 0 6px 16px 0 rgba(0, 0, 0, 0.08)));box-shadow:var(--x-float-button-shadow, var(--x-shadow-secondary, 0 6px 16px 0 rgba(0, 0, 0, 0.08)));border:none;cursor:pointer;padding:0;-webkit-transition:all var(--x-float-button-motion-duration, var(--x-motion-duration-fast, 0.1s));transition:all var(--x-float-button-motion-duration, var(--x-motion-duration-fast, 0.1s));text-decoration:none;outline:none}.x-float-btn:hover{background-color:var(--x-float-button-bg-hover, var(--x-color-bg-layout, #f5f5f5))}.x-float-btn.x-float-btn-primary{background-color:var(--x-float-button-primary-bg, var(--x-color-primary, #1677ff));color:var(--x-float-button-primary-color, var(--x-color-white, #ffffff))}.x-float-btn.x-float-btn-primary:hover{background-color:var(--x-float-button-primary-bg-hover, var(--x-color-primary-hover, #4096ff))}.x-float-btn.x-float-btn-square{border-radius:var(--x-float-button-border-radius-square, var(--x-border-radius-base, 6px))}.x-float-btn-content{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:100%}.x-float-btn-icon{font-size:var(--x-float-button-icon-size, 20px);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}.x-float-btn-description{font-size:var(--x-float-button-description-font-size, var(--x-font-size-sm, 12px));line-height:var(--x-float-button-description-line-height, var(--x-line-height-sm, 1.6666666667));margin-top:var(--x-float-button-description-margin-top, var(--x-spacing-xxs, 4px))}`;
+
+const XFloatButton = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.xClick = createEvent(this, "xClick", 7);
+    }
+    /**
+     * Text or other element to display in the tooltip
+     * @example
+     * <x-float-button tooltip="Help"></x-float-button>
+     */
+    tooltip;
+    /**
+     * The type of the button
+     * @example
+     * <x-float-button type="primary"></x-float-button>
+     */
+    type = 'default';
+    /**
+     * The shape of the button
+     * @example
+     * <x-float-button shape="square"></x-float-button>
+     */
+    shape = 'circle';
+    /**
+     * The target of the link
+     * @example
+     * <x-float-button href="/docs"></x-float-button>
+     */
+    href;
+    /**
+     * The target attribute of the link
+     * @example
+     * <x-float-button href="https://example.com" target="_blank"></x-float-button>
+     */
+    target;
+    /**
+     * Description text
+     * @example
+     * <x-float-button description="Support"></x-float-button>
+     */
+    description;
+    /**
+     * Emitted when the button is clicked
+     * @example
+     * <x-float-button onXClick={(ev) => console.log(ev.detail)}></x-float-button>
+     */
+    xClick;
+    handleClick = (ev) => {
+        this.xClick.emit(ev);
+    };
+    /**
+     * Render float button with optional link and tooltip.
+     *
+     * Flow:
+     * 1. Determines tag type: `a` if href exists, otherwise `button`.
+     * 2. Constructs classes based on type (primary/default) and shape.
+     * 3. Renders button content:
+     *    - Icon slot.
+     *    - Description (if present).
+     * 4. Wraps in Host with `title` attribute for native tooltip.
+     *
+     * @returns JSX.Element
+     * @example
+     * <x-float-button tooltip="Top">
+     *   <x-icon slot="icon" name="arrow_upward"></x-icon>
+     * </x-float-button>
+     */
+    render() {
+        const { type, shape, href, target, description, tooltip } = this;
+        const classes = {
+            'x-float-btn': true,
+            [`x-float-btn-${type}`]: true,
+            [`x-float-btn-${shape}`]: true,
+        };
+        const content = (h("div", { key: '6578a1485b4ac4435173e705e70cf11443563681', class: "x-float-btn-body" }, h("div", { key: '718fe35102bed51d9444c5a9726efef149e2a4fe', class: "x-float-btn-content" }, h("div", { key: 'dcd91a0e83f2e973c88546525aafe2c8574c582e', class: "x-float-btn-icon" }, h("slot", { key: '4ea0892ea7e6135a206d4fb9fecb37ff2f73f12c', name: "icon" })), description && h("div", { key: '080657e737995cfd8389b350c0a0ce447594762b', class: "x-float-btn-description" }, description), h("slot", { key: '1bb44cab04c8d259c90bf7b52ccda9e88efb4884', name: "description" }))));
+        const Element = href ? 'a' : 'button';
+        const attrs = href ? { href, target } : { type: 'button' };
+        return (h(Host, { key: '1141e40b36259b15c3b8b57380e9d45f6a5f0bc9', title: tooltip }, h(Element, { key: '18f2891c388c8473db1d693a1557731bac8fbfdf', class: classes, ...attrs, onClick: this.handleClick }, content)));
+    }
+};
+XFloatButton.style = xFloatButtonCss();
+
+/**
+ * FormGroup — Tracks values & validity of a group of controls
+ * Mirrors Angular's FormGroup API 100%
+ */
+class FormGroup extends AbstractControl {
+    _controls;
+    constructor(controls, validatorsOrOptions, asyncValidators) {
+        super();
+        this._controls = controls;
+        this._setParentForControls();
+        this._applyValidators(validatorsOrOptions, asyncValidators);
+        this._updateValueAndValidity({ onlySelf: true, emitEvent: false });
+    }
+    get value() {
+        return this._reduceValue();
+    }
+    get controls() {
+        return this._controls;
+    }
+    // ─── Control Management ───────────────────────────────────────
+    registerControl(name, control) {
+        if (this._controls[name])
+            return this._controls[name];
+        this._controls[name] = control;
+        control.parent = this;
+        this._updateValueAndValidity();
+        return control;
+    }
+    addControl(name, control, opts = {}) {
+        this.registerControl(name, control);
+        if (opts.emitEvent !== false) {
+            this._emitValueChange(this.value);
+        }
+    }
+    removeControl(name, opts = {}) {
+        if (this._controls[name]) {
+            this._controls[name].parent = null;
+            delete this._controls[name];
+        }
+        this._updateValueAndValidity();
+        if (opts.emitEvent !== false) {
+            this._emitValueChange(this.value);
+        }
+    }
+    setControl(name, control, opts = {}) {
+        if (this._controls[name]) {
+            this._controls[name].parent = null;
+        }
+        this._controls[name] = control;
+        control.parent = this;
+        this._updateValueAndValidity();
+        if (opts.emitEvent !== false) {
+            this._emitValueChange(this.value);
+        }
+    }
+    contains(controlName) {
+        return controlName in this._controls && this._controls[controlName].enabled;
+    }
+    // ─── Value Operations ─────────────────────────────────────────
+    setValue(value, options = {}) {
+        this._checkAllValuesPresent(value);
+        Object.keys(value).forEach(name => {
+            this._throwIfControlMissing(name);
+            this._controls[name].setValue(value[name], {
+                onlySelf: true,
+                emitEvent: options.emitEvent
+            });
+        });
+        this._updateValueAndValidity(options);
+        if (options.emitEvent !== false) {
+            this._emitValueChange(this.value);
+        }
+    }
+    patchValue(value, options = {}) {
+        Object.keys(value).forEach(name => {
+            if (this._controls[name]) {
+                this._controls[name].patchValue(value[name], {
+                    onlySelf: true,
+                    emitEvent: options.emitEvent
+                });
+            }
+        });
+        this._updateValueAndValidity(options);
+        if (options.emitEvent !== false) {
+            this._emitValueChange(this.value);
+        }
+    }
+    reset(value, options = {}) {
+        this._forEachChild((control, name) => {
+            control.reset(value ? value[name] : undefined, { onlySelf: true, emitEvent: options.emitEvent });
+        });
+        this.markAsPristine(options);
+        this.markAsUntouched(options);
+        this._updateValueAndValidity(options);
+    }
+    getRawValue() {
+        return this._reduceChildren({}, (acc, control, name) => {
+            acc[name] = control.getRawValue();
+            return acc;
+        });
+    }
+    // ─── Internal ────────────────────────────────────────────────
+    _runValidation() {
+        if (this._status === 'DISABLED')
+            return;
+        this._status = this._computeStatus();
+        const groupErrors = this._runValidators(this.value);
+        const childErrors = this._collectChildErrors();
+        const errors = { ...(childErrors || {}), ...(groupErrors || {}) };
+        this._errors = Object.keys(errors).length ? errors : null;
+        this._status = this._calculateStatus();
+    }
+    _computeStatus() {
+        if (this._anyControlsHaveStatus('INVALID'))
+            return 'INVALID';
+        if (this._anyControlsHaveStatus('PENDING'))
+            return 'PENDING';
+        return 'VALID';
+    }
+    _collectChildErrors() {
+        return null; // group-level: child errors are surfaced via controls themselves
+    }
+    _anyControlsHaveStatus(status) {
+        return Object.values(this._controls).some((c) => c.status === status);
+    }
+    _forEachChild(fn) {
+        Object.keys(this._controls).forEach(name => fn(this._controls[name], name));
+    }
+    _anyControls(condition) {
+        return Object.values(this._controls).some((c) => condition(c));
+    }
+    _reduceValue() {
+        return this._reduceChildren({}, (acc, control, name) => {
+            if (control.enabled || this.disabled)
+                acc[name] = control.value;
+            return acc;
+        });
+    }
+    _reduceChildren(initValue, fn) {
+        let res = initValue;
+        this._forEachChild((control, name) => { res = fn(res, control, name); });
+        return res;
+    }
+    _setParentForControls() {
+        this._forEachChild((control) => { control.parent = this; });
+    }
+    _checkAllValuesPresent(value) {
+        this._forEachChild((_control, name) => {
+            if (!(name in value)) {
+                throw new Error(`Must supply a value for form control with name: '${name}'.`);
+            }
+        });
+    }
+    _throwIfControlMissing(name) {
+        if (!Object.keys(this._controls).length) {
+            throw new Error(`There are no form controls registered with this group yet.`);
+        }
+        if (!this._controls[name]) {
+            throw new Error(`Cannot find form control with name: ${name}.`);
+        }
+    }
+}
+
+const xFormCss = () => `@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;color:var(--x-form-color, var(--x-color-text, rgba(0, 0, 0, 0.88)));font-size:var(--x-form-font-size, var(--x-font-size, 14px));font-family:var(--x-form-font-family, var(--x-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif));font-variant:tabular-nums;line-height:var(--x-form-line-height, var(--x-line-height, 1.5715));-webkit-font-feature-settings:"tnum";font-feature-settings:"tnum"}.x-form{-webkit-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0;color:var(--x-form-color, var(--x-color-text, rgba(0, 0, 0, 0.88)));font-size:var(--x-form-font-size, var(--x-font-size, 14px));font-variant:tabular-nums;line-height:var(--x-form-line-height, var(--x-line-height, 1.5715));list-style:none;-webkit-font-feature-settings:"tnum";font-feature-settings:"tnum"}.x-form.x-form-inline{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}.x-form.x-form-inline ::slotted(x-form-item){-ms-flex:none;flex:none;margin-right:var(--x-form-inline-item-margin-right, var(--x-spacing-md, 16px));margin-bottom:0}.x-form.x-form-hide-required-mark ::slotted(x-form-item) .x-form-item-required::before{display:none !important}.x-form.x-form-hide-required-mark .x-form-item-required::before{display:none !important}`;
+
+const XForm = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.xFinish = createEvent(this, "xFinish", 7);
+        this.xFinishFailed = createEvent(this, "xFinishFailed", 7);
+    }
+    /**
+     * Form layout
+     * @example
+     * <x-form layout="vertical"></x-form>
+     */
+    layout = 'horizontal';
+    /**
+     * The name of the form
+     * @example
+     * <x-form name="profile"></x-form>
+     */
+    name;
+    /**
+     * Whether to show colon after label
+     * @example
+     * <x-form colon={false}></x-form>
+     */
+    colon = true;
+    /**
+     * Form size
+     * @example
+     * <x-form size="small"></x-form>
+     */
+    size = 'middle';
+    /**
+     * Form instance
+     */
+    form;
+    /**
+     * Initial values of form
+     */
+    initialValues;
+    /**
+     * Hide required mark of all form items
+     */
+    hideRequiredMark = false;
+    /**
+     * Trigger after submitting the form and verifying data successfully
+     */
+    xFinish;
+    /**
+     * Trigger after submitting the form and verifying data failed
+     */
+    xFinishFailed;
+    /**
+     * Submit the form
+     */
+    async submit() {
+        if (this.form) {
+            this.form.markAllAsTouched();
+            if (this.form.valid) {
+                this.xFinish.emit(this.form.value);
+            }
+            else {
+                this.xFinishFailed.emit({
+                    values: this.form.value,
+                    errorFields: this.getErrorFields(),
+                    outOfDate: false,
+                });
+            }
+        }
+    }
+    getErrorFields() {
+        if (!this.form)
+            return [];
+        const errorFields = [];
+        const controls = this.form.controls;
+        for (const name in controls) {
+            if (controls[name].invalid) {
+                errorFields.push({
+                    name: [name],
+                    errors: Object.values(controls[name].errors || {}),
+                });
+            }
+        }
+        return errorFields;
+    }
+    handleSubmit = (e) => {
+        e.preventDefault();
+        this.submit();
+    };
+    handleInitialValuesChange(newValue) {
+        if (this.form && newValue) {
+            this.form.patchValue(newValue, { emitEvent: true });
+        }
+    }
+    componentWillLoad() {
+        if (!this.form) {
+            this.form = new FormGroup({});
+        }
+        this.handleInitialValuesChange(this.initialValues);
+    }
+    render() {
+        return (h(Host, { key: 'ebb7831eae382b4924a330a515ce6fbcd5740a5e', class: {
+                'x-form': true,
+                [`x-form-${this.layout}`]: true,
+                [`x-form-${this.size}`]: true,
+                'x-form-hide-required-mark': this.hideRequiredMark,
+            } }, h("form", { key: 'fdce9f05232a5f9323bd10264d078cc6c6f25bcf', name: this.name, onSubmit: this.handleSubmit }, h("slot", { key: '12fbc506ce06538757fa6e51846108ddb886235a' }))));
+    }
+    static get watchers() { return {
+        "initialValues": [{
+                "handleInitialValuesChange": 0
+            }]
+    }; }
+};
+XForm.style = xFormCss();
+
+const xMenuCss = () => `@charset "UTF-8";:host{display:block;-webkit-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0;color:var(--x-menu-color, var(--x-color-text, rgba(0, 0, 0, 0.88)));font-size:var(--x-menu-font-size, var(--x-font-size-base, 14px));font-family:var(--x-menu-font-family, var(--x-font-family-base, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif));line-height:var(--x-menu-line-height, var(--x-line-height-base, 1.5714285714));list-style:none;background:var(--x-menu-bg, var(--x-color-bg-container, #ffffff));outline:none;-webkit-transition:background var(--x-menu-motion-duration, var(--x-motion-duration-mid, 0.2s)) var(--x-menu-motion-ease, var(--x-motion-ease-in-out, cubic-bezier(0.645, 0.045, 0.355, 1))), width var(--x-menu-motion-duration, var(--x-motion-duration-mid, 0.2s)) var(--x-menu-motion-ease, var(--x-motion-ease-in-out, cubic-bezier(0.645, 0.045, 0.355, 1)));transition:background var(--x-menu-motion-duration, var(--x-motion-duration-mid, 0.2s)) var(--x-menu-motion-ease, var(--x-motion-ease-in-out, cubic-bezier(0.645, 0.045, 0.355, 1))), width var(--x-menu-motion-duration, var(--x-motion-duration-mid, 0.2s)) var(--x-menu-motion-ease, var(--x-motion-ease-in-out, cubic-bezier(0.645, 0.045, 0.355, 1)))}.x-menu-list{margin:0;padding:var(--x-menu-item-margin-block, var(--x-spacing-xxs, 4px)) 0;list-style:none;background:inherit;display:block}:host(.x-menu-horizontal){line-height:var(--x-menu-horizontal-line-height, 46px);border-bottom:var(--x-menu-border-width, var(--x-border-width-base, 1px)) solid var(--x-menu-border-color, var(--x-color-split, rgba(5, 5, 5, 0.06)))}:host(.x-menu-horizontal) .x-menu-list{display:-ms-flexbox;display:flex;-ms-flex-wrap:nowrap;flex-wrap:nowrap;padding:0}:host(.x-menu-vertical){-webkit-border-end:var(--x-menu-border-width, var(--x-border-width-base, 1px)) solid var(--x-menu-border-color, var(--x-color-split, rgba(5, 5, 5, 0.06)));border-inline-end:var(--x-menu-border-width, var(--x-border-width-base, 1px)) solid var(--x-menu-border-color, var(--x-color-split, rgba(5, 5, 5, 0.06)))}:host(.x-menu-inline){-webkit-border-end:var(--x-menu-border-width, var(--x-border-width-base, 1px)) solid var(--x-menu-border-color, var(--x-color-split, rgba(5, 5, 5, 0.06)));border-inline-end:var(--x-menu-border-width, var(--x-border-width-base, 1px)) solid var(--x-menu-border-color, var(--x-color-split, rgba(5, 5, 5, 0.06)))}:host(.x-menu-inline-collapsed){width:var(--x-menu-collapsed-width, 80px)}:host(.x-menu-inline-collapsed) .x-menu-list{padding:var(--x-menu-item-margin-block, var(--x-spacing-xxs, 4px)) 0}:host(.x-menu-light){background:var(--x-menu-bg, var(--x-color-bg-container, #ffffff));color:var(--x-menu-color, var(--x-color-text, rgba(0, 0, 0, 0.88)))}:host(.x-menu-dark){background:var(--x-menu-dark-bg, var(--x-menu-dark-bg, #001529));color:var(--x-menu-dark-color, rgba(255, 255, 255, 0.65))}:host(.x-menu-dark) .x-menu-list{background:var(--x-menu-dark-bg, var(--x-menu-dark-bg, #001529))}:host([borderless]){border:none !important}`;
+
+const XMenu = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.xSelect = createEvent(this, "xSelect", 7);
+        this.xDeselect = createEvent(this, "xDeselect", 7);
+        this.xClick = createEvent(this, "xClick", 7);
+        this.xOpenChange = createEvent(this, "xOpenChange", 7);
+    }
+    get el() { return getElement(this); }
+    // ========================================
+    // PROPS
+    // ========================================
+    /**
+     * Type of menu: vertical, horizontal, or inline
+     * @example
+     * <x-menu mode="horizontal"></x-menu>
+     */
+    mode = 'vertical';
+    /**
+     * Color theme of the menu
+     * @example
+     * <x-menu theme="dark"></x-menu>
+     */
+    theme = 'light';
+    /**
+     * Specifies the collapsed status when menu is inline mode
+     * @example
+     * <x-menu inlineCollapsed></x-menu>
+     */
+    inlineCollapsed = false;
+    /**
+     * Indent (in pixels) of inline menu items on each level
+     * @example
+     * <x-menu inlineIndent={32}></x-menu>
+     */
+    inlineIndent = 24;
+    /**
+     * Array with the keys of default selected menu items
+     * @example
+     * <x-menu defaultSelectedKeys={['home']}></x-menu>
+     */
+    defaultSelectedKeys = [];
+    /**
+     * Array with the keys of currently selected menu items (controlled)
+     * @example
+     * <x-menu selectedKeys={['settings']}></x-menu>
+     */
+    selectedKeys;
+    /**
+     * Array with the keys of default opened sub-menus
+     * @example
+     * <x-menu defaultOpenKeys={['sub-1']}></x-menu>
+     */
+    defaultOpenKeys = [];
+    /**
+     * Array with the keys of currently opened sub-menus (controlled)
+     * @example
+     * <x-menu openKeys={['sub-1']}></x-menu>
+     */
+    openKeys;
+    /**
+     * Allows selection of multiple items
+     * @example
+     * <x-menu multiple></x-menu>
+     */
+    multiple = false;
+    /**
+     * Allows selecting menu items
+     * @example
+     * <x-menu selectable={false}></x-menu>
+     */
+    selectable = true;
+    /**
+     * Which action can trigger submenu open/close
+     * @example
+     * <x-menu triggerSubMenuAction="click"></x-menu>
+     */
+    triggerSubMenuAction = 'hover';
+    /**
+     * Delay time to show submenu when mouse enters (in seconds)
+     * @example
+     * <x-menu subMenuOpenDelay={0.2}></x-menu>
+     */
+    subMenuOpenDelay = 0;
+    /**
+     * Delay time to hide submenu when mouse leaves (in seconds)
+     * @example
+     * <x-menu subMenuCloseDelay={0.2}></x-menu>
+     */
+    subMenuCloseDelay = 0.1;
+    // ========================================
+    // STATE
+    // ========================================
+    internalSelectedKeys = [];
+    internalOpenKeys = [];
+    // ========================================
+    // EVENTS
+    // ========================================
+    /**
+     * Called when a menu item is selected
+     * @example
+     * <x-menu onXSelect={(ev) => console.log(ev.detail)}></x-menu>
+     */
+    xSelect;
+    /**
+     * Called when a menu item is deselected (multiple mode only)
+     * @example
+     * <x-menu onXDeselect={(ev) => console.log(ev.detail)}></x-menu>
+     */
+    xDeselect;
+    /**
+     * Called when a menu item is clicked
+     * @example
+     * <x-menu onXClick={(ev) => console.log(ev.detail)}></x-menu>
+     */
+    xClick;
+    /**
+     * Called when sub-menus are opened or closed
+     * @example
+     * <x-menu onXOpenChange={(ev) => console.log(ev.detail)}></x-menu>
+     */
+    xOpenChange;
+    // ========================================
+    // LIFECYCLE
+    // ========================================
+    componentWillLoad() {
+        // Initialize internal state from default props
+        this.internalSelectedKeys = this.selectedKeys ?? [...this.defaultSelectedKeys];
+        this.internalOpenKeys = this.openKeys ?? [...this.defaultOpenKeys];
+    }
+    componentDidLoad() {
+        this.syncChildrenProps();
+    }
+    componentDidUpdate() {
+        this.syncChildrenProps();
+    }
+    // ========================================
+    // WATCHERS
+    // ========================================
+    handleSelectedKeysChange(newValue) {
+        if (newValue !== undefined) {
+            this.internalSelectedKeys = [...newValue];
+        }
+    }
+    handleOpenKeysChange(newValue) {
+        if (newValue !== undefined) {
+            this.internalOpenKeys = [...newValue];
+        }
+    }
+    handlePropsChange() {
+        this.syncChildrenProps();
+    }
+    // ========================================
+    // LISTENERS
+    // ========================================
+    handleItemClick(ev) {
+        ev.stopPropagation();
+        const { key, keyPath, domEvent } = ev.detail;
+        // Emit click event
+        this.xClick.emit({ key, keyPath, domEvent });
+        if (!this.selectable)
+            return;
+        const currentSelected = this.getSelectedKeys();
+        const isSelected = currentSelected.includes(key);
+        if (this.multiple) {
+            // Multiple selection mode
+            // Flow:
+            // 1. If already selected, remove from list (deselect).
+            // 2. If not selected, add to list (select).
+            // 3. Emit appropriate event (xSelect/xDeselect).
+            if (isSelected) {
+                // Deselect
+                const newSelected = currentSelected.filter(k => k !== key);
+                this.updateSelectedKeys(newSelected);
+                this.xDeselect.emit({ key, keyPath, selectedKeys: newSelected, domEvent });
+            }
+            else {
+                // Select
+                const newSelected = [...currentSelected, key];
+                this.updateSelectedKeys(newSelected);
+                this.xSelect.emit({ key, keyPath, selectedKeys: newSelected, domEvent });
+            }
+        }
+        else {
+            // Single selection mode
+            // Flow:
+            // 1. If not selected, replace current selection with new key.
+            // 2. Emit xSelect.
+            if (!isSelected) {
+                this.updateSelectedKeys([key]);
+                this.xSelect.emit({ key, keyPath, selectedKeys: [key], domEvent });
+            }
+        }
+    }
+    /**
+     * Listens for submenu toggle events.
+     * Updates the open keys state and emits change event.
+     *
+     * Flow:
+     * 1. Stops event propagation.
+     * 2. Retrieves the key and target open state from the event detail.
+     * 3. Updates the list of open keys:
+     *    - If opening: Appends the key to the list.
+     *    - If closing: Filters the key out of the list.
+     * 4. Updates internal state and emits `xOpenChange`.
+     *
+     * @param {CustomEvent<SubmenuToggleDetail>} ev - The toggle event.
+     */
+    handleSubmenuToggle(ev) {
+        ev.stopPropagation();
+        const { key, open } = ev.detail;
+        const currentOpen = this.getOpenKeys();
+        let newOpenKeys;
+        if (open) {
+            newOpenKeys = [...currentOpen, key];
+        }
+        else {
+            newOpenKeys = currentOpen.filter(k => k !== key);
+        }
+        this.updateOpenKeys(newOpenKeys);
+        this.xOpenChange.emit({ openKeys: newOpenKeys });
+    }
+    // ========================================
+    // PRIVATE METHODS
+    // ========================================
+    getSelectedKeys() {
+        return this.selectedKeys ?? this.internalSelectedKeys;
+    }
+    getOpenKeys() {
+        return this.openKeys ?? this.internalOpenKeys;
+    }
+    updateSelectedKeys(keys) {
+        if (this.selectedKeys === undefined) {
+            // Uncontrolled mode
+            this.internalSelectedKeys = keys;
+        }
+        // In controlled mode, parent should update via prop
+    }
+    updateOpenKeys(keys) {
+        if (this.openKeys === undefined) {
+            // Uncontrolled mode
+            this.internalOpenKeys = keys;
+        }
+        // In controlled mode, parent should update via prop
+    }
+    syncChildrenProps() {
+        const selectedKeys = this.getSelectedKeys();
+        const openKeys = this.getOpenKeys();
+        const effectiveMode = this.inlineCollapsed && this.mode === 'inline' ? 'vertical' : this.mode;
+        // Sync props to direct children
+        // Flow:
+        // 1. Iterates over assigned elements in slot.
+        // 2. Sets internal props (_menuMode, _menuTheme, _selected, etc.) on items/submenus.
+        // 3. This ensures children react to parent state changes (like collapse/theme).
+        const syncElement = (element, level = 0) => {
+            const el = element;
+            const tagName = element.tagName.toLowerCase();
+            if (tagName === 'x-menu-item') {
+                el._menuMode = effectiveMode;
+                el._menuTheme = this.theme;
+                el._inlineCollapsed = this.inlineCollapsed;
+                el._level = level;
+                el._inlineIndent = this.inlineIndent;
+                el._selected = selectedKeys.includes(el.itemKey);
+            }
+            else if (tagName === 'x-menu-submenu') {
+                el._menuMode = effectiveMode;
+                el._menuTheme = this.theme;
+                el._inlineCollapsed = this.inlineCollapsed;
+                el._level = level;
+                el._inlineIndent = this.inlineIndent;
+                el._open = openKeys.includes(el.itemKey);
+                el._triggerSubMenuAction = this.triggerSubMenuAction;
+                el._subMenuOpenDelay = this.subMenuOpenDelay;
+                el._subMenuCloseDelay = this.subMenuCloseDelay;
+                el._selectedKeys = selectedKeys;
+            }
+            else if (tagName === 'x-menu-item-group') {
+                el._menuMode = effectiveMode;
+                el._menuTheme = this.theme;
+                el._inlineCollapsed = this.inlineCollapsed;
+                el._level = level;
+                el._inlineIndent = this.inlineIndent;
+            }
+            else if (tagName === 'x-menu-divider') {
+                el._menuTheme = this.theme;
+                el._inlineCollapsed = this.inlineCollapsed;
+            }
+        };
+        // Get all slotted children
+        const slot = this.el.shadowRoot?.querySelector('slot');
+        if (slot) {
+            const assignedElements = slot.assignedElements();
+            assignedElements.forEach(el => syncElement(el, 0));
+        }
+    }
+    // ========================================
+    // RENDER
+    // ========================================
+    /**
+     * Main render method for the menu component.
+     *
+     * Flow:
+     * 1. Determines the effective mode (handles inline collapsed state becoming vertical).
+     * 2. Constructs the class map for the host element based on mode and theme.
+     * 3. Renders the Host element with role="menu".
+     * 4. Renders a `<ul>` list container.
+     * 5. Renders the default slot for menu items and submenus.
+     * 6. Listens to `slotchange` to sync props to new children.
+     *
+     * @returns {JSX.Element} The component tree.
+     */
+    render() {
+        const effectiveMode = this.inlineCollapsed && this.mode === 'inline' ? 'vertical' : this.mode;
+        const classes = {
+            'x-menu': true,
+            'x-menu-root': true,
+            [`x-menu-${effectiveMode}`]: true,
+            [`x-menu-${this.theme}`]: true,
+            'x-menu-inline-collapsed': this.inlineCollapsed && this.mode === 'inline',
+        };
+        return (h(Host, { key: '73e2102c66edbb6c14b89dbe2610e7d24ceaa1cb', class: classes, role: "menu" }, h("ul", { key: '28fdce7848e9b87b008accead28389e2511d460f', class: "x-menu-list", part: "list" }, h("slot", { key: 'f3b676f3d37836e5360d559533508e8047fba74f', onSlotchange: () => this.syncChildrenProps() }))));
+    }
+    static get watchers() { return {
+        "selectedKeys": [{
+                "handleSelectedKeysChange": 0
+            }],
+        "openKeys": [{
+                "handleOpenKeysChange": 0
+            }],
+        "mode": [{
+                "handlePropsChange": 0
+            }],
+        "theme": [{
+                "handlePropsChange": 0
+            }],
+        "inlineCollapsed": [{
+                "handlePropsChange": 0
+            }],
+        "inlineIndent": [{
+                "handlePropsChange": 0
+            }]
+    }; }
+};
+XMenu.style = xMenuCss();
+
+const xMenuItemCss = () => `@charset "UTF-8";:host{display:block;position:relative;margin:0 var(--x-menu-item-margin-inline, 4px) var(--x-menu-item-margin-block, 4px);font-family:var(--x-menu-item-font-family, var(--x-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif));font-size:var(--x-menu-item-font-size, var(--x-font-size, 14px));cursor:pointer;-webkit-transition:color var(--x-menu-item-motion-duration, var(--x-motion-duration-mid, 0.2s)) var(--x-menu-item-motion-ease, var(--x-motion-ease-in-out, cubic-bezier(0.645, 0.045, 0.355, 1))), background var(--x-menu-item-motion-duration, var(--x-motion-duration-mid, 0.2s)) var(--x-menu-item-motion-ease, var(--x-motion-ease-in-out, cubic-bezier(0.645, 0.045, 0.355, 1)));transition:color var(--x-menu-item-motion-duration, var(--x-motion-duration-mid, 0.2s)) var(--x-menu-item-motion-ease, var(--x-motion-ease-in-out, cubic-bezier(0.645, 0.045, 0.355, 1))), background var(--x-menu-item-motion-duration, var(--x-motion-duration-mid, 0.2s)) var(--x-menu-item-motion-ease, var(--x-motion-ease-in-out, cubic-bezier(0.645, 0.045, 0.355, 1)))}.x-menu-item-inner{position:relative;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;height:var(--x-menu-item-height, 40px);padding:0 var(--x-menu-item-padding-inline, 16px);border-radius:var(--x-menu-item-border-radius, var(--x-border-radius-lg, 8px));color:var(--x-menu-item-color, var(--x-color-text, rgba(0, 0, 0, 0.88)));line-height:var(--x-menu-item-height, 40px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-webkit-transition:inherit;transition:inherit}.x-menu-item-icon{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;min-width:var(--x-menu-icon-size, 14px);-webkit-margin-end:var(--x-menu-icon-margin-inline-end, 10px);margin-inline-end:var(--x-menu-icon-margin-inline-end, 10px);font-size:var(--x-menu-icon-size, 14px);-webkit-transition:font-size var(--x-menu-item-motion-duration, var(--x-motion-duration-mid, 0.2s)) var(--x-menu-item-motion-ease, var(--x-motion-ease-in-out, cubic-bezier(0.645, 0.045, 0.355, 1))), margin var(--x-menu-item-motion-duration, var(--x-motion-duration-mid, 0.2s)) var(--x-menu-item-motion-ease, var(--x-motion-ease-in-out, cubic-bezier(0.645, 0.045, 0.355, 1)));transition:font-size var(--x-menu-item-motion-duration, var(--x-motion-duration-mid, 0.2s)) var(--x-menu-item-motion-ease, var(--x-motion-ease-in-out, cubic-bezier(0.645, 0.045, 0.355, 1))), margin var(--x-menu-item-motion-duration, var(--x-motion-duration-mid, 0.2s)) var(--x-menu-item-motion-ease, var(--x-motion-ease-in-out, cubic-bezier(0.645, 0.045, 0.355, 1)))}.x-menu-item-icon:empty{display:none}.x-menu-item-content{-ms-flex:1;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}.x-menu-item-extra{-webkit-margin-start:auto;margin-inline-start:auto;-webkit-padding-start:var(--x-menu-icon-margin-inline-end, 10px);padding-inline-start:var(--x-menu-icon-margin-inline-end, 10px);font-size:var(--x-menu-item-font-size, var(--x-font-size, 14px));color:inherit;opacity:0.65}.x-menu-item-extra:empty{display:none}:host(.x-menu-item-light) .x-menu-item-inner{color:var(--x-menu-item-color, var(--x-color-text, rgba(0, 0, 0, 0.88)))}:host(.x-menu-item-light):hover .x-menu-item-inner,:host(.x-menu-item-light).x-menu-item-hover .x-menu-item-inner{color:var(--x-menu-item-color-hover, var(--x-color-text, rgba(0, 0, 0, 0.88)));background-color:var(--x-menu-item-bg-hover, rgba(0, 0, 0, 0.06))}:host(.x-menu-item-light).x-menu-item-selected .x-menu-item-inner{color:var(--x-menu-item-color-selected, var(--x-color-primary, #1677ff));background-color:var(--x-menu-item-bg-selected, var(--x-color-primary-bg, #e6f4ff))}:host(.x-menu-item-light).x-menu-item-disabled{cursor:not-allowed}:host(.x-menu-item-light).x-menu-item-disabled .x-menu-item-inner{color:var(--x-menu-item-color-disabled, var(--x-color-text-disabled, rgba(0, 0, 0, 0.25)));background:none}:host(.x-menu-item-light).x-menu-item-danger .x-menu-item-inner{color:var(--x-menu-item-danger-color, var(--x-color-error, #ff4d4f))}:host(.x-menu-item-light).x-menu-item-danger:hover .x-menu-item-inner{color:var(--x-menu-item-danger-color-hover, var(--x-color-error, #ff4d4f))}:host(.x-menu-item-light).x-menu-item-danger.x-menu-item-selected .x-menu-item-inner{color:var(--x-menu-item-danger-color-selected, var(--x-color-error, #ff4d4f));background-color:var(--x-menu-item-danger-bg-selected, var(--x-color-error-bg, #fff2f0))}:host(.x-menu-item-dark) .x-menu-item-inner{color:var(--x-menu-item-dark-color, rgba(255, 255, 255, 0.65))}:host(.x-menu-item-dark):hover .x-menu-item-inner,:host(.x-menu-item-dark).x-menu-item-hover .x-menu-item-inner{color:var(--x-menu-item-dark-color-hover, #ffffff);background-color:var(--x-menu-item-dark-bg-hover, rgba(255, 255, 255, 0.08))}:host(.x-menu-item-dark).x-menu-item-selected .x-menu-item-inner{color:var(--x-menu-item-dark-color-selected, #ffffff);background-color:var(--x-menu-item-dark-bg-selected, var(--x-color-primary, #1677ff))}:host(.x-menu-item-dark).x-menu-item-disabled{cursor:not-allowed}:host(.x-menu-item-dark).x-menu-item-disabled .x-menu-item-inner{color:var(--x-menu-item-dark-color-disabled, rgba(255, 255, 255, 0.25));background:none}:host(.x-menu-item-dark).x-menu-item-danger .x-menu-item-inner{color:var(--x-menu-item-dark-danger-color, var(--x-color-error, #ff4d4f))}:host(.x-menu-item-dark).x-menu-item-danger:hover .x-menu-item-inner{color:var(--x-menu-item-dark-danger-color-hover, #ff7875)}:host(.x-menu-item-dark).x-menu-item-danger.x-menu-item-selected .x-menu-item-inner{color:var(--x-menu-item-dark-danger-color-selected, #ffffff);background-color:var(--x-menu-item-dark-danger-bg-selected, var(--x-color-error, #ff4d4f))}:host(.x-menu-item-collapsed){margin:0 auto var(--x-menu-item-margin-block, 4px);width:calc(100% - var(--x-menu-item-margin-inline, 4px) * 2)}:host(.x-menu-item-collapsed) .x-menu-item-inner{-ms-flex-pack:center;justify-content:center;padding:0}:host(.x-menu-item-collapsed) .x-menu-item-icon{-webkit-margin-end:0;margin-inline-end:0;font-size:var(--x-menu-icon-size, 14px)}:host(.x-menu-item-collapsed) .x-menu-item-content,:host(.x-menu-item-collapsed) .x-menu-item-extra{display:none;width:0;opacity:0;overflow:hidden}:host(.x-menu-item-collapsed-hidden){display:none !important}:host(.x-menu-item-horizontal){margin:0}:host(.x-menu-item-horizontal) .x-menu-item-inner{height:var(--x-menu-horizontal-line-height, 46px);line-height:var(--x-menu-horizontal-line-height, 46px);padding:0 var(--x-menu-item-padding-inline, 16px);border-radius:0}:host(.x-menu-item-horizontal) .x-menu-item-inner::after{content:"";position:absolute;right:var(--x-menu-item-padding-inline, 16px);bottom:0;left:var(--x-menu-item-padding-inline, 16px);border-bottom:var(--x-menu-active-bar-height, 2px) solid transparent;-webkit-transition:border-color var(--x-menu-item-motion-duration, var(--x-motion-duration-mid, 0.2s)) var(--x-menu-item-motion-ease, var(--x-motion-ease-in-out, cubic-bezier(0.645, 0.045, 0.355, 1)));transition:border-color var(--x-menu-item-motion-duration, var(--x-motion-duration-mid, 0.2s)) var(--x-menu-item-motion-ease, var(--x-motion-ease-in-out, cubic-bezier(0.645, 0.045, 0.355, 1)))}:host(.x-menu-item-horizontal).x-menu-item-light:hover .x-menu-item-inner,:host(.x-menu-item-horizontal).x-menu-item-light.x-menu-item-hover .x-menu-item-inner{background-color:transparent;color:var(--x-menu-horizontal-item-color-hover, var(--x-color-primary, #1677ff))}:host(.x-menu-item-horizontal).x-menu-item-light:hover .x-menu-item-inner::after,:host(.x-menu-item-horizontal).x-menu-item-light.x-menu-item-hover .x-menu-item-inner::after{border-bottom-color:var(--x-menu-horizontal-item-color-hover, var(--x-color-primary, #1677ff))}:host(.x-menu-item-horizontal).x-menu-item-light.x-menu-item-selected .x-menu-item-inner{background-color:transparent;color:var(--x-menu-horizontal-item-color-selected, var(--x-color-primary, #1677ff))}:host(.x-menu-item-horizontal).x-menu-item-light.x-menu-item-selected .x-menu-item-inner::after{border-bottom-color:var(--x-menu-horizontal-item-color-selected, var(--x-color-primary, #1677ff))}`;
+
+const XMenuItem = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.xMenuItemClick = createEvent(this, "xMenuItemClick", 7);
+    }
+    get el() { return getElement(this); }
+    // ========================================
+    // PROPS
+    // ========================================
+    /**
+     * Unique ID of the menu item
+     * @example
+     * <x-menu-item itemKey="home">Home</x-menu-item>
+     */
+    itemKey = '';
+    /**
+     * Display the danger style
+     * @example
+     * <x-menu-item danger>Delete</x-menu-item>
+     */
+    danger = false;
+    /**
+     * Whether menu item is disabled
+     * @example
+     * <x-menu-item disabled>Disabled</x-menu-item>
+     */
+    disabled = false;
+    /**
+     * Set display title for collapsed item
+     * @example
+     * <x-menu-item itemTitle="Dashboard">Dashboard</x-menu-item>
+     */
+    itemTitle;
+    // ========================================
+    // INTERNAL PROPS (set by parent menu)
+    // ========================================
+    /** @internal */
+    _menuMode = 'vertical';
+    /** @internal */
+    _menuTheme = 'light';
+    /** @internal */
+    _inlineCollapsed = false;
+    /** @internal */
+    _level = 0;
+    /** @internal */
+    _inlineIndent = 24;
+    /** @internal */
+    _selected = false;
+    /** @internal */
+    _keyPath = [];
+    // ========================================
+    // STATE
+    // ========================================
+    isHovered = false;
+    // ========================================
+    // EVENTS
+    // ========================================
+    /**
+     * Emitted when the menu item is clicked (internal)
+     * @example
+     * <x-menu-item onXMenuItemClick={(ev) => console.log(ev.detail)}>Item</x-menu-item>
+     */
+    xMenuItemClick;
+    // ========================================
+    // WATCHERS
+    // ========================================
+    handleSelectedChange() {
+        // Force re-render when selection changes
+    }
+    // ========================================
+    // HANDLERS
+    // ========================================
+    /**
+     * Handle click event.
+     *
+     * Flow:
+     * 1. Checks if disabled.
+     * 2. Constructs key path including self.
+     * 3. Emits `xMenuItemClick` event with key, keyPath, and original event.
+     *
+     * @param e - Mouse event.
+     */
+    handleClick = (e) => {
+        if (this.disabled) {
+            e.preventDefault();
+            e.stopPropagation();
+            return;
+        }
+        const keyPath = [...this._keyPath, this.itemKey];
+        this.xMenuItemClick.emit({
+            key: this.itemKey,
+            keyPath,
+            domEvent: e
+        });
+    };
+    handleMouseEnter = () => {
+        if (!this.disabled) {
+            this.isHovered = true;
+        }
+    };
+    handleMouseLeave = () => {
+        this.isHovered = false;
+    };
+    // ========================================
+    // RENDER
+    // ========================================
+    getInlinePadding() {
+        if (this._menuMode === 'inline' && !this._inlineCollapsed) {
+            const paddingLeft = this._level * this._inlineIndent + 16;
+            return `${paddingLeft}px`;
+        }
+        return '';
+    }
+    /**
+     * Render menu item content.
+     *
+     * Flow:
+     * 1. Calculates inline padding based on level and indent (for inline mode).
+     * 2. Determines collapsed state logic (level 0 vs nested).
+     * 3. Constructs CSS classes for state (selected, disabled, danger, hover, mode, theme).
+     * 4. Renders host element with accessibility attributes.
+     * 5. Renders inner content with icon, default slot, and extra slot.
+     *
+     * @returns JSX.Element
+     * @example
+     * <x-menu-item itemKey="settings">Settings</x-menu-item>
+     */
+    render() {
+        const paddingInlineStart = this.getInlinePadding();
+        const isCollapsedLevel0 = this._inlineCollapsed && this._level === 0;
+        const isCollapsedNested = this._inlineCollapsed && this._level > 0;
+        const classes = {
+            'x-menu-item': true,
+            'x-menu-item-selected': this._selected,
+            'x-menu-item-disabled': this.disabled,
+            'x-menu-item-danger': this.danger,
+            'x-menu-item-hover': this.isHovered,
+            'x-menu-item-collapsed': isCollapsedLevel0,
+            'x-menu-item-collapsed-hidden': isCollapsedNested,
+            [`x-menu-item-${this._menuMode}`]: true,
+            [`x-menu-item-${this._menuTheme}`]: true,
+        };
+        const style = paddingInlineStart ? { paddingInlineStart } : {};
+        return (h(Host, { key: '38c7aae0e39e2628d883438d7d3e0e8d681900e5', class: classes, role: "menuitem", tabindex: this.disabled ? -1 : 0, "aria-disabled": this.disabled ? 'true' : null, "aria-selected": this._selected ? 'true' : 'false', title: this._inlineCollapsed ? (this.itemTitle || undefined) : undefined, onClick: this.handleClick, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, h("div", { key: 'b27f3fb688f88c48fb3baa3f40d5251540798b6c', class: "x-menu-item-inner", style: style, part: "item" }, h("span", { key: '396a77ca5b7a398b27c83c2795e951ceef30cbbb', class: "x-menu-item-icon", part: "icon" }, h("slot", { key: 'f8b487dbc754c1098b204cfdb022aa727a17eba3', name: "icon" })), h("span", { key: 'e6c07cc9395b4903d66ff4ab7082cf07ee1aff8c', class: "x-menu-item-content", part: "content" }, h("slot", { key: 'edab4b78560ccca9d7d5288cf786915bf2b55cde' })), h("span", { key: 'fb72ccd1adb27052ba5205ba71e799976625e505', class: "x-menu-item-extra", part: "extra" }, h("slot", { key: '2dc6adf026655a2cd960eabcd9dd7494cc3fe522', name: "extra" })))));
+    }
+    static get watchers() { return {
+        "_selected": [{
+                "handleSelectedChange": 0
+            }]
+    }; }
+};
+XMenuItem.style = xMenuItemCss();
+
+const xResultCss = () => `@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;padding:var(--x-result-padding-vertical, var(--x-spacing-xxl, 48px)) var(--x-result-padding-horizontal, var(--x-spacing-xl, 32px));text-align:center}:host(.x-result-success) .x-result-icon{color:var(--x-result-icon-color-success, var(--x-color-success, #52c41a))}:host(.x-result-error) .x-result-icon{color:var(--x-result-icon-color-error, var(--x-color-error, #ff4d4f))}:host(.x-result-info) .x-result-icon{color:var(--x-result-icon-color-info, var(--x-color-primary, #1677ff))}:host(.x-result-warning) .x-result-icon{color:var(--x-result-icon-color-warning, var(--x-color-warning, #faad14))}:host(.x-result-403) .x-result-icon,:host(.x-result-404) .x-result-icon,:host(.x-result-500) .x-result-icon{color:var(--x-result-icon-color-image, var(--x-color-fill-content, rgba(0, 0, 0, 0.06)))}.x-result-icon{margin-bottom:var(--x-result-icon-margin-bottom, var(--x-spacing-lg, 24px));text-align:center}.x-result-icon svg{width:1em;height:1em;font-size:var(--x-result-icon-font-size, 72px)}.x-result-icon-success svg,.x-result-icon-error svg,.x-result-icon-info svg,.x-result-icon-warning svg{font-size:var(--x-result-icon-font-size, 72px)}.x-result-icon-403 svg.x-result-image,.x-result-icon-404 svg.x-result-image,.x-result-icon-500 svg.x-result-image{width:250px;height:auto}.x-result-title{color:var(--x-result-title-color, var(--x-color-text, rgba(0, 0, 0, 0.88)));font-size:var(--x-result-title-font-size, var(--x-font-size-xxl, 24px));line-height:var(--x-result-title-line-height, 1.8);font-weight:var(--x-result-title-font-weight, var(--x-font-weight-medium, 500));margin-bottom:8px;text-align:center}.x-result-subtitle{color:var(--x-result-subtitle-color, var(--x-color-text-secondary, rgba(0, 0, 0, 0.45)));font-size:var(--x-result-subtitle-font-size, var(--x-font-size-base, 14px));line-height:var(--x-result-subtitle-line-height, 1.6);text-align:center}.x-result-extra{margin:var(--x-result-extra-margin-top, var(--x-spacing-xl, 32px)) 0 0 0;text-align:center}.x-result-extra>::slotted(*){-webkit-margin-end:8px;margin-inline-end:8px}.x-result-extra>::slotted(*:last-child){-webkit-margin-end:0;margin-inline-end:0}.x-result-content{margin-top:var(--x-result-content-margin-top, var(--x-spacing-lg, 24px));padding:var(--x-result-content-padding-vertical, var(--x-spacing-lg, 24px)) var(--x-result-content-padding-horizontal, var(--x-spacing-xl, 32px));background-color:var(--x-result-content-bg, var(--x-color-fill-quaternary, rgba(0, 0, 0, 0.02)));text-align:left;border-radius:var(--x-border-radius, 6px)}`;
+
+const XResult = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    get el() { return getElement(this); }
+    // ========================================
+    // PROPS
+    // ========================================
+    /**
+     * Result status, decides icons and colors.
+     * @example
+     * <x-result status="success"></x-result>
+     */
+    status = 'info';
+    /**
+     * The title of the result.
+     * @example
+     * <x-result resultTitle="Success"></x-result>
+     */
+    resultTitle;
+    /**
+     * The subTitle of the result.
+     * @example
+     * <x-result subTitle="All done"></x-result>
+     */
+    subTitle;
+    /**
+     * Customize class for each semantic structure.
+     * @example
+     * <x-result classNames={{ title: 'my-title' }}></x-result>
+     */
+    classNames;
+    /**
+     * Customize inline style for each semantic structure.
+     * @example
+     * <x-result styles={{ title: 'color: red;' }}></x-result>
+     */
+    styles;
+    /**
+     * Customize the icon size.
+     * @example
+     * <x-result iconSize={100}></x-result>
+     */
+    iconSize = 72;
+    // ========================================
+    // PRIVATE METHODS
+    // ========================================
+    /**
+     * Renders the success icon (check-circle).
+     * @returns JSX.Element - The SVG element for success status.
+     */
+    renderSuccessIcon() {
+        return h("x-icon", { size: this.iconSize, fill: true, type: 'round', name: getIcon('success') });
+    }
+    /**
+     * Renders the error icon (close-circle).
+     * @returns JSX.Element - The SVG element for error status.
+     */
+    renderErrorIcon() {
+        return h("x-icon", { size: this.iconSize, fill: true, type: 'round', name: getIcon('error') });
+    }
+    /**
+     * Renders the info icon (exclamation-circle).
+     * @returns JSX.Element - The SVG element for info status.
+     */
+    renderInfoIcon() {
+        return h("x-icon", { size: this.iconSize, fill: true, type: 'round', name: getIcon('info') });
+    }
+    /**
+     * Renders the warning icon (warning triangle).
+     * @returns JSX.Element - The SVG element for warning status.
+     */
+    renderWarningIcon() {
+        return h("x-icon", { size: this.iconSize, fill: true, type: 'round', name: getIcon('warning') });
+    }
+    /**
+     * Renders the 403 status illustration.
+     * @returns JSX.Element - The SVG illustration for 403 Forbidden.
+     */
+    render403Icon() {
+        return (h("svg", { class: "x-result-image", viewBox: "0 0 251 294" }, h("g", { fill: "none", "fill-rule": "evenodd" }, h("path", { d: "M0 129.023v-2.084C0 58.364 55.591 2.774 124.165 2.774h2.085c68.574 0 124.165 55.59 124.165 124.165v2.084c0 68.575-55.59 124.166-124.165 124.166h-2.085C55.591 253.189 0 197.598 0 129.023", fill: "#E4EBF7" }), h("path", { d: "M41.417 132.92a8.231 8.231 0 1 1-16.38-1.65 8.231 8.231 0 0 1 16.38 1.65", fill: "#FFF" }), h("path", { d: "M37.793 128.246c-2.745.088-4.97 2.45-4.97 5.227s2.225 5.01 4.97 4.922c2.745-.088 4.97-2.45 4.97-5.227s-2.225-5.01-4.97-4.922", fill: "#FFF" }), h("path", { d: "M212.906 121.005a8.231 8.231 0 1 1-16.38-1.65 8.231 8.231 0 0 1 16.38 1.65", fill: "#FFF" }), h("path", { d: "M209.282 116.331c-2.745.088-4.97 2.45-4.97 5.227s2.225 5.01 4.97 4.922c2.745-.088 4.97-2.45 4.97-5.227s-2.225-5.01-4.97-4.922", fill: "#FFF" }), h("g", null, h("path", { d: "M125.25 110.503c8.825 0 15.975 7.15 15.975 15.975 0 8.825-7.15 15.975-15.975 15.975-8.825 0-15.975-7.15-15.975-15.975 0-8.825 7.15-15.975 15.975-15.975", fill: "#FFF" }), h("text", { fill: "#A3B1BF", "font-family": "sans-serif", "font-size": "80", "font-weight": "600", x: "70", y: "170" }, "403")))));
+    }
+    /**
+     * Renders the 404 status illustration.
+     * @returns JSX.Element - The SVG illustration for 404 Not Found.
+     */
+    render404Icon() {
+        return (h("svg", { class: "x-result-image", viewBox: "0 0 252 294" }, h("g", { fill: "none", "fill-rule": "evenodd" }, h("path", { d: "M0 129.023v-2.084C0 58.364 55.591 2.774 124.165 2.774h2.085c68.574 0 124.165 55.59 124.165 124.165v2.084c0 68.575-55.59 124.166-124.165 124.166h-2.085C55.591 253.189 0 197.598 0 129.023", fill: "#E4EBF7" }), h("path", { d: "M41.417 132.92a8.231 8.231 0 1 1-16.38-1.65 8.231 8.231 0 0 1 16.38 1.65", fill: "#FFF" }), h("path", { d: "M37.793 128.246c-2.745.088-4.97 2.45-4.97 5.227s2.225 5.01 4.97 4.922c2.745-.088 4.97-2.45 4.97-5.227s-2.225-5.01-4.97-4.922", fill: "#FFF" }), h("path", { d: "M212.906 121.005a8.231 8.231 0 1 1-16.38-1.65 8.231 8.231 0 0 1 16.38 1.65", fill: "#FFF" }), h("path", { d: "M209.282 116.331c-2.745.088-4.97 2.45-4.97 5.227s2.225 5.01 4.97 4.922c2.745-.088 4.97-2.45 4.97-5.227s-2.225-5.01-4.97-4.922", fill: "#FFF" }), h("g", null, h("path", { d: "M125.25 110.503c8.825 0 15.975 7.15 15.975 15.975 0 8.825-7.15 15.975-15.975 15.975-8.825 0-15.975-7.15-15.975-15.975 0-8.825 7.15-15.975 15.975-15.975", fill: "#FFF" }), h("text", { fill: "#A3B1BF", "font-family": "sans-serif", "font-size": "80", "font-weight": "600", x: "70", y: "170" }, "404")))));
+    }
+    /**
+     * Renders the 500 status illustration.
+     * @returns JSX.Element - The SVG illustration for 500 Server Error.
+     */
+    render500Icon() {
+        return (h("svg", { class: "x-result-image", viewBox: "0 0 254 294" }, h("g", { fill: "none", "fill-rule": "evenodd" }, h("path", { d: "M0 129.023v-2.084C0 58.364 55.591 2.774 124.165 2.774h2.085c68.574 0 124.165 55.59 124.165 124.165v2.084c0 68.575-55.59 124.166-124.165 124.166h-2.085C55.591 253.189 0 197.598 0 129.023", fill: "#E4EBF7" }), h("path", { d: "M41.417 132.92a8.231 8.231 0 1 1-16.38-1.65 8.231 8.231 0 0 1 16.38 1.65", fill: "#FFF" }), h("path", { d: "M37.793 128.246c-2.745.088-4.97 2.45-4.97 5.227s2.225 5.01 4.97 4.922c2.745-.088 4.97-2.45 4.97-5.227s-2.225-5.01-4.97-4.922", fill: "#FFF" }), h("path", { d: "M212.906 121.005a8.231 8.231 0 1 1-16.38-1.65 8.231 8.231 0 0 1 16.38 1.65", fill: "#FFF" }), h("path", { d: "M209.282 116.331c-2.745.088-4.97 2.45-4.97 5.227s2.225 5.01 4.97 4.922c2.745-.088 4.97-2.45 4.97-5.227s-2.225-5.01-4.97-4.922", fill: "#FFF" }), h("g", null, h("path", { d: "M125.25 110.503c8.825 0 15.975 7.15 15.975 15.975 0 8.825-7.15 15.975-15.975 15.975-8.825 0-15.975-7.15-15.975-15.975 0-8.825 7.15-15.975 15.975-15.975", fill: "#FFF" }), h("text", { fill: "#A3B1BF", "font-family": "sans-serif", "font-size": "80", "font-weight": "600", x: "70", y: "170" }, "500")))));
+    }
+    /**
+     * Selects and renders the appropriate icon based on the `status` prop.
+     *
+     * Flow:
+     * 1. Constructs class and style maps for the icon container.
+     * 2. Switches on `this.status` to determine which SVG/Illustration to render.
+     *    - Supports 'success', 'error', 'warning', 'info', '403', '404', '500'.
+     * 3. Wraps the icon in a div with proper classes.
+     *
+     * @returns JSX.Element - The rendered icon container.
+     */
+    renderIcon() {
+        const iconClass = {
+            'x-result-icon': true,
+            [`x-result-icon-${this.status}`]: true,
+            [this.classNames?.icon || '']: !!this.classNames?.icon,
+        };
+        const iconStyle = this.styles?.icon ? { cssText: this.styles.icon } : undefined;
+        let iconContent;
+        switch (this.status) {
+            case 'success':
+                iconContent = this.renderSuccessIcon();
+                break;
+            case 'error':
+                iconContent = this.renderErrorIcon();
+                break;
+            case 'warning':
+                iconContent = this.renderWarningIcon();
+                break;
+            case '403':
+                iconContent = this.render403Icon();
+                break;
+            case '404':
+                iconContent = this.render404Icon();
+                break;
+            case '500':
+                iconContent = this.render500Icon();
+                break;
+            case 'info':
+            default:
+                iconContent = this.renderInfoIcon();
+                break;
+        }
+        return (h("div", { class: iconClass, style: iconStyle }, h("slot", { name: "icon" }, iconContent)));
+    }
+    /**
+     * Checks if a specific slot has content assigned to it.
+     *
+     * @param slotName - The name of the slot to check.
+     * @returns boolean - True if an element with slot="slotName" exists in children.
+     */
+    hasSlotContent(slotName) {
+        return Array.from(this.el.children).some(child => child.getAttribute('slot') === slotName);
+    }
+    /**
+     * Generates the class map for the host element.
+     * Includes base class, status modifier, and custom root class.
+     *
+     * @returns Record<string, boolean> - The class map object.
+     */
+    getHostClasses() {
+        return {
+            'x-result': true,
+            [`x-result-${this.status}`]: true,
+            [this.classNames?.root || '']: !!this.classNames?.root,
+        };
+    }
+    // ========================================
+    // RENDER
+    // ========================================
+    /**
+     * Main render method for the Result component.
+     *
+     * Flow:
+     * 1. Checks for presence of title, subtitle, extra content, and main content via props or slots.
+     * 2. Renders the host element with appropriate classes and styles.
+     * 3. Renders sections in order:
+     *    - Icon/Image
+     *    - Title
+     *    - Subtitle
+     *    - Extra (Action buttons)
+     *    - Content (Main body)
+     *
+     * @returns JSX.Element
+     */
+    render() {
+        const hasTitle = this.resultTitle || this.hasSlotContent('title');
+        const hasSubTitle = this.subTitle || this.hasSlotContent('subTitle');
+        const hasExtra = this.hasSlotContent('extra');
+        const hasContent = this.hasSlotContent(null) || Array.from(this.el.childNodes).some(node => !node['slot'] && (node.nodeType === Node.ELEMENT_NODE || (node.nodeType === Node.TEXT_NODE && node.textContent?.trim())));
+        const hostStyle = this.styles?.root ? { cssText: this.styles.root } : undefined;
+        return (h(Host, { key: '815f4027d20d5cde949e983cf3b827f71a4f94e4', class: this.getHostClasses(), style: hostStyle }, this.renderIcon(), hasTitle && (h("div", { key: '46263db169a9441f28b763cb5cda7398b948076d', class: {
+                'x-result-title': true,
+                [this.classNames?.title || '']: !!this.classNames?.title,
+            }, style: this.styles?.title ? { cssText: this.styles.title } : undefined }, h("slot", { key: 'aea1e4bffbbc13385cbc5578a9eb5ed2b95489e8', name: "title" }, this.resultTitle))), hasSubTitle && (h("div", { key: 'ebe5149df5e0767d9f9c97c3c66dd78c9179b065', class: {
+                'x-result-subtitle': true,
+                [this.classNames?.subTitle || '']: !!this.classNames?.subTitle,
+            }, style: this.styles?.subTitle ? { cssText: this.styles.subTitle } : undefined }, h("slot", { key: '6d12de2cdb988925e0ae3c1f1676026c9b027f72', name: "subTitle" }, this.subTitle))), hasExtra && (h("div", { key: 'ce4880488c3d2f169f70a08c557e8c0d36920030', class: {
+                'x-result-extra': true,
+                [this.classNames?.extra || '']: !!this.classNames?.extra,
+            }, style: this.styles?.extra ? { cssText: this.styles.extra } : undefined }, h("slot", { key: 'aabf4df9d72924b0ddc23df5fad6af5cca7f2e8d', name: "extra" }))), hasContent && (h("div", { key: 'f54e568aec6abad6c31c5c3858bbd854708aa2f1', class: {
+                'x-result-content': true,
+                [this.classNames?.content || '']: !!this.classNames?.content,
+            }, style: this.styles?.content ? { cssText: this.styles.content } : undefined }, h("slot", { key: 'd47bd66d66453c5a576142ddbb1c6ad6f2036e95' })))));
+    }
+};
+XResult.style = xResultCss();
+
+const xSelectOptionCss = () => `@charset "UTF-8";:root{--x-color-primary:#1677ff;--x-color-primary-rgb:22, 119, 255;--x-color-primary-contrast:#ffffff;--x-color-primary-contrast-rgb:255, 255, 255;--x-color-primary-shade:#0958d9;--x-color-primary-tint:#4096ff;--x-color-primary-bg:#e6f4ff;--x-color-primary-bg-hover:#bae0ff;--x-color-primary-border:#91caff;--x-color-primary-border-hover:#69b1ff;--x-color-primary-hover:#4096ff;--x-color-primary-active:#0958d9;--x-color-primary-text:#1677ff;--x-color-primary-text-hover:#4096ff;--x-color-primary-text-active:#0958d9;--x-color-secondary:#3dc2ff;--x-color-secondary-rgb:61, 194, 255;--x-color-secondary-contrast:#ffffff;--x-color-secondary-contrast-rgb:255, 255, 255;--x-color-secondary-shade:#36abe0;--x-color-secondary-tint:#50c8ff;--x-color-success:#52c41a;--x-color-success-rgb:82, 196, 26;--x-color-success-contrast:#ffffff;--x-color-success-contrast-rgb:255, 255, 255;--x-color-success-shade:#389e0d;--x-color-success-tint:#73d13d;--x-color-success-bg:#f6ffed;--x-color-success-bg-hover:#d9f7be;--x-color-success-border:#b7eb8f;--x-color-success-border-hover:#95de64;--x-color-success-hover:#73d13d;--x-color-success-active:#389e0d;--x-color-success-text:#52c41a;--x-color-success-text-hover:#73d13d;--x-color-success-text-active:#389e0d;--x-color-warning:#faad14;--x-color-warning-rgb:250, 173, 20;--x-color-warning-contrast:#000000;--x-color-warning-contrast-rgb:0, 0, 0;--x-color-warning-shade:#d48806;--x-color-warning-tint:#ffc53d;--x-color-warning-bg:#fffbe6;--x-color-warning-bg-hover:#fff1b8;--x-color-warning-border:#ffe58f;--x-color-warning-border-hover:#ffd666;--x-color-warning-hover:#ffc53d;--x-color-warning-active:#d48806;--x-color-warning-text:#faad14;--x-color-warning-text-hover:#ffc53d;--x-color-warning-text-active:#d48806;--x-color-danger:#ff4d4f;--x-color-danger-rgb:255, 77, 79;--x-color-danger-contrast:#ffffff;--x-color-danger-contrast-rgb:255, 255, 255;--x-color-danger-shade:#cf1322;--x-color-danger-tint:#ff7875;--x-color-error:#ff4d4f;--x-color-error-rgb:255, 77, 79;--x-color-error-bg:#fff2f0;--x-color-error-bg-hover:#ffccc7;--x-color-error-border:#ffa39e;--x-color-error-border-hover:#ff7875;--x-color-error-hover:#ff7875;--x-color-error-active:#d9363e;--x-color-error-text:#ff4d4f;--x-color-error-text-hover:#ff7875;--x-color-error-text-active:#d9363e;--x-color-info:#1677ff;--x-color-info-rgb:22, 119, 255;--x-color-info-bg:#e6f4ff;--x-color-info-bg-hover:#bae0ff;--x-color-info-border:#91caff;--x-color-info-border-hover:#69b1ff;--x-color-info-hover:#69b1ff;--x-color-info-active:#0958d9;--x-color-info-text:#1677ff;--x-color-info-text-hover:#69b1ff;--x-color-info-text-active:#0958d9;--x-color-text:rgba(0, 0, 0, 0.88);--x-color-text-secondary:rgba(0, 0, 0, 0.65);--x-color-text-tertiary:rgba(0, 0, 0, 0.45);--x-color-text-quaternary:rgba(0, 0, 0, 0.25);--x-color-text-disabled:rgba(0, 0, 0, 0.25);--x-color-text-placeholder:rgba(0, 0, 0, 0.25);--x-color-text-heading:rgba(0, 0, 0, 0.88);--x-color-text-label:rgba(0, 0, 0, 0.65);--x-color-text-description:rgba(0, 0, 0, 0.45);--x-color-text-light-solid:#ffffff;--x-color-bg-container:#ffffff;--x-color-bg-elevated:#ffffff;--x-color-bg-layout:#f5f5f5;--x-color-bg-spotlight:rgba(0, 0, 0, 0.85);--x-color-bg-mask:rgba(0, 0, 0, 0.45);--x-color-bg-base:#ffffff;--x-color-bg-container-disabled:#f5f5f5;--x-color-bg-container-loading:rgba(255, 255, 255, 0.65);--x-color-white:#ffffff;--x-color-fill:rgba(0, 0, 0, 0.15);--x-color-fill-secondary:rgba(0, 0, 0, 0.06);--x-color-fill-tertiary:rgba(0, 0, 0, 0.04);--x-color-fill-quaternary:rgba(0, 0, 0, 0.02);--x-color-border:#d9d9d9;--x-color-border-secondary:#f0f0f0;--x-color-border-bg:#ffffff;--x-color-split:rgba(5, 5, 5, 0.06);--x-color-dark:#222428;--x-color-dark-rgb:34, 36, 40;--x-color-dark-contrast:#ffffff;--x-color-dark-contrast-rgb:255, 255, 255;--x-color-dark-shade:#1e2023;--x-color-dark-tint:#383a3e;--x-color-medium:#92949c;--x-color-medium-rgb:146, 148, 156;--x-color-medium-contrast:#ffffff;--x-color-medium-contrast-rgb:255, 255, 255;--x-color-medium-shade:#808289;--x-color-medium-tint:#9d9fa6;--x-color-light:#f4f5f8;--x-color-light-rgb:244, 245, 248;--x-color-light-contrast:#000000;--x-color-light-contrast-rgb:0, 0, 0;--x-color-light-shade:#d7d8da;--x-color-light-tint:#f5f6f9;--x-font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--x-font-family-code:"SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;--x-font-size:14px;--x-font-size-sm:12px;--x-font-size-lg:16px;--x-font-size-xl:20px;--x-font-size-heading-1:38px;--x-font-size-heading-2:30px;--x-font-size-heading-3:24px;--x-font-size-heading-4:20px;--x-font-size-heading-5:16px;--x-line-height:1.5714285714285714;--x-line-height-lg:1.5;--x-line-height-sm:1.6666666666666667;--x-line-height-heading-1:1.2105263157894737;--x-line-height-heading-2:1.2666666666666666;--x-line-height-heading-3:1.3333333333333333;--x-line-height-heading-4:1.4;--x-line-height-heading-5:1.5;--x-font-weight-normal:400;--x-font-weight-medium:500;--x-font-weight-semibold:600;--x-font-weight-strong:600;--x-font-size-base:14px;--x-font-size-xxl:24px;--x-line-height-base:1.5714285714285714;--x-spacing-xxs:4px;--x-spacing-xs:8px;--x-spacing-sm:12px;--x-spacing-md:16px;--x-spacing-lg:20px;--x-spacing-xl:24px;--x-spacing-xxl:32px;--x-spacing-xxxl:48px;--x-margin-xxs:4px;--x-margin-xs:8px;--x-margin-sm:12px;--x-margin-md:16px;--x-margin-lg:24px;--x-margin-xl:32px;--x-margin-xxl:48px;--x-padding-xxs:4px;--x-padding-xs:8px;--x-padding-sm:12px;--x-padding-md:16px;--x-padding-lg:24px;--x-padding-content-horizontal-lg:24px;--x-padding-content-vertical-lg:12px;--x-padding-content-horizontal:16px;--x-padding-content-vertical:12px;--x-padding-content-horizontal-sm:16px;--x-padding-content-vertical-sm:8px;--x-border-radius:6px;--x-border-radius-xs:2px;--x-border-radius-sm:4px;--x-border-radius-lg:8px;--x-border-radius-xl:12px;--x-border-radius-outer:4px;--x-border-radius-base:6px;--x-border-width:1px;--x-border-width-base:1px;--x-shadow:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-shadow-secondary:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-shadow-tertiary:0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02);--x-shadow-lg:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-secondary:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-tertiary:0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02);--x-box-shadow-popover-arrow:2px 2px 5px rgba(0, 0, 0, 0.05);--x-box-shadow-card:0 1px 2px -2px rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.12), 0 5px 12px 4px rgba(0, 0, 0, 0.09);--x-box-shadow-drawer-right:-6px 0 16px 0 rgba(0, 0, 0, 0.08), -3px 0 6px -4px rgba(0, 0, 0, 0.12), -9px 0 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-drawer-left:6px 0 16px 0 rgba(0, 0, 0, 0.08), 3px 0 6px -4px rgba(0, 0, 0, 0.12), 9px 0 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-drawer-up:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-drawer-down:0 -6px 16px 0 rgba(0, 0, 0, 0.08), 0 -3px 6px -4px rgba(0, 0, 0, 0.12), 0 -9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-tabs-overflow-left:inset 10px 0 8px -8px rgba(0, 0, 0, 0.08);--x-box-shadow-tabs-overflow-right:inset -10px 0 8px -8px rgba(0, 0, 0, 0.08);--x-box-shadow-tabs-overflow-top:inset 0 10px 8px -8px rgba(0, 0, 0, 0.08);--x-box-shadow-tabs-overflow-bottom:inset 0 -10px 8px -8px rgba(0, 0, 0, 0.08);--x-motion-duration-fast:0.1s;--x-motion-duration-mid:0.2s;--x-motion-duration-slow:0.3s;--x-motion-ease-in-out:cubic-bezier(0.645, 0.045, 0.355, 1);--x-motion-ease-out:cubic-bezier(0.215, 0.61, 0.355, 1);--x-motion-ease-in:cubic-bezier(0.55, 0.055, 0.675, 0.19);--x-motion-ease-out-back:cubic-bezier(0.12, 0.4, 0.29, 1.46);--x-motion-ease-in-back:cubic-bezier(0.71, -0.46, 0.88, 0.6);--x-motion-ease-in-out-circle:cubic-bezier(0.78, 0.14, 0.15, 0.86);--x-motion-ease-out-circle:cubic-bezier(0.08, 0.82, 0.17, 1);--x-motion-ease-in-circle:cubic-bezier(0.6, 0.04, 0.98, 0.34);--x-motion-ease-in-quint:cubic-bezier(0.755, 0.05, 0.855, 0.06);--x-motion-ease-out-quint:cubic-bezier(0.23, 1, 0.32, 1);--x-z-index-base:0;--x-z-index-popup-base:1000;--x-z-index-popup:1030;--x-z-index-affix:10;--x-z-index-modal:1000;--x-z-index-modal-mask:1000;--x-z-index-drawer:1000;--x-z-index-popover:1030;--x-z-index-dropdown:1050;--x-z-index-tooltip:1070;--x-z-index-notification:1080;--x-z-index-message:1090;--x-z-index-popconfirm:1060;--x-z-index-table-fixed:10;--x-opacity-loading:0.65;--x-opacity-image:1;--x-opacity-disabled:0.5;--x-control-height:32px;--x-control-height-xs:24px;--x-control-height-sm:24px;--x-control-height-lg:40px;--x-control-radio-size:16px;--x-control-checkbox-size:16px;--x-control-padding-horizontal:12px;--x-control-padding-horizontal-sm:8px;--x-control-outline-width:2px;--x-control-outline:rgba(5, 145, 255, 0.1);--x-control-item-bg-hover:rgba(0, 0, 0, 0.04);--x-control-item-bg-active:#e6f4ff;--x-control-item-bg-active-hover:#bae0ff;--x-control-item-bg-active-disabled:rgba(0, 0, 0, 0.15);--x-control-tmp-outline:rgba(0, 0, 0, 0.02);--x-color-yellow:#fadb14;--x-color-yellow-rgb:250, 219, 20;--x-font-family-base:var(--x-font-family);--x-color-link:#1677ff;--x-color-link-hover:#69b1ff;--x-color-link-active:#0958d9;--x-color-icon:rgba(0, 0, 0, 0.45);--x-color-icon-hover:rgba(0, 0, 0, 0.88);--x-color-highlight:#ff4d4f;--x-color-bg-text-hover:rgba(0, 0, 0, 0.06);--x-color-bg-text-active:rgba(0, 0, 0, 0.15);--x-screen-xs:480px;--x-screen-xs-min:480px;--x-screen-xs-max:575px;--x-screen-sm:576px;--x-screen-sm-min:576px;--x-screen-sm-max:767px;--x-screen-md:768px;--x-screen-md-min:768px;--x-screen-md-max:991px;--x-screen-lg:992px;--x-screen-lg-min:992px;--x-screen-lg-max:1199px;--x-screen-xl:1200px;--x-screen-xl-min:1200px;--x-screen-xl-max:1599px;--x-screen-xxl:1600px;--x-screen-xxl-min:1600px;--x-color-fill-content:rgba(0, 0, 0, 0.06);--x-color-fill-content-hover:rgba(0, 0, 0, 0.15);--x-color-fill-alter:rgba(0, 0, 0, 0.02);--x-scrollbar-width:12px;--x-scrollbar-track-bg:rgba(0, 0, 0, 0.04);--x-scrollbar-thumb-bg:rgba(0, 0, 0, 0.25);--x-scrollbar-thumb-bg-hover:rgba(0, 0, 0, 0.35);--x-menu-dark-bg:#001529;--x-menu-dark-item-bg:#001529;--x-menu-dark-popup-bg:#001529;--x-menu-dark-submenu-item-bg:#000c17}.x-select-option{display:block;position:relative;min-height:var(--x-select-option-min-height, var(--x-control-height, 15px));padding:var(--x-select-option-padding-block, var(--x-spacing-xs, 8px)) var(--x-select-option-padding-inline, var(--x-spacing-xs, 8px));color:var(--x-select-option-color, var(--x-color-text, rgba(0, 0, 0, 0.88)));font-weight:var(--x-select-option-font-weight, var(--x-font-weight-normal, 400));font-size:var(--x-select-option-font-size, var(--x-font-size-base, 14px));line-height:var(--x-select-option-line-height, var(--x-line-height-base, 1));cursor:pointer;-webkit-transition:background var(--x-select-option-motion-duration, var(--x-motion-duration-mid, 0.2s)) ease;transition:background var(--x-select-option-motion-duration, var(--x-motion-duration-mid, 0.2s)) ease}.x-select-option.x-select-option-active{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.x-select-option:hover,.x-select-option.x-select-option-active{background-color:var(--x-select-option-bg-hover, var(--x-color-bg-text-hover, rgba(0, 0, 0, 0.06)))}.x-select-option.x-select-option-selected{color:var(--x-select-option-color, var(--x-color-text, rgba(0, 0, 0, 0.88)));font-weight:var(--x-select-option-font-weight-selected, var(--x-font-weight-semibold, 600));background-color:var(--x-select-option-bg-selected, var(--x-color-primary-bg, #e6f4ff))}.x-select-option.x-select-option-selected:hover,.x-select-option.x-select-option-selected.x-select-option-active{background-color:var(--x-select-option-bg-selected-hover, var(--x-color-primary-bg-hover, #bae0ff))}.x-select-option.x-select-option-disabled{color:var(--x-select-option-color-disabled, var(--x-color-text-disabled, rgba(0, 0, 0, 0.25)));cursor:not-allowed;background-color:transparent}.x-select-option.x-select-option-disabled:hover,.x-select-option.x-select-option-disabled.x-select-option-active{background-color:transparent}.x-select-option-content{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex:auto;flex:auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.x-select-option-state{-ms-flex:none;flex:none;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;padding-left:var(--x-select-option-state-padding-left, var(--x-spacing-sm, 12px));color:var(--x-select-option-state-color, var(--x-color-primary, #1677ff))}`;
+
+const XSelectOption = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    get el() { return getElement(this); }
+    /**
+     * Whether the option is disabled.
+     * @example
+     * <x-select-option disabled></x-select-option>
+     */
+    disabled = false;
+    /**
+     * The value of the option.
+     * @example
+     * <x-select-option value="us"></x-select-option>
+     */
+    value;
+    /**
+     * The label of the option (used for display in the select box when selected)
+     * If not provided, will try to use the text content.
+     * @example
+     * <x-select-option label="United States"></x-select-option>
+     */
+    label;
+    /**
+     * Title attribute.
+     * @example
+     * <x-select-option optionTitle="Tooltip"></x-select-option>
+     */
+    optionTitle;
+    /**
+     * Internal: whether this option is selected.
+     */
+    selected = false;
+    /**
+     * Internal: whether this option is active (hovered/focused via keyboard).
+     */
+    active = false;
+    /**
+     * Renders the Select Option component.
+     *
+     * Flow:
+     * 1. Applies classes based on state (selected, active, disabled).
+     * 2. Sets ARIA roles for accessibility.
+     * 3. Renders the option content (projected via slot).
+     * 4. Renders a checkmark icon if the option is selected.
+     *
+     * @returns JSX.Element - The host element representing an option.
+     */
+    render() {
+        return (h(Host, { key: 'b75e12cc85f999090a9d9eb574c1b43aa6ae9efa', class: {
+                'x-select-option': true,
+                'x-select-option-selected': this.selected,
+                'x-select-option-active': this.active,
+                'x-select-option-disabled': this.disabled,
+            }, title: this.optionTitle, role: "option", "aria-selected": this.selected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false' }, h("div", { key: '3d1c1ae207aa4b141397b85bfd125f8e2f3a5f44', class: "x-select-option-content" }, h("slot", { key: 'dbce7dfb1f1191b5d5c7ef8dde91cdfecf09d835' })), this.selected && (h("div", { key: 'd21e3a536ab6cf8620e23980c7b8190c3d136d58', class: "x-select-option-state" }, h("span", { key: '7af063874895dac03505c74ad8170c2a0a1d167b', role: "img", "aria-label": "check", class: "anticon anticon-check x-select-selected-icon" }, h("svg", { key: '075e667053ece6734193ca634fa45fa7e6696789', viewBox: "64 64 896 896", focusable: "false", "data-icon": "check", width: "1em", height: "1em", fill: "currentColor", "aria-hidden": "true" }, h("path", { key: '2a3d658eb3695351173e899b62e00ba82d6d3b57', d: "M912 190h-69c-4.4 0-8 3.6-8 8v27.1c0 1.8.7 3.6 2 4.9l376 474c2.5 3.2 6.4 5 10.5 5h54c4.1 0 8-1.8 10.5-5L910 202.9c1.3-1.3 2-3.1 2-4.9V198c0-4.4-3.6-8-8-8z" }), h("path", { key: '3e90191a7ef5a60245d81217fa0b707d56d42e82', d: "M912 190h-69c-4.4 0-8 3.6-8 8v27.1c0 1.8.7 3.6 2 4.9l376 474c2.5 3.2 6.4 5 10.5 5h54c4.1 0 8-1.8 10.5-5L910 202.9c1.3-1.3 2-3.1 2-4.9V198c0-4.4-3.6-8-8-8z", opacity: "0" }), h("path", { key: '90da6aa15798242c541d003cbcaca1f0da74bed3', d: "M433.1 657.7a31.8 31.8 0 0051.7 0l206.8-271.6c6.6-8.6 3.7-21.4-5.9-24.1l-42.4-11.9c-3.4-1-7.1.2-9.3 3.1L459 554.5l-86.6-97.4c-2.2-2.5-5.8-3.5-9.1-2.5l-43 12.1c-9.6 2.7-12.5 15.5-5.9 24.1l118.7 166.9z" })))))));
+    }
+};
+XSelectOption.style = xSelectOptionCss();
+
+const xTagCss = () => `@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{-webkit-box-sizing:border-box;box-sizing:border-box;margin:0;-webkit-margin-end:var(--x-tag-margin-right, var(--x-spacing-xs, 8px));margin-inline-end:var(--x-tag-margin-right, var(--x-spacing-xs, 8px));padding:0 var(--x-tag-padding-inline, 7px);color:var(--x-tag-color, var(--x-color-text, rgba(0, 0, 0, 0.88)));font-size:var(--x-tag-font-size, var(--x-font-size-sm, 12px));font-variant:tabular-nums;line-height:var(--x-tag-line-height, 20px);list-style:none;-webkit-font-feature-settings:"tnum";font-feature-settings:"tnum";display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;height:auto;white-space:nowrap;background:var(--x-tag-bg, var(--x-color-fill-quaternary, rgba(0, 0, 0, 0.02)));border:var(--x-tag-border-width, var(--x-border-width-base, 1px)) solid var(--x-tag-border-color, var(--x-color-border, #d9d9d9));border-radius:var(--x-tag-border-radius, var(--x-border-radius-sm, 4px));opacity:1;-webkit-transition:all var(--x-tag-motion-duration, var(--x-motion-duration-mid, 0.2s));transition:all var(--x-tag-motion-duration, var(--x-motion-duration-mid, 0.2s));cursor:default;text-decoration:none}:host:focus{outline:none}:host(.x-tag-hidden){display:none}:host(.x-tag-closing){opacity:0;-webkit-transform:scale(0.8);transform:scale(0.8)}:host(.x-tag-borderless){background:var(--x-tag-borderless-bg, transparent);border-color:transparent}:host(.x-tag-disabled){cursor:not-allowed;opacity:0.65;pointer-events:none}:host(.x-tag-closable){-webkit-padding-end:calc(var(--x-tag-padding-inline, 7px) - var(--x-tag-close-padding-offset, 2px));padding-inline-end:calc(var(--x-tag-padding-inline, 7px) - var(--x-tag-close-padding-offset, 2px))}:host(.x-tag-outlined){background:transparent;border-color:var(--x-tag-border-color, var(--x-color-border, #d9d9d9))}:host(.x-tag-filled){background:var(--x-tag-bg, var(--x-color-fill-quaternary, rgba(0, 0, 0, 0.02)));border-color:transparent}:host(.x-tag-solid){background:var(--x-tag-color, var(--x-color-text, rgba(0, 0, 0, 0.88)));border-color:var(--x-tag-color, var(--x-color-text, rgba(0, 0, 0, 0.88)));color:var(--x-color-text-light-solid, #fff)}.x-tag-content{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;color:inherit;text-decoration:none}a.x-tag-content{cursor:pointer}a.x-tag-content:hover{opacity:0.85}::slotted([slot=icon]){-webkit-margin-end:var(--x-tag-icon-margin, 4px);margin-inline-end:var(--x-tag-icon-margin, 4px);font-size:inherit}.x-tag-close-icon{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;-webkit-margin-start:var(--x-tag-close-margin-left, 3px);margin-inline-start:var(--x-tag-close-margin-left, 3px);padding:0;color:var(--x-tag-close-color, var(--x-color-icon, rgba(0, 0, 0, 0.45)));font-size:var(--x-tag-close-icon-size, 10px);line-height:var(--x-tag-close-line-height, 1);cursor:pointer;border:none;background:transparent;-webkit-transition:all var(--x-tag-motion-duration, var(--x-motion-duration-mid, 0.2s));transition:all var(--x-tag-motion-duration, var(--x-motion-duration-mid, 0.2s))}.x-tag-close-icon:hover{color:var(--x-tag-close-color-hover, var(--x-color-icon-hover, rgba(0, 0, 0, 0.88)))}.x-tag-close-icon:focus{outline:none}.x-tag-close-icon svg{width:1em;height:1em;fill:currentColor}:host(.x-tag-magenta.x-tag-outlined){color:#c41d7f;background:transparent;border-color:#ffadd2}:host(.x-tag-magenta.x-tag-outlined) .x-tag-close-icon{color:#c41d7f;opacity:0.65}:host(.x-tag-magenta.x-tag-outlined) .x-tag-close-icon:hover{opacity:1}:host(.x-tag-magenta.x-tag-filled){color:#c41d7f;background:#fff0f6;border-color:transparent}:host(.x-tag-magenta.x-tag-filled) .x-tag-close-icon{color:#c41d7f;opacity:0.65}:host(.x-tag-magenta.x-tag-filled) .x-tag-close-icon:hover{opacity:1}:host(.x-tag-magenta.x-tag-solid){color:var(--x-color-text-light-solid, #fff);background:#c41d7f;border-color:#c41d7f}:host(.x-tag-magenta.x-tag-solid) .x-tag-close-icon{color:rgba(255, 255, 255, 0.75)}:host(.x-tag-magenta.x-tag-solid) .x-tag-close-icon:hover{color:#fff}:host(.x-tag-red.x-tag-outlined){color:#cf1322;background:transparent;border-color:#ffa39e}:host(.x-tag-red.x-tag-outlined) .x-tag-close-icon{color:#cf1322;opacity:0.65}:host(.x-tag-red.x-tag-outlined) .x-tag-close-icon:hover{opacity:1}:host(.x-tag-red.x-tag-filled){color:#cf1322;background:#fff1f0;border-color:transparent}:host(.x-tag-red.x-tag-filled) .x-tag-close-icon{color:#cf1322;opacity:0.65}:host(.x-tag-red.x-tag-filled) .x-tag-close-icon:hover{opacity:1}:host(.x-tag-red.x-tag-solid){color:var(--x-color-text-light-solid, #fff);background:#cf1322;border-color:#cf1322}:host(.x-tag-red.x-tag-solid) .x-tag-close-icon{color:rgba(255, 255, 255, 0.75)}:host(.x-tag-red.x-tag-solid) .x-tag-close-icon:hover{color:#fff}:host(.x-tag-volcano.x-tag-outlined){color:#d4380d;background:transparent;border-color:#ffbb96}:host(.x-tag-volcano.x-tag-outlined) .x-tag-close-icon{color:#d4380d;opacity:0.65}:host(.x-tag-volcano.x-tag-outlined) .x-tag-close-icon:hover{opacity:1}:host(.x-tag-volcano.x-tag-filled){color:#d4380d;background:#fff2e8;border-color:transparent}:host(.x-tag-volcano.x-tag-filled) .x-tag-close-icon{color:#d4380d;opacity:0.65}:host(.x-tag-volcano.x-tag-filled) .x-tag-close-icon:hover{opacity:1}:host(.x-tag-volcano.x-tag-solid){color:var(--x-color-text-light-solid, #fff);background:#d4380d;border-color:#d4380d}:host(.x-tag-volcano.x-tag-solid) .x-tag-close-icon{color:rgba(255, 255, 255, 0.75)}:host(.x-tag-volcano.x-tag-solid) .x-tag-close-icon:hover{color:#fff}:host(.x-tag-orange.x-tag-outlined){color:#d46b08;background:transparent;border-color:#ffd591}:host(.x-tag-orange.x-tag-outlined) .x-tag-close-icon{color:#d46b08;opacity:0.65}:host(.x-tag-orange.x-tag-outlined) .x-tag-close-icon:hover{opacity:1}:host(.x-tag-orange.x-tag-filled){color:#d46b08;background:#fff7e6;border-color:transparent}:host(.x-tag-orange.x-tag-filled) .x-tag-close-icon{color:#d46b08;opacity:0.65}:host(.x-tag-orange.x-tag-filled) .x-tag-close-icon:hover{opacity:1}:host(.x-tag-orange.x-tag-solid){color:var(--x-color-text-light-solid, #fff);background:#d46b08;border-color:#d46b08}:host(.x-tag-orange.x-tag-solid) .x-tag-close-icon{color:rgba(255, 255, 255, 0.75)}:host(.x-tag-orange.x-tag-solid) .x-tag-close-icon:hover{color:#fff}:host(.x-tag-gold.x-tag-outlined){color:#d48806;background:transparent;border-color:#ffe58f}:host(.x-tag-gold.x-tag-outlined) .x-tag-close-icon{color:#d48806;opacity:0.65}:host(.x-tag-gold.x-tag-outlined) .x-tag-close-icon:hover{opacity:1}:host(.x-tag-gold.x-tag-filled){color:#d48806;background:#fffbe6;border-color:transparent}:host(.x-tag-gold.x-tag-filled) .x-tag-close-icon{color:#d48806;opacity:0.65}:host(.x-tag-gold.x-tag-filled) .x-tag-close-icon:hover{opacity:1}:host(.x-tag-gold.x-tag-solid){color:var(--x-color-text-light-solid, #fff);background:#d48806;border-color:#d48806}:host(.x-tag-gold.x-tag-solid) .x-tag-close-icon{color:rgba(255, 255, 255, 0.75)}:host(.x-tag-gold.x-tag-solid) .x-tag-close-icon:hover{color:#fff}:host(.x-tag-lime.x-tag-outlined){color:#7cb305;background:transparent;border-color:#eaff8f}:host(.x-tag-lime.x-tag-outlined) .x-tag-close-icon{color:#7cb305;opacity:0.65}:host(.x-tag-lime.x-tag-outlined) .x-tag-close-icon:hover{opacity:1}:host(.x-tag-lime.x-tag-filled){color:#7cb305;background:#fcffe6;border-color:transparent}:host(.x-tag-lime.x-tag-filled) .x-tag-close-icon{color:#7cb305;opacity:0.65}:host(.x-tag-lime.x-tag-filled) .x-tag-close-icon:hover{opacity:1}:host(.x-tag-lime.x-tag-solid){color:var(--x-color-text-light-solid, #fff);background:#7cb305;border-color:#7cb305}:host(.x-tag-lime.x-tag-solid) .x-tag-close-icon{color:rgba(255, 255, 255, 0.75)}:host(.x-tag-lime.x-tag-solid) .x-tag-close-icon:hover{color:#fff}:host(.x-tag-green.x-tag-outlined){color:#389e0d;background:transparent;border-color:#b7eb8f}:host(.x-tag-green.x-tag-outlined) .x-tag-close-icon{color:#389e0d;opacity:0.65}:host(.x-tag-green.x-tag-outlined) .x-tag-close-icon:hover{opacity:1}:host(.x-tag-green.x-tag-filled){color:#389e0d;background:#f6ffed;border-color:transparent}:host(.x-tag-green.x-tag-filled) .x-tag-close-icon{color:#389e0d;opacity:0.65}:host(.x-tag-green.x-tag-filled) .x-tag-close-icon:hover{opacity:1}:host(.x-tag-green.x-tag-solid){color:var(--x-color-text-light-solid, #fff);background:#389e0d;border-color:#389e0d}:host(.x-tag-green.x-tag-solid) .x-tag-close-icon{color:rgba(255, 255, 255, 0.75)}:host(.x-tag-green.x-tag-solid) .x-tag-close-icon:hover{color:#fff}:host(.x-tag-cyan.x-tag-outlined){color:#08979c;background:transparent;border-color:#87e8de}:host(.x-tag-cyan.x-tag-outlined) .x-tag-close-icon{color:#08979c;opacity:0.65}:host(.x-tag-cyan.x-tag-outlined) .x-tag-close-icon:hover{opacity:1}:host(.x-tag-cyan.x-tag-filled){color:#08979c;background:#e6fffb;border-color:transparent}:host(.x-tag-cyan.x-tag-filled) .x-tag-close-icon{color:#08979c;opacity:0.65}:host(.x-tag-cyan.x-tag-filled) .x-tag-close-icon:hover{opacity:1}:host(.x-tag-cyan.x-tag-solid){color:var(--x-color-text-light-solid, #fff);background:#08979c;border-color:#08979c}:host(.x-tag-cyan.x-tag-solid) .x-tag-close-icon{color:rgba(255, 255, 255, 0.75)}:host(.x-tag-cyan.x-tag-solid) .x-tag-close-icon:hover{color:#fff}:host(.x-tag-blue.x-tag-outlined){color:#1677ff;background:transparent;border-color:#91caff}:host(.x-tag-blue.x-tag-outlined) .x-tag-close-icon{color:#1677ff;opacity:0.65}:host(.x-tag-blue.x-tag-outlined) .x-tag-close-icon:hover{opacity:1}:host(.x-tag-blue.x-tag-filled){color:#1677ff;background:#e6f4ff;border-color:transparent}:host(.x-tag-blue.x-tag-filled) .x-tag-close-icon{color:#1677ff;opacity:0.65}:host(.x-tag-blue.x-tag-filled) .x-tag-close-icon:hover{opacity:1}:host(.x-tag-blue.x-tag-solid){color:var(--x-color-text-light-solid, #fff);background:#1677ff;border-color:#1677ff}:host(.x-tag-blue.x-tag-solid) .x-tag-close-icon{color:rgba(255, 255, 255, 0.75)}:host(.x-tag-blue.x-tag-solid) .x-tag-close-icon:hover{color:#fff}:host(.x-tag-geekblue.x-tag-outlined){color:#1d39c4;background:transparent;border-color:#adc6ff}:host(.x-tag-geekblue.x-tag-outlined) .x-tag-close-icon{color:#1d39c4;opacity:0.65}:host(.x-tag-geekblue.x-tag-outlined) .x-tag-close-icon:hover{opacity:1}:host(.x-tag-geekblue.x-tag-filled){color:#1d39c4;background:#f0f5ff;border-color:transparent}:host(.x-tag-geekblue.x-tag-filled) .x-tag-close-icon{color:#1d39c4;opacity:0.65}:host(.x-tag-geekblue.x-tag-filled) .x-tag-close-icon:hover{opacity:1}:host(.x-tag-geekblue.x-tag-solid){color:var(--x-color-text-light-solid, #fff);background:#1d39c4;border-color:#1d39c4}:host(.x-tag-geekblue.x-tag-solid) .x-tag-close-icon{color:rgba(255, 255, 255, 0.75)}:host(.x-tag-geekblue.x-tag-solid) .x-tag-close-icon:hover{color:#fff}:host(.x-tag-purple.x-tag-outlined){color:#531dab;background:transparent;border-color:#d3adf7}:host(.x-tag-purple.x-tag-outlined) .x-tag-close-icon{color:#531dab;opacity:0.65}:host(.x-tag-purple.x-tag-outlined) .x-tag-close-icon:hover{opacity:1}:host(.x-tag-purple.x-tag-filled){color:#531dab;background:#f9f0ff;border-color:transparent}:host(.x-tag-purple.x-tag-filled) .x-tag-close-icon{color:#531dab;opacity:0.65}:host(.x-tag-purple.x-tag-filled) .x-tag-close-icon:hover{opacity:1}:host(.x-tag-purple.x-tag-solid){color:var(--x-color-text-light-solid, #fff);background:#531dab;border-color:#531dab}:host(.x-tag-purple.x-tag-solid) .x-tag-close-icon{color:rgba(255, 255, 255, 0.75)}:host(.x-tag-purple.x-tag-solid) .x-tag-close-icon:hover{color:#fff}:host(.x-tag-pink.x-tag-outlined){color:#c41d7f;background:transparent;border-color:#ffadd2}:host(.x-tag-pink.x-tag-outlined) .x-tag-close-icon{color:#c41d7f;opacity:0.65}:host(.x-tag-pink.x-tag-outlined) .x-tag-close-icon:hover{opacity:1}:host(.x-tag-pink.x-tag-filled){color:#c41d7f;background:#fff0f6;border-color:transparent}:host(.x-tag-pink.x-tag-filled) .x-tag-close-icon{color:#c41d7f;opacity:0.65}:host(.x-tag-pink.x-tag-filled) .x-tag-close-icon:hover{opacity:1}:host(.x-tag-pink.x-tag-solid){color:var(--x-color-text-light-solid, #fff);background:#c41d7f;border-color:#c41d7f}:host(.x-tag-pink.x-tag-solid) .x-tag-close-icon{color:rgba(255, 255, 255, 0.75)}:host(.x-tag-pink.x-tag-solid) .x-tag-close-icon:hover{color:#fff}:host(.x-tag-yellow.x-tag-outlined){color:#d4b106;background:transparent;border-color:#fffb8f}:host(.x-tag-yellow.x-tag-outlined) .x-tag-close-icon{color:#d4b106;opacity:0.65}:host(.x-tag-yellow.x-tag-outlined) .x-tag-close-icon:hover{opacity:1}:host(.x-tag-yellow.x-tag-filled){color:#d4b106;background:#feffe6;border-color:transparent}:host(.x-tag-yellow.x-tag-filled) .x-tag-close-icon{color:#d4b106;opacity:0.65}:host(.x-tag-yellow.x-tag-filled) .x-tag-close-icon:hover{opacity:1}:host(.x-tag-yellow.x-tag-solid){color:var(--x-color-text-light-solid, #fff);background:#d4b106;border-color:#d4b106}:host(.x-tag-yellow.x-tag-solid) .x-tag-close-icon{color:rgba(255, 255, 255, 0.75)}:host(.x-tag-yellow.x-tag-solid) .x-tag-close-icon:hover{color:#fff}:host(.x-tag-success.x-tag-outlined){color:var(--x-tag-success-color, var(--x-color-success, #52c41a));background:transparent;border-color:var(--x-tag-success-border-color, var(--x-color-success-border, #b7eb8f))}:host(.x-tag-success.x-tag-filled){color:var(--x-tag-success-color, var(--x-color-success, #52c41a));background:var(--x-tag-success-bg, var(--x-color-success-bg, #f6ffed));border-color:transparent}:host(.x-tag-success.x-tag-solid){color:var(--x-color-text-light-solid, #fff);background:var(--x-tag-success-color, var(--x-color-success, #52c41a));border-color:var(--x-tag-success-color, var(--x-color-success, #52c41a))}:host(.x-tag-processing.x-tag-outlined){color:var(--x-tag-processing-color, var(--x-color-primary, #1677ff));background:transparent;border-color:var(--x-tag-processing-border-color, var(--x-color-primary-border, #91caff))}:host(.x-tag-processing.x-tag-filled){color:var(--x-tag-processing-color, var(--x-color-primary, #1677ff));background:var(--x-tag-processing-bg, var(--x-color-primary-bg, #e6f4ff));border-color:transparent}:host(.x-tag-processing.x-tag-solid){color:var(--x-tag-processing-color, var(--x-color-primary, #1677ff));background:var(--x-tag-processing-color, var(--x-color-primary, #1677ff));border-color:var(--x-tag-processing-color, var(--x-color-primary, #1677ff))}:host(.x-tag-error.x-tag-outlined){color:var(--x-tag-error-color, var(--x-color-error, #ff4d4f));background:transparent;border-color:var(--x-tag-error-border-color, var(--x-color-error-border, #ffccc7))}:host(.x-tag-error.x-tag-filled){color:var(--x-tag-error-color, var(--x-color-error, #ff4d4f));background:var(--x-tag-error-bg, var(--x-color-error-bg, #fff2f0));border-color:transparent}:host(.x-tag-error.x-tag-solid){color:var(--x-tag-error-color, var(--x-color-error, #ff4d4f));background:var(--x-tag-error-color, var(--x-color-error, #ff4d4f));border-color:var(--x-tag-error-color, var(--x-color-error, #ff4d4f))}:host(.x-tag-warning.x-tag-outlined){color:var(--x-tag-warning-color, var(--x-color-warning, #faad14));background:transparent;border-color:var(--x-tag-warning-border-color, var(--x-color-warning-border, #ffe58f))}:host(.x-tag-warning.x-tag-filled){color:var(--x-tag-warning-color, var(--x-color-warning, #faad14));background:var(--x-tag-warning-bg, var(--x-color-warning-bg, #fffbe6));border-color:transparent}:host(.x-tag-warning.x-tag-solid){color:var(--x-tag-warning-color, var(--x-color-warning, #faad14));background:var(--x-tag-warning-color, var(--x-color-warning, #faad14));border-color:var(--x-tag-warning-color, var(--x-color-warning, #faad14))}:host(.x-tag-default){color:var(--x-tag-default-color, var(--x-color-text, rgba(0, 0, 0, 0.88)));background:var(--x-tag-default-bg, var(--x-color-fill-quaternary, rgba(0, 0, 0, 0.02)));border-color:var(--x-tag-default-border-color, var(--x-color-border, #d9d9d9))}:host(.x-tag-solid) .x-tag-close-icon{color:rgba(255, 255, 255, 0.75)}:host(.x-tag-solid) .x-tag-close-icon:hover{color:var(--x-color-text-light-solid, #fff)}`;
+
+/* eslint-disable @typescript-eslint/no-inferrable-types */
+// Preset colors list
+const PRESET_COLORS = [
+    'magenta', 'red', 'volcano', 'orange', 'gold', 'lime', 'green',
+    'cyan', 'blue', 'geekblue', 'purple', 'pink'
+];
+// Status colors
+const STATUS_COLORS = ['success', 'processing', 'error', 'warning', 'default'];
+const XTag = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.xClose = createEvent(this, "xClose", 7);
+        this.xClick = createEvent(this, "xClick", 7);
+    }
+    get el() { return getElement(this); }
+    // ========================================
+    // PROPS
+    // ========================================
+    /**
+     * Whether the Tag can be closed.
+     * @example
+     * <x-tag closable>Closable</x-tag>
+     */
+    closable = false;
+    /**
+     * Custom close icon. Set to null or false to hide close button.
+     * @example
+     * <x-tag closable closeIcon={false}></x-tag>
+     */
+    closeIcon = true;
+    /**
+     * Color of the Tag (preset color or custom hex/rgb).
+     * @example
+     * <x-tag color="magenta"></x-tag>
+     */
+    color;
+    /**
+     * Whether the Tag is disabled.
+     * @example
+     * <x-tag disabled></x-tag>
+     */
+    disabled = false;
+    /**
+     * The address to jump when clicking (renders as <a> tag).
+     * @example
+     * <x-tag href="/docs" target="_blank">Docs</x-tag>
+     */
+    href;
+    /**
+     * Target for href link.
+     * @example
+     * <x-tag href="/docs" target="_blank">Docs</x-tag>
+     */
+    target;
+    /**
+     * Whether the Tag is visible.
+     * @example
+     * <x-tag visible={false}></x-tag>
+     */
+    visible = true;
+    /**
+     * Variant style of the tag: outlined (default), filled, or solid.
+     * @example
+     * <x-tag variant="solid" color="green"></x-tag>
+     */
+    variant = 'outlined';
+    /**
+     * Whether the tag is bordered.
+     * @example
+     * <x-tag bordered={false}></x-tag>
+     */
+    bordered = true;
+    // ========================================
+    // STATE
+    // ========================================
+    /**
+     * Whether tag is in closing animation.
+     */
+    isClosing = false;
+    // ========================================
+    // EVENTS
+    // ========================================
+    /**
+     * Callback executed when tag is closed.
+     * @example
+     * <x-tag closable onXClose={(ev) => console.log(ev.detail)}></x-tag>
+     */
+    xClose;
+    /**
+     * Callback when tag is clicked.
+     * @example
+     * <x-tag onXClick={(ev) => console.log(ev.detail)}></x-tag>
+     */
+    xClick;
+    // ========================================
+    // PRIVATE METHODS
+    // ========================================
+    /**
+     * Handles the close interaction to hide the tag.
+     *
+     * Flow:
+     * 1. Stops event propagation.
+     * 2. Checks if disabled; if so, returns.
+     * 3. Emits `xClose` event with the mouse event.
+     * 4. If the event was not prevented by the consumer:
+     *    - Sets `isClosing` to true to trigger exit animation.
+     *    - Uses `setTimeout` to wait for animation to finish.
+     *    - Sets `visible` to false, removing the tag from view.
+     *
+     * @param e - The mouse event from the close button.
+     */
+    handleClose = (e) => {
+        e.stopPropagation();
+        if (this.disabled)
+            return;
+        // Emit event with original event.
+        this.xClose.emit(e);
+        // If not prevented, hide the tag after animation.
+        if (!e.defaultPrevented) {
+            this.isClosing = true;
+            // Wait for animation
+            setTimeout(() => {
+                this.visible = false;
+            }, 200);
+        }
+    };
+    /**
+     * Handles click events on the tag itself.
+     * Emits `xClick` if not disabled.
+     *
+     * @param e - The mouse event.
+     */
+    handleClick = (e) => {
+        if (this.disabled)
+            return;
+        this.xClick.emit(e);
+    };
+    /**
+     * Checks if the current color is one of the predefined preset colors.
+     * @returns {boolean} True if the color is a preset.
+     */
+    isPresetColor() {
+        return !!this.color && PRESET_COLORS.includes(this.color);
+    }
+    /**
+     * Checks if the current color is one of the predefined status colors.
+     * @returns {boolean} True if the color is a status color.
+     */
+    isStatusColor() {
+        return !!this.color && STATUS_COLORS.includes(this.color);
+    }
+    /**
+     * Checks if the current color is a custom color (e.g., hex or rgb)
+     * that is not part of the preset or status color sets.
+     * @returns {boolean} True if the color is a custom color.
+     */
+    isCustomColor() {
+        return !!this.color && !this.isPresetColor() && !this.isStatusColor();
+    }
+    /**
+     * Returns a style object for custom colors, adjusting background, border,
+     * and text colors based on the tag's variant.
+     * @returns {Object} An object with CSS property-value pairs.
+     */
+    getCustomStyle() {
+        if (!this.isCustomColor())
+            return {};
+        const style = {};
+        if (this.variant === 'solid') {
+            // Solid: dark background, white text
+            style.backgroundColor = this.color;
+            style.borderColor = this.color;
+            style.color = '#fff';
+        }
+        else if (this.variant === 'filled') {
+            // Filled: light background (we can't auto-lighten, so use same as solid)
+            style.backgroundColor = this.color;
+            style.borderColor = 'transparent';
+            style.color = '#fff';
+        }
+        else {
+            // Outlined (default): transparent bg, colored border & text
+            style.borderColor = this.color;
+            style.color = this.color;
+            style.backgroundColor = 'transparent';
+        }
+        return style;
+    }
+    // ========================================
+    // RENDER
+    // ========================================
+    /**
+     * Renders the close icon if the tag is configured to be closable.
+     * @returns {JSX.Element | null} The close icon element or null if not closable.
+     */
+    renderCloseIcon() {
+        if (!this.closable || this.closeIcon === false)
+            return null;
+        return (h("span", { class: "x-tag-close-icon", onClick: this.handleClose, role: "button", tabindex: this.disabled ? -1 : 0, "aria-label": "close" }, h("x-icon", { name: getIcon('close') })));
+    }
+    /**
+     * Calculates the CSS classes for the tag based on its properties and state.
+     * @returns {Object} An object mapping class names to boolean values.
+     */
+    getHostClasses() {
+        const isPreset = this.isPresetColor();
+        const isStatus = this.isStatusColor();
+        const isCustom = this.isCustomColor();
+        return {
+            'x-tag': true,
+            'x-tag-hidden': !this.visible,
+            'x-tag-closing': this.isClosing,
+            'x-tag-disabled': this.disabled,
+            'x-tag-borderless': !this.bordered,
+            [`x-tag-${this.variant}`]: true,
+            [`x-tag-${this.color}`]: isPreset || isStatus,
+            'x-tag-has-color': isCustom,
+            'x-tag-closable': this.closable,
+        };
+    }
+    /**
+     * Renders the Tag component.
+     *
+     * Flow:
+     * 1. Checks `visible` state; if false, renders nothing.
+     * 2. Determines tag element type: `<a>` if `href` is present, otherwise `<span>`.
+     * 3. Calculates host classes based on props (color, variant, bordered, closable).
+     * 4. Calculates custom styles for non-preset colors.
+     * 5. Renders:
+     *    - Icon slot.
+     *    - Main content wrapper (text/children).
+     *    - Close icon (if `closable` is true).
+     *
+     * @returns JSX.Element | null
+     */
+    render() {
+        if (!this.visible)
+            return null;
+        const TagElement = this.href ? 'a' : 'span';
+        const linkProps = this.href ? { href: this.href, target: this.target } : {};
+        return (h(Host, { class: this.getHostClasses(), style: this.getCustomStyle(), onClick: this.handleClick }, h("slot", { name: "icon" }), h(TagElement, { class: "x-tag-content", ...linkProps }, h("slot", null)), this.renderCloseIcon()));
+    }
+};
+XTag.style = xTagCss();
+
+const xTextareaCss = () => `@charset "UTF-8";:root{--x-color-primary:#1677ff;--x-color-primary-rgb:22, 119, 255;--x-color-primary-contrast:#ffffff;--x-color-primary-contrast-rgb:255, 255, 255;--x-color-primary-shade:#0958d9;--x-color-primary-tint:#4096ff;--x-color-primary-bg:#e6f4ff;--x-color-primary-bg-hover:#bae0ff;--x-color-primary-border:#91caff;--x-color-primary-border-hover:#69b1ff;--x-color-primary-hover:#4096ff;--x-color-primary-active:#0958d9;--x-color-primary-text:#1677ff;--x-color-primary-text-hover:#4096ff;--x-color-primary-text-active:#0958d9;--x-color-secondary:#3dc2ff;--x-color-secondary-rgb:61, 194, 255;--x-color-secondary-contrast:#ffffff;--x-color-secondary-contrast-rgb:255, 255, 255;--x-color-secondary-shade:#36abe0;--x-color-secondary-tint:#50c8ff;--x-color-success:#52c41a;--x-color-success-rgb:82, 196, 26;--x-color-success-contrast:#ffffff;--x-color-success-contrast-rgb:255, 255, 255;--x-color-success-shade:#389e0d;--x-color-success-tint:#73d13d;--x-color-success-bg:#f6ffed;--x-color-success-bg-hover:#d9f7be;--x-color-success-border:#b7eb8f;--x-color-success-border-hover:#95de64;--x-color-success-hover:#73d13d;--x-color-success-active:#389e0d;--x-color-success-text:#52c41a;--x-color-success-text-hover:#73d13d;--x-color-success-text-active:#389e0d;--x-color-warning:#faad14;--x-color-warning-rgb:250, 173, 20;--x-color-warning-contrast:#000000;--x-color-warning-contrast-rgb:0, 0, 0;--x-color-warning-shade:#d48806;--x-color-warning-tint:#ffc53d;--x-color-warning-bg:#fffbe6;--x-color-warning-bg-hover:#fff1b8;--x-color-warning-border:#ffe58f;--x-color-warning-border-hover:#ffd666;--x-color-warning-hover:#ffc53d;--x-color-warning-active:#d48806;--x-color-warning-text:#faad14;--x-color-warning-text-hover:#ffc53d;--x-color-warning-text-active:#d48806;--x-color-danger:#ff4d4f;--x-color-danger-rgb:255, 77, 79;--x-color-danger-contrast:#ffffff;--x-color-danger-contrast-rgb:255, 255, 255;--x-color-danger-shade:#cf1322;--x-color-danger-tint:#ff7875;--x-color-error:#ff4d4f;--x-color-error-rgb:255, 77, 79;--x-color-error-bg:#fff2f0;--x-color-error-bg-hover:#ffccc7;--x-color-error-border:#ffa39e;--x-color-error-border-hover:#ff7875;--x-color-error-hover:#ff7875;--x-color-error-active:#d9363e;--x-color-error-text:#ff4d4f;--x-color-error-text-hover:#ff7875;--x-color-error-text-active:#d9363e;--x-color-info:#1677ff;--x-color-info-rgb:22, 119, 255;--x-color-info-bg:#e6f4ff;--x-color-info-bg-hover:#bae0ff;--x-color-info-border:#91caff;--x-color-info-border-hover:#69b1ff;--x-color-info-hover:#69b1ff;--x-color-info-active:#0958d9;--x-color-info-text:#1677ff;--x-color-info-text-hover:#69b1ff;--x-color-info-text-active:#0958d9;--x-color-text:rgba(0, 0, 0, 0.88);--x-color-text-secondary:rgba(0, 0, 0, 0.65);--x-color-text-tertiary:rgba(0, 0, 0, 0.45);--x-color-text-quaternary:rgba(0, 0, 0, 0.25);--x-color-text-disabled:rgba(0, 0, 0, 0.25);--x-color-text-placeholder:rgba(0, 0, 0, 0.25);--x-color-text-heading:rgba(0, 0, 0, 0.88);--x-color-text-label:rgba(0, 0, 0, 0.65);--x-color-text-description:rgba(0, 0, 0, 0.45);--x-color-text-light-solid:#ffffff;--x-color-bg-container:#ffffff;--x-color-bg-elevated:#ffffff;--x-color-bg-layout:#f5f5f5;--x-color-bg-spotlight:rgba(0, 0, 0, 0.85);--x-color-bg-mask:rgba(0, 0, 0, 0.45);--x-color-bg-base:#ffffff;--x-color-bg-container-disabled:#f5f5f5;--x-color-bg-container-loading:rgba(255, 255, 255, 0.65);--x-color-white:#ffffff;--x-color-fill:rgba(0, 0, 0, 0.15);--x-color-fill-secondary:rgba(0, 0, 0, 0.06);--x-color-fill-tertiary:rgba(0, 0, 0, 0.04);--x-color-fill-quaternary:rgba(0, 0, 0, 0.02);--x-color-border:#d9d9d9;--x-color-border-secondary:#f0f0f0;--x-color-border-bg:#ffffff;--x-color-split:rgba(5, 5, 5, 0.06);--x-color-dark:#222428;--x-color-dark-rgb:34, 36, 40;--x-color-dark-contrast:#ffffff;--x-color-dark-contrast-rgb:255, 255, 255;--x-color-dark-shade:#1e2023;--x-color-dark-tint:#383a3e;--x-color-medium:#92949c;--x-color-medium-rgb:146, 148, 156;--x-color-medium-contrast:#ffffff;--x-color-medium-contrast-rgb:255, 255, 255;--x-color-medium-shade:#808289;--x-color-medium-tint:#9d9fa6;--x-color-light:#f4f5f8;--x-color-light-rgb:244, 245, 248;--x-color-light-contrast:#000000;--x-color-light-contrast-rgb:0, 0, 0;--x-color-light-shade:#d7d8da;--x-color-light-tint:#f5f6f9;--x-font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--x-font-family-code:"SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;--x-font-size:14px;--x-font-size-sm:12px;--x-font-size-lg:16px;--x-font-size-xl:20px;--x-font-size-heading-1:38px;--x-font-size-heading-2:30px;--x-font-size-heading-3:24px;--x-font-size-heading-4:20px;--x-font-size-heading-5:16px;--x-line-height:1.5714285714285714;--x-line-height-lg:1.5;--x-line-height-sm:1.6666666666666667;--x-line-height-heading-1:1.2105263157894737;--x-line-height-heading-2:1.2666666666666666;--x-line-height-heading-3:1.3333333333333333;--x-line-height-heading-4:1.4;--x-line-height-heading-5:1.5;--x-font-weight-normal:400;--x-font-weight-medium:500;--x-font-weight-semibold:600;--x-font-weight-strong:600;--x-font-size-base:14px;--x-font-size-xxl:24px;--x-line-height-base:1.5714285714285714;--x-spacing-xxs:4px;--x-spacing-xs:8px;--x-spacing-sm:12px;--x-spacing-md:16px;--x-spacing-lg:20px;--x-spacing-xl:24px;--x-spacing-xxl:32px;--x-spacing-xxxl:48px;--x-margin-xxs:4px;--x-margin-xs:8px;--x-margin-sm:12px;--x-margin-md:16px;--x-margin-lg:24px;--x-margin-xl:32px;--x-margin-xxl:48px;--x-padding-xxs:4px;--x-padding-xs:8px;--x-padding-sm:12px;--x-padding-md:16px;--x-padding-lg:24px;--x-padding-content-horizontal-lg:24px;--x-padding-content-vertical-lg:12px;--x-padding-content-horizontal:16px;--x-padding-content-vertical:12px;--x-padding-content-horizontal-sm:16px;--x-padding-content-vertical-sm:8px;--x-border-radius:6px;--x-border-radius-xs:2px;--x-border-radius-sm:4px;--x-border-radius-lg:8px;--x-border-radius-xl:12px;--x-border-radius-outer:4px;--x-border-radius-base:6px;--x-border-width:1px;--x-border-width-base:1px;--x-shadow:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-shadow-secondary:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-shadow-tertiary:0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02);--x-shadow-lg:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-secondary:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-tertiary:0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02);--x-box-shadow-popover-arrow:2px 2px 5px rgba(0, 0, 0, 0.05);--x-box-shadow-card:0 1px 2px -2px rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.12), 0 5px 12px 4px rgba(0, 0, 0, 0.09);--x-box-shadow-drawer-right:-6px 0 16px 0 rgba(0, 0, 0, 0.08), -3px 0 6px -4px rgba(0, 0, 0, 0.12), -9px 0 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-drawer-left:6px 0 16px 0 rgba(0, 0, 0, 0.08), 3px 0 6px -4px rgba(0, 0, 0, 0.12), 9px 0 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-drawer-up:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-drawer-down:0 -6px 16px 0 rgba(0, 0, 0, 0.08), 0 -3px 6px -4px rgba(0, 0, 0, 0.12), 0 -9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-tabs-overflow-left:inset 10px 0 8px -8px rgba(0, 0, 0, 0.08);--x-box-shadow-tabs-overflow-right:inset -10px 0 8px -8px rgba(0, 0, 0, 0.08);--x-box-shadow-tabs-overflow-top:inset 0 10px 8px -8px rgba(0, 0, 0, 0.08);--x-box-shadow-tabs-overflow-bottom:inset 0 -10px 8px -8px rgba(0, 0, 0, 0.08);--x-motion-duration-fast:0.1s;--x-motion-duration-mid:0.2s;--x-motion-duration-slow:0.3s;--x-motion-ease-in-out:cubic-bezier(0.645, 0.045, 0.355, 1);--x-motion-ease-out:cubic-bezier(0.215, 0.61, 0.355, 1);--x-motion-ease-in:cubic-bezier(0.55, 0.055, 0.675, 0.19);--x-motion-ease-out-back:cubic-bezier(0.12, 0.4, 0.29, 1.46);--x-motion-ease-in-back:cubic-bezier(0.71, -0.46, 0.88, 0.6);--x-motion-ease-in-out-circle:cubic-bezier(0.78, 0.14, 0.15, 0.86);--x-motion-ease-out-circle:cubic-bezier(0.08, 0.82, 0.17, 1);--x-motion-ease-in-circle:cubic-bezier(0.6, 0.04, 0.98, 0.34);--x-motion-ease-in-quint:cubic-bezier(0.755, 0.05, 0.855, 0.06);--x-motion-ease-out-quint:cubic-bezier(0.23, 1, 0.32, 1);--x-z-index-base:0;--x-z-index-popup-base:1000;--x-z-index-popup:1030;--x-z-index-affix:10;--x-z-index-modal:1000;--x-z-index-modal-mask:1000;--x-z-index-drawer:1000;--x-z-index-popover:1030;--x-z-index-dropdown:1050;--x-z-index-tooltip:1070;--x-z-index-notification:1080;--x-z-index-message:1090;--x-z-index-popconfirm:1060;--x-z-index-table-fixed:10;--x-opacity-loading:0.65;--x-opacity-image:1;--x-opacity-disabled:0.5;--x-control-height:32px;--x-control-height-xs:24px;--x-control-height-sm:24px;--x-control-height-lg:40px;--x-control-radio-size:16px;--x-control-checkbox-size:16px;--x-control-padding-horizontal:12px;--x-control-padding-horizontal-sm:8px;--x-control-outline-width:2px;--x-control-outline:rgba(5, 145, 255, 0.1);--x-control-item-bg-hover:rgba(0, 0, 0, 0.04);--x-control-item-bg-active:#e6f4ff;--x-control-item-bg-active-hover:#bae0ff;--x-control-item-bg-active-disabled:rgba(0, 0, 0, 0.15);--x-control-tmp-outline:rgba(0, 0, 0, 0.02);--x-color-yellow:#fadb14;--x-color-yellow-rgb:250, 219, 20;--x-font-family-base:var(--x-font-family);--x-color-link:#1677ff;--x-color-link-hover:#69b1ff;--x-color-link-active:#0958d9;--x-color-icon:rgba(0, 0, 0, 0.45);--x-color-icon-hover:rgba(0, 0, 0, 0.88);--x-color-highlight:#ff4d4f;--x-color-bg-text-hover:rgba(0, 0, 0, 0.06);--x-color-bg-text-active:rgba(0, 0, 0, 0.15);--x-screen-xs:480px;--x-screen-xs-min:480px;--x-screen-xs-max:575px;--x-screen-sm:576px;--x-screen-sm-min:576px;--x-screen-sm-max:767px;--x-screen-md:768px;--x-screen-md-min:768px;--x-screen-md-max:991px;--x-screen-lg:992px;--x-screen-lg-min:992px;--x-screen-lg-max:1199px;--x-screen-xl:1200px;--x-screen-xl-min:1200px;--x-screen-xl-max:1599px;--x-screen-xxl:1600px;--x-screen-xxl-min:1600px;--x-color-fill-content:rgba(0, 0, 0, 0.06);--x-color-fill-content-hover:rgba(0, 0, 0, 0.15);--x-color-fill-alter:rgba(0, 0, 0, 0.02);--x-scrollbar-width:12px;--x-scrollbar-track-bg:rgba(0, 0, 0, 0.04);--x-scrollbar-thumb-bg:rgba(0, 0, 0, 0.25);--x-scrollbar-thumb-bg-hover:rgba(0, 0, 0, 0.35);--x-menu-dark-bg:#001529;--x-menu-dark-item-bg:#001529;--x-menu-dark-popup-bg:#001529;--x-menu-dark-submenu-item-bg:#000c17}:host{display:inline-block;width:100%;position:relative;font-family:inherit;vertical-align:bottom}.x-textarea{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-textarea:hover:not(.disabled):not([disabled]):not([class*=-disabled]){border-color:var(--x-control-border-color-hover, var(--x-color-primary-hover, #4096ff))}.x-textarea.focused:not(.disabled):not([disabled]):not([class*=-disabled]),.x-textarea: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-textarea.disabled,.x-textarea[disabled],.x-textarea[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-textarea.disabled:hover,.x-textarea[disabled]:hover,.x-textarea[class*=-disabled]:hover{border-color:var(--x-control-border-color-disabled, var(--x-color-border, #d9d9d9)) !important}.x-textarea{display:block;padding:var(--x-textarea-padding-vertical, var(--x-spacing-xxs, 4px)) var(--x-textarea-padding-horizontal, var(--x-spacing-md, 12px));line-height:var(--x-textarea-line-height, var(--x-control-line-height, var(--x-line-height-base, 1.5714285714)));min-height:auto;resize:vertical}.x-textarea::-webkit-input-placeholder{color:var(--x-textarea-placeholder-color, var(--x-control-placeholder-color, var(--x-color-text-placeholder, rgba(0, 0, 0, 0.25))))}.x-textarea::-moz-placeholder{color:var(--x-textarea-placeholder-color, var(--x-control-placeholder-color, var(--x-color-text-placeholder, rgba(0, 0, 0, 0.25))))}.x-textarea:-ms-input-placeholder{color:var(--x-textarea-placeholder-color, var(--x-control-placeholder-color, var(--x-color-text-placeholder, rgba(0, 0, 0, 0.25))))}.x-textarea::-ms-input-placeholder{color:var(--x-textarea-placeholder-color, var(--x-control-placeholder-color, var(--x-color-text-placeholder, rgba(0, 0, 0, 0.25))))}.x-textarea::placeholder{color:var(--x-textarea-placeholder-color, var(--x-control-placeholder-color, var(--x-color-text-placeholder, rgba(0, 0, 0, 0.25))))}:host(.x-textarea-wrapper-error) .x-textarea{border-color:var(--x-control-border-color-error, var(--x-color-error, #ff4d4f))}:host(.x-textarea-wrapper-error) .x-textarea:hover:not(.disabled):not([disabled]){border-color:var(--x-control-border-color-error-hover, var(--x-color-error-hover, #ff7875))}:host(.x-textarea-wrapper-error) .x-textarea.focused,:host(.x-textarea-wrapper-error) .x-textarea:focus-within{border-color:var(--x-control-border-color-error, var(--x-color-error, #ff4d4f));-webkit-box-shadow:0 0 0 3px var(--x-control-focus-shadow-error-color, var(--x-color-error-bg, rgba(255, 38, 5, 0.06)));box-shadow:0 0 0 3px var(--x-control-focus-shadow-error-color, var(--x-color-error-bg, rgba(255, 38, 5, 0.06)))}:host(.x-textarea-wrapper-warning) .x-textarea{border-color:var(--x-control-border-color-warning, var(--x-color-warning, #faad14))}:host(.x-textarea-wrapper-warning) .x-textarea:hover:not(.disabled):not([disabled]){border-color:var(--x-control-border-color-warning-hover, var(--x-color-warning-hover, #ffc53d))}:host(.x-textarea-wrapper-warning) .x-textarea.focused,:host(.x-textarea-wrapper-warning) .x-textarea:focus-within{border-color:var(--x-control-border-color-warning, var(--x-color-warning, #faad14));-webkit-box-shadow:0 0 0 3px var(--x-control-focus-shadow-warning-color, var(--x-color-warning-bg, rgba(255, 215, 5, 0.1)));box-shadow:0 0 0 3px var(--x-control-focus-shadow-warning-color, var(--x-color-warning-bg, rgba(255, 215, 5, 0.1)))}:host(.x-textarea-wrapper-borderless) .x-textarea{background-color:transparent;border-color:transparent;-webkit-box-shadow:none;box-shadow:none}:host(.x-textarea-wrapper-borderless) .x-textarea:hover{border-color:transparent}:host(.x-textarea-wrapper-borderless) .x-textarea.focused,:host(.x-textarea-wrapper-borderless) .x-textarea:focus-within{border-color:transparent;-webkit-box-shadow:none;box-shadow:none}:host(.x-textarea-wrapper-borderless) .x-textarea{padding:0}.x-textarea-clear-icon{position:absolute;top:var(--x-textarea-padding-vertical, var(--x-spacing-xxs, 4px));right:var(--x-textarea-padding-vertical, var(--x-spacing-xxs, 4px));z-index:1;color:var(--x-textarea-clear-icon-color, var(--x-color-text-quaternary, rgba(0, 0, 0, 0.25)));font-size:var(--x-textarea-clear-icon-size, var(--x-font-size-sm, 12px));cursor:pointer;-webkit-transition:color var(--x-textarea-motion-duration-mid, var(--x-motion-duration-mid, 0.2s));transition:color var(--x-textarea-motion-duration-mid, var(--x-motion-duration-mid, 0.2s));background:var(--x-textarea-bg, var(--x-control-bg, var(--x-color-bg-container, #ffffff)))}.x-textarea-clear-icon:hover{color:var(--x-textarea-clear-icon-color-hover, var(--x-color-text-secondary, rgba(0, 0, 0, 0.45)))}:host(.x-textarea-show-count) .x-textarea{padding-bottom:var(--x-textarea-padding-bottom-count, var(--x-spacing-xl, 20px))}.x-textarea-data-count{position:absolute;bottom:var(--x-textarea-padding-vertical, var(--x-spacing-xxs, 4px));right:var(--x-textarea-padding-horizontal, var(--x-spacing-md, 12px));color:var(--x-textarea-count-color, var(--x-color-text-secondary, rgba(0, 0, 0, 0.45)));font-size:var(--x-textarea-count-font-size, var(--x-font-size-sm, 12px));white-space:nowrap;pointer-events:none}`;
+
+const XTextarea = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.xChange = createEvent(this, "xChange", 7);
+        this.xInput = createEvent(this, "xInput", 7);
+        this.xPressEnter = createEvent(this, "xPressEnter", 7);
+        this.xResize = createEvent(this, "xResize", 7);
+    }
+    get el() { return getElement(this); }
+    /**
+     * If allow to remove input content with clear icon
+     * @example
+     * <x-textarea allowClear></x-textarea>
+     */
+    allowClear = false;
+    /**
+     * Height autosize feature, can be set to true | false or an object { minRows: 2, maxRows: 6 }
+     * @example
+     * <x-textarea autoSize={{ minRows: 2, maxRows: 6 }}></x-textarea>
+     */
+    autoSize = false;
+    /**
+     * Whether has border style
+     * @example
+     * <x-textarea bordered={false}></x-textarea>
+     */
+    bordered = true;
+    /**
+     * The initial input content
+     * @example
+     * <x-textarea defaultValue="hello"></x-textarea>
+     */
+    defaultValue = '';
+    /**
+     * Whether the input is disabled
+     * @example
+     * <x-textarea disabled></x-textarea>
+     */
+    disabled = false;
+    /**
+     * The max length
+     * @example
+     * <x-textarea maxLength={200}></x-textarea>
+     */
+    maxLength;
+    /**
+     * Whether show text count
+     * @example
+     * <x-textarea showCount></x-textarea>
+     */
+    showCount = false;
+    /**
+     * Set validation status
+     * @example
+     * <x-textarea status="error"></x-textarea>
+     */
+    status;
+    /**
+     * The input content
+     * @example
+     * <x-textarea value="demo"></x-textarea>
+     */
+    value;
+    /**
+     * Placeholder
+     * @example
+     * <x-textarea placeholder="Type here"></x-textarea>
+     */
+    placeholder;
+    /**
+     * Rows
+     * @example
+     * <x-textarea rows={4}></x-textarea>
+     */
+    rows = 2;
+    /**
+     * Focus state.
+     */
+    focused = false;
+    /**
+     * Emitted when value changes.
+     * @example
+     * <x-textarea onXChange={(ev) => console.log(ev.detail)}></x-textarea>
+     */
+    xChange;
+    /**
+     * Emitted on input.
+     * @example
+     * <x-textarea onXInput={(ev) => console.log(ev.detail)}></x-textarea>
+     */
+    xInput;
+    /**
+     * Emitted when pressing Enter.
+     * @example
+     * <x-textarea onXPressEnter={(ev) => console.log(ev.key)}></x-textarea>
+     */
+    xPressEnter;
+    /**
+     * Emitted when textarea resizes.
+     * @example
+     * <x-textarea onXResize={(ev) => console.log(ev.detail)}></x-textarea>
+     */
+    xResize;
+    /**
+     * Component lifecycle method called before loading.
+     * Initializes the internal value from `defaultValue` if `value` is undefined.
+     */
+    componentWillLoad() {
+        if (this.value === undefined) {
+            this.value = this.defaultValue;
+        }
+    }
+    /**
+     * Handles input events from the textarea element.
+     *
+     * Flow:
+     * 1. Updates the internal `value` state with the new input value.
+     * 2. Emits `xInput` event with the native input event.
+     * 3. Emits `xChange` event with the new string value.
+     * 4. If `autoSize` is enabled, triggers resize logic.
+     *
+     * @param e - The input event.
+     */
+    handleInput(e) {
+        const target = e.target;
+        this.value = target.value;
+        this.xInput.emit(e);
+        this.xChange.emit(this.value);
+        if (this.autoSize) {
+            this.resizeTextarea(target);
+        }
+    }
+    /**
+     * Resizes the textarea based on its content height.
+     *
+     * Flow:
+     * 1. Temporarily resets height to 'auto' to correctly measure `scrollHeight`.
+     * 2. Sets the height to `scrollHeight` to fit content.
+     * 3. (Note: Full implementation would respect `minRows` and `maxRows` constraints here).
+     *
+     * @param target - The textarea element to resize.
+     */
+    resizeTextarea(target) {
+        target.style.height = 'auto';
+        target.style.height = `${target.scrollHeight}px`;
+        // Logic for minRows/maxRows would go here
+    }
+    /**
+     * Handles keydown events.
+     * Emits `xPressEnter` when the Enter key is pressed.
+     *
+     * @param e - The keyboard event.
+     */
+    handleKeyDown(e) {
+        if (e.key === 'Enter') {
+            this.xPressEnter.emit(e);
+        }
+    }
+    /**
+     * Handles click on the clear icon.
+     *
+     * Flow:
+     * 1. Stops event propagation to avoid triggering parent clicks.
+     * 2. Resets `value` to an empty string.
+     * 3. Emits `xChange` with empty string.
+     *
+     * @param e - The mouse event.
+     */
+    handleClear(e) {
+        e.stopPropagation();
+        this.value = '';
+        this.xChange.emit('');
+    }
+    /**
+     * Renders the Textarea component.
+     *
+     * Flow:
+     * 1. Constructs wrapper classes based on state (disabled, focused, status, bordered).
+     * 2. Renders the native `<textarea>` element with bound props and event listeners.
+     * 3. Renders the clear icon if `allowClear` is true and value exists.
+     * 4. Renders the character count if `showCount` is true.
+     *
+     * @returns JSX.Element
+     */
+    render() {
+        return (h(Host, { key: '7336e2d3945d33f7a4ee8d18966d49c7dffff769', class: {
+                'x-textarea-wrapper': true,
+                'x-textarea-wrapper-disabled': this.disabled,
+                'x-textarea-wrapper-focused': this.focused,
+                'x-textarea-wrapper-error': this.status === 'error',
+                'x-textarea-wrapper-warning': this.status === 'warning',
+                'x-textarea-wrapper-borderless': !this.bordered,
+                'x-textarea-show-count': this.showCount,
+            } }, h("textarea", { key: '662c51000b0f313ebba4cefe5249a32a6e4225a4', class: {
+                'x-textarea': true,
+                'disabled': this.disabled,
+            }, disabled: this.disabled, maxLength: this.maxLength, value: this.value, placeholder: this.placeholder, rows: this.rows, onInput: (e) => this.handleInput(e), onKeyDown: (e) => this.handleKeyDown(e), onFocus: () => this.focused = true, onBlur: () => this.focused = false }), this.allowClear && this.value && (h("span", { key: '03d488cc303a172cffd64fe85f653f0f8a2620b7', class: "x-textarea-clear-icon", onClick: (e) => this.handleClear(e) }, h("span", { key: '88a02fb55371f35bc0a45159aee3bd324d706f7c', role: "img", "aria-label": "close-circle", class: "anticon anticon-close-circle" }, h("x-icon", { key: '976c1ef0428afb40a70fde38446d52952b37d57c', name: getIcon('clear') })))), this.showCount && (h("span", { key: '07e2ff90d325eba478d87f24305032194417c64c', class: "x-textarea-data-count", "data-count": `${this.value ? this.value.length : 0}${this.maxLength ? ` / ${this.maxLength}` : ''}` }, this.value ? this.value.length : 0, this.maxLength ? ` / ${this.maxLength}` : ''))));
+    }
+};
+XTextarea.style = xTextareaCss();
+
+class FlowService {
+    nodes = [];
+    edges = [];
+    viewport = { x: 0, y: 0, zoom: 1 };
+    selectedNodeIds = [];
+    selectedEdgeIds = [];
+    nodeValues = {};
+    clipboardNodes = [];
+    clipboardEdges = [];
+    history = [];
+    historyIndex = -1;
+    listeners = [];
+    constructor(initialNodes = [], initialEdges = []) {
+        this.nodes = initialNodes;
+        this.edges = initialEdges;
+        this.saveToHistory();
+    }
+    subscribe(listener) {
+        this.listeners.push(listener);
+        return () => {
+            this.listeners = this.listeners.filter(l => l !== listener);
+        };
+    }
+    notify() {
+        this.listeners.forEach(l => l());
+    }
+    forceLayout() {
+        // Basic force layout implementation or trigger
+        this.notify();
+    }
+    saveToHistory() {
+        const last = this.history[this.historyIndex];
+        if (last && JSON.stringify(last.nodes) === JSON.stringify(this.nodes) && JSON.stringify(last.edges) === JSON.stringify(this.edges))
+            return;
+        this.history = this.history.slice(0, this.historyIndex + 1);
+        this.history.push({ nodes: JSON.parse(JSON.stringify(this.nodes)), edges: JSON.parse(JSON.stringify(this.edges)) });
+        this.historyIndex = this.history.length - 1;
+        if (this.history.length > 50) {
+            this.history.shift();
+            this.historyIndex--;
+        }
+    }
+    undo() {
+        if (this.historyIndex > 0) {
+            this.historyIndex--;
+            const snapshot = this.history[this.historyIndex];
+            this.nodes = JSON.parse(JSON.stringify(snapshot.nodes));
+            this.edges = JSON.parse(JSON.stringify(snapshot.edges));
+            this.notify();
+        }
+    }
+    redo() {
+        if (this.historyIndex < this.history.length - 1) {
+            this.historyIndex++;
+            const snapshot = this.history[this.historyIndex];
+            this.nodes = JSON.parse(JSON.stringify(snapshot.nodes));
+            this.edges = JSON.parse(JSON.stringify(snapshot.edges));
+            this.notify();
+        }
+    }
+    getNodes() { return this.nodes.filter(n => this.isNodeVisible(n.id)); }
+    isNodeVisible(nodeId) {
+        const node = this.nodes.find(n => n.id === nodeId);
+        if (!node)
+            return false;
+        if (node.hidden)
+            return false;
+        let parent = this.nodes.find(n => n.id === node.parentId);
+        while (parent) {
+            if (parent.isCollapsed)
+                return false;
+            parent = this.nodes.find(n => n.id === parent.parentId);
+        }
+        return true;
+    }
+    getEdges() { return this.edges.filter(e => this.isNodeVisible(e.source) && this.isNodeVisible(e.target)); }
+    getViewport() { return this.viewport; }
+    getSelectedNodes() { return this.selectedNodeIds; }
+    getSelectedEdges() { return this.selectedEdgeIds; }
+    setNodes(nodes) {
+        // Preserve width and height if not provided in the new array, keeping the service as the source of truth for these
+        this.nodes = nodes.map(newNode => {
+            const existingNode = this.nodes.find(n => n.id === newNode.id);
+            if (existingNode) {
+                return {
+                    ...newNode,
+                    width: newNode.width || existingNode.width,
+                    height: newNode.height || existingNode.height,
+                    shape: newNode.shape || existingNode.shape
+                };
+            }
+            return newNode;
+        });
+        this.notify();
+    }
+    setEdges(edges) { this.edges = edges; this.notify(); }
+    setViewport(viewport) { this.viewport = viewport; this.notify(); }
+    updateNodeValue(nodeId, value) { this.nodeValues[nodeId] = value; this.propagate(nodeId); this.notify(); }
+    propagate(nodeId) {
+        const value = this.nodeValues[nodeId];
+        this.edges.filter(e => e.source === nodeId).forEach(edge => {
+            if (this.nodes.find(n => n.id === edge.target))
+                console.log(`Propagating from ${nodeId} to ${edge.target}:`, value);
+        });
+    }
+    addNode(node) { this.nodes = [...this.nodes, node]; this.saveToHistory(); this.notify(); }
+    updateNodePosition(nodeId, x, y, snapToGridSize = 0) {
+        const node = this.nodes.find(n => n.id === nodeId);
+        if (!node)
+            return;
+        let finalX = snapToGridSize > 0 ? Math.round(x / snapToGridSize) * snapToGridSize : x;
+        let finalY = snapToGridSize > 0 ? Math.round(y / snapToGridSize) * snapToGridSize : y;
+        // Boundary constraints for children
+        if (node.parentId) {
+            const parent = this.nodes.find(n => n.id === node.parentId);
+            if (parent) {
+                finalX = Math.max(0, Math.min(finalX, (parent.width || 400) - (node.width || 150)));
+                finalY = Math.max(0, Math.min(finalY, (parent.height || 300) - (node.height || 48)));
+            }
+        }
+        // Helper Line Snapping
+        const threshold = 10;
+        this.nodes.forEach(other => {
+            if (other.id === nodeId || other.parentId === nodeId)
+                return;
+            if (Math.abs(finalX - other.position.x) < threshold)
+                finalX = other.position.x;
+            if (Math.abs(finalY - other.position.y) < threshold)
+                finalY = other.position.y;
+        });
+        const dx = finalX - node.position.x, dy = finalY - node.position.y;
+        if (dx === 0 && dy === 0)
+            return;
+        const idsToMove = this.selectedNodeIds.includes(nodeId) ? this.selectedNodeIds : [nodeId];
+        const movedNodesSet = new Set();
+        // Find all nodes in the hierarchy to move
+        const nodesToUpdate = new Map();
+        idsToMove.forEach(id => {
+            this.collectNodesToMove(id, dx, dy, movedNodesSet, nodesToUpdate);
+        });
+        // Single pass update
+        this.nodes = this.nodes.map(n => {
+            const update = nodesToUpdate.get(n.id);
+            return update ? { ...n, position: update } : n;
+        });
+        this.notify();
+    }
+    collectNodesToMove(id, dx, dy, movedNodesSet, map) {
+        if (movedNodesSet.has(id))
+            return;
+        const node = this.nodes.find(n => n.id === id);
+        if (!node)
+            return;
+        movedNodesSet.add(id);
+        map.set(id, { x: node.position.x + dx, y: node.position.y + dy });
+        this.nodes.filter(n => n.parentId === id).forEach(child => this.collectNodesToMove(child.id, dx, dy, movedNodesSet, map));
+    }
+    onConnect(connection) {
+        if (!this.isValidConnection(connection))
+            return null;
+        // STRICT: Only one connection between the same pair of nodes in the same direction
+        // (regardless of handles if user just wants "1 line")
+        // Or at least catch if handles are effectively the same.
+        const isDuplicate = this.edges.some(e => e.source === connection.source &&
+            e.target === connection.target &&
+            (e.sourceHandle || 'floating') === (connection.sourceHandle || 'floating') &&
+            (e.targetHandle || 'floating') === (connection.targetHandle || 'floating'));
+        if (isDuplicate)
+            return null;
+        const id = `e-${connection.source}-${connection.target}-${Date.now()}-${Math.floor(Math.random() * 1000)}`;
+        this.edges = [...this.edges, {
+                id,
+                ...connection,
+                type: 'default',
+                animated: false,
+                sourceHandle: connection.sourceHandle || 'floating',
+                targetHandle: connection.targetHandle || 'floating'
+            }];
+        this.saveToHistory();
+        this.notify();
+        return id;
+    }
+    toggleNodeCollapse(nodeId) { this.nodes = this.nodes.map(n => n.id === nodeId ? { ...n, isCollapsed: !n.isCollapsed } : n); this.saveToHistory(); this.notify(); }
+    isValidConnection(connection) {
+        if (connection.source === connection.target)
+            return false;
+        if (this.isCycle(connection.source, connection.target))
+            return false;
+        // Check if any connection already exists between these two nodes in this direction
+        // to strictly enforce "one line per pair" as requested.
+        const alreadyConnected = this.edges.some(e => e.source === connection.source && e.target === connection.target);
+        if (alreadyConnected)
+            return false;
+        const sourceNode = this.nodes.find(n => n.id === connection.source), targetNode = this.nodes.find(n => n.id === connection.target);
+        if (sourceNode?.maxConnections !== undefined && this.edges.filter(e => e.source === connection.source).length >= sourceNode.maxConnections)
+            return false;
+        if (targetNode?.maxConnections !== undefined && this.edges.filter(e => e.target === connection.target).length >= targetNode.maxConnections)
+            return false;
+        return true;
+    }
+    updateEdge(edgeId, updates) { this.edges = this.edges.map(e => e.id === edgeId ? { ...e, ...updates } : e); this.saveToHistory(); this.notify(); }
+    isCycle(source, target) {
+        if (source === target)
+            return true;
+        const visited = new Set(), queue = [target];
+        while (queue.length > 0) {
+            const current = queue.shift();
+            if (!current)
+                continue;
+            if (current === source)
+                return true;
+            if (visited.has(current))
+                continue;
+            visited.add(current);
+            this.edges.filter(e => e.source === current).forEach(e => queue.push(e.target));
+        }
+        return false;
+    }
+    deleteSelected() {
+        this.nodes = this.nodes.filter(n => !this.selectedNodeIds.includes(n.id));
+        this.edges = this.edges.filter(e => !this.selectedEdgeIds.includes(e.id) && !this.selectedNodeIds.includes(e.source) && !this.selectedNodeIds.includes(e.target));
+        this.selectedNodeIds = [];
+        this.selectedEdgeIds = [];
+        this.saveToHistory();
+        this.notify();
+    }
+    groupSelected() {
+        if (this.selectedNodeIds.length < 2)
+            return;
+        const selectedNodes = this.nodes.filter(n => this.selectedNodeIds.includes(n.id));
+        const minX = Math.min(...selectedNodes.map(n => n.position.x)), minY = Math.min(...selectedNodes.map(n => n.position.y)), maxX = Math.max(...selectedNodes.map(n => n.position.x + (n.width || 150))), maxY = Math.max(...selectedNodes.map(n => n.position.y + (n.height || 48)));
+        const groupId = `group-${Date.now()}`;
+        const groupNode = { id: groupId, type: 'group', position: { x: minX - 20, y: minY - 40 }, width: maxX - minX + 40, height: maxY - minY + 60, data: { label: 'New Group' }, zIndex: 1, style: { background: 'rgba(0,0,0,0.02)', border: '1px dashed #ccc' } };
+        this.nodes = [...this.nodes.map(n => this.selectedNodeIds.includes(n.id) ? { ...n, parentId: groupId } : n), groupNode];
+        this.selectedNodeIds = [groupId];
+        this.saveToHistory();
+        this.notify();
+    }
+    autoLayout(direction = 'LR') {
+        const visited = new Set(), levelMap = {}, rootNodes = this.nodes.filter(n => !this.edges.some(e => e.target === n.id));
+        const assignLevels = (nodeId, level) => {
+            levelMap[nodeId] = Math.max(levelMap[nodeId] || 0, level);
+            if (visited.has(nodeId))
+                return;
+            visited.add(nodeId);
+            this.edges.filter(e => e.source === nodeId).forEach(e => assignLevels(e.target, level + 1));
+        };
+        rootNodes.forEach(n => assignLevels(n.id, 0));
+        this.nodes.forEach(n => {
+            if (levelMap[n.id] === undefined)
+                assignLevels(n.id, 0);
+        });
+        const nodesByLevel = {};
+        Object.entries(levelMap).forEach(([id, level]) => { nodesByLevel[level] = [...(nodesByLevel[level] || []), id]; });
+        const gapX = 250, gapY = 100;
+        this.nodes = this.nodes.map(n => { const level = levelMap[n.id], index = nodesByLevel[level].indexOf(n.id); return { ...n, position: direction === 'LR' ? { x: level * gapX, y: index * gapY + 100 } : { x: index * gapX + 200, y: level * gapY + 100 } }; });
+        this.saveToHistory();
+        this.notify();
+    }
+    selectNode(nodeId, multi = false) {
+        if (multi) {
+            if (this.selectedNodeIds.includes(nodeId))
+                this.selectedNodeIds = this.selectedNodeIds.filter(id => id !== nodeId);
+            else
+                this.selectedNodeIds = [...this.selectedNodeIds, nodeId];
+        }
+        else {
+            this.selectedNodeIds = [nodeId];
+            this.selectedEdgeIds = [];
+        }
+        this.notify();
+    }
+    setParent(nodeId, parentId) {
+        const node = this.nodes.find(n => n.id === nodeId);
+        if (!node || node.parentId === parentId)
+            return;
+        if (parentId) {
+            const parent = this.nodes.find(n => n.id === parentId);
+            if (parent) {
+                // Move to relative coordinates
+                const relX = node.position.x - parent.position.x;
+                const relY = node.position.y - parent.position.y;
+                this.nodes = this.nodes.map(n => n.id === nodeId ? { ...n, parentId, position: { x: relX, y: relY } } : n);
+            }
+        }
+        else {
+            // Move back to absolute coordinates if it has a parent
+            const parent = node.parentId ? this.nodes.find(n => n.id === node.parentId) : null;
+            if (parent) {
+                this.nodes = this.nodes.map(n => n.id === nodeId ? { ...n, parentId: null, position: { x: node.position.x + parent.position.x, y: node.position.y + parent.position.y } } : n);
+            }
+            else {
+                this.nodes = this.nodes.map(n => n.id === nodeId ? { ...n, parentId: null } : n);
+            }
+        }
+        this.saveToHistory();
+        this.notify();
+    }
+    updateNode(nodeId, updates) {
+        this.nodes = this.nodes.map(n => n.id === nodeId ? { ...n, ...updates, data: { ...n.data, ...updates.data } } : n);
+        this.notify();
+    }
+    rotateNode(nodeId, angle) {
+        this.nodes = this.nodes.map(n => n.id === nodeId ? { ...n, rotation: angle } : n);
+        this.notify(); // Don't save to history every drag step, maybe on up
+    }
+    selectEdge(edgeId, multi = false) {
+        if (multi) {
+            if (this.selectedEdgeIds.includes(edgeId))
+                this.selectedEdgeIds = this.selectedEdgeIds.filter(id => id !== edgeId);
+            else
+                this.selectedEdgeIds = [...this.selectedEdgeIds, edgeId];
+        }
+        else {
+            this.selectedEdgeIds = [edgeId];
+            this.selectedNodeIds = [];
+        }
+        this.notify();
+    }
+    clearSelection() { this.selectedNodeIds = []; this.selectedEdgeIds = []; this.notify(); }
+    deleteEdge(edgeId) { this.edges = this.edges.filter(e => e.id !== edgeId); this.saveToHistory(); this.notify(); }
+    deleteNode(nodeId) {
+        const inEdges = this.edges.filter(e => e.target === nodeId);
+        const outEdges = this.edges.filter(e => e.source === nodeId);
+        // Delete Middle Node logic: If exactly one in and one out, reconnect them
+        if (inEdges.length === 1 && outEdges.length === 1) {
+            const sourceId = inEdges[0].source;
+            const targetId = outEdges[0].target;
+            this.addEdge({
+                id: `reconnect-${Date.now()}`,
+                source: sourceId,
+                target: targetId,
+                sourceHandle: inEdges[0].sourceHandle,
+                targetHandle: outEdges[0].targetHandle,
+                type: inEdges[0].type
+            });
+        }
+        this.nodes = this.nodes.filter(n => n.id !== nodeId);
+        this.edges = this.edges.filter(e => e.source !== nodeId && e.target !== nodeId);
+        this.selectedNodeIds = this.selectedNodeIds.filter(id => id !== nodeId);
+        this.saveToHistory();
+        this.notify();
+    }
+    addEdge(edge) { this.edges = [...this.edges, edge]; this.saveToHistory(); this.notify(); }
+    copySelected() {
+        this.clipboardNodes = this.nodes.filter(n => this.selectedNodeIds.includes(n.id)).map(n => ({ ...n }));
+        this.clipboardEdges = this.edges.filter(e => this.selectedNodeIds.includes(e.source) && this.selectedNodeIds.includes(e.target)).map(e => ({ ...e }));
+    }
+    paste(x, y) {
+        if (this.clipboardNodes.length === 0)
+            return;
+        const idMap = {};
+        const minX = Math.min(...this.clipboardNodes.map(n => n.position.x)), minY = Math.min(...this.clipboardNodes.map(n => n.position.y));
+        const targetX = x === undefined ? minX + 20 : x, targetY = y === undefined ? minY + 20 : y;
+        const dx = targetX - minX, dy = targetY - minY;
+        const newNodes = this.clipboardNodes.map(n => {
+            const newId = `node-${Date.now()}-${Math.random()}`;
+            idMap[n.id] = newId;
+            return { ...n, id: newId, position: { x: n.position.x + dx, y: n.position.y + dy }, selected: true };
+        });
+        const newEdges = this.clipboardEdges.map(e => ({ ...e, id: `edge-${Date.now()}-${Math.random()}`, source: idMap[e.source], target: idMap[e.target] }));
+        this.nodes = [...this.nodes.map(n => ({ ...n, selected: false })), ...newNodes];
+        this.edges = [...this.edges, ...newEdges];
+        this.selectedNodeIds = newNodes.map(n => n.id);
+        this.saveToHistory();
+        this.notify();
+    }
+    generateStressTest(count) {
+        const newNodes = [];
+        for (let i = 0; i < count; i++) {
+            newNodes.push({
+                id: `stress-${i}`,
+                position: { x: Math.random() * 2000, y: Math.random() * 2000 },
+                data: { label: `Node ${i}` },
+                zIndex: 10
+            });
+        }
+        this.nodes = [...this.nodes, ...newNodes];
+        this.notify();
+    }
+    getFullState() { return { nodes: this.nodes, edges: this.edges, viewport: this.viewport, nodeValues: this.nodeValues }; }
+}
+
+const xWorkflowCss = () => `:host{display:block;width:100%;height:100%;overflow:hidden}.workflow-container{position:relative;width:100%;height:100%;background:#f8f9fa;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-ms-touch-action:none;touch-action:none;outline:none}.background-canvas{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.dots-bg{width:100%;height:100%;background-image:radial-gradient(#d1d5db 1px, transparent 1px);background-size:20px 20px}.flow-renderer{position:absolute;top:0;left:0;width:100%;height:100%;-webkit-transform-origin:0 0;transform-origin:0 0;will-change:transform}.nodes-layer,.edges-svg,.drawings-layer{position:absolute;top:0;left:0;width:100%;height:100%}.edges-svg{overflow:visible;pointer-events:none}.node{position:absolute;background:#ffffff;border:1px solid #d1d5db;border-radius:6px;-webkit-box-shadow:0 4px 6px -1px rgba(0, 0, 0, 0.1);box-shadow:0 4px 6px -1px rgba(0, 0, 0, 0.1);-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-transition:-webkit-transform 0.1s ease-out;transition:-webkit-transform 0.1s ease-out;transition:transform 0.1s ease-out;transition:transform 0.1s ease-out, -webkit-transform 0.1s ease-out}.node.dragging{-webkit-transition:none;transition:none;cursor:-webkit-grabbing;cursor:grabbing;-webkit-box-shadow:0 10px 15px -3px rgba(0, 0, 0, 0.1);box-shadow:0 10px 15px -3px rgba(0, 0, 0, 0.1);z-index:100}.node{color:#1f2937;font-family:inherit;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;padding:8px 12px;min-width:100px;min-height:40px;z-index:10;-webkit-transform-origin:center center;transform-origin:center center}.node.shape-circle{border-radius:50%}.node.shape-diamond{background:transparent !important;border:none !important;-webkit-box-shadow:none !important;box-shadow:none !important;-webkit-clip-path:none !important;clip-path:none !important}.node.shape-diamond .node-shape-wrapper{position:absolute;inset:0;z-index:0;pointer-events:none}.node.shape-diamond .node-shape-svg{width:100%;height:100%;overflow:visible}.node.shape-diamond .node-shape-svg .shape-path{fill:#ffffff;stroke:#d1d5db;stroke-width:1.5px;-webkit-transition:all 0.2s ease;transition:all 0.2s ease;vector-effect:non-scaling-stroke}.node.shape-diamond .node-shape-svg .shape-path.selected{stroke:#3b82f6;stroke-width:3px;-webkit-filter:drop-shadow(0 0 4px rgba(59, 130, 246, 0.3));filter:drop-shadow(0 0 4px rgba(59, 130, 246, 0.3))}.node.shape-diamond .node-content{position:relative;z-index:1;-webkit-transform:scale(0.7);transform:scale(0.7);pointer-events:auto}.node-content{pointer-events:none;font-size:14px;font-weight:500;text-align:center;width:100%;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;gap:8px}.node-content>*{pointer-events:auto}.node.dragging{cursor:-webkit-grabbing;cursor:grabbing;-webkit-box-shadow:0 10px 15px -3px rgba(0, 0, 0, 0.1);box-shadow:0 10px 15px -3px rgba(0, 0, 0, 0.1);z-index:100;-webkit-transition:none;transition:none}.node.selected{border-color:#3b82f6;-webkit-box-shadow:0 0 0 2px #3b82f6;box-shadow:0 0 0 2px #3b82f6}.handle{position:absolute;width:12px;height:12px;background:white;border:2px solid #3b82f6;border-radius:50%;cursor:crosshair;z-index:20}.handle::after{content:"";position:absolute;top:-10px;left:-10px;right:-10px;bottom:-10px}.handle:hover{background:#2563eb;border-color:#2563eb}.handle.top{top:-6px;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.handle.right{right:-6px;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.handle.bottom{bottom:-6px;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.handle.left{left:-6px;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.edge-path{fill:none;stroke:#b1b1b7;stroke-width:2px;pointer-events:auto;cursor:pointer;-webkit-transition:stroke 0.2s;transition:stroke 0.2s}.edge-path:hover{stroke-width:3px;stroke:#3b82f6}.edge-path.selected{stroke:#3b82f6;stroke-width:3px}.edge-path.animated{stroke-dasharray:5;-webkit-animation:dash 1s linear infinite;animation:dash 1s linear infinite}.edge-path.turbo{stroke:#ff00ff;stroke-width:3px;-webkit-filter:drop-shadow(0 0 5px rgba(255, 0, 255, 0.8));filter:drop-shadow(0 0 5px rgba(255, 0, 255, 0.8));stroke-dasharray:10;-webkit-animation:turbo-dash 0.5s linear infinite;animation:turbo-dash 0.5s linear infinite}@-webkit-keyframes turbo-dash{from{stroke-dashoffset:20}to{stroke-dashoffset:0}}@keyframes turbo-dash{from{stroke-dashoffset:20}to{stroke-dashoffset:0}}@-webkit-keyframes dash{from{stroke-dashoffset:10}to{stroke-dashoffset:0}}@keyframes dash{from{stroke-dashoffset:10}to{stroke-dashoffset:0}}.node-toolbar{position:absolute;top:-45px;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);background:white;border:1px solid #ddd;border-radius:6px;padding:4px;display:-ms-flexbox;display:flex;gap:4px;-webkit-box-shadow:0 2px 8px rgba(0, 0, 0, 0.15);box-shadow:0 2px 8px rgba(0, 0, 0, 0.15);z-index:100}.node-toolbar .color-picker{display:-ms-flexbox;display:flex;gap:2px;padding:0 4px}.node-toolbar .color-picker .color-swatch{width:16px;height:16px;border-radius:2px;border:1px solid #eee;cursor:pointer;-webkit-transition:-webkit-transform 0.1s;transition:-webkit-transform 0.1s;transition:transform 0.1s;transition:transform 0.1s, -webkit-transform 0.1s}.node-toolbar .color-picker .color-swatch:hover{-webkit-transform:scale(1.2);transform:scale(1.2)}.node-toolbar button{background:transparent;border:none;color:#333;cursor:pointer;padding:4px;border-radius:2px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;font-size:14px}.toolbar-btn{background:transparent;border:none;color:white;cursor:pointer;padding:4px;border-radius:2px;display:-ms-flexbox;display:flex}.toolbar-btn:hover{background:rgba(255, 255, 255, 0.1)}.edge-toolbar{display:-ms-flexbox;display:flex;background:#333;padding:4px;border-radius:4px;gap:4px}.edge-toolbar-btn{background:transparent;border:none;color:white;cursor:pointer;padding:4px}.node-resizer{position:absolute;right:0;bottom:0;width:10px;height:10px;background:#3b82f6;cursor:nwse-resize;border-radius:2px 0 0 0}.node-rotator{position:absolute;top:-24px;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);width:20px;height:20px;background:white;border:1px solid #3b82f6;border-radius:50%;cursor:-webkit-grab;cursor:grab;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;-webkit-box-shadow:0 1px 3px rgba(0, 0, 0, 0.1);box-shadow:0 1px 3px rgba(0, 0, 0, 0.1)}.node-rotator::before{content:"";position:absolute;bottom:-15px;left:50%;width:1px;height:15px;background:#3b82f6}.node-collapse-btn{background:transparent;border:none;padding:2px;cursor:pointer;display:-ms-flexbox;display:flex;color:inherit;opacity:0.6}.node-collapse-btn:hover{opacity:1}.context-menu{position:fixed;background:white;border:1px solid #ddd;-webkit-box-shadow:0 4px 12px rgba(0, 0, 0, 0.15);box-shadow:0 4px 12px rgba(0, 0, 0, 0.15);border-radius:4px;padding:4px 0;z-index:100000;min-width:150px}.menu-item{padding:8px 16px;cursor:pointer;font-size:13px}.menu-item:hover{background:#f3f4f6}.divider{height:1px;background:#eee;margin:4px 0}.selection-rect{position:absolute;background:rgba(59, 130, 246, 0.1);border:1px solid rgba(59, 130, 246, 0.5);pointer-events:none;z-index:10000}.user-cursor{position:absolute;pointer-events:none;z-index:10000;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;align-items:flex-start;-webkit-transition:all 0.1s linear;transition:all 0.1s linear}.user-cursor svg{-webkit-filter:drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));filter:drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3))}.user-cursor .user-name{margin-top:2px;padding:2px 6px;border-radius:4px;color:white;font-size:10px;font-weight:500;white-space:nowrap;-webkit-box-shadow:0 1px 3px rgba(0, 0, 0, 0.2);box-shadow:0 1px 3px rgba(0, 0, 0, 0.2)}.edge-handle{fill:white;stroke:#3b82f6;stroke-width:2px;cursor:crosshair;pointer-events:auto}.edge-path.proximity-preview{stroke:#b1b1b7;stroke-width:2px;pointer-events:none}.edge-label{background:white;padding:2px 4px;border-radius:4px;border:1px solid #b1b1b7;font-size:10px;color:#333;text-align:center;white-space:nowrap;pointer-events:none}.workflow-container.theme-dark{background:#141414}.workflow-container.theme-dark .dots-bg{background-image:radial-gradient(#333 1px, transparent 1px)}.workflow-container.theme-dark .node{background:#222;border-color:#333;color:#eee;-webkit-box-shadow:0 4px 6px -1px rgba(0, 0, 0, 0.5);box-shadow:0 4px 6px -1px rgba(0, 0, 0, 0.5)}.workflow-container.theme-dark .handle{background:#222}.workflow-container.theme-dark .context-menu{background:#222;border-color:#444;color:#eee}.workflow-container.theme-dark .context-menu .menu-item:hover{background:#333}.workflow-container.theme-dark .context-menu .divider{background:#444}.workflow-container.theme-dark .edge-label{background:#333;color:#eee;border-color:#444}`;
+
+const XWorkflow = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.xNodesChange = createEvent(this, "xNodesChange", 7);
+        this.xEdgesChange = createEvent(this, "xEdgesChange", 7);
+        this.xViewportChange = createEvent(this, "xViewportChange", 7);
+        this.xNodeClick = createEvent(this, "xNodeClick", 7);
+        this.xEdgeClick = createEvent(this, "xEdgeClick", 7);
+        this.xConnect = createEvent(this, "xConnect", 7);
+        this.xWorkflowChange = createEvent(this, "xWorkflowChange", 7);
+    }
+    get el() { return getElement(this); }
+    nodes = [];
+    edges = [];
+    fitView = false;
+    interactive = true;
+    viewportValue = { x: 0, y: 0, zoom: 1 };
+    snapToGridValue = 0;
+    background = { variant: 'dots' };
+    tool = 'select';
+    theme = 'light';
+    turboMode = false;
+    displayMode = 'advanced';
+    users = [];
+    nodeToolbarVisible = true;
+    nodeToolbarMode = 'selected';
+    edgeRoutingMode = 'fixed';
+    flowNodes = [];
+    flowEdges = [];
+    flowViewport = { x: 0, y: 0, zoom: 1 };
+    pendingConnection = null;
+    selectedNodes = [];
+    draggingNodeId = null;
+    proximityPreview = null;
+    helperLines = [];
+    contextMenu = null;
+    selectionRect = null;
+    drawings = [];
+    activeDrawing = null;
+    editingEdgeId = null;
+    focusedNodeId = null;
+    xNodesChange;
+    xEdgesChange;
+    xViewportChange;
+    xNodeClick;
+    xEdgeClick;
+    xConnect;
+    xWorkflowChange;
+    service;
+    isDraggingCanvas = false;
+    isUpdatingFromProp = false;
+    isInteracting = false;
+    lastMousePos = { x: 0, y: 0 };
+    container;
+    throttleTimer = null;
+    async forceLayout() {
+        this.service.forceLayout();
+    }
+    componentWillLoad() {
+        this.service = new FlowService(this.nodes, this.edges);
+        this.service.setViewport(this.viewportValue);
+        this.updateState();
+        this.service.subscribe(() => {
+            this.updateState();
+            this.throttleEmitWorkflowChange();
+        });
+    }
+    throttleEmitWorkflowChange() {
+        if (this.throttleTimer)
+            return;
+        this.throttleTimer = setTimeout(() => {
+            this.xWorkflowChange.emit(this.service.getFullState());
+            this.throttleTimer = null;
+        }, 100);
+    }
+    handleNodesPropChange(nodes) {
+        this.isUpdatingFromProp = true;
+        this.service.setNodes(nodes);
+        this.isUpdatingFromProp = false;
+    }
+    handleEdgesPropChange(edges) {
+        this.isUpdatingFromProp = true;
+        this.service.setEdges(edges);
+        this.isUpdatingFromProp = false;
+    }
+    handleViewportChange(vp) {
+        this.isUpdatingFromProp = true;
+        this.service.setViewport(vp);
+        this.isUpdatingFromProp = false;
+    }
+    updateState() {
+        this.flowNodes = [...this.service.getNodes()];
+        this.flowEdges = [...this.service.getEdges()];
+        this.flowViewport = { ...this.service.getViewport() };
+        this.selectedNodes = [...this.service.getSelectedNodes()];
+        // During active interaction (drag/pan), suppress heavy external sync to prevent parent re-renders.
+        // We will emit the final state on mouseup.
+        if (!this.isUpdatingFromProp && !this.isInteracting) {
+            this.xViewportChange.emit(this.flowViewport);
+            this.xNodesChange.emit(this.flowNodes);
+            this.xEdgesChange.emit(this.flowEdges);
+        }
+    }
+    handleMouseDown = (e) => {
+        if (!this.interactive)
+            return;
+        const clientX = 'touches' in e ? e.touches[0].clientX : e.clientX;
+        const clientY = 'touches' in e ? e.touches[0].clientY : e.clientY;
+        const target = e.target;
+        // Check if we're clicking on a node or edge
+        if (target.closest('.node') || target.closest('.edge-group'))
+            return;
+        if (target === this.container || target.closest('.background-canvas')) {
+            const rect = this.container.getBoundingClientRect();
+            const lx = (clientX - rect.left - this.flowViewport.x) / this.flowViewport.zoom, ly = (clientY - rect.top - this.flowViewport.y) / this.flowViewport.zoom;
+            if (this.tool === 'rectangle' || this.tool === 'freehand') {
+                this.startDrawing(lx, ly);
+                return;
+            }
+            this.lastMousePos = { x: clientX, y: clientY };
+            if ('shiftKey' in e && e.shiftKey) {
+                this.selectionRect = { x: (clientX - rect.left), y: (clientY - rect.top), width: 0, height: 0 };
+                this.isInteracting = true;
+            }
+            else {
+                this.isDraggingCanvas = true;
+                this.isInteracting = true;
+                this.service.clearSelection();
+            }
+            this.contextMenu = null;
+        }
+    };
+    handleMove(e) {
+        const clientX = 'touches' in e ? e.touches[0].clientX : e.clientX, clientY = 'touches' in e ? e.touches[0].clientY : e.clientY;
+        const { x, y, zoom } = this.flowViewport, rect = this.container.getBoundingClientRect();
+        if (this.isDraggingCanvas) {
+            const dx = clientX - this.lastMousePos.x, dy = clientY - this.lastMousePos.y;
+            this.lastMousePos = { x: clientX, y: clientY };
+            this.service.setViewport({ x: x + dx, y: y + dy, zoom });
+        }
+        if (this.pendingConnection) {
+            this.pendingConnection = { ...this.pendingConnection, mouseX: (clientX - rect.left - x) / zoom, mouseY: (clientY - rect.top - y) / zoom };
+        }
+        if (this.tool === 'eraser' && (('buttons' in e && e.buttons === 1) || 'touches' in e)) {
+            this.handleEraserAt(clientX, clientY);
+        }
+        if (this.activeDrawing) {
+            const lx = (clientX - rect.left - x) / zoom, ly = (clientY - rect.top - y) / zoom;
+            if (this.activeDrawing.type === 'rectangle')
+                this.activeDrawing = { ...this.activeDrawing, width: lx - this.activeDrawing.position.x, height: ly - this.activeDrawing.position.y };
+            else if (this.activeDrawing.type === 'freehand')
+                this.activeDrawing = { ...this.activeDrawing, points: [...this.activeDrawing.points, { x: lx, y: ly }] };
+        }
+    }
+    handleEraserAt(clientX, clientY) {
+        const rect = this.container.getBoundingClientRect(), { x: vx, y: vy, zoom } = this.flowViewport;
+        const lx = (clientX - rect.left - vx) / zoom, ly = (clientY - rect.top - vy) / zoom;
+        const node = this.flowNodes.find(n => { const w = n.width || 150, h = n.height || 48; return lx >= n.position.x && lx <= n.position.x + w && ly >= n.position.y && ly <= n.position.y + h; });
+        if (node)
+            this.service.deleteNode(node.id);
+        this.drawings = this.drawings.filter(d => {
+            if (d.type === 'rectangle') {
+                const rx = Math.min(d.position.x, d.position.x + (d.width || 0)), ry = Math.min(d.position.y, d.position.y + (d.height || 0)), rw = Math.abs(d.width || 0), rh = Math.abs(d.height || 0);
+                return !(lx >= rx && lx <= rx + rw && ly >= ry && ly <= ry + rh);
+            }
+            return true;
+        });
+    }
+    handleUp() {
+        if (this.isInteracting) {
+            this.isInteracting = false;
+            // Sync final state once interaction ends
+            this.updateState();
+        }
+        this.isDraggingCanvas = false;
+        if (this.activeDrawing) {
+            this.drawings = [...this.drawings, this.activeDrawing];
+            this.activeDrawing = null;
+        }
+        if (this.selectionRect) {
+            this.applyLassoSelection();
+            this.selectionRect = null;
+        }
+        // REMOVED premature clearing of pendingConnection which was causing errors in startConnectionHandler
+        // Drop-to-Group Logic
+        if (this.draggingNodeId) {
+            const node = this.flowNodes.find(n => n.id === this.draggingNodeId);
+            if (node) {
+                // const containerBox = this.container.getBoundingClientRect(); // This line was unused and removed
+                // const absX = node.position.x * this.flowViewport.zoom + this.flowViewport.x; // This line was unused and removed
+                // const absY = node.position.y * this.flowViewport.zoom + this.flowViewport.y; // This line was unused and removed
+                // Find potential parent node (type: group) under the drop position
+                const potentialParent = this.flowNodes.find(n => {
+                    if (n.id === node.id || n.type !== 'group')
+                        return false;
+                    const nw = n.width || 400, nh = n.height || 300;
+                    return node.position.x >= n.position.x && node.position.x + (node.width || 150) <= n.position.x + nw &&
+                        node.position.y >= n.position.y && node.position.y + (node.height || 48) <= n.position.y + nh;
+                });
+                if (potentialParent)
+                    this.service.setParent(node.id, potentialParent.id);
+                else if (node.parentId)
+                    this.service.setParent(node.id, null);
+            }
+        }
+        this.isDraggingCanvas = false;
+        this.draggingNodeId = null;
+        this.helperLines = [];
+    }
+    handleKeyDown(e) {
+        if (!this.interactive || e.target.tagName === 'INPUT')
+            return;
+        if ((e.ctrlKey || e.metaKey) && e.key === 'c') {
+            e.preventDefault();
+            this.service.copySelected();
+        }
+        if ((e.ctrlKey || e.metaKey) && e.key === 'v') {
+            e.preventDefault();
+            this.service.paste();
+        }
+        if ((e.ctrlKey || e.metaKey) && e.key === 'z') {
+            e.preventDefault();
+            if (e.shiftKey)
+                this.service.redo();
+            else
+                this.service.undo();
+        }
+        if (e.key === 'Delete' || e.key === 'Backspace') {
+            e.preventDefault();
+            this.service.deleteSelected();
+        }
+    }
+    handleWheel = (e) => {
+        if (!this.interactive)
+            return;
+        e.preventDefault();
+        const zoomSpeed = 0.001, v = this.service.getViewport(), zoomDelta = -e.deltaY * zoomSpeed, newZoom = Math.min(Math.max(v.zoom + zoomDelta, 0.1), 5);
+        if (newZoom === v.zoom)
+            return;
+        const rect = this.container.getBoundingClientRect(), mouseX = e.clientX - rect.left, mouseY = e.clientY - rect.top, cx = (mouseX - v.x) / v.zoom, cy = (mouseY - v.y) / v.zoom;
+        this.service.setViewport({ x: mouseX - cx * newZoom, y: mouseY - cy * newZoom, zoom: newZoom });
+    };
+    render() {
+        const { x, y, zoom } = this.flowViewport, transform = `translate(${x}px, ${y}px) scale(${zoom})`;
+        return (h("div", { key: 'db1bff3ac7ea27720be9a937afc0ee78a1c7ddb3', class: { 'workflow-container': true, 'theme-dark': this.theme === 'dark' }, onMouseDown: this.handleMouseDown, onTouchStart: this.handleMouseDown, onWheel: this.handleWheel, ref: (el) => this.container = el }, h("div", { key: '24c5d1a846646f25d6ae1ace14f38e7d939d0348', class: "background-canvas" }, this.renderBackground()), h("div", { key: 'd96eb3b0188cb0c6f16e2e093873c56fd471ca37', class: "flow-renderer", style: { transform } }, h("svg", { key: '2801eb1d3d4fb082be5057f0b1500fbc3ac53583', class: "edges-svg" }, h("defs", { key: 'b797372dac820c84edc52087d07805bfb7155126' }, h("marker", { key: '8b0584a343dcbbc40a43767e4a6ab0733a0243d3', id: "arrowhead", markerWidth: "10", markerHeight: "7", refX: "9", refY: "3.5", orient: "auto" }, h("polygon", { key: 'dfe7c9ad6eeaccba3cd560b891021dad77c32b34', points: "0 0, 10 3.5, 0 7", fill: "currentColor" })), h("marker", { key: 'e098834ed3919e64aea097f9d9b2326781841e8e', id: "arrowhead-selected", markerWidth: "10", markerHeight: "7", refX: "9", refY: "3.5", orient: "auto" }, h("polygon", { key: '5c99c575d24f2f6cffddc71ecb3fc29c592416ec', points: "0 0, 10 3.5, 0 7", fill: "var(--x-primary-color)" }))), this.flowEdges
+            .sort((a, b) => (a.selected ? 1 : 0) - (b.selected ? 1 : 0))
+            .map(edge => this.renderEdge(edge)), this.renderPendingLine(), this.renderProximityPreview(), this.renderEdgeHandles()), h("div", { key: 'cd1699a7dd5a41e238be3d94329686e9e8975253', class: "nodes-layer" }, this.flowNodes.map(node => this.renderNode(node))), h("svg", { key: 'bd722c1ce4e18b83b5e954af15162c4fa6bbb44e', class: "drawings-layer" }, this.drawings.map(d => this.renderDrawing(d)), this.activeDrawing && this.renderDrawing(this.activeDrawing)), this.renderHelperLines(), this.renderUsers()), this.renderContextMenu(), this.renderSelectionRect()));
+    }
+    renderBackground() {
+        if (this.background.variant === 'dots') {
+            return (h("div", { class: "dots-bg", style: { backgroundSize: `${20 * this.flowViewport.zoom}px ${20 * this.flowViewport.zoom}px` } }));
+        }
+        return null;
+    }
+    renderUsers() {
+        return this.users.map(u => (h("div", { class: "user-cursor", style: { left: `${u.position.x}px`, top: `${u.position.y}px` } }, h("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: u.color }, h("path", { d: "M5 1v22l6-6h11z" })), h("span", { class: "user-name", style: { backgroundColor: u.color } }, u.name))));
+    }
+    renderPendingLine() {
+        if (!this.pendingConnection)
+            return null;
+        return (h("path", { d: `M${this.pendingConnection.startX},${this.pendingConnection.startY} L${this.pendingConnection.mouseX},${this.pendingConnection.mouseY}`, class: "edge-path pending" }));
+    }
+    renderProximityPreview() {
+        if (!this.proximityPreview)
+            return null;
+        const s = this.flowNodes.find(n => n.id === this.proximityPreview.source);
+        const t = this.flowNodes.find(n => n.id === this.proximityPreview.target);
+        if (!s || !t)
+            return null;
+        const sp = this.getHandlePos(s, this.proximityPreview.sourceHandle, t);
+        const tp = this.getHandlePos(t, this.proximityPreview.targetHandle, s);
+        return (h("path", { d: `M${sp.x},${sp.y} L${tp.x},${tp.y}`, class: "edge-path proximity-preview", "stroke-dasharray": "5,5", opacity: "0.5" }));
+    }
+    handleNodeClick(e, nodeId) {
+        const node = this.flowNodes.find(n => n.id === nodeId);
+        if (!node)
+            return;
+        if (e.shiftKey || e.ctrlKey || e.metaKey) {
+            this.service.selectNode(nodeId, true);
+        }
+        else {
+            this.service.selectNode(nodeId, false);
+        }
+        this.xNodeClick.emit(node);
+    }
+    handleEdgeLabelDblClick(e, edgeId) {
+        e.stopPropagation();
+        this.editingEdgeId = edgeId;
+    }
+    handleEdgeLabelChange(e, edgeId) {
+        const newLabel = e.target.value;
+        this.service.updateEdge(edgeId, { label: newLabel });
+    }
+    renderEdgeLabel(edge, x, y) {
+        return (h("foreignObject", { x: x - 50, y: y - 12, width: 100, height: 24, class: "edge-label-container" }, h("div", { class: "edge-label", onDblClick: (e) => this.handleEdgeLabelDblClick(e, edge.id) }, this.editingEdgeId === edge.id ? (h("input", { value: edge.label, onInput: (e) => this.handleEdgeLabelChange(e, edge.id), onKeyDown: (e) => e.key === 'Enter' && (this.editingEdgeId = null), onBlur: () => this.editingEdgeId = null, autoFocus: true, style: { width: '100%', background: 'white', border: '1px solid #ccc', borderRadius: '4px' } })) : (edge.label || ''))));
+    }
+    renderEdge(edge) {
+        const s = this.flowNodes.find(n => n.id === edge.source);
+        const t = this.flowNodes.find(n => n.id === edge.target);
+        if (!s || !t)
+            return null;
+        const sPos = this.getHandlePos(s, edge.sourceHandle, t);
+        const tPos = this.getHandlePos(t, edge.targetHandle, s);
+        let x1 = sPos.x;
+        let y1 = sPos.y;
+        let x2 = tPos.x;
+        let y2 = tPos.y;
+        // ✅ Multi-edge offset
+        const siblings = this.flowEdges.filter(e => e.source === edge.source && e.target === edge.target);
+        const index = siblings.findIndex(e => e.id === edge.id);
+        const offset = siblings.length > 1
+            ? (index - (siblings.length - 1) / 2) * 20
+            : 0;
+        // apply offset theo normal vector
+        if (edge.type !== 'straight') {
+            const dx = x2 - x1;
+            const dy = y2 - y1;
+            const len = Math.hypot(dx, dy) || 1;
+            const nx = -dy / len;
+            const ny = dx / len;
+            x1 += nx * offset;
+            y1 += ny * offset;
+            x2 += nx * offset;
+            y2 += ny * offset;
+        }
+        let path = '';
+        // =========================================================
+        // 1. STRAIGHT
+        // =========================================================
+        if (edge.type === 'straight') {
+            path = `M${x1},${y1} L${x2},${y2}`;
+        }
+        // =========================================================
+        // 2. STEP / SMOOTHSTEP (FIXED VERSION)
+        // =========================================================
+        else if (edge.type === 'step' || edge.type === 'smoothstep') {
+            const isSmooth = edge.type === 'smoothstep';
+            const radius = isSmooth ? 8 : 0;
+            const points = [];
+            const midX = x1 + (x2 - x1) / 2;
+            const midY = y1 + (y2 - y1) / 2;
+            // routing basic
+            if (Math.abs(x1 - x2) > Math.abs(y1 - y2)) {
+                // horizontal first
+                points.push({ x: x1, y: y1 });
+                points.push({ x: midX, y: y1 });
+                points.push({ x: midX, y: y2 });
+                points.push({ x: x2, y: y2 });
+            }
+            else {
+                // vertical first
+                points.push({ x: x1, y: y1 });
+                points.push({ x: x1, y: midY });
+                points.push({ x: x2, y: midY });
+                points.push({ x: x2, y: y2 });
+            }
+            const parts = [];
+            parts.push(`M${points[0].x},${points[0].y}`);
+            for (let i = 1; i < points.length - 1; i++) {
+                const prev = points[i - 1];
+                const curr = points[i];
+                const next = points[i + 1];
+                if (radius === 0) {
+                    parts.push(`L${curr.x},${curr.y}`);
+                    continue;
+                }
+                const dx1 = curr.x - prev.x;
+                const dy1 = curr.y - prev.y;
+                const dx2 = next.x - curr.x;
+                const dy2 = next.y - curr.y;
+                const len1 = Math.hypot(dx1, dy1);
+                const len2 = Math.hypot(dx2, dy2);
+                const r = Math.min(radius, len1 / 2, len2 / 2);
+                const p1x = curr.x - (dx1 / len1) * r;
+                const p1y = curr.y - (dy1 / len1) * r;
+                const p2x = curr.x + (dx2 / len2) * r;
+                const p2y = curr.y + (dy2 / len2) * r;
+                parts.push(`L${p1x},${p1y}`);
+                parts.push(`Q${curr.x},${curr.y} ${p2x},${p2y}`);
+            }
+            const last = points[points.length - 1];
+            parts.push(`L${last.x},${last.y}`);
+            path = parts.join(' ');
+        }
+        // =========================================================
+        // 3. DEFAULT (Bezier)
+        // =========================================================
+        else {
+            const dx = x2 - x1;
+            const curvature = 0.5;
+            path = `
+      M${x1},${y1}
+      C${x1 + dx * curvature},${y1}
+       ${x2 - dx * curvature},${y2}
+       ${x2},${y2}
+    `;
+        }
+        const isSelected = this.selectedNodes.includes(edge.id); // Assuming edges can be selected
+        return (h("g", { key: edge.id, class: { 'edge-group': true } }, h("path", { d: path, stroke: "transparent", "stroke-width": "20", fill: "none", style: { cursor: 'pointer', pointerEvents: 'stroke' }, onClick: (e) => {
+                e.stopPropagation();
+                this.service.selectEdge(edge.id, e.ctrlKey || e.metaKey);
+                this.xEdgeClick.emit(edge);
+            } }), h("path", { d: path, class: {
+                'edge-path': true,
+                'selected': isSelected,
+                'animated': edge.animated,
+            }, "marker-end": isSelected ? 'url(#arrowhead-selected)' : 'url(#arrowhead)', style: {
+                pointerEvents: 'none',
+                stroke: isSelected
+                    ? 'var(--x-primary-color)'
+                    : (edge.style?.['stroke'] || '#b1b1b7'),
+                strokeDasharray: edge.style?.['strokeDasharray'],
+            } }), edge.selected && (h("foreignObject", { x: (x1 + x2) / 2 - 30, y: (y1 + y2) / 2 - 50, width: "60", height: "40" }, h("div", { class: "edge-toolbar" }, h("button", { class: "edge-toolbar-btn", onClick: (e) => {
+                e.stopPropagation();
+                this.service.updateEdge(edge.id, {
+                    animated: !edge.animated,
+                });
+            } }, "\u26A1"), h("button", { class: "edge-toolbar-btn", onClick: (e) => {
+                e.stopPropagation();
+                this.service.deleteEdge(edge.id);
+            } }, "\uD83D\uDDD1")))), edge.label &&
+            this.renderEdgeLabel(edge, (x1 + x2) / 2, (y1 + y2) / 2)));
+    }
+    getHandlePos(node, handle, targetNode) {
+        // Ensure we have a width and height to calculate the midpoint/edges
+        const x = Math.round(node.position.x);
+        const y = Math.round(node.position.y);
+        const w = node.width ? Math.round(node.width) : (node.shape === 'diamond' ? 100 : 150);
+        const h = node.height ? Math.round(node.height) : (node.shape === 'diamond' ? 100 : 48);
+        if (handle === 'floating' && targetNode)
+            return this.getFloatingHandlePos(node, targetNode);
+        if (this.edgeRoutingMode === 'auto' && targetNode) {
+            const sc = { x: x + w / 2, y: y + h / 2 };
+            const tc = { x: targetNode.position.x + (targetNode.width || 150) / 2, y: targetNode.position.y + (targetNode.height || 48) / 2 };
+            const dx = tc.x - sc.x;
+            const dy = tc.y - sc.y;
+            if (Math.abs(dx) > Math.abs(dy))
+                handle = dx > 0 ? 'right' : 'left';
+            else
+                handle = dy > 0 ? 'bottom' : 'top';
+        }
+        else if (!handle && targetNode) {
+            const sc = { x: x + w / 2, y: y + h / 2 };
+            const tc = { x: targetNode.position.x + (targetNode.width || 150) / 2, y: targetNode.position.y + (targetNode.height || 48) / 2 };
+            const dx = tc.x - sc.x;
+            const dy = tc.y - sc.y;
+            if (Math.abs(dx) > Math.abs(dy))
+                handle = dx > 0 ? 'right' : 'left';
+            else
+                handle = dy > 0 ? 'bottom' : 'top';
+        }
+        else if (!handle) {
+            handle = 'floating';
+        }
+        // Offset slightly for handle markers (r=4)
+        switch (handle) {
+            case 'top': return { x: x + w / 2, y };
+            case 'right': return { x: x + w, y: y + h / 2 };
+            case 'bottom': return { x: x + w / 2, y: y + h };
+            case 'left': return { x: x, y: y + h / 2 };
+            default: return { x: x + w / 2, y: y + h / 2 };
+        }
+    }
+    getFloatingHandlePos(source, target) {
+        const sw = (source.width || 150) / 2, sh = (source.height || 48) / 2;
+        const sc = { x: source.position.x + sw, y: source.position.y + sh };
+        const tc = { x: target.position.x + (target.width || 150) / 2, y: target.position.y + (target.height || 48) / 2 };
+        const dx = tc.x - sc.x, dy = tc.y - sc.y;
+        const angle = Math.atan2(dy, dx);
+        // Diamond Shape Correction
+        if (source.shape === 'diamond') {
+            const absCos = Math.abs(Math.cos(angle)), absSin = Math.abs(Math.sin(angle));
+            const d = (sw * sh) / (sh * absCos + sw * absSin);
+            return { x: sc.x + d * Math.cos(angle), y: sc.y + d * Math.sin(angle) };
+        }
+        // Circle Shape Correction
+        if (source.shape === 'circle') {
+            const r = Math.min(sw, sh);
+            return { x: sc.x + r * Math.cos(angle), y: sc.y + r * Math.sin(angle) };
+        }
+        if (Math.abs(dx) * sh > Math.abs(dy) * sw)
+            return { x: sc.x + sw * Math.sign(dx), y: sc.y + (dy * sw / Math.abs(dx)) };
+        else
+            return { x: sc.x + (dx * sh / Math.abs(dy)), y: sc.y + sh * Math.sign(dy) };
+    }
+    renderEdgeHandles() {
+        return this.flowEdges
+            .filter(e => e.selected)
+            .map(edge => {
+            const s = this.flowNodes.find(n => n.id === edge.source);
+            const t = this.flowNodes.find(n => n.id === edge.target);
+            if (!s || !t)
+                return null;
+            const sPos = this.getHandlePos(s, edge.sourceHandle, t);
+            const tPos = this.getHandlePos(t, edge.targetHandle, s);
+            return (h("g", { class: "edge-controls" }, h("circle", { cx: sPos.x, cy: sPos.y, r: "4", class: "edge-handle source", onMouseDown: (e) => this.startEdgeReconnect(e, edge, 'source'), onTouchStart: (e) => this.startEdgeReconnect(e, edge, 'source') }), h("circle", { cx: tPos.x, cy: tPos.y, r: "4", class: "edge-handle target", onMouseDown: (e) => this.startEdgeReconnect(e, edge, 'target'), onTouchStart: (e) => this.startEdgeReconnect(e, edge, 'target') })));
+        });
+    }
+    startEdgeReconnect(e, edge, type) {
+        if (this.pendingConnection)
+            return;
+        e.preventDefault();
+        e.stopPropagation();
+        const otherId = type === 'source' ? edge.target : edge.source, otherNode = this.flowNodes.find(n => n.id === otherId);
+        if (!otherNode)
+            return;
+        const rect = this.container.getBoundingClientRect(), { x, y, zoom } = this.flowViewport, otherPos = this.getHandlePos(otherNode, type === 'source' ? edge.targetHandle : edge.sourceHandle), cx = 'touches' in e ? e.touches[0].clientX : e.clientX, cy = 'touches' in e ? e.touches[0].clientY : e.clientY;
+        this.service.deleteEdge(edge.id);
+        this.pendingConnection = { source: otherId, handle: (type === 'source' ? edge.targetHandle : edge.sourceHandle) || 'floating', startX: otherPos.x, startY: otherPos.y, mouseX: (cx - rect.left - x) / zoom, mouseY: (cy - rect.top - y) / zoom };
+        this.startConnectionHandler(otherId, type === 'source' ? 'target' : 'source');
+    }
+    renderNode(node) {
+        const isSelected = this.selectedNodes.includes(node.id);
+        const isFocused = this.focusedNodeId === node.id;
+        const shapeClass = node.shape ? `shape-${node.shape}` : '';
+        return (h("div", { key: node.id, "data-id": node.id, class: {
+                'node': true,
+                'selected': isSelected,
+                'dragging': this.draggingNodeId === node.id,
+                'collapsed': node.isCollapsed,
+                [node.className]: !!node.className,
+                [shapeClass]: !!shapeClass,
+                'focused': isFocused,
+                'turbo': this.turboMode,
+                [`type-${node.type}`]: true
+            }, style: {
+                left: `${Math.round(node.position.x)}px`,
+                top: `${Math.round(node.position.y)}px`,
+                width: node.width ? `${node.width}px` : (node.shape === 'diamond' ? '100px' : '150px'),
+                height: node.height ? `${node.height}px` : (node.shape === 'diamond' ? '100px' : '48px'),
+                transform: `rotate(${node.rotation || 0}deg) translateZ(0)`,
+                opacity: (this.focusedNodeId && !isFocused && node.parentId !== this.focusedNodeId) ? '0.3' : '1',
+                zIndex: isSelected ? '1000' : (node.zIndex || 10).toString(),
+                ...(node.style || {})
+            }, onMouseDown: (e) => this.handleNodeDragStart(e, node), onTouchStart: (e) => this.handleNodeDragStart(e, node), onClick: (e) => this.handleNodeClick(e, node.id), onDblClick: () => node.type === 'group' && (this.focusedNodeId = this.focusedNodeId === node.id ? null : node.id) }, this.shouldShowToolbar(node) && this.renderNodeToolbar(node), node.shape === 'diamond' && (h("div", { class: "node-shape-wrapper" }, h("svg", { viewBox: "0 0 100 100", preserveAspectRatio: "none", class: "node-shape-svg" }, h("path", { d: "M50 0 L100 50 L50 100 L0 50 Z", class: { 'shape-path': true, 'selected': isSelected } })))), h("div", { class: "node-content" }, (node.type === 'group' || node.isParent) && (h("button", { class: "node-collapse-btn", onClick: (e) => { e.stopPropagation(); this.service.toggleNodeCollapse(node.id); } }, h("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("path", { d: node.isCollapsed ? "M12 5v14M5 12h14" : "M5 12h14" })))), node.template ? h("div", { innerHTML: node.template }) : h("slot", { name: `node-${node.type}` }, node.data?.label || node.id)), node.handles ? node.handles.map(h => this.renderCustomHandle(node, h)) : [
+            h("div", { key: "top", class: "handle top", onMouseDown: (e) => this.startConnection(e, node.id, 'top') }),
+            h("div", { key: "right", class: "handle right", onMouseDown: (e) => this.startConnection(e, node.id, 'right') }),
+            h("div", { key: "bottom", class: "handle bottom", onMouseDown: (e) => this.startConnection(e, node.id, 'bottom') }),
+            h("div", { key: "left", class: "handle left", onMouseDown: (e) => this.startConnection(e, node.id, 'left') })
+        ], isSelected && node.resizable && h("div", { class: "node-resizer", onMouseDown: (e) => this.startResize(e, node) }), " ", isSelected && node.rotatable !== false && h("div", { class: "node-rotator", onMouseDown: (e) => this.startRotate(e, node) }, h("x-icon", { name: "autorenew", size: 12 })), " "));
+    }
+    shouldShowToolbar(node) {
+        if (!this.nodeToolbarVisible)
+            return false;
+        if (this.nodeToolbarMode === 'always')
+            return true;
+        if (this.nodeToolbarMode === 'selected')
+            return this.selectedNodes.includes(node.id);
+        return false; // For hover mode, we'd need some mouse state tracking or CSS
+    }
+    renderNodeToolbar(node) {
+        const colors = ['#ffffff', '#fecaca', '#bfdbfe', '#bbf7d0', '#fef08a', '#e9d5ff'];
+        return (h("div", { class: "node-toolbar" }, h("div", { class: "color-picker" }, colors.map(c => (h("div", { class: "color-swatch", style: { background: c }, onClick: () => this.service.updateNode(node.id, { style: { ...node.style, background: c } }) })))), h("x-divider", { type: "vertical" }), h("button", { onClick: () => this.service.deleteNode(node.id) }, h("x-icon", { name: "delete", size: 14 })), h("button", { onClick: () => this.service.copySelected() }, h("x-icon", { name: "content_copy", size: 14 }))));
+    }
+    renderCustomHandle(node, h) {
+        return (h("div", { class: { 'handle': true, [h.position]: true }, style: h.style, onMouseDown: (e) => this.startConnection(e, node.id, h.id), onTouchStart: (e) => this.startConnection(e, node.id, h.id) }));
+    }
+    handleNodeDragStart(e, node) {
+        if (node.dragHandle && !e.target.closest(node.dragHandle)) {
+            return;
+        }
+        e.preventDefault(); // Stop simulated mouse events
+        e.stopPropagation();
+        const clientX = 'touches' in e ? e.touches[0].clientX : e.clientX;
+        const clientY = 'touches' in e ? e.touches[0].clientY : e.clientY;
+        this.service.selectNode(node.id, ('shiftKey' in e && e.shiftKey));
+        this.startNodeDrag(clientX, clientY, node);
+    }
+    startNodeDrag(startX, startY, node) {
+        const startNodeX = node.position.x;
+        const startNodeY = node.position.y;
+        const zoom = this.flowViewport.zoom;
+        const dragThreshold = 5; // Increased threshold
+        let dragStarted = false;
+        const onMove = (me) => {
+            const cx = 'touches' in me ? me.touches[0].clientX : me.clientX;
+            const cy = 'touches' in me ? me.touches[0].clientY : me.clientY;
+            if (!dragStarted) {
+                const moveDist = Math.sqrt(Math.pow(cx - startX, 2) + Math.pow(cy - startY, 2));
+                if (moveDist > dragThreshold) {
+                    dragStarted = true;
+                    this.draggingNodeId = node.id;
+                    this.isInteracting = true; // Block external sync during drag
+                }
+                else {
+                    return;
+                }
+            }
+            const dx = (cx - startX) / zoom;
+            const dy = (cy - startY) / zoom;
+            const newX = startNodeX + dx;
+            const newY = startNodeY + dy;
+            this.service.updateNodePosition(node.id, newX, newY, this.snapToGridValue);
+            this.helperLines = this.calculateHelperLines(node.id, newX, newY);
+            this.checkProximity(node.id, newX, newY);
+        };
+        const onUp = () => {
+            if (this.proximityPreview) {
+                this.service.onConnect(this.proximityPreview);
+                this.proximityPreview = null;
+            }
+            document.removeEventListener('mousemove', onMove);
+            document.removeEventListener('mouseup', onUp);
+            document.removeEventListener('touchmove', onMove);
+            document.removeEventListener('touchend', onUp);
+            this.draggingNodeId = null;
+            this.handleUp();
+        };
+        document.addEventListener('mousemove', onMove);
+        document.addEventListener('mouseup', onUp);
+        document.addEventListener('touchmove', onMove);
+        document.addEventListener('touchend', onUp);
+    }
+    startResize(e, node) {
+        e.stopPropagation();
+        const clientX = 'touches' in e ? e.touches[0].clientX : e.clientX;
+        const clientY = 'touches' in e ? e.touches[0].clientY : e.clientY;
+        const startX = clientX;
+        const startY = clientY;
+        const startWidth = node.width || 150;
+        const startHeight = node.height || 48;
+        const zoom = this.flowViewport.zoom;
+        const onMove = (me) => {
+            const cx = 'touches' in me ? me.touches[0].clientX : me.clientX;
+            const cy = 'touches' in me ? me.touches[0].clientY : me.clientY;
+            const dw = (cx - startX) / zoom;
+            const dh = (cy - startY) / zoom;
+            this.service.setNodes(this.flowNodes.map(n => n.id === node.id ? { ...n, width: Math.max(50, startWidth + dw), height: Math.max(30, startHeight + dh) } : n));
+        };
+        const onUp = () => {
+            document.removeEventListener('mousemove', onMove);
+            document.removeEventListener('mouseup', onUp);
+            document.removeEventListener('touchmove', onMove);
+            document.removeEventListener('touchend', onUp);
+        };
+        document.addEventListener('mousemove', onMove);
+        document.addEventListener('mouseup', onUp);
+        document.addEventListener('touchmove', onMove);
+        document.addEventListener('touchend', onUp);
+    }
+    startRotate(e, node) {
+        e.stopPropagation();
+        const rect = this.container.getBoundingClientRect(), { x: vx, y: vy, zoom } = this.flowViewport;
+        const center = {
+            x: node.position.x + (node.width || 150) / 2,
+            y: node.position.y + (node.height || 48) / 2
+        };
+        const onMove = (me) => {
+            const cx = 'touches' in me ? me.touches[0].clientX : me.clientX;
+            const cy = 'touches' in me ? me.touches[0].clientY : me.clientY;
+            const mousePos = { x: (cx - rect.left - vx) / zoom, y: (cy - rect.top - vy) / zoom };
+            const angle = Math.atan2(mousePos.y - center.y, mousePos.x - center.x) * (180 / Math.PI) + 90;
+            this.service.rotateNode(node.id, angle);
+        };
+        const onUp = () => {
+            this.service.saveToHistory();
+            document.removeEventListener('mousemove', onMove);
+            document.removeEventListener('mouseup', onUp);
+            document.removeEventListener('touchmove', onMove);
+            document.removeEventListener('touchend', onUp);
+        };
+        document.addEventListener('mousemove', onMove);
+        document.addEventListener('mouseup', onUp);
+        document.addEventListener('touchmove', onMove);
+        document.addEventListener('touchend', onUp);
+    }
+    applyLassoSelection() {
+        if (!this.selectionRect)
+            return;
+        const { x, y, width, height } = this.selectionRect;
+        const zoom = this.flowViewport.zoom;
+        const viewX = this.flowViewport.x;
+        const viewY = this.flowViewport.y;
+        const rectX = (Math.min(x, x + width) - viewX) / zoom;
+        const rectY = (Math.min(y, y + height) - viewY) / zoom;
+        const rectW = Math.abs(width) / zoom;
+        const rectH = Math.abs(height) / zoom;
+        this.flowNodes.forEach(node => {
+            const nx = node.position.x;
+            const ny = node.position.y;
+            const nw = node.width || 150;
+            const nh = node.height || 48;
+            if (nx >= rectX && nx + nw <= rectX + rectW && ny >= rectY && ny + nh <= rectY + rectH) {
+                this.service.selectNode(node.id, true);
+            }
+        });
+    }
+    renderSelectionRect() {
+        if (!this.selectionRect)
+            return null;
+        const { x, y, width, height } = this.selectionRect;
+        return (h("div", { class: "selection-rect", style: {
+                left: `${Math.min(x, x + width)}px`,
+                top: `${Math.min(y, y + height)}px`,
+                width: `${Math.abs(width)}px`,
+                height: `${Math.abs(height)}px`
+            } }));
+    }
+    renderContextMenu() {
+        if (!this.contextMenu)
+            return null;
+        return (h("div", { class: "context-menu", style: { left: `${this.contextMenu.x}px`, top: `${this.contextMenu.y}px` } }, h("div", { class: "menu-item", onClick: () => this.addNodeAtPos(this.contextMenu.x, this.contextMenu.y) }, "Add Node Here"), h("div", { class: "divider" }), this.selectedNodes.length > 1 && (h("div", { class: "menu-item", onClick: () => this.service.groupSelected() }, "Group Selected")), h("div", { class: "menu-item", onClick: () => this.service.undo() }, "Undo"), h("div", { class: "menu-item", onClick: () => this.service.redo() }, "Redo")));
+    }
+    addNodeAtPos(clientX, clientY) {
+        const rect = this.container.getBoundingClientRect();
+        const { x, y, zoom } = this.flowViewport;
+        this.service.addNode({
+            id: `node-${Date.now()}`,
+            position: {
+                x: (clientX - rect.left - x) / zoom,
+                y: (clientY - rect.top - y) / zoom
+            },
+            data: { label: 'New Node' },
+            zIndex: 10
+        });
+    }
+    startConnection(e, nodeId, handle) {
+        if (this.pendingConnection)
+            return;
+        e.preventDefault(); // Stop simulated mouse events
+        e.stopPropagation();
+        const clientX = 'touches' in e ? e.touches[0].clientX : e.clientX;
+        const clientY = 'touches' in e ? e.touches[0].clientY : e.clientY;
+        const rect = this.container.getBoundingClientRect();
+        const { x, y, zoom } = this.flowViewport;
+        const node = this.flowNodes.find(n => n.id === nodeId);
+        if (!node)
+            return;
+        // Use handle center instead of click position for start point
+        const hPos = this.getHandlePos(node, handle);
+        this.pendingConnection = {
+            source: nodeId,
+            handle,
+            startX: hPos.x,
+            startY: hPos.y,
+            mouseX: (clientX - rect.left - x) / zoom,
+            mouseY: (clientY - rect.top - y) / zoom
+        };
+        this.proximityPreview = null; // Clear any existing previews
+        this.startConnectionHandler(nodeId, 'source');
+    }
+    startConnectionHandler(nodeId, handleType = 'source') {
+        const onUp = (de) => {
+            const pending = this.pendingConnection;
+            this.pendingConnection = null;
+            this.proximityPreview = null;
+            document.removeEventListener('mouseup', onUp);
+            document.removeEventListener('touchend', onUp);
+            if (!pending)
+                return;
+            const clientX = 'touches' in de ? de.touches[0].clientX : de.clientX, clientY = 'touches' in de ? de.touches[0].clientY : de.clientY, { x: vx, y: vy, zoom } = this.flowViewport, rect = this.container.getBoundingClientRect(), lx = (clientX - rect.left - vx) / zoom, ly = (clientY - rect.top - vy) / zoom, padding = 15, targetNode = this.flowNodes.find(n => {
+                const w = (n.width || 150) + padding * 2, h = (n.height || 48) + padding * 2;
+                return lx >= n.position.x - padding && lx <= n.position.x + w && ly >= n.position.y - padding && ly <= n.position.y + h;
+            });
+            if (targetNode && targetNode.id !== nodeId) {
+                const path = de.composedPath(), targetHandleEl = path.find(el => el.classList && el.classList.contains('handle')), targetHandle = targetHandleEl ? (Array.from(targetHandleEl.classList).find(c => ['top', 'right', 'bottom', 'left'].includes(c))) : 'floating';
+                const connection = handleType === 'source'
+                    ? { source: nodeId, target: targetNode.id, sourceHandle: pending.handle, targetHandle }
+                    : { source: targetNode.id, target: nodeId, sourceHandle: targetHandle, targetHandle: pending.handle };
+                if (this.service.isValidConnection(connection)) {
+                    this.service.onConnect(connection);
+                    this.xConnect.emit(connection);
+                }
+            }
+            else if (!targetNode) {
+                const newNodeId = `node-${Date.now()}`;
+                this.service.addNode({ id: newNodeId, position: { x: lx - 75, y: ly - 24 }, data: { label: 'New Node' }, zIndex: 10 });
+                const connection = handleType === 'source'
+                    ? { source: nodeId, target: newNodeId, sourceHandle: pending.handle, targetHandle: 'floating' }
+                    : { source: newNodeId, target: nodeId, sourceHandle: 'floating', targetHandle: pending.handle };
+                this.service.onConnect(connection);
+                this.xConnect.emit(connection);
+            }
+        };
+        document.addEventListener('mouseup', onUp);
+        document.addEventListener('touchend', onUp);
+    }
+    startDrawing(x, y) {
+        this.activeDrawing = {
+            id: `draw-${Date.now()}`,
+            type: (this.tool === 'rectangle' ? 'rectangle' : 'freehand'),
+            position: { x, y },
+            points: this.tool === 'freehand' ? [{ x, y }] : [],
+            width: 0,
+            height: 0,
+            style: { stroke: '#111', strokeWidth: '2', fill: 'none' }
+        };
+    }
+    renderDrawing(d) {
+        if (d.type === 'rectangle') {
+            return (h("rect", { x: Math.min(d.position.x, d.position.x + (d.width || 0)), y: Math.min(d.position.y, d.position.y + (d.height || 0)), width: Math.abs(d.width || 0), height: Math.abs(d.height || 0), style: d.style }));
+        }
+        else {
+            return (h("path", { d: d.points.map((p, i) => `${i === 0 ? 'M' : 'L'}${p.x},${p.y}`).join(' '), style: d.style }));
+        }
+    }
+    checkProximity(nodeId, nx, ny) {
+        const threshold = 50;
+        const node = this.flowNodes.find(n => n.id === nodeId);
+        if (!node)
+            return;
+        const nw = node.width || 150;
+        const nh = node.height || 48;
+        const nc = { x: nx + nw / 2, y: ny + nh / 2 };
+        let closest = null;
+        let minDist = threshold;
+        this.flowNodes.forEach(other => {
+            if (other.id === nodeId || other.parentId === nodeId)
+                return;
+            const ow = other.width || 150;
+            const oh = other.height || 48;
+            const oc = { x: other.position.x + ow / 2, y: other.position.y + oh / 2 };
+            const d = Math.sqrt((nc.x - oc.x) ** 2 + (nc.y - oc.y) ** 2);
+            if (d < minDist) {
+                minDist = d;
+                closest = { source: nodeId, target: other.id, sourceHandle: 'floating', targetHandle: 'floating' };
+            }
+        });
+        this.proximityPreview = closest;
+    }
+    calculateHelperLines(nodeId, x, y) {
+        const threshold = 10;
+        const lines = [];
+        this.flowNodes.forEach(other => {
+            if (other.id === nodeId || other.parentId === nodeId)
+                return;
+            if (Math.abs(x - other.position.x) < threshold)
+                lines.push({ x: other.position.x });
+            if (Math.abs(y - other.position.y) < threshold)
+                lines.push({ y: other.position.y });
+        });
+        return lines;
+    }
+    renderHelperLines() {
+        return h("svg", { class: "helper-lines-svg", style: { position: 'absolute', top: '0', left: '0', width: '100%', height: '100%', pointerEvents: 'none' } }, this.helperLines.map(line => line.x !== undefined ? h("line", { x1: line.x, y1: "-10000", x2: line.x, y2: "10000", stroke: "#3b82f6", "stroke-dasharray": "2,2" }) : h("line", { x1: "-10000", y1: line.y, x2: "10000", y2: line.y, stroke: "#3b82f6", "stroke-dasharray": "2,2" })));
+    }
+    static get watchers() { return {
+        "nodes": [{
+                "handleNodesPropChange": 0
+            }],
+        "edges": [{
+                "handleEdgesPropChange": 0
+            }],
+        "viewportValue": [{
+                "handleViewportChange": 0
+            }]
+    }; }
+};
+XWorkflow.style = xWorkflowCss();
+
+export { XAlert as x_alert, XBadge as x_badge, XFloatButton as x_float_button, XForm as x_form, XMenu as x_menu, XMenuItem as x_menu_item, XResult as x_result, XSelectOption as x_select_option, XTag as x_tag, XTextarea as x_textarea, XWorkflow as x_workflow };