@tylertech/forge 3.0.0-next.21 → 3.0.0-next.23

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

@@ -4,9 +4,10 @@
  * License: Apache-2.0
  */
 import { ChipFieldFoundation } from './chip-field-foundation';
-import { FieldComponent, IFieldComponent } from '../field/field';
-export interface IChipFieldComponent extends IFieldComponent {
+import { BaseField, IBaseField } from '../field/base/base-field';
+export interface IChipFieldComponent extends IBaseField {
     addOnBlur: boolean;
+    readonly popoverTargetElement: HTMLElement;
 }
 declare global {
     interface HTMLElementTagNameMap {
@@ -18,14 +19,16 @@ declare global {
     }
 }
 /**
- * The web component class behind the `<forge-chip-field>` custom element.
- *
  * @tag forge-chip-field
  */
-export declare class ChipFieldComponent extends FieldComponent<ChipFieldFoundation> implements IChipFieldComponent {
+export declare class ChipFieldComponent extends BaseField<ChipFieldFoundation> implements IChipFieldComponent {
     static get observedAttributes(): string[];
+    protected _foundation: ChipFieldFoundation;
     constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
-    /** Controls whether or not the value should be set onBlur */
     addOnBlur: boolean;
+    get popoverTargetElement(): HTMLElement;
+    click(): void;
 }

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

@@ -9,20 +9,18 @@ import { ChipFieldAdapter } from './chip-field-adapter';
 import { ChipFieldFoundation } from './chip-field-foundation';
 import { CHIP_FIELD_CONSTANTS } from './chip-field-constants';
 import { ChipComponent } from '../chips';
-import { FieldComponent } from '../field/field';
-const template = '<template><div class=\"forge-chip-field__wrapper\" part=\"root\"><div class=\"forge-chip-field forge-field\" part=\"container\"><div class=\"forge-field__leading-container\" part=\"leading-container\"><slot name=\"leading\"></slot></div><div class=\"forge-field__label-input-container\" part=\"label-input-container\"><slot name=\"label\"></slot><div class=\"forge-field__input-container\" part=\"input-container\"><slot name=\"member\"></slot><slot></slot></div></div><div class=\"forge-field__trailing-container\" part=\"trailing-container\"><slot name=\"trailing\"></slot></div><div class=\"forge-field__addon-end-container\" part=\"addon-end-container\"><slot name=\"addon-end\"></slot></div></div><slot name=\"helper-text\"></slot></div></template>';
-const styles = '.forge-field::before{content:\"\";display:-webkit-box;display:flex;position:absolute;top:0;right:0;left:0;z-index:-1;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;max-width:100%;height:100%;pointer-events:none;border-style:solid;border-style:var(--forge-chip-field-border-style,solid);border-width:1px;-webkit-transition:border-color .2s 0s cubic-bezier(0, 0, .2, 1);transition:border-color .2s 0s cubic-bezier(0, 0, .2, 1);background-color:transparent;background-color:var(--forge-chip-field-theme-background,transparent);text-align:left}.forge-field[dir=rtl]::before,[dir=rtl] .forge-field::before{text-align:right}.forge-field:not(.forge-field--disabled):not(.forge-field--invalid):not(.forge-field--focused)::before{border-color:rgba(0,0,0,.38);border-color:var(--mdc-theme-text-icon-on-background,rgba(0,0,0,.38))}.forge-field:not(.forge-field--disabled):not(.forge-field--invalid):not(.forge-field--focused):hover::before{border-color:rgba(0,0,0,.87);border-color:var(--mdc-theme-text-primary-on-background,rgba(0,0,0,.87))}.forge-field--focused:not(.forge-field--invalid):not(.forge-field--disabled)::before{border-color:#6200ee;border-color:var(--mdc-theme-primary,#6200ee)}.forge-field--invalid:not(.forge-field--disabled)::before{border-color:#b00020;border-color:var(--mdc-theme-error,#b00020)}.forge-field--invalid:not(.forge-field--disabled):not(.forge-field--focused):hover::before{border-color:#db8a98;border-color:var(--forge-theme-error-hover,#db8a98)}.forge-field--disabled::before{border-color:rgba(0,0,0,.38);border-color:var(--mdc-theme-text-disabled-on-background,rgba(0,0,0,.38))}.forge-field:not(.forge-field--shape-rounded){border-radius:4px}.forge-field:not(.forge-field--shape-rounded)::before{border-radius:4px}.forge-field--shape-rounded{border-radius:28px}.forge-field--shape-rounded::before{border-radius:28px}.forge-field--disabled::before{background-color:#f5f5f5;background-color:var(--forge-theme-form-field-disabled-on-background,#f5f5f5)}.forge-field--focused::before{border-color:#6200ee;border-color:var(--mdc-theme-primary,#6200ee);border-width:2px}.forge-field__label-input-container{position:relative;-webkit-box-flex:1;flex:1 1 0.0001px;height:100%;display:-webkit-box;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row;-webkit-box-align:center;align-items:center;min-width:0}.forge-field ::slotted(label){color:rgba(0,0,0,.65);color:var(--forge-theme-form-field-label-on-background,rgba(0,0,0,.65));pointer-events:none;right:0;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-subtitle1-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-weight:400;font-weight:var(--mdc-typography-subtitle1-font-weight,400);letter-spacing:.009375em;letter-spacing:var(--mdc-typography-subtitle1-letter-spacing, .009375em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-subtitle1-text-decoration,inherit);text-decoration:var(--mdc-typography-subtitle1-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-subtitle1-text-transform,inherit);font-size:var(--mdc-typography-subtitle1-font-size, 1rem);position:absolute;left:0;-webkit-transform-origin:left top;transform-origin:left top;line-height:1.1rem;text-align:left;text-overflow:ellipsis;white-space:nowrap;cursor:text;overflow:hidden;will-change:transform;-webkit-transition:color 150ms cubic-bezier(.4, 0, .2, 1),-webkit-transform 150ms cubic-bezier(.4, 0, .2, 1);transition:color 150ms cubic-bezier(.4, 0, .2, 1),-webkit-transform 150ms cubic-bezier(.4, 0, .2, 1);transition:transform 150ms cubic-bezier(.4, 0, .2, 1),color 150ms cubic-bezier(.4, 0, .2, 1);transition:transform 150ms cubic-bezier(.4, 0, .2, 1),color 150ms cubic-bezier(.4, 0, .2, 1),-webkit-transform 150ms cubic-bezier(.4, 0, .2, 1)}.forge-field ::slotted(label[dir=rtl]),[dir=rtl] .forge-field ::slotted(label){right:0;left:auto;-webkit-transform-origin:right top;transform-origin:right top;text-align:right}.forge-field--dense:not(.forge-field--roomy) ::slotted(label){display:none}.forge-field--required ::slotted(label)::after{content:none}.forge-field--required ::slotted(label)::before{color:#b00020;color:var(--mdc-theme-error,#b00020);content:\"*\";margin-right:4px}.forge-field:not(.forge-field--dense):not(.forge-field--roomy) ::slotted(label){font-size:1rem}.forge-field--roomy:not(.forge-field--dense) ::slotted(label){font-size:1rem}.forge-field--disabled ::slotted(label){color:rgba(0,0,0,.38);color:var(--forge-theme-label-disabled-on-background,rgba(0,0,0,.38))}.forge-field--invalid:not(.forge-field--disabled) ::slotted(label){color:#b00020;color:var(--mdc-theme-error,#b00020)}.forge-field--focused:not(.forge-field--invalid):not(.forge-field--disabled) ::slotted(label){color:#6200ee;color:var(--mdc-theme-primary,#6200ee)}.forge-field:not(.forge-field--dense):not(.forge-field--roomy) ::slotted(label){top:1rem}.forge-field--roomy:not(.forge-field--dense) ::slotted(label){top:1.285rem}.forge-field:not(.forge-field--shape-rounded):not(.forge-field--leading) ::slotted(label){left:12px!important}.forge-field--shape-rounded:not(.forge-field--leading) ::slotted(label){left:32px!important}.forge-field:not(.forge-field--trailing):not(.forge-field--addon-end):not(.forge-field--shape-rounded) ::slotted(label){padding-right:12px}.forge-field:not(.forge-field--trailing):not(.forge-field--addon-end).forge-field--shape-rounded ::slotted(label){padding-right:32px}.forge-field ::slotted(label.forge-floating-label--float-above){color:rgba(0,0,0,.65);color:var(--forge-theme-form-field-label-on-background,rgba(0,0,0,.65))}.forge-field--disabled ::slotted(label.forge-floating-label--float-above){color:rgba(0,0,0,.6);color:var(--forge-theme-form-field-text-disabled-on-background,rgba(0,0,0,.6))}.forge-field--invalid:not(.forge-field--disabled) ::slotted(label.forge-floating-label--float-above){color:#b00020;color:var(--mdc-theme-error,#b00020)}.forge-field--focused:not(.forge-field--invalid):not(.forge-field--disabled) ::slotted(label.forge-floating-label--float-above){color:#6200ee;color:var(--mdc-theme-primary,#6200ee)}.forge-field:not(.forge-field--dense):not(.forge-field--roomy) ::slotted(label.forge-floating-label--float-above){-webkit-transform:translateY(-.54rem) scale(.8125);transform:translateY(-.54rem) scale(.8125);cursor:auto}.forge-field--roomy:not(.forge-field--dense) ::slotted(label.forge-floating-label--float-above){-webkit-transform:translateY(-.72rem) scale(.8125);transform:translateY(-.72rem) scale(.8125);cursor:auto}.forge-field:not(.forge-field--dense):not(.forge-field--roomy) ::slotted(label.forge-floating-label--float-above.forge-floating-label--float-above-end-keyframe){-webkit-transition:none;transition:none;font-size:.8125rem;-webkit-transform:translateY(-.62rem) scale(1);transform:translateY(-.62rem) scale(1);cursor:auto}.forge-field--roomy:not(.forge-field--dense) ::slotted(label.forge-floating-label--float-above.forge-floating-label--float-above-end-keyframe){-webkit-transition:none;transition:none;font-size:.8125rem;-webkit-transform:translateY(-.8rem) scale(1);transform:translateY(-.8rem) scale(1);cursor:auto}.forge-field:not(.forge-field--dense):not(.forge-field--roomy) ::slotted(label.forge-floating-label--unfloat-above-start-keyframe){-webkit-transition:none;transition:none;font-size:1rem;-webkit-transform:translateY(-.62rem) scale(.8125);transform:translateY(-.62rem) scale(.8125);cursor:auto}.forge-field--roomy:not(.forge-field--dense) ::slotted(label.forge-floating-label--unfloat-above-start-keyframe){-webkit-transition:none;transition:none;font-size:1rem;-webkit-transform:translateY(-.8rem) scale(.8125);transform:translateY(-.8rem) scale(.8125);cursor:auto}.forge-field~::slotted([slot=helper-text]){-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-caption-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));line-height:1.25rem;line-height:var(--mdc-typography-caption-line-height, 1.25rem);font-weight:400;font-weight:var(--mdc-typography-caption-font-weight,400);letter-spacing:.0333333333em;letter-spacing:var(--mdc-typography-caption-letter-spacing, .0333333333em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-caption-text-decoration,inherit);text-decoration:var(--mdc-typography-caption-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-caption-text-transform,inherit);display:block;min-height:1.5rem;line-height:normal;padding-top:4px;-webkit-box-sizing:border-box;box-sizing:border-box}.forge-field:not(.forge-field--dense):not(.forge-field--roomy)~::slotted([slot=helper-text]){font-size:.75rem}.forge-field--roomy:not(.forge-field--dense)~::slotted([slot=helper-text]){font-size:.875rem}.forge-field--dense:not(.forge-field--roomy)~::slotted([slot=helper-text]){font-size:.75rem}.forge-field~::slotted([slot=helper-text]){color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-background,rgba(0,0,0,.54))}.forge-field--invalid:not(.forge-field--disabled)~::slotted([slot=helper-text]){color:#b00020;color:var(--mdc-theme-error,#b00020)}.forge-field:not(.forge-field--shape-rounded)~::slotted([slot=helper-text]){margin-left:12px}.forge-field--shape-rounded~::slotted([slot=helper-text]){margin-left:32px}.forge-field ::slotted([slot=leading]){display:-webkit-box;display:flex;align-self:center}.forge-field:not(.forge-field--disabled):not(.forge-field--invalid) ::slotted([slot=leading]){color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-background,rgba(0,0,0,.54))}.forge-field--invalid:not(.forge-field--disabled) ::slotted([slot=leading]){color:#b00020;color:var(--mdc-theme-error,#b00020)}.forge-field--disabled ::slotted([slot=leading]){color:rgba(0,0,0,.38);color:var(--mdc-theme-text-disabled-on-light,rgba(0,0,0,.38));cursor:not-allowed;pointer-events:none}.forge-field ::slotted([slot=leading]){margin:0 4px}.forge-field ::slotted([slot=leading]:not(forge-icon-button)){padding:6px}.forge-field ::slotted([slot=trailing]){align-self:center}.forge-field:not(.forge-field--disabled):not(.forge-field--invalid) ::slotted([slot=trailing]){color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-background,rgba(0,0,0,.54))}.forge-field--invalid:not(.forge-field--disabled) ::slotted([slot=trailing]){color:#b00020;color:var(--mdc-theme-error,#b00020)}.forge-field--disabled ::slotted([slot=trailing]){color:rgba(0,0,0,.38);color:var(--mdc-theme-text-disabled-on-light,rgba(0,0,0,.38));cursor:not-allowed;pointer-events:none}.forge-field ::slotted([slot=trailing]){margin:0 4px}.forge-field ::slotted([slot=trailing]:not(forge-icon-button)){padding:6px}.forge-field__addon-end-container{display:none}.forge-field--addon-end .forge-field__addon-end-container{height:100%;width:auto;display:-webkit-box;display:flex;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center;padding:0 4px;border-left-width:1px;border-left-style:solid;-webkit-transition:border-left-color .2s 0s cubic-bezier(0, 0, .2, 1);transition:border-left-color .2s 0s cubic-bezier(0, 0, .2, 1)}.forge-field:not(.forge-field--disabled):not(.forge-field--focused):not(.forge-field--invalid) .forge-field__addon-end-container{border-left-color:rgba(0,0,0,.54);border-left-color:var(--mdc-theme-text-secondary-on-background,rgba(0,0,0,.54))}.forge-field:not(.forge-field--disabled):not(.forge-field--focused):not(.forge-field--invalid) .forge-field__addon-end-container:hover{border-left-color:rgba(0,0,0,.87);border-left-color:var(--mdc-theme-text-primary-on-background,rgba(0,0,0,.87))}.forge-field.forge-field--focused:not(.forge-field--invalid):not(.forge-field--disabled) .forge-field__addon-end-container{border-left-color:#6200ee;border-left-color:var(--mdc-theme-primary,#6200ee)}.forge-field.forge-field--invalid:not(.forge-field--disabled) .forge-field__addon-end-container{border-left-color:#b00020;border-left-color:var(--mdc-theme-error,#b00020)}.forge-field.forge-field--invalid:not(.forge-field--focused):not(.forge-field--disabled) .forge-field__addon-end-container:hover{border-left-color:#db8a98;border-left-color:var(--forge-theme-error-hover,#db8a98)}.forge-field.forge-field--disabled .forge-field__addon-end-container{border-left-color:rgba(0,0,0,.38);border-left-color:var(--mdc-theme-text-disabled-on-background,rgba(0,0,0,.38))}.forge-field:not(.forge-field--disabled):not(.forge-field--invalid) ::slotted([slot=addon-end]){color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-background,rgba(0,0,0,.54))}.forge-field--invalid:not(.forge-field--disabled) ::slotted([slot=addon-end]){color:#b00020;color:var(--mdc-theme-error,#b00020)}.forge-field--disabled ::slotted([slot=addon-end]){color:rgba(0,0,0,.38);color:var(--mdc-theme-text-disabled-on-light,rgba(0,0,0,.38));cursor:not-allowed;pointer-events:none}.forge-chip-field{-webkit-box-sizing:border-box;box-sizing:border-box;display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;position:relative;z-index:1;z-index:var(--forge-z-index-surface,1);margin-top:0;margin-top:var(--forge-chip-field-margin-top,0);display:grid;grid-template-columns:[leading] -webkit-min-content [input] 1fr [trailing] -webkit-min-content [addon-end] -webkit-min-content [end];grid-template-columns:[leading] min-content [input] 1fr [trailing] min-content [addon-end] min-content [end]}.forge-chip-field.forge-field--disabled{background-color:#f5f5f5;background-color:var(--forge-theme-form-field-disabled-on-background,#f5f5f5);cursor:not-allowed}.forge-chip-field:not(.forge-field--dense):not(.forge-field--roomy){height:auto;min-height:46px;min-height:var(--forge-chip-field-height,46px)}.forge-chip-field.forge-field--roomy:not(.forge-field--dense){height:auto;min-height:3.5rem;min-height:var(--forge-chip-field-height,3.5rem)}.forge-chip-field.forge-field--dense:not(.forge-field--roomy){height:auto;min-height:1.5rem;min-height:var(--forge-chip-field-height,1.5rem)}.forge-field__label-input-container{grid-column-start:input;grid-column-end:trailing}.forge-field__input-container{-webkit-box-flex:1;flex:1 1 0.0001px;display:-webkit-box;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row;flex-wrap:wrap;-webkit-box-align:start;align-items:flex-start;-webkit-box-sizing:border-box;box-sizing:border-box}.forge-field__input-container{padding:2px 12px}.forge-field--label .forge-field__input-container{padding-top:22px}.forge-field--roomy.forge-field--label .forge-field__input-container{padding-top:22px}.forge-field--shape-rounded:not(.forge-field--leading) .forge-field__input-container{padding-left:32px}.forge-field--leading:not(.forge-field--shape-rounded) .forge-field__input-container{padding-left:0}.forge-field--shape-rounded.forge-field--leading .forge-field__input-container{padding-left:0}.forge-field--label .forge-field__input-container{padding-bottom:2px}.forge-field--roomy.forge-field--label .forge-field__input-container{padding-bottom:2px}.forge-field--shape-rounded:not(.forge-field--trailing):not(.forge-field--addon-end) .forge-field__input-container{padding-right:32px}.forge-field--addon-end:not(.forge-field--shape-rounded) .forge-field__input-container,.forge-field--trailing:not(.forge-field--shape-rounded) .forge-field__input-container{padding-right:0}.forge-field--shape-rounded.forge-field--addon-end .forge-field__input-container,.forge-field--shape-rounded.forge-field--trailing .forge-field__input-container{padding-right:0}.forge-field ::slotted([slot=member]){display:block}.forge-field--disabled ::slotted([slot=member]){--mdc-theme-primary:rgba(0, 0, 0, 0.38);--mdc-theme-primary:var(--mdc-theme-text-disabled-on-light, rgba(0, 0, 0, 0.38));cursor:not-allowed;pointer-events:none}.forge-field:not(.forge-field--dense):not(.forge-field--roomy) ::slotted([slot=member]){margin:2px 8px 2px 0}.forge-field--roomy:not(.forge-field--dense) ::slotted([slot=member]){margin:6px 12px 6px 0}.forge-field--dense:not(.forge-field--roomy) ::slotted([slot=member]){margin:2px 6px 2px 0}.forge-field:not(.forge-field--dense):not(.forge-field--roomy) ::slotted([slot=member]){--forge-chip-min-height:20px}.forge-field--dense:not(.forge-field--roomy) ::slotted([slot=member]){--forge-chip-min-height:16px}.forge-field ::slotted(input){-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-body1-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-weight:400;font-weight:var(--mdc-typography-body1-font-weight,400);letter-spacing:.03125em;letter-spacing:var(--mdc-typography-body1-letter-spacing, .03125em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-body1-text-decoration,inherit);text-decoration:var(--mdc-typography-body1-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-body1-text-transform,inherit);align-self:flex-end;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;height:100%;-webkit-transition:opacity 150ms 0s cubic-bezier(.4, 0, .2, 1);transition:opacity 150ms 0s cubic-bezier(.4, 0, .2, 1);border:none;background:0 0;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:0;line-height:normal;min-width:0}.forge-field ::slotted(input)::-webkit-input-placeholder{color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-background,rgba(0,0,0,.54));font-size:.875rem}.forge-field ::slotted(input)::-moz-placeholder{color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-background,rgba(0,0,0,.54));font-size:.875rem}.forge-field ::slotted(input):-ms-input-placeholder{color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-background,rgba(0,0,0,.54));font-size:.875rem}.forge-field ::slotted(input)::-ms-input-placeholder{color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-background,rgba(0,0,0,.54));font-size:.875rem}.forge-field ::slotted(input)::placeholder{color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-background,rgba(0,0,0,.54));font-size:.875rem}.forge-field ::slotted(input):invalid{-webkit-box-shadow:none;box-shadow:none}.forge-field ::slotted(input):-webkit-autofill{z-index:auto!important}.forge-field:not(.forge-field--disabled) ::slotted(input){color:rgba(0,0,0,.87);color:var(--mdc-theme-text-primary-on-background,rgba(0,0,0,.87))}.forge-field--disabled ::slotted(input){color:rgba(0,0,0,.6);color:var(--forge-theme-form-field-text-disabled-on-background,rgba(0,0,0,.6));cursor:not-allowed}.forge-field:not(.forge-field--dense):not(.forge-field--roomy) ::slotted(input){font-size:1rem;font-size:var(--forge-chip-field-font-size, 1rem)}.forge-field--roomy:not(.forge-field--dense) ::slotted(input){font-size:1rem;font-size:var(--forge-chip-field-font-size, 1rem)}.forge-field--dense:not(.forge-field--roomy) ::slotted(input){font-size:.875rem;font-size:var(--forge-chip-field-font-size, .875rem)}.forge-field ::slotted(input){-webkit-box-flex:1;flex:1 1 0.0001px;min-width:40px;display:block;align-self:flex-start;padding:0}.forge-field:not(.forge-field--dense):not(.forge-field--roomy) ::slotted(input){margin:4px 0}.forge-field--roomy:not(.forge-field--dense) ::slotted(input){margin:6px 0}.forge-field--dense:not(.forge-field--roomy) ::slotted(input){margin:2px 0}.forge-field:not(.forge-field--dense):not(.forge-field--roomy) ::slotted(input){height:1rem;line-height:1rem}.forge-field--roomy:not(.forge-field--dense) ::slotted(input){height:1.25rem;line-height:1.25rem}.forge-field--dense:not(.forge-field--roomy) ::slotted(input){height:1rem;line-height:1rem}.forge-field--leading .forge-field__leading-container{grid-column-start:leading;grid-column-end:input;align-self:flex-start;display:-webkit-box;display:flex}.forge-field:not(.forge-field--dense):not(.forge-field--roomy) ::slotted([slot=leading]){margin-top:5px;margin-bottom:5px}.forge-field--roomy:not(.forge-field--dense) ::slotted([slot=leading]){margin-top:10px;margin-bottom:10px}.forge-field--dense:not(.forge-field--roomy) ::slotted([slot=leading]){margin-top:0;margin-bottom:0}.forge-field--dense:not(.forge-field--roomy) ::slotted([slot=leading]){padding-top:0;padding-bottom:0}.forge-field--trailing .forge-field__trailing-container{grid-column-start:trailing;grid-column-end:addon-end;display:-webkit-box;display:flex;-webkit-box-align:start;align-items:flex-start;align-self:flex-start}.forge-field:not(.forge-field--dense):not(.forge-field--roomy) ::slotted([slot=trailing]){margin-top:5px;margin-bottom:5px}.forge-field--roomy:not(.forge-field--dense) ::slotted([slot=trailing]){margin-top:10px;margin-bottom:10px}.forge-field--dense:not(.forge-field--roomy) ::slotted([slot=trailing]){margin-top:0;margin-bottom:0}.forge-field--dense:not(.forge-field--roomy) ::slotted([slot=trailing]){padding-top:0;padding-bottom:0}.forge-field--addon-end .forge-field__addon-end-container{grid-column-start:addon-end;grid-column-end:end;display:-webkit-box;display:flex;-webkit-box-align:start;align-items:flex-start;align-self:flex-start}.forge-field:not(.forge-field--dense):not(.forge-field--roomy) ::slotted([slot=addon-end]){margin-top:5px;margin-bottom:5px}.forge-field--roomy:not(.forge-field--dense) ::slotted([slot=addon-end]){margin-top:10px;margin-bottom:10px}.forge-field--dense:not(.forge-field--roomy) ::slotted([slot=addon-end]){margin-top:0;margin-bottom:0}.forge-field ::slotted(forge-icon-button){display:-webkit-inline-box!important;display:inline-flex!important}:host{display:block;contain:layout}:host([hidden]){display:none}';
-import { FIELD_CONSTANTS } from '../field/field-constants';
+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-start\" name=\"support-text-start\"></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-start\" name=\"helper-text\"></slot></forge-field></template>';
+const styles = '@-webkit-keyframes float-in-label-animation{from{translate:0;opacity:40%}to{translate:var(--_field-floating-label-translation);opacity:100%}}@keyframes float-in-label-animation{from{translate:0;opacity:40%}to{translate:var(--_field-floating-label-translation);opacity:100%}}@-webkit-keyframes float-out-label-animation{from{translate:var(--_field-floating-label-translation);opacity:40%}to{translate:0;opacity:100%}}@keyframes float-out-label-animation{from{translate:var(--_field-floating-label-translation);opacity:40%}to{translate:0;opacity:100%}}@-webkit-keyframes float-in-input-animation{from{translate:0}to{translate:0 calc(calc(max(var(--forge-typography-body2-line-height,calc(var(--forge-typography-font-size,1rem) * var(--forge-typography-body-line-height-scale,1.375))),var(--forge-typography-label2-line-height,calc(var(--forge-typography-font-size,1rem) * var(--forge-typography-label-line-height-scale,1.25))))/ 2) + calc((var(--_field-height) - 56px)/ 8))}}@keyframes float-in-input-animation{from{translate:0}to{translate:0 calc(calc(max(var(--forge-typography-body2-line-height,calc(var(--forge-typography-font-size,1rem) * var(--forge-typography-body-line-height-scale,1.375))),var(--forge-typography-label2-line-height,calc(var(--forge-typography-font-size,1rem) * var(--forge-typography-label-line-height-scale,1.25))))/ 2) + calc((var(--_field-height) - 56px)/ 8))}}@-webkit-keyframes float-out-input-animation{from{translate:0 calc(calc(max(var(--forge-typography-body2-line-height,calc(var(--forge-typography-font-size,1rem) * var(--forge-typography-body-line-height-scale,1.375))),var(--forge-typography-label2-line-height,calc(var(--forge-typography-font-size,1rem) * var(--forge-typography-label-line-height-scale,1.25))))/ 2) + calc((var(--_field-height) - 56px)/ 8))}to{translate:0}}@keyframes float-out-input-animation{from{translate:0 calc(calc(max(var(--forge-typography-body2-line-height,calc(var(--forge-typography-font-size,1rem) * var(--forge-typography-body-line-height-scale,1.375))),var(--forge-typography-label2-line-height,calc(var(--forge-typography-font-size,1rem) * var(--forge-typography-label-line-height-scale,1.25))))/ 2) + calc((var(--_field-height) - 56px)/ 8))}to{translate:0}}@-webkit-keyframes resize-container-inset-label-background-animation{from{opacity:0%}to{opacity:100%}}@keyframes resize-container-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:-webkit-box;display:flex;flex-wrap:wrap;-webkit-box-align:center;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){-webkit-box-flex:1;flex-grow:1;cursor:inherit;-webkit-box-sizing:border-box;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;text-overflow:ellipsis}forge-field{display:contents;--forge-field-multiline-resize:none}forge-field::part(label)::after{content:none}:host([theme=primary]) ::slotted([slot=member]){--forge-chip-field-background:var(--forge-theme-primary, #3f51b5);--forge-chip-field-color:var(--forge-theme-on-primary, #ffffff)}:host([theme=secondary]) ::slotted([slot=member]){--forge-chip-field-background:var(--forge-theme-secondary, #ffc107);--forge-chip-field-color:var(--forge-theme-on-secondary, #000000)}:host([theme=tertiary]) ::slotted([slot=member]){--forge-chip-field-background:var(--forge-theme-tertiary, #3d5afe);--forge-chip-field-color:var(--forge-theme-on-tertiary, #ffffff)}:host([theme=success]) ::slotted([slot=member]){--forge-chip-field-background:var(--forge-theme-success, #2e7d32);--forge-chip-field-color:var(--forge-theme-on-success, #ffffff)}:host([theme=warning]) ::slotted([slot=member]){--forge-chip-field-background:var(--forge-theme-warning, #d14900);--forge-chip-field-color:var(--forge-theme-on-warning, #ffffff)}:host([theme=error]) ::slotted([slot=member]){--forge-chip-field-background:var(--forge-theme-error, #b00020);--forge-chip-field-color:var(--forge-theme-on-error, #ffffff)}:host([theme=info]) ::slotted([slot=member]){--forge-chip-field-background:var(--forge-theme-info, #1565c0);--forge-chip-field-color:var(--forge-theme-on-info, #ffffff)}';
 /**
- * The web component class behind the `<forge-chip-field>` custom element.
- *
  * @tag forge-chip-field
  */
-let ChipFieldComponent = class ChipFieldComponent extends FieldComponent {
+let ChipFieldComponent = class ChipFieldComponent extends BaseField {
     static get observedAttributes() {
         return [
-            ...Object.values(FIELD_CONSTANTS.attributes),
-            CHIP_FIELD_CONSTANTS.attributes.ADD_ON_BLUR
+            ...Object.values(BASE_FIELD_CONSTANTS.observedAttributes),
+            ...Object.values(CHIP_FIELD_CONSTANTS.observedAttributes)
         ];
     }
     constructor() {
@@ -30,13 +28,25 @@ let ChipFieldComponent = class ChipFieldComponent extends FieldComponent {
         attachShadowTemplate(this, template, styles);
         this._foundation = new ChipFieldFoundation(new ChipFieldAdapter(this));
     }
+    connectedCallback() {
+        this._foundation.initialize();
+    }
+    disconnectedCallback() {
+        this._foundation.destroy();
+    }
     attributeChangedCallback(name, oldValue, newValue) {
+        super.attributeChangedCallback(name, oldValue, newValue);
         switch (name) {
             case CHIP_FIELD_CONSTANTS.attributes.ADD_ON_BLUR:
                 this.addOnBlur = coerceBoolean(newValue);
                 return;
         }
-        super.attributeChangedCallback(name, oldValue, newValue);
+    }
+    get popoverTargetElement() {
+        return this._foundation.popoverTargetElement;
+    }
+    click() {
+        this._foundation.click();
     }
 };
 __decorate([
@@ -45,7 +55,10 @@ __decorate([
 ChipFieldComponent = __decorate([
     CustomElement({
         name: CHIP_FIELD_CONSTANTS.elementName,
-        dependencies: [ChipComponent]
+        dependencies: [
+            FieldComponent,
+            ChipComponent
+        ]
     })
 ], ChipFieldComponent);
 export { ChipFieldComponent };

package/esm/chips/chip/chip.js

@@ -15,7 +15,7 @@ import { ChipAdapter } from './chip-adapter';
 import { CHIP_CONSTANTS } from './chip-constants';
 import { ChipFoundation } from './chip-foundation';
 const template = '<template><div class=\"forge-chip\" part=\"root\"><button type=\"button\" id=\"trigger\" class=\"trigger\" part=\"trigger\"><slot name=\"start\"><slot name=\"leading\"></slot></slot><slot></slot><slot name=\"end\"><slot name=\"trailing\"></slot></slot></button><forge-focus-indicator target=\"trigger\" part=\"focus-indicator\"></forge-focus-indicator><forge-state-layer target=\"trigger\" exportparts=\"surface:state-layer\"></forge-state-layer></div></template>';
-const styles = ':host{display:inline-block}:host([hidden]){display:none}.forge-chip{--_chip-background:var(--forge-chip-background, transparent);--_chip-color:var(--forge-chip-color, var(--forge-theme-primary, #3f51b5));--_chip-shape:var(--forge-chip-shape, var(--forge-shape-full, 9999px));--_chip-spacing:var(--forge-chip-spacing, var(--forge-spacing-xsmall, 8px));--_chip-height:var(--forge-chip-height, 32px);--_chip-padding-inline:var(--forge-chip-padding-inline, var(--forge-spacing-small, 12px));--_chip-padding-block:var(--forge-chip-padding-block, 0);--_chip-cursor:var(--forge-chip-cursor, pointer);--_chip-icon-font-size:var(--forge-chip-icon-font-size, 1.5rem);--_chip-disabled-opacity:var(--forge-chip-disabled-opacity, 0.38);--_chip-disabled-cursor:var(--forge-chip-disabled-cursor, not-allowed);--_chip-dense-height:var(--forge-chip-dense-height, 24px);--_chip-dense-padding-inline:var(--forge-chip-dense-padding-inline, var(--forge-spacing-xsmall, 8px));--_chip-dense-spacing:var(--forge-chip-dense-spacing, var(--forge-spacing-xxsmall, 4px));--_chip-dense-font-size:var(--forge-chip-dense-font-size, 0.75rem);--_chip-dense-font-weight:var(--forge-chip-dense-font-weight, normal);--_chip-dense-focus-indicator-offset:var(--forge-chip-dense-focus-indicator-offset, var(--forge-spacing-xxxsmall, 2px));--_chip-dense-icon-font-size:var(--forge-chip-dense-icon-font-size, 1.25rem);--_chip-remove-button-spacing:var(--forge-chip-remove-button-spacing, var(--forge-spacing-xsmall, 8px) var(--forge-spacing-xxsmall, 4px));--_chip-remove-button-height-dense:var(--forge-chip-remove-button-height-dense, 18px);--_chip-remove-button-icon-size-dense:var(--forge-chip-remove-button-icon-size-dense, 16px);--_chip-remove-button-spacing-dense:var(--forge-chip-remove-button-spacing-dense, 0 var(--forge-spacing-xxxsmall, 2px));--_chip-selected-background:var(--forge-chip-selected-background, var(--forge-theme-primary, #3f51b5));--_chip-selected-color:var(--forge-chip-selected-color, var(--forge-theme-on-primary, #ffffff));--_chip-invalid-color:var(--forge-chip-invalid-color, var(--forge-theme-error, #b00020));--_chip-invalid-selected-background:var(--forge-chip-invalid-selected-background, var(--forge-theme-error, #b00020));--_chip-invalid-selected-color:var(--forge-chip-invalid-selected-color, var(--forge-theme-on-error, #ffffff));--_chip-border-width:var(--forge-chip-border-width, var(--forge-border-thin, 1px));--_chip-border-style:var(--forge-chip-border-style, solid);--_chip-border-color:var(--forge-chip-border-color, var(--_chip-color));--_chip-field-background:var(--forge-chip-field-background, var(--forge-theme-surface-container-low, #ebebeb));--_chip-field-color:var(--forge-chip-field-color, var(--forge-theme-on-surface-container-low, #000000));--_chip-field-shape:var(--forge-chip-field-shape, var(--forge-shape-medium, 4px));--_chip-field-border-color:var(--forge-chip-field-border-color, transparent);--_chip-field-cursor:var(--forge-chip-field-cursor, default);--_chip-checkmark-size:var(--forge-chip-checkmark-size, 1.25em);--_chip-checkmark-color:var(--forge-chip-checkmark-color, var(--_chip-color));--_chip-checkmark-spacing:var(--forge-chip-checkmark-spacing, var(--forge-spacing-xsmall, 8px));--_chip-avatar-size:var(--forge-chip-avatar-size, 24px);--_chip-avatar-size-dense:var(--forge-chip-avatar-size-dense, 18px);--_chip-avatar-font-size:var(--forge-chip-avatar-font-size, 0.75rem);--_chip-avatar-font-size-dense:var(--forge-chip-avatar-font-size-dense, 0.5rem);--_chip-avatar-spacing:var(--forge-chip-avatar-spacing, calc(var(--forge-spacing-xsmall, 8px) * -1));--_chip-avatar-spacing-dense:var(--forge-chip-avatar-spacing-dense, calc(var(--forge-spacing-xxsmall, 4px) * -1));--_chip-transition-duration:var(--forge-chip-transition-duration, var(--forge-animation-duration-short3, 150ms));--_chip-transition-easing:var(--forge-chip-transition-easing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_chip-checkmark-transition-delay:var(--forge-chip-checkmark-transition-delay, 50ms)}.forge-chip{position:relative;display:-webkit-inline-box;display:inline-flex;-webkit-box-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;height:var(--_chip-height);border-width:var(--_chip-border-width);border-style:var(--_chip-border-style);border-color:var(--_chip-border-color);border-radius:var(--_chip-shape);background:var(--_chip-background);color:var(--_chip-color);-webkit-transition-property:background-color,color;transition-property:background-color,color;-webkit-transition-duration:var(--_chip-transition-duration);transition-duration:var(--_chip-transition-duration);-webkit-transition-timing-function:var(--_chip-transition-easing);transition-timing-function:var(--_chip-transition-easing)}.trigger{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-button-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-button-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-button-font-size-scale, .875)));font-weight:var(--forge-typography-button-font-weight,500);line-height:var(--forge-typography-button-line-height, normal);letter-spacing:var(--forge-typography-button-letter-spacing, .0714285714em);text-transform:var(--forge-typography-button-text-transform,inherit);-webkit-text-decoration:var(--forge-typography-button-text-decoration,inherit);text-decoration:var(--forge-typography-button-text-decoration,inherit);display:-webkit-inline-box;display:inline-flex;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;gap:var(--_chip-spacing);-webkit-box-sizing:border-box;box-sizing:border-box;height:100%;padding-inline:var(--_chip-padding-inline);padding-block:var(--_chip-padding-block);cursor:var(--_chip-cursor);z-index:0;text-decoration:none;border:none;background:inherit;color:inherit;-webkit-tap-highlight-color:transparent;border-radius:var(--_chip-shape);outline:0}.remove{padding-inline:var(--_chip-remove-button-spacing);--forge-icon-button-focus-indicator-color:var(--_chip-color)}forge-focus-indicator{--forge-focus-indicator-color:var(--_chip-color);--forge-focus-indicator-shape:var(--_chip-shape)}forge-state-layer{--forge-state-layer-color:var(--_chip-color)}:host([dense]) .forge-chip{--_chip-height:var(--_chip-dense-height);--_chip-padding-inline:var(--_chip-dense-padding-inline);--_chip-spacing:var(--_chip-dense-spacing)}:host([dense]) .trigger{--forge-typography-font-size:var(--_chip-dense-font-size);--forge-typography-font-weight:var(--_chip-dense-font-weight)}:host([dense]) .remove{--_chip-remove-button-spacing:var(--_chip-remove-button-spacing-dense);--forge-icon-button-density-small-size:var(--_chip-remove-button-height-dense);--forge-icon-button-density-small-icon-size:var(--_chip-remove-button-icon-size-dense)}:host([dense]) forge-focus-indicator{--forge-focus-indicator-outward-offset:var(--_chip-dense-focus-indicator-offset)}:host([dense]) ::slotted(forge-avatar){--_chip-avatar-spacing:var(--_chip-avatar-spacing-dense);--forge-typography-font-size:var(--_chip-avatar-font-size-dense);--forge-avatar-size:var(--_chip-avatar-size-dense)}:host([dense]) ::slotted(:is([slot=start],[slot=leading],[slot=end],[slot=trailing])){--_chip-icon-font-size:var(--_chip-dense-icon-font-size)}:host(:is([type=filter],[type=choice],[type=input])[selected]) .forge-chip{--_chip-background:var(--_chip-selected-background);--_chip-color:var(--_chip-selected-color)}:host(:is([type=filter],[type=choice],[type=input])[selected]) forge-focus-indicator{--forge-focus-indicator-color:var(--_chip-background)}:host([invalid]) .forge-chip{--_chip-color:var(--_chip-invalid-color)}:host([invalid]:is([type=filter],[type=choice],[type=input])[selected]) .forge-chip{--_chip-background:var(--_chip-invalid-selected-background);--_chip-color:var(--_chip-invalid-selected-color)}:host([disabled]:not([href])) .forge-chip{opacity:var(--_chip-disabled-opacity)}:host([disabled]:not([href])) .trigger{cursor:var(--_chip-disabled-cursor)}::slotted(:not(forge-avatar):is([slot=start],[slot=leading],[slot=end],[slot=trailing])){font-size:var(--_chip-icon-font-size)}::slotted(forge-avatar:is([slot=start],[slot=leading])){-webkit-margin-start:var(--_chip-avatar-spacing);margin-inline-start:var(--_chip-avatar-spacing)}::slotted(forge-avatar:is([slot=end],[slot=trailing])){-webkit-margin-end:var(--_chip-avatar-spacing);margin-inline-end:var(--_chip-avatar-spacing)}::slotted(forge-avatar){--forge-typography-font-size:var(--_chip-avatar-font-size);--forge-avatar-size:var(--_chip-avatar-size)}:host([type=filter]) .checkmark{height:var(--_chip-checkmark-size)}:host([type=filter]) .checkmark svg{width:0;height:var(--_chip-checkmark-size);-webkit-transition-property:width;transition-property:width;-webkit-transition-duration:var(--_chip-transition-duration);transition-duration:var(--_chip-transition-duration);-webkit-transition-timing-function:var(--_chip-transition-easing);transition-timing-function:var(--_chip-transition-easing)}:host([type=filter]) .checkmark svg path{stroke:var(--_chip-checkmark-color);-webkit-transition-property:stroke-dashoffset;transition-property:stroke-dashoffset;-webkit-transition-duration:var(--_chip-transition-duration);transition-duration:var(--_chip-transition-duration);-webkit-transition-timing-function:var(--_chip-transition-easing);transition-timing-function:var(--_chip-transition-easing);stroke-width:2px;stroke-dashoffset:29.7833385;stroke-dasharray:29.7833385}:host([type=filter][selected]) .checkmark{-webkit-padding-start:var(--_chip-checkmark-spacing);padding-inline-start:var(--_chip-checkmark-spacing)}:host([type=filter][selected]) .checkmark svg{width:var(--_chip-checkmark-size)}:host([type=filter][selected]) .checkmark svg path{-webkit-transition-delay:var(--_chip-checkmark-transition-delay);transition-delay:var(--_chip-checkmark-transition-delay);stroke-dashoffset:0}:host([type=input]) .trigger{padding-inline:var(--_chip-padding-inline) 0}:host([type=field]) .forge-chip{--_chip-background:var(--_chip-field-background);--_chip-color:var(--_chip-field-color);--_chip-border-color:var(--_chip-field-border-color);--_chip-shape:var(--_chip-field-shape);--_chip-cursor:var(--_chip-field-cursor)}:host([theme=secondary]) .forge-chip{--_chip-color:var(--forge-chip-color, var(--forge-theme-text-high, rgba(0, 0, 0, 0.87)));--_chip-border-color:var(--forge-chip-border-color, var(--forge-theme-secondary, #ffc107))}:host([theme=secondary]:is([type=filter],[type=choice],[type=input])[selected]) .forge-chip{--_chip-background:var(--forge-chip-background, var(--forge-theme-secondary, #ffc107));--_chip-color:var(--forge-chip-color, var(--forge-theme-on-secondary, #000000))}:host([theme=secondary][type=field]) .forge-chip{--_chip-background:var(--forge-chip-background, var(--forge-theme-secondary-container-low, #fff8e1));--_chip-color:var(--forge-chip-color, var(--forge-theme-on-secondary-container-low, #8a6804))}:host([theme=tertiary]) .forge-chip{--_chip-color:var(--forge-chip-color, var(--forge-theme-tertiary, #3d5afe))}:host([theme=tertiary]:is([type=filter],[type=choice],[type=input])[selected]) .forge-chip{--_chip-background:var(--forge-chip-background, var(--forge-theme-tertiary, #3d5afe));--_chip-color:var(--forge-chip-color, var(--forge-theme-on-tertiary, #ffffff))}:host([theme=tertiary][type=field]) .forge-chip{--_chip-background:var(--forge-chip-background, var(--forge-theme-tertiary-container-low, #e8ebff));--_chip-color:var(--forge-chip-color, var(--forge-theme-on-tertiary-container-low, #213189))}:host([theme=success]) .forge-chip{--_chip-color:var(--forge-chip-color, var(--forge-theme-success, #2e7d32))}:host([theme=success]:is([type=filter],[type=choice],[type=input])[selected]) .forge-chip{--_chip-background:var(--forge-chip-background, var(--forge-theme-success, #2e7d32));--_chip-color:var(--forge-chip-color, var(--forge-theme-on-success, #ffffff))}:host([theme=success][type=field]) .forge-chip{--_chip-background:var(--forge-chip-background, var(--forge-theme-success-container-low, #e6efe6));--_chip-color:var(--forge-chip-color, var(--forge-theme-on-success-container-low, #19441b))}:host([theme=warning]) .forge-chip{--_chip-color:var(--forge-chip-color, var(--forge-theme-warning, #d14900))}:host([theme=warning]:is([type=filter],[type=choice],[type=input])[selected]) .forge-chip{--_chip-background:var(--forge-chip-background, var(--forge-theme-warning, #d14900));--_chip-color:var(--forge-chip-color, var(--forge-theme-on-warning, #ffffff))}:host([theme=warning][type=field]) .forge-chip{--_chip-background:var(--forge-chip-background, var(--forge-theme-warning-container-low, #f9e9e0));--_chip-color:var(--forge-chip-color, var(--forge-theme-on-warning-container-low, #712700))}:host([theme=error]) .forge-chip{--_chip-color:var(--forge-chip-color, var(--forge-theme-error, #b00020))}:host([theme=error]:is([type=filter],[type=choice],[type=input])[selected]) .forge-chip{--_chip-background:var(--forge-chip-background, var(--forge-theme-error, #b00020));--_chip-color:var(--forge-chip-color, var(--forge-theme-on-error, #ffffff))}:host([theme=error][type=field]) .forge-chip{--_chip-background:var(--forge-chip-background, var(--forge-theme-error-container-low, #f6e0e4));--_chip-color:var(--forge-chip-color, var(--forge-theme-on-error-container-low, #5f0011))}:host([theme=info]) .forge-chip{--_chip-color:var(--forge-chip-color, var(--forge-theme-info, #1565c0))}:host([theme=info]:is([type=filter],[type=choice],[type=input])[selected]) .forge-chip{--_chip-background:var(--forge-chip-background, var(--forge-theme-info, #1565c0));--_chip-color:var(--forge-chip-color, var(--forge-theme-on-info, #ffffff))}:host([theme=info][type=field]) .forge-chip{--_chip-background:var(--forge-chip-background, var(--forge-theme-info-container-low, #e3edf7));--_chip-color:var(--forge-chip-color, var(--forge-theme-on-info-container-low, #0b3768))}';
+const styles = ':host{display:-webkit-inline-box;display:inline-flex}:host([hidden]){display:none}.forge-chip{--_chip-background:var(--forge-chip-background, transparent);--_chip-color:var(--forge-chip-color, var(--forge-theme-primary, #3f51b5));--_chip-shape:var(--forge-chip-shape, var(--forge-shape-full, 9999px));--_chip-spacing:var(--forge-chip-spacing, var(--forge-spacing-xsmall, 8px));--_chip-height:var(--forge-chip-height, 32px);--_chip-padding-inline:var(--forge-chip-padding-inline, var(--forge-spacing-small, 12px));--_chip-padding-block:var(--forge-chip-padding-block, 0);--_chip-cursor:var(--forge-chip-cursor, pointer);--_chip-icon-font-size:var(--forge-chip-icon-font-size, 1.5rem);--_chip-disabled-opacity:var(--forge-chip-disabled-opacity, 0.38);--_chip-disabled-cursor:var(--forge-chip-disabled-cursor, not-allowed);--_chip-dense-height:var(--forge-chip-dense-height, 24px);--_chip-dense-padding-inline:var(--forge-chip-dense-padding-inline, var(--forge-spacing-xsmall, 8px));--_chip-dense-spacing:var(--forge-chip-dense-spacing, var(--forge-spacing-xxsmall, 4px));--_chip-dense-font-size:var(--forge-chip-dense-font-size, 0.75rem);--_chip-dense-font-weight:var(--forge-chip-dense-font-weight, normal);--_chip-dense-focus-indicator-offset:var(--forge-chip-dense-focus-indicator-offset, var(--forge-spacing-xxxsmall, 2px));--_chip-dense-icon-font-size:var(--forge-chip-dense-icon-font-size, 1.25rem);--_chip-remove-button-spacing:var(--forge-chip-remove-button-spacing, var(--forge-spacing-xsmall, 8px) var(--forge-spacing-xxsmall, 4px));--_chip-remove-button-height-dense:var(--forge-chip-remove-button-height-dense, 18px);--_chip-remove-button-icon-size-dense:var(--forge-chip-remove-button-icon-size-dense, 16px);--_chip-remove-button-spacing-dense:var(--forge-chip-remove-button-spacing-dense, 0 var(--forge-spacing-xxxsmall, 2px));--_chip-selected-background:var(--forge-chip-selected-background, var(--forge-theme-primary, #3f51b5));--_chip-selected-color:var(--forge-chip-selected-color, var(--forge-theme-on-primary, #ffffff));--_chip-invalid-color:var(--forge-chip-invalid-color, var(--forge-theme-error, #b00020));--_chip-invalid-selected-background:var(--forge-chip-invalid-selected-background, var(--forge-theme-error, #b00020));--_chip-invalid-selected-color:var(--forge-chip-invalid-selected-color, var(--forge-theme-on-error, #ffffff));--_chip-border-width:var(--forge-chip-border-width, var(--forge-border-thin, 1px));--_chip-border-style:var(--forge-chip-border-style, solid);--_chip-border-color:var(--forge-chip-border-color, var(--_chip-color));--_chip-field-background:var(--forge-chip-field-background, var(--forge-theme-surface-container-low, #ebebeb));--_chip-field-color:var(--forge-chip-field-color, var(--forge-theme-on-surface-container-low, #000000));--_chip-field-shape:var(--forge-chip-field-shape, var(--forge-shape-medium, 4px));--_chip-field-border-color:var(--forge-chip-field-border-color, transparent);--_chip-field-cursor:var(--forge-chip-field-cursor, default);--_chip-checkmark-size:var(--forge-chip-checkmark-size, 1.25em);--_chip-checkmark-color:var(--forge-chip-checkmark-color, var(--_chip-color));--_chip-checkmark-spacing:var(--forge-chip-checkmark-spacing, var(--forge-spacing-xsmall, 8px));--_chip-avatar-size:var(--forge-chip-avatar-size, 24px);--_chip-avatar-size-dense:var(--forge-chip-avatar-size-dense, 18px);--_chip-avatar-font-size:var(--forge-chip-avatar-font-size, 0.75rem);--_chip-avatar-font-size-dense:var(--forge-chip-avatar-font-size-dense, 0.5rem);--_chip-avatar-spacing:var(--forge-chip-avatar-spacing, calc(var(--forge-spacing-xsmall, 8px) * -1));--_chip-avatar-spacing-dense:var(--forge-chip-avatar-spacing-dense, calc(var(--forge-spacing-xxsmall, 4px) * -1));--_chip-transition-duration:var(--forge-chip-transition-duration, var(--forge-animation-duration-short3, 150ms));--_chip-transition-easing:var(--forge-chip-transition-easing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_chip-checkmark-transition-delay:var(--forge-chip-checkmark-transition-delay, 50ms)}.forge-chip{position:relative;display:-webkit-inline-box;display:inline-flex;-webkit-box-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;height:var(--_chip-height);border-width:var(--_chip-border-width);border-style:var(--_chip-border-style);border-color:var(--_chip-border-color);border-radius:var(--_chip-shape);background:var(--_chip-background);color:var(--_chip-color);-webkit-transition-property:background-color,color;transition-property:background-color,color;-webkit-transition-duration:var(--_chip-transition-duration);transition-duration:var(--_chip-transition-duration);-webkit-transition-timing-function:var(--_chip-transition-easing);transition-timing-function:var(--_chip-transition-easing)}.trigger{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-button-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-button-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-button-font-size-scale, .875)));font-weight:var(--forge-typography-button-font-weight,500);line-height:var(--forge-typography-button-line-height, normal);letter-spacing:var(--forge-typography-button-letter-spacing, .0714285714em);text-transform:var(--forge-typography-button-text-transform,inherit);-webkit-text-decoration:var(--forge-typography-button-text-decoration,inherit);text-decoration:var(--forge-typography-button-text-decoration,inherit);display:-webkit-inline-box;display:inline-flex;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;gap:var(--_chip-spacing);-webkit-box-sizing:border-box;box-sizing:border-box;height:100%;padding-inline:var(--_chip-padding-inline);padding-block:var(--_chip-padding-block);cursor:var(--_chip-cursor);z-index:0;text-decoration:none;border:none;background:inherit;color:inherit;-webkit-tap-highlight-color:transparent;border-radius:var(--_chip-shape);outline:0}.remove{padding-inline:var(--_chip-remove-button-spacing);--forge-icon-button-focus-indicator-color:var(--_chip-color)}forge-focus-indicator{--forge-focus-indicator-color:var(--_chip-color);--forge-focus-indicator-shape:var(--_chip-shape)}forge-state-layer{--forge-state-layer-color:var(--_chip-color)}:host([dense]) .forge-chip{--_chip-height:var(--_chip-dense-height);--_chip-padding-inline:var(--_chip-dense-padding-inline);--_chip-spacing:var(--_chip-dense-spacing)}:host([dense]) .trigger{--forge-typography-font-size:var(--_chip-dense-font-size);--forge-typography-font-weight:var(--_chip-dense-font-weight)}:host([dense]) .remove{--_chip-remove-button-spacing:var(--_chip-remove-button-spacing-dense);--forge-icon-button-density-small-size:var(--_chip-remove-button-height-dense);--forge-icon-button-density-small-icon-size:var(--_chip-remove-button-icon-size-dense)}:host([dense]) forge-focus-indicator{--forge-focus-indicator-outward-offset:var(--_chip-dense-focus-indicator-offset)}:host([dense]) ::slotted(forge-avatar){--_chip-avatar-spacing:var(--_chip-avatar-spacing-dense);--forge-typography-font-size:var(--_chip-avatar-font-size-dense);--forge-avatar-size:var(--_chip-avatar-size-dense)}:host([dense]) ::slotted(:is([slot=start],[slot=leading],[slot=end],[slot=trailing])){--_chip-icon-font-size:var(--_chip-dense-icon-font-size)}:host(:is([type=filter],[type=choice],[type=input])[selected]) .forge-chip{--_chip-background:var(--_chip-selected-background);--_chip-color:var(--_chip-selected-color)}:host(:is([type=filter],[type=choice],[type=input])[selected]) forge-focus-indicator{--forge-focus-indicator-color:var(--_chip-background)}:host([invalid]) .forge-chip{--_chip-color:var(--_chip-invalid-color)}:host([invalid]:is([type=filter],[type=choice],[type=input])[selected]) .forge-chip{--_chip-background:var(--_chip-invalid-selected-background);--_chip-color:var(--_chip-invalid-selected-color)}:host([disabled]:not([href])) .forge-chip{opacity:var(--_chip-disabled-opacity)}:host([disabled]:not([href])) .trigger{cursor:var(--_chip-disabled-cursor)}::slotted(:not(forge-avatar):is([slot=start],[slot=leading],[slot=end],[slot=trailing])){font-size:var(--_chip-icon-font-size)}::slotted(forge-avatar:is([slot=start],[slot=leading])){-webkit-margin-start:var(--_chip-avatar-spacing);margin-inline-start:var(--_chip-avatar-spacing)}::slotted(forge-avatar:is([slot=end],[slot=trailing])){-webkit-margin-end:var(--_chip-avatar-spacing);margin-inline-end:var(--_chip-avatar-spacing)}::slotted(forge-avatar){--forge-typography-font-size:var(--_chip-avatar-font-size);--forge-avatar-size:var(--_chip-avatar-size)}:host([type=filter]) .checkmark{height:var(--_chip-checkmark-size)}:host([type=filter]) .checkmark svg{width:0;height:var(--_chip-checkmark-size);-webkit-transition-property:width;transition-property:width;-webkit-transition-duration:var(--_chip-transition-duration);transition-duration:var(--_chip-transition-duration);-webkit-transition-timing-function:var(--_chip-transition-easing);transition-timing-function:var(--_chip-transition-easing)}:host([type=filter]) .checkmark svg path{stroke:var(--_chip-checkmark-color);-webkit-transition-property:stroke-dashoffset;transition-property:stroke-dashoffset;-webkit-transition-duration:var(--_chip-transition-duration);transition-duration:var(--_chip-transition-duration);-webkit-transition-timing-function:var(--_chip-transition-easing);transition-timing-function:var(--_chip-transition-easing);stroke-width:2px;stroke-dashoffset:29.7833385;stroke-dasharray:29.7833385}:host([type=filter][selected]) .checkmark{-webkit-padding-start:var(--_chip-checkmark-spacing);padding-inline-start:var(--_chip-checkmark-spacing)}:host([type=filter][selected]) .checkmark svg{width:var(--_chip-checkmark-size)}:host([type=filter][selected]) .checkmark svg path{-webkit-transition-delay:var(--_chip-checkmark-transition-delay);transition-delay:var(--_chip-checkmark-transition-delay);stroke-dashoffset:0}:host([type=input]) .trigger{padding-inline:var(--_chip-padding-inline) 0}:host([type=field]) .forge-chip{--_chip-background:var(--_chip-field-background);--_chip-color:var(--_chip-field-color);--_chip-border-color:var(--_chip-field-border-color);--_chip-shape:var(--_chip-field-shape);--_chip-cursor:var(--_chip-field-cursor)}:host([theme=secondary]) .forge-chip{--_chip-color:var(--forge-chip-color, var(--forge-theme-text-high, rgba(0, 0, 0, 0.87)));--_chip-border-color:var(--forge-chip-border-color, var(--forge-theme-secondary, #ffc107))}:host([theme=secondary]:is([type=filter],[type=choice],[type=input])[selected]) .forge-chip{--_chip-background:var(--forge-chip-background, var(--forge-theme-secondary, #ffc107));--_chip-color:var(--forge-chip-color, var(--forge-theme-on-secondary, #000000))}:host([theme=secondary][type=field]) .forge-chip{--_chip-background:var(--forge-chip-background, var(--forge-theme-secondary-container-low, #fff8e1));--_chip-color:var(--forge-chip-color, var(--forge-theme-on-secondary-container-low, #8a6804))}:host([theme=tertiary]) .forge-chip{--_chip-color:var(--forge-chip-color, var(--forge-theme-tertiary, #3d5afe))}:host([theme=tertiary]:is([type=filter],[type=choice],[type=input])[selected]) .forge-chip{--_chip-background:var(--forge-chip-background, var(--forge-theme-tertiary, #3d5afe));--_chip-color:var(--forge-chip-color, var(--forge-theme-on-tertiary, #ffffff))}:host([theme=tertiary][type=field]) .forge-chip{--_chip-background:var(--forge-chip-background, var(--forge-theme-tertiary-container-low, #e8ebff));--_chip-color:var(--forge-chip-color, var(--forge-theme-on-tertiary-container-low, #213189))}:host([theme=success]) .forge-chip{--_chip-color:var(--forge-chip-color, var(--forge-theme-success, #2e7d32))}:host([theme=success]:is([type=filter],[type=choice],[type=input])[selected]) .forge-chip{--_chip-background:var(--forge-chip-background, var(--forge-theme-success, #2e7d32));--_chip-color:var(--forge-chip-color, var(--forge-theme-on-success, #ffffff))}:host([theme=success][type=field]) .forge-chip{--_chip-background:var(--forge-chip-background, var(--forge-theme-success-container-low, #e6efe6));--_chip-color:var(--forge-chip-color, var(--forge-theme-on-success-container-low, #19441b))}:host([theme=warning]) .forge-chip{--_chip-color:var(--forge-chip-color, var(--forge-theme-warning, #d14900))}:host([theme=warning]:is([type=filter],[type=choice],[type=input])[selected]) .forge-chip{--_chip-background:var(--forge-chip-background, var(--forge-theme-warning, #d14900));--_chip-color:var(--forge-chip-color, var(--forge-theme-on-warning, #ffffff))}:host([theme=warning][type=field]) .forge-chip{--_chip-background:var(--forge-chip-background, var(--forge-theme-warning-container-low, #f9e9e0));--_chip-color:var(--forge-chip-color, var(--forge-theme-on-warning-container-low, #712700))}:host([theme=error]) .forge-chip{--_chip-color:var(--forge-chip-color, var(--forge-theme-error, #b00020))}:host([theme=error]:is([type=filter],[type=choice],[type=input])[selected]) .forge-chip{--_chip-background:var(--forge-chip-background, var(--forge-theme-error, #b00020));--_chip-color:var(--forge-chip-color, var(--forge-theme-on-error, #ffffff))}:host([theme=error][type=field]) .forge-chip{--_chip-background:var(--forge-chip-background, var(--forge-theme-error-container-low, #f6e0e4));--_chip-color:var(--forge-chip-color, var(--forge-theme-on-error-container-low, #5f0011))}:host([theme=info]) .forge-chip{--_chip-color:var(--forge-chip-color, var(--forge-theme-info, #1565c0))}:host([theme=info]:is([type=filter],[type=choice],[type=input])[selected]) .forge-chip{--_chip-background:var(--forge-chip-background, var(--forge-theme-info, #1565c0));--_chip-color:var(--forge-chip-color, var(--forge-theme-on-info, #ffffff))}:host([theme=info][type=field]) .forge-chip{--_chip-background:var(--forge-chip-background, var(--forge-theme-info-container-low, #e3edf7));--_chip-color:var(--forge-chip-color, var(--forge-theme-on-info-container-low, #0b3768))}';
 /**
  * @tag forge-chip
  *

package/esm/constants.d.ts

@@ -13,6 +13,8 @@ export declare const canUserHoverElements: boolean;
 export declare const getFormValue: unique symbol;
 /** A method symbol that gets the form state of a form-associated component. */
 export declare const getFormState: unique symbol;
+/** A method symbol that sets the validity of a form-associated component. */
+export declare const setValidity: unique symbol;
 /** A method symbol that gets the validation message of a form-associated component. */
 export declare const getValidationMessage: unique symbol;
 /** A property symbol that references the `ElementInternals` instance of an element. */

package/esm/constants.js

@@ -13,6 +13,8 @@ export const canUserHoverElements = supportsHover();
 export const getFormValue = Symbol('getFormValue');
 /** A method symbol that gets the form state of a form-associated component. */
 export const getFormState = Symbol('getFormState');
+/** A method symbol that sets the validity of a form-associated component. */
+export const setValidity = Symbol('setValidity');
 /** A method symbol that gets the validation message of a form-associated component. */
 export const getValidationMessage = Symbol('getValidityMessage');
 /** A property symbol that references the `ElementInternals` instance of an element. */

package/esm/core/base/base-adapter.d.ts

@@ -17,6 +17,7 @@ export interface IBaseAdapter<T extends HTMLElement = HTMLElement> {
         cancelable?: boolean;
         composed?: boolean;
     }): boolean;
+    /** @deprecated Use `dispatchHostEvent` instead. */
     emitHostEvent(type: string, data?: any, bubble?: boolean, cancelable?: boolean): boolean;
     dispatchHostEvent<U extends Event>(event: U): boolean;
     addHostListener(event: string, callback: (event: Event) => void, options?: boolean | AddEventListenerOptions): void;

package/esm/core/controllers/move-controller.d.ts

@@ -0,0 +1,32 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+export interface IMoveControllerConfig {
+    handleElement: HTMLElement;
+    surfaceElement: HTMLElement;
+    onMoveStart(): boolean;
+    onMove(position: {
+        x: number;
+        y: number;
+    }): boolean;
+    onMoveEnd(): void;
+}
+declare const MoveBase: import("../..").AbstractConstructor<import("../mixins/interactions/moveable/with-moveable").WithMoveableContract> & ObjectConstructor;
+export declare class MoveController extends MoveBase {
+    private _config;
+    constructor(_config: IMoveControllerConfig);
+    destroy(): void;
+    protected _getMoveableBounds(): DOMRect;
+    protected _updatePosition(x: string | null, y: string | null): void;
+    protected _onMoveStart(): boolean;
+    protected _onMove(position: {
+        x: number;
+        y: number;
+    }): boolean;
+    protected _onMoveEnd(): void;
+    private _startMoveListener;
+    private _stopMoveListener;
+}
+export {};

package/esm/core/controllers/move-controller.js

@@ -0,0 +1,40 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { WithMoveable } from '../mixins/interactions/moveable/with-moveable';
+const MoveBase = WithMoveable(Object);
+export class MoveController extends MoveBase {
+    constructor(_config) {
+        super();
+        this._config = _config;
+        this._startMoveListener();
+    }
+    destroy() {
+        this._stopMoveListener();
+        super.stopMoveListener();
+    }
+    _getMoveableBounds() {
+        return this._config.surfaceElement.getBoundingClientRect();
+    }
+    _updatePosition(x, y) {
+        this._config.surfaceElement.style.top = y != null ? y : '';
+        this._config.surfaceElement.style.left = x != null ? x : '';
+    }
+    _onMoveStart() {
+        return this._config.onMoveStart();
+    }
+    _onMove(position) {
+        return this._config.onMove(position);
+    }
+    _onMoveEnd() {
+        this._config.onMoveEnd();
+    }
+    _startMoveListener() {
+        this._config.handleElement.addEventListener('pointerdown', this._movePointerDownListener);
+    }
+    _stopMoveListener() {
+        this._config.handleElement.removeEventListener('pointerdown', this._movePointerDownListener);
+    }
+}

package/esm/core/mixins/interactions/moveable/with-moveable.d.ts

@@ -0,0 +1,30 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { AbstractConstructor, MixinBase } from '../../../../constants';
+export interface IWithMoveableMoveContext {
+    top: number;
+    left: number;
+    height: number;
+    width: number;
+}
+export declare abstract class WithMoveableContract {
+    stopMoveListener(): void;
+    protected _movePointerDownListener: EventListener;
+    protected abstract _getMoveableBounds(): {
+        top: number;
+        left: number;
+        height: number;
+        width: number;
+    };
+    protected abstract _updatePosition(x: string | null, y: string | null): void;
+    protected abstract _onMoveStart(): boolean;
+    protected abstract _onMove(position: {
+        x: number;
+        y: number;
+    }): boolean;
+    protected abstract _onMoveEnd(): void;
+}
+export declare function WithMoveable<TBase extends MixinBase<object>>(base?: TBase): AbstractConstructor<WithMoveableContract> & TBase;

package/esm/core/mixins/interactions/moveable/with-moveable.js

@@ -0,0 +1,131 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { getActiveElement, isNumber, isString } from '@tylertech/forge-core';
+// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+export function WithMoveable(base = class {
+}) {
+    class Moveable extends base {
+        constructor() {
+            super(...arguments);
+            this._isMoving = false;
+            this._activeElement = undefined;
+            this._movePointerDownListener = this._onMoveTargetPointerDown.bind(this);
+            this._movePointerMoveListener = this._onMoveTargetPointerMove.bind(this);
+            this._movePointerUpListener = this._onMoveTargetPointerUp.bind(this);
+        }
+        stopMoveListener() {
+            this._updatePosition(null, null);
+            document.removeEventListener('pointermove', this._movePointerMoveListener);
+            document.removeEventListener('pointerup', this._movePointerUpListener);
+            this._isMoving = false;
+            this._moveContext = undefined;
+            this._lastPosition = undefined;
+            this._activeElement = undefined;
+        }
+        _onMoveTargetPointerDown(evt) {
+            evt.preventDefault();
+            this._captureActiveElement();
+            const bounds = this._getMoveableBounds();
+            this._moveContext = {
+                top: evt.pageY - bounds.top,
+                left: evt.pageX - bounds.left,
+                height: bounds.height,
+                width: bounds.width
+            };
+            document.addEventListener('pointermove', this._movePointerMoveListener);
+            document.addEventListener('pointerup', this._movePointerUpListener);
+        }
+        _onMoveTargetPointerMove(evt) {
+            evt.preventDefault();
+            const position = this._calculateOffsetPosition(evt.pageX, evt.pageY, this._moveContext);
+            // If this is the beginning of the move sequence, we emit the start event (to allow for preventing default) and
+            // then update the surface position if not prevented
+            if (!this._isMoving) {
+                this._isMoving = true;
+                const defaultPrevented = this._onMoveStart();
+                if (defaultPrevented) {
+                    return;
+                }
+            }
+            // Ensure that the surface position stays within the bounds of the screen
+            const newPosition = this._clampPosition(position, this._moveContext);
+            // Only update the position if it actually changed
+            if (!this._lastPosition || newPosition.x !== this._lastPosition.x || newPosition.y !== this._lastPosition.y) {
+                const defaultPrevented = this._onMove(newPosition);
+                if (!defaultPrevented) {
+                    this._lastPosition = Object.assign({}, newPosition);
+                    const newX = this._normalizePositionValue(newPosition.x);
+                    const newY = this._normalizePositionValue(newPosition.y);
+                    this._updatePosition(newX, newY);
+                }
+            }
+        }
+        _onMoveTargetPointerUp(_evt) {
+            if (this._isMoving) {
+                this._onMoveEnd();
+            }
+            this._moveComplete();
+        }
+        _moveComplete() {
+            this._tryRestoreActiveElement();
+            document.removeEventListener('pointermove', this._movePointerMoveListener);
+            document.removeEventListener('pointerup', this._movePointerUpListener);
+            this._lastPosition = undefined;
+            this._moveContext = undefined;
+            this._isMoving = false;
+        }
+        _captureActiveElement() {
+            var _a;
+            this._activeElement = getActiveElement();
+            (_a = this._activeElement) === null || _a === void 0 ? void 0 : _a.blur();
+        }
+        _tryRestoreActiveElement() {
+            var _a;
+            if ((_a = this._activeElement) === null || _a === void 0 ? void 0 : _a.isConnected) {
+                this._activeElement.focus();
+            }
+            this._activeElement = undefined;
+        }
+        _normalizePositionValue(value) {
+            if (isNumber(value)) {
+                return `${value}px`;
+            }
+            else if (isString(value)) {
+                return value;
+            }
+            return null;
+        }
+        _calculateOffsetPosition(pageX, pageY, context) {
+            var _a, _b;
+            return {
+                x: pageX - ((_a = context === null || context === void 0 ? void 0 : context.left) !== null && _a !== void 0 ? _a : 0),
+                y: pageY - ((_b = context === null || context === void 0 ? void 0 : context.top) !== null && _b !== void 0 ? _b : 0)
+            };
+        }
+        _clampPosition({ x, y }, context) {
+            let width = 0;
+            let height = 0;
+            if (context) {
+                width = context.width;
+                height = context.height;
+            }
+            if (x <= 0) {
+                x = 0;
+            }
+            else if (x + width >= window.innerWidth) {
+                x = window.innerWidth - width;
+            }
+            if (y <= 0) {
+                y = 0;
+            }
+            else if (y + height >= window.innerHeight) {
+                y = window.innerHeight - height;
+            }
+            return { x, y };
+        }
+    }
+    return Moveable;
+}

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

@@ -71,4 +71,10 @@ export declare class DismissibleStack<T extends IDismissible> {
      * Checks if an element is requesting to be dismissed.
      */
     isRequestingLightDismiss(el: T): boolean;
+    /**
+     * Checks if an element is the most recent element in the dismissible queue.
+     * @param el The element to check.
+     * @returns
+     */
+    isMostRecent(el: T): boolean;
 }

package/esm/core/utils/dismissible-stack.js

@@ -130,4 +130,13 @@ export class DismissibleStack {
     isRequestingLightDismiss(el) {
         return this._elementsRequestingDismiss.has(el);
     }
+    /**
+     * Checks if an element is the most recent element in the dismissible queue.
+     * @param el The element to check.
+     * @returns
+     */
+    isMostRecent(el) {
+        const elements = Array.from(this._dismissibleElements);
+        return elements[elements.length - 1] === el;
+    }
 }

package/esm/core/utils/feature-detection.d.ts

@@ -21,3 +21,8 @@ export declare function supportsElementInternalsAria(): boolean;
  * @returns {boolean}
  */
 export declare function supportsHover(): boolean;
+/**
+ * Detects if the browser is set to prefer reduced motion.
+ * @returns {boolean}
+ */
+export declare function prefersReducedMotion(): boolean;

package/esm/core/utils/feature-detection.js

@@ -31,3 +31,10 @@ export function supportsHover() {
     // return window.matchMedia('(hover: hover)').matches;
     return !Platform.isMobile;
 }
+/**
+ * Detects if the browser is set to prefer reduced motion.
+ * @returns {boolean}
+ */
+export function prefersReducedMotion() {
+    return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+}

package/esm/core/utils/index.d.ts

@@ -4,6 +4,8 @@
  * License: Apache-2.0
  */
 export * from './date-utils';
+export * from './deferred';
+export * from './dismissible-stack';
 export * from './event-utils';
 export * from './feature-detection';
 export * from './form-utils';

package/esm/core/utils/index.js

@@ -4,6 +4,8 @@
  * License: Apache-2.0
  */
 export * from './date-utils';
+export * from './deferred';
+export * from './dismissible-stack';
 export * from './event-utils';
 export * from './feature-detection';
 export * from './form-utils';

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

@@ -6,7 +6,7 @@
 /**
  * Creates an SVG element from a string.
  */
-export declare function createSvgFromString(svgContent: string, defaultViewBox?: string): SVGSVGElement | null;
+export declare function createSvgFromString(svgContent: string, defaultViewBox?: string): SVGElement | null;
 /**
  * Determines if the provided element is a safe SVG to use.
  * @param el The element reference to test.

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

@@ -16,7 +16,7 @@ export function createSvgFromString(svgContent, defaultViewBox) {
         }
     }
     const svgElm = div.firstElementChild;
-    if (svgElm && svgElm.nodeName.toLowerCase() === 'svg' && isSafeSvg(svgElm)) {
+    if ((svgElm === null || svgElm === void 0 ? void 0 : svgElm.nodeName.toLowerCase()) === 'svg' && isSafeSvg(svgElm)) {
         // Check if a custom viewbox value was provided and use that if so
         if (defaultViewBox) {
             svgElm.setAttribute('viewBox', defaultViewBox);
@@ -41,7 +41,7 @@ export function isSafeSvg(el) {
         return true;
     }
     // Validate no <script> tags exist
-    if (el.nodeName.toLowerCase() === 'script') {
+    if (el.nodeName.toLowerCase() === 'script' || el.querySelector('script')) {
         return false;
     }
     // Ensure there are no inline listeners

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

@@ -19,8 +19,6 @@ declare global {
     }
 }
 /**
- * The custom element class behind the `<forge-date-picker>` element.
- *
  * @tag forge-date-picker
  */
 export declare class DatePickerComponent extends BaseDatePickerComponent<Date | string | undefined, Date, DatePickerFoundation> implements IDatePickerComponent {

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

@@ -9,7 +9,7 @@ import { tylIconInsertInvitation } from '@tylertech/tyler-icons/standard';
 import { CalendarComponent } from '../calendar';
 import { IconComponent, IconRegistry } from '../icon';
 import { IconButtonComponent } from '../icon-button';
-import { PopupComponent } from '../popup';
+import { PopoverComponent } from '../popover';
 import { BaseDatePickerComponent } from './base/base-date-picker';
 import { BASE_DATE_PICKER_CONSTANTS } from './base/base-date-picker-constants';
 import { DatePickerAdapter } from './date-picker-adapter';
@@ -18,8 +18,6 @@ import { DatePickerFoundation } from './date-picker-foundation';
 const template = '<template><slot></slot></template>';
 const styles = ':host{display:block}:host([hidden]){display:none}';
 /**
- * The custom element class behind the `<forge-date-picker>` element.
- *
  * @tag forge-date-picker
  */
 let DatePickerComponent = class DatePickerComponent extends BaseDatePickerComponent {
@@ -48,7 +46,7 @@ DatePickerComponent = __decorate([
     CustomElement({
         name: DATE_PICKER_CONSTANTS.elementName,
         dependencies: [
-            PopupComponent,
+            PopoverComponent,
             CalendarComponent,
             IconButtonComponent,
             IconComponent