@tylertech/forge 2.16.6 → 3.0.0-next.10

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

@@ -0,0 +1,237 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { PointerState, StateLayerCoords, STATE_LAYER_CONSTANTS, TOUCH_DELAY_MS } from './state-layer-constants';
+export class StateLayerFoundation {
+    constructor(_adapter) {
+        this._adapter = _adapter;
+        // State
+        this._target = null;
+        this._disabled = false;
+        this._attached = false;
+        this._deferred = true;
+        this._pointerState = PointerState.INACTIVE;
+        this._checkBoundsAfterContextMenu = false;
+        this._pointerEnterListener = (evt) => this._onPointerEnter(evt);
+        this._pointerLeaveListener = (evt) => this._onPointerLeave(evt);
+        this._pointerDownListener = (evt) => this._onPointerDown(evt);
+        this._pointerUpListener = (evt) => this._onPointerUp(evt);
+        this._pointerCancelListener = (evt) => this._onPointerCancel(evt);
+        this._clickListener = () => this._onClick();
+        this._contextmenuListener = () => this._onContextmenu();
+    }
+    initialize() {
+        this._adapter.trySetTarget(this._target);
+        // We defer initialization until the first pointerenter event is received.
+        //
+        // This is a performance optimization to avoid attaching many listeners to the target element
+        // until the user is first interacting with it.
+        this._deferInitialization();
+    }
+    disconnect() {
+        this._pointerStartEvent = undefined;
+        this._pointerState = PointerState.INACTIVE;
+        this._adapter.setHovered(false);
+        this._adapter.setPressed(false);
+        this._adapter.destroy();
+        this._removeListeners();
+    }
+    playAnimation(coords) {
+        this._adapter.startAnimation(coords);
+        this._endAnimation();
+    }
+    _deferInitialization() {
+        this._adapter.deferInitialization(this._onDeferredInitialize.bind(this));
+    }
+    _applyListeners() {
+        if (this._disabled) {
+            return;
+        }
+        this._adapter.addTargetListener('pointerenter', this._pointerEnterListener);
+        this._adapter.addTargetListener('pointerleave', this._pointerLeaveListener);
+        this._adapter.addTargetListener('pointerdown', this._pointerDownListener);
+        this._adapter.addTargetListener('pointerup', this._pointerUpListener);
+        this._adapter.addTargetListener('pointercancel', this._pointerCancelListener);
+        this._adapter.addTargetListener('click', this._clickListener);
+        this._adapter.addTargetListener('contextmenu', this._contextmenuListener);
+        this._attached = true;
+    }
+    _removeListeners() {
+        this._adapter.removeTargetListener('pointerenter', this._pointerEnterListener);
+        this._adapter.removeTargetListener('pointerleave', this._pointerLeaveListener);
+        this._adapter.removeTargetListener('pointerdown', this._pointerDownListener);
+        this._adapter.removeTargetListener('pointerup', this._pointerUpListener);
+        this._adapter.removeTargetListener('pointercancel', this._pointerCancelListener);
+        this._adapter.removeTargetListener('click', this._clickListener);
+        this._adapter.removeTargetListener('contextmenu', this._contextmenuListener);
+        this._attached = false;
+    }
+    _onDeferredInitialize(evt) {
+        this._applyListeners();
+        if ((evt === null || evt === void 0 ? void 0 : evt.type) === 'pointerenter') {
+            // Manually trigger the pointerenter listener since this is in response to a pointerenter event already
+            this._pointerEnterListener(evt);
+        }
+        this._deferred = false;
+    }
+    _onPointerEnter(evt) {
+        if (!this._canHandleEvent(evt)) {
+            return;
+        }
+        this._adapter.setHovered(true);
+    }
+    _onPointerLeave(evt) {
+        if (!this._canHandleEvent(evt)) {
+            return;
+        }
+        this._adapter.setHovered(false);
+        if (this._pointerState !== PointerState.INACTIVE) {
+            this._adapter.endAnimation();
+        }
+    }
+    async _onPointerDown(evt) {
+        this._pointerStartEvent = evt;
+        if (!this._canHandleEvent(evt)) {
+            return;
+        }
+        if (!this._isTouch(evt.pointerType)) {
+            this._pointerState = PointerState.WAITING_FOR_CLICK;
+            this._startAnimation(evt);
+            return;
+        }
+        // after a longpress contextmenu event, an extra `pointerdown` can be
+        // dispatched to the pressed element. Check that the down is within
+        // bounds of the element in this case.
+        if (this._checkBoundsAfterContextMenu && !this._adapter.inBounds(evt.x, evt.y)) {
+            return;
+        }
+        this._checkBoundsAfterContextMenu = false;
+        this._pointerState = PointerState.TOUCH_DELAY;
+        await new Promise(resolve => setTimeout(resolve, TOUCH_DELAY_MS));
+        if (this._pointerState !== PointerState.TOUCH_DELAY) {
+            return;
+        }
+        this._pointerState = PointerState.HOLDING;
+        this._startAnimation(evt);
+    }
+    _onPointerUp(evt) {
+        if (!this._canHandleEvent(evt)) {
+            return;
+        }
+        if (this._pointerState === PointerState.HOLDING) {
+            this._pointerState = PointerState.WAITING_FOR_CLICK;
+            return;
+        }
+        if (this._pointerState === PointerState.TOUCH_DELAY) {
+            this._pointerState = PointerState.WAITING_FOR_CLICK;
+            this._startAnimation(this._pointerStartEvent);
+            return;
+        }
+    }
+    _onClick() {
+        if (this._disabled) {
+            return;
+        }
+        if (this._pointerState === PointerState.WAITING_FOR_CLICK) {
+            this._endAnimation();
+            return;
+        }
+        if (this._pointerState === PointerState.INACTIVE) {
+            this._startAnimation(this._pointerStartEvent);
+            this._endAnimation();
+        }
+    }
+    _onPointerCancel(evt) {
+        if (!this._canHandleEvent(evt)) {
+            return;
+        }
+        this._endAnimation();
+    }
+    _onContextmenu() {
+        if (this._disabled) {
+            return;
+        }
+        this._checkBoundsAfterContextMenu = true;
+        this._adapter.endAnimation();
+    }
+    _startAnimation(evt) {
+        const coords = evt ? StateLayerCoords.fromPointerEvent(evt) : undefined;
+        this._adapter.startAnimation(coords);
+    }
+    _endAnimation() {
+        this._pointerState = PointerState.INACTIVE;
+        this._adapter.endAnimation();
+        this._pointerStartEvent = undefined;
+    }
+    _canHandleEvent({ type, isPrimary, buttons, pointerType, pointerId }) {
+        if (this._disabled || !isPrimary) {
+            return false;
+        }
+        if (this._pointerStartEvent && this._pointerStartEvent.pointerId !== pointerId) {
+            return false;
+        }
+        if (type === 'pointerenter' || type === 'pointerleave') {
+            return !this._isTouch(pointerType);
+        }
+        const isPrimaryButton = buttons === 1;
+        return this._isTouch(pointerType) || isPrimaryButton;
+    }
+    _isTouch(pointerType) {
+        return pointerType === 'touch';
+    }
+    get isAttached() {
+        return this._attached;
+    }
+    get targetElement() {
+        return this._adapter.getTargetElement();
+    }
+    set targetElement(el) {
+        // Always remove the listeners from the previous target element
+        if (this._attached) {
+            this._removeListeners();
+        }
+        this._adapter.setTargetElement(el);
+        // If we are not already deferring attaching the listeners, then do that now
+        if (!this._deferred) {
+            this._deferInitialization();
+        }
+    }
+    get target() {
+        return this._adapter.getHostAttribute(STATE_LAYER_CONSTANTS.attributes.TARGET);
+    }
+    set target(value) {
+        if (this._target !== value) {
+            this._target = value;
+            if (this._adapter.isConnected) {
+                if (this._attached) {
+                    this._removeListeners();
+                }
+                this._adapter.trySetTarget(value);
+                if (!this._deferred) {
+                    this._deferInitialization();
+                }
+            }
+            this._adapter.toggleHostAttribute(STATE_LAYER_CONSTANTS.attributes.TARGET, Boolean(this._target), this._target);
+        }
+    }
+    get disabled() {
+        return this._disabled;
+    }
+    set disabled(value) {
+        value = Boolean(value);
+        if (this._disabled !== value) {
+            this._disabled = value;
+            if (this._adapter.isConnected) {
+                if (this._disabled) {
+                    this._removeListeners();
+                }
+                else if (!this._deferred) {
+                    this._deferInitialization();
+                }
+            }
+            this._adapter.toggleHostAttribute(STATE_LAYER_CONSTANTS.attributes.DISABLED, this._disabled);
+        }
+    }
+}

package/esm/state-layer/state-layer-utils.d.ts

@@ -0,0 +1,26 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { StateLayerCoords } from './state-layer-constants';
+export declare function calcRippleSize(hostEl: HTMLElement): {
+    rippleScale: string;
+    rippleSize: string;
+    initialSize: number;
+};
+export declare function getTranslationCoordinates(hostEl: HTMLElement, initialSize: number, coords?: StateLayerCoords): {
+    startPoint: {
+        x: number;
+        y: number;
+    };
+    endPoint: {
+        x: number;
+        y: number;
+    };
+};
+export declare function toNormalizedCoords(hostEl: HTMLElement, coords: StateLayerCoords): {
+    x: number;
+    y: number;
+};
+export declare function isInBounds(hostEl: HTMLElement, x: number, y: number): boolean;

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

@@ -0,0 +1,54 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { INITIAL_ORIGIN_SCALE, PADDING, SOFT_EDGE_CONTAINER_RATIO, SOFT_EDGE_MINIMUM_SIZE, StateLayerCoords } from './state-layer-constants';
+export function calcRippleSize(hostEl) {
+    const { height, width } = hostEl.getBoundingClientRect();
+    const maxDim = Math.max(height, width);
+    const softEdgeSize = Math.max(SOFT_EDGE_CONTAINER_RATIO * maxDim, SOFT_EDGE_MINIMUM_SIZE);
+    const initialSize = Math.floor(maxDim * INITIAL_ORIGIN_SCALE);
+    const hypotenuse = Math.sqrt(width ** 2 + height ** 2);
+    const maxRadius = hypotenuse + PADDING;
+    const rippleScale = `${(maxRadius + softEdgeSize) / initialSize}`;
+    const rippleSize = `${initialSize}px`;
+    return { rippleScale, rippleSize, initialSize };
+}
+export function getTranslationCoordinates(hostEl, initialSize, coords) {
+    const { height, width } = hostEl.getBoundingClientRect();
+    const endPoint = {
+        x: (width - initialSize) / 2,
+        y: (height - initialSize) / 2
+    };
+    let startPoint;
+    if (isValidCoords(coords)) {
+        startPoint = toNormalizedCoords(hostEl, coords);
+    }
+    else {
+        startPoint = {
+            x: width / 2,
+            y: height / 2
+        };
+    }
+    startPoint = {
+        x: startPoint.x - (initialSize / 2),
+        y: startPoint.y - (initialSize / 2)
+    };
+    return { startPoint, endPoint };
+}
+export function toNormalizedCoords(hostEl, coords) {
+    const { scrollX, scrollY } = window;
+    const { left, top } = hostEl.getBoundingClientRect();
+    const documentX = scrollX + left;
+    const documentY = scrollY + top;
+    const { x, y } = coords;
+    return { x: x - documentX, y: y - documentY };
+}
+export function isInBounds(hostEl, x, y) {
+    const { height, width } = hostEl.getBoundingClientRect();
+    return x >= 0 && x <= width && y >= 0 && y <= height;
+}
+function isValidCoords(value) {
+    return value && (value instanceof StateLayerCoords || ['x', 'y'].every(key => key in value));
+}

package/esm/state-layer/state-layer.d.ts

@@ -0,0 +1,66 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { StateLayerCoords } from './state-layer-constants';
+import { BaseComponent, IBaseComponent } from '../core/base/base-component';
+export interface IStateLayerComponent extends IBaseComponent {
+    targetElement: HTMLElement | null;
+    target: string | null;
+    disabled: boolean;
+    playAnimation(coords?: StateLayerCoords): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'forge-state-layer': IStateLayerComponent;
+    }
+}
+/**
+ * @tag forge-state-layer
+ *
+ * @summary State layers show the interaction status of an element.
+ *
+ * @description
+ * A state layer is a semi-transparent overlay on an element that indicates its interaction
+ * state. State layers provide a systematic approach to visualizing states by using opacity.
+ * A layer can be applied to an entire element or in a circular shape. Only one state layer
+ * can be applied at a given time.
+ *
+ * @property {HTMLElement} targetElement - The element to attach the state layer to.
+ * @property {string} target - The id of the element to attach the state layer to.
+ * @property {boolean} disabled - Controls whether the state layer is disabled.
+ *
+ * @attribute {string} target - The id of the element to attach the state layer to.
+ * @attribute {boolean} disabled - Controls whether the state layer is disabled.
+ *
+ * @cssproperty --forge-state-layer-color - The color of the state layer. Defaults to the on-surface theme.
+ * @cssproperty --forge-state-layer-hover-color - The color of the state layer when hovered.
+ * @cssproperty --forge-state-layer-hover-opacity - The opacity of the state layer when hovered.
+ * @cssproperty --forge-state-layer-pressed-color - The color of the state layer when pressed.
+ * @cssproperty --forge-state-layer-pressed-opacity - The opacity of the state layer when pressed.
+ * @cssproperty --forge-state-layer-hover-duration - The duration of the hover animation.
+ * @cssproperty --forge-state-layer-animation-duration - The duration of the animation.
+ * @cssproperty --forge-state-layer-pressed-duration - The duration of the pressed animation.
+ *
+ * @csspart surface - The surface element.
+ */
+export declare class StateLayerComponent extends BaseComponent implements IStateLayerComponent {
+    static get observedAttributes(): string[];
+    private _foundation;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+    targetElement: HTMLElement | null;
+    target: string | null;
+    disabled: boolean;
+    /**
+     * Triggers the animation to run.
+     *
+     * Note: If coordinates are not provided, the transition will originate from the center of the target element.
+     *
+     * @param {StateLayerCoords} [coords] - The coordinates to play the animation from.
+     */
+    playAnimation(coords?: StateLayerCoords): void;
+}

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

@@ -0,0 +1,96 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import { CustomElement, attachShadowTemplate, FoundationProperty, coerceBoolean } from '@tylertech/forge-core';
+import { StateLayerAdapter } from './state-layer-adapter';
+import { StateLayerFoundation } from './state-layer-foundation';
+import { STATE_LAYER_CONSTANTS } from './state-layer-constants';
+import { BaseComponent } from '../core/base/base-component';
+const template = '<template><div class=\"forge-state-layer\" part=\"surface\"></div></template>';
+const styles = ':host{border-radius:inherit;position:absolute;inset:0;overflow:hidden;display:-webkit-box;display:flex;margin:auto;pointer-events:none;-webkit-tap-highlight-color:transparent}:host([hidden]){display:none}:host([disabled]){display:none}.forge-state-layer{--_color:var(--forge-state-layer-color, var(--forge-theme-on-surface, #000000));--_hover-color:var(--forge-state-layer-hover-color, var(--_color));--_hover-opacity:0.08;--_pressed-color:var(--forge-state-layer-pressed-color, var(--_color));--_pressed-opacity:0.12;--_hover-duration:15ms;--_pressed-duration:105ms;--_animation-duration:375ms}.forge-state-layer::after,.forge-state-layer::before{content:\"\";opacity:0;position:absolute}.forge-state-layer::before{background-color:var(--_hover-color);inset:0;-webkit-transition:opacity var(--_hover-duration) linear,background-color var(--_hover-duration) linear;transition:opacity var(--_hover-duration) linear,background-color var(--_hover-duration) linear}.forge-state-layer::after{background:radial-gradient(closest-side,var(--_pressed-color) max(100% - 70px,65%),transparent 100%);-webkit-transform-origin:center center;transform-origin:center center;-webkit-transition:opacity var(--_animation-duration) linear;transition:opacity var(--_animation-duration) linear}.forge-state-layer--hovered::before{background-color:var(--_hover-color);opacity:var(--_hover-opacity)}.forge-state-layer--pressed::after{opacity:var(--_pressed-opacity);-webkit-transition-duration:var(--_pressed-duration);transition-duration:var(--_pressed-duration)}@media screen and (forced-colors:active){:host{display:none}}';
+/**
+ * @tag forge-state-layer
+ *
+ * @summary State layers show the interaction status of an element.
+ *
+ * @description
+ * A state layer is a semi-transparent overlay on an element that indicates its interaction
+ * state. State layers provide a systematic approach to visualizing states by using opacity.
+ * A layer can be applied to an entire element or in a circular shape. Only one state layer
+ * can be applied at a given time.
+ *
+ * @property {HTMLElement} targetElement - The element to attach the state layer to.
+ * @property {string} target - The id of the element to attach the state layer to.
+ * @property {boolean} disabled - Controls whether the state layer is disabled.
+ *
+ * @attribute {string} target - The id of the element to attach the state layer to.
+ * @attribute {boolean} disabled - Controls whether the state layer is disabled.
+ *
+ * @cssproperty --forge-state-layer-color - The color of the state layer. Defaults to the on-surface theme.
+ * @cssproperty --forge-state-layer-hover-color - The color of the state layer when hovered.
+ * @cssproperty --forge-state-layer-hover-opacity - The opacity of the state layer when hovered.
+ * @cssproperty --forge-state-layer-pressed-color - The color of the state layer when pressed.
+ * @cssproperty --forge-state-layer-pressed-opacity - The opacity of the state layer when pressed.
+ * @cssproperty --forge-state-layer-hover-duration - The duration of the hover animation.
+ * @cssproperty --forge-state-layer-animation-duration - The duration of the animation.
+ * @cssproperty --forge-state-layer-pressed-duration - The duration of the pressed animation.
+ *
+ * @csspart surface - The surface element.
+ */
+let StateLayerComponent = class StateLayerComponent extends BaseComponent {
+    static get observedAttributes() {
+        return [
+            STATE_LAYER_CONSTANTS.attributes.TARGET,
+            STATE_LAYER_CONSTANTS.attributes.DISABLED
+        ];
+    }
+    constructor() {
+        super();
+        attachShadowTemplate(this, template, styles);
+        this._foundation = new StateLayerFoundation(new StateLayerAdapter(this));
+    }
+    connectedCallback() {
+        this._foundation.initialize();
+    }
+    disconnectedCallback() {
+        this._foundation.disconnect();
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        switch (name) {
+            case STATE_LAYER_CONSTANTS.attributes.TARGET:
+                this.target = newValue;
+                break;
+            case STATE_LAYER_CONSTANTS.attributes.DISABLED:
+                this.disabled = coerceBoolean(newValue);
+                break;
+        }
+    }
+    /**
+     * Triggers the animation to run.
+     *
+     * Note: If coordinates are not provided, the transition will originate from the center of the target element.
+     *
+     * @param {StateLayerCoords} [coords] - The coordinates to play the animation from.
+     */
+    playAnimation(coords) {
+        this._foundation.playAnimation(coords);
+    }
+};
+__decorate([
+    FoundationProperty()
+], StateLayerComponent.prototype, "targetElement", void 0);
+__decorate([
+    FoundationProperty()
+], StateLayerComponent.prototype, "target", void 0);
+__decorate([
+    FoundationProperty()
+], StateLayerComponent.prototype, "disabled", void 0);
+StateLayerComponent = __decorate([
+    CustomElement({
+        name: STATE_LAYER_CONSTANTS.elementName
+    })
+], StateLayerComponent);
+export { StateLayerComponent };

package/esm/stepper/core/stepper-utils.js

@@ -14,7 +14,6 @@ export class StepperUtils {
      * @param {boolean} linear Whether the stepper is in linear mode or not.
      */
     static createStepElement(step, index, stepperConfig) {
-        var _a, _b;
         const stepElement = document.createElement(STEP_CONSTANTS.elementName);
         stepElement.index = index;
         stepElement.completed = step.completed || false;
@@ -23,7 +22,7 @@ export class StepperUtils {
         stepElement.alternative = stepperConfig.alternative;
         stepElement.error = step.error || false;
         stepElement.disabled = step.disabled || false;
-        stepElement.vertical = (_b = (_a = step.vertical) !== null && _a !== void 0 ? _a : stepperConfig.vertical) !== null && _b !== void 0 ? _b : false;
+        stepElement.vertical = step.vertical || false;
         stepElement.ignoreUserExpansion = step.ignoreUserExpansion || false;
         stepElement.expanded = step.expanded || false;
         if (stepperConfig.linear && index > stepperConfig.selectedIndex) {

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

@@ -73,4 +73,4 @@ export declare const STEP_CONSTANTS: {
         EXPANSION_CONTENT_SLOT_NAME: string;
     };
 };
-export declare type StepIcons = 'check' | 'block' | 'mode_edit' | 'warning' | '';
+export type StepIcons = 'check' | 'block' | 'mode_edit' | 'warning' | '';

package/esm/stepper/step/step.js

@@ -13,25 +13,13 @@ 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 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}';
 /**
  * The web component class behind the `<forge-step>` custom element.
  *
  * @tag forge-step
  */
 let StepComponent = class StepComponent extends BaseComponent {
-    constructor() {
-        super();
-        IconRegistry.define([
-            tylIconModeEdit,
-            tylIconCheck,
-            tylIconWarning,
-            tylIconBlock,
-            tylIconKeyboardArrowDown
-        ]);
-        attachShadowTemplate(this, template, styles);
-        this._foundation = new StepFoundation(new StepAdapter(this));
-    }
     static get observedAttributes() {
         return [
             STEP_CONSTANTS.attributes.COMPLETED,
@@ -46,6 +34,18 @@ let StepComponent = class StepComponent extends BaseComponent {
             STEP_CONSTANTS.attributes.IGNORE_USER_EXPANSION
         ];
     }
+    constructor() {
+        super();
+        IconRegistry.define([
+            tylIconModeEdit,
+            tylIconCheck,
+            tylIconWarning,
+            tylIconBlock,
+            tylIconKeyboardArrowDown
+        ]);
+        attachShadowTemplate(this, template, styles);
+        this._foundation = new StepFoundation(new StepAdapter(this));
+    }
     connectedCallback() {
         this._foundation.initialize();
     }

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

@@ -97,7 +97,7 @@ export class StepperAdapter extends BaseAdapter {
     }
     tryGetFocusedStep() {
         let focusedStep = undefined;
-        const activeElement = getActiveElement(this._component.ownerDocument);
+        const activeElement = getActiveElement();
         this._applyToSteps(step => {
             if (activeElement === getShadowElement(step, STEP_CONSTANTS.selectors.STEP)) {
                 focusedStep = step;