@patternfly/elements 4.1.0 → 4.3.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@patternfly/elements",
   "license": "MIT",
-  "version": "4.1.0",
+  "version": "4.3.0",
   "description": "PatternFly Elements",
   "customElements": "custom-elements.json",
   "type": "module",
@@ -15,6 +15,7 @@
     "./pf-accordion/pf-accordion-header.js": "./pf-accordion/pf-accordion-header.js",
     "./pf-accordion/pf-accordion-panel.js": "./pf-accordion/pf-accordion-panel.js",
     "./pf-accordion/pf-accordion.js": "./pf-accordion/pf-accordion.js",
+    "./pf-alert/pf-alert.js": "./pf-alert/pf-alert.js",
     "./pf-avatar/pf-avatar.js": "./pf-avatar/pf-avatar.js",
     "./pf-back-to-top/pf-back-to-top.js": "./pf-back-to-top/pf-back-to-top.js",
     "./pf-background-image/pf-background-image.js": "./pf-background-image/pf-background-image.js",
@@ -26,10 +27,13 @@
     "./pf-chip/pf-chip-group.js": "./pf-chip/pf-chip-group.js",
     "./pf-clipboard-copy/pf-clipboard-copy.js": "./pf-clipboard-copy/pf-clipboard-copy.js",
     "./pf-code-block/pf-code-block.js": "./pf-code-block/pf-code-block.js",
+    "./pf-dropdown/context.js": "./pf-dropdown/context.js",
+    "./pf-dropdown/pf-dropdown-group.js": "./pf-dropdown/pf-dropdown-group.js",
+    "./pf-dropdown/pf-dropdown-item.js": "./pf-dropdown/pf-dropdown-item.js",
+    "./pf-dropdown/pf-dropdown-menu.js": "./pf-dropdown/pf-dropdown-menu.js",
     "./pf-dropdown/pf-dropdown.js": "./pf-dropdown/pf-dropdown.js",
-    "./pf-dropdown/pf-dropdown-group.js": "./pf-dropdown/pf-dropdown-group.ts",
-    "./pf-dropdown/pf-dropdown-menu.js": "./pf-dropdown/pf-dropdown-menu.ts",
-    "./pf-dropdown/pf-dropdown-item.js": "./pf-dropdown/pf-dropdown-item.ts",
+    "./pf-helper-text/pf-helper-text.js": "./pf-helper-text/pf-helper-text.js",
+    "./pf-hint/pf-hint.js": "./pf-hint/pf-hint.js",
     "./pf-icon/pf-icon.js": "./pf-icon/pf-icon.js",
     "./pf-jazz-hands/pf-jazz-hands.js": "./pf-jazz-hands/pf-jazz-hands.js",
     "./pf-jump-links/pf-jump-links-item.js": "./pf-jump-links/pf-jump-links-item.js",
@@ -45,15 +49,18 @@
     "./pf-progress-stepper/pf-progress-step.js": "./pf-progress-stepper/pf-progress-step.js",
     "./pf-progress-stepper/pf-progress-stepper.js": "./pf-progress-stepper/pf-progress-stepper.js",
     "./pf-progress/pf-progress.js": "./pf-progress/pf-progress.js",
+    "./pf-search-input/pf-search-input.js": "./pf-search-input/pf-search-input.js",
     "./pf-spinner/pf-spinner.js": "./pf-spinner/pf-spinner.js",
     "./pf-switch/pf-switch.js": "./pf-switch/pf-switch.js",
+    "./pf-table/context.js": "./pf-table/context.js",
+    "./pf-table/pf-caption.js": "./pf-table/pf-caption.js",
     "./pf-table/pf-table.js": "./pf-table/pf-table.js",
-    "./pf-table/pf-thead.js": "./pf-table/pf-thead.js",
     "./pf-table/pf-tbody.js": "./pf-table/pf-tbody.js",
-    "./pf-table/pf-tr.js": "./pf-table/pf-tr.js",
-    "./pf-table/pf-th.js": "./pf-table/pf-th.js",
     "./pf-table/pf-td.js": "./pf-table/pf-td.js",
-    "./pf-table/pf-caption.js": "./pf-table/pf-caption.js",
+    "./pf-table/pf-th.js": "./pf-table/pf-th.js",
+    "./pf-table/pf-thead.js": "./pf-table/pf-thead.js",
+    "./pf-table/pf-tr.js": "./pf-table/pf-tr.js",
+    "./pf-tabs/context.js": "./pf-tabs/context.js",
     "./pf-tabs/pf-tab-panel.js": "./pf-tabs/pf-tab-panel.js",
     "./pf-tabs/pf-tab.js": "./pf-tabs/pf-tab.js",
     "./pf-tabs/pf-tabs.js": "./pf-tabs/pf-tabs.js",
@@ -71,7 +78,7 @@
   },
   "scripts": {
     "prepublishOnly": "npm run build",
-    "analyze": "cem analyze",
+    "analyze": "cem generate",
     "build": "wireit",
     "test": "wtr --files './test/*.spec.ts' --config ../../web-test-runner.config.js"
   },
@@ -104,15 +111,18 @@
     "**/*.d.ts",
     "**/*.js",
     "**/*.js.map",
-    "!custom-elements-manifest.config.js",
     "!demo/*",
     "!docs/*",
     "!test/*"
   ],
   "contributors": [
+    "Ajinyka Shinde <sajinkya359@gmail.com>",
+    "Avigail Chubara (https://github.com/chubara62372)",
     "Benny Powers <bennyp@redhat.com>",
+    "Daly Betzalel (https://github.com/dali327519294)",
     "Daniel Faucette",
     "Diwanshi Pandey <diwanshipandey@gmail.com> (https://github.com/diwanshi)",
+    "Gili Greenberger (https://github.com/Gili-Greenberger)",
     "Ivana Rodriguez (https://github.com/eyevana)",
     "Kendall Totten",
     "Kyle Buchanan <kylebuch8@gmail.com> (https://github.com/kylebuch8)",
@@ -121,17 +131,16 @@
     "Michael Clayton <mclayton@redhat.com>",
     "Michael Potter",
     "Nikki Massaro Kauffman <nmassaro@redhat.com> (https://github.com/nikkimk)",
+    "Rohit Bharmal (https://github.com/Rohit2601)",
     "Steven Spriggs <sspriggs@redhat.com",
-    "castastrophe (https://github.com/castastrophe)",
     "Wes Ruvalcaba",
-    "Rohit Bharmal (https://github.com/Rohit2601)",
-    "Ajinyka Shinde <sajinkya359@gmail.com>"
+    "castastrophe (https://github.com/castastrophe)"
   ],
   "dependencies": {
-    "@lit/context": "^1.1.2",
+    "@lit/context": "^1.1.6",
     "@patternfly/icons": "^1.0.3",
-    "@patternfly/pfe-core": "^5.0.0",
-    "lit": "^3.2.1",
-    "tslib": "^2.6.3"
+    "@patternfly/pfe-core": "^5.0.5",
+    "lit": "^3.3.2",
+    "tslib": "^2.8.1"
   }
 }

package/pf-accordion/pf-accordion-header.css

@@ -1,15 +1,23 @@
 :host {
   --pf-icon--size: var(--pf-c-accordion__toggle--IconSize, 10px);
 
+  /**
+   * Sets the font color for the accordion header.
+   */
   color: var(--pf-c-accordion__toggle--Color, var(--pf-global--Color--100, #151515));
   background-color: var(--pf-global--BackgroundColor--100, #ffffff);
 }
 
 :host([large]) {
+  /** Sets the top padding for the accordion header. */
   --pf-c-accordion__toggle--PaddingTop: var(--pf-global--spacer--md, 1rem);
+  /** Sets the right padding for the accordion header. */
   --pf-c-accordion__toggle--PaddingRight: var(--pf-global--spacer--md, 1rem);
+  /** Sets the bottom padding for the accordion header. */
   --pf-c-accordion__toggle--PaddingBottom: var(--pf-global--spacer--md, 1rem);
+  /** Sets the left padding for the accordion header. */
   --pf-c-accordion__toggle--PaddingLeft: var(--pf-global--spacer--lg, 1.5rem);
+  /** Sets the font family for the accordion header. */
   --pf-c-accordion__toggle--FontFamily:
     var(--pf-global--FontFamily--redhat-updated--heading--sans-serif,
       "RedHatDisplayUpdated",
@@ -19,6 +27,7 @@
       arial,
       sans-serif
     );
+  /** Sets the font size for the accordion header. */
   --pf-c-accordion__toggle--FontSize: var(--pf-global--FontSize--xl, 1.25rem);
   --pf-c-accordion__toggle--hover-text--Color: var(--pf-global--Color--100, #151515);
   --pf-c-accordion__toggle--active-text--Color: var(--pf-global--Color--100, #151515);
@@ -47,10 +56,14 @@ a {
 .toggle:after {
   padding: 0;
   margin: 0;
+  /** Sets the background color for the accordion header toggle element. */
   background-color: var(--pf-c-accordion__toggle--BackgroundColor, transparent);
 }
 
 .icon {
+  /**
+   * Sets the transition animation for the accordion header.
+   */
   transition: var(--pf-c-accordion__toggle-icon--Transition, 0.2s ease-in 0s);
 }
 
@@ -74,12 +87,18 @@ a {
         arial,
         sans-serif));
   font-size: var(--pf-c-accordion__toggle--FontSize, var(--pf-global--FontSize--lg, 1rem));
+  /**
+   * Sets the font weight for the accordion header.
+   */
   font-weight: var(--pf-c-accordion__toggle--FontWeight, var(--pf-global--FontWeight--normal, 400));
   color: var(--pf-c-accordion__toggle--Color, var(--pf-global--Color--100, #151515));
 }
 
 .toggle[aria-expanded="true"] {
   --pf-c-accordion__toggle--after--BackgroundColor:
+    /**
+     * Sets the hover expanded before background color for the accordion header.
+     */
     var(
       --pf-c-accordion__toggle--expanded--before--BackgroundColor,
       var(
@@ -91,7 +110,13 @@ a {
 
 .toggle:after {
   top: var(--pf-c-accordion__toggle--before--Top, -1px);
+  /**
+   * Sets the sidebar width for the accordion header.
+   */
   width: var(--pf-c-accordion__toggle--before--Width, var(--pf-global--BorderWidth--lg, 3px));
+  /**
+   * Sets the background color for the after element for the accordion header toggle element.
+   */
   background-color: var(--pf-c-accordion__toggle--after--BackgroundColor, transparent);
   content: "";
   position: absolute;
@@ -103,17 +128,26 @@ span {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  /**
+   * Sets the max width for the text inside the accordion header.
+   */
   max-width: var(--pf-c-accordion__toggle-text--MaxWidth,
     calc(100% - var(--pf-global--spacer--lg, 1.5rem)));
 }
 
 .toggle[aria-expanded="true"] .icon {
+  /**
+   * Sets the expanded icon rotation degrees for the accordion header.
+   */
   rotate: var(--pf-c-accordion__toggle--expanded-icon--Rotate, 90deg);
 }
 
 .toggle:hover,
 .toggle:active,
 .toggle:focus {
+  /**
+   * Sets the active background color for the accordion header.
+   */
   background-color:
     var(--pf-c-accordion__toggle--active--BackgroundColor,
       var(--pf-global--BackgroundColor--200, #f0f0f0));
@@ -122,6 +156,9 @@ span {
 .toggle:hover span,
 .toggle:focus span,
 .toggle:active span {
+  /**
+   * Sets the active text color for the accordion header.
+   */
   color: var(--pf-c-accordion__toggle--active-text--Color, var(--pf-global--link--Color, #0066cc));
 }
 

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

@@ -10,68 +10,7 @@ export declare class PfAccordionHeaderChangeEvent extends Event {
 }
 /**
  * Accordion Header
- * @csspart text - inline element containing the heading text or slotted heading content
- * @csspart accents - container for accents within the header
- * @csspart icon - caret icon
- * @slot
- *       We expect the light DOM of the pf-accordion-header to be a heading level tag (h1, h2, h3, h4, h5, h6)
- * @slot accents
- *       These elements will appear inline with the accordion header, between the header and the chevron
- *       (or after the chevron and header in disclosure mode).
  * @fires {AccordionHeaderChangeEvent} change - when the open panels change
- * @cssprop     {<color>} [--pf-c-accordion__toggle--Color=var(--pf-global--Color--100, #151515)]
- *              Sets the font color for the accordion header.
- *
- * @cssprop     {<color>} [--pf-c-accordion__toggle--BackgroundColor=transparent]
- *              Sets the background color for the accordion header toggle element.
- *
- * @cssprop     {<color>} [--pf-c-accordion__toggle--after--BackgroundColor=transparent]
- *              Sets the background color for the after element for the accordion header toggle element.
- *
- * @cssprop     {<length>} [--pf-c-accordion__toggle--PaddingTop=var(--pf-global--spacer--sm, 0.5rem)]
- *              Sets the top padding for the accordion header.
- *
- * @cssprop     {<length>} [--pf-c-accordion__toggle--PaddingRight=var(--pf-global--spacer--md, 1rem)]
- *              Sets the right padding for the accordion header.
- *
- * @cssprop     {<length>} [--pf-c-accordion__toggle--PaddingBottom=var(--pf-global--spacer--sm, 0.5rem)]
- *              Sets the bottom padding for the accordion header.
- *
- * @cssprop     {<length>} [--pf-c-accordion__toggle--PaddingLeft=var(--pf-global--spacer--md, 1rem)]
- *              Sets the left padding for the accordion header.
- *
- * @cssprop     {<length>} [--pf-c-accordion__toggle--FontSize=var(--pf-global--FontSize--lg, 1rem)]
- *              Sets the sidebar background color for the accordion header.
- *
- * @cssprop     {<color>} [--pf-c-accordion__toggle--FontFamily=var(--pf-global--FontFamily--redhat-updated--heading--sans-serif, "RedHatDisplayUpdated", helvetica, arial, sans-serif)]
- *              Sets the font family for the accordion header.
- *
- * @cssprop     [--pf-c-accordion__toggle--FontWeight=var(--pf-global--FontWeight--normal, 400)]
- *              Sets the font weight for the accordion header.
- *
- * @cssprop     {<color>} [--pf-c-accordion__toggle--active--BackgroundColor=var(--pf-global--BackgroundColor--200, #f0f0f0)]
- *              Sets the active backgrdound color for the accordion header.
- *
- * @cssprop     {<color>} [--pf-c-accordion__toggle--active-text--Color=var(--pf-global--link--Color, #0066cc)]
- *              Sets the active text color for the accordion header.
- *
- * @cssprop     [--pf-c-accordion__toggle--active-text--FontWeight=var(--pf-global--FontWeight--semi-bold, 700)]
- *              Sets the active text font weight for the accordion header.
- *
- * @cssprop     {<color>} [--pf-c-accordion__toggle--expanded--before--BackgroundColor=var(--pf-global--link--Color, #0066cc)]
- *              Sets the hover expanded before background color for the accordion header.
- *
- * @cssprop     [--pf-c-accordion__toggle--expanded-icon--Rotate=90deg]
- *              Sets the expanded icon rotation degrees for the accordion header.
- *
- * @cssprop     {<length>} [--pf-c-accordion__toggle-text--MaxWidth=calc(100 - var(--pf-global--spacer--lg, 1.5rem))]
- *              Sets the max width for the text inside the accordion header.
- *
- * @cssprop     [--pf-c-accordion__toggle--before--Width=var(--pf-global--BorderWidth--lg, 3px)]
- *              Sets the sidebar width for the accordion header.
- *
- * @cssprop     [--pf-c-accordion__toggle-icon--Transition=0.2s ease-in 0s]
- *              Sets the transition animation for the accordion header.
  *
  */
 export declare class PfAccordionHeader extends LitElement {

package/pf-accordion/pf-accordion-header.js

@@ -7,7 +7,176 @@ import { SlotController } from '@patternfly/pfe-core/controllers/slot-controller
 import { Logger } from '@patternfly/pfe-core/controllers/logger.js';
 import { getRandomId } from '@patternfly/pfe-core/functions/random.js';
 import { css } from "lit";
-const style = css `:host {\n  --pf-icon--size: var(--pf-c-accordion__toggle--IconSize, 10px);\n\n  color: var(--pf-c-accordion__toggle--Color, var(--pf-global--Color--100, #151515));\n  background-color: var(--pf-global--BackgroundColor--100, #ffffff);\n}\n\n:host([large]) {\n  --pf-c-accordion__toggle--PaddingTop: var(--pf-global--spacer--md, 1rem);\n  --pf-c-accordion__toggle--PaddingRight: var(--pf-global--spacer--md, 1rem);\n  --pf-c-accordion__toggle--PaddingBottom: var(--pf-global--spacer--md, 1rem);\n  --pf-c-accordion__toggle--PaddingLeft: var(--pf-global--spacer--lg, 1.5rem);\n  --pf-c-accordion__toggle--FontFamily:\n    var(--pf-global--FontFamily--redhat-updated--heading--sans-serif,\n      "RedHatDisplayUpdated",\n      "Overpass",\n      overpass,\n      helvetica,\n      arial,\n      sans-serif\n    );\n  --pf-c-accordion__toggle--FontSize: var(--pf-global--FontSize--xl, 1.25rem);\n  --pf-c-accordion__toggle--hover-text--Color: var(--pf-global--Color--100, #151515);\n  --pf-c-accordion__toggle--active-text--Color: var(--pf-global--Color--100, #151515);\n  --pf-c-accordion__toggle--active-text--FontWeight: var(--pf-global--FontWeight--normal, 400);\n  --pf-c-accordion__toggle--focus-text--Color: var(--pf-global--Color--100, #151515);\n  --pf-c-accordion__toggle--focus-text--FontWeight: var(--pf-global--FontWeight--normal, 400);\n  --pf-c-accordion__toggle--expanded-text--Color: var(--pf-global--Color--100, #151515);\n  --pf-c-accordion__toggle--expanded-text--FontWeight: var(--pf-global--FontWeight--normal, 400);\n  --pf-icon--size: var(--pf-c-accordion__toggle--IconSize, 12px);\n}\n\n#heading {\n  font-weight: var(--pf-c-accordion__toggle--FontWeight, var(--pf-global--FontWeight--normal, 400));\n  font-size: 100%;\n  padding: 0;\n  margin: 0;\n}\n\nbutton,\na {\n  cursor: pointer;\n}\n\n.toggle,\n.toggle:before,\n.toggle:after {\n  padding: 0;\n  margin: 0;\n  background-color: var(--pf-c-accordion__toggle--BackgroundColor, transparent);\n}\n\n.icon {\n  transition: var(--pf-c-accordion__toggle-icon--Transition, 0.2s ease-in 0s);\n}\n\n.toggle {\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  border: 0;\n  padding:\n    var(--pf-c-accordion__toggle--PaddingTop, var(--pf-global--spacer--md, 0.5rem))\n    var(--pf-c-accordion__toggle--PaddingRight, var(--pf-global--spacer--md, 1rem))\n    var(--pf-c-accordion__toggle--PaddingBottom, var(--pf-global--spacer--sm, 0.5rem))\n    var(--pf-c-accordion__toggle--PaddingLeft, var(--pf-global--spacer--md, 1rem));\n  font-family:\n    var(--pf-c-accordion__toggle--FontFamily,\n      var(--pf-global--FontFamily--redhat-updated--heading--sans-serif,\n        "RedHatTextUpdated",\n        helvetica,\n        arial,\n        sans-serif));\n  font-size: var(--pf-c-accordion__toggle--FontSize, var(--pf-global--FontSize--lg, 1rem));\n  font-weight: var(--pf-c-accordion__toggle--FontWeight, var(--pf-global--FontWeight--normal, 400));\n  color: var(--pf-c-accordion__toggle--Color, var(--pf-global--Color--100, #151515));\n}\n\n.toggle[aria-expanded="true"] {\n  --pf-c-accordion__toggle--after--BackgroundColor:\n    var(\n      --pf-c-accordion__toggle--expanded--before--BackgroundColor,\n      var(\n        --pf-global--primary-color--100,\n        #0066cc\n      )\n    );\n}\n\n.toggle:after {\n  top: var(--pf-c-accordion__toggle--before--Top, -1px);\n  width: var(--pf-c-accordion__toggle--before--Width, var(--pf-global--BorderWidth--lg, 3px));\n  background-color: var(--pf-c-accordion__toggle--after--BackgroundColor, transparent);\n  content: "";\n  position: absolute;\n  bottom: 0;\n  left: 0;\n}\n\nspan {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  max-width: var(--pf-c-accordion__toggle-text--MaxWidth,\n    calc(100% - var(--pf-global--spacer--lg, 1.5rem)));\n}\n\n.toggle[aria-expanded="true"] .icon {\n  rotate: var(--pf-c-accordion__toggle--expanded-icon--Rotate, 90deg);\n}\n\n.toggle:hover,\n.toggle:active,\n.toggle:focus {\n  background-color:\n    var(--pf-c-accordion__toggle--active--BackgroundColor,\n      var(--pf-global--BackgroundColor--200, #f0f0f0));\n}\n\n.toggle:hover span,\n.toggle:focus span,\n.toggle:active span {\n  color: var(--pf-c-accordion__toggle--active-text--Color, var(--pf-global--link--Color, #0066cc));\n}\n\n.toggle:focus span,\n.toggle:active span {\n  font-weight: var(--pf-c-accordion__toggle--active-text--FontWeight,\n      var(--pf-global--FontWeight--semi-bold, 700));\n}\n`;
+const style = css `:host {
+  --pf-icon--size: var(--pf-c-accordion__toggle--IconSize, 10px);
+
+  /**
+   * Sets the font color for the accordion header.
+   */
+  color: var(--pf-c-accordion__toggle--Color, var(--pf-global--Color--100, #151515));
+  background-color: var(--pf-global--BackgroundColor--100, #ffffff);
+}
+
+:host([large]) {
+  /** Sets the top padding for the accordion header. */
+  --pf-c-accordion__toggle--PaddingTop: var(--pf-global--spacer--md, 1rem);
+  /** Sets the right padding for the accordion header. */
+  --pf-c-accordion__toggle--PaddingRight: var(--pf-global--spacer--md, 1rem);
+  /** Sets the bottom padding for the accordion header. */
+  --pf-c-accordion__toggle--PaddingBottom: var(--pf-global--spacer--md, 1rem);
+  /** Sets the left padding for the accordion header. */
+  --pf-c-accordion__toggle--PaddingLeft: var(--pf-global--spacer--lg, 1.5rem);
+  /** Sets the font family for the accordion header. */
+  --pf-c-accordion__toggle--FontFamily:
+    var(--pf-global--FontFamily--redhat-updated--heading--sans-serif,
+      "RedHatDisplayUpdated",
+      "Overpass",
+      overpass,
+      helvetica,
+      arial,
+      sans-serif
+    );
+  /** Sets the font size for the accordion header. */
+  --pf-c-accordion__toggle--FontSize: var(--pf-global--FontSize--xl, 1.25rem);
+  --pf-c-accordion__toggle--hover-text--Color: var(--pf-global--Color--100, #151515);
+  --pf-c-accordion__toggle--active-text--Color: var(--pf-global--Color--100, #151515);
+  --pf-c-accordion__toggle--active-text--FontWeight: var(--pf-global--FontWeight--normal, 400);
+  --pf-c-accordion__toggle--focus-text--Color: var(--pf-global--Color--100, #151515);
+  --pf-c-accordion__toggle--focus-text--FontWeight: var(--pf-global--FontWeight--normal, 400);
+  --pf-c-accordion__toggle--expanded-text--Color: var(--pf-global--Color--100, #151515);
+  --pf-c-accordion__toggle--expanded-text--FontWeight: var(--pf-global--FontWeight--normal, 400);
+  --pf-icon--size: var(--pf-c-accordion__toggle--IconSize, 12px);
+}
+
+#heading {
+  font-weight: var(--pf-c-accordion__toggle--FontWeight, var(--pf-global--FontWeight--normal, 400));
+  font-size: 100%;
+  padding: 0;
+  margin: 0;
+}
+
+button,
+a {
+  cursor: pointer;
+}
+
+.toggle,
+.toggle:before,
+.toggle:after {
+  padding: 0;
+  margin: 0;
+  /** Sets the background color for the accordion header toggle element. */
+  background-color: var(--pf-c-accordion__toggle--BackgroundColor, transparent);
+}
+
+.icon {
+  /**
+   * Sets the transition animation for the accordion header.
+   */
+  transition: var(--pf-c-accordion__toggle-icon--Transition, 0.2s ease-in 0s);
+}
+
+.toggle {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  border: 0;
+  padding:
+    var(--pf-c-accordion__toggle--PaddingTop, var(--pf-global--spacer--md, 0.5rem))
+    var(--pf-c-accordion__toggle--PaddingRight, var(--pf-global--spacer--md, 1rem))
+    var(--pf-c-accordion__toggle--PaddingBottom, var(--pf-global--spacer--sm, 0.5rem))
+    var(--pf-c-accordion__toggle--PaddingLeft, var(--pf-global--spacer--md, 1rem));
+  font-family:
+    var(--pf-c-accordion__toggle--FontFamily,
+      var(--pf-global--FontFamily--redhat-updated--heading--sans-serif,
+        "RedHatTextUpdated",
+        helvetica,
+        arial,
+        sans-serif));
+  font-size: var(--pf-c-accordion__toggle--FontSize, var(--pf-global--FontSize--lg, 1rem));
+  /**
+   * Sets the font weight for the accordion header.
+   */
+  font-weight: var(--pf-c-accordion__toggle--FontWeight, var(--pf-global--FontWeight--normal, 400));
+  color: var(--pf-c-accordion__toggle--Color, var(--pf-global--Color--100, #151515));
+}
+
+.toggle[aria-expanded="true"] {
+  --pf-c-accordion__toggle--after--BackgroundColor:
+    /**
+     * Sets the hover expanded before background color for the accordion header.
+     */
+    var(
+      --pf-c-accordion__toggle--expanded--before--BackgroundColor,
+      var(
+        --pf-global--primary-color--100,
+        #0066cc
+      )
+    );
+}
+
+.toggle:after {
+  top: var(--pf-c-accordion__toggle--before--Top, -1px);
+  /**
+   * Sets the sidebar width for the accordion header.
+   */
+  width: var(--pf-c-accordion__toggle--before--Width, var(--pf-global--BorderWidth--lg, 3px));
+  /**
+   * Sets the background color for the after element for the accordion header toggle element.
+   */
+  background-color: var(--pf-c-accordion__toggle--after--BackgroundColor, transparent);
+  content: "";
+  position: absolute;
+  bottom: 0;
+  left: 0;
+}
+
+span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  /**
+   * Sets the max width for the text inside the accordion header.
+   */
+  max-width: var(--pf-c-accordion__toggle-text--MaxWidth,
+    calc(100% - var(--pf-global--spacer--lg, 1.5rem)));
+}
+
+.toggle[aria-expanded="true"] .icon {
+  /**
+   * Sets the expanded icon rotation degrees for the accordion header.
+   */
+  rotate: var(--pf-c-accordion__toggle--expanded-icon--Rotate, 90deg);
+}
+
+.toggle:hover,
+.toggle:active,
+.toggle:focus {
+  /**
+   * Sets the active background color for the accordion header.
+   */
+  background-color:
+    var(--pf-c-accordion__toggle--active--BackgroundColor,
+      var(--pf-global--BackgroundColor--200, #f0f0f0));
+}
+
+.toggle:hover span,
+.toggle:focus span,
+.toggle:active span {
+  /**
+   * Sets the active text color for the accordion header.
+   */
+  color: var(--pf-c-accordion__toggle--active-text--Color, var(--pf-global--link--Color, #0066cc));
+}
+
+.toggle:focus span,
+.toggle:active span {
+  font-weight: var(--pf-c-accordion__toggle--active-text--FontWeight,
+      var(--pf-global--FontWeight--semi-bold, 700));
+}
+`;
 import '@patternfly/elements/pf-icon/pf-icon.js';
 const isPorHeader = (el) => el instanceof HTMLElement && !!el.tagName.match(/P|^H[1-6]/);
 export class PfAccordionHeaderChangeEvent extends Event {
@@ -40,12 +209,21 @@ let PfAccordionHeader = class PfAccordionHeader extends LitElement {
               class="toggle"
               @click="${__classPrivateFieldGet(this, _PfAccordionHeader_instances, "m", _PfAccordionHeader_onClick)}"
               aria-expanded="${String(!!this.expanded)}">
+        <!-- summary: inline element containing the heading text or slotted heading content -->
         <span part="text">${headingText ?? html `
+          <!-- summary: A heading level tag (h1, h2, h3, h4, h5, h6) -->
           <slot></slot>`}
         </span>
+        <!-- summary: container for accents within the header -->
         <span part="accents" ?hidden="${__classPrivateFieldGet(this, _PfAccordionHeader_slots, "f").isEmpty('accents')}">
+          <!-- summary: Header accent elements like tag or icon
+               description: |
+                 These elements will appear inline with the accordion header,
+                 between the header and the chevron
+                 (or after the chevron and header in disclosure mode). -->
           <slot name="accents"></slot>
         </span>
+        <!-- summary: caret icon -->
         <pf-icon part="icon"
                  class="icon"
                  size="lg"
@@ -131,7 +309,7 @@ PfAccordionHeader.shadowRootOptions = {
     ...LitElement.shadowRootOptions,
     delegatesFocus: true,
 };
-PfAccordionHeader.version = "4.1.0";
+PfAccordionHeader.version = "4.3.0";
 __decorate([
     property({ reflect: true })
 ], PfAccordionHeader.prototype, "bordered", void 0);

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

@@ -1 +1 @@
-{"version":3,"file":"pf-accordion-header.js","sourceRoot":"","sources":["pf-accordion-header.ts"],"names":[],"mappings":"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","sourcesContent":["import type { PfAccordion } from './pf-accordion.js';\n\nimport { LitElement, html, type TemplateResult } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\n\nimport { SlotController } from '@patternfly/pfe-core/controllers/slot-controller.js';\nimport { Logger } from '@patternfly/pfe-core/controllers/logger.js';\n\nimport { getRandomId } from '@patternfly/pfe-core/functions/random.js';\n\nimport style from './pf-accordion-header.css';\n\nimport '@patternfly/elements/pf-icon/pf-icon.js';\n\nconst isPorHeader =\n  (el: Node): el is HTMLElement =>\n    el instanceof HTMLElement && !!el.tagName.match(/P|^H[1-6]/);\n\nexport class PfAccordionHeaderChangeEvent extends Event {\n  declare target: PfAccordionHeader;\n  constructor(\n    public expanded: boolean,\n    public toggle: PfAccordionHeader,\n    public accordion: PfAccordion\n  ) {\n    super('change', { bubbles: true });\n  }\n}\n\n/**\n * Accordion Header\n * @csspart text - inline element containing the heading text or slotted heading content\n * @csspart accents - container for accents within the header\n * @csspart icon - caret icon\n * @slot\n *       We expect the light DOM of the pf-accordion-header to be a heading level tag (h1, h2, h3, h4, h5, h6)\n * @slot accents\n *       These elements will appear inline with the accordion header, between the header and the chevron\n *       (or after the chevron and header in disclosure mode).\n * @fires {AccordionHeaderChangeEvent} change - when the open panels change\n * @cssprop     {<color>} [--pf-c-accordion__toggle--Color=var(--pf-global--Color--100, #151515)]\n *              Sets the font color for the accordion header.\n *\n * @cssprop     {<color>} [--pf-c-accordion__toggle--BackgroundColor=transparent]\n *              Sets the background color for the accordion header toggle element.\n *\n * @cssprop     {<color>} [--pf-c-accordion__toggle--after--BackgroundColor=transparent]\n *              Sets the background color for the after element for the accordion header toggle element.\n *\n * @cssprop     {<length>} [--pf-c-accordion__toggle--PaddingTop=var(--pf-global--spacer--sm, 0.5rem)]\n *              Sets the top padding for the accordion header.\n *\n * @cssprop     {<length>} [--pf-c-accordion__toggle--PaddingRight=var(--pf-global--spacer--md, 1rem)]\n *              Sets the right padding for the accordion header.\n *\n * @cssprop     {<length>} [--pf-c-accordion__toggle--PaddingBottom=var(--pf-global--spacer--sm, 0.5rem)]\n *              Sets the bottom padding for the accordion header.\n *\n * @cssprop     {<length>} [--pf-c-accordion__toggle--PaddingLeft=var(--pf-global--spacer--md, 1rem)]\n *              Sets the left padding for the accordion header.\n *\n * @cssprop     {<length>} [--pf-c-accordion__toggle--FontSize=var(--pf-global--FontSize--lg, 1rem)]\n *              Sets the sidebar background color for the accordion header.\n *\n * @cssprop     {<color>} [--pf-c-accordion__toggle--FontFamily=var(--pf-global--FontFamily--redhat-updated--heading--sans-serif, \"RedHatDisplayUpdated\", helvetica, arial, sans-serif)]\n *              Sets the font family for the accordion header.\n *\n * @cssprop     [--pf-c-accordion__toggle--FontWeight=var(--pf-global--FontWeight--normal, 400)]\n *              Sets the font weight for the accordion header.\n *\n * @cssprop     {<color>} [--pf-c-accordion__toggle--active--BackgroundColor=var(--pf-global--BackgroundColor--200, #f0f0f0)]\n *              Sets the active backgrdound color for the accordion header.\n *\n * @cssprop     {<color>} [--pf-c-accordion__toggle--active-text--Color=var(--pf-global--link--Color, #0066cc)]\n *              Sets the active text color for the accordion header.\n *\n * @cssprop     [--pf-c-accordion__toggle--active-text--FontWeight=var(--pf-global--FontWeight--semi-bold, 700)]\n *              Sets the active text font weight for the accordion header.\n *\n * @cssprop     {<color>} [--pf-c-accordion__toggle--expanded--before--BackgroundColor=var(--pf-global--link--Color, #0066cc)]\n *              Sets the hover expanded before background color for the accordion header.\n *\n * @cssprop     [--pf-c-accordion__toggle--expanded-icon--Rotate=90deg]\n *              Sets the expanded icon rotation degrees for the accordion header.\n *\n * @cssprop     {<length>} [--pf-c-accordion__toggle-text--MaxWidth=calc(100 - var(--pf-global--spacer--lg, 1.5rem))]\n *              Sets the max width for the text inside the accordion header.\n *\n * @cssprop     [--pf-c-accordion__toggle--before--Width=var(--pf-global--BorderWidth--lg, 3px)]\n *              Sets the sidebar width for the accordion header.\n *\n * @cssprop     [--pf-c-accordion__toggle-icon--Transition=0.2s ease-in 0s]\n *              Sets the transition animation for the accordion header.\n *\n */\n@customElement('pf-accordion-header')\nexport class PfAccordionHeader extends LitElement {\n  static readonly styles: CSSStyleSheet[] = [style];\n\n  static override readonly shadowRootOptions: ShadowRootInit = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n\n  @property({ reflect: true }) bordered?: 'true' | 'false';\n\n  @property({ reflect: true }) icon?: string;\n\n  @property({ reflect: true, attribute: 'icon-set' }) iconSet?: string;\n\n  @property({ type: Boolean, reflect: true }) expanded = false;\n\n  @property({ reflect: true, attribute: 'heading-text' }) headingText?: string;\n\n  @property({ reflect: true, attribute: 'heading-tag' }) headingTag?: string;\n\n  #generatedHtag?: HTMLHeadingElement;\n\n  #logger = new Logger(this);\n\n  #header?: HTMLElement;\n\n  #slots = new SlotController(this, 'accents', null);\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.id ||= getRandomId(this.localName);\n    this.#initHeader();\n  }\n\n  override render(): TemplateResult<1> {\n    const headingText = this.headingText?.trim() ?? this.#header?.textContent?.trim();\n    const content = html`\n      <button id=\"button\"\n              class=\"toggle\"\n              @click=\"${this.#onClick}\"\n              aria-expanded=\"${String(!!this.expanded) as 'true' | 'false'}\">\n        <span part=\"text\">${headingText ?? html`\n          <slot></slot>`}\n        </span>\n        <span part=\"accents\" ?hidden=\"${this.#slots.isEmpty('accents')}\">\n          <slot name=\"accents\"></slot>\n        </span>\n        <pf-icon part=\"icon\"\n                 class=\"icon\"\n                 size=\"lg\"\n                 set=\"${this.iconSet ?? 'fas'}\"\n                 icon=\"${this.icon ?? 'angle-right'}\"\n        ></pf-icon>\n      </button>\n    `;\n    switch (this.headingTag) {\n      case 'h1': return html`<h1 id=\"heading\">${content}</h1>`;\n      case 'h2': return html`<h2 id=\"heading\">${content}</h2>`;\n      case 'h3': return html`<h3 id=\"heading\">${content}</h3>`;\n      case 'h4': return html`<h4 id=\"heading\">${content}</h4>`;\n      case 'h5': return html`<h5 id=\"heading\">${content}</h5>`;\n      case 'h6': return html`<h6 id=\"heading\">${content}</h6>`;\n      default: return content;\n    }\n  }\n\n  async #initHeader() {\n    if (this.headingText) {\n      this.headingTag ||= 'h3';\n    }\n    this.#header = this.#getOrCreateHeader();\n\n    // prevent double-logging\n    if (this.#header !== this.#generatedHtag) {\n      this.#generatedHtag = undefined;\n    }\n\n    do {\n      await this.updateComplete;\n    } while (!await this.updateComplete);\n\n    // Remove the hidden attribute after upgrade\n    this.hidden = false;\n  }\n\n  #getOrCreateHeader(): HTMLElement | undefined {\n    // Check if there is no nested element or nested textNodes\n    if (!this.firstElementChild && !this.firstChild) {\n      return void this.#logger.warn('No header content provided');\n    } else if (this.firstElementChild) {\n      const [heading, ...otherContent] = Array.from(this.children)\n          .filter((x): x is HTMLElement => !x.hasAttribute('slot') && isPorHeader(x));\n\n      // If there is no content inside the slot, return empty with a warning\n      // else, if there is more than 1 element in the slot, capture the first h-tag\n      if (!heading) {\n        return void this.#logger.warn('No heading information was provided.');\n      } else if (otherContent.length) {\n        this.#logger.warn('Heading currently only supports 1 tag; extra tags will be ignored.');\n      }\n      return heading;\n    } else {\n      if (!this.#generatedHtag) {\n        this.#logger.warn('Header should contain at least 1 heading tag for correct semantics.');\n      }\n      this.#generatedHtag = document.createElement('h3');\n\n      // If a text node was provided but no semantics, default to an h3\n      // otherwise, incorrect semantics were used, create an H3 and try to capture the content\n      if (this.firstChild?.nodeType === Node.TEXT_NODE) {\n        this.#generatedHtag.textContent = this.firstChild.textContent;\n      } else {\n        this.#generatedHtag.textContent = this.textContent;\n      }\n\n      return this.#generatedHtag;\n    }\n  }\n\n  #onClick() {\n    const expanded = !this.expanded;\n    const acc = this.closest('pf-accordion');\n    if (acc) {\n      this.dispatchEvent(new PfAccordionHeaderChangeEvent(expanded, this, acc));\n    }\n  }\n}\n\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-accordion-header': PfAccordionHeader;\n  }\n}\n"]}
+{"version":3,"file":"pf-accordion-header.js","sourceRoot":"","sources":["pf-accordion-header.ts"],"names":[],"mappings":";;AAEA,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,cAAc,EAAE,MAAM,qDAAqD,CAAC;AACrF,OAAO,EAAE,MAAM,EAAE,MAAM,4CAA4C,CAAC;AAEpE,OAAO,EAAE,WAAW,EAAE,MAAM,0CAA0C,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIvE,OAAO,yCAAyC,CAAC;AAEjD,MAAM,WAAW,GACf,CAAC,EAAQ,EAAqB,EAAE,CAC9B,EAAE,YAAY,WAAW,IAAI,CAAC,CAAC,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC;AAEjE,MAAM,OAAO,4BAA6B,SAAQ,KAAK;IAErD,YACS,QAAiB,EACjB,MAAyB,EACzB,SAAsB;QAE7B,KAAK,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;QAJ5B,aAAQ,GAAR,QAAQ,CAAS;QACjB,WAAM,GAAN,MAAM,CAAmB;QACzB,cAAS,GAAT,SAAS,CAAa;IAG/B,CAAC;CACF;AAQM,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,UAAU;IAA1C;;;QAcuC,aAAQ,GAAG,KAAK,CAAC;QAM7D,mDAAoC;QAEpC,oCAAU,IAAI,MAAM,CAAC,IAAI,CAAC,EAAC;QAE3B,4CAAsB;QAEtB,mCAAS,IAAI,cAAc,CAAC,IAAI,EAAE,SAAS,EAAE,IAAI,CAAC,EAAC;;IAE1C,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,EAAE,KAAP,IAAI,CAAC,EAAE,GAAK,WAAW,CAAC,IAAI,CAAC,SAAS,CAAC,EAAC;QACxC,uBAAA,IAAI,mEAAY,MAAhB,IAAI,CAAc,CAAC;IACrB,CAAC;IAEQ,MAAM;QACb,MAAM,WAAW,GAAG,IAAI,CAAC,WAAW,EAAE,IAAI,EAAE,IAAI,uBAAA,IAAI,iCAAQ,EAAE,WAAW,EAAE,IAAI,EAAE,CAAC;QAClF,MAAM,OAAO,GAAG,IAAI,CAAA;;;wBAGA,uBAAA,IAAI,gEAAS;+BACN,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAqB;;4BAE9C,WAAW,IAAI,IAAI,CAAA;;wBAEvB;;;wCAGgB,uBAAA,IAAI,gCAAO,CAAC,OAAO,CAAC,SAAS,CAAC;;;;;;;;;;;;wBAY9C,IAAI,CAAC,OAAO,IAAI,KAAK;yBACpB,IAAI,CAAC,IAAI,IAAI,aAAa;;;KAG9C,CAAC;QACF,QAAQ,IAAI,CAAC,UAAU,EAAE,CAAC;YACxB,KAAK,IAAI,CAAC,CAAC,OAAO,IAAI,CAAA,oBAAoB,OAAO,OAAO,CAAC;YACzD,KAAK,IAAI,CAAC,CAAC,OAAO,IAAI,CAAA,oBAAoB,OAAO,OAAO,CAAC;YACzD,KAAK,IAAI,CAAC,CAAC,OAAO,IAAI,CAAA,oBAAoB,OAAO,OAAO,CAAC;YACzD,KAAK,IAAI,CAAC,CAAC,OAAO,IAAI,CAAA,oBAAoB,OAAO,OAAO,CAAC;YACzD,KAAK,IAAI,CAAC,CAAC,OAAO,IAAI,CAAA,oBAAoB,OAAO,OAAO,CAAC;YACzD,KAAK,IAAI,CAAC,CAAC,OAAO,IAAI,CAAA,oBAAoB,OAAO,OAAO,CAAC;YACzD,OAAO,CAAC,CAAC,OAAO,OAAO,CAAC;QAC1B,CAAC;IACH,CAAC;;;;;;;gCAED,KAAK;IACH,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;QACrB,IAAI,CAAC,UAAU,KAAf,IAAI,CAAC,UAAU,GAAK,IAAI,EAAC;IAC3B,CAAC;IACD,uBAAA,IAAI,6BAAW,uBAAA,IAAI,0EAAmB,MAAvB,IAAI,CAAqB,MAAA,CAAC;IAEzC,yBAAyB;IACzB,IAAI,uBAAA,IAAI,iCAAQ,KAAK,uBAAA,IAAI,wCAAe,EAAE,CAAC;QACzC,uBAAA,IAAI,oCAAkB,SAAS,MAAA,CAAC;IAClC,CAAC;IAED,GAAG,CAAC;QACF,MAAM,IAAI,CAAC,cAAc,CAAC;IAC5B,CAAC,QAAQ,CAAC,MAAM,IAAI,CAAC,cAAc,EAAE;IAErC,4CAA4C;IAC5C,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;AACtB,CAAC;;IAGC,0DAA0D;IAC1D,IAAI,CAAC,IAAI,CAAC,iBAAiB,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,CAAC;QAChD,OAAO,KAAK,uBAAA,IAAI,iCAAQ,CAAC,IAAI,CAAC,4BAA4B,CAAC,CAAC;IAC9D,CAAC;SAAM,IAAI,IAAI,CAAC,iBAAiB,EAAE,CAAC;QAClC,MAAM,CAAC,OAAO,EAAE,GAAG,YAAY,CAAC,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC;aACvD,MAAM,CAAC,CAAC,CAAC,EAAoB,EAAE,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,MAAM,CAAC,IAAI,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC;QAEhF,sEAAsE;QACtE,6EAA6E;QAC7E,IAAI,CAAC,OAAO,EAAE,CAAC;YACb,OAAO,KAAK,uBAAA,IAAI,iCAAQ,CAAC,IAAI,CAAC,sCAAsC,CAAC,CAAC;QACxE,CAAC;aAAM,IAAI,YAAY,CAAC,MAAM,EAAE,CAAC;YAC/B,uBAAA,IAAI,iCAAQ,CAAC,IAAI,CAAC,oEAAoE,CAAC,CAAC;QAC1F,CAAC;QACD,OAAO,OAAO,CAAC;IACjB,CAAC;SAAM,CAAC;QACN,IAAI,CAAC,uBAAA,IAAI,wCAAe,EAAE,CAAC;YACzB,uBAAA,IAAI,iCAAQ,CAAC,IAAI,CAAC,qEAAqE,CAAC,CAAC;QAC3F,CAAC;QACD,uBAAA,IAAI,oCAAkB,QAAQ,CAAC,aAAa,CAAC,IAAI,CAAC,MAAA,CAAC;QAEnD,iEAAiE;QACjE,wFAAwF;QACxF,IAAI,IAAI,CAAC,UAAU,EAAE,QAAQ,KAAK,IAAI,CAAC,SAAS,EAAE,CAAC;YACjD,uBAAA,IAAI,wCAAe,CAAC,WAAW,GAAG,IAAI,CAAC,UAAU,CAAC,WAAW,CAAC;QAChE,CAAC;aAAM,CAAC;YACN,uBAAA,IAAI,wCAAe,CAAC,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC;QACrD,CAAC;QAED,OAAO,uBAAA,IAAI,wCAAe,CAAC;IAC7B,CAAC;AACH,CAAC;;IAGC,MAAM,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;IAChC,MAAM,GAAG,GAAG,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC;IACzC,IAAI,GAAG,EAAE,CAAC;QACR,IAAI,CAAC,aAAa,CAAC,IAAI,4BAA4B,CAAC,QAAQ,EAAE,IAAI,EAAE,GAAG,CAAC,CAAC,CAAC;IAC5E,CAAC;AACH,CAAC;AArIe,wBAAM,GAAoB,CAAC,KAAK,CAAC,AAA3B,CAA4B;AAEzB,mCAAiB,GAAmB;IAC3D,GAAG,UAAU,CAAC,iBAAiB;IAC/B,cAAc,EAAE,IAAI;CACrB,AAHyC,CAGxC;;AAE2B;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;mDAA6B;AAE5B;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;+CAAe;AAES;IAAnD,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,UAAU,EAAE,CAAC;kDAAkB;AAEzB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;mDAAkB;AAEL;IAAvD,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,cAAc,EAAE,CAAC;sDAAsB;AAEtB;IAAtD,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,aAAa,EAAE,CAAC;qDAAqB;AAlBhE,iBAAiB;IAD7B,aAAa,CAAC,qBAAqB,CAAC;GACxB,iBAAiB","sourcesContent":["import type { PfAccordion } from './pf-accordion.js';\n\nimport { LitElement, html, type TemplateResult } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\n\nimport { SlotController } from '@patternfly/pfe-core/controllers/slot-controller.js';\nimport { Logger } from '@patternfly/pfe-core/controllers/logger.js';\n\nimport { getRandomId } from '@patternfly/pfe-core/functions/random.js';\n\nimport style from './pf-accordion-header.css';\n\nimport '@patternfly/elements/pf-icon/pf-icon.js';\n\nconst isPorHeader =\n  (el: Node): el is HTMLElement =>\n    el instanceof HTMLElement && !!el.tagName.match(/P|^H[1-6]/);\n\nexport class PfAccordionHeaderChangeEvent extends Event {\n  declare target: PfAccordionHeader;\n  constructor(\n    public expanded: boolean,\n    public toggle: PfAccordionHeader,\n    public accordion: PfAccordion\n  ) {\n    super('change', { bubbles: true });\n  }\n}\n\n/**\n * Accordion Header\n * @fires {AccordionHeaderChangeEvent} change - when the open panels change\n *\n */\n@customElement('pf-accordion-header')\nexport class PfAccordionHeader extends LitElement {\n  static readonly styles: CSSStyleSheet[] = [style];\n\n  static override readonly shadowRootOptions: ShadowRootInit = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n\n  @property({ reflect: true }) bordered?: 'true' | 'false';\n\n  @property({ reflect: true }) icon?: string;\n\n  @property({ reflect: true, attribute: 'icon-set' }) iconSet?: string;\n\n  @property({ type: Boolean, reflect: true }) expanded = false;\n\n  @property({ reflect: true, attribute: 'heading-text' }) headingText?: string;\n\n  @property({ reflect: true, attribute: 'heading-tag' }) headingTag?: string;\n\n  #generatedHtag?: HTMLHeadingElement;\n\n  #logger = new Logger(this);\n\n  #header?: HTMLElement;\n\n  #slots = new SlotController(this, 'accents', null);\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.id ||= getRandomId(this.localName);\n    this.#initHeader();\n  }\n\n  override render(): TemplateResult<1> {\n    const headingText = this.headingText?.trim() ?? this.#header?.textContent?.trim();\n    const content = html`\n      <button id=\"button\"\n              class=\"toggle\"\n              @click=\"${this.#onClick}\"\n              aria-expanded=\"${String(!!this.expanded) as 'true' | 'false'}\">\n        <!-- summary: inline element containing the heading text or slotted heading content -->\n        <span part=\"text\">${headingText ?? html`\n          <!-- summary: A heading level tag (h1, h2, h3, h4, h5, h6) -->\n          <slot></slot>`}\n        </span>\n        <!-- summary: container for accents within the header -->\n        <span part=\"accents\" ?hidden=\"${this.#slots.isEmpty('accents')}\">\n          <!-- summary: Header accent elements like tag or icon\n               description: |\n                 These elements will appear inline with the accordion header,\n                 between the header and the chevron\n                 (or after the chevron and header in disclosure mode). -->\n          <slot name=\"accents\"></slot>\n        </span>\n        <!-- summary: caret icon -->\n        <pf-icon part=\"icon\"\n                 class=\"icon\"\n                 size=\"lg\"\n                 set=\"${this.iconSet ?? 'fas'}\"\n                 icon=\"${this.icon ?? 'angle-right'}\"\n        ></pf-icon>\n      </button>\n    `;\n    switch (this.headingTag) {\n      case 'h1': return html`<h1 id=\"heading\">${content}</h1>`;\n      case 'h2': return html`<h2 id=\"heading\">${content}</h2>`;\n      case 'h3': return html`<h3 id=\"heading\">${content}</h3>`;\n      case 'h4': return html`<h4 id=\"heading\">${content}</h4>`;\n      case 'h5': return html`<h5 id=\"heading\">${content}</h5>`;\n      case 'h6': return html`<h6 id=\"heading\">${content}</h6>`;\n      default: return content;\n    }\n  }\n\n  async #initHeader() {\n    if (this.headingText) {\n      this.headingTag ||= 'h3';\n    }\n    this.#header = this.#getOrCreateHeader();\n\n    // prevent double-logging\n    if (this.#header !== this.#generatedHtag) {\n      this.#generatedHtag = undefined;\n    }\n\n    do {\n      await this.updateComplete;\n    } while (!await this.updateComplete);\n\n    // Remove the hidden attribute after upgrade\n    this.hidden = false;\n  }\n\n  #getOrCreateHeader(): HTMLElement | undefined {\n    // Check if there is no nested element or nested textNodes\n    if (!this.firstElementChild && !this.firstChild) {\n      return void this.#logger.warn('No header content provided');\n    } else if (this.firstElementChild) {\n      const [heading, ...otherContent] = Array.from(this.children)\n          .filter((x): x is HTMLElement => !x.hasAttribute('slot') && isPorHeader(x));\n\n      // If there is no content inside the slot, return empty with a warning\n      // else, if there is more than 1 element in the slot, capture the first h-tag\n      if (!heading) {\n        return void this.#logger.warn('No heading information was provided.');\n      } else if (otherContent.length) {\n        this.#logger.warn('Heading currently only supports 1 tag; extra tags will be ignored.');\n      }\n      return heading;\n    } else {\n      if (!this.#generatedHtag) {\n        this.#logger.warn('Header should contain at least 1 heading tag for correct semantics.');\n      }\n      this.#generatedHtag = document.createElement('h3');\n\n      // If a text node was provided but no semantics, default to an h3\n      // otherwise, incorrect semantics were used, create an H3 and try to capture the content\n      if (this.firstChild?.nodeType === Node.TEXT_NODE) {\n        this.#generatedHtag.textContent = this.firstChild.textContent;\n      } else {\n        this.#generatedHtag.textContent = this.textContent;\n      }\n\n      return this.#generatedHtag;\n    }\n  }\n\n  #onClick() {\n    const expanded = !this.expanded;\n    const acc = this.closest('pf-accordion');\n    if (acc) {\n      this.dispatchEvent(new PfAccordionHeaderChangeEvent(expanded, this, acc));\n    }\n  }\n}\n\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-accordion-header': PfAccordionHeader;\n  }\n}\n"]}

package/pf-accordion/pf-accordion-panel.css

@@ -4,6 +4,7 @@
   overflow: hidden;
   will-change: height;
   color: var(--pf-global--Color--100, #151515);
+  /** Background color for accordion panel */
   background-color:
     var(
       --pf-c-accordion--BackgroundColor,
@@ -12,10 +13,15 @@
 }
 
 .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));
 }
 
@@ -25,7 +31,9 @@
   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);
 }
 
@@ -50,12 +58,15 @@
 }
 
 .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);
 }
 
@@ -66,6 +77,7 @@
 
 .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,