lightning-base-components 1.27.2-alpha → 1.27.5-alpha

package/src/lightning/calendar/calendar.js

@@ -11,7 +11,6 @@ import labelYearSelector from '@salesforce/label/LightningDateTimePicker.yearSel
 import { api, track } from 'lwc';
 import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 import { classSet } from 'lightning/utils';
-import { isCSR } from 'lightning/utilsPrivate';
 import { generateUniqueId } from 'lightning/inputUtils';
 import firstDayOfWeek from '@salesforce/i18n/firstDayOfWeek';
 import { handleKeyDownOnCalendar } from './keyboard';
@@ -29,6 +28,7 @@ import {
     getMonthNames,
 } from 'lightning/internationalizationLibrary';
 import { STANDARD_DATE_FORMAT, TIME_SEPARATOR } from 'lightning/iso8601Utils';
+import { features } from 'lightning/features';
 
 const i18n = {
     ariaLabelMonth: labelAriaLabelMonth,
@@ -96,6 +96,7 @@ export default class LightningCalendar extends LightningShadowBaseClass {
     }
 
     renderedCallback() {
+        // eslint-disable-next-line @lwc/lwc/ssr-no-unsupported-properties
         this.dispatchEvent(new CustomEvent('ready'));
     }
 
@@ -119,7 +120,7 @@ export default class LightningCalendar extends LightningShadowBaseClass {
      */
     @api
     focus() {
-        // eslint-disable-next-line @lwc/lwc/no-async-operation
+        // eslint-disable-next-line @lwc/lwc/no-async-operation, @lwc/lwc/ssr-no-restricted-browser-globals
         requestAnimationFrame(() => {
             const dateElement = this.getFocusableDateCell();
             if (dateElement) {
@@ -142,6 +143,36 @@ export default class LightningCalendar extends LightningShadowBaseClass {
         return getMonthNames()[renderedMonth].fullName;
     }
 
+    get computedNextDisabled() {
+        if (!features.enableCalendarMinMaxNavigation) {
+            return false;
+        }
+        const maxDate = this.parseDate(this.max);
+
+        const calendarDate = this.getCalendarDate();
+        const nextMonth = calendarDate.getMonth() + 1;
+        // Getting 13th month of current year gives first month of
+        // next year so no need to check if next month is in next year
+        const currentYear = calendarDate.getFullYear();
+        const nextMonthStart = new Date(currentYear, nextMonth, 1);
+
+        return isBefore(maxDate, nextMonthStart, 'day');
+    }
+
+    get computedPrevDisabled() {
+        if (!features.enableCalendarMinMaxNavigation) {
+            return false;
+        }
+        const minDate = this.parseDate(this.min);
+
+        const calendarDate = this.getCalendarDate();
+        const currentMonth = calendarDate.getMonth();
+        const currentYear = calendarDate.getFullYear();
+        // Getting 0th day of current month gives last day of previous month
+        const prevMonthEnd = new Date(currentYear, currentMonth, 0);
+        return isAfter(minDate, prevMonthEnd, 'day');
+    }
+
     get computedWeekdayLabels() {
         const nameOfWeekdays = getNameOfWeekdays();
         const firstDay = this.getFirstDayOfWeek();
@@ -196,8 +227,7 @@ export default class LightningCalendar extends LightningShadowBaseClass {
 
     get hostDirection() {
         let computedStyle;
-        if (isCSR) {
-            // eslint-disable-next-line lightning-global/check-return-value-for-nullable-call
+        if (!import.meta.env.SSR) {
             computedStyle = window.getComputedStyle(this.template.host);
         }
         return computedStyle ? computedStyle.direction.toLowerCase() : 'ltr';
@@ -217,28 +247,27 @@ export default class LightningCalendar extends LightningShadowBaseClass {
             return useKey ? japaneseYearData.key : japaneseYearData.label;
         };
 
-        let useShortName = salesforceLanguage !== JAPANESE;
+        const useShortName = salesforceLanguage !== JAPANESE;
         for (let i = 0; i < JAPANESE_CALENDAR_YEARS.length; i++) {
-            if (year < JAPANESE_CALENDAR_YEARS[i].year) {
-                continue;
-            }
-
-            let jpYear =
-                displayValue(JAPANESE_CALENDAR_YEARS[i], useShortName) +
-                (year - JAPANESE_CALENDAR_YEARS[i].year + 1);
-
-            if (
-                year === JAPANESE_CALENDAR_YEARS[i].year &&
-                i < JAPANESE_CALENDAR_YEARS.length - 1
-            ) {
-                // transition year -- display both
-                let previousJapaneseYearData = JAPANESE_CALENDAR_YEARS[i + 1];
-                jpYear +=
-                    '/' +
-                    displayValue(previousJapaneseYearData, useShortName) +
-                    (year - previousJapaneseYearData.year + 1);
+            if (year >= JAPANESE_CALENDAR_YEARS[i].year) {
+                let jpYear =
+                    displayValue(JAPANESE_CALENDAR_YEARS[i], useShortName) +
+                    (year - JAPANESE_CALENDAR_YEARS[i].year + 1);
+
+                if (
+                    year === JAPANESE_CALENDAR_YEARS[i].year &&
+                    i < JAPANESE_CALENDAR_YEARS.length - 1
+                ) {
+                    // transition year -- display both
+                    const previousJapaneseYearData =
+                        JAPANESE_CALENDAR_YEARS[i + 1];
+                    jpYear +=
+                        '/' +
+                        displayValue(previousJapaneseYearData, useShortName) +
+                        (year - previousJapaneseYearData.year + 1);
+                }
+                return jpYear;
             }
-            return jpYear;
         }
         return null;
     }
@@ -252,7 +281,7 @@ export default class LightningCalendar extends LightningShadowBaseClass {
 
         // additional display value for Japanese calendar year support
         if (showJapaneseCalendar) {
-            let jpYear = this.getJapaneseCalendarYear(yearValue);
+            const jpYear = this.getJapaneseCalendarYear(yearValue);
             if (jpYear) {
                 displayValue += ' (' + jpYear + ')';
             }
@@ -311,10 +340,18 @@ export default class LightningCalendar extends LightningShadowBaseClass {
     }
 
     getDateCellAttributes(date, calendarDates) {
+        const isBetweenMinAndMax = this.isBetween(
+            date,
+            calendarDates.minDate,
+            calendarDates.maxDate
+        );
         const isInAdjacentMonth =
             !this.dateInCalendar(date, calendarDates.renderDate) ||
-            !this.isBetween(date, calendarDates.minDate, calendarDates.maxDate);
+            !isBetweenMinAndMax;
 
+        const ariaDisabled = features.enableCalendarMinMaxNavigation
+            ? !isBetweenMinAndMax
+            : null;
         const isSelected = this.isSame(date, calendarDates.selectedDate);
         const isToday = this.isSame(date, calendarDates.todayDate);
         const ariaCurrent = isToday ? 'date' : false;
@@ -336,6 +373,7 @@ export default class LightningCalendar extends LightningShadowBaseClass {
             dayInMonth: toLocalizedDigits(String(date.getDate())),
             dateValue: this.formatDate(date),
             isSelected: isSelected ? 'true' : 'false',
+            ariaDisabled,
             className,
             tabIndex,
             ariaCurrent,
@@ -343,7 +381,9 @@ export default class LightningCalendar extends LightningShadowBaseClass {
     }
 
     dispatchSelectEvent() {
+        // eslint-disable-next-line @lwc/lwc/ssr-no-unsupported-properties
         this.dispatchEvent(
+            // eslint-disable-next-line @lwc/lwc/ssr-no-unsupported-properties
             new CustomEvent('select', {
                 composed: true,
                 bubbles: true,
@@ -431,7 +471,9 @@ export default class LightningCalendar extends LightningShadowBaseClass {
 
     // Select a date in current calendar without the need to re-render the calendar
     selectDateInCalendar(dateElement) {
-        this.selectedDate = dateElement.getAttribute('data-value');
+        // dateElement is now the span, so we need to get data-value from the parent td
+        const tdElement = dateElement.parentElement;
+        this.selectedDate = tdElement.getAttribute('data-value');
 
         this.removeCurrentlySelectedDateAttributes();
         this.addSelectedDateAttributes(dateElement);
@@ -443,11 +485,16 @@ export default class LightningCalendar extends LightningShadowBaseClass {
     }
 
     getElementByDate(dateString) {
-        return this.template.querySelector(`td[data-value='${dateString}']`);
+        const tdElement = this.template.querySelector(
+            `td[data-value='${dateString}']`
+        );
+        return tdElement
+            ? tdElement.querySelector(`span[role="button"]`)
+            : null;
     }
 
     getFocusableDateCell() {
-        return this.template.querySelector(`td[tabIndex='0']`);
+        return this.template.querySelector(`span[role="button"][tabIndex="0"]`);
     }
 
     unfocusDateCell(element) {
@@ -464,8 +511,9 @@ export default class LightningCalendar extends LightningShadowBaseClass {
     }
 
     focusElementByDate(date) {
-        // eslint-disable-next-line @lwc/lwc/no-async-operation
+        // eslint-disable-next-line @lwc/lwc/no-async-operation, @lwc/lwc/ssr-no-restricted-browser-globals
         requestAnimationFrame(() => {
+            // eslint-disable-next-line @lwc/lwc/ssr-no-restricted-browser-globals
             const element = this.getElementByDate(this.formatDate(date));
             if (element) {
                 this.unfocusDateCell(this.getFocusableDateCell());
@@ -488,7 +536,7 @@ export default class LightningCalendar extends LightningShadowBaseClass {
             this.unfocusDateCell(this.getFocusableDateCell());
 
             const todayElement = this.getElementByDate(this.todayDate);
-            todayElement.setAttribute('tabIndex', 0);
+            this.focusDateCell(todayElement);
         } else {
             this.renderCalendar(todaysDate);
         }
@@ -496,11 +544,16 @@ export default class LightningCalendar extends LightningShadowBaseClass {
 
     removeCurrentlySelectedDateAttributes() {
         const currentlySelectedElement = this.template.querySelector(
-            `td[class*='slds-is-selected']`
+            `td[class*='slds-is-selected'] span[role="button"]`
         );
         if (currentlySelectedElement) {
-            currentlySelectedElement.classList.remove('slds-is-selected');
-            currentlySelectedElement.setAttribute('aria-selected', 'false');
+            currentlySelectedElement.parentElement.classList.remove(
+                'slds-is-selected'
+            );
+            currentlySelectedElement.parentElement.setAttribute(
+                'aria-selected',
+                'false'
+            );
         }
         this.unfocusDateCell(this.getFocusableDateCell());
     }
@@ -508,12 +561,15 @@ export default class LightningCalendar extends LightningShadowBaseClass {
     addSelectedDateAttributes(dateElement) {
         this.focusDateCell(dateElement);
 
-        dateElement.classList.add('slds-is-selected');
-        dateElement.setAttribute('aria-selected', 'true');
+        dateElement.parentElement.classList.add('slds-is-selected');
+        // aria-selected is on the parent td element
+        dateElement.parentElement.setAttribute('aria-selected', 'true');
     }
 
     handleCalendarKeyDown(event) {
-        const dateString = event.target.getAttribute('data-value');
+        // event.target is now the span element, so get data-value from parent td
+        const dateString =
+            event.target.parentElement.getAttribute('data-value');
 
         handleKeyDownOnCalendar(
             event,
@@ -525,8 +581,8 @@ export default class LightningCalendar extends LightningShadowBaseClass {
     handleDateClick(event) {
         event.stopPropagation();
 
-        const tdElement = event.target.parentElement;
-        this.selectDateInCalendarAndDispatchSelect(tdElement);
+        // event.target was already the span - now passing it directly instead of its parent td
+        this.selectDateInCalendarAndDispatchSelect(event.target);
     }
 
     handleTodayClick(event) {
@@ -558,6 +614,11 @@ export default class LightningCalendar extends LightningShadowBaseClass {
         calendarDate.setMonth(calendarDate.getMonth() + 1);
 
         this.renderCalendar(calendarDate);
+        // If next month button will no longer be enabled a focusout will be triggered
+        // We will need to trigger a focusin to ensure the calendar will stay open
+        if (this.computedNextDisabled && this.refs.calendar) {
+            this.refs.calendar.focus();
+        }
     }
 
     goToPreviousMonth(event) {
@@ -567,6 +628,11 @@ export default class LightningCalendar extends LightningShadowBaseClass {
         calendarDate.setMonth(calendarDate.getMonth() - 1);
 
         this.renderCalendar(calendarDate);
+        // If prev month button will no longer be enabled a focusout will be triggered
+        // We will need to trigger a focusin to ensure the calendar will stay open
+        if (this.computedPrevDisabled && this.refs.calendar) {
+            this.refs.calendar.focus();
+        }
     }
 
     calendarKeyboardInterface() {
@@ -574,6 +640,27 @@ export default class LightningCalendar extends LightningShadowBaseClass {
         return {
             focusDate(newDate) {
                 if (!that.dateInCalendar(newDate)) {
+                    if (features.enableCalendarMinMaxNavigation) {
+                        const calendarDate = that.getCalendarDate();
+                        const isBeforeCurrentDate = isBefore(
+                            newDate,
+                            calendarDate,
+                            'day'
+                        );
+                        const isAfterCurrentDate = isAfter(
+                            newDate,
+                            calendarDate,
+                            'day'
+                        );
+                        // Users can navigate to invalid days, but cannot navigate to invalid months
+                        if (
+                            (isBeforeCurrentDate &&
+                                that.computedPrevDisabled) ||
+                            (isAfterCurrentDate && that.computedNextDisabled)
+                        ) {
+                            return;
+                        }
+                    }
                     that.renderCalendar(newDate);
                 }
 
@@ -630,6 +717,11 @@ export default class LightningCalendar extends LightningShadowBaseClass {
         // We're not going to complicate things by checking if renderDate falls before/after the min/max.
         key += this.min ? 'min' + this.min : '';
         key += this.max ? 'max' + this.max : '';
+        // TODO: Remove this once gate is removed
+        // Only needed to test same min/max values with and without gate
+        key += features.enableCalendarMinMaxNavigation
+            ? 'enableCalendarMinMaxNavigation'
+            : '';
 
         if (selectedDate && this.dateInCalendar(selectedDate, renderDate)) {
             key += '_' + selectedDate.getDate();

package/src/lightning/calendar/calendar.lbc.synthetic.css

@@ -6,3 +6,21 @@
     left: 0;
     right: auto;
 }
+
+/**
+ * Focus styles for calendar dates - updated to target span elements instead of td elements
+ * for improved screen reader accessibility. The tabindex was moved from td to span elements.
+ */
+tbody > tr > td > span:focus {
+    outline: 0;
+}
+
+tbody > tr > td > span.slds-day:focus {
+    box-shadow: var(--slds-g-shadow-inset-inverse-focus-1); 
+}
+
+tbody > tr > td.slds-is-selected > span.slds-day:focus {
+    background: var(--slds-g-color-brand-base-30);
+    box-shadow: var(--slds-g-shadow-outset-focus-1); 
+    color: var(--slds-g-color-on-accent-1); 
+}

package/src/lightning/card/card.js-meta.xml

@@ -6,4 +6,12 @@
     <capabilities>
         <capability>lightning__ServerRenderableWithHydration</capability>
     </capabilities>
+    <ai>
+        <description>Applies a stylized container around a grouping of information. Can contain a title, body, actions, and footer. Use to organize related content or display information in a structured layout. Slots: default - Main content area of the card. title - Custom title content (can use markup). actions - Action buttons/icons displayed in the top corner. footer - Optional footer content, often used for "View All" links.</description>
+        <property name="title" aiDescription="The title text for the card. Can be used as an attribute or slot. Setting the title attribute overwrites the title slot." />
+        <property name="iconName" aiDescription="The name of the SLDS icon to display in the header next to the title." />
+        <property name="variant" aiDescription="The visual variant of the card. Options include 'base' (default) and 'narrow'." />
+        <property name="hideHeader" aiDescription="If true, hides the card header including title and icon." />
+        <property name="headingLevel" aiDescription="The heading level for the card title. Supported values are 1 to 6." />
+    </ai>
 </LightningComponentBundle>

package/src/lightning/card/{card.js → card.ts}

@@ -1,9 +1,4 @@
-/*
- * Copyright (c) 2025, Salesforce, Inc.,
- * All rights reserved.
- * For full license text, see the LICENSE.txt file
- */
-import { api } from 'lwc';
+import { api, track } from 'lwc';
 import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 import { classSet } from 'lightning/utils';
 import { isNarrow, isBase } from './utils';
@@ -27,7 +22,7 @@ export default class LightningCard extends LightningShadowBaseClass {
      *
      * @type {string}
      */
-    @api title;
+    @api title: string;
 
     /**
      * The Lightning Design System name of the icon.
@@ -37,11 +32,11 @@ export default class LightningCard extends LightningShadowBaseClass {
      *
      * @type {string}
      */
-    @api iconName;
+    @api iconName: string;
 
-    _privateVariant = 'base';
+    _privateVariant: string = 'base';
 
-    set variant(value) {
+    set variant(value: string) {
         if (isNarrow(value) || isBase(value)) {
             this._privateVariant = value;
         } else {
@@ -58,7 +53,7 @@ export default class LightningCard extends LightningShadowBaseClass {
      * @default base
      */
     @api
-    get variant() {
+    get variant(): string {
         return this._privateVariant;
     }
 
@@ -66,16 +61,15 @@ export default class LightningCard extends LightningShadowBaseClass {
      * The property 'hasTitle' will be 'true' if
      * either a string title or a slot title is present
      */
-    _hasTitle = true;
+    _hasTitle: boolean = true;
 
-    _showFooter = true;
+    _showFooter: boolean = true;
 
-    renderedCallback() {
+    renderedCallback(): void {
         // initial check for no items
         if (this.footerSlot) {
             this._showFooter = this.footerSlot.assignedElements().length !== 0;
         }
-
         // real title slot will be null if a string title is present
         if (this.titleSlot) {
             const hasSlotTitle = this.titleSlot.assignedElements().length !== 0;
@@ -83,7 +77,7 @@ export default class LightningCard extends LightningShadowBaseClass {
         }
     }
 
-    _privateHeadingAriaLevel;
+    @track _privateHeadingAriaLevel: string | number;
 
     /**
      * The headingLevel changes the 'aria-level' attribute value of
@@ -94,57 +88,58 @@ export default class LightningCard extends LightningShadowBaseClass {
      * @default 2
      */
     @api
-    get headingLevel() {
+    get headingLevel(): string | number {
         return this._privateHeadingAriaLevel;
     }
 
-    set headingLevel(value) {
+    set headingLevel(value: string | number) {
         if (isHeadingLevelValid(value)) {
             this._privateHeadingAriaLevel = value;
         }
     }
 
-    get titleSlot() {
+    get titleSlot(): HTMLSlotElement | null {
         return this.template.querySelector('slot[name=title]');
     }
 
-    get footerSlot() {
+    get footerSlot(): HTMLSlotElement | null {
         return this.template.querySelector('slot[name=footer]');
     }
 
-    get computedWrapperClassNames() {
+    get computedWrapperClassNames(): string {
         return classSet('slds-card').add({
             'slds-card_narrow': isNarrow(this._privateVariant),
-        });
+        }) as unknown as string;
     }
 
-    get hasIcon() {
+    get hasIcon(): boolean {
         return !!this.iconName;
     }
 
-    get hasStringTitle() {
+    get hasStringTitle(): boolean {
         return !!this.title;
     }
 
-    privateHeaderLabel;
+    @track privateHeaderLabel: string;
 
     /**
      * Assistive label for the card header. Only shown if `hideHeader` attribute is set to `true`.
      * @type {string}
      */
     @api
-    get label() {
+    get label(): string | null {
         if (!this._hasTitle || this.hideHeader) {
             return this.privateHeaderLabel;
         }
         return null;
     }
-    set label(value) {
+    set label(value: string) {
         this.privateHeaderLabel = value;
     }
 
-    get computedHidden() {
+    get computedHidden(): boolean {
         if (!this.label && this.hideHeader) {
+            // eslint-disable-next-line no-console
             console.warn(
                 'A `lightning-card` with `hide-header` requires `label` to be set.'
             );
@@ -152,7 +147,7 @@ export default class LightningCard extends LightningShadowBaseClass {
         return !this.hideHeader;
     }
 
-    hiddenHeader = false;
+    hiddenHeader: boolean = false;
 
     /**
      * Hides the header chunk of the card when set to `true`.
@@ -161,10 +156,10 @@ export default class LightningCard extends LightningShadowBaseClass {
      * @default {false}
      */
     @api
-    get hideHeader() {
+    get hideHeader(): boolean {
         return this.hiddenHeader;
     }
-    set hideHeader(value) {
+    set hideHeader(value: boolean) {
         this.hiddenHeader = value;
     }
-}
+}

package/src/lightning/card/utils.ts

@@ -0,0 +1,7 @@
+export function isNarrow(variant?: string): boolean {
+    return typeof variant === 'string' && variant.toLowerCase() === 'narrow';
+}
+
+export function isBase(variant?: string): boolean {
+    return typeof variant === 'string' && variant.toLowerCase() === 'base';
+}

package/src/lightning/carousel/__docs__/carousel.md

@@ -15,14 +15,16 @@ components are supported.
 
 Use [`lightning-carousel-image`](bundle/lightning-carousel-image/documentation)
 components nested in `lightning-carousel` to specify
-up to five images. For each image, optionally provide header and descriptive text
+up to six images. For each image, optionally provide header and descriptive text
 that the carousel displays below the image. You can also hyperlink the images.
 
+If you specify more than six images, the carousel displays the first six and ignores the rest.
+
 The images are displayed in the order you list them in the `lightning-carousel` component.
 
 The carousel displays one image at a time, and you can select particular
-images by clicking the indicators. On mobile devices, you can
-also swipe an image to scroll to the next image.
+images by clicking the indicators. The carousel can display up to six indicators only.
+On mobile devices, you can also swipe an image to scroll to the next image.
 
 By default, the carousel auto scrolls and loops through the images repeatedly.
 Each image displays for 5 seconds before the carousel scrolls to the next image.
@@ -86,5 +88,11 @@ This example creates a basic carousel with three images and disables automatic s
 
 #### Accessibility
 
-Use the Tab key to move focus to the carousel, then tab again to focus on the indicator buttons.
-Use right and left arrow keys to scroll to the next or previous image.
+`lightning-carousel` implements the [SLDS carousel blueprint](https://v1.lightningdesignsystem.com/components/carousel/), which follows the [WAI-ARIA Authoring Practices Guide for the carousel pattern](https://www.w3.org/WAI/ARIA/apg/patterns/carousel/). Use the Tab key to move focus to the carousel, then tab again to focus on the indicator buttons. Use right and left arrow keys to scroll to the next or previous image.
+
+`lightning-carousel` observes these roles, states, and properties.
+
+- The indicator buttons use a `ul` element with `role="tablist"`.
+- Each indicator button uses an `li` element with `role="presentation"`.
+- Each list item wraps an anchor tag with `role="tab"`.
+- Each anchor tag has `aria-selected="false"` when it's not selected.

package/src/lightning/carousel/button.slds.css

@@ -1,5 +1,5 @@
 /*******************************************
-* Imported dependency from @salesforce-ux/sds-primitives/src/sds/button/button.css
+* Imported dependency from @salesforce-ux/sds-components/src/sds/button/button.css
 *******************************************/
 /* Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
 Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */

package/src/lightning/carousel/carousel.js-meta.xml

@@ -3,4 +3,10 @@
     <isExposed>true</isExposed>
     <minApiVersion>42.0</minApiVersion>
     <support>BETA</support>
+    <ai>
+        <description>Displays a series of images in a single container with image indicators and control buttons. Supports up to six images with optional header and descriptive text. Images can be hyperlinked. Slots: default - Placeholder for lightning-carousel-image components.</description>
+        <property name="disableAutoScroll" aiDescription="If true, disables automatic scrolling and removes the control button. Users must use indicator buttons to navigate." />
+        <property name="disableAutoRefresh" aiDescription="If true, disables continuous looping. Images scroll once and stop at the last image." />
+        <property name="scrollDuration" aiDescription="The number of seconds each image displays before scrolling to the next image. Default is 5 seconds." />
+    </ai>
 </LightningComponentBundle>