lightning-base-components 1.21.5-alpha → 1.21.6-alpha

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

@@ -187,7 +187,10 @@
     }
 
 :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 */
+        /* @W-14518344 The following line still exists in SLDS-internal
+           but it was removed here because it was causing the input 
+           component to not display it's bottom border
+        border-bottom: 0; Remove border when using legacy version of slds-form-element */
         padding-inline-start: 0;
     }
 

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

@@ -187,7 +187,10 @@
     }
 
 :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 */
+        /* @W-14518344 The following line still exists in SLDS-internal
+           but it was removed here because it was causing the input 
+           component to not display it's bottom border
+        border-bottom: 0; Remove border when using legacy version of slds-form-element */
         padding-inline-start: 0;
     }
 

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

@@ -187,7 +187,10 @@
     }
 
 :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 */
+        /* @W-14518344 The following line still exists in SLDS-internal
+           but it was removed here because it was causing the input 
+           component to not display it's bottom border
+        border-bottom: 0; Remove border when using legacy version of slds-form-element */
         padding-inline-start: 0;
     }
 

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

@@ -187,7 +187,10 @@
     }
 
 :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 */
+        /* @W-14518344 The following line still exists in SLDS-internal
+           but it was removed here because it was causing the input 
+           component to not display it's bottom border
+        border-bottom: 0; Remove border when using legacy version of slds-form-element */
         padding-inline-start: 0;
     }
 

package/src/lightning/modalBase/modalBase.js

@@ -26,11 +26,11 @@ const SIZE_SMALL = 'small';
 const SIZE_MEDIUM = 'medium';
 const SIZE_LARGE = 'large';
 const SIZE_FULL = 'full';
-const MODAL_BASE = 'lightning-modal-base';
+const MODAL_CONTAINER = 'lightning-overlay-container';
 
 export default class LightningModalBase extends LightningShadowBaseClass {
     // this is visible in DOM, changed from 'lightning-modal-base'
-    static [instanceName] = MODAL_BASE;
+    static [instanceName] = 'lightning-modal-base';
 
     // private tracked state
     initialRender = true;
@@ -73,8 +73,6 @@ export default class LightningModalBase extends LightningShadowBaseClass {
     focusinEventBound = false;
     focusinEventHandler = null;
     lastFocussedElementOnModal = null;
-    previousSavedInertElementsSize = 0;
-    allTabbableElements = null;
 
     // modalFooter, child
     footerRegistered = false;
@@ -461,17 +459,20 @@ export default class LightningModalBase extends LightningShadowBaseClass {
     }
 
     /**
-     * Handler for 'focusin' events responsible for following -
-     * <ul>
-     *     <li>While the focus is on a Modal or stacked Modals, the handler tracks the last focussed element inside a Modal</li>
-     *     <li>If user's focus moves outside a Modal, the handler tries to bring user's focus back to last focussed element</li>
-     * </ul>
+     * Handler for 'focusin' events, responsible for trapping user focus to open Modal
      * @param e - Event
      */
-    handleFocusinEvents() {
+    handleFocusinEvents(e) {
         // eslint-disable-next-line @lwc/lwc/no-async-operation
         requestAnimationFrame(() => {
-            // W-14998924 note: code revert to unblock 250R downstream
+            const isTargetModal =
+                e.target?.closest(MODAL_CONTAINER) ||
+                e.relatedTarget?.closest(MODAL_CONTAINER);
+            if (this.isModalOpen && isTargetModal) {
+                this.lastFocussedElementOnModal = getElementWithFocus();
+            } else {
+                returnFocusToElement(this.lastFocussedElementOnModal);
+            }
         });
     }
 
@@ -1185,24 +1186,6 @@ export default class LightningModalBase extends LightningShadowBaseClass {
         }
     }
 
-    /**
-     * Helper method to determine when modals are being stacked.
-     *
-     * When stacked modals are present on the page,
-     * elements in savedInertElements will have 'ariaHidden' attribute with a boolean true
-     * @returns {boolean}
-     */
-    isStackedModal() {
-        const { savedInertElements } = this;
-        for (let i = 0; i < savedInertElements.length; i++) {
-            const isAriaHidden = savedInertElements[i].ariaHidden;
-            if (isAriaHidden) {
-                return true;
-            }
-        }
-        return false;
-    }
-
     /**
      * == W-12654751 P1 a11y bug ==
      *

package/src/lightning/primitiveBubble/primitiveBubble.js

@@ -9,14 +9,14 @@ const DEFAULT_ALIGN = {
     vertical: 'bottom',
 };
 
+// Set to px units for easier calculation
+const POPOVER_MIN_HEIGHT = 32;
+
 const DEFAULT_INVISIBLE_DIV_STYLES = {
-    height: '1.5rem',
+    height: '1rem',
     position: 'absolute',
     left: '0',
     marginLeft: '0',
-    // add a little bit of offset to move the <div> closer to the target, that way the mouse
-    // doesn't move into the small white space between the target and <div>, which would close the tooltip
-    top: '-1.1rem',
 };
 
 export default class LightningPrimitiveBubble extends LightningShadowBaseClass {
@@ -127,26 +127,41 @@ export default class LightningPrimitiveBubble extends LightningShadowBaseClass {
                 '.slds-popover__body'
             );
             const invisibleDiv = document.createElement('div');
+            const { vertical } = this.align;
 
             let computedStyle = null;
             if (window && popoverBody) {
                 computedStyle = window.getComputedStyle(popoverBody);
                 invisibleDiv.style.width =
                     computedStyle.getPropertyValue('width');
+
+                /*
+                    Position the <div> based on vertical alignment of tooltip.
+                    When vertically aligned to the bottom (nubbin below tooltip), position the <div> to
+                    the max of the popover min-height or the popover offset height. This is necessary so that
+                    it always positions right below the popover, so that changes to line-height or other
+                    distance related properties do not affect the positioning.
+                */
+                if (vertical === 'bottom') {
+                    invisibleDiv.style.top =
+                        Math.max(POPOVER_MIN_HEIGHT, popoverBody.offsetHeight) +
+                        'px';
+                    invisibleDiv.style.height =
+                        DEFAULT_INVISIBLE_DIV_STYLES.height;
+                } else {
+                    /* add a little bit of offset to move the <div> closer to the target, that way the mouse
+                     doesn't move into the small white space between the target and <div>, which would flicker the tooltip
+                    */
+                    invisibleDiv.style.top = '-1.1rem';
+                    invisibleDiv.style.height = '1.125rem';
+                }
             }
 
-            invisibleDiv.style.height = DEFAULT_INVISIBLE_DIV_STYLES.height;
             invisibleDiv.style.position = DEFAULT_INVISIBLE_DIV_STYLES.position;
             invisibleDiv.style.left = DEFAULT_INVISIBLE_DIV_STYLES.left;
             invisibleDiv.style.marginLeft =
                 DEFAULT_INVISIBLE_DIV_STYLES.marginLeft;
 
-            const { vertical } = this.align;
-
-            // position <div> based on vertical alignment
-            invisibleDiv.style.top =
-                vertical === 'top' ? DEFAULT_INVISIBLE_DIV_STYLES.top : '';
-
             popoverBody.appendChild(invisibleDiv);
         }
     }

package/src/lightning/primitiveHeaderFactory/primitiveHeaderFactory.js

@@ -220,7 +220,7 @@ export default class PrimitiveHeaderFactory extends PrimitiveDatatableCell {
             ? 'slds-line-clamp_small '
             : 'slds-truncate';
     }
-    
+
     /**
      * Get th Action styles (needed for wrapping headers)
      *

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

@@ -187,7 +187,10 @@
     }
 
 :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 */
+        /* @W-14518344 The following line still exists in SLDS-internal
+           but it was removed here because it was causing the input 
+           component to not display it's bottom border
+        border-bottom: 0; Remove border when using legacy version of slds-form-element */
         padding-inline-start: 0;
     }
 

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

@@ -187,7 +187,10 @@
     }
 
 :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 */
+        /* @W-14518344 The following line still exists in SLDS-internal
+           but it was removed here because it was causing the input 
+           component to not display it's bottom border
+        border-bottom: 0; Remove border when using legacy version of slds-form-element */
         padding-inline-start: 0;
     }
 

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

@@ -187,7 +187,10 @@
     }
 
 :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 */
+        /* @W-14518344 The following line still exists in SLDS-internal
+           but it was removed here because it was causing the input 
+           component to not display it's bottom border
+        border-bottom: 0; Remove border when using legacy version of slds-form-element */
         padding-inline-start: 0;
     }
 

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

@@ -187,7 +187,10 @@
     }
 
 :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 */
+        /* @W-14518344 The following line still exists in SLDS-internal
+           but it was removed here because it was causing the input 
+           component to not display it's bottom border
+        border-bottom: 0; Remove border when using legacy version of slds-form-element */
         padding-inline-start: 0;
     }
 

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

@@ -187,7 +187,10 @@
     }
 
 :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 */
+        /* @W-14518344 The following line still exists in SLDS-internal
+           but it was removed here because it was causing the input 
+           component to not display it's bottom border
+        border-bottom: 0; Remove border when using legacy version of slds-form-element */
         padding-inline-start: 0;
     }
 

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

@@ -187,7 +187,10 @@
     }
 
 :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 */
+        /* @W-14518344 The following line still exists in SLDS-internal
+           but it was removed here because it was causing the input 
+           component to not display it's bottom border
+        border-bottom: 0; Remove border when using legacy version of slds-form-element */
         padding-inline-start: 0;
     }
 

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

@@ -12,7 +12,7 @@
     display: block;
     width: 100%;
     height: var(--_slds-c-progressbar-height);
-    background: var(--slds-g-color-surface-container-1);
+    background: var(--slds-g-color-neutral-base-80);
     border: 0;
     position: relative;
 }

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

@@ -187,7 +187,10 @@
     }
 
 :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 */
+        /* @W-14518344 The following line still exists in SLDS-internal
+           but it was removed here because it was causing the input 
+           component to not display it's bottom border
+        border-bottom: 0; Remove border when using legacy version of slds-form-element */
         padding-inline-start: 0;
     }
 

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

@@ -187,7 +187,10 @@
     }
 
 :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 */
+        /* @W-14518344 The following line still exists in SLDS-internal
+           but it was removed here because it was causing the input 
+           component to not display it's bottom border
+        border-bottom: 0; Remove border when using legacy version of slds-form-element */
         padding-inline-start: 0;
     }
 

package/src/lightning/textarea/__examples__/various/various.html

@@ -3,7 +3,7 @@
         <h1 class="slds-text-heading_small">Various Textarea Examples</h1>
         <p class="slds-text-body_regular">The following examples show various ways to create a textarea component.</p>
     </div>
-    
+
     <div class="row">
         <h2 class="header">Basic Examples</h2>
         <lightning-textarea name="input1" label="Enter some text" ></lightning-textarea>
@@ -18,4 +18,21 @@
         <lightning-textarea name="input6" required value="initial value" label="Required textarea field with a maximum length of 60 characters" maxlength="60" ></lightning-textarea>
         <lightning-textarea name="input7" required value="" placeholder="compose your tweet" label="Required textarea field with a maximum length of 140 characters" maxlength="140" message-when-too-long="A maximum of 140 characters are allowed in a tweet." message-when-value-missing="An empty tweet cannot be posted." ></lightning-textarea>
     </div>
+
+    <div class="row">
+        <h2 class="header">Textarea with aria-describedby example</h2>
+        <div class="aria-describedby slds-box slds-m-around__large">
+            <h3>Example of textarea aria-describedby with multiple descriptions rendered before textarea in reverse order</h3>
+            <span class="desc-1" id="desc-1">Description One</span>
+            <span class="desc-2" id="desc-2">Description Two</span>
+            <lightning-textarea label="Enter some text" aria-describedby="desc-2 desc-1"></lightning-textarea>
+        </div>
+        <h2 class="header">Textarea with aria-labelledby example</h2>
+        <div class="aria-describedby-later slds-box slds-m-around__large">
+            <h3>Example of textarea aria-labelledby with multiple descriptions rendered after textarea in reverse order</h3>
+            <lightning-textarea label="Enter some text" aria-labelledby="desc-4 desc-3"></lightning-textarea>
+            <span class="desc-3" id="desc-3">Description Three</span>
+            <span class="desc-4" id="desc-4">Description Four</span>
+        </div>
+    </div>
 </template>

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

@@ -187,7 +187,10 @@
     }
 
 :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 */
+        /* @W-14518344 The following line still exists in SLDS-internal
+           but it was removed here because it was causing the input 
+           component to not display it's bottom border
+        border-bottom: 0; Remove border when using legacy version of slds-form-element */
         padding-inline-start: 0;
     }
 

package/src/lightning/textarea/textarea.js

@@ -48,6 +48,7 @@ export default class LightningTextarea extends LightningShadowBaseClass {
     @track _helpMessage;
     @track _fieldLevelHelp;
     _ariaDescribedBy = '';
+    _ariaLabelledBy = '';
     _helpMessageChanged = false;
     ariaObserver = null;
 
@@ -127,6 +128,21 @@ export default class LightningTextarea extends LightningShadowBaseClass {
         this.connectAriaDescribedBy();
     }
 
+    /**
+     * A space-separated list of element IDs that provide labels for the
+     * aria-labelled-by value on parent lighting-textarea.
+     * @type {string}
+     */
+    @api
+    get ariaLabelledBy() {
+        return this._ariaLabelledBy;
+    }
+
+    set ariaLabelledBy(references) {
+        this._ariaLabelledBy = references;
+        this.connectAriaLabelledBy();
+    }
+
     /**
      * The maximum number of characters allowed in the textarea.
      * @type {number}
@@ -441,6 +457,7 @@ export default class LightningTextarea extends LightningShadowBaseClass {
         // instead of actually setting the value on the textarea element.
         if (!this._rendered) {
             this.connectAriaDescribedBy();
+            this.connectAriaLabelledBy();
             this._rendered = true;
             this._setInputValue(this._defaultValue);
 
@@ -526,6 +543,14 @@ export default class LightningTextarea extends LightningShadowBaseClass {
         });
     }
 
+    connectAriaLabelledBy() {
+        this.ariaObserver.connect({
+            targetSelector: 'textarea',
+            attribute: 'aria-labelledby',
+            relatedNodeIds: this.ariaLabelledBy,
+        });
+    }
+
     _setInputValue(value) {
         // 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

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

@@ -187,7 +187,10 @@
     }
 
 :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 */
+        /* @W-14518344 The following line still exists in SLDS-internal
+           but it was removed here because it was causing the input 
+           component to not display it's bottom border
+        border-bottom: 0; Remove border when using legacy version of slds-form-element */
         padding-inline-start: 0;
     }
 

package/src/lightning/verticalNavigationItem/vertical-navigation-item.slds.css

@@ -15,7 +15,7 @@
   border-radius: 0;
   box-shadow: inset 0 0 0 var(--slds-g-color-brand-base-60);
   cursor: pointer;
-  color: var(--slds-g-color-neutral-base-10);
+  color: var(--slds-g-color-neutral-base-40);
 }
 
 :host([data-render-mode="shadow"]) .slds-nav-vertical__action_overflow {

package/src/lightning/verticalNavigationItemBadge/badge.slds.css

@@ -12,7 +12,7 @@
     align-items: center;
     padding: var(--slds-g-spacing-1) var(--slds-g-spacing-2);
     color: var(--slds-c-badge-text-color, var(--slds-g-color-on-surface-3));
-    font-size: var(--slds-c-badge-font-size, var(--slds-g-font-scale-neg-2));
+    font-size: var(--slds-c-badge-font-size, var(--slds-g-font-scale-neg-1));
     font-weight: var(--slds-g-font-weight-7);
     /* stylelint-disable */
     line-height: var(--slds-c-badge-font-lineheight, initial);

package/src/lightning/verticalNavigationItemBadge/vertical-navigation-item.slds.css

@@ -15,7 +15,7 @@
   border-radius: 0;
   box-shadow: inset 0 0 0 var(--slds-g-color-brand-base-60);
   cursor: pointer;
-  color: var(--slds-g-color-neutral-base-10);
+  color: var(--slds-g-color-neutral-base-40);
 }
 
 :host([data-render-mode="shadow"]) .slds-nav-vertical__action_overflow {

package/src/lightning/verticalNavigationItemIcon/vertical-navigation-item.slds.css

@@ -15,7 +15,7 @@
   border-radius: 0;
   box-shadow: inset 0 0 0 var(--slds-g-color-brand-base-60);
   cursor: pointer;
-  color: var(--slds-g-color-neutral-base-10);
+  color: var(--slds-g-color-neutral-base-40);
 }
 
 :host([data-render-mode="shadow"]) .slds-nav-vertical__action_overflow {

package/src/lightning/verticalNavigationOverflow/vertical-navigation-item.slds.css

@@ -15,7 +15,7 @@
   border-radius: 0;
   box-shadow: inset 0 0 0 var(--slds-g-color-brand-base-60);
   cursor: pointer;
-  color: var(--slds-g-color-neutral-base-10);
+  color: var(--slds-g-color-neutral-base-40);
 }
 
 :host([data-render-mode="shadow"]) .slds-nav-vertical__action_overflow {

package/src/lightning/datatable/columns-shared.js

@@ -1,12 +0,0 @@
-/**
- * This file exists in order to get around circular dependencies.
- * For ex. the `columns.js` file has a dependency on `sort.js`,
- * which also has a dependency on `columns.js` for `getColumnName()`.
- *
- * We split out some of the functions that could cause circular dependencies with
- * `column.js` into the `*-shared.js` files. `inlineEditShared.js` is another.
- */
-
-export function getColumnName(column) {
-    return column.columnKey || column.fieldName;
-}