@tylertech/forge 2.24.1 → 2.24.3

package/esm/stepper/step/step-adapter.d.ts

@@ -6,18 +6,15 @@
 import { BaseAdapter, IBaseAdapter } from '../../core/base';
 import { IStepComponent } from './step';
 import { StepIcons } from './step-constants';
-import { ForgeRipple, ForgeRippleCapableSurface } from '../../ripple';
+import { ForgeRipple } from '../../ripple';
 export interface IStepAdapter extends IBaseAdapter {
     component: IStepComponent;
     toggleDisabled(disabled: boolean): void;
-    focusButton(): void;
     attachRipple: () => void;
     detatchRipple: () => void;
     setIndex(value: number): void;
     initialize(): void;
     toggleRootClass(className: string, on: boolean): void;
-    setRootAttribute(attribute: string, value: string): void;
-    setRootTabIndex(value: number): void;
     toggleIcon(name: StepIcons, show: boolean): void;
     setClickListener(listener: (evt: MouseEvent) => void): void;
     removeClickListener(listener: (evt: MouseEvent) => void): void;
@@ -34,26 +31,21 @@ export interface IStepAdapter extends IBaseAdapter {
     removeExpansionPanelListener(event: string, listener: EventListener): void;
     isExpandedContentInFocus(checkElement?: HTMLElement): boolean;
 }
-export declare class StepAdapter extends BaseAdapter<IStepComponent> implements IStepAdapter, ForgeRippleCapableSurface {
-    private _buttonElement;
+export declare class StepAdapter extends BaseAdapter<IStepComponent> implements IStepAdapter {
+    private _rootElement;
+    private _rippleElement;
     private _container;
     private _rippleInstance;
     private _expansionSlot;
     private _expansionPanel;
     constructor(_component: IStepComponent);
-    get root(): HTMLElement;
-    unbounded: boolean;
-    get disabled(): boolean;
     get component(): IStepComponent;
-    setRootTabIndex(value: number): void;
     initialize(): void;
     attachRipple(): void;
     detatchRipple(): void;
     initializeRipple(): ForgeRipple;
     setIndex(value: number): void;
     toggleRootClass(className: string, on: boolean): void;
-    setRootAttribute(attribute: string, value: string): void;
-    focusButton(): void;
     toggleDisabled(disabled: boolean): void;
     toggleIcon(name: StepIcons, show: boolean): void;
     slotHasContent(): boolean;

package/esm/stepper/step/step-adapter.js

@@ -7,26 +7,30 @@ import { addClass, getShadowElement, toggleAttribute, toggleClass } from '@tyler
 import { BaseAdapter } from '../../core/base';
 import { STEP_CONSTANTS } from './step-constants';
 import { ForgeRipple, ForgeRippleFoundation } from '../../ripple';
-export class StepAdapter extends BaseAdapter {
-    constructor(_component) {
-        super(_component);
-        this.unbounded = false;
-        this._buttonElement = getShadowElement(_component, STEP_CONSTANTS.selectors.STEP);
-        this._container = getShadowElement(_component, STEP_CONSTANTS.selectors.STEP_CONTAINER);
+class StepRippleSurface {
+    constructor(_root) {
+        this._root = _root;
     }
-    // ForgeRippleCapableSurface
     get root() {
-        return this._buttonElement;
+        return this._root;
+    }
+    get unbounded() {
+        return false;
     }
     get disabled() {
-        return this._buttonElement.disabled;
+        return this._root.disabled;
+    }
+}
+export class StepAdapter extends BaseAdapter {
+    constructor(_component) {
+        super(_component);
+        this._rootElement = getShadowElement(_component, STEP_CONSTANTS.selectors.STEP);
+        this._rippleElement = getShadowElement(_component, STEP_CONSTANTS.selectors.STEP_RIPPLE);
+        this._container = getShadowElement(_component, STEP_CONSTANTS.selectors.STEP_CONTAINER);
     }
     get component() {
         return this._component;
     }
-    setRootTabIndex(value) {
-        this._buttonElement.tabIndex = value;
-    }
     initialize() {
         this._component.setAttribute('role', 'tab');
     }
@@ -42,25 +46,18 @@ export class StepAdapter extends BaseAdapter {
         return this._createRipple();
     }
     setIndex(value) {
-        this._buttonElement.querySelector(STEP_CONSTANTS.selectors.INDEX).innerHTML = (value + 1 || '').toString();
+        this._rootElement.querySelector(STEP_CONSTANTS.selectors.INDEX).innerHTML = (value + 1 || '').toString();
     }
     toggleRootClass(className, on) {
-        toggleClass(this._buttonElement, on, className);
-    }
-    setRootAttribute(attribute, value) {
-        this._buttonElement.setAttribute(attribute, value);
-    }
-    focusButton() {
-        this._buttonElement.focus();
+        toggleClass(this._rootElement, on, className);
     }
     toggleDisabled(disabled) {
-        toggleClass(this._buttonElement, disabled, STEP_CONSTANTS.classes.DISABLED);
-        toggleAttribute(this._buttonElement, disabled, 'aria-disabled');
-        this._buttonElement.disabled = disabled;
+        toggleClass(this._rootElement, disabled, STEP_CONSTANTS.classes.DISABLED);
+        toggleAttribute(this._component, disabled, 'aria-disabled');
     }
     toggleIcon(name, show) {
-        const index = this._buttonElement.querySelector(STEP_CONSTANTS.selectors.INDEX);
-        const icon = this._buttonElement.querySelector(STEP_CONSTANTS.selectors.ICON);
+        const index = this._rootElement.querySelector(STEP_CONSTANTS.selectors.INDEX);
+        const icon = this._rootElement.querySelector(STEP_CONSTANTS.selectors.ICON);
         if (!show) {
             index.style.display = 'inherit';
             icon.style.display = 'none';
@@ -74,10 +71,10 @@ export class StepAdapter extends BaseAdapter {
         return this._expansionSlot.assignedElements({ flatten: true }).length > 0;
     }
     setClickListener(listener) {
-        this._buttonElement.addEventListener('click', listener);
+        this._component.addEventListener('click', listener);
     }
     removeClickListener(listener) {
-        this._buttonElement.removeEventListener('click', listener);
+        this._component.removeEventListener('click', listener);
     }
     setSlotListener(listener) {
         this._expansionSlot.addEventListener('slotchange', listener);
@@ -92,7 +89,7 @@ export class StepAdapter extends BaseAdapter {
             this._expansionPanel.open = expanded;
             toggleAttribute(this._expansionPanel, !expanded, 'tabindex', '-1');
         }
-        toggleClass(this._buttonElement, expanded, STEP_CONSTANTS.classes.EXPANDED);
+        toggleClass(this._rootElement, expanded, STEP_CONSTANTS.classes.EXPANDED);
     }
     setExpansionPanelAnimations(animate) {
         this._expansionPanel.useAnimations = animate;
@@ -112,16 +109,16 @@ export class StepAdapter extends BaseAdapter {
         }
     }
     addExpansionIcon() {
-        const icon = this._buttonElement.querySelector(STEP_CONSTANTS.selectors.EXPANSION_ICON);
+        const icon = this._rootElement.querySelector(STEP_CONSTANTS.selectors.EXPANSION_ICON);
         if (icon) {
             return;
         }
-        this._buttonElement.appendChild(this._createExpansionIcon());
+        this._rootElement.appendChild(this._createExpansionIcon());
     }
     removeExpansionIcon() {
-        const icon = this._buttonElement.querySelector(STEP_CONSTANTS.selectors.EXPANSION_ICON);
+        const icon = this._rootElement.querySelector(STEP_CONSTANTS.selectors.EXPANSION_ICON);
         if (icon) {
-            this._buttonElement.removeChild(icon);
+            this._rootElement.removeChild(icon);
         }
     }
     addExpansionPanelListener(event, listener) {
@@ -136,9 +133,11 @@ export class StepAdapter extends BaseAdapter {
         return this._expansionSlot.assignedElements().some(element => element.contains(checkElement || document.activeElement));
     }
     _createRipple() {
-        const adapter = Object.assign(Object.assign({}, ForgeRipple.createAdapter(this)), { isSurfaceDisabled: () => this._buttonElement.disabled });
-        const ripple = new ForgeRipple(this._buttonElement, new ForgeRippleFoundation(adapter));
-        return ripple;
+        const rippleCapableSurface = new StepRippleSurface(this._component);
+        const rippleAdapter = Object.assign(Object.assign({}, ForgeRipple.createAdapter(rippleCapableSurface)), { addClass: (className) => this._rippleElement.classList.add(className), removeClass: (className) => this._rippleElement.classList.remove(className), updateCssVariable: (varName, value) => this._rippleElement.style.setProperty(varName, value) });
+        const rippleFoundation = new ForgeRippleFoundation(rippleAdapter);
+        this._rippleInstance = new ForgeRipple(this._component, rippleFoundation);
+        return this._rippleInstance;
     }
     _createExpansionPanel() {
         const panel = document.createElement('forge-expansion-panel');

package/esm/stepper/step/step-constants.d.ts

@@ -38,6 +38,7 @@ export declare const STEP_CONSTANTS: {
         EXPANSION_SLOT: string;
         EXPANSION_PANEL: string;
         EXPANSION_ICON: string;
+        STEP_RIPPLE: string;
     };
     attributes: {
         SELECTED: string;

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

@@ -54,7 +54,8 @@ const selectors = {
     ICON_CONTENT: `.${classes.ICON_CONTENT}`,
     EXPANSION_SLOT: `slot[name="expansion-content"]`,
     EXPANSION_PANEL: `.${classes.EXPANSION_PANEL}`,
-    EXPANSION_ICON: `.${classes.EXPANSION_ICON}`
+    EXPANSION_ICON: `.${classes.EXPANSION_ICON}`,
+    STEP_RIPPLE: `.forge-step__ripple`
 };
 const strings = {
     ARROW_LEFT_KEY: 'ArrowLeft',

package/esm/stepper/step/step-foundation.d.ts

@@ -13,7 +13,6 @@ export interface IStepFoundation extends ICustomElementFoundation {
     selected: boolean;
     alternative: boolean;
     vertical: boolean;
-    setStepTabIndex(index: number): void;
 }
 export declare class StepFoundation implements IStepFoundation {
     private _adapter;
@@ -57,10 +56,8 @@ export declare class StepFoundation implements IStepFoundation {
     set expanded(value: boolean);
     get ignoreUserExpansion(): boolean;
     set ignoreUserExpansion(value: boolean);
-    setStepTabIndex(index: number): void;
     private _applyExpanded;
     private _applyVertical;
-    focus(): void;
     private _applyAlternative;
     private _applySelected;
     private _applyIndex;

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

@@ -144,9 +144,6 @@ export class StepFoundation {
             this._ignoreUserExpansion = value;
         }
     }
-    setStepTabIndex(index) {
-        this._adapter.setRootTabIndex(index);
-    }
     _applyExpanded() {
         this._adapter.setExpanded(this._expanded);
     }
@@ -154,16 +151,13 @@ export class StepFoundation {
         this._adapter.toggleHostAttribute(STEP_CONSTANTS.attributes.VERTICAL, this._vertical);
         this._adapter.toggleRootClass(STEP_CONSTANTS.classes.VERTICAL, this._vertical);
     }
-    focus() {
-        this._adapter.focusButton();
-    }
     _applyAlternative() {
         this._adapter.toggleRootClass(STEP_CONSTANTS.classes.ALTERNATIVE, this._alternative);
     }
     _applySelected() {
         this._adapter.toggleRootClass(STEP_CONSTANTS.classes.SELECTED, this._selected);
         this._adapter.setHostAttribute(STEP_CONSTANTS.attributes.ARIA_SELECTED, (this._selected || false).toString());
-        this._adapter.setRootTabIndex(this._selected ? 0 : -1);
+        this._adapter.hostElement.tabIndex = this._selected ? 0 : -1;
         this._toggleIcon();
     }
     _applyIndex() {

package/esm/stepper/step/step.d.ts

@@ -15,7 +15,6 @@ export interface IStepComponent extends IBaseComponent {
     vertical: boolean;
     expanded: boolean;
     ignoreUserExpansion: boolean;
-    setStepTabIndex(index: number): void;
 }
 declare global {
     interface HTMLElementTagNameMap {
@@ -49,6 +48,4 @@ export declare class StepComponent extends BaseComponent implements IStepCompone
     vertical: boolean;
     expanded: boolean;
     ignoreUserExpansion: boolean;
-    focus(): void;
-    setStepTabIndex(index: number): void;
 }

package/esm/stepper/step/step.js

@@ -12,8 +12,8 @@ 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:#3f51b5;background-color:var(--mdc-ripple-color,var(--mdc-theme-primary,#3f51b5))}.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:#3f51b5;color:var(--mdc-theme-primary,#3f51b5)}.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:#3f51b5;border-color:var(--mdc-theme-primary,#3f51b5)}.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:#3f51b5;color:var(--mdc-theme-primary,#3f51b5)}.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:#3f51b5;background-color:var(--mdc-theme-primary,#3f51b5);color:#fff;color:var(--mdc-theme-on-primary,#fff)}.forge-step--selected:not(.forge-step--disabled) .forge-step__title{color:#3f51b5;color:var(--mdc-theme-primary,#3f51b5);font-weight:500}.forge-step--selected:not(.forge-step--disabled) .forge-step__subtitle ::slotted(*){color:#3f51b5;color:var(--mdc-theme-primary,#3f51b5);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:#3f51b5;background-color:var(--mdc-theme-primary,#3f51b5);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:#3f51b5;background-color:var(--mdc-theme-primary,#3f51b5);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}';
+const template = '<template><div class=\"forge-step__container\" part=\"root\"><div class=\"forge-step\" 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><span class=\"forge-step__ripple\"></span></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-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}.forge-step:focus{outline:0}.forge-step::-moz-focus-inner,.forge-step::-moz-focus-outer{padding:0;border:0}.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__ripple{--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;position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;border-radius:inherit}.forge-step__ripple::after,.forge-step__ripple::before{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:\"\"}.forge-step__ripple::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__ripple::after{z-index:0;z-index:var(--mdc-ripple-z-index,0)}.forge-step__ripple.mdc-ripple-upgraded::before{-webkit-transform:scale(var(--mdc-ripple-fg-scale,1));transform:scale(var(--mdc-ripple-fg-scale,1))}.forge-step__ripple.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__ripple.mdc-ripple-upgraded--unbounded::after{top:var(--mdc-ripple-top,0);left:var(--mdc-ripple-left,0)}.forge-step__ripple.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__ripple.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__ripple::after,.forge-step__ripple::before{top:calc(50% - 100%);left:calc(50% - 100%);width:200%;height:200%}.forge-step__ripple.mdc-ripple-upgraded::after{width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.forge-step__ripple::after,.forge-step__ripple::before{background-color:#000;background-color:var(--mdc-ripple-color,#000)}.forge-step__ripple.mdc-ripple-surface--hover::before,.forge-step__ripple:hover::before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity, .04)}.forge-step__ripple.mdc-ripple-upgraded--background-focused::before,.forge-step__ripple:not(.mdc-ripple-upgraded):focus::before{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity, .12)}.forge-step__ripple:not(.mdc-ripple-upgraded)::after{-webkit-transition:opacity 150ms linear;transition:opacity 150ms linear}.forge-step__ripple:not(.mdc-ripple-upgraded):active::after{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity, .12)}.forge-step__ripple.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.12)}.forge-step__ripple--selected::before{opacity:.08;opacity:var(--mdc-ripple-selected-opacity, .08)}.forge-step__ripple--selected::after,.forge-step__ripple--selected::before{background-color:#3f51b5;background-color:var(--mdc-ripple-color,var(--mdc-theme-primary,#3f51b5))}.forge-step__ripple--selected.mdc-ripple-surface--hover::before,.forge-step__ripple--selected:hover::before{opacity:.12;opacity:var(--mdc-ripple-hover-opacity, .12)}.forge-step__ripple--selected.mdc-ripple-upgraded--background-focused::before,.forge-step__ripple--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__ripple--selected:not(.mdc-ripple-upgraded)::after{-webkit-transition:opacity 150ms linear;transition:opacity 150ms linear}.forge-step__ripple--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__ripple--selected.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.2)}.forge-step__ripple.forge-step--error.forge-step--selected::before{opacity:.08;opacity:var(--mdc-ripple-selected-opacity, .08)}.forge-step__ripple.forge-step--error.forge-step--selected::after,.forge-step__ripple.forge-step--error.forge-step--selected::before{background-color:#b00020;background-color:var(--mdc-ripple-color,var(--mdc-theme-error,#b00020))}.forge-step__ripple.forge-step--error.forge-step--selected.mdc-ripple-surface--hover::before,.forge-step__ripple.forge-step--error.forge-step--selected:hover::before{opacity:.12;opacity:var(--mdc-ripple-hover-opacity, .12)}.forge-step__ripple.forge-step--error.forge-step--selected.mdc-ripple-upgraded--background-focused::before,.forge-step__ripple.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__ripple.forge-step--error.forge-step--selected:not(.mdc-ripple-upgraded)::after{-webkit-transition:opacity 150ms linear;transition:opacity 150ms linear}.forge-step__ripple.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__ripple.forge-step--error.forge-step--selected.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.2)}.forge-step__ripple--selected{color:#3f51b5;color:var(--mdc-theme-primary,#3f51b5)}.forge-step__ripple--disabled::after,.forge-step__ripple--disabled::before{background-color:transparent}.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:#3f51b5;border-color:var(--mdc-theme-primary,#3f51b5)}.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:#3f51b5;color:var(--mdc-theme-primary,#3f51b5)}.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:#3f51b5;background-color:var(--mdc-theme-primary,#3f51b5);color:#fff;color:var(--mdc-theme-on-primary,#fff)}.forge-step--selected:not(.forge-step--disabled) .forge-step__title{color:#3f51b5;color:var(--mdc-theme-primary,#3f51b5);font-weight:500}.forge-step--selected:not(.forge-step--disabled) .forge-step__subtitle ::slotted(*){color:#3f51b5;color:var(--mdc-theme-primary,#3f51b5);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:#3f51b5;background-color:var(--mdc-theme-primary,#3f51b5);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:#3f51b5;background-color:var(--mdc-theme-primary,#3f51b5);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}';
 /**
  * The web component class behind the `<forge-step>` custom element.
  *
@@ -86,12 +86,6 @@ let StepComponent = class StepComponent extends BaseComponent {
                 break;
         }
     }
-    focus() {
-        this._foundation.focus();
-    }
-    setStepTabIndex(index) {
-        this._foundation.setStepTabIndex(index);
-    }
 };
 __decorate([
     FoundationProperty()

package/esm/stepper/stepper/stepper-adapter.js

@@ -3,7 +3,7 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { getShadowElement, getActiveElement, toggleClass } from '@tylertech/forge-core';
+import { getShadowElement, toggleClass } from '@tylertech/forge-core';
 import { BaseAdapter } from '../../core/base';
 import { StepperUtils } from '../core/stepper-utils';
 import { STEP_CONSTANTS } from '../step/step-constants';
@@ -97,9 +97,8 @@ export class StepperAdapter extends BaseAdapter {
     }
     tryGetFocusedStep() {
         let focusedStep = undefined;
-        const activeElement = getActiveElement(this._component.ownerDocument);
         this._applyToSteps(step => {
-            if (activeElement === getShadowElement(step, STEP_CONSTANTS.selectors.STEP)) {
+            if (step.matches(':focus-within')) {
                 focusedStep = step;
             }
         });

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

@@ -3,7 +3,7 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { getEventPath, getShadowElement, isDefined, isNumber, Platform } from '@tylertech/forge-core';
+import { getEventPath, isDefined, isNumber, Platform } from '@tylertech/forge-core';
 import { STEP_CONSTANTS } from '../step/step-constants';
 import { StepperUtils } from '../core/stepper-utils';
 import { STEPPER_CONSTANTS } from './stepper-constants';
@@ -177,9 +177,8 @@ export class StepperFoundation {
             return;
         }
         const eventPath = getEventPath(event);
-        const stepRoot = eventPath.find(el => el.classList && el.classList.contains(STEP_CONSTANTS.classes.STEP));
-        const step = eventPath.find(el => el.localName === STEP_CONSTANTS.elementName);
-        if (stepRoot && step && !step.selected && !step.disabled && this._adapter.emitHostEvent(STEP_CONSTANTS.events.SELECT, step.index, true, true)) {
+        const step = eventPath.filter(el => el.nodeType === Node.ELEMENT_NODE).find(el => el.matches(STEP_CONSTANTS.elementName));
+        if (step && !step.selected && !step.disabled && this._adapter.emitHostEvent(STEP_CONSTANTS.events.SELECT, step.index, true, true)) {
             this._adapter.setSelected(step);
             this.selectedIndex = step.index;
         }
@@ -199,6 +198,7 @@ export class StepperFoundation {
         this.initialize();
     }
     _onKeydown(event) {
+        var _a;
         if (this._linear) {
             return;
         }
@@ -211,16 +211,20 @@ export class StepperFoundation {
         if (!key) {
             return;
         }
-        if ([STEP_CONSTANTS.strings.HOME_KEY, STEP_CONSTANTS.strings.END_KEY, STEP_CONSTANTS.strings.ARROW_DOWN_KEY, STEPPER_CONSTANTS.strings.ARROW_UP_KEY].includes(key)) {
+        if ([STEPPER_CONSTANTS.strings.ENTER_KEY, STEPPER_CONSTANTS.strings.SPACE_KEY, STEP_CONSTANTS.strings.HOME_KEY, STEP_CONSTANTS.strings.END_KEY, STEP_CONSTANTS.strings.ARROW_DOWN_KEY, STEPPER_CONSTANTS.strings.ARROW_UP_KEY].includes(key)) {
             event.preventDefault();
         }
+        if ([STEPPER_CONSTANTS.strings.ENTER_KEY, STEPPER_CONSTANTS.strings.SPACE_KEY].includes(key)) {
+            (_a = this._adapter.getFocusedOrSelectedStep()) === null || _a === void 0 ? void 0 : _a.click();
+            return;
+        }
         const step = this._vertical ? this._determineVerticalMoveTarget(key) : this._determineMoveTarget(key);
         if (step) {
             this._moveFocusTo(step);
         }
     }
     _moveFocusTo(step) {
-        getShadowElement(step, STEP_CONSTANTS.selectors.STEP).focus();
+        step.focus();
     }
     _getKeyFromEvent(evt) {
         if (STEPPER_CONSTANTS.ACCEPTABLE_KEYS.includes(evt.key)) {
@@ -267,17 +271,17 @@ export class StepperFoundation {
     _onStepExpandedContentFocusIn(event) {
         const step = this._adapter.getStep(event.detail.index + 1);
         if (step) {
-            step.setStepTabIndex(0);
+            step.tabIndex = 0;
         }
-        event.detail.setStepTabIndex(0);
+        event.detail.tabIndex = 0;
     }
     _onStepExpandedContentFocusOut(event) {
         const focusOutStep = event.target;
         const step = this._adapter.getStep(focusOutStep.index + 1);
         if (step) {
-            step.setStepTabIndex(-1);
+            step.tabIndex = -1;
         }
-        focusOutStep.setStepTabIndex(-1);
+        focusOutStep.tabIndex = -1;
     }
     _onStepFocus() {
         this._adapter.toggleRootClass(STEPPER_CONSTANTS.classes.FOCUSED, true);

package/esm/tabs/tab/tab-adapter.d.ts

@@ -22,11 +22,10 @@ export interface ITabAdapter extends IBaseAdapter {
     getOffsetWidth(): number;
     getContentOffsetLeft(): number;
     getContentOffsetWidth(): number;
-    focus(): void;
     setTabIndex(value: number): void;
 }
 export declare class TabAdapter extends BaseAdapter<ITabComponent> implements ITabAdapter {
-    private _buttonElement;
+    private _rootElement;
     private _content;
     private _rippleElement;
     private _rippleInstance;
@@ -49,6 +48,5 @@ export declare class TabAdapter extends BaseAdapter<ITabComponent> implements IT
     getOffsetWidth(): number;
     getContentOffsetLeft(): number;
     getContentOffsetWidth(): number;
-    focus(): void;
     setTabIndex(value: number): void;
 }

package/esm/tabs/tab/tab-adapter.js

@@ -25,19 +25,21 @@ class TabRippleSurface {
 export class TabAdapter extends BaseAdapter {
     constructor(component) {
         super(component);
-        this._buttonElement = getShadowElement(this._component, TAB_CONSTANTS.selectors.BUTTON);
+        this._rootElement = getShadowElement(this._component, TAB_CONSTANTS.selectors.ROOT);
         this._content = getShadowElement(this._component, TAB_CONSTANTS.selectors.CONTENT);
         this._rippleElement = getShadowElement(this._component, TAB_CONSTANTS.selectors.RIPPLE);
         this._tabIndicatorElement = getShadowElement(this._component, TAB_CONSTANTS.selectors.INDICATOR);
     }
     initialize() {
-        this._component.setAttribute('role', 'tab');
+        if (!this._component.hasAttribute('role')) {
+            this._component.setAttribute('role', 'tab');
+        }
     }
     initializeRipple() {
-        const rippleCapableSurface = new TabRippleSurface(this._buttonElement);
+        const rippleCapableSurface = new TabRippleSurface(this._component);
         const rippleAdapter = Object.assign(Object.assign({}, ForgeRipple.createAdapter(rippleCapableSurface)), { addClass: (className) => this._rippleElement.classList.add(className), removeClass: (className) => this._rippleElement.classList.remove(className), updateCssVariable: (varName, value) => this._rippleElement.style.setProperty(varName, value) });
         const rippleFoundation = new ForgeRippleFoundation(rippleAdapter);
-        this._rippleInstance = new ForgeRipple(this._buttonElement, rippleFoundation);
+        this._rippleInstance = new ForgeRipple(this._component, rippleFoundation);
     }
     destroyRipple() {
         if (this._rippleInstance) {
@@ -67,26 +69,26 @@ export class TabAdapter extends BaseAdapter {
         return this._tabIndicator ? this._tabIndicator.computeContentClientRect() : undefined;
     }
     addButtonListener(type, listener) {
-        this._buttonElement.addEventListener(type, listener);
+        this._component.addEventListener(type, listener);
     }
     removeButtonListener(type, listener) {
-        this._buttonElement.removeEventListener(type, listener);
+        this._component.removeEventListener(type, listener);
     }
     setDisabled(value) {
-        this._buttonElement.disabled = value;
+        toggleClass(this._rootElement, value, TAB_CONSTANTS.classes.DISABLED);
         this.setTabIndex(!value ? 0 : -1);
         this._component.setAttribute('aria-disabled', value.toString());
     }
     setActive(value) {
-        toggleClass(this._buttonElement, value, TAB_CONSTANTS.classes.ACTIVE);
+        toggleClass(this._rootElement, value, TAB_CONSTANTS.classes.ACTIVE);
         this.setTabIndex(value ? 0 : -1);
         this._component.setAttribute('aria-selected', value.toString());
     }
     getOffsetLeft() {
-        return this._buttonElement.offsetLeft;
+        return this._rootElement.offsetLeft;
     }
     getOffsetWidth() {
-        return this._buttonElement.offsetWidth;
+        return this._rootElement.offsetWidth;
     }
     getContentOffsetLeft() {
         return this._content.offsetLeft;
@@ -94,10 +96,7 @@ export class TabAdapter extends BaseAdapter {
     getContentOffsetWidth() {
         return this._content.offsetWidth;
     }
-    focus() {
-        this._buttonElement.focus();
-    }
     setTabIndex(value) {
-        this._buttonElement.tabIndex = value;
+        this._component.tabIndex = value;
     }
 }

package/esm/tabs/tab/tab-constants.d.ts

@@ -11,13 +11,14 @@ export declare const TAB_CONSTANTS: {
         STRETCH: string;
     };
     selectors: {
-        BUTTON: string;
+        ROOT: string;
         RIPPLE: string;
         INDICATOR: string;
         CONTENT: string;
         DEFAULT_SLOT: string;
     };
     classes: {
+        DISABLED: string;
         ACTIVE: string;
     };
     events: {

package/esm/tabs/tab/tab-constants.js

@@ -11,13 +11,14 @@ const attributes = {
     STRETCH: 'stretch'
 };
 const selectors = {
-    BUTTON: 'button.forge-tab',
+    ROOT: '.forge-tab',
     RIPPLE: '.forge-tab__ripple',
     INDICATOR: '.mdc-tab-indicator',
     CONTENT: '.forge-tab__content',
     DEFAULT_SLOT: 'slot:not([name])'
 };
 const classes = {
+    DISABLED: 'forge-tab--disabled',
     ACTIVE: 'forge-tab--active'
 };
 const events = {

package/esm/tabs/tab/tab-foundation.d.ts

@@ -14,7 +14,6 @@ export interface ITabFoundation extends ICustomElementFoundation {
     deactivate(): void;
     computeIndicatorBounds(): DOMRect | undefined;
     computeDimensions(): ITabDimensions;
-    focus(): void;
     setTabIndex(value: number): void;
 }
 export declare class TabFoundation implements ITabFoundation {
@@ -32,7 +31,6 @@ export declare class TabFoundation implements ITabFoundation {
     deactivate(): void;
     computeIndicatorBounds(): DOMRect | undefined;
     computeDimensions(): ITabDimensions;
-    focus(): void;
     setTabIndex(value: number): void;
     get disabled(): boolean;
     set disabled(value: boolean);