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

package/esm/linear-progress/linear-progress.js

@@ -10,7 +10,7 @@ import { LinearProgressAdapter } from './linear-progress-adapter';
 import { LINEAR_PROGRESS_CONSTANTS } from './linear-progress-constants';
 import { LinearProgressFoundation } from './linear-progress-foundation';
 const template = '<template><div class=\"forge-linear-progress forge-linear-progress--indeterminate\" part=\"progressbar\" role=\"progressbar\" aria-valuemin=\"0\" aria-valuemax=\"1\"><div class=\"track\"></div><div class=\"buffer-bar\"></div><div class=\"bar primary-bar\"><div class=\"bar-inner\"></div></div><div class=\"bar secondary-bar\"><div class=\"bar-inner\"></div></div></div></template>';
-const styles = ':host{display:block;position:relative;min-inline-size:80px;block-size:var(--forge-linear-progress-track-height,4px);content-visibility:auto;contain:strict}:host([hidden]){display:none}.forge-linear-progress{--_track-height:var(--forge-linear-progress-track-height, 4px);--_track-color:var(--forge-linear-progress-track-color, var(--forge-theme-tertiary-track-color, #d0d7ff));--_active-indicator-color:var(--forge-linear-progress-indicator-color, var(--forge-theme-tertiary, #3d5afe));--_track-shape:var(--forge-linear-progress-track-shape, 0);--_active-indicator-height:var(--forge-linear-progress-indicator-height, var(--_track-height));--_determinate-duration:var(--forge-linear-progress-determinate-duration, 250ms);--_indeterminate-duration:var(--forge-linear-progress-indeterminate-duration, 2s);--_determinate-easing:var(--forge-linear-progress-determinate-easing, cubic-bezier(0.4, 0, 0.6, 1));--_track-dot-size:calc(var(--_track-height) / 2);--_track-background-width:calc(var(--_track-dot-size) * 5);--_track-background:0/var(--_track-background-width) 100% radial-gradient(\n      circle at calc(var(--_track-dot-size) * 2),\n      var(--_track-color) 0,\n      var(--_track-color) var(--_track-dot-size),\n      transparent var(--_track-dot-size)\n    );inset:0;outline:transparent solid 1px;border-radius:var(--_track-shape);overflow:hidden;display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center}.bar,.bar-inner,.buffer-bar,.forge-linear-progress,.track{position:absolute}.bar{-webkit-animation:none;animation:none;inline-size:100%;block-size:var(--_active-indicator-height);-webkit-transform-origin:left center;transform-origin:left center;will-change:transform;-webkit-transition:-webkit-transform var(--_determinate-duration) var(--_determinate-easing);transition:-webkit-transform var(--_determinate-duration) var(--_determinate-easing);transition:transform var(--_determinate-duration) var(--_determinate-easing);transition:transform var(--_determinate-duration) var(--_determinate-easing),-webkit-transform var(--_determinate-duration) var(--_determinate-easing)}.secondary-bar{display:none}.bar-inner{inset:0;-webkit-animation:none;animation:none;background:var(--_active-indicator-color)}.buffer-bar{background:var(--_track-color);inset:0;will-change:transform;-webkit-transition:-webkit-transform var(--_determinate-duration) var(--_determinate-easing);transition:-webkit-transform var(--_determinate-duration) var(--_determinate-easing);transition:transform var(--_determinate-duration) var(--_determinate-easing);transition:transform var(--_determinate-duration) var(--_determinate-easing),-webkit-transform var(--_determinate-duration) var(--_determinate-easing);-webkit-transform-origin:left center;transform-origin:left center}.track{inset:0;will-change:transform;-webkit-animation:linear infinite var(--_determinate-duration);animation:linear infinite var(--_determinate-duration);-webkit-animation-name:buffering;animation-name:buffering;background:var(--_track-background)}.forge-linear-progress--indeterminate .bar{-webkit-transition:none;transition:none}.forge-linear-progress--indeterminate .primary-bar{inset-inline-start:-145.167%;will-change:transform;-webkit-animation:linear infinite var(--_indeterminate-duration);animation:linear infinite var(--_indeterminate-duration);-webkit-animation-name:primary-indeterminate-translate;animation-name:primary-indeterminate-translate}.forge-linear-progress--indeterminate .secondary-bar{inset-inline-start:-54.8889%;display:block;will-change:transform;-webkit-animation:linear infinite var(--_indeterminate-duration);animation:linear infinite var(--_indeterminate-duration);-webkit-animation-name:secondary-indeterminate-translate;animation-name:secondary-indeterminate-translate}.forge-linear-progress--indeterminate .track{display:none}.forge-linear-progress--indeterminate .primary-bar>.bar-inner{will-change:transform;-webkit-animation:linear infinite var(--_indeterminate-duration) primary-indeterminate-scale;animation:linear infinite var(--_indeterminate-duration) primary-indeterminate-scale}.forge-linear-progress--indeterminate .secondary-bar>.bar-inner{will-change:transform;-webkit-animation:linear infinite var(--_indeterminate-duration) secondary-indeterminate-scale;animation:linear infinite var(--_indeterminate-duration) secondary-indeterminate-scale}:host-context([dir=rtl]) .forge-linear-progress .bar{-webkit-transform-origin:right center;transform-origin:right center}:host-context([dir=rtl]) .forge-linear-progress .buffer-bar{-webkit-transform-origin:right center;transform-origin:right center}:host-context([dir=rtl]) .forge-linear-progress .track{-webkit-animation-name:buffering-rtl;animation-name:buffering-rtl}:host-context([dir=rtl]) .forge-linear-progress.forge-linear-progress--indeterminate .primary-bar{-webkit-animation-name:primary-indeterminate-translate-rtl;animation-name:primary-indeterminate-translate-rtl}:host-context([dir=rtl]) .forge-linear-progress.forge-linear-progress--indeterminate .secondary-bar{-webkit-animation-name:secondary-indeterminate-translate-rtl;animation-name:secondary-indeterminate-translate-rtl}:host([dir=rtl]) .forge-linear-progress .bar{-webkit-transform-origin:right center;transform-origin:right center}:host([dir=rtl]) .forge-linear-progress .buffer-bar{-webkit-transform-origin:right center;transform-origin:right center}:host([dir=rtl]) .forge-linear-progress .track{-webkit-animation-name:buffering-rtl;animation-name:buffering-rtl}:host([dir=rtl]) .forge-linear-progress.forge-linear-progress--indeterminate .primary-bar{-webkit-animation-name:primary-indeterminate-translate-rtl;animation-name:primary-indeterminate-translate-rtl}:host([dir=rtl]) .forge-linear-progress.forge-linear-progress--indeterminate .secondary-bar{-webkit-animation-name:secondary-indeterminate-translate-rtl;animation-name:secondary-indeterminate-translate-rtl}.forge-linear-progress:dir(rtl) .bar{-webkit-transform-origin:right center;transform-origin:right center}.forge-linear-progress:dir(rtl) .buffer-bar{-webkit-transform-origin:right center;transform-origin:right center}.forge-linear-progress:dir(rtl) .track{-webkit-animation-name:buffering-rtl;animation-name:buffering-rtl}.forge-linear-progress:dir(rtl).forge-linear-progress--indeterminate .primary-bar{-webkit-animation-name:primary-indeterminate-translate-rtl;animation-name:primary-indeterminate-translate-rtl}.forge-linear-progress:dir(rtl).forge-linear-progress--indeterminate .secondary-bar{-webkit-animation-name:secondary-indeterminate-translate-rtl;animation-name:secondary-indeterminate-translate-rtl}@media screen and (forced-colors:active){.forge-linear-progress{--_active-indicator-color:canvastext;--_track-color:graytext;border:1px solid canvastext}.forge-linear-progress.forge-linear-progress--indeterminate{--_track-color:canvas}}@-webkit-keyframes buffering{0%{-webkit-transform:translateX(calc(1 * var(--_track-background-width)));transform:translateX(calc(1 * var(--_track-background-width)))}}@keyframes buffering{0%{-webkit-transform:translateX(calc(1 * var(--_track-background-width)));transform:translateX(calc(1 * var(--_track-background-width)))}}@-webkit-keyframes primary-indeterminate-translate{0%{-webkit-transform:translateX(0);transform:translateX(0)}20%{-webkit-animation-timing-function:cubic-bezier(0.5,0,0.701732,0.495819);animation-timing-function:cubic-bezier(0.5,0,0.701732,0.495819);-webkit-transform:translateX(0);transform:translateX(0)}59.15%{-webkit-animation-timing-function:cubic-bezier(0.302435,0.381352,0.55,0.956352);animation-timing-function:cubic-bezier(0.302435,0.381352,0.55,0.956352);-webkit-transform:translateX(calc(1 * 83.6714%));transform:translateX(calc(1 * 83.6714%))}100%{-webkit-transform:translateX(calc(1 * 200.611%));transform:translateX(calc(1 * 200.611%))}}@keyframes primary-indeterminate-translate{0%{-webkit-transform:translateX(0);transform:translateX(0)}20%{-webkit-animation-timing-function:cubic-bezier(0.5,0,0.701732,0.495819);animation-timing-function:cubic-bezier(0.5,0,0.701732,0.495819);-webkit-transform:translateX(0);transform:translateX(0)}59.15%{-webkit-animation-timing-function:cubic-bezier(0.302435,0.381352,0.55,0.956352);animation-timing-function:cubic-bezier(0.302435,0.381352,0.55,0.956352);-webkit-transform:translateX(calc(1 * 83.6714%));transform:translateX(calc(1 * 83.6714%))}100%{-webkit-transform:translateX(calc(1 * 200.611%));transform:translateX(calc(1 * 200.611%))}}@-webkit-keyframes secondary-indeterminate-translate{0%{-webkit-animation-timing-function:cubic-bezier(0.15,0,0.515058,0.409685);animation-timing-function:cubic-bezier(0.15,0,0.515058,0.409685);-webkit-transform:translateX(0);transform:translateX(0)}25%{-webkit-animation-timing-function:cubic-bezier(0.31033,0.284058,0.8,0.733712);animation-timing-function:cubic-bezier(0.31033,0.284058,0.8,0.733712);-webkit-transform:translateX(calc(1 * 37.6519%));transform:translateX(calc(1 * 37.6519%))}48.35%{-webkit-animation-timing-function:cubic-bezier(0.4,0.627035,0.6,0.902026);animation-timing-function:cubic-bezier(0.4,0.627035,0.6,0.902026);-webkit-transform:translateX(calc(1 * 84.3862%));transform:translateX(calc(1 * 84.3862%))}100%{-webkit-transform:translateX(calc(1 * 160.278%));transform:translateX(calc(1 * 160.278%))}}@keyframes secondary-indeterminate-translate{0%{-webkit-animation-timing-function:cubic-bezier(0.15,0,0.515058,0.409685);animation-timing-function:cubic-bezier(0.15,0,0.515058,0.409685);-webkit-transform:translateX(0);transform:translateX(0)}25%{-webkit-animation-timing-function:cubic-bezier(0.31033,0.284058,0.8,0.733712);animation-timing-function:cubic-bezier(0.31033,0.284058,0.8,0.733712);-webkit-transform:translateX(calc(1 * 37.6519%));transform:translateX(calc(1 * 37.6519%))}48.35%{-webkit-animation-timing-function:cubic-bezier(0.4,0.627035,0.6,0.902026);animation-timing-function:cubic-bezier(0.4,0.627035,0.6,0.902026);-webkit-transform:translateX(calc(1 * 84.3862%));transform:translateX(calc(1 * 84.3862%))}100%{-webkit-transform:translateX(calc(1 * 160.278%));transform:translateX(calc(1 * 160.278%))}}@-webkit-keyframes buffering-rtl{0%{-webkit-transform:translateX(calc(-1 * var(--_track-background-width)));transform:translateX(calc(-1 * var(--_track-background-width)))}}@keyframes buffering-rtl{0%{-webkit-transform:translateX(calc(-1 * var(--_track-background-width)));transform:translateX(calc(-1 * var(--_track-background-width)))}}@-webkit-keyframes primary-indeterminate-translate-rtl{0%{-webkit-transform:translateX(0);transform:translateX(0)}20%{-webkit-animation-timing-function:cubic-bezier(0.5,0,0.701732,0.495819);animation-timing-function:cubic-bezier(0.5,0,0.701732,0.495819);-webkit-transform:translateX(0);transform:translateX(0)}59.15%{-webkit-animation-timing-function:cubic-bezier(0.302435,0.381352,0.55,0.956352);animation-timing-function:cubic-bezier(0.302435,0.381352,0.55,0.956352);-webkit-transform:translateX(calc(-1 * 83.6714%));transform:translateX(calc(-1 * 83.6714%))}100%{-webkit-transform:translateX(calc(-1 * 200.611%));transform:translateX(calc(-1 * 200.611%))}}@keyframes primary-indeterminate-translate-rtl{0%{-webkit-transform:translateX(0);transform:translateX(0)}20%{-webkit-animation-timing-function:cubic-bezier(0.5,0,0.701732,0.495819);animation-timing-function:cubic-bezier(0.5,0,0.701732,0.495819);-webkit-transform:translateX(0);transform:translateX(0)}59.15%{-webkit-animation-timing-function:cubic-bezier(0.302435,0.381352,0.55,0.956352);animation-timing-function:cubic-bezier(0.302435,0.381352,0.55,0.956352);-webkit-transform:translateX(calc(-1 * 83.6714%));transform:translateX(calc(-1 * 83.6714%))}100%{-webkit-transform:translateX(calc(-1 * 200.611%));transform:translateX(calc(-1 * 200.611%))}}@-webkit-keyframes secondary-indeterminate-translate-rtl{0%{-webkit-animation-timing-function:cubic-bezier(0.15,0,0.515058,0.409685);animation-timing-function:cubic-bezier(0.15,0,0.515058,0.409685);-webkit-transform:translateX(0);transform:translateX(0)}25%{-webkit-animation-timing-function:cubic-bezier(0.31033,0.284058,0.8,0.733712);animation-timing-function:cubic-bezier(0.31033,0.284058,0.8,0.733712);-webkit-transform:translateX(calc(-1 * 37.6519%));transform:translateX(calc(-1 * 37.6519%))}48.35%{-webkit-animation-timing-function:cubic-bezier(0.4,0.627035,0.6,0.902026);animation-timing-function:cubic-bezier(0.4,0.627035,0.6,0.902026);-webkit-transform:translateX(calc(-1 * 84.3862%));transform:translateX(calc(-1 * 84.3862%))}100%{-webkit-transform:translateX(calc(-1 * 160.278%));transform:translateX(calc(-1 * 160.278%))}}@keyframes secondary-indeterminate-translate-rtl{0%{-webkit-animation-timing-function:cubic-bezier(0.15,0,0.515058,0.409685);animation-timing-function:cubic-bezier(0.15,0,0.515058,0.409685);-webkit-transform:translateX(0);transform:translateX(0)}25%{-webkit-animation-timing-function:cubic-bezier(0.31033,0.284058,0.8,0.733712);animation-timing-function:cubic-bezier(0.31033,0.284058,0.8,0.733712);-webkit-transform:translateX(calc(-1 * 37.6519%));transform:translateX(calc(-1 * 37.6519%))}48.35%{-webkit-animation-timing-function:cubic-bezier(0.4,0.627035,0.6,0.902026);animation-timing-function:cubic-bezier(0.4,0.627035,0.6,0.902026);-webkit-transform:translateX(calc(-1 * 84.3862%));transform:translateX(calc(-1 * 84.3862%))}100%{-webkit-transform:translateX(calc(-1 * 160.278%));transform:translateX(calc(-1 * 160.278%))}}@-webkit-keyframes primary-indeterminate-scale{0%{-webkit-transform:scaleX(.08);transform:scaleX(.08)}36.65%{-webkit-animation-timing-function:cubic-bezier(0.334731,0.12482,0.785844,1);animation-timing-function:cubic-bezier(0.334731,0.12482,0.785844,1);-webkit-transform:scaleX(.08);transform:scaleX(.08)}69.15%{-webkit-animation-timing-function:cubic-bezier(0.06,0.11,0.6,1);animation-timing-function:cubic-bezier(0.06,0.11,0.6,1);-webkit-transform:scaleX(.661479);transform:scaleX(.661479)}100%{-webkit-transform:scaleX(.08);transform:scaleX(.08)}}@keyframes primary-indeterminate-scale{0%{-webkit-transform:scaleX(.08);transform:scaleX(.08)}36.65%{-webkit-animation-timing-function:cubic-bezier(0.334731,0.12482,0.785844,1);animation-timing-function:cubic-bezier(0.334731,0.12482,0.785844,1);-webkit-transform:scaleX(.08);transform:scaleX(.08)}69.15%{-webkit-animation-timing-function:cubic-bezier(0.06,0.11,0.6,1);animation-timing-function:cubic-bezier(0.06,0.11,0.6,1);-webkit-transform:scaleX(.661479);transform:scaleX(.661479)}100%{-webkit-transform:scaleX(.08);transform:scaleX(.08)}}@-webkit-keyframes secondary-indeterminate-scale{0%{-webkit-animation-timing-function:cubic-bezier(0.205028,0.057051,0.57661,0.453971);animation-timing-function:cubic-bezier(0.205028,0.057051,0.57661,0.453971);-webkit-transform:scaleX(.08);transform:scaleX(.08)}19.15%{-webkit-animation-timing-function:cubic-bezier(0.152313,0.196432,0.648374,1.00432);animation-timing-function:cubic-bezier(0.152313,0.196432,0.648374,1.00432);-webkit-transform:scaleX(.457104);transform:scaleX(.457104)}44.15%{-webkit-animation-timing-function:cubic-bezier(0.257759,-0.003163,0.211762,1.38179);animation-timing-function:cubic-bezier(0.257759,-0.003163,0.211762,1.38179);-webkit-transform:scaleX(.72796);transform:scaleX(.72796)}100%{-webkit-transform:scaleX(.08);transform:scaleX(.08)}}@keyframes secondary-indeterminate-scale{0%{-webkit-animation-timing-function:cubic-bezier(0.205028,0.057051,0.57661,0.453971);animation-timing-function:cubic-bezier(0.205028,0.057051,0.57661,0.453971);-webkit-transform:scaleX(.08);transform:scaleX(.08)}19.15%{-webkit-animation-timing-function:cubic-bezier(0.152313,0.196432,0.648374,1.00432);animation-timing-function:cubic-bezier(0.152313,0.196432,0.648374,1.00432);-webkit-transform:scaleX(.457104);transform:scaleX(.457104)}44.15%{-webkit-animation-timing-function:cubic-bezier(0.257759,-0.003163,0.211762,1.38179);animation-timing-function:cubic-bezier(0.257759,-0.003163,0.211762,1.38179);-webkit-transform:scaleX(.72796);transform:scaleX(.72796)}100%{-webkit-transform:scaleX(.08);transform:scaleX(.08)}}';
+const styles = ':host{display:block;position:relative;min-inline-size:80px;block-size:var(--forge-linear-progress-track-height,4px);content-visibility:auto;contain:strict}:host([hidden]){display:none}.forge-linear-progress{--_track-height:var(--forge-linear-progress-track-height, 4px);--_track-color:var(--forge-linear-progress-track-color, var(--forge-theme-tertiary-container, #d0d7ff));--_active-indicator-color:var(--forge-linear-progress-indicator-color, var(--forge-theme-tertiary, #3d5afe));--_track-shape:var(--forge-linear-progress-track-shape, var(--forge-shape-full, 9999px));--_active-indicator-height:var(--forge-linear-progress-indicator-height, var(--_track-height));--_determinate-duration:var(--forge-linear-progress-determinate-duration, var(--forge-animation-duration-medium1, 250ms));--_indeterminate-duration:var(--forge-linear-progress-indeterminate-duration, 2s);--_determinate-easing:var(--forge-linear-progress-determinate-easing, cubic-bezier(0.4, 0, 0.6, 1));--_track-dot-size:calc(var(--_track-height) / 2);--_track-background-width:calc(var(--_track-dot-size) * 5);--_track-background:0/var(--_track-background-width) 100% radial-gradient(\n      circle at calc(var(--_track-dot-size) * 2),\n      var(--_track-color) 0,\n      var(--_track-color) var(--_track-dot-size),\n      transparent var(--_track-dot-size)\n    );inset:0;outline:transparent solid 1px;border-radius:var(--_track-shape);overflow:hidden;display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center}.bar,.bar-inner,.buffer-bar,.forge-linear-progress,.track{position:absolute}.bar{-webkit-animation:none;animation:none;inline-size:100%;block-size:var(--_active-indicator-height);-webkit-transform-origin:left center;transform-origin:left center;will-change:transform;-webkit-transition:-webkit-transform var(--_determinate-duration) var(--_determinate-easing);transition:-webkit-transform var(--_determinate-duration) var(--_determinate-easing);transition:transform var(--_determinate-duration) var(--_determinate-easing);transition:transform var(--_determinate-duration) var(--_determinate-easing),-webkit-transform var(--_determinate-duration) var(--_determinate-easing)}.secondary-bar{display:none}.bar-inner{inset:0;-webkit-animation:none;animation:none;background:var(--_active-indicator-color)}.buffer-bar{background:var(--_track-color);inset:0;will-change:transform;-webkit-transition:-webkit-transform var(--_determinate-duration) var(--_determinate-easing);transition:-webkit-transform var(--_determinate-duration) var(--_determinate-easing);transition:transform var(--_determinate-duration) var(--_determinate-easing);transition:transform var(--_determinate-duration) var(--_determinate-easing),-webkit-transform var(--_determinate-duration) var(--_determinate-easing);-webkit-transform-origin:left center;transform-origin:left center}.track{inset:0;will-change:transform;-webkit-animation:linear infinite var(--_determinate-duration);animation:linear infinite var(--_determinate-duration);-webkit-animation-name:buffering;animation-name:buffering;background:var(--_track-background)}.forge-linear-progress--indeterminate .bar{-webkit-transition:none;transition:none}.forge-linear-progress--indeterminate .primary-bar{inset-inline-start:-145.167%;will-change:transform;-webkit-animation:linear infinite var(--_indeterminate-duration);animation:linear infinite var(--_indeterminate-duration);-webkit-animation-name:primary-indeterminate-translate;animation-name:primary-indeterminate-translate}.forge-linear-progress--indeterminate .secondary-bar{inset-inline-start:-54.8889%;display:block;will-change:transform;-webkit-animation:linear infinite var(--_indeterminate-duration);animation:linear infinite var(--_indeterminate-duration);-webkit-animation-name:secondary-indeterminate-translate;animation-name:secondary-indeterminate-translate}.forge-linear-progress--indeterminate .track{display:none}.forge-linear-progress--indeterminate .primary-bar>.bar-inner{will-change:transform;-webkit-animation:linear infinite var(--_indeterminate-duration) primary-indeterminate-scale;animation:linear infinite var(--_indeterminate-duration) primary-indeterminate-scale}.forge-linear-progress--indeterminate .secondary-bar>.bar-inner{will-change:transform;-webkit-animation:linear infinite var(--_indeterminate-duration) secondary-indeterminate-scale;animation:linear infinite var(--_indeterminate-duration) secondary-indeterminate-scale}:host-context([dir=rtl]) .forge-linear-progress .bar{-webkit-transform-origin:right center;transform-origin:right center}:host-context([dir=rtl]) .forge-linear-progress .buffer-bar{-webkit-transform-origin:right center;transform-origin:right center}:host-context([dir=rtl]) .forge-linear-progress .track{-webkit-animation-name:buffering-rtl;animation-name:buffering-rtl}:host-context([dir=rtl]) .forge-linear-progress.forge-linear-progress--indeterminate .primary-bar{-webkit-animation-name:primary-indeterminate-translate-rtl;animation-name:primary-indeterminate-translate-rtl}:host-context([dir=rtl]) .forge-linear-progress.forge-linear-progress--indeterminate .secondary-bar{-webkit-animation-name:secondary-indeterminate-translate-rtl;animation-name:secondary-indeterminate-translate-rtl}:host([dir=rtl]) .forge-linear-progress .bar{-webkit-transform-origin:right center;transform-origin:right center}:host([dir=rtl]) .forge-linear-progress .buffer-bar{-webkit-transform-origin:right center;transform-origin:right center}:host([dir=rtl]) .forge-linear-progress .track{-webkit-animation-name:buffering-rtl;animation-name:buffering-rtl}:host([dir=rtl]) .forge-linear-progress.forge-linear-progress--indeterminate .primary-bar{-webkit-animation-name:primary-indeterminate-translate-rtl;animation-name:primary-indeterminate-translate-rtl}:host([dir=rtl]) .forge-linear-progress.forge-linear-progress--indeterminate .secondary-bar{-webkit-animation-name:secondary-indeterminate-translate-rtl;animation-name:secondary-indeterminate-translate-rtl}.forge-linear-progress:dir(rtl) .bar{-webkit-transform-origin:right center;transform-origin:right center}.forge-linear-progress:dir(rtl) .buffer-bar{-webkit-transform-origin:right center;transform-origin:right center}.forge-linear-progress:dir(rtl) .track{-webkit-animation-name:buffering-rtl;animation-name:buffering-rtl}.forge-linear-progress:dir(rtl).forge-linear-progress--indeterminate .primary-bar{-webkit-animation-name:primary-indeterminate-translate-rtl;animation-name:primary-indeterminate-translate-rtl}.forge-linear-progress:dir(rtl).forge-linear-progress--indeterminate .secondary-bar{-webkit-animation-name:secondary-indeterminate-translate-rtl;animation-name:secondary-indeterminate-translate-rtl}@media screen and (forced-colors:active){.forge-linear-progress{--_active-indicator-color:canvastext;--_track-color:graytext;border:1px solid canvastext}.forge-linear-progress.forge-linear-progress--indeterminate{--_track-color:canvas}}@-webkit-keyframes buffering{0%{-webkit-transform:translateX(calc(1 * var(--_track-background-width)));transform:translateX(calc(1 * var(--_track-background-width)))}}@keyframes buffering{0%{-webkit-transform:translateX(calc(1 * var(--_track-background-width)));transform:translateX(calc(1 * var(--_track-background-width)))}}@-webkit-keyframes primary-indeterminate-translate{0%{-webkit-transform:translateX(0);transform:translateX(0)}20%{-webkit-animation-timing-function:cubic-bezier(0.5,0,0.701732,0.495819);animation-timing-function:cubic-bezier(0.5,0,0.701732,0.495819);-webkit-transform:translateX(0);transform:translateX(0)}59.15%{-webkit-animation-timing-function:cubic-bezier(0.302435,0.381352,0.55,0.956352);animation-timing-function:cubic-bezier(0.302435,0.381352,0.55,0.956352);-webkit-transform:translateX(calc(1 * 83.6714%));transform:translateX(calc(1 * 83.6714%))}100%{-webkit-transform:translateX(calc(1 * 200.611%));transform:translateX(calc(1 * 200.611%))}}@keyframes primary-indeterminate-translate{0%{-webkit-transform:translateX(0);transform:translateX(0)}20%{-webkit-animation-timing-function:cubic-bezier(0.5,0,0.701732,0.495819);animation-timing-function:cubic-bezier(0.5,0,0.701732,0.495819);-webkit-transform:translateX(0);transform:translateX(0)}59.15%{-webkit-animation-timing-function:cubic-bezier(0.302435,0.381352,0.55,0.956352);animation-timing-function:cubic-bezier(0.302435,0.381352,0.55,0.956352);-webkit-transform:translateX(calc(1 * 83.6714%));transform:translateX(calc(1 * 83.6714%))}100%{-webkit-transform:translateX(calc(1 * 200.611%));transform:translateX(calc(1 * 200.611%))}}@-webkit-keyframes secondary-indeterminate-translate{0%{-webkit-animation-timing-function:cubic-bezier(0.15,0,0.515058,0.409685);animation-timing-function:cubic-bezier(0.15,0,0.515058,0.409685);-webkit-transform:translateX(0);transform:translateX(0)}25%{-webkit-animation-timing-function:cubic-bezier(0.31033,0.284058,0.8,0.733712);animation-timing-function:cubic-bezier(0.31033,0.284058,0.8,0.733712);-webkit-transform:translateX(calc(1 * 37.6519%));transform:translateX(calc(1 * 37.6519%))}48.35%{-webkit-animation-timing-function:cubic-bezier(0.4,0.627035,0.6,0.902026);animation-timing-function:cubic-bezier(0.4,0.627035,0.6,0.902026);-webkit-transform:translateX(calc(1 * 84.3862%));transform:translateX(calc(1 * 84.3862%))}100%{-webkit-transform:translateX(calc(1 * 160.278%));transform:translateX(calc(1 * 160.278%))}}@keyframes secondary-indeterminate-translate{0%{-webkit-animation-timing-function:cubic-bezier(0.15,0,0.515058,0.409685);animation-timing-function:cubic-bezier(0.15,0,0.515058,0.409685);-webkit-transform:translateX(0);transform:translateX(0)}25%{-webkit-animation-timing-function:cubic-bezier(0.31033,0.284058,0.8,0.733712);animation-timing-function:cubic-bezier(0.31033,0.284058,0.8,0.733712);-webkit-transform:translateX(calc(1 * 37.6519%));transform:translateX(calc(1 * 37.6519%))}48.35%{-webkit-animation-timing-function:cubic-bezier(0.4,0.627035,0.6,0.902026);animation-timing-function:cubic-bezier(0.4,0.627035,0.6,0.902026);-webkit-transform:translateX(calc(1 * 84.3862%));transform:translateX(calc(1 * 84.3862%))}100%{-webkit-transform:translateX(calc(1 * 160.278%));transform:translateX(calc(1 * 160.278%))}}@-webkit-keyframes buffering-rtl{0%{-webkit-transform:translateX(calc(-1 * var(--_track-background-width)));transform:translateX(calc(-1 * var(--_track-background-width)))}}@keyframes buffering-rtl{0%{-webkit-transform:translateX(calc(-1 * var(--_track-background-width)));transform:translateX(calc(-1 * var(--_track-background-width)))}}@-webkit-keyframes primary-indeterminate-translate-rtl{0%{-webkit-transform:translateX(0);transform:translateX(0)}20%{-webkit-animation-timing-function:cubic-bezier(0.5,0,0.701732,0.495819);animation-timing-function:cubic-bezier(0.5,0,0.701732,0.495819);-webkit-transform:translateX(0);transform:translateX(0)}59.15%{-webkit-animation-timing-function:cubic-bezier(0.302435,0.381352,0.55,0.956352);animation-timing-function:cubic-bezier(0.302435,0.381352,0.55,0.956352);-webkit-transform:translateX(calc(-1 * 83.6714%));transform:translateX(calc(-1 * 83.6714%))}100%{-webkit-transform:translateX(calc(-1 * 200.611%));transform:translateX(calc(-1 * 200.611%))}}@keyframes primary-indeterminate-translate-rtl{0%{-webkit-transform:translateX(0);transform:translateX(0)}20%{-webkit-animation-timing-function:cubic-bezier(0.5,0,0.701732,0.495819);animation-timing-function:cubic-bezier(0.5,0,0.701732,0.495819);-webkit-transform:translateX(0);transform:translateX(0)}59.15%{-webkit-animation-timing-function:cubic-bezier(0.302435,0.381352,0.55,0.956352);animation-timing-function:cubic-bezier(0.302435,0.381352,0.55,0.956352);-webkit-transform:translateX(calc(-1 * 83.6714%));transform:translateX(calc(-1 * 83.6714%))}100%{-webkit-transform:translateX(calc(-1 * 200.611%));transform:translateX(calc(-1 * 200.611%))}}@-webkit-keyframes secondary-indeterminate-translate-rtl{0%{-webkit-animation-timing-function:cubic-bezier(0.15,0,0.515058,0.409685);animation-timing-function:cubic-bezier(0.15,0,0.515058,0.409685);-webkit-transform:translateX(0);transform:translateX(0)}25%{-webkit-animation-timing-function:cubic-bezier(0.31033,0.284058,0.8,0.733712);animation-timing-function:cubic-bezier(0.31033,0.284058,0.8,0.733712);-webkit-transform:translateX(calc(-1 * 37.6519%));transform:translateX(calc(-1 * 37.6519%))}48.35%{-webkit-animation-timing-function:cubic-bezier(0.4,0.627035,0.6,0.902026);animation-timing-function:cubic-bezier(0.4,0.627035,0.6,0.902026);-webkit-transform:translateX(calc(-1 * 84.3862%));transform:translateX(calc(-1 * 84.3862%))}100%{-webkit-transform:translateX(calc(-1 * 160.278%));transform:translateX(calc(-1 * 160.278%))}}@keyframes secondary-indeterminate-translate-rtl{0%{-webkit-animation-timing-function:cubic-bezier(0.15,0,0.515058,0.409685);animation-timing-function:cubic-bezier(0.15,0,0.515058,0.409685);-webkit-transform:translateX(0);transform:translateX(0)}25%{-webkit-animation-timing-function:cubic-bezier(0.31033,0.284058,0.8,0.733712);animation-timing-function:cubic-bezier(0.31033,0.284058,0.8,0.733712);-webkit-transform:translateX(calc(-1 * 37.6519%));transform:translateX(calc(-1 * 37.6519%))}48.35%{-webkit-animation-timing-function:cubic-bezier(0.4,0.627035,0.6,0.902026);animation-timing-function:cubic-bezier(0.4,0.627035,0.6,0.902026);-webkit-transform:translateX(calc(-1 * 84.3862%));transform:translateX(calc(-1 * 84.3862%))}100%{-webkit-transform:translateX(calc(-1 * 160.278%));transform:translateX(calc(-1 * 160.278%))}}@-webkit-keyframes primary-indeterminate-scale{0%{-webkit-transform:scaleX(.08);transform:scaleX(.08)}36.65%{-webkit-animation-timing-function:cubic-bezier(0.334731,0.12482,0.785844,1);animation-timing-function:cubic-bezier(0.334731,0.12482,0.785844,1);-webkit-transform:scaleX(.08);transform:scaleX(.08)}69.15%{-webkit-animation-timing-function:cubic-bezier(0.06,0.11,0.6,1);animation-timing-function:cubic-bezier(0.06,0.11,0.6,1);-webkit-transform:scaleX(.661479);transform:scaleX(.661479)}100%{-webkit-transform:scaleX(.08);transform:scaleX(.08)}}@keyframes primary-indeterminate-scale{0%{-webkit-transform:scaleX(.08);transform:scaleX(.08)}36.65%{-webkit-animation-timing-function:cubic-bezier(0.334731,0.12482,0.785844,1);animation-timing-function:cubic-bezier(0.334731,0.12482,0.785844,1);-webkit-transform:scaleX(.08);transform:scaleX(.08)}69.15%{-webkit-animation-timing-function:cubic-bezier(0.06,0.11,0.6,1);animation-timing-function:cubic-bezier(0.06,0.11,0.6,1);-webkit-transform:scaleX(.661479);transform:scaleX(.661479)}100%{-webkit-transform:scaleX(.08);transform:scaleX(.08)}}@-webkit-keyframes secondary-indeterminate-scale{0%{-webkit-animation-timing-function:cubic-bezier(0.205028,0.057051,0.57661,0.453971);animation-timing-function:cubic-bezier(0.205028,0.057051,0.57661,0.453971);-webkit-transform:scaleX(.08);transform:scaleX(.08)}19.15%{-webkit-animation-timing-function:cubic-bezier(0.152313,0.196432,0.648374,1.00432);animation-timing-function:cubic-bezier(0.152313,0.196432,0.648374,1.00432);-webkit-transform:scaleX(.457104);transform:scaleX(.457104)}44.15%{-webkit-animation-timing-function:cubic-bezier(0.257759,-0.003163,0.211762,1.38179);animation-timing-function:cubic-bezier(0.257759,-0.003163,0.211762,1.38179);-webkit-transform:scaleX(.72796);transform:scaleX(.72796)}100%{-webkit-transform:scaleX(.08);transform:scaleX(.08)}}@keyframes secondary-indeterminate-scale{0%{-webkit-animation-timing-function:cubic-bezier(0.205028,0.057051,0.57661,0.453971);animation-timing-function:cubic-bezier(0.205028,0.057051,0.57661,0.453971);-webkit-transform:scaleX(.08);transform:scaleX(.08)}19.15%{-webkit-animation-timing-function:cubic-bezier(0.152313,0.196432,0.648374,1.00432);animation-timing-function:cubic-bezier(0.152313,0.196432,0.648374,1.00432);-webkit-transform:scaleX(.457104);transform:scaleX(.457104)}44.15%{-webkit-animation-timing-function:cubic-bezier(0.257759,-0.003163,0.211762,1.38179);animation-timing-function:cubic-bezier(0.257759,-0.003163,0.211762,1.38179);-webkit-transform:scaleX(.72796);transform:scaleX(.72796)}100%{-webkit-transform:scaleX(.08);transform:scaleX(.08)}}';
 /**
  * @tag forge-linear-progress
  *

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

@@ -3,59 +3,35 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { BaseAdapter, IBaseAdapter } from '../../core/base/base-adapter';
-import { IListItemComponent } from '../list-item';
+import { BaseAdapter } from '../../core/base/base-adapter';
 import { IListComponent } from './list';
-export interface IListAdapter extends IBaseAdapter {
-    initializeAccessibility(): void;
-    addListener(type: string, listener: (evt: Event) => void): void;
-    removeListener(type: string, listener: (evt: Event) => void): void;
-    getListItems(): IListItemComponent[];
+import { IListItemComponent } from '../list-item/list-item';
+export interface IListAdapter extends BaseAdapter<IListComponent> {
+    initialize(): void;
     focusNextListItem(): void;
     focusPreviousListItem(): void;
     focusFirstListItem(): void;
     focusLastListItem(): void;
-    setSelectedListItems(values: any[]): void;
+    setSelectedListItems(values: unknown | unknown[]): void;
     updateListItems(cb: (li: IListItemComponent) => void): void;
+    updateListItemRole(): void;
 }
-/**
- * The DOM adapter for the `<forge-list>` component.
- */
 export declare class ListAdapter extends BaseAdapter<IListComponent> implements IListAdapter {
     constructor(component: IListComponent);
-    initializeAccessibility(): void;
-    /**
-     * Adds an event listener to the `<forge-list>` host element.
-     * @param {string} type The event type.
-     * @param {Function} listener The event callback.
-     */
-    addListener(type: string, listener: (evt: Event) => void): void;
-    /**
-     * Removes an event listener to the `<forge-list>` host element.
-     * @param {string} type The event type.
-     * @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.
-     */
+    initialize(): void;
+    /** Sets focus to the next item in the list. */
     focusNextListItem(): void;
-    /**
-     * Sets focus to the previous item in the list.
-     */
+    /** Sets focus to the previous item in the list. */
     focusPreviousListItem(): void;
-    /**
-     * Sets focus to the first item in the list.
-     */
+    /** Sets focus to the first item in the list. */
     focusFirstListItem(): void;
-    /**
-     * Sets focus to the last item in the list.
-     */
+    /** Sets focus to the last item in the list. */
     focusLastListItem(): void;
-    setSelectedListItems(values: any[]): void;
+    /** Select all list items that match values in the provided array of values. */
+    setSelectedListItems(value: unknown | unknown[]): void;
+    /** Calls the provided callback on all list items to apply an updated property to each list item. */
     updateListItems(cb: (li: IListItemComponent) => void): void;
+    updateListItemRole(): void;
+    private _getListItems;
+    private _getFocusableListItems;
 }

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

@@ -3,97 +3,80 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { deepQuerySelectorAll, getActiveElement } from '@tylertech/forge-core';
+import { isDeepEqual } from '@tylertech/forge-core';
 import { BaseAdapter } from '../../core/base/base-adapter';
-import { LIST_ITEM_CONSTANTS } from '../list-item';
-import { LIST_CONSTANTS } from './list-constants';
-/**
- * The DOM adapter for the `<forge-list>` component.
- */
+import { LIST_ITEM_CONSTANTS } from '../list-item/list-item-constants';
+import { ListComponentItemRole, LIST_CONSTANTS } from './list-constants';
 export class ListAdapter extends BaseAdapter {
     constructor(component) {
         super(component);
     }
-    initializeAccessibility() {
+    initialize() {
         if (!this._component.hasAttribute('role')) {
             this._component.setAttribute('role', 'list');
         }
     }
-    /**
-     * Adds an event listener to the `<forge-list>` host element.
-     * @param {string} type The event type.
-     * @param {Function} listener The event callback.
-     */
-    addListener(type, listener) {
-        this._component.addEventListener(type, listener);
-    }
-    /**
-     * Removes an event listener to the `<forge-list>` host element.
-     * @param {string} type The event type.
-     * @param {Function} listener The event callback.
-     */
-    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.
-     */
+    /** 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());
+        const listItems = this._getFocusableListItems();
+        if (listItems.length) {
+            const focusedListItemIndex = listItems.findIndex(item => item.matches(':focus'));
+            console.log('focusedListItemIndex', focusedListItemIndex);
             const nextIndex = focusedListItemIndex < listItems.length - 1 ? focusedListItemIndex + 1 : 0;
             if (nextIndex <= listItems.length - 1) {
-                listItems[nextIndex].focus();
+                listItems[nextIndex].focus({ preventScroll: true });
             }
         }
     }
-    /**
-     * Sets focus to the previous item in the list.
-     */
+    /** 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());
+        const listItems = this._getFocusableListItems();
+        if (listItems.length) {
+            const focusedListItemIndex = listItems.findIndex(item => item.matches(':focus'));
             const nextIndex = focusedListItemIndex > 0 ? focusedListItemIndex - 1 : listItems.length - 1;
             if (nextIndex >= 0) {
-                listItems[nextIndex].focus();
+                listItems[nextIndex].focus({ preventScroll: true });
             }
         }
     }
-    /**
-     * Sets focus to the first item in the list.
-     */
+    /** 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) {
-            listItems[0].focus();
+        const listItems = this._getFocusableListItems();
+        if (listItems.length) {
+            listItems[0].focus({ preventScroll: true });
         }
     }
-    /**
-     * Sets focus to the last item in the list.
-     */
+    /** 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) {
-            listItems[listItems.length - 1].focus();
+        const listItems = this._getFocusableListItems();
+        if (listItems.length) {
+            listItems[listItems.length - 1].focus({ preventScroll: true });
         }
     }
-    setSelectedListItems(values) {
-        const listItems = Array.from(this._component.querySelectorAll(LIST_ITEM_CONSTANTS.elementName));
-        if (listItems && listItems.length) {
+    /** Select all list items that match values in the provided array of values. */
+    setSelectedListItems(value) {
+        const listItems = this._getListItems();
+        if (listItems.length) {
+            const values = Array.isArray(value) ? value : [value];
             for (const item of listItems) {
-                item.selected = values.includes(item.value);
+                item.selected = values.some(val => isDeepEqual(val, item.value));
             }
         }
     }
+    /** Calls the provided callback on all list items to apply an updated property to each list item. */
     updateListItems(cb) {
-        this.getListItems().forEach(li => cb(li));
+        this._getListItems().forEach(cb);
+    }
+    updateListItemRole() {
+        var _a;
+        const role = (_a = ListComponentItemRole[this._component.getAttribute('role')]) !== null && _a !== void 0 ? _a : 'listitem';
+        this.updateListItems(li => li.role = role);
+    }
+    _getListItems() {
+        const listItems = Array.from(this._component.querySelectorAll(LIST_ITEM_CONSTANTS.elementName));
+        return listItems.filter(item => item.closest(LIST_CONSTANTS.elementName) === this._component);
+    }
+    _getFocusableListItems() {
+        return this._getListItems().filter(li => !li.disabled && !li.nonInteractive && !li.hidden);
     }
 }

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

@@ -4,15 +4,23 @@
  * License: Apache-2.0
  */
 export declare const LIST_CONSTANTS: {
-    elementName: "forge-list";
+    elementName: string;
     attributes: {
+        ROLE: string;
         STATIC: string;
+        NON_INTERACTIVE: string;
+        DISABLED: string;
         DENSE: string;
         PROPAGATE_CLICK: string;
-        INDENTED: string;
         SELECTED_VALUE: string;
+        INDENTED: string;
+        TWO_LINE: string;
+        THREE_LINE: string;
+        WRAP: string;
     };
-    selectors: {
-        FOCUSABLE_LIST_ITEMS: string;
-    };
+};
+export declare const ListComponentItemRole: {
+    list: string;
+    listbox: string;
+    menu: string;
 };

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

@@ -5,18 +5,26 @@
  */
 import { COMPONENT_NAME_PREFIX } from '../../constants';
 const elementName = `${COMPONENT_NAME_PREFIX}list`;
-const attributes = {
+const observedAttributes = {
+    ROLE: 'role',
     STATIC: 'static',
+    NON_INTERACTIVE: 'non-interactive',
+    DISABLED: 'disabled',
     DENSE: 'dense',
     PROPAGATE_CLICK: 'propagate-click',
+    SELECTED_VALUE: 'selected-value',
     INDENTED: 'indented',
-    SELECTED_VALUE: 'selected-value'
-};
-const selectors = {
-    FOCUSABLE_LIST_ITEMS: '.forge-list-item:not(.forge-list-item--static):not(.forge-list-item--disabled)'
+    TWO_LINE: 'two-line',
+    THREE_LINE: 'three-line',
+    WRAP: 'wrap'
 };
+const attributes = Object.assign({}, observedAttributes);
 export const LIST_CONSTANTS = {
     elementName,
-    attributes,
-    selectors
+    attributes
+};
+export const ListComponentItemRole = {
+    list: 'listitem',
+    listbox: 'option',
+    menu: 'menuitem'
 };

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

@@ -7,42 +7,50 @@ import { ICustomElementFoundation } from '@tylertech/forge-core';
 import { IListAdapter } from './list-adapter';
 export interface IListFoundation extends ICustomElementFoundation {
     static: boolean;
+    nonInteractive: boolean;
+    disabled: boolean;
     dense: boolean;
     propagateClick: boolean;
     indented: boolean;
-    selectedValue: any;
+    selectedValue: unknown | unknown[];
+    twoLine: boolean;
+    threeLine: boolean;
+    wrap: boolean;
 }
-/**
- * The foundation class behind the `<forge-list>` component.
- */
 export declare class ListFoundation implements IListFoundation {
     private _adapter;
-    private _static;
+    private _nonInteractive;
+    private _disabled;
     private _dense;
     private _propagateClick;
     private _indented;
     private _selectedValue;
+    private _twoLine;
+    private _threeLine;
+    private _wrap;
     private _keydownListener;
     constructor(_adapter: IListAdapter);
     initialize(): void;
     private _onKeydown;
-    /**
-     * Ensures that preventDefault is only called if the containing element doesn't
-     * consume the event, and it will cause an unintended scroll.
-     * @param {Event} evt
-     */
-    private _preventDefaultEvent;
-    private _setSelectedValue;
-    /** Gets/sets whether the list has all static items or not. */
+    updateRole(): void;
     get static(): boolean;
     set static(value: boolean);
-    /** Gets/sets whether the list has all dense items or not. */
+    get nonInteractive(): boolean;
+    set nonInteractive(value: boolean);
+    get disabled(): boolean;
+    set disabled(value: boolean);
     get dense(): boolean;
     set dense(value: boolean);
     get propagateClick(): boolean;
     set propagateClick(value: boolean);
     get indented(): boolean;
     set indented(value: boolean);
-    get selectedValue(): any;
-    set selectedValue(value: any);
+    get selectedValue(): unknown | unknown[];
+    set selectedValue(value: unknown | unknown[]);
+    get twoLine(): boolean;
+    set twoLine(value: boolean);
+    get threeLine(): boolean;
+    set threeLine(value: boolean);
+    get wrap(): boolean;
+    set wrap(value: boolean);
 }

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

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