@patternfly/elements 1.0.0

package/pf-spinner/pf-spinner.css

@@ -0,0 +1,76 @@
+[hidden] {
+  display: none !important;
+}
+
+div {
+  display: contents;
+}
+
+svg {
+  width: var(--pf-c-spinner--Width,
+    var(--pf-c-spinner--diameter,
+      var(--pf-global--icon--FontSize--xl, 3.375rem)));
+  height: var(--pf-c-spinner--Height,
+    var(--pf-c-spinner--diameter,
+      var(--pf-global--icon--FontSize--xl, 3.375rem)));
+  animation:
+    pf-c-spinner-animation-rotate
+    calc(var(--pf-c-spinner--AnimationDuration, 1.4s) * 2)
+    var(--pf-c-spinner--AnimationTimingFunction, linear) infinite;
+}
+
+:host([size="sm"]) div {
+  --pf-c-spinner--diameter: var(--pf-c-spinner--m-sm--diameter,
+    var(--pf-global--icon--FontSize--sm, 0.625rem));
+}
+
+:host([size="md"]) div {
+  --pf-c-spinner--diameter: var(--pf-c-spinner--m-md--diameter,
+    var(--pf-global--icon--FontSize--md, 1.125rem));
+}
+
+:host([size="lg"]) div {
+  --pf-c-spinner--diameter: var(--pf-c-spinner--m-lg--diameter,
+    var(--pf-global--icon--FontSize--lg, 1.5rem));
+}
+
+:host([size="xl"]) div {
+  --pf-c-spinner--diameter: var(--pf-c-spinner--m-xl--diameter,
+    var(--pf-global--icon--FontSize--xl, 3.375rem));
+}
+
+circle {
+  stroke: var(--pf-c-spinner--Color, var(--pf-global--primary-color--100, #06c));
+  stroke-width: var(--pf-c-spinner--stroke-width, 10);
+  animation:
+    pf-c-spinner-animation-dash
+    var(--pf-c-spinner--AnimationDuration, 1.4s)
+    var(--pf-c-spinner__path--AnimationTimingFunction, ease-in-out) infinite;
+}
+
+@keyframes pf-c-spinner-animation-rotate {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes pf-c-spinner-animation-dash {
+  0% {
+    stroke-dashoffset: 280;
+    transform: rotate(0);
+  }
+  15% {
+    stroke-width: calc(var(--pf-c-spinner__path--StrokeWidth, 10) - 4);
+  }
+  40% {
+    stroke-dashoffset: 150;
+    stroke-dasharray: 220;
+  }
+  100% {
+    stroke-dashoffset: 280;
+    transform: rotate(720deg);
+  }
+}

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

@@ -0,0 +1,26 @@
+import { BaseSpinner } from './BaseSpinner.js';
+/**
+ * @cssprop {<length>} --pf-c-spinner--diameter                      {@default `3.375rem`}
+ * @cssprop {<length>} --pf-c-spinner--Width                         {@default `3.375rem`}
+ * @cssprop {<length>} --pf-c-spinner--Height                        {@default `3.375rem`}
+ * @cssprop {<color>}  --pf-c-spinner--Color                         {@default `#06c`}
+ * @cssprop {<length>} --pf-c-spinner--m-sm--diameter                {@default `0.625rem`}
+ * @cssprop {<length>} --pf-c-spinner--m-md--diameter                {@default `1.125rem`}
+ * @cssprop {<length>} --pf-c-spinner--m-lg--diameter                {@default `1.5rem`}
+ * @cssprop {<length>} --pf-c-spinner--m-xl--diameter                {@default `3.375rem`}
+ * @cssprop {<time>}   --pf-c-spinner--AnimationDuration             {@default `1.4s`}
+ * @cssprop {<string>} --pf-c-spinner--AnimationTimingFunction       {@default `linear`}
+ * @cssprop {<number>} --pf-c-spinner--stroke-width                  {@default `10`}
+ * @cssprop {<color>}  --pf-c-spinner__path--Stroke                  {@default `#06c`}
+ * @cssprop {<number>} --pf-c-spinner__path--StrokeWidth             {@default `10`}
+ * @cssprop {<string>} --pf-c-spinner__path--AnimationTimingFunction {@default `ease-in-out`}
+ */
+export declare class PfSpinner extends BaseSpinner {
+    static readonly styles: import("lit").CSSResult[];
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'pf-spinner': PfSpinner;
+    }
+}

package/pf-spinner/pf-spinner.js

@@ -0,0 +1,34 @@
+import { __decorate } from "tslib";
+import { html } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import { BaseSpinner } from './BaseSpinner.js';
+import { css } from "lit";
+const styles = css `[hidden] {\n  display: none !important;\n}\n\ndiv {\n  display: contents;\n}\n\nsvg {\n  width: var(--pf-c-spinner--Width,\n    var(--pf-c-spinner--diameter,\n      var(--pf-global--icon--FontSize--xl, 3.375rem)));\n  height: var(--pf-c-spinner--Height,\n    var(--pf-c-spinner--diameter,\n      var(--pf-global--icon--FontSize--xl, 3.375rem)));\n  animation:\n    pf-c-spinner-animation-rotate\n    calc(var(--pf-c-spinner--AnimationDuration, 1.4s) * 2)\n    var(--pf-c-spinner--AnimationTimingFunction, linear) infinite;\n}\n\n:host([size="sm"]) div {\n  --pf-c-spinner--diameter: var(--pf-c-spinner--m-sm--diameter,\n    var(--pf-global--icon--FontSize--sm, 0.625rem));\n}\n\n:host([size="md"]) div {\n  --pf-c-spinner--diameter: var(--pf-c-spinner--m-md--diameter,\n    var(--pf-global--icon--FontSize--md, 1.125rem));\n}\n\n:host([size="lg"]) div {\n  --pf-c-spinner--diameter: var(--pf-c-spinner--m-lg--diameter,\n    var(--pf-global--icon--FontSize--lg, 1.5rem));\n}\n\n:host([size="xl"]) div {\n  --pf-c-spinner--diameter: var(--pf-c-spinner--m-xl--diameter,\n    var(--pf-global--icon--FontSize--xl, 3.375rem));\n}\n\ncircle {\n  stroke: var(--pf-c-spinner--Color, var(--pf-global--primary-color--100, #06c));\n  stroke-width: var(--pf-c-spinner--stroke-width, 10);\n  animation:\n    pf-c-spinner-animation-dash\n    var(--pf-c-spinner--AnimationDuration, 1.4s)\n    var(--pf-c-spinner__path--AnimationTimingFunction, ease-in-out) infinite;\n}\n\n@keyframes pf-c-spinner-animation-rotate {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n@keyframes pf-c-spinner-animation-dash {\n  0% {\n    stroke-dashoffset: 280;\n    transform: rotate(0);\n  }\n  15% {\n    stroke-width: calc(var(--pf-c-spinner__path--StrokeWidth, 10) - 4);\n  }\n  40% {\n    stroke-dashoffset: 150;\n    stroke-dasharray: 220;\n  }\n  100% {\n    stroke-dashoffset: 280;\n    transform: rotate(720deg);\n  }\n}\n`;
+/**
+ * @cssprop {<length>} --pf-c-spinner--diameter                      {@default `3.375rem`}
+ * @cssprop {<length>} --pf-c-spinner--Width                         {@default `3.375rem`}
+ * @cssprop {<length>} --pf-c-spinner--Height                        {@default `3.375rem`}
+ * @cssprop {<color>}  --pf-c-spinner--Color                         {@default `#06c`}
+ * @cssprop {<length>} --pf-c-spinner--m-sm--diameter                {@default `0.625rem`}
+ * @cssprop {<length>} --pf-c-spinner--m-md--diameter                {@default `1.125rem`}
+ * @cssprop {<length>} --pf-c-spinner--m-lg--diameter                {@default `1.5rem`}
+ * @cssprop {<length>} --pf-c-spinner--m-xl--diameter                {@default `3.375rem`}
+ * @cssprop {<time>}   --pf-c-spinner--AnimationDuration             {@default `1.4s`}
+ * @cssprop {<string>} --pf-c-spinner--AnimationTimingFunction       {@default `linear`}
+ * @cssprop {<number>} --pf-c-spinner--stroke-width                  {@default `10`}
+ * @cssprop {<color>}  --pf-c-spinner__path--Stroke                  {@default `#06c`}
+ * @cssprop {<number>} --pf-c-spinner__path--StrokeWidth             {@default `10`}
+ * @cssprop {<string>} --pf-c-spinner__path--AnimationTimingFunction {@default `ease-in-out`}
+ */
+let PfSpinner = class PfSpinner extends BaseSpinner {
+    render() {
+        return html `<div style=${styleMap({ '--pf-c-spinner--diameter': this.diameter })}>${super.render()}</div>`;
+    }
+};
+PfSpinner.styles = [...BaseSpinner.styles, styles];
+PfSpinner = __decorate([
+    customElement('pf-spinner')
+], PfSpinner);
+export { PfSpinner };
+//# sourceMappingURL=pf-spinner.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pf-spinner.js","sourceRoot":"","sources":["pf-spinner.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAEvD,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;;;AAG/C;;;;;;;;;;;;;;;GAeG;AAGI,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,WAAW;IAExC,MAAM;QACJ,OAAO,IAAI,CAAA,cAAc,QAAQ,CAAC,EAAE,0BAA0B,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC,IAAI,KAAK,CAAC,MAAM,EAAE,QAAQ,CAAC;IAC7G,CAAC;;AAHe,gBAAM,GAAG,CAAC,GAAG,WAAW,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAD9C,SAAS;IADrB,aAAa,CAAC,YAAY,CAAC;GACf,SAAS,CAKrB;SALY,SAAS","sourcesContent":["import { html } from 'lit';\nimport { customElement } from 'lit/decorators.js';\nimport { styleMap } from 'lit/directives/style-map.js';\n\nimport { BaseSpinner } from './BaseSpinner.js';\nimport styles from './pf-spinner.css';\n\n/**\n * @cssprop {<length>} --pf-c-spinner--diameter                      {@default `3.375rem`}\n * @cssprop {<length>} --pf-c-spinner--Width                         {@default `3.375rem`}\n * @cssprop {<length>} --pf-c-spinner--Height                        {@default `3.375rem`}\n * @cssprop {<color>}  --pf-c-spinner--Color                         {@default `#06c`}\n * @cssprop {<length>} --pf-c-spinner--m-sm--diameter                {@default `0.625rem`}\n * @cssprop {<length>} --pf-c-spinner--m-md--diameter                {@default `1.125rem`}\n * @cssprop {<length>} --pf-c-spinner--m-lg--diameter                {@default `1.5rem`}\n * @cssprop {<length>} --pf-c-spinner--m-xl--diameter                {@default `3.375rem`}\n * @cssprop {<time>}   --pf-c-spinner--AnimationDuration             {@default `1.4s`}\n * @cssprop {<string>} --pf-c-spinner--AnimationTimingFunction       {@default `linear`}\n * @cssprop {<number>} --pf-c-spinner--stroke-width                  {@default `10`}\n * @cssprop {<color>}  --pf-c-spinner__path--Stroke                  {@default `#06c`}\n * @cssprop {<number>} --pf-c-spinner__path--StrokeWidth             {@default `10`}\n * @cssprop {<string>} --pf-c-spinner__path--AnimationTimingFunction {@default `ease-in-out`}\n */\n\n@customElement('pf-spinner')\nexport class PfSpinner extends BaseSpinner {\n  static readonly styles = [...BaseSpinner.styles, styles];\n  render() {\n    return html`<div style=${styleMap({ '--pf-c-spinner--diameter': this.diameter })}>${super.render()}</div>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-spinner': PfSpinner;\n  }\n}\n"]}

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

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

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

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

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

@@ -0,0 +1 @@
+{"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

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

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

@@ -0,0 +1,52 @@
+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

@@ -0,0 +1 @@
+{"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/BaseSwitch.css

@@ -0,0 +1,36 @@
+:host {
+  display: inline-block;
+}
+
+svg {
+  fill: currentcolor;
+}
+
+[hidden] {
+  display: none !important;
+}
+
+:host(:disabled) {
+  pointer-events: none;
+  cursor: not-allowed;
+}
+
+:host(:disabled) #container {
+  cursor: not-allowed;
+}
+
+:host(:disabled:focus-within) #container {
+  outline: none;
+}
+
+#container {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+}
+
+#container::before {
+  position: absolute;
+  display: block;
+  content: "";
+}

package/pf-switch/BaseSwitch.d.ts

@@ -0,0 +1,25 @@
+import { LitElement } from 'lit';
+/**
+ * Switch
+ */
+export declare abstract class BaseSwitch extends LitElement {
+    #private;
+    static readonly styles: import("lit").CSSResult[];
+    static readonly shadowRootOptions: {
+        delegatesFocus: boolean;
+        mode: ShadowRootMode;
+        slotAssignment?: SlotAssignmentMode | undefined;
+        customElements?: CustomElementRegistry | undefined;
+    };
+    static readonly formAssociated = true;
+    shadowRoot: ShadowRoot;
+    label?: string;
+    showCheckIcon: boolean;
+    checked: boolean;
+    disabled: boolean;
+    get labels(): NodeListOf<HTMLLabelElement>;
+    connectedCallback(): void;
+    formDisabledCallback(disabled: boolean): void;
+    render(): import("lit-html").TemplateResult<1>;
+    updated(): void;
+}

package/pf-switch/BaseSwitch.js

@@ -0,0 +1,94 @@
+var _BaseSwitch_instances, _BaseSwitch_internals, _BaseSwitch_initiallyDisabled, _BaseSwitch_onClick, _BaseSwitch_onKeyup, _BaseSwitch_toggle, _BaseSwitch_updateLabels;
+import { __classPrivateFieldGet, __decorate } from "tslib";
+import { LitElement, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { css } from "lit";
+const styles = css `:host {\n  display: inline-block;\n}\n\nsvg {\n  fill: currentcolor;\n}\n\n[hidden] {\n  display: none !important;\n}\n\n:host(:disabled) {\n  pointer-events: none;\n  cursor: not-allowed;\n}\n\n:host(:disabled) #container {\n  cursor: not-allowed;\n}\n\n:host(:disabled:focus-within) #container {\n  outline: none;\n}\n\n#container {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n}\n\n#container::before {\n  position: absolute;\n  display: block;\n  content: "";\n}\n`;
+/**
+ * Switch
+ */
+export class BaseSwitch extends LitElement {
+    constructor() {
+        super(...arguments);
+        _BaseSwitch_instances.add(this);
+        _BaseSwitch_internals.set(this, this.attachInternals());
+        _BaseSwitch_initiallyDisabled.set(this, this.hasAttribute('disabled'));
+        this.showCheckIcon = false;
+        this.checked = false;
+        this.disabled = __classPrivateFieldGet(this, _BaseSwitch_initiallyDisabled, "f");
+    }
+    get labels() {
+        return __classPrivateFieldGet(this, _BaseSwitch_internals, "f").labels;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.setAttribute('role', 'checkbox');
+        this.addEventListener('click', __classPrivateFieldGet(this, _BaseSwitch_instances, "m", _BaseSwitch_onClick));
+        this.addEventListener('keyup', __classPrivateFieldGet(this, _BaseSwitch_instances, "m", _BaseSwitch_onKeyup));
+        __classPrivateFieldGet(this, _BaseSwitch_instances, "m", _BaseSwitch_updateLabels).call(this);
+    }
+    formDisabledCallback(disabled) {
+        this.disabled = disabled;
+        this.requestUpdate();
+    }
+    render() {
+        return html `
+      <div id="container" tabindex="0">
+        <svg id="toggle" fill="currentColor" height="1em" width="1em" viewBox="0 0 512 512">
+          <path ?hidden=${!this.showCheckIcon} d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z" />
+        </svg>
+      </div>
+    `;
+    }
+    updated() {
+        __classPrivateFieldGet(this, _BaseSwitch_internals, "f").ariaChecked = String(this.checked);
+        __classPrivateFieldGet(this, _BaseSwitch_internals, "f").ariaDisabled = String(this.disabled);
+    }
+}
+_BaseSwitch_internals = new WeakMap(), _BaseSwitch_initiallyDisabled = new WeakMap(), _BaseSwitch_instances = new WeakSet(), _BaseSwitch_onClick = function _BaseSwitch_onClick(event) {
+    // @ts-expect-error: firefox workarounds for double-firing in the case of switch nested in label
+    const { originalTarget, explicitOriginalTarget } = event;
+    if (explicitOriginalTarget) {
+        let labels;
+        if (originalTarget === event.target &&
+            !(labels = Array.from(this.labels)).includes(explicitOriginalTarget) &&
+            labels.includes(this.closest('label'))) {
+            return;
+        }
+    }
+    __classPrivateFieldGet(this, _BaseSwitch_instances, "m", _BaseSwitch_toggle).call(this);
+}, _BaseSwitch_onKeyup = function _BaseSwitch_onKeyup(event) {
+    switch (event.key) {
+        case ' ':
+        case 'Enter':
+            event.preventDefault();
+            __classPrivateFieldGet(this, _BaseSwitch_instances, "m", _BaseSwitch_toggle).call(this);
+    }
+}, _BaseSwitch_toggle = function _BaseSwitch_toggle() {
+    if (this.disabled) {
+        return;
+    }
+    this.checked = !this.checked;
+    __classPrivateFieldGet(this, _BaseSwitch_instances, "m", _BaseSwitch_updateLabels).call(this);
+    this.dispatchEvent(new Event('change', { bubbles: true }));
+}, _BaseSwitch_updateLabels = function _BaseSwitch_updateLabels() {
+    const labelState = this.checked ? 'on' : 'off';
+    if (this.labels.length > 1) {
+        for (const label of this.labels) {
+            label.hidden = label.dataset.state !== labelState;
+        }
+    }
+};
+BaseSwitch.styles = [styles];
+BaseSwitch.shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true, };
+BaseSwitch.formAssociated = true;
+__decorate([
+    property({ reflect: true })
+], BaseSwitch.prototype, "label", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean, attribute: 'show-check-icon' })
+], BaseSwitch.prototype, "showCheckIcon", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], BaseSwitch.prototype, "checked", void 0);
+//# sourceMappingURL=BaseSwitch.js.map

package/pf-switch/BaseSwitch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseSwitch.js","sourceRoot":"","sources":["BaseSwitch.ts"],"names":[],"mappings":";;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;;;AAG7C;;GAEG;AACH,MAAM,OAAgB,UAAW,SAAQ,UAAU;IAAnD;;;QASE,gCAAa,IAAI,CAAC,eAAe,EAAE,EAAC;QAEpC,wCAAqB,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,EAAC;QAIuB,kBAAa,GAAG,KAAK,CAAC;QAEpD,YAAO,GAAG,KAAK,CAAC;QAE5D,aAAQ,GAAG,uBAAA,IAAI,qCAAmB,CAAC;IA6ErC,CAAC;IA3EC,IAAI,MAAM;QACR,OAAO,uBAAA,IAAI,6BAAW,CAAC,MAAsC,CAAC;IAChE,CAAC;IAEQ,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;QACtC,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,uBAAA,IAAI,kDAAS,CAAC,CAAC;QAC9C,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,uBAAA,IAAI,kDAAS,CAAC,CAAC;QAC9C,uBAAA,IAAI,uDAAc,MAAlB,IAAI,CAAgB,CAAC;IACvB,CAAC;IAED,oBAAoB,CAAC,QAAiB;QACpC,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;QACzB,IAAI,CAAC,aAAa,EAAE,CAAC;IACvB,CAAC;IAEQ,MAAM;QACb,OAAO,IAAI,CAAA;;;0BAGW,CAAC,IAAI,CAAC,aAAa;;;KAGxC,CAAC;IACJ,CAAC;IAEQ,OAAO;QACd,uBAAA,IAAI,6BAAW,CAAC,WAAW,GAAG,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QACnD,uBAAA,IAAI,6BAAW,CAAC,YAAY,GAAG,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IACvD,CAAC;;gLAEQ,KAAY;IACnB,gGAAgG;IAChG,MAAM,EAAE,cAAc,EAAE,sBAAsB,EAAE,GAAG,KAAK,CAAC;IACzD,IAAI,sBAAsB,EAAE;QAC1B,IAAI,MAA0B,CAAC;QAC/B,IACE,cAAc,KAAK,KAAK,CAAC,MAAM;YAC/B,CAAC,CAAC,MAAM,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,sBAAsB,CAAC;YACpE,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO,CAAqB,CAAC,EAC1D;YACA,OAAO;SACR;KACF;IACD,uBAAA,IAAI,iDAAQ,MAAZ,IAAI,CAAU,CAAC;AACjB,CAAC,qDAEQ,KAAoB;IAC3B,QAAQ,KAAK,CAAC,GAAG,EAAE;QACjB,KAAK,GAAG,CAAC;QACT,KAAK,OAAO;YACV,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,uBAAA,IAAI,iDAAQ,MAAZ,IAAI,CAAU,CAAC;KAClB;AACH,CAAC;IAGC,IAAI,IAAI,CAAC,QAAQ,EAAE;QACjB,OAAO;KACR;IAED,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;IAC7B,uBAAA,IAAI,uDAAc,MAAlB,IAAI,CAAgB,CAAC;IACrB,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;AAC7D,CAAC;IAGC,MAAM,UAAU,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC;IAC/C,IAAI,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,EAAE;QAC1B,KAAK,MAAM,KAAK,IAAI,IAAI,CAAC,MAAM,EAAE;YAC/B,KAAK,CAAC,MAAM,GAAG,KAAK,CAAC,OAAO,CAAC,KAAK,KAAK,UAAU,CAAC;SACnD;KACF;AACH,CAAC;AA9Fe,iBAAM,GAAG,CAAC,MAAM,CAAC,CAAC;AAElB,4BAAiB,GAAG,EAAE,GAAG,UAAU,CAAC,iBAAiB,EAAE,cAAc,EAAE,IAAI,GAAG,CAAC;AAE/E,yBAAc,GAAG,IAAI,CAAC;AAQT;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yCAAgB;AAE8B;IAAzE,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,iBAAiB,EAAE,CAAC;iDAAuB;AAEpD;IAA3C,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;2CAAiB","sourcesContent":["import { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport styles from './BaseSwitch.css';\n\n/**\n * Switch\n */\nexport abstract class BaseSwitch extends LitElement {\n  static readonly styles = [styles];\n\n  static readonly shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true, };\n\n  static readonly formAssociated = true;\n\n  declare shadowRoot: ShadowRoot;\n\n  #internals = this.attachInternals();\n\n  #initiallyDisabled = this.hasAttribute('disabled');\n\n  @property({ reflect: true }) label?: string;\n\n  @property({ reflect: true, type: Boolean, attribute: 'show-check-icon' }) showCheckIcon = false;\n\n  @property({ reflect: true, type: Boolean }) checked = false;\n\n  disabled = this.#initiallyDisabled;\n\n  get labels(): NodeListOf<HTMLLabelElement> {\n    return this.#internals.labels as NodeListOf<HTMLLabelElement>;\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.setAttribute('role', 'checkbox');\n    this.addEventListener('click', this.#onClick);\n    this.addEventListener('keyup', this.#onKeyup);\n    this.#updateLabels();\n  }\n\n  formDisabledCallback(disabled: boolean) {\n    this.disabled = disabled;\n    this.requestUpdate();\n  }\n\n  override render() {\n    return html`\n      <div id=\"container\" tabindex=\"0\">\n        <svg id=\"toggle\" fill=\"currentColor\" height=\"1em\" width=\"1em\" viewBox=\"0 0 512 512\">\n          <path ?hidden=${!this.showCheckIcon} d=\"M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z\" />\n        </svg>\n      </div>\n    `;\n  }\n\n  override updated() {\n    this.#internals.ariaChecked = String(this.checked);\n    this.#internals.ariaDisabled = String(this.disabled);\n  }\n\n  #onClick(event: Event) {\n    // @ts-expect-error: firefox workarounds for double-firing in the case of switch nested in label\n    const { originalTarget, explicitOriginalTarget } = event;\n    if (explicitOriginalTarget) {\n      let labels: HTMLLabelElement[];\n      if (\n        originalTarget === event.target &&\n        !(labels = Array.from(this.labels)).includes(explicitOriginalTarget) &&\n        labels.includes(this.closest('label') as HTMLLabelElement)\n      ) {\n        return;\n      }\n    }\n    this.#toggle();\n  }\n\n  #onKeyup(event: KeyboardEvent) {\n    switch (event.key) {\n      case ' ':\n      case 'Enter':\n        event.preventDefault();\n        this.#toggle();\n    }\n  }\n\n  #toggle() {\n    if (this.disabled) {\n      return;\n    }\n\n    this.checked = !this.checked;\n    this.#updateLabels();\n    this.dispatchEvent(new Event('change', { bubbles: true }));\n  }\n\n  #updateLabels() {\n    const labelState = this.checked ? 'on' : 'off';\n    if (this.labels.length > 1) {\n      for (const label of this.labels) {\n        label.hidden = label.dataset.state !== labelState;\n      }\n    }\n  }\n}\n"]}

package/pf-switch/demo/demo.css

@@ -0,0 +1,32 @@
+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

@@ -0,0 +1,13 @@
+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/pf-switch.css

@@ -0,0 +1,102 @@
+:host([checked]) #container {
+  color: var(--pf-c-switch__input--checked__label--Color,
+    var(--pf-global--Color--dark-100, #151515));
+  background-color: var(--pf-c-switch__input--checked__toggle--BackgroundColor,
+    var(--pf-global--primary-color--100, #06c));
+}
+
+:host([checked]) #container::before {
+  translate: var(--pf-c-switch__input--checked__toggle--before--TranslateX,
+    calc(100% + var(--pf-c-switch__toggle-icon--Offset, 0.125rem)));
+}
+
+:host(:disabled) #container {
+  color: var(--pf-c-switch__input--disabled__label--Color,
+    var(--pf-global--disabled-color--100, #6a6e73));
+  background-color: var(--pf-c-switch__input--disabled__toggle--BackgroundColor,
+    var(--pf-global--disabled-color--200, #d2d2d2));
+}
+
+:host(:disabled) #container::before {
+  background-color: var(--pf-c-switch__input--disabled__toggle--before--BackgroundColor,
+    var(--pf-global--palette--black-150, #f5f5f5));
+}
+
+:host([checked]:disabled) #container::before {
+  translate: var(--pf-c-switch__input--checked__toggle--before--TranslateX,
+    calc(100% + var(--pf-c-switch__toggle-icon--Offset, 0.125rem)));
+}
+
+#container {
+  width: var(--pf-c-switch__toggle--Width,
+    calc(var(--pf-c-switch__toggle--Height,
+      calc(var(--pf-c-switch--FontSize,
+        var(--pf-global--FontSize--md, 1rem)) * var(--pf-c-switch--LineHeight,
+          var(--pf-global--LineHeight--md, 1.5)))) + var(--pf-c-switch__toggle-icon--Offset, 0.125rem) + var(--pf-c-switch__toggle--before--Width,
+            calc(var(--pf-c-switch--FontSize,
+              var(--pf-global--FontSize--md, 1rem)) - var(--pf-c-switch__toggle-icon--Offset, 0.125rem)))));
+  height: var(--pf-c-switch__toggle--Height,
+    calc(var(--pf-c-switch--FontSize,
+      var(--pf-global--FontSize--md, 1rem)) * var(--pf-c-switch--LineHeight,
+        var(--pf-global--LineHeight--md, 1.5))));
+  background-color: var(--pf-c-switch__toggle--BackgroundColor,
+    var(--pf-global--palette--black-500, #8a8d90));
+  border-radius: var(--pf-c-switch__toggle--BorderRadius,
+    var(--pf-c-switch__toggle--Height, calc(var(--pf-c-switch--FontSize,
+      var(--pf-global--FontSize--md, 1rem)) * var(--pf-c-switch--LineHeight,
+        var(--pf-global--LineHeight--md, 1.5)))));
+}
+
+#container::before {
+  top: var(--pf-c-switch__toggle--before--Top,
+    calc((var(--pf-c-switch__toggle--Height,
+      calc(var(--pf-c-switch--FontSize,
+        var(--pf-global--FontSize--md, 1rem)) * var(--pf-c-switch--LineHeight,
+          var(--pf-global--LineHeight--md, 1.5)))) - var(--pf-c-switch__toggle--before--Height,
+            var(--pf-c-switch__toggle--before--Width,
+              calc(var(--pf-c-switch--FontSize,
+                var(--pf-global--FontSize--md, 1rem)) - var(--pf-c-switch__toggle-icon--Offset, 0.125rem))))) / 2));
+  left: var(--pf-c-switch__toggle--before--Left,
+    var(--pf-c-switch__toggle--before--Top,
+      calc((var(--pf-c-switch__toggle--Height,
+        calc(var(--pf-c-switch--FontSize,
+          var(--pf-global--FontSize--md, 1rem)) * var(--pf-c-switch--LineHeight,
+            var(--pf-global--LineHeight--md, 1.5)))) - var(--pf-c-switch__toggle--before--Height,
+              var(--pf-c-switch__toggle--before--Width,
+                calc(var(--pf-c-switch--FontSize,
+                  var(--pf-global--FontSize--md, 1rem)) - var(--pf-c-switch__toggle-icon--Offset, 0.125rem))))) / 2)));
+  width: var(--pf-c-switch__toggle--before--Width,
+    calc(var(--pf-c-switch--FontSize,
+      var(--pf-global--FontSize--md, 1rem)) - var(--pf-c-switch__toggle-icon--Offset, 0.125rem)));
+  height: var(--pf-c-switch__toggle--before--Height,
+    var(--pf-c-switch__toggle--before--Width,
+      calc(var(--pf-c-switch--FontSize,
+        var(--pf-global--FontSize--md, 1rem)) - var(--pf-c-switch__toggle-icon--Offset, 0.125rem))));
+  background-color: var(--pf-c-switch__toggle--before--backgroundcolor,
+    var(--pf-global--backgroundcolor--100, #fff));
+  border-radius: var(--pf-c-switch__toggle--before--BorderRadius,
+    var(--pf-global--BorderRadius--lg, 30em));
+  box-shadow: var(--pf-c-switch__toggle--before--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)));
+  transition: var(--pf-c-switch__toggle--before--Transition,
+    var(--pf-c-switch__toggle--before--Transition, translate .25s ease 0s)); ;
+}
+
+:host(:focus-within) #container {
+  outline: var(--pf-c-switch__input--focus__toggle--OutlineWidth,
+    var(--pf-global--BorderWidth--md, 2px)) solid var(--pf-c-switch__input--focus__toggle--OutlineColor,
+      var(--pf-global--primary-color--100, #06c));
+  outline-offset: var(--pf-c-switch__input--focus__toggle--OutlineOffset,
+    var(--pf-global--spacer--sm, 0.5rem));
+}
+
+svg {
+  margin-inline: var(--pf-c-switch__toggle-icon--Left,
+    calc(var(--pf-c-switch--FontSize,
+      var(--pf-global--FontSize--md, 1rem)) * .4));
+  font-size: var(--pf-c-switch__toggle-icon--FontSize,
+    calc(var(--pf-c-switch--FontSize,
+      var(--pf-global--FontSize--md, 1rem)) * .625));
+  color: var(--pf-c-switch__toggle-icon--Color,
+    var(--pf-global--Color--light-100, #fff));
+}

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

@@ -0,0 +1,42 @@
+import { BaseSwitch } from './BaseSwitch.js';
+/**
+ * Switch
+ * @cssprop --pf-c-switch--FontSize {@default `1rem`}
+ * @cssprop {<length>} --pf-c-switch--ColumnGap {@default `1rem`}
+ * @cssprop --pf-c-switch__toggle-icon--FontSize {@default `calc(1rem * .625)`}
+ * @cssprop {<color>} --pf-c-switch__toggle-icon--Color {@default `#fff`}
+ * @cssprop {<length>} --pf-c-switch__toggle-icon--Left {@default `1rem`}
+ * @cssprop {<length>} --pf-c-switch__toggle-icon--Offset {@default `0.125rem`}
+ * @cssprop {<number>} --pf-c-switch--LineHeight {@default `1.5`}
+ * @cssprop {<length>} --pf-c-switch--Height {@default `auto`}
+ * @cssprop {<color>} --pf-c-switch__input--checked__toggle--BackgroundColor {@default `#06c`}
+ * @cssprop {<length>} --pf-c-switch__input--checked__toggle--before--TranslateX {@default `calc(100% + 0.125rem)`}
+ * @cssprop {<color>} --pf-c-switch__input--checked__label--Color {@default `#151515`}
+ * @cssprop {<color>} --pf-c-switch__input--not-checked__label--Color {@default `#6a6e73`}
+ * @cssprop {<color>} --pf-c-switch__input--disabled__label--Color {@default `#6a6e73`}
+ * @cssprop {<color>} --pf-c-switch__input--disabled__toggle--BackgroundColor {@default `#d2d2d2`}
+ * @cssprop {<color>} --pf-c-switch__input--disabled__toggle--before--BackgroundColor {@default `#f5f5f5`}
+ * @cssprop {<length>} --pf-c-switch__input--focus__toggle--OutlineWidth {@default `2px`}
+ * @cssprop {<length>} --pf-c-switch__input--focus__toggle--OutlineOffset {@default `0.5rem`}
+ * @cssprop {<color>} --pf-c-switch__input--focus__toggle--OutlineColor {@default `#06c`}
+ * @cssprop {<length>} --pf-c-switch__toggle--Height {@default `calc(1rem * 1.5)`}
+ * @cssprop {<color>} --pf-c-switch__toggle--BackgroundColor {@default `#8a8d90`}
+ * @cssprop {<length>} --pf-c-switch__toggle--BorderRadius {@default `calc(1rem * 1.5)`}
+ * @cssprop {<length>} --pf-c-switch__toggle--before--Width {@default `calc(1rem - 0.125rem)`}
+ * @cssprop {<length>} --pf-c-switch__toggle--before--Height {@default `calc(1rem - 0.125rem)`}
+ * @cssprop {<length>} --pf-c-switch__toggle--before--Top {@default calc((calc(1rem * 1.5) - calc(1rem - 0.125rem)) / 2)`}
+ * @cssprop {<length>} --pf-c-switch__toggle--before--Left {@default `calc((calc(1rem * 1.5) - calc(1rem - 0.125rem)) / 2)`}
+ * @cssprop {<color>} --pf-c-switch__toggle--before--BackgroundColor {@default `#fff`}
+ * @cssprop {<length>} --pf-c-switch__toggle--before--BorderRadius {@default `30em`}
+ * @cssprop --pf-c-switch__toggle--before--BoxShadow {@default `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-switch__toggle--before--Transition {@default `transform .25s ease 0s`}
+ * @cssprop {<length>} --pf-c-switch__toggle--Width {@default `calc(calc(1rem * 1.5) + 0.125rem + calc(1rem - 0.125rem))`}
+ */
+export declare class PfSwitch extends BaseSwitch {
+    static readonly styles: import("lit").CSSResult[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'pf-switch': PfSwitch;
+    }
+}