lightning-base-components 1.17.7-alpha → 1.18.2-alpha

package/src/lightning/primitiveColorpickerButton/color-picker-button.slds.css

@@ -49,39 +49,39 @@
 
 @supports (--styling-hooks: '') {
   :host([data-render-mode="shadow"][size~='xxx-small']) {
-    --slds-c-icon-sizing: 0.5rem;
+    --slds-c-icon-sizing: var(--sds-g-sizing-3, 0.5rem);
   }
 
   :host([data-render-mode="shadow"][size~='xx-small']) {
-    --slds-c-icon-sizing: 0.875rem;
+    --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: 1rem;
+    --slds-c-icon-sizing: var(--sds-g-sizing-5, 1rem);
   }
 
   :host([data-render-mode="shadow"][size~='small']) {
-    --slds-c-icon-sizing: 1.5rem;
+    --slds-c-icon-sizing: var(--sds-g-sizing-7, 1.5rem);
   }
 
   :host([data-render-mode="shadow"][size~='large']) {
-    --slds-c-icon-sizing: 3rem;
+    --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-4);
+    --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-contrast-1);
+    --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-contrast-1);
+    --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-contrast-1);
+    --slds-c-icon-color-foreground: var(--sds-g-color-neutral-base-70, #aeaeae);
   }
 
   :host([data-render-mode="shadow"]) [part~='boundary'] {
@@ -115,15 +115,15 @@
   }
 
   :host([data-render-mode="shadow"]) [part~='icon'] {
-    --sds-c-icon-color-foreground: var(--slds-c-icon-color-foreground, var(--sds-g-color-neutral-base-1));
-    --sds-c-icon-sizing-height: var(--slds-c-icon-sizing-height, var(--slds-c-icon-sizing, 2rem));
-    --sds-c-icon-sizing-width: var(--slds-c-icon-sizing-width, var(--slds-c-icon-sizing, 2rem));
+    --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: 0.5rem;
-    --slds-c-icon-spacing-inline: 0.5rem;
-    --slds-c-icon-radius-border: 50%;
+    --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);
   }
 }
 
@@ -152,12 +152,13 @@
   /*! @css-var-fallback fill */
   --slds-c-icon-color-foreground: var(
     --slds-c-icon-color-foreground-default,
-    var(--sds-c-icon-color-foreground-default, #706e6b)
+    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: #dddbda;
+  fill: var(--sds-g-color-neutral-base-80, #c9c9c9);
 }
 
 /**
@@ -196,6 +197,17 @@
   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 */
 
@@ -213,6 +225,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     padding-block: var(--slds-c-colorpickerbutton-spacing-block, 0.3rem);
     background: var(--slds-c-colorpickerbutton-color-background, var(--sds-g-color-brand-base-100, #ffffff));
     line-height: 1;
+    margin-inline-end: var(--sds-g-spacing-1, 0.25rem);
     border-color: var(--slds-c-colorpickerbutton-color-border, var(--sds-g-color-neutral-base-80, #c9c9c9));
     justify-content: center;
     flex-shrink: 0;
@@ -265,7 +278,6 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     width: 1.25rem;
     border-radius: var(--sds-g-radius-border-1, 0.125rem);
     box-shadow: inset 0 0 1px rgb(0 0 0 / 40%);
-    margin-inline-end: var(--sds-g-spacing-1, 0.25rem);
   }
 
   :host([data-render-mode="shadow"]) [part='color-picker-button'] .slds-assistive-text {
@@ -291,7 +303,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     border-color: var(--slds-c-colorpickerbutton-color-border-disabled, var(--sds-g-color-neutral-base-80, #c9c9c9));
   }
 
-  /* TO DO: .panel and .panel-open should be renamed 
+  /* TO DO: .panel and .panel-open should be renamed
   when working on color-input ticket */
   :host([data-render-mode="shadow"]) [part='color-picker-button'] + .panel {
     display: none;

package/src/lightning/primitiveColorpickerButton/primitiveColorpickerButton.css

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

package/src/lightning/primitiveColorpickerButton/primitiveColorpickerButton.js

@@ -1,12 +1,13 @@
 import labelA11yTriggerText from '@salesforce/label/LightningColorPicker.a11yTriggerText';
-import { LightningElement, api, track } from 'lwc';
+import { api, track } from 'lwc';
+import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 import { Direction, AutoPosition } from 'lightning/positionLibrary';
-import { normalizeBoolean } from 'lightning/utilsPrivate';
+import { normalizeBoolean, reflectAttribute } from 'lightning/utilsPrivate';
 
 const i18n = {
     a11yTriggerText: labelA11yTriggerText,
 };
-export default class PrimitiveColorpickerButton extends LightningElement {
+export default class PrimitiveColorpickerButton extends LightningShadowBaseClass {
     static delegatesFocus = true;
 
     @track _isColorPickerPanelOpen = false;
@@ -34,6 +35,7 @@ export default class PrimitiveColorpickerButton extends LightningElement {
 
     set disabled(value) {
         this._disabled = normalizeBoolean(value);
+        reflectAttribute(this, 'disabled', this.disabled);
     }
 
     @api

package/src/lightning/primitiveIcon/icon.slds.css

@@ -0,0 +1,209 @@
+/* Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
+  Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
+
+:host([data-render-mode="shadow"]) {
+  /**
+   * Establish independent formatting context, we don't want ancestor rules affecting our layout.
+   * This assumes there will not be a direct, child inline-level element.
+   * See https://www.w3.org/TR/css-display-3/#establish-an-independent-formatting-context
+   */
+  display: inline-flex;
+}
+
+:host([data-render-mode="shadow"]) [part~='boundary'] {
+  padding-block-start: var(--sds-c-icon-spacing-block-start, var(--sds-c-icon-spacing));
+  padding-block-end: var(--sds-c-icon-spacing-block-end, var(--sds-c-icon-spacing));
+  padding-inline-start: var(--sds-c-icon-spacing-inline-start, var(--sds-c-icon-spacing));
+  padding-inline-end: var(--sds-c-icon-spacing-inline-end, var(--sds-c-icon-spacing));
+  border-radius: var(--sds-c-icon-radius-border);
+  border-width: var(--sds-c-icon-sizing-border, 1px);
+  border-style: solid;
+  border-color: var(--sds-c-icon-color-border, transparent);
+  background-color: var(--sds-c-icon-color-background);
+}
+
+:host([data-render-mode="shadow"]) [part~='icon'] {
+  display: flex; /* See line #5 */
+  height: var(--sds-c-icon-sizing-height, var(--sds-c-icon-sizing));
+  width: var(--sds-c-icon-sizing-width, var(--sds-c-icon-sizing));
+  color: var(--sds-c-icon-color-foreground);
+}
+
+/**
+ * Normalize svgs and control width/height with Styling Hooks
+ */
+
+:host([data-render-mode="shadow"]) svg {
+  width: 100%;
+  height: 100%;
+}
+
+/**
+ * @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;
+}

package/src/lightning/primitiveIcon/primitiveIcon.css

@@ -1,8 +1,9 @@
+@import 'lightning/sldsCommon';
+@import './icon.slds.css';
 /*
 "Temporary" fix for Edge SVG quirk. We can remove this when it is fixed either
 at the SLDS level or at the browser level.
  https://git.soma.salesforce.com/aura/lightning-global/issues/1349
-
  Also prevents IE11 from gacking during some interactions
 */
 _:-ms-lang(x), svg {

package/src/lightning/primitiveIcon/primitiveIcon.html

@@ -1,5 +1,5 @@
 <template>
-    <svg class={computedClass} focusable="false" data-key={name} aria-hidden="true">
+    <svg class={computedClass} focusable="false" data-key={name} aria-hidden="true" part="icon">
         <use xlink:href={href}></use>
     </svg>
 </template>

package/src/lightning/primitiveIcon/primitiveIcon.js

@@ -1,14 +1,16 @@
-import { LightningElement, api } from 'lwc';
+import { api } from 'lwc';
+import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 import { classSet } from 'lightning/utils';
 import { normalizeString as normalize } from 'lightning/utilsPrivate';
 
 import standardTemplate from './primitiveIcon.html';
+import iconStylesheets from './primitiveIcon.css';
 
 import { getName, isValidName, polyfill } from 'lightning/iconUtils';
 import dir from '@salesforce/i18n/dir';
 import { fetchIconLibrary, hasIconLibrary, getIconLibrary } from './fetch';
 
-export default class LightningPrimitiveIcon extends LightningElement {
+export default class LightningPrimitiveIcon extends LightningShadowBaseClass {
     @api src;
     @api svgClass;
     _size = 'medium';
@@ -23,6 +25,7 @@ export default class LightningPrimitiveIcon extends LightningElement {
     }
     set size(val) {
         this._size = val;
+        this.setAttribute('size', this.normalizeSize(this._size));
     }
 
     @api
@@ -31,6 +34,7 @@ export default class LightningPrimitiveIcon extends LightningElement {
     }
     set variant(val) {
         this._variant = val;
+        this.setAttribute('variant', this.normalizeVariant(this._variant));
     }
 
     @api
@@ -95,6 +99,10 @@ export default class LightningPrimitiveIcon extends LightningElement {
                         this._iconLibrary[`${spriteName}_${iconName}`];
 
                     if (template) {
+                        // manually attach the stylesheets in native shadow mode
+                        if (!this.template.synthetic) {
+                            template.stylesheets = iconStylesheets;
+                        }
                         return template;
                     }
                 }
@@ -111,14 +119,14 @@ export default class LightningPrimitiveIcon extends LightningElement {
         return getName(this.iconName);
     }
 
-    get normalizedSize() {
-        return normalize(this._size, {
+    normalizeSize(val) {
+        return normalize(val, {
             fallbackValue: 'medium',
             validValues: ['xx-small', 'x-small', 'small', 'medium', 'large'],
         });
     }
 
-    get normalizedVariant() {
+    normalizeVariant(val) {
         // NOTE: Leaving a note here because I just wasted a bunch of time
         // investigating why both 'bare' and 'inverse' are supported in
         // lightning-primitive-icon. lightning-icon also has a deprecated
@@ -126,7 +134,7 @@ export default class LightningPrimitiveIcon extends LightningElement {
         // that no classes should be applied. So this component needs to
         // support both 'bare' and 'inverse' while lightning-icon only needs to
         // support 'inverse'.
-        return normalize(this._variant, {
+        return normalize(val, {
             fallbackValue: '',
             validValues: ['bare', 'error', 'inverse', 'warning', 'success'],
         });
@@ -134,13 +142,12 @@ export default class LightningPrimitiveIcon extends LightningElement {
 
     get computedClass() {
         const classes = classSet(this.svgClass);
-        const { normalizedSize, normalizedVariant } = this;
 
-        if (normalizedVariant !== 'bare') {
+        if (this._variant !== 'bare') {
             classes.add('slds-icon');
         }
 
-        switch (normalizedVariant) {
+        switch (this._variant) {
             case 'error':
                 classes.add('slds-icon-text-error');
                 break;
@@ -161,8 +168,8 @@ export default class LightningPrimitiveIcon extends LightningElement {
                 }
         }
 
-        if (normalizedSize !== 'medium') {
-            classes.add(`slds-icon_${normalizedSize}`);
+        if (this._size !== 'medium') {
+            classes.add(`slds-icon_${this._size}`);
         }
 
         return classes.toString();

package/src/lightning/progressStep/progressStep.js

@@ -102,6 +102,9 @@ export default class LightningProgressStep extends LightningElement {
         if (this._deRegistrationCallback) {
             this._deRegistrationCallback();
         }
+        if (this._tooltip) {
+            this._tooltip.disconnect();
+        }
     }
 
     renderedCallback() {
@@ -153,7 +156,6 @@ export default class LightningProgressStep extends LightningElement {
     }
 
     handleMouseEnter() {
-        this.updateAriaDescribedBy('progress-indicator-tooltip');
         this.dispatchEvent(
             // eslint-disable-next-line lightning-global/no-custom-event-bubbling
             new CustomEvent('stepmouseenter', {
@@ -164,7 +166,7 @@ export default class LightningProgressStep extends LightningElement {
     }
 
     handleMouseLeave() {
-        this.updateAriaDescribedBy(null);
+        this.clearAriaDescribedBy();
         this.dispatchEvent(
             // eslint-disable-next-line lightning-global/no-custom-event-bubbling
             new CustomEvent('stepmouseleave', {
@@ -175,10 +177,6 @@ export default class LightningProgressStep extends LightningElement {
     }
 
     handleFocus() {
-        if (this.state.type === 'base') {
-            this.updateAriaDescribedBy('progress-indicator-tooltip');
-        }
-
         this.dispatchEvent(
             // eslint-disable-next-line lightning-global/no-custom-event-bubbling
             new CustomEvent('stepfocus', {
@@ -189,7 +187,7 @@ export default class LightningProgressStep extends LightningElement {
     }
 
     handleBlur() {
-        this.updateAriaDescribedBy(null);
+        this.clearAriaDescribedBy();
         this.dispatchEvent(
             // eslint-disable-next-line lightning-global/no-custom-event-bubbling
             new CustomEvent('stepblur', {
@@ -199,15 +197,11 @@ export default class LightningProgressStep extends LightningElement {
         );
     }
 
-    updateAriaDescribedBy(value) {
+    clearAriaDescribedBy() {
         if (this.state.type === 'base') {
             const button = this.template.querySelector('button');
             if (button) {
-                if (value !== null) {
-                    button.setAttribute('aria-describedBy', value);
-                } else {
-                    button.removeAttribute('aria-describedBy');
-                }
+                button.removeAttribute('aria-describedBy');
             }
         }
     }
@@ -246,6 +240,9 @@ export default class LightningProgressStep extends LightningElement {
                 },
             });
             this._tooltip.initialize();
+
+            // unset aria-describedby that would've been set by tooltipLibrary
+            this.clearAriaDescribedBy();
         }
     }
 }

package/src/lightning/radioGroup/radioGroup.css

@@ -1,4 +1,5 @@
-/* @import './input-radio-group.slds.css'; */
+@import 'lightning/sldsCommon';
+@import './input-radio-group.slds.css';
 
 :host {
     display: block;

package/src/lightning/radioGroup/radioGroup.js

@@ -1,5 +1,6 @@
 import labelRequired from '@salesforce/label/LightningControl.required';
-import { LightningElement, api, track } from 'lwc';
+import { api, track } from 'lwc';
+import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 import {
     normalizeBoolean,
     synchronizeAttrs,
@@ -25,7 +26,7 @@ const i18n = {
 /**
  * A radio button group that can have a single option selected.
  */
-export default class LightningRadioGroup extends LightningElement {
+export default class LightningRadioGroup extends LightningShadowBaseClass {
     static delegatesFocus = true;
 
     /**
@@ -77,6 +78,7 @@ export default class LightningRadioGroup extends LightningElement {
         });
     }
     connectedCallback() {
+        super.connectedCallback();
         this.classList.add('slds-form-element');
         this.updateClassList();
         this.interactingState = new InteractingState();