lightning-base-components 1.18.8-alpha → 1.19.1-alpha

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

@@ -133,42 +133,42 @@
 
     /* FORM ELEMENT: STACKED */
 
-    :host([data-render-mode="shadow"][variant~='label-stacked']) {
+    :host([data-render-mode="shadow"][variant='label-stacked']) {
         display: block;
     }
 
     /* TODO: Using `:not` is currently not working, and it could break the build because of issues with the dist script */
 
-    /* :host([variant~='label-stacked']):not(.slds-form-element_readonly) {
+    /* :host([variant='label-stacked']):not(.slds-form-element_readonly) {
         margin-block-end: var(--sds-g-spacing-2);
     }
 
-    :host([variant~='label-stacked']):not(.slds-is-editing) {
+    :host([variant='label-stacked']):not(.slds-is-editing) {
         padding: 0 var(--sds-g-spacing-1);
     } */
 
-    /* :host([variant~='label-stacked']):not([class*="slds-size"]) {
+    /* :host([variant='label-stacked']):not([class*="slds-size"]) {
           width: 100%;
           flex-basis: 100%;
     } */
 
-    :host([data-render-mode="shadow"][variant~='label-stacked']) .slds-form-element {
+    :host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element {
         padding: 0;
         margin-block-end: 0;
     }
 
-    :host([data-render-mode="shadow"][variant~='label-stacked']) .slds-form-element__label,:host([data-render-mode="shadow"][variant~='label-stacked']) .slds-form-element__control {
+    :host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element__label,:host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element__control {
         border-bottom: 0; /* Remove border when using legacy version of slds-form-element */
         padding-inline-start: 0;
     }
 
-    :host([data-render-mode="shadow"][variant~='label-stacked']) .slds-form-element__control {
+    :host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element__control {
         width: 100%;
         flex-basis: 100%;
         clear: left;
     }
 
-    :host([data-render-mode="shadow"][variant~='label-stacked']) .slds-form-element__icon {
+    :host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element__icon {
         float: none;
         padding-block-start: var(--sds-g-spacing-1, 0.25rem);
     }
@@ -177,7 +177,7 @@
 
     /* FORM ELEMENT: INLINE */
 
-    :host([data-render-mode="shadow"][variant~='label-inline']) {
+    :host([data-render-mode="shadow"][variant='label-inline']) {
         display: block;
     }
 
@@ -187,32 +187,32 @@
     in lighting-input this slds class is synonymous with the variant
     */
 
-    :host([data-render-mode="shadow"][variant~='label-inline'].slds-form-element_horizontal) {
+    :host([data-render-mode="shadow"][variant='label-inline'].slds-form-element_horizontal) {
         padding: var(--sds-g-spacing-1, 0.25rem);
         margin-block-end: var(--sds-g-spacing-2, 0.5rem);
     }
 
     /* TODO: Using `:not` is currently not working, and it could break the build because of issues with the dist script */
 
-    /* :host([variant~='label-inline']):not(.slds-form-element_readonly) {
+    /* :host([variant='label-inline']):not(.slds-form-element_readonly) {
         margin-block-end: var(--sds-g-spacing-2);
     }
 
-    :host([variant~='label-inline']):not([class*="slds-size"]) {
+    :host([variant='label-inline']):not([class*="slds-size"]) {
         width: 100%;
         flex-basis: 100%;
     }
 
-    :host([variant~='label-inline']:not(.slds-is-editing)) {
+    :host([variant='label-inline']:not(.slds-is-editing)) {
         padding: var(--sds-g-spacing-1);
     } */
 
-    :host([data-render-mode="shadow"][variant~='label-inline']).slds-is-edited {
+    :host([data-render-mode="shadow"][variant='label-inline']).slds-is-edited {
         padding-block-start: var(--sds-g-sizing-6, 1.25rem)
     }
 
-    @media (min-width: 48em) {
-        :host([data-render-mode="shadow"][variant~='label-inline']) .slds-form-element__label {
+    @media (width >= 48em) {
+        :host([data-render-mode="shadow"][variant='label-inline']) .slds-form-element__label {
           float: left;
           max-width: calc(33% - var(--sds-g-sizing-6, 1.25rem)); /* Removing icon width for when the help-text icon is present */
           flex-basis: calc(33% - var(--sds-g-sizing-6, 1.25rem)); /* Some form element controls are set to display:flex */
@@ -222,23 +222,22 @@
           z-index: 1;
         }
 
-        :host([data-render-mode="shadow"][variant~='label-inline']) lightning-helptext {
+        :host([data-render-mode="shadow"][variant='label-inline']) lightning-helptext {
           float: left;
         }
 
-        :host([data-render-mode="shadow"][variant~='label-inline']) .slds-form-element__control {
+        :host([data-render-mode="shadow"][variant='label-inline']) .slds-form-element__control {
           margin-inline-start: 33%;
           clear: none; /* Reset clear: left when switching to horizontal form layout */
         }
 
-        :host([data-render-mode="shadow"][variant~='label-inline']) .slds-form-element__control .slds-form-element__control {
+        :host([data-render-mode="shadow"][variant='label-inline']) .slds-form-element__control .slds-form-element__control {
           padding-inline-start: 0; /* Remove left padding on nested form controls, due to issues related to lightning-form components */
         }
 
-        :host([data-render-mode="shadow"][variant~='label-inline']) .slds-dueling-list__column .slds-form-element__label {
+        :host([data-render-mode="shadow"][variant='label-inline']) .slds-dueling-list__column .slds-form-element__label {
             width: auto;
             max-width: 100%;
-            -ms-flex-preferred-size: auto;
             flex-basis: auto;
             float: none;
             position: relative;
@@ -246,11 +245,11 @@
             margin-block-end: 0;
         }
 
-        :host([data-render-mode="shadow"][variant~='label-inline']) .slds-form-element__help {
+        :host([data-render-mode="shadow"][variant='label-inline']) .slds-form-element__help {
           margin-inline-start: 33%;
         }
 
-        :host([data-render-mode="shadow"][variant~='label-inline']) .slds-dueling-list {
+        :host([data-render-mode="shadow"][variant='label-inline']) .slds-dueling-list {
             clear: none;
         }
     }
@@ -283,7 +282,7 @@
 
     /* FORM ELEMENT: HIDDEN */
 
-    :host([data-render-mode="shadow"][variant~='label-hidden']) .slds-form-element__label {
+    :host([data-render-mode="shadow"][variant='label-hidden']) .slds-form-element__label {
       display: none
   }
 }

package/src/lightning/primitiveInputSimple/input-text.slds.css

@@ -153,18 +153,18 @@
         align-items: stretch;
     }
 
-    :host([data-render-mode="shadow"]) [part='input-container'][type~='range'] {
+    :host([data-render-mode="shadow"]) [part='input-container'][type='range'] {
         border: none;
         display: inline-block;
     }
 
-    :host([data-render-mode="shadow"]) [part='input'][type~='range'] {
+    :host([data-render-mode="shadow"]) [part='input'][type='range'] {
         min-height: calc(1.875rem + (1px * 2));
         margin: 0;
     }
 
-    :host([data-render-mode="shadow"]) [part='input-container'][type~='range']:focus-within,:host([data-render-mode="shadow"]) 
-    [part='input-container'][type~='range']:active {
+    :host([data-render-mode="shadow"]) [part='input-container'][type='range']:focus-within,:host([data-render-mode="shadow"]) 
+    [part='input-container'][type='range']:active {
         --sds-c-inputtext-color-border: var(--sds-g-color-brand-base-60, #1b96ff);
         --sds-c-inputtext-shadow: 0 0 3px var(--sds-g-color-brand-base-50, #0176d3);
         --sds-c-inputtext-color-background: var(--sds-g-color-neutral-base-100, #ffffff);
@@ -179,10 +179,10 @@
    */
     :host([data-render-mode="shadow"]) [part='input'] {
         padding-inline-start: var(
-            --slds-c-inputtext-spacing-inline-start,
+            --slds-c-inputtext-spacing-inlinestart,
             var(--sds-g-spacing-3, 0.75rem));
         padding-inline-end: var(
-            --slds-c-inputtext-spacing-inline-end,
+            --slds-c-inputtext-spacing-inlineend,
             var(--sds-g-spacing-4, 1rem));
         height: unset;
         font-family: var(--sds-g-font-family, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol');
@@ -281,7 +281,7 @@
    * the icon in the inline help text.
    */
     :host([data-render-mode="shadow"]) [part='start'] {
-        --slds-c-icon-spacing-inline-end: var(--sds-g-spacing-2, 0.5rem);
+        --slds-c-icon-spacing-inlineend: var(--sds-g-spacing-2, 0.5rem);
     }
 
     /**
@@ -296,12 +296,12 @@
    *
    * Ref: https://github.com/salesforce-ux/design-system-internal/blob/240-winter-23/ui/components/form-element/horizontal/_index.scss#L63
    */
-    @media (min-width: 48em) {
-        :host([data-render-mode="shadow"][variant~='label-inline']) [part='input-text'] {
+    @media (width >= 48em) {
+        :host([data-render-mode="shadow"][variant='label-inline']) [part='input-text'] {
             display: block;
         }
 
-        :host([data-render-mode="shadow"][variant~='label-inline']) [part='label'] {
+        :host([data-render-mode="shadow"][variant='label-inline']) [part='label'] {
             float: left;
 
             /* TODO: Get rid of these magic numbers */
@@ -309,11 +309,11 @@
             padding-block-start: var(--sds-g-spacing-1, 0.25rem);
         }
 
-        :host([data-render-mode="shadow"][variant~='label-inline']) [part='input-container'] {
+        :host([data-render-mode="shadow"][variant='label-inline']) [part='input-container'] {
             margin-inline-start: 33%;
         }
 
-        :host([data-render-mode="shadow"][variant~='label-inline']) [part='inline-help'] {
+        :host([data-render-mode="shadow"][variant='label-inline']) [part='inline-help'] {
             float: left;
             padding-block-start: var(--sds-g-spacing-1, 0.25rem);
         }
@@ -348,7 +348,7 @@
    * Has Icon Left
    */
     :host([data-render-mode="shadow"]) .slds-input-has-icon_left {
-        --slds-c-inputtext-spacing-inline-start: var(--sds-g-spacing-6, 2rem);
+        --slds-c-inputtext-spacing-inlinestart: var(--sds-g-spacing-6, 2rem);
     }
 
     :host([data-render-mode="shadow"]) .slds-input-has-icon_left .slds-input__icon,:host([data-render-mode="shadow"]) 
@@ -360,7 +360,7 @@
    * Has Icon Right
    */
     :host([data-render-mode="shadow"]) .slds-input-has-icon_right {
-        --slds-c-inputtext-spacing-inline-end: var(--sds-g-spacing-6, 2rem);
+        --slds-c-inputtext-spacing-inlineend: var(--sds-g-spacing-6, 2rem);
     }
 
     :host([data-render-mode="shadow"]) .slds-input-has-icon_right .slds-input__icon,:host([data-render-mode="shadow"]) 
@@ -372,8 +372,8 @@
    * Has Icon Left & Right
    */
     :host([data-render-mode="shadow"]) .slds-input-has-icon_left-right {
-        --slds-c-inputtext-spacing-inline-start: var(--sds-g-spacing-6, 2rem);
-        --slds-c-inputtext-spacing-inline-end: var(--sds-g-spacing-6, 2rem);
+        --slds-c-inputtext-spacing-inlinestart: var(--sds-g-spacing-6, 2rem);
+        --slds-c-inputtext-spacing-inlineend: var(--sds-g-spacing-6, 2rem);
     }
 
   /**

package/src/lightning/primitiveInputSimple/mobileInputUtils.js

@@ -0,0 +1,24 @@
+import {
+    normalizeISODate,
+    normalizeISOTime,
+    normalizeISODateTime,
+    normalizeFormattedDateTime,
+} from 'lightning/internationalizationLibrary';
+
+export function normalizeDate(value) {
+    return normalizeISODate(value, 'medium').isoValue || '';
+}
+
+// Converts value to the user's timezone and formats it in a way that will be accepted by the input
+export function normalizeUTCDateTime(value, timezone) {
+    return normalizeISODateTime(value, timezone).isoValue || '';
+}
+
+export function normalizeTime(value) {
+    return normalizeISOTime(value, 'short').isoValue || '';
+}
+
+// parses the input value and converts it back to UTC from the user's timezone
+export function normalizeDateTimeToUTC(value, timezone) {
+    return normalizeFormattedDateTime(value, timezone) || '';
+}

package/src/lightning/primitiveInputSimple/primitiveInputSimple.html

@@ -1,7 +1,7 @@
 <template>
     <div part="input-text">
         <template if:false={hasExternalLabel}>
-            <label class={computedLabelClass} for="input" part="label">
+            <label class={computedLabelClass} for="input" part="label" data-form-label id="input-text-label" >
                 <template if:true={required}>
                     <abbr class="slds-required" title={i18n.required}>*</abbr>
                 </template>

package/src/lightning/primitiveInputSimple/primitiveInputSimple.js

@@ -3,7 +3,12 @@ import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 import labelRequired from '@salesforce/label/LightningControl.required';
 import labelClearInput from '@salesforce/label/LightningControl.clear';
 import labelLoadingIndicator from '@salesforce/label/LightningControl.loading';
-
+import {
+    normalizeTime,
+    normalizeDate,
+    normalizeUTCDateTime,
+    normalizeDateTimeToUTC,
+} from './mobileInputUtils';
 import {
     calculateFractionDigitsFromStep,
     formatNumber,
@@ -24,6 +29,8 @@ import {
     isNotUndefinedOrNull,
     normalizeKeyValue,
     normalizeString,
+    setDecoratedDragonInputValueWithoutEvent,
+    isDesktopBrowser,
 } from 'lightning/utilsPrivate';
 
 import { InputSelectionCache } from './selection';
@@ -70,10 +77,14 @@ export default class LightningPrimitiveInputSimple extends LightningShadowBaseCl
 
     @api ariaLabel;
     @api ariaInvalid;
+    @api timezone;
 
     @api
     get ariaDescribedByElements() {
-        return this.template.querySelector('[data-help-message]');
+        const lable = this._helpMessage
+            ? this.template.querySelector('[data-form-label]')
+            : null;
+        return [lable, this.template.querySelector('[data-help-message]')];
     }
 
     @api
@@ -230,6 +241,13 @@ export default class LightningPrimitiveInputSimple extends LightningShadowBaseCl
                 this.buildFormatNumberOptions(this.formatter)
             );
         }
+        if (
+            this.isTypeMobileDate ||
+            this.isTypeMobileDateTime ||
+            this.isTypeMobileTime
+        ) {
+            return this.normalizeDateTimeString(this._value);
+        }
         return this._value;
     }
 
@@ -338,14 +356,23 @@ export default class LightningPrimitiveInputSimple extends LightningShadowBaseCl
 
         const detail = {};
 
+        // the mobile input time/date/datetime components use `primitive-input-simple`
         if (this.isTypeNumber) {
             this._numberRawValue = this.inputElement.value;
             detail.value = toIsoDecimal(this.inputElement.value);
+        } else if (this.isTypeMobileDateTime) {
+            detail.value = normalizeDateTimeToUTC(
+                this.inputElement.value,
+                this.timezone
+            );
+        } else if (this.isTypeMobileTime) {
+            detail.value = normalizeTime(this.inputElement.value);
         } else {
             detail.value = this.inputElement.value;
         }
 
         // this._updateValueAndValidityAttribute(detail.value); > check this
+
         this._value = detail.value;
         // this._updateProxyInputAttributes('value');
 
@@ -392,6 +419,32 @@ export default class LightningPrimitiveInputSimple extends LightningShadowBaseCl
         return this.type === 'text';
     }
 
+    // the types below are used for the mobile input date/datetime/time components
+
+    get isTypeDate() {
+        return this.type === 'date';
+    }
+
+    get isTypeDateTime() {
+        return this.type === 'datetime' || this.type === 'datetime-local';
+    }
+
+    get isTypeTime() {
+        return this.type === 'time';
+    }
+
+    get isTypeMobileDate() {
+        return this.isTypeDate && !isDesktopBrowser();
+    }
+
+    get isTypeMobileTime() {
+        return this.isTypeTime && !isDesktopBrowser();
+    }
+
+    get isTypeMobileDateTime() {
+        return this.isTypeDateTime && !isDesktopBrowser();
+    }
+
     /***** GETTERS *****/
 
     get showClearButton() {
@@ -412,7 +465,31 @@ export default class LightningPrimitiveInputSimple extends LightningShadowBaseCl
     }
 
     get displayedValue() {
-        return this.getDisplayedValue();
+        if (this.isTypeNumber) {
+            return this.getDisplayedValue();
+        }
+
+        // the mobile input time/date/datetime components use `primitive-input-simple`
+        if (
+            this.isTypeMobileTime ||
+            this.isTypeMobileDate ||
+            this.isTypeMobileDateTime
+        ) {
+            return this.normalizeDateTimeString(this._value, this.timezone);
+        }
+
+        return this._value;
+    }
+
+    normalizeDateTimeString(value) {
+        if (this.isTypeDate) {
+            return normalizeDate(value);
+        } else if (this.isTypeTime) {
+            return normalizeTime(value);
+        } else if (this.isTypeDateTime) {
+            return normalizeUTCDateTime(value, this.timezone);
+        }
+        return value;
     }
 
     get i18n() {
@@ -526,16 +603,8 @@ export default class LightningPrimitiveInputSimple extends LightningShadowBaseCl
     }
 
     setInputValue(value) {
-        if (this._inputDragonDecorated) {
-            // The underlying input has been modified to dispatch an 'input' event when a direct value set
-            // is used to allow for Dragon Natural Speaking (which sets the value directly on the inputs instead
-            // dispatching an input event against the input). Since we're in a programatic set here (ie. set
-            // not resulting from a direct user interaction) we want a default setter behaviour that doesn't
-            // dispatch any events.
-            // setDecoratedDragonInputValueWithoutEvent(this.inputElement, value);
-        } else {
-            this.inputElement.value = value;
-        }
+        // set value without dispatching an 'input' event
+        setDecoratedDragonInputValueWithoutEvent(this.inputElement, value);
     }
 
     connectedCallback() {

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

@@ -133,42 +133,42 @@
 
     /* FORM ELEMENT: STACKED */
 
-    :host([data-render-mode="shadow"][variant~='label-stacked']) {
+    :host([data-render-mode="shadow"][variant='label-stacked']) {
         display: block;
     }
 
     /* TODO: Using `:not` is currently not working, and it could break the build because of issues with the dist script */
 
-    /* :host([variant~='label-stacked']):not(.slds-form-element_readonly) {
+    /* :host([variant='label-stacked']):not(.slds-form-element_readonly) {
         margin-block-end: var(--sds-g-spacing-2);
     }
 
-    :host([variant~='label-stacked']):not(.slds-is-editing) {
+    :host([variant='label-stacked']):not(.slds-is-editing) {
         padding: 0 var(--sds-g-spacing-1);
     } */
 
-    /* :host([variant~='label-stacked']):not([class*="slds-size"]) {
+    /* :host([variant='label-stacked']):not([class*="slds-size"]) {
           width: 100%;
           flex-basis: 100%;
     } */
 
-    :host([data-render-mode="shadow"][variant~='label-stacked']) .slds-form-element {
+    :host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element {
         padding: 0;
         margin-block-end: 0;
     }
 
-    :host([data-render-mode="shadow"][variant~='label-stacked']) .slds-form-element__label,:host([data-render-mode="shadow"][variant~='label-stacked']) .slds-form-element__control {
+    :host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element__label,:host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element__control {
         border-bottom: 0; /* Remove border when using legacy version of slds-form-element */
         padding-inline-start: 0;
     }
 
-    :host([data-render-mode="shadow"][variant~='label-stacked']) .slds-form-element__control {
+    :host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element__control {
         width: 100%;
         flex-basis: 100%;
         clear: left;
     }
 
-    :host([data-render-mode="shadow"][variant~='label-stacked']) .slds-form-element__icon {
+    :host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element__icon {
         float: none;
         padding-block-start: var(--sds-g-spacing-1, 0.25rem);
     }
@@ -177,7 +177,7 @@
 
     /* FORM ELEMENT: INLINE */
 
-    :host([data-render-mode="shadow"][variant~='label-inline']) {
+    :host([data-render-mode="shadow"][variant='label-inline']) {
         display: block;
     }
 
@@ -187,32 +187,32 @@
     in lighting-input this slds class is synonymous with the variant
     */
 
-    :host([data-render-mode="shadow"][variant~='label-inline'].slds-form-element_horizontal) {
+    :host([data-render-mode="shadow"][variant='label-inline'].slds-form-element_horizontal) {
         padding: var(--sds-g-spacing-1, 0.25rem);
         margin-block-end: var(--sds-g-spacing-2, 0.5rem);
     }
 
     /* TODO: Using `:not` is currently not working, and it could break the build because of issues with the dist script */
 
-    /* :host([variant~='label-inline']):not(.slds-form-element_readonly) {
+    /* :host([variant='label-inline']):not(.slds-form-element_readonly) {
         margin-block-end: var(--sds-g-spacing-2);
     }
 
-    :host([variant~='label-inline']):not([class*="slds-size"]) {
+    :host([variant='label-inline']):not([class*="slds-size"]) {
         width: 100%;
         flex-basis: 100%;
     }
 
-    :host([variant~='label-inline']:not(.slds-is-editing)) {
+    :host([variant='label-inline']:not(.slds-is-editing)) {
         padding: var(--sds-g-spacing-1);
     } */
 
-    :host([data-render-mode="shadow"][variant~='label-inline']).slds-is-edited {
+    :host([data-render-mode="shadow"][variant='label-inline']).slds-is-edited {
         padding-block-start: var(--sds-g-sizing-6, 1.25rem)
     }
 
-    @media (min-width: 48em) {
-        :host([data-render-mode="shadow"][variant~='label-inline']) .slds-form-element__label {
+    @media (width >= 48em) {
+        :host([data-render-mode="shadow"][variant='label-inline']) .slds-form-element__label {
           float: left;
           max-width: calc(33% - var(--sds-g-sizing-6, 1.25rem)); /* Removing icon width for when the help-text icon is present */
           flex-basis: calc(33% - var(--sds-g-sizing-6, 1.25rem)); /* Some form element controls are set to display:flex */
@@ -222,23 +222,22 @@
           z-index: 1;
         }
 
-        :host([data-render-mode="shadow"][variant~='label-inline']) lightning-helptext {
+        :host([data-render-mode="shadow"][variant='label-inline']) lightning-helptext {
           float: left;
         }
 
-        :host([data-render-mode="shadow"][variant~='label-inline']) .slds-form-element__control {
+        :host([data-render-mode="shadow"][variant='label-inline']) .slds-form-element__control {
           margin-inline-start: 33%;
           clear: none; /* Reset clear: left when switching to horizontal form layout */
         }
 
-        :host([data-render-mode="shadow"][variant~='label-inline']) .slds-form-element__control .slds-form-element__control {
+        :host([data-render-mode="shadow"][variant='label-inline']) .slds-form-element__control .slds-form-element__control {
           padding-inline-start: 0; /* Remove left padding on nested form controls, due to issues related to lightning-form components */
         }
 
-        :host([data-render-mode="shadow"][variant~='label-inline']) .slds-dueling-list__column .slds-form-element__label {
+        :host([data-render-mode="shadow"][variant='label-inline']) .slds-dueling-list__column .slds-form-element__label {
             width: auto;
             max-width: 100%;
-            -ms-flex-preferred-size: auto;
             flex-basis: auto;
             float: none;
             position: relative;
@@ -246,11 +245,11 @@
             margin-block-end: 0;
         }
 
-        :host([data-render-mode="shadow"][variant~='label-inline']) .slds-form-element__help {
+        :host([data-render-mode="shadow"][variant='label-inline']) .slds-form-element__help {
           margin-inline-start: 33%;
         }
 
-        :host([data-render-mode="shadow"][variant~='label-inline']) .slds-dueling-list {
+        :host([data-render-mode="shadow"][variant='label-inline']) .slds-dueling-list {
             clear: none;
         }
     }
@@ -283,7 +282,7 @@
 
     /* FORM ELEMENT: HIDDEN */
 
-    :host([data-render-mode="shadow"][variant~='label-hidden']) .slds-form-element__label {
+    :host([data-render-mode="shadow"][variant='label-hidden']) .slds-form-element__label {
       display: none
   }
 }

package/src/lightning/progressRing/progressRing.js

@@ -1,5 +1,14 @@
 import { LightningElement, api } from 'lwc';
 import { classSet } from 'lightning/utils';
+import labelWarningAltText from '@salesforce/label/LightningProgressRing.warning';
+import labelExpiredAltText from '@salesforce/label/LightningProgressRing.expired';
+import labelCompleteAltText from '@salesforce/label/LightningProgressRing.complete';
+
+const i18n = {
+    warning: labelWarningAltText,
+    expired: labelExpiredAltText,
+    complete: labelCompleteAltText,
+};
 
 /**
  * Progress head SVG element viewBox attribute is set as '-1 -1 2 2', hence viewbox height is 2 units
@@ -164,15 +173,19 @@ export default class progressRing extends LightningElement {
         return undefined;
     }
 
+    get i18n() {
+        return i18n;
+    }
+
     get computedAltText() {
         if (this.variant === 'warning') {
-            return 'Warning';
+            return this.i18n.warning;
         }
         if (this.variant === 'expired') {
-            return 'Expired';
+            return this.i18n.expired;
         }
         if (this.isComplete) {
-            return 'Complete';
+            return this.i18n.complete;
         }
         return undefined;
     }