@tylertech/forge 3.0.0-next.20 → 3.0.0-next.22

package/esm/stepper/step/step.js

@@ -12,12 +12,67 @@ import { StepFoundation } from './step-foundation';
 import { IconRegistry, IconComponent } from '../../icon';
 import { BaseComponent } from '../../core/base/base-component';
 import { ExpansionPanelComponent } from '../../expansion-panel';
-const template = '<template><div class=\"forge-step__container\" part=\"root\"><button class=\"forge-step\" type=\"button\" part=\"button\"><div class=\"before\" part=\"before\"></div><div class=\"forge-step__icon-container\" part=\"icon-container\"><div class=\"forge-step-icon-content\" part=\"icon-content\"><span class=\"forge-step-index\" part=\"index\"></span><forge-icon class=\"forge-step-icon\" part=\"icon\"></forge-icon></div></div><div class=\"forge-step__text-container\" part=\"text-container\"><div class=\"forge-step__title\" part=\"title-container\"><slot></slot></div><div class=\"forge-step__subtitle\" part=\"subtitle-container\"><slot name=\"optional\"></slot></div></div><div class=\"after\" part=\"after\"></div></button></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)}.forge-step{padding:12px 16px;outline:0;background:0 0;border:none;border-radius:14px;position:relative;display:-webkit-box;display:flex;overflow:hidden;-webkit-box-align:center;align-items:center;z-index:1;--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;cursor:pointer}.forge-step:focus{outline:0}.forge-step::-moz-focus-inner,.forge-step::-moz-focus-outer{padding:0;border:0}.forge-step::after,.forge-step::before{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:\"\"}.forge-step::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)}.forge-step::after{z-index:0;z-index:var(--mdc-ripple-z-index,0)}.forge-step.mdc-ripple-upgraded::before{-webkit-transform:scale(var(--mdc-ripple-fg-scale,1));transform:scale(var(--mdc-ripple-fg-scale,1))}.forge-step.mdc-ripple-upgraded::after{top:0;left:0;-webkit-transform:scale(0);transform:scale(0);-webkit-transform-origin:center center;transform-origin:center center}.forge-step.mdc-ripple-upgraded--unbounded::after{top:var(--mdc-ripple-top,0);left:var(--mdc-ripple-left,0)}.forge-step.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}.forge-step.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))}.forge-step::after,.forge-step::before{top:calc(50% - 100%);left:calc(50% - 100%);width:200%;height:200%}.forge-step.mdc-ripple-upgraded::after{width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.forge-step::after,.forge-step::before{background-color:#000;background-color:var(--mdc-ripple-color,#000)}.forge-step.mdc-ripple-surface--hover::before,.forge-step:hover::before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity, .04)}.forge-step.mdc-ripple-upgraded--background-focused::before,.forge-step:not(.mdc-ripple-upgraded):focus::before{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity, .12)}.forge-step:not(.mdc-ripple-upgraded)::after{-webkit-transition:opacity 150ms linear;transition:opacity 150ms linear}.forge-step:not(.mdc-ripple-upgraded):active::after{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity, .12)}.forge-step.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.12)}.forge-step--selected::before{opacity:.08;opacity:var(--mdc-ripple-selected-opacity, .08)}.forge-step--selected::after,.forge-step--selected::before{background-color:#6200ee;background-color:var(--mdc-ripple-color,var(--mdc-theme-primary,#6200ee))}.forge-step--selected.mdc-ripple-surface--hover::before,.forge-step--selected:hover::before{opacity:.12;opacity:var(--mdc-ripple-hover-opacity, .12)}.forge-step--selected.mdc-ripple-upgraded--background-focused::before,.forge-step--selected:not(.mdc-ripple-upgraded):focus::before{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.2;opacity:var(--mdc-ripple-focus-opacity, .2)}.forge-step--selected:not(.mdc-ripple-upgraded)::after{-webkit-transition:opacity 150ms linear;transition:opacity 150ms linear}.forge-step--selected:not(.mdc-ripple-upgraded):active::after{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.2;opacity:var(--mdc-ripple-press-opacity, .2)}.forge-step--selected.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.2)}.forge-step.forge-step--error.forge-step--selected::before{opacity:.08;opacity:var(--mdc-ripple-selected-opacity, .08)}.forge-step.forge-step--error.forge-step--selected::after,.forge-step.forge-step--error.forge-step--selected::before{background-color:#b00020;background-color:var(--mdc-ripple-color,var(--mdc-theme-error,#b00020))}.forge-step.forge-step--error.forge-step--selected.mdc-ripple-surface--hover::before,.forge-step.forge-step--error.forge-step--selected:hover::before{opacity:.12;opacity:var(--mdc-ripple-hover-opacity, .12)}.forge-step.forge-step--error.forge-step--selected.mdc-ripple-upgraded--background-focused::before,.forge-step.forge-step--error.forge-step--selected:not(.mdc-ripple-upgraded):focus::before{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.2;opacity:var(--mdc-ripple-focus-opacity, .2)}.forge-step.forge-step--error.forge-step--selected:not(.mdc-ripple-upgraded)::after{-webkit-transition:opacity 150ms linear;transition:opacity 150ms linear}.forge-step.forge-step--error.forge-step--selected:not(.mdc-ripple-upgraded):active::after{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.2;opacity:var(--mdc-ripple-press-opacity, .2)}.forge-step.forge-step--error.forge-step--selected.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.2)}.forge-step--selected{color:#6200ee;color:var(--mdc-theme-primary,#6200ee)}.forge-step--disabled::after,.forge-step--disabled::before{background-color:transparent}.forge-step__container{display:contents}.forge-step__expansion-panel{display:none}.forge-step__expanded-icon{color:#757575;color:var(--forge-theme-icon-color,#757575);display:none;margin-left:auto}.forge-step__title{color:rgba(0,0,0,.87);color:var(--mdc-theme-text-primary-on-background,rgba(0,0,0,.87));-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-body2-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:.875rem;font-size:var(--mdc-typography-body2-font-size, .875rem);line-height:1.25rem;line-height:var(--mdc-typography-body2-line-height, 1.25rem);font-weight:400;font-weight:var(--mdc-typography-body2-font-weight,400);letter-spacing:.0178571429em;letter-spacing:var(--mdc-typography-body2-letter-spacing, .0178571429em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-body2-text-decoration,inherit);text-decoration:var(--mdc-typography-body2-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-body2-text-transform,inherit);text-align:left;overflow:hidden;text-overflow:ellipsis}.forge-step__subtitle{text-align:left;overflow:hidden;text-overflow:ellipsis}.forge-step__subtitle ::slotted(*){color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-background,rgba(0,0,0,.54));-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-caption-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:.75rem;font-size:var(--mdc-typography-caption-font-size, .75rem);line-height:1.25rem;line-height:var(--mdc-typography-caption-line-height, 1.25rem);font-weight:400;font-weight:var(--mdc-typography-caption-font-weight,400);letter-spacing:.0333333333em;letter-spacing:var(--mdc-typography-caption-letter-spacing, .0333333333em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-caption-text-decoration,inherit);text-decoration:var(--mdc-typography-caption-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-caption-text-transform,inherit)}.forge-step__icon-container .forge-step-icon-content{border-style:solid;border-width:2px;border-color:transparent;display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;border-radius:50%;height:24px;width:24px;font-size:14px;-webkit-transition:background-color .4s cubic-bezier(.25, .8, .25, 1);transition:background-color .4s cubic-bezier(.25, .8, .25, 1);margin:0 8px 0 0;-webkit-box-flex:0;flex:none}.forge-step__icon-container .forge-step-icon-content forge-icon{font-size:14px}.forge-step:not(.forge-step--disabled) .forge-step-icon-content{color:rgba(0,0,0,.87);color:var(--mdc-theme-text-primary-on-background,rgba(0,0,0,.87))}.forge-step--disabled{cursor:not-allowed;color:rgba(0,0,0,.6);color:var(--forge-theme-form-field-text-disabled-on-background,rgba(0,0,0,.6))}.forge-step--disabled.forge-step .forge-step__icon-container .forge-step-icon-content{color:rgba(0,0,0,.38);color:var(--mdc-theme-text-disabled-on-light,rgba(0,0,0,.38));background-color:#f5f5f5;background-color:var(--forge-theme-form-field-disabled-on-background,#f5f5f5)}.forge-step--disabled .forge-step__text-container .forge-step__title{color:rgba(0,0,0,.6);color:var(--forge-theme-form-field-text-disabled-on-background,rgba(0,0,0,.6))}.forge-step--disabled .forge-step__text-container .forge-step__subtitle ::slotted(*){color:rgba(0,0,0,.6);color:var(--forge-theme-form-field-text-disabled-on-background,rgba(0,0,0,.6))}.forge-step--alternative{-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column}.forge-step--alternative .forge-step__icon-container .forge-step-icon-content{margin:0}.forge-step--alternative .forge-step__text-container{margin-top:8px;place-items:center}.forge-step:not(.forge-step--selected):not(.forge-step--disabled).forge-step--editable:not(.forge-step--completed):not(.forge-step--error) .forge-step-icon-content,.forge-step:not(.forge-step--selected):not(.forge-step--disabled):not(.forge-step--editable):not(.forge-step--completed):not(.forge-step--error) .forge-step-icon-content{border-color:#6200ee;border-color:var(--mdc-theme-primary,#6200ee)}.forge-step:not(.forge-step--selected):not(.forge-step--disabled).forge-step--editable:not(.forge-step--completed):not(.forge-step--error) .forge-step-icon-content .forge-step-index,.forge-step:not(.forge-step--selected):not(.forge-step--disabled):not(.forge-step--editable):not(.forge-step--completed):not(.forge-step--error) .forge-step-icon-content .forge-step-index{color:#6200ee;color:var(--mdc-theme-primary,#6200ee)}.forge-step--selected.forge-step--disabled .forge-step-icon-content{color:rgba(0,0,0,.38);color:var(--mdc-theme-text-disabled-on-light,rgba(0,0,0,.38));background-color:#f5f5f5;background-color:var(--forge-theme-form-field-disabled-on-background,#f5f5f5)}.forge-step--selected:not(.forge-step--disabled) .forge-step__icon-container .forge-step-icon-content{background-color:#6200ee;background-color:var(--mdc-theme-primary,#6200ee);color:#fff;color:var(--mdc-theme-on-primary,#fff)}.forge-step--selected:not(.forge-step--disabled) .forge-step__title{color:#6200ee;color:var(--mdc-theme-primary,#6200ee);font-weight:500}.forge-step--selected:not(.forge-step--disabled) .forge-step__subtitle ::slotted(*){color:#6200ee;color:var(--mdc-theme-primary,#6200ee);font-weight:500}.forge-step--error:not(.forge-step--disabled) .forge-step__title{color:#b00020;color:var(--mdc-theme-error,#b00020)}.forge-step--error:not(.forge-step--disabled) .forge-step__subtitle ::slotted(*){color:#b00020;color:var(--mdc-theme-error,#b00020)}.forge-step--error:not(.forge-step--disabled) .forge-step__icon-container .forge-step-icon-content{background-color:#b00020;background-color:var(--mdc-theme-error,#b00020);color:#fff;color:var(--mdc-theme-on-error,#fff)}.forge-step--completed:not(.forge-step--disabled):not(.forge-step--error):not(.forge-step--editable) .forge-step-icon-content{background-color:#6200ee;background-color:var(--mdc-theme-primary,#6200ee);color:#fff;color:var(--mdc-theme-on-primary,#fff)}.forge-step--completed:not(.forge-step--disabled):not(.forge-step--error).forge-step--editable .forge-step-icon-content{background-color:#6200ee;background-color:var(--mdc-theme-primary,#6200ee);color:#fff;color:var(--mdc-theme-on-primary,#fff)}.forge-step--expandable .forge-step__expanded-icon{display:inline-block;-webkit-transition:-webkit-transform .3s ease-in-out;transition:-webkit-transform .3s ease-in-out;transition:transform .3s ease-in-out;transition:transform .3s ease-in-out,-webkit-transform .3s ease-in-out}.forge-step--expandable.forge-step--expanded .forge-step__expanded-icon{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.forge-step--expandable .forge-step__icon-container .forge-step-icon-content{margin:0 16px 0 0}.forge-step__text-container{display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host(:first-child[alternative])::after{align-self:flex-start;top:22px;margin:0}:host(:last-child[alternative])::before{align-self:flex-start;top:22px;margin:0}:host(:not(:first-child):not(:last-child)[alternative])::after,:host(:not(:first-child):not(:last-child)[alternative])::before{align-self:flex-start;top:22px;min-width:7px;margin:0}:host(:not(:last-child)[alternative]) .after{align-self:flex-start;top:22px;position:absolute;width:calc(50% - 18px);left:calc(50% + 18px);height:0;right:0}:host(:not(:last-child)[alternative]) .after::after{content:\"\";-webkit-box-flex:1;flex:1;flex-basis:0.000000001px;position:absolute;right:0;left:0;min-width:0;width:100%;border-top-color:#e0e0e0;border-top-color:var(--forge-theme-border-color,#e0e0e0);border-top-style:solid;border-top-width:1px;border-radius:1px 0 0 1px}:host(:not(:first-child)[alternative]) .before{align-self:flex-start;top:22px;position:absolute;left:0;width:calc(50% - 18px);height:0}:host(:not(:first-child)[alternative]) .before::before{content:\"\";left:0;min-width:0;width:100%;-webkit-box-flex:1;flex:1;flex-basis:0.000000001px;position:absolute;border-top-color:#e0e0e0;border-top-color:var(--forge-theme-border-color,#e0e0e0);border-top-style:solid;border-top-width:1px;border-radius:1px 0 0 1px}:host(:not(:first-child):not(:last-child)):host(:not([vertical]))::after,:host(:not(:first-child):not(:last-child)):host(:not([vertical]))::before{border-top-color:#e0e0e0;border-top-color:var(--forge-theme-border-color,#e0e0e0);content:\"\";position:relative;height:0;min-width:10px;-webkit-box-flex:1;flex:1;flex-basis:0.000000001px;border-top-style:solid;border-top-width:1px;border-radius:1px 0 0 1px;margin:0 -10px}:host(:last-child):host(:not([vertical]))::before{border-top-color:#e0e0e0;border-top-color:var(--forge-theme-border-color,#e0e0e0);content:\"\";position:relative;height:0;min-width:10px;-webkit-box-flex:1;flex:1;flex-basis:0.000000001px;border-top-style:solid;border-top-width:1px;border-radius:1px 0 0 1px;margin:0 -10px 0 0}:host(:not(:last-child)):host(:not([vertical]))::after{border-top-color:#e0e0e0;border-top-color:var(--forge-theme-border-color,#e0e0e0);content:\"\";position:relative;height:0;min-width:10px;-webkit-box-flex:1;flex:1;flex-basis:0.000000001px;border-top-style:solid;border-top-width:1px;border-radius:1px 0 0 1px;margin:0 0 0 -10px}:host(:focus){outline:0}:host([vertical]){-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column}:host([vertical])::after{content:none}:host([vertical])::before{content:none}:host([vertical]) .forge-step{width:100%;border-radius:4px;min-height:52px}:host([vertical]) .forge-step__text-container{white-space:normal}:host([vertical]) .forge-step__icon-container .forge-step-icon-content{margin:0 16px 0 0}:host([vertical][expandable]) .forge-step__expansion-panel{display:block}:host([ignore-user-expansion]) .forge-step__expanded-icon{display:none}forge-expansion-panel::part(root){border-left-style:solid;border-color:#e0e0e0;border-color:var(--forge-theme-border-color,#e0e0e0);border-left-width:1px;border-left-width:var(--forge-step-expansion-panel-border-left-width,1px);margin-left:60px;margin-left:var(--forge-step-expansion-panel-margin-left,60px);margin-top:4px;margin-top:var(--forge-step-expansion-panel-margin-top,4px);margin-bottom:4px;margin-bottom:var(--forge-step-expansion-panel-margin-bottom,4px)}:host(:not(:last-child)[clustered])::after{min-width:25px}:host(:last-child[clustered])::before{min-width:25px}:host(:not(:first-child):not(:last-child)[clustered])::after,:host(:not(:first-child):not(:last-child)[clustered])::before{min-width:25px}:host(:not(:last-child)[safari][alternative])::after{top:24px;margin:0 -5px}:host(:last-child[safari][alternative])::before{top:24px;margin:0 -5px}:host(:not(:first-child):not(:last-child)[safari][alternative])::after,:host(:not(:first-child):not(:last-child)[safari][alternative])::before{top:24px;margin:0 -5px}';
+import { StateLayerComponent } from '../../state-layer';
+import { FocusIndicatorComponent } from '../../focus-indicator';
+const template = '<template><div class=\"container\" part=\"root\"><button class=\"forge-step\" type=\"button\" part=\"button\" id=\"button\"><div class=\"before\" part=\"before\"></div><div class=\"icon-container\" part=\"icon-container\"><div class=\"icon-content\" part=\"icon-content\"><span class=\"index\" part=\"index\"></span><forge-icon class=\"icon\" part=\"icon\"></forge-icon></div></div><div class=\"text-container\" part=\"text-container\"><div class=\"title\" part=\"title-container\"><slot></slot></div><div class=\"subtitle\" part=\"subtitle-container\"><slot name=\"optional\"></slot></div></div><div class=\"after\" part=\"after\"></div><forge-state-layer exportparts=\"surface:state-layer\" target=\"button\"></forge-state-layer><forge-focus-indicator part=\"focus-indicator\" target=\"button\" inward></forge-focus-indicator></button></div></template>';
+const styles = ':host{--_step-primary-color:var(--forge-step-primary-color, var(--forge-theme-primary, #3f51b5));--_step-text-color:var(--forge-step-text-color, var(--forge-theme-on-primary, #ffffff));--_step-border-radius:var(--forge-step-border-radius, var(--forge-shape-extra-large, 16px));--_step-border-radius-vertical:var(--forge-step-border-radius-vertical, var(--forge-shape-medium, 4px));--_step-disabled-text-color:var(--forge-step-disabled-text-color, var(--forge-theme-text-low, rgba(0, 0, 0, 0.38)));--_step-disabled-color:var(--forge-step-disabled-color, var(--forge-theme-surface-container-minimum, whitesmoke));--_step-icon-fill:var(--forge-step-icon-fill, unset);--_step-icon-fill-active:var(--forge-step-icon-fill-active, var(--_step-primary-color));--_step-icon-text-color:var(--forge-step-icon-text-color, var(--forge-theme-primary, #3f51b5));--_step-icon-text-color-active:var(--forge-step-icon-text-color-active, var(--forge-theme-on-primary, #ffffff));--_step-icon-content-size:var(--forge-step-icon-content-size, 24px);--_step-icon-size:var(--forge-step-icon-size, calc(var(--forge-typography-font-size, 1rem) * 0.875));--_step-icon-transition-duration:var(--forge-step-icon-transition-duration, var(--forge-animation-duration-medium4, 400ms));--_step-icon-transition-easing:var(--forge-step-icon-transition-easing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_step-line-color:var(--forge-step-line-color, var(--forge-theme-outline, #e0e0e0));--_step-line-min-width:var(--forge-step-line-min-width, 10px);--_step-line-min-width-clustered:var(--forge-step-line-min-width-clustered, 25px);--_step-label-color:var(--forge-step-label-color, var(--forge-theme-text-high, rgba(0, 0, 0, 0.87)));--_step-sub-label-color:var(--forge-step-sub-label-color, var(--forge-theme-text-medium, rgba(0, 0, 0, 0.6)));--_step-error-color:var(--forge-step-error-color, var(--forge-theme-error, #b00020));--_step-error-text-color:var(--forge-step-error-text-color, var(--forge-theme-on-error, #ffffff));--_step-expansion-panel-border-left-width:var(--forge-step-expansion-panel-border-left-width, 1px);--_step-expansion-panel-margin-bottom:var(--forge-step-expansion-panel-margin-bottom, 4px);--_step-expansion-panel-margin-left:var(--forge-step-expansion-panel-margin-left, 60px);--_step-expansion-panel-margin-top:var(--forge-step-expansion-panel-margin-top, 4px);--_step-expansion-panel-icon-color:var(--forge-step-expansion-panel-icon-color, var(--forge-theme-text-medium, rgba(0, 0, 0, 0.6)))}:host(:focus){outline:0}:host([error]){--forge-state-layer-color:var(--_step-error-color)}:host(:first-child[alternative])::after{align-self:flex-start;top:22px;margin:0}:host(:last-child[alternative])::before{align-self:flex-start;top:22px;margin:0}:host(:not(:first-child):not(:last-child)[alternative])::after,:host(:not(:first-child):not(:last-child)[alternative])::before{align-self:flex-start;top:22px;min-width:7px;margin:0}:host(:not(:last-child)[alternative]) .after{align-self:flex-start;top:22px;position:absolute;width:calc(50% - 18px);left:calc(50% + 18px);height:0;right:0}:host(:not(:last-child)[alternative]) .after::after{content:\"\";-webkit-box-flex:1;flex:1;flex-basis:0.000000001px;position:absolute;right:0;left:0;min-width:0;width:100%;border-color:var(--_step-line-color);border-top-style:solid;border-top-width:1px;border-radius:1px 0 0 1px}:host(:not(:first-child)[alternative]) .before{align-self:flex-start;top:22px;position:absolute;left:0;width:calc(50% - 18px);height:0}:host(:not(:first-child)[alternative]) .before::before{content:\"\";left:0;min-width:0;width:100%;-webkit-box-flex:1;flex:1;flex-basis:0.000000001px;position:absolute;border-color:var(--_step-line-color);border-top-style:solid;border-top-width:1px;border-radius:1px 0 0 1px}:host(:not(:first-child):not(:last-child)):host(:not([vertical]))::after,:host(:not(:first-child):not(:last-child)):host(:not([vertical]))::before{border-color:var(--_step-line-color);min-width:var(--_step-line-min-width);content:\"\";position:relative;height:0;-webkit-box-flex:1;flex:1;flex-basis:0.000000001px;border-top-style:solid;border-top-width:1px;border-radius:1px 0 0 1px;margin:0 -10px}:host(:last-child):host(:not([vertical]))::before{border-color:var(--_step-line-color);min-width:var(--_step-line-min-width);content:\"\";position:relative;height:0;-webkit-box-flex:1;flex:1;flex-basis:0.000000001px;border-top-style:solid;border-top-width:1px;border-radius:1px 0 0 1px;margin:0 -10px 0 0}:host(:is(:first-child)):host(:not([vertical]))::after{border-color:var(--_step-line-color);min-width:var(--_step-line-min-width);content:\"\";position:relative;height:0;-webkit-box-flex:1;flex:1;flex-basis:0.000000001px;border-top-style:solid;border-top-width:1px;border-radius:1px 0 0 1px;margin:0 -10px}:host([vertical]){-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column}:host([vertical])::after{content:none}:host([vertical])::before{content:none}:host([vertical]) .forge-step{--_step-border-radius:var(--_step-border-radius-vertical);width:100%;min-height:52px}:host([vertical]) .forge-step .text-container{white-space:normal}:host([vertical]) .icon-container .icon-content{margin:0 16px 0 0}:host([vertical]) .expansion-panel{display:none}:host([vertical]) .expanded-icon{color:var(--_step-expansion-panel-icon-color);display:none;margin-left:auto}:host([vertical][expandable]) .expansion-panel{display:block}:host([ignore-user-expansion]) .forge-step .expanded-icon{display:none}forge-expansion-panel::part(root){border-color:var(--_step-line-color);margin-left:var(--_step-expansion-panel-margin-left);margin-top:var(--_step-expansion-panel-margin-top);margin-bottom:var(--_step-expansion-panel-margin-bottom);border-left-width:var(--_step-expansion-panel-border-left-width);border-left-style:solid}forge-focus-indicator{--forge-focus-indicator-color:var(--_step-primary-color);--forge-focus-indicator-shape:16px}.container{display:contents}.forge-step{-webkit-tap-highlight-color:transparent;padding:12px 16px;outline:0;background:0 0;border:none;border-radius:var(--_step-border-radius);position:relative;display:-webkit-box;display:flex;overflow:hidden;-webkit-box-align:center;align-items:center;z-index:1;cursor:pointer}.forge-step:focus{outline:0}.forge-step::-moz-focus-inner,.forge-step::-moz-focus-outer{padding:0;border:0}.forge-step.error forge-focus-indicator{--forge-focus-indicator-color:var(--_step-error-color)}.forge-step.vertical forge-focus-indicator{--forge-focus-indicator-shape:4px}.forge-step.selected:not(.disabled){--forge-state-layer-color:var(--_step-primary-color)}.forge-step.selected:not(.disabled)::before{background-color:var(--_step-primary-color);content:\"\";position:absolute;inset:0;opacity:.08;height:100%;width:100%}.forge-step.selected:not(.disabled).error{--_step-primary-color:var(--_step-error-color)}.forge-step .title{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-body1-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-body1-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-font-size-scale, .875)));font-weight:var(--forge-typography-body1-font-weight,400);line-height:var(--forge-typography-body1-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-line-height-scale, 1.125)));letter-spacing:var(--forge-typography-body1-letter-spacing, .0357142857em);text-transform:var(--forge-typography-body1-text-transform,inherit);-webkit-text-decoration:var(--forge-typography-body1-text-decoration,inherit);text-decoration:var(--forge-typography-body1-text-decoration,inherit);color:var(--_step-label-color);text-align:left;overflow:hidden;text-overflow:ellipsis}.forge-step .subtitle{text-align:left;overflow:hidden;text-overflow:ellipsis}.forge-step .subtitle ::slotted(*){color:var(--_step-sub-label-color);-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-label1-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-label1-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-font-size-scale, .75)));font-weight:var(--forge-typography-label1-font-weight,400);line-height:var(--forge-typography-label1-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-line-height-scale, 1.25)));letter-spacing:var(--forge-typography-label1-letter-spacing, .0357142857em);text-transform:var(--forge-typography-label1-text-transform,inherit);-webkit-text-decoration:var(--forge-typography-label1-text-decoration,inherit);text-decoration:var(--forge-typography-label1-text-decoration,inherit)}.forge-step .icon-container .icon-content{color:var(--_step-icon-text-color);background-color:var(--_step-icon-fill);height:var(--_step-icon-content-size);width:var(--_step-icon-content-size);border-style:solid;border-width:2px;border-color:transparent;border-radius:50%;display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;-webkit-transition:background-color var(--_step-icon-transition-duration) var(--_step-icon-transition-easing);transition:background-color var(--_step-icon-transition-duration) var(--_step-icon-transition-easing);margin:0 8px 0 0;-webkit-box-flex:0;flex:none}.forge-step .icon-container .icon-content forge-icon{font-size:var(--_step-icon-size)}.forge-step.disabled{color:var(--_step-disabled-text-color);cursor:not-allowed}.forge-step.disabled.forge-step .icon-container .icon-content{--_step-icon-fill:var(--_step-disabled-color);--_step-icon-text-color:var(--_step-disabled-text-color)}.forge-step.disabled .text-container .title{color:var(--_step-disabled-text-color)}.forge-step.disabled .text-container .subtitle ::slotted(*){color:var(--_step-disabled-text-color)}.forge-step.alternative{-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column}.forge-step.alternative .icon-container .icon-content{margin:0}.forge-step.alternative .text-container{margin-top:8px;place-items:center}.forge-step:not(.selected):not(.disabled).editable:not(.completed):not(.error) .icon-content,.forge-step:not(.selected):not(.disabled):not(.editable):not(.completed):not(.error) .icon-content{border-color:var(--_step-primary-color)}.forge-step:not(.selected):not(.disabled).editable:not(.completed):not(.error) .icon-content .index,.forge-step:not(.selected):not(.disabled):not(.editable):not(.completed):not(.error) .icon-content .index{color:var(--_step-primary-color)}.forge-step.selected.disabled .icon-content{--_step-icon-fill:var(--_step-disabled-color);--_step-icon-text-color:var(--_step-disabled-text-color)}.forge-step.selected:not(.disabled) .icon-container .icon-content{--_step-icon-fill:var(--_step-icon-fill-active);--_step-icon-text-color:var(--_step-icon-text-color-active)}.forge-step.selected:not(.disabled) .title{color:var(--_step-primary-color);font-weight:500}.forge-step.selected:not(.disabled) .subtitle ::slotted(*){color:var(--_step-primary-color);font-weight:500}.forge-step.error:not(.disabled) .title{color:var(--_step-error-color)}.forge-step.error:not(.disabled) .subtitle ::slotted(*){color:var(--_step-error-color)}.forge-step.error:not(.disabled) .icon-container .icon-content{--_step-icon-fill:var(--_step-error-color);--_step-icon-text-color:var(--_step-error-text-color)}.forge-step.completed:not(.disabled):not(.error):not(.editable) .icon-content{--_step-icon-fill:var(--_step-icon-fill-active);--_step-icon-text-color:var(--_step-icon-text-color-active)}.forge-step.completed:not(.disabled):not(.error).editable .icon-content{--_step-icon-fill:var(--_step-icon-fill-active);--_step-icon-text-color:var(--_step-icon-text-color-active)}.forge-step.expandable .expanded-icon{display:inline-block;-webkit-transition:-webkit-transform .3s ease-in-out;transition:-webkit-transform .3s ease-in-out;transition:transform .3s ease-in-out;transition:transform .3s ease-in-out,-webkit-transform .3s ease-in-out}.forge-step.expandable.expanded .expanded-icon{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.forge-step.expandable .icon-container .icon-content{margin:0 16px 0 0}.forge-step .text-container{display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host(:not(:last-child)[clustered])::after{--_step-line-min-width:var(--_step-line-min-width-clustered)}:host(:last-child[clustered])::before{--_step-line-min-width:var(--_step-line-min-width-clustered)}:host(:not(:first-child):not(:last-child)[clustered])::after,:host(:not(:first-child):not(:last-child)[clustered])::before{--_step-line-min-width:var(--_step-line-min-width-clustered)}';
 /**
  * The web component class behind the `<forge-step>` custom element.
  *
  * @tag forge-step
+ *
+ * @property {boolean} alternate - Whether the step is in the alternate style.
+ * @property {boolean} completed - Whether the step is completed.
+ * @property {boolean} editable - Whether the step is editable.
+ * @property {boolean} error - Whether the step has an error.
+ * @property {boolean} selected - Whether the step is selected.
+ * @property {boolean} disabled - Whether the step is disabled.
+ * @property {boolean} vertical - Whether the step is in vertical mode.
+ * @property {boolean} expanded - Whether the step is expanded.
+ * @property {boolean} ignoreUserExpansion - Whether the step should ignore user expansion.
+ * @property {number} index - The index of the step.
+ *
+ * @attribute {boolean} selected - Whether the step is selected.
+ * @attribute {number} index - The index of the step.
+ * @attribute {boolean} editable - Whether the step is editable.
+ * @attribute {boolean} completed - Whether the step is completed.
+ * @attribute {boolean} error - Whether the step has an error.
+ * @attribute {boolean} alternative - Whether the step is in alternative mode.
+ * @attribute {boolean} disabled - Whether the step is disabled.
+ * @attribute {boolean} vertical - Whether the step is in vertical mode.
+ * @attribute {boolean} expanded - Whether the step is expanded.
+ * @attribute {boolean} ignore-user-expansion - Whether the step should ignore user expansion.
+ *
+ * @cssproperty --forge-step-primary-color - The primary color of the step. Defaults to the primary theme.
+ * @cssproperty --forge-step-text-color - The text color of the step. Defaults to the on-primary theme.
+ * @cssproperty --forge-step-border-radius - The border radius of the step. Defaults to the extra-large shape.
+ * @cssproperty --forge-step-border-radius-vertical - The border radius of the step in vertical mode. Defaults to the medium shape.
+ * @cssproperty --forge-step-disabled-text-color - The text color of the step when disabled. Defaults to the text-low theme.
+ * @cssproperty --forge-step-disabled-color - The color of the step when disabled. Defaults to the surface-container-minimum theme.
+ * @cssproperty --forge-step-icon-fill - The fill color of the step icon. Defaults to unset.
+ * @cssproperty --forge-step-icon-fill-active - The fill color of the step icon when active. Defaults to the primary color.
+ * @cssproperty --forge-step-icon-text-color - The text color of the step icon. Defaults to the primary theme.
+ * @cssproperty --forge-step-icon-text-color-active - The text color of the step icon when active. Defaults to the on-primary theme.
+ * @cssproperty --forge-step-icon-content-size - The size of the step icon content. Defaults to 24px.
+ * @cssproperty --forge-step-icon-size - The size of the step icon. Defaults to 0.875em.
+ * @cssproperty --forge-step-icon-transition-duration - The duration of the step icon transition. Defaults to the medium4 animation duration.
+ * @cssproperty --forge-step-icon-transition-easing - The easing of the step icon transition. Defaults to the standard animation easing.
+ * @cssproperty --forge-step-line-color - The color of the step line. Defaults to the outline theme.
+ * @cssproperty --forge-step-line-min-width - The minimum width of the step line. Defaults to 10px.
+ * @cssproperty --forge-step-line-min-width-clustered - The minimum width of the step line when clustered. Defaults to 25px.
+ * @cssproperty --forge-step-label-color - The color of the step label. Defaults to the text-high theme.
+ * @cssproperty --forge-step-sub-label-color - The color of the step sub-label. Defaults to the text-medium theme.
+ * @cssproperty --forge-step-error-color - The color of the step error. Defaults to the error theme.
+ * @cssproperty --forge-step-error-text-color - The text color of the step error. Defaults to the on-error theme.
+ * @cssproperty --forge-step-expansion-panel-border-left-width - The border left width of the step expansion panel. Defaults to 1px.
+ * @cssproperty --forge-step-expansion-panel-margin-bottom - The margin bottom of the step expansion panel. Defaults to 4px.
+ * @cssproperty --forge-step-expansion-panel-margin-left - The margin left of the step expansion panel. Defaults to 60px.
+ * @cssproperty --forge-step-expansion-panel-margin-top - The margin top of the step expansion panel. Defaults to 4px.
+ * @cssproperty --forge-step-expansion-panel-icon-color - The color of the step expansion panel icon. Defaults to the text-medium theme.
+ *
+ * @slot - The content of the step.
+ * @slot optional - The optional content of the step.
+ * @slot expansion-content - The content of the step expansion.
  */
 let StepComponent = class StepComponent extends BaseComponent {
     static get observedAttributes() {
@@ -128,7 +183,9 @@ StepComponent = __decorate([
         name: STEP_CONSTANTS.elementName,
         dependencies: [
             IconComponent,
-            ExpansionPanelComponent
+            ExpansionPanelComponent,
+            StateLayerComponent,
+            FocusIndicatorComponent
         ]
     })
 ], StepComponent);

package/esm/stepper/stepper/stepper-constants.js

@@ -7,15 +7,15 @@ import { COMPONENT_NAME_PREFIX } from '../../constants';
 const elementName = `${COMPONENT_NAME_PREFIX}stepper`;
 const classes = {
     STEPPER: 'forge-stepper',
-    LINEAR: 'forge-stepper--linear',
-    ALTERNATIVE: 'forge-stepper--alternative',
-    CLUSTERED: 'forge-stepper--clustered',
-    FIXED: 'forge-stepper--fixed',
-    ALIGN_LEFT: 'forge-stepper--align-left',
-    ALIGN_CENTER: 'forge-stepper--align-center',
-    ALIGN_RIGHT: 'forge-stepper--align-right',
-    VERTICAL: 'forge-stepper--vertical',
-    FOCUSED: 'forge-stepper--focused'
+    LINEAR: 'linear',
+    ALTERNATIVE: 'alternative',
+    CLUSTERED: 'clustered',
+    FIXED: 'fixed',
+    ALIGN_LEFT: 'align-left',
+    ALIGN_CENTER: 'align-center',
+    ALIGN_RIGHT: 'align-right',
+    VERTICAL: 'vertical',
+    FOCUSED: 'focused'
 };
 const selectors = {
     STEPPER: `.${classes.STEPPER}`

package/esm/stepper/stepper/stepper.js

@@ -11,7 +11,7 @@ import { StepperAdapter } from './stepper-adapter';
 import { STEPPER_CONSTANTS } from './stepper-constants';
 import { StepperFoundation } from './stepper-foundation';
 const template = '<template><div class=\"forge-stepper\" part=\"root\"><slot></slot></div></template>';
-const styles = '.forge-stepper{display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;white-space:nowrap;overflow:hidden}.forge-stepper:not(.forge-stepper--vertical) ::slotted(*){display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;position:relative;min-width:112px}.forge-stepper--fixed ::slotted(*){-webkit-box-flex:1;flex:1}.forge-stepper--alternative{-webkit-box-align:start;align-items:flex-start}.forge-stepper--alternative ::slotted(*){min-width:160px}.forge-stepper--align-left{-webkit-box-pack:start;justify-content:flex-start}.forge-stepper--align-center{-webkit-box-pack:center;justify-content:center}.forge-stepper--align-right{-webkit-box-pack:end;justify-content:flex-end}:host{display:block}:host([hidden]){display:none}:host([vertical]) .forge-stepper{display:unset;-webkit-box-align:unset;align-items:unset;white-space:unset;overflow:unset}';
+const styles = ':host{display:block}:host([hidden]){display:none}:host([vertical]) .forge-stepper{display:unset;-webkit-box-align:unset;align-items:unset;white-space:unset;overflow:unset}.forge-stepper{display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;white-space:nowrap;overflow:hidden}.forge-stepper:not(.vertical) ::slotted(*){display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;position:relative;min-width:112px}.forge-stepper.fixed ::slotted(*){-webkit-box-flex:1;flex:1}.forge-stepper.alternative{-webkit-box-align:start;align-items:flex-start}.forge-stepper.alternative ::slotted(*){min-width:160px}.forge-stepper.align-left{-webkit-box-pack:start;justify-content:flex-start}.forge-stepper.align-center{-webkit-box-pack:center;justify-content:center}.forge-stepper.align-right{-webkit-box-pack:end;justify-content:flex-end}';
 /**
  * The web component class behind the `<forge-stepper>` custom element.
  *

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

@@ -7,58 +7,26 @@ 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

@@ -3,55 +3,34 @@
  * 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 { getShadowElement, toggleClass } from '@tylertech/forge-core';
+import { isFocusable, setDefaultAria, setValidity } from '../constants';
+import { BaseAdapter } 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;
+        this._component[setValidity]();
+        this._component[setDefaultAria]({ ariaChecked: value ? 'true' : 'false' });
     }
     setDisabled(value) {
-        this._activeInputElement.disabled = value;
+        this._component[isFocusable] = !value;
+        this._component[setDefaultAria]({ ariaDisabled: value ? 'true' : 'false' });
         this._stateLayerElement.disabled = value;
     }
     setRequired(value) {
-        this._activeInputElement.required = value;
+        this._component[setValidity]();
+        this._component[setDefaultAria]({ ariaRequired: value ? 'true' : 'false' });
     }
     setReadonly(value) {
-        this._activeInputElement.readOnly = value;
-        toggleAttribute(this._activeInputElement, value, 'aria-readonly', value.toString());
+        this._component[setDefaultAria]({ ariaReadOnly: value ? 'true' : 'false' });
         this._stateLayerElement.disabled = value;
     }
     setIconVisibility(value) {
@@ -69,83 +48,12 @@ export class SwitchAdapter extends BaseAdapter {
             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('');
+        const data = value ? new FormData() : null;
+        const state = value ? SWITCH_CONSTANTS.state.ON : SWITCH_CONSTANTS.state.OFF;
+        if (data && value) {
+            data.append(this._component.name, value);
         }
-        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();
-        });
+        this._component.setFormValue(data, state);
     }
 }

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

@@ -76,7 +76,7 @@ export class SwitchComponentDelegate extends FormFieldComponentDelegate {
         this._element.labelPosition = value;
     }
     onChange(listener) {
-        this._element.addEventListener('forge-switch-change', ({ detail }) => listener(detail));
+        this._element.addEventListener(SWITCH_CONSTANTS.events.CHANGE, ({ detail }) => listener(detail));
     }
     onFocus(listener) {
         this._element.addEventListener('focus', evt => listener(evt));

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

@@ -4,19 +4,6 @@
  * License: Apache-2.0
  */
 export declare const SWITCH_CONSTANTS: {
-    classes: {
-        HIDDEN: string;
-    };
-    selectors: {
-        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;
@@ -28,6 +15,30 @@ export declare const SWITCH_CONSTANTS: {
         READONLY: string;
         ICON: string;
         LABEL_POSITION: string;
+        TABINDEX: string;
+    };
+    observedAttributes: {
+        ON: string;
+        SELECTED: string;
+        DEFAULT_ON: string;
+        VALUE: string;
+        DENSE: string;
+        DISABLED: string;
+        REQUIRED: string;
+        READONLY: string;
+        ICON: string;
+        LABEL_POSITION: string;
+        TABINDEX: string;
+    };
+    classes: {
+        HIDDEN: string;
+    };
+    selectors: {
+        ROOT: string;
+        LABEL: string;
+        ICON_ON: string;
+        ICON_OFF: string;
+        STATE_LAYER: string;
     };
     elementName: "forge-switch";
     events: {
@@ -37,7 +48,6 @@ export declare const SWITCH_CONSTANTS: {
         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,12 +4,8 @@
  * License: Apache-2.0
  */
 import { COMPONENT_NAME_PREFIX } from '../constants';
-import { INPUT_ARIA_ATTRIBUTES } from '../core';
 const elementName = `${COMPONENT_NAME_PREFIX}switch`;
-const classes = {
-    HIDDEN: 'hidden'
-};
-const attributes = {
+const observedAttributes = {
     ON: 'on',
     SELECTED: 'selected',
     DEFAULT_ON: 'default-on',
@@ -19,17 +15,19 @@ const attributes = {
     REQUIRED: 'required',
     READONLY: 'readonly',
     ICON: 'icon',
-    LABEL_POSITION: 'label-position'
+    LABEL_POSITION: 'label-position',
+    TABINDEX: 'tabindex'
+};
+const attributes = Object.assign({}, observedAttributes);
+const classes = {
+    HIDDEN: 'hidden'
 };
 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]'
+    STATE_LAYER: 'forge-state-layer'
 };
 const events = {
     CHANGE: `${elementName}-change`
@@ -38,13 +36,12 @@ const state = {
     ON: 'on',
     OFF: 'off'
 };
-const forwardedAttributes = [...INPUT_ARIA_ATTRIBUTES];
 export const SWITCH_CONSTANTS = {
+    attributes,
+    observedAttributes,
     classes,
     selectors,
-    attributes,
     elementName,
     events,
-    state,
-    forwardedAttributes
+    state
 };

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

@@ -16,10 +16,6 @@ export interface ISwitchFoundation extends ICustomElementFoundation {
     readonly: boolean;
     icon: SwitchIconVisibility;
     labelPosition: SwitchLabelPosition;
-    proxyClick(): void;
-    proxyLabel(value: string | null): void;
-    syncValidity(hasCustomValidityError: boolean): void;
-    setValidity(flags?: ValidityStateFlags | undefined, message?: string | undefined): void;
 }
 export declare class SwitchFoundation implements ISwitchFoundation {
     private readonly _adapter;
@@ -33,16 +29,14 @@ export declare class SwitchFoundation implements ISwitchFoundation {
     private _icon;
     private _labelPosition;
     private get _submittedValue();
-    private readonly _changeListener;
-    private readonly _inputSlotListener;
+    private readonly _clickListener;
+    private readonly _keydownListener;
+    private readonly _keyupListener;
     constructor(_adapter: ISwitchAdapter);
     initialize(): void;
-    proxyClick(): void;
-    proxyLabel(value: string | null): void;
-    syncValidity(hasCustomValidityError: boolean): void;
-    setValidity(flags?: ValidityStateFlags | undefined, message?: string | undefined): void;
+    private _handleKeydown;
+    private _handleKeyup;
     private _handleChange;
-    private _handleInputSlotChange;
     private _setOnAttribute;
     get on(): boolean;
     set on(value: boolean);