@patternfly/elements 3.0.0 → 3.0.2

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

@@ -0,0 +1,233 @@
+import { expect, html, fixture, fixtureCleanup, nextFrame } from '@open-wc/testing';
+import { a11ySnapshot } from '@patternfly/pfe-tools/test/a11y-snapshot.js';
+import { clickElementAtCenter } from '@patternfly/pfe-tools/test/utils.js';
+import { sendKeys, resetMouse } from '@web/test-runner-commands';
+import { PfPopover } from '@patternfly/elements/pf-popover/pf-popover.js';
+import { PfButton } from '@patternfly/elements/pf-button/pf-button.js';
+function press(key) {
+    return async function () {
+        await sendKeys({ press: key });
+    };
+}
+describe('<pf-popover>', function () {
+    let element;
+    /** create a simple test fixture */
+    async function setupSimpleInstance() {
+        element = await fixture(html `<pf-popover></pf-popover>`);
+    }
+    /** Wait on the element's update cycle */
+    async function updateComplete() {
+        await element.updateComplete;
+    }
+    /** Asserts that an aXe audit on the page passes */
+    async function expectA11yAxe() {
+        await expect(element).to.be.accessible();
+    }
+    /**
+     * Assert that the accessibility tree reports the expected snapshot
+     * e.g. for a closed popover, does not announce popover child content
+     * e.g. for an opened popover, it does announce popover child content
+     * If the expected children snapshot is undefined, then assistive technology
+     * reports nothing at all, e.g. a popover element with no attrs and no children
+     */
+    async function expectA11ySnapshot(expected = { role: 'WebArea', name: '' }) {
+        const snapshot = await a11ySnapshot();
+        expect(snapshot).to.deep.equal(expected);
+    }
+    function resetElement() {
+        document.querySelectorAll('pf-popover').forEach(e => e.remove());
+        // @ts-expect-error: resetting test state, so we don't mind the ts error.
+        element = undefined;
+    }
+    afterEach(resetElement);
+    afterEach(fixtureCleanup);
+    describe('simply instantiating', function () {
+        beforeEach(setupSimpleInstance);
+        it('should upgrade', async function () {
+            const klass = customElements.get('pf-popover');
+            expect(element)
+                .to.be.an.instanceOf(klass)
+                .and
+                .to.be.an.instanceOf(PfPopover);
+        });
+        it('should be accessible', expectA11yAxe);
+        it('imperatively instantiates', function () {
+            expect(document.createElement('pf-popover'))
+                .to.be.an.instanceof(PfPopover);
+        });
+        it('should not report anything to assistive technology', async function () {
+            const snapshot = await a11ySnapshot();
+            expect(snapshot.children).to.not.be.ok;
+        });
+    });
+    describe('with a slotted trigger; and with heading, body, and footer attributes', function () {
+        // these tests are flaky, soo...
+        beforeEach(resetElement);
+        beforeEach(nextFrame);
+        beforeEach(resetElement);
+        beforeEach(nextFrame);
+        beforeEach(resetElement);
+        beforeEach(nextFrame);
+        /** create a test fixture with slotted trigger and content attrs */
+        beforeEach(async function setupPopoverWithSlottedTriggerAndContentAttrs() {
+            element = await fixture(html `
+        <pf-popover heading="Popover heading"
+                    body="Popovers are triggered by click rather than hover."
+                    footer="Popover footer">
+          <pf-button>Toggle popover</pf-button>
+        </pf-popover>
+      `);
+        });
+        it('should be accessible', expectA11yAxe);
+        it('should hide popover content from assistive technology', async function () {
+            const snapshot = await a11ySnapshot();
+            expect(snapshot.children?.find(x => x.role === 'dialog')).to.not.be.ok;
+        });
+        describe('tabbing to the trigger', function () {
+            beforeEach(resetElement);
+            beforeEach(async function setupPopoverWithSlottedTriggerAndContentAttrs() {
+                element = await fixture(html `
+          <pf-popover heading="Popover heading"
+                      body="Popovers are triggered by click rather than hover."
+                      footer="Popover footer">
+            <pf-button>Toggle popover</pf-button>
+          </pf-popover>
+        `);
+            });
+            beforeEach(updateComplete);
+            beforeEach(press('Tab'));
+            beforeEach(updateComplete);
+            it('doesn\'t steal tab order', function () {
+                expect(document.activeElement).to.be.an.instanceof(PfButton);
+            });
+            describe('and pressing Enter', function () {
+                beforeEach(updateComplete);
+                beforeEach(press('Enter'));
+                beforeEach(updateComplete);
+                it('should show popover content to assistive technology', async function () {
+                    const snapshot = await a11ySnapshot();
+                    expect(snapshot.children?.find(x => x.role === 'dialog')).to.be.ok;
+                });
+                describe('then pressing Enter again', function () {
+                    beforeEach(updateComplete);
+                    beforeEach(press('Enter'));
+                    beforeEach(updateComplete);
+                    it('should hide popover content from assistive technology', async function () {
+                        const snapshot = await a11ySnapshot();
+                        expect(snapshot?.children?.length).to.equal(1);
+                        const dialog = snapshot.children?.find(x => x.role === 'dialog');
+                        expect(dialog).to.not.be.ok;
+                    });
+                });
+                describe('then pressing Escape', function () {
+                    beforeEach(updateComplete);
+                    beforeEach(press('Escape'));
+                    beforeEach(updateComplete);
+                    it('should hide popover content from assistive technology', async function () {
+                        const snapshot = await a11ySnapshot();
+                        expect(snapshot?.children?.length).to.equal(1);
+                        const dialog = snapshot.children?.find(x => x.role === 'dialog');
+                        expect(dialog).to.not.be.ok;
+                    });
+                });
+            });
+        });
+    });
+    describe('with a trigger and a sibling button', function () {
+        let btn1;
+        let btn2;
+        async function clickButton1() {
+            await clickElementAtCenter(btn1);
+            await resetMouse();
+        }
+        async function clickButton2() {
+            await clickElementAtCenter(btn2);
+            await resetMouse();
+        }
+        beforeEach(async function () {
+            const container = await fixture(html `
+        <div>
+          <pf-popover id="popover"
+                      trigger="btn-1"
+                      heading="Popover heading"
+                      body="Popovers are triggered by click rather than hover."
+                      footer="Popover footer"></pf-popover>
+          <button id="btn-1">Toggle popover 1</button>
+          <button id="btn-2">Toggle popover 2</button>
+        </div>
+      `);
+            element = container.querySelector('pf-popover');
+            btn1 = container.querySelector('#btn-1');
+            btn2 = container.querySelector('#btn-2');
+        });
+        it('starts closed', async function () {
+            const snapshot = await a11ySnapshot();
+            expect(snapshot.children?.find(x => x.role === 'dialog')).to.not.be.ok;
+        });
+        describe('clicking the trigger', function () {
+            beforeEach(updateComplete);
+            beforeEach(clickButton1);
+            beforeEach(updateComplete);
+            it('shows the popover', async function () {
+                const snapshot = await a11ySnapshot();
+                expect(snapshot.children?.find(x => x.role === 'dialog')).to.be.ok;
+            });
+        });
+        describe('setting the trigger to the sibling button', function () {
+            beforeEach(updateComplete);
+            beforeEach(function () {
+                element.setAttribute('trigger', 'btn-2');
+            });
+            beforeEach(updateComplete);
+            describe('clicking the first button', function () {
+                beforeEach(updateComplete);
+                beforeEach(clickButton1);
+                beforeEach(updateComplete);
+                it('remains closed', async function () {
+                    const snapshot = await a11ySnapshot();
+                    expect(snapshot).to.deep.equal({
+                        name: '',
+                        role: 'WebArea',
+                        children: [
+                            { role: 'button', name: 'Toggle popover 1', focused: true },
+                            { role: 'button', name: 'Toggle popover 2' },
+                        ],
+                    });
+                });
+            });
+            describe('clicking the sibling button', function () {
+                beforeEach(updateComplete);
+                beforeEach(clickButton2);
+                beforeEach(updateComplete);
+                it('shows the popover', async function () {
+                    const snapshot = await a11ySnapshot();
+                    expect(snapshot.children?.find(x => x.role === 'dialog')).to.be.ok;
+                });
+            });
+        });
+        describe('then pressing the Enter key', function () {
+            beforeEach(updateComplete);
+            // Close the popover
+            beforeEach(press('Enter'));
+            beforeEach(updateComplete);
+            it('closes the popover', async function () {
+                const snapshot = await a11ySnapshot();
+                expect(snapshot).to.deep.equal({
+                    role: 'WebArea',
+                    name: '',
+                    children: [
+                        {
+                            name: 'Toggle popover 1',
+                            role: 'button',
+                        },
+                        {
+                            name: 'Toggle popover 2',
+                            role: 'button',
+                        },
+                    ],
+                });
+            });
+        });
+    });
+});
+//# sourceMappingURL=pf-popover.spec.js.map

package/pf-popover/test/pf-popover.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pf-popover.spec.js","sourceRoot":"","sources":["pf-popover.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { expect, html, fixture, fixtureCleanup, nextFrame } from '@open-wc/testing';\nimport { a11ySnapshot, type A11yTreeSnapshot } from '@patternfly/pfe-tools/test/a11y-snapshot.js';\nimport { clickElementAtCenter } from '@patternfly/pfe-tools/test/utils.js';\nimport { sendKeys, resetMouse } from '@web/test-runner-commands';\nimport { PfPopover } from '@patternfly/elements/pf-popover/pf-popover.js';\nimport { PfButton } from '@patternfly/elements/pf-button/pf-button.js';\n\nfunction press(key: string) {\n  return async function() {\n    await sendKeys({ press: key });\n  };\n}\n\ndescribe('<pf-popover>', function() {\n  let element: PfPopover;\n\n  /** create a simple test fixture */\n  async function setupSimpleInstance() {\n    element = await fixture<PfPopover>(html`<pf-popover></pf-popover>`);\n  }\n\n  /** Wait on the element's update cycle */\n  async function updateComplete() {\n    await element.updateComplete;\n  }\n\n  /** Asserts that an aXe audit on the page passes */\n  async function expectA11yAxe() {\n    await expect(element).to.be.accessible();\n  }\n\n  /**\n   * Assert that the accessibility tree reports the expected snapshot\n   * e.g. for a closed popover, does not announce popover child content\n   * e.g. for an opened popover, it does announce popover child content\n   * If the expected children snapshot is undefined, then assistive technology\n   * reports nothing at all, e.g. a popover element with no attrs and no children\n   */\n  async function expectA11ySnapshot(expected: A11yTreeSnapshot = { role: 'WebArea', name: '' }) {\n    const snapshot = await a11ySnapshot();\n    expect(snapshot).to.deep.equal(expected);\n  }\n\n  function resetElement() {\n    document.querySelectorAll('pf-popover').forEach(e => e.remove());\n    // @ts-expect-error: resetting test state, so we don't mind the ts error.\n    element = undefined;\n  }\n\n  afterEach(resetElement);\n  afterEach(fixtureCleanup);\n\n  describe('simply instantiating', function() {\n    beforeEach(setupSimpleInstance);\n    it('should upgrade', async function() {\n      const klass = customElements.get('pf-popover');\n      expect(element)\n          .to.be.an.instanceOf(klass)\n          .and\n          .to.be.an.instanceOf(PfPopover);\n    });\n    it('should be accessible', expectA11yAxe);\n    it('imperatively instantiates', function() {\n      expect(document.createElement('pf-popover'))\n          .to.be.an.instanceof(PfPopover);\n    });\n    it('should not report anything to assistive technology', async function() {\n      const snapshot = await a11ySnapshot();\n      expect(snapshot.children).to.not.be.ok;\n    });\n  });\n\n  describe('with a slotted trigger; and with heading, body, and footer attributes', function() {\n    // these tests are flaky, soo...\n    beforeEach(resetElement);\n    beforeEach(nextFrame);\n    beforeEach(resetElement);\n    beforeEach(nextFrame);\n    beforeEach(resetElement);\n    beforeEach(nextFrame);\n\n    /** create a test fixture with slotted trigger and content attrs */\n    beforeEach(async function setupPopoverWithSlottedTriggerAndContentAttrs() {\n      element = await fixture<PfPopover>(html`\n        <pf-popover heading=\"Popover heading\"\n                    body=\"Popovers are triggered by click rather than hover.\"\n                    footer=\"Popover footer\">\n          <pf-button>Toggle popover</pf-button>\n        </pf-popover>\n      `);\n    });\n\n    it('should be accessible', expectA11yAxe);\n\n    it('should hide popover content from assistive technology', async function() {\n      const snapshot = await a11ySnapshot();\n      expect(snapshot.children?.find(x => x.role === 'dialog')).to.not.be.ok;\n    });\n\n    describe('tabbing to the trigger', function() {\n      beforeEach(resetElement);\n      beforeEach(async function setupPopoverWithSlottedTriggerAndContentAttrs() {\n        element = await fixture<PfPopover>(html`\n          <pf-popover heading=\"Popover heading\"\n                      body=\"Popovers are triggered by click rather than hover.\"\n                      footer=\"Popover footer\">\n            <pf-button>Toggle popover</pf-button>\n          </pf-popover>\n        `);\n      });\n\n      beforeEach(updateComplete);\n      beforeEach(press('Tab'));\n      beforeEach(updateComplete);\n\n      it('doesn\\'t steal tab order', function() {\n        expect(document.activeElement).to.be.an.instanceof(PfButton);\n      });\n\n      describe('and pressing Enter', function() {\n        beforeEach(updateComplete);\n        beforeEach(press('Enter'));\n        beforeEach(updateComplete);\n        it('should show popover content to assistive technology', async function() {\n          const snapshot = await a11ySnapshot();\n          expect(snapshot.children?.find(x => x.role === 'dialog')).to.be.ok;\n        });\n        describe('then pressing Enter again', function() {\n          beforeEach(updateComplete);\n          beforeEach(press('Enter'));\n          beforeEach(updateComplete);\n          it('should hide popover content from assistive technology', async function() {\n            const snapshot = await a11ySnapshot();\n            expect(snapshot?.children?.length).to.equal(1);\n            const dialog = snapshot.children?.find(x => x.role === 'dialog');\n            expect(dialog).to.not.be.ok;\n          });\n        });\n        describe('then pressing Escape', function() {\n          beforeEach(updateComplete);\n          beforeEach(press('Escape'));\n          beforeEach(updateComplete);\n          it('should hide popover content from assistive technology', async function() {\n            const snapshot = await a11ySnapshot();\n            expect(snapshot?.children?.length).to.equal(1);\n            const dialog = snapshot.children?.find(x => x.role === 'dialog');\n            expect(dialog).to.not.be.ok;\n          });\n        });\n      });\n    });\n  });\n\n  describe('with a trigger and a sibling button', function() {\n    let btn1: HTMLButtonElement;\n    let btn2: HTMLButtonElement;\n\n    async function clickButton1() {\n      await clickElementAtCenter(btn1);\n      await resetMouse();\n    }\n\n    async function clickButton2() {\n      await clickElementAtCenter(btn2);\n      await resetMouse();\n    }\n\n    beforeEach(async function() {\n      const container = await fixture(html`\n        <div>\n          <pf-popover id=\"popover\"\n                      trigger=\"btn-1\"\n                      heading=\"Popover heading\"\n                      body=\"Popovers are triggered by click rather than hover.\"\n                      footer=\"Popover footer\"></pf-popover>\n          <button id=\"btn-1\">Toggle popover 1</button>\n          <button id=\"btn-2\">Toggle popover 2</button>\n        </div>\n      `);\n      element = container.querySelector('pf-popover')!;\n      btn1 = container.querySelector('#btn-1')!;\n      btn2 = container.querySelector('#btn-2')!;\n    });\n\n    it('starts closed', async function() {\n      const snapshot = await a11ySnapshot();\n      expect(snapshot.children?.find(x => x.role === 'dialog')).to.not.be.ok;\n    });\n\n    describe('clicking the trigger', function() {\n      beforeEach(updateComplete);\n      beforeEach(clickButton1);\n      beforeEach(updateComplete);\n      it('shows the popover', async function() {\n        const snapshot = await a11ySnapshot();\n        expect(snapshot.children?.find(x => x.role === 'dialog')).to.be.ok;\n      });\n    });\n\n    describe('setting the trigger to the sibling button', function() {\n      beforeEach(updateComplete);\n      beforeEach(function() {\n        element.setAttribute('trigger', 'btn-2');\n      });\n      beforeEach(updateComplete);\n      describe('clicking the first button', function() {\n        beforeEach(updateComplete);\n        beforeEach(clickButton1);\n        beforeEach(updateComplete);\n        it('remains closed', async function() {\n          const snapshot = await a11ySnapshot();\n          expect(snapshot).to.deep.equal({\n            name: '',\n            role: 'WebArea',\n            children: [\n              { role: 'button', name: 'Toggle popover 1', focused: true },\n              { role: 'button', name: 'Toggle popover 2' },\n            ],\n          });\n        });\n      });\n      describe('clicking the sibling button', function() {\n        beforeEach(updateComplete);\n        beforeEach(clickButton2);\n        beforeEach(updateComplete);\n        it('shows the popover', async function() {\n          const snapshot = await a11ySnapshot();\n          expect(snapshot.children?.find(x => x.role === 'dialog')).to.be.ok;\n        });\n      });\n    });\n    describe('then pressing the Enter key', function() {\n      beforeEach(updateComplete);\n      // Close the popover\n      beforeEach(press('Enter'));\n      beforeEach(updateComplete);\n      it('closes the popover', async function() {\n        const snapshot = await a11ySnapshot();\n        expect(snapshot).to.deep.equal({\n          role: 'WebArea',\n          name: '',\n          children: [\n            {\n              name: 'Toggle popover 1',\n              role: 'button',\n            },\n            {\n              name: 'Toggle popover 2',\n              role: 'button',\n            },\n          ],\n        });\n      });\n    });\n  });\n});\n"]}

package/pf-progress/demo/kitchen-sink.css

@@ -0,0 +1,4 @@
+pf-progress {
+    padding-bottom: 0.25rem;
+    display: block;
+}

package/pf-progress/pf-progress.d.ts

@@ -2,85 +2,64 @@ import type { PropertyValues } from 'lit';
 import { LitElement } from 'lit';
 /**
  * A progress bar gives the user a visual representation of their completion status of an ongoing process or task.
- *
  * @summary Display completion status of ongoing process or task.
- *
  * @cssprop {<length>} --pf-c-progress--GridGap
  *          Gap between the sections of the progress bar.
  *          {@default `1rem`}
- *
  * @cssprop {<color>} --pf-c-progress__bar--before--BackgroundColor
  *          Color of the progress bar.
  *          {@default `#06c`}
- *
  * @cssprop {<length>} --pf-c-progress__bar--Height
  *          Height of the progress bar.
  *          {@default `1rem`}
- *
  * @cssprop {<color>} --pf-c-progress__bar--BackgroundColor
  *          Background color of the progress bar.
  *          {@default `#ffffff`}
- *
  * @cssprop {<color>} --pf-c-progress__status-icon--Color
  *          Color of the status icon.
  *          {@default `#151515`}
- *
  * @cssprop {<length>} --pf-c-progress__status-icon--MarginLeft
  *          Margin left of the status icon.
  *          {@default `0.5rem`}
- *
  * @cssprop {<length>} --pf-c-progress__indicator--Height
  *          Height of the progress bar indicator.
  *          {@default `1rem`}
- *
  * @cssprop {<color>} --pf-c-progress__indicator--BackgroundColor
  *          Background color of the progress bar indicator.
  *          {@default `#ffffff`}
- *
  * @cssprop {<color>} --pf-c-progress--m-success__bar--BackgroundColor
  *          Background color of the progress bar when variant is success.
  *          {@default `#3e8635`}
- *
  * @cssprop {<color>} --pf-c-progress--m-warning__bar--BackgroundColor
  *          Background color of the progress bar when variant is warning.
  *          {@default `#f0ab00`}
- *
  * @cssprop {<color>} --pf-c-progress--m-danger__bar--BackgroundColor
  *          Background color of the progress bar when variant is danger.
  *          {@default `#c9190b`}
- *
  * @cssprop {<color>} --pf-c-progress--m-success__status-icon--Color
  *          Color of the status icon when variant is success.
  *          {@default `#3e8635`}
- *
  * @cssprop {<color>} --pf-c-progress--m-warning__status-icon--Color
  *          Color of the status icon when variant is warning.
  *          {@default `#f0ab00`}
- *
  * @cssprop {<color>} --pf-c-progress--m-danger__status-icon--Color
  *          Color of the status icon when variant is danger.
  *          {@default `#c9190b`}
- *
  * @cssprop {<color>} --pf-c-progress--m-success--m-inside__measure--Color
  *          Color of the progress bar measure when variant is success and measure location is inside.
  *          {@default `#ffffff`}
- *
  * @cssprop {<length>} --pf-c-progress--m-outside__measure--FontSize
  *          Font size of the progress bar measure when measure location is outside.
  *          {@default `0.875rem`}
- *
  * @cssprop {<length>} --pf-c-progress--m-sm__bar--Height
  *          Height of the progress bar when the size is small.
  *          {@default `0.5rem`}
- *
  * @cssprop {<length>} --pf-c-progress--m-sm__description--FontSize
  *          Font size of the progress bar description when the size is small.
  *          {@default `0.875rem`}
- *
  * @cssprop {<length>} --pf-c-progress--m-lg__bar--Height
  *          Height of the progress bar when the size is large.
  *          {@default `1.5rem`}
- *
  */
 export declare class PfProgress extends LitElement {
     #private;
@@ -102,7 +81,7 @@ export declare class PfProgress extends LitElement {
     /** Variant of the progress bar */
     variant?: 'success' | 'danger' | 'warning';
     willUpdate(changed: PropertyValues<this>): void;
-    render(): import("lit").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/pf-progress/pf-progress.js

@@ -11,89 +11,68 @@ const styles = css `* {\n  box-sizing: border-box;\n}\n\n#container {\n  --_pf-c
 const ICONS = new Map(Object.entries({
     success: { icon: 'circle-check' },
     danger: { icon: 'circle-xmark' },
-    warning: { icon: 'triangle-exclamation' }
+    warning: { icon: 'triangle-exclamation' },
 }));
 /**
  * A progress bar gives the user a visual representation of their completion status of an ongoing process or task.
- *
  * @summary Display completion status of ongoing process or task.
- *
  * @cssprop {<length>} --pf-c-progress--GridGap
  *          Gap between the sections of the progress bar.
  *          {@default `1rem`}
- *
  * @cssprop {<color>} --pf-c-progress__bar--before--BackgroundColor
  *          Color of the progress bar.
  *          {@default `#06c`}
- *
  * @cssprop {<length>} --pf-c-progress__bar--Height
  *          Height of the progress bar.
  *          {@default `1rem`}
- *
  * @cssprop {<color>} --pf-c-progress__bar--BackgroundColor
  *          Background color of the progress bar.
  *          {@default `#ffffff`}
- *
  * @cssprop {<color>} --pf-c-progress__status-icon--Color
  *          Color of the status icon.
  *          {@default `#151515`}
- *
  * @cssprop {<length>} --pf-c-progress__status-icon--MarginLeft
  *          Margin left of the status icon.
  *          {@default `0.5rem`}
- *
  * @cssprop {<length>} --pf-c-progress__indicator--Height
  *          Height of the progress bar indicator.
  *          {@default `1rem`}
- *
  * @cssprop {<color>} --pf-c-progress__indicator--BackgroundColor
  *          Background color of the progress bar indicator.
  *          {@default `#ffffff`}
- *
  * @cssprop {<color>} --pf-c-progress--m-success__bar--BackgroundColor
  *          Background color of the progress bar when variant is success.
  *          {@default `#3e8635`}
- *
  * @cssprop {<color>} --pf-c-progress--m-warning__bar--BackgroundColor
  *          Background color of the progress bar when variant is warning.
  *          {@default `#f0ab00`}
- *
  * @cssprop {<color>} --pf-c-progress--m-danger__bar--BackgroundColor
  *          Background color of the progress bar when variant is danger.
  *          {@default `#c9190b`}
- *
  * @cssprop {<color>} --pf-c-progress--m-success__status-icon--Color
  *          Color of the status icon when variant is success.
  *          {@default `#3e8635`}
- *
  * @cssprop {<color>} --pf-c-progress--m-warning__status-icon--Color
  *          Color of the status icon when variant is warning.
  *          {@default `#f0ab00`}
- *
  * @cssprop {<color>} --pf-c-progress--m-danger__status-icon--Color
  *          Color of the status icon when variant is danger.
  *          {@default `#c9190b`}
- *
  * @cssprop {<color>} --pf-c-progress--m-success--m-inside__measure--Color
  *          Color of the progress bar measure when variant is success and measure location is inside.
  *          {@default `#ffffff`}
- *
  * @cssprop {<length>} --pf-c-progress--m-outside__measure--FontSize
  *          Font size of the progress bar measure when measure location is outside.
  *          {@default `0.875rem`}
- *
  * @cssprop {<length>} --pf-c-progress--m-sm__bar--Height
  *          Height of the progress bar when the size is small.
  *          {@default `0.5rem`}
- *
  * @cssprop {<length>} --pf-c-progress--m-sm__description--FontSize
  *          Font size of the progress bar description when the size is small.
  *          {@default `0.875rem`}
- *
  * @cssprop {<length>} --pf-c-progress--m-lg__bar--Height
  *          Height of the progress bar when the size is large.
  *          {@default `1.5rem`}
- *
  */
 let PfProgress = class PfProgress extends LitElement {
     constructor() {

package/pf-progress/pf-progress.js.map

@@ -1 +1 @@
-{"version":3,"file":"pf-progress.js","sourceRoot":"","sources":["pf-progress.ts"],"names":[],"mappings":"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","sourcesContent":["import type { PropertyValues } from 'lit';\nimport { LitElement, html } from 'lit';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { styleMap } from 'lit/directives/style-map.js';\n\nimport styles from './pf-progress.css';\n\nconst ICONS = new Map(Object.entries({\n  success: { icon: 'circle-check' },\n  danger: { icon: 'circle-xmark' },\n  warning: { icon: 'triangle-exclamation' }\n}));\n\n/**\n * A progress bar gives the user a visual representation of their completion status of an ongoing process or task.\n *\n * @summary Display completion status of ongoing process or task.\n *\n * @cssprop {<length>} --pf-c-progress--GridGap\n *          Gap between the sections of the progress bar.\n *          {@default `1rem`}\n *\n * @cssprop {<color>} --pf-c-progress__bar--before--BackgroundColor\n *          Color of the progress bar.\n *          {@default `#06c`}\n *\n * @cssprop {<length>} --pf-c-progress__bar--Height\n *          Height of the progress bar.\n *          {@default `1rem`}\n *\n * @cssprop {<color>} --pf-c-progress__bar--BackgroundColor\n *          Background color of the progress bar.\n *          {@default `#ffffff`}\n *\n * @cssprop {<color>} --pf-c-progress__status-icon--Color\n *          Color of the status icon.\n *          {@default `#151515`}\n *\n * @cssprop {<length>} --pf-c-progress__status-icon--MarginLeft\n *          Margin left of the status icon.\n *          {@default `0.5rem`}\n *\n * @cssprop {<length>} --pf-c-progress__indicator--Height\n *          Height of the progress bar indicator.\n *          {@default `1rem`}\n *\n * @cssprop {<color>} --pf-c-progress__indicator--BackgroundColor\n *          Background color of the progress bar indicator.\n *          {@default `#ffffff`}\n *\n * @cssprop {<color>} --pf-c-progress--m-success__bar--BackgroundColor\n *          Background color of the progress bar when variant is success.\n *          {@default `#3e8635`}\n *\n * @cssprop {<color>} --pf-c-progress--m-warning__bar--BackgroundColor\n *          Background color of the progress bar when variant is warning.\n *          {@default `#f0ab00`}\n *\n * @cssprop {<color>} --pf-c-progress--m-danger__bar--BackgroundColor\n *          Background color of the progress bar when variant is danger.\n *          {@default `#c9190b`}\n *\n * @cssprop {<color>} --pf-c-progress--m-success__status-icon--Color\n *          Color of the status icon when variant is success.\n *          {@default `#3e8635`}\n *\n * @cssprop {<color>} --pf-c-progress--m-warning__status-icon--Color\n *          Color of the status icon when variant is warning.\n *          {@default `#f0ab00`}\n *\n * @cssprop {<color>} --pf-c-progress--m-danger__status-icon--Color\n *          Color of the status icon when variant is danger.\n *          {@default `#c9190b`}\n *\n * @cssprop {<color>} --pf-c-progress--m-success--m-inside__measure--Color\n *          Color of the progress bar measure when variant is success and measure location is inside.\n *          {@default `#ffffff`}\n *\n * @cssprop {<length>} --pf-c-progress--m-outside__measure--FontSize\n *          Font size of the progress bar measure when measure location is outside.\n *          {@default `0.875rem`}\n *\n * @cssprop {<length>} --pf-c-progress--m-sm__bar--Height\n *          Height of the progress bar when the size is small.\n *          {@default `0.5rem`}\n *\n * @cssprop {<length>} --pf-c-progress--m-sm__description--FontSize\n *          Font size of the progress bar description when the size is small.\n *          {@default `0.875rem`}\n *\n * @cssprop {<length>} --pf-c-progress--m-lg__bar--Height\n *          Height of the progress bar when the size is large.\n *          {@default `1.5rem`}\n *\n */\n@customElement('pf-progress')\nexport class PfProgress extends LitElement {\n  static readonly styles = [styles];\n\n  #internals = this.attachInternals();\n\n  /** Represents the value of the progress bar */\n  @property({ reflect: true, type: Number }) value = 0;\n\n  /** Description (title) above the progress bar */\n  @property() description?: string;\n\n  /** Indicate whether to truncate the string description (title) */\n  @property({\n    type: Boolean,\n    reflect: true,\n    attribute: 'description-truncated',\n  }) descriptionTruncated = false;\n\n  /** Maximum value for the progress bar */\n  @property({ type: Number, reflect: true }) max = 100;\n\n  /** Minimum value for the progress bar */\n  @property({ type: Number, reflect: true }) min = 0;\n\n  /** Size of the progress bar (height) */\n  @property() size?: 'sm' | 'lg';\n\n  /** Where the percentage will be displayed with the progress element */\n  @property({ attribute: 'measure-location' }) measureLocation?: 'outside' | 'inside' | 'none';\n\n  /** Variant of the progress bar */\n  @property() variant?: 'success' | 'danger' | 'warning';\n\n  get #calculatedPercentage(): number {\n    const { value, min, max } = this;\n    const percentage = Math.round((value - min) / (max - min) * 100);\n    if (Number.isNaN(percentage) || percentage < 0) {\n      return 0;\n    }\n    return Math.min(percentage, 100);\n  }\n\n  get #icon() {\n    return ICONS.get(this.variant ?? '')?.icon;\n  }\n\n  override willUpdate(changed: PropertyValues<this>) {\n    if (changed.has('value') || changed.has('min') || changed.has('max')) {\n      this.#internals.ariaValueNow = this.#calculatedPercentage.toString();\n    }\n    if (this.#icon) {\n      import('@patternfly/elements/pf-icon/pf-icon.js');\n    }\n    if (this.descriptionTruncated) {\n      import('@patternfly/elements/pf-tooltip/pf-tooltip.js');\n    }\n  }\n\n  render() {\n    const { size, measureLocation, variant, description, descriptionTruncated } = this;\n    const icon = this.#icon;\n    const singleLine = description?.length === 0;\n    const pct = this.#calculatedPercentage;\n    const width = `${pct}%`;\n\n    return html`\n      <div id=\"container\" class=\"${classMap({\n          [size ?? '']: !!size,\n          [measureLocation ?? '']: !!measureLocation,\n          [variant ?? '']: !!variant,\n          singleLine,\n          descriptionTruncated,\n        })}\">\n\n        <div id=\"description\" aria-hidden=\"true\">${description ?? ''}</div>\n\n        ${!descriptionTruncated ? '' : html`\n        <pf-tooltip content=\"${this.description ?? ''}\"\n                    trigger=\"description\"></pf-tooltip>\n        `}\n\n        ${measureLocation === 'none' ? '' : html`\n        <div id=\"status\" aria-hidden=\"true\">\n          ${measureLocation !== 'inside' ? '' : width}\n          <pf-icon set=\"fas\"\n                   icon=\"${ifDefined(icon)}\"\n                   size=\"md\"\n                   ?hidden=\"${!icon}\"\n          ></pf-icon>\n        </div>\n        `}\n\n          <progress id=\"progress\"\n                    max=\"100\"\n                    value=\"${pct}\"\n                    aria-valuemin=\"0\"\n                    aria-valuenow=\"${pct}\"\n                    aria-valuemax=\"100\"\n          ></progress>\n\n          ${measureLocation !== 'inside' ? '' : html`\n          <span id=\"progress-span\"\n                style=\"${styleMap({ width })}\"\n                data-value=\"${width}\"></span>\n          `}\n      </div>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-progress': PfProgress;\n  }\n}\n"]}
+{"version":3,"file":"pf-progress.js","sourceRoot":"","sources":["pf-progress.ts"],"names":[],"mappings":"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","sourcesContent":["import type { PropertyValues } from 'lit';\nimport { LitElement, html } from 'lit';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { styleMap } from 'lit/directives/style-map.js';\n\nimport styles from './pf-progress.css';\n\nconst ICONS = new Map(Object.entries({\n  success: { icon: 'circle-check' },\n  danger: { icon: 'circle-xmark' },\n  warning: { icon: 'triangle-exclamation' },\n}));\n\n/**\n * A progress bar gives the user a visual representation of their completion status of an ongoing process or task.\n * @summary Display completion status of ongoing process or task.\n * @cssprop {<length>} --pf-c-progress--GridGap\n *          Gap between the sections of the progress bar.\n *          {@default `1rem`}\n * @cssprop {<color>} --pf-c-progress__bar--before--BackgroundColor\n *          Color of the progress bar.\n *          {@default `#06c`}\n * @cssprop {<length>} --pf-c-progress__bar--Height\n *          Height of the progress bar.\n *          {@default `1rem`}\n * @cssprop {<color>} --pf-c-progress__bar--BackgroundColor\n *          Background color of the progress bar.\n *          {@default `#ffffff`}\n * @cssprop {<color>} --pf-c-progress__status-icon--Color\n *          Color of the status icon.\n *          {@default `#151515`}\n * @cssprop {<length>} --pf-c-progress__status-icon--MarginLeft\n *          Margin left of the status icon.\n *          {@default `0.5rem`}\n * @cssprop {<length>} --pf-c-progress__indicator--Height\n *          Height of the progress bar indicator.\n *          {@default `1rem`}\n * @cssprop {<color>} --pf-c-progress__indicator--BackgroundColor\n *          Background color of the progress bar indicator.\n *          {@default `#ffffff`}\n * @cssprop {<color>} --pf-c-progress--m-success__bar--BackgroundColor\n *          Background color of the progress bar when variant is success.\n *          {@default `#3e8635`}\n * @cssprop {<color>} --pf-c-progress--m-warning__bar--BackgroundColor\n *          Background color of the progress bar when variant is warning.\n *          {@default `#f0ab00`}\n * @cssprop {<color>} --pf-c-progress--m-danger__bar--BackgroundColor\n *          Background color of the progress bar when variant is danger.\n *          {@default `#c9190b`}\n * @cssprop {<color>} --pf-c-progress--m-success__status-icon--Color\n *          Color of the status icon when variant is success.\n *          {@default `#3e8635`}\n * @cssprop {<color>} --pf-c-progress--m-warning__status-icon--Color\n *          Color of the status icon when variant is warning.\n *          {@default `#f0ab00`}\n * @cssprop {<color>} --pf-c-progress--m-danger__status-icon--Color\n *          Color of the status icon when variant is danger.\n *          {@default `#c9190b`}\n * @cssprop {<color>} --pf-c-progress--m-success--m-inside__measure--Color\n *          Color of the progress bar measure when variant is success and measure location is inside.\n *          {@default `#ffffff`}\n * @cssprop {<length>} --pf-c-progress--m-outside__measure--FontSize\n *          Font size of the progress bar measure when measure location is outside.\n *          {@default `0.875rem`}\n * @cssprop {<length>} --pf-c-progress--m-sm__bar--Height\n *          Height of the progress bar when the size is small.\n *          {@default `0.5rem`}\n * @cssprop {<length>} --pf-c-progress--m-sm__description--FontSize\n *          Font size of the progress bar description when the size is small.\n *          {@default `0.875rem`}\n * @cssprop {<length>} --pf-c-progress--m-lg__bar--Height\n *          Height of the progress bar when the size is large.\n *          {@default `1.5rem`}\n */\n@customElement('pf-progress')\nexport class PfProgress extends LitElement {\n  static readonly styles = [styles];\n\n  #internals = this.attachInternals();\n\n  /** Represents the value of the progress bar */\n  @property({ reflect: true, type: Number }) value = 0;\n\n  /** Description (title) above the progress bar */\n  @property() description?: string;\n\n  /** Indicate whether to truncate the string description (title) */\n  @property({\n    type: Boolean,\n    reflect: true,\n    attribute: 'description-truncated',\n  }) descriptionTruncated = false;\n\n  /** Maximum value for the progress bar */\n  @property({ type: Number, reflect: true }) max = 100;\n\n  /** Minimum value for the progress bar */\n  @property({ type: Number, reflect: true }) min = 0;\n\n  /** Size of the progress bar (height) */\n  @property() size?: 'sm' | 'lg';\n\n  /** Where the percentage will be displayed with the progress element */\n  @property({ attribute: 'measure-location' }) measureLocation?: 'outside' | 'inside' | 'none';\n\n  /** Variant of the progress bar */\n  @property() variant?: 'success' | 'danger' | 'warning';\n\n  get #calculatedPercentage(): number {\n    const { value, min, max } = this;\n    const percentage = Math.round((value - min) / (max - min) * 100);\n    if (Number.isNaN(percentage) || percentage < 0) {\n      return 0;\n    }\n    return Math.min(percentage, 100);\n  }\n\n  get #icon() {\n    return ICONS.get(this.variant ?? '')?.icon;\n  }\n\n  override willUpdate(changed: PropertyValues<this>) {\n    if (changed.has('value') || changed.has('min') || changed.has('max')) {\n      this.#internals.ariaValueNow = this.#calculatedPercentage.toString();\n    }\n    if (this.#icon) {\n      import('@patternfly/elements/pf-icon/pf-icon.js');\n    }\n    if (this.descriptionTruncated) {\n      import('@patternfly/elements/pf-tooltip/pf-tooltip.js');\n    }\n  }\n\n  render() {\n    const { size, measureLocation, variant, description, descriptionTruncated } = this;\n    const icon = this.#icon;\n    const singleLine = description?.length === 0;\n    const pct = this.#calculatedPercentage;\n    const width = `${pct}%`;\n\n    return html`\n      <div id=\"container\" class=\"${classMap({\n          [size ?? '']: !!size,\n          [measureLocation ?? '']: !!measureLocation,\n          [variant ?? '']: !!variant,\n          singleLine,\n          descriptionTruncated,\n        })}\">\n\n        <div id=\"description\" aria-hidden=\"true\">${description ?? ''}</div>\n\n        ${!descriptionTruncated ? '' : html`\n        <pf-tooltip content=\"${this.description ?? ''}\"\n                    trigger=\"description\"></pf-tooltip>\n        `}\n\n        ${measureLocation === 'none' ? '' : html`\n        <div id=\"status\" aria-hidden=\"true\">\n          ${measureLocation !== 'inside' ? '' : width}\n          <pf-icon set=\"fas\"\n                   icon=\"${ifDefined(icon)}\"\n                   size=\"md\"\n                   ?hidden=\"${!icon}\"\n          ></pf-icon>\n        </div>\n        `}\n\n          <progress id=\"progress\"\n                    max=\"100\"\n                    value=\"${pct}\"\n                    aria-valuemin=\"0\"\n                    aria-valuenow=\"${pct}\"\n                    aria-valuemax=\"100\"\n          ></progress>\n\n          ${measureLocation !== 'inside' ? '' : html`\n          <span id=\"progress-span\"\n                style=\"${styleMap({ width })}\"\n                data-value=\"${width}\"></span>\n          `}\n      </div>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-progress': PfProgress;\n  }\n}\n"]}

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"pf-progress.e2e.js","sourceRoot":"","sources":["pf-progress.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,WAAW,EAAE,MAAM,sDAAsD,CAAC;AAEnF,MAAM,OAAO,GAAG,aAAa,CAAC;AAE9B,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-progress';\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-progress/test/pf-progress.spec.d.ts

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

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

@@ -0,0 +1,45 @@
+import { expect, html, fixture } from '@open-wc/testing';
+import { PfProgress } from '@patternfly/elements/pf-progress/pf-progress.js';
+describe('<pf-progress>', function () {
+    let element;
+    beforeEach(async function () {
+        element = await fixture(html `
+      <pf-progress value="33"
+                  title="Progress title"
+                  label="Progress label">
+      </pf-progress>
+    `);
+    });
+    it('should upgrade', async function () {
+        const klass = customElements.get('pf-progress');
+        expect(element).to.be.an.instanceOf(klass).and.to.be.an.instanceOf(PfProgress);
+    });
+    it('should be accessible', async function () {
+        await expect(element).shadowDom.to.be.accessible();
+    });
+    it('should set the correct value on the progress bar', async function () {
+        const element = await fixture(html `
+      <pf-progress value="33">
+      </pf-progress>
+    `);
+        expect(element.value).to.equal(33);
+    });
+    it('should set the correct title on the progress bar', async function () {
+        const element = await fixture(html `
+      <pf-progress title="Progress title">
+      </pf-progress>
+    `);
+        expect(element.title).to.equal('Progress title');
+    });
+    it('should have the correct value with the max value set', async function () {
+        const max = Math.floor(Math.random() * 100);
+        const value = Math.floor(Math.random() * (max));
+        const element = await fixture(html `
+      <pf-progress value="${value}" max="${max}">
+      </pf-progress>
+    `);
+        expect(element.value).to.equal(value);
+        expect(element.max).to.equal(max);
+    });
+});
+//# sourceMappingURL=pf-progress.spec.js.map

package/pf-progress/test/pf-progress.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pf-progress.spec.js","sourceRoot":"","sources":["pf-progress.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AACzD,OAAO,EAAE,UAAU,EAAE,MAAM,iDAAiD,CAAC;AAE7E,QAAQ,CAAC,eAAe,EAAE;IACxB,IAAI,OAAmB,CAAC;IAExB,UAAU,CAAC,KAAK;QACd,OAAO,GAAG,MAAM,OAAO,CAAa,IAAI,CAAA;;;;;KAKvC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,gBAAgB,EAAE,KAAK;QACxB,MAAM,KAAK,GAAG,cAAc,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;QAChD,MAAM,CAAC,OAAO,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,UAAU,CAAC,UAAU,CAAC,CAAC;IACjF,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,sBAAsB,EAAE,KAAK;QAC9B,MAAM,MAAM,CAAC,OAAO,CAAC,CAAC,SAAS,CAAC,EAAE,CAAC,EAAE,CAAC,UAAU,EAAE,CAAC;IACrD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,kDAAkD,EAAE,KAAK;QAC1D,MAAM,OAAO,GAAG,MAAM,OAAO,CAAa,IAAI,CAAA;;;KAG7C,CAAC,CAAC;QACH,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;IACrC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,kDAAkD,EAAE,KAAK;QAC1D,MAAM,OAAO,GAAG,MAAM,OAAO,CAAa,IAAI,CAAA;;;KAG7C,CAAC,CAAC;QACH,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,gBAAgB,CAAC,CAAC;IACnD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,sDAAsD,EAAE,KAAK;QAC9D,MAAM,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,GAAG,CAAC,CAAC;QAC5C,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC;QAEhD,MAAM,OAAO,GAAG,MAAM,OAAO,CAAa,IAAI,CAAA;4BACtB,KAAK,UAAU,GAAG;;KAEzC,CAAC,CAAC;QACH,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;QACtC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IACpC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { expect, html, fixture } from '@open-wc/testing';\nimport { PfProgress } from '@patternfly/elements/pf-progress/pf-progress.js';\n\ndescribe('<pf-progress>', function() {\n  let element: PfProgress;\n\n  beforeEach(async function() {\n    element = await fixture<PfProgress>(html`\n      <pf-progress value=\"33\"\n                  title=\"Progress title\"\n                  label=\"Progress label\">\n      </pf-progress>\n    `);\n  });\n\n  it('should upgrade', async function() {\n    const klass = customElements.get('pf-progress');\n    expect(element).to.be.an.instanceOf(klass).and.to.be.an.instanceOf(PfProgress);\n  });\n\n  it('should be accessible', async function() {\n    await expect(element).shadowDom.to.be.accessible();\n  });\n\n  it('should set the correct value on the progress bar', async function() {\n    const element = await fixture<PfProgress>(html`\n      <pf-progress value=\"33\">\n      </pf-progress>\n    `);\n    expect(element.value).to.equal(33);\n  });\n\n  it('should set the correct title on the progress bar', async function() {\n    const element = await fixture<PfProgress>(html`\n      <pf-progress title=\"Progress title\">\n      </pf-progress>\n    `);\n    expect(element.title).to.equal('Progress title');\n  });\n\n  it('should have the correct value with the max value set', async function() {\n    const max = Math.floor(Math.random() * 100);\n    const value = Math.floor(Math.random() * (max));\n\n    const element = await fixture<PfProgress>(html`\n      <pf-progress value=\"${value}\" max=\"${max}\">\n      </pf-progress>\n    `);\n    expect(element.value).to.equal(value);\n    expect(element.max).to.equal(max);\n  });\n});\n"]}

package/pf-progress-stepper/pf-progress-step.d.ts

@@ -23,7 +23,7 @@ export declare class PfProgressStep extends LitElement {
     variant?: 'pending' | 'info' | 'success' | 'warning' | 'danger';
     /** Indicates if this item is the current active item. */
     current: boolean;
-    render(): import("lit").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
     updated(changed: PropertyValues<this>): void;
 }
 declare global {

package/pf-progress-stepper/pf-progress-stepper.d.ts

@@ -16,7 +16,7 @@ export declare class PfProgressStepper extends LitElement {
     compact: boolean;
     get value(): number;
     constructor();
-    render(): import("lit").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/pf-progress-stepper/test/pf-progress-stepper.e2e.d.ts

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

package/pf-progress-stepper/test/pf-progress-stepper.e2e.js

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

package/pf-progress-stepper/test/pf-progress-stepper.e2e.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pf-progress-stepper.e2e.js","sourceRoot":"","sources":["pf-progress-stepper.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-progress-stepper';\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-progress-stepper/test/pf-progress-stepper.spec.d.ts

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