@tylertech/forge 2.17.0 → 2.18.1

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

@@ -10,8 +10,8 @@ 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\"><slot name=\"leading\"></slot><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><slot name=\"trailing\"></slot><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:#3f51b5;border-color:var(--mdc-theme-primary,#3f51b5)}.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,.12);border-color:var(--mdc-theme-text-disabled-on-background,rgba(0,0,0,.12))}.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:#3f51b5;border-color:var(--mdc-theme-primary,#3f51b5);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:#3f51b5;color:var(--mdc-theme-primary,#3f51b5)}.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:#3f51b5;color:var(--mdc-theme-primary,#3f51b5)}.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:#3f51b5;border-left-color:var(--mdc-theme-primary,#3f51b5)}.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,.12);border-left-color:var(--mdc-theme-text-disabled-on-background,rgba(0,0,0,.12))}.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 ::slotted([slot=leading]){grid-column-start:leading;grid-column-end:input;align-self:flex-start}.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 ::slotted([slot=trailing]){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}';
+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:#3f51b5;border-color:var(--mdc-theme-primary,#3f51b5)}.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,.12);border-color:var(--mdc-theme-text-disabled-on-background,rgba(0,0,0,.12))}.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:#3f51b5;border-color:var(--mdc-theme-primary,#3f51b5);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:#3f51b5;color:var(--mdc-theme-primary,#3f51b5)}.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:#3f51b5;color:var(--mdc-theme-primary,#3f51b5)}.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:#3f51b5;border-left-color:var(--mdc-theme-primary,#3f51b5)}.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,.12);border-left-color:var(--mdc-theme-text-disabled-on-background,rgba(0,0,0,.12))}.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}';
 /**
  * The web component class behind the `<forge-chip-field>` custom element.
  *

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

@@ -92,10 +92,10 @@ export class BaseDatePickerFoundation {
         this._handleInput(this._adapter.getInputValue());
     }
     _onInputFocus(evt) {
-        this._adapter.selectInputText();
         if (this.masked && this.showMaskFormat) {
             this._applyMask();
         }
+        this._adapter.selectInputText();
     }
     _onInputBlur(evt) {
         if (this.masked && this.showMaskFormat) {

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

@@ -271,11 +271,11 @@ export class DateRangePickerFoundation extends BaseDatePickerFoundation {
         }
     }
     _onToInputFocus() {
-        this._adapter.selectToInputText();
         if (this.masked && this._showMaskFormat) {
             this._initializeMask();
             this._initializeToMask();
         }
+        this._adapter.selectToInputText();
     }
     _onToInputBlur(evt) {
         if (this._masked && !this._adapter.isInputFocused(evt.relatedTarget)) {
@@ -288,11 +288,11 @@ export class DateRangePickerFoundation extends BaseDatePickerFoundation {
         }
     }
     _onInputFocus(evt) {
-        this._adapter.selectInputText();
         if (this.masked && this._showMaskFormat) {
             this._initializeMask();
             this._initializeToMask();
         }
+        this._adapter.selectInputText();
     }
     _onInputBlur(evt) {
         if (this.masked && !this._adapter.isInputFocused(evt.relatedTarget)) {

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

@@ -6,7 +6,6 @@
 import { IIconComponent } from './icon';
 import { BaseAdapter, IBaseAdapter } from '../core';
 export interface IIconAdapter extends IBaseAdapter {
-    initialize(): void;
     canLazyLoad(): boolean;
     observeVisibility(listener: () => void): void;
     destroyVisibilityObserver(): void;
@@ -15,7 +14,6 @@ export interface IIconAdapter extends IBaseAdapter {
 export declare class IconAdapter extends BaseAdapter<IIconComponent> implements IIconAdapter {
     private _observer;
     constructor(component: IIconComponent);
-    initialize(): void;
     canLazyLoad(): boolean;
     observeVisibility(listener: () => void): void;
     destroyVisibilityObserver(): void;

package/esm/icon/icon-adapter.js

@@ -9,11 +9,6 @@ export class IconAdapter extends BaseAdapter {
     constructor(component) {
         super(component);
     }
-    initialize() {
-        if (!this._component.hasAttribute('aria-hidden')) {
-            this._component.setAttribute('aria-hidden', 'true');
-        }
-    }
     canLazyLoad() {
         return !!window.IntersectionObserver;
     }
@@ -33,9 +28,13 @@ export class IconAdapter extends BaseAdapter {
         }
     }
     setContent(content) {
+        var _a;
         const shadowRoot = this._component.shadowRoot;
         const styleTag = shadowRoot.querySelector('style');
         shadowRoot.innerHTML = content;
+        if (content) {
+            (_a = shadowRoot.firstElementChild) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-hidden', 'true');
+        }
         if (styleTag) {
             shadowRoot.appendChild(styleTag);
         }

package/esm/icon/icon-foundation.js

@@ -13,7 +13,6 @@ export class IconFoundation {
         this._lazyListener = () => this._loadIcon();
     }
     initialize() {
-        this._adapter.initialize();
         this._applyIcon();
     }
     disconnect() {

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

@@ -23,6 +23,7 @@ export declare const KEYBOARD_SHORTCUT_CONSTANTS: {
     };
 };
 export declare const textInputTypes: string[];
+export declare type KeyboardShortcutActivateCallback = (event: KeyboardEvent) => void;
 export interface IKeyCombination {
     key: string;
     modifier?: string;

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

@@ -5,6 +5,7 @@
  */
 import { ICustomElementFoundation } from '@tylertech/forge-core';
 import { IKeyboardShortcutAdapter } from './keyboard-shortcut-adapter';
+import { KeyboardShortcutActivateCallback } from './keyboard-shortcut-constants';
 export interface IKeyboardShortcutFoundation extends ICustomElementFoundation {
     key: string | null | undefined;
     target: string;
@@ -14,6 +15,7 @@ export interface IKeyboardShortcutFoundation extends ICustomElementFoundation {
     capture: boolean;
     useCode: boolean;
     disabled: boolean;
+    activateCallback: KeyboardShortcutActivateCallback | null | undefined;
 }
 export declare class KeyboardShortcutFoundation implements IKeyboardShortcutFoundation {
     private _adapter;
@@ -25,6 +27,7 @@ export declare class KeyboardShortcutFoundation implements IKeyboardShortcutFoun
     private _capture;
     private _useCode;
     private _disabled;
+    private _activateCallback;
     private _keyCombinations;
     private _keyDownListener;
     constructor(_adapter: IKeyboardShortcutAdapter);
@@ -60,4 +63,7 @@ export declare class KeyboardShortcutFoundation implements IKeyboardShortcutFoun
     /** Gets/sets whether the event will be emitted. */
     get disabled(): boolean;
     set disabled(value: boolean);
+    /** Gets/sets the activation callback. */
+    get activateCallback(): KeyboardShortcutActivateCallback | null | undefined;
+    set activateCallback(value: KeyboardShortcutActivateCallback | null | undefined);
 }

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

@@ -48,6 +48,7 @@ export class KeyboardShortcutFoundation {
     }
     _onKeyDown(evt) {
         // Here we may check if the target element is disabled, but disabled elements typically can't receive focus anyway
+        var _a;
         // Ignore the event if it originates from a text field
         // TODO: bypass this and allow it if a modifier key is used?
         if (!this._allowWhileTyping && elementAcceptsTextInput(evt.target)) {
@@ -58,6 +59,7 @@ export class KeyboardShortcutFoundation {
                 evt.preventDefault();
             }
             this._adapter.emitHostEvent(KEYBOARD_SHORTCUT_CONSTANTS.events.ACTIVATE, evt);
+            (_a = this._activateCallback) === null || _a === void 0 ? void 0 : _a.call(null, evt);
         }
     }
     /** Sets the key combinations. */
@@ -161,4 +163,11 @@ export class KeyboardShortcutFoundation {
             }
         }
     }
+    /** Gets/sets the activation callback. */
+    get activateCallback() {
+        return this._activateCallback;
+    }
+    set activateCallback(value) {
+        this._activateCallback = value;
+    }
 }

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

@@ -3,6 +3,7 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
+import { KeyboardShortcutActivateCallback } from './keyboard-shortcut-constants';
 import { BaseComponent, IBaseComponent } from '../core/base/base-component';
 export interface IKeyboardShortcutComponent extends IBaseComponent {
     key: string | null | undefined;
@@ -14,6 +15,7 @@ export interface IKeyboardShortcutComponent extends IBaseComponent {
     capture: boolean;
     useCode: boolean;
     disabled: boolean;
+    activateCallback: KeyboardShortcutActivateCallback | null | undefined;
 }
 declare global {
     interface HTMLElementTagNameMap {
@@ -54,4 +56,6 @@ export declare class KeyboardShortcutComponent extends BaseComponent implements
     useCode: boolean;
     /** Gets/sets whether the callback will be called. */
     disabled: boolean;
+    /** Gets/sets whether the activation callback. */
+    activateCallback: KeyboardShortcutActivateCallback | null | undefined;
 }

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

@@ -97,6 +97,9 @@ __decorate([
 __decorate([
     FoundationProperty()
 ], KeyboardShortcutComponent.prototype, "disabled", void 0);
+__decorate([
+    FoundationProperty()
+], KeyboardShortcutComponent.prototype, "activateCallback", void 0);
 KeyboardShortcutComponent = __decorate([
     CustomElement({
         name: KEYBOARD_SHORTCUT_CONSTANTS.elementName

package/esm/list-dropdown/list-dropdown-constants.d.ts

@@ -3,6 +3,7 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
+import { IIconComponent } from '../icon';
 import { IPopupPosition, PopupPlacement } from '../popup';
 export declare const LIST_DROPDOWN_CONSTANTS: {
     attributes: {
@@ -29,15 +30,18 @@ export declare type ListDropdownIconType = 'font' | 'component';
 export interface IBaseListDropdownOption<T = any> {
     value: T;
     label: string;
+    secondaryLabel?: string;
     disabled?: boolean;
     divider?: boolean;
     optionClass?: string | string[];
     leadingIcon?: string;
     leadingIconClass?: string;
     leadingIconType?: ListDropdownIconType;
+    leadingIconComponentProps?: Partial<IIconComponent>;
     trailingIcon?: string;
     trailingIconClass?: string;
     trailingIconType?: ListDropdownIconType;
+    trailingIconComponentProps?: Partial<IIconComponent>;
     leadingBuilder?: () => HTMLElement;
     trailingBuilder?: () => HTMLElement;
 }

package/esm/list-dropdown/list-dropdown-utils.js

@@ -204,6 +204,14 @@ export function createListItems(config, listElement, options, startIndex = 0, re
                     }
                 }
             }
+            // Check for secondary (subtitle) text
+            if (option.secondaryLabel) {
+                const secondaryLabelElement = document.createElement('span');
+                secondaryLabelElement.slot = 'subtitle';
+                secondaryLabelElement.textContent = option.secondaryLabel;
+                listItemElement.twoLine = true;
+                listItemElement.appendChild(secondaryLabelElement);
+            }
             // If multiple selections are enabled then we need to create and append a leading checkbox element
             if (config.multiple) {
                 const checkboxElement = createCheckboxElement(isSelected);
@@ -225,7 +233,7 @@ export function createListItems(config, listElement, options, startIndex = 0, re
                 }
             }
             else if (option.leadingIcon) {
-                const leadingIconElement = createIconElement(option.leadingIconType, option.leadingIcon, option.leadingIconClass || config.iconClass);
+                const leadingIconElement = createIconElement(option.leadingIconType, option.leadingIcon, option.leadingIconClass || config.iconClass, option.leadingIconComponentProps);
                 leadingIconElement.slot = 'leading';
                 listItemElement.appendChild(leadingIconElement);
             }
@@ -238,7 +246,7 @@ export function createListItems(config, listElement, options, startIndex = 0, re
                 }
             }
             else if (option.trailingIcon) {
-                const trailingIconElement = createIconElement(option.trailingIconType, option.trailingIcon, option.trailingIconClass || config.iconClass);
+                const trailingIconElement = createIconElement(option.trailingIconType, option.trailingIcon, option.trailingIconClass || config.iconClass, option.trailingIconComponentProps);
                 trailingIconElement.slot = 'trailing';
                 listItemElement.appendChild(trailingIconElement);
             }
@@ -292,7 +300,7 @@ function createDivider() {
     divider.setAttribute('aria-hidden', 'true');
     return divider;
 }
-function createIconElement(type = 'font', iconName, iconClass) {
+function createIconElement(type = 'font', iconName, iconClass, componentProps) {
     if (type === 'component') {
         const icon = document.createElement('forge-icon');
         if (iconClass) {
@@ -300,6 +308,9 @@ function createIconElement(type = 'font', iconName, iconClass) {
         }
         icon.setAttribute('aria-hidden', 'true');
         icon.name = iconName;
+        if (componentProps) {
+            Object.assign(icon, componentProps);
+        }
         return icon;
     }
     const iconElement = document.createElement('i');

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

@@ -93,4 +93,6 @@ export declare class PaginatorAdapter extends BaseAdapter<IPaginatorComponent> i
     enableLastPageButton(): void;
     setAlternative(alternative: boolean): void;
     setAlignment(alignment: PaginatorAlternativeAlignment): void;
+    private _handleFocusMove;
+    private _tryFocus;
 }

package/esm/paginator/paginator-adapter.js

@@ -87,24 +87,28 @@ export class PaginatorAdapter extends BaseAdapter {
         this._lastPageButton.removeEventListener('click', listener);
     }
     disableFirstPageButton() {
+        this._handleFocusMove('first');
         this._firstPageButton.setAttribute('disabled', 'disabled');
     }
     enableFirstPageButton() {
         this._firstPageButton.removeAttribute('disabled');
     }
     disablePreviousPageButton() {
+        this._handleFocusMove('previous');
         this._previousPageButton.setAttribute('disabled', 'disabled');
     }
     enablePreviousPageButton() {
         this._previousPageButton.removeAttribute('disabled');
     }
     disableNextPageButton() {
+        this._handleFocusMove('next');
         this._nextPageButton.setAttribute('disabled', 'disabled');
     }
     enableNextPageButton() {
         this._nextPageButton.removeAttribute('disabled');
     }
     disablePageSizeSelect() {
+        this._handleFocusMove('page-size');
         this._pageSizeSelect.setAttribute('disabled', 'disabled');
     }
     enablePageSizeSelect() {
@@ -119,6 +123,7 @@ export class PaginatorAdapter extends BaseAdapter {
         }
     }
     disableLastPageButton() {
+        this._handleFocusMove('last');
         this._lastPageButton.setAttribute('disabled', 'disabled');
     }
     enableLastPageButton() {
@@ -146,4 +151,56 @@ export class PaginatorAdapter extends BaseAdapter {
                 break;
         }
     }
+    _handleFocusMove(from) {
+        switch (from) {
+            case 'first':
+                this._tryFocus([
+                    this._nextPageButton,
+                    this._lastPageButton,
+                    this._previousPageButton,
+                    this._pageSizeSelect
+                ]);
+                break;
+            case 'last':
+                this._tryFocus([
+                    this._previousPageButton,
+                    this._firstPageButton,
+                    this._nextPageButton,
+                    this._pageSizeSelect
+                ]);
+                break;
+            case 'previous':
+                this._tryFocus([
+                    this._nextPageButton,
+                    this._lastPageButton,
+                    this._firstPageButton,
+                    this._pageSizeSelect
+                ]);
+                break;
+            case 'next':
+                this._tryFocus([
+                    this._previousPageButton,
+                    this._firstPageButton,
+                    this._lastPageButton,
+                    this._pageSizeSelect
+                ]);
+                break;
+            case 'page-size':
+                this._tryFocus([
+                    this._nextPageButton,
+                    this._lastPageButton,
+                    this._firstPageButton,
+                    this._previousPageButton
+                ]);
+                break;
+        }
+    }
+    _tryFocus(elements) {
+        for (const el of elements) {
+            if (el && el.isConnected && !el.disabled) {
+                el.focus();
+                return;
+            }
+        }
+    }
 }

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

@@ -46,6 +46,7 @@ export class BaseSelectAdapter extends BaseAdapter {
             return {
                 // eslint-disable-next-line @typescript-eslint/no-extra-parens
                 label: o.hasAttribute(OPTION_CONSTANTS.attributes.LABEL) ? o.getAttribute(OPTION_CONSTANTS.attributes.LABEL) : (isDefined(o.label) ? o.label : o.innerText),
+                secondaryLabel: o.hasAttribute(OPTION_CONSTANTS.attributes.SECONDARY_LABEL) ? o.getAttribute(OPTION_CONSTANTS.attributes.SECONDARY_LABEL) : isDefined(o.secondaryLabel) ? o.secondaryLabel : undefined,
                 value: o.hasAttribute(OPTION_CONSTANTS.attributes.VALUE) ? o.getAttribute(OPTION_CONSTANTS.attributes.VALUE) : o.value,
                 disabled: o.hasAttribute(OPTION_CONSTANTS.attributes.DISABLED),
                 divider: o.hasAttribute(OPTION_CONSTANTS.attributes.DIVIDER),
@@ -53,9 +54,11 @@ export class BaseSelectAdapter extends BaseAdapter {
                 leadingIcon: o.hasAttribute(OPTION_CONSTANTS.attributes.LEADING_ICON) ? o.getAttribute(OPTION_CONSTANTS.attributes.LEADING_ICON) : o.leadingIcon,
                 leadingIconClass: o.hasAttribute(OPTION_CONSTANTS.attributes.LEADING_ICON_CLASS) ? o.getAttribute(OPTION_CONSTANTS.attributes.LEADING_ICON_CLASS) : o.leadingIconClass,
                 leadingIconType: o.hasAttribute(OPTION_CONSTANTS.attributes.LEADING_ICON_TYPE) ? o.getAttribute(OPTION_CONSTANTS.attributes.LEADING_ICON_TYPE) : o.leadingIconType,
+                leadingIconComponentProps: o.leadingIconComponentProps,
                 trailingIcon: o.hasAttribute(OPTION_CONSTANTS.attributes.TRAILING_ICON) ? o.getAttribute(OPTION_CONSTANTS.attributes.TRAILING_ICON) : o.trailingIcon,
                 trailingIconClass: o.hasAttribute(OPTION_CONSTANTS.attributes.TRAILING_ICON_CLASS) ? o.getAttribute(OPTION_CONSTANTS.attributes.TRAILING_ICON_CLASS) : o.trailingIconClass,
                 trailingIconType: o.hasAttribute(OPTION_CONSTANTS.attributes.TRAILING_ICON_TYPE) ? o.getAttribute(OPTION_CONSTANTS.attributes.TRAILING_ICON_TYPE) : o.trailingIconType,
+                trailingIconComponentProps: o.trailingIconComponentProps,
                 leadingBuilder: o.leadingBuilder,
                 trailingBuilder: o.trailingBuilder
             };

package/esm/select/option/option-constants.d.ts

@@ -9,6 +9,7 @@ export declare const OPTION_CONSTANTS: {
         DISABLED: string;
         DIVIDER: string;
         LABEL: string;
+        SECONDARY_LABEL: string;
         LEADING_ICON_CLASS: string;
         LEADING_ICON_TYPE: string;
         LEADING_ICON: string;

package/esm/select/option/option-constants.js

@@ -9,6 +9,7 @@ const attributes = {
     DISABLED: 'disabled',
     DIVIDER: 'divider',
     LABEL: 'label',
+    SECONDARY_LABEL: 'secondary-label',
     LEADING_ICON_CLASS: 'leading-icon-class',
     LEADING_ICON_TYPE: 'leading-icon-type',
     LEADING_ICON: 'leading-icon',

package/esm/select/option/option-foundation.d.ts

@@ -4,6 +4,7 @@
  * License: Apache-2.0
  */
 import { ICustomElementFoundation } from '@tylertech/forge-core';
+import { IIconComponent } from '../../icon';
 import { IBaseListDropdownOption, ListDropdownIconType } from '../../list-dropdown/list-dropdown-constants';
 import { IOptionAdapter } from './option-adapter';
 export interface IOptionFoundation extends ICustomElementFoundation, Required<IBaseListDropdownOption> {
@@ -13,15 +14,18 @@ export declare class OptionFoundation implements IOptionFoundation {
     private _adapter;
     private _value;
     private _label;
+    private _secondaryLabel;
     private _disabled;
     private _divider;
     private _optionClass;
     private _leadingIcon;
     private _leadingIconClass;
     private _leadingIconType;
+    private _leadingIconComponentProps;
     private _trailingIcon;
     private _trailingIconClass;
     private _trailingIconType;
+    private _trailingIconComponentProps;
     private _leadingBuilder;
     private _trailingBuilder;
     constructor(_adapter: IOptionAdapter);
@@ -31,6 +35,9 @@ export declare class OptionFoundation implements IOptionFoundation {
     /** Gets/sets the label of this option. */
     get label(): string;
     set label(value: string);
+    /** Gets/sets the secondary label of this option. */
+    get secondaryLabel(): string;
+    set secondaryLabel(value: string);
     /** Gets/sets the disabled status of this option. */
     get disabled(): boolean;
     set disabled(value: boolean);
@@ -49,6 +56,9 @@ export declare class OptionFoundation implements IOptionFoundation {
     /** Gets/sets the leading icon type of this option. */
     get leadingIconType(): ListDropdownIconType;
     set leadingIconType(value: ListDropdownIconType);
+    /** Gets/sets the props on the leading icon component. */
+    get leadingIconComponentProps(): Partial<IIconComponent>;
+    set leadingIconComponentProps(value: Partial<IIconComponent>);
     /** Gets/sets the trailing icon of this option. */
     get trailingIcon(): string;
     set trailingIcon(value: string);
@@ -58,6 +68,9 @@ export declare class OptionFoundation implements IOptionFoundation {
     /** Gets/sets the trailing icon type of this option. */
     get trailingIconType(): ListDropdownIconType;
     set trailingIconType(value: ListDropdownIconType);
+    /** Gets/sets the props on the trailing icon component. */
+    get trailingIconComponentProps(): Partial<IIconComponent>;
+    set trailingIconComponentProps(value: Partial<IIconComponent>);
     /** Gets/sets the leading builder of this option. */
     get leadingBuilder(): (() => HTMLElement);
     set leadingBuilder(value: (() => HTMLElement));

package/esm/select/option/option-foundation.js

@@ -32,6 +32,16 @@ export class OptionFoundation {
             this._adapter.toggleHostAttribute(OPTION_CONSTANTS.attributes.LABEL, !!this._label, this._label);
         }
     }
+    /** Gets/sets the secondary label of this option. */
+    get secondaryLabel() {
+        return this._secondaryLabel;
+    }
+    set secondaryLabel(value) {
+        if (this._secondaryLabel !== value) {
+            this._secondaryLabel = value;
+            this._adapter.toggleHostAttribute(OPTION_CONSTANTS.attributes.SECONDARY_LABEL, !!this._secondaryLabel, this._secondaryLabel);
+        }
+    }
     /** Gets/sets the disabled status of this option. */
     get disabled() {
         return this._disabled;
@@ -99,6 +109,15 @@ export class OptionFoundation {
             this._adapter.toggleHostAttribute(OPTION_CONSTANTS.attributes.LEADING_ICON_TYPE, !!this._leadingIconType, this._leadingIconType);
         }
     }
+    /** Gets/sets the props on the leading icon component. */
+    get leadingIconComponentProps() {
+        return this._leadingIconComponentProps;
+    }
+    set leadingIconComponentProps(value) {
+        if (this._leadingIconComponentProps !== value) {
+            this._leadingIconComponentProps = value;
+        }
+    }
     /** Gets/sets the trailing icon of this option. */
     get trailingIcon() {
         return this._trailingIcon;
@@ -129,6 +148,15 @@ export class OptionFoundation {
             this._adapter.toggleHostAttribute(OPTION_CONSTANTS.attributes.TRAILING_ICON_TYPE, !!this._trailingIconType, this._trailingIconType);
         }
     }
+    /** Gets/sets the props on the trailing icon component. */
+    get trailingIconComponentProps() {
+        return this._trailingIconComponentProps;
+    }
+    set trailingIconComponentProps(value) {
+        if (this._trailingIconComponentProps !== value) {
+            this._trailingIconComponentProps = value;
+        }
+    }
     /** Gets/sets the leading builder of this option. */
     get leadingBuilder() {
         return this._leadingBuilder;