@zywave/zui-table 4.0.1-pre.2 → 4.0.1

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [4.0.1](https://gitlab.com/zywave/devkit/zui/zui/compare/@zywave/zui-table@4.0.1-pre.5...@zywave/zui-table@4.0.1) (2022-01-26)
+
+**Note:** Version bump only for package @zywave/zui-table
+
+
+
+
+
 # [4.0.0](https://gitlab.com/zywave/devkit/zui/zui/compare/@zywave/zui-table@4.0.0-pre.3...@zywave/zui-table@4.0.0) (2021-12-10)
 
 **Note:** Version bump only for package @zywave/zui-table

package/dist/css/zui-table.fouc.css

@@ -1 +1 @@
-zui-table:not(:defined){font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:var(--zui-font-size, 0.875rem);font-weight:400;line-height:var(--zui-line-height, 1.6);box-sizing:border-box;-webkit-text-size-adjust:100%;display:block;width:100%;box-shadow:0 1px 3px rgba(0,0,0,.29);border-collapse:collapse;border-spacing:0}zui-table:not(:defined) [slot=topbar]{display:flex;min-height:3.75rem;align-items:center;padding:.625rem 1.25rem;background-color:var(--zui-gray-25)}zui-table:not(:defined) [slot=footer]{margin-top:.625rem}zui-table:not(:defined) [slot=no-results-message]{display:none}zui-table:not(:defined) *,zui-table:not(:defined) *::before,zui-table:not(:defined) *::after{box-sizing:inherit}zui-table[banded]:not(:defined){font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:var(--zui-font-size, 0.875rem);font-weight:400;line-height:var(--zui-line-height, 1.6);box-sizing:border-box;-webkit-text-size-adjust:100%}zui-table[banded]:not(:defined) zui-table-row:not([header]):nth-child(even){background-color:var(--zui-gray-25)}zui-table[banded]:not(:defined) zui-table-row:not([header]){border:0}zui-table[banded]:not(:defined) *,zui-table[banded]:not(:defined) *::before,zui-table[banded]:not(:defined) *::after{box-sizing:inherit}zui-table[no-results]:not(:defined){font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:var(--zui-font-size, 0.875rem);font-weight:400;line-height:var(--zui-line-height, 1.6);box-sizing:border-box;-webkit-text-size-adjust:100%}zui-table[no-results]:not(:defined) [slot=no-results-message]{display:block;padding:.75rem 1.25rem}zui-table[no-results]:not(:defined) *,zui-table[no-results]:not(:defined) *::before,zui-table[no-results]:not(:defined) *::after{box-sizing:inherit}zui-table-topbar:not(:defined){font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:var(--zui-font-size, 0.875rem);font-weight:400;line-height:var(--zui-line-height, 1.6);box-sizing:border-box;-webkit-text-size-adjust:100%;display:flex;width:100%;min-height:3.75rem;align-items:center;padding:.625rem 1.25rem;background-color:var(--zui-gray-25)}zui-table-topbar:not(:defined) [slot=counter]{flex-shrink:0;margin-left:auto;padding-left:.625rem;font-size:.75rem;color:var(--zui-gray-400)}zui-table-topbar:not(:defined) [slot=action]{margin-left:.625rem}zui-table-topbar:not(:defined) [slot=action] zui-button:not(:first-of-type){margin-left:.625rem}zui-table-topbar:not(:defined) *,zui-table-topbar:not(:defined) *::before,zui-table-topbar:not(:defined) *::after{box-sizing:inherit}zui-table-row:not(:defined){font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:var(--zui-font-size, 0.875rem);font-weight:400;line-height:var(--zui-line-height, 1.6);box-sizing:border-box;-webkit-text-size-adjust:100%;display:flex;background-color:#fff}zui-table-row:not(:defined) *,zui-table-row:not(:defined) *::before,zui-table-row:not(:defined) *::after{box-sizing:inherit}zui-table-row[header]:not(:defined){font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:var(--zui-font-size, 0.875rem);font-weight:400;line-height:var(--zui-line-height, 1.6);box-sizing:border-box;-webkit-text-size-adjust:100%;background-color:#fff;border-bottom:1px solid var(--zui-gray-200)}zui-table-row[header]:not(:defined) zui-table-cell{font-weight:600}zui-table-row[header]:not(:defined) *,zui-table-row[header]:not(:defined) *::before,zui-table-row[header]:not(:defined) *::after{box-sizing:inherit}zui-table-row:not([header]):not(:defined){font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:var(--zui-font-size, 0.875rem);font-weight:400;line-height:var(--zui-line-height, 1.6);box-sizing:border-box;-webkit-text-size-adjust:100%;border-bottom:1px solid var(--zui-gray-100)}zui-table-row:not([header]):not(:defined) *,zui-table-row:not([header]):not(:defined) *::before,zui-table-row:not([header]):not(:defined) *::after{box-sizing:inherit}zui-table-row:not([header]):last-of-type:not(:defined){font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:var(--zui-font-size, 0.875rem);font-weight:400;line-height:var(--zui-line-height, 1.6);box-sizing:border-box;-webkit-text-size-adjust:100%;border-bottom:0}zui-table-row:not([header]):last-of-type:not(:defined) *,zui-table-row:not([header]):last-of-type:not(:defined) *::before,zui-table-row:not([header]):last-of-type:not(:defined) *::after{box-sizing:inherit}zui-table-row[summary]:not(:defined){font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:var(--zui-font-size, 0.875rem);font-weight:400;line-height:var(--zui-line-height, 1.6);box-sizing:border-box;-webkit-text-size-adjust:100%;background-color:var(--zui-table-summary-background-color, var(--zui-gray-600)) !important}zui-table-row[summary]:not(:defined) zui-table-cell{font-weight:600;color:var(--zui-table-summary-text-color, #fff)}zui-table-row[summary]:not(:defined) *,zui-table-row[summary]:not(:defined) *::before,zui-table-row[summary]:not(:defined) *::after{box-sizing:inherit}zui-table-cell:not(:defined){font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:var(--zui-font-size, 0.875rem);font-weight:400;line-height:var(--zui-line-height, 1.6);box-sizing:border-box;-webkit-text-size-adjust:100%;flex-grow:1;flex-basis:0;padding:var(--zui-table-cell-padding, 0.8125rem 1.25rem)}zui-table-cell:not(:defined) *,zui-table-cell:not(:defined) *::before,zui-table-cell:not(:defined) *::after{box-sizing:inherit}zui-table-cell[action]:not(:defined){font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:var(--zui-font-size, 0.875rem);font-weight:400;line-height:var(--zui-line-height, 1.6);box-sizing:border-box;-webkit-text-size-adjust:100%;--zui-table-cell-padding: 0.375rem 1.25rem;display:flex;align-items:center}zui-table-cell[action]:not(:defined) *,zui-table-cell[action]:not(:defined) *::before,zui-table-cell[action]:not(:defined) *::after{box-sizing:inherit}zui-table-footer:not(:defined){font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:var(--zui-font-size, 0.875rem);font-weight:400;line-height:var(--zui-line-height, 1.6);box-sizing:border-box;-webkit-text-size-adjust:100%;display:flex;justify-content:center;align-items:center;margin-top:var(--zui-table-footer-margin, 0.625rem)}zui-table-footer:not(:defined) zui-pager{width:100%}zui-table-footer:not(:defined) *,zui-table-footer:not(:defined) *::before,zui-table-footer:not(:defined) *::after{box-sizing:inherit}
+zui-table:not(:defined){font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:var(--zui-font-size, 0.875rem);font-weight:400;line-height:var(--zui-line-height, 1.6);box-sizing:border-box;-webkit-text-size-adjust:100%;display:block;width:100%;box-shadow:0 1px 3px rgba(0,0,0,.29);border-collapse:collapse;border-spacing:0}zui-table:not(:defined) [slot=topbar]{display:flex;min-height:3.75rem;align-items:center;padding:.625rem 1.25rem;background-color:var(--zui-gray-25)}zui-table:not(:defined) [slot=footer]{margin-top:.625rem}zui-table:not(:defined) [slot=no-results-message]{display:none}zui-table:not(:defined) *,zui-table:not(:defined) *::before,zui-table:not(:defined) *::after{box-sizing:inherit}zui-table[banded]:not(:defined){font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:var(--zui-font-size, 0.875rem);font-weight:400;line-height:var(--zui-line-height, 1.6);box-sizing:border-box;-webkit-text-size-adjust:100%}zui-table[banded]:not(:defined) zui-table-row:not([header]):nth-child(even){background-color:var(--zui-gray-25)}zui-table[banded]:not(:defined) zui-table-row:not([header]){border:0}zui-table[banded]:not(:defined) *,zui-table[banded]:not(:defined) *::before,zui-table[banded]:not(:defined) *::after{box-sizing:inherit}zui-table[no-results]:not(:defined){font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:var(--zui-font-size, 0.875rem);font-weight:400;line-height:var(--zui-line-height, 1.6);box-sizing:border-box;-webkit-text-size-adjust:100%}zui-table[no-results]:not(:defined) [slot=no-results-message]{display:block;padding:.75rem 1.25rem}zui-table[no-results]:not(:defined) *,zui-table[no-results]:not(:defined) *::before,zui-table[no-results]:not(:defined) *::after{box-sizing:inherit}zui-table-topbar:not(:defined){font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:var(--zui-font-size, 0.875rem);font-weight:400;line-height:var(--zui-line-height, 1.6);box-sizing:border-box;-webkit-text-size-adjust:100%;display:flex;width:100%;min-height:3.75rem;align-items:center;padding:.625rem 1.25rem;background-color:var(--zui-gray-25)}zui-table-topbar:not(:defined) [slot=counter]{flex-shrink:0;margin-left:auto;padding-left:.625rem;font-size:.75rem;color:var(--zui-gray-400)}zui-table-topbar:not(:defined) [slot=action]{margin-left:.625rem}zui-table-topbar:not(:defined) [slot=action] zui-button:not(:first-of-type){margin-left:.625rem}zui-table-topbar:not(:defined) *,zui-table-topbar:not(:defined) *::before,zui-table-topbar:not(:defined) *::after{box-sizing:inherit}zui-table-row:not(:defined){font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:var(--zui-font-size, 0.875rem);font-weight:400;line-height:var(--zui-line-height, 1.6);box-sizing:border-box;-webkit-text-size-adjust:100%;display:grid;grid-template-columns:auto;padding:.625rem 0;background-color:#fff}@media(min-width: 45em){zui-table-row:not(:defined){display:flex;padding:0}}zui-table-row:not(:defined) *,zui-table-row:not(:defined) *::before,zui-table-row:not(:defined) *::after{box-sizing:inherit}zui-table-row[header]:not(:defined){font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:var(--zui-font-size, 0.875rem);font-weight:400;line-height:var(--zui-line-height, 1.6);box-sizing:border-box;-webkit-text-size-adjust:100%;display:none;background-color:#fff;border-bottom:1px solid var(--zui-gray-200)}@media(min-width: 45em){zui-table-row[header]:not(:defined){display:flex}}zui-table-row[header]:not(:defined) zui-table-cell{--zui-table-cell-padding: 0.53125rem 1.25rem;font-weight:600}zui-table-row[header]:not(:defined) *,zui-table-row[header]:not(:defined) *::before,zui-table-row[header]:not(:defined) *::after{box-sizing:inherit}zui-table-row:not([header]):not(:defined){font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:var(--zui-font-size, 0.875rem);font-weight:400;line-height:var(--zui-line-height, 1.6);box-sizing:border-box;-webkit-text-size-adjust:100%;border-bottom:3px solid var(--zui-gray-100)}@media(min-width: 45em){zui-table-row:not([header]):not(:defined){border-bottom-width:1px}}zui-table-row:not([header]):not(:defined) *,zui-table-row:not([header]):not(:defined) *::before,zui-table-row:not([header]):not(:defined) *::after{box-sizing:inherit}zui-table-row:not([header]):last-of-type:not(:defined){font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:var(--zui-font-size, 0.875rem);font-weight:400;line-height:var(--zui-line-height, 1.6);box-sizing:border-box;-webkit-text-size-adjust:100%;border-bottom:0}zui-table-row:not([header]):last-of-type:not(:defined) *,zui-table-row:not([header]):last-of-type:not(:defined) *::before,zui-table-row:not([header]):last-of-type:not(:defined) *::after{box-sizing:inherit}zui-table-row[summary]:not(:defined){font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:var(--zui-font-size, 0.875rem);font-weight:400;line-height:var(--zui-line-height, 1.6);box-sizing:border-box;-webkit-text-size-adjust:100%;background-color:var(--zui-table-summary-background-color, var(--zui-gray-600)) !important}zui-table-row[summary]:not(:defined) zui-table-cell{font-weight:600;color:var(--zui-table-summary-text-color, #fff)}zui-table-row[summary]:not(:defined) *,zui-table-row[summary]:not(:defined) *::before,zui-table-row[summary]:not(:defined) *::after{box-sizing:inherit}zui-table-cell:not(:defined){font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:var(--zui-font-size, 0.875rem);font-weight:400;line-height:var(--zui-line-height, 1.6);box-sizing:border-box;-webkit-text-size-adjust:100%;flex-grow:1;flex-basis:0;padding:var(--zui-table-cell-padding, 0.3125rem 0.9375rem)}@media(min-width: 45em){zui-table-cell:not(:defined){padding:var(--zui-table-cell-padding, 0.8125rem 1.25rem)}}zui-table-cell:not(:defined) *,zui-table-cell:not(:defined) *::before,zui-table-cell:not(:defined) *::after{box-sizing:inherit}zui-table-cell[action]:not(:defined){font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:var(--zui-font-size, 0.875rem);font-weight:400;line-height:var(--zui-line-height, 1.6);box-sizing:border-box;-webkit-text-size-adjust:100%;display:flex;align-items:center}@media(min-width: 45em){zui-table-cell[action]:not(:defined){--zui-table-cell-padding: 0.375rem 1.25rem}}zui-table-cell[action]:not(:defined) zui-button:not(:first-of-type){margin-left:.625rem}zui-table-cell[action]:not(:defined) *,zui-table-cell[action]:not(:defined) *::before,zui-table-cell[action]:not(:defined) *::after{box-sizing:inherit}zui-table-footer:not(:defined){font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:var(--zui-font-size, 0.875rem);font-weight:400;line-height:var(--zui-line-height, 1.6);box-sizing:border-box;-webkit-text-size-adjust:100%;display:flex;justify-content:center;align-items:center;margin-top:var(--zui-table-footer-margin, 0.625rem)}zui-table-footer:not(:defined) zui-pager{width:100%}zui-table-footer:not(:defined) *,zui-table-footer:not(:defined) *::before,zui-table-footer:not(:defined) *::after{box-sizing:inherit}

package/dist/custom-elements.json

@@ -179,17 +179,12 @@
             },
             {
               "kind": "field",
-              "name": "_slotEl",
+              "name": "_slottedCells",
               "type": {
-                "text": "HTMLSlotElement | undefined"
+                "text": "Array<ZuiTableCellElement>"
               },
               "privacy": "private"
             },
-            {
-              "kind": "field",
-              "name": "_slottedCells",
-              "privacy": "private"
-            },
             {
               "kind": "method",
               "name": "#setCellsRole"
@@ -366,15 +361,39 @@
             },
             {
               "kind": "field",
-              "name": "_slotEl",
+              "name": "_rows",
               "type": {
-                "text": "HTMLSlotElement"
+                "text": "Array<ZuiTableRowElement>"
               },
               "privacy": "private"
             },
             {
               "kind": "field",
               "name": "_footer",
+              "type": {
+                "text": "Array<ZuiTableFooterElement>"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "#internals",
+              "privacy": "private",
+              "type": {
+                "text": "ElementInternals | undefined"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "#mobileBreakpoint",
+              "privacy": "private",
+              "type": {
+                "text": "MediaQueryList"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "#mobileHeadersEvent",
               "privacy": "private"
             },
             {
@@ -384,6 +403,14 @@
             {
               "kind": "method",
               "name": "#reassignFooter"
+            },
+            {
+              "kind": "method",
+              "name": "#addRowHeadersToCells"
+            },
+            {
+              "kind": "method",
+              "name": "#removeRowHeadersFromCells"
             }
           ],
           "attributes": [

package/dist/zui-table-cell-css.js

@@ -1,3 +1,3 @@
 import { css } from 'lit';
-export const style = css `:host{contain:none}:host([action]) div{--zui-table-cell-padding: 0.375rem 1.25rem;display:flex;align-items:center}div{height:100%;padding:var(--zui-table-cell-padding, 0.8125rem 1.25rem)}`;
+export const style = css `:host{contain:none}:host([action]) div{display:flex}@media(min-width: 45em){:host([action]) div{--zui-table-cell-padding: 0.375rem 1.25rem;align-items:center}}:host([action]) ::slotted(zui-button:not(:first-of-type)){margin-left:.625rem}div{padding:var(--zui-table-cell-padding, 0.3125rem 0.9375rem)}@media(min-width: 45em){div{padding:var(--zui-table-cell-padding, 0.8125rem 1.25rem)}}div.header{float:left;width:33.333%;font-weight:600}div.header+div{padding:var(--zui-table-cell-padding, 0.3125rem 0.9375rem 0.3125rem 0)}`;
 //# sourceMappingURL=zui-table-cell-css.js.map

package/dist/zui-table-cell-css.js.map

@@ -1 +1 @@
-{"version":3,"file":"zui-table-cell-css.js","sourceRoot":"","sources":["../src/zui-table-cell-css.js"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,CAAA,6LAA6L,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const style = css`:host{contain:none}:host([action]) div{--zui-table-cell-padding: 0.375rem 1.25rem;display:flex;align-items:center}div{height:100%;padding:var(--zui-table-cell-padding, 0.8125rem 1.25rem)}`;\n"]}
+{"version":3,"file":"zui-table-cell-css.js","sourceRoot":"","sources":["../src/zui-table-cell-css.js"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,CAAA,8gBAA8gB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const style = css`:host{contain:none}:host([action]) div{display:flex}@media(min-width: 45em){:host([action]) div{--zui-table-cell-padding: 0.375rem 1.25rem;align-items:center}}:host([action]) ::slotted(zui-button:not(:first-of-type)){margin-left:.625rem}div{padding:var(--zui-table-cell-padding, 0.3125rem 0.9375rem)}@media(min-width: 45em){div{padding:var(--zui-table-cell-padding, 0.8125rem 1.25rem)}}div.header{float:left;width:33.333%;font-weight:600}div.header+div{padding:var(--zui-table-cell-padding, 0.3125rem 0.9375rem 0.3125rem 0)}`;\n"]}

package/dist/zui-table-css.js

@@ -1,3 +1,3 @@
 import { css } from 'lit';
-export const style = css `:host{contain:none;display:block}:host([banded]) ::slotted(zui-table-row:not([header]):nth-child(even)){background-color:var(--zui-gray-25)}:host([banded]) ::slotted(zui-table-row:not([header])){border:0}:host([no-results]) .no-results{padding:.75rem 1.25rem}::slotted(zui-table-row:not([header])){border-bottom:1px solid var(--zui-gray-100)}::slotted(zui-table-row:not([header]):last-of-type){border-bottom:0}.table{display:flex;width:100%;flex-direction:column;background-color:#fff;box-shadow:0 1px 3px rgba(0,0,0,.29);border-collapse:collapse;border-spacing:0}`;
+export const style = css `:host{contain:none;display:block}:host([banded]) ::slotted(zui-table-row:not([header]):nth-child(even)){background-color:var(--zui-gray-25)}:host([banded]) ::slotted(zui-table-row:not([header])){border:0}:host([no-results]) .no-results{padding:.75rem 1.25rem;background-color:#fff;box-shadow:0 1px 3px rgba(0,0,0,.29)}@media(min-width: 45em){:host([no-results]) .no-results{background-color:transparent;box-shadow:none}}::slotted(zui-table-row:not([header])){border-bottom:3px solid var(--zui-gray-100)}@media(min-width: 45em){::slotted(zui-table-row:not([header])){border-bottom-width:1px}}::slotted(zui-table-row:not([header]):last-of-type){border-bottom:0}.table{display:flex;width:100%;flex-direction:column;box-shadow:0 1px 3px rgba(0,0,0,.29);border-collapse:collapse;border-spacing:0}@media(min-width: 45em){.table{background-color:#fff}}`;
 //# sourceMappingURL=zui-table-css.js.map

package/dist/zui-table-css.js.map

@@ -1 +1 @@
-{"version":3,"file":"zui-table-css.js","sourceRoot":"","sources":["../src/zui-table-css.js"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,CAAA,sjBAAsjB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const style = css`:host{contain:none;display:block}:host([banded]) ::slotted(zui-table-row:not([header]):nth-child(even)){background-color:var(--zui-gray-25)}:host([banded]) ::slotted(zui-table-row:not([header])){border:0}:host([no-results]) .no-results{padding:.75rem 1.25rem}::slotted(zui-table-row:not([header])){border-bottom:1px solid var(--zui-gray-100)}::slotted(zui-table-row:not([header]):last-of-type){border-bottom:0}.table{display:flex;width:100%;flex-direction:column;background-color:#fff;box-shadow:0 1px 3px rgba(0,0,0,.29);border-collapse:collapse;border-spacing:0}`;\n"]}
+{"version":3,"file":"zui-table-css.js","sourceRoot":"","sources":["../src/zui-table-css.js"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,CAAA,+0BAA+0B,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const style = css`:host{contain:none;display:block}:host([banded]) ::slotted(zui-table-row:not([header]):nth-child(even)){background-color:var(--zui-gray-25)}:host([banded]) ::slotted(zui-table-row:not([header])){border:0}:host([no-results]) .no-results{padding:.75rem 1.25rem;background-color:#fff;box-shadow:0 1px 3px rgba(0,0,0,.29)}@media(min-width: 45em){:host([no-results]) .no-results{background-color:transparent;box-shadow:none}}::slotted(zui-table-row:not([header])){border-bottom:3px solid var(--zui-gray-100)}@media(min-width: 45em){::slotted(zui-table-row:not([header])){border-bottom-width:1px}}::slotted(zui-table-row:not([header]):last-of-type){border-bottom:0}.table{display:flex;width:100%;flex-direction:column;box-shadow:0 1px 3px rgba(0,0,0,.29);border-collapse:collapse;border-spacing:0}@media(min-width: 45em){.table{background-color:#fff}}`;\n"]}

package/dist/zui-table-row-css.js

@@ -1,3 +1,3 @@
 import { css } from 'lit';
-export const style = css `:host{contain:none}:host([header]){background-color:#fff;border-bottom:1px solid var(--zui-gray-200)}:host([header]) ::slotted(zui-table-cell){--zui-table-cell-padding: 0.53125rem 1.25rem;font-weight:600}div{display:grid;grid-template-columns:var(--zui-table-columns-template, repeat(auto-fit, minmax(0, 1fr)))}:host([summary]){background-color:var(--zui-table-summary-background-color, var(--zui-gray-600)) !important}:host([summary]) ::slotted(zui-table-cell){font-weight:600;color:var(--zui-table-summary-text-color, #fff)}`;
+export const style = css `:host{contain:none}:host(:last-of-type:not([summary])) div,:host([summary]) div{margin-bottom:0}:host([header]){display:none;background-color:#fff;border-bottom:1px solid var(--zui-gray-200)}:host([header]) ::slotted(zui-table-cell){--zui-table-cell-padding: 0.53125rem 1.25rem;font-weight:600}@media(min-width: 45em){:host([header]){display:block}}div{display:grid;grid-template-columns:auto;margin-bottom:0;padding:.625rem 0;background-color:#fff}@media(min-width: 45em){div{grid-template-columns:var(--zui-table-columns-template, repeat(auto-fit, minmax(0, 1fr)));padding:0;background-color:transparent}}:host([summary]){background-color:var(--zui-table-summary-background-color, var(--zui-gray-600)) !important}:host([summary]) div{margin-bottom:0;background-color:transparent}:host([summary]) ::slotted(zui-table-cell){font-weight:600;color:var(--zui-table-summary-text-color, #fff)}`;
 //# sourceMappingURL=zui-table-row-css.js.map

package/dist/zui-table-row-css.js.map

@@ -1 +1 @@
-{"version":3,"file":"zui-table-row-css.js","sourceRoot":"","sources":["../src/zui-table-row-css.js"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,CAAA,ghBAAghB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const style = css`:host{contain:none}:host([header]){background-color:#fff;border-bottom:1px solid var(--zui-gray-200)}:host([header]) ::slotted(zui-table-cell){--zui-table-cell-padding: 0.53125rem 1.25rem;font-weight:600}div{display:grid;grid-template-columns:var(--zui-table-columns-template, repeat(auto-fit, minmax(0, 1fr)))}:host([summary]){background-color:var(--zui-table-summary-background-color, var(--zui-gray-600)) !important}:host([summary]) ::slotted(zui-table-cell){font-weight:600;color:var(--zui-table-summary-text-color, #fff)}`;\n"]}
+{"version":3,"file":"zui-table-row-css.js","sourceRoot":"","sources":["../src/zui-table-row-css.js"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,CAAA,03BAA03B,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const style = css`:host{contain:none}:host(:last-of-type:not([summary])) div,:host([summary]) div{margin-bottom:0}:host([header]){display:none;background-color:#fff;border-bottom:1px solid var(--zui-gray-200)}:host([header]) ::slotted(zui-table-cell){--zui-table-cell-padding: 0.53125rem 1.25rem;font-weight:600}@media(min-width: 45em){:host([header]){display:block}}div{display:grid;grid-template-columns:auto;margin-bottom:0;padding:.625rem 0;background-color:#fff}@media(min-width: 45em){div{grid-template-columns:var(--zui-table-columns-template, repeat(auto-fit, minmax(0, 1fr)));padding:0;background-color:transparent}}:host([summary]){background-color:var(--zui-table-summary-background-color, var(--zui-gray-600)) !important}:host([summary]) div{margin-bottom:0;background-color:transparent}:host([summary]) ::slotted(zui-table-cell){font-weight:600;color:var(--zui-table-summary-text-color, #fff)}`;\n"]}

package/dist/zui-table-row.d.ts

@@ -18,8 +18,7 @@ export declare class ZuiTableRowElement extends ZuiBaseElement {
      * Declare a table summary row; typically the last row in `<zui-table>` before `<zui-table-footer>`
      */
     summary: boolean;
-    private _slotEl;
-    private get _slottedCells();
+    private _slottedCells;
     static get styles(): import("lit").CSSResultGroup[];
     connectedCallback(): void;
     firstUpdated(): void;

package/dist/zui-table-row.js

@@ -12,8 +12,7 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
 var _ZuiTableRowElement_instances, _ZuiTableRowElement_setCellsRole;
 import { ZuiBaseElement } from '@zywave/zui-base';
 import { html } from 'lit';
-import { property, query } from 'lit/decorators.js';
-import { findAssignedElements } from '@zywave/zui-base/dist/utils/find-assigned-element.js';
+import { property, queryAssignedElements } from 'lit/decorators.js';
 import { style } from './zui-table-row-css.js';
 /**
  * @element zui-table-row
@@ -37,9 +36,6 @@ export class ZuiTableRowElement extends ZuiBaseElement {
          */
         this.summary = false;
     }
-    get _slottedCells() {
-        return findAssignedElements(this._slotEl, 'zui-table-cell');
-    }
     static get styles() {
         return [super.styles, style];
     }
@@ -61,15 +57,12 @@ _ZuiTableRowElement_instances = new WeakSet(), _ZuiTableRowElement_setCellsRole
         return;
     }
     if (this.header) {
-        this._slottedCells.forEach((cell) => {
-            cell.setAttribute('role', 'columnheader');
-        });
+        this._slottedCells.map((cell) => cell.setAttribute('role', 'columnheader'));
     }
     else {
-        this._slottedCells.forEach((cell) => {
-            cell.setAttribute('role', 'cell');
-        });
+        this._slottedCells.map((cell) => cell.setAttribute('role', 'cell'));
     }
+    this.requestUpdate();
 };
 __decorate([
     property({ type: Boolean, reflect: true })
@@ -78,7 +71,7 @@ __decorate([
     property({ type: Boolean, reflect: true })
 ], ZuiTableRowElement.prototype, "summary", void 0);
 __decorate([
-    query('slot')
-], ZuiTableRowElement.prototype, "_slotEl", void 0);
+    queryAssignedElements({ selector: 'zui-table-cell' })
+], ZuiTableRowElement.prototype, "_slottedCells", void 0);
 window.customElements.define('zui-table-row', ZuiTableRowElement);
 //# sourceMappingURL=zui-table-row.js.map

package/dist/zui-table-row.js.map

@@ -1 +1 @@
-{"version":3,"file":"zui-table-row.js","sourceRoot":"","sources":["../src/zui-table-row.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,oBAAoB,EAAE,MAAM,sDAAsD,CAAC;AAC5F,OAAO,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAC;AAE/C;;;;;;;;GAQG;AACH,MAAM,OAAO,kBAAmB,SAAQ,cAAc;IAAtD;;;QACE;;WAEG;QAEH,WAAM,GAAG,KAAK,CAAC;QAEf;;WAEG;QAEH,YAAO,GAAG,KAAK,CAAC;IA2ClB,CAAC;IAtCC,IAAY,aAAa;QACvB,OAAO,oBAAoB,CAAC,IAAI,CAAC,OAAO,EAAE,gBAAgB,CAAC,CAAC;IAC9D,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,CAAC,KAAK,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;IAC/B,CAAC;IAED,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;IACnC,CAAC;IAED,YAAY;QACV,uBAAA,IAAI,uEAAc,MAAlB,IAAI,CAAgB,CAAC;IACvB,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;2BACY,uBAAA,IAAI,uEAAc,MAAlB,IAAI,CAAgB;WACpC,CAAC;IACV,CAAC;CAiBF;;IAdG,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE;QACvB,OAAO;KACR;IAED,IAAI,IAAI,CAAC,MAAM,EAAE;QACf,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE;YAClC,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,cAAc,CAAC,CAAC;QAC5C,CAAC,CAAC,CAAC;KACJ;SAAM;QACL,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE;YAClC,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;QACpC,CAAC,CAAC,CAAC;KACJ;AACH,CAAC;AAhDD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;kDAC5B;AAMf;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;mDAC3B;AAGhB;IADC,KAAK,CAAC,MAAM,CAAC;mDAC+B;AA0C/C,MAAM,CAAC,cAAc,CAAC,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,CAAC","sourcesContent":["import { ZuiBaseElement } from '@zywave/zui-base';\nimport { html } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { findAssignedElements } from '@zywave/zui-base/dist/utils/find-assigned-element.js';\nimport { style } from './zui-table-row-css.js';\n\n/**\n * @element zui-table-row\n *\n * @slot - Default slot; `<zui-table-cell>`s are declared here\n *\n * @cssprop [--zui-table-columns-template=repeat(auto-fit, minmax(0, 1fr))] - Override the table columns template. See {@link https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns} for more information on valid values.\n * @cssprop [--zui-table-summary-background-color=var(--zui-gray-600)] - Override the table summary background color\n * @cssprop [--zui-table-summary-text-color=#fff] - Override the table summary text color\n */\nexport class ZuiTableRowElement extends ZuiBaseElement {\n  /**\n   * Declare a table header; typically the first row in `<zui-table>`\n   */\n  @property({ type: Boolean, reflect: true })\n  header = false;\n\n  /**\n   * Declare a table summary row; typically the last row in `<zui-table>` before `<zui-table-footer>`\n   */\n  @property({ type: Boolean, reflect: true })\n  summary = false;\n\n  @query('slot')\n  private _slotEl: HTMLSlotElement | undefined;\n\n  private get _slottedCells() {\n    return findAssignedElements(this._slotEl, 'zui-table-cell');\n  }\n\n  static get styles() {\n    return [super.styles, style];\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute('role', 'row');\n  }\n\n  firstUpdated() {\n    this.#setCellsRole();\n  }\n\n  render() {\n    return html`<div>\n      <slot @slotchange=\"${this.#setCellsRole()}\"></slot>\n    </div>`;\n  }\n\n  #setCellsRole() {\n    if (!this._slottedCells) {\n      return;\n    }\n\n    if (this.header) {\n      this._slottedCells.forEach((cell) => {\n        cell.setAttribute('role', 'columnheader');\n      });\n    } else {\n      this._slottedCells.forEach((cell) => {\n        cell.setAttribute('role', 'cell');\n      });\n    }\n  }\n}\n\nwindow.customElements.define('zui-table-row', ZuiTableRowElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'zui-table-row': ZuiTableRowElement;\n  }\n}\n"]}
+{"version":3,"file":"zui-table-row.js","sourceRoot":"","sources":["../src/zui-table-row.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,QAAQ,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AACpE,OAAO,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAC;AAG/C;;;;;;;;GAQG;AACH,MAAM,OAAO,kBAAmB,SAAQ,cAAc;IAAtD;;;QACE;;WAEG;QAEH,WAAM,GAAG,KAAK,CAAC;QAEf;;WAEG;QAEH,YAAO,GAAG,KAAK,CAAC;IAqClB,CAAC;IAhCC,MAAM,KAAK,MAAM;QACf,OAAO,CAAC,KAAK,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;IAC/B,CAAC;IAED,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;IACnC,CAAC;IAED,YAAY;QACV,uBAAA,IAAI,uEAAc,MAAlB,IAAI,CAAgB,CAAC;IACvB,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;2BACY,uBAAA,IAAI,uEAAc,MAAlB,IAAI,CAAgB;WACpC,CAAC;IACV,CAAC;CAeF;;IAZG,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE;QACvB,OAAO;KACR;IAED,IAAI,IAAI,CAAC,MAAM,EAAE;QACf,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,cAAc,CAAC,CAAC,CAAC;KAC7E;SAAM;QACL,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC;KACrE;IAED,IAAI,CAAC,aAAa,EAAE,CAAC;AACvB,CAAC;AA1CD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;kDAC5B;AAMf;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;mDAC3B;AAGhB;IADC,qBAAqB,CAAC,EAAE,QAAQ,EAAE,gBAAgB,EAAE,CAAC;yDACJ;AAoCpD,MAAM,CAAC,cAAc,CAAC,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,CAAC","sourcesContent":["import { ZuiBaseElement } from '@zywave/zui-base';\nimport { html } from 'lit';\nimport { property, queryAssignedElements } from 'lit/decorators.js';\nimport { style } from './zui-table-row-css.js';\nimport type { ZuiTableCellElement } from './zui-table-cell.js';\n\n/**\n * @element zui-table-row\n *\n * @slot - Default slot; `<zui-table-cell>`s are declared here\n *\n * @cssprop [--zui-table-columns-template=repeat(auto-fit, minmax(0, 1fr))] - Override the table columns template. See {@link https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns} for more information on valid values.\n * @cssprop [--zui-table-summary-background-color=var(--zui-gray-600)] - Override the table summary background color\n * @cssprop [--zui-table-summary-text-color=#fff] - Override the table summary text color\n */\nexport class ZuiTableRowElement extends ZuiBaseElement {\n  /**\n   * Declare a table header; typically the first row in `<zui-table>`\n   */\n  @property({ type: Boolean, reflect: true })\n  header = false;\n\n  /**\n   * Declare a table summary row; typically the last row in `<zui-table>` before `<zui-table-footer>`\n   */\n  @property({ type: Boolean, reflect: true })\n  summary = false;\n\n  @queryAssignedElements({ selector: 'zui-table-cell' })\n  private _slottedCells: Array<ZuiTableCellElement>;\n\n  static get styles() {\n    return [super.styles, style];\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute('role', 'row');\n  }\n\n  firstUpdated() {\n    this.#setCellsRole();\n  }\n\n  render() {\n    return html`<div>\n      <slot @slotchange=\"${this.#setCellsRole()}\"></slot>\n    </div>`;\n  }\n\n  #setCellsRole() {\n    if (!this._slottedCells) {\n      return;\n    }\n\n    if (this.header) {\n      this._slottedCells.map((cell) => cell.setAttribute('role', 'columnheader'));\n    } else {\n      this._slottedCells.map((cell) => cell.setAttribute('role', 'cell'));\n    }\n\n    this.requestUpdate();\n  }\n}\n\nwindow.customElements.define('zui-table-row', ZuiTableRowElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'zui-table-row': ZuiTableRowElement;\n  }\n}\n"]}

package/dist/zui-table-topbar-css.js

@@ -1,3 +1,3 @@
 import { css } from 'lit';
-export const style = css `:host{contain:none}.topbar{display:flex;width:100%;min-height:3.75rem;align-items:center;padding:.625rem 1.25rem;background-color:var(--zui-gray-25)}.content{display:flex;flex:1;align-items:center}.content ::slotted(zui-search){--zui-search-border-color: var(--zui-gray-50)}.counter{flex-shrink:0;margin-left:auto;padding-left:.625rem;font-size:.75rem;color:var(--zui-gray-400)}.action{margin-left:.625rem}.action ::slotted(zui-button:not(:first-of-type)){margin-left:.625rem}slot[name=action]{display:flex}`;
+export const style = css `:host{contain:none}.topbar{display:flex;width:100%;min-height:3.75rem;align-items:center;padding:.625rem 1.25rem;background-color:var(--zui-gray-25);box-shadow:0 1px 3px rgba(0,0,0,.29)}@media(min-width: 45em){.topbar{box-shadow:none}}.content{display:flex;flex:1;align-items:center}.content ::slotted(zui-search){--zui-search-border-color: var(--zui-gray-50)}.counter{flex-shrink:0;margin-left:auto;padding-left:.625rem;font-size:.75rem;color:var(--zui-gray-400)}.action{margin-left:.625rem}.action ::slotted(zui-button:not(:first-of-type)){margin-left:.625rem}slot[name=action]{display:flex}`;
 //# sourceMappingURL=zui-table-topbar-css.js.map

package/dist/zui-table-topbar-css.js.map

@@ -1 +1 @@
-{"version":3,"file":"zui-table-topbar-css.js","sourceRoot":"","sources":["../src/zui-table-topbar-css.js"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,CAAA,6fAA6f,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const style = css`:host{contain:none}.topbar{display:flex;width:100%;min-height:3.75rem;align-items:center;padding:.625rem 1.25rem;background-color:var(--zui-gray-25)}.content{display:flex;flex:1;align-items:center}.content ::slotted(zui-search){--zui-search-border-color: var(--zui-gray-50)}.counter{flex-shrink:0;margin-left:auto;padding-left:.625rem;font-size:.75rem;color:var(--zui-gray-400)}.action{margin-left:.625rem}.action ::slotted(zui-button:not(:first-of-type)){margin-left:.625rem}slot[name=action]{display:flex}`;\n"]}
+{"version":3,"file":"zui-table-topbar-css.js","sourceRoot":"","sources":["../src/zui-table-topbar-css.js"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,CAAA,mlBAAmlB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const style = css`:host{contain:none}.topbar{display:flex;width:100%;min-height:3.75rem;align-items:center;padding:.625rem 1.25rem;background-color:var(--zui-gray-25);box-shadow:0 1px 3px rgba(0,0,0,.29)}@media(min-width: 45em){.topbar{box-shadow:none}}.content{display:flex;flex:1;align-items:center}.content ::slotted(zui-search){--zui-search-border-color: var(--zui-gray-50)}.counter{flex-shrink:0;margin-left:auto;padding-left:.625rem;font-size:.75rem;color:var(--zui-gray-400)}.action{margin-left:.625rem}.action ::slotted(zui-button:not(:first-of-type)){margin-left:.625rem}slot[name=action]{display:flex}`;\n"]}

package/dist/zui-table.d.ts

@@ -22,10 +22,12 @@ export declare class ZuiTableElement extends ZuiBaseElement {
      * Set to show or hide no results message when there are no results; use in conjunction with the assigned slot "no-results-message" to include a no results message
      */
     noResults: boolean;
-    private _slotEl;
-    private get _footer();
+    private _rows;
+    private _footer;
     static get styles(): import("lit").CSSResultGroup[];
+    constructor();
     connectedCallback(): void;
+    disconnectedCallback(): void;
     firstUpdated(): void;
     render(): import("lit-html").TemplateResult<1>;
 }

package/dist/zui-table.js

@@ -4,17 +4,23 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
 var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
     if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
     if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
     return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
 };
-var _ZuiTableElement_instances, _ZuiTableElement_renderNoResultsView, _ZuiTableElement_reassignFooter;
+var _ZuiTableElement_instances, _ZuiTableElement_internals, _ZuiTableElement_mobileBreakpoint, _ZuiTableElement_mobileHeadersEvent, _ZuiTableElement_renderNoResultsView, _ZuiTableElement_reassignFooter, _ZuiTableElement_addRowHeadersToCells, _ZuiTableElement_removeRowHeadersFromCells;
 import { ZuiBaseElement } from '@zywave/zui-base';
 import { html } from 'lit';
-import { property, query } from 'lit/decorators.js';
+import { property, queryAssignedElements } from 'lit/decorators.js';
 import { style } from './zui-table-css.js';
-import { findAssignedElement } from '@zywave/zui-base/dist/utils/find-assigned-element.js';
+import { screenBreakpoints } from '@zywave/zui-base/dist/utils/breakpoints';
 /**
  * @element zui-table
  *
@@ -30,7 +36,8 @@ import { findAssignedElement } from '@zywave/zui-base/dist/utils/find-assigned-e
  */
 export class ZuiTableElement extends ZuiBaseElement {
     constructor() {
-        super(...arguments);
+        var _a;
+        super();
         _ZuiTableElement_instances.add(this);
         /**
          * Set for alternating table row background colors
@@ -41,9 +48,12 @@ export class ZuiTableElement extends ZuiBaseElement {
          * Set to show or hide no results message when there are no results; use in conjunction with the assigned slot "no-results-message" to include a no results message
          */
         this.noResults = false;
-    }
-    get _footer() {
-        return findAssignedElement(this._slotEl, 'zui-table-footer');
+        _ZuiTableElement_internals.set(this, void 0);
+        _ZuiTableElement_mobileBreakpoint.set(this, window.matchMedia(`only screen and (max-width: ${screenBreakpoints.xsmall})`));
+        _ZuiTableElement_mobileHeadersEvent.set(this, (b) => {
+            b.matches ? __classPrivateFieldGet(this, _ZuiTableElement_instances, "m", _ZuiTableElement_addRowHeadersToCells).call(this) : __classPrivateFieldGet(this, _ZuiTableElement_instances, "m", _ZuiTableElement_removeRowHeadersFromCells).call(this);
+        });
+        __classPrivateFieldSet(this, _ZuiTableElement_internals, (_a = this.attachInternals) === null || _a === void 0 ? void 0 : _a.call(this), "f");
     }
     static get styles() {
         return [super.styles, style];
@@ -51,24 +61,79 @@ export class ZuiTableElement extends ZuiBaseElement {
     connectedCallback() {
         super.connectedCallback();
         this.setAttribute('role', 'table');
+        if (__classPrivateFieldGet(this, _ZuiTableElement_mobileBreakpoint, "f").addEventListener) {
+            __classPrivateFieldGet(this, _ZuiTableElement_mobileBreakpoint, "f").addEventListener('change', __classPrivateFieldGet(this, _ZuiTableElement_mobileHeadersEvent, "f"));
+        }
+        else {
+            __classPrivateFieldGet(this, _ZuiTableElement_mobileBreakpoint, "f").addListener(__classPrivateFieldGet(this, _ZuiTableElement_mobileHeadersEvent, "f"));
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        if (__classPrivateFieldGet(this, _ZuiTableElement_mobileBreakpoint, "f").addEventListener) {
+            __classPrivateFieldGet(this, _ZuiTableElement_mobileBreakpoint, "f").removeEventListener('change', __classPrivateFieldGet(this, _ZuiTableElement_mobileHeadersEvent, "f"));
+        }
+        else if (__classPrivateFieldGet(this, _ZuiTableElement_mobileBreakpoint, "f").addListener) {
+            __classPrivateFieldGet(this, _ZuiTableElement_mobileBreakpoint, "f").removeListener(__classPrivateFieldGet(this, _ZuiTableElement_mobileHeadersEvent, "f"));
+        }
     }
     firstUpdated() {
         __classPrivateFieldGet(this, _ZuiTableElement_instances, "m", _ZuiTableElement_reassignFooter).call(this);
+        __classPrivateFieldGet(this, _ZuiTableElement_mobileBreakpoint, "f").matches ? __classPrivateFieldGet(this, _ZuiTableElement_instances, "m", _ZuiTableElement_addRowHeadersToCells).call(this) : __classPrivateFieldGet(this, _ZuiTableElement_instances, "m", _ZuiTableElement_removeRowHeadersFromCells).call(this);
     }
     render() {
         return html `<div class="table">
-        <slot></slot>
+        <slot
+          @slotchange="${__classPrivateFieldGet(this, _ZuiTableElement_mobileBreakpoint, "f").matches
+            ? __classPrivateFieldGet(this, _ZuiTableElement_instances, "m", _ZuiTableElement_addRowHeadersToCells).call(this)
+            : __classPrivateFieldGet(this, _ZuiTableElement_instances, "m", _ZuiTableElement_removeRowHeadersFromCells).call(this)}"
+        ></slot>
         ${this.noResults ? __classPrivateFieldGet(this, _ZuiTableElement_instances, "m", _ZuiTableElement_renderNoResultsView).call(this) : ``}</div
       >
       <div><slot name="footer"></slot></div>`;
     }
 }
-_ZuiTableElement_instances = new WeakSet(), _ZuiTableElement_renderNoResultsView = function _ZuiTableElement_renderNoResultsView() {
+_ZuiTableElement_internals = new WeakMap(), _ZuiTableElement_mobileBreakpoint = new WeakMap(), _ZuiTableElement_mobileHeadersEvent = new WeakMap(), _ZuiTableElement_instances = new WeakSet(), _ZuiTableElement_renderNoResultsView = function _ZuiTableElement_renderNoResultsView() {
     return html `<div class="no-results"><slot name="no-results-message"></slot></div>`;
 }, _ZuiTableElement_reassignFooter = function _ZuiTableElement_reassignFooter() {
-    if (this._footer) {
-        this._footer.setAttribute('slot', 'footer');
+    var _a;
+    (_a = this._footer) === null || _a === void 0 ? void 0 : _a.map((f) => f.setAttribute('slot', 'footer'));
+}, _ZuiTableElement_addRowHeadersToCells = function _ZuiTableElement_addRowHeadersToCells() {
+    var _a, _b;
+    const rowHeadersList = this._rows.filter((h) => h.hasAttribute('header'));
+    const rowBodyList = this._rows.filter((r) => !r.hasAttribute('header') && !r.hasAttribute('summary'));
+    if (rowHeadersList.length > 0) {
+        for (const row of rowBodyList) {
+            for (let i = 0; i < row.children.length; i++) {
+                const cell = row.children[i];
+                if (!cell.shadowRoot.querySelector('.header')) {
+                    const rowHeaderContainer = document.createElement('div');
+                    rowHeaderContainer.classList.add('header');
+                    const rowHeaderText = rowHeadersList[0].children[i].textContent;
+                    rowHeaderContainer.innerText = rowHeaderText;
+                    cell.shadowRoot.prepend(rowHeaderContainer);
+                }
+            }
+        }
     }
+    // add custom state --mobile to zui-table
+    (_b = (_a = __classPrivateFieldGet(this, _ZuiTableElement_internals, "f")) === null || _a === void 0 ? void 0 : _a.states) === null || _b === void 0 ? void 0 : _b.add('--mobile');
+    this.requestUpdate();
+}, _ZuiTableElement_removeRowHeadersFromCells = function _ZuiTableElement_removeRowHeadersFromCells() {
+    var _a, _b;
+    const rowBodyList = this._rows.filter((r) => !r.hasAttribute('header') && !r.hasAttribute('summary'));
+    for (const row of rowBodyList) {
+        for (let i = 0; i < row.children.length; i++) {
+            const rowChildren = row.children[i].shadowRoot;
+            const header = rowChildren.querySelector('.header');
+            if (header) {
+                rowChildren.removeChild(header);
+            }
+        }
+    }
+    // remove custom state --mobile from zui-table
+    ((_b = (_a = __classPrivateFieldGet(this, _ZuiTableElement_internals, "f")) === null || _a === void 0 ? void 0 : _a.states) === null || _b === void 0 ? void 0 : _b.has('--mobile')) && __classPrivateFieldGet(this, _ZuiTableElement_internals, "f").states.delete('--mobile');
+    this.requestUpdate();
 };
 __decorate([
     property({ type: Boolean, reflect: true })
@@ -77,7 +142,10 @@ __decorate([
     property({ type: Boolean, reflect: true, attribute: 'no-results' })
 ], ZuiTableElement.prototype, "noResults", void 0);
 __decorate([
-    query('slot')
-], ZuiTableElement.prototype, "_slotEl", void 0);
+    queryAssignedElements({ selector: 'zui-table-row' })
+], ZuiTableElement.prototype, "_rows", void 0);
+__decorate([
+    queryAssignedElements({ selector: 'zui-table-footer' })
+], ZuiTableElement.prototype, "_footer", void 0);
 window.customElements.define('zui-table', ZuiTableElement);
 //# sourceMappingURL=zui-table.js.map

package/dist/zui-table.js.map

@@ -1 +1 @@
-{"version":3,"file":"zui-table.js","sourceRoot":"","sources":["../src/zui-table.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,mBAAmB,EAAE,MAAM,sDAAsD,CAAC;AAE3F;;;;;;;;;;;;GAYG;AAEH,MAAM,OAAO,eAAgB,SAAQ,cAAc;IAAnD;;;QACE;;WAEG;QAEH,WAAM,GAAG,KAAK,CAAC;QAEf,iEAAiE;QAEjE;;WAEG;QAEH,cAAS,GAAG,KAAK,CAAC;IAuCpB,CAAC;IAlCC,IAAY,OAAO;QACjB,OAAO,mBAAmB,CAAC,IAAI,CAAC,OAAO,EAAE,kBAAkB,CAAC,CAAC;IAC/D,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,CAAC,KAAK,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;IAC/B,CAAC;IAED,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACrC,CAAC;IAED,YAAY;QACV,uBAAA,IAAI,mEAAgB,MAApB,IAAI,CAAkB,CAAC;IACzB,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,uBAAA,IAAI,wEAAqB,MAAzB,IAAI,CAAuB,CAAC,CAAC,CAAC,EAAE;;6CAEd,CAAC;IAC5C,CAAC;CAWF;;IARG,OAAO,IAAI,CAAA,uEAAuE,CAAC;AACrF,CAAC;IAGC,IAAI,IAAI,CAAC,OAAO,EAAE;QAChB,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;KAC7C;AACH,CAAC;AA9CD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;+CAC5B;AAQf;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC;kDAClD;AAGlB;IADC,KAAK,CAAC,MAAM,CAAC;gDACmB;AAsCnC,MAAM,CAAC,cAAc,CAAC,MAAM,CAAC,WAAW,EAAE,eAAe,CAAC,CAAC","sourcesContent":["import { ZuiBaseElement } from '@zywave/zui-base';\nimport { html } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { style } from './zui-table-css.js';\nimport { findAssignedElement } from '@zywave/zui-base/dist/utils/find-assigned-element.js';\n\n/**\n * @element zui-table\n *\n * @slot - Default slot; all table content will appear here, such as table rows\n * @slot no-results-message - Customize the no results message that is shown when the `no-results` attribute is set on `<zui-table>`: `<zui-table no-results>`\n * @slot footer - Only for `<zui-table-footer>`. When there is a `<zui-table-footer>` present inside `<zui-table>`, it will be auto-assigned to this slot in order to place it outside of the rendered table for styling purposes.\n *\n * @cssprop [--zui-table-cell-padding=13px 20px] - Override cell padding\n * @cssprop [--zui-table-columns-template=repeat(auto-fit, minmax(0, 1fr))] - Override the table columns template. See {@link https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns} for more information on valid values.\n * @cssprop [--zui-table-summary-background-color=var(--zui-gray-600)] - Override the table summary background color\n * @cssprop [--zui-table-summary-text-color=#fff] - Override the the table summary text color\n * @cssprop [--zui-table-footer-margin=10px] - Override the margin between the table and footer of the table\n */\n\nexport class ZuiTableElement extends ZuiBaseElement {\n  /**\n   * Set for alternating table row background colors\n   */\n  @property({ type: Boolean, reflect: true })\n  banded = false;\n\n  // TODO: add divided prop so all table cells will have 1px border\n\n  /**\n   * Set to show or hide no results message when there are no results; use in conjunction with the assigned slot \"no-results-message\" to include a no results message\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'no-results' })\n  noResults = false;\n\n  @query('slot')\n  private _slotEl: HTMLSlotElement;\n\n  private get _footer() {\n    return findAssignedElement(this._slotEl, 'zui-table-footer');\n  }\n\n  static get styles() {\n    return [super.styles, style];\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute('role', 'table');\n  }\n\n  firstUpdated() {\n    this.#reassignFooter();\n  }\n\n  render() {\n    return html`<div class=\"table\">\n        <slot></slot>\n        ${this.noResults ? this.#renderNoResultsView() : ``}</div\n      >\n      <div><slot name=\"footer\"></slot></div>`;\n  }\n\n  #renderNoResultsView() {\n    return html`<div class=\"no-results\"><slot name=\"no-results-message\"></slot></div>`;\n  }\n\n  #reassignFooter() {\n    if (this._footer) {\n      this._footer.setAttribute('slot', 'footer');\n    }\n  }\n}\n\nwindow.customElements.define('zui-table', ZuiTableElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'zui-table': ZuiTableElement;\n  }\n}\n"]}
+{"version":3,"file":"zui-table.js","sourceRoot":"","sources":["../src/zui-table.ts"],"names":[],"mappings":"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","sourcesContent":["import { ZuiBaseElement } from '@zywave/zui-base';\nimport { html } from 'lit';\nimport { property, queryAssignedElements } from 'lit/decorators.js';\nimport { style } from './zui-table-css.js';\nimport { screenBreakpoints } from '@zywave/zui-base/dist/utils/breakpoints';\nimport type { ZuiTableRowElement } from './zui-table-row.js';\nimport type { ZuiTableFooterElement } from './zui-table-footer.js';\n\n/**\n * @element zui-table\n *\n * @slot - Default slot; all table content will appear here, such as table rows\n * @slot no-results-message - Customize the no results message that is shown when the `no-results` attribute is set on `<zui-table>`: `<zui-table no-results>`\n * @slot footer - Only for `<zui-table-footer>`. When there is a `<zui-table-footer>` present inside `<zui-table>`, it will be auto-assigned to this slot in order to place it outside of the rendered table for styling purposes.\n *\n * @cssprop [--zui-table-cell-padding=13px 20px] - Override cell padding\n * @cssprop [--zui-table-columns-template=repeat(auto-fit, minmax(0, 1fr))] - Override the table columns template. See {@link https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns} for more information on valid values.\n * @cssprop [--zui-table-summary-background-color=var(--zui-gray-600)] - Override the table summary background color\n * @cssprop [--zui-table-summary-text-color=#fff] - Override the the table summary text color\n * @cssprop [--zui-table-footer-margin=10px] - Override the margin between the table and footer of the table\n */\n\nexport class ZuiTableElement extends ZuiBaseElement {\n  /**\n   * Set for alternating table row background colors\n   */\n  @property({ type: Boolean, reflect: true })\n  banded = false;\n\n  // TODO: add divided prop so all table cells will have 1px border\n\n  /**\n   * Set to show or hide no results message when there are no results; use in conjunction with the assigned slot \"no-results-message\" to include a no results message\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'no-results' })\n  noResults = false;\n\n  @queryAssignedElements({ selector: 'zui-table-row' })\n  private _rows: Array<ZuiTableRowElement>;\n\n  @queryAssignedElements({ selector: 'zui-table-footer' })\n  private _footer: Array<ZuiTableFooterElement>;\n\n  #internals?: ElementInternals;\n\n  #mobileBreakpoint: MediaQueryList = window.matchMedia(`only screen and (max-width: ${screenBreakpoints.xsmall})`);\n\n  #mobileHeadersEvent = (b: MediaQueryListEvent) => {\n    b.matches ? this.#addRowHeadersToCells() : this.#removeRowHeadersFromCells();\n  };\n\n  static get styles() {\n    return [super.styles, style];\n  }\n\n  constructor() {\n    super();\n\n    this.#internals = this.attachInternals?.();\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute('role', 'table');\n\n    if (this.#mobileBreakpoint.addEventListener) {\n      this.#mobileBreakpoint.addEventListener('change', this.#mobileHeadersEvent);\n    } else {\n      this.#mobileBreakpoint.addListener(this.#mobileHeadersEvent);\n    }\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n\n    if (this.#mobileBreakpoint.addEventListener) {\n      this.#mobileBreakpoint.removeEventListener('change', this.#mobileHeadersEvent);\n    } else if (this.#mobileBreakpoint.addListener) {\n      this.#mobileBreakpoint.removeListener(this.#mobileHeadersEvent);\n    }\n  }\n\n  firstUpdated() {\n    this.#reassignFooter();\n\n    this.#mobileBreakpoint.matches ? this.#addRowHeadersToCells() : this.#removeRowHeadersFromCells();\n  }\n\n  render() {\n    return html`<div class=\"table\">\n        <slot\n          @slotchange=\"${this.#mobileBreakpoint.matches\n            ? this.#addRowHeadersToCells()\n            : this.#removeRowHeadersFromCells()}\"\n        ></slot>\n        ${this.noResults ? this.#renderNoResultsView() : ``}</div\n      >\n      <div><slot name=\"footer\"></slot></div>`;\n  }\n\n  #renderNoResultsView() {\n    return html`<div class=\"no-results\"><slot name=\"no-results-message\"></slot></div>`;\n  }\n\n  #reassignFooter() {\n    this._footer?.map((f) => f.setAttribute('slot', 'footer'));\n  }\n\n  #addRowHeadersToCells() {\n    const rowHeadersList = this._rows.filter((h) => h.hasAttribute('header'));\n    const rowBodyList = this._rows.filter((r) => !r.hasAttribute('header') && !r.hasAttribute('summary'));\n\n    if (rowHeadersList.length > 0) {\n      for (const row of rowBodyList) {\n        for (let i = 0; i < row.children.length; i++) {\n          const cell = row.children[i];\n          if (!cell.shadowRoot.querySelector('.header')) {\n            const rowHeaderContainer = document.createElement('div');\n            rowHeaderContainer.classList.add('header');\n            const rowHeaderText = rowHeadersList[0].children[i].textContent;\n            rowHeaderContainer.innerText = rowHeaderText;\n            cell.shadowRoot.prepend(rowHeaderContainer);\n          }\n        }\n      }\n    }\n\n    // add custom state --mobile to zui-table\n    this.#internals?.states?.add('--mobile');\n\n    this.requestUpdate();\n  }\n\n  #removeRowHeadersFromCells() {\n    const rowBodyList = this._rows.filter((r) => !r.hasAttribute('header') && !r.hasAttribute('summary'));\n\n    for (const row of rowBodyList) {\n      for (let i = 0; i < row.children.length; i++) {\n        const rowChildren = row.children[i].shadowRoot;\n        const header = rowChildren.querySelector('.header');\n        if (header) {\n          rowChildren.removeChild(header);\n        }\n      }\n    }\n\n    // remove custom state --mobile from zui-table\n    this.#internals?.states?.has('--mobile') && this.#internals.states.delete('--mobile');\n\n    this.requestUpdate();\n  }\n}\n\nwindow.customElements.define('zui-table', ZuiTableElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'zui-table': ZuiTableElement;\n  }\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zywave/zui-table",
-  "version": "4.0.1-pre.2",
+  "version": "4.0.1",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "license": "UNLICENSED",
@@ -21,7 +21,7 @@
   },
   "customElements": "dist/custom-elements.json",
   "dependencies": {
-    "@zywave/zui-base": "^4.1.19-pre.2"
+    "@zywave/zui-base": "^4.1.19"
   },
-  "gitHead": "3e298837477b09bfe5de979305b5f16164ef72a0"
+  "gitHead": "be591f9f992e3555c1891d00a70b140e56bd6616"
 }

package/src/css/zui-table.fouc.scss

@@ -1,4 +1,5 @@
 @use '@zywave/zui-sass-scripts' as *;
+@use '@zywave/zui-base-styles/src/variables' as *;
 
 zui-table {
   @include undefined-element {
@@ -76,17 +77,30 @@ zui-table-topbar {
 
 zui-table-row {
   @include undefined-element {
-    display: flex;
+    display: grid;
+    grid-template-columns: auto;
+    padding: rem(10) 0;
     background-color: #fff;
+
+    @media (min-width: $bp-xs) {
+      display: flex;
+      padding: 0;
+    }
   }
 }
 
 zui-table-row[header] {
   @include undefined-element {
+    display: none;
     background-color: #fff;
     border-bottom: 1px solid var(--zui-gray-200);
 
+    @media (min-width: $bp-xs) {
+      display: flex;
+    }
+
     zui-table-cell {
+      --zui-table-cell-padding: #{rem(8.5)} #{rem(20)};
       font-weight: 600;
     }
   }
@@ -94,7 +108,11 @@ zui-table-row[header] {
 
 zui-table-row:not([header]) {
   @include undefined-element {
-    border-bottom: 1px solid var(--zui-gray-100);
+    border-bottom: 3px solid var(--zui-gray-100);
+
+    @media (min-width: $bp-xs) {
+      border-bottom-width: 1px;
+    }
   }
 }
 
@@ -119,15 +137,26 @@ zui-table-cell {
   @include undefined-element {
     flex-grow: 1;
     flex-basis: 0;
-    padding: var(--zui-table-cell-padding, #{rem(13)} #{rem(20)});
+    padding: var(--zui-table-cell-padding, #{rem(5)} #{rem(15)});
+
+    @media (min-width: $bp-xs) {
+      padding: var(--zui-table-cell-padding, #{rem(13)} #{rem(20)});
+    }
   }
 }
 
 zui-table-cell[action] {
   @include undefined-element {
-    --zui-table-cell-padding: #{rem(6) #{rem(20)}};
     display: flex;
     align-items: center;
+
+    @media (min-width: $bp-xs) {
+      --zui-table-cell-padding: #{rem(6) #{rem(20)}};
+    }
+
+    zui-button:not(:first-of-type) {
+      margin-left: rem(10);
+    }
   }
 }
 

package/src/element-internals.d.ts

@@ -0,0 +1,69 @@
+// can remove once https://github.com/microsoft/TSJS-lib-generator/pull/818 is merged
+// TODO: duplicate file, figure out how to add global *.d.ts files to monorepo
+
+interface ValidityStateFlags {
+  badInput?: boolean;
+  customError?: boolean;
+  patternMismatch?: boolean;
+  rangeOverflow?: boolean;
+  rangeUnderflow?: boolean;
+  stepMismatch?: boolean;
+  tooLong?: boolean;
+  tooShort?: boolean;
+  typeMismatch?: boolean;
+  valueMissing?: boolean;
+}
+
+interface ElementInternals {
+  /**
+   * Returns the form owner of internals's target element.
+   */
+  readonly form: HTMLFormElement | null;
+  /**
+   * Returns a NodeList of all the label elements that internals's target element is associated with.
+   */
+  readonly labels: NodeList;
+  /**
+   * Returns the error message that would be shown to the user if internals's target element was to be checked for validity.
+   */
+  readonly validationMessage: string;
+  /**
+   * Returns the ValidityState object for internals's target element.
+   */
+  readonly validity: ValidityState;
+  /**
+   * Returns true if internals's target element will be validated when the form is submitted; false otherwise.
+   */
+  readonly willValidate: boolean;
+  /**
+   * Returns true if internals's target element has no validity problems; false otherwise. Fires an invalid event at the element in the latter case.
+   */
+  checkValidity(): boolean;
+  /**
+   * Returns true if internals's target element has no validity problems; otherwise, returns false, fires an invalid event at the element, and (if the event isn't canceled) reports the problem to the user.
+   */
+  reportValidity(): boolean;
+  /**
+   * Sets both the state and submission value of internals's target element to value.
+   *
+   * If value is null, the element won't participate in form submission.
+   */
+  setFormValue(value: File | string | FormData | null, state?: File | string | FormData | null): void;
+  /**
+   * Marks internals's target element as suffering from the constraints indicated by the flags argument, and sets the element's validation message to message. If anchor is specified, the user agent might use it to indicate problems with the constraints of internals's target element when the form owner is validated interactively or reportValidity() is called.
+   */
+  setValidity(flags: ValidityStateFlags, message?: string, anchor?: HTMLElement): void;
+  /**
+   * Defines custom states for an element to be styled with CSS Pseudoselectors
+   */
+  states?: Set;
+}
+
+declare var ElementInternals: {
+  prototype: ElementInternals;
+  new (): ElementInternals;
+};
+
+interface HTMLElement {
+  attachInternals?(): ElementInternals;
+}

package/src/zui-table-cell-css.js

@@ -1,3 +1,3 @@
 import { css } from 'lit';
 
-export const style = css`:host{contain:none}:host([action]) div{--zui-table-cell-padding: 0.375rem 1.25rem;display:flex;align-items:center}div{height:100%;padding:var(--zui-table-cell-padding, 0.8125rem 1.25rem)}`;
+export const style = css`:host{contain:none}:host([action]) div{display:flex}@media(min-width: 45em){:host([action]) div{--zui-table-cell-padding: 0.375rem 1.25rem;align-items:center}}:host([action]) ::slotted(zui-button:not(:first-of-type)){margin-left:.625rem}div{padding:var(--zui-table-cell-padding, 0.3125rem 0.9375rem)}@media(min-width: 45em){div{padding:var(--zui-table-cell-padding, 0.8125rem 1.25rem)}}div.header{float:left;width:33.333%;font-weight:600}div.header+div{padding:var(--zui-table-cell-padding, 0.3125rem 0.9375rem 0.3125rem 0)}`;

package/src/zui-table-cell.scss

@@ -1,4 +1,5 @@
 @use '@zywave/zui-sass-scripts' as *;
+@use '@zywave/zui-base-styles/src/variables' as *;
 
 :host {
   contain: none;
@@ -6,13 +7,32 @@
 
 :host([action]) {
   div {
-    --zui-table-cell-padding: #{rem(6) #{rem(20)}};
     display: flex;
-    align-items: center;
+    @media (min-width: $bp-xs) {
+      --zui-table-cell-padding: #{rem(6)} #{rem(20)};
+      align-items: center;
+    }
+  }
+
+  ::slotted(zui-button:not(:first-of-type)) {
+    margin-left: rem(10);
   }
 }
 
 div {
-  height: 100%;
-  padding: var(--zui-table-cell-padding, #{rem(13)} #{rem(20)});
+  padding: var(--zui-table-cell-padding, #{rem(5)} #{rem(15)});
+
+  @media (min-width: $bp-xs) {
+    padding: var(--zui-table-cell-padding, #{rem(13)} #{rem(20)});
+  }
+}
+
+div.header {
+  float: left;
+  width: 33.333%;
+  font-weight: 600;
+
+  + div {
+    padding: var(--zui-table-cell-padding, #{rem(5)} #{rem(15)} #{rem(5)} 0);
+  }
 }

package/src/zui-table-css.js

@@ -1,3 +1,3 @@
 import { css } from 'lit';
 
-export const style = css`:host{contain:none;display:block}:host([banded]) ::slotted(zui-table-row:not([header]):nth-child(even)){background-color:var(--zui-gray-25)}:host([banded]) ::slotted(zui-table-row:not([header])){border:0}:host([no-results]) .no-results{padding:.75rem 1.25rem}::slotted(zui-table-row:not([header])){border-bottom:1px solid var(--zui-gray-100)}::slotted(zui-table-row:not([header]):last-of-type){border-bottom:0}.table{display:flex;width:100%;flex-direction:column;background-color:#fff;box-shadow:0 1px 3px rgba(0,0,0,.29);border-collapse:collapse;border-spacing:0}`;
+export const style = css`:host{contain:none;display:block}:host([banded]) ::slotted(zui-table-row:not([header]):nth-child(even)){background-color:var(--zui-gray-25)}:host([banded]) ::slotted(zui-table-row:not([header])){border:0}:host([no-results]) .no-results{padding:.75rem 1.25rem;background-color:#fff;box-shadow:0 1px 3px rgba(0,0,0,.29)}@media(min-width: 45em){:host([no-results]) .no-results{background-color:transparent;box-shadow:none}}::slotted(zui-table-row:not([header])){border-bottom:3px solid var(--zui-gray-100)}@media(min-width: 45em){::slotted(zui-table-row:not([header])){border-bottom-width:1px}}::slotted(zui-table-row:not([header]):last-of-type){border-bottom:0}.table{display:flex;width:100%;flex-direction:column;box-shadow:0 1px 3px rgba(0,0,0,.29);border-collapse:collapse;border-spacing:0}@media(min-width: 45em){.table{background-color:#fff}}`;

package/src/zui-table-row-css.js

@@ -1,3 +1,3 @@
 import { css } from 'lit';
 
-export const style = css`:host{contain:none}:host([header]){background-color:#fff;border-bottom:1px solid var(--zui-gray-200)}:host([header]) ::slotted(zui-table-cell){--zui-table-cell-padding: 0.53125rem 1.25rem;font-weight:600}div{display:grid;grid-template-columns:var(--zui-table-columns-template, repeat(auto-fit, minmax(0, 1fr)))}:host([summary]){background-color:var(--zui-table-summary-background-color, var(--zui-gray-600)) !important}:host([summary]) ::slotted(zui-table-cell){font-weight:600;color:var(--zui-table-summary-text-color, #fff)}`;
+export const style = css`:host{contain:none}:host(:last-of-type:not([summary])) div,:host([summary]) div{margin-bottom:0}:host([header]){display:none;background-color:#fff;border-bottom:1px solid var(--zui-gray-200)}:host([header]) ::slotted(zui-table-cell){--zui-table-cell-padding: 0.53125rem 1.25rem;font-weight:600}@media(min-width: 45em){:host([header]){display:block}}div{display:grid;grid-template-columns:auto;margin-bottom:0;padding:.625rem 0;background-color:#fff}@media(min-width: 45em){div{grid-template-columns:var(--zui-table-columns-template, repeat(auto-fit, minmax(0, 1fr)));padding:0;background-color:transparent}}:host([summary]){background-color:var(--zui-table-summary-background-color, var(--zui-gray-600)) !important}:host([summary]) div{margin-bottom:0;background-color:transparent}:host([summary]) ::slotted(zui-table-cell){font-weight:600;color:var(--zui-table-summary-text-color, #fff)}`;

package/src/zui-table-row.scss

@@ -1,10 +1,19 @@
 @use '@zywave/zui-sass-scripts' as *;
+@use '@zywave/zui-base-styles/src/variables' as *;
 
 :host {
   contain: none;
 }
 
+:host(:last-of-type:not([summary])),
+:host([summary]) {
+  div {
+    margin-bottom: 0;
+  }
+}
+
 :host([header]) {
+  display: none;
   background-color: #fff;
   border-bottom: 1px solid var(--zui-gray-200);
 
@@ -12,16 +21,34 @@
     --zui-table-cell-padding: #{rem(8.5)} #{rem(20)};
     font-weight: 600;
   }
+
+  @media (min-width: $bp-xs) {
+    display: block;
+  }
 }
 
 div {
   display: grid;
-  grid-template-columns: var(--zui-table-columns-template, repeat(auto-fit, minmax(0, 1fr)));
+  grid-template-columns: auto;
+  margin-bottom: 0;
+  padding: rem(10) 0;
+  background-color: #fff;
+
+  @media (min-width: $bp-xs) {
+    grid-template-columns: var(--zui-table-columns-template, repeat(auto-fit, minmax(0, 1fr)));
+    padding: 0;
+    background-color: transparent;
+  }
 }
 
 :host([summary]) {
   background-color: var(--zui-table-summary-background-color, var(--zui-gray-600)) !important;
 
+  div {
+    margin-bottom: 0;
+    background-color: transparent;
+  }
+
   ::slotted(zui-table-cell) {
     font-weight: 600;
     color: var(--zui-table-summary-text-color, #fff);

package/src/zui-table-row.ts

@@ -1,8 +1,8 @@
 import { ZuiBaseElement } from '@zywave/zui-base';
 import { html } from 'lit';
-import { property, query } from 'lit/decorators.js';
-import { findAssignedElements } from '@zywave/zui-base/dist/utils/find-assigned-element.js';
+import { property, queryAssignedElements } from 'lit/decorators.js';
 import { style } from './zui-table-row-css.js';
+import type { ZuiTableCellElement } from './zui-table-cell.js';
 
 /**
  * @element zui-table-row
@@ -26,12 +26,8 @@ export class ZuiTableRowElement extends ZuiBaseElement {
   @property({ type: Boolean, reflect: true })
   summary = false;
 
-  @query('slot')
-  private _slotEl: HTMLSlotElement | undefined;
-
-  private get _slottedCells() {
-    return findAssignedElements(this._slotEl, 'zui-table-cell');
-  }
+  @queryAssignedElements({ selector: 'zui-table-cell' })
+  private _slottedCells: Array<ZuiTableCellElement>;
 
   static get styles() {
     return [super.styles, style];
@@ -58,14 +54,12 @@ export class ZuiTableRowElement extends ZuiBaseElement {
     }
 
     if (this.header) {
-      this._slottedCells.forEach((cell) => {
-        cell.setAttribute('role', 'columnheader');
-      });
+      this._slottedCells.map((cell) => cell.setAttribute('role', 'columnheader'));
     } else {
-      this._slottedCells.forEach((cell) => {
-        cell.setAttribute('role', 'cell');
-      });
+      this._slottedCells.map((cell) => cell.setAttribute('role', 'cell'));
     }
+
+    this.requestUpdate();
   }
 }
 

package/src/zui-table-topbar-css.js

@@ -1,3 +1,3 @@
 import { css } from 'lit';
 
-export const style = css`:host{contain:none}.topbar{display:flex;width:100%;min-height:3.75rem;align-items:center;padding:.625rem 1.25rem;background-color:var(--zui-gray-25)}.content{display:flex;flex:1;align-items:center}.content ::slotted(zui-search){--zui-search-border-color: var(--zui-gray-50)}.counter{flex-shrink:0;margin-left:auto;padding-left:.625rem;font-size:.75rem;color:var(--zui-gray-400)}.action{margin-left:.625rem}.action ::slotted(zui-button:not(:first-of-type)){margin-left:.625rem}slot[name=action]{display:flex}`;
+export const style = css`:host{contain:none}.topbar{display:flex;width:100%;min-height:3.75rem;align-items:center;padding:.625rem 1.25rem;background-color:var(--zui-gray-25);box-shadow:0 1px 3px rgba(0,0,0,.29)}@media(min-width: 45em){.topbar{box-shadow:none}}.content{display:flex;flex:1;align-items:center}.content ::slotted(zui-search){--zui-search-border-color: var(--zui-gray-50)}.counter{flex-shrink:0;margin-left:auto;padding-left:.625rem;font-size:.75rem;color:var(--zui-gray-400)}.action{margin-left:.625rem}.action ::slotted(zui-button:not(:first-of-type)){margin-left:.625rem}slot[name=action]{display:flex}`;

package/src/zui-table-topbar.scss

@@ -1,4 +1,5 @@
 @use '@zywave/zui-sass-scripts' as *;
+@use '@zywave/zui-base-styles/src/variables' as *;
 
 :host {
   contain: none;
@@ -11,6 +12,11 @@
   align-items: center;
   padding: rem(10) rem(20);
   background-color: var(--zui-gray-25);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.29);
+
+  @media (min-width: $bp-xs) {
+    box-shadow: none;
+  }
 }
 
 .content {

package/src/zui-table.scss

@@ -1,4 +1,5 @@
 @use '@zywave/zui-sass-scripts' as *;
+@use '@zywave/zui-base-styles/src/variables' as *;
 
 :host {
   contain: none;
@@ -18,11 +19,22 @@
 :host([no-results]) {
   .no-results {
     padding: rem(12) rem(20);
+    background-color: #fff;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.29);
+
+    @media (min-width: $bp-xs) {
+      background-color: transparent;
+      box-shadow: none;
+    }
   }
 }
 
 ::slotted(zui-table-row:not([header])) {
-  border-bottom: 1px solid var(--zui-gray-100);
+  border-bottom: 3px solid var(--zui-gray-100);
+
+  @media (min-width: $bp-xs) {
+    border-bottom-width: 1px;
+  }
 }
 
 ::slotted(zui-table-row:not([header]):last-of-type) {
@@ -33,8 +45,11 @@
   display: flex;
   width: 100%;
   flex-direction: column;
-  background-color: #fff;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.29);
   border-collapse: collapse;
   border-spacing: 0;
+
+  @media (min-width: $bp-xs) {
+    background-color: #fff;
+  }
 }

package/src/zui-table.ts

@@ -1,8 +1,10 @@
 import { ZuiBaseElement } from '@zywave/zui-base';
 import { html } from 'lit';
-import { property, query } from 'lit/decorators.js';
+import { property, queryAssignedElements } from 'lit/decorators.js';
 import { style } from './zui-table-css.js';
-import { findAssignedElement } from '@zywave/zui-base/dist/utils/find-assigned-element.js';
+import { screenBreakpoints } from '@zywave/zui-base/dist/utils/breakpoints';
+import type { ZuiTableRowElement } from './zui-table-row.js';
+import type { ZuiTableFooterElement } from './zui-table-footer.js';
 
 /**
  * @element zui-table
@@ -33,29 +35,64 @@ export class ZuiTableElement extends ZuiBaseElement {
   @property({ type: Boolean, reflect: true, attribute: 'no-results' })
   noResults = false;
 
-  @query('slot')
-  private _slotEl: HTMLSlotElement;
+  @queryAssignedElements({ selector: 'zui-table-row' })
+  private _rows: Array<ZuiTableRowElement>;
 
-  private get _footer() {
-    return findAssignedElement(this._slotEl, 'zui-table-footer');
-  }
+  @queryAssignedElements({ selector: 'zui-table-footer' })
+  private _footer: Array<ZuiTableFooterElement>;
+
+  #internals?: ElementInternals;
+
+  #mobileBreakpoint: MediaQueryList = window.matchMedia(`only screen and (max-width: ${screenBreakpoints.xsmall})`);
+
+  #mobileHeadersEvent = (b: MediaQueryListEvent) => {
+    b.matches ? this.#addRowHeadersToCells() : this.#removeRowHeadersFromCells();
+  };
 
   static get styles() {
     return [super.styles, style];
   }
 
+  constructor() {
+    super();
+
+    this.#internals = this.attachInternals?.();
+  }
+
   connectedCallback() {
     super.connectedCallback();
     this.setAttribute('role', 'table');
+
+    if (this.#mobileBreakpoint.addEventListener) {
+      this.#mobileBreakpoint.addEventListener('change', this.#mobileHeadersEvent);
+    } else {
+      this.#mobileBreakpoint.addListener(this.#mobileHeadersEvent);
+    }
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+
+    if (this.#mobileBreakpoint.addEventListener) {
+      this.#mobileBreakpoint.removeEventListener('change', this.#mobileHeadersEvent);
+    } else if (this.#mobileBreakpoint.addListener) {
+      this.#mobileBreakpoint.removeListener(this.#mobileHeadersEvent);
+    }
   }
 
   firstUpdated() {
     this.#reassignFooter();
+
+    this.#mobileBreakpoint.matches ? this.#addRowHeadersToCells() : this.#removeRowHeadersFromCells();
   }
 
   render() {
     return html`<div class="table">
-        <slot></slot>
+        <slot
+          @slotchange="${this.#mobileBreakpoint.matches
+            ? this.#addRowHeadersToCells()
+            : this.#removeRowHeadersFromCells()}"
+        ></slot>
         ${this.noResults ? this.#renderNoResultsView() : ``}</div
       >
       <div><slot name="footer"></slot></div>`;
@@ -66,9 +103,51 @@ export class ZuiTableElement extends ZuiBaseElement {
   }
 
   #reassignFooter() {
-    if (this._footer) {
-      this._footer.setAttribute('slot', 'footer');
+    this._footer?.map((f) => f.setAttribute('slot', 'footer'));
+  }
+
+  #addRowHeadersToCells() {
+    const rowHeadersList = this._rows.filter((h) => h.hasAttribute('header'));
+    const rowBodyList = this._rows.filter((r) => !r.hasAttribute('header') && !r.hasAttribute('summary'));
+
+    if (rowHeadersList.length > 0) {
+      for (const row of rowBodyList) {
+        for (let i = 0; i < row.children.length; i++) {
+          const cell = row.children[i];
+          if (!cell.shadowRoot.querySelector('.header')) {
+            const rowHeaderContainer = document.createElement('div');
+            rowHeaderContainer.classList.add('header');
+            const rowHeaderText = rowHeadersList[0].children[i].textContent;
+            rowHeaderContainer.innerText = rowHeaderText;
+            cell.shadowRoot.prepend(rowHeaderContainer);
+          }
+        }
+      }
+    }
+
+    // add custom state --mobile to zui-table
+    this.#internals?.states?.add('--mobile');
+
+    this.requestUpdate();
+  }
+
+  #removeRowHeadersFromCells() {
+    const rowBodyList = this._rows.filter((r) => !r.hasAttribute('header') && !r.hasAttribute('summary'));
+
+    for (const row of rowBodyList) {
+      for (let i = 0; i < row.children.length; i++) {
+        const rowChildren = row.children[i].shadowRoot;
+        const header = rowChildren.querySelector('.header');
+        if (header) {
+          rowChildren.removeChild(header);
+        }
+      }
     }
+
+    // remove custom state --mobile from zui-table
+    this.#internals?.states?.has('--mobile') && this.#internals.states.delete('--mobile');
+
+    this.requestUpdate();
   }
 }
 

package/test/zui-table.test.ts

@@ -9,6 +9,10 @@ import {
   ZuiTableFooterElement,
 } from '@zywave/zui-table';
 import { assert } from '@esm-bundle/chai';
+import { setViewport } from '@web/test-runner-commands';
+import { isMobile } from '../../../../test/src/util/isMobile';
+import { screenBreakpoints } from '@zywave/zui-base/dist/utils/breakpoints';
+import { sleep } from '@zywave/../../test/src/util/helpers';
 
 suite('zui-table', () => {
   let table: ZuiTableElement;
@@ -110,4 +114,36 @@ suite('zui-table', () => {
 
     assert.isTrue(footerSlot, 'Expected zui-table-footer to be assigned to a slot');
   });
+
+  test('mobile table with headers in cell', async () => {
+    const rowHeader = document.createElement('zui-table-row');
+    const rowHeaderCell = document.createElement('zui-table-cell');
+    rowHeader.setAttribute('header', '');
+    rowHeaderCell.innerText = 'Dank';
+    rowHeader.appendChild(rowHeaderCell);
+    topbar.insertAdjacentElement('afterend', rowHeader);
+    cell.innerText = 'Farrik!';
+
+    // Order matters here
+    // TODO: Investigate why setting viewport prior to table update completion fails
+    await table.updateComplete;
+    await sleep(100);
+    await setViewport({ width: 480, height: 640 });
+
+    const rowHeaderComputedDisplayStyle = window.getComputedStyle(rowHeader).getPropertyValue('display');
+    const rowHeaderText = rowHeaderCell.textContent;
+    const bodyCellHeaderText = cell.shadowRoot.children[0].textContent;
+
+    assert.isTrue(isMobile(), `Expected viewport to be <${screenBreakpoints.xsmall}`);
+    assert.equal(rowHeaderComputedDisplayStyle, 'none', 'Expected table row header to be hidden on mobile');
+    assert.exists(
+      cell.shadowRoot.querySelector('.header'),
+      'Expected cell to have an element with class .header in its shadow DOM'
+    );
+    assert.equal(
+      rowHeaderText,
+      bodyCellHeaderText,
+      `Expected table body cell text (${bodyCellHeaderText}) to have header text (${rowHeaderText}) in it`
+    );
+  });
 });