lightning-base-components 1.18.1-alpha → 1.18.3-alpha

package/src/lightning/modal/__modalUtils__/modalContainerTestMockData.js

@@ -0,0 +1,131 @@
+/* Contains mock data for modal testing */
+
+const formData = [
+    {
+        name: 'assignedTo',
+        value: 'Jonathan Marks',
+        type: 'text',
+        numTabsToNext: 1,
+    },
+    {
+        name: 'teamName',
+        value: 'Chrome Webdrivers',
+        type: 'text',
+        numTabsToNext: 1,
+    },
+    {
+        name: 'statusValue',
+        value: 'New',
+        result: 'new',
+        type: 'combobox',
+        numTabsToNext: 1,
+    },
+    {
+        name: 'personalSettings',
+        value: 'Updated',
+        type: 'text',
+        numTabsToNext: 1,
+    },
+    {
+        name: 'slaSerialNum',
+        value: '8675997511',
+        type: 'text',
+        numTabsToNext: 1,
+    },
+    {
+        name: 'slaExpireDate',
+        value: 'Sep 8, 2021',
+        result: '2021-09-08',
+        type: 'datepicker',
+        numTabsToNext: 2,
+    },
+    {
+        name: 'slaExpireTime',
+        value: 8,
+        result: '02:00:00.000',
+        type: 'timepicker',
+        numTabsToNext: 1,
+    },
+    {
+        name: 'location',
+        value: 'Downtown Offices',
+        type: 'text',
+        numTabsToNext: 1,
+    },
+    {
+        name: 'selectedLangs',
+        value: 'English, Spanish, Chinese',
+        type: 'text',
+        numTabsToNext: 2,
+    },
+
+    {
+        name: 'addressBilling.country',
+        value: 3,
+        result: 'SP',
+        type: 'combobox',
+        numTabsToNext: 1,
+    },
+    {
+        name: 'addressBilling.street',
+        value: '32184 Excellent Street',
+        type: 'text',
+        numTabsToNext: 1,
+    },
+    {
+        name: 'addressBilling.city',
+        value: 'Lowertown',
+        type: 'text',
+        numTabsToNext: 1,
+    },
+    {
+        name: 'addressBilling.province',
+        value: 4,
+        result: 'GO',
+        type: 'combobox',
+        numTabsToNext: 1,
+    },
+    {
+        name: 'addressBilling.postalCode',
+        value: '8K2J3P1',
+        type: 'text',
+        numTabsToNext: 2,
+    },
+
+    {
+        name: 'addressShipping.country',
+        value: 2,
+        result: 'CN',
+        type: 'combobox',
+        numTabsToNext: 1,
+    },
+    {
+        name: 'addressShipping.street',
+        value: '32342 Postland Avenue',
+        type: 'text',
+        numTabsToNext: 1,
+    },
+    {
+        name: 'addressShipping.city',
+        value: 'Uppertown',
+        type: 'text',
+        numTabsToNext: 1,
+    },
+    {
+        name: 'addressShipping.province',
+        value: 2,
+        result: 'GX',
+        type: 'combobox',
+        numTabsToNext: 1,
+    },
+    {
+        name: 'addressShipping.postalCode',
+        value: '8782399-219',
+        type: 'text',
+        numTabsToNext: 0,
+    },
+];
+
+module.exports = {
+    formData,
+};

package/src/lightning/modal/modal.js

@@ -16,7 +16,7 @@ export default class LightningModal extends LightningOverlay {
 
     // public api
     /**
-     * How much of the viewport width the modal uses. Supported values are small, medium, or large.
+     * How much of the viewport width the modal uses. Supported values are small, medium, large, or full.
      * @type {string}
      * @default medium
      */

package/src/lightning/modalBody/__docs__/modalBody.md

@@ -1,10 +1,10 @@
 The `lightning-modal-body` component renders the content of a modal.
 
-The modal components render in the order they appear in the template. Place the `lightning-modal-body` 
-component after `lightning-modal-header` and before `lightning-modal-footer` components, if you're providing them. 
+The modal components render in the order they appear in the template. Place the `lightning-modal-body`
+component after `lightning-modal-header` and before `lightning-modal-footer` components, if you're providing them.
 
 This sample code shows the expected order of the modal components. The modal content is
-created in a separate component extended from `LightningModal`. See 
+created in a separate component extended from `LightningModal`. See
 [Lightning Web Components Developer Guide](docs/component-library/documentation/en/lwc/)
 
 ```html
@@ -24,8 +24,8 @@ created in a separate component extended from `LightningModal`. See
 </template>
 ```
 
-You can nest content in `lightning-modal-body` or 
-`lightning-modal-body` automatically scrolls the modal's content when necessary. 
+You can nest content in `lightning-modal-body` or
+`lightning-modal-body` automatically scrolls the modal's content when necessary.
 The modal's maximum height is calculated to prevent the content from exceeding the screen height,
 and scroll bars are automatically added.
 #### Component Styling
@@ -36,18 +36,18 @@ To apply custom styling, use the `:host` selector or define a custom class using
 
 ```html
 <lightning-modal-body class="my-modal-body">
-   
+
 </lightning-modal-body>
 ```
 
-Use SLDS styling hooks to customize the component's styles. The `--sds-c-modal-content-*` hooks 
-enable you to customize the background color and text color of the modal body. 
+Use SLDS styling hooks to customize the component's styles. The `--slds-c-modal-content-*` hooks
+enable you to customize the background color and text color of the modal body.
 
 For example, specify the background color on the modal using the `sds-c-modal-content-color-background` custom property.
 
 ```css
 .my-modal-body {
-    --sds-c-modal-content-color-background: LightBlue;
+    --slds-c-modal-content-color-background: LightBlue;
 }
 ```
 

package/src/lightning/modalFooter/__docs__/modalFooter.md

@@ -1,14 +1,14 @@
-The `lightning-modal-footer` component creates a footer at the bottom of a modal dialog. 
+The `lightning-modal-footer` component creates a footer at the bottom of a modal dialog.
 Use of a footer is optional.
 
 The modal components render in the order they appear in the template.
 Place the `lightning-modal-footer` component after the `lightning-modal-body` component.
 
 This sample code shows the expected order of the modal components. The modal content is
-created in a separate component extended from `LightningModal`. See 
+created in a separate component extended from `LightningModal`. See
 [Lightning Web Components Developer Guide](docs/component-library/documentation/en/lwc/)
 
-This sample's `lightning-modal-footer` includes two `lightning-button` components, 
+This sample's `lightning-modal-footer` includes two `lightning-button` components,
 but you can also use `<button>` elements.
 
 ```html
@@ -25,7 +25,7 @@ but you can also use `<button>` elements.
             variant="neutral"
             label="Cancel"
             onclick={handleDismiss}
-        ></lightning-button>                
+        ></lightning-button>
         <lightning-button
             class="slds-button slds-m-left_x-small"
             variant="brand"
@@ -42,18 +42,18 @@ To apply custom styling, use the `:host` selector or define a custom class using
 
 ```html
 <lightning-modal-footer class="my-modal-footer">
-   
+
 </lightning-modal-footer>
 ```
 
-Use SLDS styling hooks to customize the component's styles. Several `--sds-c-modal-footer-*` hooks 
-enable you to customize the footer spacing, background color, and text color. 
+Use SLDS styling hooks to customize the component's styles. Several `--slds-c-modal-footer-*` hooks
+enable you to customize the footer spacing, background color, and text color.
 
 For example, specify the background color on the footer using the `sds-c-modal-footer-color-background` custom property.
 
 ```css
 .my-modal-footer {
-    --sds-c-modal-footer-color-background: LightGray;
+    --slds-c-modal-footer-color-background: LightGray;
 }
 ```
 
@@ -66,7 +66,7 @@ For more information, see [Style Components Using Lightning Design System Stylin
 If you add buttons to the footer, you can use the accessibility attributes described in [`lightning-button`](bundle/lightning-button/documentation).
 
 When the modal opens, focus goes to the first interactive element in the modal. If there are no links in the header or any interactive elements
-in the modal body, the first footer button gets initial focus. 
+in the modal body, the first footer button gets initial focus.
 
 See [Lightning Web Components Developer Guide](docs/component-library/documentation/en/lwc/) for more information about accessibility in modals.
 

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

@@ -1,18 +1,18 @@
 The `lightning-modal-header` component displays header text in a panel at the top of a modal dialog.
-Use of a header is optional, but when you provide a header you must specify the header text with the `label` attribute. 
+Use of a header is optional, but when you provide a header you must specify the header text with the `label` attribute.
 
 If you don't use the `lightning-modal-header` component, you must set a label
 in the modal you create by extending `LightningModal`. A label is required for accessibility.
 
-The modal components render in the order they appear in the template. Place the `lightning-modal-header` 
+The modal components render in the order they appear in the template. Place the `lightning-modal-header`
 component before the `lightning-modal-body` component in the template.
 
 `lightning-modal-header` supports optional tagline text, which displays in smaller text below the heading. Enclose the
 tagline text directly in the `lightning-modal-header` component, no HTML tag or attribute is needed. You can include links with `<a>`
-tags, which are the only HTML elements permitted. If the header text is too long to fit on one line, it wraps in the modal header. 
+tags, which are the only HTML elements permitted. If the header text is too long to fit on one line, it wraps in the modal header.
 
 This sample code shows the expected order of the modal components. The modal content is
-created in a separate component extended from `LightningModal`. See 
+created in a separate component extended from `LightningModal`. See
 [Lightning Web Components Developer Guide](docs/component-library/documentation/en/lwc/)
 
 ```html
@@ -34,18 +34,18 @@ To apply custom styling, use the `:host` selector or define a custom class using
 
 ```html
 <lightning-modal-header label="My Modal" class="my-modal-header">
-   
+
 </lightning-modal-header>
 ```
 
-Use SLDS styling hooks to customize the component's styles. Several `--sds-c-modal-header-*` and `--sds-c-modal-heading-*` hooks 
-enable you to customize the header. 
+Use SLDS styling hooks to customize the component's styles. Several `--slds-c-modal-header-*` and `--slds-c-modal-heading-*` hooks
+enable you to customize the header.
 
 For example, specify the background color on the button using the `sds-c-modal-header-color-background` custom property.
 
 ```css
 .my-modal-header {
-    --sds-c-modal-header-color-background: LightGray;
+    --slds-c-modal-header-color-background: LightGray;
 }
 ```
 
@@ -59,6 +59,6 @@ When you use `lightning-modal-header` in your modal, the rendered modal provides
 If you don't use `lightning-modal-header`, the accessible label is provided using `aria-label` set to the label you provide in the modal.
 
 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. 
+gets initial focus.
 
 See [Lightning Web Components Developer Guide](docs/component-library/documentation/en/lwc/) for more information about accessibility in modals.

package/src/lightning/overlayContainer/overlayContainer.js

@@ -1,4 +1,5 @@
-import { LightningElement, api, createElement } from 'lwc';
+import { api, createElement } from 'lwc';
+import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 import { parent, instanceName } from 'lightning/overlayUtils';
 import { guid } from 'lightning/utilsPrivate';
 import {
@@ -16,7 +17,7 @@ import {
     LWC_OVERLAY_ENGINE,
 } from 'lightning/overlayManager';
 
-export default class LightningOverlayContainer extends LightningElement {
+export default class LightningOverlayContainer extends LightningShadowBaseClass {
     // 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
@@ -188,6 +189,7 @@ export default class LightningOverlayContainer extends LightningElement {
     }
 
     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/pill/__docs__/pill.md

@@ -159,15 +159,15 @@ To apply custom styling, define a custom class using the `class` attribute.
 <lightning-pill label="Astro" class="my-pill"></lightning-pill>
 ```
 
-Use SLDS styling hooks to customize the component's styles. For example, specify the background color on the pill using the `--sds-c-pill-color-background` custom property.
+Use SLDS styling hooks to customize the component's styles. For example, specify the background color on the pill using the `--slds-c-pill-color-background` custom property.
 
 ```css
 .my-pill {
-    --sds-c-pill-color-background: orange;
+    --slds-c-pill-color-background: orange;
 }
 ```
 
-Additionally, the remove button contains customizable elements similar to `lightning-button-icon`. You can customize the styles on the remove button using the `--sds-c-button-*` custom properties. See the [lightning-button-icon documentation](bundle/lightning-button-icon/documentation).
+Additionally, the remove button contains customizable elements similar to `lightning-button-icon`. You can customize the styles on the remove button using the `--slds-c-button-*` custom properties. See the [lightning-button-icon documentation](bundle/lightning-button-icon/documentation).
 
 See [Styling Hooks Overview](https://www.lightningdesignsystem.com/components/pills/#Styling-Hooks-Overview) for a list of CSS custom properties.
 

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

@@ -0,0 +1,272 @@
+/**
+ * @Note: Static fallbacks are in place until SLDS adopts SDS. Without static
+ *        fallbacks, styles will regress due to invalid CSS variables from
+ *        missing SLDS shared and globals.
+ *
+ *        Additionally, LBC are currently relying on 'part' attributes to
+ *        receive styling. Authoring styles that rely on slots is not recommended.
+ */
+
+@supports (--styling-hooks: '') {
+  :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']) {
+    --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']) {
+    --slds-c-icon-sizing: var(--sds-g-sizing-5, 1rem);
+  }
+
+  :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']) {
+    --slds-c-icon-sizing: var(--sds-g-sizing-10, 3rem);
+  }
+
+  :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']) {
+    --slds-c-icon-color-foreground: var(--sds-g-color-success-base-50, #2e844a);
+  }
+
+  :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']) {
+    --slds-c-icon-color-foreground: var(--sds-g-color-neutral-base-70, #aeaeae);
+  }
+
+  :host([data-render-mode="shadow"]) [part~='boundary'] {
+    /* --sds-c-icon-color-background: var(--slds-c-icon-color-background); */
+    --sds-c-icon-radius-border: var(--slds-c-icon-radius-border, var(--sds-g-radius-border-2, 0.25rem));
+    --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,
+      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-inline-start: var(
+      --slds-c-icon-spacing-inline-start,
+      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));
+
+    /**
+     * There's a divergence in LBC that we have to support here: LBC splits their
+     * icon implementation into two components: lightning-icon and lightning-primitive-icon.
+     * slds-icon is consumed within both with no issues except that the presence of an
+     * additional custom element (primitive-icon) creates an unexpected inline-level
+     * element and breaks our formatting context. tl;dr, we have to reset the formatting
+     * context of the boundary or else we'll inherit line-height from an ancestor and
+     * get visual regressions.
+     *
+     * If lightning-icon is refactored into a single component, this line can be removed.
+     */
+    display: inline-flex;
+  }
+
+  :host([data-render-mode="shadow"]) [part~='icon'] {
+    --sds-c-icon-color-foreground: var(--slds-c-icon-color-foreground, var(--sds-g-color-neutral-base-100, #ffffff));
+    --sds-c-icon-sizing-height: var(--slds-c-icon-sizing-height, var(--slds-c-icon-sizing, var(--sds-g-sizing-9, 2rem)));
+    --sds-c-icon-sizing-width: var(--slds-c-icon-sizing-width, var(--slds-c-icon-sizing, var(--sds-g-sizing-9, 2rem)));
+  }
+
+  :host([data-render-mode="shadow"][icon-name*='action']) {
+    --slds-c-icon-spacing-block: var(--sds-g-sizing-3, 0.5rem);
+    --slds-c-icon-spacing-inline: var(--sds-g-sizing-3, 0.5rem);
+    --slds-c-icon-radius-border: calc(var(--sds-g-radius-border-circle, 100%) / 2);
+  }
+}
+
+/**
+ * P R I V A T E
+ *
+ * The following styling is implemented by classes within the shadow DOM.
+ * They're expected to be private to the component and not for external use.
+ *
+ * See notes for each class for the rationale behind their inclusion.
+ */
+
+/**
+ * Utility icons traditionally added a class to change the default foreground
+ * color (white) to a grey. This was done implicitly whereas other color changes
+ * were done explicitly through the 'variant' attribute. So this is an outlier
+ * to the overall pattern. Leaving it as-is since an update would require an
+ * API change or more investigating.
+ *
+ * This is a hybrid patch between synthetic and native shadow. The ideal final
+ * outcome is the removal of this class and the default utility styling would
+ * be implemented through an attribute or some other class-less solution.
+ */
+
+:host([data-render-mode="shadow"]) .slds-icon-text-default {
+  /*! @css-var-fallback fill */
+  --slds-c-icon-color-foreground: var(
+    --slds-c-icon-color-foreground-default,
+    var(--sds-c-icon-color-foreground-default, var(
+      --sds-g-color-neutral-base-50, #747474))
+  );
+}
+
+:host([data-render-mode="shadow"]) .slds-icon-text-default.slds-is-disabled {
+  fill: var(--sds-g-color-neutral-base-80, #c9c9c9);
+}
+
+/**
+ * A temporarily baked-in utility class until SLDS gets a proper utility package.
+ *
+ * This is a hybrid patch between synthetic and native shadow. The ideal final
+ * outcome is the removal of this class and replacing the class with the SLDS
+ * utility package solution.
+ */
+
+:host([data-render-mode="shadow"]) .slds-assistive-text {
+  position: absolute !important;
+  margin: -1px !important;
+  border: 0 !important;
+  padding: 0 !important;
+  width: 1px !important;
+  height: 1px !important;
+  overflow: hidden !important;
+  clip: rect(0 0 0 0) !important;
+  text-transform: none !important;
+  white-space: nowrap !important;
+}
+
+/**
+ * For the initial alpha version, we're hardcoding in the various unique icon styles.
+ *
+ * Next version, we want to dynamically generate these from legacy SLDS with the
+ * following design pattern:
+ *
+ * [type="action"][icon-name="approval"] {
+ *   --sds-c-icon-color-background: var(--slds-c-icon-color-background, #111);
+ * }
+ */
+
+:host([data-render-mode="shadow"]) .slds-icon_disabled {
+  background-color: currentColor;
+}
+
+:host([data-render-mode="shadow"]) .slds-input__icon {
+  --slds-c-icon-sizing: calc(var(--sds-g-sizing-1, 0.125rem) + var(--sds-g-sizing-4, 0.75rem));
+  
+  position: absolute;
+  top: 50%;
+  margin-block-start: -0.4375rem;
+  line-height: var(--sds-g-font-lineheight-1, 1);
+  border: 0;
+  z-index: 2;
+}
+
+/* Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
+  Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
+
+@supports (--styling-hooks: '') {
+  :host([data-render-mode="shadow"]) .slds-assistive-text {
+    position: absolute !important;
+    margin: -1px !important;
+    border: 0 !important;
+    padding: 0 !important;
+    width: 1px !important;
+    height: 1px !important;
+    overflow: hidden !important;
+    clip: rect(0 0 0 0) !important;
+    text-transform: none !important;
+    white-space: nowrap !important;
+  }
+
+  :host([data-render-mode="shadow"]) [part~='avatar'] {
+    width: var(--slds-c-avatar-sizing, var(--sds-g-sizing-9, 2rem));
+    height: var(--slds-c-avatar-sizing, var(--sds-g-sizing-9, 2rem));
+    overflow: hidden;
+    display: inline-block;
+    vertical-align: middle;
+    border-radius: var(--slds-c-avatar-radius-border, var(--sds-g-radius-border-2, 0.25rem));
+    line-height: var(--sds-g-font-lineheight-1, 1);
+    font-size: var(--sds-g-font-scale-neg-1, 0.875rem);
+    color: var(--slds-c-avatar-text-color, var(--sds-g-color-neutral-base-100, #ffffff));
+  }
+
+  :host([data-render-mode="shadow"][size='x-small']) [part~='avatar'] {
+    width: var(--sds-g-sizing-6, 1.25rem);
+    height: var(--sds-g-sizing-6, 1.25rem);
+    font-size: var(--sds-g-font-scale-neg-4, 0.625rem);
+    --slds-c-icon-sizing: var(--sds-g-sizing-6, 1.25rem);
+  }
+
+  :host([data-render-mode="shadow"][size='small']) [part~='avatar'] {
+    width: var(--sds-g-sizing-7, 1.5rem);
+    height: var(--sds-g-sizing-7, 1.5rem);
+    font-size: var(--sds-g-font-scale-neg-4, 0.625rem);
+    --slds-c-icon-sizing: var(--sds-g-sizing-7, 1.5rem);
+  }
+
+  :host([data-render-mode="shadow"][size='medium']) [part~='avatar'] {
+    width: var(--sds-g-sizing-9, 2rem);
+    height: var(--sds-g-sizing-9, 2rem);
+    font-size: var(--sds-g-font-scale-neg-1, 0.875rem);
+    --slds-c-icon-sizing: var(--sds-g-sizing-9, 2rem);
+  }
+
+  :host([data-render-mode="shadow"][size='large']) [part~='avatar'] {
+    width: var(--sds-g-sizing-10, 3rem);
+    height: var(--sds-g-sizing-10, 3rem);
+    font-size: var(--sds-g-font-scale-1, 1.125rem);
+    line-height: var(--sds-g-font-lineheight-2, 1.25);
+    --slds-c-icon-sizing: var(--sds-g-sizing-10, 3rem);
+  }
+
+  :host([data-render-mode="shadow"][variant='circle']) [part~='avatar'] {
+    border-radius: calc(var(--sds-g-radius-border-circle, 100%) / 2);
+  }
+
+  :host([data-render-mode="shadow"].slds-avatar_empty) [part~='avatar'] {
+    border: var(--sds-g-sizing-border-1, 1px) dashed var(--sds-g-color-neutral-base-90, #e5e5e5);
+  }
+
+  :host([data-render-mode="shadow"]) lightning-icon {
+    display: flex;
+    justify-content: center;
+  }
+
+  :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 */
+  }
+
+  :host([data-render-mode="shadow"]) .slds-avatar__initials[title] {
+    cursor: default;
+    text-decoration: none;
+  }
+
+  /* inverse is not currently supported by LBC */
+  :host([data-render-mode="shadow"]) .slds-avatar__initials_inverse {
+    --slds-c-avatar-text-color: var(--slds-c-avatar-inverse-text-color, var(--sds-g-color-neutral-base-30, #444444));
+
+    background-color: var(--sds-g-color-neutral-base-95, #f3f3f3);
+    text-shadow: none;
+  }
+}

package/src/lightning/pill/link.css

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

package/src/lightning/pill/link.html

@@ -1,5 +1,5 @@
 <template>
-    <span>
+    <span part="pill">
         <template if:false={_hasError}>
             <template if:true={_hasMedia}>
                 <span class="slds-pill__icon_container">