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

package/src/lightning/input/__docs__/input.md

@@ -87,9 +87,9 @@ instead for input types `button`, `reset`, and
 Use [`lightning-radio-group`](bundle/lightning-radio-group/documentation)
 instead of input type `radio` for radio buttons.
 
-When working with forms that interact with Salesforce records, consider using the record form components. The `lightning-record-form`, `lightning-record-view-form`, and `lightning-record-edit-form` components provide a form-based UI that's metadata-driven. The components are automatically wired up to your record data, labels, and field-level help text. For more information, see [Work with Records Using Base Components](docs/component-library/documentation/en/lwc/lwc.data_get_user_input_intro).
+When working with forms that interact with Salesforce records, consider using the record form components. The `lightning-record-form`, `lightning-record-view-form`, and `lightning-record-edit-form` components provide a form-based UI that's metadata-driven. The components are automatically wired up to your record data, labels, and field-level help text. For more information, see [Work with Records Using Base Components](https://developer.salesforce.com/docs/platform/lwc/guide/data-get-user-input-intro).
 
-Alternatively, to create your own custom UI to work with Salesforce records, use `lightning-input` with the `lightning/ui*Api` wire adapters and functions, such as `getRecord` and `updateRecord`. For more information, see [Use the Wire Service with Base Components](docs/component-library/documentation/en/lwc/lwc.data_wire_base_components).
+Alternatively, to create your own custom UI to work with Salesforce records, use `lightning-input` with the `lightning/ui*Api` wire adapters and functions, such as `getRecord` and `updateRecord`. For more information, see [Use the Wire Service with Base Components](https://developer.salesforce.com/docs/platform/lwc/guide/data-wire-base-components).
 
 The `label` attribute is required. If you don't want to display a label,
 specify the `variant="label-hidden"` attribute. See **Accessibility** for more
@@ -192,6 +192,8 @@ as explained in **Adding Field-Level Help and Placeholder Text**.
 
 On desktop, the datepicker calendar clips behind other components on the page if the parent container of `lightning-input` has a smaller width or height than the calendar. To prevent clipping, give the parent container a minimum width of 285px and minimum height of 310px.
 
+By default, the datepicker calendar renders above all modals and the main Salesforce header.
+
 ```html
 <template>
     <lightning-input type="date" label="Birthday"> </lightning-input>
@@ -203,7 +205,6 @@ On desktop, the datepicker calendar clips behind other components on the page if
 A datetime field includes a text input to type a date and a date picker
 to select a date, and similar fields for typing or picking a time.
 
-
 On mobile devices, this component uses the native datetime picker, which ignores the `date-style` and `time-style` attributes. The native datetime picker uses the user's device settings for names of months and weekdays, the input datetime format, and the calendar type.
 
 ##### Desktop
@@ -253,6 +254,8 @@ You can guide users with a `field-level-help` tooltip, as explained in **Adding
 
 On desktop, the datepicker calendar clips behind other components on the page if the parent container of `lightning-input` has a smaller width or height than the calendar. To prevent clipping, give the parent container a minimum width of 285px and minimum height of 310px.
 
+By default, the datepicker calendar renders above all modals and the main Salesforce header.
+
 **Note**: Set the same time zone on your mobile device and in Salesforce to avoid confusion and potential validation
 issues. For example, suppose the current time is 4:00 PM ET. Your mobile device is set to the America/New_York time zone and
 you're interacting with Salesforce while it's set to the America/Los_Angeles time zone. When you tap an empty date/time field
@@ -557,6 +560,8 @@ On mobile devices, this component uses the native time picker, which ignores the
 
 On desktop, this component uses a time picker styled with the Lightning Design System. This picker uses the user's Salesforce locale setting for the time format, either 12-hr time with AM/PM or 24-hr time format. The entered date and time are validated against the user's Salesforce locale format during the `blur` event.
 
+By default, the time picker renders above all modals and the main Salesforce header.
+
 The component uses the attribute `time-style="short"` by default, so the time picker
 displays time without seconds. To display time including seconds, set `time-style="medium"`.
 
@@ -603,6 +608,17 @@ To apply custom styling, use the `:host` selector. Use SLDS styling hooks to cus
 
 See [Styling Hooks Overview](https://www.lightningdesignsystem.com/components/checkbox-toggle/#Styling-Hooks-Overview) for a list of CSS custom properties.
 
+By default, the toggle component expands to 100% of the available width. To limit the size of the toggle component, wrap it with an element that specifies the appropriate width.
+
+```html
+<template>
+    <div style="width:fit-content">
+        <lightning-input type="toggle" label="Toggle value" checked>
+        </lightning-input>
+    </div>
+</template>
+```
+
 #### URL
 
 An input field for entering a URL. The address must include the protocol, such
@@ -835,7 +851,7 @@ To provide sample input in the field, use the `placeholder` attribute. For examp
 
 #### Data Binding
 
-Bind the input value to a property in your component's JavaScript class. `lightning-input` uses the `onchange` event handler to listen a change to its value. For more information, see [Data Binding in a Template](docs/component-library/documentation/en/lwc/js_props_getter).
+Bind the input value to a property in your component's JavaScript class. `lightning-input` uses the `onchange` event handler to listen a change to its value. For more information, see [Data Binding in a Template](https://developer.salesforce.com/docs/platform/lwc/guide/js-props-getter).
 
 #### Event Handling
 
@@ -1064,7 +1080,7 @@ trigger a message on blur when too many characters are entered.
 ```
 
 You can use custom labels that display translated values on input fields. For more information,
-see [Access Labels](docs/component-library/documentation/lwc/lwc.create_labels).
+see [Access Labels](https://developer.salesforce.com/docs/platform/lwc/guide/create-labels).
 
 The `lightning-input` component has these limitations when running in the Playground and the Mini-Playground in the Examples tab of this Component Reference.
 
@@ -1148,4 +1164,4 @@ For a recipe that uses `lightning-input`, see the following components in the LW
 
 #### See Also
 
-[Access Elements the Component Owns](docs/component-library/documentation/lwc/create_components_dom_work)
+[Access Elements the Component Owns](https://developer.salesforce.com/docs/platform/lwc/guide/create-components-dom-work)

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

@@ -17,7 +17,7 @@
 
         <!-- Multiple files -->
         <div class="slds-p-around_medium lgc-bg">
-            <lightning-input type="file" label="Attachments"></lightning-input>
+            <lightning-input type="file" label="Attachments" multiple></lightning-input>
         </div>
     </div>
 

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

@@ -133,42 +133,42 @@
 
     /* FORM ELEMENT: STACKED */
 
-    :host([data-render-mode="shadow"][variant~='label-stacked']) {
+    :host([data-render-mode="shadow"][variant='label-stacked']) {
         display: block;
     }
 
     /* TODO: Using `:not` is currently not working, and it could break the build because of issues with the dist script */
 
-    /* :host([variant~='label-stacked']):not(.slds-form-element_readonly) {
+    /* :host([variant='label-stacked']):not(.slds-form-element_readonly) {
         margin-block-end: var(--sds-g-spacing-2);
     }
 
-    :host([variant~='label-stacked']):not(.slds-is-editing) {
+    :host([variant='label-stacked']):not(.slds-is-editing) {
         padding: 0 var(--sds-g-spacing-1);
     } */
 
-    /* :host([variant~='label-stacked']):not([class*="slds-size"]) {
+    /* :host([variant='label-stacked']):not([class*="slds-size"]) {
           width: 100%;
           flex-basis: 100%;
     } */
 
-    :host([data-render-mode="shadow"][variant~='label-stacked']) .slds-form-element {
+    :host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element {
         padding: 0;
         margin-block-end: 0;
     }
 
-    :host([data-render-mode="shadow"][variant~='label-stacked']) .slds-form-element__label,:host([data-render-mode="shadow"][variant~='label-stacked']) .slds-form-element__control {
+    :host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element__label,:host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element__control {
         border-bottom: 0; /* Remove border when using legacy version of slds-form-element */
         padding-inline-start: 0;
     }
 
-    :host([data-render-mode="shadow"][variant~='label-stacked']) .slds-form-element__control {
+    :host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element__control {
         width: 100%;
         flex-basis: 100%;
         clear: left;
     }
 
-    :host([data-render-mode="shadow"][variant~='label-stacked']) .slds-form-element__icon {
+    :host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element__icon {
         float: none;
         padding-block-start: var(--sds-g-spacing-1, 0.25rem);
     }
@@ -177,7 +177,7 @@
 
     /* FORM ELEMENT: INLINE */
 
-    :host([data-render-mode="shadow"][variant~='label-inline']) {
+    :host([data-render-mode="shadow"][variant='label-inline']) {
         display: block;
     }
 
@@ -187,32 +187,32 @@
     in lighting-input this slds class is synonymous with the variant
     */
 
-    :host([data-render-mode="shadow"][variant~='label-inline'].slds-form-element_horizontal) {
+    :host([data-render-mode="shadow"][variant='label-inline'].slds-form-element_horizontal) {
         padding: var(--sds-g-spacing-1, 0.25rem);
         margin-block-end: var(--sds-g-spacing-2, 0.5rem);
     }
 
     /* TODO: Using `:not` is currently not working, and it could break the build because of issues with the dist script */
 
-    /* :host([variant~='label-inline']):not(.slds-form-element_readonly) {
+    /* :host([variant='label-inline']):not(.slds-form-element_readonly) {
         margin-block-end: var(--sds-g-spacing-2);
     }
 
-    :host([variant~='label-inline']):not([class*="slds-size"]) {
+    :host([variant='label-inline']):not([class*="slds-size"]) {
         width: 100%;
         flex-basis: 100%;
     }
 
-    :host([variant~='label-inline']:not(.slds-is-editing)) {
+    :host([variant='label-inline']:not(.slds-is-editing)) {
         padding: var(--sds-g-spacing-1);
     } */
 
-    :host([data-render-mode="shadow"][variant~='label-inline']).slds-is-edited {
+    :host([data-render-mode="shadow"][variant='label-inline']).slds-is-edited {
         padding-block-start: var(--sds-g-sizing-6, 1.25rem)
     }
 
-    @media (min-width: 48em) {
-        :host([data-render-mode="shadow"][variant~='label-inline']) .slds-form-element__label {
+    @media (width >= 48em) {
+        :host([data-render-mode="shadow"][variant='label-inline']) .slds-form-element__label {
           float: left;
           max-width: calc(33% - var(--sds-g-sizing-6, 1.25rem)); /* Removing icon width for when the help-text icon is present */
           flex-basis: calc(33% - var(--sds-g-sizing-6, 1.25rem)); /* Some form element controls are set to display:flex */
@@ -222,23 +222,22 @@
           z-index: 1;
         }
 
-        :host([data-render-mode="shadow"][variant~='label-inline']) lightning-helptext {
+        :host([data-render-mode="shadow"][variant='label-inline']) lightning-helptext {
           float: left;
         }
 
-        :host([data-render-mode="shadow"][variant~='label-inline']) .slds-form-element__control {
+        :host([data-render-mode="shadow"][variant='label-inline']) .slds-form-element__control {
           margin-inline-start: 33%;
           clear: none; /* Reset clear: left when switching to horizontal form layout */
         }
 
-        :host([data-render-mode="shadow"][variant~='label-inline']) .slds-form-element__control .slds-form-element__control {
+        :host([data-render-mode="shadow"][variant='label-inline']) .slds-form-element__control .slds-form-element__control {
           padding-inline-start: 0; /* Remove left padding on nested form controls, due to issues related to lightning-form components */
         }
 
-        :host([data-render-mode="shadow"][variant~='label-inline']) .slds-dueling-list__column .slds-form-element__label {
+        :host([data-render-mode="shadow"][variant='label-inline']) .slds-dueling-list__column .slds-form-element__label {
             width: auto;
             max-width: 100%;
-            -ms-flex-preferred-size: auto;
             flex-basis: auto;
             float: none;
             position: relative;
@@ -246,11 +245,11 @@
             margin-block-end: 0;
         }
 
-        :host([data-render-mode="shadow"][variant~='label-inline']) .slds-form-element__help {
+        :host([data-render-mode="shadow"][variant='label-inline']) .slds-form-element__help {
           margin-inline-start: 33%;
         }
 
-        :host([data-render-mode="shadow"][variant~='label-inline']) .slds-dueling-list {
+        :host([data-render-mode="shadow"][variant='label-inline']) .slds-dueling-list {
             clear: none;
         }
     }
@@ -283,7 +282,7 @@
 
     /* FORM ELEMENT: HIDDEN */
 
-    :host([data-render-mode="shadow"][variant~='label-hidden']) .slds-form-element__label {
+    :host([data-render-mode="shadow"][variant='label-hidden']) .slds-form-element__label {
       display: none
   }
 }

package/src/lightning/input/input.css

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

package/src/lightning/input/input.html

@@ -25,7 +25,6 @@
             name={name}
             onblur={handleBlur}
             onfocus={handleFocus}
-            oninput={handleInput}
             onchange={handlePrimitiveInputSimpleChange}
             oncommit={handleCommit}
             pattern={pattern}
@@ -34,6 +33,7 @@
             required={required}
             step={step}
             type={type}
+            timezone={timezone}
             variant={variant}
             value={value}
             validity={validity}
@@ -148,8 +148,8 @@
             help-message={_helpMessage}
             helptext-alternative-text={helptextAlternativeText}
             onblur={handleBlur}
+            oncommit={handleCommit}
             onfocus={handleFocus}
-            oninput={handleInput}
             onchange={handleChange}
             has-external-label={hasExternalLabel}
             required={required}
@@ -254,6 +254,6 @@
     </template>
 
     <template if:true={shouldShowHelpMessage}>
-        <div id="help-message" class={computedHelpMessageClass} data-help-message role="alert" part="help-text">{_helpMessage}</div>
+        <div id="help-message" class={computedHelpMessageClass} data-help-message part="help-text">{_helpMessage}</div>
     </template>
 </template>

package/src/lightning/input/input.js

@@ -81,6 +81,25 @@ const ARIA_DESCRIBEDBY = 'aria-describedby';
  *
  * */
 
+const VALID_INPUT_TYPES = [
+    'checkbox',
+    'checkbox-button',
+    'date',
+    'datetime',
+    'time',
+    'email',
+    'file',
+    'password',
+    'search',
+    'tel',
+    'url',
+    'number',
+    'text',
+    'radio',
+    'toggle',
+    'color',
+    'range',
+];
 const VALID_NUMBER_FORMATTERS = [
     'decimal',
     'percent',
@@ -641,7 +660,10 @@ export default class LightningInput extends LightningElement {
         this._type =
             normalizedValue === 'datetime' ? 'datetime-local' : normalizedValue;
 
-        this._validateType(normalizedValue);
+        // preserve old behavior of defaulting to 'text' if user supplies an invalid type.
+        if (!this._validateType(normalizedValue)) {
+            this._type = 'text';
+        }
 
         this._inputElementRefreshNeeded = true;
 
@@ -1263,6 +1285,10 @@ export default class LightningInput extends LightningElement {
         return this.type === 'time';
     }
 
+    get isTypeSearch() {
+        return this.type === 'search';
+    }
+
     get isTypeMobileDate() {
         return this.isTypeDate && !this._isDesktopBrowser();
     }
@@ -1298,7 +1324,12 @@ export default class LightningInput extends LightningElement {
             type === 'search' ||
             type === 'password' ||
             type === 'range' ||
-            !type
+            !type ||
+            (!this._isDesktopBrowser() &&
+                (type === 'date' ||
+                    type === 'time' ||
+                    type === 'datetime' ||
+                    type === 'datetime-local'))
         );
     }
 
@@ -1402,10 +1433,8 @@ export default class LightningInput extends LightningElement {
                 inputElement = this.template.querySelector(
                     'lightning-timepicker'
                 );
-            } else if (this.isTypePrimitiveInput) {
-                inputElement = this._primitiveComponent.inputElement;
             } else {
-                inputElement = this.template.querySelector('input');
+                inputElement = this._primitiveComponent.inputElement;
                 this._inputDragonDecorated = true;
                 decorateInputForDragon(inputElement);
             }
@@ -1441,17 +1470,14 @@ export default class LightningInput extends LightningElement {
     }
 
     get _displayedValue() {
-        if (this.isTypeNumber) {
-            const subcomponent = this._primitiveComponent;
-            return subcomponent.getDisplayedValue();
-        }
-
         if (
+            this.isTypeNumber ||
             this.isTypeMobileDate ||
             this.isTypeMobileDateTime ||
             this.isTypeMobileTime
         ) {
-            return this._normalizeDateTimeString(this._value);
+            const subcomponent = this._primitiveComponent;
+            return subcomponent.getDisplayedValue();
         }
 
         return this._value;
@@ -1688,6 +1714,15 @@ export default class LightningInput extends LightningElement {
         );
     }
 
+    /**
+     * This function determines if a type is supported by this component or not.
+     *
+     * We assert against the types we explicitly don't support. We also throw a warning
+     * when users make common mistakes, like type phone instead of tel.
+     *
+     * @param {string} type - the type being set via api
+     * @returns {boolean} - wether the value is valid or not
+     */
     _validateType(type) {
         assert(
             type !== 'hidden',
@@ -1706,6 +1741,12 @@ export default class LightningInput extends LightningElement {
                 `<lightning-input> The required attribute is not supported on radio inputs directly. It should be implemented at the radio group level.`
             );
         }
+        if (type === 'phone') {
+            console.warn(
+                `<lightning-input> The type attribute value "phone" is invalid. Please use <lightning-input type="tel"> instead. Defaulting to text type.`
+            );
+        }
+        return VALID_INPUT_TYPES.includes(type);
     }
 
     /**

package/src/lightning/inputAddress/__docs__/inputAddress.md

@@ -74,7 +74,7 @@ export default class AddressCityExample extends LightningElement {
 }
 ```
 
-See the __Custom Events__ section for a list of `event.target` properties. For more information, see [Data Binding in a Template](docs/component-library/documentation/en/lwc/js_props_getter).
+See the __Custom Events__ section for a list of `event.target` properties. For more information, see [Data Binding in a Template](https://developer.salesforce.com/docs/platform/lwc/guide/js-props-getter).
 
 #### Creating Dropdown Menus for Country and Province
 
@@ -140,7 +140,7 @@ export default class DemoInputAddress extends LightningElement {
 
 Alternatively, you can enable state and country picklists in your org, and
 access the values by using a wire adapter.
-See [Let Users Select State and Country from Picklists](https://help.salesforce.com/articleView?id=admin_state_country_picklists_overview.htm) in Salesforce Help and [getPicklistValues](docs/component-library/documentation/lwc/reference_wire_adapters_picklist_values) in the Lightning Web Components Developer Guide.
+See [Let Users Select State and Country from Picklists](https://help.salesforce.com/articleView?id=admin_state_country_picklists_overview.htm) in Salesforce Help and [getPicklistValues](https://developer.salesforce.com/docs/platform/lwc/guide/reference-wire-adapters-picklist-values) in the Lightning Web Components Developer Guide.
 
 #### Using Lookup to Find and Autofill an Address
 
@@ -213,7 +213,7 @@ Additionally, the `show-address-lookup` boolean attribute creates a search field
 Your Salesforce locale setting determines the order and layout of the input address fields by default. Use the `locale` attribute to override the default. Specify any locale code from the list of [Supported Number, Name, and Address Formats (ICU)](https://help.salesforce.com/s/articleView?id=sf.admin_supported_locales.htm&type=5").
 
 You can also use custom labels that display translated values. For more information, see
-[Access Labels](docs/component-library/documentation/lwc/lwc.create_labels).
+[Access Labels](https://developer.salesforce.com/docs/platform/lwc/guide/create-labels).
 
 We recommend that you provide a label even when you provide placeholder text for an address field. Without field labels, users can lose context when the placeholder text disappears as they type in the field.
 
@@ -282,9 +282,9 @@ See [Input: Styling Hooks Overview](https://www.lightningdesignsystem.com/compon
 Using `show-address-lookup` is not supported in Playground, Experience Builder sites, Lightning Out,
 Lightning Components for Visualforce, and standalone apps.
 
-When working with address fields such as with the `MailingAddress` field on Salesforce records, consider using the record form components. The `lightning-record-form`, `lightning-record-view-form`, and `lightning-record-edit-form` components provide a form-based UI that's metadata-driven. The components are automatically wired up to your record data, labels, and field-level help text. For more information, see [Work with Records Using Base Components](docs/component-library/documentation/en/lwc/lwc.data_get_user_input_intro).
+When working with address fields such as with the `MailingAddress` field on Salesforce records, consider using the record form components. The `lightning-record-form`, `lightning-record-view-form`, and `lightning-record-edit-form` components provide a form-based UI that's metadata-driven. The components are automatically wired up to your record data, labels, and field-level help text. For more information, see [Work with Records Using Base Components](https://developer.salesforce.com/docs/platform/lwc/guide/data-get-user-input-intro).
 
-To create your own custom UI to work with Salesforce records, use `lightning-input-address` with the `lightning/ui*Api` wire adapters and functions, such as `getRecord` and `updateRecord`. For more information, see [Use the Wire Service with Base Components](docs/component-library/documentation/en/lwc/lwc.data_wire_base_components).
+To create your own custom UI to work with Salesforce records, use `lightning-input-address` with the `lightning/ui*Api` wire adapters and functions, such as `getRecord` and `updateRecord`. For more information, see [Use the Wire Service with Base Components](https://developer.salesforce.com/docs/platform/lwc/guide/data-wire-base-components).
 
 To disable the fields so that users cannot interact with it, use the `disabled` attribute. If you want to prevent users from interacting with the country field only,
 disable it using the `country-disabled` attribute.

package/src/lightning/inputName/__docs__/inputName.md

@@ -118,7 +118,7 @@ export default class InputName extends LightningElement {
     first-name={firstname}
     middle-name="Middleton"
     last-name="Doe"
-    options={salutationOptions} 
+    options={salutationOptions}
     onchange={handleChange}></lightning-input-name>
 ```
 
@@ -147,12 +147,12 @@ export default class InputNameBase extends LightningElement {
 }
 ```
 
-See the __Custom Events__ section for a list of `event.target` properties. For more information, see [Data Binding in a Template](docs/component-library/documentation/en/lwc/js_props_getter).
+See the __Custom Events__ section for a list of `event.target` properties. For more information, see [Data Binding in a Template](https://developer.salesforce.com/docs/platform/lwc/guide/js-props-getter).
 
 #### Usage Considerations
 
 You can use custom labels that display translated values. For more information, see the
-[Access Static Resources, Labels, Internationalization Properties, and User IDs](docs/component-library/documentation/lwc/create_global_value_providers).
+[Access Static Resources, Labels, Internationalization Properties, and User IDs](https://developer.salesforce.com/docs/platform/lwc/guide/create-global-value-providers).
 
 This component uses `button` elements for dropdown menus to comply with the [Lightning Design System combobox blueprint](https://www.lightningdesignsystem.com/components/combobox/#%22Input%22-markup) for select-only comboboxes.
 
@@ -218,4 +218,4 @@ The `change` event properties are as follows.
 
 #### See Also
 
-[Use Wire Service with Base Components](docs/component-library/documentation/lwc/lwc.data_wire_base_components)
+[Use Wire Service with Base Components](https://developer.salesforce.com/docs/platform/lwc/guide/data-wire-base-components)

package/src/lightning/layout/layout.css

@@ -1,5 +1,5 @@
-@import 'lightning/sldsCommon';
-@import 'lightning/sldsUtilsGrid';
+/* @import 'lightning/sldsCommon';
+@import 'lightning/sldsUtilsGrid'; */
 
 @media all and (-ms-high-contrast: none),
 (-ms-high-contrast: active) {

package/src/lightning/layout/layout.js

@@ -1,5 +1,4 @@
-import { api, track } from 'lwc';
-import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
+import { LightningElement, api, track } from 'lwc';
 import {
     normalizeParam,
     computeLayoutClass,
@@ -12,9 +11,8 @@ import { normalizeBoolean } from 'lightning/utilsPrivate';
 /**
  * Represents a responsive grid system for arranging containers on a page.
  */
-export default class LightningLayout extends LightningShadowBaseClass {
+export default class LightningLayout extends LightningElement {
     static validationOptOut = ['class'];
-
     /**
      * Determines how to spread the layout items horizontally.
      * The alignment options are center, space, spread, and end.
@@ -82,7 +80,6 @@ export default class LightningLayout extends LightningShadowBaseClass {
     _layoutClass = [];
 
     connectedCallback() {
-        super.connectedCallback();
         this.updateClassList();
     }
 

package/src/lightning/layoutItem/__docs__/layoutItem.md

@@ -80,7 +80,7 @@ Here is an example using default values.
 
 #### Usage Considerations
 
-This component has usage differences from its Aura counterpart. See [Base Components: Aura Vs Lightning Web Components](docs/component-library/documentation/lwc/lwc.migrate_map_aura_lwc_components) in the Lightning Web Components Developer Guide.
+This component has usage differences from its Aura counterpart. See [Base Components: Aura Vs Lightning Web Components](https://developer.salesforce.com/docs/platform/lwc/guide/migrate-map-aura-lwc-components) in the Lightning Web Components Developer Guide.
 
 #### Source Code
 

package/src/lightning/layoutItem/layoutItem.css

@@ -1,5 +1,5 @@
-@import 'lightning/sldsCommon';
+/* @import 'lightning/sldsCommon';
 @import 'lightning/sldsUtilsBox';
 @import 'lightning/sldsUtilsGrid';
 @import 'lightning/sldsUtilsPadding';
-@import 'lightning/sldsUtilsSizing';
+@import 'lightning/sldsUtilsSizing'; */

package/src/lightning/layoutItem/layoutItem.js

@@ -1,5 +1,4 @@
-import { api, track } from 'lwc';
-import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
+import { LightningElement, api, track } from 'lwc';
 import {
     normalizeFlexibility,
     normalizePadding,
@@ -14,9 +13,8 @@ import {
  * A layout item groups information together to define visual grids, spacing, and sections.
  * @slot default Placeholder for your content in lightning-layout-item.
  */
-export default class LightningLayoutItem extends LightningShadowBaseClass {
+export default class LightningLayoutItem extends LightningElement {
     static validationOptOut = ['class'];
-
     /**
      * Make the item fluid so that it absorbs any extra space in its
      * container or shrinks when there is less space. Allowed values are:
@@ -139,7 +137,6 @@ export default class LightningLayoutItem extends LightningShadowBaseClass {
     _layoutClass = [];
 
     connectedCallback() {
-        super.connectedCallback();
         this.updateClassList();
     }
 

package/src/lightning/menuDivider/menuDivider.css

@@ -1,5 +1,5 @@
-@import 'lightning/sldsCommon';
-@import './menu-divider.slds.css';
+/* @import 'lightning/sldsCommon';
+@import './menu-divider.slds.css'; */
 
 :host {
     display: block;

package/src/lightning/menuDivider/menuDivider.js

@@ -1,16 +1,14 @@
-import { api, track } from 'lwc';
-import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
+import { LightningElement, api, track } from 'lwc';
 import { classSet } from 'lightning/utils';
 import { normalizeString as normalize } from 'lightning/utilsPrivate';
 
 /**
  * Creates a divider in the list of items for lightning-button-menu.
  */
-export default class LightningMenuDivider extends LightningShadowBaseClass {
+export default class LightningMenuDivider extends LightningElement {
     @track _variant = 'standard';
 
     connectedCallback() {
-        super.connectedCallback();
         this.setAttribute('role', 'separator');
     }
 

package/src/lightning/menuItem/menu-item.slds.css

@@ -43,7 +43,7 @@
 
     /* Reassignment - lightning-icon */
     --slds-c-icon-color-foreground-default: var(--sds-g-color-neutral-base-80, #c9c9c9);
-    --slds-c-icon-boundary-spacing-inline-end: 25px;
+    --slds-c-icon-boundary-spacing-inlineend: 25px;
   }
 
   /* TODO: bring in PostCSS fix and see if it fixes output CSS */
@@ -98,11 +98,11 @@
   }
 
   :host([data-render-mode="shadow"].slds-has-warning) .slds-indicator_unread {
-    background-color: currentColor;
+    background-color: currentcolor;
   }
 
   :host([data-render-mode="shadow"].slds-has-warning) .slds-indicator_unsaved {
-    color: currentColor;
+    color: currentcolor;
   }
 
   :host([data-render-mode="shadow"].slds-has-error) a:hover,:host([data-render-mode="shadow"].slds-has-error) a:focus,:host([data-render-mode="shadow"].slds-has-success) a:hover,:host([data-render-mode="shadow"].slds-has-success) a:focus,:host([data-render-mode="shadow"].slds-has-warning) a:hover,:host([data-render-mode="shadow"].slds-has-warning) a:focus {

package/src/lightning/menuItem/menuItem.css

@@ -1,5 +1,5 @@
-@import 'lightning/sldsCommon';
-@import './menu-item.slds.css';
+/* @import 'lightning/sldsCommon';
+@import './menu-item.slds.css'; */
 
 :host {
     display: block;