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

package/esm/slider/slider.js

@@ -5,14 +5,15 @@
  */
 import { __decorate } from "tslib";
 import { attachShadowTemplate, coerceBoolean, coerceNumber, CustomElement, FoundationProperty, toggleAttribute } from '@tylertech/forge-core';
-import { BaseComponent } from '../core/base/base-component';
+import { internals } from '../constants';
+import { BaseFormComponent } from '../core/base/base-form-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';
 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, var(--forge-shape-full, 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, var(--forge-shape-round, 50%));--_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, var(--forge-shape-full, 9999px));--_label-container-shape:var(--forge-slider-label-container-shape, var(--forge-shape-full, 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-text-color:var(--forge-slider-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:var(--forge-typography-label-font-family, var(--forge-typography-font-family, Roboto, sans-serif));font-size:var(--forge-typography-label-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-font-size-scale, .75)));line-height:var(--forge-typography-label-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-line-height-scale, 1.25)));letter-spacing:var(--forge-typography-label-letter-spacing, .0333333333em);text-transform:var(--forge-typography-label-text-transform,inherit);-webkit-text-decoration:var(--forge-typography-label-text-decoration,inherit);text-decoration:var(--forge-typography-label-text-decoration,inherit);position:absolute;-webkit-box-sizing:border-box;box-sizing:border-box;display:grid;padding:4px;place-items:center;border-radius:var(--_label-container-shape);color:var(--_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 var(--forge-animation-duration-short2, 100ms) var(--forge-animation-easing-standard, cubic-bezier(.2, 0, 0, 1));transition:-webkit-transform var(--forge-animation-duration-short2, 100ms) var(--forge-animation-easing-standard, cubic-bezier(.2, 0, 0, 1));transition:transform var(--forge-animation-duration-short2, 100ms) var(--forge-animation-easing-standard, cubic-bezier(.2, 0, 0, 1));transition:transform var(--forge-animation-duration-short2, 100ms) var(--forge-animation-easing-standard, cubic-bezier(.2, 0, 0, 1)),-webkit-transform var(--forge-animation-duration-short2, 100ms) var(--forge-animation-easing-standard, 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)}';
+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 exportparts=\"surface:state-layer\" target=\"end\"></forge-state-layer><forge-focus-indicator exportparts=\"indicator: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{--_slider-start-fraction:0;--_slider-end-fraction:0;--_slider-tick-count:100;--_slider-track-height:var(--forge-slider-track-height, 4px);--_slider-active-track-color:var(--forge-slider-active-track-color, var(--forge-theme-primary, #3f51b5));--_slider-active-track-height:var(--forge-slider-active-track-height, var(--_slider-track-height));--_slider-active-track-shape:var(--forge-slider-active-track-shape, var(--forge-shape-full, 9999px));--_slider-disabled-active-track-color:var(--forge-slider-disabled-active-track-color, var(--forge-theme-surface-container-high, #9e9e9e));--_slider-disabled-active-track-opacity:var(--forge-slider-disabled-active-track-opacity, 0.38);--_slider-disabled-handle-color:var(--forge-slider-disabled-handle-color, var(--forge-theme-surface-container-high, #9e9e9e));--_slider-disabled-inactive-track-color:var(--forge-slider-disabled-inactive-track-color, var(--forge-theme-surface-container-high, #9e9e9e));--_slider-disabled-inactive-track-opacity:var(--forge-slider-disabled-inactive-track-opacity, 0.12);--_slider-focus-handle-color:var(--forge-slider-focus-handle-color, var(--forge-theme-primary, #3f51b5));--_slider-handle-color:var(--forge-slider-handle-color, var(--forge-theme-primary, #3f51b5));--_slider-handle-height:var(--forge-slider-handle-height, 20px);--_slider-handle-shape:var(--forge-slider-handle-shape, var(--forge-shape-round, 50%));--_slider-handle-width:var(--forge-slider-handle-width, 20px);--_slider-hover-handle-color:var(--forge-slider-hover-handle-color, var(--forge-theme-primary, #3f51b5));--_slider-inactive-track-color:var(--forge-slider-inactive-track-color, var(--forge-theme-primary-container, #d1d5ed));--_slider-inactive-track-height:var(--forge-slider-inactive-track-height, var(--_slider-track-height));--_slider-inactive-track-shape:var(--forge-slider-inactive-track-shape, var(--forge-shape-full, 9999px));--_slider-label-container-shape:var(--forge-slider-label-container-shape, var(--forge-shape-full, 9999px));--_slider-label-container-color:var(--forge-slider-label-container-color, var(--forge-theme-primary, #3f51b5));--_slider-label-container-height:var(--forge-slider-label-container-height, 28px);--_slider-label-text-color:var(--forge-slider-label-text-color, var(--forge-theme-on-primary, #ffffff));--_slider-pressed-handle-color:var(--forge-slider-pressed-handle-color, var(--forge-theme-primary, #3f51b5));--_slider-state-layer-size:var(--forge-slider-state-layer-size, 40px);--_slider-with-overlap-handle-outline-color:var(--forge-slider-with-overlap-handle-outline-color, var(--forge-theme-on-primary, #ffffff));--_slider-with-overlap-handle-outline-width:var(--forge-slider-with-overlap-handle-outline-width, 1px);--_slider-with-tick-marks-active-container-color:var(--forge-slider-with-tick-marks-active-container-color, var(--forge-theme-on-primary, #ffffff));--_slider-with-tick-marks-container-size:var(--forge-slider-with-tick-marks-container-size, 2px);--_slider-with-tick-marks-disabled-active-container-color:var(--forge-slider-with-tick-marks-disabled-active-container-color, var(--forge-theme-on-surface-container-high, #000000));--_slider-with-tick-marks-disabled-inactive-container-color:var(--forge-slider-with-tick-marks-disabled-inactive-container-color, var(--forge-theme-on-surface-container-high, #000000));--_slider-with-tick-marks-inactive-container-color:var(--forge-slider-with-tick-marks-inactive-container-color, var(--forge-theme-primary, #3f51b5))}.forge-slider{-webkit-box-flex:1;flex:1;display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;position:relative;block-size:var(--_slider-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(--_slider-state-layer-size)/ 2 + (100% - var(--_slider-state-layer-size)) * (var(--_slider-start-fraction) + ((var(--_slider-end-fraction) - var(--_slider-start-fraction))/ 2)))));clip-path:inset(0 0 0 calc(100% - (var(--_slider-state-layer-size)/ 2 + (100% - var(--_slider-state-layer-size)) * (var(--_slider-start-fraction) + ((var(--_slider-end-fraction) - var(--_slider-start-fraction))/ 2)))))}.forge-slider.range :host([dir=rtl]) input.start{-webkit-clip-path:inset(0 0 0 calc(100% - (var(--_slider-state-layer-size)/ 2 + (100% - var(--_slider-state-layer-size)) * (var(--_slider-start-fraction) + ((var(--_slider-end-fraction) - var(--_slider-start-fraction))/ 2)))));clip-path:inset(0 0 0 calc(100% - (var(--_slider-state-layer-size)/ 2 + (100% - var(--_slider-state-layer-size)) * (var(--_slider-start-fraction) + ((var(--_slider-end-fraction) - var(--_slider-start-fraction))/ 2)))))}.forge-slider.range input.start:dir(rtl){-webkit-clip-path:inset(0 0 0 calc(100% - (var(--_slider-state-layer-size)/ 2 + (100% - var(--_slider-state-layer-size)) * (var(--_slider-start-fraction) + ((var(--_slider-end-fraction) - var(--_slider-start-fraction))/ 2)))));clip-path:inset(0 0 0 calc(100% - (var(--_slider-state-layer-size)/ 2 + (100% - var(--_slider-state-layer-size)) * (var(--_slider-start-fraction) + ((var(--_slider-end-fraction) - var(--_slider-start-fraction))/ 2)))))}.forge-slider.range input.start{-webkit-clip-path:inset(0 calc(100% - (var(--_slider-state-layer-size)/ 2 + (100% - var(--_slider-state-layer-size)) * (var(--_slider-start-fraction) + ((var(--_slider-end-fraction) - var(--_slider-start-fraction))/ 2)))) 0 0);clip-path:inset(0 calc(100% - (var(--_slider-state-layer-size)/ 2 + (100% - var(--_slider-state-layer-size)) * (var(--_slider-start-fraction) + ((var(--_slider-end-fraction) - var(--_slider-start-fraction))/ 2)))) 0 0)}.forge-slider.range input.end{-webkit-clip-path:inset(0 0 0 calc(var(--_slider-state-layer-size)/ 2 + (100% - var(--_slider-state-layer-size)) * (var(--_slider-start-fraction) + ((var(--_slider-end-fraction) - var(--_slider-start-fraction))/ 2))));clip-path:inset(0 0 0 calc(var(--_slider-state-layer-size)/ 2 + (100% - var(--_slider-state-layer-size)) * (var(--_slider-start-fraction) + ((var(--_slider-end-fraction) - var(--_slider-start-fraction))/ 2))))}.forge-slider.range :host-context([dir=rtl]) input.end{-webkit-clip-path:inset(0 calc(var(--_slider-state-layer-size)/ 2 + (100% - var(--_slider-state-layer-size)) * (var(--_slider-start-fraction) + ((var(--_slider-end-fraction) - var(--_slider-start-fraction))/ 2))) 0 0);clip-path:inset(0 calc(var(--_slider-state-layer-size)/ 2 + (100% - var(--_slider-state-layer-size)) * (var(--_slider-start-fraction) + ((var(--_slider-end-fraction) - var(--_slider-start-fraction))/ 2))) 0 0)}.forge-slider.range :host([dir=rtl]) input.end{-webkit-clip-path:inset(0 calc(var(--_slider-state-layer-size)/ 2 + (100% - var(--_slider-state-layer-size)) * (var(--_slider-start-fraction) + ((var(--_slider-end-fraction) - var(--_slider-start-fraction))/ 2))) 0 0);clip-path:inset(0 calc(var(--_slider-state-layer-size)/ 2 + (100% - var(--_slider-state-layer-size)) * (var(--_slider-start-fraction) + ((var(--_slider-end-fraction) - var(--_slider-start-fraction))/ 2))) 0 0)}.forge-slider.range input.end:dir(rtl){-webkit-clip-path:inset(0 calc(var(--_slider-state-layer-size)/ 2 + (100% - var(--_slider-state-layer-size)) * (var(--_slider-start-fraction) + ((var(--_slider-end-fraction) - var(--_slider-start-fraction))/ 2))) 0 0);clip-path:inset(0 calc(var(--_slider-state-layer-size)/ 2 + (100% - var(--_slider-state-layer-size)) * (var(--_slider-start-fraction) + ((var(--_slider-end-fraction) - var(--_slider-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(--_slider-state-layer-size)/ 2) - var(--_slider-with-tick-marks-container-size));inset-inline-end:calc((var(--_slider-state-layer-size)/ 2) - var(--_slider-with-tick-marks-container-size));background-size:calc((100% - var(--_slider-with-tick-marks-container-size) * 2)/ var(--_slider-tick-count)) 100%}.track::before{block-size:var(--_slider-inactive-track-height);border-radius:var(--_slider-inactive-track-shape);background-color:var(--_slider-inactive-track-color)}.track::after{block-size:var(--_slider-active-track-height);border-radius:var(--_slider-active-track-shape);-webkit-clip-path:inset(0 calc(calc(var(--_slider-with-tick-marks-container-size) * min((1 - var(--_slider-end-fraction)) * 1000000000,1)) + calc(100% - var(--_slider-with-tick-marks-container-size) * 2) * (1 - var(--_slider-end-fraction))) 0 calc(calc(var(--_slider-with-tick-marks-container-size) * min(var(--_slider-start-fraction) * 1e9,1)) + calc(100% - var(--_slider-with-tick-marks-container-size) * 2) * var(--_slider-start-fraction)));clip-path:inset(0 calc(calc(var(--_slider-with-tick-marks-container-size) * min((1 - var(--_slider-end-fraction)) * 1000000000,1)) + calc(100% - var(--_slider-with-tick-marks-container-size) * 2) * (1 - var(--_slider-end-fraction))) 0 calc(calc(var(--_slider-with-tick-marks-container-size) * min(var(--_slider-start-fraction) * 1e9,1)) + calc(100% - var(--_slider-with-tick-marks-container-size) * 2) * var(--_slider-start-fraction)));background-color:var(--_slider-active-track-color)}.track.tickmarks::before{background-image:radial-gradient(circle at var(--_slider-with-tick-marks-container-size) center,var(--_slider-with-tick-marks-inactive-container-color) 0,var(--_slider-with-tick-marks-inactive-container-color) calc(var(--_slider-with-tick-marks-container-size)/ 2),transparent calc(var(--_slider-with-tick-marks-container-size)/ 2))}.track.tickmarks::after{background-image:radial-gradient(circle at var(--_slider-with-tick-marks-container-size) center,var(--_slider-with-tick-marks-active-container-color) 0,var(--_slider-with-tick-marks-active-container-color) calc(var(--_slider-with-tick-marks-container-size)/ 2),transparent calc(var(--_slider-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(--_slider-state-layer-size)/ 2)}.handle-container{position:absolute;inset-block-start:0;inset-block-end:0;inset-inline-start:calc(100% * var(--_slider-start-fraction));inline-size:calc(100% * (var(--_slider-end-fraction) - var(--_slider-start-fraction)))}.handle{position:absolute;block-size:var(--_slider-state-layer-size);inline-size:var(--_slider-state-layer-size);border-radius:var(--_slider-handle-shape);display:grid;place-items:center}.handle.start{inset-inline-start:calc(0px - var(--_slider-state-layer-size)/ 2)}.handle.end{inset-inline-end:calc(0px - var(--_slider-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(--_slider-handle-height);width:var(--_slider-handle-width);border-radius:var(--_slider-handle-shape);background:var(--_slider-handle-color)}.handle-label{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-label-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-label-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-font-size-scale, .75)));line-height:var(--forge-typography-label-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-line-height-scale, 1.25)));letter-spacing:var(--forge-typography-label-letter-spacing, .0357142857em);text-transform:var(--forge-typography-label-text-transform,inherit);-webkit-text-decoration:var(--forge-typography-label-text-decoration,inherit);text-decoration:var(--forge-typography-label-text-decoration,inherit);position:absolute;-webkit-box-sizing:border-box;box-sizing:border-box;display:grid;padding:4px;place-items:center;border-radius:var(--_slider-label-container-shape);color:var(--_slider-label-text-color);font-weight:500;white-space:nowrap;inset-block-end:100%;min-inline-size:var(--_slider-label-container-height);min-block-size:var(--_slider-label-container-height);background:var(--_slider-label-container-color);-webkit-transition:-webkit-transform var(--forge-animation-duration-short2, 100ms) var(--forge-animation-easing-standard, cubic-bezier(.2, 0, 0, 1));transition:-webkit-transform var(--forge-animation-duration-short2, 100ms) var(--forge-animation-easing-standard, cubic-bezier(.2, 0, 0, 1));transition:transform var(--forge-animation-duration-short2, 100ms) var(--forge-animation-easing-standard, cubic-bezier(.2, 0, 0, 1));transition:transform var(--forge-animation-duration-short2, 100ms) var(--forge-animation-easing-standard, cubic-bezier(.2, 0, 0, 1)),-webkit-transform var(--forge-animation-duration-short2, 100ms) var(--forge-animation-easing-standard, 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(--_slider-label-container-height)/ 2);block-size:calc(var(--_slider-label-container-height)/ 2);bottom:calc(var(--_slider-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(--_slider-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(--_slider-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(--_slider-disabled-handle-color)}:host([disabled]) .handle-label{background:var(--_slider-disabled-handle-color)}:host([disabled]) .track::before{opacity:calc((1 / var(--_slider-disabled-active-track-opacity)) * var(--_slider-disabled-inactive-track-opacity));background-color:var(--_slider-disabled-inactive-track-color)}:host([disabled]) .track::after{background-color:var(--_slider-disabled-active-track-color)}:host([disabled]) .track.tickmarks::before{background-image:radial-gradient(circle at var(--_slider-with-tick-marks-container-size) center,var(--_slider-with-tick-marks-disabled-inactive-container-color) 0,var(--_slider-with-tick-marks-disabled-inactive-container-color) calc(var(--_slider-with-tick-marks-container-size)/ 2),transparent calc(var(--_slider-with-tick-marks-container-size)/ 2))}:host([disabled]) .track.tickmarks::after{background-image:radial-gradient(circle at var(--_slider-with-tick-marks-container-size) center,var(--_slider-with-tick-marks-disabled-active-container-color) 0,var(--_slider-with-tick-marks-disabled-active-container-color) calc(var(--_slider-with-tick-marks-container-size)/ 2),transparent calc(var(--_slider-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(calc(var(--_slider-with-tick-marks-container-size) * min(var(--_slider-start-fraction) * 1e9,1)) + calc(100% - var(--_slider-with-tick-marks-container-size) * 2) * var(--_slider-start-fraction)) 0 calc(calc(var(--_slider-with-tick-marks-container-size) * min((1 - var(--_slider-end-fraction)) * 1000000000,1)) + calc(100% - var(--_slider-with-tick-marks-container-size) * 2) * (1 - var(--_slider-end-fraction))));clip-path:inset(0 calc(calc(var(--_slider-with-tick-marks-container-size) * min(var(--_slider-start-fraction) * 1e9,1)) + calc(100% - var(--_slider-with-tick-marks-container-size) * 2) * var(--_slider-start-fraction)) 0 calc(calc(var(--_slider-with-tick-marks-container-size) * min((1 - var(--_slider-end-fraction)) * 1000000000,1)) + calc(100% - var(--_slider-with-tick-marks-container-size) * 2) * (1 - var(--_slider-end-fraction))))}:host([dir=rtl]) .track::after{-webkit-clip-path:inset(0 calc(calc(var(--_slider-with-tick-marks-container-size) * min(var(--_slider-start-fraction) * 1e9,1)) + calc(100% - var(--_slider-with-tick-marks-container-size) * 2) * var(--_slider-start-fraction)) 0 calc(calc(var(--_slider-with-tick-marks-container-size) * min((1 - var(--_slider-end-fraction)) * 1000000000,1)) + calc(100% - var(--_slider-with-tick-marks-container-size) * 2) * (1 - var(--_slider-end-fraction))));clip-path:inset(0 calc(calc(var(--_slider-with-tick-marks-container-size) * min(var(--_slider-start-fraction) * 1e9,1)) + calc(100% - var(--_slider-with-tick-marks-container-size) * 2) * var(--_slider-start-fraction)) 0 calc(calc(var(--_slider-with-tick-marks-container-size) * min((1 - var(--_slider-end-fraction)) * 1000000000,1)) + calc(100% - var(--_slider-with-tick-marks-container-size) * 2) * (1 - var(--_slider-end-fraction))))}.track:dir(rtl)::after{-webkit-clip-path:inset(0 calc(calc(var(--_slider-with-tick-marks-container-size) * min(var(--_slider-start-fraction) * 1e9,1)) + calc(100% - var(--_slider-with-tick-marks-container-size) * 2) * var(--_slider-start-fraction)) 0 calc(calc(var(--_slider-with-tick-marks-container-size) * min((1 - var(--_slider-end-fraction)) * 1000000000,1)) + calc(100% - var(--_slider-with-tick-marks-container-size) * 2) * (1 - var(--_slider-end-fraction))));clip-path:inset(0 calc(calc(var(--_slider-with-tick-marks-container-size) * min(var(--_slider-start-fraction) * 1e9,1)) + calc(100% - var(--_slider-with-tick-marks-container-size) * 2) * var(--_slider-start-fraction)) 0 calc(calc(var(--_slider-with-tick-marks-container-size) * min((1 - var(--_slider-end-fraction)) * 1000000000,1)) + calc(100% - var(--_slider-with-tick-marks-container-size) * 2) * (1 - var(--_slider-end-fraction))))}input.end:focus~.handle-container-padded .handle.end>.handle-thumb,input.start:focus~.handle-container-padded .handle.start>.handle-thumb{background:var(--_slider-focus-handle-color)}.on-top.overlapping .handle-label,.on-top.overlapping .handle-label::before,.on-top.overlapping .handle-thumb{border:var(--_slider-with-overlap-handle-outline-color) solid var(--_slider-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(--_slider-state-layer-size);inline-size:var(--_slider-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(--_slider-state-layer-size);inline-size:var(--_slider-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(--_slider-handle-color)}';
 /**
  * @tag forge-slider
  *
@@ -105,7 +106,7 @@ const styles = ':host{display:-webkit-inline-box;display:inline-flex;vertical-al
  * @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 {
+let SliderComponent = class SliderComponent extends BaseFormComponent {
     static get observedAttributes() {
         return [
             SLIDER_CONSTANTS.attributes.ARIA_LABEL,
@@ -128,10 +129,10 @@ let SliderComponent = class SliderComponent extends BaseComponent {
         ];
     }
     get form() {
-        return this.internals.form;
+        return this[internals].form;
     }
     get labels() {
-        return this.internals.labels;
+        return this[internals].labels;
     }
     get name() {
         var _a;
@@ -157,7 +158,7 @@ let SliderComponent = class SliderComponent extends BaseComponent {
     constructor() {
         super();
         attachShadowTemplate(this, template, styles);
-        this.internals = this.attachInternals();
+        this[internals] = this.attachInternals();
         this._foundation = new SliderFoundation(new SliderAdapter(this));
     }
     connectedCallback() {
@@ -241,6 +242,9 @@ let SliderComponent = class SliderComponent extends BaseComponent {
         this.value = Number(state);
         this.range = false;
     }
+    formDisabledCallback(isDisabled) {
+        this.disabled = isDisabled;
+    }
 };
 SliderComponent.formAssociated = true;
 __decorate([

package/esm/split-button/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+export * from './split-button-adapter';
+export * from './split-button-constants';
+export * from './split-button-foundation';
+export * from './split-button';
+export declare function defineSplitButtonComponent(): void;

package/esm/split-button/index.js

@@ -0,0 +1,14 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { defineCustomElement } from '@tylertech/forge-core';
+import { SplitButtonComponent } from './split-button';
+export * from './split-button-adapter';
+export * from './split-button-constants';
+export * from './split-button-foundation';
+export * from './split-button';
+export function defineSplitButtonComponent() {
+    defineCustomElement(SplitButtonComponent);
+}

package/esm/split-button/split-button-adapter.d.ts

@@ -0,0 +1,30 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { ButtonTheme } from '../button';
+import { BaseAdapter, IBaseAdapter } from '../core/base/base-adapter';
+import { ISplitButtonComponent } from './split-button';
+import { SplitButtonVariant } from './split-button-constants';
+export interface ISplitButtonAdapter extends IBaseAdapter {
+    setVariant(variant: SplitButtonVariant): void;
+    setTheme(theme: ButtonTheme): void;
+    setDisabled(value: boolean): void;
+    setDense(value: boolean): void;
+    setPill(value: boolean): void;
+    startButtonObserver(): void;
+    destroyButtonObserver(): void;
+}
+export declare class SplitButtonAdapter extends BaseAdapter<ISplitButtonComponent> implements ISplitButtonAdapter {
+    private _buttonChangeObserver;
+    constructor(component: ISplitButtonComponent);
+    startButtonObserver(): void;
+    destroyButtonObserver(): void;
+    setVariant(variant: SplitButtonVariant): void;
+    setTheme(theme: ButtonTheme): void;
+    setDisabled(value: boolean): void;
+    setDense(value: boolean): void;
+    setPill(value: boolean): void;
+    private _getButtons;
+}

package/esm/split-button/split-button-adapter.js

@@ -0,0 +1,84 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { BUTTON_CONSTANTS } from '../button';
+import { BaseAdapter } from '../core/base/base-adapter';
+export class SplitButtonAdapter extends BaseAdapter {
+    constructor(component) {
+        super(component);
+    }
+    startButtonObserver() {
+        // This observer is used to keep the buttons in sync with the split button state when they are added to DOM
+        this._buttonChangeObserver = new MutationObserver(mutations => {
+            // Find all `<forge-button>` elements that are contained within the added nodes
+            const addedButtons = mutations.reduce((buttons, { addedNodes }) => {
+                const addedButtonNodes = Array.from(addedNodes)
+                    .filter(node => node.nodeType === Node.ELEMENT_NODE)
+                    .map((node) => {
+                    if (node.nodeName.toLowerCase() === BUTTON_CONSTANTS.elementName) {
+                        return node;
+                    }
+                    return node.querySelector(BUTTON_CONSTANTS.elementName);
+                })
+                    .filter(node => !!node);
+                return buttons.concat(addedButtonNodes);
+            }, []);
+            if (!addedButtons.length) {
+                return;
+            }
+            addedButtons.forEach(button => {
+                button.variant = this._component.variant;
+                button.theme = this._component.theme;
+                button.disabled = this._component.disabled;
+                button.dense = this._component.dense;
+            });
+            this.setPill(this._component.pill);
+        });
+        this._buttonChangeObserver.observe(this._component, { childList: true, subtree: true });
+    }
+    destroyButtonObserver() {
+        var _a;
+        (_a = this._buttonChangeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this._buttonChangeObserver = undefined;
+    }
+    setVariant(variant) {
+        const buttons = this._getButtons();
+        buttons.forEach(button => button.variant = variant);
+    }
+    setTheme(theme) {
+        const buttons = this._getButtons();
+        buttons.forEach(button => button.theme = theme);
+    }
+    setDisabled(value) {
+        const buttons = this._getButtons();
+        buttons.forEach(button => button.disabled = value);
+    }
+    setDense(value) {
+        const buttons = this._getButtons();
+        buttons.forEach(button => button.dense = value);
+    }
+    setPill(value) {
+        const buttons = this._getButtons();
+        // First we reset all the middle buttons to not be pill buttons
+        if (buttons.length > 2) {
+            Array.from(buttons)
+                .slice(1, buttons.length - 1)
+                .filter(({ pill }) => pill)
+                .forEach(button => button.pill = false);
+        }
+        // Only the first and last buttons need to be pill shaped
+        const firstButton = buttons[0];
+        if (firstButton) {
+            firstButton.pill = value;
+        }
+        const lastButton = buttons[buttons.length - 1];
+        if (lastButton) {
+            lastButton.pill = value;
+        }
+    }
+    _getButtons() {
+        return this._component.querySelectorAll(BUTTON_CONSTANTS.elementName);
+    }
+}

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

@@ -0,0 +1,21 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { ButtonVariant } from '../button';
+export declare const SPLIT_BUTTON_CONSTANTS: {
+    elementName: "forge-split-button";
+    attributes: {
+        VARIANT: string;
+        THEME: string;
+        DISABLED: string;
+        DENSE: string;
+        PILL: string;
+    };
+    defaults: {
+        DEFAULT_VARIANT: SplitButtonVariant;
+        DEFAULT_THEME: import("../constants").Theme;
+    };
+};
+export type SplitButtonVariant = Extract<ButtonVariant, 'text' | 'outlined' | 'tonal' | 'filled' | 'raised'>;

package/esm/split-button/split-button-constants.js

@@ -0,0 +1,23 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { COMPONENT_NAME_PREFIX } from '../constants';
+const elementName = `${COMPONENT_NAME_PREFIX}split-button`;
+const attributes = {
+    VARIANT: 'variant',
+    THEME: 'theme',
+    DISABLED: 'disabled',
+    DENSE: 'dense',
+    PILL: 'pill'
+};
+const defaults = {
+    DEFAULT_VARIANT: 'text',
+    DEFAULT_THEME: 'primary'
+};
+export const SPLIT_BUTTON_CONSTANTS = {
+    elementName,
+    attributes,
+    defaults
+};

package/esm/split-button/split-button-foundation.d.ts

@@ -0,0 +1,37 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { ICustomElementFoundation } from '@tylertech/forge-core';
+import { ButtonTheme } from '../button/button-constants';
+import { ISplitButtonAdapter } from './split-button-adapter';
+import { SplitButtonVariant } from './split-button-constants';
+export interface ISplitButtonFoundation extends ICustomElementFoundation {
+    variant: SplitButtonVariant;
+    theme: ButtonTheme;
+    disabled: boolean;
+    dense: boolean;
+    pill: boolean;
+}
+export declare class SplitButtonFoundation implements ISplitButtonFoundation {
+    private readonly _adapter;
+    private _variant;
+    _theme: ButtonTheme;
+    private _disabled;
+    private _dense;
+    private _pill;
+    constructor(_adapter: ISplitButtonAdapter);
+    initialize(): void;
+    destroy(): void;
+    get variant(): SplitButtonVariant;
+    set variant(value: SplitButtonVariant);
+    get theme(): ButtonTheme;
+    set theme(value: ButtonTheme);
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    get dense(): boolean;
+    set dense(value: boolean);
+    get pill(): boolean;
+    set pill(value: boolean);
+}

package/esm/split-button/split-button-foundation.js

@@ -0,0 +1,77 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { SPLIT_BUTTON_CONSTANTS } from './split-button-constants';
+export class SplitButtonFoundation {
+    constructor(_adapter) {
+        this._adapter = _adapter;
+        this._variant = SPLIT_BUTTON_CONSTANTS.defaults.DEFAULT_VARIANT;
+        this._theme = SPLIT_BUTTON_CONSTANTS.defaults.DEFAULT_THEME;
+        this._disabled = false;
+        this._dense = false;
+        this._pill = false;
+    }
+    initialize() {
+        this._adapter.startButtonObserver();
+        this._adapter.setVariant(this._variant);
+        this._adapter.setTheme(this._theme);
+        this._adapter.setDisabled(this._disabled);
+        this._adapter.setDense(this._dense);
+        this._adapter.setPill(this._pill);
+    }
+    destroy() {
+        this._adapter.destroyButtonObserver();
+    }
+    get variant() {
+        return this._variant;
+    }
+    set variant(value) {
+        if (this._variant !== value) {
+            this._variant = value !== null && value !== void 0 ? value : SPLIT_BUTTON_CONSTANTS.defaults.DEFAULT_VARIANT;
+            this._adapter.setVariant(value);
+            this._adapter.setHostAttribute(SPLIT_BUTTON_CONSTANTS.attributes.VARIANT, this._variant);
+        }
+    }
+    get theme() {
+        return this._theme;
+    }
+    set theme(value) {
+        if (this._theme !== value) {
+            this._theme = value !== null && value !== void 0 ? value : SPLIT_BUTTON_CONSTANTS.defaults.DEFAULT_THEME;
+            this._adapter.setTheme(this._theme);
+            this._adapter.setHostAttribute(SPLIT_BUTTON_CONSTANTS.attributes.THEME, this._theme);
+        }
+    }
+    get disabled() {
+        return this._disabled;
+    }
+    set disabled(value) {
+        if (this._disabled !== value) {
+            this._disabled = value;
+            this._adapter.setDisabled(this._disabled);
+            this._adapter.toggleHostAttribute(SPLIT_BUTTON_CONSTANTS.attributes.DISABLED, this._disabled);
+        }
+    }
+    get dense() {
+        return this._dense;
+    }
+    set dense(value) {
+        if (this._dense !== value) {
+            this._dense = value;
+            this._adapter.setDense(this._dense);
+            this._adapter.toggleHostAttribute(SPLIT_BUTTON_CONSTANTS.attributes.DENSE, this._dense);
+        }
+    }
+    get pill() {
+        return this._pill;
+    }
+    set pill(value) {
+        if (this._pill !== value) {
+            this._pill = value;
+            this._adapter.setPill(this._pill);
+            this._adapter.toggleHostAttribute(SPLIT_BUTTON_CONSTANTS.attributes.PILL, this._pill);
+        }
+    }
+}

package/esm/split-button/split-button.d.ts

@@ -0,0 +1,57 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { ButtonTheme } from '../button';
+import { BaseComponent, IBaseComponent } from '../core/base/base-component';
+import { SplitButtonVariant } from './split-button-constants';
+export interface ISplitButtonComponent extends IBaseComponent {
+    variant: SplitButtonVariant;
+    theme: ButtonTheme;
+    disabled: boolean;
+    dense: boolean;
+    pill: boolean;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'forge-split-button': ISplitButtonComponent;
+    }
+}
+/**
+ * @tag forge-split-button
+ *
+ * @summary Split buttons are used for splitting an action into two parts.
+ *
+ * @property {SplitButtonVariant} variant - The variant of the buttons. Valid values are `text`, `outlined`, `tonal`, `filled`, and `raised`.
+ * @property {ButtonTheme} theme - The theme of the buttons. Valid values are `primary`, `secondary`, `tertiary`, `success`, `error`, `warning`, `info`.
+ * @property {boolean} disabled - Whether or not the buttons are disabled.
+ * @property {boolean} dense - Whether or not the buttons are dense.
+ * @property {boolean} pill - Whether or not the buttons are pill-shaped.
+ *
+ * @attribute {SplitButtonVariant} variant - The variant of the buttons. Valid values are `text`, `outlined`, `tonal`, `filled`, and `raised`.
+ * @attribute {ButtonTheme} theme - The theme of the buttons. Valid values are `primary`, `secondary`, `tertiary`, `success`, `error`, `warning`, `info`.
+ * @attribute {boolean} disabled - Whether or not the buttons are disabled.
+ * @attribute {boolean} dense - Whether or not the buttons are dense.
+ * @attribute {boolean} pill - Whether or not the buttons are pill-shaped.
+ *
+ * @cssproperty --forge-split-button-min-width - The minimum width of the slotted buttons.
+ * @cssproperty --forge-split-button-gap - The gap between the slotted buttons.
+ * @cssproperty --forge-split-button-focus-indicator-offset - The offset of the focus indicator around the buttons.
+ * @cssproperty --forge-split-button-focus-indicator-divider-offset - The offset of the focus indicator divider when using outlined buttons.
+ *
+ * @slot - This is a default/unnamed slot.
+ */
+export declare class SplitButtonComponent extends BaseComponent implements ISplitButtonComponent {
+    static get observedAttributes(): string[];
+    private readonly _foundation;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+    variant: SplitButtonVariant;
+    theme: ButtonTheme;
+    disabled: boolean;
+    dense: boolean;
+    pill: boolean;
+}

package/esm/split-button/split-button.js

@@ -0,0 +1,103 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import { attachShadowTemplate, coerceBoolean, CustomElement, FoundationProperty } from '@tylertech/forge-core';
+import { ButtonComponent } from '../button';
+import { BaseComponent } from '../core/base/base-component';
+import { SplitButtonAdapter } from './split-button-adapter';
+import { SPLIT_BUTTON_CONSTANTS } from './split-button-constants';
+import { SplitButtonFoundation } from './split-button-foundation';
+const template = '<template><slot></slot></template>';
+const styles = ':host{--_split-button-min-width:var(--forge-split-button-min-width, 0);--_split-button-gap:var(--forge-split-button-gap, var(--forge-border-thin, 1px));--_split-button-focus-indicator-offset:var(--forge-split-button-focus-indicator-offset, var(--forge-button-focus-indicator-offset, 4px));--_split-button-focus-indicator-divider-offset:var(--forge-split-button-focus-indicator-divider-offset, var(--_split-button-gap));--_split-button-focus-indicator-offset-adjusted:calc(var(--_split-button-focus-indicator-offset) + var(--_split-button-focus-indicator-divider-offset) * 2)}:host{display:-webkit-inline-box;display:inline-flex;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center}:host([hidden]){display:none}::slotted(*){--forge-button-min-width:var(--_split-button-min-width);--forge-button-focus-indicator-offset:var(--_split-button-focus-indicator-offset)}::slotted(:first-child){--forge-button-shape-start-end-radius:0;--forge-button-shape-end-end-radius:0;--forge-focus-indicator-shape-start-end:0;--forge-focus-indicator-shape-end-end:0;--forge-focus-indicator-offset-inline:0 var(--_split-button-focus-indicator-offset-adjusted)}::slotted(:not(:first-child):not(:last-child)){--forge-button-shape:0;--forge-focus-indicator-shape:0;--forge-focus-indicator-offset-inline:var(--_split-button-focus-indicator-offset-adjusted)}::slotted(:last-child){--forge-button-shape-start-start-radius:0;--forge-button-shape-end-start-radius:0;--forge-focus-indicator-shape-start-start:0;--forge-focus-indicator-shape-end-start:0;--forge-focus-indicator-offset-inline:var(--_split-button-focus-indicator-offset-adjusted) 0}:host([variant=outlined]){--_split-button-focus-indicator-divider-offset:var(--forge-split-button-focus-indicator-divider-offset, 0px)}:host([variant=outlined]) ::slotted(:not(:first-child)){-webkit-margin-start:calc(-1 * var(--_split-button-gap));margin-inline-start:calc(-1 * var(--_split-button-gap))}:host(:is([variant=tonal],[variant=filled],[variant=raised],:not([variant]))) ::slotted(:not(:last-child)){-webkit-margin-end:var(--_split-button-gap);margin-inline-end:var(--_split-button-gap)}';
+/**
+ * @tag forge-split-button
+ *
+ * @summary Split buttons are used for splitting an action into two parts.
+ *
+ * @property {SplitButtonVariant} variant - The variant of the buttons. Valid values are `text`, `outlined`, `tonal`, `filled`, and `raised`.
+ * @property {ButtonTheme} theme - The theme of the buttons. Valid values are `primary`, `secondary`, `tertiary`, `success`, `error`, `warning`, `info`.
+ * @property {boolean} disabled - Whether or not the buttons are disabled.
+ * @property {boolean} dense - Whether or not the buttons are dense.
+ * @property {boolean} pill - Whether or not the buttons are pill-shaped.
+ *
+ * @attribute {SplitButtonVariant} variant - The variant of the buttons. Valid values are `text`, `outlined`, `tonal`, `filled`, and `raised`.
+ * @attribute {ButtonTheme} theme - The theme of the buttons. Valid values are `primary`, `secondary`, `tertiary`, `success`, `error`, `warning`, `info`.
+ * @attribute {boolean} disabled - Whether or not the buttons are disabled.
+ * @attribute {boolean} dense - Whether or not the buttons are dense.
+ * @attribute {boolean} pill - Whether or not the buttons are pill-shaped.
+ *
+ * @cssproperty --forge-split-button-min-width - The minimum width of the slotted buttons.
+ * @cssproperty --forge-split-button-gap - The gap between the slotted buttons.
+ * @cssproperty --forge-split-button-focus-indicator-offset - The offset of the focus indicator around the buttons.
+ * @cssproperty --forge-split-button-focus-indicator-divider-offset - The offset of the focus indicator divider when using outlined buttons.
+ *
+ * @slot - This is a default/unnamed slot.
+ */
+let SplitButtonComponent = class SplitButtonComponent extends BaseComponent {
+    static get observedAttributes() {
+        return [
+            SPLIT_BUTTON_CONSTANTS.attributes.VARIANT,
+            SPLIT_BUTTON_CONSTANTS.attributes.THEME,
+            SPLIT_BUTTON_CONSTANTS.attributes.DISABLED,
+            SPLIT_BUTTON_CONSTANTS.attributes.DENSE,
+            SPLIT_BUTTON_CONSTANTS.attributes.PILL
+        ];
+    }
+    constructor() {
+        super();
+        attachShadowTemplate(this, template, styles);
+        this._foundation = new SplitButtonFoundation(new SplitButtonAdapter(this));
+    }
+    connectedCallback() {
+        this._foundation.initialize();
+    }
+    disconnectedCallback() {
+        this._foundation.destroy();
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        switch (name) {
+            case SPLIT_BUTTON_CONSTANTS.attributes.VARIANT:
+                this.variant = newValue;
+                break;
+            case SPLIT_BUTTON_CONSTANTS.attributes.THEME:
+                this.theme = newValue;
+                break;
+            case SPLIT_BUTTON_CONSTANTS.attributes.DISABLED:
+                this.disabled = coerceBoolean(newValue);
+                break;
+            case SPLIT_BUTTON_CONSTANTS.attributes.DENSE:
+                this.dense = coerceBoolean(newValue);
+                break;
+            case SPLIT_BUTTON_CONSTANTS.attributes.PILL:
+                this.pill = coerceBoolean(newValue);
+                break;
+        }
+    }
+};
+__decorate([
+    FoundationProperty()
+], SplitButtonComponent.prototype, "variant", void 0);
+__decorate([
+    FoundationProperty()
+], SplitButtonComponent.prototype, "theme", void 0);
+__decorate([
+    FoundationProperty()
+], SplitButtonComponent.prototype, "disabled", void 0);
+__decorate([
+    FoundationProperty()
+], SplitButtonComponent.prototype, "dense", void 0);
+__decorate([
+    FoundationProperty()
+], SplitButtonComponent.prototype, "pill", void 0);
+SplitButtonComponent = __decorate([
+    CustomElement({
+        name: SPLIT_BUTTON_CONSTANTS.elementName,
+        dependencies: [
+            ButtonComponent
+        ]
+    })
+], SplitButtonComponent);
+export { SplitButtonComponent };