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

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

@@ -4,54 +4,131 @@
  * License: Apache-2.0
  */
 import { __decorate } from "tslib";
-import { CustomElement, attachShadowTemplate, requireParent, elementParents, coerceBoolean, FoundationProperty } from '@tylertech/forge-core';
+import { CustomElement, attachShadowTemplate, FoundationProperty, coerceBoolean } from '@tylertech/forge-core';
 import { ListItemAdapter } from './list-item-adapter';
 import { ListItemFoundation } from './list-item-foundation';
 import { LIST_ITEM_CONSTANTS } from './list-item-constants';
-import { LIST_CONSTANTS } from '../list/list-constants';
-import { BaseComponent } from '../../core/base/base-component';
-const defaultTemplate = '<template><div class=\"forge-list-item\" tabindex=\"0\" part=\"root\"><slot name=\"leading\"></slot><slot name=\"avatar\"></slot><div class=\"forge-list-item__text\" part=\"text-container\"><slot></slot><slot name=\"title\"></slot><slot name=\"subtitle\"></slot><slot name=\"tertiary-title\"></slot><slot></slot></div><slot name=\"trailing\"></slot></div></template>';
-const styles = '@-webkit-keyframes mdc-ripple-fg-radius-in{from{-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1);-webkit-transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1);transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1)}to{-webkit-transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1));transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}}@keyframes mdc-ripple-fg-radius-in{from{-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1);-webkit-transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1);transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1)}to{-webkit-transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1));transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}}@-webkit-keyframes mdc-ripple-fg-opacity-in{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:0}to{opacity:var(--mdc-ripple-fg-opacity, 0)}}@keyframes mdc-ripple-fg-opacity-in{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:0}to{opacity:var(--mdc-ripple-fg-opacity, 0)}}@-webkit-keyframes mdc-ripple-fg-opacity-out{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:var(--mdc-ripple-fg-opacity, 0)}to{opacity:0}}@keyframes mdc-ripple-fg-opacity-out{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:var(--mdc-ripple-fg-opacity, 0)}to{opacity:0}}.mdc-ripple-surface{--mdc-ripple-fg-size:0;--mdc-ripple-left:0;--mdc-ripple-top:0;--mdc-ripple-fg-scale:1;--mdc-ripple-fg-translate-end:0;--mdc-ripple-fg-translate-start:0;-webkit-tap-highlight-color:transparent;will-change:transform,opacity;position:relative;outline:0;overflow:hidden}.mdc-ripple-surface::after,.mdc-ripple-surface::before{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:\"\"}.mdc-ripple-surface::before{-webkit-transition:opacity 15ms linear,background-color 15ms linear;transition:opacity 15ms linear,background-color 15ms linear;z-index:1;z-index:var(--mdc-ripple-z-index,1)}.mdc-ripple-surface::after{z-index:0;z-index:var(--mdc-ripple-z-index,0)}.mdc-ripple-surface.mdc-ripple-upgraded::before{-webkit-transform:scale(var(--mdc-ripple-fg-scale,1));transform:scale(var(--mdc-ripple-fg-scale,1))}.mdc-ripple-surface.mdc-ripple-upgraded::after{top:0;left:0;-webkit-transform:scale(0);transform:scale(0);-webkit-transform-origin:center center;transform-origin:center center}.mdc-ripple-surface.mdc-ripple-upgraded--unbounded::after{top:var(--mdc-ripple-top,0);left:var(--mdc-ripple-left,0)}.mdc-ripple-surface.mdc-ripple-upgraded--foreground-activation::after{-webkit-animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards;animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards}.mdc-ripple-surface.mdc-ripple-upgraded--foreground-deactivation::after{-webkit-animation:mdc-ripple-fg-opacity-out 150ms;animation:mdc-ripple-fg-opacity-out 150ms;-webkit-transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1));transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}.mdc-ripple-surface::after,.mdc-ripple-surface::before{top:calc(50% - 100%);left:calc(50% - 100%);width:200%;height:200%}.mdc-ripple-surface.mdc-ripple-upgraded::after{width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.mdc-ripple-surface[data-mdc-ripple-is-unbounded],.mdc-ripple-upgraded--unbounded{overflow:visible}.mdc-ripple-surface[data-mdc-ripple-is-unbounded]::after,.mdc-ripple-surface[data-mdc-ripple-is-unbounded]::before,.mdc-ripple-upgraded--unbounded::after,.mdc-ripple-upgraded--unbounded::before{top:calc(50% - 50%);left:calc(50% - 50%);width:100%;height:100%}.mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::after,.mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::before,.mdc-ripple-upgraded--unbounded.mdc-ripple-upgraded::after,.mdc-ripple-upgraded--unbounded.mdc-ripple-upgraded::before{top:var(--mdc-ripple-top,calc(50% - 50%));left:var(--mdc-ripple-left,calc(50% - 50%));width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::after,.mdc-ripple-upgraded--unbounded.mdc-ripple-upgraded::after{width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.mdc-ripple-surface::after,.mdc-ripple-surface::before{background-color:#000;background-color:var(--mdc-ripple-color,#000)}.mdc-ripple-surface.mdc-ripple-surface--hover::before,.mdc-ripple-surface:hover::before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity, .04)}.mdc-ripple-surface.mdc-ripple-upgraded--background-focused::before,.mdc-ripple-surface:not(.mdc-ripple-upgraded):focus::before{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity, .12)}.mdc-ripple-surface:not(.mdc-ripple-upgraded)::after{-webkit-transition:opacity 150ms linear;transition:opacity 150ms linear}.mdc-ripple-surface:not(.mdc-ripple-upgraded):active::after{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity, .12)}.mdc-ripple-surface.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.12)}.mdc-ripple-surface::after,.mdc-ripple-surface::before{--mdc-ripple-color:var(--mdc-theme-on-surface)}.forge-list-item{min-height:32px;min-height:var(--forge-list-item-min-height,32px);max-height:none;max-height:var(--forge-list-item-max-height,none);height:32px;height:var(--forge-list-item-height,32px);padding:8px 16px;padding:var(--forge-list-item-padding,8px 16px);margin-left:0;margin-left:var(--forge-list-item-indent,0);-webkit-box-align:center;align-items:center;-webkit-box-align:var(--forge-list-item-align-items,center);align-items:var(--forge-list-item-align-items,center);position:relative;display:-webkit-box;display:flex;-webkit-box-pack:start;justify-content:flex-start;overflow:hidden}.forge-list-item:focus{outline:0}.forge-list-item ::slotted([slot=leading]),.forge-list-item ::slotted([slot=trailing]){font-size:1.5rem}.forge-list-item ::slotted([slot=leading]){color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-background,rgba(0,0,0,.54));margin-left:0;margin-left:var(--forge-list-item-leading-margin-left,0);margin-right:32px;margin-right:var(--forge-list-item-leading-margin-right,32px);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}.forge-list-item ::slotted([slot=trailing]){color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-background,rgba(0,0,0,.54))}.forge-list-item ::slotted([slot=avatar]){color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-background,rgba(0,0,0,.54));margin-left:0;margin-left:var(--forge-list-item-leading-margin-left,0);margin-right:32px;margin-right:var(--forge-list-item-leading-margin-right,32px);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;margin-left:0;margin-right:16px;min-width:40px;min-height:40px;border-radius:50%;display:inline-flex;background-color:rgba(0,0,0,.54);background-color:var(--mdc-theme-text-secondary-on-background,rgba(0,0,0,.54));color:#fff;color:var(--mdc-theme-on-primary,#fff)}.forge-list-item:not(.forge-list-item--static):not(.forge-list-item--disabled).forge-list-item{--mdc-ripple-fg-size:0;--mdc-ripple-left:0;--mdc-ripple-top:0;--mdc-ripple-fg-scale:1;--mdc-ripple-fg-translate-end:0;--mdc-ripple-fg-translate-start:0;-webkit-tap-highlight-color:transparent;will-change:transform,opacity}.forge-list-item:not(.forge-list-item--static):not(.forge-list-item--disabled).forge-list-item::after,.forge-list-item:not(.forge-list-item--static):not(.forge-list-item--disabled).forge-list-item::before{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:\"\"}.forge-list-item:not(.forge-list-item--static):not(.forge-list-item--disabled).forge-list-item::before{-webkit-transition:opacity 15ms linear,background-color 15ms linear;transition:opacity 15ms linear,background-color 15ms linear;z-index:1;z-index:var(--mdc-ripple-z-index,1)}.forge-list-item:not(.forge-list-item--static):not(.forge-list-item--disabled).forge-list-item::after{z-index:0;z-index:var(--mdc-ripple-z-index,0)}.forge-list-item:not(.forge-list-item--static):not(.forge-list-item--disabled).forge-list-item.mdc-ripple-upgraded::before{-webkit-transform:scale(var(--mdc-ripple-fg-scale,1));transform:scale(var(--mdc-ripple-fg-scale,1))}.forge-list-item:not(.forge-list-item--static):not(.forge-list-item--disabled).forge-list-item.mdc-ripple-upgraded::after{top:0;left:0;-webkit-transform:scale(0);transform:scale(0);-webkit-transform-origin:center center;transform-origin:center center}.forge-list-item:not(.forge-list-item--static):not(.forge-list-item--disabled).forge-list-item.mdc-ripple-upgraded--unbounded::after{top:var(--mdc-ripple-top,0);left:var(--mdc-ripple-left,0)}.forge-list-item:not(.forge-list-item--static):not(.forge-list-item--disabled).forge-list-item.mdc-ripple-upgraded--foreground-activation::after{-webkit-animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards;animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards}.forge-list-item:not(.forge-list-item--static):not(.forge-list-item--disabled).forge-list-item.mdc-ripple-upgraded--foreground-deactivation::after{-webkit-animation:mdc-ripple-fg-opacity-out 150ms;animation:mdc-ripple-fg-opacity-out 150ms;-webkit-transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1));transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}.forge-list-item:not(.forge-list-item--static):not(.forge-list-item--disabled).forge-list-item::after,.forge-list-item:not(.forge-list-item--static):not(.forge-list-item--disabled).forge-list-item::before{top:calc(50% - 100%);left:calc(50% - 100%);width:200%;height:200%}.forge-list-item:not(.forge-list-item--static):not(.forge-list-item--disabled).forge-list-item.mdc-ripple-upgraded::after{width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.forge-list-item:not(.forge-list-item--static):not(.forge-list-item--disabled).forge-list-item::after,.forge-list-item:not(.forge-list-item--static):not(.forge-list-item--disabled).forge-list-item::before{background-color:#000;background-color:var(--mdc-ripple-color,var(--mdc-theme-on-surface,#000))}.forge-list-item:not(.forge-list-item--static):not(.forge-list-item--disabled).forge-list-item.mdc-ripple-surface--hover::before,.forge-list-item:not(.forge-list-item--static):not(.forge-list-item--disabled).forge-list-item:hover::before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity, .04)}.forge-list-item:not(.forge-list-item--static):not(.forge-list-item--disabled).forge-list-item.mdc-ripple-upgraded--background-focused::before,.forge-list-item:not(.forge-list-item--static):not(.forge-list-item--disabled).forge-list-item:not(.mdc-ripple-upgraded):focus::before{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity, .12)}.forge-list-item:not(.forge-list-item--static):not(.forge-list-item--disabled).forge-list-item:not(.mdc-ripple-upgraded)::after{-webkit-transition:opacity 150ms linear;transition:opacity 150ms linear}.forge-list-item:not(.forge-list-item--static):not(.forge-list-item--disabled).forge-list-item:not(.mdc-ripple-upgraded):active::after{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity, .12)}.forge-list-item:not(.forge-list-item--static):not(.forge-list-item--disabled).forge-list-item.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.12)}.forge-list-item:not(.forge-list-item--static):not(.forge-list-item--disabled).forge-list-item--activated::before{opacity:.12;opacity:var(--mdc-ripple-activated-opacity, .12)}.forge-list-item:not(.forge-list-item--static):not(.forge-list-item--disabled).forge-list-item--activated::after,.forge-list-item:not(.forge-list-item--static):not(.forge-list-item--disabled).forge-list-item--activated::before{background-color:#6200ee;background-color:var(--mdc-ripple-color,var(--mdc-theme-primary,#6200ee))}.forge-list-item:not(.forge-list-item--static):not(.forge-list-item--disabled).forge-list-item--activated.mdc-ripple-surface--hover::before,.forge-list-item:not(.forge-list-item--static):not(.forge-list-item--disabled).forge-list-item--activated:hover::before{opacity:.16;opacity:var(--mdc-ripple-hover-opacity, .16)}.forge-list-item:not(.forge-list-item--static):not(.forge-list-item--disabled).forge-list-item--activated.mdc-ripple-upgraded--background-focused::before,.forge-list-item:not(.forge-list-item--static):not(.forge-list-item--disabled).forge-list-item--activated:not(.mdc-ripple-upgraded):focus::before{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.24;opacity:var(--mdc-ripple-focus-opacity, .24)}.forge-list-item:not(.forge-list-item--static):not(.forge-list-item--disabled).forge-list-item--activated:not(.mdc-ripple-upgraded)::after{-webkit-transition:opacity 150ms linear;transition:opacity 150ms linear}.forge-list-item:not(.forge-list-item--static):not(.forge-list-item--disabled).forge-list-item--activated:not(.mdc-ripple-upgraded):active::after{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.24;opacity:var(--mdc-ripple-press-opacity, .24)}.forge-list-item:not(.forge-list-item--static):not(.forge-list-item--disabled).forge-list-item--activated.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.24)}.forge-list-item:not(.forge-list-item--static):not(.forge-list-item--disabled).forge-list-item--selected::before{opacity:.08;opacity:var(--mdc-ripple-selected-opacity, .08)}.forge-list-item:not(.forge-list-item--static):not(.forge-list-item--disabled).forge-list-item--selected::after,.forge-list-item:not(.forge-list-item--static):not(.forge-list-item--disabled).forge-list-item--selected::before{background-color:#6200ee;background-color:var(--mdc-ripple-color,var(--mdc-theme-primary,#6200ee))}.forge-list-item:not(.forge-list-item--static):not(.forge-list-item--disabled).forge-list-item--selected.mdc-ripple-surface--hover::before,.forge-list-item:not(.forge-list-item--static):not(.forge-list-item--disabled).forge-list-item--selected:hover::before{opacity:.12;opacity:var(--mdc-ripple-hover-opacity, .12)}.forge-list-item:not(.forge-list-item--static):not(.forge-list-item--disabled).forge-list-item--selected.mdc-ripple-upgraded--background-focused::before,.forge-list-item:not(.forge-list-item--static):not(.forge-list-item--disabled).forge-list-item--selected:not(.mdc-ripple-upgraded):focus::before{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.2;opacity:var(--mdc-ripple-focus-opacity, .2)}.forge-list-item:not(.forge-list-item--static):not(.forge-list-item--disabled).forge-list-item--selected:not(.mdc-ripple-upgraded)::after{-webkit-transition:opacity 150ms linear;transition:opacity 150ms linear}.forge-list-item:not(.forge-list-item--static):not(.forge-list-item--disabled).forge-list-item--selected:not(.mdc-ripple-upgraded):active::after{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.2;opacity:var(--mdc-ripple-press-opacity, .2)}.forge-list-item:not(.forge-list-item--static):not(.forge-list-item--disabled).forge-list-item--selected.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.2)}.forge-list-item:not(.forge-list-item--static):not(.forge-list-item--disabled).forge-list-item--selected:focus:hover.mdc-ripple-upgraded--background-focused:not(.mdc-ripple-upgraded--foreground-activation)::before{opacity:.28}.forge-list-item:not(.forge-list-item--static):not(.forge-list-item--disabled).forge-list-item--active:not(.forge-list-item--selected):not(.forge-list-item--activated):not(.mdc-ripple-upgraded--foreground-activation)::before,.forge-list-item:not(.forge-list-item--static):not(.forge-list-item--disabled).forge-list-item:focus:not(.forge-list-item--selected):not(.forge-list-item--activated):not(.mdc-ripple-upgraded--foreground-activation)::before{opacity:.12}.forge-list-item:not(.forge-list-item--static):not(.forge-list-item--disabled).forge-list-item--active:not(.forge-list-item--selected):not(.forge-list-item--activated):not(.mdc-ripple-upgraded--foreground-activation):hover::before,.forge-list-item:not(.forge-list-item--static):not(.forge-list-item--disabled).forge-list-item:focus:not(.forge-list-item--selected):not(.forge-list-item--activated):not(.mdc-ripple-upgraded--foreground-activation):hover::before{opacity:.16}.forge-list-item:not(.forge-list-item--static):not(.forge-list-item--disabled).forge-list-item--active:not(.forge-list-item--selected):not(.forge-list-item--activated):not(.mdc-ripple-upgraded--foreground-activation)::after,.forge-list-item:not(.forge-list-item--static):not(.forge-list-item--disabled).forge-list-item--active:not(.forge-list-item--selected):not(.forge-list-item--activated):not(.mdc-ripple-upgraded--foreground-activation)::before,.forge-list-item:not(.forge-list-item--static):not(.forge-list-item--disabled).forge-list-item:focus:not(.forge-list-item--selected):not(.forge-list-item--activated):not(.mdc-ripple-upgraded--foreground-activation)::after,.forge-list-item:not(.forge-list-item--static):not(.forge-list-item--disabled).forge-list-item:focus:not(.forge-list-item--selected):not(.forge-list-item--activated):not(.mdc-ripple-upgraded--foreground-activation)::before{background-color:#000;background-color:var(--mdc-theme-on-surface,#000)}.forge-list-item:not(.forge-list-item--static):not(.forge-list-item--disabled).forge-list-item--active:focus.forge-list-item--selected.forge-list-item--activated:not(.mdc-ripple-upgraded--foreground-activation)::before{opacity:.24}.forge-list-item:not(.forge-list-item--static):not(.forge-list-item--disabled).forge-list-item--active:focus.forge-list-item--selected.forge-list-item--activated:not(.mdc-ripple-upgraded--foreground-activation):hover::before{opacity:.28}.forge-list-item__text{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:100%}.forge-list-item ::slotted([slot=title]){text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:block}.forge-list-item ::slotted([slot=subtitle]),.forge-list-item ::slotted([slot=tertiary-title]){-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-body2-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:.875rem;font-size:var(--mdc-typography-body2-font-size, .875rem);line-height:1.25rem;line-height:var(--mdc-typography-body2-line-height, 1.25rem);font-weight:400;font-weight:var(--mdc-typography-body2-font-weight,400);letter-spacing:.0178571429em;letter-spacing:var(--mdc-typography-body2-letter-spacing, .0178571429em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-body2-text-decoration,inherit);text-decoration:var(--mdc-typography-body2-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-body2-text-transform,inherit);text-overflow:ellipsis;white-space:nowrap;overflow:hidden;color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-background,rgba(0,0,0,.54));display:block}.forge-list-item--two-line{min-height:56px;min-height:var(--forge-list-item-min-height,56px);height:56px;height:var(--forge-list-item-height,56px)}.forge-list-item--three-line{min-height:72px;min-height:var(--forge-list-item-min-height,72px);height:72px;height:var(--forge-list-item-height,72px)}.forge-list-item--dense{min-height:16px;min-height:var(--forge-list-item-min-height,16px);height:16px;height:var(--forge-list-item-height,16px)}.forge-list-item--dense ::slotted([slot=leading]),.forge-list-item--dense ::slotted([slot=trailing]){font-size:1.25rem}.forge-list-item--dense ::slotted([slot=leading]){margin-right:12px;margin-right:var(--forge-list-item-leading-margin-right,12px)}.forge-list-item--dense ::slotted(.forge-list-item__title){-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-body2-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:.875rem;font-size:var(--mdc-typography-body2-font-size, .875rem);line-height:1.25rem;line-height:var(--mdc-typography-body2-line-height, 1.25rem);font-weight:400;font-weight:var(--mdc-typography-body2-font-weight,400);letter-spacing:.0178571429em;letter-spacing:var(--mdc-typography-body2-letter-spacing, .0178571429em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-body2-text-decoration,inherit);text-decoration:var(--mdc-typography-body2-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-body2-text-transform,inherit)}.forge-list-item--dense.forge-list-item--two-line{min-height:40px;min-height:var(--forge-list-item-min-height,40px)}.forge-list-item--dense.forge-list-item--three-line{min-height:56px;min-height:var(--forge-list-item-min-height,56px)}.forge-list-item--wrap{height:auto;height:var(--forge-list-item-height,auto)}.forge-list-item--wrap .forge-list-item__text,.forge-list-item--wrap ::slotted([slot=subtitle]),.forge-list-item--wrap ::slotted([slot=tertiary-title]),.forge-list-item--wrap ::slotted([slot=title]){text-overflow:clip;white-space:normal}.forge-list-item--indented{margin-left:56px;margin-left:var(--forge-list-item-indent,56px)}.forge-list-item--active.forge-list-item--activated:not(.forge-list-item--static):not(.forge-list-item--disabled).forge-list-item::before,.forge-list-item--active.forge-list-item--selected:not(.forge-list-item--static):not(.forge-list-item--disabled).forge-list-item::before{opacity:.2}.forge-list-item--active.forge-list-item--activated:not(.forge-list-item--static):not(.forge-list-item--disabled).forge-list-item:hover::before,.forge-list-item--active.forge-list-item--selected:not(.forge-list-item--static):not(.forge-list-item--disabled).forge-list-item:hover::before{opacity:.24}.forge-list-item--activated,.forge-list-item--selected{color:#6200ee;color:var(--mdc-theme-primary,#6200ee)}.forge-list-item--activated .forge-list-item__text .forge-list-item__subtitle,.forge-list-item--activated .forge-list-item__text ::slotted(.forge-list-item__subtitle),.forge-list-item--selected .forge-list-item__text .forge-list-item__subtitle,.forge-list-item--selected .forge-list-item__text ::slotted(.forge-list-item__subtitle){color:#6200ee;color:var(--mdc-theme-primary,#6200ee);opacity:.87}.forge-list-item--activated .forge-list-item__text .forge-list-item__tertiary-title,.forge-list-item--activated .forge-list-item__text ::slotted(.forge-list-item__tertiary-title),.forge-list-item--selected .forge-list-item__text .forge-list-item__tertiary-title,.forge-list-item--selected .forge-list-item__text ::slotted(.forge-list-item__tertiary-title){color:#6200ee;color:var(--mdc-theme-primary,#6200ee);opacity:.87}.forge-list-item--activated ::slotted([slot=leading]),.forge-list-item--activated ::slotted([slot=trailing]),.forge-list-item--selected ::slotted([slot=leading]),.forge-list-item--selected ::slotted([slot=trailing]){color:#6200ee;color:var(--mdc-theme-primary,#6200ee)}.forge-list-item--activated ::slotted([slot=avatar].forge-list-item__avatar-icon),.forge-list-item--selected ::slotted([slot=avatar].forge-list-item__avatar-icon){background-color:rgba(0,0,0,.38);background-color:var(--mdc-theme-text-disabled-on-background,rgba(0,0,0,.38));color:#000;color:var(--mdc-theme-on-surface,#000)}.forge-list-item--disabled{cursor:not-allowed;cursor:var(--forge-list-item-cursor,not-allowed);color:rgba(0,0,0,.38);color:var(--mdc-theme-text-disabled-on-light,rgba(0,0,0,.38))}.forge-list-item--disabled ::slotted([slot=leading]),.forge-list-item--disabled ::slotted([slot=trailing]){cursor:not-allowed;cursor:var(--forge-list-item-cursor,not-allowed);color:rgba(0,0,0,.38);color:var(--mdc-theme-text-disabled-on-light,rgba(0,0,0,.38))}.forge-list-item[role=link]{cursor:pointer}:host{display:block;contain:content}:host([hidden]){display:none}:host([forge-drawer-context=true]) .forge-list-item{margin:8px;margin:var(--forge-list-item-margin,8px);padding:0 8px;padding:var(--forge-list-item-padding,0 8px);border-radius:4px;border-radius:var(--forge-list-item-border-radius,4px);cursor:pointer;cursor:var(--forge-list-item-cursor,pointer);height:40px;height:var(--forge-list-item-height,40px);font-size:.875rem;font-weight:500}:host([forge-drawer-context=true]) .forge-list-item--static{cursor:initial}:host([forge-drawer-context=true]) .forge-list-item--indented{margin-left:64px;margin-left:var(--forge-list-item-indent,64px)}:host([forge-drawer-context=true]) .forge-list-item--two-line{min-height:56px-8px;min-height:var(--forge-list-item-min-height,56px-8px);height:56px-8px;height:var(--forge-list-item-height,56px-8px)}:host([forge-drawer-context=true]) .forge-list-item--three-line{min-height:72px-8px;min-height:var(--forge-list-item-min-height,72px-8px);height:72px-8px;height:var(--forge-list-item-height,72px-8px)}:host([forge-drawer-context=true]) .forge-list-item:first-child{margin-top:4px;margin-bottom:4px}:host([forge-drawer-context=true]) .forge-list-item--dense{min-height:16px;min-height:var(--forge-list-item-min-height,16px);height:16px;height:var(--forge-list-item-height,16px)}:host([forge-drawer-context=true]) .forge-list-item--dense ::slotted([slot=leading]),:host([forge-drawer-context=true]) .forge-list-item--dense ::slotted([slot=trailing]){font-size:1.25rem}:host([forge-drawer-context=true]) .forge-list-item--dense .forge-list-item__text{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-body2-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:.875rem;font-size:var(--mdc-typography-body2-font-size, .875rem);line-height:1.25rem;line-height:var(--mdc-typography-body2-line-height, 1.25rem);font-weight:400;font-weight:var(--mdc-typography-body2-font-weight,400);letter-spacing:.0178571429em;letter-spacing:var(--mdc-typography-body2-letter-spacing, .0178571429em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-body2-text-decoration,inherit);text-decoration:var(--mdc-typography-body2-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-body2-text-transform,inherit)}:host([forge-drawer-context=true]) .forge-list-item--wrap{height:auto;height:var(--forge-list-item-height,auto);padding:4px 8px;padding:var(--forge-list-item-padding,4px 8px);min-height:40px;min-height:var(--forge-list-item-min-height,40px)}:host([forge-drawer-context=true]) .forge-list-item--disabled{cursor:not-allowed;cursor:var(--forge-list-item-cursor,not-allowed)}:host([dense]){-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-body2-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:.875rem;font-size:var(--mdc-typography-body2-font-size, .875rem);line-height:1.25rem;line-height:var(--mdc-typography-body2-line-height, 1.25rem);font-weight:400;font-weight:var(--mdc-typography-body2-font-weight,400);letter-spacing:.0178571429em;letter-spacing:var(--mdc-typography-body2-letter-spacing, .0178571429em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-body2-text-decoration,inherit);text-decoration:var(--mdc-typography-body2-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-body2-text-transform,inherit)}';
+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}';
 /**
- * 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 list item. This forces the list item to render as an anchor element.
+ * @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 list item. This forces the list item to render as an anchor element.
+ * @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__indicator - The forwarded focus indicator's internal indicator element.
+ * @csspart state-layer__surface - 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.
  */
-let ListItemComponent = class ListItemComponent extends BaseComponent {
+let ListItemComponent = class ListItemComponent extends HTMLElement {
     static get observedAttributes() {
         return [
-            LIST_ITEM_CONSTANTS.attributes.STATIC,
-            LIST_ITEM_CONSTANTS.attributes.TWO_LINE,
-            LIST_ITEM_CONSTANTS.attributes.THREE_LINE,
-            LIST_ITEM_CONSTANTS.attributes.ACTIVE,
-            LIST_ITEM_CONSTANTS.attributes.SELECTED,
-            LIST_ITEM_CONSTANTS.attributes.VALUE,
-            LIST_ITEM_CONSTANTS.attributes.HREF,
-            LIST_ITEM_CONSTANTS.attributes.TARGET,
-            LIST_ITEM_CONSTANTS.attributes.RIPPLE,
-            LIST_ITEM_CONSTANTS.attributes.DISABLED,
-            LIST_ITEM_CONSTANTS.attributes.DENSE,
-            LIST_ITEM_CONSTANTS.attributes.PROPAGATE_CLICK,
-            LIST_ITEM_CONSTANTS.attributes.INDENTED,
-            LIST_ITEM_CONSTANTS.attributes.WRAP
+            LIST_ITEM_CONSTANTS.observedAttributes.HREF,
+            LIST_ITEM_CONSTANTS.observedAttributes.TARGET,
+            LIST_ITEM_CONSTANTS.observedAttributes.STATIC,
+            LIST_ITEM_CONSTANTS.observedAttributes.NON_INTERACTIVE,
+            LIST_ITEM_CONSTANTS.observedAttributes.DISABLED,
+            LIST_ITEM_CONSTANTS.observedAttributes.SELECTED,
+            LIST_ITEM_CONSTANTS.observedAttributes.ACTIVE,
+            LIST_ITEM_CONSTANTS.observedAttributes.VALUE,
+            LIST_ITEM_CONSTANTS.observedAttributes.DENSE,
+            LIST_ITEM_CONSTANTS.observedAttributes.PROPAGATE_CLICK,
+            LIST_ITEM_CONSTANTS.observedAttributes.INDENTED,
+            LIST_ITEM_CONSTANTS.observedAttributes.TWO_LINE,
+            LIST_ITEM_CONSTANTS.observedAttributes.THREE_LINE,
+            LIST_ITEM_CONSTANTS.observedAttributes.WRAP
         ];
     }
     constructor() {
         super();
-        attachShadowTemplate(this, defaultTemplate, styles);
+        attachShadowTemplate(this, template, styles);
         this._foundation = new ListItemFoundation(new ListItemAdapter(this));
     }
     connectedCallback() {
-        // To simulate the :host-context() selector for Firefox until they implement it, we need to determine if the
-        // list item is within a drawer for auto-styling the list item when included within a drawer. Check to see if
-        // any of the parents of this element are a drawer.
-        if (!this.hasAttribute(LIST_ITEM_CONSTANTS.attributes.DRAWER_CONTEXT) && elementParents(this).some(el => ['forge-drawer', 'forge-modal-drawer', 'forge-mini-drawer'].includes(el.tagName.toLowerCase()))) {
-            this.setAttribute(LIST_ITEM_CONSTANTS.attributes.DRAWER_CONTEXT, 'true');
-        }
-        const list = requireParent(this, LIST_CONSTANTS.elementName);
-        if (list) {
-            this._inheritParentListProps(list);
-        }
         this._foundation.initialize();
     }
     disconnectedCallback() {
@@ -59,114 +136,101 @@ let ListItemComponent = class ListItemComponent extends BaseComponent {
     }
     attributeChangedCallback(name, oldValue, newValue) {
         switch (name) {
-            case LIST_ITEM_CONSTANTS.attributes.STATIC:
-                this.static = coerceBoolean(newValue);
+            case LIST_ITEM_CONSTANTS.observedAttributes.HREF:
+                this.href = newValue;
                 break;
-            case LIST_ITEM_CONSTANTS.attributes.TWO_LINE:
-                this.twoLine = coerceBoolean(newValue);
+            case LIST_ITEM_CONSTANTS.observedAttributes.TARGET:
+                this.target = newValue;
                 break;
-            case LIST_ITEM_CONSTANTS.attributes.THREE_LINE:
-                this.threeLine = coerceBoolean(newValue);
+            case LIST_ITEM_CONSTANTS.observedAttributes.NON_INTERACTIVE:
+            case LIST_ITEM_CONSTANTS.observedAttributes.STATIC:
+                this.nonInteractive = coerceBoolean(newValue);
                 break;
-            case LIST_ITEM_CONSTANTS.attributes.ACTIVE:
-                this.active = coerceBoolean(newValue);
+            case LIST_ITEM_CONSTANTS.observedAttributes.DISABLED:
+                this.disabled = coerceBoolean(newValue);
                 break;
-            case LIST_ITEM_CONSTANTS.attributes.SELECTED:
+            case LIST_ITEM_CONSTANTS.observedAttributes.SELECTED:
                 this.selected = coerceBoolean(newValue);
                 break;
-            case LIST_ITEM_CONSTANTS.attributes.VALUE:
-                this.value = newValue;
-                break;
-            case LIST_ITEM_CONSTANTS.attributes.HREF:
-                this.href = newValue;
-                break;
-            case LIST_ITEM_CONSTANTS.attributes.TARGET:
-                this.target = newValue;
-                break;
-            case LIST_ITEM_CONSTANTS.attributes.RIPPLE:
-                this.ripple = coerceBoolean(newValue);
+            case LIST_ITEM_CONSTANTS.observedAttributes.ACTIVE:
+                this.active = coerceBoolean(newValue);
                 break;
-            case LIST_ITEM_CONSTANTS.attributes.DISABLED:
-                this.disabled = coerceBoolean(newValue);
+            case LIST_ITEM_CONSTANTS.observedAttributes.VALUE:
+                this.value = newValue;
                 break;
-            case LIST_ITEM_CONSTANTS.attributes.DENSE:
+            case LIST_ITEM_CONSTANTS.observedAttributes.DENSE:
                 this.dense = coerceBoolean(newValue);
                 break;
-            case LIST_ITEM_CONSTANTS.attributes.PROPAGATE_CLICK:
+            case LIST_ITEM_CONSTANTS.observedAttributes.PROPAGATE_CLICK:
                 this.propagateClick = coerceBoolean(newValue);
                 break;
-            case LIST_ITEM_CONSTANTS.attributes.INDENTED:
+            case LIST_ITEM_CONSTANTS.observedAttributes.INDENTED:
                 this.indented = coerceBoolean(newValue);
                 break;
-            case LIST_ITEM_CONSTANTS.attributes.WRAP:
+            case LIST_ITEM_CONSTANTS.observedAttributes.TWO_LINE:
+                this.twoLine = coerceBoolean(newValue);
+                break;
+            case LIST_ITEM_CONSTANTS.observedAttributes.THREE_LINE:
+                this.threeLine = coerceBoolean(newValue);
+                break;
+            case LIST_ITEM_CONSTANTS.observedAttributes.WRAP:
                 this.wrap = coerceBoolean(newValue);
                 break;
         }
     }
-    _inheritParentListProps(list) {
-        if (list.hasAttribute(LIST_CONSTANTS.attributes.STATIC)) {
-            this.static = true;
-        }
-        if (list.hasAttribute(LIST_CONSTANTS.attributes.DENSE)) {
-            this.dense = true;
-        }
-        if (list.getAttribute(LIST_CONSTANTS.attributes.PROPAGATE_CLICK) === 'false') {
-            this.propagateClick = false;
-        }
-        if (list.hasAttribute(LIST_CONSTANTS.attributes.INDENTED)) {
-            this.indented = true;
-        }
-    }
-    /** Sets focus to this list item. */
     focus() {
         this._foundation.setFocus();
     }
 };
 __decorate([
     FoundationProperty()
-], ListItemComponent.prototype, "static", void 0);
+], ListItemComponent.prototype, "href", void 0);
 __decorate([
     FoundationProperty()
-], ListItemComponent.prototype, "twoLine", void 0);
+], ListItemComponent.prototype, "target", void 0);
 __decorate([
     FoundationProperty()
-], ListItemComponent.prototype, "threeLine", void 0);
+], ListItemComponent.prototype, "static", void 0);
 __decorate([
     FoundationProperty()
-], ListItemComponent.prototype, "active", void 0);
+], ListItemComponent.prototype, "nonInteractive", void 0);
 __decorate([
     FoundationProperty()
-], ListItemComponent.prototype, "selected", void 0);
+], ListItemComponent.prototype, "disabled", void 0);
 __decorate([
     FoundationProperty()
-], ListItemComponent.prototype, "value", void 0);
+], ListItemComponent.prototype, "selected", void 0);
 __decorate([
     FoundationProperty()
-], ListItemComponent.prototype, "href", void 0);
+], ListItemComponent.prototype, "active", void 0);
 __decorate([
     FoundationProperty()
-], ListItemComponent.prototype, "target", void 0);
+], ListItemComponent.prototype, "value", void 0);
 __decorate([
     FoundationProperty()
-], ListItemComponent.prototype, "ripple", void 0);
+], ListItemComponent.prototype, "dense", void 0);
 __decorate([
     FoundationProperty()
-], ListItemComponent.prototype, "disabled", void 0);
+], ListItemComponent.prototype, "propagateClick", void 0);
 __decorate([
     FoundationProperty()
-], ListItemComponent.prototype, "dense", void 0);
+], ListItemComponent.prototype, "indented", void 0);
 __decorate([
     FoundationProperty()
-], ListItemComponent.prototype, "propagateClick", void 0);
+], ListItemComponent.prototype, "twoLine", void 0);
 __decorate([
     FoundationProperty()
-], ListItemComponent.prototype, "indented", void 0);
+], ListItemComponent.prototype, "threeLine", void 0);
 __decorate([
     FoundationProperty()
 ], ListItemComponent.prototype, "wrap", void 0);
 ListItemComponent = __decorate([
     CustomElement({
-        name: LIST_ITEM_CONSTANTS.elementName
+        name: LIST_ITEM_CONSTANTS.elementName,
+        dependencies: [
+            StateLayerComponent,
+            FocusIndicatorComponent
+        ]
     })
 ], ListItemComponent);
 export { ListItemComponent };

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

@@ -240,17 +240,12 @@ export class ListDropdownAdapter {
         const listItems = this._getListItemElements();
         if (listItems.length) {
             const activeItems = listItems.filter(li => li !== listItem && li.active);
-            if (activeItems.length) {
-                activeItems.forEach(ai => ai.active = false);
-            }
+            activeItems.forEach(ai => ai.active = false);
         }
         // Now we can toggle the selected state and sync the active state
         listItem.selected = isSelected;
         listItem.setAttribute('aria-selected', `${isSelected}`);
         listItem.setAttribute('aria-checked', `${isSelected}`);
-        if (isSelected) {
-            listItem.active = true;
-        }
         // Toggle the checkbox icon based on the selected state
         const checkboxElement = listItem.querySelector(`${ICON_CONSTANTS.elementName}[slot=leading]`);
         if (checkboxElement) {

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

@@ -3,6 +3,7 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
+import { IIconComponent } from '../icon';
 import { IPopupPosition, PopupPlacement } from '../popup';
 export declare const LIST_DROPDOWN_CONSTANTS: {
     attributes: {
@@ -29,15 +30,18 @@ export type ListDropdownIconType = 'font' | 'component';
 export interface IBaseListDropdownOption<T = any> {
     value: T;
     label: string;
+    secondaryLabel?: string;
     disabled?: boolean;
     divider?: boolean;
     optionClass?: string | string[];
     leadingIcon?: string;
     leadingIconClass?: string;
     leadingIconType?: ListDropdownIconType;
+    leadingIconComponentProps?: Partial<IIconComponent>;
     trailingIcon?: string;
     trailingIconClass?: string;
     trailingIconType?: ListDropdownIconType;
+    trailingIconComponentProps?: Partial<IIconComponent>;
     leadingBuilder?: () => HTMLElement;
     trailingBuilder?: () => HTMLElement;
 }

package/esm/list-dropdown/list-dropdown-utils.js

@@ -37,15 +37,6 @@ export function createDropdown(config, targetElement) {
             evt.preventDefault();
         }
     });
-    // Set roles and other attributes based on our type
-    switch (config.type) {
-        case ListDropdownType.Menu:
-            dropdownElement.setAttribute('role', 'menu');
-            dropdownElement.setAttribute('aria-orientation', 'vertical');
-            break;
-        default:
-            dropdownElement.setAttribute('role', 'listbox');
-    }
     if (config.id) {
         dropdownElement.id = dropdownId;
     }
@@ -87,6 +78,15 @@ export function createList(config) {
     const listElement = document.createElement(LIST_CONSTANTS.elementName);
     listElement.id = `list-dropdown-list-${config.id}`;
     listElement.propagateClick = false;
+    // Set roles and other attributes based on our type
+    switch (config.type) {
+        case ListDropdownType.Menu:
+            listElement.setAttribute('role', 'menu');
+            listElement.setAttribute('aria-orientation', 'vertical');
+            break;
+        default:
+            listElement.setAttribute('role', 'listbox');
+    }
     return listElement;
 }
 /**
@@ -157,7 +157,6 @@ export function createListItems(config, listElement, options, startIndex = 0, re
             let listItemElement = document.createElement('forge-list-item');
             listItemElement.value = option.value;
             listItemElement.id = `list-dropdown-option-${config.id}-${optionIdIndex++}`;
-            listItemElement.style.cursor = 'pointer';
             if (config.wrapOptionText) {
                 listItemElement.wrap = true;
             }
@@ -165,16 +164,6 @@ export function createListItems(config, listElement, options, startIndex = 0, re
             if (option.optionClass && (typeof option.optionClass === 'string' || Array.isArray(option.optionClass) && option.optionClass.length)) {
                 addClass(option.optionClass, listItemElement);
             }
-            // Set role based on type
-            switch (config.type) {
-                case ListDropdownType.Menu:
-                    listItemElement.setAttribute('role', 'menuitem');
-                    break;
-                case ListDropdownType.None:
-                    break;
-                default:
-                    listItemElement.setAttribute('role', 'option');
-            }
             if (config.dense) {
                 listItemElement.dense = true;
             }
@@ -204,6 +193,14 @@ export function createListItems(config, listElement, options, startIndex = 0, re
                     }
                 }
             }
+            // Check for secondary (subtitle) text
+            if (option.secondaryLabel) {
+                const secondaryLabelElement = document.createElement('span');
+                secondaryLabelElement.slot = 'subtitle';
+                secondaryLabelElement.textContent = option.secondaryLabel;
+                listItemElement.twoLine = true;
+                listItemElement.appendChild(secondaryLabelElement);
+            }
             // If multiple selections are enabled then we need to create and append a leading checkbox element
             if (config.multiple) {
                 const checkboxElement = createCheckboxElement(isSelected);
@@ -225,7 +222,7 @@ export function createListItems(config, listElement, options, startIndex = 0, re
                 }
             }
             else if (option.leadingIcon) {
-                const leadingIconElement = createIconElement(option.leadingIconType, option.leadingIcon, option.leadingIconClass || config.iconClass);
+                const leadingIconElement = createIconElement(option.leadingIconType, option.leadingIcon, option.leadingIconClass || config.iconClass, option.leadingIconComponentProps);
                 leadingIconElement.slot = 'leading';
                 listItemElement.appendChild(leadingIconElement);
             }
@@ -238,7 +235,7 @@ export function createListItems(config, listElement, options, startIndex = 0, re
                 }
             }
             else if (option.trailingIcon) {
-                const trailingIconElement = createIconElement(option.trailingIconType, option.trailingIcon, option.trailingIconClass || config.iconClass);
+                const trailingIconElement = createIconElement(option.trailingIconType, option.trailingIcon, option.trailingIconClass || config.iconClass, option.trailingIconComponentProps);
                 trailingIconElement.slot = 'trailing';
                 listItemElement.appendChild(trailingIconElement);
             }
@@ -248,7 +245,6 @@ export function createListItems(config, listElement, options, startIndex = 0, re
                 listItemElement.setAttribute('aria-disabled', 'true');
             }
             else {
-                listItemElement.style.cursor = 'pointer';
                 listItemElement.setAttribute('aria-disabled', 'false');
             }
             // Update the selected state
@@ -292,7 +288,7 @@ function createDivider() {
     divider.setAttribute('aria-hidden', 'true');
     return divider;
 }
-function createIconElement(type = 'font', iconName, iconClass) {
+function createIconElement(type = 'font', iconName, iconClass, componentProps) {
     if (type === 'component') {
         const icon = document.createElement('forge-icon');
         if (iconClass) {
@@ -300,6 +296,9 @@ function createIconElement(type = 'font', iconName, iconClass) {
         }
         icon.setAttribute('aria-hidden', 'true');
         icon.name = iconName;
+        if (componentProps) {
+            Object.assign(icon, componentProps);
+        }
         return icon;
     }
     const iconElement = document.createElement('i');