wcs-core 2.5.4 → 2.6.0

package/dist/collection/components/button/button.css

@@ -25,14 +25,6 @@
     opacity: 0;
   }
 }
-.mdc-ripple-surface--test-edge-var-bug {
-  --mdc-ripple-surface-test-edge-var: 1px solid #000;
-  visibility: hidden;
-}
-.mdc-ripple-surface--test-edge-var-bug::before {
-  border: var(--mdc-ripple-surface-test-edge-var);
-}
-
 .mdc-ripple-surface {
   --mdc-ripple-fg-size: 0;
   --mdc-ripple-left: 0;
@@ -46,6 +38,7 @@
   outline: none;
   overflow: hidden;
 }
+
 .mdc-ripple-surface::before, .mdc-ripple-surface::after {
   position: absolute;
   border-radius: 50%;
@@ -53,135 +46,128 @@
   pointer-events: none;
   content: "";
 }
+
 .mdc-ripple-surface::before {
   transition: opacity 15ms linear, background-color 15ms linear;
   z-index: 1;
+  /* @alternate */
+  z-index: var(--mdc-ripple-z-index, 1);
+}
+
+.mdc-ripple-surface::after {
+  z-index: 0;
+  /* @alternate */
+  z-index: var(--mdc-ripple-z-index, 0);
 }
+
 .mdc-ripple-surface.mdc-ripple-upgraded::before {
   transform: scale(var(--mdc-ripple-fg-scale, 1));
 }
+
 .mdc-ripple-surface.mdc-ripple-upgraded::after {
   top: 0;
   /* @noflip */
+  /*rtl:ignore*/
   left: 0;
   transform: scale(0);
   transform-origin: center center;
 }
+
 .mdc-ripple-surface.mdc-ripple-upgraded--unbounded::after {
   top: var(--mdc-ripple-top, 0);
   /* @noflip */
+  /*rtl:ignore*/
   left: var(--mdc-ripple-left, 0);
 }
+
 .mdc-ripple-surface.mdc-ripple-upgraded--foreground-activation::after {
   animation: mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards;
 }
+
 .mdc-ripple-surface.mdc-ripple-upgraded--foreground-deactivation::after {
   animation: mdc-ripple-fg-opacity-out 150ms;
   transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
 }
-.mdc-ripple-surface::before, .mdc-ripple-surface::after {
-  background-color: #000;
-}
-.mdc-ripple-surface:hover::before {
-  opacity: 0.04;
-}
-.mdc-ripple-surface:not(.mdc-ripple-upgraded):focus::before, .mdc-ripple-surface.mdc-ripple-upgraded--background-focused::before {
-  transition-duration: 75ms;
-  opacity: 0.12;
-}
-.mdc-ripple-surface:not(.mdc-ripple-upgraded)::after {
-  transition: opacity 150ms linear;
-}
-.mdc-ripple-surface:not(.mdc-ripple-upgraded):active::after {
-  transition-duration: 75ms;
-  opacity: 0.12;
-}
-.mdc-ripple-surface.mdc-ripple-upgraded {
-  --mdc-ripple-fg-opacity: 0.12;
-}
+
 .mdc-ripple-surface::before, .mdc-ripple-surface::after {
   top: calc(50% - 100%);
   /* @noflip */
+  /*rtl:ignore*/
   left: calc(50% - 100%);
   width: 200%;
   height: 200%;
 }
+
 .mdc-ripple-surface.mdc-ripple-upgraded::after {
   width: var(--mdc-ripple-fg-size, 100%);
   height: var(--mdc-ripple-fg-size, 100%);
 }
-.mdc-ripple-surface[data-mdc-ripple-is-unbounded] {
+
+.mdc-ripple-surface[data-mdc-ripple-is-unbounded],
+.mdc-ripple-upgraded--unbounded {
   overflow: visible;
 }
-.mdc-ripple-surface[data-mdc-ripple-is-unbounded]::before, .mdc-ripple-surface[data-mdc-ripple-is-unbounded]::after {
+
+.mdc-ripple-surface[data-mdc-ripple-is-unbounded]::before, .mdc-ripple-surface[data-mdc-ripple-is-unbounded]::after,
+.mdc-ripple-upgraded--unbounded::before,
+.mdc-ripple-upgraded--unbounded::after {
   top: calc(50% - 50%);
   /* @noflip */
+  /*rtl:ignore*/
   left: calc(50% - 50%);
   width: 100%;
   height: 100%;
 }
-.mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::before, .mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::after {
+
+.mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::before, .mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::after,
+.mdc-ripple-upgraded--unbounded.mdc-ripple-upgraded::before,
+.mdc-ripple-upgraded--unbounded.mdc-ripple-upgraded::after {
   top: var(--mdc-ripple-top, calc(50% - 50%));
   /* @noflip */
+  /*rtl:ignore*/
   left: var(--mdc-ripple-left, calc(50% - 50%));
   width: var(--mdc-ripple-fg-size, 100%);
   height: var(--mdc-ripple-fg-size, 100%);
 }
-.mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::after {
+
+.mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::after,
+.mdc-ripple-upgraded--unbounded.mdc-ripple-upgraded::after {
   width: var(--mdc-ripple-fg-size, 100%);
   height: var(--mdc-ripple-fg-size, 100%);
 }
-.mdc-ripple-surface--primary::before, .mdc-ripple-surface--primary::after {
-  background-color: #6200ee;
-}
-@supports not (-ms-ime-align: auto) {
-  .mdc-ripple-surface--primary::before, .mdc-ripple-surface--primary::after {
-    /* @alternate */
-    background-color: var(--mdc-theme-primary, #6200ee);
-  }
-}
-.mdc-ripple-surface--primary:hover::before {
-  opacity: 0.04;
-}
-.mdc-ripple-surface--primary:not(.mdc-ripple-upgraded):focus::before, .mdc-ripple-surface--primary.mdc-ripple-upgraded--background-focused::before {
-  transition-duration: 75ms;
-  opacity: 0.12;
-}
-.mdc-ripple-surface--primary:not(.mdc-ripple-upgraded)::after {
-  transition: opacity 150ms linear;
-}
-.mdc-ripple-surface--primary:not(.mdc-ripple-upgraded):active::after {
-  transition-duration: 75ms;
-  opacity: 0.12;
-}
-.mdc-ripple-surface--primary.mdc-ripple-upgraded {
-  --mdc-ripple-fg-opacity: 0.12;
-}
-.mdc-ripple-surface--accent::before, .mdc-ripple-surface--accent::after {
-  background-color: #018786;
-}
-@supports not (-ms-ime-align: auto) {
-  .mdc-ripple-surface--accent::before, .mdc-ripple-surface--accent::after {
-    /* @alternate */
-    background-color: var(--mdc-theme-secondary, #018786);
-  }
+
+.mdc-ripple-surface::before, .mdc-ripple-surface::after {
+  background-color: #000;
+  /* @alternate */
+  background-color: var(--mdc-ripple-color, #000);
 }
-.mdc-ripple-surface--accent:hover::before {
+
+.mdc-ripple-surface:hover::before, .mdc-ripple-surface.mdc-ripple-surface--hover::before {
   opacity: 0.04;
+  /* @alternate */
+  opacity: var(--mdc-ripple-hover-opacity, 0.04);
 }
-.mdc-ripple-surface--accent:not(.mdc-ripple-upgraded):focus::before, .mdc-ripple-surface--accent.mdc-ripple-upgraded--background-focused::before {
+
+.mdc-ripple-surface.mdc-ripple-upgraded--background-focused::before, .mdc-ripple-surface:not(.mdc-ripple-upgraded):focus::before {
   transition-duration: 75ms;
   opacity: 0.12;
+  /* @alternate */
+  opacity: var(--mdc-ripple-focus-opacity, 0.12);
 }
-.mdc-ripple-surface--accent:not(.mdc-ripple-upgraded)::after {
+
+.mdc-ripple-surface:not(.mdc-ripple-upgraded)::after {
   transition: opacity 150ms linear;
 }
-.mdc-ripple-surface--accent:not(.mdc-ripple-upgraded):active::after {
+
+.mdc-ripple-surface:not(.mdc-ripple-upgraded):active::after {
   transition-duration: 75ms;
   opacity: 0.12;
+  /* @alternate */
+  opacity: var(--mdc-ripple-press-opacity, 0.12);
 }
-.mdc-ripple-surface--accent.mdc-ripple-upgraded {
-  --mdc-ripple-fg-opacity: 0.12;
+
+.mdc-ripple-surface.mdc-ripple-upgraded {
+  --mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.12);
 }
 
 :host {
@@ -302,6 +288,13 @@
 .wcs-inner-button::before {
   transition: opacity 15ms linear, background-color 15ms linear;
   z-index: 1;
+  /* @alternate */
+  z-index: var(--mdc-ripple-z-index, 1);
+}
+.wcs-inner-button::after {
+  z-index: 0;
+  /* @alternate */
+  z-index: var(--mdc-ripple-z-index, 0);
 }
 .wcs-inner-button.mdc-ripple-upgraded::before {
   transform: scale(var(--mdc-ripple-fg-scale, 1));
@@ -309,6 +302,7 @@
 .wcs-inner-button.mdc-ripple-upgraded::after {
   top: 0;
   /* @noflip */
+  /*rtl:ignore*/
   left: 0;
   transform: scale(0);
   transform-origin: center center;
@@ -316,6 +310,7 @@
 .wcs-inner-button.mdc-ripple-upgraded--unbounded::after {
   top: var(--mdc-ripple-top, 0);
   /* @noflip */
+  /*rtl:ignore*/
   left: var(--mdc-ripple-left, 0);
 }
 .wcs-inner-button.mdc-ripple-upgraded--foreground-activation::after {
@@ -328,6 +323,7 @@
 .wcs-inner-button::before, .wcs-inner-button::after {
   top: calc(50% - 100%);
   /* @noflip */
+  /*rtl:ignore*/
   left: calc(50% - 100%);
   width: 200%;
   height: 200%;
@@ -336,12 +332,16 @@
   width: var(--mdc-ripple-fg-size, 100%);
   height: var(--mdc-ripple-fg-size, 100%);
 }
-.wcs-inner-button:hover::before {
+.wcs-inner-button:hover::before, .wcs-inner-button.mdc-ripple-surface--hover::before {
   opacity: 0.1;
+  /* @alternate */
+  opacity: var(--mdc-ripple-hover-opacity, 0.1);
 }
-.wcs-inner-button:not(.mdc-ripple-upgraded):focus::before, .wcs-inner-button.mdc-ripple-upgraded--background-focused::before {
+.wcs-inner-button.mdc-ripple-upgraded--background-focused::before, .wcs-inner-button:not(.mdc-ripple-upgraded):focus::before {
   transition-duration: 75ms;
   opacity: 0.2;
+  /* @alternate */
+  opacity: var(--mdc-ripple-focus-opacity, 0.2);
 }
 .wcs-inner-button:not(.mdc-ripple-upgraded)::after {
   transition: opacity 150ms linear;
@@ -349,12 +349,16 @@
 .wcs-inner-button:not(.mdc-ripple-upgraded):active::after {
   transition-duration: 75ms;
   opacity: 0.3;
+  /* @alternate */
+  opacity: var(--mdc-ripple-press-opacity, 0.3);
 }
 .wcs-inner-button.mdc-ripple-upgraded {
-  --mdc-ripple-fg-opacity: 0.3;
+  --mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, 0.3);
 }
 .wcs-inner-button::before, .wcs-inner-button::after {
   background-color: white;
+  /* @alternate */
+  background-color: var(--mdc-ripple-color, white);
 }
 .wcs-inner-button::before, .wcs-inner-button::after {
   background-color: var(--wcs-button-ripple-color);

package/dist/collection/components/button/button.js

@@ -1,5 +1,5 @@
-import { Component, Element, Prop, Listen, h } from '@stencil/core';
-import * as MDCRipple from '@material/ripple';
+import { Component, Element, h, Listen, Prop, Watch } from '@stencil/core';
+import { MDCRipple } from '@material/ripple';
 import { hasShadowDom } from '../../utils/helpers';
 /**
  * Button component, can also be a link when specifying href.
@@ -47,6 +47,23 @@ export class Button {
       }
     }
   }
+  componentDidLoad() {
+    this.mdcRipple = new MDCRipple(this.el.shadowRoot.querySelector('.wcs-inner-button'));
+  }
+  enabledRippleEffect() {
+    this.mdcRipple.disabled = false;
+  }
+  disabledRippleEffect() {
+    this.mdcRipple.disabled = true;
+  }
+  onRippleChange() {
+    if (this.ripple) {
+      this.enabledRippleEffect();
+    }
+    else {
+      this.disabledRippleEffect();
+    }
+  }
   render() {
     const TagType = this.href !== undefined ? 'a' : 'button';
     const attrs = this.href !== undefined
@@ -55,15 +72,6 @@ export class Button {
     return (h(TagType, Object.assign({}, attrs, { class: "wcs-inner-button" }, this.disabled === true ? { disabled: true } : null),
       h("slot", null)));
   }
-  componentDidLoad() {
-    if (this.ripple) {
-      this.addRippleEffect();
-    }
-  }
-  addRippleEffect() {
-    const ripple = new MDCRipple.MDCRipple(this.el.shadowRoot.querySelector('.wcs-inner-button'));
-    ripple.unbounded = false;
-  }
   static get is() { return "wcs-button"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
@@ -197,6 +205,10 @@ export class Button {
     }
   }; }
   static get elementRef() { return "el"; }
+  static get watchers() { return [{
+      "propName": "ripple",
+      "methodName": "onRippleChange"
+    }]; }
   static get listeners() { return [{
       "name": "click",
       "method": "onClick",

package/dist/collection/components/com-nav/com-nav.css

@@ -1,4 +1,3 @@
-@charset "UTF-8";
 :host {
   display: block;
   position: relative;
@@ -49,7 +48,7 @@
   font-family: icons;
   padding-left: var(--wcs-base-margin);
   font-size: 0.6rem;
-  content: "";
+  content: "\f107";
   line-height: 1;
   box-sizing: border-box;
 }

package/dist/collection/components/com-nav-category/com-nav-category.css

@@ -1,4 +1,3 @@
-@charset "UTF-8";
 :host {
   display: block;
 }
@@ -9,7 +8,7 @@
   font-family: icons;
   padding-left: var(--wcs-base-margin);
   font-size: 0.6rem;
-  content: "";
+  content: "\f107";
   line-height: 1;
   box-sizing: border-box;
 }
@@ -21,7 +20,7 @@
 }
 :host .label-container[data-open]:after {
   position: absolute;
-  left: calc(calc(calc(100% / 2) + calc(var(--wcs-com-content-max-width) / 8)) - calc(1.125rem / 2));
+  left: calc(50% + var(--wcs-com-content-max-width) / 8 - 0.5625rem);
   z-index: 2;
   display: block;
   width: 1.125rem;
@@ -32,14 +31,14 @@
 }
 :host .item-container[data-open] {
   position: absolute;
-  left: calc(calc(100% / 2) + calc(var(--wcs-com-content-max-width) / 8));
+  left: calc(50% + var(--wcs-com-content-max-width) / 8);
   top: 0;
   right: 0;
   padding: 50px 0 50px 50px;
   background-blend-mode: multiply;
   background-color: rgba(0, 0, 0, 0.15);
   box-sizing: border-box;
-  height: calc(100%);
+  height: 100%;
   display: flex;
   flex-direction: column;
   align-items: start;
@@ -51,7 +50,7 @@
   font-family: icons;
   padding-left: var(--wcs-base-margin);
   font-size: 0.6rem;
-  content: "";
+  content: "\f107";
   line-height: 1;
   box-sizing: border-box;
 }

package/dist/collection/components/com-nav-category/com-nav-category.js

@@ -32,11 +32,22 @@ export class ComNavCategory {
     evt.stopPropagation();
     this.wcsCategoryOpened.emit({ categoryElement: this.el });
   }
+  /**
+   * Close the category and fire item click if we detect a mouse click on a slotted `a` element.
+   * @param evt
+   * @private
+   */
+  handleItemClick(evt) {
+    if (evt.target.tagName === 'A') {
+      this.close();
+      this.wcsCategoryItemClicked.emit(evt);
+    }
+  }
   render() {
     return (h(Host, { onClick: evt => this.onClick(evt) },
       h("div", { class: "label-container", "data-open": this.categoryOpen, onClick: _ => this.categoryOpen = !this.categoryOpen },
         h("span", { class: "label" }, this.label)),
-      h("div", { class: "item-container", "data-open": this.categoryOpen },
+      h("div", { class: "item-container", "data-open": this.categoryOpen, onClick: (evt) => this.handleItemClick(evt) },
         h("slot", null))));
   }
   static get is() { return "wcs-com-nav-category"; }
@@ -89,6 +100,25 @@ export class ComNavCategory {
           }
         }
       }
+    }, {
+      "method": "wcsCategoryItemClicked",
+      "name": "wcsCategoryItemClicked",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "MouseEvent",
+        "resolved": "MouseEvent",
+        "references": {
+          "MouseEvent": {
+            "location": "global"
+          }
+        }
+      }
     }]; }
   static get methods() { return {
     "close": {

package/dist/collection/components/com-nav-submenu/com-nav-submenu.css

@@ -1,4 +1,3 @@
-@charset "UTF-8";
 :host {
   display: block;
   height: 100%;
@@ -70,7 +69,7 @@
   font-family: icons;
   padding-left: var(--wcs-base-margin);
   font-size: 0.6rem;
-  content: "";
+  content: "\f107";
   line-height: 1;
   box-sizing: border-box;
 }

package/dist/collection/components/com-nav-submenu/com-nav-submenu.js

@@ -36,6 +36,20 @@ export class ComNavSubmenu {
     evt.stopPropagation();
     this.wcsSubmenuOpened.emit({ menuElement: this.el });
   }
+  handleMenuItemsClick(evt) {
+    if (evt.target.tagName === 'A') {
+      this.close();
+    }
+  }
+  /**
+   * handle category item click to close the submenu
+   * @param _
+   * @private
+   */
+  wcsCategoryItemClickedHandler(_) {
+    // If a category item is clicked, we close the submenu drawer;
+    this.close();
+  }
   render() {
     return (h(Host, { onClick: evt => this.onClick(evt) },
       h("div", { onClick: _ => this.menuOpen = !this.menuOpen, class: "menu-button" },
@@ -48,7 +62,7 @@ export class ComNavSubmenu {
             h("div", null,
               h("h3", null, this.panelTitle),
               h("p", null, this.panelDescription)),
-            h("div", { class: "menu-items" },
+            h("div", { class: "menu-items", onClick: (evt) => this.handleMenuItemsClick(evt) },
               h("slot", null)))))));
   }
   static get is() { return "wcs-com-nav-submenu"; }
@@ -183,5 +197,11 @@ export class ComNavSubmenu {
       "target": "window",
       "capture": false,
       "passive": false
+    }, {
+      "name": "wcsCategoryItemClicked",
+      "method": "wcsCategoryItemClickedHandler",
+      "target": undefined,
+      "capture": false,
+      "passive": false
     }]; }
 }

package/dist/collection/components/footer/footer.css

@@ -5,7 +5,7 @@
   color: white;
 }
 :host .end {
-  margin-top: calc(2*var(--wcs-base-margin));
+  margin-top: calc(2 * var(--wcs-base-margin));
   width: 100%;
   display: flex;
   justify-content: space-between;

package/dist/collection/components/grid/grid.js

@@ -1,4 +1,4 @@
-import { Component, Element, Event, h, Host, Listen, Prop, State, Watch } from '@stencil/core';
+import { Component, Element, Event, forceUpdate, h, Host, Listen, Prop, State, Watch } from '@stencil/core';
 import { getSortOrderInteger } from './grid-interface';
 import _ from 'lodash';
 import { v4 as uuid } from 'uuid';
@@ -23,6 +23,11 @@ export class Grid {
   onSelectedItemsPropertyChange(newValue) {
     this.updateSelectionWithValues(newValue);
   }
+  onHiddenColumnChange() {
+    // We use forceUpdate because the fact of hiding a column or not does not modify the internal structure of the grid (WcsGridRow).
+    // Hide a column only impacts the way it is rendered but the grid-column remains in the dom and in our internal model.
+    forceUpdate(this);
+  }
   updateSelectionWithValues(values) {
     if (this.selectionConfig === 'single') {
       this.rows.map(r => r.selected = false);
@@ -138,7 +143,9 @@ export class Grid {
       this.rows.filter(r => r.uuid !== row.uuid).map(r => r.selected = false);
     }
     row.selected = !row.selected;
-    this.wcsGridSelectionChange.emit({ row: this.wcsGridRowToWcsGridRowData(row) });
+    if (this.selectionConfig !== 'single' || row.selected) {
+      this.wcsGridSelectionChange.emit({ row: this.wcsGridRowToWcsGridRowData(row) });
+    }
     this.rows = _.cloneDeep(this.rows);
   }
   selectAllRows() {
@@ -195,14 +202,23 @@ export class Grid {
           ? h("tr", null,
             h("td", { colSpan: this.totalColumnCount(), class: "loading" },
               h("wcs-spinner", null)))
-          : (_a = this.rows) === null || _a === void 0 ? void 0 : _a.filter(row => this.serverMode || !this.paginationEl || row.page === this.paginationEl.currentPage).map(row => {
-            var _a;
-            return h("tr", { class: row.selected ? 'selected' : '' },
-              this.renderSelectionColumn(row), (_a = row.cells) === null || _a === void 0 ? void 0 :
-              _a.map(cell => h("td", { part: cell.column.path + '-column' }, this.getCellContent(row, cell))));
-          }))),
+          : (_a = this.rows) === null || _a === void 0 ? void 0 : _a.filter(row => this.serverMode || !this.paginationEl || row.page === this.paginationEl.currentPage).map(row => this.renderRow(row)))),
       h("slot", { name: "grid-pagination" })));
   }
+  renderRow(row) {
+    var _a;
+    return h("tr", { class: row.selected ? 'selected' : '' },
+      this.renderSelectionColumn(row), (_a = row.cells) === null || _a === void 0 ? void 0 :
+      _a.map(cell => {
+        if (cell.column.hidden) {
+          return;
+        }
+        return cell.column.customCells
+          ? (h("td", null,
+            h("slot", { name: cell.column.id + '-' + row.data[this.rowIdPath] })))
+          : (h("td", { part: cell.column.path + '-column' }, this.getCellContent(row, cell)));
+      }));
+  }
   static get is() { return "wcs-grid"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
@@ -318,6 +334,23 @@ export class Grid {
       },
       "attribute": "wcs-grid-pagination-id",
       "reflect": false
+    },
+    "rowIdPath": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Name of the object's key that will be used to display the cells whose keyValue attribute matches to the\nobject's value for this key."
+      },
+      "attribute": "row-id-path",
+      "reflect": false
     }
   }; }
   static get states() { return {
@@ -375,6 +408,12 @@ export class Grid {
       "methodName": "onSelectedItemsPropertyChange"
     }]; }
   static get listeners() { return [{
+      "name": "wcsHiddenChange",
+      "method": "onHiddenColumnChange",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }, {
       "name": "wcsSortChange",
       "method": "sortChangeEventHandler",
       "target": undefined,

package/dist/collection/components/grid-column/grid-column.css

@@ -1,5 +1,6 @@
 :host {
   --wcs-grid-column-border-left: solid 1px var(--wcs-text-light);
+  display: contents;
 }
 :host th {
   color: var(--wcs-gray-dark);
@@ -32,4 +33,8 @@
 }
 :host([sort-order=none]) th:hover img {
   display: inline-block;
+}
+
+:host([hidden]) {
+  display: none !important;
 }