lightning-base-components 1.21.3-alpha → 1.21.4-alpha

package/src/lightning/sldsUtilsVisibility/sldsUtilsVisibility.css

@@ -6,7 +6,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   Corresponding Work Item: W-14458332
 */
 
-.slds-assistive-text {
+:host([data-render-mode='shadow']) .slds-assistive-text {
     position: absolute !important;
     margin: -1px !important;
     border: 0 !important;
@@ -19,6 +19,6 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     white-space: nowrap !important;
 }
 
-.slds-hide {
+:host([data-render-mode='shadow']) .slds-hide {
     display: none !important;
 }

package/src/lightning/staticMap/staticMap.js

@@ -2,7 +2,7 @@ import lang from '@salesforce/i18n/lang';
 import formFactor from '@salesforce/client/formFactor';
 import labelTitleWithAddress from '@salesforce/label/LightningMap.titleWithAddress';
 import labelTitleWithoutAddress from '@salesforce/label/LightningMap.iframeTitle';
-import { LightningElement, api, track } from 'lwc';
+import { api, track } from 'lwc';
 import { ratioToScale, calculateSize } from './util';
 import {
     registerMessageHandler,
@@ -14,6 +14,7 @@ import { buildMapSourceUrl } from 'lightning/mapUtils';
 import { isEmptyString } from 'lightning/inputUtils';
 import { formatLabel } from 'lightning/utils';
 import { isCSR } from 'lightning/utilsPrivate';
+import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 
 const EVENT_NAME = {
     LOADING_MAP: 'loadingMap',
@@ -25,7 +26,7 @@ const i18n = {
     titleWithoutAddress: labelTitleWithoutAddress,
 };
 
-export default class LightningStaticMap extends LightningElement {
+export default class LightningStaticMap extends LightningShadowBaseClass {
     @api width;
     @api height;
     @api street;

package/src/lightning/tab/tab.js

@@ -1,6 +1,7 @@
 import { api, track } from 'lwc';
 import { normalizeBoolean } from 'lightning/utilsPrivate';
 import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
+import { isCSR } from 'lightning/utilsPrivate';
 /**
  * A single tab in a tabset component.
  * @slot default Placeholder for your content in lightning-tab.
@@ -12,7 +13,7 @@ export default class LightningTab extends LightningShadowBaseClass {
     connectedCallback() {
         super.connectedCallback();
         this._connected = true;
-        if (this.template.synthetic) {
+        if (isCSR && this.template.synthetic) {
             this.dispatchEvent(
                 new CustomEvent('privatetabregister', {
                     cancelable: true,
@@ -55,7 +56,9 @@ export default class LightningTab extends LightningShadowBaseClass {
     loadContent() {
         this._loadContent = true;
 
-        this.dispatchEvent(new CustomEvent('active'));
+        if (isCSR) {
+            this.dispatchEvent(new CustomEvent('active'));
+        }
     }
 
     disconnectedCallback() {
@@ -185,7 +188,7 @@ export default class LightningTab extends LightningShadowBaseClass {
     }
 
     _dispatchDataChangeEventIfConnected() {
-        if (this._connected) {
+        if (isCSR && this._connected) {
             this.dispatchEvent(
                 new CustomEvent('privatetabdatachange', {
                     cancelable: true,

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

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

package/src/lightning/tabBar/tabBar.js

@@ -11,6 +11,7 @@ import { calculateOverflow } from 'lightning/overflowLibrary';
 import { LightningResizeObserver } from 'lightning/resizeObserver';
 import { handleKeyDownOnTabList } from './keyboard';
 import AriaObserver from 'lightning/ariaObserver';
+import { isCSR } from 'lightning/utilsPrivate';
 
 const i18n = {
     more: labelOverflowMore,
@@ -44,7 +45,9 @@ export default class LightningTabBar extends LightningShadowBaseClass {
         if (this.overflowSupported) {
             this._queueOverflow();
         }
-        this.ariaObserver = new AriaObserver(this);
+        if (isCSR) {
+            this.ariaObserver = new AriaObserver(this);
+        }
     }
 
     renderedCallback() {
@@ -74,7 +77,7 @@ export default class LightningTabBar extends LightningShadowBaseClass {
     }
 
     get tabLinks() {
-        return this.template.querySelectorAll(`a[role="tab"]`);
+        return isCSR ? this.template.querySelectorAll(`a[role="tab"]`) : null;
     }
 
     disconnectedCallback() {
@@ -169,7 +172,7 @@ export default class LightningTabBar extends LightningShadowBaseClass {
 
         this._queueSynchronizeA11 = true;
 
-        if (this._connected && this.overflowSupported) {
+        if (isCSR && this._connected && this.overflowSupported) {
             // eslint-disable-next-line @lwc/lwc/no-async-operation
             requestAnimationFrame(this._queueOverflow.bind(this));
         }
@@ -473,8 +476,10 @@ export default class LightningTabBar extends LightningShadowBaseClass {
         this._allTabs.forEach((tab) => {
             tab.visible = true;
         });
-        // eslint-disable-next-line @lwc/lwc/no-async-operation
-        requestAnimationFrame(this._recomputeOverflow.bind(this));
+        if (isCSR) {
+            // eslint-disable-next-line @lwc/lwc/no-async-operation
+            requestAnimationFrame(this._recomputeOverflow.bind(this));
+        }
     }
 
     _recomputeOverflow() {

package/src/lightning/tabset/tabset.html

@@ -9,6 +9,7 @@
                 onprivatetablinkregister={handleTabLinkRegister}
             >{headingLabel}</div>
             <lightning-tab-bar
+                exportparts="tab-bar, tab-item"
                 variant={variant}
                 onselect={handleTabSelected}
                 aria-labelledby="tabset-heading"
@@ -17,6 +18,7 @@
         </template>
         <template lwc:else>
             <lightning-tab-bar
+                exportparts="tab-bar, tab-item"
                 variant={variant}
                 onselect={handleTabSelected}
                 aria-label={defaultAriaLabel}

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

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

package/src/lightning/textarea/textarea.js

@@ -424,6 +424,9 @@ export default class LightningTextarea extends LightningShadowBaseClass {
 
     connectedCallback() {
         super.connectedCallback();
+        if (!this.ariaObserver) {
+            this.ariaObserver = new AriaObserver(this);
+        }
         this.updateHostClassList();
         this._connected = true;
         this.interactingState = new InteractingState();
@@ -431,7 +434,9 @@ export default class LightningTextarea extends LightningShadowBaseClass {
     }
 
     renderedCallback() {
-        this.ariaObserver.sync(this._isNativeShadow);
+        if (this.isConnected) {
+            this.ariaObserver.sync(this._isNativeShadow);
+        }
         // IE11: This is needed to work-around IE11 issue where it would append default value to the place holder,
         // instead of actually setting the value on the textarea element.
         if (!this._rendered) {

package/src/lightning/toastContainer/__docs__/toastContainer.md

@@ -1,4 +1,4 @@
-Use the `lightning/toastContainer` module (Beta) to manage a list of toast components and their order. Pages support a single page-level toast container. 
+Use the `lightning/toastContainer` module to manage a list of toast components and their order. Each site page supports a single toast container. You can create toast notifications with [lightning/toast](/docs/component-library/bundle/lightning-toast/documentation) and manage them using `lightning/toastContainer`.
 
 This module is available only for LWR Sites for Experience Cloud. For more information, see [Create Components for LWR Sites](https://developer.salesforce.com/docs/atlas.en-us.exp_cloud_lwr.meta/exp_cloud_lwr/get_started_components.htm).
 
@@ -34,6 +34,7 @@ export default class MyApp extends LightningElement {
 ```
 
 #### Accessibility
+
 Toast container follows the SLDS [Global Focus Orchestration](https://www.lightningdesignsystem.com/accessibility/guidelines/global-focus/#global-orchestration) accessibility guidelines, which allow users to use the keyboard shortcut to navigate between toasts.
 - Press `Control` + `F6` or `Command` + `F6` for Mac OS to move focus to next toast, if any.
-- Press `Shift` + `Control` + `F6` or `Shift` + `Command` + `F6` for Mac OS to move focus to the previous toast, if any.
+- Press `Shift` + `Control` + `F6` or `Shift` + `Command` + `F6` for Mac OS to move focus to the previous toast, if any.

package/src/lightning/tooltipLibrary/tooltipLibrary.js

@@ -228,31 +228,40 @@ export class Tooltip {
         const target = this._target();
 
         if (!this._initialized && target) {
-            target.addEventListener('touchstart', (e) => {
-                e.stopPropagation();
-                this.toggle();
-            });
-            ['mouseenter', 'focus'].forEach((name) =>
-                target.addEventListener(name, (event) => this.show(event))
+            ['touchstart', 'click'].forEach((eventName) =>
+                target.addEventListener(eventName, (event) =>
+                    this.toggleIfTouchOrClick(event)
+                )
             );
-            ['mouseleave', 'blur'].forEach((name) =>
-                target.addEventListener(name, (event) =>
+
+            ['mouseenter', 'focus'].forEach((eventName) =>
+                target.addEventListener(eventName, (event) => this.show(event))
+            );
+            ['mouseleave', 'blur'].forEach((eventName) =>
+                target.addEventListener(eventName, (event) =>
                     this.hideIfNotSelfCover(event)
                 )
             );
 
             target.addEventListener('keydown', (event) => {
-                if (event.keyCode === 13 && !this._visible) {
-                    this.toggle();
-                } else if (this._visible) {
-                    this.hide();
-                    if (event.key === 'Escape') {
-                        event.stopPropagation();
-                    }
+                if (event.key === 'Escape' && this._visible) {
+                    this.hideIfNotSelfCover(event);
+                    event.stopPropagation();
                 }
             });
         }
     }
+
+    /* mobile listens for both 'click' and 'touchstart', but we only want to listen to
+       either 'touchstart' and not 'click', otherwise it will double toggle. Call preventDefault() to prevent the
+       'click' event from bubbling after a 'touchstart' is detected on mobile.
+    */
+    toggleIfTouchOrClick(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        this.toggle();
+    }
+
     handleEscape(e) {
         if (e.key === 'Escape' && this._isFocusEvent) {
             e.stopPropagation();

package/src/lightning/verticalNavigation/vertical-navigation.slds.css

@@ -2,3 +2,17 @@
 :host([data-render-mode="shadow"]) [part='vertical-navigation'] {
   position: relative;
 }
+
+:host([data-render-mode="shadow"]) .slds-nav-vertical_compact {
+  --slds-c-verticalnavigationitem-spacing-blockstart: var(--slds-g-spacing-1);
+  --slds-c-verticalnavigationitem-spacing-blockend: var(--slds-g-spacing-1);
+  --slds-c-verticalnavigationitem-spacing-inlinestart: var(--slds-g-spacing-5);
+  --slds-c-verticalnavigationsection-spacing-blockstart: var(--slds-g-spacing-1);
+  --slds-c-verticalnavigationsection-spacing-blockend: var(--slds-g-spacing-1);
+  --slds-c-verticalnavigationsection-spacing-inlinestart: var(--slds-g-spacing-5);
+}
+
+:host([data-render-mode="shadow"]) .slds-nav-vertical_shade {
+  --slds-c-verticalnavigationitem-color: var(--slds-g-color-neutral-base-100);
+  --slds-c-verticalnavigationitem-border-color: var(--slds-g-color-neutral-base-90);
+}

package/src/lightning/verticalNavigation/verticalNavigation.css

@@ -1 +1 @@
-@import './verticalNavigation.lbc.native.css';
+@import './verticalNavigation.lbc.native.css';

package/src/lightning/verticalNavigation/verticalNavigation.html

@@ -1,5 +1,5 @@
 <template>
-    <nav class={computedClass} onprivateitemselect={handleItemSelect} onprivateitemregister={handleItemRegister} aria-label={ariaLabel} part="vertical-navigation">
+    <nav class={computedClass} aria-label={ariaLabel} part="vertical-navigation">
         <slot></slot>
     </nav>
 </template>

package/src/lightning/verticalNavigation/verticalNavigation.js

@@ -5,6 +5,7 @@ import {
     assert,
     normalizeBoolean,
     normalizeString,
+    isCSR,
 } from 'lightning/utilsPrivate';
 import subPage from '@salesforce/label/LightningVerticalNavigation.subPage';
 
@@ -98,6 +99,37 @@ export default class LightningVerticalNavigation extends LightningShadowBaseClas
         return classes.toString();
     }
 
+    connectedCallback() {
+        super.connectedCallback();
+        this.addItemEventListeners();
+    }
+
+    addItemEventListeners() {
+        if (isCSR) {
+            this.addEventListener(
+                'privateitemregister',
+                this.handleItemRegister.bind(this)
+            );
+            this.addEventListener(
+                'privateitemselect',
+                this.handleItemSelect.bind(this)
+            );
+        }
+    }
+
+    removeItemEventListeners() {
+        if (isCSR) {
+            this.removeEventListener(
+                'privateitemregister',
+                this.handleItemRegister.bind(this)
+            );
+            this.removeEventListener(
+                'privateitemselect',
+                this.handleItemSelect.bind(this)
+            );
+        }
+    }
+
     /**
      * @name verticalNavigationItems
      * @type {Array}
@@ -142,35 +174,41 @@ export default class LightningVerticalNavigation extends LightningShadowBaseClas
      * @param {String} itemName - label of the selected child navigation item.
      */
     selectNavigationItem(itemName) {
-        // dispatch before events
-        const beforeselectevent = new CustomEvent('beforeselect', {
-            cancelable: true,
-            detail: {
-                name: itemName,
-            },
-        });
-        this.dispatchEvent(beforeselectevent);
-
-        if (!beforeselectevent.defaultPrevented) {
-            // select navigation item
-            this.verticalNavigationItems.forEach((navigationItem) => {
-                if (navigationItem.name === itemName) {
-                    navigationItem.callbacks.select();
-                } else {
-                    navigationItem.callbacks.deselect();
-                }
+        if (isCSR) {
+            // dispatch before events
+            const beforeselectevent = new CustomEvent('beforeselect', {
+                cancelable: true,
+                detail: {
+                    name: itemName,
+                },
             });
-            // update state
-            this._selectedItem = itemName;
-
-            // fire after events
-            this.dispatchEvent(
-                new CustomEvent('select', {
-                    detail: {
-                        name: itemName,
-                    },
-                })
-            );
+            this.dispatchEvent(beforeselectevent);
+
+            if (!beforeselectevent.defaultPrevented) {
+                // select navigation item
+                this.verticalNavigationItems.forEach((navigationItem) => {
+                    if (navigationItem.name === itemName) {
+                        navigationItem.callbacks.select();
+                    } else {
+                        navigationItem.callbacks.deselect();
+                    }
+                });
+                // update state
+                this._selectedItem = itemName;
+
+                // fire after events
+                this.dispatchEvent(
+                    new CustomEvent('select', {
+                        detail: {
+                            name: itemName,
+                        },
+                    })
+                );
+            }
         }
     }
+
+    disconnectedCallback() {
+        this.removeItemEventListeners();
+    }
 }

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

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

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

@@ -0,0 +1,63 @@
+
+:host([data-render-mode="shadow"]) .slds-nav-vertical__action {
+  --slds-c-icon-color-foreground-default: currentcolor;
+
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding-block-start: var(--slds-c-verticalnavigationitem-spacing-blockstart, var(--slds-g-spacing-2));
+  padding-block-end: var(--slds-c-verticalnavigationitem-spacing-blockend, var(--slds-g-spacing-2));
+  padding-inline-start: var(--slds-c-verticalnavigationitem-spacing-inlinestart, var(--slds-g-spacing-6));
+  padding-inline-end: var(--slds-c-verticalnavigationitem-spacing-inlineend, var(--slds-g-spacing-5));
+  border-block-start: var(--slds-g-sizing-border-1) solid transparent;
+  border-block-end: var(--slds-g-sizing-border-1) solid transparent;
+  border-radius: 0;
+  box-shadow: inset 0 0 0 var(--slds-g-color-brand-base-60);
+  cursor: pointer;
+  color: var(--slds-g-color-neutral-base-10);
+}
+
+:host([data-render-mode="shadow"]) .slds-nav-vertical__action_overflow {
+  --slds-c-button-neutral-font-lineheight: default;
+  --slds-c-icon-color-foreground: var(--slds-g-color-neutral-base-50);
+
+  width: inherit;
+  border-block-start: 1px solid transparent;
+  border-block-end: 1px solid transparent;
+}
+
+:host([data-render-mode="shadow"]) .slds-nav-vertical__action-text {
+  color: var(--slds-g-color-brand-base-50);
+}
+
+:host([data-render-mode="shadow"]) .slds-nav-vertical__action:hover {
+  box-shadow: inset 2px 0 0 var(--slds-g-color-brand-base-60);
+  color: currentcolor;
+}
+
+:host([data-render-mode="shadow"]) .slds-nav-vertical__action:focus {
+  text-decoration: underline;
+  color: currentcolor;
+}
+
+:host([data-render-mode="shadow"].slds-nav-vertical__item) {
+  position: relative;
+}
+
+:host([data-render-mode="shadow"].slds-nav-vertical__item:focus-within) {
+  box-shadow: inset 0 0 0 1px var(--slds-g-color-brand-base-60);
+}
+
+:host([data-render-mode="shadow"].slds-nav-vertical__item:hover),:host([data-render-mode="shadow"].slds-nav-vertical__item.slds-is-active) {
+  background: var(--slds-c-verticalnavigationitem-color, var(--slds-g-color-brand-base-95));
+}
+
+:host([data-render-mode="shadow"].slds-is-active) .slds-nav-vertical__action:not(:focus) {
+  border-color: var(--slds-c-verticalnavigationitem-border-color, transparent);
+}
+
+:host([data-render-mode="shadow"].slds-nav-vertical__item.slds-is-active) .slds-nav-vertical__action {
+  font-weight: bold;
+  box-shadow: inset 4px 0 0 var(--slds-g-color-brand-base-60);
+}

package/src/lightning/verticalNavigationItem/verticalNavigationItem.css

@@ -1,3 +1,2 @@
-:host {
-    display: list-item;
-}
+@import './verticalNavigationItem.lbc.synthetic.css';
+@import './verticalNavigationItem.lbc.native.css';

package/src/lightning/verticalNavigationItem/verticalNavigationItem.js

@@ -1,11 +1,16 @@
-import { LightningElement, api, track } from 'lwc';
+import { api, track } from 'lwc';
+import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
+import { isCSR } from 'lightning/utilsPrivate';
 
 const DEFAULT_HREF = 'javascript:void(0);'; // eslint-disable-line no-script-url
 
 /**
  * A text-only link within lightning-vertical-navigation-section or lightning-vertical-navigation-overflow.
  */
-export default class LightningVerticalNavigationItem extends LightningElement {
+export default class LightningVerticalNavigationItem extends LightningShadowBaseClass {
+    static validationOptOut = ['class'];
+    _rendered = false;
+
     /**
      * The text displayed for the navigation item.
      * @type {string}
@@ -30,21 +35,30 @@ export default class LightningVerticalNavigationItem extends LightningElement {
     @track _selected = false;
 
     connectedCallback() {
+        super.connectedCallback();
         this.setAttribute('role', 'listitem');
         this.classList.add('slds-nav-vertical__item');
-        this.dispatchEvent(
-            new CustomEvent('privateitemregister', {
-                bubbles: true,
-                cancelable: true,
-                detail: {
-                    callbacks: {
-                        select: this.select.bind(this),
-                        deselect: this.deselect.bind(this),
+        if (isCSR) {
+            this.dispatchEvent(
+                new CustomEvent('privateitemregister', {
+                    bubbles: true,
+                    cancelable: true,
+                    detail: {
+                        callbacks: {
+                            select: this.select.bind(this),
+                            deselect: this.deselect.bind(this),
+                        },
+                        name: this.name,
                     },
-                    name: this.name,
-                },
-            })
-        );
+                })
+            );
+        }
+    }
+
+    renderedCallback() {
+        if (!this._rendered) {
+            this._rendered = true;
+        }
     }
 
     select() {
@@ -58,7 +72,7 @@ export default class LightningVerticalNavigationItem extends LightningElement {
     }
 
     get ariaCurrent() {
-        return this._selected ? 'page' : null;
+        return this._selected && this._rendered ? 'page' : null;
     }
 
     handleClick(event) {

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

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

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

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

package/src/lightning/verticalNavigationItem/verticalNavigationItem.lbc.synthetic.css

@@ -0,0 +1,3 @@
+:host {
+    display: list-item;
+}

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

@@ -0,0 +1,76 @@
+
+  :host([data-render-mode="shadow"]) [part="badge"] {
+    /**
+      * Remap to SLDS blueprint hooks for parity
+      * https://www.lightningdesignsystem.com/components/modals/#Styling-Hooks-Overview
+      *
+      */
+    /* stylelint-disable */
+    --slds-c-badge-font-lineheight: var(--slds-c-badge-line-height);
+    /* stylelint-enable */
+    display: inline-flex;
+    align-items: center;
+    padding: var(--slds-g-spacing-1) var(--slds-g-spacing-2);
+    color: var(--slds-c-badge-text-color, var(--slds-g-color-on-surface-3));
+    font-size: var(--slds-c-badge-font-size, var(--slds-g-font-scale-neg-2));
+    font-weight: var(--slds-g-font-weight-7);
+    /* stylelint-disable */
+    line-height: var(--slds-c-badge-font-lineheight, initial);
+    /* stylelint-enable */
+    white-space: nowrap;
+    border-width: var(--slds-c-badge-sizing-border, var(--slds-g-sizing-border-1));
+    border-style: solid;
+    border-color: var(--slds-c-badge-color-border, transparent);
+    border-radius: var(--slds-c-badge-radius-border, 15rem);
+    background-color: var(--slds-c-badge-color-background, var(--slds-g-color-neutral-base-95));
+  }
+
+  :host([data-render-mode="shadow"]) [part="badge"]:empty {
+    padding: 0;
+  }
+
+  :host([data-render-mode="shadow"]) [part="badge"] .slds-badge__icon {
+    display: inline-flex;
+    align-items: center;
+    color: var(--slds-c-badge-icon-color-foreground, var(--slds-g-color-neutral-base-50, var(--slds-g-color-neutral-base-50)));
+    line-height: 1;
+    vertical-align: middle;
+  }
+
+  :host([data-render-mode="shadow"]) [part="badge"] .slds-badge__icon.slds-badge__icon_inverse {
+    --slds-c-badge-icon-color-foreground: var(--slds-c-badge-icon-inverse-color-foreground, currentColor);
+  }
+
+  :host([data-render-mode="shadow"]) [part="badge"] .slds-badge__icon.slds-badge__icon_left {
+    margin-inline-end: var(--slds-g-spacing-1);
+  }
+
+  :host([data-render-mode="shadow"]) [part="badge"] .slds-badge__icon.slds-badge__icon_right {
+    margin-inline-start: var(--slds-g-spacing-1);
+  }
+
+  :host([data-render-mode="shadow"]) [part="badge"] lightning-primitive-icon {
+    vertical-align: middle;
+  }
+
+  /* As a best practice for native shadow, we should use an attribute on the host rather than the SLDS class.
+     However, the public API for this component does not expose an attribute for this class. Establishing a programmatic
+     mapping between the class and an attribute is an antipattern, requiring MutationObserver and reducing performance */
+
+  :host([data-render-mode="shadow"].slds-badge_inverse) {
+    --slds-c-badge-color-background: var(--slds-c-badge-inverse-color-background, var(--slds-g-color-neutral-base-50, var(--slds-g-color-neutral-base-50)));
+    --slds-c-badge-text-color: var(--slds-c-badge-inverse-text-color, var(--slds-g-color-neutral-base-100, var(--slds-g-color-neutral-base-100)));
+  }
+
+  /* As a best practice for native shadow, we should use an attribute on the host rather than the SLDS class.
+     However, the public API for badge does not expose an attribute for this class. Establishing a programmatic mapping between
+     the class and an attribute is an antipattern, requiring MutationObserver and reducing performance */
+
+  :host([data-render-mode="shadow"].slds-badge_lightest) {
+    --slds-c-badge-color-background: var(--slds-c-badge-lightest-color-background, var(--slds-g-color-neutral-base-100, var(--slds-g-color-neutral-base-100)));
+    --slds-c-badge-color-border: var(--slds-c-badge-lightest-color-border, var(--slds-g-color-border-base-1, var(--slds-g-color-neutral-base-90)));
+  }
+
+  :host([data-render-mode="shadow"].slds-badge:not(:first-of-type)) {
+    margin-inline-start: var(--slds-g-spacing-2);
+  }