@patternfly/elements 2.3.2 → 3.0.0

package/pf-accordion/BaseAccordionHeader.d.ts

@@ -6,16 +6,18 @@ export declare class AccordionHeaderChangeEvent extends ComposedEvent {
     expanded: boolean;
     toggle: BaseAccordionHeader;
     accordion: BaseAccordion;
+    target: BaseAccordionHeader;
     constructor(expanded: boolean, toggle: BaseAccordionHeader, accordion: BaseAccordion);
 }
 export declare abstract class BaseAccordionHeader extends LitElement {
     #private;
-    static readonly styles: import("lit").CSSResult[];
+    static readonly styles: CSSStyleSheet[];
     static readonly shadowRootOptions: {
         delegatesFocus: boolean;
         mode: ShadowRootMode;
         slotAssignment?: SlotAssignmentMode | undefined;
         customElements?: CustomElementRegistry | undefined;
+        registry?: CustomElementRegistry | undefined;
     };
     expanded: boolean;
     headingText?: string;

package/pf-accordion/BaseAccordionHeader.js

@@ -1,4 +1,5 @@
-import { __decorate } from "tslib";
+var _BaseAccordionHeader_instances, _BaseAccordionHeader_generatedHtag, _BaseAccordionHeader_logger, _BaseAccordionHeader_header, _BaseAccordionHeader_initHeader, _BaseAccordionHeader_renderHeaderContent, _BaseAccordionHeader_getOrCreateHeader, _BaseAccordionHeader_onClick;
+import { __classPrivateFieldGet, __classPrivateFieldSet, __decorate } from "tslib";
 import { LitElement, html } from 'lit';
 import { property } from 'lit/decorators/property.js';
 import { BaseAccordion } from './BaseAccordion.js';
@@ -6,7 +7,7 @@ import { ComposedEvent } from '@patternfly/pfe-core';
 import { getRandomId } from '@patternfly/pfe-core/functions/random.js';
 import { Logger } from '@patternfly/pfe-core/controllers/logger.js';
 import { css } from "lit";
-const style = css `#heading{font-size:100%;padding:0;margin:0}a,button{cursor:pointer}.toggle,.toggle:after,.toggle:before{padding:0;margin:0}.toggle{position:relative;display:flex;align-items:center;justify-content:space-between;width:100%;border:0}.toggle:after{content:"";position:absolute;bottom:0;left:0}span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}`;
+const style = css `#heading {\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}\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}\n\n.toggle:after {\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}\n`;
 const isPorHeader = (el) => el instanceof HTMLElement && !!el.tagName.match(/P|^H[1-6]/);
 export class AccordionHeaderChangeEvent extends ComposedEvent {
     constructor(expanded, toggle, accordion) {
@@ -16,53 +17,51 @@ export class AccordionHeaderChangeEvent extends ComposedEvent {
         this.accordion = accordion;
     }
 }
-class BaseAccordionHeader extends LitElement {
+export class BaseAccordionHeader extends LitElement {
     constructor() {
         super(...arguments);
+        _BaseAccordionHeader_instances.add(this);
         this.expanded = false;
-        this.#logger = new Logger(this);
+        _BaseAccordionHeader_generatedHtag.set(this, void 0);
+        _BaseAccordionHeader_logger.set(this, new Logger(this));
+        _BaseAccordionHeader_header.set(this, void 0);
     }
-    static { this.styles = [style]; }
-    static { this.shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true }; }
-    #generatedHtag;
-    #logger;
-    #header;
     connectedCallback() {
         super.connectedCallback();
-        this.addEventListener('click', this.#onClick);
+        this.addEventListener('click', __classPrivateFieldGet(this, _BaseAccordionHeader_instances, "m", _BaseAccordionHeader_onClick));
         this.hidden = true;
-        this.id ||= getRandomId(this.localName);
-        this.#initHeader();
-    }
-    async #initHeader() {
-        if (this.headingText && !this.headingTag) {
-            this.headingTag = 'h3';
-        }
-        this.#header = this.#getOrCreateHeader();
-        // prevent double-logging
-        if (this.#header !== this.#generatedHtag) {
-            this.#generatedHtag = undefined;
-        }
-        do {
-            await this.updateComplete;
-        } while (!await this.updateComplete);
-        // Remove the hidden attribute after upgrade
-        this.hidden = false;
+        this.id || (this.id = getRandomId(this.localName));
+        __classPrivateFieldGet(this, _BaseAccordionHeader_instances, "m", _BaseAccordionHeader_initHeader).call(this);
     }
     render() {
         switch (this.headingTag) {
-            case 'h1': return html `<h1 id="heading">${this.#renderHeaderContent()}</h1>`;
-            case 'h2': return html `<h2 id="heading">${this.#renderHeaderContent()}</h2>`;
-            case 'h3': return html `<h3 id="heading">${this.#renderHeaderContent()}</h3>`;
-            case 'h4': return html `<h4 id="heading">${this.#renderHeaderContent()}</h4>`;
-            case 'h5': return html `<h5 id="heading">${this.#renderHeaderContent()}</h5>`;
-            case 'h6': return html `<h6 id="heading">${this.#renderHeaderContent()}</h6>`;
-            default: return this.#renderHeaderContent();
+            case 'h1': return html `<h1 id="heading">${__classPrivateFieldGet(this, _BaseAccordionHeader_instances, "m", _BaseAccordionHeader_renderHeaderContent).call(this)}</h1>`;
+            case 'h2': return html `<h2 id="heading">${__classPrivateFieldGet(this, _BaseAccordionHeader_instances, "m", _BaseAccordionHeader_renderHeaderContent).call(this)}</h2>`;
+            case 'h3': return html `<h3 id="heading">${__classPrivateFieldGet(this, _BaseAccordionHeader_instances, "m", _BaseAccordionHeader_renderHeaderContent).call(this)}</h3>`;
+            case 'h4': return html `<h4 id="heading">${__classPrivateFieldGet(this, _BaseAccordionHeader_instances, "m", _BaseAccordionHeader_renderHeaderContent).call(this)}</h4>`;
+            case 'h5': return html `<h5 id="heading">${__classPrivateFieldGet(this, _BaseAccordionHeader_instances, "m", _BaseAccordionHeader_renderHeaderContent).call(this)}</h5>`;
+            case 'h6': return html `<h6 id="heading">${__classPrivateFieldGet(this, _BaseAccordionHeader_instances, "m", _BaseAccordionHeader_renderHeaderContent).call(this)}</h6>`;
+            default: return __classPrivateFieldGet(this, _BaseAccordionHeader_instances, "m", _BaseAccordionHeader_renderHeaderContent).call(this);
         }
     }
-    #renderHeaderContent() {
-        const headingText = this.headingText?.trim() ?? this.#header?.textContent?.trim();
-        return html `
+}
+_BaseAccordionHeader_generatedHtag = new WeakMap(), _BaseAccordionHeader_logger = new WeakMap(), _BaseAccordionHeader_header = new WeakMap(), _BaseAccordionHeader_instances = new WeakSet(), _BaseAccordionHeader_initHeader = async function _BaseAccordionHeader_initHeader() {
+    if (this.headingText && !this.headingTag) {
+        this.headingTag = 'h3';
+    }
+    __classPrivateFieldSet(this, _BaseAccordionHeader_header, __classPrivateFieldGet(this, _BaseAccordionHeader_instances, "m", _BaseAccordionHeader_getOrCreateHeader).call(this), "f");
+    // prevent double-logging
+    if (__classPrivateFieldGet(this, _BaseAccordionHeader_header, "f") !== __classPrivateFieldGet(this, _BaseAccordionHeader_generatedHtag, "f")) {
+        __classPrivateFieldSet(this, _BaseAccordionHeader_generatedHtag, undefined, "f");
+    }
+    do {
+        await this.updateComplete;
+    } while (!await this.updateComplete);
+    // Remove the hidden attribute after upgrade
+    this.hidden = false;
+}, _BaseAccordionHeader_renderHeaderContent = function _BaseAccordionHeader_renderHeaderContent() {
+    const headingText = this.headingText?.trim() ?? __classPrivateFieldGet(this, _BaseAccordionHeader_header, "f")?.textContent?.trim();
+    return html `
       <button id="button"
               class="toggle"
               aria-expanded="${String(!!this.expanded)}">
@@ -72,49 +71,48 @@ class BaseAccordionHeader extends LitElement {
         ${this.renderAfterButton?.()}
       </button>
     `;
+}, _BaseAccordionHeader_getOrCreateHeader = function _BaseAccordionHeader_getOrCreateHeader() {
+    // Check if there is no nested element or nested textNodes
+    if (!this.firstElementChild && !this.firstChild) {
+        return void __classPrivateFieldGet(this, _BaseAccordionHeader_logger, "f").warn('No header content provided');
     }
-    #getOrCreateHeader() {
-        // Check if there is no nested element or nested textNodes
-        if (!this.firstElementChild && !this.firstChild) {
-            return void this.#logger.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, _BaseAccordionHeader_logger, "f").warn('No heading information was 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 this.#logger.warn('No heading information was provided.');
-            }
-            else if (otherContent.length) {
-                this.#logger.warn('Heading currently only supports 1 tag; extra tags will be ignored.');
-            }
-            return heading;
+        else if (otherContent.length) {
+            __classPrivateFieldGet(this, _BaseAccordionHeader_logger, "f").warn('Heading currently only supports 1 tag; extra tags will be ignored.');
+        }
+        return heading;
+    }
+    else {
+        if (!__classPrivateFieldGet(this, _BaseAccordionHeader_generatedHtag, "f")) {
+            __classPrivateFieldGet(this, _BaseAccordionHeader_logger, "f").warn('Header should contain at least 1 heading tag for correct semantics.');
+        }
+        __classPrivateFieldSet(this, _BaseAccordionHeader_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, _BaseAccordionHeader_generatedHtag, "f").textContent = this.firstChild.textContent;
         }
         else {
-            if (!this.#generatedHtag) {
-                this.#logger.warn('Header should contain at least 1 heading tag for correct semantics.');
-            }
-            this.#generatedHtag = document.createElement('h3');
-            // 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) {
-                this.#generatedHtag.textContent = this.firstChild.textContent;
-            }
-            else {
-                this.#generatedHtag.textContent = this.textContent;
-            }
-            return this.#generatedHtag;
+            __classPrivateFieldGet(this, _BaseAccordionHeader_generatedHtag, "f").textContent = this.textContent;
         }
+        return __classPrivateFieldGet(this, _BaseAccordionHeader_generatedHtag, "f");
     }
-    #onClick(event) {
-        const expanded = !this.expanded;
-        const acc = event.composedPath().find(BaseAccordion.isAccordion);
-        if (acc) {
-            this.dispatchEvent(new AccordionHeaderChangeEvent(expanded, this, acc));
-        }
+}, _BaseAccordionHeader_onClick = function _BaseAccordionHeader_onClick(event) {
+    const expanded = !this.expanded;
+    const acc = event.composedPath().find(BaseAccordion.isAccordion);
+    if (acc) {
+        this.dispatchEvent(new AccordionHeaderChangeEvent(expanded, this, acc));
     }
-}
+};
+BaseAccordionHeader.styles = [style];
+BaseAccordionHeader.shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true };
 __decorate([
     property({ type: Boolean, reflect: true })
 ], BaseAccordionHeader.prototype, "expanded", void 0);
@@ -124,5 +122,4 @@ __decorate([
 __decorate([
     property({ reflect: true, attribute: 'heading-tag' })
 ], BaseAccordionHeader.prototype, "headingTag", void 0);
-export { BaseAccordionHeader };
 //# sourceMappingURL=BaseAccordionHeader.js.map

package/pf-accordion/BaseAccordionHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseAccordionHeader.js","sourceRoot":"","sources":["BaseAccordionHeader.ts"],"names":[],"mappings":"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","sourcesContent":["import type { TemplateResult } from 'lit';\n\nimport { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators/property.js';\n\nimport { BaseAccordion } from './BaseAccordion.js';\nimport { ComposedEvent } from '@patternfly/pfe-core';\nimport { getRandomId } from '@patternfly/pfe-core/functions/random.js';\nimport { Logger } from '@patternfly/pfe-core/controllers/logger.js';\n\nimport style from './BaseAccordionHeader.css';\n\nconst isPorHeader =\n  (el: Node): el is HTMLElement =>\n    el instanceof HTMLElement && !!el.tagName.match(/P|^H[1-6]/);\n\nexport class AccordionHeaderChangeEvent extends ComposedEvent {\n  constructor(\n    public expanded: boolean,\n    public toggle: BaseAccordionHeader,\n    public accordion: BaseAccordion\n  ) {\n    super('change');\n  }\n}\n\nexport abstract class BaseAccordionHeader extends LitElement {\n  static readonly styles = [style];\n\n  static override readonly shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true };\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  override connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener('click', this.#onClick);\n    this.hidden = true;\n    this.id ||= getRandomId(this.localName);\n    this.#initHeader();\n  }\n\n  async #initHeader() {\n    if (this.headingText && !this.headingTag) {\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  /** Template hook: before </button> */\n  renderAfterButton?(): TemplateResult;\n\n  override render(): TemplateResult {\n    switch (this.headingTag) {\n      case 'h1': return html`<h1 id=\"heading\">${this.#renderHeaderContent()}</h1>`;\n      case 'h2': return html`<h2 id=\"heading\">${this.#renderHeaderContent()}</h2>`;\n      case 'h3': return html`<h3 id=\"heading\">${this.#renderHeaderContent()}</h3>`;\n      case 'h4': return html`<h4 id=\"heading\">${this.#renderHeaderContent()}</h4>`;\n      case 'h5': return html`<h5 id=\"heading\">${this.#renderHeaderContent()}</h5>`;\n      case 'h6': return html`<h6 id=\"heading\">${this.#renderHeaderContent()}</h6>`;\n      default: return this.#renderHeaderContent();\n    }\n  }\n\n  #renderHeaderContent() {\n    const headingText = this.headingText?.trim() ?? this.#header?.textContent?.trim();\n    return html`\n      <button id=\"button\"\n              class=\"toggle\"\n              aria-expanded=\"${String(!!this.expanded) as 'true' | 'false'}\">\n        <span part=\"text\">${headingText ?? html`\n          <slot></slot>`}\n        </span>\n        ${this.renderAfterButton?.()}\n      </button>\n    `;\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(event: MouseEvent) {\n    const expanded = !this.expanded;\n    const acc = event.composedPath().find(BaseAccordion.isAccordion);\n    if (acc) {\n      this.dispatchEvent(new AccordionHeaderChangeEvent(expanded, this, acc));\n    }\n  }\n}\n"]}
+{"version":3,"file":"BaseAccordionHeader.js","sourceRoot":"","sources":["BaseAccordionHeader.ts"],"names":[],"mappings":";;AAEA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AAEtD,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACnD,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAE,WAAW,EAAE,MAAM,0CAA0C,CAAC;AACvE,OAAO,EAAE,MAAM,EAAE,MAAM,4CAA4C,CAAC;;;AAIpE,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,0BAA2B,SAAQ,aAAa;IAE3D,YACS,QAAiB,EACjB,MAA2B,EAC3B,SAAwB;QAE/B,KAAK,CAAC,QAAQ,CAAC,CAAC;QAJT,aAAQ,GAAR,QAAQ,CAAS;QACjB,WAAM,GAAN,MAAM,CAAqB;QAC3B,cAAS,GAAT,SAAS,CAAe;IAGjC,CAAC;CACF;AAED,MAAM,OAAgB,mBAAoB,SAAQ,UAAU;IAA5D;;;QAK8C,aAAQ,GAAG,KAAK,CAAC;QAM7D,qDAAoC;QAEpC,sCAAU,IAAI,MAAM,CAAC,IAAI,CAAC,EAAC;QAE3B,8CAAsB;IAmGxB,CAAC;IAjGU,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,uBAAA,IAAI,oEAAS,CAAC,CAAC;QAC9C,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;QACnB,IAAI,CAAC,EAAE,KAAP,IAAI,CAAC,EAAE,GAAK,WAAW,CAAC,IAAI,CAAC,SAAS,CAAC,EAAC;QACxC,uBAAA,IAAI,uEAAY,MAAhB,IAAI,CAAc,CAAC;IACrB,CAAC;IAwBQ,MAAM;QACb,QAAQ,IAAI,CAAC,UAAU,EAAE,CAAC;YACxB,KAAK,IAAI,CAAC,CAAC,OAAO,IAAI,CAAA,oBAAoB,uBAAA,IAAI,gFAAqB,MAAzB,IAAI,CAAuB,OAAO,CAAC;YAC7E,KAAK,IAAI,CAAC,CAAC,OAAO,IAAI,CAAA,oBAAoB,uBAAA,IAAI,gFAAqB,MAAzB,IAAI,CAAuB,OAAO,CAAC;YAC7E,KAAK,IAAI,CAAC,CAAC,OAAO,IAAI,CAAA,oBAAoB,uBAAA,IAAI,gFAAqB,MAAzB,IAAI,CAAuB,OAAO,CAAC;YAC7E,KAAK,IAAI,CAAC,CAAC,OAAO,IAAI,CAAA,oBAAoB,uBAAA,IAAI,gFAAqB,MAAzB,IAAI,CAAuB,OAAO,CAAC;YAC7E,KAAK,IAAI,CAAC,CAAC,OAAO,IAAI,CAAA,oBAAoB,uBAAA,IAAI,gFAAqB,MAAzB,IAAI,CAAuB,OAAO,CAAC;YAC7E,KAAK,IAAI,CAAC,CAAC,OAAO,IAAI,CAAA,oBAAoB,uBAAA,IAAI,gFAAqB,MAAzB,IAAI,CAAuB,OAAO,CAAC;YAC7E,OAAO,CAAC,CAAC,OAAO,uBAAA,IAAI,gFAAqB,MAAzB,IAAI,CAAuB,CAAC;QAC9C,CAAC;IACH,CAAC;;gOAhCD,KAAK;IACH,IAAI,IAAI,CAAC,WAAW,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,CAAC;QACzC,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;IACzB,CAAC;IACD,uBAAA,IAAI,+BAAW,uBAAA,IAAI,8EAAmB,MAAvB,IAAI,CAAqB,MAAA,CAAC;IAEzC,yBAAyB;IACzB,IAAI,uBAAA,IAAI,mCAAQ,KAAK,uBAAA,IAAI,0CAAe,EAAE,CAAC;QACzC,uBAAA,IAAI,sCAAkB,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;IAkBC,MAAM,WAAW,GAAG,IAAI,CAAC,WAAW,EAAE,IAAI,EAAE,IAAI,uBAAA,IAAI,mCAAQ,EAAE,WAAW,EAAE,IAAI,EAAE,CAAC;IAClF,OAAO,IAAI,CAAA;;;+BAGgB,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAqB;4BAC9C,WAAW,IAAI,IAAI,CAAA;wBACvB;;UAEd,IAAI,CAAC,iBAAiB,EAAE,EAAE;;KAE/B,CAAC;AACJ,CAAC;IAGC,0DAA0D;IAC1D,IAAI,CAAC,IAAI,CAAC,iBAAiB,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,CAAC;QAChD,OAAO,KAAK,uBAAA,IAAI,mCAAQ,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;aACzD,MAAM,CAAC,CAAC,CAAC,EAAoB,EAAE,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,MAAM,CAAC,IAAI,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC;QAE9E,sEAAsE;QACtE,6EAA6E;QAC7E,IAAI,CAAC,OAAO,EAAE,CAAC;YACb,OAAO,KAAK,uBAAA,IAAI,mCAAQ,CAAC,IAAI,CAAC,sCAAsC,CAAC,CAAC;QACxE,CAAC;aAAM,IAAI,YAAY,CAAC,MAAM,EAAE,CAAC;YAC/B,uBAAA,IAAI,mCAAQ,CAAC,IAAI,CAAC,oEAAoE,CAAC,CAAC;QAC1F,CAAC;QACD,OAAO,OAAO,CAAC;IACjB,CAAC;SAAM,CAAC;QACN,IAAI,CAAC,uBAAA,IAAI,0CAAe,EAAE,CAAC;YACzB,uBAAA,IAAI,mCAAQ,CAAC,IAAI,CAAC,qEAAqE,CAAC,CAAC;QAC3F,CAAC;QACD,uBAAA,IAAI,sCAAkB,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,0CAAe,CAAC,WAAW,GAAG,IAAI,CAAC,UAAU,CAAC,WAAW,CAAC;QAChE,CAAC;aAAM,CAAC;YACN,uBAAA,IAAI,0CAAe,CAAC,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC;QACrD,CAAC;QAED,OAAO,uBAAA,IAAI,0CAAe,CAAC;IAC7B,CAAC;AACH,CAAC,uEAEQ,KAAiB;IACxB,MAAM,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;IAChC,MAAM,GAAG,GAAG,KAAK,CAAC,YAAY,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;IACjE,IAAI,GAAG,EAAE,CAAC;QACR,IAAI,CAAC,aAAa,CAAC,IAAI,0BAA0B,CAAC,QAAQ,EAAE,IAAI,EAAE,GAAG,CAAC,CAAC,CAAC;IAC1E,CAAC;AACH,CAAC;AAhHe,0BAAM,GAAG,CAAC,KAAK,CAAC,AAAV,CAAW;AAER,qCAAiB,GAAG,EAAE,GAAG,UAAU,CAAC,iBAAiB,EAAE,cAAc,EAAE,IAAI,EAAE,AAA5D,CAA6D;AAE3D;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;qDAAkB;AAEL;IAAvD,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,cAAc,EAAE,CAAC;wDAAsB;AAEtB;IAAtD,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,aAAa,EAAE,CAAC;uDAAqB","sourcesContent":["import type { TemplateResult } from 'lit';\n\nimport { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators/property.js';\n\nimport { BaseAccordion } from './BaseAccordion.js';\nimport { ComposedEvent } from '@patternfly/pfe-core';\nimport { getRandomId } from '@patternfly/pfe-core/functions/random.js';\nimport { Logger } from '@patternfly/pfe-core/controllers/logger.js';\n\nimport style from './BaseAccordionHeader.css';\n\nconst isPorHeader =\n  (el: Node): el is HTMLElement =>\n    el instanceof HTMLElement && !!el.tagName.match(/P|^H[1-6]/);\n\nexport class AccordionHeaderChangeEvent extends ComposedEvent {\n  declare target: BaseAccordionHeader;\n  constructor(\n    public expanded: boolean,\n    public toggle: BaseAccordionHeader,\n    public accordion: BaseAccordion\n  ) {\n    super('change');\n  }\n}\n\nexport abstract class BaseAccordionHeader extends LitElement {\n  static readonly styles = [style];\n\n  static override readonly shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true };\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  override connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener('click', this.#onClick);\n    this.hidden = true;\n    this.id ||= getRandomId(this.localName);\n    this.#initHeader();\n  }\n\n  async #initHeader() {\n    if (this.headingText && !this.headingTag) {\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  /** Template hook: before </button> */\n  renderAfterButton?(): TemplateResult;\n\n  override render(): TemplateResult {\n    switch (this.headingTag) {\n      case 'h1': return html`<h1 id=\"heading\">${this.#renderHeaderContent()}</h1>`;\n      case 'h2': return html`<h2 id=\"heading\">${this.#renderHeaderContent()}</h2>`;\n      case 'h3': return html`<h3 id=\"heading\">${this.#renderHeaderContent()}</h3>`;\n      case 'h4': return html`<h4 id=\"heading\">${this.#renderHeaderContent()}</h4>`;\n      case 'h5': return html`<h5 id=\"heading\">${this.#renderHeaderContent()}</h5>`;\n      case 'h6': return html`<h6 id=\"heading\">${this.#renderHeaderContent()}</h6>`;\n      default: return this.#renderHeaderContent();\n    }\n  }\n\n  #renderHeaderContent() {\n    const headingText = this.headingText?.trim() ?? this.#header?.textContent?.trim();\n    return html`\n      <button id=\"button\"\n              class=\"toggle\"\n              aria-expanded=\"${String(!!this.expanded) as 'true' | 'false'}\">\n        <span part=\"text\">${headingText ?? html`\n          <slot></slot>`}\n        </span>\n        ${this.renderAfterButton?.()}\n      </button>\n    `;\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(event: MouseEvent) {\n    const expanded = !this.expanded;\n    const acc = event.composedPath().find(BaseAccordion.isAccordion);\n    if (acc) {\n      this.dispatchEvent(new AccordionHeaderChangeEvent(expanded, this, acc));\n    }\n  }\n}\n"]}

package/pf-accordion/BaseAccordionPanel.css

@@ -9,11 +9,6 @@
   position: relative;
 }
 
-:host(.animating) {
-  display: block;
-  transition: height 0.3s ease-in-out;
-}
-
 :host([fixed]) {
   overflow-y: auto;
 }

package/pf-accordion/BaseAccordionPanel.d.ts

@@ -1,7 +1,7 @@
 import { LitElement } from 'lit';
 export declare class BaseAccordionPanel extends LitElement {
-    static readonly styles: import("lit").CSSResult[];
+    static readonly styles: CSSStyleSheet[];
     expanded: boolean;
     connectedCallback(): void;
-    render(): import("lit-html").TemplateResult<1>;
+    render(): import("lit").TemplateResult<1>;
 }

package/pf-accordion/BaseAccordionPanel.js

@@ -3,16 +3,15 @@ import { LitElement, html } from 'lit';
 import { property } from 'lit/decorators/property.js';
 import { getRandomId } from '@patternfly/pfe-core/functions/random.js';
 import { css } from "lit";
-const style = css `:host{display:none;overflow:hidden;will-change:height}:host([expanded]){display:block;position:relative}:host(.animating){display:block;transition:height .3s ease-in-out}:host([fixed]){overflow-y:auto}.body{position:relative;overflow:hidden}.body:after{content:"";position:absolute;top:0;bottom:0;left:0}`;
-class BaseAccordionPanel extends LitElement {
+const style = css `:host {\n  display: none;\n  overflow: hidden;\n  will-change: height;\n}\n\n:host([expanded]) {\n  display: block;\n  position: relative;\n}\n\n:host([fixed]) {\n  overflow-y: auto;\n}\n\n.body {\n  position: relative;\n  overflow: hidden;\n}\n\n.body:after {\n  content: "";\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n}\n`;
+export class BaseAccordionPanel extends LitElement {
     constructor() {
         super(...arguments);
         this.expanded = false;
     }
-    static { this.styles = [style]; }
     connectedCallback() {
         super.connectedCallback();
-        this.id ||= getRandomId(this.localName);
+        this.id || (this.id = getRandomId(this.localName));
         this.setAttribute('role', 'region');
     }
     render() {
@@ -27,8 +26,8 @@ class BaseAccordionPanel extends LitElement {
     `;
     }
 }
+BaseAccordionPanel.styles = [style];
 __decorate([
     property({ type: Boolean, reflect: true })
 ], BaseAccordionPanel.prototype, "expanded", void 0);
-export { BaseAccordionPanel };
 //# sourceMappingURL=BaseAccordionPanel.js.map

package/pf-accordion/BaseAccordionPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseAccordionPanel.js","sourceRoot":"","sources":["BaseAccordionPanel.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AAEtD,OAAO,EAAE,WAAW,EAAE,MAAM,0CAA0C,CAAC;;;AAIvE,MAAa,kBAAmB,SAAQ,UAAU;IAAlD;;QAG8C,aAAQ,GAAG,KAAK,CAAC;IAmB/D,CAAC;aArBiB,WAAM,GAAG,CAAC,KAAK,CAAC,AAAV,CAAW;IAIjC,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,EAAE,KAAK,WAAW,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QACxC,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;IACtC,CAAC;IAEQ,MAAM;QACb,OAAO,IAAI,CAAA;;;;;;;;KAQV,CAAC;IACJ,CAAC;;AAlB2C;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;oDAAkB;SAHlD,kBAAkB","sourcesContent":["import { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators/property.js';\n\nimport { getRandomId } from '@patternfly/pfe-core/functions/random.js';\n\nimport style from './BaseAccordionPanel.css';\n\nexport class BaseAccordionPanel extends LitElement {\n  static readonly styles = [style];\n\n  @property({ type: Boolean, reflect: true }) expanded = false;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.id ||= getRandomId(this.localName);\n    this.setAttribute('role', 'region');\n  }\n\n  override render() {\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"]}
+{"version":3,"file":"BaseAccordionPanel.js","sourceRoot":"","sources":["BaseAccordionPanel.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AAEtD,OAAO,EAAE,WAAW,EAAE,MAAM,0CAA0C,CAAC;;;AAIvE,MAAM,OAAO,kBAAmB,SAAQ,UAAU;IAAlD;;QAG8C,aAAQ,GAAG,KAAK,CAAC;IAmB/D,CAAC;IAjBC,iBAAiB;QACf,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;;AApBe,yBAAM,GAAG,CAAC,KAAK,CAAC,AAAV,CAAW;AAEW;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;oDAAkB","sourcesContent":["import { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators/property.js';\n\nimport { getRandomId } from '@patternfly/pfe-core/functions/random.js';\n\nimport style from './BaseAccordionPanel.css';\n\nexport class BaseAccordionPanel extends LitElement {\n  static readonly styles = [style];\n\n  @property({ type: Boolean, reflect: true }) expanded = false;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.id ||= getRandomId(this.localName);\n    this.setAttribute('role', 'region');\n  }\n\n  override render() {\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"]}

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

@@ -72,11 +72,11 @@ import '@patternfly/elements/pf-icon/pf-icon.js';
  */
 export declare class PfAccordionHeader extends BaseAccordionHeader {
     #private;
-    static readonly styles: import("lit").CSSResult[];
+    static readonly styles: CSSStyleSheet[];
     bordered?: 'true' | 'false';
     icon?: string;
     iconSet?: string;
-    renderAfterButton(): import("lit-html").TemplateResult<1>;
+    renderAfterButton(): import("lit").TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {

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

@@ -1,11 +1,12 @@
-import { __decorate } from "tslib";
+var _PfAccordionHeader_slots;
+import { __classPrivateFieldGet, __decorate } from "tslib";
 import { 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 { css } from "lit";
-const style = css `:host{--pf-icon--size:var(--pf-c-accordion__toggle--IconSize, 10px);color:var(--pf-c-accordion__toggle--Color,var(--pf-global--Color--100,#151515));background-color:var(--pf-global--BackgroundColor--100,#fff)}:host([large]){--pf-c-accordion__toggle--PaddingTop:var(--pf-global--spacer--md, 1rem);--pf-c-accordion__toggle--PaddingRight:var(--pf-global--spacer--md, 1rem);--pf-c-accordion__toggle--PaddingBottom:var(--pf-global--spacer--md, 1rem);--pf-c-accordion__toggle--PaddingLeft:var(--pf-global--spacer--lg, 1.5rem);--pf-c-accordion__toggle--FontFamily:var(--pf-global--FontFamily--redhat-updated--heading--sans-serif,\n      "RedHatDisplayUpdated",\n      "Overpass",\n      overpass,\n      helvetica,\n      arial,\n      sans-serif\n    );--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))}.toggle,.toggle:after,.toggle:before{background-color:var(--pf-c-accordion__toggle--BackgroundColor,transparent)}.icon{transition:var(--pf-c-accordion__toggle-icon--Transition, .2s ease-in 0s)}.toggle{padding:var(--pf-c-accordion__toggle--PaddingTop,var(--pf-global--spacer--md,.5rem)) var(--pf-c-accordion__toggle--PaddingRight,var(--pf-global--spacer--md,1rem)) var(--pf-c-accordion__toggle--PaddingBottom,var(--pf-global--spacer--sm,.5rem)) var(--pf-c-accordion__toggle--PaddingLeft,var(--pf-global--spacer--md,1rem));font-family: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));font-size:var(--pf-c-accordion__toggle--FontSize, var(--pf-global--FontSize--lg, 1rem));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:var(\n      --pf-c-accordion__toggle--expanded--before--BackgroundColor,\n      var(\n        --pf-global--primary-color--100,\n        #0066cc\n      )\n    )}.toggle:after{top:var(--pf-c-accordion__toggle--before--Top,-1px);width:var(--pf-c-accordion__toggle--before--Width,var(--pf-global--BorderWidth--lg,3px));background-color:var(--pf-c-accordion__toggle--after--BackgroundColor,transparent)}span{max-width:var(--pf-c-accordion__toggle-text--MaxWidth,calc(100% - var(--pf-global--spacer--lg,1.5rem)))}.toggle[aria-expanded=true] .icon{rotate:var(--pf-c-accordion__toggle--expanded-icon--Rotate,90deg)}.toggle:active,.toggle:focus,.toggle:hover{background-color:var(--pf-c-accordion__toggle--active--BackgroundColor,var(--pf-global--BackgroundColor--200,#f0f0f0))}.toggle:active span,.toggle:focus span,.toggle:hover span{color:var(--pf-c-accordion__toggle--active-text--Color,var(--pf-global--link--Color,#06c))}.toggle:active span,.toggle:focus span{font-weight:var(--pf-c-accordion__toggle--active-text--FontWeight,var(--pf-global--FontWeight--semi-bold,700))}`;
+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`;
 import '@patternfly/elements/pf-icon/pf-icon.js';
 /**
  * Accordion Header
@@ -78,10 +79,12 @@ import '@patternfly/elements/pf-icon/pf-icon.js';
  *              {@default `0.2s ease-in 0s`}
  */
 let PfAccordionHeader = class PfAccordionHeader extends BaseAccordionHeader {
-    static { this.styles = [...BaseAccordionHeader.styles, style]; }
-    #slots = new SlotController(this, 'accents', null);
+    constructor() {
+        super(...arguments);
+        _PfAccordionHeader_slots.set(this, new SlotController(this, 'accents', null));
+    }
     renderAfterButton() {
-        return html `${!this.#slots.hasSlotted('accents') ? '' : html `
+        return html `${!__classPrivateFieldGet(this, _PfAccordionHeader_slots, "f").hasSlotted('accents') ? '' : html `
       <span part="accents">
         <slot name="accents"></slot>
       </span>`}
@@ -93,6 +96,8 @@ let PfAccordionHeader = class PfAccordionHeader extends BaseAccordionHeader {
     `;
     }
 };
+_PfAccordionHeader_slots = new WeakMap();
+PfAccordionHeader.styles = [...BaseAccordionHeader.styles, style];
 __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":";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;AAEH,IAAa,iBAAiB,GAA9B,MAAa,iBAAkB,SAAQ,mBAAmB;aACxC,WAAM,GAAG,CAAC,GAAG,mBAAmB,CAAC,MAAM,EAAE,KAAK,CAAC,AAAzC,CAA0C;IAQhE,MAAM,GAAG,IAAI,cAAc,CAAC,IAAI,EAAE,SAAS,EAAE,IAAI,CAAC,CAAC;IAEnD,iBAAiB;QACf,OAAO,IAAI,CAAA,GAAG,CAAC,IAAI,CAAC,MAAM,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;;AAnB4B;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;SAvBY,iBAAiB","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":";;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"]}

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

@@ -39,7 +39,7 @@ import { BaseAccordionPanel } from './BaseAccordionPanel.js';
  *              {@default `var(--pf-global--BorderWidth--lg, 3px)`}
  */
 export declare class PfAccordionPanel extends BaseAccordionPanel {
-    static readonly styles: import("lit").CSSResult[];
+    static readonly styles: CSSStyleSheet[];
     bordered?: 'true' | 'false';
 }
 declare global {

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

@@ -3,7 +3,7 @@ import { customElement } from 'lit/decorators/custom-element.js';
 import { property } from 'lit/decorators/property.js';
 import { BaseAccordionPanel } from './BaseAccordionPanel.js';
 import { css } from "lit";
-const style = css `:host{color:var(--pf-global--Color--100,#151515);background-color:var(--pf-c-accordion--BackgroundColor,var(--pf-global--BackgroundColor--light-100,#fff))}.body{padding:var(--pf-c-accordion__panel-body--PaddingTop,var(--pf-global--spacer--sm,.5rem)) var(--pf-c-accordion__panel-body--PaddingRight,var(--pf-global--spacer--md,1rem)) var(--pf-c-accordion__panel-body--PaddingBottom,var(--pf-global--spacer--sm,.5rem)) var(--pf-c-accordion__panel-body--PaddingLeft,var(--pf-global--spacer--md,1rem))}.body:after{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)}:host([large]){--pf-c-accordion__panel-body--PaddingTop:var(--pf-c-accordion--m-display-lg__expanded-content-body--PaddingTop, 0);--pf-c-accordion__panel-body--PaddingRight:var(--pf-c-accordion--m-display-lg__expanded-content-body--PaddingRight, 1rem);--pf-c-accordion__panel-body--PaddingBottom:var(--pf-c-accordion--m-display-lg__expanded-content-body--PaddingBottom, 1.5rem);--pf-c-accordion__panel-body--PaddingLeft:var(--pf-c-accordion--m-display-lg__expanded-content-body--PaddingLeft, 1.5rem);--pf-c-accordion__panel--FontSize:var(--pf-c-accordion--m-display-lg__expanded-content--FontSize, 1rem);--pf-c-accordion__panel--Color:var(--pf-c-accordion--m-display-lg__expanded-content--Color, #151515)}:host([large]) .body:last-child{--pf-c-accordion__panel-body--PaddingBottom:var(--pf-c-accordion--m-display-lg__expanded-content-body--last-child--PaddingBottom, 1.5rem)}.content{color:var(--pf-c-accordion__panel--Color,var(--pf-global--Color--dark-200,#6a6e73));font-size:var(--pf-c-accordion__panel--FontSize, var(--pf-global--FontSize--sm, .875rem))}:host([fixed]){max-height:var(--pf-c-accordion__panel--m-fixed--MaxHeight,9.375rem)}.content[expanded],:host([expanded]) .content{--pf-c-accordion__panel-body--before--BackgroundColor:var(\n      --pf-c-accordion__panel--content-body--before--BackgroundColor,\n      var(--pf-global--primary-color--100, #0066cc))}`;
+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
  *
@@ -44,8 +44,8 @@ const style = css `:host{color:var(--pf-global--Color--100,#151515);background-c
  *              {@default `var(--pf-global--BorderWidth--lg, 3px)`}
  */
 let PfAccordionPanel = class PfAccordionPanel extends BaseAccordionPanel {
-    static { this.styles = [...BaseAccordionPanel.styles, style]; }
 };
+PfAccordionPanel.styles = [...BaseAccordionPanel.styles, style];
 __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;AAEH,IAAa,gBAAgB,GAA7B,MAAa,gBAAiB,SAAQ,kBAAkB;aACtC,WAAM,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;SAJY,gBAAgB","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,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"]}

package/pf-accordion/pf-accordion.css

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