@patternfly/elements 4.1.0 → 4.3.0

package/pf-table/pf-tbody.js

@@ -2,7 +2,23 @@ import { __decorate } from "tslib";
 import { LitElement, html } from 'lit';
 import { customElement } from 'lit/decorators/custom-element.js';
 import { css } from "lit";
-const styles = css `:host {\n  --pf-c-table--cell--PaddingTop: var(--pf-c-table--tbody--cell--PaddingTop);\n  --pf-c-table--cell--PaddingBottom: var(--pf-c-table--tbody--cell--PaddingBottom);\n  display: grid;\n}\n\n@media (max-width: 768px) {\n  :host {\n    position: relative;\n  }\n  \n  :host:first-of-type {\n    border-bottom: var(--pf-c-table--border-width--base) solid var(--pf-c-table--BorderColor);\n  }\n}\n\n`;
+const styles = css `:host {
+  --pf-c-table--cell--PaddingTop: var(--pf-c-table--tbody--cell--PaddingTop);
+  --pf-c-table--cell--PaddingBottom: var(--pf-c-table--tbody--cell--PaddingBottom);
+  display: grid;
+}
+
+@media (max-width: 768px) {
+  :host {
+    position: relative;
+  }
+  
+  :host:first-of-type {
+    border-bottom: var(--pf-c-table--border-width--base) solid var(--pf-c-table--BorderColor);
+  }
+}
+
+`;
 let PfTbody = class PfTbody extends LitElement {
     connectedCallback() {
         super.connectedCallback();
@@ -15,7 +31,7 @@ let PfTbody = class PfTbody extends LitElement {
     }
 };
 PfTbody.styles = [styles];
-PfTbody.version = "4.1.0";
+PfTbody.version = "4.3.0";
 PfTbody = __decorate([
     customElement('pf-tbody')
 ], PfTbody);

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

@@ -1 +1 @@
-{"version":3,"file":"pf-tbody.js","sourceRoot":"","sources":["pf-tbody.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAuB,MAAM,KAAK,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;;;AAS1D,IAAM,OAAO,GAAb,MAAM,OAAQ,SAAQ,UAAU;IAG5B,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;IACxC,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;KAEV,CAAC;IACJ,CAAC;;AAXe,cAAM,GAAoB,CAAC,MAAM,CAAC,AAA5B,CAA6B;;AADxC,OAAO;IADnB,aAAa,CAAC,UAAU,CAAC;GACb,OAAO","sourcesContent":["import { LitElement, html, type TemplateResult } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\n\nimport styles from './pf-tbody.css';\n\n/**\n * Table body\n * @slot - Place element content here\n */\n@customElement('pf-tbody')\nexport class PfTbody extends LitElement {\n  static readonly styles: CSSStyleSheet[] = [styles];\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.setAttribute('role', 'rowgroup');\n  }\n\n  render(): TemplateResult<1> {\n    return html`\n      <slot></slot>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-tbody': PfTbody;\n  }\n}\n"]}
+{"version":3,"file":"pf-tbody.js","sourceRoot":"","sources":["pf-tbody.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAuB,MAAM,KAAK,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;;;;;;;;;;;;;;;;;;;AAS1D,IAAM,OAAO,GAAb,MAAM,OAAQ,SAAQ,UAAU;IAG5B,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;IACxC,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;KAEV,CAAC;IACJ,CAAC;;AAXe,cAAM,GAAoB,CAAC,MAAM,CAAC,AAA5B,CAA6B;;AADxC,OAAO;IADnB,aAAa,CAAC,UAAU,CAAC;GACb,OAAO","sourcesContent":["import { LitElement, html, type TemplateResult } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\n\nimport styles from './pf-tbody.css';\n\n/**\n * Table body\n * @slot - Place element content here\n */\n@customElement('pf-tbody')\nexport class PfTbody extends LitElement {\n  static readonly styles: CSSStyleSheet[] = [styles];\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.setAttribute('role', 'rowgroup');\n  }\n\n  render(): TemplateResult<1> {\n    return html`\n      <slot></slot>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-tbody': PfTbody;\n  }\n}\n"]}

package/pf-table/pf-td.js

@@ -4,7 +4,112 @@ import { LitElement, html } from 'lit';
 import { customElement } from 'lit/decorators/custom-element.js';
 import { property } from 'lit/decorators/property.js';
 import { css } from "lit";
-const styles = css `:host(:empty),\n:host([compound-expand]) {\n  padding: 0;\n}\n\n:host([compound-expand]:hover) {\n  --pf-c-table__compound-expansion-toggle__button--before--BorderRightWidth: var(--pf-c-table__compound-expansion-toggle__button--before--border-width--base);\n  --pf-c-table__compound-expansion-toggle__button--before--BorderLeftWidth: var(--pf-c-table__compound-expansion-toggle__button--before--border-width--base);\n  --pf-c-table__compound-expansion-toggle__button--after--BorderTopWidth: var(--pf-c-table__compound-expansion-toggle__button--after--border-width--base);\n}\n\n:host([compound-expand]:focus-within) {\n  outline-offset: var(--pf-c-table__button--OutlineOffset);\n}\n\n:host([compound-expand][expanded]) {\n  --pf-c-table__compound-expansion-toggle__button--before--BorderRightWidth: var(--pf-c-table__compound-expansion-toggle__button--before--border-width--base);\n  --pf-c-table__compound-expansion-toggle__button--before--BorderLeftWidth: var(--pf-c-table__compound-expansion-toggle__button--before--border-width--base);\n  --pf-c-table__compound-expansion-toggle__button--after--BorderTopWidth: var(--pf-c-table__compound-expansion-toggle__button--after--border-width--base);\n  --pf-c-table__compound-expansion-toggle__button--before--Left: 0;\n}\n\n@media (-webkit-min-device-pixel-ratio: 0) {\n  :host([compound-expand]:focus-within) {\n    outline-style: auto;\n    outline-color: -webkit-focus-ring-color;\n  }\n}\n\n@media (min-width: 768px) {\n  :host {\n    padding: 1.5rem 1rem;\n  }\n}\n\nbutton {\n  position: relative;\n  width: 100%;\n  padding: var(--pf-c-table--cell--PaddingTop) var(--pf-c-table--cell--PaddingRight) var(--pf-c-table--cell--PaddingBottom) var(--pf-c-table--cell--PaddingLeft);\n  font-size: inherit;\n  font-weight: inherit;\n  color: var(--pf-c-table__button--Color);\n  text-align: left;\n  white-space: inherit;\n  -webkit-user-select: text;\n  -moz-user-select: text;\n  -ms-user-select: text;\n  user-select: text;\n  background-color: var(--pf-c-table__button--BackgroundColor);\n  border: 0;\n  min-width: 100%;\n  min-height: 100%;\n  overflow: hidden;\n}\n\nbutton::before,\nbutton::after {\n  position: absolute;\n  inset-inline-end: 0;\n  content: "";\n  border-style: solid;\n  border-width: 0;\n  border-block-start-width: 0px;\n}\n\nbutton::before {\n  inset-block-start: 0;\n  inset-block-end: var(--pf-c-table__compound-expansion-toggle__button--before--Bottom);\n  inset-inline-start: var(--pf-c-table__compound-expansion-toggle__button--before--Left);\n  border-color: var(--pf-c-table__compound-expansion-toggle__button--before--BorderColor);\n  border-inline-start-width: var(--pf-c-table__compound-expansion-toggle__button--before--BorderLeftWidth);\n  border-inline-end-width: var(--pf-c-table__compound-expansion-toggle__button--before--BorderRightWidth);\n}\n\n:host([expanded]) {\n  border-bottom: var(--pf-c-table--BackgroundColor) solid var(--pf-c-table__compound-expansion-toggle__button--before--border-width--base);\n  z-index: 1;\n}\n\nbutton::after {\n  inset-block-start: var(--pf-c-table__compound-expansion-toggle__button--after--Top);\n  inset-inline-start: var(--pf-c-table__compound-expansion-toggle__button--after--Left);\n  pointer-events: none;\n  border-color: var(--pf-c-table__compound-expansion-toggle__button--after--BorderColor);\n  border-block-start-width: var(--pf-c-table__compound-expansion-toggle__button--after--BorderTopWidth);\n}\n\nbutton:active,\nbutton:focus,\nbutton:hover {\n  outline: 0;\n}\n\nbutton:active {\n  color: var(--pf-c-table__button--active--Color);\n}\n\nbutton:focus {\n  color: var(--pf-c-table__button--focus--Color);\n}\n\nbutton:hover {\n  color: var(--pf-c-table__button--hover--Color);\n}\n\n`;
+const styles = css `:host(:empty),
+:host([compound-expand]) {
+  padding: 0;
+}
+
+:host([compound-expand]:hover) {
+  --pf-c-table__compound-expansion-toggle__button--before--BorderRightWidth: var(--pf-c-table__compound-expansion-toggle__button--before--border-width--base);
+  --pf-c-table__compound-expansion-toggle__button--before--BorderLeftWidth: var(--pf-c-table__compound-expansion-toggle__button--before--border-width--base);
+  --pf-c-table__compound-expansion-toggle__button--after--BorderTopWidth: var(--pf-c-table__compound-expansion-toggle__button--after--border-width--base);
+}
+
+:host([compound-expand]:focus-within) {
+  outline-offset: var(--pf-c-table__button--OutlineOffset);
+}
+
+:host([compound-expand][expanded]) {
+  --pf-c-table__compound-expansion-toggle__button--before--BorderRightWidth: var(--pf-c-table__compound-expansion-toggle__button--before--border-width--base);
+  --pf-c-table__compound-expansion-toggle__button--before--BorderLeftWidth: var(--pf-c-table__compound-expansion-toggle__button--before--border-width--base);
+  --pf-c-table__compound-expansion-toggle__button--after--BorderTopWidth: var(--pf-c-table__compound-expansion-toggle__button--after--border-width--base);
+  --pf-c-table__compound-expansion-toggle__button--before--Left: 0;
+}
+
+@media (-webkit-min-device-pixel-ratio: 0) {
+  :host([compound-expand]:focus-within) {
+    outline-style: auto;
+    outline-color: -webkit-focus-ring-color;
+  }
+}
+
+@media (min-width: 768px) {
+  :host {
+    padding: 1.5rem 1rem;
+  }
+}
+
+button {
+  position: relative;
+  width: 100%;
+  padding: var(--pf-c-table--cell--PaddingTop) var(--pf-c-table--cell--PaddingRight) var(--pf-c-table--cell--PaddingBottom) var(--pf-c-table--cell--PaddingLeft);
+  font-size: inherit;
+  font-weight: inherit;
+  color: var(--pf-c-table__button--Color);
+  text-align: left;
+  white-space: inherit;
+  -webkit-user-select: text;
+  -moz-user-select: text;
+  -ms-user-select: text;
+  user-select: text;
+  background-color: var(--pf-c-table__button--BackgroundColor);
+  border: 0;
+  min-width: 100%;
+  min-height: 100%;
+  overflow: hidden;
+}
+
+button::before,
+button::after {
+  position: absolute;
+  inset-inline-end: 0;
+  content: "";
+  border-style: solid;
+  border-width: 0;
+  border-block-start-width: 0px;
+}
+
+button::before {
+  inset-block-start: 0;
+  inset-block-end: var(--pf-c-table__compound-expansion-toggle__button--before--Bottom);
+  inset-inline-start: var(--pf-c-table__compound-expansion-toggle__button--before--Left);
+  border-color: var(--pf-c-table__compound-expansion-toggle__button--before--BorderColor);
+  border-inline-start-width: var(--pf-c-table__compound-expansion-toggle__button--before--BorderLeftWidth);
+  border-inline-end-width: var(--pf-c-table__compound-expansion-toggle__button--before--BorderRightWidth);
+}
+
+:host([expanded]) {
+  border-bottom: var(--pf-c-table--BackgroundColor) solid var(--pf-c-table__compound-expansion-toggle__button--before--border-width--base);
+  z-index: 1;
+}
+
+button::after {
+  inset-block-start: var(--pf-c-table__compound-expansion-toggle__button--after--Top);
+  inset-inline-start: var(--pf-c-table__compound-expansion-toggle__button--after--Left);
+  pointer-events: none;
+  border-color: var(--pf-c-table__compound-expansion-toggle__button--after--BorderColor);
+  border-block-start-width: var(--pf-c-table__compound-expansion-toggle__button--after--BorderTopWidth);
+}
+
+button:active,
+button:focus,
+button:hover {
+  outline: 0;
+}
+
+button:active {
+  color: var(--pf-c-table__button--active--Color);
+}
+
+button:focus {
+  color: var(--pf-c-table__button--focus--Color);
+}
+
+button:hover {
+  color: var(--pf-c-table__button--hover--Color);
+}
+
+`;
 import { RequestExpandEvent } from './pf-tr.js';
 let PfTd = class PfTd extends LitElement {
     constructor() {
@@ -35,7 +140,7 @@ _PfTd_onClick = function _PfTd_onClick() {
     this.dispatchEvent(event);
 };
 PfTd.styles = [styles];
-PfTd.version = "4.1.0";
+PfTd.version = "4.3.0";
 __decorate([
     property({ attribute: 'compound-expand' })
 ], PfTd.prototype, "compoundExpand", void 0);

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

@@ -1 +1 @@
-{"version":3,"file":"pf-td.js","sourceRoot":"","sources":["pf-td.ts"],"names":[],"mappings":";;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAuB,MAAM,KAAK,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;;;AAGtD,OAAO,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAC;AAOzC,IAAM,IAAI,GAAV,MAAM,IAAK,SAAQ,UAAU;IAA7B;;;QAKuC,aAAQ,GAAG,KAAK,CAAC;;IAEpD,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACpC,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,IAAI,CAAA;wBACb,uBAAA,IAAI,sCAAS;;;KAGhC,CAAC,CAAC,CAAC,IAAI,CAAA;;KAEP,CAAC;IACJ,CAAC;;;;IAGC,MAAM,GAAG,GAAG,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;IAClC,MAAM,IAAI,GAAG,IAAI,CAAC,cAAc,CAAC;IACjC,MAAM,KAAK,GACP,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,kBAAkB,EAAE;QACjC,CAAC,CAAC,IAAI,kBAAkB,CAAC,GAAG,CAAC,QAAQ,KAAK,IAAI,IAAI,IAAI,IAAI,KAAK,EAAE,GAAG,CAAC,CAAC;IACxE,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;AAC5B,CAAC;AA5Be,WAAM,GAAoB,CAAC,MAAM,CAAC,AAA5B,CAA6B;;AAEP;IAA3C,QAAQ,CAAC,EAAE,SAAS,EAAE,iBAAiB,EAAE,CAAC;4CAAyB;AAExB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;sCAAkB;AALlD,IAAI;IADhB,aAAa,CAAC,OAAO,CAAC;GACV,IAAI","sourcesContent":["import { LitElement, html, type TemplateResult } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\n\nimport styles from './pf-td.css';\nimport { RequestExpandEvent } from './pf-tr.js';\n\n/**\n * Table data cell\n * @slot - Place element content here\n */\n@customElement('pf-td')\nexport class PfTd extends LitElement {\n  static readonly styles: CSSStyleSheet[] = [styles];\n\n  @property({ attribute: 'compound-expand' }) compoundExpand?: string;\n\n  @property({ type: Boolean, reflect: true }) expanded = false;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.setAttribute('role', 'cell');\n  }\n\n  render(): TemplateResult<1> {\n    return this.compoundExpand ? html`\n      <button @click=\"${this.#onClick}\">\n        <slot></slot>\n      </button>\n    ` : html`\n      <slot></slot>\n    `;\n  }\n\n  #onClick() {\n    const row = this.closest('pf-tr');\n    const cell = this.compoundExpand;\n    const event =\n        !row ? new RequestExpandEvent()\n      : new RequestExpandEvent(row.expanded === cell || cell || false, row);\n    this.dispatchEvent(event);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-td': PfTd;\n  }\n}\n"]}
+{"version":3,"file":"pf-td.js","sourceRoot":"","sources":["pf-td.ts"],"names":[],"mappings":";;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAuB,MAAM,KAAK,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAGtD,OAAO,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAC;AAOzC,IAAM,IAAI,GAAV,MAAM,IAAK,SAAQ,UAAU;IAA7B;;;QAKuC,aAAQ,GAAG,KAAK,CAAC;;IAEpD,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACpC,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,IAAI,CAAA;wBACb,uBAAA,IAAI,sCAAS;;;KAGhC,CAAC,CAAC,CAAC,IAAI,CAAA;;KAEP,CAAC;IACJ,CAAC;;;;IAGC,MAAM,GAAG,GAAG,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;IAClC,MAAM,IAAI,GAAG,IAAI,CAAC,cAAc,CAAC;IACjC,MAAM,KAAK,GACP,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,kBAAkB,EAAE;QACjC,CAAC,CAAC,IAAI,kBAAkB,CAAC,GAAG,CAAC,QAAQ,KAAK,IAAI,IAAI,IAAI,IAAI,KAAK,EAAE,GAAG,CAAC,CAAC;IACxE,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;AAC5B,CAAC;AA5Be,WAAM,GAAoB,CAAC,MAAM,CAAC,AAA5B,CAA6B;;AAEP;IAA3C,QAAQ,CAAC,EAAE,SAAS,EAAE,iBAAiB,EAAE,CAAC;4CAAyB;AAExB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;sCAAkB;AALlD,IAAI;IADhB,aAAa,CAAC,OAAO,CAAC;GACV,IAAI","sourcesContent":["import { LitElement, html, type TemplateResult } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\n\nimport styles from './pf-td.css';\nimport { RequestExpandEvent } from './pf-tr.js';\n\n/**\n * Table data cell\n * @slot - Place element content here\n */\n@customElement('pf-td')\nexport class PfTd extends LitElement {\n  static readonly styles: CSSStyleSheet[] = [styles];\n\n  @property({ attribute: 'compound-expand' }) compoundExpand?: string;\n\n  @property({ type: Boolean, reflect: true }) expanded = false;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.setAttribute('role', 'cell');\n  }\n\n  render(): TemplateResult<1> {\n    return this.compoundExpand ? html`\n      <button @click=\"${this.#onClick}\">\n        <slot></slot>\n      </button>\n    ` : html`\n      <slot></slot>\n    `;\n  }\n\n  #onClick() {\n    const row = this.closest('pf-tr');\n    const cell = this.compoundExpand;\n    const event =\n        !row ? new RequestExpandEvent()\n      : new RequestExpandEvent(row.expanded === cell || cell || false, row);\n    this.dispatchEvent(event);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-td': PfTd;\n  }\n}\n"]}

package/pf-table/pf-th.js

@@ -8,7 +8,100 @@ import { consume } from '@lit/context';
 import { thRoleContext } from './context.js';
 import '@patternfly/elements/pf-button/pf-button.js';
 import { css } from "lit";
-const styles = css `:host {\n  font-weight: bold;\n  padding: 1rem;\n  position: relative;\n}\n\n:host(:empty) {\n  padding: 0;\n}\n\n.sortable {\n  padding-inline-end: 1.5em;\n}\n\n.sortable slot {\n  display: inline;\n  margin-inline-end: 1.5em;\n}\n\nbutton {\n  width: 100%;\n  padding: var(--pf-c-table--cell--PaddingTop) var(--pf-c-table--cell--PaddingRight) var(--pf-c-table--cell--PaddingBottom) var(--pf-c-table--cell--PaddingLeft);\n  font-size: inherit;\n  font-weight: inherit;\n  color: var(--pf-c-table__button--Color);\n  text-align: left;\n  white-space: inherit;\n  -webkit-user-select: text;\n  -moz-user-select: text;\n  -ms-user-select: text;\n  user-select: text;\n  background-color: var(--pf-c-table__button--BackgroundColor);\n  border: 0;\n}\n\nbutton::before {\n  position: absolute;\n  inset: 0;\n  cursor: pointer;\n  content: '';\n}\n\nbutton:hover {\n  --pf-c-table__sort-indicator--Color: var(--pf-c-table__sort__button--hover__sort-indicator--Color);\n  --pf-c-table__sort__button__text--Color: var(--pf-c-table__sort__button--hover__text--Color);\n}\n\nbutton:active {\n  --pf-c-table__sort-indicator--Color: var(--pf-c-table__sort__button--active__sort-indicator--Color);\n  --pf-c-table__sort__button__text--Color: var(--pf-c-table__sort__button--active__text--Color);\n}\n\nbutton:focus {\n  --pf-c-table__sort-indicator--Color: var(--pf-c-table__sort__button--focus__sort-indicator--Color);\n  --pf-c-table__sort__button__text--Color: var(--pf-c-table__sort__button--focus__text--Color);\n}\n\nbutton.sortable {\n  --pf-c-table--cell--PaddingTop: var(--pf-c-table__sort__button--PaddingTop);\n  --pf-c-table--cell--PaddingRight: var(--pf-c-table__sort__button--PaddingRight);\n  --pf-c-table--cell--PaddingBottom: var(--pf-c-table__sort__button--PaddingBottom);\n  --pf-c-table--cell--PaddingLeft: var(--pf-c-table__sort__button--PaddingLeft);\n\n  display: flex;\n  width: auto;\n  margin-top: var(--pf-c-table__sort__button--MarginTop);\n  margin-bottom: var(--pf-c-table__sort__button--MarginBottom);\n  margin-left: var(--pf-c-table__sort__button--MarginLeft);\n}\n\nbutton.selected {\n  --pf-c-table__sort-indicator--Color: var(--pf-c-table__sort--m-selected__sort-indicator--Color);\n  --pf-c-table__sort__button__text--Color: var(--pf-c-table__sort--m-selected__button__text--Color);\n\n  color: var(--pf-c-table__sort--m-selected__button--Color);\n}\n\n#sort-indicator {\n  width: 0;\n  margin-inline-start: -1em;\n  overflow: visible;\n  color: var(--pf-c-table__sort-indicator--Color);\n}\n\n.visually-hidden {\n  position: fixed;\n  top: 0;\n  left: 0;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n}\n`;
+const styles = css `:host {
+  font-weight: bold;
+  padding: 1rem;
+  position: relative;
+}
+
+:host(:empty) {
+  padding: 0;
+}
+
+.sortable {
+  padding-inline-end: 1.5em;
+}
+
+.sortable slot {
+  display: inline;
+  margin-inline-end: 1.5em;
+}
+
+button {
+  width: 100%;
+  padding: var(--pf-c-table--cell--PaddingTop) var(--pf-c-table--cell--PaddingRight) var(--pf-c-table--cell--PaddingBottom) var(--pf-c-table--cell--PaddingLeft);
+  font-size: inherit;
+  font-weight: inherit;
+  color: var(--pf-c-table__button--Color);
+  text-align: left;
+  white-space: inherit;
+  -webkit-user-select: text;
+  -moz-user-select: text;
+  -ms-user-select: text;
+  user-select: text;
+  background-color: var(--pf-c-table__button--BackgroundColor);
+  border: 0;
+}
+
+button::before {
+  position: absolute;
+  inset: 0;
+  cursor: pointer;
+  content: '';
+}
+
+button:hover {
+  --pf-c-table__sort-indicator--Color: var(--pf-c-table__sort__button--hover__sort-indicator--Color);
+  --pf-c-table__sort__button__text--Color: var(--pf-c-table__sort__button--hover__text--Color);
+}
+
+button:active {
+  --pf-c-table__sort-indicator--Color: var(--pf-c-table__sort__button--active__sort-indicator--Color);
+  --pf-c-table__sort__button__text--Color: var(--pf-c-table__sort__button--active__text--Color);
+}
+
+button:focus {
+  --pf-c-table__sort-indicator--Color: var(--pf-c-table__sort__button--focus__sort-indicator--Color);
+  --pf-c-table__sort__button__text--Color: var(--pf-c-table__sort__button--focus__text--Color);
+}
+
+button.sortable {
+  --pf-c-table--cell--PaddingTop: var(--pf-c-table__sort__button--PaddingTop);
+  --pf-c-table--cell--PaddingRight: var(--pf-c-table__sort__button--PaddingRight);
+  --pf-c-table--cell--PaddingBottom: var(--pf-c-table__sort__button--PaddingBottom);
+  --pf-c-table--cell--PaddingLeft: var(--pf-c-table__sort__button--PaddingLeft);
+
+  display: flex;
+  width: auto;
+  margin-top: var(--pf-c-table__sort__button--MarginTop);
+  margin-bottom: var(--pf-c-table__sort__button--MarginBottom);
+  margin-left: var(--pf-c-table__sort__button--MarginLeft);
+}
+
+button.selected {
+  --pf-c-table__sort-indicator--Color: var(--pf-c-table__sort--m-selected__sort-indicator--Color);
+  --pf-c-table__sort__button__text--Color: var(--pf-c-table__sort--m-selected__button__text--Color);
+
+  color: var(--pf-c-table__sort--m-selected__button--Color);
+}
+
+#sort-indicator {
+  width: 0;
+  margin-inline-start: -1em;
+  overflow: visible;
+  color: var(--pf-c-table__sort-indicator--Color);
+}
+
+.visually-hidden {
+  position: fixed;
+  top: 0;
+  left: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+`;
 const DIRECTIONS = { asc: 'desc', desc: 'asc' };
 export class RequestSortEvent extends Event {
     constructor(key, direction) {
@@ -69,7 +162,7 @@ _PfTh_onClick = function _PfTh_onClick() {
     }
 };
 PfTh.styles = [styles];
-PfTh.version = "4.1.0";
+PfTh.version = "4.3.0";
 __decorate([
     property({ type: Boolean, reflect: true })
 ], PfTh.prototype, "sortable", void 0);

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, type TemplateResult } 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 { consume } from '@lit/context';\n\nimport { thRoleContext } from './context.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: CSSStyleSheet[] = [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  @consume({ context: thRoleContext })\n  private contextualRole: 'colheader' | 'rowheader' = 'rowheader';\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.setAttribute('role', this.contextualRole);\n  }\n\n  render(): TemplateResult<1> {\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(): void {\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, type TemplateResult } 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 { consume } from '@lit/context';\n\nimport { thRoleContext } from './context.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: CSSStyleSheet[] = [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  @consume({ context: thRoleContext })\n  private contextualRole: 'colheader' | 'rowheader' = 'rowheader';\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.setAttribute('role', this.contextualRole);\n  }\n\n  render(): TemplateResult<1> {\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(): void {\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.js

@@ -4,7 +4,25 @@ import { LitElement, html } from 'lit';
 import { customElement } from 'lit/decorators/custom-element.js';
 import { thRoleContext } from './context.js';
 import { css } from "lit";
-const styles = css `:host {\n  --pf-c-table--cell--MinWidth: var(--pf-c-table--m-truncate--cell--MinWidth);\n  --pf-c-table--cell--MaxWidth: var(--pf-c-table--m-truncate--cell--MaxWidth);\n  --pf-c-table--cell--Overflow: hidden;\n  --pf-c-table--cell--TextOverflow: ellipsis;\n  --pf-c-table--cell--WhiteSpace: nowrap;\n  --pf-c-table--cell--FontSize: var(--pf-c-table--thead--cell--FontSize, var(--pf-global--FontSize--sm, 0.875rem));\n  --pf-c-table--cell--FontWeight: var(--pf-c-table--thead--cell--FontWeight, var(--pf-global--FontWeight--bold, 700));\n  vertical-align: bottom;\n  display: grid;\n  visibility: visible;\n}\n\n@media (max-width: 768px) {\n  :host {\n    display: none;\n    visibility: hidden;\n  }\n}`;
+const styles = css `:host {
+  --pf-c-table--cell--MinWidth: var(--pf-c-table--m-truncate--cell--MinWidth);
+  --pf-c-table--cell--MaxWidth: var(--pf-c-table--m-truncate--cell--MaxWidth);
+  --pf-c-table--cell--Overflow: hidden;
+  --pf-c-table--cell--TextOverflow: ellipsis;
+  --pf-c-table--cell--WhiteSpace: nowrap;
+  --pf-c-table--cell--FontSize: var(--pf-c-table--thead--cell--FontSize, var(--pf-global--FontSize--sm, 0.875rem));
+  --pf-c-table--cell--FontWeight: var(--pf-c-table--thead--cell--FontWeight, var(--pf-global--FontWeight--bold, 700));
+  vertical-align: bottom;
+  display: grid;
+  visibility: visible;
+}
+
+@media (max-width: 768px) {
+  :host {
+    display: none;
+    visibility: hidden;
+  }
+}`;
 import { provide } from '@lit/context';
 let PfThead = class PfThead extends LitElement {
     constructor() {
@@ -29,7 +47,7 @@ _PfThead_onSlotchange = function _PfThead_onSlotchange() {
     }
 };
 PfThead.styles = [styles];
-PfThead.version = "4.1.0";
+PfThead.version = "4.3.0";
 __decorate([
     provide({ context: thRoleContext })
 ], PfThead.prototype, "thRowContext", void 0);

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

@@ -1 +1 @@
-{"version":3,"file":"pf-thead.js","sourceRoot":"","sources":["pf-thead.ts"],"names":[],"mappings":";;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAuB,MAAM,KAAK,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AAEjE,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;;;AAG7C,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAOhC,IAAM,OAAO,GAAb,MAAM,OAAQ,SAAQ,UAAU;IAAhC;;;QAGwC,iBAAY,GAAG,WAAW,CAAC;;IAExE,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;IACxC,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;0BACW,uBAAA,IAAI,iDAAc;KACvC,CAAC;IACJ,CAAC;;;;IAGC,KAAK,MAAM,EAAE,IAAI,IAAI,CAAC,gBAAgB,CAAC,gBAAgB,CAAC,EAAE,CAAC;QACzD,EAAE,CAAC,YAAY,CAAC,MAAM,EAAE,cAAc,CAAC,CAAC;IAC1C,CAAC;AACH,CAAC;AAnBe,cAAM,GAAoB,CAAC,MAAM,CAAC,AAA5B,CAA6B;;AAEN;IAA5C,OAAO,CAAC,EAAE,OAAO,EAAE,aAAa,EAAE,CAAC;6CAAoC;AAH7D,OAAO;IADnB,aAAa,CAAC,UAAU,CAAC;GACb,OAAO","sourcesContent":["import { LitElement, html, type TemplateResult } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\n\nimport { thRoleContext } from './context.js';\n\nimport styles from './pf-thead.css';\nimport { provide } from '@lit/context';\n\n/**\n * Table head\n * @slot - Place element content here\n */\n@customElement('pf-thead')\nexport class PfThead extends LitElement {\n  static readonly styles: CSSStyleSheet[] = [styles];\n\n  @provide({ context: thRoleContext }) private thRowContext = 'colheader';\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.setAttribute('role', 'rowgroup');\n  }\n\n  render(): TemplateResult<1> {\n    return html`\n      <slot @slotchange=${this.#onSlotchange}></slot>\n    `;\n  }\n\n  #onSlotchange() {\n    for (const th of this.querySelectorAll(':scope > pf-th')) {\n      th.setAttribute('role', 'columnheader');\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-thead': PfThead;\n  }\n}\n"]}
+{"version":3,"file":"pf-thead.js","sourceRoot":"","sources":["pf-thead.ts"],"names":[],"mappings":";;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAuB,MAAM,KAAK,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AAEjE,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;;;;;;;;;;;;;;;;;;;;;AAG7C,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAOhC,IAAM,OAAO,GAAb,MAAM,OAAQ,SAAQ,UAAU;IAAhC;;;QAGwC,iBAAY,GAAG,WAAW,CAAC;;IAExE,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;IACxC,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;0BACW,uBAAA,IAAI,iDAAc;KACvC,CAAC;IACJ,CAAC;;;;IAGC,KAAK,MAAM,EAAE,IAAI,IAAI,CAAC,gBAAgB,CAAC,gBAAgB,CAAC,EAAE,CAAC;QACzD,EAAE,CAAC,YAAY,CAAC,MAAM,EAAE,cAAc,CAAC,CAAC;IAC1C,CAAC;AACH,CAAC;AAnBe,cAAM,GAAoB,CAAC,MAAM,CAAC,AAA5B,CAA6B;;AAEN;IAA5C,OAAO,CAAC,EAAE,OAAO,EAAE,aAAa,EAAE,CAAC;6CAAoC;AAH7D,OAAO;IADnB,aAAa,CAAC,UAAU,CAAC;GACb,OAAO","sourcesContent":["import { LitElement, html, type TemplateResult } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\n\nimport { thRoleContext } from './context.js';\n\nimport styles from './pf-thead.css';\nimport { provide } from '@lit/context';\n\n/**\n * Table head\n * @slot - Place element content here\n */\n@customElement('pf-thead')\nexport class PfThead extends LitElement {\n  static readonly styles: CSSStyleSheet[] = [styles];\n\n  @provide({ context: thRoleContext }) private thRowContext = 'colheader';\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.setAttribute('role', 'rowgroup');\n  }\n\n  render(): TemplateResult<1> {\n    return html`\n      <slot @slotchange=${this.#onSlotchange}></slot>\n    `;\n  }\n\n  #onSlotchange() {\n    for (const th of this.querySelectorAll(':scope > pf-th')) {\n      th.setAttribute('role', 'columnheader');\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-thead': PfThead;\n  }\n}\n"]}

package/pf-table/pf-tr.js

@@ -4,7 +4,94 @@ import { LitElement, html } from 'lit';
 import { customElement } from 'lit/decorators/custom-element.js';
 import { property } from 'lit/decorators/property.js';
 import { css } from "lit";
-const styles = css `:host {\n  display: grid;\n  align-items: center;\n  padding-inline-start: calc(50px * var(--_pf-table--expandable-rows, 0));\n}\n\n::slotted(*) {\n  height: 100%;\n}\n\n@media (min-width: 768px) {\n  :host {\n    /* TODO: provide ability to override */\n    grid-template-columns: repeat(var(--_pf-table--number-of-columns), 1fr);\n  }\n}\n\n#container {\n  display: contents;\n}\n\n:host([expandable]),\n#expansion {\n  position: relative;\n}\n\n#expansion {\n  display: block;\n  margin-inline-start: calc(-1 * 50px * var(--_pf-table--expandable-rows, 0));\n  grid-auto-flow: row;\n  grid-template-columns: auto;\n  padding: 0px 1.5rem;\n  display: grid;\n  grid-column: 1/-1;\n}\n\n:host(:not([expanded])),\n:host([expanded]) #expansion {\n  border-block-end: 1px solid #d2d2d2;\n}\n\n:host([expanded]) #expansion::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  border-block-start: 1px solid #d2d2d2;\n  inset-block-start: -1px;\n}\n\n\n#expansion::slotted(pf-td) {\n  padding-block-start: 0;\n  padding-inline-start: 0;\n}\n\n:host([expandable][expanded])::before {\n  position: absolute;\n  inset-block-start: -1px;\n  inset-inline-end: 0;\n  inset-block-end: -1px;\n  inset-inline-start: 0;\n  content: "";\n  border-inline-start: 3px solid #06c;\n  pointer-events: none;\n  z-index: 1;\n}\n\n#expansion::slotted(pf-table) {\n  margin-block-end: -1px;\n}\n\n#toggle-cell {\n  z-index: 2;\n  position: absolute;\n  inset-inline-start: 0;\n  inset-block-start: 1.5rem;\n  padding: 0;\n}\n\n#toggle-icon {\n  transition: .2s ease-in 0s;\n  vertical-align: -0.125em;\n}\n\n:host([expanded]) #toggle-icon {\n  transform: rotate(90deg);\n}\n`;
+const styles = css `:host {
+  display: grid;
+  align-items: center;
+  padding-inline-start: calc(50px * var(--_pf-table--expandable-rows, 0));
+}
+
+::slotted(*) {
+  height: 100%;
+}
+
+@media (min-width: 768px) {
+  :host {
+    /* TODO: provide ability to override */
+    grid-template-columns: repeat(var(--_pf-table--number-of-columns), 1fr);
+  }
+}
+
+#container {
+  display: contents;
+}
+
+:host([expandable]),
+#expansion {
+  position: relative;
+}
+
+#expansion {
+  display: block;
+  margin-inline-start: calc(-1 * 50px * var(--_pf-table--expandable-rows, 0));
+  grid-auto-flow: row;
+  grid-template-columns: auto;
+  padding: 0px 1.5rem;
+  display: grid;
+  grid-column: 1/-1;
+}
+
+:host(:not([expanded])),
+:host([expanded]) #expansion {
+  border-block-end: 1px solid #d2d2d2;
+}
+
+:host([expanded]) #expansion::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-block-start: 1px solid #d2d2d2;
+  inset-block-start: -1px;
+}
+
+
+#expansion::slotted(pf-td) {
+  padding-block-start: 0;
+  padding-inline-start: 0;
+}
+
+:host([expandable][expanded])::before {
+  position: absolute;
+  inset-block-start: -1px;
+  inset-inline-end: 0;
+  inset-block-end: -1px;
+  inset-inline-start: 0;
+  content: "";
+  border-inline-start: 3px solid #06c;
+  pointer-events: none;
+  z-index: 1;
+}
+
+#expansion::slotted(pf-table) {
+  margin-block-end: -1px;
+}
+
+#toggle-cell {
+  z-index: 2;
+  position: absolute;
+  inset-inline-start: 0;
+  inset-block-start: 1.5rem;
+  padding: 0;
+}
+
+#toggle-icon {
+  transition: .2s ease-in 0s;
+  vertical-align: -0.125em;
+}
+
+:host([expanded]) #toggle-icon {
+  transform: rotate(90deg);
+}
+`;
 import { ifDefined } from 'lit/directives/if-defined.js';
 import '@patternfly/elements/pf-button/pf-button.js';
 import '@patternfly/elements/pf-icon/pf-icon.js';
@@ -138,7 +225,7 @@ _PfTr_onClick = function _PfTr_onClick() {
     this.dispatchEvent(new RequestExpandEvent());
 };
 PfTr.styles = [styles];
-PfTr.version = "4.1.0";
+PfTr.version = "4.3.0";
 __decorate([
     property({
         reflect: true,

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

@@ -1 +1 @@
-{"version":3,"file":"pf-tr.js","sourceRoot":"","sources":["pf-tr.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, type ComplexAttributeConverter, type PropertyValues } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\n\nimport styles from './pf-tr.css';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nimport '@patternfly/elements/pf-button/pf-button.js';\nimport '@patternfly/elements/pf-icon/pf-icon.js';\n\nexport class RequestExpandEvent extends Event {\n  /**\n   * if provided, the slot name for the compound-expanded cell\n   */\n  public compoundExpanded: string | boolean = false;\n\n  /**\n   * if compoundExpanded is provided, a reference to the row\n   * must also be provided.\n   */\n  public row?: PfTr;\n\n  constructor();\n  constructor(compoundExpanded: string | boolean, row: PfTr);\n  constructor(compoundExpanded?: string | boolean, row?: PfTr) {\n    super('request-expand', {\n      bubbles: true,\n      cancelable: true,\n    });\n    if (row) {\n      this.compoundExpanded = compoundExpanded ?? false;\n      this.row = row;\n    }\n  }\n}\n\nfunction BooleanEnumConverter(...allowedAttributes: string[]): ComplexAttributeConverter {\n  const values = new Set(allowedAttributes);\n  return {\n    fromAttribute(value) {\n      if (value && values.has(value.toLowerCase())) {\n        return value;\n      } else {\n        return value != null;\n      }\n    },\n    toAttribute(value) {\n      if (!value) {\n        return null;\n      } else if (value === 'compound') {\n        return value;\n      } else {\n        return '';\n      }\n    },\n  };\n}\n\nconst StringOrBooleanConverter: ComplexAttributeConverter = {\n  fromAttribute(value) {\n    return value || value !== null;\n  },\n  toAttribute(value) {\n    if (!value) {\n      return null;\n    } else if (typeof value === 'string') {\n      return value;\n    } else {\n      return '';\n    }\n  },\n};\n\n/**\n * Table row\n * @slot - Place element content here\n */\n@customElement('pf-tr')\nexport class PfTr extends LitElement {\n  static readonly styles: CSSStyleSheet[] = [styles];\n\n  @property({\n    reflect: true,\n    converter: BooleanEnumConverter('compound'),\n  }) expandable: boolean | 'compound' = false;\n\n  @property({\n    reflect: true,\n    converter: StringOrBooleanConverter,\n  }) expanded: boolean | string = false;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.#expandableChanged();\n  }\n\n  override willUpdate(changed: PropertyValues<this>): void {\n    if (changed.has('expandable')) {\n      this.#expandableChanged();\n    }\n    if (changed.has('expanded')) {\n      this.#expandedChanged();\n    }\n  }\n\n  render(): (false | '' | import('lit-html').TemplateResult<1>)[] {\n    return [\n      this.expandable && this.expandable !== 'compound' && html`\n        <pf-td id=\"toggle-cell\">\n          <pf-button id=\"toggle-button\"\n                     aria-expanded=${String(this.expanded) as 'true' | 'false'}\n                     plain\n                     @click=${this.#onClick}>\n            <pf-icon id=\"toggle-icon\"\n                     icon=\"angle-right\"\n                     size=\"md\"\n            ></pf-icon>\n          </pf-button>\n        </pf-td>\n      `,\n\n      html`\n        <div id=\"container\" role=\"${ifDefined(this.expandable ? 'row' : undefined)}\">\n          <slot></slot>\n        </div>\n      `,\n\n      this.expandable && this.expandable !== 'compound' && this.expanded && html`\n        <div id=\"expansion\" role=\"row\"><slot name=\"expansion\"></slot></div>\n      `,\n\n      this.expandable === 'compound' && html`\n        <div id=\"expansion\">${!this.expanded ? '' : html`\n          <slot name=\"${this.expanded}\"></slot>`}\n        </div>\n      `,\n    ].filter(Boolean);\n  }\n\n  #expandedChanged() {\n    // disallow setting `expanded` unless `expandable` is also set\n    if (this.expanded && !this.expandable) {\n      this.expanded = false;\n    }\n  }\n\n  #expandableChanged() {\n    switch (this.expandable) {\n      case 'compound': {\n        // TODO: do we need tab roles now?\n        break;\n      }\n      case true:\n        this.setAttribute('role', 'rowgroup');\n        break;\n      default:\n        this.setAttribute('role', 'row');\n    }\n  }\n\n  #onClick() {\n    this.dispatchEvent(new RequestExpandEvent());\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-tr': PfTr;\n  }\n}\n"]}
+{"version":3,"file":"pf-tr.js","sourceRoot":"","sources":["pf-tr.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, type ComplexAttributeConverter, type PropertyValues } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\n\nimport styles from './pf-tr.css';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nimport '@patternfly/elements/pf-button/pf-button.js';\nimport '@patternfly/elements/pf-icon/pf-icon.js';\n\nexport class RequestExpandEvent extends Event {\n  /**\n   * if provided, the slot name for the compound-expanded cell\n   */\n  public compoundExpanded: string | boolean = false;\n\n  /**\n   * if compoundExpanded is provided, a reference to the row\n   * must also be provided.\n   */\n  public row?: PfTr;\n\n  constructor();\n  constructor(compoundExpanded: string | boolean, row: PfTr);\n  constructor(compoundExpanded?: string | boolean, row?: PfTr) {\n    super('request-expand', {\n      bubbles: true,\n      cancelable: true,\n    });\n    if (row) {\n      this.compoundExpanded = compoundExpanded ?? false;\n      this.row = row;\n    }\n  }\n}\n\nfunction BooleanEnumConverter(...allowedAttributes: string[]): ComplexAttributeConverter {\n  const values = new Set(allowedAttributes);\n  return {\n    fromAttribute(value) {\n      if (value && values.has(value.toLowerCase())) {\n        return value;\n      } else {\n        return value != null;\n      }\n    },\n    toAttribute(value) {\n      if (!value) {\n        return null;\n      } else if (value === 'compound') {\n        return value;\n      } else {\n        return '';\n      }\n    },\n  };\n}\n\nconst StringOrBooleanConverter: ComplexAttributeConverter = {\n  fromAttribute(value) {\n    return value || value !== null;\n  },\n  toAttribute(value) {\n    if (!value) {\n      return null;\n    } else if (typeof value === 'string') {\n      return value;\n    } else {\n      return '';\n    }\n  },\n};\n\n/**\n * Table row\n * @slot - Place element content here\n */\n@customElement('pf-tr')\nexport class PfTr extends LitElement {\n  static readonly styles: CSSStyleSheet[] = [styles];\n\n  @property({\n    reflect: true,\n    converter: BooleanEnumConverter('compound'),\n  }) expandable: boolean | 'compound' = false;\n\n  @property({\n    reflect: true,\n    converter: StringOrBooleanConverter,\n  }) expanded: boolean | string = false;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.#expandableChanged();\n  }\n\n  override willUpdate(changed: PropertyValues<this>): void {\n    if (changed.has('expandable')) {\n      this.#expandableChanged();\n    }\n    if (changed.has('expanded')) {\n      this.#expandedChanged();\n    }\n  }\n\n  render(): (false | '' | import('lit-html').TemplateResult<1>)[] {\n    return [\n      this.expandable && this.expandable !== 'compound' && html`\n        <pf-td id=\"toggle-cell\">\n          <pf-button id=\"toggle-button\"\n                     aria-expanded=${String(this.expanded) as 'true' | 'false'}\n                     plain\n                     @click=${this.#onClick}>\n            <pf-icon id=\"toggle-icon\"\n                     icon=\"angle-right\"\n                     size=\"md\"\n            ></pf-icon>\n          </pf-button>\n        </pf-td>\n      `,\n\n      html`\n        <div id=\"container\" role=\"${ifDefined(this.expandable ? 'row' : undefined)}\">\n          <slot></slot>\n        </div>\n      `,\n\n      this.expandable && this.expandable !== 'compound' && this.expanded && html`\n        <div id=\"expansion\" role=\"row\"><slot name=\"expansion\"></slot></div>\n      `,\n\n      this.expandable === 'compound' && html`\n        <div id=\"expansion\">${!this.expanded ? '' : html`\n          <slot name=\"${this.expanded}\"></slot>`}\n        </div>\n      `,\n    ].filter(Boolean);\n  }\n\n  #expandedChanged() {\n    // disallow setting `expanded` unless `expandable` is also set\n    if (this.expanded && !this.expandable) {\n      this.expanded = false;\n    }\n  }\n\n  #expandableChanged() {\n    switch (this.expandable) {\n      case 'compound': {\n        // TODO: do we need tab roles now?\n        break;\n      }\n      case true:\n        this.setAttribute('role', 'rowgroup');\n        break;\n      default:\n        this.setAttribute('role', 'row');\n    }\n  }\n\n  #onClick() {\n    this.dispatchEvent(new RequestExpandEvent());\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-tr': PfTr;\n  }\n}\n"]}

package/pf-tabs/pf-tab-panel.css

@@ -7,5 +7,6 @@
 }
 
 :host([box="light"]) {
+  /** Background color for light tab content */
   background-color: var(--pf-c-tab-content--m-light-300, var(--pf-global--BackgroundColor--light-300, #f0f0f0));
 }

package/pf-tabs/pf-tab-panel.d.ts

@@ -1,8 +1,6 @@
 import { LitElement, type TemplateResult } from 'lit';
 /**
  * @slot - Tab panel content
- * @cssprop {<color>} [--pf-c-tab-content--m-light-300=#f0f0f0]
- * @csspart container - container for the panel content
  */
 export declare class PfTabPanel extends LitElement {
     static readonly styles: CSSStyleSheet[];

package/pf-tabs/pf-tab-panel.js

@@ -6,11 +6,27 @@ import { consume } from '@lit/context';
 import { getRandomId } from '@patternfly/pfe-core/functions/random.js';
 import { context } from './context.js';
 import { css } from "lit";
-const styles = css `:host {\n  display: block;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n:host([box="light"]) {\n  background-color: var(--pf-c-tab-content--m-light-300, var(--pf-global--BackgroundColor--light-300, #f0f0f0));\n}\n`;
+const styles = css `:host {
+  display: block;
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+:host([box="light"]) {
+  /** Background color for light tab content */
+  background-color: var(--pf-c-tab-content--m-light-300, var(--pf-global--BackgroundColor--light-300, #f0f0f0));
+}
+`;
 let PfTabPanel = class PfTabPanel extends LitElement {
     render() {
         return html `
-      <slot></slot>
+      <!-- container for the panel content -->
+      <div part="container">
+        <!-- Tab panel content -->
+        <slot></slot>
+      </div>
     `;
     }
     connectedCallback() {
@@ -40,7 +56,7 @@ let PfTabPanel = class PfTabPanel extends LitElement {
     }
 };
 PfTabPanel.styles = [styles];
-PfTabPanel.version = "4.1.0";
+PfTabPanel.version = "4.3.0";
 __decorate([
     consume({ context, subscribe: true }),
     state()

package/pf-tabs/pf-tab-panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"pf-tab-panel.js","sourceRoot":"","sources":["pf-tab-panel.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAuB,MAAM,KAAK,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAEvC,OAAO,EAAE,WAAW,EAAE,MAAM,0CAA0C,CAAC;AAEvE,OAAO,EAAsB,OAAO,EAAE,MAAM,cAAc,CAAC;;;AAUpD,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,UAAU;IAMxC,MAAM;QACJ,OAAO,IAAI,CAAA;;KAEV,CAAC;IACJ,CAAC;IAEQ,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,EAAE,KAAP,IAAI,CAAC,EAAE,GAAK,WAAW,CAAC,cAAc,CAAC,EAAC;QACxC,IAAI,CAAC,MAAM,KAAX,IAAI,CAAC,MAAM,GAAK,IAAI,EAAC;QAErB;;;;;;;;UAQE;QACF,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC;IACpB,CAAC;IAEQ,UAAU;QACjB,MAAM,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC,GAAG,IAAI,EAAE,CAAC;QACzC,IAAI,CAAC,eAAe,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC;QAC3C,IAAI,GAAG,EAAE,CAAC;YACR,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;QAChC,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC;QAC9B,CAAC;IACH,CAAC;;AApCe,iBAAM,GAAoB,CAAC,MAAM,CAAC,AAA5B,CAA6B;;AAGlC;IADhB,OAAO,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;IACrC,KAAK,EAAE;uCAA6B;AAJ1B,UAAU;IADtB,aAAa,CAAC,cAAc,CAAC;GACjB,UAAU","sourcesContent":["import { LitElement, html, type TemplateResult } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { state } from 'lit/decorators/state.js';\nimport { consume } from '@lit/context';\n\nimport { getRandomId } from '@patternfly/pfe-core/functions/random.js';\n\nimport { type PfTabsContext, context } from './context.js';\n\nimport styles from './pf-tab-panel.css';\n\n/**\n * @slot - Tab panel content\n * @cssprop {<color>} [--pf-c-tab-content--m-light-300=#f0f0f0]\n * @csspart container - container for the panel content\n */\n@customElement('pf-tab-panel')\nexport class PfTabPanel extends LitElement {\n  static readonly styles: CSSStyleSheet[] = [styles];\n\n  @consume({ context, subscribe: true })\n  @state() private ctx?: PfTabsContext;\n\n  render(): TemplateResult<1> {\n    return html`\n      <slot></slot>\n    `;\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.id ||= getRandomId('pf-tab-panel');\n    this.hidden ??= true;\n\n    /*\n     To make it easy for screen reader users to navigate from a tab\n     to the beginning of content in the active tabpanel, the tabpanel\n     element has tabindex=\"0\" to include the panel in the page Tab sequence.\n     It is recommended that all tabpanel elements in a tab set are focusable\n     if there are any panels in the set that contain content where the first\n     element in the panel is not focusable.\n     https://www.w3.org/WAI/ARIA/apg/example-index/tabs/tabs-automatic\n    */\n    this.tabIndex = 0;\n  }\n\n  override willUpdate(): void {\n    const { box, vertical } = this.ctx ?? {};\n    this.toggleAttribute('vertical', vertical);\n    if (box) {\n      this.setAttribute('box', box);\n    } else {\n      this.removeAttribute('box');\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-tab-panel': PfTabPanel;\n  }\n}\n"]}
+{"version":3,"file":"pf-tab-panel.js","sourceRoot":"","sources":["pf-tab-panel.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAuB,MAAM,KAAK,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAEvC,OAAO,EAAE,WAAW,EAAE,MAAM,0CAA0C,CAAC;AAEvE,OAAO,EAAsB,OAAO,EAAE,MAAM,cAAc,CAAC;;;;;;;;;;;;;;;AAQpD,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,UAAU;IAMxC,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;;KAMV,CAAC;IACJ,CAAC;IAEQ,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,EAAE,KAAP,IAAI,CAAC,EAAE,GAAK,WAAW,CAAC,cAAc,CAAC,EAAC;QACxC,IAAI,CAAC,MAAM,KAAX,IAAI,CAAC,MAAM,GAAK,IAAI,EAAC;QAErB;;;;;;;;UAQE;QACF,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC;IACpB,CAAC;IAEQ,UAAU;QACjB,MAAM,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC,GAAG,IAAI,EAAE,CAAC;QACzC,IAAI,CAAC,eAAe,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC;QAC3C,IAAI,GAAG,EAAE,CAAC;YACR,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;QAChC,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC;QAC9B,CAAC;IACH,CAAC;;AAxCe,iBAAM,GAAoB,CAAC,MAAM,CAAC,AAA5B,CAA6B;;AAGlC;IADhB,OAAO,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;IACrC,KAAK,EAAE;uCAA6B;AAJ1B,UAAU;IADtB,aAAa,CAAC,cAAc,CAAC;GACjB,UAAU","sourcesContent":["import { LitElement, html, type TemplateResult } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { state } from 'lit/decorators/state.js';\nimport { consume } from '@lit/context';\n\nimport { getRandomId } from '@patternfly/pfe-core/functions/random.js';\n\nimport { type PfTabsContext, context } from './context.js';\n\nimport styles from './pf-tab-panel.css';\n\n/**\n * @slot - Tab panel content\n */\n@customElement('pf-tab-panel')\nexport class PfTabPanel extends LitElement {\n  static readonly styles: CSSStyleSheet[] = [styles];\n\n  @consume({ context, subscribe: true })\n  @state() private ctx?: PfTabsContext;\n\n  render(): TemplateResult<1> {\n    return html`\n      <!-- container for the panel content -->\n      <div part=\"container\">\n        <!-- Tab panel content -->\n        <slot></slot>\n      </div>\n    `;\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.id ||= getRandomId('pf-tab-panel');\n    this.hidden ??= true;\n\n    /*\n     To make it easy for screen reader users to navigate from a tab\n     to the beginning of content in the active tabpanel, the tabpanel\n     element has tabindex=\"0\" to include the panel in the page Tab sequence.\n     It is recommended that all tabpanel elements in a tab set are focusable\n     if there are any panels in the set that contain content where the first\n     element in the panel is not focusable.\n     https://www.w3.org/WAI/ARIA/apg/example-index/tabs/tabs-automatic\n    */\n    this.tabIndex = 0;\n  }\n\n  override willUpdate(): void {\n    const { box, vertical } = this.ctx ?? {};\n    this.toggleAttribute('vertical', vertical);\n    if (box) {\n      this.setAttribute('box', box);\n    } else {\n      this.removeAttribute('box');\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-tab-panel': PfTabPanel;\n  }\n}\n"]}