@tylertech/forge 3.10.5 → 3.12.0

package/esm/skeleton/skeleton.d.ts

@@ -14,7 +14,7 @@ declare global {
 /**
  * @tag forge-skeleton
  *
- * @summary Skeleton is used to provide a placeholder for content that is loading.
+ * @summary Skeletons are used to provide a placeholder for content that is loading. They have various styles to represent different types of content.
  *
  * @attribute {string} form-field - Apply form field styles to the skeleton.
  * @attribute {string} button - Apply button styles to the skeleton.

package/esm/skeleton/skeleton.js

@@ -12,7 +12,7 @@ const styles = '@keyframes forge-skeleton-loading{100%,25%{transform:translateX(
 /**
  * @tag forge-skeleton
  *
- * @summary Skeleton is used to provide a placeholder for content that is loading.
+ * @summary Skeletons are used to provide a placeholder for content that is loading. They have various styles to represent different types of content.
  *
  * @attribute {string} form-field - Apply form field styles to the skeleton.
  * @attribute {string} button - Apply button styles to the skeleton.

package/esm/skip-link/skip-link.d.ts

@@ -21,7 +21,7 @@ declare global {
 /**
  * @tag forge-skip-link
  *
- * @summary The Forge Skip Link component is used to provide a way for users to skip repetitive content and navigate directly to a section of the page.
+ * @summary The Forge Skip Link component is used to provide an accessible way for users to skip repetitive content and navigate directly to a section of the page. This is used for screen reader and keyboard users to improve the overall accessibility of web applications.
  *
  * @cssproperty --forge-skip-link-background - The background color of the skip link.
  * @cssproperty --forge-skip-link-color - The text color of the skip link.

package/esm/skip-link/skip-link.js

@@ -14,7 +14,7 @@ const style = ':host{--_skip-link-inset:var(--forge-skip-link-inset, var(--forge
 /**
  * @tag forge-skip-link
  *
- * @summary The Forge Skip Link component is used to provide a way for users to skip repetitive content and navigate directly to a section of the page.
+ * @summary The Forge Skip Link component is used to provide an accessible way for users to skip repetitive content and navigate directly to a section of the page. This is used for screen reader and keyboard users to improve the overall accessibility of web applications.
  *
  * @cssproperty --forge-skip-link-background - The background color of the skip link.
  * @cssproperty --forge-skip-link-color - The text color of the skip link.

package/esm/slider/slider.d.ts

@@ -36,7 +36,7 @@ declare global {
 /**
  * @tag forge-slider
  *
- * @summary Sliders allow users to make selections from a range of values.
+ * @summary Sliders allow users to make selections from a range of values. You can use sliders for selecting values from either a continuous or discrete range, and they can also be used for selecting a single value or a range of values.
  *
  * @description Use sliders to enable users to select a value from a continuous or discrete range of values.
  *

package/esm/slider/slider.js

@@ -17,7 +17,7 @@ const styles = ':host{display:inline-flex;vertical-align:middle;min-inline-size:
 /**
  * @tag forge-slider
  *
- * @summary Sliders allow users to make selections from a range of values.
+ * @summary Sliders allow users to make selections from a range of values. You can use sliders for selecting values from either a continuous or discrete range, and they can also be used for selecting a single value or a range of values.
  *
  * @description Use sliders to enable users to select a value from a continuous or discrete range of values.
  *

package/esm/split-button/split-button.d.ts

@@ -21,7 +21,7 @@ declare global {
 /**
  * @tag forge-split-button
  *
- * @summary Split buttons are used for splitting an action into two parts.
+ * @summary Split buttons are used for splitting an action into two parts, typically a primary action and a secondary action that opens a menu or performs an alternative action. Split buttons expect child Forge buttons as their content.
  *
  * @dependency forge-button
  *

package/esm/split-button/split-button.js

@@ -11,11 +11,11 @@ import { SplitButtonAdapter } from './split-button-adapter';
 import { SPLIT_BUTTON_CONSTANTS } from './split-button-constants';
 import { SplitButtonCore } from './split-button-core';
 const template = '<template><slot></slot></template>';
-const styles = ':host{--_split-button-min-width:var(--forge-split-button-min-width, 0);--_split-button-gap:var(--forge-split-button-gap, var(--forge-border-thin, 1px));--_split-button-focus-indicator-offset:var(--forge-split-button-focus-indicator-offset, var(--forge-button-focus-indicator-offset, 4px));--_split-button-focus-indicator-divider-offset:var(--forge-split-button-focus-indicator-divider-offset, var(--_split-button-gap));--_split-button-focus-indicator-offset-adjusted:calc(var(--_split-button-focus-indicator-offset) + var(--_split-button-focus-indicator-divider-offset) * 2)}:host{display:inline-flex;justify-content:center;align-items:center}:host([hidden]){display:none}::slotted(*){--forge-button-min-width:var(--_split-button-min-width);--forge-button-focus-indicator-offset:var(--_split-button-focus-indicator-offset)}::slotted(:first-child){--forge-button-shape-start-end-radius:0;--forge-button-shape-end-end-radius:0;--forge-focus-indicator-shape-start-end:0;--forge-focus-indicator-shape-end-end:0;--forge-focus-indicator-offset-inline:0 var(--_split-button-focus-indicator-offset-adjusted)}::slotted(:not(:first-child):not(:last-child)){--forge-button-shape:0;--forge-focus-indicator-shape:0;--forge-focus-indicator-offset-inline:var(--_split-button-focus-indicator-offset-adjusted)}::slotted(:last-child){--forge-button-shape-start-start-radius:0;--forge-button-shape-end-start-radius:0;--forge-focus-indicator-shape-start-start:0;--forge-focus-indicator-shape-end-start:0;--forge-focus-indicator-offset-inline:var(--_split-button-focus-indicator-offset-adjusted) 0}:host([variant=outlined]){--_split-button-focus-indicator-divider-offset:var(--forge-split-button-focus-indicator-divider-offset, 0px)}:host([variant=outlined]) ::slotted(:not(:first-child)){margin-inline-start:calc(-1 * var(--_split-button-gap))}:host(:is([variant=tonal],[variant=filled],[variant=raised],:not([variant]))) ::slotted(:not(:last-child)){margin-inline-end:var(--_split-button-gap)}';
+const styles = ':host{--_split-button-min-width:var(--forge-split-button-min-width, 0);--_split-button-gap:var(--forge-split-button-gap, var(--forge-border-thin, 1px));--_split-button-focus-indicator-offset:var(--forge-split-button-focus-indicator-offset, var(--forge-button-focus-indicator-offset, 4px));--_split-button-focus-indicator-divider-offset:var(--forge-split-button-focus-indicator-divider-offset, var(--_split-button-gap));--_split-button-focus-indicator-offset-adjusted:calc(var(--_split-button-focus-indicator-offset) + var(--_split-button-focus-indicator-divider-offset) * 2)}:host{display:inline-flex;justify-content:center;align-items:center}:host([hidden]){display:none}::slotted(*){--forge-button-min-width:var(--_split-button-min-width);--forge-button-focus-indicator-offset:var(--_split-button-focus-indicator-offset)}::slotted(:first-child){--forge-button-shape-start-end-radius:0;--forge-button-shape-end-end-radius:0;--forge-focus-indicator-shape-start-end:0;--forge-focus-indicator-shape-end-end:0;--forge-focus-indicator-offset-inline:0 var(--_split-button-focus-indicator-offset-adjusted)}::slotted(:not(:first-child):not(:last-child)){--forge-button-shape:0;--forge-focus-indicator-shape:0;--forge-focus-indicator-offset-inline:var(--_split-button-focus-indicator-offset-adjusted)}::slotted(:last-child){--forge-button-shape-start-start-radius:0;--forge-button-shape-end-start-radius:0;--forge-focus-indicator-shape-start-start:0;--forge-focus-indicator-shape-end-start:0;--forge-focus-indicator-offset-inline:var(--_split-button-focus-indicator-offset-adjusted) 0}:host([variant=outlined]) ::slotted(:not(:first-child)){margin-inline-start:calc(-1 * var(--_split-button-gap))}:host([variant=outlined]){--_split-button-focus-indicator-divider-offset:var(--forge-split-button-focus-indicator-divider-offset, 0px)}:host(:is([variant=tonal],[variant=filled],[variant=raised],:not([variant]))) ::slotted(:not(:last-child)){margin-inline-end:var(--_split-button-gap)}';
 /**
  * @tag forge-split-button
  *
- * @summary Split buttons are used for splitting an action into two parts.
+ * @summary Split buttons are used for splitting an action into two parts, typically a primary action and a secondary action that opens a menu or performs an alternative action. Split buttons expect child Forge buttons as their content.
  *
  * @dependency forge-button
  *

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

@@ -21,6 +21,8 @@ declare global {
 }
 /**
  * @tag forge-split-view
+ *
+ * @summary Split views create resizable panels that allow users to adjust the space between content areas.
  */
 export declare class SplitViewComponent extends BaseComponent implements ISplitViewComponent {
     static get observedAttributes(): string[];

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

@@ -14,6 +14,8 @@ const template = '<template><div class=\"forge-split-view\" id=\"root\" part=\"r
 const styles = '.forge-split-view{display:flex;width:100%;height:100%}:host{--forge-split-view-handle-width:8px;display:block;height:100%;width:100%;overflow:hidden}:host([hidden]){display:none}:host([orientation=horizontal]) .forge-split-view{flex-direction:row}:host([orientation=vertical]) .forge-split-view{flex-direction:column}';
 /**
  * @tag forge-split-view
+ *
+ * @summary Split views create resizable panels that allow users to adjust the space between content areas.
  */
 let SplitViewComponent = class SplitViewComponent extends BaseComponent {
     static get observedAttributes() {

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

@@ -37,6 +37,8 @@ declare global {
 /**
  * @tag forge-split-view-panel
  *
+ * @summary Individual panels within split views that can be resized and collapsed.
+ *
  * @dependency forge-icon
  * @dependency forge-state-layer
  * @dependency forge-focus-indicator

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

@@ -14,10 +14,12 @@ import { IconComponent, IconRegistry } from '../../icon';
 import { StateLayerComponent } from '../../state-layer';
 import { FocusIndicatorComponent } from '../../focus-indicator';
 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:flex;width:100%;height:100%;overflow:hidden}.forge-split-view-panel__handle{color:var(--forge-theme-text-medium,rgba(0,0,0,.6));background-color:var(--forge-theme-outline,#e0e0e0);position:relative;display:flex;flex-shrink:0;justify-content:center;align-items:center;outline:0}.forge-split-view-panel__content{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:var(--forge-split-view-handle-width,8px);width:calc(var(--forge-split-view-panel-size,unset) + var(--forge-split-view-handle-width,8px));flex-direction:row}.forge-split-view-panel[orientation=horizontal] .forge-split-view-panel__handle{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;animation-name:uhqbsid;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes uhqbsid{from{transform:none}to{transform:translateX(-100%)}}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--closing[resizable=start]{position:absolute;top:0;right:0;animation-name:uhqbsj9;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes uhqbsj9{from{transform:none}to{transform:translateX(100%)}}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--opening[resizable=end]{position:absolute;top:0;left:0;animation-name:uhqbsjp;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1));animation-direction:reverse}@keyframes uhqbsjp{from{transform:none}to{transform:translateX(-100%)}}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--opening[resizable=start]{position:absolute;top:0;right:0;animation-name:uhqbskm;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1));animation-direction:reverse}@keyframes uhqbskm{from{transform:none}to{transform:translateX(100%)}}.forge-split-view-panel[orientation=vertical]{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));flex-direction:column}.forge-split-view-panel[orientation=vertical] .forge-split-view-panel__handle{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;animation-name:uhqbslj;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes uhqbslj{from{transform:none}to{transform:translateY(-100%)}}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--closing[resizable=start]{position:absolute;bottom:0;left:0;animation-name:uhqbslt;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes uhqbslt{from{transform:none}to{transform:translateY(100%)}}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--opening[resizable=end]{position:absolute;top:0;left:0;animation-name:uhqbsm4;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1));animation-direction:reverse}@keyframes uhqbsm4{from{transform:none}to{transform:translateY(-100%)}}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--opening[resizable=start]{position:absolute;bottom:0;left:0;animation-name:uhqbsmg;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1));animation-direction:reverse}@keyframes uhqbsmg{from{transform:none}to{transform:translateY(100%)}}:host{z-index:var(--forge-split-view-animating-layer)!important;display:block;position:relative;height:100%;width:100%;flex:0}:host([hidden]){display:none}:host(:not([resizable=start],[resizable=end])){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}';
+const styles = '.forge-split-view-panel{display:flex;width:100%;height:100%;overflow:hidden}.forge-split-view-panel__handle{color:var(--forge-theme-text-medium,rgba(0,0,0,.6));background-color:var(--forge-theme-outline,#e0e0e0);position:relative;display:flex;flex-shrink:0;justify-content:center;align-items:center;outline:0}.forge-split-view-panel__content{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:var(--forge-split-view-handle-width,8px);width:calc(var(--forge-split-view-panel-size,unset) + var(--forge-split-view-handle-width,8px));flex-direction:row}.forge-split-view-panel[orientation=horizontal] .forge-split-view-panel__handle{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;animation-name:u1p3dq5;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes u1p3dq5{from{transform:none}to{transform:translateX(-100%)}}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--closing[resizable=start]{position:absolute;top:0;right:0;animation-name:u1p3dr4;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes u1p3dr4{from{transform:none}to{transform:translateX(100%)}}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--opening[resizable=end]{position:absolute;top:0;left:0;animation-name:u1p3dra;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes u1p3dra{from{transform:none}to{transform:translateX(-100%)}}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--opening[resizable=end]{animation-direction:reverse}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--opening[resizable=start]{position:absolute;top:0;right:0;animation-name:u1p3dro;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes u1p3dro{from{transform:none}to{transform:translateX(100%)}}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--opening[resizable=start]{animation-direction:reverse}.forge-split-view-panel[orientation=vertical]{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));flex-direction:column}.forge-split-view-panel[orientation=vertical] .forge-split-view-panel__handle{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;animation-name:u1p3ds7;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes u1p3ds7{from{transform:none}to{transform:translateY(-100%)}}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--closing[resizable=start]{position:absolute;bottom:0;left:0;animation-name:u1p3dsd;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes u1p3dsd{from{transform:none}to{transform:translateY(100%)}}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--opening[resizable=end]{position:absolute;top:0;left:0;animation-name:u1p3dtb;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes u1p3dtb{from{transform:none}to{transform:translateY(-100%)}}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--opening[resizable=end]{animation-direction:reverse}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--opening[resizable=start]{position:absolute;bottom:0;left:0;animation-name:u1p3dtn;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes u1p3dtn{from{transform:none}to{transform:translateY(100%)}}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--opening[resizable=start]{animation-direction:reverse}:host{z-index:var(--forge-split-view-animating-layer)!important;display:block;position:relative;height:100%;width:100%;flex:0}:host([hidden]){display:none}:host(:not([resizable=start],[resizable=end])){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}';
 /**
  * @tag forge-split-view-panel
  *
+ * @summary Individual panels within split views that can be resized and collapsed.
+ *
  * @dependency forge-icon
  * @dependency forge-state-layer
  * @dependency forge-focus-indicator

package/esm/stack/stack.d.ts

@@ -21,14 +21,7 @@ declare global {
 /**
  * @tag forge-stack
  *
- * @summary The stack is a utility component that helps manage spacing and alignment of immediate children along a vertical or horizontal axis.
- *
- * @description
- * The stack utility component uses flexbox under the hood, but it is not meant to be an abstraction or replacement for CSS flexbox.
- * Stack is simply a utility component for developer convenience. There are many UI patterns and situations where elements need to be
- * arranged horizontally or vertically with a specific gap inbetween. Instead of having to use an inline style or create a new CSS class for
- * these scenarios, you can reach for the stack. This keeps developers within a template and prevents having to jump around from HTML
- * to CSS. It also helps minimize the number of CSS classes being used for simple situations where basic flexbox is needed.
+ * @summary The stack is a utility component that helps manage spacing and alignment of immediate children along a vertical or horizontal axis. Use stacks sparingly to avoid unnecessary DOM complexity, and prefer CSS flexbox or grid for more complex layouts.
  *
  * @cssproperty --forge-stack-alignment - Controls the align-items CSS property of the root stack element.
  * @cssproperty --forge-stack-justify - Controls the justify-content CSS property of the root stack element.

package/esm/stack/stack.js

@@ -14,14 +14,7 @@ const styles = '.forge-stack{display:flex;flex-direction:column;align-items:var(
 /**
  * @tag forge-stack
  *
- * @summary The stack is a utility component that helps manage spacing and alignment of immediate children along a vertical or horizontal axis.
- *
- * @description
- * The stack utility component uses flexbox under the hood, but it is not meant to be an abstraction or replacement for CSS flexbox.
- * Stack is simply a utility component for developer convenience. There are many UI patterns and situations where elements need to be
- * arranged horizontally or vertically with a specific gap inbetween. Instead of having to use an inline style or create a new CSS class for
- * these scenarios, you can reach for the stack. This keeps developers within a template and prevents having to jump around from HTML
- * to CSS. It also helps minimize the number of CSS classes being used for simple situations where basic flexbox is needed.
+ * @summary The stack is a utility component that helps manage spacing and alignment of immediate children along a vertical or horizontal axis. Use stacks sparingly to avoid unnecessary DOM complexity, and prefer CSS flexbox or grid for more complex layouts.
  *
  * @cssproperty --forge-stack-alignment - Controls the align-items CSS property of the root stack element.
  * @cssproperty --forge-stack-justify - Controls the justify-content CSS property of the root stack element.

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

@@ -19,7 +19,7 @@ declare global {
 /**
  * @tag forge-state-layer
  *
- * @summary State layers show the interaction status of an element.
+ * @summary State layers show the interaction status of an element. These layers are semi-transparent overlays that indicate hover, focus, press, and drag states. State layers are building blocks for components and should generally not be used directly, but part of other components that have interactive states.
  *
  * @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.

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

@@ -10,11 +10,11 @@ import { StateLayerCore } from './state-layer-core';
 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{--_state-layer-display:var(--forge-state-layer-display, flex)}:host{border-radius:inherit;position:absolute;inset:0;overflow:hidden;display:var(--_state-layer-display);margin:auto;pointer-events:none;-webkit-tap-highlight-color:transparent}:host([hidden]){display:none}:host([disabled]){display:none}.forge-state-layer{--_state-layer-color:var(--forge-state-layer-color, var(--forge-theme-on-surface, #000000));--_state-layer-hover-color:var(--forge-state-layer-hover-color, var(--_state-layer-color));--_state-layer-hover-opacity:var(--forge-state-layer-hover-opacity, 0.08);--_state-layer-pressed-color:var(--forge-state-layer-pressed-color, var(--_state-layer-color));--_state-layer-pressed-opacity:var(--forge-state-layer-pressed-opacity, 0.12);--_state-layer-hover-duration:var(--forge-state-layer-hover-duration, 15ms);--_state-layer-pressed-duration:var(--forge-state-layer-pressed-duration, 105ms);--_state-layer-animation-duration:var(--forge-state-layer-animation-duration, 375ms)}.forge-state-layer::after,.forge-state-layer::before{content:\"\";opacity:0;position:absolute}.forge-state-layer::before{background-color:var(--_state-layer-hover-color);inset:0;transition:opacity var(--_state-layer-hover-duration) linear,background-color var(--_state-layer-hover-duration) linear}.forge-state-layer::after{background:radial-gradient(closest-side,var(--_state-layer-pressed-color) max(100% - 70px,65%),transparent 100%);transform-origin:center center;transition:opacity var(--_state-layer-animation-duration) linear}.forge-state-layer--hovered::before{background-color:var(--_state-layer-hover-color);opacity:var(--_state-layer-hover-opacity)}.forge-state-layer--pressed::after{opacity:var(--_state-layer-pressed-opacity);transition-duration:var(--_state-layer-pressed-duration)}@media screen and (forced-colors:active){:host{display:none}}';
+const styles = ':host{--_state-layer-display:var(--forge-state-layer-display, flex)}:host{border-radius:inherit;position:absolute;inset:0;overflow:hidden;display:var(--_state-layer-display);margin:auto;pointer-events:none;-webkit-tap-highlight-color:transparent}:host([hidden]){display:none}:host([disabled]){display:none}.forge-state-layer{--_state-layer-color:var(--forge-state-layer-color, var(--forge-theme-on-surface, #000000));--_state-layer-hover-color:var(--forge-state-layer-hover-color, var(--_state-layer-color));--_state-layer-hover-opacity:var(--forge-state-layer-hover-opacity, 0.08);--_state-layer-pressed-color:var(--forge-state-layer-pressed-color, var(--_state-layer-color));--_state-layer-pressed-opacity:var(--forge-state-layer-pressed-opacity, 0.12);--_state-layer-hover-duration:var(--forge-state-layer-hover-duration, 15ms);--_state-layer-pressed-duration:var(--forge-state-layer-pressed-duration, 105ms);--_state-layer-animation-duration:var(--forge-state-layer-animation-duration, 375ms)}.forge-state-layer::after,.forge-state-layer::before{content:\"\";opacity:0;position:absolute;backface-visibility:hidden;transform:translateZ(0)}.forge-state-layer::before{background-color:var(--_state-layer-hover-color);inset:0;transition:opacity var(--_state-layer-hover-duration) linear,background-color var(--_state-layer-hover-duration) linear}.forge-state-layer::after{background:radial-gradient(closest-side,var(--_state-layer-pressed-color) max(100% - 70px,65%),transparent 100%);transform-origin:center center;transition:opacity var(--_state-layer-animation-duration) linear}.forge-state-layer--hovered::before{background-color:var(--_state-layer-hover-color);opacity:var(--_state-layer-hover-opacity)}.forge-state-layer--pressed::after{opacity:var(--_state-layer-pressed-opacity);transition-duration:var(--_state-layer-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.
+ * @summary State layers show the interaction status of an element. These layers are semi-transparent overlays that indicate hover, focus, press, and drag states. State layers are building blocks for components and should generally not be used directly, but part of other components that have interactive states.
  *
  * @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.

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

@@ -29,6 +29,8 @@ declare global {
 /**
  * @tag forge-step
  *
+ * @summary Individual steps within a stepper component that represent progress in a multi-step process.
+ *
  * @property {boolean} [alternative=false] - Whether the step is in the alternative style.
  * @property {boolean} [completed=false] - Whether the step is completed.
  * @property {boolean} [editable=false] - Whether the step is editable.

package/esm/stepper/step/step.js

@@ -15,10 +15,12 @@ import { ExpansionPanelComponent } from '../../expansion-panel';
 import { StateLayerComponent } from '../../state-layer';
 import { FocusIndicatorComponent } from '../../focus-indicator';
 const template = '<template><div class=\"container\" part=\"root\"><div class=\"forge-step\" part=\"step\"><div class=\"before\" part=\"before\"></div><div class=\"icon-container\" part=\"icon-container\"><div class=\"icon-content\" part=\"icon-content\"><span class=\"index\" part=\"index\"></span><forge-icon class=\"icon\" part=\"icon\"></forge-icon></div></div><div class=\"text-container\" part=\"text-container\"><div class=\"title\" part=\"title-container\"><slot></slot></div><div class=\"subtitle\" part=\"subtitle-container\"><slot name=\"optional\"></slot></div></div><div class=\"after\" part=\"after\"></div><forge-state-layer exportparts=\"surface:state-layer\" target=\":host\"></forge-state-layer><forge-focus-indicator part=\"focus-indicator\" target=\":host\" inward></forge-focus-indicator></div></div></template>';
-const styles = ':host{--_step-primary-color:var(--forge-step-primary-color, var(--forge-theme-primary, #3f51b5));--_step-text-color:var(--forge-step-text-color, var(--forge-theme-on-primary, #ffffff));--_step-border-radius:var(--forge-step-border-radius, calc(var(--forge-shape-extra-large, 16px) * var(--forge-shape-factor, 1)));--_step-border-radius-vertical:var(--forge-step-border-radius-vertical, calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1)));--_step-disabled-text-color:var(--forge-step-disabled-text-color, var(--forge-theme-text-low, rgba(0, 0, 0, 0.38)));--_step-disabled-color:var(--forge-step-disabled-color, var(--forge-theme-surface-container-minimum, #f5f5f5));--_step-icon-fill:var(--forge-step-icon-fill, unset);--_step-icon-fill-active:var(--forge-step-icon-fill-active, var(--_step-primary-color));--_step-icon-text-color:var(--forge-step-icon-text-color, var(--forge-theme-primary, #3f51b5));--_step-icon-text-color-active:var(--forge-step-icon-text-color-active, var(--forge-theme-on-primary, #ffffff));--_step-icon-content-size:var(--forge-step-icon-content-size, 24px);--_step-icon-size:var(--forge-step-icon-size, calc(var(--forge-typography-font-size, 1rem) * 0.875));--_step-icon-transition-duration:var(--forge-step-icon-transition-duration, var(--forge-animation-duration-medium4, 400ms));--_step-icon-transition-easing:var(--forge-step-icon-transition-easing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_step-line-color:var(--forge-step-line-color, var(--forge-theme-outline, #e0e0e0));--_step-line-min-width:var(--forge-step-line-min-width, 10px);--_step-line-min-width-clustered:var(--forge-step-line-min-width-clustered, 25px);--_step-label-color:var(--forge-step-label-color, var(--forge-theme-text-high, rgba(0, 0, 0, 0.87)));--_step-sub-label-color:var(--forge-step-sub-label-color, var(--forge-theme-text-medium, rgba(0, 0, 0, 0.6)));--_step-error-color:var(--forge-step-error-color, var(--forge-theme-error, #b00020));--_step-error-text-color:var(--forge-step-error-text-color, var(--forge-theme-on-error, #ffffff));--_step-expansion-panel-border-left-width:var(--forge-step-expansion-panel-border-left-width, 1px);--_step-expansion-panel-margin-bottom:var(--forge-step-expansion-panel-margin-bottom, 4px);--_step-expansion-panel-margin-left:var(--forge-step-expansion-panel-margin-left, 60px);--_step-expansion-panel-margin-top:var(--forge-step-expansion-panel-margin-top, 4px);--_step-expansion-panel-icon-color:var(--forge-step-expansion-panel-icon-color, var(--forge-theme-text-medium, rgba(0, 0, 0, 0.6)))}:host(:focus){outline:0}:host([error]){--forge-state-layer-color:var(--_step-error-color)}:host(:first-child[alternative])::after{align-self:flex-start;top:22px;margin:0}:host(:last-child[alternative])::before{align-self:flex-start;top:22px;margin:0}:host(:not(:first-child):not(:last-child)[alternative])::after,:host(:not(:first-child):not(:last-child)[alternative])::before{align-self:flex-start;top:22px;min-width:7px;margin:0}:host(:not(:last-child)[alternative]) .after{align-self:flex-start;top:22px;position:absolute;width:calc(50% - 18px);left:calc(50% + 18px);height:0;right:0}:host(:not(:first-child)[alternative]) .before{align-self:flex-start;top:22px;position:absolute;left:0;width:calc(50% - 18px);height:0}:host(:not(:first-child):not(:last-child)):host(:not([vertical]))::after,:host(:not(:first-child):not(:last-child)):host(:not([vertical]))::before{border-color:var(--_step-line-color);min-width:var(--_step-line-min-width);content:\"\";position:relative;height:0;flex:1;flex-basis:0.000000001px;border-top-style:solid;border-top-width:1px;border-radius:1px 0 0 1px;margin:0 -10px}:host(:last-child):host(:not([vertical]))::before{border-color:var(--_step-line-color);min-width:var(--_step-line-min-width);content:\"\";position:relative;height:0;flex:1;flex-basis:0.000000001px;border-top-style:solid;border-top-width:1px;border-radius:1px 0 0 1px;margin:0 -10px 0 0}:host(:is(:first-child)):host(:not([vertical]))::after{border-color:var(--_step-line-color);min-width:var(--_step-line-min-width);content:\"\";position:relative;height:0;flex:1;flex-basis:0.000000001px;border-top-style:solid;border-top-width:1px;border-radius:1px 0 0 1px;margin:0 -10px}:host([vertical]){flex-direction:column}:host([vertical])::after{content:none}:host([vertical])::before{content:none}:host([vertical]) .forge-step{--_step-border-radius:var(--_step-border-radius-vertical);width:100%;min-height:52px}:host([vertical]) .forge-step .text-container{white-space:normal}:host([vertical]) .icon-container .icon-content{margin:0 16px 0 0}:host([vertical]) .expansion-panel{display:none}:host([vertical]) .expanded-icon{color:var(--_step-expansion-panel-icon-color);display:none;margin-left:auto}:host([vertical][expandable]) .expansion-panel{display:block}:host([ignore-user-expansion]) .forge-step .expanded-icon{display:none}forge-expansion-panel::part(root){border-color:var(--_step-line-color);margin-left:var(--_step-expansion-panel-margin-left);margin-top:var(--_step-expansion-panel-margin-top);margin-bottom:var(--_step-expansion-panel-margin-bottom);border-left-width:var(--_step-expansion-panel-border-left-width);border-left-style:solid}forge-focus-indicator{--forge-focus-indicator-color:var(--_step-primary-color);--forge-focus-indicator-shape:16px}.container{display:contents}.forge-step{-webkit-tap-highlight-color:transparent;padding:12px 16px;outline:0;background:0 0;border:none;border-radius:var(--_step-border-radius);position:relative;display:flex;overflow:hidden;align-items:center;box-sizing:border-box;cursor:pointer}.forge-step:focus{outline:0}.forge-step::-moz-focus-inner,.forge-step::-moz-focus-outer{padding:0;border:0}.forge-step.error forge-focus-indicator{--forge-focus-indicator-color:var(--_step-error-color)}.forge-step.vertical forge-focus-indicator{--forge-focus-indicator-shape:4px}.forge-step.selected:not(.disabled){--forge-state-layer-color:var(--_step-primary-color)}.forge-step.selected:not(.disabled)::before{background-color:var(--_step-primary-color);content:\"\";position:absolute;inset:0;opacity:.08;height:100%;width:100%}.forge-step.selected:not(.disabled).error{--_step-primary-color:var(--_step-error-color)}.forge-step .title{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-body1-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-body1-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-font-size-scale, .875)));font-weight:var(--forge-typography-body1-font-weight,400);line-height:var(--forge-typography-body1-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-line-height-scale, 1.125)));letter-spacing:var(--forge-typography-body1-letter-spacing, .0357142857em);text-transform:var(--forge-typography-body1-text-transform,inherit);text-decoration:var(--forge-typography-body1-text-decoration,inherit);color:var(--_step-label-color);text-align:left;overflow:hidden;text-overflow:ellipsis}.forge-step .subtitle{text-align:left;overflow:hidden;text-overflow:ellipsis}.forge-step .subtitle ::slotted(*){color:var(--_step-sub-label-color);-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-label1-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-label1-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-font-size-scale, .75)));font-weight:var(--forge-typography-label1-font-weight,400);line-height:var(--forge-typography-label1-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-line-height-scale, 1.25)));letter-spacing:var(--forge-typography-label1-letter-spacing, .0357142857em);text-transform:var(--forge-typography-label1-text-transform,inherit);text-decoration:var(--forge-typography-label1-text-decoration,inherit)}.forge-step .icon-container .icon-content{color:var(--_step-icon-text-color);background-color:var(--_step-icon-fill);height:var(--_step-icon-content-size);width:var(--_step-icon-content-size);border-style:solid;border-width:2px;border-color:transparent;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background-color var(--_step-icon-transition-duration) var(--_step-icon-transition-easing);margin:0 8px 0 0;flex:none}.forge-step .icon-container .icon-content forge-icon{font-size:var(--_step-icon-size)}.forge-step.disabled{color:var(--_step-disabled-text-color);cursor:not-allowed}.forge-step.disabled.forge-step .icon-container .icon-content{--_step-icon-fill:var(--_step-disabled-color);--_step-icon-text-color:var(--_step-disabled-text-color)}.forge-step.disabled .text-container .title{color:var(--_step-disabled-text-color)}.forge-step.disabled .text-container .subtitle ::slotted(*){color:var(--_step-disabled-text-color)}.forge-step.alternative{flex-direction:column}.forge-step.alternative .icon-container .icon-content{margin:0}.forge-step.alternative .text-container{margin-top:8px;place-items:center}.forge-step:not(.selected):not(.disabled).editable:not(.completed):not(.error) .icon-content,.forge-step:not(.selected):not(.disabled):not(.editable):not(.completed):not(.error) .icon-content{border-color:var(--_step-primary-color)}.forge-step:not(.selected):not(.disabled).editable:not(.completed):not(.error) .icon-content .index,.forge-step:not(.selected):not(.disabled):not(.editable):not(.completed):not(.error) .icon-content .index{color:var(--_step-primary-color)}.forge-step.selected.disabled .icon-content{--_step-icon-fill:var(--_step-disabled-color);--_step-icon-text-color:var(--_step-disabled-text-color)}.forge-step.selected:not(.disabled) .icon-container .icon-content{--_step-icon-fill:var(--_step-icon-fill-active);--_step-icon-text-color:var(--_step-icon-text-color-active)}.forge-step.selected:not(.disabled) .title{color:var(--_step-primary-color);font-weight:500}.forge-step.selected:not(.disabled) .subtitle ::slotted(*){color:var(--_step-primary-color);font-weight:500}.forge-step.error:not(.disabled) .title{color:var(--_step-error-color)}.forge-step.error:not(.disabled) .subtitle ::slotted(*){color:var(--_step-error-color)}.forge-step.error:not(.disabled) .icon-container .icon-content{--_step-icon-fill:var(--_step-error-color);--_step-icon-text-color:var(--_step-error-text-color)}.forge-step.completed:not(.disabled):not(.error):not(.editable) .icon-content{--_step-icon-fill:var(--_step-icon-fill-active);--_step-icon-text-color:var(--_step-icon-text-color-active)}.forge-step.completed:not(.disabled):not(.error).editable .icon-content{--_step-icon-fill:var(--_step-icon-fill-active);--_step-icon-text-color:var(--_step-icon-text-color-active)}.forge-step.expandable .expanded-icon{display:inline-block;transition:transform .3s ease-in-out}.forge-step.expandable.expanded .expanded-icon{transform:rotate(180deg)}.forge-step.expandable .icon-container .icon-content{margin:0 16px 0 0}.forge-step .text-container{display:flex;flex-direction:column;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host(:not(:last-child)[clustered])::after{--_step-line-min-width:var(--_step-line-min-width-clustered)}:host(:last-child[clustered])::before{--_step-line-min-width:var(--_step-line-min-width-clustered)}:host(:not(:first-child):not(:last-child)[clustered])::after,:host(:not(:first-child):not(:last-child)[clustered])::before{--_step-line-min-width:var(--_step-line-min-width-clustered)}';
+const styles = ':host{--_step-primary-color:var(--forge-step-primary-color, var(--forge-theme-primary, #3f51b5));--_step-text-color:var(--forge-step-text-color, var(--forge-theme-on-primary, #ffffff));--_step-border-radius:var(--forge-step-border-radius, calc(var(--forge-shape-extra-large, 16px) * var(--forge-shape-factor, 1)));--_step-border-radius-vertical:var(--forge-step-border-radius-vertical, calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1)));--_step-disabled-text-color:var(--forge-step-disabled-text-color, var(--forge-theme-text-low, rgba(0, 0, 0, 0.38)));--_step-disabled-color:var(--forge-step-disabled-color, var(--forge-theme-surface-container-minimum, #f5f5f5));--_step-icon-fill:var(--forge-step-icon-fill, unset);--_step-icon-fill-active:var(--forge-step-icon-fill-active, var(--_step-primary-color));--_step-icon-text-color:var(--forge-step-icon-text-color, var(--forge-theme-primary, #3f51b5));--_step-icon-text-color-active:var(--forge-step-icon-text-color-active, var(--forge-theme-on-primary, #ffffff));--_step-icon-content-size:var(--forge-step-icon-content-size, 24px);--_step-icon-size:var(--forge-step-icon-size, calc(var(--forge-typography-font-size, 1rem) * 0.875));--_step-icon-transition-duration:var(--forge-step-icon-transition-duration, var(--forge-animation-duration-medium4, 400ms));--_step-icon-transition-easing:var(--forge-step-icon-transition-easing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_step-line-color:var(--forge-step-line-color, var(--forge-theme-outline, #e0e0e0));--_step-line-min-width:var(--forge-step-line-min-width, 10px);--_step-line-min-width-clustered:var(--forge-step-line-min-width-clustered, 25px);--_step-label-color:var(--forge-step-label-color, var(--forge-theme-text-high, rgba(0, 0, 0, 0.87)));--_step-sub-label-color:var(--forge-step-sub-label-color, var(--forge-theme-text-medium, rgba(0, 0, 0, 0.6)));--_step-error-color:var(--forge-step-error-color, var(--forge-theme-error, #b00020));--_step-error-text-color:var(--forge-step-error-text-color, var(--forge-theme-on-error, #ffffff));--_step-expansion-panel-border-left-width:var(--forge-step-expansion-panel-border-left-width, 1px);--_step-expansion-panel-margin-bottom:var(--forge-step-expansion-panel-margin-bottom, 4px);--_step-expansion-panel-margin-left:var(--forge-step-expansion-panel-margin-left, 60px);--_step-expansion-panel-margin-top:var(--forge-step-expansion-panel-margin-top, 4px);--_step-expansion-panel-icon-color:var(--forge-step-expansion-panel-icon-color, var(--forge-theme-text-medium, rgba(0, 0, 0, 0.6)))}:host(:focus){outline:0}:host([error]){--forge-state-layer-color:var(--_step-error-color)}:host(:first-child[alternative])::after{align-self:flex-start;top:22px;margin:0}:host(:last-child[alternative])::before{align-self:flex-start;top:22px;margin:0}:host(:not(:first-child):not(:last-child)[alternative])::after,:host(:not(:first-child):not(:last-child)[alternative])::before{align-self:flex-start;top:22px;min-width:7px;margin:0}:host(:not(:last-child)[alternative]) .after{align-self:flex-start;top:22px;position:absolute;width:calc(50% - 18px);left:calc(50% + 18px);height:0;right:0}:host(:not(:first-child)[alternative]) .before{align-self:flex-start;top:22px;position:absolute;left:0;width:calc(50% - 18px);height:0}:host(:not(:first-child):not(:last-child)):host(:not([vertical]))::after,:host(:not(:first-child):not(:last-child)):host(:not([vertical]))::before{border-color:var(--_step-line-color);min-width:var(--_step-line-min-width);content:\"\";position:relative;height:0;flex:1;flex-basis:0.000000001px;border-top-style:solid;border-top-width:1px;border-radius:1px 0 0 1px;margin:0 -10px}:host(:last-child):host(:not([vertical]))::before{border-color:var(--_step-line-color);min-width:var(--_step-line-min-width);content:\"\";position:relative;height:0;flex:1;flex-basis:0.000000001px;border-top-style:solid;border-top-width:1px;border-radius:1px 0 0 1px;margin:0 -10px 0 0}:host(:is(:first-child)):host(:not([vertical]))::after{border-color:var(--_step-line-color);min-width:var(--_step-line-min-width);content:\"\";position:relative;height:0;flex:1;flex-basis:0.000000001px;border-top-style:solid;border-top-width:1px;border-radius:1px 0 0 1px;margin:0 -10px}:host([vertical]){flex-direction:column}:host([vertical])::after{content:none}:host([vertical])::before{content:none}:host([vertical]) .forge-step{--_step-border-radius:var(--_step-border-radius-vertical);width:100%;min-height:52px}:host([vertical]) .forge-step .text-container{white-space:normal}:host([vertical]) .icon-container .icon-content{margin:0 16px 0 0}:host([vertical]) .expansion-panel{display:none}:host([vertical]) .expanded-icon{color:var(--_step-expansion-panel-icon-color);display:none;margin-left:auto}:host([vertical][expandable]) .expansion-panel{display:block}:host([ignore-user-expansion]) .forge-step .expanded-icon{display:none}forge-expansion-panel::part(root){border-color:var(--_step-line-color);margin-left:var(--_step-expansion-panel-margin-left);margin-top:var(--_step-expansion-panel-margin-top);margin-bottom:var(--_step-expansion-panel-margin-bottom);border-left-width:var(--_step-expansion-panel-border-left-width);border-left-style:solid}forge-focus-indicator{--forge-focus-indicator-color:var(--_step-primary-color);--forge-focus-indicator-shape:16px}.container{display:contents}.forge-step{-webkit-tap-highlight-color:transparent;padding:12px 16px;outline:0;background:0 0;border:none;border-radius:var(--_step-border-radius);position:relative;display:flex;overflow:hidden;align-items:center;box-sizing:border-box}.forge-step:focus{outline:0}.forge-step::-moz-focus-inner,.forge-step::-moz-focus-outer{padding:0;border:0}.forge-step{cursor:pointer}.forge-step.error forge-focus-indicator{--forge-focus-indicator-color:var(--_step-error-color)}.forge-step.vertical forge-focus-indicator{--forge-focus-indicator-shape:4px}.forge-step.selected:not(.disabled){--forge-state-layer-color:var(--_step-primary-color)}.forge-step.selected:not(.disabled)::before{background-color:var(--_step-primary-color);content:\"\";position:absolute;inset:0;opacity:.08;height:100%;width:100%}.forge-step.selected:not(.disabled).error{--_step-primary-color:var(--_step-error-color)}.forge-step .title{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-body1-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-body1-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-font-size-scale, .875)));font-weight:var(--forge-typography-body1-font-weight,400);line-height:var(--forge-typography-body1-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-line-height-scale, 1.125)));letter-spacing:var(--forge-typography-body1-letter-spacing, .0357142857em);text-transform:var(--forge-typography-body1-text-transform,inherit);text-decoration:var(--forge-typography-body1-text-decoration,inherit);color:var(--_step-label-color);text-align:left;overflow:hidden;text-overflow:ellipsis}.forge-step .subtitle{text-align:left;overflow:hidden;text-overflow:ellipsis}.forge-step .subtitle ::slotted(*){color:var(--_step-sub-label-color);-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-label1-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-label1-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-font-size-scale, .75)));font-weight:var(--forge-typography-label1-font-weight,400);line-height:var(--forge-typography-label1-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-line-height-scale, 1.25)));letter-spacing:var(--forge-typography-label1-letter-spacing, .0357142857em);text-transform:var(--forge-typography-label1-text-transform,inherit);text-decoration:var(--forge-typography-label1-text-decoration,inherit)}.forge-step .icon-container .icon-content{color:var(--_step-icon-text-color);background-color:var(--_step-icon-fill);height:var(--_step-icon-content-size);width:var(--_step-icon-content-size);border-style:solid;border-width:2px;border-color:transparent;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background-color var(--_step-icon-transition-duration) var(--_step-icon-transition-easing);margin:0 8px 0 0;flex:none}.forge-step .icon-container .icon-content forge-icon{font-size:var(--_step-icon-size)}.forge-step.disabled{color:var(--_step-disabled-text-color);cursor:not-allowed}.forge-step.disabled.forge-step .icon-container .icon-content{--_step-icon-fill:var(--_step-disabled-color);--_step-icon-text-color:var(--_step-disabled-text-color)}.forge-step.disabled .text-container .title{color:var(--_step-disabled-text-color)}.forge-step.disabled .text-container .subtitle ::slotted(*){color:var(--_step-disabled-text-color)}.forge-step.alternative{flex-direction:column}.forge-step.alternative .icon-container .icon-content{margin:0}.forge-step.alternative .text-container{margin-top:8px;place-items:center}.forge-step:not(.selected):not(.disabled).editable:not(.completed):not(.error) .icon-content,.forge-step:not(.selected):not(.disabled):not(.editable):not(.completed):not(.error) .icon-content{border-color:var(--_step-primary-color)}.forge-step:not(.selected):not(.disabled).editable:not(.completed):not(.error) .icon-content .index,.forge-step:not(.selected):not(.disabled):not(.editable):not(.completed):not(.error) .icon-content .index{color:var(--_step-primary-color)}.forge-step.selected.disabled .icon-content{--_step-icon-fill:var(--_step-disabled-color);--_step-icon-text-color:var(--_step-disabled-text-color)}.forge-step.selected:not(.disabled) .icon-container .icon-content{--_step-icon-fill:var(--_step-icon-fill-active);--_step-icon-text-color:var(--_step-icon-text-color-active)}.forge-step.selected:not(.disabled) .title{color:var(--_step-primary-color);font-weight:500}.forge-step.selected:not(.disabled) .subtitle ::slotted(*){color:var(--_step-primary-color);font-weight:500}.forge-step.error:not(.disabled) .title{color:var(--_step-error-color)}.forge-step.error:not(.disabled) .subtitle ::slotted(*){color:var(--_step-error-color)}.forge-step.error:not(.disabled) .icon-container .icon-content{--_step-icon-fill:var(--_step-error-color);--_step-icon-text-color:var(--_step-error-text-color)}.forge-step.completed:not(.disabled):not(.error):not(.editable) .icon-content{--_step-icon-fill:var(--_step-icon-fill-active);--_step-icon-text-color:var(--_step-icon-text-color-active)}.forge-step.completed:not(.disabled):not(.error).editable .icon-content{--_step-icon-fill:var(--_step-icon-fill-active);--_step-icon-text-color:var(--_step-icon-text-color-active)}.forge-step.expandable .expanded-icon{display:inline-block;transition:transform .3s ease-in-out}.forge-step.expandable.expanded .expanded-icon{transform:rotate(180deg)}.forge-step.expandable .icon-container .icon-content{margin:0 16px 0 0}.forge-step .text-container{display:flex;flex-direction:column;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host(:not(:last-child)[clustered])::after{--_step-line-min-width:var(--_step-line-min-width-clustered)}:host(:last-child[clustered])::before{--_step-line-min-width:var(--_step-line-min-width-clustered)}:host(:not(:first-child):not(:last-child)[clustered])::after,:host(:not(:first-child):not(:last-child)[clustered])::before{--_step-line-min-width:var(--_step-line-min-width-clustered)}';
 /**
  * @tag forge-step
  *
+ * @summary Individual steps within a stepper component that represent progress in a multi-step process.
+ *
  * @property {boolean} [alternative=false] - Whether the step is in the alternative style.
  * @property {boolean} [completed=false] - Whether the step is completed.
  * @property {boolean} [editable=false] - Whether the step is editable.

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

@@ -23,6 +23,8 @@ declare global {
 /**
  * @tag forge-stepper
  *
+ * @summary Steppers guide users through multi-step processes by breaking them into logical steps.
+ *
  * @dependency forge-step
  *
  * @event {CustomEvent<number>} forge-step-select - Emits the index when a step is selected.

package/esm/stepper/stepper/stepper.js

@@ -15,6 +15,8 @@ const styles = ':host{display:block}:host([hidden]){display:none}:host([vertical
 /**
  * @tag forge-stepper
  *
+ * @summary Steppers guide users through multi-step processes by breaking them into logical steps.
+ *
  * @dependency forge-step
  *
  * @event {CustomEvent<number>} forge-step-select - Emits the index when a step is selected.

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

@@ -19,11 +19,11 @@ export interface ITableAdapter extends IBaseAdapter {
     setSortedColumn: (tableElement: HTMLTableElement, columnIndex: number, sortDirection: SortDirection) => void;
     removeColumnSort: (tableElement: HTMLTableElement, columnIndex: number) => void;
     setSortDirection: (tableElement: HTMLTableElement, columnIndex: number, sortDirection: SortDirection) => void;
-    setSelectColumnVisibility: (tableElement: HTMLTableElement, isVisible: boolean, selectListener: (evt: Event) => void, selectAllListener?: (evt: Event) => void, selectAllTemplate?: TableHeaderSelectAllTemplate | null, selectCheckboxAlignment?: CellAlign, data?: TableRow[], tooltipSelect?: string | TableSelectTooltipCallback, tooltipSelectAll?: string) => void;
+    setSelectColumnVisibility: (tableElement: HTMLTableElement, dense: boolean, isVisible: boolean, selectListener: (evt: Event) => void, selectAllListener?: (evt: Event) => void, selectAllTemplate?: TableHeaderSelectAllTemplate | null, selectCheckboxAlignment?: CellAlign, data?: TableRow[], tooltipSelect?: string | TableSelectTooltipCallback, tooltipSelectAll?: string) => void;
     setDense: (tableElement: HTMLTableElement, isDense: boolean) => void;
     setRoomy(tableElement: HTMLTableElement, isRoomy: boolean): void;
     setResizable: (configuration: ITableConfiguration) => void;
-    setSelectAllVisibility: (tableElement: HTMLTableElement, isVisible: boolean, listener: ((evt: Event) => void) | null, selectAllTemplate: TableHeaderSelectAllTemplate | null, selectCheckboxAlignment?: CellAlign, tooltipSelectAll?: string) => void;
+    setSelectAllVisibility: (tableElement: HTMLTableElement, dense: boolean, isVisible: boolean, listener: ((evt: Event) => void) | null, selectAllTemplate: TableHeaderSelectAllTemplate | null, selectCheckboxAlignment?: CellAlign, tooltipSelectAll?: string) => void;
     setFilterRow: (configuration: ITableConfiguration) => void;
     expandRow(configuration: ITableConfiguration, rowIndex: number, template: TableViewTemplate): Promise<void>;
     collapseRow(configuration: ITableConfiguration, rowIndex: number): Promise<void>;
@@ -57,11 +57,11 @@ export declare class TableAdapter extends BaseAdapter<ITableComponent> implement
     setSortedColumn(tableElement: HTMLTableElement, columnIndex: number, sortDirection: SortDirection): void;
     removeColumnSort(tableElement: HTMLTableElement, columnIndex: number): void;
     setSortDirection(tableElement: HTMLTableElement, columnIndex: number, sortDirection: SortDirection): void;
-    setSelectColumnVisibility(tableElement: HTMLTableElement, isVisible: boolean, selectListener: (evt: Event) => void, selectAllListener?: (evt: Event) => void, selectAllTemplate?: TableHeaderSelectAllTemplate | null, selectCheckboxAlignment?: CellAlign, data?: TableRow[], tooltipSelect?: string | TableSelectTooltipCallback, tooltipSelectAll?: string): void;
+    setSelectColumnVisibility(tableElement: HTMLTableElement, dense: boolean, isVisible: boolean, selectListener: (evt: Event) => void, selectAllListener?: (evt: Event) => void, selectAllTemplate?: TableHeaderSelectAllTemplate | null, selectCheckboxAlignment?: CellAlign, data?: TableRow[], tooltipSelect?: string | TableSelectTooltipCallback, tooltipSelectAll?: string): void;
     setDense(tableElement: HTMLTableElement, isDense: boolean): void;
     setRoomy(tableElement: HTMLTableElement, isRoomy: boolean): void;
     setResizable(configuration: ITableConfiguration): void;
-    setSelectAllVisibility(tableElement: HTMLTableElement, isVisible: boolean, listener: ((evt: Event) => void) | null, selectAllTemplate: TableHeaderSelectAllTemplate | null, selectCheckboxAlignment?: CellAlign, tooltipSelectAll?: string | null): void;
+    setSelectAllVisibility(tableElement: HTMLTableElement, dense: boolean, isVisible: boolean, listener: ((evt: Event) => void) | null, selectAllTemplate: TableHeaderSelectAllTemplate | null, selectCheckboxAlignment?: CellAlign, tooltipSelectAll?: string | null): void;
     setFilterRow(configuration: ITableConfiguration): void;
     expandRow(configuration: ITableConfiguration, rowIndex: number, template: TableViewTemplate): Promise<void>;
     collapseRow(configuration: ITableConfiguration, rowIndex: number): Promise<void>;

package/esm/table/table-adapter.js

@@ -57,8 +57,8 @@ export class TableAdapter extends BaseAdapter {
     setSortDirection(tableElement, columnIndex, sortDirection) {
         TableUtils.setSortDirection(tableElement, columnIndex, sortDirection);
     }
-    setSelectColumnVisibility(tableElement, isVisible, selectListener, selectAllListener, selectAllTemplate, selectCheckboxAlignment, data, tooltipSelect, tooltipSelectAll) {
-        TableUtils.setSelectColumnVisibility(tableElement, isVisible, selectListener, selectAllListener || null, selectAllTemplate || null, selectCheckboxAlignment || null, data || [], tooltipSelect || null, tooltipSelectAll || null);
+    setSelectColumnVisibility(tableElement, dense, isVisible, selectListener, selectAllListener, selectAllTemplate, selectCheckboxAlignment, data, tooltipSelect, tooltipSelectAll) {
+        TableUtils.setSelectColumnVisibility(tableElement, dense, isVisible, selectListener, selectAllListener || null, selectAllTemplate || null, selectCheckboxAlignment || null, data || [], tooltipSelect || null, tooltipSelectAll || null);
     }
     setDense(tableElement, isDense) {
         TableUtils.setDenseState(tableElement, isDense);
@@ -69,8 +69,8 @@ export class TableAdapter extends BaseAdapter {
     setResizable(configuration) {
         TableUtils.setResizable(configuration);
     }
-    setSelectAllVisibility(tableElement, isVisible, listener, selectAllTemplate, selectCheckboxAlignment, tooltipSelectAll = null) {
-        TableUtils.setSelectAllVisibility(tableElement, isVisible, listener, selectAllTemplate, selectCheckboxAlignment || null, tooltipSelectAll || null);
+    setSelectAllVisibility(tableElement, dense, isVisible, listener, selectAllTemplate, selectCheckboxAlignment, tooltipSelectAll = null) {
+        TableUtils.setSelectAllVisibility(tableElement, dense, isVisible, listener, selectAllTemplate, selectCheckboxAlignment || null, tooltipSelectAll || null);
     }
     setFilterRow(configuration) {
         TableUtils.setFilterRow(configuration);

package/esm/table/table-core.js

@@ -141,7 +141,7 @@ export class TableCore {
         if (this._select !== value) {
             this._select = value;
             // Now we can add/remove the column
-            this._adapter.setSelectColumnVisibility(this._adapter.getTableElement(), this._select, this._selectRowListener, this._multiselect ? this._selectAllListener : undefined, this._multiselect ? this._selectAllTemplate : null, this._selectCheckboxAlignment, this._tableRows, this._tooltipSelect, this._tooltipSelectAll);
+            this._adapter.setSelectColumnVisibility(this._adapter.getTableElement(), this._dense, this._select, this._selectRowListener, this._multiselect ? this._selectAllListener : undefined, this._multiselect ? this._selectAllTemplate : null, this._selectCheckboxAlignment, this._tableRows, this._tooltipSelect, this._tooltipSelectAll);
             this._updateSelections(true);
             // Update the attribute on the host element
             if (this._select) {
@@ -160,7 +160,7 @@ export class TableCore {
         if (this._multiselect !== value) {
             this._multiselect = value;
             if (this._select) {
-                this._adapter.setSelectAllVisibility(this._adapter.getTableElement(), this._multiselect, this._multiselect ? this._selectAllListener : null, this._multiselect ? this.selectAllTemplate : null, this._selectCheckboxAlignment, this._tooltipSelectAll);
+                this._adapter.setSelectAllVisibility(this._adapter.getTableElement(), this._dense, this._multiselect, this._multiselect ? this._selectAllListener : null, this._multiselect ? this.selectAllTemplate : null, this._selectCheckboxAlignment, this._tooltipSelectAll);
                 this._updateSelections(true);
             }
             this._adapter.setHostAttribute(TABLE_CONSTANTS.attributes.MULTISELECT, this._multiselect.toString());

package/esm/table/table-utils.d.ts

@@ -282,7 +282,7 @@ export declare class TableUtils {
     /**
      * Adds/removes the select column on the table.
      */
-    static setSelectColumnVisibility(tableElement: HTMLTableElement, isVisible: boolean, selectListener: ((evt: Event) => void) | null, selectAllListener: ((evt: Event) => void) | null, selectAllTemplate: TableHeaderSelectAllTemplate | null, selectCheckboxAlignment: CellAlign | null, data: TableRow[], tooltipSelect: string | TableSelectTooltipCallback | null, tooltipSelectAll: string | null): void;
+    static setSelectColumnVisibility(tableElement: HTMLTableElement, dense: boolean, isVisible: boolean, selectListener: ((evt: Event) => void) | null, selectAllListener: ((evt: Event) => void) | null, selectAllTemplate: TableHeaderSelectAllTemplate | null, selectCheckboxAlignment: CellAlign | null, data: TableRow[], tooltipSelect: string | TableSelectTooltipCallback | null, tooltipSelectAll: string | null): void;
     /**
      * Adds the select column to the thead/tbody elements and attaches the provided click listeners.
      * @param theadElement The table head element.
@@ -311,7 +311,7 @@ export declare class TableUtils {
      * @param {HTMLTableElement} tableElement The table element.
      * @param {boolean} isVisible Whether the select all option is visible or not.
      */
-    static setSelectAllVisibility(tableElement: HTMLTableElement, isVisible: boolean, listener: ((evt: Event) => void) | null, selectAllTemplate: TableHeaderSelectAllTemplate | null, selectCheckboxAlignment: CellAlign | null, tooltipSelectAll: string | null): void;
+    static setSelectAllVisibility(tableElement: HTMLTableElement, dense: boolean, isVisible: boolean, listener: ((evt: Event) => void) | null, selectAllTemplate: TableHeaderSelectAllTemplate | null, selectCheckboxAlignment: CellAlign | null, tooltipSelectAll: string | null): void;
     /**
      * Controls the visibility of the table filter row.
      * @param {ITableConfiguration} configuration The table configuration.

package/esm/table/table-utils.js

@@ -51,7 +51,7 @@ export class TableUtils {
         }
         // Add the select column
         if (configuration.selectListener) {
-            TableUtils._addSelectColumn(thead, tbody, configuration.selectListener, configuration.selectAllListener, configuration.selectAllTemplate, configuration.selectCheckboxAlignment, configuration.data, configuration.tooltipSelect, configuration.tooltipSelectAll);
+            TableUtils._addSelectColumn(thead, tbody, configuration.dense, configuration.selectListener, configuration.selectAllListener, configuration.selectAllTemplate, configuration.selectCheckboxAlignment, configuration.data, configuration.tooltipSelect, configuration.tooltipSelectAll);
         }
         if (configuration.resizable || configuration.columnConfigurations.some(c => !!c.sortable)) {
             TableUtils._attachHeadRowMouseDownListener(thead, configuration.headRowMouseDownListener);
@@ -97,7 +97,7 @@ export class TableUtils {
         }
         // Add the select column if necessary
         if (configuration.selectListener) {
-            TableUtils._createBodySelectColumn(tbody, configuration.selectCheckboxAlignment, configuration.data, configuration.tooltipSelect, configuration.tooltipSelectAll);
+            TableUtils._createBodySelectColumn(tbody, configuration.dense, configuration.selectCheckboxAlignment, configuration.data, configuration.tooltipSelect, configuration.tooltipSelectAll);
             TableUtils._attachRowSelectListeners(tbody, configuration.selectListener);
         }
         TableUtils._setTableBody(configuration.tableElement, tbody);
@@ -144,6 +144,9 @@ export class TableUtils {
             if (columnConfig.sortable) {
                 cellContainer = document.createElement('button');
                 cellContainer.type = 'button';
+                const focusIndicator = document.createElement('forge-focus-indicator');
+                focusIndicator.inward = true;
+                cellContainer.appendChild(focusIndicator);
                 cellContainer.addEventListener('keydown', tableConfiguration.sortableHeadCellKeydownListener);
             }
             else {
@@ -591,12 +594,12 @@ export class TableUtils {
      * @param theadElement
      * @param tbodyElement
      */
-    static _createSelectColumn(theadElement, tbodyElement, showSelectAll, selectAllTemplate, registerListener, selectCheckboxAlignment, data, tooltipSelect, tooltipSelectAll) {
+    static _createSelectColumn(theadElement, tbodyElement, dense, showSelectAll, selectAllTemplate, registerListener, selectCheckboxAlignment, data, tooltipSelect, tooltipSelectAll) {
         if (theadElement) {
-            TableUtils._createHeadSelectColumn(theadElement, showSelectAll, selectAllTemplate, registerListener, selectCheckboxAlignment, tooltipSelectAll);
+            TableUtils._createHeadSelectColumn(theadElement, dense, showSelectAll, selectAllTemplate, registerListener, selectCheckboxAlignment, tooltipSelectAll);
         }
         if (tbodyElement) {
-            TableUtils._createBodySelectColumn(tbodyElement, selectCheckboxAlignment, data, tooltipSelect, tooltipSelectAll);
+            TableUtils._createBodySelectColumn(tbodyElement, dense, selectCheckboxAlignment, data, tooltipSelect, tooltipSelectAll);
         }
     }
     /**
@@ -604,7 +607,7 @@ export class TableUtils {
      * @param {HTMLTableSectionElement} theadElement The table head element.
      * @param {boolean} showSelectAll Whether to show the select all checkbox or not.
      */
-    static _createHeadSelectColumn(theadElement, showSelectAll, selectAllTemplate, registerListener, selectCheckboxAlignment, tooltipSelectAll) {
+    static _createHeadSelectColumn(theadElement, dense, showSelectAll, selectAllTemplate, registerListener, selectCheckboxAlignment, tooltipSelectAll) {
         Array.from(theadElement.rows).forEach(row => {
             const th = document.createElement('th');
             addClass([TABLE_CONSTANTS.classes.TABLE_CELL, TABLE_CONSTANTS.classes.TABLE_HEAD_CELL], th);
@@ -621,7 +624,7 @@ export class TableUtils {
                 });
             }
             else {
-                lastRowFirstCell?.appendChild(TableUtils._createCheckboxElement(true, selectCheckboxAlignment, null, null, null, tooltipSelectAll));
+                lastRowFirstCell?.appendChild(TableUtils._createCheckboxElement(true, dense, selectCheckboxAlignment, null, null, null, tooltipSelectAll));
             }
         }
     }
@@ -629,9 +632,9 @@ export class TableUtils {
      * Creates the select column in the table body.
      * @param {HTMLTableSectionElement} tbodyElement The table body element.
      */
-    static _createBodySelectColumn(tbodyElement, selectCheckboxAlignment, data, tooltipSelect, tooltipSelectAll) {
+    static _createBodySelectColumn(tbodyElement, dense, selectCheckboxAlignment, data, tooltipSelect, tooltipSelectAll) {
         const nonExpandedRows = TableUtils._getNonExpandedRows(tbodyElement.rows);
-        nonExpandedRows.forEach((row, rowIndex) => TableUtils._addRowSelectColumn(row, selectCheckboxAlignment, rowIndex, data[rowIndex], tooltipSelect, tooltipSelectAll));
+        nonExpandedRows.forEach((row, rowIndex) => TableUtils._addRowSelectColumn(row, dense, selectCheckboxAlignment, rowIndex, data[rowIndex], tooltipSelect, tooltipSelectAll));
         // Update the colspan on the expanded rows
         if (tbodyElement.rows.length) {
             const firstRow = tbodyElement.rows.item(0);
@@ -640,10 +643,10 @@ export class TableUtils {
             }
         }
     }
-    static _addRowSelectColumn(row, selectCheckboxAlignment, rowIndex, rowData, tooltipSelect, tooltipSelectAll) {
+    static _addRowSelectColumn(row, dense, selectCheckboxAlignment, rowIndex, rowData, tooltipSelect, tooltipSelectAll) {
         const td = row.insertCell(0);
         addClass([TABLE_CONSTANTS.classes.TABLE_CELL, TABLE_CONSTANTS.classes.TABLE_BODY_CELL, TABLE_CONSTANTS.classes.TABLE_CELL_SELECT], td);
-        td.appendChild(TableUtils._createCheckboxElement(false, selectCheckboxAlignment, rowIndex, rowData, tooltipSelect, tooltipSelectAll));
+        td.appendChild(TableUtils._createCheckboxElement(false, dense, selectCheckboxAlignment, rowIndex, rowData, tooltipSelect, tooltipSelectAll));
     }
     /**
      * Removes the first cell (select cell) in every row in the table head and table body elements.
@@ -675,7 +678,7 @@ export class TableUtils {
     /**
      * Creates a checkbox element for the select column.
      */
-    static _createCheckboxElement(isHeader, alignment, rowIndex, rowData, tooltipSelect, tooltipSelectAll) {
+    static _createCheckboxElement(isHeader, dense, alignment, rowIndex, rowData, tooltipSelect, tooltipSelectAll) {
         const checkboxContainer = document.createElement('div');
         checkboxContainer.classList.add(TABLE_CONSTANTS.classes.TABLE_CELL_SELECT_CHECKBOX_CONTAINER);
         if (alignment) {
@@ -693,6 +696,7 @@ export class TableUtils {
         }
         const checkboxElement = document.createElement(CHECKBOX_CONSTANTS.elementName);
         checkboxElement.setAttribute(TABLE_CONSTANTS.attributes.SELECT_CHECKBOX, '');
+        checkboxElement.dense = dense;
         checkboxContainer.appendChild(checkboxElement);
         const tooltipFactory = (text) => {
             const tooltipEl = document.createElement('forge-tooltip');
@@ -954,14 +958,14 @@ export class TableUtils {
     /**
      * Adds/removes the select column on the table.
      */
-    static setSelectColumnVisibility(tableElement, isVisible, selectListener, selectAllListener, selectAllTemplate, selectCheckboxAlignment, data, tooltipSelect, tooltipSelectAll) {
+    static setSelectColumnVisibility(tableElement, dense, isVisible, selectListener, selectAllListener, selectAllTemplate, selectCheckboxAlignment, data, tooltipSelect, tooltipSelectAll) {
         const theadElement = tableElement.tHead;
         const tbodyElement = tableElement.tBodies[0];
         if (!theadElement || !tbodyElement) {
             return;
         }
         if (isVisible) {
-            TableUtils._addSelectColumn(theadElement, tbodyElement, selectListener, selectAllListener, selectAllTemplate, selectCheckboxAlignment, data, tooltipSelect, tooltipSelectAll);
+            TableUtils._addSelectColumn(theadElement, tbodyElement, dense, selectListener, selectAllListener, selectAllTemplate, selectCheckboxAlignment, data, tooltipSelect, tooltipSelectAll);
         }
         else if (TableUtils._hasSelectColumn(theadElement, tbodyElement)) {
             if (selectListener) {
@@ -980,8 +984,8 @@ export class TableUtils {
      * @param selectListener The row select listener.
      * @param selectAllListener The select all checkbox listener.
      */
-    static _addSelectColumn(theadElement, tbodyElement, selectListener, selectAllListener, selectAllTemplate, selectCheckboxAlignment, data, tooltipSelect, tooltipSelectAll) {
-        TableUtils._createSelectColumn(theadElement, tbodyElement, !!selectAllListener, selectAllTemplate, () => {
+    static _addSelectColumn(theadElement, tbodyElement, dense, selectListener, selectAllListener, selectAllTemplate, selectCheckboxAlignment, data, tooltipSelect, tooltipSelectAll) {
+        TableUtils._createSelectColumn(theadElement, tbodyElement, dense, !!selectAllListener, selectAllTemplate, () => {
             if (selectAllListener) {
                 TableUtils._tryAttachSelectAllTemplateListener(theadElement, selectAllListener);
             }
@@ -1003,6 +1007,9 @@ export class TableUtils {
         if (isDense) {
             tableElement.classList.add(TABLE_CONSTANTS.classes.TABLE_DENSE);
         }
+        // Update the select column checkboxes if they exist
+        const selectColumnCheckboxes = tableElement.querySelectorAll(`forge-checkbox[${TABLE_CONSTANTS.attributes.SELECT_CHECKBOX}]`);
+        selectColumnCheckboxes.forEach(checkboxEl => (checkboxEl.dense = isDense));
     }
     /**
      * Adds/removes the roomy class on the table.
@@ -1083,7 +1090,7 @@ export class TableUtils {
      * @param {HTMLTableElement} tableElement The table element.
      * @param {boolean} isVisible Whether the select all option is visible or not.
      */
-    static setSelectAllVisibility(tableElement, isVisible, listener, selectAllTemplate, selectCheckboxAlignment, tooltipSelectAll) {
+    static setSelectAllVisibility(tableElement, dense, isVisible, listener, selectAllTemplate, selectCheckboxAlignment, tooltipSelectAll) {
         const theadElement = tableElement.tHead;
         if (!theadElement) {
             return;
@@ -1105,7 +1112,7 @@ export class TableUtils {
                     });
                 }
                 else {
-                    selectAllCell.appendChild(TableUtils._createCheckboxElement(true, selectCheckboxAlignment || null, null, null, null, tooltipSelectAll));
+                    selectAllCell.appendChild(TableUtils._createCheckboxElement(true, dense, selectCheckboxAlignment || null, null, null, null, tooltipSelectAll));
                 }
                 if (listener && !selectAllTemplate) {
                     TableUtils._attachSelectAllListener(theadElement, listener);

package/esm/table/table.d.ts

@@ -64,6 +64,8 @@ declare global {
     }
 }
 /**
+ * @summary Tables are used to display sets of data. They organize information into rows and columns, making it easier to read, compare, and analyze. The Forge table provides a configuration-based approach to building data tables with means for sorting, filtering, selecting, and customizing the display of tabular data.
+ *
  * @tag forge-table
  *
  * @dependency forge-expansion-panel
@@ -183,7 +185,7 @@ export declare class TableComponent extends BaseComponent implements ITableCompo
     columnConfigurations: IColumnConfiguration[];
     /**
      * Controls the visibility of the select column.
-     * @default true
+     * @default false
      * @attribute
      */
     select: boolean;