lightning-base-components 1.15.4-alpha → 1.16.1-alpha

package/metadata/raptor.json

@@ -1331,6 +1331,8 @@
       }
     ]
   },
+  "i18nCldrOptions": {},
+  "i18nService": {},
   "icon": {
     "minVersion": "0.0",
     "slotNames": [],
@@ -2958,7 +2960,9 @@
       }
     ]
   },
-  "refresh": {},
+  "refresh": {
+    "minVersion": "55.0"
+  },
   "relativeDateTime": {
     "minVersion": "0.0",
     "slotNames": [],
@@ -3462,7 +3466,9 @@
   },
   "uiAssistantPlatformApi": {},
   "uiDuplicatesApi": {},
-  "uiGraphQLApi": {},
+  "uiGraphQLApi": {
+    "minVersion": "57.0"
+  },
   "uiLayoutApi": {},
   "uiLearningContentPlatformApi": {},
   "uiListApi": {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "lightning-base-components",
-    "version": "1.15.4-alpha",
+    "version": "1.16.1-alpha",
     "engines": {
         "node": ">=14.18.2"
     },
@@ -993,6 +993,22 @@
                 "name": "@salesforce/label/LightningPrompt.defaultLabel",
                 "path": "scopedImports/@salesforce-label-LightningPrompt.defaultLabel.js"
             },
+            {
+                "name": "@salesforce/label/LightningToast.infoLabel",
+                "path": "scopedImports/@salesforce-label-LightningToast.infoLabel.js"
+            },
+            {
+                "name": "@salesforce/label/LightningToast.warningLabel",
+                "path": "scopedImports/@salesforce-label-LightningToast.warningLabel.js"
+            },
+            {
+                "name": "@salesforce/label/LightningToast.successLabel",
+                "path": "scopedImports/@salesforce-label-LightningToast.successLabel.js"
+            },
+            {
+                "name": "@salesforce/label/LightningToast.errorLabel",
+                "path": "scopedImports/@salesforce-label-LightningToast.errorLabel.js"
+            },
             {
                 "name": "@salesforce/i18n/lang",
                 "path": "scopedImports/@salesforce-i18n-lang.js"
@@ -1190,6 +1206,8 @@
             "lightning/formattedUrl",
             "lightning/groupedCombobox",
             "lightning/helptext",
+            "lightning/i18nCldrOptions",
+            "lightning/i18nService",
             "lightning/icon",
             "lightning/iconSvgTemplates",
             "lightning/iconSvgTemplatesAction",

package/scopedImports/@salesforce-internal-core.appVersion.js

@@ -1 +1 @@
-export default '238';
+export default '240';

package/scopedImports/@salesforce-label-LightningToast.errorLabel.js

@@ -0,0 +1 @@
+export default 'Error';

package/scopedImports/@salesforce-label-LightningToast.infoLabel.js

@@ -0,0 +1 @@
+export default 'Info';

package/scopedImports/@salesforce-label-LightningToast.successLabel.js

@@ -0,0 +1 @@
+export default 'Success';

package/scopedImports/@salesforce-label-LightningToast.warningLabel.js

@@ -0,0 +1 @@
+export default 'Warning';

package/src/lightning/accordion/__docs__/accordion.md

@@ -54,7 +54,7 @@ If you don't pass in a section name, all sections are closed by default.
 <template>
     <lightning-accordion
         allow-multiple-sections-open
-        active-section-name="{activeSections}"
+        active-section-name={activeSections}
     >
         <lightning-accordion-section name="A" label="Accordion Title A">
             <p>This is the content area for section A.</p>
@@ -93,7 +93,7 @@ This example displays the name of the active section.
 
     <lightning-accordion
         allow-multiple-sections-open
-        onsectiontoggle="{handleSectionToggle}"
+        onsectiontoggle={handleSectionToggle}
         active-section-name="A"
     >
         <lightning-accordion-section name="A" label="Accordion Title A">
@@ -140,11 +140,11 @@ This example expands section B when the **Expand Section B** button is pressed.
 
 ```html
 <template>
-    <lightning-button label="Expand Section B" onclick="{handleClick}">
+    <lightning-button label="Expand Section B" onclick={handleClick}>
     </lightning-button>
     <lightning-accordion
-        active-section-name="{section}"
-        onsectiontoggle="{handleSectionToggle}"
+        active-section-name={section}
+        onsectiontoggle={handleSectionToggle}
     >
         <lightning-accordion-section name="A" label="A"
             >Content A</lightning-accordion-section

package/src/lightning/ariaObserver/ariaObserver.js

@@ -19,7 +19,9 @@ function extractElements(root, ids) {
     }
     // We must query the elements in the order of ids, so that
     // the content will be extracted in the correct order.
-    return splitIds(ids).map((id) => root.querySelector(`#${id}`));
+    return splitIds(ids)
+        .map((id) => root.querySelector(`#${id}`))
+        .filter((el) => !!el);
 }
 
 function extractContent(elements) {
@@ -86,7 +88,7 @@ function removeAriaRefWhenPossible(elm, attrName, computedIds) {
 
 function createPlaceholderContainer() {
     const container = document.createElement('span');
-    container.style.display = 'none';
+    container.className = 'slds-assistive-text';
     container.setAttribute('placeholder-container', '');
     return container;
 }

package/src/lightning/breadcrumb/__docs__/breadcrumb.md

@@ -35,13 +35,13 @@ custom navigation instead.
         <lightning-breadcrumb
             label="Parent Account"
             href="path/to/place/1"
-            onclick="{handleNavigateToCustomPage1}"
+            onclick={handleNavigateToCustomPage1}
         >
         </lightning-breadcrumb>
         <lightning-breadcrumb
             label="Case"
             href="path/to/place/2"
-            onclick="{handleNavigateToCustomPage2}"
+            onclick={handleNavigateToCustomPage2}
         >
         </lightning-breadcrumb>
     </lightning-breadcrumbs>
@@ -74,12 +74,12 @@ values.
 ```html
 <template>
     <lightning-breadcrumbs>
-        <template for:each="{myBreadcrumbs}" for:item="crumbs">
+        <template for:each={myBreadcrumbs} for:item="crumbs">
             <lightning-breadcrumb
-                key="{crumbs.id}"
-                label="{crumbs.label}"
-                name="{crumbs.name}"
-                onclick="{handleNavigateTo}"
+                key={crumbs.id}
+                label={crumbs.label}
+                name={crumbs.name}
+                onclick={handleNavigateTo}
             >
             </lightning-breadcrumb>
         </template>

package/src/lightning/button/__docs__/button.md

@@ -49,7 +49,7 @@ Here's an example that creates a button with the `brand` variant, and displays
         variant="brand"
         label="Start"
         title="Begins the task"
-        onclick="{handleClick}"
+        onclick={handleClick}
     >
     </lightning-button>
 </template>
@@ -66,7 +66,7 @@ of the label by default, so the example uses `icon-position` to display it on th
         label="Download"
         icon-name="utility:download"
         icon-position="right"
-        onclick="{handleClick}"
+        onclick={handleClick}
     >
     </lightning-button>
 </template>

package/src/lightning/button/button.css

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

package/src/lightning/button/button.html

@@ -1,26 +1,32 @@
 <template>
     <button class={computedButtonClass}
             disabled={disabled}
+            aria-disabled={disabled}
             name={name}
-            accesskey={computedAccessKey}
-            title={computedTitle}
+            accesskey={accessKey}
+            title={title}
             type={normalizedType}
             value={value}
             onfocus={handleButtonFocus}
             onblur={handleButtonBlur}
-            aria-label={computedAriaLabel}
+            onclick={handleButtonClick}
+            aria-atomic={computedAriaAtomic}
+            aria-busy={computedAriaBusy}
+            aria-label={ariaLabel}
             aria-expanded={computedAriaExpanded}
             aria-haspopup={computedAriaHasPopup}
             aria-live={computedAriaLive}
-            aria-atomic={computedAriaAtomic}>
+            aria-pressed={computedAriaPressed}
+            aria-relevant={computedAriaRelevant}
+            part={computedPart}>
         <template if:true={showIconLeft}>
-            <lightning-primitive-icon icon-name={iconName} svg-class={computedIconClass} variant="bare"></lightning-primitive-icon>
+            <lightning-primitive-icon part="start" icon-name={iconName} svg-class={computedIconClass} variant="bare"></lightning-primitive-icon>
         </template>
 
         {label}
 
         <template if:true={showIconRight}>
-            <lightning-primitive-icon icon-name={iconName} svg-class={computedIconClass} variant="bare"></lightning-primitive-icon>
+            <lightning-primitive-icon part="end" icon-name={iconName} svg-class={computedIconClass} variant="bare"></lightning-primitive-icon>
         </template>
     </button>
 </template>

package/src/lightning/button/button.js

@@ -1,8 +1,9 @@
-import { api, track } from 'lwc';
+import { api } from 'lwc';
 import { classSet } from 'lightning/utils';
 import {
     normalizeString as normalize,
     normalizeBoolean,
+    reflectAttribute,
 } from 'lightning/utilsPrivate';
 import LightningPrimitiveButton from 'lightning/primitiveButton';
 import template from './button.html';
@@ -12,6 +13,8 @@ import template from './button.html';
  */
 export default class LightningButton extends LightningPrimitiveButton {
     static delegatesFocus = true;
+    static shadowSupportMode = 'any';
+    _normalizedVariant = 'neutral';
     _stretch = false;
 
     /**
@@ -45,7 +48,29 @@ export default class LightningButton extends LightningPrimitiveButton {
      * @type {string}
      * @default neutral
      */
-    @api variant = 'neutral';
+    @api
+    get variant() {
+        return this.originalVariant;
+    }
+
+    set variant(value) {
+        this.originalVariant = value;
+        this._normalizedVariant = normalize(value, {
+            fallbackValue: 'neutral',
+            validValues: [
+                'base',
+                'neutral',
+                'brand',
+                'brand-outline',
+                'destructive',
+                'destructive-text',
+                'inverse',
+                'success',
+            ],
+        });
+
+        reflectAttribute(this, 'variant', this._normalizedVariant);
+    }
 
     /**
      * The Lightning Design System name of the icon.
@@ -66,6 +91,8 @@ export default class LightningButton extends LightningPrimitiveButton {
      */
     @api iconPosition = 'left';
 
+    _originalStretch = false;
+    _normalizedStretch = false;
     /**
      * Setting it to true allows the button to take up the entire available width.
      * This value defaults to false.
@@ -75,11 +102,14 @@ export default class LightningButton extends LightningPrimitiveButton {
      */
     @api
     get stretch() {
-        return this._stretch;
+        return this._originalStretch;
     }
 
     set stretch(value) {
-        this._stretch = normalizeBoolean(value);
+        this._originalStretch = value;
+        this._normalizedStretch = normalizeBoolean(value);
+
+        reflectAttribute(this, 'stretch', this._normalizedStretch);
     }
 
     /**
@@ -97,8 +127,6 @@ export default class LightningButton extends LightningPrimitiveButton {
      */
     @api disableAnimation;
 
-    @track title = null;
-
     render() {
         return template;
     }
@@ -107,41 +135,21 @@ export default class LightningButton extends LightningPrimitiveButton {
         const classes = classSet(super.computedButtonClass);
         return classes
             .add({
-                'slds-button_neutral': this.normalizedVariant === 'neutral',
-                'slds-button_brand': this.normalizedVariant === 'brand',
+                'slds-button_neutral': this._normalizedVariant === 'neutral',
+                'slds-button_brand': this._normalizedVariant === 'brand',
                 'slds-button_outline-brand':
-                    this.normalizedVariant === 'brand-outline',
+                    this._normalizedVariant === 'brand-outline',
                 'slds-button_destructive':
-                    this.normalizedVariant === 'destructive',
+                    this._normalizedVariant === 'destructive',
                 'slds-button_text-destructive':
-                    this.normalizedVariant === 'destructive-text',
-                'slds-button_inverse': this.normalizedVariant === 'inverse',
-                'slds-button_success': this.normalizedVariant === 'success',
+                    this._normalizedVariant === 'destructive-text',
+                'slds-button_inverse': this._normalizedVariant === 'inverse',
+                'slds-button_success': this._normalizedVariant === 'success',
                 'slds-button_stretch': this.stretch,
             })
             .toString();
     }
 
-    get computedTitle() {
-        return this.title;
-    }
-
-    get normalizedVariant() {
-        return normalize(this.variant, {
-            fallbackValue: 'neutral',
-            validValues: [
-                'base',
-                'neutral',
-                'brand',
-                'brand-outline',
-                'destructive',
-                'destructive-text',
-                'inverse',
-                'success',
-            ],
-        });
-    }
-
     get normalizedType() {
         return normalize(this.type, {
             fallbackValue: 'button',
@@ -183,6 +191,18 @@ export default class LightningButton extends LightningPrimitiveButton {
         this.dispatchEvent(new CustomEvent('blur'));
     }
 
+    handleButtonClick() {
+        // In native shadow mode, parent form can't be submitted from within the
+        // shadow boundary, so we need to manually find the parent form and submit.
+        // Once TD-0118070 is delivered, we can access the parent form using `elementInternals.form`
+        if (!this.template.synthetic && this.normalizedType === 'submit') {
+            const form = this.template.host.closest('form');
+            if (form) {
+                form.requestSubmit();
+            }
+        }
+    }
+
     /**
      * Sets focus on the button.
      */
@@ -203,29 +223,46 @@ export default class LightningButton extends LightningPrimitiveButton {
         }
     }
 
+    get button() {
+        return this.template.querySelector('button');
+    }
+
     /**
      * Once we are connected, we fire a register event so the button-group (or other) component can register
      * the buttons.
      */
     connectedCallback() {
-        this._connected = true;
-    }
+        // Set `data-render-mode` attribute in native shadow mode
+        if (!this.template.synthetic) {
+            this.template.host.setAttribute('data-render-mode', 'shadow');
+        }
 
-    get button() {
-        return this.template.querySelector('button');
+        if (!this._connected) {
+            reflectAttribute(this, 'variant', this._normalizedVariant);
+            this._connected = true;
+        }
     }
 
     renderedCallback() {
         // initialize aria attributes in primitiveButton
         super.renderedCallback();
-        // button is inherit from primitiveButton, button.css not working in this case.
+        // button inherits from primitiveButton, button.css not working in this case.
         // change host style to disable pointer event.
         this.template.host.style.pointerEvents = this.disabled ? 'none' : '';
     }
 
     disconnectedCallback() {
+        super.disconnectedCallback();
         this._connected = false;
     }
+
+    get computedPart() {
+        if (!this.template.synthetic) {
+            return 'button';
+        }
+
+        return undefined;
+    }
 }
 
 LightningButton.interopMap = {