@xlabs-store/core 0.0.1

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

@@ -0,0 +1,437 @@
+import { r as registerInstance, c as createEvent, a as getElement, h, H as Host } from './index-ig_mFsVk.js';
+
+const xStepsCss = () => `@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;width:100%;font-size:0;text-align:initial;-webkit-box-sizing:border-box;box-sizing:border-box}:host(.x-steps-horizontal){-ms-flex-direction:row;flex-direction:row}:host(.x-steps-vertical){-ms-flex-direction:column;flex-direction:column}.x-steps-item{position:relative;display:inline-block;-ms-flex:1;flex:1;overflow:hidden;vertical-align:top;margin-right:var(--x-steps-item-margin-right, var(--x-margin-md, 16px));white-space:nowrap}.x-steps-item:last-child{-ms-flex:none;flex:none;margin-right:0}.x-steps-item:last-child .x-steps-item-tail,.x-steps-item:last-child .x-steps-item-title::after{display:none !important}.x-steps-item-container{display:inline-block;vertical-align:top;outline:none}.x-steps-item-icon{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:var(--x-steps-icon-size, 32px);height:var(--x-steps-icon-size, 32px);margin-right:var(--x-steps-icon-margin-right, var(--x-margin-xs, 8px));font-size:var(--x-steps-icon-font-size, 16px);font-family:var(--x-font-family);line-height:var(--x-steps-icon-size, 32px);text-align:center;border:1px solid transparent;border-radius:var(--x-steps-icon-size, 32px);-webkit-transition:background-color var(--x-steps-motion-duration, 0.3s), border-color var(--x-steps-motion-duration, 0.3s);transition:background-color var(--x-steps-motion-duration, 0.3s), border-color var(--x-steps-motion-duration, 0.3s)}.x-steps-icon{position:relative;top:var(--x-steps-icon-offset-top, -1px);color:inherit;line-height:1;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.x-steps-item-content{display:inline-block;vertical-align:top}.x-steps-item-title{position:relative;display:inline-block;padding-right:var(--x-steps-title-padding-right, var(--x-padding-md, 16px));color:var(--x-steps-title-color, var(--x-color-text-disabled, rgba(0, 0, 0, 0.45)));font-size:var(--x-steps-title-font-size, var(--x-font-size-lg, 16px));line-height:var(--x-steps-title-line-height, 32px)}.x-steps-item-title::after{position:absolute;top:calc(var(--x-steps-icon-size, 32px) / 2);left:100%;display:block;width:9999px;height:1px;background:var(--x-steps-tail-color, var(--x-color-split, rgba(5, 5, 5, 0.06)));content:""}.x-steps-item-subtitle{display:inline;margin-left:var(--x-steps-subtitle-margin-left, var(--x-margin-xs, 8px));color:var(--x-steps-subtitle-color, var(--x-color-text-description, rgba(0, 0, 0, 0.45)));font-size:var(--x-steps-font-size, var(--x-font-size, 14px));font-weight:normal}.x-steps-item-description{max-width:var(--x-steps-description-max-width, 140px);color:var(--x-steps-description-color, var(--x-color-text-description, rgba(0, 0, 0, 0.45)));font-size:var(--x-steps-description-font-size, var(--x-font-size, 14px));line-height:var(--x-steps-line-height, var(--x-line-height, 1.5714285714));white-space:normal}.x-steps-item-tail{display:none}.x-steps-item-wait .x-steps-item-icon{background-color:var(--x-steps-icon-bg, var(--x-color-bg-container, #ffffff));border-color:var(--x-steps-icon-border-color, var(--x-color-text-disabled, rgba(0, 0, 0, 0.25)))}.x-steps-item-wait .x-steps-item-icon>.x-steps-icon{color:var(--x-steps-icon-color, var(--x-color-text-disabled, rgba(0, 0, 0, 0.25)))}.x-steps-item-wait .x-steps-item-title{color:var(--x-steps-title-color, var(--x-color-text-disabled, rgba(0, 0, 0, 0.45)))}.x-steps-item-wait .x-steps-item-title::after{background-color:var(--x-steps-tail-color, var(--x-color-split, rgba(5, 5, 5, 0.06)))}.x-steps-item-wait .x-steps-item-description{color:var(--x-steps-description-color, var(--x-color-text-description, rgba(0, 0, 0, 0.45)))}.x-steps-item-wait .x-steps-item-tail::after{background-color:var(--x-steps-tail-color, var(--x-color-split, rgba(5, 5, 5, 0.06)))}.x-steps-item-process .x-steps-item-icon{background-color:var(--x-steps-process-icon-bg, var(--x-color-primary, #1677ff));border-color:var(--x-steps-process-icon-border-color, var(--x-color-primary, #1677ff))}.x-steps-item-process .x-steps-item-icon>.x-steps-icon{color:var(--x-steps-process-icon-color, var(--x-color-white, #ffffff))}.x-steps-item-process .x-steps-item-title{color:var(--x-steps-process-title-color, var(--x-color-text-heading, rgba(0, 0, 0, 0.88)));font-weight:var(--x-steps-process-title-font-weight, 500)}.x-steps-item-process .x-steps-item-title::after{background-color:var(--x-steps-process-tail-color, var(--x-color-split, rgba(5, 5, 5, 0.06)))}.x-steps-item-process .x-steps-item-description{color:var(--x-steps-process-description-color, var(--x-color-text, rgba(0, 0, 0, 0.88)))}.x-steps-item-process .x-steps-item-tail::after{background-color:var(--x-steps-process-tail-color, var(--x-color-split, rgba(5, 5, 5, 0.06)))}.x-steps-item-finish .x-steps-item-icon{background-color:var(--x-steps-finish-icon-bg, var(--x-color-bg-container, #ffffff));border-color:var(--x-steps-finish-icon-border-color, var(--x-color-primary, #1677ff))}.x-steps-item-finish .x-steps-item-icon>.x-steps-icon{color:var(--x-steps-finish-icon-color, var(--x-color-primary, #1677ff))}.x-steps-item-finish .x-steps-item-title{color:var(--x-steps-finish-title-color, var(--x-color-text-heading, rgba(0, 0, 0, 0.88)))}.x-steps-item-finish .x-steps-item-title::after{background-color:var(--x-steps-finish-tail-color, var(--x-color-primary, #1677ff))}.x-steps-item-finish .x-steps-item-description{color:var(--x-steps-finish-description-color, var(--x-color-text-description, rgba(0, 0, 0, 0.45)))}.x-steps-item-finish .x-steps-item-tail::after{background-color:var(--x-steps-finish-tail-color, var(--x-color-primary, #1677ff))}.x-steps-item-error .x-steps-item-icon{background-color:var(--x-steps-error-icon-bg, var(--x-color-bg-container, #ffffff));border-color:var(--x-steps-error-icon-border-color, var(--x-color-error, #ff4d4f))}.x-steps-item-error .x-steps-item-icon>.x-steps-icon{color:var(--x-steps-error-icon-color, var(--x-color-error, #ff4d4f))}.x-steps-item-error .x-steps-item-title{color:var(--x-steps-error-title-color, var(--x-color-error, #ff4d4f))}.x-steps-item-error .x-steps-item-title::after{background-color:var(--x-steps-error-tail-color, var(--x-color-split, rgba(5, 5, 5, 0.06)))}.x-steps-item-error .x-steps-item-description{color:var(--x-steps-error-description-color, var(--x-color-error, #ff4d4f))}.x-steps-item-error .x-steps-item-tail::after{background-color:var(--x-steps-error-tail-color, var(--x-color-split, rgba(5, 5, 5, 0.06)))}.x-steps-item-clickable{cursor:pointer}.x-steps-item-clickable .x-steps-item-title,.x-steps-item-clickable .x-steps-item-description,.x-steps-item-clickable .x-steps-item-icon{-webkit-transition:color var(--x-steps-motion-duration, 0.3s);transition:color var(--x-steps-motion-duration, 0.3s)}.x-steps-item-clickable:hover .x-steps-item-title,.x-steps-item-clickable:hover .x-steps-item-description{color:var(--x-steps-item-hover-color, var(--x-color-primary-hover, #4096ff))}.x-steps-item-clickable:hover .x-steps-item-icon{border-color:var(--x-steps-item-hover-color, var(--x-color-primary-hover, #4096ff))}.x-steps-item-clickable:hover .x-steps-item-icon>.x-steps-icon{color:var(--x-steps-item-hover-color, var(--x-color-primary-hover, #4096ff))}:host(.x-steps-small) .x-steps-item-icon{width:var(--x-steps-small-icon-size, 24px);height:var(--x-steps-small-icon-size, 24px);line-height:var(--x-steps-small-icon-size, 24px);margin-right:var(--x-steps-icon-margin-right, var(--x-margin-xs, 8px));font-size:var(--x-steps-small-icon-font-size, 12px)}:host(.x-steps-small) .x-steps-item-title{font-size:var(--x-steps-font-size, var(--x-font-size, 14px));line-height:var(--x-steps-small-icon-size, 24px);padding-right:var(--x-steps-small-title-padding-right, 12px)}:host(.x-steps-small) .x-steps-item-title::after{top:calc(var(--x-steps-small-icon-size, 24px) / 2)}:host(.x-steps-small) .x-steps-item-description{font-size:var(--x-steps-font-size-sm, var(--x-font-size-sm, 12px));color:var(--x-steps-subtitle-color, var(--x-color-text-description, rgba(0, 0, 0, 0.45)))}:host(.x-steps-small) .x-steps-item-tail{top:var(--x-steps-vertical-small-tail-top, 8px);padding:var(--x-steps-vertical-tail-padding-sm, 30px 0 6px)}:host(.x-steps-vertical){-ms-flex-direction:column;flex-direction:column}:host(.x-steps-vertical) .x-steps-item{display:block;overflow:visible;margin-bottom:0;-ms-flex:1 0 auto;flex:1 0 auto;margin-right:0}:host(.x-steps-vertical) .x-steps-item-container{display:block;position:relative}:host(.x-steps-vertical) .x-steps-item-tail{display:block;position:absolute;top:0;left:calc(var(--x-steps-icon-size, 32px) / 2);width:var(--x-steps-vertical-tail-width, 1px);height:100%;padding:var(--x-steps-vertical-tail-padding, 38px 0 6px)}:host(.x-steps-vertical) .x-steps-item-tail::after{width:var(--x-steps-vertical-tail-width, 1px);height:100%;background-color:var(--x-steps-tail-color, var(--x-color-split, rgba(5, 5, 5, 0.06)));border-radius:var(--x-steps-tail-border-radius, 1px);display:block;-webkit-transition:background var(--x-steps-motion-duration, 0.3s);transition:background var(--x-steps-motion-duration, 0.3s);content:""}:host(.x-steps-vertical) .x-steps-item-icon{float:left;margin-right:var(--x-steps-item-margin-right, var(--x-margin-md, 16px));position:relative;z-index:1;background-color:var(--x-steps-bg, transparent)}:host(.x-steps-vertical) .x-steps-item-content{display:block;min-height:var(--x-steps-vertical-content-min-height, 48px);overflow:hidden;padding-bottom:var(--x-steps-vertical-content-padding-bottom, var(--x-spacing-xl, 24px))}:host(.x-steps-vertical) .x-steps-item-title{line-height:var(--x-steps-icon-size, 32px)}:host(.x-steps-vertical) .x-steps-item-title::after{display:none}:host(.x-steps-vertical) .x-steps-item-description{padding-bottom:0;max-width:none}:host(.x-steps-vertical) .x-steps-item:last-child .x-steps-item-tail{display:none}:host(.x-steps-vertical) .x-steps-item:last-child .x-steps-item-content{padding-bottom:0}:host(.x-steps-vertical).x-steps-small .x-steps-item-tail{left:calc(var(--x-steps-small-icon-size, 24px) / 2);padding:var(--x-steps-vertical-tail-padding-sm, 30px 0 6px)}:host(.x-steps-vertical).x-steps-small .x-steps-item-content{padding-bottom:var(--x-steps-vertical-content-padding-bottom-sm, var(--x-padding-md, 16px))}:host(.x-steps-dot) .x-steps-item-icon{width:var(--x-steps-dot-size, 8px);height:var(--x-steps-dot-size, 8px);border:0;background:transparent;margin-right:0;padding-right:0;width:auto;height:auto;line-height:0;margin-left:var(--x-steps-dot-margin-left, 2px)}:host(.x-steps-dot) .x-steps-icon-dot{width:var(--x-steps-dot-size, 8px);height:var(--x-steps-dot-size, 8px);border-radius:100%;background-color:var(--x-steps-tail-color, var(--x-color-split, rgba(5, 5, 5, 0.06)));display:block;-webkit-transition:all var(--x-steps-motion-duration, 0.3s);transition:all var(--x-steps-motion-duration, 0.3s)}:host(.x-steps-dot) .x-steps-item-process .x-steps-icon-dot{width:var(--x-steps-dot-current-size, 10px);height:var(--x-steps-dot-current-size, 10px);background-color:var(--x-steps-process-icon-bg, var(--x-color-primary, #1677ff))}:host(.x-steps-dot) .x-steps-item-finish .x-steps-icon-dot{background-color:var(--x-steps-finish-icon-border-color, var(--x-color-primary, #1677ff))}:host(.x-steps-dot) .x-steps-item-tail{display:none}:host(.x-steps-dot) .x-steps-item-title::after{top:calc(var(--x-steps-dot-size, 8px) / 2);height:var(--x-steps-dot-tail-height, 3px);background:var(--x-steps-tail-color, var(--x-color-split, rgba(5, 5, 5, 0.06)))}:host(.x-steps-label-vertical) .x-steps-item{overflow:visible}:host(.x-steps-label-vertical) .x-steps-item-container{display:block;width:var(--x-steps-label-vertical-item-width, 120px);text-align:center}:host(.x-steps-label-vertical) .x-steps-item-tail{display:block;position:absolute;left:50%;width:100%;top:calc(var(--x-steps-icon-size, 32px) / 2);padding:var(--x-steps-label-vertical-tail-padding, 0 24px);margin-left:0}:host(.x-steps-label-vertical) .x-steps-item-tail::after{display:block;width:100%;height:var(--x-steps-label-vertical-tail-height, 1px);background:var(--x-steps-tail-color, var(--x-color-split, rgba(5, 5, 5, 0.06)));content:""}:host(.x-steps-label-vertical) .x-steps-item-icon{display:inline-block;margin-left:0;margin-right:0}:host(.x-steps-label-vertical) .x-steps-item-content{display:block;width:100%;margin-top:var(--x-steps-label-vertical-content-margin-top, var(--x-margin-sm, 12px));text-align:center}:host(.x-steps-label-vertical) .x-steps-item-title{padding-right:0;display:block}:host(.x-steps-label-vertical) .x-steps-item-title::after{display:none}:host(.x-steps-label-vertical) .x-steps-item-subtitle{display:block;margin:var(--x-steps-subtitle-margin-top, 4px) 0 0}:host(.x-steps-label-vertical) .x-steps-item-description{text-align:center;margin:auto}:host(.x-steps-navigation){padding-top:var(--x-steps-nav-padding-top, 12px)}:host(.x-steps-navigation) .x-steps-item{-ms-flex:1;flex:1;text-align:center;margin-right:0;padding-bottom:var(--x-steps-nav-item-padding-bottom, 12px);border-bottom:var(--x-steps-nav-item-border-width, 1px) solid transparent;-webkit-transition:all var(--x-steps-motion-duration, 0.3s);transition:all var(--x-steps-motion-duration, 0.3s)}:host(.x-steps-navigation) .x-steps-item::after{display:none}:host(.x-steps-navigation) .x-steps-item-container{display:inline-block;-webkit-transform:translateY(0);transform:translateY(0);-webkit-transition:-webkit-transform var(--x-steps-motion-duration, 0.3s);transition:-webkit-transform var(--x-steps-motion-duration, 0.3s);transition:transform var(--x-steps-motion-duration, 0.3s);transition:transform var(--x-steps-motion-duration, 0.3s), -webkit-transform var(--x-steps-motion-duration, 0.3s)}:host(.x-steps-navigation) .x-steps-item-content{display:block;width:auto;text-align:center}:host(.x-steps-navigation) .x-steps-item-tail{display:none}:host(.x-steps-navigation) .x-steps-item-active{border-bottom-color:var(--x-steps-process-icon-bg, var(--x-color-primary, #1677ff))}:host(.x-steps-navigation) .x-steps-item-title::after{display:none}:host(.x-steps-inline){width:auto;display:-ms-inline-flexbox;display:inline-flex}:host(.x-steps-inline) .x-steps-item{-ms-flex:none;flex:none;margin-right:var(--x-steps-inline-item-margin-right, 16px)}:host(.x-steps-inline) .x-steps-item-icon{width:var(--x-steps-inline-icon-size, 24px);height:var(--x-steps-inline-icon-size, 24px);line-height:var(--x-steps-inline-icon-size, 24px);font-size:var(--x-steps-inline-icon-font-size, 12px);margin-right:var(--x-steps-inline-icon-margin-right, 8px)}:host(.x-steps-inline) .x-steps-item-title{font-size:var(--x-steps-inline-title-font-size, 14px);line-height:var(--x-steps-inline-icon-size, 24px);padding-right:0}:host(.x-steps-inline) .x-steps-item-title::after{display:none}:host(.x-steps-inline) .x-steps-item-description{display:none}:host(.x-steps-inline) .x-steps-item-tail{display:none}:host(.x-steps-panel){background:transparent}:host(.x-steps-panel) .x-steps-item{-ms-flex:1;flex:1;margin-right:0;overflow:visible}:host(.x-steps-panel) .x-steps-item:not(:last-child){margin-right:var(--x-steps-panel-item-gap, 4px)}:host(.x-steps-panel) .x-steps-item-container{display:block;padding:var(--x-steps-panel-container-padding, 0 12px);height:var(--x-steps-panel-container-height, 48px);line-height:var(--x-steps-panel-container-height, 48px);background:var(--x-steps-panel-container-bg, #f5f5f5);-webkit-transition:background var(--x-steps-motion-duration, 0.3s);transition:background var(--x-steps-motion-duration, 0.3s);border-radius:var(--x-steps-panel-container-border-radius, 2px);position:relative;text-align:left}:host(.x-steps-panel) .x-steps-item-tail,:host(.x-steps-panel) .x-steps-item-title::after{display:none}:host(.x-steps-panel) .x-steps-item-content{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;height:100%}:host(.x-steps-panel) .x-steps-item-title{line-height:inherit;padding-right:0;font-weight:var(--x-steps-panel-title-font-weight, 500);color:var(--x-steps-panel-title-color, rgba(0, 0, 0, 0.65))}:host(.x-steps-panel) .x-steps-item-icon{background:transparent;border:0;width:auto;height:auto;margin-right:var(--x-steps-inline-icon-margin-right, 8px)}:host(.x-steps-panel) .x-steps-item-process .x-steps-item-container{background:var(--x-steps-panel-process-bg, #e6f7ff);border:var(--x-steps-panel-item-border-width, 1px) solid var(--x-steps-process-icon-bg, var(--x-color-primary, #1677ff))}:host(.x-steps-panel) .x-steps-item-active .x-steps-item-title{color:var(--x-steps-process-icon-bg, var(--x-color-primary, #1677ff))}:host(.x-steps-panel) .x-steps-item-finish .x-steps-item-container{background:var(--x-steps-panel-finish-bg, #f0f5ff)}`;
+
+const XSteps = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.xChange = createEvent(this, "xChange", 7);
+        this.xStepClick = createEvent(this, "xStepClick", 7);
+    }
+    get el() { return getElement(this); }
+    // ==================== Props ====================
+    /**
+     * Current step index, counting from 0.
+     * @default 0
+     * @example
+     * <x-steps current={1}></x-steps>
+     */
+    current = 0;
+    /**
+     * Direction/orientation of the steps.
+     * @default 'horizontal'
+     * @example
+     * <x-steps direction="vertical"></x-steps>
+     */
+    direction = 'horizontal';
+    /**
+     * Initial step, counting from 0.
+     * @default 0
+     * @example
+     * <x-steps initial={1}></x-steps>
+     */
+    initial = 0;
+    /**
+     * Size of the steps.
+     * @default 'default'
+     * @example
+     * <x-steps size="small"></x-steps>
+     */
+    size = 'default';
+    /**
+     * Status of the current step.
+     * @default 'process'
+     * @example
+     * <x-steps status="error"></x-steps>
+     */
+    status = 'process';
+    /**
+     * Type/style of steps.
+     * @default 'default'
+     * @example
+     * <x-steps type="navigation"></x-steps>
+     */
+    type = 'default';
+    /**
+     * Title placement direction.
+     * @deprecated Use `labelPlacement` instead.
+     * @default 'horizontal'
+     * @example
+     * <x-steps titlePlacement="vertical"></x-steps>
+     */
+    titlePlacement = 'horizontal';
+    /**
+     * Label placement direction.
+     * @default 'horizontal'
+     * @example
+     * <x-steps labelPlacement="vertical"></x-steps>
+     */
+    labelPlacement = 'horizontal';
+    /**
+     * Style variant.
+     * @default 'filled'
+     * @example
+     * <x-steps variant="outlined"></x-steps>
+     */
+    variant = 'filled';
+    /**
+     * Progress percentage of current step (only works on default type).
+     * @example
+     * <x-steps percent={60}></x-steps>
+     */
+    percent;
+    /**
+     * Whether to use progress dot style.
+     * @default false
+     * @example
+     * <x-steps progressDot></x-steps>
+     */
+    progressDot = false;
+    /**
+     * Whether to be responsive (vertical when screen < 532px).
+     * @default true
+     * @example
+     * <x-steps responsive={false}></x-steps>
+     */
+    responsive = true;
+    /**
+     * Step items configuration (alternative to slots).
+     * @example
+     * <x-steps items={[{ title: 'Start' }, { title: 'End' }]}></x-steps>
+     */
+    items;
+    /**
+     * Custom class names for parts.
+     * @example
+     * <x-steps classNames={{ root: 'my-steps' }}></x-steps>
+     */
+    classNames;
+    /**
+     * Custom styles for parts.
+     * @example
+     * <x-steps styles={{ root: { marginTop: '8px' } }}></x-steps>
+     */
+    styles;
+    // ==================== Events ====================
+    /**
+     * Callback when step is changed (only when clickable).
+     * @example
+     * <x-steps onXChange={(ev) => console.log(ev.detail)}></x-steps>
+     */
+    xChange;
+    /**
+     * Callback when step is clicked.
+     * @example
+     * <x-steps onXStepClick={(ev) => console.log(ev.detail)}></x-steps>
+     */
+    xStepClick;
+    // ==================== State ====================
+    /**
+     * Internal direction that may change based on responsiveness.
+     */
+    internalDirection = 'horizontal';
+    // ==================== Lifecycle ====================
+    /**
+     * Initialize internal direction and responsive state.
+     * @returns void
+     */
+    componentWillLoad() {
+        this.internalDirection = this.direction;
+        this.checkResponsive();
+    }
+    /**
+     * Sync child steps and attach resize handler.
+     * @returns void
+     */
+    componentDidLoad() {
+        this.updateSteps();
+        if (this.responsive) {
+            window.addEventListener('resize', this.handleResize);
+        }
+    }
+    /**
+     * Remove resize handler on disconnect.
+     * @returns void
+     * @example
+     * <x-steps></x-steps>
+     */
+    disconnectedCallback() {
+        if (this.responsive) {
+            window.removeEventListener('resize', this.handleResize);
+        }
+    }
+    // ==================== Watchers ====================
+    /**
+     * Recompute step states when props change.
+     * @returns void
+     * @example
+     * <x-steps></x-steps>
+     */
+    handlePropsChange() {
+        this.updateSteps();
+    }
+    // ==================== Methods ====================
+    /**
+     * Go to next step.
+     * @returns Promise<void>
+     * @example
+     * await el.next()
+     */
+    async next() {
+        const totalSteps = this.getTotalSteps();
+        if (this.current < totalSteps - 1) {
+            const previous = this.current;
+            this.current = this.current + 1;
+            this.xChange.emit({ current: this.current, previous });
+        }
+    }
+    /**
+     * Go to previous step.
+     * @returns Promise<void>
+     * @example
+     * await el.prev()
+     */
+    async prev() {
+        if (this.current > 0) {
+            const previous = this.current;
+            this.current = this.current - 1;
+            this.xChange.emit({ current: this.current, previous });
+        }
+    }
+    /**
+     * Go to specific step.
+     * @param stepIndex - Step index.
+     * @returns Promise<void>
+     * @example
+     * await el.goTo(2)
+     */
+    async goTo(stepIndex) {
+        const totalSteps = this.getTotalSteps();
+        if (stepIndex >= 0 && stepIndex < totalSteps) {
+            const previous = this.current;
+            this.current = stepIndex;
+            this.xChange.emit({ current: this.current, previous });
+        }
+    }
+    // ==================== Private Methods ====================
+    /**
+     * Handle window resize for responsive behavior.
+     * @returns void
+     * @example
+     * <x-steps responsive></x-steps>
+     */
+    handleResize = () => {
+        this.checkResponsive();
+    };
+    /**
+     * Update internal direction based on responsive rules.
+     * @returns void
+     * @example
+     * <x-steps responsive direction="horizontal"></x-steps>
+     */
+    checkResponsive() {
+        if (this.responsive && this.direction === 'horizontal') {
+            this.internalDirection = window.innerWidth < 532 ? 'vertical' : 'horizontal';
+        }
+        else {
+            this.internalDirection = this.direction;
+        }
+    }
+    /**
+     * Get total step count from items or slots.
+     * @returns number
+     * @example
+     * const count = this.getTotalSteps()
+     */
+    getTotalSteps() {
+        if (this.items && this.items.length > 0) {
+            return this.items.length;
+        }
+        return this.el.querySelectorAll('x-step').length;
+    }
+    /**
+     * Sync child steps with current state.
+     * @returns void
+     * @example
+     * <x-steps current={1}></x-steps>
+     */
+    updateSteps() {
+        const steps = Array.from(this.el.querySelectorAll('x-step'));
+        steps.forEach((step, index) => {
+            // Internal props (prefixed with _)
+            step._stepNumber = this.initial + index + 1;
+            step._stepIndex = index;
+            step._direction = this.internalDirection;
+            step._size = this.size;
+            step._type = this.type;
+            step._progressDot = this.progressDot || this.type === 'dot';
+            step._clickable = this.hasStepClickHandler();
+            // Pass percent to current step
+            if (index === this.current) {
+                step.percent = this.percent;
+            }
+            else {
+                step.percent = undefined;
+            }
+            // Determine status
+            if (index < this.current) {
+                step.status = 'finish';
+            }
+            else if (index === this.current) {
+                step.status = this.status;
+            }
+            else {
+                step.status = 'wait';
+            }
+        });
+    }
+    /**
+     * Determine if step click handling should be enabled.
+     * @returns boolean
+     * @example
+     * const clickable = this.hasStepClickHandler()
+     */
+    hasStepClickHandler() {
+        // Check if xChange has listeners
+        return true; // Always allow click, let the event handler decide
+    }
+    /**
+     * Handle step click and emit events.
+     * @param index - Step index.
+     * @param disabled - Disabled flag.
+     * @returns void
+     * @example
+     * <x-steps></x-steps>
+     */
+    handleStepClick = (index, disabled) => {
+        if (disabled)
+            return;
+        const previous = this.current;
+        this.current = index;
+        this.xStepClick.emit(index);
+        this.xChange.emit({ current: index, previous });
+    };
+    /**
+     * Get status for a given step index.
+     * @param index - Step index.
+     * @returns StepStatus
+     * @example
+     * const status = this.getStepStatus(1)
+     */
+    getStepStatus(index) {
+        if (index < this.current) {
+            return 'finish';
+        }
+        else if (index === this.current) {
+            return this.status;
+        }
+        return 'wait';
+    }
+    // ==================== Render ====================
+    /**
+     * Renders the steps based on the `items` prop configuration.
+     *
+     * Flow:
+     * 1. Checks if `items` array exists and has content.
+     * 2. Iterates through each item to create an `x-step` element.
+     * 3. Determines the status of each step (finish, process, wait) relative to `current`.
+     * 4. Passes all configuration props (title, subtitle, description, icon, disabled, etc.) to `x-step`.
+     * 5. Sets internal props (_stepNumber, _stepIndex, _direction, _size, etc.) for correct styling.
+     * 6. Attaches click handler to emit `xStepClick` and `xChange` events when a step is clicked.
+     *
+     * @returns JSX.Element[] | null - Array of x-step elements or null.
+     */
+    renderItems() {
+        if (!this.items || this.items.length === 0)
+            return null;
+        return this.items.map((item, index) => {
+            const status = item.status || this.getStepStatus(index);
+            // Determine progress percent
+            const percent = index === this.current ? this.percent : undefined;
+            return (h("x-step", { stepTitle: item.title, subTitle: item.subTitle, description: item.description, icon: item.icon, status: status, disabled: item.disabled, percent: percent,
+                // Internal props
+                _stepNumber: this.initial + index + 1, _stepIndex: index, _direction: this.internalDirection, _size: this.size, _type: this.type, _progressDot: this.progressDot || this.type === 'dot', _clickable: this.hasStepClickHandler(),
+                // Event needs to be handled? x-step emits xStepClick
+                // We can listen via standard prop or just let it bubble if we listen on parent?
+                // But x-step is in shadow root. xStepClick bubbles and composed: true.
+                // So we can listen on Host or just rely on bubbling.
+                // However, handleStepClick in 'updateSteps' logic sets up listeners on slotted items?
+                // No, updateSteps doesn't add listeners. It sets _clickable.
+                // The event 'xStepClick' is emitted by x-step. x-steps listens to it?
+                // x-steps has @Event xStepClick. This is outgoing.
+                // x-steps needs to listen to incoming 'xStepClick' from children.
+                // I need to add @Listen('xStepClick') in x-steps.tsx.
+                onClick: (e) => {
+                    // Stop propagation if needed, but we rely on custom event
+                    e.stopPropagation();
+                }, onXStepClick: (e) => {
+                    e.stopPropagation();
+                    this.handleStepClick(e.detail.index, item.disabled);
+                } }));
+        });
+    }
+    /**
+     * Main render method for the Steps component.
+     *
+     * Flow:
+     * 1. Determines if steps are rendered from `items` prop or slots.
+     * 2. Resolves label placement preference (supporting deprecated `titlePlacement`).
+     * 3. Constructs the class map for the host element based on:
+     *    - Direction (horizontal/vertical)
+     *    - Size (small/default)
+     *    - Type (default/navigation/dot)
+     *    - Variant (filled/outlined)
+     *    - Label placement
+     * 4. Renders the host with computed classes.
+     * 5. If `items` prop is present, calls `renderItems`.
+     * 6. Otherwise, renders a slot and listens for `slotchange` to sync step state.
+     *
+     * @returns JSX.Element
+     */
+    render() {
+        const hasItems = this.items && this.items.length > 0;
+        // Favor labelPlacement, fallback to titlePlacement if labelPlacement is default (this logic depends on usage, but here assume labelPlacement is primary)
+        // Actually, to support deprecated correctly: if titlePlacement is set (and not default), use it? 
+        // Simplified: use titlePlacement only if labelPlacement is 'horizontal' (default) and titlePlacement is NOT 'horizontal'.
+        const effectiveLabelPlacement = (this.labelPlacement === 'horizontal' && this.titlePlacement !== 'horizontal')
+            ? this.titlePlacement
+            : this.labelPlacement;
+        const classes = {
+            'x-steps': true,
+            [`x-steps-${this.internalDirection}`]: true,
+            [`x-steps-${this.size}`]: this.size !== 'default',
+            [`x-steps-${this.type}`]: this.type !== 'default',
+            [`x-steps-${this.variant}`]: true,
+            'x-steps-dot': this.progressDot || this.type === 'dot',
+            [`x-steps-label-${effectiveLabelPlacement}`]: this.internalDirection === 'horizontal',
+            [this.classNames?.root ?? '']: !!this.classNames?.root,
+        };
+        return (h(Host, { key: 'd8e38e332addd002b428fb4678a30a7757f21514', class: classes, style: this.styles?.root }, hasItems ? this.renderItems() : h("slot", { onSlotchange: () => this.updateSteps() })));
+    }
+    static get watchers() { return {
+        "current": [{
+                "handlePropsChange": 0
+            }],
+        "status": [{
+                "handlePropsChange": 0
+            }],
+        "direction": [{
+                "handlePropsChange": 0
+            }],
+        "type": [{
+                "handlePropsChange": 0
+            }],
+        "size": [{
+                "handlePropsChange": 0
+            }],
+        "progressDot": [{
+                "handlePropsChange": 0
+            }],
+        "percent": [{
+                "handlePropsChange": 0
+            }]
+    }; }
+};
+XSteps.style = xStepsCss();
+
+export { XSteps as x_steps };

package/dist/esm/x-tab-pane.entry.js

@@ -0,0 +1,71 @@
+import { r as registerInstance, a as getElement, h, H as Host } from './index-ig_mFsVk.js';
+
+const xTabPaneCss = () => `@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:var(--x-tab-pane-display, none);width:var(--x-tab-pane-width, 100%)}:host(.x-tab-pane-active){display:var(--x-tab-pane-display-active, block)}`;
+
+const XTabPane = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    get el() { return getElement(this); }
+    /**
+     * Show text in tab's head.
+     * @example
+     * <x-tab-pane tab="Profile"></x-tab-pane>
+     */
+    tab;
+    /**
+     * TabPane's key.
+     * @example
+     * <x-tab-pane tab-key="profile"></x-tab-pane>
+     */
+    tabKey;
+    /**
+     * Forced render of content in tabs, not lazy.
+     * @example
+     * <x-tab-pane forceRender></x-tab-pane>
+     */
+    forceRender = false;
+    /**
+     * Internal active state managed by parent x-tabs.
+     * @example
+     * <x-tab-pane active></x-tab-pane>
+     */
+    active = false;
+    /**
+     * Whether to destroy inactive pane content.
+     * @example
+     * <x-tab-pane destroyInactiveTabPane></x-tab-pane>
+     */
+    destroyInactiveTabPane = false;
+    /**
+     * Whether tab can be closed (only for editable-card).
+     * @example
+     * <x-tab-pane closable></x-tab-pane>
+     */
+    closable = true;
+    /**
+     * Tab header icon.
+     * @example
+     * <x-tab-pane icon="home"></x-tab-pane>
+     */
+    icon;
+    /**
+     * Render tab pane content based on active and destroy flags.
+     * @returns JSX.Element
+     * @example
+     * <x-tab-pane tab="Tab">Content</x-tab-pane>
+     */
+    render() {
+        // Only render content when active, forced, or not destroyed.
+        const shouldRender = this.active || this.forceRender || !this.destroyInactiveTabPane;
+        return (h(Host, { key: 'b2f8ab4ce9adde5ca8b5af58162a0cba08db1638', class: {
+                'x-tab-pane': true,
+                'x-tab-pane-active': this.active,
+            }, role: "tabpanel", "aria-hidden": !this.active ? 'true' : 'false', style: {
+                display: this.active ? 'block' : 'none'
+            }, tabindex: this.active ? 0 : -1 }, shouldRender ? h("slot", null) : null));
+    }
+};
+XTabPane.style = xTabPaneCss();
+
+export { XTabPane as x_tab_pane };

package/dist/esm/x-table-cell.entry.js

@@ -0,0 +1,43 @@
+import { r as registerInstance, h, H as Host } from './index-ig_mFsVk.js';
+
+const xTableCellCss = () => `@charset "UTF-8";:root{--x-color-primary:#1677ff;--x-color-primary-rgb:22, 119, 255;--x-color-primary-contrast:#ffffff;--x-color-primary-contrast-rgb:255, 255, 255;--x-color-primary-shade:#0958d9;--x-color-primary-tint:#4096ff;--x-color-primary-bg:#e6f4ff;--x-color-primary-bg-hover:#bae0ff;--x-color-primary-border:#91caff;--x-color-primary-border-hover:#69b1ff;--x-color-primary-hover:#4096ff;--x-color-primary-active:#0958d9;--x-color-primary-text:#1677ff;--x-color-primary-text-hover:#4096ff;--x-color-primary-text-active:#0958d9;--x-color-secondary:#3dc2ff;--x-color-secondary-rgb:61, 194, 255;--x-color-secondary-contrast:#ffffff;--x-color-secondary-contrast-rgb:255, 255, 255;--x-color-secondary-shade:#36abe0;--x-color-secondary-tint:#50c8ff;--x-color-success:#52c41a;--x-color-success-rgb:82, 196, 26;--x-color-success-contrast:#ffffff;--x-color-success-contrast-rgb:255, 255, 255;--x-color-success-shade:#389e0d;--x-color-success-tint:#73d13d;--x-color-success-bg:#f6ffed;--x-color-success-bg-hover:#d9f7be;--x-color-success-border:#b7eb8f;--x-color-success-border-hover:#95de64;--x-color-success-hover:#73d13d;--x-color-success-active:#389e0d;--x-color-success-text:#52c41a;--x-color-success-text-hover:#73d13d;--x-color-success-text-active:#389e0d;--x-color-warning:#faad14;--x-color-warning-rgb:250, 173, 20;--x-color-warning-contrast:#000000;--x-color-warning-contrast-rgb:0, 0, 0;--x-color-warning-shade:#d48806;--x-color-warning-tint:#ffc53d;--x-color-warning-bg:#fffbe6;--x-color-warning-bg-hover:#fff1b8;--x-color-warning-border:#ffe58f;--x-color-warning-border-hover:#ffd666;--x-color-warning-hover:#ffc53d;--x-color-warning-active:#d48806;--x-color-warning-text:#faad14;--x-color-warning-text-hover:#ffc53d;--x-color-warning-text-active:#d48806;--x-color-danger:#ff4d4f;--x-color-danger-rgb:255, 77, 79;--x-color-danger-contrast:#ffffff;--x-color-danger-contrast-rgb:255, 255, 255;--x-color-danger-shade:#cf1322;--x-color-danger-tint:#ff7875;--x-color-error:#ff4d4f;--x-color-error-rgb:255, 77, 79;--x-color-error-bg:#fff2f0;--x-color-error-bg-hover:#ffccc7;--x-color-error-border:#ffa39e;--x-color-error-border-hover:#ff7875;--x-color-error-hover:#ff7875;--x-color-error-active:#d9363e;--x-color-error-text:#ff4d4f;--x-color-error-text-hover:#ff7875;--x-color-error-text-active:#d9363e;--x-color-info:#1677ff;--x-color-info-rgb:22, 119, 255;--x-color-info-bg:#e6f4ff;--x-color-info-bg-hover:#bae0ff;--x-color-info-border:#91caff;--x-color-info-border-hover:#69b1ff;--x-color-info-hover:#69b1ff;--x-color-info-active:#0958d9;--x-color-info-text:#1677ff;--x-color-info-text-hover:#69b1ff;--x-color-info-text-active:#0958d9;--x-color-text:rgba(0, 0, 0, 0.88);--x-color-text-secondary:rgba(0, 0, 0, 0.65);--x-color-text-tertiary:rgba(0, 0, 0, 0.45);--x-color-text-quaternary:rgba(0, 0, 0, 0.25);--x-color-text-disabled:rgba(0, 0, 0, 0.25);--x-color-text-placeholder:rgba(0, 0, 0, 0.25);--x-color-text-heading:rgba(0, 0, 0, 0.88);--x-color-text-label:rgba(0, 0, 0, 0.65);--x-color-text-description:rgba(0, 0, 0, 0.45);--x-color-text-light-solid:#ffffff;--x-color-bg-container:#ffffff;--x-color-bg-elevated:#ffffff;--x-color-bg-layout:#f5f5f5;--x-color-bg-spotlight:rgba(0, 0, 0, 0.85);--x-color-bg-mask:rgba(0, 0, 0, 0.45);--x-color-bg-base:#ffffff;--x-color-bg-container-disabled:#f5f5f5;--x-color-bg-container-loading:rgba(255, 255, 255, 0.65);--x-color-white:#ffffff;--x-color-fill:rgba(0, 0, 0, 0.15);--x-color-fill-secondary:rgba(0, 0, 0, 0.06);--x-color-fill-tertiary:rgba(0, 0, 0, 0.04);--x-color-fill-quaternary:rgba(0, 0, 0, 0.02);--x-color-border:#d9d9d9;--x-color-border-secondary:#f0f0f0;--x-color-border-bg:#ffffff;--x-color-split:rgba(5, 5, 5, 0.06);--x-color-dark:#222428;--x-color-dark-rgb:34, 36, 40;--x-color-dark-contrast:#ffffff;--x-color-dark-contrast-rgb:255, 255, 255;--x-color-dark-shade:#1e2023;--x-color-dark-tint:#383a3e;--x-color-medium:#92949c;--x-color-medium-rgb:146, 148, 156;--x-color-medium-contrast:#ffffff;--x-color-medium-contrast-rgb:255, 255, 255;--x-color-medium-shade:#808289;--x-color-medium-tint:#9d9fa6;--x-color-light:#f4f5f8;--x-color-light-rgb:244, 245, 248;--x-color-light-contrast:#000000;--x-color-light-contrast-rgb:0, 0, 0;--x-color-light-shade:#d7d8da;--x-color-light-tint:#f5f6f9;--x-font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--x-font-family-code:"SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;--x-font-size:14px;--x-font-size-sm:12px;--x-font-size-lg:16px;--x-font-size-xl:20px;--x-font-size-heading-1:38px;--x-font-size-heading-2:30px;--x-font-size-heading-3:24px;--x-font-size-heading-4:20px;--x-font-size-heading-5:16px;--x-line-height:1.5714285714285714;--x-line-height-lg:1.5;--x-line-height-sm:1.6666666666666667;--x-line-height-heading-1:1.2105263157894737;--x-line-height-heading-2:1.2666666666666666;--x-line-height-heading-3:1.3333333333333333;--x-line-height-heading-4:1.4;--x-line-height-heading-5:1.5;--x-font-weight-normal:400;--x-font-weight-medium:500;--x-font-weight-semibold:600;--x-font-weight-strong:600;--x-font-size-base:14px;--x-font-size-xxl:24px;--x-line-height-base:1.5714285714285714;--x-spacing-xxs:4px;--x-spacing-xs:8px;--x-spacing-sm:12px;--x-spacing-md:16px;--x-spacing-lg:20px;--x-spacing-xl:24px;--x-spacing-xxl:32px;--x-spacing-xxxl:48px;--x-margin-xxs:4px;--x-margin-xs:8px;--x-margin-sm:12px;--x-margin-md:16px;--x-margin-lg:24px;--x-margin-xl:32px;--x-margin-xxl:48px;--x-padding-xxs:4px;--x-padding-xs:8px;--x-padding-sm:12px;--x-padding-md:16px;--x-padding-lg:24px;--x-padding-content-horizontal-lg:24px;--x-padding-content-vertical-lg:12px;--x-padding-content-horizontal:16px;--x-padding-content-vertical:12px;--x-padding-content-horizontal-sm:16px;--x-padding-content-vertical-sm:8px;--x-border-radius:6px;--x-border-radius-xs:2px;--x-border-radius-sm:4px;--x-border-radius-lg:8px;--x-border-radius-xl:12px;--x-border-radius-outer:4px;--x-border-radius-base:6px;--x-border-width:1px;--x-border-width-base:1px;--x-shadow:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-shadow-secondary:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-shadow-tertiary:0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02);--x-shadow-lg:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-secondary:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-tertiary:0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02);--x-box-shadow-popover-arrow:2px 2px 5px rgba(0, 0, 0, 0.05);--x-box-shadow-card:0 1px 2px -2px rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.12), 0 5px 12px 4px rgba(0, 0, 0, 0.09);--x-box-shadow-drawer-right:-6px 0 16px 0 rgba(0, 0, 0, 0.08), -3px 0 6px -4px rgba(0, 0, 0, 0.12), -9px 0 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-drawer-left:6px 0 16px 0 rgba(0, 0, 0, 0.08), 3px 0 6px -4px rgba(0, 0, 0, 0.12), 9px 0 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-drawer-up:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-drawer-down:0 -6px 16px 0 rgba(0, 0, 0, 0.08), 0 -3px 6px -4px rgba(0, 0, 0, 0.12), 0 -9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-tabs-overflow-left:inset 10px 0 8px -8px rgba(0, 0, 0, 0.08);--x-box-shadow-tabs-overflow-right:inset -10px 0 8px -8px rgba(0, 0, 0, 0.08);--x-box-shadow-tabs-overflow-top:inset 0 10px 8px -8px rgba(0, 0, 0, 0.08);--x-box-shadow-tabs-overflow-bottom:inset 0 -10px 8px -8px rgba(0, 0, 0, 0.08);--x-motion-duration-fast:0.1s;--x-motion-duration-mid:0.2s;--x-motion-duration-slow:0.3s;--x-motion-ease-in-out:cubic-bezier(0.645, 0.045, 0.355, 1);--x-motion-ease-out:cubic-bezier(0.215, 0.61, 0.355, 1);--x-motion-ease-in:cubic-bezier(0.55, 0.055, 0.675, 0.19);--x-motion-ease-out-back:cubic-bezier(0.12, 0.4, 0.29, 1.46);--x-motion-ease-in-back:cubic-bezier(0.71, -0.46, 0.88, 0.6);--x-motion-ease-in-out-circle:cubic-bezier(0.78, 0.14, 0.15, 0.86);--x-motion-ease-out-circle:cubic-bezier(0.08, 0.82, 0.17, 1);--x-motion-ease-in-circle:cubic-bezier(0.6, 0.04, 0.98, 0.34);--x-motion-ease-in-quint:cubic-bezier(0.755, 0.05, 0.855, 0.06);--x-motion-ease-out-quint:cubic-bezier(0.23, 1, 0.32, 1);--x-z-index-base:0;--x-z-index-popup-base:1000;--x-z-index-popup:1030;--x-z-index-affix:10;--x-z-index-modal:1000;--x-z-index-modal-mask:1000;--x-z-index-drawer:1000;--x-z-index-popover:1030;--x-z-index-dropdown:1050;--x-z-index-tooltip:1070;--x-z-index-notification:1080;--x-z-index-message:1090;--x-z-index-popconfirm:1060;--x-z-index-table-fixed:10;--x-opacity-loading:0.65;--x-opacity-image:1;--x-opacity-disabled:0.5;--x-control-height:32px;--x-control-height-xs:24px;--x-control-height-sm:24px;--x-control-height-lg:40px;--x-control-radio-size:16px;--x-control-checkbox-size:16px;--x-control-padding-horizontal:12px;--x-control-padding-horizontal-sm:8px;--x-control-outline-width:2px;--x-control-outline:rgba(5, 145, 255, 0.1);--x-control-item-bg-hover:rgba(0, 0, 0, 0.04);--x-control-item-bg-active:#e6f4ff;--x-control-item-bg-active-hover:#bae0ff;--x-control-item-bg-active-disabled:rgba(0, 0, 0, 0.15);--x-control-tmp-outline:rgba(0, 0, 0, 0.02);--x-color-yellow:#fadb14;--x-color-yellow-rgb:250, 219, 20;--x-font-family-base:var(--x-font-family);--x-color-link:#1677ff;--x-color-link-hover:#69b1ff;--x-color-link-active:#0958d9;--x-color-icon:rgba(0, 0, 0, 0.45);--x-color-icon-hover:rgba(0, 0, 0, 0.88);--x-color-highlight:#ff4d4f;--x-color-bg-text-hover:rgba(0, 0, 0, 0.06);--x-color-bg-text-active:rgba(0, 0, 0, 0.15);--x-screen-xs:480px;--x-screen-xs-min:480px;--x-screen-xs-max:575px;--x-screen-sm:576px;--x-screen-sm-min:576px;--x-screen-sm-max:767px;--x-screen-md:768px;--x-screen-md-min:768px;--x-screen-md-max:991px;--x-screen-lg:992px;--x-screen-lg-min:992px;--x-screen-lg-max:1199px;--x-screen-xl:1200px;--x-screen-xl-min:1200px;--x-screen-xl-max:1599px;--x-screen-xxl:1600px;--x-screen-xxl-min:1600px;--x-color-fill-content:rgba(0, 0, 0, 0.06);--x-color-fill-content-hover:rgba(0, 0, 0, 0.15);--x-color-fill-alter:rgba(0, 0, 0, 0.02);--x-scrollbar-width:12px;--x-scrollbar-track-bg:rgba(0, 0, 0, 0.04);--x-scrollbar-thumb-bg:rgba(0, 0, 0, 0.25);--x-scrollbar-thumb-bg-hover:rgba(0, 0, 0, 0.35);--x-menu-dark-bg:#001529;--x-menu-dark-item-bg:#001529;--x-menu-dark-popup-bg:#001529;--x-menu-dark-submenu-item-bg:#000c17}x-table-cell{display:table-cell;padding:var(--x-table-cell-padding, 16px);border-bottom:var(--x-table-border-width, var(--x-border-width, 1px)) solid var(--x-table-border-color, var(--x-color-border-secondary, #f0f0f0));-webkit-transition:background var(--x-table-motion-duration, var(--x-motion-duration-slow, 0.3s));transition:background var(--x-table-motion-duration, var(--x-motion-duration-slow, 0.3s));-webkit-box-sizing:border-box;box-sizing:border-box;overflow-wrap:break-word}x-table-cell.x-table-align-left{text-align:left}x-table-cell.x-table-align-center{text-align:center}x-table-cell.x-table-align-right{text-align:right}`;
+
+const XTableCell = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    /**
+     * Data index of the column this cell belongs to.
+     */
+    dataIndex;
+    /**
+     * Alignment of the cell.
+     */
+    align = 'left';
+    /**
+     * Column span.
+     */
+    colSpan;
+    /**
+     * Row span.
+     */
+    rowSpan;
+    /**
+     * Custom class name.
+     */
+    cellClass;
+    /**
+     * Custom style.
+     */
+    customStyle;
+    render() {
+        return (h(Host, { key: 'b22403e480e5211ff3e0fc2535748fc7ab09a0f2', class: {
+                'x-table-cell': true,
+                [`x-table-align-${this.align}`]: true,
+                [this.cellClass]: !!this.cellClass,
+            }, style: this.customStyle, role: "cell" }, h("slot", { key: '74cfc0323e58ef2a3cc4f1e18160126106ffcb3d' })));
+    }
+};
+XTableCell.style = xTableCellCss();
+
+export { XTableCell as x_table_cell };