@tylertech/forge 3.0.0-next.12 → 3.0.0-next.14

package/esm/chips/chip/chip.js

@@ -12,7 +12,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\"><slot name=\"leading\" class=\"forge-chip__leading\"></slot><div role=\"button\" tabindex=\"0\" class=\"forge-chip__content\" part=\"content\"><slot></slot></div><slot name=\"trailing\"></slot></div></template>';
-const styles = '@-webkit-keyframes mdc-ripple-fg-radius-in{from{-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1);-webkit-transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1);transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1)}to{-webkit-transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1));transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}}@keyframes mdc-ripple-fg-radius-in{from{-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1);-webkit-transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1);transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1)}to{-webkit-transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1));transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}}@-webkit-keyframes mdc-ripple-fg-opacity-in{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:0}to{opacity:var(--mdc-ripple-fg-opacity, 0)}}@keyframes mdc-ripple-fg-opacity-in{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:0}to{opacity:var(--mdc-ripple-fg-opacity, 0)}}@-webkit-keyframes mdc-ripple-fg-opacity-out{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:var(--mdc-ripple-fg-opacity, 0)}to{opacity:0}}@keyframes mdc-ripple-fg-opacity-out{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:var(--mdc-ripple-fg-opacity, 0)}to{opacity:0}}.mdc-ripple-surface{--mdc-ripple-fg-size:0;--mdc-ripple-left:0;--mdc-ripple-top:0;--mdc-ripple-fg-scale:1;--mdc-ripple-fg-translate-end:0;--mdc-ripple-fg-translate-start:0;-webkit-tap-highlight-color:transparent;will-change:transform,opacity;position:relative;outline:0;overflow:hidden}.mdc-ripple-surface::after,.mdc-ripple-surface::before{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:\"\"}.mdc-ripple-surface::before{-webkit-transition:opacity 15ms linear,background-color 15ms linear;transition:opacity 15ms linear,background-color 15ms linear;z-index:1;z-index:var(--mdc-ripple-z-index,1)}.mdc-ripple-surface::after{z-index:0;z-index:var(--mdc-ripple-z-index,0)}.mdc-ripple-surface.mdc-ripple-upgraded::before{-webkit-transform:scale(var(--mdc-ripple-fg-scale,1));transform:scale(var(--mdc-ripple-fg-scale,1))}.mdc-ripple-surface.mdc-ripple-upgraded::after{top:0;left:0;-webkit-transform:scale(0);transform:scale(0);-webkit-transform-origin:center center;transform-origin:center center}.mdc-ripple-surface.mdc-ripple-upgraded--unbounded::after{top:var(--mdc-ripple-top,0);left:var(--mdc-ripple-left,0)}.mdc-ripple-surface.mdc-ripple-upgraded--foreground-activation::after{-webkit-animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards;animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards}.mdc-ripple-surface.mdc-ripple-upgraded--foreground-deactivation::after{-webkit-animation:mdc-ripple-fg-opacity-out 150ms;animation:mdc-ripple-fg-opacity-out 150ms;-webkit-transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1));transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}.mdc-ripple-surface::after,.mdc-ripple-surface::before{top:calc(50% - 100%);left:calc(50% - 100%);width:200%;height:200%}.mdc-ripple-surface.mdc-ripple-upgraded::after{width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.mdc-ripple-surface[data-mdc-ripple-is-unbounded],.mdc-ripple-upgraded--unbounded{overflow:visible}.mdc-ripple-surface[data-mdc-ripple-is-unbounded]::after,.mdc-ripple-surface[data-mdc-ripple-is-unbounded]::before,.mdc-ripple-upgraded--unbounded::after,.mdc-ripple-upgraded--unbounded::before{top:calc(50% - 50%);left:calc(50% - 50%);width:100%;height:100%}.mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::after,.mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::before,.mdc-ripple-upgraded--unbounded.mdc-ripple-upgraded::after,.mdc-ripple-upgraded--unbounded.mdc-ripple-upgraded::before{top:var(--mdc-ripple-top,calc(50% - 50%));left:var(--mdc-ripple-left,calc(50% - 50%));width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::after,.mdc-ripple-upgraded--unbounded.mdc-ripple-upgraded::after{width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.mdc-ripple-surface::after,.mdc-ripple-surface::before{background-color:#000;background-color:var(--mdc-ripple-color,#000)}.mdc-ripple-surface.mdc-ripple-surface--hover::before,.mdc-ripple-surface:hover::before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity, .04)}.mdc-ripple-surface.mdc-ripple-upgraded--background-focused::before,.mdc-ripple-surface:not(.mdc-ripple-upgraded):focus::before{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity, .12)}.mdc-ripple-surface:not(.mdc-ripple-upgraded)::after{-webkit-transition:opacity 150ms linear;transition:opacity 150ms linear}.mdc-ripple-surface:not(.mdc-ripple-upgraded):active::after{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity, .12)}.mdc-ripple-surface.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.12)}.mdc-ripple-surface::after,.mdc-ripple-surface::before{--mdc-ripple-color:var(--mdc-theme-on-surface)}.forge-chip{--mdc-ripple-fg-size:0;--mdc-ripple-left:0;--mdc-ripple-top:0;--mdc-ripple-fg-scale:1;--mdc-ripple-fg-translate-end:0;--mdc-ripple-fg-translate-start:0;-webkit-tap-highlight-color:transparent;will-change:transform,opacity;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-button-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:.875rem;font-size:var(--mdc-typography-button-font-size, .875rem);line-height:2.25rem;line-height:var(--mdc-typography-button-line-height, 2.25rem);font-weight:500;font-weight:var(--mdc-typography-button-font-weight,500);letter-spacing:.0892857143em;letter-spacing:var(--mdc-typography-button-letter-spacing, .0892857143em);text-decoration:none;-webkit-text-decoration:var(--mdc-typography-button-text-decoration,none);text-decoration:var(--mdc-typography-button-text-decoration,none);text-transform:uppercase;text-transform:var(--mdc-typography-button-text-transform,uppercase);position:relative;display:-webkit-inline-box;display:inline-flex;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;-webkit-box-sizing:border-box;box-sizing:border-box;min-width:64px;border:none;outline:0;line-height:inherit;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-appearance:none;overflow:visible;vertical-align:middle;background:0 0;border-radius:4px;border-radius:var(--mdc-shape-small,4px);height:36px;text-transform:none;box-sizing:border-box;overflow:hidden;border-style:solid;-webkit-transition:border 280ms cubic-bezier(.4, 0, .2, 1);transition:border 280ms cubic-bezier(.4, 0, .2, 1);font-family:Roboto,sans-serif;font-family:var(--mdc-outlined-button-label-text-font, var(--mdc-typography-button-font-family, var(--mdc-typography-font-family, Roboto, sans-serif)));font-size:.875rem;font-size:var(--mdc-outlined-button-label-text-size, var(--mdc-typography-button-font-size, .875rem));letter-spacing:.0892857143em;letter-spacing:var(--mdc-outlined-button-label-text-tracking, var(--mdc-typography-button-letter-spacing, .0892857143em));font-weight:500;font-weight:var(--mdc-outlined-button-label-text-weight,var(--mdc-typography-button-font-weight,500));text-transform:uppercase;text-transform:var(--mdc-outlined-button-label-text-transform,var(--mdc-typography-button-text-transform,uppercase));height:36px;height:var(--mdc-outlined-button-container-height,36px);border-radius:4px;border-radius:var(--mdc-outlined-button-container-shape,var(--mdc-shape-small,4px));padding:0 15px 0 15px;border-width:1px;border-width:var(--mdc-outlined-button-outline-width,1px);padding:0 15px 0 15px;border-width:1px;border-radius:16px;width:auto;width:var(--forge-chip-width,auto);height:auto;height:var(--forge-chip-height,auto);min-height:36px;min-height:var(--forge-chip-min-height,36px);box-sizing:border-box;-webkit-transition:background-color 150ms 0s cubic-bezier(0, 0, .2, 1);transition:background-color 150ms 0s cubic-bezier(0, 0, .2, 1)}.forge-chip::after,.forge-chip::before{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:\"\"}.forge-chip::before{-webkit-transition:opacity 15ms linear,background-color 15ms linear;transition:opacity 15ms linear,background-color 15ms linear;z-index:1;z-index:var(--mdc-ripple-z-index,1)}.forge-chip::after{z-index:0;z-index:var(--mdc-ripple-z-index,0)}.forge-chip.mdc-ripple-upgraded::before{-webkit-transform:scale(var(--mdc-ripple-fg-scale,1));transform:scale(var(--mdc-ripple-fg-scale,1))}.forge-chip.mdc-ripple-upgraded::after{top:0;left:0;-webkit-transform:scale(0);transform:scale(0);-webkit-transform-origin:center center;transform-origin:center center}.forge-chip.mdc-ripple-upgraded--unbounded::after{top:var(--mdc-ripple-top,0);left:var(--mdc-ripple-left,0)}.forge-chip.mdc-ripple-upgraded--foreground-activation::after{-webkit-animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards;animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards}.forge-chip.mdc-ripple-upgraded--foreground-deactivation::after{-webkit-animation:mdc-ripple-fg-opacity-out 150ms;animation:mdc-ripple-fg-opacity-out 150ms;-webkit-transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1));transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}.forge-chip::after,.forge-chip::before{top:calc(50% - 100%);left:calc(50% - 100%);width:200%;height:200%}.forge-chip.mdc-ripple-upgraded::after{width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.forge-chip::after,.forge-chip::before{background-color:#6200ee;background-color:var(--mdc-ripple-color,var(--mdc-theme-primary,#6200ee))}.forge-chip.mdc-ripple-surface--hover::before,.forge-chip:hover::before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity, .04)}.forge-chip.mdc-ripple-upgraded--background-focused::before,.forge-chip:not(.mdc-ripple-upgraded):focus::before{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity, .12)}.forge-chip:not(.mdc-ripple-upgraded)::after{-webkit-transition:opacity 150ms linear;transition:opacity 150ms linear}.forge-chip:not(.mdc-ripple-upgraded):active::after{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity, .12)}.forge-chip.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.12)}.forge-chip .mdc-elevation-overlay{width:100%;height:100%;top:0;left:0}.forge-chip::-moz-focus-inner{padding:0;border:0}.forge-chip:active{outline:0}.forge-chip:hover{cursor:pointer}.forge-chip:disabled{cursor:default;pointer-events:none}.forge-chip .mdc-button__ripple{border-radius:4px;border-radius:var(--mdc-shape-small,4px)}.forge-chip:not(:disabled){background-color:transparent}.forge-chip:not(:disabled){color:#6200ee;color:var(--mdc-theme-primary,#6200ee)}.forge-chip .mdc-button__ripple{border-style:solid;border-color:transparent}.forge-chip:not(:disabled){color:#6200ee;color:var(--mdc-outlined-button-label-text-color,var(--mdc-theme-primary,#6200ee))}.forge-chip:disabled{color:rgba(0,0,0,.38);color:var(--mdc-outlined-button-disabled-label-text-color,rgba(0,0,0,.38))}.forge-chip .mdc-button__icon{font-size:1.125rem;font-size:var(--mdc-outlined-button-with-icon-icon-size, 1.125rem);width:1.125rem;width:var(--mdc-outlined-button-with-icon-icon-size,1.125rem);height:1.125rem;height:var(--mdc-outlined-button-with-icon-icon-size,1.125rem)}.forge-chip .mdc-button__ripple::after,.forge-chip .mdc-button__ripple::before{background-color:#6200ee;background-color:var(--mdc-outlined-button-hover-state-layer-color,var(--mdc-theme-primary,#6200ee))}.forge-chip.mdc-ripple-surface--hover .mdc-button__ripple::before,.forge-chip:hover .mdc-button__ripple::before{opacity:.04;opacity:var(--mdc-outlined-button-hover-state-layer-opacity, .04)}.forge-chip.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before,.forge-chip:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-outlined-button-focus-state-layer-opacity, .12)}.forge-chip:not(.mdc-ripple-upgraded) .mdc-button__ripple::after{-webkit-transition:opacity 150ms linear;transition:opacity 150ms linear}.forge-chip:not(.mdc-ripple-upgraded):active .mdc-button__ripple::after{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-outlined-button-pressed-state-layer-opacity, .12)}.forge-chip.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-outlined-button-pressed-state-layer-opacity, 0.12)}.forge-chip .mdc-button__ripple{border-radius:4px;border-radius:var(--mdc-outlined-button-container-shape,var(--mdc-shape-small,4px))}.forge-chip:not(:disabled){border-color:rgba(0,0,0,.12);border-color:var(--mdc-outlined-button-outline-color,rgba(0,0,0,.12))}.forge-chip:disabled{border-color:rgba(0,0,0,.12);border-color:var(--mdc-outlined-button-disabled-outline-color,rgba(0,0,0,.12))}.forge-chip.mdc-button--icon-trailing{padding:0 11px 0 15px}.forge-chip.mdc-button--icon-leading{padding:0 15px 0 11px}.forge-chip .mdc-button__ripple{top:-1px;left:-1px;bottom:-1px;right:-1px;border-width:1px;border-width:var(--mdc-outlined-button-outline-width,1px)}.forge-chip .mdc-button__touch{left:calc(-1 * 1px);left:calc(-1 * var(--mdc-outlined-button-outline-width,1px));width:calc(100% + 2 * 1px);width:calc(100% + 2 * var(--mdc-outlined-button-outline-width,1px))}.forge-chip.mdc-button--icon-trailing{padding:0 11px 0 15px}.forge-chip.mdc-button--icon-leading{padding:0 15px 0 11px}.forge-chip .mdc-button__ripple{top:-1px;left:-1px;bottom:-1px;right:-1px;border-width:1px}.forge-chip .mdc-button__touch{left:calc(-1 * 1px);width:calc(100% + 2 * 1px)}.forge-chip:not(:disabled){border-color:#6200ee;border-color:var(--mdc-theme-primary,#6200ee)}.forge-chip .mdc-evolution-chip__ripple{border-radius:16px}.forge-chip .mdc-evolution-chip__action--primary:before{border-radius:16px}.forge-chip .mdc-evolution-chip__icon--primary{border-radius:16px}.forge-chip.forge-chip--disabled{border-color:#e0e0e0;border-color:var(--forge-theme-border-color,#e0e0e0);color:rgba(0,0,0,.38);color:var(--mdc-theme-text-disabled-on-light,rgba(0,0,0,.38));border-color:#e0e0e0;border-color:var(--forge-theme-border-color,#e0e0e0);color:rgba(0,0,0,.38);color:var(--mdc-theme-text-disabled-on-light,rgba(0,0,0,.38));cursor:default;pointer-events:none}.forge-chip.forge-chip--disabled .forge-chip__delete-button{opacity:.54}.forge-chip__leading--hidden{display:none}.forge-chip__content{-webkit-box-flex:1;flex-grow:1;text-align:center}.forge-chip__content:focus{outline:0}.forge-chip ::slotted([slot=leading]){margin-left:-6px;margin-right:4px}.forge-chip ::slotted(forge-avatar[slot]){--forge-avatar-size:24px}.forge-chip ::slotted([slot=trailing]){margin-left:4px;margin-right:-8px}.forge-chip__checkmark{height:24px}.forge-chip__checkmark-svg{width:0;height:24px;-webkit-transition:width 150ms cubic-bezier(.4, 0, .2, 1);transition:width 150ms cubic-bezier(.4, 0, .2, 1)}.forge-chip__checkmark-path{stroke:#fff;stroke:var(--mdc-theme-on-primary,#fff);-webkit-transition:stroke-dashoffset 150ms 0 cubic-bezier(.4, 0, .6, 1);transition:stroke-dashoffset 150ms 0 cubic-bezier(.4, 0, .6, 1);stroke-width:2px;stroke-dashoffset:29.7833385;stroke-dasharray:29.7833385}.forge-chip__delete-button{color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-background,rgba(0,0,0,.54));margin-left:4px;margin-right:-8px;-webkit-transition:color 150ms linear;transition:color 150ms linear;outline:0;line-height:inherit;position:relative;border-radius:50%}.forge-chip__delete-button:focus{outline:currentColor solid 2px}.forge-chip__delete-button:focus,.forge-chip__delete-button:hover{color:rgba(0,0,0,.87);color:var(--mdc-theme-text-primary-on-background,rgba(0,0,0,.87))}.forge-chip__delete-button:active{opacity:.75}.forge-chip__delete-button__touch-target{position:absolute;top:-6px;left:-6px;width:calc(100% + 12px);height:calc(100% + 12px)}.forge-chip--choice.forge-chip--selected:not(.forge-chip--disabled),.forge-chip--filter.forge-chip--selected:not(.forge-chip--disabled),.forge-chip--input.forge-chip--selected:not(.forge-chip--disabled){background-color:#6200ee;background-color:var(--mdc-theme-primary,#6200ee);color:#fff;color:var(--mdc-theme-text-primary-on-dark,#fff)}.forge-chip--choice.forge-chip--selected:not(.forge-chip--disabled)::after,.forge-chip--choice.forge-chip--selected:not(.forge-chip--disabled)::before,.forge-chip--filter.forge-chip--selected:not(.forge-chip--disabled)::after,.forge-chip--filter.forge-chip--selected:not(.forge-chip--disabled)::before,.forge-chip--input.forge-chip--selected:not(.forge-chip--disabled)::after,.forge-chip--input.forge-chip--selected:not(.forge-chip--disabled)::before{background-color:#fff;background-color:var(--mdc-ripple-color,var(--mdc-theme-on-primary,#fff))}.forge-chip--choice.forge-chip--selected:not(.forge-chip--disabled).mdc-ripple-surface--hover::before,.forge-chip--choice.forge-chip--selected:not(.forge-chip--disabled):hover::before,.forge-chip--filter.forge-chip--selected:not(.forge-chip--disabled).mdc-ripple-surface--hover::before,.forge-chip--filter.forge-chip--selected:not(.forge-chip--disabled):hover::before,.forge-chip--input.forge-chip--selected:not(.forge-chip--disabled).mdc-ripple-surface--hover::before,.forge-chip--input.forge-chip--selected:not(.forge-chip--disabled):hover::before{opacity:.08;opacity:var(--mdc-ripple-hover-opacity, .08)}.forge-chip--choice.forge-chip--selected:not(.forge-chip--disabled).mdc-ripple-upgraded--background-focused::before,.forge-chip--choice.forge-chip--selected:not(.forge-chip--disabled):not(.mdc-ripple-upgraded):focus::before,.forge-chip--filter.forge-chip--selected:not(.forge-chip--disabled).mdc-ripple-upgraded--background-focused::before,.forge-chip--filter.forge-chip--selected:not(.forge-chip--disabled):not(.mdc-ripple-upgraded):focus::before,.forge-chip--input.forge-chip--selected:not(.forge-chip--disabled).mdc-ripple-upgraded--background-focused::before,.forge-chip--input.forge-chip--selected:not(.forge-chip--disabled):not(.mdc-ripple-upgraded):focus::before{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.24;opacity:var(--mdc-ripple-focus-opacity, .24)}.forge-chip--choice.forge-chip--selected:not(.forge-chip--disabled):not(.mdc-ripple-upgraded)::after,.forge-chip--filter.forge-chip--selected:not(.forge-chip--disabled):not(.mdc-ripple-upgraded)::after,.forge-chip--input.forge-chip--selected:not(.forge-chip--disabled):not(.mdc-ripple-upgraded)::after{-webkit-transition:opacity 150ms linear;transition:opacity 150ms linear}.forge-chip--choice.forge-chip--selected:not(.forge-chip--disabled):not(.mdc-ripple-upgraded):active::after,.forge-chip--filter.forge-chip--selected:not(.forge-chip--disabled):not(.mdc-ripple-upgraded):active::after,.forge-chip--input.forge-chip--selected:not(.forge-chip--disabled):not(.mdc-ripple-upgraded):active::after{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.24;opacity:var(--mdc-ripple-press-opacity, .24)}.forge-chip--choice.forge-chip--selected:not(.forge-chip--disabled).mdc-ripple-upgraded,.forge-chip--filter.forge-chip--selected:not(.forge-chip--disabled).mdc-ripple-upgraded,.forge-chip--input.forge-chip--selected:not(.forge-chip--disabled).mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.24)}.forge-chip--choice.forge-chip--selected.forge-chip--disabled,.forge-chip--filter.forge-chip--selected.forge-chip--disabled,.forge-chip--input.forge-chip--selected.forge-chip--disabled{background-color:#6200ee;background-color:var(--mdc-theme-primary,#6200ee);color:#fff;color:var(--mdc-theme-text-primary-on-dark,#fff);opacity:.37}.forge-chip--choice.forge-chip--selected.forge-chip--disabled::after,.forge-chip--choice.forge-chip--selected.forge-chip--disabled::before,.forge-chip--filter.forge-chip--selected.forge-chip--disabled::after,.forge-chip--filter.forge-chip--selected.forge-chip--disabled::before,.forge-chip--input.forge-chip--selected.forge-chip--disabled::after,.forge-chip--input.forge-chip--selected.forge-chip--disabled::before{background-color:#fff;background-color:var(--mdc-ripple-color,var(--mdc-theme-on-primary,#fff))}.forge-chip--choice.forge-chip--selected.forge-chip--disabled.mdc-ripple-surface--hover::before,.forge-chip--choice.forge-chip--selected.forge-chip--disabled:hover::before,.forge-chip--filter.forge-chip--selected.forge-chip--disabled.mdc-ripple-surface--hover::before,.forge-chip--filter.forge-chip--selected.forge-chip--disabled:hover::before,.forge-chip--input.forge-chip--selected.forge-chip--disabled.mdc-ripple-surface--hover::before,.forge-chip--input.forge-chip--selected.forge-chip--disabled:hover::before{opacity:.08;opacity:var(--mdc-ripple-hover-opacity, .08)}.forge-chip--choice.forge-chip--selected.forge-chip--disabled.mdc-ripple-upgraded--background-focused::before,.forge-chip--choice.forge-chip--selected.forge-chip--disabled:not(.mdc-ripple-upgraded):focus::before,.forge-chip--filter.forge-chip--selected.forge-chip--disabled.mdc-ripple-upgraded--background-focused::before,.forge-chip--filter.forge-chip--selected.forge-chip--disabled:not(.mdc-ripple-upgraded):focus::before,.forge-chip--input.forge-chip--selected.forge-chip--disabled.mdc-ripple-upgraded--background-focused::before,.forge-chip--input.forge-chip--selected.forge-chip--disabled:not(.mdc-ripple-upgraded):focus::before{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.24;opacity:var(--mdc-ripple-focus-opacity, .24)}.forge-chip--choice.forge-chip--selected.forge-chip--disabled:not(.mdc-ripple-upgraded)::after,.forge-chip--filter.forge-chip--selected.forge-chip--disabled:not(.mdc-ripple-upgraded)::after,.forge-chip--input.forge-chip--selected.forge-chip--disabled:not(.mdc-ripple-upgraded)::after{-webkit-transition:opacity 150ms linear;transition:opacity 150ms linear}.forge-chip--choice.forge-chip--selected.forge-chip--disabled:not(.mdc-ripple-upgraded):active::after,.forge-chip--filter.forge-chip--selected.forge-chip--disabled:not(.mdc-ripple-upgraded):active::after,.forge-chip--input.forge-chip--selected.forge-chip--disabled:not(.mdc-ripple-upgraded):active::after{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.24;opacity:var(--mdc-ripple-press-opacity, .24)}.forge-chip--choice.forge-chip--selected.forge-chip--disabled.mdc-ripple-upgraded,.forge-chip--filter.forge-chip--selected.forge-chip--disabled.mdc-ripple-upgraded,.forge-chip--input.forge-chip--selected.forge-chip--disabled.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.24)}.forge-chip--choice.forge-chip--selected ::slotted([slot=leading]),.forge-chip--filter.forge-chip--selected ::slotted([slot=leading]),.forge-chip--input.forge-chip--selected ::slotted([slot=leading]){color:#fff;color:var(--mdc-theme-on-primary,#fff)}.forge-chip--choice.forge-chip--selected ::slotted([slot=trailing]),.forge-chip--filter.forge-chip--selected ::slotted([slot=trailing]),.forge-chip--input.forge-chip--selected ::slotted([slot=trailing]){color:#fff;color:var(--mdc-theme-on-primary,#fff)}.forge-chip--choice.forge-chip--selected .forge-chip__delete-button,.forge-chip--filter.forge-chip--selected .forge-chip__delete-button,.forge-chip--input.forge-chip--selected .forge-chip__delete-button{color:#fff;color:var(--mdc-theme-on-primary,#fff)}.forge-chip--choice.forge-chip--selected.forge-chip--filter .forge-chip__checkmark,.forge-chip--filter.forge-chip--selected.forge-chip--filter .forge-chip__checkmark,.forge-chip--input.forge-chip--selected.forge-chip--filter .forge-chip__checkmark{margin-left:-6px;margin-right:4px}.forge-chip--choice.forge-chip--selected.forge-chip--filter .forge-chip__checkmark-svg,.forge-chip--filter.forge-chip--selected.forge-chip--filter .forge-chip__checkmark-svg,.forge-chip--input.forge-chip--selected.forge-chip--filter .forge-chip__checkmark-svg{width:24px}.forge-chip--choice.forge-chip--selected.forge-chip--filter .forge-chip__checkmark-path,.forge-chip--filter.forge-chip--selected.forge-chip--filter .forge-chip__checkmark-path,.forge-chip--input.forge-chip--selected.forge-chip--filter .forge-chip__checkmark-path{-webkit-transition:stroke-dashoffset 150ms 50ms cubic-bezier(.4, 0, .6, 1);transition:stroke-dashoffset 150ms 50ms cubic-bezier(.4, 0, .6, 1);stroke-dashoffset:0}.forge-chip--field .forge-chip__delete-button{color:#6200ee;color:var(--mdc-theme-primary,#6200ee)}.forge-chip--field .forge-chip__delete-button:focus,.forge-chip--field .forge-chip__delete-button:hover{color:rgba(0,0,0,.87);color:var(--mdc-theme-text-primary-on-background,rgba(0,0,0,.87))}.forge-chip--field.forge-chip--invalid:not(.forge-chip--disabled) .forge-chip__delete-button{color:#b00020;color:var(--mdc-theme-error,#b00020)}.forge-chip--field.forge-chip--invalid:not(.forge-chip--disabled) .forge-chip__delete-button:focus,.forge-chip--field.forge-chip--invalid:not(.forge-chip--disabled) .forge-chip__delete-button:hover{color:rgba(0,0,0,.87);color:var(--mdc-theme-text-primary-on-background,rgba(0,0,0,.87))}.forge-chip--field.forge-chip--disabled .forge-chip__delete-button{color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-background,rgba(0,0,0,.54))}.forge-chip--dense{min-height:28px;min-height:var(--forge-chip-min-height,28px)}.forge-chip--dense.forge-chip--field{min-height:20px;min-height:var(--forge-chip-min-height,20px);padding:0;margin:0;display:-webkit-box;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row}.forge-chip--dense.forge-chip--field ::slotted([slot=leading]){margin:0 0 0 2px;font-size:18px!important}.forge-chip--dense.forge-chip--field .forge-chip__content{font-size:12px;padding:0 8px}.forge-chip--dense.forge-chip--field ::slotted([slot=trailing]){font-size:18px!important}.forge-chip--dense.forge-chip--field .forge-chip__delete-button{margin:0 2px 0 0;font-size:18px}.forge-chip--invalid:not(.forge-chip--disabled){color:#b00020;color:var(--mdc-theme-error,#b00020)}.forge-chip--invalid:not(.forge-chip--disabled)::after,.forge-chip--invalid:not(.forge-chip--disabled)::before{background-color:#b00020;background-color:var(--mdc-ripple-color,var(--mdc-theme-error,#b00020))}.forge-chip--invalid:not(.forge-chip--disabled).mdc-ripple-surface--hover::before,.forge-chip--invalid:not(.forge-chip--disabled):hover::before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity, .04)}.forge-chip--invalid:not(.forge-chip--disabled).mdc-ripple-upgraded--background-focused::before,.forge-chip--invalid:not(.forge-chip--disabled):not(.mdc-ripple-upgraded):focus::before{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity, .12)}.forge-chip--invalid:not(.forge-chip--disabled):not(.mdc-ripple-upgraded)::after{-webkit-transition:opacity 150ms linear;transition:opacity 150ms linear}.forge-chip--invalid:not(.forge-chip--disabled):not(.mdc-ripple-upgraded):active::after{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity, .12)}.forge-chip--invalid:not(.forge-chip--disabled).mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.12)}.forge-chip--invalid:not(.forge-chip--disabled):not(:disabled){border-color:#b00020;border-color:var(--mdc-theme-error,#b00020)}.forge-chip--invalid:not(.forge-chip--disabled) .forge-chip__delete-button{color:#b00020;color:var(--mdc-theme-error,#b00020)}.forge-chip--invalid:not(.forge-chip--disabled).forge-chip--selected{background-color:#b00020;background-color:var(--mdc-theme-error,#b00020)}.forge-chip--invalid:not(.forge-chip--disabled).forge-chip--selected .forge-chip__delete-button{color:#fff;color:var(--mdc-theme-on-primary,#fff)}:host{display:inline-block}:host([hidden]){display:none}:host([theme=error]){--mdc-theme-primary:var(--mdc-theme-error)}';
+const styles = '@-webkit-keyframes mdc-ripple-fg-radius-in{from{-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1);-webkit-transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1);transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1)}to{-webkit-transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1));transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}}@keyframes mdc-ripple-fg-radius-in{from{-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1);-webkit-transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1);transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1)}to{-webkit-transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1));transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}}@-webkit-keyframes mdc-ripple-fg-opacity-in{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:0}to{opacity:var(--mdc-ripple-fg-opacity, 0)}}@keyframes mdc-ripple-fg-opacity-in{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:0}to{opacity:var(--mdc-ripple-fg-opacity, 0)}}@-webkit-keyframes mdc-ripple-fg-opacity-out{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:var(--mdc-ripple-fg-opacity, 0)}to{opacity:0}}@keyframes mdc-ripple-fg-opacity-out{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:var(--mdc-ripple-fg-opacity, 0)}to{opacity:0}}.mdc-ripple-surface{--mdc-ripple-fg-size:0;--mdc-ripple-left:0;--mdc-ripple-top:0;--mdc-ripple-fg-scale:1;--mdc-ripple-fg-translate-end:0;--mdc-ripple-fg-translate-start:0;-webkit-tap-highlight-color:transparent;will-change:transform,opacity;position:relative;outline:0;overflow:hidden}.mdc-ripple-surface::after,.mdc-ripple-surface::before{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:\"\"}.mdc-ripple-surface::before{-webkit-transition:opacity 15ms linear,background-color 15ms linear;transition:opacity 15ms linear,background-color 15ms linear;z-index:1;z-index:var(--mdc-ripple-z-index,1)}.mdc-ripple-surface::after{z-index:0;z-index:var(--mdc-ripple-z-index,0)}.mdc-ripple-surface.mdc-ripple-upgraded::before{-webkit-transform:scale(var(--mdc-ripple-fg-scale,1));transform:scale(var(--mdc-ripple-fg-scale,1))}.mdc-ripple-surface.mdc-ripple-upgraded::after{top:0;left:0;-webkit-transform:scale(0);transform:scale(0);-webkit-transform-origin:center center;transform-origin:center center}.mdc-ripple-surface.mdc-ripple-upgraded--unbounded::after{top:var(--mdc-ripple-top,0);left:var(--mdc-ripple-left,0)}.mdc-ripple-surface.mdc-ripple-upgraded--foreground-activation::after{-webkit-animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards;animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards}.mdc-ripple-surface.mdc-ripple-upgraded--foreground-deactivation::after{-webkit-animation:mdc-ripple-fg-opacity-out 150ms;animation:mdc-ripple-fg-opacity-out 150ms;-webkit-transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1));transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}.mdc-ripple-surface::after,.mdc-ripple-surface::before{top:calc(50% - 100%);left:calc(50% - 100%);width:200%;height:200%}.mdc-ripple-surface.mdc-ripple-upgraded::after{width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.mdc-ripple-surface[data-mdc-ripple-is-unbounded],.mdc-ripple-upgraded--unbounded{overflow:visible}.mdc-ripple-surface[data-mdc-ripple-is-unbounded]::after,.mdc-ripple-surface[data-mdc-ripple-is-unbounded]::before,.mdc-ripple-upgraded--unbounded::after,.mdc-ripple-upgraded--unbounded::before{top:calc(50% - 50%);left:calc(50% - 50%);width:100%;height:100%}.mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::after,.mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::before,.mdc-ripple-upgraded--unbounded.mdc-ripple-upgraded::after,.mdc-ripple-upgraded--unbounded.mdc-ripple-upgraded::before{top:var(--mdc-ripple-top,calc(50% - 50%));left:var(--mdc-ripple-left,calc(50% - 50%));width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::after,.mdc-ripple-upgraded--unbounded.mdc-ripple-upgraded::after{width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.mdc-ripple-surface::after,.mdc-ripple-surface::before{background-color:#000;background-color:var(--mdc-ripple-color,#000)}.mdc-ripple-surface.mdc-ripple-surface--hover::before,.mdc-ripple-surface:hover::before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity, .04)}.mdc-ripple-surface.mdc-ripple-upgraded--background-focused::before,.mdc-ripple-surface:not(.mdc-ripple-upgraded):focus::before{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity, .12)}.mdc-ripple-surface:not(.mdc-ripple-upgraded)::after{-webkit-transition:opacity 150ms linear;transition:opacity 150ms linear}.mdc-ripple-surface:not(.mdc-ripple-upgraded):active::after{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity, .12)}.mdc-ripple-surface.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.12)}.mdc-ripple-surface::after,.mdc-ripple-surface::before{--mdc-ripple-color:var(--mdc-theme-on-surface)}.forge-chip{--mdc-ripple-fg-size:0;--mdc-ripple-left:0;--mdc-ripple-top:0;--mdc-ripple-fg-scale:1;--mdc-ripple-fg-translate-end:0;--mdc-ripple-fg-translate-start:0;-webkit-tap-highlight-color:transparent;will-change:transform,opacity;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-button-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:.875rem;font-size:var(--mdc-typography-button-font-size, .875rem);line-height:2.25rem;line-height:var(--mdc-typography-button-line-height, 2.25rem);font-weight:500;font-weight:var(--mdc-typography-button-font-weight,500);letter-spacing:.0892857143em;letter-spacing:var(--mdc-typography-button-letter-spacing, .0892857143em);text-decoration:none;-webkit-text-decoration:var(--mdc-typography-button-text-decoration,none);text-decoration:var(--mdc-typography-button-text-decoration,none);text-transform:uppercase;text-transform:var(--mdc-typography-button-text-transform,uppercase);position:relative;display:-webkit-inline-box;display:inline-flex;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;-webkit-box-sizing:border-box;box-sizing:border-box;min-width:64px;border:none;outline:0;line-height:inherit;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-appearance:none;overflow:visible;vertical-align:middle;background:0 0;border-radius:4px;border-radius:var(--mdc-shape-small,4px);height:36px;border-style:solid;-webkit-transition:border 280ms cubic-bezier(.4, 0, .2, 1);transition:border 280ms cubic-bezier(.4, 0, .2, 1);font-family:Roboto,sans-serif;font-family:var(--mdc-outlined-button-label-text-font, var(--mdc-typography-button-font-family, var(--mdc-typography-font-family, Roboto, sans-serif)));font-size:.875rem;font-size:var(--mdc-outlined-button-label-text-size, var(--mdc-typography-button-font-size, .875rem));letter-spacing:.0892857143em;letter-spacing:var(--mdc-outlined-button-label-text-tracking, var(--mdc-typography-button-letter-spacing, .0892857143em));font-weight:500;font-weight:var(--mdc-outlined-button-label-text-weight,var(--mdc-typography-button-font-weight,500));text-transform:uppercase;text-transform:var(--mdc-outlined-button-label-text-transform,var(--mdc-typography-button-text-transform,uppercase));height:36px;height:var(--mdc-outlined-button-container-height,36px);border-radius:4px;border-radius:var(--mdc-outlined-button-container-shape,var(--mdc-shape-small,4px));padding:0 15px 0 15px;border-width:1px;border-width:var(--mdc-outlined-button-outline-width,1px);padding:0 15px 0 15px;border-width:1px;border-radius:16px;width:auto;width:var(--forge-chip-width,auto);height:auto;height:var(--forge-chip-height,auto);min-height:36px;min-height:var(--forge-chip-min-height,36px);box-sizing:border-box;-webkit-transition:background-color 150ms 0s cubic-bezier(0, 0, .2, 1);transition:background-color 150ms 0s cubic-bezier(0, 0, .2, 1);text-transform:none;overflow:hidden}.forge-chip::after,.forge-chip::before{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:\"\"}.forge-chip::before{-webkit-transition:opacity 15ms linear,background-color 15ms linear;transition:opacity 15ms linear,background-color 15ms linear;z-index:1;z-index:var(--mdc-ripple-z-index,1)}.forge-chip::after{z-index:0;z-index:var(--mdc-ripple-z-index,0)}.forge-chip.mdc-ripple-upgraded::before{-webkit-transform:scale(var(--mdc-ripple-fg-scale,1));transform:scale(var(--mdc-ripple-fg-scale,1))}.forge-chip.mdc-ripple-upgraded::after{top:0;left:0;-webkit-transform:scale(0);transform:scale(0);-webkit-transform-origin:center center;transform-origin:center center}.forge-chip.mdc-ripple-upgraded--unbounded::after{top:var(--mdc-ripple-top,0);left:var(--mdc-ripple-left,0)}.forge-chip.mdc-ripple-upgraded--foreground-activation::after{-webkit-animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards;animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards}.forge-chip.mdc-ripple-upgraded--foreground-deactivation::after{-webkit-animation:mdc-ripple-fg-opacity-out 150ms;animation:mdc-ripple-fg-opacity-out 150ms;-webkit-transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1));transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}.forge-chip::after,.forge-chip::before{top:calc(50% - 100%);left:calc(50% - 100%);width:200%;height:200%}.forge-chip.mdc-ripple-upgraded::after{width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.forge-chip::after,.forge-chip::before{background-color:#6200ee;background-color:var(--mdc-ripple-color,var(--mdc-theme-primary,#6200ee))}.forge-chip.mdc-ripple-surface--hover::before,.forge-chip:hover::before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity, .04)}.forge-chip.mdc-ripple-upgraded--background-focused::before,.forge-chip:not(.mdc-ripple-upgraded):focus::before{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity, .12)}.forge-chip:not(.mdc-ripple-upgraded)::after{-webkit-transition:opacity 150ms linear;transition:opacity 150ms linear}.forge-chip:not(.mdc-ripple-upgraded):active::after{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity, .12)}.forge-chip.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.12)}.forge-chip .mdc-elevation-overlay{width:100%;height:100%;top:0;left:0}.forge-chip::-moz-focus-inner{padding:0;border:0}.forge-chip:active{outline:0}.forge-chip:hover{cursor:pointer}.forge-chip:disabled{cursor:default;pointer-events:none}.forge-chip .mdc-button__ripple{border-radius:4px;border-radius:var(--mdc-shape-small,4px)}.forge-chip:not(:disabled){background-color:transparent}.forge-chip:not(:disabled){color:#6200ee;color:var(--mdc-theme-primary,#6200ee)}.forge-chip .mdc-button__ripple{border-style:solid;border-color:transparent}.forge-chip:not(:disabled){color:#6200ee;color:var(--mdc-outlined-button-label-text-color,var(--mdc-theme-primary,#6200ee))}.forge-chip:disabled{color:rgba(0,0,0,.38);color:var(--mdc-outlined-button-disabled-label-text-color,rgba(0,0,0,.38))}.forge-chip .mdc-button__icon{font-size:1.125rem;font-size:var(--mdc-outlined-button-with-icon-icon-size, 1.125rem);width:1.125rem;width:var(--mdc-outlined-button-with-icon-icon-size,1.125rem);height:1.125rem;height:var(--mdc-outlined-button-with-icon-icon-size,1.125rem)}.forge-chip .mdc-button__ripple::after,.forge-chip .mdc-button__ripple::before{background-color:#6200ee;background-color:var(--mdc-outlined-button-hover-state-layer-color,var(--mdc-theme-primary,#6200ee))}.forge-chip.mdc-ripple-surface--hover .mdc-button__ripple::before,.forge-chip:hover .mdc-button__ripple::before{opacity:.04;opacity:var(--mdc-outlined-button-hover-state-layer-opacity, .04)}.forge-chip.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before,.forge-chip:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-outlined-button-focus-state-layer-opacity, .12)}.forge-chip:not(.mdc-ripple-upgraded) .mdc-button__ripple::after{-webkit-transition:opacity 150ms linear;transition:opacity 150ms linear}.forge-chip:not(.mdc-ripple-upgraded):active .mdc-button__ripple::after{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-outlined-button-pressed-state-layer-opacity, .12)}.forge-chip.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-outlined-button-pressed-state-layer-opacity, 0.12)}.forge-chip .mdc-button__ripple{border-radius:4px;border-radius:var(--mdc-outlined-button-container-shape,var(--mdc-shape-small,4px))}.forge-chip:not(:disabled){border-color:rgba(0,0,0,.12);border-color:var(--mdc-outlined-button-outline-color,rgba(0,0,0,.12))}.forge-chip:disabled{border-color:rgba(0,0,0,.12);border-color:var(--mdc-outlined-button-disabled-outline-color,rgba(0,0,0,.12))}.forge-chip.mdc-button--icon-trailing{padding:0 11px 0 15px}.forge-chip.mdc-button--icon-leading{padding:0 15px 0 11px}.forge-chip .mdc-button__ripple{top:-1px;left:-1px;bottom:-1px;right:-1px;border-width:1px;border-width:var(--mdc-outlined-button-outline-width,1px)}.forge-chip .mdc-button__touch{left:calc(-1 * 1px);left:calc(-1 * var(--mdc-outlined-button-outline-width,1px));width:calc(100% + 2 * 1px);width:calc(100% + 2 * var(--mdc-outlined-button-outline-width,1px))}.forge-chip.mdc-button--icon-trailing{padding:0 11px 0 15px}.forge-chip.mdc-button--icon-leading{padding:0 15px 0 11px}.forge-chip .mdc-button__ripple{top:-1px;left:-1px;bottom:-1px;right:-1px;border-width:1px}.forge-chip .mdc-button__touch{left:calc(-1 * 1px);width:calc(100% + 2 * 1px)}.forge-chip:not(:disabled){border-color:#6200ee;border-color:var(--mdc-theme-primary,#6200ee)}.forge-chip .mdc-evolution-chip__ripple{border-radius:16px}.forge-chip .mdc-evolution-chip__action--primary:before{border-radius:16px}.forge-chip .mdc-evolution-chip__icon--primary{border-radius:16px}.forge-chip.forge-chip--disabled{border-color:#e0e0e0;border-color:var(--forge-theme-border-color,#e0e0e0);color:rgba(0,0,0,.38);color:var(--mdc-theme-text-disabled-on-light,rgba(0,0,0,.38));cursor:default;pointer-events:none}.forge-chip.forge-chip--disabled .forge-chip__delete-button{opacity:.54}.forge-chip__leading--hidden{display:none}.forge-chip__content{-webkit-box-flex:1;flex-grow:1;text-align:center}.forge-chip__content:focus{outline:0}.forge-chip ::slotted([slot=leading]){margin-left:-6px;margin-right:4px}.forge-chip ::slotted(forge-avatar[slot]){--forge-avatar-size:24px}.forge-chip ::slotted([slot=trailing]){margin-left:4px;margin-right:-8px}.forge-chip__checkmark{height:24px}.forge-chip__checkmark-svg{width:0;height:24px;-webkit-transition:width 150ms cubic-bezier(.4, 0, .2, 1);transition:width 150ms cubic-bezier(.4, 0, .2, 1)}.forge-chip__checkmark-path{stroke:#fff;stroke:var(--mdc-theme-on-primary,#fff);-webkit-transition:stroke-dashoffset 150ms 0 cubic-bezier(.4, 0, .6, 1);transition:stroke-dashoffset 150ms 0 cubic-bezier(.4, 0, .6, 1);stroke-width:2px;stroke-dashoffset:29.7833385;stroke-dasharray:29.7833385}.forge-chip__delete-button{color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-background,rgba(0,0,0,.54));margin-left:4px;margin-right:-8px;-webkit-transition:color 150ms linear;transition:color 150ms linear;outline:0;line-height:inherit;position:relative;border-radius:50%}.forge-chip__delete-button:focus{outline:currentColor solid 2px}.forge-chip__delete-button:focus,.forge-chip__delete-button:hover{color:rgba(0,0,0,.87);color:var(--mdc-theme-text-primary-on-background,rgba(0,0,0,.87))}.forge-chip__delete-button:active{opacity:.75}.forge-chip__delete-button__touch-target{position:absolute;top:-6px;left:-6px;width:calc(100% + 12px);height:calc(100% + 12px)}.forge-chip--choice.forge-chip--selected:not(.forge-chip--disabled),.forge-chip--filter.forge-chip--selected:not(.forge-chip--disabled),.forge-chip--input.forge-chip--selected:not(.forge-chip--disabled){background-color:#6200ee;background-color:var(--mdc-theme-primary,#6200ee);color:#fff;color:var(--mdc-theme-text-primary-on-dark,#fff)}.forge-chip--choice.forge-chip--selected:not(.forge-chip--disabled)::after,.forge-chip--choice.forge-chip--selected:not(.forge-chip--disabled)::before,.forge-chip--filter.forge-chip--selected:not(.forge-chip--disabled)::after,.forge-chip--filter.forge-chip--selected:not(.forge-chip--disabled)::before,.forge-chip--input.forge-chip--selected:not(.forge-chip--disabled)::after,.forge-chip--input.forge-chip--selected:not(.forge-chip--disabled)::before{background-color:#fff;background-color:var(--mdc-ripple-color,var(--mdc-theme-on-primary,#fff))}.forge-chip--choice.forge-chip--selected:not(.forge-chip--disabled).mdc-ripple-surface--hover::before,.forge-chip--choice.forge-chip--selected:not(.forge-chip--disabled):hover::before,.forge-chip--filter.forge-chip--selected:not(.forge-chip--disabled).mdc-ripple-surface--hover::before,.forge-chip--filter.forge-chip--selected:not(.forge-chip--disabled):hover::before,.forge-chip--input.forge-chip--selected:not(.forge-chip--disabled).mdc-ripple-surface--hover::before,.forge-chip--input.forge-chip--selected:not(.forge-chip--disabled):hover::before{opacity:.08;opacity:var(--mdc-ripple-hover-opacity, .08)}.forge-chip--choice.forge-chip--selected:not(.forge-chip--disabled).mdc-ripple-upgraded--background-focused::before,.forge-chip--choice.forge-chip--selected:not(.forge-chip--disabled):not(.mdc-ripple-upgraded):focus::before,.forge-chip--filter.forge-chip--selected:not(.forge-chip--disabled).mdc-ripple-upgraded--background-focused::before,.forge-chip--filter.forge-chip--selected:not(.forge-chip--disabled):not(.mdc-ripple-upgraded):focus::before,.forge-chip--input.forge-chip--selected:not(.forge-chip--disabled).mdc-ripple-upgraded--background-focused::before,.forge-chip--input.forge-chip--selected:not(.forge-chip--disabled):not(.mdc-ripple-upgraded):focus::before{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.24;opacity:var(--mdc-ripple-focus-opacity, .24)}.forge-chip--choice.forge-chip--selected:not(.forge-chip--disabled):not(.mdc-ripple-upgraded)::after,.forge-chip--filter.forge-chip--selected:not(.forge-chip--disabled):not(.mdc-ripple-upgraded)::after,.forge-chip--input.forge-chip--selected:not(.forge-chip--disabled):not(.mdc-ripple-upgraded)::after{-webkit-transition:opacity 150ms linear;transition:opacity 150ms linear}.forge-chip--choice.forge-chip--selected:not(.forge-chip--disabled):not(.mdc-ripple-upgraded):active::after,.forge-chip--filter.forge-chip--selected:not(.forge-chip--disabled):not(.mdc-ripple-upgraded):active::after,.forge-chip--input.forge-chip--selected:not(.forge-chip--disabled):not(.mdc-ripple-upgraded):active::after{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.24;opacity:var(--mdc-ripple-press-opacity, .24)}.forge-chip--choice.forge-chip--selected:not(.forge-chip--disabled).mdc-ripple-upgraded,.forge-chip--filter.forge-chip--selected:not(.forge-chip--disabled).mdc-ripple-upgraded,.forge-chip--input.forge-chip--selected:not(.forge-chip--disabled).mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.24)}.forge-chip--choice.forge-chip--selected.forge-chip--disabled,.forge-chip--filter.forge-chip--selected.forge-chip--disabled,.forge-chip--input.forge-chip--selected.forge-chip--disabled{background-color:#6200ee;background-color:var(--mdc-theme-primary,#6200ee);color:#fff;color:var(--mdc-theme-text-primary-on-dark,#fff);opacity:.37}.forge-chip--choice.forge-chip--selected.forge-chip--disabled::after,.forge-chip--choice.forge-chip--selected.forge-chip--disabled::before,.forge-chip--filter.forge-chip--selected.forge-chip--disabled::after,.forge-chip--filter.forge-chip--selected.forge-chip--disabled::before,.forge-chip--input.forge-chip--selected.forge-chip--disabled::after,.forge-chip--input.forge-chip--selected.forge-chip--disabled::before{background-color:#fff;background-color:var(--mdc-ripple-color,var(--mdc-theme-on-primary,#fff))}.forge-chip--choice.forge-chip--selected.forge-chip--disabled.mdc-ripple-surface--hover::before,.forge-chip--choice.forge-chip--selected.forge-chip--disabled:hover::before,.forge-chip--filter.forge-chip--selected.forge-chip--disabled.mdc-ripple-surface--hover::before,.forge-chip--filter.forge-chip--selected.forge-chip--disabled:hover::before,.forge-chip--input.forge-chip--selected.forge-chip--disabled.mdc-ripple-surface--hover::before,.forge-chip--input.forge-chip--selected.forge-chip--disabled:hover::before{opacity:.08;opacity:var(--mdc-ripple-hover-opacity, .08)}.forge-chip--choice.forge-chip--selected.forge-chip--disabled.mdc-ripple-upgraded--background-focused::before,.forge-chip--choice.forge-chip--selected.forge-chip--disabled:not(.mdc-ripple-upgraded):focus::before,.forge-chip--filter.forge-chip--selected.forge-chip--disabled.mdc-ripple-upgraded--background-focused::before,.forge-chip--filter.forge-chip--selected.forge-chip--disabled:not(.mdc-ripple-upgraded):focus::before,.forge-chip--input.forge-chip--selected.forge-chip--disabled.mdc-ripple-upgraded--background-focused::before,.forge-chip--input.forge-chip--selected.forge-chip--disabled:not(.mdc-ripple-upgraded):focus::before{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.24;opacity:var(--mdc-ripple-focus-opacity, .24)}.forge-chip--choice.forge-chip--selected.forge-chip--disabled:not(.mdc-ripple-upgraded)::after,.forge-chip--filter.forge-chip--selected.forge-chip--disabled:not(.mdc-ripple-upgraded)::after,.forge-chip--input.forge-chip--selected.forge-chip--disabled:not(.mdc-ripple-upgraded)::after{-webkit-transition:opacity 150ms linear;transition:opacity 150ms linear}.forge-chip--choice.forge-chip--selected.forge-chip--disabled:not(.mdc-ripple-upgraded):active::after,.forge-chip--filter.forge-chip--selected.forge-chip--disabled:not(.mdc-ripple-upgraded):active::after,.forge-chip--input.forge-chip--selected.forge-chip--disabled:not(.mdc-ripple-upgraded):active::after{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.24;opacity:var(--mdc-ripple-press-opacity, .24)}.forge-chip--choice.forge-chip--selected.forge-chip--disabled.mdc-ripple-upgraded,.forge-chip--filter.forge-chip--selected.forge-chip--disabled.mdc-ripple-upgraded,.forge-chip--input.forge-chip--selected.forge-chip--disabled.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.24)}.forge-chip--choice.forge-chip--selected ::slotted([slot=leading]),.forge-chip--filter.forge-chip--selected ::slotted([slot=leading]),.forge-chip--input.forge-chip--selected ::slotted([slot=leading]){color:#fff;color:var(--mdc-theme-on-primary,#fff)}.forge-chip--choice.forge-chip--selected ::slotted([slot=trailing]),.forge-chip--filter.forge-chip--selected ::slotted([slot=trailing]),.forge-chip--input.forge-chip--selected ::slotted([slot=trailing]){color:#fff;color:var(--mdc-theme-on-primary,#fff)}.forge-chip--choice.forge-chip--selected .forge-chip__delete-button,.forge-chip--filter.forge-chip--selected .forge-chip__delete-button,.forge-chip--input.forge-chip--selected .forge-chip__delete-button{color:#fff;color:var(--mdc-theme-on-primary,#fff)}.forge-chip--choice.forge-chip--selected.forge-chip--filter .forge-chip__checkmark,.forge-chip--filter.forge-chip--selected.forge-chip--filter .forge-chip__checkmark,.forge-chip--input.forge-chip--selected.forge-chip--filter .forge-chip__checkmark{margin-left:-6px;margin-right:4px}.forge-chip--choice.forge-chip--selected.forge-chip--filter .forge-chip__checkmark-svg,.forge-chip--filter.forge-chip--selected.forge-chip--filter .forge-chip__checkmark-svg,.forge-chip--input.forge-chip--selected.forge-chip--filter .forge-chip__checkmark-svg{width:24px}.forge-chip--choice.forge-chip--selected.forge-chip--filter .forge-chip__checkmark-path,.forge-chip--filter.forge-chip--selected.forge-chip--filter .forge-chip__checkmark-path,.forge-chip--input.forge-chip--selected.forge-chip--filter .forge-chip__checkmark-path{-webkit-transition:stroke-dashoffset 150ms 50ms cubic-bezier(.4, 0, .6, 1);transition:stroke-dashoffset 150ms 50ms cubic-bezier(.4, 0, .6, 1);stroke-dashoffset:0}.forge-chip--field .forge-chip__delete-button{color:#6200ee;color:var(--mdc-theme-primary,#6200ee)}.forge-chip--field .forge-chip__delete-button:focus,.forge-chip--field .forge-chip__delete-button:hover{color:rgba(0,0,0,.87);color:var(--mdc-theme-text-primary-on-background,rgba(0,0,0,.87))}.forge-chip--field.forge-chip--invalid:not(.forge-chip--disabled) .forge-chip__delete-button{color:#b00020;color:var(--mdc-theme-error,#b00020)}.forge-chip--field.forge-chip--invalid:not(.forge-chip--disabled) .forge-chip__delete-button:focus,.forge-chip--field.forge-chip--invalid:not(.forge-chip--disabled) .forge-chip__delete-button:hover{color:rgba(0,0,0,.87);color:var(--mdc-theme-text-primary-on-background,rgba(0,0,0,.87))}.forge-chip--field.forge-chip--disabled .forge-chip__delete-button{color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-background,rgba(0,0,0,.54))}.forge-chip--dense{min-height:28px;min-height:var(--forge-chip-min-height,28px)}.forge-chip--dense.forge-chip--field{min-height:20px;min-height:var(--forge-chip-min-height,20px);padding:0;margin:0;display:-webkit-box;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row}.forge-chip--dense.forge-chip--field ::slotted([slot=leading]){margin:0 0 0 2px;font-size:18px!important}.forge-chip--dense.forge-chip--field .forge-chip__content{font-size:12px;padding:0 8px}.forge-chip--dense.forge-chip--field ::slotted([slot=trailing]){font-size:18px!important}.forge-chip--dense.forge-chip--field .forge-chip__delete-button{margin:0 2px 0 0;font-size:18px}.forge-chip--invalid:not(.forge-chip--disabled){color:#b00020;color:var(--mdc-theme-error,#b00020)}.forge-chip--invalid:not(.forge-chip--disabled)::after,.forge-chip--invalid:not(.forge-chip--disabled)::before{background-color:#b00020;background-color:var(--mdc-ripple-color,var(--mdc-theme-error,#b00020))}.forge-chip--invalid:not(.forge-chip--disabled).mdc-ripple-surface--hover::before,.forge-chip--invalid:not(.forge-chip--disabled):hover::before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity, .04)}.forge-chip--invalid:not(.forge-chip--disabled).mdc-ripple-upgraded--background-focused::before,.forge-chip--invalid:not(.forge-chip--disabled):not(.mdc-ripple-upgraded):focus::before{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity, .12)}.forge-chip--invalid:not(.forge-chip--disabled):not(.mdc-ripple-upgraded)::after{-webkit-transition:opacity 150ms linear;transition:opacity 150ms linear}.forge-chip--invalid:not(.forge-chip--disabled):not(.mdc-ripple-upgraded):active::after{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity, .12)}.forge-chip--invalid:not(.forge-chip--disabled).mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.12)}.forge-chip--invalid:not(.forge-chip--disabled):not(:disabled){border-color:#b00020;border-color:var(--mdc-theme-error,#b00020)}.forge-chip--invalid:not(.forge-chip--disabled) .forge-chip__delete-button{color:#b00020;color:var(--mdc-theme-error,#b00020)}.forge-chip--invalid:not(.forge-chip--disabled).forge-chip--selected{background-color:#b00020;background-color:var(--mdc-theme-error,#b00020)}.forge-chip--invalid:not(.forge-chip--disabled).forge-chip--selected .forge-chip__delete-button{color:#fff;color:var(--mdc-theme-on-primary,#fff)}:host{display:inline-block}:host([hidden]){display:none}:host([theme=error]){--mdc-theme-primary:var(--mdc-theme-error)}';
 /**
  * The custom element class behind the `<forge-chip>` component.
  *

package/esm/circular-progress/circular-progress-adapter.d.ts

@@ -6,16 +6,16 @@
 import { ICircularProgressComponent } from './circular-progress';
 import { BaseAdapter, IBaseAdapter } from '../core/base/base-adapter';
 export interface ICircularProgressAdapter extends IBaseAdapter {
+    initialize(): void;
     setDeterminate(value: boolean): void;
     setProgress(value: number): void;
-    setAriaLabel(value: string): void;
 }
 export declare class CircularProgressAdapter extends BaseAdapter<ICircularProgressComponent> implements ICircularProgressAdapter {
     private readonly _rootElement;
     private _determinateProgressCircleElement;
     constructor(component: ICircularProgressComponent);
+    initialize(): void;
     setDeterminate(value: boolean): void;
     setProgress(value: number): void;
-    setAriaLabel(value: string): void;
     private _tryResetTemplate;
 }

package/esm/circular-progress/circular-progress-adapter.js

@@ -3,7 +3,7 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { getShadowElement, toggleAttribute } from '@tylertech/forge-core';
+import { getShadowElement } from '@tylertech/forge-core';
 import { CIRCULAR_PROGRESS_CONSTANTS } from './circular-progress-constants';
 import { BaseAdapter } from '../core/base/base-adapter';
 const indeterminateTemplate = '<svg viewBox=\"0 0 4800 4800\"><circle class=\"track-background\" pathLength=\"100\"></circle></svg><div class=\"spinner\"><div class=\"left\"><div class=\"circle\"></div></div><div class=\"right\"><div class=\"circle\"></div></div></div>';
@@ -13,6 +13,18 @@ export class CircularProgressAdapter extends BaseAdapter {
         super(component);
         this._rootElement = getShadowElement(this._component, CIRCULAR_PROGRESS_CONSTANTS.selectors.ROOT);
     }
+    initialize() {
+        // TODO: Replace with ARIA mixin
+        if (!this._component.hasAttribute('role')) {
+            this._component.setAttribute('role', 'progressbar');
+        }
+        if (!this._component.hasAttribute('aria-valuemin')) {
+            this._component.setAttribute('aria-valuemin', '0');
+        }
+        if (!this._component.hasAttribute('aria-valuemax')) {
+            this._component.setAttribute('aria-valuemax', '1');
+        }
+    }
     setDeterminate(value) {
         this._tryResetTemplate();
         this._rootElement.classList.toggle(CIRCULAR_PROGRESS_CONSTANTS.classes.INDETERMINATE, !value);
@@ -22,18 +34,15 @@ export class CircularProgressAdapter extends BaseAdapter {
         }
         else {
             this._rootElement.insertAdjacentHTML('beforeend', indeterminateTemplate);
-            this._rootElement.removeAttribute('aria-valuenow');
+            this._component.removeAttribute('aria-valuenow');
             this._determinateProgressCircleElement = undefined;
         }
     }
     setProgress(value) {
         var _a;
-        this._rootElement.setAttribute('aria-valuenow', `${value}`);
+        this._component.setAttribute('aria-valuenow', `${value}`);
         (_a = this._determinateProgressCircleElement) === null || _a === void 0 ? void 0 : _a.setAttribute('stroke-dashoffset', `${(1 - value) * 100}`);
     }
-    setAriaLabel(value) {
-        toggleAttribute(this._rootElement, !!value, 'aria-label', value);
-    }
     _tryResetTemplate() {
         var _a;
         const elements = (_a = this._component.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll(CIRCULAR_PROGRESS_CONSTANTS.selectors.TEMPLATES);

package/esm/circular-progress/circular-progress-constants.d.ts

@@ -3,12 +3,14 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
+import { Theme } from '../constants';
 export declare const CIRCULAR_PROGRESS_CONSTANTS: {
     elementName: "forge-circular-progress";
     attributes: {
         DETERMINATE: string;
         PROGRESS: string;
-        ARIA_LABEL: string;
+        THEME: string;
+        TRACK: string;
     };
     classes: {
         INDETERMINATE: string;
@@ -19,3 +21,4 @@ export declare const CIRCULAR_PROGRESS_CONSTANTS: {
         TEMPLATES: string;
     };
 };
+export type CircularProgressTheme = Theme;

package/esm/circular-progress/circular-progress-constants.js

@@ -8,7 +8,8 @@ const elementName = `${COMPONENT_NAME_PREFIX}circular-progress`;
 const attributes = {
     DETERMINATE: 'determinate',
     PROGRESS: 'progress',
-    ARIA_LABEL: 'data-aria-label'
+    THEME: 'theme',
+    TRACK: 'track'
 };
 const classes = {
     INDETERMINATE: 'forge-circular-progress--indeterminate'

package/esm/circular-progress/circular-progress-foundation.d.ts

@@ -5,14 +5,19 @@
  */
 import { ICustomElementFoundation } from '@tylertech/forge-core';
 import { ICircularProgressAdapter } from './circular-progress-adapter';
+import { CircularProgressTheme } from './circular-progress-constants';
 export interface ICircularProgressFoundation extends ICustomElementFoundation {
     determinate: boolean;
     progress: number;
+    theme: CircularProgressTheme;
+    track: boolean;
 }
 export declare class CircularProgressFoundation implements ICircularProgressFoundation {
     private _adapter;
     private _determinate;
     private _progress;
+    private _theme;
+    private _track;
     constructor(_adapter: ICircularProgressAdapter);
     initialize(): void;
     private _applyDeterminate;
@@ -20,5 +25,8 @@ export declare class CircularProgressFoundation implements ICircularProgressFoun
     set determinate(value: boolean);
     get progress(): number;
     set progress(value: number);
-    set ariaLabel(value: string);
+    get theme(): CircularProgressTheme;
+    set theme(value: CircularProgressTheme);
+    get track(): boolean;
+    set track(value: boolean);
 }

package/esm/circular-progress/circular-progress-foundation.js

@@ -9,8 +9,11 @@ export class CircularProgressFoundation {
         this._adapter = _adapter;
         this._determinate = false;
         this._progress = 0;
+        this._theme = 'primary';
+        this._track = false;
     }
     initialize() {
+        this._adapter.initialize();
         this._applyDeterminate();
     }
     _applyDeterminate() {
@@ -42,7 +45,23 @@ export class CircularProgressFoundation {
             this._adapter.setHostAttribute(CIRCULAR_PROGRESS_CONSTANTS.attributes.PROGRESS, `${this._progress}`);
         }
     }
-    set ariaLabel(value) {
-        this._adapter.setAriaLabel(value);
+    get theme() {
+        return this._theme;
+    }
+    set theme(value) {
+        if (this._theme !== value) {
+            this._theme = value;
+            this._adapter.toggleHostAttribute(CIRCULAR_PROGRESS_CONSTANTS.attributes.THEME, !!this._theme, this._theme);
+        }
+    }
+    get track() {
+        return this._track;
+    }
+    set track(value) {
+        value = Boolean(value);
+        if (this._track !== value) {
+            this._track = value;
+            this._adapter.toggleHostAttribute(CIRCULAR_PROGRESS_CONSTANTS.attributes.TRACK, this._track);
+        }
     }
 }

package/esm/circular-progress/circular-progress.d.ts

@@ -3,10 +3,13 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
+import { CircularProgressTheme } from './circular-progress-constants';
 import { BaseComponent, IBaseComponent } from '../core/base/base-component';
 export interface ICircularProgressComponent extends IBaseComponent {
     determinate: boolean;
     progress: number;
+    theme: CircularProgressTheme;
+    track: boolean;
 }
 declare global {
     interface HTMLElementTagNameMap {
@@ -26,17 +29,24 @@ declare global {
  *
  * @property {boolean} determinate - Controls the determinate state.
  * @property {boolean} progress - Controls the progress while in a determinate state. Accepts values from `0` to `1`.
+ * @property {CircularProgressTheme} theme - Controls the theme of the progress indicator.
+ * @property {boolean} track - Controls the visibility of the track background.
  *
  * @attribute {boolean} determinate - Controls the determinate state.
- * @attribute {string} data-aria-label - Propagates an `aria-label` to the underlying progressbar element.
+ * @attribute {boolean} progress - Controls the progress while in a determinate state. Accepts values from `0` to `1`.
+ * @attribute {CircularProgressTheme} theme - Controls the theme of the progress indicator.
+ * @attribute {boolean} track - Controls the visibility of the track background.
  *
  * @slot - The is the default/unnamed slot. Renders content at the center of the progress indicator.
  *
  * @cssproperty --forge-circular-progress-size - The height and width of the indicator container.
  * @cssproperty --forge-circular-progress-padding - The padding inside the bounding box of the container.
  * @cssproperty --forge-circular-progress-track-width - The track indicator width.
- * @cssproperty --forge-circular-progress-track-color - The track indicator color.
- * @cssproperty --forge-circular-progress-track-background - The track background color.
+ * @cssproperty --forge-circular-progress-track-color - The track background color.
+ * @cssproperty --forge-circular-progress-indicator-color - The track indicator color.
+ * @cssproperty --forge-circular-progress-arc-duration - The duration of the arc animation.
+ * @cssproperty --forge-circular-progress-theme-transition-duration - The duration of the theme transition.
+ * @cssproperty --forge-circular-progress-theme-transition-timing - The easing function to use for the theme transition.
  *
  * @csspart progressbar - Styles the progress bar container element
  */
@@ -48,4 +58,6 @@ export declare class CircularProgressComponent extends BaseComponent implements
     attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
     determinate: boolean;
     progress: number;
+    theme: CircularProgressTheme;
+    track: boolean;
 }

package/esm/circular-progress/circular-progress.js

@@ -9,8 +9,8 @@ import { CircularProgressAdapter } from './circular-progress-adapter';
 import { CircularProgressFoundation } from './circular-progress-foundation';
 import { CIRCULAR_PROGRESS_CONSTANTS } from './circular-progress-constants';
 import { BaseComponent } from '../core/base/base-component';
-const template = '<template><div class=\"forge-circular-progress\" role=\"progressbar\" aria-valuemin=\"0\" aria-valuemax=\"1\" part=\"progressbar\"><slot class=\"center-content\"></slot></div></template>';
-const styles = ':host{display:-webkit-inline-box;display:inline-flex;vertical-align:middle;min-block-size:var(--forge-circular-progress-size,48px);min-inline-size:var(--forge-circular-progress-size,48px);position:relative;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;contain:strict;content-visibility:auto}:host([hidden]){display:none}.forge-circular-progress{--_size:var(--forge-circular-progress-size, 48px);--_spacing:var(--forge-circular-progress-padding, 0);--_track-width:var(--forge-circular-progress-track-width, 12);--_track-color:var(--forge-circular-progress-track-color, var(--forge-theme-tertiary, #3d5afe));--_track-background:var(--forge-circular-progress-track-background, var(--forge-theme-surface-container, #e0e0e0));--_arc-duration:var(--forge-circular-progress-arc-duration, 1333ms);--_cycle-duration:calc(4 * var(--_arc-duration));--_linear-duration:calc(var(--_arc-duration) * 360 / 306);-webkit-box-flex:1;flex:1;align-self:stretch;margin:var(--_spacing)}.forge-circular-progress--indeterminate{will-change:transform;-webkit-animation:linear infinite linear-rotate;animation:linear infinite linear-rotate;-webkit-animation-duration:var(--_linear-duration);animation-duration:var(--_linear-duration)}.circle,.forge-circular-progress,.left,.right,.spinner,svg{position:absolute;inset:0}.center-content{display:-webkit-box;display:flex;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center;width:100%;height:100%}.left{overflow:hidden;inset:0 50% 0 0}.left .circle{rotate:135deg;inset:0 -100% 0 0}.right{overflow:hidden;inset:0 0 0 50%}.right .circle{rotate:100deg;inset:0 0 0 -100%;-webkit-animation-delay:calc(-.5 * var(--_arc-duration)),0s;animation-delay:calc(-.5 * var(--_arc-duration)),0s}.circle{-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:50%;border:solid calc(var(--_size) * var(--_track-width)/ 100);border-color:var(--_track-color) var(--_track-color) transparent transparent;will-change:transform;-webkit-animation:expand-arc;animation:expand-arc;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:var(--_arc-duration),var(--_cycle-duration);animation-duration:var(--_arc-duration),var(--_cycle-duration);-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1)}svg{-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}svg circle{cx:50%;cy:50%;r:calc(50% * (1 - var(--_track-width)/ 100));stroke-width:calc(var(--_track-width) * 1%);stroke-dasharray:100;fill:transparent}.progress{-webkit-transition:stroke-dashoffset .5s cubic-bezier(0, 0, .2, 1);transition:stroke-dashoffset .5s cubic-bezier(0, 0, .2, 1);stroke:var(--_track-color)}.track{stroke:transparent}.track-background{stroke:var(--_track-background)}.spinner{will-change:transform;-webkit-animation:infinite both rotate-arc;animation:infinite both rotate-arc;-webkit-animation-duration:var(--_cycle-duration);animation-duration:var(--_cycle-duration);-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1)}@media screen and (forced-colors:active){.progress{stroke:CanvasText}.circle{border-color:CanvasText CanvasText Canvas Canvas}}@-webkit-keyframes expand-arc{0%{-webkit-transform:rotate(265deg);transform:rotate(265deg)}50%{-webkit-transform:rotate(130deg);transform:rotate(130deg)}100%{-webkit-transform:rotate(265deg);transform:rotate(265deg)}}@keyframes expand-arc{0%{-webkit-transform:rotate(265deg);transform:rotate(265deg)}50%{-webkit-transform:rotate(130deg);transform:rotate(130deg)}100%{-webkit-transform:rotate(265deg);transform:rotate(265deg)}}@-webkit-keyframes rotate-arc{12.5%{-webkit-transform:rotate(135deg);transform:rotate(135deg)}25%{-webkit-transform:rotate(270deg);transform:rotate(270deg)}37.5%{-webkit-transform:rotate(405deg);transform:rotate(405deg)}50%{-webkit-transform:rotate(540deg);transform:rotate(540deg)}62.5%{-webkit-transform:rotate(675deg);transform:rotate(675deg)}75%{-webkit-transform:rotate(810deg);transform:rotate(810deg)}87.5%{-webkit-transform:rotate(945deg);transform:rotate(945deg)}100%{-webkit-transform:rotate(1080deg);transform:rotate(1080deg)}}@keyframes rotate-arc{12.5%{-webkit-transform:rotate(135deg);transform:rotate(135deg)}25%{-webkit-transform:rotate(270deg);transform:rotate(270deg)}37.5%{-webkit-transform:rotate(405deg);transform:rotate(405deg)}50%{-webkit-transform:rotate(540deg);transform:rotate(540deg)}62.5%{-webkit-transform:rotate(675deg);transform:rotate(675deg)}75%{-webkit-transform:rotate(810deg);transform:rotate(810deg)}87.5%{-webkit-transform:rotate(945deg);transform:rotate(945deg)}100%{-webkit-transform:rotate(1080deg);transform:rotate(1080deg)}}@-webkit-keyframes linear-rotate{to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes linear-rotate{to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}';
+const template = '<template><div class=\"forge-circular-progress\" part=\"progressbar\"><slot class=\"center-content\"></slot></div></template>';
+const styles = ':host{--_circular-progress-size:var(--forge-circular-progress-size, 48px)}:host{display:-webkit-inline-box;display:inline-flex;vertical-align:middle;min-block-size:var(--_circular-progress-size);min-inline-size:var(--_circular-progress-size);position:relative;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;-webkit-transition:background-color var(--_circular-progress-theme-transition-duration) var(--_circular-progress-theme-transition-timing);transition:background-color var(--_circular-progress-theme-transition-duration) var(--_circular-progress-theme-transition-timing);contain:strict;content-visibility:auto}:host([hidden]){display:none}.forge-circular-progress{--_circular-progress-padding:var(--forge-circular-progress-padding, 0);--_circular-progress-track-width:var(--forge-circular-progress-track-width, 12);--_circular-progress-track-color:var(--forge-circular-progress-track-color, transparent);--_circular-progress-track-fill-color:var(--forge-circular-progress-track-fill-color, var(--forge-theme-tertiary-container, #d0d7ff));--_circular-progress-indicator-color:var(--forge-circular-progress-indicator-color, var(--forge-theme-tertiary, #3d5afe));--_circular-progress-arc-duration:var(--forge-circular-progress-arc-duration, 1333ms);--_circular-progress-theme-transition-duration:var(--forge-circular-progress-theme-transition-duration, var(--forge-animation-duration-short3, 150ms));--_circular-progress-theme-transition-timing:var(--forge-circular-progress-theme-transition-timing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)))}.forge-circular-progress{-webkit-box-flex:1;flex:1;align-self:stretch;margin:var(--_circular-progress-padding)}.forge-circular-progress--indeterminate{will-change:transform;-webkit-animation:linear infinite linear-rotate;animation:linear infinite linear-rotate;-webkit-animation-duration:calc(var(--_circular-progress-arc-duration) * 360 / 306);animation-duration:calc(var(--_circular-progress-arc-duration) * 360 / 306)}.circle,.forge-circular-progress,.left,.right,.spinner,svg{position:absolute;inset:0}.center-content{display:-webkit-box;display:flex;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center;width:100%;height:100%}.left{overflow:hidden;inset:0 50% 0 0}.left .circle{rotate:135deg;inset:0 -100% 0 0}.right{overflow:hidden;inset:0 0 0 50%}.right .circle{rotate:100deg;inset:0 0 0 -100%;-webkit-animation-delay:calc(-.5 * var(--_circular-progress-arc-duration)),0s;animation-delay:calc(-.5 * var(--_circular-progress-arc-duration)),0s}.circle{-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:50%;border:solid calc(var(--_circular-progress-size) * var(--_circular-progress-track-width)/ 100);border-color:var(--_circular-progress-indicator-color) var(--_circular-progress-indicator-color) transparent transparent;-webkit-transition:border-color var(--_circular-progress-theme-transition-duration) var(--_circular-progress-theme-transition-timing);transition:border-color var(--_circular-progress-theme-transition-duration) var(--_circular-progress-theme-transition-timing);will-change:transform;-webkit-animation:expand-arc;animation:expand-arc;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:var(--_circular-progress-arc-duration),calc(4 * var(--_circular-progress-arc-duration));animation-duration:var(--_circular-progress-arc-duration),calc(4 * var(--_circular-progress-arc-duration));-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1)}svg{-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}svg circle{cx:50%;cy:50%;r:calc(50% * (1 - var(--_circular-progress-track-width)/ 100));stroke-width:calc(var(--_circular-progress-track-width) * 1%);stroke-dasharray:100;fill:transparent}.progress{-webkit-transition:stroke-dashoffset .5s cubic-bezier(0, 0, .2, 1),stroke var(--_circular-progress-theme-transition-duration) var(--_circular-progress-theme-transition-timing);transition:stroke-dashoffset .5s cubic-bezier(0, 0, .2, 1),stroke var(--_circular-progress-theme-transition-duration) var(--_circular-progress-theme-transition-timing);stroke:var(--_circular-progress-indicator-color)}.track{stroke:transparent}.track-background{-webkit-transition:stroke var(--_circular-progress-theme-transition-duration) var(--_circular-progress-theme-transition-timing);transition:stroke var(--_circular-progress-theme-transition-duration) var(--_circular-progress-theme-transition-timing);stroke:var(--_circular-progress-track-color)}.spinner{will-change:transform;-webkit-animation:infinite both rotate-arc;animation:infinite both rotate-arc;-webkit-animation-duration:calc(4 * var(--_circular-progress-arc-duration));animation-duration:calc(4 * var(--_circular-progress-arc-duration));-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1)}:host([theme=primary]) .forge-circular-progress{--_circular-progress-indicator-color:var(--forge-circular-progress-indicator-color, var(--forge-theme-primary, #3f51b5));--_circular-progress-track-color:var(--forge-circular-progress-track-color, var(--forge-theme-primary-container, #d1d5ed))}:host([theme=secondary]) .forge-circular-progress{--_circular-progress-indicator-color:var(--forge-circular-progress-indicator-color, var(--forge-theme-secondary, #ffc107));--_circular-progress-track-color:var(--forge-circular-progress-track-color, var(--forge-theme-secondary-container, #fff0c3))}:host([theme=success]) .forge-circular-progress{--_circular-progress-indicator-color:var(--forge-circular-progress-indicator-color, var(--forge-theme-success, #2e7d32));--_circular-progress-track-color:var(--forge-circular-progress-track-color, var(--forge-theme-success-container, #cde0ce))}:host([theme=error]) .forge-circular-progress{--_circular-progress-indicator-color:var(--forge-circular-progress-indicator-color, var(--forge-theme-error, #b00020));--_circular-progress-track-color:var(--forge-circular-progress-track-color, var(--forge-theme-error-container, #ecc2c9))}:host([theme=warning]) .forge-circular-progress{--_circular-progress-indicator-color:var(--forge-circular-progress-indicator-color, var(--forge-theme-warning, #d14900));--_circular-progress-track-color:var(--forge-circular-progress-track-color, var(--forge-theme-warning-container, #f4d3c2))}:host([theme=info]) .forge-circular-progress{--_circular-progress-indicator-color:var(--forge-circular-progress-indicator-color, var(--forge-theme-info, #1565c0));--_circular-progress-track-color:var(--forge-circular-progress-track-color, var(--forge-theme-info-container, #c7daf0))}:host([track]) .forge-circular-progress{--_circular-progress-track-color:var(--_circular-progress-track-fill-color)}@media screen and (forced-colors:active){.progress{stroke:CanvasText}.circle{border-color:CanvasText CanvasText Canvas Canvas}}@-webkit-keyframes expand-arc{0%{-webkit-transform:rotate(265deg);transform:rotate(265deg)}50%{-webkit-transform:rotate(130deg);transform:rotate(130deg)}100%{-webkit-transform:rotate(265deg);transform:rotate(265deg)}}@keyframes expand-arc{0%{-webkit-transform:rotate(265deg);transform:rotate(265deg)}50%{-webkit-transform:rotate(130deg);transform:rotate(130deg)}100%{-webkit-transform:rotate(265deg);transform:rotate(265deg)}}@-webkit-keyframes rotate-arc{12.5%{-webkit-transform:rotate(135deg);transform:rotate(135deg)}25%{-webkit-transform:rotate(270deg);transform:rotate(270deg)}37.5%{-webkit-transform:rotate(405deg);transform:rotate(405deg)}50%{-webkit-transform:rotate(540deg);transform:rotate(540deg)}62.5%{-webkit-transform:rotate(675deg);transform:rotate(675deg)}75%{-webkit-transform:rotate(810deg);transform:rotate(810deg)}87.5%{-webkit-transform:rotate(945deg);transform:rotate(945deg)}100%{-webkit-transform:rotate(1080deg);transform:rotate(1080deg)}}@keyframes rotate-arc{12.5%{-webkit-transform:rotate(135deg);transform:rotate(135deg)}25%{-webkit-transform:rotate(270deg);transform:rotate(270deg)}37.5%{-webkit-transform:rotate(405deg);transform:rotate(405deg)}50%{-webkit-transform:rotate(540deg);transform:rotate(540deg)}62.5%{-webkit-transform:rotate(675deg);transform:rotate(675deg)}75%{-webkit-transform:rotate(810deg);transform:rotate(810deg)}87.5%{-webkit-transform:rotate(945deg);transform:rotate(945deg)}100%{-webkit-transform:rotate(1080deg);transform:rotate(1080deg)}}@-webkit-keyframes linear-rotate{to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes linear-rotate{to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}';
 /**
  * @tag forge-circular-progress
  *
@@ -24,17 +24,24 @@ const styles = ':host{display:-webkit-inline-box;display:inline-flex;vertical-al
  *
  * @property {boolean} determinate - Controls the determinate state.
  * @property {boolean} progress - Controls the progress while in a determinate state. Accepts values from `0` to `1`.
+ * @property {CircularProgressTheme} theme - Controls the theme of the progress indicator.
+ * @property {boolean} track - Controls the visibility of the track background.
  *
  * @attribute {boolean} determinate - Controls the determinate state.
- * @attribute {string} data-aria-label - Propagates an `aria-label` to the underlying progressbar element.
+ * @attribute {boolean} progress - Controls the progress while in a determinate state. Accepts values from `0` to `1`.
+ * @attribute {CircularProgressTheme} theme - Controls the theme of the progress indicator.
+ * @attribute {boolean} track - Controls the visibility of the track background.
  *
  * @slot - The is the default/unnamed slot. Renders content at the center of the progress indicator.
  *
  * @cssproperty --forge-circular-progress-size - The height and width of the indicator container.
  * @cssproperty --forge-circular-progress-padding - The padding inside the bounding box of the container.
  * @cssproperty --forge-circular-progress-track-width - The track indicator width.
- * @cssproperty --forge-circular-progress-track-color - The track indicator color.
- * @cssproperty --forge-circular-progress-track-background - The track background color.
+ * @cssproperty --forge-circular-progress-track-color - The track background color.
+ * @cssproperty --forge-circular-progress-indicator-color - The track indicator color.
+ * @cssproperty --forge-circular-progress-arc-duration - The duration of the arc animation.
+ * @cssproperty --forge-circular-progress-theme-transition-duration - The duration of the theme transition.
+ * @cssproperty --forge-circular-progress-theme-transition-timing - The easing function to use for the theme transition.
  *
  * @csspart progressbar - Styles the progress bar container element
  */
@@ -43,7 +50,8 @@ let CircularProgressComponent = class CircularProgressComponent extends BaseComp
         return [
             CIRCULAR_PROGRESS_CONSTANTS.attributes.DETERMINATE,
             CIRCULAR_PROGRESS_CONSTANTS.attributes.PROGRESS,
-            CIRCULAR_PROGRESS_CONSTANTS.attributes.ARIA_LABEL
+            CIRCULAR_PROGRESS_CONSTANTS.attributes.THEME,
+            CIRCULAR_PROGRESS_CONSTANTS.attributes.TRACK
         ];
     }
     constructor() {
@@ -62,8 +70,11 @@ let CircularProgressComponent = class CircularProgressComponent extends BaseComp
             case CIRCULAR_PROGRESS_CONSTANTS.attributes.PROGRESS:
                 this.progress = coerceNumber(newValue);
                 break;
-            case CIRCULAR_PROGRESS_CONSTANTS.attributes.ARIA_LABEL:
-                this._foundation.ariaLabel = newValue;
+            case CIRCULAR_PROGRESS_CONSTANTS.attributes.THEME:
+                this.theme = newValue;
+                break;
+            case CIRCULAR_PROGRESS_CONSTANTS.attributes.TRACK:
+                this.track = coerceBoolean(newValue);
                 break;
         }
     }
@@ -74,6 +85,12 @@ __decorate([
 __decorate([
     FoundationProperty()
 ], CircularProgressComponent.prototype, "progress", void 0);
+__decorate([
+    FoundationProperty()
+], CircularProgressComponent.prototype, "theme", void 0);
+__decorate([
+    FoundationProperty()
+], CircularProgressComponent.prototype, "track", void 0);
 CircularProgressComponent = __decorate([
     CustomElement({
         name: CIRCULAR_PROGRESS_CONSTANTS.elementName

package/esm/color-picker/color-picker.js

@@ -13,8 +13,8 @@ import { TooltipComponent } from '../tooltip';
 import { ColorPickerAdapter } from './color-picker-adapter';
 import { COLOR_PICKER_CONSTANTS } from './color-picker-constants';
 import { ColorPickerFoundation } from './color-picker-foundation';
-const template = '<template><div class=\"forge-color-picker\" part=\"root\"><input type=\"color\" tabindex=\"-1\" class=\"forge-color-picker__input\" spellcheck=\"false\" autocomplete=\"off\" aria-label=\"Color picker value\" part=\"input\"><div class=\"forge-color-picker__container\" part=\"container\"><div class=\"forge-color-picker__gradient\" tabindex=\"0\" part=\"gradient\"><div class=\"forge-color-picker__gradient-color\" part=\"gradient-color\"></div><div class=\"forge-color-picker__gradient-thumb\" part=\"gradient-thumb\"></div></div><div class=\"forge-color-picker__control-preview\" part=\"controls-preview-container\"><div class=\"forge-color-picker__controls\" part=\"controls-container\"><div class=\"forge-color-picker__slider-control\" part=\"hue-control-container\"><div class=\"forge-color-picker__slider forge-color-picker__hue-slider\" part=\"hue-control-slider\"><div class=\"forge-color-picker__slider-thumb\" id=\"forge-color-picker-hue-thumb\" part=\"hue-control-slider-thumb\" tabindex=\"0\" role=\"slider\" aria-label=\"Change hue\" aria-valuemin=\"0\" aria-valuemax=\"360\" aria-valuenow=\"0\" aria-orientation=\"horizontal\" aria-valuetext=\"0\"></div></div></div><div class=\"forge-color-picker__slider-control\" part=\"opacity-control-container\"><div class=\"forge-color-picker__canvas\" part=\"opacity-control-canvas\"><div class=\"forge-color-picker__slider forge-color-picker__opacity-slider\" part=\"opacity-control-slider\"><div class=\"forge-color-picker__slider-thumb\" id=\"forge-color-picker-opacity-thumb\" part=\"opacity-control-slider-thumb\" tabindex=\"0\" role=\"slider\" aria-label=\"Change opacity\" aria-valuemin=\"0\" aria-valuemax=\"100\" aria-valuenow=\"0\" aria-orientation=\"horizontal\" aria-valuetext=\"0\"></div></div></div></div></div><div class=\"forge-color-picker__color-preview-container forge-color-picker__canvas\" part=\"color-preview-container\"><div class=\"forge-color-picker__color-preview\" part=\"color-preview\"></div></div></div><div class=\"forge-color-picker__value\" part=\"value-container\"><div class=\"forge-color-picker__color-types\" part=\"types-container\"><div class=\"forge-color-picker__color-hex\" part=\"hex-type-container\"><div part=\"hex-type-label-wrapper\"><label for=\"forge-color-picker-hex-input\" part=\"hex-label\">HEX</label></div><input type=\"text\" id=\"forge-color-picker-hex-input\" part=\"hex-input\" style=\"width: 88px;\" maxlength=\"9\" spellcheck=\"false\" autocomplete=\"off\" aria-label=\"HEX value\"></div><div class=\"forge-color-picker__color-rgba\" part=\"rgba-type-container\"><div part=\"rgba-type-wrapper-r\"><label for=\"forge-color-picker-rgba-r-input\" part=\"rgba-type-label-r\">R</label> <input type=\"number\" id=\"forge-color-picker-rgba-r-input\" part=\"rgba-type-input-r\" min=\"0\" max=\"255\" maxlength=\"3\" autocomplete=\"off\" aria-label=\"Red\"></div><div part=\"rgba-type-wrapper-g\"><label for=\"forge-color-picker-rgba-g-input\" part=\"rgba-type-label-g\">G</label> <input type=\"number\" id=\"forge-color-picker-rgba-g-input\" part=\"rgba-type-input-g\" min=\"0\" max=\"255\" maxlength=\"3\" autocomplete=\"off\" aria-label=\"Green\"></div><div part=\"rgba-type-wrapper-b\"><label for=\"forge-color-picker-rgba-b-input\" part=\"rgba-type-label-b\">B</label> <input type=\"number\" id=\"forge-color-picker-rgba-b-input\" part=\"rgba-type-input-b\" min=\"0\" max=\"255\" maxlength=\"3\" autocomplete=\"off\" aria-label=\"Blue\"></div><div part=\"rgba-type-wrapper-a\"><label for=\"forge-color-picker-rgba-a-input\" part=\"rgba-type-label-a\">A</label> <input type=\"number\" id=\"forge-color-picker-rgba-a-input\" part=\"rgba-type-input-a\" min=\"0\" max=\"1\" step=\"0.1\" maxlength=\"3\" autocomplete=\"off\" aria-label=\"Alpha\"></div></div><div class=\"forge-color-picker__color-hsva\" part=\"hsva-type-container\"><div part=\"hsva-type-wrapper-h\"><label for=\"forge-color-picker-hsva-h-input\" part=\"hsva-type-label-h\">H</label> <input type=\"number\" id=\"forge-color-picker-hsva-h-input\" part=\"hsva-type-input-h\" min=\"0\" max=\"360\" maxlength=\"3\" autocomplete=\"off\" aria-label=\"Hue\"></div><div part=\"hsva-type-wrapper-s\"><label for=\"forge-color-picker-hsva-s-input\" part=\"hsva-type-label-s\">S</label> <input type=\"number\" id=\"forge-color-picker-hsva-s-input\" part=\"hsva-type-input-s\" min=\"0\" max=\"100\" maxlength=\"3\" autocomplete=\"off\" aria-label=\"Saturation\"></div><div part=\"hsva-type-wrapper-v\"><label for=\"forge-color-picker-hsva-v-input\" part=\"hsva-type-label-v\">V</label> <input type=\"number\" id=\"forge-color-picker-hsva-v-input\" part=\"hsva-type-input-v\" min=\"0\" max=\"100\" maxlength=\"3\" autocomplete=\"off\" aria-label=\"Value\"></div><div part=\"hsva-type-wrapper-a\"><label for=\"forge-color-picker-hsva-a-input\" part=\"hsva-type-label-a\">A</label> <input type=\"number\" id=\"forge-color-picker-hsva-a-input\" part=\"hsva-type-input-a\" min=\"0\" max=\"1\" step=\"0.1\" maxlength=\"3\" autocomplete=\"off\" aria-label=\"Alpha\"></div></div></div><div class=\"forge-color-picker__type-button\" part=\"type-container\"><forge-icon-button part=\"type-button\"><button type=\"button\" id=\"forge-color-picker-type-button\" aria-labelledby=\"type-button-tooltip\" part=\"type-button-element\"><forge-icon name=\"unfold_more\" part=\"type-button-icon\"></forge-icon></button><forge-tooltip delay=\"500\" position=\"bottom\" id=\"type-button-tooltip\">Change color format</forge-tooltip></forge-icon-button></div></div></div></div></template>';
-const styles = '.forge-icon-button{display:-webkit-inline-box;display:inline-flex;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center;position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;border:none;outline:0;background-color:transparent;fill:currentColor;color:inherit;font-size:24px;text-decoration:none;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:48px;height:48px;padding:12px}.forge-icon-button forge-icon,.forge-icon-button img,.forge-icon-button svg{width:24px;height:24px}.forge-icon-button:disabled{color:rgba(0,0,0,.38);color:var(--mdc-theme-text-disabled-on-light,rgba(0,0,0,.38))}.forge-icon-button:disabled{cursor:default;pointer-events:none}.forge-icon-button__icon{display:inline-block}.forge-icon-button__icon.forge-icon-button__icon--on{display:none}.forge-icon-button--on .forge-icon-button__icon{display:none}.forge-icon-button--on .forge-icon-button__icon.forge-icon-button__icon--on{display:inline-block}@-webkit-keyframes mdc-ripple-fg-radius-in{from{-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1);-webkit-transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1);transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1)}to{-webkit-transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1));transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}}@keyframes mdc-ripple-fg-radius-in{from{-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1);-webkit-transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1);transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1)}to{-webkit-transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1));transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}}@-webkit-keyframes mdc-ripple-fg-opacity-in{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:0}to{opacity:var(--mdc-ripple-fg-opacity, 0)}}@keyframes mdc-ripple-fg-opacity-in{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:0}to{opacity:var(--mdc-ripple-fg-opacity, 0)}}@-webkit-keyframes mdc-ripple-fg-opacity-out{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:var(--mdc-ripple-fg-opacity, 0)}to{opacity:0}}@keyframes mdc-ripple-fg-opacity-out{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:var(--mdc-ripple-fg-opacity, 0)}to{opacity:0}}.forge-icon-button{--mdc-ripple-fg-size:0;--mdc-ripple-left:0;--mdc-ripple-top:0;--mdc-ripple-fg-scale:1;--mdc-ripple-fg-translate-end:0;--mdc-ripple-fg-translate-start:0;-webkit-tap-highlight-color:transparent;will-change:transform,opacity}.forge-icon-button::after,.forge-icon-button::before{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:\"\"}.forge-icon-button::before{-webkit-transition:opacity 15ms linear,background-color 15ms linear;transition:opacity 15ms linear,background-color 15ms linear;z-index:1;z-index:var(--mdc-ripple-z-index,1)}.forge-icon-button::after{z-index:0;z-index:var(--mdc-ripple-z-index,0)}.forge-icon-button.mdc-ripple-upgraded::before{-webkit-transform:scale(var(--mdc-ripple-fg-scale,1));transform:scale(var(--mdc-ripple-fg-scale,1))}.forge-icon-button.mdc-ripple-upgraded::after{top:0;left:0;-webkit-transform:scale(0);transform:scale(0);-webkit-transform-origin:center center;transform-origin:center center}.forge-icon-button.mdc-ripple-upgraded--unbounded::after{top:var(--mdc-ripple-top,0);left:var(--mdc-ripple-left,0)}.forge-icon-button.mdc-ripple-upgraded--foreground-activation::after{-webkit-animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards;animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards}.forge-icon-button.mdc-ripple-upgraded--foreground-deactivation::after{-webkit-animation:mdc-ripple-fg-opacity-out 150ms;animation:mdc-ripple-fg-opacity-out 150ms;-webkit-transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1));transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}.forge-icon-button::after,.forge-icon-button::before{top:calc(50% - 50%);left:calc(50% - 50%);width:100%;height:100%}.forge-icon-button.mdc-ripple-upgraded::after,.forge-icon-button.mdc-ripple-upgraded::before{top:var(--mdc-ripple-top,calc(50% - 50%));left:var(--mdc-ripple-left,calc(50% - 50%));width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.forge-icon-button.mdc-ripple-upgraded::after{width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.forge-icon-button::after,.forge-icon-button::before{background-color:#000;background-color:var(--mdc-ripple-color,var(--mdc-theme-on-surface,#000))}.forge-icon-button.mdc-ripple-surface--hover::before,.forge-icon-button:hover::before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity, .04)}.forge-icon-button.mdc-ripple-upgraded--background-focused::before,.forge-icon-button:not(.mdc-ripple-upgraded):focus::before{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity, .12)}.forge-icon-button:not(.mdc-ripple-upgraded)::after{-webkit-transition:opacity 150ms linear;transition:opacity 150ms linear}.forge-icon-button:not(.mdc-ripple-upgraded):active::after{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity, .12)}.forge-icon-button.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.12)}forge-icon-button{position:relative;display:inline-block;overflow:visible}.forge-icon-button--on{color:#6200ee;color:var(--mdc-theme-primary,#6200ee)}.forge-icon-button--on::after,.forge-icon-button--on::before{background-color:#6200ee;background-color:var(--mdc-ripple-color,var(--mdc-theme-primary,#6200ee))}.forge-icon-button--on.mdc-ripple-surface--hover::before,.forge-icon-button--on:hover::before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity, .04)}.forge-icon-button--on.mdc-ripple-upgraded--background-focused::before,.forge-icon-button--on:not(.mdc-ripple-upgraded):focus::before{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity, .12)}.forge-icon-button--on:not(.mdc-ripple-upgraded)::after{-webkit-transition:opacity 150ms linear;transition:opacity 150ms linear}.forge-icon-button--on:not(.mdc-ripple-upgraded):active::after{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity, .12)}.forge-icon-button--on.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.12)}.forge-icon-button--on::before{background-color:#6200ee;background-color:var(--mdc-theme-primary,#6200ee);opacity:.08}.forge-icon-button--dense{width:28px;height:28px;padding:2px;padding:0}.forge-icon-button--dense-1{width:44px;height:44px;padding:10px}.forge-icon-button--dense-2{width:40px;height:40px;padding:8px}.forge-icon-button--dense-3{width:36px;height:36px;padding:6px}.forge-icon-button--dense-4{width:32px;height:32px;padding:4px}.forge-icon-button--dense-5{width:28px;height:28px;padding:2px}.forge-icon-button--dense-6{width:24px;height:24px;padding:0}.forge-icon-button--with-badge forge-badge{z-index:1;z-index:var(--forge-z-index-surface,1);pointer-events:none;--forge-badge-max-width:32px;--forge-badge-border:1px solid transparent}.forge-icon-button--with-badge forge-badge[app-bar-context]{--forge-badge-border:2px solid var(--forge-app-bar-theme-background)}*{-webkit-box-sizing:border-box;box-sizing:border-box}.forge-color-picker{width:272px;width:var(--forge-color-picker-width,272px);position:relative;display:inline-block;overflow:hidden}.forge-color-picker__input{height:1px;opacity:0;position:absolute;width:1px}.forge-color-picker__gradient{position:relative;outline:0}.forge-color-picker__gradient-color{background:-webkit-gradient(linear,left top,left bottom,color-stop(0,rgba(0,0,0,0)),to(#000)),-webkit-gradient(linear,left top,right top,color-stop(0,#fff),to(rgba(255,255,255,0)));background:linear-gradient(to bottom,rgba(0,0,0,0) 0,#000 100%),linear-gradient(to right,#fff 0,rgba(255,255,255,0) 100%);height:152px}.forge-color-picker__gradient-thumb{border:1px solid #fff;border-radius:50%;cursor:pointer;display:inline-block;height:10px;width:10px;margin-left:-5px;margin-top:-5px;position:absolute;touch-action:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-transition:left .2s cubic-bezier(.25, .8, .25, 1) 0s,top .2s cubic-bezier(.25, .8, .25, 1) 0s;transition:left .2s cubic-bezier(.25, .8, .25, 1) 0s,top .2s cubic-bezier(.25, .8, .25, 1) 0s}.forge-color-picker__control-preview{display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;width:100%;padding:16px}.forge-color-picker__controls{-webkit-box-flex:1;flex:1;margin-right:16px}.forge-color-picker__slider{position:relative}.forge-color-picker__slider-thumb{outline:0;height:16px;width:16px;background-color:#fff;-webkit-box-shadow:0 1px 2px rgba(0,0,0,.3);box-shadow:0 1px 2px rgba(0,0,0,.3);position:absolute;border-radius:50%;top:calc(50% - 8px);margin-left:-8px;-webkit-transition:left .4s cubic-bezier(.25, .8, .25, 1);transition:left .4s cubic-bezier(.25, .8, .25, 1)}.forge-color-picker__slider-thumb--active{-webkit-transition:none;transition:none}.forge-color-picker__slider-thumb:hover{cursor:pointer}.forge-color-picker__color-preview-container{border-radius:50%;-webkit-box-shadow:0 0 2px 0 rgba(0,0,0,.54) inset,0 0 2px 0 rgba(0,0,0,.54);box-shadow:0 0 2px 0 rgba(0,0,0,.54) inset,0 0 2px 0 rgba(0,0,0,.54);overflow:hidden}.forge-color-picker__color-preview{height:32px;width:32px;-webkit-transition:background-color .2s cubic-bezier(.25, .8, .25, 1);transition:background-color .2s cubic-bezier(.25, .8, .25, 1)}.forge-color-picker__value{display:-webkit-box;display:flex;width:100%;-webkit-box-align:center;align-items:center;padding:0 8px 16px 16px;font-size:12px}.forge-color-picker__color-types{-webkit-box-flex:1;flex:1}.forge-color-picker__color-types label{-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));font-size:.75rem;font-size:var(--mdc-typography-caption-font-size, .75rem);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);color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-light,rgba(0,0,0,.54))}.forge-color-picker__color-types input{-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));font-size:.75rem;font-size:var(--mdc-typography-caption-font-size, .75rem);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)}.forge-color-picker__color-types input[type=number],.forge-color-picker__color-types input[type=text]{color:#000;color:var(--mdc-theme-on-surface,#000);border-color:#e0e0e0;border-color:var(--forge-theme-border-color,#e0e0e0);background-color:transparent;padding:4px 8px;border-width:1px;border-style:solid;border-radius:4px;-webkit-box-sizing:border-box;box-sizing:border-box;outline:0;-webkit-transition:border-color .2s 0s cubic-bezier(0, 0, .2, 1),-webkit-box-shadow .2s 0s cubic-bezier(0, 0, .2, 1);transition:border-color .2s 0s cubic-bezier(0, 0, .2, 1),-webkit-box-shadow .2s 0s cubic-bezier(0, 0, .2, 1);transition:box-shadow .2s 0s cubic-bezier(0, 0, .2, 1),border-color .2s 0s cubic-bezier(0, 0, .2, 1);transition:box-shadow .2s 0s cubic-bezier(0, 0, .2, 1),border-color .2s 0s cubic-bezier(0, 0, .2, 1),-webkit-box-shadow .2s 0s cubic-bezier(0, 0, .2, 1)}.forge-color-picker__color-types input[type=number]:hover,.forge-color-picker__color-types input[type=text]:hover{border-color:rgba(0,0,0,.87);border-color:var(--mdc-theme-text-primary-on-background,rgba(0,0,0,.87))}.forge-color-picker__color-types input[type=number]:focus,.forge-color-picker__color-types input[type=text]:focus{border-color:#6200ee;border-color:var(--mdc-theme-primary,#6200ee);-webkit-box-shadow:0 0 0 1px inset #3f51b5;box-shadow:0 0 0 1px inset #3f51b5;-webkit-box-shadow:0 0 0 1px inset var(--mdc-theme-primary,#3f51b5);box-shadow:0 0 0 1px inset var(--mdc-theme-primary,#3f51b5)}.forge-color-picker__color-types input[type=number]{text-align:center;-moz-appearance:textfield}.forge-color-picker__color-types input[type=number]::-webkit-inner-spin-button,.forge-color-picker__color-types input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;appearance:none;margin:0}.forge-color-picker__color-hex{display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;-webkit-box-pack:center;justify-content:center;-webkit-box-align:space-between;align-items:space-between}.forge-color-picker__canvas{background-image:url(\"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iNnB4IiBoZWlnaHQ9IjZweCIgdmlld0JveD0iMCAwIDYgNiIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDwhLS0gR2VuZXJhdG9yOiBTa2V0Y2ggNTAgKDU0OTgzKSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT5Hcm91cCA5PC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+PC9kZWZzPgogICAgPGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9Ikdyb3VwLTkiPgogICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTExIiBmaWxsPSIjRTBFMEUwIiB4PSIwIiB5PSIwIiB3aWR0aD0iMyIgaGVpZ2h0PSIzIj48L3JlY3Q+CiAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtMTEtQ29weS0yIiBmaWxsPSIjRkZGRkZGIiB4PSIwIiB5PSIzIiB3aWR0aD0iMyIgaGVpZ2h0PSIzIj48L3JlY3Q+CiAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtMTEtQ29weSIgZmlsbD0iI0ZGRkZGRiIgeD0iMyIgeT0iMCIgd2lkdGg9IjMiIGhlaWdodD0iMyI+PC9yZWN0PgogICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTExLUNvcHktMyIgZmlsbD0iI0UwRTBFMCIgeD0iMyIgeT0iMyIgd2lkdGg9IjMiIGhlaWdodD0iMyI+PC9yZWN0PgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+\")}.forge-color-picker__hue-slider{height:8px;background:-webkit-gradient(linear,left top,right top,color-stop(0,red),color-stop(16%,#ff0),color-stop(33%,#0f0),color-stop(50%,#0ff),color-stop(67%,#00f),color-stop(84%,#f0f),to(#ff0004));background:linear-gradient(to right,red 0,#ff0 16%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 84%,#ff0004 100%)}.forge-color-picker__opacity-slider{height:8px;margin-top:16px;background:-webkit-gradient(linear,left top,right top,from(rgba(255,0,0,0)),to(red));background:linear-gradient(to right,rgba(255,0,0,0) 0,red 100%)}.forge-color-picker__color-hsva,.forge-color-picker__color-rgba{display:-webkit-box;display:flex}.forge-color-picker__color-hsva div,.forge-color-picker__color-rgba div{margin-right:4px}.forge-color-picker__color-hsva label,.forge-color-picker__color-rgba label{display:block;text-align:center}.forge-color-picker__color-hsva input,.forge-color-picker__color-rgba input{width:44px}:host{display:inline-block}:host([hidden]){display:none}';
+const template = '<template><div class=\"forge-color-picker\" part=\"root\"><input type=\"color\" tabindex=\"-1\" class=\"forge-color-picker__input\" spellcheck=\"false\" autocomplete=\"off\" aria-label=\"Color picker value\" part=\"input\"><div class=\"forge-color-picker__container\" part=\"container\"><div class=\"forge-color-picker__gradient\" tabindex=\"0\" part=\"gradient\"><div class=\"forge-color-picker__gradient-color\" part=\"gradient-color\"></div><div class=\"forge-color-picker__gradient-thumb\" part=\"gradient-thumb\"></div></div><div class=\"forge-color-picker__control-preview\" part=\"controls-preview-container\"><div class=\"forge-color-picker__controls\" part=\"controls-container\"><div class=\"forge-color-picker__slider-control\" part=\"hue-control-container\"><div class=\"forge-color-picker__slider forge-color-picker__hue-slider\" part=\"hue-control-slider\"><div class=\"forge-color-picker__slider-thumb\" id=\"forge-color-picker-hue-thumb\" part=\"hue-control-slider-thumb\" tabindex=\"0\" role=\"slider\" aria-label=\"Change hue\" aria-valuemin=\"0\" aria-valuemax=\"360\" aria-valuenow=\"0\" aria-orientation=\"horizontal\" aria-valuetext=\"0\"></div></div></div><div class=\"forge-color-picker__slider-control\" part=\"opacity-control-container\"><div class=\"forge-color-picker__canvas\" part=\"opacity-control-canvas\"><div class=\"forge-color-picker__slider forge-color-picker__opacity-slider\" part=\"opacity-control-slider\"><div class=\"forge-color-picker__slider-thumb\" id=\"forge-color-picker-opacity-thumb\" part=\"opacity-control-slider-thumb\" tabindex=\"0\" role=\"slider\" aria-label=\"Change opacity\" aria-valuemin=\"0\" aria-valuemax=\"100\" aria-valuenow=\"0\" aria-orientation=\"horizontal\" aria-valuetext=\"0\"></div></div></div></div></div><div class=\"forge-color-picker__color-preview-container forge-color-picker__canvas\" part=\"color-preview-container\"><div class=\"forge-color-picker__color-preview\" part=\"color-preview\"></div></div></div><div class=\"forge-color-picker__value\" part=\"value-container\"><div class=\"forge-color-picker__color-types\" part=\"types-container\"><div class=\"forge-color-picker__color-hex\" part=\"hex-type-container\"><div part=\"hex-type-label-wrapper\"><label for=\"forge-color-picker-hex-input\" part=\"hex-label\">HEX</label></div><input type=\"text\" id=\"forge-color-picker-hex-input\" part=\"hex-input\" style=\"width: 88px;\" maxlength=\"9\" spellcheck=\"false\" autocomplete=\"off\" aria-label=\"HEX value\"></div><div class=\"forge-color-picker__color-rgba\" part=\"rgba-type-container\"><div part=\"rgba-type-wrapper-r\"><label for=\"forge-color-picker-rgba-r-input\" part=\"rgba-type-label-r\">R</label> <input type=\"number\" id=\"forge-color-picker-rgba-r-input\" part=\"rgba-type-input-r\" min=\"0\" max=\"255\" maxlength=\"3\" autocomplete=\"off\" aria-label=\"Red\"></div><div part=\"rgba-type-wrapper-g\"><label for=\"forge-color-picker-rgba-g-input\" part=\"rgba-type-label-g\">G</label> <input type=\"number\" id=\"forge-color-picker-rgba-g-input\" part=\"rgba-type-input-g\" min=\"0\" max=\"255\" maxlength=\"3\" autocomplete=\"off\" aria-label=\"Green\"></div><div part=\"rgba-type-wrapper-b\"><label for=\"forge-color-picker-rgba-b-input\" part=\"rgba-type-label-b\">B</label> <input type=\"number\" id=\"forge-color-picker-rgba-b-input\" part=\"rgba-type-input-b\" min=\"0\" max=\"255\" maxlength=\"3\" autocomplete=\"off\" aria-label=\"Blue\"></div><div part=\"rgba-type-wrapper-a\"><label for=\"forge-color-picker-rgba-a-input\" part=\"rgba-type-label-a\">A</label> <input type=\"number\" id=\"forge-color-picker-rgba-a-input\" part=\"rgba-type-input-a\" min=\"0\" max=\"1\" step=\"0.1\" maxlength=\"3\" autocomplete=\"off\" aria-label=\"Alpha\"></div></div><div class=\"forge-color-picker__color-hsva\" part=\"hsva-type-container\"><div part=\"hsva-type-wrapper-h\"><label for=\"forge-color-picker-hsva-h-input\" part=\"hsva-type-label-h\">H</label> <input type=\"number\" id=\"forge-color-picker-hsva-h-input\" part=\"hsva-type-input-h\" min=\"0\" max=\"360\" maxlength=\"3\" autocomplete=\"off\" aria-label=\"Hue\"></div><div part=\"hsva-type-wrapper-s\"><label for=\"forge-color-picker-hsva-s-input\" part=\"hsva-type-label-s\">S</label> <input type=\"number\" id=\"forge-color-picker-hsva-s-input\" part=\"hsva-type-input-s\" min=\"0\" max=\"100\" maxlength=\"3\" autocomplete=\"off\" aria-label=\"Saturation\"></div><div part=\"hsva-type-wrapper-v\"><label for=\"forge-color-picker-hsva-v-input\" part=\"hsva-type-label-v\">V</label> <input type=\"number\" id=\"forge-color-picker-hsva-v-input\" part=\"hsva-type-input-v\" min=\"0\" max=\"100\" maxlength=\"3\" autocomplete=\"off\" aria-label=\"Value\"></div><div part=\"hsva-type-wrapper-a\"><label for=\"forge-color-picker-hsva-a-input\" part=\"hsva-type-label-a\">A</label> <input type=\"number\" id=\"forge-color-picker-hsva-a-input\" part=\"hsva-type-input-a\" min=\"0\" max=\"1\" step=\"0.1\" maxlength=\"3\" autocomplete=\"off\" aria-label=\"Alpha\"></div></div></div><div class=\"forge-color-picker__type-button\" part=\"type-container\"><forge-icon-button part=\"type-button\" id=\"forge-color-picker-type-button\" aria-labelledby=\"type-button-tooltip\" part=\"type-button-element\"><forge-icon name=\"unfold_more\" part=\"type-button-icon\"></forge-icon></forge-icon-button><forge-tooltip delay=\"500\" position=\"bottom\" id=\"type-button-tooltip\">Change color format</forge-tooltip></div></div></div></div></template>';
+const styles = '*{-webkit-box-sizing:border-box;box-sizing:border-box}.forge-color-picker{width:272px;width:var(--forge-color-picker-width,272px);position:relative;display:inline-block;overflow:hidden}.forge-color-picker__input{height:1px;opacity:0;position:absolute;width:1px}.forge-color-picker__gradient{position:relative;outline:0}.forge-color-picker__gradient-color{background:-webkit-gradient(linear,left top,left bottom,color-stop(0,rgba(0,0,0,0)),to(#000)),-webkit-gradient(linear,left top,right top,color-stop(0,#fff),to(rgba(255,255,255,0)));background:linear-gradient(to bottom,rgba(0,0,0,0) 0,#000 100%),linear-gradient(to right,#fff 0,rgba(255,255,255,0) 100%);height:152px}.forge-color-picker__gradient-thumb{border:1px solid #fff;border-radius:50%;cursor:pointer;display:inline-block;height:10px;width:10px;margin-left:-5px;margin-top:-5px;position:absolute;touch-action:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-transition:left .2s cubic-bezier(.25, .8, .25, 1) 0s,top .2s cubic-bezier(.25, .8, .25, 1) 0s;transition:left .2s cubic-bezier(.25, .8, .25, 1) 0s,top .2s cubic-bezier(.25, .8, .25, 1) 0s}.forge-color-picker__control-preview{display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;width:100%;padding:16px}.forge-color-picker__controls{-webkit-box-flex:1;flex:1;margin-right:16px}.forge-color-picker__slider{position:relative}.forge-color-picker__slider-thumb{outline:0;height:16px;width:16px;background-color:#fff;-webkit-box-shadow:0 1px 2px rgba(0,0,0,.3);box-shadow:0 1px 2px rgba(0,0,0,.3);position:absolute;border-radius:50%;top:calc(50% - 8px);margin-left:-8px;-webkit-transition:left .4s cubic-bezier(.25, .8, .25, 1);transition:left .4s cubic-bezier(.25, .8, .25, 1)}.forge-color-picker__slider-thumb--active{-webkit-transition:none;transition:none}.forge-color-picker__slider-thumb:hover{cursor:pointer}.forge-color-picker__color-preview-container{border-radius:50%;-webkit-box-shadow:0 0 2px 0 rgba(0,0,0,.54) inset,0 0 2px 0 rgba(0,0,0,.54);box-shadow:0 0 2px 0 rgba(0,0,0,.54) inset,0 0 2px 0 rgba(0,0,0,.54);overflow:hidden}.forge-color-picker__color-preview{height:32px;width:32px;-webkit-transition:background-color .2s cubic-bezier(.25, .8, .25, 1);transition:background-color .2s cubic-bezier(.25, .8, .25, 1)}.forge-color-picker__value{display:-webkit-box;display:flex;width:100%;-webkit-box-align:center;align-items:center;padding:0 8px 16px 16px;font-size:12px}.forge-color-picker__color-types{-webkit-box-flex:1;flex:1}.forge-color-picker__color-types label{-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));font-size:.75rem;font-size:var(--mdc-typography-caption-font-size, .75rem);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);color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-light,rgba(0,0,0,.54))}.forge-color-picker__color-types input{-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));font-size:.75rem;font-size:var(--mdc-typography-caption-font-size, .75rem);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)}.forge-color-picker__color-types input[type=number],.forge-color-picker__color-types input[type=text]{color:#000;color:var(--mdc-theme-on-surface,#000);border-color:#e0e0e0;border-color:var(--forge-theme-border-color,#e0e0e0);background-color:transparent;padding:4px 8px;border-width:1px;border-style:solid;border-radius:4px;-webkit-box-sizing:border-box;box-sizing:border-box;outline:0;-webkit-transition:border-color .2s 0s cubic-bezier(0, 0, .2, 1),-webkit-box-shadow .2s 0s cubic-bezier(0, 0, .2, 1);transition:border-color .2s 0s cubic-bezier(0, 0, .2, 1),-webkit-box-shadow .2s 0s cubic-bezier(0, 0, .2, 1);transition:box-shadow .2s 0s cubic-bezier(0, 0, .2, 1),border-color .2s 0s cubic-bezier(0, 0, .2, 1);transition:box-shadow .2s 0s cubic-bezier(0, 0, .2, 1),border-color .2s 0s cubic-bezier(0, 0, .2, 1),-webkit-box-shadow .2s 0s cubic-bezier(0, 0, .2, 1)}.forge-color-picker__color-types input[type=number]:hover,.forge-color-picker__color-types input[type=text]:hover{border-color:rgba(0,0,0,.87);border-color:var(--mdc-theme-text-primary-on-background,rgba(0,0,0,.87))}.forge-color-picker__color-types input[type=number]:focus,.forge-color-picker__color-types input[type=text]:focus{border-color:#6200ee;border-color:var(--mdc-theme-primary,#6200ee);-webkit-box-shadow:0 0 0 1px inset #3f51b5;box-shadow:0 0 0 1px inset #3f51b5;-webkit-box-shadow:0 0 0 1px inset var(--mdc-theme-primary,#3f51b5);box-shadow:0 0 0 1px inset var(--mdc-theme-primary,#3f51b5)}.forge-color-picker__color-types input[type=number]{text-align:center;-moz-appearance:textfield}.forge-color-picker__color-types input[type=number]::-webkit-inner-spin-button,.forge-color-picker__color-types input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;appearance:none;margin:0}.forge-color-picker__color-hex{display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;-webkit-box-pack:center;justify-content:center;-webkit-box-align:space-between;align-items:space-between}.forge-color-picker__canvas{background-image:url(\"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iNnB4IiBoZWlnaHQ9IjZweCIgdmlld0JveD0iMCAwIDYgNiIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDwhLS0gR2VuZXJhdG9yOiBTa2V0Y2ggNTAgKDU0OTgzKSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT5Hcm91cCA5PC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+PC9kZWZzPgogICAgPGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9Ikdyb3VwLTkiPgogICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTExIiBmaWxsPSIjRTBFMEUwIiB4PSIwIiB5PSIwIiB3aWR0aD0iMyIgaGVpZ2h0PSIzIj48L3JlY3Q+CiAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtMTEtQ29weS0yIiBmaWxsPSIjRkZGRkZGIiB4PSIwIiB5PSIzIiB3aWR0aD0iMyIgaGVpZ2h0PSIzIj48L3JlY3Q+CiAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtMTEtQ29weSIgZmlsbD0iI0ZGRkZGRiIgeD0iMyIgeT0iMCIgd2lkdGg9IjMiIGhlaWdodD0iMyI+PC9yZWN0PgogICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTExLUNvcHktMyIgZmlsbD0iI0UwRTBFMCIgeD0iMyIgeT0iMyIgd2lkdGg9IjMiIGhlaWdodD0iMyI+PC9yZWN0PgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+\")}.forge-color-picker__hue-slider{height:8px;background:-webkit-gradient(linear,left top,right top,color-stop(0,red),color-stop(16%,#ff0),color-stop(33%,#0f0),color-stop(50%,#0ff),color-stop(67%,#00f),color-stop(84%,#f0f),to(#ff0004));background:linear-gradient(to right,red 0,#ff0 16%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 84%,#ff0004 100%)}.forge-color-picker__opacity-slider{height:8px;margin-top:16px;background:-webkit-gradient(linear,left top,right top,from(rgba(255,0,0,0)),to(red));background:linear-gradient(to right,rgba(255,0,0,0) 0,red 100%)}.forge-color-picker__color-hsva,.forge-color-picker__color-rgba{display:-webkit-box;display:flex}.forge-color-picker__color-hsva div,.forge-color-picker__color-rgba div{margin-right:4px}.forge-color-picker__color-hsva label,.forge-color-picker__color-rgba label{display:block;text-align:center}.forge-color-picker__color-hsva input,.forge-color-picker__color-rgba input{width:44px}:host{display:inline-block}:host([hidden]){display:none}';
 /**
  * The web component class behind the `<forge-color-picker>` custom element.
  *

package/esm/constants.d.ts

@@ -7,3 +7,19 @@ export declare const COMPONENT_NAME_PREFIX = "forge-";
 export declare const KEYSTROKE_DEBOUNCE_THRESHOLD = 500;
 export declare const ICON_CLASS_NAME = "tyler-icons";
 export declare const CDN_BASE_URL = "https://cdn.forge.tylertech.com/";
+/** A property symbol that references the `ElementInternals` instance of an element. */
+export declare const internals: unique symbol;
+/** A property symbol that indicates whether or not a `Focusable` element can be focused. */
+export declare const isFocusable: unique symbol;
+export type Theme = 'primary' | 'secondary' | 'tertiary' | 'success' | 'warning' | 'error' | 'info';
+export type Density = 'small' | 'medium' | 'large';
+export type MixinBase<ExpectedBase = object> = abstract new (...args: any[]) => ExpectedBase;
+export type MixinReturn<TBase extends MixinBase, MixinClass = object> = (abstract new (...args: any[]) => MixinClass) & TBase;
+/**
+ * The `focusVisible` property is an experimental feature that is not yet supported by all browsers.
+ *
+ * We will use this to allow for setting focus to elements programmatically and showing the focus indicator.
+ */
+export type ExperimentalFocusOptions = FocusOptions & {
+    focusVisible?: boolean;
+};

package/esm/constants.js

@@ -7,3 +7,7 @@ export const COMPONENT_NAME_PREFIX = 'forge-';
 export const KEYSTROKE_DEBOUNCE_THRESHOLD = 500;
 export const ICON_CLASS_NAME = 'tyler-icons';
 export const CDN_BASE_URL = 'https://cdn.forge.tylertech.com/';
+/** A property symbol that references the `ElementInternals` instance of an element. */
+export const internals = Symbol('ElementInternals');
+/** A property symbol that indicates whether or not a `Focusable` element can be focused. */
+export const isFocusable = Symbol('isFocusable');