lightning-base-components 1.21.1-alpha → 1.21.3-alpha

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

@@ -10,63 +10,72 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
 
 
-@supports (--styling-hooks: '') {
-
-    :host([data-render-mode="shadow"]) [part='checkbox-toggle'] {
+:host([data-render-mode="shadow"]) [part='checkbox-toggle'] {
       width: 100%;
       display: flex
     }
 
-    /* Container for text to show when checkbox is toggle off */
-    :host([data-render-mode="shadow"]) .slds-checkbox_off {
+
+/* Container for text to show when checkbox is toggle off */
+
+
+:host([data-render-mode="shadow"]) .slds-checkbox_off {
       display: block;
     }
 
-    /* Container for text to show when checkbox is toggle on */
-    :host([data-render-mode="shadow"]) .slds-checkbox_on {
+
+/* Container for text to show when checkbox is toggle on */
+
+
+:host([data-render-mode="shadow"]) .slds-checkbox_on {
       display: none;
     }
 
-    :host([data-render-mode="shadow"]) .slds-checkbox_faux_container {
-        font-size: var(--sds-g-font-scale-neg-4, 0.625rem);
-        color: var(--slds-g-color-neutral-base-30);
+
+: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-2);
     }
 
-    :host([data-render-mode="shadow"]) [part='indicator']{
+
+:host([data-render-mode="shadow"]) [part='indicator']{
       display: block;
       position: relative;
-      width: var(--sds-g-sizing-10, 3rem);
-      height: var(--sds-g-sizing-7, 1.5rem);
-      border-width: var(--sds-g-sizing-border-1, 1px);
+      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(--sds-g-color-neutral-base-70, #aeaeae));
-      padding: var(--sds-g-sizing-1, 0.125rem);
-      background-color: var(--slds-c-checkbox-toggle-color-background, var(--sds-g-color-neutral-base-70, #aeaeae));
+      border-color: var(--slds-c-checkbox-toggle-color-border, var(--slds-g-color-border-1));
+      padding: var(--slds-g-sizing-1);
+      background-color: var(--slds-c-checkbox-toggle-color-background, var(--slds-g-color-surface-container-3));
       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,:host([data-render-mode="shadow"]) 
+
+:host([data-render-mode="shadow"]) [part='indicator']:hover,:host([data-render-mode="shadow"]) 
     [part='indicator']:focus {
-      --slds-c-checkbox-toggle-color-background: var(--slds-c-checkbox-toggle-color-background-hover, var(--slds-g-color-neutral-base-50, var(--sds-g-color-neutral-base-60, #939393)));
+      --slds-c-checkbox-toggle-color-background: var(--slds-c-checkbox-toggle-color-background-hover, var(--slds-g-color-accent-container-2));
       --slds-c-checkbox-toggle-color-border: var(--slds-c-checkbox-toggle-color-border-hover);
 
       cursor: pointer;
     }
 
-    :host([data-render-mode="shadow"]) [part='indicator']::after {
+
+:host([data-render-mode="shadow"]) [part='indicator']::after {
       content: '';
       position: absolute;
       top: 1px;
       left: 1px;
-      width: var(--sds-g-sizing-6, 1.25rem);
-      height: var(--sds-g-sizing-6, 1.25rem);
-      background-color: var(--slds-c-checkbox-toggle-switch-color-background, var(--sds-g-color-neutral-base-100, #ffffff));
+      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'] {
+
+:host([data-render-mode="shadow"]) [part='checkbox'] {
       height: 1px;
       width: 1px;
       border: 0;
@@ -77,41 +86,48 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
       position: absolute;
     }
 
-    :host([data-render-mode="shadow"]) [part='checkbox']:checked:focus + .slds-checkbox_faux_container > [part='indicator']  {
-        --slds-c-checkbox-toggle-color-background: var(--sds-g-color-brand-base-30, #014486);
+
+:host([data-render-mode="shadow"]) [part='checkbox']:checked:focus + .slds-checkbox_faux_container > [part='indicator']  {
+        --slds-c-checkbox-toggle-color-background: var(--slds-g-color-accent-3);
     }
 
-    :host([data-render-mode="shadow"]) [part='checkbox']:checked + .slds-checkbox_faux_container .slds-checkbox_off {
+
+:host([data-render-mode="shadow"]) [part='checkbox']:checked + .slds-checkbox_faux_container .slds-checkbox_off {
         display: none;
     }
 
-    :host([data-render-mode="shadow"]) [part='checkbox']:checked + .slds-checkbox_faux_container .slds-checkbox_on {
+
+:host([data-render-mode="shadow"]) [part='checkbox']:checked + .slds-checkbox_faux_container .slds-checkbox_on {
         display: block;
     }
 
-    :host([data-render-mode="shadow"]) [part='checkbox']:checked + .slds-checkbox_faux_container > [part='indicator'] {
-        --slds-c-checkbox-toggle-color-border: var(--sds-g-color-brand-base-50, #0176d3);
-        --slds-c-checkbox-toggle-color-background: var(--sds-g-color-brand-base-50, #0176d3);
+
+: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-2);
     }
 
-    :host([data-render-mode="shadow"]) [part='checkbox']:checked + .slds-checkbox_faux_container > [part='indicator']:hover,:host([data-render-mode="shadow"]) 
+
+:host([data-render-mode="shadow"]) [part='checkbox']:checked + .slds-checkbox_faux_container > [part='indicator']:hover,:host([data-render-mode="shadow"]) 
     [part='checkbox']:checked + .slds-checkbox_faux_container > [part='indicator']:focus {
-        --slds-c-checkbox-toggle-color-background: var(--sds-g-color-brand-base-30, #014486);
+        --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 {
+
+:host([data-render-mode="shadow"]) [part='checkbox']:checked + .slds-checkbox_faux_container > [part='indicator']::before {
         content: '';
         position: absolute;
         top: 1px;
         right: 1px;
-        width: var(--sds-g-sizing-6, 1.25rem);
-        height: var(--sds-g-sizing-6, 1.25rem);
-        background-color: var(--slds-c-checkbox-toggle-switch-color-background-checked, var(--slds-c-checkbox-toggle-switch-color-background, var(--sds-g-color-neutral-base-100, #ffffff)));
+        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 {
+
+: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;
 
@@ -121,41 +137,49 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
         left: 0.6rem;
         height: 0.7rem;
         width: 0.45rem;
-        border-bottom-width: var(--sds-g-sizing-border-2, 2px);
+        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, var(--sds-g-color-neutral-base-100, #ffffff)));
-        border-right-width: var(--sds-g-sizing-border-2, 2px);
+        border-bottom-color: var(--slds-c-checkbox-toggle-mark-color-foreground, var(--slds-g-color-border-1));
+        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, var(--sds-g-color-neutral-base-100, #ffffff)));
+        border-right-color: var(--slds-c-checkbox-toggle-mark-color-foreground, var(--slds-g-color-border-1));
         transform: rotate(45deg);
     }
 
-    :host([data-render-mode="shadow"]) [part='checkbox'][disabled] + .slds-checkbox_faux_container > [part='indicator'] {
-        background-color: var(--slds-g-color-neutral-base-80, var(--sds-g-color-neutral-base-70, #aeaeae));
-        border-color: var(--slds-g-color-neutral-base-80, var(--sds-g-color-neutral-base-70, #aeaeae));
+
+:host([data-render-mode="shadow"]) [part='checkbox'][disabled] + .slds-checkbox_faux_container > [part='indicator'] {
+        background-color: var(--slds-g-color-neutral-base-80, var(--slds-g-color-disabled-container-1));
+        border-color: var(--slds-g-color-neutral-base-80, var(--slds-g-color-border-disabled-2));
         pointer-events: none;
     }
 
-    :host([data-render-mode="shadow"]) [part='checkbox'][disabled] + .slds-checkbox_faux_container > [part='indicator']::after {
-        background-color: var(--slds-g-color-neutral-base-80, var(--sds-g-color-neutral-base-80, #c9c9c9));
+
+:host([data-render-mode="shadow"]) [part='checkbox'][disabled] + .slds-checkbox_faux_container > [part='indicator']::after {
+        background-color: var(--slds-g-color-neutral-base-80, var(--slds-g-color-disabled-1));
     }
 
-    :host([data-render-mode="shadow"]) [part='checkbox'][disabled] + .slds-checkbox_faux_container > [part='indicator']:hover,:host([data-render-mode="shadow"]) 
+
+: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-neutral-base-80, var(--sds-g-color-neutral-base-70, #aeaeae));
+        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']::before {
-        background-color: var(--slds-g-color-neutral-base-90, var(--sds-g-color-neutral-base-80, #c9c9c9));
+
+:host([data-render-mode="shadow"]) [part='checkbox'][disabled]:checked + .slds-checkbox_faux_container > [part='indicator']::before {
+        background-color: var(--slds-g-color-disabled-1);
     }
 
-    :host([data-render-mode="shadow"]) [part='checkbox'][disabled]:checked + .slds-checkbox_faux_container > [part='indicator']::after {
+
+:host([data-render-mode="shadow"]) [part='checkbox'][disabled]:checked + .slds-checkbox_faux_container > [part='indicator']::after {
         background-color: transparent;
     }
 
-    /* ASSISTIVE TEXT */
-    :host([data-render-mode="shadow"]) .slds-assistive-text {
+
+/* ASSISTIVE TEXT */
+
+
+:host([data-render-mode="shadow"]) .slds-assistive-text {
       position: absolute !important;
       margin: -1px !important;
       border: 0 !important;
@@ -167,4 +191,3 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
       text-transform: none !important;
       white-space: nowrap !important;
     }
-  }

package/src/lightning/primitiveInputToggle/primitiveInputToggle.css

@@ -1,3 +1 @@
-/* @import 'lightning/sldsCommon';
-@import './form-element.slds.css';
-@import './input-toggle.slds.css'; */
+@import './primitiveInputToggle.lbc.native.css';

package/src/lightning/primitiveInputToggle/primitiveInputToggle.js

@@ -1,4 +1,5 @@
-import { LightningElement, api } from 'lwc';
+import { api } from 'lwc';
+import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 import {
     isNativeComponent,
     normalizeAriaAttribute,
@@ -7,11 +8,12 @@ import {
 import { VARIANT } from 'lightning/inputUtils';
 import labelRequired from '@salesforce/label/LightningControl.required';
 
+
 const i18n = {
     required: labelRequired,
 };
 
-export default class LightningPrimitiveInputToggle extends LightningElement {
+export default class LightningPrimitiveInputToggle extends LightningShadowBaseClass {
     _checked;
     _value = '';
     _ariaLabel;
@@ -25,7 +27,6 @@ export default class LightningPrimitiveInputToggle extends LightningElement {
     @api accessKey;
     @api disabled;
     @api label;
-    @api variant;
     @api name;
     @api readOnly;
     @api required;
@@ -113,6 +114,15 @@ export default class LightningPrimitiveInputToggle extends LightningElement {
         reflectAttribute(this, 'invalid', Boolean(message));
     }
 
+    @api
+    get variant() {
+        return this._variant;
+    }
+    set variant(variant) {
+        this._variant = variant;
+        reflectAttribute(this, 'variant', variant);
+    }
+
     get computedLabelClass() {
         return this.variant === VARIANT.LABEL_HIDDEN
             ? 'slds-form-element__label slds-assistive-text'
@@ -148,6 +158,7 @@ export default class LightningPrimitiveInputToggle extends LightningElement {
     }
 
     connectedCallback() {
+        super.connectedCallback();
         this._isNativeShadow = isNativeComponent(this);
     }
 

package/src/lightning/primitiveInputToggle/primitiveInputToggle.js-meta.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<LightningComponentBundle xmlns="xmlns=http://soap.sforce.com/2006/04/metadata">
+    <capabilities>
+        <capability>lightning__ServerRenderableWithHydration</capability>
+    </capabilities>
+</LightningComponentBundle>

package/src/lightning/primitiveInputToggle/primitiveInputToggle.lbc.native.css

@@ -0,0 +1,3 @@
+@import 'lightning/sldsCommon';
+@import './form-element.slds.css';
+@import './input-toggle.slds.css';

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

@@ -0,0 +1,64 @@
+
+/* Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
+  Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
+
+  :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-surface-container-1);
+    border: 0;
+    position: relative;
+}
+
+  :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 {
+  height: calc(var(--_slds-c-progressbar-height) * 0.25); /* 0.125rem */
+}
+
+  :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 {
+  height: var(--_slds-c-progressbar-height); /* 0.5rem */
+}
+
+  :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 {
+  border-radius: var(--slds-g-radius-border-3);
+}
+
+  :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 */
+
+  :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/progressBar/progressBar.css

@@ -0,0 +1 @@
+@import './progressBar.lbc.native.css';

package/src/lightning/progressBar/progressBar.html

@@ -1,5 +1,6 @@
 <template>
     <div class={computedClass}
+         part="progress-bar"
          aria-valuemin="0"
          aria-valuemax="100"
          aria-valuenow={percentValue}

package/src/lightning/progressBar/progressBar.js

@@ -1,7 +1,8 @@
 import labelProgress from '@salesforce/label/LightningProgressBar.progress';
 import labelProgressBar from '@salesforce/label/LightningProgressBar.progressBar';
 
-import { LightningElement, track, api } from 'lwc';
+import { track, api } from 'lwc';
+import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 import { classSet } from 'lightning/utils';
 import {
     normalizeString as normalize,
@@ -23,7 +24,7 @@ const DEFAULT_VARIANT = 'base';
 /**
  * Displays a horizontal progress bar from left to right to indicate the progress of an operation.
  */
-export default class LightningProgressBar extends LightningElement {
+export default class LightningProgressBar extends LightningShadowBaseClass {
     @track privateVariant = DEFAULT_VARIANT;
     @track privateSize = DEFAULT_SIZE;
 

package/src/lightning/progressBar/progressBar.lbc.native.css

@@ -0,0 +1,2 @@
+@import 'lightning/sldsCommon';
+@import './progress-bar.slds.css';

package/src/lightning/progressIndicator/progressIndicator.css

@@ -1,3 +1 @@
-slot {
-    display: flex;
-}
+@import './progressIndicator.lbc.synthetic.css'

package/src/lightning/progressIndicator/progressIndicator.lbc.synthetic.css

@@ -0,0 +1,3 @@
+slot {
+    display: flex;
+}

package/src/lightning/progressRing/progress-ring.slds.css

@@ -0,0 +1,113 @@
+
+    /* progress-ring */
+    :host([data-render-mode="shadow"]) .slds-progress-ring {
+        position: relative;
+        display: inline-block;
+        height: 1.5rem;
+        width: 1.5rem;
+        border-radius: 1.5rem;
+        background: var(--slds-g-color-border-base-1, var(--slds-g-color-surface-container-3));
+    }
+    :host([data-render-mode="shadow"]) .slds-progress-ring .slds-icon_container {
+        line-height: 0;
+    }
+    /* progress-ring_progress */
+    :host([data-render-mode="shadow"]) .slds-progress-ring__progress {
+        position: absolute;
+        top: 0;
+        left: 0;
+        height: 100%;
+        width: 100%;
+        transform: scale(-1, 1) rotate(-90deg);
+    }
+    :host([data-render-mode="shadow"]) .slds-progress-ring__progress svg {
+        width: 100%;
+    }
+    /* progress-ring_path */
+    :host([data-render-mode="shadow"]) .slds-progress-ring__path {
+        fill: var(--slds-g-color-success-1);
+    }
+    /* progress-ring_progress-head */
+    :host([data-render-mode="shadow"]) .slds-progress-ring__progress-head {
+        position: absolute;
+        height: calc(100% + 0.375rem);
+        width: calc(100% + 0.375rem);
+        top: -0.1875rem;
+        left: -0.1875rem;
+        transform: scale(-1, 1) rotate(-90deg);
+    }
+    /* progress-ring_content */
+    :host([data-render-mode="shadow"]) .slds-progress-ring__content {
+        position: absolute;
+        top: 0.1875rem;
+        right: 0.1875rem;
+        bottom: 0.1875rem;
+        left: 0.1875rem;
+        display: flex;
+        -webkit-box-align: center;
+        -ms-flex-align: center;
+        align-items: center;
+        -webkit-box-pack: center;
+        -ms-flex-pack: center;
+        justify-content: center;
+        border-radius: 1.5rem;
+        background: var(--slds-g-color-surface-container-1);
+    }
+    :host([data-render-mode="shadow"]) .slds-progress-ring__content .slds-icon {
+        width: 0.75rem;
+    }
+    /* variant = warning */
+    :host([data-render-mode="shadow"]) .slds-progress-ring_warning .slds-progress-ring__content {
+        background: var(--slds-g-color-surface-container-1);
+    }
+    :host([data-render-mode="shadow"]) .slds-progress-ring_warning .slds-icon,:host([data-render-mode="shadow"]) 
+    .slds-progress-ring_warning .slds-icon svg,:host([data-render-mode="shadow"]) 
+    .slds-progress-ring_warning .slds-progress-ring__path {
+        fill: var(--slds-g-color-warning-1);
+    }
+    /* variant = expired */
+    :host([data-render-mode="shadow"]) .slds-progress-ring_expired .slds-progress-ring__content {
+        background: var(--slds-g-color-surface-container-1);
+    }
+    :host([data-render-mode="shadow"]) .slds-progress-ring_expired .slds-icon,:host([data-render-mode="shadow"]) 
+    .slds-progress-ring_expired .slds-icon svg,:host([data-render-mode="shadow"]) 
+    .slds-progress-ring_expired .slds-progress-ring__path {
+        fill: var(--slds-g-color-error-1);
+    }
+    /* variant = complete */
+    :host([data-render-mode="shadow"]) .slds-progress-ring_complete .slds-icon,:host([data-render-mode="shadow"]) 
+    .slds-progress-ring_complete .slds-icon svg {
+        fill: var(--slds-g-color-on-success-1);
+    }
+    :host([data-render-mode="shadow"]) .slds-progress-ring_complete .slds-progress-ring__path {
+        fill: var(--slds-g-color-success-2);
+    }
+    :host([data-render-mode="shadow"]) .slds-progress-ring_complete .slds-progress-ring__content {
+        background: var(--slds-g-color-success-container-2);
+    }
+    /* size = large */
+    :host([data-render-mode="shadow"]) .slds-progress-ring_large {
+        height: 2rem;
+        width: 2rem;
+    }
+    :host([data-render-mode="shadow"]) .slds-progress-ring_large .slds-icon {
+        width: 1rem;
+    }
+    /* variant = active-step */
+    :host([data-render-mode="shadow"]) .slds-progress-ring_active-step .slds-progress-ring__path {
+        fill: var(--slds-g-color-accent-1);
+    }
+    /* additional classes */
+    /* 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;
+    }

package/src/lightning/progressRing/progressRing.css

@@ -0,0 +1 @@
+@import './progressRing.lbc.native.css';

package/src/lightning/progressRing/progressRing.html

@@ -1,5 +1,5 @@
 <template>
-    <div class={computedOuterClass}>
+    <div class={computedOuterClass} part="progress-ring">
         <div
             class="slds-progress-ring__progress"
             role="progressbar"

package/src/lightning/progressRing/progressRing.js

@@ -1,5 +1,6 @@
-import { LightningElement, api } from 'lwc';
+import { api } from 'lwc';
 import { classSet } from 'lightning/utils';
+import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 import { isUndefinedOrNull } from 'lightning/utilsPrivate';
 import labelProgressRing from '@salesforce/label/LightningProgressRing.progressRing';
 import labelWarningAltText from '@salesforce/label/LightningProgressRing.warning';
@@ -22,7 +23,7 @@ export const PROGRESS_HEAD_VIEWBOX_HEIGHT = 2;
  * Displays a circular progress indicator to provide feedback about an action or process.
  * This component requires API version 48.0 and later.
  */
-export default class progressRing extends LightningElement {
+export default class progressRing extends LightningShadowBaseClass {
     /**
      * The percentage value of the progress ring. The value must be a number from 0 to 100.
      * A value of 50 corresponds to a color fill of half the ring in a clockwise

package/src/lightning/progressRing/progressRing.lbc.native.css

@@ -0,0 +1,2 @@
+@import 'lightning/sldsCommon';
+@import './progress-ring.slds.css';

package/src/lightning/progressStep/progressStep.js

@@ -177,7 +177,6 @@ export default class LightningProgressStep extends LightningElement {
     }
 
     handleMouseLeave() {
-        this.clearAriaDescribedBy();
         this.dispatchEvent(
             // eslint-disable-next-line lightning-global/no-custom-event-bubbling
             new CustomEvent('stepmouseleave', {
@@ -198,7 +197,6 @@ export default class LightningProgressStep extends LightningElement {
     }
 
     handleBlur() {
-        this.clearAriaDescribedBy();
         this.dispatchEvent(
             // eslint-disable-next-line lightning-global/no-custom-event-bubbling
             new CustomEvent('stepblur', {
@@ -208,15 +206,6 @@ export default class LightningProgressStep extends LightningElement {
         );
     }
 
-    clearAriaDescribedBy() {
-        if (this.state.type === 'base') {
-            const button = this.template.querySelector('button');
-            if (button) {
-                button.removeAttribute('aria-describedBy');
-            }
-        }
-    }
-
     focusPathLink() {
         const pathLink = this.template.querySelector('a.slds-path__link');
         if (pathLink) {
@@ -249,11 +238,9 @@ export default class LightningProgressStep extends LightningElement {
                     horizontal: Direction.Center,
                     vertical: Direction.Top,
                 },
+                disableAriaDescribedBy: true,
             });
             this._tooltip.initialize();
-
-            // unset aria-describedby that would've been set by tooltipLibrary
-            this.clearAriaDescribedBy();
         }
     }
 }