@tylertech/forge 2.19.1 → 2.20.1

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

@@ -12,6 +12,14 @@ export declare const FIELD_CONSTANTS: {
         REQUIRED: string;
         HOST_LABEL_FLOATING: string;
     };
+    observedAttributes: {
+        DENSITY: string;
+        FLOAT_LABEL_TYPE: string;
+        SHAPE: string;
+        INVALID: string;
+        REQUIRED: string;
+        HOST_LABEL_FLOATING: string;
+    };
     observedInputAttributes: string[];
     selectors: {
         INPUT: string;

package/esm/field/field-constants.js

@@ -3,14 +3,6 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-const attributes = {
-    DENSITY: 'density',
-    FLOAT_LABEL_TYPE: 'float-label-type',
-    SHAPE: 'shape',
-    INVALID: 'invalid',
-    REQUIRED: 'required',
-    HOST_LABEL_FLOATING: `forge-label-floating`
-};
 const selectors = {
     INPUT: 'input,textarea'
 };
@@ -32,8 +24,18 @@ const classes = {
     ROOMY: 'forge-field--roomy',
     LABEL: 'forge-field--label'
 };
+const observedAttributes = {
+    DENSITY: 'density',
+    FLOAT_LABEL_TYPE: 'float-label-type',
+    SHAPE: 'shape',
+    INVALID: 'invalid',
+    REQUIRED: 'required',
+    HOST_LABEL_FLOATING: `forge-label-floating`
+};
+const attributes = Object.assign({}, observedAttributes);
 export const FIELD_CONSTANTS = {
     attributes,
+    observedAttributes,
     observedInputAttributes,
     selectors,
     classes

package/esm/menu/menu-foundation.js

@@ -413,8 +413,6 @@ export class MenuFoundation extends CascadingListDropdownAwareFoundation {
         else {
             this.optionsFactory = undefined;
             // Intentional shallow copy of member properties. These member objects have properties that are references to functions.
-            //   The typical JSON.parse(JSON.stringify(object)) will not work here. If this becomes an issue we'll add a deepClone
-            //   function to the core library.
             this._options = options.map(o => (Object.assign({}, o)));
             if (this._open) {
                 this._mapIconToLeadingIcon();
@@ -433,8 +431,6 @@ export class MenuFoundation extends CascadingListDropdownAwareFoundation {
             return [];
         }
         // Intentional shallow copy of member properties. These member objects have properties that are references to functions.
-        //   The typical JSON.parse(JSON.stringify(object)) will not work here. If this becomes an issue we'll add a deepClone
-        //   function to the core library.
         return this._flatOptions.map(o => (Object.assign({}, o)));
     }
     set optionsFactory(factory) {

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

@@ -42,7 +42,8 @@ export interface IPaginatorAdapter extends IBaseAdapter {
     enableLastPageButton(): void;
     setAlternative(alternative: boolean): void;
     setAlignment(alignment: PaginatorAlternativeAlignment): void;
-    handleFocusMove(from: PaginatorFieldIdentifier): void;
+    hasFocus(): boolean;
+    handleFocusMove(from?: PaginatorFieldIdentifier | null, options?: FocusOptions): void;
 }
 /**
  * Provides facilities for interacting with the internal DOM of `PaginatorComponent`.
@@ -95,6 +96,7 @@ export declare class PaginatorAdapter extends BaseAdapter<IPaginatorComponent> i
     enableLastPageButton(): void;
     setAlternative(alternative: boolean): void;
     setAlignment(alignment: PaginatorAlternativeAlignment): void;
-    handleFocusMove(from: PaginatorFieldIdentifier): void;
+    hasFocus(): boolean;
+    handleFocusMove(from?: PaginatorFieldIdentifier, options?: FocusOptions): void;
     private _tryFocus;
 }

package/esm/paginator/paginator-adapter.js

@@ -146,8 +146,11 @@ export class PaginatorAdapter extends BaseAdapter {
                 break;
         }
     }
-    handleFocusMove(from) {
-        if (!this._component.matches(':focus')) {
+    hasFocus() {
+        return this._component.matches(':focus');
+    }
+    handleFocusMove(from, options) {
+        if (from && !this.hasFocus()) {
             return; // We can only move focus elsewhere within the element if the element already contains focus
         }
         switch (from) {
@@ -157,7 +160,7 @@ export class PaginatorAdapter extends BaseAdapter {
                     this._lastPageButton,
                     this._previousPageButton,
                     this._pageSizeSelect
-                ]);
+                ], options);
                 break;
             case 'last':
                 this._tryFocus([
@@ -165,7 +168,7 @@ export class PaginatorAdapter extends BaseAdapter {
                     this._firstPageButton,
                     this._nextPageButton,
                     this._pageSizeSelect
-                ]);
+                ], options);
                 break;
             case 'previous':
                 this._tryFocus([
@@ -181,7 +184,7 @@ export class PaginatorAdapter extends BaseAdapter {
                     this._firstPageButton,
                     this._lastPageButton,
                     this._pageSizeSelect
-                ]);
+                ], options);
                 break;
             case 'page-size':
                 this._tryFocus([
@@ -189,14 +192,24 @@ export class PaginatorAdapter extends BaseAdapter {
                     this._lastPageButton,
                     this._firstPageButton,
                     this._previousPageButton
-                ]);
+                ], options);
+                break;
+            default:
+                this._tryFocus([
+                    this._firstPageButton,
+                    this._previousPageButton,
+                    this._nextPageButton,
+                    this._lastPageButton,
+                    this._pageSizeSelect
+                ], options);
                 break;
         }
     }
-    _tryFocus(elements) {
+    _tryFocus(elements, options) {
+        const preventScroll = typeof (options === null || options === void 0 ? void 0 : options.preventScroll) === 'boolean' ? options.preventScroll : true;
         for (const el of elements) {
             if (el && el.isConnected && !el.disabled) {
-                el.focus();
+                el.focus(Object.assign(Object.assign({}, options), { preventScroll }));
                 return;
             }
         }

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

@@ -13,6 +13,7 @@ export interface IPaginatorFoundation extends ICustomElementFoundation {
     total: number;
     pageSizeOptions: number[] | boolean;
     pageSizeLabel: string;
+    focus(options?: FocusOptions): void;
 }
 export declare class PaginatorFoundation {
     private _adapter;
@@ -36,6 +37,7 @@ export declare class PaginatorFoundation {
     constructor(_adapter: IPaginatorAdapter);
     initialize(): void;
     disconnect(): void;
+    focus(options?: FocusOptions): void;
     private _attachListeners;
     private _detachListeners;
     private _onFirstPage;

package/esm/paginator/paginator-foundation.js

@@ -36,6 +36,9 @@ export class PaginatorFoundation {
     disconnect() {
         this._detachListeners();
     }
+    focus(options) {
+        this._adapter.handleFocusMove(null, options);
+    }
     _attachListeners() {
         this._adapter.attachPageSizeChangeListener(this._pageSizeListener);
         this._adapter.attachFirstPageListener(this._firstPageListener);
@@ -58,7 +61,7 @@ export class PaginatorFoundation {
         const firstPage = 0;
         const canPage = this._emitChangeEvent(PAGINATOR_CONSTANTS.strings.FIRST_PAGE, { pageIndex: firstPage });
         if (canPage) {
-            this._applyPageIndex(firstPage, { fromField: 'first' });
+            this._applyPageIndex(firstPage);
         }
     }
     _onPreviousPage(evt) {
@@ -69,7 +72,7 @@ export class PaginatorFoundation {
         const prevPage = this._pageIndex - 1;
         const canPage = this._emitChangeEvent(PAGINATOR_CONSTANTS.strings.PREVIOUS_PAGE, { pageIndex: prevPage });
         if (canPage) {
-            this._applyPageIndex(prevPage, { fromField: 'previous' });
+            this._applyPageIndex(prevPage);
         }
     }
     _onNextPage(evt) {
@@ -80,7 +83,7 @@ export class PaginatorFoundation {
         const nextPage = this._pageIndex + 1;
         const canPage = this._emitChangeEvent(PAGINATOR_CONSTANTS.strings.NEXT_PAGE, { pageIndex: nextPage });
         if (canPage) {
-            this._applyPageIndex(nextPage, { fromField: 'next' });
+            this._applyPageIndex(nextPage);
         }
     }
     _onLastPage(evt) {
@@ -91,7 +94,7 @@ export class PaginatorFoundation {
         const lastPage = this._getMaxPages();
         const canPage = this._emitChangeEvent(PAGINATOR_CONSTANTS.strings.LAST_PAGE, { pageIndex: lastPage });
         if (canPage) {
-            this._applyPageIndex(lastPage, { fromField: 'last' });
+            this._applyPageIndex(lastPage);
         }
     }
     _onPageSizeChanged(evt) {
@@ -99,7 +102,7 @@ export class PaginatorFoundation {
         const pageSize = Number(evt.detail);
         const canPage = this._emitChangeEvent(PAGINATOR_CONSTANTS.strings.PAGE_SIZE, { pageIndex: 0, pageSize });
         if (canPage) {
-            this._applyPageIndex(0, { fromField: 'page-size' });
+            this._applyPageIndex(0);
             this._applyPageSize(pageSize);
         }
         else {
@@ -127,32 +130,32 @@ export class PaginatorFoundation {
         }
         this._adapter.setRangeLabel(this._rangeLabel);
     }
-    _syncInteractionState(fromField = null) {
+    _syncInteractionState() {
         this._adapter.enableFirstPageButton();
         this._adapter.enablePreviousPageButton();
         this._adapter.enableNextPageButton();
         this._adapter.enableLastPageButton();
         if (!this._hasFirstPage()) {
-            if (fromField) {
-                this._adapter.handleFocusMove(fromField);
+            if (this._adapter.hasFocus()) {
+                this._adapter.handleFocusMove('first');
             }
             this._adapter.disableFirstPageButton();
         }
         if (!this._hasPreviousPage()) {
-            if (fromField) {
-                this._adapter.handleFocusMove(fromField);
+            if (this._adapter.hasFocus()) {
+                this._adapter.handleFocusMove('previous');
             }
             this._adapter.disablePreviousPageButton();
         }
         if (!this._hasNextPage()) {
-            if (fromField) {
-                this._adapter.handleFocusMove(fromField);
+            if (this._adapter.hasFocus()) {
+                this._adapter.handleFocusMove('next');
             }
             this._adapter.disableNextPageButton();
         }
         if (!this._hasLastPage()) {
-            if (fromField) {
-                this._adapter.handleFocusMove(fromField);
+            if (this._adapter.hasFocus()) {
+                this._adapter.handleFocusMove('last');
             }
             this._adapter.disableLastPageButton();
         }
@@ -213,11 +216,11 @@ export class PaginatorFoundation {
             this._offset = this._pageIndex * this._pageSize;
         }
     }
-    _applyPageIndex(value, { fromField = null } = {}) {
+    _applyPageIndex(value) {
         this._pageIndex = value;
         this._computeOffset();
         this._updateRangeLabel();
-        this._syncInteractionState(fromField);
+        this._syncInteractionState();
         this._adapter.toggleHostAttribute(PAGINATOR_CONSTANTS.attributes.PAGE_INDEX, this._pageIndex != null, this._pageIndex.toString());
     }
     _applyPageSize(value) {

package/esm/paginator/paginator.d.ts

@@ -56,4 +56,5 @@ export declare class PaginatorComponent extends BaseComponent implements IPagina
     disabled: boolean;
     alternative: boolean;
     alignment: PaginatorAlternativeAlignment;
+    focus(options?: FocusOptions): void;
 }

package/esm/paginator/paginator.js

@@ -89,6 +89,9 @@ let PaginatorComponent = class PaginatorComponent extends BaseComponent {
                 break;
         }
     }
+    focus(options) {
+        this._foundation.focus(options);
+    }
 };
 __decorate([
     FoundationProperty()

package/esm/select/core/base-select-foundation.js

@@ -445,7 +445,9 @@ export class BaseSelectFoundation extends ListDropdownAwareFoundation {
         }, 300);
         this._options = this._adapter.getOptions();
         // TODO: Enhance this to cycle through closest matches (see the native select)
-        const matchedOption = this._flatOptions.find(option => !option.disabled && option.label.toLowerCase().startsWith(this._filterString.toLowerCase()));
+        const matchedOption = this._flatOptions.find(({ disabled, label }) => {
+            return !disabled && label.trim().toLowerCase().startsWith(this._filterString.trim().toLowerCase());
+        });
         if (matchedOption) {
             const optionIndex = this._flatOptions.indexOf(matchedOption);
             if (this._open) {

package/esm/split-view/split-view-panel/split-view-panel.js

@@ -14,7 +14,7 @@ import { SplitViewPanelAdapter } from './split-view-panel-adapter';
 import { IconComponent, IconRegistry } from '../../icon';
 import { RippleComponent } from '../../ripple';
 const template = '<template><div class=\"forge-split-view-panel\" id=\"root\" part=\"root\"><div class=\"forge-split-view-panel__handle\" id=\"handle\" part=\"handle\" role=\"separator\" aria-controls=\"content\" aria-grabbed=\"false\" tabindex=\"0\"><forge-icon class=\"forge-split-view-panel__icon\" id=\"icon\" part=\"icon\"></forge-icon><forge-ripple id=\"ripple\" part=\"ripple\"></forge-ripple></div><div class=\"forge-split-view-panel__content\" id=\"content\" part=\"content\" role=\"group\"><slot></slot></div></div></template>';
-const styles = '@-webkit-keyframes mdc-ripple-fg-radius-in{from{-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1);-webkit-transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1);transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1)}to{-webkit-transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1));transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}}@keyframes mdc-ripple-fg-radius-in{from{-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1);-webkit-transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1);transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1)}to{-webkit-transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1));transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}}@-webkit-keyframes mdc-ripple-fg-opacity-in{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:0}to{opacity:var(--mdc-ripple-fg-opacity, 0)}}@keyframes mdc-ripple-fg-opacity-in{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:0}to{opacity:var(--mdc-ripple-fg-opacity, 0)}}@-webkit-keyframes mdc-ripple-fg-opacity-out{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:var(--mdc-ripple-fg-opacity, 0)}to{opacity:0}}@keyframes mdc-ripple-fg-opacity-out{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:var(--mdc-ripple-fg-opacity, 0)}to{opacity:0}}.mdc-ripple-surface{--mdc-ripple-fg-size:0;--mdc-ripple-left:0;--mdc-ripple-top:0;--mdc-ripple-fg-scale:1;--mdc-ripple-fg-translate-end:0;--mdc-ripple-fg-translate-start:0;-webkit-tap-highlight-color:transparent;will-change:transform,opacity;position:relative;outline:0;overflow:hidden}.mdc-ripple-surface::after,.mdc-ripple-surface::before{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:\"\"}.mdc-ripple-surface::before{-webkit-transition:opacity 15ms linear,background-color 15ms linear;transition:opacity 15ms linear,background-color 15ms linear;z-index:1;z-index:var(--mdc-ripple-z-index,1)}.mdc-ripple-surface::after{z-index:0;z-index:var(--mdc-ripple-z-index,0)}.mdc-ripple-surface.mdc-ripple-upgraded::before{-webkit-transform:scale(var(--mdc-ripple-fg-scale,1));transform:scale(var(--mdc-ripple-fg-scale,1))}.mdc-ripple-surface.mdc-ripple-upgraded::after{top:0;left:0;-webkit-transform:scale(0);transform:scale(0);-webkit-transform-origin:center center;transform-origin:center center}.mdc-ripple-surface.mdc-ripple-upgraded--unbounded::after{top:var(--mdc-ripple-top,0);left:var(--mdc-ripple-left,0)}.mdc-ripple-surface.mdc-ripple-upgraded--foreground-activation::after{-webkit-animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards;animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards}.mdc-ripple-surface.mdc-ripple-upgraded--foreground-deactivation::after{-webkit-animation:mdc-ripple-fg-opacity-out 150ms;animation:mdc-ripple-fg-opacity-out 150ms;-webkit-transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1));transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}.mdc-ripple-surface::after,.mdc-ripple-surface::before{top:calc(50% - 100%);left:calc(50% - 100%);width:200%;height:200%}.mdc-ripple-surface.mdc-ripple-upgraded::after{width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.mdc-ripple-surface[data-mdc-ripple-is-unbounded],.mdc-ripple-upgraded--unbounded{overflow:visible}.mdc-ripple-surface[data-mdc-ripple-is-unbounded]::after,.mdc-ripple-surface[data-mdc-ripple-is-unbounded]::before,.mdc-ripple-upgraded--unbounded::after,.mdc-ripple-upgraded--unbounded::before{top:calc(50% - 50%);left:calc(50% - 50%);width:100%;height:100%}.mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::after,.mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::before,.mdc-ripple-upgraded--unbounded.mdc-ripple-upgraded::after,.mdc-ripple-upgraded--unbounded.mdc-ripple-upgraded::before{top:var(--mdc-ripple-top,calc(50% - 50%));left:var(--mdc-ripple-left,calc(50% - 50%));width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::after,.mdc-ripple-upgraded--unbounded.mdc-ripple-upgraded::after{width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.mdc-ripple-surface::after,.mdc-ripple-surface::before{background-color:#000;background-color:var(--mdc-ripple-color,#000)}.mdc-ripple-surface.mdc-ripple-surface--hover::before,.mdc-ripple-surface:hover::before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity, .04)}.mdc-ripple-surface.mdc-ripple-upgraded--background-focused::before,.mdc-ripple-surface:not(.mdc-ripple-upgraded):focus::before{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity, .12)}.mdc-ripple-surface:not(.mdc-ripple-upgraded)::after{-webkit-transition:opacity 150ms linear;transition:opacity 150ms linear}.mdc-ripple-surface:not(.mdc-ripple-upgraded):active::after{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity, .12)}.mdc-ripple-surface.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.12)}.mdc-ripple-surface::after,.mdc-ripple-surface::before{--mdc-ripple-color:var(--mdc-theme-on-surface)}.forge-split-view-panel{display:-webkit-box;display:flex;width:100%;height:100%;overflow:hidden;contain:paint size}.forge-split-view-panel__handle{color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-light,rgba(0,0,0,.54));background-color:#e0e0e0;background-color:var(--forge-theme-border-color,#e0e0e0);display:-webkit-box;display:flex;flex-shrink:0;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center;outline:0}.forge-split-view-panel__content{-webkit-box-flex:1;flex:1;overflow:hidden}.forge-split-view-panel--closed{display:none}.forge-split-view-panel--disabled #handle{pointer-events:none}.forge-split-view-panel--disabled .forge-split-view-panel__icon{display:none}.forge-split-view-panel[orientation=horizontal]{min-width:8px;min-width:var(--forge-split-view-handle-width,8px);width:calc(var(--forge-split-view-panel-size,unset) + var(--forge-split-view-handle-width,8px));-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row}.forge-split-view-panel[orientation=horizontal] .forge-split-view-panel__handle{width:8px;width:var(--forge-split-view-handle-width,8px);cursor:var(--forge-split-view-panel-cursor)}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--closing[resizable=end]{position:absolute;top:0;left:0;-webkit-animation-name:ug5dp2m;animation-name:ug5dp2m;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1)}@-webkit-keyframes ug5dp2m{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(-100%);transform:translateX(-100%)}}@keyframes ug5dp2m{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(-100%);transform:translateX(-100%)}}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--closing[resizable=start]{position:absolute;top:0;right:0;-webkit-animation-name:ug5dp3g;animation-name:ug5dp3g;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1)}@-webkit-keyframes ug5dp3g{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(100%);transform:translateX(100%)}}@keyframes ug5dp3g{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(100%);transform:translateX(100%)}}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--opening[resizable=end]{position:absolute;top:0;left:0;-webkit-animation-name:ug5dp49;animation-name:ug5dp49;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-direction:reverse}@-webkit-keyframes ug5dp49{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(-100%);transform:translateX(-100%)}}@keyframes ug5dp49{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(-100%);transform:translateX(-100%)}}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--opening[resizable=start]{position:absolute;top:0;right:0;-webkit-animation-name:ug5dp4l;animation-name:ug5dp4l;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-direction:reverse}@-webkit-keyframes ug5dp4l{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(100%);transform:translateX(100%)}}@keyframes ug5dp4l{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(100%);transform:translateX(100%)}}.forge-split-view-panel[orientation=vertical]{min-height:8px;min-height:var(--forge-split-view-handle-width,8px);height:calc(var(--forge-split-view-panel-size,unset) + var(--forge-split-view-handle-width,8px));-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column}.forge-split-view-panel[orientation=vertical] .forge-split-view-panel__handle{height:8px;height:var(--forge-split-view-handle-width,8px);cursor:var(--forge-split-view-panel-cursor)}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--closing[resizable=end]{position:absolute;top:0;left:0;-webkit-animation-name:ug5dp4v;animation-name:ug5dp4v;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1)}@-webkit-keyframes ug5dp4v{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(-100%);transform:translateY(-100%)}}@keyframes ug5dp4v{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(-100%);transform:translateY(-100%)}}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--closing[resizable=start]{position:absolute;bottom:0;left:0;-webkit-animation-name:ug5dp5f;animation-name:ug5dp5f;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1)}@-webkit-keyframes ug5dp5f{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(100%);transform:translateY(100%)}}@keyframes ug5dp5f{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(100%);transform:translateY(100%)}}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--opening[resizable=end]{position:absolute;top:0;left:0;-webkit-animation-name:ug5dp5u;animation-name:ug5dp5u;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-direction:reverse}@-webkit-keyframes ug5dp5u{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(-100%);transform:translateY(-100%)}}@keyframes ug5dp5u{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(-100%);transform:translateY(-100%)}}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--opening[resizable=start]{position:absolute;bottom:0;left:0;-webkit-animation-name:ug5dp69;animation-name:ug5dp69;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-direction:reverse}@-webkit-keyframes ug5dp69{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(100%);transform:translateY(100%)}}@keyframes ug5dp69{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(100%);transform:translateY(100%)}}:host{z-index:var(--forge-split-view-animating-layer)!important;display:block;position:relative;height:100%;width:100%;-webkit-box-flex:0;flex:0}:host([hidden]){display:none}:host(:not([resizable=start],[resizable=end])){-webkit-box-flex:1;flex:1}:host(:not([resizable=start],[resizable=end])) .forge-split-view-panel{width:100%;height:100%;min-width:0;min-height:0}:host(:not([resizable=start],[resizable=end])) .forge-split-view-panel__handle{display:none}';
+const styles = '@-webkit-keyframes mdc-ripple-fg-radius-in{from{-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1);-webkit-transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1);transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1)}to{-webkit-transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1));transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}}@keyframes mdc-ripple-fg-radius-in{from{-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1);-webkit-transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1);transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1)}to{-webkit-transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1));transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}}@-webkit-keyframes mdc-ripple-fg-opacity-in{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:0}to{opacity:var(--mdc-ripple-fg-opacity, 0)}}@keyframes mdc-ripple-fg-opacity-in{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:0}to{opacity:var(--mdc-ripple-fg-opacity, 0)}}@-webkit-keyframes mdc-ripple-fg-opacity-out{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:var(--mdc-ripple-fg-opacity, 0)}to{opacity:0}}@keyframes mdc-ripple-fg-opacity-out{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:var(--mdc-ripple-fg-opacity, 0)}to{opacity:0}}.mdc-ripple-surface{--mdc-ripple-fg-size:0;--mdc-ripple-left:0;--mdc-ripple-top:0;--mdc-ripple-fg-scale:1;--mdc-ripple-fg-translate-end:0;--mdc-ripple-fg-translate-start:0;-webkit-tap-highlight-color:transparent;will-change:transform,opacity;position:relative;outline:0;overflow:hidden}.mdc-ripple-surface::after,.mdc-ripple-surface::before{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:\"\"}.mdc-ripple-surface::before{-webkit-transition:opacity 15ms linear,background-color 15ms linear;transition:opacity 15ms linear,background-color 15ms linear;z-index:1;z-index:var(--mdc-ripple-z-index,1)}.mdc-ripple-surface::after{z-index:0;z-index:var(--mdc-ripple-z-index,0)}.mdc-ripple-surface.mdc-ripple-upgraded::before{-webkit-transform:scale(var(--mdc-ripple-fg-scale,1));transform:scale(var(--mdc-ripple-fg-scale,1))}.mdc-ripple-surface.mdc-ripple-upgraded::after{top:0;left:0;-webkit-transform:scale(0);transform:scale(0);-webkit-transform-origin:center center;transform-origin:center center}.mdc-ripple-surface.mdc-ripple-upgraded--unbounded::after{top:var(--mdc-ripple-top,0);left:var(--mdc-ripple-left,0)}.mdc-ripple-surface.mdc-ripple-upgraded--foreground-activation::after{-webkit-animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards;animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards}.mdc-ripple-surface.mdc-ripple-upgraded--foreground-deactivation::after{-webkit-animation:mdc-ripple-fg-opacity-out 150ms;animation:mdc-ripple-fg-opacity-out 150ms;-webkit-transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1));transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}.mdc-ripple-surface::after,.mdc-ripple-surface::before{top:calc(50% - 100%);left:calc(50% - 100%);width:200%;height:200%}.mdc-ripple-surface.mdc-ripple-upgraded::after{width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.mdc-ripple-surface[data-mdc-ripple-is-unbounded],.mdc-ripple-upgraded--unbounded{overflow:visible}.mdc-ripple-surface[data-mdc-ripple-is-unbounded]::after,.mdc-ripple-surface[data-mdc-ripple-is-unbounded]::before,.mdc-ripple-upgraded--unbounded::after,.mdc-ripple-upgraded--unbounded::before{top:calc(50% - 50%);left:calc(50% - 50%);width:100%;height:100%}.mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::after,.mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::before,.mdc-ripple-upgraded--unbounded.mdc-ripple-upgraded::after,.mdc-ripple-upgraded--unbounded.mdc-ripple-upgraded::before{top:var(--mdc-ripple-top,calc(50% - 50%));left:var(--mdc-ripple-left,calc(50% - 50%));width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::after,.mdc-ripple-upgraded--unbounded.mdc-ripple-upgraded::after{width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.mdc-ripple-surface::after,.mdc-ripple-surface::before{background-color:#000;background-color:var(--mdc-ripple-color,#000)}.mdc-ripple-surface.mdc-ripple-surface--hover::before,.mdc-ripple-surface:hover::before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity, .04)}.mdc-ripple-surface.mdc-ripple-upgraded--background-focused::before,.mdc-ripple-surface:not(.mdc-ripple-upgraded):focus::before{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity, .12)}.mdc-ripple-surface:not(.mdc-ripple-upgraded)::after{-webkit-transition:opacity 150ms linear;transition:opacity 150ms linear}.mdc-ripple-surface:not(.mdc-ripple-upgraded):active::after{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity, .12)}.mdc-ripple-surface.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.12)}.mdc-ripple-surface::after,.mdc-ripple-surface::before{--mdc-ripple-color:var(--mdc-theme-on-surface)}.forge-split-view-panel{display:-webkit-box;display:flex;width:100%;height:100%;overflow:hidden;contain:paint size}.forge-split-view-panel__handle{color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-light,rgba(0,0,0,.54));background-color:#e0e0e0;background-color:var(--forge-theme-border-color,#e0e0e0);display:-webkit-box;display:flex;flex-shrink:0;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center;outline:0}.forge-split-view-panel__content{-webkit-box-flex:1;flex:1;overflow:hidden}.forge-split-view-panel--closed{display:none}.forge-split-view-panel--disabled #handle{pointer-events:none}.forge-split-view-panel--disabled .forge-split-view-panel__icon{display:none}.forge-split-view-panel[orientation=horizontal]{min-width:8px;min-width:var(--forge-split-view-handle-width,8px);width:calc(var(--forge-split-view-panel-size,unset) + var(--forge-split-view-handle-width,8px));-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row}.forge-split-view-panel[orientation=horizontal] .forge-split-view-panel__handle{width:8px;width:var(--forge-split-view-handle-width,8px);cursor:var(--forge-split-view-panel-cursor)}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--closing[resizable=end]{position:absolute;top:0;left:0;-webkit-animation-name:unhqqyb;animation-name:unhqqyb;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1)}@-webkit-keyframes unhqqyb{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(-100%);transform:translateX(-100%)}}@keyframes unhqqyb{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(-100%);transform:translateX(-100%)}}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--closing[resizable=start]{position:absolute;top:0;right:0;-webkit-animation-name:unhqqyf;animation-name:unhqqyf;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1)}@-webkit-keyframes unhqqyf{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(100%);transform:translateX(100%)}}@keyframes unhqqyf{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(100%);transform:translateX(100%)}}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--opening[resizable=end]{position:absolute;top:0;left:0;-webkit-animation-name:unhqqyw;animation-name:unhqqyw;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-direction:reverse}@-webkit-keyframes unhqqyw{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(-100%);transform:translateX(-100%)}}@keyframes unhqqyw{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(-100%);transform:translateX(-100%)}}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--opening[resizable=start]{position:absolute;top:0;right:0;-webkit-animation-name:unhqqzk;animation-name:unhqqzk;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-direction:reverse}@-webkit-keyframes unhqqzk{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(100%);transform:translateX(100%)}}@keyframes unhqqzk{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(100%);transform:translateX(100%)}}.forge-split-view-panel[orientation=vertical]{min-height:8px;min-height:var(--forge-split-view-handle-width,8px);height:calc(var(--forge-split-view-panel-size,unset) + var(--forge-split-view-handle-width,8px));-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column}.forge-split-view-panel[orientation=vertical] .forge-split-view-panel__handle{height:8px;height:var(--forge-split-view-handle-width,8px);cursor:var(--forge-split-view-panel-cursor)}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--closing[resizable=end]{position:absolute;top:0;left:0;-webkit-animation-name:unhqqzz;animation-name:unhqqzz;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1)}@-webkit-keyframes unhqqzz{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(-100%);transform:translateY(-100%)}}@keyframes unhqqzz{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(-100%);transform:translateY(-100%)}}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--closing[resizable=start]{position:absolute;bottom:0;left:0;-webkit-animation-name:unhqr00;animation-name:unhqr00;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1)}@-webkit-keyframes unhqr00{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(100%);transform:translateY(100%)}}@keyframes unhqr00{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(100%);transform:translateY(100%)}}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--opening[resizable=end]{position:absolute;top:0;left:0;-webkit-animation-name:unhqr0e;animation-name:unhqr0e;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-direction:reverse}@-webkit-keyframes unhqr0e{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(-100%);transform:translateY(-100%)}}@keyframes unhqr0e{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(-100%);transform:translateY(-100%)}}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--opening[resizable=start]{position:absolute;bottom:0;left:0;-webkit-animation-name:unhqr13;animation-name:unhqr13;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-direction:reverse}@-webkit-keyframes unhqr13{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(100%);transform:translateY(100%)}}@keyframes unhqr13{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(100%);transform:translateY(100%)}}:host{z-index:var(--forge-split-view-animating-layer)!important;display:block;position:relative;height:100%;width:100%;-webkit-box-flex:0;flex:0}:host([hidden]){display:none}:host(:not([resizable=start],[resizable=end])){-webkit-box-flex:1;flex:1}:host(:not([resizable=start],[resizable=end])) .forge-split-view-panel{width:100%;height:100%;min-width:0;min-height:0}:host(:not([resizable=start],[resizable=end])) .forge-split-view-panel__handle{display:none}';
 /**
  * The custom element class behind the `<forge-split-view-panel>` element.
  *

package/esm/stepper/stepper/stepper-foundation.js

@@ -55,7 +55,7 @@ export class StepperFoundation {
     }
     /** The step configurations. */
     get steps() {
-        return JSON.parse(JSON.stringify(this._steps));
+        return this._steps.map(s => (Object.assign({}, s))); // Shallow clone
     }
     set steps(value) {
         if (Array.isArray(value) && value.length > 0) {

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

@@ -76,6 +76,7 @@ export declare class TableFoundation implements ITableFoundation {
     private _rowDoubleClickListener;
     private _selectRowListener;
     private _selectAllListener;
+    private _sortableHeadCellKeydownListener;
     private _headRowMouseDownListener;
     private _headRowContextMenuListener;
     private _documentMouseMoveListener;
@@ -259,6 +260,7 @@ export declare class TableFoundation implements ITableFoundation {
     private _onHeadRowMouseDown;
     private _onMouseMove;
     private _onMouseUp;
+    private _onSortableHeadCellKeydown;
     /**
      * Called when a click event is triggered on the table header row.
      * We use this to capture all click events on the row, and determine which

package/esm/table/table-foundation.js

@@ -42,6 +42,7 @@ export class TableFoundation {
         this._rowDoubleClickListener = evt => this._onRowDoubleClick(evt);
         this._selectRowListener = evt => this._onRowSelected(evt);
         this._selectAllListener = evt => this._onSelectAll(evt);
+        this._sortableHeadCellKeydownListener = (evt) => this._onSortableHeadCellKeydown(evt);
         this._headRowMouseDownListener = evt => this._onHeadRowMouseDown(evt);
         this._headRowContextMenuListener = evt => this._onHeadRowContextMenu(evt);
         this._documentMouseMoveListener = evt => this._onMouseMove(evt);
@@ -86,13 +87,11 @@ export class TableFoundation {
         this._renderBody();
     }
     get data() {
-        return JSON.parse(JSON.stringify(this._data));
+        return this._data.map(o => (Object.assign({}, o))); // Shallow clone
     }
     /** The column configuration options. */
     set columnConfigurations(value) {
         // Intentional shallow copy of member properties. These member objects have properties that are references to functions.
-        //   The typical JSON.parse(JSON.stringify(object)) will not work here. If this becomes an issue we'll add a deepClone
-        //   function to the core library.
         this._columnConfigurations = value.map(cc => (Object.assign({}, cc)));
         // Update hidden column manager
         this._hiddenColumnManager.clear();
@@ -106,8 +105,6 @@ export class TableFoundation {
     }
     get columnConfigurations() {
         // Intentional shallow copy of member properties. These member objects have properties that are references to functions.
-        //   The typical JSON.parse(JSON.stringify(object)) will not work here. If this becomes an issue we'll add a deepClone
-        //   function to the core library.
         return this._columnConfigurations.map(cc => (Object.assign({}, cc)));
     }
     /** Gets the visible column configurations. */
@@ -124,6 +121,7 @@ export class TableFoundation {
             doubleClickListener: this._allowRowClick ? this._rowDoubleClickListener : null,
             selectListener: this._select ? this._selectRowListener : null,
             selectAllListener: this._multiselect ? this._selectAllListener : null,
+            sortableHeadCellKeydownListener: this._sortableHeadCellKeydownListener,
             headRowMouseDownListener: this._headRowMouseDownListener,
             headRowContextMenuListener: this._headRowContextMenuListener,
             filterListener: this._filter ? this._filterListener : null,
@@ -699,7 +697,11 @@ export class TableFoundation {
         this._adapter.emitHostEvent(TABLE_CONSTANTS.events.SELECT_ALL, data, true, false);
     }
     _onHeadRowContextMenu(evt) {
-        evt.preventDefault();
+        // We only handle this event on MacOS due to the `ctrl+click` combination triggering the contextmenu event...
+        // So we only detect that scenario here to still allow for the default context menu on Mac when right-clicking
+        if (evt.ctrlKey) {
+            evt.preventDefault();
+        }
     }
     _onHeadRowMouseDown(evt) {
         if (evt.button !== 0) {
@@ -764,6 +766,15 @@ export class TableFoundation {
         }
         this._headCellMouseDownIndex = undefined;
     }
+    _onSortableHeadCellKeydown(evt) {
+        if (evt.key === ' ' || evt.key === 'Enter') {
+            const composedPath = getEventPath(evt);
+            const rowElement = composedPath.find(el => el.tagName === 'TR');
+            const thElement = composedPath.find(el => el.tagName === 'TH');
+            const cellIndex = Array.from(rowElement.cells).findIndex(c => c === thElement);
+            this._onSort(cellIndex);
+        }
+    }
     /**
      * Called when a click event is triggered on the table header row.
      * We use this to capture all click events on the row, and determine which

package/esm/table/table-utils.js

@@ -141,7 +141,15 @@ export class TableUtils {
             th.scope = 'col';
             addClass([TABLE_CONSTANTS.classes.TABLE_CELL, TABLE_CONSTANTS.classes.TABLE_HEAD_CELL], th);
             // We wrap the header text in a div for ease of alignment
-            const cellContainer = document.createElement('div');
+            let cellContainer;
+            if (columnConfig.sortable) {
+                cellContainer = document.createElement('button');
+                cellContainer.type = 'button';
+                cellContainer.addEventListener('keydown', tableConfiguration.sortableHeadCellKeydownListener);
+            }
+            else {
+                cellContainer = document.createElement('div');
+            }
             cellContainer.classList.add(TABLE_CONSTANTS.classes.TABLE_HEAD_CELL_CONTAINER);
             // Add tooltip for multisort
             if (tableConfiguration.multiColumnSort) {
@@ -236,6 +244,7 @@ export class TableUtils {
      */
     static setSortDirection(tableElement, columnIndex, sortDirection) {
         const cell = TableUtils._getHeaderCellByIndex(tableElement, columnIndex);
+        tableElement.querySelectorAll('th[aria-sort]').forEach(th => th.removeAttribute('aria-sort'));
         TableUtils._setColumnSortDirection(cell, sortDirection);
     }
     /**
@@ -251,9 +260,11 @@ export class TableUtils {
             thElement.classList.remove(TABLE_CONSTANTS.classes.TABLE_HEAD_CELL_SORTED_DESCENDING);
         }
         if (!sortDirection || sortDirection === SortDirection.Descending) {
+            thElement.setAttribute('aria-sort', 'descending');
             thElement.classList.add(TABLE_CONSTANTS.classes.TABLE_HEAD_CELL_SORTED_DESCENDING);
         }
         else {
+            thElement.setAttribute('aria-sort', 'ascending');
             thElement.classList.add(TABLE_CONSTANTS.classes.TABLE_HEAD_CELL_SORTED_ASCENDING);
         }
     }
@@ -885,6 +896,7 @@ export class TableUtils {
      */
     static removeColumnSort(tableElement, columnIndex) {
         const cell = TableUtils._getHeaderCellByIndex(tableElement, columnIndex);
+        cell.removeAttribute('aria-sort');
         // Remove any existing sort direction classes from the existing th element
         if (cell.classList.contains(TABLE_CONSTANTS.classes.TABLE_HEAD_CELL_SORTED_ASCENDING)) {
             cell.classList.remove(TABLE_CONSTANTS.classes.TABLE_HEAD_CELL_SORTED_ASCENDING);

package/esm/table/types.d.ts

@@ -38,6 +38,7 @@ export interface ITableConfiguration {
     doubleClickListener: ((evt: Event) => void) | null;
     selectListener: ((evt: Event) => void) | null;
     selectAllListener: ((evt: Event) => void) | null;
+    sortableHeadCellKeydownListener: EventListener;
     headRowMouseDownListener: (evt: Event) => void;
     headRowContextMenuListener: (evt: Event) => void;
     filterListener: ((value: any, columnIndex: number) => void) | null;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tylertech/forge",
   "description": "Tyler Forge™ Web Components library",
-  "version": "2.19.1",
+  "version": "2.20.1",
   "author": "Tyler Technologies, Inc.",
   "license": "Apache-2.0",
   "repository": {

package/styles/table/_mixins.scss

@@ -113,10 +113,14 @@
             display: none;
           }
         }
-  
+
         &--sortable {
           @include head-cell-sortable(forge-table-head__cell-sort-icon, forge-table-head__cell__sort-order);
-  
+
+          button {
+            @include head-cell-sortable-button;
+          }
+
           &.forge-table-head__cell--sorted-ascending {
             .forge-table-head__cell-sort-icon {
               @include head-cell-sort-icon-ascending;
@@ -438,6 +442,20 @@
   }
 }
 
+@mixin head-cell-sortable-button {
+  cursor: pointer;
+  border: none;
+  background: transparent;
+  text-align: inherit;
+  margin: inherit;
+  padding-block: 4px;
+  padding-inline: 0;
+  font: inherit;
+  color: inherit;
+  width: 100%;
+  outline-offset: 4px;
+}
+
 /// The base table body row styles for row interactions.
 @mixin body-row() {
   height: variables.$tbody-row-height;

package/dist/esm/chunks/chunk.GO5A4GKZ.js

@@ -1,7 +0,0 @@
-/**
- * @license
- * Copyright 2023 Tyler Technologies, Inc. 
- * License: Apache-2.0
- */
-var e={DENSITY:"density",FLOAT_LABEL_TYPE:"float-label-type",SHAPE:"shape",INVALID:"invalid",REQUIRED:"required",HOST_LABEL_FLOATING:"forge-label-floating"},d={INPUT:"input,textarea"},l=["disabled","readonly","value","placeholder"],o={DISABLED:"forge-field--disabled",READONLY:"forge-field--readonly",INPUT_FOCUSED:"forge-field__input--focused",LEADING:"forge-field--leading",TRAILING:"forge-field--trailing",ADDON_END:"forge-field--addon-end",ADDON_END_CONTAINER:"forge-field__addon-end-container",FOCUSED:"forge-field--focused",LABEL_FOCUSED:"forge-field__label--focused",SHAPE_ROUNDED:"forge-field--shape-rounded",INVALID:"forge-field--invalid",REQUIRED:"forge-field--required",DENSE:"forge-field--dense",ROOMY:"forge-field--roomy",LABEL:"forge-field--label"},f={attributes:e,observedInputAttributes:l,selectors:d,classes:o};export{f as a};
-//# sourceMappingURL=chunk.GO5A4GKZ.js.map

package/dist/esm/chunks/chunk.GO5A4GKZ.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/field/field-constants.ts"],
-  "sourcesContent": ["const attributes = {\n  DENSITY: 'density',\n  FLOAT_LABEL_TYPE: 'float-label-type',\n  SHAPE: 'shape',\n  INVALID: 'invalid',\n  REQUIRED: 'required',\n  HOST_LABEL_FLOATING: `forge-label-floating`\n};\n\nconst selectors = {\n  INPUT: 'input,textarea'\n};\n\nconst observedInputAttributes = ['disabled', 'readonly', 'value', 'placeholder'];\n\nconst classes = {\n  DISABLED: 'forge-field--disabled',\n  READONLY: 'forge-field--readonly',\n  INPUT_FOCUSED: 'forge-field__input--focused',\n  LEADING: 'forge-field--leading',\n  TRAILING: 'forge-field--trailing',\n  ADDON_END: 'forge-field--addon-end',\n  ADDON_END_CONTAINER: 'forge-field__addon-end-container',\n  FOCUSED: 'forge-field--focused',\n  LABEL_FOCUSED: 'forge-field__label--focused',\n  SHAPE_ROUNDED: 'forge-field--shape-rounded',\n  INVALID: 'forge-field--invalid',\n  REQUIRED: 'forge-field--required',\n  DENSE: 'forge-field--dense',\n  ROOMY: 'forge-field--roomy',\n  LABEL: 'forge-field--label'\n};\n\nexport const FIELD_CONSTANTS = {\n  attributes,\n  observedInputAttributes,\n  selectors,\n  classes\n};\n\nexport type FieldDensityType = 'roomy' | 'default' | 'dense';\nexport type FieldFloatLabelType = 'always' | 'auto';\nexport type FieldShapeType = 'default' | 'rounded';\n"],
-  "mappings": "AAAA,IAAMA,EAAa,CACjB,QAAS,UACT,iBAAkB,mBAClB,MAAO,QACP,QAAS,UACT,SAAU,WACV,oBAAqB,sBACvB,EAEMC,EAAY,CAChB,MAAO,gBACT,EAEMC,EAA0B,CAAC,WAAY,WAAY,QAAS,aAAa,EAEzEC,EAAU,CACd,SAAU,wBACV,SAAU,wBACV,cAAe,8BACf,QAAS,uBACT,SAAU,wBACV,UAAW,yBACX,oBAAqB,mCACrB,QAAS,uBACT,cAAe,8BACf,cAAe,6BACf,QAAS,uBACT,SAAU,wBACV,MAAO,qBACP,MAAO,qBACP,MAAO,oBACT,EAEaC,EAAkB,CAC7B,WAAAJ,EACA,wBAAAE,EACA,UAAAD,EACA,QAAAE,CACF",
-  "names": ["attributes", "selectors", "observedInputAttributes", "classes", "FIELD_CONSTANTS"]
-}