@patternfly/elements 4.0.2 → 4.2.0

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.0.2";
+PfTr.version = "4.2.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":";;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAuD,MAAM,KAAK,CAAC;AAC5F,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;;;AAGtD,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAEzD,OAAO,6CAA6C,CAAC;AACrD,OAAO,yCAAyC,CAAC;AAEjD,MAAM,OAAO,kBAAmB,SAAQ,KAAK;IAc3C,YAAY,gBAAmC,EAAE,GAAU;QACzD,KAAK,CAAC,gBAAgB,EAAE;YACtB,OAAO,EAAE,IAAI;YACb,UAAU,EAAE,IAAI;SACjB,CAAC,CAAC;QAjBL;;WAEG;QACI,qBAAgB,GAAqB,KAAK,CAAC;QAehD,IAAI,GAAG,EAAE,CAAC;YACR,IAAI,CAAC,gBAAgB,GAAG,gBAAgB,IAAI,KAAK,CAAC;YAClD,IAAI,CAAC,GAAG,GAAG,GAAG,CAAC;QACjB,CAAC;IACH,CAAC;CACF;AAED,SAAS,oBAAoB,CAAC,GAAG,iBAA2B;IAC1D,MAAM,MAAM,GAAG,IAAI,GAAG,CAAC,iBAAiB,CAAC,CAAC;IAC1C,OAAO;QACL,aAAa,CAAC,KAAK;YACjB,IAAI,KAAK,IAAI,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,EAAE,CAAC;gBAC7C,OAAO,KAAK,CAAC;YACf,CAAC;iBAAM,CAAC;gBACN,OAAO,KAAK,IAAI,IAAI,CAAC;YACvB,CAAC;QACH,CAAC;QACD,WAAW,CAAC,KAAK;YACf,IAAI,CAAC,KAAK,EAAE,CAAC;gBACX,OAAO,IAAI,CAAC;YACd,CAAC;iBAAM,IAAI,KAAK,KAAK,UAAU,EAAE,CAAC;gBAChC,OAAO,KAAK,CAAC;YACf,CAAC;iBAAM,CAAC;gBACN,OAAO,EAAE,CAAC;YACZ,CAAC;QACH,CAAC;KACF,CAAC;AACJ,CAAC;AAED,MAAM,wBAAwB,GAA8B;IAC1D,aAAa,CAAC,KAAK;QACjB,OAAO,KAAK,IAAI,KAAK,KAAK,IAAI,CAAC;IACjC,CAAC;IACD,WAAW,CAAC,KAAK;QACf,IAAI,CAAC,KAAK,EAAE,CAAC;YACX,OAAO,IAAI,CAAC;QACd,CAAC;aAAM,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE,CAAC;YACrC,OAAO,KAAK,CAAC;QACf,CAAC;aAAM,CAAC;YACN,OAAO,EAAE,CAAC;QACZ,CAAC;IACH,CAAC;CACF,CAAC;AAOK,IAAM,IAAI,GAAV,MAAM,IAAK,SAAQ,UAAU;IAA7B;;;QAMF,eAAU,GAAyB,KAAK,CAAC;QAKzC,aAAQ,GAAqB,KAAK,CAAC;;IAE7B,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,uBAAA,IAAI,gDAAmB,MAAvB,IAAI,CAAqB,CAAC;IAC5B,CAAC;IAEQ,UAAU,CAAC,OAA6B;QAC/C,IAAI,OAAO,CAAC,GAAG,CAAC,YAAY,CAAC,EAAE,CAAC;YAC9B,uBAAA,IAAI,gDAAmB,MAAvB,IAAI,CAAqB,CAAC;QAC5B,CAAC;QACD,IAAI,OAAO,CAAC,GAAG,CAAC,UAAU,CAAC,EAAE,CAAC;YAC5B,uBAAA,IAAI,8CAAiB,MAArB,IAAI,CAAmB,CAAC;QAC1B,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO;YACL,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,UAAU,KAAK,UAAU,IAAI,IAAI,CAAA;;;qCAG1B,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAqB;;8BAEhD,uBAAA,IAAI,sCAAS;;;;;;;OAOpC;YAED,IAAI,CAAA;oCAC0B,SAAS,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC;;;OAG3E;YAED,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,UAAU,KAAK,UAAU,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAA;;OAEzE;YAED,IAAI,CAAC,UAAU,KAAK,UAAU,IAAI,IAAI,CAAA;8BACd,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAA;wBAChC,IAAI,CAAC,QAAQ,WAAW;;OAEzC;SACF,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;IACpB,CAAC;;;;IAGC,8DAA8D;IAC9D,IAAI,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,CAAC;QACtC,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;IACxB,CAAC;AACH,CAAC;;IAGC,QAAQ,IAAI,CAAC,UAAU,EAAE,CAAC;QACxB,KAAK,UAAU,CAAC,CAAC,CAAC;YAChB,kCAAkC;YAClC,MAAM;QACR,CAAC;QACD,KAAK,IAAI;YACP,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;YACtC,MAAM;QACR;YACE,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;IACrC,CAAC;AACH,CAAC;;IAGC,IAAI,CAAC,aAAa,CAAC,IAAI,kBAAkB,EAAE,CAAC,CAAC;AAC/C,CAAC;AAnFe,WAAM,GAAoB,CAAC,MAAM,CAAC,AAA5B,CAA6B;;AAKhD;IAHF,QAAQ,CAAC;QACR,OAAO,EAAE,IAAI;QACb,SAAS,EAAE,oBAAoB,CAAC,UAAU,CAAC;KAC5C,CAAC;wCAA0C;AAKzC;IAHF,QAAQ,CAAC;QACR,OAAO,EAAE,IAAI;QACb,SAAS,EAAE,wBAAwB;KACpC,CAAC;sCAAoC;AAX3B,IAAI;IADhB,aAAa,CAAC,OAAO,CAAC;GACV,IAAI","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.0.2";
+PfTabPanel.version = "4.2.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"]}

package/pf-tabs/pf-tab.css

@@ -10,8 +10,11 @@
 }
 
 .active {
+  /** Current tab text color */
   --pf-c-tabs__link--Color: var(--pf-c-tabs__item--m-current__link--Color,  var(--pf-global--Color--100, #151515));
+  /** Current tab border color */
   --pf-c-tabs__link--after--BorderColor: var(--pf-c-tabs__item--m-current__link--after--BorderColor, var(--pf-global--active-color--100, #06c));
+  /** Current tab border width */
   --pf-c-tabs__link--after--BorderWidth: var(--pf-c-tabs__item--m-current__link--after--BorderWidth, var(--pf-global--BorderWidth--lg, 3px));
 }
 
@@ -40,18 +43,24 @@ slot[name="icon"] {
   text-decoration: none;
   cursor: pointer;
   align-items: center;
+  /** Tab icon and text spacing */
   gap: var(--pf-c-tabs__link--child--MarginRight, var(--pf-global--spacer--md, 1rem));
   line-height: var(--pf-global--LineHeight--md, 1.5);
   color: var(--pf-global--Color--100, #151515);
+  /** Tab padding (top and bottom) */
   padding:
     var(--pf-c-tabs__link--PaddingTop, var(--pf-global--spacer--sm, 0.5rem))
     var(--pf-c-tabs__link--PaddingRight, var(--pf-global--spacer--md, 1rem))
     var(--pf-c-tabs__link--PaddingBottom, var(--pf-global--spacer--sm, 0.5rem))
     var(--pf-c-tabs__link--PaddingLeft, var(--pf-global--spacer--md, 1rem));
+  /** Tab font size */
   font-size: var(--pf-c-tabs__link--FontSize, var(--pf-global--FontSize--md, 1rem));
+  /** Tab text color */
   color: var(--pf-c-tabs__link--Color, var(--pf-global--Color--200, #6a6e73));
+  /** Tab outline offset */
   outline-offset: var(--pf-c-tabs__link--OutlineOffset, calc(-1 * 0.375rem));
   --pf-c-tabs__link--after--BorderBottomWidth: var(--pf-c-tabs__link--after--BorderWidth, 0);
+  /** Tab background color */
   background-color: var(--pf-c-tabs__link--BackgroundColor, transparent);
 }
 
@@ -71,25 +80,42 @@ slot[name="icon"] {
 }
 
 #button::before {
+  /** Tab top border width */
   border-block-start-width: var(--pf-c-tabs__link--before--BorderTopWidth, 0);
+  /** Tab right border width */
   border-inline-end-width: var(--pf-c-tabs__link--before--BorderRightWidth, 0);
+  /** Tab bottom border width */
   border-block-end-width: var(--pf-c-tabs__link--before--BorderBottomWidth, 0);
+  /** Tab left border width */
   border-inline-start-width: var(--pf-c-tabs__link--before--BorderLeftWidth, 0);
+  /** Tab top border color */
   border-block-start-color: var(--pf-c-tabs__link--before--BorderTopColor,  var(--pf-c-tabs__link--before--border-color--base, var(--pf-global--BorderColor--100, #d2d2d2)));
+  /** Tab right border color */
   border-inline-end-color: var(--pf-c-tabs__link--before--BorderRightColor,  var(--pf-c-tabs__link--before--border-color--base, var(--pf-global--BorderColor--100, #d2d2d2)));
+  /** Tab bottom border color */
   border-block-end-color: var(--pf-c-tabs__link--before--BorderBottomColor,  var(--pf-c-tabs__link--before--border-color--base, var(--pf-global--BorderColor--100, #d2d2d2)));
+  /** Tab left border color */
   border-inline-start-color: var(--pf-c-tabs__link--before--BorderLeftColor,  var(--pf-c-tabs__link--before--border-color--base, var(--pf-global--BorderColor--100, #d2d2d2)));
 }
 
 #button::after {
+  /** Tab after element top position */
   top: var(--pf-c-tabs__link--after--Top, auto);
+  /** Tab after element right position */
   right: var(--pf-c-tabs__link--after--Right, 0);
+  /** Tab after element bottom position */
   bottom: var(--pf-c-tabs__link--after--Bottom, 0);
+  /** Tab before element left position */
   left: var(--pf-c-tabs__link--before--Left, 0);
+  /** Tab after element border color */
   border-color: var(--pf-c-tabs__link--after--BorderColor, var(--pf-global--BorderColor--light-100, #b8bbbe));
+  /** Tab after element top border width */
   border-block-start-width:  var(--pf-c-tabs__link--after--BorderTopWidth, 0);
+  /** Tab after element right border width */
   border-inline-end-width: var(--pf-c-tabs__link--after--BorderRightWidth, 0);
+  /** Tab after element bottom border width */
   border-block-end-width: var(--pf-c-tabs__link--after--BorderBottomWidth);
+  /** Tab after element left border width */
   border-inline-start-width: var(--pf-c-tabs__link--after--BorderLeftWidth);
 }
 
@@ -154,20 +180,27 @@ slot[name="icon"] {
 }
 
 :host(:first-of-type) .box.active #button::before {
+  /** Box style first tab top border width */
   border-block-start-width: var(--pf-c-tabs--m-box__item--m-current--first-child__link--before--BorderTopWidth,  var(--pf-c-tabs__link--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px)));
+  /** Box style first tab left border width */
   border-inline-start-width: var(--pf-c-tabs--m-box__item--m-current--first-child__link--before--BorderLeftWidth,  var(--pf-c-tabs__link--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px)));
 }
 
 :host(:last-of-type) .box.active #button::before {
+  /** Box style last tab right border width */
   border-inline-end-width: var(--pf-c-tabs--m-box__item--m-current--last-child__link--before--BorderRightWidth, var(--pf-c-tabs--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px)));
 }
 
 :host([disabled]) #button,
 :host([aria-disabled="true"]) #button {
   --pf-c-tabs__link--Color: var(--pf-c-tabs__link--disabled--Color,  var(--pf-global--disabled-color--100, #6a6e73));
+  /** Disabled tab background color */
   --pf-c-tabs__link--BackgroundColor: var(--pf-c-tabs__link--disabled--BackgroundColor, var(--pf-global--palette--black-150, #f5f5f5));
+  /** Disabled tab right border width */
   --pf-c-tabs__link--before--BorderRightWidth: var(--pf-c-tabs__link--disabled--before--BorderRightWidth, 0);
+  /** Disabled tab bottom border width */
   --pf-c-tabs__link--before--BorderBottomWidth: var(--pf-c-tabs__link--disabled--before--BorderBottomWidth, var(--pf-c-tabs--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px)));
+  /** Disabled tab left border width */
   --pf-c-tabs__link--before--BorderLeftWidth: var(--pf-c-tabs__link--disabled--before--BorderLeftWidth, 0);
   --pf-c-tabs__link--after--BorderWidth: 0;
 }

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

@@ -1,52 +1,12 @@
 import { LitElement, type TemplateResult } from 'lit';
 /**
  * Tab
- * @slot icon
- *       Can contain an `<svg>` or `<pf-icon>`
- * @slot
- *       Tab title text
- * @csspart button - button element
- * @csspart icon - span container for the icon
- * @csspart text - span container for the title text
- * @cssprop     {<length>} [--pf-c-tabs--m-box__item--m-current--first-child__link--before--BorderLeftWidth=1px]
- * @cssprop     {<length>} [--pf-c-tabs--m-box__item--m-current--last-child__link--before--BorderRightWidth=1px]
- * @cssprop     {<color>} [--pf-c-tabs__link--BackgroundColor=#f0f0f0]
- * @cssprop     {<color>} [--pf-c-tabs__link--disabled--BackgroundColor=#d2d2d2]
- * @cssprop     {<length>} [--pf-c-tabs__link--before--BorderTopWidth=1px]
- * @cssprop     {<length>} [--pf-c-tabs__link--before--BorderBottomWidth=1px]
- * @cssprop     {<length>} [--pf-c-tabs__link--before--BorderLeftWidth=0]
- * @cssprop     {<length>} [--pf-c-tabs__link--before--BorderRightWidth=1px]
- * @cssprop     {<length>} [--pf-c-tabs__link--disabled--before--BorderRightWidth=1px]
- * @cssprop     {<length>} [--pf-c-tabs__link--after--Top=auto]
- * @cssprop     {<length>} [--pf-c-tabs__link--after--Right=0]
- * @cssprop     {<length>} [--pf-c-tabs__link--after--Bottom=0]
- * @cssprop     {<length>} [--pf-c-tabs__link--before--Left=0]
- * @cssprop     {<length>} [--pf-c-tabs__link--PaddingTop=1rem]
- * @cssprop     {<length>} [--pf-c-tabs__link--PaddingBottom=1rem]
- * @cssprop     {<length>} [--pf-c-tabs__link--disabled--before--BorderBottomWidth=1px]
- * @cssprop     {<length>} [--pf-c-tabs__link--disabled--before--BorderLeftWidth=1px]
- * @cssprop     {<color>} [--pf-c-tabs__link--before--BorderTopColor=#d2d2d2]
- * @cssprop     {<color>} [--pf-c-tabs__link--before--BorderRightColor=#d2d2d2]
- * @cssprop     {<color>} [--pf-c-tabs__link--before--BorderBottomColor=#d2d2d2]
- * @cssprop     {<color>} [--pf-c-tabs__link--before--BorderLeftColor=#d2d2d2]
- * @cssprop     {<length>}  [--pf-c-tabs__link--FontSize=1rem]
- * @cssprop     {<color>}   [--pf-c-tabs__link--Color=#6a6e73]
- * @cssprop     {<length>}  [--pf-c-tabs__link--OutlineOffset=-0.375rem]
- * @cssprop     {<color>}  [--pf-c-tabs__link--after--BorderColor=#b8bbbe]
- * @cssprop     {<length>} [--pf-c-tabs__link--after--BorderTopWidth=0]
- * @cssprop     {<length>} [--pf-c-tabs__link--after--BorderRightWidth=0]
- * @cssprop     {<length>} [--pf-c-tabs__link--after--BorderBottomWidth=0]
- * @cssprop     {<length>} [--pf-c-tabs__link--after--BorderLeftWidth=0]
- * @cssprop     {<color>} [--pf-c-tabs__item--m-current__link--Color=#151515]
- * @cssprop     {<color>}   [--pf-c-tabs__item--m-current__link--after--BorderColor=#06c]
- * @cssprop     {<length>}  [--pf-c-tabs__item--m-current__link--after--BorderWidth=3px]
- * @cssprop     {<length>} [--pf-c-tabs__link--child--MarginRight=1rem]
  * @fires {TabExpandEvent} expand - when a tab expands
  */
 export declare class PfTab extends LitElement {
     #private;
     static readonly styles: CSSStyleSheet[];
-    private icons;
+    private icons?;
     active: boolean;
     disabled: boolean;
     private ctx?;