lightning-base-components 1.18.7-alpha → 1.18.7-ssr

package/metadata/raptor.json

@@ -1365,6 +1365,12 @@
   "groupedCombobox": {
     "slotNames": [],
     "properties": [
+      {
+        "name": "customAriaHasPopup"
+      },
+      {
+        "name": "customRole"
+      },
       {
         "name": "disableDefaultHighlight"
       },
@@ -1555,6 +1561,7 @@
   "industriesActionablelistApi": {},
   "industriesAssessmentApi": {},
   "industriesAuditTrailExportApi": {},
+  "industriesAutomotiveApi": {},
   "industriesCibApi": {},
   "industriesClmApi": {},
   "industriesContextApi": {},
@@ -1570,6 +1577,7 @@
   "industriesExplainabilityApi": {},
   "industriesExternalDocumentApi": {},
   "industriesFeatureValidationApi": {},
+  "industriesFieldsetApi": {},
   "industriesFundraisingApi": {},
   "industriesGroupApi": {},
   "industriesHealthcloudApi": {},
@@ -2599,6 +2607,12 @@
       },
       {
         "name": "focus"
+      },
+      {
+        "name": "reportValidity"
+      },
+      {
+        "name": "setCustomValidity"
       }
     ]
   },
@@ -2827,6 +2841,10 @@
   "platformShowToastEvent": {
     "minVersion": "45.0"
   },
+  "platformWorkspaceApi": {
+    "minVersion": "59.0"
+  },
+  "platformWorkspaceApiUtils": {},
   "popup": {
     "slotNames": [
       ""
@@ -3160,14 +3178,23 @@
       {
         "name": "label"
       },
+      {
+        "name": "matchingInfo"
+      },
       {
         "name": "objectApiName"
       },
       {
         "name": "placeholder"
       },
+      {
+        "name": "required"
+      },
       {
         "name": "value"
+      },
+      {
+        "name": "variant"
       }
     ],
     "methods": [
@@ -3179,19 +3206,12 @@
       },
       {
         "name": "focus"
-      }
-    ]
-  },
-  "recordPickerGetRecord": {
-    "properties": [
-      {
-        "name": "displayInfo"
       },
       {
-        "name": "objectApiName"
+        "name": "reportValidity"
       },
       {
-        "name": "recordId"
+        "name": "setCustomValidity"
       }
     ]
   },
@@ -3418,6 +3438,7 @@
       }
     ]
   },
+  "serviceDataCategoryApi": {},
   "showToastEvent": {},
   "sitesApi": {},
   "slider": {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "lightning-base-components",
-    "version": "1.18.7-alpha",
+    "version": "1.18.7-ssr",
     "license": "MIT",
     "files": [
         "external",
@@ -1263,7 +1263,73 @@
                 "path": "scopedImports/@salesforce-internal-core.untrustedContentDomain.js"
             }
         ],
-        "nativeShadowEnabledComponents": [],
+        "nativeShadowEnabledComponents": [
+            "lightning-accordion",
+            "lightning-accordion-section",
+            "lightning-avatar",
+            "lightning-base-combobox",
+            "lightning-base-combobox-item",
+            "lightning-breadcrumb",
+            "lightning-breadcrumbs",
+            "lightning-bubble",
+            "lightning-button",
+            "lightning-button-group",
+            "lightning-button-icon",
+            "lightning-button-icon-stateful",
+            "lightning-button-menu",
+            "lightning-button-stateful",
+            "lightning-card",
+            "lightning-calendar",
+            "lightning-color-picker-custom",
+            "lightning-color-picker-panel",
+            "lightning-combobox",
+            "lightning-datepicker",
+            "lightning-datetimepicker",
+            "lightning-dual-listbox",
+            "lightning-dynamic-icon",
+            "lightning-formatted-rich-text",
+            "lightning-formatted-text",
+            "lightning-helptext",
+            "lightning-icon",
+            "lightning-input",
+            "lightning-layout",
+            "lightning-layout-item",
+            "lightning-menu-divider",
+            "lightning-menu-item",
+            "lightning-menu-subheader",
+            "lightning-modal",
+            "lightning-modalBase",
+            "lightning-modalBody",
+            "lightning-modalFooter",
+            "lightning-modalHeader",
+            "lightning-overlay-container",
+            "lightning-pill",
+            "lightning-pill-container",
+            "lightning-popup",
+            "lightning-popup-source",
+            "lightning-primitive-bubble",
+            "lightning-primitive-color-picker-button",
+            "lightning-primitive-icon",
+            "lightning-primitive-input-checkbox",
+            "lightning-primitive-input-checkbox-button",
+            "lightning-primitive-input-color",
+            "lightning-primitive-input-file",
+            "lightning-primitive-input-simple",
+            "lightning-primitive-input-toggle",
+            "lightning-progress-bar",
+            "lightning-progress-ring",
+            "lightning-radio-group",
+            "lightning-select",
+            "lightning-spinner",
+            "lightning-tab-bar",
+            "lightning-tabset",
+            "lightning-toast",
+            "lightning-toast-container",
+            "lightning-timepicker",
+            "lightning-vertical-navigation",
+            "lightning-vertical-navigation-section",
+            "lightning-badge"
+        ],
         "expose": [
             "lightning/accordion",
             "lightning/accordionSection",

package/src/lightning/accordion/accordion.css

@@ -1,13 +1,13 @@
-/* @import 'lightning/sldsCommon';
-@import './accordion.slds.css'; */
+@import 'lightning/sldsCommon';
+@import './accordion.slds.css';
 
 :host {
     display: block;
     list-style: none;
 }
 
-/* To Do: 
-   Remove the code below as it is a duplicate once data-render-mode fix (W-12439890) for ::slotted is in. 
+/* To Do:
+   Remove the code below as it is a duplicate once data-render-mode fix (W-12439890) for ::slotted is in.
 */
 /* Removes first child border top */
 ::slotted(lightning-accordion-section:first-child) {

package/src/lightning/accordion/accordion.js

@@ -1,11 +1,12 @@
-import { LightningElement, api } from 'lwc';
+import { api } from 'lwc';
+import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 import { createAccordionManager } from 'lightning/accordionUtilsPrivate';
 
 /**
  * A collection of vertically stacked sections with multiple content areas.
  * @slot default Placeholder for accordion-section components.
  */
-export default class LightningAccordion extends LightningElement {
+export default class LightningAccordion extends LightningShadowBaseClass {
     privateIsSectionLessInLastRender = true;
     _allowMultipleSectionsOpen = false;
     connected = false;
@@ -30,6 +31,7 @@ export default class LightningAccordion extends LightningElement {
     }
 
     connectedCallback() {
+        super.connectedCallback();
         this.connected = true;
         this.setAttribute('role', 'list');
         this.classList.add('slds-accordion');

package/src/lightning/accordion/accordion.slds.css

@@ -484,14 +484,20 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     justify-content: center;
   }
 
+  /**
+   * Represents inner spacing around icon for icon-position="left", when present
+   */
   :host([data-render-mode="shadow"]) [part~='start'] {
     display: inline-flex;
-    padding-inline-end: var(--sds-g-spacing-2, 0.5rem);
+    padding-inline-end: 0;
   }
 
+  /**
+   * Represents inner spacing around icon for icon-position="right", when present
+   */
   :host([data-render-mode="shadow"]) [part~='end'] {
     display: inline-flex;
-    padding-inline-start: var(--sds-g-spacing-2, 0.5rem);
+    padding-inline-start: 0;
   }
 }
 
@@ -537,7 +543,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
         border-top-color: var(--slds-c-accordionsection-color-border,  var(--slds-g-color-border-base-1));
     }
 
-    :host([data-render-mode="shadow"]) [part~="accordion-section"] {
+    :host([data-render-mode="shadow"]) [part="accordion-section"] {
         padding-block-start: var(--slds-c-accordionsection-spacing-block-start, var(--sds-g-spacing-3, 0.75rem));
         padding-block-end: var(--slds-c-accordionsection-spacing-block-end, var(--sds-g-spacing-3, 0.75rem));
         padding-inline-end: var(--slds-c-accordionsection-spacing-inline-end, var(--sds-g-spacing-3, 0.75rem));
@@ -577,11 +583,11 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
         box-shadow: none;
     }
 
-    /* Note: 
-    Currently button is being hard coded so using 
-    [part~="button"] to style button. 
+    /* Note:
+    Currently button is being hard coded so using
+    [part="button"] to style button.
     However this should be changed to lightning-button::part(button) once hard coded button gets refactored to lightning-button */
-    :host([data-render-mode="shadow"]) [part~="button"] {
+    :host([data-render-mode="shadow"]) [part="button"] {
         display: inline-flex;
         flex-grow: 1;
         align-items: center;
@@ -602,20 +608,20 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
         padding-inline-end: var(--slds-c-accordionsection-spacing-inline-end, var(--sds-g-sizing-4, 0.75rem));
         padding-inline-start: var(--slds-c-accordionsection-spacing-inline-start, var(--sds-g-sizing-4, 0.75rem));
     }
-    
-    /* Note: 
-    Should be changed to lightning-button::part(button) 
+
+    /* Note:
+    Should be changed to lightning-button::part(button)
     if button can be refactored to slds-button
     */
-    :host([data-render-mode="shadow"]) [part~="button"]:hover,:host([data-render-mode="shadow"]) 
-    [part~="button"]:focus {
+    :host([data-render-mode="shadow"]) [part="button"]:hover,:host([data-render-mode="shadow"]) 
+    [part="button"]:focus {
         --slds-c-icon-color-foreground-default: var(--slds-c-accordion-heading-color-hover, var(--sds-g-color-brand-base-30, #014486));
 
         color: var(--slds-c-accordion-heading-color-hover, var(--sds-g-color-brand-base-30, #014486));
     }
 
-    /* Note: 
-    Media query will need to be worked out properly 
+    /* Note:
+    Media query will need to be worked out properly
     and be replaced with utility classes */
     @media (min-width: 64.0625em) {
         :host([data-render-mode="shadow"]) .slds-accordion__summary-content {
@@ -646,21 +652,21 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 }
 
 @supports (--styling-hooks: '') {
-    /* To Do: 
+    /* To Do:
         Currently the code below will not work as our script to add data-render-mode into our css will break the css selector.
         We had to add a temporary fix in interop/accordion/accordion.css that
         does the exact same thing to have the styles applied.
-        Once our script is fixed (should be addressed in W-12439890) remove the duplicated code found in accordion.css (interop) 
+        Once our script is fixed (should be addressed in W-12439890) remove the duplicated code found in accordion.css (interop)
     */
-    
+
     /* Removes first child border top */
     :host([data-render-mode="shadow"]) ::slotted(lightning-accordion-section:first-child) {
         --slds-c-accordionsection-sizing-border: 0;
     }
 
-    :host([data-render-mode="shadow"]) [part~="accordion"] {
-        /* Note: The following styling hooks are remapped from accordion-section for usability reason. 
-        Users will have an option to use spacing styling hooks from both accordion and accordion-section making it 
+    :host([data-render-mode="shadow"]) [part="accordion"] {
+        /* Note: The following styling hooks are remapped from accordion-section for usability reason.
+        Users will have an option to use spacing styling hooks from both accordion and accordion-section making it
         easier to use our styling hook based on our internal styling hook naming rules */
         --slds-c-accordionsection-spacing-block-start: var(--slds-c-accordion-spacing-block-start);
         --slds-c-accordionsection-spacing-block-end: var(--slds-c-accordion-spacing-block-end);

package/src/lightning/accordionSection/accordion-section.slds.css

@@ -484,14 +484,20 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     justify-content: center;
   }
 
+  /**
+   * Represents inner spacing around icon for icon-position="left", when present
+   */
   :host([data-render-mode="shadow"]) [part~='start'] {
     display: inline-flex;
-    padding-inline-end: var(--sds-g-spacing-2, 0.5rem);
+    padding-inline-end: 0;
   }
 
+  /**
+   * Represents inner spacing around icon for icon-position="right", when present
+   */
   :host([data-render-mode="shadow"]) [part~='end'] {
     display: inline-flex;
-    padding-inline-start: var(--sds-g-spacing-2, 0.5rem);
+    padding-inline-start: 0;
   }
 }
 
@@ -537,7 +543,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
         border-top-color: var(--slds-c-accordionsection-color-border,  var(--slds-g-color-border-base-1));
     }
 
-    :host([data-render-mode="shadow"]) [part~="accordion-section"] {
+    :host([data-render-mode="shadow"]) [part="accordion-section"] {
         padding-block-start: var(--slds-c-accordionsection-spacing-block-start, var(--sds-g-spacing-3, 0.75rem));
         padding-block-end: var(--slds-c-accordionsection-spacing-block-end, var(--sds-g-spacing-3, 0.75rem));
         padding-inline-end: var(--slds-c-accordionsection-spacing-inline-end, var(--sds-g-spacing-3, 0.75rem));
@@ -577,11 +583,11 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
         box-shadow: none;
     }
 
-    /* Note: 
-    Currently button is being hard coded so using 
-    [part~="button"] to style button. 
+    /* Note:
+    Currently button is being hard coded so using
+    [part="button"] to style button.
     However this should be changed to lightning-button::part(button) once hard coded button gets refactored to lightning-button */
-    :host([data-render-mode="shadow"]) [part~="button"] {
+    :host([data-render-mode="shadow"]) [part="button"] {
         display: inline-flex;
         flex-grow: 1;
         align-items: center;
@@ -602,20 +608,20 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
         padding-inline-end: var(--slds-c-accordionsection-spacing-inline-end, var(--sds-g-sizing-4, 0.75rem));
         padding-inline-start: var(--slds-c-accordionsection-spacing-inline-start, var(--sds-g-sizing-4, 0.75rem));
     }
-    
-    /* Note: 
-    Should be changed to lightning-button::part(button) 
+
+    /* Note:
+    Should be changed to lightning-button::part(button)
     if button can be refactored to slds-button
     */
-    :host([data-render-mode="shadow"]) [part~="button"]:hover,:host([data-render-mode="shadow"]) 
-    [part~="button"]:focus {
+    :host([data-render-mode="shadow"]) [part="button"]:hover,:host([data-render-mode="shadow"]) 
+    [part="button"]:focus {
         --slds-c-icon-color-foreground-default: var(--slds-c-accordion-heading-color-hover, var(--sds-g-color-brand-base-30, #014486));
 
         color: var(--slds-c-accordion-heading-color-hover, var(--sds-g-color-brand-base-30, #014486));
     }
 
-    /* Note: 
-    Media query will need to be worked out properly 
+    /* Note:
+    Media query will need to be worked out properly
     and be replaced with utility classes */
     @media (min-width: 64.0625em) {
         :host([data-render-mode="shadow"]) .slds-accordion__summary-content {

package/src/lightning/accordionSection/accordionSection.css

@@ -1,14 +1,14 @@
-/* @import 'lightning/sldsCommon';
-@import './accordion-section.slds.css'; */
+@import 'lightning/sldsCommon';
+@import './accordion-section.slds.css';
 
 :host {
     display: list-item;
 }
 
 /* Note:
-   - Prevents double border on mixed/shadow mode: 
+   - Prevents double border on mixed/shadow mode:
    This is added because we have 'slds-accordion__list-item' from the host and inside the component (within the shadow boundary). This will cause double border on mixed/shadow mode.
-   The code below will remove the border coming from the host and keep the border from shadow boundary.  
+   The code below will remove the border coming from the host and keep the border from shadow boundary.
    - Added '!important' as a last resort as user agent style sheet will always win over our own styles.
 */
 :host([data-render-mode="shadow"]) {

package/src/lightning/accordionSection/accordionSection.js

@@ -1,4 +1,5 @@
-import { LightningElement, api, track } from 'lwc';
+import { api, track } from 'lwc';
+import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 import { generateUniqueId } from 'lightning/inputUtils';
 import { keyCodes, isHeadingLevelValid } from 'lightning/utilsPrivate';
 import { classSet } from 'lightning/utils';
@@ -10,7 +11,7 @@ import DIR from '@salesforce/i18n/dir';
  * Actions are displayed at the top right corner of the accordion section.
  * @slot default Placeholder for your content in the accordion section.
  */
-export default class LightningAccordionSection extends LightningElement {
+export default class LightningAccordionSection extends LightningShadowBaseClass {
     /**
      * The unique section name to use with the active-section-name attribute in the accordion component.
      * @type {string}
@@ -58,6 +59,7 @@ export default class LightningAccordionSection extends LightningElement {
     privateUniqueId = generateUniqueId('lgt-accordion-section');
 
     connectedCallback() {
+        super.connectedCallback();
         this.setAttribute('role', 'listitem');
         this.classList.add('slds-accordion__list-item');
         this.registerSectionWithParent();

package/src/lightning/avatar/avatar.css

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

package/src/lightning/avatar/avatar.js

@@ -1,4 +1,5 @@
-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';
@@ -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.

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

@@ -44,7 +44,7 @@
     --slds-c-icon-color-foreground: var(--sds-g-color-neutral-base-70, #aeaeae);
   }
 
-  :host([data-render-mode="shadow"]) [part~='boundary'] {
+  :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);
@@ -74,7 +74,7 @@
     display: inline-flex;
   }
 
-  :host([data-render-mode="shadow"]) [part~='icon'] {
+  :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)));
@@ -159,7 +159,7 @@
 
 :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;
@@ -185,7 +185,7 @@
     white-space: nowrap !important;
   }
 
-  :host([data-render-mode="shadow"]) [part~='avatar'] {
+  :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;
@@ -197,28 +197,28 @@
     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'] {
+  :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'] {
+  :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'] {
+  :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'] {
+  :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);
@@ -226,11 +226,11 @@
     --slds-c-icon-sizing: var(--sds-g-sizing-10, 3rem);
   }
 
-  :host([data-render-mode="shadow"][variant='circle']) [part~='avatar'] {
+  :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'] {
+  :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);
   }
 

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,2 @@
+@import 'lightning/sldsCommon';
+@import './badge.slds.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>

package/src/lightning/badge/badge.js

@@ -1,6 +1,7 @@
-import { LightningElement, api } from 'lwc';
+import { api } from 'lwc';
 import { classSet } from 'lightning/utils';
 import { normalizeString } from 'lightning/utilsPrivate';
+import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 
 const DEFAULT_POSITION = 'start';
 
@@ -8,7 +9,7 @@ const DEFAULT_POSITION = 'start';
  * Represents a label which holds a small amount of information, such as the
  * number of unread notifications.
  */
-export default class LightningBadge extends LightningElement {
+export default class LightningBadge extends LightningShadowBaseClass {
     /**
      * Normalized icon position
      */
@@ -55,6 +56,7 @@ export default class LightningBadge extends LightningElement {
     }
 
     connectedCallback() {
+        super.connectedCallback();
         this.classList.add('slds-badge');
     }