@patternfly/elements 2.3.2 → 3.0.0

package/pf-back-to-top/pf-back-to-top.js

@@ -0,0 +1,197 @@
+var _PfBackToTop_instances, _PfBackToTop_scrollSpy, _PfBackToTop_visible, _PfBackToTop_scrollElement, _PfBackToTop_hasSlottedText, _PfBackToTop_logger, _PfBackToTop_rootNode_get, _PfBackToTop_ariaLabel_get, _PfBackToTop_onSlotchange, _PfBackToTop_removeScrollListener, _PfBackToTop_addScrollListener, _PfBackToTop_toggleVisibility;
+import { __classPrivateFieldGet, __classPrivateFieldSet, __decorate } from "tslib";
+import { LitElement, html } from 'lit';
+import { customElement } from 'lit/decorators/custom-element.js';
+import { property } from 'lit/decorators/property.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { Logger } from '@patternfly/pfe-core/controllers/logger.js';
+import '@patternfly/elements/pf-button/pf-button.js';
+import '@patternfly/elements/pf-icon/pf-icon.js';
+import { css } from "lit";
+const styles = css `:host {\n  display: inline-block;\n  position: absolute;\n  right: var(--pf-c-back-to-top--Right, var(--pf-global--spacer--2xl, 3rem));\n  bottom: var(--pf-c-back-to-top--Bottom, var(--pf-global--spacer--lg, 1.5rem));\n}\n\n[part="trigger"] {\n  box-shadow: var(--pf-c-back-to-top--c-button--BoxShadow, var(--pf-global--BoxShadow--lg-bottom, 0 0.75rem 0.75rem -0.5rem rgba(3, 3, 3, 0.18)));\n\n  --pf-c-button--FontSize: var(--pf-c-back-to-top--c-button--FontSize, var(--pf-global--FontSize--xs, 0.75rem));\n  --pf-c-button--BorderRadius: var(--pf-c-back-to-top--c-button--BorderRadius,  var(--pf-global--BorderRadius--lg, 30em));\n  --pf-c-button--PaddingTop: var(--pf-c-back-to-top--c-button--PaddingTop, var(--pf-global--spacer--xs, 0.25rem));\n  --pf-c-button--PaddingRight: var(--pf-c-back-to-top--c-button--PaddingRight, var(--pf-global--spacer--sm, 0.5rem));\n  --pf-c-button--PaddingBottom: var(--pf-c-back-to-top--c-button--PaddingBottom, var(--pf-global--spacer--xs, 0.25rem));\n  --pf-c-button--PaddingLeft: var(--pf-c-back-to-top--c-button--PaddingLeft, var(--pf-global--spacer--sm, 0.5rem));\n}\n\na {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--pf-c-button--m-primary--Color, var(--pf-global--Color--light-100, #fff));\n  background-color: var(--pf-c-button--m-primary--BackgroundColor, var(--pf-global--primary-color--100, #06c));\n  text-decoration: none;\n  font-size: var(--pf-c-button--FontSize);\n  padding: var(--pf-c-button--PaddingTop) var(--pf-c-button--PaddingRight) var(--pf-c-button--PaddingBottom) var(--pf-c-button--PaddingLeft);\n  border-radius: var(--pf-c-button--BorderRadius);\n  gap: var(--pf-c-button__icon--m-end--MarginLeft, var(--pf-global--spacer--xs, 0.25rem));\n}\n\n[part="trigger"][hidden] {\n  display: none;\n}\n\npf-icon {\n  /* override icon size as default sm variant is incorrect */\n  --pf-icon--size: var(--pf-c-button--FontSize);\n  vertical-align: -0.125rem;\n}\n\nspan {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--pf-c-button__icon--m-end--MarginLeft, var(--pf-global--spacer--xs, 0.25rem));\n}\n\n@media (min-width: 768px) {\n  :host {\n    --pf-c-back-to-top--Bottom: var(--pf-c-back-to-top--md--Bottom, var(--pf-global--spacer--2xl, 3rem));\n  }\n}\n`;
+/**
+ * The **back to top** component is a shortcut that allows users to quickly navigate to the top of a lengthy content page.
+ * @summary A shortcut that allows users to quickly navigate to the top of a lengthy content page.
+ *
+ * @csspart trigger - The `<a>` or `<pf-button>` element
+ *
+ * @slot icon
+ *       Contains the prefix icon to display before the link or button.
+ * @slot
+ *       Text to display inside the link or button.
+ *
+ * @cssprop {<length>} --pf-c-back-to-top--Right {@default `3rem``}
+ * @cssprop {<length>} --pf-c-back-to-top--Bottom {@default `1.5rem``}
+ * @cssprop --pf-c-back-to-top--c-button--BoxShadow {@default `0 0.75rem 0.75rem -0.5rem rgba(3, 3, 3, 0.18)`}
+ * @cssprop {<length>} --pf-c-button--FontSize {@default `0.75rem`}
+ * @cssprop {<length>|<percentage>}  --pf-c-button--BorderRadius {@default `30em`}
+ * @cssprop {<length>} --pf-c-button--PaddingTop {@default `0.25rem`}
+ * @cssprop {<length>} --pf-c-button--PaddingRight {@default `0.5rem`}
+ * @cssprop {<length>} --pf-c-button--PaddingBottom {@default `0.25rem`}
+ * @cssprop {<length>} --pf-c-button--PaddingLeft {@default `0.5rem`}
+ * @cssprop {<color>} --pf-c-button--m-primary--Color {@default `#fff`}
+ * @cssprop {<color>} --pf-c-button--m-primary--BackgroundColor {@default `#06c`}
+ * @cssprop {<length>} --pf-c-button__icon--m-end--MarginLeft {@default `0.25rem`}
+ *
+ */
+let PfBackToTop = class PfBackToTop extends LitElement {
+    constructor() {
+        super(...arguments);
+        _PfBackToTop_instances.add(this);
+        /** Flag to always show back to top button, defaults to false. */
+        this.alwaysVisible = false;
+        /** Distance from the top of the scrollable element to trigger the visibility of the back to top button */
+        this.scrollDistance = 400;
+        _PfBackToTop_scrollSpy.set(this, false);
+        _PfBackToTop_visible.set(this, false);
+        _PfBackToTop_scrollElement.set(this, void 0);
+        _PfBackToTop_hasSlottedText.set(this, false);
+        _PfBackToTop_logger.set(this, new Logger(this));
+        _PfBackToTop_toggleVisibility.set(this, () => {
+            if (this.alwaysVisible) {
+                __classPrivateFieldSet(this, _PfBackToTop_visible, true, "f");
+                this.requestUpdate();
+                return;
+            }
+            const previousVisibility = __classPrivateFieldGet(this, _PfBackToTop_visible, "f");
+            if (__classPrivateFieldGet(this, _PfBackToTop_scrollElement, "f")) {
+                const scrolled = (__classPrivateFieldGet(this, _PfBackToTop_scrollElement, "f") instanceof Window) ?
+                    __classPrivateFieldGet(this, _PfBackToTop_scrollElement, "f").scrollY
+                    : __classPrivateFieldGet(this, _PfBackToTop_scrollElement, "f").scrollTop;
+                __classPrivateFieldSet(this, _PfBackToTop_visible, (scrolled > this.scrollDistance), "f");
+                if (previousVisibility !== __classPrivateFieldGet(this, _PfBackToTop_visible, "f")) {
+                    this.requestUpdate();
+                }
+            }
+        });
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        __classPrivateFieldGet(this, _PfBackToTop_instances, "m", _PfBackToTop_addScrollListener).call(this);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        __classPrivateFieldGet(this, _PfBackToTop_instances, "m", _PfBackToTop_removeScrollListener).call(this);
+    }
+    willUpdate(changed) {
+        if (changed.has('scrollableSelector')) {
+            __classPrivateFieldGet(this, _PfBackToTop_instances, "m", _PfBackToTop_addScrollListener).call(this);
+        }
+        if (changed.has('alwaysVisible')) {
+            __classPrivateFieldGet(this, _PfBackToTop_toggleVisibility, "f").call(this);
+        }
+    }
+    render() {
+        // ensure href has a hash
+        if (this.href && this.href.charAt(0) !== '#') {
+            this.href = `#${this.href}`;
+            __classPrivateFieldGet(this, _PfBackToTop_logger, "f").warn(`missing hash in href fragment link`);
+        }
+        if (this.href) {
+            return html `
+        <a href="${this.href}" ?hidden="${!__classPrivateFieldGet(this, _PfBackToTop_visible, "f")}" part="trigger" aria-label="${ifDefined(__classPrivateFieldGet(this, _PfBackToTop_instances, "a", _PfBackToTop_ariaLabel_get))}">
+          <slot name="icon"></slot>
+          <slot @slotchange="${__classPrivateFieldGet(this, _PfBackToTop_instances, "m", _PfBackToTop_onSlotchange)}"></slot>
+          <pf-icon icon="angle-up" set="fas"></pf-icon>
+        </a>
+      `;
+        }
+        else {
+            return html `
+        <pf-button
+            icon="${ifDefined(this.icon)}"
+            icon-set="${ifDefined(this.iconSet)}"
+            ?hidden="${!__classPrivateFieldGet(this, _PfBackToTop_visible, "f")}"
+            tabindex="${__classPrivateFieldGet(this, _PfBackToTop_visible, "f") ? '0' : '-1'}"
+            part="trigger"
+            label="${ifDefined(__classPrivateFieldGet(this, _PfBackToTop_instances, "a", _PfBackToTop_ariaLabel_get))}"
+          >
+          <slot name="icon" slot="icon"></slot>
+          <span>
+            <slot></slot>
+            <pf-icon icon="angle-up" set="fas"></pf-icon>
+          </span>
+        </pf-button>
+      `;
+        }
+    }
+};
+_PfBackToTop_scrollSpy = new WeakMap();
+_PfBackToTop_visible = new WeakMap();
+_PfBackToTop_scrollElement = new WeakMap();
+_PfBackToTop_hasSlottedText = new WeakMap();
+_PfBackToTop_logger = new WeakMap();
+_PfBackToTop_toggleVisibility = new WeakMap();
+_PfBackToTop_instances = new WeakSet();
+_PfBackToTop_rootNode_get = function _PfBackToTop_rootNode_get() {
+    const root = this.getRootNode();
+    if (root instanceof Document || root instanceof ShadowRoot) {
+        return root;
+    }
+    else {
+        return document;
+    }
+};
+_PfBackToTop_ariaLabel_get = function _PfBackToTop_ariaLabel_get() {
+    if (__classPrivateFieldGet(this, _PfBackToTop_hasSlottedText, "f")) {
+        return undefined;
+    }
+    return this.label ?? 'Back to top';
+};
+_PfBackToTop_onSlotchange = function _PfBackToTop_onSlotchange(event) {
+    const slot = event.currentTarget;
+    const nodes = slot.assignedNodes();
+    __classPrivateFieldSet(this, _PfBackToTop_hasSlottedText, nodes.length > 0 ? true : false, "f");
+    this.requestUpdate();
+};
+_PfBackToTop_removeScrollListener = function _PfBackToTop_removeScrollListener() {
+    __classPrivateFieldGet(this, _PfBackToTop_scrollElement, "f")?.removeEventListener('scroll', __classPrivateFieldGet(this, _PfBackToTop_toggleVisibility, "f"));
+};
+_PfBackToTop_addScrollListener = function _PfBackToTop_addScrollListener() {
+    __classPrivateFieldGet(this, _PfBackToTop_instances, "m", _PfBackToTop_removeScrollListener).call(this);
+    if (this.scrollableSelector?.trim() === '') {
+        __classPrivateFieldGet(this, _PfBackToTop_logger, "f").error(`scrollable-selector attribute cannot be empty`);
+        return;
+    }
+    __classPrivateFieldSet(this, _PfBackToTop_scrollSpy, !!this.scrollableSelector, "f");
+    if (__classPrivateFieldGet(this, _PfBackToTop_scrollSpy, "f") && this.scrollableSelector) {
+        const scrollableElement = __classPrivateFieldGet(this, _PfBackToTop_instances, "a", _PfBackToTop_rootNode_get).querySelector(this.scrollableSelector);
+        if (!scrollableElement) {
+            __classPrivateFieldGet(this, _PfBackToTop_logger, "f").error(`unable to find element with selector ${this.scrollableSelector}`);
+            return;
+        }
+        __classPrivateFieldSet(this, _PfBackToTop_scrollElement, scrollableElement, "f");
+    }
+    else {
+        __classPrivateFieldSet(this, _PfBackToTop_scrollElement, window, "f");
+    }
+    __classPrivateFieldGet(this, _PfBackToTop_scrollElement, "f").addEventListener('scroll', __classPrivateFieldGet(this, _PfBackToTop_toggleVisibility, "f"), { passive: true });
+    __classPrivateFieldGet(this, _PfBackToTop_toggleVisibility, "f").call(this);
+};
+PfBackToTop.styles = [styles];
+__decorate([
+    property({ reflect: true })
+], PfBackToTop.prototype, "icon", void 0);
+__decorate([
+    property({ attribute: 'icon-set' })
+], PfBackToTop.prototype, "iconSet", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean, attribute: 'always-visible' })
+], PfBackToTop.prototype, "alwaysVisible", void 0);
+__decorate([
+    property({ reflect: true, attribute: 'scrollable-selector' })
+], PfBackToTop.prototype, "scrollableSelector", void 0);
+__decorate([
+    property({ type: Number, attribute: 'scroll-distance' })
+], PfBackToTop.prototype, "scrollDistance", void 0);
+__decorate([
+    property()
+], PfBackToTop.prototype, "label", void 0);
+__decorate([
+    property({ reflect: true })
+], PfBackToTop.prototype, "href", void 0);
+PfBackToTop = __decorate([
+    customElement('pf-back-to-top')
+], PfBackToTop);
+export { PfBackToTop };
+//# sourceMappingURL=pf-back-to-top.js.map

package/pf-back-to-top/pf-back-to-top.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pf-back-to-top.js","sourceRoot":"","sources":["pf-back-to-top.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, type PropertyValues } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nimport { Logger } from '@patternfly/pfe-core/controllers/logger.js';\n\nimport '@patternfly/elements/pf-button/pf-button.js';\nimport '@patternfly/elements/pf-icon/pf-icon.js';\n\nimport styles from './pf-back-to-top.css';\n\n/**\n * The **back to top** component is a shortcut that allows users to quickly navigate to the top of a lengthy content page.\n * @summary A shortcut that allows users to quickly navigate to the top of a lengthy content page.\n *\n * @csspart trigger - The `<a>` or `<pf-button>` element\n *\n * @slot icon\n *       Contains the prefix icon to display before the link or button.\n * @slot\n *       Text to display inside the link or button.\n *\n * @cssprop {<length>} --pf-c-back-to-top--Right {@default `3rem``}\n * @cssprop {<length>} --pf-c-back-to-top--Bottom {@default `1.5rem``}\n * @cssprop --pf-c-back-to-top--c-button--BoxShadow {@default `0 0.75rem 0.75rem -0.5rem rgba(3, 3, 3, 0.18)`}\n * @cssprop {<length>} --pf-c-button--FontSize {@default `0.75rem`}\n * @cssprop {<length>|<percentage>}  --pf-c-button--BorderRadius {@default `30em`}\n * @cssprop {<length>} --pf-c-button--PaddingTop {@default `0.25rem`}\n * @cssprop {<length>} --pf-c-button--PaddingRight {@default `0.5rem`}\n * @cssprop {<length>} --pf-c-button--PaddingBottom {@default `0.25rem`}\n * @cssprop {<length>} --pf-c-button--PaddingLeft {@default `0.5rem`}\n * @cssprop {<color>} --pf-c-button--m-primary--Color {@default `#fff`}\n * @cssprop {<color>} --pf-c-button--m-primary--BackgroundColor {@default `#06c`}\n * @cssprop {<length>} --pf-c-button__icon--m-end--MarginLeft {@default `0.25rem`}\n *\n */\n@customElement('pf-back-to-top')\nexport class PfBackToTop extends LitElement {\n  static readonly styles = [styles];\n\n  /** Shorthand for the `icon` slot, the value is icon name */\n  @property({ reflect: true }) icon?: string;\n\n  /** Icon set for the `icon` property */\n  @property({ attribute: 'icon-set' }) iconSet?: string;\n\n  /** Flag to always show back to top button, defaults to false. */\n  @property({ reflect: true, type: Boolean, attribute: 'always-visible' }) alwaysVisible = false;\n\n  /** Element selector to spy on for scrolling. Not passing a selector defaults to spying on window scroll events */\n  @property({ reflect: true, attribute: 'scrollable-selector' }) scrollableSelector?: string;\n\n  /** Distance from the top of the scrollable element to trigger the visibility of the back to top button */\n  @property({ type: Number, attribute: 'scroll-distance' }) scrollDistance = 400;\n\n  /** Accessible name for the back-to-top link, use when component does not have slotted text */\n  @property() label?: string;\n\n  /** Page fragment link to target element, must include hash ex: #top */\n  @property({ reflect: true }) href?: string;\n\n  #scrollSpy = false;\n\n  #visible = false;\n\n  #scrollElement?: Element | Window;\n\n  #hasSlottedText = false;\n\n  #logger = new Logger(this);\n\n  get #rootNode(): Document | ShadowRoot {\n    const root = this.getRootNode();\n    if (root instanceof Document || root instanceof ShadowRoot) {\n      return root;\n    } else {\n      return document;\n    }\n  }\n\n  get #ariaLabel(): string | undefined {\n    if (this.#hasSlottedText) {\n      return undefined;\n    }\n    return this.label ?? 'Back to top';\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.#addScrollListener();\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.#removeScrollListener();\n  }\n\n  override willUpdate(changed: PropertyValues<this>): void {\n    if (changed.has('scrollableSelector')) {\n      this.#addScrollListener();\n    }\n    if (changed.has('alwaysVisible')) {\n      this.#toggleVisibility();\n    }\n  }\n\n  render() {\n    // ensure href has a hash\n    if (this.href && this.href.charAt(0) !== '#') {\n      this.href = `#${this.href}`;\n      this.#logger.warn(`missing hash in href fragment link`);\n    }\n\n    if (this.href) {\n      return html`\n        <a href=\"${this.href}\" ?hidden=\"${!this.#visible}\" part=\"trigger\" aria-label=\"${ifDefined(this.#ariaLabel)}\">\n          <slot name=\"icon\"></slot>\n          <slot @slotchange=\"${this.#onSlotchange}\"></slot>\n          <pf-icon icon=\"angle-up\" set=\"fas\"></pf-icon>\n        </a>\n      `;\n    } else {\n      return html`\n        <pf-button\n            icon=\"${ifDefined(this.icon)}\"\n            icon-set=\"${ifDefined(this.iconSet)}\"\n            ?hidden=\"${!this.#visible}\"\n            tabindex=\"${this.#visible ? '0' : '-1'}\"\n            part=\"trigger\"\n            label=\"${ifDefined(this.#ariaLabel)}\"\n          >\n          <slot name=\"icon\" slot=\"icon\"></slot>\n          <span>\n            <slot></slot>\n            <pf-icon icon=\"angle-up\" set=\"fas\"></pf-icon>\n          </span>\n        </pf-button>\n      `;\n    }\n  }\n\n  #onSlotchange(event: Event) {\n    const slot = event.currentTarget as HTMLSlotElement;\n    const nodes = slot.assignedNodes();\n    this.#hasSlottedText = nodes.length > 0 ? true : false;\n    this.requestUpdate();\n  }\n\n  #removeScrollListener() {\n    this.#scrollElement?.removeEventListener('scroll', this.#toggleVisibility);\n  }\n\n  #addScrollListener() {\n    this.#removeScrollListener();\n\n    if (this.scrollableSelector?.trim() === '') {\n      this.#logger.error(`scrollable-selector attribute cannot be empty`);\n      return;\n    }\n\n    this.#scrollSpy = !!this.scrollableSelector;\n    if (this.#scrollSpy && this.scrollableSelector) {\n      const scrollableElement = this.#rootNode.querySelector(this.scrollableSelector);\n      if (!scrollableElement) {\n        this.#logger.error(`unable to find element with selector ${this.scrollableSelector}`);\n        return;\n      }\n      this.#scrollElement = scrollableElement;\n    } else {\n      this.#scrollElement = window;\n    }\n\n    this.#scrollElement.addEventListener('scroll', this.#toggleVisibility, { passive: true });\n    this.#toggleVisibility();\n  }\n\n  #toggleVisibility = () => {\n    if (this.alwaysVisible) {\n      this.#visible = true;\n      this.requestUpdate();\n      return;\n    }\n    const previousVisibility = this.#visible;\n    if (this.#scrollElement) {\n      const scrolled =\n          (this.#scrollElement instanceof Window) ?\n          this.#scrollElement.scrollY\n        : this.#scrollElement.scrollTop;\n      this.#visible = (scrolled > this.scrollDistance);\n      if (previousVisibility !== this.#visible) {\n        this.requestUpdate();\n      }\n    }\n  };\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-back-to-top': PfBackToTop;\n  }\n}\n"]}

package/pf-background-image/README.md

@@ -0,0 +1,37 @@
+# Background Image
+
+A **background image** allows you to place an image in the background of your page or area of a page.
+
+
+##  Installation
+Load `<pf-background-image>` via CDN:
+
+```html
+<script src="https://jspm.dev/@patternfly/elements/pf-background-image/pf-background-image.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-background-image/pf-background-image.js';
+```
+
+## Usage
+
+```html
+<pf-background-image
+    src="image.jpg"
+    src-2x="image-576.jpg"
+    src-sm="image-768.jpg"
+    src-sm-2x="image-768@2x.jpg"
+    src-lg="image-1200.jpg"
+></pf-background-image>
+```
+
+[docs]: https://patternflyelements.org/components/background-image

package/pf-background-image/pf-background-image.css

@@ -0,0 +1,66 @@
+:host {
+  display: flex;
+
+  --_background-image: var(--pf-c-background-image--BackgroundImage);
+}
+
+#outer-container {
+  display: contents;
+}
+
+#container {
+  padding: 0;
+  margin: 0;
+  background-color: transparent;
+}
+
+#container::after {
+  display: block;
+  position: fixed;
+  top:  0;
+  left: 0;
+  z-index: -1;
+  width: 100%;
+  height: 100%;
+  content: "";
+  background-color: var(--pf-c-background-image--BackgroundColor, var(--pf-global--BackgroundColor--dark-100, #151515));
+  background-image: var(--_background-image);
+  filter: var(--pf-c-background-image--Filter, url("#image_overlay"));
+  background-repeat:  no-repeat;
+  background-size: cover;
+}
+
+slot[name="filter"] {
+  display: none;
+}
+
+slot[part="content"] {
+  display: block;
+  position: relative;
+  z-index: 1;
+  color: white;
+}
+
+@media screen and (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+  #container::after {
+    background-image: var(--pf-c-background-image--BackgroundImage-2x, var(--_background-image-2x, var(--_background-image)));
+  }
+}
+
+@media screen and (min-width: 576px) {
+  #container::after {
+    background-image: var(--pf-c-background-image--BackgroundImage--sm, var(--_background-image-sm, var(--_background-image)));
+  }
+}
+
+@media screen and (min-width: 576px) and (-webkit-min-device-pixel-ratio: 2), (min-width: 576px) and (min-resolution: 192dpi) {
+  #container::after {
+    background-image: var(--pf-c-background-image--BackgroundImage--sm-2x, var(--_background-image-sm-2x, var(--_background-image)));
+  }
+}
+
+@media screen and (min-width: 992px) {
+  #container::after {
+    background-image: var(--pf-c-background-image--BackgroundImage--lg, var(--_background-image-lg, var(--_background-image)));
+  }
+}

package/pf-background-image/pf-background-image.d.ts

@@ -0,0 +1,51 @@
+import { LitElement } from 'lit';
+/**
+ * A **background image** allows you to place an image in the background of your page or area of a page.
+ * @summary Allows users to place an image in the background of your page or area of a page.
+ *
+ * @slot filter - Overrides the default svg filter for the background image.
+ *
+ * @cssprop {<color>} --pf-c-background-image--BackgroundColor {@default `#151515`}
+ * @cssprop --pf-c-background-image--BackgroundImage
+ * @cssprop --pf-c-background-image--BackgroundImage-2x
+ * @cssprop --pf-c-background-image--BackgroundImage--sm
+ * @cssprop --pf-c-background-image--BackgroundImage--sm-2x
+ * @cssprop --pf-c-background-image--BackgroundImage--lg
+ * @cssprop --pf-c-background-image--Filter {@default `url("#image_overlay")`}
+ *
+ */
+export declare class PfBackgroundImage extends LitElement {
+    #private;
+    static readonly styles: CSSStyleSheet[];
+    /**
+     * The URL for the image shown on mobile
+     */
+    src?: string;
+    /**
+     * The image shown on mobile with 2x DPI
+     */
+    src2x?: string;
+    /**
+     * The URL for the image shown on small screens (min-width: 576px)
+     */
+    srcSm?: string;
+    /**
+     * The URL for the image shown on small screens (min-width: 576px) with 2x DPI
+     */
+    srcSm2x?: string;
+    /**
+     * The URL for the image shown on large screens (min-width: 992px)
+     */
+    srcLg?: string;
+    /**
+     * Apply SVG Filter to the image
+     */
+    filter: boolean;
+    private _svg?;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'pf-background-image': PfBackgroundImage;
+    }
+}

package/pf-background-image/pf-background-image.js

@@ -0,0 +1,117 @@
+var _PfBackgroundImage_instances, _PfBackgroundImage_svg, _PfBackgroundImage_updated, _PfBackgroundImage_onSlotChange;
+import { __classPrivateFieldGet, __classPrivateFieldSet, __decorate } from "tslib";
+import { LitElement, html } from 'lit';
+import { customElement } from 'lit/decorators/custom-element.js';
+import { queryAssignedElements } from 'lit/decorators/query-assigned-elements.js';
+import { property } from 'lit/decorators/property.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import { css } from "lit";
+const styles = css `:host {\n  display: flex;\n\n  --_background-image: var(--pf-c-background-image--BackgroundImage);\n}\n\n#outer-container {\n  display: contents;\n}\n\n#container {\n  padding: 0;\n  margin: 0;\n  background-color: transparent;\n}\n\n#container::after {\n  display: block;\n  position: fixed;\n  top:  0;\n  left: 0;\n  z-index: -1;\n  width: 100%;\n  height: 100%;\n  content: "";\n  background-color: var(--pf-c-background-image--BackgroundColor, var(--pf-global--BackgroundColor--dark-100, #151515));\n  background-image: var(--_background-image);\n  filter: var(--pf-c-background-image--Filter, url("#image_overlay"));\n  background-repeat:  no-repeat;\n  background-size: cover;\n}\n\nslot[name="filter"] {\n  display: none;\n}\n\nslot[part="content"] {\n  display: block;\n  position: relative;\n  z-index: 1;\n  color: white;\n}\n\n@media screen and (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {\n  #container::after {\n    background-image: var(--pf-c-background-image--BackgroundImage-2x, var(--_background-image-2x, var(--_background-image)));\n  }\n}\n\n@media screen and (min-width: 576px) {\n  #container::after {\n    background-image: var(--pf-c-background-image--BackgroundImage--sm, var(--_background-image-sm, var(--_background-image)));\n  }\n}\n\n@media screen and (min-width: 576px) and (-webkit-min-device-pixel-ratio: 2), (min-width: 576px) and (min-resolution: 192dpi) {\n  #container::after {\n    background-image: var(--pf-c-background-image--BackgroundImage--sm-2x, var(--_background-image-sm-2x, var(--_background-image)));\n  }\n}\n\n@media screen and (min-width: 992px) {\n  #container::after {\n    background-image: var(--pf-c-background-image--BackgroundImage--lg, var(--_background-image-lg, var(--_background-image)));\n  }\n}\n`;
+/**
+ * A **background image** allows you to place an image in the background of your page or area of a page.
+ * @summary Allows users to place an image in the background of your page or area of a page.
+ *
+ * @slot filter - Overrides the default svg filter for the background image.
+ *
+ * @cssprop {<color>} --pf-c-background-image--BackgroundColor {@default `#151515`}
+ * @cssprop --pf-c-background-image--BackgroundImage
+ * @cssprop --pf-c-background-image--BackgroundImage-2x
+ * @cssprop --pf-c-background-image--BackgroundImage--sm
+ * @cssprop --pf-c-background-image--BackgroundImage--sm-2x
+ * @cssprop --pf-c-background-image--BackgroundImage--lg
+ * @cssprop --pf-c-background-image--Filter {@default `url("#image_overlay")`}
+ *
+ */
+let PfBackgroundImage = class PfBackgroundImage extends LitElement {
+    constructor() {
+        super(...arguments);
+        _PfBackgroundImage_instances.add(this);
+        /**
+         * Apply SVG Filter to the image
+         */
+        this.filter = false;
+        _PfBackgroundImage_svg.set(this, void 0);
+        _PfBackgroundImage_updated.set(this, false);
+    }
+    render() {
+        const cssProps = {
+            '--_background-image': this.src,
+            '--_background-image-2x': this.src2x,
+            '--_background-image-sm': this.srcSm,
+            '--_background-image-sm-2x': this.srcSm2x,
+            '--_background-image-lg': this.srcLg
+        };
+        Object.entries(cssProps).forEach(([key, value]) => {
+            // if the value is undefined, remove the css property
+            if (!value) {
+                delete cssProps[key];
+            }
+            else {
+                // otherwise, add the value with the url() css function
+                cssProps[key] = `url(${value})`;
+            }
+        });
+        return html `
+      <div id="container" part="container" style="${styleMap(cssProps)}">
+        ${!this.filter ? html `` : html `
+          <slot name="filter" @slotchange=${__classPrivateFieldGet(this, _PfBackgroundImage_instances, "m", _PfBackgroundImage_onSlotChange)}>
+            ${(__classPrivateFieldGet(this, _PfBackgroundImage_svg, "f") && __classPrivateFieldGet(this, _PfBackgroundImage_updated, "f")) ? __classPrivateFieldGet(this, _PfBackgroundImage_svg, "f") : html `
+              <svg xmlns="http://www.w3.org/2000/svg" width="0" height="0">
+                <filter id="image_overlay">
+                  <feColorMatrix type="matrix" values="1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 1 0"></feColorMatrix>
+                  <feComponentTransfer color-interpolation-filters="sRGB" result="duotone">
+                    <feFuncR type="table" tableValues="0.086274509803922 0.43921568627451"></feFuncR>
+                    <feFuncG type="table" tableValues="0.086274509803922 0.43921568627451"></feFuncG>
+                    <feFuncB type="table" tableValues="0.086274509803922 0.43921568627451"></feFuncB>
+                    <feFuncA type="table" tableValues="0 1"></feFuncA>
+                  </feComponentTransfer>
+                </filter>
+              </svg>
+            `}
+          </slot>
+        `}
+      </div>
+    `;
+    }
+};
+_PfBackgroundImage_svg = new WeakMap();
+_PfBackgroundImage_updated = new WeakMap();
+_PfBackgroundImage_instances = new WeakSet();
+_PfBackgroundImage_onSlotChange = function _PfBackgroundImage_onSlotChange() {
+    const [svg] = this._svg;
+    if (svg) {
+        __classPrivateFieldSet(this, _PfBackgroundImage_svg, svg, "f");
+        __classPrivateFieldSet(this, _PfBackgroundImage_updated, true, "f");
+        this.requestUpdate();
+    }
+    else {
+        __classPrivateFieldSet(this, _PfBackgroundImage_updated, false, "f");
+    }
+};
+PfBackgroundImage.styles = [styles];
+__decorate([
+    property({ reflect: true })
+], PfBackgroundImage.prototype, "src", void 0);
+__decorate([
+    property({ reflect: true, attribute: 'src-2x' })
+], PfBackgroundImage.prototype, "src2x", void 0);
+__decorate([
+    property({ reflect: true, attribute: 'src-sm' })
+], PfBackgroundImage.prototype, "srcSm", void 0);
+__decorate([
+    property({ reflect: true, attribute: 'src-sm-2x' })
+], PfBackgroundImage.prototype, "srcSm2x", void 0);
+__decorate([
+    property({ reflect: true, attribute: 'src-lg' })
+], PfBackgroundImage.prototype, "srcLg", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], PfBackgroundImage.prototype, "filter", void 0);
+__decorate([
+    queryAssignedElements({ slot: 'filter', selector: 'svg' })
+], PfBackgroundImage.prototype, "_svg", void 0);
+PfBackgroundImage = __decorate([
+    customElement('pf-background-image')
+], PfBackgroundImage);
+export { PfBackgroundImage };
+//# sourceMappingURL=pf-background-image.js.map

package/pf-background-image/pf-background-image.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pf-background-image.js","sourceRoot":"","sources":["pf-background-image.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { queryAssignedElements } from 'lit/decorators/query-assigned-elements.js';\nimport { property } from 'lit/decorators/property.js';\n\n\nimport { styleMap, type StyleInfo } from 'lit/directives/style-map.js';\n\nimport styles from './pf-background-image.css';\n\n/**\n * A **background image** allows you to place an image in the background of your page or area of a page.\n * @summary Allows users to place an image in the background of your page or area of a page.\n *\n * @slot filter - Overrides the default svg filter for the background image.\n *\n * @cssprop {<color>} --pf-c-background-image--BackgroundColor {@default `#151515`}\n * @cssprop --pf-c-background-image--BackgroundImage\n * @cssprop --pf-c-background-image--BackgroundImage-2x\n * @cssprop --pf-c-background-image--BackgroundImage--sm\n * @cssprop --pf-c-background-image--BackgroundImage--sm-2x\n * @cssprop --pf-c-background-image--BackgroundImage--lg\n * @cssprop --pf-c-background-image--Filter {@default `url(\"#image_overlay\")`}\n *\n */\n@customElement('pf-background-image')\nexport class PfBackgroundImage extends LitElement {\n  static readonly styles = [styles];\n\n  /**\n   * The URL for the image shown on mobile\n   */\n  @property({ reflect: true }) src?: string;\n\n  /**\n   * The image shown on mobile with 2x DPI\n   */\n  @property({ reflect: true, attribute: 'src-2x' }) src2x?: string;\n\n  /**\n   * The URL for the image shown on small screens (min-width: 576px)\n   */\n  @property({ reflect: true, attribute: 'src-sm' }) srcSm?: string;\n\n  /**\n   * The URL for the image shown on small screens (min-width: 576px) with 2x DPI\n   */\n  @property({ reflect: true, attribute: 'src-sm-2x' }) srcSm2x?: string;\n\n  /**\n   * The URL for the image shown on large screens (min-width: 992px)\n   */\n  @property({ reflect: true, attribute: 'src-lg' }) srcLg?: string;\n\n  /**\n   * Apply SVG Filter to the image\n   */\n  @property({ type: Boolean, reflect: true }) filter = false;\n\n  @queryAssignedElements({ slot: 'filter', selector: 'svg' }) private _svg?: SVGElement[];\n\n  #svg?: SVGElement;\n\n  #updated = false;\n\n  render() {\n    const cssProps = {\n      '--_background-image': this.src,\n      '--_background-image-2x': this.src2x,\n      '--_background-image-sm': this.srcSm,\n      '--_background-image-sm-2x': this.srcSm2x,\n      '--_background-image-lg': this.srcLg\n    } as StyleInfo;\n\n    Object.entries(cssProps).forEach(([key, value]) => {\n      // if the value is undefined, remove the css property\n      if (!value) {\n        delete cssProps[key];\n      } else {\n        // otherwise, add the value with the url() css function\n        cssProps[key] = `url(${value})`;\n      }\n    });\n\n    return html`\n      <div id=\"container\" part=\"container\" style=\"${styleMap(cssProps)}\">\n        ${!this.filter ? html`` : html`\n          <slot name=\"filter\" @slotchange=${this.#onSlotChange}>\n            ${(this.#svg && this.#updated) ? this.#svg : html`\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"0\" height=\"0\">\n                <filter id=\"image_overlay\">\n                  <feColorMatrix type=\"matrix\" values=\"1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 1 0\"></feColorMatrix>\n                  <feComponentTransfer color-interpolation-filters=\"sRGB\" result=\"duotone\">\n                    <feFuncR type=\"table\" tableValues=\"0.086274509803922 0.43921568627451\"></feFuncR>\n                    <feFuncG type=\"table\" tableValues=\"0.086274509803922 0.43921568627451\"></feFuncG>\n                    <feFuncB type=\"table\" tableValues=\"0.086274509803922 0.43921568627451\"></feFuncB>\n                    <feFuncA type=\"table\" tableValues=\"0 1\"></feFuncA>\n                  </feComponentTransfer>\n                </filter>\n              </svg>\n            `}\n          </slot>\n        `}\n      </div>\n    `;\n  }\n\n  #onSlotChange() {\n    const [svg] = this._svg as Array<SVGElement>;\n    if (svg) {\n      this.#svg = svg;\n      this.#updated = true;\n      this.requestUpdate();\n    } else {\n      this.#updated = false;\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-background-image': PfBackgroundImage;\n  }\n}\n"]}

package/pf-badge/BaseBadge.d.ts

@@ -1,6 +1,6 @@
 import { LitElement } from 'lit';
 export declare abstract class BaseBadge extends LitElement {
-    static readonly styles: import("lit").CSSResult[];
+    static readonly styles: CSSStyleSheet[];
     abstract state?: string;
     /**
      * Sets a numeric value for a badge.
@@ -14,5 +14,5 @@ export declare abstract class BaseBadge extends LitElement {
      * the numeric value exceeds the threshold value.
      */
     abstract threshold?: number;
-    render(): import("lit-html").TemplateResult<1>;
+    render(): import("lit").TemplateResult<1>;
 }

package/pf-badge/BaseBadge.js

@@ -1,8 +1,7 @@
 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]; }
+const style = css `:host {\n  position: relative;\n  white-space: nowrap;\n  text-align: center;\n  display: inline-block;\n}`;
+export class BaseBadge extends LitElement {
     render() {
         const { threshold, number, textContent } = this;
         const displayText = (threshold && number && (threshold < number)) ? `${threshold.toString()}+`
@@ -13,5 +12,5 @@ class BaseBadge extends LitElement {
     `;
     }
 }
-export { BaseBadge };
+BaseBadge.styles = [style];
 //# 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,MAAM,OAAgB,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","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.d.ts

@@ -23,7 +23,7 @@ import { BaseBadge } from './BaseBadge.js';
  * @cssprop {<color>} --pf-c-badge--m-unread--BackgroundColor   {@default `#06c`}
  */
 export declare class PfBadge extends BaseBadge {
-    static readonly styles: import("lit").CSSResult[];
+    static readonly styles: CSSStyleSheet[];
     /**
      * Denotes the state-of-affairs this badge represents
      * Options include read and unread

package/pf-badge/pf-badge.js

@@ -3,7 +3,7 @@ import { customElement } from 'lit/decorators/custom-element.js';
 import { property } from 'lit/decorators/property.js';
 import { BaseBadge } from './BaseBadge.js';
 import { css } from "lit";
-const styles = css `:host{border-radius:var(--pf-c-badge--BorderRadius,var(--pf-global--BorderRadius--lg,180em));min-width:var(--pf-c-badge--MinWidth,var(--pf-global--spacer--xl,2rem));padding-left:var(--pf-c-badge--PaddingLeft,var(--pf-global--spacer--sm,.5rem));padding-right:var(--pf-c-badge--PaddingRight,var(--pf-global--spacer--sm,.5rem));font-size:var(--pf-c-badge--FontSize,\n    var(--pf-theme--font-size, .75em));font-weight:var(--pf-c-badge--FontWeight,var(--pf-theme--font-weight--bold,700));line-height:var(--pf-c-badge--LineHeight,\n    var(--pf-global--LineHeight--md, 1.5));color:var(--pf-c-badge--Color,var(--pf-global--palette--black-900,#151515));background-color:var(--pf-c-badge--BackgroundColor,var(--pf-global--palette--black-200,#f0f0f0))}:host([state=read]){--pf-c-badge--Color:var(--pf-c-badge--m-read--Color,\n    var(--pf-global--palette--black-900, #151515));--pf-c-badge--BackgroundColor:var(--pf-c-badge--m-read--BackgroundColor,\n    var(--pf-global--palette--black-200, #f0f0f0))}:host([state=unread]){--pf-c-badge--Color:var(--pf-c-badge--m-unread--Color,\n    var(--pf-global--palette--white, #fff));--pf-c-badge--BackgroundColor:var(--pf-c-badge--m-unread--BackgroundColor,\n    var(--pf-global--palette--blue-400, #06c))}`;
+const styles = css `:host {\n  border-radius: var(--pf-c-badge--BorderRadius,\n    var(--pf-global--BorderRadius--lg, 180em));\n  min-width: var(--pf-c-badge--MinWidth,\n    var(--pf-global--spacer--xl, 2rem));\n  padding-left: var(--pf-c-badge--PaddingLeft,\n    var(--pf-global--spacer--sm, 0.5rem));\n  padding-right: var(--pf-c-badge--PaddingRight,\n    var(--pf-global--spacer--sm, 0.5rem));\n  font-size: var(--pf-c-badge--FontSize,\n    var(--pf-theme--font-size, 0.75em));\n  font-weight: var(--pf-c-badge--FontWeight,\n    var(--pf-theme--font-weight--bold, 700));\n  line-height: var(--pf-c-badge--LineHeight,\n    var(--pf-global--LineHeight--md, 1.5));\n  color: var(--pf-c-badge--Color,\n    var(--pf-global--palette--black-900, #151515));\n  background-color: var(--pf-c-badge--BackgroundColor,\n    var(--pf-global--palette--black-200, #f0f0f0));\n}\n\n:host([state="read"]) {\n  --pf-c-badge--Color: var(--pf-c-badge--m-read--Color,\n    var(--pf-global--palette--black-900, #151515));\n  --pf-c-badge--BackgroundColor: var(--pf-c-badge--m-read--BackgroundColor,\n    var(--pf-global--palette--black-200, #f0f0f0));\n}\n\n:host([state="unread"]) {\n  --pf-c-badge--Color: var(--pf-c-badge--m-unread--Color,\n    var(--pf-global--palette--white, #fff));\n  --pf-c-badge--BackgroundColor: var(--pf-c-badge--m-unread--BackgroundColor,\n    var(--pf-global--palette--blue-400, #06c));\n}\n`;
 /**
  * A **badge** is used to annotate other information like a label or an object name.
  *
@@ -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;AAII,IAAM,OAAO,GAAb,MAAM,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","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"]}