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

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

@@ -7,8 +7,10 @@ import { BaseAdapter, IBaseAdapter } from '../../core/base/base-adapter';
 import { IListItemComponent } from './list-item';
 export interface IListItemAdapter extends IBaseAdapter<IListItemComponent> {
     initialize(): void;
-    setHref(href: string, target: string): void;
-    setHrefTarget(target: string): void;
+    setHref(href: string): void;
+    setAnchorTarget(target: string): void;
+    setAnchorDownload(download: string): void;
+    setAnchorRel(rel: string): void;
     setNonInteractive(value: boolean): void;
     setDisabled(value: boolean): void;
     setActive(value: boolean): void;
@@ -17,6 +19,8 @@ export interface IListItemAdapter extends IBaseAdapter<IListItemComponent> {
     isFocused(): boolean;
     setFocus(): void;
     animateStateLayer(): void;
+    clickAnchor(): void;
+    clickHost(): void;
 }
 export declare class ListItemAdapter extends BaseAdapter<IListItemComponent> implements IListItemAdapter {
     private _rootElement;
@@ -24,8 +28,10 @@ export declare class ListItemAdapter extends BaseAdapter<IListItemComponent> imp
     private _stateLayerElement;
     constructor(component: IListItemComponent);
     initialize(): void;
-    setHref(href: string, target: string): void;
-    setHrefTarget(target: string): void;
+    setHref(href: string): void;
+    setAnchorTarget(target: string): void;
+    setAnchorDownload(download: string): void;
+    setAnchorRel(rel: string): void;
     setNonInteractive(value: boolean): void;
     setDisabled(value: boolean): void;
     setActive(value: boolean): void;
@@ -42,6 +48,8 @@ export declare class ListItemAdapter extends BaseAdapter<IListItemComponent> imp
     isFocused(): boolean;
     setFocus(): void;
     animateStateLayer(): void;
+    clickAnchor(): void;
+    clickHost(): void;
     private _createAnchorRootElement;
     private _createDefaultRootElement;
     private _getParentList;

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

@@ -28,10 +28,10 @@ export class ListItemAdapter extends BaseAdapter {
             this._setRole(list);
         }
     }
-    setHref(href, target) {
+    setHref(href) {
         if (href) {
             if (this._rootElement.tagName !== 'A') {
-                const anchor = this._createAnchorRootElement(target);
+                const anchor = this._createAnchorRootElement();
                 this._rootElement = replaceElement(this._rootElement, anchor);
             }
             this._rootElement.href = href;
@@ -41,11 +41,21 @@ export class ListItemAdapter extends BaseAdapter {
             this._rootElement = replaceElement(this._rootElement, defaultEl);
         }
     }
-    setHrefTarget(target) {
+    setAnchorTarget(target) {
         if (this._rootElement.tagName === 'A') {
             this._rootElement.target = target;
         }
     }
+    setAnchorDownload(download) {
+        if (this._rootElement.tagName === 'A') {
+            this._rootElement.download = download;
+        }
+    }
+    setAnchorRel(rel) {
+        if (this._rootElement.tagName === 'A') {
+            this._rootElement.rel = rel;
+        }
+    }
     setNonInteractive(value) {
         this._rootElement.tabIndex = value ? -1 : 0;
         if (value) {
@@ -125,11 +135,32 @@ export class ListItemAdapter extends BaseAdapter {
     animateStateLayer() {
         this._stateLayerElement.playAnimation();
     }
-    _createAnchorRootElement(target) {
+    clickAnchor() {
+        if (this._rootElement.tagName === 'A') {
+            this._rootElement.click();
+        }
+    }
+    clickHost() {
+        // Calling click() on the prototype ensures we don't end up in an infinite
+        // recursion since the host overrides the HTMLElement.click() method
+        HTMLElement.prototype.click.call(this._component);
+    }
+    _createAnchorRootElement() {
         const a = document.createElement('a');
         a.classList.add(LIST_ITEM_CONSTANTS.classes.ROOT);
         a.setAttribute('part', 'root');
-        a.target = target;
+        if (this._component.href) {
+            a.href = this._component.href;
+        }
+        if (this._component.target) {
+            a.target = this._component.target;
+        }
+        if (this._component.download) {
+            a.download = this._component.download;
+        }
+        if (this._component.rel) {
+            a.rel = this._component.rel;
+        }
         return a;
     }
     _createDefaultRootElement() {

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

@@ -9,6 +9,8 @@ export declare const LIST_ITEM_CONSTANTS: {
     observedAttributes: {
         HREF: string;
         TARGET: string;
+        DOWNLOAD: string;
+        REL: string;
         STATIC: string;
         NON_INTERACTIVE: string;
         DISABLED: string;
@@ -25,6 +27,8 @@ export declare const LIST_ITEM_CONSTANTS: {
     attributes: {
         HREF: string;
         TARGET: string;
+        DOWNLOAD: string;
+        REL: string;
         STATIC: string;
         NON_INTERACTIVE: string;
         DISABLED: string;

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

@@ -8,6 +8,8 @@ const elementName = `${COMPONENT_NAME_PREFIX}list-item`;
 const observedAttributes = {
     HREF: 'href',
     TARGET: 'target',
+    DOWNLOAD: 'download',
+    REL: 'rel',
     STATIC: 'static',
     NON_INTERACTIVE: 'non-interactive',
     DISABLED: 'disabled',
@@ -27,7 +29,7 @@ const classes = {
 };
 const selectors = {
     ROOT: `.${classes.ROOT}`,
-    CHECKBOX_RADIO_SELECTOR: 'input[type=checkbox]:not(:disabled):not([forge-ignore]),input[type=radio]:not(:disabled):not([forge-ignore])',
+    CHECKBOX_RADIO_SELECTOR: ':is(input[type=checkbox], input[type=radio], forge-checkbox):not(:disabled):not([forge-ignore])',
     SWITCH_SELECTOR: 'forge-switch:not([disabled]):not([forge-ignore])',
     IGNORE: '[forge-ignore],[data-forge-ignore]'
 };

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

@@ -8,6 +8,8 @@ import { IListItemAdapter } from './list-item-adapter';
 export interface IListItemFoundation extends ICustomElementFoundation {
     href: string;
     target: string;
+    download: string;
+    rel: string;
     static: boolean;
     nonInteractive: boolean;
     disabled: boolean;
@@ -26,6 +28,8 @@ export declare class ListItemFoundation implements IListItemFoundation {
     private _adapter;
     private _href;
     private _target;
+    private _download;
+    private _rel;
     private _nonInteractive;
     private _disabled;
     private _selected;
@@ -44,6 +48,7 @@ export declare class ListItemFoundation implements IListItemFoundation {
     initialize(): void;
     disconnect(): void;
     setFocus(): void;
+    click(): void;
     private _onPointerDown;
     private _onKeydown;
     private _onClick;
@@ -52,6 +57,10 @@ export declare class ListItemFoundation implements IListItemFoundation {
     set href(value: string);
     get target(): string;
     set target(value: string);
+    get download(): string;
+    set download(value: string);
+    get rel(): string;
+    set rel(value: string);
     get static(): boolean;
     set static(value: boolean);
     get nonInteractive(): boolean;

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

@@ -7,7 +7,9 @@ import { LIST_ITEM_CONSTANTS } from './list-item-constants';
 export class ListItemFoundation {
     constructor(_adapter) {
         this._adapter = _adapter;
-        this._target = '_blank';
+        this._target = '';
+        this._download = '';
+        this._rel = '';
         this._nonInteractive = false;
         this._disabled = false;
         this._selected = false;
@@ -40,6 +42,14 @@ export class ListItemFoundation {
     setFocus() {
         this._adapter.setFocus();
     }
+    click() {
+        if (this._href) {
+            this._adapter.clickAnchor();
+        }
+        else {
+            this._adapter.clickHost();
+        }
+    }
     _onPointerDown(evt) {
         if (this._adapter.isFocused()) {
             evt.preventDefault();
@@ -47,7 +57,7 @@ export class ListItemFoundation {
     }
     _onKeydown(evt) {
         if (evt.key === 'Enter' || evt.key === ' ') {
-            if (evt.key === ' ') {
+            if (!this._href && evt.key === ' ') {
                 evt.preventDefault();
             }
             this._adapter.animateStateLayer();
@@ -81,7 +91,7 @@ export class ListItemFoundation {
     set href(value) {
         if (this._href !== value) {
             this._href = value;
-            this._adapter.setHref(this._href, this._target);
+            this._adapter.setHref(this._href);
             this._adapter.toggleHostAttribute(LIST_ITEM_CONSTANTS.attributes.HREF, !!this._href, this._href);
         }
     }
@@ -92,11 +102,31 @@ export class ListItemFoundation {
         if (this._target !== value) {
             this._target = value;
             if (this._href) {
-                this._adapter.setHrefTarget(this._target);
+                this._adapter.setAnchorTarget(this._target);
             }
             this._adapter.toggleHostAttribute(LIST_ITEM_CONSTANTS.attributes.TARGET, !!this._target, this._target);
         }
     }
+    get download() {
+        return this._download;
+    }
+    set download(value) {
+        if (this._download !== value) {
+            this._download = value;
+            this._adapter.setAnchorDownload(this._download);
+            this._adapter.toggleHostAttribute(LIST_ITEM_CONSTANTS.attributes.DOWNLOAD, !!this._download, this._download);
+        }
+    }
+    get rel() {
+        return this._rel;
+    }
+    set rel(value) {
+        if (this._rel !== value) {
+            this._rel = value;
+            this._adapter.setAnchorRel(this._rel);
+            this._adapter.toggleHostAttribute(LIST_ITEM_CONSTANTS.attributes.REL, !!this._rel, this._rel);
+        }
+    }
     get static() {
         return this.nonInteractive;
     }

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

@@ -8,6 +8,8 @@ import { IListItemSelectEventData } from './list-item-constants';
 export interface IListItemComponent<T = unknown> extends ICustomElement {
     href: string;
     target: string;
+    download: string;
+    rel: string;
     /** @deprecated Use nonInteractive instead. */
     static: boolean;
     nonInteractive: boolean;
@@ -35,7 +37,10 @@ declare global {
  *
  * @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.
@@ -50,7 +55,10 @@ declare global {
  * @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.
@@ -80,8 +88,8 @@ declare global {
  *
  * @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.
@@ -132,6 +140,8 @@ export declare class ListItemComponent extends HTMLElement implements IListItemC
     focus(): void;
     href: string;
     target: string;
+    download: string;
+    rel: string;
     /** @deprecated Use nonInteractive instead. */
     static: boolean;
     nonInteractive: boolean;
@@ -145,4 +155,5 @@ export declare class ListItemComponent extends HTMLElement implements IListItemC
     twoLine: boolean;
     threeLine: boolean;
     wrap: boolean;
+    click(): void;
 }

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 exportparts=\"indicator: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{--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,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;