@patternfly/elements 3.0.1 → 4.0.0

package/pf-label/test/pf-label.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-label';
 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-label.e2e.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"pf-label.e2e.js","sourceRoot":"","sources":["pf-label.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,WAAW,EAAE,MAAM,sDAAsD,CAAC;AAEnF,MAAM,OAAO,GAAG,UAAU,CAAC;AAE3B,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE,GAAG,EAAE;IAC1B,IAAI,CAAC,UAAU,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;QAClC,MAAM,aAAa,GAAG,IAAI,WAAW,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;QACrD,MAAM,aAAa,CAAC,QAAQ,EAAE,CAAC;QAC/B,MAAM,aAAa,CAAC,QAAQ,EAAE,CAAC;IACjC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { test } from '@playwright/test';\nimport { PfeDemoPage } from '@patternfly/pfe-tools/test/playwright/PfeDemoPage.js';\n\nconst tagName = 'pf-label';\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-label.e2e.js","sourceRoot":"","sources":["pf-label.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,UAAU,CAAC;AAE3B,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE,GAAG,EAAE;IAC1B,IAAI,CAAC,UAAU,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;QAClC,MAAM,aAAa,GAAG,IAAI,WAAW,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;QACrD,MAAM,aAAa,CAAC,QAAQ,EAAE,CAAC;QAC/B,MAAM,aAAa,CAAC,QAAQ,EAAE,CAAC;IACjC,CAAC,CAAC,CAAC;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-label';\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-label/test/pf-label.spec.js

@@ -16,12 +16,6 @@ const exampleWithColorAttributeEmpty = html `
 const exampleWithOutlineAttribute = html `
   <pf-label variant="outline">Default Outline</pf-label>
 `;
-const exampleWithIconAttribute = html `
-  <pf-label icon="rh-icon-virtual-storage-stack">Default Icon</pf-label>
-`;
-const exampleWithIconAttributeEmpty = html `
-  <pf-label icon="">Default</pf-label>
-`;
 const exampleWithCompactAttribute = html `
   <pf-label compact>Default Compact</pf-label>
 `;
@@ -81,17 +75,33 @@ describe('<pf-label>', function () {
         expect(getColor(container, 'background-color')).to.deep.equal(hexToRgb('#ffffff'));
         expect(beforeStyles.getPropertyValue('border-color')).to.equal('rgb(210, 210, 210)');
     });
-    it('should render a pf-icon if the icon attribute is present and valid', async function () {
-        const el = await createFixture(exampleWithIconAttribute);
-        await el.updateComplete;
-        const icon = el.shadowRoot.querySelector('pf-icon');
-        expect(icon.icon).to.equal(el.icon);
+    describe('with valid icon attribute', function () {
+        let element;
+        beforeEach(async function () {
+            element = await createFixture(html `
+        <pf-label icon="rh-icon-virtual-storage-stack">Default Icon</pf-label>
+      `);
+            element.updateComplete;
+        });
+        it('should render a pf-icon', async function () {
+            const icon = element.shadowRoot.querySelector('pf-icon');
+            expect(icon.hidden).to.be.false;
+            expect(icon.icon).to.equal(element.icon);
+        });
     });
-    it('should not render a pf-icon if the icon attribute is present but empty', async function () {
-        const el = await createFixture(exampleWithIconAttributeEmpty);
-        await el.updateComplete;
-        const icon = el.shadowRoot.querySelector('pf-icon');
-        expect(icon).to.be.equal(null);
+    describe('with empty icon attribute', function () {
+        let element;
+        beforeEach(async function () {
+            element = await createFixture(html `
+        <pf-label icon="">Default</pf-label>
+      `);
+            element.updateComplete;
+        });
+        it('should not render a pf-icon', async function () {
+            const icon = element.shadowRoot.querySelector('pf-icon');
+            expect(icon.hidden).to.be.true;
+            expect(icon.icon).to.be.undefined;
+        });
     });
     it('should display compact version if the attribute is-compact is present', async function () {
         const el = await createFixture(exampleWithCompactAttribute);

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

@@ -1 +1 @@
-{"version":3,"file":"pf-label.spec.js","sourceRoot":"","sources":["pf-label.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { expect, html } from '@open-wc/testing';\nimport { createFixture } from '@patternfly/pfe-tools/test/create-fixture.js';\nimport { getColor, hexToRgb } from '@patternfly/pfe-tools/test/hex-to-rgb.js';\nimport { PfLabel } from '@patternfly/elements/pf-label/pf-label.js';\nimport { PfIcon } from '@patternfly/elements/pf-icon/pf-icon.js';\n\nimport '@patternfly/pfe-tools/test/stub-logger.js';\n\nconst example = html`\n  <pf-label>Default</pf-label>\n`;\n\nconst exampleWithColorAttribute = html`\n  <pf-label color=\"red\">Red</pf-label>\n`;\n\nconst exampleWithColorAttributeEmpty = html`\n  <pf-label color=\"\">Default</pf-label>\n`;\n\nconst exampleWithOutlineAttribute = html`\n  <pf-label variant=\"outline\">Default Outline</pf-label>\n`;\n\nconst exampleWithIconAttribute = html`\n  <pf-label icon=\"rh-icon-virtual-storage-stack\">Default Icon</pf-label>\n`;\n\nconst exampleWithIconAttributeEmpty = html`\n  <pf-label icon=\"\">Default</pf-label>\n`;\n\nconst exampleWithCompactAttribute = html`\n  <pf-label compact>Default Compact</pf-label>\n`;\n\n\ndescribe('<pf-label>', function() {\n  before(function() {\n    // replace the default built-in icon set resolveIconName function\n    // with one that loads local icons.  we don't want tests dependent on\n    // prod servers.\n    PfIcon.addIconSet('rh', function(name: string) {\n      return new URL(`/elements/pf-icon/test/${name.replace('rh', 'rh-icon')}.svg`);\n    });\n  });\n\n  it('imperatively instantiates', function() {\n    expect(document.createElement('pf-label')).to.be.an.instanceof(PfLabel);\n  });\n\n  it('should upgrade', async function() {\n    const el = await createFixture<PfLabel>(example);\n    const klass = customElements.get('pf-label');\n    expect(el)\n        .to.be.an.instanceOf(klass)\n        .and\n        .to.be.an.instanceOf(PfLabel);\n  });\n\n  it('should display default variant', async function() {\n    const el = await createFixture<PfLabel>(example);\n    await el.updateComplete;\n    const container = el.shadowRoot!.querySelector('#container')!;\n    const beforeStyles = getComputedStyle(container, '::before');\n\n    expect(getColor(container, 'color')).to.deep.equal(hexToRgb('#151515'));\n    expect(getColor(container, 'background-color')).to.deep.equal(hexToRgb('#f5f5f5'));\n    expect(beforeStyles.getPropertyValue('border-color')).to.equal('rgb(210, 210, 210)');\n  });\n\n  it('should display color variant if color attribute is present', async function() {\n    const el = await createFixture<PfLabel>(exampleWithColorAttribute);\n    await el.updateComplete;\n    const container = el.shadowRoot!.querySelector('#container')!;\n    const beforeStyles = getComputedStyle(container, '::before');\n\n    expect(getColor(container, 'color')).to.deep.equal(hexToRgb('#7d1007'));\n    expect(getColor(container, 'background-color')).to.deep.equal(hexToRgb('#faeae8'));\n    expect(beforeStyles.getPropertyValue('border-color')).to.equal('rgb(201, 25, 11)');\n  });\n\n  it('should display default variant if color attribute is present but empty', async function() {\n    const el = await createFixture<PfLabel>( exampleWithColorAttributeEmpty);\n    await el.updateComplete;\n    const container = el.shadowRoot!.querySelector('#container')!;\n    const beforeStyles = getComputedStyle(container, '::before');\n\n    expect(getColor(container, 'color')).to.deep.equal(hexToRgb('#151515'));\n    expect(getColor(container, 'background-color')).to.deep.equal(hexToRgb('#f5f5f5'));\n    expect(beforeStyles.getPropertyValue('border-color')).to.equal('rgb(210, 210, 210)');\n  });\n\n  it('should display outline variant if the attribute outline is present', async function() {\n    const el = await createFixture<PfLabel>(exampleWithOutlineAttribute);\n    await el.updateComplete;\n    const container = el.shadowRoot!.querySelector('#container')!;\n    const beforeStyles = getComputedStyle(container, '::before');\n\n    expect(getColor(container, 'color')).to.deep.equal(hexToRgb('#151515'));\n    expect(getColor(container, 'background-color')).to.deep.equal(hexToRgb('#ffffff'));\n    expect(beforeStyles.getPropertyValue('border-color')).to.equal('rgb(210, 210, 210)');\n  });\n\n  it('should render a pf-icon if the icon attribute is present and valid', async function() {\n    const el = await createFixture<PfLabel>(exampleWithIconAttribute);\n    await el.updateComplete;\n    const icon = el.shadowRoot!.querySelector('pf-icon')!;\n    expect(icon.icon).to.equal(el.icon);\n  });\n\n  it('should not render a pf-icon if the icon attribute is present but empty', async function() {\n    const el = await createFixture<PfLabel>(exampleWithIconAttributeEmpty);\n    await el.updateComplete;\n    const icon = el.shadowRoot!.querySelector('pf-icon')!;\n    expect(icon).to.be.equal(null);\n  });\n\n  it('should display compact version if the attribute is-compact is present', async function() {\n    const el = await createFixture<PfLabel>(exampleWithCompactAttribute);\n    await el.updateComplete;\n    const container = el.shadowRoot!.querySelector('#container')!;\n    const beforeStyles = getComputedStyle(container, '::before');\n    const containerStyles = getComputedStyle(container);\n\n    expect(getColor(container, 'color')).to.deep.equal(hexToRgb('#151515'));\n    expect(getColor(container, 'background-color')).to.deep.equal(hexToRgb('#f5f5f5'));\n    expect(beforeStyles.getPropertyValue('border-color')).to.equal('rgb(210, 210, 210)');\n\n    expect(containerStyles.getPropertyValue('padding-top')).to.equal('0px');\n    expect(containerStyles.getPropertyValue('padding-right')).to.equal('8px'); // 0.5rem = 8px @ 16px browser default\n    expect(containerStyles.getPropertyValue('padding-bottom')).to.equal('0px');\n    expect(containerStyles.getPropertyValue('padding-left')).to.equal('8px'); // 0.5rem = 8px @ 16px browser default\n  });\n});\n"]}
+{"version":3,"file":"pf-label.spec.js","sourceRoot":"","sources":["pf-label.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { expect, html } from '@open-wc/testing';\nimport { createFixture } from '@patternfly/pfe-tools/test/create-fixture.js';\nimport { getColor, hexToRgb } from '@patternfly/pfe-tools/test/hex-to-rgb.js';\nimport { PfLabel } from '@patternfly/elements/pf-label/pf-label.js';\nimport { PfIcon } from '@patternfly/elements/pf-icon/pf-icon.js';\n\nimport '@patternfly/pfe-tools/test/stub-logger.js';\n\nconst example = html`\n  <pf-label>Default</pf-label>\n`;\n\nconst exampleWithColorAttribute = html`\n  <pf-label color=\"red\">Red</pf-label>\n`;\n\nconst exampleWithColorAttributeEmpty = html`\n  <pf-label color=\"\">Default</pf-label>\n`;\n\nconst exampleWithOutlineAttribute = html`\n  <pf-label variant=\"outline\">Default Outline</pf-label>\n`;\n\nconst exampleWithCompactAttribute = html`\n  <pf-label compact>Default Compact</pf-label>\n`;\n\n\ndescribe('<pf-label>', function() {\n  before(function() {\n    // replace the default built-in icon set resolveIconName function\n    // with one that loads local icons.  we don't want tests dependent on\n    // prod servers.\n    PfIcon.addIconSet('rh', function(name: string) {\n      return new URL(`/elements/pf-icon/test/${name.replace('rh', 'rh-icon')}.svg`);\n    });\n  });\n\n  it('imperatively instantiates', function() {\n    expect(document.createElement('pf-label')).to.be.an.instanceof(PfLabel);\n  });\n\n  it('should upgrade', async function() {\n    const el = await createFixture<PfLabel>(example);\n    const klass = customElements.get('pf-label');\n    expect(el)\n        .to.be.an.instanceOf(klass)\n        .and\n        .to.be.an.instanceOf(PfLabel);\n  });\n\n  it('should display default variant', async function() {\n    const el = await createFixture<PfLabel>(example);\n    await el.updateComplete;\n    const container = el.shadowRoot!.querySelector('#container')!;\n    const beforeStyles = getComputedStyle(container, '::before');\n\n    expect(getColor(container, 'color')).to.deep.equal(hexToRgb('#151515'));\n    expect(getColor(container, 'background-color')).to.deep.equal(hexToRgb('#f5f5f5'));\n    expect(beforeStyles.getPropertyValue('border-color')).to.equal('rgb(210, 210, 210)');\n  });\n\n  it('should display color variant if color attribute is present', async function() {\n    const el = await createFixture<PfLabel>(exampleWithColorAttribute);\n    await el.updateComplete;\n    const container = el.shadowRoot!.querySelector('#container')!;\n    const beforeStyles = getComputedStyle(container, '::before');\n\n    expect(getColor(container, 'color')).to.deep.equal(hexToRgb('#7d1007'));\n    expect(getColor(container, 'background-color')).to.deep.equal(hexToRgb('#faeae8'));\n    expect(beforeStyles.getPropertyValue('border-color')).to.equal('rgb(201, 25, 11)');\n  });\n\n  it('should display default variant if color attribute is present but empty', async function() {\n    const el = await createFixture<PfLabel>( exampleWithColorAttributeEmpty);\n    await el.updateComplete;\n    const container = el.shadowRoot!.querySelector('#container')!;\n    const beforeStyles = getComputedStyle(container, '::before');\n\n    expect(getColor(container, 'color')).to.deep.equal(hexToRgb('#151515'));\n    expect(getColor(container, 'background-color')).to.deep.equal(hexToRgb('#f5f5f5'));\n    expect(beforeStyles.getPropertyValue('border-color')).to.equal('rgb(210, 210, 210)');\n  });\n\n  it('should display outline variant if the attribute outline is present', async function() {\n    const el = await createFixture<PfLabel>(exampleWithOutlineAttribute);\n    await el.updateComplete;\n    const container = el.shadowRoot!.querySelector('#container')!;\n    const beforeStyles = getComputedStyle(container, '::before');\n\n    expect(getColor(container, 'color')).to.deep.equal(hexToRgb('#151515'));\n    expect(getColor(container, 'background-color')).to.deep.equal(hexToRgb('#ffffff'));\n    expect(beforeStyles.getPropertyValue('border-color')).to.equal('rgb(210, 210, 210)');\n  });\n\n  describe('with valid icon attribute', function() {\n    let element: PfLabel;\n    beforeEach(async function() {\n      element = await createFixture<PfLabel>(html`\n        <pf-label icon=\"rh-icon-virtual-storage-stack\">Default Icon</pf-label>\n      `);\n      element.updateComplete;\n    });\n    it('should render a pf-icon', async function() {\n      const icon = element.shadowRoot!.querySelector('pf-icon')!;\n      expect(icon.hidden).to.be.false;\n      expect(icon.icon).to.equal(element.icon);\n    });\n  });\n\n  describe('with empty icon attribute', function() {\n    let element: PfLabel;\n    beforeEach(async function() {\n      element = await createFixture<PfLabel>(html`\n        <pf-label icon=\"\">Default</pf-label>\n      `);\n      element.updateComplete;\n    });\n    it('should not render a pf-icon', async function() {\n      const icon = element.shadowRoot!.querySelector('pf-icon')!;\n      expect(icon.hidden).to.be.true;\n      expect(icon.icon).to.be.undefined;\n    });\n  });\n\n  it('should display compact version if the attribute is-compact is present', async function() {\n    const el = await createFixture<PfLabel>(exampleWithCompactAttribute);\n    await el.updateComplete;\n    const container = el.shadowRoot!.querySelector('#container')!;\n    const beforeStyles = getComputedStyle(container, '::before');\n    const containerStyles = getComputedStyle(container);\n\n    expect(getColor(container, 'color')).to.deep.equal(hexToRgb('#151515'));\n    expect(getColor(container, 'background-color')).to.deep.equal(hexToRgb('#f5f5f5'));\n    expect(beforeStyles.getPropertyValue('border-color')).to.equal('rgb(210, 210, 210)');\n\n    expect(containerStyles.getPropertyValue('padding-top')).to.equal('0px');\n    expect(containerStyles.getPropertyValue('padding-right')).to.equal('8px'); // 0.5rem = 8px @ 16px browser default\n    expect(containerStyles.getPropertyValue('padding-bottom')).to.equal('0px');\n    expect(containerStyles.getPropertyValue('padding-left')).to.equal('8px'); // 0.5rem = 8px @ 16px browser default\n  });\n});\n"]}

package/pf-modal/pf-modal.d.ts

@@ -1,4 +1,4 @@
-import { LitElement } from 'lit';
+import { LitElement, type TemplateResult } from 'lit';
 import { ComposedEvent } from '@patternfly/pfe-core';
 export declare class ModalCancelEvent extends ComposedEvent {
     constructor();
@@ -29,30 +29,24 @@ export declare class ModalOpenEvent extends ComposedEvent {
  * @csspart description - The container for the optional dialog description in the header
  * @csspart close-button - The modal's close button
  * @csspart footer - Actions footer container
- * @cssprop {<length>} --pf-c-modal-box--ZIndex {@default 500}
- * @cssprop {<length>} --pf-c-modal-box--Width - Width of the modal {@default calc(100% - 2rem)}
- * @cssprop {<length>} --pf-c-modal-box--MaxWidth - Max width of the modal {@default calc(100% - 2rem)}
- * @cssprop {<length>} --pf-c-modal-box--m-sm--sm--MaxWidth - Max width of the small variant modal {@default 35rem}
- * @cssprop {<length>} --pf-c-modal-box--m-md--MaxWidth - Max width of the small variant modal {@default 52.5rem}
- * @cssprop {<length>} --pf-c-modal-box--m-lg--lg--MaxWidth - Max width of the large variant modal {@default 70rem}
- * @cssprop {<length>} --pf-c-modal-box--MaxHeight - Max height of the modal {@default calc(100% - 3rem)}
- * @cssprop {<length>} --pf-c-modal-box--BoxShadow - {@default var(--pf-global--BoxShadow--xl)}
- * @cssprop {<length>} --pf-c-modal-box__title--FontSize - {@default 1.5rem}
- * @cssprop {<length>} --pf-c-modal-box--m-align-top--MarginTop - {@default 2rem}
+ * @cssprop {<length>} [--pf-c-modal-box--ZIndex=500]
+ * @cssprop {<length>} [--pf-c-modal-box--Width=calc(100 - 2rem)] - Width of the modal
+ * @cssprop {<length>} [--pf-c-modal-box--MaxWidth=calc(100 - 2rem)] - Max width of the modal
+ * @cssprop {<length>} [--pf-c-modal-box--m-sm--sm--MaxWidth=35rem] - Max width of the small variant modal
+ * @cssprop {<length>} [--pf-c-modal-box--m-md--MaxWidth=52.5rem] - Max width of the small variant modal
+ * @cssprop {<length>} [--pf-c-modal-box--m-lg--lg--MaxWidth=70rem] - Max width of the large variant modal
+ * @cssprop {<length>} [--pf-c-modal-box--MaxHeight=calc(100 - 3rem)] - Max height of the modal
+ * @cssprop {<length>} [--pf-c-modal-box--BoxShadow=var(--pf-global--BoxShadow--xl)] -
+ * @cssprop {<length>} [--pf-c-modal-box__title--FontSize=1.5rem] -
+ * @cssprop {<length>} [--pf-c-modal-box--m-align-top--MarginTop=2rem] -
  * @cssprop {<length>} --pf-c-modal-box--m-align-top--MaxWidth
  * @cssprop {<length>} --pf-c-modal-box--m-align-top--MaxHeight
- * @cssprop {<color>} --pf-c-modal-box--BackgroundColor - {@default #fff}
+ * @cssprop {<color>} [--pf-c-modal-box--BackgroundColor=#fff] -
  * @cssprop --pf-c-modal-box__title--FontFamily - default font family for header-slotted headings
  */
 export declare class PfModal extends LitElement implements HTMLDialogElement {
     #private;
-    static readonly shadowRootOptions: {
-        delegatesFocus: boolean;
-        mode: ShadowRootMode;
-        slotAssignment?: SlotAssignmentMode | undefined;
-        customElements?: CustomElementRegistry | undefined;
-        registry?: CustomElementRegistry | undefined;
-    };
+    static readonly shadowRootOptions: ShadowRootInit;
     static readonly styles: CSSStyleSheet[];
     /** Should the dialog close when user clicks outside the dialog? */
     protected static closeOnOutsideClick: boolean;
@@ -74,11 +68,11 @@ export declare class PfModal extends LitElement implements HTMLDialogElement {
     private dialog?;
     private closeButton?;
     connectedCallback(): void;
-    render(): import("lit-html").TemplateResult<1>;
+    render(): TemplateResult<1>;
     disconnectedCallback(): void;
     protected _init(): Promise<void>;
-    protected _openChanged(oldValue?: boolean, newValue?: boolean): Promise<void>;
-    protected _triggerChanged(): void;
+    protected openChanged(oldValue?: boolean, newValue?: boolean): Promise<void>;
+    protected triggerChanged(): void;
     private onTriggerClick;
     private onClick;
     private onKeydown;
@@ -104,6 +98,7 @@ export declare class PfModal extends LitElement implements HTMLDialogElement {
      * ```js
      * modal.close();
      * ```
+     * @param returnValue dialog return value
      */
     close(returnValue?: string): void;
 }

package/pf-modal/pf-modal.js

@@ -1,5 +1,4 @@
 var _PfModal_headerId, _PfModal_triggerElement, _PfModal_header, _PfModal_body, _PfModal_headings, _PfModal_cancelling, _PfModal_slots;
-var PfModal_1;
 import { __classPrivateFieldGet, __classPrivateFieldSet, __decorate } from "tslib";
 import { LitElement, html } from 'lit';
 import { customElement } from 'lit/decorators/custom-element.js';
@@ -8,7 +7,7 @@ import { query } from 'lit/decorators/query.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { ComposedEvent } from '@patternfly/pfe-core';
-import { bound, initializer, observed } from '@patternfly/pfe-core/decorators.js';
+import { bound, initializer, observes } from '@patternfly/pfe-core/decorators.js';
 import { getRandomId } from '@patternfly/pfe-core/functions/random.js';
 import { SlotController } from '@patternfly/pfe-core/controllers/slot-controller.js';
 import { css } from "lit";
@@ -31,38 +30,7 @@ export class ModalOpenEvent extends ComposedEvent {
         this.trigger = trigger;
     }
 }
-/**
- * A **modal** displays important information to a user without requiring them to navigate
- * to a new page.
- * @summary Displays information or helps a user focus on a task
- * @slot - The default slot can contain any type of content. When the header is not present this unnamed slot appear at the top of the modal window (to the left of the close button). Otherwise it will appear beneath the header.
- * @slot header - The header is an optional slot that appears at the top of the modal window. It should be a header tag (h2-h6).
- * @slot footer - Optional footer content. Good place to put action buttons.
- * @fires {ModalOpenEvent} open - Fires when a user clicks on the trigger or manually opens a modal.
- * @fires {ModalCloseEvent} close - Fires when either a user clicks on either the close button or the overlay or manually closes a modal.
- * @csspart overlay - The modal overlay which lies under the dialog and above the page body
- * @csspart dialog - The dialog element
- * @csspart content - The container for the dialog content
- * @csspart header - The container for the optional dialog header
- * @csspart description - The container for the optional dialog description in the header
- * @csspart close-button - The modal's close button
- * @csspart footer - Actions footer container
- * @cssprop {<length>} --pf-c-modal-box--ZIndex {@default 500}
- * @cssprop {<length>} --pf-c-modal-box--Width - Width of the modal {@default calc(100% - 2rem)}
- * @cssprop {<length>} --pf-c-modal-box--MaxWidth - Max width of the modal {@default calc(100% - 2rem)}
- * @cssprop {<length>} --pf-c-modal-box--m-sm--sm--MaxWidth - Max width of the small variant modal {@default 35rem}
- * @cssprop {<length>} --pf-c-modal-box--m-md--MaxWidth - Max width of the small variant modal {@default 52.5rem}
- * @cssprop {<length>} --pf-c-modal-box--m-lg--lg--MaxWidth - Max width of the large variant modal {@default 70rem}
- * @cssprop {<length>} --pf-c-modal-box--MaxHeight - Max height of the modal {@default calc(100% - 3rem)}
- * @cssprop {<length>} --pf-c-modal-box--BoxShadow - {@default var(--pf-global--BoxShadow--xl)}
- * @cssprop {<length>} --pf-c-modal-box__title--FontSize - {@default 1.5rem}
- * @cssprop {<length>} --pf-c-modal-box--m-align-top--MarginTop - {@default 2rem}
- * @cssprop {<length>} --pf-c-modal-box--m-align-top--MaxWidth
- * @cssprop {<length>} --pf-c-modal-box--m-align-top--MaxHeight
- * @cssprop {<color>} --pf-c-modal-box--BackgroundColor - {@default #fff}
- * @cssprop --pf-c-modal-box__title--FontFamily - default font family for header-slotted headings
- */
-let PfModal = PfModal_1 = class PfModal extends LitElement {
+let PfModal = class PfModal extends LitElement {
     constructor() {
         super(...arguments);
         this.open = false;
@@ -146,7 +114,7 @@ let PfModal = PfModal_1 = class PfModal extends LitElement {
             __classPrivateFieldGet(this, _PfModal_headings, "f")[0].id = __classPrivateFieldGet(this, _PfModal_headerId, "f");
         }
     }
-    async _openChanged(oldValue, newValue) {
+    async openChanged(oldValue, newValue) {
         // loosening types to prevent running these effects in unexpected circumstances
         // eslint-disable-next-line eqeqeq
         if (oldValue == null || newValue == null || oldValue == newValue) {
@@ -170,7 +138,7 @@ let PfModal = PfModal_1 = class PfModal extends LitElement {
             this.dispatchEvent(__classPrivateFieldGet(this, _PfModal_cancelling, "f") ? new ModalCancelEvent() : new ModalCloseEvent());
         }
     }
-    _triggerChanged() {
+    triggerChanged() {
         if (this.trigger) {
             __classPrivateFieldSet(this, _PfModal_triggerElement, this.getRootNode()
                 .getElementById(this.trigger), "f");
@@ -251,6 +219,7 @@ let PfModal = PfModal_1 = class PfModal extends LitElement {
      * ```js
      * modal.close();
      * ```
+     * @param returnValue dialog return value
      */
     close(returnValue) {
         if (typeof returnValue === 'string') {
@@ -273,6 +242,7 @@ PfModal.shadowRootOptions = {
 PfModal.styles = [style];
 /** Should the dialog close when user clicks outside the dialog? */
 PfModal.closeOnOutsideClick = false;
+PfModal.version = "4.0.0";
 __decorate([
     property({ reflect: true })
 ], PfModal.prototype, "variant", void 0);
@@ -280,11 +250,9 @@ __decorate([
     property({ reflect: true })
 ], PfModal.prototype, "position", void 0);
 __decorate([
-    observed,
     property({ type: Boolean, reflect: true })
 ], PfModal.prototype, "open", void 0);
 __decorate([
-    observed,
     property()
 ], PfModal.prototype, "trigger", void 0);
 __decorate([
@@ -299,6 +267,12 @@ __decorate([
 __decorate([
     initializer()
 ], PfModal.prototype, "_init", null);
+__decorate([
+    observes('open')
+], PfModal.prototype, "openChanged", null);
+__decorate([
+    observes('trigger')
+], PfModal.prototype, "triggerChanged", null);
 __decorate([
     bound
 ], PfModal.prototype, "onTriggerClick", null);
@@ -320,7 +294,7 @@ __decorate([
 __decorate([
     bound
 ], PfModal.prototype, "close", null);
-PfModal = PfModal_1 = __decorate([
+PfModal = __decorate([
     customElement('pf-modal')
 ], PfModal);
 export { PfModal };

package/pf-modal/pf-modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"pf-modal.js","sourceRoot":"","sources":["pf-modal.ts"],"names":[],"mappings":";;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACtD,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAEvD,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,oCAAoC,CAAC;AAClF,OAAO,EAAE,WAAW,EAAE,MAAM,0CAA0C,CAAC;AAEvE,OAAO,EAAE,cAAc,EAAE,MAAM,qDAAqD,CAAC;;;AAIrF,MAAM,OAAO,gBAAiB,SAAQ,aAAa;IACjD;QACE,KAAK,CAAC,QAAQ,CAAC,CAAC;IAClB,CAAC;CACF;AAED,MAAM,OAAO,eAAgB,SAAQ,aAAa;IAChD;QACE,KAAK,CAAC,OAAO,CAAC,CAAC;IACjB,CAAC;CACF;AAED,MAAM,OAAO,cAAe,SAAQ,aAAa;IAC/C;IACE,4DAA4D;IACrD,OAA2B;QAElC,KAAK,CAAC,MAAM,CAAC,CAAC;QAFP,YAAO,GAAP,OAAO,CAAoB;IAGpC,CAAC;CACF;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AAEI,IAAM,OAAO,eAAb,MAAM,OAAQ,SAAQ,UAAU;IAAhC;;QAuBuC,SAAI,GAAG,KAAK,CAAC;QAMzD,0FAA0F;QACnF,gBAAW,GAAG,EAAE,CAAC;QAMxB,4BAAY,WAAW,EAAE,EAAC;QAC1B,kCAAsC,IAAI,EAAC;QAC3C,0BAA8B,IAAI,EAAC;QACnC,wBAAmB,EAAE,EAAC;QACtB,4BAAuB,EAAE,EAAC;QAC1B,8BAAc,KAAK,EAAC;QAEpB,yBAAS,IAAI,cAAc,CAAC,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,aAAa,EAAE,QAAQ,CAAC,EAAC;IA8M7E,CAAC;IA5MC,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;QACjD,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;IAC/C,CAAC;IAED,MAAM;QACJ,MAAM,QAAQ,GAAG,CAAC,uBAAA,IAAI,uBAAQ,IAAI,uBAAA,IAAI,yBAAU,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,uBAAA,IAAI,yBAAU,CAAC,CAAC,CAAC,SAAS,CAAC;QACtF,MAAM,WAAW,GAAG,uBAAA,IAAI,+BAAgB,CAAC,CAAC,CAAC,uBAAA,IAAI,+BAAgB,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC;QACtF,MAAM,SAAS,GAAG,uBAAA,IAAI,sBAAO,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC;QACnD,MAAM,cAAc,GAAG,uBAAA,IAAI,sBAAO,CAAC,UAAU,CAAC,aAAa,CAAC,CAAC;QAC7D,MAAM,SAAS,GAAG,uBAAA,IAAI,sBAAO,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC;QAEnD,OAAO,IAAI,CAAA;yBACU,CAAC,IAAI,CAAC,IAAI;mDACgB,CAAC,IAAI,CAAC,IAAI;;;;;8BAK/B,SAAS,CAAC,QAAQ,CAAC;yBACxB,SAAS,CAAC,WAAW,CAAC;uBACxB,CAAC,IAAI,CAAC,IAAI;;qDAEoB,QAAQ,CAAC,EAAE,SAAS,EAAE,cAAc,EAAE,SAAS,EAAE,CAAC;;;kDAGrD,CAAC,cAAc;;;;;gCAKjC,CAAC,SAAS;;;;;;;2BAOf,IAAI,CAAC,SAAS;yBAChB,IAAI,CAAC,KAAK;;;;;;;;KAQ9B,CAAC;IACJ,CAAC;IAED,oBAAoB;QAClB,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAE7B,IAAI,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;QAEpD,uBAAA,IAAI,+BAAgB,EAAE,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;IAC1E,CAAC;IAGe,AAAN,KAAK,CAAC,KAAK;QACnB,MAAM,IAAI,CAAC,cAAc,CAAC;QAC1B,uBAAA,IAAI,mBAAW,IAAI,CAAC,aAAa,CAAC,kBAAkB,CAAC,MAAA,CAAC;QACtD,uBAAA,IAAI,iBAAS,CAAC,GAAG,IAAI,CAAC,gBAAgB,CAAC,eAAe,CAAC,CAAC,MAAA,CAAC;QACzD,uBAAA,IAAI,qBAAa,uBAAA,IAAI,qBAAM,CAAC,MAAM,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,KAAK,GAAG,CAAC,MAAA,CAAC;QAEzE,IAAI,uBAAA,IAAI,+BAAgB,EAAE,CAAC;YACzB,uBAAA,IAAI,+BAAgB,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;YACpE,IAAI,CAAC,eAAe,CAAC,QAAQ,CAAC,CAAC;QACjC,CAAC;QAED,IAAI,uBAAA,IAAI,uBAAQ,EAAE,CAAC;YACjB,uBAAA,IAAI,uBAAQ,CAAC,EAAE,GAAG,uBAAA,IAAI,yBAAU,CAAC;QACnC,CAAC;aAAM,IAAI,uBAAA,IAAI,yBAAU,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YACrC,kDAAkD;YAClD,uBAAA,IAAI,yBAAU,CAAC,CAAC,CAAC,CAAC,EAAE,GAAG,uBAAA,IAAI,yBAAU,CAAC;QACxC,CAAC;IACH,CAAC;IAES,KAAK,CAAC,YAAY,CAAC,QAAkB,EAAE,QAAkB;QACjE,+EAA+E;QAC/E,kCAAkC;QAClC,IAAI,QAAQ,IAAI,IAAI,IAAI,QAAQ,IAAI,IAAI,IAAI,QAAQ,IAAI,QAAQ,EAAE,CAAC;YACjE,OAAO;QACT,CAAC;aAAM,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACrB,kCAAkC;YAClC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,QAAQ,CAAC;YACxC,MAAM,IAAI,CAAC,cAAc,CAAC;YAC1B,iCAAiC;YACjC,IAAI,CAAC,MAAM,EAAE,KAAK,EAAE,CAAC;YACrB,IAAI,CAAC,aAAa,CAAC,IAAI,cAAc,CAAC,uBAAA,IAAI,+BAAgB,CAAC,CAAC,CAAC;QAC/D,CAAC;aAAM,CAAC;YACN,uBAAuB;YACvB,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,MAAM,CAAC;YAEtC,MAAM,IAAI,CAAC,cAAc,CAAC;YAE1B,IAAI,uBAAA,IAAI,+BAAgB,EAAE,CAAC;gBACzB,uBAAA,IAAI,+BAAgB,CAAC,KAAK,EAAE,CAAC;YAC/B,CAAC;YAED,IAAI,CAAC,aAAa,CAAC,uBAAA,IAAI,2BAAY,CAAC,CAAC,CAAC,IAAI,gBAAgB,EAAE,CAAC,CAAC,CAAC,IAAI,eAAe,EAAE,CAAC,CAAC;QACxF,CAAC;IACH,CAAC;IAES,eAAe;QACvB,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YACjB,uBAAA,IAAI,2BAAoB,IAAI,CAAC,WAAW,EAA4B;iBAC/D,cAAc,CAAC,IAAI,CAAC,OAAO,CAAC,MAAA,CAAC;YAClC,uBAAA,IAAI,+BAAgB,EAAE,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;QACvE,CAAC;IACH,CAAC;IAEc,cAAc,CAAC,KAAiB;QAC7C,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,6CAA6C;QAC7C,IAAI,CAAC,SAAS,EAAE,CAAC;IACnB,CAAC;IAEc,OAAO,CAAC,KAAiB;QACtC,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC;QACvC,IAAI,IAAI,EAAE,CAAC;YACT,MAAM,IAAI,GAAG,KAAK,CAAC,YAAY,EAAE,CAAC;YAClC,MAAM,EAAE,mBAAmB,EAAE,GAAG,IAAI,CAAC,WAA6B,CAAC;YAEnE,IAAI,mBAAmB,IAAI,IAAI,CAAC,QAAQ,CAAC,OAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAO,CAAC,EAAE,CAAC;gBAC9E,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,IAAI,CAAC,MAAM,EAAE,CAAC;YAChB,CAAC;QACH,CAAC;IACH,CAAC;IAEc,SAAS,CAAC,KAAoB;QAC3C,QAAQ,KAAK,CAAC,GAAG,EAAE,CAAC;YAClB,KAAK,KAAK;gBACR,IAAI,KAAK,CAAC,MAAM,KAAK,IAAI,CAAC,WAAW,EAAE,CAAC;oBACtC,KAAK,CAAC,cAAc,EAAE,CAAC;oBACvB,IAAI,CAAC,MAAM,EAAE,KAAK,EAAE,CAAC;gBACvB,CAAC;gBACD,OAAO;YACT,KAAK,QAAQ,CAAC;YACd,KAAK,KAAK;gBACR,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,IAAI,CAAC,MAAM,EAAE,CAAC;gBACd,OAAO;YACT,KAAK,OAAO;gBACV,IAAI,KAAK,CAAC,MAAM,KAAK,uBAAA,IAAI,+BAAgB,EAAE,CAAC;oBAC1C,KAAK,CAAC,cAAc,EAAE,CAAC;oBACvB,IAAI,CAAC,SAAS,EAAE,CAAC;gBACnB,CAAC;gBACD,OAAO;QACX,CAAC;IACH,CAAC;IAEO,KAAK,CAAC,MAAM;QAClB,uBAAA,IAAI,uBAAe,IAAI,MAAA,CAAC;QACxB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;QAClB,MAAM,IAAI,CAAC,cAAc,CAAC;QAC1B,uBAAA,IAAI,uBAAe,KAAK,MAAA,CAAC;IAC3B,CAAC;IAED,UAAU,CAAC,OAAoB;QAC7B,uBAAA,IAAI,2BAAmB,OAAO,MAAA,CAAC;QAC/B,uBAAA,IAAI,+BAAgB,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;IACtE,CAAC;IAED;;;;;OAKG;IACI,MAAM;QACX,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;IACzB,CAAC;IAED;;;;;OAKG;IACI,IAAI;QACT,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;IACnB,CAAC;IAEM,SAAS;QACd,uBAAuB;QACvB,IAAI,CAAC,IAAI,EAAE,CAAC;IACd,CAAC;IAED;;;;;OAKG;IACI,KAAK,CAAC,WAAoB;QAC/B,IAAI,OAAO,WAAW,KAAK,QAAQ,EAAE,CAAC;YACpC,IAAI,CAAC,WAAW,GAAG,WAAW,CAAC;QACjC,CAAC;QAED,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;IACpB,CAAC;;;;;;;;;AAvPwB,yBAAiB,GAAG;IAC3C,GAAG,UAAU,CAAC,iBAAiB;IAC/B,cAAc,EAAE,IAAI;CACrB,AAHyC,CAGxC;AAEc,cAAM,GAAG,CAAC,KAAK,CAAC,AAAV,CAAW;AAEjC,mEAAmE;AAClD,2BAAmB,GAAG,KAAK,AAAR,CAAS;AAMhB;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wCAAwC;AAKvC;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yCAAkB;AAGF;IAD3C,QAAQ;IACR,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;qCAAc;AAI7C;IADX,QAAQ;IACR,QAAQ,EAAE;wCAAkB;AAKF;IAA1B,KAAK,CAAC,UAAU,CAAC;wCAAsC;AAC9B;IAAzB,KAAK,CAAC,SAAS,CAAC;uCAAqC;AACtB;IAA/B,KAAK,CAAC,eAAe,CAAC;4CAA0C;AAuEjD;IADf,WAAW,EAAE;oCAkBb;AAoCc;IAAd,KAAK;6CAIL;AAEc;IAAd,KAAK;sCAWL;AAEc;IAAd,KAAK;wCAoBL;AAoBM;IAAN,KAAK;qCAEL;AAQM;IAAN,KAAK;mCAEL;AAEM;IAAN,KAAK;wCAGL;AAQM;IAAN,KAAK;oCAML;AAxPU,OAAO;IADnB,aAAa,CAAC,UAAU,CAAC;GACb,OAAO,CAyPnB","sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\nimport { query } from 'lit/decorators/query.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport { ComposedEvent } from '@patternfly/pfe-core';\nimport { bound, initializer, observed } from '@patternfly/pfe-core/decorators.js';\nimport { getRandomId } from '@patternfly/pfe-core/functions/random.js';\n\nimport { SlotController } from '@patternfly/pfe-core/controllers/slot-controller.js';\n\nimport style from './pf-modal.css';\n\nexport class ModalCancelEvent extends ComposedEvent {\n  constructor() {\n    super('cancel');\n  }\n}\n\nexport class ModalCloseEvent extends ComposedEvent {\n  constructor() {\n    super('close');\n  }\n}\n\nexport class ModalOpenEvent extends ComposedEvent {\n  constructor(\n    /** The trigger element which triggered the modal to open */\n    public trigger: HTMLElement | null\n  ) {\n    super('open');\n  }\n}\n\n/**\n * A **modal** displays important information to a user without requiring them to navigate\n * to a new page.\n * @summary Displays information or helps a user focus on a task\n * @slot - The default slot can contain any type of content. When the header is not present this unnamed slot appear at the top of the modal window (to the left of the close button). Otherwise it will appear beneath the header.\n * @slot header - The header is an optional slot that appears at the top of the modal window. It should be a header tag (h2-h6).\n * @slot footer - Optional footer content. Good place to put action buttons.\n * @fires {ModalOpenEvent} open - Fires when a user clicks on the trigger or manually opens a modal.\n * @fires {ModalCloseEvent} close - Fires when either a user clicks on either the close button or the overlay or manually closes a modal.\n * @csspart overlay - The modal overlay which lies under the dialog and above the page body\n * @csspart dialog - The dialog element\n * @csspart content - The container for the dialog content\n * @csspart header - The container for the optional dialog header\n * @csspart description - The container for the optional dialog description in the header\n * @csspart close-button - The modal's close button\n * @csspart footer - Actions footer container\n * @cssprop {<length>} --pf-c-modal-box--ZIndex {@default 500}\n * @cssprop {<length>} --pf-c-modal-box--Width - Width of the modal {@default calc(100% - 2rem)}\n * @cssprop {<length>} --pf-c-modal-box--MaxWidth - Max width of the modal {@default calc(100% - 2rem)}\n * @cssprop {<length>} --pf-c-modal-box--m-sm--sm--MaxWidth - Max width of the small variant modal {@default 35rem}\n * @cssprop {<length>} --pf-c-modal-box--m-md--MaxWidth - Max width of the small variant modal {@default 52.5rem}\n * @cssprop {<length>} --pf-c-modal-box--m-lg--lg--MaxWidth - Max width of the large variant modal {@default 70rem}\n * @cssprop {<length>} --pf-c-modal-box--MaxHeight - Max height of the modal {@default calc(100% - 3rem)}\n * @cssprop {<length>} --pf-c-modal-box--BoxShadow - {@default var(--pf-global--BoxShadow--xl)}\n * @cssprop {<length>} --pf-c-modal-box__title--FontSize - {@default 1.5rem}\n * @cssprop {<length>} --pf-c-modal-box--m-align-top--MarginTop - {@default 2rem}\n * @cssprop {<length>} --pf-c-modal-box--m-align-top--MaxWidth\n * @cssprop {<length>} --pf-c-modal-box--m-align-top--MaxHeight\n * @cssprop {<color>} --pf-c-modal-box--BackgroundColor - {@default #fff}\n * @cssprop --pf-c-modal-box__title--FontFamily - default font family for header-slotted headings\n */\n@customElement('pf-modal')\nexport class PfModal extends LitElement implements HTMLDialogElement {\n  static override readonly shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n\n  static readonly styles = [style];\n\n  /** Should the dialog close when user clicks outside the dialog? */\n  protected static closeOnOutsideClick = false;\n\n  /**\n   * The `variant` controls the width of the modal.\n   * There are three options: `small`, `medium` and `large`. The default is `large`.\n   */\n  @property({ reflect: true }) variant?: 'small' | 'medium' | 'large';\n\n  /**\n   * `position=\"top\"` aligns the dialog with the top of the page\n   */\n  @property({ reflect: true }) position?: 'top';\n\n  @observed\n  @property({ type: Boolean, reflect: true }) open = false;\n\n  /** Optional ID of the trigger element */\n  @observed\n  @property() trigger?: string;\n\n  /** @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/returnValue */\n  public returnValue = '';\n\n  @query('#overlay') private overlay?: HTMLElement | null;\n  @query('#dialog') private dialog?: HTMLElement | null;\n  @query('#close-button') private closeButton?: HTMLElement | null;\n\n  #headerId = getRandomId();\n  #triggerElement: HTMLElement | null = null;\n  #header: HTMLElement | null = null;\n  #body: Element[] = [];\n  #headings: Element[] = [];\n  #cancelling = false;\n\n  #slots = new SlotController(this, null, 'header', 'description', 'footer');\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener('keydown', this.onKeydown);\n    this.addEventListener('click', this.onClick);\n  }\n\n  render() {\n    const headerId = (this.#header || this.#headings.length) ? this.#headerId : undefined;\n    const headerLabel = this.#triggerElement ? this.#triggerElement.innerText : undefined;\n    const hasHeader = this.#slots.hasSlotted('header');\n    const hasDescription = this.#slots.hasSlotted('description');\n    const hasFooter = this.#slots.hasSlotted('footer');\n\n    return html`\n      <section ?hidden=${!this.open}>\n        <div id=\"overlay\" part=\"overlay\" ?hidden=${!this.open}></div>\n        <div id=\"dialog\"\n            part=\"dialog\"\n            tabindex=\"0\"\n            role=\"dialog\"\n            aria-labelledby=${ifDefined(headerId)}\n            aria-label=${ifDefined(headerLabel)}\n            ?hidden=\"${!this.open}\">\n          <div id=\"container\">\n            <div id=\"content\" part=\"content\" class=${classMap({ hasHeader, hasDescription, hasFooter })}>\n              <header part=\"header\">\n                <slot name=\"header\"></slot>\n                <div part=\"description\" ?hidden=${!hasDescription}>\n                  <slot name=\"description\"></slot>\n                </div>\n              </header>\n              <slot></slot>\n              <footer ?hidden=${!hasFooter} part=\"footer\">\n                <slot name=\"footer\"></slot>\n              </footer>\n            </div>\n            <button id=\"close-button\"\n                part=\"close-button\"\n                aria-label=\"Close dialog\"\n                @keydown=${this.onKeydown}\n                @click=${this.close}>\n              <svg fill=\"currentColor\" viewBox=\"0 0 352 512\">\n                <path d=\"M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z\"></path>\n              </svg>\n            </button>\n          </div>\n        </div>\n      </section>\n    `;\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n\n    this.removeEventListener('keydown', this.onKeydown);\n\n    this.#triggerElement?.removeEventListener('click', this.onTriggerClick);\n  }\n\n  @initializer()\n  protected async _init() {\n    await this.updateComplete;\n    this.#header = this.querySelector(`[slot$=\"header\"]`);\n    this.#body = [...this.querySelectorAll(`*:not([slot])`)];\n    this.#headings = this.#body.filter(el => el.tagName.slice(0, 1) === 'H');\n\n    if (this.#triggerElement) {\n      this.#triggerElement.addEventListener('click', this.onTriggerClick);\n      this.removeAttribute('hidden');\n    }\n\n    if (this.#header) {\n      this.#header.id = this.#headerId;\n    } else if (this.#headings.length > 0) {\n      // Get the first heading in the modal if it exists\n      this.#headings[0].id = this.#headerId;\n    }\n  }\n\n  protected async _openChanged(oldValue?: boolean, newValue?: boolean) {\n    // loosening types to prevent running these effects in unexpected circumstances\n    // eslint-disable-next-line eqeqeq\n    if (oldValue == null || newValue == null || oldValue == newValue) {\n      return;\n    } else if (this.open) {\n      // This prevents background scroll\n      document.body.style.overflow = 'hidden';\n      await this.updateComplete;\n      // Set the focus to the container\n      this.dialog?.focus();\n      this.dispatchEvent(new ModalOpenEvent(this.#triggerElement));\n    } else {\n      // Return scrollability\n      document.body.style.overflow = 'auto';\n\n      await this.updateComplete;\n\n      if (this.#triggerElement) {\n        this.#triggerElement.focus();\n      }\n\n      this.dispatchEvent(this.#cancelling ? new ModalCancelEvent() : new ModalCloseEvent());\n    }\n  }\n\n  protected _triggerChanged() {\n    if (this.trigger) {\n      this.#triggerElement = (this.getRootNode() as Document | ShadowRoot)\n          .getElementById(this.trigger);\n      this.#triggerElement?.addEventListener('click', this.onTriggerClick);\n    }\n  }\n\n  @bound private onTriggerClick(event: MouseEvent) {\n    event.preventDefault();\n    // TODO: in non-modal case, toggle the dialog\n    this.showModal();\n  }\n\n  @bound private onClick(event: MouseEvent) {\n    const { open, overlay, dialog } = this;\n    if (open) {\n      const path = event.composedPath();\n      const { closeOnOutsideClick } = this.constructor as typeof PfModal;\n\n      if (closeOnOutsideClick && path.includes(overlay!) && !path.includes(dialog!)) {\n        event.preventDefault();\n        this.cancel();\n      }\n    }\n  }\n\n  @bound private onKeydown(event: KeyboardEvent) {\n    switch (event.key) {\n      case 'Tab':\n        if (event.target === this.closeButton) {\n          event.preventDefault();\n          this.dialog?.focus();\n        }\n        return;\n      case 'Escape':\n      case 'Esc':\n        event.preventDefault();\n        this.cancel();\n        return;\n      case 'Enter':\n        if (event.target === this.#triggerElement) {\n          event.preventDefault();\n          this.showModal();\n        }\n        return;\n    }\n  }\n\n  private async cancel() {\n    this.#cancelling = true;\n    this.open = false;\n    await this.updateComplete;\n    this.#cancelling = false;\n  }\n\n  setTrigger(element: HTMLElement) {\n    this.#triggerElement = element;\n    this.#triggerElement.addEventListener('click', this.onTriggerClick);\n  }\n\n  /**\n   * Manually toggles the modal.\n   * ```js\n   * modal.toggle();\n   * ```\n   */\n  @bound toggle() {\n    this.open = !this.open;\n  }\n\n  /**\n   * Manually opens the modal.\n   * ```js\n   * modal.open();\n   * ```\n   */\n  @bound show() {\n    this.open = true;\n  }\n\n  @bound showModal() {\n    // TODO: non-modal mode\n    this.show();\n  }\n\n  /**\n   * Manually closes the modal.\n   * ```js\n   * modal.close();\n   * ```\n   */\n  @bound close(returnValue?: string) {\n    if (typeof returnValue === 'string') {\n      this.returnValue = returnValue;\n    }\n\n    this.open = false;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-modal': PfModal;\n  }\n}\n"]}
+{"version":3,"file":"pf-modal.js","sourceRoot":"","sources":["pf-modal.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, type TemplateResult } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\nimport { query } from 'lit/decorators/query.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport { ComposedEvent } from '@patternfly/pfe-core';\nimport { bound, initializer, observes } from '@patternfly/pfe-core/decorators.js';\nimport { getRandomId } from '@patternfly/pfe-core/functions/random.js';\n\nimport { SlotController } from '@patternfly/pfe-core/controllers/slot-controller.js';\n\nimport style from './pf-modal.css';\n\nexport class ModalCancelEvent extends ComposedEvent {\n  constructor() {\n    super('cancel');\n  }\n}\n\nexport class ModalCloseEvent extends ComposedEvent {\n  constructor() {\n    super('close');\n  }\n}\n\nexport class ModalOpenEvent extends ComposedEvent {\n  constructor(\n    /** The trigger element which triggered the modal to open */\n    public trigger: HTMLElement | null\n  ) {\n    super('open');\n  }\n}\n\n/**\n * A **modal** displays important information to a user without requiring them to navigate\n * to a new page.\n * @summary Displays information or helps a user focus on a task\n * @slot - The default slot can contain any type of content. When the header is not present this unnamed slot appear at the top of the modal window (to the left of the close button). Otherwise it will appear beneath the header.\n * @slot header - The header is an optional slot that appears at the top of the modal window. It should be a header tag (h2-h6).\n * @slot footer - Optional footer content. Good place to put action buttons.\n * @fires {ModalOpenEvent} open - Fires when a user clicks on the trigger or manually opens a modal.\n * @fires {ModalCloseEvent} close - Fires when either a user clicks on either the close button or the overlay or manually closes a modal.\n * @csspart overlay - The modal overlay which lies under the dialog and above the page body\n * @csspart dialog - The dialog element\n * @csspart content - The container for the dialog content\n * @csspart header - The container for the optional dialog header\n * @csspart description - The container for the optional dialog description in the header\n * @csspart close-button - The modal's close button\n * @csspart footer - Actions footer container\n * @cssprop {<length>} [--pf-c-modal-box--ZIndex=500]\n * @cssprop {<length>} [--pf-c-modal-box--Width=calc(100 - 2rem)] - Width of the modal\n * @cssprop {<length>} [--pf-c-modal-box--MaxWidth=calc(100 - 2rem)] - Max width of the modal\n * @cssprop {<length>} [--pf-c-modal-box--m-sm--sm--MaxWidth=35rem] - Max width of the small variant modal\n * @cssprop {<length>} [--pf-c-modal-box--m-md--MaxWidth=52.5rem] - Max width of the small variant modal\n * @cssprop {<length>} [--pf-c-modal-box--m-lg--lg--MaxWidth=70rem] - Max width of the large variant modal\n * @cssprop {<length>} [--pf-c-modal-box--MaxHeight=calc(100 - 3rem)] - Max height of the modal\n * @cssprop {<length>} [--pf-c-modal-box--BoxShadow=var(--pf-global--BoxShadow--xl)] -\n * @cssprop {<length>} [--pf-c-modal-box__title--FontSize=1.5rem] -\n * @cssprop {<length>} [--pf-c-modal-box--m-align-top--MarginTop=2rem] -\n * @cssprop {<length>} --pf-c-modal-box--m-align-top--MaxWidth\n * @cssprop {<length>} --pf-c-modal-box--m-align-top--MaxHeight\n * @cssprop {<color>} [--pf-c-modal-box--BackgroundColor=#fff] -\n * @cssprop --pf-c-modal-box__title--FontFamily - default font family for header-slotted headings\n */\n@customElement('pf-modal')\nexport class PfModal extends LitElement implements HTMLDialogElement {\n  static override readonly shadowRootOptions: ShadowRootInit = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n\n  static readonly styles: CSSStyleSheet[] = [style];\n\n  /** Should the dialog close when user clicks outside the dialog? */\n  protected static closeOnOutsideClick = false;\n\n  /**\n   * The `variant` controls the width of the modal.\n   * There are three options: `small`, `medium` and `large`. The default is `large`.\n   */\n  @property({ reflect: true }) variant?: 'small' | 'medium' | 'large';\n\n  /**\n   * `position=\"top\"` aligns the dialog with the top of the page\n   */\n  @property({ reflect: true }) position?: 'top';\n\n  @property({ type: Boolean, reflect: true }) open = false;\n\n  /** Optional ID of the trigger element */\n  @property() trigger?: string;\n\n  /** @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/returnValue */\n  public returnValue = '';\n\n  @query('#overlay') private overlay?: HTMLElement | null;\n  @query('#dialog') private dialog?: HTMLElement | null;\n  @query('#close-button') private closeButton?: HTMLElement | null;\n\n  #headerId = getRandomId();\n  #triggerElement: HTMLElement | null = null;\n  #header: HTMLElement | null = null;\n  #body: Element[] = [];\n  #headings: Element[] = [];\n  #cancelling = false;\n\n  #slots = new SlotController(this, null, 'header', 'description', 'footer');\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener('keydown', this.onKeydown);\n    this.addEventListener('click', this.onClick);\n  }\n\n  render(): TemplateResult<1> {\n    const headerId = (this.#header || this.#headings.length) ? this.#headerId : undefined;\n    const headerLabel = this.#triggerElement ? this.#triggerElement.innerText : undefined;\n    const hasHeader = this.#slots.hasSlotted('header');\n    const hasDescription = this.#slots.hasSlotted('description');\n    const hasFooter = this.#slots.hasSlotted('footer');\n\n    return html`\n      <section ?hidden=${!this.open}>\n        <div id=\"overlay\" part=\"overlay\" ?hidden=${!this.open}></div>\n        <div id=\"dialog\"\n            part=\"dialog\"\n            tabindex=\"0\"\n            role=\"dialog\"\n            aria-labelledby=${ifDefined(headerId)}\n            aria-label=${ifDefined(headerLabel)}\n            ?hidden=\"${!this.open}\">\n          <div id=\"container\">\n            <div id=\"content\" part=\"content\" class=${classMap({ hasHeader, hasDescription, hasFooter })}>\n              <header part=\"header\">\n                <slot name=\"header\"></slot>\n                <div part=\"description\" ?hidden=${!hasDescription}>\n                  <slot name=\"description\"></slot>\n                </div>\n              </header>\n              <slot></slot>\n              <footer ?hidden=${!hasFooter} part=\"footer\">\n                <slot name=\"footer\"></slot>\n              </footer>\n            </div>\n            <button id=\"close-button\"\n                part=\"close-button\"\n                aria-label=\"Close dialog\"\n                @keydown=${this.onKeydown}\n                @click=${this.close}>\n              <svg fill=\"currentColor\" viewBox=\"0 0 352 512\">\n                <path d=\"M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z\"></path>\n              </svg>\n            </button>\n          </div>\n        </div>\n      </section>\n    `;\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n\n    this.removeEventListener('keydown', this.onKeydown);\n\n    this.#triggerElement?.removeEventListener('click', this.onTriggerClick);\n  }\n\n  @initializer()\n  protected async _init(): Promise<void> {\n    await this.updateComplete;\n    this.#header = this.querySelector(`[slot$=\"header\"]`);\n    this.#body = [...this.querySelectorAll(`*:not([slot])`)];\n    this.#headings = this.#body.filter(el => el.tagName.slice(0, 1) === 'H');\n\n    if (this.#triggerElement) {\n      this.#triggerElement.addEventListener('click', this.onTriggerClick);\n      this.removeAttribute('hidden');\n    }\n\n    if (this.#header) {\n      this.#header.id = this.#headerId;\n    } else if (this.#headings.length > 0) {\n      // Get the first heading in the modal if it exists\n      this.#headings[0].id = this.#headerId;\n    }\n  }\n\n  @observes('open')\n  protected async openChanged(oldValue?: boolean, newValue?: boolean): Promise<void> {\n    // loosening types to prevent running these effects in unexpected circumstances\n    // eslint-disable-next-line eqeqeq\n    if (oldValue == null || newValue == null || oldValue == newValue) {\n      return;\n    } else if (this.open) {\n      // This prevents background scroll\n      document.body.style.overflow = 'hidden';\n      await this.updateComplete;\n      // Set the focus to the container\n      this.dialog?.focus();\n      this.dispatchEvent(new ModalOpenEvent(this.#triggerElement));\n    } else {\n      // Return scrollability\n      document.body.style.overflow = 'auto';\n\n      await this.updateComplete;\n\n      if (this.#triggerElement) {\n        this.#triggerElement.focus();\n      }\n\n      this.dispatchEvent(this.#cancelling ? new ModalCancelEvent() : new ModalCloseEvent());\n    }\n  }\n\n  @observes('trigger')\n  protected triggerChanged(): void {\n    if (this.trigger) {\n      this.#triggerElement = (this.getRootNode() as Document | ShadowRoot)\n          .getElementById(this.trigger);\n      this.#triggerElement?.addEventListener('click', this.onTriggerClick);\n    }\n  }\n\n  @bound private onTriggerClick(event: MouseEvent) {\n    event.preventDefault();\n    // TODO: in non-modal case, toggle the dialog\n    this.showModal();\n  }\n\n  @bound private onClick(event: MouseEvent) {\n    const { open, overlay, dialog } = this;\n    if (open) {\n      const path = event.composedPath();\n      const { closeOnOutsideClick } = this.constructor as typeof PfModal;\n\n      if (closeOnOutsideClick && path.includes(overlay!) && !path.includes(dialog!)) {\n        event.preventDefault();\n        this.cancel();\n      }\n    }\n  }\n\n  @bound private onKeydown(event: KeyboardEvent) {\n    switch (event.key) {\n      case 'Tab':\n        if (event.target === this.closeButton) {\n          event.preventDefault();\n          this.dialog?.focus();\n        }\n        return;\n      case 'Escape':\n      case 'Esc':\n        event.preventDefault();\n        this.cancel();\n        return;\n      case 'Enter':\n        if (event.target === this.#triggerElement) {\n          event.preventDefault();\n          this.showModal();\n        }\n        return;\n    }\n  }\n\n  private async cancel() {\n    this.#cancelling = true;\n    this.open = false;\n    await this.updateComplete;\n    this.#cancelling = false;\n  }\n\n  setTrigger(element: HTMLElement): void {\n    this.#triggerElement = element;\n    this.#triggerElement.addEventListener('click', this.onTriggerClick);\n  }\n\n  /**\n   * Manually toggles the modal.\n   * ```js\n   * modal.toggle();\n   * ```\n   */\n  @bound toggle(): void {\n    this.open = !this.open;\n  }\n\n  /**\n   * Manually opens the modal.\n   * ```js\n   * modal.open();\n   * ```\n   */\n  @bound show(): void {\n    this.open = true;\n  }\n\n  @bound showModal(): void {\n    // TODO: non-modal mode\n    this.show();\n  }\n\n  /**\n   * Manually closes the modal.\n   * ```js\n   * modal.close();\n   * ```\n   * @param returnValue dialog return value\n   */\n  @bound close(returnValue?: string): void {\n    if (typeof returnValue === 'string') {\n      this.returnValue = returnValue;\n    }\n\n    this.open = false;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-modal': PfModal;\n  }\n}\n"]}

package/pf-modal/test/pf-modal.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-modal';
 test.describe(tagName, () => {
     test('snapshot', async ({ page }) => {
@@ -9,5 +10,16 @@ test.describe(tagName, () => {
         await page.waitForTimeout(100);
         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-modal.e2e.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"pf-modal.e2e.js","sourceRoot":"","sources":["pf-modal.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,WAAW,EAAE,MAAM,sDAAsD,CAAC;AAEnF,MAAM,OAAO,GAAG,UAAU,CAAC;AAE3B,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE,GAAG,EAAE;IAC1B,IAAI,CAAC,UAAU,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;QAClC,MAAM,aAAa,GAAG,IAAI,WAAW,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;QACrD,MAAM,aAAa,CAAC,QAAQ,EAAE,CAAC;QAE/B,MAAM,aAAa,CAAC,KAAK,CAAC,GAAG,OAAO,SAAS,CAAC,CAAC;QAC/C,MAAM,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC;QAE/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-modal';\n\ntest.describe(tagName, () => {\n  test('snapshot', async ({ page }) => {\n    const componentPage = new PfeDemoPage(page, tagName);\n    await componentPage.navigate();\n\n    await componentPage.click(`${tagName} button`);\n    await page.waitForTimeout(100);\n\n    await componentPage.snapshot();\n  });\n});\n"]}
+{"version":3,"file":"pf-modal.e2e.js","sourceRoot":"","sources":["pf-modal.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,UAAU,CAAC;AAE3B,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE,GAAG,EAAE;IAC1B,IAAI,CAAC,UAAU,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;QAClC,MAAM,aAAa,GAAG,IAAI,WAAW,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;QACrD,MAAM,aAAa,CAAC,QAAQ,EAAE,CAAC;QAE/B,MAAM,aAAa,CAAC,KAAK,CAAC,GAAG,OAAO,SAAS,CAAC,CAAC;QAC/C,MAAM,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC;QAE/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-modal';\n\ntest.describe(tagName, () => {\n  test('snapshot', async ({ page }) => {\n    const componentPage = new PfeDemoPage(page, tagName);\n    await componentPage.navigate();\n\n    await componentPage.click(`${tagName} button`);\n    await page.waitForTimeout(100);\n\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-panel/pf-panel.d.ts

@@ -1,20 +1,48 @@
-import { LitElement } from 'lit';
+import { LitElement, type TemplateResult } from 'lit';
 /**
  * The **panel** component is a container that supports flexible content layouts. It can
  * be used to house other components such as fields, forms, videos, buttons, and more.
  * The panel should not be confused with the [drawer](https://www.patternfly.org/v4/components/drawer/design-guidelines/)
  * component, which allows you to surface information via a collapsable container.
- *
  * @slot header - Place header content here
  * @slot - Place main content here
  * @slot footer - Place footer content here
+ * @cssprop [--pf-c-panel--Width=auto]
+ * @cssprop [--pf-c-panel--MinWidth=auto]
+ * @cssprop [--pf-c-panel--MaxWidth=none]
+ * @cssprop [--pf-c-panel--ZIndex=auto]
+ * @cssprop [--pf-c-panel--BackgroundColor=var(--pf-global--BackgroundColor--100, #fff)]
+ * @cssprop [--pf-c-panel--BoxShadow=none]
+ * @cssprop [--pf-c-panel--before--BorderWidth=0]
+ * @cssprop [--pf-c-panel--before--BorderColor=var(--pf-global--BorderColor--100, #d2d2d2)]
+ * @cssprop [--pf-c-panel--m-bordered--before--BorderWidth=var(--pf-global--BorderWidth--sm, 1px)]
+ * @cssprop [--pf-c-panel--m-raised--BoxShadow=var(--pf-global--BoxShadow--md, 0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06))]
+ * @cssprop [--pf-c-panel--m-raised--ZIndex=var(--pf-global--ZIndex--sm, 200)]
+ * @cssprop [--pf-c-panel__header--PaddingTop=var(--pf-global--spacer--md, 1rem)]
+ * @cssprop [--pf-c-panel__header--PaddingRight=var(--pf-global--spacer--md, 1rem)]
+ * @cssprop [--pf-c-panel__header--PaddingBottom=var(--pf-global--spacer--md, 1rem)]
+ * @cssprop [--pf-c-panel__header--PaddingLeft=var(--pf-global--spacer--md, 1rem)]
+ * @cssprop [--pf-c-panel__main--MaxHeight=none]
+ * @cssprop [--pf-c-panel__main--Overflow=visible]
+ * @cssprop [--pf-c-panel__main-body--PaddingTop=var(--pf-global--spacer--md, 1rem)]
+ * @cssprop [--pf-c-panel__main-body--PaddingRight=var(--pf-global--spacer--md, 1rem)]
+ * @cssprop [--pf-c-panel__main-body--PaddingBottom=var(--pf-global--spacer--md, 1rem)]
+ * @cssprop [--pf-c-panel__main-body--PaddingLeft=var(--pf-global--spacer--md, 1rem)]
+ * @cssprop [--pf-c-panel__footer--PaddingTop=var(--pf-global--spacer--md, 1rem)]
+ * @cssprop [--pf-c-panel__footer--PaddingRight=var(--pf-global--spacer--md, 1rem)]
+ * @cssprop [--pf-c-panel__footer--PaddingBottom=var(--pf-global--spacer--md, 1rem)]
+ * @cssprop [--pf-c-panel__footer--PaddingLeft=var(--pf-global--spacer--md, 1rem)]
+ * @cssprop [--pf-c-panel__footer--BoxShadow=none]
+ * @cssprop [--pf-c-panel--m-scrollable__main--MaxHeight=18.75rem]
+ * @cssprop [--pf-c-panel--m-scrollable__main--Overflow=auto]
+ * @cssprop [--pf-c-panel--m-scrollable__footer--BoxShadow=0 -0.3125rem 0.25rem -0.25rem rgba(3, 3, 3, 0.16)]
  */
 export declare class PfPanel extends LitElement {
     #private;
     static readonly styles: CSSStyleSheet[];
     scrollable: boolean;
     variant?: 'raised' | 'bordered';
-    render(): import("lit-html").TemplateResult<1>;
+    render(): TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/pf-panel/pf-panel.js

@@ -6,16 +6,6 @@ import { property } from 'lit/decorators/property.js';
 import { SlotController } from '@patternfly/pfe-core/controllers/slot-controller.js';
 import { css } from "lit";
 const styles = css `:host {\n  /* NB: upstream sets these on the container, which is why we do not use fallbacks here. */\n  --pf-c-panel--Width: auto;\n  --pf-c-panel--MinWidth: auto;\n  --pf-c-panel--MaxWidth: none;\n  --pf-c-panel--ZIndex: auto;\n  --pf-c-panel--BackgroundColor: var(--pf-global--BackgroundColor--100, #fff);\n  --pf-c-panel--BoxShadow: none;\n  --pf-c-panel--before--BorderWidth: 0;\n  --pf-c-panel--before--BorderColor: var(--pf-global--BorderColor--100, #d2d2d2);\n  --pf-c-panel--m-bordered--before--BorderWidth: var(--pf-global--BorderWidth--sm, 1px);\n  --pf-c-panel--m-raised--BoxShadow: var(--pf-global--BoxShadow--md, 0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06));\n  --pf-c-panel--m-raised--ZIndex: var(--pf-global--ZIndex--sm, 200);\n  --pf-c-panel__header--PaddingTop: var(--pf-global--spacer--md, 1rem);\n  --pf-c-panel__header--PaddingRight: var(--pf-global--spacer--md, 1rem);\n  --pf-c-panel__header--PaddingBottom: var(--pf-global--spacer--md, 1rem);\n  --pf-c-panel__header--PaddingLeft: var(--pf-global--spacer--md, 1rem);\n  --pf-c-panel__main--MaxHeight: none;\n  --pf-c-panel__main--Overflow: visible;\n  --pf-c-panel__main-body--PaddingTop: var(--pf-global--spacer--md, 1rem);\n  --pf-c-panel__main-body--PaddingRight: var(--pf-global--spacer--md, 1rem);\n  --pf-c-panel__main-body--PaddingBottom: var(--pf-global--spacer--md, 1rem);\n  --pf-c-panel__main-body--PaddingLeft: var(--pf-global--spacer--md, 1rem);\n  --pf-c-panel__footer--PaddingTop: var(--pf-global--spacer--md, 1rem);\n  --pf-c-panel__footer--PaddingRight: var(--pf-global--spacer--md, 1rem);\n  --pf-c-panel__footer--PaddingBottom: var(--pf-global--spacer--md, 1rem);\n  --pf-c-panel__footer--PaddingLeft: var(--pf-global--spacer--md, 1rem);\n  --pf-c-panel__footer--BoxShadow: none;\n  --pf-c-panel--m-scrollable__main--MaxHeight: 18.75rem;\n  --pf-c-panel--m-scrollable__main--Overflow: auto;\n  --pf-c-panel--m-scrollable__footer--BoxShadow: 0 -0.3125rem 0.25rem -0.25rem rgba(3, 3, 3, 0.16);\n  position: relative;\n  z-index: var(--pf-c-panel--ZIndex);\n  width: var(--pf-c-panel--Width);\n  min-width: var(--pf-c-panel--MinWidth);\n  max-width: var(--pf-c-panel--MaxWidth);\n  background-color: var(--pf-c-panel--BackgroundColor);\n  box-shadow: var(--pf-c-panel--BoxShadow);\n  display: block;\n}\n\n:host([variant="bordered"])::before {\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n  content: "";\n  border:\n  var(--pf-c-panel--m-bordered--before--BorderWidth, var(--pf-global--BorderWidth--sm, 1px))\n    solid\n    var(--pf-c-panel--before--BorderColor,\n      var(--pf-global--BorderColor--100, #d2d2d2));\n}\n\n:host([variant="raised"])::before {\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n  content: "";\n  box-shadow: var(--pf-c-panel--m-raised--BoxShadow, 0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06));\n  z-index: var(--pf-c-panel--m-raised--ZIndex, var(--pf-global--ZIndex--sm, 200));\n}\n\n:host([variant="raised"]) {\n  --pf-c-panel--BoxShadow: var(--pf-c-panel--m-raised--BoxShadow,\n    var(--pf-global--BoxShadow--md, 0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06)));\n  --pf-c-panel--ZIndex: var(--pf-c-panel--m-raised--ZIndex,\n    var(--pf-global--ZIndex--sm, 200));\n}\n\n:host([scrollable]) {\n  --pf-c-panel__main--MaxHeight: var(--pf-c-panel--m-scrollable__main--MaxHeight);\n  --pf-c-panel__main--Overflow: var(--pf-c-panel--m-scrollable__main--Overflow);\n  --pf-c-panel__footer--BoxShadow: var(--pf-c-panel--m-scrollable__footer--BoxShadow);\n}\n\n[hidden] {\n  display: none !important;\n}\n\nslot {\n  display: block;\n}\n\nslot:not([name]) {\n  max-height: var(--pf-c-panel__main--MaxHeight);\n  overflow: var(--pf-c-panel__main--Overflow);\n  padding:\n    var(--pf-c-panel__main-body--PaddingTop,\n      var(--pf-global--spacer--md, 1rem))\n    var(--pf-c-panel__main-body--PaddingRight,\n      var(--pf-global--spacer--md, 1rem))\n    var(--pf-c-panel__main-body--PaddingBottom,\n      var(--pf-global--spacer--md, 1rem))\n    var(--pf-c-panel__main-body--PaddingLeft,\n      var(--pf-global--spacer--md, 1rem));\n}\n\nslot[name="header"] {\n  padding:\n    var(--pf-c-panel__header--PaddingTop)\n    var(--pf-c-panel__header--PaddingRight)\n    var(--pf-c-panel__header--PaddingBottom)\n    var(--pf-c-panel__header--PaddingLeft);\n}\n\nslot[name="footer"] {\n  padding:\n    var(--pf-c-panel__footer--PaddingTop)\n    var(--pf-c-panel__footer--PaddingRight)\n    var(--pf-c-panel__footer--PaddingBottom)\n    var(--pf-c-panel__footer--PaddingLeft);\n  box-shadow: var(--pf-c-panel__footer--BoxShadow);\n}\n\nhr {\n  --pf-c-divider--BorderWidth--base: var(--pf-global--BorderWidth--sm, 1px);\n  --pf-c-divider--BorderColor--base: var(--pf-c-divider--BackgroundColor);\n  --pf-c-divider--Height: var(--pf-c-divider--BorderWidth--base);\n  --pf-c-divider--BackgroundColor: var(--pf-global--BorderColor--100, #d2d2d2);\n  --pf-c-divider--after--BackgroundColor: var(--pf-c-divider--BorderColor--base);\n  --pf-c-divider--after--FlexBasis: 100%;\n  --pf-c-divider--after--Inset: 0%;\n  --pf-c-divider--m-vertical--after--FlexBasis: 100%;\n  --pf-c-divider--m-horizontal--Display: flex;\n  --pf-c-divider--m-horizontal--FlexDirection: row;\n  --pf-c-divider--m-horizontal--after--Height: var(--pf-c-divider--Height);\n  --pf-c-divider--m-horizontal--after--Width: auto;\n  --pf-c-divider--m-vertical--Display: inline-flex;\n  --pf-c-divider--m-vertical--FlexDirection: column;\n  --pf-c-divider--m-vertical--after--Height: auto;\n  --pf-c-divider--m-vertical--after--Width: var(--pf-c-divider--BorderWidth--base);\n  --pf-hidden-visible--visible--Display: var(--pf-c-divider--Display);\n  --pf-c-divider--Display: var(--pf-c-divider--m-horizontal--Display);\n  --pf-c-divider--FlexDirection: var(--pf-c-divider--m-horizontal--FlexDirection);\n  --pf-c-divider--after--Width: var(--pf-c-divider--m-horizontal--after--Width);\n  --pf-c-divider--after--Height: var(--pf-c-divider--m-horizontal--after--Height);\n  width: 100%;\n  height: auto;\n  display: var(--pf-c-divider--Display);\n  flex-direction: var(--pf-c-divider--FlexDirection);\n  align-items: center;\n  align-self: stretch;\n  flex-shrink: 0;\n  justify-content: center;\n  border: 0;\n}\n\nhr::after {\n  align-self: stretch;\n  width: var(--pf-c-divider--after--Width);\n  height: var(--pf-c-divider--after--Height);\n  content: "";\n  background-color: var(--pf-c-divider--after--BackgroundColor);\n  justify-self: center;\n  padding: 0;\n  margin: 0;\n  flex-basis: calc(var(--pf-c-divider--after--FlexBasis) - var(--pf-c-divider--after--Inset) * 2);\n}\n\n::slotted(:is(p, h1, h2, h3, h4, h5, h6):first-of-type) {\n  margin-block-start: 0;\n}\n\n::slotted(:is(p, h1, h2, h3, h4, h5, h6):last-of-type) {\n  margin-block-end: 0;\n}\n\n::slotted(:is(p, h1, h2, h3, h4, h5, h6):is(:last-of-type, :first-of-type)) {\n  margin-block: 0;\n}\n`;
-/**
- * The **panel** component is a container that supports flexible content layouts. It can
- * be used to house other components such as fields, forms, videos, buttons, and more.
- * The panel should not be confused with the [drawer](https://www.patternfly.org/v4/components/drawer/design-guidelines/)
- * component, which allows you to surface information via a collapsable container.
- *
- * @slot header - Place header content here
- * @slot - Place main content here
- * @slot footer - Place footer content here
- */
 let PfPanel = class PfPanel extends LitElement {
     constructor() {
         super(...arguments);
@@ -39,6 +29,7 @@ let PfPanel = class PfPanel extends LitElement {
 };
 _PfPanel_slots = new WeakMap();
 PfPanel.styles = [styles];
+PfPanel.version = "4.0.0";
 __decorate([
     property({ type: Boolean, reflect: true })
 ], PfPanel.prototype, "scrollable", void 0);

package/pf-panel/pf-panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"pf-panel.js","sourceRoot":"","sources":["pf-panel.ts"],"names":[],"mappings":";;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AAEtD,OAAO,EAAE,cAAc,EAAE,MAAM,qDAAqD,CAAC;;;AAIrF;;;;;;;;;GASG;AAEI,IAAM,OAAO,GAAb,MAAM,OAAQ,SAAQ,UAAU;IAAhC;;QAGuC,eAAU,GAAG,KAAK,CAAC;QAI/D,yBAAS,IAAI,cAAc,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,CAAC,EAAC;IAgB9D,CAAC;IAdC,MAAM;QACJ,MAAM,SAAS,GAAG,uBAAA,IAAI,sBAAO,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC;QACnD,MAAM,SAAS,GAAG,uBAAA,IAAI,sBAAO,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC;QACnD,OAAO,IAAI,CAAA;;uCAEwB,CAAC,SAAS;;yCAER,CAAC,SAAS;;;uCAGZ,CAAC,SAAS;;KAE5C,CAAC;IACJ,CAAC;;;AArBe,cAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAEU;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CAAoB;AAElC;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wCAAiC;AALlD,OAAO;IADnB,aAAa,CAAC,UAAU,CAAC;GACb,OAAO,CAuBnB","sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\n\nimport { SlotController } from '@patternfly/pfe-core/controllers/slot-controller.js';\n\nimport styles from './pf-panel.css';\n\n/**\n * The **panel** component is a container that supports flexible content layouts. It can\n * be used to house other components such as fields, forms, videos, buttons, and more.\n * The panel should not be confused with the [drawer](https://www.patternfly.org/v4/components/drawer/design-guidelines/)\n * component, which allows you to surface information via a collapsable container.\n *\n * @slot header - Place header content here\n * @slot - Place main content here\n * @slot footer - Place footer content here\n */\n@customElement('pf-panel')\nexport class PfPanel extends LitElement {\n  static readonly styles = [styles];\n\n  @property({ type: Boolean, reflect: true }) scrollable = false;\n\n  @property({ reflect: true }) variant?: 'raised' | 'bordered';\n\n  #slots = new SlotController(this, 'header', null, 'footer');\n\n  render() {\n    const hasHeader = this.#slots.hasSlotted('header');\n    const hasFooter = this.#slots.hasSlotted('footer');\n    return html`\n      <header>\n        <slot name=\"header\" ?hidden=\"${!hasHeader}\"></slot>\n      </header>\n      <hr role=\"presentation\" ?hidden=\"${!hasHeader}\">\n      <slot></slot>\n      <footer>\n        <slot name=\"footer\" ?hidden=\"${!hasFooter}\"></slot>\n      </footer>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-panel': PfPanel;\n  }\n}\n"]}
+{"version":3,"file":"pf-panel.js","sourceRoot":"","sources":["pf-panel.ts"],"names":[],"mappings":";;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAuB,MAAM,KAAK,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AAEtD,OAAO,EAAE,cAAc,EAAE,MAAM,qDAAqD,CAAC;;;AA2C9E,IAAM,OAAO,GAAb,MAAM,OAAQ,SAAQ,UAAU;IAAhC;;QAGuC,eAAU,GAAG,KAAK,CAAC;QAI/D,yBAAS,IAAI,cAAc,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,CAAC,EAAC;;IAE5D,MAAM;QACJ,MAAM,SAAS,GAAG,uBAAA,IAAI,sBAAO,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC;QACnD,MAAM,SAAS,GAAG,uBAAA,IAAI,sBAAO,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC;QACnD,OAAO,IAAI,CAAA;;uCAEwB,CAAC,SAAS;;yCAER,CAAC,SAAS;;;uCAGZ,CAAC,SAAS;;KAE5C,CAAC;IACJ,CAAC;;;AArBe,cAAM,GAAoB,CAAC,MAAM,CAAC,AAA5B,CAA6B;;AAEP;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CAAoB;AAElC;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wCAAiC;AALlD,OAAO;IADnB,aAAa,CAAC,UAAU,CAAC;GACb,OAAO","sourcesContent":["import { LitElement, html, type TemplateResult } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\n\nimport { SlotController } from '@patternfly/pfe-core/controllers/slot-controller.js';\n\nimport styles from './pf-panel.css';\n\n/**\n * The **panel** component is a container that supports flexible content layouts. It can\n * be used to house other components such as fields, forms, videos, buttons, and more.\n * The panel should not be confused with the [drawer](https://www.patternfly.org/v4/components/drawer/design-guidelines/)\n * component, which allows you to surface information via a collapsable container.\n * @slot header - Place header content here\n * @slot - Place main content here\n * @slot footer - Place footer content here\n * @cssprop [--pf-c-panel--Width=auto]\n * @cssprop [--pf-c-panel--MinWidth=auto]\n * @cssprop [--pf-c-panel--MaxWidth=none]\n * @cssprop [--pf-c-panel--ZIndex=auto]\n * @cssprop [--pf-c-panel--BackgroundColor=var(--pf-global--BackgroundColor--100, #fff)]\n * @cssprop [--pf-c-panel--BoxShadow=none]\n * @cssprop [--pf-c-panel--before--BorderWidth=0]\n * @cssprop [--pf-c-panel--before--BorderColor=var(--pf-global--BorderColor--100, #d2d2d2)]\n * @cssprop [--pf-c-panel--m-bordered--before--BorderWidth=var(--pf-global--BorderWidth--sm, 1px)]\n * @cssprop [--pf-c-panel--m-raised--BoxShadow=var(--pf-global--BoxShadow--md, 0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06))]\n * @cssprop [--pf-c-panel--m-raised--ZIndex=var(--pf-global--ZIndex--sm, 200)]\n * @cssprop [--pf-c-panel__header--PaddingTop=var(--pf-global--spacer--md, 1rem)]\n * @cssprop [--pf-c-panel__header--PaddingRight=var(--pf-global--spacer--md, 1rem)]\n * @cssprop [--pf-c-panel__header--PaddingBottom=var(--pf-global--spacer--md, 1rem)]\n * @cssprop [--pf-c-panel__header--PaddingLeft=var(--pf-global--spacer--md, 1rem)]\n * @cssprop [--pf-c-panel__main--MaxHeight=none]\n * @cssprop [--pf-c-panel__main--Overflow=visible]\n * @cssprop [--pf-c-panel__main-body--PaddingTop=var(--pf-global--spacer--md, 1rem)]\n * @cssprop [--pf-c-panel__main-body--PaddingRight=var(--pf-global--spacer--md, 1rem)]\n * @cssprop [--pf-c-panel__main-body--PaddingBottom=var(--pf-global--spacer--md, 1rem)]\n * @cssprop [--pf-c-panel__main-body--PaddingLeft=var(--pf-global--spacer--md, 1rem)]\n * @cssprop [--pf-c-panel__footer--PaddingTop=var(--pf-global--spacer--md, 1rem)]\n * @cssprop [--pf-c-panel__footer--PaddingRight=var(--pf-global--spacer--md, 1rem)]\n * @cssprop [--pf-c-panel__footer--PaddingBottom=var(--pf-global--spacer--md, 1rem)]\n * @cssprop [--pf-c-panel__footer--PaddingLeft=var(--pf-global--spacer--md, 1rem)]\n * @cssprop [--pf-c-panel__footer--BoxShadow=none]\n * @cssprop [--pf-c-panel--m-scrollable__main--MaxHeight=18.75rem]\n * @cssprop [--pf-c-panel--m-scrollable__main--Overflow=auto]\n * @cssprop [--pf-c-panel--m-scrollable__footer--BoxShadow=0 -0.3125rem 0.25rem -0.25rem rgba(3, 3, 3, 0.16)]\n */\n@customElement('pf-panel')\nexport class PfPanel extends LitElement {\n  static readonly styles: CSSStyleSheet[] = [styles];\n\n  @property({ type: Boolean, reflect: true }) scrollable = false;\n\n  @property({ reflect: true }) variant?: 'raised' | 'bordered';\n\n  #slots = new SlotController(this, 'header', null, 'footer');\n\n  render(): TemplateResult<1> {\n    const hasHeader = this.#slots.hasSlotted('header');\n    const hasFooter = this.#slots.hasSlotted('footer');\n    return html`\n      <header>\n        <slot name=\"header\" ?hidden=\"${!hasHeader}\"></slot>\n      </header>\n      <hr role=\"presentation\" ?hidden=\"${!hasHeader}\">\n      <slot></slot>\n      <footer>\n        <slot name=\"footer\" ?hidden=\"${!hasFooter}\"></slot>\n      </footer>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-panel': PfPanel;\n  }\n}\n"]}

package/pf-panel/test/pf-panel.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-panel';
 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-panel.e2e.js.map