@patternfly/elements 3.0.1 → 4.0.0

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

@@ -1,103 +1,137 @@
-var _PfAccordionHeader_slots;
-import { __classPrivateFieldGet, __decorate } from "tslib";
-import { html } from 'lit';
+var _PfAccordionHeader_instances, _PfAccordionHeader_generatedHtag, _PfAccordionHeader_logger, _PfAccordionHeader_header, _PfAccordionHeader_slots, _PfAccordionHeader_initHeader, _PfAccordionHeader_getOrCreateHeader, _PfAccordionHeader_onClick;
+import { __classPrivateFieldGet, __classPrivateFieldSet, __decorate } from "tslib";
+import { LitElement, html } from 'lit';
 import { customElement } from 'lit/decorators/custom-element.js';
 import { property } from 'lit/decorators/property.js';
 import { SlotController } from '@patternfly/pfe-core/controllers/slot-controller.js';
-import { BaseAccordionHeader } from './BaseAccordionHeader.js';
+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}\n\n.toggle,\n.toggle:before,\n.toggle:after {\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  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}\n\nspan {\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 {\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`;
 import '@patternfly/elements/pf-icon/pf-icon.js';
-/**
- * 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
- *              Sets the font color for the accordion header.
- *              {@default `var(--pf-global--Color--100, #151515)`}
- * @cssprop     {<color>} --pf-c-accordion__toggle--BackgroundColor
- *              Sets the background color for the accordion header toggle element.
- *              {@default `transparent`}
- * @cssprop     {<color>} --pf-c-accordion__toggle--after--BackgroundColor
- *              Sets the background color for the after element for the accordion header toggle element.
- *              {@default `transparent`}
- * @cssprop     {<length>} --pf-c-accordion__toggle--PaddingTop
- *              Sets the top padding for the accordion header.
- *              {@default `var(--pf-global--spacer--sm, 0.5rem)`}
- * @cssprop     {<length>} --pf-c-accordion__toggle--PaddingRight
- *              Sets the right padding for the accordion header.
- *              {@default `var(--pf-global--spacer--md, 1rem)`}
- * @cssprop     {<length>} --pf-c-accordion__toggle--PaddingBottom
- *              Sets the bottom padding for the accordion header.
- *              {@default `var(--pf-global--spacer--sm, 0.5rem)`}
- * @cssprop     {<length>} --pf-c-accordion__toggle--PaddingLeft
- *              Sets the left padding for the accordion header.
- *              {@default `var(--pf-global--spacer--md, 1rem)`}
- * @cssprop     {<length>} --pf-c-accordion__toggle--FontSize
- *              Sets the sidebar background color for the accordion header.
- *              {@default `var(--pf-global--FontSize--lg, 1rem)`}
- * @cssprop     {<color>} --pf-c-accordion__toggle--FontFamily
- *              Sets the font family for the accordion header.
- *              {@default `var(--pf-global--FontFamily--redhat-updated--heading--sans-serif, "RedHatDisplayUpdated", helvetica, arial, sans-serif)`}
- * @cssprop     --pf-c-accordion__toggle--FontWeight
- *              Sets the font weight for the accordion header.
- *              {@default `var(--pf-global--FontWeight--normal, 400)`}
- * @cssprop     {<color>} --pf-c-accordion__toggle--active--BackgroundColor
- *              Sets the active backgrdound color for the accordion header.
- *              {@default `var(--pf-global--BackgroundColor--200, #f0f0f0)`}
- * @cssprop     {<color>} --pf-c-accordion__toggle--active-text--Color
- *              Sets the active text color for the accordion header.
- *              {@default `var(--pf-global--link--Color, #0066cc)`}
- * @cssprop     --pf-c-accordion__toggle--active-text--FontWeight
- *              Sets the active text font weight for the accordion header.
- *              {@default `var(--pf-global--FontWeight--semi-bold, 700)`}
- * @cssprop     {<color>} --pf-c-accordion__toggle--expanded--before--BackgroundColor
- *              Sets the hover expanded before background color for the accordion header.
- *              {@default `var(--pf-global--link--Color, #0066cc)`}
- * @cssprop     --pf-c-accordion__toggle--expanded-icon--Rotate
- *              Sets the expanded icon rotation degrees for the accordion header.
- *              {@default `90deg`}
- * @cssprop     {<length>} --pf-c-accordion__toggle-text--MaxWidth
- *              Sets the max width for the text inside the accordion header.
- *              {@default `calc(100% - var(--pf-global--spacer--lg, 1.5rem))`}
- * @cssprop     --pf-c-accordion__toggle--before--Width
- *              Sets the sidebar width for the accordion header.
- *              {@default `var(--pf-global--BorderWidth--lg, 3px)`}
- * @cssprop     --pf-c-accordion__toggle-icon--Transition
- *              Sets the transition animation for the accordion header.
- *              {@default `0.2s ease-in 0s`}
- */
-let PfAccordionHeader = class PfAccordionHeader extends BaseAccordionHeader {
+const isPorHeader = (el) => el instanceof HTMLElement && !!el.tagName.match(/P|^H[1-6]/);
+export class PfAccordionHeaderChangeEvent extends Event {
+    constructor(expanded, toggle, accordion) {
+        super('change', { bubbles: true });
+        this.expanded = expanded;
+        this.toggle = toggle;
+        this.accordion = accordion;
+    }
+}
+let PfAccordionHeader = class PfAccordionHeader extends LitElement {
     constructor() {
         super(...arguments);
+        _PfAccordionHeader_instances.add(this);
+        this.expanded = false;
+        _PfAccordionHeader_generatedHtag.set(this, void 0);
+        _PfAccordionHeader_logger.set(this, new Logger(this));
+        _PfAccordionHeader_header.set(this, void 0);
         _PfAccordionHeader_slots.set(this, new SlotController(this, 'accents', null));
     }
-    renderAfterButton() {
-        return html `${!__classPrivateFieldGet(this, _PfAccordionHeader_slots, "f").hasSlotted('accents') ? '' : html `
-      <span part="accents">
-        <slot name="accents"></slot>
-      </span>`}
-      <pf-icon part="icon"
-                icon="${this.icon ?? 'angle-right'}"
-                set="${this.iconSet ?? 'fas'}"
-                class="icon"
-                size="lg"></pf-icon>
+    connectedCallback() {
+        super.connectedCallback();
+        this.id || (this.id = getRandomId(this.localName));
+        __classPrivateFieldGet(this, _PfAccordionHeader_instances, "m", _PfAccordionHeader_initHeader).call(this);
+    }
+    render() {
+        const headingText = this.headingText?.trim() ?? __classPrivateFieldGet(this, _PfAccordionHeader_header, "f")?.textContent?.trim();
+        const content = html `
+      <button id="button"
+              class="toggle"
+              @click="${__classPrivateFieldGet(this, _PfAccordionHeader_instances, "m", _PfAccordionHeader_onClick)}"
+              aria-expanded="${String(!!this.expanded)}">
+        <span part="text">${headingText ?? html `
+          <slot></slot>`}
+        </span>
+        <span part="accents" ?hidden="${__classPrivateFieldGet(this, _PfAccordionHeader_slots, "f").isEmpty('accents')}">
+          <slot name="accents"></slot>
+        </span>
+        <pf-icon part="icon"
+                 class="icon"
+                 size="lg"
+                 set="${this.iconSet ?? 'fas'}"
+                 icon="${this.icon ?? 'angle-right'}"
+        ></pf-icon>
+      </button>
     `;
+        switch (this.headingTag) {
+            case 'h1': return html `<h1 id="heading">${content}</h1>`;
+            case 'h2': return html `<h2 id="heading">${content}</h2>`;
+            case 'h3': return html `<h3 id="heading">${content}</h3>`;
+            case 'h4': return html `<h4 id="heading">${content}</h4>`;
+            case 'h5': return html `<h5 id="heading">${content}</h5>`;
+            case 'h6': return html `<h6 id="heading">${content}</h6>`;
+            default: return content;
+        }
     }
 };
+_PfAccordionHeader_generatedHtag = new WeakMap();
+_PfAccordionHeader_logger = new WeakMap();
+_PfAccordionHeader_header = new WeakMap();
 _PfAccordionHeader_slots = new WeakMap();
-PfAccordionHeader.styles = [...BaseAccordionHeader.styles, style];
+_PfAccordionHeader_instances = new WeakSet();
+_PfAccordionHeader_initHeader = async function _PfAccordionHeader_initHeader() {
+    if (this.headingText) {
+        this.headingTag || (this.headingTag = 'h3');
+    }
+    __classPrivateFieldSet(this, _PfAccordionHeader_header, __classPrivateFieldGet(this, _PfAccordionHeader_instances, "m", _PfAccordionHeader_getOrCreateHeader).call(this), "f");
+    // prevent double-logging
+    if (__classPrivateFieldGet(this, _PfAccordionHeader_header, "f") !== __classPrivateFieldGet(this, _PfAccordionHeader_generatedHtag, "f")) {
+        __classPrivateFieldSet(this, _PfAccordionHeader_generatedHtag, undefined, "f");
+    }
+    do {
+        await this.updateComplete;
+    } while (!await this.updateComplete);
+    // Remove the hidden attribute after upgrade
+    this.hidden = false;
+};
+_PfAccordionHeader_getOrCreateHeader = function _PfAccordionHeader_getOrCreateHeader() {
+    // Check if there is no nested element or nested textNodes
+    if (!this.firstElementChild && !this.firstChild) {
+        return void __classPrivateFieldGet(this, _PfAccordionHeader_logger, "f").warn('No header content provided');
+    }
+    else if (this.firstElementChild) {
+        const [heading, ...otherContent] = Array.from(this.children)
+            .filter((x) => !x.hasAttribute('slot') && isPorHeader(x));
+        // If there is no content inside the slot, return empty with a warning
+        // else, if there is more than 1 element in the slot, capture the first h-tag
+        if (!heading) {
+            return void __classPrivateFieldGet(this, _PfAccordionHeader_logger, "f").warn('No heading information was provided.');
+        }
+        else if (otherContent.length) {
+            __classPrivateFieldGet(this, _PfAccordionHeader_logger, "f").warn('Heading currently only supports 1 tag; extra tags will be ignored.');
+        }
+        return heading;
+    }
+    else {
+        if (!__classPrivateFieldGet(this, _PfAccordionHeader_generatedHtag, "f")) {
+            __classPrivateFieldGet(this, _PfAccordionHeader_logger, "f").warn('Header should contain at least 1 heading tag for correct semantics.');
+        }
+        __classPrivateFieldSet(this, _PfAccordionHeader_generatedHtag, document.createElement('h3'), "f");
+        // If a text node was provided but no semantics, default to an h3
+        // otherwise, incorrect semantics were used, create an H3 and try to capture the content
+        if (this.firstChild?.nodeType === Node.TEXT_NODE) {
+            __classPrivateFieldGet(this, _PfAccordionHeader_generatedHtag, "f").textContent = this.firstChild.textContent;
+        }
+        else {
+            __classPrivateFieldGet(this, _PfAccordionHeader_generatedHtag, "f").textContent = this.textContent;
+        }
+        return __classPrivateFieldGet(this, _PfAccordionHeader_generatedHtag, "f");
+    }
+};
+_PfAccordionHeader_onClick = function _PfAccordionHeader_onClick() {
+    const expanded = !this.expanded;
+    const acc = this.closest('pf-accordion');
+    if (acc) {
+        this.dispatchEvent(new PfAccordionHeaderChangeEvent(expanded, this, acc));
+    }
+};
+PfAccordionHeader.styles = [style];
+PfAccordionHeader.shadowRootOptions = {
+    ...LitElement.shadowRootOptions,
+    delegatesFocus: true,
+};
+PfAccordionHeader.version = "4.0.0";
 __decorate([
     property({ reflect: true })
 ], PfAccordionHeader.prototype, "bordered", void 0);
@@ -107,6 +141,15 @@ __decorate([
 __decorate([
     property({ reflect: true, attribute: 'icon-set' })
 ], PfAccordionHeader.prototype, "iconSet", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], PfAccordionHeader.prototype, "expanded", void 0);
+__decorate([
+    property({ reflect: true, attribute: 'heading-text' })
+], PfAccordionHeader.prototype, "headingText", void 0);
+__decorate([
+    property({ reflect: true, attribute: 'heading-tag' })
+], PfAccordionHeader.prototype, "headingTag", void 0);
 PfAccordionHeader = __decorate([
     customElement('pf-accordion-header')
 ], PfAccordionHeader);

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":";;AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AAEtD,OAAO,EAAE,cAAc,EAAE,MAAM,qDAAqD,CAAC;AAErF,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;;;AAI/D,OAAO,yCAAyC,CAAC;AAEjD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqEG;AAEI,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,mBAAmB;IAAnD;;QASL,mCAAS,IAAI,cAAc,CAAC,IAAI,EAAE,SAAS,EAAE,IAAI,CAAC,EAAC;IAcrD,CAAC;IAZC,iBAAiB;QACf,OAAO,IAAI,CAAA,GAAG,CAAC,uBAAA,IAAI,gCAAO,CAAC,UAAU,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAA;;;cAGlD;;wBAEU,IAAI,CAAC,IAAI,IAAI,aAAa;uBAC3B,IAAI,CAAC,OAAO,IAAI,KAAK;;;KAGvC,CAAC;IACJ,CAAC;;;AArBe,wBAAM,GAAG,CAAC,GAAG,mBAAmB,CAAC,MAAM,EAAE,KAAK,CAAC,AAAzC,CAA0C;AAEnC;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;AAP1D,iBAAiB;IAD7B,aAAa,CAAC,qBAAqB,CAAC;GACxB,iBAAiB,CAuB7B","sourcesContent":["import { html } 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';\n\nimport { BaseAccordionHeader } from './BaseAccordionHeader.js';\n\nimport style from './pf-accordion-header.css';\n\nimport '@patternfly/elements/pf-icon/pf-icon.js';\n\n/**\n * Accordion Header\n *\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 *\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 *\n * @fires {AccordionHeaderChangeEvent} change - when the open panels change\n *\n * @cssprop     {<color>} --pf-c-accordion__toggle--Color\n *              Sets the font color for the accordion header.\n *              {@default `var(--pf-global--Color--100, #151515)`}\n * @cssprop     {<color>} --pf-c-accordion__toggle--BackgroundColor\n *              Sets the background color for the accordion header toggle element.\n *              {@default `transparent`}\n * @cssprop     {<color>} --pf-c-accordion__toggle--after--BackgroundColor\n *              Sets the background color for the after element for the accordion header toggle element.\n *              {@default `transparent`}\n * @cssprop     {<length>} --pf-c-accordion__toggle--PaddingTop\n *              Sets the top padding for the accordion header.\n *              {@default `var(--pf-global--spacer--sm, 0.5rem)`}\n * @cssprop     {<length>} --pf-c-accordion__toggle--PaddingRight\n *              Sets the right padding for the accordion header.\n *              {@default `var(--pf-global--spacer--md, 1rem)`}\n * @cssprop     {<length>} --pf-c-accordion__toggle--PaddingBottom\n *              Sets the bottom padding for the accordion header.\n *              {@default `var(--pf-global--spacer--sm, 0.5rem)`}\n * @cssprop     {<length>} --pf-c-accordion__toggle--PaddingLeft\n *              Sets the left padding for the accordion header.\n *              {@default `var(--pf-global--spacer--md, 1rem)`}\n * @cssprop     {<length>} --pf-c-accordion__toggle--FontSize\n *              Sets the sidebar background color for the accordion header.\n *              {@default `var(--pf-global--FontSize--lg, 1rem)`}\n * @cssprop     {<color>} --pf-c-accordion__toggle--FontFamily\n *              Sets the font family for the accordion header.\n *              {@default `var(--pf-global--FontFamily--redhat-updated--heading--sans-serif, \"RedHatDisplayUpdated\", helvetica, arial, sans-serif)`}\n * @cssprop     --pf-c-accordion__toggle--FontWeight\n *              Sets the font weight for the accordion header.\n *              {@default `var(--pf-global--FontWeight--normal, 400)`}\n * @cssprop     {<color>} --pf-c-accordion__toggle--active--BackgroundColor\n *              Sets the active backgrdound color for the accordion header.\n *              {@default `var(--pf-global--BackgroundColor--200, #f0f0f0)`}\n * @cssprop     {<color>} --pf-c-accordion__toggle--active-text--Color\n *              Sets the active text color for the accordion header.\n *              {@default `var(--pf-global--link--Color, #0066cc)`}\n * @cssprop     --pf-c-accordion__toggle--active-text--FontWeight\n *              Sets the active text font weight for the accordion header.\n *              {@default `var(--pf-global--FontWeight--semi-bold, 700)`}\n * @cssprop     {<color>} --pf-c-accordion__toggle--expanded--before--BackgroundColor\n *              Sets the hover expanded before background color for the accordion header.\n *              {@default `var(--pf-global--link--Color, #0066cc)`}\n * @cssprop     --pf-c-accordion__toggle--expanded-icon--Rotate\n *              Sets the expanded icon rotation degrees for the accordion header.\n *              {@default `90deg`}\n * @cssprop     {<length>} --pf-c-accordion__toggle-text--MaxWidth\n *              Sets the max width for the text inside the accordion header.\n *              {@default `calc(100% - var(--pf-global--spacer--lg, 1.5rem))`}\n * @cssprop     --pf-c-accordion__toggle--before--Width\n *              Sets the sidebar width for the accordion header.\n *              {@default `var(--pf-global--BorderWidth--lg, 3px)`}\n * @cssprop     --pf-c-accordion__toggle-icon--Transition\n *              Sets the transition animation for the accordion header.\n *              {@default `0.2s ease-in 0s`}\n */\n@customElement('pf-accordion-header')\nexport class PfAccordionHeader extends BaseAccordionHeader {\n  static readonly styles = [...BaseAccordionHeader.styles, style];\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  #slots = new SlotController(this, 'accents', null);\n\n  renderAfterButton() {\n    return html`${!this.#slots.hasSlotted('accents') ? '' : html`\n      <span part=\"accents\">\n        <slot name=\"accents\"></slot>\n      </span>`}\n      <pf-icon part=\"icon\"\n                icon=\"${this.icon ?? 'angle-right'}\"\n                set=\"${this.iconSet ?? 'fas'}\"\n                class=\"icon\"\n                size=\"lg\"></pf-icon>\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":"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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"]}

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

@@ -1,4 +1,8 @@
 :host {
+  display: none;
+  position: relative;
+  overflow: hidden;
+  will-change: height;
   color: var(--pf-global--Color--100, #151515);
   background-color:
     var(
@@ -16,6 +20,11 @@
 }
 
 .body:after {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
   width: var(--pf-c-accordion__panel-body--before--Width, var(--pf-global--BorderWidth--lg, 3px));
   background-color: var(--pf-c-accordion__panel-body--before--BackgroundColor, transparent);
 }
@@ -46,9 +55,15 @@
 }
 
 :host([fixed]) {
+  overflow-y: auto;
   max-height: var(--pf-c-accordion__panel--m-fixed--MaxHeight, 9.375rem);
 }
 
+:host([expanded]) {
+  display: block;
+  position: relative;
+}
+
 .content[expanded],
 :host([expanded]) .content {
   --pf-c-accordion__panel-body--before--BackgroundColor:

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

@@ -1,46 +1,48 @@
-import { BaseAccordionPanel } from './BaseAccordionPanel.js';
+import { LitElement, type TemplateResult } from 'lit';
 /**
  * Accordion Panel
- *
  * @slot - Panel content
- * @cssprop     {<color>} --pf-c-accordion--BackgroundColor
+ * @cssprop     {<color>} [--pf-c-accordion--BackgroundColor=var(--pf-global--BackgroundColor--light-100, #ffffff)]
  *              Sets the background color for the panel content.
- *              {@default `var(--pf-global--BackgroundColor--light-100, #ffffff)`}
- * @cssprop     {<color>} --pf-c-accordion__panel--Color
+ *
+ * @cssprop     {<color>} [--pf-c-accordion__panel--Color=var(--pf-global--Color--dark-200, #6a6e73)]
  *              Sets the font color for the panel content.
- *              {@default `var(--pf-global--Color--dark-200, #6a6e73)`}
- * @cssprop     {<length>} --pf-c-accordion__panel--FontSize
+ *
+ * @cssprop     {<length>} [--pf-c-accordion__panel--FontSize=var(--pf-global--FontSize--sm, 0.875rem)]
  *              Sets the font size for the panel content.
- *              {@default `var(--pf-global--FontSize--sm, 0.875rem)`}
- * @cssprop     {<color>} --pf-c-accordion__panel--content-body--before--BackgroundColor
+ *
+ * @cssprop     {<color>} [--pf-c-accordion__panel--content-body--before--BackgroundColor=var(--pf-global--primary-color--100, #0066cc)]
  *              Sets the sidebar color for the panel when the context is expanded.
- *              {@default `var(--pf-global--primary-color--100, #0066cc)`}
- * @cssprop     {<length>} --pf-c-accordion__panel--m-fixed--MaxHeight
+ *
+ * @cssprop     {<length>} [--pf-c-accordion__panel--m-fixed--MaxHeight=9.375rem]
  *              Sets the maximum height for the panel content.
  *              Will only be used if the `fixed` attribute is used.
- *              {@default `9.375rem`}
- * @cssprop     {<length>} --pf-c-accordion__panel-body--PaddingTop
+ *
+ * @cssprop     {<length>} [--pf-c-accordion__panel-body--PaddingTop=var(--pf-global--spacer--sm, 0.5rem)]
  *              Sets the padding top for the panel content.
- *              {@default `var(--pf-global--spacer--sm, 0.5rem)`}
- * @cssprop     {<length>} --pf-c-accordion__panel-body--PaddingRight
+ *
+ * @cssprop     {<length>} [--pf-c-accordion__panel-body--PaddingRight=var(--pf-global--spacer--md, 1rem)]
  *              Sets the padding right for the panel content.
- *              {@default `var(--pf-global--spacer--md, 1rem)`}
- * @cssprop     {<length>} --pf-c-accordion__panel-body--PaddingBottom
+ *
+ * @cssprop     {<length>} [--pf-c-accordion__panel-body--PaddingBottom=var(--pf-global--spacer--sm, 0.5rem)]
  *              Sets the padding bottom for the panel content.
- *              {@default `var(--pf-global--spacer--sm, 0.5rem)`}
- * @cssprop     {<length>} --pf-c-accordion__panel-body--PaddingLeft
+ *
+ * @cssprop     {<length>} [--pf-c-accordion__panel-body--PaddingLeft=var(--pf-global--spacer--md, 1rem)]
  *              Sets the padding left for the panel content.
- *              {@default `var(--pf-global--spacer--md, 1rem)`}
- * @cssprop     {<color>} --pf-c-accordion__panel-body--before--BackgroundColor
+ *
+ * @cssprop     {<color>} [--pf-c-accordion__panel-body--before--BackgroundColor=transparent]
  *              Sets the background color for the panel content.
- *              {@default `transparent`}
- * @cssprop     --pf-c-accordion__panel-body--before--Width
+ *
+ * @cssprop     [--pf-c-accordion__panel-body--before--Width=var(--pf-global--BorderWidth--lg, 3px)]
  *              Sets the before width for the panel content.
- *              {@default `var(--pf-global--BorderWidth--lg, 3px)`}
+ *
  */
-export declare class PfAccordionPanel extends BaseAccordionPanel {
+export declare class PfAccordionPanel extends LitElement {
     static readonly styles: CSSStyleSheet[];
+    expanded: boolean;
     bordered?: 'true' | 'false';
+    connectedCallback(): void;
+    render(): TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {

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

@@ -1,51 +1,37 @@
 import { __decorate } from "tslib";
+import { LitElement, html } from 'lit';
 import { customElement } from 'lit/decorators/custom-element.js';
 import { property } from 'lit/decorators/property.js';
-import { BaseAccordionPanel } from './BaseAccordionPanel.js';
+import { getRandomId } from '@patternfly/pfe-core/functions/random.js';
 import { css } from "lit";
-const style = css `:host {\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  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  max-height: var(--pf-c-accordion__panel--m-fixed--MaxHeight, 9.375rem);\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`;
-/**
- * Accordion Panel
- *
- * @slot - Panel content
- * @cssprop     {<color>} --pf-c-accordion--BackgroundColor
- *              Sets the background color for the panel content.
- *              {@default `var(--pf-global--BackgroundColor--light-100, #ffffff)`}
- * @cssprop     {<color>} --pf-c-accordion__panel--Color
- *              Sets the font color for the panel content.
- *              {@default `var(--pf-global--Color--dark-200, #6a6e73)`}
- * @cssprop     {<length>} --pf-c-accordion__panel--FontSize
- *              Sets the font size for the panel content.
- *              {@default `var(--pf-global--FontSize--sm, 0.875rem)`}
- * @cssprop     {<color>} --pf-c-accordion__panel--content-body--before--BackgroundColor
- *              Sets the sidebar color for the panel when the context is expanded.
- *              {@default `var(--pf-global--primary-color--100, #0066cc)`}
- * @cssprop     {<length>} --pf-c-accordion__panel--m-fixed--MaxHeight
- *              Sets the maximum height for the panel content.
- *              Will only be used if the `fixed` attribute is used.
- *              {@default `9.375rem`}
- * @cssprop     {<length>} --pf-c-accordion__panel-body--PaddingTop
- *              Sets the padding top for the panel content.
- *              {@default `var(--pf-global--spacer--sm, 0.5rem)`}
- * @cssprop     {<length>} --pf-c-accordion__panel-body--PaddingRight
- *              Sets the padding right for the panel content.
- *              {@default `var(--pf-global--spacer--md, 1rem)`}
- * @cssprop     {<length>} --pf-c-accordion__panel-body--PaddingBottom
- *              Sets the padding bottom for the panel content.
- *              {@default `var(--pf-global--spacer--sm, 0.5rem)`}
- * @cssprop     {<length>} --pf-c-accordion__panel-body--PaddingLeft
- *              Sets the padding left for the panel content.
- *              {@default `var(--pf-global--spacer--md, 1rem)`}
- * @cssprop     {<color>} --pf-c-accordion__panel-body--before--BackgroundColor
- *              Sets the background color for the panel content.
- *              {@default `transparent`}
- * @cssprop     --pf-c-accordion__panel-body--before--Width
- *              Sets the before width for the panel content.
- *              {@default `var(--pf-global--BorderWidth--lg, 3px)`}
- */
-let PfAccordionPanel = class PfAccordionPanel extends BaseAccordionPanel {
+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`;
+let PfAccordionPanel = class PfAccordionPanel extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.expanded = false;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.id || (this.id = getRandomId(this.localName));
+        this.setAttribute('role', 'region');
+    }
+    render() {
+        return html `
+      <div tabindex="-1">
+        <div id="container" class="content" part="container">
+          <div class="body">
+            <slot></slot>
+          </div>
+        </div>
+      </div>
+    `;
+    }
 };
-PfAccordionPanel.styles = [...BaseAccordionPanel.styles, style];
+PfAccordionPanel.styles = [style];
+PfAccordionPanel.version = "4.0.0";
+__decorate([
+    property({ type: Boolean, reflect: true })
+], PfAccordionPanel.prototype, "expanded", void 0);
 __decorate([
     property({ reflect: true })
 ], PfAccordionPanel.prototype, "bordered", 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,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AAEtD,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;;;AAI7D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AAEI,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,kBAAkB;;AACtC,uBAAM,GAAG,CAAC,GAAG,kBAAkB,CAAC,MAAM,EAAE,KAAK,CAAC,AAAxC,CAAyC;AAElC;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;kDAA6B;AAH9C,gBAAgB;IAD5B,aAAa,CAAC,oBAAoB,CAAC;GACvB,gBAAgB,CAI5B","sourcesContent":["import { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\n\nimport { BaseAccordionPanel } from './BaseAccordionPanel.js';\n\nimport style from './pf-accordion-panel.css';\n\n/**\n * Accordion Panel\n *\n * @slot - Panel content\n * @cssprop     {<color>} --pf-c-accordion--BackgroundColor\n *              Sets the background color for the panel content.\n *              {@default `var(--pf-global--BackgroundColor--light-100, #ffffff)`}\n * @cssprop     {<color>} --pf-c-accordion__panel--Color\n *              Sets the font color for the panel content.\n *              {@default `var(--pf-global--Color--dark-200, #6a6e73)`}\n * @cssprop     {<length>} --pf-c-accordion__panel--FontSize\n *              Sets the font size for the panel content.\n *              {@default `var(--pf-global--FontSize--sm, 0.875rem)`}\n * @cssprop     {<color>} --pf-c-accordion__panel--content-body--before--BackgroundColor\n *              Sets the sidebar color for the panel when the context is expanded.\n *              {@default `var(--pf-global--primary-color--100, #0066cc)`}\n * @cssprop     {<length>} --pf-c-accordion__panel--m-fixed--MaxHeight\n *              Sets the maximum height for the panel content.\n *              Will only be used if the `fixed` attribute is used.\n *              {@default `9.375rem`}\n * @cssprop     {<length>} --pf-c-accordion__panel-body--PaddingTop\n *              Sets the padding top for the panel content.\n *              {@default `var(--pf-global--spacer--sm, 0.5rem)`}\n * @cssprop     {<length>} --pf-c-accordion__panel-body--PaddingRight\n *              Sets the padding right for the panel content.\n *              {@default `var(--pf-global--spacer--md, 1rem)`}\n * @cssprop     {<length>} --pf-c-accordion__panel-body--PaddingBottom\n *              Sets the padding bottom for the panel content.\n *              {@default `var(--pf-global--spacer--sm, 0.5rem)`}\n * @cssprop     {<length>} --pf-c-accordion__panel-body--PaddingLeft\n *              Sets the padding left for the panel content.\n *              {@default `var(--pf-global--spacer--md, 1rem)`}\n * @cssprop     {<color>} --pf-c-accordion__panel-body--before--BackgroundColor\n *              Sets the background color for the panel content.\n *              {@default `transparent`}\n * @cssprop     --pf-c-accordion__panel-body--before--Width\n *              Sets the before width for the panel content.\n *              {@default `var(--pf-global--BorderWidth--lg, 3px)`}\n */\n@customElement('pf-accordion-panel')\nexport class PfAccordionPanel extends BaseAccordionPanel {\n  static readonly styles = [...BaseAccordionPanel.styles, style];\n\n  @property({ reflect: true }) bordered?: 'true' | 'false';\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;;;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"]}