xv-webcomponents 0.1.29 → 0.1.31

package/dist/collection/components/xv-table/xv-table-expand/xv-table-expand.css

@@ -1,116 +1,57 @@
-:host ::slotted(xv-table-v2-header-row[cols="1"]),
-:host ::slotted(xv-table-v2-row[cols="1"]),
-:host ::slotted(xv-table-v2-expand[cols="1"]) {
-  --xv-table-cols: 1;
-}
-:host ::slotted(xv-table-v2-header-row[cols="2"]),
-:host ::slotted(xv-table-v2-row[cols="2"]),
-:host ::slotted(xv-table-v2-expand[cols="2"]) {
-  --xv-table-cols: 2;
-}
-:host ::slotted(xv-table-v2-header-row[cols="3"]),
-:host ::slotted(xv-table-v2-row[cols="3"]),
-:host ::slotted(xv-table-v2-expand[cols="3"]) {
-  --xv-table-cols: 3;
-}
-:host ::slotted(xv-table-v2-header-row[cols="4"]),
-:host ::slotted(xv-table-v2-row[cols="4"]),
-:host ::slotted(xv-table-v2-expand[cols="4"]) {
-  --xv-table-cols: 4;
-}
-:host ::slotted(xv-table-v2-header-row[cols="5"]),
-:host ::slotted(xv-table-v2-row[cols="5"]),
-:host ::slotted(xv-table-v2-expand[cols="5"]) {
-  --xv-table-cols: 5;
-}
-:host ::slotted(xv-table-v2-header-row[cols="6"]),
-:host ::slotted(xv-table-v2-row[cols="6"]),
-:host ::slotted(xv-table-v2-expand[cols="6"]) {
-  --xv-table-cols: 6;
-}
-:host ::slotted(xv-table-v2-header-row[cols="7"]),
-:host ::slotted(xv-table-v2-row[cols="7"]),
-:host ::slotted(xv-table-v2-expand[cols="7"]) {
-  --xv-table-cols: 7;
-}
-:host ::slotted(xv-table-v2-header-row[cols="8"]),
-:host ::slotted(xv-table-v2-row[cols="8"]),
-:host ::slotted(xv-table-v2-expand[cols="8"]) {
-  --xv-table-cols: 8;
-}
-:host ::slotted(xv-table-v2-header-row[cols="9"]),
-:host ::slotted(xv-table-v2-row[cols="9"]),
-:host ::slotted(xv-table-v2-expand[cols="9"]) {
-  --xv-table-cols: 9;
-}
-:host ::slotted(xv-table-v2-header-row[cols="10"]),
-:host ::slotted(xv-table-v2-row[cols="10"]),
-:host ::slotted(xv-table-v2-expand[cols="10"]) {
-  --xv-table-cols: 10;
-}
-:host ::slotted(xv-table-v2-header-row[cols="11"]),
-:host ::slotted(xv-table-v2-row[cols="11"]),
-:host ::slotted(xv-table-v2-expand[cols="11"]) {
-  --xv-table-cols: 11;
-}
-:host ::slotted(xv-table-v2-header-row[cols="12"]),
-:host ::slotted(xv-table-v2-row[cols="12"]),
-:host ::slotted(xv-table-v2-expand[cols="12"]) {
-  --xv-table-cols: 12;
-}
-:host ::slotted(xv-table-v2-header-row[cols="13"]),
-:host ::slotted(xv-table-v2-row[cols="13"]),
-:host ::slotted(xv-table-v2-expand[cols="13"]) {
-  --xv-table-cols: 13;
-}
-:host ::slotted(xv-table-v2-header-row[cols="14"]),
-:host ::slotted(xv-table-v2-row[cols="14"]),
-:host ::slotted(xv-table-v2-expand[cols="14"]) {
-  --xv-table-cols: 14;
-}
-:host ::slotted(xv-table-v2-header-row[cols="15"]),
-:host ::slotted(xv-table-v2-row[cols="15"]),
-:host ::slotted(xv-table-v2-expand[cols="15"]) {
-  --xv-table-cols: 15;
-}
-:host ::slotted(xv-table-v2-header-row[cols="16"]),
-:host ::slotted(xv-table-v2-row[cols="16"]),
-:host ::slotted(xv-table-v2-expand[cols="16"]) {
-  --xv-table-cols: 16;
-}
-:host ::slotted(xv-table-v2-header-row[cols="17"]),
-:host ::slotted(xv-table-v2-row[cols="17"]),
-:host ::slotted(xv-table-v2-expand[cols="17"]) {
-  --xv-table-cols: 17;
-}
-:host ::slotted(xv-table-v2-header-row[cols="18"]),
-:host ::slotted(xv-table-v2-row[cols="18"]),
-:host ::slotted(xv-table-v2-expand[cols="18"]) {
-  --xv-table-cols: 18;
-}
-:host ::slotted(xv-table-v2-header-row[cols="19"]),
-:host ::slotted(xv-table-v2-row[cols="19"]),
-:host ::slotted(xv-table-v2-expand[cols="19"]) {
-  --xv-table-cols: 19;
-}
-:host ::slotted(xv-table-v2-header-row[cols="20"]),
-:host ::slotted(xv-table-v2-row[cols="20"]),
-:host ::slotted(xv-table-v2-expand[cols="20"]) {
-  --xv-table-cols: 20;
-}
-
-:host(xv-table-v2-expand) ::slotted(xv-table-v2-row) {
-  block-size: auto;
+:host {
+  display: block;
+  position: relative;
+  transition: 0.25s ease-in-out background-color;
+}
+:host .expand-btn {
+  z-index: 9;
+  position: absolute;
+  left: max(10px, var(--xv-table-padding-x));
+  top: max(2px, var(--xv-table-padding-y) + 2px);
+  background-color: transparent;
+  cursor: pointer;
+  outline: none;
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  display: block;
+  width: 8.5px;
+  height: 8.5px;
+  border-top: none;
+  border-left: none;
+  border-right: 2px solid var(--icon-primary, #333);
+  border-bottom: 2px solid var(--icon-primary, #333);
+  transform: rotate(45deg);
+  transform-origin: center center;
+  transition: 0.2s ease-in-out transform;
+}
+:host .expand-btn:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+:host .expand-btn.open {
+  transform: rotate(-135deg);
+}
+:host .expandableContent {
   overflow: hidden;
-  grid-template-columns: var(--xv-table-first-col-size, 0) repeat(var(--xv-table-cols, 1), 1fr);
-}
-
-:host(xv-table-v2-expand:not([expanded])) ::slotted(xv-table-v2-row:not(:first-of-type)) {
-  padding-top: 0;
-  padding-bottom: 0;
-  block-size: 0;
-}
-
-:host(xv-table-v2-expand[expanded]) ::slotted(xv-table-v2-row:not(:first-of-type)) {
-  block-size: auto;
+  margin: 0;
+  padding: 0;
+  max-height: 0;
+  transition: 250ms ease max-height;
+}
+:host .expandableContent.open {
+  max-height: 600px;
+}
+:host ::slotted([slot=expandable]) {
+  display: grid;
+  align-items: center;
+}
+:host ::slotted(xv-table-v2-row),
+:host ::slotted([slot=expandable]) {
+  padding-inline-start: calc(max(10px, var(--xv-table-padding-x)) * 2 + 10px);
+}
+:host ::slotted([disabled]) {
+  opacity: 0.4;
+  cursor: not-allowed;
+  user-select: none;
 }

package/dist/collection/components/xv-table/xv-table-expand/xv-table-expand.js

@@ -1,104 +1,19 @@
-import { h, Host } from "@stencil/core";
-import { TABLE_TAG } from "../defs";
-import { debounce, forEach, uidGenerator } from "../../../utils/utils";
+import { Host, h } from "@stencil/core";
+import { XV_EXPANDABLE_KEY } from "../_vars";
+import { setAttr } from "../../../utils/utils";
 export class XvTableExpand {
     constructor() {
-        this.expanded = false;
-        this.cols = 1;
-        this.hovered = false;
-        this.checkedGroup = new Map();
-        this.selectedRows = new Set();
-        // Expand group ID
-        this.groupId = uidGenerator();
-        this.setExpandAttrs = (expanded) => {
-            forEach(this.el.children, (row, i) => {
-                // set group id
-                this.setAttr(row, 'group-id', this.groupId);
-                // If it's Main selection row
-                if (!i) {
-                    this.setAttr(row, 'expandable', true);
-                    this.setAttr(row, 'expanded', expanded);
-                    return;
-                }
-            });
+        this.open = false;
+        this.disabled = false;
+        this.handleExpand = () => {
+            this.open = !this.open;
         };
-        this.onSlotChange = () => {
-            this.cols = this.el.firstElementChild.childElementCount;
-            this.setExpandAttrs(this.expanded);
-        };
-        this.emitChangeSelectionEvent = debounce(() => {
-            var _a, _b;
-            return this.checkedChange.emit(Object.assign(Object.assign({ name: ((_a = this.mainRowData) === null || _a === void 0 ? void 0 : _a.name) || this.el.firstElementChild.getAttribute('selection-name') }, (this.mainRowData || {})), { checked: !!this.selectedRows.size, group: Object.assign(Object.assign({ id: this.groupId }, (((_b = this.mainRowData) === null || _b === void 0 ? void 0 : _b.group) || {})), { data: Array.from(this.selectedRows.values()) }) }));
-        }, 100);
-        this.handleCheckedChange = (e) => {
-            const { group, checked, name } = e.detail;
-            if ((group === null || group === void 0 ? void 0 : group.id) !== this.groupId)
-                return;
-            if (group === null || group === void 0 ? void 0 : group.isMainRow) {
-                this.mainRowData = e.detail;
-                // clear group selection
-                if (!checked)
-                    this.selectedRows.clear();
-                // Change all group except first row
-                forEach(this.el.children, (row, i) => {
-                    if (!i || row.hasAttribute('disabled'))
-                        return;
-                    this.setAttr(row, 'checked', checked);
-                });
-            }
-            else {
-                if (checked) {
-                    this.selectedRows.add(e.detail);
-                }
-                else {
-                    this.selectedRows
-                        .forEach(item => item.name === name && this.selectedRows.delete(item));
-                }
-            }
-            const isNoSelected = !this.selectedRows.size;
-            const isAllSelected = this.selectedRows.size == this.el.childElementCount - 1;
-            const isPartialSelected = !isNoSelected && (this.selectedRows.size < this.el.childElementCount - 1);
-            if (isAllSelected) {
-                this.setAttr(this.el.firstElementChild, 'checked', true);
-            }
-            else if (isNoSelected) {
-                this.setAttr(this.el.firstElementChild, 'checked', false);
-            }
-            this.setAttr(this.el.firstElementChild, 'partial', isPartialSelected);
-            this.emitChangeSelectionEvent();
-        };
-    }
-    async toggleExpand(expanded) {
-        this.expanded = !!expanded;
-    }
-    setAttr(node, name, value) {
-        if (typeof value === 'string') {
-            !node.hasAttribute(name) && node.setAttribute(name, value);
-            return;
-        }
-        if (value) {
-            !node.hasAttribute(name) && node.setAttribute(name, '');
-        }
-        else {
-            node.hasAttribute(name) && node.removeAttribute(name);
-        }
-    }
-    setInitialExpandStatus() {
-        const table = this.el.parentElement;
-        if (table.tagName === TABLE_TAG.TABLE)
-            this.setAttr(table, 'expandable', true);
     }
     render() {
-        return (h(Host, { key: '3e6cfb2feacf723e53db6b256ae0adf1e2a93032', role: "rowgroup", cols: this.cols, expanded: this.expanded, hovered: this.hovered }, h("slot", { key: '56082d65ca6f46eb064383b203b51265ae699b8c', onSlotchange: this.onSlotChange })));
+        return (h(Host, { key: '03fe6f6aeccdd968034eb8ca2f927ef47e7864d8' }, h("button", { key: 'c6fd847183f1ce75de771c1138de6ed058f555b2', class: { 'expand-btn': true, open: this.open }, disabled: this.disabled, onClick: this.handleExpand }), h("slot", { key: '4d7d466275d3cb55552d5b7df60e28bbe75cb058', name: XV_EXPANDABLE_KEY }), h("div", { key: '5fdaa8095fc4cd05ce98549228200a739dadc2a3', class: { expandableContent: true, open: this.open } }, h("slot", { key: '3c04cf53d2a7c3989a4511f3d407e8e0e7597a7e' }))));
     }
-    componentWillLoad() {
-        this.setInitialExpandStatus();
-    }
-    connectedCallback() {
-        this.el.childNodes.forEach(row => row.addEventListener('checkedGroupChange', this.handleCheckedChange));
-    }
-    disconnectedCallback() {
-        this.el.childNodes.forEach(row => row.removeEventListener('checkedGroupChange', this.handleCheckedChange));
+    componentDidLoad() {
+        setAttr(this.el.parentElement, XV_EXPANDABLE_KEY, true);
     }
     static get is() { return "xv-table-v2-expand"; }
     static get encapsulation() { return "shadow"; }
@@ -114,7 +29,7 @@ export class XvTableExpand {
     }
     static get properties() {
         return {
-            "expanded": {
+            "open": {
                 "type": "boolean",
                 "mutable": true,
                 "complexType": {
@@ -130,67 +45,29 @@ export class XvTableExpand {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "expanded",
+                "attribute": "open",
                 "reflect": true,
                 "defaultValue": "false"
-            }
-        };
-    }
-    static get states() {
-        return {
-            "cols": {},
-            "hovered": {},
-            "checkedGroup": {},
-            "selectedRows": {},
-            "mainRowData": {}
-        };
-    }
-    static get events() {
-        return [{
-                "method": "checkedChange",
-                "name": "checkedChange",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": ""
                 },
-                "complexType": {
-                    "original": "TableSelectionEventData",
-                    "resolved": "{ name: string; checked: boolean; value?: string; group?: { isMainRow?: boolean; id: string; data?: TableSelectionEventData[]; }; }",
-                    "references": {
-                        "TableSelectionEventData": {
-                            "location": "import",
-                            "path": "../defs",
-                            "id": "src/components/xv-table/defs.ts::TableSelectionEventData"
-                        }
-                    }
-                }
-            }];
-    }
-    static get methods() {
-        return {
-            "toggleExpand": {
-                "complexType": {
-                    "signature": "(expanded: boolean) => Promise<void>",
-                    "parameters": [{
-                            "name": "expanded",
-                            "type": "boolean",
-                            "docs": ""
-                        }],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "",
-                    "tags": []
-                }
+                "getter": false,
+                "setter": false,
+                "attribute": "disabled",
+                "reflect": true,
+                "defaultValue": "false"
             }
         };
     }

package/dist/collection/components/xv-table/xv-table-expand/xv-table-expand.js.map

@@ -1 +1 @@
-{"version":3,"file":"xv-table-expand.js","sourceRoot":"","sources":["../../../../src/components/xv-table/xv-table-expand/xv-table-expand.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State } from '@stencil/core';\nimport { TABLE_TAG, TableSelectionEvent, TableSelectionEventData } from '../defs';\nimport { debounce, forEach, uidGenerator } from '../../../utils/utils';\n\n@Component({\n  tag: 'xv-table-v2-expand',\n  styleUrl: 'xv-table-expand.scss',\n  shadow: true,\n})\nexport class XvTableExpand {\n  @Element() el: HTMLElement;\n\n  @Prop({ reflect: true, mutable: true }) expanded: boolean = false;\n\n  @State() cols: number = 1;\n  @State() hovered: boolean = false;\n  @State() checkedGroup: Map<string, any> = new Map();\n  @State() selectedRows = new Set<TableSelectionEventData>();\n  @State() mainRowData: TableSelectionEventData;\n\n  @Event() checkedChange: EventEmitter<TableSelectionEventData>;\n\n  // Expand group ID\n  private groupId: string = uidGenerator();\n\n  @Method()\n  async toggleExpand(expanded: boolean) {\n    this.expanded = !!expanded;\n  }\n\n  private setAttr(node: Element, name: string, value: string | boolean) {\n    if (typeof value === 'string') {\n      !node.hasAttribute(name) && node.setAttribute(name, value);\n      return;\n    }\n\n    if (value) {\n      !node.hasAttribute(name) && node.setAttribute(name, '');\n    } else {\n      node.hasAttribute(name) && node.removeAttribute(name);\n    }\n  }\n\n  private setExpandAttrs = (expanded: boolean) => {\n    forEach(this.el.children, (row, i) => {\n      // set group id\n      this.setAttr(row, 'group-id', this.groupId);\n\n      // If it's Main selection row\n      if (!i) {\n        this.setAttr(row, 'expandable', true);\n        this.setAttr(row, 'expanded', expanded);\n        return;\n      }\n    });\n  }\n\n  private onSlotChange = () => {\n    this.cols = this.el.firstElementChild.childElementCount;\n    this.setExpandAttrs(this.expanded);\n  }\n\n  private setInitialExpandStatus() {\n    const table = this.el.parentElement;\n\n    if (table.tagName === TABLE_TAG.TABLE) this.setAttr(table, 'expandable', true);\n  }\n\n  private emitChangeSelectionEvent = debounce(() => this.checkedChange.emit({\n    name: this.mainRowData?.name || this.el.firstElementChild.getAttribute('selection-name'),\n    ...(this.mainRowData || {}),\n    checked: !!this.selectedRows.size,\n    group: {\n      id: this.groupId,\n      ...(this.mainRowData?.group || {}),\n      data: Array.from(this.selectedRows.values()),\n    }\n  }), 100);\n\n  private handleCheckedChange = (e: TableSelectionEvent) => {\n    const { group, checked, name } = e.detail;\n\n    if (group?.id !== this.groupId) return;\n\n    if (group?.isMainRow) {\n      this.mainRowData = e.detail;\n      // clear group selection\n      if (!checked) this.selectedRows.clear();\n      // Change all group except first row\n      forEach(this.el.children, (row, i) => {\n        if (!i || row.hasAttribute('disabled')) return;\n        this.setAttr(row, 'checked', checked);\n      })\n    } else {\n      if (checked) {\n        this.selectedRows.add(e.detail);\n      } else {\n        this.selectedRows\n          .forEach(item => item.name === name && this.selectedRows.delete(item));\n      }\n    }\n\n    const isNoSelected = !this.selectedRows.size;\n    const isAllSelected = this.selectedRows.size == this.el.childElementCount - 1;\n    const isPartialSelected = !isNoSelected && (this.selectedRows.size < this.el.childElementCount - 1);\n\n    if (isAllSelected) {\n      this.setAttr(this.el.firstElementChild, 'checked', true);\n    } else if (isNoSelected) {\n      this.setAttr(this.el.firstElementChild, 'checked', false);\n    }\n\n    this.setAttr(this.el.firstElementChild, 'partial', isPartialSelected);\n\n    this.emitChangeSelectionEvent();\n  };\n\n  render() {\n    return (\n      <Host\n        role=\"rowgroup\"\n        cols={this.cols}\n        expanded={this.expanded}\n        hovered={this.hovered}\n      >\n        <slot onSlotchange={this.onSlotChange} />\n      </Host>\n    );\n  }\n\n  componentWillLoad() {\n    this.setInitialExpandStatus();\n  }\n\n  connectedCallback() {\n    this.el.childNodes.forEach(row => row.addEventListener('checkedGroupChange', this.handleCheckedChange));\n  }\n\n  disconnectedCallback() {\n    this.el.childNodes.forEach(row => row.removeEventListener('checkedGroupChange', this.handleCheckedChange));\n  }\n}\n"]}
+{"version":3,"file":"xv-table-expand.js","sourceRoot":"","sources":["../../../../src/components/xv-table/xv-table-expand/xv-table-expand.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAClE,OAAO,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAO/C,MAAM,OAAO,aAAa;IAL1B;QAO0C,SAAI,GAAY,KAAK,CAAC;QACrC,aAAQ,GAAY,KAAK,CAAC;QAE3C,iBAAY,GAAG,GAAG,EAAE;YAC1B,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;QACzB,CAAC,CAAC;KAoBH;IAlBC,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,+DACE,KAAK,EAAE,EAAE,YAAY,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,EAC9C,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,YAAY,GAC1B;YACF,6DAAM,IAAI,EAAE,iBAAiB,GAAI;YAEjC,4DAAK,KAAK,EAAE,EAAE,iBAAiB,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE;gBAAE,8DAAQ,CAAM,CACnE,CACR,CAAC;IACJ,CAAC;IAED,gBAAgB;QACd,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,aAAa,EAAE,iBAAiB,EAAE,IAAI,CAAC,CAAC;IAC1D,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Element, Prop } from '@stencil/core';\nimport { XV_EXPANDABLE_KEY } from '../_vars';\nimport { setAttr } from '../../../utils/utils';\n\n@Component({\n  tag: 'xv-table-v2-expand',\n  styleUrl: 'xv-table-expand.scss',\n  shadow: true,\n})\nexport class XvTableExpand {\n  @Element() el: HTMLElement;\n  @Prop({ reflect: true, mutable: true }) open: boolean = false;\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  private handleExpand = () => {\n    this.open = !this.open;\n  };\n\n  render() {\n    return (\n      <Host>\n        <button\n          class={{ 'expand-btn': true, open: this.open }}\n          disabled={this.disabled}\n          onClick={this.handleExpand}\n        />\n        <slot name={XV_EXPANDABLE_KEY} />\n\n        <div class={{ expandableContent: true, open: this.open }}><slot /></div>\n      </Host>\n    );\n  }\n\n  componentDidLoad() {\n    setAttr(this.el.parentElement, XV_EXPANDABLE_KEY, true);\n  }\n}\n"]}

package/dist/collection/components/xv-table/xv-table-row/xv-table-row.css

@@ -1,46 +1,32 @@
-:host(xv-table-v2-row) {
+:host {
   display: grid;
   align-items: center;
-  transition: height 0.15s cubic-bezier(0.2, 0, 0.38, 0.9), padding 0.15s ease-in-out, background-color 0.2ms ease-in-out;
-  background-color: var(--xv-table-row-bg-color);
-  box-shadow: 0 0 0 1px #E3E3E3 inset;
-  padding-top: var(--xv-table-padding, 16px);
-  padding-bottom: var(--xv-table-padding, 16px);
-  grid-template-columns: var(--xv-table-first-col-size, 0) repeat(var(--xv-table-cols, 1), 1fr);
+  grid-template-columns: var(--xv-table-cols-template, repeat(auto-fit, minmax(0, 1fr)));
+  border-bottom: 1px solid #E3E3E3;
+  transition: 0.25s ease-in-out background-color;
 }
-:host(xv-table-v2-row) .left-container {
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  gap: 16px;
-  padding: 0 16px;
+:host .cell-control {
+  min-height: 20px;
 }
-:host(xv-table-v2-row) .expand-btn {
-  outline: none;
-  background-color: transparent;
-  display: block;
-  margin: 0 auto;
-  border: solid var(--icon-primary, #131313);
-  border-width: 0 1px 1px 0;
-  padding: 3px;
-  transform: rotate(45deg);
-  cursor: pointer;
-  transition: opacity 300ms ease-in-out, transform 200ms ease-in-out;
+
+:host([variant]) {
+  grid-template-columns: minmax(47.97px, min-content) var(--xv-table-cols-template, repeat(auto-fit, minmax(0, 1fr)));
 }
-:host(xv-table-v2-row) .expand-btn:active {
-  opacity: 0.5;
+
+:host([hover]:not([header]):hover) {
+  background-color: var(--layer-hover-01, #E9E9E9);
 }
-:host(xv-table-v2-row) .expand-btn.expanded {
-  margin-top: 4px;
-  transform: rotate(225deg);
+
+:host([checked]) {
+  background-color: var(--layer-selected-01, #E3E3E3);
 }
 
-:host([disabled]) {
-  opacity: 0.4;
-  pointer-events: none;
-  cursor: not-allowed;
+:host([checked]:hover) {
+  background-color: var(--layer-selected-hover-01, #DADADA);
 }
-:host([disabled]) ::slotted(xv-table-v2-col) {
-  cursor: not-allowed;
+
+:host([header]) {
+  background-color: var(--layer-accent-01, #F7F7F7);
+  box-shadow: 0 0 0 1px #E3E3E3 inset;
+  border-bottom: none;
 }