@tylertech/forge 3.7.0 → 3.8.0-dev.1

package/esm/button-toggle/button-toggle-group/button-toggle-group.d.ts

@@ -3,15 +3,15 @@
  * Copyright Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
+import { getFormState, getFormValue } from '../../constants';
+import { BaseComponent } from '../../core/base/base-component';
 import { IWithFormAssociation } from '../../core/mixins/form/with-form-associated';
-import { IWithLabelAwareness } from '../../core/mixins/label/with-label-aware';
-import { IWithElementInternals } from '../../core/mixins/internals/with-element-internals';
 import { IWithFormValidity } from '../../core/mixins/form/with-form-validity';
-import { BaseComponent } from '../../core/base/base-component';
-import { ButtonToggleGroupTheme, IButtonToggleGroupChangeEventData } from './button-toggle-group-constants';
-import { getFormState, getFormValue } from '../../constants';
-import { FormValue, FormRestoreState, FormRestoreReason } from '../../core/utils/form-utils';
 import { IWithDefaultAria } from '../../core/mixins/internals/with-default-aria';
+import { IWithElementInternals } from '../../core/mixins/internals/with-element-internals';
+import { IWithLabelAwareness } from '../../core/mixins/label/with-label-aware';
+import { FormRestoreReason, FormRestoreState, FormValue } from '../../core/utils/form-utils';
+import { ButtonToggleGroupTheme, IButtonToggleGroupChangeEventData } from './button-toggle-group-constants';
 export interface IButtonToggleGroupComponent extends IWithLabelAwareness, IWithFormAssociation, IWithFormValidity, IWithElementInternals, IWithDefaultAria {
     value: any;
     outlined: boolean;

package/esm/button-toggle/button-toggle-group/button-toggle-group.js

@@ -4,18 +4,18 @@
  * License: Apache-2.0
  */
 import { __decorate } from "tslib";
-import { attachShadowTemplate, coerceBoolean, customElement, coreProperty } from '@tylertech/forge-core';
+import { attachShadowTemplate, coerceBoolean, coreProperty, customElement } from '@tylertech/forge-core';
+import { getFormState, getFormValue, inputType, setDefaultAria } from '../../constants';
+import { BaseComponent } from '../../core/base/base-component';
 import { WithFormAssociation } from '../../core/mixins/form/with-form-associated';
-import { WithLabelAwareness } from '../../core/mixins/label/with-label-aware';
-import { WithElementInternals } from '../../core/mixins/internals/with-element-internals';
 import { WithFormValidity } from '../../core/mixins/form/with-form-validity';
-import { BaseComponent } from '../../core/base/base-component';
+import { WithDefaultAria } from '../../core/mixins/internals/with-default-aria';
+import { WithElementInternals } from '../../core/mixins/internals/with-element-internals';
+import { WithLabelAwareness } from '../../core/mixins/label/with-label-aware';
 import { ButtonToggleComponent } from '../button-toggle/button-toggle';
 import { ButtonToggleGroupAdapter } from './button-toggle-group-adapter';
 import { BUTTON_TOGGLE_GROUP_CONSTANTS } from './button-toggle-group-constants';
 import { ButtonToggleGroupCore } from './button-toggle-group-core';
-import { getFormState, getFormValue, inputType, setDefaultAria } from '../../constants';
-import { WithDefaultAria } from '../../core/mixins/internals/with-default-aria';
 const template = '<template><div class=\"forge-button-toggle-group\" part=\"root\"><slot></slot></div></template>';
 const styles = ':host{--_button-toggle-group-display:var(--forge-button-toggle-group-display, inline-flex)}:host{display:var(--_button-toggle-group-display)}:host([hidden]){display:none}.forge-button-toggle-group{--_button-toggle-group-gap:var(--forge-button-toggle-group-gap, 4px);--_button-toggle-group-padding:var(--forge-button-toggle-group-padding, 4px);--_button-toggle-group-padding-block:var(--forge-button-toggle-group-padding-block, var(--_button-toggle-group-padding));--_button-toggle-group-padding-inline:var(--forge-button-toggle-group-padding-inline, var(--_button-toggle-group-padding));--_button-toggle-group-height:var(--forge-button-toggle-group-height, var(--forge-button-height, 36px));--_button-toggle-group-dense-height:var(--forge-button-toggle-group-dense-height, var(--forge-button-dense-height, 24px));--_button-toggle-group-outline-width:var(--forge-button-toggle-group-outline-width, var(--forge-border-thin, 1px));--_button-toggle-group-outline-style:var(--forge-button-toggle-group-outline-style, solid);--_button-toggle-group-outline-color:var(--forge-button-toggle-group-outline-color, var(--forge-theme-outline-low, #9e9e9e));--_button-toggle-group-outline-color-active:var(--forge-button-toggle-group-outline-color-active, var(--forge-theme-outline-medium, #757575));--_button-toggle-group-shape:var(--forge-button-toggle-group-shape, calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1)));--_button-toggle-group-shape-start-start:var(--forge-button-toggle-group-shape-start-start, var(--_button-toggle-group-shape));--_button-toggle-group-shape-start-end:var(--forge-button-toggle-group-shape-start-end, var(--_button-toggle-group-shape));--_button-toggle-group-shape-end-start:var(--forge-button-toggle-group-shape-end-start, var(--_button-toggle-group-shape));--_button-toggle-group-shape-end-end:var(--forge-button-toggle-group-shape-end-end, var(--_button-toggle-group-shape));--_button-toggle-group-transition-duration:var(--forge-button-toggle-group-transition-duration, var(--forge-button-toggle-transition-duration, var(--forge-animation-duration-short3, 150ms)));--_button-toggle-group-transition-timing:var(--forge-button-toggle-group-transition-timing, var(--forge-button-toggle-transition-timing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1))))}.forge-button-toggle-group{display:flex;align-items:center;gap:var(--_button-toggle-group-gap);height:var(--_button-toggle-group-height);border-width:var(--_button-toggle-group-outline-width);border-style:var(--_button-toggle-group-outline-style);border-color:var(--_button-toggle-group-outline-color);border-start-start-radius:var(--_button-toggle-group-shape-start-start);border-start-end-radius:var(--_button-toggle-group-shape-start-end);border-end-start-radius:var(--_button-toggle-group-shape-end-start);border-end-end-radius:var(--_button-toggle-group-shape-end-end);padding-block:var(--_button-toggle-group-padding-block);padding-inline:var(--_button-toggle-group-padding-inline);transition-property:border-color;transition-duration:var(--_button-toggle-group-transition-duration);transition-timing-function:var(--_button-toggle-group-transition-timing)}:host(:not([disabled]):not([no-outline])) .forge-button-toggle-group:focus-within,:host(:not([disabled]):not([no-outline])) .forge-button-toggle-group:hover{--_button-toggle-group-outline-color:var(--_button-toggle-group-outline-color-active)}:host([no-outline]) .forge-button-toggle-group{--_button-toggle-group-padding:var(--forge-button-toggle-group-padding, 0);--_button-toggle-group-outline-style:var(--forge-button-toggle-group-outline-style, none)}:host(:is([dense],[density=dense])) .forge-button-toggle-group{--_button-toggle-group-height:var(--_button-toggle-group-dense-height)}:host([vertical]) .forge-button-toggle-group{height:auto;flex-direction:column}:host([vertical]) ::slotted(forge-button-toggle){height:var(--_button-toggle-group-height);width:100%}:host([vertical]) ::slotted(forge-divider:not([vertical])){margin-inline:4px;width:100%}::slotted(forge-divider[vertical]){margin-block:4px}:host([stretch]){display:block}:host([stretch]) .forge-button-toggle-group{width:100%}:host(:not([vertical])[stretch]) ::slotted(forge-button-toggle){flex:1}:host([theme=primary]) ::slotted(forge-button-toggle){--forge-button-toggle-selected-background:var(--forge-theme-primary-container, #d1d5ed);--forge-button-toggle-selected-color:var(--forge-theme-on-primary-container, #222c62);--forge-button-toggle-focus-indicator-color:var(--forge-theme-primary, #3f51b5)}:host([theme=secondary]) ::slotted(forge-button-toggle){--forge-button-toggle-selected-background:var(--forge-theme-secondary-container, #fff0c3);--forge-button-toggle-selected-color:var(--forge-theme-on-secondary-container, #8a6804);--forge-button-toggle-focus-indicator-color:var(--forge-theme-secondary, #ffc107)}:host([theme=success]) ::slotted(forge-button-toggle){--forge-button-toggle-selected-background:var(--forge-theme-success-container, #cde0ce);--forge-button-toggle-selected-color:var(--forge-theme-on-success-container, #19441b);--forge-button-toggle-focus-indicator-color:var(--forge-theme-success, #2e7d32)}:host([theme=error]) ::slotted(forge-button-toggle){--forge-button-toggle-selected-background:var(--forge-theme-error-container, #ecc2c9);--forge-button-toggle-selected-color:var(--forge-theme-on-error-container, #5f0011);--forge-button-toggle-focus-indicator-color:var(--forge-theme-error, #b00020)}:host([theme=warning]) ::slotted(forge-button-toggle){--forge-button-toggle-selected-background:var(--forge-theme-warning-container, #f4d3c2);--forge-button-toggle-selected-color:var(--forge-theme-on-warning-container, #712700);--forge-button-toggle-focus-indicator-color:var(--forge-theme-warning, #d14900)}:host([theme=info]) ::slotted(forge-button-toggle){--forge-button-toggle-selected-background:var(--forge-theme-info-container, #c7daf0);--forge-button-toggle-selected-color:var(--forge-theme-on-info-container, #0b3768);--forge-button-toggle-focus-indicator-color:var(--forge-theme-info, #1565c0)}';
 /**

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

@@ -3,6 +3,7 @@
  * Copyright Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
+/** @deprecated - These are internal constants that will be removed/moved in the future. Please avoid using them. */
 export declare const CARD_CONSTANTS: {
     elementName: "forge-card";
     observedAttributes: {

package/esm/card/card-constants.js

@@ -11,6 +11,7 @@ const observedAttributes = {
 const attributes = {
     ...observedAttributes
 };
+/** @deprecated - These are internal constants that will be removed/moved in the future. Please avoid using them. */
 export const CARD_CONSTANTS = {
     elementName,
     observedAttributes,

package/esm/card/card.d.ts

@@ -3,8 +3,8 @@
  * Copyright Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { BaseComponent, IBaseComponent } from '../core/base/base-component';
-export interface ICardComponent extends IBaseComponent {
+import { LitElement, PropertyValues, TemplateResult } from 'lit';
+export interface ICardComponent extends LitElement {
     raised: boolean;
 }
 declare global {
@@ -12,14 +12,10 @@ declare global {
         'forge-card': ICardComponent;
     }
 }
+export declare const CARD_TAG_NAME: keyof HTMLElementTagNameMap;
 /**
  * @tag forge-card
  *
- * @summary Cards are used to group related information and actions about a single subject.
- *
- * @property {boolean} [raised=false] - Whether the card has elevation or not.
- *
- * @attribute {boolean} [raised=false] - Whether the card has elevation or not.
  * @attribute {boolean} [no-padding=false] - Removes the default padding from the card.
  *
  * @cssproperty --forge-card-background - The background color of the card.
@@ -37,14 +33,17 @@ declare global {
  *
  * @csspart root - The root container element.
  *
+ * @state raised - The state of the card when raised.
+ *
  * @cssclass forge-card - The card container element _(required)_.
  * @cssclass forge-card--raised - The card container element when raised _(required)_.
  */
-export declare class CardComponent extends BaseComponent implements ICardComponent {
-    static get observedAttributes(): string[];
-    private _raised;
+export declare class CardComponent extends LitElement implements ICardComponent {
+    #private;
+    static styles: import("lit").CSSResult;
+    /** Whether the card has elevation or not. */
+    raised: boolean;
     constructor();
-    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
-    get raised(): boolean;
-    set raised(value: boolean);
+    willUpdate(changedProperties: PropertyValues<this>): void;
+    render(): TemplateResult;
 }

package/esm/card/card.js

@@ -3,20 +3,16 @@
  * Copyright Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { __decorate } from "tslib";
-import { customElement, attachShadowTemplate, coerceBoolean } from '@tylertech/forge-core';
-import { BaseComponent } from '../core/base/base-component';
-import { CARD_CONSTANTS } from './card-constants';
-const template = '<template><div class=\"forge-card\" part=\"root\"><slot></slot></div></template>';
-const styles = ':host{display:block}:host([hidden]){display:none}.forge-card{--_card-background:var(--forge-card-background, var(--forge-theme-surface, #ffffff));--_card-height:var(--forge-card-height, 100%);--_card-width:var(--forge-card-width, 100%);--_card-outline-color:var(--forge-card-outline-color, var(--forge-theme-outline, #e0e0e0));--_card-outline-width:var(--forge-card-outline-width, var(--forge-border-thin, 1px));--_card-outline-style:var(--forge-card-outline-style, solid);--_card-elevation:var(--forge-card-elevation, none);--_card-padding:var(--forge-card-padding, var(--forge-spacing-medium, 16px));--_card-shape:var(--forge-card-shape, calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1)));--_card-overflow:var(--forge-card-overflow, initial);--_card-raised-elevation:var(--forge-card-raised-elevation, 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12));--_card-raised-outline-width:var(--forge-card-raised-outline-width, 0)}.forge-card{background:var(--_card-background);border-color:var(--_card-outline-color);border-width:var(--_card-outline-width);border-style:var(--_card-outline-style);border-radius:var(--_card-shape);box-shadow:var(--_card-elevation);box-sizing:border-box;padding:var(--_card-padding);overflow:var(--_card-overflow);height:var(--_card-height);width:var(--_card-width);-webkit-tap-highlight-color:transparent}:host([raised]) .forge-card{--_card-elevation:var(--_card-raised-elevation);--_card-outline-width:var(--_card-raised-outline-width)}:host([no-padding]) .forge-card{--_card-padding:var(--forge-card-padding, 0)}';
+var _CardComponent_internals;
+import { __classPrivateFieldGet, __classPrivateFieldSet, __decorate } from "tslib";
+import { html, LitElement, unsafeCSS } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { toggleState } from '../core/utils/utils';
+const styles = ':host{display:block}:host([hidden]){display:none}.forge-card{--_card-background:var(--forge-card-background, var(--forge-theme-surface, #ffffff));--_card-height:var(--forge-card-height, 100%);--_card-width:var(--forge-card-width, 100%);--_card-outline-color:var(--forge-card-outline-color, var(--forge-theme-outline, #e0e0e0));--_card-outline-width:var(--forge-card-outline-width, var(--forge-border-thin, 1px));--_card-outline-style:var(--forge-card-outline-style, solid);--_card-elevation:var(--forge-card-elevation, none);--_card-padding:var(--forge-card-padding, var(--forge-spacing-medium, 16px));--_card-shape:var(--forge-card-shape, calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1)));--_card-overflow:var(--forge-card-overflow, initial);--_card-raised-elevation:var(--forge-card-raised-elevation, 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12));--_card-raised-outline-width:var(--forge-card-raised-outline-width, 0)}.forge-card{background:var(--_card-background);border-color:var(--_card-outline-color);border-width:var(--_card-outline-width);border-style:var(--_card-outline-style);border-radius:var(--_card-shape);box-shadow:var(--_card-elevation);box-sizing:border-box;padding:var(--_card-padding);overflow:var(--_card-overflow);height:var(--_card-height);width:var(--_card-width);-webkit-tap-highlight-color:transparent}:host(:where([raised],:state(raised))) .forge-card{--_card-elevation:var(--_card-raised-elevation);--_card-outline-width:var(--_card-raised-outline-width)}:host([no-padding]) .forge-card{--_card-padding:var(--forge-card-padding, 0)}';
+export const CARD_TAG_NAME = 'forge-card';
 /**
  * @tag forge-card
  *
- * @summary Cards are used to group related information and actions about a single subject.
- *
- * @property {boolean} [raised=false] - Whether the card has elevation or not.
- *
- * @attribute {boolean} [raised=false] - Whether the card has elevation or not.
  * @attribute {boolean} [no-padding=false] - Removes the default padding from the card.
  *
  * @cssproperty --forge-card-background - The background color of the card.
@@ -34,39 +30,34 @@ const styles = ':host{display:block}:host([hidden]){display:none}.forge-card{--_
  *
  * @csspart root - The root container element.
  *
+ * @state raised - The state of the card when raised.
+ *
  * @cssclass forge-card - The card container element _(required)_.
  * @cssclass forge-card--raised - The card container element when raised _(required)_.
  */
-let CardComponent = class CardComponent extends BaseComponent {
-    static get observedAttributes() {
-        return Object.values(CARD_CONSTANTS.observedAttributes);
-    }
+let CardComponent = class CardComponent extends LitElement {
     constructor() {
         super();
-        this._raised = false;
-        attachShadowTemplate(this, template, styles);
+        _CardComponent_internals.set(this, void 0);
+        /** Whether the card has elevation or not. */
+        this.raised = false; // TODO: remove reflect in v4 in favor of :state
+        __classPrivateFieldSet(this, _CardComponent_internals, this.attachInternals(), "f");
     }
-    attributeChangedCallback(name, oldValue, newValue) {
-        switch (name) {
-            case CARD_CONSTANTS.attributes.RAISED:
-                this.raised = coerceBoolean(newValue);
-                break;
+    willUpdate(changedProperties) {
+        if (changedProperties.has('raised')) {
+            toggleState(__classPrivateFieldGet(this, _CardComponent_internals, "f"), 'raised', this.raised);
         }
     }
-    get raised() {
-        return this._raised;
-    }
-    set raised(value) {
-        value = Boolean(value);
-        if (this._raised !== value) {
-            this._raised = value;
-            this.toggleAttribute(CARD_CONSTANTS.attributes.RAISED, this._raised);
-        }
+    render() {
+        return html `<div class="forge-card" part="root"><slot></slot></div>`;
     }
 };
+_CardComponent_internals = new WeakMap();
+CardComponent.styles = unsafeCSS(styles);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], CardComponent.prototype, "raised", void 0);
 CardComponent = __decorate([
-    customElement({
-        name: CARD_CONSTANTS.elementName
-    })
+    customElement(CARD_TAG_NAME)
 ], CardComponent);
 export { CardComponent };

package/esm/card/index.js

@@ -3,10 +3,10 @@
  * Copyright Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { defineCustomElement } from '@tylertech/forge-core';
-import { CardComponent } from './card';
+import { tryDefine } from '@tylertech/forge-core';
+import { CARD_TAG_NAME, CardComponent } from './card';
 export * from './card-constants';
 export * from './card';
 export function defineCardComponent() {
-    defineCustomElement(CardComponent);
+    tryDefine(CARD_TAG_NAME, CardComponent);
 }

package/esm/checkbox/checkbox.d.ts

@@ -99,7 +99,11 @@ export declare class CheckboxComponent extends CheckboxComponent_base implements
     labelClickedCallback(): void;
     labelChangedCallback(value: string | null): void;
     /** @ignore */
-    setFormValue(value: FormValue | null, state?: FormValue | null | undefined): void;
+    setFormValue(value: (FormValue & {
+        [key: string]: any;
+    }) | null, state?: (FormValue & {
+        [key: string]: any;
+    }) | null | undefined): void;
     /**
      * Gets/sets whether the checkbox is checked.
      * @default false

package/esm/chips/chip/chip-constants.d.ts

@@ -43,7 +43,7 @@ export declare const CHIP_CONSTANTS: {
     };
     defaults: {
         TYPE: ChipType;
-        THEME: Theme;
+        THEME: ChipTheme;
     };
 };
 export type ChipTheme = Theme;

package/esm/core/delegates/base-component-delegate.d.ts

@@ -5,7 +5,7 @@
  */
 export type BaseComponentDelegateProps<T extends HTMLElement> = Partial<T>;
 export interface IBaseComponentDelegateOptions {
-    style?: Partial<CSSStyleDeclaration> | {
+    style?: Partial<CSSStyleDeclaration> & {
         [key: string]: string;
     };
     attributes?: {

package/esm/core/mask/date-input-mask.d.ts

@@ -3,12 +3,12 @@
  * Copyright Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import IMask, { InputMask, Masked } from 'imask';
+import { InputMask, type AppendFlags, type FactoryArg, type Masked } from 'imask';
 export interface IDateInputMaskOptions {
     showMaskFormat?: boolean;
     pattern?: string;
     useBlockCharPlaceholder?: boolean;
-    prepareCallback?: (value: string, masked: Masked<string>, flags: IMask.AppendFlags, maskInstance: InputMask<IMask.MaskedPatternOptions>) => string;
+    prepareCallback?: (value: string, masked: Masked<string>, flags: AppendFlags, maskInstance: InputMask<FactoryArg>) => string;
     onChange?: (value: string) => void;
 }
 export declare const DEFAULT_DATE_MASK = "0`0{/}`0`0{/}`0`0`0`0";
@@ -20,7 +20,7 @@ export declare class DateInputMask {
     private _acceptListener;
     constructor(_element: HTMLInputElement, _options?: IDateInputMaskOptions);
     destroy(): void;
-    resolve(value: string): string;
+    resolve(value: string): void;
     private _onAccept;
     private get _isDefaultMask();
     private _createOptions;

package/esm/core/mask/date-input-mask.js

@@ -3,8 +3,8 @@
  * Copyright Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { InputMask, createMask, MaskedRange } from 'imask';
 import { isNumeric } from '@tylertech/forge-core';
+import { InputMask, MaskedRange, createMask } from 'imask';
 export const DEFAULT_DATE_MASK = '0`0{/}`0`0{/}`0`0`0`0';
 export class DateInputMask {
     constructor(_element, _options = {}) {
@@ -25,7 +25,7 @@ export class DateInputMask {
     }
     resolve(value) {
         const masked = createMask(this._maskOptions);
-        return masked.resolve(value);
+        masked.resolve(value);
     }
     _onAccept() {
         if (typeof this._options.onChange === 'function') {
@@ -36,11 +36,11 @@ export class DateInputMask {
         return this._options.pattern === DEFAULT_DATE_MASK;
     }
     _createOptions() {
-        const options = {
+        return {
             mask: this._options.pattern || DEFAULT_DATE_MASK,
             lazy: this._options.showMaskFormat === undefined ? false : !this._options.showMaskFormat,
             overwrite: true,
-            prepare: (value, masked, flags) => this._prepare(value, masked, flags, this._mask),
+            prepareChar: (value, masked, flags) => this._prepare(value, masked, flags, this._mask),
             blocks: {
                 MM: {
                     mask: MaskedRange,
@@ -65,7 +65,6 @@ export class DateInputMask {
                 }
             }
         };
-        return options;
     }
     _prepare(value, masked, flags, maskInstance) {
         if (typeof this._options.prepareCallback === 'function') {
@@ -77,8 +76,8 @@ export class DateInputMask {
         if (!flags.input || !value.length || !maskInstance) {
             return value;
         }
-        // eslint-disable-next-line @typescript-eslint/dot-notation
-        const isAllSelected = maskInstance['_selection'] && maskInstance['_selection'].end === 10;
+        const maskInstanceWithSelection = maskInstance;
+        const isAllSelected = maskInstanceWithSelection._selection && maskInstanceWithSelection._selection.end === 10;
         const currentValue = isAllSelected ? '' : maskInstance.value;
         if (!isNumeric(value)) {
             // Before we ignore this character let's do some checks for common scenarios where the user enters a slash to help with coercion
@@ -135,7 +134,7 @@ export class DateInputMask {
     }
     _setMaskedValueAdjusted(value, position) {
         this._mask.unmaskedValue = value;
-        window.requestAnimationFrame(() => this._mask.updateCursor(this._mask.cursorPos + position));
+        this._mask.updateCursor(this._mask.cursorPos + position);
     }
     updateMask() {
         this._mask.updateValue();

package/esm/core/mask/intermediate-time-parser.d.ts

@@ -3,7 +3,7 @@
  * Copyright Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { InputMask } from 'imask';
+import { InputMask, type FactoryArg } from 'imask';
 import { TimeSegmentType } from './time-segment-parser';
 export declare const SEGMENT_CURSOR_POSITION: {
     'hours-start': number;
@@ -19,7 +19,7 @@ export declare class IntermediateTimeParser {
     private _char;
     private _mask;
     private _segmentParser;
-    constructor(_char: string, _mask: InputMask<IMask.AnyMaskedOptions>);
+    constructor(_char: string, _mask: InputMask<FactoryArg>);
     get value(): string;
     get numChar(): number;
     get asPaddedChar(): string;

package/esm/core/mask/intermediate-time-parser.js

@@ -39,8 +39,7 @@ export class IntermediateTimeParser {
         return value;
     }
     get isAllSelected() {
-        // eslint-disable-next-line @typescript-eslint/dot-notation
-        const { start, end } = this._mask['_selection'];
+        const { start, end } = this._mask._selection;
         return start === 0 && end > 0 && end === this._mask.value.length;
     }
     /** Determines if this is the first non-zero hours character being entered. */
@@ -100,7 +99,7 @@ export class IntermediateTimeParser {
     applyValue(value, cursorPos) {
         this._mask.unmaskedValue = value;
         if (cursorPos !== undefined) {
-            window.requestAnimationFrame(() => this._mask.updateCursor(SEGMENT_CURSOR_POSITION[cursorPos]));
+            this._mask.updateCursor(SEGMENT_CURSOR_POSITION[cursorPos]);
         }
     }
 }

package/esm/core/mask/time-input-mask.d.ts

@@ -3,13 +3,13 @@
  * Copyright Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import IMask, { InputMask, Masked } from 'imask';
+import { FactoryArg, InputMask, type AppendFlags, type Masked } from 'imask';
 export interface ITimeInputMaskOptions {
     showMaskFormat?: boolean;
     use24HourTime?: boolean;
     showSeconds?: boolean;
     onChange?: (value: string) => void;
-    prepareCallback?: (value: string, masked: Masked<string>, flags: IMask.AppendFlags, maskInstance: InputMask<IMask.AnyMaskedOptions>) => string;
+    prepareCallback?: (value: string, masked: Masked<string>, flags: AppendFlags, maskInstance: InputMask<FactoryArg>) => string;
 }
 export declare const TWELVE_HOUR_TIME_MASK = "0`0{:}`0`0 `AM";
 export declare const TWELVE_HOUR_TIME_MASK_WITH_SECONDS = "0`0{:}`0`0{:}`0`0 `AM";
@@ -23,7 +23,7 @@ export declare class TimeInputMask {
     private _acceptListener;
     constructor(_element: HTMLInputElement, _options?: ITimeInputMaskOptions);
     destroy(): void;
-    resolve(value: string): string;
+    resolve(value: string): void;
     update(): void;
     private _onAccept;
     private _createOptions;

package/esm/core/mask/time-input-mask.js

@@ -4,7 +4,7 @@
  * License: Apache-2.0
  */
 import { isNumeric } from '@tylertech/forge-core';
-import { createMask, InputMask, MaskedEnum } from 'imask';
+import { InputMask, MaskedEnum, createMask } from 'imask';
 import { IntermediateTimeParser } from './intermediate-time-parser';
 export const TWELVE_HOUR_TIME_MASK = '0`0{:}`0`0 `AM';
 export const TWELVE_HOUR_TIME_MASK_WITH_SECONDS = '0`0{:}`0`0{:}`0`0 `AM';
@@ -29,7 +29,7 @@ export class TimeInputMask {
     }
     resolve(value) {
         const masked = createMask(this._maskOptions);
-        return masked.resolve(value);
+        masked.resolve(value);
     }
     update() {
         this._mask.updateValue();
@@ -44,7 +44,7 @@ export class TimeInputMask {
             mask: this._getMaskFormat(),
             overwrite: true,
             lazy: !this._options.showMaskFormat,
-            prepare: (value, masked, flags) => this._prepare(value, masked, flags, this._mask),
+            prepareChar: (value, masked, flags) => this._prepare(value, masked, flags, this._mask),
             blocks: {
                 A: {
                     mask: MaskedEnum,
@@ -66,8 +66,7 @@ export class TimeInputMask {
         }
         // Whenever we paste text we don't care to send it through our custom prepare logic,
         // so just return the character being processed.
-        // eslint-disable-next-line @typescript-eslint/dot-notation
-        if (maskInstance['_inputEvent']?.inputType !== 'insertText') {
+        if (maskInstance._inputEvent?.inputType !== 'insertText') {
             return value;
         }
         return this._prepareDefault(value, maskInstance).toUpperCase();

package/esm/core/mixins/label/with-label-aware.d.ts

@@ -3,7 +3,7 @@
  * Copyright Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { AbstractConstructor, MixinBase } from '../../../constants';
+import { AbstractConstructor, MixinBase, forgeLabelRef, updateTarget } from '../../../constants';
 import { IBaseComponent } from '../../base/base-component';
 /**
  * An element that can be associated with a Forge label component.
@@ -20,6 +20,9 @@ export interface IWithLabelAwareness extends IBaseComponent {
      * A callback for when the associated label is clicked.
      */
     labelClickedCallback?(): void;
+    [forgeLabelRef]?: {
+        [updateTarget](target: HTMLElement): boolean;
+    };
 }
 export declare abstract class WithLabelAwarenessContract {
     connectedCallback(): void;

package/esm/core/utils/a11y-utils.d.ts

@@ -135,11 +135,3 @@ export type DefaultAriaOptions = {
  * }
  */
 export declare function setDefaultAria(element: HTMLElement, internals: ElementInternals, properties: Partial<ARIAMixinStrict>, { setAttribute }?: DefaultAriaOptions): void;
-/**
- * Adds or removes a state from an element's custom state set.
- *
- * @param internals - The element's internals object.
- * @param state - The name of the custom state to toggle.
- * @param value - Whether to add or remove the state.
- */
-export declare function toggleState(internals: ElementInternals, state: string, value: boolean): void;

package/esm/core/utils/a11y-utils.js

@@ -63,10 +63,13 @@ export const ARIA_PROPERTIES = [
 const ARIA_ATTRIBUTES_TO_PROPERTIES = {
     'aria-atomic': 'ariaAtomic',
     'aria-autocomplete': 'ariaAutoComplete',
+    'aria-braillelabel': 'ariaBrailleLabel',
+    'aria-brailleroledescription': 'ariaBrailleRoleDescription',
     'aria-busy': 'ariaBusy',
     'aria-checked': 'ariaChecked',
     'aria-colcount': 'ariaColCount',
     'aria-colindex': 'ariaColIndex',
+    'aria-colindextext': 'ariaColIndexText',
     'aria-colspan': 'ariaColSpan',
     'aria-current': 'ariaCurrent',
     'aria-description': 'ariaDescription',
@@ -87,10 +90,12 @@ const ARIA_ATTRIBUTES_TO_PROPERTIES = {
     'aria-posinset': 'ariaPosInSet',
     'aria-pressed': 'ariaPressed',
     'aria-readonly': 'ariaReadOnly',
+    'aria-relevant': 'ariaRelevant',
     'aria-required': 'ariaRequired',
     'aria-roledescription': 'ariaRoleDescription',
     'aria-rowcount': 'ariaRowCount',
     'aria-rowindex': 'ariaRowIndex',
+    'aria-rowindextext': 'ariaRowIndexText',
     'aria-rowspan': 'ariaRowSpan',
     'aria-selected': 'ariaSelected',
     'aria-setsize': 'ariaSetSize',
@@ -166,28 +171,3 @@ export function setDefaultAria(element, internals, properties, { setAttribute }
         }
     });
 }
-/**
- * Adds or removes a state from an element's custom state set.
- *
- * @param internals - The element's internals object.
- * @param state - The name of the custom state to toggle.
- * @param value - Whether to add or remove the state.
- */
-export function toggleState(internals, state, value) {
-    if (value) {
-        try {
-            internals.states.add(state);
-        }
-        catch {
-            internals.states.add(`--${state}`);
-        }
-    }
-    else {
-        try {
-            internals.states.delete(state);
-        }
-        catch {
-            internals.states.delete(`--${state}`);
-        }
-    }
-}

package/esm/core/utils/dismissible-stack.d.ts

@@ -4,12 +4,18 @@
  * License: Apache-2.0
  */
 export declare const tryDismiss: unique symbol;
+declare const DISMISSIBLE_STACK_INSTANCE_KEY: unique symbol;
 export interface IDismissibleStackState<T = string> {
     [key: string]: T;
 }
 export interface IDismissible {
     [tryDismiss](state?: IDismissibleStackState): boolean;
 }
+declare global {
+    interface Window {
+        [DISMISSIBLE_STACK_INSTANCE_KEY]: DismissibleStack<IDismissible>;
+    }
+}
 export declare class DismissibleStack<T extends IDismissible> {
     private _deferredDismiss;
     /**
@@ -78,3 +84,4 @@ export declare class DismissibleStack<T extends IDismissible> {
      */
     isMostRecent(el: T): boolean;
 }
+export {};

package/esm/core/utils/position-utils.d.ts

@@ -3,10 +3,9 @@
  * Copyright Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { FlipOptions, ShiftOptions, HideOptions, Placement, Strategy, OffsetOptions, MiddlewareData, ArrowOptions } from '@floating-ui/dom';
+import { ArrowOptions, FlipOptions, HideOptions, MiddlewareData, OffsetOptions, Placement, ShiftOptions, Strategy } from '@floating-ui/dom';
 export type PositionPlacement = Placement;
 export type PositionStrategy = Strategy;
-export declare const DEFAULT_FALLBACK_PLACEMENTS: PositionPlacement[];
 export interface IPositionElementResult {
     x: number;
     y: number;

package/esm/core/utils/position-utils.js

@@ -3,19 +3,8 @@
  * Copyright Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { computePosition, flip as flipMiddleware, hide as hideMiddleware, shift as shiftMiddleware, offset as offsetMiddleware, arrow as arrowMiddleware } from '@floating-ui/dom';
+import { arrow as arrowMiddleware, computePosition, flip as flipMiddleware, hide as hideMiddleware, offset as offsetMiddleware, shift as shiftMiddleware } from '@floating-ui/dom';
 import { roundByDPR } from './utils';
-export const DEFAULT_FALLBACK_PLACEMENTS = [
-    'top-start',
-    'top',
-    'top-end',
-    'left-start',
-    'left',
-    'left-end',
-    'right-start',
-    'right',
-    'right-end'
-];
 export class VirtualElement {
     constructor(x, y, height = 0, width = 0) {
         this.x = x;
@@ -57,10 +46,7 @@ export class VirtualElement {
  * @param {IPositionElementConfig} config Configuration to provide when positioning the element.
  * @returns {IPositionElementResult} The result of the positioning logic.
  */
-export async function positionElementAsync({ element, anchorElement, placement = 'bottom', offset = false, offsetOptions, strategy = 'fixed', apply = true, flip = true, flipOptions = {
-    fallbackPlacements: DEFAULT_FALLBACK_PLACEMENTS,
-    fallbackStrategy: 'initialPlacement'
-}, shift = true, shiftOptions, hide = false, hideOptions, arrowElement, arrowOptions = {} }) {
+export async function positionElementAsync({ element, anchorElement, placement = 'bottom', offset = false, offsetOptions, strategy = 'fixed', apply = true, flip = true, flipOptions, shift = true, shiftOptions, hide = false, hideOptions, arrowElement, arrowOptions = {} }) {
     const middleware = [];
     //
     // Order of the following middleware is **important**
@@ -68,12 +54,12 @@ export async function positionElementAsync({ element, anchorElement, placement =
     if (offset) {
         middleware.push(offsetMiddleware(offsetOptions));
     }
-    if (shift) {
-        middleware.push(shiftMiddleware(shiftOptions));
-    }
     if (flip) {
         middleware.push(flipMiddleware(flipOptions));
     }
+    if (shift) {
+        middleware.push(shiftMiddleware(shiftOptions));
+    }
     if (hide) {
         middleware.push(hideMiddleware(hideOptions));
     }
@@ -90,12 +76,11 @@ export async function positionElementAsync({ element, anchorElement, placement =
             translate: `${roundByDPR(x)}px ${roundByDPR(y)}px`
         };
         Object.assign(element.style, styles);
-        // We use `display` here to ensure that any child overlays are also hidden
         if (middlewareData.hide?.referenceHidden) {
-            element.style.display = 'none';
+            element.style.visibility = 'hidden';
         }
         else {
-            element.style.removeProperty('display');
+            element.style.removeProperty('visibility');
         }
     }
     return {