@zywave/zui-table 4.0.12 → 4.0.13

package/CHANGELOG.md

@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [4.0.13](https://gitlab.com/zywave/app-platform/devkit/web-sdk/zui/compare/@zywave/zui-table@4.0.13-pre.0...@zywave/zui-table@4.0.13) (2023-10-27)
+
+**Note:** Version bump only for package @zywave/zui-table
+
 ## [4.0.12](https://gitlab.com/zywave/app-platform/devkit/web-sdk/zui/compare/@zywave/zui-table@4.0.12-pre.2...@zywave/zui-table@4.0.12) (2023-10-13)
 
 **Note:** Version bump only for package @zywave/zui-table

package/dist/custom-elements.json

@@ -29,7 +29,7 @@
           ],
           "slots": [
             {
-              "description": "Unnamed slot, table cell content goes here",
+              "description": "Default, unnamed slot; for inserting table cell content into `<zui-table-cell>`",
               "name": ""
             }
           ],
@@ -167,7 +167,7 @@
           ],
           "slots": [
             {
-              "description": "Unnamed slot, table footer content goes here",
+              "description": "Default, unnamed slot; for inserting table footer content into `<zui-table-footer>`",
               "name": ""
             }
           ],
@@ -205,7 +205,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Pass into `<zui-table>`, `<zui-table-row>` holds a row of `<zui-table-cell>`'s.",
+          "description": "Insert into `<zui-table>`; `<zui-table-row>` holds a row of `<zui-table-cell>` elements.",
           "name": "ZuiTableRowElement",
           "cssProperties": [
             {
@@ -226,7 +226,7 @@
           ],
           "slots": [
             {
-              "description": "Unnamed slot, `<zui-table-cell>`s are declared here",
+              "description": "Default, unnamed slot; for inserting `<zui-table-cell>` elements into `<zui-table-row>`",
               "name": ""
             }
           ],
@@ -339,11 +339,11 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Used to house table related pieces such as a search input or `zui-search`, and other up front information.",
+          "description": "Used to house table related pieces such as a search input or `<zui-search>`, and other up front information.",
           "name": "ZuiTableTopbarElement",
           "slots": [
             {
-              "description": "Unnamed slot, table cell content goes here",
+              "description": "Default, unnamed slot; for inserting content into `<zui-table-topbar>`",
               "name": ""
             },
             {
@@ -478,7 +478,7 @@
           ],
           "slots": [
             {
-              "description": "Unnamed slot, all table content will appear here, such as table rows",
+              "description": "Default, unnamed slot; for inserting `<zui-table-topbar>`, `<zui-table-row>`, and `<zui-table-footer>` elements, including a custom no results view, into `<zui-table>`",
               "name": ""
             },
             {

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

@@ -4,7 +4,7 @@ import { ZuiTableBaseElement } from './base.js';
  *
  * @element zui-table-cell
  *
- * @slot - Unnamed slot, table cell content goes here
+ * @slot - Default, unnamed slot; for inserting table cell content into `<zui-table-cell>`
  *
  * @cssprop [--zui-table-cell-padding=13px 20px] - Override cell padding
  * @cssprop [--zui-table-cell-sort-color=var(--zui-gray-300)] - ([sortable]): Default color of chevron when `direction` is `null`

package/dist/zui-table-cell.js

@@ -26,7 +26,7 @@ import { style } from './zui-table-cell-css.js';
  *
  * @element zui-table-cell
  *
- * @slot - Unnamed slot, table cell content goes here
+ * @slot - Default, unnamed slot; for inserting table cell content into `<zui-table-cell>`
  *
  * @cssprop [--zui-table-cell-padding=13px 20px] - Override cell padding
  * @cssprop [--zui-table-cell-sort-color=var(--zui-gray-300)] - ([sortable]): Default color of chevron when `direction` is `null`

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

@@ -1 +1 @@
-{"version":3,"file":"zui-table-cell.js","sourceRoot":"","sources":["../src/zui-table-cell.ts"],"names":[],"mappings":"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","sourcesContent":["import { ZuiTableBaseElement } from './base.js';\nimport { html, nothing } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { style } from './zui-table-cell-css.js';\n\n/**\n * An individual table cell to be passed into a `<zui-table-row>`.\n *\n * @element zui-table-cell\n *\n * @slot - Unnamed slot, table cell content goes here\n *\n * @cssprop [--zui-table-cell-padding=13px 20px] - Override cell padding\n * @cssprop [--zui-table-cell-sort-color=var(--zui-gray-300)] - ([sortable]): Default color of chevron when `direction` is `null`\n * @cssprop [--zui-table-cell-sort-active-color=var(--zui-blue)] - Highlight color used to indicate the active sort direction\n *\n */\nexport class ZuiTableCellElement extends ZuiTableBaseElement {\n  /**\n   * Set to decrease table cell padding to accommodate action button(s)\n   */\n  @property({ type: Boolean, reflect: true })\n  action = false;\n\n  /**\n   * Current sort direction of the sortable cell\n   * @type {null | \"ascending\" | \"descending\"}\n   */\n  @property({ type: String, reflect: true })\n  get sort(): ZuiTableSortDirection {\n    return this.#sort;\n  }\n\n  set sort(val: ZuiTableSortDirection) {\n    const acceptableVals = ['ascending', 'descending', null];\n    if (acceptableVals.includes(val)) {\n      const oldVal = this.#sort;\n      this.#sort = val;\n      this.requestUpdate('sort', oldVal);\n      this._state?.channel.dispatchEvent(new CustomEvent('sort', { detail: { sort: val, cell: this } }));\n    }\n  }\n\n  /**\n   * (`zui-table-row[header]`): Whether or not cell header is sortable; another requirement is the parent element, `<zui-table-cell header>` must have `header` attribute or property set\n   */\n  @property({ type: Boolean, reflect: true })\n  get sortable() {\n    return this._isAllowedSort && this.#sortable;\n  }\n\n  set sortable(val: boolean) {\n    const oldVal = this.#sortable;\n    this.#sortable = val;\n    this.requestUpdate('sortable', oldVal);\n  }\n\n  /**\n   * This private field is needed to persist state between the cell and the header row. DO NOT USE EXTERNALLY\n   */\n  @state()\n  private _isAllowedSort = false;\n\n  #sort: ZuiTableSortDirection = null;\n  #sortable = false;\n\n  static get styles() {\n    return [super.styles, style];\n  }\n\n  render() {\n    if (this.sortable) {\n      import('@zywave/zui-icons');\n    }\n    const styles = { 'is-selectable': this.sortable };\n    return html`<div @click=\"${this.#onSortableClick}\" class=\"${classMap(styles)}\">\n      <slot></slot>\n      ${this.sortable ? html`<zui-icon icon=\"zui-sort\"></zui-icon>` : nothing}\n    </div>`;\n  }\n\n  click() {\n    super.click();\n\n    this.#onSortableClick();\n  }\n\n  #onSortableClick() {\n    if (this.sortable) {\n      switch (this.sort) {\n        case 'ascending':\n          this.sort = 'descending';\n          break;\n        case 'descending':\n          this.sort = null;\n          break;\n        case null:\n        default:\n          this.sort = 'ascending';\n          break;\n      }\n    }\n  }\n}\n\nwindow.customElements.define('zui-table-cell', ZuiTableCellElement);\n\nexport type ZuiTableSortDirection = null | 'ascending' | 'descending';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'zui-table-cell': ZuiTableCellElement;\n  }\n}\n"]}
+{"version":3,"file":"zui-table-cell.js","sourceRoot":"","sources":["../src/zui-table-cell.ts"],"names":[],"mappings":"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","sourcesContent":["import { ZuiTableBaseElement } from './base.js';\nimport { html, nothing } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { style } from './zui-table-cell-css.js';\n\n/**\n * An individual table cell to be passed into a `<zui-table-row>`.\n *\n * @element zui-table-cell\n *\n * @slot - Default, unnamed slot; for inserting table cell content into `<zui-table-cell>`\n *\n * @cssprop [--zui-table-cell-padding=13px 20px] - Override cell padding\n * @cssprop [--zui-table-cell-sort-color=var(--zui-gray-300)] - ([sortable]): Default color of chevron when `direction` is `null`\n * @cssprop [--zui-table-cell-sort-active-color=var(--zui-blue)] - Highlight color used to indicate the active sort direction\n *\n */\nexport class ZuiTableCellElement extends ZuiTableBaseElement {\n  /**\n   * Set to decrease table cell padding to accommodate action button(s)\n   */\n  @property({ type: Boolean, reflect: true })\n  action = false;\n\n  /**\n   * Current sort direction of the sortable cell\n   * @type {null | \"ascending\" | \"descending\"}\n   */\n  @property({ type: String, reflect: true })\n  get sort(): ZuiTableSortDirection {\n    return this.#sort;\n  }\n\n  set sort(val: ZuiTableSortDirection) {\n    const acceptableVals = ['ascending', 'descending', null];\n    if (acceptableVals.includes(val)) {\n      const oldVal = this.#sort;\n      this.#sort = val;\n      this.requestUpdate('sort', oldVal);\n      this._state?.channel.dispatchEvent(new CustomEvent('sort', { detail: { sort: val, cell: this } }));\n    }\n  }\n\n  /**\n   * (`zui-table-row[header]`): Whether or not cell header is sortable; another requirement is the parent element, `<zui-table-cell header>` must have `header` attribute or property set\n   */\n  @property({ type: Boolean, reflect: true })\n  get sortable() {\n    return this._isAllowedSort && this.#sortable;\n  }\n\n  set sortable(val: boolean) {\n    const oldVal = this.#sortable;\n    this.#sortable = val;\n    this.requestUpdate('sortable', oldVal);\n  }\n\n  /**\n   * This private field is needed to persist state between the cell and the header row. DO NOT USE EXTERNALLY\n   */\n  @state()\n  private _isAllowedSort = false;\n\n  #sort: ZuiTableSortDirection = null;\n  #sortable = false;\n\n  static get styles() {\n    return [super.styles, style];\n  }\n\n  render() {\n    if (this.sortable) {\n      import('@zywave/zui-icons');\n    }\n    const styles = { 'is-selectable': this.sortable };\n    return html`<div @click=\"${this.#onSortableClick}\" class=\"${classMap(styles)}\">\n      <slot></slot>\n      ${this.sortable ? html`<zui-icon icon=\"zui-sort\"></zui-icon>` : nothing}\n    </div>`;\n  }\n\n  click() {\n    super.click();\n\n    this.#onSortableClick();\n  }\n\n  #onSortableClick() {\n    if (this.sortable) {\n      switch (this.sort) {\n        case 'ascending':\n          this.sort = 'descending';\n          break;\n        case 'descending':\n          this.sort = null;\n          break;\n        case null:\n        default:\n          this.sort = 'ascending';\n          break;\n      }\n    }\n  }\n}\n\nwindow.customElements.define('zui-table-cell', ZuiTableCellElement);\n\nexport type ZuiTableSortDirection = null | 'ascending' | 'descending';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'zui-table-cell': ZuiTableCellElement;\n  }\n}\n"]}

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

@@ -4,7 +4,7 @@ import { ZuiTableBaseElement } from './base.js';
  *
  * @element zui-table-footer
  *
- * @slot - Unnamed slot, table footer content goes here
+ * @slot - Default, unnamed slot; for inserting table footer content into `<zui-table-footer>`
  *
  * @cssprop [--zui-table-footer-margin=0.625rem (10px)] - Override the margin between the table and footer of the table
  */

package/dist/zui-table-footer.js

@@ -6,7 +6,7 @@ import { style } from './zui-table-footer-css.js';
  *
  * @element zui-table-footer
  *
- * @slot - Unnamed slot, table footer content goes here
+ * @slot - Default, unnamed slot; for inserting table footer content into `<zui-table-footer>`
  *
  * @cssprop [--zui-table-footer-margin=0.625rem (10px)] - Override the margin between the table and footer of the table
  */

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

@@ -1 +1 @@
-{"version":3,"file":"zui-table-footer.js","sourceRoot":"","sources":["../src/zui-table-footer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,WAAW,CAAC;AAChD,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAC;AAElD;;;;;;;;GAQG;AACH,MAAM,OAAO,qBAAsB,SAAQ,mBAAmB;IAC5D,MAAM,KAAK,MAAM;QACf,OAAO,CAAC,KAAK,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;IAC/B,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;WAEJ,CAAC;IACV,CAAC;CACF;AAED,MAAM,CAAC,cAAc,CAAC,MAAM,CAAC,kBAAkB,EAAE,qBAAqB,CAAC,CAAC","sourcesContent":["import { ZuiTableBaseElement } from './base.js';\nimport { html } from 'lit';\nimport { style } from './zui-table-footer-css.js';\n\n/**\n * Footer table element, should come as the last item passed into a `<zui-table>`.\n *\n * @element zui-table-footer\n *\n * @slot - Unnamed slot, table footer content goes here\n *\n * @cssprop [--zui-table-footer-margin=0.625rem (10px)] - Override the margin between the table and footer of the table\n */\nexport class ZuiTableFooterElement extends ZuiTableBaseElement {\n  static get styles() {\n    return [super.styles, style];\n  }\n\n  render() {\n    return html`<div class=\"footer\">\n      <slot></slot>\n    </div>`;\n  }\n}\n\nwindow.customElements.define('zui-table-footer', ZuiTableFooterElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'zui-table-footer': ZuiTableFooterElement;\n  }\n}\n"]}
+{"version":3,"file":"zui-table-footer.js","sourceRoot":"","sources":["../src/zui-table-footer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,WAAW,CAAC;AAChD,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAC;AAElD;;;;;;;;GAQG;AACH,MAAM,OAAO,qBAAsB,SAAQ,mBAAmB;IAC5D,MAAM,KAAK,MAAM;QACf,OAAO,CAAC,KAAK,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;IAC/B,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;WAEJ,CAAC;IACV,CAAC;CACF;AAED,MAAM,CAAC,cAAc,CAAC,MAAM,CAAC,kBAAkB,EAAE,qBAAqB,CAAC,CAAC","sourcesContent":["import { ZuiTableBaseElement } from './base.js';\nimport { html } from 'lit';\nimport { style } from './zui-table-footer-css.js';\n\n/**\n * Footer table element, should come as the last item passed into a `<zui-table>`.\n *\n * @element zui-table-footer\n *\n * @slot - Default, unnamed slot; for inserting table footer content into `<zui-table-footer>`\n *\n * @cssprop [--zui-table-footer-margin=0.625rem (10px)] - Override the margin between the table and footer of the table\n */\nexport class ZuiTableFooterElement extends ZuiTableBaseElement {\n  static get styles() {\n    return [super.styles, style];\n  }\n\n  render() {\n    return html`<div class=\"footer\">\n      <slot></slot>\n    </div>`;\n  }\n}\n\nwindow.customElements.define('zui-table-footer', ZuiTableFooterElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'zui-table-footer': ZuiTableFooterElement;\n  }\n}\n"]}

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

@@ -1,10 +1,10 @@
 import { ZuiTableBaseElement } from './base.js';
 /**
- * Pass into `<zui-table>`, `<zui-table-row>` holds a row of `<zui-table-cell>`'s.
+ * Insert into `<zui-table>`; `<zui-table-row>` holds a row of `<zui-table-cell>` elements.
  *
  * @element zui-table-row
  *
- * @slot - Unnamed slot, `<zui-table-cell>`s are declared here
+ * @slot - Default, unnamed slot; for inserting `<zui-table-cell>` elements into `<zui-table-row>`
  *
  * @cssprop [--zui-table-columns-template=repeat(auto-fit, minmax(0, 1fr))] - Override the table columns template. See https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns for more information on valid values.
  * @cssprop [--zui-table-summary-background-color=var(--zui-gray-600)] - Override the table summary background color

package/dist/zui-table-row.js

@@ -21,11 +21,11 @@ import { html } from 'lit';
 import { property, queryAssignedElements } from 'lit/decorators.js';
 import { style } from './zui-table-row-css.js';
 /**
- * Pass into `<zui-table>`, `<zui-table-row>` holds a row of `<zui-table-cell>`'s.
+ * Insert into `<zui-table>`; `<zui-table-row>` holds a row of `<zui-table-cell>` elements.
  *
  * @element zui-table-row
  *
- * @slot - Unnamed slot, `<zui-table-cell>`s are declared here
+ * @slot - Default, unnamed slot; for inserting `<zui-table-cell>` elements into `<zui-table-row>`
  *
  * @cssprop [--zui-table-columns-template=repeat(auto-fit, minmax(0, 1fr))] - Override the table columns template. See https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns for more information on valid values.
  * @cssprop [--zui-table-summary-background-color=var(--zui-gray-600)] - Override the table summary background color

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":"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","sourcesContent":["import { ZuiTableBaseElement } from './base.js';\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 * Pass into `<zui-table>`, `<zui-table-row>` holds a row of `<zui-table-cell>`'s.\n *\n * @element zui-table-row\n *\n * @slot - Unnamed 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 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 ZuiTableBaseElement {\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  #sortLock?: boolean;\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    if (this.header) {\n      const firstCellWithDirection = this._slottedCells?.find((cell) => cell?.hasAttribute('sort'));\n      this._slottedCells.forEach((cell) => {\n        if (cell.sort && cell !== firstCellWithDirection) {\n          cell.sort = null;\n        }\n      });\n    }\n  }\n\n  updated(changedProperties: Map<string | number | symbol, unknown>) {\n    super.updated(changedProperties);\n    if (changedProperties.has('header')) {\n      this.#ensureCellState();\n      if (this.header) {\n        this._state?.channel.addEventListener('sort', (e: CustomEvent<{ cell: HTMLElement }>) => this.#onTableSort(e));\n      }\n    }\n  }\n\n  render() {\n    return html`<div>\n      <slot @slotchange=\"${this.#ensureCellState()}\"></slot>\n    </div>`;\n  }\n\n  #onTableSort(event: CustomEvent<{ cell: HTMLElement }>) {\n    if (this.#sortLock) {\n      return;\n    }\n    this.#sortLock = true;\n    this._slottedCells?.forEach((cell) => {\n      if (cell !== event.detail.cell) {\n        cell.sort = null;\n      }\n    });\n    setTimeout(() => {\n      this.#sortLock = false;\n    }, 0);\n  }\n\n  #ensureCellState() {\n    if (!this._slottedCells) {\n      return;\n    }\n\n    if (this.header) {\n      this._slottedCells.forEach((cell) => {\n        cell.setAttribute('role', 'columnheader');\n        (cell as any)._isAllowedSort = true;\n      });\n    } else {\n      this._slottedCells.forEach((cell) => {\n        cell.setAttribute('role', 'cell');\n        (cell as any)._isAllowedSort = false;\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":"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","sourcesContent":["import { ZuiTableBaseElement } from './base.js';\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 * Insert into `<zui-table>`; `<zui-table-row>` holds a row of `<zui-table-cell>` elements.\n *\n * @element zui-table-row\n *\n * @slot - Default, unnamed slot; for inserting `<zui-table-cell>` elements into `<zui-table-row>`\n *\n * @cssprop [--zui-table-columns-template=repeat(auto-fit, minmax(0, 1fr))] - Override the table columns template. See 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 ZuiTableBaseElement {\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  #sortLock?: boolean;\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    if (this.header) {\n      const firstCellWithDirection = this._slottedCells?.find((cell) => cell?.hasAttribute('sort'));\n      this._slottedCells.forEach((cell) => {\n        if (cell.sort && cell !== firstCellWithDirection) {\n          cell.sort = null;\n        }\n      });\n    }\n  }\n\n  updated(changedProperties: Map<string | number | symbol, unknown>) {\n    super.updated(changedProperties);\n    if (changedProperties.has('header')) {\n      this.#ensureCellState();\n      if (this.header) {\n        this._state?.channel.addEventListener('sort', (e: CustomEvent<{ cell: HTMLElement }>) => this.#onTableSort(e));\n      }\n    }\n  }\n\n  render() {\n    return html`<div>\n      <slot @slotchange=\"${this.#ensureCellState()}\"></slot>\n    </div>`;\n  }\n\n  #onTableSort(event: CustomEvent<{ cell: HTMLElement }>) {\n    if (this.#sortLock) {\n      return;\n    }\n    this.#sortLock = true;\n    this._slottedCells?.forEach((cell) => {\n      if (cell !== event.detail.cell) {\n        cell.sort = null;\n      }\n    });\n    setTimeout(() => {\n      this.#sortLock = false;\n    }, 0);\n  }\n\n  #ensureCellState() {\n    if (!this._slottedCells) {\n      return;\n    }\n\n    if (this.header) {\n      this._slottedCells.forEach((cell) => {\n        cell.setAttribute('role', 'columnheader');\n        (cell as any)._isAllowedSort = true;\n      });\n    } else {\n      this._slottedCells.forEach((cell) => {\n        cell.setAttribute('role', 'cell');\n        (cell as any)._isAllowedSort = false;\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"]}

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

@@ -1,10 +1,10 @@
 import { ZuiTableBaseElement } from './base.js';
 /**
- * Used to house table related pieces such as a search input or `zui-search`, and other up front information.
+ * Used to house table related pieces such as a search input or `<zui-search>`, and other up front information.
  *
  * @element zui-table-topbar
  *
- * @slot - Unnamed slot, table cell content goes here
+ * @slot - Default, unnamed slot; for inserting content into `<zui-table-topbar>`
  * @slot counter - Total number of results from table goes here
  * @slot action - Action(s) that affect the whole table goes here
  */

package/dist/zui-table-topbar.js

@@ -16,11 +16,11 @@ import { queryAssignedElements, queryAssignedNodes } from 'lit/decorators.js';
 import { style } from './zui-table-topbar-css.js';
 import { screenBreakpoints } from '@zywave/zui-base/dist/utils/breakpoints';
 /**
- * Used to house table related pieces such as a search input or `zui-search`, and other up front information.
+ * Used to house table related pieces such as a search input or `<zui-search>`, and other up front information.
  *
  * @element zui-table-topbar
  *
- * @slot - Unnamed slot, table cell content goes here
+ * @slot - Default, unnamed slot; for inserting content into `<zui-table-topbar>`
  * @slot counter - Total number of results from table goes here
  * @slot action - Action(s) that affect the whole table goes here
  */

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

@@ -1 +1 @@
-{"version":3,"file":"zui-table-topbar.js","sourceRoot":"","sources":["../src/zui-table-topbar.ts"],"names":[],"mappings":"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","sourcesContent":["import { ZuiTableBaseElement } from './base.js';\nimport { html } from 'lit';\nimport { queryAssignedElements, queryAssignedNodes } from 'lit/decorators.js';\nimport { style } from './zui-table-topbar-css.js';\nimport { screenBreakpoints } from '@zywave/zui-base/dist/utils/breakpoints';\nimport type { ZuiButton } from '@zywave/zui-button/dist/zui-button.js';\n\n/**\n * Used to house table related pieces such as a search input or `zui-search`, and other up front information.\n *\n * @element zui-table-topbar\n *\n * @slot - Unnamed slot, table cell content goes here\n * @slot counter - Total number of results from table goes here\n * @slot action - Action(s) that affect the whole table goes here\n */\nexport class ZuiTableTopbarElement extends ZuiTableBaseElement {\n  @queryAssignedElements({ slot: 'action' })\n  private _actionSlottedElements: Array<HTMLCollection>;\n\n  @queryAssignedNodes({ slot: 'counter' })\n  private _counterSlottedNodes: Array<HTMLCollection>;\n\n  @queryAssignedElements({ selector: 'zui-button', slot: 'action' })\n  private _actionButtons: Array<ZuiButton>;\n\n  #mobileBreakpoint: MediaQueryList = window.matchMedia(`only screen and (max-width: ${screenBreakpoints.xsmall})`);\n\n  #mobileTopbarActionButtonsEvent = (b: MediaQueryListEvent) => {\n    b.matches ? this.#addBlockStylingToButtons() : this.#removeBlockStylingFromButtons();\n  };\n\n  static get styles() {\n    return [super.styles, style];\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n\n    if (this.#mobileBreakpoint.addEventListener) {\n      this.#mobileBreakpoint.addEventListener('change', this.#mobileTopbarActionButtonsEvent);\n    } else {\n      this.#mobileBreakpoint.addListener(this.#mobileTopbarActionButtonsEvent);\n    }\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n\n    if (this.#mobileBreakpoint.addEventListener) {\n      this.#mobileBreakpoint.removeEventListener('change', this.#mobileTopbarActionButtonsEvent);\n    } else if (this.#mobileBreakpoint.addListener) {\n      this.#mobileBreakpoint.removeListener(this.#mobileTopbarActionButtonsEvent);\n    }\n  }\n\n  firstUpdated() {\n    this.#mobileBreakpoint.matches ? this.#addBlockStylingToButtons() : this.#removeBlockStylingFromButtons();\n    this.#toggleActionDivDisplay();\n    this.#toggleCounterDivDisplay();\n  }\n\n  render() {\n    return html`<div class=\"topbar\">\n      <div class=\"content\"><slot></slot></div>\n      <div class=\"counter\"><slot name=\"counter\" @slotchange=\"${this.#toggleCounterDivDisplay}\"></slot></div>\n      <div class=\"action\"><slot name=\"action\" @slotchange=${this.#handleActionSlotchange}></slot></div>\n    </div>`;\n  }\n\n  #handleActionSlotchange() {\n    this.#toggleActionDivDisplay();\n    this.#mobileBreakpoint.matches ? this.#addBlockStylingToButtons() : this.#removeBlockStylingFromButtons();\n  }\n\n  #addBlockStylingToButtons() {\n    if (this._actionButtons.length > 0) {\n      for (const button of this._actionButtons) {\n        if (!button.hasAttribute('block')) {\n          button.setAttribute('block', '');\n        }\n      }\n    }\n\n    this.requestUpdate();\n  }\n\n  #removeBlockStylingFromButtons() {\n    if (this._actionButtons.length > 0) {\n      for (const button of this._actionButtons) {\n        if (button.hasAttribute('block')) {\n          button.removeAttribute('block');\n        }\n      }\n    }\n\n    this.requestUpdate();\n  }\n\n  #toggleCounterDivDisplay() {\n    const counter: HTMLElement = this.shadowRoot.querySelector('.counter');\n\n    if (this._counterSlottedNodes.length === 0) {\n      counter.style.display = 'none';\n    } else if (this._counterSlottedNodes.length > 0 && counter.style.display === 'none') {\n      counter.style.removeProperty('display');\n    }\n\n    this.requestUpdate();\n  }\n\n  #toggleActionDivDisplay() {\n    const action: HTMLElement = this.shadowRoot.querySelector('.action');\n\n    if (this._actionSlottedElements.length === 0) {\n      action.style.display = 'none';\n    } else if (this._actionSlottedElements.length > 0 && action.style.display === 'none') {\n      action.style.removeProperty('display');\n    }\n\n    this.requestUpdate();\n  }\n}\n\nwindow.customElements.define('zui-table-topbar', ZuiTableTopbarElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'zui-table-topbar': ZuiTableTopbarElement;\n  }\n}\n"]}
+{"version":3,"file":"zui-table-topbar.js","sourceRoot":"","sources":["../src/zui-table-topbar.ts"],"names":[],"mappings":"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","sourcesContent":["import { ZuiTableBaseElement } from './base.js';\nimport { html } from 'lit';\nimport { queryAssignedElements, queryAssignedNodes } from 'lit/decorators.js';\nimport { style } from './zui-table-topbar-css.js';\nimport { screenBreakpoints } from '@zywave/zui-base/dist/utils/breakpoints';\nimport type { ZuiButton } from '@zywave/zui-button/dist/zui-button.js';\n\n/**\n * Used to house table related pieces such as a search input or `<zui-search>`, and other up front information.\n *\n * @element zui-table-topbar\n *\n * @slot - Default, unnamed slot; for inserting content into `<zui-table-topbar>`\n * @slot counter - Total number of results from table goes here\n * @slot action - Action(s) that affect the whole table goes here\n */\nexport class ZuiTableTopbarElement extends ZuiTableBaseElement {\n  @queryAssignedElements({ slot: 'action' })\n  private _actionSlottedElements: Array<HTMLCollection>;\n\n  @queryAssignedNodes({ slot: 'counter' })\n  private _counterSlottedNodes: Array<HTMLCollection>;\n\n  @queryAssignedElements({ selector: 'zui-button', slot: 'action' })\n  private _actionButtons: Array<ZuiButton>;\n\n  #mobileBreakpoint: MediaQueryList = window.matchMedia(`only screen and (max-width: ${screenBreakpoints.xsmall})`);\n\n  #mobileTopbarActionButtonsEvent = (b: MediaQueryListEvent) => {\n    b.matches ? this.#addBlockStylingToButtons() : this.#removeBlockStylingFromButtons();\n  };\n\n  static get styles() {\n    return [super.styles, style];\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n\n    if (this.#mobileBreakpoint.addEventListener) {\n      this.#mobileBreakpoint.addEventListener('change', this.#mobileTopbarActionButtonsEvent);\n    } else {\n      this.#mobileBreakpoint.addListener(this.#mobileTopbarActionButtonsEvent);\n    }\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n\n    if (this.#mobileBreakpoint.addEventListener) {\n      this.#mobileBreakpoint.removeEventListener('change', this.#mobileTopbarActionButtonsEvent);\n    } else if (this.#mobileBreakpoint.addListener) {\n      this.#mobileBreakpoint.removeListener(this.#mobileTopbarActionButtonsEvent);\n    }\n  }\n\n  firstUpdated() {\n    this.#mobileBreakpoint.matches ? this.#addBlockStylingToButtons() : this.#removeBlockStylingFromButtons();\n    this.#toggleActionDivDisplay();\n    this.#toggleCounterDivDisplay();\n  }\n\n  render() {\n    return html`<div class=\"topbar\">\n      <div class=\"content\"><slot></slot></div>\n      <div class=\"counter\"><slot name=\"counter\" @slotchange=\"${this.#toggleCounterDivDisplay}\"></slot></div>\n      <div class=\"action\"><slot name=\"action\" @slotchange=${this.#handleActionSlotchange}></slot></div>\n    </div>`;\n  }\n\n  #handleActionSlotchange() {\n    this.#toggleActionDivDisplay();\n    this.#mobileBreakpoint.matches ? this.#addBlockStylingToButtons() : this.#removeBlockStylingFromButtons();\n  }\n\n  #addBlockStylingToButtons() {\n    if (this._actionButtons.length > 0) {\n      for (const button of this._actionButtons) {\n        if (!button.hasAttribute('block')) {\n          button.setAttribute('block', '');\n        }\n      }\n    }\n\n    this.requestUpdate();\n  }\n\n  #removeBlockStylingFromButtons() {\n    if (this._actionButtons.length > 0) {\n      for (const button of this._actionButtons) {\n        if (button.hasAttribute('block')) {\n          button.removeAttribute('block');\n        }\n      }\n    }\n\n    this.requestUpdate();\n  }\n\n  #toggleCounterDivDisplay() {\n    const counter: HTMLElement = this.shadowRoot.querySelector('.counter');\n\n    if (this._counterSlottedNodes.length === 0) {\n      counter.style.display = 'none';\n    } else if (this._counterSlottedNodes.length > 0 && counter.style.display === 'none') {\n      counter.style.removeProperty('display');\n    }\n\n    this.requestUpdate();\n  }\n\n  #toggleActionDivDisplay() {\n    const action: HTMLElement = this.shadowRoot.querySelector('.action');\n\n    if (this._actionSlottedElements.length === 0) {\n      action.style.display = 'none';\n    } else if (this._actionSlottedElements.length > 0 && action.style.display === 'none') {\n      action.style.removeProperty('display');\n    }\n\n    this.requestUpdate();\n  }\n}\n\nwindow.customElements.define('zui-table-topbar', ZuiTableTopbarElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'zui-table-topbar': ZuiTableTopbarElement;\n  }\n}\n"]}

package/dist/zui-table.d.ts

@@ -5,7 +5,7 @@ import type { ZuiTableCellElement, ZuiTableSortDirection } from './zui-table-cel
  *
  * @element zui-table
  *
- * @slot - Unnamed slot, all table content will appear here, such as table rows
+ * @slot - Default, unnamed slot; for inserting `<zui-table-topbar>`, `<zui-table-row>`, and `<zui-table-footer>` elements, including a custom no results view, into `<zui-table>`
  * @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>`
  * @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.
  *

package/dist/zui-table.js

@@ -26,7 +26,7 @@ import { screenBreakpoints } from '@zywave/zui-base/dist/utils/breakpoints';
  *
  * @element zui-table
  *
- * @slot - Unnamed slot, all table content will appear here, such as table rows
+ * @slot - Default, unnamed slot; for inserting `<zui-table-topbar>`, `<zui-table-row>`, and `<zui-table-footer>` elements, including a custom no results view, into `<zui-table>`
  * @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>`
  * @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.
  *

package/dist/zui-table.js.map

@@ -1 +1 @@
-{"version":3,"file":"zui-table.js","sourceRoot":"","sources":["../src/zui-table.ts"],"names":[],"mappings":"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","sourcesContent":["import { ZuiTableBaseElement, TableElementConnectedEvent } from './base.js';\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';\nimport type { ZuiTableCellElement, ZuiTableSortDirection } from './zui-table-cell.js';\n\n/**\n * A standardized responsive table component.\n *\n * @element zui-table\n *\n * @slot - Unnamed 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 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 * @event sort - Event fires when the table's active sort changes. Event detail is an object with the `sort` direction and `cell` ZuiTableCellElement.\n */\nexport class ZuiTableElement extends ZuiTableBaseElement {\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  #mobileBreakpoint: MediaQueryList = window.matchMedia(`only screen and (max-width: ${screenBreakpoints.xsmall})`);\n  #sortLock = false;\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    ZuiTableBaseElement._globalChannel.addEventListener('connected', (event: TableElementConnectedEvent) => {\n      if (this.contains(event.detail.element)) {\n        this._associateElement(event.detail.element);\n      }\n    });\n\n    this._state.channel.addEventListener('sort', (event: CustomEvent<SortEventDetail>) => {\n      if (this.#sortLock) {\n        return;\n      }\n      this.#sortLock = true;\n      this.dispatchEvent(new CustomEvent<SortEventDetail>('sort', { detail: event.detail, bubbles: true }));\n      setTimeout(() => (this.#sortLock = false), 0);\n    });\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 ? this.#addRowHeadersToCells : 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\nexport type SortEventDetail = { sort: ZuiTableSortDirection; cell: ZuiTableCellElement };\n"]}
+{"version":3,"file":"zui-table.js","sourceRoot":"","sources":["../src/zui-table.ts"],"names":[],"mappings":"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","sourcesContent":["import { ZuiTableBaseElement, TableElementConnectedEvent } from './base.js';\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';\nimport type { ZuiTableCellElement, ZuiTableSortDirection } from './zui-table-cell.js';\n\n/**\n * A standardized responsive table component.\n *\n * @element zui-table\n *\n * @slot - Default, unnamed slot; for inserting `<zui-table-topbar>`, `<zui-table-row>`, and `<zui-table-footer>` elements, including a custom no results view, into `<zui-table>`\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 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 * @event sort - Event fires when the table's active sort changes. Event detail is an object with the `sort` direction and `cell` ZuiTableCellElement.\n */\nexport class ZuiTableElement extends ZuiTableBaseElement {\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  #mobileBreakpoint: MediaQueryList = window.matchMedia(`only screen and (max-width: ${screenBreakpoints.xsmall})`);\n  #sortLock = false;\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    ZuiTableBaseElement._globalChannel.addEventListener('connected', (event: TableElementConnectedEvent) => {\n      if (this.contains(event.detail.element)) {\n        this._associateElement(event.detail.element);\n      }\n    });\n\n    this._state.channel.addEventListener('sort', (event: CustomEvent<SortEventDetail>) => {\n      if (this.#sortLock) {\n        return;\n      }\n      this.#sortLock = true;\n      this.dispatchEvent(new CustomEvent<SortEventDetail>('sort', { detail: event.detail, bubbles: true }));\n      setTimeout(() => (this.#sortLock = false), 0);\n    });\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 ? this.#addRowHeadersToCells : 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\nexport type SortEventDetail = { sort: ZuiTableSortDirection; cell: ZuiTableCellElement };\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zywave/zui-table",
-  "version": "4.0.12",
+  "version": "4.0.13",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "license": "UNLICENSED",
@@ -26,7 +26,7 @@
     "@zywave/zui-icons": "^4.3.0"
   },
   "devDependencies": {
-    "@zywave/zui-button": "^4.0.36"
+    "@zywave/zui-button": "^4.0.37"
   },
-  "gitHead": "29ee30ce78d0cf12a2ee9390dab564815330ebd0"
+  "gitHead": "118f81519c987745ee9a02f2e829df6d3c72b6ad"
 }

package/src/zui-table-cell.ts

@@ -9,7 +9,7 @@ import { style } from './zui-table-cell-css.js';
  *
  * @element zui-table-cell
  *
- * @slot - Unnamed slot, table cell content goes here
+ * @slot - Default, unnamed slot; for inserting table cell content into `<zui-table-cell>`
  *
  * @cssprop [--zui-table-cell-padding=13px 20px] - Override cell padding
  * @cssprop [--zui-table-cell-sort-color=var(--zui-gray-300)] - ([sortable]): Default color of chevron when `direction` is `null`

package/src/zui-table-footer.ts

@@ -7,7 +7,7 @@ import { style } from './zui-table-footer-css.js';
  *
  * @element zui-table-footer
  *
- * @slot - Unnamed slot, table footer content goes here
+ * @slot - Default, unnamed slot; for inserting table footer content into `<zui-table-footer>`
  *
  * @cssprop [--zui-table-footer-margin=0.625rem (10px)] - Override the margin between the table and footer of the table
  */

package/src/zui-table-row.ts

@@ -5,11 +5,11 @@ import { style } from './zui-table-row-css.js';
 import type { ZuiTableCellElement } from './zui-table-cell.js';
 
 /**
- * Pass into `<zui-table>`, `<zui-table-row>` holds a row of `<zui-table-cell>`'s.
+ * Insert into `<zui-table>`; `<zui-table-row>` holds a row of `<zui-table-cell>` elements.
  *
  * @element zui-table-row
  *
- * @slot - Unnamed slot, `<zui-table-cell>`s are declared here
+ * @slot - Default, unnamed slot; for inserting `<zui-table-cell>` elements into `<zui-table-row>`
  *
  * @cssprop [--zui-table-columns-template=repeat(auto-fit, minmax(0, 1fr))] - Override the table columns template. See https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns for more information on valid values.
  * @cssprop [--zui-table-summary-background-color=var(--zui-gray-600)] - Override the table summary background color

package/src/zui-table-topbar.ts

@@ -6,11 +6,11 @@ import { screenBreakpoints } from '@zywave/zui-base/dist/utils/breakpoints';
 import type { ZuiButton } from '@zywave/zui-button/dist/zui-button.js';
 
 /**
- * Used to house table related pieces such as a search input or `zui-search`, and other up front information.
+ * Used to house table related pieces such as a search input or `<zui-search>`, and other up front information.
  *
  * @element zui-table-topbar
  *
- * @slot - Unnamed slot, table cell content goes here
+ * @slot - Default, unnamed slot; for inserting content into `<zui-table-topbar>`
  * @slot counter - Total number of results from table goes here
  * @slot action - Action(s) that affect the whole table goes here
  */

package/src/zui-table.ts

@@ -12,7 +12,7 @@ import type { ZuiTableCellElement, ZuiTableSortDirection } from './zui-table-cel
  *
  * @element zui-table
  *
- * @slot - Unnamed slot, all table content will appear here, such as table rows
+ * @slot - Default, unnamed slot; for inserting `<zui-table-topbar>`, `<zui-table-row>`, and `<zui-table-footer>` elements, including a custom no results view, into `<zui-table>`
  * @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>`
  * @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.
  *