lightning-base-components 1.19.1-alpha → 1.19.3-alpha

package/src/lightning/f6Controller/f6Controller.js

@@ -345,10 +345,10 @@ export class F6Controller {
         );
 
         while (treeWalker.nextNode()) {
-            if (treeWalker.currentNode.shadowRoot) {
-                this.shadowTreeWalker(treeWalker.currentNode.shadowRoot);
-            } else {
+            if (this.isF6Region(treeWalker.currentNode)) {
                 this.regions.push(treeWalker.currentNode);
+            } else if (treeWalker.currentNode.shadowRoot) {
+                this.shadowTreeWalker(treeWalker.currentNode.shadowRoot);
             }
         }
     }
@@ -393,6 +393,11 @@ export class F6Controller {
         }
     };
 
+    isF6Region = (element) =>
+        element.matches(`*[${this.config.f6RegionAttribute}]`) &&
+        this.isVisible(element) &&
+        !this.isEmpty(element);
+
     elementFilter = (element) => {
         if (
             element.parentElement &&
@@ -401,12 +406,7 @@ export class F6Controller {
             return NodeFilter.FILTER_REJECT;
         }
 
-        if (
-            (element.matches(`*[${this.config.f6RegionAttribute}]`) &&
-                this.isVisible(element) &&
-                !this.isEmpty(element)) ||
-            element.shadowRoot
-        ) {
+        if (this.isF6Region(element) || element.shadowRoot) {
             return NodeFilter.FILTER_ACCEPT;
         }
 

package/src/lightning/formattedAddress/formattedAddress.js

@@ -226,8 +226,4 @@ export default class LightningFormattedAddress extends LightningElement {
     get addressLink() {
         return this.template.querySelector('a');
     }
-
-    handleReady(event) {
-        this.href = (event.detail && event.detail.href) || this.mapUrl;
-    }
 }

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

@@ -608,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

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/input.css

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

package/src/lightning/input/input.html

@@ -150,6 +150,7 @@
             onblur={handleBlur}
             oncommit={handleCommit}
             onfocus={handleFocus}
+            onchange={handleChange}
             has-external-label={hasExternalLabel}
             required={required}
             accesskey={accesskey}
@@ -253,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;
 
@@ -1692,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',
@@ -1710,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/menuSubheader/menuSubheader.js

@@ -11,6 +11,6 @@ export default class LightningMenuSubheader extends LightningElement {
     @api label;
 
     connectedCallback() {
-        this.setAttribute('role', 'separator');
+        this.setAttribute('role', 'presentation');
     }
 }

package/src/lightning/modal/__docs__/modal.md

@@ -584,6 +584,16 @@ To achieve the directional button layout, place the buttons in a `div` with the
 
 The `lightning-modal-*` helper components support [style hooks](https://www.lightningdesignsystem.com/components/modals/#Styling-Hooks-Overview). The styling hooks for the template that invokes the helper components doesn't carry over to them, so you must style each helper component individually.
 
+Use styling hooks to add styles to modal components. Any other values for the `style` attribute are ignored.
+
+```javascript
+MyModal.open({
+  style: {
+    '--slds-c-modal-color-border': 'red'
+  }
+})`
+```
+
 Customizing the styling on the white modal frame and background, close button, or gray backdrop isn't supported.
 
 #### Accessibility

package/src/lightning/overlayContainer/overlayContainer.js

@@ -1,6 +1,5 @@
-import { api, createElement } from 'lwc';
-import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
-import { parent, instanceName } from 'lightning/overlayUtils';
+import { LightningElement, api, createElement } from 'lwc';
+import { parent, instanceName, normalizeApis } from 'lightning/overlayUtils';
 import { guid } from 'lightning/utilsPrivate';
 import {
     addOverlayToSharedState,
@@ -17,7 +16,7 @@ import {
     LWC_OVERLAY_ENGINE,
 } from 'lightning/overlayManager';
 
-export default class LightningOverlayContainer extends LightningShadowBaseClass {
+export default class LightningOverlayContainer extends LightningElement {
     // overlayContainer has this.stack, which holds the details, and actual
     // DOM elements of local (this file) LWC overlays only, while
     // overlayManager has this.state.stack, which only tracks details of
@@ -51,8 +50,9 @@ export default class LightningOverlayContainer extends LightningShadowBaseClass
             return Promise.reject();
         }
         const element = createElement(overlayInstanceName, { is: scope });
+        const normalizedApis = normalizeApis(apis);
 
-        Object.entries(apis).forEach(([key, value]) => {
+        Object.entries(normalizedApis).forEach(([key, value]) => {
             const keyLower = key.toLowerCase();
             const match = keyLower.match(/^on(.+)/);
             if (match) {
@@ -189,7 +189,6 @@ export default class LightningOverlayContainer extends LightningShadowBaseClass
     }
 
     connectedCallback() {
-        super.connectedCallback();
         // Notified anytime an overlay is added/removed
         // LWC overlays start on z-index 9000; always even z-index (9000, 9002)
         // Aura overlays start on z-index 9001; always on odd z-index (9001, 9003)

package/src/lightning/overlayUtils/overlayUtils.js

@@ -29,3 +29,62 @@ export const properties = Symbol('properties');
  * This will be used verifying if required attributes have value assigned.
  */
 export const requiredProperties = Symbol('requiredProperties');
+
+/**
+ * Only allow CSS Variables
+ * @param {string|Object} style Style string or object
+ * @returns {string} sanitized style string
+ */
+export function normalizeStyle(style) {
+    const props = {};
+    if (typeof style === 'string') {
+        const regex = /([\w-]*)\s*:\s*([^;]*)/g;
+        let match;
+        while ((match = regex.exec(style))) {
+            if (match[1].startsWith('--')) {
+                props[match[1]] = match[2].trim();
+            } else {
+                // eslint-disable-next-line no-console
+                console.warn(
+                    `Overlay 'style' only supports CSS Variables (invalid '${match[1]}' set)`
+                );
+            }
+        }
+    } else if (style && typeof style === 'object') {
+        Object.keys(style).forEach((property) => {
+            if (
+                property.startsWith('--') &&
+                typeof style[property] === 'string'
+            ) {
+                props[property] = style[property];
+            } else {
+                // eslint-disable-next-line no-console
+                console.warn(
+                    `Overlay 'style' only supports CSS Variables (invalid '${property}' set)`
+                );
+            }
+        });
+    }
+    return Object.keys(props)
+        .map((property) => {
+            return `${property}:${props[property]}`;
+        })
+        .join(';');
+}
+
+/**
+ * Normalize the overlay apis.
+ * @param {Object} apis Apis passed to overlay
+ * @returns {Object} Normalized object of apis
+ */
+export function normalizeApis(apis) {
+    if (apis && typeof apis === 'object') {
+        const normalizedApis = { ...apis };
+        // Normalize Style
+        if (apis.style) {
+            normalizedApis.style = normalizeStyle(apis.style);
+        }
+        return normalizedApis;
+    }
+    return {};
+}

package/src/lightning/primitiveInputCheckbox/primitiveInputCheckbox.html

@@ -43,6 +43,6 @@
         </span>
     </div>
     <template if:true={helpMessage}>
-        <div id="help-message" class="slds-form-element__help" data-help-message role="alert" part="help-text">{helpMessage}</div>
+        <div id="help-message" class="slds-form-element__help" data-help-message part="help-text">{helpMessage}</div>
     </template>
 </template>

package/src/lightning/primitiveInputCheckbox/primitiveInputCheckbox.js

@@ -1,12 +1,11 @@
 import { classSet } from 'lightning/utils';
 import { VARIANT } from 'lightning/inputUtils';
 import labelRequired from '@salesforce/label/LightningControl.required';
-import { api } from 'lwc';
-import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
+import { LightningElement, api } from 'lwc';
 
 import { isNativeComponent, reflectAttribute } from 'lightning/utilsPrivate';
 
-export default class LightningPrimitiveInputCheckbox extends LightningShadowBaseClass {
+export default class LightningPrimitiveInputCheckbox extends LightningElement {
     @api required;
     @api readOnly;
     @api label;
@@ -120,7 +119,6 @@ export default class LightningPrimitiveInputCheckbox extends LightningShadowBase
     }
 
     connectedCallback() {
-        super.connectedCallback();
         this._isNativeShadow = isNativeComponent(this);
     }
 

package/src/lightning/primitiveInputCheckboxButton/primitiveInputCheckboxButton.html

@@ -19,6 +19,6 @@
         </label>
     </div>
     <template if:true={_helpMessage}>
-        <div id="help-message" class="slds-form-element__help" data-help-message role="alert" part="help-text">{_helpMessage}</div>
+        <div id="help-message" class="slds-form-element__help" data-help-message part="help-text">{_helpMessage}</div>
     </template>
 </template>

package/src/lightning/primitiveInputCheckboxButton/primitiveInputCheckboxButton.js

@@ -1,11 +1,10 @@
-import { api } from 'lwc';
-import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
+import { LightningElement, api } from 'lwc';
 import {
     reflectAttribute,
     normalizeBoolean,
     isNativeComponent,
 } from 'lightning/utilsPrivate';
-export default class LightningPrimitiveInputColor extends LightningShadowBaseClass {
+export default class LightningPrimitiveInputColor extends LightningElement {
     @api ariaLabel;
     @api ariaInvalid;
     @api accessKey;
@@ -92,7 +91,6 @@ export default class LightningPrimitiveInputColor extends LightningShadowBaseCla
     /********* COMPONENT CALLBACKS *********/
 
     connectedCallback() {
-        super.connectedCallback();
         this._isNativeShadow = isNativeComponent(this);
     }
 

package/src/lightning/primitiveInputColor/primitiveInputColor.html

@@ -45,6 +45,6 @@
         </div>
     </div>
     <template if:true={helpMessage}>
-        <div id="help-message" class="slds-form-element__help" data-help-message role="alert" part="help-text">{helpMessage}</div>
+        <div id="help-message" class="slds-form-element__help" data-help-message part="help-text">{helpMessage}</div>
     </template>
 </template>

package/src/lightning/primitiveInputColor/primitiveInputColor.js

@@ -1,9 +1,8 @@
-import { api } from 'lwc';
-import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
+import { LightningElement, api } from 'lwc';
 import { classSet } from 'lightning/utils';
 import { VARIANT } from 'lightning/inputUtils';
 import { reflectAttribute, isNativeComponent } from 'lightning/utilsPrivate';
-export default class LightningPrimitiveInputColor extends LightningShadowBaseClass {
+export default class LightningPrimitiveInputColor extends LightningElement {
     @api hasExternalLabel;
     @api required;
     @api accessKey;
@@ -66,7 +65,6 @@ export default class LightningPrimitiveInputColor extends LightningShadowBaseCla
     /********* COMPONENT CALLBACKS *********/
 
     connectedCallback() {
-        super.connectedCallback();
         this._isNativeShadow = isNativeComponent(this);
     }
 

package/src/lightning/primitiveInputFile/primitiveInputFile.html

@@ -40,6 +40,6 @@
         </div>
     </div>
     <template if:true={_helpMessage}>
-        <div id="help-message" class="slds-form-element__help" data-help-message role="alert" part="help-text">{_helpMessage}</div>
+        <div id="help-message" class="slds-form-element__help" data-help-message part="help-text">{_helpMessage}</div>
     </template>
 </template>

package/src/lightning/primitiveInputFile/primitiveInputFile.js

@@ -1,5 +1,4 @@
-import { api } from 'lwc';
-import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
+import { LightningElement, api } from 'lwc';
 import { isNativeComponent, reflectAttribute } from 'lightning/utilsPrivate';
 import labelRequired from '@salesforce/label/LightningControl.required';
 import labelInputFileBodyText from '@salesforce/label/LightningInputFile.bodyText';
@@ -11,7 +10,7 @@ const i18n = {
     inputFileButtonLabel: labelInputFileButtonLabel,
 };
 
-export default class LightningPrimitiveInputFile extends LightningShadowBaseClass {
+export default class LightningPrimitiveInputFile extends LightningElement {
     _files = null;
     _helpMessage = '';
 
@@ -98,7 +97,6 @@ export default class LightningPrimitiveInputFile extends LightningShadowBaseClas
     /************************** LIFECYCLE HOOKS **************************/
 
     connectedCallback() {
-        super.connectedCallback();
         this._isNativeShadow = isNativeComponent(this);
         this.dispatchEvent(
             new CustomEvent('privateprimitiveconnected', {

package/src/lightning/primitiveInputRadio/primitiveInputRadio.html

@@ -19,6 +19,6 @@
         </span>
     </div>
     <template if:true={helpMessage}>
-        <div id="help-message" class="slds-form-element__help" data-help-message role="alert" part="help-text">{helpMessage}</div>
+        <div id="help-message" class="slds-form-element__help" data-help-message part="help-text">{helpMessage}</div>
     </template>
 </template>

package/src/lightning/primitiveInputSimple/primitiveInputSimple.html

@@ -1,7 +1,7 @@
 <template>
     <div part="input-text">
         <template if:false={hasExternalLabel}>
-            <label class={computedLabelClass} for="input" part="label" data-form-label id="input-text-label" >
+            <label class={computedLabelClass} for="input" part="label">
                 <template if:true={required}>
                     <abbr class="slds-required" title={i18n.required}>*</abbr>
                 </template>
@@ -60,6 +60,6 @@
         </div>
     </div>
     <template if:true={_helpMessage}>
-        <div id="help-message" class="slds-form-element__help" data-help-message role="alert" part="help-text">{_helpMessage}</div>
+        <div id="help-message" class="slds-form-element__help" data-help-message part="help-text">{_helpMessage}</div>
     </template>
 </template>

package/src/lightning/primitiveInputSimple/primitiveInputSimple.js

@@ -1,5 +1,4 @@
-import { api } from 'lwc';
-import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
+import { LightningElement, api } from 'lwc';
 import labelRequired from '@salesforce/label/LightningControl.required';
 import labelClearInput from '@salesforce/label/LightningControl.clear';
 import labelLoadingIndicator from '@salesforce/label/LightningControl.loading';
@@ -50,7 +49,7 @@ const VALID_NUMBER_FORMATTERS = [
 ];
 const DEFAULT_FORMATTER = VALID_NUMBER_FORMATTERS[0];
 
-export default class LightningPrimitiveInputSimple extends LightningShadowBaseClass {
+export default class LightningPrimitiveInputSimple extends LightningElement {
     @api hasExternalLabel;
     @api computedLabelClass;
     @api required;
@@ -81,10 +80,7 @@ export default class LightningPrimitiveInputSimple extends LightningShadowBaseCl
 
     @api
     get ariaDescribedByElements() {
-        const lable = this._helpMessage
-            ? this.template.querySelector('[data-form-label]')
-            : null;
-        return [lable, this.template.querySelector('[data-help-message]')];
+        return this.template.querySelector('[data-help-message]');
     }
 
     @api
@@ -608,7 +604,6 @@ export default class LightningPrimitiveInputSimple extends LightningShadowBaseCl
     }
 
     connectedCallback() {
-        super.connectedCallback();
         if (this.isTypeNumber) {
             this.updateNumberValue(this._value);
         }

package/src/lightning/primitiveInputToggle/primitiveInputToggle.html

@@ -29,6 +29,6 @@
         </label>
     </div>
     <template if:true={_helpMessage}>
-        <div id="help-message" class="slds-form-element__help" data-help-message role="alert" part="help-text">{_helpMessage}</div>
+        <div id="help-message" class="slds-form-element__help" data-help-message part="help-text">{_helpMessage}</div>
     </template>
 </template>

package/src/lightning/primitiveInputToggle/primitiveInputToggle.js

@@ -1,5 +1,4 @@
-import { api } from 'lwc';
-import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
+import { LightningElement, api } from 'lwc';
 import {
     isNativeComponent,
     normalizeAriaAttribute,
@@ -12,7 +11,7 @@ const i18n = {
     required: labelRequired,
 };
 
-export default class LightningPrimitiveInputToggle extends LightningShadowBaseClass {
+export default class LightningPrimitiveInputToggle extends LightningElement {
     _checked;
     _value = '';
     _ariaLabel;
@@ -146,7 +145,6 @@ export default class LightningPrimitiveInputToggle extends LightningShadowBaseCl
     }
 
     connectedCallback() {
-        super.connectedCallback();
         this._isNativeShadow = isNativeComponent(this);
     }
 

package/src/lightning/progressBar/progressBar.html

@@ -4,10 +4,11 @@
          aria-valuemax="100"
          aria-valuenow={percentValue}
          aria-busy={ariaBusy}
-         role="progressbar" 
-         aria-label={computeAriaLabel}>
+         role="progressbar"
+         aria-label={computeAriaLabel}
+         aria-labelledby="progress-bar-assistive-text">
         <span class="slds-progress-bar__value" style={computedStyle}>
-            <span class="slds-assistive-text">{assistiveText}</span>
+            <span class="slds-assistive-text" id="progress-bar-assistive-text">{assistiveText}</span>
         </span>
     </div>
 </template>

package/src/lightning/prompt/__docs__/prompt.md

@@ -55,7 +55,7 @@ This component uses the Salesforce Lightning Design System (SLDS) [`prompt` blue
     -   `error`: red
     -   `offline`: ​black​
 
-If an invalid value is provided, `LightningPrompt` uses the `default` theme.
+If an invalid value is provided, `LightningPrompt` uses the `default` theme. `LightningPrompt` ignores the `style` attribute.
 
 #### Testing Your Component's Prompt
 

package/src/lightning/sldsGenAiUtils/sldsGenAiUtils.css

@@ -0,0 +1,4 @@
+:host([class*="gen-ai-enabled"]) {
+    padding: 0;
+    margin-bottom: 0;
+}

package/src/lightning/tab/tab.js

@@ -1,16 +1,14 @@
-import { api, track } from 'lwc';
+import { LightningElement, api, track } from 'lwc';
 import { normalizeBoolean } from 'lightning/utilsPrivate';
-import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 /**
  * A single tab in a tabset component.
  * @slot default Placeholder for your content in lightning-tab.
  */
-export default class LightningTab extends LightningShadowBaseClass {
+export default class LightningTab extends LightningElement {
     @track _loadContent = false;
     _registered = false;
 
     connectedCallback() {
-        super.connectedCallback();
         this._connected = true;
         if (this.template.synthetic) {
             this.dispatchEvent(

package/src/lightning/textarea/textarea.css

@@ -1,3 +1,5 @@
+@import 'lightning/sldsGenAiUtils';
+
 :host,
 textarea {
     display: block;

package/src/lightning/textarea/textarea.html

@@ -1,5 +1,5 @@
 <template>
-    <label class={computedLabelClass} for="input"  id="textarea-label" data-form-label>
+    <label class={computedLabelClass} for="input">
         <template if:true={required}>
             <abbr class="slds-required" title={i18n.required}>*</abbr>
         </template>

package/src/lightning/textarea/textarea.js

@@ -438,11 +438,8 @@ export default class LightningTextarea extends LightningElement {
     }
 
     get computedUniqueHelpElementId() {
-        const label = this.template.querySelector('[data-form-label]');
         const helpMessage = this.template.querySelector('[data-help-message]');
-        let spaceSeperatedDescribedByIds = `${getRealDOMId(
-            label
-        )} ${getRealDOMId(helpMessage)}`;
+        let spaceSeperatedDescribedByIds = getRealDOMId(helpMessage);
         if (this.ariaDescribedBy && spaceSeperatedDescribedByIds) {
             spaceSeperatedDescribedByIds += ` ${this.ariaDescribedBy}`;
         } else if (this.ariaDescribedBy) {

package/src/lightning/timepicker/timepicker.html

@@ -40,5 +40,5 @@
         >
         </lightning-base-combobox>
     </div>
-    <div id="error-message" data-error-message class={computedClass} aria-live="assertive">{_errorMessage}</div>
+    <div id="error-message" data-error-message class={computedClass}>{_errorMessage}</div>
 </template>