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

package/src/lightning/primitiveInputToggle/input-toggle.slds.css

@@ -1,147 +1,163 @@
 
-
-
 /* note that we disable the styling hooks pattern due to naming mismatch
 /* between slds "checkbox-toggle" and lbc "input-toggle" */
 /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
 :host([data-render-mode="shadow"]) [part='checkbox-toggle'] {
-      width: 100%;
-      display: flex
-    }
+  width: 100%;
+  display: flex;
+}
 /* Container for text to show when checkbox is toggle off */
 :host([data-render-mode="shadow"]) .slds-checkbox_off {
-      display: block;
-    }
+  display: block;
+}
 /* Container for text to show when checkbox is toggle on */
 :host([data-render-mode="shadow"]) .slds-checkbox_on {
-      display: none;
-    }
+  display: none;
+}
 :host([data-render-mode="shadow"]) .slds-checkbox_faux_container {
-        font-size: var(--slds-g-font-scale-neg-4);
-        color: var(--slds-g-color-on-surface-1);
-    }
-:host([data-render-mode="shadow"]) [part='indicator']{
-      display: block;
-      position: relative;
-      width: var(--slds-g-sizing-10);
-      height: var(--slds-g-sizing-7);
-      border-width: var(--slds-g-sizing-border-1);
-      border-style: solid;
-      border-color: var(--slds-c-checkbox-toggle-color-border, var(--slds-g-color-neutral-base-60));
-      padding: var(--slds-g-sizing-1);
-      background-color: var(--slds-c-checkbox-toggle-color-background, var(--slds-g-color-neutral-base-60));
-      border-radius: var(--slds-c-checkbox-toggle-radius-border, 15rem);
-      box-shadow: var(--slds-c-checkbox-toggle-shadow);
-      transition: background-color 0.2s cubic-bezier(0.75, 0, 0.08, 1);
-    }
+  font-size: var(--slds-g-font-scale-neg-4);
+  color: var(--slds-g-color-on-surface-1);
+}
+:host([data-render-mode="shadow"]) [part='indicator'] {
+  display: block;
+  position: relative;
+  width: var(--slds-g-sizing-10);
+  height: var(--slds-g-sizing-7);
+  border-width: var(--slds-g-sizing-border-1);
+  border-style: solid;
+  border-color: var(--slds-c-checkbox-toggle-color-border, var(--slds-g-color-neutral-base-60));
+  padding: var(--slds-g-sizing-1);
+  background-color: var(--slds-c-checkbox-toggle-color-background, var(--slds-g-color-neutral-base-60));
+  border-radius: var(--slds-c-checkbox-toggle-radius-border, 15rem);
+  box-shadow: var(--slds-c-checkbox-toggle-shadow);
+  transition: background-color 0.2s cubic-bezier(0.75, 0, 0.08, 1);
+}
 :host([data-render-mode="shadow"]) [part='indicator']:hover {
-      --slds-c-checkbox-toggle-color-background: var(--slds-c-checkbox-toggle-color-background-hover, var(--slds-g-color-neutral-base-50));
-      --slds-c-checkbox-toggle-color-border: var(--slds-c-checkbox-toggle-color-border-hover);
+  --slds-c-checkbox-toggle-color-background: var(
+    --slds-c-checkbox-toggle-color-background-hover,
+    var(--slds-g-color-neutral-base-50)
+  );
+  --slds-c-checkbox-toggle-color-border: var(--slds-c-checkbox-toggle-color-border-hover);
 
-      cursor: pointer;
-    }
+  cursor: pointer;
+}
 :host([data-render-mode="shadow"]) [part='indicator']::after {
-      content: '';
-      position: absolute;
-      top: 1px;
-      left: 1px;
-      width: var(--slds-g-sizing-6);
-      height: var(--slds-g-sizing-6);
-      background-color: var(--slds-c-checkbox-toggle-switch-color-background, var(--slds-g-color-surface-container-1));
-      border-radius: var(--slds-c-checkbox-toggle-radius-border, 15rem);
-    }
+  content: '';
+  position: absolute;
+  top: 1px;
+  left: 1px;
+  width: var(--slds-g-sizing-6);
+  height: var(--slds-g-sizing-6);
+  background-color: var(
+    --slds-c-checkbox-toggle-switch-color-background,
+    var(--slds-g-color-surface-container-1)
+  );
+  border-radius: var(--slds-c-checkbox-toggle-radius-border, 15rem);
+}
 :host([data-render-mode="shadow"]) [part='checkbox'] {
-      height: 1px;
-      width: 1px;
-      border: 0;
-      clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
-      margin: -1px;
-      overflow: hidden;
-      padding: 0;
-      position: absolute;
-    }
-:host([data-render-mode="shadow"]) [type='checkbox']:focus+.slds-checkbox_faux_container,:host([data-render-mode="shadow"]) 
-    [type='checkbox']:focus+.slds-checkbox_faux_container>[part='indicator']:hover {
-      --slds-c-checkbox-toggle-color-background: var(--slds-g-color-neutral-base-50);
-      --slds-c-checkbox-toggle-shadow: var(--slds-g-shadow-5);
-    }
+  height: 1px;
+  width: 1px;
+  border: 0;
+  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+}
+:host([data-render-mode="shadow"]) [type='checkbox']:focus + .slds-checkbox_faux_container,:host([data-render-mode="shadow"]) 
+[type='checkbox']:focus + .slds-checkbox_faux_container > [part='indicator']:hover {
+  --slds-c-checkbox-toggle-color-background: var(--slds-g-color-neutral-base-50);
+  --slds-c-checkbox-toggle-shadow: var(--slds-g-shadow-5);
+}
 :host([data-render-mode="shadow"]) [part='checkbox']:checked:focus + .slds-checkbox_faux_container > [part='indicator'],:host([data-render-mode="shadow"]) 
-    [part='checkbox']:checked:focus + .slds-checkbox_faux_container > [part='indicator']:hover  {
-        --slds-c-checkbox-toggle-color-background: var(--slds-c-checkbox-toggle-color-background-checked-focus, var(--slds-g-color-accent-container-3));
-    }
+[part='checkbox']:checked:focus + .slds-checkbox_faux_container > [part='indicator']:hover {
+  --slds-c-checkbox-toggle-color-background: var(
+    --slds-c-checkbox-toggle-color-background-checked-focus,
+    var(--slds-g-color-accent-container-3)
+  );
+}
 :host([data-render-mode="shadow"]) [part='checkbox']:checked + .slds-checkbox_faux_container .slds-checkbox_off {
-        display: none;
-    }
+  display: none;
+}
 :host([data-render-mode="shadow"]) [part='checkbox']:checked + .slds-checkbox_faux_container .slds-checkbox_on {
-        display: block;
-    }
+  display: block;
+}
 :host([data-render-mode="shadow"]) [part='checkbox']:checked + .slds-checkbox_faux_container > [part='indicator'] {
-        --slds-c-checkbox-toggle-color-border: var(--slds-g-color-border-accent-2);
-        --slds-c-checkbox-toggle-color-background: var(--slds-g-color-accent-container-1);
-    }
+  --slds-c-checkbox-toggle-color-border: var(--slds-g-color-border-accent-2);
+  --slds-c-checkbox-toggle-color-background: var(--slds-g-color-accent-container-1);
+}
 :host([data-render-mode="shadow"]) [part='checkbox']:checked + .slds-checkbox_faux_container > [part='indicator']:hover {
-        --slds-c-checkbox-toggle-color-background: var(--slds-g-color-accent-container-3);
-    }
+  --slds-c-checkbox-toggle-color-background: var(--slds-g-color-accent-container-3);
+}
 :host([data-render-mode="shadow"]) [part='checkbox']:checked + .slds-checkbox_faux_container > [part='indicator']::before {
-        content: '';
-        position: absolute;
-        top: 1px;
-        right: 1px;
-        width: var(--slds-g-sizing-6);
-        height: var(--slds-g-sizing-6);
-        background-color: var(--slds-c-checkbox-toggle-switch-color-background-checked, var(--slds-c-checkbox-toggle-switch-color-background, var(--slds-g-color-surface-container-1)));
-        border-radius: var(--slds-c-checkbox-toggle-radius-border, 15rem);
-        transition: transform 0.2s cubic-bezier(0.75, 0, 0.08, 1);
-    }
+  content: '';
+  position: absolute;
+  top: 1px;
+  right: 1px;
+  width: var(--slds-g-sizing-6);
+  height: var(--slds-g-sizing-6);
+  background-color: var(
+    --slds-c-checkbox-toggle-switch-color-background-checked,
+    var(--slds-c-checkbox-toggle-switch-color-background, var(--slds-g-color-surface-container-1))
+  );
+  border-radius: var(--slds-c-checkbox-toggle-radius-border, 15rem);
+  transition: transform 0.2s cubic-bezier(0.75, 0, 0.08, 1);
+}
 :host([data-render-mode="shadow"]) [part='checkbox']:checked + .slds-checkbox_faux_container > [part='indicator']::after {
-        --slds-c-checkbox-toggle-switch-color-background: transparent;
-        --slds-c-checkbox-toggle-radius-border: 0;
+  --slds-c-checkbox-toggle-switch-color-background: transparent;
+  --slds-c-checkbox-toggle-radius-border: 0;
 
-        content: ' ';
-        position: absolute;
-        top: 0.25rem;
-        left: 0.6rem;
-        height: 0.7rem;
-        width: 0.45rem;
-        border-bottom-width: var(--slds-g-sizing-border-2);
-        border-bottom-style: solid;
-        border-bottom-color: var(--slds-c-checkbox-toggle-mark-color-foreground, var(--slds-g-color-neutral-base-100));
-        border-right-width: var(--slds-g-sizing-border-2);
-        border-right-style: solid;
-        border-right-color: var(--slds-c-checkbox-toggle-mark-color-foreground, var(--slds-g-color-neutral-base-100));
-        transform: rotate(45deg);
-    }
+  content: ' ';
+  position: absolute;
+  top: 0.25rem;
+  left: 0.6rem;
+  height: 0.7rem;
+  width: 0.45rem;
+  border-bottom-width: var(--slds-g-sizing-border-2);
+  border-bottom-style: solid;
+  border-bottom-color: var(
+    --slds-c-checkbox-toggle-mark-color-foreground,
+    var(--slds-g-color-neutral-base-100)
+  );
+  border-right-width: var(--slds-g-sizing-border-2);
+  border-right-style: solid;
+  border-right-color: var(
+    --slds-c-checkbox-toggle-mark-color-foreground,
+    var(--slds-g-color-neutral-base-100)
+  );
+  transform: rotate(45deg);
+}
 :host([data-render-mode="shadow"]) [part='checkbox'][disabled] + .slds-checkbox_faux_container > [part='indicator'] {
-        background-color: var(--slds-g-color-disabled-container-2, var(--slds-g-color-neutral-base-80));
-        border-color: var(--slds-g-color-border-disabled-1, var(--slds-g-color-neutral-base-80));
-        pointer-events: none;
-    }
+  background-color: var(--slds-g-color-disabled-container-2, var(--slds-g-color-neutral-base-80));
+  border-color: var(--slds-g-color-border-disabled-1, var(--slds-g-color-neutral-base-80));
+  pointer-events: none;
+}
 :host([data-render-mode="shadow"]) [part='checkbox'][disabled] + .slds-checkbox_faux_container > [part='indicator']::after,:host([data-render-mode="shadow"]) 
-    [part='checkbox'][disabled]:checked + .slds-checkbox_faux_container > [part='indicator']::before {
-        background-color: var(--slds-g-color-on-disabled-2, var(--slds-g-color-neutral-base-60));
-    }
+[part='checkbox'][disabled]:checked + .slds-checkbox_faux_container > [part='indicator']::before {
+  background-color: var(--slds-g-color-on-disabled-2, var(--slds-g-color-neutral-base-60));
+}
 :host([data-render-mode="shadow"]) [part='checkbox'][disabled] + .slds-checkbox_faux_container > [part='indicator']::after {
-      --slds-c-checkbox-toggle-mark-color-foreground: var(--slds-g-color-on-disabled-2);
-    }
+  --slds-c-checkbox-toggle-mark-color-foreground: var(--slds-g-color-on-disabled-2);
+}
 :host([data-render-mode="shadow"]) [part='checkbox'][disabled] + .slds-checkbox_faux_container > [part='indicator']:hover,:host([data-render-mode="shadow"]) 
-    [part='checkbox'][disabled] + .slds-checkbox_faux_container > [part='indicator']:focus {
-        background-color: var(--slds-g-color-disabled-1, var(--slds-g-color-disabled-2));
-        cursor: default;
-    }
+[part='checkbox'][disabled] + .slds-checkbox_faux_container > [part='indicator']:focus {
+  background-color: var(--slds-g-color-disabled-1, var(--slds-g-color-disabled-2));
+  cursor: default;
+}
 :host([data-render-mode="shadow"]) [part='checkbox'][disabled]:checked + .slds-checkbox_faux_container > [part='indicator']::after {
-        background-color: transparent;
-        --slds-c-checkbox-toggle-mark-color-foreground: var(--slds-g-color-on-disabled-2);
-    }
+  background-color: transparent;
+  --slds-c-checkbox-toggle-mark-color-foreground: var(--slds-g-color-on-disabled-2);
+}
 /* ASSISTIVE TEXT */
 :host([data-render-mode="shadow"]) .slds-assistive-text {
-      position: absolute !important;
-      margin: -1px !important;
-      border: 0 !important;
-      padding: 0 !important;
-      width: 1px !important;
-      height: 1px !important;
-      overflow: hidden !important;
-      clip: rect(0 0 0 0) !important;
-      text-transform: none !important;
-      white-space: nowrap !important;
-    }
+  position: absolute !important;
+  margin: -1px !important;
+  border: 0 !important;
+  padding: 0 !important;
+  width: 1px !important;
+  height: 1px !important;
+  overflow: hidden !important;
+  clip: rect(0 0 0 0) !important;
+  text-transform: none !important;
+  white-space: nowrap !important;
+}

package/src/lightning/primitiveResizeHandler/primitive-resize-handler.slds.css

@@ -98,4 +98,3 @@
 :host([data-render-mode="shadow"]) .slds-resizable__input:focus ~ .slds-resizable__handle .slds-resizable__divider::after {
   opacity: 1;
 }
-

package/src/lightning/primitiveTreegridCellToggle/button-icon.slds.css

@@ -190,14 +190,13 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   --slds-c-icon-sizing: 0.875rem;
   --slds-c-icon-color-foreground: currentcolor;
 
-
   --sds-c-button-font-lineheight: var(
     --slds-c-button-neutral-font-lineheight,
     var(--slds-s-button-font-lineheight, 1.875rem)
   );
   --sds-c-button-spacing-inline: var(
     --slds-c-button-neutral-spacing-inline,
-    var(--slds-s-button-spacing-inline, var(--slds-g-spacing-4));
+    var(--slds-s-button-spacing-inline, var(--slds-g-spacing-4)) ;
   );
   --sds-c-button-spacing-block: var(--slds-c-button-neutral-spacing-block);
 
@@ -217,7 +216,6 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     * In all other variants, it is ok to use the previous state as a fallback value.
     */
 
-
   /* Border radius - shared */
   --sds-c-button-radius-border-startstart: var(
     --slds-c-button-radius-border-startstart,
@@ -260,7 +258,10 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     --slds-c-button-neutral-color-background-hover,
     var(--slds-g-color-surface-container-2)
   );
-  --sds-c-button-color-background-focus: var(--slds-c-button-neutral-color-background-focus, var(--slds-g-color-surface-container-2));
+  --sds-c-button-color-background-focus: var(
+    --slds-c-button-neutral-color-background-focus,
+    var(--slds-g-color-surface-container-2)
+  );
   --sds-c-button-color-background-active: var(
     --slds-c-button-neutral-color-background-active,
     var(--slds-g-color-surface-container-2)
@@ -283,8 +284,14 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 
   /* Text color */
   --sds-c-button-text-color: var(--slds-c-button-neutral-text-color, var(--slds-g-color-accent-2));
-  --sds-c-button-text-color-hover: var(--slds-c-button-neutral-text-color-hover, var(--slds-s-button-color-hover, var(--slds-g-color-accent-3)));
-  --sds-c-button-text-color-focus: var(--slds-c-button-neutral-text-color-focus, var(--slds-g-color-accent-3));
+  --sds-c-button-text-color-hover: var(
+    --slds-c-button-neutral-text-color-hover,
+    var(--slds-s-button-color-hover, var(--slds-g-color-accent-3))
+  );
+  --sds-c-button-text-color-focus: var(
+    --slds-c-button-neutral-text-color-focus,
+    var(--slds-g-color-accent-3)
+  );
   --sds-c-button-text-color-active: var(
     --slds-c-button-neutral-text-color-active,
     var(--slds-g-color-accent-3)
@@ -296,17 +303,17 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 }
 /* Overriding primitiveBaseButton */
 :host([data-render-mode="shadow"]) [part~='button']:disabled {
-   --sds-c-button-color-border-disabled: var(--slds-g-color-border-disabled-1);
-   --sds-c-button-text-color-disabled: var(--slds-g-color-on-disabled-1);
-   --sds-c-button-color-background-disabled: var(--slds-g-color-disabled-container-1);
+  --sds-c-button-color-border-disabled: var(--slds-g-color-border-disabled-1);
+  --sds-c-button-text-color-disabled: var(--slds-g-color-on-disabled-1);
+  --sds-c-button-color-background-disabled: var(--slds-g-color-disabled-container-1);
 
-   /** 
+  /** 
     * Needed to override 
     * `pointer-event: none` coming from sds
     * that prevent tooltip from showing
    */
-   pointer-events: auto;
-   cursor: default;
+  pointer-events: auto;
+  cursor: default;
 }
 /**
   * A note about fallbacks on the default variant:
@@ -417,9 +424,18 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   --slds-c-button-neutral-text-color-hover: var(--slds-g-color-error-1);
   --slds-c-button-neutral-text-color-focus: var(--slds-g-color-error-1);
   --slds-c-button-neutral-text-color-active: var(--slds-g-color-error-1);
-  --slds-c-button-neutral-color-border-hover: var(--slds-c-button-neutral-color-border, var(--slds-g-color-border-1));
-  --slds-c-button-neutral-color-border-focus: var(--slds-c-button-neutral-color-border, var(--slds-g-color-border-1));
-  --slds-c-button-neutral-color-border-active: var(--slds-c-button-neutral-color-border, var(--slds-g-color-border-1));
+  --slds-c-button-neutral-color-border-hover: var(
+    --slds-c-button-neutral-color-border,
+    var(--slds-g-color-border-1)
+  );
+  --slds-c-button-neutral-color-border-focus: var(
+    --slds-c-button-neutral-color-border,
+    var(--slds-g-color-border-1)
+  );
+  --slds-c-button-neutral-color-border-active: var(
+    --slds-c-button-neutral-color-border,
+    var(--slds-g-color-border-1)
+  );
 }
 :host([data-render-mode="shadow"][variant='brand']) [part~='button']:disabled,:host([data-render-mode="shadow"][variant='success']) [part~='button']:disabled,:host([data-render-mode="shadow"][variant='destructive']) [part~='button']:disabled {
   --sds-c-button-color-background: var(--slds-g-color-disabled-container-2);
@@ -439,7 +455,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 /**
   * text variant is for button-stateful
 */
-:host([data-render-mode="shadow"][variant='base']) [part~='button'],:host([data-render-mode="shadow"][variant='text']) [part~='button']{
+:host([data-render-mode="shadow"][variant='base']) [part~='button'],:host([data-render-mode="shadow"][variant='text']) [part~='button'] {
   --sds-c-button-spacing-inline: 0;
   --slds-c-button-neutral-text-color: var(--slds-g-color-accent-2);
   --slds-c-button-neutral-color-border: transparent;
@@ -486,7 +502,6 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 :host([data-render-mode="shadow"]) [part~='end'] {
   display: inline-flex;
   padding-inline-start: 0;
-
 }
 /**
  * A temporarily baked-in utility class until SLDS gets a proper utility package.
@@ -641,7 +656,11 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 
   /* Icon */
   --slds-c-buttonicon-color-foreground: var(--slds-g-color-neutral-base-100);
-  --slds-c-buttonicon-color-foreground-hover: color-mix(in oklab, var(--slds-g-color-on-surface-inverse-1), transparent 25%);
+  --slds-c-buttonicon-color-foreground-hover: color-mix(
+    in oklab,
+    var(--slds-g-color-on-surface-inverse-1),
+    transparent 25%
+  );
   --slds-c-buttonicon-color-foreground-focus: var(--slds-g-color-neutral-base-95);
   --slds-c-buttonicon-color-foreground-active: var(--slds-g-color-neutral-base-90);
 
@@ -736,17 +755,17 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   * utility package solution.
   */
 :host([data-render-mode="shadow"]) .slds-assistive-text {
-    position: absolute !important;
-    margin: -1px !important;
-    border: 0 !important;
-    padding: 0 !important;
-    width: 1px !important;
-    height: 1px !important;
-    overflow: hidden !important;
-    clip: rect(0 0 0 0) !important;
-    text-transform: none !important;
-    white-space: nowrap !important;
-  }
+  position: absolute !important;
+  margin: -1px !important;
+  border: 0 !important;
+  padding: 0 !important;
+  width: 1px !important;
+  height: 1px !important;
+  overflow: hidden !important;
+  clip: rect(0 0 0 0) !important;
+  text-transform: none !important;
+  white-space: nowrap !important;
+}
 :host([data-render-mode="shadow"][size='large']) [part~='button-icon'],:host([data-render-mode="shadow"][size='medium']) [part~='button-icon'] {
-    height: var(--slds-c-buttonicon-sizing-height, var(--slds-g-sizing-9));
-  }
+  height: var(--slds-c-buttonicon-sizing-height, var(--slds-g-sizing-9));
+}

package/src/lightning/progressBar/progress-bar.slds.css

@@ -1,69 +1,68 @@
 
+:host([data-render-mode="shadow"]) [part='progress-bar'] {
+  /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
+  --_slds-c-progressbar-height: var(--slds-g-sizing-3); /* 0.5rem */
+}
 
-  :host([data-render-mode="shadow"]) [part="progress-bar"] {
-    /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
-    --_slds-c-progressbar-height: var(--slds-g-sizing-3); /* 0.5rem */
-  }
-
-  :host([data-render-mode="shadow"]) .slds-progress-bar {
-    appearance: none;
-    display: block;
-    width: 100%;
-    height: var(--_slds-c-progressbar-height);
-    background: var(--slds-g-color-neutral-base-80);
-    border: 0;
-    position: var(--_slds-c-progressbar-position, relative);
+:host([data-render-mode="shadow"]) .slds-progress-bar {
+  appearance: none;
+  display: block;
+  width: 100%;
+  height: var(--_slds-c-progressbar-height);
+  background: var(--slds-g-color-neutral-base-80);
+  border: 0;
+  position: var(--_slds-c-progressbar-position, relative);
 
-    /* TODO: W-15509155 -- Linter Version needs to be updated. 
+  /* TODO: W-15509155 -- Linter Version needs to be updated. 
     It is currently "@salesforce-ux/sds-stylelint-config": "0.5.0" */
-    /* stylelint-disable-next-line sds-stylelint-plugin/styling-hooks-deprecated */
-    inset-block-start: var(--_slds-c-progressbar-inset-block-start, auto);
-    /* stylelint-disable-next-line sds-stylelint-plugin/styling-hooks-deprecated */
-    margin-block-start: var(--_slds-c-progressbar-margin-block-start, 0);
-  }
+  /* stylelint-disable-next-line sds-stylelint-plugin/styling-hooks-deprecated */
+  inset-block-start: var(--_slds-c-progressbar-inset-block-start, auto);
+  /* stylelint-disable-next-line sds-stylelint-plugin/styling-hooks-deprecated */
+  margin-block-start: var(--_slds-c-progressbar-margin-block-start, 0);
+}
 
-  :host([data-render-mode="shadow"]) .slds-progress-bar__value {
+:host([data-render-mode="shadow"]) .slds-progress-bar__value {
   /* TODO: Need to update this var to `--slds-g-color-brand-base-50` once v2.22 is out */
   background: var(--slds-g-color-accent-2, #1ab9ff);
   display: block;
   height: 100%;
 }
 
-  :host([data-render-mode="shadow"]) .slds-progress-bar_x-small {
+:host([data-render-mode="shadow"]) .slds-progress-bar_x-small {
   height: calc(var(--_slds-c-progressbar-height) * 0.25); /* 0.125rem */
 }
 
-  :host([data-render-mode="shadow"]) .slds-progress-bar_small {
+:host([data-render-mode="shadow"]) .slds-progress-bar_small {
   height: calc(var(--_slds-c-progressbar-height) * 0.5); /* 0.25rem */
 }
 
-  :host([data-render-mode="shadow"]) .slds-progress-bar_medium {
+:host([data-render-mode="shadow"]) .slds-progress-bar_medium {
   height: var(--_slds-c-progressbar-height); /* 0.5rem */
 }
 
-  :host([data-render-mode="shadow"]) .slds-progress-bar_large {
+:host([data-render-mode="shadow"]) .slds-progress-bar_large {
   height: calc(var(--_slds-c-progressbar-height) * 1.5); /* 0.75rem */
 }
 
-  :host([data-render-mode="shadow"]) .slds-progress-bar_circular {
+:host([data-render-mode="shadow"]) .slds-progress-bar_circular {
   border-radius: var(--slds-g-radius-border-3);
 }
 
-  :host([data-render-mode="shadow"]) .slds-progress-bar_circular .slds-progress-bar__value {
+:host([data-render-mode="shadow"]) .slds-progress-bar_circular .slds-progress-bar__value {
   border-radius: var(--slds-g-radius-border-3);
 }
 
-  /* TODO W-12674349: remove after name-value-list utils are added */
+/* TODO W-12674349: remove after name-value-list utils are added */
 
-  :host([data-render-mode="shadow"]) .slds-assistive-text {
-    position: absolute !important;
-    margin: -1px !important;
-    border: 0 !important;
-    padding: 0 !important;
-    width: 1px !important;
-    height: 1px !important;
-    overflow: hidden !important;
-    clip: rect(0 0 0 0) !important;
-    text-transform: none !important;
-    white-space: nowrap !important;
-  }
+:host([data-render-mode="shadow"]) .slds-assistive-text {
+  position: absolute !important;
+  margin: -1px !important;
+  border: 0 !important;
+  padding: 0 !important;
+  width: 1px !important;
+  height: 1px !important;
+  overflow: hidden !important;
+  clip: rect(0 0 0 0) !important;
+  text-transform: none !important;
+  white-space: nowrap !important;
+}

package/src/lightning/progressIndicator/__docs__/progressIndicator.md

@@ -150,5 +150,5 @@ or the Left and Right arrow keys to navigate from one stage to another. The `ari
 
 When you navigate away from the current active stage, the stage remains the current stage but the shift in focus makes it inactive. The current stage changes color from dark blue to white to indicate it's not the active stage. Additionally:
 
--   Navigating to an incomplete stage makes it an active incomplete stage, which changes its color from gray to dark blue
--   Navigating to a completed stage makes it an active completed stage, which changes its color from green to dark blue
+- Navigating to an incomplete stage makes it an active incomplete stage, which changes its color from gray to dark blue
+- Navigating to a completed stage makes it an active completed stage, which changes its color from green to dark blue