@patternfly/elements 3.0.2 → 4.0.1

package/pf-spinner/pf-spinner.js

@@ -1,42 +1,38 @@
 var _PfSpinner_internals;
 import { __decorate } from "tslib";
-import { html } from 'lit';
+import { LitElement, html } from 'lit';
 import { customElement } from 'lit/decorators/custom-element.js';
 import { styleMap } from 'lit/directives/style-map.js';
+import { property } from 'lit/decorators/property.js';
 import { InternalsController } from '@patternfly/pfe-core/controllers/internals-controller.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`;
-/**
- * A **spinner** is used to indicate to users that an action is in progress. For actions
- * that may take a long time, use a progress bar instead.
- * @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 {
+const styles = css `:host {\n  display: inline-block;\n  width: min-content;\n  min-height: 0;\n  aspect-ratio: 1 / 1;\n}\n\n[hidden] {\n  display: none !important;\n}\n\nsvg {\n  overflow: hidden;\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\ncircle {\n  width: 100%;\n  height: 100%;\n  transform-origin: 50% 50%;\n  stroke-linecap: round;\n  stroke-dasharray: 283;\n  stroke-dashoffset: 280;\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:host([size="sm"]) svg {\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"]) svg {\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"]) svg {\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"]) svg {\n  --pf-c-spinner--diameter: var(--pf-c-spinner--m-xl--diameter,\n    var(--pf-global--icon--FontSize--xl, 3.375rem));\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`;
+let PfSpinner = class PfSpinner extends LitElement {
     constructor() {
         super(...arguments);
         // eslint-disable-next-line no-unused-private-class-members
         _PfSpinner_internals.set(this, InternalsController.of(this, { role: 'progressbar' }));
+        /** Preset sizes for the spinner */
+        this.size = 'xl';
     }
     render() {
-        return html `<div style=${styleMap({ '--pf-c-spinner--diameter': this.diameter })}>${super.render()}</div>`;
+        return html `
+      <svg viewBox="0 0 100 100"
+           style="${styleMap({ '--pf-c-spinner--diameter': this.diameter })}">
+        <circle cx="50" cy="50" r="45" fill="none" />
+      </svg>
+    `;
     }
 };
 _PfSpinner_internals = new WeakMap();
-PfSpinner.styles = [...BaseSpinner.styles, styles];
+PfSpinner.styles = [styles];
+PfSpinner.version = "4.0.1";
+__decorate([
+    property({ reflect: true })
+], PfSpinner.prototype, "size", void 0);
+__decorate([
+    property({ reflect: true })
+], PfSpinner.prototype, "diameter", void 0);
 PfSpinner = __decorate([
     customElement('pf-spinner')
 ], PfSpinner);

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

@@ -1 +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,kCAAkC,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAEvD,OAAO,EAAE,mBAAmB,EAAE,MAAM,0DAA0D,CAAC;AAE/F,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;;;AAI/C;;;;;;;;;;;;;;;;;GAiBG;AAGI,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,WAAW;IAAnC;;QAGL,2DAA2D;QAC3D,+BAAa,mBAAmB,CAAC,EAAE,CAAC,IAAI,EAAE,EAAE,IAAI,EAAE,aAAa,EAAE,CAAC,EAAC;IAKrE,CAAC;IAHC,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;;;AAPe,gBAAM,GAAG,CAAC,GAAG,WAAW,CAAC,MAAM,EAAE,MAAM,CAAC,AAAlC,CAAmC;AAD9C,SAAS;IADrB,aAAa,CAAC,YAAY,CAAC;GACf,SAAS,CASrB","sourcesContent":["import { html } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { styleMap } from 'lit/directives/style-map.js';\n\nimport { InternalsController } from '@patternfly/pfe-core/controllers/internals-controller.js';\n\nimport { BaseSpinner } from './BaseSpinner.js';\n\nimport styles from './pf-spinner.css';\n\n/**\n * A **spinner** is used to indicate to users that an action is in progress. For actions\n * that may take a long time, use a progress bar instead.\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\n  // eslint-disable-next-line no-unused-private-class-members\n  #internals = InternalsController.of(this, { role: 'progressbar' });\n\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"]}
+{"version":3,"file":"pf-spinner.js","sourceRoot":"","sources":["pf-spinner.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,6BAA6B,CAAC;AACvD,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AAEtD,OAAO,EAAE,mBAAmB,EAAE,MAAM,0DAA0D,CAAC;;;AAwBxF,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,UAAU;IAAlC;;QAGL,2DAA2D;QAC3D,+BAAa,mBAAmB,CAAC,EAAE,CAAC,IAAI,EAAE,EAAE,IAAI,EAAE,aAAa,EAAE,CAAC,EAAC;QAEnE,mCAAmC;QACN,SAAI,GAA8B,IAAI,CAAC;;IAK3D,MAAM;QACb,OAAO,IAAI,CAAA;;oBAEK,QAAQ,CAAC,EAAE,0BAA0B,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC;;;KAGtE,CAAC;IACJ,CAAC;;;AAlBe,gBAAM,GAAoB,CAAC,MAAM,CAAC,AAA5B,CAA6B;;AAMtB;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uCAAwC;AAGvC;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CAAkE;AAVnF,SAAS;IADrB,aAAa,CAAC,YAAY,CAAC;GACf,SAAS","sourcesContent":["import { LitElement, html, type TemplateResult } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { property } from 'lit/decorators/property.js';\n\nimport { InternalsController } from '@patternfly/pfe-core/controllers/internals-controller.js';\n\nimport styles from './pf-spinner.css';\n\n/**\n * A **spinner** is used to indicate to users that an action is in progress. For actions\n * that may take a long time, use a progress bar instead.\n * @cssprop {<length>} [--pf-c-spinner--diameter=3.375rem]\n * @cssprop {<length>} [--pf-c-spinner--Width=3.375rem]\n * @cssprop {<length>} [--pf-c-spinner--Height=3.375rem]\n * @cssprop {<color>}  [--pf-c-spinner--Color=#06c]\n * @cssprop {<length>} [--pf-c-spinner--m-sm--diameter=0.625rem]\n * @cssprop {<length>} [--pf-c-spinner--m-md--diameter=1.125rem]\n * @cssprop {<length>} [--pf-c-spinner--m-lg--diameter=1.5rem]\n * @cssprop {<length>} [--pf-c-spinner--m-xl--diameter=3.375rem]\n * @cssprop {<time>}   [--pf-c-spinner--AnimationDuration=1.4s]\n * @cssprop {<string>} [--pf-c-spinner--AnimationTimingFunction=linear]\n * @cssprop {<number>} [--pf-c-spinner--stroke-width=10]\n * @cssprop {<color>}  [--pf-c-spinner__path--Stroke=#06c]\n * @cssprop {<number>} [--pf-c-spinner__path--StrokeWidth=10]\n * @cssprop {<string>} [--pf-c-spinner__path--AnimationTimingFunction=ease-in-out]\n */\n\n@customElement('pf-spinner')\nexport class PfSpinner extends LitElement {\n  static readonly styles: CSSStyleSheet[] = [styles];\n\n  // eslint-disable-next-line no-unused-private-class-members\n  #internals = InternalsController.of(this, { role: 'progressbar' });\n\n  /** Preset sizes for the spinner */\n  @property({ reflect: true }) size: 'sm' | 'md' | 'lg' | 'xl' = 'xl';\n\n  /** Custom diameter of spinner set as CSS variable */\n  @property({ reflect: true }) diameter?: `${string}${'px' | '%' | 'rem' | 'em' | 'fr' | 'pt'}`;\n\n  override render(): TemplateResult<1> {\n    return html`\n      <svg viewBox=\"0 0 100 100\"\n           style=\"${styleMap({ '--pf-c-spinner--diameter': this.diameter })}\">\n        <circle cx=\"50\" cy=\"50\" r=\"45\" fill=\"none\" />\n      </svg>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-spinner': PfSpinner;\n  }\n}\n"]}

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

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

@@ -1 +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"]}
+{"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;AACnF,OAAO,EAAE,OAAO,EAAE,MAAM,kDAAkD,CAAC;AAE3E,MAAM,OAAO,GAAG,YAAY,CAAC;AAE7B,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE,GAAG,EAAE;IAC1B,IAAI,CAAC,UAAU,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;QAClC,MAAM,aAAa,GAAG,IAAI,WAAW,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;QACrD,MAAM,aAAa,CAAC,QAAQ,EAAE,CAAC;QAC/B,MAAM,aAAa,CAAC,QAAQ,EAAE,CAAC;IACjC,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE;QAChC,MAAM,OAAO,GAAG,IAAI,OAAO,CAAC;YAC1B,OAAO;YACP,OAAO;YACP,OAAO,EAAE,IAAI,GAAG,CAAC,UAAU,EAAE,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC;YAC7C,gBAAgB,EAAE;gBAChB,wBAAwB,OAAO,IAAI,OAAO,KAAK;aAChD;SACF,CAAC,CAAC;QACH,MAAM,OAAO,CAAC,SAAS,EAAE,CAAC;IAC5B,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { test } from '@playwright/test';\nimport { PfeDemoPage } from '@patternfly/pfe-tools/test/playwright/PfeDemoPage.js';\nimport { SSRPage } from '@patternfly/pfe-tools/test/playwright/SSRPage.js';\n\nconst tagName = 'pf-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  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-switch/pf-switch.css

@@ -1,3 +1,16 @@
+:host {
+  display: inline-block;
+  outline: none;
+}
+
+svg {
+  fill: currentcolor;
+}
+
+[hidden] {
+  display: none !important;
+}
+
 :host([checked]) #container {
   color: var(--pf-c-switch__input--checked__label--Color,
     var(--pf-global--Color--dark-100, #151515));
@@ -10,7 +23,22 @@
     calc(100% + var(--pf-c-switch__toggle-icon--Offset, 0.125rem)));
 }
 
+:host(:is(:focus,: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));
+}
+
+:host(:disabled) {
+  pointer-events: none;
+  cursor: not-allowed;
+}
+
 :host(:disabled) #container {
+  cursor: not-allowed;
+
   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,
@@ -27,7 +55,14 @@
     calc(100% + var(--pf-c-switch__toggle-icon--Offset, 0.125rem)));
 }
 
+:host(:disabled:focus-within) #container {
+  outline: none;
+}
+
 #container {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
   width: var(--pf-c-switch__toggle--Width,
     calc(var(--pf-c-switch__toggle--Height,
       calc(var(--pf-c-switch--FontSize,
@@ -48,6 +83,9 @@
 }
 
 #container::before {
+  position: absolute;
+  display: block;
+  content: "";
   top: var(--pf-c-switch__toggle--before--Top,
     calc((var(--pf-c-switch__toggle--Height,
       calc(var(--pf-c-switch--FontSize,
@@ -79,19 +117,7 @@
   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 {
-  outline: none;
-}
-
-:host(:is(:focus,: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));
+    var(--pf-c-switch__toggle--before--Transition, translate .25s ease 0s));
 }
 
 svg {

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

@@ -1,44 +1,58 @@
-import { BaseSwitch } from './BaseSwitch.js';
+import { LitElement, type TemplateResult } from 'lit';
 /**
  * A **switch** toggles the state of a setting (between on and off). Switches and
  * checkboxes can often be used interchangeably, but the switch provides a more
  * explicit, visible representation on a setting.
- *
  * @fires {Event} change - Fires when the switch selection changes.
- *
- * @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))`}
+ * @cssprop [--pf-c-switch--FontSize=1rem]
+ * @cssprop {<length>} [--pf-c-switch--ColumnGap=1rem]
+ * @cssprop [--pf-c-switch__toggle-icon--FontSize=calc(1rem * .625)]
+ * @cssprop {<color>} [--pf-c-switch__toggle-icon--Color=#fff]
+ * @cssprop {<length>} [--pf-c-switch__toggle-icon--Left=1rem]
+ * @cssprop {<length>} [--pf-c-switch__toggle-icon--Offset=0.125rem]
+ * @cssprop {<number>} [--pf-c-switch--LineHeight=1.5]
+ * @cssprop {<length>} [--pf-c-switch--Height=auto]
+ * @cssprop {<color>} [--pf-c-switch__input--checked__toggle--BackgroundColor=#06c]
+ * @cssprop {<length>} [--pf-c-switch__input--checked__toggle--before--TranslateX=calc(100 + 0.125rem)]
+ * @cssprop {<color>} [--pf-c-switch__input--checked__label--Color=#151515]
+ * @cssprop {<color>} [--pf-c-switch__input--not-checked__label--Color=#6a6e73]
+ * @cssprop {<color>} [--pf-c-switch__input--disabled__label--Color=#6a6e73]
+ * @cssprop {<color>} [--pf-c-switch__input--disabled__toggle--BackgroundColor=#d2d2d2]
+ * @cssprop {<color>} [--pf-c-switch__input--disabled__toggle--before--BackgroundColor=#f5f5f5]
+ * @cssprop {<length>} [--pf-c-switch__input--focus__toggle--OutlineWidth=2px]
+ * @cssprop {<length>} [--pf-c-switch__input--focus__toggle--OutlineOffset=0.5rem]
+ * @cssprop {<color>} [--pf-c-switch__input--focus__toggle--OutlineColor=#06c]
+ * @cssprop {<length>} [--pf-c-switch__toggle--Height=calc(1rem * 1.5)]
+ * @cssprop {<color>} [--pf-c-switch__toggle--BackgroundColor=#8a8d90]
+ * @cssprop {<length>} [--pf-c-switch__toggle--BorderRadius=calc(1rem * 1.5)]
+ * @cssprop {<length>} [--pf-c-switch__toggle--before--Width=calc(1rem - 0.125rem)]
+ * @cssprop {<length>} [--pf-c-switch__toggle--before--Height=calc(1rem - 0.125rem)]
+ * @cssprop {<length>} [--pf-c-switch__toggle--before--Top=calc((calc(1rem * 1.5) - calc(1rem - 0.125rem)) / 2)`]
+ * @cssprop {<length>} [--pf-c-switch__toggle--before--Left=calc((calc(1rem * 1.5) - calc(1rem - 0.125rem)) / 2)]
+ * @cssprop {<color>} [--pf-c-switch__toggle--before--BackgroundColor=#fff]
+ * @cssprop {<length>} [--pf-c-switch__toggle--before--BorderRadius=30em]
+ * @cssprop [--pf-c-switch__toggle--before--BoxShadow=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=transform .25s ease 0s]
+ * @cssprop {<length>} [--pf-c-switch__toggle--Width=calc(calc(1rem * 1.5) + 0.125rem + calc(1rem - 0.125rem))]
  */
-export declare class PfSwitch extends BaseSwitch {
+export declare class PfSwitch extends LitElement {
+    #private;
     static readonly styles: CSSStyleSheet[];
+    static readonly formAssociated = true;
+    shadowRoot: ShadowRoot;
+    /** Accessible label text for the switch */
+    label?: string;
+    /** Flag to show if the switch has a check icon. */
+    showCheckIcon: boolean;
+    /** Flag to show if the switch is checked. */
+    checked: boolean;
+    /** Flag to show if the switch is disabled. */
+    disabled: boolean;
+    get labels(): NodeListOf<HTMLLabelElement>;
+    connectedCallback(): void;
+    formDisabledCallback(disabled: boolean): void;
+    willUpdate(): void;
+    render(): TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/pf-switch/pf-switch.js

@@ -1,49 +1,120 @@
-import { __decorate } from "tslib";
+var _PfSwitch_instances, _PfSwitch_internals, _PfSwitch_onClick, _PfSwitch_onKeyup, _PfSwitch_onKeydown, _PfSwitch_toggle, _PfSwitch_updateLabels;
+import { __classPrivateFieldGet, __decorate } from "tslib";
+import { LitElement, html } from 'lit';
 import { customElement } from 'lit/decorators/custom-element.js';
-import { BaseSwitch } from './BaseSwitch.js';
+import { property } from 'lit/decorators/property.js';
+import { InternalsController } from '@patternfly/pfe-core/controllers/internals-controller.js';
 import { css } from "lit";
-const styles = css `:host([checked]) #container {\n  color: var(--pf-c-switch__input--checked__label--Color,\n    var(--pf-global--Color--dark-100, #151515));\n  background-color: var(--pf-c-switch__input--checked__toggle--BackgroundColor,\n    var(--pf-global--primary-color--100, #06c));\n}\n\n:host([checked]) #container::before {\n  translate: var(--pf-c-switch__input--checked__toggle--before--TranslateX,\n    calc(100% + var(--pf-c-switch__toggle-icon--Offset, 0.125rem)));\n}\n\n:host(:disabled) #container {\n  color: var(--pf-c-switch__input--disabled__label--Color,\n    var(--pf-global--disabled-color--100, #6a6e73));\n  background-color: var(--pf-c-switch__input--disabled__toggle--BackgroundColor,\n    var(--pf-global--disabled-color--200, #d2d2d2));\n}\n\n:host(:disabled) #container::before {\n  background-color: var(--pf-c-switch__input--disabled__toggle--before--BackgroundColor,\n    var(--pf-global--palette--black-150, #f5f5f5));\n}\n\n:host([checked]:disabled) #container::before {\n  translate: var(--pf-c-switch__input--checked__toggle--before--TranslateX,\n    calc(100% + var(--pf-c-switch__toggle-icon--Offset, 0.125rem)));\n}\n\n#container {\n  width: var(--pf-c-switch__toggle--Width,\n    calc(var(--pf-c-switch__toggle--Height,\n      calc(var(--pf-c-switch--FontSize,\n        var(--pf-global--FontSize--md, 1rem)) * var(--pf-c-switch--LineHeight,\n          var(--pf-global--LineHeight--md, 1.5)))) + var(--pf-c-switch__toggle-icon--Offset, 0.125rem) + var(--pf-c-switch__toggle--before--Width,\n            calc(var(--pf-c-switch--FontSize,\n              var(--pf-global--FontSize--md, 1rem)) - var(--pf-c-switch__toggle-icon--Offset, 0.125rem)))));\n  height: var(--pf-c-switch__toggle--Height,\n    calc(var(--pf-c-switch--FontSize,\n      var(--pf-global--FontSize--md, 1rem)) * var(--pf-c-switch--LineHeight,\n        var(--pf-global--LineHeight--md, 1.5))));\n  background-color: var(--pf-c-switch__toggle--BackgroundColor,\n    var(--pf-global--palette--black-500, #8a8d90));\n  border-radius: var(--pf-c-switch__toggle--BorderRadius,\n    var(--pf-c-switch__toggle--Height, calc(var(--pf-c-switch--FontSize,\n      var(--pf-global--FontSize--md, 1rem)) * var(--pf-c-switch--LineHeight,\n        var(--pf-global--LineHeight--md, 1.5)))));\n}\n\n#container::before {\n  top: var(--pf-c-switch__toggle--before--Top,\n    calc((var(--pf-c-switch__toggle--Height,\n      calc(var(--pf-c-switch--FontSize,\n        var(--pf-global--FontSize--md, 1rem)) * var(--pf-c-switch--LineHeight,\n          var(--pf-global--LineHeight--md, 1.5)))) - var(--pf-c-switch__toggle--before--Height,\n            var(--pf-c-switch__toggle--before--Width,\n              calc(var(--pf-c-switch--FontSize,\n                var(--pf-global--FontSize--md, 1rem)) - var(--pf-c-switch__toggle-icon--Offset, 0.125rem))))) / 2));\n  left: var(--pf-c-switch__toggle--before--Left,\n    var(--pf-c-switch__toggle--before--Top,\n      calc((var(--pf-c-switch__toggle--Height,\n        calc(var(--pf-c-switch--FontSize,\n          var(--pf-global--FontSize--md, 1rem)) * var(--pf-c-switch--LineHeight,\n            var(--pf-global--LineHeight--md, 1.5)))) - var(--pf-c-switch__toggle--before--Height,\n              var(--pf-c-switch__toggle--before--Width,\n                calc(var(--pf-c-switch--FontSize,\n                  var(--pf-global--FontSize--md, 1rem)) - var(--pf-c-switch__toggle-icon--Offset, 0.125rem))))) / 2)));\n  width: var(--pf-c-switch__toggle--before--Width,\n    calc(var(--pf-c-switch--FontSize,\n      var(--pf-global--FontSize--md, 1rem)) - var(--pf-c-switch__toggle-icon--Offset, 0.125rem)));\n  height: var(--pf-c-switch__toggle--before--Height,\n    var(--pf-c-switch__toggle--before--Width,\n      calc(var(--pf-c-switch--FontSize,\n        var(--pf-global--FontSize--md, 1rem)) - var(--pf-c-switch__toggle-icon--Offset, 0.125rem))));\n  background-color: var(--pf-c-switch__toggle--before--backgroundcolor,\n    var(--pf-global--backgroundcolor--100, #fff));\n  border-radius: var(--pf-c-switch__toggle--before--BorderRadius,\n    var(--pf-global--BorderRadius--lg, 30em));\n  box-shadow: var(--pf-c-switch__toggle--before--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  transition: var(--pf-c-switch__toggle--before--Transition,\n    var(--pf-c-switch__toggle--before--Transition, translate .25s ease 0s)); ;\n}\n\n:host {\n  outline: none;\n}\n\n:host(:is(:focus,:focus-within)) #container {\n  outline: var(--pf-c-switch__input--focus__toggle--OutlineWidth,\n    var(--pf-global--BorderWidth--md, 2px)) solid var(--pf-c-switch__input--focus__toggle--OutlineColor,\n      var(--pf-global--primary-color--100, #06c));\n  outline-offset: var(--pf-c-switch__input--focus__toggle--OutlineOffset,\n    var(--pf-global--spacer--sm, 0.5rem));\n}\n\nsvg {\n  margin-inline: var(--pf-c-switch__toggle-icon--Left,\n    calc(var(--pf-c-switch--FontSize,\n      var(--pf-global--FontSize--md, 1rem)) * .4));\n  font-size: var(--pf-c-switch__toggle-icon--FontSize,\n    calc(var(--pf-c-switch--FontSize,\n      var(--pf-global--FontSize--md, 1rem)) * .625));\n  color: var(--pf-c-switch__toggle-icon--Color,\n    var(--pf-global--Color--light-100, #fff));\n}\n`;
-/**
- * A **switch** toggles the state of a setting (between on and off). Switches and
- * checkboxes can often be used interchangeably, but the switch provides a more
- * explicit, visible representation on a setting.
- *
- * @fires {Event} change - Fires when the switch selection changes.
- *
- * @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))`}
- */
-let PfSwitch = class PfSwitch extends BaseSwitch {
+const styles = css `:host {\n  display: inline-block;\n  outline: none;\n}\n\nsvg {\n  fill: currentcolor;\n}\n\n[hidden] {\n  display: none !important;\n}\n\n:host([checked]) #container {\n  color: var(--pf-c-switch__input--checked__label--Color,\n    var(--pf-global--Color--dark-100, #151515));\n  background-color: var(--pf-c-switch__input--checked__toggle--BackgroundColor,\n    var(--pf-global--primary-color--100, #06c));\n}\n\n:host([checked]) #container::before {\n  translate: var(--pf-c-switch__input--checked__toggle--before--TranslateX,\n    calc(100% + var(--pf-c-switch__toggle-icon--Offset, 0.125rem)));\n}\n\n:host(:is(:focus,:focus-within)) #container {\n  outline: var(--pf-c-switch__input--focus__toggle--OutlineWidth,\n    var(--pf-global--BorderWidth--md, 2px)) solid var(--pf-c-switch__input--focus__toggle--OutlineColor,\n      var(--pf-global--primary-color--100, #06c));\n  outline-offset: var(--pf-c-switch__input--focus__toggle--OutlineOffset,\n    var(--pf-global--spacer--sm, 0.5rem));\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  color: var(--pf-c-switch__input--disabled__label--Color,\n    var(--pf-global--disabled-color--100, #6a6e73));\n  background-color: var(--pf-c-switch__input--disabled__toggle--BackgroundColor,\n    var(--pf-global--disabled-color--200, #d2d2d2));\n}\n\n:host(:disabled) #container::before {\n  background-color: var(--pf-c-switch__input--disabled__toggle--before--BackgroundColor,\n    var(--pf-global--palette--black-150, #f5f5f5));\n}\n\n:host([checked]:disabled) #container::before {\n  translate: var(--pf-c-switch__input--checked__toggle--before--TranslateX,\n    calc(100% + var(--pf-c-switch__toggle-icon--Offset, 0.125rem)));\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  width: var(--pf-c-switch__toggle--Width,\n    calc(var(--pf-c-switch__toggle--Height,\n      calc(var(--pf-c-switch--FontSize,\n        var(--pf-global--FontSize--md, 1rem)) * var(--pf-c-switch--LineHeight,\n          var(--pf-global--LineHeight--md, 1.5)))) + var(--pf-c-switch__toggle-icon--Offset, 0.125rem) + var(--pf-c-switch__toggle--before--Width,\n            calc(var(--pf-c-switch--FontSize,\n              var(--pf-global--FontSize--md, 1rem)) - var(--pf-c-switch__toggle-icon--Offset, 0.125rem)))));\n  height: var(--pf-c-switch__toggle--Height,\n    calc(var(--pf-c-switch--FontSize,\n      var(--pf-global--FontSize--md, 1rem)) * var(--pf-c-switch--LineHeight,\n        var(--pf-global--LineHeight--md, 1.5))));\n  background-color: var(--pf-c-switch__toggle--BackgroundColor,\n    var(--pf-global--palette--black-500, #8a8d90));\n  border-radius: var(--pf-c-switch__toggle--BorderRadius,\n    var(--pf-c-switch__toggle--Height, calc(var(--pf-c-switch--FontSize,\n      var(--pf-global--FontSize--md, 1rem)) * var(--pf-c-switch--LineHeight,\n        var(--pf-global--LineHeight--md, 1.5)))));\n}\n\n#container::before {\n  position: absolute;\n  display: block;\n  content: "";\n  top: var(--pf-c-switch__toggle--before--Top,\n    calc((var(--pf-c-switch__toggle--Height,\n      calc(var(--pf-c-switch--FontSize,\n        var(--pf-global--FontSize--md, 1rem)) * var(--pf-c-switch--LineHeight,\n          var(--pf-global--LineHeight--md, 1.5)))) - var(--pf-c-switch__toggle--before--Height,\n            var(--pf-c-switch__toggle--before--Width,\n              calc(var(--pf-c-switch--FontSize,\n                var(--pf-global--FontSize--md, 1rem)) - var(--pf-c-switch__toggle-icon--Offset, 0.125rem))))) / 2));\n  left: var(--pf-c-switch__toggle--before--Left,\n    var(--pf-c-switch__toggle--before--Top,\n      calc((var(--pf-c-switch__toggle--Height,\n        calc(var(--pf-c-switch--FontSize,\n          var(--pf-global--FontSize--md, 1rem)) * var(--pf-c-switch--LineHeight,\n            var(--pf-global--LineHeight--md, 1.5)))) - var(--pf-c-switch__toggle--before--Height,\n              var(--pf-c-switch__toggle--before--Width,\n                calc(var(--pf-c-switch--FontSize,\n                  var(--pf-global--FontSize--md, 1rem)) - var(--pf-c-switch__toggle-icon--Offset, 0.125rem))))) / 2)));\n  width: var(--pf-c-switch__toggle--before--Width,\n    calc(var(--pf-c-switch--FontSize,\n      var(--pf-global--FontSize--md, 1rem)) - var(--pf-c-switch__toggle-icon--Offset, 0.125rem)));\n  height: var(--pf-c-switch__toggle--before--Height,\n    var(--pf-c-switch__toggle--before--Width,\n      calc(var(--pf-c-switch--FontSize,\n        var(--pf-global--FontSize--md, 1rem)) - var(--pf-c-switch__toggle-icon--Offset, 0.125rem))));\n  background-color: var(--pf-c-switch__toggle--before--backgroundcolor,\n    var(--pf-global--backgroundcolor--100, #fff));\n  border-radius: var(--pf-c-switch__toggle--before--BorderRadius,\n    var(--pf-global--BorderRadius--lg, 30em));\n  box-shadow: var(--pf-c-switch__toggle--before--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  transition: var(--pf-c-switch__toggle--before--Transition,\n    var(--pf-c-switch__toggle--before--Transition, translate .25s ease 0s));\n}\n\nsvg {\n  margin-inline: var(--pf-c-switch__toggle-icon--Left,\n    calc(var(--pf-c-switch--FontSize,\n      var(--pf-global--FontSize--md, 1rem)) * .4));\n  font-size: var(--pf-c-switch__toggle-icon--FontSize,\n    calc(var(--pf-c-switch--FontSize,\n      var(--pf-global--FontSize--md, 1rem)) * .625));\n  color: var(--pf-c-switch__toggle-icon--Color,\n    var(--pf-global--Color--light-100, #fff));\n}\n`;
+let PfSwitch = class PfSwitch extends LitElement {
+    constructor() {
+        super(...arguments);
+        _PfSwitch_instances.add(this);
+        _PfSwitch_internals.set(this, InternalsController.of(this, { role: 'switch' }));
+        /** Flag to show if the switch has a check icon. */
+        this.showCheckIcon = false;
+        /** Flag to show if the switch is checked. */
+        this.checked = false;
+        /** Flag to show if the switch is disabled. */
+        this.disabled = false;
+    }
+    get labels() {
+        return __classPrivateFieldGet(this, _PfSwitch_internals, "f").labels;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.tabIndex = 0;
+        this.addEventListener('click', __classPrivateFieldGet(this, _PfSwitch_instances, "m", _PfSwitch_onClick));
+        this.addEventListener('keyup', __classPrivateFieldGet(this, _PfSwitch_instances, "m", _PfSwitch_onKeyup));
+        this.addEventListener('keydown', __classPrivateFieldGet(this, _PfSwitch_instances, "m", _PfSwitch_onKeydown));
+        __classPrivateFieldGet(this, _PfSwitch_instances, "m", _PfSwitch_updateLabels).call(this);
+    }
+    formDisabledCallback(disabled) {
+        this.disabled = disabled;
+        this.requestUpdate();
+    }
+    willUpdate() {
+        __classPrivateFieldGet(this, _PfSwitch_internals, "f").ariaChecked = String(!!this.checked);
+        __classPrivateFieldGet(this, _PfSwitch_internals, "f").ariaDisabled = String(!!this.disabled);
+    }
+    render() {
+        return html `
+      <div id="container">
+        <svg id="toggle"
+             role="presentation"
+             fill="currentColor"
+             height="1em"
+             width="1em"
+             viewBox="0 0 512 512"
+             ?hidden=${!this.showCheckIcon}>
+          <path 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>
+    `;
+    }
 };
-PfSwitch.styles = [...BaseSwitch.styles, styles];
+_PfSwitch_internals = new WeakMap();
+_PfSwitch_instances = new WeakSet();
+_PfSwitch_onClick = function _PfSwitch_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, _PfSwitch_instances, "m", _PfSwitch_toggle).call(this);
+};
+_PfSwitch_onKeyup = function _PfSwitch_onKeyup(event) {
+    switch (event.key) {
+        case ' ':
+        case 'Enter':
+            event.preventDefault();
+            __classPrivateFieldGet(this, _PfSwitch_instances, "m", _PfSwitch_toggle).call(this);
+    }
+};
+_PfSwitch_onKeydown = function _PfSwitch_onKeydown(event) {
+    if (event.key === ' ') {
+        event.preventDefault();
+        event.stopPropagation();
+    }
+};
+_PfSwitch_toggle = function _PfSwitch_toggle() {
+    if (!this.disabled) {
+        this.checked = !this.checked;
+        __classPrivateFieldGet(this, _PfSwitch_instances, "m", _PfSwitch_updateLabels).call(this);
+        this.dispatchEvent(new Event('change', { bubbles: true }));
+    }
+};
+_PfSwitch_updateLabels = function _PfSwitch_updateLabels() {
+    const labelState = this.checked ? 'on' : 'off';
+    this.labels.forEach(label => {
+        const states = label.querySelectorAll('[data-state]');
+        states.forEach(state => {
+            if (state) {
+                state.hidden = state.dataset.state !== labelState;
+            }
+        });
+    });
+};
+PfSwitch.styles = [styles];
+PfSwitch.formAssociated = true;
+PfSwitch.version = "4.0.1";
+__decorate([
+    property({ reflect: true })
+], PfSwitch.prototype, "label", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean, attribute: 'show-check-icon' })
+], PfSwitch.prototype, "showCheckIcon", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], PfSwitch.prototype, "checked", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], PfSwitch.prototype, "disabled", void 0);
 PfSwitch = __decorate([
     customElement('pf-switch')
 ], PfSwitch);

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

@@ -1 +1 @@
-{"version":3,"file":"pf-switch.js","sourceRoot":"","sources":["pf-switch.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AAEjE,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;;;AAG7C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AAGI,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,UAAU;;AACtB,eAAM,GAAG,CAAC,GAAG,UAAU,CAAC,MAAM,EAAE,MAAM,CAAC,AAAjC,CAAkC;AAD7C,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CAEpB","sourcesContent":["import { customElement } from 'lit/decorators/custom-element.js';\n\nimport { BaseSwitch } from './BaseSwitch.js';\nimport styles from './pf-switch.css';\n\n/**\n * A **switch** toggles the state of a setting (between on and off). Switches and\n * checkboxes can often be used interchangeably, but the switch provides a more\n * explicit, visible representation on a setting.\n *\n * @fires {Event} change - Fires when the switch selection changes.\n *\n * @cssprop --pf-c-switch--FontSize {@default `1rem`}\n * @cssprop {<length>} --pf-c-switch--ColumnGap {@default `1rem`}\n * @cssprop --pf-c-switch__toggle-icon--FontSize {@default `calc(1rem * .625)`}\n * @cssprop {<color>} --pf-c-switch__toggle-icon--Color {@default `#fff`}\n * @cssprop {<length>} --pf-c-switch__toggle-icon--Left {@default `1rem`}\n * @cssprop {<length>} --pf-c-switch__toggle-icon--Offset {@default `0.125rem`}\n * @cssprop {<number>} --pf-c-switch--LineHeight {@default `1.5`}\n * @cssprop {<length>} --pf-c-switch--Height {@default `auto`}\n * @cssprop {<color>} --pf-c-switch__input--checked__toggle--BackgroundColor {@default `#06c`}\n * @cssprop {<length>} --pf-c-switch__input--checked__toggle--before--TranslateX {@default `calc(100% + 0.125rem)`}\n * @cssprop {<color>} --pf-c-switch__input--checked__label--Color {@default `#151515`}\n * @cssprop {<color>} --pf-c-switch__input--not-checked__label--Color {@default `#6a6e73`}\n * @cssprop {<color>} --pf-c-switch__input--disabled__label--Color {@default `#6a6e73`}\n * @cssprop {<color>} --pf-c-switch__input--disabled__toggle--BackgroundColor {@default `#d2d2d2`}\n * @cssprop {<color>} --pf-c-switch__input--disabled__toggle--before--BackgroundColor {@default `#f5f5f5`}\n * @cssprop {<length>} --pf-c-switch__input--focus__toggle--OutlineWidth {@default `2px`}\n * @cssprop {<length>} --pf-c-switch__input--focus__toggle--OutlineOffset {@default `0.5rem`}\n * @cssprop {<color>} --pf-c-switch__input--focus__toggle--OutlineColor {@default `#06c`}\n * @cssprop {<length>} --pf-c-switch__toggle--Height {@default `calc(1rem * 1.5)`}\n * @cssprop {<color>} --pf-c-switch__toggle--BackgroundColor {@default `#8a8d90`}\n * @cssprop {<length>} --pf-c-switch__toggle--BorderRadius {@default `calc(1rem * 1.5)`}\n * @cssprop {<length>} --pf-c-switch__toggle--before--Width {@default `calc(1rem - 0.125rem)`}\n * @cssprop {<length>} --pf-c-switch__toggle--before--Height {@default `calc(1rem - 0.125rem)`}\n * @cssprop {<length>} --pf-c-switch__toggle--before--Top {@default calc((calc(1rem * 1.5) - calc(1rem - 0.125rem)) / 2)`}\n * @cssprop {<length>} --pf-c-switch__toggle--before--Left {@default `calc((calc(1rem * 1.5) - calc(1rem - 0.125rem)) / 2)`}\n * @cssprop {<color>} --pf-c-switch__toggle--before--BackgroundColor {@default `#fff`}\n * @cssprop {<length>} --pf-c-switch__toggle--before--BorderRadius {@default `30em`}\n * @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)`}\n * @cssprop --pf-c-switch__toggle--before--Transition {@default `transform .25s ease 0s`}\n * @cssprop {<length>} --pf-c-switch__toggle--Width {@default `calc(calc(1rem * 1.5) + 0.125rem + calc(1rem - 0.125rem))`}\n */\n\n@customElement('pf-switch')\nexport class PfSwitch extends BaseSwitch {\n  static readonly styles = [...BaseSwitch.styles, styles];\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-switch': PfSwitch;\n  }\n}\n"]}
+{"version":3,"file":"pf-switch.js","sourceRoot":"","sources":["pf-switch.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';\n\nimport { InternalsController } from '@patternfly/pfe-core/controllers/internals-controller.js';\n\nimport styles from './pf-switch.css';\n\n/**\n * A **switch** toggles the state of a setting (between on and off). Switches and\n * checkboxes can often be used interchangeably, but the switch provides a more\n * explicit, visible representation on a setting.\n * @fires {Event} change - Fires when the switch selection changes.\n * @cssprop [--pf-c-switch--FontSize=1rem]\n * @cssprop {<length>} [--pf-c-switch--ColumnGap=1rem]\n * @cssprop [--pf-c-switch__toggle-icon--FontSize=calc(1rem * .625)]\n * @cssprop {<color>} [--pf-c-switch__toggle-icon--Color=#fff]\n * @cssprop {<length>} [--pf-c-switch__toggle-icon--Left=1rem]\n * @cssprop {<length>} [--pf-c-switch__toggle-icon--Offset=0.125rem]\n * @cssprop {<number>} [--pf-c-switch--LineHeight=1.5]\n * @cssprop {<length>} [--pf-c-switch--Height=auto]\n * @cssprop {<color>} [--pf-c-switch__input--checked__toggle--BackgroundColor=#06c]\n * @cssprop {<length>} [--pf-c-switch__input--checked__toggle--before--TranslateX=calc(100 + 0.125rem)]\n * @cssprop {<color>} [--pf-c-switch__input--checked__label--Color=#151515]\n * @cssprop {<color>} [--pf-c-switch__input--not-checked__label--Color=#6a6e73]\n * @cssprop {<color>} [--pf-c-switch__input--disabled__label--Color=#6a6e73]\n * @cssprop {<color>} [--pf-c-switch__input--disabled__toggle--BackgroundColor=#d2d2d2]\n * @cssprop {<color>} [--pf-c-switch__input--disabled__toggle--before--BackgroundColor=#f5f5f5]\n * @cssprop {<length>} [--pf-c-switch__input--focus__toggle--OutlineWidth=2px]\n * @cssprop {<length>} [--pf-c-switch__input--focus__toggle--OutlineOffset=0.5rem]\n * @cssprop {<color>} [--pf-c-switch__input--focus__toggle--OutlineColor=#06c]\n * @cssprop {<length>} [--pf-c-switch__toggle--Height=calc(1rem * 1.5)]\n * @cssprop {<color>} [--pf-c-switch__toggle--BackgroundColor=#8a8d90]\n * @cssprop {<length>} [--pf-c-switch__toggle--BorderRadius=calc(1rem * 1.5)]\n * @cssprop {<length>} [--pf-c-switch__toggle--before--Width=calc(1rem - 0.125rem)]\n * @cssprop {<length>} [--pf-c-switch__toggle--before--Height=calc(1rem - 0.125rem)]\n * @cssprop {<length>} [--pf-c-switch__toggle--before--Top=calc((calc(1rem * 1.5) - calc(1rem - 0.125rem)) / 2)`]\n * @cssprop {<length>} [--pf-c-switch__toggle--before--Left=calc((calc(1rem * 1.5) - calc(1rem - 0.125rem)) / 2)]\n * @cssprop {<color>} [--pf-c-switch__toggle--before--BackgroundColor=#fff]\n * @cssprop {<length>} [--pf-c-switch__toggle--before--BorderRadius=30em]\n * @cssprop [--pf-c-switch__toggle--before--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 * @cssprop [--pf-c-switch__toggle--before--Transition=transform .25s ease 0s]\n * @cssprop {<length>} [--pf-c-switch__toggle--Width=calc(calc(1rem * 1.5) + 0.125rem + calc(1rem - 0.125rem))]\n */\n\n@customElement('pf-switch')\nexport class PfSwitch extends LitElement {\n  static readonly styles: CSSStyleSheet[] = [styles];\n\n  static readonly formAssociated = true;\n\n  declare shadowRoot: ShadowRoot;\n\n  #internals = InternalsController.of(this, { role: 'switch' });\n\n  /** Accessible label text for the switch */\n  @property({ reflect: true }) label?: string;\n\n  /** Flag to show if the switch has a check icon. */\n  @property({ reflect: true, type: Boolean, attribute: 'show-check-icon' }) showCheckIcon = false;\n\n  /** Flag to show if the switch is checked. */\n  @property({ reflect: true, type: Boolean }) checked = false;\n\n  /** Flag to show if the switch is disabled. */\n  @property({ reflect: true, type: Boolean }) disabled = false;\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.tabIndex = 0;\n    this.addEventListener('click', this.#onClick);\n    this.addEventListener('keyup', this.#onKeyup);\n    this.addEventListener('keydown', this.#onKeydown);\n    this.#updateLabels();\n  }\n\n  formDisabledCallback(disabled: boolean): void {\n    this.disabled = disabled;\n    this.requestUpdate();\n  }\n\n  override willUpdate(): void {\n    this.#internals.ariaChecked = String(!!this.checked);\n    this.#internals.ariaDisabled = String(!!this.disabled);\n  }\n\n  override render(): TemplateResult<1> {\n    return html`\n      <div id=\"container\">\n        <svg id=\"toggle\"\n             role=\"presentation\"\n             fill=\"currentColor\"\n             height=\"1em\"\n             width=\"1em\"\n             viewBox=\"0 0 512 512\"\n             ?hidden=${!this.showCheckIcon}>\n          <path 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  #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 (originalTarget === event.target\n          && !(labels = Array.from(this.labels)).includes(explicitOriginalTarget)\n          && labels.includes(this.closest('label') as HTMLLabelElement)) {\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  #onKeydown(event: KeyboardEvent) {\n    if (event.key === ' ') {\n      event.preventDefault();\n      event.stopPropagation();\n    }\n  }\n\n  #toggle() {\n    if (!this.disabled) {\n      this.checked = !this.checked;\n      this.#updateLabels();\n      this.dispatchEvent(new Event('change', { bubbles: true }));\n    }\n  }\n\n  #updateLabels() {\n    const labelState = this.checked ? 'on' : 'off';\n    this.labels.forEach(label => {\n      const states = label.querySelectorAll<HTMLElement>('[data-state]');\n      states.forEach(state => {\n        if (state) {\n          state.hidden = state.dataset.state !== labelState;\n        }\n      });\n    });\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-switch': PfSwitch;\n  }\n}\n"]}

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

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

@@ -1 +1 @@
-{"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"]}
+{"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;AACnF,OAAO,EAAE,OAAO,EAAE,MAAM,kDAAkD,CAAC;AAE3E,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;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-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  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-table/pf-caption.d.ts

@@ -1,11 +1,11 @@
-import { LitElement } from 'lit';
+import { LitElement, type TemplateResult } from 'lit';
 /**
  * Caption
  * @slot - Place element content here
  */
 export declare class PfCaption extends LitElement {
     static readonly styles: CSSStyleSheet[];
-    render(): import("lit-html").TemplateResult<1>;
+    render(): TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/pf-table/pf-caption.js

@@ -3,10 +3,6 @@ import { LitElement, html } from 'lit';
 import { customElement } from 'lit/decorators/custom-element.js';
 import { css } from "lit";
 const styles = css `:host {\n  display: table-caption;\n  /* stylelint-disable-next-line max-line-length */\n  padding: var(--pf-c-table-caption--PaddingTop, var(--pf-global--spacer--md, 1rem)) var(--pf-c-table-caption--PaddingRight, var(--pf-global--spacer--lg, 1.5rem)) var(--pf-c-table-caption--PaddingBottom, var(--pf-global--spacer--md, 1rem)) var(--pf-c-table-caption--PaddingLeft, var(--pf-global--spacer--lg, 1.5rem));\n  font-size: var(--pf-c-table-caption--FontSize, var(--pf-global--FontSize--sm, 0.875rem));\n  color: var(--pf-c-table-caption--Color, var(--pf-global--Color--200, #6a6e73));\n  text-align: left;\n  background-color: var(--pf-c-table--BackgroundColor);\n}`;
-/**
- * Caption
- * @slot - Place element content here
- */
 let PfCaption = class PfCaption extends LitElement {
     render() {
         return html `
@@ -15,6 +11,7 @@ let PfCaption = class PfCaption extends LitElement {
     }
 };
 PfCaption.styles = [styles];
+PfCaption.version = "4.0.1";
 PfCaption = __decorate([
     customElement('pf-caption')
 ], PfCaption);

package/pf-table/pf-caption.js.map

@@ -1 +1 @@
-{"version":3,"file":"pf-caption.js","sourceRoot":"","sources":["pf-caption.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;;;AAIjE;;;GAGG;AAEI,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,UAAU;IAGvC,MAAM;QACJ,OAAO,IAAI,CAAA;;KAEV,CAAC;IACJ,CAAC;;AANe,gBAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AADvB,SAAS;IADrB,aAAa,CAAC,YAAY,CAAC;GACf,SAAS,CAQrB","sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\n\nimport styles from './pf-caption.css';\n\n/**\n * Caption\n * @slot - Place element content here\n */\n@customElement('pf-caption')\nexport class PfCaption extends LitElement {\n  static readonly styles = [styles];\n\n  render() {\n    return html`\n      <slot></slot>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-caption': PfCaption;\n  }\n}\n"]}
+{"version":3,"file":"pf-caption.js","sourceRoot":"","sources":["pf-caption.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAuB,MAAM,KAAK,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;;;AAS1D,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,UAAU;IAGvC,MAAM;QACJ,OAAO,IAAI,CAAA;;KAEV,CAAC;IACJ,CAAC;;AANe,gBAAM,GAAoB,CAAC,MAAM,CAAC,AAA5B,CAA6B;;AADxC,SAAS;IADrB,aAAa,CAAC,YAAY,CAAC;GACf,SAAS","sourcesContent":["import { LitElement, html, type TemplateResult } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\n\nimport styles from './pf-caption.css';\n\n/**\n * Caption\n * @slot - Place element content here\n */\n@customElement('pf-caption')\nexport class PfCaption extends LitElement {\n  static readonly styles: CSSStyleSheet[] = [styles];\n\n  render(): TemplateResult<1> {\n    return html`\n      <slot></slot>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-caption': PfCaption;\n  }\n}\n"]}