@xlabs-store/core 0.0.1 → 0.0.3

package/dist/collection/components/x-switch/x-switch.css

@@ -96,6 +96,7 @@
   --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;
   /** Background Colors **/
   --x-color-bg-container: #ffffff;
   --x-color-bg-elevated: #ffffff;
@@ -138,8 +139,10 @@
   --x-color-light-shade: #d7d8da;
   --x-color-light-tint: #f5f6f9;
   /** Font Family **/
-  --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-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;
   /** Font Sizes **/
   --x-font-size: 14px;
   --x-font-size-sm: 12px;

package/dist/collection/components/x-switch/x-switch.js

@@ -86,6 +86,9 @@ export class XSwitch {
     handleClick(e) {
         if (this.disabled || this.loading)
             return;
+        if (e && e.stopPropagation) {
+            e.stopPropagation();
+        }
         this.checked = !this.checked;
         this.xChange.emit(this.checked);
         this.xClick.emit(e);
@@ -101,13 +104,13 @@ export class XSwitch {
      * @returns JSX.Element
      */
     render() {
-        return (h(Host, { key: '1503ee5789c9b75305a76eac0e2eece6c2422fa0', class: {
+        return (h(Host, { key: '895b50c1316d559d81dc679d17a2b6f63eb8440c', class: {
                 'x-switch': true,
                 'x-switch-checked': this.checked,
                 'x-switch-disabled': this.disabled,
                 'x-switch-loading': this.loading,
                 'x-switch-small': this.size === 'small',
-            }, onClick: (e) => this.handleClick(e) }, h("div", { key: 'b6ff513a02e20c628773c7424536c59b1e279f40', class: "x-switch-handle" }, this.loading && (h("span", { key: '79ae4f5fe973ef32f912eddcd312016eb7d43113', role: "img", "aria-label": "loading", class: "anticon anticon-loading x-switch-loading-icon" }, h("svg", { key: 'cc4f860e48867197507817752d901e6b4439aed4', viewBox: "0 0 1024 1024", focusable: "false", "data-icon": "loading", width: "1em", height: "1em", fill: "currentColor", "aria-hidden": "true", class: "anticon-spin" }, h("path", { key: '61d09ab8a2b080403e93bafb51e59c1624258097', d: "M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z" }))))), h("span", { key: '6bc8ccdd4d4468eae859ed05618a037fe8c324b9', class: "x-switch-inner" }, this.checked ? this.checkedChildren : this.unCheckedChildren)));
+            }, onClick: e => this.handleClick(e) }, h("div", { key: '73b19d559c68db735626d718105efd26e3c2b85a', class: "x-switch-handle" }, this.loading && (h("span", { key: '1f3ea592e02e19323f01bbe2cb2225bcdfbddd4d', role: "img", "aria-label": "loading", class: "anticon anticon-loading x-switch-loading-icon" }, h("svg", { key: 'ed4efb9d441e66c7d2d7664c7f63b4b20506a82f', viewBox: "0 0 1024 1024", focusable: "false", "data-icon": "loading", width: "1em", height: "1em", fill: "currentColor", "aria-hidden": "true", class: "anticon-spin" }, h("path", { key: '68738cab55720d2a63128152dc2002b56e6ce904', d: "M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z" }))))), h("span", { key: 'd00afee69c0c97fef588e2a476dc41224143c15d', class: "x-switch-inner" }, this.checked ? this.checkedChildren : this.unCheckedChildren)));
     }
     static get is() { return "x-switch"; }
     static get encapsulation() { return "shadow"; }
@@ -311,7 +314,7 @@ export class XSwitch {
         return [{
                 "method": "xChange",
                 "name": "xChange",
-                "bubbles": true,
+                "bubbles": false,
                 "cancelable": true,
                 "composed": true,
                 "docs": {
@@ -329,7 +332,7 @@ export class XSwitch {
             }, {
                 "method": "xClick",
                 "name": "xClick",
-                "bubbles": true,
+                "bubbles": false,
                 "cancelable": true,
                 "composed": true,
                 "docs": {

package/dist/collection/components/x-tab-pane/x-tab-pane.css

@@ -96,6 +96,7 @@
   --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;
   /** Background Colors **/
   --x-color-bg-container: #ffffff;
   --x-color-bg-elevated: #ffffff;
@@ -138,8 +139,10 @@
   --x-color-light-shade: #d7d8da;
   --x-color-light-tint: #f5f6f9;
   /** Font Family **/
-  --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-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;
   /** Font Sizes **/
   --x-font-size: 14px;
   --x-font-size-sm: 12px;

package/dist/collection/components/x-tab-pane/x-tab-pane.js

@@ -13,6 +13,17 @@ export class XTabPane {
      * <x-tab-pane tab="Profile"></x-tab-pane>
      */
     tab;
+    /**
+     * Whether tab is disabled.
+     * @default false
+     */
+    disabled = false;
+    /**
+     * TabPane's key. Alias for tabKey.
+     * @example
+     * <x-tab-pane paneKey="profile"></x-tab-pane>
+     */
+    paneKey;
     /**
      * TabPane's key.
      * @example
@@ -58,11 +69,11 @@ export class XTabPane {
     render() {
         // Only render content when active, forced, or not destroyed.
         const shouldRender = this.active || this.forceRender || !this.destroyInactiveTabPane;
-        return (h(Host, { key: 'b2f8ab4ce9adde5ca8b5af58162a0cba08db1638', class: {
+        return (h(Host, { key: '6e78ace4cb812dd863324993a1c33344891438a5', class: {
                 'x-tab-pane': true,
                 'x-tab-pane-active': this.active,
             }, role: "tabpanel", "aria-hidden": !this.active ? 'true' : 'false', style: {
-                display: this.active ? 'block' : 'none'
+                display: this.active ? 'block' : 'none',
             }, tabindex: this.active ? 0 : -1 }, shouldRender ? h("slot", null) : null));
     }
     static get is() { return "x-tab-pane"; }
@@ -101,6 +112,51 @@ export class XTabPane {
                 "reflect": false,
                 "attribute": "tab"
             },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Whether tab is disabled."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "paneKey": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-tab-pane paneKey=\"profile\"></x-tab-pane>"
+                        }],
+                    "text": "TabPane's key. Alias for tabKey."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "pane-key"
+            },
             "tabKey": {
                 "type": "string",
                 "mutable": false,

package/dist/collection/components/x-table/x-table.css

@@ -96,6 +96,7 @@
   --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;
   /** Background Colors **/
   --x-color-bg-container: #ffffff;
   --x-color-bg-elevated: #ffffff;
@@ -138,8 +139,10 @@
   --x-color-light-shade: #d7d8da;
   --x-color-light-tint: #f5f6f9;
   /** Font Family **/
-  --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-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;
   /** Font Sizes **/
   --x-font-size: 14px;
   --x-font-size-sm: 12px;
@@ -353,6 +356,10 @@
 :host(.x-table-bordered) .x-table-thead > tr > th {
   border-bottom: var(--x-table-border-width, var(--x-border-width, 1px)) solid var(--x-table-border-color, var(--x-color-border-secondary, #f0f0f0));
 }
+:host(.x-table-bordered) .x-table-footer-pagination {
+  border: var(--x-table-border-width, var(--x-border-width, 1px)) solid var(--x-table-border-color, var(--x-color-border-secondary, #f0f0f0));
+  border-top: 0;
+}
 
 :host(.x-table-small) .x-table-thead > tr > th,
 :host(.x-table-small) .x-table-tbody > tr > td {
@@ -372,8 +379,24 @@
 :host(.x-table-sticky) .x-table-thead > tr > th {
   position: sticky;
   top: 0;
-  z-index: 2;
+  z-index: 10;
+  background: var(--x-table-header-bg-solid, var(--x-color-bg-container, #fff));
+}
+:host(.x-table-sticky) .x-table-thead > tr > th::before {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
   background: var(--x-table-header-bg, var(--x-color-fill-quaternary, rgba(0, 0, 0, 0.02)));
+  content: "";
+  z-index: -1;
+}
+:host(.x-table-sticky) .x-table-thead .x-table-cell-fix-left {
+  z-index: 15 !important;
+}
+:host(.x-table-sticky) .x-table-thead .x-table-cell-fix-right {
+  z-index: 16 !important;
 }
 
 .x-table-wrapper {
@@ -427,12 +450,24 @@ table {
 .x-table-tbody > tr:hover > td, .x-table-tbody > tr:hover > x-table-cell {
   background: var(--x-table-row-bg-hover, var(--x-color-fill-quaternary, rgba(0, 0, 0, 0.02)));
 }
+.x-table-tbody > tr:hover > td.x-table-cell-fix-left, .x-table-tbody > tr:hover > td.x-table-cell-fix-right {
+  background: var(--x-table-row-hover-bg-solid, #fafafa) !important;
+}
 .x-table-tbody > tr.x-table-row-selected > td, .x-table-tbody > tr.x-table-row-selected > x-table-cell {
   background: var(--x-table-row-bg-selected, var(--x-color-primary-bg, #e6f4ff));
 }
+.x-table-tbody > tr.x-table-row-selected > td.x-table-cell-fix-left, .x-table-tbody > tr.x-table-row-selected > td.x-table-cell-fix-right {
+  background: var(--x-table-row-selected-bg-solid, #e6f4ff) !important;
+}
 .x-table-tbody > tr.x-table-row-selected:hover > td, .x-table-tbody > tr.x-table-row-selected:hover > x-table-cell {
   background: var(--x-table-row-bg-selected-hover, var(--x-color-primary-bg-hover, #bae0ff));
 }
+.x-table-tbody > tr.x-table-row-selected:hover > td.x-table-cell-fix-left, .x-table-tbody > tr.x-table-row-selected:hover > td.x-table-cell-fix-right {
+  background: var(--x-table-row-selected-hover-bg-solid, #bae0ff) !important;
+}
+.x-table-tbody > tr.x-table-row-clickable {
+  cursor: pointer;
+}
 .x-table-tbody > x-table-row {
   display: table-row;
 }
@@ -443,13 +478,13 @@ table {
   background: var(--x-table-row-bg-selected, var(--x-color-primary-bg, #e6f4ff));
 }
 .x-table-tbody > x-table-row:hover > .x-table-cell-fix-left, .x-table-tbody > x-table-row:hover > .x-table-cell-fix-right {
-  background-color: var(--x-table-row-bg-hover, var(--x-color-fill-quaternary, rgba(0, 0, 0, 0.02))) !important;
+  background-color: var(--x-table-row-hover-bg-solid, #fafafa) !important;
 }
 .x-table-tbody > x-table-row.x-table-row-selected > .x-table-cell-fix-left, .x-table-tbody > x-table-row.x-table-row-selected > .x-table-cell-fix-right {
-  background-color: var(--x-table-row-bg-selected, var(--x-color-primary-bg, #e6f4ff)) !important;
+  background-color: var(--x-table-row-selected-bg-solid, #e6f4ff) !important;
 }
 .x-table-tbody > x-table-row.x-table-row-selected:hover > .x-table-cell-fix-left, .x-table-tbody > x-table-row.x-table-row-selected:hover > .x-table-cell-fix-right {
-  background-color: var(--x-table-row-bg-selected-hover, var(--x-color-primary-bg-hover, #bae0ff)) !important;
+  background-color: var(--x-table-row-selected-hover-bg-solid, #bae0ff) !important;
 }
 
 .x-table-cell {
@@ -457,21 +492,62 @@ table {
   overflow-wrap: break-word;
 }
 .x-table-cell-content {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
   text-overflow: ellipsis;
-  word-break: keep-all;
+  word-break: break-word;
+  white-space: normal;
+  overflow: hidden;
+}
+.x-table-cell-content.x-table-cell-line-clamp {
+  -webkit-line-clamp: var(--x-table-cell-line-clamp, 1);
+}
+.x-table-cell-fix-left {
+  position: sticky !important;
+  z-index: 2;
+  background: var(--x-color-bg-container, #fff);
 }
-.x-table-cell-fix-left, .x-table-cell-fix-right {
+.x-table-cell-fix-right {
   position: sticky !important;
-  z-index: 1;
+  z-index: 3;
   background: var(--x-color-bg-container, #fff);
 }
+.x-table-cell-fix-left-last::after, .x-table-cell-fix-right-first::after {
+  position: absolute;
+  top: 0;
+  bottom: -1px;
+  width: 1px;
+  background: var(--x-table-border-color, var(--x-color-border-secondary, #f0f0f0));
+  content: "";
+  transition: box-shadow 0.3s;
+  pointer-events: none;
+}
+.x-table-cell-fix-left-last::after {
+  right: 0;
+}
+.x-table-cell-fix-right-first::after {
+  left: 0;
+}
+
+.x-table-thead .x-table-cell-fix-left {
+  z-index: 15 !important;
+  background: var(--x-color-bg-container, #fff) !important;
+}
+.x-table-thead .x-table-cell-fix-left::before {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: var(--x-table-header-bg, var(--x-color-fill-quaternary, rgba(0, 0, 0, 0.02)));
+  content: "";
+  z-index: -1;
+}
 
-.x-table-thead .x-table-cell-fix-left,
 .x-table-thead .x-table-cell-fix-right {
-  z-index: 4;
-  background: var(--x-table-header-bg-solid, var(--x-color-bg-container, #fff));
+  z-index: 16 !important;
+  background: var(--x-color-bg-container, #fff) !important;
 }
-.x-table-thead .x-table-cell-fix-left::before,
 .x-table-thead .x-table-cell-fix-right::before {
   position: absolute;
   top: 0;
@@ -557,7 +633,7 @@ table {
 }
 
 .x-table-selection-column {
-  width: 32px;
+  width: var(--x-table-selection-column-width, 32px);
   text-align: center;
 }
 
@@ -587,18 +663,18 @@ table {
 }
 .x-table-checkbox-inner::after {
   position: absolute;
-  top: 50%;
-  left: 22%;
+  top: var(--x-table-selection-checkbox-inner-top, 50%);
+  left: var(--x-table-selection-checkbox-inner-left, 22%);
   display: table;
-  width: 5px;
-  height: 9px;
-  border: 2px solid #fff;
+  width: var(--x-table-selection-checkbox-inner-width, 5px);
+  height: var(--x-table-selection-checkbox-inner-height, 9px);
+  border: var(--x-table-selection-checkbox-inner-border-width, 2px) solid var(--x-table-selection-checkbox-inner-border-color, #fff);
   border-top: 0;
   border-left: 0;
   transform: rotate(45deg) scale(0) translate(-50%, -50%);
   opacity: 0;
   content: "";
-  transition: all 0.1s;
+  transition: all var(--x-table-motion-duration-extreme, 0.1s);
 }
 input:checked + .x-table-checkbox-inner {
   background: var(--x-color-primary, #1677ff);
@@ -626,19 +702,19 @@ input:disabled + .x-table-checkbox-inner {
 }
 .x-table-radio-inner::after {
   position: absolute;
-  top: 50%;
-  left: 50%;
+  top: var(--x-table-selection-radio-inner-top, 50%);
+  left: var(--x-table-selection-radio-inner-left, 50%);
   display: block;
-  width: 8px;
-  height: 8px;
-  margin-top: -4px;
-  margin-left: -4px;
+  width: var(--x-table-selection-radio-inner-size, 8px);
+  height: var(--x-table-selection-radio-inner-size, 8px);
+  margin-top: calc(var(--x-table-selection-radio-inner-size, 8px) / -2);
+  margin-left: calc(var(--x-table-selection-radio-inner-size, 8px) / -2);
   background: var(--x-color-primary, #1677ff);
   border-radius: 50%;
   transform: scale(0);
   opacity: 0;
   content: "";
-  transition: all 0.2s;
+  transition: all var(--x-table-motion-duration-fast, var(--x-motion-duration-fast, 0.2s));
 }
 input:checked + .x-table-radio-inner {
   border-color: var(--x-color-primary, #1677ff);
@@ -653,7 +729,7 @@ input:disabled + .x-table-radio-inner {
 }
 
 .x-table-expand-column {
-  width: 32px;
+  width: var(--x-table-expand-column-width, 32px);
   text-align: center;
 }
 
@@ -661,11 +737,11 @@ input:disabled + .x-table-radio-inner {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 17px;
-  height: 17px;
+  width: var(--x-table-expand-icon-size, 17px);
+  height: var(--x-table-expand-icon-size, 17px);
   padding: 0;
   color: inherit;
-  line-height: 17px;
+  line-height: var(--x-table-expand-icon-size, 17px);
   text-align: center;
   background: var(--x-table-row-bg, transparent);
   border: var(--x-table-border-width, var(--x-border-width, 1px)) solid var(--x-table-border-color, var(--x-color-border-secondary, #f0f0f0));
@@ -675,7 +751,7 @@ input:disabled + .x-table-radio-inner {
   transition: all var(--x-table-motion-duration-fast, var(--x-motion-duration-fast, 0.2s));
 }
 .x-table-row-expand-icon svg {
-  font-size: 10px;
+  font-size: var(--x-table-expand-icon-inner-font-size, 10px);
 }
 .x-table-row-expand-icon:hover {
   color: var(--x-color-primary, #1677ff);
@@ -687,7 +763,7 @@ input:disabled + .x-table-radio-inner {
 }
 
 .x-table-expanded-row > .x-table-expanded-row-cell {
-  background: var(--x-color-fill-quaternary, rgba(0, 0, 0, 0.02));
+  background: var(--x-table-expanded-row-bg, var(--x-color-fill-quaternary, rgba(0, 0, 0, 0.02)));
 }
 
 .x-table-placeholder {
@@ -695,7 +771,7 @@ input:disabled + .x-table-radio-inner {
 }
 
 .x-table-empty {
-  padding: 32px 0;
+  padding: var(--x-table-empty-padding, 32px 0);
   color: var(--x-color-text-disabled, rgba(0, 0, 0, 0.25));
 }
 
@@ -727,9 +803,28 @@ input:disabled + .x-table-radio-inner {
   border-radius: 0 0 var(--x-table-border-radius, var(--x-border-radius, 8px)) var(--x-table-border-radius, var(--x-border-radius, 8px));
 }
 
+.x-table-footer-pagination {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background: var(--x-table-header-bg, var(--x-color-fill-quaternary, rgba(0, 0, 0, 0.02)));
+  border-bottom-left-radius: var(--x-table-border-radius, var(--x-border-radius, 8px));
+  border-bottom-right-radius: var(--x-table-border-radius, var(--x-border-radius, 8px));
+  border-top: var(--x-table-border-width, var(--x-border-width, 1px)) solid var(--x-table-border-color, var(--x-color-border-secondary, #f0f0f0));
+}
+.x-table-footer-pagination .x-table-footer {
+  background: transparent;
+  border-radius: 0;
+}
+.x-table-footer-pagination .x-table-pagination {
+  margin: 0;
+  padding: var(--x-table-pagination-padding, 16px);
+  background: transparent;
+}
+
 .x-table-pagination {
   display: flex;
-  padding: 16px 0;
+  padding: var(--x-table-pagination-margin, 16px 0);
 }
 .x-table-pagination.x-table-pagination-left {
   justify-content: flex-start;
@@ -741,7 +836,7 @@ input:disabled + .x-table-radio-inner {
   justify-content: flex-end;
 }
 .x-table-pagination.x-table-pagination-top {
-  margin-bottom: 16px;
+  margin-bottom: var(--x-table-pagination-padding, 16px);
 }
 
 .x-table-filter-trigger-container {
@@ -779,7 +874,7 @@ input:disabled + .x-table-radio-inner {
   max-height: var(--x-table-filter-menu-max-height, 264px);
   overflow-x: hidden;
   overflow-y: auto;
-  padding: 4px 0;
+  padding: var(--x-table-filter-menu-padding, 4px 0);
   margin: 0;
   list-style: none;
 }
@@ -787,14 +882,15 @@ input:disabled + .x-table-radio-inner {
 .x-table-filter-menu-item {
   display: flex;
   align-items: center;
-  padding: 5px 12px;
+  padding: var(--x-table-filter-menu-item-padding, 5px 12px);
   cursor: pointer;
   transition: all var(--x-table-motion-duration, var(--x-motion-duration-slow, 0.3s));
 }
 .x-table-filter-menu-item:hover {
   background: var(--x-color-fill-tertiary, rgba(0, 0, 0, 0.04));
 }
-.x-table-filter-menu-item > x-checkbox, .x-table-filter-menu-item > x-radio {
+.x-table-filter-menu-item > x-checkbox,
+.x-table-filter-menu-item > x-radio {
   width: 100%;
   pointer-events: none;
 }
@@ -802,7 +898,7 @@ input:disabled + .x-table-radio-inner {
 .x-table-filter-dropdown-btns {
   display: flex;
   justify-content: space-between;
-  padding: 7px 8px;
+  padding: var(--x-table-filter-footer-padding, 7px 8px);
   overflow: hidden;
   border-top: var(--x-table-border-width, var(--x-border-width, 1px)) solid var(--x-table-border-color, var(--x-color-border-secondary, #f0f0f0));
 }
@@ -875,7 +971,7 @@ input:disabled + .x-table-radio-inner {
 }
 
 .x-table-drag-column {
-  width: 32px;
+  width: var(--x-table-selection-column-width, 32px);
   text-align: center;
 }
 
@@ -895,4 +991,54 @@ input:disabled + .x-table-radio-inner {
 }
 .x-table-drag-handle svg {
   font-size: var(--x-table-drag-handle-size, 16px);
+}
+
+.x-table-search-row th {
+  background: var(--x-table-header-bg, #fafafa);
+  border-bottom: var(--x-table-border-width, var(--x-border-width, 1px)) solid var(--x-table-border-color, var(--x-color-border-secondary, #f0f0f0));
+}
+
+.x-table-cell-search {
+  padding: 6px 8px !important;
+}
+
+.x-table-search-input-wrapper {
+  position: relative;
+  width: 100%;
+}
+
+.x-table-search-input {
+  width: 100%;
+  box-sizing: border-box;
+  padding: 5px 8px;
+  font-size: 13px;
+  color: var(--x-text-color, rgba(0, 0, 0, 0.88));
+  background-color: var(--x-color-bg-container, #fff);
+  border: 1px solid var(--x-color-border, #d9d9d9);
+  border-radius: 4px;
+  transition: all 0.3s;
+  outline: none;
+}
+.x-table-search-input:focus {
+  border-color: var(--x-color-primary, #1677ff);
+  box-shadow: 0 0 0 2px rgba(22, 119, 255, 0.2);
+}
+.x-table-search-input::placeholder {
+  color: var(--x-color-text-placeholder, rgba(0, 0, 0, 0.25));
+}
+
+.x-table-search-select {
+  width: 100%;
+  box-sizing: border-box;
+  padding: 5px 8px;
+  font-size: 13px;
+  color: var(--x-text-color, rgba(0, 0, 0, 0.88));
+  background-color: var(--x-color-bg-container, #fff);
+  border: 1px solid var(--x-color-border, #d9d9d9);
+  border-radius: 4px;
+  outline: none;
+  transition: all 0.3s;
+}
+.x-table-search-select:focus {
+  border-color: var(--x-color-primary, #1677ff);
 }