@tylertech/forge 2.16.6 → 3.0.0-next.10

package/esm/slider/slider.js

@@ -4,58 +4,174 @@
  * License: Apache-2.0
  */
 import { __decorate } from "tslib";
-import { MDCSlider } from '@material/slider';
-import { CustomElement, coerceBoolean, coerceNumber, emitEvent, attachShadowTemplate, getShadowElement, isDefined, replaceShadowTemplate } from '@tylertech/forge-core';
+import { attachShadowTemplate, coerceBoolean, coerceNumber, CustomElement, FoundationProperty, toggleAttribute } from '@tylertech/forge-core';
 import { BaseComponent } from '../core/base/base-component';
+import { FocusIndicatorComponent } from '../focus-indicator/focus-indicator';
+import { StateLayerComponent } from '../state-layer/state-layer';
+import { SliderAdapter } from './slider-adapter';
 import { SLIDER_CONSTANTS } from './slider-constants';
-const continuousTemplate = '<template><div class=\"mdc-slider\" part=\"root\"><input class=\"mdc-slider__input\" id=\"value-input\" type=\"range\" min=\"0\" max=\"100\" value=\"0\" name=\"slider\" aria-label=\"Choose value\"><div class=\"mdc-slider__track\" part=\"track\"><div class=\"mdc-slider__track--inactive\" part=\"track-inactive\"></div><div class=\"mdc-slider__track--active\" part=\"track-active\"><div class=\"mdc-slider__track--active_fill\" part=\"track-active-fill\"></div></div></div><div class=\"mdc-slider__thumb\" part=\"thumb\"><div class=\"mdc-slider__thumb-knob\" part=\"thumb-knob\"></div></div></div></template>';
-const continuousRangeTemplate = '<template><div class=\"mdc-slider mdc-slider--range\" part=\"root\"><input class=\"mdc-slider__input\" id=\"value-input\" type=\"range\" min=\"0\" max=\"100\" value=\"0\" name=\"rangeStart\" aria-label=\"Choose start range value\"> <input class=\"mdc-slider__input\" id=\"value-input-start\" type=\"range\" min=\"0\" max=\"100\" value=\"100\" name=\"rangeEnd\" aria-label=\"Choose end range value\"><div class=\"mdc-slider__track\" part=\"track\"><div class=\"mdc-slider__track--inactive\" part=\"track-inactive\"></div><div class=\"mdc-slider__track--active\" part=\"track-active\"><div class=\"mdc-slider__track--active_fill\" part=\"track-active-fill\"></div></div></div><div class=\"mdc-slider__thumb\" part=\"thumb-start\"><div class=\"mdc-slider__thumb-knob\" part=\"thumb-start-knob\"></div></div><div class=\"mdc-slider__thumb\" part=\"thumb-end\"><div class=\"mdc-slider__thumb-knob\" part=\"thumb-end-knob\"></div></div></div></template>';
-const discreteTemplate = '<template><div class=\"mdc-slider mdc-slider--discrete\" part=\"root\"><input class=\"mdc-slider__input\" id=\"value-input\" type=\"range\" min=\"0\" max=\"100\" value=\"50\" name=\"slider\" aria-label=\"Choose value\"><div class=\"mdc-slider__track\" part=\"track\"><div class=\"mdc-slider__track--inactive\" part=\"track-inactive\"></div><div class=\"mdc-slider__track--active\" part=\"track-active\"><div class=\"mdc-slider__track--active_fill\" part=\"track-active-fill\"></div></div></div><div class=\"mdc-slider__thumb\" part=\"thumb\"><div class=\"mdc-slider__value-indicator-container\" part=\"value-indicator-container\"><div class=\"mdc-slider__value-indicator\" part=\"value-indicator\"><span class=\"mdc-slider__value-indicator-text\" part=\"value-indicator-text\">0</span></div></div><div class=\"mdc-slider__thumb-knob\" part=\"thumb-knob\"></div></div></div></template>';
-const discreteMarkersTemplate = '<template><div class=\"mdc-slider mdc-slider--discrete mdc-slider--tick-marks\" part=\"root\"><input class=\"mdc-slider__input\" id=\"value-input\" type=\"range\" min=\"0\" max=\"100\" value=\"0\" name=\"slider\" step=\"10\" aria-label=\"Choose value\"><div class=\"mdc-slider__track\" part=\"track\"><div class=\"mdc-slider__track--inactive\" part=\"track-inactive\"></div><div class=\"mdc-slider__track--active\" part=\"track-active\"><div class=\"mdc-slider__track--active_fill\" part=\"track-active-fill\"></div></div><div class=\"mdc-slider__tick-marks\" part=\"tick-marks-container\"></div></div><div class=\"mdc-slider__thumb\" part=\"thumb\"><div class=\"mdc-slider__value-indicator-container\" part=\"value-indicator-container\"><div class=\"mdc-slider__value-indicator\" part=\"value-indicator\"><span class=\"mdc-slider__value-indicator-text\" part=\"value-indicator-text\">0</span></div></div><div class=\"mdc-slider__thumb-knob\" part=\"thumb-knob\"></div></div></div></template>';
-const discreteRangeTemplate = '<template><div class=\"mdc-slider mdc-slider--range mdc-slider--discrete\" part=\"root\"><input class=\"mdc-slider__input\" id=\"value-input\" type=\"range\" min=\"0\" max=\"100\" value=\"0\" step=\"10\" name=\"rangeStart\" aria-label=\"Choose start range value\"> <input class=\"mdc-slider__input\" id=\"value-input-start\" type=\"range\" min=\"0\" max=\"100\" value=\"0\" step=\"10\" name=\"rangeEnd\" aria-label=\"Choose end range value\"><div class=\"mdc-slider__track\" part=\"track\"><div class=\"mdc-slider__track--inactive\" part=\"track-inactive\"></div><div class=\"mdc-slider__track--active\" part=\"track-active\"><div class=\"mdc-slider__track--active_fill\" part=\"track-active-fill\"></div></div></div><div class=\"mdc-slider__thumb\" part=\"thumb-start\"><div class=\"mdc-slider__value-indicator-container\" part=\"thumb-start-value-indicator-container\"><div class=\"mdc-slider__value-indicator\" part=\"thumb-start-value-indicator\"><span class=\"mdc-slider__value-indicator-text\" part=\"thumb-start-value-indicator-text\">0</span></div></div><div class=\"mdc-slider__thumb-knob\" part=\"thumb-start-knob\"></div></div><div class=\"mdc-slider__thumb\" part=\"thumb-end\"><div class=\"mdc-slider__value-indicator-container\" part=\"thumb-end-value-indicator-container\"><div class=\"mdc-slider__value-indicator\" part=\"thumb-end-value-indicator\"><span class=\"mdc-slider__value-indicator-text\" part=\"thumb-end-value-indicator-text\">100</span></div></div><div class=\"mdc-slider__thumb-knob\" part=\"thumb-end-knob\"></div></div></div></template>';
-const discreteRangeMarkersTemplate = '<template><div class=\"mdc-slider mdc-slider--range mdc-slider--discrete mdc-slider--tick-marks\" part=\"root\"><input class=\"mdc-slider__input\" id=\"value-input\" type=\"range\" min=\"0\" max=\"100\" value=\"0\" step=\"10\" name=\"rangeStart\" aria-label=\"Choose start range value\"> <input class=\"mdc-slider__input\" id=\"value-input-start\" type=\"range\" min=\"0\" max=\"100\" value=\"0\" step=\"10\" name=\"rangeEnd\" aria-label=\"Choose end range value\"><div class=\"mdc-slider__track\" part=\"track\"><div class=\"mdc-slider__track--inactive\" part=\"track-inactive\"></div><div class=\"mdc-slider__track--active\" part=\"track-active\"><div class=\"mdc-slider__track--active_fill\" part=\"track-active-fill\"></div></div><div class=\"mdc-slider__tick-marks\" part=\"tick-marks-container\"></div></div><div class=\"mdc-slider__thumb\" part=\"thumb-start\"><div class=\"mdc-slider__value-indicator-container\" part=\"thumb-start-value-indicator-container\"><div class=\"mdc-slider__value-indicator\" part=\"thumb-start-value-indicator\"><span class=\"mdc-slider__value-indicator-text\" part=\"thumb-start-value-indicator-text\">0</span></div></div><div class=\"mdc-slider__thumb-knob\" part=\"thumb-start-knob\"></div></div><div class=\"mdc-slider__thumb\" part=\"thumb-end\"><div class=\"mdc-slider__value-indicator-container\" part=\"thumb-end-value-indicator-container\"><div class=\"mdc-slider__value-indicator\" part=\"thumb-end-value-indicator\"><span class=\"mdc-slider__value-indicator-text\" part=\"thumb-end-value-indicator-text\">100</span></div></div><div class=\"mdc-slider__thumb-knob\" part=\"thumb-end-knob\"></div></div></div></template>';
-const styles = '@-webkit-keyframes mdc-ripple-fg-radius-in{from{-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1);-webkit-transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1);transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1)}to{-webkit-transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1));transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}}@keyframes mdc-ripple-fg-radius-in{from{-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1);-webkit-transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1);transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1)}to{-webkit-transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1));transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}}@-webkit-keyframes mdc-ripple-fg-opacity-in{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:0}to{opacity:var(--mdc-ripple-fg-opacity, 0)}}@keyframes mdc-ripple-fg-opacity-in{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:0}to{opacity:var(--mdc-ripple-fg-opacity, 0)}}@-webkit-keyframes mdc-ripple-fg-opacity-out{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:var(--mdc-ripple-fg-opacity, 0)}to{opacity:0}}@keyframes mdc-ripple-fg-opacity-out{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:var(--mdc-ripple-fg-opacity, 0)}to{opacity:0}}.mdc-slider__thumb{--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}.mdc-slider__thumb::after,.mdc-slider__thumb::before{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:\"\"}.mdc-slider__thumb::before{-webkit-transition:opacity 15ms linear,background-color 15ms linear;transition:opacity 15ms linear,background-color 15ms linear;z-index:1;z-index:var(--mdc-ripple-z-index,1)}.mdc-slider__thumb::after{z-index:0;z-index:var(--mdc-ripple-z-index,0)}.mdc-slider__thumb.mdc-ripple-upgraded::before{-webkit-transform:scale(var(--mdc-ripple-fg-scale,1));transform:scale(var(--mdc-ripple-fg-scale,1))}.mdc-slider__thumb.mdc-ripple-upgraded::after{top:0;left:0;-webkit-transform:scale(0);transform:scale(0);-webkit-transform-origin:center center;transform-origin:center center}.mdc-slider__thumb.mdc-ripple-upgraded--unbounded::after{top:var(--mdc-ripple-top,0);left:var(--mdc-ripple-left,0)}.mdc-slider__thumb.mdc-ripple-upgraded--foreground-activation::after{-webkit-animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards;animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards}.mdc-slider__thumb.mdc-ripple-upgraded--foreground-deactivation::after{-webkit-animation:mdc-ripple-fg-opacity-out 150ms;animation:mdc-ripple-fg-opacity-out 150ms;-webkit-transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1));transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}.mdc-slider__thumb::after,.mdc-slider__thumb::before{top:calc(50% - 50%);left:calc(50% - 50%);width:100%;height:100%}.mdc-slider__thumb.mdc-ripple-upgraded::after,.mdc-slider__thumb.mdc-ripple-upgraded::before{top:var(--mdc-ripple-top,calc(50% - 50%));left:var(--mdc-ripple-left,calc(50% - 50%));width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.mdc-slider__thumb.mdc-ripple-upgraded::after{width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.mdc-slider__thumb::after,.mdc-slider__thumb::before{background-color:#6200ee;background-color:var(--mdc-ripple-color,var(--mdc-theme-primary,#6200ee))}.mdc-slider__thumb.mdc-ripple-surface--hover::before,.mdc-slider__thumb:hover::before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity, .04)}.mdc-slider__thumb.mdc-ripple-upgraded--background-focused::before,.mdc-slider__thumb:not(.mdc-ripple-upgraded):focus::before{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity, .12)}.mdc-slider__thumb:not(.mdc-ripple-upgraded)::after{-webkit-transition:opacity 150ms linear;transition:opacity 150ms linear}.mdc-slider__thumb:not(.mdc-ripple-upgraded):active::after{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity, .12)}.mdc-slider__thumb.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.12)}.mdc-slider{cursor:pointer;height:48px;margin:0 24px;position:relative;touch-action:pan-y}.mdc-slider .mdc-slider__track{height:4px;position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);width:100%}.mdc-slider .mdc-slider__track--active,.mdc-slider .mdc-slider__track--inactive{display:-webkit-box;display:flex;height:100%;position:absolute;width:100%}.mdc-slider .mdc-slider__track--active{border-radius:3px;height:6px;overflow:hidden;top:-1px}.mdc-slider .mdc-slider__track--active_fill{border-top:6px solid;-webkit-box-sizing:border-box;box-sizing:border-box;height:100%;width:100%;position:relative;-webkit-transform-origin:left;transform-origin:left}.mdc-slider .mdc-slider__track--active_fill[dir=rtl],[dir=rtl] .mdc-slider .mdc-slider__track--active_fill{-webkit-transform-origin:right;transform-origin:right}.mdc-slider .mdc-slider__track--inactive{border-radius:2px;height:4px;left:0;top:0}.mdc-slider .mdc-slider__track--inactive::before{position:absolute;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;height:100%;top:0;left:0;border:1px solid transparent;border-radius:inherit;content:\"\";pointer-events:none}@media screen and (forced-colors:active){.mdc-slider .mdc-slider__track--inactive::before{border-color:CanvasText}}.mdc-slider .mdc-slider__track--active_fill{border-color:#6200ee;border-color:var(--mdc-theme-primary,#6200ee)}.mdc-slider.mdc-slider--disabled .mdc-slider__track--active_fill{border-color:#000;border-color:var(--mdc-theme-on-surface,#000)}.mdc-slider .mdc-slider__track--inactive{background-color:#6200ee;background-color:var(--mdc-theme-primary,#6200ee);opacity:.24}.mdc-slider.mdc-slider--disabled .mdc-slider__track--inactive{background-color:#000;background-color:var(--mdc-theme-on-surface,#000);opacity:.24}.mdc-slider .mdc-slider__value-indicator-container{bottom:44px;left:50%;left:var(--slider-value-indicator-container-left,50%);pointer-events:none;position:absolute;right:var(--slider-value-indicator-container-right);-webkit-transform:translateX(-50%);transform:translateX(-50%);-webkit-transform:var(--slider-value-indicator-container-transform,translateX(-50%));transform:var(--slider-value-indicator-container-transform,translateX(-50%))}.mdc-slider .mdc-slider__value-indicator{-webkit-transition:-webkit-transform .1s 0s cubic-bezier(.4, 0, 1, 1);transition:-webkit-transform .1s 0s cubic-bezier(.4, 0, 1, 1);transition:transform .1s 0s cubic-bezier(.4, 0, 1, 1);transition:transform .1s 0s cubic-bezier(.4, 0, 1, 1),-webkit-transform .1s 0s cubic-bezier(.4, 0, 1, 1);-webkit-box-align:center;align-items:center;border-radius:4px;display:-webkit-box;display:flex;height:32px;padding:0 12px;-webkit-transform:scale(0);transform:scale(0);-webkit-transform-origin:bottom;transform-origin:bottom}.mdc-slider .mdc-slider__value-indicator::before{border-left:6px solid transparent;border-right:6px solid transparent;border-top:6px solid;bottom:-5px;content:\"\";height:0;left:50%;left:var(--slider-value-indicator-caret-left,50%);position:absolute;right:var(--slider-value-indicator-caret-right);-webkit-transform:translateX(-50%);transform:translateX(-50%);-webkit-transform:var(--slider-value-indicator-caret-transform,translateX(-50%));transform:var(--slider-value-indicator-caret-transform,translateX(-50%));width:0}.mdc-slider .mdc-slider__value-indicator::after{position:absolute;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;height:100%;top:0;left:0;border:1px solid transparent;border-radius:inherit;content:\"\";pointer-events:none}@media screen and (forced-colors:active){.mdc-slider .mdc-slider__value-indicator::after{border-color:CanvasText}}.mdc-slider .mdc-slider__thumb--with-indicator .mdc-slider__value-indicator-container{pointer-events:auto}.mdc-slider .mdc-slider__thumb--with-indicator .mdc-slider__value-indicator{-webkit-transition:-webkit-transform .1s 0s cubic-bezier(0, 0, .2, 1);transition:-webkit-transform .1s 0s cubic-bezier(0, 0, .2, 1);transition:transform .1s 0s cubic-bezier(0, 0, .2, 1);transition:transform .1s 0s cubic-bezier(0, 0, .2, 1),-webkit-transform .1s 0s cubic-bezier(0, 0, .2, 1);-webkit-transform:scale(1);transform:scale(1)}@media (prefers-reduced-motion){.mdc-slider .mdc-slider__thumb--with-indicator .mdc-slider__value-indicator,.mdc-slider .mdc-slider__value-indicator{-webkit-transition:none;transition:none}}.mdc-slider .mdc-slider__value-indicator-text{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-subtitle2-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:.875rem;font-size:var(--mdc-typography-subtitle2-font-size, .875rem);line-height:1.375rem;line-height:var(--mdc-typography-subtitle2-line-height, 1.375rem);font-weight:500;font-weight:var(--mdc-typography-subtitle2-font-weight,500);letter-spacing:.0071428571em;letter-spacing:var(--mdc-typography-subtitle2-letter-spacing, .0071428571em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-subtitle2-text-decoration,inherit);text-decoration:var(--mdc-typography-subtitle2-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-subtitle2-text-transform,inherit)}.mdc-slider .mdc-slider__value-indicator{background-color:#000;opacity:.6}.mdc-slider .mdc-slider__value-indicator::before{border-top-color:#000}.mdc-slider .mdc-slider__value-indicator{color:#fff;color:var(--mdc-theme-on-primary,#fff)}.mdc-slider .mdc-slider__thumb{display:-webkit-box;display:flex;height:48px;left:-24px;outline:0;position:absolute;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:48px}.mdc-slider .mdc-slider__thumb--top{z-index:1}.mdc-slider .mdc-slider__thumb--top .mdc-slider__thumb-knob,.mdc-slider .mdc-slider__thumb--top.mdc-slider__thumb--focused .mdc-slider__thumb-knob,.mdc-slider .mdc-slider__thumb--top.mdc-slider__thumb:hover .mdc-slider__thumb-knob{border-style:solid;border-width:1px;-webkit-box-sizing:content-box;box-sizing:content-box}.mdc-slider .mdc-slider__thumb-knob{-webkit-box-shadow:0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12);box-shadow:0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12);border:10px solid;border-radius:50%;-webkit-box-sizing:border-box;box-sizing:border-box;height:20px;left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:20px}.mdc-slider .mdc-slider__thumb-knob{background-color:#6200ee;background-color:var(--mdc-theme-primary,#6200ee);border-color:#6200ee;border-color:var(--mdc-theme-primary,#6200ee)}.mdc-slider .mdc-slider__thumb--top .mdc-slider__thumb-knob,.mdc-slider .mdc-slider__thumb--top.mdc-slider__thumb--focused .mdc-slider__thumb-knob,.mdc-slider .mdc-slider__thumb--top.mdc-slider__thumb:hover .mdc-slider__thumb-knob{border-color:#fff}.mdc-slider.mdc-slider--disabled .mdc-slider__thumb-knob{background-color:#000;background-color:var(--mdc-theme-on-surface,#000);border-color:#000;border-color:var(--mdc-theme-on-surface,#000)}.mdc-slider.mdc-slider--disabled .mdc-slider__thumb--top .mdc-slider__thumb-knob,.mdc-slider.mdc-slider--disabled .mdc-slider__thumb--top.mdc-slider__thumb--focused .mdc-slider__thumb-knob,.mdc-slider.mdc-slider--disabled .mdc-slider__thumb--top.mdc-slider__thumb:hover .mdc-slider__thumb-knob{border-color:#fff}.mdc-slider .mdc-slider__thumb::after,.mdc-slider .mdc-slider__thumb::before{background-color:#6200ee;background-color:var(--mdc-ripple-color,var(--mdc-theme-primary,#6200ee))}.mdc-slider .mdc-slider__thumb.mdc-ripple-surface--hover::before,.mdc-slider .mdc-slider__thumb:hover::before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity, .04)}.mdc-slider .mdc-slider__thumb.mdc-ripple-upgraded--background-focused::before,.mdc-slider .mdc-slider__thumb:not(.mdc-ripple-upgraded):focus::before{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity, .12)}.mdc-slider .mdc-slider__thumb:not(.mdc-ripple-upgraded)::after{-webkit-transition:opacity 150ms linear;transition:opacity 150ms linear}.mdc-slider .mdc-slider__thumb:not(.mdc-ripple-upgraded):active::after{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity, .12)}.mdc-slider .mdc-slider__thumb.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.12)}.mdc-slider .mdc-slider__tick-marks{-webkit-box-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;display:-webkit-box;display:flex;height:100%;-webkit-box-pack:justify;justify-content:space-between;padding:0 1px;position:absolute;width:100%}.mdc-slider .mdc-slider__tick-mark--active,.mdc-slider .mdc-slider__tick-mark--inactive{border-radius:50%;height:2px;width:2px}.mdc-slider .mdc-slider__tick-mark--active{background-color:#fff;background-color:var(--mdc-theme-on-primary,#fff);opacity:.6}.mdc-slider.mdc-slider--disabled .mdc-slider__tick-mark--active{background-color:#fff;background-color:var(--mdc-theme-on-primary,#fff);opacity:.6}.mdc-slider .mdc-slider__tick-mark--inactive{background-color:#6200ee;background-color:var(--mdc-theme-primary,#6200ee);opacity:.6}.mdc-slider.mdc-slider--disabled .mdc-slider__tick-mark--inactive{background-color:#000;background-color:var(--mdc-theme-on-surface,#000);opacity:.6}.mdc-slider--discrete .mdc-slider__thumb,.mdc-slider--discrete .mdc-slider__track--active_fill{-webkit-transition:-webkit-transform 80ms ease;transition:-webkit-transform 80ms ease;transition:transform 80ms ease;transition:transform 80ms ease,-webkit-transform 80ms ease}@media (prefers-reduced-motion){.mdc-slider--discrete .mdc-slider__thumb,.mdc-slider--discrete .mdc-slider__track--active_fill{-webkit-transition:none;transition:none}}.mdc-slider--disabled{opacity:.38;cursor:auto}.mdc-slider--disabled .mdc-slider__thumb{pointer-events:none}.mdc-slider__input{cursor:pointer;left:0;margin:0;height:100%;opacity:0;pointer-events:none;position:absolute;top:0;width:100%}:host{display:block}:host([hidden]){display:none}.mdc-slider.mdc-slider--disabled{cursor:not-allowed}.mdc-slider .mdc-slider__value-indicator{background-color:var(--mdc-theme-on-surface)}.mdc-slider .mdc-slider__value-indicator::before{border-top-color:var(--mdc-theme-on-surface)}';
+import { SliderFoundation } from './slider-foundation';
+const template = '<template><div part=\"root\" class=\"forge-slider\"><input type=\"range\" class=\"end\" id=\"end\" min=\"0\" max=\"100\" step=\"1\" aria-valuetext=\"0\"><div class=\"track\" part=\"track\"></div><div class=\"handle-container-padded\"><div class=\"handle-container-block\"><div class=\"handle-container\"><div class=\"handle end\" part=\"handle-end\"><forge-state-layer target=\"end\"></forge-state-layer><forge-focus-indicator target=\"end\"></forge-focus-indicator><div class=\"handle-thumb\" part=\"handle-end-thumb\"></div><div class=\"handle-label\" part=\"handle-end-label\"><span class=\"handle-label-content\" part=\"handle-end-label-content\"></span></div></div></div></div></div></div></template>';
+const styles = ':host{display:-webkit-inline-box;display:inline-flex;vertical-align:middle;min-inline-size:100%}:host([hidden]){display:none}.forge-slider{--_start-fraction:0;--_end-fraction:0;--_tick-count:100;--_track-height:var(--forge-slider-track-height, 4px);--_active-track-color:var(--forge-slider-active-track-color, var(--forge-theme-primary, #3f51b5));--_active-track-height:var(--forge-slider-active-track-height, var(--_track-height));--_active-track-shape:var(--forge-slider-active-track-shape, 9999px);--_disabled-active-track-color:var(--forge-slider-disabled-active-track-color, #9e9e9e);--_disabled-active-track-opacity:var(--forge-slider-disabled-active-track-opacity, 0.38);--_disabled-handle-color:var(--forge-slider-disabled-handle-color, #9e9e9e);--_disabled-inactive-track-color:var(--forge-slider-disabled-inactive-track-color, #9e9e9e);--_disabled-inactive-track-opacity:var(--forge-slider-disabled-inactive-track-opacity, 0.12);--_focus-handle-color:var(--forge-slider-focus-handle-color, var(--forge-theme-primary, #3f51b5));--_handle-color:var(--forge-slider-handle-color, var(--forge-theme-primary, #3f51b5));--_handle-height:var(--forge-slider-handle-height, 20px);--_handle-shape:var(--forge-slider-handle-shape, 9999px);--_handle-width:var(--forge-slider-handle-width, 20px);--_hover-handle-color:var(--forge-slider-hover-handle-color, var(--forge-theme-primary, #3f51b5));--_inactive-track-color:var(--forge-slider-inactive-track-color, color-mix(in srgb, var(--forge-theme-primary, #3f51b5) 24%, transparent));--_inactive-track-height:var(--forge-slider-inactive-track-height, var(--_track-height));--_inactive-track-shape:var(--forge-slider-inactive-track-shape, 9999px);--_label-container-color:var(--forge-slider-label-container-color, var(--forge-theme-primary, #3f51b5));--_label-container-height:var(--forge-slider-label-container-height, 28px);--_label-label-text-color:var(--forge-slider-label-label-text-color, var(--forge-theme-on-primary, #ffffff));--_pressed-handle-color:var(--forge-slider-pressed-handle-color, var(--forge-theme-primary, #3f51b5));--_state-layer-size:var(--forge-slider-state-layer-size, 40px);--_with-overlap-handle-outline-color:var(--forge-slider-with-overlap-handle-outline-color, var(--forge-theme-on-primary, #ffffff));--_with-overlap-handle-outline-width:var(--forge-slider-with-overlap-handle-outline-width, 1px);--_with-tick-marks-active-container-color:var(--forge-slider-with-tick-marks-active-container-color, var(--forge-theme-primary, #3f51b5));--_with-tick-marks-container-size:var(--forge-slider-with-tick-marks-container-size, 2px);--_with-tick-marks-disabled-active-container-color:var(--forge-slider-with-tick-marks-disabled-active-container-color, var(--forge-theme-text-primary, rgba(0, 0, 0, 0.87)));--_with-tick-marks-disabled-inactive-container-color:var(--forge-slider-with-tick-marks-disabled-inactive-container-color, color-mix(in srgb, var(--forge-theme-on-primary, #ffffff) 50%, transparent));--_with-tick-marks-inactive-container-color:var(--forge-slider-with-tick-marks-inactive-container-color, var(--forge-theme-primary, #3f51b5));-webkit-box-flex:1;flex:1;display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;position:relative;block-size:var(--_state-layer-size);pointer-events:none;touch-action:none}.forge-slider.range :host-context([dir=rtl]) input.start{-webkit-clip-path:inset(0 0 0 calc(100% - (var(--_state-layer-size)/ 2 + (100% - var(--_state-layer-size)) * (var(--_start-fraction) + (var(--_end-fraction) - var(--_start-fraction))/ 2))));clip-path:inset(0 0 0 calc(100% - (var(--_state-layer-size)/ 2 + (100% - var(--_state-layer-size)) * (var(--_start-fraction) + (var(--_end-fraction) - var(--_start-fraction))/ 2))))}.forge-slider.range :host([dir=rtl]) input.start{-webkit-clip-path:inset(0 0 0 calc(100% - (var(--_state-layer-size)/ 2 + (100% - var(--_state-layer-size)) * (var(--_start-fraction) + (var(--_end-fraction) - var(--_start-fraction))/ 2))));clip-path:inset(0 0 0 calc(100% - (var(--_state-layer-size)/ 2 + (100% - var(--_state-layer-size)) * (var(--_start-fraction) + (var(--_end-fraction) - var(--_start-fraction))/ 2))))}.forge-slider.range input.start:dir(rtl){-webkit-clip-path:inset(0 0 0 calc(100% - (var(--_state-layer-size)/ 2 + (100% - var(--_state-layer-size)) * (var(--_start-fraction) + (var(--_end-fraction) - var(--_start-fraction))/ 2))));clip-path:inset(0 0 0 calc(100% - (var(--_state-layer-size)/ 2 + (100% - var(--_state-layer-size)) * (var(--_start-fraction) + (var(--_end-fraction) - var(--_start-fraction))/ 2))))}.forge-slider.range input.start{-webkit-clip-path:inset(0 calc(100% - (var(--_state-layer-size)/ 2 + (100% - var(--_state-layer-size)) * (var(--_start-fraction) + (var(--_end-fraction) - var(--_start-fraction))/ 2))) 0 0);clip-path:inset(0 calc(100% - (var(--_state-layer-size)/ 2 + (100% - var(--_state-layer-size)) * (var(--_start-fraction) + (var(--_end-fraction) - var(--_start-fraction))/ 2))) 0 0)}.forge-slider.range input.end{-webkit-clip-path:inset(0 0 0 calc(var(--_state-layer-size)/ 2 + (100% - var(--_state-layer-size)) * (var(--_start-fraction) + (var(--_end-fraction) - var(--_start-fraction))/ 2)));clip-path:inset(0 0 0 calc(var(--_state-layer-size)/ 2 + (100% - var(--_state-layer-size)) * (var(--_start-fraction) + (var(--_end-fraction) - var(--_start-fraction))/ 2)))}.forge-slider.range :host-context([dir=rtl]) input.end{-webkit-clip-path:inset(0 calc(var(--_state-layer-size)/ 2 + (100% - var(--_state-layer-size)) * (var(--_start-fraction) + (var(--_end-fraction) - var(--_start-fraction))/ 2)) 0 0);clip-path:inset(0 calc(var(--_state-layer-size)/ 2 + (100% - var(--_state-layer-size)) * (var(--_start-fraction) + (var(--_end-fraction) - var(--_start-fraction))/ 2)) 0 0)}.forge-slider.range :host([dir=rtl]) input.end{-webkit-clip-path:inset(0 calc(var(--_state-layer-size)/ 2 + (100% - var(--_state-layer-size)) * (var(--_start-fraction) + (var(--_end-fraction) - var(--_start-fraction))/ 2)) 0 0);clip-path:inset(0 calc(var(--_state-layer-size)/ 2 + (100% - var(--_state-layer-size)) * (var(--_start-fraction) + (var(--_end-fraction) - var(--_start-fraction))/ 2)) 0 0)}.forge-slider.range input.end:dir(rtl){-webkit-clip-path:inset(0 calc(var(--_state-layer-size)/ 2 + (100% - var(--_state-layer-size)) * (var(--_start-fraction) + (var(--_end-fraction) - var(--_start-fraction))/ 2)) 0 0);clip-path:inset(0 calc(var(--_state-layer-size)/ 2 + (100% - var(--_state-layer-size)) * (var(--_start-fraction) + (var(--_end-fraction) - var(--_start-fraction))/ 2)) 0 0)}.track{position:absolute;inset:0;display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center}.track::after,.track::before{content:\"\";position:absolute;inset-inline-start:calc(var(--_state-layer-size)/ 2 - var(--_with-tick-marks-container-size));inset-inline-end:calc(var(--_state-layer-size)/ 2 - var(--_with-tick-marks-container-size));background-size:calc((100% - var(--_with-tick-marks-container-size) * 2)/ var(--_tick-count)) 100%}.track::before{block-size:var(--_inactive-track-height);border-radius:var(--_inactive-track-shape);background-color:var(--_inactive-track-color-fallback)}@supports (background-color:color-mix(in srgb,red 50%,transparent)){.track::before{background-color:var(--_inactive-track-color)}}.track::after{block-size:var(--_active-track-height);border-radius:var(--_active-track-shape);-webkit-clip-path:inset(0 calc(var(--_with-tick-marks-container-size) * min((1 - var(--_end-fraction)) * 1000000000,1) + (100% - var(--_with-tick-marks-container-size) * 2) * (1 - var(--_end-fraction))) 0 calc(var(--_with-tick-marks-container-size) * min(var(--_start-fraction) * 1000000000,1) + (100% - var(--_with-tick-marks-container-size) * 2) * var(--_start-fraction)));clip-path:inset(0 calc(var(--_with-tick-marks-container-size) * min((1 - var(--_end-fraction)) * 1000000000,1) + (100% - var(--_with-tick-marks-container-size) * 2) * (1 - var(--_end-fraction))) 0 calc(var(--_with-tick-marks-container-size) * min(var(--_start-fraction) * 1000000000,1) + (100% - var(--_with-tick-marks-container-size) * 2) * var(--_start-fraction)));background-color:var(--_active-track-color)}.track.tickmarks::before{background-image:radial-gradient(circle at var(--_with-tick-marks-container-size) center,var(--_with-tick-marks-inactive-container-color) 0,var(--_with-tick-marks-inactive-container-color) calc(var(--_with-tick-marks-container-size)/ 2),transparent calc(var(--_with-tick-marks-container-size)/ 2))}.track.tickmarks::after{background-image:radial-gradient(circle at var(--_with-tick-marks-container-size) center,var(--_with-tick-marks-active-container-color) 0,var(--_with-tick-marks-active-container-color) calc(var(--_with-tick-marks-container-size)/ 2),transparent calc(var(--_with-tick-marks-container-size)/ 2))}.handle-container-block,.handle-container-padded{position:relative;block-size:100%;inline-size:100%}.handle-container-padded{padding-inline:calc(var(--_state-layer-size)/ 2)}.handle-container{position:absolute;inset-block-start:0;inset-block-end:0;inset-inline-start:calc(100% * var(--_start-fraction));inline-size:calc(100% * (var(--_end-fraction) - var(--_start-fraction)))}.handle{position:absolute;block-size:var(--_state-layer-size);inline-size:var(--_state-layer-size);border-radius:var(--_handle-shape);display:grid;place-items:center}.handle.start{inset-inline-start:calc(0px - var(--_state-layer-size)/ 2)}.handle.end{inset-inline-end:calc(0px - var(--_state-layer-size)/ 2)}.handle-thumb{-webkit-box-shadow:0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12);box-shadow:0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12);position:absolute;height:var(--_handle-height);width:var(--_handle-width);border-radius:var(--_handle-shape);background:var(--_handle-color)}.handle-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);position:absolute;-webkit-box-sizing:border-box;box-sizing:border-box;display:grid;padding:4px;place-items:center;border-radius:9999px;color:var(--_label-label-text-color);font-weight:500;white-space:nowrap;inset-block-end:100%;min-inline-size:var(--_label-container-height);min-block-size:var(--_label-container-height);background:var(--_label-container-color);-webkit-transition:-webkit-transform .1s cubic-bezier(.2, 0, 0, 1);transition:-webkit-transform .1s cubic-bezier(.2, 0, 0, 1);transition:transform .1s cubic-bezier(.2, 0, 0, 1);transition:transform .1s cubic-bezier(.2, 0, 0, 1),-webkit-transform .1s cubic-bezier(.2, 0, 0, 1);-webkit-transform-origin:center bottom;transform-origin:center bottom;-webkit-transform:scale(0);transform:scale(0)}.handle-label::after,.handle-label::before{content:\"\";position:absolute;display:block;background:inherit}.handle-label::before{inline-size:calc(var(--_label-container-height)/ 2);block-size:calc(var(--_label-container-height)/ 2);bottom:calc(var(--_label-container-height)/ -10);-webkit-transform:rotate(45deg);transform:rotate(45deg)}.handle-label::after{inset:0;border-radius:inherit}.handle-label-content{z-index:1}.handle-container.hover .handle-thumb{background:var(--_hover-handle-color)}:host(:not([disabled])) input.end:active~.handle-container-padded .handle.end>.handle-thumb,:host(:not([disabled])) input.start:active~.handle-container-padded .handle.start>.handle-thumb{background:var(--_pressed-handle-color)}:host([disabled]) .handle-thumb{-webkit-box-shadow:0 0 0 0 rgba(0,0,0,.2),0 0 0 0 rgba(0,0,0,.14),0 0 0 0 rgba(0,0,0,.12);box-shadow:0 0 0 0 rgba(0,0,0,.2),0 0 0 0 rgba(0,0,0,.14),0 0 0 0 rgba(0,0,0,.12);background:var(--_disabled-handle-color)}:host([disabled]) .handle-label{background:var(--_disabled-handle-color)}:host([disabled]) .track::before{opacity:calc(1 / var(--_disabled-active-track-opacity) * var(--_disabled-inactive-track-opacity));background-color:var(--_disabled-inactive-track-color)}:host([disabled]) .track::after{background-color:var(--_disabled-active-track-color)}:host([disabled]) .track.tickmarks::before{background-image:radial-gradient(circle at var(--_with-tick-marks-container-size) center,var(--_with-tick-marks-disabled-active-container-color) 0,var(--_with-tick-marks-disabled-active-container-color) calc(var(--_with-tick-marks-container-size)/ 2),transparent calc(var(--_with-tick-marks-container-size)/ 2))}:host([disabled]) .track.tickmarks::after{background-image:radial-gradient(circle at var(--_with-tick-marks-container-size) center,var(--_with-tick-marks-disabled-inactive-container-color) 0,var(--_with-tick-marks-disabled-inactive-container-color) calc(var(--_with-tick-marks-container-size)/ 2),transparent calc(var(--_with-tick-marks-container-size)/ 2))}:host([disabled]) input[type=range]{cursor:not-allowed}:host-context([dir=rtl]) .track::after{-webkit-clip-path:inset(0 calc(var(--_with-tick-marks-container-size) * min(var(--_start-fraction) * 1000000000,1) + (100% - var(--_with-tick-marks-container-size) * 2) * var(--_start-fraction)) 0 calc(var(--_with-tick-marks-container-size) * min((1 - var(--_end-fraction)) * 1000000000,1) + (100% - var(--_with-tick-marks-container-size) * 2) * (1 - var(--_end-fraction))));clip-path:inset(0 calc(var(--_with-tick-marks-container-size) * min(var(--_start-fraction) * 1000000000,1) + (100% - var(--_with-tick-marks-container-size) * 2) * var(--_start-fraction)) 0 calc(var(--_with-tick-marks-container-size) * min((1 - var(--_end-fraction)) * 1000000000,1) + (100% - var(--_with-tick-marks-container-size) * 2) * (1 - var(--_end-fraction))))}:host([dir=rtl]) .track::after{-webkit-clip-path:inset(0 calc(var(--_with-tick-marks-container-size) * min(var(--_start-fraction) * 1000000000,1) + (100% - var(--_with-tick-marks-container-size) * 2) * var(--_start-fraction)) 0 calc(var(--_with-tick-marks-container-size) * min((1 - var(--_end-fraction)) * 1000000000,1) + (100% - var(--_with-tick-marks-container-size) * 2) * (1 - var(--_end-fraction))));clip-path:inset(0 calc(var(--_with-tick-marks-container-size) * min(var(--_start-fraction) * 1000000000,1) + (100% - var(--_with-tick-marks-container-size) * 2) * var(--_start-fraction)) 0 calc(var(--_with-tick-marks-container-size) * min((1 - var(--_end-fraction)) * 1000000000,1) + (100% - var(--_with-tick-marks-container-size) * 2) * (1 - var(--_end-fraction))))}.track:dir(rtl)::after{-webkit-clip-path:inset(0 calc(var(--_with-tick-marks-container-size) * min(var(--_start-fraction) * 1000000000,1) + (100% - var(--_with-tick-marks-container-size) * 2) * var(--_start-fraction)) 0 calc(var(--_with-tick-marks-container-size) * min((1 - var(--_end-fraction)) * 1000000000,1) + (100% - var(--_with-tick-marks-container-size) * 2) * (1 - var(--_end-fraction))));clip-path:inset(0 calc(var(--_with-tick-marks-container-size) * min(var(--_start-fraction) * 1000000000,1) + (100% - var(--_with-tick-marks-container-size) * 2) * var(--_start-fraction)) 0 calc(var(--_with-tick-marks-container-size) * min((1 - var(--_end-fraction)) * 1000000000,1) + (100% - var(--_with-tick-marks-container-size) * 2) * (1 - var(--_end-fraction))))}input.end:focus~.handle-container-padded .handle.end>.handle-thumb,input.start:focus~.handle-container-padded .handle.start>.handle-thumb{background:var(--_focus-handle-color)}.on-top.overlapping .handle-label,.on-top.overlapping .handle-label::before,.on-top.overlapping .handle-thumb{border:var(--_with-overlap-handle-outline-color) solid var(--_with-overlap-handle-outline-width)}.handle-container.hover .handle-label,:host(:focus-within) .handle-label,:where(:has(input:active)) .handle-label{-webkit-transform:scale(1);transform:scale(1)}input[type=range]{opacity:0;-webkit-tap-highlight-color:transparent;position:absolute;-webkit-box-sizing:border-box;box-sizing:border-box;height:100%;width:100%;margin:0;background:0 0;cursor:pointer;pointer-events:auto;-webkit-appearance:none;-moz-appearance:none;appearance:none}input[type=range]:focus{outline:0}input[type=range]::-webkit-slider-runnable-track{-webkit-appearance:none}input[type=range]::-moz-range-track{-moz-appearance:none;appearance:none}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;block-size:var(--_state-layer-size);inline-size:var(--_state-layer-size);-webkit-transform:scaleX(0);transform:scaleX(0);opacity:0;z-index:2}input[type=range]::-moz-range-thumb{-moz-appearance:none;appearance:none;block-size:var(--_state-layer-size);inline-size:var(--_state-layer-size);transform:scaleX(0);opacity:0;z-index:2}.on-top{z-index:1}@media (prefers-reduced-motion){.handle-label{-webkit-transition-duration:0;transition-duration:0}}forge-focus-indicator{--forge-focus-indicator-shape:50%;--forge-focus-indicator-outward-offset:0px}forge-state-layer{--forge-state-layer-color:var(--_handle-color)}';
 /**
- * The custom element class behind the `<forge-slider>` component.
- *
  * @tag forge-slider
+ *
+ * @summary Sliders allow users to make selections from a range of values.
+ *
+ * @description Use sliders to enable users to select a value from a continuous or discrete range of values.
+ *
+ * @property {number} value - The current value of the slider.
+ * @property {number} valueStart - The current start value of the slider.
+ * @property {number} valueEnd - The current end value of the slider.
+ * @property {string} label - The label text for the slider handle.
+ * @property {string} labelStart - The label text for the start slider handle.
+ * @property {string} labelEnd - The label text for the end slider handle.
+ * @property {SliderLabelBuilder} labelBuilder - A function that returns a label for the slider handle.
+ * @property {number} min - The minimum value of the slider.
+ * @property {number} max - The maximum value of the slider.
+ * @property {number} step - The step value of the slider.
+ * @property {boolean} range - Controls range mode.
+ * @property {boolean} tickmarks - Controls if tickmarks are visible.
+ * @property {boolean} labeled - Controls if labels are visible.
+ * @property {boolean} disabled - Controls if the slider is disabled.
+ * @property {boolean} readonly - Controls if the slider is readonly.
+ * @property {string} name - The form control name.
+ * @property {string} nameStart - The form control name for the start handle in range mode.
+ * @property {string} nameEnd - The form control name for the end handle in range mode.
+ *
+ * @attribute {string} value - Sets the current value of the slider.
+ * @attribute {string} value-start - Sets the current start value of the slider in range mode.
+ * @attribute {string} value-end - Sets the current end value of the slider in range mode.
+ * @attribute {string} label - Sets the label text for the slider handle.
+ * @attribute {string} label-start - Sets the label text for the start slider handle in range mode.
+ * @attribute {string} label-end - Sets the label text for the end slider handle in range mode.
+ * @attribute {string} min - Sets the minimum value of the slider.
+ * @attribute {string} max - Sets the maximum value of the slider.
+ * @attribute {string} step - Sets the step value of the slider.
+ * @attribute {string} tickmarks - Controls if tickmarks are visible.
+ * @attribute {string} labeled - Controls if labels are visible.
+ * @attribute {string} range - Controls range mode.
+ * @attribute {string} disabled - Controls if the slider is disabled.
+ * @attribute {string} readonly - Controls if the slider is readonly.
+ * @attribute {string} name - Controls the form control name.
+ * @attribute {string} name-start - Controls the form control name for the start handle in range mode.
+ * @attribute {string} name-end - Controls the form control name for the end handle in range mode.
+ *
+ * @event forge-slider-input {CustomEvent} - Dispatches when the slider value changes.
+ * @event forge-slider-change {CustomEvent} - Dispatches when the slider value changes and the value has been committed.
+ *
+ * @cssproperty --mdc-theme-primary - The primary color of the slider.
+ * @cssproperty --mdc-theme-on-primary - The color of elements placed on top of the primary color (the label text for example).
+ * @cssproperty --forge-slider-track-height - The height of the track.
+ * @cssproperty --forge-slider-active-track-color - The color of the active track.
+ * @cssproperty --forge-slider-active-track-height - The height of the active track.
+ * @cssproperty --forge-slider-active-track-shape - The shape of the active track.
+ * @cssproperty --forge-slider-disabled-active-track-color - The color of the active track when disabled.
+ * @cssproperty --forge-slider-disabled-active-track-opacity - The opacity of the active track when disabled.
+ * @cssproperty --forge-slider-disabled-handle-color - The color of the slider handle when disabled.
+ * @cssproperty --forge-slider-disabled-inactive-track-color - The color of the inactive track when disabled.
+ * @cssproperty --forge-slider-disabled-inactive-track-opacity - The opacity of the inactive track when disabled.
+ * @cssproperty --forge-slider-focus-handle-color - The color of the slider handle when focused.
+ * @cssproperty --forge-slider-handle-color - The color of the slider handle.
+ * @cssproperty --forge-slider-handle-height - The height of the slider handle.
+ * @cssproperty --forge-slider-handle-width - The width of the slider handle.
+ * @cssproperty --forge-slider-handle-shape - The shape of the slider handle.
+ * @cssproperty --forge-slider-hover-handle-color - The color of the slider handle when hovered.
+ * @cssproperty --forge-slider-inactive-track-color - The color of the inactive track.
+ * @cssproperty --forge-slider-inactive-track-height - The height of the inactive track.
+ * @cssproperty --forge-slider-inactive-track-shape - The shape of the inactive track.
+ * @cssproperty --forge-slider-label-container-color - The color of the label container.
+ * @cssproperty --forge-slider-label-container-height - The height of the label container.
+ * @cssproperty --forge-slider-label-label-text-color - The color of the label text.
+ * @cssproperty --forge-slider-pressed-handle-color - The color of the slider handle when pressed.
+ * @cssproperty --forge-slider-state-layer-size - The size of the state layer.
+ * @cssproperty --forge-slider-with-overlap-handle-outline-color - The color of the slider handle outline when overlapping.
+ * @cssproperty --forge-slider-with-overlap-handle-outline-width - The width of the slider handle outline when overlapping.
+ * @cssproperty --forge-slider-with-tick-marks-active-container-color - The color of the active tick mark container when tick marks are visible.
+ * @cssproperty --forge-slider-with-tick-marks-container-size - The size of the tick mark container when tick marks are visible.
+ * @cssproperty --forge-slider-with-tick-marks-disabled-active-container-color - The color of the active tick mark container when tick marks are visible and disabled.
+ * @cssproperty --forge-slider-with-tick-marks-disabled-inactive-container-color - The color of the inactive tick mark container when tick marks are visible and disabled.
+ * @cssproperty --forge-slider-with-tick-marks-inactive-container-color - The color of the inactive tick mark container when tick marks are visible.
+ *
+ * @csspart slider - Styles the slider container element.
+ * @csspart track - Styles the track element.
+ * @csspart handle-end - Styles the end handle element.
+ * @csspart handle-end-thumb - Styles the end handle thumb element.
+ * @csspart handle-end-label - Styles the end handle label element.
+ * @csspart handle-end-label-content - Styles the end handle label content element.
+ * @csspart handle-start - Styles the start handle element.
+ * @csspart handle-start-thumb - Styles the start handle thumb element.
+ * @csspart handle-start-label - Styles the start handle label element.
+ * @csspart handle-start-label-content - Styles the start handle label content element.
  */
 let SliderComponent = class SliderComponent extends BaseComponent {
-    constructor() {
-        super();
-        // State
-        this._type = 'continuous';
-        this._value = 0;
-        this._valueStart = 0;
-        this._min = 0;
-        this._max = 100;
-        this._step = 1;
-        this._disabled = false;
-        this._mdcSliderUpdateListener = evt => this._onSliderUpdate(evt);
-    }
     static get observedAttributes() {
         return [
-            SLIDER_CONSTANTS.attributes.TYPE,
+            SLIDER_CONSTANTS.attributes.ARIA_LABEL,
+            SLIDER_CONSTANTS.attributes.ARIA_LABEL_START,
+            SLIDER_CONSTANTS.attributes.ARIA_LABEL_END,
             SLIDER_CONSTANTS.attributes.VALUE,
             SLIDER_CONSTANTS.attributes.VALUE_START,
+            SLIDER_CONSTANTS.attributes.VALUE_END,
+            SLIDER_CONSTANTS.attributes.LABEL,
+            SLIDER_CONSTANTS.attributes.LABEL_START,
+            SLIDER_CONSTANTS.attributes.LABEL_END,
             SLIDER_CONSTANTS.attributes.MAX,
             SLIDER_CONSTANTS.attributes.MIN,
             SLIDER_CONSTANTS.attributes.STEP,
-            SLIDER_CONSTANTS.attributes.DISABLED
+            SLIDER_CONSTANTS.attributes.TICKMARKS,
+            SLIDER_CONSTANTS.attributes.LABELED,
+            SLIDER_CONSTANTS.attributes.RANGE,
+            SLIDER_CONSTANTS.attributes.DISABLED,
+            SLIDER_CONSTANTS.attributes.READONLY
         ];
     }
-    connectedCallback() {
-        this._initialize();
+    get form() {
+        return this.internals.form;
     }
-    disconnectedCallback() {
-        if (this._mdcSlider) {
-            this._mdcSlider.destroy();
-        }
+    get labels() {
+        return this.internals.labels;
+    }
+    get name() {
+        var _a;
+        return (_a = this.getAttribute('name')) !== null && _a !== void 0 ? _a : '';
+    }
+    set name(value) {
+        toggleAttribute(this, !!value, 'name', value !== null && value !== void 0 ? value : '');
+    }
+    get nameStart() {
+        var _a;
+        return (_a = this.getAttribute('name-start')) !== null && _a !== void 0 ? _a : this.name;
+    }
+    set nameStart(value) {
+        toggleAttribute(this, !!value, 'name-start', value !== null && value !== void 0 ? value : '');
+    }
+    get nameEnd() {
+        var _a;
+        return (_a = this.getAttribute('name-end')) !== null && _a !== void 0 ? _a : this.nameStart;
+    }
+    set nameEnd(value) {
+        toggleAttribute(this, !!value, 'name-end', value !== null && value !== void 0 ? value : '');
+    }
+    constructor() {
+        super();
+        attachShadowTemplate(this, template, styles);
+        this.internals = this.attachInternals();
+        this._foundation = new SliderFoundation(new SliderAdapter(this));
+    }
+    connectedCallback() {
+        this._foundation.initialize();
     }
     attributeChangedCallback(name, oldValue, newValue) {
         switch (name) {
-            case SLIDER_CONSTANTS.attributes.TYPE:
-                this.type = newValue;
+            case SLIDER_CONSTANTS.attributes.ARIA_LABEL:
+                this._foundation.ariaLabel = newValue;
+                break;
+            case SLIDER_CONSTANTS.attributes.ARIA_LABEL_START:
+                this._foundation.ariaLabelStart = newValue;
+                break;
+            case SLIDER_CONSTANTS.attributes.ARIA_LABEL_END:
+                this._foundation.ariaLabelEnd = newValue;
                 break;
             case SLIDER_CONSTANTS.attributes.VALUE:
                 this.value = coerceNumber(newValue);
@@ -63,6 +179,18 @@ let SliderComponent = class SliderComponent extends BaseComponent {
             case SLIDER_CONSTANTS.attributes.VALUE_START:
                 this.valueStart = coerceNumber(newValue);
                 break;
+            case SLIDER_CONSTANTS.attributes.VALUE_END:
+                this.valueEnd = coerceNumber(newValue);
+                break;
+            case SLIDER_CONSTANTS.attributes.LABEL:
+                this.label = newValue;
+                break;
+            case SLIDER_CONSTANTS.attributes.LABEL_START:
+                this.labelStart = newValue;
+                break;
+            case SLIDER_CONSTANTS.attributes.LABEL_END:
+                this.labelEnd = newValue;
+                break;
             case SLIDER_CONSTANTS.attributes.MIN:
                 this.min = coerceNumber(newValue);
                 break;
@@ -72,237 +200,100 @@ let SliderComponent = class SliderComponent extends BaseComponent {
             case SLIDER_CONSTANTS.attributes.STEP:
                 this.step = coerceNumber(newValue);
                 break;
-            case SLIDER_CONSTANTS.attributes.DISABLED:
-                this.disabled = coerceBoolean(newValue);
-                break;
-        }
-    }
-    _setTemplate(template) {
-        if (this.shadowRoot) {
-            replaceShadowTemplate(this, template, styles);
-        }
-        else {
-            attachShadowTemplate(this, template, styles);
-        }
-    }
-    _initializeTemplate() {
-        switch (this._type) {
-            case 'continuous':
-                this._setTemplate(continuousTemplate);
-                break;
-            case 'continuous-range':
-                this._setTemplate(continuousRangeTemplate);
+            case SLIDER_CONSTANTS.attributes.TICKMARKS:
+                this.tickmarks = coerceBoolean(newValue);
                 break;
-            case 'discrete':
-                this._setTemplate(discreteTemplate);
+            case SLIDER_CONSTANTS.attributes.LABELED:
+                this.labeled = coerceBoolean(newValue);
                 break;
-            case 'discrete-markers':
-                this._setTemplate(discreteMarkersTemplate);
+            case SLIDER_CONSTANTS.attributes.RANGE:
+                this.range = coerceBoolean(newValue);
                 break;
-            case 'discrete-range':
-                this._setTemplate(discreteRangeTemplate);
+            case SLIDER_CONSTANTS.attributes.DISABLED:
+                this.disabled = coerceBoolean(newValue);
                 break;
-            case 'discrete-range-markers':
-                this._setTemplate(discreteRangeMarkersTemplate);
+            case SLIDER_CONSTANTS.attributes.READONLY:
+                this.readonly = coerceBoolean(newValue);
                 break;
-            default:
-                throw new Error(`Invalid slider type provided: ${this._type}. Must be one of "continuous", "continuous-range", "discrete", "discrete-markers", "discrete-range", "discrete-range-markers".`);
         }
     }
-    _initialize() {
-        this._initializeTemplate();
-        this._rootElement = getShadowElement(this, SLIDER_CONSTANTS.selectors.ROOT);
-        this._inputElement = getShadowElement(this, SLIDER_CONSTANTS.selectors.VALUE_INPUT);
-        this._inputElementStart = getShadowElement(this, SLIDER_CONSTANTS.selectors.VALUE_INPUT_START);
-        // We need to initialize MDCSlider in the next cycle after our template has been placed in the DOM
-        window.setTimeout(() => {
-            var _a, _b;
-            this._initializeMdcSlider();
-            (_a = this._rootElement) === null || _a === void 0 ? void 0 : _a.addEventListener(SLIDER_CONSTANTS.events.MDC_INPUT, this._mdcSliderUpdateListener);
-            (_b = this._rootElement) === null || _b === void 0 ? void 0 : _b.addEventListener(SLIDER_CONSTANTS.events.MDC_CHANGE, this._mdcSliderUpdateListener);
-        });
-    }
-    _initializeMdcSlider() {
-        if (!this._rootElement) {
+    formResetCallback() {
+        if (this._foundation.range) {
+            const valueStart = this.getAttribute('value-start');
+            this.valueStart = valueStart !== null ? Number(valueStart) : SLIDER_CONSTANTS.numbers.DEFAULT_START_VALUE;
+            const valueEnd = this.getAttribute('value-end');
+            this.valueEnd = valueEnd !== null ? Number(valueEnd) : SLIDER_CONSTANTS.numbers.DEFAULT_END_VALUE;
             return;
         }
-        if (this._mdcSlider) {
-            this._mdcSlider.destroy();
-        }
-        this._mdcSlider = new MDCSlider(this._rootElement);
-        this._mdcSliderFoundation = this._mdcSlider.foundation;
-        this._syncToSlider();
-        this._mdcSlider.initialize();
-    }
-    _onSliderUpdate(evt) {
-        evt.stopPropagation();
-        this._syncFromSlider();
-        const data = this._isRangeSlider ? { valueStart: this._valueStart, valueEnd: this._value } : { value: this._value };
-        const type = evt.type === SLIDER_CONSTANTS.events.MDC_CHANGE ? SLIDER_CONSTANTS.events.FORGE_CHANGE : SLIDER_CONSTANTS.events.FORGE_INPUT;
-        emitEvent(this, type, data);
-    }
-    _syncToSlider() {
-        this._mdcSlider.setValue(this._value);
-        if (this._isRangeSlider) {
-            this._mdcSlider.setValueStart(this._valueStart);
-        }
-        this._applyMin(this._min);
-        this._applyMax(this._max);
-        this._applyStep(this._step);
-        this._mdcSlider.setDisabled(this._disabled);
-    }
-    _syncFromSlider() {
-        this._value = this._mdcSlider.getValue();
-        if (this._isRangeSlider) {
-            this._valueStart = this._mdcSlider.getValueStart();
-        }
-        this.setAttribute(SLIDER_CONSTANTS.attributes.VALUE, this._value.toString());
-    }
-    _applyMin(min) {
-        var _a, _b;
-        if (this._inputElement) {
-            this._inputElement.min = `${min}`;
-        }
-        if (this._inputElementStart) {
-            this._inputElementStart.min = `${min}`;
-        }
-        (_a = this._mdcSliderFoundation) === null || _a === void 0 ? void 0 : _a.setMin(min);
-        (_b = this._mdcSlider) === null || _b === void 0 ? void 0 : _b.layout();
-    }
-    _applyMax(max) {
-        var _a, _b;
-        if (this._inputElement) {
-            this._inputElement.max = `${max}`;
-        }
-        if (this._inputElementStart) {
-            this._inputElementStart.max = `${max}`;
-        }
-        (_a = this._mdcSliderFoundation) === null || _a === void 0 ? void 0 : _a.setMax(max);
-        (_b = this._mdcSlider) === null || _b === void 0 ? void 0 : _b.layout();
-    }
-    _applyStep(step) {
-        var _a, _b;
-        if (this._inputElement) {
-            this._inputElement.step = `${step}`;
-        }
-        if (this._inputElementStart) {
-            this._inputElementStart.step = `${step}`;
-        }
-        (_a = this._mdcSliderFoundation) === null || _a === void 0 ? void 0 : _a.setStep(step);
-        (_b = this._mdcSlider) === null || _b === void 0 ? void 0 : _b.layout();
-    }
-    get _isRangeSlider() {
-        return this._type.includes('range');
-    }
-    /**
-     * Gets/sets the type of slider this is: `continuous` (default), `discrete`, `discrete-markers`
-     */
-    get type() {
-        return this._type;
+        const value = this.getAttribute('value');
+        this.value = value !== null ? Number(value) : SLIDER_CONSTANTS.numbers.DEFAULT_VALUE;
     }
-    set type(value) {
-        this._type = value;
-        if (this.isConnected) {
-            this._initialize();
-        }
-    }
-    /**
-     * Gets/sets the value of the slider.
-     */
-    get value() {
-        return this._value;
-    }
-    set value(value) {
-        if (this._value !== value) {
-            if (isNaN(value) || typeof value !== 'number') {
-                value = 0;
-            }
-            this._value = value;
-            if (this._mdcSlider) {
-                this._mdcSlider.setValue(value);
-            }
-            this.setAttribute(SLIDER_CONSTANTS.attributes.VALUE, isDefined(this._value) ? this._value.toString() : '');
-        }
-    }
-    /**
-     * Gets/sets the start value of the slider (only applicable for range sliders).
-     */
-    get valueStart() {
-        return this._valueStart;
-    }
-    set valueStart(value) {
-        if (this._valueStart !== value) {
-            this._valueStart = value;
-            if (this._mdcSlider) {
-                this._mdcSlider.setValueStart(value);
-            }
-            this.setAttribute(SLIDER_CONSTANTS.attributes.VALUE_START, isDefined(this._valueStart) ? this._valueStart.toString() : '');
-        }
-    }
-    /**
-     * Gets/sets the minimum value for the slider.
-     */
-    get min() {
-        return this._min;
-    }
-    set min(value) {
-        if (this._min !== value) {
-            this._min = value;
-            if (this._mdcSlider) {
-                this._applyMin(this._min);
-            }
-            this.setAttribute(SLIDER_CONSTANTS.attributes.MIN, isDefined(this._min) ? this._min.toString() : '');
-        }
-    }
-    /**
-     * Gets/sets the maximum value for the slider.
-     */
-    get max() {
-        return this._max;
-    }
-    set max(value) {
-        if (this._max !== value) {
-            this._max = value;
-            if (this._mdcSlider) {
-                this._applyMax(this._max);
-            }
-            this.setAttribute(SLIDER_CONSTANTS.attributes.MAX, isDefined(this._max) ? this._max.toString() : '');
-        }
-    }
-    /**
-     * Gets/sets the step value for the slider when in discrete mode.
-     */
-    get step() {
-        return this._step;
-    }
-    set step(value) {
-        if (this._step !== value) {
-            this._step = value;
-            if (this._mdcSlider) {
-                this._applyStep(this._step);
-            }
-            this.setAttribute(SLIDER_CONSTANTS.attributes.STEP, isDefined(this._step) ? this._step.toString() : '');
-        }
-    }
-    /**
-     * Gets/sets the disabled state of the slider.
-     */
-    get disabled() {
-        return this._disabled;
-    }
-    set disabled(value) {
-        if (this._disabled !== value) {
-            this._disabled = value;
-            if (this._mdcSlider) {
-                this._mdcSlider.setDisabled(value);
-            }
-            this.setAttribute(SLIDER_CONSTANTS.attributes.DISABLED, isDefined(this._disabled) ? this._disabled.toString() : '');
+    formStateRestoreCallback(state) {
+        if (state && state[0] instanceof FormData) {
+            const values = Array.from(state[0]);
+            const [[, valueStart], [, valueEnd]] = values;
+            this.valueStart = Number(valueStart);
+            this.valueEnd = Number(valueEnd);
+            this.range = true;
+            return;
         }
+        this.value = Number(state);
+        this.range = false;
     }
 };
+SliderComponent.formAssociated = true;
+__decorate([
+    FoundationProperty()
+], SliderComponent.prototype, "value", void 0);
+__decorate([
+    FoundationProperty()
+], SliderComponent.prototype, "valueStart", void 0);
+__decorate([
+    FoundationProperty()
+], SliderComponent.prototype, "valueEnd", void 0);
+__decorate([
+    FoundationProperty()
+], SliderComponent.prototype, "label", void 0);
+__decorate([
+    FoundationProperty()
+], SliderComponent.prototype, "labelStart", void 0);
+__decorate([
+    FoundationProperty()
+], SliderComponent.prototype, "labelEnd", void 0);
+__decorate([
+    FoundationProperty()
+], SliderComponent.prototype, "labelBuilder", void 0);
+__decorate([
+    FoundationProperty()
+], SliderComponent.prototype, "min", void 0);
+__decorate([
+    FoundationProperty()
+], SliderComponent.prototype, "max", void 0);
+__decorate([
+    FoundationProperty()
+], SliderComponent.prototype, "step", void 0);
+__decorate([
+    FoundationProperty()
+], SliderComponent.prototype, "tickmarks", void 0);
+__decorate([
+    FoundationProperty()
+], SliderComponent.prototype, "labeled", void 0);
+__decorate([
+    FoundationProperty()
+], SliderComponent.prototype, "range", void 0);
+__decorate([
+    FoundationProperty()
+], SliderComponent.prototype, "disabled", void 0);
+__decorate([
+    FoundationProperty()
+], SliderComponent.prototype, "readonly", void 0);
 SliderComponent = __decorate([
     CustomElement({
-        name: SLIDER_CONSTANTS.elementName
+        name: SLIDER_CONSTANTS.elementName,
+        dependencies: [
+            FocusIndicatorComponent,
+            StateLayerComponent
+        ]
     })
 ], SliderComponent);
 export { SliderComponent };

package/esm/split-view/split-view/split-view-constants.d.ts

@@ -30,7 +30,7 @@ export declare const SPLIT_VIEW_CONSTANTS: {
         ANIMATING_LAYER: string;
     };
 };
-export declare type SplitViewOrientation = 'horizontal' | 'vertical';
+export type SplitViewOrientation = 'horizontal' | 'vertical';
 export interface ISplitViewUpdateConfig {
     accessibility?: boolean;
     cursor?: boolean;