@xlabs-store/core 0.0.1 → 0.0.2

package/dist/esm/x-layout-admin.entry.js

@@ -0,0 +1,43 @@
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-BMTt8QT3.js';
+
+const xLayoutAdminCss = () => `@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-text-processing:#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:row;flex-direction:row;width:100%;height:100%;--x-layout-bg:var(--x-admin-bg-color, var(--x-color-bg-layout, #f5f5f5))}.x-layout-admin-container{-ms-flex:1;flex:1;width:100%;background:var(--x-admin-bg-color, var(--x-color-bg-layout, #f5f5f5))}.x-admin-sider{background-color:var(--x-admin-sider-bg, var(--x-color-bg-container, #ffffff));border-right:1px solid var(--x-color-border, #e8e8e8);-webkit-box-shadow:var(--x-admin-sider-shadow, 2px 0 8px 0 rgba(29, 35, 41, 0.05));box-shadow:var(--x-admin-sider-shadow, 2px 0 8px 0 rgba(29, 35, 41, 0.05));z-index:var(--x-admin-sider-z-index, 10)}.x-admin-sider .x-admin-logo-wrapper{height:var(--x-admin-header-height, 64px);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;overflow:hidden;white-space:nowrap;border-bottom:1px solid var(--x-color-border, #e8e8e8);-webkit-transition:all var(--x-admin-motion-duration, var(--x-motion-duration-mid, 0.3s)) var(--x-admin-motion-timing, ease);transition:all var(--x-admin-motion-duration, var(--x-motion-duration-mid, 0.3s)) var(--x-admin-motion-timing, ease)}.x-admin-header{height:var(--x-admin-header-height, 64px);background:var(--x-admin-header-bg, var(--x-color-bg-container, #ffffff));padding:0 var(--x-admin-header-padding-horizontal, 16px);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-shadow:var(--x-admin-header-shadow, 0 1px 4px rgba(0, 21, 41, 0.08));box-shadow:var(--x-admin-header-shadow, 0 1px 4px rgba(0, 21, 41, 0.08));z-index:var(--x-admin-header-z-index, 9);position:relative}.x-admin-header .x-admin-header-left{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.x-admin-header .x-admin-header-right{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.x-admin-header .x-admin-collapse-btn{cursor:pointer;font-size:20px;margin-right:var(--x-admin-collapse-btn-margin, 16px);padding:4px;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;-webkit-transition:color var(--x-admin-motion-duration, var(--x-motion-duration-mid, 0.3s)) var(--x-admin-motion-timing, ease);transition:color var(--x-admin-motion-duration, var(--x-motion-duration-mid, 0.3s)) var(--x-admin-motion-timing, ease)}.x-admin-header .x-admin-collapse-btn:hover{color:var(--x-color-primary, #1890ff)}.x-admin-content-wrapper{padding:var(--x-admin-content-padding, 24px);overflow:auto;-ms-flex:1;flex:1}.x-admin-footer{text-align:center;color:var(--x-color-text-secondary, rgba(0, 0, 0, 0.45))}`;
+
+const XLayoutAdmin = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.xCollapse = createEvent(this, "xCollapse", 7);
+    }
+    /**
+     * Initial collapsed state of the sider.
+     */
+    collapsed = false;
+    /**
+     * Sider width in pixels when expanded.
+     */
+    siderWidth = 250;
+    /**
+     * Sider width in pixels when collapsed.
+     */
+    siderCollapsedWidth = 80;
+    /**
+     * Event emitted when collapse state changes.
+     */
+    xCollapse;
+    toggleCollapse = () => {
+        this.collapsed = !this.collapsed;
+        this.xCollapse.emit({ collapsed: this.collapsed });
+    };
+    render() {
+        return (h(Host, { key: '43d48185760a429957e08afdd7ddfdf20d399292' }, h("x-layout", { key: '799a2c10761b951687c35a59c2d85bb7b0c08b7e', class: "x-layout-admin-container", hasSiderProp: true }, h("x-sider", { key: '4138a4fb487893513171fa088c88f0f6227c270a', class: "x-admin-sider", width: this.siderWidth, collapsedWidth: this.siderCollapsedWidth, collapsed: this.collapsed, collapsible: false }, h("div", { key: '7c04a73cce5efafe6c38c2da1738adfcbb2c7269', class: "x-admin-logo-wrapper", style: {
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: this.collapsed ? 'center' : 'space-between',
+                padding: this.collapsed ? '0' : '0 16px',
+                boxSizing: 'border-box',
+                width: '100%',
+            } }, h("div", { key: '88bfd595483ef3a95b07bbfe44faa0644b0fb51c', class: "x-admin-logo-content", style: { overflow: 'hidden', whiteSpace: 'nowrap', display: this.collapsed ? 'none' : 'block' } }, h("slot", { key: 'afc50dbd8c1ebb173fc42b8a400e9ade44fd5447', name: "logo" })), h("div", { key: '49bf78ab476caa8dbc3c135dad2d3477e5b9cdda', class: "x-admin-collapse-trigger", onClick: this.toggleCollapse, style: { cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '4px', borderRadius: '4px', background: '#f0f0f0' } }, h("svg", { key: 'e75d4bd8017e18ac86e715238f4036ca2e43971c', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "20", height: "20", stroke: "#000", "stroke-width": "2", fill: "none", "stroke-linecap": "round", "stroke-linejoin": "round" }, this.collapsed ? h("path", { d: "M4 6h16M4 12h16M4 18h16" }) : h("path", { d: "M4 6h16M4 12h16M4 18h16" })))), h("slot", { key: 'e35b0587531dea09734e26e6b253af988ee9c8e7', name: "sider" })), h("x-layout", { key: '78fa29304d0b9c0726e8bc879995aafca5415fe7', fixed: false }, h("header", { key: 'a7b39db41c445e589c3b81e770c2f49fbde7efd7', class: "x-admin-header", style: { display: 'block', height: '64px', width: '100%', background: '#fff', borderBottom: '1px solid #f0f0f0', color: '#000' } }, h("div", { key: '94641e0e36014a4589243c546f96bb987b461a17', class: "x-admin-header-container", style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', width: '100%', height: '100%', padding: '0 16px', boxSizing: 'border-box' } }, h("div", { key: '24edcfeac2a87931a395906d60ad442164edc278', class: "x-admin-header-left", style: { display: 'flex', alignItems: 'center' } }, h("slot", { key: '10f1df8db566b87546f7636759b5575974d5faa9', name: "header-left" })), h("div", { key: 'f3babff81467d906bca49464ae5aa453daf50bde', class: "x-admin-header-right", style: { display: 'flex', alignItems: 'center' } }, h("slot", { key: 'f7e10b331f7bff492977fc5efcdd9a6b369e822c', name: "header-right" }), h("slot", { key: '71b21f1dcef65e80f54d8e4b97429c4b4c56f4af', name: "header" })))), h("x-content", { key: 'fb10f615d09daa4dbccb8f74c94d6275e045e5f0', class: "x-admin-content-wrapper" }, h("slot", { key: '7f3c367226bd60e476d58fb9cc5ec7890d99339e' })), h("x-footer", { key: 'a7db6951797b69bb9557480c50badccc338f90d8', class: "x-admin-footer" }, h("slot", { key: '3c39ec6d69a1258eaba65cc73bbe84d5a8c46c4f', name: "footer" }))))));
+    }
+};
+XLayoutAdmin.style = xLayoutAdminCss();
+
+export { XLayoutAdmin as x_layout_admin };

package/dist/esm/x-layout-detail.entry.js

@@ -0,0 +1,143 @@
+import { r as registerInstance, a as getElement, h, H as Host } from './index-BMTt8QT3.js';
+
+const xLayoutDetailCss = () => `@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-text-processing:#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-detail-bg, var(--x-color-bg-container, #ffffff));padding:var(--x-detail-padding, 24px);border-radius:var(--x-detail-border-radius, var(--x-border-radius-lg, 8px));-webkit-box-sizing:border-box;box-sizing:border-box;width:100%}:host *,:host *::before,:host *::after{-webkit-box-sizing:border-box;box-sizing:border-box}.x-layout-detail-container.x-layout-detail-bordered{border:1px solid var(--x-detail-border-color, var(--x-color-border-secondary, #f0f0f0));padding:var(--x-detail-padding, 24px);border-radius:var(--x-detail-border-radius, var(--x-border-radius-lg, 8px))}.x-layout-detail-breadcrumb{margin-bottom:var(--x-detail-breadcrumb-margin-bottom, 12px)}.x-layout-detail-breadcrumb.has-divider{padding-bottom:12px;border-bottom:1px solid var(--x-detail-border-color, var(--x-color-border-secondary, #f0f0f0));margin-bottom:16px}.x-layout-detail-header{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;margin-bottom:var(--x-detail-header-margin-bottom, 24px)}.x-layout-detail-title{color:var(--x-detail-title-color, #8c0c16);font-size:var(--x-detail-title-font-size, var(--x-font-size-heading-3, 24px));font-weight:500;margin:0;padding:0}.x-layout-detail-grid{display:grid;grid-template-columns:repeat(var(--grid-columns, 3), 1fr);gap:var(--grid-gap, 16px);width:100%}.x-layout-detail-item{display:-ms-flexbox;display:flex;font-size:var(--x-detail-font-size, var(--x-font-size-base, 14px));line-height:var(--x-detail-line-height, var(--x-line-height-base, 1.5))}.x-layout-detail-item .x-layout-detail-label{color:var(--x-detail-label-color, var(--x-color-text-secondary, #8c8c8c));-ms-flex-negative:0;flex-shrink:0}.x-layout-detail-item .x-layout-detail-label::after{content:":";margin-left:2px}.x-layout-detail-item .x-layout-detail-value{color:var(--x-detail-value-color, var(--x-color-text, #262626));word-break:break-all;-ms-flex-positive:1;flex-grow:1}.x-layout-detail-item.align-left .x-layout-detail-value{text-align:left}.x-layout-detail-item.align-center .x-layout-detail-value{text-align:center}.x-layout-detail-item.align-right .x-layout-detail-value{text-align:right}.layout-horizontal .x-layout-detail-item{-ms-flex-direction:row;flex-direction:row;-ms-flex-align:start;align-items:flex-start}.layout-horizontal .x-layout-detail-item .x-layout-detail-label{width:var(--label-width, var(--x-detail-label-width, 150px));margin-right:8px}.layout-vertical .x-layout-detail-item{-ms-flex-direction:column;flex-direction:column;-ms-flex-align:stretch;align-items:stretch}.layout-vertical .x-layout-detail-item .x-layout-detail-label{width:100%;margin-bottom:4px}.layout-vertical .x-layout-detail-item .x-layout-detail-label::after{display:none}.layout-vertical .x-layout-detail-item .x-layout-detail-value{font-weight:500}.x-layout-detail-empty{padding:48px 0;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;width:100%;color:var(--x-detail-empty-color, var(--x-color-text-placeholder, #bfbfbf))}.x-layout-detail-empty .empty-content{text-align:center}.x-layout-detail-empty .empty-content .icon-empty{font-size:var(--x-detail-empty-font-size, 40px);margin-bottom:8px;display:block;font-style:normal}.x-layout-detail-empty .empty-content p{margin:0;font-size:var(--x-detail-font-size, var(--x-font-size-base, 14px))}.x-layout-detail-footer{margin-top:var(--x-detail-footer-margin-top, 32px);padding-top:var(--x-detail-footer-padding-top, 16px);border-top:1px solid var(--x-detail-border-color, var(--x-color-border-secondary, #f0f0f0));display:-ms-flexbox;display:flex;-ms-flex-pack:end;justify-content:flex-end;gap:var(--x-detail-footer-gap, 8px)}@media screen and (max-width: 768px){.x-layout-detail-grid{grid-template-columns:1fr !important}.x-layout-detail-item{grid-column:span 1 !important}.layout-horizontal .x-layout-detail-item{-ms-flex-direction:column;flex-direction:column}.layout-horizontal .x-layout-detail-item .x-layout-detail-label{width:100%;margin-bottom:4px}}`;
+
+const XLayoutDetail = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    get el() { return getElement(this); }
+    /**
+     * Title of the detail section
+     */
+    detailTitle;
+    /**
+     * Custom color for the title
+     */
+    titleColor;
+    /**
+     * Border around the container
+     */
+    bordered = false;
+    /**
+     * Data as a plain object from backend { key: value }
+     */
+    data = {};
+    /**
+     * UI Configuration (Schema).
+     * The 'fields' property defines which keys to display and in what order.
+     */
+    config = {};
+    /**
+     * Auto hide fields with empty values (null, undefined, '')
+     */
+    hideEmpty = true;
+    /**
+     * Text to display when there is no data or no visible fields
+     */
+    emptyText = 'No data';
+    get parsedData() {
+        if (typeof this.data === 'string') {
+            try {
+                return JSON.parse(this.data);
+            }
+            catch (e) {
+                console.error('[x-layout-detail] Failed to parse data string', e);
+                return {};
+            }
+        }
+        return this.data || {};
+    }
+    get parsedConfig() {
+        const defaultConfig = {
+            layout: 'horizontal',
+            columns: 3,
+            gap: 16,
+            labelWidth: '150px',
+            align: 'left',
+            colon: true,
+            fields: {},
+        };
+        let configObj = {};
+        if (typeof this.config === 'string') {
+            try {
+                configObj = JSON.parse(this.config);
+            }
+            catch (e) {
+                console.error('[x-layout-detail] Failed to parse config string', e);
+            }
+        }
+        else {
+            configObj = this.config || {};
+        }
+        return { ...defaultConfig, ...configObj };
+    }
+    // Helper: camelCase to Title Case
+    toLabel(key) {
+        const result = key.replace(/([A-Z])/g, ' $1');
+        return result.charAt(0).toUpperCase() + result.slice(1);
+    }
+    isHidden(value, schema, data) {
+        if (schema.hidden === true)
+            return true;
+        if (typeof schema.hidden === 'function')
+            return schema.hidden(value, data);
+        if (this.hideEmpty) {
+            if (value === null || value === undefined || value === '') {
+                return true;
+            }
+        }
+        return false;
+    }
+    formatValue(value, schema, data) {
+        if (schema.formatter) {
+            return schema.formatter(value, data);
+        }
+        return value !== null && value !== undefined && value !== '' ? value : '-';
+    }
+    render() {
+        const config = this.parsedConfig;
+        const data = this.parsedData;
+        const hasBreadcrumb = !!this.el.querySelector('[slot="breadcrumb"]');
+        const hasFooter = !!this.el.querySelector('[slot="footer"]');
+        const hasExtra = !!this.el.querySelector('[slot="extra"]');
+        const gridStyles = {
+            '--grid-columns': String(config.columns),
+            '--grid-gap': `${config.gap}px`,
+            '--label-width': config.labelWidth,
+        };
+        // Determine fields to display: prioritizes config.fields keys
+        const fieldKeys = config.fields && Object.keys(config.fields).length > 0 ? Object.keys(config.fields) : Object.keys(data);
+        const visibleFields = fieldKeys
+            .map(key => ({
+            key,
+            value: data[key],
+            schema: (config.fields && config.fields[key]) || {},
+        }))
+            .filter(f => !this.isHidden(f.value, f.schema, data));
+        const isEmpty = visibleFields.length === 0;
+        return (h(Host, { key: '1496b60244f8ee2c92a7729aa6e3938289728e22' }, h("div", { key: 'bf9afb29f1d8299c9cf4e1a5c04925c8d4e7ac5d', class: {
+                'x-layout-detail-container': true,
+                'x-layout-detail-bordered': this.bordered,
+                'is-empty': isEmpty,
+                [`layout-${config.layout}`]: true,
+            }, style: gridStyles }, h("div", { key: '2c1f4080866dcb0154ef94c002214edffc9a6e5e', class: {
+                'x-layout-detail-breadcrumb': true,
+                'has-divider': hasBreadcrumb,
+            } }, h("slot", { key: '555ea1802d162425b3b274b909510e3a12ac725b', name: "breadcrumb" })), (this.detailTitle || hasExtra) && (h("div", { key: 'dfcb3cea3da0878ecdd583f419779988b2ceaaf3', class: "x-layout-detail-header" }, this.detailTitle && (h("h2", { key: 'cf18d8bbb1d95374bd6adca3a3d6b792e34d166a', class: "x-layout-detail-title", style: this.titleColor ? { '--x-detail-title-color': this.titleColor } : {} }, this.detailTitle)), hasExtra && (h("div", { key: '47c5bb294c27076657f710e7a48b980fd8ab3ec2', class: "x-layout-detail-extra" }, h("slot", { key: '9e6b659710b5bf26cdde9f621568d51d13c5cca5', name: "extra" }))))), isEmpty ? (h("div", { class: "x-layout-detail-empty" }, h("slot", { name: "empty" }, h("div", { class: "empty-content" }, h("i", { class: "icon-empty" }, "\uD83D\uDCED"), h("p", null, this.emptyText))))) : (h("div", { class: "x-layout-detail-grid" }, visibleFields.map(f => {
+            const displayValue = this.formatValue(f.value, f.schema, data);
+            const colSpan = Math.min(f.schema.colSpan || 1, config.columns || 1);
+            const itemAlign = f.schema.align || config.align || 'left';
+            const labelText = f.schema.label || this.toLabel(f.key);
+            const showColon = config.colon !== false;
+            return (h("div", { class: {
+                    'x-layout-detail-item': true,
+                    [`align-${itemAlign}`]: true,
+                    [f.schema.className]: !!f.schema.className,
+                }, style: { 'grid-column': `span ${colSpan}` } }, h("div", { class: "x-layout-detail-label", style: f.schema.labelStyle }, h("span", { class: "label-text" }, labelText), f.schema.tooltip && (h("span", { class: "tooltip-trigger", title: f.schema.tooltip }, h("i", { class: "icon-info" }, "\u24D8"))), showColon && h("span", { class: "colon" }, ":")), h("div", { class: "x-layout-detail-value", style: f.schema.valueStyle }, f.schema.slot ? (h("slot", { name: f.key }, f.schema.prefix, displayValue, f.schema.suffix)) : ([f.schema.prefix, displayValue, f.schema.suffix]))));
+        }))), hasFooter && (h("div", { key: '4c5e8cbf0fc37338de28434e6b19f60f874590ea', class: "x-layout-detail-footer" }, h("slot", { key: 'e9b7d9d502daf080073c01bd0e46370aaa7d37ae', name: "footer" }))))));
+    }
+};
+XLayoutDetail.style = xLayoutDetailCss();
+
+export { XLayoutDetail as x_layout_detail };

package/dist/esm/x-layout-list.entry.js

@@ -0,0 +1,257 @@
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-BMTt8QT3.js';
+
+const xLayoutListCss = () => `: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-text-processing:#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;width:100%;height:100%;-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}.xll-root{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;width:100%;height:100%;overflow:hidden;background:var(--x-color-bg-layout, #f5f5f5)}.xll-header{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-negative:0;flex-shrink:0;height:64px;padding:0 24px;background:var(--x-color-bg-container, #ffffff);border-bottom:1px solid var(--x-color-border-secondary, #f0f0f0);-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.08);box-shadow:0 1px 4px rgba(0, 0, 0, 0.08);z-index:10}.xll-header-title{font-size:18px;font-weight:600;color:var(--x-color-text, rgba(0, 0, 0, 0.88));margin:0}.xll-header-actions{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:8px}.xll-body{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;overflow:hidden}.xll-sider{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-negative:0;flex-shrink:0;width:220px;background:var(--x-color-bg-container, #ffffff);border-right:1px solid var(--x-color-border-secondary, #f0f0f0);overflow:hidden;-webkit-transition:width 0.2s ease;transition:width 0.2s ease;position:relative}.xll-sider--collapsed{width:80px}.xll-sider--dark{background:#001529;border-right-color:rgba(255, 255, 255, 0.1)}.xll-sider--dark .xll-sider-logo-title{color:#fff}.xll-sider-logo{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:12px;height:64px;padding:0 16px;border-bottom:1px solid var(--x-color-border-secondary, f0f0f0);overflow:hidden;-ms-flex-negative:0;flex-shrink:0}.xll-sider-logo img{width:32px;height:32px;-o-object-fit:contain;object-fit:contain;-ms-flex-negative:0;flex-shrink:0;border-radius:6px}.xll-sider-logo-title{font-size:16px;font-weight:700;color:var(--x-color-text, rgba(0, 0, 0, 0.88));white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:1;-webkit-transition:opacity 0.2s ease;transition:opacity 0.2s ease}.xll-sider--collapsed .xll-sider-logo-title{opacity:0;width:0}.xll-sider-menu-wrap{-ms-flex:1;flex:1;overflow-y:auto;overflow-x:hidden}.xll-sider-collapse-trigger{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;-ms-flex-negative:0;flex-shrink:0;height:40px;cursor:pointer;border-top:1px solid var(--x-color-border-secondary, #f0f0f0);background:var(--x-color-bg-container, #ffffff);color:var(--x-color-text-secondary, rgba(0, 0, 0, 0.45));font-size:16px;-webkit-transition:background-color 0.2s ease;transition:background-color 0.2s ease}.xll-sider-collapse-trigger:hover{background:var(--x-color-bg-text-hover, rgba(0, 0, 0, 0.04));color:var(--x-color-text, rgba(0, 0, 0, 0.88))}.xll-content{-ms-flex:1;flex:1;overflow-y:auto;padding:24px;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:0;min-width:0}.xll-toolbar{background:var(--x-color-bg-container, #ffffff);border-radius:8px 8px 0 0;padding:16px 24px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:8px;border-bottom:1px solid var(--x-color-border-secondary, #f0f0f0)}.xll-toolbar-left{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:4px}.xll-toolbar-title{font-size:18px;font-weight:600;color:var(--x-color-text, rgba(0, 0, 0, 0.88));margin:0;line-height:1.4}.xll-toolbar-actions{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:8px;-ms-flex-negative:0;flex-shrink:0}.xll-list-wrap{background:var(--x-color-bg-container, #ffffff);-ms-flex:1;flex:1}.xll-pagination{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:end;justify-content:flex-end;padding:16px 24px;background:var(--x-color-bg-container, #ffffff);border-top:1px solid var(--x-color-border-secondary, #f0f0f0);border-radius:0 0 8px 8px;-ms-flex-negative:0;flex-shrink:0}.xll-footer{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;-ms-flex-negative:0;flex-shrink:0;height:48px;padding:0 24px;background:var(--x-color-bg-container, #ffffff);border-top:1px solid var(--x-color-border-secondary, #f0f0f0);color:var(--x-color-text-secondary, rgba(0, 0, 0, 0.45));font-size:14px}`;
+
+const DEFAULT_HEADER = {
+    title: 'My Application',
+    sticky: true,
+    height: 64,
+};
+const DEFAULT_FOOTER = {
+    text: '',
+    show: false,
+};
+const DEFAULT_SIDER = {
+    show: true,
+    width: 220,
+    collapsedWidth: 80,
+    defaultCollapsed: false,
+    theme: 'light',
+    title: '',
+    logo: '',
+};
+const DEFAULT_CONTENT = {
+    breadcrumbs: [],
+    title: '',
+    loading: false,
+};
+const XLayoutList = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.xMenuSelect = createEvent(this, "xMenuSelect", 7);
+        this.xPageChange = createEvent(this, "xPageChange", 7);
+    }
+    // ========================================
+    // PROPS — HEADER
+    // ========================================
+    /**
+     * Header configuration object (title, sticky, height).
+     */
+    headerConfig = {};
+    // ========================================
+    // PROPS — FOOTER
+    // ========================================
+    /**
+     * Footer configuration object (text, show).
+     */
+    footerConfig = {};
+    // ========================================
+    // PROPS — SIDER
+    // ========================================
+    /**
+     * Sider (sidebar menu) configuration object.
+     */
+    siderConfig = {};
+    /**
+     * Array of menu items to render in the sider.
+     * @example
+     * [{ key: 'home', label: 'Home', icon: 'home' }]
+     */
+    menuItems = [];
+    /**
+     * Currently selected menu key (controlled).
+     */
+    selectedMenuKey;
+    /**
+     * Currently expanded submenu keys (controlled).
+     */
+    openMenuKeys;
+    // ========================================
+    // PROPS — CONTENT
+    // ========================================
+    /**
+     * Content configuration object (breadcrumbs, title, loading).
+     */
+    contentConfig = {};
+    // ========================================
+    // PROPS — PAGINATION
+    // ========================================
+    /**
+     * Total number of items in the list.
+     */
+    total = 0;
+    /**
+     * Current page number (controlled).
+     */
+    current = 1;
+    /**
+     * Number of items per page.
+     */
+    pageSize = 10;
+    /**
+     * Whether to show page size changer.
+     */
+    showSizeChanger;
+    /**
+     * Options for page size selector.
+     */
+    pageSizeOptions = [10, 20, 50, 100];
+    /**
+     * Whether to hide pagination when there is only one page.
+     */
+    hideOnSinglePage = true;
+    // ========================================
+    // STATE
+    // ========================================
+    collapsed = false;
+    // ========================================
+    // EVENTS
+    // ========================================
+    /**
+     * Emitted when a menu item is clicked/selected.
+     * @example
+     * <x-layout-list (xMenuSelect)="onMenuSelect($event)">
+     */
+    xMenuSelect;
+    /**
+     * Emitted when page or page size changes.
+     * @example
+     * <x-layout-list (xPageChange)="onPageChange($event)">
+     */
+    xPageChange;
+    // ========================================
+    // LIFECYCLE
+    // ========================================
+    componentWillLoad() {
+        this.collapsed = this.sider.defaultCollapsed;
+    }
+    // ========================================
+    // WATCHERS
+    // ========================================
+    onSiderConfigChange() {
+        // keep collapsed in sync if defaultCollapsed changes externally
+    }
+    // ========================================
+    // HELPERS
+    // ========================================
+    get header() {
+        return { ...DEFAULT_HEADER, ...this.headerConfig };
+    }
+    get footer() {
+        return { ...DEFAULT_FOOTER, ...this.footerConfig };
+    }
+    get sider() {
+        return { ...DEFAULT_SIDER, ...this.siderConfig };
+    }
+    get content() {
+        return { ...DEFAULT_CONTENT, ...this.contentConfig };
+    }
+    // ========================================
+    // HANDLERS
+    // ========================================
+    handleCollapseToggle = () => {
+        this.collapsed = !this.collapsed;
+    };
+    handleMenuSelect = (ev) => {
+        const key = ev.detail?.key;
+        if (!key)
+            return;
+        this.selectedMenuKey = key;
+        const found = this.findMenuItem(this.menuItems, key);
+        this.xMenuSelect.emit({ key, item: found });
+    };
+    handlePageChange = (ev) => {
+        const { current, pageSize } = ev.detail;
+        this.current = current;
+        this.pageSize = pageSize;
+        this.xPageChange.emit({ current, pageSize });
+    };
+    findMenuItem(items, key) {
+        for (const item of items) {
+            if (item.key === key)
+                return item;
+            if (item.children) {
+                const found = this.findMenuItem(item.children, key);
+                if (found)
+                    return found;
+            }
+        }
+        return undefined;
+    }
+    // ========================================
+    // RENDER HELPERS
+    // ========================================
+    renderHeader() {
+        const cfg = this.header;
+        return (h("div", { class: "xll-header" }, h("div", { class: "xll-header-left" }, h("slot", { name: "header-logo" }, h("div", { class: "xll-header-title" }, cfg.title))), h("div", { class: "xll-header-center" }, h("slot", { name: "header-center" })), h("div", { class: "xll-header-actions" }, h("slot", { name: "header-actions" }))));
+    }
+    renderSiderLogo() {
+        const cfg = this.sider;
+        const showLogo = cfg.logo || cfg.title;
+        if (!showLogo)
+            return null;
+        return (h("div", { class: "xll-sider-logo" }, h("slot", { name: "sider-logo" }, cfg.logo && h("img", { src: cfg.logo, alt: cfg.title }), h("span", { class: "xll-sider-logo-title" }, cfg.title))));
+    }
+    renderMenuItems(items, level = 0) {
+        return items.map(item => {
+            if (item.children && item.children.length > 0) {
+                return (h("x-menu-submenu", { "item-key": item.key, disabled: item.disabled }, item.icon && h("x-icon", { slot: "icon", name: item.icon }), h("span", { slot: "title" }, item.label), this.renderMenuItems(item.children, level + 1)));
+            }
+            return (h("x-menu-item", { "item-key": item.key, disabled: item.disabled }, item.icon && h("x-icon", { slot: "icon", name: item.icon }), item.label));
+        });
+    }
+    renderSider() {
+        const cfg = this.sider;
+        if (!cfg.show)
+            return null;
+        const isDark = cfg.theme === 'dark';
+        return (h("div", { class: {
+                'xll-sider': true,
+                'xll-sider--collapsed': this.collapsed,
+                'xll-sider--dark': isDark,
+            } }, this.renderSiderLogo(), h("slot", { name: "sider-menu-before" }), h("div", { class: "xll-sider-menu-wrap" }, h("x-menu", { mode: "inline", theme: cfg.theme, "inline-collapsed": this.collapsed, "selected-keys": this.selectedMenuKey ? [this.selectedMenuKey] : undefined, "open-keys": this.openMenuKeys, onXSelect: this.handleMenuSelect }, this.renderMenuItems(this.menuItems))), h("slot", { name: "sider-menu-after" }), h("div", { class: "xll-sider-collapse-trigger", onClick: this.handleCollapseToggle, title: this.collapsed ? 'Expand' : 'Collapse' }, h("slot", { name: "sider-collapse-trigger" }, h("x-icon", { name: this.collapsed ? 'menu_open' : 'menu' })))));
+    }
+    renderBreadcrumb(items) {
+        if (!items || items.length === 0)
+            return null;
+        return (h("x-breadcrumb", null, items.map(item => (h("x-breadcrumb-item", { href: item.href }, item.label)))));
+    }
+    renderToolbar() {
+        const cfg = this.content;
+        const hasBreadcrumb = cfg.breadcrumbs && cfg.breadcrumbs.length > 0;
+        const hasTitle = !!cfg.title;
+        if (!hasBreadcrumb && !hasTitle) {
+            return (h("div", { class: "xll-toolbar" }, h("div", { class: "xll-toolbar-left" }, h("slot", { name: "toolbar-extra" })), h("div", { class: "xll-toolbar-actions" }, h("slot", { name: "toolbar-actions" }))));
+        }
+        return (h("div", { class: "xll-toolbar" }, h("div", { class: "xll-toolbar-left" }, h("slot", { name: "toolbar-breadcrumb" }, hasBreadcrumb && this.renderBreadcrumb(cfg.breadcrumbs)), h("slot", { name: "toolbar-title" }, hasTitle && h("h2", { class: "xll-toolbar-title" }, cfg.title)), h("slot", { name: "toolbar-extra" })), h("div", { class: "xll-toolbar-actions" }, h("slot", { name: "toolbar-actions" }))));
+    }
+    renderPagination() {
+        const totalPages = Math.ceil(this.total / this.pageSize);
+        if (this.hideOnSinglePage && totalPages <= 1)
+            return null;
+        if (this.total <= 0)
+            return null;
+        return (h("div", { class: "xll-pagination" }, h("slot", { name: "pagination-before" }), h("x-pagination", { total: this.total, current: this.current, pageSize: this.pageSize, showSizeChanger: this.showSizeChanger, pageSizeOptions: this.pageSizeOptions, hideOnSinglePage: this.hideOnSinglePage, onXChange: this.handlePageChange }), h("slot", { name: "pagination-after" })));
+    }
+    renderFooter() {
+        const cfg = this.footer;
+        if (!cfg.show)
+            return null;
+        return (h("div", { class: "xll-footer" }, h("slot", { name: "footer" }, cfg.text)));
+    }
+    // ========================================
+    // MAIN RENDER
+    // ========================================
+    render() {
+        const cfg = this.content;
+        return (h(Host, { key: '538439f32386c2147e13bba1306bab3cf43d6090' }, h("div", { key: '7181281c43156112a3e9ee035792695b4483fca9', class: "xll-root" }, this.renderHeader(), h("div", { key: '17bc7dc266f732204fcbe8343aa64357de5bdfe3', class: "xll-body" }, this.renderSider(), h("main", { key: '3cde0e9d00589eb314a19476f6fc24cfbe872db3', class: "xll-content" }, this.renderToolbar(), h("slot", { key: 'f2d48c64b7cce47fdc96e10ec0b2fba994ba95eb', name: "content-before" }), h("div", { key: '0dcc464984971a5c2c7f6cf3b6de838bd360dfed', class: "xll-list-wrap" }, h("x-list", { key: '03d4791e3364c8d6976480a8eb2cf1da7f8a39f5', loading: cfg.loading, bordered: false, split: true }, h("slot", { key: 'cb13b6db5034c2f366378a21b0fced191647d43a', name: "list-items" }))), h("slot", { key: '7942cb1a61320a7fd14c51e8e0bcf331f2dd7d58', name: "content-after" }), this.renderPagination())), this.renderFooter())));
+    }
+    static get watchers() { return {
+        "siderConfig": [{
+                "onSiderConfigChange": 0
+            }]
+    }; }
+};
+XLayoutList.style = xLayoutListCss();
+
+export { XLayoutList as x_layout_list };

package/dist/esm/x-list-item.entry.js

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