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

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

@@ -3,278 +3,221 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { matchesSelectors } from '@tylertech/forge-core';
 import { LIST_ITEM_CONSTANTS } from './list-item-constants';
-/**
- * The foundation class behind the `<forge-list-item>` component.
- */
 export class ListItemFoundation {
     constructor(_adapter) {
         this._adapter = _adapter;
-        this._ripple = true;
-        this._static = false;
-        this._twoLine = false;
-        this._threeLine = false;
-        this._active = false;
-        this._selected = false;
+        this._target = '';
+        this._download = '';
+        this._rel = '';
+        this._nonInteractive = false;
         this._disabled = false;
+        this._selected = false;
+        this._active = false;
         this._dense = false;
         this._propagateClick = true;
         this._indented = false;
+        this._twoLine = false;
+        this._threeLine = false;
         this._wrap = false;
-        this._clickListener = (evt) => this._onClick(evt);
-        this._mouseDownListener = (evt) => this._onMouseDown(evt);
-        this._keydownListener = (evt) => this._onKeydown(evt);
+        this._clickListener = this._onClick.bind(this);
+        this._pointerDownListener = this._onPointerDown.bind(this);
+        this._keydownListener = this._onKeydown.bind(this);
     }
     initialize() {
-        this._adapter.initializeAccessibility();
-        this._setRipple();
-        this._adapter.setStatic(this._static);
-        this._adapter.setDense(this._dense);
-        this._adapter.setDisabled(this._disabled);
-        this._adapter.setIndented(this._indented);
-        this._adapter.setWrap(this._wrap);
-        if (!this._static) {
-            this._adapter.addListener('click', this._clickListener);
-            this._adapter.addListener('mousedown', this._mouseDownListener, { passive: false, capture: true });
-            this._adapter.addListener('keydown', this._keydownListener);
-        }
-        if (this._threeLine) {
-            this._adapter.setThreeLine(this._threeLine);
-        }
-        else if (this.twoLine) {
-            this._adapter.setTwoLine(this._twoLine);
-        }
-        const isSelected = this._adapter.trySelect(this._value);
-        if (isSelected != null) {
-            this._selected = isSelected;
+        this._adapter.initialize();
+        if (!this._nonInteractive && !this._disabled) {
+            this._adapter.addHostListener('click', this._clickListener);
+            this._adapter.addHostListener('keydown', this._keydownListener);
+            if (!this._propagateClick) {
+                this._adapter.addHostListener('pointerdown', this._pointerDownListener);
+            }
         }
     }
     disconnect() {
-        if (typeof this._destroyUserInteractionListener === 'function') {
-            this._destroyUserInteractionListener();
-            this._destroyUserInteractionListener = undefined;
+        this._adapter.removeHostListener('click', this._clickListener);
+        this._adapter.removeHostListener('pointerdown', this._pointerDownListener);
+        this._adapter.removeHostListener('keydown', this._keydownListener);
+    }
+    setFocus() {
+        this._adapter.setFocus();
+    }
+    click() {
+        if (this._href) {
+            this._adapter.clickAnchor();
         }
-        if (this._rippleInstance) {
-            this._rippleInstance.destroy();
-            this._rippleInstance = undefined;
+        else {
+            this._adapter.clickHost();
         }
     }
-    _onMouseDown(evt) {
-        if (this._adapter.hasFocus() || !this._propagateClick) {
+    _onPointerDown(evt) {
+        if (this._adapter.isFocused()) {
             evt.preventDefault();
         }
     }
     _onKeydown(evt) {
         if (evt.key === 'Enter' || evt.key === ' ') {
-            if (evt.key === ' ') {
+            if (!this._href && evt.key === ' ') {
                 evt.preventDefault();
             }
+            this._adapter.animateStateLayer();
             this._select(evt.target);
         }
     }
-    /**
-     * Handles clicking a list item.
-     * @param evt
-     */
-    _onClick(evt) {
-        this._select(evt.target);
+    _onClick(event) {
+        this._select(event.target);
     }
     _select(targetElement) {
-        const ignoreElement = targetElement === null || targetElement === void 0 ? void 0 : targetElement.hasAttribute(LIST_ITEM_CONSTANTS.attributes.IGNORE);
-        if (this._static || this._disabled || ignoreElement) {
+        const ignoreElement = targetElement === null || targetElement === void 0 ? void 0 : targetElement.matches(LIST_ITEM_CONSTANTS.selectors.IGNORE);
+        if (this._nonInteractive || this._disabled || ignoreElement) {
             return;
         }
-        if (!this._adapter.hasFocus() && this._propagateClick) {
+        if (!this._adapter.isFocused() && this._propagateClick) {
             this.setFocus();
         }
-        if (this._href) {
-            if (this._target) {
-                window.open(this._href, this._target);
-            }
-            else {
-                document.location.href = this._href;
-            }
-            return;
-        }
         // If the target was not a checkbox or radio button, attempt to find one and toggle its checked state
-        if (!matchesSelectors(targetElement, LIST_ITEM_CONSTANTS.selectors.CHECKBOX_RADIO_SELECTOR)) {
-            this._adapter.tryToggleCheckboxRadio();
+        if (!targetElement.matches(LIST_ITEM_CONSTANTS.selectors.CHECKBOX_RADIO_SELECTOR)) {
+            this._adapter.tryToggleSelectionControl();
         }
         const data = {
             value: this._value,
-            listItem: this._adapter.getListItem()
+            listItem: this._adapter.hostElement
         };
         this._adapter.emitHostEvent(LIST_ITEM_CONSTANTS.events.SELECT, data);
     }
-    /** Gets/sets whether the list item has a ripple or not. */
-    get ripple() {
-        return this._ripple;
+    get href() {
+        return this._href;
     }
-    set ripple(value) {
-        if (this._ripple !== value) {
-            // We don't attach ripples to static items
-            if (value && this._static) {
-                return;
-            }
-            this._ripple = value;
-            this._setRipple();
-            this._adapter.setHostAttribute(LIST_ITEM_CONSTANTS.attributes.RIPPLE, String(this._ripple));
+    set href(value) {
+        if (this._href !== value) {
+            this._href = value;
+            this._adapter.setHref(this._href);
+            this._adapter.toggleHostAttribute(LIST_ITEM_CONSTANTS.attributes.HREF, !!this._href, this._href);
         }
     }
-    /** Gets/sets whether the static state of this list item. */
-    get static() {
-        return this._static;
+    get target() {
+        return this._target;
     }
-    set static(value) {
-        if (this._static !== value) {
-            this._static = value;
-            this._adapter.setStatic(this._static);
-            // Ensure we either add or remove the ripple
-            this._setRipple();
-            // Toggle the click listener
-            if (this._static) {
-                this._adapter.removeListener('click', this._clickListener);
-            }
-            else {
-                this._adapter.addListener('click', this._clickListener);
-            }
-            if (this._static) {
-                this._adapter.setHostAttribute(LIST_ITEM_CONSTANTS.attributes.STATIC);
-            }
-            else {
-                this._adapter.removeHostAttribute(LIST_ITEM_CONSTANTS.attributes.STATIC);
+    set target(value) {
+        if (this._target !== value) {
+            this._target = value;
+            if (this._href) {
+                this._adapter.setAnchorTarget(this._target);
             }
+            this._adapter.toggleHostAttribute(LIST_ITEM_CONSTANTS.attributes.TARGET, !!this._target, this._target);
         }
     }
-    /** Gets/sets whether the list item displays two lines of text. */
-    get twoLine() {
-        return this._twoLine;
+    get download() {
+        return this._download;
     }
-    set twoLine(value) {
-        if (this._twoLine !== value) {
-            this._twoLine = value;
-            this._adapter.setTwoLine(this._twoLine);
-            if (this._twoLine) {
-                this._adapter.setHostAttribute(LIST_ITEM_CONSTANTS.attributes.TWO_LINE);
-            }
-            else {
-                this._adapter.removeHostAttribute(LIST_ITEM_CONSTANTS.attributes.TWO_LINE);
-            }
+    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);
         }
     }
-    /** Gets/sets whether the list item displays two lines of text. */
-    get threeLine() {
-        return this._threeLine;
+    get rel() {
+        return this._rel;
     }
-    set threeLine(value) {
-        if (this._threeLine !== value) {
-            this._threeLine = value;
-            if (this._threeLine) {
-                this._adapter.setHostAttribute(LIST_ITEM_CONSTANTS.attributes.THREE_LINE);
+    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;
+    }
+    set static(value) {
+        this.nonInteractive = value;
+    }
+    get nonInteractive() {
+        return this._nonInteractive;
+    }
+    set nonInteractive(value) {
+        if (this._nonInteractive !== value) {
+            this._nonInteractive = value;
+            if (this._nonInteractive) {
+                this._adapter.removeHostListener('click', this._clickListener);
             }
             else {
-                this._adapter.removeHostAttribute(LIST_ITEM_CONSTANTS.attributes.THREE_LINE);
-            }
-            if (this._threeLine) {
-                this._twoLine = false;
+                this._adapter.addHostListener('click', this._clickListener);
             }
-            this._adapter.setTwoLine(this._twoLine);
-            this._adapter.setThreeLine(this._threeLine);
+            this._adapter.setNonInteractive(this._nonInteractive);
+            this._adapter.toggleHostAttribute(LIST_ITEM_CONSTANTS.attributes.STATIC, this._nonInteractive);
+            this._adapter.toggleHostAttribute(LIST_ITEM_CONSTANTS.attributes.NON_INTERACTIVE, this._nonInteractive);
         }
     }
-    /** Gets/sets whether the list item is active or not. */
-    get active() {
-        return this._active;
+    get disabled() {
+        return this._disabled;
     }
-    set active(value) {
-        if (this._active !== value) {
-            this._active = value;
-            this._adapter.setActive(this._active);
-            if (this._active) {
-                this._adapter.setHostAttribute(LIST_ITEM_CONSTANTS.attributes.ACTIVE);
+    set disabled(value) {
+        if (this._disabled !== value) {
+            this._disabled = value;
+            if (this._disabled) {
+                this._adapter.removeHostListener('click', this._clickListener);
             }
             else {
-                this._adapter.removeHostAttribute(LIST_ITEM_CONSTANTS.attributes.ACTIVE);
+                this._adapter.addHostListener('click', this._clickListener);
             }
+            this._adapter.setDisabled(this._disabled);
+            this._adapter.toggleHostAttribute(LIST_ITEM_CONSTANTS.attributes.DISABLED, this._disabled);
         }
     }
-    /** Gets/sets whether the list item is selected or not. */
     get selected() {
         return this._selected;
     }
     set selected(value) {
         if (this._selected !== value) {
             this._selected = value;
-            this._adapter.setSelected(this._selected);
-            this._adapter.tryToggleCheckboxRadio(this._selected);
+            this._adapter.tryToggleSelectionControl(this._selected);
             this._adapter.toggleHostAttribute(LIST_ITEM_CONSTANTS.attributes.SELECTED, this._selected);
         }
     }
-    /** Gets/sets the unique value for this list item. */
+    get active() {
+        return this._active;
+    }
+    set active(value) {
+        if (this._active !== value) {
+            this._active = value;
+            this._adapter.setActive(this._active);
+            this._adapter.toggleHostAttribute(LIST_ITEM_CONSTANTS.attributes.ACTIVE, this._active);
+        }
+    }
     get value() {
         return this._value;
     }
     set value(value) {
         this._value = value;
         const isSelected = this._adapter.trySelect(this._value);
-        if (isSelected != null) {
-            this._selected = isSelected;
+        if (isSelected !== null && isSelected !== this._selected) {
+            this.selected = isSelected;
         }
     }
-    /** Gets/sets the href link that this list item will send the browser to when clicked. */
-    get href() {
-        return this._href;
-    }
-    set href(value) {
-        if (this._href !== value) {
-            this._href = value;
-            if (this._href) {
-                this._adapter.setRole(LIST_ITEM_CONSTANTS.roles.LINK);
-            }
-            else {
-                this._adapter.setRole(LIST_ITEM_CONSTANTS.roles.LIST_ITEM);
-            }
-            this._adapter.setHostAttribute(LIST_ITEM_CONSTANTS.attributes.HREF, this._href);
-        }
-    }
-    /** Gets/sets the href link target. */
-    get target() {
-        return this._target;
-    }
-    set target(value) {
-        this._target = value;
-    }
-    /** Gets/sets the disabled state. */
-    get disabled() {
-        return this._disabled;
-    }
-    set disabled(value) {
-        if (this._disabled !== value) {
-            this._disabled = value;
-            this._adapter.setDisabled(this._disabled);
-            this._adapter.toggleHostAttribute(LIST_ITEM_CONSTANTS.attributes.DISABLED, this._disabled);
-        }
-    }
-    /** Gets/sets the dense state. */
     get dense() {
         return this._dense;
     }
     set dense(value) {
         if (this._dense !== value) {
             this._dense = value;
-            this._adapter.setDense(this._dense);
             this._adapter.toggleHostAttribute(LIST_ITEM_CONSTANTS.attributes.DENSE, this._dense);
         }
     }
-    /** Gets/sets the dense state. */
     get propagateClick() {
         return this._propagateClick;
     }
     set propagateClick(value) {
         if (this._propagateClick !== value) {
             this._propagateClick = value;
-            this._adapter.setHostAttribute(LIST_ITEM_CONSTANTS.attributes.PROPAGATE_CLICK, '' + !!this._propagateClick);
+            if (this._propagateClick) {
+                this._adapter.removeHostListener('pointerdown', this._pointerDownListener);
+            }
+            else {
+                this._adapter.addHostListener('pointerdown', this._pointerDownListener);
+            }
+            this._adapter.setHostAttribute(LIST_ITEM_CONSTANTS.attributes.PROPAGATE_CLICK, this._propagateClick ? 'true' : 'false');
         }
     }
     get indented() {
@@ -283,42 +226,34 @@ export class ListItemFoundation {
     set indented(value) {
         if (this._indented !== value) {
             this._indented = value;
-            this._adapter.setIndented(this._indented);
             this._adapter.toggleHostAttribute(LIST_ITEM_CONSTANTS.attributes.INDENTED, this._indented);
         }
     }
+    get twoLine() {
+        return this._twoLine;
+    }
+    set twoLine(value) {
+        if (this._twoLine !== value) {
+            this._twoLine = value;
+            this._adapter.toggleHostAttribute(LIST_ITEM_CONSTANTS.attributes.TWO_LINE, this._twoLine);
+        }
+    }
+    get threeLine() {
+        return this._threeLine;
+    }
+    set threeLine(value) {
+        if (this._threeLine !== value) {
+            this._threeLine = value;
+            this._adapter.toggleHostAttribute(LIST_ITEM_CONSTANTS.attributes.THREE_LINE, this._threeLine);
+        }
+    }
     get wrap() {
         return this._wrap;
     }
     set wrap(value) {
         if (this._wrap !== value) {
             this._wrap = value;
-            this._adapter.setWrap(this._wrap);
             this._adapter.toggleHostAttribute(LIST_ITEM_CONSTANTS.attributes.WRAP, this._wrap);
         }
     }
-    async _setRipple() {
-        if (this._ripple && !this._static && !this._rippleInstance) {
-            const { userInteraction, destroy } = this._adapter.userInteractionListener();
-            this._destroyUserInteractionListener = destroy;
-            const { type } = await userInteraction;
-            this._destroyUserInteractionListener = undefined;
-            if (this._ripple && !this._static && !this._rippleInstance) { // need to re-check after await
-                this._rippleInstance = this._adapter.createRipple();
-                if (type === 'focusin') {
-                    this._rippleInstance.handleFocus();
-                }
-            }
-        }
-        else if ((!this._ripple || this._static) && this._rippleInstance) {
-            this._rippleInstance.destroy();
-            this._rippleInstance = undefined;
-        }
-    }
-    /**
-     * Sets focus to this list item.
-     */
-    setFocus() {
-        this._adapter.setFocus();
-    }
 }

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

@@ -3,24 +3,26 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
+import { ICustomElement } from '@tylertech/forge-core';
 import { IListItemSelectEventData } from './list-item-constants';
-import { BaseComponent, IBaseComponent } from '../../core/base/base-component';
-export interface IListItemComponent extends IBaseComponent {
-    static: boolean;
-    twoLine: boolean;
-    threeLine: boolean;
-    active: boolean;
-    selected: boolean;
-    value: any;
+export interface IListItemComponent<T = unknown> extends ICustomElement {
     href: string;
     target: string;
-    ripple: boolean;
+    download: string;
+    rel: string;
+    /** @deprecated Use nonInteractive instead. */
+    static: boolean;
+    nonInteractive: boolean;
     disabled: boolean;
+    selected: boolean;
+    active: boolean;
+    value: T;
     dense: boolean;
     propagateClick: boolean;
     indented: boolean;
+    twoLine: boolean;
+    threeLine: boolean;
     wrap: boolean;
-    focus(): void;
 }
 declare global {
     interface HTMLElementTagNameMap {
@@ -31,46 +33,127 @@ declare global {
     }
 }
 /**
- * The custom element class behind the `<forge-list-item>` element.
- *
  * @tag forge-list-item
+ *
+ * @summary List items are individual rows of content inside of a list.
+ *
+ * @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.
+ * @property {boolean} disabled - Disables the list item.
+ * @property {boolean} selected - Applies the selected state to the list item.
+ * @property {boolean} active - Applies the active state to the list item by emulating its focused state.
+ * @property {unknown} value - The unique value of the list item.
+ * @property {boolean} dense - Applies the dense state to the list item.
+ * @property {boolean} propagateClick - If true, the list item will not propagate click events to itself and therefore cannot receive focus.
+ * @property {boolean} indented - Applies the indented state by adding margin to the start of the list item.
+ * @property {boolean} twoLine - Sets the list item height to support at least two lines of text.
+ * @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 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.
+ * @attribute {boolean} disabled - Disables the list item.
+ * @attribute {boolean} selected - Applies the selected state to the list item.
+ * @attribute {boolean} active - Applies the active state to the list item by emulating its focused state.
+ * @attribute {unknown} value - The unique value of the list item.
+ * @attribute {boolean} dense - Applies the dense state to the list item.
+ * @attribute {boolean} propagate-click - If applied, the list item will not propagate click events to itself and therefore cannot receive focus.
+ * @attribute {boolean} indented - Applies the indented state by adding margin to the start of the list item.
+ * @attribute {boolean} two-line - Sets the list item height to support at least two lines of text.
+ * @attribute {boolean} three-line - Sets the list item height to support at least three lines of text.
+ * @attribute {boolean} wrap - Sets the list item to wrap its text content.
+ *
+ * @event {CustomEvent<IListItemSelectEventData>} forge-list-item-select - Fires when the list item is selected.
+ *
+ * @slot - The primary text.
+ * @slot primary-text - The primary text. A named alias for the default slot.
+ * @slot secondary-text - The secondary text.
+ * @slot tertiary-text - The tertiary text.
+ * @slot title - The title element. An alias for the primary-text slot for backwards compatibility.
+ * @slot subtitle - The subtitle element. An alias for the secondary-text slot for backwards compatibility.
+ * @slot tertiary-title - The tertiary title element. An alias for the tertiary-text slot for backwards compatibility.
+ * @slot leading - The leading content.
+ * @slot trailing - The trailing element.
+ * @slot avatar - The avatar content.
+ *
+ * @csspart root - The root container element.
+ * @csspart text-container - The container for the text content.
+ * @csspart focus-indicator - The forwarded focus indicator's internal indicator element.
+ * @csspart state-layer - The forwarded state layer's internal surface element.
+ *
+ * @cssprop --forge-list-item-background-color - The background color.
+ * @cssprop --forge-list-item-shape - The shape of the list item.
+ * @cssprop --forge-list-item-padding - The padding inside of the container element.
+ * @cssprop --forge-list-item-margin - The margin around the host element.
+ * @cssprop --forge-list-item-height - The height of the container.
+ * @cssprop --forge-list-item-dense-height - The height when in the dense state.
+ * @cssprop --forge-list-item-indent - The margin inline state when in the indented state.
+ * @cssprop --forge-list-item-supporting-text-color - The text color of the supporting text.
+ * @cssprop --forge-list-item-supporting-line-height - The line height of the supporting text.
+ * @cssprop --forge-list-item-selected-color - The color when in the selected state.
+ * @cssprop --forge-list-item-opacity - The opacity of the background color when in the disabled state.
+ * @cssprop --forge-list-item-selected-leading-color - The color of the leading content when in the selected state.
+ * @cssprop --forge-list-item-selected-trailing-color - The color of the trailing content when in the selected state.
+ * @cssprop --forge-list-item-selected-supporting-text-color - The color of the supporting text when in the selected state.
+ * @cssprop --forge-list-item-disabled-opacity - The opacity of the element when in the disabled state.
+ * @cssprop --forge-list-item-disabled-cursor - The cursor when in the disabled state.
+ * @cssprop --forge-list-item-one-line-height - The line height when in the one/single line state.
+ * @cssprop --forge-list-item-two-line-height - The line height when in the two line state.
+ * @cssprop --forge-list-item-three-line-height - The line height when in the three line state.
+ * @cssprop --forge-list-item-dense-one-line-height - The line height when in the dense one/single line state.
+ * @cssprop --forge-list-item-dense-two-line-height - The line height when in the dense two line state.
+ * @cssprop --forge-list-item-dense-three-line-height - The line height when in the dense three line state.
+ * @cssprop --forge-list-item-dense-font-size - The font size when in the dense state.
+ * @cssprop --forge-list-item-dense-indent - The margin inline state when in the dense indented state.
+ * @cssprop --forge-list-item-dense-leading-margin-end - The margin end of the leading content when in the dense state.
+ * @cssprop --forge-list-item-dense-trailing-margin-start - The margin start of the trailing content when in the dense state.
+ * @cssprop --forge-list-item-leading-margin-start - The margin start of the leading content.
+ * @cssprop --forge-list-item-leading-margin-end - The margin end of the leading content.
+ * @cssprop --forge-list-item-leading-selected-color - The color of the leading content when in the selected state.
+ * @cssprop --forge-list-item-trailing-margin-start - The margin start of the trailing content.
+ * @cssprop --forge-list-item-trailing-margin-end - The margin end of the trailing content.
+ * @cssprop --forge-list-item-trailing-selected-color - The color of the trailing content when in the selected state.
+ * @cssprop --forge-list-item-avatar-background-color - The background color of the avatar container.
+ * @cssprop --forge-list-item-avatar-color - The foreground color of the avatar container.
+ * @cssprop --forge-list-item-avatar-shape - The shape of the avatar container.
+ * @cssprop --forge-list-item-avatar-margin-start - The margin start of the avatar container.
+ * @cssprop --forge-list-item-avatar-margin-end - The margin end of the avatar container.
+ * @cssprop --forge-list-item-avatar-size - The height & width of the avatar container.
  */
-export declare class ListItemComponent extends BaseComponent implements IListItemComponent {
+export declare class ListItemComponent extends HTMLElement implements IListItemComponent {
     static get observedAttributes(): string[];
     private _foundation;
     constructor();
     connectedCallback(): void;
     disconnectedCallback(): void;
     attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
-    private _inheritParentListProps;
-    /** Gets/sets whether the static state of this list item. */
-    static: boolean;
-    /** Gets/sets whether the list item displays two lines of text. */
-    twoLine: boolean;
-    /** Gets/sets whether the list item displays three lines of text. */
-    threeLine: boolean;
-    /** Gets/sets whether the list item is active or not. */
-    active: boolean;
-    /** Gets/sets whether the list item is selected or not. */
-    selected: boolean;
-    /** Gets/sets list item value. */
-    value: any;
-    /** Gets/sets the href link that this list item will send the browser to when clicked. */
+    focus(): void;
     href: string;
-    /** Gets/sets the href link target. Only pertains when `href` is also used. */
     target: string;
-    /** Gets/sets whether the list item has a ripple or not. */
-    ripple: boolean;
-    /** Gets/sets whether the list item is disabled or not. */
+    download: string;
+    rel: string;
+    /** @deprecated Use nonInteractive instead. */
+    static: boolean;
+    nonInteractive: boolean;
     disabled: boolean;
-    /** Gets/sets whether the list item is using dense styles or not. */
+    selected: boolean;
+    active: boolean;
+    value: unknown;
     dense: boolean;
-    /** Gets/sets whether the list item allows mousedown events through to the underlying list item element. Default is true. */
     propagateClick: boolean;
-    /** Gets/sets whether the list item is indented or not. Default is false. */
     indented: boolean;
-    /** Gets/sets whether the list item content is wrapped or not. Default is true. */
+    twoLine: boolean;
+    threeLine: boolean;
     wrap: boolean;
-    /** Sets focus to this list item. */
-    focus(): void;
+    click(): void;
 }