lightning-base-components 1.21.1-alpha → 1.21.2-alpha

package/src/lightning/ariaObserver/ariaObserver.js

@@ -1,8 +1,4 @@
-import {
-    guid,
-    synchronizeAttrs,
-    isNativeComponent,
-} from 'lightning/utilsPrivate';
+import { guid, isNativeComponent, isCSR } from 'lightning/utilsPrivate';
 
 import {
     setAriaActiveDescendant,
@@ -11,13 +7,7 @@ import {
     setAriaControls,
 } from './polyfill.js';
 
-/*
-    Aria Reflection is used if supported by browser.
-    If Aria Reflection is not available, fallback to polyfill
-    Aria Reflection: https://wicg.github.io/aom/aria-reflection-explainer.html
-    Polyfill: https://git.soma.salesforce.com/lwc/aria-element-reflection
-*/
-const SUPPORTED_ATTRIBUTES = new Map([
+const SUPPORTED_ATTRIBUTES_ARRAY = [
     [
         'aria-controls',
         {
@@ -46,7 +36,23 @@ const SUPPORTED_ATTRIBUTES = new Map([
             polyfill: setAriaActiveDescendant,
         },
     ],
-]);
+];
+
+/*
+    Aria Reflection is used if supported by browser.
+    If Aria Reflection is not available, fallback to polyfill
+    Aria Reflection: https://wicg.github.io/aom/aria-reflection-explainer.html
+    Polyfill: https://git.soma.salesforce.com/lwc/aria-element-reflection
+*/
+const SUPPORTED_ATTRIBUTES_MAP = new Map(SUPPORTED_ATTRIBUTES_ARRAY);
+
+// Sniff for ARIA element reflection
+let BROWSER_SUPPORTS_ARIA_ELEMENT_REFLECTION;
+if (isCSR) {
+    BROWSER_SUPPORTS_ARIA_ELEMENT_REFLECTION = [
+        ...SUPPORTED_ATTRIBUTES_MAP.values(),
+    ].every(({ ariaReflection }) => ariaReflection in Element.prototype);
+}
 
 function extractElements(root, ids) {
     if (typeof ids !== 'string' || ids === '') {
@@ -55,7 +61,7 @@ function extractElements(root, ids) {
     // We must query the elements in the order of ids, so that
     // the content will be extracted in the correct order.
     return splitIds(ids)
-        .map((id) => root.querySelector(`#${id}`))
+        .map((id) => root.querySelector(`[id*="${id}"]`))
         .filter((el) => !!el);
 }
 
@@ -72,6 +78,8 @@ export default class AriaObserver {
         this.liveIds = {};
         this.guid = guid();
         this.placeholderContainer = null;
+        this.ariaReflectionMap = new Map();
+        this.nodeMap = new Map();
     }
 
     connectLiveIdRef(refs, callback) {
@@ -184,11 +192,11 @@ export default class AriaObserver {
             return; // nothing to update
         }
 
-        const attribute = SUPPORTED_ATTRIBUTES.get(attrName);
+        const attribute = SUPPORTED_ATTRIBUTES_MAP.get(attrName);
         if (!attribute) {
             throw new Error(
                 `${attrName} is not supported by AriaObserver. Supported attributes: ${Array.from(
-                    SUPPORTED_ATTRIBUTES.keys()
+                    SUPPORTED_ATTRIBUTES_MAP.keys()
                 )}`
             );
         }
@@ -198,25 +206,30 @@ export default class AriaObserver {
                 ...relatedNodes,
                 ...extractElements(this.root, relatedNodeIds),
             ];
-            if (targetNode[attribute.ariaReflection]) {
-                /*
-                    Remove any existing polyfill relationships that might have been created
-                    before the ariaReflection property was available (initial connection can occur before the property
-                    exists).
-                */
-                attribute.polyfill(targetNode, null, attrName);
+            if (BROWSER_SUPPORTS_ARIA_ELEMENT_REFLECTION) {
+                // This browser supports native ARIA element reflection
                 // Use Aria Reflection to manage relationships
                 targetNode[attribute.ariaReflection] = relatedNodes;
             } else {
                 attribute.polyfill(targetNode, allRelatedNodes, attrName);
             }
+            // check related nodes for nested references and ensure
+            // the div with reflected nodes is updated accordingly
+            const rootNode = targetNode.getRootNode();
+            for (let i = 0; i < allRelatedNodes.length; i++) {
+                this.privateAddNestedReferences(rootNode, allRelatedNodes[i]);
+            }
         } else {
-            synchronizeAttrs(targetNode, {
-                [attrName]: [
-                    ...splitIds(relatedNodeIds),
-                    ...relatedNodes.map((n) => n.id),
-                ].join(' '),
-            });
+            const attributeValue = [
+                ...splitIds(relatedNodeIds),
+                ...relatedNodes.map((n) => n.id),
+            ].join(' ');
+
+            if (attributeValue) {
+                targetNode.setAttribute(attrName, attributeValue);
+            } else {
+                targetNode.removeAttribute(attrName);
+            }
         }
     }
 
@@ -273,23 +286,33 @@ export default class AriaObserver {
                 const thisId = this.liveIds[liveId];
                 if (!thisId.elements || !thisId.elements.length) {
                     const splitRefIds = splitIds(liveId);
-                    // element refs are cached
-                    const refElements = [
-                        ...root.querySelectorAll(thisId.selector),
-                    ];
-
-                    thisId.elements = refElements.sort((a, b) => {
-                        const idA = a
-                            .getAttribute('id')
-                            ?.replace(/-[0-9]+$/g, '');
-                        const idB = b
-                            .getAttribute('id')
-                            ?.replace(/-[0-9]+$/g, '');
-
-                        return (
-                            splitRefIds.indexOf(idA) - splitRefIds.indexOf(idB)
-                        );
-                    });
+                    try {
+                        // element refs are cached
+                        const refElements = [
+                            ...root.querySelectorAll(thisId.selector),
+                        ];
+
+                        thisId.elements = refElements.sort((a, b) => {
+                            const idA = a
+                                .getAttribute('id')
+                                ?.replace(/-[0-9]+$/g, '');
+                            const idB = b
+                                .getAttribute('id')
+                                ?.replace(/-[0-9]+$/g, '');
+
+                            return (
+                                splitRefIds.indexOf(idA) -
+                                splitRefIds.indexOf(idB)
+                            );
+                        });
+                    } catch (error) {
+                        if (error instanceof DOMException) {
+                            console.warn(
+                                `lightning/ariaObserver could not find elements to connect live IDs due to an invalid id selector.\n\n${error}`
+                            );
+                        }
+                        return;
+                    }
                 }
 
                 const newThisId = this.privateExtractCorrectElements(
@@ -307,6 +330,48 @@ export default class AriaObserver {
         }
     }
 
+    /**
+     * Check nodes being reflected to see if there are any nested references
+     * then finds the mirrored node and reflects it accordingly.
+     * Maintains a map of nodes to their mirrors, and root nodes to the div
+     * containing all reflected elements for increased efficiency.
+     * @param {Node} rootNode - the root node where the mirrored nodes are attached
+     * @param {Node} relatedNode - the node to check for nested references
+     */
+    privateAddNestedReferences(rootNode, relatedNode) {
+        for (let i = 0; i < SUPPORTED_ATTRIBUTES_ARRAY.length; i++) {
+            const [attrName, { polyfill }] = SUPPORTED_ATTRIBUTES_ARRAY[i];
+            const attrValue = relatedNode.getAttribute(attrName);
+            // if attrValue is truthy, another attribute needs reflecting
+            if (attrValue) {
+                // if we don't know the corresponding mirrored node, find it
+                let mirroredNode = this.nodeMap.get(relatedNode);
+                if (!mirroredNode) {
+                    let ariaReflection = this.ariaReflectionMap.get(rootNode);
+                    if (!ariaReflection) {
+                        ariaReflection = rootNode.querySelector(
+                            '.aria-element-reflection-mirror'
+                        );
+                        this.ariaReflectionMap.set(rootNode, ariaReflection);
+                    }
+                    if (ariaReflection) {
+                        mirroredNode = ariaReflection.querySelector(
+                            `[${attrName}='${attrValue}']`
+                        );
+                        this.nodeMap.set(relatedNode, mirroredNode);
+                    }
+                }
+                if (mirroredNode) {
+                    const nestedReferenceNodes = extractElements(
+                        this.root,
+                        attrValue
+                    );
+                    polyfill(mirroredNode, nestedReferenceNodes, attrName);
+                }
+            }
+        }
+    }
+
     disconnect() {
         // MutationObservers must be disconnected manually when using @lwc/synthetic-shadow
         // https://lwc.dev/guide/composition#:~:text=memory%20leak

package/src/lightning/avatar/avatar.css

@@ -1,2 +1 @@
-/* @import 'lightning/sldsCommon';
-@import './avatar.slds.css'; */
+@import './avatar.lbc.native.css';

package/src/lightning/avatar/avatar.html

@@ -1,9 +1,23 @@
 <template>
     <span class={computedClass} part="avatar">
-    <img if:true={_src} src={_src} onerror={handleImageError} alt={alternativeText} title={alternativeText}>
-
-    <abbr if:true={showInitials} class={computedInitialsClass} title={alternativeText}>{initials}</abbr>
-
-    <lightning-icon if:true={showIcon} icon-name={fallbackIconName} alternative-text={alternativeText} title={alternativeText}></lightning-icon>
+        <img
+            if:true={_src}
+            src={_src}
+            onerror={handleImageError}
+            alt={alternativeText}
+            title={alternativeText}
+        >
+        <abbr
+            if:true={showInitials}
+            class={computedInitialsClass}
+            title={alternativeText}
+            style={computedInitialsStyle}
+        >{initials}</abbr>
+        <lightning-icon
+            if:true={showIcon}
+            icon-name={fallbackIconName}
+            alternative-text={alternativeText}
+            title={alternativeText}
+        ></lightning-icon>
     </span>
 </template>

package/src/lightning/avatar/avatar.js

@@ -1,7 +1,8 @@
-import { LightningElement, api, track } from 'lwc';
+import { api, track } from 'lwc';
+import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 import { classSet } from 'lightning/utils';
 import { normalizeString, reflectAttribute } from 'lightning/utilsPrivate';
-import { computeSldsClass } from 'lightning/iconUtils';
+import { computeSldsClass, getIconColor } from 'lightning/iconUtils';
 
 const DEFAULT_SIZE = 'medium';
 const DEFAULT_VARIANT = 'square';
@@ -9,7 +10,7 @@ const DEFAULT_VARIANT = 'square';
 /**
  * A visual representation of an object.
  */
-export default class LightningAvatar extends LightningElement {
+export default class LightningAvatar extends LightningShadowBaseClass {
     /**
      * The alternative text used to describe the avatar, which is displayed as
      * hover text on the image.
@@ -125,6 +126,20 @@ export default class LightningAvatar extends LightningElement {
             .toString();
     }
 
+    get computedInitialsStyle() {
+        if (this.fallbackIconName) {
+            const color = getIconColor(this.fallbackIconName);
+            if (color) {
+                return `background-color: var(--slds-c-icon-color-background, ${color})`;
+            }
+        }
+        const fallbackBGColor = '#0176d3';
+        return `background-color: var(
+            --slds-c-avatar-color-background,
+            var(--slds-g-color-accent-container-2, ${fallbackBGColor})
+        )`;
+    }
+
     get showInitials() {
         return !this._src && this.initials;
     }

package/src/lightning/avatar/avatar.js-meta.xml

@@ -3,4 +3,7 @@
     <isExposed>true</isExposed>
     <minApiVersion>0.0</minApiVersion>
     <support>GA</support>
+    <capabilities>
+        <capability>lightning__ServerRenderableWithHydration</capability>
+    </capabilities>
 </LightningComponentBundle>

package/src/lightning/avatar/avatar.lbc.native.css

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

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

@@ -1,182 +1,7 @@
-/**
- * @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-blockstart,
-      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-inlinestart,
-      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
-     * 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: '') {
-  /* 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;
@@ -191,52 +16,52 @@
   }
 
   :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));
+    width: var(--slds-c-avatar-sizing, var(--slds-g-sizing-9));
+    height: var(--slds-c-avatar-sizing, var(--slds-g-sizing-9));
     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));
+    border-radius: var(--slds-c-avatar-radius-border, var(--slds-g-radius-border-2));
+    line-height: var(--slds-g-font-lineheight-1);
+    font-size: var(--slds-g-font-scale-neg-1);
+    color: var(--slds-c-avatar-text-color, var(--slds-g-color-on-accent-1));
   }
 
   :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);
+    width: var(--slds-g-sizing-6);
+    height: var(--slds-g-sizing-6);
+    font-size: var(--slds-g-font-scale-neg-4);
+    --slds-c-icon-sizing: var(--slds-g-sizing-6);
   }
 
   :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);
+    width: var(--slds-g-sizing-7);
+    height: var(--slds-g-sizing-7);
+    font-size: var(--slds-g-font-scale-neg-4);
+    --slds-c-icon-sizing: var(--slds-g-sizing-7);
   }
 
   :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);
+    width: var(--slds-g-sizing-9);
+    height: var(--slds-g-sizing-9);
+    font-size: var(--slds-g-font-scale-neg-1);
+    --slds-c-icon-sizing: var(--slds-g-sizing-9);
   }
 
   :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);
+    width: var(--slds-g-sizing-10);
+    height: var(--slds-g-sizing-10);
+    font-size: var(--slds-g-font-scale-1);
+    line-height: var(--slds-g-font-lineheight-2);
+    --slds-c-icon-sizing: var(--slds-g-sizing-10);
   }
 
   :host([data-render-mode="shadow"][variant='circle']) [part='avatar'] {
-    border-radius: calc(var(--sds-g-radius-border-circle, 100%) / 2);
+    border-radius: calc(var(--slds-g-radius-border-circle) / 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);
+    border: var(--slds-g-sizing-border-1) dashed var(--slds-g-color-neutral-base-90);
   }
 
   :host([data-render-mode="shadow"]) lightning-icon {
@@ -250,10 +75,14 @@
     align-content: center;
     align-items: center;
     margin: auto;
-    color: var(--slds-c-avatar-text-color);
+    color: var(--slds-c-avatar-initials-text-color);
     height: 100%;
     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));
+    background-color: var(--slds-g-color-accent-container-2);
+  }
+
+  :host([data-render-mode="shadow"]) .slds-avatar__initials:hover {
+    color: var(--slds-c-avatar-initials-text-color-hover, var(--slds-g-color-neutral-base-100));
   }
 
   :host([data-render-mode="shadow"]) .slds-avatar__initials[title] {
@@ -262,10 +91,10 @@
   }
 
   /* 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));
+    --slds-c-avatar-text-color: var(--slds-c-avatar-inverse-text-color, var(--slds-g-color-neutral-base-30));
 
-    background-color: var(--sds-g-color-neutral-base-95, #f3f3f3);
+    background-color: var(--slds-g-color-neutral-base-95);
     text-shadow: none;
   }
-}

package/src/lightning/badge/__examples__/basic/basic.html

@@ -5,8 +5,10 @@
         </h2>
 
         <!-- Badge: basic -->
-        <lightning-badge label="Alpha" class="slds-badge_inverse"></lightning-badge>
+        <lightning-badge label="Alpha"></lightning-badge>
         <lightning-badge label="Beta"></lightning-badge>
         <lightning-badge label="Gamma"></lightning-badge>
+        <lightning-badge label="Inverse" class="slds-badge_inverse"></lightning-badge>
+        <lightning-badge label="Lightest" class="slds-badge_lightest"></lightning-badge>
     </div>
 </template>

package/src/lightning/badge/badge.css

@@ -0,0 +1 @@
+@import './badge.lbc.native.css';

package/src/lightning/badge/badge.html

@@ -1,17 +1,19 @@
 <template>
-    <template if:false={isIconBeforeLabel}>
-        {label}
-    </template>
-
-    <template if:true={iconName}>
-        <span class={computedClass}>
-            <span class="slds-icon_container slds-current-color" title={iconAlternativeText}>
-                <lightning-primitive-icon icon-name={iconName} size="xx-small"></lightning-primitive-icon>
+    <span part="badge">
+        <template if:false={isIconBeforeLabel}>
+            {label}
+        </template>
+    
+        <template if:true={iconName}>
+            <span class={computedClass}>
+                <span class="slds-icon_container slds-current-color" title={iconAlternativeText}>
+                    <lightning-primitive-icon icon-name={iconName} size="xx-small"></lightning-primitive-icon>
+                </span>
             </span>
-        </span>
-    </template>
- 
-    <template if:true={isIconBeforeLabel}>
-        {label}
-    </template>
+        </template>
+        
+        <template if:true={isIconBeforeLabel}>
+            {label}
+        </template>
+    </span>
 </template>