@xlabs-store/core 0.0.1

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

@@ -0,0 +1,1373 @@
+import { r as registerInstance, a as getElement, h, H as Host, c as createEvent } from './index-ig_mFsVk.js';
+
+const xCardCss = () => `@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-card-font-family, var(--x-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif));-webkit-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0;color:var(--x-card-color, var(--x-color-text, rgba(0, 0, 0, 0.88)));font-size:var(--x-card-font-size, var(--x-font-size-base, 14px));font-variant:tabular-nums;line-height:var(--x-card-line-height, var(--x-line-height-base, 1.5714));list-style:none;-webkit-font-feature-settings:"tnum";font-feature-settings:"tnum";position:relative;background:var(--x-card-bg, var(--x-color-bg-container, #ffffff));border-radius:var(--x-card-border-radius, var(--x-border-radius-lg, 8px));-webkit-transition:all var(--x-card-motion-duration, var(--x-motion-duration-mid, 0.2s));transition:all var(--x-card-motion-duration, var(--x-motion-duration-mid, 0.2s))}:host(.x-card-bordered){border:var(--x-card-border-width, var(--x-border-width-base, 1px)) solid var(--x-card-border-color, var(--x-color-border-secondary, #f0f0f0))}:host(.x-card-hoverable):hover{-webkit-box-shadow:var(--x-card-shadow-hover, var(--x-shadow-secondary, 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08)));box-shadow:var(--x-card-shadow-hover, var(--x-shadow-secondary, 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08)));border-color:transparent}:host(.x-card-hoverable){cursor:pointer}.x-card-cover{margin-top:-1px;margin-inline:-1px}.x-card-cover img{display:block;width:100%;border-radius:var(--x-card-border-radius, var(--x-border-radius-lg, 8px)) var(--x-card-border-radius, var(--x-border-radius-lg, 8px)) 0 0}.x-card-head{min-height:var(--x-card-head-min-height, 48px);margin-bottom:-1px;padding:0 var(--x-card-head-padding, var(--x-spacing-xl, 24px));color:var(--x-card-color, var(--x-color-text, rgba(0, 0, 0, 0.88)));font-weight:var(--x-card-head-font-weight, var(--x-font-weight-semibold, 600));font-size:var(--x-card-font-size-lg, var(--x-font-size-lg, 16px));background:var(--x-card-head-bg, transparent);border-bottom:var(--x-card-border-width, var(--x-border-width-base, 1px)) solid var(--x-card-head-border-color, var(--x-color-border-secondary, #f0f0f0));border-radius:var(--x-card-border-radius, var(--x-border-radius-lg, 8px)) var(--x-card-border-radius, var(--x-border-radius-lg, 8px)) 0 0}.x-card-head::before{display:table;content:""}.x-card-head::after{display:table;clear:both;content:""}.x-card-head-wrapper{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.x-card-head-title{display:inline-block;-ms-flex:1;flex:1;padding:var(--x-card-title-padding, var(--x-spacing-md, 16px)) 0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.x-card-extra{margin-left:auto;padding:var(--x-card-title-padding, var(--x-spacing-md, 16px)) 0;color:var(--x-card-color, var(--x-color-text, rgba(0, 0, 0, 0.88)));font-weight:normal;font-size:var(--x-card-font-size, var(--x-font-size-base, 14px))}.x-card-extra a,.x-card-extra ::slotted(a){color:var(--x-card-link-color, var(--x-color-primary, #1677ff));text-decoration:none}.x-card-extra a:hover,.x-card-extra ::slotted(a):hover{color:var(--x-card-link-color-hover, var(--x-color-primary-hover, #4096ff))}.x-card-body{padding:var(--x-card-body-padding, var(--x-spacing-xl, 24px))}.x-card-body::before{display:table;content:""}.x-card-body::after{display:table;clear:both;content:""}.x-card-actions{display:-ms-flexbox;display:flex;margin:0;padding:0;list-style:none;background:var(--x-card-actions-bg, transparent);border-top:var(--x-card-border-width, var(--x-border-width-base, 1px)) solid var(--x-card-border-color, var(--x-color-border-secondary, #f0f0f0));border-radius:0 0 var(--x-card-border-radius, var(--x-border-radius-lg, 8px)) var(--x-card-border-radius, var(--x-border-radius-lg, 8px))}.x-card-actions>::slotted(*){-ms-flex:1;flex:1;text-align:center;margin:var(--x-card-spacing-sm, var(--x-spacing-sm, 12px)) 0;color:var(--x-card-color, var(--x-color-text, rgba(0, 0, 0, 0.88)))}.x-card-actions>::slotted(*):not(:last-child){-webkit-border-end:var(--x-card-border-width, var(--x-border-width-base, 1px)) solid var(--x-card-border-color, var(--x-color-border-secondary, #f0f0f0));border-inline-end:var(--x-card-border-width, var(--x-border-width-base, 1px)) solid var(--x-card-border-color, var(--x-color-border-secondary, #f0f0f0))}:host(.x-card-small) .x-card-head{min-height:var(--x-card-head-min-height-sm, 36px);padding:0 var(--x-card-head-padding-sm, var(--x-spacing-sm, 8px));font-size:var(--x-card-font-size, var(--x-font-size-base, 14px))}:host(.x-card-small) .x-card-head-title{padding:var(--x-card-title-padding-sm, var(--x-spacing-xs, 8px)) 0}:host(.x-card-small) .x-card-extra{padding:var(--x-card-title-padding-sm, var(--x-spacing-xs, 8px)) 0}:host(.x-card-small) .x-card-body{padding:var(--x-card-body-padding-sm, var(--x-spacing-sm, 8px))}:host(.x-card-type-inner){background:var(--x-card-inner-bg, var(--x-color-fill-alter, rgba(0, 0, 0, 0.02)))}:host(.x-card-type-inner) .x-card-head{background:var(--x-card-inner-head-bg, var(--x-color-fill-secondary, rgba(0, 0, 0, 0.06)));border-bottom-color:var(--x-card-border-color, var(--x-color-border-secondary, #f0f0f0))}.x-card-loading-content{overflow:hidden}.x-card-loading-block{height:var(--x-card-font-size, var(--x-font-size-base, 14px));margin:var(--x-card-spacing-xxs, var(--x-spacing-xxs, 4px)) 0;background:-webkit-gradient(linear, left top, right top, from(var(--x-card-loading-bg, var(--x-color-fill-secondary, rgba(0, 0, 0, 0.06)))), color-stop(var(--x-card-loading-bg-secondary, var(--x-color-fill, rgba(0, 0, 0, 0.15)))), to(var(--x-card-loading-bg, var(--x-color-fill-secondary, rgba(0, 0, 0, 0.06)))));background:linear-gradient(90deg, var(--x-card-loading-bg, var(--x-color-fill-secondary, rgba(0, 0, 0, 0.06))), var(--x-card-loading-bg-secondary, var(--x-color-fill, rgba(0, 0, 0, 0.15))), var(--x-card-loading-bg, var(--x-color-fill-secondary, rgba(0, 0, 0, 0.06))));background-size:600% 600%;border-radius:var(--x-card-border-radius-xs, var(--x-border-radius-xs, 2px));-webkit-animation:card-loading 1.4s ease infinite;animation:card-loading 1.4s ease infinite}@-webkit-keyframes card-loading{0%,100%{background-position:0 50%}50%{background-position:100% 50%}}@keyframes card-loading{0%,100%{background-position:0 50%}50%{background-position:100% 50%}}`;
+
+const XCard = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    get el() { return getElement(this); }
+    /**
+     * Card title (can also use slot="title").
+     * @example
+     * <x-card cardTitle="Title"></x-card>
+     */
+    cardTitle;
+    /**
+     * Content to show in the top-right corner of the card (can also use slot="extra").
+     * @example
+     * <x-card extra="More"></x-card>
+     */
+    extra;
+    /**
+     * Toggles rendering of the border around the card.
+     * @example
+     * <x-card bordered={false}></x-card>
+     */
+    bordered = true;
+    /**
+     * Lift up when hovering card.
+     * @example
+     * <x-card hoverable></x-card>
+     */
+    hoverable = false;
+    /**
+     * Shows a loading indicator while the contents of the card are being fetched.
+     * @example
+     * <x-card loading></x-card>
+     */
+    loading = false;
+    /**
+     * Size of card.
+     * @example
+     * <x-card size="small"></x-card>
+     */
+    size = 'default';
+    /**
+     * The type of card (inner for nested cards).
+     * @example
+     * <x-card type="inner"></x-card>
+     */
+    type = 'default';
+    /**
+     * Card cover image URL (can also use slot="cover").
+     * @example
+     * <x-card cover="/cover.png"></x-card>
+     */
+    cover;
+    /**
+     * Track if title slot has content.
+     */
+    hasTitleSlot = false;
+    /**
+     * Track if extra slot has content.
+     */
+    hasExtraSlot = false;
+    /**
+     * Track if cover slot has content.
+     */
+    hasCoverSlot = false;
+    /**
+     * Track if actions slot has content.
+     */
+    hasActionsSlot = false;
+    /**
+     * Inspect slots before initial render.
+     * @returns void
+     * @example
+     * <x-card></x-card>
+     */
+    componentWillLoad() {
+        this.checkSlots();
+    }
+    /**
+     * Detect presence of named slots.
+     *
+     * Flow:
+     * 1. Queries the shadow root (via `el`) for elements with specific `slot` attributes.
+     * 2. Updates boolean state flags (`hasTitleSlot`, `hasExtraSlot`, etc.).
+     *    - These flags control conditional rendering of card sections.
+     *
+     * @returns void
+     * @example
+     * <x-card><div slot="title">Title</div></x-card>
+     */
+    checkSlots() {
+        this.hasTitleSlot = !!this.el.querySelector('[slot="title"]');
+        this.hasExtraSlot = !!this.el.querySelector('[slot="extra"]');
+        this.hasCoverSlot = !!this.el.querySelector('[slot="cover"]');
+        this.hasActionsSlot = !!this.el.querySelector('[slot="actions"]');
+    }
+    /**
+     * Determine whether card header should render.
+     * @returns boolean
+     * @example
+     * <x-card cardTitle="Title"></x-card>
+     */
+    hasHead() {
+        return !!(this.cardTitle || this.extra || this.hasTitleSlot || this.hasExtraSlot);
+    }
+    /**
+     * Render card header if content exists.
+     *
+     * Flow:
+     * 1. Checks `hasHead()` (title or extra content present).
+     * 2. If present, renders `.x-card-head` container.
+     * 3. Renders title section with prop `cardTitle` and `title` slot.
+     * 4. Renders extra section with prop `extra` and `extra` slot.
+     *
+     * @returns JSX.Element | null
+     * @example
+     * <x-card cardTitle="Title"></x-card>
+     */
+    renderHead() {
+        if (!this.hasHead()) {
+            return null;
+        }
+        return (h("div", { class: "x-card-head" }, h("div", { class: "x-card-head-wrapper" }, h("div", { class: "x-card-head-title" }, this.cardTitle, h("slot", { name: "title" })), h("div", { class: "x-card-extra" }, this.extra, h("slot", { name: "extra" })))));
+    }
+    /**
+     * Render cover section if cover image or slot exists.
+     * @returns JSX.Element | null
+     * @example
+     * <x-card cover="/cover.png"></x-card>
+     */
+    renderCover() {
+        if (!this.cover && !this.hasCoverSlot) {
+            return null;
+        }
+        return (h("div", { class: "x-card-cover" }, this.cover && h("img", { src: this.cover, alt: "" }), h("slot", { name: "cover" })));
+    }
+    /**
+     * Render body content or loading skeleton.
+     * @returns JSX.Element
+     * @example
+     * <x-card loading></x-card>
+     */
+    renderBody() {
+        // Show skeleton when loading is true.
+        if (this.loading) {
+            return (h("div", { class: "x-card-body" }, h("div", { class: "x-card-loading-content" }, h("div", { class: "x-card-loading-block", style: { width: '94%' } }), h("div", { class: "x-card-loading-block", style: { width: '28%' } }), h("div", { class: "x-card-loading-block", style: { width: '62%' } }), h("div", { class: "x-card-loading-block", style: { width: '22%' } }), h("div", { class: "x-card-loading-block", style: { width: '55%' } }))));
+        }
+        return (h("div", { class: "x-card-body" }, h("slot", null)));
+    }
+    /**
+     * Render actions section if slot is provided.
+     * @returns JSX.Element | null
+     * @example
+     * <x-card><div slot="actions">Action</div></x-card>
+     */
+    renderActions() {
+        if (!this.hasActionsSlot) {
+            return null;
+        }
+        return (h("ul", { class: "x-card-actions" }, h("slot", { name: "actions" })));
+    }
+    /**
+     * Render card structure and optional sections.
+     * @returns JSX.Element
+     * @example
+     * <x-card cardTitle="Title">Body</x-card>
+     */
+    render() {
+        return (h(Host, { key: '6a4be274dd57cf6880f87a95d11203895dd936a8', class: {
+                'x-card': true,
+                'x-card-bordered': this.bordered,
+                'x-card-hoverable': this.hoverable,
+                'x-card-small': this.size === 'small',
+                'x-card-loading': this.loading,
+                'x-card-type-inner': this.type === 'inner',
+                'x-card-contain-grid': false, // TODO: detect grid children
+            } }, this.renderCover(), this.renderHead(), this.renderBody(), this.renderActions()));
+    }
+};
+XCard.style = xCardCss();
+
+const xColCss = () => `@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-col-display, block);max-width:100%;-ms-flex:var(--x-col-flex, 0 0 auto);flex:var(--x-col-flex, 0 0 auto);-ms-flex-order:var(--x-col-order, 0);order:var(--x-col-order, 0)}:host(.x-col-0){display:block;-ms-flex:0 0 0%;flex:0 0 0%;max-width:0%}:host(.x-col-offset-0){margin-left:0%}:host(.x-col-push-0){left:0%;position:relative}:host(.x-col-pull-0){right:0%;position:relative}:host(.x-col-order-0){-ms-flex-order:0;order:0}:host(.x-col-1){display:block;-ms-flex:0 0 4.1666666667%;flex:0 0 4.1666666667%;max-width:4.1666666667%}:host(.x-col-offset-1){margin-left:4.1666666667%}:host(.x-col-push-1){left:4.1666666667%;position:relative}:host(.x-col-pull-1){right:4.1666666667%;position:relative}:host(.x-col-order-1){-ms-flex-order:1;order:1}:host(.x-col-2){display:block;-ms-flex:0 0 8.3333333333%;flex:0 0 8.3333333333%;max-width:8.3333333333%}:host(.x-col-offset-2){margin-left:8.3333333333%}:host(.x-col-push-2){left:8.3333333333%;position:relative}:host(.x-col-pull-2){right:8.3333333333%;position:relative}:host(.x-col-order-2){-ms-flex-order:2;order:2}:host(.x-col-3){display:block;-ms-flex:0 0 12.5%;flex:0 0 12.5%;max-width:12.5%}:host(.x-col-offset-3){margin-left:12.5%}:host(.x-col-push-3){left:12.5%;position:relative}:host(.x-col-pull-3){right:12.5%;position:relative}:host(.x-col-order-3){-ms-flex-order:3;order:3}:host(.x-col-4){display:block;-ms-flex:0 0 16.6666666667%;flex:0 0 16.6666666667%;max-width:16.6666666667%}:host(.x-col-offset-4){margin-left:16.6666666667%}:host(.x-col-push-4){left:16.6666666667%;position:relative}:host(.x-col-pull-4){right:16.6666666667%;position:relative}:host(.x-col-order-4){-ms-flex-order:4;order:4}:host(.x-col-5){display:block;-ms-flex:0 0 20.8333333333%;flex:0 0 20.8333333333%;max-width:20.8333333333%}:host(.x-col-offset-5){margin-left:20.8333333333%}:host(.x-col-push-5){left:20.8333333333%;position:relative}:host(.x-col-pull-5){right:20.8333333333%;position:relative}:host(.x-col-order-5){-ms-flex-order:5;order:5}:host(.x-col-6){display:block;-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}:host(.x-col-offset-6){margin-left:25%}:host(.x-col-push-6){left:25%;position:relative}:host(.x-col-pull-6){right:25%;position:relative}:host(.x-col-order-6){-ms-flex-order:6;order:6}:host(.x-col-7){display:block;-ms-flex:0 0 29.1666666667%;flex:0 0 29.1666666667%;max-width:29.1666666667%}:host(.x-col-offset-7){margin-left:29.1666666667%}:host(.x-col-push-7){left:29.1666666667%;position:relative}:host(.x-col-pull-7){right:29.1666666667%;position:relative}:host(.x-col-order-7){-ms-flex-order:7;order:7}:host(.x-col-8){display:block;-ms-flex:0 0 33.3333333333%;flex:0 0 33.3333333333%;max-width:33.3333333333%}:host(.x-col-offset-8){margin-left:33.3333333333%}:host(.x-col-push-8){left:33.3333333333%;position:relative}:host(.x-col-pull-8){right:33.3333333333%;position:relative}:host(.x-col-order-8){-ms-flex-order:8;order:8}:host(.x-col-9){display:block;-ms-flex:0 0 37.5%;flex:0 0 37.5%;max-width:37.5%}:host(.x-col-offset-9){margin-left:37.5%}:host(.x-col-push-9){left:37.5%;position:relative}:host(.x-col-pull-9){right:37.5%;position:relative}:host(.x-col-order-9){-ms-flex-order:9;order:9}:host(.x-col-10){display:block;-ms-flex:0 0 41.6666666667%;flex:0 0 41.6666666667%;max-width:41.6666666667%}:host(.x-col-offset-10){margin-left:41.6666666667%}:host(.x-col-push-10){left:41.6666666667%;position:relative}:host(.x-col-pull-10){right:41.6666666667%;position:relative}:host(.x-col-order-10){-ms-flex-order:10;order:10}:host(.x-col-11){display:block;-ms-flex:0 0 45.8333333333%;flex:0 0 45.8333333333%;max-width:45.8333333333%}:host(.x-col-offset-11){margin-left:45.8333333333%}:host(.x-col-push-11){left:45.8333333333%;position:relative}:host(.x-col-pull-11){right:45.8333333333%;position:relative}:host(.x-col-order-11){-ms-flex-order:11;order:11}:host(.x-col-12){display:block;-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}:host(.x-col-offset-12){margin-left:50%}:host(.x-col-push-12){left:50%;position:relative}:host(.x-col-pull-12){right:50%;position:relative}:host(.x-col-order-12){-ms-flex-order:12;order:12}:host(.x-col-13){display:block;-ms-flex:0 0 54.1666666667%;flex:0 0 54.1666666667%;max-width:54.1666666667%}:host(.x-col-offset-13){margin-left:54.1666666667%}:host(.x-col-push-13){left:54.1666666667%;position:relative}:host(.x-col-pull-13){right:54.1666666667%;position:relative}:host(.x-col-order-13){-ms-flex-order:13;order:13}:host(.x-col-14){display:block;-ms-flex:0 0 58.3333333333%;flex:0 0 58.3333333333%;max-width:58.3333333333%}:host(.x-col-offset-14){margin-left:58.3333333333%}:host(.x-col-push-14){left:58.3333333333%;position:relative}:host(.x-col-pull-14){right:58.3333333333%;position:relative}:host(.x-col-order-14){-ms-flex-order:14;order:14}:host(.x-col-15){display:block;-ms-flex:0 0 62.5%;flex:0 0 62.5%;max-width:62.5%}:host(.x-col-offset-15){margin-left:62.5%}:host(.x-col-push-15){left:62.5%;position:relative}:host(.x-col-pull-15){right:62.5%;position:relative}:host(.x-col-order-15){-ms-flex-order:15;order:15}:host(.x-col-16){display:block;-ms-flex:0 0 66.6666666667%;flex:0 0 66.6666666667%;max-width:66.6666666667%}:host(.x-col-offset-16){margin-left:66.6666666667%}:host(.x-col-push-16){left:66.6666666667%;position:relative}:host(.x-col-pull-16){right:66.6666666667%;position:relative}:host(.x-col-order-16){-ms-flex-order:16;order:16}:host(.x-col-17){display:block;-ms-flex:0 0 70.8333333333%;flex:0 0 70.8333333333%;max-width:70.8333333333%}:host(.x-col-offset-17){margin-left:70.8333333333%}:host(.x-col-push-17){left:70.8333333333%;position:relative}:host(.x-col-pull-17){right:70.8333333333%;position:relative}:host(.x-col-order-17){-ms-flex-order:17;order:17}:host(.x-col-18){display:block;-ms-flex:0 0 75%;flex:0 0 75%;max-width:75%}:host(.x-col-offset-18){margin-left:75%}:host(.x-col-push-18){left:75%;position:relative}:host(.x-col-pull-18){right:75%;position:relative}:host(.x-col-order-18){-ms-flex-order:18;order:18}:host(.x-col-19){display:block;-ms-flex:0 0 79.1666666667%;flex:0 0 79.1666666667%;max-width:79.1666666667%}:host(.x-col-offset-19){margin-left:79.1666666667%}:host(.x-col-push-19){left:79.1666666667%;position:relative}:host(.x-col-pull-19){right:79.1666666667%;position:relative}:host(.x-col-order-19){-ms-flex-order:19;order:19}:host(.x-col-20){display:block;-ms-flex:0 0 83.3333333333%;flex:0 0 83.3333333333%;max-width:83.3333333333%}:host(.x-col-offset-20){margin-left:83.3333333333%}:host(.x-col-push-20){left:83.3333333333%;position:relative}:host(.x-col-pull-20){right:83.3333333333%;position:relative}:host(.x-col-order-20){-ms-flex-order:20;order:20}:host(.x-col-21){display:block;-ms-flex:0 0 87.5%;flex:0 0 87.5%;max-width:87.5%}:host(.x-col-offset-21){margin-left:87.5%}:host(.x-col-push-21){left:87.5%;position:relative}:host(.x-col-pull-21){right:87.5%;position:relative}:host(.x-col-order-21){-ms-flex-order:21;order:21}:host(.x-col-22){display:block;-ms-flex:0 0 91.6666666667%;flex:0 0 91.6666666667%;max-width:91.6666666667%}:host(.x-col-offset-22){margin-left:91.6666666667%}:host(.x-col-push-22){left:91.6666666667%;position:relative}:host(.x-col-pull-22){right:91.6666666667%;position:relative}:host(.x-col-order-22){-ms-flex-order:22;order:22}:host(.x-col-23){display:block;-ms-flex:0 0 95.8333333333%;flex:0 0 95.8333333333%;max-width:95.8333333333%}:host(.x-col-offset-23){margin-left:95.8333333333%}:host(.x-col-push-23){left:95.8333333333%;position:relative}:host(.x-col-pull-23){right:95.8333333333%;position:relative}:host(.x-col-order-23){-ms-flex-order:23;order:23}:host(.x-col-24){display:block;-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}:host(.x-col-offset-24){margin-left:100%}:host(.x-col-push-24){left:100%;position:relative}:host(.x-col-pull-24){right:100%;position:relative}:host(.x-col-order-24){-ms-flex-order:24;order:24}:host(.x-col-0){display:none}@media (min-width: 0){:host(.x-col-xs-0){display:block;-ms-flex:0 0 0%;flex:0 0 0%;max-width:0%}:host(.x-col-xs-1){display:block;-ms-flex:0 0 4.1666666667%;flex:0 0 4.1666666667%;max-width:4.1666666667%}:host(.x-col-xs-2){display:block;-ms-flex:0 0 8.3333333333%;flex:0 0 8.3333333333%;max-width:8.3333333333%}:host(.x-col-xs-3){display:block;-ms-flex:0 0 12.5%;flex:0 0 12.5%;max-width:12.5%}:host(.x-col-xs-4){display:block;-ms-flex:0 0 16.6666666667%;flex:0 0 16.6666666667%;max-width:16.6666666667%}:host(.x-col-xs-5){display:block;-ms-flex:0 0 20.8333333333%;flex:0 0 20.8333333333%;max-width:20.8333333333%}:host(.x-col-xs-6){display:block;-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}:host(.x-col-xs-7){display:block;-ms-flex:0 0 29.1666666667%;flex:0 0 29.1666666667%;max-width:29.1666666667%}:host(.x-col-xs-8){display:block;-ms-flex:0 0 33.3333333333%;flex:0 0 33.3333333333%;max-width:33.3333333333%}:host(.x-col-xs-9){display:block;-ms-flex:0 0 37.5%;flex:0 0 37.5%;max-width:37.5%}:host(.x-col-xs-10){display:block;-ms-flex:0 0 41.6666666667%;flex:0 0 41.6666666667%;max-width:41.6666666667%}:host(.x-col-xs-11){display:block;-ms-flex:0 0 45.8333333333%;flex:0 0 45.8333333333%;max-width:45.8333333333%}:host(.x-col-xs-12){display:block;-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}:host(.x-col-xs-13){display:block;-ms-flex:0 0 54.1666666667%;flex:0 0 54.1666666667%;max-width:54.1666666667%}:host(.x-col-xs-14){display:block;-ms-flex:0 0 58.3333333333%;flex:0 0 58.3333333333%;max-width:58.3333333333%}:host(.x-col-xs-15){display:block;-ms-flex:0 0 62.5%;flex:0 0 62.5%;max-width:62.5%}:host(.x-col-xs-16){display:block;-ms-flex:0 0 66.6666666667%;flex:0 0 66.6666666667%;max-width:66.6666666667%}:host(.x-col-xs-17){display:block;-ms-flex:0 0 70.8333333333%;flex:0 0 70.8333333333%;max-width:70.8333333333%}:host(.x-col-xs-18){display:block;-ms-flex:0 0 75%;flex:0 0 75%;max-width:75%}:host(.x-col-xs-19){display:block;-ms-flex:0 0 79.1666666667%;flex:0 0 79.1666666667%;max-width:79.1666666667%}:host(.x-col-xs-20){display:block;-ms-flex:0 0 83.3333333333%;flex:0 0 83.3333333333%;max-width:83.3333333333%}:host(.x-col-xs-21){display:block;-ms-flex:0 0 87.5%;flex:0 0 87.5%;max-width:87.5%}:host(.x-col-xs-22){display:block;-ms-flex:0 0 91.6666666667%;flex:0 0 91.6666666667%;max-width:91.6666666667%}:host(.x-col-xs-23){display:block;-ms-flex:0 0 95.8333333333%;flex:0 0 95.8333333333%;max-width:95.8333333333%}:host(.x-col-xs-24){display:block;-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}}@media (min-width: 576px){:host(.x-col-sm-0){display:block;-ms-flex:0 0 0%;flex:0 0 0%;max-width:0%}:host(.x-col-sm-1){display:block;-ms-flex:0 0 4.1666666667%;flex:0 0 4.1666666667%;max-width:4.1666666667%}:host(.x-col-sm-2){display:block;-ms-flex:0 0 8.3333333333%;flex:0 0 8.3333333333%;max-width:8.3333333333%}:host(.x-col-sm-3){display:block;-ms-flex:0 0 12.5%;flex:0 0 12.5%;max-width:12.5%}:host(.x-col-sm-4){display:block;-ms-flex:0 0 16.6666666667%;flex:0 0 16.6666666667%;max-width:16.6666666667%}:host(.x-col-sm-5){display:block;-ms-flex:0 0 20.8333333333%;flex:0 0 20.8333333333%;max-width:20.8333333333%}:host(.x-col-sm-6){display:block;-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}:host(.x-col-sm-7){display:block;-ms-flex:0 0 29.1666666667%;flex:0 0 29.1666666667%;max-width:29.1666666667%}:host(.x-col-sm-8){display:block;-ms-flex:0 0 33.3333333333%;flex:0 0 33.3333333333%;max-width:33.3333333333%}:host(.x-col-sm-9){display:block;-ms-flex:0 0 37.5%;flex:0 0 37.5%;max-width:37.5%}:host(.x-col-sm-10){display:block;-ms-flex:0 0 41.6666666667%;flex:0 0 41.6666666667%;max-width:41.6666666667%}:host(.x-col-sm-11){display:block;-ms-flex:0 0 45.8333333333%;flex:0 0 45.8333333333%;max-width:45.8333333333%}:host(.x-col-sm-12){display:block;-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}:host(.x-col-sm-13){display:block;-ms-flex:0 0 54.1666666667%;flex:0 0 54.1666666667%;max-width:54.1666666667%}:host(.x-col-sm-14){display:block;-ms-flex:0 0 58.3333333333%;flex:0 0 58.3333333333%;max-width:58.3333333333%}:host(.x-col-sm-15){display:block;-ms-flex:0 0 62.5%;flex:0 0 62.5%;max-width:62.5%}:host(.x-col-sm-16){display:block;-ms-flex:0 0 66.6666666667%;flex:0 0 66.6666666667%;max-width:66.6666666667%}:host(.x-col-sm-17){display:block;-ms-flex:0 0 70.8333333333%;flex:0 0 70.8333333333%;max-width:70.8333333333%}:host(.x-col-sm-18){display:block;-ms-flex:0 0 75%;flex:0 0 75%;max-width:75%}:host(.x-col-sm-19){display:block;-ms-flex:0 0 79.1666666667%;flex:0 0 79.1666666667%;max-width:79.1666666667%}:host(.x-col-sm-20){display:block;-ms-flex:0 0 83.3333333333%;flex:0 0 83.3333333333%;max-width:83.3333333333%}:host(.x-col-sm-21){display:block;-ms-flex:0 0 87.5%;flex:0 0 87.5%;max-width:87.5%}:host(.x-col-sm-22){display:block;-ms-flex:0 0 91.6666666667%;flex:0 0 91.6666666667%;max-width:91.6666666667%}:host(.x-col-sm-23){display:block;-ms-flex:0 0 95.8333333333%;flex:0 0 95.8333333333%;max-width:95.8333333333%}:host(.x-col-sm-24){display:block;-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}}@media (min-width: 768px){:host(.x-col-md-0){display:block;-ms-flex:0 0 0%;flex:0 0 0%;max-width:0%}:host(.x-col-md-1){display:block;-ms-flex:0 0 4.1666666667%;flex:0 0 4.1666666667%;max-width:4.1666666667%}:host(.x-col-md-2){display:block;-ms-flex:0 0 8.3333333333%;flex:0 0 8.3333333333%;max-width:8.3333333333%}:host(.x-col-md-3){display:block;-ms-flex:0 0 12.5%;flex:0 0 12.5%;max-width:12.5%}:host(.x-col-md-4){display:block;-ms-flex:0 0 16.6666666667%;flex:0 0 16.6666666667%;max-width:16.6666666667%}:host(.x-col-md-5){display:block;-ms-flex:0 0 20.8333333333%;flex:0 0 20.8333333333%;max-width:20.8333333333%}:host(.x-col-md-6){display:block;-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}:host(.x-col-md-7){display:block;-ms-flex:0 0 29.1666666667%;flex:0 0 29.1666666667%;max-width:29.1666666667%}:host(.x-col-md-8){display:block;-ms-flex:0 0 33.3333333333%;flex:0 0 33.3333333333%;max-width:33.3333333333%}:host(.x-col-md-9){display:block;-ms-flex:0 0 37.5%;flex:0 0 37.5%;max-width:37.5%}:host(.x-col-md-10){display:block;-ms-flex:0 0 41.6666666667%;flex:0 0 41.6666666667%;max-width:41.6666666667%}:host(.x-col-md-11){display:block;-ms-flex:0 0 45.8333333333%;flex:0 0 45.8333333333%;max-width:45.8333333333%}:host(.x-col-md-12){display:block;-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}:host(.x-col-md-13){display:block;-ms-flex:0 0 54.1666666667%;flex:0 0 54.1666666667%;max-width:54.1666666667%}:host(.x-col-md-14){display:block;-ms-flex:0 0 58.3333333333%;flex:0 0 58.3333333333%;max-width:58.3333333333%}:host(.x-col-md-15){display:block;-ms-flex:0 0 62.5%;flex:0 0 62.5%;max-width:62.5%}:host(.x-col-md-16){display:block;-ms-flex:0 0 66.6666666667%;flex:0 0 66.6666666667%;max-width:66.6666666667%}:host(.x-col-md-17){display:block;-ms-flex:0 0 70.8333333333%;flex:0 0 70.8333333333%;max-width:70.8333333333%}:host(.x-col-md-18){display:block;-ms-flex:0 0 75%;flex:0 0 75%;max-width:75%}:host(.x-col-md-19){display:block;-ms-flex:0 0 79.1666666667%;flex:0 0 79.1666666667%;max-width:79.1666666667%}:host(.x-col-md-20){display:block;-ms-flex:0 0 83.3333333333%;flex:0 0 83.3333333333%;max-width:83.3333333333%}:host(.x-col-md-21){display:block;-ms-flex:0 0 87.5%;flex:0 0 87.5%;max-width:87.5%}:host(.x-col-md-22){display:block;-ms-flex:0 0 91.6666666667%;flex:0 0 91.6666666667%;max-width:91.6666666667%}:host(.x-col-md-23){display:block;-ms-flex:0 0 95.8333333333%;flex:0 0 95.8333333333%;max-width:95.8333333333%}:host(.x-col-md-24){display:block;-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}}@media (min-width: 992px){:host(.x-col-lg-0){display:block;-ms-flex:0 0 0%;flex:0 0 0%;max-width:0%}:host(.x-col-lg-1){display:block;-ms-flex:0 0 4.1666666667%;flex:0 0 4.1666666667%;max-width:4.1666666667%}:host(.x-col-lg-2){display:block;-ms-flex:0 0 8.3333333333%;flex:0 0 8.3333333333%;max-width:8.3333333333%}:host(.x-col-lg-3){display:block;-ms-flex:0 0 12.5%;flex:0 0 12.5%;max-width:12.5%}:host(.x-col-lg-4){display:block;-ms-flex:0 0 16.6666666667%;flex:0 0 16.6666666667%;max-width:16.6666666667%}:host(.x-col-lg-5){display:block;-ms-flex:0 0 20.8333333333%;flex:0 0 20.8333333333%;max-width:20.8333333333%}:host(.x-col-lg-6){display:block;-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}:host(.x-col-lg-7){display:block;-ms-flex:0 0 29.1666666667%;flex:0 0 29.1666666667%;max-width:29.1666666667%}:host(.x-col-lg-8){display:block;-ms-flex:0 0 33.3333333333%;flex:0 0 33.3333333333%;max-width:33.3333333333%}:host(.x-col-lg-9){display:block;-ms-flex:0 0 37.5%;flex:0 0 37.5%;max-width:37.5%}:host(.x-col-lg-10){display:block;-ms-flex:0 0 41.6666666667%;flex:0 0 41.6666666667%;max-width:41.6666666667%}:host(.x-col-lg-11){display:block;-ms-flex:0 0 45.8333333333%;flex:0 0 45.8333333333%;max-width:45.8333333333%}:host(.x-col-lg-12){display:block;-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}:host(.x-col-lg-13){display:block;-ms-flex:0 0 54.1666666667%;flex:0 0 54.1666666667%;max-width:54.1666666667%}:host(.x-col-lg-14){display:block;-ms-flex:0 0 58.3333333333%;flex:0 0 58.3333333333%;max-width:58.3333333333%}:host(.x-col-lg-15){display:block;-ms-flex:0 0 62.5%;flex:0 0 62.5%;max-width:62.5%}:host(.x-col-lg-16){display:block;-ms-flex:0 0 66.6666666667%;flex:0 0 66.6666666667%;max-width:66.6666666667%}:host(.x-col-lg-17){display:block;-ms-flex:0 0 70.8333333333%;flex:0 0 70.8333333333%;max-width:70.8333333333%}:host(.x-col-lg-18){display:block;-ms-flex:0 0 75%;flex:0 0 75%;max-width:75%}:host(.x-col-lg-19){display:block;-ms-flex:0 0 79.1666666667%;flex:0 0 79.1666666667%;max-width:79.1666666667%}:host(.x-col-lg-20){display:block;-ms-flex:0 0 83.3333333333%;flex:0 0 83.3333333333%;max-width:83.3333333333%}:host(.x-col-lg-21){display:block;-ms-flex:0 0 87.5%;flex:0 0 87.5%;max-width:87.5%}:host(.x-col-lg-22){display:block;-ms-flex:0 0 91.6666666667%;flex:0 0 91.6666666667%;max-width:91.6666666667%}:host(.x-col-lg-23){display:block;-ms-flex:0 0 95.8333333333%;flex:0 0 95.8333333333%;max-width:95.8333333333%}:host(.x-col-lg-24){display:block;-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}}@media (min-width: 1200px){:host(.x-col-xl-0){display:block;-ms-flex:0 0 0%;flex:0 0 0%;max-width:0%}:host(.x-col-xl-1){display:block;-ms-flex:0 0 4.1666666667%;flex:0 0 4.1666666667%;max-width:4.1666666667%}:host(.x-col-xl-2){display:block;-ms-flex:0 0 8.3333333333%;flex:0 0 8.3333333333%;max-width:8.3333333333%}:host(.x-col-xl-3){display:block;-ms-flex:0 0 12.5%;flex:0 0 12.5%;max-width:12.5%}:host(.x-col-xl-4){display:block;-ms-flex:0 0 16.6666666667%;flex:0 0 16.6666666667%;max-width:16.6666666667%}:host(.x-col-xl-5){display:block;-ms-flex:0 0 20.8333333333%;flex:0 0 20.8333333333%;max-width:20.8333333333%}:host(.x-col-xl-6){display:block;-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}:host(.x-col-xl-7){display:block;-ms-flex:0 0 29.1666666667%;flex:0 0 29.1666666667%;max-width:29.1666666667%}:host(.x-col-xl-8){display:block;-ms-flex:0 0 33.3333333333%;flex:0 0 33.3333333333%;max-width:33.3333333333%}:host(.x-col-xl-9){display:block;-ms-flex:0 0 37.5%;flex:0 0 37.5%;max-width:37.5%}:host(.x-col-xl-10){display:block;-ms-flex:0 0 41.6666666667%;flex:0 0 41.6666666667%;max-width:41.6666666667%}:host(.x-col-xl-11){display:block;-ms-flex:0 0 45.8333333333%;flex:0 0 45.8333333333%;max-width:45.8333333333%}:host(.x-col-xl-12){display:block;-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}:host(.x-col-xl-13){display:block;-ms-flex:0 0 54.1666666667%;flex:0 0 54.1666666667%;max-width:54.1666666667%}:host(.x-col-xl-14){display:block;-ms-flex:0 0 58.3333333333%;flex:0 0 58.3333333333%;max-width:58.3333333333%}:host(.x-col-xl-15){display:block;-ms-flex:0 0 62.5%;flex:0 0 62.5%;max-width:62.5%}:host(.x-col-xl-16){display:block;-ms-flex:0 0 66.6666666667%;flex:0 0 66.6666666667%;max-width:66.6666666667%}:host(.x-col-xl-17){display:block;-ms-flex:0 0 70.8333333333%;flex:0 0 70.8333333333%;max-width:70.8333333333%}:host(.x-col-xl-18){display:block;-ms-flex:0 0 75%;flex:0 0 75%;max-width:75%}:host(.x-col-xl-19){display:block;-ms-flex:0 0 79.1666666667%;flex:0 0 79.1666666667%;max-width:79.1666666667%}:host(.x-col-xl-20){display:block;-ms-flex:0 0 83.3333333333%;flex:0 0 83.3333333333%;max-width:83.3333333333%}:host(.x-col-xl-21){display:block;-ms-flex:0 0 87.5%;flex:0 0 87.5%;max-width:87.5%}:host(.x-col-xl-22){display:block;-ms-flex:0 0 91.6666666667%;flex:0 0 91.6666666667%;max-width:91.6666666667%}:host(.x-col-xl-23){display:block;-ms-flex:0 0 95.8333333333%;flex:0 0 95.8333333333%;max-width:95.8333333333%}:host(.x-col-xl-24){display:block;-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}}@media (min-width: 1600px){:host(.x-col-xxl-0){display:block;-ms-flex:0 0 0%;flex:0 0 0%;max-width:0%}:host(.x-col-xxl-1){display:block;-ms-flex:0 0 4.1666666667%;flex:0 0 4.1666666667%;max-width:4.1666666667%}:host(.x-col-xxl-2){display:block;-ms-flex:0 0 8.3333333333%;flex:0 0 8.3333333333%;max-width:8.3333333333%}:host(.x-col-xxl-3){display:block;-ms-flex:0 0 12.5%;flex:0 0 12.5%;max-width:12.5%}:host(.x-col-xxl-4){display:block;-ms-flex:0 0 16.6666666667%;flex:0 0 16.6666666667%;max-width:16.6666666667%}:host(.x-col-xxl-5){display:block;-ms-flex:0 0 20.8333333333%;flex:0 0 20.8333333333%;max-width:20.8333333333%}:host(.x-col-xxl-6){display:block;-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}:host(.x-col-xxl-7){display:block;-ms-flex:0 0 29.1666666667%;flex:0 0 29.1666666667%;max-width:29.1666666667%}:host(.x-col-xxl-8){display:block;-ms-flex:0 0 33.3333333333%;flex:0 0 33.3333333333%;max-width:33.3333333333%}:host(.x-col-xxl-9){display:block;-ms-flex:0 0 37.5%;flex:0 0 37.5%;max-width:37.5%}:host(.x-col-xxl-10){display:block;-ms-flex:0 0 41.6666666667%;flex:0 0 41.6666666667%;max-width:41.6666666667%}:host(.x-col-xxl-11){display:block;-ms-flex:0 0 45.8333333333%;flex:0 0 45.8333333333%;max-width:45.8333333333%}:host(.x-col-xxl-12){display:block;-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}:host(.x-col-xxl-13){display:block;-ms-flex:0 0 54.1666666667%;flex:0 0 54.1666666667%;max-width:54.1666666667%}:host(.x-col-xxl-14){display:block;-ms-flex:0 0 58.3333333333%;flex:0 0 58.3333333333%;max-width:58.3333333333%}:host(.x-col-xxl-15){display:block;-ms-flex:0 0 62.5%;flex:0 0 62.5%;max-width:62.5%}:host(.x-col-xxl-16){display:block;-ms-flex:0 0 66.6666666667%;flex:0 0 66.6666666667%;max-width:66.6666666667%}:host(.x-col-xxl-17){display:block;-ms-flex:0 0 70.8333333333%;flex:0 0 70.8333333333%;max-width:70.8333333333%}:host(.x-col-xxl-18){display:block;-ms-flex:0 0 75%;flex:0 0 75%;max-width:75%}:host(.x-col-xxl-19){display:block;-ms-flex:0 0 79.1666666667%;flex:0 0 79.1666666667%;max-width:79.1666666667%}:host(.x-col-xxl-20){display:block;-ms-flex:0 0 83.3333333333%;flex:0 0 83.3333333333%;max-width:83.3333333333%}:host(.x-col-xxl-21){display:block;-ms-flex:0 0 87.5%;flex:0 0 87.5%;max-width:87.5%}:host(.x-col-xxl-22){display:block;-ms-flex:0 0 91.6666666667%;flex:0 0 91.6666666667%;max-width:91.6666666667%}:host(.x-col-xxl-23){display:block;-ms-flex:0 0 95.8333333333%;flex:0 0 95.8333333333%;max-width:95.8333333333%}:host(.x-col-xxl-24){display:block;-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}}`;
+
+const XCol = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    /**
+     * Raster number of cells to occupy, 0 corresponds to display: none
+     * @example
+     * <x-col span={12}></x-col>
+     */
+    span;
+    /**
+     * The number of cells to offset Col from the left
+     * @example
+     * <x-col span={8} offset={4}></x-col>
+     */
+    offset;
+    /**
+     * Raster order
+     * @example
+     * <x-col order={2}></x-col>
+     */
+    order;
+    /**
+     * The number of cells that raster is moved to the left
+     * @example
+     * <x-col pull={2}></x-col>
+     */
+    pull;
+    /**
+     * The number of cells that raster is moved to the right
+     * @example
+     * <x-col push={2}></x-col>
+     */
+    push;
+    /**
+     * Flex layout style
+     * @example
+     * <x-col flex="1 1 200px"></x-col>
+     */
+    flex;
+    /**
+     * screen < 576px
+     * @example
+     * <x-col xs={24}></x-col>
+     */
+    xs;
+    /**
+     * screen ≥ 576px
+     * @example
+     * <x-col sm={12}></x-col>
+     */
+    sm;
+    /**
+     * screen ≥ 768px
+     * @example
+     * <x-col md={8}></x-col>
+     */
+    md;
+    /**
+     * screen ≥ 992px
+     * @example
+     * <x-col lg={6}></x-col>
+     */
+    lg;
+    /**
+     * screen ≥ 1200px
+     * @example
+     * <x-col xl={6}></x-col>
+     */
+    xl;
+    /**
+     * screen ≥ 1600px
+     * @example
+     * <x-col xxl={4}></x-col>
+     */
+    xxl;
+    /**
+     * Renders the Column component.
+     *
+     * Flow:
+     * 1. Destructures all layout props.
+     * 2. Handles `flex` prop to set flex-basis and flex-grow/shrink.
+     * 3. Sets CSS variables for base layout properties (`span`, `offset`, `order`, `pull`, `push`).
+     * 4. Generates a class map for responsive breakpoints (`xs`, `sm`, `md`, `lg`, `xl`, `xxl`) and base layout classes.
+     * 5. These classes correspond to CSS rules that apply styles within specific media queries.
+     *
+     * @returns JSX.Element - The host element with calculated classes and styles.
+     */
+    render() {
+        const { span, offset, order, pull, push, flex, xs, sm, md, lg, xl, xxl } = this;
+        const style = {};
+        // Handle flex property
+        if (flex) {
+            style['--x-col-flex'] = typeof flex === 'number' ? `${flex} ${flex} auto` : flex;
+        }
+        // Base layout props - set variables
+        if (span !== undefined) {
+            style['--x-col-span'] = span;
+            style['--x-col-display'] = span === 0 ? 'none' : 'block';
+        }
+        if (offset)
+            style['--x-col-offset'] = offset;
+        if (order)
+            style['--x-col-order'] = order;
+        if (pull)
+            style['--x-col-pull'] = pull;
+        if (push)
+            style['--x-col-push'] = push;
+        // Responsive props - we will use classes to trigger media queries in CSS
+        // Note: This is a simplified implementation. 
+        // Ideally we would parse objects for xs={{ span: 4, offset: 2 }} etc.
+        // For now we assume number/string for span.
+        const classes = {
+            'x-col': true,
+            [`x-col-${span}`]: !!span,
+            [`x-col-offset-${offset}`]: !!offset,
+            [`x-col-order-${order}`]: !!order,
+            [`x-col-pull-${pull}`]: !!pull,
+            [`x-col-push-${push}`]: !!push,
+            [`x-col-xs-${xs}`]: !!xs,
+            [`x-col-sm-${sm}`]: !!sm,
+            [`x-col-md-${md}`]: !!md,
+            [`x-col-lg-${lg}`]: !!lg,
+            [`x-col-xl-${xl}`]: !!xl,
+            [`x-col-xxl-${xxl}`]: !!xxl,
+        };
+        return (h(Host, { key: 'c57cb3e4fe1339edc56b99ceb63db1a1c004b23d', class: classes, style: style }, h("slot", { key: '684f92fff73142aaee3461fb7830085db428306f' })));
+    }
+};
+XCol.style = xColCss();
+
+const xContentCss = () => `@charset "UTF-8";:root{--x-color-primary:#1677ff;--x-color-primary-rgb:22, 119, 255;--x-color-primary-contrast:#ffffff;--x-color-primary-contrast-rgb:255, 255, 255;--x-color-primary-shade:#0958d9;--x-color-primary-tint:#4096ff;--x-color-primary-bg:#e6f4ff;--x-color-primary-bg-hover:#bae0ff;--x-color-primary-border:#91caff;--x-color-primary-border-hover:#69b1ff;--x-color-primary-hover:#4096ff;--x-color-primary-active:#0958d9;--x-color-primary-text:#1677ff;--x-color-primary-text-hover:#4096ff;--x-color-primary-text-active:#0958d9;--x-color-secondary:#3dc2ff;--x-color-secondary-rgb:61, 194, 255;--x-color-secondary-contrast:#ffffff;--x-color-secondary-contrast-rgb:255, 255, 255;--x-color-secondary-shade:#36abe0;--x-color-secondary-tint:#50c8ff;--x-color-success:#52c41a;--x-color-success-rgb:82, 196, 26;--x-color-success-contrast:#ffffff;--x-color-success-contrast-rgb:255, 255, 255;--x-color-success-shade:#389e0d;--x-color-success-tint:#73d13d;--x-color-success-bg:#f6ffed;--x-color-success-bg-hover:#d9f7be;--x-color-success-border:#b7eb8f;--x-color-success-border-hover:#95de64;--x-color-success-hover:#73d13d;--x-color-success-active:#389e0d;--x-color-success-text:#52c41a;--x-color-success-text-hover:#73d13d;--x-color-success-text-active:#389e0d;--x-color-warning:#faad14;--x-color-warning-rgb:250, 173, 20;--x-color-warning-contrast:#000000;--x-color-warning-contrast-rgb:0, 0, 0;--x-color-warning-shade:#d48806;--x-color-warning-tint:#ffc53d;--x-color-warning-bg:#fffbe6;--x-color-warning-bg-hover:#fff1b8;--x-color-warning-border:#ffe58f;--x-color-warning-border-hover:#ffd666;--x-color-warning-hover:#ffc53d;--x-color-warning-active:#d48806;--x-color-warning-text:#faad14;--x-color-warning-text-hover:#ffc53d;--x-color-warning-text-active:#d48806;--x-color-danger:#ff4d4f;--x-color-danger-rgb:255, 77, 79;--x-color-danger-contrast:#ffffff;--x-color-danger-contrast-rgb:255, 255, 255;--x-color-danger-shade:#cf1322;--x-color-danger-tint:#ff7875;--x-color-error:#ff4d4f;--x-color-error-rgb:255, 77, 79;--x-color-error-bg:#fff2f0;--x-color-error-bg-hover:#ffccc7;--x-color-error-border:#ffa39e;--x-color-error-border-hover:#ff7875;--x-color-error-hover:#ff7875;--x-color-error-active:#d9363e;--x-color-error-text:#ff4d4f;--x-color-error-text-hover:#ff7875;--x-color-error-text-active:#d9363e;--x-color-info:#1677ff;--x-color-info-rgb:22, 119, 255;--x-color-info-bg:#e6f4ff;--x-color-info-bg-hover:#bae0ff;--x-color-info-border:#91caff;--x-color-info-border-hover:#69b1ff;--x-color-info-hover:#69b1ff;--x-color-info-active:#0958d9;--x-color-info-text:#1677ff;--x-color-info-text-hover:#69b1ff;--x-color-info-text-active:#0958d9;--x-color-text:rgba(0, 0, 0, 0.88);--x-color-text-secondary:rgba(0, 0, 0, 0.65);--x-color-text-tertiary:rgba(0, 0, 0, 0.45);--x-color-text-quaternary:rgba(0, 0, 0, 0.25);--x-color-text-disabled:rgba(0, 0, 0, 0.25);--x-color-text-placeholder:rgba(0, 0, 0, 0.25);--x-color-text-heading:rgba(0, 0, 0, 0.88);--x-color-text-label:rgba(0, 0, 0, 0.65);--x-color-text-description:rgba(0, 0, 0, 0.45);--x-color-text-light-solid:#ffffff;--x-color-bg-container:#ffffff;--x-color-bg-elevated:#ffffff;--x-color-bg-layout:#f5f5f5;--x-color-bg-spotlight:rgba(0, 0, 0, 0.85);--x-color-bg-mask:rgba(0, 0, 0, 0.45);--x-color-bg-base:#ffffff;--x-color-bg-container-disabled:#f5f5f5;--x-color-bg-container-loading:rgba(255, 255, 255, 0.65);--x-color-white:#ffffff;--x-color-fill:rgba(0, 0, 0, 0.15);--x-color-fill-secondary:rgba(0, 0, 0, 0.06);--x-color-fill-tertiary:rgba(0, 0, 0, 0.04);--x-color-fill-quaternary:rgba(0, 0, 0, 0.02);--x-color-border:#d9d9d9;--x-color-border-secondary:#f0f0f0;--x-color-border-bg:#ffffff;--x-color-split:rgba(5, 5, 5, 0.06);--x-color-dark:#222428;--x-color-dark-rgb:34, 36, 40;--x-color-dark-contrast:#ffffff;--x-color-dark-contrast-rgb:255, 255, 255;--x-color-dark-shade:#1e2023;--x-color-dark-tint:#383a3e;--x-color-medium:#92949c;--x-color-medium-rgb:146, 148, 156;--x-color-medium-contrast:#ffffff;--x-color-medium-contrast-rgb:255, 255, 255;--x-color-medium-shade:#808289;--x-color-medium-tint:#9d9fa6;--x-color-light:#f4f5f8;--x-color-light-rgb:244, 245, 248;--x-color-light-contrast:#000000;--x-color-light-contrast-rgb:0, 0, 0;--x-color-light-shade:#d7d8da;--x-color-light-tint:#f5f6f9;--x-font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--x-font-family-code:"SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;--x-font-size:14px;--x-font-size-sm:12px;--x-font-size-lg:16px;--x-font-size-xl:20px;--x-font-size-heading-1:38px;--x-font-size-heading-2:30px;--x-font-size-heading-3:24px;--x-font-size-heading-4:20px;--x-font-size-heading-5:16px;--x-line-height:1.5714285714285714;--x-line-height-lg:1.5;--x-line-height-sm:1.6666666666666667;--x-line-height-heading-1:1.2105263157894737;--x-line-height-heading-2:1.2666666666666666;--x-line-height-heading-3:1.3333333333333333;--x-line-height-heading-4:1.4;--x-line-height-heading-5:1.5;--x-font-weight-normal:400;--x-font-weight-medium:500;--x-font-weight-semibold:600;--x-font-weight-strong:600;--x-font-size-base:14px;--x-font-size-xxl:24px;--x-line-height-base:1.5714285714285714;--x-spacing-xxs:4px;--x-spacing-xs:8px;--x-spacing-sm:12px;--x-spacing-md:16px;--x-spacing-lg:20px;--x-spacing-xl:24px;--x-spacing-xxl:32px;--x-spacing-xxxl:48px;--x-margin-xxs:4px;--x-margin-xs:8px;--x-margin-sm:12px;--x-margin-md:16px;--x-margin-lg:24px;--x-margin-xl:32px;--x-margin-xxl:48px;--x-padding-xxs:4px;--x-padding-xs:8px;--x-padding-sm:12px;--x-padding-md:16px;--x-padding-lg:24px;--x-padding-content-horizontal-lg:24px;--x-padding-content-vertical-lg:12px;--x-padding-content-horizontal:16px;--x-padding-content-vertical:12px;--x-padding-content-horizontal-sm:16px;--x-padding-content-vertical-sm:8px;--x-border-radius:6px;--x-border-radius-xs:2px;--x-border-radius-sm:4px;--x-border-radius-lg:8px;--x-border-radius-xl:12px;--x-border-radius-outer:4px;--x-border-radius-base:6px;--x-border-width:1px;--x-border-width-base:1px;--x-shadow:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-shadow-secondary:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-shadow-tertiary:0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02);--x-shadow-lg:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-secondary:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-tertiary:0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02);--x-box-shadow-popover-arrow:2px 2px 5px rgba(0, 0, 0, 0.05);--x-box-shadow-card:0 1px 2px -2px rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.12), 0 5px 12px 4px rgba(0, 0, 0, 0.09);--x-box-shadow-drawer-right:-6px 0 16px 0 rgba(0, 0, 0, 0.08), -3px 0 6px -4px rgba(0, 0, 0, 0.12), -9px 0 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-drawer-left:6px 0 16px 0 rgba(0, 0, 0, 0.08), 3px 0 6px -4px rgba(0, 0, 0, 0.12), 9px 0 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-drawer-up:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-drawer-down:0 -6px 16px 0 rgba(0, 0, 0, 0.08), 0 -3px 6px -4px rgba(0, 0, 0, 0.12), 0 -9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-tabs-overflow-left:inset 10px 0 8px -8px rgba(0, 0, 0, 0.08);--x-box-shadow-tabs-overflow-right:inset -10px 0 8px -8px rgba(0, 0, 0, 0.08);--x-box-shadow-tabs-overflow-top:inset 0 10px 8px -8px rgba(0, 0, 0, 0.08);--x-box-shadow-tabs-overflow-bottom:inset 0 -10px 8px -8px rgba(0, 0, 0, 0.08);--x-motion-duration-fast:0.1s;--x-motion-duration-mid:0.2s;--x-motion-duration-slow:0.3s;--x-motion-ease-in-out:cubic-bezier(0.645, 0.045, 0.355, 1);--x-motion-ease-out:cubic-bezier(0.215, 0.61, 0.355, 1);--x-motion-ease-in:cubic-bezier(0.55, 0.055, 0.675, 0.19);--x-motion-ease-out-back:cubic-bezier(0.12, 0.4, 0.29, 1.46);--x-motion-ease-in-back:cubic-bezier(0.71, -0.46, 0.88, 0.6);--x-motion-ease-in-out-circle:cubic-bezier(0.78, 0.14, 0.15, 0.86);--x-motion-ease-out-circle:cubic-bezier(0.08, 0.82, 0.17, 1);--x-motion-ease-in-circle:cubic-bezier(0.6, 0.04, 0.98, 0.34);--x-motion-ease-in-quint:cubic-bezier(0.755, 0.05, 0.855, 0.06);--x-motion-ease-out-quint:cubic-bezier(0.23, 1, 0.32, 1);--x-z-index-base:0;--x-z-index-popup-base:1000;--x-z-index-popup:1030;--x-z-index-affix:10;--x-z-index-modal:1000;--x-z-index-modal-mask:1000;--x-z-index-drawer:1000;--x-z-index-popover:1030;--x-z-index-dropdown:1050;--x-z-index-tooltip:1070;--x-z-index-notification:1080;--x-z-index-message:1090;--x-z-index-popconfirm:1060;--x-z-index-table-fixed:10;--x-opacity-loading:0.65;--x-opacity-image:1;--x-opacity-disabled:0.5;--x-control-height:32px;--x-control-height-xs:24px;--x-control-height-sm:24px;--x-control-height-lg:40px;--x-control-radio-size:16px;--x-control-checkbox-size:16px;--x-control-padding-horizontal:12px;--x-control-padding-horizontal-sm:8px;--x-control-outline-width:2px;--x-control-outline:rgba(5, 145, 255, 0.1);--x-control-item-bg-hover:rgba(0, 0, 0, 0.04);--x-control-item-bg-active:#e6f4ff;--x-control-item-bg-active-hover:#bae0ff;--x-control-item-bg-active-disabled:rgba(0, 0, 0, 0.15);--x-control-tmp-outline:rgba(0, 0, 0, 0.02);--x-color-yellow:#fadb14;--x-color-yellow-rgb:250, 219, 20;--x-font-family-base:var(--x-font-family);--x-color-link:#1677ff;--x-color-link-hover:#69b1ff;--x-color-link-active:#0958d9;--x-color-icon:rgba(0, 0, 0, 0.45);--x-color-icon-hover:rgba(0, 0, 0, 0.88);--x-color-highlight:#ff4d4f;--x-color-bg-text-hover:rgba(0, 0, 0, 0.06);--x-color-bg-text-active:rgba(0, 0, 0, 0.15);--x-screen-xs:480px;--x-screen-xs-min:480px;--x-screen-xs-max:575px;--x-screen-sm:576px;--x-screen-sm-min:576px;--x-screen-sm-max:767px;--x-screen-md:768px;--x-screen-md-min:768px;--x-screen-md-max:991px;--x-screen-lg:992px;--x-screen-lg-min:992px;--x-screen-lg-max:1199px;--x-screen-xl:1200px;--x-screen-xl-min:1200px;--x-screen-xl-max:1599px;--x-screen-xxl:1600px;--x-screen-xxl-min:1600px;--x-color-fill-content:rgba(0, 0, 0, 0.06);--x-color-fill-content-hover:rgba(0, 0, 0, 0.15);--x-color-fill-alter:rgba(0, 0, 0, 0.02);--x-scrollbar-width:12px;--x-scrollbar-track-bg:rgba(0, 0, 0, 0.04);--x-scrollbar-thumb-bg:rgba(0, 0, 0, 0.25);--x-scrollbar-thumb-bg-hover:rgba(0, 0, 0, 0.35);--x-menu-dark-bg:#001529;--x-menu-dark-item-bg:#001529;--x-menu-dark-popup-bg:#001529;--x-menu-dark-submenu-item-bg:#000c17}:host{display:-ms-flexbox;display:flex;-ms-flex:auto;flex:auto;-ms-flex-direction:column;flex-direction:column;min-height:0;color:var(--x-content-color, var(--x-color-text, rgba(0, 0, 0, 0.88)));font-family:var(--x-content-font-family, var(--x-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif));background-color:var(--x-content-bg, var(--x-color-bg-container, #ffffff));position:relative}.x-layout-content{-ms-flex:1;flex:1;min-height:0;color:var(--x-content-color, var(--x-color-text, rgba(0, 0, 0, 0.88)));background-color:var(--x-content-bg, var(--x-color-bg-container, #ffffff));width:100%;height:100%;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden;-webkit-overflow-scrolling:touch}:host(.x-content-scroll-y) .x-layout-content{overflow-y:auto;overscroll-behavior-y:contain}:host(.x-content-scroll-x) .x-layout-content{overflow-x:auto;overscroll-behavior-x:contain}`;
+
+const XContent = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.xScrollStart = createEvent(this, "xScrollStart", 7);
+        this.xScroll = createEvent(this, "xScroll", 3);
+        this.xScrollEnd = createEvent(this, "xScrollEnd", 7);
+    }
+    get el() { return getElement(this); }
+    scrollEl;
+    isScrolling = false;
+    scrollTimer;
+    /**
+     * Whether to allow horizontal scrolling.
+     */
+    scrollX = false;
+    /**
+     * Whether to allow vertical scrolling.
+     */
+    scrollY = true;
+    /**
+     * Whether to emit scroll events.
+     */
+    scrollEvents = false;
+    /**
+     * Emitted when start scrolling.
+     */
+    xScrollStart;
+    /**
+     * Emitted while scrolling.
+     */
+    xScroll;
+    /**
+     * Emitted when end scrolling.
+     */
+    xScrollEnd;
+    /**
+     * Get the inner scrollable element.
+     */
+    async getScrollElement() {
+        if (!this.scrollEl) {
+            return Promise.reject(new Error('scroll element is not defined'));
+        }
+        return Promise.resolve(this.scrollEl);
+    }
+    /**
+     * Scroll to the top of the component.
+     * @param duration The amount of time to take scrolling to the top. Defaults to `0`.
+     */
+    async scrollToTop(duration = 0) {
+        return this.scrollToPoint(undefined, 0, duration);
+    }
+    /**
+     * Scroll to the bottom of the component.
+     * @param duration The amount of time to take scrolling to the bottom. Defaults to `0`.
+     */
+    async scrollToBottom(duration = 0) {
+        const scrollEl = await this.getScrollElement();
+        const y = scrollEl.scrollHeight - scrollEl.clientHeight;
+        return this.scrollToPoint(undefined, y, duration);
+    }
+    /**
+     * Scroll to a specified X/Y location in the component.
+     * @param x The point to scroll to on the horizontal axis.
+     * @param y The point to scroll to on the vertical axis.
+     * @param duration The amount of time to take scrolling to that point. Defaults to `0`.
+     */
+    async scrollToPoint(x, y, duration = 0) {
+        const el = await this.getScrollElement();
+        if (duration < 32) {
+            if (y != null)
+                el.scrollTop = y;
+            if (x != null)
+                el.scrollLeft = x;
+            return;
+        }
+        let resolve;
+        const promise = new Promise((r) => (resolve = r));
+        const fromY = el.scrollTop;
+        const fromX = el.scrollLeft;
+        const deltaY = y != null ? y - fromY : 0;
+        const deltaX = x != null ? x - fromX : 0;
+        const startTime = Date.now();
+        const step = () => {
+            const timeElapsed = Date.now() - startTime;
+            const progress = Math.min(1, timeElapsed / duration);
+            const easeProgress = 0.5 * (1 - Math.cos(Math.PI * progress));
+            if (y != null)
+                el.scrollTop = fromY + easeProgress * deltaY;
+            if (x != null)
+                el.scrollLeft = fromX + easeProgress * deltaX;
+            if (progress < 1) {
+                requestAnimationFrame(step);
+            }
+            else {
+                resolve();
+            }
+        };
+        requestAnimationFrame(step);
+        return promise;
+    }
+    getScrollDetail(ev) {
+        const target = ev.target;
+        return {
+            scrollTop: target.scrollTop,
+            scrollLeft: target.scrollLeft,
+            type: 'scroll',
+            event: ev,
+        };
+    }
+    onScroll = (ev) => {
+        // Only process if it is from the intended target
+        if (ev.target !== this.scrollEl) {
+            return;
+        }
+        const shouldStart = !this.isScrolling;
+        if (shouldStart) {
+            this.isScrolling = true;
+            if (this.scrollEvents) {
+                this.xScrollStart.emit(this.getScrollDetail(ev));
+            }
+        }
+        if (this.scrollEvents) {
+            this.xScroll.emit(this.getScrollDetail(ev));
+        }
+        clearTimeout(this.scrollTimer);
+        this.scrollTimer = setTimeout(() => {
+            this.isScrolling = false;
+            if (this.scrollEvents) {
+                this.xScrollEnd.emit(this.getScrollDetail(ev));
+            }
+        }, 100);
+    };
+    /**
+     * Render layout content wrapper with default slot.
+     * @returns JSX.Element
+     * @example
+     * <x-content>
+     *   <div>Main area</div>
+     * </x-content>
+     */
+    render() {
+        return (h(Host, { key: '7dbe9bdd36626dfbdfdde60db2b8ffef2cc76bb7', class: {
+                'x-content-scroll-y': this.scrollY,
+                'x-content-scroll-x': this.scrollX,
+            } }, h("main", { key: '8954532d48b86b2be59245bcbd6a397f1c86ebc9', class: "x-layout-content inner-scroll", ref: el => this.scrollEl = el, onScroll: this.scrollEvents ? this.onScroll : undefined }, h("slot", { key: 'd1fa112e698b10f7acfe4846a7546a7d38ba3d56' }))));
+    }
+};
+XContent.style = xContentCss();
+
+const xFlexCss = () => `@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}.x-flex{display:var(--x-flex-display, flex);-ms-flex-direction:var(--x-flex-direction, row);flex-direction:var(--x-flex-direction, row);-ms-flex-wrap:var(--x-flex-wrap, nowrap);flex-wrap:var(--x-flex-wrap, nowrap);-ms-flex-pack:var(--x-flex-justify, normal);justify-content:var(--x-flex-justify, normal);-ms-flex-align:var(--x-flex-align, normal);align-items:var(--x-flex-align, normal);gap:var(--x-flex-gap, 0);-ms-flex:var(--x-flex-flex, initial);flex:var(--x-flex-flex, initial);width:100%;height:100%}`;
+
+const XFlex = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    /**
+     * Sets the align-items css property.
+     * @example
+     * <x-flex align="center"></x-flex>
+     */
+    align;
+    /**
+     * Sets the justify-content css property.
+     * @example
+     * <x-flex justify="space-between"></x-flex>
+     */
+    justify;
+    /**
+     * Sets the flex-direction to column.
+     * @example
+     * <x-flex vertical></x-flex>
+     */
+    vertical = false;
+    /**
+     * Sets the flex-wrap css property.
+     * @example
+     * <x-flex wrap="wrap"></x-flex>
+     */
+    wrap = 'nowrap';
+    /**
+     * Sets the flex css property.
+     * @example
+     * <x-flex flex="1 1 auto"></x-flex>
+     */
+    flex;
+    /**
+     * Sets the gap css property.
+     * @example
+     * <x-flex gap={16}></x-flex>
+     */
+    gap = 8;
+    /**
+     * Custom element type.
+     * @example
+     * <x-flex component="section"></x-flex>
+     */
+    component = 'div';
+    /**
+     * Render a flex container with computed CSS variables.
+     *
+     * Flow:
+     * 1. Destructures layout props (align, justify, wrap, gap, etc.).
+     * 2. Maps props to CSS custom properties (e.g., `--x-flex-align`).
+     * 3. Handles value normalization (e.g., converting numeric gap to px).
+     * 4. Renders the configured `component` tag (div, section, etc.).
+     * 5. Projects slot content.
+     *
+     * @returns JSX.Element
+     * @example
+     * <x-flex align="center" gap={12}><span>A</span><span>B</span></x-flex>
+     */
+    render() {
+        const { align, justify, vertical, wrap, flex, gap, component } = this;
+        // Build CSS variables based on props.
+        const style = {};
+        // Align and justify map to CSS custom properties.
+        if (align)
+            style['--x-flex-align'] = align;
+        if (justify)
+            style['--x-flex-justify'] = justify;
+        if (vertical)
+            style['--x-flex-direction'] = 'column';
+        // Normalize wrap variations: boolean or string.
+        if (wrap === true)
+            style['--x-flex-wrap'] = 'wrap';
+        else if (wrap === false)
+            style['--x-flex-wrap'] = 'nowrap';
+        else if (wrap)
+            style['--x-flex-wrap'] = wrap;
+        // Apply flex shorthand value when provided.
+        if (flex)
+            style['--x-flex-flex'] = flex;
+        // Convert numeric gap (or numeric string) to px, otherwise keep raw.
+        if (gap !== undefined) {
+            style['--x-flex-gap'] = typeof gap === 'number' || ((typeof gap === 'string' && /^[0-9]+$/.test(gap)))
+                ? `${gap}px`
+                : gap;
+        }
+        // Render with configurable tag name.
+        const Tag = component;
+        return (h(Host, { key: 'b51bfd9b202bf108f0df07a7d5a75b1dd073882b' }, h(Tag, { key: '3913f415824f8b22c2c7528438a75bb07c392fa8', class: "x-flex", style: style }, h("slot", { key: '93823b9e3240bade5e929c86253974247e5e35be' }))));
+    }
+};
+XFlex.style = xFlexCss();
+
+const xFooterCss = () => `@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;padding:var(--x-footer-padding-block, var(--x-spacing-xl, 24px)) var(--x-footer-padding-inline, var(--x-spacing-xxxl, 24px));color:var(--x-footer-color, var(--x-color-text, rgba(0, 0, 0, 0.88)));font-size:var(--x-footer-font-size, var(--x-font-size, 14px));background:var(--x-footer-bg, var(--x-color-bg-layout, #f5f5f5));font-family:var(--x-footer-font-family, var(--x-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif));position:relative;-ms-flex-order:1;order:1;width:100%}.x-layout-footer{color:var(--x-footer-color, var(--x-color-text, rgba(0, 0, 0, 0.88)));font-size:var(--x-footer-font-size, var(--x-font-size, 14px));width:100%}`;
+
+const XFooter = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    /**
+     * Render layout footer wrapper with default slot.
+     * @returns JSX.Element
+     * @example
+     * <x-footer>
+     *   <span>Footer content</span>
+     * </x-footer>
+     */
+    render() {
+        return (h(Host, { key: 'fca5067b1a4ed92c02acae453f5d9424bf633ceb' }, h("footer", { key: '8be6dbeb9ecf630fef0313c2eda67ab9a800d985', class: "x-layout-footer" }, h("slot", { key: 'c000b07be1ac3b31581061d96cfb243a653d29bf' }))));
+    }
+};
+XFooter.style = xFooterCss();
+
+const xHeaderCss = () => `@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;background:var(--x-header-bg, var(--x-color-bg-spotlight, #001529));height:var(--x-header-height, 64px);padding-inline:var(--x-header-padding-inline, var(--x-spacing-xxl, 32px));background:var(--x-header-bg, var(--x-color-bg-spotlight, #001529));font-family:var(--x-header-font-family, var(--x-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif));position:relative;-ms-flex-order:-1;order:-1;z-index:10;width:100%}.x-layout-header{color:var(--x-header-color, var(--x-color-text-light-solid, #ffffff));width:100%;height:100%}`;
+
+const XHeader = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    /**
+     * Render layout header wrapper with default slot.
+     * @returns JSX.Element
+     * @example
+     * <x-header>
+     *   <h1>Page Title</h1>
+     * </x-header>
+     */
+    render() {
+        return (h(Host, { key: '6e6eab6052ef8d4e6b0bdadb2a7829c8f41a8463' }, h("header", { key: '381433b9c5aa8ccf3480ed09b516b8fe5a65f469', class: "x-layout-header" }, h("slot", { key: 'fe84b8611ff9f56035cf8128346fa3133b14aba2' }))));
+    }
+};
+XHeader.style = xHeaderCss();
+
+const xLayoutCss = () => `@charset "UTF-8";:root{--x-color-primary:#1677ff;--x-color-primary-rgb:22, 119, 255;--x-color-primary-contrast:#ffffff;--x-color-primary-contrast-rgb:255, 255, 255;--x-color-primary-shade:#0958d9;--x-color-primary-tint:#4096ff;--x-color-primary-bg:#e6f4ff;--x-color-primary-bg-hover:#bae0ff;--x-color-primary-border:#91caff;--x-color-primary-border-hover:#69b1ff;--x-color-primary-hover:#4096ff;--x-color-primary-active:#0958d9;--x-color-primary-text:#1677ff;--x-color-primary-text-hover:#4096ff;--x-color-primary-text-active:#0958d9;--x-color-secondary:#3dc2ff;--x-color-secondary-rgb:61, 194, 255;--x-color-secondary-contrast:#ffffff;--x-color-secondary-contrast-rgb:255, 255, 255;--x-color-secondary-shade:#36abe0;--x-color-secondary-tint:#50c8ff;--x-color-success:#52c41a;--x-color-success-rgb:82, 196, 26;--x-color-success-contrast:#ffffff;--x-color-success-contrast-rgb:255, 255, 255;--x-color-success-shade:#389e0d;--x-color-success-tint:#73d13d;--x-color-success-bg:#f6ffed;--x-color-success-bg-hover:#d9f7be;--x-color-success-border:#b7eb8f;--x-color-success-border-hover:#95de64;--x-color-success-hover:#73d13d;--x-color-success-active:#389e0d;--x-color-success-text:#52c41a;--x-color-success-text-hover:#73d13d;--x-color-success-text-active:#389e0d;--x-color-warning:#faad14;--x-color-warning-rgb:250, 173, 20;--x-color-warning-contrast:#000000;--x-color-warning-contrast-rgb:0, 0, 0;--x-color-warning-shade:#d48806;--x-color-warning-tint:#ffc53d;--x-color-warning-bg:#fffbe6;--x-color-warning-bg-hover:#fff1b8;--x-color-warning-border:#ffe58f;--x-color-warning-border-hover:#ffd666;--x-color-warning-hover:#ffc53d;--x-color-warning-active:#d48806;--x-color-warning-text:#faad14;--x-color-warning-text-hover:#ffc53d;--x-color-warning-text-active:#d48806;--x-color-danger:#ff4d4f;--x-color-danger-rgb:255, 77, 79;--x-color-danger-contrast:#ffffff;--x-color-danger-contrast-rgb:255, 255, 255;--x-color-danger-shade:#cf1322;--x-color-danger-tint:#ff7875;--x-color-error:#ff4d4f;--x-color-error-rgb:255, 77, 79;--x-color-error-bg:#fff2f0;--x-color-error-bg-hover:#ffccc7;--x-color-error-border:#ffa39e;--x-color-error-border-hover:#ff7875;--x-color-error-hover:#ff7875;--x-color-error-active:#d9363e;--x-color-error-text:#ff4d4f;--x-color-error-text-hover:#ff7875;--x-color-error-text-active:#d9363e;--x-color-info:#1677ff;--x-color-info-rgb:22, 119, 255;--x-color-info-bg:#e6f4ff;--x-color-info-bg-hover:#bae0ff;--x-color-info-border:#91caff;--x-color-info-border-hover:#69b1ff;--x-color-info-hover:#69b1ff;--x-color-info-active:#0958d9;--x-color-info-text:#1677ff;--x-color-info-text-hover:#69b1ff;--x-color-info-text-active:#0958d9;--x-color-text:rgba(0, 0, 0, 0.88);--x-color-text-secondary:rgba(0, 0, 0, 0.65);--x-color-text-tertiary:rgba(0, 0, 0, 0.45);--x-color-text-quaternary:rgba(0, 0, 0, 0.25);--x-color-text-disabled:rgba(0, 0, 0, 0.25);--x-color-text-placeholder:rgba(0, 0, 0, 0.25);--x-color-text-heading:rgba(0, 0, 0, 0.88);--x-color-text-label:rgba(0, 0, 0, 0.65);--x-color-text-description:rgba(0, 0, 0, 0.45);--x-color-text-light-solid:#ffffff;--x-color-bg-container:#ffffff;--x-color-bg-elevated:#ffffff;--x-color-bg-layout:#f5f5f5;--x-color-bg-spotlight:rgba(0, 0, 0, 0.85);--x-color-bg-mask:rgba(0, 0, 0, 0.45);--x-color-bg-base:#ffffff;--x-color-bg-container-disabled:#f5f5f5;--x-color-bg-container-loading:rgba(255, 255, 255, 0.65);--x-color-white:#ffffff;--x-color-fill:rgba(0, 0, 0, 0.15);--x-color-fill-secondary:rgba(0, 0, 0, 0.06);--x-color-fill-tertiary:rgba(0, 0, 0, 0.04);--x-color-fill-quaternary:rgba(0, 0, 0, 0.02);--x-color-border:#d9d9d9;--x-color-border-secondary:#f0f0f0;--x-color-border-bg:#ffffff;--x-color-split:rgba(5, 5, 5, 0.06);--x-color-dark:#222428;--x-color-dark-rgb:34, 36, 40;--x-color-dark-contrast:#ffffff;--x-color-dark-contrast-rgb:255, 255, 255;--x-color-dark-shade:#1e2023;--x-color-dark-tint:#383a3e;--x-color-medium:#92949c;--x-color-medium-rgb:146, 148, 156;--x-color-medium-contrast:#ffffff;--x-color-medium-contrast-rgb:255, 255, 255;--x-color-medium-shade:#808289;--x-color-medium-tint:#9d9fa6;--x-color-light:#f4f5f8;--x-color-light-rgb:244, 245, 248;--x-color-light-contrast:#000000;--x-color-light-contrast-rgb:0, 0, 0;--x-color-light-shade:#d7d8da;--x-color-light-tint:#f5f6f9;--x-font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--x-font-family-code:"SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;--x-font-size:14px;--x-font-size-sm:12px;--x-font-size-lg:16px;--x-font-size-xl:20px;--x-font-size-heading-1:38px;--x-font-size-heading-2:30px;--x-font-size-heading-3:24px;--x-font-size-heading-4:20px;--x-font-size-heading-5:16px;--x-line-height:1.5714285714285714;--x-line-height-lg:1.5;--x-line-height-sm:1.6666666666666667;--x-line-height-heading-1:1.2105263157894737;--x-line-height-heading-2:1.2666666666666666;--x-line-height-heading-3:1.3333333333333333;--x-line-height-heading-4:1.4;--x-line-height-heading-5:1.5;--x-font-weight-normal:400;--x-font-weight-medium:500;--x-font-weight-semibold:600;--x-font-weight-strong:600;--x-font-size-base:14px;--x-font-size-xxl:24px;--x-line-height-base:1.5714285714285714;--x-spacing-xxs:4px;--x-spacing-xs:8px;--x-spacing-sm:12px;--x-spacing-md:16px;--x-spacing-lg:20px;--x-spacing-xl:24px;--x-spacing-xxl:32px;--x-spacing-xxxl:48px;--x-margin-xxs:4px;--x-margin-xs:8px;--x-margin-sm:12px;--x-margin-md:16px;--x-margin-lg:24px;--x-margin-xl:32px;--x-margin-xxl:48px;--x-padding-xxs:4px;--x-padding-xs:8px;--x-padding-sm:12px;--x-padding-md:16px;--x-padding-lg:24px;--x-padding-content-horizontal-lg:24px;--x-padding-content-vertical-lg:12px;--x-padding-content-horizontal:16px;--x-padding-content-vertical:12px;--x-padding-content-horizontal-sm:16px;--x-padding-content-vertical-sm:8px;--x-border-radius:6px;--x-border-radius-xs:2px;--x-border-radius-sm:4px;--x-border-radius-lg:8px;--x-border-radius-xl:12px;--x-border-radius-outer:4px;--x-border-radius-base:6px;--x-border-width:1px;--x-border-width-base:1px;--x-shadow:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-shadow-secondary:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-shadow-tertiary:0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02);--x-shadow-lg:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-secondary:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-tertiary:0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02);--x-box-shadow-popover-arrow:2px 2px 5px rgba(0, 0, 0, 0.05);--x-box-shadow-card:0 1px 2px -2px rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.12), 0 5px 12px 4px rgba(0, 0, 0, 0.09);--x-box-shadow-drawer-right:-6px 0 16px 0 rgba(0, 0, 0, 0.08), -3px 0 6px -4px rgba(0, 0, 0, 0.12), -9px 0 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-drawer-left:6px 0 16px 0 rgba(0, 0, 0, 0.08), 3px 0 6px -4px rgba(0, 0, 0, 0.12), 9px 0 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-drawer-up:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-drawer-down:0 -6px 16px 0 rgba(0, 0, 0, 0.08), 0 -3px 6px -4px rgba(0, 0, 0, 0.12), 0 -9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-tabs-overflow-left:inset 10px 0 8px -8px rgba(0, 0, 0, 0.08);--x-box-shadow-tabs-overflow-right:inset -10px 0 8px -8px rgba(0, 0, 0, 0.08);--x-box-shadow-tabs-overflow-top:inset 0 10px 8px -8px rgba(0, 0, 0, 0.08);--x-box-shadow-tabs-overflow-bottom:inset 0 -10px 8px -8px rgba(0, 0, 0, 0.08);--x-motion-duration-fast:0.1s;--x-motion-duration-mid:0.2s;--x-motion-duration-slow:0.3s;--x-motion-ease-in-out:cubic-bezier(0.645, 0.045, 0.355, 1);--x-motion-ease-out:cubic-bezier(0.215, 0.61, 0.355, 1);--x-motion-ease-in:cubic-bezier(0.55, 0.055, 0.675, 0.19);--x-motion-ease-out-back:cubic-bezier(0.12, 0.4, 0.29, 1.46);--x-motion-ease-in-back:cubic-bezier(0.71, -0.46, 0.88, 0.6);--x-motion-ease-in-out-circle:cubic-bezier(0.78, 0.14, 0.15, 0.86);--x-motion-ease-out-circle:cubic-bezier(0.08, 0.82, 0.17, 1);--x-motion-ease-in-circle:cubic-bezier(0.6, 0.04, 0.98, 0.34);--x-motion-ease-in-quint:cubic-bezier(0.755, 0.05, 0.855, 0.06);--x-motion-ease-out-quint:cubic-bezier(0.23, 1, 0.32, 1);--x-z-index-base:0;--x-z-index-popup-base:1000;--x-z-index-popup:1030;--x-z-index-affix:10;--x-z-index-modal:1000;--x-z-index-modal-mask:1000;--x-z-index-drawer:1000;--x-z-index-popover:1030;--x-z-index-dropdown:1050;--x-z-index-tooltip:1070;--x-z-index-notification:1080;--x-z-index-message:1090;--x-z-index-popconfirm:1060;--x-z-index-table-fixed:10;--x-opacity-loading:0.65;--x-opacity-image:1;--x-opacity-disabled:0.5;--x-control-height:32px;--x-control-height-xs:24px;--x-control-height-sm:24px;--x-control-height-lg:40px;--x-control-radio-size:16px;--x-control-checkbox-size:16px;--x-control-padding-horizontal:12px;--x-control-padding-horizontal-sm:8px;--x-control-outline-width:2px;--x-control-outline:rgba(5, 145, 255, 0.1);--x-control-item-bg-hover:rgba(0, 0, 0, 0.04);--x-control-item-bg-active:#e6f4ff;--x-control-item-bg-active-hover:#bae0ff;--x-control-item-bg-active-disabled:rgba(0, 0, 0, 0.15);--x-control-tmp-outline:rgba(0, 0, 0, 0.02);--x-color-yellow:#fadb14;--x-color-yellow-rgb:250, 219, 20;--x-font-family-base:var(--x-font-family);--x-color-link:#1677ff;--x-color-link-hover:#69b1ff;--x-color-link-active:#0958d9;--x-color-icon:rgba(0, 0, 0, 0.45);--x-color-icon-hover:rgba(0, 0, 0, 0.88);--x-color-highlight:#ff4d4f;--x-color-bg-text-hover:rgba(0, 0, 0, 0.06);--x-color-bg-text-active:rgba(0, 0, 0, 0.15);--x-screen-xs:480px;--x-screen-xs-min:480px;--x-screen-xs-max:575px;--x-screen-sm:576px;--x-screen-sm-min:576px;--x-screen-sm-max:767px;--x-screen-md:768px;--x-screen-md-min:768px;--x-screen-md-max:991px;--x-screen-lg:992px;--x-screen-lg-min:992px;--x-screen-lg-max:1199px;--x-screen-xl:1200px;--x-screen-xl-min:1200px;--x-screen-xl-max:1599px;--x-screen-xxl:1600px;--x-screen-xxl-min:1600px;--x-color-fill-content:rgba(0, 0, 0, 0.06);--x-color-fill-content-hover:rgba(0, 0, 0, 0.15);--x-color-fill-alter:rgba(0, 0, 0, 0.02);--x-scrollbar-width:12px;--x-scrollbar-track-bg:rgba(0, 0, 0, 0.04);--x-scrollbar-thumb-bg:rgba(0, 0, 0, 0.25);--x-scrollbar-thumb-bg-hover:rgba(0, 0, 0, 0.35);--x-menu-dark-bg:#001529;--x-menu-dark-item-bg:#001529;--x-menu-dark-popup-bg:#001529;--x-menu-dark-submenu-item-bg:#000c17}:host{display:-ms-flexbox;display:flex;-ms-flex:auto;flex:auto;-ms-flex-direction:column;flex-direction:column;min-height:0;color:var(--x-layout-color, var(--x-color-text, rgba(0, 0, 0, 0.88)));font-family:var(--x-layout-font-family, var(--x-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif));font-size:var(--x-layout-font-size, var(--x-font-size, 14px));width:100%;height:100%}:host(.x-layout){display:-ms-flexbox;display:flex;-ms-flex:auto;flex:auto;-ms-flex-direction:column;flex-direction:column;min-height:0;color:var(--x-layout-color, var(--x-color-text, rgba(0, 0, 0, 0.88)));font-size:var(--x-layout-font-size, var(--x-font-size, 14px));width:100%;height:100%}:host(.x-layout-has-sider){-ms-flex-direction:row;flex-direction:row}:host(.x-layout.x-layout-fixed){position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden}`;
+
+const XLayout = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    get el() { return getElement(this); }
+    /**
+     * Whether the layout is fixed in position.
+     * @default true
+     * @example
+      * <x-layout fixed="true">
+     *   <x-sider></x-sider>
+     * </x-layout>
+     */
+    fixed = true;
+    watchFixed(newValue) {
+        console.log('XLayout fixed changed to:', newValue);
+    }
+    /**
+     * Tracks whether the layout has a sider child.
+     */
+    hasSider = false;
+    /**
+     * Whether contain Sider.
+     * @example
+     * <x-layout hasSiderProp>
+     *   <x-sider></x-sider>
+     * </x-layout>
+     */
+    hasSiderProp;
+    /**
+     * ResizeObserver instance.
+     */
+    observer;
+    disconnectedCallback() {
+        this.observer?.disconnect();
+    }
+    /**
+     * Initialize sider presence based on prop or DOM children.
+     *
+     * Flow:
+     * 1. Checks `hasSiderProp` preference.
+     * 2. If undefined, queries DOM for `x-sider` children.
+     * 3. Updates `hasSider` state to toggle layout class.
+     *
+     * @returns void
+     * @example
+     * <x-layout>
+     *   <x-sider></x-sider>
+     * </x-layout>
+     */
+    componentWillLoad() {
+        // If prop is explicitly provided, trust it.
+        if (this.hasSiderProp !== undefined) {
+            this.hasSider = this.hasSiderProp;
+        }
+        else {
+            // Check for x-sider children
+            const sider = this.el.querySelector('x-sider');
+            if (sider) {
+                this.hasSider = true;
+            }
+        }
+    }
+    componentDidLoad() {
+        this.observeElements();
+    }
+    observeElements() {
+        const header = this.el.closest('x-header');
+        const footer = this.el.closest('x-footer');
+        const content = this.el.closest('x-content');
+        if (!content)
+            return;
+        if (header || footer) {
+            this.observer = new ResizeObserver(() => {
+                if (header) {
+                    const height = header.getBoundingClientRect().height;
+                    content.style.setProperty('--offset-top', `${height}px`);
+                }
+                if (footer) {
+                    const height = footer.getBoundingClientRect().height;
+                    content.style.setProperty('--offset-bottom', `${height}px`);
+                }
+            });
+            if (header)
+                this.observer.observe(header);
+            if (footer)
+                this.observer.observe(footer);
+        }
+    }
+    /**
+     * Render the layout wrapper with optional sider class.
+     * @returns JSX.Element
+     * @example
+     * <x-layout>
+     *   <x-header></x-header>
+     *   <x-content></x-content>
+     * </x-layout>
+     */
+    render() {
+        // Compose classes based on layout state.
+        const classes = {
+            'x-layout': true,
+            'x-layout-has-sider': this.hasSider,
+            'x-layout-fixed': this.fixed === true,
+        };
+        return (h(Host, { key: '505299aa8958b941278b0dbaf4ceccb9dc003623', class: classes }, h("slot", { key: '82dcb640440c287f8690d44b36931ad8cf223774' })));
+    }
+    static get watchers() { return {
+        "fixed": [{
+                "watchFixed": 0
+            }]
+    }; }
+};
+XLayout.style = xLayoutCss();
+
+const xRowCss = () => `@charset "UTF-8";:root{--x-color-primary:#1677ff;--x-color-primary-rgb:22, 119, 255;--x-color-primary-contrast:#ffffff;--x-color-primary-contrast-rgb:255, 255, 255;--x-color-primary-shade:#0958d9;--x-color-primary-tint:#4096ff;--x-color-primary-bg:#e6f4ff;--x-color-primary-bg-hover:#bae0ff;--x-color-primary-border:#91caff;--x-color-primary-border-hover:#69b1ff;--x-color-primary-hover:#4096ff;--x-color-primary-active:#0958d9;--x-color-primary-text:#1677ff;--x-color-primary-text-hover:#4096ff;--x-color-primary-text-active:#0958d9;--x-color-secondary:#3dc2ff;--x-color-secondary-rgb:61, 194, 255;--x-color-secondary-contrast:#ffffff;--x-color-secondary-contrast-rgb:255, 255, 255;--x-color-secondary-shade:#36abe0;--x-color-secondary-tint:#50c8ff;--x-color-success:#52c41a;--x-color-success-rgb:82, 196, 26;--x-color-success-contrast:#ffffff;--x-color-success-contrast-rgb:255, 255, 255;--x-color-success-shade:#389e0d;--x-color-success-tint:#73d13d;--x-color-success-bg:#f6ffed;--x-color-success-bg-hover:#d9f7be;--x-color-success-border:#b7eb8f;--x-color-success-border-hover:#95de64;--x-color-success-hover:#73d13d;--x-color-success-active:#389e0d;--x-color-success-text:#52c41a;--x-color-success-text-hover:#73d13d;--x-color-success-text-active:#389e0d;--x-color-warning:#faad14;--x-color-warning-rgb:250, 173, 20;--x-color-warning-contrast:#000000;--x-color-warning-contrast-rgb:0, 0, 0;--x-color-warning-shade:#d48806;--x-color-warning-tint:#ffc53d;--x-color-warning-bg:#fffbe6;--x-color-warning-bg-hover:#fff1b8;--x-color-warning-border:#ffe58f;--x-color-warning-border-hover:#ffd666;--x-color-warning-hover:#ffc53d;--x-color-warning-active:#d48806;--x-color-warning-text:#faad14;--x-color-warning-text-hover:#ffc53d;--x-color-warning-text-active:#d48806;--x-color-danger:#ff4d4f;--x-color-danger-rgb:255, 77, 79;--x-color-danger-contrast:#ffffff;--x-color-danger-contrast-rgb:255, 255, 255;--x-color-danger-shade:#cf1322;--x-color-danger-tint:#ff7875;--x-color-error:#ff4d4f;--x-color-error-rgb:255, 77, 79;--x-color-error-bg:#fff2f0;--x-color-error-bg-hover:#ffccc7;--x-color-error-border:#ffa39e;--x-color-error-border-hover:#ff7875;--x-color-error-hover:#ff7875;--x-color-error-active:#d9363e;--x-color-error-text:#ff4d4f;--x-color-error-text-hover:#ff7875;--x-color-error-text-active:#d9363e;--x-color-info:#1677ff;--x-color-info-rgb:22, 119, 255;--x-color-info-bg:#e6f4ff;--x-color-info-bg-hover:#bae0ff;--x-color-info-border:#91caff;--x-color-info-border-hover:#69b1ff;--x-color-info-hover:#69b1ff;--x-color-info-active:#0958d9;--x-color-info-text:#1677ff;--x-color-info-text-hover:#69b1ff;--x-color-info-text-active:#0958d9;--x-color-text:rgba(0, 0, 0, 0.88);--x-color-text-secondary:rgba(0, 0, 0, 0.65);--x-color-text-tertiary:rgba(0, 0, 0, 0.45);--x-color-text-quaternary:rgba(0, 0, 0, 0.25);--x-color-text-disabled:rgba(0, 0, 0, 0.25);--x-color-text-placeholder:rgba(0, 0, 0, 0.25);--x-color-text-heading:rgba(0, 0, 0, 0.88);--x-color-text-label:rgba(0, 0, 0, 0.65);--x-color-text-description:rgba(0, 0, 0, 0.45);--x-color-text-light-solid:#ffffff;--x-color-bg-container:#ffffff;--x-color-bg-elevated:#ffffff;--x-color-bg-layout:#f5f5f5;--x-color-bg-spotlight:rgba(0, 0, 0, 0.85);--x-color-bg-mask:rgba(0, 0, 0, 0.45);--x-color-bg-base:#ffffff;--x-color-bg-container-disabled:#f5f5f5;--x-color-bg-container-loading:rgba(255, 255, 255, 0.65);--x-color-white:#ffffff;--x-color-fill:rgba(0, 0, 0, 0.15);--x-color-fill-secondary:rgba(0, 0, 0, 0.06);--x-color-fill-tertiary:rgba(0, 0, 0, 0.04);--x-color-fill-quaternary:rgba(0, 0, 0, 0.02);--x-color-border:#d9d9d9;--x-color-border-secondary:#f0f0f0;--x-color-border-bg:#ffffff;--x-color-split:rgba(5, 5, 5, 0.06);--x-color-dark:#222428;--x-color-dark-rgb:34, 36, 40;--x-color-dark-contrast:#ffffff;--x-color-dark-contrast-rgb:255, 255, 255;--x-color-dark-shade:#1e2023;--x-color-dark-tint:#383a3e;--x-color-medium:#92949c;--x-color-medium-rgb:146, 148, 156;--x-color-medium-contrast:#ffffff;--x-color-medium-contrast-rgb:255, 255, 255;--x-color-medium-shade:#808289;--x-color-medium-tint:#9d9fa6;--x-color-light:#f4f5f8;--x-color-light-rgb:244, 245, 248;--x-color-light-contrast:#000000;--x-color-light-contrast-rgb:0, 0, 0;--x-color-light-shade:#d7d8da;--x-color-light-tint:#f5f6f9;--x-font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--x-font-family-code:"SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;--x-font-size:14px;--x-font-size-sm:12px;--x-font-size-lg:16px;--x-font-size-xl:20px;--x-font-size-heading-1:38px;--x-font-size-heading-2:30px;--x-font-size-heading-3:24px;--x-font-size-heading-4:20px;--x-font-size-heading-5:16px;--x-line-height:1.5714285714285714;--x-line-height-lg:1.5;--x-line-height-sm:1.6666666666666667;--x-line-height-heading-1:1.2105263157894737;--x-line-height-heading-2:1.2666666666666666;--x-line-height-heading-3:1.3333333333333333;--x-line-height-heading-4:1.4;--x-line-height-heading-5:1.5;--x-font-weight-normal:400;--x-font-weight-medium:500;--x-font-weight-semibold:600;--x-font-weight-strong:600;--x-font-size-base:14px;--x-font-size-xxl:24px;--x-line-height-base:1.5714285714285714;--x-spacing-xxs:4px;--x-spacing-xs:8px;--x-spacing-sm:12px;--x-spacing-md:16px;--x-spacing-lg:20px;--x-spacing-xl:24px;--x-spacing-xxl:32px;--x-spacing-xxxl:48px;--x-margin-xxs:4px;--x-margin-xs:8px;--x-margin-sm:12px;--x-margin-md:16px;--x-margin-lg:24px;--x-margin-xl:32px;--x-margin-xxl:48px;--x-padding-xxs:4px;--x-padding-xs:8px;--x-padding-sm:12px;--x-padding-md:16px;--x-padding-lg:24px;--x-padding-content-horizontal-lg:24px;--x-padding-content-vertical-lg:12px;--x-padding-content-horizontal:16px;--x-padding-content-vertical:12px;--x-padding-content-horizontal-sm:16px;--x-padding-content-vertical-sm:8px;--x-border-radius:6px;--x-border-radius-xs:2px;--x-border-radius-sm:4px;--x-border-radius-lg:8px;--x-border-radius-xl:12px;--x-border-radius-outer:4px;--x-border-radius-base:6px;--x-border-width:1px;--x-border-width-base:1px;--x-shadow:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-shadow-secondary:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-shadow-tertiary:0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02);--x-shadow-lg:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-secondary:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-tertiary:0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02);--x-box-shadow-popover-arrow:2px 2px 5px rgba(0, 0, 0, 0.05);--x-box-shadow-card:0 1px 2px -2px rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.12), 0 5px 12px 4px rgba(0, 0, 0, 0.09);--x-box-shadow-drawer-right:-6px 0 16px 0 rgba(0, 0, 0, 0.08), -3px 0 6px -4px rgba(0, 0, 0, 0.12), -9px 0 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-drawer-left:6px 0 16px 0 rgba(0, 0, 0, 0.08), 3px 0 6px -4px rgba(0, 0, 0, 0.12), 9px 0 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-drawer-up:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-drawer-down:0 -6px 16px 0 rgba(0, 0, 0, 0.08), 0 -3px 6px -4px rgba(0, 0, 0, 0.12), 0 -9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-tabs-overflow-left:inset 10px 0 8px -8px rgba(0, 0, 0, 0.08);--x-box-shadow-tabs-overflow-right:inset -10px 0 8px -8px rgba(0, 0, 0, 0.08);--x-box-shadow-tabs-overflow-top:inset 0 10px 8px -8px rgba(0, 0, 0, 0.08);--x-box-shadow-tabs-overflow-bottom:inset 0 -10px 8px -8px rgba(0, 0, 0, 0.08);--x-motion-duration-fast:0.1s;--x-motion-duration-mid:0.2s;--x-motion-duration-slow:0.3s;--x-motion-ease-in-out:cubic-bezier(0.645, 0.045, 0.355, 1);--x-motion-ease-out:cubic-bezier(0.215, 0.61, 0.355, 1);--x-motion-ease-in:cubic-bezier(0.55, 0.055, 0.675, 0.19);--x-motion-ease-out-back:cubic-bezier(0.12, 0.4, 0.29, 1.46);--x-motion-ease-in-back:cubic-bezier(0.71, -0.46, 0.88, 0.6);--x-motion-ease-in-out-circle:cubic-bezier(0.78, 0.14, 0.15, 0.86);--x-motion-ease-out-circle:cubic-bezier(0.08, 0.82, 0.17, 1);--x-motion-ease-in-circle:cubic-bezier(0.6, 0.04, 0.98, 0.34);--x-motion-ease-in-quint:cubic-bezier(0.755, 0.05, 0.855, 0.06);--x-motion-ease-out-quint:cubic-bezier(0.23, 1, 0.32, 1);--x-z-index-base:0;--x-z-index-popup-base:1000;--x-z-index-popup:1030;--x-z-index-affix:10;--x-z-index-modal:1000;--x-z-index-modal-mask:1000;--x-z-index-drawer:1000;--x-z-index-popover:1030;--x-z-index-dropdown:1050;--x-z-index-tooltip:1070;--x-z-index-notification:1080;--x-z-index-message:1090;--x-z-index-popconfirm:1060;--x-z-index-table-fixed:10;--x-opacity-loading:0.65;--x-opacity-image:1;--x-opacity-disabled:0.5;--x-control-height:32px;--x-control-height-xs:24px;--x-control-height-sm:24px;--x-control-height-lg:40px;--x-control-radio-size:16px;--x-control-checkbox-size:16px;--x-control-padding-horizontal:12px;--x-control-padding-horizontal-sm:8px;--x-control-outline-width:2px;--x-control-outline:rgba(5, 145, 255, 0.1);--x-control-item-bg-hover:rgba(0, 0, 0, 0.04);--x-control-item-bg-active:#e6f4ff;--x-control-item-bg-active-hover:#bae0ff;--x-control-item-bg-active-disabled:rgba(0, 0, 0, 0.15);--x-control-tmp-outline:rgba(0, 0, 0, 0.02);--x-color-yellow:#fadb14;--x-color-yellow-rgb:250, 219, 20;--x-font-family-base:var(--x-font-family);--x-color-link:#1677ff;--x-color-link-hover:#69b1ff;--x-color-link-active:#0958d9;--x-color-icon:rgba(0, 0, 0, 0.45);--x-color-icon-hover:rgba(0, 0, 0, 0.88);--x-color-highlight:#ff4d4f;--x-color-bg-text-hover:rgba(0, 0, 0, 0.06);--x-color-bg-text-active:rgba(0, 0, 0, 0.15);--x-screen-xs:480px;--x-screen-xs-min:480px;--x-screen-xs-max:575px;--x-screen-sm:576px;--x-screen-sm-min:576px;--x-screen-sm-max:767px;--x-screen-md:768px;--x-screen-md-min:768px;--x-screen-md-max:991px;--x-screen-lg:992px;--x-screen-lg-min:992px;--x-screen-lg-max:1199px;--x-screen-xl:1200px;--x-screen-xl-min:1200px;--x-screen-xl-max:1599px;--x-screen-xxl:1600px;--x-screen-xxl-min:1600px;--x-color-fill-content:rgba(0, 0, 0, 0.06);--x-color-fill-content-hover:rgba(0, 0, 0, 0.15);--x-color-fill-alter:rgba(0, 0, 0, 0.02);--x-scrollbar-width:12px;--x-scrollbar-track-bg:rgba(0, 0, 0, 0.04);--x-scrollbar-thumb-bg:rgba(0, 0, 0, 0.25);--x-scrollbar-thumb-bg-hover:rgba(0, 0, 0, 0.35);--x-menu-dark-bg:#001529;--x-menu-dark-item-bg:#001529;--x-menu-dark-popup-bg:#001529;--x-menu-dark-submenu-item-bg:#000c17}:host{display:-ms-flexbox;display:flex;-ms-flex-flow:row wrap;flex-flow:row wrap;min-width:0;-ms-flex-align:var(--x-row-align, flex-start);align-items:var(--x-row-align, flex-start);-ms-flex-pack:var(--x-row-justify, flex-start);justify-content:var(--x-row-justify, flex-start);-ms-flex-wrap:var(--x-row-wrap, wrap);flex-wrap:var(--x-row-wrap, wrap);margin-left:var(--x-row-margin-x, 0px);margin-right:var(--x-row-margin-x, 0px);margin-top:var(--x-row-margin-y, 0px);margin-bottom:var(--x-row-margin-y, 0px);row-gap:var(--x-row-gutter-y, 0px)}::slotted(x-col){padding-left:calc(var(--x-row-gutter-x, 0px) / 2);padding-right:calc(var(--x-row-gutter-x, 0px) / 2)}`;
+
+const XRow = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    /**
+     * Vertical alignment.
+     * @example
+     * <x-row align="middle"></x-row>
+     */
+    align = 'top';
+    /**
+     * Spacing between grids, could be a number or a object like { xs: 8, sm: 16, md: 24}
+     * For simplicity in this version, we accept number or [number, number]
+     * @example
+     * <x-row gutter={[16, 8]}></x-row>
+     */
+    gutter = 0;
+    /**
+     * Horizontal arrangement.
+     * @example
+     * <x-row justify="space-between"></x-row>
+     */
+    justify = 'start';
+    /**
+     * Auto wrap line.
+     * @example
+     * <x-row wrap={false}></x-row>
+     */
+    wrap = true;
+    /**
+     * Renders the Row component.
+     *
+     * Flow:
+     * 1. Destructures props: `align`, `justify`, `wrap`, `gutter`.
+     * 2. Maps `align` values to flexbox equivalents (e.g., 'middle' -> 'center').
+     * 3. Sets CSS variables for alignment and wrapping.
+     * 4. Processes `gutter`:
+     *    - If a number, applies equal spacing horizontally and vertically.
+     *    - If an array, applies distinct horizontal and vertical spacing.
+     * 5. Calculates and sets CSS variables for gutters and negative margins to offset column padding.
+     *
+     * @returns JSX.Element - The host element with computed styles.
+     */
+    render() {
+        const { align, justify, wrap, gutter } = this;
+        const style = {};
+        // Map alignment props to flexbox values
+        if (align)
+            style['--x-row-align'] = align === 'middle' ? 'center' : align === 'top' ? 'flex-start' : align === 'bottom' ? 'flex-end' : align;
+        if (justify)
+            style['--x-row-justify'] = justify;
+        style['--x-row-wrap'] = wrap ? 'wrap' : 'nowrap';
+        let gutterX = 0;
+        let gutterY = 0;
+        // Handle gutter configuration
+        if (typeof gutter === 'number') {
+            gutterX = gutter;
+            gutterY = gutter;
+        }
+        else if (Array.isArray(gutter)) {
+            gutterX = gutter[0];
+            gutterY = gutter[1];
+        }
+        // Apply gutter styles if present
+        if (gutterX > 0) {
+            style['--x-row-gutter-x'] = `${gutterX}px`;
+            style['--x-row-margin-x'] = `-${gutterX / 2}px`;
+        }
+        if (gutterY > 0) {
+            style['--x-row-gutter-y'] = `${gutterY}px`;
+            style['--x-row-margin-y'] = `-${gutterY / 2}px`;
+        }
+        return (h(Host, { key: '3973935e4573f194ff7c01476aedd7ec12c33fe3', style: style }, h("slot", { key: 'e5b420f22375f2268ebe422f96c62d0608f3345c' })));
+    }
+};
+XRow.style = xRowCss();
+
+const xSegmentedCss = () => `: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;-webkit-box-sizing:border-box;box-sizing:border-box;font-family:var(--x-font-family)}.x-segmented{position:relative;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:stretch;align-items:stretch;padding:var(--x-segmented-padding, 2px);background-color:var(--x-segmented-bg, var(--x-color-fill-tertiary, rgba(0, 0, 0, 0.04)));border-radius:var(--x-segmented-border-radius, var(--x-border-radius-base, 6px));-webkit-transition:all var(--x-motion-duration-mid, 0.2s) var(--x-motion-ease-in-out, cubic-bezier(0.645, 0.045, 0.355, 1));transition:all var(--x-motion-duration-mid, 0.2s) var(--x-motion-ease-in-out, cubic-bezier(0.645, 0.045, 0.355, 1));min-height:var(--x-control-height, 32px);width:auto}.x-segmented.x-segmented-block{display:-ms-flexbox;display:flex;width:100%}.x-segmented-small{min-height:var(--x-control-height-sm, 24px);border-radius:var(--x-border-radius-sm, 4px)}.x-segmented-small .x-segmented-item{font-size:var(--x-font-size-sm, 12px);padding:0 8px}.x-segmented-small .x-segmented-thumb{border-radius:calc(var(--x-border-radius-sm, 4px) - var(--x-segmented-padding, 2px))}.x-segmented-large{min-height:var(--x-control-height-lg, 40px)}.x-segmented-large .x-segmented-item{font-size:var(--x-font-size-lg, 16px);padding:0 16px}.x-segmented-group{position:relative;display:-ms-flexbox;display:flex;-ms-flex-align:stretch;align-items:stretch;width:100%}.x-segmented-item{position:relative;-ms-flex:1;flex:1;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;padding:0 12px;color:var(--x-segmented-item-color, var(--x-color-text-secondary, rgba(0, 0, 0, 0.65)));font-size:var(--x-font-size-base, 14px);cursor:pointer;-webkit-transition:color var(--x-motion-duration-mid, 0.2s);transition:color var(--x-motion-duration-mid, 0.2s);z-index:1;text-align:center;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.x-segmented-item:hover:not(.x-segmented-item-selected):not(.x-segmented-item-disabled){color:var(--x-segmented-item-hover-color, var(--x-color-text, rgba(0, 0, 0, 0.88)));background-color:var(--x-segmented-item-hover-bg, var(--x-color-fill-secondary, rgba(0, 0, 0, 0.06)));border-radius:calc(var(--x-segmented-border-radius, var(--x-border-radius-base, 6px)) - var(--x-segmented-padding, 2px))}.x-segmented-item-selected{color:var(--x-segmented-item-selected-color, var(--x-color-text, rgba(0, 0, 0, 0.88)));font-weight:500}.x-segmented-item-disabled{color:var(--x-color-text-disabled, rgba(0, 0, 0, 0.25));cursor:not-allowed}.x-segmented-item-icon{margin-right:8px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.x-segmented-item-icon+span{display:inline-block}.x-segmented-thumb{position:absolute;top:0;left:0;height:100%;background-color:var(--x-segmented-item-selected-bg, var(--x-color-bg-container, #ffffff));border-radius:calc(var(--x-segmented-border-radius, var(--x-border-radius-base, 6px)) - var(--x-segmented-padding, 2px));-webkit-box-shadow:0 2px 4px 0 rgba(0, 0, 0, 0.08);box-shadow:0 2px 4px 0 rgba(0, 0, 0, 0.08);-webkit-transition:all var(--x-motion-duration-mid, 0.2s) var(--x-motion-ease-in-out, cubic-bezier(0.645, 0.045, 0.355, 1));transition:all var(--x-motion-duration-mid, 0.2s) var(--x-motion-ease-in-out, cubic-bezier(0.645, 0.045, 0.355, 1));z-index:0}`;
+
+const XSegmented = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.xChange = createEvent(this, "xChange", 7);
+    }
+    get el() { return getElement(this); }
+    /**
+     * Options to show
+     * @example
+     * <x-segmented options={['Daily', 'Weekly', 'Monthly']} />
+     * <x-segmented options={[{ label: 'Daily', value: 'Daily', icon: 'bars' }]} />
+     */
+    options = [];
+    /**
+     * Currently selected value
+     * @example
+     * <x-segmented value="Weekly" />
+     */
+    value;
+    /**
+     * Default selected value
+     * @example
+     * <x-segmented defaultValue="Daily" />
+     */
+    defaultValue;
+    /**
+     * Size of segmented
+     * @example
+     * <x-segmented size="large" />
+     */
+    size = 'middle';
+    /**
+     * Whether to fit to container width
+     * @example
+     * <x-segmented block />
+     */
+    block = false;
+    /**
+     * Whether the whole component is disabled
+     * @example
+     * <x-segmented disabled />
+     */
+    disabled = false;
+    /**
+     * Event emitted when selection changes
+     * @example
+     * <x-segmented onXChange={(e) => console.log(e.detail)} />
+     */
+    xChange;
+    innerValue;
+    thumbStyle = { transform: 'translateX(0)', width: '0' };
+    /**
+     * Watches for changes in the 'value' prop.
+     * Updates the internal state and the thumb position.
+     *
+     * @param newValue - The new selected value.
+     */
+    handleValueChange(newValue) {
+        this.innerValue = newValue;
+        this.updateThumb();
+    }
+    /**
+     * Watches for changes in the 'options' prop.
+     * Triggers a thumb position update to align with new options.
+     */
+    handleOptionsChange() {
+        this.updateThumb();
+    }
+    /**
+     * Component lifecycle method called before loading.
+     * Initializes the internal value state based on priority:
+     *
+     * Flow:
+     * 1. Checks if `value` prop is provided (controlled mode).
+     * 2. If not, checks if `defaultValue` prop is provided (uncontrolled mode).
+     * 3. If neither, defaults to the first option in the list.
+     * 4. Sets `innerValue` state accordingly.
+     */
+    componentWillLoad() {
+        if (this.value !== undefined) {
+            this.innerValue = this.value;
+        }
+        else if (this.defaultValue !== undefined) {
+            this.innerValue = this.defaultValue;
+        }
+        else if (this.options && this.options.length > 0) {
+            const first = this.options[0];
+            // @ts-ignore
+            this.innerValue = typeof first === 'object' ? first.value : first;
+        }
+    }
+    /**
+     * Component lifecycle method called after loading.
+     * Initial calculation of the thumb position.
+     * Uses a timeout to ensure the DOM layout is fully settled.
+     */
+    componentDidLoad() {
+        this.updateThumb();
+        // Re-update after a small delay to ensure layout is ready
+        setTimeout(() => this.updateThumb(), 50);
+    }
+    /**
+     * Updates the position and width of the selection thumb (the sliding background).
+     *
+     * Flow:
+     * 1. Finds all item elements in the shadow DOM.
+     * 2. Identifies the index of the currently selected option.
+     * 3. If found, calculates the `offsetLeft` and `offsetWidth` of the selected item.
+     * 4. Updates `thumbStyle` state to animate the thumb to the new position.
+     */
+    updateThumb() {
+        if (!this.el)
+            return;
+        const items = this.el.shadowRoot?.querySelectorAll('.x-segmented-item');
+        if (!items || items.length === 0)
+            return;
+        // @ts-ignore
+        const normalizedOptions = this.normalizeOptions();
+        // @ts-ignore
+        const index = normalizedOptions.findIndex(opt => opt.value === this.innerValue);
+        if (index !== -1 && items[index]) {
+            const activeItem = items[index];
+            this.thumbStyle = {
+                transform: `translateX(${activeItem.offsetLeft}px)`,
+                width: `${activeItem.offsetWidth}px`
+            };
+        }
+    }
+    /**
+     * Normalizes the options array into a standard object format.
+     * Handles both primitive values (string/number) and object options.
+     *
+     * @returns SegmentedOption[] - Array of standardized option objects.
+     */
+    normalizeOptions() {
+        return this.options.map(opt => {
+            if (typeof opt === 'object')
+                return opt;
+            return { label: String(opt), value: opt };
+        });
+    }
+    /**
+     * Handles click events on segmented items.
+     *
+     * Flow:
+     * 1. Checks if component or item is disabled, or if value hasn't changed.
+     * 2. Updates internal state and prop value.
+     * 3. Emits `xChange` event.
+     * 4. Triggers thumb position update.
+     *
+     * @param value - The value of the clicked item.
+     * @param disabled - Whether the clicked item is disabled.
+     */
+    handleItemClick(value, disabled) {
+        if (this.disabled || disabled || value === this.innerValue)
+            return;
+        this.innerValue = value;
+        this.value = value;
+        this.xChange.emit(value);
+        this.updateThumb();
+    }
+    /**
+     * Renders the Segmented component.
+     *
+     * Flow:
+     * 1. Normalizes the options array.
+     * 2. Renders the Host element with block/disabled classes.
+     * 3. Renders the main wrapper and group container.
+     * 4. Renders the "thumb" (active background) using `thumbStyle`.
+     * 5. Maps over normalized options to render item elements:
+     *    - Applies selected/disabled classes.
+     *    - Attaches click handler.
+     *    - Renders icon (if present) and label.
+     *
+     * @returns {JSX.Element} The component tree.
+     */
+    render() {
+        const options = this.normalizeOptions();
+        return (h(Host, { key: '11f02d21deaa61f518736437d47420e65385ddac', class: {
+                'x-segmented-host': true,
+                'x-segmented-host-block': this.block
+            } }, h("div", { key: 'f7f77d807c7cffe0d46fd1357cf1f0b9330d4673', class: {
+                'x-segmented': true,
+                'x-segmented-block': this.block,
+                [`x-segmented-${this.size}`]: true,
+                'x-segmented-disabled': this.disabled
+            } }, h("div", { key: '2710d71aad0c408d984e17b436b2a00b5c4e8197', class: "x-segmented-group" }, h("div", { key: '645214cd76268f424ec1b9d2a55ca8b0932fddd3', class: "x-segmented-thumb", style: this.thumbStyle }), options.map((option) => (h("div", { class: {
+                'x-segmented-item': true,
+                'x-segmented-item-selected': this.innerValue === option.value,
+                'x-segmented-item-disabled': !!(this.disabled || option.disabled),
+                ...(option.className ? { [option.className]: true } : {})
+            }, title: option.title, onClick: () => this.handleItemClick(option.value, !!option.disabled) }, option.icon && (h("span", { class: "x-segmented-item-icon" }, h("x-icon", { name: option.icon }))), h("span", null, option.label))))))));
+    }
+    static get watchers() { return {
+        "value": [{
+                "handleValueChange": 0
+            }],
+        "options": [{
+                "handleOptionsChange": 0
+            }]
+    }; }
+};
+XSegmented.style = xSegmentedCss();
+
+const xSiderCss = () => `@charset "UTF-8";:root{--x-color-primary:#1677ff;--x-color-primary-rgb:22, 119, 255;--x-color-primary-contrast:#ffffff;--x-color-primary-contrast-rgb:255, 255, 255;--x-color-primary-shade:#0958d9;--x-color-primary-tint:#4096ff;--x-color-primary-bg:#e6f4ff;--x-color-primary-bg-hover:#bae0ff;--x-color-primary-border:#91caff;--x-color-primary-border-hover:#69b1ff;--x-color-primary-hover:#4096ff;--x-color-primary-active:#0958d9;--x-color-primary-text:#1677ff;--x-color-primary-text-hover:#4096ff;--x-color-primary-text-active:#0958d9;--x-color-secondary:#3dc2ff;--x-color-secondary-rgb:61, 194, 255;--x-color-secondary-contrast:#ffffff;--x-color-secondary-contrast-rgb:255, 255, 255;--x-color-secondary-shade:#36abe0;--x-color-secondary-tint:#50c8ff;--x-color-success:#52c41a;--x-color-success-rgb:82, 196, 26;--x-color-success-contrast:#ffffff;--x-color-success-contrast-rgb:255, 255, 255;--x-color-success-shade:#389e0d;--x-color-success-tint:#73d13d;--x-color-success-bg:#f6ffed;--x-color-success-bg-hover:#d9f7be;--x-color-success-border:#b7eb8f;--x-color-success-border-hover:#95de64;--x-color-success-hover:#73d13d;--x-color-success-active:#389e0d;--x-color-success-text:#52c41a;--x-color-success-text-hover:#73d13d;--x-color-success-text-active:#389e0d;--x-color-warning:#faad14;--x-color-warning-rgb:250, 173, 20;--x-color-warning-contrast:#000000;--x-color-warning-contrast-rgb:0, 0, 0;--x-color-warning-shade:#d48806;--x-color-warning-tint:#ffc53d;--x-color-warning-bg:#fffbe6;--x-color-warning-bg-hover:#fff1b8;--x-color-warning-border:#ffe58f;--x-color-warning-border-hover:#ffd666;--x-color-warning-hover:#ffc53d;--x-color-warning-active:#d48806;--x-color-warning-text:#faad14;--x-color-warning-text-hover:#ffc53d;--x-color-warning-text-active:#d48806;--x-color-danger:#ff4d4f;--x-color-danger-rgb:255, 77, 79;--x-color-danger-contrast:#ffffff;--x-color-danger-contrast-rgb:255, 255, 255;--x-color-danger-shade:#cf1322;--x-color-danger-tint:#ff7875;--x-color-error:#ff4d4f;--x-color-error-rgb:255, 77, 79;--x-color-error-bg:#fff2f0;--x-color-error-bg-hover:#ffccc7;--x-color-error-border:#ffa39e;--x-color-error-border-hover:#ff7875;--x-color-error-hover:#ff7875;--x-color-error-active:#d9363e;--x-color-error-text:#ff4d4f;--x-color-error-text-hover:#ff7875;--x-color-error-text-active:#d9363e;--x-color-info:#1677ff;--x-color-info-rgb:22, 119, 255;--x-color-info-bg:#e6f4ff;--x-color-info-bg-hover:#bae0ff;--x-color-info-border:#91caff;--x-color-info-border-hover:#69b1ff;--x-color-info-hover:#69b1ff;--x-color-info-active:#0958d9;--x-color-info-text:#1677ff;--x-color-info-text-hover:#69b1ff;--x-color-info-text-active:#0958d9;--x-color-text:rgba(0, 0, 0, 0.88);--x-color-text-secondary:rgba(0, 0, 0, 0.65);--x-color-text-tertiary:rgba(0, 0, 0, 0.45);--x-color-text-quaternary:rgba(0, 0, 0, 0.25);--x-color-text-disabled:rgba(0, 0, 0, 0.25);--x-color-text-placeholder:rgba(0, 0, 0, 0.25);--x-color-text-heading:rgba(0, 0, 0, 0.88);--x-color-text-label:rgba(0, 0, 0, 0.65);--x-color-text-description:rgba(0, 0, 0, 0.45);--x-color-text-light-solid:#ffffff;--x-color-bg-container:#ffffff;--x-color-bg-elevated:#ffffff;--x-color-bg-layout:#f5f5f5;--x-color-bg-spotlight:rgba(0, 0, 0, 0.85);--x-color-bg-mask:rgba(0, 0, 0, 0.45);--x-color-bg-base:#ffffff;--x-color-bg-container-disabled:#f5f5f5;--x-color-bg-container-loading:rgba(255, 255, 255, 0.65);--x-color-white:#ffffff;--x-color-fill:rgba(0, 0, 0, 0.15);--x-color-fill-secondary:rgba(0, 0, 0, 0.06);--x-color-fill-tertiary:rgba(0, 0, 0, 0.04);--x-color-fill-quaternary:rgba(0, 0, 0, 0.02);--x-color-border:#d9d9d9;--x-color-border-secondary:#f0f0f0;--x-color-border-bg:#ffffff;--x-color-split:rgba(5, 5, 5, 0.06);--x-color-dark:#222428;--x-color-dark-rgb:34, 36, 40;--x-color-dark-contrast:#ffffff;--x-color-dark-contrast-rgb:255, 255, 255;--x-color-dark-shade:#1e2023;--x-color-dark-tint:#383a3e;--x-color-medium:#92949c;--x-color-medium-rgb:146, 148, 156;--x-color-medium-contrast:#ffffff;--x-color-medium-contrast-rgb:255, 255, 255;--x-color-medium-shade:#808289;--x-color-medium-tint:#9d9fa6;--x-color-light:#f4f5f8;--x-color-light-rgb:244, 245, 248;--x-color-light-contrast:#000000;--x-color-light-contrast-rgb:0, 0, 0;--x-color-light-shade:#d7d8da;--x-color-light-tint:#f5f6f9;--x-font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--x-font-family-code:"SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;--x-font-size:14px;--x-font-size-sm:12px;--x-font-size-lg:16px;--x-font-size-xl:20px;--x-font-size-heading-1:38px;--x-font-size-heading-2:30px;--x-font-size-heading-3:24px;--x-font-size-heading-4:20px;--x-font-size-heading-5:16px;--x-line-height:1.5714285714285714;--x-line-height-lg:1.5;--x-line-height-sm:1.6666666666666667;--x-line-height-heading-1:1.2105263157894737;--x-line-height-heading-2:1.2666666666666666;--x-line-height-heading-3:1.3333333333333333;--x-line-height-heading-4:1.4;--x-line-height-heading-5:1.5;--x-font-weight-normal:400;--x-font-weight-medium:500;--x-font-weight-semibold:600;--x-font-weight-strong:600;--x-font-size-base:14px;--x-font-size-xxl:24px;--x-line-height-base:1.5714285714285714;--x-spacing-xxs:4px;--x-spacing-xs:8px;--x-spacing-sm:12px;--x-spacing-md:16px;--x-spacing-lg:20px;--x-spacing-xl:24px;--x-spacing-xxl:32px;--x-spacing-xxxl:48px;--x-margin-xxs:4px;--x-margin-xs:8px;--x-margin-sm:12px;--x-margin-md:16px;--x-margin-lg:24px;--x-margin-xl:32px;--x-margin-xxl:48px;--x-padding-xxs:4px;--x-padding-xs:8px;--x-padding-sm:12px;--x-padding-md:16px;--x-padding-lg:24px;--x-padding-content-horizontal-lg:24px;--x-padding-content-vertical-lg:12px;--x-padding-content-horizontal:16px;--x-padding-content-vertical:12px;--x-padding-content-horizontal-sm:16px;--x-padding-content-vertical-sm:8px;--x-border-radius:6px;--x-border-radius-xs:2px;--x-border-radius-sm:4px;--x-border-radius-lg:8px;--x-border-radius-xl:12px;--x-border-radius-outer:4px;--x-border-radius-base:6px;--x-border-width:1px;--x-border-width-base:1px;--x-shadow:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-shadow-secondary:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-shadow-tertiary:0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02);--x-shadow-lg:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-secondary:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-tertiary:0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02);--x-box-shadow-popover-arrow:2px 2px 5px rgba(0, 0, 0, 0.05);--x-box-shadow-card:0 1px 2px -2px rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.12), 0 5px 12px 4px rgba(0, 0, 0, 0.09);--x-box-shadow-drawer-right:-6px 0 16px 0 rgba(0, 0, 0, 0.08), -3px 0 6px -4px rgba(0, 0, 0, 0.12), -9px 0 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-drawer-left:6px 0 16px 0 rgba(0, 0, 0, 0.08), 3px 0 6px -4px rgba(0, 0, 0, 0.12), 9px 0 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-drawer-up:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-drawer-down:0 -6px 16px 0 rgba(0, 0, 0, 0.08), 0 -3px 6px -4px rgba(0, 0, 0, 0.12), 0 -9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-tabs-overflow-left:inset 10px 0 8px -8px rgba(0, 0, 0, 0.08);--x-box-shadow-tabs-overflow-right:inset -10px 0 8px -8px rgba(0, 0, 0, 0.08);--x-box-shadow-tabs-overflow-top:inset 0 10px 8px -8px rgba(0, 0, 0, 0.08);--x-box-shadow-tabs-overflow-bottom:inset 0 -10px 8px -8px rgba(0, 0, 0, 0.08);--x-motion-duration-fast:0.1s;--x-motion-duration-mid:0.2s;--x-motion-duration-slow:0.3s;--x-motion-ease-in-out:cubic-bezier(0.645, 0.045, 0.355, 1);--x-motion-ease-out:cubic-bezier(0.215, 0.61, 0.355, 1);--x-motion-ease-in:cubic-bezier(0.55, 0.055, 0.675, 0.19);--x-motion-ease-out-back:cubic-bezier(0.12, 0.4, 0.29, 1.46);--x-motion-ease-in-back:cubic-bezier(0.71, -0.46, 0.88, 0.6);--x-motion-ease-in-out-circle:cubic-bezier(0.78, 0.14, 0.15, 0.86);--x-motion-ease-out-circle:cubic-bezier(0.08, 0.82, 0.17, 1);--x-motion-ease-in-circle:cubic-bezier(0.6, 0.04, 0.98, 0.34);--x-motion-ease-in-quint:cubic-bezier(0.755, 0.05, 0.855, 0.06);--x-motion-ease-out-quint:cubic-bezier(0.23, 1, 0.32, 1);--x-z-index-base:0;--x-z-index-popup-base:1000;--x-z-index-popup:1030;--x-z-index-affix:10;--x-z-index-modal:1000;--x-z-index-modal-mask:1000;--x-z-index-drawer:1000;--x-z-index-popover:1030;--x-z-index-dropdown:1050;--x-z-index-tooltip:1070;--x-z-index-notification:1080;--x-z-index-message:1090;--x-z-index-popconfirm:1060;--x-z-index-table-fixed:10;--x-opacity-loading:0.65;--x-opacity-image:1;--x-opacity-disabled:0.5;--x-control-height:32px;--x-control-height-xs:24px;--x-control-height-sm:24px;--x-control-height-lg:40px;--x-control-radio-size:16px;--x-control-checkbox-size:16px;--x-control-padding-horizontal:12px;--x-control-padding-horizontal-sm:8px;--x-control-outline-width:2px;--x-control-outline:rgba(5, 145, 255, 0.1);--x-control-item-bg-hover:rgba(0, 0, 0, 0.04);--x-control-item-bg-active:#e6f4ff;--x-control-item-bg-active-hover:#bae0ff;--x-control-item-bg-active-disabled:rgba(0, 0, 0, 0.15);--x-control-tmp-outline:rgba(0, 0, 0, 0.02);--x-color-yellow:#fadb14;--x-color-yellow-rgb:250, 219, 20;--x-font-family-base:var(--x-font-family);--x-color-link:#1677ff;--x-color-link-hover:#69b1ff;--x-color-link-active:#0958d9;--x-color-icon:rgba(0, 0, 0, 0.45);--x-color-icon-hover:rgba(0, 0, 0, 0.88);--x-color-highlight:#ff4d4f;--x-color-bg-text-hover:rgba(0, 0, 0, 0.06);--x-color-bg-text-active:rgba(0, 0, 0, 0.15);--x-screen-xs:480px;--x-screen-xs-min:480px;--x-screen-xs-max:575px;--x-screen-sm:576px;--x-screen-sm-min:576px;--x-screen-sm-max:767px;--x-screen-md:768px;--x-screen-md-min:768px;--x-screen-md-max:991px;--x-screen-lg:992px;--x-screen-lg-min:992px;--x-screen-lg-max:1199px;--x-screen-xl:1200px;--x-screen-xl-min:1200px;--x-screen-xl-max:1599px;--x-screen-xxl:1600px;--x-screen-xxl-min:1600px;--x-color-fill-content:rgba(0, 0, 0, 0.06);--x-color-fill-content-hover:rgba(0, 0, 0, 0.15);--x-color-fill-alter:rgba(0, 0, 0, 0.02);--x-scrollbar-width:12px;--x-scrollbar-track-bg:rgba(0, 0, 0, 0.04);--x-scrollbar-thumb-bg:rgba(0, 0, 0, 0.25);--x-scrollbar-thumb-bg-hover:rgba(0, 0, 0, 0.35);--x-menu-dark-bg:#001529;--x-menu-dark-item-bg:#001529;--x-menu-dark-popup-bg:#001529;--x-menu-dark-submenu-item-bg:#000c17}:host{display:block;position:relative;min-width:0;background:var(--x-sider-bg, var(--x-color-bg-spotlight, #001529));-webkit-transition:all var(--x-sider-motion-duration, var(--x-motion-duration-mid, 0.2s));transition:all var(--x-sider-motion-duration, var(--x-motion-duration-mid, 0.2s));font-family:var(--x-sider-font-family, var(--x-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif))}.x-layout-sider{position:relative;min-width:0;-webkit-transition:all var(--x-sider-motion-duration-fast, var(--x-motion-duration-fast, 0.1s)), background 0s;transition:all var(--x-sider-motion-duration-fast, var(--x-motion-duration-fast, 0.1s)), background 0s;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;height:100%;width:100%}.x-layout-sider-children{height:100%;-ms-flex:1;flex:1;overflow:hidden;color:var(--x-sider-color, var(--x-color-text-secondary, rgba(0, 0, 0, 0.65)))}.x-layout-sider-trigger{position:fixed;bottom:0;z-index:1;height:var(--x-sider-trigger-height, var(--x-spacing-xxxl, 48px));color:var(--x-sider-trigger-color, var(--x-color-text-light-solid, #ffffff));line-height:var(--x-sider-trigger-height, var(--x-spacing-xxxl, 48px));text-align:center;background:var(--x-sider-trigger-bg, rgba(0, 0, 0, 0.75));cursor:pointer;-webkit-transition:all var(--x-sider-motion-duration-fast, var(--x-motion-duration-fast, 0.1s));transition:all var(--x-sider-motion-duration-fast, var(--x-motion-duration-fast, 0.1s))}:host(.x-layout-sider-light){background:var(--x-sider-bg-light, var(--x-color-bg-container, #ffffff))}:host(.x-layout-sider-light) .x-layout-sider{background:var(--x-sider-bg-light, var(--x-color-bg-container, #ffffff))}:host(.x-layout-sider-light) .x-layout-sider-children{color:var(--x-sider-color-light, var(--x-color-text, rgba(0, 0, 0, 0.88)))}:host(.x-layout-sider-light) .x-layout-sider-trigger{background:var(--x-sider-trigger-bg-light, var(--x-color-bg-container, #ffffff));color:var(--x-sider-trigger-color-light, var(--x-color-text, rgba(0, 0, 0, 0.88)))}`;
+
+const XSider = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.xCollapse = createEvent(this, "xCollapse", 7);
+    }
+    /**
+     * Whether can be collapsed.
+     * @example
+     * <x-sider collapsible></x-sider>
+     */
+    collapsible = false;
+    /**
+     * Current collapsed status.
+     * @example
+     * <x-sider collapsed></x-sider>
+     */
+    collapsed = false;
+    /**
+     * Initial collapsed status.
+     * @example
+     * <x-sider defaultCollapsed></x-sider>
+     */
+    defaultCollapsed = false;
+    /**
+     * Reverse direction of arrow, for a sider that expands from the right.
+     * @example
+     * <x-sider reverseArrow></x-sider>
+     */
+    reverseArrow = false;
+    /**
+     * Color theme of the sidebar.
+     * @example
+     * <x-sider theme="light"></x-sider>
+     */
+    theme = 'dark';
+    /**
+     * Width of the sidebar.
+     * @example
+     * <x-sider width={240}></x-sider>
+     */
+    width = 200;
+    /**
+     * Width of the collapsed sidebar.
+     * @example
+     * <x-sider collapsedWidth={64}></x-sider>
+     */
+    collapsedWidth = 80;
+    /**
+     * Specify the custom trigger, set to null to hide trigger.
+     * @example
+     * <x-sider trigger="Menu"></x-sider>
+     */
+    trigger = undefined;
+    /**
+     * Callback function, executed when the collapsed state is changed.
+     * @example
+     * <x-sider onXCollapse={(ev) => console.log(ev.detail)}></x-sider>
+     */
+    xCollapse;
+    /**
+     * Internal collapsed state synchronized with props.
+     */
+    internalCollapsed = false;
+    /**
+     * Initialize collapsed state from props.
+     * @returns void
+     * @example
+     * <x-sider defaultCollapsed></x-sider>
+     */
+    componentWillLoad() {
+        this.internalCollapsed = this.collapsed || this.defaultCollapsed;
+    }
+    collapsedChanged(newValue) {
+        this.internalCollapsed = newValue;
+    }
+    /**
+     * Toggle collapsed state and emit event.
+     *
+     * Flow:
+     * 1. Inverts `internalCollapsed`.
+     * 2. Updates prop `collapsed`.
+     * 3. Emits `xCollapse` event.
+     *
+     * @returns void
+     * @example
+     * <x-sider collapsible></x-sider>
+     */
+    toggleCollapse = () => {
+        this.internalCollapsed = !this.internalCollapsed;
+        this.collapsed = this.internalCollapsed;
+        this.xCollapse.emit(this.internalCollapsed);
+    };
+    /**
+     * Render sider with optional trigger and collapsed width.
+     *
+     * Flow:
+     * 1. Calculates effective width based on collapsed state.
+     * 2. Constructs CSS classes and styles (flex basis, min/max width).
+     * 3. Renders children content.
+     * 4. Renders trigger button (if collapsible and enabled):
+     *    - Uses custom trigger slot/text if provided.
+     *    - Otherwise renders default arrow icon based on reverseArrow.
+     *
+     * @returns JSX.Element
+     * @example
+     * <x-sider><div>Menu</div></x-sider>
+     */
+    render() {
+        const { collapsible, reverseArrow, theme, width, collapsedWidth, trigger } = this;
+        const collapsed = this.internalCollapsed;
+        const rawWidth = collapsed ? collapsedWidth : width;
+        const siderWidth = typeof rawWidth === 'number' ? `${rawWidth}px` : rawWidth;
+        const classes = {
+            'x-layout-sider': true,
+            [`x-layout-sider-${theme}`]: true,
+            'x-layout-sider-collapsed': collapsed,
+            'x-layout-sider-has-trigger': collapsible && trigger !== null,
+        };
+        const style = {
+            '--x-sider-width': siderWidth,
+            flex: `0 0 ${siderWidth}`,
+            maxWidth: siderWidth,
+            minWidth: siderWidth,
+            width: siderWidth,
+        };
+        const renderTrigger = () => {
+            if (!collapsible || trigger === null) {
+                return null;
+            }
+            if (trigger) {
+                return (h("div", { class: "x-layout-sider-trigger", onClick: this.toggleCollapse, style: { width: siderWidth } }, trigger));
+            }
+            // Default trigger icon (simple arrow)
+            const arrowIcon = collapsed
+                ? (reverseArrow ? '<' : '>')
+                : (reverseArrow ? '>' : '<');
+            return (h("div", { class: "x-layout-sider-trigger", onClick: this.toggleCollapse, style: { width: siderWidth } }, arrowIcon));
+        };
+        return (h(Host, { style: style }, h("aside", { class: classes }, h("div", { class: "x-layout-sider-children" }, h("slot", null)), renderTrigger())));
+    }
+    static get watchers() { return {
+        "collapsed": [{
+                "collapsedChanged": 0
+            }]
+    }; }
+};
+XSider.style = xSiderCss();
+
+const xSpaceCss = () => `@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-space-display, inline-flex);width:100%}.x-space{display:-ms-flexbox;display:flex;-ms-flex-direction:var(--x-space-direction, row);flex-direction:var(--x-space-direction, row);-ms-flex-wrap:var(--x-space-wrap, nowrap);flex-wrap:var(--x-space-wrap, nowrap);-ms-flex-align:var(--x-space-align, center);align-items:var(--x-space-align, center);gap:var(--x-space-gap, var(--x-spacing-xs, 8px));width:100%}`;
+
+const XSpace = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    /**
+     * Align items.
+     * @example
+     * <x-space align="center"></x-space>
+     */
+    align;
+    /**
+     * The space direction.
+     * @example
+     * <x-space direction="vertical"></x-space>
+     */
+    direction = 'horizontal';
+    /**
+     * The space size.
+     * @example
+     * <x-space size="large"></x-space>
+     */
+    size = 'small';
+    /**
+     * Auto wrap line.
+     * @example
+     * <x-space wrap></x-space>
+     */
+    wrap = false;
+    /**
+     * Set block style.
+     * @example
+     * <x-space block></x-space>
+     */
+    block = false;
+    /**
+     * Renders the Space component.
+     *
+     * Flow:
+     * 1. Destructures props: `align`, `direction`, `size`, `wrap`, `block`.
+     * 2. Computes CSS variables:
+     *    - `--x-space-align`: Maps alignment directly.
+     *    - `--x-space-direction`: Maps 'vertical'/'horizontal' to 'column'/'row'.
+     *    - `--x-space-wrap`: Controls flex-wrap.
+     *    - `--x-space-display`: Toggles between flex and inline-flex.
+     * 3. Calculates `gapSize` in pixels based on `size` prop:
+     *    - Supports predefined sizes ('small', 'middle', 'large').
+     *    - Supports explicit number values.
+     *    - (Note: Array format support is currently simplified).
+     * 4. Sets `--x-space-gap` variable.
+     *
+     * @returns JSX.Element - The host element with styling variables.
+     */
+    render() {
+        const { align, direction, size, wrap, block } = this;
+        const style = {};
+        if (align)
+            style['--x-space-align'] = align;
+        style['--x-space-direction'] = direction === 'vertical' ? 'column' : 'row';
+        style['--x-space-wrap'] = wrap ? 'wrap' : 'nowrap';
+        style['--x-space-display'] = block ? 'flex' : 'inline-flex';
+        let gapSize = 8; // small default
+        if (typeof size === 'number') {
+            gapSize = size;
+        }
+        else if (size === 'middle') {
+            gapSize = 16;
+        }
+        else if (size === 'large') {
+            gapSize = 24;
+        }
+        // Handle array size [horizontal, vertical] - simplified for now to just take first or single
+        if (Array.isArray(size)) {
+            // TODO: Handle separate row/col gap
+            gapSize = typeof size[0] === 'number' ? size[0] : 8;
+        }
+        style['--x-space-gap'] = `${gapSize}px`;
+        return (h(Host, { key: '858d52ab60afb1ce6ae25b60bf708d28df10a970', style: style }, h("div", { key: '29a9092cb2b342567ade1d7e49500394dbbc3e93', class: "x-space" }, h("slot", { key: 'd2d088eee3a4c98392003f6c85743f0304848cee' }))));
+    }
+};
+XSpace.style = xSpaceCss();
+
+const xTypographyCss = () => `@charset "UTF-8";:root{--x-color-primary:#1677ff;--x-color-primary-rgb:22, 119, 255;--x-color-primary-contrast:#ffffff;--x-color-primary-contrast-rgb:255, 255, 255;--x-color-primary-shade:#0958d9;--x-color-primary-tint:#4096ff;--x-color-primary-bg:#e6f4ff;--x-color-primary-bg-hover:#bae0ff;--x-color-primary-border:#91caff;--x-color-primary-border-hover:#69b1ff;--x-color-primary-hover:#4096ff;--x-color-primary-active:#0958d9;--x-color-primary-text:#1677ff;--x-color-primary-text-hover:#4096ff;--x-color-primary-text-active:#0958d9;--x-color-secondary:#3dc2ff;--x-color-secondary-rgb:61, 194, 255;--x-color-secondary-contrast:#ffffff;--x-color-secondary-contrast-rgb:255, 255, 255;--x-color-secondary-shade:#36abe0;--x-color-secondary-tint:#50c8ff;--x-color-success:#52c41a;--x-color-success-rgb:82, 196, 26;--x-color-success-contrast:#ffffff;--x-color-success-contrast-rgb:255, 255, 255;--x-color-success-shade:#389e0d;--x-color-success-tint:#73d13d;--x-color-success-bg:#f6ffed;--x-color-success-bg-hover:#d9f7be;--x-color-success-border:#b7eb8f;--x-color-success-border-hover:#95de64;--x-color-success-hover:#73d13d;--x-color-success-active:#389e0d;--x-color-success-text:#52c41a;--x-color-success-text-hover:#73d13d;--x-color-success-text-active:#389e0d;--x-color-warning:#faad14;--x-color-warning-rgb:250, 173, 20;--x-color-warning-contrast:#000000;--x-color-warning-contrast-rgb:0, 0, 0;--x-color-warning-shade:#d48806;--x-color-warning-tint:#ffc53d;--x-color-warning-bg:#fffbe6;--x-color-warning-bg-hover:#fff1b8;--x-color-warning-border:#ffe58f;--x-color-warning-border-hover:#ffd666;--x-color-warning-hover:#ffc53d;--x-color-warning-active:#d48806;--x-color-warning-text:#faad14;--x-color-warning-text-hover:#ffc53d;--x-color-warning-text-active:#d48806;--x-color-danger:#ff4d4f;--x-color-danger-rgb:255, 77, 79;--x-color-danger-contrast:#ffffff;--x-color-danger-contrast-rgb:255, 255, 255;--x-color-danger-shade:#cf1322;--x-color-danger-tint:#ff7875;--x-color-error:#ff4d4f;--x-color-error-rgb:255, 77, 79;--x-color-error-bg:#fff2f0;--x-color-error-bg-hover:#ffccc7;--x-color-error-border:#ffa39e;--x-color-error-border-hover:#ff7875;--x-color-error-hover:#ff7875;--x-color-error-active:#d9363e;--x-color-error-text:#ff4d4f;--x-color-error-text-hover:#ff7875;--x-color-error-text-active:#d9363e;--x-color-info:#1677ff;--x-color-info-rgb:22, 119, 255;--x-color-info-bg:#e6f4ff;--x-color-info-bg-hover:#bae0ff;--x-color-info-border:#91caff;--x-color-info-border-hover:#69b1ff;--x-color-info-hover:#69b1ff;--x-color-info-active:#0958d9;--x-color-info-text:#1677ff;--x-color-info-text-hover:#69b1ff;--x-color-info-text-active:#0958d9;--x-color-text:rgba(0, 0, 0, 0.88);--x-color-text-secondary:rgba(0, 0, 0, 0.65);--x-color-text-tertiary:rgba(0, 0, 0, 0.45);--x-color-text-quaternary:rgba(0, 0, 0, 0.25);--x-color-text-disabled:rgba(0, 0, 0, 0.25);--x-color-text-placeholder:rgba(0, 0, 0, 0.25);--x-color-text-heading:rgba(0, 0, 0, 0.88);--x-color-text-label:rgba(0, 0, 0, 0.65);--x-color-text-description:rgba(0, 0, 0, 0.45);--x-color-text-light-solid:#ffffff;--x-color-bg-container:#ffffff;--x-color-bg-elevated:#ffffff;--x-color-bg-layout:#f5f5f5;--x-color-bg-spotlight:rgba(0, 0, 0, 0.85);--x-color-bg-mask:rgba(0, 0, 0, 0.45);--x-color-bg-base:#ffffff;--x-color-bg-container-disabled:#f5f5f5;--x-color-bg-container-loading:rgba(255, 255, 255, 0.65);--x-color-white:#ffffff;--x-color-fill:rgba(0, 0, 0, 0.15);--x-color-fill-secondary:rgba(0, 0, 0, 0.06);--x-color-fill-tertiary:rgba(0, 0, 0, 0.04);--x-color-fill-quaternary:rgba(0, 0, 0, 0.02);--x-color-border:#d9d9d9;--x-color-border-secondary:#f0f0f0;--x-color-border-bg:#ffffff;--x-color-split:rgba(5, 5, 5, 0.06);--x-color-dark:#222428;--x-color-dark-rgb:34, 36, 40;--x-color-dark-contrast:#ffffff;--x-color-dark-contrast-rgb:255, 255, 255;--x-color-dark-shade:#1e2023;--x-color-dark-tint:#383a3e;--x-color-medium:#92949c;--x-color-medium-rgb:146, 148, 156;--x-color-medium-contrast:#ffffff;--x-color-medium-contrast-rgb:255, 255, 255;--x-color-medium-shade:#808289;--x-color-medium-tint:#9d9fa6;--x-color-light:#f4f5f8;--x-color-light-rgb:244, 245, 248;--x-color-light-contrast:#000000;--x-color-light-contrast-rgb:0, 0, 0;--x-color-light-shade:#d7d8da;--x-color-light-tint:#f5f6f9;--x-font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--x-font-family-code:"SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;--x-font-size:14px;--x-font-size-sm:12px;--x-font-size-lg:16px;--x-font-size-xl:20px;--x-font-size-heading-1:38px;--x-font-size-heading-2:30px;--x-font-size-heading-3:24px;--x-font-size-heading-4:20px;--x-font-size-heading-5:16px;--x-line-height:1.5714285714285714;--x-line-height-lg:1.5;--x-line-height-sm:1.6666666666666667;--x-line-height-heading-1:1.2105263157894737;--x-line-height-heading-2:1.2666666666666666;--x-line-height-heading-3:1.3333333333333333;--x-line-height-heading-4:1.4;--x-line-height-heading-5:1.5;--x-font-weight-normal:400;--x-font-weight-medium:500;--x-font-weight-semibold:600;--x-font-weight-strong:600;--x-font-size-base:14px;--x-font-size-xxl:24px;--x-line-height-base:1.5714285714285714;--x-spacing-xxs:4px;--x-spacing-xs:8px;--x-spacing-sm:12px;--x-spacing-md:16px;--x-spacing-lg:20px;--x-spacing-xl:24px;--x-spacing-xxl:32px;--x-spacing-xxxl:48px;--x-margin-xxs:4px;--x-margin-xs:8px;--x-margin-sm:12px;--x-margin-md:16px;--x-margin-lg:24px;--x-margin-xl:32px;--x-margin-xxl:48px;--x-padding-xxs:4px;--x-padding-xs:8px;--x-padding-sm:12px;--x-padding-md:16px;--x-padding-lg:24px;--x-padding-content-horizontal-lg:24px;--x-padding-content-vertical-lg:12px;--x-padding-content-horizontal:16px;--x-padding-content-vertical:12px;--x-padding-content-horizontal-sm:16px;--x-padding-content-vertical-sm:8px;--x-border-radius:6px;--x-border-radius-xs:2px;--x-border-radius-sm:4px;--x-border-radius-lg:8px;--x-border-radius-xl:12px;--x-border-radius-outer:4px;--x-border-radius-base:6px;--x-border-width:1px;--x-border-width-base:1px;--x-shadow:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-shadow-secondary:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-shadow-tertiary:0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02);--x-shadow-lg:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-secondary:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-tertiary:0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02);--x-box-shadow-popover-arrow:2px 2px 5px rgba(0, 0, 0, 0.05);--x-box-shadow-card:0 1px 2px -2px rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.12), 0 5px 12px 4px rgba(0, 0, 0, 0.09);--x-box-shadow-drawer-right:-6px 0 16px 0 rgba(0, 0, 0, 0.08), -3px 0 6px -4px rgba(0, 0, 0, 0.12), -9px 0 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-drawer-left:6px 0 16px 0 rgba(0, 0, 0, 0.08), 3px 0 6px -4px rgba(0, 0, 0, 0.12), 9px 0 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-drawer-up:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-drawer-down:0 -6px 16px 0 rgba(0, 0, 0, 0.08), 0 -3px 6px -4px rgba(0, 0, 0, 0.12), 0 -9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-tabs-overflow-left:inset 10px 0 8px -8px rgba(0, 0, 0, 0.08);--x-box-shadow-tabs-overflow-right:inset -10px 0 8px -8px rgba(0, 0, 0, 0.08);--x-box-shadow-tabs-overflow-top:inset 0 10px 8px -8px rgba(0, 0, 0, 0.08);--x-box-shadow-tabs-overflow-bottom:inset 0 -10px 8px -8px rgba(0, 0, 0, 0.08);--x-motion-duration-fast:0.1s;--x-motion-duration-mid:0.2s;--x-motion-duration-slow:0.3s;--x-motion-ease-in-out:cubic-bezier(0.645, 0.045, 0.355, 1);--x-motion-ease-out:cubic-bezier(0.215, 0.61, 0.355, 1);--x-motion-ease-in:cubic-bezier(0.55, 0.055, 0.675, 0.19);--x-motion-ease-out-back:cubic-bezier(0.12, 0.4, 0.29, 1.46);--x-motion-ease-in-back:cubic-bezier(0.71, -0.46, 0.88, 0.6);--x-motion-ease-in-out-circle:cubic-bezier(0.78, 0.14, 0.15, 0.86);--x-motion-ease-out-circle:cubic-bezier(0.08, 0.82, 0.17, 1);--x-motion-ease-in-circle:cubic-bezier(0.6, 0.04, 0.98, 0.34);--x-motion-ease-in-quint:cubic-bezier(0.755, 0.05, 0.855, 0.06);--x-motion-ease-out-quint:cubic-bezier(0.23, 1, 0.32, 1);--x-z-index-base:0;--x-z-index-popup-base:1000;--x-z-index-popup:1030;--x-z-index-affix:10;--x-z-index-modal:1000;--x-z-index-modal-mask:1000;--x-z-index-drawer:1000;--x-z-index-popover:1030;--x-z-index-dropdown:1050;--x-z-index-tooltip:1070;--x-z-index-notification:1080;--x-z-index-message:1090;--x-z-index-popconfirm:1060;--x-z-index-table-fixed:10;--x-opacity-loading:0.65;--x-opacity-image:1;--x-opacity-disabled:0.5;--x-control-height:32px;--x-control-height-xs:24px;--x-control-height-sm:24px;--x-control-height-lg:40px;--x-control-radio-size:16px;--x-control-checkbox-size:16px;--x-control-padding-horizontal:12px;--x-control-padding-horizontal-sm:8px;--x-control-outline-width:2px;--x-control-outline:rgba(5, 145, 255, 0.1);--x-control-item-bg-hover:rgba(0, 0, 0, 0.04);--x-control-item-bg-active:#e6f4ff;--x-control-item-bg-active-hover:#bae0ff;--x-control-item-bg-active-disabled:rgba(0, 0, 0, 0.15);--x-control-tmp-outline:rgba(0, 0, 0, 0.02);--x-color-yellow:#fadb14;--x-color-yellow-rgb:250, 219, 20;--x-font-family-base:var(--x-font-family);--x-color-link:#1677ff;--x-color-link-hover:#69b1ff;--x-color-link-active:#0958d9;--x-color-icon:rgba(0, 0, 0, 0.45);--x-color-icon-hover:rgba(0, 0, 0, 0.88);--x-color-highlight:#ff4d4f;--x-color-bg-text-hover:rgba(0, 0, 0, 0.06);--x-color-bg-text-active:rgba(0, 0, 0, 0.15);--x-screen-xs:480px;--x-screen-xs-min:480px;--x-screen-xs-max:575px;--x-screen-sm:576px;--x-screen-sm-min:576px;--x-screen-sm-max:767px;--x-screen-md:768px;--x-screen-md-min:768px;--x-screen-md-max:991px;--x-screen-lg:992px;--x-screen-lg-min:992px;--x-screen-lg-max:1199px;--x-screen-xl:1200px;--x-screen-xl-min:1200px;--x-screen-xl-max:1599px;--x-screen-xxl:1600px;--x-screen-xxl-min:1600px;--x-color-fill-content:rgba(0, 0, 0, 0.06);--x-color-fill-content-hover:rgba(0, 0, 0, 0.15);--x-color-fill-alter:rgba(0, 0, 0, 0.02);--x-scrollbar-width:12px;--x-scrollbar-track-bg:rgba(0, 0, 0, 0.04);--x-scrollbar-thumb-bg:rgba(0, 0, 0, 0.25);--x-scrollbar-thumb-bg-hover:rgba(0, 0, 0, 0.35);--x-menu-dark-bg:#001529;--x-menu-dark-item-bg:#001529;--x-menu-dark-popup-bg:#001529;--x-menu-dark-submenu-item-bg:#000c17}:host{display:block;color:var(--x-typography-color, var(--x-color-text, rgba(0, 0, 0, 0.88)));font-size:var(--x-typography-font-size, var(--x-font-size-base, 14px));line-height:var(--x-typography-line-height, var(--x-line-height-base, 1.5714));word-wrap:break-word}.x-typography{color:var(--x-typography-color, var(--x-color-text, rgba(0, 0, 0, 0.88)))}.x-typography.x-typography-disabled{color:var(--x-typography-color-disabled, var(--x-color-text-disabled, rgba(0, 0, 0, 0.25)));cursor:not-allowed;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}h1,h2,h3,h4,h5{margin-top:var(--x-typography-title-margin-top, 1.2em);margin-bottom:var(--x-typography-title-margin-bottom, 0.5em);font-weight:var(--x-typography-title-font-weight, var(--x-font-weight-semibold, 600));line-height:var(--x-typography-title-line-height, 1.35)}h1{font-size:var(--x-typography-h1-font-size, var(--x-font-size-heading-1, 38px))}h2{font-size:var(--x-typography-h2-font-size, var(--x-font-size-heading-2, 30px))}h3{font-size:var(--x-typography-h3-font-size, var(--x-font-size-heading-3, 24px))}h4{font-size:var(--x-typography-h4-font-size, var(--x-font-size-heading-4, 20px))}h5{font-size:var(--x-typography-h5-font-size, var(--x-font-size-heading-5, 16px))}a.x-typography-link{color:var(--x-typography-link-color, var(--x-color-link, #1677ff));text-decoration:none;outline:none;cursor:pointer;-webkit-transition:color var(--x-typography-motion-duration, var(--x-motion-duration-mid, 0.2s));transition:color var(--x-typography-motion-duration, var(--x-motion-duration-mid, 0.2s))}a.x-typography-link:hover{color:var(--x-typography-link-color-hover, var(--x-color-link-hover, #69b1ff))}a.x-typography-link:active{color:var(--x-typography-link-color-active, var(--x-color-link-active, #0958d9))}mark{background-color:var(--x-typography-mark-bg, var(--x-color-warning-bg, #fffbe6));padding:0}code{margin:0 0.2em;padding:0.2em 0.4em 0.1em;font-size:85%;background:var(--x-typography-code-bg, var(--x-color-fill-tertiary, rgba(0, 0, 0, 0.04)));border:var(--x-typography-code-border-width, var(--x-border-width, 1px)) solid var(--x-typography-code-border-color, var(--x-color-border-secondary, rgba(0, 0, 0, 0.06)));border-radius:var(--x-typography-code-border-radius, var(--x-border-radius-sm, 4px));font-family:var(--x-typography-code-font-family, var(--x-font-family-code, monospace))}kbd{margin:0 0.2em;padding:0.15em 0.4em 0.1em;font-size:90%;background:var(--x-typography-kbd-bg, var(--x-color-fill-quaternary, rgba(0, 0, 0, 0.02)));border:var(--x-typography-kbd-border-width, var(--x-border-width, 1px)) solid var(--x-typography-kbd-border-color, var(--x-color-border-secondary, rgba(0, 0, 0, 0.06)));border-bottom-width:2px;border-radius:var(--x-typography-kbd-border-radius, var(--x-border-radius-sm, 4px));font-family:var(--x-typography-code-font-family, var(--x-font-family-code, monospace))}`;
+
+const XTypography = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    /**
+     * The type of typography.
+     * @example
+     * <x-typography type="title">Title</x-typography>
+     */
+    type = 'text';
+    /**
+     * Level of the title (1-5).
+     * @example
+     * <x-typography type="title" level={2}>H2</x-typography>
+     */
+    level = 1;
+    /**
+     * Disabled state.
+     * @example
+     * <x-typography disabled>Disabled text</x-typography>
+     */
+    disabled = false;
+    /**
+     * Mark text.
+     * @example
+     * <x-typography mark>Highlighted</x-typography>
+     */
+    mark = false;
+    /**
+     * Code style.
+     * @example
+     * <x-typography code>const a = 1;</x-typography>
+     */
+    code = false;
+    /**
+     * Keyboard style.
+     * @example
+     * <x-typography keyboard>Ctrl</x-typography>
+     */
+    keyboard = false;
+    /**
+     * Underline style.
+     * @example
+     * <x-typography underline>Underlined</x-typography>
+     */
+    underline = false;
+    /**
+     * Delete (strikethrough) style.
+     * @example
+     * <x-typography delete>Deleted</x-typography>
+     */
+    delete = false;
+    /**
+     * Strong (bold) style.
+     * @example
+     * <x-typography strong>Bold</x-typography>
+     */
+    strong = false;
+    /**
+     * Italic style.
+     * @example
+     * <x-typography italic>Italic</x-typography>
+     */
+    italic = false;
+    /**
+     * Href for link type.
+     * @example
+     * <x-typography type="link" href="https://example.com">Link</x-typography>
+     */
+    href;
+    /**
+     * Target for link type.
+     * @example
+     * <x-typography type="link" href="https://example.com" target="_blank">Open</x-typography>
+     */
+    target;
+    /**
+     * Render typography element and apply decoration wrappers.
+     *
+     * Flow:
+     * 1. Destructure props to access typography settings.
+     * 2. Determine the HTML tag based on the `type` prop (e.g., h1-h5 for title, div for paragraph, a for link).
+     * 3. Wrap the slot content with decoration tags (mark, code, kbd, u, del, strong, i) if corresponding props are true.
+     * 4. Apply CSS classes for styling and disabled state.
+     * 5. Render the final element with attributes.
+     *
+     * @returns JSX.Element
+     */
+    render() {
+        const { type, level, disabled, mark, code, keyboard, underline, delete: del, strong, italic, href, target } = this;
+        // Base classes for typography element.
+        const classes = {
+            'x-typography': true,
+            [`x-typography-${type}`]: true,
+            'x-typography-disabled': disabled,
+        };
+        // Select tag based on typography type.
+        let Tag = 'span';
+        if (type === 'title') {
+            Tag = `h${level}`;
+        }
+        else if (type === 'paragraph') {
+            Tag = 'div';
+        }
+        else if (type === 'link' || href) {
+            Tag = 'a';
+        }
+        // Default content from slot and apply decoration wrappers.
+        let content = h("slot", { key: '05bce1a95e6eed612afbb8aa4d69b319bb9e1548' });
+        if (mark)
+            content = h("mark", { key: '138b85fd01b2b9e31bb0e5d76451d18da536652c' }, content);
+        if (code)
+            content = h("code", { key: 'c7084c61c1ee5cad8310f55f8de0521dae3e9697' }, content);
+        if (keyboard)
+            content = h("kbd", { key: '571019489e33ad4f777324af357124ba68f44888' }, content);
+        if (underline)
+            content = h("u", { key: '9088854ca72d97b1a5c61eedbcc788ca049de147' }, content);
+        if (del)
+            content = h("del", { key: '3336e3f668cf8fa266668c4f1c220e1473f403ea' }, content);
+        if (strong)
+            content = h("strong", { key: '028028a6c56ff57e8cc20f5ee98a45c6023d7103' }, content);
+        if (italic)
+            content = h("i", { key: '73f02f0cb0c196892a8d83270d5378a25ca16df3' }, content);
+        // Add link attributes only for link types.
+        const attrs = (type === 'link' || href) ? { href, target } : {};
+        return (h(Host, { key: 'be336a90f2f693bbbecff37fffb6e75f40f62a23' }, h(Tag, { key: 'a8e2f60c78077316df7cd3edb7394ec9b55f6b80', class: classes, ...attrs }, content)));
+    }
+};
+XTypography.style = xTypographyCss();
+
+export { XCard as x_card, XCol as x_col, XContent as x_content, XFlex as x_flex, XFooter as x_footer, XHeader as x_header, XLayout as x_layout, XRow as x_row, XSegmented as x_segmented, XSider as x_sider, XSpace as x_space, XTypography as x_typography };