lightning-base-components 1.13.6-alpha → 1.13.10-alpha

package/metadata/raptor.json

@@ -31,6 +31,27 @@
   "actions": {
     "minVersion": "50.0"
   },
+  "alert": {
+    "minVersion": "54.0",
+    "slotNames": [],
+    "properties": [
+      {
+        "name": "label"
+      },
+      {
+        "name": "message"
+      },
+      {
+        "name": "theme"
+      },
+      {
+        "name": "variant"
+      }
+    ]
+  },
+  "analyticsDataServiceApi": {
+    "minVersion": "52.0"
+  },
   "analyticsWaveApi": {
     "minVersion": "52.0"
   },
@@ -343,6 +364,9 @@
       "title"
     ],
     "properties": [
+      {
+        "name": "headingLevel"
+      },
       {
         "name": "iconName"
       },
@@ -538,11 +562,30 @@
     ]
   },
   "commerceApi": {},
+  "communityMicrobatchingApi": {},
   "communityNavigationMenuApi": {},
   "communityRecordSeoPropertiesApi": {},
   "configProvider": {
     "minVersion": "0.0"
   },
+  "confirm": {
+    "minVersion": "54.0",
+    "slotNames": [],
+    "properties": [
+      {
+        "name": "label"
+      },
+      {
+        "name": "message"
+      },
+      {
+        "name": "theme"
+      },
+      {
+        "name": "variant"
+      }
+    ]
+  },
   "context": {
     "slotNames": [
       ""
@@ -600,6 +643,9 @@
       {
         "name": "renderConfig"
       },
+      {
+        "name": "renderMode"
+      },
       {
         "name": "resizeColumnDisabled"
       },
@@ -777,7 +823,9 @@
   "empApi": {
     "minVersion": "44.0"
   },
-  "experienceMarketingIntegrationApi": {},
+  "experienceMarketingIntegrationApi": {
+    "minVersion": "54.0"
+  },
   "fieldDependencyManager": {},
   "fieldUtils": {},
   "fileUpload": {
@@ -1236,6 +1284,11 @@
       {
         "name": "iconVariant"
       }
+    ],
+    "methods": [
+      {
+        "name": "focus"
+      }
     ]
   },
   "icon": {
@@ -1296,8 +1349,18 @@
     "slotNames": []
   },
   "iconUtils": {},
+  "industriesCibApi": {},
   "industriesDecisionMatrixDesignerApi": {},
+  "industriesExplainabilityApi": {},
+  "industriesIdentityVerificationApi": {},
+  "industriesInterestTaggingApi": {},
+  "industriesLoyaltyEngineApi": {},
+  "industriesRcgTenantmanagementApi": {},
   "industriesRuleBuilderApi": {},
+  "industriesSustainabilityRecalculateApi": {},
+  "industriesSustainabilityRecordLockUnlockApi": {},
+  "industriesSustainabilityReferenceDataApi": {},
+  "industriesVideoVisitsApi": {},
   "input": {
     "minVersion": "0.0",
     "slotNames": [],
@@ -2277,6 +2340,12 @@
   "modal": {
     "slotNames": [],
     "properties": [
+      {
+        "name": "description"
+      },
+      {
+        "name": "disableClose"
+      },
       {
         "name": "label"
       },
@@ -2586,6 +2655,27 @@
       }
     ]
   },
+  "prompt": {
+    "minVersion": "54.0",
+    "slotNames": [],
+    "properties": [
+      {
+        "name": "defaultValue"
+      },
+      {
+        "name": "label"
+      },
+      {
+        "name": "message"
+      },
+      {
+        "name": "theme"
+      },
+      {
+        "name": "variant"
+      }
+    ]
+  },
   "purifyLib": {},
   "quickActionPanel": {
     "minVersion": "52.0",
@@ -3319,8 +3409,20 @@
     "minVersion": "45.0"
   },
   "uiRecordAvatarApi": {},
-  "uiRelatedListApi": {},
+  "uiRelatedListApi": {
+    "minVersion": "53.0"
+  },
+  "unstable_uiActionsApi": {},
+  "unstable_uiAppsApi": {},
+  "unstable_uiDuplicatesApi": {},
+  "unstable_uiLayoutApi": {},
+  "unstable_uiListApi": {},
+  "unstable_uiListsApi": {},
+  "unstable_uiLookupsApi": {},
+  "unstable_uiObjectInfoApi": {},
+  "unstable_uiRecordActionsApi": {},
   "unstable_uiRecordApi": {},
+  "unstable_uiRecordAvatarApi": {},
   "unstable_uiRelatedListApi": {},
   "userConsentCookie": {
     "minVersion": "53.0"

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "lightning-base-components",
-    "version": "1.13.6-alpha",
+    "version": "1.13.10-alpha",
     "engines": {
         "node": ">=12.18.3"
     },
@@ -641,6 +641,10 @@
                 "name": "@salesforce/label/LightningDateTimePicker.selectDate",
                 "path": "scopedImports/@salesforce-label-LightningDateTimePicker.selectDate.js"
             },
+            {
+                "name": "@salesforce/label/LightningDateTimePicker.selectDateFor",
+                "path": "scopedImports/@salesforce-label-LightningDateTimePicker.selectDateFor.js"
+            },
             {
                 "name": "@salesforce/label/LightningDateTimePicker.dateLabel",
                 "path": "scopedImports/@salesforce-label-LightningDateTimePicker.dateLabel.js"
@@ -789,6 +793,10 @@
                 "name": "@salesforce/label/LightningLookup.recentObject",
                 "path": "scopedImports/@salesforce-label-LightningLookup.recentObject.js"
             },
+            {
+                "name": "@salesforce/label/LightningLookup.recentItems",
+                "path": "scopedImports/@salesforce-label-LightningLookup.recentItems.js"
+            },
             {
                 "name": "@salesforce/label/LightningLookup.resultsListHeaderMobile",
                 "path": "scopedImports/@salesforce-label-LightningLookup.resultsListHeaderMobile.js"
@@ -933,6 +941,34 @@
                 "name": "@salesforce/label/LightningRating.nStars",
                 "path": "scopedImports/@salesforce-label-LightningRating.nStars.js"
             },
+            {
+                "name": "@salesforce/label/LightningModalBase.close",
+                "path": "scopedImports/@salesforce-label-LightningModalBase.close.js"
+            },
+            {
+                "name": "@salesforce/label/LightningModalBase.waitstate",
+                "path": "scopedImports/@salesforce-label-LightningModalBase.waitstate.js"
+            },
+            {
+                "name": "@salesforce/label/LightningInteractiveDialogBase.ok",
+                "path": "scopedImports/@salesforce-label-LightningInteractiveDialogBase.ok.js"
+            },
+            {
+                "name": "@salesforce/label/LightningInteractiveDialogBase.cancel",
+                "path": "scopedImports/@salesforce-label-LightningInteractiveDialogBase.cancel.js"
+            },
+            {
+                "name": "@salesforce/label/LightningAlert.defaultLabel",
+                "path": "scopedImports/@salesforce-label-LightningAlert.defaultLabel.js"
+            },
+            {
+                "name": "@salesforce/label/LightningConfirm.defaultLabel",
+                "path": "scopedImports/@salesforce-label-LightningConfirm.defaultLabel.js"
+            },
+            {
+                "name": "@salesforce/label/LightningPrompt.defaultLabel",
+                "path": "scopedImports/@salesforce-label-LightningPrompt.defaultLabel.js"
+            },
             {
                 "name": "@salesforce/i18n/lang",
                 "path": "scopedImports/@salesforce-i18n-lang.js"

package/scopedImports/@salesforce-label-LightningAlert.defaultLabel.js

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

package/scopedImports/@salesforce-label-LightningConfirm.defaultLabel.js

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

package/scopedImports/@salesforce-label-LightningDateTimePicker.selectDateFor.js

@@ -0,0 +1 @@
+export default 'Select a date for {0}';

package/scopedImports/@salesforce-label-LightningInteractiveDialogBase.cancel.js

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

package/scopedImports/@salesforce-label-LightningInteractiveDialogBase.ok.js

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

package/scopedImports/@salesforce-label-LightningLookup.recentItems.js

@@ -0,0 +1 @@
+export default 'Recent Items';

package/scopedImports/@salesforce-label-LightningModalBase.close.js

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

package/scopedImports/@salesforce-label-LightningModalBase.waitstate.js

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

package/scopedImports/@salesforce-label-LightningPrompt.defaultLabel.js

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

package/src/lightning/baseCombobox/baseCombobox.html

@@ -10,30 +10,56 @@
                 specifically it may be problematic for cases when a selection has already been made say via pills and then the validation hint
                 is no longer correct/relevant
             -->
-            <input id="input"
-                class={computedInputClass}
-                type="text"
-                role="combobox"
-                aria-expanded={computedAriaExpanded}
-                aria-haspopup="listbox"
-                required={required}
-                readonly={_inputAriaReadOnly}
-                autocomplete={autocomplete}
-                value={computedInputValue}
-                name={name}
-                placeholder={computedPlaceholder}
-                maxlength={inputMaxlength}
-                disabled={disabled}
-                aria-readonly={_inputAriaReadOnly}
-                aria-autocomplete={computedAriaAutocomplete}
-                aria-owns="dropdown-element"
-                aria-label={inputLabel}
-                onfocus={handleFocus}
-                onselect={handleInputSelect}
-                onchange={handleTextChange}
-                oninput={handleInput}
-                onkeydown={handleInputKeyDown}
-                onblur={handleBlur}>
+            <template if:false={isUserInputDisabled}>
+                <input id="combobox-input"
+                    class={computedInputClass}
+                    type="text"
+                    role="combobox"
+                    aria-expanded={computedAriaExpanded}
+                    aria-haspopup="listbox"
+                    required={required}
+                    readonly={_inputAriaReadOnly}
+                    autocomplete={autocomplete}
+                    value={computedInputValue}
+                    data-value={computedInputValue}
+                    name={name}
+                    placeholder={computedPlaceholder}
+                    maxlength={inputMaxlength}
+                    disabled={disabled}
+                    aria-readonly={_inputAriaReadOnly}
+                    aria-autocomplete={computedAriaAutocomplete}
+                    aria-owns="dropdown-element"
+                    aria-label={inputLabel}
+                    onfocus={handleFocus}
+                    onselect={handleInputSelect}
+                    onchange={handleTextChange}
+                    oninput={handleInput}
+                    onkeydown={handleInputKeyDown}
+                    onblur={handleBlur}>
+            </template>
+            <template if:true={isUserInputDisabled}>
+                <button id="combobox-button"
+                    type="button"
+                    class={computedInputClass}
+                    aria-expanded={computedAriaExpanded}
+                    aria-haspopup="listbox"
+                    name={name}
+                    data-value={computedInputValue}
+                    disabled={disabled}
+                    aria-label={computedButtonTriggerAriaLabel}
+                    onfocus={handleFocus}
+                    onkeydown={handleInputKeyDown}
+                    onblur={handleBlur}>
+                    <span class="slds-truncate">
+                        <template if:true={computedInputValue}>
+                            {computedInputValue}
+                        </template>
+                        <template if:false={computedInputValue}>
+                            {computedPlaceholder}
+                        </template>
+                    </span>
+                </button>
+            </template>
             <template if:true={hasInputPill}>
                 <div class="slds-input__icon-group slds-input__icon-group_right">
                     <button onclick={handlePillRemove} type="button"

package/src/lightning/baseCombobox/baseCombobox.js

@@ -162,7 +162,7 @@ export default class LightningBaseCombobox extends LightningElement {
     }
 
     get inputId() {
-        return getRealDOMId(this.template.querySelector('input'));
+        return getRealDOMId(this.inputElement);
     }
 
     get computedAriaDescribedBy() {
@@ -319,7 +319,7 @@ export default class LightningBaseCombobox extends LightningElement {
     }
 
     synchronizeA11y() {
-        const input = this.template.querySelector('input');
+        const input = this.inputElement;
         if (!input) {
             return;
         }
@@ -328,7 +328,9 @@ export default class LightningBaseCombobox extends LightningElement {
             [ARIA_DESCRIBEDBY]: this.computedAriaDescribedBy,
             [ARIA_ACTIVEDESCENDANT]: this._activeElementDomId,
             [ARIA_CONTROLS]: this.computedInputControls,
-            [ARIA_LABEL]: this.inputLabel,
+            [ARIA_LABEL]: this.isUserInputDisabled
+                ? this.computedButtonTriggerAriaLabel
+                : this.inputLabel,
         });
     }
 
@@ -387,24 +389,40 @@ export default class LightningBaseCombobox extends LightningElement {
         return itemCopy;
     }
 
-    get _inputAriaReadOnly() {
-        let isAutocompleteEnabled =
-                this.autocomplete && this.autocomplete !== 'off',
-            isStandardVariant = this.variant === VARIANT.STANDARD,
-            isDefaultReadOnlyTypes = isStandardVariant || this.hasInputPill;
+    get isAutocompleteEnabled() {
+        return this.autocomplete && this.autocomplete !== 'off';
+    }
+
+    get isStandardVariant() {
+        return this.variant === VARIANT.STANDARD;
+    }
+
+    get isDefaultReadOnlyTypes() {
+        return this.isStandardVariant || this.hasInputPill;
+    }
 
+    /**
+     * Returns true for comboboxes that never allow user input
+     * Used to determine if input or button should be rendered
+     */
+    get isUserInputDisabled() {
+        return this.isStandardVariant && !this.isAutocompleteEnabled;
+    }
+
+    get _inputAriaReadOnly() {
         // For standard combobox, if the dropdown is open, we must make the input readonly,
         // so the user can type and search in the dropdown list
         // For grouped combobox, the input must remain editable because the search is done through
         // the input.
-        if (this._dropdownVisible && isStandardVariant) {
+        if (this._dropdownVisible && this.isStandardVariant) {
             return true;
         }
 
         return (
             // we want Autocomplete to override the "default assumptions"
             // UNLESS the parent component deliberately determines it is readOnly
-            this._readonly || (!isAutocompleteEnabled && isDefaultReadOnlyTypes)
+            this._readonly ||
+            (!this.isAutocompleteEnabled && this.isDefaultReadOnlyTypes)
         );
     }
 
@@ -425,6 +443,17 @@ export default class LightningBaseCombobox extends LightningElement {
         return this.hasInputPill ? this.inputPill.label : this.inputText;
     }
 
+    get computedButtonTriggerAriaLabel() {
+        const label = this.inputLabel;
+        const value = this.computedInputValue || this.computedPlaceholder;
+
+        if (!label) {
+            return value;
+        }
+
+        return `${label}, ${value}`;
+    }
+
     handleListboxScroll(event) {
         // We don't want this to bubble up to the modal which due to event retargeting wouldn't be able
         // to know what is actually being scrolled and thus may lead to the scrolling of the modal
@@ -518,15 +547,15 @@ export default class LightningBaseCombobox extends LightningElement {
     }
 
     get computedInputClass() {
-        const classes = classSet('slds-input slds-combobox__input');
-        if (this.hasInputPill) {
-            classes.add('slds-combobox__input-value');
-        } else {
-            classes.add({
-                'slds-input-has-icon_group-right':
-                    this.showInputActivityIndicator,
-            });
-        }
+        const classes = classSet('slds-combobox__input');
+        classes.add({
+            'slds-input_faux': this.isUserInputDisabled, //rendering button
+            'slds-input': !this.isUserInputDisabled, //rendering input
+            'slds-is-disabled': this.disabled,
+            'slds-combobox__input-value': this.computedInputValue,
+            'slds-input-has-icon_group-right':
+                !this.computedInputValue && this.showInputActivityIndicator,
+        });
         return classes.toString();
     }
 
@@ -548,7 +577,6 @@ export default class LightningBaseCombobox extends LightningElement {
         if (event.target.hasAttribute('aria-selected')) {
             event.stopPropagation();
             event.preventDefault();
-
             this.selectOptionAndCloseDropdown(event.target);
         }
     }
@@ -807,7 +835,7 @@ export default class LightningBaseCombobox extends LightningElement {
     }
 
     get inputElement() {
-        return this.template.querySelector('input');
+        return this.template.querySelector('.slds-combobox__input');
     }
 
     // remove-next-line-for-c-namespace
@@ -821,7 +849,7 @@ export default class LightningBaseCombobox extends LightningElement {
         }
 
         this._autoPosition.start({
-            target: () => this.template.querySelector('input'),
+            target: () => this.inputElement,
             element: () => this.template.querySelector('div.slds-dropdown'),
             align: {
                 horizontal: Direction.Left,
@@ -932,12 +960,9 @@ export default class LightningBaseCombobox extends LightningElement {
                 return that._inputAriaReadOnly;
             },
             shouldPreventInputDeletion() {
-                let isAutocompleteEnabled =
-                        that.autocomplete && that.autocomplete !== 'off',
-                    isStandardVariant = that.variant === VARIANT.STANDARD,
-                    isDefaultReadOnlyTypes =
-                        isStandardVariant || that.hasInputPill;
-                return isAutocompleteEnabled && isDefaultReadOnlyTypes;
+                return (
+                    that.isAutocompleteEnabled && that.isDefaultReadOnlyTypes
+                );
             },
             highlightOptionWithText(currentIndex, text) {
                 // This only supports a flat structure, groups are not supported

package/src/lightning/card/card.html

@@ -9,7 +9,7 @@
                 </template>
                 <div class="slds-media__body">
                     <template if:true={hasTitle}>
-                        <h2 class="slds-card__header-title">
+                        <h2 aria-level={privateHeadingAriaLevel} class="slds-card__header-title">
                             <span class="slds-text-heading_small slds-truncate">
                                 <template if:true={hasStringTitle}>
                                     {title}
@@ -20,6 +20,12 @@
                             </span>
                         </h2>
                     </template>
+                    <!-- This dummy placeholder slot is required because
+                        a slot's presence is verified by assignedElements count
+                        and not whether the slot itself is present or not -->
+                    <template if:false={hasTitle}>
+                        <slot name="title" class="slds-hide"></slot>
+                    </template>
                 </div>
                 <div class="slds-no-flex">
                     <slot name="actions"></slot>

package/src/lightning/card/card.js

@@ -1,6 +1,11 @@
 import { LightningElement, api, track } from 'lwc';
 import { classSet } from 'lightning/utils';
-import { isNarrow, isBase } from './utils';
+import {
+    isNarrow,
+    isBase,
+    isHeadingLevelValid,
+    DEFAULT_HEADING_LEVEL,
+} from './utils';
 
 /**
  * Cards apply a container around a related grouping of information.
@@ -68,13 +73,36 @@ export default class LightningCard extends LightningElement {
             this.showFooter = this.footerSlot.assignedElements().length !== 0;
         }
 
-        // initial check for no items
+        // real title slot will be null if a string title is present
         if (this.titleSlot) {
             const hasSlotTitle = this.titleSlot.assignedElements().length !== 0;
             this.hasTitle = hasSlotTitle || this.hasStringTitle;
         }
     }
 
+    privateHeadingAriaLevel = DEFAULT_HEADING_LEVEL;
+
+    set headingLevel(value) {
+        if (isHeadingLevelValid(value)) {
+            this.privateHeadingAriaLevel = value;
+        } else {
+            this.privateHeadingAriaLevel = DEFAULT_HEADING_LEVEL;
+        }
+    }
+
+    /**
+     * The headingLevel changes the 'aria-level' attribute value of
+     * <h2> tag in the markup for the card's title element. It can take
+     * values of (1, 2, 3, 4, 5, 6)
+     *
+     * @type {string | number}
+     * @default 2
+     */
+    @api
+    get headingLevel() {
+        return this.privateHeadingAriaLevel;
+    }
+
     get titleSlot() {
         return this.template.querySelector('slot[name=title]');
     }

package/src/lightning/card/utils.js

@@ -1,3 +1,10 @@
+/**
+ * These are all values that can be set to "aria-level" attribute of h2 tag for the card's title.
+ */
+export const VALID_HEADING_LEVELS = ['1', '2', '3', '4', '5', '6'];
+
+export const DEFAULT_HEADING_LEVEL = '2';
+
 export function isNarrow(variant) {
     return typeof variant === 'string' && variant.toLowerCase() === 'narrow';
 }
@@ -5,3 +12,10 @@ export function isNarrow(variant) {
 export function isBase(variant) {
     return typeof variant === 'string' && variant.toLowerCase() === 'base';
 }
+
+export function isHeadingLevelValid(level) {
+    return (
+        (typeof level === 'string' || typeof level === 'number') &&
+        VALID_HEADING_LEVELS.includes(String(level))
+    );
+}

package/src/lightning/combobox/combobox.css

@@ -1,3 +1,15 @@
 :host {
     display: block;
 }
+
+/**
+     This is adding the red border around the combobox input when there's an error
+     Should be removed once SLDS has added support for this (@W-9240038)
+*/
+:host.slds-has-error {
+    --slds-c-input-color-border:#ea001e;
+    --slds-c-input-shadow:#ea001e 0 0 0 1px inset;
+    --slds-c-input-color-background:var(--slds-c-input-color-background, var(--sds-c-input-color-background, white));
+    --slds-c-input-text-color:var(--slds-c-input-text-color, var(--sds-c-input-text-color), #74747);
+}
+

package/src/lightning/combobox/combobox.html

@@ -15,6 +15,7 @@
             placeholder={placeholder}
             items={_items}
             input-text={_selectedLabel}
+            input-label={label}
             input-icon-size="xx-small"
             input-icon-name="utility:down"
             show-dropdown-activity-indicator={spinnerActive}