@patternfly/elements 2.3.1 → 2.4.0

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';
@@ -19,50 +20,48 @@ export class AccordionHeaderChangeEvent extends ComposedEvent {
 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);

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":"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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  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.js

@@ -9,10 +9,9 @@ class BaseAccordionPanel extends LitElement {
         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,6 +26,7 @@ class BaseAccordionPanel extends LitElement {
     `;
     }
 }
+BaseAccordionPanel.styles = [style];
 __decorate([
     property({ type: Boolean, reflect: true })
 ], BaseAccordionPanel.prototype, "expanded", void 0);

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,MAAa,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;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"]}

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

@@ -1,4 +1,5 @@
-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';
@@ -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;AAEH,IAAa,iBAAiB,GAA9B,MAAa,iBAAkB,SAAQ,mBAAmB;IAA1D;;QASE,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;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"]}

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

@@ -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;AAEH,IAAa,gBAAgB,GAA7B,MAAa,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;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"]}

package/pf-accordion/pf-accordion.js

@@ -35,7 +35,6 @@ let PfAccordion = class PfAccordion extends BaseAccordion {
         this.large = false;
         this.fixed = false;
     }
-    static { this.styles = [...BaseAccordion.styles, style]; }
     async firstUpdated() {
         let index = null;
         if (this.single) {
@@ -67,6 +66,7 @@ let PfAccordion = class PfAccordion extends BaseAccordion {
         await super.expand(index, parentAccordion);
     }
 };
+PfAccordion.styles = [...BaseAccordion.styles, style];
 __decorate([
     property({ reflect: true, type: Boolean })
 ], PfAccordion.prototype, "single", void 0);

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

@@ -1 +1 @@
-{"version":3,"file":"pf-accordion.js","sourceRoot":"","sources":["pf-accordion.ts"],"names":[],"mappings":"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","sourcesContent":["import { observed } from '@patternfly/pfe-core/decorators.js';\nimport { property } from 'lit/decorators/property.js';\nimport { customElement } from 'lit/decorators/custom-element.js';\n\nimport { BaseAccordion } from './BaseAccordion.js';\nimport { BaseAccordionHeader } from './BaseAccordionHeader.js';\n\nexport * from './pf-accordion-header.js';\nexport * from './pf-accordion-panel.js';\n\nimport style from './pf-accordion.css';\n\n/**\n * An **accordion** is an interactive container that expands and collapses to hide or reveal nested content. It takes advantage of progressive disclosure to help reduce page scrolling, by allowing users to choose whether they want to show or hide more detailed information as needed.\n *\n * @summary Toggle the visibility of sections of content\n *\n * @fires {AccordionExpandEvent} expand - when a panel expands\n * @fires {AccordionCollapseEvent} collapse - when a panel collapses\n *\n *\n * @slot\n *       Place the `pf-accordion-header` and `pf-accordion-panel` elements here.\n *\n * @cssproperty {<color>} --accordion__bordered--Color\n *              Color for the borders between accordion headers when using bordered or large attributes\n *              {@default `var(--rh-color-black-300, #d2d2d2)`}\n */\n@customElement('pf-accordion')\nexport class PfAccordion extends BaseAccordion {\n  static readonly styles = [...BaseAccordion.styles, style];\n\n  /** When true, only one accordion panel may be expanded at a time */\n  @property({ reflect: true, type: Boolean }) single = false;\n\n  /** Whether to apply the `bordered` style variant */\n  @property({ type: Boolean, reflect: true }) bordered = false;\n\n  /** Whether to apply the `large` style variant */\n  @observed(function largeChanged(this: PfAccordion) {\n    [...this.headers, ...this.panels].forEach(el => el.toggleAttribute('large', this.large));\n  })\n  @property({ type: Boolean, reflect: true }) large = false;\n\n  @property({ type: Boolean, reflect: true }) fixed = false;\n\n  async firstUpdated() {\n    let index: number | null = null;\n    if (this.single) {\n      const allHeaders = [...this.querySelectorAll('pf-accordion-header')];\n      const lastExpanded = allHeaders.filter(x => x.hasAttribute('expanded')).pop();\n      if (lastExpanded) {\n        index = allHeaders.indexOf(lastExpanded);\n      }\n    }\n    await super.firstUpdated();\n    if (index !== null) {\n      this.headers.forEach((_, i) => {\n        this.headers.at(i)?.toggleAttribute('expanded', i === index);\n        this.panels.at(i)?.toggleAttribute('expanded', i === index);\n      });\n    }\n  }\n\n  override async expand(index: number, parentAccordion?: BaseAccordion) {\n    if (index === -1) {\n      return;\n    }\n\n    const allHeaders: Array<BaseAccordionHeader> = this.headers;\n\n    // Get all the headers and capture the item by index value\n    if (this.single) {\n      await Promise.all([\n        ...allHeaders.map((header, index) => header.expanded && this.collapse(index)),\n      ]);\n    }\n\n    await super.expand(index, parentAccordion);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-accordion': PfAccordion;\n  }\n}\n"]}
+{"version":3,"file":"pf-accordion.js","sourceRoot":"","sources":["pf-accordion.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,oCAAoC,CAAC;AAC9D,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACtD,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AAEjE,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACnD,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAE/D,cAAc,0BAA0B,CAAC;AACzC,cAAc,yBAAyB,CAAC;;;AAIxC;;;;;;;;;;;;;;;GAeG;AAEH,IAAa,WAAW,GAAxB,MAAa,WAAY,SAAQ,aAAa;IAA9C;;QAGE,oEAAoE;QACxB,WAAM,GAAG,KAAK,CAAC;QAE3D,oDAAoD;QACR,aAAQ,GAAG,KAAK,CAAC;QAE7D,iDAAiD;QAIL,UAAK,GAAG,KAAK,CAAC;QAEd,UAAK,GAAG,KAAK,CAAC;IAoC5D,CAAC;IAlCC,KAAK,CAAC,YAAY;QAChB,IAAI,KAAK,GAAkB,IAAI,CAAC;QAChC,IAAI,IAAI,CAAC,MAAM,EAAE;YACf,MAAM,UAAU,GAAG,CAAC,GAAG,IAAI,CAAC,gBAAgB,CAAC,qBAAqB,CAAC,CAAC,CAAC;YACrE,MAAM,YAAY,GAAG,UAAU,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC;YAC9E,IAAI,YAAY,EAAE;gBAChB,KAAK,GAAG,UAAU,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC;aAC1C;SACF;QACD,MAAM,KAAK,CAAC,YAAY,EAAE,CAAC;QAC3B,IAAI,KAAK,KAAK,IAAI,EAAE;YAClB,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;gBAC5B,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,eAAe,CAAC,UAAU,EAAE,CAAC,KAAK,KAAK,CAAC,CAAC;gBAC7D,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,eAAe,CAAC,UAAU,EAAE,CAAC,KAAK,KAAK,CAAC,CAAC;YAC9D,CAAC,CAAC,CAAC;SACJ;IACH,CAAC;IAEQ,KAAK,CAAC,MAAM,CAAC,KAAa,EAAE,eAA+B;QAClE,IAAI,KAAK,KAAK,CAAC,CAAC,EAAE;YAChB,OAAO;SACR;QAED,MAAM,UAAU,GAA+B,IAAI,CAAC,OAAO,CAAC;QAE5D,0DAA0D;QAC1D,IAAI,IAAI,CAAC,MAAM,EAAE;YACf,MAAM,OAAO,CAAC,GAAG,CAAC;gBAChB,GAAG,UAAU,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC,MAAM,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;aAC9E,CAAC,CAAC;SACJ;QAED,MAAM,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE,eAAe,CAAC,CAAC;IAC7C,CAAC;;AAjDe,kBAAM,GAAG,CAAC,GAAG,aAAa,CAAC,MAAM,EAAE,KAAK,CAAC,AAAnC,CAAoC;AAGd;IAA3C,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;2CAAgB;AAGf;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;6CAAkB;AAMjB;IAH3C,QAAQ,CAAC,SAAS,YAAY;QAC7B,CAAC,GAAG,IAAI,CAAC,OAAO,EAAE,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,eAAe,CAAC,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;IAC3F,CAAC,CAAC;IACD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0CAAe;AAEd;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0CAAe;AAf/C,WAAW;IADvB,aAAa,CAAC,cAAc,CAAC;GACjB,WAAW,CAmDvB;SAnDY,WAAW","sourcesContent":["import { observed } from '@patternfly/pfe-core/decorators.js';\nimport { property } from 'lit/decorators/property.js';\nimport { customElement } from 'lit/decorators/custom-element.js';\n\nimport { BaseAccordion } from './BaseAccordion.js';\nimport { BaseAccordionHeader } from './BaseAccordionHeader.js';\n\nexport * from './pf-accordion-header.js';\nexport * from './pf-accordion-panel.js';\n\nimport style from './pf-accordion.css';\n\n/**\n * An **accordion** is an interactive container that expands and collapses to hide or reveal nested content. It takes advantage of progressive disclosure to help reduce page scrolling, by allowing users to choose whether they want to show or hide more detailed information as needed.\n *\n * @summary Toggle the visibility of sections of content\n *\n * @fires {AccordionExpandEvent} expand - when a panel expands\n * @fires {AccordionCollapseEvent} collapse - when a panel collapses\n *\n *\n * @slot\n *       Place the `pf-accordion-header` and `pf-accordion-panel` elements here.\n *\n * @cssproperty {<color>} --accordion__bordered--Color\n *              Color for the borders between accordion headers when using bordered or large attributes\n *              {@default `var(--rh-color-black-300, #d2d2d2)`}\n */\n@customElement('pf-accordion')\nexport class PfAccordion extends BaseAccordion {\n  static readonly styles = [...BaseAccordion.styles, style];\n\n  /** When true, only one accordion panel may be expanded at a time */\n  @property({ reflect: true, type: Boolean }) single = false;\n\n  /** Whether to apply the `bordered` style variant */\n  @property({ type: Boolean, reflect: true }) bordered = false;\n\n  /** Whether to apply the `large` style variant */\n  @observed(function largeChanged(this: PfAccordion) {\n    [...this.headers, ...this.panels].forEach(el => el.toggleAttribute('large', this.large));\n  })\n  @property({ type: Boolean, reflect: true }) large = false;\n\n  @property({ type: Boolean, reflect: true }) fixed = false;\n\n  async firstUpdated() {\n    let index: number | null = null;\n    if (this.single) {\n      const allHeaders = [...this.querySelectorAll('pf-accordion-header')];\n      const lastExpanded = allHeaders.filter(x => x.hasAttribute('expanded')).pop();\n      if (lastExpanded) {\n        index = allHeaders.indexOf(lastExpanded);\n      }\n    }\n    await super.firstUpdated();\n    if (index !== null) {\n      this.headers.forEach((_, i) => {\n        this.headers.at(i)?.toggleAttribute('expanded', i === index);\n        this.panels.at(i)?.toggleAttribute('expanded', i === index);\n      });\n    }\n  }\n\n  override async expand(index: number, parentAccordion?: BaseAccordion) {\n    if (index === -1) {\n      return;\n    }\n\n    const allHeaders: Array<BaseAccordionHeader> = this.headers;\n\n    // Get all the headers and capture the item by index value\n    if (this.single) {\n      await Promise.all([\n        ...allHeaders.map((header, index) => header.expanded && this.collapse(index)),\n      ]);\n    }\n\n    await super.expand(index, parentAccordion);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-accordion': PfAccordion;\n  }\n}\n"]}

package/pf-avatar/BaseAvatar.js

@@ -25,7 +25,6 @@ class BaseAvatar extends LitElement {
         /** Whether or not the Avatar image is dark */
         this.dark = false;
     }
-    static { this.styles = [style]; }
     render() {
         return this.src != null ? html `
       <img
@@ -47,6 +46,7 @@ class BaseAvatar extends LitElement {
       `;
     }
 }
+BaseAvatar.styles = [style];
 __decorate([
     property()
 ], BaseAvatar.prototype, "src", void 0);

package/pf-avatar/BaseAvatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseAvatar.js","sourceRoot":"","sources":["BaseAvatar.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;;;AAItD,MAAM,OAAO,eAAgB,SAAQ,KAAK;IACxC,YAAmB,aAAoB;QACrC,KAAK,CAAC,MAAM,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC;QADhC,kBAAa,GAAb,aAAa,CAAO;IAEvC,CAAC;CACF;AAED;;;;;GAKG;AAEH,MAAa,UAAW,SAAQ,UAAU;IAA1C;;QAME,yCAAyC;QACZ,QAAG,GAAY,cAAc,CAAC;QAE3D,yBAAyB;QACI,SAAI,GAA8B,IAAI,CAAC;QAEpE,8CAA8C;QACF,SAAI,GAAG,KAAK,CAAC;IAsB3D,CAAC;aAlCiB,WAAM,GAAG,CAAC,KAAK,CAAC,AAAV,CAAW;IAcjC,MAAM;QACJ,OAAO,IAAI,CAAC,GAAG,IAAI,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA;;eAEnB,IAAI,CAAC,IAAI;cACV,IAAI,CAAC,GAAG,IAAI,EAAE;iBACX,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,eAAe,CAAC,CAAC,CAAC,CAAC;cAC3D,IAAI,CAAC,GAAG;KACjB,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA;;;;;KAKnB,CAAC,CAAC,CAAC,IAAI,CAAA;;;;;;OAML,CAAC;IACN,CAAC;;AA9BW;IAAX,QAAQ,EAAE;uCAAc;AAGI;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uCAA+B;AAG9B;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wCAAwC;AAGxB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wCAAc;SAb9C,UAAU","sourcesContent":["import { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators/property.js';\n\nimport style from './BaseAvatar.css';\n\nexport class AvatarLoadEvent extends Event {\n  constructor(public originalEvent: Event) {\n    super('load', { bubbles: true, composed: true });\n  }\n}\n\n/**\n * Avatar is an element for displaying a user's avatar image.\n *\n *\n * @summary For displaying a user's avatar image\n */\n\nexport class BaseAvatar extends LitElement {\n  static readonly styles = [style];\n\n  /** The URL to the user's custom avatar image. */\n  @property() src?: string;\n\n  /** The alt text for the avatar image. */\n  @property({ reflect: true }) alt?: string = 'Avatar image';\n\n  /** Size of the Avatar */\n  @property({ reflect: true }) size: 'sm' | 'md' | 'lg' | 'xl' = 'sm';\n\n  /** Whether or not the Avatar image is dark */\n  @property({ type: Boolean, reflect: true }) dark = false;\n\n  render() {\n    return this.src != null ? html`\n      <img\n        size=${this.size}\n        alt=${this.alt ?? ''}\n        @load=\"${(e: Event) => this.dispatchEvent(new AvatarLoadEvent(e))}\"\n        src=${this.src}>\n    ` : this.dark ? html`\n      <svg xmlns=\"http://www.w3.org/2000/svg\" style=\"enable-background:new 0 0 36 36\" viewBox=\"0 0 36 36\">\n        <style>.st1,.st2{fill-rule:evenodd;clip-rule:evenodd;fill:#6a6e73}.st2{fill:#4f5255}</style><path d=\"M0 0h36v36H0z\" style=\"fill:#212427\"/>\n        <path d=\"M30.5 36c-.4-3.9-1.3-9-2.9-11-1.1-1.4-2.3-2.2-3.5-2.6s-1.8-.6-6.3-.6-6.1.7-6.1.7c-1.2.4-2.4 1.2-3.4 2.6C6.7 27 5.8 32.2 5.4 36h25.1zM17.7 20.1c-3.5 0-6.4-2.9-6.4-6.4s2.9-6.4 6.4-6.4 6.4 2.9 6.4 6.4-2.8 6.4-6.4 6.4z\" class=\"st1\"/><path d=\"M13.3 36v-6.7c-2 .4-2.9 1.4-3.1 3.5l-.1 3.2h3.2zM22.7 36v-6.7c2 .4 2.9 1.4 3.1 3.5l.1 3.2h-3.2z\" class=\"st2\"/>\n      </svg>\n    ` : html`\n      <svg xmlns=\"http://www.w3.org/2000/svg\" style=\"enable-background:new 0 0 36 36\" viewBox=\"0 0 36 36\">\n        <style>.st2{fill:#b8bbbe}</style><path d=\"M0 0h36v36H0z\" style=\"fill-rule:evenodd;clip-rule:evenodd;fill:#f0f0f0\"/>\n        <path d=\"M17.7 20.1c-3.5 0-6.4-2.9-6.4-6.4s2.9-6.4 6.4-6.4 6.4 2.9 6.4 6.4-2.8 6.4-6.4 6.4z\" style=\"fill-rule:evenodd;clip-rule:evenodd;fill:#d2d2d2\"/><path d=\"M13.3 36v-6.7c-2 .4-2.9 1.4-3.1 3.5l-.1 3.2h3.2z\" class=\"st2\"/>\n        <path d=\"m10.1 36 .1-3.2c.2-2.1 1.1-3.1 3.1-3.5V36h9.4v-6.7c2 .4 2.9 1.4 3.1 3.5l.1 3.2h4.7c-.4-3.9-1.3-9-2.9-11-1.1-1.4-2.3-2.2-3.5-2.6s-1.8-.6-6.3-.6-6.1.7-6.1.7c-1.2.4-2.4 1.2-3.4 2.6-1.7 1.9-2.6 7.1-3 10.9h4.7z\" style=\"fill:#d2d2d2\"/><path d=\"m25.9 36-.1-3.2c-.2-2.1-1.1-3.1-3.1-3.5V36h3.2z\" class=\"st2\"/>\n      </svg>\n      `;\n  }\n}\n"]}
+{"version":3,"file":"BaseAvatar.js","sourceRoot":"","sources":["BaseAvatar.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;;;AAItD,MAAM,OAAO,eAAgB,SAAQ,KAAK;IACxC,YAAmB,aAAoB;QACrC,KAAK,CAAC,MAAM,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC;QADhC,kBAAa,GAAb,aAAa,CAAO;IAEvC,CAAC;CACF;AAED;;;;;GAKG;AAEH,MAAa,UAAW,SAAQ,UAAU;IAA1C;;QAME,yCAAyC;QACZ,QAAG,GAAY,cAAc,CAAC;QAE3D,yBAAyB;QACI,SAAI,GAA8B,IAAI,CAAC;QAEpE,8CAA8C;QACF,SAAI,GAAG,KAAK,CAAC;IAsB3D,CAAC;IApBC,MAAM;QACJ,OAAO,IAAI,CAAC,GAAG,IAAI,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA;;eAEnB,IAAI,CAAC,IAAI;cACV,IAAI,CAAC,GAAG,IAAI,EAAE;iBACX,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,eAAe,CAAC,CAAC,CAAC,CAAC;cAC3D,IAAI,CAAC,GAAG;KACjB,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA;;;;;KAKnB,CAAC,CAAC,CAAC,IAAI,CAAA;;;;;;OAML,CAAC;IACN,CAAC;;AAjCe,iBAAM,GAAG,CAAC,KAAK,CAAC,AAAV,CAAW;AAGrB;IAAX,QAAQ,EAAE;uCAAc;AAGI;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uCAA+B;AAG9B;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wCAAwC;AAGxB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wCAAc;SAb9C,UAAU","sourcesContent":["import { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators/property.js';\n\nimport style from './BaseAvatar.css';\n\nexport class AvatarLoadEvent extends Event {\n  constructor(public originalEvent: Event) {\n    super('load', { bubbles: true, composed: true });\n  }\n}\n\n/**\n * Avatar is an element for displaying a user's avatar image.\n *\n *\n * @summary For displaying a user's avatar image\n */\n\nexport class BaseAvatar extends LitElement {\n  static readonly styles = [style];\n\n  /** The URL to the user's custom avatar image. */\n  @property() src?: string;\n\n  /** The alt text for the avatar image. */\n  @property({ reflect: true }) alt?: string = 'Avatar image';\n\n  /** Size of the Avatar */\n  @property({ reflect: true }) size: 'sm' | 'md' | 'lg' | 'xl' = 'sm';\n\n  /** Whether or not the Avatar image is dark */\n  @property({ type: Boolean, reflect: true }) dark = false;\n\n  render() {\n    return this.src != null ? html`\n      <img\n        size=${this.size}\n        alt=${this.alt ?? ''}\n        @load=\"${(e: Event) => this.dispatchEvent(new AvatarLoadEvent(e))}\"\n        src=${this.src}>\n    ` : this.dark ? html`\n      <svg xmlns=\"http://www.w3.org/2000/svg\" style=\"enable-background:new 0 0 36 36\" viewBox=\"0 0 36 36\">\n        <style>.st1,.st2{fill-rule:evenodd;clip-rule:evenodd;fill:#6a6e73}.st2{fill:#4f5255}</style><path d=\"M0 0h36v36H0z\" style=\"fill:#212427\"/>\n        <path d=\"M30.5 36c-.4-3.9-1.3-9-2.9-11-1.1-1.4-2.3-2.2-3.5-2.6s-1.8-.6-6.3-.6-6.1.7-6.1.7c-1.2.4-2.4 1.2-3.4 2.6C6.7 27 5.8 32.2 5.4 36h25.1zM17.7 20.1c-3.5 0-6.4-2.9-6.4-6.4s2.9-6.4 6.4-6.4 6.4 2.9 6.4 6.4-2.8 6.4-6.4 6.4z\" class=\"st1\"/><path d=\"M13.3 36v-6.7c-2 .4-2.9 1.4-3.1 3.5l-.1 3.2h3.2zM22.7 36v-6.7c2 .4 2.9 1.4 3.1 3.5l.1 3.2h-3.2z\" class=\"st2\"/>\n      </svg>\n    ` : html`\n      <svg xmlns=\"http://www.w3.org/2000/svg\" style=\"enable-background:new 0 0 36 36\" viewBox=\"0 0 36 36\">\n        <style>.st2{fill:#b8bbbe}</style><path d=\"M0 0h36v36H0z\" style=\"fill-rule:evenodd;clip-rule:evenodd;fill:#f0f0f0\"/>\n        <path d=\"M17.7 20.1c-3.5 0-6.4-2.9-6.4-6.4s2.9-6.4 6.4-6.4 6.4 2.9 6.4 6.4-2.8 6.4-6.4 6.4z\" style=\"fill-rule:evenodd;clip-rule:evenodd;fill:#d2d2d2\"/><path d=\"M13.3 36v-6.7c-2 .4-2.9 1.4-3.1 3.5l-.1 3.2h3.2z\" class=\"st2\"/>\n        <path d=\"m10.1 36 .1-3.2c.2-2.1 1.1-3.1 3.1-3.5V36h9.4v-6.7c2 .4 2.9 1.4 3.1 3.5l.1 3.2h4.7c-.4-3.9-1.3-9-2.9-11-1.1-1.4-2.3-2.2-3.5-2.6s-1.8-.6-6.3-.6-6.1.7-6.1.7c-1.2.4-2.4 1.2-3.4 2.6-1.7 1.9-2.6 7.1-3 10.9h4.7z\" style=\"fill:#d2d2d2\"/><path d=\"m25.9 36-.1-3.2c-.2-2.1-1.1-3.1-3.1-3.5V36h3.2z\" class=\"st2\"/>\n      </svg>\n      `;\n  }\n}\n"]}

package/pf-avatar/pf-avatar.js

@@ -15,8 +15,8 @@ let PfAvatar = class PfAvatar extends BaseAvatar {
         /** Size of the Avatar */
         this.size = 'sm';
     }
-    static { this.styles = [style]; }
 };
+PfAvatar.styles = [style];
 __decorate([
     property({ reflect: true })
 ], PfAvatar.prototype, "size", void 0);

package/pf-avatar/pf-avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"pf-avatar.js","sourceRoot":"","sources":["pf-avatar.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACtD,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AAEjE,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;;;AAI7C;;;;GAIG;AAEH,IAAa,QAAQ,GAArB,MAAa,QAAS,SAAQ,UAAU;IAAxC;;QAGE,yBAAyB;QACI,SAAI,GAA8B,IAAI,CAAC;IAItE,CAAC;aAPiB,WAAM,GAAG,CAAC,KAAK,CAAC,AAAV,CAAW;;AAGJ;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;sCAAwC;AAGvC;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wCAA2B;AAP5C,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CAQpB;SARY,QAAQ","sourcesContent":["import { property } from 'lit/decorators/property.js';\nimport { customElement } from 'lit/decorators/custom-element.js';\n\nimport { BaseAvatar } from './BaseAvatar.js';\n\nimport style from './pf-avatar.css';\n\n/**\n * An **avatar** is a visual used to represent a user. It may contain an image or a placeholder graphic.\n *\n * @summary For displaying a user's avatar image\n */\n@customElement('pf-avatar')\nexport class PfAvatar extends BaseAvatar {\n  static readonly styles = [style];\n\n  /** Size of the Avatar */\n  @property({ reflect: true }) size: 'sm' | 'md' | 'lg' | 'xl' = 'sm';\n\n  /** Whether to display a border around the avatar */\n  @property({ reflect: true }) border?: 'light' | 'dark';\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-avatar': PfAvatar;\n  }\n}\n"]}
+{"version":3,"file":"pf-avatar.js","sourceRoot":"","sources":["pf-avatar.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACtD,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AAEjE,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;;;AAI7C;;;;GAIG;AAEH,IAAa,QAAQ,GAArB,MAAa,QAAS,SAAQ,UAAU;IAAxC;;QAGE,yBAAyB;QACI,SAAI,GAA8B,IAAI,CAAC;IAItE,CAAC;;AAPiB,eAAM,GAAG,CAAC,KAAK,CAAC,AAAV,CAAW;AAGJ;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;sCAAwC;AAGvC;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wCAA2B;AAP5C,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CAQpB;SARY,QAAQ","sourcesContent":["import { property } from 'lit/decorators/property.js';\nimport { customElement } from 'lit/decorators/custom-element.js';\n\nimport { BaseAvatar } from './BaseAvatar.js';\n\nimport style from './pf-avatar.css';\n\n/**\n * An **avatar** is a visual used to represent a user. It may contain an image or a placeholder graphic.\n *\n * @summary For displaying a user's avatar image\n */\n@customElement('pf-avatar')\nexport class PfAvatar extends BaseAvatar {\n  static readonly styles = [style];\n\n  /** Size of the Avatar */\n  @property({ reflect: true }) size: 'sm' | 'md' | 'lg' | 'xl' = 'sm';\n\n  /** Whether to display a border around the avatar */\n  @property({ reflect: true }) border?: 'light' | 'dark';\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-avatar': PfAvatar;\n  }\n}\n"]}

package/pf-badge/BaseBadge.js

@@ -2,7 +2,6 @@ import { LitElement, html } from 'lit';
 import { css } from "lit";
 const style = css `:host{position:relative;white-space:nowrap;text-align:center;display:inline-block}`;
 class BaseBadge extends LitElement {
-    static { this.styles = [style]; }
     render() {
         const { threshold, number, textContent } = this;
         const displayText = (threshold && number && (threshold < number)) ? `${threshold.toString()}+`
@@ -13,5 +12,6 @@ class BaseBadge extends LitElement {
     `;
     }
 }
+BaseBadge.styles = [style];
 export { BaseBadge };
 //# sourceMappingURL=BaseBadge.js.map

package/pf-badge/BaseBadge.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseBadge.js","sourceRoot":"","sources":["BaseBadge.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;;;AAIvC,MAAsB,SAAU,SAAQ,UAAU;aAChC,WAAM,GAAG,CAAC,KAAK,CAAC,CAAC;IAkBxB,MAAM;QACb,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,WAAW,EAAE,GAAG,IAAI,CAAC;QAChD,MAAM,WAAW,GACb,CAAC,SAAS,IAAI,MAAM,IAAI,CAAC,SAAS,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,SAAS,CAAC,QAAQ,EAAE,GAAG;YAC5E,CAAC,CAAC,CAAC,MAAM,IAAI,IAAI,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,EAAE;gBACtC,CAAC,CAAC,WAAW,IAAI,EAAE,CAAC;QACtB,OAAO,IAAI,CAAA;cACD,WAAW;KACpB,CAAC;IACJ,CAAC;;SA5BmB,SAAS","sourcesContent":["import { LitElement, html } from 'lit';\n\nimport style from './BaseBadge.css';\n\nexport abstract class BaseBadge extends LitElement {\n  static readonly styles = [style];\n\n  abstract state?: string;\n\n  /**\n   * Sets a numeric value for a badge.\n   *\n   * You can pair it with `threshold` attribute to add a `+` sign\n   * if the number exceeds the threshold value.\n   */\n  abstract number?: number;\n\n  /**\n   * Sets a threshold for the numeric value and adds `+` sign if\n   * the numeric value exceeds the threshold value.\n   */\n  abstract threshold?: number;\n\n  override render() {\n    const { threshold, number, textContent } = this;\n    const displayText =\n        (threshold && number && (threshold < number)) ? `${threshold.toString()}+`\n      : (number != null) ? number.toString()\n      : textContent ?? '';\n    return html`\n      <span>${displayText}</span>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"BaseBadge.js","sourceRoot":"","sources":["BaseBadge.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;;;AAIvC,MAAsB,SAAU,SAAQ,UAAU;IAmBvC,MAAM;QACb,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,WAAW,EAAE,GAAG,IAAI,CAAC;QAChD,MAAM,WAAW,GACb,CAAC,SAAS,IAAI,MAAM,IAAI,CAAC,SAAS,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,SAAS,CAAC,QAAQ,EAAE,GAAG;YAC5E,CAAC,CAAC,CAAC,MAAM,IAAI,IAAI,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,EAAE;gBACtC,CAAC,CAAC,WAAW,IAAI,EAAE,CAAC;QACtB,OAAO,IAAI,CAAA;cACD,WAAW;KACpB,CAAC;IACJ,CAAC;;AA3Be,gBAAM,GAAG,CAAC,KAAK,CAAC,CAAC;SADb,SAAS","sourcesContent":["import { LitElement, html } from 'lit';\n\nimport style from './BaseBadge.css';\n\nexport abstract class BaseBadge extends LitElement {\n  static readonly styles = [style];\n\n  abstract state?: string;\n\n  /**\n   * Sets a numeric value for a badge.\n   *\n   * You can pair it with `threshold` attribute to add a `+` sign\n   * if the number exceeds the threshold value.\n   */\n  abstract number?: number;\n\n  /**\n   * Sets a threshold for the numeric value and adds `+` sign if\n   * the numeric value exceeds the threshold value.\n   */\n  abstract threshold?: number;\n\n  override render() {\n    const { threshold, number, textContent } = this;\n    const displayText =\n        (threshold && number && (threshold < number)) ? `${threshold.toString()}+`\n      : (number != null) ? number.toString()\n      : textContent ?? '';\n    return html`\n      <span>${displayText}</span>\n    `;\n  }\n}\n"]}

package/pf-badge/pf-badge.js

@@ -28,8 +28,8 @@ const styles = css `:host{border-radius:var(--pf-c-badge--BorderRadius,var(--pf-
  * @cssprop {<color>} --pf-c-badge--m-unread--BackgroundColor   {@default `#06c`}
  */
 let PfBadge = class PfBadge extends BaseBadge {
-    static { this.styles = [...BaseBadge.styles, styles]; }
 };
+PfBadge.styles = [...BaseBadge.styles, styles];
 __decorate([
     property({ reflect: true })
 ], PfBadge.prototype, "state", void 0);

package/pf-badge/pf-badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"pf-badge.js","sourceRoot":"","sources":["pf-badge.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AAEtD,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;;;AAI3C;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAIH,IAAa,OAAO,GAApB,MAAa,OAAQ,SAAQ,SAAS;aACpB,WAAM,GAAG,CAAC,GAAG,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC,AAAhC,CAAiC;;AAM1B;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;sCAA2B;AAEZ;IAA1C,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCAAiB;AAEhB;IAA1C,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CAAoB;AAXnD,OAAO;IADnB,aAAa,CAAC,UAAU,CAAC;GACb,OAAO,CAYnB;SAZY,OAAO","sourcesContent":["import { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\n\nimport { BaseBadge } from './BaseBadge.js';\n\nimport styles from './pf-badge.css';\n\n/**\n * A **badge** is used to annotate other information like a label or an object name.\n *\n * @cssprop {<length>} --pf-c-badge--BorderRadius               {@default `180em`}\n *\n * @cssprop {<length>} --pf-c-badge--MinWidth                   {@default `2rem`}\n *\n * @cssprop {<length>} --pf-c-badge--PaddingLeft                {@default `0.5rem`}\n * @cssprop {<length>} --pf-c-badge--PaddingRight               {@default `0.5rem`}\n *\n * @cssprop {<length>} --pf-c-badge--FontSize                   {@default `0.85em`}\n * @cssprop {<length>} --pf-c-badge--LineHeight                 {@default `1.5`}\n * @cssprop {<length>} --pf-c-badge--FontWeight                 {@default `700`}\n *\n * @cssprop {<color>} --pf-c-badge--Color                       {@default `#151515`}\n * @cssprop {<color>} --pf-c-badge--BackgroundColor             {@default `#f0f0f0`}\n *\n * @cssprop {<color>} --pf-c-badge--m-read--Color               {@default `#151515`}\n * @cssprop {<color>} --pf-c-badge--m-read--BackgroundColor     {@default `#f0f0f0`}\n *\n * @cssprop {<color>} --pf-c-badge--m-unread--Color             {@default `#fff`}\n * @cssprop {<color>} --pf-c-badge--m-unread--BackgroundColor   {@default `#06c`}\n */\n\n\n@customElement('pf-badge')\nexport class PfBadge extends BaseBadge {\n  static readonly styles = [...BaseBadge.styles, styles];\n\n  /**\n   * Denotes the state-of-affairs this badge represents\n   * Options include read and unread\n   */\n  @property({ reflect: true }) state?: 'unread' | 'read';\n\n  @property({ reflect: true, type: Number }) number?: number;\n\n  @property({ reflect: true, type: Number }) threshold?: number;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-badge': PfBadge;\n  }\n}\n"]}
+{"version":3,"file":"pf-badge.js","sourceRoot":"","sources":["pf-badge.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AAEtD,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;;;AAI3C;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAIH,IAAa,OAAO,GAApB,MAAa,OAAQ,SAAQ,SAAS;;AACpB,cAAM,GAAG,CAAC,GAAG,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC,AAAhC,CAAiC;AAM1B;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;sCAA2B;AAEZ;IAA1C,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCAAiB;AAEhB;IAA1C,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CAAoB;AAXnD,OAAO;IADnB,aAAa,CAAC,UAAU,CAAC;GACb,OAAO,CAYnB;SAZY,OAAO","sourcesContent":["import { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\n\nimport { BaseBadge } from './BaseBadge.js';\n\nimport styles from './pf-badge.css';\n\n/**\n * A **badge** is used to annotate other information like a label or an object name.\n *\n * @cssprop {<length>} --pf-c-badge--BorderRadius               {@default `180em`}\n *\n * @cssprop {<length>} --pf-c-badge--MinWidth                   {@default `2rem`}\n *\n * @cssprop {<length>} --pf-c-badge--PaddingLeft                {@default `0.5rem`}\n * @cssprop {<length>} --pf-c-badge--PaddingRight               {@default `0.5rem`}\n *\n * @cssprop {<length>} --pf-c-badge--FontSize                   {@default `0.85em`}\n * @cssprop {<length>} --pf-c-badge--LineHeight                 {@default `1.5`}\n * @cssprop {<length>} --pf-c-badge--FontWeight                 {@default `700`}\n *\n * @cssprop {<color>} --pf-c-badge--Color                       {@default `#151515`}\n * @cssprop {<color>} --pf-c-badge--BackgroundColor             {@default `#f0f0f0`}\n *\n * @cssprop {<color>} --pf-c-badge--m-read--Color               {@default `#151515`}\n * @cssprop {<color>} --pf-c-badge--m-read--BackgroundColor     {@default `#f0f0f0`}\n *\n * @cssprop {<color>} --pf-c-badge--m-unread--Color             {@default `#fff`}\n * @cssprop {<color>} --pf-c-badge--m-unread--BackgroundColor   {@default `#06c`}\n */\n\n\n@customElement('pf-badge')\nexport class PfBadge extends BaseBadge {\n  static readonly styles = [...BaseBadge.styles, styles];\n\n  /**\n   * Denotes the state-of-affairs this badge represents\n   * Options include read and unread\n   */\n  @property({ reflect: true }) state?: 'unread' | 'read';\n\n  @property({ reflect: true, type: Number }) number?: number;\n\n  @property({ reflect: true, type: Number }) threshold?: number;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-badge': PfBadge;\n  }\n}\n"]}

package/pf-banner/README.md

@@ -0,0 +1,60 @@
+# Patternfly Elements Banner
+A banner is a 1-line, full color, full width container that can be used to communicate short snippets of information to users. Banners are un-intrusive and non-dismissible.
+
+Read more about Button in the [PatternFly Elements Banner documentation](https://patternflyelements.org/components/banner)
+
+## Installation
+Load `<pf-banner>` via CDN:
+
+```html
+<script src="https://jspm.dev/@patternfly/elements/pf-banner/pf-banner.js"></script>
+```
+Or, if you are using [NPM](https://npm.im/), install it
+
+```bash
+npm install @patternfly/elements
+```
+Then once installed, import it to your application:
+
+```js
+import '@patternfly/elements/pf-banner/pf-banner.js';
+```
+
+
+## Usage
+
+```html
+<pf-banner>
+  Default banner
+</pf-banner>
+```
+
+
+## Attributes
+
+### Variant
+Banners have five different variants. The available variants are `default`, `info`, `success`, `danger`, and `warning`.
+
+```html
+<pf-banner variant="info">
+  Info banner
+</pf-banner>
+```
+
+### Icon
+Banners can have an icon attribute for a shorthand to Patternfly Icons. To see available icons, visit the [Patternfly Elements Icons documentation](https://patternflyelements.com/components/icons/).
+
+```html
+<pf-banner variant="info" icon="info">
+  Info banner
+</pf-banner>
+```
+
+### Sticky
+Banners can be sticky, so they stick to the top of the parent. 
+
+```html
+<pf-banner sticky>
+  Sticky banner
+</pf-banner>
+```