@patternfly/elements 3.0.0 → 3.0.2

package/pf-switch/test/pf-switch.spec.js

@@ -0,0 +1,191 @@
+import { expect, html, nextFrame } from '@open-wc/testing';
+import { createFixture } from '@patternfly/pfe-tools/test/create-fixture.js';
+import { a11ySnapshot } from '@patternfly/pfe-tools/test/a11y-snapshot.js';
+import { PfSwitch } from '@patternfly/elements/pf-switch/pf-switch.js';
+describe('<pf-switch>', function () {
+    it('imperatively instantiates', function () {
+        expect(document.createElement('pf-switch')).to.be.an.instanceof(PfSwitch);
+    });
+    describe('simply instantiating', function () {
+        let element;
+        let snapshot;
+        beforeEach(async function () {
+            const container = await createFixture(html `
+        <div>
+          <pf-switch></pf-switch>
+        </div>
+      `);
+            element = container.querySelector('pf-switch');
+            snapshot = await a11ySnapshot({ selector: 'pf-switch' });
+        });
+        it('should upgrade', async function () {
+            const klass = customElements.get('pf-switch');
+            expect(element)
+                .to.be.an.instanceOf(klass)
+                .and
+                .to.be.an.instanceOf(PfSwitch);
+        });
+        it('has accessible role', function () {
+            expect(snapshot.role).to.equal('switch');
+        });
+        it('has accessible checked field', function () {
+            expect(snapshot.role).to.equal('switch');
+        });
+        it('requires accessible name', function () {
+            // Double negative - this would fail an accessibility audit,
+            // but that failure would be correct, because the template instantiated
+            // in this test's beforeeach hook does not have an accessible name
+            expect(snapshot.name).to.not.be.ok;
+        });
+    });
+    describe('with labels for on and off state', function () {
+        let element;
+        let snapshot;
+        beforeEach(async function () {
+            const container = await createFixture(html `
+        <div>
+          <pf-switch id="switch"></pf-switch>
+          <label for="switch">
+            <span data-state="on">Message when on</span>
+            <span data-state="off" hidden>Message when off</span>
+          </label>
+        </div>
+        `);
+            element = container.querySelector('pf-switch');
+            snapshot = await a11ySnapshot({ selector: '#switch' });
+        });
+        it('is accessible', function () {
+            expect(snapshot.role).to.equal('switch');
+            expect(snapshot.name).to.be.ok;
+            expect(snapshot.checked).to.be.false;
+        });
+        it('should show the label for the unchecked state', function () {
+            expect(snapshot.name).to.equal('Message when off');
+        });
+        describe('clicking the switch', function () {
+            beforeEach(async function () {
+                element.click();
+                await element.updateComplete;
+                await nextFrame();
+                snapshot = await a11ySnapshot({ selector: '#switch' });
+            });
+            it('should be checked', function () {
+                expect(element.checked).to.be.true;
+                expect(snapshot.checked).to.be.true;
+            });
+            it('should show the label for the checked state', function () {
+                expect(snapshot.name).to.equal('Message when on');
+            });
+        });
+    });
+    describe('when checked attr is present', function () {
+        let element;
+        let snapshot;
+        beforeEach(async function () {
+            element = await createFixture(html `
+        <pf-switch id="switch" checked></pf-switch>
+      `);
+            await element.updateComplete;
+            await nextFrame();
+            snapshot = await a11ySnapshot({ selector: '#switch' });
+        });
+        it('should be checked', function () {
+            expect(element.checked).to.be.true;
+            expect(snapshot.checked).to.be.true;
+        });
+    });
+    describe('when checked attr is not present', function () {
+        let element;
+        let snapshot;
+        beforeEach(async function () {
+            element = await createFixture(html `
+        <pf-switch id="switch"></pf-switch>
+      `);
+            await element.updateComplete;
+            await nextFrame();
+            snapshot = await a11ySnapshot({ selector: '#switch' });
+        });
+        it('should be checked', function () {
+            expect(element.checked).to.be.false;
+            expect(snapshot.checked).to.be.false;
+        });
+    });
+    describe('when checked and show-check-icon attrs are present', function () {
+        let element;
+        beforeEach(async function () {
+            const container = await createFixture(html `
+        <div>
+          <pf-switch id="switch" show-check-icon checked></pf-switch>
+          <label for="switch">
+            <span data-state="on">Message when on</span>
+            <span data-state="off" hidden>Message when off</span>
+          </label>
+        </div>
+      `);
+            element = container.querySelector('pf-switch');
+        });
+        it('should display a check icon', async function () {
+            // TODO: can we test this without inspecting the private shadowRoot?
+            const svg = element.shadowRoot.querySelector('svg');
+            expect(svg).to.be.ok;
+            expect(svg?.hasAttribute('hidden')).to.be.false;
+        });
+    });
+    describe('when checked and show-check-icon attrs are present', function () {
+        let element;
+        beforeEach(async function () {
+            element = await createFixture(html `
+        <pf-switch id="switch" show-check-icon checked></pf-switch>
+        <label for="switch">
+          <span data-state="on">Message when on</span>
+          <span data-state="off" hidden>Message when off</span>
+        </label>
+      `);
+        });
+        it('should display a check icon', async function () {
+            // TODO: can we test this without inspecting the private shadowRoot?
+            const svg = element.shadowRoot.querySelector('svg');
+            expect(svg).to.be.ok;
+            expect(svg?.hasAttribute('hidden')).to.be.false;
+        });
+    });
+    describe('when nested inside a label element', function () {
+        let label;
+        let element;
+        let snapshot;
+        beforeEach(async function () {
+            label = await createFixture(html `
+        <label>
+          <span>Dark Mode</span>
+          <pf-switch id="switch"></pf-switch>
+        </label>
+      `);
+            element = label.querySelector('pf-switch');
+            snapshot = await a11ySnapshot({ selector: 'pf-switch' });
+        });
+        it('does not hide label', function () {
+            expect(label.hidden).to.be.false;
+        });
+        it('has an accessible name', function () {
+            expect(snapshot.name).to.equal('Dark Mode');
+        });
+        describe('clicking the label', function () {
+            beforeEach(function () {
+                label.click();
+            });
+            it('toggles the state', function () {
+                expect(element.checked).to.be.true;
+            });
+        });
+        describe('clicking the switch', function () {
+            beforeEach(function () {
+                element.click();
+            });
+            it('toggles the state', function () {
+                expect(element.checked).to.be.true;
+            });
+        });
+    });
+    // TODO: test keyboard a11y with wtr sendKeys
+});
+//# sourceMappingURL=pf-switch.spec.js.map

package/pf-switch/test/pf-switch.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pf-switch.spec.js","sourceRoot":"","sources":["pf-switch.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import type { A11yTreeSnapshot } from '@patternfly/pfe-tools/test/a11y-snapshot.js';\nimport { expect, html, nextFrame } from '@open-wc/testing';\nimport { createFixture } from '@patternfly/pfe-tools/test/create-fixture.js';\nimport { a11ySnapshot } from '@patternfly/pfe-tools/test/a11y-snapshot.js';\n\nimport { PfSwitch } from '@patternfly/elements/pf-switch/pf-switch.js';\n\ndescribe('<pf-switch>', function() {\n  it('imperatively instantiates', function() {\n    expect(document.createElement('pf-switch')).to.be.an.instanceof(PfSwitch);\n  });\n\n  describe('simply instantiating', function() {\n    let element: PfSwitch;\n    let snapshot: A11yTreeSnapshot;\n    beforeEach(async function() {\n      const container = await createFixture<PfSwitch>(html`\n        <div>\n          <pf-switch></pf-switch>\n        </div>\n      `);\n      element = container.querySelector('pf-switch')!;\n      snapshot = await a11ySnapshot({ selector: 'pf-switch' });\n    });\n    it('should upgrade', async function() {\n      const klass = customElements.get('pf-switch');\n      expect(element)\n          .to.be.an.instanceOf(klass)\n          .and\n          .to.be.an.instanceOf(PfSwitch);\n    });\n    it('has accessible role', function() {\n      expect(snapshot.role).to.equal('switch');\n    });\n    it('has accessible checked field', function() {\n      expect(snapshot.role).to.equal('switch');\n    });\n    it('requires accessible name', function() {\n      // Double negative - this would fail an accessibility audit,\n      // but that failure would be correct, because the template instantiated\n      // in this test's beforeeach hook does not have an accessible name\n      expect(snapshot.name).to.not.be.ok;\n    });\n  });\n\n  describe('with labels for on and off state', function() {\n    let element: PfSwitch;\n    let snapshot: A11yTreeSnapshot;\n    beforeEach(async function() {\n      const container = await createFixture<PfSwitch>(html`\n        <div>\n          <pf-switch id=\"switch\"></pf-switch>\n          <label for=\"switch\">\n            <span data-state=\"on\">Message when on</span>\n            <span data-state=\"off\" hidden>Message when off</span>\n          </label>\n        </div>\n        `);\n      element = container.querySelector('pf-switch')!;\n      snapshot = await a11ySnapshot({ selector: '#switch' });\n    });\n\n    it('is accessible', function() {\n      expect(snapshot.role).to.equal('switch');\n      expect(snapshot.name).to.be.ok;\n      expect(snapshot.checked).to.be.false;\n    });\n\n    it('should show the label for the unchecked state', function() {\n      expect(snapshot.name).to.equal('Message when off');\n    });\n\n    describe('clicking the switch', function() {\n      beforeEach(async function() {\n        element.click();\n        await element.updateComplete;\n        await nextFrame();\n        snapshot = await a11ySnapshot({ selector: '#switch' });\n      });\n      it('should be checked', function() {\n        expect(element.checked).to.be.true;\n        expect(snapshot.checked).to.be.true;\n      });\n      it('should show the label for the checked state', function() {\n        expect(snapshot.name).to.equal('Message when on');\n      });\n    });\n  });\n\n  describe('when checked attr is present', function() {\n    let element: PfSwitch;\n    let snapshot: A11yTreeSnapshot;\n    beforeEach(async function() {\n      element = await createFixture<PfSwitch>(html`\n        <pf-switch id=\"switch\" checked></pf-switch>\n      `);\n\n      await element.updateComplete;\n      await nextFrame();\n      snapshot = await a11ySnapshot({ selector: '#switch' });\n    });\n\n    it('should be checked', function() {\n      expect(element.checked).to.be.true;\n      expect(snapshot.checked).to.be.true;\n    });\n  });\n\n  describe('when checked attr is not present', function() {\n    let element: PfSwitch;\n    let snapshot: A11yTreeSnapshot;\n    beforeEach(async function() {\n      element = await createFixture<PfSwitch>(html`\n        <pf-switch id=\"switch\"></pf-switch>\n      `);\n\n      await element.updateComplete;\n      await nextFrame();\n      snapshot = await a11ySnapshot({ selector: '#switch' });\n    });\n\n    it('should be checked', function() {\n      expect(element.checked).to.be.false;\n      expect(snapshot.checked).to.be.false;\n    });\n  });\n\n\n  describe('when checked and show-check-icon attrs are present', function() {\n    let element: PfSwitch;\n    beforeEach(async function() {\n      const container = await createFixture<PfSwitch>(html`\n        <div>\n          <pf-switch id=\"switch\" show-check-icon checked></pf-switch>\n          <label for=\"switch\">\n            <span data-state=\"on\">Message when on</span>\n            <span data-state=\"off\" hidden>Message when off</span>\n          </label>\n        </div>\n      `);\n      element = container.querySelector('pf-switch')!;\n    });\n    it('should display a check icon', async function() {\n      // TODO: can we test this without inspecting the private shadowRoot?\n      const svg = element.shadowRoot.querySelector('svg');\n      expect(svg).to.be.ok;\n      expect(svg?.hasAttribute('hidden')).to.be.false;\n    });\n  });\n\n  describe('when checked and show-check-icon attrs are present', function() {\n    let element: PfSwitch;\n    beforeEach(async function() {\n      element = await createFixture<PfSwitch>(html`\n        <pf-switch id=\"switch\" show-check-icon checked></pf-switch>\n        <label for=\"switch\">\n          <span data-state=\"on\">Message when on</span>\n          <span data-state=\"off\" hidden>Message when off</span>\n        </label>\n      `);\n    });\n    it('should display a check icon', async function() {\n      // TODO: can we test this without inspecting the private shadowRoot?\n      const svg = element.shadowRoot.querySelector('svg');\n      expect(svg).to.be.ok;\n      expect(svg?.hasAttribute('hidden')).to.be.false;\n    });\n  });\n\n  describe('when nested inside a label element', function() {\n    let label: HTMLLabelElement;\n    let element: PfSwitch;\n    let snapshot: A11yTreeSnapshot;\n    beforeEach(async function() {\n      label = await createFixture<HTMLLabelElement>(html`\n        <label>\n          <span>Dark Mode</span>\n          <pf-switch id=\"switch\"></pf-switch>\n        </label>\n      `);\n      element = label.querySelector('pf-switch')!;\n      snapshot = await a11ySnapshot({ selector: 'pf-switch' });\n    });\n    it('does not hide label', function() {\n      expect(label.hidden).to.be.false;\n    });\n    it('has an accessible name', function() {\n      expect(snapshot.name).to.equal('Dark Mode');\n    });\n    describe('clicking the label', function() {\n      beforeEach(function() {\n        label.click();\n      });\n      it('toggles the state', function() {\n        expect(element.checked).to.be.true;\n      });\n    });\n    describe('clicking the switch', function() {\n      beforeEach(function() {\n        element.click();\n      });\n      it('toggles the state', function() {\n        expect(element.checked).to.be.true;\n      });\n    });\n  });\n\n  // TODO: test keyboard a11y with wtr sendKeys\n});\n"]}

package/pf-table/pf-caption.d.ts

@@ -5,7 +5,7 @@ import { LitElement } from 'lit';
  */
 export declare class PfCaption extends LitElement {
     static readonly styles: CSSStyleSheet[];
-    render(): import("lit").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/pf-table/pf-table.d.ts

@@ -8,10 +8,8 @@ export * from './pf-th.js';
 export * from './pf-td.js';
 /**
  * A **table** is used to display large data sets that can be easily laid out in a simple grid with column headers.
- *
  * @slot
  *       The default slot can hold an optional `pf-caption` element and a combination of `pf-tr`, `pf-thead`, or `pf-tbody` elements.
- *
  * @cssprop {<color>} --pf-c-table--BackgroundColor
  *          Table background color
  *          {@default `#fff`}
@@ -652,7 +650,7 @@ export declare class PfTable extends LitElement {
     get rows(): NodeListOf<PfTr>;
     private columns;
     connectedCallback(): void;
-    render(): import("lit").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
     private static getNodeContentForSort;
     private static sortByContent;
 }

package/pf-table/pf-table.js

@@ -24,10 +24,8 @@ const rowQuery = [
 ].join();
 /**
  * A **table** is used to display large data sets that can be easily laid out in a simple grid with column headers.
- *
  * @slot
  *       The default slot can hold an optional `pf-caption` element and a combination of `pf-tr`, `pf-thead`, or `pf-tbody` elements.
- *
  * @cssprop {<color>} --pf-c-table--BackgroundColor
  *          Table background color
  *          {@default `#fff`}
@@ -708,8 +706,8 @@ let PfTable = PfTable_1 = _a = class PfTable extends LitElement {
 };
 _PfTable_instances = new WeakSet();
 _PfTable_onRequestExpand = function _PfTable_onRequestExpand(event) {
-    if (event instanceof RequestExpandEvent &&
-        !event.defaultPrevented) {
+    if (event instanceof RequestExpandEvent
+        && !event.defaultPrevented) {
         event.stopPropagation();
         if (event.target instanceof PfTr) {
             event.target.expanded = !!event.target.expandable && !event.target.expanded;

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 } 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 { PfTh, RequestSortEvent } from './pf-th.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';\nimport { PfTd } from './pf-td.js';\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 *\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 *\n * @cssprop {<color>} --pf-c-table--BackgroundColor\n *          Table background color\n *          {@default `#fff`}\n * @cssprop {<color>} --pf-c-table--BorderColor\n *          Table border color\n *          {@default `#d2d2d2`}\n * @cssprop {<dimension>} --pf-c-table--border-width--base\n *          Table border base width\n *          {@default `1px`}\n * @cssprop {<dimension>} --pf-c-table-caption--FontSize\n *          Table caption font size\n *          {@default `0.875rem`}\n * @cssprop {<color>} --pf-c-table-caption--Color\n *          Table caption color\n *          {@default `#6a6e73`}\n * @cssprop {<dimension>} --pf-c-table-caption--PaddingTop\n *          Table caption top padding\n *          {@default `1rem`}\n * @cssprop {<dimension>} --pf-c-table-caption--PaddingRight\n *          Table caption right padding\n *          {@default `1.5rem`}\n * @cssprop {<dimension>} --pf-c-table-caption--PaddingBottom\n *          Table caption bottom padding\n *          {@default `1rem`}\n * @cssprop {<dimension>} --pf-c-table-caption--PaddingLeft\n *          Table caption left padding\n *          {@default `1.5rem`}\n * @cssprop {<length>} --pf-c-table-caption--xl--PaddingRight\n *          Table XL caption right padding\n *          {@default `1rem`}\n * @cssprop {<dimension>} --pf-c-table-caption--xl--PaddingLeft\n *          Table XL caption left padding\n *          {@default `1rem`}\n * @cssprop {<dimension>} --pf-c-table--thead--cell--FontSize\n *          Table head cell font size\n *          {@default `0.875rem`}\n * @cssprop {<number>} --pf-c-table--thead--cell--FontWeight\n *          Table head cell font weight\n *          {@default `700`}\n * @cssprop {<dimension>} --pf-c-table--tbody--cell--PaddingTop\n *          Table body cell padding top\n *          {@default `1.5rem`}\n * @cssprop {<dimension>} --pf-c-table--tbody--cell--PaddingBottom\n *          Table body cell padding bottom\n *          {@default `1.5rem`}\n * @cssprop {<color>} --pf-c-table--tr--BoxShadow--top--base\n *          Table row top base box shadow\n *          {@default `0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08)`}\n * @cssprop {<dimension>} --pf-c-table--cell--Padding--base\n *          Table cell base padding\n *          {@default `1rem`}\n * @cssprop {<dimension>} --pf-c-table--cell--FontSize\n *          Table cell font size\n *          {@default `1rem`}\n * @cssprop {<number>} --pf-c-table--cell--FontWeight\n *          Table cell font weight\n *          {@default `400`}\n * @cssprop {<color>} --pf-c-table--cell--Color\n *          Table cell color\n *          {@default `#151515`}\n * @cssprop {<dimension>} --pf-c-table--cell--PaddingTop\n *          Table cell top padding\n *          {@default `1rem`}\n * @cssprop {<dimension>} --pf-c-table--cell--PaddingRight\n *          Table cell right padding\n *          {@default `1rem`}\n * @cssprop {<dimension>} --pf-c-table--cell--PaddingBottom\n *          Table cell bottom padding\n *          {@default `1rem`}\n * @cssprop {<dimension>} --pf-c-table--cell--PaddingLeft\n *          Table cell left padding\n *          {@default `1rem`}\n * @cssprop {<dimension>} --pf-c-table--cell--first-last-child--PaddingLeft\n *          Table cell last child left padding\n *          {@default `1rem`}\n * @cssprop {<dimension>} --pf-c-table--cell--first-last-child--PaddingRight\n *          Table cell last child right padding\n *          {@default `1rem`}\n * @cssprop {<dimension>} --pf-c-table--cell--first-last-child--xl--PaddingLeft\n *          Table XL cell last child left padding\n *          {@default `1.5rem`}\n * @cssprop {<dimension>} --pf-c-table--cell--first-last-child--xl--PaddingRight\n *          Table XL cell last child right padding\n *          {@default `1.5rem`}\n * @cssprop {<dimension>} --pf-c-table--tr--m-first-cell-offset-reset--cell--PaddingLeft\n *          Table row first cell offset reset cell left padding\n *          {@default `1rem`}\n * @cssprop {<length>} --pf-c-table--cell--MinWidth\n *          Table cell min width\n *          {@default `0`}\n * @cssprop {<length>} --pf-c-table--cell--MaxWidth\n *          Table cell max width\n *          {@default `none`}\n * @cssprop {<length>} --pf-c-table--cell--Width\n *          Table cell width\n *          {@default `auto`}\n * @cssprop {<overflow>} --pf-c-table--cell--Overflow\n *          Table cell overflow\n *          {@default `visible`}\n * @cssprop {<>} --pf-c-table--cell--TextOverflow\n *          Table cell text overflow\n *          {@default `clip`}\n * @cssprop {<>} --pf-c-table--cell--WhiteSpace\n *          Table cell white space\n *          {@default `normal`}\n * @cssprop {<>} --pf-c-table--cell--WordBreak\n *          Table cell word break\n *          {@default `normal`}\n * @cssprop {<length>} --pf-c-table--cell--m-border-right--before--BorderRightWidth\n *          Table cell before right border width\n *          {@default `1px`}\n * @cssprop {<color>} --pf-c-table--cell--m-border-right--before--BorderRightColor\n *          Table cell before right border color\n *          {@default `#d2d2d2`}\n * @cssprop {<length>} --pf-c-table--cell--m-border-left--before--BorderLeftWidth\n *          Table cell before left border width\n *          {@default `1px`}\n * @cssprop {<color>} --pf-c-table--cell--m-border-left--before--BorderLeftColor\n *          Table cell before left border color\n *          {@default `#d2d2d2`}\n * @cssprop {<length>} --pf-c-table--cell--m-help--MinWidth\n *          Help cell minimum width\n *          {@default `11ch`}\n * @cssprop {<length>} --pf-c-table--m-truncate--cell--MaxWidth\n *          Help cell maximum width\n *          {@default `1px`}\n * @cssprop {<calc-sum>} --pf-c-table--m-truncate--cell--MinWidth\n *          Truncated cell minimum width\n *          {@default `calc(5ch + 1rem + 1rem)`}\n * @cssprop {<>} --pf-c-table--cell--hidden-visible--Display\n *          Cell visible display\n *          {@default `grid`}\n * @cssprop {<calc-product>} --pf-c-table__toggle--c-button--MarginTop\n *          Toggle button top margin\n *          {@default `calc(0.375rem * -1)`}\n * @cssprop {<calc-product>} --pf-c-table__toggle--c-button--MarginBottom\n *          Toggle button bottom margin\n *          {@default `calc(0.375rem * -1)`}\n * @cssprop {<>} --pf-c-table__toggle--c-button__toggle-icon--Rotate\n *          Toggle button icon rotation\n *          {@default `270deg`}\n * @cssprop {<>} --pf-c-table__toggle--c-button__toggle-icon--Transition\n *          Toggle button icon transition\n *          {@default `.2s ease-in 0s`}\n * @cssprop {<>} --pf-c-table__toggle--c-button--m-expanded__toggle-icon--Rotate\n *          Expanded toggle button icon rotation\n *          {@default `360deg`}\n * @cssprop {<color>} --pf-c-table__button--BackgroundColor\n *          Button background color\n *          {@default `transparent`}\n * @cssprop {<color>} --pf-c-table__button--Color\n *          Button color\n *          {@default `#151515`}\n * @cssprop {<color>} --pf-c-table__button--hover--Color\n *          Button hover color\n *          {@default `#151515`}\n * @cssprop {<color>} --pf-c-table__button--focus--Color\n *          Button focus color\n *          {@default `#151515`}\n * @cssprop {<color>} --pf-c-table__button--active--Color\n *          Button active color\n *          {@default `#151515`}\n * @cssprop {<calc-sum>} --pf-c-table__button--OutlineOffset\n *          Button outline offset\n *          {@default `calc(3px * -1)`}\n * @cssprop {<dimension>} --pf-c-table--m-compact__toggle--PaddingTop\n *          Compact toggle top padding\n *          {@default `0`}\n * @cssprop {<dimension>} --pf-c-table--m-compact__toggle--PaddingBottom\n *          Compacy toggle bottom padding\n *          {@default `0`}\n * @cssprop {<dimension>} --pf-c-table__check--input--MarginTop\n *          Check input top margin\n *          {@default `0.25rem`}\n * @cssprop {<dimension>} --pf-c-table__check--input--FontSize\n *          Check input font size\n *          {@default `1rem`}\n * @cssprop {<color>} --pf-c-table--cell--m-favorite--Color\n *          Favorite cell color\n *          {@default `#d2d2d2`}\n * @cssprop {<color>} --pf-c-table__favorite--c-button--Color\n *          Favorite button color\n *          {@default `#d2d2d2`}\n * @cssprop {<dimension>} --pf-c-table__favorite--c-button--FontSize\n *          Favorite button font size\n *          {@default `0.875rem`}\n * @cssprop {<calc-product>} --pf-c-table__favorite--c-button--MarginTop\n *          Favorite button top margin\n *          {@default `calc(0.375rem * -1)`}\n * @cssprop {<calc-product>} --pf-c-table__favorite--c-button--MarginRight\n *          Favorite button right margin\n *          {@default `calc(1rem * -1)`}\n * @cssprop {<calc-product>} --pf-c-table__favorite--c-button--MarginBottom\n *          Favorite button bottom margin\n *          {@default `calc(0.375rem * -1)`}\n * @cssprop {<calc-product>} --pf-c-table__favorite--c-button--MarginLeft\n *          Favorite button left margin\n *          {@default `calc(1rem * -1)`}\n * @cssprop {<color>} --pf-c-table__favorite--m-favorited--c-button--Color\n *          Favorited button color\n *          {@default `#f0ab00`}\n * @cssprop {<color>} --pf-c-table__sort--m-favorite__button__text--Color\n *          Favorite sort button text color\n *          {@default `#6a6e73`}\n * @cssprop {<color>} --pf-c-table__sort--m-favorite__button--hover__text--Color\n *          Favorite sort button hover text color\n *          {@default `#151515`}\n * @cssprop {<color>} --pf-c-table__sort--m-favorite__button--focus__text--Color\n *          Favorite sort button focus text color\n *          {@default `#151515`}\n * @cssprop {<color>} --pf-c-table__sort--m-favorite__button--active__text--Color\n *          Favorite sort button active text color\n *          {@default `#151515`}\n * @cssprop {<calc-product>} --pf-c-table__draggable--c-button--MarginTop\n *          Draggable button top margin\n *          {@default `calc(0.375rem * -1)`}\n * @cssprop {<calc-product>} --pf-c-table__draggable--c-button--MarginRight\n *          Draggable button right margin\n *          {@default `calc(1rem * -1)`}\n * @cssprop {<calc-product>} --pf-c-table__draggable--c-button--MarginBottom\n *          Draggable button bottom margin\n *          {@default `calc(0.375rem * -1)`}\n * @cssprop {<calc-product>} --pf-c-table__draggable--c-button--MarginLeft\n *          Draggable button left margin\n *          {@default `calc(1rem * -1)`}\n * @cssprop {<dimension>} --pf-c-table__tr--m-ghost-row--Opacity\n *          Ghost row opacity\n *          {@default `.4`}\n * @cssprop {<color>} --pf-c-table__tr--m-ghost-row--BackgroundColor\n *          Ghost row background color\n *          {@default `#fff`}\n * @cssprop {<dimension>} --pf-c-table__action--PaddingTop\n *          Action top padding\n *          {@default `0`}\n * @cssprop {<dimension>} --pf-c-table__action--PaddingRight\n *          Action right padding\n *          {@default `0`}\n * @cssprop {<dimension>} --pf-c-table__action--PaddingBottom\n *          Action bottom padding\n *          {@default `0`}\n * @cssprop {<dimension>} --pf-c-table__action--PaddingLeft\n *          Action left padding\n *          {@default `0`}\n * @cssprop {<dimension>} --pf-c-table__inline-edit-action--PaddingTop\n *          Inline edit action top padding\n *          {@default `0`}\n * @cssprop {<dimension>} --pf-c-table__inline-edit-action--PaddingRight\n *          Inline edit action right padding\n *          {@default `0`}\n * @cssprop {<dimension>} --pf-c-table__inline-edit-action--PaddingBottom\n *          Inline edit action bottom padding\n *          {@default `0`}\n * @cssprop {<dimension>} --pf-c-table__inline-edit-action--PaddingLeft\n *          Inline edit action left padding\n *          {@default `0`}\n * @cssprop {<>} --pf-c-table__expandable-row--Transition\n *          Expandable row transition\n *          {@default `all 250ms cubic-bezier(.42, 0, .58, 1)`}\n * @cssprop {<length>} --pf-c-table__expandable-row--MaxHeight\n *          Expandable row max height\n *          {@default `28.125rem`}\n * @cssprop {<>} --pf-c-table__expandable-row-content--Transition\n *          Expandable row content transition\n *          {@default `all 250ms cubic-bezier(.42, 0, .58, 1)`}\n * @cssprop {<dimension>} --pf-c-table__expandable-row-content--PaddingTop\n *          Expandable row content top padding\n *          {@default `1.5rem`}\n * @cssprop {<dimension>} --pf-c-table__expandable-row-content--PaddingBottom\n *          Expandable row content bottom padding\n *          {@default `1.5rem`}\n * @cssprop {<calc-product>} --pf-c-table__expandable-row--after--Top\n *          Expandable row after top\n *          {@default `calc(1px * -1)`}\n * @cssprop {<calc-product>} --pf-c-table__expandable-row--after--Bottom\n *          Expandable row after bottom\n *          {@default `calc(1px * -1)`}\n * @cssprop {<length>} --pf-c-table__expandable-row--after--border-width--base\n *          Expandable row after base border width\n *          {@default `3px`}\n * @cssprop {<length>} --pf-c-table__expandable-row--after--BorderLeftWidth\n *          Expandable row after left border width\n *          {@default `0`}\n * @cssprop {<color>} --pf-c-table__expandable-row--after--BorderColor\n *          Expandable row after border color\n *          {@default `#06c`}\n * @cssprop {<dimension>} --pf-c-table__icon-inline--MarginRight\n *          Inline icon right margin\n *          {@default `0.5rem`}\n * @cssprop {<calc-sum>} --pf-c-table__sort--MinWidth\n *          Sort button minimum width\n *          {@default `calc(6ch + 1rem + 1rem + 1rem)`}\n * @cssprop {<dimension>} --pf-c-table__sort__button--PaddingTop\n *          Sort button top padding\n *          {@default `0.375rem`}\n * @cssprop {<dimension>} --pf-c-table__sort__button--PaddingRight\n *          Sort button right padding\n *          {@default `0.5rem`}\n * @cssprop {<dimension>} --pf-c-table__sort__button--PaddingBottom\n *          Sort button bottom padding\n *          {@default `0.375rem`}\n * @cssprop {<dimension>} --pf-c-table__sort__button--PaddingLeft\n *          Sort button left padding\n *          {@default `0.5rem`}\n * @cssprop {<calc-product>} --pf-c-table__sort__button--MarginTop\n *          Sort button top margin\n *          {@default `calc(0.375rem * -1)`}\n * @cssprop {<calc-product>} --pf-c-table__sort__button--MarginBottom\n *          Sort button bottom margin\n *          {@default `calc(0.375rem * -1)`}\n * @cssprop {<calc-product>} --pf-c-table__sort__button--MarginLeft\n *          Sort button left margin\n *          {@default `calc(0.5rem * -1)`}\n * @cssprop {<color>} --pf-c-table__sort__button--Color\n *          Sort button color\n *          {@default `#151515`}\n * @cssprop {<color>} --pf-c-table__sort--m-selected__button--Color\n *          Selected sort button color\n *          {@default `#06c`}\n * @cssprop {<length>} --pf-c-table__sort--m-help--MinWidth\n *          Help button minimum width\n *          {@default `15ch`}\n * @cssprop {<color>} --pf-c-table__sort__button__text--Color\n *          Sort button text color\n *          {@default `currentcolor`}\n * @cssprop {<color>} --pf-c-table__sort__button--hover__text--Color\n *          Sort button hover text color\n *          {@default `currencolor`}\n * @cssprop {<color>} --pf-c-table__sort__button--focus__text--Color\n *          Sort button focus text color\n *          {@default `currentcolor`}\n * @cssprop {<color>} --pf-c-table__sort__button--active__text--Color\n *          Sort button active text color\n *          {@default `currentcolor`}\n * @cssprop {<color>} --pf-c-table__sort-indicator--Color\n *          Sort inidcator color\n *          {@default `#d2d2d2`}\n * @cssprop {<calc-sum>} --pf-c-table__sort-indicator--MarginLeft\n *          Sort inidcator left margin\n *          {@default `calc(6ch + 1rem + 1rem + 1rem)`}\n * @cssprop {<color>} --pf-c-table__sort--m-selected__sort-indicator--Color\n *          Selected sort inidcator color\n *          {@default `#06c`}\n * @cssprop {<color>} --pf-c-table__sort__button--hover__sort-indicator--Color\n *          Sort button hover sort indicator color\n *          {@default `#151515`}\n * @cssprop {<color>} --pf-c-table__sort__button--active__sort-indicator--Color\n *          Sort button hover active sort indicator color\n *          {@default `#151515`}\n * @cssprop {<color>} --pf-c-table__sort__button--focus__sort-indicator--Color\n *          Sort button hover focus sort indicator color\n *          {@default `#151515`}\n * @cssprop {<length>} --pf-c-table--th--m-help--MinWidth\n *          Header cell help minimum width\n *          {@default `11ch`}\n * @cssprop {<dimension>} --pf-c-table__column-help--MarginLeft\n *          Help column left magin\n *          {@default `0.25rem`}\n * @cssprop {<dimension>} --pf-c-table__column-help--TranslateY\n *          Help column translate y axis\n *          {@default `0.125rem`}\n * @cssprop {<calc-product>} --pf-c-table__column-help--c-button--MarginTop\n *          Help column button top margin\n *          {@default `calc(0.375rem * -1)`}\n * @cssprop {<calc-product>} --pf-c-table__column-help--c-button--MarginBottom\n *          Help column button bottom margin\n *          {@default `calc(0.375rem * -1)`}\n * @cssprop {<dimension>} --pf-c-table__column-help--c-button--PaddingRight\n *          Help column button right padding\n *          {@default `0.5rem`}\n * @cssprop {<dimension>} --pf-c-table__column-help--c-button--PaddingLeft\n *          Help column button left margin\n *          {@default `0.5rem`}\n * @cssprop {<color>} --pf-c-table__compound-expansion-toggle__button--Color\n *          Compound expansion toggle button color\n *          {@default `#06c`}\n * @cssprop {<color>} --pf-c-table__compound-expansion-toggle__button--hover--Color\n *          Compound expansion hover toggle button color\n *          {@default `#004080`}\n * @cssprop {<color>} --pf-c-table__compound-expansion-toggle__button--focus--Color\n *          Compound expansion focus toggle button color\n *          {@default `#004080`}\n * @cssprop {<color>} --pf-c-table__compound-expansion-toggle__button--active--Color\n *          Compound expansion active toggle button color\n *          {@default `#004080`}\n * @cssprop {<length>} --pf-c-table__compound-expansion-toggle__button--before--border-width--base\n *          Compound expansion toggle button before border width\n *          {@default `1px`}\n * @cssprop {<color>} --pf-c-table__compound-expansion-toggle__button--before--BorderColor\n *          Compound expansion toggle button before border color\n *          {@default `#d2d2d2`}\n * @cssprop {<length>} --pf-c-table__compound-expansion-toggle__button--before--BorderRightWidth\n *          Compound expansion toggle button before right border width\n *          {@default `0`}\n * @cssprop {<length>} --pf-c-table__compound-expansion-toggle__button--before--BorderLeftWidth\n *          Compound expansion toggle button before left border width\n *          {@default `0`}\n * @cssprop {<calc-product>} --pf-c-table__compound-expansion-toggle__button--before--Bottom\n *          Compound expansion toggle button before bottom\n *          {@default `calc(1px * -1)`}\n * @cssprop {<calc-product>} --pf-c-table__compound-expansion-toggle__button--before--Left\n *          Compound expansion toggle button before left\n *          {@default `calc(1px * -1)`}\n * @cssprop {<length>} --pf-c-table__compound-expansion-toggle__button--after--border-width--base\n *          Compound expansion toggle button after base border width\n *          {@default `3px`}\n * @cssprop {<color>} --pf-c-table__compound-expansion-toggle__button--after--BorderColor\n *          Compound expansion toggle button after border color\n *          {@default `#06c`}\n * @cssprop {<length>} --pf-c-table__compound-expansion-toggle__button--after--BorderTopWidth\n *          Compound expansion toggle button after top border width\n *          {@default `0`}\n * @cssprop {<calc-sum>} --pf-c-table__compound-expansion-toggle__button--after--Top\n *          Compound expansion toggle button after top\n *          {@default `calc(1px * -1)`}\n * @cssprop {<calc-sum>} --pf-c-table__compound-expansion-toggle__button--after--Left\n *          Compound expansion toggle button after left\n *          {@default `calc(1px * -1)`}\n * @cssprop {<calc-sum>} --pf-c-table--m-compact-th--PaddingTop\n *          Compact header cell top padding\n *          {@default `calc(0.5rem + 0.25rem)`}\n * @cssprop {<dimension>} --pf-c-table--m-compact-th--PaddingBottom\n *          Compact header cell bottom padding\n *          {@default `0.5rem`}\n * @cssprop {<dimension>} --pf-c-table--m-compact--cell--PaddingTop\n *          Compact cell top padding\n *          {@default `0.5rem`}\n * @cssprop {<dimension>} --pf-c-table--m-compact--cell--PaddingRight\n *          Compact cell right padding\n *          {@default `0.5rem`}\n * @cssprop {<dimension>} --pf-c-table--m-compact--cell--PaddingBottom\n *          Compact cell bottom padding\n *          {@default `0.5rem`}\n * @cssprop {<dimension>} --pf-c-table--m-compact--cell--PaddingLeft\n *          Compact cell left padding\n *          {@default `0.5rem`}\n * @cssprop {<dimension>} --pf-c-table--m-compact--cell--first-last-child--PaddingLeft\n *          Compact cell first child left padding\n *          {@default `1rem`}\n * @cssprop {<dimension>} --pf-c-table--m-compact--cell--first-last-child--PaddingRight\n *          Compact XLcell first child right padding\n *          {@default `1rem`}\n * @cssprop {<dimension>} --pf-c-table--m-compact--cell--first-last-child--xl--PaddingLeft\n *          Compact cell first child XL left padding\n *          {@default `1.5rem`}\n * @cssprop {<dimension>} --pf-c-table--m-compact--cell--first-last-child--xl--PaddingRight\n *          Compact cell first child XL right padding\n *          {@default `1.5rem`}\n * @cssprop {<dimension>} --pf-c-table--m-compact--FontSize\n *          Compact font size\n *          {@default `0.875rem`}\n * @cssprop {<dimension>} --pf-c-table--m-compact__expandable-row-content--PaddingTop\n *          Compact expandable row content top padding\n *          {@default `1.5rem`}\n * @cssprop {<dimension>} --pf-c-table--m-compact__expandable-row-content--PaddingRight\n *          Compact expandable row content right padding\n *          {@default `1.5rem`}\n * @cssprop {<dimension>} --pf-c-table--m-compact__expandable-row-content--PaddingBottom\n *          Compact expandable row content bottom padding\n *          {@default `1.5rem`}\n * @cssprop {<dimension>} --pf-c-table--m-compact__expandable-row-content--PaddingLeft\n *          Compact expandable row content left padding\n *          {@default `1.5rem`}\n * @cssprop {<dimension>} --pf-c-table--nested--first-last-child--PaddingRight\n *          Nested first child right padding\n *          {@default `1rem`}\n * @cssprop {<dimension>} --pf-c-table--nested--first-last-child--PaddingLeft\n *          Nested first child left padding\n *          {@default `1rem`}\n * @cssprop {<color>} --pf-c-table__expandable-row--m-expanded--BorderBottomColor\n *          Expandable row expanded bottom border color\n *          {@default `#d2d2d2`}\n * @cssprop {<color>} --pf-c-table--tr--m-hoverable--BoxShadow--top\n *          Hoverable table row top box shadow\n *          {@default `0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08)`}\n * @cssprop {<dimension>} --pf-c-table--tr--m-hoverable--BackgroundColor\n *          Hoverable table row background color\n *          {@default `transparent`}\n * @cssprop {<color>} --pf-c-table--tr--m-hoverable--BoxShadow\n *          Hoverable table row box shadow\n *          {@default `0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08)`}\n * @cssprop {<calc-sum>} --pf-c-table--tr--m-hoverable--OutlineOffset\n *          Hoverable table row outline offset\n *          {@default `calc(-1 * 0.25rem)`}\n * @cssprop {<color>} --pf-c-table--tr--m-hoverable--hover--BoxShadow\n *          Hoverable table row hover box shadow\n *          {@default `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 * @cssprop {<color>} --pf-c-table--tr--m-hoverable--hover--BackgroundColor\n *          Hoverable table row hover background color\n *          {@default `#fff`}\n * @cssprop {<color>} --pf-c-table--tr--m-hoverable--focus--BoxShadow\n *          Hoverable table row focus box shadow\n *          {@default `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 * @cssprop {<color>} --pf-c-table--tr--m-hoverable--focus--BackgroundColor\n *          Hoverable table row focus background color\n *          {@default `#fff`}\n * @cssprop {<color>} --pf-c-table--tr--m-hoverable--active--BoxShadow\n *          Hoverable table row active box shadow\n *          {@default `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 * @cssprop {<color>} --pf-c-table--tr--m-hoverable--active--BackgroundColor\n *          Hoverable table row active background color\n *          {@default `#fff`}\n * @cssprop {<color>} --pf-c-table--tr--m-hoverable--m-selected--BoxShadow\n *          Hoverable table row selected box shadow\n *          {@default `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 * @cssprop {<color>} --pf-c-table--tr--m-selected--BoxShadow--top\n *          Selected table row top box shadow\n *          {@default `0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08)`}\n * @cssprop {<color>} --pf-c-table--tr--m-selected--BackgroundColor\n *          Selected table row background color\n *          {@default `#fff`}\n * @cssprop {<color>} --pf-c-table--tr--m-selected--BoxShadow\n *          Selected table row box shadow\n *          {@default `0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08)`}\n * @cssprop {<calc-sum>} --pf-c-table--tr--m-selected--OutlineOffset\n *          Selected table row outline offset\n *          {@default `calc(-1 * 0.25rem)`}\n * @cssprop {<length>} --pf-c-table--tr--m-selected--after--BorderLeftWidth\n *          Selected table row after left border width\n *          {@default `3px`}\n * @cssprop {<color>} --pf-c-table--tr--m-selected--after--BorderLeftColor\n *          Selected table row after left border color\n *          {@default `#06c`}\n * @cssprop {<color>} --pf-c-table--tr--m-selected--m-selected--BoxShadow\n *          Selected table row box shadow\n *          {@default `0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)`}\n * @cssprop {<color>} --pf-c-table--tr--m-selected--hover--m-selected--BoxShadow\n *          Selected table row hover box shadow\n *          {@default `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 * @cssprop {<color>} --pf-c-table--tr--m-selected--tr--m-selected--hover--BoxShadow\n *          Selected table row hover box shadow\n *          {@default `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 * @cssprop {<color>} --pf-c-table--tbody--m-hoverable--BoxShadow--top\n *          Hoverable table body top box shadow\n *          {@default `0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08)`}\n * @cssprop {<color>} --pf-c-table--tbody--m-hoverable--BoxShadow\n *          Hoverable table body box shadow\n *          {@default `0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08)`}\n * @cssprop {<dimension>} --pf-c-table--tbody--m-hoverable--BackgroundColor\n *          Hoverable table body background color\n *          {@default `transparent`}\n * @cssprop {<calc-sum>} --pf-c-table--tbody--m-hoverable--OutlineOffset\n *          Hoverable table body outline offset\n *          {@default `calc(-1 * 0.25rem)`}\n * @cssprop {<color>} --pf-c-table--tbody--m-hoverable--hover--BoxShadow\n *          Hoverable table body hover box shadow\n *          {@default `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 * @cssprop {<color>} --pf-c-table--tbody--m-hoverable--hover--BackgroundColor\n *          Hoverable table body hover background color\n *          {@default `#fff`}\n * @cssprop {<color>} --pf-c-table--tbody--m-hoverable--focus--BoxShadow\n *          Hoverable table body focus box shadow\n *          {@default `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 * @cssprop {<color>} --pf-c-table--tbody--m-hoverable--focus--BackgroundColor\n *          Hoverable table body focus background color\n *          {@default `#fff`}\n * @cssprop {<color>} --pf-c-table--tbody--m-hoverable--active--BoxShadow\n *          Hoverable table body active box shadow\n *          {@default `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 * @cssprop {<color>} --pf-c-table--tbody--m-hoverable--active--BackgroundColor\n *          Hoverable table body active background color\n *          {@default `#fff`}\n * @cssprop {<color>} --pf-c-table--tbody--m-hoverable--m-expanded--BorderColor\n *          Hoverable table body expanded border color\n *          {@default `#73bcf7`}\n * @cssprop {<color>} --pf-c-table--tbody--m-hoverable--m-selected--hover--tr--BoxShadow\n *          Hoverable table body selected table row box shadow\n *          {@default `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 * @cssprop {<color>} --pf-c-table--tbody--m-selected--BackgroundColor\n *          Selected table body background color\n *          {@default `#fff`}\n * @cssprop {<color>} --pf-c-table--tbody--m-selected--BoxShadow--top\n *          Selected table body top box shadow\n *          {@default `0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08)`}\n * @cssprop {<color>} --pf-c-table--tbody--m-selected--BoxShadow\n *          Selected table body box shadow\n *          {@default `0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08)`}\n * @cssprop {<calc-product>} --pf-c-table--tbody--m-selected--OutlineOffset\n *          Selected table body outline offset\n *          {@default `calc(-1 * 0.25rem)`}\n * @cssprop {<length>} --pf-c-table--tbody--m-selected--after--BorderLeftWidth\n *          Selected table body after left border width\n *          {@default `3px`}\n * @cssprop {<color>} --pf-c-table--tbody--m-selected--after--BorderLeftColor\n *          Selected table body after left border color\n *          {@default `#06c`}\n * @cssprop {<color>} --pf-c-table--tbody--m-selected--m-selected--BoxShadow\n *          Selected table body selected box shadow\n *          {@default `0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)`}\n * @cssprop {<color>} --pf-c-table--tbody--m-selected--hover--tbody--m-selected--BoxShadow\n *          Selected table body hover selected box shadow\n *          {@default `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 * @cssprop {<color>} --pf-c-table--tbody--m-selected--tbody--m-selected--hover--BoxShadow\n *          Selected table body hover box shadow\n *          {@default `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 * @cssprop {<dimension>} --pf-c-table--thead--m-nested-column-header--button--OutlineOffset\n *          Table head nested column header button outline offset\n *          {@default `-0.1875rem`}\n * @cssprop {<dimension>} --pf-c-table--thead--m-nested-column-header--tr--PaddingTop\n *          Table head nested column header row top padding\n *          {@default `0.25rem`}\n * @cssprop {<dimension>} --pf-c-table--thead--m-nested-column-header--tr--PaddingBottom\n *          Table head nested column header row bottom padding\n *          {@default `0.25rem`}\n * @cssprop {<color>} --pf-c-table__subhead--Color\n *          Subhead color\n *          {@default `#6a6e73`}\n * @cssprop {<color>} --pf-c-table--m-striped__tr--BackgroundColor\n *          Striped row background color\n *          {@default `#fafafa`}\n * @cssprop {<dimension>} --pf-c-table--cell--PaddingTop\n *          Cell top padding\n *          {@default `1rem`}\n * @cssprop {<dimension>} --pf-c-table--cell--PaddingRight\n *          Cell right padding\n *          {@default `1rem`}\n * @cssprop {<dimension>} --pf-c-table--cell--PaddingBottom\n *          Cell bottom padding\n *          {@default `1rem`}\n * @cssprop {<dimension>} --pf-c-table--cell--PaddingLeft\n *          Cell left padding\n *          {@default `1rem`}\n * @cssprop {<calc-sum>} --pf-c-table__favorite--c-button--MarginTop\n *          Favorite button top margin\n *          {@default `calc(0.375rem * -1)`}\n * @cssprop {<calc-sum>} --pf-c-table__favorite--c-button--MarginRight\n *          Favorite button right margin\n *          {@default `calc(1rem * -1)`}\n * @cssprop {<calc-sum>} --pf-c-table__favorite--c-button--MarginBottom\n *          Favorite button bottom margin\n *          {@default `calc(0.375rem * -1)`}\n * @cssprop {<calc-sum>} --pf-c-table__favorite--c-button--MarginLeft\n *          Favorite button left margin\n *          {@default `calc(1rem * -1)`}\n */\n@customElement('pf-table')\nexport class PfTable extends LitElement {\n  static readonly styles = [styles];\n\n  get rows() {\n    return this.querySelectorAll<PfTr>(rowQuery);\n  }\n\n  @state() private columns = 0;\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute('role', 'table');\n    this.#onSlotchange();\n  }\n\n  render() {\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 } 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 { PfTh, RequestSortEvent } from './pf-th.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';\nimport { PfTd } from './pf-td.js';\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\n *          Table background color\n *          {@default `#fff`}\n * @cssprop {<color>} --pf-c-table--BorderColor\n *          Table border color\n *          {@default `#d2d2d2`}\n * @cssprop {<dimension>} --pf-c-table--border-width--base\n *          Table border base width\n *          {@default `1px`}\n * @cssprop {<dimension>} --pf-c-table-caption--FontSize\n *          Table caption font size\n *          {@default `0.875rem`}\n * @cssprop {<color>} --pf-c-table-caption--Color\n *          Table caption color\n *          {@default `#6a6e73`}\n * @cssprop {<dimension>} --pf-c-table-caption--PaddingTop\n *          Table caption top padding\n *          {@default `1rem`}\n * @cssprop {<dimension>} --pf-c-table-caption--PaddingRight\n *          Table caption right padding\n *          {@default `1.5rem`}\n * @cssprop {<dimension>} --pf-c-table-caption--PaddingBottom\n *          Table caption bottom padding\n *          {@default `1rem`}\n * @cssprop {<dimension>} --pf-c-table-caption--PaddingLeft\n *          Table caption left padding\n *          {@default `1.5rem`}\n * @cssprop {<length>} --pf-c-table-caption--xl--PaddingRight\n *          Table XL caption right padding\n *          {@default `1rem`}\n * @cssprop {<dimension>} --pf-c-table-caption--xl--PaddingLeft\n *          Table XL caption left padding\n *          {@default `1rem`}\n * @cssprop {<dimension>} --pf-c-table--thead--cell--FontSize\n *          Table head cell font size\n *          {@default `0.875rem`}\n * @cssprop {<number>} --pf-c-table--thead--cell--FontWeight\n *          Table head cell font weight\n *          {@default `700`}\n * @cssprop {<dimension>} --pf-c-table--tbody--cell--PaddingTop\n *          Table body cell padding top\n *          {@default `1.5rem`}\n * @cssprop {<dimension>} --pf-c-table--tbody--cell--PaddingBottom\n *          Table body cell padding bottom\n *          {@default `1.5rem`}\n * @cssprop {<color>} --pf-c-table--tr--BoxShadow--top--base\n *          Table row top base box shadow\n *          {@default `0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08)`}\n * @cssprop {<dimension>} --pf-c-table--cell--Padding--base\n *          Table cell base padding\n *          {@default `1rem`}\n * @cssprop {<dimension>} --pf-c-table--cell--FontSize\n *          Table cell font size\n *          {@default `1rem`}\n * @cssprop {<number>} --pf-c-table--cell--FontWeight\n *          Table cell font weight\n *          {@default `400`}\n * @cssprop {<color>} --pf-c-table--cell--Color\n *          Table cell color\n *          {@default `#151515`}\n * @cssprop {<dimension>} --pf-c-table--cell--PaddingTop\n *          Table cell top padding\n *          {@default `1rem`}\n * @cssprop {<dimension>} --pf-c-table--cell--PaddingRight\n *          Table cell right padding\n *          {@default `1rem`}\n * @cssprop {<dimension>} --pf-c-table--cell--PaddingBottom\n *          Table cell bottom padding\n *          {@default `1rem`}\n * @cssprop {<dimension>} --pf-c-table--cell--PaddingLeft\n *          Table cell left padding\n *          {@default `1rem`}\n * @cssprop {<dimension>} --pf-c-table--cell--first-last-child--PaddingLeft\n *          Table cell last child left padding\n *          {@default `1rem`}\n * @cssprop {<dimension>} --pf-c-table--cell--first-last-child--PaddingRight\n *          Table cell last child right padding\n *          {@default `1rem`}\n * @cssprop {<dimension>} --pf-c-table--cell--first-last-child--xl--PaddingLeft\n *          Table XL cell last child left padding\n *          {@default `1.5rem`}\n * @cssprop {<dimension>} --pf-c-table--cell--first-last-child--xl--PaddingRight\n *          Table XL cell last child right padding\n *          {@default `1.5rem`}\n * @cssprop {<dimension>} --pf-c-table--tr--m-first-cell-offset-reset--cell--PaddingLeft\n *          Table row first cell offset reset cell left padding\n *          {@default `1rem`}\n * @cssprop {<length>} --pf-c-table--cell--MinWidth\n *          Table cell min width\n *          {@default `0`}\n * @cssprop {<length>} --pf-c-table--cell--MaxWidth\n *          Table cell max width\n *          {@default `none`}\n * @cssprop {<length>} --pf-c-table--cell--Width\n *          Table cell width\n *          {@default `auto`}\n * @cssprop {<overflow>} --pf-c-table--cell--Overflow\n *          Table cell overflow\n *          {@default `visible`}\n * @cssprop {<>} --pf-c-table--cell--TextOverflow\n *          Table cell text overflow\n *          {@default `clip`}\n * @cssprop {<>} --pf-c-table--cell--WhiteSpace\n *          Table cell white space\n *          {@default `normal`}\n * @cssprop {<>} --pf-c-table--cell--WordBreak\n *          Table cell word break\n *          {@default `normal`}\n * @cssprop {<length>} --pf-c-table--cell--m-border-right--before--BorderRightWidth\n *          Table cell before right border width\n *          {@default `1px`}\n * @cssprop {<color>} --pf-c-table--cell--m-border-right--before--BorderRightColor\n *          Table cell before right border color\n *          {@default `#d2d2d2`}\n * @cssprop {<length>} --pf-c-table--cell--m-border-left--before--BorderLeftWidth\n *          Table cell before left border width\n *          {@default `1px`}\n * @cssprop {<color>} --pf-c-table--cell--m-border-left--before--BorderLeftColor\n *          Table cell before left border color\n *          {@default `#d2d2d2`}\n * @cssprop {<length>} --pf-c-table--cell--m-help--MinWidth\n *          Help cell minimum width\n *          {@default `11ch`}\n * @cssprop {<length>} --pf-c-table--m-truncate--cell--MaxWidth\n *          Help cell maximum width\n *          {@default `1px`}\n * @cssprop {<calc-sum>} --pf-c-table--m-truncate--cell--MinWidth\n *          Truncated cell minimum width\n *          {@default `calc(5ch + 1rem + 1rem)`}\n * @cssprop {<>} --pf-c-table--cell--hidden-visible--Display\n *          Cell visible display\n *          {@default `grid`}\n * @cssprop {<calc-product>} --pf-c-table__toggle--c-button--MarginTop\n *          Toggle button top margin\n *          {@default `calc(0.375rem * -1)`}\n * @cssprop {<calc-product>} --pf-c-table__toggle--c-button--MarginBottom\n *          Toggle button bottom margin\n *          {@default `calc(0.375rem * -1)`}\n * @cssprop {<>} --pf-c-table__toggle--c-button__toggle-icon--Rotate\n *          Toggle button icon rotation\n *          {@default `270deg`}\n * @cssprop {<>} --pf-c-table__toggle--c-button__toggle-icon--Transition\n *          Toggle button icon transition\n *          {@default `.2s ease-in 0s`}\n * @cssprop {<>} --pf-c-table__toggle--c-button--m-expanded__toggle-icon--Rotate\n *          Expanded toggle button icon rotation\n *          {@default `360deg`}\n * @cssprop {<color>} --pf-c-table__button--BackgroundColor\n *          Button background color\n *          {@default `transparent`}\n * @cssprop {<color>} --pf-c-table__button--Color\n *          Button color\n *          {@default `#151515`}\n * @cssprop {<color>} --pf-c-table__button--hover--Color\n *          Button hover color\n *          {@default `#151515`}\n * @cssprop {<color>} --pf-c-table__button--focus--Color\n *          Button focus color\n *          {@default `#151515`}\n * @cssprop {<color>} --pf-c-table__button--active--Color\n *          Button active color\n *          {@default `#151515`}\n * @cssprop {<calc-sum>} --pf-c-table__button--OutlineOffset\n *          Button outline offset\n *          {@default `calc(3px * -1)`}\n * @cssprop {<dimension>} --pf-c-table--m-compact__toggle--PaddingTop\n *          Compact toggle top padding\n *          {@default `0`}\n * @cssprop {<dimension>} --pf-c-table--m-compact__toggle--PaddingBottom\n *          Compacy toggle bottom padding\n *          {@default `0`}\n * @cssprop {<dimension>} --pf-c-table__check--input--MarginTop\n *          Check input top margin\n *          {@default `0.25rem`}\n * @cssprop {<dimension>} --pf-c-table__check--input--FontSize\n *          Check input font size\n *          {@default `1rem`}\n * @cssprop {<color>} --pf-c-table--cell--m-favorite--Color\n *          Favorite cell color\n *          {@default `#d2d2d2`}\n * @cssprop {<color>} --pf-c-table__favorite--c-button--Color\n *          Favorite button color\n *          {@default `#d2d2d2`}\n * @cssprop {<dimension>} --pf-c-table__favorite--c-button--FontSize\n *          Favorite button font size\n *          {@default `0.875rem`}\n * @cssprop {<calc-product>} --pf-c-table__favorite--c-button--MarginTop\n *          Favorite button top margin\n *          {@default `calc(0.375rem * -1)`}\n * @cssprop {<calc-product>} --pf-c-table__favorite--c-button--MarginRight\n *          Favorite button right margin\n *          {@default `calc(1rem * -1)`}\n * @cssprop {<calc-product>} --pf-c-table__favorite--c-button--MarginBottom\n *          Favorite button bottom margin\n *          {@default `calc(0.375rem * -1)`}\n * @cssprop {<calc-product>} --pf-c-table__favorite--c-button--MarginLeft\n *          Favorite button left margin\n *          {@default `calc(1rem * -1)`}\n * @cssprop {<color>} --pf-c-table__favorite--m-favorited--c-button--Color\n *          Favorited button color\n *          {@default `#f0ab00`}\n * @cssprop {<color>} --pf-c-table__sort--m-favorite__button__text--Color\n *          Favorite sort button text color\n *          {@default `#6a6e73`}\n * @cssprop {<color>} --pf-c-table__sort--m-favorite__button--hover__text--Color\n *          Favorite sort button hover text color\n *          {@default `#151515`}\n * @cssprop {<color>} --pf-c-table__sort--m-favorite__button--focus__text--Color\n *          Favorite sort button focus text color\n *          {@default `#151515`}\n * @cssprop {<color>} --pf-c-table__sort--m-favorite__button--active__text--Color\n *          Favorite sort button active text color\n *          {@default `#151515`}\n * @cssprop {<calc-product>} --pf-c-table__draggable--c-button--MarginTop\n *          Draggable button top margin\n *          {@default `calc(0.375rem * -1)`}\n * @cssprop {<calc-product>} --pf-c-table__draggable--c-button--MarginRight\n *          Draggable button right margin\n *          {@default `calc(1rem * -1)`}\n * @cssprop {<calc-product>} --pf-c-table__draggable--c-button--MarginBottom\n *          Draggable button bottom margin\n *          {@default `calc(0.375rem * -1)`}\n * @cssprop {<calc-product>} --pf-c-table__draggable--c-button--MarginLeft\n *          Draggable button left margin\n *          {@default `calc(1rem * -1)`}\n * @cssprop {<dimension>} --pf-c-table__tr--m-ghost-row--Opacity\n *          Ghost row opacity\n *          {@default `.4`}\n * @cssprop {<color>} --pf-c-table__tr--m-ghost-row--BackgroundColor\n *          Ghost row background color\n *          {@default `#fff`}\n * @cssprop {<dimension>} --pf-c-table__action--PaddingTop\n *          Action top padding\n *          {@default `0`}\n * @cssprop {<dimension>} --pf-c-table__action--PaddingRight\n *          Action right padding\n *          {@default `0`}\n * @cssprop {<dimension>} --pf-c-table__action--PaddingBottom\n *          Action bottom padding\n *          {@default `0`}\n * @cssprop {<dimension>} --pf-c-table__action--PaddingLeft\n *          Action left padding\n *          {@default `0`}\n * @cssprop {<dimension>} --pf-c-table__inline-edit-action--PaddingTop\n *          Inline edit action top padding\n *          {@default `0`}\n * @cssprop {<dimension>} --pf-c-table__inline-edit-action--PaddingRight\n *          Inline edit action right padding\n *          {@default `0`}\n * @cssprop {<dimension>} --pf-c-table__inline-edit-action--PaddingBottom\n *          Inline edit action bottom padding\n *          {@default `0`}\n * @cssprop {<dimension>} --pf-c-table__inline-edit-action--PaddingLeft\n *          Inline edit action left padding\n *          {@default `0`}\n * @cssprop {<>} --pf-c-table__expandable-row--Transition\n *          Expandable row transition\n *          {@default `all 250ms cubic-bezier(.42, 0, .58, 1)`}\n * @cssprop {<length>} --pf-c-table__expandable-row--MaxHeight\n *          Expandable row max height\n *          {@default `28.125rem`}\n * @cssprop {<>} --pf-c-table__expandable-row-content--Transition\n *          Expandable row content transition\n *          {@default `all 250ms cubic-bezier(.42, 0, .58, 1)`}\n * @cssprop {<dimension>} --pf-c-table__expandable-row-content--PaddingTop\n *          Expandable row content top padding\n *          {@default `1.5rem`}\n * @cssprop {<dimension>} --pf-c-table__expandable-row-content--PaddingBottom\n *          Expandable row content bottom padding\n *          {@default `1.5rem`}\n * @cssprop {<calc-product>} --pf-c-table__expandable-row--after--Top\n *          Expandable row after top\n *          {@default `calc(1px * -1)`}\n * @cssprop {<calc-product>} --pf-c-table__expandable-row--after--Bottom\n *          Expandable row after bottom\n *          {@default `calc(1px * -1)`}\n * @cssprop {<length>} --pf-c-table__expandable-row--after--border-width--base\n *          Expandable row after base border width\n *          {@default `3px`}\n * @cssprop {<length>} --pf-c-table__expandable-row--after--BorderLeftWidth\n *          Expandable row after left border width\n *          {@default `0`}\n * @cssprop {<color>} --pf-c-table__expandable-row--after--BorderColor\n *          Expandable row after border color\n *          {@default `#06c`}\n * @cssprop {<dimension>} --pf-c-table__icon-inline--MarginRight\n *          Inline icon right margin\n *          {@default `0.5rem`}\n * @cssprop {<calc-sum>} --pf-c-table__sort--MinWidth\n *          Sort button minimum width\n *          {@default `calc(6ch + 1rem + 1rem + 1rem)`}\n * @cssprop {<dimension>} --pf-c-table__sort__button--PaddingTop\n *          Sort button top padding\n *          {@default `0.375rem`}\n * @cssprop {<dimension>} --pf-c-table__sort__button--PaddingRight\n *          Sort button right padding\n *          {@default `0.5rem`}\n * @cssprop {<dimension>} --pf-c-table__sort__button--PaddingBottom\n *          Sort button bottom padding\n *          {@default `0.375rem`}\n * @cssprop {<dimension>} --pf-c-table__sort__button--PaddingLeft\n *          Sort button left padding\n *          {@default `0.5rem`}\n * @cssprop {<calc-product>} --pf-c-table__sort__button--MarginTop\n *          Sort button top margin\n *          {@default `calc(0.375rem * -1)`}\n * @cssprop {<calc-product>} --pf-c-table__sort__button--MarginBottom\n *          Sort button bottom margin\n *          {@default `calc(0.375rem * -1)`}\n * @cssprop {<calc-product>} --pf-c-table__sort__button--MarginLeft\n *          Sort button left margin\n *          {@default `calc(0.5rem * -1)`}\n * @cssprop {<color>} --pf-c-table__sort__button--Color\n *          Sort button color\n *          {@default `#151515`}\n * @cssprop {<color>} --pf-c-table__sort--m-selected__button--Color\n *          Selected sort button color\n *          {@default `#06c`}\n * @cssprop {<length>} --pf-c-table__sort--m-help--MinWidth\n *          Help button minimum width\n *          {@default `15ch`}\n * @cssprop {<color>} --pf-c-table__sort__button__text--Color\n *          Sort button text color\n *          {@default `currentcolor`}\n * @cssprop {<color>} --pf-c-table__sort__button--hover__text--Color\n *          Sort button hover text color\n *          {@default `currencolor`}\n * @cssprop {<color>} --pf-c-table__sort__button--focus__text--Color\n *          Sort button focus text color\n *          {@default `currentcolor`}\n * @cssprop {<color>} --pf-c-table__sort__button--active__text--Color\n *          Sort button active text color\n *          {@default `currentcolor`}\n * @cssprop {<color>} --pf-c-table__sort-indicator--Color\n *          Sort inidcator color\n *          {@default `#d2d2d2`}\n * @cssprop {<calc-sum>} --pf-c-table__sort-indicator--MarginLeft\n *          Sort inidcator left margin\n *          {@default `calc(6ch + 1rem + 1rem + 1rem)`}\n * @cssprop {<color>} --pf-c-table__sort--m-selected__sort-indicator--Color\n *          Selected sort inidcator color\n *          {@default `#06c`}\n * @cssprop {<color>} --pf-c-table__sort__button--hover__sort-indicator--Color\n *          Sort button hover sort indicator color\n *          {@default `#151515`}\n * @cssprop {<color>} --pf-c-table__sort__button--active__sort-indicator--Color\n *          Sort button hover active sort indicator color\n *          {@default `#151515`}\n * @cssprop {<color>} --pf-c-table__sort__button--focus__sort-indicator--Color\n *          Sort button hover focus sort indicator color\n *          {@default `#151515`}\n * @cssprop {<length>} --pf-c-table--th--m-help--MinWidth\n *          Header cell help minimum width\n *          {@default `11ch`}\n * @cssprop {<dimension>} --pf-c-table__column-help--MarginLeft\n *          Help column left magin\n *          {@default `0.25rem`}\n * @cssprop {<dimension>} --pf-c-table__column-help--TranslateY\n *          Help column translate y axis\n *          {@default `0.125rem`}\n * @cssprop {<calc-product>} --pf-c-table__column-help--c-button--MarginTop\n *          Help column button top margin\n *          {@default `calc(0.375rem * -1)`}\n * @cssprop {<calc-product>} --pf-c-table__column-help--c-button--MarginBottom\n *          Help column button bottom margin\n *          {@default `calc(0.375rem * -1)`}\n * @cssprop {<dimension>} --pf-c-table__column-help--c-button--PaddingRight\n *          Help column button right padding\n *          {@default `0.5rem`}\n * @cssprop {<dimension>} --pf-c-table__column-help--c-button--PaddingLeft\n *          Help column button left margin\n *          {@default `0.5rem`}\n * @cssprop {<color>} --pf-c-table__compound-expansion-toggle__button--Color\n *          Compound expansion toggle button color\n *          {@default `#06c`}\n * @cssprop {<color>} --pf-c-table__compound-expansion-toggle__button--hover--Color\n *          Compound expansion hover toggle button color\n *          {@default `#004080`}\n * @cssprop {<color>} --pf-c-table__compound-expansion-toggle__button--focus--Color\n *          Compound expansion focus toggle button color\n *          {@default `#004080`}\n * @cssprop {<color>} --pf-c-table__compound-expansion-toggle__button--active--Color\n *          Compound expansion active toggle button color\n *          {@default `#004080`}\n * @cssprop {<length>} --pf-c-table__compound-expansion-toggle__button--before--border-width--base\n *          Compound expansion toggle button before border width\n *          {@default `1px`}\n * @cssprop {<color>} --pf-c-table__compound-expansion-toggle__button--before--BorderColor\n *          Compound expansion toggle button before border color\n *          {@default `#d2d2d2`}\n * @cssprop {<length>} --pf-c-table__compound-expansion-toggle__button--before--BorderRightWidth\n *          Compound expansion toggle button before right border width\n *          {@default `0`}\n * @cssprop {<length>} --pf-c-table__compound-expansion-toggle__button--before--BorderLeftWidth\n *          Compound expansion toggle button before left border width\n *          {@default `0`}\n * @cssprop {<calc-product>} --pf-c-table__compound-expansion-toggle__button--before--Bottom\n *          Compound expansion toggle button before bottom\n *          {@default `calc(1px * -1)`}\n * @cssprop {<calc-product>} --pf-c-table__compound-expansion-toggle__button--before--Left\n *          Compound expansion toggle button before left\n *          {@default `calc(1px * -1)`}\n * @cssprop {<length>} --pf-c-table__compound-expansion-toggle__button--after--border-width--base\n *          Compound expansion toggle button after base border width\n *          {@default `3px`}\n * @cssprop {<color>} --pf-c-table__compound-expansion-toggle__button--after--BorderColor\n *          Compound expansion toggle button after border color\n *          {@default `#06c`}\n * @cssprop {<length>} --pf-c-table__compound-expansion-toggle__button--after--BorderTopWidth\n *          Compound expansion toggle button after top border width\n *          {@default `0`}\n * @cssprop {<calc-sum>} --pf-c-table__compound-expansion-toggle__button--after--Top\n *          Compound expansion toggle button after top\n *          {@default `calc(1px * -1)`}\n * @cssprop {<calc-sum>} --pf-c-table__compound-expansion-toggle__button--after--Left\n *          Compound expansion toggle button after left\n *          {@default `calc(1px * -1)`}\n * @cssprop {<calc-sum>} --pf-c-table--m-compact-th--PaddingTop\n *          Compact header cell top padding\n *          {@default `calc(0.5rem + 0.25rem)`}\n * @cssprop {<dimension>} --pf-c-table--m-compact-th--PaddingBottom\n *          Compact header cell bottom padding\n *          {@default `0.5rem`}\n * @cssprop {<dimension>} --pf-c-table--m-compact--cell--PaddingTop\n *          Compact cell top padding\n *          {@default `0.5rem`}\n * @cssprop {<dimension>} --pf-c-table--m-compact--cell--PaddingRight\n *          Compact cell right padding\n *          {@default `0.5rem`}\n * @cssprop {<dimension>} --pf-c-table--m-compact--cell--PaddingBottom\n *          Compact cell bottom padding\n *          {@default `0.5rem`}\n * @cssprop {<dimension>} --pf-c-table--m-compact--cell--PaddingLeft\n *          Compact cell left padding\n *          {@default `0.5rem`}\n * @cssprop {<dimension>} --pf-c-table--m-compact--cell--first-last-child--PaddingLeft\n *          Compact cell first child left padding\n *          {@default `1rem`}\n * @cssprop {<dimension>} --pf-c-table--m-compact--cell--first-last-child--PaddingRight\n *          Compact XLcell first child right padding\n *          {@default `1rem`}\n * @cssprop {<dimension>} --pf-c-table--m-compact--cell--first-last-child--xl--PaddingLeft\n *          Compact cell first child XL left padding\n *          {@default `1.5rem`}\n * @cssprop {<dimension>} --pf-c-table--m-compact--cell--first-last-child--xl--PaddingRight\n *          Compact cell first child XL right padding\n *          {@default `1.5rem`}\n * @cssprop {<dimension>} --pf-c-table--m-compact--FontSize\n *          Compact font size\n *          {@default `0.875rem`}\n * @cssprop {<dimension>} --pf-c-table--m-compact__expandable-row-content--PaddingTop\n *          Compact expandable row content top padding\n *          {@default `1.5rem`}\n * @cssprop {<dimension>} --pf-c-table--m-compact__expandable-row-content--PaddingRight\n *          Compact expandable row content right padding\n *          {@default `1.5rem`}\n * @cssprop {<dimension>} --pf-c-table--m-compact__expandable-row-content--PaddingBottom\n *          Compact expandable row content bottom padding\n *          {@default `1.5rem`}\n * @cssprop {<dimension>} --pf-c-table--m-compact__expandable-row-content--PaddingLeft\n *          Compact expandable row content left padding\n *          {@default `1.5rem`}\n * @cssprop {<dimension>} --pf-c-table--nested--first-last-child--PaddingRight\n *          Nested first child right padding\n *          {@default `1rem`}\n * @cssprop {<dimension>} --pf-c-table--nested--first-last-child--PaddingLeft\n *          Nested first child left padding\n *          {@default `1rem`}\n * @cssprop {<color>} --pf-c-table__expandable-row--m-expanded--BorderBottomColor\n *          Expandable row expanded bottom border color\n *          {@default `#d2d2d2`}\n * @cssprop {<color>} --pf-c-table--tr--m-hoverable--BoxShadow--top\n *          Hoverable table row top box shadow\n *          {@default `0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08)`}\n * @cssprop {<dimension>} --pf-c-table--tr--m-hoverable--BackgroundColor\n *          Hoverable table row background color\n *          {@default `transparent`}\n * @cssprop {<color>} --pf-c-table--tr--m-hoverable--BoxShadow\n *          Hoverable table row box shadow\n *          {@default `0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08)`}\n * @cssprop {<calc-sum>} --pf-c-table--tr--m-hoverable--OutlineOffset\n *          Hoverable table row outline offset\n *          {@default `calc(-1 * 0.25rem)`}\n * @cssprop {<color>} --pf-c-table--tr--m-hoverable--hover--BoxShadow\n *          Hoverable table row hover box shadow\n *          {@default `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 * @cssprop {<color>} --pf-c-table--tr--m-hoverable--hover--BackgroundColor\n *          Hoverable table row hover background color\n *          {@default `#fff`}\n * @cssprop {<color>} --pf-c-table--tr--m-hoverable--focus--BoxShadow\n *          Hoverable table row focus box shadow\n *          {@default `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 * @cssprop {<color>} --pf-c-table--tr--m-hoverable--focus--BackgroundColor\n *          Hoverable table row focus background color\n *          {@default `#fff`}\n * @cssprop {<color>} --pf-c-table--tr--m-hoverable--active--BoxShadow\n *          Hoverable table row active box shadow\n *          {@default `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 * @cssprop {<color>} --pf-c-table--tr--m-hoverable--active--BackgroundColor\n *          Hoverable table row active background color\n *          {@default `#fff`}\n * @cssprop {<color>} --pf-c-table--tr--m-hoverable--m-selected--BoxShadow\n *          Hoverable table row selected box shadow\n *          {@default `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 * @cssprop {<color>} --pf-c-table--tr--m-selected--BoxShadow--top\n *          Selected table row top box shadow\n *          {@default `0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08)`}\n * @cssprop {<color>} --pf-c-table--tr--m-selected--BackgroundColor\n *          Selected table row background color\n *          {@default `#fff`}\n * @cssprop {<color>} --pf-c-table--tr--m-selected--BoxShadow\n *          Selected table row box shadow\n *          {@default `0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08)`}\n * @cssprop {<calc-sum>} --pf-c-table--tr--m-selected--OutlineOffset\n *          Selected table row outline offset\n *          {@default `calc(-1 * 0.25rem)`}\n * @cssprop {<length>} --pf-c-table--tr--m-selected--after--BorderLeftWidth\n *          Selected table row after left border width\n *          {@default `3px`}\n * @cssprop {<color>} --pf-c-table--tr--m-selected--after--BorderLeftColor\n *          Selected table row after left border color\n *          {@default `#06c`}\n * @cssprop {<color>} --pf-c-table--tr--m-selected--m-selected--BoxShadow\n *          Selected table row box shadow\n *          {@default `0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)`}\n * @cssprop {<color>} --pf-c-table--tr--m-selected--hover--m-selected--BoxShadow\n *          Selected table row hover box shadow\n *          {@default `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 * @cssprop {<color>} --pf-c-table--tr--m-selected--tr--m-selected--hover--BoxShadow\n *          Selected table row hover box shadow\n *          {@default `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 * @cssprop {<color>} --pf-c-table--tbody--m-hoverable--BoxShadow--top\n *          Hoverable table body top box shadow\n *          {@default `0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08)`}\n * @cssprop {<color>} --pf-c-table--tbody--m-hoverable--BoxShadow\n *          Hoverable table body box shadow\n *          {@default `0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08)`}\n * @cssprop {<dimension>} --pf-c-table--tbody--m-hoverable--BackgroundColor\n *          Hoverable table body background color\n *          {@default `transparent`}\n * @cssprop {<calc-sum>} --pf-c-table--tbody--m-hoverable--OutlineOffset\n *          Hoverable table body outline offset\n *          {@default `calc(-1 * 0.25rem)`}\n * @cssprop {<color>} --pf-c-table--tbody--m-hoverable--hover--BoxShadow\n *          Hoverable table body hover box shadow\n *          {@default `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 * @cssprop {<color>} --pf-c-table--tbody--m-hoverable--hover--BackgroundColor\n *          Hoverable table body hover background color\n *          {@default `#fff`}\n * @cssprop {<color>} --pf-c-table--tbody--m-hoverable--focus--BoxShadow\n *          Hoverable table body focus box shadow\n *          {@default `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 * @cssprop {<color>} --pf-c-table--tbody--m-hoverable--focus--BackgroundColor\n *          Hoverable table body focus background color\n *          {@default `#fff`}\n * @cssprop {<color>} --pf-c-table--tbody--m-hoverable--active--BoxShadow\n *          Hoverable table body active box shadow\n *          {@default `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 * @cssprop {<color>} --pf-c-table--tbody--m-hoverable--active--BackgroundColor\n *          Hoverable table body active background color\n *          {@default `#fff`}\n * @cssprop {<color>} --pf-c-table--tbody--m-hoverable--m-expanded--BorderColor\n *          Hoverable table body expanded border color\n *          {@default `#73bcf7`}\n * @cssprop {<color>} --pf-c-table--tbody--m-hoverable--m-selected--hover--tr--BoxShadow\n *          Hoverable table body selected table row box shadow\n *          {@default `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 * @cssprop {<color>} --pf-c-table--tbody--m-selected--BackgroundColor\n *          Selected table body background color\n *          {@default `#fff`}\n * @cssprop {<color>} --pf-c-table--tbody--m-selected--BoxShadow--top\n *          Selected table body top box shadow\n *          {@default `0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08)`}\n * @cssprop {<color>} --pf-c-table--tbody--m-selected--BoxShadow\n *          Selected table body box shadow\n *          {@default `0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08)`}\n * @cssprop {<calc-product>} --pf-c-table--tbody--m-selected--OutlineOffset\n *          Selected table body outline offset\n *          {@default `calc(-1 * 0.25rem)`}\n * @cssprop {<length>} --pf-c-table--tbody--m-selected--after--BorderLeftWidth\n *          Selected table body after left border width\n *          {@default `3px`}\n * @cssprop {<color>} --pf-c-table--tbody--m-selected--after--BorderLeftColor\n *          Selected table body after left border color\n *          {@default `#06c`}\n * @cssprop {<color>} --pf-c-table--tbody--m-selected--m-selected--BoxShadow\n *          Selected table body selected box shadow\n *          {@default `0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)`}\n * @cssprop {<color>} --pf-c-table--tbody--m-selected--hover--tbody--m-selected--BoxShadow\n *          Selected table body hover selected box shadow\n *          {@default `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 * @cssprop {<color>} --pf-c-table--tbody--m-selected--tbody--m-selected--hover--BoxShadow\n *          Selected table body hover box shadow\n *          {@default `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 * @cssprop {<dimension>} --pf-c-table--thead--m-nested-column-header--button--OutlineOffset\n *          Table head nested column header button outline offset\n *          {@default `-0.1875rem`}\n * @cssprop {<dimension>} --pf-c-table--thead--m-nested-column-header--tr--PaddingTop\n *          Table head nested column header row top padding\n *          {@default `0.25rem`}\n * @cssprop {<dimension>} --pf-c-table--thead--m-nested-column-header--tr--PaddingBottom\n *          Table head nested column header row bottom padding\n *          {@default `0.25rem`}\n * @cssprop {<color>} --pf-c-table__subhead--Color\n *          Subhead color\n *          {@default `#6a6e73`}\n * @cssprop {<color>} --pf-c-table--m-striped__tr--BackgroundColor\n *          Striped row background color\n *          {@default `#fafafa`}\n * @cssprop {<dimension>} --pf-c-table--cell--PaddingTop\n *          Cell top padding\n *          {@default `1rem`}\n * @cssprop {<dimension>} --pf-c-table--cell--PaddingRight\n *          Cell right padding\n *          {@default `1rem`}\n * @cssprop {<dimension>} --pf-c-table--cell--PaddingBottom\n *          Cell bottom padding\n *          {@default `1rem`}\n * @cssprop {<dimension>} --pf-c-table--cell--PaddingLeft\n *          Cell left padding\n *          {@default `1rem`}\n * @cssprop {<calc-sum>} --pf-c-table__favorite--c-button--MarginTop\n *          Favorite button top margin\n *          {@default `calc(0.375rem * -1)`}\n * @cssprop {<calc-sum>} --pf-c-table__favorite--c-button--MarginRight\n *          Favorite button right margin\n *          {@default `calc(1rem * -1)`}\n * @cssprop {<calc-sum>} --pf-c-table__favorite--c-button--MarginBottom\n *          Favorite button bottom margin\n *          {@default `calc(0.375rem * -1)`}\n * @cssprop {<calc-sum>} --pf-c-table__favorite--c-button--MarginLeft\n *          Favorite button left margin\n *          {@default `calc(1rem * -1)`}\n */\n@customElement('pf-table')\nexport class PfTable extends LitElement {\n  static readonly styles = [styles];\n\n  get rows() {\n    return this.querySelectorAll<PfTr>(rowQuery);\n  }\n\n  @state() private columns = 0;\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute('role', 'table');\n    this.#onSlotchange();\n  }\n\n  render() {\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"]}

package/pf-table/pf-tbody.d.ts

@@ -6,7 +6,7 @@ import { LitElement } from 'lit';
 export declare class PfTbody extends LitElement {
     static readonly styles: CSSStyleSheet[];
     connectedCallback(): void;
-    render(): import("lit").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/pf-table/pf-td.d.ts

@@ -9,7 +9,7 @@ export declare class PfTd extends LitElement {
     compoundExpand?: string;
     expanded: boolean;
     connectedCallback(): void;
-    render(): import("lit").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/pf-table/pf-th.d.ts

@@ -17,7 +17,7 @@ export declare class PfTh extends LitElement {
     sortDirection?: 'asc' | 'desc';
     key: string;
     connectedCallback(): void;
-    render(): import("lit").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
     sort(): void;
 }
 declare global {

package/pf-table/pf-th.js

@@ -19,9 +19,9 @@ export class RequestSortEvent extends Event {
     }
 }
 const paths = new Map(Object.entries({
-    asc: 'M88 166.059V468c0 6.627 5.373 12 12 12h56c6.627 0 12-5.373 12-12V166.059h46.059c21.382 0 32.09-25.851 16.971-40.971l-86.059-86.059c-9.373-9.373-24.569-9.373-33.941 0l-86.059 86.059c-15.119 15.119-4.411 40.971 16.971 40.971H88z',
-    desc: 'M168 345.941V44c0-6.627-5.373-12-12-12h-56c-6.627 0-12 5.373-12 12v301.941H41.941c-21.382 0-32.09 25.851-16.971 40.971l86.059 86.059c9.373 9.373 24.569 9.373 33.941 0l86.059-86.059c15.119-15.119 4.411-40.971-16.971-40.971H168z',
-    sort: 'M214.059 377.941H168V134.059h46.059c21.382 0 32.09-25.851 16.971-40.971L144.971 7.029c-9.373-9.373-24.568-9.373-33.941 0L24.971 93.088c-15.119 15.119-4.411 40.971 16.971 40.971H88v243.882H41.941c-21.382 0-32.09 25.851-16.971 40.971l86.059 86.059c9.373 9.373 24.568 9.373 33.941 0l86.059-86.059c15.12-15.119 4.412-40.971-16.97-40.971z',
+    asc: `M88 166.059V468c0 6.627 5.373 12 12 12h56c6.627 0 12-5.373 12-12V166.059h46.059c21.382 0 32.09-25.851 16.971-40.971l-86.059-86.059c-9.373-9.373-24.569-9.373-33.941 0l-86.059 86.059c-15.119 15.119-4.411 40.971 16.971 40.971H88z`,
+    desc: `M168 345.941V44c0-6.627-5.373-12-12-12h-56c-6.627 0-12 5.373-12 12v301.941H41.941c-21.382 0-32.09 25.851-16.971 40.971l86.059 86.059c9.373 9.373 24.569 9.373 33.941 0l86.059-86.059c15.119-15.119 4.411-40.971-16.971-40.971H168z`,
+    sort: `M214.059 377.941H168V134.059h46.059c21.382 0 32.09-25.851 16.971-40.971L144.971 7.029c-9.373-9.373-24.568-9.373-33.941 0L24.971 93.088c-15.119 15.119-4.411 40.971 16.971 40.971H88v243.882H41.941c-21.382 0-32.09 25.851-16.971 40.971l86.059 86.059c9.373 9.373 24.568 9.373 33.941 0l86.059-86.059c15.12-15.119 4.412-40.971-16.97-40.971z`,
 }));
 /**
  * Table header cell

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

@@ -1 +1 @@
-{"version":3,"file":"pf-th.js","sourceRoot":"","sources":["pf-th.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, svg } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport '@patternfly/elements/pf-button/pf-button.js';\n\nimport styles from './pf-th.css';\n\nconst DIRECTIONS = { asc: 'desc', desc: 'asc' } as const;\n\nexport class RequestSortEvent extends Event {\n  constructor(\n    public key: string,\n    public direction: 'asc' | 'desc',\n  ) {\n    super('request-sort', {\n      bubbles: true,\n      cancelable: true,\n    });\n  }\n}\n\nconst paths = new Map(Object.entries({\n  asc: 'M88 166.059V468c0 6.627 5.373 12 12 12h56c6.627 0 12-5.373 12-12V166.059h46.059c21.382 0 32.09-25.851 16.971-40.971l-86.059-86.059c-9.373-9.373-24.569-9.373-33.941 0l-86.059 86.059c-15.119 15.119-4.411 40.971 16.971 40.971H88z',\n  desc: 'M168 345.941V44c0-6.627-5.373-12-12-12h-56c-6.627 0-12 5.373-12 12v301.941H41.941c-21.382 0-32.09 25.851-16.971 40.971l86.059 86.059c9.373 9.373 24.569 9.373 33.941 0l86.059-86.059c15.119-15.119 4.411-40.971-16.971-40.971H168z',\n  sort: 'M214.059 377.941H168V134.059h46.059c21.382 0 32.09-25.851 16.971-40.971L144.971 7.029c-9.373-9.373-24.568-9.373-33.941 0L24.971 93.088c-15.119 15.119-4.411 40.971 16.971 40.971H88v243.882H41.941c-21.382 0-32.09 25.851-16.971 40.971l86.059 86.059c9.373 9.373 24.568 9.373 33.941 0l86.059-86.059c15.12-15.119 4.412-40.971-16.97-40.971z',\n}));\n\n/**\n * Table header cell\n * @slot - Place element content here\n */\n@customElement('pf-th')\nexport class PfTh extends LitElement {\n  static readonly styles = [styles];\n\n  @property({ type: Boolean, reflect: true }) sortable?: boolean = false;\n\n  @property({ type: Boolean, reflect: true }) selected?: boolean = false;\n\n  @property({\n    reflect: true,\n    attribute: 'sort-direction',\n  }) sortDirection?: 'asc' | 'desc';\n\n  @property() key!: string;\n\n  override connectedCallback() {\n    super.connectedCallback();\n    const closestThead = this.closest('pf-thead');\n    const closestTable = this.closest('pf-table');\n    const isChildOfThead = !!closestThead && !!closestTable?.contains(closestThead);\n    const role = isChildOfThead ? 'colheader' : 'rowheader';\n    this.setAttribute('role', role);\n  }\n\n  render() {\n    const selected = !!this.selected;\n    return this.sortable ?\n      html`\n        <button id=\"sort-button\"\n                class=\"sortable ${classMap({ selected })}\"\n                part=\"sort-button\"\n                @click=\"${this.#onClick}\">\n          <slot></slot>\n          <span class=\"visually-hidden\">${!this.sortDirection ? '' : `(sorted ${this.sortDirection === 'asc' ? 'ascending' : 'descending'})`}</span>\n          <span id=\"sort-indicator\">\n            <svg fill=\"currentColor\" height=\"1em\" width=\"1em\" viewBox=\"0 0 256 512\" aria-hidden=\"true\" role=\"img\" style=\"vertical-align: -0.125em;\">${svg`\n              <path d=\"${paths.get(this.sortDirection ?? 'sort')}\"></path>`}\n            </svg>\n          </span>\n        </button>\n      ` : html`\n        <slot></slot>\n      `;\n  }\n\n  #onClick() {\n    if (this.sortable) {\n      this.sort();\n    }\n  }\n\n  sort() {\n    const next = DIRECTIONS[this.sortDirection ?? 'asc'];\n    this.dispatchEvent(new RequestSortEvent(this.key, next));\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-th': PfTh;\n  }\n}\n"]}
+{"version":3,"file":"pf-th.js","sourceRoot":"","sources":["pf-th.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, svg } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport '@patternfly/elements/pf-button/pf-button.js';\n\nimport styles from './pf-th.css';\n\nconst DIRECTIONS = { asc: 'desc', desc: 'asc' } as const;\n\nexport class RequestSortEvent extends Event {\n  constructor(\n    public key: string,\n    public direction: 'asc' | 'desc',\n  ) {\n    super('request-sort', {\n      bubbles: true,\n      cancelable: true,\n    });\n  }\n}\n\nconst paths = new Map(Object.entries({\n  asc: `M88 166.059V468c0 6.627 5.373 12 12 12h56c6.627 0 12-5.373 12-12V166.059h46.059c21.382 0 32.09-25.851 16.971-40.971l-86.059-86.059c-9.373-9.373-24.569-9.373-33.941 0l-86.059 86.059c-15.119 15.119-4.411 40.971 16.971 40.971H88z`,\n  desc: `M168 345.941V44c0-6.627-5.373-12-12-12h-56c-6.627 0-12 5.373-12 12v301.941H41.941c-21.382 0-32.09 25.851-16.971 40.971l86.059 86.059c9.373 9.373 24.569 9.373 33.941 0l86.059-86.059c15.119-15.119 4.411-40.971-16.971-40.971H168z`,\n  sort: `M214.059 377.941H168V134.059h46.059c21.382 0 32.09-25.851 16.971-40.971L144.971 7.029c-9.373-9.373-24.568-9.373-33.941 0L24.971 93.088c-15.119 15.119-4.411 40.971 16.971 40.971H88v243.882H41.941c-21.382 0-32.09 25.851-16.971 40.971l86.059 86.059c9.373 9.373 24.568 9.373 33.941 0l86.059-86.059c15.12-15.119 4.412-40.971-16.97-40.971z`,\n}));\n\n/**\n * Table header cell\n * @slot - Place element content here\n */\n@customElement('pf-th')\nexport class PfTh extends LitElement {\n  static readonly styles = [styles];\n\n  @property({ type: Boolean, reflect: true }) sortable?: boolean = false;\n\n  @property({ type: Boolean, reflect: true }) selected?: boolean = false;\n\n  @property({\n    reflect: true,\n    attribute: 'sort-direction',\n  }) sortDirection?: 'asc' | 'desc';\n\n  @property() key!: string;\n\n  override connectedCallback() {\n    super.connectedCallback();\n    const closestThead = this.closest('pf-thead');\n    const closestTable = this.closest('pf-table');\n    const isChildOfThead = !!closestThead && !!closestTable?.contains(closestThead);\n    const role = isChildOfThead ? 'colheader' : 'rowheader';\n    this.setAttribute('role', role);\n  }\n\n  render() {\n    const selected = !!this.selected;\n    return this.sortable ?\n      html`\n        <button id=\"sort-button\"\n                class=\"sortable ${classMap({ selected })}\"\n                part=\"sort-button\"\n                @click=\"${this.#onClick}\">\n          <slot></slot>\n          <span class=\"visually-hidden\">${!this.sortDirection ? '' : `(sorted ${this.sortDirection === 'asc' ? 'ascending' : 'descending'})`}</span>\n          <span id=\"sort-indicator\">\n            <svg fill=\"currentColor\" height=\"1em\" width=\"1em\" viewBox=\"0 0 256 512\" aria-hidden=\"true\" role=\"img\" style=\"vertical-align: -0.125em;\">${svg`\n              <path d=\"${paths.get(this.sortDirection ?? 'sort')}\"></path>`}\n            </svg>\n          </span>\n        </button>\n      ` : html`\n        <slot></slot>\n      `;\n  }\n\n  #onClick() {\n    if (this.sortable) {\n      this.sort();\n    }\n  }\n\n  sort() {\n    const next = DIRECTIONS[this.sortDirection ?? 'asc'];\n    this.dispatchEvent(new RequestSortEvent(this.key, next));\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-th': PfTh;\n  }\n}\n"]}

package/pf-table/pf-thead.d.ts

@@ -7,7 +7,7 @@ export declare class PfThead extends LitElement {
     #private;
     static readonly styles: CSSStyleSheet[];
     connectedCallback(): void;
-    render(): import("lit").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/pf-table/pf-tr.d.ts

@@ -25,7 +25,7 @@ export declare class PfTr extends LitElement {
     expanded: boolean | string;
     connectedCallback(): void;
     willUpdate(changed: PropertyValues<this>): void;
-    render(): (false | "" | import("lit").TemplateResult<1>)[];
+    render(): (false | "" | import("lit-html").TemplateResult<1>)[];
 }
 declare global {
     interface HTMLElementTagNameMap {

package/pf-table/pf-tr.js

@@ -45,7 +45,7 @@ function BooleanEnumConverter(...allowedAttributes) {
             else {
                 return '';
             }
-        }
+        },
     };
 }
 const StringOrBooleanConverter = {
@@ -62,7 +62,7 @@ const StringOrBooleanConverter = {
         else {
             return '';
         }
-    }
+    },
 };
 /**
  * Table row
@@ -114,7 +114,7 @@ let PfTr = class PfTr extends LitElement {
         <div id="expansion">${!this.expanded ? '' : html `
           <slot name="${this.expanded}"></slot>`}
         </div>
-      `
+      `,
         ].filter(Boolean);
     }
 };
@@ -151,7 +151,7 @@ __decorate([
 __decorate([
     property({
         reflect: true,
-        converter: StringOrBooleanConverter
+        converter: StringOrBooleanConverter,
     })
 ], PfTr.prototype, "expanded", void 0);
 PfTr = __decorate([