@xlabs-store/core 0.0.1

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

@@ -0,0 +1,1370 @@
+import { r as registerInstance, c as createEvent, a as getElement, h, H as Host } from './index-ig_mFsVk.js';
+import { t as translate } from './locale.service-D66tF8_2.js';
+import { g as getIcon } from './config-BPeosvTA.js';
+import { P as PortalController } from './portal-controller-COpzIi1n.js';
+
+const xCheckboxCss = () => `@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-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;line-height:1;cursor:pointer;position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0;font-size:var(--x-checkbox-font-size, var(--x-font-size, 14px));font-family:inherit;color:var(--x-checkbox-label-color, var(--x-color-text, rgba(0, 0, 0, 0.88)));list-style:none;outline:none}:host(:focus-visible){outline:2px solid var(--x-color-primary-border, #91caff);outline-offset:1px;border-radius:4px}:host(.x-checkbox-wrapper-disabled){cursor:not-allowed;color:var(--x-checkbox-label-color-disabled, var(--x-color-text-disabled, rgba(0, 0, 0, 0.25)))}.x-checkbox{position:relative;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;line-height:1;white-space:nowrap;outline:none;cursor:pointer;vertical-align:sub}.x-checkbox-input{position:absolute;inset:0;z-index:1;width:100%;height:100%;cursor:pointer;opacity:0;margin:0;padding:0}.x-checkbox-inner{position:relative;top:0;left:0;display:block;width:var(--x-checkbox-size, var(--x-control-checkbox-size, 16px));height:var(--x-checkbox-size, var(--x-control-checkbox-size, 16px));direction:ltr;background-color:var(--x-checkbox-bg, var(--x-color-bg-container, #ffffff));border:var(--x-checkbox-border-width, var(--x-border-width-base, 1px)) solid var(--x-checkbox-border-color, var(--x-color-border, #d9d9d9));border-radius:var(--x-checkbox-border-radius, var(--x-border-radius-xs, 2px));border-collapse:separate;-webkit-transition:all var(--x-checkbox-motion-duration, var(--x-motion-duration-mid, 0.2s)) var(--x-checkbox-motion-timing, var(--x-motion-ease-in-out, cubic-bezier(0.645, 0.045, 0.355, 1)));transition:all var(--x-checkbox-motion-duration, var(--x-motion-duration-mid, 0.2s)) var(--x-checkbox-motion-timing, var(--x-motion-ease-in-out, cubic-bezier(0.645, 0.045, 0.355, 1)))}.x-checkbox-inner::after{position:absolute;top:50%;left:21.5%;display:table;width:5.71428571px;height:9.14285714px;border:2px solid var(--x-checkbox-check-color, var(--x-color-white, #ffffff));border-top:0;border-left:0;-webkit-transform:rotate(45deg) scale(0) translate(-50%, -50%);transform:rotate(45deg) scale(0) translate(-50%, -50%);opacity:0;-webkit-transition:all 0.1s cubic-bezier(0.71, -0.46, 0.88, 0.6), opacity 0.1s;transition:all 0.1s cubic-bezier(0.71, -0.46, 0.88, 0.6), opacity 0.1s;content:""}.x-checkbox:not(.x-checkbox-disabled):hover .x-checkbox-inner{border-color:var(--x-checkbox-border-color-hover, var(--x-color-primary, #1677ff))}:host(.x-checkbox-wrapper-checked) .x-checkbox-inner,.x-checkbox-checked .x-checkbox-inner{background-color:var(--x-checkbox-color, var(--x-color-primary, #1677ff));border-color:var(--x-checkbox-color, var(--x-color-primary, #1677ff))}:host(.x-checkbox-wrapper-checked) .x-checkbox-inner::after,.x-checkbox-checked .x-checkbox-inner::after{position:absolute;display:table;border:2px solid var(--x-checkbox-check-color, var(--x-color-white, #ffffff));border-top:0;border-left:0;-webkit-transform:rotate(45deg) scale(1) translate(-50%, -50%);transform:rotate(45deg) scale(1) translate(-50%, -50%);opacity:1;-webkit-transition:all var(--x-checkbox-motion-duration, var(--x-motion-duration-mid, 0.2s)) var(--x-checkbox-motion-timing-bounce, cubic-bezier(0.12, 0.4, 0.29, 1.46)) 0.1s;transition:all var(--x-checkbox-motion-duration, var(--x-motion-duration-mid, 0.2s)) var(--x-checkbox-motion-timing-bounce, cubic-bezier(0.12, 0.4, 0.29, 1.46)) 0.1s}:host(.x-checkbox-wrapper-checked) .x-checkbox:not(.x-checkbox-disabled):hover .x-checkbox-inner,.x-checkbox-checked:not(.x-checkbox-disabled):hover .x-checkbox-inner{background-color:var(--x-checkbox-color-hover, var(--x-color-primary-hover, #4096ff));border-color:var(--x-checkbox-color-hover, var(--x-color-primary-hover, #4096ff))}:host(.x-checkbox-wrapper-indeterminate:not(.x-checkbox-wrapper-checked)) .x-checkbox-inner,.x-checkbox-indeterminate .x-checkbox-inner{background-color:var(--x-checkbox-bg, var(--x-color-bg-container, #ffffff));border-color:var(--x-checkbox-color, var(--x-color-primary, #1677ff))}:host(.x-checkbox-wrapper-indeterminate:not(.x-checkbox-wrapper-checked)) .x-checkbox-inner::after,.x-checkbox-indeterminate .x-checkbox-inner::after{top:50%;left:50%;width:var(--x-checkbox-inner-size, var(--x-spacing-xs, 8px));height:var(--x-checkbox-inner-size, var(--x-spacing-xs, 8px));background-color:var(--x-checkbox-color, var(--x-color-primary, #1677ff));border:0;border-radius:0;-webkit-transform:translate(-50%, -50%) scale(1);transform:translate(-50%, -50%) scale(1);opacity:1;content:""}:host(.x-checkbox-wrapper-disabled) .x-checkbox,.x-checkbox-disabled{cursor:not-allowed}:host(.x-checkbox-wrapper-disabled) .x-checkbox-input,.x-checkbox-disabled .x-checkbox-input{cursor:not-allowed}:host(.x-checkbox-wrapper-disabled) .x-checkbox-inner,.x-checkbox-disabled .x-checkbox-inner{background-color:var(--x-checkbox-bg-disabled, var(--x-color-bg-container-disabled, rgba(0, 0, 0, 0.04)));border-color:var(--x-checkbox-border-color-disabled, var(--x-color-border, #d9d9d9)) !important}:host(.x-checkbox-wrapper-disabled) .x-checkbox-inner::after,.x-checkbox-disabled .x-checkbox-inner::after{border-color:var(--x-checkbox-check-color-disabled, var(--x-color-text-quaternary, rgba(0, 0, 0, 0.25)))}:host(.x-checkbox-wrapper-disabled.x-checkbox-wrapper-checked) .x-checkbox-inner,.x-checkbox-disabled.x-checkbox-checked .x-checkbox-inner{background-color:var(--x-checkbox-bg-disabled, var(--x-color-bg-container-disabled, rgba(0, 0, 0, 0.04)));border-color:var(--x-checkbox-border-color-disabled, var(--x-color-border, #d9d9d9)) !important}:host(.x-checkbox-wrapper-disabled.x-checkbox-wrapper-checked) .x-checkbox-inner::after,.x-checkbox-disabled.x-checkbox-checked .x-checkbox-inner::after{border-color:var(--x-checkbox-check-color-disabled, var(--x-color-text-quaternary, rgba(0, 0, 0, 0.25)))}.x-checkbox-label{line-height:1.5715;word-break:break-all}:host(.x-checkbox-wrapper-disabled) .x-checkbox-label{color:var(--x-checkbox-label-color-disabled, var(--x-color-text-disabled, rgba(0, 0, 0, 0.25)))}:host(.x-checkbox-placement-start){-ms-flex-direction:row-reverse;flex-direction:row-reverse}:host(.x-checkbox-placement-start) .x-checkbox-label{padding-right:var(--x-checkbox-label-padding, var(--x-spacing-xs, 8px));padding-left:0}:host(.x-checkbox-placement-end){-ms-flex-direction:row;flex-direction:row}:host(.x-checkbox-placement-end) .x-checkbox-label{padding-left:var(--x-checkbox-label-padding, var(--x-spacing-xs, 8px));padding-right:0}:host(.x-checkbox-placement-fixed){-ms-flex-direction:row-reverse;flex-direction:row-reverse}:host(.x-checkbox-placement-fixed) .x-checkbox-label{padding-right:var(--x-checkbox-label-padding, var(--x-spacing-xs, 8px));padding-left:0;width:var(--x-checkbox-label-width, 100px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:right}:host(.x-checkbox-placement-stacked){-ms-flex-direction:column-reverse;flex-direction:column-reverse;gap:var(--x-checkbox-label-padding, var(--x-spacing-xs, 8px))}:host(.x-checkbox-placement-stacked) .x-checkbox-label{padding:0;width:100%;text-align:center}:host(.x-checkbox-alignment-start){-ms-flex-align:start;align-items:flex-start}:host(.x-checkbox-alignment-center){-ms-flex-align:center;align-items:center}:host(.x-checkbox-alignment-end){-ms-flex-align:end;align-items:flex-end}`;
+
+const XCheckbox = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.xChange = createEvent(this, "xChange", 7);
+        this.xFocus = createEvent(this, "xFocus", 7);
+        this.xBlur = createEvent(this, "xBlur", 7);
+    }
+    get el() { return getElement(this); }
+    inputEl;
+    // ==================== Props ====================
+    /**
+     * Whether the checkbox is automatically focused on mount.
+     * @default false
+     * @example
+     * <x-checkbox autoFocus>Auto focus</x-checkbox>
+     */
+    autoFocus = false;
+    /**
+     * Whether the checkbox is checked (controlled mode).
+     * @example
+     * <x-checkbox checked>Checked</x-checkbox>
+     */
+    checked = false;
+    /**
+     * Whether the checkbox is checked by default (uncontrolled mode).
+     * @default false
+     * @example
+     * <x-checkbox defaultChecked>Default</x-checkbox>
+     */
+    defaultChecked = false;
+    /**
+     * Whether the checkbox is disabled.
+     * @default false
+     * @example
+     * <x-checkbox disabled>Disabled</x-checkbox>
+     */
+    disabled = false;
+    /**
+     * The indeterminate state of checkbox.
+     * Used when only some child checkboxes are checked.
+     * @default false
+     * @example
+     * <x-checkbox indeterminate>Select all</x-checkbox>
+     */
+    indeterminate = false;
+    /**
+     * The name attribute of the checkbox input.
+     * @example
+     * <x-checkbox name="fruits">Apple</x-checkbox>
+     */
+    name;
+    /**
+     * The value of the checkbox.
+     * @example
+     * <x-checkbox value="apple">Apple</x-checkbox>
+     */
+    value;
+    /**
+     * Custom class names for checkbox parts.
+     * @example
+     * <x-checkbox classNames={{ root: 'my-checkbox' }}>Custom</x-checkbox>
+     */
+    classNames;
+    /**
+     * Custom styles for checkbox parts.
+     * @example
+     * <x-checkbox styles={{ root: { marginRight: '8px' } }}>Styled</x-checkbox>
+     */
+    styles;
+    /**
+     * Unique identifier for the checkbox.
+     * @example
+     * <x-checkbox checkboxId="agree">Agree</x-checkbox>
+     */
+    checkboxId;
+    /**
+     * The placement of the label relative to the checkbox.
+     * @default 'start'
+     */
+    placement = 'start';
+    /**
+     * The alignment of the label relative to the checkbox.
+     * @default 'center'
+     */
+    alignment = 'center';
+    // ==================== Events ====================
+    /**
+     * Callback fired when the checkbox state changes.
+     * @example
+     * <x-checkbox onXChange={(ev) => console.log(ev.detail)}>Change</x-checkbox>
+     */
+    xChange;
+    /**
+     * Callback fired when the checkbox is focused.
+     * @example
+     * <x-checkbox onXFocus={() => {}}>Focus</x-checkbox>
+     */
+    xFocus;
+    /**
+     * Callback fired when the checkbox loses focus.
+     * @example
+     * <x-checkbox onXBlur={() => {}}>Blur</x-checkbox>
+     */
+    xBlur;
+    // ==================== Lifecycle ====================
+    componentWillLoad() {
+        if (this.defaultChecked && !this.checked) {
+            this.checked = true;
+        }
+    }
+    componentDidLoad() {
+        if (this.autoFocus && this.inputEl) {
+            this.inputEl.focus();
+        }
+    }
+    // ==================== Watchers ====================
+    handleCheckedChange() {
+        // Sync with parent if needed
+    }
+    handleIndeterminateChange(newValue) {
+        if (this.inputEl) {
+            this.inputEl.indeterminate = newValue;
+        }
+    }
+    // ==================== Methods ====================
+    /**
+     * Focus the checkbox input.
+     * @example
+     * await el.setFocus()
+     */
+    async setFocus() {
+        this.inputEl?.focus();
+    }
+    /**
+     * Remove focus from the checkbox input.
+     * @example
+     * await el.removeFocus()
+     */
+    async removeFocus() {
+        this.inputEl?.blur();
+    }
+    // ==================== Private Methods ====================
+    /**
+     * Handle mouse click event on the checkbox host.
+     *
+     * Flow:
+     * 1. Checks if checkbox is disabled.
+     * 2. If enabled:
+     *    - Toggles `checked` state.
+     *    - Emits `xChange` event with new value and native event.
+     *
+     * @param e - Mouse event.
+     */
+    handleClick = (e) => {
+        if (this.disabled) {
+            e.preventDefault();
+            e.stopPropagation();
+            return;
+        }
+        const newChecked = !this.checked;
+        this.checked = newChecked;
+        this.xChange.emit({
+            value: this.value,
+            checked: newChecked,
+            nativeEvent: e,
+        });
+    };
+    handleFocus = () => {
+        this.xFocus.emit();
+    };
+    handleBlur = () => {
+        this.xBlur.emit();
+    };
+    /**
+     * Handle keydown event for accessibility (Space/Enter).
+     *
+     * Flow:
+     * 1. Checks if checkbox is disabled.
+     * 2. Checks if key is 'Space' or 'Enter'.
+     * 3. If match:
+     *    - Prevents default scrolling/submission.
+     *    - Toggles `checked` state.
+     *    - Emits `xChange` event.
+     *
+     * @param e - Keyboard event.
+     */
+    handleKeyDown = (e) => {
+        if (this.disabled)
+            return;
+        if (e.key === ' ' || e.key === 'Enter') {
+            e.preventDefault();
+            const newChecked = !this.checked;
+            this.checked = newChecked;
+            this.xChange.emit({
+                value: this.value,
+                checked: newChecked,
+                nativeEvent: e,
+            });
+        }
+    };
+    // ==================== Render ====================
+    render() {
+        const wrapperClasses = {
+            'x-checkbox-wrapper': true,
+            'x-checkbox-wrapper-checked': this.checked,
+            'x-checkbox-wrapper-disabled': this.disabled,
+            'x-checkbox-wrapper-indeterminate': this.indeterminate,
+            [`x-checkbox-placement-${this.placement}`]: true,
+            [`x-checkbox-alignment-${this.alignment}`]: true,
+            [this.classNames?.root ?? '']: !!this.classNames?.root,
+        };
+        const checkboxClasses = {
+            'x-checkbox': true,
+            'x-checkbox-checked': this.checked,
+            'x-checkbox-disabled': this.disabled,
+            'x-checkbox-indeterminate': this.indeterminate && !this.checked,
+            [this.classNames?.checkbox ?? '']: !!this.classNames?.checkbox,
+        };
+        const innerClasses = {
+            'x-checkbox-inner': true,
+            [this.classNames?.inner ?? '']: !!this.classNames?.inner,
+        };
+        const labelClasses = {
+            'x-checkbox-label': true,
+            [this.classNames?.label ?? '']: !!this.classNames?.label,
+        };
+        const wrapperStyles = this.styles?.root;
+        const checkboxStyles = this.styles?.checkbox;
+        const innerStyles = this.styles?.inner;
+        const labelStyles = this.styles?.label;
+        return (h(Host, { key: 'a1c7291fd6e4031b6c8d0bea308dd6aea7153ad4', class: wrapperClasses, style: wrapperStyles, onClick: this.handleClick, onKeyDown: this.handleKeyDown, role: "checkbox", "aria-checked": this.indeterminate ? 'mixed' : this.checked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', tabindex: this.disabled ? -1 : 0 }, h("span", { key: '59675b4f86cdda584c581cbe30f802d68f6d60e9', class: checkboxClasses, style: checkboxStyles }, h("input", { key: 'ff2ff95534df771155a1b2ebd415d8fa0cec147b', ref: (el) => (this.inputEl = el), type: "checkbox", class: "x-checkbox-input", id: this.checkboxId, checked: this.checked, disabled: this.disabled, name: this.name, value: this.value, tabIndex: -1, onFocus: this.handleFocus, onBlur: this.handleBlur, onChange: (e) => e.stopPropagation() }), h("span", { key: '3649f0c10c84cd790968df35463c86cbebb16063', class: innerClasses, style: innerStyles })), h("span", { key: '29926839fb6291c5cddbf64dcfdfa67ac003729f', class: labelClasses, style: labelStyles }, h("slot", { key: 'b8f3d955db9c3370c9bb0f18ef158f64341619b6' }))));
+    }
+    static get watchers() { return {
+        "checked": [{
+                "handleCheckedChange": 0
+            }],
+        "indeterminate": [{
+                "handleIndeterminateChange": 0
+            }]
+    }; }
+};
+XCheckbox.style = xCheckboxCss();
+
+const xPaginationCss = () => `@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;font-size:var(--x-pagination-font-size, var(--x-font-size-base, 14px));line-height:var(--x-pagination-line-height, var(--x-line-height-base, 1.5714));color:var(--x-pagination-color, var(--x-color-text, rgba(0, 0, 0, 0.88)));-webkit-box-sizing:border-box;box-sizing:border-box}:host(.x-pagination-align-start){-ms-flex-pack:start;justify-content:flex-start}:host(.x-pagination-align-center){-ms-flex-pack:center;justify-content:center}:host(.x-pagination-align-end){-ms-flex-pack:end;justify-content:flex-end}:host(.x-pagination-disabled){cursor:not-allowed;opacity:0.65}:host(.x-pagination-disabled) .x-pagination-item,:host(.x-pagination-disabled) .x-pagination-prev,:host(.x-pagination-disabled) .x-pagination-next,:host(.x-pagination-disabled) .x-pagination-jump-prev,:host(.x-pagination-disabled) .x-pagination-jump-next{cursor:not-allowed;pointer-events:none}:host(.x-pagination-small){font-size:var(--x-pagination-font-size-sm, var(--x-font-size-sm, 12px))}:host(.x-pagination-small) .x-pagination-item,:host(.x-pagination-small) .x-pagination-prev,:host(.x-pagination-small) .x-pagination-next,:host(.x-pagination-small) .x-pagination-jump-prev,:host(.x-pagination-small) .x-pagination-jump-next{min-width:var(--x-pagination-item-size-sm, var(--x-control-height-sm, 24px));height:var(--x-pagination-item-size-sm, var(--x-control-height-sm, 24px));line-height:calc(var(--x-pagination-item-size-sm, var(--x-control-height-sm, 24px)) - 2px)}:host(.x-pagination-small) .x-pagination-options-quick-jumper input{height:var(--x-pagination-item-size-sm, var(--x-control-height-sm, 24px));font-size:var(--x-pagination-font-size-sm, var(--x-font-size-sm, 12px))}:host(.x-pagination-small) .x-pagination-simple-pager-input{width:var(--x-pagination-simple-input-width-sm, 40px);height:var(--x-pagination-item-size-sm, var(--x-control-height-sm, 24px));font-size:var(--x-pagination-font-size-sm, var(--x-font-size-sm, 12px))}:host(.x-pagination-large){font-size:var(--x-pagination-font-size-lg, var(--x-font-size-lg, 16px))}:host(.x-pagination-large) .x-pagination-item,:host(.x-pagination-large) .x-pagination-prev,:host(.x-pagination-large) .x-pagination-next,:host(.x-pagination-large) .x-pagination-jump-prev,:host(.x-pagination-large) .x-pagination-jump-next{min-width:var(--x-pagination-item-size-lg, var(--x-control-height-lg, 40px));height:var(--x-pagination-item-size-lg, var(--x-control-height-lg, 40px));line-height:calc(var(--x-pagination-item-size-lg, var(--x-control-height-lg, 40px)) - 2px)}:host(.x-pagination-large) .x-pagination-options-quick-jumper input{height:var(--x-pagination-item-size-lg, var(--x-control-height-lg, 40px));font-size:var(--x-pagination-font-size-lg, var(--x-font-size-lg, 16px))}:host(.x-pagination-large) .x-pagination-simple-pager-input{width:var(--x-pagination-simple-input-width-lg, 60px);height:var(--x-pagination-item-size-lg, var(--x-control-height-lg, 40px));font-size:var(--x-pagination-font-size-lg, var(--x-font-size-lg, 16px))}.x-pagination{margin:0;padding:0;list-style:none;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-align:center;align-items:center;gap:var(--x-pagination-item-margin, var(--x-spacing-xs, 8px))}.x-pagination-item{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;min-width:var(--x-pagination-item-size, var(--x-control-height, 32px));height:var(--x-pagination-item-size, var(--x-control-height, 32px));font-family:var(--x-pagination-font-family, var(--x-font-family-base, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif));text-align:center;vertical-align:middle;list-style:none;background-color:var(--x-pagination-item-bg, var(--x-color-bg-container, #ffffff));border:var(--x-pagination-border-width, var(--x-border-width-base, 1px)) solid var(--x-pagination-border-color, var(--x-color-border, #d9d9d9));border-radius:var(--x-pagination-border-radius, var(--x-border-radius-base, 6px));outline:0;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-transition:all var(--x-pagination-motion-duration, var(--x-motion-duration-mid, 0.2s));transition:all var(--x-pagination-motion-duration, var(--x-motion-duration-mid, 0.2s))}.x-pagination-item .x-pagination-item-link{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:100%;padding:0 var(--x-pagination-item-padding, var(--x-spacing-xs, 8px));color:var(--x-pagination-color, var(--x-color-text, rgba(0, 0, 0, 0.88)))}.x-pagination-item:hover:not(.x-pagination-item-active){border-color:var(--x-pagination-border-color-hover, var(--x-color-primary-hover, #4096ff))}.x-pagination-item:hover:not(.x-pagination-item-active) .x-pagination-item-link{color:var(--x-pagination-color-hover, var(--x-color-primary-hover, #4096ff))}.x-pagination-item:focus-visible{outline:2px solid var(--x-pagination-border-color-hover, var(--x-color-primary-hover, #4096ff));outline-offset:2px}.x-pagination-item-active{font-weight:var(--x-pagination-font-weight-active, var(--x-font-weight-semibold, 600));background-color:var(--x-pagination-item-bg-active, var(--x-color-bg-container, #ffffff));border-color:var(--x-pagination-border-color-active, var(--x-color-primary, #1677ff))}.x-pagination-item-active .x-pagination-item-link{color:var(--x-pagination-color-active, var(--x-color-primary, #1677ff))}.x-pagination-item-active:hover{border-color:var(--x-pagination-border-color-active, var(--x-color-primary, #1677ff))}.x-pagination-item-active:hover .x-pagination-item-link{color:var(--x-pagination-color-active, var(--x-color-primary, #1677ff))}.x-pagination-prev,.x-pagination-next{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;min-width:var(--x-pagination-item-size, var(--x-control-height, 32px));height:var(--x-pagination-item-size, var(--x-control-height, 32px));text-align:center;vertical-align:middle;list-style:none;background-color:var(--x-pagination-item-bg, var(--x-color-bg-container, #ffffff));border:var(--x-pagination-border-width, var(--x-border-width-base, 1px)) solid var(--x-pagination-border-color, var(--x-color-border, #d9d9d9));border-radius:var(--x-pagination-border-radius, var(--x-border-radius-base, 6px));outline:0;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-transition:all var(--x-pagination-motion-duration, var(--x-motion-duration-mid, 0.2s));transition:all var(--x-pagination-motion-duration, var(--x-motion-duration-mid, 0.2s))}.x-pagination-prev button,.x-pagination-next button{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:100%;padding:0;color:var(--x-pagination-color, var(--x-color-text, rgba(0, 0, 0, 0.88)));font-size:inherit;background:transparent;border:none;cursor:inherit}.x-pagination-prev .x-pagination-prev-icon,.x-pagination-prev .x-pagination-next-icon,.x-pagination-next .x-pagination-prev-icon,.x-pagination-next .x-pagination-next-icon{font-size:var(--x-pagination-jump-icon-size, 12px);font-weight:bold}.x-pagination-prev:hover:not(.x-pagination-disabled),.x-pagination-next:hover:not(.x-pagination-disabled){border-color:var(--x-pagination-border-color-hover, var(--x-color-primary-hover, #4096ff))}.x-pagination-prev:hover:not(.x-pagination-disabled) button,.x-pagination-next:hover:not(.x-pagination-disabled) button{color:var(--x-pagination-color-hover, var(--x-color-primary-hover, #4096ff))}.x-pagination-prev:focus-visible,.x-pagination-next:focus-visible{outline:2px solid var(--x-pagination-border-color-hover, var(--x-color-primary-hover, #4096ff));outline-offset:2px}.x-pagination-disabled{cursor:not-allowed;background-color:var(--x-pagination-item-bg-disabled, var(--x-color-bg-container-disabled, rgba(0, 0, 0, 0.04)));border-color:var(--x-pagination-border-color, var(--x-color-border, #d9d9d9))}.x-pagination-disabled button{color:var(--x-pagination-color-disabled, var(--x-color-text-disabled, rgba(0, 0, 0, 0.25)));cursor:not-allowed}.x-pagination-disabled:hover{border-color:var(--x-pagination-border-color, var(--x-color-border, #d9d9d9))}.x-pagination-disabled:hover button{color:var(--x-pagination-color-disabled, var(--x-color-text-disabled, rgba(0, 0, 0, 0.25)))}.x-pagination-jump-prev,.x-pagination-jump-next{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;min-width:var(--x-pagination-item-size, var(--x-control-height, 32px));height:var(--x-pagination-item-size, var(--x-control-height, 32px));text-align:center;vertical-align:middle;list-style:none;color:var(--x-pagination-color-quaternary, var(--x-color-text-quaternary, rgba(0, 0, 0, 0.25)));background-color:transparent;border:var(--x-pagination-border-width, var(--x-border-width-base, 1px)) solid transparent;border-radius:var(--x-pagination-border-radius, var(--x-border-radius-base, 6px));cursor:pointer;-webkit-transition:all var(--x-pagination-motion-duration, var(--x-motion-duration-mid, 0.2s));transition:all var(--x-pagination-motion-duration, var(--x-motion-duration-mid, 0.2s))}.x-pagination-jump-prev .x-pagination-item-ellipsis,.x-pagination-jump-next .x-pagination-item-ellipsis{position:relative;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:100%}.x-pagination-jump-prev .x-pagination-item-ellipsis-dot,.x-pagination-jump-next .x-pagination-item-ellipsis-dot{display:block;letter-spacing:2px}.x-pagination-jump-prev .x-pagination-item-ellipsis-icon,.x-pagination-jump-next .x-pagination-item-ellipsis-icon{display:none;color:var(--x-pagination-color-hover, var(--x-color-primary-hover, #4096ff));font-size:var(--x-pagination-jump-icon-size, 12px);font-weight:bold}.x-pagination-jump-prev:hover .x-pagination-item-ellipsis-dot,.x-pagination-jump-next:hover .x-pagination-item-ellipsis-dot{display:none}.x-pagination-jump-prev:hover .x-pagination-item-ellipsis-icon,.x-pagination-jump-next:hover .x-pagination-item-ellipsis-icon{display:block}.x-pagination-jump-prev:focus-visible,.x-pagination-jump-next:focus-visible{outline:2px solid var(--x-pagination-border-color-hover, var(--x-color-primary-hover, #4096ff));outline-offset:2px}.x-pagination-total-text{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;height:var(--x-pagination-item-size, var(--x-control-height, 32px));color:var(--x-pagination-color, var(--x-color-text, rgba(0, 0, 0, 0.88)))}.x-pagination-options{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;list-style:none}.x-pagination-options-quick-jumper{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;list-style:none;gap:8px}.x-pagination-options-quick-jumper span{color:var(--x-pagination-color, var(--x-color-text, rgba(0, 0, 0, 0.88)))}.x-pagination-options-quick-jumper input{width:var(--x-pagination-simple-input-width, 50px);height:var(--x-pagination-item-size, var(--x-control-height, 32px));padding:0 8px;font-size:var(--x-pagination-font-size, var(--x-font-size-base, 14px));color:var(--x-pagination-color, var(--x-color-text, rgba(0, 0, 0, 0.88)));text-align:center;background-color:var(--x-pagination-item-bg, var(--x-color-bg-container, #ffffff));border:var(--x-pagination-border-width, var(--x-border-width-base, 1px)) solid var(--x-pagination-border-color, var(--x-color-border, #d9d9d9));border-radius:var(--x-pagination-border-radius, var(--x-border-radius-base, 6px));-webkit-transition:all var(--x-pagination-motion-duration, var(--x-motion-duration-mid, 0.2s));transition:all var(--x-pagination-motion-duration, var(--x-motion-duration-mid, 0.2s))}.x-pagination-options-quick-jumper input:hover{border-color:var(--x-pagination-border-color-hover, var(--x-color-primary-hover, #4096ff))}.x-pagination-options-quick-jumper input:focus{outline:none;border-color:var(--x-pagination-border-color-active, var(--x-color-primary, #1677ff));-webkit-box-shadow:0 0 0 2px rgba(var(--x-pagination-border-color-active, var(--x-color-primary, #1677ff)), 0.2);box-shadow:0 0 0 2px rgba(var(--x-pagination-border-color-active, var(--x-color-primary, #1677ff)), 0.2)}.x-pagination-options-quick-jumper input:disabled{cursor:not-allowed;background-color:var(--x-pagination-item-bg-disabled, var(--x-color-bg-container-disabled, rgba(0, 0, 0, 0.04)));color:var(--x-pagination-color-disabled, var(--x-color-text-disabled, rgba(0, 0, 0, 0.25)))}.x-pagination-options-quick-jumper .x-pagination-options-quick-jumper-button{height:var(--x-pagination-item-size, var(--x-control-height, 32px));padding:0 12px;font-size:var(--x-pagination-font-size, var(--x-font-size-base, 14px));color:var(--x-pagination-color, var(--x-color-text, rgba(0, 0, 0, 0.88)));background-color:var(--x-pagination-item-bg, var(--x-color-bg-container, #ffffff));border:var(--x-pagination-border-width, var(--x-border-width-base, 1px)) solid var(--x-pagination-border-color, var(--x-color-border, #d9d9d9));border-radius:var(--x-pagination-border-radius, var(--x-border-radius-base, 6px));cursor:pointer;-webkit-transition:all var(--x-pagination-motion-duration, var(--x-motion-duration-mid, 0.2s));transition:all var(--x-pagination-motion-duration, var(--x-motion-duration-mid, 0.2s))}.x-pagination-options-quick-jumper .x-pagination-options-quick-jumper-button:hover{border-color:var(--x-pagination-border-color-hover, var(--x-color-primary-hover, #4096ff));color:var(--x-pagination-color-hover, var(--x-color-primary-hover, #4096ff))}.x-pagination-options-quick-jumper .x-pagination-options-quick-jumper-button:disabled{cursor:not-allowed;background-color:var(--x-pagination-item-bg-disabled, var(--x-color-bg-container-disabled, rgba(0, 0, 0, 0.04)));color:var(--x-pagination-color-disabled, var(--x-color-text-disabled, rgba(0, 0, 0, 0.25)))}.x-pagination-simple .x-pagination-prev,.x-pagination-simple .x-pagination-next{background:transparent;border-color:transparent}.x-pagination-simple .x-pagination-prev:hover:not(.x-pagination-disabled),.x-pagination-simple .x-pagination-next:hover:not(.x-pagination-disabled){background-color:var(--x-pagination-item-bg-disabled, var(--x-color-bg-container-disabled, rgba(0, 0, 0, 0.04)))}.x-pagination-simple-pager{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;gap:4px;list-style:none}.x-pagination-simple-pager-input{width:var(--x-pagination-simple-input-width, 50px);height:var(--x-pagination-item-size, var(--x-control-height, 32px));padding:0 8px;font-size:var(--x-pagination-font-size, var(--x-font-size-base, 14px));color:var(--x-pagination-color, var(--x-color-text, rgba(0, 0, 0, 0.88)));text-align:center;background-color:var(--x-pagination-item-bg, var(--x-color-bg-container, #ffffff));border:var(--x-pagination-border-width, var(--x-border-width-base, 1px)) solid var(--x-pagination-border-color, var(--x-color-border, #d9d9d9));border-radius:var(--x-pagination-border-radius, var(--x-border-radius-base, 6px));-webkit-transition:all var(--x-pagination-motion-duration, var(--x-motion-duration-mid, 0.2s));transition:all var(--x-pagination-motion-duration, var(--x-motion-duration-mid, 0.2s))}.x-pagination-simple-pager-input:hover{border-color:var(--x-pagination-border-color-hover, var(--x-color-primary-hover, #4096ff))}.x-pagination-simple-pager-input:focus{outline:none;border-color:var(--x-pagination-border-color-active, var(--x-color-primary, #1677ff));-webkit-box-shadow:0 0 0 2px rgba(var(--x-pagination-border-color-active, var(--x-color-primary, #1677ff)), 0.2);box-shadow:0 0 0 2px rgba(var(--x-pagination-border-color-active, var(--x-color-primary, #1677ff)), 0.2)}.x-pagination-simple-pager-input:-moz-read-only{cursor:not-allowed;background-color:var(--x-pagination-item-bg-disabled, var(--x-color-bg-container-disabled, rgba(0, 0, 0, 0.04)));color:var(--x-pagination-color-disabled, var(--x-color-text-disabled, rgba(0, 0, 0, 0.25)))}.x-pagination-simple-pager-input:disabled,.x-pagination-simple-pager-input:read-only{cursor:not-allowed;background-color:var(--x-pagination-item-bg-disabled, var(--x-color-bg-container-disabled, rgba(0, 0, 0, 0.04)));color:var(--x-pagination-color-disabled, var(--x-color-text-disabled, rgba(0, 0, 0, 0.25)))}.x-pagination-simple-pager-slash{color:var(--x-pagination-color-quaternary, var(--x-color-text-quaternary, rgba(0, 0, 0, 0.25)))}.x-pagination-simple-pager-total{color:var(--x-pagination-color, var(--x-color-text, rgba(0, 0, 0, 0.88)))}`;
+
+const XPagination = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.xChange = createEvent(this, "xChange", 7);
+        this.xShowSizeChange = createEvent(this, "xShowSizeChange", 7);
+    }
+    // ==================== Props ====================
+    /**
+     * Current page number (controlled).
+     * @type {number}
+     * @example
+     * <x-pagination current={2}></x-pagination>
+     */
+    current;
+    /**
+     * Default initial page number (uncontrolled).
+     * @type {number}
+     * @default 1
+     * @example
+     * <x-pagination defaultCurrent={1}></x-pagination>
+     */
+    defaultCurrent = 1;
+    /**
+     * Default number of data items per page.
+     * @type {number}
+     * @default 10
+     * @example
+     * <x-pagination defaultPageSize={20}></x-pagination>
+     */
+    defaultPageSize = 10;
+    /**
+     * Disable pagination interaction.
+     * @type {boolean}
+     * @default false
+     * @example
+     * <x-pagination disabled></x-pagination>
+     */
+    disabled = false;
+    /**
+     * Whether to hide pager when there is only one page.
+     * @type {boolean}
+     * @default false
+     * @example
+     * <x-pagination hideOnSinglePage></x-pagination>
+     */
+    hideOnSinglePage = false;
+    /**
+     * Number of data items per page (controlled).
+     * @type {number}
+     * @example
+     * <x-pagination pageSize={50}></x-pagination>
+     */
+    pageSize;
+    /**
+     * Options providing selectable page sizes.
+     * @type {number[]}
+     * @default [10, 20, 50, 100]
+     * @example
+     * <x-pagination pageSizeOptions={[10, 20, 50, 100]}></x-pagination>
+     */
+    pageSizeOptions = [10, 20, 50, 100];
+    /**
+     * Minimum total items required to automatically show the size changer.
+     * @type {number}
+     * @default 50
+     * @example
+     * <x-pagination totalBoundaryShowSizeChanger={100}></x-pagination>
+     */
+    totalBoundaryShowSizeChanger = 50;
+    /**
+     * Force show/hide size changer regardless of total items.
+     * @type {boolean}
+     * @example
+     * <x-pagination showSizeChanger={true}></x-pagination>
+     */
+    showSizeChanger;
+    /**
+     * Show quick jumper to skip to a specific page.
+     * @type {boolean | PaginationQuickJumper}
+     * @default false
+     * @example
+     * <x-pagination showQuickJumper></x-pagination>
+     */
+    showQuickJumper = false;
+    /**
+     * Function to customize the display of total items and current range.
+     * @type {(total: number, range: [number, number]) => string}
+     * @example
+     * <x-pagination showTotal={(total, range) => `${range[0]}-${range[1]} of ${total} items`}></x-pagination>
+     */
+    showTotal;
+    /**
+     * Show fewer items in the pager (useful for narrow spaces).
+     * @type {boolean}
+     * @default false
+     * @example
+     * <x-pagination showLessItems></x-pagination>
+     */
+    showLessItems = false;
+    /**
+     * Whether to show title attributes on the pager elements.
+     * @type {boolean}
+     * @default true
+     * @example
+     * <x-pagination showTitle={false}></x-pagination>
+     */
+    showTitle = true;
+    /**
+     * Enable simple mode navigation.
+     * @type {boolean | PaginationSimple}
+     * @default false
+     * @example
+     * <x-pagination simple></x-pagination>
+     */
+    simple = false;
+    /**
+     * Component size: 'small', 'middle', or 'large'.
+     * @type {PaginationSize}
+     * @default 'middle'
+     * @example
+     * <x-pagination size="small"></x-pagination>
+     */
+    size = 'middle';
+    /**
+     * Total number of data items.
+     * @type {number}
+     * @default 0
+     * @example
+     * <x-pagination total={120}></x-pagination>
+     */
+    total = 0;
+    /**
+     * Alignment of the pagination container.
+     * @type {PaginationAlign}
+     * @default 'start'
+     * @example
+     * <x-pagination align="center"></x-pagination>
+     */
+    align = 'start';
+    /**
+     * If set, pagination will be responsive and adjust its UI.
+     * @type {boolean}
+     * @default false
+     * @example
+     * <x-pagination responsive></x-pagination>
+     */
+    responsive = false;
+    /**
+     * Custom CSS class names for internal sub-components.
+     * @type {PaginationClassNames}
+     * @example
+     * <x-pagination classNames={{ root: 'my-pg', item: 'pg-item' }}></x-pagination>
+     */
+    classNames = {};
+    /**
+     * Inline styles for internal sub-components.
+     * @type {PaginationStyles}
+     * @example
+     * <x-pagination styles={{ root: 'margin-top: 10px;' }}></x-pagination>
+     */
+    styles = {};
+    // ==================== Events ====================
+    /**
+     * Emitted when current page number or page size is changed.
+     * Useful for triggering data re-fetching.
+     * @event xChange
+     */
+    xChange;
+    /**
+     * Emitted specifically when the page size is changed via the selector.
+     * @event xShowSizeChange
+     */
+    xShowSizeChange;
+    // ==================== State ====================
+    /** Internal state tracking current page to handle uncontrolled/controlled logic sync. */
+    internalCurrent = 1;
+    /** Internal state tracking current items per page. */
+    internalPageSize = 10;
+    /** Temporary string value typed into the jump input before confirming (Enter/Go). */
+    jumpValue = '';
+    // ==================== Lifecycle ====================
+    /** Sets up initial internal state from props during component initialization. */
+    componentWillLoad() {
+        this.internalCurrent = this.current ?? this.defaultCurrent;
+        this.internalPageSize = this.pageSize ?? this.defaultPageSize;
+    }
+    /**
+     * Syncs internal page state when the 'current' prop is updated externally.
+     * @param {number} newValue - The new page number.
+     */
+    watchCurrent(newValue) {
+        if (newValue !== undefined) {
+            this.internalCurrent = newValue;
+        }
+    }
+    /**
+     * Syncs internal page size when the 'pageSize' prop is updated externally.
+     * @param {number} newValue - The new number of items per page.
+     */
+    watchPageSize(newValue) {
+        if (newValue !== undefined) {
+            this.internalPageSize = newValue;
+        }
+    }
+    // ==================== Helpers ====================
+    /** @returns {number} The total number of pages based on total items and current page size. */
+    get totalPages() {
+        return Math.max(1, Math.ceil(this.total / this.internalPageSize));
+    }
+    /** @returns {boolean} True if the current page is the first page. */
+    get isFirstPage() {
+        return this.internalCurrent === 1;
+    }
+    /** @returns {boolean} True if the current page is the last page. */
+    get isLastPage() {
+        return this.internalCurrent === this.totalPages;
+    }
+    /** @returns {boolean} Determines if the page size changer dropdown should be rendered. */
+    get shouldShowSizeChanger() {
+        // If explicitly set via prop, use that value
+        if (this.showSizeChanger !== undefined) {
+            return this.showSizeChanger;
+        }
+        // Otherwise, show it only if the total item count exceeds the boundary threshold
+        return this.total > this.totalBoundaryShowSizeChanger;
+    }
+    /** @returns {[number, number]} The start and end item indices for the current page. */
+    get range() {
+        const start = (this.internalCurrent - 1) * this.internalPageSize + 1;
+        const end = Math.min(this.internalCurrent * this.internalPageSize, this.total);
+        return [start, end];
+    }
+    // ==================== Handlers ====================
+    /**
+     * Validates and processes a request to change the current page.
+     * @param {number} page - The target page number.
+     */
+    handlePageChange = (page) => {
+        // Block navigation if component is disabled
+        if (this.disabled)
+            return;
+        // Clamp the page number between 1 and the maximum total pages
+        const validPage = Math.max(1, Math.min(page, this.totalPages));
+        // Only trigger update if the page is actually different from the current one
+        if (validPage !== this.internalCurrent) {
+            this.internalCurrent = validPage;
+            this.xChange.emit({
+                current: validPage,
+                pageSize: this.internalPageSize,
+            });
+        }
+    };
+    /** Navigates to the previous page if available. */
+    handlePrev = () => {
+        if (!this.isFirstPage && !this.disabled) {
+            this.handlePageChange(this.internalCurrent - 1);
+        }
+    };
+    /** Navigates to the next page if available. */
+    handleNext = () => {
+        if (!this.isLastPage && !this.disabled) {
+            this.handlePageChange(this.internalCurrent + 1);
+        }
+    };
+    /** Skips backward by a set amount of pages (3 or 5). */
+    handleJumpPrev = () => {
+        const jumpSize = this.showLessItems ? 3 : 5;
+        this.handlePageChange(Math.max(1, this.internalCurrent - jumpSize));
+    };
+    /** Skips forward by a set amount of pages (3 or 5). */
+    handleJumpNext = () => {
+        const jumpSize = this.showLessItems ? 3 : 5;
+        this.handlePageChange(Math.min(this.totalPages, this.internalCurrent + jumpSize));
+    };
+    /**
+     * Handles page size selection changes.
+     * Recalculates the current page to keep the first visible item consistent.
+     */
+    handleSizeChange = (e) => {
+        const newSize = Number(e.detail.value);
+        if (newSize !== this.internalPageSize) {
+            // Calculate the current page in the new sizing to keep the user at the same data point
+            const newCurrent = Math.ceil((this.range[0]) / newSize);
+            this.internalPageSize = newSize;
+            this.internalCurrent = newCurrent;
+            this.xShowSizeChange.emit({
+                current: newCurrent,
+                size: newSize,
+            });
+            this.xChange.emit({
+                current: newCurrent,
+                pageSize: newSize,
+            });
+        }
+    };
+    /** Updates the temporary jump input value on every keystroke. */
+    handleJumpInputChange = (e) => {
+        const target = e.target;
+        this.jumpValue = target.value;
+    };
+    /** Listens for 'Enter' key on the jump input to trigger navigation. */
+    handleJumpInputKeyDown = (e) => {
+        if (e.key === 'Enter') {
+            this.handleJump();
+        }
+    };
+    /** Executes the jump to the page number currently in the jump input. */
+    handleJump = () => {
+        const page = parseInt(this.jumpValue, 10);
+        // Validate that the input is a valid number within page bounds
+        if (!isNaN(page) && page >= 1 && page <= this.totalPages) {
+            this.handlePageChange(page);
+        }
+        // Reset the input field after attempt
+        this.jumpValue = '';
+    };
+    // ==================== Render Helpers ====================
+    /**
+     * Logic to determine which page numbers should be displayed in the pager.
+     * Automatically handles ellipsis ('jump-prev', 'jump-next') for large datasets.
+     *
+     * Flow:
+     * 1. Check if total pages fits within the maximum count (5 or 7).
+     * 2. If it fits, show all pages.
+     * 3. Else, calculate left/right bounds around the current page.
+     * 4. Add ellipses if the bounds don't reach the first or last page.
+     *
+     * @returns {(number | string)[]} Array of page numbers or jump string identifiers.
+     */
+    getPageNumbers() {
+        const { totalPages, internalCurrent, showLessItems } = this;
+        const pages = [];
+        // Determine maximum visible slots based on showLessItems prop
+        const pagerCount = showLessItems ? 5 : 7;
+        const halfPagerCount = Math.floor(pagerCount / 2);
+        if (totalPages <= pagerCount) {
+            // Total count is small enough: render the full list without ellipsis
+            for (let i = 1; i <= totalPages; i++) {
+                pages.push(i);
+            }
+        }
+        else {
+            // Always keep the first page visible
+            pages.push(1);
+            // Calculate the sliding window of middle pages
+            let left = Math.max(2, internalCurrent - halfPagerCount + 1);
+            let right = Math.min(totalPages - 1, internalCurrent + halfPagerCount - 1);
+            // Shift indices if we are too close to either boundary
+            if (internalCurrent - 1 <= halfPagerCount) {
+                right = pagerCount - 2;
+            }
+            if (totalPages - internalCurrent <= halfPagerCount) {
+                left = totalPages - pagerCount + 3;
+            }
+            // Add left ellipsis if it bypasses pages 2...
+            if (left > 2) {
+                pages.push('jump-prev');
+            }
+            // Render the middle block of numbers
+            for (let i = left; i <= right; i++) {
+                pages.push(i);
+            }
+            // Add right ellipsis if it skips pages before the last page
+            if (right < totalPages - 1) {
+                pages.push('jump-next');
+            }
+            // Always keep the last page visible
+            pages.push(totalPages);
+        }
+        return pages;
+    }
+    /**
+     * Renders a single page item (number or jump button).
+     * @param {number | string} page - Page number or identifier.
+     * @param {PaginationItemType} type - Type of the item ('page', 'jump-prev', etc.).
+     * @param {number} index - For key tracking.
+     */
+    renderItem(page, type, index) {
+        const { disabled, internalCurrent, showTitle, classNames, styles } = this;
+        const isPage = typeof page === 'number';
+        const isActive = isPage && page === internalCurrent;
+        const itemClasses = {
+            'x-pagination-item': true,
+            'x-pagination-item-active': isActive,
+            'x-pagination-jump-prev': type === 'jump-prev',
+            'x-pagination-jump-next': type === 'jump-next',
+            [classNames.item || '']: !!classNames.item,
+        };
+        // Handle click based on item type
+        // Flow:
+        // 1. Checks disabled state.
+        // 2. If page number, navigates to that page.
+        // 3. If jump button, navigates forward/backward by jump size.
+        const handleClick = () => {
+            if (disabled)
+                return;
+            if (isPage) {
+                this.handlePageChange(page);
+            }
+            else if (type === 'jump-prev') {
+                this.handleJumpPrev();
+            }
+            else if (type === 'jump-next') {
+                this.handleJumpNext();
+            }
+        };
+        const getTitle = () => {
+            if (!showTitle)
+                return undefined;
+            if (isPage)
+                return String(page);
+            if (type === 'jump-prev')
+                return `${translate('Pagination.prev_page', {}, 'Previous')} ${this.showLessItems ? 3 : 5} ${translate('Pagination.page', {}, 'pages')}`;
+            if (type === 'jump-next')
+                return `${translate('Pagination.next_page', {}, 'Next')} ${this.showLessItems ? 3 : 5} ${translate('Pagination.page', {}, 'pages')}`;
+            return undefined;
+        };
+        const renderContent = () => {
+            if (isPage) {
+                return h("span", { class: "x-pagination-item-link" }, page);
+            }
+            // Ellipsis with double arrow on hover
+            return (h("span", { class: "x-pagination-item-link x-pagination-item-ellipsis" }, h("span", { class: "x-pagination-item-ellipsis-dot" }, h("x-icon", { name: getIcon('more'), rotate: 90 })), h("span", { class: "x-pagination-item-ellipsis-icon" }, type === 'jump-prev' ? h("x-icon", { name: getIcon('doubleArrowLeft') }) : h("x-icon", { name: getIcon('doubleArrowRight') }))));
+        };
+        return (h("li", { "data-key": `page-${index}`, class: itemClasses, style: styles.item, title: getTitle(), tabIndex: disabled ? -1 : 0, onClick: handleClick, onKeyDown: (e) => e.key === 'Enter' && handleClick(), part: "item", "aria-current": isActive ? 'page' : undefined }, renderContent()));
+    }
+    /** Renders the 'backward' navigation button. */
+    renderPrev() {
+        const { disabled, isFirstPage, showTitle, classNames, styles } = this;
+        const isDisabled = disabled || isFirstPage;
+        const prevClasses = {
+            'x-pagination-prev': true,
+            'x-pagination-disabled': isDisabled,
+            [classNames.prev || '']: !!classNames.prev,
+        };
+        return (h("li", { class: prevClasses, style: styles.prev, title: showTitle ? translate('Pagination.prev_page', {}, 'Previous Page') : undefined, tabIndex: isDisabled ? -1 : 0, onClick: this.handlePrev, onKeyDown: (e) => e.key === 'Enter' && this.handlePrev(), part: "prev", "aria-disabled": isDisabled ? 'true' : undefined }, h("button", { type: "button", disabled: isDisabled, class: "x-pagination-item-link" }, h("span", { class: "x-pagination-prev-icon" }, h("x-icon", { name: getIcon('arrowLeft') })))));
+    }
+    /** Renders the 'forward' navigation button. */
+    renderNext() {
+        const { disabled, isLastPage, showTitle, classNames, styles } = this;
+        const isDisabled = disabled || isLastPage;
+        const nextClasses = {
+            'x-pagination-next': true,
+            'x-pagination-disabled': isDisabled,
+            [classNames.next || '']: !!classNames.next,
+        };
+        return (h("li", { class: nextClasses, style: styles.next, title: showTitle ? translate('Pagination.next_page', {}, 'Next Page') : undefined, tabIndex: isDisabled ? -1 : 0, onClick: this.handleNext, onKeyDown: (e) => e.key === 'Enter' && this.handleNext(), part: "next", "aria-disabled": isDisabled ? 'true' : undefined }, h("button", { type: "button", disabled: isDisabled, class: "x-pagination-item-link" }, h("span", { class: "x-pagination-next-icon" }, h("x-icon", { name: getIcon('arrowRight') })))));
+    }
+    /** Renders the dropdown for selecting items-per-page. */
+    renderSizeChanger() {
+        const { disabled, internalPageSize, pageSizeOptions, classNames, styles } = this;
+        const optionsClasses = {
+            'x-pagination-options': true,
+            [classNames.options || '']: !!classNames.options,
+        };
+        const options = pageSizeOptions.map((size) => ({
+            value: size,
+            label: `${size} ${translate('Pagination.items_per_page', {}, '/ page')}`,
+        }));
+        return (h("li", { class: optionsClasses, style: styles.options, part: "options" }, h("x-select", { class: "x-pagination-options-size-changer", disabled: disabled, value: internalPageSize, onXChange: this.handleSizeChange, options: options })));
+    }
+    /** Renders the numeric input for jumping to a specific page. */
+    renderQuickJumper() {
+        const { disabled, showQuickJumper, classNames, styles } = this;
+        const goButton = typeof showQuickJumper === 'object'
+            ? showQuickJumper.goButton
+            : translate('global.go', {}, 'Go');
+        const jumperClasses = {
+            'x-pagination-options-quick-jumper': true,
+            [classNames.jumper || '']: !!classNames.jumper,
+        };
+        return (h("li", { class: jumperClasses, style: styles.jumper, part: "jumper" }, h("span", null, translate('Pagination.jump_to', {}, 'Go to')), h("input", { type: "text", value: this.jumpValue, disabled: disabled, onInput: this.handleJumpInputChange, onKeyDown: this.handleJumpInputKeyDown }), goButton && (h("button", { type: "button", class: "x-pagination-options-quick-jumper-button", disabled: disabled, onClick: this.handleJump }, goButton))));
+    }
+    /** Renders the total summary text. */
+    renderTotal() {
+        const { showTotal, total, range, classNames, styles } = this;
+        if (!showTotal)
+            return null;
+        const totalText = showTotal(total, range);
+        const totalClasses = {
+            'x-pagination-total-text': true,
+            [classNames.total || '']: !!classNames.total,
+        };
+        return (h("li", { class: totalClasses, style: styles.total, part: "total" }, totalText));
+    }
+    /** Renders the minimalist 'simple' mode variant. */
+    renderSimple() {
+        const { disabled, internalCurrent, totalPages, simple, showTitle, classNames, styles } = this;
+        const isReadOnly = typeof simple === 'object' && simple.readOnly;
+        return (h("ul", { class: "x-pagination x-pagination-simple", style: styles.root }, this.renderPrev(), h("li", { class: "x-pagination-simple-pager", title: showTitle ? `${internalCurrent}/${totalPages}` : undefined }, h("input", { type: "text", value: internalCurrent, disabled: disabled, readOnly: isReadOnly, onInput: (e) => {
+                if (!isReadOnly && !disabled) {
+                    const target = e.target;
+                    const page = parseInt(target.value, 10);
+                    if (!isNaN(page)) {
+                        this.handlePageChange(page);
+                    }
+                }
+            }, onKeyDown: (e) => {
+                if (e.key === 'Enter' && !isReadOnly && !disabled) {
+                    const target = e.target;
+                    const page = parseInt(target.value, 10);
+                    if (!isNaN(page)) {
+                        this.handlePageChange(page);
+                    }
+                }
+            }, class: {
+                'x-pagination-simple-pager-input': true,
+                [classNames.item || '']: !!classNames.item,
+            }, style: styles.item }), h("span", { class: "x-pagination-simple-pager-slash" }, "/"), h("span", { class: "x-pagination-simple-pager-total" }, totalPages)), this.renderNext(), this.shouldShowSizeChanger && this.renderSizeChanger()));
+    }
+    // ==================== Render ====================
+    /** Main render entry point. Manages visibility and switcher between mode layouts. */
+    render() {
+        const { hideOnSinglePage, disabled, size, align, simple, showQuickJumper, classNames, styles, } = this;
+        // Hide on single page
+        if (hideOnSinglePage && this.totalPages <= 1) {
+            return null;
+        }
+        // Simple mode
+        if (simple) {
+            return (h(Host, { class: {
+                    'x-pagination-disabled': disabled,
+                    'x-pagination-small': size === 'small',
+                    'x-pagination-large': size === 'large',
+                    [`x-pagination-align-${align}`]: true,
+                    [classNames.root || '']: !!classNames.root,
+                } }, this.renderSimple()));
+        }
+        // Full mode
+        const pageNumbers = this.getPageNumbers();
+        return (h(Host, { class: {
+                'x-pagination-disabled': disabled,
+                'x-pagination-small': size === 'small',
+                'x-pagination-large': size === 'large',
+                [`x-pagination-align-${align}`]: true,
+                [classNames.root || '']: !!classNames.root,
+            } }, h("ul", { class: "x-pagination", style: styles.root, part: "pagination", role: "navigation", "aria-label": "Pagination" }, this.renderTotal(), this.renderPrev(), pageNumbers.map((page, index) => {
+            const type = typeof page === 'number'
+                ? 'page'
+                : page;
+            return this.renderItem(page, type, index);
+        }), this.renderNext(), this.shouldShowSizeChanger && this.renderSizeChanger(), showQuickJumper && this.renderQuickJumper())));
+    }
+    static get watchers() { return {
+        "current": [{
+                "watchCurrent": 0
+            }],
+        "pageSize": [{
+                "watchPageSize": 0
+            }]
+    }; }
+};
+XPagination.style = xPaginationCss();
+
+const xPopoverCss = () => `@charset "UTF-8";:root{--x-color-primary:#1677ff;--x-color-primary-rgb:22, 119, 255;--x-color-primary-contrast:#ffffff;--x-color-primary-contrast-rgb:255, 255, 255;--x-color-primary-shade:#0958d9;--x-color-primary-tint:#4096ff;--x-color-primary-bg:#e6f4ff;--x-color-primary-bg-hover:#bae0ff;--x-color-primary-border:#91caff;--x-color-primary-border-hover:#69b1ff;--x-color-primary-hover:#4096ff;--x-color-primary-active:#0958d9;--x-color-primary-text:#1677ff;--x-color-primary-text-hover:#4096ff;--x-color-primary-text-active:#0958d9;--x-color-secondary:#3dc2ff;--x-color-secondary-rgb:61, 194, 255;--x-color-secondary-contrast:#ffffff;--x-color-secondary-contrast-rgb:255, 255, 255;--x-color-secondary-shade:#36abe0;--x-color-secondary-tint:#50c8ff;--x-color-success:#52c41a;--x-color-success-rgb:82, 196, 26;--x-color-success-contrast:#ffffff;--x-color-success-contrast-rgb:255, 255, 255;--x-color-success-shade:#389e0d;--x-color-success-tint:#73d13d;--x-color-success-bg:#f6ffed;--x-color-success-bg-hover:#d9f7be;--x-color-success-border:#b7eb8f;--x-color-success-border-hover:#95de64;--x-color-success-hover:#73d13d;--x-color-success-active:#389e0d;--x-color-success-text:#52c41a;--x-color-success-text-hover:#73d13d;--x-color-success-text-active:#389e0d;--x-color-warning:#faad14;--x-color-warning-rgb:250, 173, 20;--x-color-warning-contrast:#000000;--x-color-warning-contrast-rgb:0, 0, 0;--x-color-warning-shade:#d48806;--x-color-warning-tint:#ffc53d;--x-color-warning-bg:#fffbe6;--x-color-warning-bg-hover:#fff1b8;--x-color-warning-border:#ffe58f;--x-color-warning-border-hover:#ffd666;--x-color-warning-hover:#ffc53d;--x-color-warning-active:#d48806;--x-color-warning-text:#faad14;--x-color-warning-text-hover:#ffc53d;--x-color-warning-text-active:#d48806;--x-color-danger:#ff4d4f;--x-color-danger-rgb:255, 77, 79;--x-color-danger-contrast:#ffffff;--x-color-danger-contrast-rgb:255, 255, 255;--x-color-danger-shade:#cf1322;--x-color-danger-tint:#ff7875;--x-color-error:#ff4d4f;--x-color-error-rgb:255, 77, 79;--x-color-error-bg:#fff2f0;--x-color-error-bg-hover:#ffccc7;--x-color-error-border:#ffa39e;--x-color-error-border-hover:#ff7875;--x-color-error-hover:#ff7875;--x-color-error-active:#d9363e;--x-color-error-text:#ff4d4f;--x-color-error-text-hover:#ff7875;--x-color-error-text-active:#d9363e;--x-color-info:#1677ff;--x-color-info-rgb:22, 119, 255;--x-color-info-bg:#e6f4ff;--x-color-info-bg-hover:#bae0ff;--x-color-info-border:#91caff;--x-color-info-border-hover:#69b1ff;--x-color-info-hover:#69b1ff;--x-color-info-active:#0958d9;--x-color-info-text:#1677ff;--x-color-info-text-hover:#69b1ff;--x-color-info-text-active:#0958d9;--x-color-text:rgba(0, 0, 0, 0.88);--x-color-text-secondary:rgba(0, 0, 0, 0.65);--x-color-text-tertiary:rgba(0, 0, 0, 0.45);--x-color-text-quaternary:rgba(0, 0, 0, 0.25);--x-color-text-disabled:rgba(0, 0, 0, 0.25);--x-color-text-placeholder:rgba(0, 0, 0, 0.25);--x-color-text-heading:rgba(0, 0, 0, 0.88);--x-color-text-label:rgba(0, 0, 0, 0.65);--x-color-text-description:rgba(0, 0, 0, 0.45);--x-color-text-light-solid:#ffffff;--x-color-bg-container:#ffffff;--x-color-bg-elevated:#ffffff;--x-color-bg-layout:#f5f5f5;--x-color-bg-spotlight:rgba(0, 0, 0, 0.85);--x-color-bg-mask:rgba(0, 0, 0, 0.45);--x-color-bg-base:#ffffff;--x-color-bg-container-disabled:#f5f5f5;--x-color-bg-container-loading:rgba(255, 255, 255, 0.65);--x-color-white:#ffffff;--x-color-fill:rgba(0, 0, 0, 0.15);--x-color-fill-secondary:rgba(0, 0, 0, 0.06);--x-color-fill-tertiary:rgba(0, 0, 0, 0.04);--x-color-fill-quaternary:rgba(0, 0, 0, 0.02);--x-color-border:#d9d9d9;--x-color-border-secondary:#f0f0f0;--x-color-border-bg:#ffffff;--x-color-split:rgba(5, 5, 5, 0.06);--x-color-dark:#222428;--x-color-dark-rgb:34, 36, 40;--x-color-dark-contrast:#ffffff;--x-color-dark-contrast-rgb:255, 255, 255;--x-color-dark-shade:#1e2023;--x-color-dark-tint:#383a3e;--x-color-medium:#92949c;--x-color-medium-rgb:146, 148, 156;--x-color-medium-contrast:#ffffff;--x-color-medium-contrast-rgb:255, 255, 255;--x-color-medium-shade:#808289;--x-color-medium-tint:#9d9fa6;--x-color-light:#f4f5f8;--x-color-light-rgb:244, 245, 248;--x-color-light-contrast:#000000;--x-color-light-contrast-rgb:0, 0, 0;--x-color-light-shade:#d7d8da;--x-color-light-tint:#f5f6f9;--x-font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--x-font-family-code:"SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;--x-font-size:14px;--x-font-size-sm:12px;--x-font-size-lg:16px;--x-font-size-xl:20px;--x-font-size-heading-1:38px;--x-font-size-heading-2:30px;--x-font-size-heading-3:24px;--x-font-size-heading-4:20px;--x-font-size-heading-5:16px;--x-line-height:1.5714285714285714;--x-line-height-lg:1.5;--x-line-height-sm:1.6666666666666667;--x-line-height-heading-1:1.2105263157894737;--x-line-height-heading-2:1.2666666666666666;--x-line-height-heading-3:1.3333333333333333;--x-line-height-heading-4:1.4;--x-line-height-heading-5:1.5;--x-font-weight-normal:400;--x-font-weight-medium:500;--x-font-weight-semibold:600;--x-font-weight-strong:600;--x-font-size-base:14px;--x-font-size-xxl:24px;--x-line-height-base:1.5714285714285714;--x-spacing-xxs:4px;--x-spacing-xs:8px;--x-spacing-sm:12px;--x-spacing-md:16px;--x-spacing-lg:20px;--x-spacing-xl:24px;--x-spacing-xxl:32px;--x-spacing-xxxl:48px;--x-margin-xxs:4px;--x-margin-xs:8px;--x-margin-sm:12px;--x-margin-md:16px;--x-margin-lg:24px;--x-margin-xl:32px;--x-margin-xxl:48px;--x-padding-xxs:4px;--x-padding-xs:8px;--x-padding-sm:12px;--x-padding-md:16px;--x-padding-lg:24px;--x-padding-content-horizontal-lg:24px;--x-padding-content-vertical-lg:12px;--x-padding-content-horizontal:16px;--x-padding-content-vertical:12px;--x-padding-content-horizontal-sm:16px;--x-padding-content-vertical-sm:8px;--x-border-radius:6px;--x-border-radius-xs:2px;--x-border-radius-sm:4px;--x-border-radius-lg:8px;--x-border-radius-xl:12px;--x-border-radius-outer:4px;--x-border-radius-base:6px;--x-border-width:1px;--x-border-width-base:1px;--x-shadow:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-shadow-secondary:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-shadow-tertiary:0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02);--x-shadow-lg:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-secondary:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-tertiary:0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02);--x-box-shadow-popover-arrow:2px 2px 5px rgba(0, 0, 0, 0.05);--x-box-shadow-card:0 1px 2px -2px rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.12), 0 5px 12px 4px rgba(0, 0, 0, 0.09);--x-box-shadow-drawer-right:-6px 0 16px 0 rgba(0, 0, 0, 0.08), -3px 0 6px -4px rgba(0, 0, 0, 0.12), -9px 0 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-drawer-left:6px 0 16px 0 rgba(0, 0, 0, 0.08), 3px 0 6px -4px rgba(0, 0, 0, 0.12), 9px 0 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-drawer-up:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-drawer-down:0 -6px 16px 0 rgba(0, 0, 0, 0.08), 0 -3px 6px -4px rgba(0, 0, 0, 0.12), 0 -9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-tabs-overflow-left:inset 10px 0 8px -8px rgba(0, 0, 0, 0.08);--x-box-shadow-tabs-overflow-right:inset -10px 0 8px -8px rgba(0, 0, 0, 0.08);--x-box-shadow-tabs-overflow-top:inset 0 10px 8px -8px rgba(0, 0, 0, 0.08);--x-box-shadow-tabs-overflow-bottom:inset 0 -10px 8px -8px rgba(0, 0, 0, 0.08);--x-motion-duration-fast:0.1s;--x-motion-duration-mid:0.2s;--x-motion-duration-slow:0.3s;--x-motion-ease-in-out:cubic-bezier(0.645, 0.045, 0.355, 1);--x-motion-ease-out:cubic-bezier(0.215, 0.61, 0.355, 1);--x-motion-ease-in:cubic-bezier(0.55, 0.055, 0.675, 0.19);--x-motion-ease-out-back:cubic-bezier(0.12, 0.4, 0.29, 1.46);--x-motion-ease-in-back:cubic-bezier(0.71, -0.46, 0.88, 0.6);--x-motion-ease-in-out-circle:cubic-bezier(0.78, 0.14, 0.15, 0.86);--x-motion-ease-out-circle:cubic-bezier(0.08, 0.82, 0.17, 1);--x-motion-ease-in-circle:cubic-bezier(0.6, 0.04, 0.98, 0.34);--x-motion-ease-in-quint:cubic-bezier(0.755, 0.05, 0.855, 0.06);--x-motion-ease-out-quint:cubic-bezier(0.23, 1, 0.32, 1);--x-z-index-base:0;--x-z-index-popup-base:1000;--x-z-index-popup:1030;--x-z-index-affix:10;--x-z-index-modal:1000;--x-z-index-modal-mask:1000;--x-z-index-drawer:1000;--x-z-index-popover:1030;--x-z-index-dropdown:1050;--x-z-index-tooltip:1070;--x-z-index-notification:1080;--x-z-index-message:1090;--x-z-index-popconfirm:1060;--x-z-index-table-fixed:10;--x-opacity-loading:0.65;--x-opacity-image:1;--x-opacity-disabled:0.5;--x-control-height:32px;--x-control-height-xs:24px;--x-control-height-sm:24px;--x-control-height-lg:40px;--x-control-radio-size:16px;--x-control-checkbox-size:16px;--x-control-padding-horizontal:12px;--x-control-padding-horizontal-sm:8px;--x-control-outline-width:2px;--x-control-outline:rgba(5, 145, 255, 0.1);--x-control-item-bg-hover:rgba(0, 0, 0, 0.04);--x-control-item-bg-active:#e6f4ff;--x-control-item-bg-active-hover:#bae0ff;--x-control-item-bg-active-disabled:rgba(0, 0, 0, 0.15);--x-control-tmp-outline:rgba(0, 0, 0, 0.02);--x-color-yellow:#fadb14;--x-color-yellow-rgb:250, 219, 20;--x-font-family-base:var(--x-font-family);--x-color-link:#1677ff;--x-color-link-hover:#69b1ff;--x-color-link-active:#0958d9;--x-color-icon:rgba(0, 0, 0, 0.45);--x-color-icon-hover:rgba(0, 0, 0, 0.88);--x-color-highlight:#ff4d4f;--x-color-bg-text-hover:rgba(0, 0, 0, 0.06);--x-color-bg-text-active:rgba(0, 0, 0, 0.15);--x-screen-xs:480px;--x-screen-xs-min:480px;--x-screen-xs-max:575px;--x-screen-sm:576px;--x-screen-sm-min:576px;--x-screen-sm-max:767px;--x-screen-md:768px;--x-screen-md-min:768px;--x-screen-md-max:991px;--x-screen-lg:992px;--x-screen-lg-min:992px;--x-screen-lg-max:1199px;--x-screen-xl:1200px;--x-screen-xl-min:1200px;--x-screen-xl-max:1599px;--x-screen-xxl:1600px;--x-screen-xxl-min:1600px;--x-color-fill-content:rgba(0, 0, 0, 0.06);--x-color-fill-content-hover:rgba(0, 0, 0, 0.15);--x-color-fill-alter:rgba(0, 0, 0, 0.02);--x-scrollbar-width:12px;--x-scrollbar-track-bg:rgba(0, 0, 0, 0.04);--x-scrollbar-thumb-bg:rgba(0, 0, 0, 0.25);--x-scrollbar-thumb-bg-hover:rgba(0, 0, 0, 0.35);--x-menu-dark-bg:#001529;--x-menu-dark-item-bg:#001529;--x-menu-dark-popup-bg:#001529;--x-menu-dark-submenu-item-bg:#000c17}:host{display:inline-block;position:relative;font-family:var(--x-popover-font-family, var(--x-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif))}.x-popover-trigger{display:inline-block}.x-popover-content{position:relative;z-index:var(--x-popover-z-index, 1030);display:block;visibility:visible;font-size:var(--x-popover-font-size, var(--x-font-size-base, 14px));line-height:var(--x-popover-line-height, var(--x-line-height-base, 1.5714));word-wrap:break-word;opacity:1;-webkit-transition:opacity var(--x-popover-motion-duration, var(--x-motion-duration-fast, 0.2s)), visibility var(--x-popover-motion-duration, var(--x-motion-duration-fast, 0.2s));transition:opacity var(--x-popover-motion-duration, var(--x-motion-duration-fast, 0.2s)), visibility var(--x-popover-motion-duration, var(--x-motion-duration-fast, 0.2s));white-space:normal}.x-popover-content.x-popover-hidden{opacity:0;visibility:hidden;pointer-events:none}.x-popover-placement-bottom,.x-popover-placement-bottomLeft,.x-popover-placement-bottomRight{-webkit-transform-origin:top center;transform-origin:top center}.x-popover-placement-top,.x-popover-placement-topLeft,.x-popover-placement-topRight{-webkit-transform-origin:bottom center;transform-origin:bottom center}.x-popover-placement-left,.x-popover-placement-leftTop,.x-popover-placement-leftBottom{-webkit-transform-origin:right center;transform-origin:right center}.x-popover-placement-right,.x-popover-placement-rightTop,.x-popover-placement-rightBottom{-webkit-transform-origin:left center;transform-origin:left center}.x-popover-inner{background-color:var(--x-popover-bg, var(--x-color-bg-container, #ffffff));background-clip:padding-box;border-radius:var(--x-popover-border-radius, var(--x-border-radius-lg, 8px));-webkit-box-shadow:var(--x-popover-shadow, var(--x-box-shadow-secondary, 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05)));box-shadow:var(--x-popover-shadow, var(--x-box-shadow-secondary, 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05)))}.x-popover-title{min-width:var(--x-popover-min-width, 177px);min-height:var(--x-popover-min-height, var(--x-control-height, 32px));margin:0;padding:var(--x-popover-title-padding-block, var(--x-spacing-xxs, 4px)) var(--x-popover-title-padding-inline, var(--x-spacing-md, 16px));color:var(--x-popover-title-color, var(--x-color-text, rgba(0, 0, 0, 0.88)));font-weight:var(--x-popover-title-font-weight, var(--x-font-weight-semibold, 600));border-bottom:var(--x-popover-border-width, var(--x-border-width-base, 1px)) solid var(--x-popover-border-color, var(--x-color-border-secondary, #f0f0f0))}.x-popover-inner-content{padding:var(--x-popover-content-padding-block, var(--x-spacing-sm, 8px)) var(--x-popover-content-padding-inline, var(--x-spacing-md, 16px));color:var(--x-popover-color, var(--x-color-text, rgba(0, 0, 0, 0.88)))}.x-popover-arrow{position:absolute;width:0;height:0;border-color:transparent;border-style:solid}[data-placement^=top] .x-popover-arrow{bottom:0;left:50%;-webkit-transform:translateX(-50%) translateY(100%);transform:translateX(-50%) translateY(100%);border-width:var(--x-popover-arrow-size, 6px) var(--x-popover-arrow-size, 6px) 0;border-top-color:var(--x-popover-bg, var(--x-color-bg-container, #ffffff))}[data-placement^=bottom] .x-popover-arrow{top:0;left:50%;-webkit-transform:translateX(-50%) translateY(-100%);transform:translateX(-50%) translateY(-100%);border-width:0 var(--x-popover-arrow-size, 6px) var(--x-popover-arrow-size, 6px);border-bottom-color:var(--x-popover-bg, var(--x-color-bg-container, #ffffff))}[data-placement^=left] .x-popover-arrow{right:0;top:50%;-webkit-transform:translateY(-50%) translateX(100%);transform:translateY(-50%) translateX(100%);border-width:var(--x-popover-arrow-size, 6px) 0 var(--x-popover-arrow-size, 6px) var(--x-popover-arrow-size, 6px);border-left-color:var(--x-popover-bg, var(--x-color-bg-container, #ffffff))}[data-placement^=right] .x-popover-arrow{left:0;top:50%;-webkit-transform:translateY(-50%) translateX(-100%);transform:translateY(-50%) translateX(-100%);border-width:var(--x-popover-arrow-size, 6px) var(--x-popover-arrow-size, 6px) var(--x-popover-arrow-size, 6px) 0;border-right-color:var(--x-popover-bg, var(--x-color-bg-container, #ffffff))}`;
+
+const XPopover = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.xOpenChange = createEvent(this, "xOpenChange", 7);
+    }
+    get el() { return getElement(this); }
+    /**
+     * Title of the popover
+     * @example
+     * <x-popover popoverTitle="Notification" />
+     */
+    popoverTitle;
+    /**
+     * Content of the popover
+     * @example
+     * <x-popover content="You have 3 new messages." />
+     */
+    content;
+    /**
+     * The position of the popover relative to the target
+     * @example
+     * <x-popover placement="bottomRight" />
+     */
+    placement = 'top';
+    /**
+     * Trigger mode
+     * @example
+     * <x-popover trigger="hover" />
+     */
+    trigger = 'click';
+    /**
+     * Whether the popover is visible (controlled)
+     * @example
+     * <x-popover open={true} />
+     */
+    open;
+    /**
+     * Callback when open state changes
+     * @example
+     * <x-popover onXOpenChange={(e) => console.log(e.detail)} />
+     */
+    xOpenChange;
+    visible = false;
+    timer;
+    portalInstance = null;
+    triggerEl = null;
+    watchOpen(newValue) {
+        if (newValue !== undefined) {
+            this.visible = newValue;
+            this.updatePortal();
+        }
+    }
+    componentWillLoad() {
+        if (this.open !== undefined) {
+            this.visible = this.open;
+        }
+    }
+    handleClick(ev) {
+        if (this.trigger === 'click') {
+            const target = ev.target;
+            // Check if click is inside portal content
+            if (this.isClickInPortal(target)) {
+                return;
+            }
+            this.toggle(!this.visible);
+        }
+    }
+    handleMouseEnter() {
+        if (this.trigger === 'hover') {
+            this.show();
+        }
+    }
+    handleMouseLeave() {
+        if (this.trigger === 'hover') {
+            this.hide();
+        }
+    }
+    isClickInPortal(target) {
+        const portalEl = this.portalInstance?.getElement();
+        return portalEl ? portalEl.contains(target) : false;
+    }
+    /**
+     * Toggles the visibility state.
+     *
+     * Flow:
+     * 1. Checks if `open` prop is controlled (not undefined).
+     * 2. If controlled: Emits `xOpenChange` event with the new state.
+     * 3. If uncontrolled:
+     *    - Updates internal `visible` state.
+     *    - Calls `updatePortal` to reflect the change in the UI.
+     *
+     * @param visible - The desired visibility state.
+     */
+    toggle(visible) {
+        if (this.open !== undefined) {
+            this.xOpenChange.emit(visible);
+        }
+        else {
+            this.visible = visible;
+            this.updatePortal();
+        }
+    }
+    /**
+     * Shows the popover.
+     * Clears any pending hide timer and calls `toggle(true)`.
+     */
+    show() {
+        clearTimeout(this.timer);
+        this.toggle(true);
+    }
+    /**
+     * Hides the popover with a small delay.
+     * The delay prevents flickering when moving mouse quickly between trigger and content.
+     */
+    hide() {
+        this.timer = setTimeout(() => {
+            this.toggle(false);
+        }, 100);
+    }
+    getTriggerEl() {
+        if (!this.triggerEl) {
+            this.triggerEl = this.el.shadowRoot?.querySelector('.x-popover-trigger');
+        }
+        return this.triggerEl;
+    }
+    /**
+     * Build popover content element.
+     *
+     * Flow:
+     * 1. Creates `x-popover-content` element.
+     * 2. Assigns props (title, content, placement).
+     * 3. If trigger is hover, attaches mouse enter/leave handlers to content (to prevent closing when moving mouse to popover).
+     * 4. Clones `slot="content"` nodes and appends to popover content if present.
+     *
+     * @returns HTMLElement
+     */
+    buildPopoverContent() {
+        const popoverContent = document.createElement('x-popover-content');
+        // Set properties
+        popoverContent.popoverTitle = this.popoverTitle;
+        popoverContent.content = this.content;
+        popoverContent.placement = this.placement;
+        popoverContent.hidden = !this.visible;
+        // Add hover handlers to keep popover open
+        if (this.trigger === 'hover') {
+            popoverContent.mouseEnterPopover = () => {
+                clearTimeout(this.timer);
+            };
+            popoverContent.mouseLeavePopover = () => {
+                this.hide();
+            };
+        }
+        // Clone slot content if available
+        const contentSlot = this.el.querySelector('[slot="content"]');
+        if (contentSlot) {
+            const cloned = contentSlot.cloneNode(true);
+            popoverContent.appendChild(cloned);
+        }
+        return popoverContent;
+    }
+    updatePortal() {
+        if (!this.visible) {
+            if (this.portalInstance) {
+                this.portalInstance.destroy();
+                this.portalInstance = null;
+            }
+            return;
+        }
+        const contentElement = this.buildPopoverContent();
+        if (!this.portalInstance) {
+            this.portalInstance = PortalController.create({
+                open: this.visible,
+                target: this.getTriggerEl(),
+                placement: this.placement,
+                zIndex: 1050,
+                offset: 8, // arrow size + small gap
+                content: contentElement,
+            });
+        }
+        else {
+            this.portalInstance.update({
+                open: this.visible,
+                target: this.getTriggerEl(),
+                placement: this.placement,
+                offset: 8,
+                content: contentElement,
+            });
+        }
+    }
+    disconnectedCallback() {
+        clearTimeout(this.timer);
+        if (this.portalInstance) {
+            this.portalInstance.destroy();
+            this.portalInstance = null;
+        }
+    }
+    /**
+     * Renders the trigger element wrapper.
+     *
+     * Flow:
+     * 1. Renders a Host element with `x-popover-wrapper` class.
+     * 2. Renders a `div` acting as the trigger container.
+     * 3. Projects the default slot content (the trigger element).
+     *
+     * @returns {JSX.Element} The component tree.
+     */
+    render() {
+        return (h(Host, { key: '37bcdc5da5a0ff94640494ac499ba599d6f27900', class: "x-popover-wrapper" }, h("div", { key: 'ce22172182c96e972e4621bd49609baaf08932c0', class: "x-popover-trigger" }, h("slot", { key: 'cc3860811241624a4df21471b9f6359477412dd0' }))));
+    }
+    static get watchers() { return {
+        "open": [{
+                "watchOpen": 0
+            }]
+    }; }
+};
+XPopover.style = xPopoverCss();
+
+const popoverContentCss = () => `@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;font-family:var(--x-popover-font-family, var(--x-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif));font-size:var(--x-popover-font-size, var(--x-font-size-base, 14px));line-height:var(--x-popover-line-height, var(--x-line-height-base, 1.5714));color:var(--x-popover-color, var(--x-color-text, rgba(0, 0, 0, 0.88)));pointer-events:auto;z-index:var(--x-popover-z-index, 1030)}.x-popover-content{position:relative;display:block;-webkit-animation:x-popover-fade-in 0.2s cubic-bezier(0.23, 1, 0.32, 1);animation:x-popover-fade-in 0.2s cubic-bezier(0.23, 1, 0.32, 1)}@-webkit-keyframes x-popover-fade-in{from{opacity:0;-webkit-transform:scale(0.95);transform:scale(0.95)}to{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}@keyframes x-popover-fade-in{from{opacity:0;-webkit-transform:scale(0.95);transform:scale(0.95)}to{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}.x-popover-arrow{position:absolute;width:0;height:0;border-color:transparent;border-style:solid;z-index:10}.x-popover-inner{background-color:var(--x-popover-bg, var(--x-color-bg-container, #ffffff));background-clip:padding-box;border-radius:var(--x-popover-border-radius, var(--x-border-radius-lg, 8px));-webkit-box-shadow:var(--x-popover-shadow, var(--x-box-shadow-secondary, 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05)));box-shadow:var(--x-popover-shadow, var(--x-box-shadow-secondary, 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05)));overflow:hidden;border:var(--x-popover-border-width, var(--x-border-width-base, 1px)) solid var(--x-popover-border-color, var(--x-color-border-secondary, #f0f0f0))}.x-popover-title{min-width:var(--x-popover-min-width, 177px);margin:0;padding:var(--x-popover-title-padding-block, var(--x-spacing-xxs, 4px)) var(--x-popover-title-padding-inline, var(--x-spacing-md, 16px));color:var(--x-popover-title-color, var(--x-color-text, rgba(0, 0, 0, 0.88)));font-weight:var(--x-popover-title-font-weight, var(--x-font-weight-semibold, 600));border-bottom:var(--x-popover-border-width, var(--x-border-width-base, 1px)) solid var(--x-popover-border-color, var(--x-color-border-secondary, #f0f0f0));background:transparent}.x-popover-inner-content{padding:var(--x-popover-content-padding-block, var(--x-spacing-sm, 8px)) var(--x-popover-content-padding-inline, var(--x-spacing-md, 16px));color:var(--x-popover-color, var(--x-color-text, rgba(0, 0, 0, 0.88)))}[class*=x-popover-placement-bottom]{-webkit-transform-origin:top center;transform-origin:top center;padding-top:var(--x-popover-arrow-size, 6px)}[class*=x-popover-placement-bottom] .x-popover-arrow{top:0;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);border-width:0 var(--x-popover-arrow-size, 6px) var(--x-popover-arrow-size, 6px);border-bottom-color:var(--x-popover-bg, var(--x-color-bg-container, #ffffff))}[class*=x-popover-placement-top]{-webkit-transform-origin:bottom center;transform-origin:bottom center;padding-bottom:var(--x-popover-arrow-size, 6px)}[class*=x-popover-placement-top] .x-popover-arrow{bottom:0;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);border-width:var(--x-popover-arrow-size, 6px) var(--x-popover-arrow-size, 6px) 0;border-top-color:var(--x-popover-bg, var(--x-color-bg-container, #ffffff))}[class*=x-popover-placement-left]{-webkit-transform-origin:right center;transform-origin:right center;padding-right:var(--x-popover-arrow-size, 6px)}[class*=x-popover-placement-left] .x-popover-arrow{right:0;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);border-width:var(--x-popover-arrow-size, 6px) 0 var(--x-popover-arrow-size, 6px) var(--x-popover-arrow-size, 6px);border-left-color:var(--x-popover-bg, var(--x-color-bg-container, #ffffff))}[class*=x-popover-placement-right]{-webkit-transform-origin:left center;transform-origin:left center;padding-left:var(--x-popover-arrow-size, 6px)}[class*=x-popover-placement-right] .x-popover-arrow{left:0;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);border-width:var(--x-popover-arrow-size, 6px) var(--x-popover-arrow-size, 6px) var(--x-popover-arrow-size, 6px) 0;border-right-color:var(--x-popover-bg, var(--x-color-bg-container, #ffffff))}.x-popover-hidden{display:none !important;opacity:0}`;
+
+const XPopoverContent = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    get el() { return getElement(this); }
+    /**
+     * Title of the popover.
+     * @example
+     * <x-popover-content popoverTitle="Title"></x-popover-content>
+     */
+    popoverTitle;
+    /**
+     * Content text.
+     * @example
+     * <x-popover-content content="Details"></x-popover-content>
+     */
+    content;
+    /**
+     * Placement of the popover.
+     * @example
+     * <x-popover-content placement="right"></x-popover-content>
+     */
+    placement = 'top';
+    /**
+     * Whether the popover is hidden.
+     * @example
+     * <x-popover-content hidden></x-popover-content>
+     */
+    hidden = false;
+    /**
+     * Custom class for the content.
+     * @example
+     * <x-popover-content contentClass="my-popover"></x-popover-content>
+     */
+    contentClass;
+    /**
+     * Mouse enter handler.
+     * @example
+     * <x-popover-content mouseEnterPopover={(ev) => console.log(ev)}></x-popover-content>
+     */
+    mouseEnterPopover;
+    /**
+     * Mouse leave handler.
+     * @example
+     * <x-popover-content mouseLeavePopover={(ev) => console.log(ev)}></x-popover-content>
+     */
+    mouseLeavePopover;
+    /**
+     * Render popover content, arrow, and slots.
+     *
+     * Flow:
+     * 1. Constructs dynamic class map based on placement and hidden state.
+     * 2. Renders Host element with mouse enter/leave listeners (for hover trigger support).
+     * 3. Renders the arrow indicator.
+     * 4. Renders the inner content wrapper:
+     *    - Title (if provided).
+     *    - Content body (text prop + named slot "content").
+     *
+     * @returns {JSX.Element} The rendered content.
+     * @example
+     * <x-popover-content content="Hello"></x-popover-content>
+     */
+    render() {
+        const classes = {
+            'x-popover-content': true,
+            [`x-popover-placement-${this.placement}`]: true,
+            'x-popover-hidden': this.hidden,
+            [this.contentClass || '']: !!this.contentClass,
+        };
+        return (h(Host, { key: 'b948dbdb61a8213de272d33c24a3ec20254ee6ff', class: classes, onMouseEnter: (ev) => this.mouseEnterPopover?.(ev), onMouseLeave: (ev) => this.mouseLeavePopover?.(ev) }, h("div", { key: '996a05418f154b8a76ec40bc762e82d021672562', class: "x-popover-arrow" }), h("div", { key: '48ca4c9f425c776e9422b99627a146bfd18382d7', class: "x-popover-inner" }, this.popoverTitle && (h("div", { key: 'e2d31f80e31df45c4415309ac3518a01dd749c0f', class: "x-popover-title" }, this.popoverTitle)), h("div", { key: 'e8727b440e39c0f04dba02dfa802ee9c7735adec', class: "x-popover-inner-content" }, this.content, h("slot", { key: 'c4872c221f2e639ef106b31589e6f638b1bd8995', name: "content" })))));
+    }
+};
+XPopoverContent.style = popoverContentCss();
+
+const xRadioCss = () => `@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-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;line-height:1;cursor:pointer;position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0;font-size:var(--x-radio-font-size, var(--x-font-size, 14px));font-family:inherit;color:var(--x-radio-label-color, var(--x-color-text, rgba(0, 0, 0, 0.88)));list-style:none;outline:none}:host(:focus-visible){outline:2px solid var(--x-color-primary-border, #91caff);outline-offset:1px;border-radius:4px}:host(.x-radio-wrapper-disabled){cursor:not-allowed;color:var(--x-radio-label-color-disabled, var(--x-color-text-disabled, rgba(0, 0, 0, 0.25)))}.x-radio{position:relative;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;line-height:1;white-space:nowrap;outline:none;cursor:pointer;vertical-align:sub}.x-radio-input{position:absolute;inset:0;z-index:1;width:100%;height:100%;cursor:pointer;opacity:0;margin:0;padding:0}.x-radio-inner{position:relative;top:0;left:0;display:block;width:var(--x-radio-size, var(--x-control-radio-size, 16px));height:var(--x-radio-size, var(--x-control-radio-size, 16px));background-color:var(--x-radio-bg, var(--x-color-bg-container, #ffffff));border:var(--x-radio-border-width, var(--x-border-width-base, 1px)) solid var(--x-radio-border-color, var(--x-color-border, #d9d9d9));border-radius:50%;-webkit-transition:all var(--x-radio-motion-duration, var(--x-motion-duration-mid, 0.2s)) var(--x-radio-motion-timing, var(--x-motion-ease-in-out-circle, cubic-bezier(0.78, 0.14, 0.15, 0.86)));transition:all var(--x-radio-motion-duration, var(--x-motion-duration-mid, 0.2s)) var(--x-radio-motion-timing, var(--x-motion-ease-in-out-circle, cubic-bezier(0.78, 0.14, 0.15, 0.86)))}.x-radio-inner::after{position:absolute;top:50%;left:50%;display:block;width:var(--x-radio-dot-size, var(--x-spacing-xs, 8px));height:var(--x-radio-dot-size, var(--x-spacing-xs, 8px));margin-top:calc(var(--x-radio-dot-size, var(--x-spacing-xs, 8px)) / -2);margin-left:calc(var(--x-radio-dot-size, var(--x-spacing-xs, 8px)) / -2);background-color:var(--x-radio-dot-color, var(--x-color-primary, #1677ff));border-top:0;border-left:0;border-radius:50%;-webkit-transform:scale(0);transform:scale(0);opacity:0;-webkit-transition:all var(--x-radio-motion-duration, var(--x-motion-duration-mid, 0.2s)) var(--x-radio-motion-timing, var(--x-motion-ease-in-out-circle, cubic-bezier(0.78, 0.14, 0.15, 0.86)));transition:all var(--x-radio-motion-duration, var(--x-motion-duration-mid, 0.2s)) var(--x-radio-motion-timing, var(--x-motion-ease-in-out-circle, cubic-bezier(0.78, 0.14, 0.15, 0.86)));content:""}.x-radio:not(.x-radio-disabled):hover .x-radio-inner{border-color:var(--x-radio-border-color-hover, var(--x-color-primary, #1677ff))}:host(.x-radio-wrapper-checked) .x-radio-inner,.x-radio-checked .x-radio-inner{border-color:var(--x-radio-color, var(--x-color-primary, #1677ff));background-color:var(--x-radio-bg, var(--x-color-bg-container, #ffffff))}:host(.x-radio-wrapper-checked) .x-radio-inner::after,.x-radio-checked .x-radio-inner::after{-webkit-transform:scale(0.625);transform:scale(0.625);-webkit-transform:scale(1);transform:scale(1);opacity:1;-webkit-transition:opacity var(--x-radio-motion-duration, var(--x-motion-duration-mid, 0.2s)) var(--x-radio-motion-timing, var(--x-motion-ease-in-out-circle, cubic-bezier(0.78, 0.14, 0.15, 0.86))), background-color var(--x-radio-motion-duration, var(--x-motion-duration-mid, 0.2s)) var(--x-radio-motion-timing, var(--x-motion-ease-in-out-circle, cubic-bezier(0.78, 0.14, 0.15, 0.86))), -webkit-transform var(--x-radio-motion-duration, var(--x-motion-duration-mid, 0.2s)) var(--x-radio-motion-timing, var(--x-motion-ease-in-out-circle, cubic-bezier(0.78, 0.14, 0.15, 0.86)));transition:opacity var(--x-radio-motion-duration, var(--x-motion-duration-mid, 0.2s)) var(--x-radio-motion-timing, var(--x-motion-ease-in-out-circle, cubic-bezier(0.78, 0.14, 0.15, 0.86))), background-color var(--x-radio-motion-duration, var(--x-motion-duration-mid, 0.2s)) var(--x-radio-motion-timing, var(--x-motion-ease-in-out-circle, cubic-bezier(0.78, 0.14, 0.15, 0.86))), -webkit-transform var(--x-radio-motion-duration, var(--x-motion-duration-mid, 0.2s)) var(--x-radio-motion-timing, var(--x-motion-ease-in-out-circle, cubic-bezier(0.78, 0.14, 0.15, 0.86)));transition:transform var(--x-radio-motion-duration, var(--x-motion-duration-mid, 0.2s)) var(--x-radio-motion-timing, var(--x-motion-ease-in-out-circle, cubic-bezier(0.78, 0.14, 0.15, 0.86))), opacity var(--x-radio-motion-duration, var(--x-motion-duration-mid, 0.2s)) var(--x-radio-motion-timing, var(--x-motion-ease-in-out-circle, cubic-bezier(0.78, 0.14, 0.15, 0.86))), background-color var(--x-radio-motion-duration, var(--x-motion-duration-mid, 0.2s)) var(--x-radio-motion-timing, var(--x-motion-ease-in-out-circle, cubic-bezier(0.78, 0.14, 0.15, 0.86)));transition:transform var(--x-radio-motion-duration, var(--x-motion-duration-mid, 0.2s)) var(--x-radio-motion-timing, var(--x-motion-ease-in-out-circle, cubic-bezier(0.78, 0.14, 0.15, 0.86))), opacity var(--x-radio-motion-duration, var(--x-motion-duration-mid, 0.2s)) var(--x-radio-motion-timing, var(--x-motion-ease-in-out-circle, cubic-bezier(0.78, 0.14, 0.15, 0.86))), background-color var(--x-radio-motion-duration, var(--x-motion-duration-mid, 0.2s)) var(--x-radio-motion-timing, var(--x-motion-ease-in-out-circle, cubic-bezier(0.78, 0.14, 0.15, 0.86))), -webkit-transform var(--x-radio-motion-duration, var(--x-motion-duration-mid, 0.2s)) var(--x-radio-motion-timing, var(--x-motion-ease-in-out-circle, cubic-bezier(0.78, 0.14, 0.15, 0.86)))}:host(.x-radio-wrapper-checked) .x-radio:not(.x-radio-disabled):hover .x-radio-inner,.x-radio-checked:not(.x-radio-disabled):hover .x-radio-inner{border-color:var(--x-radio-color-hover, var(--x-color-primary-hover, #4096ff))}:host(:focus-visible) .x-radio-inner,.x-radio-input:focus-visible+.x-radio-inner{-webkit-box-shadow:0 0 0 3px var(--x-color-primary-shadow, rgba(22, 119, 255, 0.12));box-shadow:0 0 0 3px var(--x-color-primary-shadow, rgba(22, 119, 255, 0.12))}:host(.x-radio-wrapper-disabled) .x-radio,.x-radio-disabled{cursor:not-allowed}:host(.x-radio-wrapper-disabled) .x-radio-input,.x-radio-disabled .x-radio-input{cursor:not-allowed}:host(.x-radio-wrapper-disabled) .x-radio-inner,.x-radio-disabled .x-radio-inner{background-color:var(--x-radio-bg-disabled, var(--x-color-bg-container-disabled, rgba(0, 0, 0, 0.04)));border-color:var(--x-radio-border-color-disabled, var(--x-color-border, #d9d9d9)) !important;cursor:not-allowed}:host(.x-radio-wrapper-disabled) .x-radio-inner::after,.x-radio-disabled .x-radio-inner::after{background-color:var(--x-radio-dot-color-disabled, var(--x-color-text-quaternary, rgba(0, 0, 0, 0.25)))}:host(.x-radio-wrapper-disabled.x-radio-wrapper-checked) .x-radio-inner::after,.x-radio-disabled.x-radio-checked .x-radio-inner::after{-webkit-transform:scale(1);transform:scale(1);opacity:1}.x-radio-label{padding-right:var(--x-radio-label-padding, var(--x-spacing-xs, 8px));padding-left:var(--x-radio-label-padding, var(--x-spacing-xs, 8px));line-height:1.5715;word-break:break-all}:host(.x-radio-wrapper-disabled) .x-radio-label{color:var(--x-radio-label-color-disabled, var(--x-color-text-disabled, rgba(0, 0, 0, 0.25)));cursor:not-allowed}:host(.x-radio-placement-start){-ms-flex-direction:row-reverse;flex-direction:row-reverse}:host(.x-radio-placement-start) .x-radio-label{padding-right:var(--x-radio-label-padding, var(--x-spacing-xs, 8px));padding-left:0}:host(.x-radio-placement-end){-ms-flex-direction:row;flex-direction:row}:host(.x-radio-placement-end) .x-radio-label{padding-left:var(--x-radio-label-padding, var(--x-spacing-xs, 8px));padding-right:0}:host(.x-radio-placement-fixed){-ms-flex-direction:row-reverse;flex-direction:row-reverse}:host(.x-radio-placement-fixed) .x-radio-label{padding-right:var(--x-radio-label-padding, var(--x-spacing-xs, 8px));padding-left:0;width:var(--x-radio-label-width, 100px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:right}:host(.x-radio-placement-stacked){-ms-flex-direction:column-reverse;flex-direction:column-reverse;gap:var(--x-radio-label-padding, var(--x-spacing-xs, 8px))}:host(.x-radio-placement-stacked) .x-radio-label{padding:0;width:100%;text-align:center}:host(.x-radio-alignment-start){-ms-flex-align:start;align-items:flex-start}:host(.x-radio-alignment-center){-ms-flex-align:center;align-items:center}:host(.x-radio-alignment-end){-ms-flex-align:end;align-items:flex-end}`;
+
+const XRadio = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.xChange = createEvent(this, "xChange", 7);
+        this.xFocus = createEvent(this, "xFocus", 7);
+        this.xBlur = createEvent(this, "xBlur", 7);
+    }
+    get el() { return getElement(this); }
+    /**
+     * Input element reference for focus management.
+     */
+    inputEl;
+    // ==================== Props ====================
+    /**
+     * Whether the radio is automatically focused on mount.
+     * @default false
+     * @example
+     * <x-radio autoFocus></x-radio>
+     */
+    autoFocus = false;
+    /**
+     * Whether the radio is checked (controlled mode).
+     * @example
+     * <x-radio checked></x-radio>
+     */
+    checked = false;
+    /**
+     * Whether the radio is checked by default (uncontrolled mode).
+     * @default false
+     * @example
+     * <x-radio defaultChecked></x-radio>
+     */
+    defaultChecked = false;
+    /**
+     * Whether the radio is disabled.
+     * @default false
+     * @example
+     * <x-radio disabled></x-radio>
+     */
+    disabled = false;
+    /**
+     * The name attribute of the radio input.
+     * @example
+     * <x-radio name="group1"></x-radio>
+     */
+    name;
+    /**
+     * Radio label placement.
+     * @default 'start'
+     * @example
+     * <x-radio placement="end"></x-radio>
+     */
+    placement = 'start';
+    /**
+     * Radio label alignment.
+     * @default 'center'
+     */
+    alignment = 'center';
+    /**
+     * The value of the radio.
+     * @example
+     * <x-radio value="A"></x-radio>
+     */
+    value;
+    /**
+     * Custom class names for radio parts.
+     * @example
+     * <x-radio classNames={{ root: 'my-radio' }}></x-radio>
+     */
+    classNames;
+    /**
+     * Custom styles for radio parts.
+     * @example
+     * <x-radio styles={{ root: 'margin: 4px;' }}></x-radio>
+     */
+    styles;
+    /**
+     * Unique identifier for the radio.
+     * @example
+     * <x-radio radioId="opt-a"></x-radio>
+     */
+    radioId;
+    // ==================== Events ====================
+    /**
+     * Callback fired when the radio state changes.
+     * @example
+     * <x-radio onXChange={(ev) => console.log(ev.detail)}></x-radio>
+     */
+    xChange;
+    /**
+     * Callback fired when the radio is focused.
+     * @example
+     * <x-radio onXFocus={() => {}}></x-radio>
+     */
+    xFocus;
+    /**
+     * Callback fired when the radio loses focus.
+     * @example
+     * <x-radio onXBlur={() => {}}></x-radio>
+     */
+    xBlur;
+    // ==================== Lifecycle ====================
+    /**
+     * Component lifecycle method called before loading.
+     * Syncs the internal checked state with defaultChecked if provided.
+     */
+    componentWillLoad() {
+        if (this.defaultChecked && !this.checked) {
+            this.checked = true;
+        }
+    }
+    /**
+     * Component lifecycle method called after loading.
+     * Handles auto-focus behavior if enabled.
+     */
+    componentDidLoad() {
+        if (this.autoFocus && this.inputEl) {
+            this.inputEl.focus();
+        }
+    }
+    // ==================== Watchers ====================
+    /**
+     * Watcher for checked prop changes.
+     * Can be used to sync with parent components or trigger side effects.
+     */
+    handleCheckedChange() {
+        // Sync with parent if needed
+    }
+    // ==================== Methods ====================
+    /**
+     * Focus the radio input programmatically.
+     * @returns Promise<void> - Resolves when focus is set.
+     * @example
+     * const radio = document.querySelector('x-radio');
+     * await radio.setFocus();
+     */
+    async setFocus() {
+        this.inputEl?.focus();
+    }
+    /**
+     * Remove focus from the radio input programmatically.
+     * @returns Promise<void> - Resolves when focus is removed.
+     * @example
+     * const radio = document.querySelector('x-radio');
+     * await radio.removeFocus();
+     */
+    async removeFocus() {
+        this.inputEl?.blur();
+    }
+    // ==================== Private Methods ====================
+    /**
+     * Handles click events on the radio component.
+     *
+     * Flow:
+     * 1. Checks if the component is disabled; if so, prevents default action and stops propagation.
+     * 2. Checks if the radio is currently unchecked (since radio buttons cannot be unchecked by clicking).
+     * 3. If unchecked, updates the checked state to true.
+     * 4. Emits the `xChange` event with the new state and original event.
+     *
+     * @param e - The mouse event triggered by user click.
+     */
+    handleClick = (e) => {
+        if (this.disabled) {
+            e.preventDefault();
+            e.stopPropagation();
+            return;
+        }
+        // Radio buttons can only be checked, not unchecked
+        if (!this.checked) {
+            this.checked = true;
+            this.xChange.emit({
+                value: this.value,
+                checked: true,
+                nativeEvent: e,
+            });
+        }
+    };
+    /**
+     * Handles focus events on the internal input element.
+     * Emits the `xFocus` event to notify parent components.
+     */
+    handleFocus = () => {
+        this.xFocus.emit();
+    };
+    /**
+     * Handles blur events on the internal input element.
+     * Emits the `xBlur` event to notify parent components.
+     */
+    handleBlur = () => {
+        this.xBlur.emit();
+    };
+    /**
+     * Handles keyboard events for accessibility.
+     *
+     * Flow:
+     * 1. Checks if the component is disabled.
+     * 2. Listens for 'Space' or 'Enter' keys.
+     * 3. If triggered, prevents default browser behavior.
+     * 4. If currently unchecked, updates state to checked and emits change event.
+     *
+     * @param e - The keyboard event.
+     */
+    handleKeyDown = (e) => {
+        if (this.disabled)
+            return;
+        if (e.key === ' ' || e.key === 'Enter') {
+            e.preventDefault();
+            if (!this.checked) {
+                this.checked = true;
+                this.xChange.emit({
+                    value: this.value,
+                    checked: true,
+                    nativeEvent: e,
+                });
+            }
+        }
+    };
+    // ==================== Render ====================
+    /**
+     * Renders the component.
+     *
+     * Structure:
+     * - Host element serves as the wrapper with ARIA roles.
+     * - Contains a visual radio indicator (input + inner span).
+     * - Contains a label slot for content.
+     *
+     * @returns JSX.Element
+     */
+    render() {
+        // Build class maps based on checked and disabled state.
+        const wrapperClasses = {
+            'x-radio-wrapper': true,
+            'x-radio-wrapper-checked': this.checked,
+            'x-radio-wrapper-disabled': this.disabled,
+            [`x-radio-placement-${this.placement}`]: !!this.placement,
+            [`x-radio-alignment-${this.alignment}`]: !!this.alignment,
+            [this.classNames?.root ?? '']: !!this.classNames?.root,
+        };
+        const radioClasses = {
+            'x-radio': true,
+            'x-radio-checked': this.checked,
+            'x-radio-disabled': this.disabled,
+            [this.classNames?.radio ?? '']: !!this.classNames?.radio,
+        };
+        const innerClasses = {
+            'x-radio-inner': true,
+            [this.classNames?.inner ?? '']: !!this.classNames?.inner,
+        };
+        const labelClasses = {
+            'x-radio-label': true,
+            [this.classNames?.label ?? '']: !!this.classNames?.label,
+        };
+        const wrapperStyles = this.styles?.root;
+        const radioStyles = this.styles?.radio;
+        const innerStyles = this.styles?.inner;
+        const labelStyles = this.styles?.label;
+        return (h(Host, { key: '73c3b076a9ec6eddd0978ff6aa8cca6e8f776526', class: wrapperClasses, style: wrapperStyles, onClick: this.handleClick, onKeyDown: this.handleKeyDown, role: "radio", "aria-checked": this.checked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', tabindex: this.disabled ? -1 : 0 }, h("span", { key: '99b9cf1d6c8a56ad7c868d6b4a6d0dbda220c9f4', class: radioClasses, style: radioStyles }, h("input", { key: '68e873e4984a6f972dfa9531de6d387db4400bf7', ref: (el) => (this.inputEl = el), type: "radio", class: "x-radio-input", id: this.radioId, checked: this.checked, disabled: this.disabled, name: this.name, value: this.value, tabIndex: -1, onFocus: this.handleFocus, onBlur: this.handleBlur, onChange: (e) => e.stopPropagation() }), h("span", { key: 'b74110568edc7a6c43a42efed8bf0788e6f932c9', class: innerClasses, style: innerStyles })), h("span", { key: '1d6a28efc70aadf65bccceb22c8ccbc294c9987b', class: labelClasses, style: labelStyles }, h("slot", { key: 'eb70a0875223ff3b54ae4d3cc0d0d6b3ee6629e5' }))));
+    }
+    static get watchers() { return {
+        "checked": [{
+                "handleCheckedChange": 0
+            }]
+    }; }
+};
+XRadio.style = xRadioCss();
+
+export { XCheckbox as x_checkbox, XPagination as x_pagination, XPopover as x_popover, XPopoverContent as x_popover_content, XRadio as x_radio };