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

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

@@ -3,95 +3,82 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { isDefined } from '@tylertech/forge-core';
 import { LIST_CONSTANTS } from './list-constants';
-const ELEMENTS_KEY_ALLOWED_IN = ['input', 'button', 'textarea', 'select'];
-/**
- * The foundation class behind the `<forge-list>` component.
- */
 export class ListFoundation {
     constructor(_adapter) {
         this._adapter = _adapter;
-        this._static = false;
+        this._nonInteractive = false;
+        this._disabled = false;
         this._dense = false;
         this._propagateClick = true;
         this._indented = false;
-        this._keydownListener = (evt) => this._onKeydown(evt);
+        this._twoLine = false;
+        this._threeLine = false;
+        this._wrap = false;
+        this._keydownListener = this._onKeydown.bind(this);
     }
     initialize() {
-        this._adapter.initializeAccessibility();
-        if (!this._static) {
-            this._adapter.addListener('keydown', this._keydownListener);
+        this._adapter.initialize();
+        if (!this._nonInteractive) {
+            this._adapter.addHostListener('keydown', this._keydownListener);
         }
-        if (this._selectedValue) {
+        if (this._selectedValue !== undefined && this._selectedValue !== null) {
             this._adapter.setSelectedListItems(this._selectedValue);
         }
     }
     _onKeydown(evt) {
-        const isArrowDown = evt.key === 'ArrowDown' || evt.keyCode === 40;
-        const isArrowUp = evt.key === 'ArrowUp' || evt.keyCode === 38;
-        const isHome = evt.key === 'Home' || evt.keyCode === 36;
-        const isEnd = evt.key === 'End' || evt.keyCode === 35;
-        const isTab = evt.key === 'Tab' || evt.keyCode === 9;
-        // We don't capture modifier keys
-        if (evt.altKey || evt.ctrlKey || evt.shiftKey || evt.metaKey) {
+        const { key, altKey, ctrlKey, shiftKey, metaKey } = evt;
+        if (altKey || ctrlKey || shiftKey || metaKey) {
             return;
         }
-        if (!isTab) {
-            this._preventDefaultEvent(evt);
-        }
-        if (isHome) {
+        if (key === 'Home') {
+            evt.preventDefault();
             this._adapter.focusFirstListItem();
         }
-        else if (isEnd) {
+        else if (key === 'End') {
+            evt.preventDefault();
             this._adapter.focusLastListItem();
         }
-        else if (isArrowDown) {
-            this._adapter.focusNextListItem();
-        }
-        else if (isArrowUp) {
+        else if (key === 'ArrowUp') {
+            evt.preventDefault();
             this._adapter.focusPreviousListItem();
         }
-    }
-    /**
-     * Ensures that preventDefault is only called if the containing element doesn't
-     * consume the event, and it will cause an unintended scroll.
-     * @param {Event} evt
-     */
-    _preventDefaultEvent(evt) {
-        const tagName = `${evt.target.tagName}`.toLowerCase();
-        if (ELEMENTS_KEY_ALLOWED_IN.indexOf(tagName) === -1) {
+        else if (key === 'ArrowDown') {
             evt.preventDefault();
+            this._adapter.focusNextListItem();
         }
     }
-    _setSelectedValue(value) {
-        let values = value instanceof Array ? value : [value];
-        values = values.filter(v => isDefined(v));
-        this._adapter.setSelectedListItems(values);
+    updateRole() {
+        this._adapter.updateListItemRole();
     }
-    /** Gets/sets whether the list has all static items or not. */
     get static() {
-        return this._static;
+        return this.nonInteractive;
     }
     set static(value) {
-        if (this._static !== value) {
-            this._static = value;
-            if (!this._static) {
-                this._adapter.addListener('keydown', this._keydownListener);
-            }
-            else {
-                this._adapter.removeListener('keydown', this._keydownListener);
-            }
-            this._adapter.updateListItems(li => li.static = this._static);
-            if (this._static) {
-                this._adapter.setHostAttribute(LIST_CONSTANTS.attributes.STATIC);
-            }
-            else {
-                this._adapter.removeHostAttribute(LIST_CONSTANTS.attributes.STATIC);
-            }
-        }
-    }
-    /** Gets/sets whether the list has all dense items or not. */
+        this.nonInteractive = value;
+    }
+    get nonInteractive() {
+        return this._nonInteractive;
+    }
+    set nonInteractive(value) {
+        if (this._nonInteractive !== value) {
+            this._nonInteractive = value;
+            this._adapter.toggleHostListener('keydown', this._keydownListener, !this._nonInteractive);
+            this._adapter.updateListItems(li => li.nonInteractive = this._nonInteractive);
+            this._adapter.toggleHostAttribute(LIST_CONSTANTS.attributes.STATIC, this._nonInteractive);
+            this._adapter.toggleHostAttribute(LIST_CONSTANTS.attributes.NON_INTERACTIVE, this._nonInteractive);
+        }
+    }
+    get disabled() {
+        return this._disabled;
+    }
+    set disabled(value) {
+        if (this._disabled !== value) {
+            this._disabled = value;
+            this._adapter.updateListItems(li => li.disabled = this._disabled);
+            this._adapter.toggleHostAttribute(LIST_CONSTANTS.attributes.DISABLED, this._disabled);
+        }
+    }
     get dense() {
         return this._dense;
     }
@@ -99,12 +86,7 @@ export class ListFoundation {
         if (this._dense !== value) {
             this._dense = value;
             this._adapter.updateListItems(li => li.dense = this._dense);
-            if (this._dense) {
-                this._adapter.setHostAttribute(LIST_CONSTANTS.attributes.DENSE);
-            }
-            else {
-                this._adapter.removeHostAttribute(LIST_CONSTANTS.attributes.DENSE);
-            }
+            this._adapter.toggleHostAttribute(LIST_CONSTANTS.attributes.DENSE, this._dense);
         }
     }
     get propagateClick() {
@@ -114,7 +96,7 @@ export class ListFoundation {
         if (this._propagateClick !== value) {
             this._propagateClick = value;
             this._adapter.updateListItems(li => li.propagateClick = this._propagateClick);
-            this._adapter.setHostAttribute(LIST_CONSTANTS.attributes.PROPAGATE_CLICK, '' + !!this._propagateClick);
+            this._adapter.setHostAttribute(LIST_CONSTANTS.attributes.PROPAGATE_CLICK, this._propagateClick ? 'true' : 'false');
         }
     }
     get indented() {
@@ -124,19 +106,46 @@ export class ListFoundation {
         if (this._indented !== value) {
             this._indented = value;
             this._adapter.updateListItems(li => li.indented = this._indented);
-            if (this._indented) {
-                this._adapter.setHostAttribute(LIST_CONSTANTS.attributes.INDENTED);
-            }
-            else {
-                this._adapter.removeHostAttribute(LIST_CONSTANTS.attributes.INDENTED);
-            }
+            this._adapter.toggleHostAttribute(LIST_CONSTANTS.attributes.INDENTED, this._indented);
         }
     }
     get selectedValue() {
         return this._selectedValue;
     }
     set selectedValue(value) {
-        this._selectedValue = value;
-        this._setSelectedValue(value);
+        if (this._selectedValue !== value) {
+            this._selectedValue = value;
+            this._adapter.setSelectedListItems(this._selectedValue);
+        }
+    }
+    get twoLine() {
+        return this._twoLine;
+    }
+    set twoLine(value) {
+        if (this._twoLine !== value) {
+            this._twoLine = value;
+            this._adapter.updateListItems(li => li.twoLine = this._twoLine);
+            this._adapter.toggleHostAttribute(LIST_CONSTANTS.attributes.TWO_LINE, this._twoLine);
+        }
+    }
+    get threeLine() {
+        return this._threeLine;
+    }
+    set threeLine(value) {
+        if (this._threeLine !== value) {
+            this._threeLine = value;
+            this._adapter.updateListItems(li => li.threeLine = this._threeLine);
+            this._adapter.toggleHostAttribute(LIST_CONSTANTS.attributes.THREE_LINE, this._threeLine);
+        }
+    }
+    get wrap() {
+        return this._wrap;
+    }
+    set wrap(value) {
+        if (this._wrap !== value) {
+            this._wrap = value;
+            this._adapter.updateListItems(li => li.wrap = this._wrap);
+            this._adapter.toggleHostAttribute(LIST_CONSTANTS.attributes.WRAP, this._wrap);
+        }
     }
 }

package/esm/list/list/list.d.ts

@@ -5,11 +5,17 @@
  */
 import { BaseComponent, IBaseComponent } from '../../core/base/base-component';
 export interface IListComponent extends IBaseComponent {
+    /** @deprecated Use nonInteractive instead. */
     static: boolean;
+    nonInteractive: boolean;
+    disabled: boolean;
     dense: boolean;
     propagateClick: boolean;
     indented: boolean;
     selectedValue: any;
+    twoLine: boolean;
+    threeLine: boolean;
+    wrap: boolean;
 }
 declare global {
     interface HTMLElementTagNameMap {
@@ -17,24 +23,57 @@ declare global {
     }
 }
 /**
- * The custom element class behind the `<forge-list>` element.
- *
  * @tag forge-list
+ *
+ * @summary Lists are vertical groupings of related content.
+ *
+ * @csspart root - The component's root container element.
+ *
+ * @slot - The default/unnamed slot for child list items.
+ *
+ * @cssproperty --forge-list-container-color - The background color of the list surface,
+ * @cssproperty --forge-list-block-padding - The block padding of the list before and after the list items.
+ * @cssproperty --forge-list-inline-padding - The inline padding of the list next to the list items.
+ *
+ * @property {string} role - The role of the list. Default is 'list'. Valid values are 'list', 'listbox', and 'menu'.
+ * @property {boolean} static - Whether the list has all static items or not.
+ * @property {boolean} nonInteractive - Whether the list has all non-interactive items or not.
+ * @property {boolean} disabled - Whether the list items are disabled or not.
+ * @property {boolean} dense - Whether the list has all dense items or not.
+ * @property {boolean} propagateClick - Whether the list items propagate click events or not.
+ * @property {boolean} indented - Whether the list items within this list are indented. Default is false.
+ * @property {unknown | unknown[]} selectedValue - The selected list item value(s).
+ * @property {boolean} twoLine - Whether the list has all two-line items or not.
+ * @property {boolean} threeLine - Whether the list has all three-line items or not.
+ * @property {boolean} wrap - Whether the list has all items that wrap their text or not.
+ *
+ * @attribute {string} role - The role of the list. Default is 'list'. Valid values are 'list', 'listbox', and 'menu'.
+ * @attribute {boolean} static - Whether the list has all static items or not.
+ * @attribute {boolean} non-interactive - Whether the list has all non-interactive items or not.
+ * @attribute {boolean} disabled - Whether the list items are disabled or not.
+ * @attribute {boolean} dense - Whether the list has all dense items or not.
+ * @attribute {boolean} propagate-click - Whether the list items propagate click events or not.
+ * @attribute {string} selected-value - The selected list item value(s).
+ * @attribute {boolean} indented - Whether the list items within this list are indented. Default is false.
+ * @attribute {boolean} two-line - Whether the list has all two-line items or not.
+ * @attribute {boolean} three-line - Whether the list has all three-line items or not.
+ * @attribute {boolean} wrap - Whether the list has all items that wrap their text or not.
+ * @attribute {boolean} navlist - Controls whether the list is styled a navigation list or not.
  */
 export declare class ListComponent extends BaseComponent implements IListComponent {
     static get observedAttributes(): string[];
     private _foundation;
     constructor();
-    initializedCallback(): void;
+    connectedCallback(): void;
     attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
-    /** Gets/sets whether the list has all static items or not. */
     static: boolean;
-    /** Gets/sets whether the list has all dense items or not. */
+    nonInteractive: boolean;
+    disabled: boolean;
     dense: boolean;
-    /** Gets/sets whether the list items allow mousedown events through to their underlying list item elements. Default is true. */
     propagateClick: boolean;
-    /** Gets/sets whether the list items within this list are indented. Default is false. */
     indented: boolean;
-    /** Gets/sets the selected list item value(s) */
     selectedValue: any;
+    twoLine: boolean;
+    threeLine: boolean;
+    wrap: boolean;
 }

package/esm/list/list/list.js

@@ -4,27 +4,66 @@
  * License: Apache-2.0
  */
 import { __decorate } from "tslib";
-import { attachShadowTemplate, coerceBoolean, CustomElement, FoundationProperty } from '@tylertech/forge-core';
+import { CustomElement, attachShadowTemplate, FoundationProperty, coerceBoolean } from '@tylertech/forge-core';
 import { BaseComponent } from '../../core/base/base-component';
-import { ListItemComponent } from '../list-item';
 import { ListAdapter } from './list-adapter';
-import { LIST_CONSTANTS } from './list-constants';
 import { ListFoundation } from './list-foundation';
+import { LIST_CONSTANTS } from './list-constants';
 const template = '<template><div class=\"forge-list\" part=\"root\"><slot></slot></div></template>';
-const styles = '.forge-list{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-subtitle1-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:1rem;font-size:var(--mdc-typography-subtitle1-font-size, 1rem);line-height:1.75rem;line-height:var(--mdc-typography-subtitle1-line-height, 1.75rem);font-weight:400;font-weight:var(--mdc-typography-subtitle1-font-weight,400);letter-spacing:.009375em;letter-spacing:var(--mdc-typography-subtitle1-letter-spacing, .009375em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-subtitle1-text-decoration,inherit);text-decoration:var(--mdc-typography-subtitle1-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-subtitle1-text-transform,inherit);line-height:1.5rem;padding-top:8px;padding-top:var(--forge-list-padding,8px);padding-bottom:8px;padding-bottom:var(--forge-list-padding,8px);margin:0;list-style-type:none}.forge-list:focus{outline:0}:host{display:block;contain:content}:host([hidden]){display:none}';
+const styles = ':host{display:block}:host([hidden]){display:none}:host([navlist]){--forge-list-item-height:40px;--forge-list-item-margin:4px 8px;--forge-list-item-shape:4px;--forge-list-item-supporting-text-font-size:0.875rem;--forge-list-item-supporting-text-font-weight:500}.forge-list{--_container-color:var(--forge-list-container-color, transparent);--_block-padding:var(--forge-list-block-padding, 8px);--_inline-padding:var(--forge-list-inline-padding, 0);display:block;outline:0;background-color:var(--_container-color);padding:var(--_block-padding) var(--_inline-padding);margin:0;border-radius:inherit;min-width:inherit}';
+import { ListItemComponent } from '../list-item';
 /**
- * The custom element class behind the `<forge-list>` element.
- *
  * @tag forge-list
+ *
+ * @summary Lists are vertical groupings of related content.
+ *
+ * @csspart root - The component's root container element.
+ *
+ * @slot - The default/unnamed slot for child list items.
+ *
+ * @cssproperty --forge-list-container-color - The background color of the list surface,
+ * @cssproperty --forge-list-block-padding - The block padding of the list before and after the list items.
+ * @cssproperty --forge-list-inline-padding - The inline padding of the list next to the list items.
+ *
+ * @property {string} role - The role of the list. Default is 'list'. Valid values are 'list', 'listbox', and 'menu'.
+ * @property {boolean} static - Whether the list has all static items or not.
+ * @property {boolean} nonInteractive - Whether the list has all non-interactive items or not.
+ * @property {boolean} disabled - Whether the list items are disabled or not.
+ * @property {boolean} dense - Whether the list has all dense items or not.
+ * @property {boolean} propagateClick - Whether the list items propagate click events or not.
+ * @property {boolean} indented - Whether the list items within this list are indented. Default is false.
+ * @property {unknown | unknown[]} selectedValue - The selected list item value(s).
+ * @property {boolean} twoLine - Whether the list has all two-line items or not.
+ * @property {boolean} threeLine - Whether the list has all three-line items or not.
+ * @property {boolean} wrap - Whether the list has all items that wrap their text or not.
+ *
+ * @attribute {string} role - The role of the list. Default is 'list'. Valid values are 'list', 'listbox', and 'menu'.
+ * @attribute {boolean} static - Whether the list has all static items or not.
+ * @attribute {boolean} non-interactive - Whether the list has all non-interactive items or not.
+ * @attribute {boolean} disabled - Whether the list items are disabled or not.
+ * @attribute {boolean} dense - Whether the list has all dense items or not.
+ * @attribute {boolean} propagate-click - Whether the list items propagate click events or not.
+ * @attribute {string} selected-value - The selected list item value(s).
+ * @attribute {boolean} indented - Whether the list items within this list are indented. Default is false.
+ * @attribute {boolean} two-line - Whether the list has all two-line items or not.
+ * @attribute {boolean} three-line - Whether the list has all three-line items or not.
+ * @attribute {boolean} wrap - Whether the list has all items that wrap their text or not.
+ * @attribute {boolean} navlist - Controls whether the list is styled a navigation list or not.
  */
 let ListComponent = class ListComponent extends BaseComponent {
     static get observedAttributes() {
         return [
+            LIST_CONSTANTS.attributes.ROLE,
             LIST_CONSTANTS.attributes.STATIC,
+            LIST_CONSTANTS.attributes.NON_INTERACTIVE,
+            LIST_CONSTANTS.attributes.DISABLED,
             LIST_CONSTANTS.attributes.DENSE,
-            LIST_CONSTANTS.attributes.SELECTED_VALUE,
             LIST_CONSTANTS.attributes.PROPAGATE_CLICK,
-            LIST_CONSTANTS.attributes.INDENTED
+            LIST_CONSTANTS.attributes.SELECTED_VALUE,
+            LIST_CONSTANTS.attributes.INDENTED,
+            LIST_CONSTANTS.attributes.TWO_LINE,
+            LIST_CONSTANTS.attributes.THREE_LINE,
+            LIST_CONSTANTS.attributes.WRAP
         ];
     }
     constructor() {
@@ -32,13 +71,20 @@ let ListComponent = class ListComponent extends BaseComponent {
         attachShadowTemplate(this, template, styles);
         this._foundation = new ListFoundation(new ListAdapter(this));
     }
-    initializedCallback() {
+    connectedCallback() {
         this._foundation.initialize();
     }
     attributeChangedCallback(name, oldValue, newValue) {
         switch (name) {
+            case LIST_CONSTANTS.attributes.ROLE:
+                this._foundation.updateRole();
+                break;
             case LIST_CONSTANTS.attributes.STATIC:
-                this.static = coerceBoolean(newValue);
+            case LIST_CONSTANTS.attributes.NON_INTERACTIVE:
+                this.nonInteractive = coerceBoolean(newValue);
+                break;
+            case LIST_CONSTANTS.attributes.DISABLED:
+                this.disabled = coerceBoolean(newValue);
                 break;
             case LIST_CONSTANTS.attributes.DENSE:
                 this.dense = coerceBoolean(newValue);
@@ -52,12 +98,27 @@ let ListComponent = class ListComponent extends BaseComponent {
             case LIST_CONSTANTS.attributes.SELECTED_VALUE:
                 this.selectedValue = newValue;
                 break;
+            case LIST_CONSTANTS.attributes.TWO_LINE:
+                this.twoLine = coerceBoolean(newValue);
+                break;
+            case LIST_CONSTANTS.attributes.THREE_LINE:
+                this.threeLine = coerceBoolean(newValue);
+                break;
+            case LIST_CONSTANTS.attributes.WRAP:
+                this.wrap = coerceBoolean(newValue);
+                break;
         }
     }
 };
 __decorate([
     FoundationProperty()
 ], ListComponent.prototype, "static", void 0);
+__decorate([
+    FoundationProperty()
+], ListComponent.prototype, "nonInteractive", void 0);
+__decorate([
+    FoundationProperty()
+], ListComponent.prototype, "disabled", void 0);
 __decorate([
     FoundationProperty()
 ], ListComponent.prototype, "dense", void 0);
@@ -70,10 +131,21 @@ __decorate([
 __decorate([
     FoundationProperty()
 ], ListComponent.prototype, "selectedValue", void 0);
+__decorate([
+    FoundationProperty()
+], ListComponent.prototype, "twoLine", void 0);
+__decorate([
+    FoundationProperty()
+], ListComponent.prototype, "threeLine", void 0);
+__decorate([
+    FoundationProperty()
+], ListComponent.prototype, "wrap", void 0);
 ListComponent = __decorate([
     CustomElement({
         name: LIST_CONSTANTS.elementName,
-        dependencies: [ListItemComponent]
+        dependencies: [
+            ListItemComponent
+        ]
     })
 ], ListComponent);
 export { ListComponent };

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

@@ -4,106 +4,47 @@
  * License: Apache-2.0
  */
 import { BaseAdapter, IBaseAdapter } from '../../core/base/base-adapter';
-import { createUserInteractionListener } from '../../core/utils';
 import { IListItemComponent } from './list-item';
-export interface IListItemAdapter extends IBaseAdapter {
-    initializeAccessibility(): void;
-    getListItem(): IListItemComponent;
-    addListener(type: string, listener: (evt: Event) => void, options?: AddEventListenerOptions): void;
-    removeListener(type: string, listener: (evt: Event) => void): void;
-    createRipple(): any;
-    setStatic(value: boolean): void;
-    setTwoLine(value: boolean): void;
-    setThreeLine(value: boolean): void;
-    getLineCount(): number;
+export interface IListItemAdapter extends IBaseAdapter<IListItemComponent> {
+    initialize(): void;
+    setHref(href: string, target: string): void;
+    setHrefTarget(target: string): void;
+    setNonInteractive(value: boolean): void;
+    setDisabled(value: boolean): void;
     setActive(value: boolean): void;
-    setSelected(value: boolean): void;
-    tryToggleCheckboxRadio(value?: boolean): void;
-    setFocus(): void;
-    hasFocus(): boolean;
-    setRole(role: string): void;
-    setDisabled(disabled: boolean): void;
-    setDense(dense: boolean): void;
-    setIndented(indented: boolean): void;
-    setWrap(value: boolean): void;
     trySelect(value: unknown): boolean | null;
-    userInteractionListener(): ReturnType<typeof createUserInteractionListener>;
+    tryToggleSelectionControl(value?: boolean): void;
+    isFocused(): boolean;
+    setFocus(): void;
+    animateStateLayer(): void;
 }
 export declare class ListItemAdapter extends BaseAdapter<IListItemComponent> implements IListItemAdapter {
-    private _listItemElement;
-    private _defaultSlot;
+    private _rootElement;
+    private _focusIndicatorElement;
+    private _stateLayerElement;
     constructor(component: IListItemComponent);
-    private _initialize;
-    initializeAccessibility(): void;
-    getListItem(): IListItemComponent;
-    /**
-     * Adds an event listener to the `<forge-list-item>` host element.
-     * @param {string} type The event type.
-     * @param {Function} listener The event callback.
-     */
-    addListener(type: string, listener: (evt: Event) => void, options?: AddEventListenerOptions): void;
-    /**
-     * Removes an event listener from the `<forge-list-item>` host element.
-     * @param {string} type The event type.
-     * @param {Function} listener The event callback.
-     */
-    removeListener(type: string, listener: (evt: Event) => void): void;
-    /**
-     * Creates a ripple instance on the list item.
-     * @returns {ForgeRipple}
-     */
-    createRipple(): any;
-    /**
-     * Toggles the static state of this list item.
-     * @param {boolean} value The static state.
-     */
-    setStatic(value: boolean): void;
-    /**
-     * Sets this list item as a two-line list item.
-     * @param {boolean} value The two-line state.
-     */
-    setTwoLine(value: boolean): void;
-    /**
-     * Sets this list item as a three-line list item.
-     * @param {boolean} value The three-line state.
-     */
-    setThreeLine(value: boolean): void;
-    /**
-     * Determines how many lines the list item is displaying.
-     */
-    getLineCount(): number;
-    /**
-     * Toggles the active class of the list item.
-     * @param {boolean} value The active state.
-     */
+    initialize(): void;
+    setHref(href: string, target: string): void;
+    setHrefTarget(target: string): void;
+    setNonInteractive(value: boolean): void;
+    setDisabled(value: boolean): void;
     setActive(value: boolean): void;
-    /**
-     * Toggles the selected class of the list item.
-     * @param {boolean} value The active state.
-     */
-    setSelected(value: boolean): void;
-    /**
-     * Attemps to toggle a checkbox or radio button within the list item if it can find one.
-     */
-    tryToggleCheckboxRadio(value?: boolean): void;
-    /** Attempts to set focus to this list item. */
-    setFocus(): void;
-    /** Returns whether the component has focus or not. */
-    hasFocus(): boolean;
-    /**
-     * Sets the role on the list item element.
-     * @param role The role.
-     */
-    setRole(role: string): void;
-    setDisabled(disabled: boolean): void;
-    setDense(dense: boolean): void;
-    setIndented(indented: boolean): void;
-    setWrap(value: boolean): void;
     /**
      * Attempts to set the selected state of the list item element and it's visual indicators
      * @param value The value to compare to the parent list element's selected value
-     * @returns Returns whether the list item is selected or not
+     * @returns Returns whether the list item is selected, or null otherwise.
      */
     trySelect(value: unknown): boolean | null;
-    userInteractionListener(): ReturnType<typeof createUserInteractionListener>;
+    /**
+     * Attempts to toggle a checkbox radio button, or switch within the list item if it can find one.
+     */
+    tryToggleSelectionControl(value?: boolean): void;
+    isFocused(): boolean;
+    setFocus(): void;
+    animateStateLayer(): void;
+    private _createAnchorRootElement;
+    private _createDefaultRootElement;
+    private _getParentList;
+    private _inheritParentListProps;
+    private _setRole;
 }