@tylertech/forge 3.0.0-next.1 → 3.0.0-next.10

package/esm/select/select/select.js

@@ -21,7 +21,7 @@ import { ToolbarComponent } from '../../toolbar';
 import { IconButtonComponent } from '../../icon-button';
 import { FIELD_CONSTANTS } from '../../field/field-constants';
 const template = '<template><div class=\"forge-select__wrapper\" part=\"root\"><div class=\"forge-select forge-field\" part=\"container\"><div class=\"forge-select__leading-container\" part=\"leading-container\"><slot name=\"leading\"></slot></div><div class=\"forge-field__label-input-container\" part=\"label-input-container\"><div id=\"selected-text\" class=\"forge-select__selected-text\" part=\"text\" aria-live=\"assertive\" aria-atomic=\"true\"></div><label id=\"select-label\" aria-hidden=\"true\" part=\"label\"></label></div><forge-icon class=\"forge-select__dropdown-icon\" name=\"arrow_drop_down\" part=\"icon\"></forge-icon><div class=\"forge-field__addon-end-container\" part=\"addon-end-container\"><slot name=\"addon-end\"></slot></div></div><slot name=\"helper-text\"></slot></div></template>';
-const styles = '.forge-select{-webkit-box-sizing:border-box;box-sizing:border-box;display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;position:relative;z-index:1;z-index:var(--forge-z-index-surface,1);margin-top:0;margin-top:var(--forge-select-margin-top,0)}.forge-select.forge-field--disabled{background-color:#f5f5f5;background-color:var(--forge-theme-form-field-disabled-on-background,#f5f5f5);cursor:not-allowed}.forge-select:not(.forge-field--dense):not(.forge-field--roomy){height:3rem;height:var(--forge-select-height,3rem)}.forge-select.forge-field--roomy:not(.forge-field--dense){height:3.5rem;height:var(--forge-select-height,3.5rem)}.forge-select.forge-field--dense:not(.forge-field--roomy){height:1.5rem;height:var(--forge-select-height,1.5rem)}.forge-field::before{content:\"\";display:-webkit-box;display:flex;position:absolute;top:0;right:0;left:0;z-index:-1;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;max-width:100%;height:100%;pointer-events:none;border-style:solid;border-style:var(--forge-select-border-style,solid);border-width:1px;-webkit-transition:border-color .2s 0s cubic-bezier(0, 0, .2, 1);transition:border-color .2s 0s cubic-bezier(0, 0, .2, 1);background-color:transparent;background-color:var(--forge-select-theme-background,transparent);text-align:left}.forge-field[dir=rtl]::before,[dir=rtl] .forge-field::before{text-align:right}.forge-field:not(.forge-field--disabled):not(.forge-field--invalid):not(.forge-field--focused)::before{border-color:rgba(0,0,0,.38);border-color:var(--mdc-theme-text-icon-on-background,rgba(0,0,0,.38))}.forge-field:not(.forge-field--disabled):not(.forge-field--invalid):not(.forge-field--focused):hover::before{border-color:rgba(0,0,0,.87);border-color:var(--mdc-theme-text-primary-on-background,rgba(0,0,0,.87))}.forge-field--focused:not(.forge-field--invalid):not(.forge-field--disabled)::before{border-color:#3f51b5;border-color:var(--mdc-theme-primary,#3f51b5)}.forge-field--invalid:not(.forge-field--disabled)::before{border-color:#b00020;border-color:var(--mdc-theme-error,#b00020)}.forge-field--invalid:not(.forge-field--disabled):not(.forge-field--focused):hover::before{border-color:#db8a98;border-color:var(--forge-theme-error-hover,#db8a98)}.forge-field--disabled::before{border-color:rgba(0,0,0,.12);border-color:var(--mdc-theme-text-disabled-on-background,rgba(0,0,0,.12))}.forge-field:not(.forge-field--shape-rounded){border-radius:4px}.forge-field:not(.forge-field--shape-rounded)::before{border-radius:4px}.forge-field--shape-rounded{border-radius:28px}.forge-field--shape-rounded::before{border-radius:28px}.forge-field--disabled::before{background-color:#f5f5f5;background-color:var(--forge-theme-form-field-disabled-on-background,#f5f5f5)}.forge-field--focused::before{border-color:#3f51b5;border-color:var(--mdc-theme-primary,#3f51b5);border-width:2px}.forge-field__label-input-container{position:relative;-webkit-box-flex:1;flex:1 1 0.0001px;height:100%;display:-webkit-box;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row;-webkit-box-align:center;align-items:center;min-width:0}.forge-field~::slotted([slot=helper-text]){-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-caption-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));line-height:1.25rem;line-height:var(--mdc-typography-caption-line-height, 1.25rem);font-weight:400;font-weight:var(--mdc-typography-caption-font-weight,400);letter-spacing:.0333333333em;letter-spacing:var(--mdc-typography-caption-letter-spacing, .0333333333em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-caption-text-decoration,inherit);text-decoration:var(--mdc-typography-caption-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-caption-text-transform,inherit);display:block;min-height:1.5rem;line-height:normal;padding-top:4px;-webkit-box-sizing:border-box;box-sizing:border-box}.forge-field:not(.forge-field--dense):not(.forge-field--roomy)~::slotted([slot=helper-text]){font-size:.75rem}.forge-field--roomy:not(.forge-field--dense)~::slotted([slot=helper-text]){font-size:.875rem}.forge-field--dense:not(.forge-field--roomy)~::slotted([slot=helper-text]){font-size:.75rem}.forge-field~::slotted([slot=helper-text]){color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-background,rgba(0,0,0,.54))}.forge-field--invalid:not(.forge-field--disabled)~::slotted([slot=helper-text]){color:#b00020;color:var(--mdc-theme-error,#b00020)}.forge-field:not(.forge-field--shape-rounded)~::slotted([slot=helper-text]){margin-left:12px}.forge-field--shape-rounded~::slotted([slot=helper-text]){margin-left:32px}.forge-field ::slotted([slot=leading]){display:-webkit-box;display:flex;align-self:center}.forge-field:not(.forge-field--disabled):not(.forge-field--invalid) ::slotted([slot=leading]){color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-background,rgba(0,0,0,.54))}.forge-field--invalid:not(.forge-field--disabled) ::slotted([slot=leading]){color:#b00020;color:var(--mdc-theme-error,#b00020)}.forge-field--disabled ::slotted([slot=leading]){color:rgba(0,0,0,.38);color:var(--mdc-theme-text-disabled-on-light,rgba(0,0,0,.38));cursor:not-allowed;pointer-events:none}.forge-field ::slotted([slot=leading]){margin:0 4px}.forge-field ::slotted([slot=leading]:not(forge-icon-button)){padding:6px}.forge-field__addon-end-container{display:none}.forge-field--addon-end .forge-field__addon-end-container{height:100%;width:auto;display:-webkit-box;display:flex;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center;padding:0 4px;border-left-width:1px;border-left-style:solid;-webkit-transition:border-left-color .2s 0s cubic-bezier(0, 0, .2, 1);transition:border-left-color .2s 0s cubic-bezier(0, 0, .2, 1)}.forge-field:not(.forge-field--disabled):not(.forge-field--focused):not(.forge-field--invalid) .forge-field__addon-end-container{border-left-color:rgba(0,0,0,.54);border-left-color:var(--mdc-theme-text-secondary-on-background,rgba(0,0,0,.54))}.forge-field:not(.forge-field--disabled):not(.forge-field--focused):not(.forge-field--invalid) .forge-field__addon-end-container:hover{border-left-color:rgba(0,0,0,.87);border-left-color:var(--mdc-theme-text-primary-on-background,rgba(0,0,0,.87))}.forge-field.forge-field--focused:not(.forge-field--invalid):not(.forge-field--disabled) .forge-field__addon-end-container{border-left-color:#3f51b5;border-left-color:var(--mdc-theme-primary,#3f51b5)}.forge-field.forge-field--invalid:not(.forge-field--disabled) .forge-field__addon-end-container{border-left-color:#b00020;border-left-color:var(--mdc-theme-error,#b00020)}.forge-field.forge-field--invalid:not(.forge-field--focused):not(.forge-field--disabled) .forge-field__addon-end-container:hover{border-left-color:#db8a98;border-left-color:var(--forge-theme-error-hover,#db8a98)}.forge-field.forge-field--disabled .forge-field__addon-end-container{border-left-color:rgba(0,0,0,.12);border-left-color:var(--mdc-theme-text-disabled-on-background,rgba(0,0,0,.12))}.forge-field:not(.forge-field--disabled):not(.forge-field--invalid) ::slotted([slot=addon-end]){color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-background,rgba(0,0,0,.54))}.forge-field--invalid:not(.forge-field--disabled) ::slotted([slot=addon-end]){color:#b00020;color:var(--mdc-theme-error,#b00020)}.forge-field--disabled ::slotted([slot=addon-end]){color:rgba(0,0,0,.38);color:var(--mdc-theme-text-disabled-on-light,rgba(0,0,0,.38));cursor:not-allowed;pointer-events:none}.forge-select__leading-container{display:-webkit-box;display:flex;align-self:center}.forge-field label{color:rgba(0,0,0,.65);color:var(--forge-theme-form-field-label-on-background,rgba(0,0,0,.65));pointer-events:none;right:0;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-subtitle1-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-weight:400;font-weight:var(--mdc-typography-subtitle1-font-weight,400);letter-spacing:.009375em;letter-spacing:var(--mdc-typography-subtitle1-letter-spacing, .009375em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-subtitle1-text-decoration,inherit);text-decoration:var(--mdc-typography-subtitle1-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-subtitle1-text-transform,inherit);font-size:var(--mdc-typography-subtitle1-font-size, 1rem);position:absolute;left:0;-webkit-transform-origin:left top;transform-origin:left top;line-height:1.1rem;text-align:left;text-overflow:ellipsis;white-space:nowrap;cursor:text;overflow:hidden;will-change:transform;-webkit-transition:color 150ms cubic-bezier(.4, 0, .2, 1),-webkit-transform 150ms cubic-bezier(.4, 0, .2, 1);transition:color 150ms cubic-bezier(.4, 0, .2, 1),-webkit-transform 150ms cubic-bezier(.4, 0, .2, 1);transition:transform 150ms cubic-bezier(.4, 0, .2, 1),color 150ms cubic-bezier(.4, 0, .2, 1);transition:transform 150ms cubic-bezier(.4, 0, .2, 1),color 150ms cubic-bezier(.4, 0, .2, 1),-webkit-transform 150ms cubic-bezier(.4, 0, .2, 1)}.forge-field label[dir=rtl],[dir=rtl] .forge-field label{right:0;left:auto;-webkit-transform-origin:right top;transform-origin:right top;text-align:right}.forge-field--dense:not(.forge-field--roomy) label{display:none}.forge-field--required label::after{content:none}.forge-field--required label::before{color:#b00020;color:var(--mdc-theme-error,#b00020);content:\"*\";margin-right:4px}.forge-field:not(.forge-field--dense):not(.forge-field--roomy) label{font-size:1rem}.forge-field--roomy:not(.forge-field--dense) label{font-size:1rem}.forge-field--disabled label{color:rgba(0,0,0,.38);color:var(--forge-theme-label-disabled-on-background,rgba(0,0,0,.38))}.forge-field--invalid:not(.forge-field--disabled) label{color:#b00020;color:var(--mdc-theme-error,#b00020)}.forge-field--focused:not(.forge-field--invalid):not(.forge-field--disabled) label{color:#3f51b5;color:var(--mdc-theme-primary,#3f51b5)}.forge-field:not(.forge-field--dense):not(.forge-field--roomy) label{top:1rem}.forge-field--roomy:not(.forge-field--dense) label{top:1.285rem}.forge-field:not(.forge-field--shape-rounded):not(.forge-field--leading) label{left:12px!important}.forge-field--shape-rounded:not(.forge-field--leading) label{left:32px!important}.forge-field:not(.forge-field--trailing):not(.forge-field--addon-end):not(.forge-field--shape-rounded) label{padding-right:12px}.forge-field:not(.forge-field--trailing):not(.forge-field--addon-end).forge-field--shape-rounded label{padding-right:32px}.forge-field label.forge-floating-label--float-above{color:rgba(0,0,0,.65);color:var(--forge-theme-form-field-label-on-background,rgba(0,0,0,.65))}.forge-field--disabled label.forge-floating-label--float-above{color:rgba(0,0,0,.6);color:var(--forge-theme-form-field-text-disabled-on-background,rgba(0,0,0,.6))}.forge-field--invalid:not(.forge-field--disabled) label.forge-floating-label--float-above{color:#b00020;color:var(--mdc-theme-error,#b00020)}.forge-field--focused:not(.forge-field--invalid):not(.forge-field--disabled) label.forge-floating-label--float-above{color:#3f51b5;color:var(--mdc-theme-primary,#3f51b5)}.forge-field:not(.forge-field--dense):not(.forge-field--roomy) label.forge-floating-label--float-above{-webkit-transform:translateY(-.54rem) scale(.8125);transform:translateY(-.54rem) scale(.8125);cursor:auto}.forge-field--roomy:not(.forge-field--dense) label.forge-floating-label--float-above{-webkit-transform:translateY(-.72rem) scale(.8125);transform:translateY(-.72rem) scale(.8125);cursor:auto}.forge-field:not(.forge-field--dense):not(.forge-field--roomy) label.forge-floating-label--float-above.forge-floating-label--float-above-end-keyframe{-webkit-transition:none;transition:none;font-size:.8125rem;-webkit-transform:translateY(-.62rem) scale(1);transform:translateY(-.62rem) scale(1);cursor:auto}.forge-field--roomy:not(.forge-field--dense) label.forge-floating-label--float-above.forge-floating-label--float-above-end-keyframe{-webkit-transition:none;transition:none;font-size:.8125rem;-webkit-transform:translateY(-.8rem) scale(1);transform:translateY(-.8rem) scale(1);cursor:auto}.forge-field:not(.forge-field--dense):not(.forge-field--roomy) label.forge-floating-label--unfloat-above-start-keyframe{-webkit-transition:none;transition:none;font-size:1rem;-webkit-transform:translateY(-.62rem) scale(.8125);transform:translateY(-.62rem) scale(.8125);cursor:auto}.forge-field--roomy:not(.forge-field--dense) label.forge-floating-label--unfloat-above-start-keyframe{-webkit-transition:none;transition:none;font-size:1rem;-webkit-transform:translateY(-.8rem) scale(.8125);transform:translateY(-.8rem) scale(.8125);cursor:auto}.forge-field .forge-select__selected-text{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-body1-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-weight:400;font-weight:var(--mdc-typography-body1-font-weight,400);letter-spacing:.03125em;letter-spacing:var(--mdc-typography-body1-letter-spacing, .03125em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-body1-text-decoration,inherit);text-decoration:var(--mdc-typography-body1-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-body1-text-transform,inherit);color:rgba(0,0,0,.87);color:var(--mdc-theme-text-primary-on-background,rgba(0,0,0,.87));display:block;overflow:hidden;text-overflow:ellipsis;align-self:flex-end;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;height:100%;white-space:nowrap;-webkit-transition:opacity 150ms 0s cubic-bezier(.4, 0, .2, 1);transition:opacity 150ms 0s cubic-bezier(.4, 0, .2, 1);border:none;background:0 0;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:0;line-height:normal;min-width:0;font-size:var(--forge-select-font-size, 1rem);padding:0 12px;padding-right:0}.forge-field:not(.forge-field--disabled) .forge-select__selected-text{color:rgba(0,0,0,.87);color:var(--mdc-theme-text-primary-on-background,rgba(0,0,0,.87))}.forge-field--disabled .forge-select__selected-text{color:rgba(0,0,0,.6);color:var(--forge-theme-form-field-text-disabled-on-background,rgba(0,0,0,.6));cursor:not-allowed}.forge-field:not(.forge-field--dense):not(.forge-field--roomy) .forge-select__selected-text{font-size:1rem;font-size:var(--forge-select-font-size, 1rem)}.forge-field--roomy:not(.forge-field--dense) .forge-select__selected-text{font-size:1rem;font-size:var(--forge-select-font-size, 1rem)}.forge-field--dense:not(.forge-field--roomy) .forge-select__selected-text{font-size:.875rem;font-size:var(--forge-select-font-size, .875rem)}.forge-field .forge-select__selected-text{padding:0 12px}.forge-field--label .forge-select__selected-text{padding-top:24px}.forge-field--roomy.forge-field--label .forge-select__selected-text{padding-top:29px}.forge-field--shape-rounded:not(.forge-field--leading) .forge-select__selected-text{padding-left:32px}.forge-field--leading .forge-select__selected-text{padding-left:0}.forge-field--label .forge-select__selected-text{padding-bottom:3px}.forge-field--roomy.forge-field--label .forge-select__selected-text{padding-bottom:8px}.forge-field:not(.forge-field--label):not(.forge-field--dense):not(.forge-field--roomy) .forge-select__selected-text{line-height:var(--forge-select-height, 3rem)}.forge-field:not(.forge-field--label).forge-field--roomy:not(.forge-field--dense) .forge-select__selected-text{line-height:var(--forge-select-height-roomy, 3.5rem)}.forge-field:not(.forge-field--label).forge-field--dense:not(.forge-field--roomy) .forge-select__selected-text{line-height:var(--forge-select-height-dense, 1.5rem)}.forge-field.forge-field--dense:not(.forge-field--roomy) .forge-select__selected-text{padding:0 8px}.forge-field .forge-select__selected-text:empty::before{content:attr(placeholder);color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-background,rgba(0,0,0,.54));font-size:.875rem}.forge-field .forge-select--label .forge-select__selected-text{padding-top:25px}.forge-field .forge-select__dropdown-icon{display:-webkit-box;display:flex;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center;width:24px;height:100%;-webkit-box-flex:0;flex:none;-webkit-transition:-webkit-transform 150ms cubic-bezier(.4, 0, .2, 1);transition:-webkit-transform 150ms cubic-bezier(.4, 0, .2, 1);transition:transform 150ms cubic-bezier(.4, 0, .2, 1);transition:transform 150ms cubic-bezier(.4, 0, .2, 1),-webkit-transform 150ms cubic-bezier(.4, 0, .2, 1);pointer-events:none;margin-right:8px}.forge-select--opened .forge-field .forge-select__dropdown-icon{-webkit-transform:rotate(180deg);transform:rotate(180deg);-webkit-transition:-webkit-transform 150ms cubic-bezier(.4, 0, .2, 1);transition:-webkit-transform 150ms cubic-bezier(.4, 0, .2, 1);transition:transform 150ms cubic-bezier(.4, 0, .2, 1);transition:transform 150ms cubic-bezier(.4, 0, .2, 1),-webkit-transform 150ms cubic-bezier(.4, 0, .2, 1)}.forge-select--opened .forge-field .forge-select__dropdown-icon{-webkit-transform:rotate(180deg);transform:rotate(180deg);-webkit-transition:-webkit-transform 150ms cubic-bezier(.4, 0, .2, 1);transition:-webkit-transform 150ms cubic-bezier(.4, 0, .2, 1);transition:transform 150ms cubic-bezier(.4, 0, .2, 1);transition:transform 150ms cubic-bezier(.4, 0, .2, 1),-webkit-transform 150ms cubic-bezier(.4, 0, .2, 1)}.forge-field:not(.forge-field--disabled):not(.forge-field--invalid) .forge-select__dropdown-icon{color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-background,rgba(0,0,0,.54))}.forge-field--invalid:not(.forge-field--disabled) .forge-select__dropdown-icon{color:#b00020;color:var(--mdc-theme-error,#b00020)}.forge-field--disabled .forge-select__dropdown-icon{color:rgba(0,0,0,.38);color:var(--mdc-theme-text-disabled-on-light,rgba(0,0,0,.38));cursor:not-allowed;pointer-events:none}.forge-field.forge-field--dense:not(.forge-field--roomy) .forge-select__dropdown-icon{margin-right:4px}:host{display:block;contain:layout}:host(:focus){outline:0}:host([hidden]){display:none}';
+const styles = '.forge-select{-webkit-box-sizing:border-box;box-sizing:border-box;display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;position:relative;z-index:1;z-index:var(--forge-z-index-surface,1);margin-top:0;margin-top:var(--forge-select-margin-top,0)}.forge-select.forge-field--disabled{background-color:#f5f5f5;background-color:var(--forge-theme-form-field-disabled-on-background,#f5f5f5);cursor:not-allowed}.forge-select:not(.forge-field--dense):not(.forge-field--roomy){height:3rem;height:var(--forge-select-height,3rem)}.forge-select.forge-field--roomy:not(.forge-field--dense){height:3.5rem;height:var(--forge-select-height,3.5rem)}.forge-select.forge-field--dense:not(.forge-field--roomy){height:1.5rem;height:var(--forge-select-height,1.5rem)}.forge-field::before{content:\"\";display:-webkit-box;display:flex;position:absolute;top:0;right:0;left:0;z-index:-1;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;max-width:100%;height:100%;pointer-events:none;border-style:solid;border-style:var(--forge-select-border-style,solid);border-width:1px;-webkit-transition:border-color .2s 0s cubic-bezier(0, 0, .2, 1);transition:border-color .2s 0s cubic-bezier(0, 0, .2, 1);background-color:transparent;background-color:var(--forge-select-theme-background,transparent);text-align:left}.forge-field[dir=rtl]::before,[dir=rtl] .forge-field::before{text-align:right}.forge-field:not(.forge-field--disabled):not(.forge-field--invalid):not(.forge-field--focused)::before{border-color:rgba(0,0,0,.38);border-color:var(--mdc-theme-text-icon-on-background,rgba(0,0,0,.38))}.forge-field:not(.forge-field--disabled):not(.forge-field--invalid):not(.forge-field--focused):hover::before{border-color:rgba(0,0,0,.87);border-color:var(--mdc-theme-text-primary-on-background,rgba(0,0,0,.87))}.forge-field--focused:not(.forge-field--invalid):not(.forge-field--disabled)::before{border-color:#6200ee;border-color:var(--mdc-theme-primary,#6200ee)}.forge-field--invalid:not(.forge-field--disabled)::before{border-color:#b00020;border-color:var(--mdc-theme-error,#b00020)}.forge-field--invalid:not(.forge-field--disabled):not(.forge-field--focused):hover::before{border-color:#db8a98;border-color:var(--forge-theme-error-hover,#db8a98)}.forge-field--disabled::before{border-color:rgba(0,0,0,.38);border-color:var(--mdc-theme-text-disabled-on-background,rgba(0,0,0,.38))}.forge-field:not(.forge-field--shape-rounded){border-radius:4px}.forge-field:not(.forge-field--shape-rounded)::before{border-radius:4px}.forge-field--shape-rounded{border-radius:28px}.forge-field--shape-rounded::before{border-radius:28px}.forge-field--disabled::before{background-color:#f5f5f5;background-color:var(--forge-theme-form-field-disabled-on-background,#f5f5f5)}.forge-field--focused::before{border-color:#6200ee;border-color:var(--mdc-theme-primary,#6200ee);border-width:2px}.forge-field__label-input-container{position:relative;-webkit-box-flex:1;flex:1 1 0.0001px;height:100%;display:-webkit-box;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row;-webkit-box-align:center;align-items:center;min-width:0}.forge-field~::slotted([slot=helper-text]){-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-caption-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));line-height:1.25rem;line-height:var(--mdc-typography-caption-line-height, 1.25rem);font-weight:400;font-weight:var(--mdc-typography-caption-font-weight,400);letter-spacing:.0333333333em;letter-spacing:var(--mdc-typography-caption-letter-spacing, .0333333333em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-caption-text-decoration,inherit);text-decoration:var(--mdc-typography-caption-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-caption-text-transform,inherit);display:block;min-height:1.5rem;line-height:normal;padding-top:4px;-webkit-box-sizing:border-box;box-sizing:border-box}.forge-field:not(.forge-field--dense):not(.forge-field--roomy)~::slotted([slot=helper-text]){font-size:.75rem}.forge-field--roomy:not(.forge-field--dense)~::slotted([slot=helper-text]){font-size:.875rem}.forge-field--dense:not(.forge-field--roomy)~::slotted([slot=helper-text]){font-size:.75rem}.forge-field~::slotted([slot=helper-text]){color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-background,rgba(0,0,0,.54))}.forge-field--invalid:not(.forge-field--disabled)~::slotted([slot=helper-text]){color:#b00020;color:var(--mdc-theme-error,#b00020)}.forge-field:not(.forge-field--shape-rounded)~::slotted([slot=helper-text]){margin-left:12px}.forge-field--shape-rounded~::slotted([slot=helper-text]){margin-left:32px}.forge-field ::slotted([slot=leading]){display:-webkit-box;display:flex;align-self:center}.forge-field:not(.forge-field--disabled):not(.forge-field--invalid) ::slotted([slot=leading]){color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-background,rgba(0,0,0,.54))}.forge-field--invalid:not(.forge-field--disabled) ::slotted([slot=leading]){color:#b00020;color:var(--mdc-theme-error,#b00020)}.forge-field--disabled ::slotted([slot=leading]){color:rgba(0,0,0,.38);color:var(--mdc-theme-text-disabled-on-light,rgba(0,0,0,.38));cursor:not-allowed;pointer-events:none}.forge-field ::slotted([slot=leading]){margin:0 4px}.forge-field ::slotted([slot=leading]:not(forge-icon-button)){padding:6px}.forge-field__addon-end-container{display:none}.forge-field--addon-end .forge-field__addon-end-container{height:100%;width:auto;display:-webkit-box;display:flex;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center;padding:0 4px;border-left-width:1px;border-left-style:solid;-webkit-transition:border-left-color .2s 0s cubic-bezier(0, 0, .2, 1);transition:border-left-color .2s 0s cubic-bezier(0, 0, .2, 1)}.forge-field:not(.forge-field--disabled):not(.forge-field--focused):not(.forge-field--invalid) .forge-field__addon-end-container{border-left-color:rgba(0,0,0,.54);border-left-color:var(--mdc-theme-text-secondary-on-background,rgba(0,0,0,.54))}.forge-field:not(.forge-field--disabled):not(.forge-field--focused):not(.forge-field--invalid) .forge-field__addon-end-container:hover{border-left-color:rgba(0,0,0,.87);border-left-color:var(--mdc-theme-text-primary-on-background,rgba(0,0,0,.87))}.forge-field.forge-field--focused:not(.forge-field--invalid):not(.forge-field--disabled) .forge-field__addon-end-container{border-left-color:#6200ee;border-left-color:var(--mdc-theme-primary,#6200ee)}.forge-field.forge-field--invalid:not(.forge-field--disabled) .forge-field__addon-end-container{border-left-color:#b00020;border-left-color:var(--mdc-theme-error,#b00020)}.forge-field.forge-field--invalid:not(.forge-field--focused):not(.forge-field--disabled) .forge-field__addon-end-container:hover{border-left-color:#db8a98;border-left-color:var(--forge-theme-error-hover,#db8a98)}.forge-field.forge-field--disabled .forge-field__addon-end-container{border-left-color:rgba(0,0,0,.38);border-left-color:var(--mdc-theme-text-disabled-on-background,rgba(0,0,0,.38))}.forge-field:not(.forge-field--disabled):not(.forge-field--invalid) ::slotted([slot=addon-end]){color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-background,rgba(0,0,0,.54))}.forge-field--invalid:not(.forge-field--disabled) ::slotted([slot=addon-end]){color:#b00020;color:var(--mdc-theme-error,#b00020)}.forge-field--disabled ::slotted([slot=addon-end]){color:rgba(0,0,0,.38);color:var(--mdc-theme-text-disabled-on-light,rgba(0,0,0,.38));cursor:not-allowed;pointer-events:none}.forge-select__leading-container{display:-webkit-box;display:flex;align-self:center}.forge-field label{color:rgba(0,0,0,.65);color:var(--forge-theme-form-field-label-on-background,rgba(0,0,0,.65));pointer-events:none;right:0;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-subtitle1-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-weight:400;font-weight:var(--mdc-typography-subtitle1-font-weight,400);letter-spacing:.009375em;letter-spacing:var(--mdc-typography-subtitle1-letter-spacing, .009375em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-subtitle1-text-decoration,inherit);text-decoration:var(--mdc-typography-subtitle1-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-subtitle1-text-transform,inherit);font-size:var(--mdc-typography-subtitle1-font-size, 1rem);position:absolute;left:0;-webkit-transform-origin:left top;transform-origin:left top;line-height:1.1rem;text-align:left;text-overflow:ellipsis;white-space:nowrap;cursor:text;overflow:hidden;will-change:transform;-webkit-transition:color 150ms cubic-bezier(.4, 0, .2, 1),-webkit-transform 150ms cubic-bezier(.4, 0, .2, 1);transition:color 150ms cubic-bezier(.4, 0, .2, 1),-webkit-transform 150ms cubic-bezier(.4, 0, .2, 1);transition:transform 150ms cubic-bezier(.4, 0, .2, 1),color 150ms cubic-bezier(.4, 0, .2, 1);transition:transform 150ms cubic-bezier(.4, 0, .2, 1),color 150ms cubic-bezier(.4, 0, .2, 1),-webkit-transform 150ms cubic-bezier(.4, 0, .2, 1)}.forge-field label[dir=rtl],[dir=rtl] .forge-field label{right:0;left:auto;-webkit-transform-origin:right top;transform-origin:right top;text-align:right}.forge-field--dense:not(.forge-field--roomy) label{display:none}.forge-field--required label::after{content:none}.forge-field--required label::before{color:#b00020;color:var(--mdc-theme-error,#b00020);content:\"*\";margin-right:4px}.forge-field:not(.forge-field--dense):not(.forge-field--roomy) label{font-size:1rem}.forge-field--roomy:not(.forge-field--dense) label{font-size:1rem}.forge-field--disabled label{color:rgba(0,0,0,.38);color:var(--forge-theme-label-disabled-on-background,rgba(0,0,0,.38))}.forge-field--invalid:not(.forge-field--disabled) label{color:#b00020;color:var(--mdc-theme-error,#b00020)}.forge-field--focused:not(.forge-field--invalid):not(.forge-field--disabled) label{color:#6200ee;color:var(--mdc-theme-primary,#6200ee)}.forge-field:not(.forge-field--dense):not(.forge-field--roomy) label{top:1rem}.forge-field--roomy:not(.forge-field--dense) label{top:1.285rem}.forge-field:not(.forge-field--shape-rounded):not(.forge-field--leading) label{left:12px!important}.forge-field--shape-rounded:not(.forge-field--leading) label{left:32px!important}.forge-field:not(.forge-field--trailing):not(.forge-field--addon-end):not(.forge-field--shape-rounded) label{padding-right:12px}.forge-field:not(.forge-field--trailing):not(.forge-field--addon-end).forge-field--shape-rounded label{padding-right:32px}.forge-field label.forge-floating-label--float-above{color:rgba(0,0,0,.65);color:var(--forge-theme-form-field-label-on-background,rgba(0,0,0,.65))}.forge-field--disabled label.forge-floating-label--float-above{color:rgba(0,0,0,.6);color:var(--forge-theme-form-field-text-disabled-on-background,rgba(0,0,0,.6))}.forge-field--invalid:not(.forge-field--disabled) label.forge-floating-label--float-above{color:#b00020;color:var(--mdc-theme-error,#b00020)}.forge-field--focused:not(.forge-field--invalid):not(.forge-field--disabled) label.forge-floating-label--float-above{color:#6200ee;color:var(--mdc-theme-primary,#6200ee)}.forge-field:not(.forge-field--dense):not(.forge-field--roomy) label.forge-floating-label--float-above{-webkit-transform:translateY(-.54rem) scale(.8125);transform:translateY(-.54rem) scale(.8125);cursor:auto}.forge-field--roomy:not(.forge-field--dense) label.forge-floating-label--float-above{-webkit-transform:translateY(-.72rem) scale(.8125);transform:translateY(-.72rem) scale(.8125);cursor:auto}.forge-field:not(.forge-field--dense):not(.forge-field--roomy) label.forge-floating-label--float-above.forge-floating-label--float-above-end-keyframe{-webkit-transition:none;transition:none;font-size:.8125rem;-webkit-transform:translateY(-.62rem) scale(1);transform:translateY(-.62rem) scale(1);cursor:auto}.forge-field--roomy:not(.forge-field--dense) label.forge-floating-label--float-above.forge-floating-label--float-above-end-keyframe{-webkit-transition:none;transition:none;font-size:.8125rem;-webkit-transform:translateY(-.8rem) scale(1);transform:translateY(-.8rem) scale(1);cursor:auto}.forge-field:not(.forge-field--dense):not(.forge-field--roomy) label.forge-floating-label--unfloat-above-start-keyframe{-webkit-transition:none;transition:none;font-size:1rem;-webkit-transform:translateY(-.62rem) scale(.8125);transform:translateY(-.62rem) scale(.8125);cursor:auto}.forge-field--roomy:not(.forge-field--dense) label.forge-floating-label--unfloat-above-start-keyframe{-webkit-transition:none;transition:none;font-size:1rem;-webkit-transform:translateY(-.8rem) scale(.8125);transform:translateY(-.8rem) scale(.8125);cursor:auto}.forge-field .forge-select__selected-text{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-body1-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-weight:400;font-weight:var(--mdc-typography-body1-font-weight,400);letter-spacing:.03125em;letter-spacing:var(--mdc-typography-body1-letter-spacing, .03125em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-body1-text-decoration,inherit);text-decoration:var(--mdc-typography-body1-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-body1-text-transform,inherit);color:rgba(0,0,0,.87);color:var(--mdc-theme-text-primary-on-background,rgba(0,0,0,.87));display:block;overflow:hidden;text-overflow:ellipsis;align-self:flex-end;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;height:100%;white-space:nowrap;-webkit-transition:opacity 150ms 0s cubic-bezier(.4, 0, .2, 1);transition:opacity 150ms 0s cubic-bezier(.4, 0, .2, 1);border:none;background:0 0;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:0;line-height:normal;min-width:0;font-size:var(--forge-select-font-size, 1rem);padding:0 12px;padding-right:0}.forge-field:not(.forge-field--disabled) .forge-select__selected-text{color:rgba(0,0,0,.87);color:var(--mdc-theme-text-primary-on-background,rgba(0,0,0,.87))}.forge-field--disabled .forge-select__selected-text{color:rgba(0,0,0,.6);color:var(--forge-theme-form-field-text-disabled-on-background,rgba(0,0,0,.6));cursor:not-allowed}.forge-field:not(.forge-field--dense):not(.forge-field--roomy) .forge-select__selected-text{font-size:1rem;font-size:var(--forge-select-font-size, 1rem)}.forge-field--roomy:not(.forge-field--dense) .forge-select__selected-text{font-size:1rem;font-size:var(--forge-select-font-size, 1rem)}.forge-field--dense:not(.forge-field--roomy) .forge-select__selected-text{font-size:.875rem;font-size:var(--forge-select-font-size, .875rem)}.forge-field .forge-select__selected-text{padding:0 12px}.forge-field--label .forge-select__selected-text{padding-top:24px}.forge-field--roomy.forge-field--label .forge-select__selected-text{padding-top:29px}.forge-field--shape-rounded:not(.forge-field--leading) .forge-select__selected-text{padding-left:32px}.forge-field--leading .forge-select__selected-text{padding-left:0}.forge-field--label .forge-select__selected-text{padding-bottom:3px}.forge-field--roomy.forge-field--label .forge-select__selected-text{padding-bottom:8px}.forge-field:not(.forge-field--label):not(.forge-field--dense):not(.forge-field--roomy) .forge-select__selected-text{line-height:var(--forge-select-height, 3rem)}.forge-field:not(.forge-field--label).forge-field--roomy:not(.forge-field--dense) .forge-select__selected-text{line-height:var(--forge-select-height-roomy, 3.5rem)}.forge-field:not(.forge-field--label).forge-field--dense:not(.forge-field--roomy) .forge-select__selected-text{line-height:var(--forge-select-height-dense, 1.5rem)}.forge-field.forge-field--dense:not(.forge-field--roomy) .forge-select__selected-text{padding:0 8px}.forge-field .forge-select__selected-text:empty::before{content:attr(placeholder);color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-background,rgba(0,0,0,.54));font-size:.875rem}.forge-field .forge-select--label .forge-select__selected-text{padding-top:25px}.forge-field .forge-select__dropdown-icon{display:-webkit-box;display:flex;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center;width:24px;height:100%;-webkit-box-flex:0;flex:none;-webkit-transition:-webkit-transform 150ms cubic-bezier(.4, 0, .2, 1);transition:-webkit-transform 150ms cubic-bezier(.4, 0, .2, 1);transition:transform 150ms cubic-bezier(.4, 0, .2, 1);transition:transform 150ms cubic-bezier(.4, 0, .2, 1),-webkit-transform 150ms cubic-bezier(.4, 0, .2, 1);pointer-events:none;margin-right:8px}.forge-select--opened .forge-field .forge-select__dropdown-icon{-webkit-transform:rotate(180deg);transform:rotate(180deg);-webkit-transition:-webkit-transform 150ms cubic-bezier(.4, 0, .2, 1);transition:-webkit-transform 150ms cubic-bezier(.4, 0, .2, 1);transition:transform 150ms cubic-bezier(.4, 0, .2, 1);transition:transform 150ms cubic-bezier(.4, 0, .2, 1),-webkit-transform 150ms cubic-bezier(.4, 0, .2, 1)}.forge-select--opened .forge-field .forge-select__dropdown-icon{-webkit-transform:rotate(180deg);transform:rotate(180deg);-webkit-transition:-webkit-transform 150ms cubic-bezier(.4, 0, .2, 1);transition:-webkit-transform 150ms cubic-bezier(.4, 0, .2, 1);transition:transform 150ms cubic-bezier(.4, 0, .2, 1);transition:transform 150ms cubic-bezier(.4, 0, .2, 1),-webkit-transform 150ms cubic-bezier(.4, 0, .2, 1)}.forge-field:not(.forge-field--disabled):not(.forge-field--invalid) .forge-select__dropdown-icon{color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-background,rgba(0,0,0,.54))}.forge-field--invalid:not(.forge-field--disabled) .forge-select__dropdown-icon{color:#b00020;color:var(--mdc-theme-error,#b00020)}.forge-field--disabled .forge-select__dropdown-icon{color:rgba(0,0,0,.38);color:var(--mdc-theme-text-disabled-on-light,rgba(0,0,0,.38));cursor:not-allowed;pointer-events:none}.forge-field.forge-field--dense:not(.forge-field--roomy) .forge-select__dropdown-icon{margin-right:4px}:host{display:block;contain:layout}:host(:focus){outline:0}:host([hidden]){display:none}';
 /**
  * The custom element class behind the `<forge-select>` component.
  *

package/esm/select/select-component-delegate.d.ts

@@ -6,7 +6,7 @@
 import { IBaseComponentDelegateConfig } from '../core/delegates/base-component-delegate';
 import { FormFieldComponentDelegate, IFormFieldComponentDelegateOptions } from '../core/delegates/form-field-component-delegate';
 import { ISelectComponent } from './select/select';
-export declare type SelectComponentDelegateProps = Partial<ISelectComponent>;
+export type SelectComponentDelegateProps = Partial<ISelectComponent>;
 export interface ISelectComponentDelegateOptions extends IFormFieldComponentDelegateOptions {
     helperText?: string;
 }

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

@@ -0,0 +1,79 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { BaseAdapter, IBaseAdapter } from '../core/base/base-adapter';
+import { ISliderComponent } from '../slider';
+export interface ISliderState {
+    startFraction: number;
+    endFraction: number;
+    tickCount: number;
+}
+export interface ISliderAdapter extends IBaseAdapter {
+    addInputListener(type: keyof HTMLElementEventMap, listener: EventListener): void;
+    update(state: ISliderState): void;
+    updateLabels(labelStart: string, labelEnd: string): void;
+    updateHandleLayering(): void;
+    tryHoverStartHandle(coords: {
+        x: number;
+        y: number;
+    }): void;
+    tryHoverEndHandle(coords: {
+        x: number;
+        y: number;
+    }): void;
+    tryDetectOverlap(): void;
+    leaveHandleContainer(): void;
+    syncInputValues(valueStart: number, valueEnd: number): void;
+    setRange(value: boolean): void;
+    setTickmarks(value: boolean): void;
+    setStep(step: number): void;
+    setMin(value: number): void;
+    setMax(value: number): void;
+    setDisabled(value: boolean): void;
+    setReadonly(value: boolean): void;
+    toggleLabels(value: boolean): void;
+    setStartAriaLabel(value: string | null): void;
+    setEndAriaLabel(value: string | null): void;
+}
+export declare class SliderAdapter extends BaseAdapter<ISliderComponent> {
+    private readonly _rootElement;
+    private readonly _trackElement;
+    private readonly _handleContainerElement;
+    private readonly _endInputElement;
+    private readonly _endHandleElement;
+    private readonly _endHandleThumbElement;
+    private _endLabelContentElement;
+    private _startInputElement;
+    private _startHandleElement;
+    private _startHandleThumbElement;
+    private _startLabelContentElement;
+    constructor(component: ISliderComponent);
+    addInputListener(type: keyof HTMLElementEventMap, listener: EventListener): void;
+    update({ startFraction, endFraction, tickCount }: ISliderState): void;
+    updateLabels(labelStart: string, labelEnd: string): void;
+    updateHandleLayering(): void;
+    tryHoverStartHandle(coords: {
+        x: number;
+        y: number;
+    }): void;
+    tryHoverEndHandle(coords: {
+        x: number;
+        y: number;
+    }): void;
+    tryDetectOverlap(): void;
+    leaveHandleContainer(): void;
+    syncInputValues(valueStart: number, valueEnd: number): void;
+    setRange(value: boolean): void;
+    setTickmarks(value: boolean): void;
+    setStep(step: number): void;
+    setMin(value: number): void;
+    setMax(value: number): void;
+    setDisabled(value: boolean): void;
+    setReadonly(value: boolean): void;
+    toggleLabels(value: boolean): void;
+    setStartAriaLabel(value: string | null): void;
+    setEndAriaLabel(value: string | null): void;
+    private _getInputs;
+}

package/esm/slider/slider-adapter.js

@@ -0,0 +1,178 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { getShadowElement, toggleAttribute, toggleClass } from '@tylertech/forge-core';
+import { BaseAdapter } from '../core/base/base-adapter';
+import { elementsOverlapping, isPointerOverElement } from '../core/utils/utils';
+import { STATE_LAYER_CONSTANTS } from '../state-layer';
+import { SLIDER_CONSTANTS } from './slider-constants';
+import { createLabel, createStartHandleElement, createStartInputElement } from './slider-utils';
+export class SliderAdapter extends BaseAdapter {
+    constructor(component) {
+        super(component);
+        this._rootElement = getShadowElement(component, SLIDER_CONSTANTS.selectors.ROOT);
+        this._trackElement = getShadowElement(component, SLIDER_CONSTANTS.selectors.TRACK);
+        this._handleContainerElement = getShadowElement(component, SLIDER_CONSTANTS.selectors.HANDLE_CONTAINER);
+        this._endInputElement = getShadowElement(component, SLIDER_CONSTANTS.selectors.END_INPUT);
+        this._endHandleElement = getShadowElement(component, SLIDER_CONSTANTS.selectors.END_HANDLE);
+        this._endHandleThumbElement = getShadowElement(component, SLIDER_CONSTANTS.selectors.END_HANDLE_THUMB);
+        this._endLabelContentElement = getShadowElement(component, SLIDER_CONSTANTS.selectors.END_LABEL_CONTENT);
+    }
+    addInputListener(type, listener) {
+        const inputs = this._getInputs();
+        inputs.forEach(input => input.addEventListener(type, listener));
+    }
+    update({ startFraction, endFraction, tickCount }) {
+        this._rootElement.style.setProperty(SLIDER_CONSTANTS.cssCustomProperties.START_FRACTION, String(startFraction));
+        this._rootElement.style.setProperty(SLIDER_CONSTANTS.cssCustomProperties.END_FRACTION, String(endFraction));
+        this._rootElement.style.setProperty(SLIDER_CONSTANTS.cssCustomProperties.TICK_COUNT, String(tickCount));
+    }
+    updateLabels(labelStart, labelEnd) {
+        var _a;
+        if (this._startLabelContentElement) {
+            this._startLabelContentElement.textContent = labelStart;
+        }
+        if (this._endLabelContentElement) {
+            this._endLabelContentElement.textContent = labelEnd;
+        }
+        (_a = this._startInputElement) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-valuetext', labelStart);
+        this._endInputElement.setAttribute('aria-valuetext', labelEnd);
+    }
+    updateHandleLayering() {
+        const isEndFocused = this._endInputElement.matches(':focus');
+        if (this._startHandleElement) {
+            toggleClass(this._startHandleElement, !isEndFocused, SLIDER_CONSTANTS.classes.ON_TOP);
+        }
+        toggleClass(this._endHandleElement, isEndFocused, SLIDER_CONSTANTS.classes.ON_TOP);
+    }
+    tryHoverStartHandle(coords) {
+        var _a, _b, _c;
+        if (this._startHandleThumbElement && isPointerOverElement(coords, this._startHandleThumbElement)) {
+            this._handleContainerElement.classList.add(SLIDER_CONSTANTS.classes.HOVER);
+            (_a = this._startHandleElement) === null || _a === void 0 ? void 0 : _a.classList.add(SLIDER_CONSTANTS.classes.HOVER);
+        }
+        else if (!((_b = this._startInputElement) === null || _b === void 0 ? void 0 : _b.matches(':focus'))) {
+            this._handleContainerElement.classList.remove(SLIDER_CONSTANTS.classes.HOVER);
+            (_c = this._startHandleElement) === null || _c === void 0 ? void 0 : _c.classList.remove(SLIDER_CONSTANTS.classes.HOVER);
+        }
+    }
+    tryHoverEndHandle(coords) {
+        if (isPointerOverElement(coords, this._endHandleThumbElement)) {
+            this._handleContainerElement.classList.add(SLIDER_CONSTANTS.classes.HOVER);
+            this._endHandleElement.classList.add(SLIDER_CONSTANTS.classes.HOVER);
+        }
+        else if (!this._endInputElement.matches(':focus')) {
+            this._handleContainerElement.classList.remove(SLIDER_CONSTANTS.classes.HOVER);
+            this._endHandleElement.classList.remove(SLIDER_CONSTANTS.classes.HOVER);
+        }
+    }
+    tryDetectOverlap() {
+        if (this._startHandleElement) {
+            const isOverlapping = elementsOverlapping(this._startHandleElement, this._endHandleElement);
+            toggleClass(this._endHandleElement, isOverlapping, SLIDER_CONSTANTS.classes.OVERLAPPING);
+            toggleClass(this._startHandleElement, isOverlapping, SLIDER_CONSTANTS.classes.OVERLAPPING);
+        }
+    }
+    leaveHandleContainer() {
+        this._handleContainerElement.classList.remove(SLIDER_CONSTANTS.classes.HOVER);
+    }
+    syncInputValues(valueStart, valueEnd) {
+        if (this._startInputElement) {
+            this._startInputElement.valueAsNumber = valueStart;
+        }
+        this._endInputElement.valueAsNumber = valueEnd;
+        if (this._startInputElement) {
+            const data = new FormData();
+            data.append(this._component.nameStart, String(valueStart));
+            data.append(this._component.nameEnd, String(valueEnd));
+            this._component.internals.setFormValue(data);
+        }
+        else {
+            this._component.internals.setFormValue(String(valueEnd));
+        }
+    }
+    setRange(value) {
+        var _a, _b;
+        this._rootElement.classList.toggle(SLIDER_CONSTANTS.classes.RANGE, value);
+        if (value) {
+            // Create start input
+            this._startInputElement = createStartInputElement(this._component);
+            this._rootElement.insertAdjacentElement('afterbegin', this._startInputElement);
+            // Ensure the end input is updated to the valueEnd property value now that we are in range mode
+            this._endInputElement.valueAsNumber = this._component.valueEnd;
+            // Create start handle
+            const thumbLabel = this._startInputElement.value;
+            this._startHandleElement = createStartHandleElement(thumbLabel);
+            this._handleContainerElement.insertAdjacentElement('afterbegin', this._startHandleElement);
+            this._startHandleThumbElement = getShadowElement(this._component, SLIDER_CONSTANTS.selectors.START_HANDLE_THUMB);
+            this._startLabelContentElement = getShadowElement(this._component, SLIDER_CONSTANTS.selectors.START_LABEL_CONTENT);
+        }
+        else {
+            (_a = this._startInputElement) === null || _a === void 0 ? void 0 : _a.remove();
+            (_b = this._startHandleElement) === null || _b === void 0 ? void 0 : _b.remove();
+            this._startInputElement = undefined;
+            this._startHandleElement = undefined;
+            this._startHandleThumbElement = undefined;
+            this._startLabelContentElement = undefined;
+        }
+    }
+    setTickmarks(value) {
+        this._trackElement.classList.toggle(SLIDER_CONSTANTS.classes.TICKMARKS, value);
+    }
+    setStep(step) {
+        const inputs = this._getInputs();
+        inputs.forEach(input => input.step = String(step));
+    }
+    setMin(value) {
+        const inputs = this._getInputs();
+        inputs.forEach(input => input.min = String(value));
+    }
+    setMax(value) {
+        const inputs = this._getInputs();
+        inputs.forEach(input => input.max = String(value));
+    }
+    setDisabled(value) {
+        const inputs = this._getInputs();
+        inputs.forEach(input => input.disabled = value);
+        const stateLayers = this._rootElement.querySelectorAll(STATE_LAYER_CONSTANTS.elementName);
+        stateLayers.forEach(sl => sl.disabled = value);
+    }
+    setReadonly(value) {
+        const inputs = this._getInputs();
+        inputs.forEach(input => input.readOnly = value);
+    }
+    toggleLabels(value) {
+        var _a;
+        const labels = this._rootElement.querySelectorAll(SLIDER_CONSTANTS.selectors.LABEL);
+        labels.forEach(label => label.remove());
+        this._endLabelContentElement = undefined;
+        this._startLabelContentElement = undefined;
+        if (value) {
+            const endLabelEl = createLabel(this._endInputElement.value);
+            this._endHandleElement.insertAdjacentElement('beforeend', endLabelEl);
+            this._endLabelContentElement = getShadowElement(this._component, SLIDER_CONSTANTS.selectors.END_LABEL_CONTENT);
+            if (this._startInputElement) {
+                const startLabelEl = createLabel(this._startInputElement.value);
+                (_a = this._startHandleElement) === null || _a === void 0 ? void 0 : _a.insertAdjacentElement('beforeend', startLabelEl);
+                this._startLabelContentElement = getShadowElement(this._component, SLIDER_CONSTANTS.selectors.START_LABEL_CONTENT);
+            }
+        }
+    }
+    setStartAriaLabel(value) {
+        if (this._startInputElement) {
+            toggleAttribute(this._startInputElement, !!value, 'aria-label', value);
+        }
+    }
+    setEndAriaLabel(value) {
+        toggleAttribute(this._endInputElement, !!value, 'aria-label', value);
+    }
+    _getInputs() {
+        const inputs = [];
+        if (this._startInputElement) {
+            inputs.push(this._startInputElement);
+        }
+        return [...inputs, this._endInputElement];
+    }
+}

package/esm/slider/slider-component-delegate.d.ts

@@ -6,8 +6,8 @@
 import { FormFieldComponentDelegate, IFormFieldComponentDelegateOptions } from '../core';
 import { IBaseComponentDelegateConfig } from '../core/delegates/base-component-delegate';
 import { ISliderComponent } from '../slider';
-import { ISliderChangeEventData } from './slider-constants';
-export declare type SliderComponentDelegateProps = Partial<ISliderComponent>;
+import { ISliderRangeEventData } from './slider-constants';
+export type SliderComponentDelegateProps = Partial<ISliderComponent>;
 export interface ISliderComponentDelegateOptions extends IFormFieldComponentDelegateOptions {
 }
 export interface ISliderComponentDelegateConfig extends IBaseComponentDelegateConfig<ISliderComponent, ISliderComponentDelegateOptions> {
@@ -18,9 +18,25 @@ export declare class SliderComponentDelegate extends FormFieldComponentDelegate<
     set value(value: number);
     get valueStart(): number;
     set valueStart(value: number);
+    get valueEnd(): number;
+    set valueEnd(value: number);
     get disabled(): boolean;
     set disabled(value: boolean);
-    onChange(listener: (value: ISliderChangeEventData) => void): void;
+    get min(): number;
+    set min(value: number);
+    get max(): number;
+    set max(value: number);
+    get step(): number;
+    get range(): boolean;
+    set range(value: boolean);
+    get tickmarks(): boolean;
+    set tickmarks(value: boolean);
+    get labeled(): boolean;
+    set labeled(value: boolean);
+    get labelBuilder(): (value: number, which?: 'start' | 'end') => string;
+    set labelBuilder(value: (value: number, which?: 'start' | 'end') => string);
+    onInput(listener: (value: number | ISliderRangeEventData) => void): void;
+    onChange(listener: (value: number | ISliderRangeEventData) => void): void;
     onFocus(listener: (evt: Event) => void): void;
     onBlur(listener: (evt: Event) => void): void;
     protected _build(): ISliderComponent;

package/esm/slider/slider-component-delegate.js

@@ -21,12 +21,60 @@ export class SliderComponentDelegate extends FormFieldComponentDelegate {
     set valueStart(value) {
         this._element.valueStart = value;
     }
+    get valueEnd() {
+        return this._element.valueEnd;
+    }
+    set valueEnd(value) {
+        this._element.valueEnd = value;
+    }
     get disabled() {
         return this._element.disabled;
     }
     set disabled(value) {
         this._element.disabled = value;
     }
+    get min() {
+        return this._element.min;
+    }
+    set min(value) {
+        this._element.min = value;
+    }
+    get max() {
+        return this._element.max;
+    }
+    set max(value) {
+        this._element.max = value;
+    }
+    get step() {
+        return this._element.step;
+    }
+    get range() {
+        return this._element.range;
+    }
+    set range(value) {
+        this._element.range = value;
+    }
+    get tickmarks() {
+        return this._element.tickmarks;
+    }
+    set tickmarks(value) {
+        this._element.tickmarks = value;
+    }
+    get labeled() {
+        return this._element.labeled;
+    }
+    set labeled(value) {
+        this._element.labeled = value;
+    }
+    get labelBuilder() {
+        return this._element.labelBuilder;
+    }
+    set labelBuilder(value) {
+        this._element.labelBuilder = value;
+    }
+    onInput(listener) {
+        this._element.addEventListener('forge-slider-input', ({ detail }) => listener(detail));
+    }
     onChange(listener) {
         this._element.addEventListener('forge-slider-change', ({ detail }) => listener(detail));
     }

package/esm/slider/slider-constants.d.ts

@@ -6,36 +6,72 @@
 export declare const SLIDER_CONSTANTS: {
     elementName: "forge-slider";
     attributes: {
-        TYPE: string;
+        ARIA_LABEL: string;
+        ARIA_LABEL_START: string;
+        ARIA_LABEL_END: string;
         VALUE: string;
         VALUE_START: string;
+        VALUE_END: string;
+        LABEL: string;
+        LABEL_START: string;
+        LABEL_END: string;
         MIN: string;
         MAX: string;
         STEP: string;
+        TICKMARKS: string;
+        LABELED: string;
+        RANGE: string;
         DISABLED: string;
-        COLOR: string;
+        READONLY: string;
     };
     selectors: {
         ROOT: string;
-        THUMB: string;
-        THUMB_START: string;
-        VALUE_INPUT: string;
-        VALUE_INPUT_START: string;
-        TRACK_CONTAINER: string;
-        TRACK_ACTIVE_FILL: string;
+        TRACK: string;
+        HANDLE_CONTAINER: string;
+        START_INPUT: string;
+        END_INPUT: string;
+        START_HANDLE: string;
+        START_HANDLE_THUMB: string;
+        END_HANDLE: string;
+        END_HANDLE_THUMB: string;
+        START_LABEL: string;
+        START_LABEL_CONTENT: string;
+        END_LABEL: string;
+        END_LABEL_CONTENT: string;
+        LABEL: string;
+        INPUT: string;
+    };
+    classes: {
+        RANGE: string;
+        TICKMARKS: string;
+        ON_TOP: string;
+        OVERLAPPING: string;
+        HOVER: string;
+        HANDLE: string;
+        HANDLE_THUMB: string;
+        HANDLE_START: string;
+        HANDLE_LABEL: string;
+        LABEL: string;
+        LABEL_CONTENT: string;
     };
     events: {
-        MDC_INPUT: string;
-        MDC_CHANGE: string;
-        FORGE_INPUT: string;
-        FORGE_CHANGE: string;
+        INPUT: string;
+        CHANGE: string;
+    };
+    numbers: {
+        DEFAULT_STEP: number;
+        DEFAULT_VALUE: number;
+        DEFAULT_START_VALUE: number;
+        DEFAULT_END_VALUE: number;
+    };
+    cssCustomProperties: {
+        START_FRACTION: string;
+        END_FRACTION: string;
+        TICK_COUNT: string;
     };
 };
-export interface ISliderInputEventData {
-    value?: number;
-    valueStart?: number;
-    valueEnd?: number;
-}
-export interface ISliderChangeEventData extends ISliderInputEventData {
+export interface ISliderRangeEventData {
+    valueStart: number;
+    valueEnd: number;
 }
-export declare type SliderType = 'continuous' | 'discrete' | 'discrete-markers' | 'continuous-range' | 'discrete-range' | 'discrete-range-markers';
+export type SliderLabelBuilder = (value: number, which?: 'start' | 'end') => string;

package/esm/slider/slider-constants.js

@@ -6,33 +6,75 @@
 import { COMPONENT_NAME_PREFIX } from '../constants';
 const elementName = `${COMPONENT_NAME_PREFIX}slider`;
 const attributes = {
-    TYPE: 'type',
+    ARIA_LABEL: 'data-aria-label',
+    ARIA_LABEL_START: 'data-aria-label-start',
+    ARIA_LABEL_END: 'data-aria-label-end',
     VALUE: 'value',
     VALUE_START: 'value-start',
+    VALUE_END: 'value-end',
+    LABEL: 'label',
+    LABEL_START: 'label-start',
+    LABEL_END: 'label-end',
     MIN: 'min',
     MAX: 'max',
     STEP: 'step',
+    TICKMARKS: 'tickmarks',
+    LABELED: 'labeled',
+    RANGE: 'range',
     DISABLED: 'disabled',
-    COLOR: 'color'
+    READONLY: 'readonly'
 };
 const selectors = {
-    ROOT: '.mdc-slider',
-    THUMB: '.mdc-slider__thumb[part=thumb],.mdc-slider__thumb[part=\'thumb-end\']',
-    THUMB_START: '.mdc-slider__thumb[part=\'thumb-start\']',
-    VALUE_INPUT: 'input[id=\'value-input\']',
-    VALUE_INPUT_START: 'input[id=\'value-input-start\']',
-    TRACK_CONTAINER: '.mdc-slider__track-container',
-    TRACK_ACTIVE_FILL: '.mdc-slider__track--active_fill'
+    ROOT: '.forge-slider',
+    TRACK: '.track',
+    HANDLE_CONTAINER: '.handle-container',
+    START_INPUT: 'input.start',
+    END_INPUT: 'input.end',
+    START_HANDLE: '.handle.start',
+    START_HANDLE_THUMB: '.handle.start .handle-thumb',
+    END_HANDLE: '.handle.end',
+    END_HANDLE_THUMB: '.handle.end .handle-thumb',
+    START_LABEL: '.handle.start .handle-label',
+    START_LABEL_CONTENT: '.handle.start .handle-label-content',
+    END_LABEL: '.handle.end .handle-label',
+    END_LABEL_CONTENT: '.handle.end .handle-label-content',
+    LABEL: '.handle-label',
+    INPUT: 'input[type=range]'
+};
+const classes = {
+    RANGE: 'range',
+    TICKMARKS: 'tickmarks',
+    ON_TOP: 'on-top',
+    OVERLAPPING: 'overlapping',
+    HOVER: 'hover',
+    HANDLE: 'handle',
+    HANDLE_THUMB: 'handle-thumb',
+    HANDLE_START: 'start',
+    HANDLE_LABEL: 'handle-label',
+    LABEL: 'handle-label',
+    LABEL_CONTENT: 'handle-label-content'
 };
 const events = {
-    MDC_INPUT: 'MDCSlider:input',
-    MDC_CHANGE: 'MDCSlider:change',
-    FORGE_INPUT: 'forge-slider-input',
-    FORGE_CHANGE: 'forge-slider-change'
+    INPUT: 'forge-slider-input',
+    CHANGE: 'forge-slider-change'
+};
+const cssCustomProperties = {
+    START_FRACTION: '--_start-fraction',
+    END_FRACTION: '--_end-fraction',
+    TICK_COUNT: '--_tick-count'
+};
+const numbers = {
+    DEFAULT_STEP: 1,
+    DEFAULT_VALUE: 50,
+    DEFAULT_START_VALUE: 33,
+    DEFAULT_END_VALUE: 67
 };
 export const SLIDER_CONSTANTS = {
     elementName,
     attributes,
     selectors,
-    events
+    classes,
+    events,
+    numbers,
+    cssCustomProperties
 };