@patternfly/elements 2.0.0-rc.3 → 2.0.0-rc.5

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

@@ -1 +0,0 @@
-{"version":3,"file":"pf-spinner.e2e.js","sourceRoot":"","sources":["pf-spinner.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-spinner';\n\ntest.describe(tagName, () => {\n  test('snapshot', async ({ page }) => {\n    const componentPage = new PfeDemoPage(page, tagName);\n    await componentPage.navigate();\n    await componentPage.snapshot();\n  });\n});\n"]}

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

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

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

@@ -1,52 +0,0 @@
-import { expect, html } from '@open-wc/testing';
-import { createFixture } from '@patternfly/pfe-tools/test/create-fixture.js';
-import { PfSpinner } from '@patternfly/elements/pf-spinner/pf-spinner.js';
-describe('<pf-spinner>', function () {
-    it('should upgrade', async function () {
-        const element = await createFixture(html `<pf-spinner>Loading...</pf-spinner>`);
-        expect(element, 'pf-spinner should be an instance of PfeSpinner')
-            .to.be.an.instanceOf(customElements.get('pf-spinner'))
-            .and
-            .to.be.an.instanceOf(PfSpinner);
-    });
-    it('should properly initialize the component', async function () {
-        const element = await createFixture(html `
-      <pf-spinner>Loading...</pf-spinner>
-    `);
-        expect(element.getAttribute('size')).to.equal('xl');
-    });
-    describe('size attribute', function () {
-        let element;
-        function convertRemToPixels(rem) {
-            const { fontSize } = getComputedStyle(document.documentElement);
-            return parseFloat(rem) * parseFloat(fontSize);
-        }
-        beforeEach(async function () {
-            element = await createFixture(html `
-        <pf-spinner>Loading...</pf-spinner>
-      `);
-        });
-        for (const [size, expected] of [
-            ['sm', '0.625rem'],
-            ['md', '1.125rem'],
-            ['lg', '1.5rem'],
-            ['xl', '3.375rem'],
-        ]) {
-            it(size, async function () {
-                element.size = size;
-                await element.updateComplete;
-                expect(element.offsetWidth).to.equal(convertRemToPixels(expected));
-            });
-        }
-    });
-    describe('diameter attribute', function () {
-        it('sets the element diameter', async function () {
-            const customDiameterValue = 80;
-            const element = await createFixture(html `
-        <pf-spinner diameter="${customDiameterValue}px">Loading...</pf-spinner>
-      `);
-            expect(element.offsetWidth).to.equal(customDiameterValue);
-        });
-    });
-});
-//# sourceMappingURL=pf-spinner.spec.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"pf-spinner.spec.js","sourceRoot":"","sources":["pf-spinner.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,8CAA8C,CAAC;AAC7E,OAAO,EAAE,SAAS,EAAE,MAAM,+CAA+C,CAAC;AAE1E,QAAQ,CAAC,cAAc,EAAE;IACvB,EAAE,CAAC,gBAAgB,EAAE,KAAK;QACxB,MAAM,OAAO,GAAG,MAAM,aAAa,CAAY,IAAI,CAAA,qCAAqC,CAAC,CAAC;QAC1F,MAAM,CAAC,OAAO,EAAE,gDAAgD,CAAC;aAC9D,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,UAAU,CAAC,cAAc,CAAC,GAAG,CAAC,YAAY,CAAC,CAAC;aACrD,GAAG;aACH,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,UAAU,CAAC,SAAS,CAAC,CAAC;IACpC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,0CAA0C,EAAE,KAAK;QAClD,MAAM,OAAO,GAAG,MAAM,aAAa,CAAY,IAAI,CAAA;;KAElD,CAAC,CAAC;QAEH,MAAM,CAAC,OAAO,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;IACtD,CAAC,CAAC,CAAC;IAEH,QAAQ,CAAC,gBAAgB,EAAE;QACzB,IAAI,OAAkB,CAAC;QAEvB,SAAS,kBAAkB,CAAC,GAAmB;YAC7C,MAAM,EAAE,QAAQ,EAAE,GAAG,gBAAgB,CAAC,QAAQ,CAAC,eAAe,CAAC,CAAC;YAChE,OAAO,UAAU,CAAC,GAAG,CAAC,GAAG,UAAU,CAAC,QAAQ,CAAC,CAAC;QAChD,CAAC;QAED,UAAU,CAAC,KAAK;YACd,OAAO,GAAG,MAAM,aAAa,CAAY,IAAI,CAAA;;OAE5C,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;QAEH,KAAK,MAAM,CAAC,IAAI,EAAE,QAAQ,CAAC,IAAI;YAC7B,CAAC,IAAI,EAAE,UAAU,CAAC;YAClB,CAAC,IAAI,EAAE,UAAU,CAAC;YAClB,CAAC,IAAI,EAAE,QAAQ,CAAC;YAChB,CAAC,IAAI,EAAE,UAAU,CAAC;SACV,EAAE;YACV,EAAE,CAAC,IAAI,EAAE,KAAK;gBACZ,OAAO,CAAC,IAAI,GAAG,IAAI,CAAC;gBACpB,MAAM,OAAO,CAAC,cAAc,CAAC;gBAC7B,MAAM,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,kBAAkB,CAAC,QAAQ,CAAC,CAAC,CAAC;YACrE,CAAC,CAAC,CAAC;SACJ;IACH,CAAC,CAAC,CAAC;IAEH,QAAQ,CAAC,oBAAoB,EAAE;QAC7B,EAAE,CAAC,2BAA2B,EAAE,KAAK;YACnC,MAAM,mBAAmB,GAAG,EAAE,CAAC;YAC/B,MAAM,OAAO,GAAG,MAAM,aAAa,CAAY,IAAI,CAAA;gCACzB,mBAAmB;OAC5C,CAAC,CAAC;YAEH,MAAM,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,mBAAmB,CAAC,CAAC;QAC5D,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { expect, html } from '@open-wc/testing';\nimport { createFixture } from '@patternfly/pfe-tools/test/create-fixture.js';\nimport { PfSpinner } from '@patternfly/elements/pf-spinner/pf-spinner.js';\n\ndescribe('<pf-spinner>', function() {\n  it('should upgrade', async function() {\n    const element = await createFixture<PfSpinner>(html`<pf-spinner>Loading...</pf-spinner>`);\n    expect(element, 'pf-spinner should be an instance of PfeSpinner')\n      .to.be.an.instanceOf(customElements.get('pf-spinner'))\n      .and\n      .to.be.an.instanceOf(PfSpinner);\n  });\n\n  it('should properly initialize the component', async function() {\n    const element = await createFixture<PfSpinner>(html`\n      <pf-spinner>Loading...</pf-spinner>\n    `);\n\n    expect(element.getAttribute('size')).to.equal('xl');\n  });\n\n  describe('size attribute', function() {\n    let element: PfSpinner;\n\n    function convertRemToPixels(rem: `${number}rem`) {\n      const { fontSize } = getComputedStyle(document.documentElement);\n      return parseFloat(rem) * parseFloat(fontSize);\n    }\n\n    beforeEach(async function() {\n      element = await createFixture<PfSpinner>(html`\n        <pf-spinner>Loading...</pf-spinner>\n      `);\n    });\n\n    for (const [size, expected] of [\n      ['sm', '0.625rem'],\n      ['md', '1.125rem'],\n      ['lg', '1.5rem'],\n      ['xl', '3.375rem'],\n    ] as const) {\n      it(size, async function() {\n        element.size = size;\n        await element.updateComplete;\n        expect(element.offsetWidth).to.equal(convertRemToPixels(expected));\n      });\n    }\n  });\n\n  describe('diameter attribute', function() {\n    it('sets the element diameter', async function() {\n      const customDiameterValue = 80;\n      const element = await createFixture<PfSpinner>(html`\n        <pf-spinner diameter=\"${customDiameterValue}px\">Loading...</pf-spinner>\n      `);\n\n      expect(element.offsetWidth).to.equal(customDiameterValue);\n    });\n  });\n});\n"]}

package/pf-switch/demo/demo.css

@@ -1,32 +0,0 @@
-section {
-  margin: 2rem;
-}
-
-fieldset {
-  display: grid;
-  grid-template-columns: min-content max-content;
-  gap: var(--pf-c-switch--ColumnGap, var(--pf-c-switch__label--PaddingLeft, 1rem));
-}
-
-fieldset:has(#reversed) {
-  grid-template-columns: max-content min-content;
-}
-
-label {
-  color: var(--pf-c-switch__label--Color, var(--pf-global--Color--dark-100, #151515));
-}
-
-pf-switch:not([checked]) ~ label,
-label:has(~ pf-switch:not([checked])) {
-  color: var(--pf-c-switch__input--not-checked__label--Color, var(--pf-global--disabled-color--100, #6a6e73));
-}
-
-#nested-label fieldset {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-}
-
-#nested-label output {
-  width: 100%;
-}

package/pf-switch/demo/pf-switch.js

@@ -1,13 +0,0 @@
-import 'element-internals-polyfill';
-import '@patternfly/elements/pf-switch/pf-switch.js';
-import '@patternfly/elements/pf-button/pf-button.js';
-
-document.getElementById('form-disabled').addEventListener('change', /** @this{HTMLFieldsetElement}*/function(event) {
-  const controls = document.getElementById(event.target.getAttribute('aria-controls'));
-  controls.toggleAttribute('disabled', event.target.checked);
-});
-
-document.getElementById('nested-label').addEventListener('submit', /** @this {HTMLFormElement} */function(event) {
-  event.preventDefault();
-  this.querySelector('output').textContent = `Dark mode ${this.elements.status.checked ? 'on' : 'off'}`;
-});

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

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

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

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"pf-switch.e2e.js","sourceRoot":"","sources":["pf-switch.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,WAAW,EAAE,MAAM,sDAAsD,CAAC;AAEnF,MAAM,OAAO,GAAG,WAAW,CAAC;AAE5B,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-switch';\n\ntest.describe(tagName, () => {\n  test('snapshot', async ({ page }) => {\n    const componentPage = new PfeDemoPage(page, tagName);\n    await componentPage.navigate();\n    await componentPage.snapshot();\n  });\n});\n"]}

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

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

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

@@ -1,164 +0,0 @@
-import { expect, html, nextFrame } from '@open-wc/testing';
-import { createFixture } from '@patternfly/pfe-tools/test/create-fixture.js';
-import { a11ySnapshot } from '@patternfly/pfe-tools/test/a11y-snapshot.js';
-import { PfSwitch } from '@patternfly/elements/pf-switch/pf-switch.js';
-describe('<pf-switch>', function () {
-    describe('simply instantiating', function () {
-        let element;
-        let snapshot;
-        beforeEach(async function () {
-            const container = await createFixture(html `
-        <div>
-          <pf-switch></pf-switch>
-        </div>
-      `);
-            element = container.querySelector('pf-switch');
-            snapshot = await a11ySnapshot({ selector: 'pf-switch' });
-        });
-        it('should upgrade', async function () {
-            const klass = customElements.get('pf-switch');
-            expect(element)
-                .to.be.an.instanceOf(klass)
-                .and
-                .to.be.an.instanceOf(PfSwitch);
-        });
-        it('has accessible role', function () {
-            expect(snapshot.role).to.equal('checkbox');
-        });
-        it('has accessible checked field', function () {
-            expect(snapshot.role).to.equal('checkbox');
-        });
-        it('requires accessible name', function () {
-            // Double negative - this would fail an accessibility audit,
-            // but that failure would be correct, because the template instantiated
-            // in this test's beforeeach hook does not have an accessible name
-            expect(snapshot.name).to.not.be.ok;
-        });
-    });
-    describe('with labels for on and off state', function () {
-        let element;
-        let snapshot;
-        beforeEach(async function () {
-            const container = await createFixture(html `
-        <div>
-          <pf-switch id="switch"></pf-switch>
-          <label for="switch" data-state="on">Message when on</label>
-          <label for="switch" data-state="off" hidden>Message when off</label>
-        </div>
-        `);
-            element = container.querySelector('pf-switch');
-            snapshot = await a11ySnapshot({ selector: '#switch' });
-        });
-        it('is accessible', function () {
-            expect(snapshot.role).to.equal('checkbox');
-            expect(snapshot.name).to.be.ok;
-            expect(snapshot.checked).to.be.false;
-        });
-        it('should show the label for the unchecked state', function () {
-            expect(snapshot.name).to.equal('Message when off');
-        });
-        describe('clicking the checkbox', function () {
-            beforeEach(async function () {
-                element.click();
-                await element.updateComplete;
-                await nextFrame();
-                snapshot = await a11ySnapshot({ selector: '#switch' });
-            });
-            it('should be checked', function () {
-                expect(element.checked).to.be.true;
-                expect(snapshot.checked).to.be.true;
-            });
-            it('should show the label for the checked state', function () {
-                expect(snapshot.name).to.equal('Message when on');
-            });
-        });
-    });
-    describe('when checked attr is present', function () {
-        let element;
-        beforeEach(async function () {
-            element = await createFixture(html `
-        <pf-switch checked></pf-switch>
-      `);
-        });
-        it('should display a check icon', async function () {
-            // TODO: can we test this without inspecting the private shadowRoot?
-            const svg = element.shadowRoot.querySelector('svg');
-            expect(svg).to.be.ok;
-            expect(svg?.hasAttribute('hidden')).to.be.false;
-        });
-    });
-    describe('when checked and show-check-icon attrs are present', function () {
-        let element;
-        beforeEach(async function () {
-            const container = await createFixture(html `
-        <div>
-          <pf-switch id="switch" show-check-icon checked></pf-switch>
-          <label for="switch" data-state="on">Message when on</label>
-          <label for="switch" data-state="off">Message when off</label>
-        </div>
-      `);
-            element = container.querySelector('pf-switch');
-        });
-        it('should display a check icon', async function () {
-            // TODO: can we test this without inspecting the private shadowRoot?
-            const svg = element.shadowRoot.querySelector('svg');
-            expect(svg).to.be.ok;
-            expect(svg?.hasAttribute('hidden')).to.be.false;
-        });
-    });
-    describe('when checked and show-check-icon attrs are present', function () {
-        let element;
-        beforeEach(async function () {
-            element = await createFixture(html `
-        <pf-switch id="switch" show-check-icon checked></pf-switch>
-        <label for="switch" data-state="on">Message when on</label>
-        <label for="switch" data-state="off">Message when off</label>
-      `);
-        });
-        it('should display a check icon', async function () {
-            // TODO: can we test this without inspecting the private shadowRoot?
-            const svg = element.shadowRoot.querySelector('svg');
-            expect(svg).to.be.ok;
-            expect(svg?.hasAttribute('hidden')).to.be.false;
-        });
-    });
-    describe('when nested inside a label element', function () {
-        let label;
-        let element;
-        let snapshot;
-        beforeEach(async function () {
-            label = await createFixture(html `
-        <label>
-          <span>Dark Mode</span>
-          <pf-switch id="switch"></pf-switch>
-        </label>
-      `);
-            element = label.querySelector('pf-switch');
-            snapshot = await a11ySnapshot({ selector: 'pf-switch' });
-        });
-        it('does not hide label', function () {
-            expect(label.hidden).to.be.false;
-        });
-        it('has an accessible name', function () {
-            expect(snapshot.name).to.equal('Dark Mode');
-        });
-        describe('clicking the label', function () {
-            beforeEach(function () {
-                label.click();
-            });
-            it('toggles the state', function () {
-                expect(element.checked).to.be.true;
-            });
-        });
-        describe('clicking the switch', function () {
-            beforeEach(function () {
-                element.click();
-            });
-            it('toggles the state', function () {
-                expect(element.checked).to.be.true;
-            });
-        });
-    });
-    // TODO: test keyboard a11y with wtr sendKeys
-});
-//# sourceMappingURL=pf-switch.spec.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"pf-switch.spec.js","sourceRoot":"","sources":["pf-switch.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import type { A11yTreeSnapshot } from '@patternfly/pfe-tools/test/a11y-snapshot.js';\nimport { expect, html, nextFrame } from '@open-wc/testing';\nimport { createFixture } from '@patternfly/pfe-tools/test/create-fixture.js';\nimport { a11ySnapshot } from '@patternfly/pfe-tools/test/a11y-snapshot.js';\n\nimport { PfSwitch } from '@patternfly/elements/pf-switch/pf-switch.js';\n\ndescribe('<pf-switch>', function() {\n  describe('simply instantiating', function() {\n    let element: PfSwitch;\n    let snapshot: A11yTreeSnapshot;\n    beforeEach(async function() {\n      const container = await createFixture<PfSwitch>(html`\n        <div>\n          <pf-switch></pf-switch>\n        </div>\n      `);\n      element = container.querySelector('pf-switch')!;\n      snapshot = await a11ySnapshot({ selector: 'pf-switch' });\n    });\n    it('should upgrade', async function() {\n      const klass = customElements.get('pf-switch');\n      expect(element)\n        .to.be.an.instanceOf(klass)\n        .and\n        .to.be.an.instanceOf(PfSwitch);\n    });\n    it('has accessible role', function() {\n      expect(snapshot.role).to.equal('checkbox');\n    });\n    it('has accessible checked field', function() {\n      expect(snapshot.role).to.equal('checkbox');\n    });\n    it('requires accessible name', function() {\n      // Double negative - this would fail an accessibility audit,\n      // but that failure would be correct, because the template instantiated\n      // in this test's beforeeach hook does not have an accessible name\n      expect(snapshot.name).to.not.be.ok;\n    });\n  });\n\n  describe('with labels for on and off state', function() {\n    let element: PfSwitch;\n    let snapshot: A11yTreeSnapshot;\n    beforeEach(async function() {\n      const container = await createFixture<PfSwitch>(html`\n        <div>\n          <pf-switch id=\"switch\"></pf-switch>\n          <label for=\"switch\" data-state=\"on\">Message when on</label>\n          <label for=\"switch\" data-state=\"off\" hidden>Message when off</label>\n        </div>\n        `);\n      element = container.querySelector('pf-switch')!;\n      snapshot = await a11ySnapshot({ selector: '#switch' });\n    });\n\n    it('is accessible', function() {\n      expect(snapshot.role).to.equal('checkbox');\n      expect(snapshot.name).to.be.ok;\n      expect(snapshot.checked).to.be.false;\n    });\n\n    it('should show the label for the unchecked state', function() {\n      expect(snapshot.name).to.equal('Message when off');\n    });\n\n    describe('clicking the checkbox', function() {\n      beforeEach(async function() {\n        element.click();\n        await element.updateComplete;\n        await nextFrame();\n        snapshot = await a11ySnapshot({ selector: '#switch' });\n      });\n      it('should be checked', function() {\n        expect(element.checked).to.be.true;\n        expect(snapshot.checked).to.be.true;\n      });\n      it('should show the label for the checked state', function() {\n        expect(snapshot.name).to.equal('Message when on');\n      });\n    });\n  });\n\n  describe('when checked attr is present', function() {\n    let element: PfSwitch;\n    beforeEach(async function() {\n      element = await createFixture<PfSwitch>(html`\n        <pf-switch checked></pf-switch>\n      `);\n    });\n    it('should display a check icon', async function() {\n      // TODO: can we test this without inspecting the private shadowRoot?\n      const svg = element.shadowRoot.querySelector('svg');\n      expect(svg).to.be.ok;\n      expect(svg?.hasAttribute('hidden')).to.be.false;\n    });\n  });\n\n  describe('when checked and show-check-icon attrs are present', function() {\n    let element: PfSwitch;\n    beforeEach(async function() {\n      const container = await createFixture<PfSwitch>(html`\n        <div>\n          <pf-switch id=\"switch\" show-check-icon checked></pf-switch>\n          <label for=\"switch\" data-state=\"on\">Message when on</label>\n          <label for=\"switch\" data-state=\"off\">Message when off</label>\n        </div>\n      `);\n      element = container.querySelector('pf-switch')!;\n    });\n    it('should display a check icon', async function() {\n      // TODO: can we test this without inspecting the private shadowRoot?\n      const svg = element.shadowRoot.querySelector('svg');\n      expect(svg).to.be.ok;\n      expect(svg?.hasAttribute('hidden')).to.be.false;\n    });\n  });\n\n  describe('when checked and show-check-icon attrs are present', function() {\n    let element: PfSwitch;\n    beforeEach(async function() {\n      element = await createFixture<PfSwitch>(html`\n        <pf-switch id=\"switch\" show-check-icon checked></pf-switch>\n        <label for=\"switch\" data-state=\"on\">Message when on</label>\n        <label for=\"switch\" data-state=\"off\">Message when off</label>\n      `);\n    });\n    it('should display a check icon', async function() {\n      // TODO: can we test this without inspecting the private shadowRoot?\n      const svg = element.shadowRoot.querySelector('svg');\n      expect(svg).to.be.ok;\n      expect(svg?.hasAttribute('hidden')).to.be.false;\n    });\n  });\n\n  describe('when nested inside a label element', function() {\n    let label: HTMLLabelElement;\n    let element: PfSwitch;\n    let snapshot: A11yTreeSnapshot;\n    beforeEach(async function() {\n      label = await createFixture<HTMLLabelElement>(html`\n        <label>\n          <span>Dark Mode</span>\n          <pf-switch id=\"switch\"></pf-switch>\n        </label>\n      `);\n      element = label.querySelector('pf-switch')!;\n      snapshot = await a11ySnapshot({ selector: 'pf-switch' });\n    });\n    it('does not hide label', function() {\n      expect(label.hidden).to.be.false;\n    });\n    it('has an accessible name', function() {\n      expect(snapshot.name).to.equal('Dark Mode');\n    });\n    describe('clicking the label', function() {\n      beforeEach(function() {\n        label.click();\n      });\n      it('toggles the state', function() {\n        expect(element.checked).to.be.true;\n      });\n    });\n    describe('clicking the switch', function() {\n      beforeEach(function() {\n        element.click();\n      });\n      it('toggles the state', function() {\n        expect(element.checked).to.be.true;\n      });\n    });\n  });\n\n  // TODO: test keyboard a11y with wtr sendKeys\n});\n"]}

package/pf-tabs/demo/demo.css

@@ -1,62 +0,0 @@
-main {
-  display: block;
-  grid: unset;
-}
-
-.example {
-  margin: 0 auto;
-  padding: 0 16px 32px;
-  width: 100%;
-  max-width: 1008px;
-}
-
-.example:last-of-type {
-  padding-block-end: 64px;
-}
-
-.input {
-  margin-block-start: 16px;
-}
-
-@media screen and (min-width: 768px) {
-  .example {
-    padding: 0 32px 32px;
-  }
-}
-
-/*
-  Inset Examples set class on host::part(tabs-container)
-*/
-.inset-sm::part(tabs-container) {
-  --pf-c-tabs--inset: var(--pf-global--spacer--sm, 0.5rem);
-  --pf-c-tabs--m-vertical--inset: var(--pf-global--spacer--sm, 0.5rem);
-  --pf-c-tabs--m-vertical--m-box--inset: var(--pf-global--spacer--sm, 0.5rem);
-}
-
-.inset-md::part(tabs-container) {
-  --pf-c-tabs--inset: var(--pf-global--spacer--md, 1rem);
-  --pf-c-tabs--m-vertical--inset: var(--pf-global--spacer--md, 1rem);
-  --pf-c-tabs--m-vertical--m-box--inset: var(--pf-global--spacer--md, 1rem);
-}
-
-.inset-lg::part(tabs-container) {
-  --pf-c-tabs--inset: var(--pf-global--spacer--lg, 1.5rem);
-  --pf-c-tabs--m-vertical--inset: var(--pf-global--spacer--lg, 1.5rem);
-  --pf-c-tabs--m-vertical--m-box--inset: var(--pf-global--spacer--lg, 1.5rem);
-}
-
-.inset-xl::part(tabs-container) {
-  --pf-c-tabs--inset: var(--pf-global--spacer--xl, 2rem);
-  --pf-c-tabs--m-vertical--inset: var(--pf-global--spacer--xl, 2rem);
-  --pf-c-tabs--m-vertical--m-box--inset: var(--pf-global--spacer--xl, 2rem);
-}
-
-.inset-2xl::part(tabs-container) {
-  --pf-c-tabs--inset: var(--pf-global--spacer--2xl, 3rem);
-  --pf-c-tabs--m-vertical--inset: var(--pf-global--spacer--2xl, 3rem);
-  --pf-c-tabs--m-vertical--m-box--inset: var(--pf-global--spacer--2xl, 3rem);
-}
-
-.inset-page::part(tabs-container) {
-  --pf-c-tabs--inset: var(--pf-c-tabs--m-page-insets--inset, var(--pf-global--spacer--md, 1rem));
-}

package/pf-tabs/demo/pf-tabs.js

@@ -1,44 +0,0 @@
-import 'element-internals-polyfill';
-import '@patternfly/elements/pf-icon/pf-icon.js';
-import '@patternfly/elements/pf-switch/pf-switch.js';
-import '@patternfly/elements/pf-tabs/pf-tabs.js';
-
-const toggleVariant = document.getElementById('toggle-variant');
-const resize = document.getElementById('overflow');
-const verticalInput = document.getElementById('toggle-vertical');
-const resizeInput = document.getElementById('toggle-resize');
-const verticalVariant = document.querySelector('pf-tabs[vertical]');
-const boxVariant = document.querySelector('pf-tabs[box]');
-const inset = document.querySelector('#inset');
-
-function variantToggle() {
-  boxVariant.setAttribute('box', toggleVariant.checked ? 'dark' : 'light');
-}
-
-function verticalToggle() {
-  if (verticalInput.checked) {
-    verticalVariant.setAttribute('box', 'dark');
-  } else {
-    verticalVariant.removeAttribute('box');
-  }
-}
-
-function resizeToggle() {
-  if (resizeInput.checked) {
-    resize.setAttribute('box', 'dark');
-  } else {
-    resize.removeAttribute('box');
-  }
-}
-
-function insetToggle(event) {
-  inset.classList = event.target.value;
-}
-
-for (const input of document.querySelectorAll('input[name="toggle-inset"]')) {
-  input.addEventListener('change', insetToggle);
-}
-
-toggleVariant.addEventListener('change', variantToggle);
-resizeInput.addEventListener('change', resizeToggle);
-verticalInput.addEventListener('change', verticalToggle);

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

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

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

@@ -1,13 +0,0 @@
-import { test } from '@playwright/test';
-import { PfeDemoPage } from '@patternfly/pfe-tools/test/playwright/PfeDemoPage.js';
-const tagName = 'pf-tabs';
-test.describe(tagName, () => {
-    // Run tests in this file with portrait-like viewport.
-    test.use({ viewport: { width: 1200, height: 1000 } });
-    test('snapshot', async ({ page }) => {
-        const componentPage = new PfeDemoPage(page, tagName);
-        await componentPage.navigate();
-        await componentPage.snapshot();
-    });
-});
-//# sourceMappingURL=pf-tabs.e2e.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"pf-tabs.e2e.js","sourceRoot":"","sources":["pf-tabs.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,WAAW,EAAE,MAAM,sDAAsD,CAAC;AAEnF,MAAM,OAAO,GAAG,SAAS,CAAC;AAE1B,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE,GAAG,EAAE;IAC1B,sDAAsD;IACtD,IAAI,CAAC,GAAG,CAAC,EAAE,QAAQ,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,EAAE,CAAC,CAAC;IACtD,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-tabs';\n\ntest.describe(tagName, () => {\n  // Run tests in this file with portrait-like viewport.\n  test.use({ viewport: { width: 1200, height: 1000 } });\n  test('snapshot', async ({ page }) => {\n    const componentPage = new PfeDemoPage(page, tagName);\n    await componentPage.navigate();\n    await componentPage.snapshot();\n  });\n});\n"]}

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

@@ -1 +0,0 @@
-import '@patternfly/pfe-tools/test/stub-logger.js';

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

@@ -1,178 +0,0 @@
-import { expect, html, nextFrame, aTimeout } from '@open-wc/testing';
-import { createFixture } from '@patternfly/pfe-tools/test/create-fixture.js';
-import { a11ySnapshot } from '@patternfly/pfe-tools/test/a11y-snapshot.js';
-import { setViewport, sendKeys } from '@web/test-runner-commands';
-import { BaseTab } from '../BaseTab.js';
-import { PfTabs } from '../pf-tabs.js';
-import '@patternfly/pfe-tools/test/stub-logger.js';
-const TEMPLATE = html `
-    <pf-tabs>
-      <pf-tab slot="tab" active>Users</pf-tab>
-      <pf-tab-panel>Users</pf-tab-panel>
-      <pf-tab slot="tab">Containers</pf-tab>
-      <pf-tab-panel>Containers</pf-tab-panel>
-      <pf-tab slot="tab">Database</pf-tab>
-      <pf-tab-panel>Database</pf-tab-panel>
-      <pf-tab slot="tab" disabled>Disabled</pf-tab>
-      <pf-tab-panel>Disabled</pf-tab-panel>
-      <pf-tab slot="tab" aria-disabled="true">Aria Disabled</pf-tab>
-      <pf-tab-panel>Aria Disabled</pf-tab-panel>
-    </pf-tabs>
-  `;
-const DISABLED = html `
-  <pf-tabs>
-    <pf-tab slot="tab" disabled>Users</pf-tab>
-    <pf-tab-panel>Users</pf-tab-panel>
-    <pf-tab slot="tab">Containers</pf-tab>
-    <pf-tab-panel>Containers</pf-tab-panel>
-    <pf-tab slot="tab">Database</pf-tab>
-    <pf-tab-panel>Database</pf-tab-panel>
-    <pf-tab slot="tab" disabled>Disabled</pf-tab>
-    <pf-tab-panel>Disabled</pf-tab-panel>
-    <pf-tab slot="tab" aria-disabled="true">Aria Disabled</pf-tab>
-    <pf-tab-panel>Aria Disabled</pf-tab-panel>
-  </pf-tabs>
-`;
-describe('<pf-tabs>', function () {
-    it('should upgrade', async function () {
-        const el = await createFixture(TEMPLATE);
-        expect(el, 'pf-tabs should be an instance of PfeTabs')
-            .to.be.an.instanceOf(customElements.get('pf-tabs'))
-            .and
-            .to.be.an.instanceOf(PfTabs);
-    });
-    it('should apply correct aria attributes', async function () {
-        const el = await createFixture(TEMPLATE);
-        await nextFrame();
-        const tabs = el.querySelectorAll('pf-tab');
-        const tabPanels = el.querySelectorAll('pf-tab-panels');
-        tabs.forEach(function (tab, index) {
-            const tabId = tab.getAttribute('id');
-            const tabControls = tab.getAttribute('aria-controls');
-            const tabButton = tab.shadowRoot?.querySelector('button');
-            expect(tabButton?.getAttribute('role')).to.equal('tab');
-            tabPanels.forEach(function (panel, pindex) {
-                if (index === pindex) {
-                    expect(panel.getAttribute('aria-labelledby')).to.equal(tabId);
-                    expect(panel.id).to.equal(tabControls);
-                }
-            });
-        });
-    });
-    it('should activate the first focusable tab when first tab is disabled and no active is given', async function () {
-        const el = await createFixture(DISABLED);
-        await nextFrame();
-        const secondTab = el.querySelector('pf-tab:nth-of-type(2)');
-        expect(secondTab.hasAttribute('active')).to.equal(true);
-    });
-    it('should activate tab when given an active attribute', async function () {
-        const el = await createFixture(TEMPLATE);
-        const tab = el.querySelector('pf-tab:nth-of-type(3)');
-        tab.setAttribute('active', '');
-        await nextFrame();
-        expect(tab.hasAttribute('active'), 'active attr').to.equal(true);
-        const panel = (await a11ySnapshot()).children.find(x => x.role === 'tabpanel');
-        expect(panel?.name, 'active panel').to.equal('Database');
-    });
-    it('should activate tab when activeIndex property is changed', async function () {
-        const el = await createFixture(TEMPLATE);
-        el.activeIndex = 2;
-        await nextFrame();
-        el.activeIndex = 0;
-        await nextFrame();
-        const tab = el.querySelector('pf-tab:first-of-type');
-        expect(tab.hasAttribute('active')).to.equal(true);
-        const panel = (await a11ySnapshot()).children.find(x => x.role === 'tabpanel');
-        expect(panel?.name, 'active panel').to.equal('Users');
-    });
-    it('should change focus when keyboard navigation is used', async function () {
-        const el = await createFixture(TEMPLATE);
-        await el.updateComplete;
-        const firstTab = el.querySelector('pf-tab:first-of-type');
-        const secondTab = el.querySelector('pf-tab:nth-of-type(2)')?.id;
-        firstTab?.focus();
-        await nextFrame();
-        const initial = document.activeElement?.id;
-        await sendKeys({ down: 'ArrowRight' });
-        await nextFrame();
-        const after = document.activeElement?.id;
-        expect(initial).to.not.equal(after);
-        expect(secondTab).to.equal(after);
-    });
-    it('should open panel at same index of selected tab', async function () {
-        const el = await createFixture(TEMPLATE);
-        await nextFrame();
-        el.activeIndex = 1;
-        await nextFrame();
-        const inactivePanel = el.querySelector('pf-tab-panel:first-of-type');
-        /* given active-key of 1 on a zero based index, nth-of-type(n) takes a 1 based index = 2. */
-        const activePanel = el.querySelector('pf-tab-panel:nth-of-type(2)');
-        expect(inactivePanel.hasAttribute('hidden')).to.equal(true);
-        expect(activePanel.hasAttribute('hidden')).to.equal(false);
-    });
-    describe('vertical tabs', function () {
-        it('should have vertical styles', async function () {
-            const el = await createFixture(TEMPLATE);
-            el.setAttribute('vertical', '');
-            await nextFrame();
-            const tabs = el.shadowRoot.querySelector('[part="tabs"]');
-            const tabsVerticalStyles = getComputedStyle(tabs).flexDirection;
-            expect(tabsVerticalStyles).to.be.equal('column');
-        });
-    });
-    describe('disabled tabs', function () {
-        beforeEach(async function () {
-            await setViewport({ width: 320, height: 640 });
-        });
-        it('should aria-disable the tab if disabled', async function () {
-            const el = await createFixture(TEMPLATE);
-            const disabledTab = el.querySelector('pf-tab:nth-of-type(2)');
-            disabledTab.disabled = true;
-            await nextFrame();
-            const tab = (await a11ySnapshot()).children.find(x => x.role === 'tab' && x.name === 'Containers');
-            expect(tab?.disabled).to.be.true;
-        });
-        it('should have disabled css styles if disabled', async function () {
-            const el = await createFixture(TEMPLATE);
-            const disabledTab = el.querySelector('pf-tab:first-of-type');
-            disabledTab.setAttribute('disabled', 'disabled');
-            await nextFrame();
-            const button = disabledTab.shadowRoot.firstElementChild;
-            const disabledStyles = getComputedStyle(button).backgroundColor;
-            expect(disabledStyles).to.equal('rgb(245, 245, 245)');
-        });
-        it('should have disabled css styles if aria-disabled attribute is true', async function () {
-            const el = await createFixture(TEMPLATE);
-            const disabledTab = el.querySelector('pf-tab:first-of-type');
-            disabledTab.setAttribute('aria-disabled', 'true');
-            await nextFrame();
-            const button = disabledTab.shadowRoot.firstElementChild;
-            const disabledStyles = getComputedStyle(button).backgroundColor;
-            expect(disabledStyles).to.equal('rgb(245, 245, 245)');
-        });
-    });
-    describe('on small screen', function () {
-        beforeEach(async function () {
-            await setViewport({ width: 320, height: 640 });
-        });
-        it('should overflow if too wide', async function () {
-            const el = await createFixture(TEMPLATE);
-            const tabs = el.shadowRoot.querySelector('[part="tabs"]');
-            const tabsOverflow = getComputedStyle(tabs).overflowX === 'auto';
-            expect(tabsOverflow).to.equal(true);
-        });
-        it('should have visible scroll buttons if overflowed', async function () {
-            const el = await createFixture(TEMPLATE);
-            // Property 'scrollTimeoutDelay' is protected and only accessible within class 'PfeTabs' and its subclasses.
-            // using 150 as a static representation.
-            await aTimeout(150);
-            const previousTab = el.shadowRoot.querySelector('#previousTab');
-            const nextTab = el.shadowRoot.querySelector('#nextTab');
-            const prevDisplayStyle = getComputedStyle(previousTab).display;
-            const nextDisplayStyle = getComputedStyle(nextTab).display;
-            expect(prevDisplayStyle).to.not.equal('none');
-            expect(nextDisplayStyle).to.not.equal('none');
-        });
-    });
-});
-//# sourceMappingURL=pf-tabs.spec.js.map