@patternfly/elements 3.0.0 → 3.0.2

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

@@ -0,0 +1,267 @@
+import { expect, html, nextFrame } from '@open-wc/testing';
+import { createFixture } from '@patternfly/pfe-tools/test/create-fixture.js';
+import { setViewport, sendKeys } from '@web/test-runner-commands';
+import { allUpdates } from '@patternfly/pfe-tools/test/utils.js';
+import { PfBackToTop } from '../pf-back-to-top.js';
+import { a11ySnapshot } from '@patternfly/pfe-tools/test/a11y-snapshot.js';
+const takeProps = (props) => (obj) => Object.fromEntries(Object.entries(obj).filter(([k]) => props.includes(k)));
+describe('<pf-back-to-top>', function () {
+    it('imperatively instantiates', function () {
+        expect(document.createElement('pf-back-to-top')).to.be.an.instanceof(PfBackToTop);
+    });
+    describe('simply instantiating', function () {
+        let element;
+        beforeEach(async function () {
+            element = await createFixture(html `<pf-back-to-top></pf-back-to-top>`);
+        });
+        it('should upgrade', function () {
+            const klass = customElements.get('pf-back-to-top');
+            expect(element)
+                .to.be.an.instanceOf(klass)
+                .and
+                .to.be.an.instanceOf(PfBackToTop);
+        });
+    });
+    describe('when rendered in a viewport with a height smaller then content length', function () {
+        let element;
+        let snapshot;
+        beforeEach(async function () {
+            await setViewport({ width: 320, height: 640 });
+            window.scrollTo({ top: 0, behavior: 'instant' });
+            await nextFrame();
+            const container = await createFixture(html `
+        <div id="top">
+          <div style="height: 2000px;"></div>
+          <pf-back-to-top href="#top">Back to top</pf-back-to-top>
+        </div>
+      `);
+            element = container.querySelector('pf-back-to-top');
+            snapshot = await a11ySnapshot();
+            await allUpdates(element);
+        });
+        it('should be hidden on init', function () {
+            const { children } = snapshot;
+            expect(children).to.be.undefined;
+        });
+        it('should not be accessible', function () {
+            expect(snapshot.children).to.be.undefined;
+        });
+        describe('when scrolled 401px', function () {
+            beforeEach(async function () {
+                window.scrollTo({ top: 401, behavior: 'instant' });
+                await nextFrame();
+                await allUpdates(element);
+                snapshot = await a11ySnapshot();
+            });
+            it('should be visible', function () {
+                expect(snapshot.children?.map(takeProps(['name', 'role']))).to.deep.equal([{ role: 'link', name: 'Back to top' }]);
+            });
+            it('should be accessible', async function () {
+                await expect(element).to.be.accessible();
+            });
+            describe('pressing the tab key', function () {
+                beforeEach(async function () {
+                    await sendKeys({ press: 'Tab' });
+                    await allUpdates(element);
+                    await nextFrame();
+                });
+                it('should focus the component', function () {
+                    expect(document.activeElement).to.equal(element);
+                });
+            });
+        });
+        describe('when the always visible property is true', function () {
+            beforeEach(async function () {
+                window.scrollTo({ top: 0, behavior: 'instant' });
+                await nextFrame();
+                element.alwaysVisible = true;
+                await allUpdates(element);
+                snapshot = await a11ySnapshot();
+            });
+            it('should be visible', function () {
+                expect(snapshot.children?.map(takeProps(['name', 'role']))).to.deep.equal([{ role: 'link', name: 'Back to top' }]);
+            });
+            it('should be accessible', async function () {
+                await expect(element).to.be.accessible();
+            });
+            describe('pressing the tab key', function () {
+                beforeEach(async function () {
+                    await sendKeys({ press: 'Tab' });
+                    await allUpdates(element);
+                    await nextFrame();
+                });
+                it('should focus the component', function () {
+                    expect(document.activeElement).to.equal(element);
+                });
+            });
+        });
+        describe('when the scroll distance is set to 1000', function () {
+            beforeEach(async function () {
+                element.scrollDistance = 1000;
+                await allUpdates(element);
+                snapshot = await a11ySnapshot();
+            });
+            it('should be hidden', function () {
+                const { children } = snapshot;
+                expect(children).to.be.undefined;
+            });
+            describe('when scrolled 1001px', function () {
+                beforeEach(async function () {
+                    window.scrollTo({ top: 1001, behavior: 'instant' });
+                    await nextFrame();
+                    await allUpdates(element);
+                    snapshot = await a11ySnapshot();
+                });
+                it('should be visible', function () {
+                    expect(snapshot.children?.map(takeProps(['name', 'role']))).to.deep.equal([{ role: 'link', name: 'Back to top' }]);
+                });
+            });
+        });
+    });
+    describe('when rendered in an element with an overflowed height', function () {
+        let element;
+        let snapshot;
+        beforeEach(async function () {
+            window.scrollTo({ top: 0, behavior: 'instant' });
+            await nextFrame();
+            const container = await createFixture(html `
+        <div id="top" style="height: 500px; overflow-y: scroll;">
+          <div style="height: 2000px;"></div>
+          <pf-back-to-top href="#top" scrollable-selector="#top">Back to top</pf-back-to-top>
+        </div>
+      `);
+            element = container.querySelector('pf-back-to-top');
+            snapshot = await a11ySnapshot();
+            await allUpdates(element);
+        });
+        it('should be hidden on init', function () {
+            const { children } = snapshot;
+            expect(children).to.be.undefined;
+        });
+        describe('when scrolled 401px', function () {
+            beforeEach(async function () {
+                const scrollableElement = document.querySelector('#top');
+                scrollableElement.scrollTo({ top: 401, behavior: 'instant' });
+                await nextFrame();
+                await allUpdates(element);
+                snapshot = await a11ySnapshot();
+            });
+            it('should be visible', function () {
+                expect(snapshot.children?.map(takeProps(['name', 'role']))).to.deep.equal([{ role: 'link', name: 'Back to top' }]);
+            });
+        });
+    });
+    describe('when no text is provided', function () {
+        let element;
+        let snapshot;
+        describe('as a link', function () {
+            beforeEach(async function () {
+                await setViewport({ width: 320, height: 640 });
+                window.scrollTo({ top: 0, behavior: 'instant' });
+                await nextFrame();
+                const container = await createFixture(html `
+          <div id="top">
+            <div style="height: 2000px;"></div>
+            <pf-back-to-top href="#top"></pf-back-to-top>
+          </div>
+        `);
+                element = container.querySelector('pf-back-to-top');
+                await allUpdates(element);
+            });
+            describe('when scrolled', function () {
+                beforeEach(async function () {
+                    window.scrollTo({ top: 401, behavior: 'instant' });
+                    await nextFrame();
+                    await allUpdates(element);
+                    snapshot = await a11ySnapshot();
+                });
+                it('should have a label of "Back to top"', function () {
+                    expect(snapshot.children?.map(takeProps(['name', 'role']))).to.deep.equal([{ role: 'link', name: 'Back to top' }]);
+                });
+            });
+        });
+        describe('as a button', function () {
+            beforeEach(async function () {
+                await setViewport({ width: 320, height: 640 });
+                window.scrollTo({ top: 0, behavior: 'instant' });
+                await nextFrame();
+                const container = await createFixture(html `
+          <div id="top">
+            <div style="height: 2000px;"></div>
+            <pf-back-to-top></pf-back-to-top>
+          </div>
+        `);
+                element = container.querySelector('pf-back-to-top');
+                await allUpdates(element);
+            });
+            describe('when scrolled', function () {
+                beforeEach(async function () {
+                    window.scrollTo({ top: 401, behavior: 'instant' });
+                    await nextFrame();
+                    await allUpdates(element);
+                    snapshot = await a11ySnapshot();
+                });
+                it('should have a label of "Back to top"', function () {
+                    expect(snapshot.children?.map(takeProps(['name', 'role']))).to.deep.equal([{ role: 'button', name: 'Back to top' }]);
+                });
+            });
+        });
+    });
+    describe('when a label is provided', function () {
+        let element;
+        let snapshot;
+        describe('as a link', function () {
+            beforeEach(async function () {
+                await setViewport({ width: 320, height: 640 });
+                window.scrollTo({ top: 0, behavior: 'instant' });
+                await nextFrame();
+                const container = await createFixture(html `
+          <div id="top">
+            <div style="height: 2000px;"></div>
+            <pf-back-to-top href="#top" label="Return to top"></pf-back-to-top>
+          </div>
+        `);
+                element = container.querySelector('pf-back-to-top');
+                await allUpdates(element);
+            });
+            describe('when scrolled', function () {
+                beforeEach(async function () {
+                    window.scrollTo({ top: 401, behavior: 'instant' });
+                    await nextFrame();
+                    await allUpdates(element);
+                    snapshot = await a11ySnapshot();
+                });
+                it('should have a label of "Return to top"', function () {
+                    expect(snapshot.children?.map(takeProps(['name', 'role']))).to.deep.equal([{ role: 'link', name: 'Return to top' }]);
+                });
+            });
+        });
+        describe('as a button', function () {
+            beforeEach(async function () {
+                await setViewport({ width: 320, height: 640 });
+                window.scrollTo({ top: 0, behavior: 'instant' });
+                await nextFrame();
+                const container = await createFixture(html `
+          <div id="top">
+            <div style="height: 2000px;"></div>
+            <pf-back-to-top label="Return to top"></pf-back-to-top>
+          </div>
+        `);
+                element = container.querySelector('pf-back-to-top');
+                await allUpdates(element);
+            });
+            describe('when scrolled', function () {
+                beforeEach(async function () {
+                    window.scrollTo({ top: 401, behavior: 'instant' });
+                    await nextFrame();
+                    await allUpdates(element);
+                    snapshot = await a11ySnapshot();
+                });
+                it('should have a label of "Return to top"', function () {
+                    expect(snapshot.children?.map(takeProps(['name', 'role']))).to.deep.equal([{ role: 'button', name: 'Return to top' }]);
+                });
+            });
+        });
+    });
+});
+//# sourceMappingURL=pf-back-to-top.spec.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pf-back-to-top.spec.js","sourceRoot":"","sources":["pf-back-to-top.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { expect, html, nextFrame } from '@open-wc/testing';\nimport { createFixture } from '@patternfly/pfe-tools/test/create-fixture.js';\nimport { setViewport, sendKeys } from '@web/test-runner-commands';\n\nimport { allUpdates } from '@patternfly/pfe-tools/test/utils.js';\n\nimport { PfBackToTop } from '../pf-back-to-top.js';\nimport { type A11yTreeSnapshot, a11ySnapshot } from '@patternfly/pfe-tools/test/a11y-snapshot.js';\n\nconst takeProps = (props: string[]) => (obj: object) =>\n  Object.fromEntries(Object.entries(obj).filter(([k]) => props.includes(k)));\n\ndescribe('<pf-back-to-top>', function() {\n  it('imperatively instantiates', function() {\n    expect(document.createElement('pf-back-to-top')).to.be.an.instanceof(PfBackToTop);\n  });\n\n  describe('simply instantiating', function() {\n    let element: PfBackToTop;\n\n    beforeEach(async function() {\n      element = await createFixture<PfBackToTop>(html`<pf-back-to-top></pf-back-to-top>`);\n    });\n\n    it('should upgrade', function() {\n      const klass = customElements.get('pf-back-to-top');\n      expect(element)\n          .to.be.an.instanceOf(klass)\n          .and\n          .to.be.an.instanceOf(PfBackToTop);\n    });\n  });\n\n  describe('when rendered in a viewport with a height smaller then content length', function() {\n    let element: PfBackToTop;\n    let snapshot: A11yTreeSnapshot;\n\n    beforeEach(async function() {\n      await setViewport({ width: 320, height: 640 });\n      window.scrollTo({ top: 0, behavior: 'instant' });\n      await nextFrame();\n      const container = await createFixture<PfBackToTop>(html`\n        <div id=\"top\">\n          <div style=\"height: 2000px;\"></div>\n          <pf-back-to-top href=\"#top\">Back to top</pf-back-to-top>\n        </div>\n      `);\n      element = container.querySelector('pf-back-to-top')!;\n      snapshot = await a11ySnapshot();\n\n      await allUpdates(element);\n    });\n\n    it('should be hidden on init', function() {\n      const { children } = snapshot;\n      expect(children).to.be.undefined;\n    });\n\n    it('should not be accessible', function() {\n      expect(snapshot.children).to.be.undefined;\n    });\n\n    describe('when scrolled 401px', function() {\n      beforeEach(async function() {\n        window.scrollTo({ top: 401, behavior: 'instant' });\n        await nextFrame();\n        await allUpdates(element);\n        snapshot = await a11ySnapshot();\n      });\n\n      it('should be visible', function() {\n        expect(snapshot.children?.map(takeProps(['name', 'role']))).to.deep.equal([{ role: 'link', name: 'Back to top' }]);\n      });\n\n      it('should be accessible', async function() {\n        await expect(element).to.be.accessible();\n      });\n\n      describe('pressing the tab key', function() {\n        beforeEach(async function() {\n          await sendKeys({ press: 'Tab' });\n          await allUpdates(element);\n          await nextFrame();\n        });\n\n        it('should focus the component', function() {\n          expect(document.activeElement).to.equal(element);\n        });\n      });\n    });\n\n    describe('when the always visible property is true', function() {\n      beforeEach(async function() {\n        window.scrollTo({ top: 0, behavior: 'instant' });\n        await nextFrame();\n        element.alwaysVisible = true;\n        await allUpdates(element);\n        snapshot = await a11ySnapshot();\n      });\n\n      it('should be visible', function() {\n        expect(snapshot.children?.map(takeProps(['name', 'role']))).to.deep.equal([{ role: 'link', name: 'Back to top' }]);\n      });\n\n      it('should be accessible', async function() {\n        await expect(element).to.be.accessible();\n      });\n\n      describe('pressing the tab key', function() {\n        beforeEach(async function() {\n          await sendKeys({ press: 'Tab' });\n          await allUpdates(element);\n          await nextFrame();\n        });\n        it('should focus the component', function() {\n          expect(document.activeElement).to.equal(element);\n        });\n      });\n    });\n\n    describe('when the scroll distance is set to 1000', function() {\n      beforeEach(async function() {\n        element.scrollDistance = 1000;\n        await allUpdates(element);\n        snapshot = await a11ySnapshot();\n      });\n\n      it('should be hidden', function() {\n        const { children } = snapshot;\n        expect(children).to.be.undefined;\n      });\n\n      describe('when scrolled 1001px', function() {\n        beforeEach(async function() {\n          window.scrollTo({ top: 1001, behavior: 'instant' });\n          await nextFrame();\n          await allUpdates(element);\n          snapshot = await a11ySnapshot();\n        });\n\n        it('should be visible', function() {\n          expect(snapshot.children?.map(takeProps(['name', 'role']))).to.deep.equal([{ role: 'link', name: 'Back to top' }]);\n        });\n      });\n    });\n  });\n\n  describe('when rendered in an element with an overflowed height', function() {\n    let element: PfBackToTop;\n    let snapshot: A11yTreeSnapshot;\n\n    beforeEach(async function() {\n      window.scrollTo({ top: 0, behavior: 'instant' });\n      await nextFrame();\n      const container = await createFixture<PfBackToTop>(html`\n        <div id=\"top\" style=\"height: 500px; overflow-y: scroll;\">\n          <div style=\"height: 2000px;\"></div>\n          <pf-back-to-top href=\"#top\" scrollable-selector=\"#top\">Back to top</pf-back-to-top>\n        </div>\n      `);\n      element = container.querySelector('pf-back-to-top')!;\n      snapshot = await a11ySnapshot();\n\n      await allUpdates(element);\n    });\n\n    it('should be hidden on init', function() {\n      const { children } = snapshot;\n      expect(children).to.be.undefined;\n    });\n\n    describe('when scrolled 401px', function() {\n      beforeEach(async function() {\n        const scrollableElement = document.querySelector('#top')!;\n        scrollableElement.scrollTo({ top: 401, behavior: 'instant' });\n        await nextFrame();\n        await allUpdates(element);\n        snapshot = await a11ySnapshot();\n      });\n\n      it('should be visible', function() {\n        expect(snapshot.children?.map(takeProps(['name', 'role']))).to.deep.equal([{ role: 'link', name: 'Back to top' }]);\n      });\n    });\n  });\n\n  describe('when no text is provided', function() {\n    let element: PfBackToTop;\n    let snapshot: A11yTreeSnapshot;\n\n    describe('as a link', function() {\n      beforeEach(async function() {\n        await setViewport({ width: 320, height: 640 });\n        window.scrollTo({ top: 0, behavior: 'instant' });\n        await nextFrame();\n        const container = await createFixture<PfBackToTop>(html`\n          <div id=\"top\">\n            <div style=\"height: 2000px;\"></div>\n            <pf-back-to-top href=\"#top\"></pf-back-to-top>\n          </div>\n        `);\n        element = container.querySelector('pf-back-to-top')!;\n        await allUpdates(element);\n      });\n\n      describe('when scrolled', function() {\n        beforeEach(async function() {\n          window.scrollTo({ top: 401, behavior: 'instant' });\n          await nextFrame();\n          await allUpdates(element);\n          snapshot = await a11ySnapshot();\n        });\n\n        it('should have a label of \"Back to top\"', function() {\n          expect(snapshot.children?.map(takeProps(['name', 'role']))).to.deep.equal([{ role: 'link', name: 'Back to top' }]);\n        });\n      });\n    });\n\n    describe('as a button', function() {\n      beforeEach(async function() {\n        await setViewport({ width: 320, height: 640 });\n        window.scrollTo({ top: 0, behavior: 'instant' });\n        await nextFrame();\n        const container = await createFixture<PfBackToTop>(html`\n          <div id=\"top\">\n            <div style=\"height: 2000px;\"></div>\n            <pf-back-to-top></pf-back-to-top>\n          </div>\n        `);\n        element = container.querySelector('pf-back-to-top')!;\n        await allUpdates(element);\n      });\n\n      describe('when scrolled', function() {\n        beforeEach(async function() {\n          window.scrollTo({ top: 401, behavior: 'instant' });\n          await nextFrame();\n          await allUpdates(element);\n          snapshot = await a11ySnapshot();\n        });\n\n        it('should have a label of \"Back to top\"', function() {\n          expect(snapshot.children?.map(takeProps(['name', 'role']))).to.deep.equal([{ role: 'button', name: 'Back to top' }]);\n        });\n      });\n    });\n  });\n\n  describe('when a label is provided', function() {\n    let element: PfBackToTop;\n    let snapshot: A11yTreeSnapshot;\n\n    describe('as a link', function() {\n      beforeEach(async function() {\n        await setViewport({ width: 320, height: 640 });\n        window.scrollTo({ top: 0, behavior: 'instant' });\n        await nextFrame();\n        const container = await createFixture<PfBackToTop>(html`\n          <div id=\"top\">\n            <div style=\"height: 2000px;\"></div>\n            <pf-back-to-top href=\"#top\" label=\"Return to top\"></pf-back-to-top>\n          </div>\n        `);\n        element = container.querySelector('pf-back-to-top')!;\n        await allUpdates(element);\n      });\n\n      describe('when scrolled', function() {\n        beforeEach(async function() {\n          window.scrollTo({ top: 401, behavior: 'instant' });\n          await nextFrame();\n          await allUpdates(element);\n          snapshot = await a11ySnapshot();\n        });\n\n        it('should have a label of \"Return to top\"', function() {\n          expect(snapshot.children?.map(takeProps(['name', 'role']))).to.deep.equal([{ role: 'link', name: 'Return to top' }]);\n        });\n      });\n    });\n\n    describe('as a button', function() {\n      beforeEach(async function() {\n        await setViewport({ width: 320, height: 640 });\n        window.scrollTo({ top: 0, behavior: 'instant' });\n        await nextFrame();\n        const container = await createFixture<PfBackToTop>(html`\n          <div id=\"top\">\n            <div style=\"height: 2000px;\"></div>\n            <pf-back-to-top label=\"Return to top\"></pf-back-to-top>\n          </div>\n        `);\n        element = container.querySelector('pf-back-to-top')!;\n        await allUpdates(element);\n      });\n\n      describe('when scrolled', function() {\n        beforeEach(async function() {\n          window.scrollTo({ top: 401, behavior: 'instant' });\n          await nextFrame();\n          await allUpdates(element);\n          snapshot = await a11ySnapshot();\n        });\n\n        it('should have a label of \"Return to top\"', function() {\n          expect(snapshot.children?.map(takeProps(['name', 'role']))).to.deep.equal([{ role: 'button', name: 'Return to top' }]);\n        });\n      });\n    });\n  });\n});\n"]}

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

@@ -2,9 +2,7 @@ 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
@@ -12,7 +10,6 @@ import { LitElement } from 'lit';
  * @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;
@@ -42,7 +39,7 @@ export declare class PfBackgroundImage extends LitElement {
      */
     filter: boolean;
     private _svg?;
-    render(): import("lit").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {

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

@@ -10,9 +10,7 @@ const styles = css `:host {\n  display: flex;\n\n  --_background-image: var(--pf
 /**
  * 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
@@ -20,7 +18,6 @@ const styles = css `:host {\n  display: flex;\n\n  --_background-image: var(--pf
  * @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() {
@@ -39,7 +36,7 @@ let PfBackgroundImage = class PfBackgroundImage extends LitElement {
             '--_background-image-2x': this.src2x,
             '--_background-image-sm': this.srcSm,
             '--_background-image-sm-2x': this.srcSm2x,
-            '--_background-image-lg': this.srcLg
+            '--_background-image-lg': this.srcLg,
         };
         Object.entries(cssProps).forEach(([key, value]) => {
             // if the value is undefined, remove the css property

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

@@ -1 +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"]}
+{"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 * @slot filter - Overrides the default svg filter for the background image.\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@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 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-background-image/test/pf-background-image.e2e.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,11 @@
+import { test } from '@playwright/test';
+import { PfeDemoPage } from '@patternfly/pfe-tools/test/playwright/PfeDemoPage.js';
+const tagName = 'pf-background-image';
+test.describe(tagName, () => {
+    test('snapshot', async ({ page }) => {
+        const componentPage = new PfeDemoPage(page, tagName);
+        await componentPage.navigate();
+        await componentPage.snapshot();
+    });
+});
+//# sourceMappingURL=pf-background-image.e2e.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pf-background-image.e2e.js","sourceRoot":"","sources":["pf-background-image.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,WAAW,EAAE,MAAM,sDAAsD,CAAC;AAEnF,MAAM,OAAO,GAAG,qBAAqB,CAAC;AAEtC,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE,GAAG,EAAE;IAC1B,IAAI,CAAC,UAAU,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;QAClC,MAAM,aAAa,GAAG,IAAI,WAAW,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;QACrD,MAAM,aAAa,CAAC,QAAQ,EAAE,CAAC;QAC/B,MAAM,aAAa,CAAC,QAAQ,EAAE,CAAC;IACjC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { test } from '@playwright/test';\nimport { PfeDemoPage } from '@patternfly/pfe-tools/test/playwright/PfeDemoPage.js';\n\nconst tagName = 'pf-background-image';\n\ntest.describe(tagName, () => {\n  test('snapshot', async ({ page }) => {\n    const componentPage = new PfeDemoPage(page, tagName);\n    await componentPage.navigate();\n    await componentPage.snapshot();\n  });\n});\n"]}

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,89 @@
+import { expect, html } from '@open-wc/testing';
+import { createFixture } from '@patternfly/pfe-tools/test/create-fixture.js';
+import { PfBackgroundImage } from '@patternfly/elements/pf-background-image/pf-background-image.js';
+import { setViewport } from '@web/test-runner-commands';
+const example = html `
+  <pf-background-image filter
+    src="/components/background-image/demo/pfbg.jpg"
+    src-2x="/components/background-image/demo/pfbg_576.jpg"
+    src-sm="/components/background-image/demo/pfbg_768.jpg"
+    src-sm-2x="/components/background-image/demo/pfbg_768@2x.jpg"
+    src-lg="/components/background-image/demo/pfbg_1200.jpg"
+    >
+  </pf-background-image>
+`;
+function isMobile() {
+    const matches = !!window.matchMedia('(max-width: 575px)').matches;
+    return matches;
+}
+function isTablet() {
+    const matches = !!window.matchMedia('(min-width: 576px)').matches;
+    return matches;
+}
+function isDesktop() {
+    const matches = !!window.matchMedia('(min-width: 992px)').matches;
+    return matches;
+}
+describe('<pf-background-image>', function () {
+    describe('simply instantiating', function () {
+        let element;
+        it('imperatively instantiates', function () {
+            expect(document.createElement('pf-background-image')).to.be.an.instanceof(PfBackgroundImage);
+        });
+        it('should upgrade', async function () {
+            element = await createFixture(html `<pf-background-image></pf-background-image>`);
+            const klass = customElements.get('pf-background-image');
+            expect(element)
+                .to.be.an.instanceOf(klass)
+                .and
+                .to.be.an.instanceOf(PfBackgroundImage);
+        });
+        describe('adjusting window size', function () {
+            describe('when the window is less than 576px wide', function () {
+                beforeEach(async function () {
+                    await setViewport({ width: 320, height: 500 });
+                    await element.updateComplete;
+                    expect(isMobile()).to.be.true;
+                });
+                it('should background image', async function () {
+                    const element = await createFixture(example);
+                    await element.updateComplete;
+                    const container = element.shadowRoot.querySelector('#container');
+                    const afterStyles = getComputedStyle(container, '::after');
+                    expect(afterStyles.getPropertyValue('background-image')).to.contain('/components/background-image/demo/pfbg.jpg');
+                });
+            });
+        });
+        describe('when the window is less greater then 576px wide', function () {
+            beforeEach(async function () {
+                await setViewport({ width: 576, height: 500 });
+                await element.updateComplete;
+                expect(isTablet()).to.be.true;
+            });
+            it('should background image', async function () {
+                const element = await createFixture(example);
+                await element.updateComplete;
+                const container = element.shadowRoot.querySelector('#container');
+                const afterStyles = getComputedStyle(container, '::after');
+                /* the image sizes are not named based off viewport but their own intrinsic size */
+                expect(afterStyles.getPropertyValue('background-image')).to.contain('/components/background-image/demo/pfbg_768.jpg');
+            });
+        });
+        describe('when the window is less greater then 992px wide', function () {
+            beforeEach(async function () {
+                await setViewport({ width: 992, height: 500 });
+                await element.updateComplete;
+                expect(isDesktop()).to.be.true;
+            });
+            it('should background image', async function () {
+                const element = await createFixture(example);
+                await element.updateComplete;
+                const container = element.shadowRoot.querySelector('#container');
+                const afterStyles = getComputedStyle(container, '::after');
+                /* the image sizes are not named based off viewport but their own intrinsic size */
+                expect(afterStyles.getPropertyValue('background-image')).to.contain('/components/background-image/demo/pfbg_1200.jpg');
+            });
+        });
+    });
+});
+//# sourceMappingURL=pf-background-image.spec.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pf-background-image.spec.js","sourceRoot":"","sources":["pf-background-image.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { expect, html } from '@open-wc/testing';\nimport { createFixture } from '@patternfly/pfe-tools/test/create-fixture.js';\nimport { PfBackgroundImage } from '@patternfly/elements/pf-background-image/pf-background-image.js';\nimport { setViewport } from '@web/test-runner-commands';\n\nconst example = html`\n  <pf-background-image filter\n    src=\"/components/background-image/demo/pfbg.jpg\"\n    src-2x=\"/components/background-image/demo/pfbg_576.jpg\"\n    src-sm=\"/components/background-image/demo/pfbg_768.jpg\"\n    src-sm-2x=\"/components/background-image/demo/pfbg_768@2x.jpg\"\n    src-lg=\"/components/background-image/demo/pfbg_1200.jpg\"\n    >\n  </pf-background-image>\n`;\n\nfunction isMobile() {\n  const matches = !!window.matchMedia('(max-width: 575px)').matches;\n  return matches;\n}\n\nfunction isTablet() {\n  const matches = !!window.matchMedia('(min-width: 576px)').matches;\n  return matches;\n}\n\nfunction isDesktop() {\n  const matches = !!window.matchMedia('(min-width: 992px)').matches;\n  return matches;\n}\n\ndescribe('<pf-background-image>', function() {\n  describe('simply instantiating', function() {\n    let element: PfBackgroundImage;\n\n    it('imperatively instantiates', function() {\n      expect(document.createElement('pf-background-image')).to.be.an.instanceof(PfBackgroundImage);\n    });\n\n    it('should upgrade', async function() {\n      element = await createFixture<PfBackgroundImage>(html`<pf-background-image></pf-background-image>`);\n      const klass = customElements.get('pf-background-image');\n      expect(element)\n          .to.be.an.instanceOf(klass)\n          .and\n          .to.be.an.instanceOf(PfBackgroundImage);\n    });\n\n    describe('adjusting window size', function() {\n      describe('when the window is less than 576px wide', function() {\n        beforeEach(async function() {\n          await setViewport({ width: 320, height: 500 });\n          await element.updateComplete;\n          expect(isMobile()).to.be.true;\n        });\n\n        it('should background image', async function() {\n          const element = await createFixture<PfBackgroundImage>(example);\n          await element.updateComplete;\n          const container = element.shadowRoot!.querySelector('#container')!;\n          const afterStyles = getComputedStyle(container, '::after');\n          expect(afterStyles.getPropertyValue('background-image')).to.contain('/components/background-image/demo/pfbg.jpg');\n        });\n      });\n    });\n\n    describe('when the window is less greater then 576px wide', function() {\n      beforeEach(async function() {\n        await setViewport({ width: 576, height: 500 });\n        await element.updateComplete;\n        expect(isTablet()).to.be.true;\n      });\n\n      it('should background image', async function() {\n        const element = await createFixture<PfBackgroundImage>(example);\n        await element.updateComplete;\n        const container = element.shadowRoot!.querySelector('#container')!;\n        const afterStyles = getComputedStyle(container, '::after');\n        /* the image sizes are not named based off viewport but their own intrinsic size */\n        expect(afterStyles.getPropertyValue('background-image')).to.contain('/components/background-image/demo/pfbg_768.jpg');\n      });\n    });\n\n    describe('when the window is less greater then 992px wide', function() {\n      beforeEach(async function() {\n        await setViewport({ width: 992, height: 500 });\n        await element.updateComplete;\n        expect(isDesktop()).to.be.true;\n      });\n\n      it('should background image', async function() {\n        const element = await createFixture<PfBackgroundImage>(example);\n        await element.updateComplete;\n        const container = element.shadowRoot!.querySelector('#container')!;\n        const afterStyles = getComputedStyle(container, '::after');\n        /* the image sizes are not named based off viewport but their own intrinsic size */\n        expect(afterStyles.getPropertyValue('background-image')).to.contain('/components/background-image/demo/pfbg_1200.jpg');\n      });\n    });\n  });\n});\n\n"]}

package/pf-badge/BaseBadge.d.ts

@@ -14,5 +14,5 @@ export declare abstract class BaseBadge extends LitElement {
      * the numeric value exceeds the threshold value.
      */
     abstract threshold?: number;
-    render(): import("lit").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
 }

package/pf-badge/test/pf-badge.e2e.d.ts

@@ -0,0 +1 @@
+export {};

package/pf-badge/test/pf-badge.e2e.js

@@ -0,0 +1,11 @@
+import { test } from '@playwright/test';
+import { PfeDemoPage } from '@patternfly/pfe-tools/test/playwright/PfeDemoPage.js';
+const tagName = 'pf-badge';
+test.describe(tagName, () => {
+    test('snapshot', async ({ page }) => {
+        const componentPage = new PfeDemoPage(page, tagName);
+        await componentPage.navigate();
+        await componentPage.snapshot();
+    });
+});
+//# sourceMappingURL=pf-badge.e2e.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pf-badge.e2e.js","sourceRoot":"","sources":["pf-badge.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,WAAW,EAAE,MAAM,sDAAsD,CAAC;AAEnF,MAAM,OAAO,GAAG,UAAU,CAAC;AAE3B,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE,GAAG,EAAE;IAC1B,IAAI,CAAC,UAAU,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;QAClC,MAAM,aAAa,GAAG,IAAI,WAAW,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;QACrD,MAAM,aAAa,CAAC,QAAQ,EAAE,CAAC;QAC/B,MAAM,aAAa,CAAC,QAAQ,EAAE,CAAC;IACjC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { test } from '@playwright/test';\nimport { PfeDemoPage } from '@patternfly/pfe-tools/test/playwright/PfeDemoPage.js';\n\nconst tagName = 'pf-badge';\n\ntest.describe(tagName, () => {\n  test('snapshot', async ({ page }) => {\n    const componentPage = new PfeDemoPage(page, tagName);\n    await componentPage.navigate();\n    await componentPage.snapshot();\n  });\n});\n"]}

package/pf-badge/test/pf-badge.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/pf-badge/test/pf-badge.spec.js

@@ -0,0 +1,52 @@
+import { expect, html, nextFrame } from '@open-wc/testing';
+import { createFixture } from '@patternfly/pfe-tools/test/create-fixture.js';
+import { hexToRgb, getColor } from '@patternfly/pfe-tools/test/hex-to-rgb.js';
+import { PfBadge } from '@patternfly/elements/pf-badge/pf-badge.js';
+// Background colors for the various states
+const states = {
+    default: '#f0f0f0',
+    read: '#f0f0f0',
+    unread: '#0066cc',
+};
+const element = html `<pf-badge number="10">10</pf-badge>`;
+describe('<pf-badge>', function () {
+    it('imperatively instantiates', function () {
+        expect(document.createElement('pf-badge')).to.be.an.instanceof(PfBadge);
+    });
+    it('should upgrade', async function () {
+        const el = await createFixture(element);
+        expect(el, 'pf-badge should be an instance of PfBadge')
+            .to.be.an
+            .instanceOf(customElements.get('pf-badge'))
+            .and
+            .to.be.an.instanceof(PfBadge);
+    });
+    it('should display text equivalent to the number attribute', async function () {
+        const el = await createFixture(html `<pf-badge number="100">10</pf-badge>`);
+        await nextFrame();
+        expect(el.shadowRoot.querySelector('span').textContent).to.equal('100');
+    });
+    it('should add \'+\' sign if the value exceeds the threshold', async function () {
+        const el = await createFixture(html `<pf-badge number="900" threshold="100">900</pf-badge>`);
+        await nextFrame();
+        expect(el.shadowRoot.querySelector('span').textContent).to.equal('100+');
+    });
+    it('shouldn\'t add a \'+\' sign if the value doesn\'t exceed the threshold', async function () {
+        const el = await createFixture(html `<pf-badge number="900" threshold="1000">900</pf-badge>`);
+        await el.updateComplete;
+        expect(el.textContent).to.equal('900');
+        expect(el.shadowRoot.querySelector('span').textContent).to.equal('900');
+    });
+    // This is the one that created an error:
+    Object.entries(states).forEach(([state, color]) => {
+        it(`should have a background color of '${color}' when state is ${state}`, async function () {
+            const el = await createFixture(element);
+            if (state !== 'default') {
+                el.setAttribute('state', state);
+            }
+            const [r, g, b] = getColor(el, 'background-color');
+            expect([r, g, b]).to.deep.equal(hexToRgb(color));
+        });
+    });
+});
+//# sourceMappingURL=pf-badge.spec.js.map