@patternfly/elements 3.0.1 → 4.0.0

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

@@ -1,5 +1,6 @@
 import { test } from '@playwright/test';
 import { PfeDemoPage } from '@patternfly/pfe-tools/test/playwright/PfeDemoPage.js';
+import { SSRPage } from '@patternfly/pfe-tools/test/playwright/SSRPage.js';
 const tagName = 'pf-popover';
 test.describe(tagName, () => {
     test('snapshot', async ({ page }) => {
@@ -7,5 +8,16 @@ test.describe(tagName, () => {
         await componentPage.navigate();
         await componentPage.snapshot();
     });
+    test('ssr', async ({ browser }) => {
+        const fixture = new SSRPage({
+            tagName,
+            browser,
+            demoDir: new URL('../demo/', import.meta.url),
+            importSpecifiers: [
+                `@patternfly/elements/${tagName}/${tagName}.js`,
+            ],
+        });
+        await fixture.snapshots();
+    });
 });
 //# sourceMappingURL=pf-popover.e2e.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"pf-popover.e2e.js","sourceRoot":"","sources":["pf-popover.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,WAAW,EAAE,MAAM,sDAAsD,CAAC;AAEnF,MAAM,OAAO,GAAG,YAAY,CAAC;AAE7B,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-popover';\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"]}
+{"version":3,"file":"pf-popover.e2e.js","sourceRoot":"","sources":["pf-popover.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,WAAW,EAAE,MAAM,sDAAsD,CAAC;AACnF,OAAO,EAAE,OAAO,EAAE,MAAM,kDAAkD,CAAC;AAE3E,MAAM,OAAO,GAAG,YAAY,CAAC;AAE7B,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;IAEH,IAAI,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE;QAChC,MAAM,OAAO,GAAG,IAAI,OAAO,CAAC;YAC1B,OAAO;YACP,OAAO;YACP,OAAO,EAAE,IAAI,GAAG,CAAC,UAAU,EAAE,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC;YAC7C,gBAAgB,EAAE;gBAChB,wBAAwB,OAAO,IAAI,OAAO,KAAK;aAChD;SACF,CAAC,CAAC;QACH,MAAM,OAAO,CAAC,SAAS,EAAE,CAAC;IAC5B,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { test } from '@playwright/test';\nimport { PfeDemoPage } from '@patternfly/pfe-tools/test/playwright/PfeDemoPage.js';\nimport { SSRPage } from '@patternfly/pfe-tools/test/playwright/SSRPage.js';\n\nconst tagName = 'pf-popover';\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  test('ssr', async ({ browser }) => {\n    const fixture = new SSRPage({\n      tagName,\n      browser,\n      demoDir: new URL('../demo/', import.meta.url),\n      importSpecifiers: [\n        `@patternfly/elements/${tagName}/${tagName}.js`,\n      ],\n    });\n    await fixture.snapshots();\n  });\n});\n"]}

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

@@ -23,17 +23,6 @@ describe('<pf-popover>', function () {
     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.

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

@@ -1 +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"]}
+{"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 } 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  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/pf-progress.d.ts

@@ -1,65 +1,65 @@
-import type { PropertyValues } from 'lit';
+import type { PropertyValues, TemplateResult } 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
+ * @cssprop {<length>} [--pf-c-progress--GridGap=1rem]
  *          Gap between the sections of the progress bar.
- *          {@default `1rem`}
- * @cssprop {<color>} --pf-c-progress__bar--before--BackgroundColor
+ *
+ * @cssprop {<color>} [--pf-c-progress__bar--before--BackgroundColor=#06c]
  *          Color of the progress bar.
- *          {@default `#06c`}
- * @cssprop {<length>} --pf-c-progress__bar--Height
+ *
+ * @cssprop {<length>} [--pf-c-progress__bar--Height=1rem]
  *          Height of the progress bar.
- *          {@default `1rem`}
- * @cssprop {<color>} --pf-c-progress__bar--BackgroundColor
+ *
+ * @cssprop {<color>} [--pf-c-progress__bar--BackgroundColor=#ffffff]
  *          Background color of the progress bar.
- *          {@default `#ffffff`}
- * @cssprop {<color>} --pf-c-progress__status-icon--Color
+ *
+ * @cssprop {<color>} [--pf-c-progress__status-icon--Color=#151515]
  *          Color of the status icon.
- *          {@default `#151515`}
- * @cssprop {<length>} --pf-c-progress__status-icon--MarginLeft
+ *
+ * @cssprop {<length>} [--pf-c-progress__status-icon--MarginLeft=0.5rem]
  *          Margin left of the status icon.
- *          {@default `0.5rem`}
- * @cssprop {<length>} --pf-c-progress__indicator--Height
+ *
+ * @cssprop {<length>} [--pf-c-progress__indicator--Height=1rem]
  *          Height of the progress bar indicator.
- *          {@default `1rem`}
- * @cssprop {<color>} --pf-c-progress__indicator--BackgroundColor
+ *
+ * @cssprop {<color>} [--pf-c-progress__indicator--BackgroundColor=#ffffff]
  *          Background color of the progress bar indicator.
- *          {@default `#ffffff`}
- * @cssprop {<color>} --pf-c-progress--m-success__bar--BackgroundColor
+ *
+ * @cssprop {<color>} [--pf-c-progress--m-success__bar--BackgroundColor=#3e8635]
  *          Background color of the progress bar when variant is success.
- *          {@default `#3e8635`}
- * @cssprop {<color>} --pf-c-progress--m-warning__bar--BackgroundColor
+ *
+ * @cssprop {<color>} [--pf-c-progress--m-warning__bar--BackgroundColor=#f0ab00]
  *          Background color of the progress bar when variant is warning.
- *          {@default `#f0ab00`}
- * @cssprop {<color>} --pf-c-progress--m-danger__bar--BackgroundColor
+ *
+ * @cssprop {<color>} [--pf-c-progress--m-danger__bar--BackgroundColor=#c9190b]
  *          Background color of the progress bar when variant is danger.
- *          {@default `#c9190b`}
- * @cssprop {<color>} --pf-c-progress--m-success__status-icon--Color
+ *
+ * @cssprop {<color>} [--pf-c-progress--m-success__status-icon--Color=#3e8635]
  *          Color of the status icon when variant is success.
- *          {@default `#3e8635`}
- * @cssprop {<color>} --pf-c-progress--m-warning__status-icon--Color
+ *
+ * @cssprop {<color>} [--pf-c-progress--m-warning__status-icon--Color=#f0ab00]
  *          Color of the status icon when variant is warning.
- *          {@default `#f0ab00`}
- * @cssprop {<color>} --pf-c-progress--m-danger__status-icon--Color
+ *
+ * @cssprop {<color>} [--pf-c-progress--m-danger__status-icon--Color=#c9190b]
  *          Color of the status icon when variant is danger.
- *          {@default `#c9190b`}
- * @cssprop {<color>} --pf-c-progress--m-success--m-inside__measure--Color
+ *
+ * @cssprop {<color>} [--pf-c-progress--m-success--m-inside__measure--Color=#ffffff]
  *          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
+ *
+ * @cssprop {<length>} [--pf-c-progress--m-outside__measure--FontSize=0.875rem]
  *          Font size of the progress bar measure when measure location is outside.
- *          {@default `0.875rem`}
- * @cssprop {<length>} --pf-c-progress--m-sm__bar--Height
+ *
+ * @cssprop {<length>} [--pf-c-progress--m-sm__bar--Height=0.5rem]
  *          Height of the progress bar when the size is small.
- *          {@default `0.5rem`}
- * @cssprop {<length>} --pf-c-progress--m-sm__description--FontSize
+ *
+ * @cssprop {<length>} [--pf-c-progress--m-sm__description--FontSize=0.875rem]
  *          Font size of the progress bar description when the size is small.
- *          {@default `0.875rem`}
- * @cssprop {<length>} --pf-c-progress--m-lg__bar--Height
+ *
+ * @cssprop {<length>} [--pf-c-progress--m-lg__bar--Height=1.5rem]
  *          Height of the progress bar when the size is large.
- *          {@default `1.5rem`}
+ *
  */
 export declare class PfProgress extends LitElement {
     #private;
@@ -81,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-html").TemplateResult<1>;
+    render(): TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/pf-progress/pf-progress.js

@@ -13,67 +13,6 @@ const ICONS = new Map(Object.entries({
     danger: { icon: 'circle-xmark' },
     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() {
         super(...arguments);
@@ -162,6 +101,7 @@ _PfProgress_icon_get = function _PfProgress_icon_get() {
     return ICONS.get(this.variant ?? '')?.icon;
 };
 PfProgress.styles = [styles];
+PfProgress.version = "4.0.0";
 __decorate([
     property({ reflect: true, type: Number })
 ], PfProgress.prototype, "value", void 0);

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 * @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"]}
+{"version":3,"file":"pf-progress.js","sourceRoot":"","sources":["pf-progress.ts"],"names":[],"mappings":"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","sourcesContent":["import type { PropertyValues, TemplateResult } 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=1rem]\n *          Gap between the sections of the progress bar.\n *\n * @cssprop {<color>} [--pf-c-progress__bar--before--BackgroundColor=#06c]\n *          Color of the progress bar.\n *\n * @cssprop {<length>} [--pf-c-progress__bar--Height=1rem]\n *          Height of the progress bar.\n *\n * @cssprop {<color>} [--pf-c-progress__bar--BackgroundColor=#ffffff]\n *          Background color of the progress bar.\n *\n * @cssprop {<color>} [--pf-c-progress__status-icon--Color=#151515]\n *          Color of the status icon.\n *\n * @cssprop {<length>} [--pf-c-progress__status-icon--MarginLeft=0.5rem]\n *          Margin left of the status icon.\n *\n * @cssprop {<length>} [--pf-c-progress__indicator--Height=1rem]\n *          Height of the progress bar indicator.\n *\n * @cssprop {<color>} [--pf-c-progress__indicator--BackgroundColor=#ffffff]\n *          Background color of the progress bar indicator.\n *\n * @cssprop {<color>} [--pf-c-progress--m-success__bar--BackgroundColor=#3e8635]\n *          Background color of the progress bar when variant is success.\n *\n * @cssprop {<color>} [--pf-c-progress--m-warning__bar--BackgroundColor=#f0ab00]\n *          Background color of the progress bar when variant is warning.\n *\n * @cssprop {<color>} [--pf-c-progress--m-danger__bar--BackgroundColor=#c9190b]\n *          Background color of the progress bar when variant is danger.\n *\n * @cssprop {<color>} [--pf-c-progress--m-success__status-icon--Color=#3e8635]\n *          Color of the status icon when variant is success.\n *\n * @cssprop {<color>} [--pf-c-progress--m-warning__status-icon--Color=#f0ab00]\n *          Color of the status icon when variant is warning.\n *\n * @cssprop {<color>} [--pf-c-progress--m-danger__status-icon--Color=#c9190b]\n *          Color of the status icon when variant is danger.\n *\n * @cssprop {<color>} [--pf-c-progress--m-success--m-inside__measure--Color=#ffffff]\n *          Color of the progress bar measure when variant is success and measure location is inside.\n *\n * @cssprop {<length>} [--pf-c-progress--m-outside__measure--FontSize=0.875rem]\n *          Font size of the progress bar measure when measure location is outside.\n *\n * @cssprop {<length>} [--pf-c-progress--m-sm__bar--Height=0.5rem]\n *          Height of the progress bar when the size is small.\n *\n * @cssprop {<length>} [--pf-c-progress--m-sm__description--FontSize=0.875rem]\n *          Font size of the progress bar description when the size is small.\n *\n * @cssprop {<length>} [--pf-c-progress--m-lg__bar--Height=1.5rem]\n *          Height of the progress bar when the size is large.\n *\n */\n@customElement('pf-progress')\nexport class PfProgress extends LitElement {\n  static readonly styles: CSSStyleSheet[] = [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>): void {\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(): TemplateResult<1> {\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.js

@@ -1,5 +1,6 @@
 import { test } from '@playwright/test';
 import { PfeDemoPage } from '@patternfly/pfe-tools/test/playwright/PfeDemoPage.js';
+import { SSRPage } from '@patternfly/pfe-tools/test/playwright/SSRPage.js';
 const tagName = 'pf-progress';
 test.describe(tagName, () => {
     test('snapshot', async ({ page }) => {
@@ -7,5 +8,16 @@ test.describe(tagName, () => {
         await componentPage.navigate();
         await componentPage.snapshot();
     });
+    test('ssr', async ({ browser }) => {
+        const fixture = new SSRPage({
+            tagName,
+            browser,
+            demoDir: new URL('../demo/', import.meta.url),
+            importSpecifiers: [
+                `@patternfly/elements/${tagName}/${tagName}.js`,
+            ],
+        });
+        await fixture.snapshots();
+    });
 });
 //# sourceMappingURL=pf-progress.e2e.js.map

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

@@ -1 +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"]}
+{"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;AACnF,OAAO,EAAE,OAAO,EAAE,MAAM,kDAAkD,CAAC;AAE3E,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;IAEH,IAAI,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE;QAChC,MAAM,OAAO,GAAG,IAAI,OAAO,CAAC;YAC1B,OAAO;YACP,OAAO;YACP,OAAO,EAAE,IAAI,GAAG,CAAC,UAAU,EAAE,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC;YAC7C,gBAAgB,EAAE;gBAChB,wBAAwB,OAAO,IAAI,OAAO,KAAK;aAChD;SACF,CAAC,CAAC;QACH,MAAM,OAAO,CAAC,SAAS,EAAE,CAAC;IAC5B,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { test } from '@playwright/test';\nimport { PfeDemoPage } from '@patternfly/pfe-tools/test/playwright/PfeDemoPage.js';\nimport { SSRPage } from '@patternfly/pfe-tools/test/playwright/SSRPage.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  test('ssr', async ({ browser }) => {\n    const fixture = new SSRPage({\n      tagName,\n      browser,\n      demoDir: new URL('../demo/', import.meta.url),\n      importSpecifiers: [\n        `@patternfly/elements/${tagName}/${tagName}.js`,\n      ],\n    });\n    await fixture.snapshots();\n  });\n});\n"]}

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

@@ -1,4 +1,4 @@
-import type { PropertyValues } from 'lit';
+import type { PropertyValues, TemplateResult } from 'lit';
 import { LitElement } from 'lit';
 /**
  * @slot -
@@ -7,7 +7,6 @@ import { LitElement } from 'lit';
  *       Longer description of the current step.
  * @slot icon
  *       Overrides the icon property
- *
  */
 export declare class PfProgressStep extends LitElement {
     #private;
@@ -23,7 +22,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-html").TemplateResult<1>;
+    render(): TemplateResult<1>;
     updated(changed: PropertyValues<this>): void;
 }
 declare global {

package/pf-progress-stepper/pf-progress-step.js

@@ -1,5 +1,4 @@
 var _PfProgressStep_slots, _PfProgressStep_internals;
-var PfProgressStep_1;
 import { __classPrivateFieldGet, __decorate } from "tslib";
 import { LitElement, html } from 'lit';
 import { customElement } from 'lit/decorators/custom-element.js';
@@ -16,16 +15,7 @@ const ICONS = new Map(Object.entries({
     warning: { icon: 'exclamation-triangle' },
     info: { icon: 'resources-full', set: 'patternfly' },
 }));
-/**
- * @slot -
- *       Short description of the current step.
- * @slot description
- *       Longer description of the current step.
- * @slot icon
- *       Overrides the icon property
- *
- */
-let PfProgressStep = PfProgressStep_1 = class PfProgressStep extends LitElement {
+let PfProgressStep = class PfProgressStep extends LitElement {
     constructor() {
         super(...arguments);
         /** Indicates if this item is the current active item. */
@@ -38,7 +28,7 @@ let PfProgressStep = PfProgressStep_1 = class PfProgressStep extends LitElement
         const icon = this.icon ?? ICONS.get(this.variant ?? 'default')?.icon;
         const set = this.iconSet ?? ICONS.get(this.variant ?? 'default')?.set;
         const { parentTagName } = this.constructor;
-        const { compact = false } = this.closest(parentTagName) ?? {};
+        const { compact = false } = this.closest?.(parentTagName) ?? {};
         return html `
       <div id="connector" class="${classMap({ compact })}">
         <slot id="icon" name="icon">
@@ -54,7 +44,6 @@ let PfProgressStep = PfProgressStep_1 = class PfProgressStep extends LitElement
     `;
     }
     updated(changed) {
-        super.updated?.(changed);
         if (changed.has('current')) {
             __classPrivateFieldGet(this, _PfProgressStep_internals, "f").ariaCurrent = String(!!this.current);
         }
@@ -64,6 +53,7 @@ _PfProgressStep_slots = new WeakMap();
 _PfProgressStep_internals = new WeakMap();
 PfProgressStep.parentTagName = 'pf-progress-stepper';
 PfProgressStep.styles = [style];
+PfProgressStep.version = "4.0.0";
 __decorate([
     property()
 ], PfProgressStep.prototype, "description", void 0);
@@ -79,7 +69,7 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true })
 ], PfProgressStep.prototype, "current", void 0);
-PfProgressStep = PfProgressStep_1 = __decorate([
+PfProgressStep = __decorate([
     customElement('pf-progress-step')
 ], PfProgressStep);
 export { PfProgressStep };

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

@@ -1 +1 @@
-{"version":3,"file":"pf-progress-step.js","sourceRoot":"","sources":["pf-progress-step.ts"],"names":[],"mappings":"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","sourcesContent":["import type { PropertyValues } from 'lit';\nimport type { PfProgressStepper } from './pf-progress-stepper.js';\n\nimport { LitElement, html } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport { SlotController } from '@patternfly/pfe-core/controllers/slot-controller.js';\nimport { InternalsController } from '@patternfly/pfe-core/controllers/internals-controller.js';\n\nimport style from './pf-progress-step.css';\n\nconst ICONS = new Map(Object.entries({\n  success: { icon: 'check-circle' },\n  danger: { icon: 'exclamation-circle' },\n  warning: { icon: 'exclamation-triangle' },\n  info: { icon: 'resources-full', set: 'patternfly' },\n}));\n\n/**\n * @slot -\n *       Short description of the current step.\n * @slot description\n *       Longer description of the current step.\n * @slot icon\n *       Overrides the icon property\n *\n */\n@customElement('pf-progress-step')\nexport class PfProgressStep extends LitElement {\n  protected static parentTagName = 'pf-progress-stepper';\n\n  static readonly styles = [style];\n\n  /** Optional extended description of the step */\n  @property() description?: string;\n\n  /** Step Icon */\n  @property() icon?: string;\n\n  /** Step icon set */\n  @property({ attribute: 'icon-set' }) iconSet?: string;\n\n  /** Describes the state of the current item */\n  @property({ reflect: true }) variant?: 'pending' | 'info' | 'success' | 'warning' | 'danger';\n\n  /** Indicates if this item is the current active item. */\n  @property({ type: Boolean, reflect: true }) current = false;\n\n  #slots = new SlotController(this, 'title', 'description');\n\n  #internals = InternalsController.of(this, { role: 'listitem' });\n\n  render() {\n    const hasDescription = !!(this.description ?? this.#slots.hasSlotted('description'));\n    const icon = this.icon ?? ICONS.get(this.variant ?? 'default')?.icon;\n    const set = this.iconSet ?? ICONS.get(this.variant ?? 'default')?.set;\n    const { parentTagName } = (this.constructor as typeof PfProgressStep);\n    const { compact = false } = this.closest<PfProgressStepper>(parentTagName) ?? {};\n    return html`\n      <div id=\"connector\" class=\"${classMap({ compact })}\">\n        <slot id=\"icon\" name=\"icon\">\n          <pf-icon ?hidden=\"${!icon}\"\n                    icon=\"${ifDefined(icon)}\"\n                    set=\"${ifDefined(set)}\"></pf-icon>\n        </slot>\n      </div>\n      <div id=\"main\" class=\"${classMap({ compact })}\">\n        <slot id=\"title\"></slot>\n        <slot id=\"description\" name=\"description\" ?hidden=\"${!hasDescription}\">${this.description}</slot>\n      </div>\n    `;\n  }\n\n  updated(changed: PropertyValues<this>) {\n    super.updated?.(changed);\n    if (changed.has('current')) {\n      this.#internals.ariaCurrent = String(!!this.current);\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-progress-step': PfProgressStep;\n  }\n}\n"]}
+{"version":3,"file":"pf-progress-step.js","sourceRoot":"","sources":["pf-progress-step.ts"],"names":[],"mappings":"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","sourcesContent":["import type { PropertyValues, TemplateResult } from 'lit';\nimport type { PfProgressStepper } from './pf-progress-stepper.js';\n\nimport { LitElement, html } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport { SlotController } from '@patternfly/pfe-core/controllers/slot-controller.js';\nimport { InternalsController } from '@patternfly/pfe-core/controllers/internals-controller.js';\n\nimport style from './pf-progress-step.css';\n\nconst ICONS = new Map(Object.entries({\n  success: { icon: 'check-circle' },\n  danger: { icon: 'exclamation-circle' },\n  warning: { icon: 'exclamation-triangle' },\n  info: { icon: 'resources-full', set: 'patternfly' },\n}));\n\n/**\n * @slot -\n *       Short description of the current step.\n * @slot description\n *       Longer description of the current step.\n * @slot icon\n *       Overrides the icon property\n */\n@customElement('pf-progress-step')\nexport class PfProgressStep extends LitElement {\n  protected static parentTagName = 'pf-progress-stepper';\n\n  static readonly styles: CSSStyleSheet[] = [style];\n\n  /** Optional extended description of the step */\n  @property() description?: string;\n\n  /** Step Icon */\n  @property() icon?: string;\n\n  /** Step icon set */\n  @property({ attribute: 'icon-set' }) iconSet?: string;\n\n  /** Describes the state of the current item */\n  @property({ reflect: true }) variant?: 'pending' | 'info' | 'success' | 'warning' | 'danger';\n\n  /** Indicates if this item is the current active item. */\n  @property({ type: Boolean, reflect: true }) current = false;\n\n  #slots = new SlotController(this, 'title', 'description');\n\n  #internals = InternalsController.of(this, { role: 'listitem' });\n\n  render(): TemplateResult<1> {\n    const hasDescription = !!(this.description ?? this.#slots.hasSlotted('description'));\n    const icon = this.icon ?? ICONS.get(this.variant ?? 'default')?.icon;\n    const set = this.iconSet ?? ICONS.get(this.variant ?? 'default')?.set;\n    const { parentTagName } = (this.constructor as typeof PfProgressStep);\n    const { compact = false } = this.closest?.<PfProgressStepper>(parentTagName) ?? {};\n    return html`\n      <div id=\"connector\" class=\"${classMap({ compact })}\">\n        <slot id=\"icon\" name=\"icon\">\n          <pf-icon ?hidden=\"${!icon}\"\n                    icon=\"${ifDefined(icon)}\"\n                    set=\"${ifDefined(set)}\"></pf-icon>\n        </slot>\n      </div>\n      <div id=\"main\" class=\"${classMap({ compact })}\">\n        <slot id=\"title\"></slot>\n        <slot id=\"description\" name=\"description\" ?hidden=\"${!hasDescription}\">${this.description}</slot>\n      </div>\n    `;\n  }\n\n  updated(changed: PropertyValues<this>): void {\n    if (changed.has('current')) {\n      this.#internals.ariaCurrent = String(!!this.current);\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-progress-step': PfProgressStep;\n  }\n}\n"]}