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

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:uygw9bw;animation-name:uygw9bw;-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 uygw9bw{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(-100%);transform:translateX(-100%)}}@keyframes uygw9bw{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:uygw9c9;animation-name:uygw9c9;-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 uygw9c9{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(100%);transform:translateX(100%)}}@keyframes uygw9c9{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:uygw9cg;animation-name:uygw9cg;-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 uygw9cg{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(-100%);transform:translateX(-100%)}}@keyframes uygw9cg{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:uygw9ch;animation-name:uygw9ch;-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 uygw9ch{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(100%);transform:translateX(100%)}}@keyframes uygw9ch{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:uygw9cn;animation-name:uygw9cn;-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 uygw9cn{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(-100%);transform:translateY(-100%)}}@keyframes uygw9cn{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:uygw9dn;animation-name:uygw9dn;-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 uygw9dn{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(100%);transform:translateY(100%)}}@keyframes uygw9dn{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:uygw9e3;animation-name:uygw9e3;-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 uygw9e3{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(-100%);transform:translateY(-100%)}}@keyframes uygw9e3{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:uygw9em;animation-name:uygw9em;-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 uygw9em{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(100%);transform:translateY(100%)}}@keyframes uygw9em{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:unhj3zh;animation-name:unhj3zh;-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 unhj3zh{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(-100%);transform:translateX(-100%)}}@keyframes unhj3zh{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:unhj409;animation-name:unhj409;-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 unhj409{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(100%);transform:translateX(100%)}}@keyframes unhj409{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:unhj40p;animation-name:unhj40p;-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 unhj40p{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(-100%);transform:translateX(-100%)}}@keyframes unhj40p{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:unhj418;animation-name:unhj418;-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 unhj418{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(100%);transform:translateX(100%)}}@keyframes unhj418{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:unhj426;animation-name:unhj426;-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 unhj426{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(-100%);transform:translateY(-100%)}}@keyframes unhj426{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:unhj42f;animation-name:unhj42f;-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 unhj42f{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(100%);transform:translateY(100%)}}@keyframes unhj42f{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:unhj431;animation-name:unhj431;-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 unhj431{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(-100%);transform:translateY(-100%)}}@keyframes unhj431{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:unhj43v;animation-name:unhj43v;-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 unhj43v{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(100%);transform:translateY(100%)}}@keyframes unhj43v{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/state-layer/state-layer-adapter.js

@@ -19,6 +19,7 @@ export class StateLayerAdapter extends BaseAdapter {
             this._destroyDeferListener();
             this._destroyDeferListener = undefined;
         }
+        this._targetElement = null;
     }
     async deferInitialization(listener) {
         if (!this._targetElement) {

package/esm/state-layer/state-layer-foundation.js

@@ -35,8 +35,8 @@ export class StateLayerFoundation {
         this._pointerState = PointerState.INACTIVE;
         this._adapter.setHovered(false);
         this._adapter.setPressed(false);
+        this._removeListeners(); // Must be called before destroying adapter
         this._adapter.destroy();
-        this._removeListeners();
     }
     playAnimation(coords) {
         this._adapter.startAnimation(coords);
@@ -192,6 +192,11 @@ export class StateLayerFoundation {
         if (this._attached) {
             this._removeListeners();
         }
+        else {
+            // If unattached destroy the defer listener to recreate on the new target element
+            this._adapter.destroy();
+            this._deferred = false;
+        }
         this._adapter.setTargetElement(el);
         // If we are not already deferring attaching the listeners, then do that now
         if (!this._deferred) {
@@ -208,6 +213,10 @@ export class StateLayerFoundation {
                 if (this._attached) {
                     this._removeListeners();
                 }
+                else {
+                    this._adapter.destroy();
+                    this._deferred = false;
+                }
                 this._adapter.trySetTarget(value);
                 if (!this._deferred) {
                     this._deferInitialization();

package/esm/state-layer/state-layer.js

@@ -10,7 +10,7 @@ import { StateLayerFoundation } from './state-layer-foundation';
 import { STATE_LAYER_CONSTANTS } from './state-layer-constants';
 import { BaseComponent } from '../core/base/base-component';
 const template = '<template><div class=\"forge-state-layer\" part=\"surface\"></div></template>';
-const styles = ':host{border-radius:inherit;position:absolute;inset:0;overflow:hidden;display:-webkit-box;display:flex;margin:auto;pointer-events:none;-webkit-tap-highlight-color:transparent}:host([hidden]){display:none}:host([disabled]){display:none}.forge-state-layer{--_color:var(--forge-state-layer-color, var(--forge-theme-on-surface, #000000));--_hover-color:var(--forge-state-layer-hover-color, var(--_color));--_hover-opacity:0.08;--_pressed-color:var(--forge-state-layer-pressed-color, var(--_color));--_pressed-opacity:0.12;--_hover-duration:15ms;--_pressed-duration:105ms;--_animation-duration:375ms}.forge-state-layer::after,.forge-state-layer::before{content:\"\";opacity:0;position:absolute}.forge-state-layer::before{background-color:var(--_hover-color);inset:0;-webkit-transition:opacity var(--_hover-duration) linear,background-color var(--_hover-duration) linear;transition:opacity var(--_hover-duration) linear,background-color var(--_hover-duration) linear}.forge-state-layer::after{background:radial-gradient(closest-side,var(--_pressed-color) max(100% - 70px,65%),transparent 100%);-webkit-transform-origin:center center;transform-origin:center center;-webkit-transition:opacity var(--_animation-duration) linear;transition:opacity var(--_animation-duration) linear}.forge-state-layer--hovered::before{background-color:var(--_hover-color);opacity:var(--_hover-opacity)}.forge-state-layer--pressed::after{opacity:var(--_pressed-opacity);-webkit-transition-duration:var(--_pressed-duration);transition-duration:var(--_pressed-duration)}@media screen and (forced-colors:active){:host{display:none}}';
+const styles = ':host{border-radius:inherit;position:absolute;inset:0;overflow:hidden;display:-webkit-box;display:flex;margin:auto;pointer-events:none;-webkit-tap-highlight-color:transparent}:host([hidden]){display:none}:host([disabled]){display:none}.forge-state-layer{--_state-layer-color:var(--forge-state-layer-color, var(--forge-theme-on-surface, #000000));--_state-layer-hover-color:var(--forge-state-layer-hover-color, var(--_state-layer-color));--_state-layer-hover-opacity:var(--forge-state-layer-hover-opacity, 0.08);--_state-layer-pressed-color:var(--forge-state-layer-pressed-color, var(--_state-layer-color));--_state-layer-pressed-opacity:var(--forge-state-layer-pressed-opacity, 0.12);--_state-layer-hover-duration:var(--forge-state-layer-hover-duration, 15ms);--_state-layer-pressed-duration:var(--forge-state-layer-pressed-duration, 105ms);--_state-layer-animation-duration:var(--forge-state-layer-animation-duration, 375ms)}.forge-state-layer::after,.forge-state-layer::before{content:\"\";opacity:0;position:absolute}.forge-state-layer::before{background-color:var(--_state-layer-hover-color);inset:0;-webkit-transition:opacity var(--_state-layer-hover-duration) linear,background-color var(--_state-layer-hover-duration) linear;transition:opacity var(--_state-layer-hover-duration) linear,background-color var(--_state-layer-hover-duration) linear}.forge-state-layer::after{background:radial-gradient(closest-side,var(--_state-layer-pressed-color) max(100% - 70px,65%),transparent 100%);-webkit-transform-origin:center center;transform-origin:center center;-webkit-transition:opacity var(--_state-layer-animation-duration) linear;transition:opacity var(--_state-layer-animation-duration) linear}.forge-state-layer--hovered::before{background-color:var(--_state-layer-hover-color);opacity:var(--_state-layer-hover-opacity)}.forge-state-layer--pressed::after{opacity:var(--_state-layer-pressed-opacity);-webkit-transition-duration:var(--_state-layer-pressed-duration);transition-duration:var(--_state-layer-pressed-duration)}@media screen and (forced-colors:active){:host{display:none}}';
 /**
  * @tag forge-state-layer
  *

package/esm/stepper/stepper/stepper-foundation.js

@@ -55,7 +55,7 @@ export class StepperFoundation {
     }
     /** The step configurations. */
     get steps() {
-        return JSON.parse(JSON.stringify(this._steps));
+        return this._steps.map(s => (Object.assign({}, s))); // Shallow clone
     }
     set steps(value) {
         if (Array.isArray(value) && value.length > 0) {

package/esm/switch/index.d.ts

@@ -3,7 +3,9 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
+export * from './switch-adapter';
 export * from './switch-constants';
+export * from './switch-foundation';
 export * from './switch';
 export * from './switch-component-delegate';
 export declare function defineSwitchComponent(): void;

package/esm/switch/index.js

@@ -5,7 +5,9 @@
  */
 import { defineCustomElement } from '@tylertech/forge-core';
 import { SwitchComponent } from './switch';
+export * from './switch-adapter';
 export * from './switch-constants';
+export * from './switch-foundation';
 export * from './switch';
 export * from './switch-component-delegate';
 export function defineSwitchComponent() {

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

@@ -0,0 +1,64 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { BaseAdapter, IBaseAdapter } from '../core';
+import { ISwitchComponent } from './switch';
+import { SwitchIconVisibility, SwitchLabelPosition } from './switch-constants';
+export interface ISwitchAdapter extends IBaseAdapter {
+    initialize(): void;
+    setOn(value: boolean): void;
+    setDefaultOn(value: boolean): void;
+    setValue(value: string): void;
+    setDisabled(value: boolean): void;
+    setRequired(value: boolean): void;
+    setReadonly(value: boolean): void;
+    setIconVisibility(value: SwitchIconVisibility): void;
+    setLabelPosition(value: SwitchLabelPosition): void;
+    addRootListener(event: string, callback: EventListener): void;
+    addInputSlotListener(callback: EventListener): void;
+    detectInputElement(): void;
+    proxyClick(): void;
+    proxyLabel(value: string | null): void;
+    syncValue(value: string | null): void;
+    syncValidity(hasCustomValidityError: boolean): void;
+    setValidity(flags?: ValidityStateFlags | undefined, message?: string | undefined): void;
+}
+export declare class SwitchAdapter extends BaseAdapter<ISwitchComponent> implements ISwitchAdapter {
+    private readonly _rootElement;
+    private readonly _inputElement;
+    private readonly _labelElement;
+    private readonly _iconOnElement;
+    private readonly _iconOffElement;
+    private readonly _inputSlotElement;
+    private readonly _stateLayerElement;
+    private readonly _inputAdapter;
+    private _forwardObserver?;
+    private _forwardedAriaLabel?;
+    private _labelElementText?;
+    private get _activeInputElement();
+    constructor(component: ISwitchComponent);
+    initialize(): void;
+    setOn(value: boolean): void;
+    setDefaultOn(value: boolean): void;
+    setValue(value: string): void;
+    setDisabled(value: boolean): void;
+    setRequired(value: boolean): void;
+    setReadonly(value: boolean): void;
+    setIconVisibility(value: SwitchIconVisibility): void;
+    setLabelPosition(value: SwitchLabelPosition): void;
+    addRootListener(event: string, callback: EventListener): void;
+    addInputSlotListener(callback: EventListener): void;
+    detectInputElement(): void;
+    proxyClick(): void;
+    proxyLabel(value: string | null): void;
+    syncValue(value: string | null): void;
+    syncValidity(hasCustomValidityError: boolean): void;
+    setValidity(flags?: ValidityStateFlags | undefined, message?: string | undefined): void;
+    private _initializeInput;
+    private _initializeForwardObserver;
+    private _setAriaLabel;
+    private _switchInput;
+    private _observeInput;
+}

package/esm/switch/switch-adapter.js

@@ -0,0 +1,151 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { getShadowElement, toggleAttribute, toggleClass } from '@tylertech/forge-core';
+import { internals } from '../constants';
+import { BaseAdapter, INPUT_PROPERTIES, SlottedElementAdapter, cloneAttributes, cloneProperties, cloneValidationMessage, forwardAttributes } from '../core';
+import { SWITCH_CONSTANTS } from './switch-constants';
+export class SwitchAdapter extends BaseAdapter {
+    get _activeInputElement() {
+        var _a;
+        return (_a = this._inputAdapter.el) !== null && _a !== void 0 ? _a : this._inputElement;
+    }
+    constructor(component) {
+        super(component);
+        this._rootElement = getShadowElement(component, SWITCH_CONSTANTS.selectors.ROOT);
+        this._inputElement = getShadowElement(component, SWITCH_CONSTANTS.selectors.INPUT);
+        this._labelElement = getShadowElement(component, SWITCH_CONSTANTS.selectors.LABEL);
+        this._iconOnElement = getShadowElement(component, SWITCH_CONSTANTS.selectors.ICON_ON);
+        this._iconOffElement = getShadowElement(component, SWITCH_CONSTANTS.selectors.ICON_OFF);
+        this._stateLayerElement = getShadowElement(component, SWITCH_CONSTANTS.selectors.STATE_LAYER);
+        this._inputAdapter = new SlottedElementAdapter();
+    }
+    initialize() {
+        const slottedInput = this._component.querySelector(SWITCH_CONSTANTS.selectors.SLOTTED_INPUT);
+        if (slottedInput) {
+            slottedInput.slot = 'input';
+            this._switchInput(slottedInput, this._inputElement);
+        }
+        else {
+            this._initializeForwardObserver(this._inputElement);
+        }
+        this._observeInput(slottedInput !== null && slottedInput !== void 0 ? slottedInput : this._inputElement);
+    }
+    setOn(value) {
+        this._activeInputElement.checked = value;
+    }
+    setDefaultOn(value) {
+        this._activeInputElement.toggleAttribute('checked', value);
+    }
+    setValue(value) {
+        this._activeInputElement.value = value;
+    }
+    setDisabled(value) {
+        this._activeInputElement.disabled = value;
+        this._stateLayerElement.disabled = value;
+    }
+    setRequired(value) {
+        this._activeInputElement.required = value;
+    }
+    setReadonly(value) {
+        this._activeInputElement.readOnly = value;
+        toggleAttribute(this._activeInputElement, value, 'aria-readonly', value.toString());
+        this._stateLayerElement.disabled = value;
+    }
+    setIconVisibility(value) {
+        const hideOn = value === 'none' || value === 'off';
+        const hideOff = value === 'none' || value === 'on';
+        toggleClass(this._iconOnElement, hideOn, SWITCH_CONSTANTS.classes.HIDDEN);
+        toggleClass(this._iconOffElement, hideOff, SWITCH_CONSTANTS.classes.HIDDEN);
+    }
+    setLabelPosition(value) {
+        this._labelElement.remove();
+        if (value === 'start') {
+            this._rootElement.prepend(this._labelElement);
+        }
+        else {
+            this._rootElement.append(this._labelElement);
+        }
+    }
+    addRootListener(event, callback) {
+        this._rootElement.addEventListener(event, callback);
+    }
+    addInputSlotListener(callback) {
+        this._inputElement.addEventListener('slotchange', callback);
+    }
+    detectInputElement() {
+        const inputElement = this._inputSlotElement.assignedElements()[0];
+        if (inputElement) {
+            this._inputAdapter.attachElement(inputElement);
+        }
+        else {
+            this._inputAdapter.attachElement(this._inputElement);
+        }
+    }
+    proxyClick() {
+        this._activeInputElement.click();
+        // TODO: use `{ focusVisble: false }` when supported.
+        this._activeInputElement.focus();
+    }
+    proxyLabel(value) {
+        this._labelElementText = value !== null && value !== void 0 ? value : undefined;
+        this._setAriaLabel();
+    }
+    syncValue(value) {
+        if (value === null) {
+            this._component[internals].setFormValue(null, SWITCH_CONSTANTS.state.OFF);
+            return;
+        }
+        const data = new FormData();
+        data.append(this._component.name, value);
+        this._component[internals].setFormValue(data, SWITCH_CONSTANTS.state.ON);
+    }
+    syncValidity(hasCustomValidityError) {
+        if (hasCustomValidityError) {
+            this._activeInputElement.setCustomValidity(this._component[internals].validationMessage);
+        }
+        else {
+            this._activeInputElement.setCustomValidity('');
+        }
+        this._component[internals].setValidity(this._activeInputElement.validity, this._activeInputElement.validationMessage, this._activeInputElement);
+    }
+    setValidity(flags, message) {
+        this._component[internals].setValidity(flags, message, this._activeInputElement);
+    }
+    _initializeInput() {
+        var _a;
+        (_a = this._forwardObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this._initializeForwardObserver(this._activeInputElement);
+    }
+    _initializeForwardObserver(el) {
+        this._forwardObserver = forwardAttributes(this._component, SWITCH_CONSTANTS.forwardedAttributes, (name, value) => {
+            // Use the connected label element as a fallback if aria-label is removed. Store the value so
+            // it can be used to determine whether an updated label element should take effect.
+            if (name === 'aria-label') {
+                this._forwardedAriaLabel = value !== null && value !== void 0 ? value : undefined;
+                this._setAriaLabel();
+                return;
+            }
+            // Otherwise forward the attribute to the element.
+            toggleAttribute(el, !!value, name, value !== null && value !== void 0 ? value : undefined);
+        });
+    }
+    _setAriaLabel() {
+        var _a;
+        const hasAriaLabel = !!this._forwardedAriaLabel || !!this._labelElementText;
+        toggleAttribute(this._activeInputElement, hasAriaLabel, 'aria-label', (_a = this._forwardedAriaLabel) !== null && _a !== void 0 ? _a : this._labelElementText);
+    }
+    _switchInput(newEl, oldEl) {
+        cloneAttributes(oldEl, newEl, ['type', 'role', 'checked', 'aria-readonly']);
+        cloneProperties(oldEl, newEl, INPUT_PROPERTIES);
+        cloneValidationMessage(oldEl, newEl);
+    }
+    _observeInput(el = this._inputElement) {
+        this._inputAdapter.initialize(el, (newEl, oldEl) => {
+            this._switchInput(newEl, oldEl);
+            this._initializeInput();
+        });
+    }
+}

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

@@ -6,27 +6,43 @@
 import { FormFieldComponentDelegate, IFormFieldComponentDelegateOptions } from '../core';
 import { IBaseComponentDelegateConfig } from '../core/delegates/base-component-delegate';
 import { ISwitchComponent } from './switch';
+import { SwitchIconVisibility, SwitchLabelPosition } from './switch-constants';
 export type SwitchComponentDelegateProps = Partial<ISwitchComponent>;
 export interface ISwitchComponentDelegateOptions extends IFormFieldComponentDelegateOptions {
     id?: string;
     label?: string;
-    selected?: boolean;
 }
 export interface ISwitchComponentDelegateConfig extends IBaseComponentDelegateConfig<ISwitchComponent, ISwitchComponentDelegateOptions> {
 }
 export declare class SwitchComponentDelegate extends FormFieldComponentDelegate<ISwitchComponent, ISwitchComponentDelegateOptions> {
-    private _labelElement?;
     constructor(config?: ISwitchComponentDelegateConfig);
-    get value(): boolean;
-    set value(value: boolean);
+    get value(): string;
+    set value(value: string);
+    get on(): boolean;
+    set on(value: boolean);
+    get selected(): boolean;
+    set selected(value: boolean);
+    get defaultOn(): boolean;
+    set defaultOn(value: boolean);
+    get icon(): SwitchIconVisibility;
+    set icon(value: SwitchIconVisibility);
     get disabled(): boolean;
     set disabled(value: boolean);
-    get labelElement(): HTMLLabelElement | undefined;
+    get dense(): boolean;
+    set dense(value: boolean);
+    get required(): boolean;
+    set required(value: boolean);
+    get readonly(): boolean;
+    set readonly(value: boolean);
+    get name(): string;
+    set name(value: string);
+    get labelPosition(): SwitchLabelPosition;
+    set labelPosition(value: SwitchLabelPosition);
     onChange(listener: (value: boolean) => void): void;
     onFocus(listener: (evt: Event) => void): void;
     onBlur(listener: (evt: Event) => void): void;
     setLabel(text: string | null): void;
+    toggle(force?: boolean): void;
     protected _build(): ISwitchComponent;
     protected _configure(): void;
-    private _createLabel;
 }

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

@@ -10,22 +10,73 @@ export class SwitchComponentDelegate extends FormFieldComponentDelegate {
         super(config);
     }
     get value() {
-        return this._element.selected;
+        return this._element.value;
     }
     set value(value) {
+        this._element.value = value;
+    }
+    get on() {
+        return this._element.on;
+    }
+    set on(value) {
+        this._element.on = value;
+    }
+    get selected() {
+        return this._element.selected;
+    }
+    set selected(value) {
         this._element.selected = value;
     }
+    get defaultOn() {
+        return this._element.defaultOn;
+    }
+    set defaultOn(value) {
+        this._element.defaultOn = value;
+    }
+    get icon() {
+        return this._element.icon;
+    }
+    set icon(value) {
+        this._element.icon = value;
+    }
     get disabled() {
         return this._element.disabled;
     }
     set disabled(value) {
         this._element.disabled = value;
     }
-    get labelElement() {
-        return this._labelElement;
+    get dense() {
+        return this._element.dense;
+    }
+    set dense(value) {
+        this._element.dense = value;
+    }
+    get required() {
+        return this._element.required;
+    }
+    set required(value) {
+        this._element.required = value;
+    }
+    get readonly() {
+        return this._element.readonly;
+    }
+    set readonly(value) {
+        this._element.readonly = value;
+    }
+    get name() {
+        return this._element.name;
+    }
+    set name(value) {
+        this._element.name = value;
+    }
+    get labelPosition() {
+        return this._element.labelPosition;
+    }
+    set labelPosition(value) {
+        this._element.labelPosition = value;
     }
     onChange(listener) {
-        this._element.addEventListener('forge-switch-select', ({ detail }) => listener(detail));
+        this._element.addEventListener('forge-switch-change', ({ detail }) => listener(detail));
     }
     onFocus(listener) {
         this._element.addEventListener('focus', evt => listener(evt));
@@ -34,37 +85,21 @@ export class SwitchComponentDelegate extends FormFieldComponentDelegate {
         this._element.addEventListener('blur', evt => listener(evt));
     }
     setLabel(text) {
-        if (text) {
-            if (this._labelElement) {
-                this._labelElement.textContent = text;
-            }
-            else {
-                this._createLabel(text);
-            }
-        }
-        else if (this._labelElement) {
-            this._element.removeChild(this._labelElement);
-            this._labelElement = undefined;
-        }
+        this._element.innerText = text !== null && text !== void 0 ? text : '';
+    }
+    toggle(force) {
+        this._element.toggle(force);
     }
     _build() {
         return document.createElement(SWITCH_CONSTANTS.elementName);
     }
     _configure() {
-        var _a, _b, _c;
-        if (typeof ((_a = this._config.options) === null || _a === void 0 ? void 0 : _a.label) === 'string') {
-            this._createLabel(this._config.options.label);
-        }
-        if (((_b = this._config.options) === null || _b === void 0 ? void 0 : _b.selected) !== undefined) {
-            this._element.selected = this._config.options.selected;
-        }
-        if ((_c = this._config.options) === null || _c === void 0 ? void 0 : _c.id) {
+        var _a, _b;
+        if ((_a = this._config.options) === null || _a === void 0 ? void 0 : _a.id) {
             this._element.id = this._config.options.id;
         }
-    }
-    _createLabel(text) {
-        this._labelElement = document.createElement('label');
-        this._labelElement.textContent = text;
-        this._element.appendChild(this._labelElement);
+        if ((_b = this._config.options) === null || _b === void 0 ? void 0 : _b.label) {
+            this._element.innerText = this._config.options.label;
+        }
     }
 }

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

@@ -5,22 +5,39 @@
  */
 export declare const SWITCH_CONSTANTS: {
     classes: {
-        LABEL_START: string;
+        HIDDEN: string;
     };
     selectors: {
-        BUTTON: string;
-        CONTAINER: string;
+        ROOT: string;
+        INPUT: string;
+        LABEL: string;
+        ICON_ON: string;
+        ICON_OFF: string;
+        INPUT_SLOT: string;
+        STATE_LAYER: string;
+        SLOTTED_INPUT: string;
     };
     attributes: {
+        ON: string;
+        SELECTED: string;
+        DEFAULT_ON: string;
+        VALUE: string;
         DENSE: string;
         DISABLED: string;
-        SELECTED: string;
+        REQUIRED: string;
+        READONLY: string;
+        ICON: string;
         LABEL_POSITION: string;
-        BUTTON_ARIA_LABEL: string;
     };
     elementName: "forge-switch";
     events: {
-        SELECT: string;
+        CHANGE: string;
+    };
+    state: {
+        ON: string;
+        OFF: string;
     };
+    forwardedAttributes: string[];
 };
 export type SwitchLabelPosition = 'start' | 'end';
+export type SwitchIconVisibility = 'both' | 'none' | 'off' | 'on';

package/esm/switch/switch-constants.js

@@ -4,28 +4,47 @@
  * License: Apache-2.0
  */
 import { COMPONENT_NAME_PREFIX } from '../constants';
+import { INPUT_ARIA_ATTRIBUTES } from '../core';
 const elementName = `${COMPONENT_NAME_PREFIX}switch`;
 const classes = {
-    LABEL_START: 'forge-switch--label-position-start'
-};
-const selectors = {
-    BUTTON: '.mdc-switch',
-    CONTAINER: '.forge-switch__container'
+    HIDDEN: 'hidden'
 };
 const attributes = {
+    ON: 'on',
+    SELECTED: 'selected',
+    DEFAULT_ON: 'default-on',
+    VALUE: 'value',
     DENSE: 'dense',
     DISABLED: 'disabled',
-    SELECTED: 'selected',
-    LABEL_POSITION: 'label-position',
-    BUTTON_ARIA_LABEL: 'button-aria-label'
+    REQUIRED: 'required',
+    READONLY: 'readonly',
+    ICON: 'icon',
+    LABEL_POSITION: 'label-position'
+};
+const selectors = {
+    ROOT: '.forge-switch',
+    INPUT: '#input',
+    LABEL: '#label',
+    ICON_ON: '#icon-on',
+    ICON_OFF: '#icon-off',
+    INPUT_SLOT: 'slot[name=input]',
+    STATE_LAYER: 'forge-state-layer',
+    SLOTTED_INPUT: 'input[type=checkbox]'
 };
 const events = {
-    SELECT: `${elementName}-select`
+    CHANGE: `${elementName}-change`
+};
+const state = {
+    ON: 'on',
+    OFF: 'off'
 };
+const forwardedAttributes = [...INPUT_ARIA_ATTRIBUTES];
 export const SWITCH_CONSTANTS = {
     classes,
     selectors,
     attributes,
     elementName,
-    events
+    events,
+    state,
+    forwardedAttributes
 };