@tylertech/forge 2.8.0 → 2.10.0

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

@@ -9,10 +9,10 @@ import { DatePickerFormatCallback, DatePickerParseCallback, DatePickerPrepareMas
 import { BaseDatePickerFoundation } from './base-date-picker-foundation';
 import { IBaseDatePickerAdapter } from './base-date-picker-adapter';
 export interface IBaseDatePickerComponent<TValue> extends IBaseComponent {
-    value: TValue;
-    min: Date | string | null;
-    max: Date | string | null;
-    disabledDates: Date | Date[] | null;
+    value: TValue | undefined;
+    min: Date | string | null | undefined;
+    max: Date | string | null | undefined;
+    disabledDates: Date | Date[] | null | undefined;
     open: boolean;
     parseCallback: DatePickerParseCallback;
     formatCallback: DatePickerFormatCallback;
@@ -38,13 +38,13 @@ export declare abstract class BaseDatePickerComponent<TPublicValue, TPrivateValu
     disconnectedCallback(): void;
     attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
     /** Gets/sets the value of the component. */
-    value: TPublicValue;
+    value: TPublicValue | undefined;
     /** Gets/sets the minimum date the calendar will allow. */
-    min: Date | string | null;
+    min: Date | string | null | undefined;
     /** Gets/sets the maximum date the calendar will allow. */
-    max: Date | string | null;
+    max: Date | string | null | undefined;
     /** Gets/sets the dates that are restricted from being selected. */
-    disabledDates: Date | Date[] | null;
+    disabledDates: Date | Date[] | null | undefined;
     /** Gets/sets whether the calendar dropdown is open. */
     open: boolean;
     /** Gets/sets the CSS classes that are applied to the popup element. */

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

@@ -8,18 +8,18 @@ import { BaseDatePickerFoundation, IBaseDatePickerFoundation } from './base/base
 import { IDatePickerAdapter } from './date-picker-adapter';
 export interface IDatePickerFoundation extends IBaseDatePickerFoundation<Date | string> {
 }
-export declare class DatePickerFoundation extends BaseDatePickerFoundation<IDatePickerAdapter, Date | string | null, Date> implements IDatePickerFoundation {
+export declare class DatePickerFoundation extends BaseDatePickerFoundation<IDatePickerAdapter, Date | string | null | undefined, Date> implements IDatePickerFoundation {
     protected _mode: CalendarMode;
     constructor(adapter: IDatePickerAdapter);
     protected _initializeState(): void;
-    protected _emitChangeEvent(value: Date | null, force?: boolean): boolean;
+    protected _emitChangeEvent(value: Date | null | undefined, force?: boolean): boolean;
     protected _emitOpenEvent(): void;
     protected _emitCloseEvent(): void;
     protected _onToday(): void;
     protected _onClear(): void;
-    protected _getCurrentValue(): Date | null;
+    protected _getCurrentValue(): Date | null | undefined;
     protected _setFormattedInputValue(suppressValueChanges?: boolean): void;
-    protected _setValue(value: Date | null): void;
+    protected _setValue(value?: Date | null): void;
     protected _onDateSelected(event: ICalendarDateSelectEventData): void;
     protected _openCalendar(emitOpenEvent?: boolean): void;
     protected _applyMin(): void;
@@ -29,6 +29,6 @@ export declare class DatePickerFoundation extends BaseDatePickerFoundation<IDate
     protected _handleInput(value: string): void;
     protected _onInputValueChanged(value: string): void;
     private _applyValue;
-    get value(): Date | string | null;
-    set value(value: Date | string | null);
+    get value(): Date | string | null | undefined;
+    set value(value: Date | string | null | undefined);
 }

package/esm/date-picker/date-picker-foundation.js

@@ -33,7 +33,9 @@ export class DatePickerFoundation extends BaseDatePickerFoundation {
         this._adapter.emitHostEvent(DATE_PICKER_CONSTANTS.events.CLOSE, undefined, false);
     }
     _onToday() {
-        this._onDateSelected({ date: new Date(), selected: true, type: 'date' });
+        const today = new Date();
+        today.setHours(0, 0, 0, 0);
+        this._onDateSelected({ date: today, selected: true, type: 'date' });
     }
     _onClear() {
         this._onDateSelected({ date: null, selected: false, type: 'date' });

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

@@ -23,7 +23,7 @@ declare global {
  *
  * @tag forge-date-picker
  */
-export declare class DatePickerComponent extends BaseDatePickerComponent<Date | string, Date, DatePickerFoundation> implements IDatePickerComponent {
+export declare class DatePickerComponent extends BaseDatePickerComponent<Date | string | undefined, Date, DatePickerFoundation> implements IDatePickerComponent {
     static get observedAttributes(): string[];
     constructor();
     attributeChangedCallback(name: string, oldValue: string, newValue: string): void;

package/esm/date-range-picker/date-range-picker-foundation.d.ts

@@ -8,13 +8,13 @@ import { BaseDatePickerFoundation, IBaseDatePickerFoundation } from '../date-pic
 import { IDateRangePickerAdapter } from './date-range-picker-adapter';
 import { IDatePickerRange } from './date-range-picker-constants';
 export interface IDateRangePickerFoundation extends IBaseDatePickerFoundation<IDatePickerRange> {
-    from: Date | string | null;
-    to: Date | string | null;
+    from: Date | string | null | undefined;
+    to: Date | string | null | undefined;
 }
 export declare class DateRangePickerFoundation extends BaseDatePickerFoundation<IDateRangePickerAdapter, IDatePickerRange> implements IDateRangePickerFoundation {
     protected _mode: CalendarMode;
-    private _from;
-    private _to;
+    private _from?;
+    private _to?;
     private _toInputListener;
     private _toInputKeydownListener;
     private _toInputFocusListener;
@@ -27,16 +27,16 @@ export declare class DateRangePickerFoundation extends BaseDatePickerFoundation<
     protected _setInputChangeListeners(): void;
     protected _removeInputChangeListeners(): void;
     protected _openCalendar(emitOpenEvent?: boolean): void;
-    protected _emitChangeEvent(value: DateRange | null, force?: boolean): boolean;
+    protected _emitChangeEvent(value: DateRange | null | undefined, force?: boolean): boolean;
     protected _emitOpenEvent(): void;
     protected _emitCloseEvent(): void;
     protected _onToday(): void;
     protected _onClear(): void;
-    protected _getCurrentValue(): IDatePickerRange | null;
+    protected _getCurrentValue(): IDatePickerRange | null | undefined;
     private _formatToInputValue;
     protected _setFormattedInputValue(suppressValueChanges?: boolean): void;
     private _setFormattedToInputValue;
-    protected _setValue(value: Date | null): void;
+    protected _setValue(value: Date | null | undefined): void;
     private _setToValue;
     protected _onDateSelected(event: ICalendarDateSelectEventData): void;
     protected _applyMin(): void;
@@ -53,8 +53,8 @@ export declare class DateRangePickerFoundation extends BaseDatePickerFoundation<
     private _onToInputValueChanged;
     get value(): IDatePickerRange;
     set value(value: IDatePickerRange);
-    get from(): Date | string | null;
-    set from(value: Date | string | null);
-    get to(): Date | string | null;
-    set to(value: Date | string | null);
+    get from(): Date | string | null | undefined;
+    set from(value: Date | string | null | undefined);
+    get to(): Date | string | null | undefined;
+    set to(value: Date | string | null | undefined);
 }

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

@@ -7,8 +7,8 @@ import { BaseDatePickerComponent, IBaseDatePickerComponent } from '../date-picke
 import { IDatePickerRange, IDateRangePickerChangeEventData } from './date-range-picker-constants';
 import { DateRangePickerFoundation } from './date-range-picker-foundation';
 export interface IDateRangePickerComponent extends IBaseDatePickerComponent<IDatePickerRange> {
-    from: Date | string | null;
-    to: Date | string | null;
+    from: Date | string | null | undefined;
+    to: Date | string | null | undefined;
 }
 declare global {
     interface HTMLElementTagNameMap {
@@ -31,7 +31,7 @@ export declare class DateRangePickerComponent extends BaseDatePickerComponent<ID
     constructor();
     attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
     /** Gets/sets the "from" date range value. */
-    from: Date | string | null;
+    from: Date | string | null | undefined;
     /** Gets/sets the "to" date range value. */
-    to: Date | string | null;
+    to: Date | string | null | undefined;
 }

package/esm/dialog/dialog-adapter.js

@@ -134,13 +134,13 @@ export class DialogAdapter extends BaseAdapter {
     }
     setSurfacePosition(x, y, positionType) {
         this._surfaceElement.style.position = positionType === 'absolute' ? positionType : 'relative';
-        if (y !== null) {
+        if (y != null) {
             this._surfaceElement.style.top = y;
         }
         else {
             this._surfaceElement.style.removeProperty('top');
         }
-        if (x !== null) {
+        if (x != null) {
             this._surfaceElement.style.left = x;
         }
         else {

package/esm/dialog/dialog-foundation.d.ts

@@ -15,8 +15,8 @@ export interface IDialogFoundation extends ICustomElementFoundation {
     closeCallback: DialogStateCallback;
     beforeCloseCallback: DialogStateCallback;
     positionType: DialogPositionType;
-    positionX: number | string | null;
-    positionY: number | string | null;
+    positionX: number | string | null | undefined;
+    positionY: number | string | null | undefined;
     moveable: boolean;
     moveTarget: string;
     initializeMoveTarget(): void;
@@ -91,10 +91,10 @@ export declare class DialogFoundation implements IDialogFoundation {
     set beforeCloseCallback(callback: DialogStateCallback);
     get positionType(): DialogPositionType;
     set positionType(value: DialogPositionType);
-    get positionX(): number | string | null;
-    set positionX(value: number | string | null);
-    get positionY(): number | string | null;
-    set positionY(value: number | string | null);
+    get positionX(): number | string | null | undefined;
+    set positionX(value: number | string | null | undefined);
+    get positionY(): number | string | null | undefined;
+    set positionY(value: number | string | null | undefined);
     get moveable(): boolean;
     set moveable(value: boolean);
     get moveTarget(): string;

package/esm/dialog/dialog-foundation.js

@@ -108,7 +108,7 @@ export class DialogFoundation {
             if (this._moveable) {
                 this._adapter.setMoveable(this._moveable);
             }
-            if (this._positionX !== null || this._positionY !== null) {
+            if (this._positionX != null || this._positionY != null) {
                 this._adapter.setSurfacePosition(this._positionX, this._positionY, this._positionType);
             }
         }

package/esm/dialog/dialog.d.ts

@@ -14,8 +14,8 @@ export interface IDialogComponent extends IBaseComponent {
     closeCallback: DialogStateCallback;
     beforeCloseCallback: () => boolean | Promise<boolean>;
     positionType: DialogPositionType;
-    positionX: number | string | null;
-    positionY: number | string | null;
+    positionX: number | string | null | undefined;
+    positionY: number | string | null | undefined;
     moveable: boolean;
     moveTarget: string;
     initializeMoveTarget(): void;
@@ -64,9 +64,9 @@ export declare class DialogComponent extends BaseComponent implements IDialogCom
     /** Gets/sets the position type when using custom positioning values. Default is 'absolute'. */
     positionType: DialogPositionType;
     /** Controls the horizontal position of the dialog surface. */
-    positionX: number | string | null;
+    positionX: number | string | null | undefined;
     /** Controls the vertical position of the dialog surface. */
-    positionY: number | string | null;
+    positionY: number | string | null | undefined;
     /** Gets/sets whether the dialog surface can be moved or not. */
     moveable: boolean;
     /** Gets/sets the selector used to target the element that is used as the drag target. */

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

@@ -36,14 +36,14 @@ export interface IFieldAdapter extends IBaseAdapter {
     isReadonly(): boolean;
     getLabelFontMetrics(): IFontInfo;
     getLabelWidth(fontSize: number, fontFamily: string): number;
-    initialize(required: boolean, rootSelector: string): void;
+    initialize(rootSelector: string): void;
     initializeFloatingLabel(): IFloatingLabel;
     ensureLabelOrder(): void;
     ensureSlottedLabel(): void;
     destroy(): void;
     setValueChangedListener(context: any, listener: (value: any) => void): void;
     destroyValueChangeListener(): void;
-    detectLabel(required: boolean): void;
+    detectLabel(): void;
     setRoomy(isRoomy: boolean): void;
     setDense(isDense: boolean): void;
     setInputAttributeObserver(listener: (name: string, value: string | null) => void): void;
@@ -59,7 +59,7 @@ export declare class FieldAdapter extends BaseAdapter<IFieldComponent> implement
     protected _inputMutationObserver: MutationObserver;
     protected _valueChangeListeners: Array<() => void>;
     constructor(component: IFieldComponent);
-    initialize(required: boolean, rootSelector: string): void;
+    initialize(rootSelector: string): void;
     destroy(): void;
     hasLabel(): boolean;
     ensureSlottedLabel(): void;
@@ -76,7 +76,7 @@ export declare class FieldAdapter extends BaseAdapter<IFieldComponent> implement
     removeInputListener(type: string, listener: (evt: Event) => void): void;
     setValueChangedListener(context: any, listener: (value: any) => void): void;
     destroyValueChangeListener(): void;
-    detectLabel(required: boolean): void;
+    detectLabel(): void;
     initializeFloatingLabel(): IFloatingLabel;
     inputHasValue(): boolean;
     fieldHasValue(): boolean;

package/esm/field/field-adapter.js

@@ -3,7 +3,7 @@
  * Copyright 2022 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { addClass, calculateFontWidth, getShadowElement, listenOwnProperty, Platform, removeClass, getActiveElement, createElementAttributeObserver, toggleClass } from '@tylertech/forge-core';
+import { addClass, calculateFontWidth, getShadowElement, listenOwnProperty, removeClass, getActiveElement, createElementAttributeObserver, toggleClass } from '@tylertech/forge-core';
 import { BaseAdapter } from '../core/base/base-adapter';
 import { FloatingLabel } from '../floating-label/floating-label';
 import { FIELD_CONSTANTS } from './field-constants';
@@ -12,14 +12,14 @@ export class FieldAdapter extends BaseAdapter {
         super(component);
         this._valueChangeListeners = [];
     }
-    initialize(required, rootSelector) {
+    initialize(rootSelector) {
         this._rootElement = getShadowElement(this._component, rootSelector);
         this._labelSlot = getShadowElement(this._component, 'slot[name=label]');
         this._leadingSlot = getShadowElement(this._component, 'slot[name=leading]');
         this._trailingSlot = getShadowElement(this._component, 'slot[name=trailing]');
         this._addonEndSlot = getShadowElement(this._component, 'slot[name=addon-end]');
         this._inputElement = this._component.querySelector('input:not([type=checkbox]):not([type=radio])');
-        this.detectLabel(required);
+        this.detectLabel();
     }
     destroy() {
         if (this._inputMutationObserver) {
@@ -88,17 +88,8 @@ export class FieldAdapter extends BaseAdapter {
     destroyValueChangeListener() {
         this._valueChangeListeners.forEach(cb => cb());
     }
-    detectLabel(required) {
+    detectLabel() {
         this._labelElement = this._component.querySelector('label');
-        // Due to a Safari bug with ::slotted::after selectors, we need to manually append the required 'asterisk' to the label text
-        // https://bugs.webkit.org/show_bug.cgi?id=178237
-        if (required && Platform.WEBKIT && this._labelElement && !this._labelElement.innerText.endsWith('*')) {
-            const asterisk = document.createElement('span');
-            asterisk.style.color = 'var(--mdc-theme-error)';
-            asterisk.style.marginLeft = '1px';
-            asterisk.textContent = '*';
-            this._labelElement.appendChild(asterisk);
-        }
     }
     initializeFloatingLabel() {
         return new FloatingLabel(this._labelElement);

package/esm/field/field-foundation.js

@@ -26,7 +26,7 @@ export class FieldFoundation {
     // Public
     //
     initialize() {
-        this._adapter.initialize(this._required, '');
+        this._adapter.initialize('');
         if (this._adapter.hasLabel()) {
             this._adapter.ensureSlottedLabel();
         }
@@ -186,7 +186,7 @@ export class FieldFoundation {
         if (this._floatingLabel) {
             this._floatingLabel.destroy();
         }
-        this._adapter.detectLabel(this._required);
+        this._adapter.detectLabel();
         if (this._adapter.hasLabel() && this._density !== 'dense') {
             this._floatingLabel = this._adapter.initializeFloatingLabel();
             this._adapter.ensureLabelOrder();

package/esm/file-picker/file-picker-adapter.d.ts

@@ -18,8 +18,8 @@ export interface IFilePickerAdapter extends IBaseAdapter {
     removeDropListener(listener: (evt: DragEvent) => void): void;
     initializeButton(): void;
     setHighlightState(value: boolean): void;
-    setAccept(value: string | null): void;
-    setCapture(value: string | null): void;
+    setAccept(value: string | null | undefined): void;
+    setCapture(value: string | null | undefined): void;
     setMultiple(value: boolean): void;
     setDisabled(value: boolean): void;
     setCompact(value: boolean): void;
@@ -52,12 +52,12 @@ export declare class FilePickerAdapter extends BaseAdapter<IFilePickerComponent>
      * Sets the accept attribute of the input.
      * @param value The accept string.
      */
-    setAccept(value: string | null): void;
+    setAccept(value: string | null | undefined): void;
     /**
      * Sets the capture attribute of the input.
      * @param value The capture string.
      */
-    setCapture(value: string | null): void;
+    setCapture(value: string | null | undefined): void;
     /**
      * Sets the multiple attribute of the input.
      * @param value The multiple state.

package/esm/file-picker/file-picker-foundation.d.ts

@@ -6,9 +6,9 @@
 import { ICustomElementFoundation } from '@tylertech/forge-core';
 import { IFilePickerAdapter } from './file-picker-adapter';
 export interface IFilePickerFoundation extends ICustomElementFoundation {
-    accept: string | null;
-    maxSize: number | null;
-    capture: string | null;
+    accept: string | null | undefined;
+    maxSize: number | null | undefined;
+    capture: string | null | undefined;
     multiple: boolean;
     disabled: boolean;
     compact: boolean;
@@ -43,14 +43,14 @@ export declare class FilePickerFoundation implements IFilePickerFoundation {
     private _sortFiles;
     private _handleDragEvent;
     /** Get and set the allowed file types */
-    get accept(): string | null;
-    set accept(value: string | null);
+    get accept(): string | null | undefined;
+    set accept(value: string | null | undefined);
     /** Get and set the maximum allowed file size */
-    get maxSize(): number | null;
-    set maxSize(value: number | null);
+    get maxSize(): number | null | undefined;
+    set maxSize(value: number | null | undefined);
     /** Get and set the camera to use when capturing video or images */
-    get capture(): string | null;
-    set capture(value: string | null);
+    get capture(): string | null | undefined;
+    set capture(value: string | null | undefined);
     /** Get and set whether multiple files are allowed */
     get multiple(): boolean;
     set multiple(value: boolean);

package/esm/file-picker/file-picker.d.ts

@@ -6,9 +6,9 @@
 import { BaseComponent, IBaseComponent } from '../core/base/base-component';
 import { IFilePickerChangeEventData } from './file-picker-constants';
 export interface IFilePickerComponent extends IBaseComponent {
-    accept: string | null;
-    maxSize: number | null;
-    capture: string | null;
+    accept: string | null | undefined;
+    maxSize: number | null | undefined;
+    capture: string | null | undefined;
     multiple: boolean;
     disabled: boolean;
     compact: boolean;
@@ -34,11 +34,11 @@ export declare class FilePickerComponent extends BaseComponent implements IFileP
     connectedCallback(): void;
     attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
     /** Gets and sets the allowed file types */
-    accept: string | null;
+    accept: string | null | undefined;
     /** Gets and sets the maximum allowed file size */
-    maxSize: number | null;
+    maxSize: number | null | undefined;
     /** Gets and sets the camera to use when capturing video or images */
-    capture: string | null;
+    capture: string | null | undefined;
     /** Gets and sets whether multiple files are allowed */
     multiple: boolean;
     /** Gets and sets whether the file picker is disabled */

package/esm/floating-label/floating-label-adapter.js

@@ -18,7 +18,7 @@ export class FloatingLabelAdapter {
         return this._labelElement.classList.contains(className);
     }
     getWidth() {
-        if (this._labelElement.offsetParent !== null) {
+        if (this._labelElement.offsetParent != null) {
             return this._labelElement.scrollWidth;
         }
         return calcSizeUnattached(this._labelElement).width;

package/esm/index.d.ts

@@ -51,6 +51,7 @@ export * from './scaffold';
 export * from './select';
 export * from './skeleton';
 export * from './slider';
+export * from './split-view';
 export * from './stepper';
 export * from './switch';
 export * from './table';

package/esm/index.js

@@ -56,6 +56,7 @@ import { ScaffoldComponent } from './scaffold';
 import { OptionComponent, OptionGroupComponent, SelectComponent } from './select';
 import { SkeletonComponent } from './skeleton';
 import { SliderComponent } from './slider';
+import { SplitViewComponent } from './split-view';
 import { StepComponent, StepperComponent } from './stepper';
 import { SwitchComponent } from './switch';
 import { TableComponent } from './table';
@@ -116,6 +117,7 @@ export * from './scaffold';
 export * from './select';
 export * from './skeleton';
 export * from './slider';
+export * from './split-view';
 export * from './stepper';
 export * from './switch';
 export * from './table';
@@ -189,6 +191,7 @@ const CUSTOM_ELEMENTS = [
     SelectDropdownComponent,
     SkeletonComponent,
     SliderComponent,
+    SplitViewComponent,
     StepperComponent,
     StepComponent,
     SwitchComponent,

package/esm/keyboard-shortcut/keyboard-shortcut-foundation.d.ts

@@ -6,7 +6,7 @@
 import { ICustomElementFoundation } from '@tylertech/forge-core';
 import { IKeyboardShortcutAdapter } from './keyboard-shortcut-adapter';
 export interface IKeyboardShortcutFoundation extends ICustomElementFoundation {
-    key: string | null;
+    key: string | null | undefined;
     target: string;
     global: boolean;
     allowWhileTyping: boolean;
@@ -37,8 +37,8 @@ export declare class KeyboardShortcutFoundation implements IKeyboardShortcutFoun
     /** Sets the key combinations. */
     private _setKeyCombinations;
     /** Gets/sets the key binding. */
-    get key(): string | null;
-    set key(value: string | null);
+    get key(): string | null | undefined;
+    set key(value: string | null | undefined);
     /** Gets/sets the target element selector. */
     get target(): string;
     set target(value: string);

package/esm/keyboard-shortcut/keyboard-shortcut-foundation.js

@@ -58,7 +58,6 @@ export class KeyboardShortcutFoundation {
                 evt.preventDefault();
             }
             this._adapter.emitHostEvent(KEYBOARD_SHORTCUT_CONSTANTS.events.ACTIVATE, evt);
-            // TODO: should this also provide a callback?
         }
     }
     /** Sets the key combinations. */

package/esm/keyboard-shortcut/keyboard-shortcut-utils.d.ts

@@ -7,7 +7,7 @@ import { IKeyCombination } from './keyboard-shortcut-constants';
 /** Checks if an HTML element allows text input */
 export declare function elementAcceptsTextInput(el: any): boolean;
 /** Parses a string of key combinations into an array of keys and modifiers */
-export declare function parseKeyCombinations(keys: string | null, useCode?: boolean): IKeyCombination[];
+export declare function parseKeyCombinations(keys: string | null | undefined, useCode?: boolean): IKeyCombination[];
 /** Checks a keyboard event for a matching key combination */
 export declare function matchKeyCombination(evt: KeyboardEvent, keyCombinations: IKeyCombination[], useCode?: boolean): boolean;
 /** Returns an array of active modifier keys from a keyboard event */

package/esm/keyboard-shortcut/keyboard-shortcut-utils.js

@@ -20,7 +20,7 @@ export function parseKeyCombinations(keys, useCode = false) {
     return separatedKeys.map(key => {
         const keyParts = key.split('+');
         const fixedKey = useCode ? keyParts.pop() || '' : fixKey((keyParts.pop() || '').toLowerCase());
-        const modifiers = keyParts.sort().join('');
+        const modifiers = keyParts.sort().join('').toLowerCase();
         return { key: fixedKey, modifier: modifiers };
     });
 }
@@ -35,16 +35,16 @@ export function getModiferKeysString(evt) {
     // Ensure the modifier keys are appended in alphabetical order
     let modifierString = '';
     if (evt.altKey) {
-        modifierString += 'Alt';
+        modifierString += 'alt';
     }
     if (evt.ctrlKey) {
-        modifierString += 'Control';
+        modifierString += 'control';
     }
     if (evt.metaKey) {
-        modifierString += 'Meta';
+        modifierString += 'meta';
     }
     if (evt.shiftKey) {
-        modifierString += 'Shift';
+        modifierString += 'shift';
     }
     return modifierString;
 }

package/esm/keyboard-shortcut/keyboard-shortcut.d.ts

@@ -5,7 +5,8 @@
  */
 import { BaseComponent, IBaseComponent } from '../core/base/base-component';
 export interface IKeyboardShortcutComponent extends IBaseComponent {
-    key: string | null;
+    key: string | null | undefined;
+    keyBinding: string | null | undefined;
     target: string;
     global: boolean;
     allowWhileTyping: boolean;
@@ -32,7 +33,10 @@ export declare class KeyboardShortcutComponent extends BaseComponent implements
     disconnectedCallback(): void;
     attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
     /** Gets/sets the key binding. */
-    key: string | null;
+    key: string | null | undefined;
+    /** Alias for key. */
+    get keyBinding(): string | null | undefined;
+    set keyBinding(value: string | null | undefined);
     /** Gets/sets the target element selector. */
     target: string;
     /** Gets/sets the global listener state. */

package/esm/keyboard-shortcut/keyboard-shortcut.js

@@ -65,6 +65,13 @@ let KeyboardShortcutComponent = class KeyboardShortcutComponent extends BaseComp
                 break;
         }
     }
+    /** Alias for key. */
+    get keyBinding() {
+        return this.key;
+    }
+    set keyBinding(value) {
+        this.key = value;
+    }
 };
 __decorate([
     FoundationProperty()

package/esm/menu/menu.d.ts

@@ -53,7 +53,7 @@ export declare class MenuComponent extends ListDropdownAware implements IMenuCom
     /** Gets/sets the value of the option to select. */
     selectedValue: any;
     /** Gets/sets the menu placement (default is bottom-left). */
-    placement: PopupPlacement;
+    placement: `${PopupPlacement}`;
     /** Gets/sets dense state of the list options used in the menu popup. */
     dense: boolean;
     /** Gets/sets the class name to use for option icons. */
@@ -69,7 +69,7 @@ export declare class MenuComponent extends ListDropdownAware implements IMenuCom
     popupOffset: IPopupPosition;
     /** Sets the callback that will be executed for each option in the dropdown for producing custom option templates. */
     optionBuilder: MenuOptionBuilder;
-    /** Gets/sets whether selection of menu items is persisted. */
+    /** Gets the currently active popup element when the dropdown is open. */
     popupElement: HTMLElement | undefined;
     /** Force propagates the key event from another element this component. */
     propagateKeyEvent(evt: KeyboardEvent): void;