lightning-base-components 1.18.5-alpha → 1.18.7-alpha

package/src/lightning/buttonStateful/buttonStateful.css

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

package/src/lightning/buttonStateful/buttonStateful.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 {
     normalizeBoolean,
@@ -12,7 +11,7 @@ const DEFAULT_VARIANT = 'neutral';
 /**
  * A button that toggles between states.
  */
-export default class LightningButtonStateful extends LightningShadowBaseClass {
+export default class LightningButtonStateful extends LightningElement {
     static delegatesFocus = true;
 
     _originalVariant = DEFAULT_VARIANT;

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

@@ -5,6 +5,7 @@ const DEBOUNCE_KEY_DOWN = 300;
 export const DEFAULT_CONFIG = {
     navKey: 'F6',
     f6RegionAttribute: 'data-f6-region',
+    f6RegionHighlightClass: 'f6-highlight',
 };
 
 /**
@@ -33,7 +34,7 @@ export const getActiveElement = (element) => {
  * quickly move to designated regions in a page.
  * It handles logic for:
  * - Globally detecting F6 regions (i.e. registered components must have the data attribute stored in config - f6RegionAttribute
- *  in their tag, by default, 'data-f6-region')
+ *   in their tag, by default, 'data-f6-region')
  * - Handling F6 keypresses by focusing and highlighting F6 regions
  * Supported keyboard shortcuts:
  * - Ctrl/Cmd + F6 to move focus to the next available registered region.
@@ -71,10 +72,32 @@ export class F6Controller {
     appendStyleElement() {
         // all F6 regions must be position relative.
         this._styleElement = document.createElement('style');
-        this._styleElement.innerText = `[${this.config.f6RegionAttribute}]:focus-within { position: relative; outline: rgb(94, 158, 214) 3px solid; outline-offset: 3px; z-index: 9999;}`;
+        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.setAttribute('type', 'text/css');
         document.head.appendChild(this._styleElement);
     }
+
+    /**
+     * Clears all regions of outlines.
+     */
+    clearRegionHighlights() {
+        if (!this.regions || !this.regions.length) {
+            return;
+        }
+        this.regions.forEach((region) => {
+            region.classList.remove(this.config.f6RegionHighlightClass);
+        });
+    }
+
+    /**
+     * Outlines the given element with a dashed line.
+     * @param {Element} element, element to highlight
+     */
+    addRegionHighlight(element) {
+        element.classList.add(this.config.f6RegionHighlightClass);
+    }
+
     /**
      * Find the first focusable element inside of the input element.
      * If no focusable element, set the input element to be focusable.
@@ -130,7 +153,9 @@ export class F6Controller {
         if (adjacentRegionIndex === -1) {
             return;
         }
-        this.focusIn(this.regions[adjacentRegionIndex]);
+        const regionToFocus = this.regions[adjacentRegionIndex];
+        this.focusIn(regionToFocus);
+        this.addRegionHighlight(regionToFocus);
     }
 
     /**
@@ -320,6 +345,7 @@ export class F6Controller {
      */
     initialize(config = {}) {
         document.addEventListener('keydown', this._debounceKeyDownHandler);
+        document.addEventListener('click', this.handleClick);
         this.regions = [];
         this.config = {
             ...this.config,
@@ -331,6 +357,7 @@ export class F6Controller {
     /** Removes the event listeners bound in initialize(). */
     cleanUp() {
         document.removeEventListener('keydown', this._debounceKeyDownHandler);
+        document.removeEventListener('click', this.handleClick);
         this._regions = [];
         this._config = DEFAULT_CONFIG;
         this._debounceKeyDownHandler = null;
@@ -340,12 +367,17 @@ export class F6Controller {
         }
     }
 
+    handleClick = () => {
+        this.clearRegionHighlights();
+    };
+
     /**
      * handle document keydown event, move focus to the adjacent region if it detects CTRL/CMD + F6
      * @param {KeyDown} event
      */
 
     handleKeyDown = (event) => {
+        this.clearRegionHighlights();
         const { key, ctrlKey, metaKey } = event;
         if (key === this.config.navKey && (ctrlKey || metaKey)) {
             this.populateRegions();
@@ -371,6 +403,10 @@ export class F6Controller {
 
         return NodeFilter.FILTER_SKIP;
     };
+
+    getConfig() {
+        return Object.freeze(this.config);
+    }
 }
 
 let f6Controller;
@@ -380,3 +416,13 @@ export const createF6Controller = (config) => {
     }
     return f6Controller;
 };
+
+export const getCurrentRegionAttributeName = () => {
+    if (f6Controller) {
+        const config = f6Controller.getConfig();
+        if (config) {
+            return config.f6RegionAttribute;
+        }
+    }
+    return undefined;
+};

package/src/lightning/formattedRichText/formatted-rich-text.slds.css

@@ -1,6 +1,6 @@
 
 :host([data-render-mode="shadow"].slds-rich-text-editor__output) {
-  line-height: var(--sds-g-line-height);
+  line-height: var(--sds-g-font-lineheight, 1.5);
   overflow-wrap: break-word;
   word-wrap: break-word;
   -webkit-hyphens: manual;

package/src/lightning/formattedRichText/formattedRichText.css

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

package/src/lightning/formattedRichText/formattedRichText.html

@@ -1,4 +1,4 @@
 <template>
     <!-- Container for rich text -->
-    <span lwc:dom="manual"></span>
+    <span lwc:dom="manual" part="formatted-rich-text"></span>
 </template>

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,8 @@ 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.
      * @type {boolean}
@@ -58,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;