@patternfly/elements 4.1.0 → 4.2.0

package/pf-table/pf-table.js

@@ -16,7 +16,441 @@ export * from './pf-tr.js';
 export * from './pf-th.js';
 export * from './pf-td.js';
 import { css } from "lit";
-const styles = css `:host {\n\t--pf-c-table--BackgroundColor: var(--pf-global--BackgroundColor--100, #fff);\n\t--pf-c-table--BorderColor: var(--pf-global--BorderColor--100, #d2d2d2);\n\t--pf-c-table--border-width--base: var(--pf-global--BorderWidth--sm, 1px);\n\t--pf-c-table-caption--FontSize: var(--pf-global--FontSize--sm, 0.875rem);\n\t--pf-c-table-caption--Color: var(--pf-global--Color--200, #6a6e73);\n\t--pf-c-table-caption--PaddingTop: var(--pf-global--spacer--md, 1rem);\n\t--pf-c-table-caption--PaddingRight: var(--pf-global--spacer--lg, 1.5rem);\n\t--pf-c-table-caption--PaddingBottom: var(--pf-global--spacer--md, 1rem);\n\t--pf-c-table-caption--PaddingLeft: var(--pf-global--spacer--lg, 1.5rem);\n\t--pf-c-table-caption--xl--PaddingRight: var(--pf-global--spacer--md, 1rem);\n\t--pf-c-table-caption--xl--PaddingLeft: var(--pf-global--spacer--md, 1rem);\n\t--pf-c-table--thead--cell--FontSize: var(--pf-global--FontSize--sm, 0.875rem);\n\t--pf-c-table--thead--cell--FontWeight: var(--pf-global--FontWeight--bold, 700);\n\t--pf-c-table--tbody--cell--PaddingTop: var(--pf-global--spacer--lg, 1.5rem);\n\t--pf-c-table--tbody--cell--PaddingBottom: var(--pf-global--spacer--lg);\n\t--pf-c-table--tr--BoxShadow--top--base: 0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08);\n\t--pf-c-table--cell--Padding--base: var(--pf-global--spacer--md, 1rem);\n\t--pf-c-table--cell--FontSize: var(--pf-global--FontSize--md, 1rem);\n\t--pf-c-table--cell--FontWeight: var(--pf-global--FontWeight--normal, 400);\n\t--pf-c-table--cell--Color: var(--pf-global--Color--100, #151515);\n\t--pf-c-table--cell--PaddingTop: var(--pf-c-table--cell--Padding--base);\n\t--pf-c-table--cell--PaddingRight: var(--pf-c-table--cell--Padding--base);\n\t--pf-c-table--cell--PaddingBottom: var(--pf-c-table--cell--Padding--base);\n\t--pf-c-table--cell--PaddingLeft: var(--pf-c-table--cell--Padding--base);\n\t--pf-c-table--cell--first-last-child--PaddingLeft: var(--pf-global--spacer--md, 1rem);\n\t--pf-c-table--cell--first-last-child--PaddingRight: var(--pf-global--spacer--md, 1rem);\n\t--pf-c-table--cell--first-last-child--xl--PaddingLeft: var(--pf-global--spacer--lg, 1.5rem);\n\t--pf-c-table--cell--first-last-child--xl--PaddingRight: var(--pf-global--spacer--lg, 1.5rem);\n\t--pf-c-table--tr--m-first-cell-offset-reset--cell--PaddingLeft: var(--pf-c-table--cell--Padding--base);\n\t--pf-c-table--cell--MinWidth: 0;\n\t--pf-c-table--cell--MaxWidth: none;\n\t--pf-c-table--cell--Width: auto;\n\t--pf-c-table--cell--Overflow: visible;\n\t--pf-c-table--cell--TextOverflow: clip;\n\t--pf-c-table--cell--WhiteSpace: normal;\n\t--pf-c-table--cell--WordBreak: normal;\n\t--pf-c-table--cell--m-border-right--before--BorderRightWidth: var(--pf-global--BorderWidth--sm, 1px);\n\t--pf-c-table--cell--m-border-right--before--BorderRightColor: var(--pf-global--BorderColor--100, #d2d2d2);\n\t--pf-c-table--cell--m-border-left--before--BorderLeftWidth: var(--pf-global--BorderWidth--sm, 1px);\n\t--pf-c-table--cell--m-border-left--before--BorderLeftColor: var(--pf-global--BorderColor--100, #d2d2d2);\n\t--pf-c-table--cell--m-help--MinWidth: 11ch;\n\t--pf-c-table--m-truncate--cell--MaxWidth: 1px;\n\t--pf-c-table--m-truncate--cell--MinWidth: calc(5ch + var(--pf-c-table--cell--PaddingRight) + var(--pf-c-table--cell--PaddingLeft));\n\t--pf-c-table--cell--hidden-visible--Display: table-cell;\n\t--pf-c-table__toggle--c-button--MarginTop: calc(0.375rem * -1);\n\t--pf-c-table__toggle--c-button--MarginBottom: calc(0.375rem * -1);\n\t--pf-c-table__toggle--c-button__toggle-icon--Rotate: 270deg;\n\t--pf-c-table__toggle--c-button__toggle-icon--Transition: .2s ease-in 0s;\n\t--pf-c-table__toggle--c-button--m-expanded__toggle-icon--Rotate: 360deg;\n\t--pf-c-table__button--BackgroundColor: transparent;\n\t--pf-c-table__button--Color: var(--pf-global--Color--100, #151515);\n\t--pf-c-table__button--hover--Color: var(--pf-global--Color--100, #151515);\n\t--pf-c-table__button--focus--Color: var(--pf-global--Color--100, #151515);\n\t--pf-c-table__button--active--Color: var(--pf-global--Color--100, #151515);\n\t--pf-c-table__button--OutlineOffset: calc(var(--pf-global--BorderWidth--lg, 3px) * -1);\n\t--pf-c-table--m-compact__toggle--PaddingTop: 0;\n\t--pf-c-table--m-compact__toggle--PaddingBottom: 0;\n\t--pf-c-table__check--input--MarginTop: 0.25rem;\n\t--pf-c-table__check--input--FontSize: var(--pf-global--FontSize--md, 1rem);\n\t--pf-c-table--cell--m-favorite--Color: var(--pf-global--Color--light-300, #d2d2d2);\n\t--pf-c-table__favorite--c-button--Color: var(--pf-global--Color--light-300, #d2d2d2);\n\t--pf-c-table__favorite--c-button--FontSize: var(--pf-global--FontSize--sm, 0.875rem);\n\t--pf-c-table__favorite--c-button--MarginTop: calc(var(--pf-global--spacer--form-element, 0.375rem) * -1);\n\t--pf-c-table__favorite--c-button--MarginRight: calc(var(--pf-global--spacer--md, 1rem) * -1);\n\t--pf-c-table__favorite--c-button--MarginBottom: calc(var(--pf-global--spacer--form-element, 0.375rem) * -1);\n\t--pf-c-table__favorite--c-button--MarginLeft: calc(var(--pf-global--spacer--md, 1rem) * -1);\n\t--pf-c-table__favorite--m-favorited--c-button--Color: var(--pf-global--palette--gold-400, #f0ab00);\n\t--pf-c-table__sort--m-favorite__button__text--Color: var(--pf-global--Color--200, #6a6e73);\n\t--pf-c-table__sort--m-favorite__button--hover__text--Color: var(--pf-global--Color--100, #151515);\n\t--pf-c-table__sort--m-favorite__button--focus__text--Color: var(--pf-global--Color--100, #151515);\n\t--pf-c-table__sort--m-favorite__button--active__text--Color: var(--pf-global--Color--100, #151515);\n\t--pf-c-table__draggable--c-button--MarginTop: calc(var(--pf-global--spacer--form-element, 0.375rem) * -1);\n\t--pf-c-table__draggable--c-button--MarginRight: calc(var(--pf-global--spacer--md, 1rem) * -1);\n\t--pf-c-table__draggable--c-button--MarginBottom: calc(var(--pf-global--spacer--form-element, 0.375rem) * -1);\n\t--pf-c-table__draggable--c-button--MarginLeft: calc(var(--pf-global--spacer--md, 1rem) * -1);\n\t--pf-c-table__tr--m-ghost-row--Opacity: .4;\n\t--pf-c-table__tr--m-ghost-row--BackgroundColor: var(--pf-global--BackgroundColor--100, #fff);\n\t--pf-c-table__action--PaddingTop: 0;\n\t--pf-c-table__action--PaddingRight: 0;\n\t--pf-c-table__action--PaddingBottom: 0;\n\t--pf-c-table__action--PaddingLeft: 0;\n\t--pf-c-table__inline-edit-action--PaddingTop: 0;\n\t--pf-c-table__inline-edit-action--PaddingRight: 0;\n\t--pf-c-table__inline-edit-action--PaddingBottom: 0;\n\t--pf-c-table__inline-edit-action--PaddingLeft: 0;\n\t--pf-c-table__expandable-row--Transition: var(--pf-global--Transition, all 250ms cubic-bezier(0.42, 0, 0.58, 1));\n\t--pf-c-table__expandable-row--MaxHeight: 28.125rem;\n\t--pf-c-table__expandable-row-content--Transition: var(--pf-global--Transition, all 250ms cubic-bezier(0.42, 0, 0.58, 1));\n\t--pf-c-table__expandable-row-content--PaddingTop: var(--pf-global--spacer--lg, 1.5rem);\n\t--pf-c-table__expandable-row-content--PaddingBottom: var(--pf-global--spacer--lg, 1.5rem);\n\t--pf-c-table__expandable-row--after--Top: calc(var(--pf-c-table--border-width--base) * -1);\n\t--pf-c-table__expandable-row--after--Bottom: calc(var(--pf-c-table--border-width--base) * -1);\n\t--pf-c-table__expandable-row--after--border-width--base: var(--pf-global--BorderWidth--lg, 3px);\n\t--pf-c-table__expandable-row--after--BorderLeftWidth: 0;\n\t--pf-c-table__expandable-row--after--BorderColor: var(--pf-global--active-color--100, #06c);\n\t--pf-c-table__icon-inline--MarginRight: var(--pf-global--spacer--sm, 0.5rem);\n\t--pf-c-table__sort--MinWidth: calc(6ch + var(--pf-c-table--cell--PaddingRight) + var(--pf-c-table--cell--PaddingLeft) + var(--pf-c-table__sort-indicator--MarginLeft));\n\t--pf-c-table__sort__button--PaddingTop: var(--pf-global--spacer--form-element, 0.375rem);\n\t--pf-c-table__sort__button--PaddingRight: var(--pf-global--spacer--sm, 0.5rem);\n\t--pf-c-table__sort__button--PaddingBottom: var(--pf-global--spacer--form-element, 0.375rem);\n\t--pf-c-table__sort__button--PaddingLeft: var(--pf-global--spacer--sm, 0.5rem);\n\t--pf-c-table__sort__button--MarginTop: calc(var(--pf-c-table__sort__button--PaddingTop) * -1);\n\t--pf-c-table__sort__button--MarginBottom: calc(var(--pf-c-table__sort__button--PaddingBottom) * -1);\n\t--pf-c-table__sort__button--MarginLeft: calc(var(--pf-c-table__sort__button--PaddingLeft) * -1);\n\t--pf-c-table__sort__button--Color: var(--pf-global--Color--100, #151515);\n\t--pf-c-table__sort--m-selected__button--Color: var(--pf-global--active-color--100, #06c);\n\t--pf-c-table__sort--m-help--MinWidth: 15ch;\n\t--pf-c-table__sort__button__text--Color: currentcolor;\n\t--pf-c-table__sort__button--hover__text--Color: currentcolor;\n\t--pf-c-table__sort__button--focus__text--Color: currentcolor;\n\t--pf-c-table__sort__button--active__text--Color: currentcolor;\n\t--pf-c-table__sort-indicator--Color: var(--pf-global--disabled-color--200, #d2d2d2);\n\t--pf-c-table__sort-indicator--MarginLeft: var(--pf-global--spacer--md, 1rem);\n\t--pf-c-table__sort--m-selected__sort-indicator--Color: var(--pf-global--active-color--100, #06c);\n\t--pf-c-table__sort__button--hover__sort-indicator--Color: var(--pf-global--Color--100, #151515);\n\t--pf-c-table__sort__button--active__sort-indicator--Color: var(--pf-global--Color--100, #151515);\n\t--pf-c-table__sort__button--focus__sort-indicator--Color: var(--pf-global--Color--100, #151515);\n\t--pf-c-table--th--m-help--MinWidth: 11ch;\n\t--pf-c-table__column-help--MarginLeft: var(--pf-global--spacer--xs, 0.25rem);\n\t--pf-c-table__column-help--TranslateY: 0.125rem;\n\t--pf-c-table__column-help--c-button--MarginTop: calc(var(--pf-global--spacer--form-element, 0.375rem) * -1);\n\t--pf-c-table__column-help--c-button--MarginBottom: calc(var(--pf-global--spacer--form-element, 0.375rem) * -1);\n\t--pf-c-table__column-help--c-button--PaddingRight: var(--pf-global--spacer--sm, 0.5rem);\n\t--pf-c-table__column-help--c-button--PaddingLeft: var(--pf-global--spacer--sm, 0.5rem);\n\t--pf-c-table__compound-expansion-toggle__button--Color: var(--pf-global--active-color--100, #06c);\n\t--pf-c-table__compound-expansion-toggle__button--hover--Color: var(--pf-global--link--Color--hover, #004080);\n\t--pf-c-table__compound-expansion-toggle__button--focus--Color: var(--pf-global--link--Color--hover, #004080);\n\t--pf-c-table__compound-expansion-toggle__button--active--Color: var(--pf-global--link--Color--hover, #004080);\n\t--pf-c-table__compound-expansion-toggle__button--before--border-width--base: var(--pf-global--BorderWidth--sm, 1px);\n\t--pf-c-table__compound-expansion-toggle__button--before--BorderColor: var(--pf-global--BorderColor--100, #d2d2d2);\n\t--pf-c-table__compound-expansion-toggle__button--before--BorderRightWidth: 0;\n\t--pf-c-table__compound-expansion-toggle__button--before--BorderLeftWidth: 0;\n\t--pf-c-table__compound-expansion-toggle__button--before--Bottom: calc(var(--pf-c-table__compound-expansion-toggle__button--before--border-width--base) * -1);\n\t--pf-c-table__compound-expansion-toggle__button--before--Left: calc(var(--pf-c-table__compound-expansion-toggle__button--before--border-width--base) * -1);\n\t--pf-c-table__compound-expansion-toggle__button--after--border-width--base: var(--pf-global--BorderWidth--lg, 3px);\n\t--pf-c-table__compound-expansion-toggle__button--after--BorderColor: var(--pf-global--primary-color--100, #06c);\n\t--pf-c-table__compound-expansion-toggle__button--after--BorderTopWidth: 0;\n\t--pf-c-table__compound-expansion-toggle__button--after--Top: calc(var(--pf-c-table__compound-expansion-toggle__button--before--border-width--base) * -1);\n\t--pf-c-table__compound-expansion-toggle__button--after--Left: calc(var(--pf-c-table__compound-expansion-toggle__button--before--border-width--base) * -1);\n\t--pf-c-table--m-compact-th--PaddingTop: calc(var(--pf-global--spacer--sm, 0.5rem) + var(--pf-global--spacer--xs));\n\t--pf-c-table--m-compact-th--PaddingBottom: var(--pf-global--spacer--sm, 0.5rem);\n\t--pf-c-table--m-compact--cell--PaddingTop: var(--pf-global--spacer--sm, 0.5rem);\n\t--pf-c-table--m-compact--cell--PaddingRight: var(--pf-global--spacer--sm, 0.5rem);\n\t--pf-c-table--m-compact--cell--PaddingBottom: var(--pf-global--spacer--sm, 0.5rem);\n\t--pf-c-table--m-compact--cell--PaddingLeft: var(--pf-global--spacer--sm, 0.5rem);\n\t--pf-c-table--m-compact--cell--first-last-child--PaddingLeft: var(--pf-global--spacer--md, 1rem);\n\t--pf-c-table--m-compact--cell--first-last-child--PaddingRight: var(--pf-global--spacer--md, 1rem);\n\t--pf-c-table--m-compact--cell--first-last-child--xl--PaddingLeft: var(--pf-global--spacer--lg, 1.5rem);\n\t--pf-c-table--m-compact--cell--first-last-child--xl--PaddingRight: var(--pf-global--spacer--lg, 1.5rem);\n\t--pf-c-table--m-compact--FontSize: var(--pf-global--FontSize--sm, 0.875rem);\n\t--pf-c-table--m-compact__expandable-row-content--PaddingTop: var(--pf-global--spacer--lg, 1.5rem);\n\t--pf-c-table--m-compact__expandable-row-content--PaddingRight: var(--pf-global--spacer--lg, 1.5rem);\n\t--pf-c-table--m-compact__expandable-row-content--PaddingBottom: var(--pf-global--spacer--lg, 1.5rem);\n\t--pf-c-table--m-compact__expandable-row-content--PaddingLeft: var(--pf-global--spacer--lg, 1.5rem);\n\t--pf-c-table--nested--first-last-child--PaddingRight: var(--pf-c-table--m-compact--cell--first-last-child--PaddingLeft);\n\t--pf-c-table--nested--first-last-child--PaddingLeft: var(--pf-c-table--m-compact--cell--first-last-child--PaddingRight);\n\t--pf-c-table__expandable-row--m-expanded--BorderBottomColor: var(--pf-global--BorderColor--100, #d2d2d2);\n\t--pf-c-table--tr--m-hoverable--BoxShadow--top: var(--pf-c-table--tr--BoxShadow--top--base);\n\t--pf-c-table--tr--m-hoverable--BackgroundColor: transparent;\n\t--pf-c-table--tr--m-hoverable--BoxShadow: none;\n\t--pf-c-table--tr--m-hoverable--OutlineOffset: calc(-1 * var(--pf-global--spacer--xs, 0.25rem));\n\t--pf-c-table--tr--m-hoverable--hover--BoxShadow: var(--pf-c-table--tr--m-hoverable--BoxShadow--top), var(--pf-global--BoxShadow--sm-bottom, 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16));\n\t--pf-c-table--tr--m-hoverable--hover--BackgroundColor: var(--pf-global--BackgroundColor--100, #fff);\n\t--pf-c-table--tr--m-hoverable--focus--BoxShadow: var(--pf-c-table--tr--m-hoverable--BoxShadow--top), var(--pf-global--BoxShadow--sm-bottom, 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16));\n\t--pf-c-table--tr--m-hoverable--focus--BackgroundColor: var(--pf-global--BackgroundColor--100, #fff);\n\t--pf-c-table--tr--m-hoverable--active--BoxShadow: var(--pf-c-table--tr--m-hoverable--BoxShadow--top), var(--pf-global--BoxShadow--sm-bottom, 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16));\n\t--pf-c-table--tr--m-hoverable--active--BackgroundColor: var(--pf-global--BackgroundColor--100, #fff);\n\t--pf-c-table--tr--m-hoverable--m-selected--BoxShadow: var(--pf-global--BoxShadow--sm-bottom, 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)) inset, var(--pf-global--BoxShadow--sm-bottom, 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16));\n\t--pf-c-table--tr--m-selected--BoxShadow--top: var(--pf-c-table--tr--BoxShadow--top--base);\n\t--pf-c-table--tr--m-selected--BackgroundColor: var(--pf-global--BackgroundColor--100, #fff);\n\t--pf-c-table--tr--m-selected--BoxShadow: var(--pf-c-table--tr--m-selected--BoxShadow--top), var(--pf-global--BoxShadow--sm-bottom, 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16));\n\t--pf-c-table--tr--m-selected--OutlineOffset: calc(-1 * var(--pf-global--spacer--xs, 0.25rem));\n\t--pf-c-table--tr--m-selected--after--BorderLeftWidth: var(--pf-c-table__expandable-row--after--border-width--base);\n\t--pf-c-table--tr--m-selected--after--BorderLeftColor: var(--pf-global--active-color--100, #06c);\n\t--pf-c-table--tr--m-selected--m-selected--BoxShadow: var(--pf-global--BoxShadow--sm-bottom, 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16));\n\t--pf-c-table--tr--m-selected--hover--m-selected--BoxShadow: var(--pf-global--BoxShadow--sm-bottom, 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)) inset, var(--pf-global--BoxShadow--sm-bottom, 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16));\n\t--pf-c-table--tr--m-selected--tr--m-selected--hover--BoxShadow: var(--pf-c-table--tr--m-selected--BoxShadow--top), var(--pf-global--BoxShadow--sm-bottom, 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16));\n\t--pf-c-table--tbody--m-hoverable--BoxShadow--top: var(--pf-c-table--tr--BoxShadow--top--base);\n\t--pf-c-table--tbody--m-hoverable--BoxShadow: none;\n\t--pf-c-table--tbody--m-hoverable--BackgroundColor: transparent;\n\t--pf-c-table--tbody--m-hoverable--OutlineOffset: calc(-1 * var(--pf-global--spacer--xs, 0.25rem));\n\t--pf-c-table--tbody--m-hoverable--hover--BoxShadow: var(--pf-c-table--tbody--m-hoverable--BoxShadow--top), var(--pf-global--BoxShadow--sm-bottom, 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16));\n\t--pf-c-table--tbody--m-hoverable--hover--BackgroundColor: var(--pf-global--BackgroundColor--100, #fff);\n\t--pf-c-table--tbody--m-hoverable--focus--BoxShadow: var(--pf-c-table--tbody--m-hoverable--BoxShadow--top), var(--pf-global--BoxShadow--sm-bottom, 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16));\n\t--pf-c-table--tbody--m-hoverable--focus--BackgroundColor: var(--pf-global--BackgroundColor--100, #fff);\n\t--pf-c-table--tbody--m-hoverable--active--BoxShadow: var(--pf-c-table--tbody--m-hoverable--BoxShadow--top), var(--pf-global--BoxShadow--sm-bottom, 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16));\n\t--pf-c-table--tbody--m-hoverable--active--BackgroundColor: var(--pf-global--BackgroundColor--100, #fff);\n\t--pf-c-table--tbody--m-hoverable--m-expanded--BorderColor: var(--pf-global--active-color--400, #73bcf7);\n\t--pf-c-table--tbody--m-hoverable--m-selected--hover--tr--BoxShadow: var(--pf-global--BoxShadow--sm-bottom, 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)) inset, var(--pf-global--BoxShadow--sm-bottom, 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16));\n\t--pf-c-table--tbody--m-selected--BackgroundColor: var(--pf-global--BackgroundColor--100, #fff);\n\t--pf-c-table--tbody--m-selected--BoxShadow--top: var(--pf-c-table--tr--BoxShadow--top--base);\n\t--pf-c-table--tbody--m-selected--BoxShadow: var(--pf-c-table--tbody--m-selected--BoxShadow--top), var(--pf-global--BoxShadow--sm-bottom, 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16));\n\t--pf-c-table--tbody--m-selected--OutlineOffset: calc(-1 * var(--pf-global--spacer--xs, 0.25rem));\n\t--pf-c-table--tbody--m-selected--after--BorderLeftWidth: var(--pf-c-table__expandable-row--after--border-width--base);\n\t--pf-c-table--tbody--m-selected--after--BorderLeftColor: var(--pf-global--active-color--100, #06c);\n\t--pf-c-table--tbody--m-selected--m-selected--BoxShadow: var(--pf-global--BoxShadow--sm-bottom, 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16));\n\t--pf-c-table--tbody--m-selected--hover--tbody--m-selected--BoxShadow: var(--pf-global--BoxShadow--sm-bottom, 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)) inset, var(--pf-global--BoxShadow--sm-bottom, 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16));\n\t--pf-c-table--tbody--m-selected--tbody--m-selected--hover--BoxShadow: var(--pf-c-table--tr--m-selected--BoxShadow--top), var(--pf-global--BoxShadow--sm-bottom, 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16));\n\t--pf-c-table--thead--m-nested-column-header--button--OutlineOffset: -0.1875rem;\n\t--pf-c-table--thead--m-nested-column-header--tr--PaddingTop: var(--pf-global--spacer--xs, 0.25rem);\n\t--pf-c-table--thead--m-nested-column-header--tr--PaddingBottom: var(--pf-global--spacer--xs, 0.25rem);\n\t--pf-c-table__subhead--Color: var(--pf-global--Color--200, #6a6e73);\n\t--pf-c-table--m-striped__tr--BackgroundColor: var(--pf-global--BackgroundColor--light-200);\n\tcolor: var(--pf-global--Color--100);\n  display: inline-grid;\n\tgrid-auto-rows: min-content;\n}\n\n@media (max-width: 768px) {\n  :host {\n    --pf-c-table--cell--PaddingTop: var(--pf-c-table--m-grid--cell--PaddingTop, 0);\n    --pf-c-table--cell--PaddingRight: var(--pf-c-table--m-grid--cell--PaddingRight, 0);\n    --pf-c-table--cell--PaddingBottom: var(--pf-c-table--m-grid--cell--PaddingBottom, 0);\n    --pf-c-table--cell--PaddingLeft: var(--pf-c-table--m-grid--cell--PaddingLeft, 0);\n    --pf-c-table__favorite--c-button--MarginTop: auto;\n    --pf-c-table__favorite--c-button--MarginRight: auto;\n    --pf-c-table__favorite--c-button--MarginBottom: auto;\n    --pf-c-table__favorite--c-button--MarginLeft: auto;\n    display: grid;\n    border: none;\n  }\n}\n`;
+const styles = css `:host {
+\t/** Table background color */
+\t--pf-c-table--BackgroundColor: var(--pf-global--BackgroundColor--100, #fff);
+\t/** Table border color */
+\t--pf-c-table--BorderColor: var(--pf-global--BorderColor--100, #d2d2d2);
+\t/** Table border base width */
+\t--pf-c-table--border-width--base: var(--pf-global--BorderWidth--sm, 1px);
+\t/** Table caption font size */
+\t--pf-c-table-caption--FontSize: var(--pf-global--FontSize--sm, 0.875rem);
+\t/** Table caption color */
+\t--pf-c-table-caption--Color: var(--pf-global--Color--200, #6a6e73);
+\t/** Table caption top padding */
+\t--pf-c-table-caption--PaddingTop: var(--pf-global--spacer--md, 1rem);
+\t/** Table caption right padding */
+\t--pf-c-table-caption--PaddingRight: var(--pf-global--spacer--lg, 1.5rem);
+\t/** Table caption bottom padding */
+\t--pf-c-table-caption--PaddingBottom: var(--pf-global--spacer--md, 1rem);
+\t/** Table caption left padding */
+\t--pf-c-table-caption--PaddingLeft: var(--pf-global--spacer--lg, 1.5rem);
+\t/** Table XL caption right padding */
+\t--pf-c-table-caption--xl--PaddingRight: var(--pf-global--spacer--md, 1rem);
+\t/** Table XL caption left padding */
+\t--pf-c-table-caption--xl--PaddingLeft: var(--pf-global--spacer--md, 1rem);
+\t/** Table head cell font size */
+\t--pf-c-table--thead--cell--FontSize: var(--pf-global--FontSize--sm, 0.875rem);
+\t/** Table head cell font weight */
+\t--pf-c-table--thead--cell--FontWeight: var(--pf-global--FontWeight--bold, 700);
+\t/** Table body cell padding top */
+\t--pf-c-table--tbody--cell--PaddingTop: var(--pf-global--spacer--lg, 1.5rem);
+\t/** Table body cell padding bottom */
+\t--pf-c-table--tbody--cell--PaddingBottom: var(--pf-global--spacer--lg);
+\t/** Table row top base box shadow */
+\t--pf-c-table--tr--BoxShadow--top--base: 0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08);
+\t/** Table cell base padding */
+\t--pf-c-table--cell--Padding--base: var(--pf-global--spacer--md, 1rem);
+\t/** Table cell font size */
+\t--pf-c-table--cell--FontSize: var(--pf-global--FontSize--md, 1rem);
+\t/** Table cell font weight */
+\t--pf-c-table--cell--FontWeight: var(--pf-global--FontWeight--normal, 400);
+\t/** Table cell color */
+\t--pf-c-table--cell--Color: var(--pf-global--Color--100, #151515);
+\t/** Table cell top padding */
+\t--pf-c-table--cell--PaddingTop: var(--pf-c-table--cell--Padding--base);
+\t/** Table cell right padding */
+\t--pf-c-table--cell--PaddingRight: var(--pf-c-table--cell--Padding--base);
+\t/** Table cell bottom padding */
+\t--pf-c-table--cell--PaddingBottom: var(--pf-c-table--cell--Padding--base);
+\t/** Table cell left padding */
+\t--pf-c-table--cell--PaddingLeft: var(--pf-c-table--cell--Padding--base);
+\t/** Table cell last child left padding */
+\t--pf-c-table--cell--first-last-child--PaddingLeft: var(--pf-global--spacer--md, 1rem);
+\t/** Table cell last child right padding */
+\t--pf-c-table--cell--first-last-child--PaddingRight: var(--pf-global--spacer--md, 1rem);
+\t/** Table XL cell last child left padding */
+\t--pf-c-table--cell--first-last-child--xl--PaddingLeft: var(--pf-global--spacer--lg, 1.5rem);
+\t/** Table XL cell last child right padding */
+\t--pf-c-table--cell--first-last-child--xl--PaddingRight: var(--pf-global--spacer--lg, 1.5rem);
+\t/** Table row first cell offset reset cell left padding */
+\t--pf-c-table--tr--m-first-cell-offset-reset--cell--PaddingLeft: var(--pf-c-table--cell--Padding--base);
+\t/** Table cell min width */
+\t--pf-c-table--cell--MinWidth: 0;
+\t/** Table cell max width */
+\t--pf-c-table--cell--MaxWidth: none;
+\t/** Table cell width */
+\t--pf-c-table--cell--Width: auto;
+\t/** Table cell overflow */
+\t--pf-c-table--cell--Overflow: visible;
+\t/** Table cell text overflow */
+\t--pf-c-table--cell--TextOverflow: clip;
+\t/** Table cell white space */
+\t--pf-c-table--cell--WhiteSpace: normal;
+\t/** Table cell word break */
+\t--pf-c-table--cell--WordBreak: normal;
+\t/** Table cell before right border width */
+\t--pf-c-table--cell--m-border-right--before--BorderRightWidth: var(--pf-global--BorderWidth--sm, 1px);
+\t/** Table cell before right border color */
+\t--pf-c-table--cell--m-border-right--before--BorderRightColor: var(--pf-global--BorderColor--100, #d2d2d2);
+\t/** Table cell before left border width */
+\t--pf-c-table--cell--m-border-left--before--BorderLeftWidth: var(--pf-global--BorderWidth--sm, 1px);
+\t/** Table cell before left border color */
+\t--pf-c-table--cell--m-border-left--before--BorderLeftColor: var(--pf-global--BorderColor--100, #d2d2d2);
+\t/** Help cell minimum width */
+\t--pf-c-table--cell--m-help--MinWidth: 11ch;
+\t/** Help cell maximum width */
+\t--pf-c-table--m-truncate--cell--MaxWidth: 1px;
+\t/** Truncated cell minimum width */
+\t--pf-c-table--m-truncate--cell--MinWidth: calc(5ch + var(--pf-c-table--cell--PaddingRight) + var(--pf-c-table--cell--PaddingLeft));
+\t/** Cell visible display */
+\t--pf-c-table--cell--hidden-visible--Display: table-cell;
+\t/** Toggle button top margin */
+\t--pf-c-table__toggle--c-button--MarginTop: calc(0.375rem * -1);
+\t/** Toggle button bottom margin */
+\t--pf-c-table__toggle--c-button--MarginBottom: calc(0.375rem * -1);
+\t/** Toggle button icon rotation */
+\t--pf-c-table__toggle--c-button__toggle-icon--Rotate: 270deg;
+\t/** Toggle button icon transition */
+\t--pf-c-table__toggle--c-button__toggle-icon--Transition: .2s ease-in 0s;
+\t/** Expanded toggle button icon rotation */
+\t--pf-c-table__toggle--c-button--m-expanded__toggle-icon--Rotate: 360deg;
+\t/** Button background color */
+\t--pf-c-table__button--BackgroundColor: transparent;
+\t/** Button color */
+\t--pf-c-table__button--Color: var(--pf-global--Color--100, #151515);
+\t/** Button hover color */
+\t--pf-c-table__button--hover--Color: var(--pf-global--Color--100, #151515);
+\t/** Button focus color */
+\t--pf-c-table__button--focus--Color: var(--pf-global--Color--100, #151515);
+\t/** Button active color */
+\t--pf-c-table__button--active--Color: var(--pf-global--Color--100, #151515);
+\t/** Button outline offset */
+\t--pf-c-table__button--OutlineOffset: calc(var(--pf-global--BorderWidth--lg, 3px) * -1);
+\t/** Compact toggle top padding */
+\t--pf-c-table--m-compact__toggle--PaddingTop: 0;
+\t/** Compact toggle bottom padding */
+\t--pf-c-table--m-compact__toggle--PaddingBottom: 0;
+\t/** Check input top margin */
+\t--pf-c-table__check--input--MarginTop: 0.25rem;
+\t/** Check input font size */
+\t--pf-c-table__check--input--FontSize: var(--pf-global--FontSize--md, 1rem);
+\t/** Favorite cell color */
+\t--pf-c-table--cell--m-favorite--Color: var(--pf-global--Color--light-300, #d2d2d2);
+\t/** Favorite button color */
+\t--pf-c-table__favorite--c-button--Color: var(--pf-global--Color--light-300, #d2d2d2);
+\t/** Favorite button font size */
+\t--pf-c-table__favorite--c-button--FontSize: var(--pf-global--FontSize--sm, 0.875rem);
+\t/** Favorite button top margin */
+\t--pf-c-table__favorite--c-button--MarginTop: calc(var(--pf-global--spacer--form-element, 0.375rem) * -1);
+\t/** Favorite button right margin */
+\t--pf-c-table__favorite--c-button--MarginRight: calc(var(--pf-global--spacer--md, 1rem) * -1);
+\t/** Favorite button bottom margin */
+\t--pf-c-table__favorite--c-button--MarginBottom: calc(var(--pf-global--spacer--form-element, 0.375rem) * -1);
+\t/** Favorite button left margin */
+\t--pf-c-table__favorite--c-button--MarginLeft: calc(var(--pf-global--spacer--md, 1rem) * -1);
+\t/** Favorited button color */
+\t--pf-c-table__favorite--m-favorited--c-button--Color: var(--pf-global--palette--gold-400, #f0ab00);
+\t/** Favorite sort button text color */
+\t--pf-c-table__sort--m-favorite__button__text--Color: var(--pf-global--Color--200, #6a6e73);
+\t/** Favorite sort button hover text color */
+\t--pf-c-table__sort--m-favorite__button--hover__text--Color: var(--pf-global--Color--100, #151515);
+\t/** Favorite sort button focus text color */
+\t--pf-c-table__sort--m-favorite__button--focus__text--Color: var(--pf-global--Color--100, #151515);
+\t/** Favorite sort button active text color */
+\t--pf-c-table__sort--m-favorite__button--active__text--Color: var(--pf-global--Color--100, #151515);
+\t/** Draggable button top margin */
+\t--pf-c-table__draggable--c-button--MarginTop: calc(var(--pf-global--spacer--form-element, 0.375rem) * -1);
+\t/** Draggable button right margin */
+\t--pf-c-table__draggable--c-button--MarginRight: calc(var(--pf-global--spacer--md, 1rem) * -1);
+\t/** Draggable button bottom margin */
+\t--pf-c-table__draggable--c-button--MarginBottom: calc(var(--pf-global--spacer--form-element, 0.375rem) * -1);
+\t/** Draggable button left margin */
+\t--pf-c-table__draggable--c-button--MarginLeft: calc(var(--pf-global--spacer--md, 1rem) * -1);
+\t/** Ghost row opacity */
+\t--pf-c-table__tr--m-ghost-row--Opacity: .4;
+\t/** Ghost row background color */
+\t--pf-c-table__tr--m-ghost-row--BackgroundColor: var(--pf-global--BackgroundColor--100, #fff);
+\t/** Action top padding */
+\t--pf-c-table__action--PaddingTop: 0;
+\t/** Action right padding */
+\t--pf-c-table__action--PaddingRight: 0;
+\t/** Action bottom padding */
+\t--pf-c-table__action--PaddingBottom: 0;
+\t/** Action left padding */
+\t--pf-c-table__action--PaddingLeft: 0;
+\t/** Inline edit action top padding */
+\t--pf-c-table__inline-edit-action--PaddingTop: 0;
+\t/** Inline edit action right padding */
+\t--pf-c-table__inline-edit-action--PaddingRight: 0;
+\t/** Inline edit action bottom padding */
+\t--pf-c-table__inline-edit-action--PaddingBottom: 0;
+\t/** Inline edit action left padding */
+\t--pf-c-table__inline-edit-action--PaddingLeft: 0;
+\t/** Expandable row transition */
+\t--pf-c-table__expandable-row--Transition: var(--pf-global--Transition, all 250ms cubic-bezier(0.42, 0, 0.58, 1));
+\t/** Expandable row max height */
+\t--pf-c-table__expandable-row--MaxHeight: 28.125rem;
+\t/** Expandable row content transition */
+\t--pf-c-table__expandable-row-content--Transition: var(--pf-global--Transition, all 250ms cubic-bezier(0.42, 0, 0.58, 1));
+\t/** Expandable row content top padding */
+\t--pf-c-table__expandable-row-content--PaddingTop: var(--pf-global--spacer--lg, 1.5rem);
+\t/** Expandable row content bottom padding */
+\t--pf-c-table__expandable-row-content--PaddingBottom: var(--pf-global--spacer--lg, 1.5rem);
+\t/** Expandable row after top */
+\t--pf-c-table__expandable-row--after--Top: calc(var(--pf-c-table--border-width--base) * -1);
+\t/** Expandable row after bottom */
+\t--pf-c-table__expandable-row--after--Bottom: calc(var(--pf-c-table--border-width--base) * -1);
+\t/** Expandable row after base border width */
+\t--pf-c-table__expandable-row--after--border-width--base: var(--pf-global--BorderWidth--lg, 3px);
+\t/** Expandable row after left border width */
+\t--pf-c-table__expandable-row--after--BorderLeftWidth: 0;
+\t/** Expandable row after border color */
+\t--pf-c-table__expandable-row--after--BorderColor: var(--pf-global--active-color--100, #06c);
+\t/** Inline icon right margin */
+\t--pf-c-table__icon-inline--MarginRight: var(--pf-global--spacer--sm, 0.5rem);
+\t/** Sort button minimum width */
+\t--pf-c-table__sort--MinWidth: calc(6ch + var(--pf-c-table--cell--PaddingRight) + var(--pf-c-table--cell--PaddingLeft) + var(--pf-c-table__sort-indicator--MarginLeft));
+\t/** Sort button top padding */
+\t--pf-c-table__sort__button--PaddingTop: var(--pf-global--spacer--form-element, 0.375rem);
+\t/** Sort button right padding */
+\t--pf-c-table__sort__button--PaddingRight: var(--pf-global--spacer--sm, 0.5rem);
+\t/** Sort button bottom padding */
+\t--pf-c-table__sort__button--PaddingBottom: var(--pf-global--spacer--form-element, 0.375rem);
+\t/** Sort button left padding */
+\t--pf-c-table__sort__button--PaddingLeft: var(--pf-global--spacer--sm, 0.5rem);
+\t/** Sort button top margin */
+\t--pf-c-table__sort__button--MarginTop: calc(var(--pf-c-table__sort__button--PaddingTop) * -1);
+\t/** Sort button bottom margin */
+\t--pf-c-table__sort__button--MarginBottom: calc(var(--pf-c-table__sort__button--PaddingBottom) * -1);
+\t/** Sort button left margin */
+\t--pf-c-table__sort__button--MarginLeft: calc(var(--pf-c-table__sort__button--PaddingLeft) * -1);
+\t/** Sort button color */
+\t--pf-c-table__sort__button--Color: var(--pf-global--Color--100, #151515);
+\t/** Selected sort button color */
+\t--pf-c-table__sort--m-selected__button--Color: var(--pf-global--active-color--100, #06c);
+\t/** Help button minimum width */
+\t--pf-c-table__sort--m-help--MinWidth: 15ch;
+\t/** Sort button text color */
+\t--pf-c-table__sort__button__text--Color: currentcolor;
+\t/** Sort button hover text color */
+\t--pf-c-table__sort__button--hover__text--Color: currentcolor;
+\t/** Sort button focus text color */
+\t--pf-c-table__sort__button--focus__text--Color: currentcolor;
+\t/** Sort button active text color */
+\t--pf-c-table__sort__button--active__text--Color: currentcolor;
+\t/** Sort indicator color */
+\t--pf-c-table__sort-indicator--Color: var(--pf-global--disabled-color--200, #d2d2d2);
+\t/** Sort indicator left margin */
+\t--pf-c-table__sort-indicator--MarginLeft: var(--pf-global--spacer--md, 1rem);
+\t/** Selected sort indicator color */
+\t--pf-c-table__sort--m-selected__sort-indicator--Color: var(--pf-global--active-color--100, #06c);
+\t/** Sort button hover sort indicator color */
+\t--pf-c-table__sort__button--hover__sort-indicator--Color: var(--pf-global--Color--100, #151515);
+\t/** Sort button active sort indicator color */
+\t--pf-c-table__sort__button--active__sort-indicator--Color: var(--pf-global--Color--100, #151515);
+\t/** Sort button focus sort indicator color */
+\t--pf-c-table__sort__button--focus__sort-indicator--Color: var(--pf-global--Color--100, #151515);
+\t/** Header cell help minimum width */
+\t--pf-c-table--th--m-help--MinWidth: 11ch;
+\t/** Help column left margin */
+\t--pf-c-table__column-help--MarginLeft: var(--pf-global--spacer--xs, 0.25rem);
+\t/** Help column translate y axis */
+\t--pf-c-table__column-help--TranslateY: 0.125rem;
+\t/** Help column button top margin */
+\t--pf-c-table__column-help--c-button--MarginTop: calc(var(--pf-global--spacer--form-element, 0.375rem) * -1);
+\t/** Help column button bottom margin */
+\t--pf-c-table__column-help--c-button--MarginBottom: calc(var(--pf-global--spacer--form-element, 0.375rem) * -1);
+\t/** Help column button right padding */
+\t--pf-c-table__column-help--c-button--PaddingRight: var(--pf-global--spacer--sm, 0.5rem);
+\t/** Help column button left margin */
+\t--pf-c-table__column-help--c-button--PaddingLeft: var(--pf-global--spacer--sm, 0.5rem);
+\t/** Compound expansion toggle button color */
+\t--pf-c-table__compound-expansion-toggle__button--Color: var(--pf-global--active-color--100, #06c);
+\t/** Compound expansion hover toggle button color */
+\t--pf-c-table__compound-expansion-toggle__button--hover--Color: var(--pf-global--link--Color--hover, #004080);
+\t/** Compound expansion focus toggle button color */
+\t--pf-c-table__compound-expansion-toggle__button--focus--Color: var(--pf-global--link--Color--hover, #004080);
+\t/** Compound expansion active toggle button color */
+\t--pf-c-table__compound-expansion-toggle__button--active--Color: var(--pf-global--link--Color--hover, #004080);
+\t/** Compound expansion toggle button before border width */
+\t--pf-c-table__compound-expansion-toggle__button--before--border-width--base: var(--pf-global--BorderWidth--sm, 1px);
+\t/** Compound expansion toggle button before border color */
+\t--pf-c-table__compound-expansion-toggle__button--before--BorderColor: var(--pf-global--BorderColor--100, #d2d2d2);
+\t/** Compound expansion toggle button before right border width */
+\t--pf-c-table__compound-expansion-toggle__button--before--BorderRightWidth: 0;
+\t/** Compound expansion toggle button before left border width */
+\t--pf-c-table__compound-expansion-toggle__button--before--BorderLeftWidth: 0;
+\t/** Compound expansion toggle button before bottom */
+\t--pf-c-table__compound-expansion-toggle__button--before--Bottom: calc(var(--pf-c-table__compound-expansion-toggle__button--before--border-width--base) * -1);
+\t/** Compound expansion toggle button before left */
+\t--pf-c-table__compound-expansion-toggle__button--before--Left: calc(var(--pf-c-table__compound-expansion-toggle__button--before--border-width--base) * -1);
+\t/** Compound expansion toggle button after base border width */
+\t--pf-c-table__compound-expansion-toggle__button--after--border-width--base: var(--pf-global--BorderWidth--lg, 3px);
+\t/** Compound expansion toggle button after border color */
+\t--pf-c-table__compound-expansion-toggle__button--after--BorderColor: var(--pf-global--primary-color--100, #06c);
+\t/** Compound expansion toggle button after top border width */
+\t--pf-c-table__compound-expansion-toggle__button--after--BorderTopWidth: 0;
+\t/** Compound expansion toggle button after top */
+\t--pf-c-table__compound-expansion-toggle__button--after--Top: calc(var(--pf-c-table__compound-expansion-toggle__button--before--border-width--base) * -1);
+\t/** Compound expansion toggle button after left */
+\t--pf-c-table__compound-expansion-toggle__button--after--Left: calc(var(--pf-c-table__compound-expansion-toggle__button--before--border-width--base) * -1);
+\t/** Compact header cell top padding */
+\t--pf-c-table--m-compact-th--PaddingTop: calc(var(--pf-global--spacer--sm, 0.5rem) + var(--pf-global--spacer--xs));
+\t/** Compact header cell bottom padding */
+\t--pf-c-table--m-compact-th--PaddingBottom: var(--pf-global--spacer--sm, 0.5rem);
+\t/** Compact cell top padding */
+\t--pf-c-table--m-compact--cell--PaddingTop: var(--pf-global--spacer--sm, 0.5rem);
+\t/** Compact cell right padding */
+\t--pf-c-table--m-compact--cell--PaddingRight: var(--pf-global--spacer--sm, 0.5rem);
+\t/** Compact cell bottom padding */
+\t--pf-c-table--m-compact--cell--PaddingBottom: var(--pf-global--spacer--sm, 0.5rem);
+\t/** Compact cell left padding */
+\t--pf-c-table--m-compact--cell--PaddingLeft: var(--pf-global--spacer--sm, 0.5rem);
+\t/** Compact cell first child left padding */
+\t--pf-c-table--m-compact--cell--first-last-child--PaddingLeft: var(--pf-global--spacer--md, 1rem);
+\t/** Compact cell first child right padding */
+\t--pf-c-table--m-compact--cell--first-last-child--PaddingRight: var(--pf-global--spacer--md, 1rem);
+\t/** Compact cell first child XL left padding */
+\t--pf-c-table--m-compact--cell--first-last-child--xl--PaddingLeft: var(--pf-global--spacer--lg, 1.5rem);
+\t/** Compact cell first child XL right padding */
+\t--pf-c-table--m-compact--cell--first-last-child--xl--PaddingRight: var(--pf-global--spacer--lg, 1.5rem);
+\t/** Compact font size */
+\t--pf-c-table--m-compact--FontSize: var(--pf-global--FontSize--sm, 0.875rem);
+\t/** Compact expandable row content top padding */
+\t--pf-c-table--m-compact__expandable-row-content--PaddingTop: var(--pf-global--spacer--lg, 1.5rem);
+\t/** Compact expandable row content right padding */
+\t--pf-c-table--m-compact__expandable-row-content--PaddingRight: var(--pf-global--spacer--lg, 1.5rem);
+\t/** Compact expandable row content bottom padding */
+\t--pf-c-table--m-compact__expandable-row-content--PaddingBottom: var(--pf-global--spacer--lg, 1.5rem);
+\t/** Compact expandable row content left padding */
+\t--pf-c-table--m-compact__expandable-row-content--PaddingLeft: var(--pf-global--spacer--lg, 1.5rem);
+\t/** Nested first child right padding */
+\t--pf-c-table--nested--first-last-child--PaddingRight: var(--pf-c-table--m-compact--cell--first-last-child--PaddingLeft);
+\t/** Nested first child left padding */
+\t--pf-c-table--nested--first-last-child--PaddingLeft: var(--pf-c-table--m-compact--cell--first-last-child--PaddingRight);
+\t/** Expandable row expanded bottom border color */
+\t--pf-c-table__expandable-row--m-expanded--BorderBottomColor: var(--pf-global--BorderColor--100, #d2d2d2);
+\t/** Hoverable table row top box shadow */
+\t--pf-c-table--tr--m-hoverable--BoxShadow--top: var(--pf-c-table--tr--BoxShadow--top--base);
+\t/** Hoverable table row background color */
+\t--pf-c-table--tr--m-hoverable--BackgroundColor: transparent;
+\t/** Hoverable table row box shadow */
+\t--pf-c-table--tr--m-hoverable--BoxShadow: none;
+\t/** Hoverable table row outline offset */
+\t--pf-c-table--tr--m-hoverable--OutlineOffset: calc(-1 * var(--pf-global--spacer--xs, 0.25rem));
+\t/** Hoverable table row hover box shadow */
+\t--pf-c-table--tr--m-hoverable--hover--BoxShadow: var(--pf-c-table--tr--m-hoverable--BoxShadow--top), var(--pf-global--BoxShadow--sm-bottom, 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16));
+\t/** Hoverable table row hover background color */
+\t--pf-c-table--tr--m-hoverable--hover--BackgroundColor: var(--pf-global--BackgroundColor--100, #fff);
+\t/** Hoverable table row focus box shadow */
+\t--pf-c-table--tr--m-hoverable--focus--BoxShadow: var(--pf-c-table--tr--m-hoverable--BoxShadow--top), var(--pf-global--BoxShadow--sm-bottom, 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16));
+\t/** Hoverable table row focus background color */
+\t--pf-c-table--tr--m-hoverable--focus--BackgroundColor: var(--pf-global--BackgroundColor--100, #fff);
+\t/** Hoverable table row active box shadow */
+\t--pf-c-table--tr--m-hoverable--active--BoxShadow: var(--pf-c-table--tr--m-hoverable--BoxShadow--top), var(--pf-global--BoxShadow--sm-bottom, 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16));
+\t/** Hoverable table row active background color */
+\t--pf-c-table--tr--m-hoverable--active--BackgroundColor: var(--pf-global--BackgroundColor--100, #fff);
+\t/** Hoverable table row selected box shadow */
+\t--pf-c-table--tr--m-hoverable--m-selected--BoxShadow: var(--pf-global--BoxShadow--sm-bottom, 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)) inset, var(--pf-global--BoxShadow--sm-bottom, 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16));
+\t/** Selected table row top box shadow */
+\t--pf-c-table--tr--m-selected--BoxShadow--top: var(--pf-c-table--tr--BoxShadow--top--base);
+\t/** Selected table row background color */
+\t--pf-c-table--tr--m-selected--BackgroundColor: var(--pf-global--BackgroundColor--100, #fff);
+\t/** Selected table row box shadow */
+\t--pf-c-table--tr--m-selected--BoxShadow: var(--pf-c-table--tr--m-selected--BoxShadow--top), var(--pf-global--BoxShadow--sm-bottom, 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16));
+\t/** Selected table row outline offset */
+\t--pf-c-table--tr--m-selected--OutlineOffset: calc(-1 * var(--pf-global--spacer--xs, 0.25rem));
+\t/** Selected table row after left border width */
+\t--pf-c-table--tr--m-selected--after--BorderLeftWidth: var(--pf-c-table__expandable-row--after--border-width--base);
+\t/** Selected table row after left border color */
+\t--pf-c-table--tr--m-selected--after--BorderLeftColor: var(--pf-global--active-color--100, #06c);
+\t/** Selected table row box shadow */
+\t--pf-c-table--tr--m-selected--m-selected--BoxShadow: var(--pf-global--BoxShadow--sm-bottom, 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16));
+\t/** Selected table row hover box shadow */
+\t--pf-c-table--tr--m-selected--hover--m-selected--BoxShadow: var(--pf-global--BoxShadow--sm-bottom, 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)) inset, var(--pf-global--BoxShadow--sm-bottom, 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16));
+\t/** Selected table row hover box shadow */
+\t--pf-c-table--tr--m-selected--tr--m-selected--hover--BoxShadow: var(--pf-c-table--tr--m-selected--BoxShadow--top), var(--pf-global--BoxShadow--sm-bottom, 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16));
+\t/** Hoverable table body top box shadow */
+\t--pf-c-table--tbody--m-hoverable--BoxShadow--top: var(--pf-c-table--tr--BoxShadow--top--base);
+\t/** Hoverable table body box shadow */
+\t--pf-c-table--tbody--m-hoverable--BoxShadow: none;
+\t/** Hoverable table body background color */
+\t--pf-c-table--tbody--m-hoverable--BackgroundColor: transparent;
+\t/** Hoverable table body outline offset */
+\t--pf-c-table--tbody--m-hoverable--OutlineOffset: calc(-1 * var(--pf-global--spacer--xs, 0.25rem));
+\t/** Hoverable table body hover box shadow */
+\t--pf-c-table--tbody--m-hoverable--hover--BoxShadow: var(--pf-c-table--tbody--m-hoverable--BoxShadow--top), var(--pf-global--BoxShadow--sm-bottom, 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16));
+\t/** Hoverable table body hover background color */
+\t--pf-c-table--tbody--m-hoverable--hover--BackgroundColor: var(--pf-global--BackgroundColor--100, #fff);
+\t/** Hoverable table body focus box shadow */
+\t--pf-c-table--tbody--m-hoverable--focus--BoxShadow: var(--pf-c-table--tbody--m-hoverable--BoxShadow--top), var(--pf-global--BoxShadow--sm-bottom, 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16));
+\t/** Hoverable table body focus background color */
+\t--pf-c-table--tbody--m-hoverable--focus--BackgroundColor: var(--pf-global--BackgroundColor--100, #fff);
+\t/** Hoverable table body active box shadow */
+\t--pf-c-table--tbody--m-hoverable--active--BoxShadow: var(--pf-c-table--tbody--m-hoverable--BoxShadow--top), var(--pf-global--BoxShadow--sm-bottom, 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16));
+\t/** Hoverable table body active background color */
+\t--pf-c-table--tbody--m-hoverable--active--BackgroundColor: var(--pf-global--BackgroundColor--100, #fff);
+\t/** Hoverable table body expanded border color */
+\t--pf-c-table--tbody--m-hoverable--m-expanded--BorderColor: var(--pf-global--active-color--400, #73bcf7);
+\t/** Hoverable table body selected table row box shadow */
+\t--pf-c-table--tbody--m-hoverable--m-selected--hover--tr--BoxShadow: var(--pf-global--BoxShadow--sm-bottom, 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)) inset, var(--pf-global--BoxShadow--sm-bottom, 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16));
+\t/** Selected table body background color */
+\t--pf-c-table--tbody--m-selected--BackgroundColor: var(--pf-global--BackgroundColor--100, #fff);
+\t/** Selected table body top box shadow */
+\t--pf-c-table--tbody--m-selected--BoxShadow--top: var(--pf-c-table--tr--BoxShadow--top--base);
+\t/** Selected table body box shadow */
+\t--pf-c-table--tbody--m-selected--BoxShadow: var(--pf-c-table--tbody--m-selected--BoxShadow--top), var(--pf-global--BoxShadow--sm-bottom, 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16));
+\t/** Selected table body outline offset */
+\t--pf-c-table--tbody--m-selected--OutlineOffset: calc(-1 * var(--pf-global--spacer--xs, 0.25rem));
+\t/** Selected table body after left border width */
+\t--pf-c-table--tbody--m-selected--after--BorderLeftWidth: var(--pf-c-table__expandable-row--after--border-width--base);
+\t/** Selected table body after left border color */
+\t--pf-c-table--tbody--m-selected--after--BorderLeftColor: var(--pf-global--active-color--100, #06c);
+\t/** Selected table body selected box shadow */
+\t--pf-c-table--tbody--m-selected--m-selected--BoxShadow: var(--pf-global--BoxShadow--sm-bottom, 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16));
+\t/** Selected table body hover selected box shadow */
+\t--pf-c-table--tbody--m-selected--hover--tbody--m-selected--BoxShadow: var(--pf-global--BoxShadow--sm-bottom, 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)) inset, var(--pf-global--BoxShadow--sm-bottom, 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16));
+\t/** Selected table body hover box shadow */
+\t--pf-c-table--tbody--m-selected--tbody--m-selected--hover--BoxShadow: var(--pf-c-table--tr--m-selected--BoxShadow--top), var(--pf-global--BoxShadow--sm-bottom, 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16));
+\t/** Table head nested column header button outline offset */
+\t--pf-c-table--thead--m-nested-column-header--button--OutlineOffset: -0.1875rem;
+\t/** Table head nested column header row top padding */
+\t--pf-c-table--thead--m-nested-column-header--tr--PaddingTop: var(--pf-global--spacer--xs, 0.25rem);
+\t/** Table head nested column header row bottom padding */
+\t--pf-c-table--thead--m-nested-column-header--tr--PaddingBottom: var(--pf-global--spacer--xs, 0.25rem);
+\t/** Subhead color */
+\t--pf-c-table__subhead--Color: var(--pf-global--Color--200, #6a6e73);
+\t/** Striped row background color */
+\t--pf-c-table--m-striped__tr--BackgroundColor: var(--pf-global--BackgroundColor--light-200);
+\tcolor: var(--pf-global--Color--100);
+  display: inline-grid;
+\tgrid-auto-rows: min-content;
+}
+
+@media (max-width: 768px) {
+  :host {
+    /** Cell top padding */
+    --pf-c-table--cell--PaddingTop: var(--pf-c-table--m-grid--cell--PaddingTop, 0);
+    /** Cell right padding */
+    --pf-c-table--cell--PaddingRight: var(--pf-c-table--m-grid--cell--PaddingRight, 0);
+    /** Cell bottom padding */
+    --pf-c-table--cell--PaddingBottom: var(--pf-c-table--m-grid--cell--PaddingBottom, 0);
+    /** Cell left padding */
+    --pf-c-table--cell--PaddingLeft: var(--pf-c-table--m-grid--cell--PaddingLeft, 0);
+    /** Favorite button top margin */
+    --pf-c-table__favorite--c-button--MarginTop: auto;
+    /** Favorite button right margin */
+    --pf-c-table__favorite--c-button--MarginRight: auto;
+    /** Favorite button bottom margin */
+    --pf-c-table__favorite--c-button--MarginBottom: auto;
+    /** Favorite button left margin */
+    --pf-c-table__favorite--c-button--MarginLeft: auto;
+    display: grid;
+    border: none;
+  }
+}
+`;
 const rowQuery = [
     ':scope > pf-tbody:not([expandable]) > pf-tr',
     ':scope > pf-tbody > pf-tr[expandable]',
@@ -42,6 +476,7 @@ let PfTable = _a = class PfTable extends LitElement {
         const hasExpandableRow = !!this.querySelector?.('pf-tr[expandable]');
         const coeffRows = hasExpandableRow ? '1' : '0';
         return html `
+      <!-- The default slot can hold an optional \`pf-caption\` element and a combination of \`pf-tr\`, \`pf-thead\`, or \`pf-tbody\` elements. -->
       <slot @slotchange="${__classPrivateFieldGet(this, _PfTable_instances, "m", _PfTable_onSlotchange)}"
             @request-expand="${__classPrivateFieldGet(this, _PfTable_instances, "m", _PfTable_onRequestExpand)}"
             @request-sort="${__classPrivateFieldGet(this, _PfTable_instances, "m", _PfTable_onRequestSort)}"
@@ -119,7 +554,7 @@ _PfTable_performSort = function _PfTable_performSort(header, direction) {
     }
 };
 PfTable.styles = [styles];
-PfTable.version = "4.1.0";
+PfTable.version = "4.2.0";
 __decorate([
     state()
 ], PfTable.prototype, "columns", void 0);

package/pf-table/pf-table.js.map

@@ -1 +1 @@
-{"version":3,"file":"pf-table.js","sourceRoot":"","sources":["pf-table.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, type TemplateResult } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { state } from 'lit/decorators/state.js';\n\nimport { provide } from '@lit/context';\nimport { thRoleContext } from './context.js';\n\nimport { PfTh, RequestSortEvent } from './pf-th.js';\nimport { PfTd } from './pf-td.js';\nimport { PfTr, RequestExpandEvent } from './pf-tr.js';\n\nexport * from './pf-caption.js';\nexport * from './pf-thead.js';\nexport * from './pf-tbody.js';\nexport * from './pf-tr.js';\nexport * from './pf-th.js';\nexport * from './pf-td.js';\n\nimport styles from './pf-table.css';\n\nconst rowQuery = [\n  ':scope > pf-tbody:not([expandable]) > pf-tr',\n  ':scope > pf-tbody > pf-tr[expandable]',\n  ':scope > pf-tr',\n  ':scope > pf-tr[expandable]',\n].join();\n\n/**\n * A **table** is used to display large data sets that can be easily laid out in a simple grid with column headers.\n * @slot\n *       The default slot can hold an optional `pf-caption` element and a combination of `pf-tr`, `pf-thead`, or `pf-tbody` elements.\n * @cssprop {<color>} [--pf-c-table--BackgroundColor=#fff]\n *          Table background color\n *\n * @cssprop {<color>} [--pf-c-table--BorderColor=#d2d2d2]\n *          Table border color\n *\n * @cssprop {<dimension>} [--pf-c-table--border-width--base=1px]\n *          Table border base width\n *\n * @cssprop {<dimension>} [--pf-c-table-caption--FontSize=0.875rem]\n *          Table caption font size\n *\n * @cssprop {<color>} [--pf-c-table-caption--Color=#6a6e73]\n *          Table caption color\n *\n * @cssprop {<dimension>} [--pf-c-table-caption--PaddingTop=1rem]\n *          Table caption top padding\n *\n * @cssprop {<dimension>} [--pf-c-table-caption--PaddingRight=1.5rem]\n *          Table caption right padding\n *\n * @cssprop {<dimension>} [--pf-c-table-caption--PaddingBottom=1rem]\n *          Table caption bottom padding\n *\n * @cssprop {<dimension>} [--pf-c-table-caption--PaddingLeft=1.5rem]\n *          Table caption left padding\n *\n * @cssprop {<length>} [--pf-c-table-caption--xl--PaddingRight=1rem]\n *          Table XL caption right padding\n *\n * @cssprop {<dimension>} [--pf-c-table-caption--xl--PaddingLeft=1rem]\n *          Table XL caption left padding\n *\n * @cssprop {<dimension>} [--pf-c-table--thead--cell--FontSize=0.875rem]\n *          Table head cell font size\n *\n * @cssprop {<number>} [--pf-c-table--thead--cell--FontWeight=700]\n *          Table head cell font weight\n *\n * @cssprop {<dimension>} [--pf-c-table--tbody--cell--PaddingTop=1.5rem]\n *          Table body cell padding top\n *\n * @cssprop {<dimension>} [--pf-c-table--tbody--cell--PaddingBottom=1.5rem]\n *          Table body cell padding bottom\n *\n * @cssprop {<color>} [--pf-c-table--tr--BoxShadow--top--base=0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08)]\n *          Table row top base box shadow\n *\n * @cssprop {<dimension>} [--pf-c-table--cell--Padding--base=1rem]\n *          Table cell base padding\n *\n * @cssprop {<dimension>} [--pf-c-table--cell--FontSize=1rem]\n *          Table cell font size\n *\n * @cssprop {<number>} [--pf-c-table--cell--FontWeight=400]\n *          Table cell font weight\n *\n * @cssprop {<color>} [--pf-c-table--cell--Color=#151515]\n *          Table cell color\n *\n * @cssprop {<dimension>} [--pf-c-table--cell--PaddingTop=1rem]\n *          Table cell top padding\n *\n * @cssprop {<dimension>} [--pf-c-table--cell--PaddingRight=1rem]\n *          Table cell right padding\n *\n * @cssprop {<dimension>} [--pf-c-table--cell--PaddingBottom=1rem]\n *          Table cell bottom padding\n *\n * @cssprop {<dimension>} [--pf-c-table--cell--PaddingLeft=1rem]\n *          Table cell left padding\n *\n * @cssprop {<dimension>} [--pf-c-table--cell--first-last-child--PaddingLeft=1rem]\n *          Table cell last child left padding\n *\n * @cssprop {<dimension>} [--pf-c-table--cell--first-last-child--PaddingRight=1rem]\n *          Table cell last child right padding\n *\n * @cssprop {<dimension>} [--pf-c-table--cell--first-last-child--xl--PaddingLeft=1.5rem]\n *          Table XL cell last child left padding\n *\n * @cssprop {<dimension>} [--pf-c-table--cell--first-last-child--xl--PaddingRight=1.5rem]\n *          Table XL cell last child right padding\n *\n * @cssprop {<dimension>} [--pf-c-table--tr--m-first-cell-offset-reset--cell--PaddingLeft=1rem]\n *          Table row first cell offset reset cell left padding\n *\n * @cssprop {<length>} [--pf-c-table--cell--MinWidth=0]\n *          Table cell min width\n *\n * @cssprop {<length>} [--pf-c-table--cell--MaxWidth=none]\n *          Table cell max width\n *\n * @cssprop {<length>} [--pf-c-table--cell--Width=auto]\n *          Table cell width\n *\n * @cssprop {<overflow>} [--pf-c-table--cell--Overflow=visible]\n *          Table cell overflow\n *\n * @cssprop {<>} [--pf-c-table--cell--TextOverflow=clip]\n *          Table cell text overflow\n *\n * @cssprop {<>} [--pf-c-table--cell--WhiteSpace=normal]\n *          Table cell white space\n *\n * @cssprop {<>} [--pf-c-table--cell--WordBreak=normal]\n *          Table cell word break\n *\n * @cssprop {<length>} [--pf-c-table--cell--m-border-right--before--BorderRightWidth=1px]\n *          Table cell before right border width\n *\n * @cssprop {<color>} [--pf-c-table--cell--m-border-right--before--BorderRightColor=#d2d2d2]\n *          Table cell before right border color\n *\n * @cssprop {<length>} [--pf-c-table--cell--m-border-left--before--BorderLeftWidth=1px]\n *          Table cell before left border width\n *\n * @cssprop {<color>} [--pf-c-table--cell--m-border-left--before--BorderLeftColor=#d2d2d2]\n *          Table cell before left border color\n *\n * @cssprop {<length>} [--pf-c-table--cell--m-help--MinWidth=11ch]\n *          Help cell minimum width\n *\n * @cssprop {<length>} [--pf-c-table--m-truncate--cell--MaxWidth=1px]\n *          Help cell maximum width\n *\n * @cssprop {<calc-sum>} [--pf-c-table--m-truncate--cell--MinWidth=calc(5ch + 1rem + 1rem)]\n *          Truncated cell minimum width\n *\n * @cssprop {<>} [--pf-c-table--cell--hidden-visible--Display=grid]\n *          Cell visible display\n *\n * @cssprop {<calc-product>} [--pf-c-table__toggle--c-button--MarginTop=calc(0.375rem * -1)]\n *          Toggle button top margin\n *\n * @cssprop {<calc-product>} [--pf-c-table__toggle--c-button--MarginBottom=calc(0.375rem * -1)]\n *          Toggle button bottom margin\n *\n * @cssprop {<>} [--pf-c-table__toggle--c-button__toggle-icon--Rotate=270deg]\n *          Toggle button icon rotation\n *\n * @cssprop {<>} [--pf-c-table__toggle--c-button__toggle-icon--Transition=.2s ease-in 0s]\n *          Toggle button icon transition\n *\n * @cssprop {<>} [--pf-c-table__toggle--c-button--m-expanded__toggle-icon--Rotate=360deg]\n *          Expanded toggle button icon rotation\n *\n * @cssprop {<color>} [--pf-c-table__button--BackgroundColor=transparent]\n *          Button background color\n *\n * @cssprop {<color>} [--pf-c-table__button--Color=#151515]\n *          Button color\n *\n * @cssprop {<color>} [--pf-c-table__button--hover--Color=#151515]\n *          Button hover color\n *\n * @cssprop {<color>} [--pf-c-table__button--focus--Color=#151515]\n *          Button focus color\n *\n * @cssprop {<color>} [--pf-c-table__button--active--Color=#151515]\n *          Button active color\n *\n * @cssprop {<calc-sum>} [--pf-c-table__button--OutlineOffset=calc(3px * -1)]\n *          Button outline offset\n *\n * @cssprop {<dimension>} [--pf-c-table--m-compact__toggle--PaddingTop=0]\n *          Compact toggle top padding\n *\n * @cssprop {<dimension>} [--pf-c-table--m-compact__toggle--PaddingBottom=0]\n *          Compacy toggle bottom padding\n *\n * @cssprop {<dimension>} [--pf-c-table__check--input--MarginTop=0.25rem]\n *          Check input top margin\n *\n * @cssprop {<dimension>} [--pf-c-table__check--input--FontSize=1rem]\n *          Check input font size\n *\n * @cssprop {<color>} [--pf-c-table--cell--m-favorite--Color=#d2d2d2]\n *          Favorite cell color\n *\n * @cssprop {<color>} [--pf-c-table__favorite--c-button--Color=#d2d2d2]\n *          Favorite button color\n *\n * @cssprop {<dimension>} [--pf-c-table__favorite--c-button--FontSize=0.875rem]\n *          Favorite button font size\n *\n * @cssprop {<calc-product>} [--pf-c-table__favorite--c-button--MarginTop=calc(0.375rem * -1)]\n *          Favorite button top margin\n *\n * @cssprop {<calc-product>} [--pf-c-table__favorite--c-button--MarginRight=calc(1rem * -1)]\n *          Favorite button right margin\n *\n * @cssprop {<calc-product>} [--pf-c-table__favorite--c-button--MarginBottom=calc(0.375rem * -1)]\n *          Favorite button bottom margin\n *\n * @cssprop {<calc-product>} [--pf-c-table__favorite--c-button--MarginLeft=calc(1rem * -1)]\n *          Favorite button left margin\n *\n * @cssprop {<color>} [--pf-c-table__favorite--m-favorited--c-button--Color=#f0ab00]\n *          Favorited button color\n *\n * @cssprop {<color>} [--pf-c-table__sort--m-favorite__button__text--Color=#6a6e73]\n *          Favorite sort button text color\n *\n * @cssprop {<color>} [--pf-c-table__sort--m-favorite__button--hover__text--Color=#151515]\n *          Favorite sort button hover text color\n *\n * @cssprop {<color>} [--pf-c-table__sort--m-favorite__button--focus__text--Color=#151515]\n *          Favorite sort button focus text color\n *\n * @cssprop {<color>} [--pf-c-table__sort--m-favorite__button--active__text--Color=#151515]\n *          Favorite sort button active text color\n *\n * @cssprop {<calc-product>} [--pf-c-table__draggable--c-button--MarginTop=calc(0.375rem * -1)]\n *          Draggable button top margin\n *\n * @cssprop {<calc-product>} [--pf-c-table__draggable--c-button--MarginRight=calc(1rem * -1)]\n *          Draggable button right margin\n *\n * @cssprop {<calc-product>} [--pf-c-table__draggable--c-button--MarginBottom=calc(0.375rem * -1)]\n *          Draggable button bottom margin\n *\n * @cssprop {<calc-product>} [--pf-c-table__draggable--c-button--MarginLeft=calc(1rem * -1)]\n *          Draggable button left margin\n *\n * @cssprop {<dimension>} [--pf-c-table__tr--m-ghost-row--Opacity=.4]\n *          Ghost row opacity\n *\n * @cssprop {<color>} [--pf-c-table__tr--m-ghost-row--BackgroundColor=#fff]\n *          Ghost row background color\n *\n * @cssprop {<dimension>} [--pf-c-table__action--PaddingTop=0]\n *          Action top padding\n *\n * @cssprop {<dimension>} [--pf-c-table__action--PaddingRight=0]\n *          Action right padding\n *\n * @cssprop {<dimension>} [--pf-c-table__action--PaddingBottom=0]\n *          Action bottom padding\n *\n * @cssprop {<dimension>} [--pf-c-table__action--PaddingLeft=0]\n *          Action left padding\n *\n * @cssprop {<dimension>} [--pf-c-table__inline-edit-action--PaddingTop=0]\n *          Inline edit action top padding\n *\n * @cssprop {<dimension>} [--pf-c-table__inline-edit-action--PaddingRight=0]\n *          Inline edit action right padding\n *\n * @cssprop {<dimension>} [--pf-c-table__inline-edit-action--PaddingBottom=0]\n *          Inline edit action bottom padding\n *\n * @cssprop {<dimension>} [--pf-c-table__inline-edit-action--PaddingLeft=0]\n *          Inline edit action left padding\n *\n * @cssprop {<>} [--pf-c-table__expandable-row--Transition=all 250ms cubic-bezier(.42, 0, .58, 1)]\n *          Expandable row transition\n *\n * @cssprop {<length>} [--pf-c-table__expandable-row--MaxHeight=28.125rem]\n *          Expandable row max height\n *\n * @cssprop {<>} [--pf-c-table__expandable-row-content--Transition=all 250ms cubic-bezier(.42, 0, .58, 1)]\n *          Expandable row content transition\n *\n * @cssprop {<dimension>} [--pf-c-table__expandable-row-content--PaddingTop=1.5rem]\n *          Expandable row content top padding\n *\n * @cssprop {<dimension>} [--pf-c-table__expandable-row-content--PaddingBottom=1.5rem]\n *          Expandable row content bottom padding\n *\n * @cssprop {<calc-product>} [--pf-c-table__expandable-row--after--Top=calc(1px * -1)]\n *          Expandable row after top\n *\n * @cssprop {<calc-product>} [--pf-c-table__expandable-row--after--Bottom=calc(1px * -1)]\n *          Expandable row after bottom\n *\n * @cssprop {<length>} [--pf-c-table__expandable-row--after--border-width--base=3px]\n *          Expandable row after base border width\n *\n * @cssprop {<length>} [--pf-c-table__expandable-row--after--BorderLeftWidth=0]\n *          Expandable row after left border width\n *\n * @cssprop {<color>} [--pf-c-table__expandable-row--after--BorderColor=#06c]\n *          Expandable row after border color\n *\n * @cssprop {<dimension>} [--pf-c-table__icon-inline--MarginRight=0.5rem]\n *          Inline icon right margin\n *\n * @cssprop {<calc-sum>} [--pf-c-table__sort--MinWidth=calc(6ch + 1rem + 1rem + 1rem)]\n *          Sort button minimum width\n *\n * @cssprop {<dimension>} [--pf-c-table__sort__button--PaddingTop=0.375rem]\n *          Sort button top padding\n *\n * @cssprop {<dimension>} [--pf-c-table__sort__button--PaddingRight=0.5rem]\n *          Sort button right padding\n *\n * @cssprop {<dimension>} [--pf-c-table__sort__button--PaddingBottom=0.375rem]\n *          Sort button bottom padding\n *\n * @cssprop {<dimension>} [--pf-c-table__sort__button--PaddingLeft=0.5rem]\n *          Sort button left padding\n *\n * @cssprop {<calc-product>} [--pf-c-table__sort__button--MarginTop=calc(0.375rem * -1)]\n *          Sort button top margin\n *\n * @cssprop {<calc-product>} [--pf-c-table__sort__button--MarginBottom=calc(0.375rem * -1)]\n *          Sort button bottom margin\n *\n * @cssprop {<calc-product>} [--pf-c-table__sort__button--MarginLeft=calc(0.5rem * -1)]\n *          Sort button left margin\n *\n * @cssprop {<color>} [--pf-c-table__sort__button--Color=#151515]\n *          Sort button color\n *\n * @cssprop {<color>} [--pf-c-table__sort--m-selected__button--Color=#06c]\n *          Selected sort button color\n *\n * @cssprop {<length>} [--pf-c-table__sort--m-help--MinWidth=15ch]\n *          Help button minimum width\n *\n * @cssprop {<color>} [--pf-c-table__sort__button__text--Color=currentcolor]\n *          Sort button text color\n *\n * @cssprop {<color>} [--pf-c-table__sort__button--hover__text--Color=currencolor]\n *          Sort button hover text color\n *\n * @cssprop {<color>} [--pf-c-table__sort__button--focus__text--Color=currentcolor]\n *          Sort button focus text color\n *\n * @cssprop {<color>} [--pf-c-table__sort__button--active__text--Color=currentcolor]\n *          Sort button active text color\n *\n * @cssprop {<color>} [--pf-c-table__sort-indicator--Color=#d2d2d2]\n *          Sort inidcator color\n *\n * @cssprop {<calc-sum>} [--pf-c-table__sort-indicator--MarginLeft=calc(6ch + 1rem + 1rem + 1rem)]\n *          Sort inidcator left margin\n *\n * @cssprop {<color>} [--pf-c-table__sort--m-selected__sort-indicator--Color=#06c]\n *          Selected sort inidcator color\n *\n * @cssprop {<color>} [--pf-c-table__sort__button--hover__sort-indicator--Color=#151515]\n *          Sort button hover sort indicator color\n *\n * @cssprop {<color>} [--pf-c-table__sort__button--active__sort-indicator--Color=#151515]\n *          Sort button hover active sort indicator color\n *\n * @cssprop {<color>} [--pf-c-table__sort__button--focus__sort-indicator--Color=#151515]\n *          Sort button hover focus sort indicator color\n *\n * @cssprop {<length>} [--pf-c-table--th--m-help--MinWidth=11ch]\n *          Header cell help minimum width\n *\n * @cssprop {<dimension>} [--pf-c-table__column-help--MarginLeft=0.25rem]\n *          Help column left magin\n *\n * @cssprop {<dimension>} [--pf-c-table__column-help--TranslateY=0.125rem]\n *          Help column translate y axis\n *\n * @cssprop {<calc-product>} [--pf-c-table__column-help--c-button--MarginTop=calc(0.375rem * -1)]\n *          Help column button top margin\n *\n * @cssprop {<calc-product>} [--pf-c-table__column-help--c-button--MarginBottom=calc(0.375rem * -1)]\n *          Help column button bottom margin\n *\n * @cssprop {<dimension>} [--pf-c-table__column-help--c-button--PaddingRight=0.5rem]\n *          Help column button right padding\n *\n * @cssprop {<dimension>} [--pf-c-table__column-help--c-button--PaddingLeft=0.5rem]\n *          Help column button left margin\n *\n * @cssprop {<color>} [--pf-c-table__compound-expansion-toggle__button--Color=#06c]\n *          Compound expansion toggle button color\n *\n * @cssprop {<color>} [--pf-c-table__compound-expansion-toggle__button--hover--Color=#004080]\n *          Compound expansion hover toggle button color\n *\n * @cssprop {<color>} [--pf-c-table__compound-expansion-toggle__button--focus--Color=#004080]\n *          Compound expansion focus toggle button color\n *\n * @cssprop {<color>} [--pf-c-table__compound-expansion-toggle__button--active--Color=#004080]\n *          Compound expansion active toggle button color\n *\n * @cssprop {<length>} [--pf-c-table__compound-expansion-toggle__button--before--border-width--base=1px]\n *          Compound expansion toggle button before border width\n *\n * @cssprop {<color>} [--pf-c-table__compound-expansion-toggle__button--before--BorderColor=#d2d2d2]\n *          Compound expansion toggle button before border color\n *\n * @cssprop {<length>} [--pf-c-table__compound-expansion-toggle__button--before--BorderRightWidth=0]\n *          Compound expansion toggle button before right border width\n *\n * @cssprop {<length>} [--pf-c-table__compound-expansion-toggle__button--before--BorderLeftWidth=0]\n *          Compound expansion toggle button before left border width\n *\n * @cssprop {<calc-product>} [--pf-c-table__compound-expansion-toggle__button--before--Bottom=calc(1px * -1)]\n *          Compound expansion toggle button before bottom\n *\n * @cssprop {<calc-product>} [--pf-c-table__compound-expansion-toggle__button--before--Left=calc(1px * -1)]\n *          Compound expansion toggle button before left\n *\n * @cssprop {<length>} [--pf-c-table__compound-expansion-toggle__button--after--border-width--base=3px]\n *          Compound expansion toggle button after base border width\n *\n * @cssprop {<color>} [--pf-c-table__compound-expansion-toggle__button--after--BorderColor=#06c]\n *          Compound expansion toggle button after border color\n *\n * @cssprop {<length>} [--pf-c-table__compound-expansion-toggle__button--after--BorderTopWidth=0]\n *          Compound expansion toggle button after top border width\n *\n * @cssprop {<calc-sum>} [--pf-c-table__compound-expansion-toggle__button--after--Top=calc(1px * -1)]\n *          Compound expansion toggle button after top\n *\n * @cssprop {<calc-sum>} [--pf-c-table__compound-expansion-toggle__button--after--Left=calc(1px * -1)]\n *          Compound expansion toggle button after left\n *\n * @cssprop {<calc-sum>} [--pf-c-table--m-compact-th--PaddingTop=calc(0.5rem + 0.25rem)]\n *          Compact header cell top padding\n *\n * @cssprop {<dimension>} [--pf-c-table--m-compact-th--PaddingBottom=0.5rem]\n *          Compact header cell bottom padding\n *\n * @cssprop {<dimension>} [--pf-c-table--m-compact--cell--PaddingTop=0.5rem]\n *          Compact cell top padding\n *\n * @cssprop {<dimension>} [--pf-c-table--m-compact--cell--PaddingRight=0.5rem]\n *          Compact cell right padding\n *\n * @cssprop {<dimension>} [--pf-c-table--m-compact--cell--PaddingBottom=0.5rem]\n *          Compact cell bottom padding\n *\n * @cssprop {<dimension>} [--pf-c-table--m-compact--cell--PaddingLeft=0.5rem]\n *          Compact cell left padding\n *\n * @cssprop {<dimension>} [--pf-c-table--m-compact--cell--first-last-child--PaddingLeft=1rem]\n *          Compact cell first child left padding\n *\n * @cssprop {<dimension>} [--pf-c-table--m-compact--cell--first-last-child--PaddingRight=1rem]\n *          Compact XLcell first child right padding\n *\n * @cssprop {<dimension>} [--pf-c-table--m-compact--cell--first-last-child--xl--PaddingLeft=1.5rem]\n *          Compact cell first child XL left padding\n *\n * @cssprop {<dimension>} [--pf-c-table--m-compact--cell--first-last-child--xl--PaddingRight=1.5rem]\n *          Compact cell first child XL right padding\n *\n * @cssprop {<dimension>} [--pf-c-table--m-compact--FontSize=0.875rem]\n *          Compact font size\n *\n * @cssprop {<dimension>} [--pf-c-table--m-compact__expandable-row-content--PaddingTop=1.5rem]\n *          Compact expandable row content top padding\n *\n * @cssprop {<dimension>} [--pf-c-table--m-compact__expandable-row-content--PaddingRight=1.5rem]\n *          Compact expandable row content right padding\n *\n * @cssprop {<dimension>} [--pf-c-table--m-compact__expandable-row-content--PaddingBottom=1.5rem]\n *          Compact expandable row content bottom padding\n *\n * @cssprop {<dimension>} [--pf-c-table--m-compact__expandable-row-content--PaddingLeft=1.5rem]\n *          Compact expandable row content left padding\n *\n * @cssprop {<dimension>} [--pf-c-table--nested--first-last-child--PaddingRight=1rem]\n *          Nested first child right padding\n *\n * @cssprop {<dimension>} [--pf-c-table--nested--first-last-child--PaddingLeft=1rem]\n *          Nested first child left padding\n *\n * @cssprop {<color>} [--pf-c-table__expandable-row--m-expanded--BorderBottomColor=#d2d2d2]\n *          Expandable row expanded bottom border color\n *\n * @cssprop {<color>} [--pf-c-table--tr--m-hoverable--BoxShadow--top=0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08)]\n *          Hoverable table row top box shadow\n *\n * @cssprop {<dimension>} [--pf-c-table--tr--m-hoverable--BackgroundColor=transparent]\n *          Hoverable table row background color\n *\n * @cssprop {<color>} [--pf-c-table--tr--m-hoverable--BoxShadow=0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08)]\n *          Hoverable table row box shadow\n *\n * @cssprop {<calc-sum>} [--pf-c-table--tr--m-hoverable--OutlineOffset=calc(-1 * 0.25rem)]\n *          Hoverable table row outline offset\n *\n * @cssprop {<color>} [--pf-c-table--tr--m-hoverable--hover--BoxShadow=0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08), 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)]\n *          Hoverable table row hover box shadow\n *\n * @cssprop {<color>} [--pf-c-table--tr--m-hoverable--hover--BackgroundColor=#fff]\n *          Hoverable table row hover background color\n *\n * @cssprop {<color>} [--pf-c-table--tr--m-hoverable--focus--BoxShadow=0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08), 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)]\n *          Hoverable table row focus box shadow\n *\n * @cssprop {<color>} [--pf-c-table--tr--m-hoverable--focus--BackgroundColor=#fff]\n *          Hoverable table row focus background color\n *\n * @cssprop {<color>} [--pf-c-table--tr--m-hoverable--active--BoxShadow=0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08), 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)]\n *          Hoverable table row active box shadow\n *\n * @cssprop {<color>} [--pf-c-table--tr--m-hoverable--active--BackgroundColor=#fff]\n *          Hoverable table row active background color\n *\n * @cssprop {<color>} [--pf-c-table--tr--m-hoverable--m-selected--BoxShadow=0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16) inset, 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)]\n *          Hoverable table row selected box shadow\n *\n * @cssprop {<color>} [--pf-c-table--tr--m-selected--BoxShadow--top=0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08)]\n *          Selected table row top box shadow\n *\n * @cssprop {<color>} [--pf-c-table--tr--m-selected--BackgroundColor=#fff]\n *          Selected table row background color\n *\n * @cssprop {<color>} [--pf-c-table--tr--m-selected--BoxShadow=0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08)]\n *          Selected table row box shadow\n *\n * @cssprop {<calc-sum>} [--pf-c-table--tr--m-selected--OutlineOffset=calc(-1 * 0.25rem)]\n *          Selected table row outline offset\n *\n * @cssprop {<length>} [--pf-c-table--tr--m-selected--after--BorderLeftWidth=3px]\n *          Selected table row after left border width\n *\n * @cssprop {<color>} [--pf-c-table--tr--m-selected--after--BorderLeftColor=#06c]\n *          Selected table row after left border color\n *\n * @cssprop {<color>} [--pf-c-table--tr--m-selected--m-selected--BoxShadow=0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)]\n *          Selected table row box shadow\n *\n * @cssprop {<color>} [--pf-c-table--tr--m-selected--hover--m-selected--BoxShadow=0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16) inset, 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)]\n *          Selected table row hover box shadow\n *\n * @cssprop {<color>} [--pf-c-table--tr--m-selected--tr--m-selected--hover--BoxShadow=0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08), 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)]\n *          Selected table row hover box shadow\n *\n * @cssprop {<color>} [--pf-c-table--tbody--m-hoverable--BoxShadow--top=0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08)]\n *          Hoverable table body top box shadow\n *\n * @cssprop {<color>} [--pf-c-table--tbody--m-hoverable--BoxShadow=0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08)]\n *          Hoverable table body box shadow\n *\n * @cssprop {<dimension>} [--pf-c-table--tbody--m-hoverable--BackgroundColor=transparent]\n *          Hoverable table body background color\n *\n * @cssprop {<calc-sum>} [--pf-c-table--tbody--m-hoverable--OutlineOffset=calc(-1 * 0.25rem)]\n *          Hoverable table body outline offset\n *\n * @cssprop {<color>} [--pf-c-table--tbody--m-hoverable--hover--BoxShadow=0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08), 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)]\n *          Hoverable table body hover box shadow\n *\n * @cssprop {<color>} [--pf-c-table--tbody--m-hoverable--hover--BackgroundColor=#fff]\n *          Hoverable table body hover background color\n *\n * @cssprop {<color>} [--pf-c-table--tbody--m-hoverable--focus--BoxShadow=0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08), 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)]\n *          Hoverable table body focus box shadow\n *\n * @cssprop {<color>} [--pf-c-table--tbody--m-hoverable--focus--BackgroundColor=#fff]\n *          Hoverable table body focus background color\n *\n * @cssprop {<color>} [--pf-c-table--tbody--m-hoverable--active--BoxShadow=0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08), 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)]\n *          Hoverable table body active box shadow\n *\n * @cssprop {<color>} [--pf-c-table--tbody--m-hoverable--active--BackgroundColor=#fff]\n *          Hoverable table body active background color\n *\n * @cssprop {<color>} [--pf-c-table--tbody--m-hoverable--m-expanded--BorderColor=#73bcf7]\n *          Hoverable table body expanded border color\n *\n * @cssprop {<color>} [--pf-c-table--tbody--m-hoverable--m-selected--hover--tr--BoxShadow=0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16) inset, 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)]\n *          Hoverable table body selected table row box shadow\n *\n * @cssprop {<color>} [--pf-c-table--tbody--m-selected--BackgroundColor=#fff]\n *          Selected table body background color\n *\n * @cssprop {<color>} [--pf-c-table--tbody--m-selected--BoxShadow--top=0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08)]\n *          Selected table body top box shadow\n *\n * @cssprop {<color>} [--pf-c-table--tbody--m-selected--BoxShadow=0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08)]\n *          Selected table body box shadow\n *\n * @cssprop {<calc-product>} [--pf-c-table--tbody--m-selected--OutlineOffset=calc(-1 * 0.25rem)]\n *          Selected table body outline offset\n *\n * @cssprop {<length>} [--pf-c-table--tbody--m-selected--after--BorderLeftWidth=3px]\n *          Selected table body after left border width\n *\n * @cssprop {<color>} [--pf-c-table--tbody--m-selected--after--BorderLeftColor=#06c]\n *          Selected table body after left border color\n *\n * @cssprop {<color>} [--pf-c-table--tbody--m-selected--m-selected--BoxShadow=0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)]\n *          Selected table body selected box shadow\n *\n * @cssprop {<color>} [--pf-c-table--tbody--m-selected--hover--tbody--m-selected--BoxShadow=0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16) inset, 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)]\n *          Selected table body hover selected box shadow\n *\n * @cssprop {<color>} [--pf-c-table--tbody--m-selected--tbody--m-selected--hover--BoxShadow=0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08), 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)]\n *          Selected table body hover box shadow\n *\n * @cssprop {<dimension>} [--pf-c-table--thead--m-nested-column-header--button--OutlineOffset=-0.1875rem]\n *          Table head nested column header button outline offset\n *\n * @cssprop {<dimension>} [--pf-c-table--thead--m-nested-column-header--tr--PaddingTop=0.25rem]\n *          Table head nested column header row top padding\n *\n * @cssprop {<dimension>} [--pf-c-table--thead--m-nested-column-header--tr--PaddingBottom=0.25rem]\n *          Table head nested column header row bottom padding\n *\n * @cssprop {<color>} [--pf-c-table__subhead--Color=#6a6e73]\n *          Subhead color\n *\n * @cssprop {<color>} [--pf-c-table--m-striped__tr--BackgroundColor=#fafafa]\n *          Striped row background color\n *\n * @cssprop {<dimension>} [--pf-c-table--cell--PaddingTop=1rem]\n *          Cell top padding\n *\n * @cssprop {<dimension>} [--pf-c-table--cell--PaddingRight=1rem]\n *          Cell right padding\n *\n * @cssprop {<dimension>} [--pf-c-table--cell--PaddingBottom=1rem]\n *          Cell bottom padding\n *\n * @cssprop {<dimension>} [--pf-c-table--cell--PaddingLeft=1rem]\n *          Cell left padding\n *\n * @cssprop {<calc-sum>} [--pf-c-table__favorite--c-button--MarginTop=calc(0.375rem * -1)]\n *          Favorite button top margin\n *\n * @cssprop {<calc-sum>} [--pf-c-table__favorite--c-button--MarginRight=calc(1rem * -1)]\n *          Favorite button right margin\n *\n * @cssprop {<calc-sum>} [--pf-c-table__favorite--c-button--MarginBottom=calc(0.375rem * -1)]\n *          Favorite button bottom margin\n *\n * @cssprop {<calc-sum>} [--pf-c-table__favorite--c-button--MarginLeft=calc(1rem * -1)]\n *          Favorite button left margin\n *\n */\n@customElement('pf-table')\nexport class PfTable extends LitElement {\n  static readonly styles: CSSStyleSheet[] = [styles];\n\n  get rows(): NodeListOf<PfTr> {\n    return this.querySelectorAll?.<PfTr>(rowQuery);\n  }\n\n  @state() private columns = 0;\n\n  @provide({ context: thRoleContext }) private thRowContext = 'rowheader';\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.setAttribute('role', 'table');\n    this.#onSlotchange();\n  }\n\n  render(): TemplateResult<1> {\n    const hasExpandableRow = !!this.querySelector?.('pf-tr[expandable]');\n    const coeffRows = hasExpandableRow ? '1' : '0';\n    return html`\n      <slot @slotchange=\"${this.#onSlotchange}\"\n            @request-expand=\"${this.#onRequestExpand}\"\n            @request-sort=\"${this.#onRequestSort}\"\n            style=\"${styleMap({\n              '--_pf-table--expandable-rows': coeffRows,\n              '--_pf-table--number-of-columns': this.columns,\n            })}\"\n      ></slot>\n    `;\n  }\n\n  #onRequestExpand(event: Event) {\n    if (event instanceof RequestExpandEvent\n        && !event.defaultPrevented) {\n      event.stopPropagation();\n      if (event.target instanceof PfTr) {\n        event.target.expanded = !!event.target.expandable && !event.target.expanded;\n      } else if (event.target instanceof PfTd && event.row) {\n        event.row.expanded = event.compoundExpanded;\n        for (const cell of event.row.querySelectorAll('pf-td')) {\n          cell.expanded = event.compoundExpanded === cell.compoundExpand;\n        }\n      }\n    }\n  }\n\n  #onSlotchange() {\n    this.columns = this.querySelector?.('pf-tr')?.querySelectorAll('pf-th')?.length ?? 0;\n    this.requestUpdate();\n  }\n\n  #onRequestSort(event: Event) {\n    if (event instanceof RequestSortEvent) {\n      for (const col of this.querySelectorAll<PfTh>('pf-th[sortable]')) {\n        col.selected = col === event.target;\n        if (col !== event.target) {\n          col.removeAttribute('sort-direction');\n        }\n      }\n      if (!event.defaultPrevented && event.target instanceof PfTh) {\n        event.target.sortDirection = event.direction;\n        this.#performSort(event.target, event.direction);\n      }\n    }\n  }\n\n  #performSort(header: PfTh, direction: 'asc' | 'desc') {\n    const children = header.parentElement?.children;\n    if (children) {\n      const columnIndexToSort = [...children].indexOf(header);\n      Array\n          .from(this.rows, node => PfTable.getNodeContentForSort(columnIndexToSort, node))\n          .sort((a, b) => PfTable.sortByContent(direction, a, b))\n          .forEach(({ node }, index) => {\n            const target = this.rows[index];\n            if (this.rows[index] !== node) {\n              const position: InsertPosition =\n                direction === 'desc' ? 'afterend' : 'beforebegin';\n              target.insertAdjacentElement(position, node);\n            }\n          });\n    }\n  }\n\n  private static getNodeContentForSort(\n    columnIndexToSort: number,\n    node: Element,\n  ) {\n    const content = node.querySelector(`\n      :scope > :is(pf-th, pf-td):nth-child(${columnIndexToSort + 1}),\n      :scope > pf-tr > :is(pf-th, pf-td):nth-child(${columnIndexToSort + 1})\n    `.trim())?.textContent?.trim()?.toLowerCase() ?? '';\n    return { node, content };\n  }\n\n  private static sortByContent(\n    direction: 'asc' | 'desc',\n    a: { content: string },\n    b: { content: string },\n  ) {\n    if (direction === 'asc') {\n      return (a.content < b.content ? -1 : a.content > b.content ? 1 : 0);\n    } else {\n      return (b.content < a.content ? -1 : b.content > a.content ? 1 : 0);\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-table': PfTable;\n  }\n}\n"]}
+{"version":3,"file":"pf-table.js","sourceRoot":"","sources":["pf-table.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, type TemplateResult } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { state } from 'lit/decorators/state.js';\n\nimport { provide } from '@lit/context';\nimport { thRoleContext } from './context.js';\n\nimport { PfTh, RequestSortEvent } from './pf-th.js';\nimport { PfTd } from './pf-td.js';\nimport { PfTr, RequestExpandEvent } from './pf-tr.js';\n\nexport * from './pf-caption.js';\nexport * from './pf-thead.js';\nexport * from './pf-tbody.js';\nexport * from './pf-tr.js';\nexport * from './pf-th.js';\nexport * from './pf-td.js';\n\nimport styles from './pf-table.css';\n\nconst rowQuery = [\n  ':scope > pf-tbody:not([expandable]) > pf-tr',\n  ':scope > pf-tbody > pf-tr[expandable]',\n  ':scope > pf-tr',\n  ':scope > pf-tr[expandable]',\n].join();\n\n/**\n * A **table** is used to display large data sets that can be easily laid out in a simple grid with column headers.\n * @alias Table\n */\n@customElement('pf-table')\nexport class PfTable extends LitElement {\n  static readonly styles: CSSStyleSheet[] = [styles];\n\n  get rows(): NodeListOf<PfTr> {\n    return this.querySelectorAll?.<PfTr>(rowQuery);\n  }\n\n  @state() private columns = 0;\n\n  @provide({ context: thRoleContext }) private thRowContext = 'rowheader';\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.setAttribute('role', 'table');\n    this.#onSlotchange();\n  }\n\n  render(): TemplateResult<1> {\n    const hasExpandableRow = !!this.querySelector?.('pf-tr[expandable]');\n    const coeffRows = hasExpandableRow ? '1' : '0';\n    return html`\n      <!-- The default slot can hold an optional \\`pf-caption\\` element and a combination of \\`pf-tr\\`, \\`pf-thead\\`, or \\`pf-tbody\\` elements. -->\n      <slot @slotchange=\"${this.#onSlotchange}\"\n            @request-expand=\"${this.#onRequestExpand}\"\n            @request-sort=\"${this.#onRequestSort}\"\n            style=\"${styleMap({\n              '--_pf-table--expandable-rows': coeffRows,\n              '--_pf-table--number-of-columns': this.columns,\n            })}\"\n      ></slot>\n    `;\n  }\n\n  #onRequestExpand(event: Event) {\n    if (event instanceof RequestExpandEvent\n        && !event.defaultPrevented) {\n      event.stopPropagation();\n      if (event.target instanceof PfTr) {\n        event.target.expanded = !!event.target.expandable && !event.target.expanded;\n      } else if (event.target instanceof PfTd && event.row) {\n        event.row.expanded = event.compoundExpanded;\n        for (const cell of event.row.querySelectorAll('pf-td')) {\n          cell.expanded = event.compoundExpanded === cell.compoundExpand;\n        }\n      }\n    }\n  }\n\n  #onSlotchange() {\n    this.columns = this.querySelector?.('pf-tr')?.querySelectorAll('pf-th')?.length ?? 0;\n    this.requestUpdate();\n  }\n\n  #onRequestSort(event: Event) {\n    if (event instanceof RequestSortEvent) {\n      for (const col of this.querySelectorAll<PfTh>('pf-th[sortable]')) {\n        col.selected = col === event.target;\n        if (col !== event.target) {\n          col.removeAttribute('sort-direction');\n        }\n      }\n      if (!event.defaultPrevented && event.target instanceof PfTh) {\n        event.target.sortDirection = event.direction;\n        this.#performSort(event.target, event.direction);\n      }\n    }\n  }\n\n  #performSort(header: PfTh, direction: 'asc' | 'desc') {\n    const children = header.parentElement?.children;\n    if (children) {\n      const columnIndexToSort = [...children].indexOf(header);\n      Array\n          .from(this.rows, node => PfTable.getNodeContentForSort(columnIndexToSort, node))\n          .sort((a, b) => PfTable.sortByContent(direction, a, b))\n          .forEach(({ node }, index) => {\n            const target = this.rows[index];\n            if (this.rows[index] !== node) {\n              const position: InsertPosition =\n                direction === 'desc' ? 'afterend' : 'beforebegin';\n              target.insertAdjacentElement(position, node);\n            }\n          });\n    }\n  }\n\n  private static getNodeContentForSort(\n    columnIndexToSort: number,\n    node: Element,\n  ) {\n    const content = node.querySelector(`\n      :scope > :is(pf-th, pf-td):nth-child(${columnIndexToSort + 1}),\n      :scope > pf-tr > :is(pf-th, pf-td):nth-child(${columnIndexToSort + 1})\n    `.trim())?.textContent?.trim()?.toLowerCase() ?? '';\n    return { node, content };\n  }\n\n  private static sortByContent(\n    direction: 'asc' | 'desc',\n    a: { content: string },\n    b: { content: string },\n  ) {\n    if (direction === 'asc') {\n      return (a.content < b.content ? -1 : a.content > b.content ? 1 : 0);\n    } else {\n      return (b.content < a.content ? -1 : b.content > a.content ? 1 : 0);\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-table': PfTable;\n  }\n}\n"]}