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

package/src/lightning/progressRing/progressRing.html

@@ -1,5 +1,5 @@
 <template>
-    <div class={computedOuterClass} part="progress-ring">
+    <div class={computedOuterClass}>
         <div
             class="slds-progress-ring__progress"
             role="progressbar"
@@ -31,13 +31,8 @@
         </div>
         <div class="slds-progress-ring__progress-head">
             <svg viewBox="-1 -1 2 2">
-                <circle
-                    if:true={isProgressHeadVisible}
-                    class="slds-progress-ring__path"
-                    cx={progressHeadCenter.x}
-                    cy={progressHeadCenter.y}
-                    r="0.2"
-                ></circle>
+                <circle if:true={isProgressHeadVisible} class="slds-progress-ring__path" cx={progressHeadCenter.x} cy={progressHeadCenter.y} r="0.2">
+                </circle>
             </svg>
         </div>
     </div>

package/src/lightning/progressRing/progressRing.js

@@ -1,6 +1,5 @@
-import { api } from 'lwc';
+import { LightningElement, api } from 'lwc';
 import { classSet } from 'lightning/utils';
-import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 
 /**
  * Progress head SVG element viewBox attribute is set as '-1 -1 2 2', hence viewbox height is 2 units
@@ -11,7 +10,7 @@ export const PROGRESS_HEAD_VIEWBOX_HEIGHT = 2;
  * Displays a circular progress indicator to provide feedback about an action or process.
  * This component requires API version 48.0 and later.
  */
-export default class progressRing extends LightningShadowBaseClass {
+export default class progressRing extends LightningElement {
     /**
      * The percentage value of the progress ring. The value must be a number from 0 to 100.
      * A value of 50 corresponds to a color fill of half the ring in a clockwise

package/src/lightning/radioGroup/radioGroup.css

@@ -1,5 +1,6 @@
-@import 'lightning/sldsCommon';
-@import './input-radio-group.slds.css';
+/* sldsCommon was missing earlier - check in review
+@import 'lightning/sldsCommon'; */
+/* @import './input-radio-group.slds.css'; */
 
 :host {
     display: block;

package/src/lightning/radioGroup/radioGroup.js

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

package/src/lightning/select/select.css

@@ -1,3 +1,3 @@
-@import 'lightning/sldsCommon';
+/* @import 'lightning/sldsCommon';
 @import "./form-element.slds.css";
-@import "./select.slds.css";
+@import "./select.slds.css"; */

package/src/lightning/select/select.js

@@ -1,7 +1,6 @@
 import labelRequired from '@salesforce/label/LightningControl.required';
 import labelHelpTextAlternativeText from '@salesforce/label/LightningInput.helptextAlternativeText';
-import { api, track } from 'lwc';
-import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
+import { LightningElement, api, track } from 'lwc';
 import { classSet, formatLabel } from 'lightning/utils';
 import {
     classListMutation,
@@ -24,7 +23,7 @@ const i18n = {
     helpTextAlternativeText: labelHelpTextAlternativeText,
 };
 
-export default class LightningSelect extends LightningShadowBaseClass {
+export default class LightningSelect extends LightningElement {
     static delegatesFocus = true;
     static validationOptOut = ['class'];
 
@@ -73,7 +72,6 @@ export default class LightningSelect extends LightningShadowBaseClass {
     _size;
 
     connectedCallback() {
-        super.connectedCallback();
         this.classList.add('slds-form-element');
         this.updateClassList();
         this.interactingState = new InteractingState();

package/src/lightning/spinner/spinner.css

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

package/src/lightning/spinner/spinner.js

@@ -1,5 +1,4 @@
-import { api } from 'lwc';
-import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
+import { api, LightningElement } from 'lwc';
 import { classSet } from 'lightning/utils';
 import { normalizeString as normalize, isCSR } from 'lightning/utilsPrivate';
 
@@ -9,7 +8,7 @@ const DEFAULT_VARIANT = 'base';
 /**
  * Displays an animated spinner.
  */
-export default class LightningSpinner extends LightningShadowBaseClass {
+export default class LightningSpinner extends LightningElement {
     static validationOptOut = ['class'];
 
     /**
@@ -61,7 +60,6 @@ export default class LightningSpinner extends LightningShadowBaseClass {
     _altText = '';
 
     connectedCallback() {
-        super.connectedCallback();
         this.classList.add('slds-spinner_container');
         if (isCSR) {
             this.template.addEventListener('mousewheel', this.stopScrolling);

package/src/lightning/tab/tab.css

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

package/src/lightning/tabBar/tabBar.css

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

package/src/lightning/tabBar/tabBar.js

@@ -3,8 +3,7 @@ import labelOverflowMoreAlternativeText from '@salesforce/label/LightningTabs.ov
 import labelOverflowMoreTitle from '@salesforce/label/LightningTabs.overflowMoreTitle';
 import labelErrorStateAlternativeText from '@salesforce/label/LightningTabs.errorStateAlternativeText';
 
-import { api, track } from 'lwc';
-import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
+import { LightningElement, api, track } from 'lwc';
 import { classSet } from 'lightning/utils';
 import { reflectAttribute } from 'lightning/utilsPrivate';
 import { calculateOverflow } from 'lightning/overflowLibrary';
@@ -22,7 +21,7 @@ const i18n = {
 const RECOMPUTE_OVERFLOW_THRESHOLD_PX = 30;
 const TARGET_SELECTION_NAME_SUFFIX = 'Tab';
 
-export default class LightningTabBar extends LightningShadowBaseClass {
+export default class LightningTabBar extends LightningElement {
     @api disableOverflow = false;
 
     @track _allTabs = [];
@@ -37,7 +36,6 @@ export default class LightningTabBar extends LightningShadowBaseClass {
     _selectedTab;
 
     connectedCallback() {
-        super.connectedCallback();
         this._connected = true;
         if (this.overflowSupported) {
             this._queueOverflow();

package/src/lightning/tabset/tabset.css

@@ -1,2 +1,10 @@
-@import 'lightning/sldsCommon';
-@import './tabset.slds.css';
+/* TODO W-12129682: styles are commented out for the future migration of `tabset`
+   to Native Shadow
+
+    :host([data-render-mode="shadow"]) .slds-vertical-tabs {
+        display: flex;
+        overflow: hidden;
+        border: 1px solid var(--slds-g-color-border-base-1, #e5e5e5);
+        border-radius: 0.25rem;]
+    }
+*/

package/src/lightning/tabset/tabset.js

@@ -1,5 +1,4 @@
-import { api, track } from 'lwc';
-import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
+import { LightningElement, api, track } from 'lwc';
 import { normalizeString } from 'lightning/utilsPrivate';
 import { generateUniqueId } from 'lightning/inputUtils';
 
@@ -13,7 +12,7 @@ const tabClassPrefixByVariant = {
  * Represents a list of tabs.
  * @slot default Placeholder for lightning-tab.
  */
-export default class LightningTabset extends LightningShadowBaseClass {
+export default class LightningTabset extends LightningElement {
     /**
      * Displays tooltip text when the mouse moves over the tabset.
      * @type {string}
@@ -27,7 +26,6 @@ export default class LightningTabset extends LightningShadowBaseClass {
     _rerender = false;
 
     connectedCallback() {
-        super.connectedCallback();
         this._tabByValue = {};
         this._connected = true;
         this.addEventListener(

package/src/lightning/timepicker/timepicker.css

@@ -1,3 +1,3 @@
-@import 'lightning/sldsCommon';
+/* @import 'lightning/sldsCommon';
 @import './timepicker.slds.css';
-@import './form-element.slds.css';
+@import './form-element.slds.css'; */

package/src/lightning/timepicker/timepicker.js

@@ -4,8 +4,7 @@ import labelRangeOverflow from '@salesforce/label/LightningDateTimePicker.rangeO
 import labelRangeUnderflow from '@salesforce/label/LightningDateTimePicker.rangeUnderflow';
 import labelRequired from '@salesforce/label/LightningControl.required';
 import labelHelpTextAlternativeText from '@salesforce/label/LightningInput.helptextAlternativeText';
-import { api, track } from 'lwc';
-import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
+import { LightningElement, api, track } from 'lwc';
 import { getTimeToHighlight } from './utils';
 import { classSet, formatLabel } from 'lightning/utils';
 import {
@@ -41,7 +40,7 @@ const TIME_STYLE = {
     LONG: 'long',
 };
 
-export default class LightningTimePicker extends LightningShadowBaseClass {
+export default class LightningTimePicker extends LightningElement {
     static delegatesFocus = true;
 
     @track _disabled = false;
@@ -277,7 +276,6 @@ export default class LightningTimePicker extends LightningShadowBaseClass {
     }
 
     connectedCallback() {
-        super.connectedCallback();
         this.connected = true;
     }
 

package/src/lightning/toast/toast.css

@@ -1,4 +1,4 @@
-@import 'lightning/sldsCommon';
+/* @import 'lightning/sldsCommon';
 @import './toast.slds.css';
 @import './icon.slds.css';
 @import './button-icon.slds.css';
@@ -6,7 +6,7 @@
 @import 'lightning/sldsUtilsThemes';
 @import 'lightning/sldsUtilsMargin';
 @import 'lightning/sldsUtilsPosition';
-@import 'lightning/sldsUtilsGrid';
+@import 'lightning/sldsUtilsGrid'; */
 
 .fix-notify_toast_animation,
 :host([data-render-mode="shadow"]) .fix-notify_toast_animation {

package/src/lightning/toast/toast.js

@@ -1,5 +1,4 @@
-import { api, track } from 'lwc';
-import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
+import { LightningElement, api, track } from 'lwc';
 import {
     makeAbsoluteUrl,
     normalizeString,
@@ -46,7 +45,7 @@ const MIN_BROWSER_WIDTH = 480;
 /**
  * A notification element used to convey a label.
  */
-export default class Toast extends LightningShadowBaseClass {
+export default class Toast extends LightningElement {
     static [instanceName] = 'lightning-toast';
     static [properties] = [
         'variant',
@@ -533,7 +532,6 @@ export default class Toast extends LightningShadowBaseClass {
     }
 
     connectedCallback() {
-        super.connectedCallback();
         this.registerWithContainer();
         this.determineSmallerScreen();
         this.determineSmallFormFactor();

package/src/lightning/toastContainer/toastContainer.css

@@ -1,7 +1,7 @@
-@import 'lightning/sldsCommon';
+/* @import 'lightning/sldsCommon';
 @import './toast.slds.css';
 @import 'lightning/sldsUtilsPosition';
-@import 'lightning/sldsUtilsGrid';
+@import 'lightning/sldsUtilsGrid'; */
 
 .top,
 :host([data-render-mode="shadow"]) .top {

package/src/lightning/verticalNavigation/verticalNavigation.css

@@ -1,2 +1,3 @@
-@import 'lightning/sldsCommon';
-@import './vertical-navigation.slds.css';
+/* sldsCommon missed earlier - check on review */
+/* @import 'lightning/sldsCommon'; */
+/* @import './vertical-navigation.slds.css'; */

package/src/lightning/verticalNavigation/verticalNavigation.js

@@ -1,5 +1,4 @@
-import { api, track } from 'lwc';
-import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
+import { LightningElement, api, track } from 'lwc';
 import { classSet } from 'lightning/utils';
 import {
     assert,
@@ -18,7 +17,7 @@ const ALLOWED_CHILDREN = [
  * A vertical list of links that either take the user to another page or parts of the page the user is in.
  * @slot default Placeholder for lightning-vertical-navigation-section and lightning-vertical-navigation-overflow.
  */
-export default class LightningVerticalNavigation extends LightningShadowBaseClass {
+export default class LightningVerticalNavigation extends LightningElement {
     @track _compact;
     @track _shaded;
     @track _selectedItem;

package/src/lightning/verticalNavigationSection/verticalNavigationSection.css

@@ -1,5 +1,6 @@
-@import 'lightning/sldsCommon';
-@import './vertical-navigation-section.slds.css';
+/* sldsCommon missed earlier - check on review
+@import 'lightning/sldsCommon'; */
+/* @import './vertical-navigation-section.slds.css'; */
 
 div[role="list"] {
     list-style: none;

package/src/lightning/verticalNavigationSection/verticalNavigationSection.js

@@ -1,8 +1,7 @@
-import { api, track } from 'lwc';
-import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
+import { LightningElement, api, track } from 'lwc';
 import { guid, isHeadingLevelValid } from 'lightning/utilsPrivate';
 
-export default class LightningVerticalNavigationSection extends LightningShadowBaseClass {
+export default class LightningVerticalNavigationSection extends LightningElement {
     headingId = guid();
 
     @track _label;

package/src/lightning/badge/badge.css

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

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

@@ -1,73 +0,0 @@
-
-@supports (--styling-hooks: '') {
-  :host([data-render-mode="shadow"]) [part="badge"] {
-    /**
-      * Remap to SLDS blueprint hooks for parity
-      * https://www.lightningdesignsystem.com/components/modals/#Styling-Hooks-Overview
-      *
-      */
-    --slds-c-badge-line-height: var(var(--slds-c-badge-font-lineheight));
-
-    display: inline-flex;
-    align-items: center;
-    padding: var(--sds-g-spacing-1, 0.25rem) var(--sds-g-spacing-2, 0.5rem);
-    color: var(--slds-c-badge-text-color, var(--sds-g-color-neutral-base-10, #181818));
-    font-size: var(--slds-c-badge-font-size, var(--sds-g-font-scale-neg-3, 0.75rem));
-    font-weight: var(--sds-g-font-weight-7, 700);
-    line-height: var(--slds-c-badge-font-lineheight, normal);
-    white-space: nowrap;
-    border-width: var(--slds-c-badge-sizing-border, var(--sds-g-sizing-border-1, 1px));
-    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(--sds-g-color-neutral-base-95, #f3f3f3));
-  }
-
-  :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(--sds-g-color-neutral-base-50, #747474)));
-    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(--sds-g-spacing-1, 0.25rem);
-  }
-  
-  :host([data-render-mode="shadow"]) [part="badge"] .slds-badge__icon.slds-badge__icon_right {
-    margin-inline-start: var(--sds-g-spacing-1, 0.25rem);
-  }
-
-  :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(--sds-g-color-neutral-base-50, #747474)));
-    --slds-c-badge-text-color: var(--slds-c-badge-inverse-text-color, var(--slds-g-color-neutral-base-100, var(--sds-g-color-neutral-base-100, #ffffff)));
-  }
-
-  /* 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(--sds-g-color-neutral-base-100, #ffffff)));
-    --slds-c-badge-color-border: var(--slds-c-badge-lightest-color-border, var(--slds-g-color-border-base-1, var(--sds-g-color-neutral-base-90, #e5e5e5)));
-  }
-
-  :host([data-render-mode="shadow"].slds-badge:not(:first-of-type)) {
-    margin-inline-start: var(--sds-g-spacing-2, 0.5rem);
-  }
-}