lightning-base-components 1.22.2-alpha → 1.22.3-alpha

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

@@ -246,7 +246,7 @@
         --sds-c-inputtext-text-color: var(--slds-c-inputtext-text-color);
         --sds-c-inputtext-font-size: var(
             --slds-c-inputtext-font-size,
-            var(--slds-g-font-size-base)
+            var(--slds-g-font-scale-neg-2)
         );
         --sds-c-inputtext-text-color-placeholder: var(
             --slds-c-inputtext-text-color-placeholder,
@@ -264,7 +264,7 @@
 
         display: flex;
         flex-wrap: wrap;
-        flex-direction: column;
+        align-items: center;
     }
 /**
    * Input Container
@@ -371,10 +371,6 @@
         --sds-c-inputtext-color-border: var(--slds-g-color-border-disabled-1);
         --sds-c-inputtext-text-color: var(--slds-g-color-on-disabled-2);
     }
-:host([data-render-mode="shadow"][disabled]) [part='input-text'] {
-        --sds-c-inputtext-text-color-placeholder:
-            var(--slds-g-color-on-disabled-2);
-    }
 /**
    * Label
    *
@@ -388,7 +384,10 @@
             --slds-c-inputtext-label-color,
             var(--slds-g-color-on-surface-2)
         );
-        font-size: var(--slds-s-label-font-size, var(--slds-g-font-scale-neg-2));
+        font-size: var(
+            --slds-c-inputtext-label-font-size,
+            var(--slds-g-font-scale-neg-3)
+        );
         margin-block-end: var(--slds-g-sizing-1);
 
         /* We inline flex to control the spacing between elements and not have to rely on whitespace characters */

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

@@ -553,19 +553,19 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   --sds-c-button-color-border-disabled: var(--slds-g-color-border-disabled-1);
 }
 /* slds-icon interaction states */
-:host([data-render-mode="shadow"]) [part~='button-icon']:hover {
+:host([data-render-mode="shadow"]) [part~='button-icon']:not(.slds-is-selected):hover {
   --slds-c-icon-color-foreground: var(
-    --slds-c-buttonicon-color-foreground-hover, 
+    --slds-c-buttonicon-color-foreground-hover,
     var(--slds-g-color-accent-3)
   );
 }
-:host([data-render-mode="shadow"]) [part~='button-icon']:focus {
+:host([data-render-mode="shadow"]) [part~='button-icon']:not(.slds-is-selected):focus {
   --slds-c-icon-color-foreground: var(
     --slds-c-buttonicon-color-foreground-focus,
     var(--slds-g-color-accent-3)
   );
 }
-:host([data-render-mode="shadow"]) [part~='button-icon']:active {
+:host([data-render-mode="shadow"]) [part~='button-icon']:not(.slds-is-selected):active {
   --slds-c-icon-color-foreground: var(
     --slds-c-buttonicon-color-foreground-active,
     var(--slds-g-color-accent-3)
@@ -643,7 +643,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 
   /* Icon */
   --slds-c-buttonicon-color-foreground: var(--slds-g-color-neutral-base-100);
-  --slds-c-buttonicon-color-foreground-hover: color-mix(in oklab, var(--slds-g-color-on-surface-inverse-1), transparent 25%);
+  --slds-c-buttonicon-color-foreground-hover: var(--slds-g-color-neutral-base-95);
   --slds-c-buttonicon-color-foreground-focus: var(--slds-g-color-neutral-base-95);
   --slds-c-buttonicon-color-foreground-active: var(--slds-g-color-neutral-base-90);
 

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

@@ -46,7 +46,7 @@
         hyphens: auto;
         display: inline-block;
         color: var(--slds-g-color-on-surface-2);
-        font-size: var(--slds-s-label-font-size, var(--slds-g-font-scale-neg-2));
+        font-size: var(--slds-g-font-scale-neg-3);
         padding-inline-end: var(--slds-g-spacing-2);
         padding-block-start: var(--slds-g-spacing-1);
         margin-block-end: calc(var(--slds-g-spacing-1) / 2);

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

@@ -46,7 +46,7 @@
         hyphens: auto;
         display: inline-block;
         color: var(--slds-g-color-on-surface-2);
-        font-size: var(--slds-s-label-font-size, var(--slds-g-font-scale-neg-2));
+        font-size: var(--slds-g-font-scale-neg-3);
         padding-inline-end: var(--slds-g-spacing-2);
         padding-block-start: var(--slds-g-spacing-1);
         margin-block-end: calc(var(--slds-g-spacing-1) / 2);

package/src/lightning/input/input.html

@@ -233,7 +233,6 @@
             name={name}
             accesskey={accesskey}
             aria-label={ariaLabel}
-            aria-details={ariaDetails}
             aria-disabled={ariaDisabled}
             variant={variant}
             time-style={timeStyle}

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

@@ -46,7 +46,7 @@
         hyphens: auto;
         display: inline-block;
         color: var(--slds-g-color-on-surface-2);
-        font-size: var(--slds-s-label-font-size, var(--slds-g-font-scale-neg-2));
+        font-size: var(--slds-g-font-scale-neg-3);
         padding-inline-end: var(--slds-g-spacing-2);
         padding-block-start: var(--slds-g-spacing-1);
         margin-block-end: calc(var(--slds-g-spacing-1) / 2);

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

@@ -246,7 +246,7 @@
         --sds-c-inputtext-text-color: var(--slds-c-inputtext-text-color);
         --sds-c-inputtext-font-size: var(
             --slds-c-inputtext-font-size,
-            var(--slds-g-font-size-base)
+            var(--slds-g-font-scale-neg-2)
         );
         --sds-c-inputtext-text-color-placeholder: var(
             --slds-c-inputtext-text-color-placeholder,
@@ -264,7 +264,7 @@
 
         display: flex;
         flex-wrap: wrap;
-        flex-direction: column;
+        align-items: center;
     }
 /**
    * Input Container
@@ -371,10 +371,6 @@
         --sds-c-inputtext-color-border: var(--slds-g-color-border-disabled-1);
         --sds-c-inputtext-text-color: var(--slds-g-color-on-disabled-2);
     }
-:host([data-render-mode="shadow"][disabled]) [part='input-text'] {
-        --sds-c-inputtext-text-color-placeholder:
-            var(--slds-g-color-on-disabled-2);
-    }
 /**
    * Label
    *
@@ -388,7 +384,10 @@
             --slds-c-inputtext-label-color,
             var(--slds-g-color-on-surface-2)
         );
-        font-size: var(--slds-s-label-font-size, var(--slds-g-font-scale-neg-2));
+        font-size: var(
+            --slds-c-inputtext-label-font-size,
+            var(--slds-g-font-scale-neg-3)
+        );
         margin-block-end: var(--slds-g-sizing-1);
 
         /* We inline flex to control the spacing between elements and not have to rely on whitespace characters */

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

@@ -46,7 +46,7 @@
         hyphens: auto;
         display: inline-block;
         color: var(--slds-g-color-on-surface-2);
-        font-size: var(--slds-s-label-font-size, var(--slds-g-font-scale-neg-2));
+        font-size: var(--slds-g-font-scale-neg-3);
         padding-inline-end: var(--slds-g-spacing-2);
         padding-block-start: var(--slds-g-spacing-1);
         margin-block-end: calc(var(--slds-g-spacing-1) / 2);

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

@@ -246,7 +246,7 @@
         --sds-c-inputtext-text-color: var(--slds-c-inputtext-text-color);
         --sds-c-inputtext-font-size: var(
             --slds-c-inputtext-font-size,
-            var(--slds-g-font-size-base)
+            var(--slds-g-font-scale-neg-2)
         );
         --sds-c-inputtext-text-color-placeholder: var(
             --slds-c-inputtext-text-color-placeholder,
@@ -264,7 +264,7 @@
 
         display: flex;
         flex-wrap: wrap;
-        flex-direction: column;
+        align-items: center;
     }
 /**
    * Input Container
@@ -371,10 +371,6 @@
         --sds-c-inputtext-color-border: var(--slds-g-color-border-disabled-1);
         --sds-c-inputtext-text-color: var(--slds-g-color-on-disabled-2);
     }
-:host([data-render-mode="shadow"][disabled]) [part='input-text'] {
-        --sds-c-inputtext-text-color-placeholder:
-            var(--slds-g-color-on-disabled-2);
-    }
 /**
    * Label
    *
@@ -388,7 +384,10 @@
             --slds-c-inputtext-label-color,
             var(--slds-g-color-on-surface-2)
         );
-        font-size: var(--slds-s-label-font-size, var(--slds-g-font-scale-neg-2));
+        font-size: var(
+            --slds-c-inputtext-label-font-size,
+            var(--slds-g-font-scale-neg-3)
+        );
         margin-block-end: var(--slds-g-sizing-1);
 
         /* We inline flex to control the spacing between elements and not have to rely on whitespace characters */

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

@@ -46,7 +46,7 @@
         hyphens: auto;
         display: inline-block;
         color: var(--slds-g-color-on-surface-2);
-        font-size: var(--slds-s-label-font-size, var(--slds-g-font-scale-neg-2));
+        font-size: var(--slds-g-font-scale-neg-3);
         padding-inline-end: var(--slds-g-spacing-2);
         padding-block-start: var(--slds-g-spacing-1);
         margin-block-end: calc(var(--slds-g-spacing-1) / 2);

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

@@ -246,7 +246,7 @@
         --sds-c-inputtext-text-color: var(--slds-c-inputtext-text-color);
         --sds-c-inputtext-font-size: var(
             --slds-c-inputtext-font-size,
-            var(--slds-g-font-size-base)
+            var(--slds-g-font-scale-neg-2)
         );
         --sds-c-inputtext-text-color-placeholder: var(
             --slds-c-inputtext-text-color-placeholder,
@@ -264,7 +264,7 @@
 
         display: flex;
         flex-wrap: wrap;
-        flex-direction: column;
+        align-items: center;
     }
 /**
    * Input Container
@@ -371,10 +371,6 @@
         --sds-c-inputtext-color-border: var(--slds-g-color-border-disabled-1);
         --sds-c-inputtext-text-color: var(--slds-g-color-on-disabled-2);
     }
-:host([data-render-mode="shadow"][disabled]) [part='input-text'] {
-        --sds-c-inputtext-text-color-placeholder:
-            var(--slds-g-color-on-disabled-2);
-    }
 /**
    * Label
    *
@@ -388,7 +384,10 @@
             --slds-c-inputtext-label-color,
             var(--slds-g-color-on-surface-2)
         );
-        font-size: var(--slds-s-label-font-size, var(--slds-g-font-scale-neg-2));
+        font-size: var(
+            --slds-c-inputtext-label-font-size,
+            var(--slds-g-font-scale-neg-3)
+        );
         margin-block-end: var(--slds-g-sizing-1);
 
         /* We inline flex to control the spacing between elements and not have to rely on whitespace characters */

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

@@ -46,7 +46,7 @@
         hyphens: auto;
         display: inline-block;
         color: var(--slds-g-color-on-surface-2);
-        font-size: var(--slds-s-label-font-size, var(--slds-g-font-scale-neg-2));
+        font-size: var(--slds-g-font-scale-neg-3);
         padding-inline-end: var(--slds-g-spacing-2);
         padding-block-start: var(--slds-g-spacing-1);
         margin-block-end: calc(var(--slds-g-spacing-1) / 2);

package/src/lightning/modal/__docs__/modal.md

@@ -411,6 +411,8 @@ Let's see this workflow in action. In this example, we'll create a button (`ligh
 
 Because `lightning-navigation` requires you to pass in a `recordId` to construct a page reference, we need to pass the record's data out of `LightningModal`, and then use the methods provided by `lightning-navigation`. With modal's limitations for event bubbling to the Aura layer, we can't just wrap the button or treegrid with `lightning-navigation`. We need to pull that data up to the topmost LWC component, where the `LightningModal` `.open()` is called, for our Aura wrapper to handle the navigation.
 
+However, in [Aura-based Experience Builder sites](https://developer.salesforce.com/docs/atlas.en-us.communities_dev.meta/communities_dev/communities_dev_basics_templates.htm), the `NavigationMixin` event can reach the Aura layer without being affected by the modal's limitations.
+
 So, we `import` the `lightning-navigation` component into the topmost LWC component that sits within the Aura layer by passing the data through `LightningModal`'s close method, `this.close({ data })`. Then the parent LWC component invokes the methods provided by `lightning-navigation`, which handles the navigation away from the page after the modal exits. From a UX perspective, this also lets us close the modal first, since `lightning-navigation` takes the user away from the current page.
 
 Note that this sample code isn't fully functional. We're only showing the relevant code that makes the `lightning-navigation` use case work with `LightningModal`.

package/src/lightning/modalBase/modalBase.html

@@ -18,6 +18,8 @@
             onprivatemodalfooterregister={handleFooterRegister}
             onprivateclose={handlePrivateClose}
             onprivatedisableclosebutton={handlePrivateDisableCloseButton}
+            onfocusin={handleModalBaseFocusin}
+            onprivatelightningmodallastfocus={handleLastFocusedElem}
             data-modal
         >
             <template if:true={showAriaDescribedBy}>

package/src/lightning/modalBase/modalBase.js

@@ -19,7 +19,7 @@ import {
 import closeButtonAltText from '@salesforce/label/LightningModalBase.cancelandclose';
 import disableCloseBtnMessage from '@salesforce/label/LightningModalBase.waitstate';
 import AriaObserver from 'lightning/ariaObserver';
-import { isLwcModalActive } from 'lightning/overlayManager';
+import { modalFocusinEventHandler } from 'lightning/modalUtils';
 
 const DEBOUNCE_RESIZE = 300;
 const SMALL_SCREEN_SIZE = 480;
@@ -27,7 +27,6 @@ const SIZE_SMALL = 'small';
 const SIZE_MEDIUM = 'medium';
 const SIZE_LARGE = 'large';
 const SIZE_FULL = 'full';
-const MODAL_CONTAINER = 'lightning-overlay-container';
 
 export default class LightningModalBase extends LightningShadowBaseClass {
     // this is visible in DOM, changed from 'lightning-modal-base'
@@ -69,10 +68,9 @@ export default class LightningModalBase extends LightningShadowBaseClass {
     portraitMatchMedia = null;
     screenOrientationChangeHandler = null;
 
-    // state utilized when performing keyboard Tab/Shift-Tab interactions
+    // state utilized when performing keyboard focus trap
     focusinEventBound = false;
-    focusinEventHandler = null;
-    lastFocussedElementOnModal = null;
+    lastFocusedElement = null;
 
     // modalFooter, child
     footerRegistered = false;
@@ -468,27 +466,6 @@ export default class LightningModalBase extends LightningShadowBaseClass {
         }
     }
 
-    /**
-     * Handler for 'focusin' events, responsible for trapping user focus to open Modal
-     * @param e - Event
-     */
-    handleFocusinEvents(e) {
-        // eslint-disable-next-line @lwc/lwc/no-async-operation
-        requestAnimationFrame(() => {
-            // is current active (open) modal is lwc
-            if (isLwcModalActive() && this.isModalOpen) {
-                const isTargetRelatedToModal =
-                    e.target?.closest(MODAL_CONTAINER) ||
-                    e.relatedTarget?.closest(MODAL_CONTAINER);
-                if (isTargetRelatedToModal) {
-                    this.lastFocussedElementOnModal = getElementWithFocus();
-                } else {
-                    returnFocusToElement(this.lastFocussedElementOnModal);
-                }
-            }
-        });
-    }
-
     /**
      * Opening the modal involves first performing necessary steps to
      * prepare for when the modal closes
@@ -794,7 +771,11 @@ export default class LightningModalBase extends LightningShadowBaseClass {
             : fallbackFocusElem;
 
         if (focusElem !== null) {
-            focusElem.focus();
+            this.lastFocusedElement = focusElem;
+            // eslint-disable-next-line @lwc/lwc/no-async-operation
+            requestAnimationFrame(() => {
+                focusElem.focus();
+            });
             this.autoFocusCompletedOnce = true;
         } else {
             // Should never happen since outerModalElem always present
@@ -1178,8 +1159,10 @@ export default class LightningModalBase extends LightningShadowBaseClass {
     addFocusinEventListener() {
         if (!this.focusinEventBound) {
             this.focusinEventBound = true;
-            this.focusinEventHandler = this.handleFocusinEvents.bind(this);
-            window.addEventListener('focusin', this.focusinEventHandler);
+            window.addEventListener(
+                'focusin',
+                modalFocusinEventHandler.bind(this)
+            );
         }
     }
 
@@ -1192,11 +1175,27 @@ export default class LightningModalBase extends LightningShadowBaseClass {
     removeFocusinEventListener() {
         if (this.focusinEventBound) {
             this.focusinEventBound = false;
-            window.removeEventListener('focusin', this.focusinEventHandler);
-            this.focusinEventHandler = null;
+            window.removeEventListener(
+                'focusin',
+                modalFocusinEventHandler.bind(this)
+            );
         }
     }
 
+    handleModalBaseFocusin = modalFocusinEventHandler.bind(this);
+
+    handleLastFocusedElem(e) {
+        if (!(e.detail && e.detail[secure])) {
+            console.error(
+                'Invalid access to onprivatelightningmodallastfocus event'
+            );
+            return;
+        }
+        e.stopPropagation();
+
+        this.lastFocusedElement = e.detail.privatelightningmodallastfocus;
+    }
+
     /**
      * determine if the current screen is less than SMALL_SCREEN_SIZE
      * for Modal, screen size detection is simplified to what's required

package/src/lightning/modalBody/modalBody.html

@@ -5,6 +5,7 @@
         part="modal-body"
         data-content-container
         onprivatescrollablecontainer={handleScrollableContainerRepositionEvent}
+        onfocusin={handleModalBodyFocusin}
     >
         <slot
             data-default-slot

package/src/lightning/modalBody/modalBody.js

@@ -2,6 +2,7 @@ import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 import { classSet } from 'lightning/utils';
 import { getRealDOMId } from 'lightning/utilsPrivate';
 import { findAllTabbableElements, filterTooltips } from 'lightning/focusUtils';
+import { modalFocusinEventHandler } from 'lightning/modalUtils';
 
 /**
  * The modal body component to display main content area in lightning modal.
@@ -294,6 +295,8 @@ export default class LightningModalBody extends LightningShadowBaseClass {
         this.dispatchEvent(evtRegister);
     }
 
+    handleModalBodyFocusin = modalFocusinEventHandler.bind(this);
+
     /**
      * When modal body is being created, initialize
      * private tracked modal body state

package/src/lightning/modalFooter/modalFooter.html

@@ -1,5 +1,9 @@
 <template>
-    <div class={footerCssClasses} part="modal-footer">
+    <div
+        class={footerCssClasses}
+        part="modal-footer"
+        onfocusin={handleModalFooterFocusin}
+    >
         <slot
             data-footer-slot
             onslotchange={handleDefaultSlotChange}

package/src/lightning/modalFooter/modalFooter.js

@@ -1,5 +1,6 @@
 import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 import { classSet } from 'lightning/utils';
+import { modalFocusinEventHandler } from 'lightning/modalUtils';
 
 // SLDS Modal Footer classes
 const footerClass = 'slds-modal__footer';
@@ -104,6 +105,8 @@ export default class LightningModalFooter extends LightningShadowBaseClass {
         this.dispatchEvent(evtRegister);
     }
 
+    handleModalFooterFocusin = modalFocusinEventHandler.bind(this);
+
     /**
      * When modal footer is being created, initialize
      * private tracked modal footer state

package/src/lightning/modalHeader/modalHeader.html

@@ -1,5 +1,8 @@
 <template>
-    <div class="slds-modal__header" part="modal-header">
+    <div class="slds-modal__header"
+         part="modal-header"
+         onfocusin={handleModalHeaderFocusin}
+    >
         <template if:true={label}>
             <h1
                 id="modal-label"

package/src/lightning/modalHeader/modalHeader.js

@@ -1,6 +1,7 @@
 import { api } from 'lwc';
 import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 import { getRealDOMId } from 'lightning/utilsPrivate';
+import { modalFocusinEventHandler } from 'lightning/modalUtils';
 
 // selectors
 const modalHeaderSelector = '.slds-modal__header';
@@ -152,6 +153,8 @@ export default class LightningModalHeader extends LightningShadowBaseClass {
         this.dispatchEvent(evtRegister);
     }
 
+    handleModalHeaderFocusin = modalFocusinEventHandler.bind(this);
+
     /**
      * When modal header is being created, initialize
      * private tracked modal header state

package/src/lightning/overlayManager/overlayManager.js

@@ -436,7 +436,7 @@ function initAuraOverlayState() {
 
 /**
  * Helper function to detect if a lightning-modal is currently open
- * Used in modalBase.js to trap a user's focus while lightning-modal is open
+ * Used in modalUtil.js to trap a user's focus while lightning-modal is open
  * @returns {boolean}
  */
 export function isLwcModalActive() {

package/src/lightning/positionLibrary/elementProxy.js

@@ -1,4 +1,4 @@
-import { isInDom, WindowManager, pxToInt } from './util';
+import { isInDom, WindowManager, pxToFloat, getTransformValues } from './util';
 
 export class ElementProxy {
     constructor(el, id) {
@@ -137,18 +137,21 @@ export class ElementProxy {
 
         const originalLeft = style.left.match(/auto|fixed/)
             ? '0'
-            : parseInt(style.left.replace('px', ''), 10);
+            : pxToFloat(style.left);
         const originalTop = style.top.match(/auto|fixed/)
             ? '0'
-            : parseInt(style.top.replace('px', ''), 10);
+            : pxToFloat(style.top);
 
         const marginOffset =
             this.top < absPos.top
-                ? pxToInt(style.marginBottom)
-                : pxToInt(style.marginTop) * -1;
+                ? pxToFloat(style.marginBottom) * -1
+                : pxToFloat(style.marginTop);
+
+        const transform = getTransformValues(style.transform);
+        const topOffset = transform.y;
 
         let leftDif = Math.round(this.left - (absPos.left + scrollLeft));
-        const topDif = this.top - (absPos.top + marginOffset + scrollTop);
+        const topDif = this.top - (absPos.top + scrollTop) + topOffset;
 
         const viewPortWidth = w.innerWidth || document.body.clientWidth;
         let rightPos = parseInt(style.right, 10);
@@ -164,6 +167,10 @@ export class ElementProxy {
 
         this._node.style.left = `${originalLeft + leftDif}px`;
         this._node.style.top = `${originalTop + topDif}px`;
+        // translate3d enables CSS Hardware Acceleration and switches to GPU
+        this._node.style.transform = `translate3d(0, ${
+            topOffset ? topOffset : marginOffset
+        }px, 0)`;
 
         if (this._restoreSize) {
             // Only store the first height/width which is the original height/width.

package/src/lightning/positionLibrary/util.js

@@ -244,6 +244,24 @@ function isPx(value) {
     return value.slice(-2) === 'px';
 }
 
-export function pxToInt(value) {
-    return value && isPx(value) ? parseInt(value, 10) : 0;
+export function pxToFloat(value) {
+    return value && isPx(value) ? parseFloat(value) : 0;
+}
+
+export function getTransformValues(value = '') {
+    // DOMMatrix is used to get scalar values for css transform string
+    // https://developer.mozilla.org/en-US/docs/Web/API/DOMMatrixReadOnly
+    const matrix = new DOMMatrixReadOnly(value);
+    if (matrix.is2D) {
+        return {
+            x: matrix.e, // translateX
+            y: matrix.f, // translateY
+            z: 0,
+        };
+    }
+    return {
+        x: matrix.m41, // translateX
+        y: matrix.m42, // translateY
+        z: matrix.m43, // translateZ
+    };
 }

package/src/lightning/primitiveCellActions/primitiveCellActions.html

@@ -1,5 +1,6 @@
 <template>
     <lightning-button-menu
+        lwc:ref="buttonMenu"
         icon-size="x-small"
         alternative-text={buttonAlternateText}
         menu-alignment={computedMenuAlignment}

package/src/lightning/primitiveCellActions/primitiveCellActions.js

@@ -68,7 +68,7 @@ export default class PrimitiveCellActions extends LightningElement {
     @api
     focus() {
         if (this._connected) {
-            this.template.querySelector('lightning-button-menu').focus();
+            this.refs.buttonMenu.focus();
         }
     }
 
@@ -81,7 +81,7 @@ export default class PrimitiveCellActions extends LightningElement {
             // focus/click without changing tabindex doesnt work W-6185168
             // eslint-disable-next-line @lwc/lwc/no-async-operation
             setTimeout(() => {
-                this.template.querySelector('lightning-button-menu').click();
+                this.refs.buttonMenu.click();
             }, 0);
         }
     }
@@ -141,9 +141,7 @@ export default class PrimitiveCellActions extends LightningElement {
      * Handles the opening of an action menu
      */
     handleMenuOpen() {
-        this.elementRect = this.template
-            .querySelector('lightning-button-menu')
-            .getBoundingClientRect();
+        this.elementRect = this.refs.buttonMenu.getBoundingClientRect();
 
         const detail = {
             rowKeyValue: this.rowKeyValue,

package/src/lightning/primitiveCellButton/primitiveCellButton.html

@@ -1,6 +1,7 @@
 <template>
     <template if:true={isButtonIconType}>
         <lightning-button-icon
+            lwc:ref="buttonIcon"
             variant={variant}
             alternative-text={alternativeText}
             icon-name={iconName}
@@ -14,6 +15,7 @@
     </template>
     <template if:false={isButtonIconType}>
         <lightning-button
+            lwc:ref="button"
             variant={variant}
             label={label}
             icon-name={iconName}

package/src/lightning/primitiveCellButton/primitiveCellButton.js

@@ -61,11 +61,9 @@ export default class PrivateCellButton extends LightningElement {
 
     get buttonCustomElement() {
         if (this._connected) {
-            const qs = this.isButtonIconType
-                ? 'lightning-button-icon'
-                : 'lightning-button';
-
-            return this.template.querySelector(qs);
+            return this.isButtonIconType
+                ? this.refs.buttonIcon
+                : this.refs.button;
         }
         return undefined;
     }

package/src/lightning/primitiveCellCheckbox/checkbox.html

@@ -4,7 +4,8 @@
         onclick={handleCheckboxContainerClick}
         onmousedown={handleCheckboxContainerMouseDown}
     >
-        <input type="checkbox"
+        <input lwc:ref="input"
+               type="checkbox"
                name={computedOptionName}
                id="primitive-cell-checkbox-id"
                tabindex={internalTabIndex}
@@ -13,7 +14,7 @@
                onclick={handleCheckboxClick}
                disabled={isDisabled}
                checked={isSelected}>
-        <label
+        <label lwc:ref="label"
             id={labelId}
             class="slds-checkbox__label"
             for="primitive-cell-checkbox-id"