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

package/esm/select/select-dropdown/select-dropdown.d.ts

@@ -19,8 +19,6 @@ declare global {
     }
 }
 /**
- * The web component class behind the `<forge-select-dropdown>` custom element.
- *
  * @tag forge-select-dropdown
  */
 export declare class SelectDropdownComponent extends BaseSelectComponent<SelectDropdownFoundation> implements ISelectDropdownComponent {

package/esm/select/select-dropdown/select-dropdown.js

@@ -12,17 +12,15 @@ import { BASE_SELECT_CONSTANTS } from '../core/base-select-constants';
 import { SelectDropdownAdapter } from './select-dropdown-adapter';
 import { OptionComponent } from '../option';
 import { OptionGroupComponent } from '../option-group';
-import { PopupComponent } from '../../popup';
 import { ListComponent, ListItemComponent } from '../../list';
 import { CircularProgressComponent } from '../../circular-progress';
 import { ScaffoldComponent } from '../../scaffold';
 import { ToolbarComponent } from '../../toolbar';
 import { IconButtonComponent } from '../../icon-button';
+import { PopoverComponent } from '../../popover/popover';
 const template = '<template></template>';
 const styles = ':host{display:none}';
 /**
- * The web component class behind the `<forge-select-dropdown>` custom element.
- *
  * @tag forge-select-dropdown
  */
 let SelectDropdownComponent = class SelectDropdownComponent extends BaseSelectComponent {
@@ -75,7 +73,7 @@ SelectDropdownComponent = __decorate([
         dependencies: [
             OptionComponent,
             OptionGroupComponent,
-            PopupComponent,
+            PopoverComponent,
             ListComponent,
             ListItemComponent,
             CircularProgressComponent,

package/esm/slider/slider.d.ts

@@ -78,8 +78,8 @@ declare global {
  * @event {CustomEvent} forge-slider-input - Dispatches when the slider value changes.
  * @event {CustomEvent} forge-slider-change - Dispatches when the slider value changes and the value has been committed.
  *
- * @cssproperty --mdc-theme-primary - The primary color of the slider.
- * @cssproperty --mdc-theme-on-primary - The color of elements placed on top of the primary color (the label text for example).
+ * @cssproperty --forge-theme-primary - The primary color of the slider.
+ * @cssproperty --forge-theme-on-primary - The color of elements placed on top of the primary color (the label text for example).
  * @cssproperty --forge-slider-track-height - The height of the track.
  * @cssproperty --forge-slider-active-track-color - The color of the active track.
  * @cssproperty --forge-slider-active-track-height - The height of the active track.

package/esm/slider/slider.js

@@ -61,8 +61,8 @@ const styles = ':host{display:-webkit-inline-box;display:inline-flex;vertical-al
  * @event {CustomEvent} forge-slider-input - Dispatches when the slider value changes.
  * @event {CustomEvent} forge-slider-change - Dispatches when the slider value changes and the value has been committed.
  *
- * @cssproperty --mdc-theme-primary - The primary color of the slider.
- * @cssproperty --mdc-theme-on-primary - The color of elements placed on top of the primary color (the label text for example).
+ * @cssproperty --forge-theme-primary - The primary color of the slider.
+ * @cssproperty --forge-theme-on-primary - The color of elements placed on top of the primary color (the label text for example).
  * @cssproperty --forge-slider-track-height - The height of the track.
  * @cssproperty --forge-slider-active-track-color - The color of the active track.
  * @cssproperty --forge-slider-active-track-height - The height of the active track.

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

@@ -11,7 +11,7 @@ import { SplitViewFoundation } from './split-view-foundation';
 import { SPLIT_VIEW_CONSTANTS } from './split-view-constants';
 import { SplitViewPanelComponent } from '../split-view-panel';
 const template = '<template><div class=\"forge-split-view\" id=\"root\" part=\"root\"><slot></slot></div></template>';
-const styles = '@-webkit-keyframes mdc-ripple-fg-radius-in{from{-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1);-webkit-transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1);transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1)}to{-webkit-transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1));transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}}@keyframes mdc-ripple-fg-radius-in{from{-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1);-webkit-transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1);transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1)}to{-webkit-transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1));transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}}@-webkit-keyframes mdc-ripple-fg-opacity-in{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:0}to{opacity:var(--mdc-ripple-fg-opacity, 0)}}@keyframes mdc-ripple-fg-opacity-in{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:0}to{opacity:var(--mdc-ripple-fg-opacity, 0)}}@-webkit-keyframes mdc-ripple-fg-opacity-out{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:var(--mdc-ripple-fg-opacity, 0)}to{opacity:0}}@keyframes mdc-ripple-fg-opacity-out{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:var(--mdc-ripple-fg-opacity, 0)}to{opacity:0}}.mdc-ripple-surface{--mdc-ripple-fg-size:0;--mdc-ripple-left:0;--mdc-ripple-top:0;--mdc-ripple-fg-scale:1;--mdc-ripple-fg-translate-end:0;--mdc-ripple-fg-translate-start:0;-webkit-tap-highlight-color:transparent;will-change:transform,opacity;position:relative;outline:0;overflow:hidden}.mdc-ripple-surface::after,.mdc-ripple-surface::before{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:\"\"}.mdc-ripple-surface::before{-webkit-transition:opacity 15ms linear,background-color 15ms linear;transition:opacity 15ms linear,background-color 15ms linear;z-index:1;z-index:var(--mdc-ripple-z-index,1)}.mdc-ripple-surface::after{z-index:0;z-index:var(--mdc-ripple-z-index,0)}.mdc-ripple-surface.mdc-ripple-upgraded::before{-webkit-transform:scale(var(--mdc-ripple-fg-scale,1));transform:scale(var(--mdc-ripple-fg-scale,1))}.mdc-ripple-surface.mdc-ripple-upgraded::after{top:0;left:0;-webkit-transform:scale(0);transform:scale(0);-webkit-transform-origin:center center;transform-origin:center center}.mdc-ripple-surface.mdc-ripple-upgraded--unbounded::after{top:var(--mdc-ripple-top,0);left:var(--mdc-ripple-left,0)}.mdc-ripple-surface.mdc-ripple-upgraded--foreground-activation::after{-webkit-animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards;animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards}.mdc-ripple-surface.mdc-ripple-upgraded--foreground-deactivation::after{-webkit-animation:mdc-ripple-fg-opacity-out 150ms;animation:mdc-ripple-fg-opacity-out 150ms;-webkit-transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1));transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}.mdc-ripple-surface::after,.mdc-ripple-surface::before{top:calc(50% - 100%);left:calc(50% - 100%);width:200%;height:200%}.mdc-ripple-surface.mdc-ripple-upgraded::after{width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.mdc-ripple-surface[data-mdc-ripple-is-unbounded],.mdc-ripple-upgraded--unbounded{overflow:visible}.mdc-ripple-surface[data-mdc-ripple-is-unbounded]::after,.mdc-ripple-surface[data-mdc-ripple-is-unbounded]::before,.mdc-ripple-upgraded--unbounded::after,.mdc-ripple-upgraded--unbounded::before{top:calc(50% - 50%);left:calc(50% - 50%);width:100%;height:100%}.mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::after,.mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::before,.mdc-ripple-upgraded--unbounded.mdc-ripple-upgraded::after,.mdc-ripple-upgraded--unbounded.mdc-ripple-upgraded::before{top:var(--mdc-ripple-top,calc(50% - 50%));left:var(--mdc-ripple-left,calc(50% - 50%));width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::after,.mdc-ripple-upgraded--unbounded.mdc-ripple-upgraded::after{width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.mdc-ripple-surface::after,.mdc-ripple-surface::before{background-color:#000;background-color:var(--mdc-ripple-color,#000)}.mdc-ripple-surface.mdc-ripple-surface--hover::before,.mdc-ripple-surface:hover::before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity, .04)}.mdc-ripple-surface.mdc-ripple-upgraded--background-focused::before,.mdc-ripple-surface:not(.mdc-ripple-upgraded):focus::before{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity, .12)}.mdc-ripple-surface:not(.mdc-ripple-upgraded)::after{-webkit-transition:opacity 150ms linear;transition:opacity 150ms linear}.mdc-ripple-surface:not(.mdc-ripple-upgraded):active::after{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity, .12)}.mdc-ripple-surface.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.12)}.mdc-ripple-surface::after,.mdc-ripple-surface::before{--mdc-ripple-color:var(--mdc-theme-on-surface)}.forge-split-view{display:-webkit-box;display:flex;width:100%;height:100%}:host{--forge-split-view-handle-width:8px;display:block;height:100%;width:100%;overflow:hidden;contain:paint size}:host([hidden]){display:none}:host([orientation=horizontal]) .forge-split-view{-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row}:host([orientation=vertical]) .forge-split-view{-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column}';
+const styles = '.forge-split-view{display:-webkit-box;display:flex;width:100%;height:100%}:host{--forge-split-view-handle-width:8px;display:block;height:100%;width:100%;overflow:hidden;contain:paint size}:host([hidden]){display:none}:host([orientation=horizontal]) .forge-split-view{-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row}:host([orientation=vertical]) .forge-split-view{-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column}';
 /**
  * The custom element class behind the `<forge-split-view>` element.
  *

package/esm/split-view/split-view-panel/split-view-panel-adapter.d.ts

@@ -35,8 +35,7 @@ export interface ISplitViewPanelAdapter extends IBaseAdapter {
     getAvailableSpace(orientation: SplitViewOrientation, resizable: SplitViewPanelResizable): number;
     getSiblingContentSize(): number;
     setSiblingContentSize(value: number): void;
-    activateRipple(defaultActivated: boolean): void;
-    deactivateRipple(): void;
+    animateStateLayer(defaultActivated: boolean): void;
     getParentSize(orientation: SplitViewOrientation): number;
     updateParent(config: ISplitViewUpdateConfig): void;
 }
@@ -44,7 +43,7 @@ export declare class SplitViewPanelAdapter extends BaseAdapter<ISplitViewPanelCo
     private _root;
     private _handle;
     private _icon;
-    private _ripple;
+    private _stateLayer;
     private _content;
     private _parent?;
     private _overlay?;
@@ -152,14 +151,10 @@ export declare class SplitViewPanelAdapter extends BaseAdapter<ISplitViewPanelCo
      */
     setSiblingContentSize(value: number): void;
     /**
-     * Runs the ripple animation.
-     * @param fromActivated Whether the ripple starts from and should end in an activated state.
+     * Runs the state-layer animation.
+     * @param fromActivated Whether the state-layer starts from and should end in an activated state.
      */
-    activateRipple(fromActivated: boolean): void;
-    /**
-     * Deactivates the ripple.
-     */
-    deactivateRipple(): void;
+    animateStateLayer(fromActivated: boolean): void;
     /**
      * Gets the size of the parent split view along the axis of orientation.
      * @param orientation The component's orientation.

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

@@ -14,7 +14,7 @@ export class SplitViewPanelAdapter extends BaseAdapter {
         this._root = getShadowElement(component, SPLIT_VIEW_PANEL_CONSTANTS.selectors.ROOT);
         this._handle = getShadowElement(component, SPLIT_VIEW_PANEL_CONSTANTS.selectors.HANDLE);
         this._icon = getShadowElement(component, SPLIT_VIEW_PANEL_CONSTANTS.selectors.ICON);
-        this._ripple = getShadowElement(component, SPLIT_VIEW_PANEL_CONSTANTS.selectors.RIPPLE);
+        this._stateLayer = getShadowElement(component, SPLIT_VIEW_PANEL_CONSTANTS.selectors.STATE_LAYER);
         this._content = getShadowElement(component, SPLIT_VIEW_PANEL_CONSTANTS.selectors.CONTENT);
     }
     initialize() {
@@ -263,28 +263,20 @@ export class SplitViewPanelAdapter extends BaseAdapter {
         sibling === null || sibling === void 0 ? void 0 : sibling.setContentSize(value);
     }
     /**
-     * Runs the ripple animation.
-     * @param fromActivated Whether the ripple starts from and should end in an activated state.
+     * Runs the state-layer animation.
+     * @param fromActivated Whether the state-layer starts from and should end in an activated state.
      */
-    activateRipple(fromActivated) {
+    animateStateLayer(fromActivated) {
         if (fromActivated) {
-            this._ripple.deactivate();
             // Wait a short amount of time so the animation is distinguishable
             window.setTimeout(() => {
-                this._ripple.activate();
-            }, SPLIT_VIEW_PANEL_CONSTANTS.numbers.RIPPLE_ACTIVATION_WAIT);
+                this._stateLayer.playAnimation();
+            }, SPLIT_VIEW_PANEL_CONSTANTS.numbers.STATE_LAYER_ACTIVATION_WAIT);
         }
         else {
-            this._ripple.activate();
-            this._ripple.deactivate();
+            this._stateLayer.playAnimation();
         }
     }
-    /**
-     * Deactivates the ripple.
-     */
-    deactivateRipple() {
-        this._ripple.deactivate();
-    }
     /**
      * Gets the size of the parent split view along the axis of orientation.
      * @param orientation The component's orientation.

package/esm/split-view/split-view-panel/split-view-panel-constants.d.ts

@@ -35,14 +35,14 @@ export declare const SPLIT_VIEW_PANEL_CONSTANTS: {
         ROOT: string;
         HANDLE: string;
         ICON: string;
-        RIPPLE: string;
+        STATE_LAYER: string;
         CONTENT: string;
     };
     selectors: {
         ROOT: string;
         HANDLE: string;
         ICON: string;
-        RIPPLE: string;
+        STATE_LAYER: string;
         CONTENT: string;
     };
     events: {
@@ -56,7 +56,7 @@ export declare const SPLIT_VIEW_PANEL_CONSTANTS: {
         WILL_CLOSE: string;
     };
     numbers: {
-        RIPPLE_ACTIVATION_WAIT: number;
+        STATE_LAYER_ACTIVATION_WAIT: number;
     };
     customCssProperties: {
         SIZE: string;

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

@@ -34,14 +34,14 @@ const ids = {
     ROOT: 'root',
     HANDLE: 'handle',
     ICON: 'icon',
-    RIPPLE: 'ripple',
+    STATE_LAYER: 'state-layer',
     CONTENT: 'content'
 };
 const selectors = {
     ROOT: `#${ids.ROOT}`,
     HANDLE: `#${ids.HANDLE}`,
     ICON: `#${ids.ICON}`,
-    RIPPLE: `#${ids.RIPPLE}`,
+    STATE_LAYER: `#${ids.STATE_LAYER}`,
     CONTENT: `#${ids.CONTENT}`
 };
 const events = {
@@ -55,7 +55,7 @@ const events = {
     WILL_CLOSE: `${elementName}-will-close`
 };
 const numbers = {
-    RIPPLE_ACTIVATION_WAIT: 200
+    STATE_LAYER_ACTIVATION_WAIT: 200
 };
 const customCssProperties = {
     SIZE: '--forge-split-view-panel-size',

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

@@ -274,7 +274,6 @@ export class SplitViewPanelFoundation {
      */
     _handlePointerup() {
         this._adapter.setGrabbed(false);
-        this._adapter.deactivateRipple();
         this._endResize();
     }
     /**

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

@@ -148,7 +148,7 @@ export function handleBoundariesDuringResize(adapter, state, inputDevice) {
     if (state.currentSize <= state.min) {
         // Just reached the min
         if (!state.isAtMin) {
-            adapter.activateRipple(inputDevice === 'pointer');
+            adapter.animateStateLayer(inputDevice === 'pointer');
             if (inputDevice === 'pointer') {
                 adapter.setBodyCursor(state.orientation, { resizable: state.resizable, boundary: 'min' });
             }
@@ -165,7 +165,7 @@ export function handleBoundariesDuringResize(adapter, state, inputDevice) {
     if (state.currentSize >= max) {
         // Just reached the max
         if (!state.isAtMax) {
-            adapter.activateRipple(inputDevice === 'pointer');
+            adapter.animateStateLayer(inputDevice === 'pointer');
             if (inputDevice === 'pointer') {
                 adapter.setBodyCursor(state.orientation, { resizable: state.resizable, boundary: 'max' });
             }

package/esm/split-view/split-view-panel/split-view-panel.d.ts

@@ -35,8 +35,6 @@ declare global {
     }
 }
 /**
- * The custom element class behind the `<forge-split-view-panel>` element.
- *
  * @tag forge-split-view-panel
  */
 export declare class SplitViewPanelComponent extends BaseComponent implements ISplitViewPanelComponent {

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

@@ -12,12 +12,11 @@ import { SPLIT_VIEW_PANEL_CONSTANTS } from './split-view-panel-constants';
 import { SplitViewPanelFoundation } from './split-view-panel-foundation';
 import { SplitViewPanelAdapter } from './split-view-panel-adapter';
 import { IconComponent, IconRegistry } from '../../icon';
-import { RippleComponent } from '../../ripple';
-const template = '<template><div class=\"forge-split-view-panel\" id=\"root\" part=\"root\"><div class=\"forge-split-view-panel__handle\" id=\"handle\" part=\"handle\" role=\"separator\" aria-controls=\"content\" aria-grabbed=\"false\" tabindex=\"0\"><forge-icon class=\"forge-split-view-panel__icon\" id=\"icon\" part=\"icon\"></forge-icon><forge-ripple id=\"ripple\" part=\"ripple\"></forge-ripple></div><div class=\"forge-split-view-panel__content\" id=\"content\" part=\"content\" role=\"group\"><slot></slot></div></div></template>';
-const styles = '@-webkit-keyframes mdc-ripple-fg-radius-in{from{-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1);-webkit-transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1);transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1)}to{-webkit-transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1));transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}}@keyframes mdc-ripple-fg-radius-in{from{-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1);-webkit-transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1);transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1)}to{-webkit-transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1));transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}}@-webkit-keyframes mdc-ripple-fg-opacity-in{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:0}to{opacity:var(--mdc-ripple-fg-opacity, 0)}}@keyframes mdc-ripple-fg-opacity-in{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:0}to{opacity:var(--mdc-ripple-fg-opacity, 0)}}@-webkit-keyframes mdc-ripple-fg-opacity-out{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:var(--mdc-ripple-fg-opacity, 0)}to{opacity:0}}@keyframes mdc-ripple-fg-opacity-out{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:var(--mdc-ripple-fg-opacity, 0)}to{opacity:0}}.mdc-ripple-surface{--mdc-ripple-fg-size:0;--mdc-ripple-left:0;--mdc-ripple-top:0;--mdc-ripple-fg-scale:1;--mdc-ripple-fg-translate-end:0;--mdc-ripple-fg-translate-start:0;-webkit-tap-highlight-color:transparent;will-change:transform,opacity;position:relative;outline:0;overflow:hidden}.mdc-ripple-surface::after,.mdc-ripple-surface::before{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:\"\"}.mdc-ripple-surface::before{-webkit-transition:opacity 15ms linear,background-color 15ms linear;transition:opacity 15ms linear,background-color 15ms linear;z-index:1;z-index:var(--mdc-ripple-z-index,1)}.mdc-ripple-surface::after{z-index:0;z-index:var(--mdc-ripple-z-index,0)}.mdc-ripple-surface.mdc-ripple-upgraded::before{-webkit-transform:scale(var(--mdc-ripple-fg-scale,1));transform:scale(var(--mdc-ripple-fg-scale,1))}.mdc-ripple-surface.mdc-ripple-upgraded::after{top:0;left:0;-webkit-transform:scale(0);transform:scale(0);-webkit-transform-origin:center center;transform-origin:center center}.mdc-ripple-surface.mdc-ripple-upgraded--unbounded::after{top:var(--mdc-ripple-top,0);left:var(--mdc-ripple-left,0)}.mdc-ripple-surface.mdc-ripple-upgraded--foreground-activation::after{-webkit-animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards;animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards}.mdc-ripple-surface.mdc-ripple-upgraded--foreground-deactivation::after{-webkit-animation:mdc-ripple-fg-opacity-out 150ms;animation:mdc-ripple-fg-opacity-out 150ms;-webkit-transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1));transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}.mdc-ripple-surface::after,.mdc-ripple-surface::before{top:calc(50% - 100%);left:calc(50% - 100%);width:200%;height:200%}.mdc-ripple-surface.mdc-ripple-upgraded::after{width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.mdc-ripple-surface[data-mdc-ripple-is-unbounded],.mdc-ripple-upgraded--unbounded{overflow:visible}.mdc-ripple-surface[data-mdc-ripple-is-unbounded]::after,.mdc-ripple-surface[data-mdc-ripple-is-unbounded]::before,.mdc-ripple-upgraded--unbounded::after,.mdc-ripple-upgraded--unbounded::before{top:calc(50% - 50%);left:calc(50% - 50%);width:100%;height:100%}.mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::after,.mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::before,.mdc-ripple-upgraded--unbounded.mdc-ripple-upgraded::after,.mdc-ripple-upgraded--unbounded.mdc-ripple-upgraded::before{top:var(--mdc-ripple-top,calc(50% - 50%));left:var(--mdc-ripple-left,calc(50% - 50%));width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::after,.mdc-ripple-upgraded--unbounded.mdc-ripple-upgraded::after{width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.mdc-ripple-surface::after,.mdc-ripple-surface::before{background-color:#000;background-color:var(--mdc-ripple-color,#000)}.mdc-ripple-surface.mdc-ripple-surface--hover::before,.mdc-ripple-surface:hover::before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity, .04)}.mdc-ripple-surface.mdc-ripple-upgraded--background-focused::before,.mdc-ripple-surface:not(.mdc-ripple-upgraded):focus::before{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity, .12)}.mdc-ripple-surface:not(.mdc-ripple-upgraded)::after{-webkit-transition:opacity 150ms linear;transition:opacity 150ms linear}.mdc-ripple-surface:not(.mdc-ripple-upgraded):active::after{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity, .12)}.mdc-ripple-surface.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.12)}.mdc-ripple-surface::after,.mdc-ripple-surface::before{--mdc-ripple-color:var(--mdc-theme-on-surface)}.forge-split-view-panel{display:-webkit-box;display:flex;width:100%;height:100%;overflow:hidden;contain:paint size}.forge-split-view-panel__handle{color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-light,rgba(0,0,0,.54));background-color:#e0e0e0;background-color:var(--forge-theme-border-color,#e0e0e0);display:-webkit-box;display:flex;flex-shrink:0;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center;outline:0}.forge-split-view-panel__content{-webkit-box-flex:1;flex:1;overflow:hidden}.forge-split-view-panel--closed{display:none}.forge-split-view-panel--disabled #handle{pointer-events:none}.forge-split-view-panel--disabled .forge-split-view-panel__icon{display:none}.forge-split-view-panel[orientation=horizontal]{min-width:8px;min-width:var(--forge-split-view-handle-width,8px);width:calc(var(--forge-split-view-panel-size,unset) + var(--forge-split-view-handle-width,8px));-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row}.forge-split-view-panel[orientation=horizontal] .forge-split-view-panel__handle{width:8px;width:var(--forge-split-view-handle-width,8px);cursor:var(--forge-split-view-panel-cursor)}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--closing[resizable=end]{position:absolute;top:0;left:0;-webkit-animation-name:uyor2gb;animation-name:uyor2gb;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1)}@-webkit-keyframes uyor2gb{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(-100%);transform:translateX(-100%)}}@keyframes uyor2gb{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(-100%);transform:translateX(-100%)}}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--closing[resizable=start]{position:absolute;top:0;right:0;-webkit-animation-name:uyor2gn;animation-name:uyor2gn;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1)}@-webkit-keyframes uyor2gn{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(100%);transform:translateX(100%)}}@keyframes uyor2gn{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(100%);transform:translateX(100%)}}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--opening[resizable=end]{position:absolute;top:0;left:0;-webkit-animation-name:uyor2hd;animation-name:uyor2hd;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-direction:reverse}@-webkit-keyframes uyor2hd{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(-100%);transform:translateX(-100%)}}@keyframes uyor2hd{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(-100%);transform:translateX(-100%)}}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--opening[resizable=start]{position:absolute;top:0;right:0;-webkit-animation-name:uyor2id;animation-name:uyor2id;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-direction:reverse}@-webkit-keyframes uyor2id{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(100%);transform:translateX(100%)}}@keyframes uyor2id{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(100%);transform:translateX(100%)}}.forge-split-view-panel[orientation=vertical]{min-height:8px;min-height:var(--forge-split-view-handle-width,8px);height:calc(var(--forge-split-view-panel-size,unset) + var(--forge-split-view-handle-width,8px));-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column}.forge-split-view-panel[orientation=vertical] .forge-split-view-panel__handle{height:8px;height:var(--forge-split-view-handle-width,8px);cursor:var(--forge-split-view-panel-cursor)}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--closing[resizable=end]{position:absolute;top:0;left:0;-webkit-animation-name:uyor2ii;animation-name:uyor2ii;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1)}@-webkit-keyframes uyor2ii{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(-100%);transform:translateY(-100%)}}@keyframes uyor2ii{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(-100%);transform:translateY(-100%)}}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--closing[resizable=start]{position:absolute;bottom:0;left:0;-webkit-animation-name:uyor2il;animation-name:uyor2il;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1)}@-webkit-keyframes uyor2il{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(100%);transform:translateY(100%)}}@keyframes uyor2il{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(100%);transform:translateY(100%)}}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--opening[resizable=end]{position:absolute;top:0;left:0;-webkit-animation-name:uyor2j4;animation-name:uyor2j4;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-direction:reverse}@-webkit-keyframes uyor2j4{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(-100%);transform:translateY(-100%)}}@keyframes uyor2j4{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(-100%);transform:translateY(-100%)}}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--opening[resizable=start]{position:absolute;bottom:0;left:0;-webkit-animation-name:uyor2jt;animation-name:uyor2jt;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-direction:reverse}@-webkit-keyframes uyor2jt{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(100%);transform:translateY(100%)}}@keyframes uyor2jt{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(100%);transform:translateY(100%)}}:host{z-index:var(--forge-split-view-animating-layer)!important;display:block;position:relative;height:100%;width:100%;-webkit-box-flex:0;flex:0}:host([hidden]){display:none}:host(:not([resizable=start],[resizable=end])){-webkit-box-flex:1;flex:1}:host(:not([resizable=start],[resizable=end])) .forge-split-view-panel{width:100%;height:100%;min-width:0;min-height:0}:host(:not([resizable=start],[resizable=end])) .forge-split-view-panel__handle{display:none}';
+const template = '<template><div class=\"forge-split-view-panel\" id=\"root\" part=\"root\"><div class=\"forge-split-view-panel__handle\" id=\"handle\" part=\"handle\" role=\"separator\" aria-controls=\"content\" aria-grabbed=\"false\" tabindex=\"0\"><forge-icon class=\"forge-split-view-panel__icon\" id=\"icon\" part=\"icon\"></forge-icon><forge-state-layer target=\"handle\" id=\"state-layer\" exportparts=\"surface:state-layer\"></forge-state-layer><forge-focus-indicator inward target=\"handle\" part=\"focus-indicator\"></forge-focus-indicator></div><div class=\"forge-split-view-panel__content\" id=\"content\" part=\"content\" role=\"group\"><slot></slot></div></div></template>';
+const styles = '.forge-split-view-panel{display:-webkit-box;display:flex;width:100%;height:100%;overflow:hidden;contain:paint size}.forge-split-view-panel__handle{color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-light,rgba(0,0,0,.54));background-color:#e0e0e0;background-color:var(--forge-theme-border-color,#e0e0e0);position:relative;display:-webkit-box;display:flex;flex-shrink:0;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center;outline:0}.forge-split-view-panel__content{-webkit-box-flex:1;flex:1;overflow:hidden}.forge-split-view-panel--closed{display:none}.forge-split-view-panel--disabled #handle{pointer-events:none}.forge-split-view-panel--disabled .forge-split-view-panel__icon{display:none}.forge-split-view-panel[orientation=horizontal]{min-width:8px;min-width:var(--forge-split-view-handle-width,8px);width:calc(var(--forge-split-view-panel-size,unset) + var(--forge-split-view-handle-width,8px));-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row}.forge-split-view-panel[orientation=horizontal] .forge-split-view-panel__handle{width:8px;width:var(--forge-split-view-handle-width,8px);cursor:var(--forge-split-view-panel-cursor)}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--closing[resizable=end]{position:absolute;top:0;left:0;-webkit-animation-name:up9pg91;animation-name:up9pg91;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1)}@-webkit-keyframes up9pg91{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(-100%);transform:translateX(-100%)}}@keyframes up9pg91{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(-100%);transform:translateX(-100%)}}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--closing[resizable=start]{position:absolute;top:0;right:0;-webkit-animation-name:up9pga1;animation-name:up9pga1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1)}@-webkit-keyframes up9pga1{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(100%);transform:translateX(100%)}}@keyframes up9pga1{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(100%);transform:translateX(100%)}}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--opening[resizable=end]{position:absolute;top:0;left:0;-webkit-animation-name:up9pga8;animation-name:up9pga8;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-direction:reverse}@-webkit-keyframes up9pga8{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(-100%);transform:translateX(-100%)}}@keyframes up9pga8{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(-100%);transform:translateX(-100%)}}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--opening[resizable=start]{position:absolute;top:0;right:0;-webkit-animation-name:up9pgat;animation-name:up9pgat;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-direction:reverse}@-webkit-keyframes up9pgat{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(100%);transform:translateX(100%)}}@keyframes up9pgat{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(100%);transform:translateX(100%)}}.forge-split-view-panel[orientation=vertical]{min-height:8px;min-height:var(--forge-split-view-handle-width,8px);height:calc(var(--forge-split-view-panel-size,unset) + var(--forge-split-view-handle-width,8px));-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column}.forge-split-view-panel[orientation=vertical] .forge-split-view-panel__handle{height:8px;height:var(--forge-split-view-handle-width,8px);cursor:var(--forge-split-view-panel-cursor)}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--closing[resizable=end]{position:absolute;top:0;left:0;-webkit-animation-name:up9pgbj;animation-name:up9pgbj;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1)}@-webkit-keyframes up9pgbj{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(-100%);transform:translateY(-100%)}}@keyframes up9pgbj{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(-100%);transform:translateY(-100%)}}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--closing[resizable=start]{position:absolute;bottom:0;left:0;-webkit-animation-name:up9pgca;animation-name:up9pgca;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1)}@-webkit-keyframes up9pgca{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(100%);transform:translateY(100%)}}@keyframes up9pgca{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(100%);transform:translateY(100%)}}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--opening[resizable=end]{position:absolute;top:0;left:0;-webkit-animation-name:up9pgcg;animation-name:up9pgcg;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-direction:reverse}@-webkit-keyframes up9pgcg{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(-100%);transform:translateY(-100%)}}@keyframes up9pgcg{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(-100%);transform:translateY(-100%)}}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--opening[resizable=start]{position:absolute;bottom:0;left:0;-webkit-animation-name:up9pgco;animation-name:up9pgco;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-direction:reverse}@-webkit-keyframes up9pgco{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(100%);transform:translateY(100%)}}@keyframes up9pgco{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(100%);transform:translateY(100%)}}:host{z-index:var(--forge-split-view-animating-layer)!important;display:block;position:relative;height:100%;width:100%;-webkit-box-flex:0;flex:0}:host([hidden]){display:none}:host(:not([resizable=start],[resizable=end])){-webkit-box-flex:1;flex:1}:host(:not([resizable=start],[resizable=end])) .forge-split-view-panel{width:100%;height:100%;min-width:0;min-height:0}:host(:not([resizable=start],[resizable=end])) .forge-split-view-panel__handle{display:none}forge-focus-indicator{--forge-focus-indicator-active-width:2px}';
+import { StateLayerComponent } from '../../state-layer';
+import { FocusIndicatorComponent } from '../../focus-indicator';
 /**
- * The custom element class behind the `<forge-split-view-panel>` element.
- *
  * @tag forge-split-view-panel
  */
 let SplitViewPanelComponent = class SplitViewPanelComponent extends BaseComponent {
@@ -171,7 +170,8 @@ SplitViewPanelComponent = __decorate([
         name: SPLIT_VIEW_PANEL_CONSTANTS.elementName,
         dependencies: [
             IconComponent,
-            RippleComponent
+            StateLayerComponent,
+            FocusIndicatorComponent
         ]
     })
 ], SplitViewPanelComponent);

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

@@ -6,13 +6,10 @@
 import { BaseAdapter, IBaseAdapter } from '../../core/base';
 import { IStepComponent } from './step';
 import { StepIcons } from './step-constants';
-import { ForgeRipple, ForgeRippleCapableSurface } 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;
@@ -34,12 +31,12 @@ 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 {
+export declare class StepAdapter extends BaseAdapter<IStepComponent> implements IStepAdapter {
     private _buttonElement;
     private _container;
-    private _rippleInstance;
     private _expansionSlot;
     private _expansionPanel;
+    private readonly _stateLayerElement;
     constructor(_component: IStepComponent);
     get root(): HTMLElement;
     unbounded: boolean;
@@ -47,9 +44,6 @@ export declare class StepAdapter extends BaseAdapter<IStepComponent> implements
     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;
@@ -70,7 +64,6 @@ export declare class StepAdapter extends BaseAdapter<IStepComponent> implements
     addExpansionPanelListener(event: string, listener: EventListener): void;
     removeExpansionPanelListener(event: string, listener: EventListener): void;
     isExpandedContentInFocus(checkElement?: HTMLElement): boolean;
-    private _createRipple;
     private _createExpansionPanel;
     private _createExpansionIcon;
 }

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

@@ -6,15 +6,15 @@
 import { addClass, getShadowElement, toggleAttribute, toggleClass } from '@tylertech/forge-core';
 import { BaseAdapter } from '../../core/base';
 import { STEP_CONSTANTS } from './step-constants';
-import { ForgeRipple, ForgeRippleFoundation } from '../../ripple';
+import { STATE_LAYER_CONSTANTS } from '../../state-layer';
 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);
+        this._stateLayerElement = getShadowElement(this._component, STATE_LAYER_CONSTANTS.elementName);
     }
-    // ForgeRippleCapableSurface
     get root() {
         return this._buttonElement;
     }
@@ -30,17 +30,6 @@ export class StepAdapter extends BaseAdapter {
     initialize() {
         this._component.setAttribute('role', 'tab');
     }
-    attachRipple() {
-        this._rippleInstance = this.initializeRipple();
-    }
-    detatchRipple() {
-        if (this._rippleInstance) {
-            this._rippleInstance.destroy();
-        }
-    }
-    initializeRipple() {
-        return this._createRipple();
-    }
     setIndex(value) {
         this._buttonElement.querySelector(STEP_CONSTANTS.selectors.INDEX).innerHTML = (value + 1 || '').toString();
     }
@@ -56,6 +45,7 @@ export class StepAdapter extends BaseAdapter {
     toggleDisabled(disabled) {
         toggleClass(this._buttonElement, disabled, STEP_CONSTANTS.classes.DISABLED);
         toggleAttribute(this._buttonElement, disabled, 'aria-disabled');
+        this._stateLayerElement.disabled = disabled;
         this._buttonElement.disabled = disabled;
     }
     toggleIcon(name, show) {
@@ -135,11 +125,6 @@ export class StepAdapter extends BaseAdapter {
     isExpandedContentInFocus(checkElement) {
         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;
-    }
     _createExpansionPanel() {
         const panel = document.createElement('forge-expansion-panel');
         panel.animationType = 'none';

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

@@ -7,27 +7,27 @@ import { COMPONENT_NAME_PREFIX } from '../../constants';
 const elementName = `${COMPONENT_NAME_PREFIX}step`;
 const classes = {
     STEP: 'forge-step',
-    STEP_CONTAINER: 'forge-step__container',
-    ERROR: 'forge-step--error',
-    SELECTED: 'forge-step--selected',
-    COMPLETED: 'forge-step--completed',
-    EDITABLE: 'forge-step--editable',
-    ALTERNATIVE: 'forge-step--alternative',
-    ICON_CONTENT: 'forge-step-icon-content',
-    ICON: 'forge-step-icon',
-    LABEL_CONTAINER: 'forge-step-label-container',
-    LABEL: 'forge-step-label',
-    OPTIONAL_LABEL: 'forge-step-optional-label',
-    INDEX: 'forge-step-index',
-    CLUSTERED: 'forge-step--clustered',
-    DISABLED: 'forge-step--disabled',
-    VERTICAL: 'forge-step--vertical',
-    EXPANDED: 'forge-step--expanded',
-    EXPANDABLE: 'forge-step--expandable',
-    EXPANSION_PANEL: 'forge-step__expansion-panel',
-    EXPANSION_ICON: 'forge-step__expanded-icon',
-    EXPANSION_ICON_EXPANDED: 'forge-step__expanded-icon--expanded',
-    EXPANSION_CONTENT: 'forge-step__expansion-content'
+    STEP_CONTAINER: 'container',
+    ERROR: 'error',
+    SELECTED: 'selected',
+    COMPLETED: 'completed',
+    EDITABLE: 'editable',
+    ALTERNATIVE: 'alternative',
+    ICON_CONTENT: 'icon-content',
+    ICON: 'icon',
+    LABEL_CONTAINER: 'label-container',
+    LABEL: 'label',
+    OPTIONAL_LABEL: 'optional-label',
+    INDEX: 'index',
+    CLUSTERED: 'clustered',
+    DISABLED: 'disabled',
+    VERTICAL: 'vertical',
+    EXPANDED: 'expanded',
+    EXPANDABLE: 'expandable',
+    EXPANSION_PANEL: 'expansion-panel',
+    EXPANSION_ICON: 'expanded-icon',
+    EXPANSION_ICON_EXPANDED: 'expanded-icon--expanded',
+    EXPANSION_CONTENT: 'expansion-content'
 };
 const attributes = {
     SELECTED: `selected`,

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

@@ -14,7 +14,6 @@ export class StepFoundation {
     }
     initialize() {
         this._adapter.initialize();
-        this._adapter.attachRipple();
         this._applySelected();
         this._toggleIcon();
         if (this._vertical) {
@@ -28,7 +27,6 @@ export class StepFoundation {
         this._initialized = true;
     }
     disconnect() {
-        this._adapter.detatchRipple();
         this._adapter.removeClickListener(this._clickListener);
         this._adapter.removeSlotListener(this._expansionContentSlotChangeListener);
         this._adapter.removeExpansionPanelListener('focusin', this._onExpansionContentFocusIn);

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

@@ -31,6 +31,59 @@ declare global {
  * The web component class behind the `<forge-step>` custom element.
  *
  * @tag forge-step
+ *
+ * @property {boolean} alternate - Whether the step is in the alternate style.
+ * @property {boolean} completed - Whether the step is completed.
+ * @property {boolean} editable - Whether the step is editable.
+ * @property {boolean} error - Whether the step has an error.
+ * @property {boolean} selected - Whether the step is selected.
+ * @property {boolean} disabled - Whether the step is disabled.
+ * @property {boolean} vertical - Whether the step is in vertical mode.
+ * @property {boolean} expanded - Whether the step is expanded.
+ * @property {boolean} ignoreUserExpansion - Whether the step should ignore user expansion.
+ * @property {number} index - The index of the step.
+ *
+ * @attribute {boolean} selected - Whether the step is selected.
+ * @attribute {number} index - The index of the step.
+ * @attribute {boolean} editable - Whether the step is editable.
+ * @attribute {boolean} completed - Whether the step is completed.
+ * @attribute {boolean} error - Whether the step has an error.
+ * @attribute {boolean} alternative - Whether the step is in alternative mode.
+ * @attribute {boolean} disabled - Whether the step is disabled.
+ * @attribute {boolean} vertical - Whether the step is in vertical mode.
+ * @attribute {boolean} expanded - Whether the step is expanded.
+ * @attribute {boolean} ignore-user-expansion - Whether the step should ignore user expansion.
+ *
+ * @cssproperty --forge-step-primary-color - The primary color of the step. Defaults to the primary theme.
+ * @cssproperty --forge-step-text-color - The text color of the step. Defaults to the on-primary theme.
+ * @cssproperty --forge-step-border-radius - The border radius of the step. Defaults to the extra-large shape.
+ * @cssproperty --forge-step-border-radius-vertical - The border radius of the step in vertical mode. Defaults to the medium shape.
+ * @cssproperty --forge-step-disabled-text-color - The text color of the step when disabled. Defaults to the text-low theme.
+ * @cssproperty --forge-step-disabled-color - The color of the step when disabled. Defaults to the surface-container-minimum theme.
+ * @cssproperty --forge-step-icon-fill - The fill color of the step icon. Defaults to unset.
+ * @cssproperty --forge-step-icon-fill-active - The fill color of the step icon when active. Defaults to the primary color.
+ * @cssproperty --forge-step-icon-text-color - The text color of the step icon. Defaults to the primary theme.
+ * @cssproperty --forge-step-icon-text-color-active - The text color of the step icon when active. Defaults to the on-primary theme.
+ * @cssproperty --forge-step-icon-content-size - The size of the step icon content. Defaults to 24px.
+ * @cssproperty --forge-step-icon-size - The size of the step icon. Defaults to 0.875em.
+ * @cssproperty --forge-step-icon-transition-duration - The duration of the step icon transition. Defaults to the medium4 animation duration.
+ * @cssproperty --forge-step-icon-transition-easing - The easing of the step icon transition. Defaults to the standard animation easing.
+ * @cssproperty --forge-step-line-color - The color of the step line. Defaults to the outline theme.
+ * @cssproperty --forge-step-line-min-width - The minimum width of the step line. Defaults to 10px.
+ * @cssproperty --forge-step-line-min-width-clustered - The minimum width of the step line when clustered. Defaults to 25px.
+ * @cssproperty --forge-step-label-color - The color of the step label. Defaults to the text-high theme.
+ * @cssproperty --forge-step-sub-label-color - The color of the step sub-label. Defaults to the text-medium theme.
+ * @cssproperty --forge-step-error-color - The color of the step error. Defaults to the error theme.
+ * @cssproperty --forge-step-error-text-color - The text color of the step error. Defaults to the on-error theme.
+ * @cssproperty --forge-step-expansion-panel-border-left-width - The border left width of the step expansion panel. Defaults to 1px.
+ * @cssproperty --forge-step-expansion-panel-margin-bottom - The margin bottom of the step expansion panel. Defaults to 4px.
+ * @cssproperty --forge-step-expansion-panel-margin-left - The margin left of the step expansion panel. Defaults to 60px.
+ * @cssproperty --forge-step-expansion-panel-margin-top - The margin top of the step expansion panel. Defaults to 4px.
+ * @cssproperty --forge-step-expansion-panel-icon-color - The color of the step expansion panel icon. Defaults to the text-medium theme.
+ *
+ * @slot - The content of the step.
+ * @slot optional - The optional content of the step.
+ * @slot expansion-content - The content of the step expansion.
  */
 export declare class StepComponent extends BaseComponent implements IStepComponent {
     static get observedAttributes(): string[];