@tylertech/forge 3.1.3 → 3.3.0

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

@@ -3997,6 +3997,11 @@
       "description": "The font size of the chip icon.",
       "values": []
     },
+    {
+      "name": "--forge-chip-focus-indicator-color",
+      "description": "The color of the focus indicator.",
+      "values": []
+    },
     {
       "name": "--forge-chip-disabled-opacity",
       "description": "The opacity of the disabled chip.",

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.",
@@ -1774,6 +1784,11 @@
           "name": "inline",
           "description": "Whether or not the skip link renders within its container.",
           "values": []
+        },
+        {
+          "name": "skipUrlChange",
+          "description": "Sets the skip link to skip browser navigation and scroll to the target element.",
+          "values": []
         }
       ],
       "references": []
@@ -2381,6 +2396,11 @@
           "name": "href",
           "description": "The href that will be used to make the logo and title area a clickable link",
           "values": []
+        },
+        {
+          "name": "target",
+          "description": "The `<a>` target of the logo + title area link when `href` is set.",
+          "values": []
         }
       ],
       "references": []
@@ -2643,7 +2663,7 @@
     },
     {
       "name": "forge-chip",
-      "description": "\n---\n\n\n### **Events:**\n - **forge-chip-delete** - Event fired when the chip is deleted.\n- **forge-chip-select** - Event fired when the chip is selected.\n\n### **Slots:**\n - _default_ - The content of the chip.\n- **start** - The start content of the chip.\n- **end** - The end content of the chip.\n\n### **CSS Properties:**\n - **--forge-chip-background** - The background color of the chip. _(default: undefined)_\n- **--forge-chip-color** - The background color of the chip. _(default: undefined)_\n- **--forge-chip-shape** - The shape of the chip. _(default: undefined)_\n- **--forge-chip-spacing** - The spacing between chips. _(default: undefined)_\n- **--forge-chip-height** - The height of the chip. _(default: undefined)_\n- **--forge-chip-padding-inline** - The inline padding of the chip. _(default: undefined)_\n- **--forge-chip-padding-block** - The block padding of the chip. _(default: undefined)_\n- **--forge-chip-cursor** - The cursor style of the chip. _(default: undefined)_\n- **--forge-chip-icon-font-size** - The font size of the chip icon. _(default: undefined)_\n- **--forge-chip-disabled-opacity** - The opacity of the disabled chip. _(default: undefined)_\n- **--forge-chip-disabled-cursor** - The cursor style of the disabled chip. _(default: undefined)_\n- **--forge-chip-dense-height** - The height of the dense chip. _(default: undefined)_\n- **--forge-chip-dense-padding-inline** - The inline padding of the dense chip. _(default: undefined)_\n- **--forge-chip-dense-spacing** - The spacing between dense chips. _(default: undefined)_\n- **--forge-chip-dense-font-size** - The font size of the dense chip. _(default: undefined)_\n- **--forge-chip-dense-font-weight** - The font weight of the dense chip. _(default: undefined)_\n- **--forge-chip-dense-focus-indicator-offset** - The offset of the focus indicator for dense chips. _(default: undefined)_\n- **--forge-chip-dense-icon-font-size** - The font size of the icon in dense chips. _(default: undefined)_\n- **--forge-chip-remove-button-spacing** - The spacing of the remove button in chips. _(default: undefined)_\n- **--forge-chip-remove-button-height-dense** - The height of the remove button in dense chips. _(default: undefined)_\n- **--forge-chip-remove-button-icon-size-dense** - The icon size of the remove button in dense chips. _(default: undefined)_\n- **--forge-chip-remove-button-spacing-dense** - The spacing of the remove button in dense chips. _(default: undefined)_\n- **--forge-chip-selected-background** - The background color of the selected chip. _(default: undefined)_\n- **--forge-chip-selected-color** - The text color of the selected chip. _(default: undefined)_\n- **--forge-chip-invalid-color** - The text color of the invalid chip. _(default: undefined)_\n- **--forge-chip-invalid-selected-background** - The background color of the invalid selected chip. _(default: undefined)_\n- **--forge-chip-invalid-selected-color** - The text color of the invalid selected chip. _(default: undefined)_\n- **--forge-chip-border-width** - The width of the chip border. _(default: undefined)_\n- **--forge-chip-border-style** - The style of the chip border. _(default: undefined)_\n- **--forge-chip-border-color** - The color of the chip border. _(default: undefined)_\n- **--forge-chip-field-background** - The background color of the chip field. _(default: undefined)_\n- **--forge-chip-field-color** - The text color of the chip field. _(default: undefined)_\n- **--forge-chip-field-shape** - The shape of the chip field. _(default: undefined)_\n- **--forge-chip-field-border-color** - The color of the chip field border. _(default: undefined)_\n- **--forge-chip-field-cursor** - The cursor style of the chip field. _(default: undefined)_\n- **--forge-chip-checkmark-size** - The size of the checkmark in chips. _(default: undefined)_\n- **--forge-chip-checkmark-color** - The color of the checkmark in chips. _(default: undefined)_\n- **--forge-chip-checkmark-spacing** - The spacing of the checkmark in chips. _(default: undefined)_\n- **--forge-chip-avatar-size** - The size of the avatar in chips. _(default: undefined)_\n- **--forge-chip-avatar-size-dense** - The size of the avatar in dense chips. _(default: undefined)_\n- **--forge-chip-avatar-font-size** - The font size of the avatar in chips. _(default: undefined)_\n- **--forge-chip-avatar-font-size-dense** - The font size of the avatar in dense chips. _(default: undefined)_\n- **--forge-chip-avatar-spacing** - The spacing of the avatar in chips. _(default: undefined)_\n- **--forge-chip-avatar-spacing-dense** - The spacing of the avatar in dense chips. _(default: undefined)_\n- **--forge-chip-transition-duration** - The duration of the chip transition. _(default: undefined)_\n- **--forge-chip-transition-easing** - The easing function of the chip transition. _(default: undefined)_\n- **--forge-chip-checkmark-transition-delay** - The delay of the checkmark transition in chips. _(default: undefined)_\n\n### **CSS Parts:**\n - **root** - The component's root element.\n- **trigger** - The trigger element of the chip.\n- **focus-indicator** - The focus indicator of the chip.\n- **state-layer** - The state layer surface.",
+      "description": "\n---\n\n\n### **Events:**\n - **forge-chip-delete** - Event fired when the chip is deleted.\n- **forge-chip-select** - Event fired when the chip is selected.\n\n### **Slots:**\n - _default_ - The content of the chip.\n- **start** - The start content of the chip.\n- **end** - The end content of the chip.\n\n### **CSS Properties:**\n - **--forge-chip-background** - The background color of the chip. _(default: undefined)_\n- **--forge-chip-color** - The background color of the chip. _(default: undefined)_\n- **--forge-chip-shape** - The shape of the chip. _(default: undefined)_\n- **--forge-chip-spacing** - The spacing between chips. _(default: undefined)_\n- **--forge-chip-height** - The height of the chip. _(default: undefined)_\n- **--forge-chip-padding-inline** - The inline padding of the chip. _(default: undefined)_\n- **--forge-chip-padding-block** - The block padding of the chip. _(default: undefined)_\n- **--forge-chip-cursor** - The cursor style of the chip. _(default: undefined)_\n- **--forge-chip-icon-font-size** - The font size of the chip icon. _(default: undefined)_\n- **--forge-chip-focus-indicator-color** - The color of the focus indicator. _(default: undefined)_\n- **--forge-chip-disabled-opacity** - The opacity of the disabled chip. _(default: undefined)_\n- **--forge-chip-disabled-cursor** - The cursor style of the disabled chip. _(default: undefined)_\n- **--forge-chip-dense-height** - The height of the dense chip. _(default: undefined)_\n- **--forge-chip-dense-padding-inline** - The inline padding of the dense chip. _(default: undefined)_\n- **--forge-chip-dense-spacing** - The spacing between dense chips. _(default: undefined)_\n- **--forge-chip-dense-font-size** - The font size of the dense chip. _(default: undefined)_\n- **--forge-chip-dense-font-weight** - The font weight of the dense chip. _(default: undefined)_\n- **--forge-chip-dense-focus-indicator-offset** - The offset of the focus indicator for dense chips. _(default: undefined)_\n- **--forge-chip-dense-icon-font-size** - The font size of the icon in dense chips. _(default: undefined)_\n- **--forge-chip-remove-button-spacing** - The spacing of the remove button in chips. _(default: undefined)_\n- **--forge-chip-remove-button-height-dense** - The height of the remove button in dense chips. _(default: undefined)_\n- **--forge-chip-remove-button-icon-size-dense** - The icon size of the remove button in dense chips. _(default: undefined)_\n- **--forge-chip-remove-button-spacing-dense** - The spacing of the remove button in dense chips. _(default: undefined)_\n- **--forge-chip-selected-background** - The background color of the selected chip. _(default: undefined)_\n- **--forge-chip-selected-color** - The text color of the selected chip. _(default: undefined)_\n- **--forge-chip-invalid-color** - The text color of the invalid chip. _(default: undefined)_\n- **--forge-chip-invalid-selected-background** - The background color of the invalid selected chip. _(default: undefined)_\n- **--forge-chip-invalid-selected-color** - The text color of the invalid selected chip. _(default: undefined)_\n- **--forge-chip-border-width** - The width of the chip border. _(default: undefined)_\n- **--forge-chip-border-style** - The style of the chip border. _(default: undefined)_\n- **--forge-chip-border-color** - The color of the chip border. _(default: undefined)_\n- **--forge-chip-field-background** - The background color of the chip field. _(default: undefined)_\n- **--forge-chip-field-color** - The text color of the chip field. _(default: undefined)_\n- **--forge-chip-field-shape** - The shape of the chip field. _(default: undefined)_\n- **--forge-chip-field-border-color** - The color of the chip field border. _(default: undefined)_\n- **--forge-chip-field-cursor** - The cursor style of the chip field. _(default: undefined)_\n- **--forge-chip-checkmark-size** - The size of the checkmark in chips. _(default: undefined)_\n- **--forge-chip-checkmark-color** - The color of the checkmark in chips. _(default: undefined)_\n- **--forge-chip-checkmark-spacing** - The spacing of the checkmark in chips. _(default: undefined)_\n- **--forge-chip-avatar-size** - The size of the avatar in chips. _(default: undefined)_\n- **--forge-chip-avatar-size-dense** - The size of the avatar in dense chips. _(default: undefined)_\n- **--forge-chip-avatar-font-size** - The font size of the avatar in chips. _(default: undefined)_\n- **--forge-chip-avatar-font-size-dense** - The font size of the avatar in dense chips. _(default: undefined)_\n- **--forge-chip-avatar-spacing** - The spacing of the avatar in chips. _(default: undefined)_\n- **--forge-chip-avatar-spacing-dense** - The spacing of the avatar in dense chips. _(default: undefined)_\n- **--forge-chip-transition-duration** - The duration of the chip transition. _(default: undefined)_\n- **--forge-chip-transition-easing** - The easing function of the chip transition. _(default: undefined)_\n- **--forge-chip-checkmark-transition-delay** - The delay of the checkmark transition in chips. _(default: undefined)_\n\n### **CSS Parts:**\n - **root** - The component's root element.\n- **trigger** - The trigger element of the chip.\n- **focus-indicator** - The focus indicator of the chip.\n- **state-layer** - The state layer surface.",
       "attributes": [
         {
           "name": "type",

package/esm/app-bar/app-bar/app-bar.d.ts

@@ -29,11 +29,13 @@ declare global {
  * @property {AppBarElevation} [elevation="raised"] - The elevation of the app bar.
  * @property {AppBarTheme} theme - The theme of the app bar.
  * @property {string} href - The href that will be used to make the logo and title area a clickable link.
+ * @property {string} target - The `<a>` target of the logo + title area link when `href` is set.
  *
  * @attribute {string} title-text - The text to display in the title.
  * @attribute {string} [elevation="raised"] - The elevation of the app bar.
  * @attribute {string} theme - The theme of the app bar.
  * @attribute {string} href - The href that will be used to make the logo and title area a clickable link
+ * @attribute {string} target - The `<a>` target of the logo + title area link when `href` is set.
  *
  * @cssproperty --forge-app-bar-background - The background color of the app bar.
  * @cssproperty --forge-app-bar-foreground - The text color of the app bar.

package/esm/app-bar/app-bar/app-bar.js

@@ -20,11 +20,13 @@ const styles = ':host{--_app-bar-background:var(--forge-app-bar-background, var(
  * @property {AppBarElevation} [elevation="raised"] - The elevation of the app bar.
  * @property {AppBarTheme} theme - The theme of the app bar.
  * @property {string} href - The href that will be used to make the logo and title area a clickable link.
+ * @property {string} target - The `<a>` target of the logo + title area link when `href` is set.
  *
  * @attribute {string} title-text - The text to display in the title.
  * @attribute {string} [elevation="raised"] - The elevation of the app bar.
  * @attribute {string} theme - The theme of the app bar.
  * @attribute {string} href - The href that will be used to make the logo and title area a clickable link
+ * @attribute {string} target - The `<a>` target of the logo + title area link when `href` is set.
  *
  * @cssproperty --forge-app-bar-background - The background color of the app bar.
  * @cssproperty --forge-app-bar-foreground - The text color of the app bar.

package/esm/autocomplete/autocomplete-adapter.js

@@ -89,13 +89,7 @@ export class AutocompleteAdapter extends BaseAdapter {
         this._listDropdown?.setBusyVisibility(isVisible);
     }
     setDismissListener(listener) {
-        if (!this._listDropdown || !this._listDropdown.dropdownElement) {
-            return;
-        }
-        const dropdownElement = this._listDropdown.dropdownElement;
-        if (dropdownElement.anchorElement && dropdownElement.anchorElement instanceof HTMLElement) {
-            dropdownElement.anchorElement.addEventListener(POPOVER_CONSTANTS.events.TOGGLE, listener);
-        }
+        this._listDropdown?.dropdownElement?.addEventListener(POPOVER_CONSTANTS.events.TOGGLE, listener);
     }
     focus() {
         window.requestAnimationFrame(() => this._inputElement.focus());

package/esm/button/base/base-button-adapter.js

@@ -177,7 +177,7 @@ export class BaseButtonAdapter extends BaseAdapter {
         }
     }
     animateStateLayer() {
-        if (this._stateLayerElement.disabled) {
+        if (this._stateLayerElement.disabled || !this._stateLayerElement.isConnected) {
             return;
         }
         this._stateLayerElement?.playAnimation();

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/chip-field/chip-field.js

@@ -12,7 +12,7 @@ import { ChipComponent } from '../chips';
 import { BaseField } from '../field/base/base-field';
 import { BASE_FIELD_CONSTANTS, FieldComponent } from '../field';
 const template = '<template><forge-field id=\"field\" multiline><slot slot=\"label\" name=\"label\"></slot><slot slot=\"start\" name=\"start\"></slot><div class=\"container\" data-forge-field-input><slot name=\"member\"></slot><slot></slot></div><slot slot=\"end\" name=\"end\"></slot><slot slot=\"accessory\" name=\"accessory\"></slot><slot slot=\"support-text\" name=\"support-text\"></slot><slot slot=\"support-text-end\" name=\"support-text-end\"></slot><slot slot=\"start\" name=\"leading\"></slot><slot slot=\"end\" name=\"trailing\"></slot><slot slot=\"accessory\" name=\"addon-end\"></slot><slot slot=\"support-text\" name=\"helper-text\"></slot></forge-field></template>';
-const styles = '@keyframes float-in-label-animation{from{translate:0;opacity:40%}to{translate:var(--_field-floating-label-translation);opacity:100%}}@keyframes float-out-label-animation{from{translate:var(--_field-floating-label-translation);opacity:40%}to{translate:0;opacity:100%}}@keyframes float-in-input-animation{from{translate:0}to{translate:0 calc(calc(max(var(--forge-typography-body2-line-height,calc(var(--forge-typography-font-size,1rem) * var(--forge-typography-body-line-height-scale,1.375))),var(--forge-typography-label2-line-height,calc(var(--forge-typography-font-size,1rem) * var(--forge-typography-label-line-height-scale,1.25))))/ 2) + calc((var(--_field-height) - 56px)/ 8))}}@keyframes float-out-input-animation{from{translate:0 calc(calc(max(var(--forge-typography-body2-line-height,calc(var(--forge-typography-font-size,1rem) * var(--forge-typography-body-line-height-scale,1.375))),var(--forge-typography-label2-line-height,calc(var(--forge-typography-font-size,1rem) * var(--forge-typography-label-line-height-scale,1.25))))/ 2) + calc((var(--_field-height) - 56px)/ 8))}to{translate:0}}@keyframes multiline-inset-label-background-animation{from{opacity:0%}to{opacity:100%}}:host{display:block}:host([hidden]){display:none}forge-field{--_chip-field-member-spacing:var(--forge-chip-field-member-spacing, var(--forge-spacing-xsmall, 8px));--_chip-field-content-spacing:var(--forge-chip-field-content-spacing, var(--forge-spacing-xxsmall, 4px))}.container{display:flex;flex-wrap:wrap;align-items:center;gap:var(--_chip-field-member-spacing);block-size:auto}.container.has-members{margin-block:var(--_chip-field-content-spacing)}.container.has-members ::slotted(input){block-size:auto;inline-size:auto}::slotted(input){flex-grow:1;cursor:inherit;box-sizing:border-box;margin:0;outline:0;border:none;background-color:transparent;padding-block:0;padding-inline:0;inline-size:100%;block-size:100%;color:inherit;font:inherit;font-size:var(--_field-font-size);text-overflow:ellipsis}forge-field{display:contents;--forge-field-multiline-resize:none}forge-field::part(label)::after{content:none}:host([theme=primary]) ::slotted([slot=member]){--forge-chip-field-background:var(--forge-theme-primary, #3f51b5);--forge-chip-field-color:var(--forge-theme-on-primary, #ffffff)}:host([theme=secondary]) ::slotted([slot=member]){--forge-chip-field-background:var(--forge-theme-secondary, #ffc107);--forge-chip-field-color:var(--forge-theme-on-secondary, #000000)}:host([theme=tertiary]) ::slotted([slot=member]){--forge-chip-field-background:var(--forge-theme-tertiary, #3d5afe);--forge-chip-field-color:var(--forge-theme-on-tertiary, #ffffff)}:host([theme=success]) ::slotted([slot=member]){--forge-chip-field-background:var(--forge-theme-success, #2e7d32);--forge-chip-field-color:var(--forge-theme-on-success, #ffffff)}:host([theme=warning]) ::slotted([slot=member]){--forge-chip-field-background:var(--forge-theme-warning, #d14900);--forge-chip-field-color:var(--forge-theme-on-warning, #ffffff)}:host([theme=error]) ::slotted([slot=member]){--forge-chip-field-background:var(--forge-theme-error, #b00020);--forge-chip-field-color:var(--forge-theme-on-error, #ffffff)}:host([theme=info]) ::slotted([slot=member]){--forge-chip-field-background:var(--forge-theme-info, #1565c0);--forge-chip-field-color:var(--forge-theme-on-info, #ffffff)}';
+const styles = '@keyframes float-in-label-animation{from{translate:0;opacity:40%}to{translate:var(--_field-floating-label-translation);opacity:100%}}@keyframes float-out-label-animation{from{translate:var(--_field-floating-label-translation);opacity:40%}to{translate:0;opacity:100%}}@keyframes float-in-input-animation{from{translate:0}to{translate:0 calc(calc(max(var(--forge-typography-body2-line-height,calc(var(--forge-typography-font-size,1rem) * var(--forge-typography-body-line-height-scale,1.375))),var(--forge-typography-label2-line-height,calc(var(--forge-typography-font-size,1rem) * var(--forge-typography-label-line-height-scale,1.25))))/ 2) + calc((var(--_field-height) - 56px)/ 8))}}@keyframes float-out-input-animation{from{translate:0 calc(calc(max(var(--forge-typography-body2-line-height,calc(var(--forge-typography-font-size,1rem) * var(--forge-typography-body-line-height-scale,1.375))),var(--forge-typography-label2-line-height,calc(var(--forge-typography-font-size,1rem) * var(--forge-typography-label-line-height-scale,1.25))))/ 2) + calc((var(--_field-height) - 56px)/ 8))}to{translate:0}}@keyframes multiline-inset-label-background-animation{from{opacity:0%}to{opacity:100%}}:host{display:block}:host([hidden]){display:none}forge-field{--_chip-field-member-spacing:var(--forge-chip-field-member-spacing, var(--forge-spacing-xsmall, 8px));--_chip-field-content-spacing:var(--forge-chip-field-content-spacing, var(--forge-spacing-xxsmall, 4px))}.container{display:flex;flex-wrap:wrap;align-items:center;gap:var(--_chip-field-member-spacing);block-size:auto}.container.has-members{margin-block:var(--_chip-field-content-spacing)}.container.has-members ::slotted(input){block-size:auto;inline-size:auto}::slotted(input){flex-grow:1;cursor:inherit;box-sizing:border-box;margin:0;outline:0;border:none;background-color:transparent;padding-block:0;padding-inline:0;inline-size:100%;block-size:100%;color:inherit;font:inherit;font-size:var(--_field-font-size);text-overflow:ellipsis}forge-field{display:contents;--forge-field-multiline-resize:none}forge-field::part(label)::after{content:none}:host([theme=primary]) ::slotted([slot=member]){--forge-chip-field-background:var(--forge-theme-primary, #3f51b5);--forge-chip-field-color:var(--forge-theme-on-primary, #ffffff);--forge-chip-focus-indicator-color:var(--forge-theme-primary, #3f51b5)}:host([theme=secondary]) ::slotted([slot=member]){--forge-chip-field-background:var(--forge-theme-secondary, #ffc107);--forge-chip-field-color:var(--forge-theme-on-secondary, #000000);--forge-chip-focus-indicator-color:var(--forge-theme-secondary, #ffc107)}:host([theme=tertiary]) ::slotted([slot=member]){--forge-chip-field-background:var(--forge-theme-tertiary, #3d5afe);--forge-chip-field-color:var(--forge-theme-on-tertiary, #ffffff);--forge-chip-focus-indicator-color:var(--forge-theme-tertiary, #3d5afe)}:host([theme=success]) ::slotted([slot=member]){--forge-chip-field-background:var(--forge-theme-success, #2e7d32);--forge-chip-field-color:var(--forge-theme-on-success, #ffffff);--forge-chip-focus-indicator-color:var(--forge-theme-success, #2e7d32)}:host([theme=warning]) ::slotted([slot=member]){--forge-chip-field-background:var(--forge-theme-warning, #d14900);--forge-chip-field-color:var(--forge-theme-on-warning, #ffffff);--forge-chip-focus-indicator-color:var(--forge-theme-warning, #d14900)}:host([theme=error]) ::slotted([slot=member]){--forge-chip-field-background:var(--forge-theme-error, #b00020);--forge-chip-field-color:var(--forge-theme-on-error, #ffffff);--forge-chip-focus-indicator-color:var(--forge-theme-error, #b00020)}:host([theme=info]) ::slotted([slot=member]){--forge-chip-field-background:var(--forge-theme-info, #1565c0);--forge-chip-field-color:var(--forge-theme-on-info, #ffffff);--forge-chip-focus-indicator-color:var(--forge-theme-info, #1565c0)}';
 /**
  * @tag forge-chip-field
  *

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/chips/chip/chip.d.ts

@@ -68,6 +68,7 @@ declare global {
  * @cssproperty --forge-chip-padding-block - The block padding of the chip.
  * @cssproperty --forge-chip-cursor - The cursor style of the chip.
  * @cssproperty --forge-chip-icon-font-size - The font size of the chip icon.
+ * @cssproperty --forge-chip-focus-indicator-color - The color of the focus indicator.
  * @cssproperty --forge-chip-disabled-opacity - The opacity of the disabled chip.
  * @cssproperty --forge-chip-disabled-cursor - The cursor style of the disabled chip.
  * @cssproperty --forge-chip-dense-height - The height of the dense chip.