@tylertech/forge 3.0.0-next.12 → 3.0.0-next.14

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

@@ -10,14 +10,17 @@ import { ListItemFoundation } from './list-item-foundation';
 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__surface\"></forge-state-layer><forge-focus-indicator exportparts=\"indicator:focus-indicator__indicator\" inward></forge-focus-indicator></div></template>';
-const styles = ':host{--_indent:var(--forge-list-item-indent, 56px);--_dense-indent:var(--forge-list-item-dense-indent, 48px);display:block;outline:0}:host([hidden]){display:none}:host([non-interactive]) .forge-list-item{cursor:initial}:host([disabled]) .forge-list-item{cursor:var(--_disabled-cursor);opacity:var(--_disabled-opacity)}:host([two-line]) .forge-list-item{height:var(--_two-line-height);min-height:var(--_two-line-height)}:host([three-line]) .forge-list-item{height:var(--_three-line-height);min-height:var(--_three-line-height)}:host([dense]) .forge-list-item{height:var(--_dense-one-line-height);min-height:var(--_dense-one-line-height)}:host([dense]) .text-container{font-size:var(--_dense-font-size)}:host([dense][indented]){-webkit-margin-start:var(--_dense-indent);margin-inline-start:var(--_dense-indent)}:host([dense][two-line]) .forge-list-item{height:var(--_dense-two-line-height);min-height:var(--_dense-two-line-height)}:host([dense][three-line]) .forge-list-item{height:var(--_dense-three-line-height);min-height:var(--_dense-three-line-height)}:host([selected]) .forge-list-item{color:var(--_selected-color)}:host([selected]) .forge-list-item::before{content:\"\";position:absolute;inset:0;border-radius:inherit;opacity:var(--_selected-opacity);background-color:var(--_selected-color)}:host([selected]) .forge-list-item ::slotted([slot=leading]),:host([selected]) .forge-list-item ::slotted([slot=trailing]){color:var(--_selected-color)}:host([selected]) .forge-list-item ::slotted([slot=leading]){color:var(--_leading-selected-color)}:host([selected]) .forge-list-item ::slotted([slot=trailing]){color:var(--_trailing-selected-color)}:host([selected]) .text-container{color:var(--_selected-color)}:host([selected]) forge-state-layer{--forge-state-layer-color:var(--_selected-color)}:host([indented]){-webkit-margin-start:var(--_indent);margin-inline-start:var(--_indent)}.forge-list-item{--_background-color:var(--forge-list-item-background-color, transparent);--_shape:var(--forge-list-item-shape, 0);--_padding:var(--forge-list-item-padding, 8px 16px);--_margin:var(--forge-list-item-margin, 0);--_height:var(--forge-list-item-height, 48px);--_dense-height:var(--forge-list-item-dense-height, 32px);--_cursor:var(--forge-list-item-cursor, pointer);--_supporting-text-color:var(--forge-list-item-supporting-text-color, var(--forge-theme-text-medium, rgba(0, 0, 0, 0.54)));--_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))));--_supporting-text-font-weight:var(--forge-list-item-supporting-text-font-weight, var(--forge-typography-body2-font-weight, 400));--_supporting-text-line-height:var(--forge-list-item-supporting-text-line-height, 1.5rem);--_selected-color:var(--forge-list-item-selected-color, var(--forge-theme-primary, #3f51b5));--_selected-opacity:var(--forge-list-item-selected-opacity, 0.08);--_selected-leading-color:var(--forge-list-item-selected-leading-color, var(--_selected-color));--_selected-trailing-color:var(--forge-list-item-selected-trailing-color, var(--_selected-color));--_selected-supporting-text-color:var(--forge-list-item-selected-supporting-text-color, var(--forge-theme-text-medium, rgba(0, 0, 0, 0.54)));--_disabled-opacity:var(--forge-list-item-disabled-opacity, 0.38);--_disabled-cursor:var(--forge-list-item-disabled-cursor, not-allowed);--_one-line-height:var(--forge-list-item-one-line-height, var(--_height));--_two-line-height:var(--forge-list-item-two-line-height, var(--forge-list-item-height, 72px));--_three-line-height:var(--forge-list-item-three-line-height, var(--forge-list-item-height, 88px));--_dense-one-line-height:var(--forge-list-item-dense-one-line-height, var(--_dense-height));--_dense-two-line-height:var(--forge-list-item-dense-two-line-height, var(--forge-list-item-dense-height, 56px));--_dense-three-line-height:var(--forge-list-item-dense-three-line-height, var(--forge-list-item-dense-height, 72px));--_dense-font-size:var(--forge-list-item-dense-font-size, 0.875rem);--_dense-leading-margin-end:var(--forge-list-item-dense-leading-margin-end, var(--forge-list-item-leading-margin-end, 24px));--_dense-trailing-margin-start:var(--forge-list-item-dense-trailing-margin-start, var(--forge-list-item-trailing-margin-start, 24px));--_leading-margin-start:var(--forge-list-item-leading-margin-start, 0);--_leading-margin-end:var(--forge-list-item-leading-margin-end, 32px);--_leading-selected-color:var(--forge-list-item-leading-selected-color, var(--_selected-color));--_trailing-margin-start:var(--forge-list-item-trailing-margin-start, 32px);--_trailing-margin-end:var(--forge-list-item-trailing-margin-end, 0);--_trailing-selected-color:var(--forge-list-item-trailing-selected-color, var(--_selected-color));--_avatar-background-color:var(--forge-list-item-avatar-background-color, var(--forge-theme-text-medium, rgba(0, 0, 0, 0.54)));--_avatar-color:var(--forge-list-item-avatar-color, var(--forge-theme-on-primary, #ffffff));--_avatar-shape:var(--forge-list-item-avatar-shape, var(--forge-shape-round, 50%));--_avatar-margin-start:var(--forge-list-item-avatar-margin-start, 0);--_avatar-margin-end:var(--forge-list-item-avatar-margin-end, 16px);--_avatar-size:var(--forge-list-item-avatar-size, 40px);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(--_background-color);border-radius:var(--_shape);-webkit-tap-highlight-color:transparent;height:var(--_height);min-height:var(--_height);padding:var(--_padding);margin:var(--_margin);cursor:var(--_cursor)}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(--_supporting-text-font-size);font-weight:var(--_supporting-text-font-weight);line-height:var(--_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(--_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(--_selected-supporting-text-color)}::slotted([slot=avatar]){background-color:var(--_avatar-background-color);color:var(--_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(--_avatar-margin-start);margin-inline-start:var(--_avatar-margin-start);-webkit-margin-end:var(--_avatar-margin-end);margin-inline-end:var(--_avatar-margin-end);min-width:var(--_avatar-size);min-height:var(--_avatar-size);border-radius:var(--_avatar-shape)}::slotted([slot=leading]),::slotted([slot=trailing]){color:var(--_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(--_leading-margin-start);margin-inline-start:var(--_leading-margin-start);-webkit-margin-end:var(--_leading-margin-end);margin-inline-end:var(--_leading-margin-end)}:host([selected]) ::slotted([slot=leading]){color:var(--_leading-selected-color)}:host([dense]) ::slotted([slot=leading]){-webkit-margin-end:var(--_dense-leading-margin-end);margin-inline-end:var(--_dense-leading-margin-end)}::slotted([slot=trailing]){-webkit-margin-start:var(--_trailing-margin-start);margin-inline-start:var(--_trailing-margin-start);-webkit-margin-end:var(--_trailing-margin-end);margin-inline-end:var(--_trailing-margin-end)}:host([selected]) ::slotted([slot=trailing]){color:var(--_trailing-selected-color)}:host([dense]) ::slotted([slot=trailing]){-webkit-margin-start:var(--_dense-trailing-margin-start);margin-inline-start:var(--_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{--forge-focus-indicator-shape:var(--forge-shape-medium, 4px)}forge-state-layer{border-radius:inherit}';
+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}: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)}.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.54)));--_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.54)));--_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.54)));--_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)}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}';
 /**
  * @tag forge-list-item
  *
  * @summary List items are individual rows of content inside of a list.
  *
- * @property {string} href - The href of the list item. This forces the list item to render as an anchor element.
+ * @property {string} href - The href of the anchor. This forces the list item to render as an anchor element.
+ * @property {string} target - The target of the anchor when an `href` is set. Defaults to `'_blank'`.
+ * @property {boolean} download - The anchor download attribute.
+ * @property {boolean} rel - The anchor rel attribute.
  * @property {string} target - The target of the list item when an `href` is set. Defaults to `'_blank'`.
  * @property {boolean} nonInteractive - If true, the list item will not be interactive.
  * @property {boolean} static - If true, the list item will not be interactive. Deprecated use `nonInteractive` instead.
@@ -32,7 +35,10 @@ const styles = ':host{--_indent:var(--forge-list-item-indent, 56px);--_dense-ind
  * @property {boolean} threeLine - Sets the list item height to support at least three lines of text.
  * @property {boolean} wrap - Sets the list item to wrap its text content.
  *
- * @attribute {string} href - The href of the list item. This forces the list item to render as an anchor element.
+ * @attribute {string} href - The href of the anchor This forces the list item to render as an anchor element.
+ * @attribute {string} target - The target of the anchor when an `href` is set. Defaults to `'_blank'`.
+ * @attribute {boolean} download - The anchor download attribute.
+ * @attribute {boolean} rel - The anchor rel attribute.
  * @attribute {string} target - The target of the list item when an `href` is set. Defaults to `'_blank'`.
  * @attribute {boolean} non-interactive - If true, the list item will not be interactive.
  * @attribute {boolean} static - If true, the list item will not be interactive. Deprecated use `non-interactive` instead.
@@ -62,8 +68,8 @@ const styles = ':host{--_indent:var(--forge-list-item-indent, 56px);--_dense-ind
  *
  * @csspart root - The root container element.
  * @csspart text-container - The container for the text content.
- * @csspart focus-indicator__indicator - The forwarded focus indicator's internal indicator element.
- * @csspart state-layer__surface - The forwarded state layer's internal surface element.
+ * @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.
@@ -109,6 +115,8 @@ let ListItemComponent = class ListItemComponent extends HTMLElement {
         return [
             LIST_ITEM_CONSTANTS.observedAttributes.HREF,
             LIST_ITEM_CONSTANTS.observedAttributes.TARGET,
+            LIST_ITEM_CONSTANTS.observedAttributes.DOWNLOAD,
+            LIST_ITEM_CONSTANTS.observedAttributes.REL,
             LIST_ITEM_CONSTANTS.observedAttributes.STATIC,
             LIST_ITEM_CONSTANTS.observedAttributes.NON_INTERACTIVE,
             LIST_ITEM_CONSTANTS.observedAttributes.DISABLED,
@@ -142,6 +150,12 @@ let ListItemComponent = class ListItemComponent extends HTMLElement {
             case LIST_ITEM_CONSTANTS.observedAttributes.TARGET:
                 this.target = newValue;
                 break;
+            case LIST_ITEM_CONSTANTS.observedAttributes.DOWNLOAD:
+                this.download = newValue;
+                break;
+            case LIST_ITEM_CONSTANTS.observedAttributes.REL:
+                this.rel = newValue;
+                break;
             case LIST_ITEM_CONSTANTS.observedAttributes.NON_INTERACTIVE:
             case LIST_ITEM_CONSTANTS.observedAttributes.STATIC:
                 this.nonInteractive = coerceBoolean(newValue);
@@ -181,6 +195,9 @@ let ListItemComponent = class ListItemComponent extends HTMLElement {
     focus() {
         this._foundation.setFocus();
     }
+    click() {
+        this._foundation.click();
+    }
 };
 __decorate([
     FoundationProperty()
@@ -188,6 +205,12 @@ __decorate([
 __decorate([
     FoundationProperty()
 ], ListItemComponent.prototype, "target", void 0);
+__decorate([
+    FoundationProperty()
+], ListItemComponent.prototype, "download", void 0);
+__decorate([
+    FoundationProperty()
+], ListItemComponent.prototype, "rel", void 0);
 __decorate([
     FoundationProperty()
 ], ListItemComponent.prototype, "static", void 0);

package/esm/menu/menu-constants.js

@@ -10,7 +10,7 @@ const classes = {
     MENU: 'mdc-menu'
 };
 const selectors = {
-    TOGGLE: `.${elementName}__toggle,[${elementName}-toggle],button,[type=button],[role=button],a,[tabindex]:not([tabindex^="-"])`,
+    TOGGLE: `.${elementName}__toggle,[${elementName}-toggle],forge-button,forge-icon-button,forge-fab,button,[type=button],[role=button],a,[tabindex]:not([tabindex^="-"])`,
     MENU_LIST: 'forge-list'
 };
 const attributes = {

package/esm/menu/menu-foundation.js

@@ -413,8 +413,6 @@ export class MenuFoundation extends CascadingListDropdownAwareFoundation {
         else {
             this.optionsFactory = undefined;
             // Intentional shallow copy of member properties. These member objects have properties that are references to functions.
-            //   The typical JSON.parse(JSON.stringify(object)) will not work here. If this becomes an issue we'll add a deepClone
-            //   function to the core library.
             this._options = options.map(o => (Object.assign({}, o)));
             if (this._open) {
                 this._mapIconToLeadingIcon();
@@ -433,8 +431,6 @@ export class MenuFoundation extends CascadingListDropdownAwareFoundation {
             return [];
         }
         // Intentional shallow copy of member properties. These member objects have properties that are references to functions.
-        //   The typical JSON.parse(JSON.stringify(object)) will not work here. If this becomes an issue we'll add a deepClone
-        //   function to the core library.
         return this._flatOptions.map(o => (Object.assign({}, o)));
     }
     set optionsFactory(factory) {

package/esm/menu/menu.js

@@ -16,7 +16,7 @@ import { MenuAdapter } from './menu-adapter';
 import { MENU_CONSTANTS } from './menu-constants';
 import { MenuFoundation } from './menu-foundation';
 const template = '<template><slot></slot></template>';
-const styles = ':host{display:inline-block}:host([hidden]){display:none}';
+const styles = ':host{display:-webkit-inline-box;display:inline-flex}:host([hidden]){display:none}';
 /**
  * The web component class behind the `<forge-menu>` custom element.
  *

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

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

package/esm/paginator/paginator-adapter.js

@@ -146,8 +146,11 @@ export class PaginatorAdapter extends BaseAdapter {
                 break;
         }
     }
-    handleFocusMove(from) {
-        if (!this._component.matches(':focus')) {
+    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
         }
         switch (from) {
@@ -157,7 +160,7 @@ export class PaginatorAdapter extends BaseAdapter {
                     this._lastPageButton,
                     this._previousPageButton,
                     this._pageSizeSelect
-                ]);
+                ], options);
                 break;
             case 'last':
                 this._tryFocus([
@@ -165,7 +168,7 @@ export class PaginatorAdapter extends BaseAdapter {
                     this._firstPageButton,
                     this._nextPageButton,
                     this._pageSizeSelect
-                ]);
+                ], options);
                 break;
             case 'previous':
                 this._tryFocus([
@@ -181,7 +184,7 @@ export class PaginatorAdapter extends BaseAdapter {
                     this._firstPageButton,
                     this._lastPageButton,
                     this._pageSizeSelect
-                ]);
+                ], options);
                 break;
             case 'page-size':
                 this._tryFocus([
@@ -189,14 +192,24 @@ export class PaginatorAdapter extends BaseAdapter {
                     this._lastPageButton,
                     this._firstPageButton,
                     this._previousPageButton
-                ]);
+                ], options);
+                break;
+            default:
+                this._tryFocus([
+                    this._firstPageButton,
+                    this._previousPageButton,
+                    this._nextPageButton,
+                    this._lastPageButton,
+                    this._pageSizeSelect
+                ], options);
                 break;
         }
     }
-    _tryFocus(elements) {
+    _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) {
-                el.focus();
+                el.focus(Object.assign(Object.assign({}, options), { preventScroll }));
                 return;
             }
         }

package/esm/paginator/paginator-constants.js

@@ -24,11 +24,11 @@ const selectors = {
     LABEL: `.${classes.LABEL}`,
     PAGE_SIZE_SELECT: `.${classes.PAGE_SIZE_OPTIONS}`,
     RANGE_LABEL: `.${classes.RANGE_LABEL}`,
-    FIRST_PAGE_BUTTON: `.${classes.FIRST_PAGE_BUTTON} > button`,
+    FIRST_PAGE_BUTTON: `.${classes.FIRST_PAGE_BUTTON}`,
     FIRST_PAGE_ICON_BUTTON: `.${classes.FIRST_PAGE_BUTTON}`,
-    PREVIOUS_PAGE_BUTTON: `.${classes.PREVIOUS_PAGE_BUTTON} > button`,
-    NEXT_PAGE_BUTTON: `.${classes.NEXT_PAGE_BUTTON} > button`,
-    LAST_PAGE_BUTTON: `.${classes.LAST_PAGE_BUTTON} > button`,
+    PREVIOUS_PAGE_BUTTON: `.${classes.PREVIOUS_PAGE_BUTTON}`,
+    NEXT_PAGE_BUTTON: `.${classes.NEXT_PAGE_BUTTON}`,
+    LAST_PAGE_BUTTON: `.${classes.LAST_PAGE_BUTTON}`,
     LAST_PAGE_ICON_BUTTON: `.${classes.LAST_PAGE_BUTTON}`,
     ROOT: `.${classes.ROOT}`,
     RANGE_LABEL_ALTERNATIVE: `.${classes.RANGE_LABEL_ALTERNATIVE}`

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

@@ -13,6 +13,7 @@ export interface IPaginatorFoundation extends ICustomElementFoundation {
     total: number;
     pageSizeOptions: number[] | boolean;
     pageSizeLabel: string;
+    focus(options?: FocusOptions): void;
 }
 export declare class PaginatorFoundation {
     private _adapter;
@@ -36,6 +37,7 @@ export declare class PaginatorFoundation {
     constructor(_adapter: IPaginatorAdapter);
     initialize(): void;
     disconnect(): void;
+    focus(options?: FocusOptions): void;
     private _attachListeners;
     private _detachListeners;
     private _onFirstPage;

package/esm/paginator/paginator-foundation.js

@@ -36,6 +36,9 @@ export class PaginatorFoundation {
     disconnect() {
         this._detachListeners();
     }
+    focus(options) {
+        this._adapter.handleFocusMove(null, options);
+    }
     _attachListeners() {
         this._adapter.attachPageSizeChangeListener(this._pageSizeListener);
         this._adapter.attachFirstPageListener(this._firstPageListener);
@@ -58,7 +61,7 @@ export class PaginatorFoundation {
         const firstPage = 0;
         const canPage = this._emitChangeEvent(PAGINATOR_CONSTANTS.strings.FIRST_PAGE, { pageIndex: firstPage });
         if (canPage) {
-            this._applyPageIndex(firstPage, { fromField: 'first' });
+            this._applyPageIndex(firstPage);
         }
     }
     _onPreviousPage(evt) {
@@ -69,7 +72,7 @@ export class PaginatorFoundation {
         const prevPage = this._pageIndex - 1;
         const canPage = this._emitChangeEvent(PAGINATOR_CONSTANTS.strings.PREVIOUS_PAGE, { pageIndex: prevPage });
         if (canPage) {
-            this._applyPageIndex(prevPage, { fromField: 'previous' });
+            this._applyPageIndex(prevPage);
         }
     }
     _onNextPage(evt) {
@@ -80,7 +83,7 @@ export class PaginatorFoundation {
         const nextPage = this._pageIndex + 1;
         const canPage = this._emitChangeEvent(PAGINATOR_CONSTANTS.strings.NEXT_PAGE, { pageIndex: nextPage });
         if (canPage) {
-            this._applyPageIndex(nextPage, { fromField: 'next' });
+            this._applyPageIndex(nextPage);
         }
     }
     _onLastPage(evt) {
@@ -91,7 +94,7 @@ export class PaginatorFoundation {
         const lastPage = this._getMaxPages();
         const canPage = this._emitChangeEvent(PAGINATOR_CONSTANTS.strings.LAST_PAGE, { pageIndex: lastPage });
         if (canPage) {
-            this._applyPageIndex(lastPage, { fromField: 'last' });
+            this._applyPageIndex(lastPage);
         }
     }
     _onPageSizeChanged(evt) {
@@ -99,7 +102,7 @@ export class PaginatorFoundation {
         const pageSize = Number(evt.detail);
         const canPage = this._emitChangeEvent(PAGINATOR_CONSTANTS.strings.PAGE_SIZE, { pageIndex: 0, pageSize });
         if (canPage) {
-            this._applyPageIndex(0, { fromField: 'page-size' });
+            this._applyPageIndex(0);
             this._applyPageSize(pageSize);
         }
         else {
@@ -127,32 +130,32 @@ export class PaginatorFoundation {
         }
         this._adapter.setRangeLabel(this._rangeLabel);
     }
-    _syncInteractionState(fromField = null) {
+    _syncInteractionState() {
         this._adapter.enableFirstPageButton();
         this._adapter.enablePreviousPageButton();
         this._adapter.enableNextPageButton();
         this._adapter.enableLastPageButton();
         if (!this._hasFirstPage()) {
-            if (fromField) {
-                this._adapter.handleFocusMove(fromField);
+            if (this._adapter.hasFocus()) {
+                this._adapter.handleFocusMove('first');
             }
             this._adapter.disableFirstPageButton();
         }
         if (!this._hasPreviousPage()) {
-            if (fromField) {
-                this._adapter.handleFocusMove(fromField);
+            if (this._adapter.hasFocus()) {
+                this._adapter.handleFocusMove('previous');
             }
             this._adapter.disablePreviousPageButton();
         }
         if (!this._hasNextPage()) {
-            if (fromField) {
-                this._adapter.handleFocusMove(fromField);
+            if (this._adapter.hasFocus()) {
+                this._adapter.handleFocusMove('next');
             }
             this._adapter.disableNextPageButton();
         }
         if (!this._hasLastPage()) {
-            if (fromField) {
-                this._adapter.handleFocusMove(fromField);
+            if (this._adapter.hasFocus()) {
+                this._adapter.handleFocusMove('last');
             }
             this._adapter.disableLastPageButton();
         }
@@ -213,11 +216,11 @@ export class PaginatorFoundation {
             this._offset = this._pageIndex * this._pageSize;
         }
     }
-    _applyPageIndex(value, { fromField = null } = {}) {
+    _applyPageIndex(value) {
         this._pageIndex = value;
         this._computeOffset();
         this._updateRangeLabel();
-        this._syncInteractionState(fromField);
+        this._syncInteractionState();
         this._adapter.toggleHostAttribute(PAGINATOR_CONSTANTS.attributes.PAGE_INDEX, this._pageIndex != null, this._pageIndex.toString());
     }
     _applyPageSize(value) {

package/esm/paginator/paginator.d.ts

@@ -56,4 +56,5 @@ export declare class PaginatorComponent extends BaseComponent implements IPagina
     disabled: boolean;
     alternative: boolean;
     alignment: PaginatorAlternativeAlignment;
+    focus(options?: FocusOptions): void;
 }

package/esm/paginator/paginator.js

@@ -14,8 +14,8 @@ import { SelectComponent } from '../select';
 import { IconComponent, IconRegistry } from '../icon';
 import { BaseComponent } from '../core/base/base-component';
 import { TooltipComponent } from '../tooltip';
-const template = '<template><div class=\"forge-paginator\" part=\"root\"><div class=\"forge-paginator__container\" part=\"container\"><div class=\"forge-paginator__label\" part=\"label\"></div><forge-select class=\"forge-paginator__page-size-options\" aria-label=\"Choose page size\" density=\"dense\" part=\"page-size-options\"></forge-select><div class=\"forge-paginator__range-label\" part=\"range-label\"></div><forge-icon-button class=\"forge-paginator__first-page\" part=\"first-page-button\"><button aria-label=\"First Page\" part=\"first-page-button-element\"><forge-icon name=\"first_page\" part=\"first-page-icon\"></forge-icon></button><forge-tooltip position=\"top\">Go to the first page</forge-tooltip></forge-icon-button><forge-icon-button class=\"forge-paginator__previous-page\" part=\"previous-page-button\"><button aria-label=\"Previous Page\" part=\"previous-page-button-element\"><forge-icon name=\"keyboard_arrow_left\" part=\"previous-page-button-icon\"></forge-icon></button><forge-tooltip position=\"top\">Go to the previous page</forge-tooltip></forge-icon-button><div class=\"forge-paginator__range-label--alternative\" part=\"range-label-alternative\"></div><forge-icon-button class=\"forge-paginator__next-page\" part=\"next-page-button\"><button aria-label=\"Next Page\" part=\"next-page-button-element\"><forge-icon name=\"keyboard_arrow_right\" part=\"next-page-icon\"></forge-icon></button><forge-tooltip position=\"top\">Go to the next page</forge-tooltip></forge-icon-button><forge-icon-button class=\"forge-paginator__last-page\" part=\"last-page-button\"><button aria-label=\"Last Page\" part=\"last-page-button-element\"><forge-icon name=\"last_page\" part=\"last-page-icon\"></forge-icon></button><forge-tooltip position=\"top\">Go to the last page</forge-tooltip></forge-icon-button></div></div></template>';
-const styles = '.forge-icon-button{display:-webkit-inline-box;display:inline-flex;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center;position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;border:none;outline:0;background-color:transparent;fill:currentColor;color:inherit;font-size:24px;text-decoration:none;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:48px;height:48px;padding:12px}.forge-icon-button forge-icon,.forge-icon-button img,.forge-icon-button svg{width:24px;height:24px}.forge-icon-button:disabled{color:rgba(0,0,0,.38);color:var(--mdc-theme-text-disabled-on-light,rgba(0,0,0,.38))}.forge-icon-button:disabled{cursor:default;pointer-events:none}.forge-icon-button__icon{display:inline-block}.forge-icon-button__icon.forge-icon-button__icon--on{display:none}.forge-icon-button--on .forge-icon-button__icon{display:none}.forge-icon-button--on .forge-icon-button__icon.forge-icon-button__icon--on{display:inline-block}@-webkit-keyframes mdc-ripple-fg-radius-in{from{-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1);-webkit-transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1);transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1)}to{-webkit-transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1));transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}}@keyframes mdc-ripple-fg-radius-in{from{-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1);-webkit-transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1);transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1)}to{-webkit-transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1));transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}}@-webkit-keyframes mdc-ripple-fg-opacity-in{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:0}to{opacity:var(--mdc-ripple-fg-opacity, 0)}}@keyframes mdc-ripple-fg-opacity-in{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:0}to{opacity:var(--mdc-ripple-fg-opacity, 0)}}@-webkit-keyframes mdc-ripple-fg-opacity-out{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:var(--mdc-ripple-fg-opacity, 0)}to{opacity:0}}@keyframes mdc-ripple-fg-opacity-out{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:var(--mdc-ripple-fg-opacity, 0)}to{opacity:0}}.forge-icon-button{--mdc-ripple-fg-size:0;--mdc-ripple-left:0;--mdc-ripple-top:0;--mdc-ripple-fg-scale:1;--mdc-ripple-fg-translate-end:0;--mdc-ripple-fg-translate-start:0;-webkit-tap-highlight-color:transparent;will-change:transform,opacity}.forge-icon-button::after,.forge-icon-button::before{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:\"\"}.forge-icon-button::before{-webkit-transition:opacity 15ms linear,background-color 15ms linear;transition:opacity 15ms linear,background-color 15ms linear;z-index:1;z-index:var(--mdc-ripple-z-index,1)}.forge-icon-button::after{z-index:0;z-index:var(--mdc-ripple-z-index,0)}.forge-icon-button.mdc-ripple-upgraded::before{-webkit-transform:scale(var(--mdc-ripple-fg-scale,1));transform:scale(var(--mdc-ripple-fg-scale,1))}.forge-icon-button.mdc-ripple-upgraded::after{top:0;left:0;-webkit-transform:scale(0);transform:scale(0);-webkit-transform-origin:center center;transform-origin:center center}.forge-icon-button.mdc-ripple-upgraded--unbounded::after{top:var(--mdc-ripple-top,0);left:var(--mdc-ripple-left,0)}.forge-icon-button.mdc-ripple-upgraded--foreground-activation::after{-webkit-animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards;animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards}.forge-icon-button.mdc-ripple-upgraded--foreground-deactivation::after{-webkit-animation:mdc-ripple-fg-opacity-out 150ms;animation:mdc-ripple-fg-opacity-out 150ms;-webkit-transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1));transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}.forge-icon-button::after,.forge-icon-button::before{top:calc(50% - 50%);left:calc(50% - 50%);width:100%;height:100%}.forge-icon-button.mdc-ripple-upgraded::after,.forge-icon-button.mdc-ripple-upgraded::before{top:var(--mdc-ripple-top,calc(50% - 50%));left:var(--mdc-ripple-left,calc(50% - 50%));width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.forge-icon-button.mdc-ripple-upgraded::after{width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.forge-icon-button::after,.forge-icon-button::before{background-color:#000;background-color:var(--mdc-ripple-color,var(--mdc-theme-on-surface,#000))}.forge-icon-button.mdc-ripple-surface--hover::before,.forge-icon-button:hover::before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity, .04)}.forge-icon-button.mdc-ripple-upgraded--background-focused::before,.forge-icon-button:not(.mdc-ripple-upgraded):focus::before{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity, .12)}.forge-icon-button:not(.mdc-ripple-upgraded)::after{-webkit-transition:opacity 150ms linear;transition:opacity 150ms linear}.forge-icon-button:not(.mdc-ripple-upgraded):active::after{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity, .12)}.forge-icon-button.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.12)}forge-icon-button{position:relative;display:inline-block;overflow:visible}.forge-icon-button--on{color:#6200ee;color:var(--mdc-theme-primary,#6200ee)}.forge-icon-button--on::after,.forge-icon-button--on::before{background-color:#6200ee;background-color:var(--mdc-ripple-color,var(--mdc-theme-primary,#6200ee))}.forge-icon-button--on.mdc-ripple-surface--hover::before,.forge-icon-button--on:hover::before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity, .04)}.forge-icon-button--on.mdc-ripple-upgraded--background-focused::before,.forge-icon-button--on:not(.mdc-ripple-upgraded):focus::before{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity, .12)}.forge-icon-button--on:not(.mdc-ripple-upgraded)::after{-webkit-transition:opacity 150ms linear;transition:opacity 150ms linear}.forge-icon-button--on:not(.mdc-ripple-upgraded):active::after{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity, .12)}.forge-icon-button--on.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.12)}.forge-icon-button--on::before{background-color:#6200ee;background-color:var(--mdc-theme-primary,#6200ee);opacity:.08}.forge-icon-button--dense{width:28px;height:28px;padding:2px;padding:0}.forge-icon-button--dense-1{width:44px;height:44px;padding:10px}.forge-icon-button--dense-2{width:40px;height:40px;padding:8px}.forge-icon-button--dense-3{width:36px;height:36px;padding:6px}.forge-icon-button--dense-4{width:32px;height:32px;padding:4px}.forge-icon-button--dense-5{width:28px;height:28px;padding:2px}.forge-icon-button--dense-6{width:24px;height:24px;padding:0}.forge-icon-button--with-badge forge-badge{z-index:1;z-index:var(--forge-z-index-surface,1);pointer-events:none;--forge-badge-max-width:32px;--forge-badge-border:1px solid transparent}.forge-icon-button--with-badge forge-badge[app-bar-context]{--forge-badge-border:2px solid var(--forge-app-bar-theme-background)}.forge-paginator{display:inline-block}.forge-paginator--alternative{display:-webkit-box;display:flex}.forge-paginator--alternative .forge-paginator__label,.forge-paginator--alternative .forge-paginator__page-size-options,.forge-paginator--alternative .forge-paginator__range-label{display:none}.forge-paginator--alternative .forge-paginator__range-label--alternative{display:inline-block;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-body2-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:.875rem;font-size:var(--mdc-typography-body2-font-size, .875rem);line-height:1.25rem;line-height:var(--mdc-typography-body2-line-height, 1.25rem);font-weight:400;font-weight:var(--mdc-typography-body2-font-weight,400);letter-spacing:.0178571429em;letter-spacing:var(--mdc-typography-body2-letter-spacing, .0178571429em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-body2-text-decoration,inherit);text-decoration:var(--mdc-typography-body2-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-body2-text-transform,inherit);margin:0 12px}.forge-paginator__range-label--alternative{display:none}.forge-paginator__container{display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center}.forge-paginator__label{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-caption-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:.75rem;font-size:var(--mdc-typography-caption-font-size, .75rem);line-height:1.25rem;line-height:var(--mdc-typography-caption-line-height, 1.25rem);font-weight:400;font-weight:var(--mdc-typography-caption-font-weight,400);letter-spacing:.0333333333em;letter-spacing:var(--mdc-typography-caption-letter-spacing, .0333333333em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-caption-text-decoration,inherit);text-decoration:var(--mdc-typography-caption-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-caption-text-transform,inherit);margin-right:16px}.forge-paginator__page-size-options{margin-right:16px}.forge-paginator__range-label{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-caption-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:.75rem;font-size:var(--mdc-typography-caption-font-size, .75rem);line-height:1.25rem;line-height:var(--mdc-typography-caption-line-height, 1.25rem);font-weight:400;font-weight:var(--mdc-typography-caption-font-weight,400);letter-spacing:.0333333333em;letter-spacing:var(--mdc-typography-caption-letter-spacing, .0333333333em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-caption-text-decoration,inherit);text-decoration:var(--mdc-typography-caption-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-caption-text-transform,inherit);margin-right:8px}.forge-paginator__first-page,.forge-paginator__last-page,.forge-paginator__next-page,.forge-paginator__previous-page{color:rgba(0,0,0,.87);color:var(--mdc-theme-text-primary-on-background,rgba(0,0,0,.87))}:host{display:inline-block}:host([hidden]){display:none}:host([alternative]) .forge-paginator--alignment-center .forge-paginator__container{-webkit-box-pack:center;justify-content:center}:host([alternative]) .forge-paginator--alignment-center .forge-paginator__range-label--alternative{margin:0 auto}:host([alternative]) .forge-paginator--alignment-start .forge-paginator__container{-webkit-box-pack:start;justify-content:flex-start}:host([alternative]) .forge-paginator--alignment-end .forge-paginator__container{-webkit-box-pack:end;justify-content:flex-end}:host([alternative]) .forge-paginator .forge-paginator__container{-webkit-box-flex:1;flex:1}';
+const template = '<template><div class=\"forge-paginator\" part=\"root\"><div class=\"forge-paginator__container\" part=\"container\"><div class=\"forge-paginator__label\" part=\"label\"></div><forge-select class=\"forge-paginator__page-size-options\" aria-label=\"Choose page size\" density=\"dense\" part=\"page-size-options\"></forge-select><div class=\"forge-paginator__range-label\" part=\"range-label\"></div><forge-icon-button class=\"forge-paginator__first-page\" part=\"first-page-button\" aria-label=\"First Page\" part=\"first-page-button-element\"><forge-icon name=\"first_page\" part=\"first-page-icon\"></forge-icon></forge-icon-button><forge-tooltip position=\"top\">Go to the first page</forge-tooltip><forge-icon-button class=\"forge-paginator__previous-page\" part=\"previous-page-button\" aria-label=\"Previous Page\" part=\"previous-page-button-element\"><forge-icon name=\"keyboard_arrow_left\" part=\"previous-page-button-icon\"></forge-icon></forge-icon-button><forge-tooltip position=\"top\">Go to the previous page</forge-tooltip><div class=\"forge-paginator__range-label--alternative\" part=\"range-label-alternative\"></div><forge-icon-button class=\"forge-paginator__next-page\" part=\"next-page-button\" aria-label=\"Next Page\" part=\"next-page-button-element\"><forge-icon name=\"keyboard_arrow_right\" part=\"next-page-icon\"></forge-icon></forge-icon-button><forge-tooltip position=\"top\">Go to the next page</forge-tooltip><forge-icon-button class=\"forge-paginator__last-page\" part=\"last-page-button\" aria-label=\"Last Page\" part=\"last-page-button-element\"><forge-icon name=\"last_page\" part=\"last-page-icon\"></forge-icon></forge-icon-button><forge-tooltip position=\"top\">Go to the last page</forge-tooltip></div></div></template>';
+const styles = '.forge-paginator{display:inline-block}.forge-paginator--alternative{display:-webkit-box;display:flex}.forge-paginator--alternative .forge-paginator__label,.forge-paginator--alternative .forge-paginator__page-size-options,.forge-paginator--alternative .forge-paginator__range-label{display:none}.forge-paginator--alternative .forge-paginator__range-label--alternative{display:inline-block;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-body2-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:.875rem;font-size:var(--mdc-typography-body2-font-size, .875rem);line-height:1.25rem;line-height:var(--mdc-typography-body2-line-height, 1.25rem);font-weight:400;font-weight:var(--mdc-typography-body2-font-weight,400);letter-spacing:.0178571429em;letter-spacing:var(--mdc-typography-body2-letter-spacing, .0178571429em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-body2-text-decoration,inherit);text-decoration:var(--mdc-typography-body2-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-body2-text-transform,inherit);margin:0 12px}.forge-paginator__range-label--alternative{display:none}.forge-paginator__container{display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center}.forge-paginator__label{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-caption-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:.75rem;font-size:var(--mdc-typography-caption-font-size, .75rem);line-height:1.25rem;line-height:var(--mdc-typography-caption-line-height, 1.25rem);font-weight:400;font-weight:var(--mdc-typography-caption-font-weight,400);letter-spacing:.0333333333em;letter-spacing:var(--mdc-typography-caption-letter-spacing, .0333333333em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-caption-text-decoration,inherit);text-decoration:var(--mdc-typography-caption-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-caption-text-transform,inherit);margin-right:16px}.forge-paginator__page-size-options{margin-right:16px}.forge-paginator__range-label{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-caption-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:.75rem;font-size:var(--mdc-typography-caption-font-size, .75rem);line-height:1.25rem;line-height:var(--mdc-typography-caption-line-height, 1.25rem);font-weight:400;font-weight:var(--mdc-typography-caption-font-weight,400);letter-spacing:.0333333333em;letter-spacing:var(--mdc-typography-caption-letter-spacing, .0333333333em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-caption-text-decoration,inherit);text-decoration:var(--mdc-typography-caption-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-caption-text-transform,inherit);margin-right:8px}.forge-paginator__first-page,.forge-paginator__last-page,.forge-paginator__next-page,.forge-paginator__previous-page{color:rgba(0,0,0,.87);color:var(--mdc-theme-text-primary-on-background,rgba(0,0,0,.87))}:host{display:inline-block}:host([hidden]){display:none}:host([alternative]) .forge-paginator--alignment-center .forge-paginator__container{-webkit-box-pack:center;justify-content:center}:host([alternative]) .forge-paginator--alignment-center .forge-paginator__range-label--alternative{margin:0 auto}:host([alternative]) .forge-paginator--alignment-start .forge-paginator__container{-webkit-box-pack:start;justify-content:flex-start}:host([alternative]) .forge-paginator--alignment-end .forge-paginator__container{-webkit-box-pack:end;justify-content:flex-end}:host([alternative]) .forge-paginator .forge-paginator__container{-webkit-box-flex:1;flex:1}';
 /**
  * @tag forge-paginator
  */
@@ -89,6 +89,9 @@ let PaginatorComponent = class PaginatorComponent extends BaseComponent {
                 break;
         }
     }
+    focus(options) {
+        this._foundation.focus(options);
+    }
 };
 __decorate([
     FoundationProperty()

package/esm/profile-card/profile-card-adapter.d.ts

@@ -3,6 +3,7 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
+import { ExperimentalFocusOptions } from '../constants';
 import { BaseAdapter, IBaseAdapter } from '../core/base/base-adapter';
 import { IProfileCardComponent } from './profile-card';
 export interface IProfileCardAdapter extends IBaseAdapter {
@@ -19,10 +20,8 @@ export interface IProfileCardAdapter extends IBaseAdapter {
     setProfileButtonText(value: string): void;
     setProfileButtonListener(listener: (evt: Event) => void): void;
     setSignOutButtonListener(listener: (evt: Event) => void): void;
-    removeProfileButtonListener(listener: (evt: Event) => void): void;
-    removeSignOutButtonListener(listener: (evt: Event) => void): void;
-    requestProfileButtonFocus(): void;
-    requestSignOutButtonFocus(): void;
+    requestProfileButtonFocus(options?: ExperimentalFocusOptions): void;
+    requestSignOutButtonFocus(options?: ExperimentalFocusOptions): void;
 }
 export declare class ProfileCardAdapter extends BaseAdapter<IProfileCardComponent> implements IProfileCardAdapter {
     private _fullNameElement;
@@ -45,8 +44,6 @@ export declare class ProfileCardAdapter extends BaseAdapter<IProfileCardComponen
     setProfileButtonText(value: string): void;
     setProfileButtonListener(listener: (evt: Event) => void): void;
     setSignOutButtonListener(listener: (evt: Event) => void): void;
-    removeProfileButtonListener(listener: (evt: Event) => void): void;
-    removeSignOutButtonListener(listener: (evt: Event) => void): void;
-    requestProfileButtonFocus(): void;
-    requestSignOutButtonFocus(): void;
+    requestProfileButtonFocus(options?: ExperimentalFocusOptions): void;
+    requestSignOutButtonFocus(options?: ExperimentalFocusOptions): void;
 }

package/esm/profile-card/profile-card-adapter.js

@@ -18,17 +18,14 @@ export class ProfileCardAdapter extends BaseAdapter {
         this._signOutButton = getShadowElement(component, PROFILE_CARD_CONSTANTS.selectors.SIGN_OUT_BUTTON);
     }
     setFullName(value) {
-        this._component.setAttribute(PROFILE_CARD_CONSTANTS.attributes.FULL_NAME, value);
         this._fullNameElement.textContent = value;
     }
     setEmail(value) {
-        this._component.setAttribute(PROFILE_CARD_CONSTANTS.attributes.EMAIL, value);
         this._emailElement.textContent = value;
     }
     setAvatarText(value) {
-        this._component.setAttribute(PROFILE_CARD_CONSTANTS.attributes.AVATAR_TEXT, value);
-        this._avatarElement.text = value;
         removeAllChildren(this._avatarElement);
+        this._avatarElement.text = value;
     }
     setAvatarIcon(value) {
         if (value) {
@@ -40,11 +37,9 @@ export class ProfileCardAdapter extends BaseAdapter {
         }
     }
     setAvatarImageUrl(value) {
-        this._component.setAttribute(PROFILE_CARD_CONSTANTS.attributes.AVATAR_IMAGE_URL, value);
         this._avatarElement.imageUrl = value;
     }
     setAvatarLetterCount(count) {
-        this._component.setAttribute(PROFILE_CARD_CONSTANTS.attributes.AVATAR_LETTER_COUNT, String(count));
         this._avatarElement.letterCount = count;
     }
     setActionToolbarVisibility(isVisible) {
@@ -83,16 +78,10 @@ export class ProfileCardAdapter extends BaseAdapter {
     setSignOutButtonListener(listener) {
         this._signOutButton.addEventListener('click', listener);
     }
-    removeProfileButtonListener(listener) {
-        this._profileButton.removeEventListener('click', listener);
-    }
-    removeSignOutButtonListener(listener) {
-        this._signOutButton.removeEventListener('click', listener);
-    }
-    requestProfileButtonFocus() {
-        window.requestAnimationFrame(() => this._profileButton.focus());
+    requestProfileButtonFocus(options) {
+        window.requestAnimationFrame(() => this._profileButton.focus(options));
     }
-    requestSignOutButtonFocus() {
-        window.requestAnimationFrame(() => this._signOutButton.focus());
+    requestSignOutButtonFocus(options) {
+        window.requestAnimationFrame(() => this._signOutButton.focus(options));
     }
 }

package/esm/profile-card/profile-card-constants.js

@@ -18,9 +18,9 @@ const attributes = {
     AVATAR_LETTER_COUNT: 'avatar-letter-count'
 };
 const selectors = {
-    FULL_NAME: '.forge-profile-card__full-name',
-    EMAIL: '.forge-profile-card__email',
-    AVATAR: '.forge-profile-card__info-avatar > forge-avatar',
+    FULL_NAME: '.full-name',
+    EMAIL: '.email',
+    AVATAR: '.avatar > forge-avatar',
     ACTION_TOOLBAR: '#action-toolbar',
     PROFILE_BUTTON: '#profile-button',
     SIGN_OUT_BUTTON: '#sign-out-button'

package/esm/profile-card/profile-card-foundation.d.ts

@@ -10,10 +10,13 @@ export interface IProfileCardFoundation extends ICustomElementFoundation {
     email: string;
     signOut: boolean;
     profile: boolean;
+    signOutText: string;
+    profileText: string;
     avatarText: string;
     avatarIcon: string;
     avatarImageUrl: string;
     avatarLetterCount: number;
+    focus(options?: FocusOptions): void;
 }
 export declare class ProfileCardFoundation implements IProfileCardFoundation {
     private _adapter;
@@ -31,7 +34,7 @@ export declare class ProfileCardFoundation implements IProfileCardFoundation {
     private _signOutListener;
     constructor(_adapter: IProfileCardAdapter);
     initialize(): void;
-    private _requestInitialFocus;
+    focus(options?: FocusOptions): void;
     private _setActionVisibility;
     private _onProfileButtonClick;
     private _onSignOutButtonClick;