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

package/src/lightning/datepicker/input-text.slds.css

@@ -102,7 +102,7 @@
    /**
    * Input Text
    */
-    :host([data-render-mode="shadow"]) [part~='input-text'] {
+    :host([data-render-mode="shadow"]) [part='input-text'] {
         /* Host reassignments to composed slds-icon */
         --slds-c-icon-color-foreground: var(
             --slds-c-inputtext-icon-color-foreground,
@@ -148,23 +148,23 @@
    /**
    * Input Container
    */
-    :host([data-render-mode="shadow"]) [part~='input-container'] {
+    :host([data-render-mode="shadow"]) [part='input-container'] {
         flex: 1 0 100%;
         align-items: stretch;
     }
 
-    :host([data-render-mode="shadow"]) [part~='input-container'][type~='range'] {
+    :host([data-render-mode="shadow"]) [part='input-container'][type~='range'] {
         border: none;
         display: inline-block;
     }
 
-    :host([data-render-mode="shadow"]) [part~='input'][type~='range'] {
+    :host([data-render-mode="shadow"]) [part='input'][type~='range'] {
         min-height: calc(1.875rem + (1px * 2));
         margin: 0;
     }
 
-    :host([data-render-mode="shadow"]) [part~='input-container'][type~='range']:focus-within,:host([data-render-mode="shadow"]) 
-    [part~='input-container'][type~='range']:active {
+    :host([data-render-mode="shadow"]) [part='input-container'][type~='range']:focus-within,:host([data-render-mode="shadow"]) 
+    [part='input-container'][type~='range']:active {
         --sds-c-inputtext-color-border: var(--sds-g-color-brand-base-60, #1b96ff);
         --sds-c-inputtext-shadow: 0 0 3px var(--sds-g-color-brand-base-50, #0176d3);
         --sds-c-inputtext-color-background: var(--sds-g-color-neutral-base-100, #ffffff);
@@ -177,7 +177,7 @@
    /**
    * Input
    */
-    :host([data-render-mode="shadow"]) [part~='input'] {
+    :host([data-render-mode="shadow"]) [part='input'] {
         padding-inline-start: var(
             --slds-c-inputtext-spacing-inline-start,
             var(--sds-g-spacing-3, 0.75rem));
@@ -191,8 +191,8 @@
    /**
    * Focus / active State
    */
-    :host([data-render-mode="shadow"]) [part~="input-container"]:focus-within,:host([data-render-mode="shadow"]) 
-    [part~="input-container"]:active {
+    :host([data-render-mode="shadow"]) [part="input-container"]:focus-within,:host([data-render-mode="shadow"]) 
+    [part="input-container"]:active {
       --sds-c-inputtext-color-border: var(--sds-g-color-brand-base-60, #1b96ff);
       --sds-c-inputtext-shadow: 0 0 3px var(--sds-g-color-brand-base-50, #0176d3);
       --sds-c-inputtext-color-background: var(--sds-g-color-neutral-base-100, #ffffff);
@@ -203,7 +203,7 @@
    /**
    * Read Only State
    */
-    :host([data-render-mode="shadow"][readonly]) [part~='input-text'] {
+    :host([data-render-mode="shadow"][readonly]) [part='input-text'] {
         --sds-c-inputtext-spacing-inline-start-readonly: 0;
         --sds-c-inputtext-color-border-focus: transparent;
         --slds-c-inputtext-color-border: transparent;
@@ -218,7 +218,7 @@
    * tied to :host([aria-invalid]) which this subsystem does not use. Instead, it
    * uses :host([invalid]).
    */
-    :host([data-render-mode="shadow"][invalid]) [part~='input-text'] {
+    :host([data-render-mode="shadow"][invalid]) [part='input-text'] {
         --sds-c-inputtext-shadow: 0 0 0 var(--sds-g-sizing-border-1, 1px) inset
             var(--sds-g-color-error-base-50, #ea001e);
         --slds-c-inputtext-color-border: var(--sds-g-color-error-base-50, #ea001e);
@@ -231,7 +231,7 @@
    * The following styling hooks are included in SDS and need to be reassigned
    * here to prevent a bug with the focus state border and box-shadow
    */
-    :host([data-render-mode="shadow"][invalid]) [part~='input-container']:focus-within {
+    :host([data-render-mode="shadow"][invalid]) [part='input-container']:focus-within {
       --sds-c-inputtext-shadow:
         var(--sds-g-color-error-base-50, #ea001e) 0 0 0 var(--sds-g-sizing-border-1, 1px) inset,
         0 0 var(--sds-g-sizing-border-3, 3px) var(--sds-g-color-brand-base-50, #0176d3);
@@ -243,7 +243,7 @@
    *
    * Both parts form the visible form control.
    */
-    :host([data-render-mode="shadow"][disabled]) [part~='input-container'],:host([data-render-mode="shadow"][disabled]) [part~='input'] {
+    :host([data-render-mode="shadow"][disabled]) [part='input-container'],:host([data-render-mode="shadow"][disabled]) [part='input'] {
         cursor: not-allowed;
         --sds-c-inputtext-color-background: var(--sds-g-color-neutral-base-95, #f3f3f3);
         --sds-c-inputtext-color-border: var(--sds-g-color-neutral-base-80, #c9c9c9);
@@ -253,10 +253,10 @@
     /**
    * Label
    *
-   * Add [part~='input-text'] to increase specificity and
-   * avoid collisions with other components using [part~='label'] (e.g. slds-input-checkbox)
+   * Add [part='input-text'] to increase specificity and
+   * avoid collisions with other components using [part='label'] (e.g. slds-input-checkbox)
    */
-    :host([data-render-mode="shadow"]) [part~='input-text'] [part~='label'] {
+    :host([data-render-mode="shadow"]) [part='input-text'] [part='label'] {
         padding-block-start: var(--sds-g-spacing-1, 0.25rem);
         padding-inline-end: var(--sds-g-spacing-2, 0.5rem);
         color: var(
@@ -280,7 +280,7 @@
    * so we don't add spacing to other icons composed in the component, e.g.,
    * the icon in the inline help text.
    */
-    :host([data-render-mode="shadow"]) [part~='start'] {
+    :host([data-render-mode="shadow"]) [part='start'] {
         --slds-c-icon-spacing-inline-end: var(--sds-g-spacing-2, 0.5rem);
     }
 
@@ -297,11 +297,11 @@
    * Ref: https://github.com/salesforce-ux/design-system-internal/blob/240-winter-23/ui/components/form-element/horizontal/_index.scss#L63
    */
     @media (min-width: 48em) {
-        :host([data-render-mode="shadow"][variant~='label-inline']) [part~='input-text'] {
+        :host([data-render-mode="shadow"][variant~='label-inline']) [part='input-text'] {
             display: block;
         }
 
-        :host([data-render-mode="shadow"][variant~='label-inline']) [part~='label'] {
+        :host([data-render-mode="shadow"][variant~='label-inline']) [part='label'] {
             float: left;
 
             /* TODO: Get rid of these magic numbers */
@@ -309,11 +309,11 @@
             padding-block-start: var(--sds-g-spacing-1, 0.25rem);
         }
 
-        :host([data-render-mode="shadow"][variant~='label-inline']) [part~='input-container'] {
+        :host([data-render-mode="shadow"][variant~='label-inline']) [part='input-container'] {
             margin-inline-start: 33%;
         }
 
-        :host([data-render-mode="shadow"][variant~='label-inline']) [part~='inline-help'] {
+        :host([data-render-mode="shadow"][variant~='label-inline']) [part='inline-help'] {
             float: left;
             padding-block-start: var(--sds-g-spacing-1, 0.25rem);
         }
@@ -323,7 +323,7 @@
         left: var(--sds-g-spacing-3, 0.75rem);
         fill: var(--slds-g-color-neutral-base-50, #747474);
     }
-    
+
     :host([data-render-mode="shadow"]) .slds-input-has-icon .slds-button_icon {
         background-color: transparent;
     }
@@ -375,7 +375,7 @@
         --slds-c-inputtext-spacing-inline-start: var(--sds-g-spacing-6, 2rem);
         --slds-c-inputtext-spacing-inline-end: var(--sds-g-spacing-6, 2rem);
     }
-   
+
   /**
  * A temporarily baked-in utility class until SLDS gets a proper utility package.
  *

package/src/lightning/datetimepicker/form-element.slds.css

@@ -278,4 +278,12 @@
     :host([data-render-mode="shadow"]) .slds-form-element_address .slds-form-element__row {
       align-items: flex-end;
     }
+
+    /* --------------------------------------- */
+
+    /* FORM ELEMENT: HIDDEN */
+
+    :host([data-render-mode="shadow"][variant~='label-hidden']) .slds-form-element__label {
+      display: none
+  }
 }

package/src/lightning/datetimepicker/input-text.slds.css

@@ -102,7 +102,7 @@
    /**
    * Input Text
    */
-    :host([data-render-mode="shadow"]) [part~='input-text'] {
+    :host([data-render-mode="shadow"]) [part='input-text'] {
         /* Host reassignments to composed slds-icon */
         --slds-c-icon-color-foreground: var(
             --slds-c-inputtext-icon-color-foreground,
@@ -148,23 +148,23 @@
    /**
    * Input Container
    */
-    :host([data-render-mode="shadow"]) [part~='input-container'] {
+    :host([data-render-mode="shadow"]) [part='input-container'] {
         flex: 1 0 100%;
         align-items: stretch;
     }
 
-    :host([data-render-mode="shadow"]) [part~='input-container'][type~='range'] {
+    :host([data-render-mode="shadow"]) [part='input-container'][type~='range'] {
         border: none;
         display: inline-block;
     }
 
-    :host([data-render-mode="shadow"]) [part~='input'][type~='range'] {
+    :host([data-render-mode="shadow"]) [part='input'][type~='range'] {
         min-height: calc(1.875rem + (1px * 2));
         margin: 0;
     }
 
-    :host([data-render-mode="shadow"]) [part~='input-container'][type~='range']:focus-within,:host([data-render-mode="shadow"]) 
-    [part~='input-container'][type~='range']:active {
+    :host([data-render-mode="shadow"]) [part='input-container'][type~='range']:focus-within,:host([data-render-mode="shadow"]) 
+    [part='input-container'][type~='range']:active {
         --sds-c-inputtext-color-border: var(--sds-g-color-brand-base-60, #1b96ff);
         --sds-c-inputtext-shadow: 0 0 3px var(--sds-g-color-brand-base-50, #0176d3);
         --sds-c-inputtext-color-background: var(--sds-g-color-neutral-base-100, #ffffff);
@@ -177,7 +177,7 @@
    /**
    * Input
    */
-    :host([data-render-mode="shadow"]) [part~='input'] {
+    :host([data-render-mode="shadow"]) [part='input'] {
         padding-inline-start: var(
             --slds-c-inputtext-spacing-inline-start,
             var(--sds-g-spacing-3, 0.75rem));
@@ -191,8 +191,8 @@
    /**
    * Focus / active State
    */
-    :host([data-render-mode="shadow"]) [part~="input-container"]:focus-within,:host([data-render-mode="shadow"]) 
-    [part~="input-container"]:active {
+    :host([data-render-mode="shadow"]) [part="input-container"]:focus-within,:host([data-render-mode="shadow"]) 
+    [part="input-container"]:active {
       --sds-c-inputtext-color-border: var(--sds-g-color-brand-base-60, #1b96ff);
       --sds-c-inputtext-shadow: 0 0 3px var(--sds-g-color-brand-base-50, #0176d3);
       --sds-c-inputtext-color-background: var(--sds-g-color-neutral-base-100, #ffffff);
@@ -203,7 +203,7 @@
    /**
    * Read Only State
    */
-    :host([data-render-mode="shadow"][readonly]) [part~='input-text'] {
+    :host([data-render-mode="shadow"][readonly]) [part='input-text'] {
         --sds-c-inputtext-spacing-inline-start-readonly: 0;
         --sds-c-inputtext-color-border-focus: transparent;
         --slds-c-inputtext-color-border: transparent;
@@ -218,7 +218,7 @@
    * tied to :host([aria-invalid]) which this subsystem does not use. Instead, it
    * uses :host([invalid]).
    */
-    :host([data-render-mode="shadow"][invalid]) [part~='input-text'] {
+    :host([data-render-mode="shadow"][invalid]) [part='input-text'] {
         --sds-c-inputtext-shadow: 0 0 0 var(--sds-g-sizing-border-1, 1px) inset
             var(--sds-g-color-error-base-50, #ea001e);
         --slds-c-inputtext-color-border: var(--sds-g-color-error-base-50, #ea001e);
@@ -231,7 +231,7 @@
    * The following styling hooks are included in SDS and need to be reassigned
    * here to prevent a bug with the focus state border and box-shadow
    */
-    :host([data-render-mode="shadow"][invalid]) [part~='input-container']:focus-within {
+    :host([data-render-mode="shadow"][invalid]) [part='input-container']:focus-within {
       --sds-c-inputtext-shadow:
         var(--sds-g-color-error-base-50, #ea001e) 0 0 0 var(--sds-g-sizing-border-1, 1px) inset,
         0 0 var(--sds-g-sizing-border-3, 3px) var(--sds-g-color-brand-base-50, #0176d3);
@@ -243,7 +243,7 @@
    *
    * Both parts form the visible form control.
    */
-    :host([data-render-mode="shadow"][disabled]) [part~='input-container'],:host([data-render-mode="shadow"][disabled]) [part~='input'] {
+    :host([data-render-mode="shadow"][disabled]) [part='input-container'],:host([data-render-mode="shadow"][disabled]) [part='input'] {
         cursor: not-allowed;
         --sds-c-inputtext-color-background: var(--sds-g-color-neutral-base-95, #f3f3f3);
         --sds-c-inputtext-color-border: var(--sds-g-color-neutral-base-80, #c9c9c9);
@@ -253,10 +253,10 @@
     /**
    * Label
    *
-   * Add [part~='input-text'] to increase specificity and
-   * avoid collisions with other components using [part~='label'] (e.g. slds-input-checkbox)
+   * Add [part='input-text'] to increase specificity and
+   * avoid collisions with other components using [part='label'] (e.g. slds-input-checkbox)
    */
-    :host([data-render-mode="shadow"]) [part~='input-text'] [part~='label'] {
+    :host([data-render-mode="shadow"]) [part='input-text'] [part='label'] {
         padding-block-start: var(--sds-g-spacing-1, 0.25rem);
         padding-inline-end: var(--sds-g-spacing-2, 0.5rem);
         color: var(
@@ -280,7 +280,7 @@
    * so we don't add spacing to other icons composed in the component, e.g.,
    * the icon in the inline help text.
    */
-    :host([data-render-mode="shadow"]) [part~='start'] {
+    :host([data-render-mode="shadow"]) [part='start'] {
         --slds-c-icon-spacing-inline-end: var(--sds-g-spacing-2, 0.5rem);
     }
 
@@ -297,11 +297,11 @@
    * Ref: https://github.com/salesforce-ux/design-system-internal/blob/240-winter-23/ui/components/form-element/horizontal/_index.scss#L63
    */
     @media (min-width: 48em) {
-        :host([data-render-mode="shadow"][variant~='label-inline']) [part~='input-text'] {
+        :host([data-render-mode="shadow"][variant~='label-inline']) [part='input-text'] {
             display: block;
         }
 
-        :host([data-render-mode="shadow"][variant~='label-inline']) [part~='label'] {
+        :host([data-render-mode="shadow"][variant~='label-inline']) [part='label'] {
             float: left;
 
             /* TODO: Get rid of these magic numbers */
@@ -309,11 +309,11 @@
             padding-block-start: var(--sds-g-spacing-1, 0.25rem);
         }
 
-        :host([data-render-mode="shadow"][variant~='label-inline']) [part~='input-container'] {
+        :host([data-render-mode="shadow"][variant~='label-inline']) [part='input-container'] {
             margin-inline-start: 33%;
         }
 
-        :host([data-render-mode="shadow"][variant~='label-inline']) [part~='inline-help'] {
+        :host([data-render-mode="shadow"][variant~='label-inline']) [part='inline-help'] {
             float: left;
             padding-block-start: var(--sds-g-spacing-1, 0.25rem);
         }
@@ -323,7 +323,7 @@
         left: var(--sds-g-spacing-3, 0.75rem);
         fill: var(--slds-g-color-neutral-base-50, #747474);
     }
-    
+
     :host([data-render-mode="shadow"]) .slds-input-has-icon .slds-button_icon {
         background-color: transparent;
     }
@@ -375,7 +375,7 @@
         --slds-c-inputtext-spacing-inline-start: var(--sds-g-spacing-6, 2rem);
         --slds-c-inputtext-spacing-inline-end: var(--sds-g-spacing-6, 2rem);
     }
-   
+
   /**
  * A temporarily baked-in utility class until SLDS gets a proper utility package.
  *

package/src/lightning/dualListbox/form-element.slds.css

@@ -278,4 +278,12 @@
     :host([data-render-mode="shadow"]) .slds-form-element_address .slds-form-element__row {
       align-items: flex-end;
     }
+
+    /* --------------------------------------- */
+
+    /* FORM ELEMENT: HIDDEN */
+
+    :host([data-render-mode="shadow"][variant~='label-hidden']) .slds-form-element__label {
+      display: none
+  }
 }

package/src/lightning/f6Controller/f6Controller.js

@@ -2,6 +2,11 @@ import { debounce } from 'lightning/inputUtils';
 import { findAllTabbableElements } from 'lightning/focusUtils';
 const DEBOUNCE_KEY_DOWN = 300;
 
+/**
+ * The configuration for the F6 controller
+ * - navKey: the key used as a trigger for navigating between regions
+ * - f6RegionAttribute: attribute that defines f6 regions
+ */
 export const DEFAULT_CONFIG = {
     navKey: 'F6',
     f6RegionAttribute: 'data-f6-region',
@@ -34,7 +39,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, '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.
@@ -55,18 +60,15 @@ export class F6Controller {
     _styleElement;
 
     /**
-     * Creates a F6Controller with the given configuration.
-     * @param {Object} config - a configuration object
-     * - config.navKey: the key used as a trigger for navigating between regions
-     * - config.f6RegionAttribute: attribute that defines f6 regions
+     * Creates a F6Controller
      */
-    constructor(config = {}) {
+    constructor() {
         // debounce function for handling keydown event
         this._debounceKeyDownHandler = debounce(
             this.handleKeyDown.bind(this),
             DEBOUNCE_KEY_DOWN
         );
-        this.initialize(config);
+        this.initialize();
     }
 
     appendStyleElement() {
@@ -327,30 +329,37 @@ export class F6Controller {
      */
     populateRegions() {
         this.regions = [];
+        this.shadowTreeWalker(document.body);
+    }
 
+    /**
+     * Creates a tree walker from the given root and through
+     * the shadow DOM adding any F6 regions found
+     * @param {Element} root - element for tree walker to start from
+     */
+    shadowTreeWalker(root) {
         const treeWalker = document.createTreeWalker(
-            document.body,
+            root,
             NodeFilter.SHOW_ELEMENT,
-            this.elementFilter,
-            false
+            this.elementFilter
         );
 
         while (treeWalker.nextNode()) {
-            this.regions.push(treeWalker.currentNode);
+            if (treeWalker.currentNode.shadowRoot) {
+                this.shadowTreeWalker(treeWalker.currentNode.shadowRoot);
+            } else {
+                this.regions.push(treeWalker.currentNode);
+            }
         }
     }
 
     /**
      * Add document event listeners to handling all the F6 related interations
      */
-    initialize(config = {}) {
+    initialize() {
         document.addEventListener('keydown', this._debounceKeyDownHandler);
         document.addEventListener('click', this.handleClick);
         this.regions = [];
-        this.config = {
-            ...this.config,
-            ...config,
-        };
         this.appendStyleElement();
     }
 
@@ -359,7 +368,6 @@ export class F6Controller {
         document.removeEventListener('keydown', this._debounceKeyDownHandler);
         document.removeEventListener('click', this.handleClick);
         this._regions = [];
-        this._config = DEFAULT_CONFIG;
         this._debounceKeyDownHandler = null;
         if (this._styleElement) {
             document.head.removeChild(this._styleElement);
@@ -394,9 +402,10 @@ export class F6Controller {
         }
 
         if (
-            element.matches(`*[${this.config.f6RegionAttribute}]`) &&
-            this.isVisible(element) &&
-            !this.isEmpty(element)
+            (element.matches(`*[${this.config.f6RegionAttribute}]`) &&
+                this.isVisible(element) &&
+                !this.isEmpty(element)) ||
+            element.shadowRoot
         ) {
             return NodeFilter.FILTER_ACCEPT;
         }
@@ -410,9 +419,9 @@ export class F6Controller {
 }
 
 let f6Controller;
-export const createF6Controller = (config) => {
+export const createF6Controller = () => {
     if (!f6Controller) {
-        f6Controller = new F6Controller(config);
+        f6Controller = new F6Controller();
     }
     return f6Controller;
 };

package/src/lightning/formattedDateTime/formattedDateTime.js

@@ -36,7 +36,7 @@ export default class LightningFormattedDateTime extends LightningElement {
     @api year;
 
     /**
-     * Allowed values are 2-digit, narrow, short, or long.
+     * Allowed values are 2-digit, numeric, narrow, short, or long.
      * @type {string}
      *
      */

package/src/lightning/groupedCombobox/groupedCombobox.html

@@ -18,6 +18,7 @@
                                 data-filter
                                 onready={handleFilterReady}
                                 disabled={disabled}
+                                read-only={readOnly}
                                 items={filterItems}
                                 input-text={filterInputText}
                                 input-icon-name="utility:down"
@@ -35,6 +36,7 @@
                 data-lookup
                 name={name}
                 disabled={disabled}
+                read-only={readOnly}
                 required={required}
                 class={computedLookupComboboxClass}
                 variant="lookup"
@@ -48,6 +50,8 @@
                 input-icon-alternative-text={inputIconAlternativeText}
                 show-input-activity-indicator={showActivityIndicator}
                 show-dropdown-activity-indicator={showDropdownActivityIndicator}
+                custom-role={customRole}
+                custom-aria-has-popup={customAriaHasPopup}
                 onready={handleLookupReady}
                 ontextchange={handleTextChange}
                 ontextinput={handleTextInput}

package/src/lightning/groupedCombobox/groupedCombobox.js

@@ -40,8 +40,6 @@ export default class LightningGroupedCombobox extends LightningElement {
     @api value;
     @api required = false;
     @api disabled = false;
-    // TODO: Need to remove as if a readonly combobox is needed,
-    // the regular lightning-combobox should be used
     @api readOnly = false;
 
     @api inputPill;
@@ -57,6 +55,9 @@ export default class LightningGroupedCombobox extends LightningElement {
      */
     @api disableDefaultHighlight;
 
+    @api customRole = 'combobox';
+    @api customAriaHasPopup = 'listbox';
+
     @track _pills;
 
     @track _variant;

package/src/lightning/helptext/form-element.slds.css

@@ -278,4 +278,12 @@
     :host([data-render-mode="shadow"]) .slds-form-element_address .slds-form-element__row {
       align-items: flex-end;
     }
+
+    /* --------------------------------------- */
+
+    /* FORM ELEMENT: HIDDEN */
+
+    :host([data-render-mode="shadow"][variant~='label-hidden']) .slds-form-element__label {
+      display: none
+  }
 }

package/src/lightning/helptext/help-text.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;
   }
 }
 
@@ -883,7 +889,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   /**
       * End part
       */
-  :host([data-render-mode="shadow"]) [part~='end'] {
+  :host([data-render-mode="shadow"]) [part='end'] {
     padding-inline-start: var(--slds-c-buttonicon-end-spacing-inline-start, 0);
   }
 
@@ -912,7 +918,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 
 @supports (--styling-hooks: '') {
-  :host([data-render-mode="shadow"]) [part~='help-text'] {
+  :host([data-render-mode="shadow"]) [part='help-text'] {
     --slds-c-buttonicon-color-background: var(--slds-c-helptext-color-background);
     --slds-c-buttonicon-color-background-hover: var(--slds-c-helptext-color-background-hover);
     --slds-c-buttonicon-color-background-focus: var(--slds-c-helptext-color-background-focus);

package/src/lightning/icon/icon.js

@@ -17,6 +17,7 @@ import { normalizeVariant } from './util';
  * Represents a visual element that provides context and enhances usability.
  */
 export default class LightningIcon extends LightningElement {
+    static validationOptOut = ['class'];
     _src;
     _privateIconName;
     _iconName;
@@ -172,7 +173,10 @@ export default class LightningIcon extends LightningElement {
         const name = getName(iconName);
         const color = iconColors[category] && iconColors[category][name];
         if (color) {
-            this.template.host.style = `--sds-c-icon-color-background: var(--slds-c-icon-color-background, ${color});`;
+            this.setAttribute(
+                'style',
+                `--sds-c-icon-color-background: var(--slds-c-icon-color-background, ${color})`
+            );
         }
     }
 }

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

@@ -84,7 +84,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);
@@ -114,7 +114,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)));
@@ -199,7 +199,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;

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

@@ -0,0 +1,6 @@
+      .slds-box {
+        padding: 1rem;
+        margin: 0;
+        border-radius: .25rem;
+        border: 1px solid lightgrey;
+      }

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

@@ -3,6 +3,7 @@
         <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" checked disabled></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>
     </div>
 </template>

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

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

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

@@ -19,11 +19,6 @@
         <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>