@tylertech/forge 3.1.2 → 3.2.0

package/dist/vscode.html-custom-data.json

@@ -287,7 +287,7 @@
     },
     {
       "name": "forge-calendar",
-      "description": "\n---\n\n\n### **Events:**\n - **forge-calendar-date-select** - Event fired when a date is selected.\n- **forge-calendar-focus-change** - Event fired when the focus changes.\n- **forge-calendar-month-change** - Event fired when the month changes.\n- **forge-calendar-view-change** - Event fired when the view changes.\n\n### **Methods:**\n - **clear(): _void_** - Clears the selected date(s).\n- **deselectDate(date: _Date_): _void_** - Deselects a date.\n- **goToDate(date: _Date_, setFocus: _boolean_): _void_** - Navigates to a specific date.\n- **handleKey(evt: _KeyboardEvent_): _void_** - Handles a keyboard event.\n- **layout(): _void_** - Lays out the calendar.\n- **selectDate(date: _Date_): _void_** - Selects a date.\n- **setActiveDate(date: _Date_, setFocus: _boolean_): _boolean_** - Sets the active date.\n- **today(): _void_** - Sets the calendar to today.\n- **toggleDate(date: _Date_, force: _boolean_): _void_** - Toggles a date selection.",
+      "description": "\n---\n\n\n### **Events:**\n - **forge-calendar-date-select** - Event fired when a date is selected.\n- **forge-calendar-focus-change** - Event fired when the focus changes.\n- **forge-calendar-month-change** - Event fired when the month changes.\n- **forge-calendar-view-change** - Event fired when the view changes.\n\n### **Methods:**\n - **clear(): _void_** - Clears the selected date(s).\n- **deselectDate(date: _Date_): _void_** - Deselects a date.\n- **goToDate(date: _Date_, setFocus: _boolean_): _void_** - Navigates to a specific date.\n- **handleKey(evt: _KeyboardEvent_): _void_** - Handles a keyboard event.\n- **layout(): _void_** - Lays out the calendar.\n- **selectDate(date: _Date_): _void_** - Selects a date.\n- **setActiveDate(date: _Date_, setFocus: _boolean_): _boolean_** - Sets the active date.\n- **today(): _void_** - Sets the calendar to today.\n- **toggleDate(date: _Date_, force: _boolean_): _void_** - Toggles a date selection.\n\n### **Slots:**\n - **today-button-text** - Text to display in the today button.\n- **clear-button-text** - Text to display in the clear button.\n- **next-month-button-text** - Text to display in the next month button's tooltip.\n- **previous-month-button-text** - Text to display in the previous month button's tooltip.\n- **next-year-button-text** - Text to display in the next year button's tooltip.\n- **previous-year-button-text** - Text to display in the previous year button's tooltip.\n- **next-years-button-text** - Text to display in the next years button's tooltip.\n- **previous-years-button-text** - Text to display in the previous years button's tooltip.",
       "attributes": [
         {
           "name": "allow-single-date-range",
@@ -617,6 +617,11 @@
           "description": "Whether to allow an invalid date to be input. When true, the date picker will not clear out the value of the input if the date was invalid (i.e. could not be parsed).",
           "values": []
         },
+        {
+          "name": "calendar-text",
+          "description": "Customized strings to display in the calendar dropdown UI.",
+          "values": [{ "name": "DatePickerCalendarDropdownText" }]
+        },
         {
           "name": "disabled",
           "description": "Whether the date picker is disabled or not.",
@@ -691,6 +696,11 @@
           "description": "Whether to allow an invalid date to be input. When true, the date picker will not clear out the value of the input if the date was invalid (i.e. could not be parsed).",
           "values": []
         },
+        {
+          "name": "calendar-text",
+          "description": "Customized strings to display in the calendar dropdown UI.",
+          "values": [{ "name": "DatePickerCalendarDropdownText" }]
+        },
         {
           "name": "disabled",
           "description": "Whether the date picker is disabled or not.",
@@ -2899,6 +2909,11 @@
           "name": "noninteractive",
           "description": "Controls whether the list item will automatically attach itself to interactive slotted elements or not.",
           "values": []
+        },
+        {
+          "name": "focus-propagation",
+          "description": "Controls whether the interactive element will receive focus if a non-interactive element is clicked within the list item.",
+          "values": []
         }
       ],
       "references": []

package/esm/calendar/calendar-adapter.d.ts

@@ -4,9 +4,9 @@
  * License: Apache-2.0
  */
 import { BaseAdapter, IBaseAdapter } from '../core/base';
-import { DayOfWeek, ICalendarDateOptions, ICalendarDayOptions, ICalendarEvent, ICalendarDateConfig } from './calendar-constants';
 import { ICalendarComponent } from './calendar';
-import { CalendarDirection, ICalendarMenuOption, CalendarMenuAnimationType } from './calendar-menu';
+import { CalendarView, DayOfWeek, ICalendarDateConfig, ICalendarDateOptions, ICalendarDayOptions, ICalendarEvent } from './calendar-constants';
+import { CalendarDirection, CalendarMenuAnimationType, ICalendarMenuOption } from './calendar-menu';
 export interface ICalendarAdapter extends IBaseAdapter {
     animateIntoSelectionMenu(options: ICalendarMenuOption[], direction: CalendarDirection, setFocus: boolean): void;
     closeMenu(): void;
@@ -54,10 +54,10 @@ export interface ICalendarAdapter extends IBaseAdapter {
     setMonthButtonPressed(value: boolean): void;
     setMultiple(value: boolean): void;
     setNextButtonDisabled(value: boolean): void;
-    setNextButtonLabel(label: string): void;
+    setNextButtonLabel(view: CalendarView): void;
     setPreventFocusOnMenu(value: boolean): void;
     setPreviousButtonDisabled(value: boolean): void;
-    setPreviousButtonLabel(label: string): void;
+    setPreviousButtonLabel(view: CalendarView): void;
     setRange(dates: Date[] | null): void;
     setRangeEnd(date: Date | null): void;
     setRangeStart(date: Date | null): void;
@@ -115,8 +115,8 @@ export declare class CalendarAdapter extends BaseAdapter<ICalendarComponent> imp
     removeHeader(): void;
     setNextButtonDisabled(value: boolean): void;
     setPreviousButtonDisabled(value: boolean): void;
-    setNextButtonLabel(label: string): void;
-    setPreviousButtonLabel(label: string): void;
+    setNextButtonLabel(view: CalendarView): void;
+    setPreviousButtonLabel(view: CalendarView): void;
     setMonthButtonPressed(value: boolean): void;
     setYearButtonPressed(value: boolean): void;
     setMonth(month: number, locale?: string): void;

package/esm/calendar/calendar-adapter.js

@@ -3,13 +3,13 @@
  * Copyright Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { getShadowElement, removeAllChildren, appendToAttribute, toggleAttribute, toggleOnAttribute } from '@tylertech/forge-core';
+import { appendToAttribute, getShadowElement, removeAllChildren, toggleAttribute, toggleOnAttribute } from '@tylertech/forge-core';
 import { BaseAdapter } from '../core/base';
 import { CALENDAR_CONSTANTS } from './calendar-constants';
-import { splitIntoWeeks } from './calendar-utils';
 import { getAccessibleHeader, getClearButton, getDateElement, getDateId, getDateRow, getDateSpacerElement, getDayElement, getEventElement, getEventWrapperElement, getEventWrapperId, getFooter, getHeader, getMonthButtonContent, getTodayButton, getTooltip, getYearButtonContent, setTabindexOnElement } from './calendar-dom-utils';
 import { getLocalizedMonth, getLocalizedYear } from './calendar-locale-utils';
 import { CALENDAR_MENU_CONSTANTS } from './calendar-menu';
+import { splitIntoWeeks } from './calendar-utils';
 export class CalendarAdapter extends BaseAdapter {
     constructor(component) {
         super(component);
@@ -136,20 +136,54 @@ export class CalendarAdapter extends BaseAdapter {
         const previousButton = this._container.querySelector(CALENDAR_CONSTANTS.selectors.PREVIOUS_BUTTON);
         previousButton?.toggleAttribute('disabled', value);
     }
-    setNextButtonLabel(label) {
-        const nextButton = this._container.querySelector(CALENDAR_CONSTANTS.selectors.NEXT_BUTTON);
-        nextButton?.setAttribute('aria-label', label);
+    setNextButtonLabel(view) {
+        let label = '';
+        let slotName = '';
+        switch (view) {
+            case 'date':
+                label = CALENDAR_CONSTANTS.strings.DEFAULT_NEXT_MONTH_BUTTON_TEXT;
+                slotName = CALENDAR_CONSTANTS.slots.NEXT_MONTH_BUTTON_TEXT;
+                break;
+            case 'month':
+                label = CALENDAR_CONSTANTS.strings.DEFAULT_NEXT_YEAR_BUTTON_TEXT;
+                slotName = CALENDAR_CONSTANTS.slots.NEXT_YEAR_BUTTON_TEXT;
+                break;
+            case 'year':
+                label = CALENDAR_CONSTANTS.strings.DEFAULT_NEXT_YEARS_BUTTON_TEXT;
+                slotName = CALENDAR_CONSTANTS.slots.NEXT_YEARS_BUTTON_TEXT;
+                break;
+        }
         const nextTooltip = this._container.querySelector(CALENDAR_CONSTANTS.selectors.NEXT_BUTTON_TOOLTIP);
         if (nextTooltip) {
-            nextTooltip.innerHTML = label;
+            const slot = document.createElement('slot');
+            slot.name = slotName;
+            slot.innerText = label;
+            nextTooltip.innerHTML = slot.outerHTML;
+        }
+    }
+    setPreviousButtonLabel(view) {
+        let label = '';
+        let slotName = '';
+        switch (view) {
+            case 'date':
+                label = CALENDAR_CONSTANTS.strings.DEFAULT_PREVIOUS_MONTH_BUTTON_TEXT;
+                slotName = CALENDAR_CONSTANTS.slots.PREVIOUS_MONTH_BUTTON_TEXT;
+                break;
+            case 'month':
+                label = CALENDAR_CONSTANTS.strings.DEFAULT_PREVIOUS_YEAR_BUTTON_TEXT;
+                slotName = CALENDAR_CONSTANTS.slots.PREVIOUS_YEAR_BUTTON_TEXT;
+                break;
+            case 'year':
+                label = CALENDAR_CONSTANTS.strings.DEFAULT_PREVIOUS_YEARS_BUTTON_TEXT;
+                slotName = CALENDAR_CONSTANTS.slots.PREVIOUS_YEARS_BUTTON_TEXT;
+                break;
         }
-    }
-    setPreviousButtonLabel(label) {
-        const previousButton = this._container.querySelector(CALENDAR_CONSTANTS.selectors.PREVIOUS_BUTTON);
-        previousButton?.setAttribute('aria-label', label);
         const previousTooltip = this._container.querySelector(CALENDAR_CONSTANTS.selectors.PREVIOUS_BUTTON_TOOLTIP);
         if (previousTooltip) {
-            previousTooltip.innerHTML = label;
+            const slot = document.createElement('slot');
+            slot.name = slotName;
+            slot.innerText = label;
+            previousTooltip.innerHTML = slot.outerHTML;
         }
     }
     setMonthButtonPressed(value) {

package/esm/calendar/calendar-constants.d.ts

@@ -84,6 +84,16 @@ export declare const CALENDAR_CONSTANTS: {
         TODAY_BUTTON: string;
         YEAR_BUTTON: string;
     };
+    slots: {
+        PREVIOUS_MONTH_BUTTON_TEXT: string;
+        NEXT_MONTH_BUTTON_TEXT: string;
+        PREVIOUS_YEAR_BUTTON_TEXT: string;
+        NEXT_YEAR_BUTTON_TEXT: string;
+        PREVIOUS_YEARS_BUTTON_TEXT: string;
+        NEXT_YEARS_BUTTON_TEXT: string;
+        TODAY_BUTTON_TEXT: string;
+        CLEAR_BUTTON_TEXT: string;
+    };
     parts: {
         CLEAR_BUTTON: string;
         DATE: string;
@@ -154,6 +164,16 @@ export declare const CALENDAR_CONSTANTS: {
         readonly MONTH_CHANGE: "forge-calendar-month-change";
         readonly VIEW_CHANGE: "forge-calendar-view-change";
     };
+    strings: {
+        DEFAULT_PREVIOUS_MONTH_BUTTON_TEXT: string;
+        DEFAULT_NEXT_MONTH_BUTTON_TEXT: string;
+        DEFAULT_PREVIOUS_YEAR_BUTTON_TEXT: string;
+        DEFAULT_NEXT_YEAR_BUTTON_TEXT: string;
+        DEFAULT_PREVIOUS_YEARS_BUTTON_TEXT: string;
+        DEFAULT_NEXT_YEARS_BUTTON_TEXT: string;
+        DEFAULT_TODAY_BUTTON_TEXT: string;
+        DEFAULT_CLEAR_BUTTON_TEXT: string;
+    };
     numbers: {
         DEFAULT_MAX_YEAR_OFFSET: number;
         DEFAULT_MIN_YEAR_OFFSET: number;

package/esm/calendar/calendar-constants.js

@@ -88,6 +88,16 @@ const ids = {
     TODAY_BUTTON: 'today-button',
     YEAR_BUTTON: 'year-button'
 };
+const slots = {
+    PREVIOUS_MONTH_BUTTON_TEXT: 'previous-month-button-text',
+    NEXT_MONTH_BUTTON_TEXT: 'next-month-button-text',
+    PREVIOUS_YEAR_BUTTON_TEXT: 'previous-year-button-text',
+    NEXT_YEAR_BUTTON_TEXT: 'next-year-button-text',
+    PREVIOUS_YEARS_BUTTON_TEXT: 'previous-years-button-text',
+    NEXT_YEARS_BUTTON_TEXT: 'next-years-button-text',
+    TODAY_BUTTON_TEXT: 'today-button-text',
+    CLEAR_BUTTON_TEXT: 'clear-button-text'
+};
 const weekdayParts = {
     SUNDAY: 'sunday',
     MONDAY: 'monday',
@@ -161,6 +171,16 @@ const events = {
     MONTH_CHANGE: `${elementName}-month-change`,
     VIEW_CHANGE: `${elementName}-view-change`
 };
+const strings = {
+    DEFAULT_PREVIOUS_MONTH_BUTTON_TEXT: 'Previous month',
+    DEFAULT_NEXT_MONTH_BUTTON_TEXT: 'Next month',
+    DEFAULT_PREVIOUS_YEAR_BUTTON_TEXT: 'Previous year',
+    DEFAULT_NEXT_YEAR_BUTTON_TEXT: 'Next year',
+    DEFAULT_PREVIOUS_YEARS_BUTTON_TEXT: 'Previous years',
+    DEFAULT_NEXT_YEARS_BUTTON_TEXT: 'Next years',
+    DEFAULT_TODAY_BUTTON_TEXT: 'Today',
+    DEFAULT_CLEAR_BUTTON_TEXT: 'Clear'
+};
 const numbers = {
     DEFAULT_MAX_YEAR_OFFSET: 50,
     DEFAULT_MIN_YEAR_OFFSET: 50,
@@ -175,9 +195,11 @@ export const CALENDAR_CONSTANTS = {
     attributes,
     classes,
     ids,
+    slots,
     parts,
     selectors,
     events,
+    strings,
     numbers
 };
 export var DayOfWeek;

package/esm/calendar/calendar-core.d.ts

@@ -3,11 +3,11 @@
  * Copyright Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { CalendarEventBuilder, CalendarMode, CalendarView, DayOfWeek, CalendarDateBuilder, CalendarDayBuilder, CalendarDateSelectCallback, ICalendarEvent, CalendarTooltipBuilder } from './calendar-constants';
 import { ICalendarAdapter } from './calendar-adapter';
-import { DateRange } from './core/date-range';
-import { ICalendarBase } from './core/calendar-base';
+import { CalendarDateBuilder, CalendarDateSelectCallback, CalendarDayBuilder, CalendarEventBuilder, CalendarMode, CalendarTooltipBuilder, CalendarView, DayOfWeek, ICalendarEvent } from './calendar-constants';
 import { CalendarMenuAnimationType } from './calendar-menu';
+import { ICalendarBase } from './core/calendar-base';
+import { DateRange } from './core/date-range';
 export interface ICalendarCore extends ICalendarBase {
     mode: CalendarMode;
     view: CalendarView;

package/esm/calendar/calendar-core.js

@@ -4,12 +4,12 @@
  * License: Apache-2.0
  */
 import { isArray, isDefined, isValidDate } from '@tylertech/forge-core';
+import { getLastDateOfMonth, getMonthLength, isSameDate } from '../core/utils/date-utils';
 import { CALENDAR_CONSTANTS, CalendarMonthFocus, DayOfWeek } from './calendar-constants';
-import { isDisabled, isSelected, getAllYearOptions, getDateRangeFromDates, getDatesFromDateRange, getDatesInRange, getEventDescriptions, getEventsOnDate, getFirstDateOfWeek, getIndexOfDate, getLastDateOfWeek, getMinAndMaxDates, getMonthDates, getMonthOptions, getMultipleFromRange, getSortedDaysOfWeek, getYearOptions, isInMonth, isToday, parseYearRange, sortDates, coerceDateFromValue, shouldHandleEvent } from './calendar-utils';
-import { getFirstDayOfWeekForLocale, getLocalizedMonth, getLocalizedYear, getWeekendDaysForLocale, isRtlLocale } from './calendar-locale-utils';
 import { eventIncludesDate } from './calendar-dom-utils';
+import { getFirstDayOfWeekForLocale, getLocalizedMonth, getLocalizedYear, getWeekendDaysForLocale, isRtlLocale } from './calendar-locale-utils';
+import { coerceDateFromValue, getAllYearOptions, getDateRangeFromDates, getDatesFromDateRange, getDatesInRange, getEventDescriptions, getEventsOnDate, getFirstDateOfWeek, getIndexOfDate, getLastDateOfWeek, getMinAndMaxDates, getMonthDates, getMonthOptions, getMultipleFromRange, getSortedDaysOfWeek, getYearOptions, isDisabled, isInMonth, isSelected, isToday, parseYearRange, shouldHandleEvent, sortDates } from './calendar-utils';
 import { DateRange } from './core/date-range';
-import { getLastDateOfMonth, getMonthLength, isSameDate } from '../core/utils/date-utils';
 export class CalendarCore {
     constructor(_adapter) {
         this._adapter = _adapter;
@@ -880,20 +880,8 @@ export class CalendarCore {
      * Sets the labels on the previous and next buttons appropriate for the view.
      */
     _setNavButtonLabels() {
-        switch (this._view) {
-            case 'date':
-                this._adapter.setPreviousButtonLabel('Previous month');
-                this._adapter.setNextButtonLabel('Next month');
-                break;
-            case 'month':
-                this._adapter.setPreviousButtonLabel('Previous year');
-                this._adapter.setNextButtonLabel('Next year');
-                break;
-            case 'year':
-                this._adapter.setPreviousButtonLabel('Previous years');
-                this._adapter.setNextButtonLabel('Next years');
-                break;
-        }
+        this._adapter.setPreviousButtonLabel(this._view);
+        this._adapter.setNextButtonLabel(this._view);
     }
     /**
      * Rebuilds all dates and resets the date grid.

package/esm/calendar/calendar-dom-utils.js

@@ -168,10 +168,10 @@ export function getHeader() {
     previousButton.setAttribute('part', CALENDAR_CONSTANTS.parts.PREVIOUS_BUTTON);
     previousButton.id = CALENDAR_CONSTANTS.ids.PREVIOUS_BUTTON;
     previousButton.type = 'button';
-    previousButton.setAttribute('aria-label', 'Previous');
     previousIcon.setAttribute('name', 'keyboard_arrow_left');
     previousTooltip.id = CALENDAR_CONSTANTS.ids.PREVIOUS_BUTTON_TOOLTIP;
     previousTooltip.setAttribute('aria-hidden', 'true');
+    previousTooltip.type = 'label';
     previousTooltip.innerText = 'Previous';
     previousButton.appendChild(previousTooltip);
     previousButton.appendChild(previousIcon);
@@ -181,10 +181,10 @@ export function getHeader() {
     nextButton.setAttribute('part', CALENDAR_CONSTANTS.parts.NEXT_BUTTON);
     nextButton.id = CALENDAR_CONSTANTS.ids.NEXT_BUTTON;
     nextButton.type = 'button';
-    nextButton.setAttribute('aria-label', 'Next');
     nextIcon.setAttribute('name', 'keyboard_arrow_right');
     nextTooltip.id = CALENDAR_CONSTANTS.ids.NEXT_BUTTON_TOOLTIP;
     nextTooltip.setAttribute('aria-hidden', 'true');
+    nextTooltip.type = 'label';
     nextTooltip.innerText = 'Next';
     nextButton.appendChild(nextTooltip);
     nextButton.appendChild(nextIcon);
@@ -252,7 +252,10 @@ export function getClearButton() {
     clearButton.id = CALENDAR_CONSTANTS.ids.CLEAR_BUTTON;
     clearButton.setAttribute('part', CALENDAR_CONSTANTS.parts.CLEAR_BUTTON);
     clearButton.type = 'button';
-    clearButton.innerText = 'Clear';
+    const slot = document.createElement('slot');
+    slot.name = CALENDAR_CONSTANTS.slots.CLEAR_BUTTON_TEXT;
+    slot.innerText = CALENDAR_CONSTANTS.strings.DEFAULT_CLEAR_BUTTON_TEXT;
+    clearButton.appendChild(slot);
     return clearButton;
 }
 /** Returns a today button. */
@@ -261,7 +264,10 @@ export function getTodayButton() {
     todayButton.id = CALENDAR_CONSTANTS.ids.TODAY_BUTTON;
     todayButton.setAttribute('part', CALENDAR_CONSTANTS.parts.TODAY_BUTTON);
     todayButton.type = 'button';
-    todayButton.innerText = 'Today';
+    const slot = document.createElement('slot');
+    slot.name = CALENDAR_CONSTANTS.slots.TODAY_BUTTON_TEXT;
+    slot.innerText = CALENDAR_CONSTANTS.strings.DEFAULT_TODAY_BUTTON_TEXT;
+    todayButton.appendChild(slot);
     return todayButton;
 }
 /** Checks whether an event originated from a date element, returning the element if it did. */

package/esm/calendar/calendar-dropdown/calendar-dropdown-constants.d.ts

@@ -3,10 +3,12 @@
  * Copyright Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
+import { IDatePickerCalendarDropdownText } from '../../date-picker/base/base-date-picker-constants';
 export interface ICalendarDropdownPopupConfig {
     activeChangeCallback?: (id: string) => void;
     closeCallback?: () => void;
     popupClasses?: string | string[] | null;
+    calendarText?: IDatePickerCalendarDropdownText;
 }
 export declare const CALENDAR_DROPDOWN_CONSTANTS: {
     classes: {

package/esm/calendar/calendar.d.ts

@@ -108,6 +108,15 @@ declare global {
  * @fires {CustomEvent<ICalendarFocusChangeEventData>} forge-calendar-focus-change - Event fired when the focus changes.
  * @fires {CustomEvent<ICalendarMonthChangeEventData>} forge-calendar-month-change - Event fired when the month changes.
  * @fires {CustomEvent<CalendarView>} forge-calendar-view-change - Event fired when the view changes.
+ *
+ * @slot today-button-text - Text to display in the today button.
+ * @slot clear-button-text - Text to display in the clear button.
+ * @slot next-month-button-text - Text to display in the next month button's tooltip.
+ * @slot previous-month-button-text - Text to display in the previous month button's tooltip.
+ * @slot next-year-button-text - Text to display in the next year button's tooltip.
+ * @slot previous-year-button-text - Text to display in the previous year button's tooltip.
+ * @slot next-years-button-text - Text to display in the next years button's tooltip.
+ * @slot previous-years-button-text - Text to display in the previous years button's tooltip.
  */
 export declare class CalendarComponent extends BaseComponent implements ICalendarComponent {
     static get observedAttributes(): string[];

package/esm/calendar/calendar.js

@@ -86,6 +86,15 @@ const styles = '.forge-calendar{width:var(--forge-calendar-width,100%);height:fi
  * @fires {CustomEvent<ICalendarFocusChangeEventData>} forge-calendar-focus-change - Event fired when the focus changes.
  * @fires {CustomEvent<ICalendarMonthChangeEventData>} forge-calendar-month-change - Event fired when the month changes.
  * @fires {CustomEvent<CalendarView>} forge-calendar-view-change - Event fired when the view changes.
+ *
+ * @slot today-button-text - Text to display in the today button.
+ * @slot clear-button-text - Text to display in the clear button.
+ * @slot next-month-button-text - Text to display in the next month button's tooltip.
+ * @slot previous-month-button-text - Text to display in the previous month button's tooltip.
+ * @slot next-year-button-text - Text to display in the next year button's tooltip.
+ * @slot previous-year-button-text - Text to display in the previous year button's tooltip.
+ * @slot next-years-button-text - Text to display in the next years button's tooltip.
+ * @slot previous-years-button-text - Text to display in the previous years button's tooltip.
  */
 let CalendarComponent = class CalendarComponent extends BaseComponent {
     static get observedAttributes() {

package/esm/chips/chip/chip-core.js

@@ -183,7 +183,6 @@ export class ChipCore {
     set value(value) {
         if (this._value !== value) {
             this._value = value;
-            this._adapter.setHostAttribute(CHIP_CONSTANTS.attributes.VALUE, String(this._value));
         }
     }
     get selected() {

package/esm/date-picker/base/base-date-picker-adapter.d.ts

@@ -7,6 +7,7 @@ import { DateRange, DayOfWeek, ICalendarComponent } from '../../calendar';
 import { ICalendarDropdown, ICalendarDropdownPopupConfig } from '../../calendar/calendar-dropdown';
 import { BaseAdapter, IBaseAdapter, IDateInputMaskOptions } from '../../core';
 import { BaseComponent } from '../../core/base/base-component';
+import { IDatePickerCalendarDropdownText } from './base-date-picker-constants';
 export interface IBaseDatePickerAdapter extends IBaseAdapter {
     initialize(): void;
     initializeAccessibility(): void;
@@ -45,6 +46,7 @@ export interface IBaseDatePickerAdapter extends IBaseAdapter {
     getCalendarActiveDate(): Date | undefined;
     setCalendarYearRange(value: string): void;
     setCalendarLocale(locale: string | undefined): void;
+    setCalendarText(text: IDatePickerCalendarDropdownText): void;
     propagateCalendarKey(evt: KeyboardEvent): void;
 }
 export declare abstract class BaseDatePickerAdapter<T extends BaseComponent> extends BaseAdapter<T> implements IBaseDatePickerAdapter {
@@ -93,6 +95,7 @@ export declare abstract class BaseDatePickerAdapter<T extends BaseComponent> ext
     getCalendarActiveDate(): Date | undefined;
     setCalendarYearRange(value: string): void;
     setCalendarLocale(locale: string | undefined): void;
+    setCalendarText(text: IDatePickerCalendarDropdownText): void;
     propagateCalendarKey(evt: KeyboardEvent): void;
     tryCreateToggle(): void;
     protected _createToggleElement(): HTMLElement;

package/esm/date-picker/base/base-date-picker-adapter.js

@@ -4,6 +4,7 @@
  * License: Apache-2.0
  */
 import { randomChars } from '@tylertech/forge-core';
+import { CALENDAR_CONSTANTS } from '../../calendar';
 import { BaseAdapter } from '../../core';
 import { ICON_BUTTON_CONSTANTS } from '../../icon-button';
 import { TEXT_FIELD_CONSTANTS } from '../../text-field';
@@ -43,6 +44,7 @@ export class BaseDatePickerAdapter extends BaseAdapter {
         this._calendarDropdown.open(calendarConfig);
         this._calendarDropdown.dropdownElement?.style.setProperty('--forge-calendar-width', '320px');
         this._calendarDropdown.calendar?.style.setProperty('margin', '8px');
+        this.setCalendarText(dropdownConfig?.calendarText || {});
     }
     detachCalendar() {
         if (this._calendarDropdown && this._calendarDropdown.isOpen) {
@@ -104,6 +106,60 @@ export class BaseDatePickerAdapter extends BaseAdapter {
             this._calendarDropdown.locale = locale;
         }
     }
+    setCalendarText(text) {
+        const calendar = this._calendarDropdown?.calendar;
+        if (!calendar) {
+            return;
+        }
+        if (text.today) {
+            const el = document.createElement('span');
+            el.slot = CALENDAR_CONSTANTS.slots.TODAY_BUTTON_TEXT;
+            el.textContent = text.today;
+            calendar.append(el);
+        }
+        if (text.clear) {
+            const el = document.createElement('span');
+            el.slot = CALENDAR_CONSTANTS.slots.CLEAR_BUTTON_TEXT;
+            el.textContent = text.clear;
+            calendar.append(el);
+        }
+        if (text.nextMonth) {
+            const el = document.createElement('span');
+            el.slot = CALENDAR_CONSTANTS.slots.NEXT_MONTH_BUTTON_TEXT;
+            el.textContent = text.nextMonth;
+            calendar.append(el);
+        }
+        if (text.previousMonth) {
+            const el = document.createElement('span');
+            el.slot = CALENDAR_CONSTANTS.slots.PREVIOUS_MONTH_BUTTON_TEXT;
+            el.textContent = text.previousMonth;
+            calendar.append(el);
+        }
+        if (text.nextYear) {
+            const el = document.createElement('span');
+            el.slot = CALENDAR_CONSTANTS.slots.NEXT_YEAR_BUTTON_TEXT;
+            el.textContent = text.nextYear;
+            calendar.append(el);
+        }
+        if (text.previousYear) {
+            const el = document.createElement('span');
+            el.slot = CALENDAR_CONSTANTS.slots.PREVIOUS_YEAR_BUTTON_TEXT;
+            el.textContent = text.previousYear;
+            calendar.append(el);
+        }
+        if (text.nextYears) {
+            const el = document.createElement('span');
+            el.slot = CALENDAR_CONSTANTS.slots.NEXT_YEARS_BUTTON_TEXT;
+            el.textContent = text.nextYears;
+            calendar.append(el);
+        }
+        if (text.previousYears) {
+            const el = document.createElement('span');
+            el.slot = CALENDAR_CONSTANTS.slots.PREVIOUS_YEARS_BUTTON_TEXT;
+            el.textContent = text.previousYears;
+            calendar.append(el);
+        }
+    }
     propagateCalendarKey(evt) {
         this._calendarDropdown?.calendar?.handleKey(evt);
     }

package/esm/date-picker/base/base-date-picker-constants.d.ts

@@ -25,6 +25,16 @@ export interface IDatePickerCalendarDropdownConfig<T> {
     clearCallback: () => void;
     disabledDaysOfWeek?: DayOfWeek[] | null;
 }
+export interface IDatePickerCalendarDropdownText {
+    today?: string;
+    clear?: string;
+    previousMonth?: string;
+    nextMonth?: string;
+    previousYear?: string;
+    nextYear?: string;
+    previousYears?: string;
+    nextYears?: string;
+}
 export declare const BASE_DATE_PICKER_CONSTANTS: {
     observedAttributes: {
         MIN: string;
@@ -42,6 +52,7 @@ export declare const BASE_DATE_PICKER_CONSTANTS: {
         DISABLED_DAYS_OF_WEEK: string;
         YEAR_RANGE: string;
         LOCALE: string;
+        CALENDAR_TEXT: string;
     };
     attributes: {
         TOGGLE: string;

package/esm/date-picker/base/base-date-picker-constants.js

@@ -18,7 +18,8 @@ const observedAttributes = {
     SHOW_CLEAR: 'show-clear',
     DISABLED_DAYS_OF_WEEK: 'disabled-days-of-week',
     YEAR_RANGE: 'year-range',
-    LOCALE: 'locale'
+    LOCALE: 'locale',
+    CALENDAR_TEXT: 'calendar-text'
 };
 const attributes = {
     TOGGLE: 'forge-date-picker-toggle'

package/esm/date-picker/base/base-date-picker-core.d.ts

@@ -5,7 +5,7 @@
  */
 import { CalendarMode, DayOfWeek, ICalendarDateSelectEventData } from '../../calendar/calendar-constants';
 import { IBaseDatePickerAdapter } from './base-date-picker-adapter';
-import { DatePickerFormatCallback, DatePickerParseCallback, DatePickerPrepareMaskCallback, DatePickerValueMode } from './base-date-picker-constants';
+import { DatePickerFormatCallback, DatePickerParseCallback, DatePickerPrepareMaskCallback, DatePickerValueMode, IDatePickerCalendarDropdownText } from './base-date-picker-constants';
 export interface IBaseDatePickerCore<TValue> {
     value: TValue | null | undefined;
     min: Date | string | null | undefined;
@@ -53,6 +53,7 @@ export declare abstract class BaseDatePickerCore<TAdapter extends IBaseDatePicke
     protected _disabledDaysOfWeek: DayOfWeek[];
     protected _yearRange: string;
     protected _locale: string | undefined;
+    protected _calendarText: IDatePickerCalendarDropdownText;
     protected _isInitialized: boolean;
     private _inputListener;
     private _inputKeydownListener;
@@ -154,4 +155,6 @@ export declare abstract class BaseDatePickerCore<TAdapter extends IBaseDatePicke
     set yearRange(value: string);
     get locale(): string | undefined;
     set locale(value: string | undefined);
+    get calendarText(): IDatePickerCalendarDropdownText;
+    set calendarText(value: IDatePickerCalendarDropdownText);
 }

package/esm/date-picker/base/base-date-picker-core.js

@@ -26,6 +26,7 @@ export class BaseDatePickerCore {
         this._showToday = false;
         this._showClear = false;
         this._yearRange = '-50:+50';
+        this._calendarText = {};
         this._isInitialized = false;
         this._inputListener = evt => this._onInput(evt);
         this._inputKeydownListener = evt => this._onInputKeydown(evt);
@@ -131,7 +132,8 @@ export class BaseDatePickerCore {
         const dropdownConfig = {
             popupClasses: this._popupClasses,
             closeCallback: this._dropdownCloseListener,
-            activeChangeCallback: this._activeChangeListener
+            activeChangeCallback: this._activeChangeListener,
+            calendarText: this._calendarText
         };
         // If the max date is in the past, set the calendar to the min date
         const currentDate = new Date().getTime();
@@ -633,4 +635,13 @@ export class BaseDatePickerCore {
             }
         }
     }
+    get calendarText() {
+        return { ...this._calendarText };
+    }
+    set calendarText(value) {
+        if (JSON.stringify(this._calendarText) !== JSON.stringify(value)) {
+            this._calendarText = { ...value };
+            this._adapter.setCalendarText(this._calendarText);
+        }
+    }
 }

package/esm/date-picker/base/base-date-picker.d.ts

@@ -5,7 +5,7 @@
  */
 import { DayOfWeek } from '../../calendar/calendar-constants';
 import { BaseComponent, IBaseComponent } from '../../core/base/base-component';
-import { DatePickerFormatCallback, DatePickerParseCallback, DatePickerPrepareMaskCallback, DatePickerValueMode } from './base-date-picker-constants';
+import { DatePickerFormatCallback, DatePickerParseCallback, DatePickerPrepareMaskCallback, DatePickerValueMode, IDatePickerCalendarDropdownText } from './base-date-picker-constants';
 import { BaseDatePickerCore } from './base-date-picker-core';
 import { IBaseDatePickerAdapter } from './base-date-picker-adapter';
 export interface IBaseDatePickerComponent<TValue> extends IBaseComponent {
@@ -31,9 +31,11 @@ export interface IBaseDatePickerComponent<TValue> extends IBaseComponent {
     disabledDaysOfWeek: DayOfWeek[];
     yearRange: string;
     locale: string | undefined;
+    calendarText: IDatePickerCalendarDropdownText;
 }
 /**
  * @property {boolean} [allowInvalidDate=false] - Whether to allow an invalid date to be input. When true, the date picker will not clear out the value of the input if the date was invalid (i.e. could not be parsed).
+ * @property {DatePickerCalendarDropdownText} calendarText - Customized strings to display in the calendar dropdown UI.
  * @property {boolean} [disabled=false] - Whether the date picker is disabled or not.
  * @property {(date: Date) => boolean} disableDayCallback - The callback to use for testing whether a specific date should be disabled or not.
  * @property {Date | Date[] | null | undefined} disabledDates - The dates that are restricted from being selected.
@@ -57,6 +59,7 @@ export interface IBaseDatePickerComponent<TValue> extends IBaseComponent {
  * @property {string} yearRange - The year range.
  *
  * @attribute {boolean} [allow-invalid-date=false] - Whether to allow an invalid date to be input. When true, the date picker will not clear out the value of the input if the date was invalid (i.e. could not be parsed).
+ * @attribute {DatePickerCalendarDropdownText} [calendar-text] - Customized strings to display in the calendar dropdown UI.
  * @attribute {boolean} [disabled=false] - Whether the date picker is disabled or not.
  * @attribute {string} [disabled-days-of-week] - The days of the week to disable from selection.
  * @attribute {string} [locale] - The locale to use.
@@ -100,4 +103,5 @@ export declare abstract class BaseDatePickerComponent<TPublicValue, TPrivateValu
     disableDayCallback: (date: Date) => boolean;
     yearRange: string;
     locale: string | undefined;
+    calendarText: IDatePickerCalendarDropdownText;
 }