@tylertech/forge 2.21.1 → 2.21.2

package/esm/button/button.js

@@ -7,7 +7,7 @@ import { __decorate } from "tslib";
 import { CustomElement, ensureChildren, toggleAttribute } from '@tylertech/forge-core';
 import { BaseComponent } from '../core/base/base-component';
 import { ALLOWED_CHILDREN, BUTTON_CONSTANTS } from './button-constants';
-import { userInteractionListener } from '../core/utils/utils';
+import { createUserInteractionListener } from '../core/utils/utils';
 import { ForgeRipple } from '../ripple';
 /**
  * The custom element class behind the `<forge-button>` element.
@@ -37,6 +37,10 @@ let ButtonComponent = class ButtonComponent extends BaseComponent {
         }
     }
     disconnectedCallback() {
+        if (typeof this._destroyUserInteractionListener === 'function') {
+            this._destroyUserInteractionListener();
+            this._destroyUserInteractionListener = undefined;
+        }
         if (this._rippleInstance) {
             this._rippleInstance.destroy();
         }
@@ -102,12 +106,19 @@ let ButtonComponent = class ButtonComponent extends BaseComponent {
         this._deferRippleInitialization();
     }
     async _deferRippleInitialization() {
-        const type = await userInteractionListener(this._buttonElement);
-        if (!this._rippleInstance) {
-            this._rippleInstance = this._createRipple();
-            if (type === 'focusin') {
-                this._rippleInstance.handleFocus();
-            }
+        if (typeof this._destroyUserInteractionListener === 'function') {
+            this._destroyUserInteractionListener();
+        }
+        const { userInteraction, destroy } = createUserInteractionListener(this._buttonElement);
+        this._destroyUserInteractionListener = destroy;
+        const { type } = await userInteraction;
+        this._destroyUserInteractionListener = undefined;
+        if (!this.isConnected) {
+            return;
+        }
+        this._rippleInstance = this._createRipple();
+        if (type === 'focusin') {
+            this._rippleInstance.handleFocus();
         }
     }
     _createRipple() {

package/esm/button-area/button-area-adapter.d.ts

@@ -7,6 +7,7 @@ import { BaseAdapter, IBaseAdapter } from '../core';
 import { ForgeRippleCapableSurface } from '../ripple';
 import { IButtonAreaComponent } from './button-area';
 export interface IButtonAreaAdapter extends IBaseAdapter {
+    destroy(): void;
     setDisabled(value: boolean): void;
     addListener(type: string, listener: (event: Event) => void): void;
     removeListener(type: string, listener: (event: Event) => void): void;
@@ -25,10 +26,12 @@ export declare class ButtonAreaAdapter extends BaseAdapter<IButtonAreaComponent>
     private _buttonElement?;
     private _rippleInstance?;
     private _buttonObserver?;
+    private _destroyUserInteractionListener;
     constructor(component: IButtonAreaComponent);
     get root(): HTMLElement;
     get unbounded(): boolean | undefined;
     get disabled(): boolean | undefined;
+    destroy(): void;
     setDisabled(value: boolean): void;
     addListener(type: string, listener: (event: Event) => void): void;
     removeListener(type: string, listener: (event: Event) => void): void;
@@ -40,6 +43,5 @@ export declare class ButtonAreaAdapter extends BaseAdapter<IButtonAreaComponent>
     buttonIsDisabled(): boolean;
     requestDisabledButtonFrame(): void;
     createRipple(): Promise<void>;
-    private _userInteractionListener;
     private _isRootEvent;
 }

package/esm/button-area/button-area-adapter.js

@@ -4,7 +4,7 @@
  * License: Apache-2.0
  */
 import { addClass, getShadowElement, removeClass, toggleClass } from '@tylertech/forge-core';
-import { BaseAdapter, userInteractionListener } from '../core';
+import { BaseAdapter, createUserInteractionListener } from '../core';
 import { ForgeRipple, ForgeRippleFoundation } from '../ripple';
 import { BUTTON_AREA_CONSTANTS } from './button-area-constants';
 export class ButtonAreaAdapter extends BaseAdapter {
@@ -22,6 +22,12 @@ export class ButtonAreaAdapter extends BaseAdapter {
     get disabled() {
         return this.buttonIsDisabled();
     }
+    destroy() {
+        if (typeof this._destroyUserInteractionListener === 'function') {
+            this._destroyUserInteractionListener();
+            this._destroyUserInteractionListener = undefined;
+        }
+    }
     setDisabled(value) {
         var _a;
         toggleClass(this._rootElement, value, BUTTON_AREA_CONSTANTS.classes.DISABLED);
@@ -67,7 +73,13 @@ export class ButtonAreaAdapter extends BaseAdapter {
     }
     async createRipple() {
         if (!this._rippleInstance) {
-            const type = await this._userInteractionListener();
+            const { userInteraction, destroy } = await createUserInteractionListener(this._rootElement);
+            this._destroyUserInteractionListener = destroy;
+            const { type } = await userInteraction;
+            this._destroyUserInteractionListener = undefined;
+            if (!this.isConnected) {
+                return;
+            }
             if (!this._rippleInstance) {
                 const adapter = Object.assign(Object.assign({}, ForgeRipple.createAdapter(this)), { isSurfaceActive: () => { var _a, _b; return this._rootElement.matches(':active') || ((_b = (_a = this._buttonElement) === null || _a === void 0 ? void 0 : _a.matches(':active')) !== null && _b !== void 0 ? _b : false); }, isSurfaceDisabled: () => { var _a; return (_a = this.disabled) !== null && _a !== void 0 ? _a : true; }, isUnbounded: () => !!this.unbounded, registerInteractionHandler: (evtType, handler) => {
                         var _a;
@@ -97,9 +109,6 @@ export class ButtonAreaAdapter extends BaseAdapter {
             this._rippleInstance = undefined;
         }
     }
-    _userInteractionListener() {
-        return userInteractionListener(this._rootElement);
-    }
     _isRootEvent(evtType) {
         return ['touchstart', 'pointerdown', 'mousedown'].includes(evtType);
     }

package/esm/button-area/button-area-foundation.js

@@ -22,6 +22,7 @@ export class ButtonAreaFoundation {
         this._adapter.createRipple();
     }
     disconnect() {
+        this._adapter.destroy();
         this._adapter.removeListener('click', this._clickListener);
         this._adapter.removeSlotChangeListener(this._slotListener);
         this._adapter.stopButtonObserver();

package/esm/calendar/calendar-foundation.js

@@ -1170,21 +1170,16 @@ export class CalendarFoundation {
         const year = date.getFullYear();
         const month = date.getMonth();
         this._focusedDate = date;
-        if (this._year !== year || this._month !== month) {
-            this._month = month;
-            this._setMonth();
-            this._year = year;
-            this._setYear();
-            if (this._view !== 'date') {
-                this._closeMenu(false, setFocus);
-            }
-            else {
-                this._resetDateGrid();
-            }
-        }
-        else if (this._view !== 'date') {
+        this._month = month;
+        this._setMonth();
+        this._year = year;
+        this._setYear();
+        if (this._view !== 'date') {
             this._closeMenu(false, setFocus);
         }
+        else {
+            this._resetDateGrid();
+        }
         this._adapter.setActiveDate(date, setFocus, this._preventFocus);
         this._emitFocusChangeEvent(this._focusedDate);
     }
@@ -1471,9 +1466,13 @@ export class CalendarFoundation {
     }
     _applyMin() {
         this._adapter.toggleHostAttribute(CALENDAR_CONSTANTS.attributes.MIN, !!this._minAttribute, this._minAttribute);
-        if (this._min && (this._min.getMonth() > this._month || this._min.getFullYear() > this._year)) {
-            this._year = this._min.getFullYear();
-            this._month = this._min.getMonth();
+        if (this._min) {
+            const minFirstOfMonth = new Date(this._min.getFullYear(), this._min.getMonth(), 1);
+            const currentFirstOfMonth = new Date(this._year, this._month, 1);
+            if (minFirstOfMonth > currentFirstOfMonth) {
+                this._year = this._min.getFullYear();
+                this._month = this._min.getMonth();
+            }
         }
         if (this._isInitialized) {
             this._applyDisabledDates();
@@ -1487,8 +1486,13 @@ export class CalendarFoundation {
     }
     _applyMax() {
         this._adapter.toggleHostAttribute(CALENDAR_CONSTANTS.attributes.MAX, !!this._maxAttribute, this._maxAttribute);
-        if (this._max && this._max.getMonth() < this._month) {
-            this._month = this._max.getMonth();
+        if (this._max) {
+            const maxFirstOfMonth = new Date(this._max.getFullYear(), this._max.getMonth(), 1);
+            const currentFirstOfMonth = new Date(this._year, this._month, 1);
+            if (maxFirstOfMonth < currentFirstOfMonth) {
+                this._year = this._max.getFullYear();
+                this._month = this._max.getMonth();
+            }
         }
         if (this._isInitialized) {
             this._applyDisabledDates();

package/esm/calendar/calendar.d.ts

@@ -53,6 +53,7 @@ export declare class CalendarComponent extends HTMLElement implements ICalendarC
     connectedCallback(): void;
     disconnectedCallback(): void;
     attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+    /** readonly */
     activeDate: Date;
     allowSingleDateRange: boolean;
     clearButton: boolean;

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

@@ -35,6 +35,7 @@ export declare class CheckboxAdapter extends BaseAdapter<ICheckboxComponent> imp
     private _inputBlurHandler;
     private _inputMutationObserver;
     private _rippleInstance;
+    private _destroyUserInteractionListener;
     constructor(component: ICheckboxComponent);
     get root(): Element;
     get unbounded(): boolean | undefined;

package/esm/checkbox/checkbox-adapter.js

@@ -4,7 +4,7 @@
  * License: Apache-2.0
  */
 import { addClass, getShadowElement, removeClass } from '@tylertech/forge-core';
-import { userInteractionListener } from '../core';
+import { createUserInteractionListener } from '../core';
 import { BaseAdapter } from '../core/base/base-adapter';
 import { ForgeRipple, ForgeRippleFoundation } from '../ripple';
 import { CHECKBOX_CONSTANTS } from './checkbox-constants';
@@ -28,12 +28,19 @@ export class CheckboxAdapter extends BaseAdapter {
         this._deferRippleInitialization();
     }
     async _deferRippleInitialization() {
-        const type = await userInteractionListener(this._rootElement);
-        if (!this._rippleInstance) {
-            this._rippleInstance = this._createRipple();
-            if (type === 'focusin') {
-                this._rippleInstance.handleFocus();
-            }
+        if (typeof this._destroyUserInteractionListener === 'function') {
+            this._destroyUserInteractionListener();
+        }
+        const { userInteraction, destroy } = createUserInteractionListener(this._rootElement);
+        this._destroyUserInteractionListener = destroy;
+        const { type } = await userInteraction;
+        this._destroyUserInteractionListener = undefined;
+        if (!this.isConnected) {
+            return;
+        }
+        this._rippleInstance = this._createRipple();
+        if (type === 'focusin') {
+            this._rippleInstance.handleFocus();
         }
     }
     setDense(value) {
@@ -71,6 +78,10 @@ export class CheckboxAdapter extends BaseAdapter {
         this._component.removeAttribute(name);
     }
     disconnect() {
+        if (typeof this._destroyUserInteractionListener === 'function') {
+            this._destroyUserInteractionListener();
+            this._destroyUserInteractionListener = undefined;
+        }
         if (this._labelElement) {
             this._labelElement.removeAttribute(CHECKBOX_CONSTANTS.attributes.SLOT);
         }

package/esm/core/base/base-adapter.d.ts

@@ -4,7 +4,8 @@
  * License: Apache-2.0
  */
 import { IBaseComponent } from './base-component';
-export interface IBaseAdapter {
+export interface IBaseAdapter<T extends HTMLElement = HTMLElement> {
+    readonly hostElement: T;
     readonly isConnected: boolean;
     removeHostAttribute(name: string): void;
     getHostAttribute(name: string): string | null;
@@ -21,9 +22,10 @@ export interface IBaseAdapter {
     setBodyAttribute(name: string, value: string): void;
     removeBodyAttribute(name: string): void;
 }
-export declare class BaseAdapter<T extends IBaseComponent> implements IBaseAdapter {
+export declare class BaseAdapter<T extends IBaseComponent> implements IBaseAdapter<T> {
     protected _component: T;
     constructor(_component: T);
+    get hostElement(): T;
     getHostAttribute(name: string): string | null;
     setHostAttribute(name: string, value?: string): void;
     removeHostAttribute(name: string): void;

package/esm/core/base/base-adapter.js

@@ -8,6 +8,9 @@ export class BaseAdapter {
     constructor(_component) {
         this._component = _component;
     }
+    get hostElement() {
+        return this._component;
+    }
     getHostAttribute(name) {
         return this._component.getAttribute(name);
     }

package/esm/core/utils/utils.d.ts

@@ -18,11 +18,14 @@ export declare function highlightTextHTML(label: string, highlightText: string):
  * @param capture Whether to use capturing listeners or not.
  * @returns A `Promise` that will be resolved when either of the listeners has executed.
  */
-export declare function userInteractionListener(element: HTMLElement, { capture, pointerenter, focusin }?: {
+export declare function createUserInteractionListener(element: HTMLElement, { capture, pointerenter, focusin }?: {
     capture?: boolean | undefined;
     pointerenter?: boolean | undefined;
     focusin?: boolean | undefined;
-}): Promise<'pointerenter' | 'focusin'>;
+}): {
+    userInteraction: Promise<Event>;
+    destroy: () => void;
+};
 /**
  * Converts a percent value to pixels.
  * @param amount A percent value.

package/esm/core/utils/utils.js

@@ -33,20 +33,34 @@ export function highlightTextHTML(label, highlightText) {
  * @param capture Whether to use capturing listeners or not.
  * @returns A `Promise` that will be resolved when either of the listeners has executed.
  */
-export function userInteractionListener(element, { capture = true, pointerenter = true, focusin = true } = {}) {
-    return new Promise(resolve => {
+export function createUserInteractionListener(element, { capture = true, pointerenter = true, focusin = true } = {}) {
+    let destroyFn;
+    const destroy = () => {
+        if (typeof destroyFn === 'function') {
+            destroyFn();
+        }
+    };
+    const userInteraction = new Promise(resolve => {
         const listenerOpts = { once: true, capture };
-        const handlePointerenter = () => {
+        const handlePointerenter = (evt) => {
             if (focusin) {
                 element.removeEventListener('focusin', handleFocusin, listenerOpts);
             }
-            resolve('pointerenter');
+            resolve(evt);
+        };
+        const handleFocusin = (evt) => {
+            if (pointerenter) {
+                element.removeEventListener('pointerenter', handlePointerenter, listenerOpts);
+            }
+            resolve(evt);
         };
-        const handleFocusin = () => {
+        destroyFn = () => {
             if (pointerenter) {
                 element.removeEventListener('pointerenter', handlePointerenter, listenerOpts);
             }
-            resolve('focusin');
+            if (focusin) {
+                element.removeEventListener('focusin', handleFocusin, listenerOpts);
+            }
         };
         if (pointerenter) {
             element.addEventListener('pointerenter', handlePointerenter, listenerOpts);
@@ -55,6 +69,7 @@ export function userInteractionListener(element, { capture = true, pointerenter
             element.addEventListener('focusin', handleFocusin, listenerOpts);
         }
     });
+    return { userInteraction, destroy };
 }
 /**
  * Converts a percent value to pixels.

package/esm/date-picker/base/base-date-picker-adapter.js

@@ -37,9 +37,7 @@ export class BaseDatePickerAdapter extends BaseAdapter {
     }
     attachCalendar(calendarConfig, dropdownConfig) {
         var _a, _b, _c;
-        if (this._calendarDropdown) {
-            (_a = this._calendarDropdown) === null || _a === void 0 ? void 0 : _a.destroy();
-        }
+        (_a = this._calendarDropdown) === null || _a === void 0 ? void 0 : _a.destroy();
         this._initializeCalendarDropdown();
         if (!this._calendarDropdown) {
             throw new Error('CalendarDropdown was not initialized.');

package/esm/date-picker/base/base-date-picker-foundation.js

@@ -132,6 +132,12 @@ export class BaseDatePickerFoundation {
             closeCallback: this._dropdownCloseListener,
             activeChangeCallback: this._activeChangeListener
         };
+        // If the max date is in the past, set the calendar to the min date
+        const currentDate = new Date().getTime();
+        if (this._min && this._max && this._max.getTime() < currentDate) {
+            calendarConfig.year = this._min.getFullYear();
+            calendarConfig.month = this._min.getMonth();
+        }
         this._adapter.attachCalendar(calendarConfig, dropdownConfig);
         this._adapter.addDateSelectListener(this._dateSelectListener);
         this._open = true;

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

@@ -26,6 +26,7 @@ export interface IDialogAdapter extends IBaseAdapter {
     addRootClass(name: string): void;
     setFullscreen(value: boolean): void;
     setMoveable(value: boolean): void;
+    tryLayoutRippleChildren(): void;
     setMoveTarget(selector: string): boolean;
     setMoveTargetHandler(type: string, listener: (evt: MouseEvent) => void): void;
     removeDragTargetHandler(type: string, listener: (evt: MouseEvent) => void): void;
@@ -63,6 +64,7 @@ export declare class DialogAdapter extends BaseAdapter<IDialogComponent> impleme
     addRootClass(name: string): void;
     setFullscreen(value: boolean): void;
     setMoveable(value: boolean): void;
+    tryLayoutRippleChildren(): void;
     setMoveTarget(selector: string): boolean;
     setMoveTargetHandler(type: string, listener: (evt: MouseEvent) => void): void;
     removeDragTargetHandler(type: string, listener: (evt: MouseEvent) => void): void;

package/esm/dialog/dialog-adapter.js

@@ -5,7 +5,11 @@
  */
 import { deepQuerySelectorAll, getActiveElement, getShadowElement, removeElement, toggleClass } from '@tylertech/forge-core';
 import { BACKDROP_CONSTANTS } from '../backdrop';
+import { CHECKBOX_CONSTANTS } from '../checkbox/checkbox-constants';
 import { BaseAdapter } from '../core/base/base-adapter';
+import { ICON_BUTTON_CONSTANTS } from '../icon-button/icon-button-constants';
+import { RADIO_CONSTANTS } from '../radio/radio-constants';
+import { SWITCH_CONSTANTS } from '../switch/switch-constants';
 import { DIALOG_CONSTANTS } from './dialog-constants';
 /**
  * Provides facilities for interacting with the internal DOM of `DialogComponent`.
@@ -103,6 +107,16 @@ export class DialogAdapter extends BaseAdapter {
     setMoveable(value) {
         toggleClass(this._containerElement, value, DIALOG_CONSTANTS.classes.MOVEABLE);
     }
+    tryLayoutRippleChildren() {
+        const selectors = [
+            ICON_BUTTON_CONSTANTS.elementName,
+            SWITCH_CONSTANTS.elementName,
+            CHECKBOX_CONSTANTS.elementName,
+            RADIO_CONSTANTS.elementName
+        ];
+        const rippleChildren = deepQuerySelectorAll(this._component, selectors.join(':focus-within,'));
+        rippleChildren.filter(el => typeof el.layout === 'function').forEach(el => el.layout());
+    }
     setMoveTarget(selector) {
         if (!selector) {
             return false;

package/esm/dialog/dialog-foundation.js

@@ -168,6 +168,7 @@ export class DialogFoundation {
         this._adapter.deregisterTransitionEndHandler(this._transitionEndHandler);
         this._adapter.setAnimating(false);
         this._adapter.emitHostEvent(DIALOG_CONSTANTS.events.READY);
+        this._adapter.tryLayoutRippleChildren();
         if (this._moveable) {
             this._initMoveTarget();
         }

package/esm/icon-button/icon-button.d.ts

@@ -33,6 +33,8 @@ export declare class IconButtonComponent extends BaseComponent implements IIconB
     private _dense;
     private _densityLevel;
     private _toggleHandler;
+    private _buttonAttrMutationObserver;
+    private _destroyUserInteractionListener;
     constructor();
     connectedCallback(): void;
     disconnectedCallback(): void;

package/esm/icon-button/icon-button.js

@@ -7,7 +7,7 @@ import { __decorate } from "tslib";
 import { coerceBoolean, coerceNumber, CustomElement, emitEvent, ensureChild, toggleClass } from '@tylertech/forge-core';
 import { BaseComponent } from '../core/base/base-component';
 import { ForgeRipple } from '../ripple';
-import { userInteractionListener } from '../core/utils';
+import { createUserInteractionListener } from '../core/utils';
 import { ICON_BUTTON_CONSTANTS } from './icon-button-constants';
 /**
  * The custom element class behind the `<forge-icon-button>` element.
@@ -39,6 +39,13 @@ let IconButtonComponent = class IconButtonComponent extends BaseComponent {
         }
     }
     disconnectedCallback() {
+        if (typeof this._destroyUserInteractionListener === 'function') {
+            this._destroyUserInteractionListener();
+            this._destroyUserInteractionListener = undefined;
+        }
+        if (this._buttonAttrMutationObserver) {
+            this._buttonAttrMutationObserver.disconnect();
+        }
         if (this._rippleInstance) {
             this._rippleInstance.destroy();
         }
@@ -123,6 +130,16 @@ let IconButtonComponent = class IconButtonComponent extends BaseComponent {
             this._toggleValue();
             emitEvent(this, ICON_BUTTON_CONSTANTS.events.CHANGE, this._isOn, true);
         };
+        // Watch attributes on the `<button>` element
+        this._buttonAttrMutationObserver = new MutationObserver(mutationList => {
+            var _a;
+            if (mutationList.some(mutation => mutation.attributeName === 'disabled')) {
+                if (this._buttonElement.hasAttribute('disabled')) {
+                    (_a = this._rippleInstance) === null || _a === void 0 ? void 0 : _a.handleBlur();
+                }
+            }
+        });
+        this._buttonAttrMutationObserver.observe(this._buttonElement, { attributes: true, attributeFilter: ['disabled'] });
         if (this._toggle) {
             this._initializeToggle();
         }
@@ -130,12 +147,19 @@ let IconButtonComponent = class IconButtonComponent extends BaseComponent {
         this._deferRippleInitialization();
     }
     async _deferRippleInitialization() {
-        const type = await userInteractionListener(this._buttonElement);
-        if (!this._rippleInstance) {
-            this._rippleInstance = this._createRipple();
-            if (type === 'focusin') {
-                this._rippleInstance.handleFocus();
-            }
+        if (typeof this._destroyUserInteractionListener === 'function') {
+            this._destroyUserInteractionListener();
+        }
+        const { userInteraction, destroy } = createUserInteractionListener(this._buttonElement);
+        this._destroyUserInteractionListener = destroy;
+        const { type } = await userInteraction;
+        this._destroyUserInteractionListener = undefined;
+        if (!this.isConnected) {
+            return;
+        }
+        this._rippleInstance = this._createRipple();
+        if (type === 'focusin') {
+            this._rippleInstance.handleFocus();
         }
     }
     _createRipple() {

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

@@ -6,11 +6,10 @@
 import { BaseAdapter, IBaseAdapter } from '../../core/base/base-adapter';
 import { IListItemComponent } from '../list-item';
 import { IListComponent } from './list';
-export interface IListAdapter extends IBaseAdapter {
+export interface IListAdapter extends IBaseAdapter<IListComponent> {
     initializeAccessibility(): void;
     addListener(type: string, listener: (evt: Event) => void): void;
     removeListener(type: string, listener: (evt: Event) => void): void;
-    getListItems(): IListItemComponent[];
     focusNextListItem(): void;
     focusPreviousListItem(): void;
     focusFirstListItem(): void;
@@ -36,10 +35,6 @@ export declare class ListAdapter extends BaseAdapter<IListComponent> implements
      * @param {Function} listener The event callback.
      */
     removeListener(type: string, listener: (evt: Event) => void): void;
-    /**
-     * Returns all child `<forge-list-item>` elements.
-     */
-    getListItems(): IListItemComponent[];
     /**
      * Sets focus to the next item in the list.
      */
@@ -58,4 +53,5 @@ export declare class ListAdapter extends BaseAdapter<IListComponent> implements
     focusLastListItem(): void;
     setSelectedListItems(values: any[]): void;
     updateListItems(cb: (li: IListItemComponent) => void): void;
+    private _getOwnListItems;
 }

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

@@ -3,7 +3,7 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { deepQuerySelectorAll, getActiveElement } from '@tylertech/forge-core';
+import { deepQuerySelectorAll } from '@tylertech/forge-core';
 import { BaseAdapter } from '../../core/base/base-adapter';
 import { LIST_ITEM_CONSTANTS } from '../list-item';
 import { LIST_CONSTANTS } from './list-constants';
@@ -35,19 +35,13 @@ export class ListAdapter extends BaseAdapter {
     removeListener(type, listener) {
         this._component.removeEventListener(type, listener);
     }
-    /**
-     * Returns all child `<forge-list-item>` elements.
-     */
-    getListItems() {
-        return Array.from(this._component.children).filter(child => child.tagName === LIST_ITEM_CONSTANTS.elementName.toUpperCase());
-    }
     /**
      * Sets focus to the next item in the list.
      */
     focusNextListItem() {
-        const listItems = deepQuerySelectorAll(this._component, LIST_CONSTANTS.selectors.FOCUSABLE_LIST_ITEMS, false);
-        if (listItems && listItems.length > 0) {
-            const focusedListItemIndex = listItems.indexOf(getActiveElement(this._component.ownerDocument));
+        const listItems = this._getOwnListItems();
+        if (listItems.length > 0) {
+            const focusedListItemIndex = listItems.findIndex(li => li.matches(':focus-within'));
             const nextIndex = focusedListItemIndex < listItems.length - 1 ? focusedListItemIndex + 1 : 0;
             if (nextIndex <= listItems.length - 1) {
                 listItems[nextIndex].focus();
@@ -58,9 +52,9 @@ export class ListAdapter extends BaseAdapter {
      * Sets focus to the previous item in the list.
      */
     focusPreviousListItem() {
-        const listItems = deepQuerySelectorAll(this._component, LIST_CONSTANTS.selectors.FOCUSABLE_LIST_ITEMS, false);
-        if (listItems && listItems.length > 0) {
-            const focusedListItemIndex = listItems.indexOf(getActiveElement(this._component.ownerDocument));
+        const listItems = this._getOwnListItems();
+        if (listItems.length > 0) {
+            const focusedListItemIndex = listItems.findIndex(li => li.matches(':focus-within'));
             const nextIndex = focusedListItemIndex > 0 ? focusedListItemIndex - 1 : listItems.length - 1;
             if (nextIndex >= 0) {
                 listItems[nextIndex].focus();
@@ -71,8 +65,8 @@ export class ListAdapter extends BaseAdapter {
      * Sets focus to the first item in the list.
      */
     focusFirstListItem() {
-        const listItems = deepQuerySelectorAll(this._component, LIST_CONSTANTS.selectors.FOCUSABLE_LIST_ITEMS, false);
-        if (listItems && listItems.length > 0) {
+        const listItems = this._getOwnListItems();
+        if (listItems.length > 0) {
             listItems[0].focus();
         }
     }
@@ -80,8 +74,8 @@ export class ListAdapter extends BaseAdapter {
      * Sets focus to the last item in the list.
      */
     focusLastListItem() {
-        const listItems = deepQuerySelectorAll(this._component, LIST_CONSTANTS.selectors.FOCUSABLE_LIST_ITEMS, false);
-        if (listItems && listItems.length > 0) {
+        const listItems = this._getOwnListItems();
+        if (listItems.length > 0) {
             listItems[listItems.length - 1].focus();
         }
     }
@@ -94,6 +88,23 @@ export class ListAdapter extends BaseAdapter {
         }
     }
     updateListItems(cb) {
-        this.getListItems().forEach(li => cb(li));
+        this._getOwnListItems().forEach(li => cb(li));
+    }
+    _getOwnListItems() {
+        // Find all deeply nested list items
+        const allChildListItems = deepQuerySelectorAll(this._component, LIST_ITEM_CONSTANTS.elementName);
+        // Get all list items that are scoped to this component only (not within sub-lists).
+        const scopedListItems = [];
+        const listener = evt => {
+            const composedPath = evt.composedPath();
+            const composedBeforeUs = composedPath.slice(0, composedPath.indexOf(this._component));
+            if (!composedBeforeUs.some((el) => el.localName === LIST_CONSTANTS.elementName.toLowerCase())) {
+                scopedListItems.push(evt.target);
+            }
+        };
+        this._component.addEventListener(LIST_CONSTANTS.events.SCOPE_TEST, listener);
+        allChildListItems.forEach(li => li.dispatchEvent(new CustomEvent(LIST_CONSTANTS.events.SCOPE_TEST, { bubbles: true, composed: true })));
+        this._component.removeEventListener(LIST_CONSTANTS.events.SCOPE_TEST, listener);
+        return scopedListItems;
     }
 }

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

@@ -12,7 +12,7 @@ export declare const LIST_CONSTANTS: {
         INDENTED: string;
         SELECTED_VALUE: string;
     };
-    selectors: {
-        FOCUSABLE_LIST_ITEMS: string;
+    events: {
+        readonly SCOPE_TEST: "forge-list-item-scope-test";
     };
 };