lightning-base-components 1.26.4-alpha → 1.27.2-alpha

package/src/lightning/primitiveInputCheckbox/input-checkbox.slds.css

@@ -162,32 +162,32 @@
      * Base
      */
 :host([data-render-mode="shadow"]) [part='input-checkbox'] {
-    /**
+  /**
       * Remap to SLDS blueprint hooks for parity
       * https://www.lightningdesignsystem.com/components/checkbox/#Styling-Hooks-Overview
       */
-    /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
-    --_slds-c-inputcheckbox-shadow: var(--slds-c-checkbox-shadow);
-    --_slds-c-inputcheckbox-shadow-focus: var(--slds-c-checkbox-shadow-focus);
-    --_slds-c-inputcheckbox-color-background: var(--slds-c-checkbox-color-background);
-    --_slds-c-inputcheckbox-color-background-checked: var(--slds-c-checkbox-color-background-checked);
-    --_slds-c-inputcheckbox-color-border: var(--slds-c-checkbox-color-border);
-    --_slds-c-inputcheckbox-color-border-checked: var(--slds-c-checkbox-color-border-checked);
-    --_slds-c-inputcheckbox-color-border-focus: var(--slds-c-checkbox-color-border-focus);
-    --_slds-c-inputcheckbox-mark-color-foreground: var(--slds-c-checkbox-mark-color-foreground);
-    --_slds-c-inputcheckbox-radius-border: var(--slds-c-checkbox-radius-border);
-    /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
+  /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
+  --_slds-c-inputcheckbox-shadow: var(--slds-c-checkbox-shadow);
+  --_slds-c-inputcheckbox-shadow-focus: var(--slds-c-checkbox-shadow-focus);
+  --_slds-c-inputcheckbox-color-background: var(--slds-c-checkbox-color-background);
+  --_slds-c-inputcheckbox-color-background-checked: var(--slds-c-checkbox-color-background-checked);
+  --_slds-c-inputcheckbox-color-border: var(--slds-c-checkbox-color-border);
+  --_slds-c-inputcheckbox-color-border-checked: var(--slds-c-checkbox-color-border-checked);
+  --_slds-c-inputcheckbox-color-border-focus: var(--slds-c-checkbox-color-border-focus);
+  --_slds-c-inputcheckbox-mark-color-foreground: var(--slds-c-checkbox-mark-color-foreground);
+  --_slds-c-inputcheckbox-radius-border: var(--slds-c-checkbox-radius-border);
+  /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
 
-    /* We need 'flex' instead of SDS's 'inline-flex' for the responsive label-inline variant */
-    display: flex;
-  }
+  /* We need 'flex' instead of SDS's 'inline-flex' for the responsive label-inline variant */
+  display: flex;
+}
 /**
      * Label Container
      */
 :host([data-render-mode="shadow"]) [part='label-container'] {
-    /* Accounts for help-text in same row as label */
-    padding-inline-end: var(--slds-g-spacing-1);
-  }
+  /* Accounts for help-text in same row as label */
+  padding-inline-end: var(--slds-g-spacing-1);
+}
 /**
      * Label
      *
@@ -195,27 +195,27 @@
      * avoid collisions with other components using [part='label'] (e.g. slds-input-text)
      */
 :host([data-render-mode="shadow"]) [part='input-checkbox'] [part='label'] {
-    color: var(--_slds-c-inputcheckbox-label-color, var(--slds-g-color-on-surface-2));
-    margin-block-end: 0;
-    padding-block-start: calc(var(--slds-g-spacing-1) / 2);
-    padding-inline-start: var(--slds-g-spacing-2);
-  }
+  color: var(--_slds-c-inputcheckbox-label-color, var(--slds-g-color-on-surface-2));
+  margin-block-end: 0;
+  padding-block-start: calc(var(--slds-g-spacing-1) / 2);
+  padding-inline-start: var(--slds-g-spacing-2);
+}
 /**
      * Checkbox
      *
      * Hidden from view, see Indicator for visual faux checkbox.
      */
 :host([data-render-mode="shadow"]) [part='checkbox'] {
-    width: 1px;
-    height: 1px;
-    border: 0;
-    clip: rect(0 0 0 0);
-    margin: -1px;
-    overflow: hidden;
-    padding: 0;
-    position: absolute;
-    pointer-events: auto;
-  }
+  width: 1px;
+  height: 1px;
+  border: 0;
+  clip: rect(0 0 0 0);
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  pointer-events: auto;
+}
 /**
      * Checkbox Indicator
      *
@@ -231,130 +231,136 @@
      * + LBC uses a styled <span>. Due to this divergence, we require custom CSS.
      */
 :host([data-render-mode="shadow"]) [part='indicator'] {
-    display: inline-block;
-    position: relative;
-    width: 1rem;
-    height: 1rem;
-    border-radius: var(--_slds-c-inputcheckbox-radius-border, var(--slds-g-radius-border-1));
-    border: var(--_slds-c-inputcheckbox-sizing-border, var(--slds-g-sizing-border-1)) solid
-      var(--_slds-c-inputcheckbox-color-border, var(--slds-g-color-border-2));
-    background-color: var(--_slds-c-inputcheckbox-color-background, var(--slds-g-color-surface-container-1));
-    box-shadow: var(--_slds-c-inputcheckbox-shadow);
-    transition: border 0.1s linear, background-color 0.1s linear;
-    vertical-align: middle;
-  }
+  display: inline-block;
+  position: relative;
+  width: 1rem;
+  height: 1rem;
+  border-radius: var(--_slds-c-inputcheckbox-radius-border, var(--slds-g-radius-border-1));
+  border: var(--_slds-c-inputcheckbox-sizing-border, var(--slds-g-sizing-border-1)) solid
+    var(--_slds-c-inputcheckbox-color-border, var(--slds-g-color-border-2));
+  background-color: var(--_slds-c-inputcheckbox-color-background, var(--slds-g-color-surface-container-1));
+  box-shadow: var(--_slds-c-inputcheckbox-shadow);
+  transition:
+    border 0.1s linear,
+    background-color 0.1s linear;
+  vertical-align: middle;
+}
 /**
      * Checked
      */
 :host([data-render-mode="shadow"][checked]) [part='indicator']::after {
-    content: '';
-    height: calc(1rem / 4);
-    width: calc(1rem / 2);
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate3d(-50%, -50%, 0) rotate(-45deg);
-    border-bottom: 2px solid
-      var(--_slds-c-inputcheckbox-mark-color-foreground, var(--slds-g-color-border-accent-2));
-    border-left: 2px solid var(--_slds-c-inputcheckbox-mark-color-foreground, var(--slds-g-color-border-accent-2));
-  }
+  content: '';
+  height: calc(1rem / 4);
+  width: calc(1rem / 2);
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate3d(-50%, -50%, 0) rotate(-45deg);
+  border-bottom: 2px solid
+    var(--_slds-c-inputcheckbox-mark-color-foreground, var(--slds-g-color-border-accent-2));
+  border-left: 2px solid
+    var(--_slds-c-inputcheckbox-mark-color-foreground, var(--slds-g-color-border-accent-2));
+}
 :host([data-render-mode="shadow"][checked]) [part='indicator'] {
-    --_slds-c-inputcheckbox-color-background: var(--_slds-c-inputcheckbox-color-background-checked);
-    --_slds-c-inputcheckbox-color-border: var(--_slds-c-inputcheckbox-color-border-checked);
-  }
+  --_slds-c-inputcheckbox-color-background: var(--_slds-c-inputcheckbox-color-background-checked);
+  --_slds-c-inputcheckbox-color-border: var(--_slds-c-inputcheckbox-color-border-checked);
+}
 /**
      * Disabled
      */
 :host([data-render-mode="shadow"][disabled]) [part='indicator'] {
-    --_slds-c-inputcheckbox-color-background: var(
-      --_slds-c-inputcheckbox-color-background-disabled,
-      var(--slds-g-color-disabled-container-2)
-    );
-    --_slds-c-inputcheckbox-color-border: var(--_slds-c-inputcheckbox-color-border-disabled, var(--slds-g-color-border-disabled-1));
-    --_slds-c-inputcheckbox-mark-color-foreground: var(
-      --_slds-c-inputcheckbox-mark-color-foreground-disabled,
-      var(--slds-g-color-on-disabled-2)
-    );
-  }
+  --_slds-c-inputcheckbox-color-background: var(
+    --_slds-c-inputcheckbox-color-background-disabled,
+    var(--slds-g-color-disabled-container-2)
+  );
+  --_slds-c-inputcheckbox-color-border: var(
+    --_slds-c-inputcheckbox-color-border-disabled,
+    var(--slds-g-color-border-disabled-1)
+  );
+  --_slds-c-inputcheckbox-mark-color-foreground: var(
+    --_slds-c-inputcheckbox-mark-color-foreground-disabled,
+    var(--slds-g-color-on-disabled-2)
+  );
+}
 /**
      * Focused
      */
 :host(:not([disabled])) input:focus-within + .slds-checkbox__label [part='indicator'] {
-    --_slds-c-inputcheckbox-color-background: var(--_slds-c-inputcheckbox-color-background-focus);
-    --_slds-c-inputcheckbox-color-border: var(
-      --_slds-c-inputcheckbox-color-border-focus,
-      var(--slds-g-color-accent-2)
-    );
-    --_slds-c-inputcheckbox-shadow: var(
-      --_slds-c-inputcheckbox-shadow-focus,
-      0 0 3px var(--slds-g-color-accent-2)
-    );
-  }
+  --_slds-c-inputcheckbox-color-background: var(--_slds-c-inputcheckbox-color-background-focus);
+  --_slds-c-inputcheckbox-color-border: var(
+    --_slds-c-inputcheckbox-color-border-focus,
+    var(--slds-g-color-accent-2)
+  );
+  --_slds-c-inputcheckbox-shadow: var(
+    --_slds-c-inputcheckbox-shadow-focus,
+    0 0 3px var(--slds-g-color-accent-2)
+  );
+}
 /**
      * Invalid
      */
 :host([data-render-mode="shadow"][invalid]) [part='indicator'] {
-    --_slds-c-inputcheckbox-sizing-border: var(
-      --_slds-c-inputcheckbox-sizing-border-invalid,
-      var(--slds-g-sizing-border-2)
-    );
-    --_slds-c-inputcheckbox-color-border: var(
-      --_slds-c-inputcheckbox-color-border-invalid,
-      var(--slds-g-color-border-error-1)
-    );
-    --_slds-c-inputcheckbox-mark-color-foreground: var(
-      --_slds-c-inputcheckbox-mark-color-foreground-invalid,
-      var(--slds-g-color-error-1)
-    );
-  }
+  --_slds-c-inputcheckbox-sizing-border: var(
+    --_slds-c-inputcheckbox-sizing-border-invalid,
+    var(--slds-g-sizing-border-2)
+  );
+  --_slds-c-inputcheckbox-color-border: var(
+    --_slds-c-inputcheckbox-color-border-invalid,
+    var(--slds-g-color-border-error-1)
+  );
+  --_slds-c-inputcheckbox-mark-color-foreground: var(
+    --_slds-c-inputcheckbox-mark-color-foreground-invalid,
+    var(--slds-g-color-error-1)
+  );
+}
 :host([data-render-mode="shadow"][invalid]) [part='help-text'] {
-    color: var(--_slds-c-inputcheckbox-helptext-color-invalid, var(--slds-g-color-error-1));
-  }
+  color: var(--_slds-c-inputcheckbox-helptext-color-invalid, var(--slds-g-color-error-1));
+}
 /**
      * Label Inline Variant
      *
      * @TODO: Remove magic number for MQ
      */
 @media (width >= 48em) {
-    :host([data-render-mode="shadow"][variant='label-inline']) [part='label-container'] {
-      float: left;
+  :host([data-render-mode="shadow"][variant='label-inline']) [part='label-container'] {
+    float: left;
 
-      /* TODO: Get rid of these magic numbers */
-      max-width: calc(33% - 1.125rem);
-      padding-block-start: var(--slds-g-spacing-1);
-      padding-inline-start: var(--slds-g-spacing-1);
-    }
+    /* TODO: Get rid of these magic numbers */
+    max-width: calc(33% - 1.125rem);
+    padding-block-start: var(--slds-g-spacing-1);
+    padding-inline-start: var(--slds-g-spacing-1);
+  }
 
-    :host([data-render-mode="shadow"][variant='label-inline']) [part='input-checkbox'] {
-      display: block;
-      margin-inline-start: 33%;
-      padding-block: var(--slds-g-spacing-1);
-      margin-block-end: var(--slds-g-spacing-2);
-    }
+  :host([data-render-mode="shadow"][variant='label-inline']) [part='input-checkbox'] {
+    display: block;
+    margin-inline-start: 33%;
+    padding-block: var(--slds-g-spacing-1);
+    margin-block-end: var(--slds-g-spacing-2);
+  }
 
-    :host([data-render-mode="shadow"][variant='label-inline']) [part='inline-help'] {
-      float: left;
-      padding-block-start: var(--slds-g-spacing-1);
-    }
+  :host([data-render-mode="shadow"][variant='label-inline']) [part='inline-help'] {
+    float: left;
+    padding-block-start: var(--slds-g-spacing-1);
+  }
 
-    :host([data-render-mode="shadow"][variant='label-inline']) [part='indicator'] {
-      /* @TODO: add change to SDS, removes line-height from display inline */
-      display: block;
-    }
+  :host([data-render-mode="shadow"][variant='label-inline']) [part='indicator'] {
+    /* @TODO: add change to SDS, removes line-height from display inline */
+    display: block;
   }
+}
 /**
      * Standalone Checkbox
      *
      * label-inline & label-stacked uses the "standalone" checkbox that lives outside the label
      */
 :host([data-render-mode="shadow"][variant='label-inline']) [part='checkbox'],:host([data-render-mode="shadow"][variant='label-stacked']) [part='checkbox'] {
-    width: 1rem;
-    height: 1rem;
-    margin: 0;
-    clip: auto;
-    opacity: 0;
-    z-index: 1;
-  }
+  width: 1rem;
+  height: 1rem;
+  margin: 0;
+  clip: auto;
+  opacity: 0;
+  z-index: 1;
+}
 /**
    * A temporarily baked-in utility class until SLDS gets a proper utility package.
    *
@@ -374,8 +380,8 @@
   text-transform: none !important;
   white-space: nowrap !important;
 }
-:host([data-render-mode="shadow"]) .slds-checkbox [type="checkbox"]:indeterminate + .slds-checkbox__label .slds-checkbox_faux::after {
-  content: "";
+:host([data-render-mode="shadow"]) .slds-checkbox [type='checkbox']:indeterminate + .slds-checkbox__label .slds-checkbox_faux::after {
+  content: '';
   display: block;
   position: absolute;
   top: 50%;

package/src/lightning/primitiveInputCheckboxButton/form-element.slds.css

@@ -1,5 +1,4 @@
 
-
 /**
  * sldsFormElementUtils.css and form-element.css have many similarities
  * however, they are used for very different use cases, and this is why
@@ -255,7 +254,9 @@
   display: block;
 }
 
-:host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element__label,:host([data-render-mode="shadow"][variant="label-stacked"]) ::part(rich-text-label),:host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element__control,:host([data-render-mode="shadow"][variant="label-stacked"]) ::part(rich-text-editor-container) {/* for rich text via lightning-quill */
+:host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element__label,:host([data-render-mode="shadow"][variant="label-stacked"]) ::part(rich-text-label),:host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element__control,:host([data-render-mode="shadow"][variant="label-stacked"]) ::part(rich-text-editor-container) {
+  /* for rich text via lightning-quill */
+
   /* @W-14518344 The following line still exists in SLDS-internal
       but it was removed here because it was causing the input
       component to not display it's bottom border
@@ -294,8 +295,7 @@
 /* Force inner child input to not have padding and margin.
 The parent (ex. lightning-input-field) will provide it instead */
 
-:host([data-render-mode="shadow"][variant='label-inline']) .slds-form-element,:host([data-render-mode="shadow"][variant='label-inline']) [variant='label-inline']
-{
+:host([data-render-mode="shadow"][variant='label-inline']) .slds-form-element,:host([data-render-mode="shadow"][variant='label-inline']) [variant='label-inline'] {
   padding: 0;
   margin-block-end: 0;
 }

package/src/lightning/primitiveInputCheckboxButton/input-checkbox-button.slds.css

@@ -1,98 +1,109 @@
 
+/* Default State */
+:host([data-render-mode="shadow"]) [part='faux-button'] {
+  width: var(--slds-g-sizing-9);
+  height: var(--slds-g-sizing-9);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--slds-g-radius-border-2);
+  border: var(--slds-g-sizing-border-1) solid
+    var(--slds-c-inputcheckboxbutton-color-border, var(--slds-g-color-border-2));
+  background-color: var(
+    --slds-c-inputcheckboxbutton-color-background,
+    var(--slds-g-color-surface-container-1)
+  );
+  cursor: pointer;
+  position: relative;
+}
+:host([data-render-mode="shadow"]) [part='faux-button']::before,:host([data-render-mode="shadow"]) 
+[part='faux-button']::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  height: calc(var(--slds-g-sizing-9) * 0.875 / 2);
+  width: calc(var(--slds-g-sizing-9) * 0.125 / 2);
+  margin: auto;
+  background-color: var(--slds-c-inputcheckboxbutton-mark-color-foreground, var(--slds-g-color-accent-2));
+}
+:host([data-render-mode="shadow"]) [part='faux-button']::after {
+  height: calc(var(--slds-g-sizing-9) * 0.125 / 2);
+  width: calc(var(--slds-g-sizing-9) * 0.875 / 2);
+}
+:host([data-render-mode="shadow"]:focus-within) [part='faux-button'] {
+  box-shadow: 0 0 var(--slds-g-sizing-border-3) var(--slds-g-color-accent-2);
+  --slds-c-inputcheckboxbutton-color-border: var(--slds-g-color-border-accent-1);
+  --slds-c-inputcheckboxbutton-color-border-checked: var(--slds-g-color-border-accent-1);
+}
+:host([data-render-mode="shadow"]) [part='faux-button']:hover {
+  --slds-c-inputcheckboxbutton-color-background: var(--slds-g-color-surface-container-2);
+  --slds-c-inputcheckboxbutton-color-background-checked: var(--slds-g-color-accent-container-2);
+}
+:host([data-render-mode="shadow"][disabled]) [part='faux-button'] {
+  cursor: default;
+  --slds-c-inputcheckboxbutton-color-border: var(--slds-g-color-border-disabled-1);
+  --slds-c-inputcheckboxbutton-color-background: var(--slds-g-color-disabled-container-1);
+  --slds-c-inputcheckboxbutton-mark-color-foreground: var(--slds-g-color-on-disabled-1);
 
-  /* Default State */
-  :host([data-render-mode="shadow"]) [part="faux-button"] {
-    width: var(--slds-g-sizing-9);
-    height: var(--slds-g-sizing-9);
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: var(--slds-g-radius-border-2);
-    border: var(--slds-g-sizing-border-1) solid var(--slds-c-inputcheckboxbutton-color-border, var(--slds-g-color-border-2));
-    background-color: var(--slds-c-inputcheckboxbutton-color-background, var(--slds-g-color-surface-container-1));
-    cursor: pointer;
-    position: relative;
-  }
-  :host([data-render-mode="shadow"]) [part="faux-button"]::before,:host([data-render-mode="shadow"]) 
-  [part="faux-button"]::after {
-    content: "";
-    position: absolute;
-    inset: 0;
-    height: calc(var(--slds-g-sizing-9) * 0.875 / 2);
-    width: calc(var(--slds-g-sizing-9) * 0.125 / 2);
-    margin: auto;
-    background-color: var(--slds-c-inputcheckboxbutton-mark-color-foreground, var(--slds-g-color-accent-2));
-  }
-  :host([data-render-mode="shadow"]) [part="faux-button"]::after {
-    height: calc(var(--slds-g-sizing-9) * 0.125 / 2);
-    width: calc(var(--slds-g-sizing-9) * 0.875 / 2);
-  }
-  :host([data-render-mode="shadow"]:focus-within) [part="faux-button"] {
-    box-shadow: 0 0 var(--slds-g-sizing-border-3) var(--slds-g-color-accent-2);
-    --slds-c-inputcheckboxbutton-color-border: var(--slds-g-color-border-accent-1);
-    --slds-c-inputcheckboxbutton-color-border-checked: var(--slds-g-color-border-accent-1);
-  }
-  :host([data-render-mode="shadow"]) [part="faux-button"]:hover {
-    --slds-c-inputcheckboxbutton-color-background: var(--slds-g-color-surface-container-2);
-    --slds-c-inputcheckboxbutton-color-background-checked: var(--slds-g-color-accent-container-2);
-  }
-  :host([data-render-mode="shadow"][disabled]) [part="faux-button"] {
-    cursor: default;
-    --slds-c-inputcheckboxbutton-color-border: var(--slds-g-color-border-disabled-1);
-    --slds-c-inputcheckboxbutton-color-background: var(--slds-g-color-disabled-container-1);
-    --slds-c-inputcheckboxbutton-mark-color-foreground: var(--slds-g-color-on-disabled-1);
-
-    /* Disabled checked */
-    --slds-c-inputcheckboxbutton-color-border-checked: var(--slds-g-color-border-disabled-1);
-    --slds-c-inputcheckboxbutton-color-background-checked: var(--slds-g-color-disabled-container-2);
-    --slds-c-inputcheckboxbutton-mark-color-foreground-checked: var(--slds-g-color-on-disabled-2);
-
-  }
-  /* Checked State */
-  :host([data-render-mode="shadow"][checked]) [part="faux-button"] {
-    --slds-c-inputcheckboxbutton-color-border: var(--slds-c-inputcheckboxbutton-color-border-checked, transparent);
-    --slds-c-inputcheckboxbutton-color-background: var(--slds-c-inputcheckboxbutton-color-background-checked, var(--slds-g-color-accent-container-2));
-    --slds-c-inputcheckboxbutton-mark-color-foreground: var(--slds-c-inputcheckboxbutton-mark-color-foreground-checked, var(--slds-g-color-on-accent-1));
-  }
-  :host([data-render-mode="shadow"][checked]) [part="faux-button"]::before {
-    left: calc(var(--slds-g-sizing-9) * 0.3125 / 2);
-    width: calc(var(--slds-g-sizing-9) * 0.125 / 2);
-    height: calc(var(--slds-g-sizing-9) / 2);
-    transform: rotate(40deg);
-  }
-  :host([data-render-mode="shadow"][checked]) [part="faux-button"]::after {
-    top: calc(var(--slds-g-sizing-9) * 0.3125 / 2);
-    left: calc(var(--slds-g-sizing-9) * -0.625 / 2);
-    width: calc(var(--slds-g-sizing-9) * 0.5625 / 2);
-    height: calc(var(--slds-g-sizing-9) * 0.125 / 2);
-    transform: rotate(40deg);
-  }
-  /**
+  /* Disabled checked */
+  --slds-c-inputcheckboxbutton-color-border-checked: var(--slds-g-color-border-disabled-1);
+  --slds-c-inputcheckboxbutton-color-background-checked: var(--slds-g-color-disabled-container-2);
+  --slds-c-inputcheckboxbutton-mark-color-foreground-checked: var(--slds-g-color-on-disabled-2);
+}
+/* Checked State */
+:host([data-render-mode="shadow"][checked]) [part='faux-button'] {
+  --slds-c-inputcheckboxbutton-color-border: var(
+    --slds-c-inputcheckboxbutton-color-border-checked,
+    transparent
+  );
+  --slds-c-inputcheckboxbutton-color-background: var(
+    --slds-c-inputcheckboxbutton-color-background-checked,
+    var(--slds-g-color-accent-container-2)
+  );
+  --slds-c-inputcheckboxbutton-mark-color-foreground: var(
+    --slds-c-inputcheckboxbutton-mark-color-foreground-checked,
+    var(--slds-g-color-on-accent-1)
+  );
+}
+:host([data-render-mode="shadow"][checked]) [part='faux-button']::before {
+  left: calc(var(--slds-g-sizing-9) * 0.3125 / 2);
+  width: calc(var(--slds-g-sizing-9) * 0.125 / 2);
+  height: calc(var(--slds-g-sizing-9) / 2);
+  transform: rotate(40deg);
+}
+:host([data-render-mode="shadow"][checked]) [part='faux-button']::after {
+  top: calc(var(--slds-g-sizing-9) * 0.3125 / 2);
+  left: calc(var(--slds-g-sizing-9) * -0.625 / 2);
+  width: calc(var(--slds-g-sizing-9) * 0.5625 / 2);
+  height: calc(var(--slds-g-sizing-9) * 0.125 / 2);
+  transform: rotate(40deg);
+}
+/**
    * Help Text
    *
    * Note: not to be confused with lightning-helptext. This is for the text
    *       that goes below the input.
    */
-  :host([data-render-mode="shadow"]) [part='help-text'] {
-    font-size: var(--slds-g-font-scale-neg-3);
+:host([data-render-mode="shadow"]) [part='help-text'] {
+  font-size: var(--slds-g-font-scale-neg-3);
 
-    /* TODO: Add global hook once SLDS creates a new spacing hook that equals the value needed here */
-    padding-block-start: 0.125rem;
-  }
-  /**
+  /* TODO: Add global hook once SLDS creates a new spacing hook that equals the value needed here */
+  padding-block-start: 0.125rem;
+}
+/**
    * Help Text's Invalid State – Part container is unique to SLDS
    */
-  :host([data-render-mode="shadow"][invalid]) [part='help-text'] {
-    color: var(--slds-g-color-error-base-50);
-  }
-  /**
+:host([data-render-mode="shadow"][invalid]) [part='help-text'] {
+  color: var(--slds-g-color-error-base-50);
+}
+/**
    * A temporarily baked-in utility class until SLDS gets a proper utility package.
    *
    * This is a hybrid patch between synthetic and native shadow. The ideal final
    * outcome is the removal of this class and replacing the class with the SLDS
    * utility package solution.
    */
-  :host([data-render-mode="shadow"]) .slds-assistive-text {
+:host([data-render-mode="shadow"]) .slds-assistive-text {
   position: absolute !important;
   margin: -1px !important;
   border: 0 !important;

package/src/lightning/primitiveInputColor/form-element.slds.css

@@ -1,5 +1,4 @@
 
-
 /**
  * sldsFormElementUtils.css and form-element.css have many similarities
  * however, they are used for very different use cases, and this is why
@@ -255,7 +254,9 @@
   display: block;
 }
 
-:host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element__label,:host([data-render-mode="shadow"][variant="label-stacked"]) ::part(rich-text-label),:host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element__control,:host([data-render-mode="shadow"][variant="label-stacked"]) ::part(rich-text-editor-container) {/* for rich text via lightning-quill */
+:host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element__label,:host([data-render-mode="shadow"][variant="label-stacked"]) ::part(rich-text-label),:host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element__control,:host([data-render-mode="shadow"][variant="label-stacked"]) ::part(rich-text-editor-container) {
+  /* for rich text via lightning-quill */
+
   /* @W-14518344 The following line still exists in SLDS-internal
       but it was removed here because it was causing the input
       component to not display it's bottom border
@@ -294,8 +295,7 @@
 /* Force inner child input to not have padding and margin.
 The parent (ex. lightning-input-field) will provide it instead */
 
-:host([data-render-mode="shadow"][variant='label-inline']) .slds-form-element,:host([data-render-mode="shadow"][variant='label-inline']) [variant='label-inline']
-{
+:host([data-render-mode="shadow"][variant='label-inline']) .slds-form-element,:host([data-render-mode="shadow"][variant='label-inline']) [variant='label-inline'] {
   padding: 0;
   margin-block-end: 0;
 }

package/src/lightning/primitiveInputColor/input-color.slds.css

@@ -1,40 +1,39 @@
 
+:host([data-render-mode="shadow"]) [part='color-picker'] {
+  position: relative;
+}
 
-  :host([data-render-mode="shadow"]) [part='color-picker'] {
-    position: relative;
-  }
-
-  :host([data-render-mode="shadow"]) [part='input-text'] {
-    flex-direction: row;
-  }
+:host([data-render-mode="shadow"]) [part='input-text'] {
+  flex-direction: row;
+}
 
-  :host([data-render-mode="shadow"]) .slds-color-picker__summary-input [part='input'] {
-    width: calc(var(--slds-g-sizing-10) * 2);
-  }
+:host([data-render-mode="shadow"]) .slds-color-picker__summary-input [part='input'] {
+  width: calc(var(--slds-g-sizing-10) * 2);
+}
 
-  :host([data-render-mode="shadow"]) .slds-color-picker__summary-input[part="input-container"] {
-    margin-inline-end: 0;
-  }
+:host([data-render-mode="shadow"]) .slds-color-picker__summary-input[part='input-container'] {
+  margin-inline-end: 0;
+}
 
-  :host([data-render-mode="shadow"]) [part='input-text'] > *:first-child {
-    margin-inline-end: var(--slds-g-spacing-1);
-  }
+:host([data-render-mode="shadow"]) [part='input-text'] > *:first-child {
+  margin-inline-end: var(--slds-g-spacing-1);
+}
 
-  :host([data-render-mode="shadow"]) [part='input-container'] {
-    flex: 0 0 6rem;
-    margin-inline-end: var(--slds-g-spacing-2);
-  }
+:host([data-render-mode="shadow"]) [part='input-container'] {
+  flex: 0 0 6rem;
+  margin-inline-end: var(--slds-g-spacing-2);
+}
 
-  /**
+/**
    * Label Inline Variant
    */
 
-  @media (width >= 48em) {
-    :host([data-render-mode="shadow"][variant='label-inline']) [part='input-text'] {
-      display: flex;
-    }
+@media (width >= 48em) {
+  :host([data-render-mode="shadow"][variant='label-inline']) [part='input-text'] {
+    display: flex;
+  }
 
-    :host([data-render-mode="shadow"][variant='label-inline']) [part='input-container'] {
-      margin-inline-start: 0%
-    }
+  :host([data-render-mode="shadow"][variant='label-inline']) [part='input-container'] {
+    margin-inline-start: 0%;
   }
+}