@patternfly/elements 4.1.0 → 4.2.0

package/pf-accordion/pf-accordion-panel.js

@@ -4,7 +4,92 @@ import { customElement } from 'lit/decorators/custom-element.js';
 import { property } from 'lit/decorators/property.js';
 import { getRandomId } from '@patternfly/pfe-core/functions/random.js';
 import { css } from "lit";
-const style = css `:host {\n  display: none;\n  position: relative;\n  overflow: hidden;\n  will-change: height;\n  color: var(--pf-global--Color--100, #151515);\n  background-color:\n    var(\n      --pf-c-accordion--BackgroundColor,\n      var(--pf-global--BackgroundColor--light-100, #ffffff)\n    );\n}\n\n.body {\n  padding:\n    var(--pf-c-accordion__panel-body--PaddingTop, var(--pf-global--spacer--sm, 0.5rem))\n    var(--pf-c-accordion__panel-body--PaddingRight, var(--pf-global--spacer--md, 1rem))\n    var(--pf-c-accordion__panel-body--PaddingBottom, var(--pf-global--spacer--sm, 0.5rem))\n    var(--pf-c-accordion__panel-body--PaddingLeft, var(--pf-global--spacer--md, 1rem));\n}\n\n.body:after {\n  content: "";\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  width: var(--pf-c-accordion__panel-body--before--Width, var(--pf-global--BorderWidth--lg, 3px));\n  background-color: var(--pf-c-accordion__panel-body--before--BackgroundColor, transparent);\n}\n\n:host([large]) {\n  --pf-c-accordion__panel-body--PaddingTop:\n    var(--pf-c-accordion--m-display-lg__expanded-content-body--PaddingTop, 0);\n  --pf-c-accordion__panel-body--PaddingRight:\n    var(--pf-c-accordion--m-display-lg__expanded-content-body--PaddingRight, 1rem);\n  --pf-c-accordion__panel-body--PaddingBottom:\n    var(--pf-c-accordion--m-display-lg__expanded-content-body--PaddingBottom, 1.5rem);\n  --pf-c-accordion__panel-body--PaddingLeft:\n    var(--pf-c-accordion--m-display-lg__expanded-content-body--PaddingLeft, 1.5rem);\n  --pf-c-accordion__panel--FontSize:\n    var(--pf-c-accordion--m-display-lg__expanded-content--FontSize, 1rem);\n  --pf-c-accordion__panel--Color:\n    var(--pf-c-accordion--m-display-lg__expanded-content--Color, #151515);\n}\n\n:host([large]) .body:last-child {\n  --pf-c-accordion__panel-body--PaddingBottom:\n    var(--pf-c-accordion--m-display-lg__expanded-content-body--last-child--PaddingBottom, 1.5rem);\n}\n\n.content {\n  color: var(--pf-c-accordion__panel--Color, var(--pf-global--Color--dark-200, #6a6e73));\n  font-size: var(--pf-c-accordion__panel--FontSize, var(--pf-global--FontSize--sm, 0.875rem));\n}\n\n:host([fixed]) {\n  overflow-y: auto;\n  max-height: var(--pf-c-accordion__panel--m-fixed--MaxHeight, 9.375rem);\n}\n\n:host([expanded]) {\n  display: block;\n  position: relative;\n}\n\n.content[expanded],\n:host([expanded]) .content {\n  --pf-c-accordion__panel-body--before--BackgroundColor:\n    var(\n      --pf-c-accordion__panel--content-body--before--BackgroundColor,\n      var(--pf-global--primary-color--100, #0066cc));\n}\n`;
+const style = css `:host {
+  display: none;
+  position: relative;
+  overflow: hidden;
+  will-change: height;
+  color: var(--pf-global--Color--100, #151515);
+  /** Background color for accordion panel */
+  background-color:
+    var(
+      --pf-c-accordion--BackgroundColor,
+      var(--pf-global--BackgroundColor--light-100, #ffffff)
+    );
+}
+
+.body {
+  /** Padding for accordion panel body */
+  padding:
+    /** Top padding for panel content */
+    var(--pf-c-accordion__panel-body--PaddingTop, var(--pf-global--spacer--sm, 0.5rem))
+    /** Right padding for panel content */
+    var(--pf-c-accordion__panel-body--PaddingRight, var(--pf-global--spacer--md, 1rem))
+    /** Bottom padding for panel content */
+    var(--pf-c-accordion__panel-body--PaddingBottom, var(--pf-global--spacer--sm, 0.5rem))
+    /** Left padding for panel content */
+    var(--pf-c-accordion__panel-body--PaddingLeft, var(--pf-global--spacer--md, 1rem));
+}
+
+.body:after {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  /** Before width for panel content */
+  width: var(--pf-c-accordion__panel-body--before--Width, var(--pf-global--BorderWidth--lg, 3px));
+  /** Background color for panel content before element */
+  background-color: var(--pf-c-accordion__panel-body--before--BackgroundColor, transparent);
+}
+
+:host([large]) {
+  --pf-c-accordion__panel-body--PaddingTop:
+    var(--pf-c-accordion--m-display-lg__expanded-content-body--PaddingTop, 0);
+  --pf-c-accordion__panel-body--PaddingRight:
+    var(--pf-c-accordion--m-display-lg__expanded-content-body--PaddingRight, 1rem);
+  --pf-c-accordion__panel-body--PaddingBottom:
+    var(--pf-c-accordion--m-display-lg__expanded-content-body--PaddingBottom, 1.5rem);
+  --pf-c-accordion__panel-body--PaddingLeft:
+    var(--pf-c-accordion--m-display-lg__expanded-content-body--PaddingLeft, 1.5rem);
+  --pf-c-accordion__panel--FontSize:
+    var(--pf-c-accordion--m-display-lg__expanded-content--FontSize, 1rem);
+  --pf-c-accordion__panel--Color:
+    var(--pf-c-accordion--m-display-lg__expanded-content--Color, #151515);
+}
+
+:host([large]) .body:last-child {
+  --pf-c-accordion__panel-body--PaddingBottom:
+    var(--pf-c-accordion--m-display-lg__expanded-content-body--last-child--PaddingBottom, 1.5rem);
+}
+
+.content {
+  /** Font color for panel content */
+  color: var(--pf-c-accordion__panel--Color, var(--pf-global--Color--dark-200, #6a6e73));
+  /** Font size for panel content */
+  font-size: var(--pf-c-accordion__panel--FontSize, var(--pf-global--FontSize--sm, 0.875rem));
+}
+
+:host([fixed]) {
+  overflow-y: auto;
+  /** Maximum height for panel content when fixed */
+  max-height: var(--pf-c-accordion__panel--m-fixed--MaxHeight, 9.375rem);
+}
+
+:host([expanded]) {
+  display: block;
+  position: relative;
+}
+
+.content[expanded],
+:host([expanded]) .content {
+  /** Sidebar color for panel when expanded */
+  --pf-c-accordion__panel-body--before--BackgroundColor:
+    var(
+      --pf-c-accordion__panel--content-body--before--BackgroundColor,
+      var(--pf-global--primary-color--100, #0066cc));
+}
+`;
 let PfAccordionPanel = class PfAccordionPanel extends LitElement {
     constructor() {
         super(...arguments);
@@ -28,7 +113,7 @@ let PfAccordionPanel = class PfAccordionPanel extends LitElement {
     }
 };
 PfAccordionPanel.styles = [style];
-PfAccordionPanel.version = "4.1.0";
+PfAccordionPanel.version = "4.2.0";
 __decorate([
     property({ type: Boolean, reflect: true })
 ], PfAccordionPanel.prototype, "expanded", void 0);

package/pf-accordion/pf-accordion-panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"pf-accordion-panel.js","sourceRoot":"","sources":["pf-accordion-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,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AAEtD,OAAO,EAAE,WAAW,EAAE,MAAM,0CAA0C,CAAC;;;AA2ChE,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,UAAU;IAAzC;;QAGuC,aAAQ,GAAG,KAAK,CAAC;;IAIpD,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,EAAE,KAAP,IAAI,CAAC,EAAE,GAAK,WAAW,CAAC,IAAI,CAAC,SAAS,CAAC,EAAC;QACxC,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;IACtC,CAAC;IAEQ,MAAM;QACb,OAAO,IAAI,CAAA;;;;;;;;KAQV,CAAC;IACJ,CAAC;;AAtBe,uBAAM,GAAoB,CAAC,KAAK,CAAC,AAA3B,CAA4B;;AAEN;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;kDAAkB;AAEhC;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;kDAA6B;AAL9C,gBAAgB;IAD5B,aAAa,CAAC,oBAAoB,CAAC;GACvB,gBAAgB","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 { getRandomId } from '@patternfly/pfe-core/functions/random.js';\n\nimport style from './pf-accordion-panel.css';\n\n/**\n * Accordion Panel\n * @slot - Panel content\n * @cssprop     {<color>} [--pf-c-accordion--BackgroundColor=var(--pf-global--BackgroundColor--light-100, #ffffff)]\n *              Sets the background color for the panel content.\n *\n * @cssprop     {<color>} [--pf-c-accordion__panel--Color=var(--pf-global--Color--dark-200, #6a6e73)]\n *              Sets the font color for the panel content.\n *\n * @cssprop     {<length>} [--pf-c-accordion__panel--FontSize=var(--pf-global--FontSize--sm, 0.875rem)]\n *              Sets the font size for the panel content.\n *\n * @cssprop     {<color>} [--pf-c-accordion__panel--content-body--before--BackgroundColor=var(--pf-global--primary-color--100, #0066cc)]\n *              Sets the sidebar color for the panel when the context is expanded.\n *\n * @cssprop     {<length>} [--pf-c-accordion__panel--m-fixed--MaxHeight=9.375rem]\n *              Sets the maximum height for the panel content.\n *              Will only be used if the `fixed` attribute is used.\n *\n * @cssprop     {<length>} [--pf-c-accordion__panel-body--PaddingTop=var(--pf-global--spacer--sm, 0.5rem)]\n *              Sets the padding top for the panel content.\n *\n * @cssprop     {<length>} [--pf-c-accordion__panel-body--PaddingRight=var(--pf-global--spacer--md, 1rem)]\n *              Sets the padding right for the panel content.\n *\n * @cssprop     {<length>} [--pf-c-accordion__panel-body--PaddingBottom=var(--pf-global--spacer--sm, 0.5rem)]\n *              Sets the padding bottom for the panel content.\n *\n * @cssprop     {<length>} [--pf-c-accordion__panel-body--PaddingLeft=var(--pf-global--spacer--md, 1rem)]\n *              Sets the padding left for the panel content.\n *\n * @cssprop     {<color>} [--pf-c-accordion__panel-body--before--BackgroundColor=transparent]\n *              Sets the background color for the panel content.\n *\n * @cssprop     [--pf-c-accordion__panel-body--before--Width=var(--pf-global--BorderWidth--lg, 3px)]\n *              Sets the before width for the panel content.\n *\n */\n@customElement('pf-accordion-panel')\nexport class PfAccordionPanel extends LitElement {\n  static readonly styles: CSSStyleSheet[] = [style];\n\n  @property({ type: Boolean, reflect: true }) expanded = false;\n\n  @property({ reflect: true }) bordered?: 'true' | 'false';\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.id ||= getRandomId(this.localName);\n    this.setAttribute('role', 'region');\n  }\n\n  override render(): TemplateResult<1> {\n    return html`\n      <div tabindex=\"-1\">\n        <div id=\"container\" class=\"content\" part=\"container\">\n          <div class=\"body\">\n            <slot></slot>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-accordion-panel': PfAccordionPanel;\n  }\n}\n"]}
+{"version":3,"file":"pf-accordion-panel.js","sourceRoot":"","sources":["pf-accordion-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,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AAEtD,OAAO,EAAE,WAAW,EAAE,MAAM,0CAA0C,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAShE,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,UAAU;IAAzC;;QAGuC,aAAQ,GAAG,KAAK,CAAC;;IAIpD,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,EAAE,KAAP,IAAI,CAAC,EAAE,GAAK,WAAW,CAAC,IAAI,CAAC,SAAS,CAAC,EAAC;QACxC,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;IACtC,CAAC;IAEQ,MAAM;QACb,OAAO,IAAI,CAAA;;;;;;;;KAQV,CAAC;IACJ,CAAC;;AAtBe,uBAAM,GAAoB,CAAC,KAAK,CAAC,AAA3B,CAA4B;;AAEN;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;kDAAkB;AAEhC;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;kDAA6B;AAL9C,gBAAgB;IAD5B,aAAa,CAAC,oBAAoB,CAAC;GACvB,gBAAgB","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 { getRandomId } from '@patternfly/pfe-core/functions/random.js';\n\nimport style from './pf-accordion-panel.css';\n\n/**\n * Accordion Panel\n * @slot - Panel content\n */\n@customElement('pf-accordion-panel')\nexport class PfAccordionPanel extends LitElement {\n  static readonly styles: CSSStyleSheet[] = [style];\n\n  @property({ type: Boolean, reflect: true }) expanded = false;\n\n  @property({ reflect: true }) bordered?: 'true' | 'false';\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.id ||= getRandomId(this.localName);\n    this.setAttribute('role', 'region');\n  }\n\n  override render(): TemplateResult<1> {\n    return html`\n      <div tabindex=\"-1\">\n        <div id=\"container\" class=\"content\" part=\"container\">\n          <div class=\"body\">\n            <slot></slot>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-accordion-panel': PfAccordionPanel;\n  }\n}\n"]}

package/pf-accordion/pf-accordion.css

@@ -1,65 +1,127 @@
 :host {
+	/** BackgroundColor for the accordion */
 	--pf-c-accordion--BackgroundColor: var(--pf-global--BackgroundColor--100, #fff);
+	/** PaddingTop for the toggle */
 	--pf-c-accordion__toggle--PaddingTop: var(--pf-global--spacer--sm, 0.5rem);
+	/** PaddingRight for the toggle */
 	--pf-c-accordion__toggle--PaddingRight: var(--pf-global--spacer--md, 1rem);
+	/** PaddingBottom for the toggle */
 	--pf-c-accordion__toggle--PaddingBottom: var(--pf-global--spacer--sm, 0.5rem);
+	/** PaddingLeft for the toggle */
 	--pf-c-accordion__toggle--PaddingLeft: var(--pf-global--spacer--md, 1rem);
+	/** BackgroundColor for the toggle before element */
 	--pf-c-accordion__toggle--before--BackgroundColor: transparent;
+	/** Top position for the toggle before element */
 	--pf-c-accordion__toggle--before--Top: 0;
+	/** BackgroundColor for the toggle on hover */
 	--pf-c-accordion__toggle--hover--BackgroundColor: var(--pf-global--BackgroundColor--200, #f0f0f0);
+	/** BackgroundColor for the toggle on focus */
 	--pf-c-accordion__toggle--focus--BackgroundColor: var(--pf-global--BackgroundColor--200, #f0f0f0);
+	/** BackgroundColor for the toggle when active */
 	--pf-c-accordion__toggle--active--BackgroundColor: var(--pf-global--BackgroundColor--200, #f0f0f0);
+	/** Width for the toggle before element */
 	--pf-c-accordion__toggle--before--Width: var(--pf-global--BorderWidth--lg, 3px);
+	/** BackgroundColor for the toggle before element when expanded */
 	--pf-c-accordion__toggle--m-expanded--before--BackgroundColor: var(--pf-global--primary-color--100, #06c);
+	/** MaxWidth for the toggle text */
 	--pf-c-accordion__toggle-text--MaxWidth: calc(100% - var(--pf-global--spacer--lg, 1.5rem));
+	/** Color for the toggle text on hover */
 	--pf-c-accordion__toggle--hover__toggle-text--Color: var(--pf-global--link--Color, #06c);
+	/** Color for the toggle text when active */
 	--pf-c-accordion__toggle--active__toggle-text--Color: var(--pf-global--link--Color, #06c);
+	/** FontWeight for the toggle text when active */
 	--pf-c-accordion__toggle--active__toggle-text--FontWeight: var(--pf-global--FontWeight--semi-bold, 700);
+	/** Color for the toggle text on focus */
 	--pf-c-accordion__toggle--focus__toggle-text--Color: var(--pf-global--link--Color, #06c);
+	/** FontWeight for the toggle text on focus */
 	--pf-c-accordion__toggle--focus__toggle-text--FontWeight: var(--pf-global--FontWeight--semi-bold, 700);
+	/** Color for the toggle text when expanded */
 	--pf-c-accordion__toggle--m-expanded__toggle-text--Color: var(--pf-global--link--Color, #06c);
+	/** FontWeight for the toggle text when expanded */
 	--pf-c-accordion__toggle--m-expanded__toggle-text--FontWeight: var(--pf-global--FontWeight--semi-bold, 700);
+	/** Transition for the toggle icon */
 	--pf-c-accordion__toggle-icon--Transition: .2s ease-in 0s;
+	/** Rotate value for the toggle icon when expanded */
 	--pf-c-accordion__toggle--m-expanded__toggle-icon--Rotate: 90deg;
+	/** Color for the expanded content */
 	--pf-c-accordion__expanded-content--Color: var(--pf-global--Color--200, #6a6e73);
+	/** FontSize for the expanded content */
 	--pf-c-accordion__expanded-content--FontSize: var(--pf-global--FontSize--sm, 0.875rem);
+	/** BackgroundColor for the expanded content body before element when expanded */
 	--pf-c-accordion__expanded-content--m-expanded__expanded-content-body--before--BackgroundColor: var(--pf-global--primary-color--100, #06c);
+	/** MaxHeight for the expanded content when fixed */
 	--pf-c-accordion__expanded-content--m-fixed--MaxHeight: 9.375rem;
+	/** PaddingTop for the expanded content body */
 	--pf-c-accordion__expanded-content-body--PaddingTop: var(--pf-global--spacer--sm, 0.5rem);
+	/** PaddingRight for the expanded content body */
 	--pf-c-accordion__expanded-content-body--PaddingRight: var(--pf-global--spacer--md, 1rem);
+	/** PaddingBottom for the expanded content body */
 	--pf-c-accordion__expanded-content-body--PaddingBottom: var(--pf-global--spacer--sm, 0.5rem);
+	/** PaddingLeft for the expanded content body */
 	--pf-c-accordion__expanded-content-body--PaddingLeft: var(--pf-global--spacer--md, 1rem);
+	/** PaddingTop for nested expanded content body */
 	--pf-c-accordion__expanded-content-body--expanded-content-body--PaddingTop: 0;
+	/** BackgroundColor for the expanded content body before element */
 	--pf-c-accordion__expanded-content-body--before--BackgroundColor: transparent;
+	/** Width for the expanded content body before element */
 	--pf-c-accordion__expanded-content-body--before--Width: var(--pf-global--BorderWidth--lg, 3px);
+	/** Top position for the expanded content body before element */
 	--pf-c-accordion__expanded-content-body--before--Top: 0;
+	/** PaddingTop for the toggle in large display mode */
 	--pf-c-accordion--m-display-lg__toggle--PaddingTop: var(--pf-global--spacer--md, 1rem);
+	/** PaddingRight for the toggle in large display mode */
 	--pf-c-accordion--m-display-lg__toggle--PaddingRight: var(--pf-global--spacer--md, 1rem);
+	/** PaddingBottom for the toggle in large display mode */
 	--pf-c-accordion--m-display-lg__toggle--PaddingBottom: var(--pf-global--spacer--md, 1rem);
+	/** PaddingLeft for the toggle in large display mode */
 	--pf-c-accordion--m-display-lg__toggle--PaddingLeft: var(--pf-global--spacer--lg, 1.5rem);
+	/** FontFamily for the toggle in large display mode */
 	--pf-c-accordion--m-display-lg__toggle--FontFamily: var(--pf-global--FontFamily--heading--sans-serif, "RedHatDisplay", "Overpass", overpass, helvetica, arial, sans-serif);
+	/** FontSize for the toggle in large display mode */
 	--pf-c-accordion--m-display-lg__toggle--FontSize: var(--pf-global--FontSize--xl, 1.25rem);
+	/** Color for the toggle text on hover in large display mode */
 	--pf-c-accordion--m-display-lg__toggle--hover__toggle-text--Color: var(--pf-global--Color--100, #151515);
+	/** Color for the toggle text when active in large display mode */
 	--pf-c-accordion--m-display-lg__toggle--active__toggle-text--Color: var(--pf-global--Color--100, #151515);
+	/** FontWeight for the toggle text when active in large display mode */
 	--pf-c-accordion--m-display-lg__toggle--active__toggle-text--FontWeight: var(--pf-global--FontWeight--normal, 400);
+	/** Color for the toggle text on focus in large display mode */
 	--pf-c-accordion--m-display-lg__toggle--focus__toggle-text--Color: var(--pf-global--Color--100, #151515);
+	/** FontWeight for the toggle text on focus in large display mode */
 	--pf-c-accordion--m-display-lg__toggle--focus__toggle-text--FontWeight: var(--pf-global--FontWeight--normal, 400);
+	/** Color for the toggle text when expanded in large display mode */
 	--pf-c-accordion--m-display-lg__toggle--m-expanded__toggle-text--Color: var(--pf-global--Color--100, #151515);
+	/** FontWeight for the toggle text when expanded in large display mode */
 	--pf-c-accordion--m-display-lg__toggle--m-expanded__toggle-text--FontWeight: var(--pf-global--FontWeight--normal, 400);
+	/** FontSize for the expanded content in large display mode */
 	--pf-c-accordion--m-display-lg__expanded-content--FontSize: var(--pf-global--FontSize--md, 1rem);
+	/** Color for the expanded content in large display mode */
 	--pf-c-accordion--m-display-lg__expanded-content--Color: var(--pf-global--Color--100, #151515);
+	/** PaddingTop for the expanded content body in large display mode */
 	--pf-c-accordion--m-display-lg__expanded-content-body--PaddingTop: 0;
+	/** PaddingRight for the expanded content body in large display mode */
 	--pf-c-accordion--m-display-lg__expanded-content-body--PaddingRight: var(--pf-global--spacer--md, 1rem);
+	/** PaddingBottom for the expanded content body in large display mode */
 	--pf-c-accordion--m-display-lg__expanded-content-body--PaddingBottom: var(--pf-global--spacer--md, 1rem);
+	/** PaddingBottom for the last child of expanded content body in large display mode */
 	--pf-c-accordion--m-display-lg__expanded-content-body--last-child--PaddingBottom: var(--pf-global--spacer--lg, 1.5rem);
+	/** PaddingLeft for the expanded content body in large display mode */
 	--pf-c-accordion--m-display-lg__expanded-content-body--PaddingLeft: var(--pf-global--spacer--lg, 1.5rem);
+	/** BorderTopWidth for the bordered variant */
 	--pf-c-accordion--m-bordered--BorderTopWidth: var(--pf-global--BorderWidth--sm, 1px);
+	/** BorderTopColor for the bordered variant */
 	--pf-c-accordion--m-bordered--BorderTopColor: var(--pf-global--BorderColor--100, #d2d2d2);
+	/** Top position for the toggle before element in bordered variant */
 	--pf-c-accordion--m-bordered__toggle--before--Top: calc(-1 * var(--pf-global--BorderWidth--sm, 1px));
+	/** BorderColor for the toggle after element in bordered variant */
 	--pf-c-accordion--m-bordered__toggle--after--BorderColor: var(--pf-global--BorderColor--100, #d2d2d2);
+	/** BorderTopWidth for the toggle after element in bordered variant */
 	--pf-c-accordion--m-bordered__toggle--after--BorderTopWidth: 0;
+	/** BorderBottomWidth for the toggle after element in bordered variant */
 	--pf-c-accordion--m-bordered__toggle--after--BorderBottomWidth: var(--pf-global--BorderWidth--sm, 1px);
+	/** BorderBottomWidth for the last child after element in bordered expanded content */
 	--pf-c-accordion--m-bordered__expanded-content--m-expanded__expanded-content-body--last-child--after--BorderBottomWidth: var(--pf-global--BorderWidth--sm, 1px);
+	/** BorderBottomColor for the last child after element in bordered expanded content */
 	--pf-c-accordion--m-bordered__expanded-content--m-expanded__expanded-content-body--last-child--after--BorderBottomColor: var(--pf-global--BorderColor--100, #d2d2d2);
 	color: var(--pf-global--Color--100, #151515);
 	background-color: var(--pf-c-accordion--BackgroundColor);

package/pf-accordion/pf-accordion.d.ts

@@ -16,72 +16,9 @@ export declare class PfAccordionCollapseEvent extends Event {
 /**
  * An **accordion** is an interactive container that expands and collapses to hide or reveal nested content. It takes advantage of progressive disclosure to help reduce page scrolling, by allowing users to choose whether they want to show or hide more detailed information as needed.
  * @summary Toggle the visibility of sections of content
+ * @alias Accordion
  * @fires {AccordionExpandEvent} expand - when a panel expands
  * @fires {AccordionCollapseEvent} collapse - when a panel collapses
- * @slot
- *       Place the `pf-accordion-header` and `pf-accordion-panel` elements here.
- * @cssprop [--pf-c-accordion--BackgroundColor=var(--pf-global--BackgroundColor--100, #fff)]
- * @cssprop [--pf-c-accordion__toggle--PaddingTop=var(--pf-global--spacer--sm, 0.5rem)]
- * @cssprop [--pf-c-accordion__toggle--PaddingRight=var(--pf-global--spacer--md, 1rem)]
- * @cssprop [--pf-c-accordion__toggle--PaddingBottom=var(--pf-global--spacer--sm, 0.5rem)]
- * @cssprop [--pf-c-accordion__toggle--PaddingLeft=var(--pf-global--spacer--md, 1rem)]
- * @cssprop [--pf-c-accordion__toggle--before--BackgroundColor=transparent]
- * @cssprop [--pf-c-accordion__toggle--before--Top=0]
- * @cssprop [--pf-c-accordion__toggle--hover--BackgroundColor=var(--pf-global--BackgroundColor--200, #f0f0f0)]
- * @cssprop [--pf-c-accordion__toggle--focus--BackgroundColor=var(--pf-global--BackgroundColor--200, #f0f0f0)]
- * @cssprop [--pf-c-accordion__toggle--active--BackgroundColor=var(--pf-global--BackgroundColor--200, #f0f0f0)]
- * @cssprop [--pf-c-accordion__toggle--before--Width=var(--pf-global--BorderWidth--lg, 3px)]
- * @cssprop [--pf-c-accordion__toggle--m-expanded--before--BackgroundColor=var(--pf-global--primary-color--100, #06c)]
- * @cssprop [--pf-c-accordion__toggle-text--MaxWidth=calc(100 - var(--pf-global--spacer--lg, 1.5rem))]
- * @cssprop [--pf-c-accordion__toggle--hover__toggle-text--Color=var(--pf-global--link--Color, #06c)]
- * @cssprop [--pf-c-accordion__toggle--active__toggle-text--Color=var(--pf-global--link--Color, #06c)]
- * @cssprop [--pf-c-accordion__toggle--active__toggle-text--FontWeight=var(--pf-global--FontWeight--semi-bold, 700)]
- * @cssprop [--pf-c-accordion__toggle--focus__toggle-text--Color=var(--pf-global--link--Color, #06c)]
- * @cssprop [--pf-c-accordion__toggle--focus__toggle-text--FontWeight=var(--pf-global--FontWeight--semi-bold, 700)]
- * @cssprop [--pf-c-accordion__toggle--m-expanded__toggle-text--Color=var(--pf-global--link--Color, #06c)]
- * @cssprop [--pf-c-accordion__toggle--m-expanded__toggle-text--FontWeight=var(--pf-global--FontWeight--semi-bold, 700)]
- * @cssprop [--pf-c-accordion__toggle-icon--Transition=.2s ease-in 0s]
- * @cssprop [--pf-c-accordion__toggle--m-expanded__toggle-icon--Rotate=90deg]
- * @cssprop [--pf-c-accordion__expanded-content--Color=var(--pf-global--Color--200, #6a6e73)]
- * @cssprop [--pf-c-accordion__expanded-content--FontSize=var(--pf-global--FontSize--sm, 0.875rem)]
- * @cssprop [--pf-c-accordion__expanded-content--m-expanded__expanded-content-body--before--BackgroundColor=var(--pf-global--primary-color--100, #06c)]
- * @cssprop [--pf-c-accordion__expanded-content--m-fixed--MaxHeight=9.375rem]
- * @cssprop [--pf-c-accordion__expanded-content-body--PaddingTop=var(--pf-global--spacer--sm, 0.5rem)]
- * @cssprop [--pf-c-accordion__expanded-content-body--PaddingRight=var(--pf-global--spacer--md, 1rem)]
- * @cssprop [--pf-c-accordion__expanded-content-body--PaddingBottom=var(--pf-global--spacer--sm, 0.5rem)]
- * @cssprop [--pf-c-accordion__expanded-content-body--PaddingLeft=var(--pf-global--spacer--md, 1rem)]
- * @cssprop [--pf-c-accordion__expanded-content-body--expanded-content-body--PaddingTop=0]
- * @cssprop [--pf-c-accordion__expanded-content-body--before--BackgroundColor=transparent]
- * @cssprop [--pf-c-accordion__expanded-content-body--before--Width=var(--pf-global--BorderWidth--lg, 3px)]
- * @cssprop [--pf-c-accordion__expanded-content-body--before--Top=0]
- * @cssprop [--pf-c-accordion--m-display-lg__toggle--PaddingTop=var(--pf-global--spacer--md, 1rem)]
- * @cssprop [--pf-c-accordion--m-display-lg__toggle--PaddingRight=var(--pf-global--spacer--md, 1rem)]
- * @cssprop [--pf-c-accordion--m-display-lg__toggle--PaddingBottom=var(--pf-global--spacer--md, 1rem)]
- * @cssprop [--pf-c-accordion--m-display-lg__toggle--PaddingLeft=var(--pf-global--spacer--lg, 1.5rem)]
- * @cssprop [--pf-c-accordion--m-display-lg__toggle--FontFamily=var(--pf-global--FontFamily--heading--sans-serif, "RedHatDisplay", "Overpass", overpass, helvetica, arial, sans-serif)]
- * @cssprop [--pf-c-accordion--m-display-lg__toggle--FontSize=var(--pf-global--FontSize--xl, 1.25rem)]
- * @cssprop [--pf-c-accordion--m-display-lg__toggle--hover__toggle-text--Color=var(--pf-global--Color--100, #151515)]
- * @cssprop [--pf-c-accordion--m-display-lg__toggle--active__toggle-text--Color=var(--pf-global--Color--100, #151515)]
- * @cssprop [--pf-c-accordion--m-display-lg__toggle--active__toggle-text--FontWeight=var(--pf-global--FontWeight--normal, 400)]
- * @cssprop [--pf-c-accordion--m-display-lg__toggle--focus__toggle-text--Color=var(--pf-global--Color--100, #151515)]
- * @cssprop [--pf-c-accordion--m-display-lg__toggle--focus__toggle-text--FontWeight=var(--pf-global--FontWeight--normal, 400)]
- * @cssprop [--pf-c-accordion--m-display-lg__toggle--m-expanded__toggle-text--Color=var(--pf-global--Color--100, #151515)]
- * @cssprop [--pf-c-accordion--m-display-lg__toggle--m-expanded__toggle-text--FontWeight=var(--pf-global--FontWeight--normal, 400)]
- * @cssprop [--pf-c-accordion--m-display-lg__expanded-content--FontSize=var(--pf-global--FontSize--md, 1rem)]
- * @cssprop [--pf-c-accordion--m-display-lg__expanded-content--Color=var(--pf-global--Color--100, #151515)]
- * @cssprop [--pf-c-accordion--m-display-lg__expanded-content-body--PaddingTop=0]
- * @cssprop [--pf-c-accordion--m-display-lg__expanded-content-body--PaddingRight=var(--pf-global--spacer--md, 1rem)]
- * @cssprop [--pf-c-accordion--m-display-lg__expanded-content-body--PaddingBottom=var(--pf-global--spacer--md, 1rem)]
- * @cssprop [--pf-c-accordion--m-display-lg__expanded-content-body--last-child--PaddingBottom=var(--pf-global--spacer--lg, 1.5rem)]
- * @cssprop [--pf-c-accordion--m-display-lg__expanded-content-body--PaddingLeft=var(--pf-global--spacer--lg, 1.5rem)]
- * @cssprop [--pf-c-accordion--m-bordered--BorderTopWidth=var(--pf-global--BorderWidth--sm, 1px)]
- * @cssprop [--pf-c-accordion--m-bordered--BorderTopColor=var(--pf-global--BorderColor--100, #d2d2d2)]
- * @cssprop [--pf-c-accordion--m-bordered__toggle--before--Top=calc(-1 * var(--pf-global--BorderWidth--sm, 1px))]
- * @cssprop [--pf-c-accordion--m-bordered__toggle--after--BorderColor=var(--pf-global--BorderColor--100, #d2d2d2)]
- * @cssprop [--pf-c-accordion--m-bordered__toggle--after--BorderTopWidth=0]
- * @cssprop [--pf-c-accordion--m-bordered__toggle--after--BorderBottomWidth=var(--pf-global--BorderWidth--sm, 1px)]
- * @cssprop [--pf-c-accordion--m-bordered__expanded-content--m-expanded__expanded-content-body--last-child--after--BorderBottomWidth=var(--pf-global--BorderWidth--sm, 1px)]
- * @cssprop [--pf-c-accordion--m-bordered__expanded-content--m-expanded__expanded-content-body--last-child--after--BorderBottomColor=var(--pf-global--BorderColor--100, #d2d2d2)]
  */
 export declare class PfAccordion extends LitElement {
     #private;

package/pf-accordion/pf-accordion.js

@@ -13,7 +13,160 @@ import { PfAccordionPanel } from './pf-accordion-panel.js';
 export * from './pf-accordion-header.js';
 export * from './pf-accordion-panel.js';
 import { css } from "lit";
-const style = css `:host {\n\t--pf-c-accordion--BackgroundColor: var(--pf-global--BackgroundColor--100, #fff);\n\t--pf-c-accordion__toggle--PaddingTop: var(--pf-global--spacer--sm, 0.5rem);\n\t--pf-c-accordion__toggle--PaddingRight: var(--pf-global--spacer--md, 1rem);\n\t--pf-c-accordion__toggle--PaddingBottom: var(--pf-global--spacer--sm, 0.5rem);\n\t--pf-c-accordion__toggle--PaddingLeft: var(--pf-global--spacer--md, 1rem);\n\t--pf-c-accordion__toggle--before--BackgroundColor: transparent;\n\t--pf-c-accordion__toggle--before--Top: 0;\n\t--pf-c-accordion__toggle--hover--BackgroundColor: var(--pf-global--BackgroundColor--200, #f0f0f0);\n\t--pf-c-accordion__toggle--focus--BackgroundColor: var(--pf-global--BackgroundColor--200, #f0f0f0);\n\t--pf-c-accordion__toggle--active--BackgroundColor: var(--pf-global--BackgroundColor--200, #f0f0f0);\n\t--pf-c-accordion__toggle--before--Width: var(--pf-global--BorderWidth--lg, 3px);\n\t--pf-c-accordion__toggle--m-expanded--before--BackgroundColor: var(--pf-global--primary-color--100, #06c);\n\t--pf-c-accordion__toggle-text--MaxWidth: calc(100% - var(--pf-global--spacer--lg, 1.5rem));\n\t--pf-c-accordion__toggle--hover__toggle-text--Color: var(--pf-global--link--Color, #06c);\n\t--pf-c-accordion__toggle--active__toggle-text--Color: var(--pf-global--link--Color, #06c);\n\t--pf-c-accordion__toggle--active__toggle-text--FontWeight: var(--pf-global--FontWeight--semi-bold, 700);\n\t--pf-c-accordion__toggle--focus__toggle-text--Color: var(--pf-global--link--Color, #06c);\n\t--pf-c-accordion__toggle--focus__toggle-text--FontWeight: var(--pf-global--FontWeight--semi-bold, 700);\n\t--pf-c-accordion__toggle--m-expanded__toggle-text--Color: var(--pf-global--link--Color, #06c);\n\t--pf-c-accordion__toggle--m-expanded__toggle-text--FontWeight: var(--pf-global--FontWeight--semi-bold, 700);\n\t--pf-c-accordion__toggle-icon--Transition: .2s ease-in 0s;\n\t--pf-c-accordion__toggle--m-expanded__toggle-icon--Rotate: 90deg;\n\t--pf-c-accordion__expanded-content--Color: var(--pf-global--Color--200, #6a6e73);\n\t--pf-c-accordion__expanded-content--FontSize: var(--pf-global--FontSize--sm, 0.875rem);\n\t--pf-c-accordion__expanded-content--m-expanded__expanded-content-body--before--BackgroundColor: var(--pf-global--primary-color--100, #06c);\n\t--pf-c-accordion__expanded-content--m-fixed--MaxHeight: 9.375rem;\n\t--pf-c-accordion__expanded-content-body--PaddingTop: var(--pf-global--spacer--sm, 0.5rem);\n\t--pf-c-accordion__expanded-content-body--PaddingRight: var(--pf-global--spacer--md, 1rem);\n\t--pf-c-accordion__expanded-content-body--PaddingBottom: var(--pf-global--spacer--sm, 0.5rem);\n\t--pf-c-accordion__expanded-content-body--PaddingLeft: var(--pf-global--spacer--md, 1rem);\n\t--pf-c-accordion__expanded-content-body--expanded-content-body--PaddingTop: 0;\n\t--pf-c-accordion__expanded-content-body--before--BackgroundColor: transparent;\n\t--pf-c-accordion__expanded-content-body--before--Width: var(--pf-global--BorderWidth--lg, 3px);\n\t--pf-c-accordion__expanded-content-body--before--Top: 0;\n\t--pf-c-accordion--m-display-lg__toggle--PaddingTop: var(--pf-global--spacer--md, 1rem);\n\t--pf-c-accordion--m-display-lg__toggle--PaddingRight: var(--pf-global--spacer--md, 1rem);\n\t--pf-c-accordion--m-display-lg__toggle--PaddingBottom: var(--pf-global--spacer--md, 1rem);\n\t--pf-c-accordion--m-display-lg__toggle--PaddingLeft: var(--pf-global--spacer--lg, 1.5rem);\n\t--pf-c-accordion--m-display-lg__toggle--FontFamily: var(--pf-global--FontFamily--heading--sans-serif, "RedHatDisplay", "Overpass", overpass, helvetica, arial, sans-serif);\n\t--pf-c-accordion--m-display-lg__toggle--FontSize: var(--pf-global--FontSize--xl, 1.25rem);\n\t--pf-c-accordion--m-display-lg__toggle--hover__toggle-text--Color: var(--pf-global--Color--100, #151515);\n\t--pf-c-accordion--m-display-lg__toggle--active__toggle-text--Color: var(--pf-global--Color--100, #151515);\n\t--pf-c-accordion--m-display-lg__toggle--active__toggle-text--FontWeight: var(--pf-global--FontWeight--normal, 400);\n\t--pf-c-accordion--m-display-lg__toggle--focus__toggle-text--Color: var(--pf-global--Color--100, #151515);\n\t--pf-c-accordion--m-display-lg__toggle--focus__toggle-text--FontWeight: var(--pf-global--FontWeight--normal, 400);\n\t--pf-c-accordion--m-display-lg__toggle--m-expanded__toggle-text--Color: var(--pf-global--Color--100, #151515);\n\t--pf-c-accordion--m-display-lg__toggle--m-expanded__toggle-text--FontWeight: var(--pf-global--FontWeight--normal, 400);\n\t--pf-c-accordion--m-display-lg__expanded-content--FontSize: var(--pf-global--FontSize--md, 1rem);\n\t--pf-c-accordion--m-display-lg__expanded-content--Color: var(--pf-global--Color--100, #151515);\n\t--pf-c-accordion--m-display-lg__expanded-content-body--PaddingTop: 0;\n\t--pf-c-accordion--m-display-lg__expanded-content-body--PaddingRight: var(--pf-global--spacer--md, 1rem);\n\t--pf-c-accordion--m-display-lg__expanded-content-body--PaddingBottom: var(--pf-global--spacer--md, 1rem);\n\t--pf-c-accordion--m-display-lg__expanded-content-body--last-child--PaddingBottom: var(--pf-global--spacer--lg, 1.5rem);\n\t--pf-c-accordion--m-display-lg__expanded-content-body--PaddingLeft: var(--pf-global--spacer--lg, 1.5rem);\n\t--pf-c-accordion--m-bordered--BorderTopWidth: var(--pf-global--BorderWidth--sm, 1px);\n\t--pf-c-accordion--m-bordered--BorderTopColor: var(--pf-global--BorderColor--100, #d2d2d2);\n\t--pf-c-accordion--m-bordered__toggle--before--Top: calc(-1 * var(--pf-global--BorderWidth--sm, 1px));\n\t--pf-c-accordion--m-bordered__toggle--after--BorderColor: var(--pf-global--BorderColor--100, #d2d2d2);\n\t--pf-c-accordion--m-bordered__toggle--after--BorderTopWidth: 0;\n\t--pf-c-accordion--m-bordered__toggle--after--BorderBottomWidth: var(--pf-global--BorderWidth--sm, 1px);\n\t--pf-c-accordion--m-bordered__expanded-content--m-expanded__expanded-content-body--last-child--after--BorderBottomWidth: var(--pf-global--BorderWidth--sm, 1px);\n\t--pf-c-accordion--m-bordered__expanded-content--m-expanded__expanded-content-body--last-child--after--BorderBottomColor: var(--pf-global--BorderColor--100, #d2d2d2);\n\tcolor: var(--pf-global--Color--100, #151515);\n\tbackground-color: var(--pf-c-accordion--BackgroundColor);\n}\n\n:host([bordered]) ::slotted(pf-accordion-header:first-child),\n:host([large]) ::slotted(pf-accordion-header:first-child) {\n  display: block;\n  border-top: 1px solid var(--accordion__bordered--Color);\n  border-bottom: 1px solid var(--accordion__bordered--Color);\n}\n\n:host([bordered]) ::slotted(pf-accordion-header:not(:first-child)),\n:host([large]) ::slotted(pf-accordion-header:not(:first-child)) {\n  display: block;\n  border-bottom: 1px solid var(--accordion__bordered--Color);\n}\n\n:host([bordered]) ::slotted(pf-accordion-header:is([expanded])),\n:host([large]) ::slotted(pf-accordion-header:is([expanded])) {\n  display: block;\n  border-bottom: 0;\n}\n\n:host([bordered]) ::slotted(pf-accordion-panel:is([expanded])),\n:host([large]) ::slotted(pf-accordion-panel:is([expanded])) {\n  display: block;\n  border-bottom: 1px solid var(--accordion__bordered--Color);\n}\n`;
+const style = css `:host {
+\t/** BackgroundColor for the accordion */
+\t--pf-c-accordion--BackgroundColor: var(--pf-global--BackgroundColor--100, #fff);
+\t/** PaddingTop for the toggle */
+\t--pf-c-accordion__toggle--PaddingTop: var(--pf-global--spacer--sm, 0.5rem);
+\t/** PaddingRight for the toggle */
+\t--pf-c-accordion__toggle--PaddingRight: var(--pf-global--spacer--md, 1rem);
+\t/** PaddingBottom for the toggle */
+\t--pf-c-accordion__toggle--PaddingBottom: var(--pf-global--spacer--sm, 0.5rem);
+\t/** PaddingLeft for the toggle */
+\t--pf-c-accordion__toggle--PaddingLeft: var(--pf-global--spacer--md, 1rem);
+\t/** BackgroundColor for the toggle before element */
+\t--pf-c-accordion__toggle--before--BackgroundColor: transparent;
+\t/** Top position for the toggle before element */
+\t--pf-c-accordion__toggle--before--Top: 0;
+\t/** BackgroundColor for the toggle on hover */
+\t--pf-c-accordion__toggle--hover--BackgroundColor: var(--pf-global--BackgroundColor--200, #f0f0f0);
+\t/** BackgroundColor for the toggle on focus */
+\t--pf-c-accordion__toggle--focus--BackgroundColor: var(--pf-global--BackgroundColor--200, #f0f0f0);
+\t/** BackgroundColor for the toggle when active */
+\t--pf-c-accordion__toggle--active--BackgroundColor: var(--pf-global--BackgroundColor--200, #f0f0f0);
+\t/** Width for the toggle before element */
+\t--pf-c-accordion__toggle--before--Width: var(--pf-global--BorderWidth--lg, 3px);
+\t/** BackgroundColor for the toggle before element when expanded */
+\t--pf-c-accordion__toggle--m-expanded--before--BackgroundColor: var(--pf-global--primary-color--100, #06c);
+\t/** MaxWidth for the toggle text */
+\t--pf-c-accordion__toggle-text--MaxWidth: calc(100% - var(--pf-global--spacer--lg, 1.5rem));
+\t/** Color for the toggle text on hover */
+\t--pf-c-accordion__toggle--hover__toggle-text--Color: var(--pf-global--link--Color, #06c);
+\t/** Color for the toggle text when active */
+\t--pf-c-accordion__toggle--active__toggle-text--Color: var(--pf-global--link--Color, #06c);
+\t/** FontWeight for the toggle text when active */
+\t--pf-c-accordion__toggle--active__toggle-text--FontWeight: var(--pf-global--FontWeight--semi-bold, 700);
+\t/** Color for the toggle text on focus */
+\t--pf-c-accordion__toggle--focus__toggle-text--Color: var(--pf-global--link--Color, #06c);
+\t/** FontWeight for the toggle text on focus */
+\t--pf-c-accordion__toggle--focus__toggle-text--FontWeight: var(--pf-global--FontWeight--semi-bold, 700);
+\t/** Color for the toggle text when expanded */
+\t--pf-c-accordion__toggle--m-expanded__toggle-text--Color: var(--pf-global--link--Color, #06c);
+\t/** FontWeight for the toggle text when expanded */
+\t--pf-c-accordion__toggle--m-expanded__toggle-text--FontWeight: var(--pf-global--FontWeight--semi-bold, 700);
+\t/** Transition for the toggle icon */
+\t--pf-c-accordion__toggle-icon--Transition: .2s ease-in 0s;
+\t/** Rotate value for the toggle icon when expanded */
+\t--pf-c-accordion__toggle--m-expanded__toggle-icon--Rotate: 90deg;
+\t/** Color for the expanded content */
+\t--pf-c-accordion__expanded-content--Color: var(--pf-global--Color--200, #6a6e73);
+\t/** FontSize for the expanded content */
+\t--pf-c-accordion__expanded-content--FontSize: var(--pf-global--FontSize--sm, 0.875rem);
+\t/** BackgroundColor for the expanded content body before element when expanded */
+\t--pf-c-accordion__expanded-content--m-expanded__expanded-content-body--before--BackgroundColor: var(--pf-global--primary-color--100, #06c);
+\t/** MaxHeight for the expanded content when fixed */
+\t--pf-c-accordion__expanded-content--m-fixed--MaxHeight: 9.375rem;
+\t/** PaddingTop for the expanded content body */
+\t--pf-c-accordion__expanded-content-body--PaddingTop: var(--pf-global--spacer--sm, 0.5rem);
+\t/** PaddingRight for the expanded content body */
+\t--pf-c-accordion__expanded-content-body--PaddingRight: var(--pf-global--spacer--md, 1rem);
+\t/** PaddingBottom for the expanded content body */
+\t--pf-c-accordion__expanded-content-body--PaddingBottom: var(--pf-global--spacer--sm, 0.5rem);
+\t/** PaddingLeft for the expanded content body */
+\t--pf-c-accordion__expanded-content-body--PaddingLeft: var(--pf-global--spacer--md, 1rem);
+\t/** PaddingTop for nested expanded content body */
+\t--pf-c-accordion__expanded-content-body--expanded-content-body--PaddingTop: 0;
+\t/** BackgroundColor for the expanded content body before element */
+\t--pf-c-accordion__expanded-content-body--before--BackgroundColor: transparent;
+\t/** Width for the expanded content body before element */
+\t--pf-c-accordion__expanded-content-body--before--Width: var(--pf-global--BorderWidth--lg, 3px);
+\t/** Top position for the expanded content body before element */
+\t--pf-c-accordion__expanded-content-body--before--Top: 0;
+\t/** PaddingTop for the toggle in large display mode */
+\t--pf-c-accordion--m-display-lg__toggle--PaddingTop: var(--pf-global--spacer--md, 1rem);
+\t/** PaddingRight for the toggle in large display mode */
+\t--pf-c-accordion--m-display-lg__toggle--PaddingRight: var(--pf-global--spacer--md, 1rem);
+\t/** PaddingBottom for the toggle in large display mode */
+\t--pf-c-accordion--m-display-lg__toggle--PaddingBottom: var(--pf-global--spacer--md, 1rem);
+\t/** PaddingLeft for the toggle in large display mode */
+\t--pf-c-accordion--m-display-lg__toggle--PaddingLeft: var(--pf-global--spacer--lg, 1.5rem);
+\t/** FontFamily for the toggle in large display mode */
+\t--pf-c-accordion--m-display-lg__toggle--FontFamily: var(--pf-global--FontFamily--heading--sans-serif, "RedHatDisplay", "Overpass", overpass, helvetica, arial, sans-serif);
+\t/** FontSize for the toggle in large display mode */
+\t--pf-c-accordion--m-display-lg__toggle--FontSize: var(--pf-global--FontSize--xl, 1.25rem);
+\t/** Color for the toggle text on hover in large display mode */
+\t--pf-c-accordion--m-display-lg__toggle--hover__toggle-text--Color: var(--pf-global--Color--100, #151515);
+\t/** Color for the toggle text when active in large display mode */
+\t--pf-c-accordion--m-display-lg__toggle--active__toggle-text--Color: var(--pf-global--Color--100, #151515);
+\t/** FontWeight for the toggle text when active in large display mode */
+\t--pf-c-accordion--m-display-lg__toggle--active__toggle-text--FontWeight: var(--pf-global--FontWeight--normal, 400);
+\t/** Color for the toggle text on focus in large display mode */
+\t--pf-c-accordion--m-display-lg__toggle--focus__toggle-text--Color: var(--pf-global--Color--100, #151515);
+\t/** FontWeight for the toggle text on focus in large display mode */
+\t--pf-c-accordion--m-display-lg__toggle--focus__toggle-text--FontWeight: var(--pf-global--FontWeight--normal, 400);
+\t/** Color for the toggle text when expanded in large display mode */
+\t--pf-c-accordion--m-display-lg__toggle--m-expanded__toggle-text--Color: var(--pf-global--Color--100, #151515);
+\t/** FontWeight for the toggle text when expanded in large display mode */
+\t--pf-c-accordion--m-display-lg__toggle--m-expanded__toggle-text--FontWeight: var(--pf-global--FontWeight--normal, 400);
+\t/** FontSize for the expanded content in large display mode */
+\t--pf-c-accordion--m-display-lg__expanded-content--FontSize: var(--pf-global--FontSize--md, 1rem);
+\t/** Color for the expanded content in large display mode */
+\t--pf-c-accordion--m-display-lg__expanded-content--Color: var(--pf-global--Color--100, #151515);
+\t/** PaddingTop for the expanded content body in large display mode */
+\t--pf-c-accordion--m-display-lg__expanded-content-body--PaddingTop: 0;
+\t/** PaddingRight for the expanded content body in large display mode */
+\t--pf-c-accordion--m-display-lg__expanded-content-body--PaddingRight: var(--pf-global--spacer--md, 1rem);
+\t/** PaddingBottom for the expanded content body in large display mode */
+\t--pf-c-accordion--m-display-lg__expanded-content-body--PaddingBottom: var(--pf-global--spacer--md, 1rem);
+\t/** PaddingBottom for the last child of expanded content body in large display mode */
+\t--pf-c-accordion--m-display-lg__expanded-content-body--last-child--PaddingBottom: var(--pf-global--spacer--lg, 1.5rem);
+\t/** PaddingLeft for the expanded content body in large display mode */
+\t--pf-c-accordion--m-display-lg__expanded-content-body--PaddingLeft: var(--pf-global--spacer--lg, 1.5rem);
+\t/** BorderTopWidth for the bordered variant */
+\t--pf-c-accordion--m-bordered--BorderTopWidth: var(--pf-global--BorderWidth--sm, 1px);
+\t/** BorderTopColor for the bordered variant */
+\t--pf-c-accordion--m-bordered--BorderTopColor: var(--pf-global--BorderColor--100, #d2d2d2);
+\t/** Top position for the toggle before element in bordered variant */
+\t--pf-c-accordion--m-bordered__toggle--before--Top: calc(-1 * var(--pf-global--BorderWidth--sm, 1px));
+\t/** BorderColor for the toggle after element in bordered variant */
+\t--pf-c-accordion--m-bordered__toggle--after--BorderColor: var(--pf-global--BorderColor--100, #d2d2d2);
+\t/** BorderTopWidth for the toggle after element in bordered variant */
+\t--pf-c-accordion--m-bordered__toggle--after--BorderTopWidth: 0;
+\t/** BorderBottomWidth for the toggle after element in bordered variant */
+\t--pf-c-accordion--m-bordered__toggle--after--BorderBottomWidth: var(--pf-global--BorderWidth--sm, 1px);
+\t/** BorderBottomWidth for the last child after element in bordered expanded content */
+\t--pf-c-accordion--m-bordered__expanded-content--m-expanded__expanded-content-body--last-child--after--BorderBottomWidth: var(--pf-global--BorderWidth--sm, 1px);
+\t/** BorderBottomColor for the last child after element in bordered expanded content */
+\t--pf-c-accordion--m-bordered__expanded-content--m-expanded__expanded-content-body--last-child--after--BorderBottomColor: var(--pf-global--BorderColor--100, #d2d2d2);
+\tcolor: var(--pf-global--Color--100, #151515);
+\tbackground-color: var(--pf-c-accordion--BackgroundColor);
+}
+
+:host([bordered]) ::slotted(pf-accordion-header:first-child),
+:host([large]) ::slotted(pf-accordion-header:first-child) {
+  display: block;
+  border-top: 1px solid var(--accordion__bordered--Color);
+  border-bottom: 1px solid var(--accordion__bordered--Color);
+}
+
+:host([bordered]) ::slotted(pf-accordion-header:not(:first-child)),
+:host([large]) ::slotted(pf-accordion-header:not(:first-child)) {
+  display: block;
+  border-bottom: 1px solid var(--accordion__bordered--Color);
+}
+
+:host([bordered]) ::slotted(pf-accordion-header:is([expanded])),
+:host([large]) ::slotted(pf-accordion-header:is([expanded])) {
+  display: block;
+  border-bottom: 0;
+}
+
+:host([bordered]) ::slotted(pf-accordion-panel:is([expanded])),
+:host([large]) ::slotted(pf-accordion-panel:is([expanded])) {
+  display: block;
+  border-bottom: 1px solid var(--accordion__bordered--Color);
+}
+`;
 export class PfAccordionExpandEvent extends Event {
     constructor(toggle, panel) {
         super('expand', { bubbles: true, cancelable: true });
@@ -88,6 +241,7 @@ let PfAccordion = class PfAccordion extends LitElement {
     }
     render() {
         return html `
+      <!-- Place the \`pf-accordion-header\` and \`pf-accordion-panel\` elements here. -->
       <slot></slot>
     `;
     }
@@ -300,7 +454,7 @@ _PfAccordion_getIndex = function _PfAccordion_getIndex(el) {
     return -1;
 };
 PfAccordion.styles = [style];
-PfAccordion.version = "4.1.0";
+PfAccordion.version = "4.2.0";
 __decorate([
     property({ reflect: true, type: Boolean })
 ], PfAccordion.prototype, "single", void 0);