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

package/esm/list/list-item/list-item.d.ts

@@ -91,44 +91,39 @@ declare global {
  * @csspart focus-indicator - The forwarded focus indicator's internal indicator element.
  * @csspart state-layer - The forwarded state layer's internal surface element.
  *
- * @cssprop --forge-list-item-background-color - The background color.
- * @cssprop --forge-list-item-shape - The shape of the list item.
- * @cssprop --forge-list-item-padding - The padding inside of the container element.
- * @cssprop --forge-list-item-margin - The margin around the host element.
- * @cssprop --forge-list-item-height - The height of the container.
- * @cssprop --forge-list-item-dense-height - The height when in the dense state.
- * @cssprop --forge-list-item-indent - The margin inline state when in the indented state.
- * @cssprop --forge-list-item-supporting-text-color - The text color of the supporting text.
- * @cssprop --forge-list-item-supporting-line-height - The line height of the supporting text.
- * @cssprop --forge-list-item-selected-color - The color when in the selected state.
- * @cssprop --forge-list-item-opacity - The opacity of the background color when in the disabled state.
- * @cssprop --forge-list-item-selected-leading-color - The color of the leading content when in the selected state.
- * @cssprop --forge-list-item-selected-trailing-color - The color of the trailing content when in the selected state.
- * @cssprop --forge-list-item-selected-supporting-text-color - The color of the supporting text when in the selected state.
- * @cssprop --forge-list-item-disabled-opacity - The opacity of the element when in the disabled state.
- * @cssprop --forge-list-item-disabled-cursor - The cursor when in the disabled state.
- * @cssprop --forge-list-item-one-line-height - The line height when in the one/single line state.
- * @cssprop --forge-list-item-two-line-height - The line height when in the two line state.
- * @cssprop --forge-list-item-three-line-height - The line height when in the three line state.
- * @cssprop --forge-list-item-dense-one-line-height - The line height when in the dense one/single line state.
- * @cssprop --forge-list-item-dense-two-line-height - The line height when in the dense two line state.
- * @cssprop --forge-list-item-dense-three-line-height - The line height when in the dense three line state.
- * @cssprop --forge-list-item-dense-font-size - The font size when in the dense state.
- * @cssprop --forge-list-item-dense-indent - The margin inline state when in the dense indented state.
- * @cssprop --forge-list-item-dense-leading-margin-end - The margin end of the leading content when in the dense state.
- * @cssprop --forge-list-item-dense-trailing-margin-start - The margin start of the trailing content when in the dense state.
- * @cssprop --forge-list-item-leading-margin-start - The margin start of the leading content.
- * @cssprop --forge-list-item-leading-margin-end - The margin end of the leading content.
- * @cssprop --forge-list-item-leading-selected-color - The color of the leading content when in the selected state.
- * @cssprop --forge-list-item-trailing-margin-start - The margin start of the trailing content.
- * @cssprop --forge-list-item-trailing-margin-end - The margin end of the trailing content.
- * @cssprop --forge-list-item-trailing-selected-color - The color of the trailing content when in the selected state.
- * @cssprop --forge-list-item-avatar-background-color - The background color of the avatar container.
- * @cssprop --forge-list-item-avatar-color - The foreground color of the avatar container.
- * @cssprop --forge-list-item-avatar-shape - The shape of the avatar container.
- * @cssprop --forge-list-item-avatar-margin-start - The margin start of the avatar container.
- * @cssprop --forge-list-item-avatar-margin-end - The margin end of the avatar container.
- * @cssprop --forge-list-item-avatar-size - The height & width of the avatar container.
+ * @cssproperty --forge-list-item-background-color - The background color.
+ * @cssproperty --forge-list-item-shape - The shape of the list item.
+ * @cssproperty --forge-list-item-padding - The padding inside of the container element.
+ * @cssproperty --forge-list-item-margin - The margin around the host element.
+ * @cssproperty --forge-list-item-height - The height of the container.
+ * @cssproperty --forge-list-item-dense-height - The height when in the dense state.
+ * @cssproperty --forge-list-item-indent - The margin inline state when in the indented state.
+ * @cssproperty --forge-list-item-cursor - The cursor when interactive.
+ * @cssproperty --forge-list-item-gap - The gap between the slotted content.
+ * @cssproperty --forge-list-item-supporting-text-color - The text color of the supporting text.
+ * @cssproperty --forge-list-item-supporting-line-height - The line height of the supporting text.
+ * @cssproperty --forge-list-item-selected-color - The color when in the selected state.
+ * @cssproperty --forge-list-item-opacity - The opacity of the background color when in the disabled state.
+ * @cssproperty --forge-list-item-selected-leading-color - The color of the leading content when in the selected state.
+ * @cssproperty --forge-list-item-selected-trailing-color - The color of the trailing content when in the selected state.
+ * @cssproperty --forge-list-item-selected-supporting-text-color - The color of the supporting text when in the selected state.
+ * @cssproperty --forge-list-item-disabled-opacity - The opacity of the element when in the disabled state.
+ * @cssproperty --forge-list-item-disabled-cursor - The cursor when in the disabled state.
+ * @cssproperty --forge-list-item-one-line-height - The line height when in the one/single line state.
+ * @cssproperty --forge-list-item-two-line-height - The line height when in the two line state.
+ * @cssproperty --forge-list-item-three-line-height - The line height when in the three line state.
+ * @cssproperty --forge-list-item-dense-one-line-height - The line height when in the dense one/single line state.
+ * @cssproperty --forge-list-item-dense-two-line-height - The line height when in the dense two line state.
+ * @cssproperty --forge-list-item-dense-three-line-height - The line height when in the dense three line state.
+ * @cssproperty --forge-list-item-dense-font-size - The font size when in the dense state.
+ * @cssproperty --forge-list-item-dense-indent - The margin inline state when in the dense indented state.
+ * @cssproperty --forge-list-item-dense-gap - The gap between the slotted content when in the dense state.
+ * @cssproperty --forge-list-item-leading-selected-color - The color of the leading content when in the selected state.
+ * @cssproperty --forge-list-item-trailing-selected-color - The color of the trailing content when in the selected state.
+ * @cssproperty --forge-list-item-avatar-background-color - The background color of the avatar container.
+ * @cssproperty --forge-list-item-avatar-color - The foreground color of the avatar container.
+ * @cssproperty --forge-list-item-avatar-shape - The shape of the avatar container.
+ * @cssproperty --forge-list-item-avatar-size - The height & width of the avatar container.
  */
 export declare class ListItemComponent extends HTMLElement implements IListItemComponent {
     static get observedAttributes(): string[];

package/esm/list/list-item/list-item.js

@@ -11,7 +11,7 @@ import { LIST_ITEM_CONSTANTS } from './list-item-constants';
 import { StateLayerComponent } from '../../state-layer';
 import { FocusIndicatorComponent } from '../../focus-indicator';
 const template = '<template><div class=\"forge-list-item\" tabindex=\"0\" part=\"root\"><slot name=\"leading\"></slot><slot name=\"avatar\"></slot><div class=\"text-container\" part=\"text-container\"><slot></slot><slot name=\"title\"></slot><slot name=\"primary-text\"></slot><slot name=\"subtitle\"></slot><slot name=\"secondary-text\"></slot><slot name=\"tertiary-text\"></slot><slot name=\"tertiary-title\"></slot></div><slot name=\"trailing\"></slot><forge-state-layer exportparts=\"surface:state-layer\"></forge-state-layer><forge-focus-indicator part=\"focus-indicator\" inward></forge-focus-indicator></div></template>';
-const styles = ':host{--_list-item-indent:var(--forge-list-item-indent, 56px);--_list-item-dense-indent:var(--forge-list-item-dense-indent, 48px)}:host{display:block;outline:0}:host([hidden]){display:none}.forge-list-item{--_list-item-background-color:var(--forge-list-item-background-color, transparent);--_list-item-shape:var(--forge-list-item-shape, 0);--_list-item-padding:var(--forge-list-item-padding, 8px 16px);--_list-item-margin:var(--forge-list-item-margin, 0);--_list-item-height:var(--forge-list-item-height, 48px);--_list-item-dense-height:var(--forge-list-item-dense-height, 32px);--_list-item-cursor:var(--forge-list-item-cursor, pointer);--_list-item-supporting-text-color:var(--forge-list-item-supporting-text-color, var(--forge-theme-text-medium, rgba(0, 0, 0, 0.6)));--_list-item-supporting-text-font-size:var(--forge-list-item-supporting-text-font-size, var(--forge-typography-body2-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-font-size-scale, 1))));--_list-item-supporting-text-font-weight:var(--forge-list-item-supporting-text-font-weight, var(--forge-typography-body2-font-weight, 400));--_list-item-supporting-text-line-height:var(--forge-list-item-supporting-text-line-height, 1.5rem);--_list-item-selected-color:var(--forge-list-item-selected-color, var(--forge-theme-primary, #3f51b5));--_list-item-selected-opacity:var(--forge-list-item-selected-opacity, 0.08);--_list-item-selected-leading-color:var(--forge-list-item-selected-leading-color, var(--_list-item-selected-color));--_list-item-selected-trailing-color:var(--forge-list-item-selected-trailing-color, var(--_list-item-selected-color));--_list-item-selected-supporting-text-color:var(--forge-list-item-selected-supporting-text-color, var(--forge-theme-text-medium, rgba(0, 0, 0, 0.6)));--_list-item-disabled-opacity:var(--forge-list-item-disabled-opacity, 0.38);--_list-item-disabled-cursor:var(--forge-list-item-disabled-cursor, not-allowed);--_list-item-one-line-height:var(--forge-list-item-one-line-height, var(--_list-item-height));--_list-item-two-line-height:var(--forge-list-item-two-line-height, var(--forge-list-item-height, 72px));--_list-item-three-line-height:var(--forge-list-item-three-line-height, var(--forge-list-item-height, 88px));--_list-item-dense-one-line-height:var(--forge-list-item-dense-one-line-height, var(--_list-item-dense-height));--_list-item-dense-two-line-height:var(--forge-list-item-dense-two-line-height, var(--forge-list-item-dense-height, 56px));--_list-item-dense-three-line-height:var(--forge-list-item-dense-three-line-height, var(--forge-list-item-dense-height, 72px));--_list-item-dense-font-size:var(--forge-list-item-dense-font-size, 0.875rem);--_list-item-dense-leading-margin-end:var(--forge-list-item-dense-leading-margin-end, var(--forge-list-item-leading-margin-end, 24px));--_list-item-dense-trailing-margin-start:var(--forge-list-item-dense-trailing-margin-start, var(--forge-list-item-trailing-margin-start, 24px));--_list-item-leading-margin-start:var(--forge-list-item-leading-margin-start, 0);--_list-item-leading-margin-end:var(--forge-list-item-leading-margin-end, 32px);--_list-item-leading-selected-color:var(--forge-list-item-leading-selected-color, var(--_list-item-selected-color));--_list-item-trailing-margin-start:var(--forge-list-item-trailing-margin-start, 32px);--_list-item-trailing-margin-end:var(--forge-list-item-trailing-margin-end, 0);--_list-item-trailing-selected-color:var(--forge-list-item-trailing-selected-color, var(--_list-item-selected-color));--_list-item-avatar-background-color:var(--forge-list-item-avatar-background-color, var(--forge-theme-text-medium, rgba(0, 0, 0, 0.6)));--_list-item-avatar-color:var(--forge-list-item-avatar-color, var(--forge-theme-on-primary, #ffffff));--_list-item-avatar-shape:var(--forge-list-item-avatar-shape, var(--forge-shape-round, 50%));--_list-item-avatar-margin-start:var(--forge-list-item-avatar-margin-start, 0);--_list-item-avatar-margin-end:var(--forge-list-item-avatar-margin-end, 16px);--_list-item-avatar-size:var(--forge-list-item-avatar-size, 40px)}.forge-list-item{position:relative;display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;outline:0;text-decoration:none;background-color:var(--_list-item-background-color);border-radius:var(--_list-item-shape);-webkit-tap-highlight-color:transparent;height:var(--_list-item-height);min-height:var(--_list-item-height);padding:var(--_list-item-padding);margin:var(--_list-item-margin);cursor:var(--_list-item-cursor)}:host([non-interactive]) .forge-list-item{cursor:initial}:host([disabled]) .forge-list-item{cursor:var(--_list-item-disabled-cursor);opacity:var(--_list-item-disabled-opacity)}:host([two-line]) .forge-list-item{height:var(--_list-item-two-line-height);min-height:var(--_list-item-two-line-height)}:host([three-line]) .forge-list-item{height:var(--_list-item-three-line-height);min-height:var(--_list-item-three-line-height)}:host([dense]) .forge-list-item{height:var(--_list-item-dense-one-line-height);min-height:var(--_list-item-dense-one-line-height)}:host([dense]) .text-container{font-size:var(--_list-item-dense-font-size)}:host([dense][indented]){-webkit-margin-start:var(--_list-item-dense-indent);margin-inline-start:var(--_list-item-dense-indent)}:host([dense][two-line]) .forge-list-item{height:var(--_list-item-dense-two-line-height);min-height:var(--_list-item-dense-two-line-height)}:host([dense][three-line]) .forge-list-item{height:var(--_list-item-dense-three-line-height);min-height:var(--_list-item-dense-three-line-height)}:host([selected]) .forge-list-item{color:var(--_list-item-selected-color)}:host([selected]) .forge-list-item::before{content:\"\";position:absolute;inset:0;border-radius:inherit;opacity:var(--_list-item-selected-opacity);background-color:var(--_list-item-selected-color)}:host([selected]) .forge-list-item ::slotted([slot=leading]),:host([selected]) .forge-list-item ::slotted([slot=trailing]){color:var(--_list-item-selected-color)}:host([selected]) .forge-list-item ::slotted([slot=leading]){color:var(--_list-item-leading-selected-color)}:host([selected]) .forge-list-item ::slotted([slot=trailing]){color:var(--_list-item-trailing-selected-color)}:host([selected]) .text-container{color:var(--_list-item-selected-color)}:host([selected]) forge-state-layer{--forge-state-layer-color:var(--_list-item-selected-color)}:host([indented]){-webkit-margin-start:var(--_list-item-indent);margin-inline-start:var(--_list-item-indent)}a.forge-list-item{color:inherit}.text-container{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-body2-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));letter-spacing:var(--forge-typography-body2-letter-spacing, .015625em);text-transform:var(--forge-typography-body2-text-transform,inherit);-webkit-text-decoration:var(--forge-typography-body2-text-decoration,inherit);text-decoration:var(--forge-typography-body2-text-decoration,inherit);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-webkit-box-sizing:border-box;box-sizing:border-box;font-size:var(--_list-item-supporting-text-font-size);font-weight:var(--_list-item-supporting-text-font-weight);line-height:var(--_list-item-supporting-text-line-height);-webkit-box-flex:1;flex:1}slot[name=secondary-text]::slotted(*),slot[name=subtitle]::slotted(*),slot[name=tertiary-text]::slotted(*),slot[name=tertiary-title]::slotted(*){-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-body1-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-body1-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-font-size-scale, .875)));font-weight:var(--forge-typography-body1-font-weight,400);line-height:var(--forge-typography-body1-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-line-height-scale, 1.125)));letter-spacing:var(--forge-typography-body1-letter-spacing, .0357142857em);text-transform:var(--forge-typography-body1-text-transform,inherit);-webkit-text-decoration:var(--forge-typography-body1-text-decoration,inherit);text-decoration:var(--forge-typography-body1-text-decoration,inherit);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--_list-item-supporting-text-color);display:block}:host([selected]) slot[name=secondary-text]::slotted(*),:host([selected]) slot[name=subtitle]::slotted(*),:host([selected]) slot[name=tertiary-text]::slotted(*),:host([selected]) slot[name=tertiary-title]::slotted(*){color:var(--_list-item-selected-supporting-text-color)}::slotted([slot=avatar]){background-color:var(--_list-item-avatar-background-color);color:var(--_list-item-avatar-color);display:-webkit-inline-box;display:inline-flex;flex-shrink:0;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;fill:currentColor;-webkit-margin-start:var(--_list-item-avatar-margin-start);margin-inline-start:var(--_list-item-avatar-margin-start);-webkit-margin-end:var(--_list-item-avatar-margin-end);margin-inline-end:var(--_list-item-avatar-margin-end);min-width:var(--_list-item-avatar-size);min-height:var(--_list-item-avatar-size);border-radius:var(--_list-item-avatar-shape)}::slotted([slot=leading]),::slotted([slot=trailing]){color:var(--_list-item-supporting-text-color);display:-webkit-inline-box;display:inline-flex;flex-shrink:0;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;fill:currentColor}::slotted([slot=leading]){-webkit-margin-start:var(--_list-item-leading-margin-start);margin-inline-start:var(--_list-item-leading-margin-start);-webkit-margin-end:var(--_list-item-leading-margin-end);margin-inline-end:var(--_list-item-leading-margin-end)}:host([selected]) ::slotted([slot=leading]){color:var(--_list-item-leading-selected-color)}:host([dense]) ::slotted([slot=leading]){-webkit-margin-end:var(--_list-item-dense-leading-margin-end);margin-inline-end:var(--_list-item-dense-leading-margin-end)}::slotted([slot=trailing]){-webkit-margin-start:var(--_list-item-trailing-margin-start);margin-inline-start:var(--_list-item-trailing-margin-start);-webkit-margin-end:var(--_list-item-trailing-margin-end);margin-inline-end:var(--_list-item-trailing-margin-end)}:host([selected]) ::slotted([slot=trailing]){color:var(--_list-item-trailing-selected-color)}:host([dense]) ::slotted([slot=trailing]){-webkit-margin-start:var(--_list-item-dense-trailing-margin-start);margin-inline-start:var(--_list-item-dense-trailing-margin-start)}:host([wrap]) .forge-list-item{height:auto}:host([wrap]) .text-container{white-space:normal;overflow:visible;text-overflow:clip}:host([wrap]) slot[name=secondary-text]::slotted(*),:host([wrap]) slot[name=subtitle]::slotted(*),:host([wrap]) slot[name=tertiary-text]::slotted(*),:host([wrap]) slot[name=tertiary-title]::slotted(*){white-space:normal;overflow:visible;text-overflow:clip}forge-focus-indicator{z-index:1;--forge-focus-indicator-shape:var(--forge-shape-medium, 4px)}forge-state-layer{border-radius:inherit}';
+const styles = ':host{--_list-item-indent:var(--forge-list-item-indent, 56px);--_list-item-dense-indent:var(--forge-list-item-dense-indent, var(--forge-spacing-xxlarge, 48px))}:host{display:block;outline:0}:host([hidden]){display:none}.forge-list-item{--_list-item-background-color:var(--forge-list-item-background-color, transparent);--_list-item-shape:var(--forge-list-item-shape, 0);--_list-item-padding:var(--forge-list-item-padding, var(--forge-spacing-xsmall, 8px) var(--forge-spacing-medium, 16px));--_list-item-margin:var(--forge-list-item-margin, 0);--_list-item-height:var(--forge-list-item-height, 48px);--_list-item-dense-height:var(--forge-list-item-dense-height, 32px);--_list-item-cursor:var(--forge-list-item-cursor, pointer);--_list-item-gap:var(--forge-list-item-gap, var(--forge-spacing-xlarge, 32px));--_list-item-supporting-text-color:var(--forge-list-item-supporting-text-color, var(--forge-theme-text-medium, rgba(0, 0, 0, 0.6)));--_list-item-supporting-text-font-size:var(--forge-list-item-supporting-text-font-size, var(--forge-typography-body2-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-font-size-scale, 1))));--_list-item-supporting-text-font-weight:var(--forge-list-item-supporting-text-font-weight, var(--forge-typography-body2-font-weight, 400));--_list-item-supporting-text-line-height:var(--forge-list-item-supporting-text-line-height, 1.5rem);--_list-item-selected-color:var(--forge-list-item-selected-color, var(--forge-theme-primary, #3f51b5));--_list-item-selected-opacity:var(--forge-list-item-selected-opacity, 0.08);--_list-item-selected-leading-color:var(--forge-list-item-selected-leading-color, var(--_list-item-selected-color));--_list-item-selected-trailing-color:var(--forge-list-item-selected-trailing-color, var(--_list-item-selected-color));--_list-item-selected-supporting-text-color:var(--forge-list-item-selected-supporting-text-color, var(--forge-theme-text-medium, rgba(0, 0, 0, 0.6)));--_list-item-disabled-opacity:var(--forge-list-item-disabled-opacity, 0.38);--_list-item-disabled-cursor:var(--forge-list-item-disabled-cursor, not-allowed);--_list-item-one-line-height:var(--forge-list-item-one-line-height, var(--_list-item-height));--_list-item-two-line-height:var(--forge-list-item-two-line-height, var(--forge-list-item-height, 72px));--_list-item-three-line-height:var(--forge-list-item-three-line-height, var(--forge-list-item-height, 88px));--_list-item-dense-one-line-height:var(--forge-list-item-dense-one-line-height, var(--_list-item-dense-height));--_list-item-dense-two-line-height:var(--forge-list-item-dense-two-line-height, var(--forge-list-item-dense-height, 56px));--_list-item-dense-three-line-height:var(--forge-list-item-dense-three-line-height, var(--forge-list-item-dense-height, 72px));--_list-item-dense-font-size:var(--forge-list-item-dense-font-size, 0.875rem);--_list-item-dense-gap:var(--forge-list-item-dense-gap, var(--forge-spacing-medium, 16px));--_list-item-leading-selected-color:var(--forge-list-item-leading-selected-color, var(--_list-item-selected-color));--_list-item-trailing-selected-color:var(--forge-list-item-trailing-selected-color, var(--_list-item-selected-color));--_list-item-avatar-background-color:var(--forge-list-item-avatar-background-color, var(--forge-theme-text-medium, rgba(0, 0, 0, 0.6)));--_list-item-avatar-color:var(--forge-list-item-avatar-color, var(--forge-theme-on-primary, #ffffff));--_list-item-avatar-shape:var(--forge-list-item-avatar-shape, var(--forge-shape-round, 50%));--_list-item-avatar-size:var(--forge-list-item-avatar-size, 40px)}.forge-list-item{position:relative;display:-webkit-box;display:flex;gap:var(--_list-item-gap);-webkit-box-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;outline:0;text-decoration:none;background-color:var(--_list-item-background-color);border-radius:var(--_list-item-shape);-webkit-tap-highlight-color:transparent;height:var(--_list-item-height);min-height:var(--_list-item-height);padding:var(--_list-item-padding);margin:var(--_list-item-margin);cursor:var(--_list-item-cursor)}:host([non-interactive]) .forge-list-item{cursor:initial}:host([disabled]) .forge-list-item{cursor:var(--_list-item-disabled-cursor);opacity:var(--_list-item-disabled-opacity)}:host([two-line]) .forge-list-item{height:var(--_list-item-two-line-height);min-height:var(--_list-item-two-line-height)}:host([three-line]) .forge-list-item{height:var(--_list-item-three-line-height);min-height:var(--_list-item-three-line-height)}:host([dense]) .forge-list-item{--_list-item-gap:var(--_list-item-dense-gap);height:var(--_list-item-dense-one-line-height);min-height:var(--_list-item-dense-one-line-height)}:host([dense]) .text-container{font-size:var(--_list-item-dense-font-size)}:host([dense][indented]){-webkit-margin-start:var(--_list-item-dense-indent);margin-inline-start:var(--_list-item-dense-indent)}:host([dense][two-line]) .forge-list-item{height:var(--_list-item-dense-two-line-height);min-height:var(--_list-item-dense-two-line-height)}:host([dense][three-line]) .forge-list-item{height:var(--_list-item-dense-three-line-height);min-height:var(--_list-item-dense-three-line-height)}:host([selected]) .forge-list-item{color:var(--_list-item-selected-color)}:host([selected]) .forge-list-item::before{content:\"\";position:absolute;inset:0;border-radius:inherit;opacity:var(--_list-item-selected-opacity);background-color:var(--_list-item-selected-color)}:host([selected]) .forge-list-item ::slotted([slot=leading]),:host([selected]) .forge-list-item ::slotted([slot=trailing]){color:var(--_list-item-selected-color)}:host([selected]) .forge-list-item ::slotted([slot=leading]){color:var(--_list-item-leading-selected-color)}:host([selected]) .forge-list-item ::slotted([slot=trailing]){color:var(--_list-item-trailing-selected-color)}:host([selected]) .text-container{color:var(--_list-item-selected-color)}:host([selected]) forge-state-layer{--forge-state-layer-color:var(--_list-item-selected-color)}:host([indented]){-webkit-margin-start:var(--_list-item-indent);margin-inline-start:var(--_list-item-indent)}a.forge-list-item{color:inherit}.text-container{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-body2-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));letter-spacing:var(--forge-typography-body2-letter-spacing, .015625em);text-transform:var(--forge-typography-body2-text-transform,inherit);-webkit-text-decoration:var(--forge-typography-body2-text-decoration,inherit);text-decoration:var(--forge-typography-body2-text-decoration,inherit);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-webkit-box-sizing:border-box;box-sizing:border-box;font-size:var(--_list-item-supporting-text-font-size);font-weight:var(--_list-item-supporting-text-font-weight);line-height:var(--_list-item-supporting-text-line-height);-webkit-box-flex:1;flex:1}slot[name=secondary-text]::slotted(*),slot[name=subtitle]::slotted(*),slot[name=tertiary-text]::slotted(*),slot[name=tertiary-title]::slotted(*){-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-body1-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-body1-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-font-size-scale, .875)));font-weight:var(--forge-typography-body1-font-weight,400);line-height:var(--forge-typography-body1-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-line-height-scale, 1.125)));letter-spacing:var(--forge-typography-body1-letter-spacing, .0357142857em);text-transform:var(--forge-typography-body1-text-transform,inherit);-webkit-text-decoration:var(--forge-typography-body1-text-decoration,inherit);text-decoration:var(--forge-typography-body1-text-decoration,inherit);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--_list-item-supporting-text-color);display:block}:host([selected]) slot[name=secondary-text]::slotted(*),:host([selected]) slot[name=subtitle]::slotted(*),:host([selected]) slot[name=tertiary-text]::slotted(*),:host([selected]) slot[name=tertiary-title]::slotted(*){color:var(--_list-item-selected-supporting-text-color)}::slotted([slot=avatar]){background-color:var(--_list-item-avatar-background-color);color:var(--_list-item-avatar-color);display:-webkit-inline-box;display:inline-flex;flex-shrink:0;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;fill:currentColor;-webkit-margin-end:calc((var(--_list-item-gap)/ 2) * -1);margin-inline-end:calc((var(--_list-item-gap)/ 2) * -1);min-width:var(--_list-item-avatar-size);min-height:var(--_list-item-avatar-size);border-radius:var(--_list-item-avatar-shape)}::slotted([slot=leading]),::slotted([slot=trailing]){color:var(--_list-item-supporting-text-color);display:-webkit-inline-box;display:inline-flex;flex-shrink:0;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;fill:currentColor}:host([selected]) ::slotted([slot=leading]){color:var(--_list-item-leading-selected-color)}:host([selected]) ::slotted([slot=trailing]){color:var(--_list-item-trailing-selected-color)}:host([wrap]) .forge-list-item{height:auto}:host([wrap]) .text-container{white-space:normal;overflow:visible;text-overflow:clip}:host([wrap]) slot[name=secondary-text]::slotted(*),:host([wrap]) slot[name=subtitle]::slotted(*),:host([wrap]) slot[name=tertiary-text]::slotted(*),:host([wrap]) slot[name=tertiary-title]::slotted(*){white-space:normal;overflow:visible;text-overflow:clip}forge-focus-indicator{z-index:1;--forge-focus-indicator-shape:var(--forge-shape-medium, 4px)}forge-state-layer{border-radius:inherit}';
 /**
  * @tag forge-list-item
  *
@@ -71,44 +71,39 @@ const styles = ':host{--_list-item-indent:var(--forge-list-item-indent, 56px);--
  * @csspart focus-indicator - The forwarded focus indicator's internal indicator element.
  * @csspart state-layer - The forwarded state layer's internal surface element.
  *
- * @cssprop --forge-list-item-background-color - The background color.
- * @cssprop --forge-list-item-shape - The shape of the list item.
- * @cssprop --forge-list-item-padding - The padding inside of the container element.
- * @cssprop --forge-list-item-margin - The margin around the host element.
- * @cssprop --forge-list-item-height - The height of the container.
- * @cssprop --forge-list-item-dense-height - The height when in the dense state.
- * @cssprop --forge-list-item-indent - The margin inline state when in the indented state.
- * @cssprop --forge-list-item-supporting-text-color - The text color of the supporting text.
- * @cssprop --forge-list-item-supporting-line-height - The line height of the supporting text.
- * @cssprop --forge-list-item-selected-color - The color when in the selected state.
- * @cssprop --forge-list-item-opacity - The opacity of the background color when in the disabled state.
- * @cssprop --forge-list-item-selected-leading-color - The color of the leading content when in the selected state.
- * @cssprop --forge-list-item-selected-trailing-color - The color of the trailing content when in the selected state.
- * @cssprop --forge-list-item-selected-supporting-text-color - The color of the supporting text when in the selected state.
- * @cssprop --forge-list-item-disabled-opacity - The opacity of the element when in the disabled state.
- * @cssprop --forge-list-item-disabled-cursor - The cursor when in the disabled state.
- * @cssprop --forge-list-item-one-line-height - The line height when in the one/single line state.
- * @cssprop --forge-list-item-two-line-height - The line height when in the two line state.
- * @cssprop --forge-list-item-three-line-height - The line height when in the three line state.
- * @cssprop --forge-list-item-dense-one-line-height - The line height when in the dense one/single line state.
- * @cssprop --forge-list-item-dense-two-line-height - The line height when in the dense two line state.
- * @cssprop --forge-list-item-dense-three-line-height - The line height when in the dense three line state.
- * @cssprop --forge-list-item-dense-font-size - The font size when in the dense state.
- * @cssprop --forge-list-item-dense-indent - The margin inline state when in the dense indented state.
- * @cssprop --forge-list-item-dense-leading-margin-end - The margin end of the leading content when in the dense state.
- * @cssprop --forge-list-item-dense-trailing-margin-start - The margin start of the trailing content when in the dense state.
- * @cssprop --forge-list-item-leading-margin-start - The margin start of the leading content.
- * @cssprop --forge-list-item-leading-margin-end - The margin end of the leading content.
- * @cssprop --forge-list-item-leading-selected-color - The color of the leading content when in the selected state.
- * @cssprop --forge-list-item-trailing-margin-start - The margin start of the trailing content.
- * @cssprop --forge-list-item-trailing-margin-end - The margin end of the trailing content.
- * @cssprop --forge-list-item-trailing-selected-color - The color of the trailing content when in the selected state.
- * @cssprop --forge-list-item-avatar-background-color - The background color of the avatar container.
- * @cssprop --forge-list-item-avatar-color - The foreground color of the avatar container.
- * @cssprop --forge-list-item-avatar-shape - The shape of the avatar container.
- * @cssprop --forge-list-item-avatar-margin-start - The margin start of the avatar container.
- * @cssprop --forge-list-item-avatar-margin-end - The margin end of the avatar container.
- * @cssprop --forge-list-item-avatar-size - The height & width of the avatar container.
+ * @cssproperty --forge-list-item-background-color - The background color.
+ * @cssproperty --forge-list-item-shape - The shape of the list item.
+ * @cssproperty --forge-list-item-padding - The padding inside of the container element.
+ * @cssproperty --forge-list-item-margin - The margin around the host element.
+ * @cssproperty --forge-list-item-height - The height of the container.
+ * @cssproperty --forge-list-item-dense-height - The height when in the dense state.
+ * @cssproperty --forge-list-item-indent - The margin inline state when in the indented state.
+ * @cssproperty --forge-list-item-cursor - The cursor when interactive.
+ * @cssproperty --forge-list-item-gap - The gap between the slotted content.
+ * @cssproperty --forge-list-item-supporting-text-color - The text color of the supporting text.
+ * @cssproperty --forge-list-item-supporting-line-height - The line height of the supporting text.
+ * @cssproperty --forge-list-item-selected-color - The color when in the selected state.
+ * @cssproperty --forge-list-item-opacity - The opacity of the background color when in the disabled state.
+ * @cssproperty --forge-list-item-selected-leading-color - The color of the leading content when in the selected state.
+ * @cssproperty --forge-list-item-selected-trailing-color - The color of the trailing content when in the selected state.
+ * @cssproperty --forge-list-item-selected-supporting-text-color - The color of the supporting text when in the selected state.
+ * @cssproperty --forge-list-item-disabled-opacity - The opacity of the element when in the disabled state.
+ * @cssproperty --forge-list-item-disabled-cursor - The cursor when in the disabled state.
+ * @cssproperty --forge-list-item-one-line-height - The line height when in the one/single line state.
+ * @cssproperty --forge-list-item-two-line-height - The line height when in the two line state.
+ * @cssproperty --forge-list-item-three-line-height - The line height when in the three line state.
+ * @cssproperty --forge-list-item-dense-one-line-height - The line height when in the dense one/single line state.
+ * @cssproperty --forge-list-item-dense-two-line-height - The line height when in the dense two line state.
+ * @cssproperty --forge-list-item-dense-three-line-height - The line height when in the dense three line state.
+ * @cssproperty --forge-list-item-dense-font-size - The font size when in the dense state.
+ * @cssproperty --forge-list-item-dense-indent - The margin inline state when in the dense indented state.
+ * @cssproperty --forge-list-item-dense-gap - The gap between the slotted content when in the dense state.
+ * @cssproperty --forge-list-item-leading-selected-color - The color of the leading content when in the selected state.
+ * @cssproperty --forge-list-item-trailing-selected-color - The color of the trailing content when in the selected state.
+ * @cssproperty --forge-list-item-avatar-background-color - The background color of the avatar container.
+ * @cssproperty --forge-list-item-avatar-color - The foreground color of the avatar container.
+ * @cssproperty --forge-list-item-avatar-shape - The shape of the avatar container.
+ * @cssproperty --forge-list-item-avatar-size - The height & width of the avatar container.
  */
 let ListItemComponent = class ListItemComponent extends HTMLElement {
     static get observedAttributes() {

package/esm/menu/menu-foundation.js

@@ -295,6 +295,7 @@ export class MenuFoundation extends CascadingListDropdownAwareFoundation {
             if (this._open) {
                 if (results && isArray(results) && results.length) {
                     this._options = results;
+                    this._mapIconToLeadingIcon();
                     this._adapter.setOptions(results);
                     const selectedValues = this._getSelectedValues();
                     if (selectedValues.length) {

package/esm/menu/menu.d.ts

@@ -73,7 +73,10 @@ export declare class MenuComponent extends ListDropdownAware implements IMenuCom
     popupOffset: IPopupPosition;
     /** Sets the callback that will be executed for each option in the dropdown for producing custom option templates. */
     optionBuilder: MenuOptionBuilder;
-    /** Gets the currently active popup element when the dropdown is open. */
+    /**
+     * Gets the currently active popup element when the dropdown is open.
+     * @readonly
+     */
     popupElement: HTMLElement | undefined;
     /** Force propagates the key event from another element this component. */
     propagateKeyEvent(evt: KeyboardEvent): void;

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

@@ -12,9 +12,32 @@ declare global {
     }
 }
 /**
- * The web component class behind the `<forge-page-state>` custom element.
  *
  * @tag forge-page-state
+ *
+ * @cssproperty --forge-page-state-width - The width of the page state.
+ * @cssproperty --forge-page-state-height - The height of the page state.
+ * @cssproperty --forge-page-state-spacing - The spacing of the page state.
+ * @cssproperty --forge-page-state-mobile-width - The mobile width of the page state.
+ * @cssproperty --forge-page-state-graphic-height - The graphic height of the page state.
+ * @cssproperty --forge-page-state-graphic-spacing - The graphic spacing of the page state.
+ * @cssproperty --forge-page-state-mobile-graphic-height - The mobile graphic height of the page state.
+ * @cssproperty --forge-page-state-title-color - The title color of the page state.
+ * @cssproperty --forge-page-state-title-spacing - The title spacing of the page state.
+ * @cssproperty --forge-page-state-message-color - The message color of the page state.
+ * @cssproperty --forge-page-state-message-spacing - The message spacing of the page state.
+ * @cssproperty --forge-page-state-actions-spacing - The actions spacing of the page state.
+ *
+ * @csspart root - The root container element.
+ * @csspart graphic-container - The graphic container element.
+ * @csspart title-container - The title container element.
+ * @csspart message-container - The message container element.
+ * @csspart actions-container - The actions container element.
+ *
+ * @slot graphic - The slot where the graphic will be rendered.
+ * @slot title - The slot where the title will be rendered.
+ * @slot message - The slot where the message will be rendered.
+ * @slot actions - The slot where the actions will be rendered.
  */
 export declare class PageStateComponent extends BaseComponent implements IPageStateComponent {
     constructor();

package/esm/page-state/page-state.js

@@ -7,12 +7,35 @@ import { __decorate } from "tslib";
 import { CustomElement, attachShadowTemplate } from '@tylertech/forge-core';
 import { BaseComponent } from '../core/base/base-component';
 import { PAGE_STATE_CONSTANTS } from './page-state-constants';
-const template = '<template><div class=\"forge-page-state\" part=\"root\"><div class=\"forge-page-state__graphic\" part=\"graphic-container\"><slot name=\"graphic\"></slot></div><h1 class=\"forge-page-state__title\" part=\"title-container\"><slot name=\"title\"></slot></h1><h2 class=\"forge-page-state__message\" part=\"message-container\"><slot name=\"message\"></slot></h2><div class=\"forge-page-state__actions\" part=\"actions-container\"><slot name=\"action\"></slot></div></div></template>';
-const styles = '.forge-page-state{width:576px;width:var(--forge-page-state-width,576px);margin-top:56px;margin-top:var(--forge-page-state-vertical-margin,56px);margin-bottom:56px;margin-bottom:var(--forge-page-state-vertical-margin,56px);text-align:center}.forge-page-state__graphic{height:296px;height:var(--forge-page-state-graphic-height,296px);margin-bottom:56px;margin-bottom:var(--forge-page-state-vertical-margin,56px);display:-webkit-box;display:flex;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center;width:100%}.forge-page-state__graphic ::slotted([slot=graphic]){height:100%;width:100%}.forge-page-state__title{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-headline3-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:3rem;font-size:var(--mdc-typography-headline3-font-size, 3rem);line-height:3.125rem;line-height:var(--mdc-typography-headline3-line-height, 3.125rem);font-weight:400;font-weight:var(--mdc-typography-headline3-font-weight,400);letter-spacing:normal;letter-spacing:var(--mdc-typography-headline3-letter-spacing, normal);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-headline3-text-decoration,inherit);text-decoration:var(--mdc-typography-headline3-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-headline3-text-transform,inherit);color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-background,rgba(0,0,0,.54));margin-top:56px;margin-top:var(--forge-page-state-vertical-margin,56px);margin-bottom:56px;margin-bottom:var(--forge-page-state-vertical-margin,56px)}.forge-page-state__message{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-subtitle1-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:1rem;font-size:var(--mdc-typography-subtitle1-font-size, 1rem);line-height:1.75rem;line-height:var(--mdc-typography-subtitle1-line-height, 1.75rem);font-weight:400;font-weight:var(--mdc-typography-subtitle1-font-weight,400);letter-spacing:.009375em;letter-spacing:var(--mdc-typography-subtitle1-letter-spacing, .009375em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-subtitle1-text-decoration,inherit);text-decoration:var(--mdc-typography-subtitle1-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-subtitle1-text-transform,inherit);color:rgba(0,0,0,.87);color:var(--mdc-theme-text-primary-on-background,rgba(0,0,0,.87));margin-bottom:56px;margin-bottom:var(--forge-page-state-vertical-margin,56px);font-size:20px;margin-top:0}.forge-page-state__actions ::slotted(:not(:last-child)){margin-right:16px}@media (max-width:599px){.forge-page-state{width:70%;width:var(--forge-page-state-mobile-width,70%)}.forge-page-state__graphic{height:auto;height:var(--forge-page-state-mobile-graphic-height,auto)}.forge-page-state__title{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-headline5-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:1.5rem;font-size:var(--mdc-typography-headline5-font-size, 1.5rem);line-height:2rem;line-height:var(--mdc-typography-headline5-line-height, 2rem);font-weight:400;font-weight:var(--mdc-typography-headline5-font-weight,400);letter-spacing:normal;letter-spacing:var(--mdc-typography-headline5-letter-spacing, normal);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-headline5-text-decoration,inherit);text-decoration:var(--mdc-typography-headline5-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-headline5-text-transform,inherit)}.forge-page-state__message{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-body1-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:1rem;font-size:var(--mdc-typography-body1-font-size, 1rem);line-height:1.5rem;line-height:var(--mdc-typography-body1-line-height, 1.5rem);font-weight:400;font-weight:var(--mdc-typography-body1-font-weight,400);letter-spacing:.03125em;letter-spacing:var(--mdc-typography-body1-letter-spacing, .03125em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-body1-text-decoration,inherit);text-decoration:var(--mdc-typography-body1-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-body1-text-transform,inherit)}.forge-page-state__actions{display:-webkit-box;display:flex;-webkit-box-pack:center;justify-content:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;-webkit-box-align:center;align-items:center}.forge-page-state__actions ::slotted(:not(:last-child)){margin-right:0;margin-bottom:16px}}:host{display:-webkit-box;display:flex;width:100%;-webkit-box-pack:center;justify-content:center}:host([hidden]){display:none}';
+const template = '<template><div class=\"forge-page-state\" part=\"root\"><div class=\"graphic\" part=\"graphic-container\"><slot name=\"graphic\"></slot></div><div class=\"title\" part=\"title-container\"><slot name=\"title\"></slot></div><div class=\"message\" part=\"message-container\"><slot name=\"message\"></slot></div><div class=\"actions\" part=\"actions-container\"><slot name=\"action\"></slot></div></div></template>';
+const styles = ':host{--_page-state-width:var(--forge-page-state-width, 576px);--_page-state-height:var(--forge-page-state-height, auto);--_page-state-spacing:var(--forge-page-state-spacing, var(--forge-spacing-xxxlarge, 56px));--_page-state-mobile-width:var(--forge-page-state-mobile-width, 70%);--_page-state-graphic-height:var(--forge-page-state-graphic-height, 296px);--_page-state-graphic-spacing:var(--forge-page-state-graphic-spacing, var(--forge-spacing-xxxlarge, 56px));--_page-state-mobile-graphic-height:var(--forge-page-state-mobile-graphic-height, auto);--_page-state-title-color:var(--forge-page-state-title-color, var(--forge-theme-text-medium, rgba(0, 0, 0, 0.6)));--_page-state-title-spacing:var(--forge-page-state-title-spacing, var(--forge-spacing-xxxlarge, 56px));--_page-state-message-color:var(--forge-page-state-message-color, var(--forge-theme-text-high, rgba(0, 0, 0, 0.87)));--_page-state-message-spacing:var(--forge-page-state-message-spacing, var(--forge-spacing-xxxlarge, 56px));--_page-state-actions-spacing:var(--forge-page-state-actions-spacing, 16px)}:host{display:-webkit-box;display:flex;width:100%;-webkit-box-pack:center;justify-content:center;container-type:inline-size}:host([hidden]){display:none}.forge-page-state{width:var(--_page-state-width);margin-block:var(--_page-state-spacing);text-align:center}.forge-page-state .graphic{--_page-state-height:var(--_page-state-graphic-height);--_page-state-spacing:var(--_page-state-graphic-spacing);display:-webkit-box;display:flex;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center;width:100%}.forge-page-state .graphic ::slotted([slot=graphic]){height:100%;width:100%}.forge-page-state .title{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-heading8-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-heading8-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-heading8-font-size-scale, 2.25)));font-weight:var(--forge-typography-heading8-font-weight,500);line-height:var(--forge-typography-heading8-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-heading8-line-height-scale, 2.625)));letter-spacing:var(--forge-typography-heading8-letter-spacing, -.0027777778em);text-transform:var(--forge-typography-heading8-text-transform,inherit);-webkit-text-decoration:var(--forge-typography-heading8-text-decoration,inherit);text-decoration:var(--forge-typography-heading8-text-decoration,inherit);color:var(--_page-state-title-color);margin-block:var(--_page-state-title-spacing)}.forge-page-state .message{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-body4-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-body4-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-font-size-scale, 1.25)));font-weight:var(--forge-typography-body4-font-weight,400);line-height:var(--forge-typography-body4-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-line-height-scale, 1.75)));letter-spacing:var(--forge-typography-body4-letter-spacing, .005em);text-transform:var(--forge-typography-body4-text-transform,inherit);-webkit-text-decoration:var(--forge-typography-body4-text-decoration,inherit);text-decoration:var(--forge-typography-body4-text-decoration,inherit);color:var(--_page-state-message-color);-webkit-margin-after:var(--_page-state-message-spacing);margin-block-end:var(--_page-state-message-spacing)}.forge-page-state .actions{display:grid;-webkit-box-pack:center;justify-content:center;grid-auto-flow:column;gap:var(--_page-state-actions-spacing)}@container (max-width:599px){.forge-page-state{--_page-state-width:var(--_page-state-mobile-width)}.forge-page-state .graphic{--_page-state-height:var(--_page-state-mobile-graphic-height)}.forge-page-state .title{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-heading5-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-heading5-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-heading5-font-size-scale, 1.5)));font-weight:var(--forge-typography-heading5-font-weight,500);line-height:var(--forge-typography-heading5-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-heading5-line-height-scale, 1.75)));letter-spacing:var(--forge-typography-heading5-letter-spacing, 0);text-transform:var(--forge-typography-heading5-text-transform,inherit);-webkit-text-decoration:var(--forge-typography-heading5-text-decoration,inherit);text-decoration:var(--forge-typography-heading5-text-decoration,inherit)}.forge-page-state .message{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-body2-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-body2-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-font-size-scale, 1)));font-weight:var(--forge-typography-body2-font-weight,400);line-height:var(--forge-typography-body2-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-line-height-scale, 1.375)));letter-spacing:var(--forge-typography-body2-letter-spacing, .015625em);text-transform:var(--forge-typography-body2-text-transform,inherit);-webkit-text-decoration:var(--forge-typography-body2-text-decoration,inherit);text-decoration:var(--forge-typography-body2-text-decoration,inherit)}.forge-page-state .actions{grid-auto-flow:row}}';
 /**
- * The web component class behind the `<forge-page-state>` custom element.
  *
  * @tag forge-page-state
+ *
+ * @cssproperty --forge-page-state-width - The width of the page state.
+ * @cssproperty --forge-page-state-height - The height of the page state.
+ * @cssproperty --forge-page-state-spacing - The spacing of the page state.
+ * @cssproperty --forge-page-state-mobile-width - The mobile width of the page state.
+ * @cssproperty --forge-page-state-graphic-height - The graphic height of the page state.
+ * @cssproperty --forge-page-state-graphic-spacing - The graphic spacing of the page state.
+ * @cssproperty --forge-page-state-mobile-graphic-height - The mobile graphic height of the page state.
+ * @cssproperty --forge-page-state-title-color - The title color of the page state.
+ * @cssproperty --forge-page-state-title-spacing - The title spacing of the page state.
+ * @cssproperty --forge-page-state-message-color - The message color of the page state.
+ * @cssproperty --forge-page-state-message-spacing - The message spacing of the page state.
+ * @cssproperty --forge-page-state-actions-spacing - The actions spacing of the page state.
+ *
+ * @csspart root - The root container element.
+ * @csspart graphic-container - The graphic container element.
+ * @csspart title-container - The title container element.
+ * @csspart message-container - The message container element.
+ * @csspart actions-container - The actions container element.
+ *
+ * @slot graphic - The slot where the graphic will be rendered.
+ * @slot title - The slot where the title will be rendered.
+ * @slot message - The slot where the message will be rendered.
+ * @slot actions - The slot where the actions will be rendered.
  */
 let PageStateComponent = class PageStateComponent extends BaseComponent {
     constructor() {

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

@@ -43,7 +43,9 @@ export interface IPaginatorAdapter extends IBaseAdapter {
     setAlternative(alternative: boolean): void;
     setAlignment(alignment: PaginatorAlternativeAlignment): void;
     hasFocus(): boolean;
-    handleFocusMove(from?: PaginatorFieldIdentifier | null, options?: FocusOptions): void;
+    setFocus(options?: FocusOptions): void;
+    getFocusedField(): PaginatorFieldIdentifier | null;
+    tryDisableFields(fieldsToDisable: PaginatorFieldIdentifier[]): void;
 }
 /**
  * Provides facilities for interacting with the internal DOM of `PaginatorComponent`.
@@ -97,6 +99,8 @@ export declare class PaginatorAdapter extends BaseAdapter<IPaginatorComponent> i
     setAlternative(alternative: boolean): void;
     setAlignment(alignment: PaginatorAlternativeAlignment): void;
     hasFocus(): boolean;
-    handleFocusMove(from?: PaginatorFieldIdentifier, options?: FocusOptions): void;
+    setFocus(options?: FocusOptions): void;
+    getFocusedField(): PaginatorFieldIdentifier | null;
+    tryDisableFields(fieldsToDisable: PaginatorFieldIdentifier[]): void;
     private _tryFocus;
 }

package/esm/paginator/paginator-adapter.js

@@ -149,66 +149,46 @@ export class PaginatorAdapter extends BaseAdapter {
     hasFocus() {
         return this._component.matches(':focus');
     }
-    handleFocusMove(from, options) {
-        if (from && !this.hasFocus()) {
-            return; // We can only move focus elsewhere within the element if the element already contains focus
+    setFocus(options) {
+        this._tryFocus([
+            this._pageSizeSelect,
+            this._firstPageButton,
+            this._previousPageButton,
+            this._nextPageButton,
+            this._lastPageButton
+        ], options);
+    }
+    getFocusedField() {
+        if (this._pageSizeSelect.matches(':focus-within')) {
+            return 'page-size';
         }
-        switch (from) {
-            case 'first':
-                this._tryFocus([
-                    this._nextPageButton,
-                    this._lastPageButton,
-                    this._previousPageButton,
-                    this._pageSizeSelect
-                ], options);
-                break;
-            case 'last':
-                this._tryFocus([
-                    this._previousPageButton,
-                    this._firstPageButton,
-                    this._nextPageButton,
-                    this._pageSizeSelect
-                ], options);
-                break;
-            case 'previous':
-                this._tryFocus([
-                    this._nextPageButton,
-                    this._lastPageButton,
-                    this._firstPageButton,
-                    this._pageSizeSelect
-                ]);
-                break;
-            case 'next':
-                this._tryFocus([
-                    this._previousPageButton,
-                    this._firstPageButton,
-                    this._lastPageButton,
-                    this._pageSizeSelect
-                ], options);
-                break;
-            case 'page-size':
-                this._tryFocus([
-                    this._nextPageButton,
-                    this._lastPageButton,
-                    this._firstPageButton,
-                    this._previousPageButton
-                ], options);
-                break;
-            default:
-                this._tryFocus([
-                    this._firstPageButton,
-                    this._previousPageButton,
-                    this._nextPageButton,
-                    this._lastPageButton,
-                    this._pageSizeSelect
-                ], options);
-                break;
+        else if (this._firstPageButton.matches(':focus-within')) {
+            return 'first';
+        }
+        else if (this._previousPageButton.matches(':focus-within')) {
+            return 'previous';
+        }
+        else if (this._nextPageButton.matches(':focus-within')) {
+            return 'next';
         }
+        else if (this._lastPageButton.matches(':focus-within')) {
+            return 'last';
+        }
+        return null;
+    }
+    tryDisableFields(fieldsToDisable) {
+        const fieldDisablers = {
+            'first': () => this.disableFirstPageButton(),
+            'last': () => this.disableLastPageButton(),
+            'previous': () => this.disablePreviousPageButton(),
+            'next': () => this.disableNextPageButton()
+        };
+        fieldsToDisable.forEach(field => { var _a; return (_a = fieldDisablers[field]) === null || _a === void 0 ? void 0 : _a.call(fieldDisablers); });
     }
     _tryFocus(elements, options) {
         const preventScroll = typeof (options === null || options === void 0 ? void 0 : options.preventScroll) === 'boolean' ? options.preventScroll : true;
         for (const el of elements) {
-            if (el && el.isConnected && !el.disabled) {
+            if (el && el.isConnected && !el.disabled && el.style.display !== 'none') {
                 el.focus(Object.assign(Object.assign({}, options), { preventScroll }));
                 return;
             }

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

@@ -47,7 +47,7 @@ export declare const PAGINATOR_CONSTANTS: {
         ALIGNMENT: string;
     };
     events: {
-        CHANGE: string;
+        readonly CHANGE: "forge-paginator-change";
     };
     numbers: {
         DEFAULT_PAGE_INDEX: number;

package/esm/paginator/paginator-foundation.js

@@ -37,7 +37,7 @@ export class PaginatorFoundation {
         this._detachListeners();
     }
     focus(options) {
-        this._adapter.handleFocusMove(null, options);
+        this._adapter.setFocus(options);
     }
     _attachListeners() {
         this._adapter.attachPageSizeChangeListener(this._pageSizeListener);
@@ -149,30 +149,20 @@ export class PaginatorFoundation {
         this._adapter.enablePreviousPageButton();
         this._adapter.enableNextPageButton();
         this._adapter.enableLastPageButton();
+        const fieldsToDisable = [];
         if (!this._hasFirstPage()) {
-            if (this._adapter.hasFocus()) {
-                this._adapter.handleFocusMove('first');
-            }
-            this._adapter.disableFirstPageButton();
+            fieldsToDisable.push('first');
         }
         if (!this._hasPreviousPage()) {
-            if (this._adapter.hasFocus()) {
-                this._adapter.handleFocusMove('previous');
-            }
-            this._adapter.disablePreviousPageButton();
+            fieldsToDisable.push('previous');
         }
         if (!this._hasNextPage()) {
-            if (this._adapter.hasFocus()) {
-                this._adapter.handleFocusMove('next');
-            }
-            this._adapter.disableNextPageButton();
+            fieldsToDisable.push('next');
         }
         if (!this._hasLastPage()) {
-            if (this._adapter.hasFocus()) {
-                this._adapter.handleFocusMove('last');
-            }
-            this._adapter.disableLastPageButton();
+            fieldsToDisable.push('last');
         }
+        this._adapter.tryDisableFields(fieldsToDisable);
     }
     _toggleFirstLastButtons() {
         this._toggleFirstButton();

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

@@ -13,6 +13,7 @@ export declare const POPOVER_CONSTANTS: {
         TRIGGER_TYPE: string;
         LONGPRESS_DELAY: string;
         PERSISTENT_HOVER: string;
+        HOVER_DELAY: string;
         HOVER_DISMISS_DELAY: string;
     };
     classes: {
@@ -30,6 +31,7 @@ export declare const POPOVER_CONSTANTS: {
     };
     defaults: {
         TRIGGER_TYPE: PopoverTriggerType;
+        HOVER_DELAY: number;
     };
 };
 export declare const POPOVER_HOVER_TIMEOUT = 500;

package/esm/popover/popover-constants.js

@@ -12,6 +12,7 @@ const attributes = {
     TRIGGER_TYPE: 'trigger-type',
     LONGPRESS_DELAY: 'longpress-delay',
     PERSISTENT_HOVER: 'persistent-hover',
+    HOVER_DELAY: 'hover-delay',
     HOVER_DISMISS_DELAY: 'hover-dismiss-delay'
 };
 const classes = {
@@ -28,7 +29,8 @@ const events = {
     TOGGLE: `${elementName}-toggle`
 };
 const defaults = {
-    TRIGGER_TYPE: 'click'
+    TRIGGER_TYPE: 'click',
+    HOVER_DELAY: 0
 };
 export const POPOVER_CONSTANTS = {
     elementName,

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

@@ -16,6 +16,7 @@ export interface IPopoverFoundation extends IOverlayAwareFoundation {
     longpressDelay: number;
     persistentHover: boolean;
     hoverDismissDelay: number;
+    hoverDelay: number;
     dispatchBeforeToggleEvent(state: IDismissibleStackState): boolean;
 }
 declare const BaseClass: import("..").AbstractConstructor<import("../core/mixins/interactions/longpress/with-longpress-listener").WithLongpressListenerContract> & (abstract new (_adapter: IPopoverAdapter) => OverlayAwareFoundation<IPopoverAdapter>);
@@ -26,10 +27,12 @@ export declare class PopoverFoundation extends BaseClass implements IPopoverFoun
     private _triggerTypes;
     private _persistentHover;
     private _hoverDismissDelay;
+    private _hoverDelay;
     private _previouslyFocusedElement;
     private _hoverAnchorLeaveTimeout;
     private _popoverMouseleaveTimeout;
     private _currentHoverCoords;
+    private _hoverTimeout;
     private _anchorClickListener;
     private _anchorDoubleClickListener;
     private _anchorMouseenterListener;
@@ -133,6 +136,8 @@ export declare class PopoverFoundation extends BaseClass implements IPopoverFoun
     set longpressDelay(value: number);
     get persistentHover(): boolean;
     set persistentHover(value: boolean);
+    get hoverDelay(): number;
+    set hoverDelay(value: number);
     get hoverDismissDelay(): number;
     set hoverDismissDelay(value: number);
 }