lightning-base-components 1.17.3-alpha → 1.17.5-alpha

package/metadata/raptor.json

@@ -57,6 +57,7 @@
     "minVersion": "52.0"
   },
   "auraDynamic": {},
+  "auraUtilsMock": {},
   "avatar": {
     "minVersion": "0.0",
     "slotNames": [],
@@ -532,6 +533,7 @@
     "minVersion": "52.0"
   },
   "cmsInternalDeliveryApi": {},
+  "cmsManagementApi": {},
   "cmsOrchestratorApi": {},
   "cmsTypeApi": {},
   "combobox": {
@@ -606,6 +608,7 @@
     ]
   },
   "commerceApi": {},
+  "commerceExtensionApi": {},
   "communityInfoApi": {},
   "communityMicrobatchingApi": {},
   "communityNavigationMenuApi": {},
@@ -636,6 +639,7 @@
       ""
     ]
   },
+  "dataProviderApi": {},
   "datatable": {
     "minVersion": "41.0",
     "slotNames": [],
@@ -958,6 +962,9 @@
       {
         "name": "contexts"
       },
+      {
+        "name": "disabled"
+      },
       {
         "name": "editing"
       },
@@ -1003,6 +1010,9 @@
       {
         "name": "contextName"
       },
+      {
+        "name": "disabled"
+      },
       {
         "name": "editing"
       },
@@ -1042,11 +1052,17 @@
       ""
     ],
     "properties": [
+      {
+        "name": "disabled"
+      },
       {
         "name": "errors"
       },
       {
         "name": "showErrorIcon"
+      },
+      {
+        "name": "variant"
       }
     ],
     "methods": [
@@ -1538,25 +1554,37 @@
   "industriesActionPlanApi": {},
   "industriesActionablelistApi": {},
   "industriesAssessmentApi": {},
+  "industriesAuditTrailExportApi": {},
   "industriesCibApi": {},
   "industriesClmApi": {},
+  "industriesContextApi": {},
+  "industriesCpqApi": {},
+  "industriesCriteriaBasedSearchFilterApi": {},
   "industriesDataloadingApi": {},
   "industriesDecisionMatrixDesignerApi": {},
   "industriesDocgenApi": {},
+  "industriesEducationApi": {},
   "industriesEinsteinAIAcceleratorApi": {},
   "industriesEpcApi": {},
   "industriesEriApi": {},
   "industriesExplainabilityApi": {},
+  "industriesExternalDocumentApi": {},
+  "industriesFeatureValidationApi": {},
+  "industriesFundraisingApi": {},
+  "industriesGroupApi": {},
   "industriesHealthcloudApi": {},
   "industriesHealthcloudHpiApi": {},
   "industriesIdentityVerificationApi": {},
   "industriesInterestTaggingApi": {},
   "industriesLoyaltyEngineApi": {},
+  "industriesPricingApi": {},
   "industriesPublicSectorApi": {},
   "industriesRcgTenantmanagementApi": {},
   "industriesRuleBuilderApi": {},
   "industriesSalesExcellenceApi": {},
+  "industriesSchedulerApi": {},
   "industriesServiceExcellenceApi": {},
+  "industriesServiceprocessApi": {},
   "industriesSustainabilityBeiApi": {},
   "industriesSustainabilityDgfApi": {},
   "industriesSustainabilityRecalculateApi": {},
@@ -1853,6 +1881,9 @@
     "minVersion": "42.0",
     "slotNames": [],
     "properties": [
+      {
+        "name": "autocomplete"
+      },
       {
         "name": "dirty"
       },
@@ -2165,6 +2196,9 @@
       }
     ]
   },
+  "logger": {
+    "minVersion": "0.0"
+  },
   "lookup": {
     "slotNames": [],
     "properties": [
@@ -2317,10 +2351,10 @@
         "name": "disabled"
       },
       {
-        "name": "entityOptions"
+        "name": "errorMessage"
       },
       {
-        "name": "errorMessage"
+        "name": "fieldApiName"
       },
       {
         "name": "fieldLevelHelp"
@@ -2331,12 +2365,21 @@
       {
         "name": "label"
       },
+      {
+        "name": "objectInfos"
+      },
       {
         "name": "pills"
       },
+      {
+        "name": "record"
+      },
       {
         "name": "required"
       },
+      {
+        "name": "selectedTargetApiName"
+      },
       {
         "name": "textInfo"
       },
@@ -2369,6 +2412,9 @@
       {
         "name": "entityOptions"
       },
+      {
+        "name": "entitySelectedAssistiveLabel"
+      },
       {
         "name": "items"
       },
@@ -2378,6 +2424,9 @@
       {
         "name": "placeholder"
       },
+      {
+        "name": "selectedEntityLabel"
+      },
       {
         "name": "showActivityIndicator"
       }
@@ -2521,6 +2570,15 @@
       {
         "name": "filterIconName"
       },
+      {
+        "name": "filterInputText"
+      },
+      {
+        "name": "filterItems"
+      },
+      {
+        "name": "filterLabel"
+      },
       {
         "name": "inputText"
       },
@@ -2755,7 +2813,9 @@
       }
     ]
   },
+  "placeQuoteApi": {},
   "platformExternalServicesApi": {},
+  "platformGlobalizationApi": {},
   "platformNamedCredentialApi": {},
   "platformNotificationUtils": {},
   "platformOverlayUtils": {},
@@ -3086,6 +3146,23 @@
       }
     ]
   },
+  "recordPicker": {
+    "slotNames": [],
+    "properties": [
+      {
+        "name": "filter"
+      },
+      {
+        "name": "label"
+      },
+      {
+        "name": "objectApiName"
+      },
+      {
+        "name": "placeholder"
+      }
+    ]
+  },
   "recordUtils": {},
   "recordViewForm": {
     "minVersion": "41.0",
@@ -3187,8 +3264,10 @@
     ]
   },
   "routingService": {},
+  "salesAutomationRulesApi": {},
   "salesEnablementProgramApi": {},
   "salesPeopleApi": {},
+  "salesUserWorkingHoursApi": {},
   "select": {
     "slotNames": [],
     "properties": [
@@ -3258,6 +3337,48 @@
     "minVersion": "52.0",
     "slotNames": [],
     "methods": [
+      {
+        "name": "acceptCall"
+      },
+      {
+        "name": "addParticipant"
+      },
+      {
+        "name": "declineCall"
+      },
+      {
+        "name": "endCall"
+      },
+      {
+        "name": "hold"
+      },
+      {
+        "name": "merge"
+      },
+      {
+        "name": "mute"
+      },
+      {
+        "name": "pauseRecording"
+      },
+      {
+        "name": "resume"
+      },
+      {
+        "name": "resumeRecording"
+      },
+      {
+        "name": "sendDigits"
+      },
+      {
+        "name": "startPreviewCall"
+      },
+      {
+        "name": "swap"
+      },
+      {
+        "name": "unmute"
+      },
       {
         "name": "updateNextBestActions"
       }
@@ -3417,6 +3538,7 @@
       }
     ]
   },
+  "tableauEmbeddingApi": {},
   "tabset": {
     "minVersion": "44.0",
     "slotNames": [
@@ -3571,6 +3693,7 @@
     ]
   },
   "toastContainer": {
+    "minVersion": "58.0",
     "slotNames": [],
     "properties": [
       {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "lightning-base-components",
-    "version": "1.17.3-alpha",
+    "version": "1.17.5-alpha",
     "license": "MIT",
     "files": [
         "external",
@@ -1010,6 +1010,10 @@
                 "name": "@salesforce/label/LightningInput.helptextAlternativeText",
                 "path": "scopedImports/@salesforce-label-LightningInput.helptextAlternativeText.js"
             },
+            {
+                "name": "@salesforce/label/LightningInput.mailingAddressFieldsUpdateText",
+                "path": "scopedImports/@salesforce-label-LightningInput.mailingAddressFieldsUpdateText.js"
+            },
             {
                 "name": "@salesforce/label/LightningRating.readOnlyAssistiveText",
                 "path": "scopedImports/@salesforce-label-LightningRating.readOnlyAssistiveText.js"
@@ -1078,6 +1082,14 @@
                 "name": "@salesforce/label/LightningToast.close",
                 "path": "scopedImports/@salesforce-label-LightningToast.close.js"
             },
+            {
+                "name": "@salesforce/label/LightningToast.macNavigationAssistiveText",
+                "path": "scopedImports/@salesforce-label-LightningToast.macNavigationAssistiveText.js"
+            },
+            {
+                "name": "@salesforce/label/LightningToast.genericNavigationAssistiveText",
+                "path": "scopedImports/@salesforce-label-LightningToast.genericNavigationAssistiveText.js"
+            },
             {
                 "name": "@salesforce/label/Global_Entity.created_by",
                 "path": "scopedImports/@salesforce-label-Global_Entity.created_by.js"
@@ -1272,6 +1284,7 @@
             "lightning/dialog",
             "lightning/dualListbox",
             "lightning/dynamicIcon",
+            "lightning/f6Controller",
             "lightning/fileDownload",
             "lightning/focusTrap",
             "lightning/formattedAddress",
@@ -1337,6 +1350,7 @@
             "lightning/relativeDateTime",
             "lightning/routingService",
             "lightning/select",
+            "lightning/showToastEvent",
             "lightning/slider",
             "lightning/spinner",
             "lightning/stackedTab",
@@ -1345,6 +1359,8 @@
             "lightning/tabset",
             "lightning/textarea",
             "lightning/tile",
+            "lightning/toast",
+            "lightning/toastContainer",
             "lightning/tree",
             "lightning/treeGrid",
             "lightning/utils",

package/scopedImports/@salesforce-label-LightningInput.mailingAddressFieldsUpdateText.js

@@ -0,0 +1 @@
+export default 'Mailing Address updated for country {0}';

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

@@ -0,0 +1 @@
+export default 'Press Control + F6 to navigate to the next toast notification or focusable region.';

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

@@ -0,0 +1 @@
+export default 'Press Command + F6 to navigate to the next toast notification or focusable region.';

package/src/lightning/ariaObserver/__examples__/connect/connect.html

@@ -0,0 +1,19 @@
+<template>
+    <div>
+        <label id="foo">Foo</label>
+    </div>
+    <div>
+        <label id="bar">Bar</label>
+    </div>
+    <div>
+        <label id="hello">Hello</label>
+    </div>
+    <div>
+        <label id="world">World</label>
+    </div>
+    <div>
+        <ariaobserver-connect-child aria-labelledby={connectIds}></ariaobserver-connect-child>
+        <div>Current Id: {connectIds}</div>
+        <div><button onclick={handleUpdateIds}>Update Ids to 'foo bar hello world'</button></div>
+    </div>
+</template>

package/src/lightning/ariaObserver/__examples__/connect/connect.js

@@ -0,0 +1,10 @@
+import { LightningElement } from 'lwc';
+
+export default class AriaObserverConnect extends LightningElement {
+
+    connectIds = 'foo bar';
+
+    handleUpdateIds() {
+        this.connectIds = 'foo bar hello world';
+    }
+}

package/src/lightning/ariaObserver/__examples__/connectChild/connectChild.html

@@ -0,0 +1,3 @@
+<template>
+    <input type="text" />
+</template>

package/src/lightning/ariaObserver/__examples__/connectChild/connectChild.js

@@ -0,0 +1,45 @@
+import { LightningElement, api } from 'lwc';
+
+import AriaObserver from 'lightning/ariaObserver';
+
+export default class AriaObserverConnectChild extends LightningElement {
+
+    constructor() {
+        super();
+        this.ariaObserver = new AriaObserver(this);
+    }
+
+    connectedCallback() {
+        if (!this.ariaObserver) {
+            this.ariaObserver = new AriaObserver(this);
+        }
+    }
+
+    disconnectedCallback() {
+        if (this.ariaObserver) {
+            this.ariaObserver.disconnect();
+            this.ariaObserver = undefined;
+        }
+    }
+
+    renderedCallback() {
+        this.ariaObserver.sync();
+    }
+
+    _ariaLabelledBy = '';
+
+    @api
+    get ariaLabelledBy() {
+        return this._ariaLabelledBy;
+    }
+    set ariaLabelledBy(refs) {
+        this._ariaLabelledBy = refs;
+
+        this.ariaObserver.connect({
+            targetSelector: 'input',
+            attribute: 'aria-labelledby',
+            id: refs
+        });
+    }
+
+}

package/src/lightning/ariaObserver/ariaObserver.js

@@ -110,7 +110,7 @@ export default class AriaObserver {
             .split(/\s+/)
             .map((ref) => `[id*="${ref}"]`)
             .join(',');
-        const liveId = { selector, callback };
+        const liveId = { refs, selector, callback };
         this.liveIds[refs] = liveId;
     }
 
@@ -165,6 +165,16 @@ export default class AriaObserver {
         }
     }
 
+    privateExtractCorrectElements(selector, elements) {
+        // Example: 'foo' + '-1'
+        const selectors = selector.split(/\s/g);
+        const matchSelectors = `(${selectors.join('|')})`;
+        const regex = new RegExp(`^${matchSelectors}(-[0-9]+)$`);
+        return [...elements].filter((element) => {
+            return regex.test(element.id);
+        });
+    }
+
     privateExtractIds(elements) {
         return elements
             .map((el) => {
@@ -189,7 +199,11 @@ export default class AriaObserver {
                         root.querySelectorAll(thisId.selector)
                     );
                 }
-                const newIds = this.privateExtractIds(thisId.elements);
+                const newThisId = this.privateExtractCorrectElements(
+                    thisId.refs,
+                    thisId.elements
+                );
+                const newIds = this.privateExtractIds(newThisId);
                 // only fire calback if the value changed
                 if (newIds !== thisId.ids) {
                     thisId.callback(newIds);

package/src/lightning/baseCombobox/baseCombobox.js

@@ -363,9 +363,7 @@ export default class LightningBaseCombobox extends LightningElement {
                 ? this.computedButtonTriggerAriaLabel
                 : this.inputLabel,
             [ARIA_INVALID]: this.computedAriaInvalid,
-            [ARIA_ACTIVEDESCENDANT]: this._editingMode
-                ? undefined
-                : this._activeElementDomId,
+            [ARIA_ACTIVEDESCENDANT]: this.computedAriaActiveDescendant,
         });
     }
 
@@ -461,6 +459,16 @@ export default class LightningBaseCombobox extends LightningElement {
         );
     }
 
+    /**
+     * Do not set aria-activedescendant when editing the text in the combobox.
+     * Rest of the times, set it to active element DOM id.
+     */
+    get computedAriaActiveDescendant() {
+        return this.isUserInputDisabled || !this._editingMode
+            ? this._activeElementDomId
+            : undefined;
+    }
+
     get computedAriaAutocomplete() {
         if (this.hasInputPill) {
             // no aria-autocomplete when pill is showing

package/src/lightning/baseCombobox/keyboard.js

@@ -106,6 +106,9 @@ function handleDeletionKeys({ event, dropdownInterface }) {
     if (dropdownInterface.shouldPreventInputDeletion()) {
         event.preventDefault();
     }
+    if (!dropdownInterface.isDropdownVisible()) {
+        dropdownInterface.openDropdownIfNotEmpty();
+    }
 }
 
 function handleTypedCharacters({ event, currentIndex, dropdownInterface }) {

package/src/lightning/breadcrumb/breadcrumb.css

@@ -1,3 +1,6 @@
+/* @import 'lightning/sldsCommon';
+@import './breadcrumb.slds.css'; */
+
 :host {
     display: list-item;
 }

package/src/lightning/breadcrumb/breadcrumb.html

@@ -1,3 +1,3 @@
 <template>
-    <a onclick={handleClick} href={computedHref} aria-current={ariaCurrent}>{label}</a>
+    <a onclick={handleClick} href={computedHref} aria-current={ariaCurrent} part="breadcrumb">{label}</a>
 </template>

package/src/lightning/breadcrumb/breadcrumb.slds.css

@@ -0,0 +1,25 @@
+
+
+/* Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
+  Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
+
+@supports (--styling-hooks: '') {
+  :host([data-render-mode="shadow"]) [part~='breadcrumb'] {
+    /* Host reassignments to composed breadcrumbs for parity with SLDS blueprint
+        https://www.lightningdesignsystem.com/components/breadcrumbs/#Styling-Hooks-Overview */
+    --slds-c-breadcrumbs-spacing-inline-start: var(--slds-c-breadcrumb-spacing-inline-start);
+    --slds-c-breadcrumbs-spacing-inline-end: var(--slds-c-breadcrumb-spacing-inline-end);
+
+    display: block;
+    padding-block-start: 0;
+    padding-inline-end: var(--slds-c-breadcrumb-spacing-inline-end, var(--sds-g-spacing-2, 0.5rem));
+    padding-block-end: 0;
+    padding-inline-start: var(--slds-c-breadcrumb-spacing-inline-start, var(--sds-g-spacing-2, 0.5rem));
+    color: var(--slds-g-color-brand-base-50, var(--sds-g-color-brand-base-50, #0176d3));
+  }
+
+  :host([data-render-mode="shadow"]) [part~='breadcrumb']:hover, [part~='breadcrumb']:focus {
+    text-decoration: none;
+    color: var(--slds-g-color-brand-base-30, var(--sds-g-color-brand-base-30, #014486));
+  }
+}

package/src/lightning/breadcrumbs/breadcrumbs.css

@@ -1,3 +1,6 @@
+/* @import 'lightning/sldsCommon';
+@import './breadcrumbs.slds.css'; */
+
 :host {
     display: block;
 }

package/src/lightning/breadcrumbs/breadcrumbs.html

@@ -1,5 +1,5 @@
 <template>
-    <div class="slds-breadcrumb slds-list_horizontal slds-wrap" role="list">
+    <div class="slds-breadcrumb slds-list_horizontal slds-wrap" role="list" part="breadcrumbs">
         <slot onslotchange={handleSlotChange}></slot>
     </div>
 </template>

package/src/lightning/breadcrumbs/breadcrumbs.slds.css

@@ -0,0 +1,33 @@
+
+
+/* Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
+  Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
+
+@supports (--styling-hooks: '') {
+  :host([data-render-mode="shadow"]) [part~='breadcrumbs'] {
+    flex-wrap: wrap;
+    align-items: flex-start;
+    display: flex;
+  }
+
+  :host([data-render-mode="shadow"]) [part~='breadcrumbs'] ::slotted(*) {
+    position: relative;
+  }
+
+  /* Positions a '>' separator before breadcrumb */
+  :host([data-render-mode="shadow"]) [part~='breadcrumbs'] ::slotted(:not(:first-child))::before {
+    content: '\003E';
+    position: absolute;
+    left: calc((var(--sds-g-spacing-2, 0.5rem) * 0.5) * -1);
+  }
+
+  /* Don't include '>' separator before first breadcrumb */
+  :host([data-render-mode="shadow"]) [part~='breadcrumbs'] ::slotted(:first-child)::before {
+    content: '';
+  }
+
+  /* Don't include spacing before first breadcrumb */
+  :host([data-render-mode="shadow"]) [part~='breadcrumbs'] ::slotted(:first-child) {
+    --slds-c-breadcrumb-spacing-inline-start: 0;
+  }
+}

package/src/lightning/button/button.html

@@ -16,7 +16,8 @@
             aria-haspopup={computedAriaHasPopup}
             aria-live={computedAriaLive}
             aria-pressed={computedAriaPressed}
-            aria-relevant={computedAriaRelevant}>
+            aria-relevant={computedAriaRelevant}
+            tabindex={tabIndex}>
         <template if:true={showIconLeft}>
             <lightning-primitive-icon icon-name={iconName} svg-class={computedIconClass} variant="bare"></lightning-primitive-icon>
         </template>

package/src/lightning/button/button.js

@@ -38,6 +38,15 @@ export default class LightningButton extends LightningPrimitiveButton {
      */
     @api label;
 
+    /**
+     * Reserved for internal use only.
+     * Should be set to -1 if button should not
+     * be focused during tab navigation and should
+     * be set to 0 if button should be focused.
+     * @type {number}
+     */
+    @api tabIndex;
+
     /**
      * The variant changes the appearance of the button.
      * Accepted variants include base, neutral, brand, brand-outline, destructive, destructive-text, inverse, and success.

package/src/lightning/buttonIcon/button-icon.slds.css

@@ -899,6 +899,10 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
       --slds-c-buttonicon-bare-color-border-disabled,
       transparent
     );
+    --slds-c-buttonicon-color-background-disabled: var(
+      --slds-c-buttonicon-bare-color-background-disabled,
+      transparent
+    );
   }
 
   /**
@@ -1128,7 +1132,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
       * outcome is the removal of this class and replacing the class with the SLDS
       * utility package solution.
       */
-  :host([data-render-mode="shadow"]) [part~='button-icon'] .slds-assistive-text {
+  :host([data-render-mode="shadow"]) .slds-assistive-text {
     position: absolute !important;
     margin: -1px !important;
     border: 0 !important;

package/src/lightning/buttonIcon/buttonIcon.html

@@ -13,7 +13,8 @@
             aria-live={computedAriaLive}
             aria-atomic={computedAriaAtomic}
             aria-haspopup={computedAriaHasPopup}
-            part="button button-icon">
+            part="button button-icon"
+            tabindex={tabIndex}>
 
         <lightning-primitive-icon icon-name={iconName} svg-class={computedIconClass} variant="bare"></lightning-primitive-icon>