@tylertech/forge 3.13.1 → 3.14.0-dev.0

package/esm/checkbox/checkbox.js

@@ -1,24 +1,27 @@
 /**
  * @license
- * Copyright Tyler Technologies, Inc. 
+ * Copyright Tyler Technologies, Inc.
  * License: Apache-2.0
  */
-import { __decorate } from "tslib";
-import { attachShadowTemplate, coerceBoolean, customElement, coreProperty, isDefined, isString } from '@tylertech/forge-core';
-import { getFormState, getFormValue, getValidationMessage, inputType, internals, setDefaultAria, setValidity } from '../constants';
-import { BaseComponent } from '../core';
-import { WithFocusable } from '../core/mixins/focus/with-focusable';
-import { WithFormAssociation } from '../core/mixins/form/with-form-associated';
-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 { FocusIndicatorComponent } from '../focus-indicator/focus-indicator';
-import { StateLayerComponent } from '../state-layer/state-layer';
-import { CheckboxAdapter } from './checkbox-adapter';
-import { CHECKBOX_CONSTANTS } from './checkbox-constants';
-import { CheckboxCore } from './checkbox-core';
-const template = '<template><div class=\"forge-checkbox\" part=\"root\"><div id=\"container\" class=\"container\"><div class=\"background\" part=\"background\"><svg class=\"icon icon--checked\" aria-hidden=\"true\" viewBox=\"0 0 24 24\" part=\"checkmark\"><path d=\"M1.73,12.91 8.1,19.28 22.79,4.59\"></path></svg> <svg class=\"icon icon--indeterminate\" aria-hidden=\"true\" viewBox=\"0 0 24 24\" part=\"mixedmark\"><line x1=\"2\" y1=\"12\" x2=\"22\" y2=\"12\"></line></svg><forge-focus-indicator target=\":host\" part=\"focus-indicator\"></forge-focus-indicator></div><forge-state-layer target=\":host\" exportparts=\"surface:state-layer\"></forge-state-layer></div><div id=\"label\" class=\"label\" part=\"label\"><slot></slot></div></div></template>';
-const styles = ':host{display:inline-block;outline:0;-webkit-tap-highlight-color:transparent}:host([hidden]){display:none}.forge-checkbox{--_checkbox-primary-color:var(--forge-checkbox-primary-color, var(--forge-theme-tertiary, #3d5afe));--_checkbox-size:var(--forge-checkbox-size, 16px);--_checkbox-border-width:var(--forge-checkbox-border-width, var(--forge-border-medium, 2px));--_checkbox-icon-color:var(--forge-checkbox-icon-color, var(--forge-theme-on-tertiary, #ffffff));--_checkbox-state-layer-size:var(--forge-checkbox-state-layer-size, 40px);--_checkbox-state-layer-dense-size:var(--forge-checkbox-state-layer-dense-size, 24px);--_checkbox-background:var(--forge-checkbox-background, var(--forge-theme-surface, #ffffff));--_checkbox-width:var(--forge-checkbox-width, var(--_checkbox-size));--_checkbox-height:var(--forge-checkbox-height, var(--_checkbox-size));--_checkbox-unchecked-border-width:var(--forge-checkbox-unchecked-border-width, var(--_checkbox-border-width));--_checkbox-unchecked-border-color:var(--forge-checkbox-unchecked-border-color, var(--forge-theme-surface-container-high, #9e9e9e));--_checkbox-shape:var(--forge-checkbox-shape, calc(var(--forge-shape-small, 2px) * var(--forge-shape-factor, 1)));--_checkbox-elevation:var(--forge-checkbox-elevation, 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12));--_checkbox-checked-background:var(--forge-checkbox-checked-background, var(--_checkbox-primary-color));--_checkbox-checked-border-width:var(--forge-checkbox-checked-border-width, var(--_checkbox-border-width));--_checkbox-checked-border-color:var(--forge-checkbox-checked-border-color, var(--_checkbox-checked-background));--_checkbox-icon-checked-color:var(--forge-checkbox-icon-checked-color, var(--_checkbox-icon-color));--_checkbox-icon-indeterminate-color:var(--forge-checkbox-icon-indeterminate-color, var(--_checkbox-icon-color));--_checkbox-icon-stroke-width:var(--forge-checkbox-icon-stroke-width, 4px);--_checkbox-gap:var(--forge-checkbox-gap, 0);--_checkbox-justify:var(--forge-checkbox-justify, start);--_checkbox-align:var(--forge-checkbox-align, center);--_checkbox-direction:var(--forge-checkbox-direction, initial);--_checkbox-state-layer-width:var(--forge-checkbox-state-layer-width, var(--_checkbox-state-layer-size));--_checkbox-state-layer-height:var(--forge-checkbox-state-layer-height, var(--_checkbox-state-layer-size));--_checkbox-state-layer-checked-color:var(--forge-checkbox-state-layer-checked-color, var(--_checkbox-primary-color));--_checkbox-state-layer-unchecked-color:var(--forge-checkbox-state-layer-unchecked-color, var(--_checkbox-color));--_checkbox-state-layer-shape:var(--forge-checkbox-state-layer-shape, calc(var(--forge-shape-full, 9999px) * var(--forge-shape-factor, 1)));--_checkbox-dense-gap:var(--forge-checkbox-dense-gap, 8px);--_checkbox-state-layer-dense-width:var(--forge-checkbox-state-layer-dense-width, var(--_checkbox-state-layer-dense-size));--_checkbox-state-layer-dense-height:var(--forge-checkbox-state-layer-dense-height, var(--_checkbox-state-layer-dense-size));--_checkbox-disabled-opacity:var(--forge-checkbox-disabled-opacity, 0.38);--_checkbox-animation-duration:var(--forge-checkbox-animation-duration, var(--forge-animation-duration-short2, 100ms));--_checkbox-background-animation-timing:var(--forge-checkbox-background-animation-timing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_checkbox-icon-animation-timing:var(--forge-checkbox-icon-animation-timing, var(--forge-animation-easing-emphasized-accelerate, cubic-bezier(0.3, 0, 0.8, 0.15)))}.forge-checkbox{position:relative;flex-direction:var(--_checkbox-direction);align-items:var(--_checkbox-align);justify-content:var(--_checkbox-justify);gap:var(--_checkbox-gap);display:flex}.forge-checkbox .container{position:relative;align-items:center;justify-content:center;display:flex;flex-shrink:0;border-radius:var(--_checkbox-state-layer-shape);inline-size:var(--_checkbox-state-layer-width);block-size:var(--_checkbox-state-layer-height);cursor:pointer}.forge-checkbox .background{position:relative;align-items:center;justify-content:center;display:flex;transition-property:background,border-width,border-color;transition-duration:var(--_checkbox-animation-duration);transition-timing-function:var(--_checkbox-background-animation-timing);box-shadow:var(--_checkbox-elevation);border-style:solid;border-width:var(--_checkbox-unchecked-border-width);border-color:var(--_checkbox-unchecked-border-color);border-radius:var(--_checkbox-shape);box-sizing:border-box;block-size:var(--_checkbox-height);inline-size:var(--_checkbox-width);background:var(--_checkbox-background)}.forge-checkbox .icon{position:absolute;transition-property:stroke-dashoffset;transition-duration:var(--_checkbox-animation-duration);transition-timing-function:var(--_checkbox-icon-animation-timing);fill:none;stroke-width:var(--_checkbox-icon-stroke-width)}.forge-checkbox .icon--checked{stroke:var(--_checkbox-icon-checked-color);stroke-dasharray:30;transition-delay:0s;stroke-dashoffset:30}.forge-checkbox .icon--indeterminate{stroke:var(--_checkbox-icon-indeterminate-color);stroke-dasharray:20;transition-delay:0s;stroke-dashoffset:20}.forge-checkbox .label{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-label2-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-label2-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-font-size-scale, .8125)));font-weight:var(--forge-typography-label2-font-weight,400);line-height:var(--forge-typography-label2-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-line-height-scale, 1.25)));letter-spacing:var(--forge-typography-label2-letter-spacing, .0096153846em);text-transform:var(--forge-typography-label2-text-transform,inherit);text-decoration:var(--forge-typography-label2-text-decoration,inherit);cursor:default}:host([checked]) .background{border-style:solid;border-width:var(--_checkbox-checked-border-width);border-color:var(--_checkbox-checked-border-color);background:var(--_checkbox-checked-background)}:host([checked]) .icon--checked{transition-delay:var(--_checkbox-animation-duration);stroke-dashoffset:0}:host([checked]) .icon--checked:dir(rtl){stroke-dashoffset:60}:host([checked]) .icon--indeterminate{transition-delay:0s;stroke-dashoffset:20}:host([checked]) forge-state-layer{--forge-state-layer-color:var(--_checkbox-state-layer-checked-color)}:host([indeterminate]) .background{border-style:solid;border-width:var(--_checkbox-checked-border-width);border-color:var(--_checkbox-checked-border-color);background:var(--_checkbox-checked-background)}:host([indeterminate]) .icon--checked{transition-delay:0s;stroke-dashoffset:30}:host([indeterminate]) .icon--indeterminate{transition-delay:var(--_checkbox-animation-duration);stroke-dashoffset:0}:host([indeterminate]) .icon--indeterminate:dir(rtl){stroke-dashoffset:40}:host([indeterminate]) forge-state-layer{--forge-state-layer-color:var(--_checkbox-state-layer-checked-color)}:host([dense]) .forge-checkbox{--_checkbox-gap:var(--_checkbox-dense-gap)}:host([dense]) .forge-checkbox .container{inline-size:var(--_checkbox-state-layer-dense-width);block-size:var(--_checkbox-state-layer-dense-height)}:host([disabled]) .forge-checkbox .container{opacity:var(--_checkbox-disabled-opacity);cursor:not-allowed}:host([readonly]) .forge-checkbox .container{cursor:not-allowed}@media (prefers-reduced-motion){.forge-checkbox{--_checkbox-animation-duration:var(--forge-checkbox-animation-duration, 0s)}}forge-state-layer{--forge-state-layer-color:var(--_checkbox-state-layer-unchecked-color)}forge-focus-indicator{--forge-focus-indicator-shape:0px;--forge-focus-indicator-outward-offset:8px}';
+
+import { __decorate } from 'tslib';
+import { attachShadowTemplate, coerceBoolean, isString, isDefined, coreProperty, customElement } from '@tylertech/forge-core';
+import { inputType, setDefaultAria, getFormValue, getFormState, setValidity, internals, getValidationMessage } from '../constants.js';
+import '../core/index.js';
+import { WithFocusable } from '../core/mixins/focus/with-focusable.js';
+import { WithFormAssociation } from '../core/mixins/form/with-form-associated.js';
+import { WithDefaultAria } from '../core/mixins/internals/with-default-aria.js';
+import { WithElementInternals } from '../core/mixins/internals/with-element-internals.js';
+import { WithLabelAwareness } from '../core/mixins/label/with-label-aware.js';
+import { FocusIndicatorComponent } from '../focus-indicator/focus-indicator.js';
+import { StateLayerComponent } from '../state-layer/state-layer.js';
+import { CheckboxAdapter } from './checkbox-adapter.js';
+import { CHECKBOX_CONSTANTS } from './checkbox-constants.js';
+import { CheckboxCore } from './checkbox-core.js';
+import template from './checkbox.html.js';
+import styles from './checkbox.scss.js';
+import { BaseComponent } from '../core/base/base-component.js';
+
 /**
  * @tag forge-checkbox
  *
@@ -89,7 +92,7 @@ let CheckboxComponent = class CheckboxComponent extends WithFormAssociation(With
         super.connectedCallback();
         this[setDefaultAria]({
             role: 'checkbox',
-            ariaChecked: this.checked ? 'true' : 'false',
+            ariaChecked: this.indeterminate ? 'mixed' : this.checked ? 'true' : 'false',
             ariaDisabled: this.disabled ? 'true' : 'false',
             ariaRequired: this.required ? 'true' : 'false'
         });
@@ -222,4 +225,5 @@ CheckboxComponent = __decorate([
         dependencies: [FocusIndicatorComponent, StateLayerComponent]
     })
 ], CheckboxComponent);
+
 export { CheckboxComponent };

package/esm/checkbox/checkbox.scss.js

@@ -0,0 +1,9 @@
+/**
+ * @license
+ * Copyright Tyler Technologies, Inc.
+ * License: Apache-2.0
+ */
+
+var styles = ":host{display:inline-block;outline:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}:host([hidden]){display:none}.forge-checkbox{--_checkbox-primary-color:var(--forge-checkbox-primary-color, var(--forge-theme-tertiary, #3d5afe));--_checkbox-size:var(--forge-checkbox-size, 16px);--_checkbox-border-width:var(--forge-checkbox-border-width, var(--forge-border-medium, 2px));--_checkbox-icon-color:var(--forge-checkbox-icon-color, var(--forge-theme-on-tertiary, #ffffff));--_checkbox-state-layer-size:var(--forge-checkbox-state-layer-size, 40px);--_checkbox-state-layer-dense-size:var(--forge-checkbox-state-layer-dense-size, 24px);--_checkbox-background:var(--forge-checkbox-background, var(--forge-theme-surface, #ffffff));--_checkbox-width:var(--forge-checkbox-width, var(--_checkbox-size));--_checkbox-height:var(--forge-checkbox-height, var(--_checkbox-size));--_checkbox-unchecked-border-width:var(--forge-checkbox-unchecked-border-width, var(--_checkbox-border-width));--_checkbox-unchecked-border-color:var(--forge-checkbox-unchecked-border-color, var(--forge-theme-outline-medium, #757575));--_checkbox-shape:var(--forge-checkbox-shape, calc(var(--forge-shape-small, 2px) * var(--forge-shape-factor, 1)));--_checkbox-elevation:var(--forge-checkbox-elevation, 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12));--_checkbox-checked-background:var(--forge-checkbox-checked-background, var(--_checkbox-primary-color));--_checkbox-checked-border-width:var(--forge-checkbox-checked-border-width, var(--_checkbox-border-width));--_checkbox-checked-border-color:var(--forge-checkbox-checked-border-color, var(--_checkbox-checked-background));--_checkbox-icon-checked-color:var(--forge-checkbox-icon-checked-color, var(--_checkbox-icon-color));--_checkbox-icon-indeterminate-color:var(--forge-checkbox-icon-indeterminate-color, var(--_checkbox-icon-color));--_checkbox-icon-stroke-width:var(--forge-checkbox-icon-stroke-width, 4px);--_checkbox-gap:var(--forge-checkbox-gap, 0);--_checkbox-justify:var(--forge-checkbox-justify, start);--_checkbox-align:var(--forge-checkbox-align, center);--_checkbox-direction:var(--forge-checkbox-direction, initial);--_checkbox-state-layer-width:var(--forge-checkbox-state-layer-width, var(--_checkbox-state-layer-size));--_checkbox-state-layer-height:var(--forge-checkbox-state-layer-height, var(--_checkbox-state-layer-size));--_checkbox-state-layer-checked-color:var(--forge-checkbox-state-layer-checked-color, var(--_checkbox-primary-color));--_checkbox-state-layer-unchecked-color:var(--forge-checkbox-state-layer-unchecked-color, var(--_checkbox-color));--_checkbox-state-layer-shape:var(--forge-checkbox-state-layer-shape, calc(var(--forge-shape-full, 9999px) * var(--forge-shape-factor, 1)));--_checkbox-dense-gap:var(--forge-checkbox-dense-gap, 8px);--_checkbox-state-layer-dense-width:var(--forge-checkbox-state-layer-dense-width, var(--_checkbox-state-layer-dense-size));--_checkbox-state-layer-dense-height:var(--forge-checkbox-state-layer-dense-height, var(--_checkbox-state-layer-dense-size));--_checkbox-disabled-opacity:var(--forge-checkbox-disabled-opacity, 0.38);--_checkbox-animation-duration:var(--forge-checkbox-animation-duration, var(--forge-animation-duration-short2, 100ms));--_checkbox-background-animation-timing:var(--forge-checkbox-background-animation-timing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_checkbox-icon-animation-timing:var(--forge-checkbox-icon-animation-timing, var(--forge-animation-easing-emphasized-accelerate, cubic-bezier(0.3, 0, 0.8, 0.15)))}.forge-checkbox{position:relative;flex-direction:var(--_checkbox-direction);align-items:var(--_checkbox-align);justify-content:var(--_checkbox-justify);gap:var(--_checkbox-gap);display:flex}.forge-checkbox .container{position:relative;align-items:center;justify-content:center;display:flex;flex-shrink:0;border-radius:var(--_checkbox-state-layer-shape);inline-size:var(--_checkbox-state-layer-width);block-size:var(--_checkbox-state-layer-height);cursor:pointer}.forge-checkbox .background{position:relative;align-items:center;justify-content:center;display:flex;transition-property:background,border-width,border-color;transition-duration:var(--_checkbox-animation-duration);transition-timing-function:var(--_checkbox-background-animation-timing);box-shadow:var(--_checkbox-elevation);border-style:solid;border-width:var(--_checkbox-unchecked-border-width);border-color:var(--_checkbox-unchecked-border-color);border-radius:var(--_checkbox-shape);box-sizing:border-box;block-size:var(--_checkbox-height);inline-size:var(--_checkbox-width);background:var(--_checkbox-background)}.forge-checkbox .icon{position:absolute;transition-property:stroke-dashoffset;transition-duration:var(--_checkbox-animation-duration);transition-timing-function:var(--_checkbox-icon-animation-timing);fill:none;stroke-width:var(--_checkbox-icon-stroke-width)}.forge-checkbox .icon--checked{stroke:var(--_checkbox-icon-checked-color);stroke-dasharray:30;transition-delay:0s;stroke-dashoffset:30}.forge-checkbox .icon--indeterminate{stroke:var(--_checkbox-icon-indeterminate-color);stroke-dasharray:20;transition-delay:0s;stroke-dashoffset:20}.forge-checkbox .label{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-label2-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-label2-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-font-size-scale, 0.8125)));font-weight:var(--forge-typography-label2-font-weight, 400);line-height:var(--forge-typography-label2-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-line-height-scale, 1.25)));letter-spacing:var(--forge-typography-label2-letter-spacing, 0.0096153846em);text-transform:var(--forge-typography-label2-text-transform, inherit);text-decoration:var(--forge-typography-label2-text-decoration, inherit);cursor:default}:host([checked]) .background{border-style:solid;border-width:var(--_checkbox-checked-border-width);border-color:var(--_checkbox-checked-border-color);background:var(--_checkbox-checked-background)}:host([checked]) .icon--checked{transition-delay:var(--_checkbox-animation-duration);stroke-dashoffset:0}:host([checked]) .icon--checked:dir(rtl){stroke-dashoffset:60}:host([checked]) .icon--indeterminate{transition-delay:0s;stroke-dashoffset:20}:host([checked]) forge-state-layer{--forge-state-layer-color: var(--_checkbox-state-layer-checked-color)}:host([indeterminate]) .background{border-style:solid;border-width:var(--_checkbox-checked-border-width);border-color:var(--_checkbox-checked-border-color);background:var(--_checkbox-checked-background)}:host([indeterminate]) .icon--checked{transition-delay:0s;stroke-dashoffset:30}:host([indeterminate]) .icon--indeterminate{transition-delay:var(--_checkbox-animation-duration);stroke-dashoffset:0}:host([indeterminate]) .icon--indeterminate:dir(rtl){stroke-dashoffset:40}:host([indeterminate]) forge-state-layer{--forge-state-layer-color: var(--_checkbox-state-layer-checked-color)}:host([dense]) .forge-checkbox{--_checkbox-gap:var(--_checkbox-dense-gap)}:host([dense]) .forge-checkbox .container{inline-size:var(--_checkbox-state-layer-dense-width);block-size:var(--_checkbox-state-layer-dense-height)}:host([disabled]) .forge-checkbox .container{opacity:var(--_checkbox-disabled-opacity);cursor:not-allowed}:host([readonly]) .forge-checkbox .container{cursor:not-allowed}@media(prefers-reduced-motion){.forge-checkbox{--_checkbox-animation-duration:var(--forge-checkbox-animation-duration, 0s)}}forge-state-layer{--forge-state-layer-color: var(--_checkbox-state-layer-unchecked-color)}forge-focus-indicator{--forge-focus-indicator-shape: 0px;--forge-focus-indicator-outward-offset: 8px}";
+
+export { styles as default };

package/esm/checkbox/index.d.ts

@@ -1,11 +1,6 @@
-/**
- * @license
- * Copyright Tyler Technologies, Inc. 
- * License: Apache-2.0
- */
-export * from './checkbox-adapter';
-export * from './checkbox-constants';
-export * from './checkbox-core';
-export * from './checkbox';
-export * from './checkbox-component-delegate';
+export * from './checkbox-adapter.js';
+export * from './checkbox-constants.js';
+export * from './checkbox-core.js';
+export * from './checkbox.js';
+export * from './checkbox-component-delegate.js';
 export declare function defineCheckboxComponent(): void;

package/esm/checkbox/index.js

@@ -1,15 +1,18 @@
 /**
  * @license
- * Copyright Tyler Technologies, Inc. 
+ * Copyright Tyler Technologies, Inc.
  * License: Apache-2.0
  */
+
 import { defineCustomElement } from '@tylertech/forge-core';
-import { CheckboxComponent } from './checkbox';
-export * from './checkbox-adapter';
-export * from './checkbox-constants';
-export * from './checkbox-core';
-export * from './checkbox';
-export * from './checkbox-component-delegate';
-export function defineCheckboxComponent() {
+import { CheckboxComponent } from './checkbox.js';
+export { CheckboxAdapter } from './checkbox-adapter.js';
+export { CHECKBOX_CONSTANTS } from './checkbox-constants.js';
+export { CheckboxCore } from './checkbox-core.js';
+export { CheckboxComponentDelegate } from './checkbox-component-delegate.js';
+
+function defineCheckboxComponent() {
     defineCustomElement(CheckboxComponent);
 }
+
+export { CheckboxComponent, defineCheckboxComponent };

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

@@ -1,12 +1,7 @@
-/**
- * @license
- * Copyright Tyler Technologies, Inc. 
- * License: Apache-2.0
- */
-import { IChipFieldComponent } from './chip-field';
-import { ChipFieldInputAttributeObserver, ChipFieldValueChangeListener } from './chip-field-constants';
-import { BaseFieldAdapter, IBaseFieldAdapter } from '../field/base/base-field-adapter';
-import { IFieldComponent } from '../field';
+import { IChipFieldComponent } from './chip-field.js';
+import { ChipFieldInputAttributeObserver, ChipFieldValueChangeListener } from './chip-field-constants.js';
+import { BaseFieldAdapter, IBaseFieldAdapter } from '../field/base/base-field-adapter.js';
+import { IFieldComponent } from '../field/index.js';
 export interface IChipFieldAdapter extends IBaseFieldAdapter {
     readonly popoverTargetElement: HTMLElement;
     readonly hasInputValue: boolean;

package/esm/chip-field/chip-field-adapter.js

@@ -1,14 +1,17 @@
 /**
  * @license
- * Copyright Tyler Technologies, Inc. 
+ * Copyright Tyler Technologies, Inc.
  * License: Apache-2.0
  */
-import { getShadowElement, listenOwnProperty, randomChars, toggleAttribute } from '@tylertech/forge-core';
-import { CHIP_FIELD_CONSTANTS } from './chip-field-constants';
-import { BaseFieldAdapter } from '../field/base/base-field-adapter';
-import { FIELD_CONSTANTS } from '../field/field-constants';
-import { LABEL_CONSTANTS } from '../label';
-export class ChipFieldAdapter extends BaseFieldAdapter {
+
+import { getShadowElement, listenOwnProperty, toggleAttribute, randomChars } from '@tylertech/forge-core';
+import { CHIP_FIELD_CONSTANTS } from './chip-field-constants.js';
+import { BaseFieldAdapter } from '../field/base/base-field-adapter.js';
+import { FIELD_CONSTANTS } from '../field/field-constants.js';
+import '../label/index.js';
+import { LABEL_CONSTANTS } from '../label/label-constants.js';
+
+class ChipFieldAdapter extends BaseFieldAdapter {
     get hasValue() {
         const hasMembers = !!this._component.querySelector(CHIP_FIELD_CONSTANTS.selectors.MEMBER);
         return hasMembers || this.hasInputValue;
@@ -150,3 +153,5 @@ export class ChipFieldAdapter extends BaseFieldAdapter {
         }
     }
 }
+
+export { ChipFieldAdapter };

package/esm/chip-field/chip-field-component-delegate.d.ts

@@ -1,11 +1,6 @@
-/**
- * @license
- * Copyright Tyler Technologies, Inc. 
- * License: Apache-2.0
- */
-import { IBaseComponentDelegateConfig } from '../core/delegates/base-component-delegate';
-import { FormFieldComponentDelegate, IFormFieldComponentDelegateOptions } from '../core/delegates/form-field-component-delegate';
-import { IChipFieldComponent } from './chip-field';
+import { IBaseComponentDelegateConfig } from '../core/delegates/base-component-delegate.js';
+import { FormFieldComponentDelegate, IFormFieldComponentDelegateOptions } from '../core/delegates/form-field-component-delegate.js';
+import { IChipFieldComponent } from './chip-field.js';
 export type ChipFieldComponentDelegateProps = Partial<IChipFieldComponent>;
 export interface IChipFieldComponentDelegateOptions extends IFormFieldComponentDelegateOptions {
     id?: string;
@@ -34,9 +29,9 @@ export declare class ChipFieldComponentDelegate extends FormFieldComponentDelega
     set invalid(value: boolean);
     get inputElement(): HTMLInputElement;
     get labelElement(): HTMLLabelElement | undefined;
-    onChange(listener: (value: string) => void): void;
-    onFocus(listener: (evt: Event) => void): void;
-    onBlur(listener: (evt: Event) => void): void;
+    onChange(listener: (value: string) => void, options?: AddEventListenerOptions): void;
+    onFocus(listener: (evt: Event) => void, options?: AddEventListenerOptions): void;
+    onBlur(listener: (evt: Event) => void, options?: AddEventListenerOptions): void;
     setLabel(text: string | null): void;
     setHelperText(text: string | null): void;
     floatLabel(value: boolean): void;

package/esm/chip-field/chip-field-component-delegate.js

@@ -1,11 +1,13 @@
 /**
  * @license
- * Copyright Tyler Technologies, Inc. 
+ * Copyright Tyler Technologies, Inc.
  * License: Apache-2.0
  */
-import { FormFieldComponentDelegate } from '../core/delegates/form-field-component-delegate';
-import { CHIP_FIELD_CONSTANTS } from './chip-field-constants';
-export class ChipFieldComponentDelegate extends FormFieldComponentDelegate {
+
+import { FormFieldComponentDelegate } from '../core/delegates/form-field-component-delegate.js';
+import { CHIP_FIELD_CONSTANTS } from './chip-field-constants.js';
+
+class ChipFieldComponentDelegate extends FormFieldComponentDelegate {
     constructor(config) {
         super(config);
     }
@@ -55,14 +57,14 @@ export class ChipFieldComponentDelegate extends FormFieldComponentDelegate {
     get labelElement() {
         return this._labelElement;
     }
-    onChange(listener) {
-        this._inputElement.addEventListener('input', evt => listener(evt.target.value));
+    onChange(listener, options) {
+        this._inputElement.addEventListener('input', evt => listener(evt.target.value), options);
     }
-    onFocus(listener) {
-        this._inputElement.addEventListener('focus', evt => listener(evt));
+    onFocus(listener, options) {
+        this._inputElement.addEventListener('focus', evt => listener(evt), options);
     }
-    onBlur(listener) {
-        this._inputElement.addEventListener('blur', evt => listener(evt));
+    onBlur(listener, options) {
+        this._inputElement.addEventListener('blur', evt => listener(evt), options);
     }
     setLabel(text) {
         if (text) {
@@ -119,3 +121,5 @@ export class ChipFieldComponentDelegate extends FormFieldComponentDelegate {
         return inputElement;
     }
 }
+
+export { ChipFieldComponentDelegate };

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

@@ -1,8 +1,3 @@
-/**
- * @license
- * Copyright Tyler Technologies, Inc. 
- * License: Apache-2.0
- */
 declare const observedInputAttributes: readonly ["disabled", "placeholder"];
 export declare const CHIP_FIELD_CONSTANTS: {
     elementName: "forge-chip-field";
@@ -31,7 +26,7 @@ export declare const CHIP_FIELD_CONSTANTS: {
         LABEL: string;
     };
 };
-export { type FieldDensity as ChipFieldDensityType, type FieldShape as ChipFieldShapeType } from '../field/base/base-field-constants';
+export { type FieldDensity as ChipFieldDensityType, type FieldShape as ChipFieldShapeType } from '../field/base/base-field-constants.js';
 export type ChipFieldObservedInputAttributes = (typeof observedInputAttributes)[number];
 export type ChipFieldInputAttributeObserver = (name: ChipFieldObservedInputAttributes, value: string | null) => void;
 export type ChipFieldValueChangeListener = (value: string | null) => void;

package/esm/chip-field/chip-field-constants.js

@@ -1,9 +1,11 @@
 /**
  * @license
- * Copyright Tyler Technologies, Inc. 
+ * Copyright Tyler Technologies, Inc.
  * License: Apache-2.0
  */
-import { COMPONENT_NAME_PREFIX } from '../constants';
+
+import { COMPONENT_NAME_PREFIX } from '../constants.js';
+
 const elementName = `${COMPONENT_NAME_PREFIX}chip-field`;
 const observedAttributes = {
     ADD_ON_BLUR: 'add-on-blur'
@@ -29,7 +31,7 @@ const tagNames = {
     TEXTAREA: 'TEXTAREA',
     LABEL: 'LABEL'
 };
-export const CHIP_FIELD_CONSTANTS = {
+const CHIP_FIELD_CONSTANTS = {
     elementName,
     observedAttributes,
     attributes,
@@ -39,3 +41,5 @@ export const CHIP_FIELD_CONSTANTS = {
     observedInputAttributes,
     tagNames
 };
+
+export { CHIP_FIELD_CONSTANTS };

package/esm/chip-field/chip-field-core.d.ts

@@ -1,10 +1,5 @@
-/**
- * @license
- * Copyright Tyler Technologies, Inc. 
- * License: Apache-2.0
- */
-import { IChipFieldAdapter } from './chip-field-adapter';
-import { BaseFieldCore, IBaseFieldCore } from '../field/base/base-field-core';
+import { IChipFieldAdapter } from './chip-field-adapter.js';
+import { BaseFieldCore, IBaseFieldCore } from '../field/base/base-field-core.js';
 export interface IChipFieldCore extends IBaseFieldCore {
     addOnBlur: boolean;
     readonly popoverTargetElement: HTMLElement;

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

@@ -1,11 +1,13 @@
 /**
  * @license
- * Copyright Tyler Technologies, Inc. 
+ * Copyright Tyler Technologies, Inc.
  * License: Apache-2.0
  */
-import { CHIP_FIELD_CONSTANTS } from './chip-field-constants';
-import { BaseFieldCore } from '../field/base/base-field-core';
-export class ChipFieldCore extends BaseFieldCore {
+
+import { CHIP_FIELD_CONSTANTS } from './chip-field-constants.js';
+import { BaseFieldCore } from '../field/base/base-field-core.js';
+
+class ChipFieldCore extends BaseFieldCore {
     constructor(adapter) {
         super(adapter);
         this._addOnBlur = false;
@@ -225,3 +227,5 @@ export class ChipFieldCore extends BaseFieldCore {
         this._adapter.setDisabled(value);
     }
 }
+
+export { ChipFieldCore };

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

@@ -1,10 +1,5 @@
-/**
- * @license
- * Copyright Tyler Technologies, Inc. 
- * License: Apache-2.0
- */
-import { ChipFieldCore } from './chip-field-core';
-import { BaseField, IBaseField } from '../field/base/base-field';
+import { ChipFieldCore } from './chip-field-core.js';
+import { BaseField, IBaseField } from '../field/base/base-field.js';
 export interface IChipFieldComponent extends IBaseField {
     addOnBlur: boolean;
     readonly popoverTargetElement: HTMLElement;

package/esm/chip-field/chip-field.html.js

@@ -0,0 +1,9 @@
+/**
+ * @license
+ * Copyright Tyler Technologies, Inc.
+ * License: Apache-2.0
+ */
+
+var template = "<template>\n  <forge-field id=\"field\" multiline>\n    <slot slot=\"label\" name=\"label\"></slot>\n    <slot slot=\"start\" name=\"start\"></slot>\n    <div class=\"container\" data-forge-field-input>\n      <slot name=\"member\"></slot>\n      <slot></slot>\n    </div>\n    <slot slot=\"end\" name=\"end\"></slot>\n    <slot slot=\"accessory\" name=\"accessory\"></slot>\n    <slot slot=\"support-text\" name=\"support-text\"></slot>\n    <slot slot=\"support-text-end\" name=\"support-text-end\"></slot>\n\n    <!-- Include deprecated leading alias -->\n    <slot slot=\"start\" name=\"leading\"></slot>\n    <!-- Include deprecated trailing alias -->\n    <slot slot=\"end\" name=\"trailing\"></slot>\n    <!-- Include deprecated addon-end alias -->\n    <slot slot=\"accessory\" name=\"addon-end\"></slot>\n    <!-- Include deprecated helper-text alias -->\n    <slot slot=\"support-text\" name=\"helper-text\"></slot>\n  </forge-field>\n</template>\n";
+
+export { template as default };

package/esm/chip-field/chip-field.js

@@ -1,18 +1,23 @@
 /**
  * @license
- * Copyright Tyler Technologies, Inc. 
+ * Copyright Tyler Technologies, Inc.
  * License: Apache-2.0
  */
-import { __decorate } from "tslib";
-import { customElement, coreProperty, attachShadowTemplate, coerceBoolean } from '@tylertech/forge-core';
-import { ChipFieldAdapter } from './chip-field-adapter';
-import { ChipFieldCore } from './chip-field-core';
-import { CHIP_FIELD_CONSTANTS } from './chip-field-constants';
-import { ChipComponent } from '../chips';
-import { BaseField } from '../field/base/base-field';
-import { BASE_FIELD_CONSTANTS, FieldComponent } from '../field';
-const template = '<template><forge-field id=\"field\" multiline><slot slot=\"label\" name=\"label\"></slot><slot slot=\"start\" name=\"start\"></slot><div class=\"container\" data-forge-field-input><slot name=\"member\"></slot><slot></slot></div><slot slot=\"end\" name=\"end\"></slot><slot slot=\"accessory\" name=\"accessory\"></slot><slot slot=\"support-text\" name=\"support-text\"></slot><slot slot=\"support-text-end\" name=\"support-text-end\"></slot><slot slot=\"start\" name=\"leading\"></slot><slot slot=\"end\" name=\"trailing\"></slot><slot slot=\"accessory\" name=\"addon-end\"></slot><slot slot=\"support-text\" name=\"helper-text\"></slot></forge-field></template>';
-const styles = '@keyframes float-in-label-animation{from{translate:0;opacity:40%}to{translate:var(--_field-floating-label-translation);opacity:100%}}@keyframes float-out-label-animation{from{translate:var(--_field-floating-label-translation);opacity:40%}to{translate:0;opacity:100%}}@keyframes multiline-inset-label-background-animation{from{opacity:0%}to{opacity:100%}}:host{display:block}:host([hidden]){display:none}forge-field{--_chip-field-member-spacing:var(--forge-chip-field-member-spacing, var(--forge-spacing-xsmall, 8px));--_chip-field-content-spacing:var(--forge-chip-field-content-spacing, var(--forge-spacing-xxsmall, 4px))}.container{display:flex;flex-wrap:wrap;align-items:center;gap:var(--_chip-field-member-spacing);block-size:auto}.container.has-members{margin-block:var(--_chip-field-content-spacing)}.container.has-members ::slotted(input){block-size:auto;inline-size:auto}::slotted(input){flex-grow:1;cursor:inherit;box-sizing:border-box;margin:0;outline:0;border:none;background-color:transparent;padding-block:0;padding-inline:0;inline-size:100%;block-size:100%;color:inherit;font:inherit;font-size:var(--_field-font-size);text-overflow:ellipsis;padding-block-start:0;padding-block-end:0;transition:padding-block var(--_field-floating-animation-duration) var(--_field-floating-animation-timing)}forge-field{display:contents;--forge-field-multiline-resize:none}forge-field::part(label)::after{content:none}:host([theme=primary]) ::slotted([slot=member]){--forge-chip-field-background:var(--forge-theme-primary, #3f51b5);--forge-chip-field-color:var(--forge-theme-on-primary, #ffffff);--forge-chip-focus-indicator-color:var(--forge-theme-primary, #3f51b5)}:host([theme=secondary]) ::slotted([slot=member]){--forge-chip-field-background:var(--forge-theme-secondary, #ffc107);--forge-chip-field-color:var(--forge-theme-on-secondary, #000000);--forge-chip-focus-indicator-color:var(--forge-theme-secondary, #ffc107)}:host([theme=tertiary]) ::slotted([slot=member]){--forge-chip-field-background:var(--forge-theme-tertiary, #3d5afe);--forge-chip-field-color:var(--forge-theme-on-tertiary, #ffffff);--forge-chip-focus-indicator-color:var(--forge-theme-tertiary, #3d5afe)}:host([theme=success]) ::slotted([slot=member]){--forge-chip-field-background:var(--forge-theme-success, #2e7d32);--forge-chip-field-color:var(--forge-theme-on-success, #ffffff);--forge-chip-focus-indicator-color:var(--forge-theme-success, #2e7d32)}:host([theme=warning]) ::slotted([slot=member]){--forge-chip-field-background:var(--forge-theme-warning, #d14900);--forge-chip-field-color:var(--forge-theme-on-warning, #ffffff);--forge-chip-focus-indicator-color:var(--forge-theme-warning, #d14900)}:host([theme=error]) ::slotted([slot=member]){--forge-chip-field-background:var(--forge-theme-error, #b00020);--forge-chip-field-color:var(--forge-theme-on-error, #ffffff);--forge-chip-focus-indicator-color:var(--forge-theme-error, #b00020)}:host([theme=info]) ::slotted([slot=member]){--forge-chip-field-background:var(--forge-theme-info, #1565c0);--forge-chip-field-color:var(--forge-theme-on-info, #ffffff);--forge-chip-focus-indicator-color:var(--forge-theme-info, #1565c0)}';
+
+import { __decorate } from 'tslib';
+import { attachShadowTemplate, coerceBoolean, coreProperty, customElement } from '@tylertech/forge-core';
+import { ChipFieldAdapter } from './chip-field-adapter.js';
+import { ChipFieldCore } from './chip-field-core.js';
+import { CHIP_FIELD_CONSTANTS } from './chip-field-constants.js';
+import '../chips/index.js';
+import { BaseField } from '../field/base/base-field.js';
+import '../field/index.js';
+import template from './chip-field.html.js';
+import styles from './chip-field.scss.js';
+import { BASE_FIELD_CONSTANTS } from '../field/base/base-field-constants.js';
+import { FieldComponent } from '../field/field.js';
+import { ChipComponent } from '../chips/chip/chip.js';
+
 /**
  * @summary A specialized input field component that allows users to create and manage a collection of chips representing text values or selections. Use a chip field when you want to allow users to input multiple discrete items, such as tags, categories, or selections from a predefined list. Prefer alternatives such as a select or autocomplete when dealing with a large number of options or when single selection is sufficient.
  *
@@ -67,4 +72,5 @@ ChipFieldComponent = __decorate([
         dependencies: [FieldComponent, ChipComponent]
     })
 ], ChipFieldComponent);
+
 export { ChipFieldComponent };

package/esm/chip-field/chip-field.scss.js

@@ -0,0 +1,9 @@
+/**
+ * @license
+ * Copyright Tyler Technologies, Inc.
+ * License: Apache-2.0
+ */
+
+var styles = "@keyframes float-in-label-animation{from{translate:0;opacity:40%}to{translate:var(--_field-floating-label-translation);opacity:100%}}@keyframes float-out-label-animation{from{translate:var(--_field-floating-label-translation);opacity:40%}to{translate:0;opacity:100%}}@keyframes multiline-inset-label-background-animation{from{opacity:0%}to{opacity:100%}}:host{display:block}:host([hidden]){display:none}forge-field{--_chip-field-member-spacing:var(--forge-chip-field-member-spacing, var(--forge-spacing-xsmall, 8px));--_chip-field-content-spacing:var(--forge-chip-field-content-spacing, var(--forge-spacing-xxsmall, 4px))}.container{display:flex;flex-wrap:wrap;align-items:center;gap:var(--_chip-field-member-spacing);block-size:auto}.container.has-members{margin-block:var(--_chip-field-content-spacing)}.container.has-members ::slotted(input){block-size:auto;inline-size:auto}::slotted(input){flex-grow:1;cursor:inherit;box-sizing:border-box;margin:0;outline:none;border:none;background-color:rgba(0,0,0,0);padding-block:0;padding-inline:0;inline-size:100%;block-size:100%;color:inherit;font:inherit;font-size:var(--_field-font-size);text-overflow:ellipsis;padding-block-start:0;padding-block-end:0;transition:padding-block var(--_field-floating-animation-duration) var(--_field-floating-animation-timing)}forge-field{display:contents;--forge-field-multiline-resize: none}forge-field::part(label)::after{content:none}:host([theme=primary]) ::slotted([slot=member]){--forge-chip-field-background: var(--forge-theme-primary, #3f51b5);--forge-chip-field-color: var(--forge-theme-on-primary, #ffffff);--forge-chip-focus-indicator-color: var(--forge-theme-primary, #3f51b5)}:host([theme=secondary]) ::slotted([slot=member]){--forge-chip-field-background: var(--forge-theme-secondary, #ffc107);--forge-chip-field-color: var(--forge-theme-on-secondary, #000000);--forge-chip-focus-indicator-color: var(--forge-theme-secondary, #ffc107)}:host([theme=tertiary]) ::slotted([slot=member]){--forge-chip-field-background: var(--forge-theme-tertiary, #3d5afe);--forge-chip-field-color: var(--forge-theme-on-tertiary, #ffffff);--forge-chip-focus-indicator-color: var(--forge-theme-tertiary, #3d5afe)}:host([theme=success]) ::slotted([slot=member]){--forge-chip-field-background: var(--forge-theme-success, #2e7d32);--forge-chip-field-color: var(--forge-theme-on-success, #ffffff);--forge-chip-focus-indicator-color: var(--forge-theme-success, #2e7d32)}:host([theme=warning]) ::slotted([slot=member]){--forge-chip-field-background: var(--forge-theme-warning, #d14900);--forge-chip-field-color: var(--forge-theme-on-warning, #ffffff);--forge-chip-focus-indicator-color: var(--forge-theme-warning, #d14900)}:host([theme=error]) ::slotted([slot=member]){--forge-chip-field-background: var(--forge-theme-error, #b00020);--forge-chip-field-color: var(--forge-theme-on-error, #ffffff);--forge-chip-focus-indicator-color: var(--forge-theme-error, #b00020)}:host([theme=info]) ::slotted([slot=member]){--forge-chip-field-background: var(--forge-theme-info, #1565c0);--forge-chip-field-color: var(--forge-theme-on-info, #ffffff);--forge-chip-focus-indicator-color: var(--forge-theme-info, #1565c0)}";
+
+export { styles as default };

package/esm/chip-field/index.d.ts

@@ -1,11 +1,6 @@
-/**
- * @license
- * Copyright Tyler Technologies, Inc. 
- * License: Apache-2.0
- */
-export * from './chip-field-adapter';
-export * from './chip-field-component-delegate';
-export * from './chip-field-constants';
-export * from './chip-field-core';
-export * from './chip-field';
+export * from './chip-field-adapter.js';
+export * from './chip-field-component-delegate.js';
+export * from './chip-field-constants.js';
+export * from './chip-field-core.js';
+export * from './chip-field.js';
 export declare function defineChipFieldComponent(): void;

package/esm/chip-field/index.js

@@ -1,15 +1,18 @@
 /**
  * @license
- * Copyright Tyler Technologies, Inc. 
+ * Copyright Tyler Technologies, Inc.
  * License: Apache-2.0
  */
+
 import { defineCustomElement } from '@tylertech/forge-core';
-import { ChipFieldComponent } from './chip-field';
-export * from './chip-field-adapter';
-export * from './chip-field-component-delegate';
-export * from './chip-field-constants';
-export * from './chip-field-core';
-export * from './chip-field';
-export function defineChipFieldComponent() {
+import { ChipFieldComponent } from './chip-field.js';
+export { ChipFieldAdapter } from './chip-field-adapter.js';
+export { ChipFieldComponentDelegate } from './chip-field-component-delegate.js';
+export { CHIP_FIELD_CONSTANTS } from './chip-field-constants.js';
+export { ChipFieldCore } from './chip-field-core.js';
+
+function defineChipFieldComponent() {
     defineCustomElement(ChipFieldComponent);
 }
+
+export { ChipFieldComponent, defineChipFieldComponent };

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

@@ -1,12 +1,7 @@
-/**
- * @license
- * Copyright Tyler Technologies, Inc. 
- * License: Apache-2.0
- */
-import { BaseAdapter, IBaseAdapter } from '../../core/base/base-adapter';
-import { IIconButtonComponent } from '../../icon-button';
-import { IChipComponent } from './chip';
-import { IChipState } from './chip-constants';
+import { BaseAdapter, IBaseAdapter } from '../../core/base/base-adapter.js';
+import { IIconButtonComponent } from '../../icon-button/index.js';
+import { IChipComponent } from './chip.js';
+import { IChipState } from './chip-constants.js';
 export interface IChipAdapter extends IBaseAdapter {
     readonly removeButtonElement: IIconButtonComponent | undefined;
     readonly isAnchor: boolean;
@@ -33,6 +28,7 @@ export declare class ChipAdapter extends BaseAdapter<IChipComponent> implements
     private _rootElement;
     private _triggerElement;
     private _removeButtonElement;
+    private _removeTextElement;
     private _startSlotElement;
     private _checkmarkElement;
     private _focusIndicatorElement;
@@ -57,8 +53,9 @@ export declare class ChipAdapter extends BaseAdapter<IChipComponent> implements
     tryFocusRemoveButton(): void;
     clickRemoveButton(): void;
     animateStateLayer(): void;
-    private _getDefaultRemoveButtonLabel;
+    private _getDefaultRemoveButtonLabelledBy;
     private _createRemoveButton;
+    private _createRemoveTextElement;
     private _createAnchorElement;
     private _createButtonElement;
 }