fix(switch)!: remove BaseSwitch

.changeset/remove-base-switch.md

@@ -0,0 +1,4 @@
+---
+"@patternfly/elements": major
+---
+`<pf-switch>`: Removed `BaseSwitch` class. Reimplement (recommended) or extend `PfSwitch`.

elements/package.json

@@ -55,7 +55,6 @@
     "./pf-progress/pf-progress.js": "./pf-progress/pf-progress.js",
     "./pf-spinner/BaseSpinner.js": "./pf-spinner/BaseSpinner.js",
     "./pf-spinner/pf-spinner.js": "./pf-spinner/pf-spinner.js",
-    "./pf-switch/BaseSwitch.js": "./pf-switch/BaseSwitch.js",
     "./pf-switch/pf-switch.js": "./pf-switch/pf-switch.js",
     "./pf-table/pf-table.js": "./pf-table/pf-table.js",
     "./pf-table/pf-thead.js": "./pf-table/pf-thead.js",

elements/pf-avatar/pf-avatar.ts

@@ -12,10 +12,8 @@ export class PfAvatarLoadEvent extends Event {
 
 /**
  * An **avatar** is a visual used to represent a user. It may contain an image or a placeholder graphic.
- *
  * @summary For displaying a user's avatar image
  * @fires {PfAvatarLoadEvent} load - when the avatar loads
- *
  * @cssprop [--pf-c-avatar--Width=24px]
  * @cssprop [--pf-c-avatar--Height=24px]
  * @cssprop [--pf-c-avatar--BorderRadius=var(--pf-global--BorderRadius--lg, 128px)]

elements/pf-back-to-top/pf-back-to-top.ts

@@ -13,14 +13,11 @@ import styles from './pf-back-to-top.css';
 /**
  * The **back to top** component is a shortcut that allows users to quickly navigate to the top of a lengthy content page.
  * @summary A shortcut that allows users to quickly navigate to the top of a lengthy content page.
- *
  * @csspart trigger - The `<a>` or `<pf-button>` element
- *
  * @slot icon
  *       Contains the prefix icon to display before the link or button.
  * @slot
  *       Text to display inside the link or button.
- *
  * @cssprop {<length>} --pf-c-back-to-top--Right {@default `3rem``}
  * @cssprop {<length>} --pf-c-back-to-top--Bottom {@default `1.5rem``}
  * @cssprop --pf-c-back-to-top--c-button--BoxShadow {@default `0 0.75rem 0.75rem -0.5rem rgba(3, 3, 3, 0.18)`}
@@ -33,7 +30,6 @@ import styles from './pf-back-to-top.css';
  * @cssprop {<color>} --pf-c-button--m-primary--Color {@default `#fff`}
  * @cssprop {<color>} --pf-c-button--m-primary--BackgroundColor {@default `#06c`}
  * @cssprop {<length>} --pf-c-button__icon--m-end--MarginLeft {@default `0.25rem`}
- *
  */
 @customElement('pf-back-to-top')
 export class PfBackToTop extends LitElement {

elements/pf-panel/pf-panel.ts

@@ -11,7 +11,6 @@ import styles from './pf-panel.css';
  * be used to house other components such as fields, forms, videos, buttons, and more.
  * The panel should not be confused with the [drawer](https://www.patternfly.org/v4/components/drawer/design-guidelines/)
  * component, which allows you to surface information via a collapsable container.
- *
  * @slot header - Place header content here
  * @slot - Place main content here
  * @slot footer - Place footer content here

elements/pf-progress-stepper/pf-progress-step.ts

@@ -26,7 +26,6 @@ const ICONS = new Map(Object.entries({
  *       Longer description of the current step.
  * @slot icon
  *       Overrides the icon property
- *
  */
 @customElement('pf-progress-step')
 export class PfProgressStep extends LitElement {

elements/pf-spinner/BaseSpinner.ts

@@ -14,7 +14,6 @@ export type SpinnerSize = (
 
 /**
  * Base spinner class
- *
  * @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`}

elements/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 {