lightning-base-components 1.19.2-alpha → 1.19.4-alpha

package/src/lightning/numberUtils/numberUtils.js

@@ -1,3 +1,271 @@
+import groupingSeparator from '@salesforce/i18n/number.groupingSeparator';
+import decimalSeparator from '@salesforce/i18n/number.decimalSeparator';
+import {
+    fromLocalizedDigits,
+    toLocalizedDigits,
+    numberFormat,
+} from 'lightning/internationalizationLibrary';
+import { isEmptyString } from 'lightning/inputUtils';
+import { normalizeNumber } from 'lightning/utilsPrivate';
+
+const VALID_NUMBER_CHARACTERS_EXPRESSION = new RegExp(
+    // eslint-disable-next-line no-useless-escape
+    '^[-+0-9kKmMbBtTeE.,\u0660-\u0669\u06F0-\u06F9\u07C0-\u07C9' +
+        '\u0966-\u096F\u09E6-\u09EF\u0A66-\u0A6F\u0AE6-\u0AEF' +
+        '\u0B66-\u0B6F\u0BE6-\u0BEF\u0C66-\u0C6F\u0CE6-\u0CEF' +
+        '\u0D66-\u0D6F\u0DE6-\u0DEF\u0E50-\u0E59\u0ED0-\u0ED9' +
+        '\u0F20-\u0F29\u1040-\u1049\u1090-\u1099\u17E0-\u17E9' +
+        '\u1810-\u1819\u1946-\u194F\u19D0-\u19D9\u1A80-\u1A89' +
+        '\u1A90-\u1A99\u1B50-\u1B59\u1BB0-\u1BB9\u1C40-\u1C49' +
+        '\u1C50-\u1C59\uA620-\uA629\uA8D0-\uA8D9\uA900-\uA909' +
+        '\uA9D0-\uA9D9\uA9F0-\uA9F9\uAA50-\uAA59\uABF0-\uABF9' +
+        ']$'
+);
+
+const SHORTCUT_FACTORS = {
+    k: 3,
+    m: 6,
+    b: 9,
+    t: 12,
+};
+const SHORTCUTS = ['k', 'm', 'b', 't'];
+
+const NUMBER_SYMBOLS = ['+', '-'];
+
+export function toIsoDecimal(numberAsString) {
+    const result = transformLocalizedNumberToIsoDecimal(numberAsString);
+    if (isNaN(result)) {
+        return '';
+    }
+    return result;
+}
+
+export function isValidNumber(numberAsString) {
+    return !isNaN(transformLocalizedNumberToIsoDecimal(numberAsString));
+}
+
+export function fromIsoDecimal(numberAsString) {
+    return toLocalizedDigits(numberAsString.replace('.', decimalSeparator));
+}
+
+// TODO: Too many options, simplify
+export function increaseNumberByStep({
+    value,
+    increment,
+    step,
+    fractionDigits,
+}) {
+    const startingValue = value === '' || value == null ? '0' : value;
+
+    const stepAsFloat = parseFloat(step);
+
+    let result;
+    if (isNaN(stepAsFloat)) {
+        result = parseFloat(startingValue) + increment;
+    } else {
+        // ideally we'd round the value to the closest correct step, so that if say the step is '2', and the
+        // current value is '1' it would increment to '2' instead of '3', since the former would be the valid
+        // number given the step constraint, however this would significantly complicate the code, keeping
+        // it simple for now.
+        const increaseBy = increment * stepAsFloat;
+        result = parseFloat(startingValue) + increaseBy;
+    }
+    return result.toFixed(fractionDigits);
+}
+
+export function calculateFractionDigitsFromStep(step) {
+    let calculatedFractionDigits;
+
+    if (step) {
+        const stepAsString = String(step).toLowerCase();
+        if (stepAsString !== 'any') {
+            // lowering the case because we're checking for exponent format as well
+            let fractionDigits = 0;
+            if (
+                stepAsString.indexOf('.') >= 0 &&
+                stepAsString.indexOf('e') < 0
+            ) {
+                const fractionalPart = stepAsString.split('.')[1];
+                // we're parsing to account for cases where the step is
+                // '1.0', or '1.000', etc.
+                if (parseInt(fractionalPart, 10) > 0) {
+                    fractionDigits = fractionalPart.length;
+                }
+            } else if (stepAsString.indexOf('e-') > 0) {
+                // exponent form eg. 1.5e-5
+                const splitOnExponent = stepAsString.split('e-');
+                const fractionalPart = splitOnExponent[0].split('.')[1];
+                const exponentPart = splitOnExponent[1];
+                const fractionalPartLength = fractionalPart
+                    ? fractionalPart.length
+                    : 0;
+                fractionDigits =
+                    parseInt(exponentPart, 10) + fractionalPartLength;
+            }
+            calculatedFractionDigits = fractionDigits;
+        }
+    }
+    return calculatedFractionDigits;
+}
+
+export function formatNumber(numberAsString, options) {
+    if (isEmptyString(numberAsString)) {
+        return '';
+    }
+
+    let formattedValue = numberAsString;
+    let inputValue = numberAsString;
+
+    // set formatter style & default options
+    const formatStyle = options.style;
+    const formatOptions = { style: formatStyle };
+
+    formatOptions.minimumFractionDigits = options.minimumFractionDigits;
+    formatOptions.maximumFractionDigits = options.maximumFractionDigits;
+
+    if (formatStyle === 'percent-fixed') {
+        // percent-fixed just uses percent format and divides the value by 100
+        // before passing to the library, this is to deal with the
+        // fact that percentages in salesforce are 0-100, not 0-1
+        formatOptions.style = 'percent';
+        const inputValueAsString = inputValue.toString();
+        const normalisedNumberInPercent = parseFloat(inputValue) / 100;
+
+        // If the number contains fraction digits and is not in an exponent format
+        if (
+            inputValueAsString.indexOf('.') > 0 &&
+            inputValueAsString.indexOf('e') < 0
+        ) {
+            // Depending on the input number, division by 100 may lead to rounding errors
+            // (e.g 0.785 / 100 is 0.007850000000000001), so we need to round back
+            // to the correct precision, that is - existing number of fractional digits
+            // plus extra 2 for division by 100.
+            inputValue = normalisedNumberInPercent.toFixed(
+                inputValueAsString.split('.')[1].length + 2
+            );
+        } else {
+            inputValue = normalisedNumberInPercent;
+        }
+    }
+
+    try {
+        formattedValue = numberFormat(formatOptions).format(inputValue) || '';
+    } catch (ignore) {
+        // ignore any errors
+    }
+    return formattedValue;
+}
+
+// Exporting only to test, separators are only overridden in the tests
+export function transformLocalizedNumberToIsoDecimal(
+    numberAsString,
+    separators
+) {
+    if (numberAsString == null || numberAsString.length === 0) {
+        return '';
+    }
+
+    const decimalSymbol = separators
+        ? separators.decimalSeparator
+        : decimalSeparator;
+    const groupingSymbol = separators
+        ? separators.groupSeparator
+        : groupingSeparator;
+
+    // remove the grouping separator
+    let result = numberAsString.split(groupingSymbol).join('');
+    if (decimalSymbol !== '.') {
+        // replace the local decimal separator with a
+        result = result.replace(decimalSymbol, '.');
+    }
+    return expandShortcuts(addLeadingZeroIfNeeded(fromLocalizedDigits(result)));
+}
+
+export function isValidNumberCharacter(character) {
+    return VALID_NUMBER_CHARACTERS_EXPRESSION.test(character);
+}
+
+/**
+ * validate the string-typed number and return the number string
+ * @param {String} value, number string to be validated
+ * @returns a valid number in string-typed, otherwise, empty string
+ */
+export function stringifyNumber(value) {
+    const numericValue = typeof value === 'string' ? Number(value) : value;
+    const normalizedNumber = normalizeNumber(numericValue);
+    return normalizedNumber === undefined ? '' : String(value);
+}
+
+export function hasValidNumberSymbol(value) {
+    const validSymbols = NUMBER_SYMBOLS.join('');
+    const matchSymbols = new RegExp(`[${validSymbols}]`);
+    return value.match(matchSymbols) ? true : false;
+}
+
+export function hasValidNumberShortcut(value) {
+    const result = value.toLowerCase().trim();
+    const kmb = SHORTCUTS.join('');
+    // Cannot have two shortcuts /([kmb])/g
+    const matchShortcuts = new RegExp(`([${kmb}])`, 'g');
+    const shortcutMatch = result.match(matchShortcuts);
+    if (shortcutMatch && shortcutMatch.length > 1) {
+        return false;
+    }
+    // Must end with 'm', 'k', 'b' and more than just a single letter
+    const matchEndsWith = new RegExp(`[${kmb}]$`);
+    const endsWithShortcut = result.match(matchEndsWith) !== null;
+    // has 'm' / 'k' / 'b' and more than just them (ie. result of 'm' / 'k' / 'b' are not valid.
+    return endsWithShortcut && result.length > 1;
+}
+
+// Exported for testing only
+export function expandShortcuts(isoValue) {
+    if (!hasValidNumberShortcut(isoValue)) {
+        return isoValue;
+    }
+    let result = isoValue.toLowerCase().trim();
+    const shortcut = result.charAt(result.length - 1);
+    // remove the suffix
+    result = result.substring(0, result.length - 1);
+    if (isNaN(result)) {
+        return isoValue;
+    }
+    const parts = result.split('.');
+    let fractionDigits = 0;
+    const hasDecimalPart = parts.length > 1;
+    if (hasDecimalPart) {
+        fractionDigits = parts[1].length;
+    }
+    const exponent = SHORTCUT_FACTORS[shortcut];
+    // since multiplication may result in loss of precision on javascript's part,
+    // we're calculating here the number of fraction digits needed and formatting
+    // the number at that
+    const newFractionDigits = Math.max(0, fractionDigits - exponent);
+    return parseFloat(result * Math.pow(10, exponent)).toFixed(
+        newFractionDigits
+    );
+}
+
+function addLeadingZeroIfNeeded(result) {
+    // If the number starts with +. OR  -. OR . ; insert a 0 before the decimal separator.
+    // eg. -.2 -> -0.2
+    const decimalSeparatorLocation = result.indexOf('.');
+    if (decimalSeparatorLocation === 0 || decimalSeparatorLocation === 1) {
+        const firstCharacter = result.charAt(0);
+        if (
+            firstCharacter === '+' ||
+            firstCharacter === '-' ||
+            firstCharacter === '.'
+        ) {
+            result =
+                result.substring(0, decimalSeparatorLocation) +
+                '0' +
+                result.substring(decimalSeparatorLocation);
+        }
+    }
+    return result;
+}
+
 /*
     Returns a number of decimal places
     ex:
@@ -9,7 +277,7 @@
         decimalPlaces('.5e1') -> 0
         decimalPlaces('.25e1') -> 1
 */
-function decimalPlaces(num) {
+export function getDecimalPlaces(num) {
     const match = ('' + num).match(/(?:\.(\d+))?(?:[eE]([+-]?\d+))?$/);
     if (!match) {
         return 0;
@@ -22,7 +290,3 @@ function decimalPlaces(num) {
             (match[2] ? +match[2] : 0)
     );
 }
-
-export default {
-    decimalPlaces,
-};

package/src/lightning/primitiveCustomCell/primitiveCustomCell.js

@@ -42,13 +42,13 @@ export default class PrimitiveCustomCell extends LightningElement {
         const typeAttributes = this.types.getType(
             this.columnType
         ).typeAttributes;
+        const attrs = {};
         if (Array.isArray(typeAttributes)) {
-            return typeAttributes.reduce((seed, attrName, index) => {
-                seed[attrName] = this[`typeAttribute${index}`];
-                return seed;
-            }, {});
+            for (let i = 0, { length } = typeAttributes; i < length; i += 1) {
+                attrs[typeAttributes[i]] = this[`typeAttribute${i}`];
+            }
         }
-        return {};
+        return attrs;
     }
 
     @api

package/src/lightning/primitiveHeaderFactory/nonsortableHeader.html

@@ -2,17 +2,17 @@
     <div class={computedClass} style={columnStyles}>
 
         <!-- Header Content -->
-        <span class="slds-th__action">
+        <span class="slds-th__action" style={thActionStyles}>
             <template if:true={def.iconName}>
                 <div class="slds-grid slds-grid_vertical-align-center slds-has-flexi-truncate">
                     <lightning-icon icon-name={def.iconName} size="x-small" class="slds-icon_container slds-m-right_xx-small" alternative-text={def.label} title={def.label}></lightning-icon>
                     <template if:false={def.hideLabel} class="slds-grid slds-grid_vertical-align-center slds-has-flexi-truncate">
-                        <span class="slds-truncate">{def.label}</span>
+                        <span class={getHeaderLabelStyle}>{def.label}</span>
                     </template>
                 </div>
             </template>
             <template if:false={def.iconName}>
-                <span class="slds-truncate" if:true={def.label} title={def.label}>{def.label}</span>
+                <span class={getHeaderLabelStyle} if:true={def.label} title={def.label}>{def.label}</span>
                 <span class="slds-truncate" if:false={def.label} title={def.ariaLabel}></span>
             </template>
 

package/src/lightning/primitiveHeaderFactory/primitiveHeaderFactory.js

@@ -35,6 +35,7 @@ export default class PrimitiveHeaderFactory extends PrimitiveDatatableCell {
     _resizable;
     _sortable = false;
     _hideHeader = false;
+    _wrapTableHeader = false;
 
     /************************** PUBLIC ATTRIBUTES ***************************/
 
@@ -88,6 +89,21 @@ export default class PrimitiveHeaderFactory extends PrimitiveDatatableCell {
         this.updateElementClasses();
     }
 
+    /**
+     * Defines whether the table header is wrapped
+     *
+     * @type {boolean}
+     */
+    @api
+    get wrapTableHeader() {
+        return this._wrapTableHeader;
+    }
+
+    set wrapTableHeader(value) {
+        this._wrapTableHeader = value;
+        this.updateElementClasses();
+    }
+
     /**
      * Defines whether the column is resizable
      *
@@ -150,11 +166,25 @@ export default class PrimitiveHeaderFactory extends PrimitiveDatatableCell {
         const widthStyle = this.columnWidth
             ? `width: ${this.columnWidth}px;`
             : '';
+        const heightStyle = this._wrapTableHeader ? 'min-height: 3rem' : '';
 
         return `
             ${widthStyle}
             ${outlineStyle}
             ${offsetStyle}
+            ${heightStyle}
+        `;
+    }
+
+    /**
+     * Get th Action styles
+     *
+     * @return {string} The computed classes
+     */
+    get thActionStyles() {
+        const heightStyle = this._wrapTableHeader ? 'min-height: 3rem' : '';
+        return `
+            ${heightStyle}
         `;
     }
 
@@ -182,6 +212,15 @@ export default class PrimitiveHeaderFactory extends PrimitiveDatatableCell {
             .toString();
     }
 
+    /**
+     * Computes styling for header label
+     */
+    get getHeaderLabelStyle() {
+        return this._wrapTableHeader
+            ? 'slds-line-clamp_small '
+            : 'slds-truncate';
+    }
+
     /**
      * Computes an option name
      *

package/src/lightning/primitiveHeaderFactory/sortableHeader.html

@@ -18,7 +18,7 @@
                 <div class="slds-grid slds-grid_vertical-align-center slds-has-flexi-truncate">
                     <lightning-icon icon-name={def.iconName} size="x-small" class="slds-icon_container slds-m-right_xx-small" alternative-text={def.label} title={def.label}></lightning-icon>
                     <template if:false={def.hideLabel} class="slds-grid slds-grid_vertical-align-center slds-has-flexi-truncate">
-                        <span class="slds-truncate">{def.label}</span>
+                        <span class={getHeaderLabelStyle}>{def.label}</span>
                     </template>
 
                     <!-- Arrow Icon - Rotates based on sorting direction -->
@@ -31,7 +31,7 @@
                 </div>
             </template>
             <template if:false={def.iconName}>
-                <span class="slds-truncate" title={def.label}>{def.label}</span>
+                <span class={getHeaderLabelStyle} title={def.label}>{def.label}</span>
                 <!-- Arrow Icon - Rotates based on sorting direction -->
                     <lightning-primitive-icon
                          class="slds-icon_container"

package/src/lightning/primitiveInputFile/primitiveInputFile.html

@@ -15,6 +15,7 @@
                     class="slds-file-selector__input slds-assistive-text"
                     onblur={handleBlur}
                     onfocus={handleFocus}
+                    onclick={handleFileClick}
                     onchange={handleChange}
                     accept={accept}
                     multiple={multiple}

package/src/lightning/primitiveInputFile/primitiveInputFile.js

@@ -89,6 +89,10 @@ export default class LightningPrimitiveInputFile extends LightningElement {
         this.dispatchEvent(new CustomEvent('focus'));
     }
 
+    handleFileClick() {
+        this.inputElement.value = null;
+    }
+
     handleChange() {
         this._files = this.inputElement.files;
         this.dispatchEvent(new CustomEvent('change'));

package/src/lightning/primitiveInputSimple/primitiveInputSimple.js

@@ -19,7 +19,7 @@ import {
     isValidNumberCharacter,
     stringifyNumber,
     toIsoDecimal,
-} from 'lightning/inputUtils';
+} from 'lightning/numberUtils';
 
 import {
     reflectAttribute,
@@ -50,6 +50,8 @@ const VALID_NUMBER_FORMATTERS = [
 const DEFAULT_FORMATTER = VALID_NUMBER_FORMATTERS[0];
 
 export default class LightningPrimitiveInputSimple extends LightningElement {
+    _type;
+
     @api hasExternalLabel;
     @api computedLabelClass;
     @api required;
@@ -172,26 +174,40 @@ export default class LightningPrimitiveInputSimple extends LightningElement {
 
     set value(value) {
         const previousValue = this._value;
-
         this._value = normalizeInput(value);
 
-        if (this._rendered && this.isTypeNumber) {
-            this._value = stringifyNumber(value);
-            // the extra check for whether the value has changed is done for cases
-            // when the same value is set back in a change handler, this is to avoid
-            // the raw number from changing formatting under the user
-            // (eg. if the user typed 1,000 we want to preserve that formatting as the user
-            // types the value)
-            if (this.validity.badInput || this._value !== previousValue) {
-                this.updateNumberValue(value);
+        if (this._rendered) {
+            const badInput = this.validity.badInput;
+
+            if (this.isTypeNumber) {
+                this._value = stringifyNumber(value);
+                // the extra check for whether the value has changed is done for cases
+                // when the same value is set back in a change handler, this is to avoid
+                // the raw number from changing formatting under the user
+                // (eg. if the user typed 1,000 we want to preserve that formatting as the user
+                // types the value)
+                if (this._value !== previousValue) {
+                    this.updateNumberValue(value);
+                }
+
+                // If updated value is invalid or not null, it should be updated
+                // Invalid numeric values should stay as-is to avoid programatically wiping a user-provided invalid
+                // value, such as '2e' from the input element. See @W-14121203
+                if (!badInput || !!value) {
+                    this.setInputValueIfNeeded();
+                }
+            } else {
+                this.setInputValueIfNeeded();
             }
         }
+    }
 
+    setInputValueIfNeeded() {
         // Again, due to the interop layer we need to check whether the value being set
         // is different, otherwise we're duplicating the sets on the input, which result
         // in different bugs like Japanese IME duplication of characters in Safari (likely a browser bug) or
         // character position re-set in IE11.
-        if (this._rendered && this.inputElement.value !== this.displayedValue) {
+        if (this.inputElement.value !== this.displayedValue) {
             this.setInputValue(this.getDisplayedValue());
         }
     }
@@ -247,6 +263,11 @@ export default class LightningPrimitiveInputSimple extends LightningElement {
         return this._value;
     }
 
+    @api
+    getNumberRawValue() {
+        return this._numberRawValue;
+    }
+
     /********* PRIVATE VARIABLES *********/
     _formatter = DEFAULT_FORMATTER;
     _showRawNumber = false;

package/src/lightning/progressStep/progressStep.js

@@ -1,5 +1,6 @@
 import labelCurrentStage from '@salesforce/label/LightningProgressIndicator.currentStage';
 import labelStageComplete from '@salesforce/label/LightningProgressIndicator.stageComplete';
+import labelNotStartedStage from '@salesforce/label/LightningProgressIndicator.stageNotStarted';
 import { LightningElement, api, track } from 'lwc';
 import { classSet } from 'lightning/utils';
 import { classListMutation } from 'lightning/utilsPrivate';
@@ -13,6 +14,7 @@ import base from './base.html';
 const i18n = {
     currentStage: labelCurrentStage,
     stageComplete: labelStageComplete,
+    notStartedStage: labelNotStartedStage,
 };
 
 // Maps the status of the base progress-step to the icon it should render
@@ -35,6 +37,13 @@ export default class LightningProgressStep extends LightningElement {
 
     @track state = {};
 
+    /**
+     * getter for the i18 constant containing the localized strings
+     */
+    get i18n() {
+        return i18n;
+    }
+
     updateInternal(newStatus, newType, newIndex, newActive, shouldFocus) {
         classListMutation(
             this.classList,
@@ -148,9 +157,11 @@ export default class LightningProgressStep extends LightningElement {
 
     get assistiveText() {
         if (this.state.status === 'completed') {
-            return `${this.label} - ${i18n.stageComplete}`;
+            return `${this.label} - ${this.i18n.stageComplete}`;
         } else if (this.state.status === 'current') {
-            return `${this.label} - ${i18n.currentStage}`;
+            return `${this.label} - ${this.i18n.currentStage}`;
+        } else if (this.state.status === 'incomplete') {
+            return `${this.label} - ${this.i18n.notStartedStage}`;
         }
         return this.state.type === 'path' ? '' : this.label;
     }

package/src/lightning/prompt/__examples__disabled/basic/basic.html

@@ -1,7 +1,7 @@
 <template>
     <div class="example">
         <button
-            aria-haspopup="modal"
+            aria-haspopup="dialog"
             onclick={handlePromptModal}
         >Open the Prompt Modal</button>
     </div>

package/src/lightning/resizeObserver/resizeObserver.js

@@ -1,29 +1,24 @@
-import { timeout, animationFrame } from 'lightning/utilsPrivate';
+const DELAY_TIMEOUT = 16;
 
-const DELAY_TIMEOUT = 200;
 export class LightningResizeObserver {
     constructor(resizeCallback) {
         this._resizeObserverAvailable = typeof ResizeObserver === 'function';
-
-        const delayedCallback = (callback) => {
+        this._delayedResizeCallback = () => {
             if (this._running) {
                 return;
             }
             this._running = true;
-
-            timeout(DELAY_TIMEOUT)
-                // requestAnimationFrame is used to guard against the callback directly reading layout dimensions
-                // which may be mutating at the same time leading to layout thrashing
-                .then(() => animationFrame())
-                .then(() => {
-                    callback();
+            // requestAnimationFrame is used to guard against the callback directly reading layout dimensions
+            // which may be mutating at the same time leading to layout thrashing
+            // eslint-disable-next-line @lwc/lwc/no-async-operation
+            setTimeout(() => {
+                // eslint-disable-next-line @lwc/lwc/no-async-operation
+                requestAnimationFrame(() => {
+                    resizeCallback();
                     this._running = false;
                 });
+            }, DELAY_TIMEOUT);
         };
-        this._delayedResizeCallback = delayedCallback.bind(
-            this,
-            resizeCallback
-        );
         if (this._resizeObserverAvailable) {
             this._resizeObserver = new ResizeObserver(
                 this._delayedResizeCallback

package/src/lightning/slider/slider.js

@@ -5,7 +5,7 @@ import {
     normalizeBoolean,
     normalizeString as normalize,
 } from 'lightning/utilsPrivate';
-import numberUtils from 'lightning/numberUtils';
+import { getDecimalPlaces } from 'lightning/numberUtils';
 import { numberFormat } from 'lightning/internationalizationLibrary';
 import {
     InteractingState,
@@ -283,7 +283,7 @@ export default class LightningSlider extends LightningElement {
         }
 
         // calculate decimal points from the step attribute
-        const decimalPlaces = numberUtils.decimalPlaces(this._step);
+        const decimalPlaces = getDecimalPlaces(this._step);
         const formatConfig = { style: 'decimal' };
 
         if (decimalPlaces > 0) {

package/src/lightning/tabBar/tabBar.js

@@ -53,7 +53,9 @@ export default class LightningTabBar extends LightningElement {
             this._queueSynchronizeA11 = false;
         }
 
-        this.ariaObserver.sync();
+        if (this.isConnected) {
+            this.ariaObserver.sync();
+        }
     }
 
     disconnectedCallback() {

package/src/lightning/timepicker/timepicker.html

@@ -1,9 +1,9 @@
 <template>
     <template if:false={hasExternalLabel}>
+        <template if:true={required}>
+            <abbr class="slds-required" title={i18n.required}>*</abbr>
+        </template>
         <label class={computedLabelClass}>
-            <template if:true={required}>
-                <abbr class="slds-required" title={i18n.required}>*</abbr>
-            </template>
             {label}
         </label>
         <lightning-helptext if:true={fieldLevelHelp} content={fieldLevelHelp} alternative-text={helptextAlternativeText}></lightning-helptext>

package/src/lightning/tooltipLibrary/tooltipLibrary.js

@@ -308,7 +308,9 @@ export class Tooltip {
         tooltip.visible = this._visible;
         tooltip.content = this._value;
 
-        this._ariaObserver.sync();
+        if (this._root && this._root.isConnected) {
+            this._ariaObserver.sync();
+        }
 
         this.startPositioning();
         document.addEventListener('keydown', this.handleEscape);