lightning-base-components 1.18.6-alpha → 1.18.7-alpha

package/src/lightning/calendar/calendar.css

@@ -1,5 +1,5 @@
-@import 'lightning/sldsCommon';
-@import './calendar.slds.css';
+/* @import 'lightning/sldsCommon';
+@import './calendar.slds.css'; */
 
 /**
  * For RTL languages, slds-dropdown_left will have left: 0 swapped with right: 0 which is why we

package/src/lightning/calendar/calendar.js

@@ -3,8 +3,7 @@ import labelNextMonth from '@salesforce/label/LightningDateTimePicker.nextMonth'
 import labelPreviousMonth from '@salesforce/label/LightningDateTimePicker.previousMonth';
 import labelToday from '@salesforce/label/LightningDateTimePicker.today';
 import labelYearSelector from '@salesforce/label/LightningDateTimePicker.yearSelector';
-import { api, track } from 'lwc';
-import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
+import { LightningElement, api, track } from 'lwc';
 import { classSet } from 'lightning/utils';
 import { generateUniqueId } from 'lightning/inputUtils';
 import firstDayOfWeek from '@salesforce/i18n/firstDayOfWeek';
@@ -46,7 +45,7 @@ const JAPANESE_CALENDAR_YEARS = [
     { key: 'M', year: 1868, label: '\u660e\u6cbb' }, // Meiji:   1/1/1868
 ];
 
-export default class LightningCalendar extends LightningShadowBaseClass {
+export default class LightningCalendar extends LightningElement {
     @track calendarYear = null;
     @track calendarMonth = null;
 
@@ -94,7 +93,6 @@ export default class LightningCalendar extends LightningShadowBaseClass {
     }
 
     connectedCallback() {
-        super.connectedCallback();
         this._connected = true;
 
         this.todayDate = getCurrentDateString();

package/src/lightning/card/card.css

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

package/src/lightning/card/card.js

@@ -1,5 +1,4 @@
-import { api } from 'lwc';
-import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
+import { LightningElement, api } from 'lwc';
 import { classSet } from 'lightning/utils';
 import { isNarrow, isBase } from './utils';
 import { isHeadingLevelValid } from 'lightning/utilsPrivate';
@@ -15,7 +14,7 @@ import { isHeadingLevelValid } from 'lightning/utilsPrivate';
  * For example, the footer can display a "View All" link to navigate to a list view.
  * @slot default Placeholder for your content in the card body.
  */
-export default class LightningCard extends LightningShadowBaseClass {
+export default class LightningCard extends LightningElement {
     /**
      * The title can include text, and is displayed in the header.
      * To include additional markup or another component, use the title slot.

package/src/lightning/colorPickerCustom/colorPickerCustom.css

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

package/src/lightning/colorPickerCustom/colorPickerCustom.js

@@ -9,8 +9,7 @@ import labelHueInput from '@salesforce/label/LightningColorPicker.hueInput';
 import labelRInput from '@salesforce/label/LightningColorPicker.rInput';
 import labelRedAbbr from '@salesforce/label/LightningColorPicker.redAbbr';
 import formFactorPropertyName from '@salesforce/client/formFactor';
-import { api, track } from 'lwc';
-import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
+import { LightningElement, api, track } from 'lwc';
 import { keyCodes } from 'lightning/utilsPrivate';
 import { generateUniqueId, getErrorMessage } from 'lightning/inputUtils';
 import {
@@ -37,7 +36,7 @@ const i18n = {
 
 const CANVAS = { x: 198, y: 80 };
 
-export default class LightningColorPickerCustom extends LightningShadowBaseClass {
+export default class LightningColorPickerCustom extends LightningElement {
     @track _hueValue = null;
     @track
     _rgb = {

package/src/lightning/colorPickerPanel/colorPickerPanel.css

@@ -1,6 +1,6 @@
-@import 'lightning/sldsCommon';
+/* @import 'lightning/sldsCommon';
 @import './color-picker-panel.slds.css';
-@import './popover.slds.css';
+@import './popover.slds.css'; */
 
 /* Fix for footer button centering issue, for details see: W-11543875
  *

package/src/lightning/colorPickerPanel/colorPickerPanel.js

@@ -2,8 +2,7 @@ import labelCancelButton from '@salesforce/label/LightningColorPicker.cancelButt
 import labelCustomTab from '@salesforce/label/LightningColorPickerPanel.customTab';
 import labelDefaultTab from '@salesforce/label/LightningColorPickerPanel.defaultTab';
 import labelDoneButton from '@salesforce/label/LightningColorPicker.doneButton';
-import { api, track } from 'lwc';
-import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
+import { LightningElement, api, track } from 'lwc';
 import { classSet } from 'lightning/utils';
 import { keyCodes } from 'lightning/utilsPrivate';
 
@@ -15,14 +14,13 @@ const i18n = {
 };
 
 const DEFAULT_COLOR = '#000000';
-export default class LightningColorPickerPanel extends LightningShadowBaseClass {
+export default class LightningColorPickerPanel extends LightningElement {
     @api currentColor;
 
     @track _isCustomTabActive = false;
     @track _selectedColor = null;
 
     connectedCallback() {
-        super.connectedCallback();
         this._selectedColor = this.currentColor || DEFAULT_COLOR;
     }
 

package/src/lightning/combobox/combobox.css

@@ -1,6 +1,6 @@
-@import 'lightning/sldsCommon';
+/* @import 'lightning/sldsCommon';
 @import './form-element.slds.css';
-@import './combobox.slds.css';
+@import './combobox.slds.css'; */
 
 :host {
     display: block;

package/src/lightning/combobox/combobox.js

@@ -1,8 +1,7 @@
 import labelRequired from '@salesforce/label/LightningControl.required';
 import labelPlaceholder from '@salesforce/label/LightningCombobox.placeholder';
 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,
@@ -30,7 +29,7 @@ const i18n = {
  * A widget that provides an input field that is readonly,
  * accompanied by a dropdown list of selectable options.
  */
-export default class LightningCombobox extends LightningShadowBaseClass {
+export default class LightningCombobox extends LightningElement {
     static delegatesFocus = true;
     static validationOptOut = ['class'];
 
@@ -96,7 +95,6 @@ export default class LightningCombobox extends LightningShadowBaseClass {
     }
 
     connectedCallback() {
-        super.connectedCallback();
         this.classList.add('slds-form-element');
         this.updateClassList();
         this.interactingState = new InteractingState();

package/src/lightning/datepicker/datepicker.css

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

package/src/lightning/datepicker/datepicker.js

@@ -7,8 +7,7 @@ import labelMinAndMaxRangeMessage from '@salesforce/label/LightningDateTimePicke
 import labelRequired from '@salesforce/label/LightningControl.required';
 import labelSelectDateFor from '@salesforce/label/LightningDateTimePicker.selectDateFor';
 import labelHelpTextAlternativeText from '@salesforce/label/LightningInput.helptextAlternativeText';
-import { api, track } from 'lwc';
-import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
+import { LightningElement, api, track } from 'lwc';
 import {
     normalizeISODate,
     parseFormattedDate,
@@ -64,7 +63,7 @@ const DATE_STYLE = {
     LONG: 'long',
 };
 
-export default class LightningDatePicker extends LightningShadowBaseClass {
+export default class LightningDatePicker extends LightningElement {
     static delegatesFocus = true;
 
     @track _disabled = false;
@@ -382,7 +381,6 @@ export default class LightningDatePicker extends LightningShadowBaseClass {
     }
 
     connectedCallback() {
-        super.connectedCallback();
         this.connected = true;
 
         this.keyboardInterface = this.datepickerKeyboardInterface();

package/src/lightning/datetimepicker/datetimepicker.css

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

package/src/lightning/datetimepicker/datetimepicker.js

@@ -4,8 +4,7 @@ import labelRangeUnderflow from '@salesforce/label/LightningDateTimePicker.range
 import labelTime from '@salesforce/label/LightningDateTimePicker.timeLabel';
 import labelHelpTextAlternativeText from '@salesforce/label/LightningInput.helptextAlternativeText';
 import sfTimeZone from '@salesforce/i18n/timeZone';
-import { api, track } from 'lwc';
-import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
+import { LightningElement, api, track } from 'lwc';
 import { classSet, formatLabel } from 'lightning/utils';
 import {
     normalizeBoolean,
@@ -35,7 +34,7 @@ const i18n = {
     helpTextAlternativeText: labelHelpTextAlternativeText,
 };
 
-export default class LightningDateTimePicker extends LightningShadowBaseClass {
+export default class LightningDateTimePicker extends LightningElement {
     static delegatesFocus = true;
 
     @track _disabled = false;
@@ -410,7 +409,6 @@ export default class LightningDateTimePicker extends LightningShadowBaseClass {
     }
 
     connectedCallback() {
-        super.connectedCallback();
         this.connected = true;
 
         // we set the initial values here in order to make sure timezone is available.

package/src/lightning/dualListbox/dualListbox.css

@@ -1,7 +1,7 @@
-@import 'lightning/sldsCommon';
+/* @import 'lightning/sldsCommon';
 @import "./form-element.slds.css";
 @import './listbox.slds.css';
-@import './dual-listbox.slds.css';
+@import './dual-listbox.slds.css'; */
 
 :host {
     display: block;

package/src/lightning/dualListbox/dualListbox.js

@@ -17,8 +17,7 @@ import labelLoadingText from '@salesforce/label/LightningCombobox.loadingText';
 import labelMovedOptionsSingular from '@salesforce/label/LightningDualListbox.movedOptionsSingular';
 import labelMovedOptionsPlural from '@salesforce/label/LightningDualListbox.movedOptionsPlural';
 import labelHelpTextAlternativeText from '@salesforce/label/LightningInput.helptextAlternativeText';
-import { api, track } from 'lwc';
-import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
+import { LightningElement, api, track } from 'lwc';
 import { handleKeyDownOnOption } from './keyboard';
 import { classSet, formatLabel } from 'lightning/utils';
 import {
@@ -60,7 +59,7 @@ const i18n = {
 /**
  * A pair of listboxes that enables multiple options to be selected and reordered.
  */
-export default class LightningDualListbox extends LightningShadowBaseClass {
+export default class LightningDualListbox extends LightningElement {
     // Component attributes
     /**
      * Label for the source options listbox.
@@ -355,7 +354,6 @@ export default class LightningDualListbox extends LightningShadowBaseClass {
     }
 
     connectedCallback() {
-        super.connectedCallback();
         this.classList.add('slds-form-element');
         this.updateClassList();
         this.keyboardInterface = this.selectKeyboardInterface();

package/src/lightning/dynamicIcon/dynamicIcon.js

@@ -1,5 +1,4 @@
-import { api } from 'lwc';
-import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
+import { LightningElement, api } from 'lwc';
 import { classSet } from 'lightning/utils';
 import { normalizeString as normalize } from 'lightning/utilsPrivate';
 import eqHtml from './eq.html';
@@ -13,7 +12,7 @@ import defaultHtml from './default.html';
 /**
  * Represents various animated icons with different states.
  */
-export default class LightningDynamicIcon extends LightningShadowBaseClass {
+export default class LightningDynamicIcon extends LightningElement {
     /**
      * The alternative text used to describe the dynamic icon.
      * This text should describe what's happening.

package/src/lightning/dynamicIcon/ellie.css

@@ -1 +1 @@
-@import './dynamic-icon-ellie.slds.css';
+/* @import './dynamic-icon-ellie.slds.css'; */

package/src/lightning/dynamicIcon/eq.css

@@ -1 +1 @@
-@import './dynamic-icon-eq.slds.css';
+/* @import './dynamic-icon-eq.slds.css'; */

package/src/lightning/dynamicIcon/score.css

@@ -1 +1 @@
-@import './dynamic-icon-score.slds.css';
+/* @import './dynamic-icon-score.slds.css'; */

package/src/lightning/dynamicIcon/strength.css

@@ -1 +1 @@
-@import './dynamic-icon-strength.slds.css';
+/* @import './dynamic-icon-strength.slds.css'; */

package/src/lightning/dynamicIcon/trend.css

@@ -1 +1 @@
-@import './dynamic-icon-trend.slds.css';
+/* @import './dynamic-icon-trend.slds.css'; */

package/src/lightning/dynamicIcon/waffle.css

@@ -1 +1 @@
-@import './dynamic-icon-waffle.slds.css';
+/* @import './dynamic-icon-waffle.slds.css'; */

package/src/lightning/f6Controller/f6Controller.js

@@ -73,7 +73,7 @@ export class F6Controller {
         // all F6 regions must be position relative.
         this._styleElement = document.createElement('style');
         const selector = `[${this.config.f6RegionAttribute}].${this.config.f6RegionHighlightClass}`;
-        this._styleElement.innerText = `${selector} { position: relative; }  ${selector}::after { width: 100%; height: 100%; content: ''; outline: rgb(94, 158, 214) 3px solid; outline-offset: -3px; position: absolute; top: 0; left: 0; z-index: 9999; }`;
+        this._styleElement.innerText = `${selector} { position: relative; } ${selector}::after { width: 100%; height: 100%; content: ''; outline: rgb(94, 158, 214) 3px solid; outline-offset: -3px; position: absolute; top: 0; left: 0; z-index: 9999; }`;
         this._styleElement.setAttribute('type', 'text/css');
         document.head.appendChild(this._styleElement);
     }

package/src/lightning/formattedRichText/formattedRichText.css

@@ -1,3 +1,3 @@
-@import 'lightning/sldsCommon';
+/* @import 'lightning/sldsCommon';
 @import './formatted-rich-text.slds.css';
-@import 'lightning/sldsUtilsThemes';
+@import 'lightning/sldsUtilsThemes'; */

package/src/lightning/formattedRichText/formattedRichText.js

@@ -1,5 +1,4 @@
-import { api } from 'lwc';
-import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
+import { LightningElement, api } from 'lwc';
 import sanitizeHTML from 'lightning/purifyLib';
 import { linkify } from './linkify';
 import { richTextConfig } from './richTextConfig';
@@ -13,7 +12,7 @@ import {
  * Displays rich text that's formatted with allowed tags and attributes.
  * Other tags and attributes are removed and only their text content is displayed.
  */
-export default class LightningFormattedRichText extends LightningShadowBaseClass {
+export default class LightningFormattedRichText extends LightningElement {
     static validationOptOut = ['class'];
     /**
      * If present, the component does not create links in the rich text.
@@ -59,7 +58,6 @@ export default class LightningFormattedRichText extends LightningShadowBaseClass
     }
 
     connectedCallback() {
-        super.connectedCallback();
         this.classList.add('slds-rich-text-editor__output');
         this.connected = true;
     }

package/src/lightning/formattedText/formattedText.css

@@ -1 +1 @@
-@import 'lightning/sldsCommon'
+/* @import 'lightning/sldsCommon' */

package/src/lightning/formattedText/formattedText.js

@@ -1,5 +1,4 @@
-import { api, track } from 'lwc';
-import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
+import { LightningElement, api, track } from 'lwc';
 import {
     normalizeBoolean,
     parseToFormattedLinkifiedParts,
@@ -9,7 +8,7 @@ import {
 /**
  * Displays text, replaces newlines with line breaks, and linkifies if requested.
  */
-export default class FormattedText extends LightningShadowBaseClass {
+export default class FormattedText extends LightningElement {
     /**
      * Sets the text to display.
      * @type {string}

package/src/lightning/helptext/helptext.css

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

package/src/lightning/helptext/helptext.js

@@ -1,6 +1,5 @@
 import labelButtonAlternativeText from '@salesforce/label/LightningHelptext.buttonAlternativeText';
-import { api, track } from 'lwc';
-import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
+import { LightningElement, api, track } from 'lwc';
 import { isValidName } from 'lightning/iconUtils';
 import { normalizeString } from 'lightning/utilsPrivate';
 import { TooltipType } from 'lightning/tooltipLibrary';
@@ -12,7 +11,7 @@ const DEFAULT_ICON_VARIANT = 'bare';
 /**
  * An icon with a text popover used for tooltips.
  */
-export default class LightningHelptext extends LightningShadowBaseClass {
+export default class LightningHelptext extends LightningElement {
     // TODO: future refactoring to remove this.state convention
     @track
     state = {

package/src/lightning/icon/icon.css

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

package/src/lightning/icon/icon.js

@@ -1,5 +1,4 @@
-import { api } from 'lwc';
-import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
+import { LightningElement, api } from 'lwc';
 import {
     classListMutation,
     normalizeString,
@@ -17,9 +16,7 @@ import { normalizeVariant } from './util';
 /**
  * Represents a visual element that provides context and enhances usability.
  */
-export default class LightningIcon extends LightningShadowBaseClass {
-    static validationOptOut = ['class'];
-
+export default class LightningIcon extends LightningElement {
     _src;
     _privateIconName;
     _iconName;
@@ -162,7 +159,6 @@ export default class LightningIcon extends LightningShadowBaseClass {
     }
 
     connectedCallback() {
-        super.connectedCallback();
         this.classList.add('slds-icon_container');
     }
 
@@ -176,10 +172,7 @@ export default class LightningIcon extends LightningShadowBaseClass {
         const name = getName(iconName);
         const color = iconColors[category] && iconColors[category][name];
         if (color) {
-            this.setAttribute(
-                'style',
-                `--sds-c-icon-color-background: var(--slds-c-icon-color-background, ${color})`
-            );
+            this.template.host.style = `--sds-c-icon-color-background: var(--slds-c-icon-color-background, ${color});`;
         }
     }
 }

package/src/lightning/input/__examples__/checkboxbutton/checkboxbutton.html

@@ -3,7 +3,6 @@
         <h2 class="header">Input Checkbox Button</h2>
         <lightning-input type="checkbox-button" label="Input One" name="input1"></lightning-input>
         <lightning-input type="checkbox-button" label="Input Two" name="input2" checked required></lightning-input>
-        <lightning-input type="checkbox-button" label="Input Three" name="input3" disabled></lightning-input>
-        <lightning-input type="checkbox-button" label="Input Four" name="input3" checked disabled></lightning-input>
+        <lightning-input type="checkbox-button" label="Input Three" name="input3" checked disabled></lightning-input>
     </div>
 </template>

package/src/lightning/input/__examples__/checkboxbutton/checkboxbutton.js

@@ -1,3 +1,3 @@
 import { LightningElement } from 'lwc';
 
-export default class InputCheckboxButton extends LightningElement {}
+export default class InputCheckboxBasic extends LightningElement {}

package/src/lightning/input/__examples__/number/number.html

@@ -19,6 +19,11 @@
         <lightning-input type="number" name="input8" required value="5" label="Required number field with a maximum value of 99" max="99"></lightning-input>
     </div>
 
+    <div>
+        <h2>Input Counter</h2>
+        <lightning-input type="counter" value="123" label="Input with a Counter"></lightning-input>
+    </div>
+
     <div>
         <h2>Live Input Number</h2>
         <lightning-input type="number" name="seven" value={amount} onchange={handleAmountChange} placeholder="type the number of items..." label="Enter a number" ></lightning-input>

package/src/lightning/input/input.css

@@ -1,5 +1,7 @@
-@import 'lightning/sldsCommon';
-@import './form-element.slds.css';
+/* @import 'lightning/sldsCommon';
+@import './input-text.slds.css';
+@import './input-checkbox.slds.css';
+@import './form-element.slds.css'; */
 
 :host {
     display: block;