lightning-base-components 1.18.8-ssr → 1.19.2-alpha

package/src/lightning/modalFooter/modalFooter.js

@@ -1,4 +1,4 @@
-import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
+import { LightningElement } from 'lwc';
 import { classSet } from 'lightning/utils';
 import { findAllTabbableElements, filterTooltips } from 'lightning/focusUtils';
 
@@ -8,26 +8,16 @@ const hideClass = 'slds-hide';
 // selectors
 const footerSelector = `.${footerClass}`;
 const footerSlotSelector = '[data-footer-slot]';
-// timeout footer height check
-// checking quickly yields faster resolution of correct
-// footer (not a typo) placement
-const SIZE_CHECK_TIMER = 50;
-// limited to 4 quick checks totalling 200 ms, which catches
-// any misreported heights based on reflow of content in modalFooter
-const MAX_HEIGHT_CHECKS = 4;
 
 /**
  * The modal footer component to display footer content in lightning modal.
  * */
-export default class LightningModalFooter extends LightningShadowBaseClass {
+export default class LightningModalFooter extends LightningElement {
     // tracked private state
     initialRender = true;
     initialSlotRender = true;
     hideFooter = false;
     unregisterCallback = null;
-    footerHeightTracked = 0;
-    footerHeightChecked = 0;
-    timeoutId = 0;
 
     /**
      * Handle the default slot change event
@@ -67,9 +57,7 @@ export default class LightningModalFooter extends LightningShadowBaseClass {
         const divElem = this.template.querySelector(footerSelector);
         const footerRect = divElem ? divElem.getBoundingClientRect() : {};
         const { height } = footerRect;
-        const heightValue = height || 0;
-        this.footerHeightTracked = heightValue;
-        return heightValue;
+        return height || 0;
     }
 
     /**
@@ -113,32 +101,6 @@ export default class LightningModalFooter extends LightningShadowBaseClass {
         return firstElem;
     }
 
-    /**
-     * if not the intial render, check for footer height chnage,
-     * when a window resize occurs
-     * @returns {Object}
-     * @private
-     */
-    handleModalFooterResizeCheck() {
-        // when not intial render, and footer height changed
-        // return the tracked value, otherwise indicate no change
-        return !this.initialRender && this.hasFooterHeightChanged()
-            ? { changed: true, value: this.footerHeightTracked }
-            : { changed: false, value: null };
-    }
-
-    /**
-     * if not the intial render, update state passed from modalBase
-     * @param {Object} values passed from modalBase to modalFooter
-     * @private
-     */
-    handleUpdateFooterCallback(values) {
-        if (!this.initialRender) {
-            const { size } = values;
-            this.setAttribute('data-size', size);
-        }
-    }
-
     /**
      * Register modalFooter with modal parent, including callbacks to
      * unregister the modal footer
@@ -155,10 +117,6 @@ export default class LightningModalFooter extends LightningShadowBaseClass {
                 defaultSlotIsPopulated: this.isDefaultSlotPopulated,
                 defaultSlotHasRendered: !this.initialSlotRender,
                 firstTabbableElemRef: this.firstTabbableElement,
-                checkFooterHeightCallback:
-                    this.handleModalFooterResizeCheck.bind(this),
-                updateFooterCallback:
-                    this.handleUpdateFooterCallback.bind(this),
                 unRegisterCallback: (unregisterCallback) => {
                     this.unregisterCallback = unregisterCallback;
                 },
@@ -167,46 +125,6 @@ export default class LightningModalFooter extends LightningShadowBaseClass {
         this.dispatchEvent(evtRegister);
     }
 
-    /**
-     * Provide a means to check whether the tracked footer height
-     * is different than the current footer height to only call modalBase
-     * when there is a change in footer height
-     * @private
-     */
-    hasFooterHeightChanged() {
-        // note: calling this.footerHeight updates this.footerHeightTracked
-        // order of values checked here is required
-        const previousRenderedHeight = this.footerHeightTracked;
-        const currentRenderedHeight = this.footerHeight;
-        return currentRenderedHeight !== previousRenderedHeight;
-    }
-
-    /**
-     * On first render, provide a quick means of updating modalBase,
-     * if the modalFooter height changes.
-     * In rare cases, the height of the footer between the
-     * normal or full size rendering can change depending on
-     * content of footer and window width
-     * @private
-     */
-    scheduleFooterHeightCheck() {
-        if (this.initialRender && this.timeoutId === 0) {
-            // eslint-disable-next-line @lwc/lwc/no-async-operation
-            this.timeoutId = setInterval(() => {
-                if (this.footerHeightChecked >= MAX_HEIGHT_CHECKS) {
-                    clearTimeout(this.timeoutId);
-                    this.timeoutId = 0;
-                    this.footerHeightChecked = 0;
-                } else {
-                    this.footerHeightChecked++;
-                    if (this.hasFooterHeightChanged()) {
-                        this.registerWithParent();
-                    }
-                }
-            }, SIZE_CHECK_TIMER);
-        }
-    }
-
     /**
      * When modal footer is being created, initialize
      * private tracked modal footer state
@@ -219,13 +137,9 @@ export default class LightningModalFooter extends LightningShadowBaseClass {
         this.initialSlotRender = true;
         this.hideFooter = false;
         this.unregisterCallback = null;
-        this.footerHeightTracked = 0;
-        this.footerHeightChecked = 0;
-        this.timeoutId = 0;
     }
 
     connectedCallback() {
-        super.connectedCallback();
         // handle case where modalFooter is added/removed/added to DOM
         // so registerWithParent gets called
         this.initState();
@@ -235,15 +149,11 @@ export default class LightningModalFooter extends LightningShadowBaseClass {
         if (this.unregisterCallback) {
             this.unregisterCallback();
         }
-        clearTimeout(this.timeoutId);
-        this.timeoutId = 0;
-        this.footerHeightChecked = 0;
     }
 
     renderedCallback() {
         if (this.initialRender) {
             this.registerWithParent();
-            this.scheduleFooterHeightCheck();
             this.initialRender = false;
         }
         this.hideFooter = !this.isDefaultSlotPopulated;

package/src/lightning/modalHeader/__docs__/modalHeader.md

@@ -13,7 +13,7 @@ tags, which are the only HTML elements permitted. If the header text is too long
 
 This sample code shows the expected order of the modal components. The modal content is
 created in a separate component extended from `LightningModal`. See
-[Lightning Web Components Developer Guide](docs/component-library/documentation/en/lwc/)
+[Lightning Web Components Developer Guide](https://developer.salesforce.com/docs/platform/lwc/guide/)
 
 ```html
 <!-- my/modalDialog.html -->
@@ -51,7 +51,7 @@ For example, specify the background color on the button using the `sds-c-modal-h
 
 See the modal blueprint's [Styling Hooks Overview](https://www.lightningdesignsystem.com/components/modals/#Styling-Hooks-Overview) for a list of CSS custom properties.
 
-For more information, see [Style Components Using Lightning Design System Styling Hooks](docs/component-library/documentation/lwc/lwc.create_components_css_custom_properties) in the Lightning Web Components Developer Guide.
+For more information, see [Style Components Using Lightning Design System Styling Hooks](https://developer.salesforce.com/docs/platform/lwc/guide/create-components-css-custom-properties) in the Lightning Web Components Developer Guide.
 
 #### Accessibility
 
@@ -61,4 +61,4 @@ If you don't use `lightning-modal-header`, the accessible label is provided usin
 When the modal opens, focus goes to the first interactive element in the modal. If the header includes a link in tagline text, the link
 gets initial focus.
 
-See [Lightning Web Components Developer Guide](docs/component-library/documentation/en/lwc/) for more information about accessibility in modals.
+See [Lightning Web Components Developer Guide](https://developer.salesforce.com/docs/platform/lwc/guide/) for more information about accessibility in modals.

package/src/lightning/modalHeader/modalHeader.html

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

package/src/lightning/modalHeader/modalHeader.js

@@ -1,5 +1,4 @@
-import { api } from 'lwc';
-import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
+import { api, LightningElement } from 'lwc';
 import { getRealDOMId } from 'lightning/utilsPrivate';
 import { findAllTabbableElements, filterTooltips } from 'lightning/focusUtils';
 
@@ -8,24 +7,15 @@ const modalHeaderSelector = '.slds-modal__header';
 const labelSelector = '[data-label]';
 const slotWrapperSelector = '[data-slot-wrapper]';
 const defaultSlotSelector = '[data-default-slot]';
-// timeout header height check
-// checking quickly yields faster resolution of footer placement
-const SIZE_CHECK_TIMER = 50;
-// limited to 4 quick checks totalling 200 ms, which catches
-// any misreported heights based on reflow of content
-const MAX_HEIGHT_CHECKS = 4;
 
 /**
  * Creates a header to display the heading and tagline at the top of a modal.
  * */
-export default class LightningModalHeader extends LightningShadowBaseClass {
+export default class LightningModalHeader extends LightningElement {
     // tracked private state
     initialRender = true;
     initialSlotRender = true;
     unregisterCallback = null;
-    headerHeightTracked = 0;
-    headerHeightChecked = 0;
-    timeoutId = 0;
 
     /**
      * Text to display as the heading at the top of the modal
@@ -55,7 +45,6 @@ export default class LightningModalHeader extends LightningShadowBaseClass {
         const headerRect = divElem ? divElem.getBoundingClientRect() : {};
         const { height } = headerRect;
         const heightValue = height || 0;
-        this.headerHeightTracked = heightValue;
         return heightValue;
     }
 
@@ -156,30 +145,6 @@ export default class LightningModalHeader extends LightningShadowBaseClass {
         return (this.label && this.label.trim().length > 0) || false;
     }
 
-    /**
-     * if not the intial render, check for header height chnage,
-     * when a window resize occurs
-     * @returns {Object}
-     * @private
-     */
-    handleModalHeaderResizeCheck() {
-        return !this.initialRender && this.hasHeaderHeightChanged()
-            ? { changed: true, value: this.headerHeightTracked }
-            : { changed: false, value: null };
-    }
-
-    /**
-     * if not the intial render, update state passed from modalBase
-     * @param {Object} values passed from modalBase to modalHeader
-     * @private
-     */
-    handleUpdateHeaderCallback(values) {
-        if (!this.initialRender) {
-            const { size } = values;
-            this.setAttribute('data-size', size);
-        }
-    }
-
     /**
      * Register modalHeader with modal parent, including callbacks to
      * unregister the modal header
@@ -198,10 +163,6 @@ export default class LightningModalHeader extends LightningShadowBaseClass {
                 defaultSlotWrapperId: this.defaultSlotWrapperId,
                 defaultSlotIsPopulated: this.isDefaultSlotPopulated,
                 defaultSlotHasRendered: !this.initialSlotRender,
-                checkHeaderHeightCallback:
-                    this.handleModalHeaderResizeCheck.bind(this),
-                updateHeaderCallback:
-                    this.handleUpdateHeaderCallback.bind(this),
                 unRegisterCallback: (unregisterCallback) => {
                     this.unregisterCallback = unregisterCallback;
                 },
@@ -212,46 +173,6 @@ export default class LightningModalHeader extends LightningShadowBaseClass {
         this.dispatchEvent(evtRegister);
     }
 
-    /**
-     * Provide a means to check whether the tracked header height
-     * is different than the current header height to only call modalBase
-     * when there is a change in header height
-     * @private
-     */
-    hasHeaderHeightChanged() {
-        // note: calling this.headerHeight updates this.headerHeightTracked
-        // order of values checked here is required
-        const previousRenderedHeight = this.headerHeightTracked;
-        const currentRenderedHeight = this.headerHeight;
-        return currentRenderedHeight !== previousRenderedHeight;
-    }
-
-    /**
-     * On first render, provide a quick means of updating modalBase,
-     * if the modalHeader height changes.
-     * In rare cases, the height of the header between the
-     * normal or full size rendering can change depending on
-     * content within the header and the window width
-     * @private
-     */
-    scheduleHeaderHeightCheck() {
-        if (this.initialRender && this.timeoutId === 0) {
-            // eslint-disable-next-line @lwc/lwc/no-async-operation
-            this.timeoutId = setInterval(() => {
-                if (this.headerHeightChecked >= MAX_HEIGHT_CHECKS) {
-                    clearTimeout(this.timeoutId);
-                    this.timeoutId = 0;
-                    this.headerHeightChecked = 0;
-                } else {
-                    this.headerHeightChecked++;
-                    if (this.hasHeaderHeightChanged()) {
-                        this.registerWithParent();
-                    }
-                }
-            }, SIZE_CHECK_TIMER);
-        }
-    }
-
     /**
      * When modal header is being created, initialize
      * private tracked modal header state
@@ -263,20 +184,15 @@ export default class LightningModalHeader extends LightningShadowBaseClass {
         this.initialRender = true;
         this.initialSlotRender = true;
         this.unregisterCallback = null;
-        this.headerHeightTracked = 0;
-        this.headerHeightChecked = 0;
-        this.timeoutId = 0;
     }
 
     connectedCallback() {
-        super.connectedCallback();
         this.initState();
     }
 
     renderedCallback() {
         if (this.initialRender) {
             this.registerWithParent();
-            this.scheduleHeaderHeightCheck();
             this.initialRender = false;
         }
     }

package/src/lightning/navigation/__docs__/navigation.md

@@ -12,7 +12,7 @@ import { CurrentPageReference } from 'lightning/navigation';
 pageRef;
 ```
 
-The key-value pairs of the PageReference `state` property are serialized to URL query parameters. To create a deep link that describes the page and that a user can bookmark, update the `state` property. See [Change Page State](docs/component-library/documentation/lwc/lwc.use_navigate#events_navigate__page_state).
+The key-value pairs of the PageReference `state` property are serialized to URL query parameters. To create a deep link that describes the page and that a user can bookmark, update the `state` property. See [Add Query Parameters](https://developer.salesforce.com/docs/platform/lwc/guide/use-navigate-add-params-url).
 
 #### NavigationMixin
 
@@ -73,6 +73,6 @@ For a recipe that uses `lightning/navigation`, see the `c-nav-to-*` components i
 
 #### See Also
 
-[Navigate to Pages](docs/component-library/documentation/lwc/lwc.use_navigate)
+[Navigate to Pages](https://developer.salesforce.com/docs/platform/lwc/guide/use-navigate)
 
-[PageReference Types](docs/component-library/documentation/lwc/lwc.reference_page_reference_type)
+[PageReference Types](https://developer.salesforce.com/docs/platform/lwc/guide/reference-page-reference-type)

package/src/lightning/overlay/overlay.js

@@ -1,5 +1,4 @@
-import { createElement, api } from 'lwc';
-import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
+import { LightningElement, createElement, api } from 'lwc';
 import { instanceName } from 'lightning/overlayUtils';
 import OverlayContainer from 'lightning/overlayContainer';
 
@@ -19,7 +18,7 @@ function container() {
 /**
  * Extend this component for open/close apis.
  */
-export default class LightningOverlay extends LightningShadowBaseClass {
+export default class LightningOverlay extends LightningElement {
     /**
      * Easier to debug when dynamically created.
      */

package/src/lightning/overlayContainer/overlayContainer.js

@@ -1,6 +1,5 @@
-import { api, createElement } from 'lwc';
-import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
-import { parent, instanceName } from 'lightning/overlayUtils';
+import { LightningElement, api, createElement } from 'lwc';
+import { parent, instanceName, normalizeApis } from 'lightning/overlayUtils';
 import { guid } from 'lightning/utilsPrivate';
 import {
     addOverlayToSharedState,
@@ -17,7 +16,7 @@ import {
     LWC_OVERLAY_ENGINE,
 } from 'lightning/overlayManager';
 
-export default class LightningOverlayContainer extends LightningShadowBaseClass {
+export default class LightningOverlayContainer extends LightningElement {
     // overlayContainer has this.stack, which holds the details, and actual
     // DOM elements of local (this file) LWC overlays only, while
     // overlayManager has this.state.stack, which only tracks details of
@@ -51,8 +50,9 @@ export default class LightningOverlayContainer extends LightningShadowBaseClass
             return Promise.reject();
         }
         const element = createElement(overlayInstanceName, { is: scope });
+        const normalizedApis = normalizeApis(apis);
 
-        Object.entries(apis).forEach(([key, value]) => {
+        Object.entries(normalizedApis).forEach(([key, value]) => {
             const keyLower = key.toLowerCase();
             const match = keyLower.match(/^on(.+)/);
             if (match) {
@@ -189,7 +189,6 @@ export default class LightningOverlayContainer extends LightningShadowBaseClass
     }
 
     connectedCallback() {
-        super.connectedCallback();
         // Notified anytime an overlay is added/removed
         // LWC overlays start on z-index 9000; always even z-index (9000, 9002)
         // Aura overlays start on z-index 9001; always on odd z-index (9001, 9003)

package/src/lightning/overlayUtils/overlayUtils.js

@@ -29,3 +29,62 @@ export const properties = Symbol('properties');
  * This will be used verifying if required attributes have value assigned.
  */
 export const requiredProperties = Symbol('requiredProperties');
+
+/**
+ * Only allow CSS Variables
+ * @param {string|Object} style Style string or object
+ * @returns {string} sanitized style string
+ */
+export function normalizeStyle(style) {
+    const props = {};
+    if (typeof style === 'string') {
+        const regex = /([\w-]*)\s*:\s*([^;]*)/g;
+        let match;
+        while ((match = regex.exec(style))) {
+            if (match[1].startsWith('--')) {
+                props[match[1]] = match[2].trim();
+            } else {
+                // eslint-disable-next-line no-console
+                console.warn(
+                    `Overlay 'style' only supports CSS Variables (invalid '${match[1]}' set)`
+                );
+            }
+        }
+    } else if (style && typeof style === 'object') {
+        Object.keys(style).forEach((property) => {
+            if (
+                property.startsWith('--') &&
+                typeof style[property] === 'string'
+            ) {
+                props[property] = style[property];
+            } else {
+                // eslint-disable-next-line no-console
+                console.warn(
+                    `Overlay 'style' only supports CSS Variables (invalid '${property}' set)`
+                );
+            }
+        });
+    }
+    return Object.keys(props)
+        .map((property) => {
+            return `${property}:${props[property]}`;
+        })
+        .join(';');
+}
+
+/**
+ * Normalize the overlay apis.
+ * @param {Object} apis Apis passed to overlay
+ * @returns {Object} Normalized object of apis
+ */
+export function normalizeApis(apis) {
+    if (apis && typeof apis === 'object') {
+        const normalizedApis = { ...apis };
+        // Normalize Style
+        if (apis.style) {
+            normalizedApis.style = normalizeStyle(apis.style);
+        }
+        return normalizedApis;
+    }
+    return {};
+}

package/src/lightning/pill/__docs__/pill.md

@@ -171,7 +171,7 @@ Additionally, the remove button contains customizable elements similar to `light
 
 See [Styling Hooks Overview](https://www.lightningdesignsystem.com/components/pills/#Styling-Hooks-Overview) for a list of CSS custom properties.
 
-For more information, see [Style Components Using Lightning Design System Styling Hooks](docs/component-library/documentation/lwc/lwc.create_components_css_custom_properties) in the Lightning Web Components Developer Guide.
+For more information, see [Style Components Using Lightning Design System Styling Hooks](https://developer.salesforce.com/docs/platform/lwc/guide/create-components-css-custom-properties) in the Lightning Web Components Developer Guide.
 
 To understand how we implemented SLDS in `lightning-pill`, see the **Source Code** section.
 
@@ -184,7 +184,7 @@ To create more than one pill, use the `lightning-pill-container` component, whic
 Specifying a target to change where the link should open is not supported. The link opens on the same tab or window. To create a URL that navigates to another page in Salesforce, use
 [`lightning-navigation`](bundle/lightning-navigation/documentation).
 
-This component has usage differences from its Aura counterpart. See [Base Components: Aura Vs Lightning Web Components](docs/component-library/documentation/lwc/lwc.migrate_map_aura_lwc_components) in the Lightning Web Components Developer Guide.
+This component has usage differences from its Aura counterpart. See [Base Components: Aura Vs Lightning Web Components](https://developer.salesforce.com/docs/platform/lwc/guide/migrate-map-aura-lwc-components) in the Lightning Web Components Developer Guide.
 
 #### Accessibility
 

package/src/lightning/pill/avatar.slds.css

@@ -8,39 +8,39 @@
  */
 
 @supports (--styling-hooks: '') {
-  :host([data-render-mode="shadow"][size~='xxx-small']) {
+  :host([data-render-mode="shadow"][size='xxx-small']) {
     --slds-c-icon-sizing: var(--sds-g-sizing-3, 0.5rem);
   }
 
-  :host([data-render-mode="shadow"][size~='xx-small']) {
+  :host([data-render-mode="shadow"][size='xx-small']) {
     --slds-c-icon-sizing: calc(var(--sds-g-sizing-1, 0.125rem) + var(--sds-g-sizing-4, 0.75rem));
   }
 
-  :host([data-render-mode="shadow"][size~='x-small']) {
+  :host([data-render-mode="shadow"][size='x-small']) {
     --slds-c-icon-sizing: var(--sds-g-sizing-5, 1rem);
   }
 
-  :host([data-render-mode="shadow"][size~='small']) {
+  :host([data-render-mode="shadow"][size='small']) {
     --slds-c-icon-sizing: var(--sds-g-sizing-7, 1.5rem);
   }
 
-  :host([data-render-mode="shadow"][size~='large']) {
+  :host([data-render-mode="shadow"][size='large']) {
     --slds-c-icon-sizing: var(--sds-g-sizing-10, 3rem);
   }
 
-  :host([data-render-mode="shadow"][variant~='warning']) {
+  :host([data-render-mode="shadow"][variant='warning']) {
     --slds-c-icon-color-foreground: var(--sds-g-color-warning-base-70, #fe9339);
   }
 
-  :host([data-render-mode="shadow"][variant~='success']) {
+  :host([data-render-mode="shadow"][variant='success']) {
     --slds-c-icon-color-foreground: var(--sds-g-color-success-base-50, #2e844a);
   }
 
-  :host([data-render-mode="shadow"][variant~='error']) {
+  :host([data-render-mode="shadow"][variant='error']) {
     --slds-c-icon-color-foreground: var(--sds-g-color-error-base-50, #ea001e);
   }
 
-  :host([data-render-mode="shadow"][variant~='light']) {
+  :host([data-render-mode="shadow"][variant='light']) {
     --slds-c-icon-color-foreground: var(--sds-g-color-neutral-base-70, #aeaeae);
   }
 
@@ -50,15 +50,15 @@
     --sds-c-icon-sizing-border: var(--slds-c-icon-sizing-border);
     --sds-c-icon-color-border: var(--slds-c-icon-color-border);
     --sds-c-icon-spacing-block-start: var(
-      --slds-c-icon-spacing-block-start,
+      --slds-c-icon-spacing-blockstart,
       var(--slds-c-icon-spacing-block)
     );
-    --sds-c-icon-spacing-block-end: var(--slds-c-icon-spacing-block-end, var(--slds-c-icon-spacing-block));
+    --sds-c-icon-spacing-block-end: var(--slds-c-icon-spacing-blockend, var(--slds-c-icon-spacing-block));
     --sds-c-icon-spacing-inline-start: var(
-      --slds-c-icon-spacing-inline-start,
+      --slds-c-icon-spacing-inlinestart,
       var(--slds-c-icon-spacing-inline)
     );
-    --sds-c-icon-spacing-inline-end: var(--slds-c-icon-spacing-inline-end, var(--slds-c-icon-spacing-inline));
+    --sds-c-icon-spacing-inline-end: var(--slds-c-icon-spacing-inlineend, var(--slds-c-icon-spacing-inline));
 
     /**
      * There's a divergence in LBC that we have to support here: LBC splits their
@@ -154,7 +154,7 @@
  */
 
 :host([data-render-mode="shadow"]) .slds-icon_disabled {
-  background-color: currentColor;
+  background-color: currentcolor;
 }
 
 :host([data-render-mode="shadow"]) .slds-input__icon {
@@ -172,6 +172,11 @@
   Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 
 @supports (--styling-hooks: '') {
+  /* re-assign icon color hook for avatar */
+  :host([data-render-mode="shadow"]) {
+    --sds-c-icon-color-background: var(--slds-c-avatar-color-background);
+  }
+
   :host([data-render-mode="shadow"]) .slds-assistive-text {
     position: absolute !important;
     margin: -1px !important;
@@ -242,19 +247,13 @@
   :host([data-render-mode="shadow"]) .slds-avatar__initials {
     display: flex;
     justify-content: center;
-    -ms-flex-line-pack: center;
     align-content: center;
     align-items: center;
     margin: auto;
     color: var(--slds-c-avatar-text-color);
     height: 100%;
-    text-shadow: 0 0 1px rgba(0, 0, 0, 0.8);
-    /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
-    background-color: var(
-      --slds-c-avatar-color-background,
-      var(--sds-c-icon-color-background, var(--sds-g-color-brand-base-50, #0176d3))
-    );
-    /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
+    text-shadow: 0 0 1px rgba(0, 0, 0, 80%);
+    background-color: var(--slds-c-avatar-color-background, var(--sds-g-color-brand-base-50, #0176d3));
   }
 
   :host([data-render-mode="shadow"]) .slds-avatar__initials[title] {

package/src/lightning/pill/link.css

@@ -1,3 +1,3 @@
-@import 'lightning/sldsCommon';
+/* @import 'lightning/sldsCommon';
 @import './pill.slds.css';
-@import './avatar.slds.css';
+@import './avatar.slds.css'; */

package/src/lightning/pill/pill.js

@@ -4,8 +4,7 @@ import labelPillRemove from '@salesforce/label/LightningPill.remove';
 import labelPillWarning from '@salesforce/label/LightningPill.warning';
 import labelPillDeleteAndNavigate from '@salesforce/label/LightningPill.deleteAndNavigate';
 import formFactor from '@salesforce/client/formFactor';
-import { api, track } from 'lwc';
-import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
+import { LightningElement, api, track } from 'lwc';
 import {
     keyCodes,
     classListMutation,
@@ -49,7 +48,7 @@ function modifyAttribute(el, name, value) {
  * A pill displays a label that can contain links and can be removed from view.
  * @slot default Placeholder for an image, such as an icon or avatar.
  */
-export default class LightningPill extends LightningShadowBaseClass {
+export default class LightningPill extends LightningElement {
     /**
      * The URL of the page that the link goes to.
      * @type {string}
@@ -274,7 +273,6 @@ export default class LightningPill extends LightningShadowBaseClass {
     }
 
     connectedCallback() {
-        super.connectedCallback();
         this._connected = true;
         if (this.isPlainLink || this.isLink) {
             this.updateLinkInfo(this.href);