@tylertech/forge 3.0.0-next.3 → 3.0.0-next.5

package/esm/split-view/split-view-panel/split-view-panel.js

@@ -14,7 +14,7 @@ import { SplitViewPanelAdapter } from './split-view-panel-adapter';
 import { IconComponent, IconRegistry } from '../../icon';
 import { RippleComponent } from '../../ripple';
 const template = '<template><div class=\"forge-split-view-panel\" id=\"root\" part=\"root\"><div class=\"forge-split-view-panel__handle\" id=\"handle\" part=\"handle\" role=\"separator\" aria-controls=\"content\" aria-grabbed=\"false\" tabindex=\"0\"><forge-icon class=\"forge-split-view-panel__icon\" id=\"icon\" part=\"icon\"></forge-icon><forge-ripple id=\"ripple\" part=\"ripple\"></forge-ripple></div><div class=\"forge-split-view-panel__content\" id=\"content\" part=\"content\" role=\"group\"><slot></slot></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-ripple-surface{--mdc-ripple-fg-size:0;--mdc-ripple-left:0;--mdc-ripple-top:0;--mdc-ripple-fg-scale:1;--mdc-ripple-fg-translate-end:0;--mdc-ripple-fg-translate-start:0;-webkit-tap-highlight-color:transparent;will-change:transform,opacity;position:relative;outline:0;overflow:hidden}.mdc-ripple-surface::after,.mdc-ripple-surface::before{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:\"\"}.mdc-ripple-surface::before{-webkit-transition:opacity 15ms linear,background-color 15ms linear;transition:opacity 15ms linear,background-color 15ms linear;z-index:1;z-index:var(--mdc-ripple-z-index,1)}.mdc-ripple-surface::after{z-index:0;z-index:var(--mdc-ripple-z-index,0)}.mdc-ripple-surface.mdc-ripple-upgraded::before{-webkit-transform:scale(var(--mdc-ripple-fg-scale,1));transform:scale(var(--mdc-ripple-fg-scale,1))}.mdc-ripple-surface.mdc-ripple-upgraded::after{top:0;left:0;-webkit-transform:scale(0);transform:scale(0);-webkit-transform-origin:center center;transform-origin:center center}.mdc-ripple-surface.mdc-ripple-upgraded--unbounded::after{top:var(--mdc-ripple-top,0);left:var(--mdc-ripple-left,0)}.mdc-ripple-surface.mdc-ripple-upgraded--foreground-activation::after{-webkit-animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards;animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards}.mdc-ripple-surface.mdc-ripple-upgraded--foreground-deactivation::after{-webkit-animation:mdc-ripple-fg-opacity-out 150ms;animation:mdc-ripple-fg-opacity-out 150ms;-webkit-transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1));transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}.mdc-ripple-surface::after,.mdc-ripple-surface::before{top:calc(50% - 100%);left:calc(50% - 100%);width:200%;height:200%}.mdc-ripple-surface.mdc-ripple-upgraded::after{width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.mdc-ripple-surface[data-mdc-ripple-is-unbounded],.mdc-ripple-upgraded--unbounded{overflow:visible}.mdc-ripple-surface[data-mdc-ripple-is-unbounded]::after,.mdc-ripple-surface[data-mdc-ripple-is-unbounded]::before,.mdc-ripple-upgraded--unbounded::after,.mdc-ripple-upgraded--unbounded::before{top:calc(50% - 50%);left:calc(50% - 50%);width:100%;height:100%}.mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::after,.mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::before,.mdc-ripple-upgraded--unbounded.mdc-ripple-upgraded::after,.mdc-ripple-upgraded--unbounded.mdc-ripple-upgraded::before{top:var(--mdc-ripple-top,calc(50% - 50%));left:var(--mdc-ripple-left,calc(50% - 50%));width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::after,.mdc-ripple-upgraded--unbounded.mdc-ripple-upgraded::after{width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.mdc-ripple-surface::after,.mdc-ripple-surface::before{background-color:#000;background-color:var(--mdc-ripple-color,#000)}.mdc-ripple-surface.mdc-ripple-surface--hover::before,.mdc-ripple-surface:hover::before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity, .04)}.mdc-ripple-surface.mdc-ripple-upgraded--background-focused::before,.mdc-ripple-surface:not(.mdc-ripple-upgraded):focus::before{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity, .12)}.mdc-ripple-surface:not(.mdc-ripple-upgraded)::after{-webkit-transition:opacity 150ms linear;transition:opacity 150ms linear}.mdc-ripple-surface:not(.mdc-ripple-upgraded):active::after{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity, .12)}.mdc-ripple-surface.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.12)}.mdc-ripple-surface::after,.mdc-ripple-surface::before{--mdc-ripple-color:var(--mdc-theme-on-surface)}.forge-split-view-panel{display:-webkit-box;display:flex;width:100%;height:100%;overflow:hidden;contain:paint size}.forge-split-view-panel__handle{color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-light,rgba(0,0,0,.54));background-color:#e0e0e0;background-color:var(--forge-theme-border-color,#e0e0e0);display:-webkit-box;display:flex;flex-shrink:0;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center;outline:0}.forge-split-view-panel__content{-webkit-box-flex:1;flex:1;overflow:hidden}.forge-split-view-panel--closed{display:none}.forge-split-view-panel--disabled #handle{pointer-events:none}.forge-split-view-panel--disabled .forge-split-view-panel__icon{display:none}.forge-split-view-panel[orientation=horizontal]{min-width:8px;min-width:var(--forge-split-view-handle-width,8px);width:calc(var(--forge-split-view-panel-size,unset) + var(--forge-split-view-handle-width,8px));-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row}.forge-split-view-panel[orientation=horizontal] .forge-split-view-panel__handle{width:8px;width:var(--forge-split-view-handle-width,8px);cursor:var(--forge-split-view-panel-cursor)}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--closing[resizable=end]{position:absolute;top:0;left:0;-webkit-animation-name:upvyfd5;animation-name:upvyfd5;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1)}@-webkit-keyframes upvyfd5{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(-100%);transform:translateX(-100%)}}@keyframes upvyfd5{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(-100%);transform:translateX(-100%)}}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--closing[resizable=start]{position:absolute;top:0;right:0;-webkit-animation-name:upvyfdn;animation-name:upvyfdn;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1)}@-webkit-keyframes upvyfdn{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(100%);transform:translateX(100%)}}@keyframes upvyfdn{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(100%);transform:translateX(100%)}}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--opening[resizable=end]{position:absolute;top:0;left:0;-webkit-animation-name:upvyfdp;animation-name:upvyfdp;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-direction:reverse}@-webkit-keyframes upvyfdp{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(-100%);transform:translateX(-100%)}}@keyframes upvyfdp{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(-100%);transform:translateX(-100%)}}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--opening[resizable=start]{position:absolute;top:0;right:0;-webkit-animation-name:upvyfe2;animation-name:upvyfe2;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-direction:reverse}@-webkit-keyframes upvyfe2{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(100%);transform:translateX(100%)}}@keyframes upvyfe2{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(100%);transform:translateX(100%)}}.forge-split-view-panel[orientation=vertical]{min-height:8px;min-height:var(--forge-split-view-handle-width,8px);height:calc(var(--forge-split-view-panel-size,unset) + var(--forge-split-view-handle-width,8px));-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column}.forge-split-view-panel[orientation=vertical] .forge-split-view-panel__handle{height:8px;height:var(--forge-split-view-handle-width,8px);cursor:var(--forge-split-view-panel-cursor)}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--closing[resizable=end]{position:absolute;top:0;left:0;-webkit-animation-name:upvyfej;animation-name:upvyfej;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1)}@-webkit-keyframes upvyfej{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(-100%);transform:translateY(-100%)}}@keyframes upvyfej{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(-100%);transform:translateY(-100%)}}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--closing[resizable=start]{position:absolute;bottom:0;left:0;-webkit-animation-name:upvyff1;animation-name:upvyff1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1)}@-webkit-keyframes upvyff1{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(100%);transform:translateY(100%)}}@keyframes upvyff1{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(100%);transform:translateY(100%)}}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--opening[resizable=end]{position:absolute;top:0;left:0;-webkit-animation-name:upvyffx;animation-name:upvyffx;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-direction:reverse}@-webkit-keyframes upvyffx{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(-100%);transform:translateY(-100%)}}@keyframes upvyffx{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(-100%);transform:translateY(-100%)}}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--opening[resizable=start]{position:absolute;bottom:0;left:0;-webkit-animation-name:upvyfgk;animation-name:upvyfgk;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-direction:reverse}@-webkit-keyframes upvyfgk{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(100%);transform:translateY(100%)}}@keyframes upvyfgk{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(100%);transform:translateY(100%)}}:host{z-index:var(--forge-split-view-animating-layer)!important;display:block;position:relative;height:100%;width:100%;-webkit-box-flex:0;flex:0}:host([hidden]){display:none}:host(:not([resizable=start],[resizable=end])){-webkit-box-flex:1;flex:1}:host(:not([resizable=start],[resizable=end])) .forge-split-view-panel{width:100%;height:100%;min-width:0;min-height:0}:host(:not([resizable=start],[resizable=end])) .forge-split-view-panel__handle{display:none}';
+const styles = '@-webkit-keyframes mdc-ripple-fg-radius-in{from{-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1);-webkit-transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1);transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1)}to{-webkit-transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1));transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}}@keyframes mdc-ripple-fg-radius-in{from{-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1);-webkit-transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1);transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1)}to{-webkit-transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1));transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}}@-webkit-keyframes mdc-ripple-fg-opacity-in{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:0}to{opacity:var(--mdc-ripple-fg-opacity, 0)}}@keyframes mdc-ripple-fg-opacity-in{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:0}to{opacity:var(--mdc-ripple-fg-opacity, 0)}}@-webkit-keyframes mdc-ripple-fg-opacity-out{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:var(--mdc-ripple-fg-opacity, 0)}to{opacity:0}}@keyframes mdc-ripple-fg-opacity-out{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:var(--mdc-ripple-fg-opacity, 0)}to{opacity:0}}.mdc-ripple-surface{--mdc-ripple-fg-size:0;--mdc-ripple-left:0;--mdc-ripple-top:0;--mdc-ripple-fg-scale:1;--mdc-ripple-fg-translate-end:0;--mdc-ripple-fg-translate-start:0;-webkit-tap-highlight-color:transparent;will-change:transform,opacity;position:relative;outline:0;overflow:hidden}.mdc-ripple-surface::after,.mdc-ripple-surface::before{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:\"\"}.mdc-ripple-surface::before{-webkit-transition:opacity 15ms linear,background-color 15ms linear;transition:opacity 15ms linear,background-color 15ms linear;z-index:1;z-index:var(--mdc-ripple-z-index,1)}.mdc-ripple-surface::after{z-index:0;z-index:var(--mdc-ripple-z-index,0)}.mdc-ripple-surface.mdc-ripple-upgraded::before{-webkit-transform:scale(var(--mdc-ripple-fg-scale,1));transform:scale(var(--mdc-ripple-fg-scale,1))}.mdc-ripple-surface.mdc-ripple-upgraded::after{top:0;left:0;-webkit-transform:scale(0);transform:scale(0);-webkit-transform-origin:center center;transform-origin:center center}.mdc-ripple-surface.mdc-ripple-upgraded--unbounded::after{top:var(--mdc-ripple-top,0);left:var(--mdc-ripple-left,0)}.mdc-ripple-surface.mdc-ripple-upgraded--foreground-activation::after{-webkit-animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards;animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards}.mdc-ripple-surface.mdc-ripple-upgraded--foreground-deactivation::after{-webkit-animation:mdc-ripple-fg-opacity-out 150ms;animation:mdc-ripple-fg-opacity-out 150ms;-webkit-transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1));transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}.mdc-ripple-surface::after,.mdc-ripple-surface::before{top:calc(50% - 100%);left:calc(50% - 100%);width:200%;height:200%}.mdc-ripple-surface.mdc-ripple-upgraded::after{width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.mdc-ripple-surface[data-mdc-ripple-is-unbounded],.mdc-ripple-upgraded--unbounded{overflow:visible}.mdc-ripple-surface[data-mdc-ripple-is-unbounded]::after,.mdc-ripple-surface[data-mdc-ripple-is-unbounded]::before,.mdc-ripple-upgraded--unbounded::after,.mdc-ripple-upgraded--unbounded::before{top:calc(50% - 50%);left:calc(50% - 50%);width:100%;height:100%}.mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::after,.mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::before,.mdc-ripple-upgraded--unbounded.mdc-ripple-upgraded::after,.mdc-ripple-upgraded--unbounded.mdc-ripple-upgraded::before{top:var(--mdc-ripple-top,calc(50% - 50%));left:var(--mdc-ripple-left,calc(50% - 50%));width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::after,.mdc-ripple-upgraded--unbounded.mdc-ripple-upgraded::after{width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.mdc-ripple-surface::after,.mdc-ripple-surface::before{background-color:#000;background-color:var(--mdc-ripple-color,#000)}.mdc-ripple-surface.mdc-ripple-surface--hover::before,.mdc-ripple-surface:hover::before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity, .04)}.mdc-ripple-surface.mdc-ripple-upgraded--background-focused::before,.mdc-ripple-surface:not(.mdc-ripple-upgraded):focus::before{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity, .12)}.mdc-ripple-surface:not(.mdc-ripple-upgraded)::after{-webkit-transition:opacity 150ms linear;transition:opacity 150ms linear}.mdc-ripple-surface:not(.mdc-ripple-upgraded):active::after{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity, .12)}.mdc-ripple-surface.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.12)}.mdc-ripple-surface::after,.mdc-ripple-surface::before{--mdc-ripple-color:var(--mdc-theme-on-surface)}.forge-split-view-panel{display:-webkit-box;display:flex;width:100%;height:100%;overflow:hidden;contain:paint size}.forge-split-view-panel__handle{color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-light,rgba(0,0,0,.54));background-color:#e0e0e0;background-color:var(--forge-theme-border-color,#e0e0e0);display:-webkit-box;display:flex;flex-shrink:0;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center;outline:0}.forge-split-view-panel__content{-webkit-box-flex:1;flex:1;overflow:hidden}.forge-split-view-panel--closed{display:none}.forge-split-view-panel--disabled #handle{pointer-events:none}.forge-split-view-panel--disabled .forge-split-view-panel__icon{display:none}.forge-split-view-panel[orientation=horizontal]{min-width:8px;min-width:var(--forge-split-view-handle-width,8px);width:calc(var(--forge-split-view-panel-size,unset) + var(--forge-split-view-handle-width,8px));-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row}.forge-split-view-panel[orientation=horizontal] .forge-split-view-panel__handle{width:8px;width:var(--forge-split-view-handle-width,8px);cursor:var(--forge-split-view-panel-cursor)}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--closing[resizable=end]{position:absolute;top:0;left:0;-webkit-animation-name:uaup4en;animation-name:uaup4en;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1)}@-webkit-keyframes uaup4en{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(-100%);transform:translateX(-100%)}}@keyframes uaup4en{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(-100%);transform:translateX(-100%)}}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--closing[resizable=start]{position:absolute;top:0;right:0;-webkit-animation-name:uaup4ez;animation-name:uaup4ez;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1)}@-webkit-keyframes uaup4ez{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(100%);transform:translateX(100%)}}@keyframes uaup4ez{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(100%);transform:translateX(100%)}}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--opening[resizable=end]{position:absolute;top:0;left:0;-webkit-animation-name:uaup4fe;animation-name:uaup4fe;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-direction:reverse}@-webkit-keyframes uaup4fe{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(-100%);transform:translateX(-100%)}}@keyframes uaup4fe{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(-100%);transform:translateX(-100%)}}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--opening[resizable=start]{position:absolute;top:0;right:0;-webkit-animation-name:uaup4fr;animation-name:uaup4fr;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-direction:reverse}@-webkit-keyframes uaup4fr{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(100%);transform:translateX(100%)}}@keyframes uaup4fr{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(100%);transform:translateX(100%)}}.forge-split-view-panel[orientation=vertical]{min-height:8px;min-height:var(--forge-split-view-handle-width,8px);height:calc(var(--forge-split-view-panel-size,unset) + var(--forge-split-view-handle-width,8px));-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column}.forge-split-view-panel[orientation=vertical] .forge-split-view-panel__handle{height:8px;height:var(--forge-split-view-handle-width,8px);cursor:var(--forge-split-view-panel-cursor)}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--closing[resizable=end]{position:absolute;top:0;left:0;-webkit-animation-name:uaup4gh;animation-name:uaup4gh;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1)}@-webkit-keyframes uaup4gh{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(-100%);transform:translateY(-100%)}}@keyframes uaup4gh{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(-100%);transform:translateY(-100%)}}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--closing[resizable=start]{position:absolute;bottom:0;left:0;-webkit-animation-name:uaup4h2;animation-name:uaup4h2;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1)}@-webkit-keyframes uaup4h2{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(100%);transform:translateY(100%)}}@keyframes uaup4h2{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(100%);transform:translateY(100%)}}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--opening[resizable=end]{position:absolute;top:0;left:0;-webkit-animation-name:uaup4hi;animation-name:uaup4hi;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-direction:reverse}@-webkit-keyframes uaup4hi{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(-100%);transform:translateY(-100%)}}@keyframes uaup4hi{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(-100%);transform:translateY(-100%)}}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--opening[resizable=start]{position:absolute;bottom:0;left:0;-webkit-animation-name:uaup4i4;animation-name:uaup4i4;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-direction:reverse}@-webkit-keyframes uaup4i4{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(100%);transform:translateY(100%)}}@keyframes uaup4i4{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(100%);transform:translateY(100%)}}:host{z-index:var(--forge-split-view-animating-layer)!important;display:block;position:relative;height:100%;width:100%;-webkit-box-flex:0;flex:0}:host([hidden]){display:none}:host(:not([resizable=start],[resizable=end])){-webkit-box-flex:1;flex:1}:host(:not([resizable=start],[resizable=end])) .forge-split-view-panel{width:100%;height:100%;min-width:0;min-height:0}:host(:not([resizable=start],[resizable=end])) .forge-split-view-panel__handle{display:none}';
 /**
  * The custom element class behind the `<forge-split-view-panel>` element.
  *

package/esm/text-field/text-field-adapter.d.ts

@@ -21,7 +21,7 @@ export declare class TextFieldAdapter extends FieldAdapter implements ITextField
     setValueChangedListener(context: any, listener: (value: any) => void): void;
     inputHasValue(): boolean;
     hasPlaceholder(): boolean;
-    inputHasFocus(): boolean;
+    inputHasFocus(target?: EventTarget | null): boolean;
     setInputClass(className: string): void;
     removeInputClass(className: string): void;
     setInputAttributeObserver(listener: (name: string, value: string) => void): void;

package/esm/text-field/text-field-adapter.js

@@ -10,6 +10,7 @@ import { FIELD_CONSTANTS } from '../field/field-constants';
 export class TextFieldAdapter extends FieldAdapter {
     constructor(component) {
         super(component);
+        this._inputElements = [];
         this._inputMutationObserverInstances = [];
     }
     initialize() {
@@ -64,8 +65,8 @@ export class TextFieldAdapter extends FieldAdapter {
     hasPlaceholder() {
         return this._inputsSome(input => input.placeholder ? input.placeholder.trim().length > 0 : false);
     }
-    inputHasFocus() {
-        return this._inputsSome(input => input === getActiveElement());
+    inputHasFocus(target) {
+        return this._inputsSome(input => input === target || input === getActiveElement());
     }
     setInputClass(className) {
         this._applyToInputs(input => input.classList.add(className));
@@ -94,7 +95,7 @@ export class TextFieldAdapter extends FieldAdapter {
     _handleMultiInputs() {
         addClass(TEXT_FIELD_CONSTANTS.classes.MULTI_INPUT, this._rootElement);
         this._applyToInputs((input, index) => {
-            input.setAttribute(`${TEXT_FIELD_CONSTANTS.attributes.MULTI_INPUT}-${index.toString()}`, '');
+            input.setAttribute(`${TEXT_FIELD_CONSTANTS.attributes.MULTI_INPUT}-${index}`, '');
             if (index % 2 !== 1) {
                 Promise.resolve().then(() => input.insertAdjacentElement('afterend', this._createSeperatorElement()));
             }

package/esm/time-picker/time-picker-adapter.js

@@ -19,9 +19,7 @@ export class TimePickerAdapter extends BaseAdapter {
         this._inputElement = this._component.querySelector(TIME_PICKER_CONSTANTS.selectors.INPUT);
     }
     initializeMask(options) {
-        if (this._inputMask) {
-            this._inputMask.destroy();
-        }
+        this.destroyMask();
         this._inputMask = new TimeInputMask(this._inputElement, options);
     }
     destroy() {
@@ -30,10 +28,9 @@ export class TimePickerAdapter extends BaseAdapter {
         this._inputElement = undefined;
     }
     destroyMask() {
-        if (this._inputMask) {
-            this._inputMask.destroy();
-            this._inputMask = undefined;
-        }
+        var _a;
+        (_a = this._inputMask) === null || _a === void 0 ? void 0 : _a.destroy();
+        this._inputMask = undefined;
     }
     initializeAccessibility(identifier) {
         this._inputElement.setAttribute('autocomplete', 'off');

package/esm/time-picker/time-picker-foundation.js

@@ -223,8 +223,14 @@ export class TimePickerFoundation {
         if (this._allowInput) {
             this._adapter.selectInputText();
         }
+        if (this.masked && this._showMaskFormat) {
+            this._applyMask();
+        }
     }
     _onInputBlur(evt) {
+        if (this.masked && this._showMaskFormat) {
+            this._applyMask();
+        }
         this._formatInputValue();
         if (this._open && !this._adapter.isInputFocused()) {
             this._closeDropdown(true);
@@ -242,8 +248,9 @@ export class TimePickerFoundation {
     }
     _applyMask() {
         if (this._masked && this._allowInput) {
+            this._adapter.destroyMask();
             const options = {
-                showMaskFormat: this._showMaskFormat,
+                showMaskFormat: this._showMaskFormat && this._adapter.isInputFocused(),
                 use24HourTime: this._use24HourTime,
                 showSeconds: this._allowSeconds,
                 prepareCallback: this._prepareMaskCallback,
@@ -635,9 +642,6 @@ export class TimePickerFoundation {
     set showMaskFormat(value) {
         if (this._showMaskFormat !== value) {
             this._showMaskFormat = value;
-            if (this._isInitialized) {
-                this._applyMask();
-            }
         }
     }
     get allowSeconds() {
@@ -661,9 +665,8 @@ export class TimePickerFoundation {
         if (this._use24HourTime !== value) {
             this._use24HourTime = !!value;
             if (this._isInitialized) {
-                this._adapter.destroyMask();
-                this._formatInputValue();
                 this._applyMask();
+                this._formatInputValue();
             }
             this._adapter.setHostAttribute(TIME_PICKER_CONSTANTS.attributes.USE_24_HOUR_TIME, `${!!value}`);
         }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tylertech/forge",
   "description": "Tyler Forge™ Web Components library",
-  "version": "3.0.0-next.3",
+  "version": "3.0.0-next.5",
   "author": "Tyler Technologies, Inc.",
   "license": "Apache-2.0",
   "repository": {
@@ -25,7 +25,6 @@
     "@material/feature-targeting": "^14.0.0",
     "@material/form-field": "^14.0.0",
     "@material/icon-button": "^14.0.0",
-    "@material/linear-progress": "^14.0.0",
     "@material/menu-surface": "^14.0.0",
     "@material/ripple": "^14.0.0",
     "@material/rtl": "^14.0.0",

package/styles/circular-progress/_mixins.scss

@@ -3,7 +3,20 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
+@use 'sass:list';
 @use '../core/style-layer/circular-progress';
+@use './variables';
+
+@mixin provide-theme($theme) {
+  @each $key, $value in $theme {
+    @if list.index(variables.$supported-theme-properties, $key) == null {
+      @error 'Invalid theme property: #{$key}';
+    }
+    @if $value {
+      --#{circular-progress.$prefix}-#{$key}: #{$value};
+    }
+  }
+}
 
 @mixin host {
   @include circular-progress.container;

package/styles/circular-progress/_variables.scss

@@ -0,0 +1,12 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+$supported-theme-properties: (
+  'size',
+  'padding',
+  'indicator-width',
+  'indicator-color',
+  'indicator-background-color'
+);

package/styles/circular-progress/circular-progress.scss

@@ -3,8 +3,7 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@use 'mixins';
-@use '../theme';
+@use './mixins';
 
 :host {
   @include mixins.host;

package/styles/core/style-layer/circular-progress/_animations.scss

@@ -3,6 +3,11 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
+///
+/// Adapted and influenced from [Material Web](https://github.com/material-components/material-web).
+/// The original source code can be found at [GitHub](https://github.com/material-components/material-web/blob/main/circularprogress/lib/_circular-progress.scss)
+///
+
 @mixin keyframes {
   // Indeterminate mode is 3 animations composed together:
   // 1. expand-arc: an arc is expanded/contracted between 10deg and 270deg.

package/styles/core/style-layer/circular-progress/_core.scss

@@ -3,6 +3,11 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
+///
+/// Adapted and influenced from [Material Web](https://github.com/material-components/material-web).
+/// The original source code can be found at [GitHub](https://github.com/material-components/material-web/blob/main/circularprogress/lib/_circular-progress.scss)
+///
+
 @use './variables';
 @use '../../../theme/theme-values';
 

package/styles/core/style-layer/linear-progress/_animations.scss

@@ -0,0 +1,131 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+///
+/// Adapted and influenced from [Material Web](https://github.com/material-components/material-web).
+/// The original source code can be found at [GitHub](https://github.com/material-components/material-web/blob/main/linearprogress/lib/_linear-progress.scss)
+///
+
+@use './variables';
+
+@mixin keyframes {
+  @include _directional-keyframes('ltr');
+  @include _directional-keyframes('rtl');
+
+  @keyframes primary-indeterminate-scale {
+    0% {
+      transform: scaleX(0.08);
+    }
+  
+    36.65% {
+      animation-timing-function: cubic-bezier(0.334731, 0.12482, 0.785844, 1);
+      transform: scaleX(0.08);
+    }
+  
+    69.15% {
+      animation-timing-function: cubic-bezier(0.06, 0.11, 0.6, 1);
+      transform: scaleX(0.661479);
+    }
+  
+    100% {
+      transform: scaleX(0.08);
+    }
+  }
+  
+  @keyframes secondary-indeterminate-scale {
+    0% {
+      animation-timing-function: cubic-bezier(
+        0.205028,
+        0.057051,
+        0.57661,
+        0.453971
+      );
+      transform: scaleX(0.08);
+    }
+  
+    19.15% {
+      animation-timing-function: cubic-bezier(
+        0.152313,
+        0.196432,
+        0.648374,
+        1.00432
+      );
+      transform: scaleX(0.457104);
+    }
+  
+    44.15% {
+      animation-timing-function: cubic-bezier(
+        0.257759,
+        -0.003163,
+        0.211762,
+        1.38179
+      );
+      transform: scaleX(0.72796);
+    }
+  
+    100% {
+      transform: scaleX(0.08);
+    }
+  }
+}
+
+// Generates keyframes for ltr and rtl.
+@mixin _directional-keyframes($dir) {
+  $is-rtl: $dir == 'rtl';
+  $sign: if($is-rtl, -1, 1);
+  $suffix: if($is-rtl, '-rtl', '');
+
+  @keyframes buffering#{$suffix} {
+    0% {
+      transform: translateX(calc(#{$sign} * var(--_track-background-width)));
+    }
+  }
+
+  @keyframes primary-indeterminate-translate#{$suffix} {
+    0% {
+      transform: translateX(0);
+    }
+
+    20% {
+      animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
+      transform: translateX(0);
+    }
+
+    59.15% {
+      animation-timing-function: cubic-bezier(
+        0.302435,
+        0.381352,
+        0.55,
+        0.956352
+      );
+      transform: translateX(calc(#{$sign} * 83.6714%));
+    }
+
+    100% {
+      transform: translateX(calc(#{$sign} * 200.611%));
+    }
+  }
+
+  @keyframes secondary-indeterminate-translate#{$suffix} {
+    0% {
+      animation-timing-function: cubic-bezier(0.15, 0, 0.515058, 0.409685);
+      transform: translateX(0);
+    }
+
+    25% {
+      animation-timing-function: cubic-bezier(0.31033, 0.284058, 0.8, 0.733712);
+      transform: translateX(calc(#{$sign} * 37.6519%));
+    }
+
+    48.35% {
+      animation-timing-function: cubic-bezier(0.4, 0.627035, 0.6, 0.902026);
+      transform: translateX(calc(#{$sign} * 84.3862%));
+    }
+
+    100% {
+      transform: translateX(calc(#{$sign} * 160.278%));
+    }
+  }
+}

package/styles/core/style-layer/linear-progress/_core.scss

@@ -0,0 +1,125 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+///
+/// Adapted and influenced from [Material Web](https://github.com/material-components/material-web).
+/// The original source code can be found at [GitHub](https://github.com/material-components/material-web/blob/main/linearprogress/lib/_linear-progress.scss)
+///
+
+@use './variables';
+@use '../../../theme/theme-values';
+
+///
+/// Initializes private configuration state CSS variables
+/// 
+@mixin configuration {
+  --_track-height: var(--#{variables.$prefix}-height, #{variables.$track-height});
+  --_track-color: var(--#{variables.$prefix}-indicator-background-color, #{variables.$track-background-color});
+  --_active-indicator-color: var(--#{variables.$prefix}-indicator-color, var(--forge-theme-tertiary, #{theme-values.$tertiary}));
+
+  --_track-shape: 0;
+  --_active-indicator-height: var(--_track-height);
+  --_determinate-duration: #{variables.$determinate-duration};
+  --_indeterminate-duration: #{variables.$indeterminate-duration};
+  --_determinate-easing: #{variables.$determinate-easing};
+  --_track-dot-size: calc(var(--_track-height) / 2);
+  --_track-background-width: calc(var(--_track-dot-size) * 5);
+  --_track-background: 0 / var(--_track-background-width) 100%
+    radial-gradient(
+      circle at calc(var(--_track-dot-size) * 2),
+      var(--_track-color) 0,
+      var(--_track-color) var(--_track-dot-size),
+      transparent var(--_track-dot-size)
+    );
+}
+
+///
+/// Styles for the container/wrapper element to support the bounding box of the progress indicator
+/// 
+@mixin container {
+  display: block;
+  position: relative;
+  min-inline-size: 80px;
+  block-size: var(--#{variables.$prefix}-height, #{variables.$track-height});
+  content-visibility: auto;
+  contain: strict;
+}
+
+@mixin progress {
+  inset: 0;
+  outline: transparent solid 1px;
+  border-radius: var(--_track-shape);
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+}
+
+@mixin bar {
+  animation: none;
+  inline-size: 100%;
+  block-size: var(--_active-indicator-height);
+  transform-origin: left center;
+  will-change: transform;
+  transition: transform var(--_determinate-duration) var(--_determinate-easing);
+}
+
+@mixin secondary-bar {
+  display: none;
+}
+
+@mixin bar-inner {
+  inset: 0;
+  animation: none;
+  background: var(--_active-indicator-color);
+}
+
+@mixin buffer-bar {
+  background: var(--_track-color);
+  inset: 0;
+  will-change: transform;
+  transition: transform var(--_determinate-duration) var(--_determinate-easing);
+  transform-origin: left center;
+}
+
+@mixin track {
+  inset: 0;
+  will-change: transform;
+  animation: linear infinite var(--_determinate-duration);
+  animation-name: buffering;
+  background: var(--_track-background);
+}
+
+@mixin indeterminate-bar {
+  transition: none;
+}
+
+@mixin indeterminate-primary-bar {
+  inset-inline-start: -145.167%;
+  will-change: transform;
+  animation: linear infinite var(--_indeterminate-duration);
+  animation-name: primary-indeterminate-translate;
+}
+
+@mixin indeterminate-secondary-bar {
+  inset-inline-start: -54.8889%;
+  display: block;
+  will-change: transform;
+  animation: linear infinite var(--_indeterminate-duration);
+  animation-name: secondary-indeterminate-translate;
+}
+
+@mixin indeterminate-track {
+  display: none;
+}
+
+@mixin indeterminate-primary-bar-inner {
+  will-change: transform;
+  animation: linear infinite var(--_indeterminate-duration) primary-indeterminate-scale;
+}
+
+@mixin indeterminate-secondary-bar-inner {
+  will-change: transform;
+  animation: linear infinite var(--_indeterminate-duration) secondary-indeterminate-scale;
+}

package/styles/core/style-layer/linear-progress/_variables.scss

@@ -0,0 +1,15 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use '../core/config';
+
+$prefix: #{config.$prefix}-linear-progress !default;
+$track-height: 4px !default;
+$track-background-color: #ced5f7 !default;
+$track-background-color-dark: #7c704c !default;
+$determinate-duration: 250ms !default;
+$indeterminate-duration: 2s !default;
+$determinate-easing: cubic-bezier(0.4, 0, 0.6, 1) !default;
+

package/styles/core/style-layer/linear-progress/index.scss

@@ -0,0 +1,145 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use './variables';
+@use './core';
+@use './animations';
+
+@forward './variables';
+@forward './core';
+@forward './animations';
+
+///
+/// Creates selectors for the standard circular progress structure
+/// 
+@mixin styles {
+  @include base-styles;
+  @include indeterminate-styles;
+  @include rtl;
+  @include forced-colors;
+  @include animations.keyframes;
+}
+
+///
+/// Selectors for the base container structure
+/// 
+@mixin base-styles {
+  @layer base {
+    .#{variables.$prefix} {
+      @include core.configuration;
+      @include core.progress;
+    }
+
+    .#{variables.$prefix},
+    .track,
+    .buffer-bar,
+    .bar,
+    .bar-inner {
+      position: absolute;
+    }
+
+    .bar {
+      @include core.bar;
+    }
+
+    .secondary-bar {
+      @include core.secondary-bar;
+    }
+
+    .bar-inner {
+      @include core.bar-inner;
+    }
+
+    .buffer-bar {
+      @include core.buffer-bar;
+    }
+
+    .track {
+      @include core.track;
+    }
+  }
+}
+
+///
+/// Selectors for the indeterminate structure
+/// 
+@mixin indeterminate-styles {
+  @layer indeterminate {
+    .#{variables.$prefix}--indeterminate {
+      .bar {
+        @include core.indeterminate-bar;
+      }
+    
+      .primary-bar {
+        @include core.indeterminate-primary-bar;
+      }
+    
+      .secondary-bar {
+        @include core.indeterminate-secondary-bar;
+      }
+    
+      .track {
+        @include core.indeterminate-track;
+      }
+    
+      .primary-bar > .bar-inner {
+        @include core.indeterminate-primary-bar-inner;
+      }
+    
+      .secondary-bar > .bar-inner {
+        @include core.indeterminate-secondary-bar-inner;
+      }
+    }
+  }
+}
+
+@mixin rtl {
+  $rtl-selectors: (
+    ':host-context([dir="rtl"]) .' + variables.$prefix,
+    ':host([dir="rtl"]) .' + variables.$prefix,
+    '.' + variables.$prefix + ':dir(rtl)'
+  );
+
+  @each $selector in $rtl-selectors {
+    #{$selector} {
+      .bar {
+        transform-origin: right center;
+      }
+
+      .buffer-bar {
+        transform-origin: right center;
+      }
+
+      .track {
+        animation-name: buffering-rtl;
+      }
+
+      &.forge-linear-progress--indeterminate .primary-bar {
+        animation-name: primary-indeterminate-translate-rtl;
+      }
+
+      &.forge-linear-progress--indeterminate .secondary-bar {
+        animation-name: secondary-indeterminate-translate-rtl;
+      }
+    }
+  }
+}
+
+///
+/// Provides selectors to support forced-colors mode
+/// 
+@mixin forced-colors {
+  @media screen and (forced-colors: active) {
+    .#{variables.$prefix} {
+      --_active-indicator-color: canvastext;
+      --_track-color: graytext;
+      border: 1px solid canvastext;
+    }
+
+    .#{variables.$prefix}--indeterminate.#{variables.$prefix} {
+      --_track-color: canvas;
+    }
+  }
+}