@tylertech/forge 3.0.0-next.11 → 3.0.0-next.13

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,10 @@ 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 MixinBase<ExpectedBase = object> = abstract new (...args: any[]) => ExpectedBase;
+export type MixinReturn<TBase extends MixinBase, MixinClass = object> = (abstract new (...args: any[]) => MixinClass) & TBase;

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');

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

@@ -4,15 +4,21 @@
  * License: Apache-2.0
  */
 import { IBaseComponent } from './base-component';
-export interface IBaseAdapter {
+export interface IBaseAdapter<T extends HTMLElement = HTMLElement> {
+    readonly hostElement: T;
     readonly isConnected: boolean;
     removeHostAttribute(name: string): void;
     getHostAttribute(name: string): string | null;
     setHostAttribute(name: string, value?: string): void;
     toggleHostAttribute(name: string, hasAttribute: boolean, value?: string): void;
+    redispatchEvent(event: Event, options?: {
+        bubbles?: boolean;
+        cancelable?: boolean;
+        composed?: boolean;
+    }): boolean;
     emitHostEvent(type: string, data?: any, bubble?: boolean, cancelable?: boolean): boolean;
     addHostListener(event: string, callback: (event: Event) => void, options?: boolean | AddEventListenerOptions): void;
-    removeHostListener(event: string, callback: (event: Event) => void): void;
+    removeHostListener(event: string, callback: (event: Event) => void, options?: boolean | AddEventListenerOptions): void;
     addWindowListener(event: string, callback: (event: Event) => void, options?: boolean | AddEventListenerOptions): void;
     removeWindowListener(event: string, callback: (event: Event) => void, options?: boolean | EventListenerOptions): void;
     addDocumentListener(event: string, callback: (event: Event) => void, options?: boolean | AddEventListenerOptions): void;
@@ -20,17 +26,25 @@ export interface IBaseAdapter {
     getScreenWidth(): number;
     setBodyAttribute(name: string, value: string): void;
     removeBodyAttribute(name: string): void;
+    focusHost(options?: FocusOptions): void;
 }
 export declare class BaseAdapter<T extends IBaseComponent> implements IBaseAdapter {
     protected _component: T;
     constructor(_component: T);
+    get hostElement(): T;
     getHostAttribute(name: string): string | null;
     setHostAttribute(name: string, value?: string): void;
     removeHostAttribute(name: string): void;
     toggleHostAttribute(name: string, hasAttribute: boolean, value?: string): void;
+    redispatchEvent(event: Event, options?: {
+        bubbles?: boolean;
+        cancelable?: boolean;
+        composed?: boolean;
+    }): boolean;
     emitHostEvent(type: string, data?: any, bubble?: boolean, cancelable?: boolean): boolean;
+    toggleHostListener(event: string, listener: EventListener, value: boolean, options?: boolean | AddEventListenerOptions): void;
     addHostListener(event: string, callback: (event: Event) => void, options?: boolean | AddEventListenerOptions): void;
-    removeHostListener(event: string, callback: (event: Event) => void): void;
+    removeHostListener(event: string, callback: (event: Event) => void, options?: boolean | AddEventListenerOptions): void;
     addWindowListener(event: string, callback: (event: Event) => void, options?: boolean | AddEventListenerOptions): void;
     removeWindowListener(event: string, callback: (event: Event) => void, options?: boolean | EventListenerOptions): void;
     addDocumentListener(event: string, callback: (event: Event) => void, options?: boolean | AddEventListenerOptions): void;
@@ -38,5 +52,6 @@ export declare class BaseAdapter<T extends IBaseComponent> implements IBaseAdapt
     getScreenWidth(): number;
     setBodyAttribute(name: string, value: string): void;
     removeBodyAttribute(name: string): void;
+    focusHost(options?: FocusOptions): void;
     get isConnected(): boolean;
 }

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

@@ -8,6 +8,9 @@ export class BaseAdapter {
     constructor(_component) {
         this._component = _component;
     }
+    get hostElement() {
+        return this._component;
+    }
     getHostAttribute(name) {
         return this._component.getAttribute(name);
     }
@@ -20,14 +23,36 @@ export class BaseAdapter {
     toggleHostAttribute(name, hasAttribute, value) {
         toggleAttribute(this._component, hasAttribute, name, value);
     }
+    redispatchEvent(event, options) {
+        var _a, _b, _c, _d;
+        const isFromLightDom = !(((_a = event.target) === null || _a === void 0 ? void 0 : _a.getRootNode()) instanceof ShadowRoot);
+        if (event.bubbles && (event.composed || isFromLightDom)) {
+            event.stopPropagation();
+        }
+        const eventCopy = Object.assign(Object.assign({}, event), { bubbles: (_b = options === null || options === void 0 ? void 0 : options.bubbles) !== null && _b !== void 0 ? _b : event.bubbles, cancelable: (_c = options === null || options === void 0 ? void 0 : options.cancelable) !== null && _c !== void 0 ? _c : event.cancelable, composed: (_d = options === null || options === void 0 ? void 0 : options.composed) !== null && _d !== void 0 ? _d : event.composed });
+        const newEvent = Reflect.construct(event.constructor, [event.type, eventCopy]);
+        const isCancelled = !this._component.dispatchEvent(newEvent);
+        if (isCancelled) {
+            event.preventDefault();
+        }
+        return !isCancelled;
+    }
     emitHostEvent(type, data = null, bubble = true, cancelable) {
         return emitEvent(this._component, type, data, bubble, cancelable);
     }
+    toggleHostListener(event, listener, value, options) {
+        if (value) {
+            this.addHostListener(event, listener, options);
+        }
+        else {
+            this.removeHostListener(event, listener, options);
+        }
+    }
     addHostListener(event, callback, options) {
         this._component.addEventListener(event, callback, options);
     }
-    removeHostListener(event, callback) {
-        this._component.removeEventListener(event, callback);
+    removeHostListener(event, callback, options) {
+        this._component.removeEventListener(event, callback, options);
     }
     addWindowListener(event, callback, options) {
         window.addEventListener(event, callback, options);
@@ -50,6 +75,9 @@ export class BaseAdapter {
     removeBodyAttribute(name) {
         document.body.removeAttribute(name);
     }
+    focusHost(options) {
+        this._component.focus(options);
+    }
     get isConnected() {
         return this._component.isConnected;
     }

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

@@ -5,6 +5,5 @@
  */
 export interface IBaseComponent extends HTMLElement {
 }
-/** Any Custom HTML element. Some elements directly implement this interface, while others implement it via an interface that inherits it. */
 export declare abstract class BaseComponent extends HTMLElement implements IBaseComponent {
 }

package/esm/core/base/base-component.js

@@ -3,6 +3,5 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-/** Any Custom HTML element. Some elements directly implement this interface, while others implement it via an interface that inherits it. */
 export class BaseComponent extends HTMLElement {
 }

package/esm/core/base/base-focusable-component.d.ts

@@ -0,0 +1,49 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * Adapted and influenced from [Material Web](https://github.com/material-components/material-web).
+ * The original source code can be found at: [GitHub](https://github.com/material-components/material-web/blob/main/labs/behaviors/focusable.ts)
+ */
+import { isFocusable, MixinBase, MixinReturn } from '../../constants';
+import { BaseComponent, IBaseComponent } from './base-component';
+/**
+ * An element that can enable and disable `tabindex` focusability.
+ */
+export interface IBaseFocusableComponent extends IBaseComponent {
+    /**
+     * Whether or not the element can be focused. Defaults to true. Set to false
+     * to disable focusing (unless a user has set a `tabindex`).
+     */
+    [isFocusable]: boolean;
+    connectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+}
+/**
+ * Mixes in focusable functionality into a base component.
+ *
+ * @param base The base component to mix into.
+ * @returns The mixed-in base component.
+ */
+export declare function WithFocusable<T extends MixinBase<BaseComponent>>(base: T): MixinReturn<T, IBaseFocusableComponent>;
+declare const BaseFocusableComponent_base: MixinReturn<typeof BaseComponent, IBaseFocusableComponent>;
+/**
+ * Provides focusable functionality for an element.
+ *
+ * Elements can enable and disable their focusability with the `isFocusable`
+ * symbol property. **Use this instead of changing `tabIndex` directly.**
+ *
+ * This will preserve externally-set tabindices. If an element sets `tabindex="-1"`,
+ * but a user sets `tabindex="0"`, it will still be focusable.
+ *
+ * To remove user overrides and restore focus control to the element, remove the `tabindex` attribute.
+ */
+export declare abstract class BaseFocusableComponent extends BaseFocusableComponent_base implements IBaseFocusableComponent {
+}
+export {};

package/esm/core/base/base-focusable-component.js

@@ -0,0 +1,90 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * Adapted and influenced from [Material Web](https://github.com/material-components/material-web).
+ * The original source code can be found at: [GitHub](https://github.com/material-components/material-web/blob/main/labs/behaviors/focusable.ts)
+ */
+import { isFocusable } from '../../constants';
+import { BaseComponent } from './base-component';
+const _privateIsFocusable = Symbol('privateIsFocusable');
+const _externalTabIndex = Symbol('externalTabIndex');
+const _isUpdatingTabIndex = Symbol('isUpdatingTabIndex');
+const _updateTabIndex = Symbol('updateTabIndex');
+/**
+ * Mixes in focusable functionality into a base component.
+ *
+ * @param base The base component to mix into.
+ * @returns The mixed-in base component.
+ */
+export function WithFocusable(base) {
+    var _a, _b, _c;
+    class FocusableComponent extends base {
+        constructor() {
+            super(...arguments);
+            this[_a] = false;
+            this[_b] = null; // Allows for external tabIndex to be stored when internal tabIndex is set to -1
+            this[_c] = false; // Allows for internal tabIndex to be set without triggering attributeChangedCallback
+        }
+        get [isFocusable]() {
+            return this[_privateIsFocusable];
+        }
+        /**
+         * Whether or not the element can be focused.
+         *
+         * Set this from inheriting components **instead** of directly manipulating `tabIndex`.
+         */
+        set [isFocusable](value) {
+            if (this[isFocusable] === value) {
+                return;
+            }
+            this[_privateIsFocusable] = value;
+            this[_updateTabIndex]();
+        }
+        connectedCallback() {
+            // This must be set in the connectedCallback to avoid sprouting a tabindex attribute on the host from the ctor
+            this[isFocusable] = true;
+        }
+        attributeChangedCallback(name, oldValue, newValue) {
+            if (name !== 'tabindex' || this[_isUpdatingTabIndex]) {
+                return;
+            }
+            if (!this.hasAttribute('tabindex')) {
+                // User removed the attribute, can now use internal tabIndex
+                this[_externalTabIndex] = null;
+                this[_updateTabIndex]();
+                return;
+            }
+            this[_externalTabIndex] = this.tabIndex;
+        }
+        [(_a = _privateIsFocusable, _b = _externalTabIndex, _c = _isUpdatingTabIndex, _updateTabIndex)]() {
+            var _d;
+            const internalTabIndex = this[isFocusable] ? 0 : -1;
+            const computedTabIndex = (_d = this[_externalTabIndex]) !== null && _d !== void 0 ? _d : internalTabIndex;
+            // const computedTabIndex = internalTabIndex === 0 ? this[_externalTabIndex] ?? internalTabIndex : internalTabIndex;
+            this[_isUpdatingTabIndex] = true;
+            this.tabIndex = computedTabIndex;
+            this[_isUpdatingTabIndex] = false;
+        }
+    }
+    return FocusableComponent;
+}
+/**
+ * Provides focusable functionality for an element.
+ *
+ * Elements can enable and disable their focusability with the `isFocusable`
+ * symbol property. **Use this instead of changing `tabIndex` directly.**
+ *
+ * This will preserve externally-set tabindices. If an element sets `tabindex="-1"`,
+ * but a user sets `tabindex="0"`, it will still be focusable.
+ *
+ * To remove user overrides and restore focus control to the element, remove the `tabindex` attribute.
+ */
+export class BaseFocusableComponent extends WithFocusable(BaseComponent) {
+}

package/esm/core/base/base-form-component.d.ts

@@ -0,0 +1,45 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { internals } from '../../constants';
+import { BaseComponent, IBaseComponent } from './base-component';
+import { IBaseFocusableComponent } from './base-focusable-component';
+export interface IBaseFormComponent<T = string> extends IBaseComponent {
+    value: T;
+    disabled: boolean;
+    readonly: boolean;
+    name: string;
+    readonly form: HTMLFormElement | null;
+    readonly labels: NodeList;
+    readonly [internals]: ElementInternals;
+    formResetCallback(): void;
+    formStateRestoreCallback(state: unknown, reason: 'restore' | 'autocomplete'): void;
+    formDisabledCallback(isDisabled: boolean): void;
+}
+/**
+ * Any form associated Custom HTML element.
+ */
+export declare abstract class BaseFormComponent<T = string> extends BaseComponent implements IBaseFormComponent<T> {
+    static formAssociated: boolean;
+    abstract value: T;
+    abstract disabled: boolean;
+    abstract readonly: boolean;
+    abstract name: string;
+    abstract get form(): HTMLFormElement | null;
+    abstract get labels(): NodeList;
+    abstract get [internals](): ElementInternals;
+    abstract formResetCallback(): void;
+    abstract formStateRestoreCallback(state: unknown, reason: 'restore' | 'autocomplete'): void;
+    abstract formDisabledCallback(isDisabled: boolean): void;
+}
+export interface IBaseFocusableFormComponent<T = string> extends IBaseFormComponent<T>, IBaseFocusableComponent {
+}
+declare const BaseFocusableFormComponent_base: import("../../constants").MixinReturn<typeof BaseFormComponent, IBaseFocusableComponent>;
+/**
+ * Any form associated Custom HTML element that focus on the host element.
+ */
+export declare abstract class BaseFocusableFormComponent<T = string> extends BaseFocusableFormComponent_base<T> implements IBaseFocusableFormComponent<T> {
+}
+export {};

package/esm/core/base/base-form-component.js

@@ -0,0 +1,19 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { internals } from '../../constants';
+import { BaseComponent } from './base-component';
+import { WithFocusable } from './base-focusable-component';
+/**
+ * Any form associated Custom HTML element.
+ */
+export class BaseFormComponent extends BaseComponent {
+}
+BaseFormComponent.formAssociated = true;
+/**
+ * Any form associated Custom HTML element that focus on the host element.
+ */
+export class BaseFocusableFormComponent extends WithFocusable(BaseFormComponent) {
+}

package/esm/core/base/base-nullable-form-component.d.ts

@@ -0,0 +1,35 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { IBaseFocusableComponent } from './base-focusable-component';
+import { BaseFormComponent, IBaseFormComponent } from './base-form-component';
+export interface IBaseNullableFormComponent<T = string> extends IBaseFormComponent<T> {
+    required: boolean;
+    readonly validity: ValidityState;
+    readonly validationMessage: string;
+    readonly willValidate: boolean;
+    checkValidity(): boolean;
+    reportValidity(): boolean;
+    setCustomValidity(error: string): void;
+}
+export declare abstract class BaseNullableFormComponent<T = string> extends BaseFormComponent<T> {
+    abstract required: boolean;
+    abstract get validity(): ValidityState;
+    abstract get validationMessage(): string;
+    abstract get willValidate(): boolean;
+    protected _hasCustomValidityError: boolean;
+    abstract checkValidity(): boolean;
+    abstract reportValidity(): boolean;
+    abstract setCustomValidity(error: string): void;
+}
+export interface IBaseFocusableNullableFormComponent<T = string> extends IBaseFormComponent<T>, IBaseFocusableComponent {
+}
+declare const BaseFocusableNullableFormComponent_base: import("../..").MixinReturn<typeof BaseFormComponent, IBaseFocusableComponent>;
+/**
+ * Any form associated Custom HTML element that focus on the host element.
+ */
+export declare abstract class BaseFocusableNullableFormComponent<T = string> extends BaseFocusableNullableFormComponent_base<T> implements IBaseFocusableNullableFormComponent<T> {
+}
+export {};

package/esm/core/base/base-nullable-form-component.js

@@ -0,0 +1,20 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { WithFocusable } from './base-focusable-component';
+import { BaseFormComponent } from './base-form-component';
+export class BaseNullableFormComponent extends BaseFormComponent {
+    constructor() {
+        super(...arguments);
+        // Needed for Safari, see https://bugs.webkit.org/show_bug.cgi?id=261432
+        // Replace with this.internals.validity.customError when resolved.
+        this._hasCustomValidityError = false;
+    }
+}
+/**
+ * Any form associated Custom HTML element that focus on the host element.
+ */
+export class BaseFocusableNullableFormComponent extends WithFocusable(BaseFormComponent) {
+}

package/esm/core/keyboard/key-manager.d.ts

@@ -0,0 +1,18 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+export type CanNavigateCallback = (index: number) => boolean;
+export interface IKeyManagerConfig {
+    canNavigateCallback?: CanNavigateCallback;
+}
+export declare const NAVIGATION_KEYS: string[];
+export declare class KeyManager {
+    private _config?;
+    constructor(_config?: IKeyManagerConfig | undefined);
+    isNavigationKey({ key, ctrlKey, altKey, shiftKey, metaKey }: KeyboardEvent): boolean;
+    navigate(key: string, currentIndex: number, total: number): number;
+    calculateNextIndex(key: string, total: number): number;
+    canNavigateAtIndex(index: number): boolean;
+}

package/esm/core/keyboard/key-manager.js

@@ -0,0 +1,47 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+export const NAVIGATION_KEYS = ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'End', 'Home'];
+export class KeyManager {
+    constructor(_config) {
+        this._config = _config;
+    }
+    isNavigationKey({ key, ctrlKey, altKey, shiftKey, metaKey }) {
+        if (ctrlKey || altKey || shiftKey || metaKey) {
+            return false;
+        }
+        return NAVIGATION_KEYS.includes(key);
+    }
+    navigate(key, currentIndex, total) {
+        const nextIndex = currentIndex + this.calculateNextIndex(key, total);
+        if (!this.canNavigateAtIndex(nextIndex)) {
+            return this.navigate(key, nextIndex, total);
+        }
+        return nextIndex;
+    }
+    calculateNextIndex(key, total) {
+        switch (key) {
+            case 'ArrowUp':
+            case 'ArrowLeft':
+                return -1;
+            case 'ArrowDown':
+            case 'ArrowRight':
+                return 1;
+            case 'Home':
+                return 0;
+            case 'End':
+                return total - 1;
+            default:
+                return 0;
+        }
+    }
+    canNavigateAtIndex(index) {
+        var _a;
+        if (typeof ((_a = this._config) === null || _a === void 0 ? void 0 : _a.canNavigateCallback) === 'function') {
+            return this._config.canNavigateCallback.call(null, index);
+        }
+        return true;
+    }
+}

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

@@ -0,0 +1,10 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+/**
+ * Detects if the browser supports the `popover` attribute.
+ * @returns {boolean}
+ */
+export declare function supportsPopover(): boolean;

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

@@ -0,0 +1,12 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+/**
+ * Detects if the browser supports the `popover` attribute.
+ * @returns {boolean}
+ */
+export function supportsPopover() {
+    return HTMLElement.prototype.hasOwnProperty('popover');
+}

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

@@ -5,6 +5,8 @@
  */
 export * from './date-utils';
 export * from './event-utils';
+export * from './feature-detection';
+export * from './reflect-utils';
 export * from './svg-utils';
 export * from './time-utils';
 export * from './utils';

package/esm/core/utils/index.js

@@ -5,6 +5,8 @@
  */
 export * from './date-utils';
 export * from './event-utils';
+export * from './feature-detection';
+export * from './reflect-utils';
 export * from './svg-utils';
 export * from './time-utils';
 export * from './utils';