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

package/esm/linear-progress/linear-progress.d.ts

@@ -4,10 +4,12 @@
  * License: Apache-2.0
  */
 import { BaseComponent, IBaseComponent } from '../core/base/base-component';
+import { LinearProgressTheme } from './linear-progress-constants';
 export interface ILinearProgressComponent extends IBaseComponent {
     determinate: boolean;
     progress: number;
     buffer: number;
+    theme: LinearProgressTheme;
 }
 declare global {
     interface HTMLElementTagNameMap {
@@ -28,20 +30,23 @@ declare global {
  * @property {boolean} determinate - Controls the determinate state.
  * @property {boolean} progress - Controls the progress while in a determinate state. Accepts values from `0` to `1`.
  * @property {boolean} buffer - Controls the buffer progress while in a determinate state. Accepts values from `0` to `1`.
+ * @property {string} theme - Sets the theme.
  *
  * @attribute {boolean} determinate - Controls the determinate state.
  * @attribute {number} progress - Controls the progress while in a determinate state. Accepts values from `0` to `1`.
  * @attribute {number} buffer - Controls the buffer progress while in a determinate state. Accepts values from `0` to `1`.
- * @attribute {string} data-aria-label - Propagates an `aria-label` to the underlying progress bar element.
+ * @attribute {string} theme - Sets the theme.
  *
  * @cssproperty --forge-linear-progress-height - The height of the element.
  * @cssproperty --forge-linear-progress-track-color - The background color of the indicator.
- * @cssproperty --forge-linear-progress-indicator-color - The color of the indicator.
  * @cssproperty --forge-linear-progress-track-shape - The shape of the indicator.
+ * @cssproperty --forge-linear-progress-indicator-color - The color of the indicator.
  * @cssproperty --forge-linear-progress-indicator-height - The height of the indicator only.
  * @cssproperty --forge-linear-progress-determinate-duration - The duration of the determinate animation.
  * @cssproperty --forge-linear-progress-indeterminate-duration - The duration of the indeterminate animation.
  * @cssproperty --forge-linear-progress-determinate-easing - The easing function to use for the determinate animation.
+ * @cssproperty --forge-linear-progress-theme-transition-duration - The duration of the theme transition.
+ * @cssproperty --forge-linear-progress-theme-transition-timing - The easing function to use for the theme transition.
  *
  * @csspart progressbar - Styles the progress bar container element
  */
@@ -49,8 +54,10 @@ export declare class LinearProgressComponent extends BaseComponent implements IL
     static get observedAttributes(): string[];
     private _foundation;
     constructor();
+    connectedCallback(): void;
     attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
     determinate: boolean;
     progress: number;
     buffer: number;
+    theme: LinearProgressTheme;
 }

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

@@ -9,8 +9,8 @@ import { BaseComponent } from '../core/base/base-component';
 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-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)}}';
+const template = '<template><div class=\"forge-linear-progress forge-linear-progress--indeterminate\" part=\"progressbar\"><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{--_linear-progress-track-height:var(--forge-linear-progress-track-height, 4px)}:host{display:block;position:relative;min-inline-size:80px;block-size:var(--_linear-progress-track-height);content-visibility:auto;contain:strict}:host([hidden]){display:none}.forge-linear-progress{--_linear-progress-track-color:var(--forge-linear-progress-track-color, var(--forge-theme-tertiary-container, #d0d7ff));--_linear-progress-track-shape:var(--forge-linear-progress-track-shape, var(--forge-shape-full, 9999px));--_linear-progress-indicator-color:var(--forge-linear-progress-indicator-color, var(--forge-theme-tertiary, #3d5afe));--_linear-progress-indicator-height:var(--forge-linear-progress-indicator-height, var(--_linear-progress-track-height));--_linear-progress-determinate-duration:var(--forge-linear-progress-determinate-duration, var(--forge-animation-duration-medium1, 250ms));--_linear-progress-determinate-easing:var(--forge-linear-progress-determinate-easing, cubic-bezier(0.4, 0, 0.6, 1));--_linear-progress-indeterminate-duration:var(--forge-linear-progress-indeterminate-duration, 2s);--_linear-progress-theme-transition-duration:var(--forge-linear-progress-theme-transition-duration, var(--forge-animation-duration-short3, 150ms));--_linear-progress-theme-transition-timing:var(--forge-linear-progress-theme-transition-timing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_linear-progress-track-dot-size:calc(var(--_linear-progress-track-height) / 2);--_linear-progress-track-background-width:calc(var(--_linear-progress-track-dot-size) * 5);--_linear-progress-track-background:0/var(--_linear-progress-track-background-width) 100% radial-gradient(circle at calc(var(--_linear-progress-track-dot-size) * 2), var(--_linear-progress-track-color) 0, var(--_linear-progress-track-color) var(--_linear-progress-track-dot-size), transparent var(--_linear-progress-track-dot-size))}.forge-linear-progress{inset:0;outline:transparent solid 1px;border-radius:var(--_linear-progress-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(--_linear-progress-indicator-height);-webkit-transform-origin:left center;transform-origin:left center;will-change:transform;-webkit-transition:-webkit-transform var(--_linear-progress-determinate-duration) var(--_linear-progress-determinate-easing);transition:-webkit-transform var(--_linear-progress-determinate-duration) var(--_linear-progress-determinate-easing);transition:transform var(--_linear-progress-determinate-duration) var(--_linear-progress-determinate-easing);transition:transform var(--_linear-progress-determinate-duration) var(--_linear-progress-determinate-easing),-webkit-transform var(--_linear-progress-determinate-duration) var(--_linear-progress-determinate-easing)}.secondary-bar{display:none}.bar-inner{inset:0;-webkit-animation:none;animation:none;-webkit-transition:background-color var(--_linear-progress-theme-transition-duration) var(--_linear-progress-theme-transition-timing);transition:background-color var(--_linear-progress-theme-transition-duration) var(--_linear-progress-theme-transition-timing);background:var(--_linear-progress-indicator-color)}.buffer-bar{background:var(--_linear-progress-track-color);inset:0;will-change:transform;-webkit-transition:background-color var(--_linear-progress-theme-transition-duration) var(--_linear-progress-theme-transition-timing),-webkit-transform var(--_linear-progress-determinate-duration) var(--_linear-progress-determinate-easing);transition:background-color var(--_linear-progress-theme-transition-duration) var(--_linear-progress-theme-transition-timing),-webkit-transform var(--_linear-progress-determinate-duration) var(--_linear-progress-determinate-easing);transition:transform var(--_linear-progress-determinate-duration) var(--_linear-progress-determinate-easing),background-color var(--_linear-progress-theme-transition-duration) var(--_linear-progress-theme-transition-timing);transition:transform var(--_linear-progress-determinate-duration) var(--_linear-progress-determinate-easing),background-color var(--_linear-progress-theme-transition-duration) var(--_linear-progress-theme-transition-timing),-webkit-transform var(--_linear-progress-determinate-duration) var(--_linear-progress-determinate-easing);-webkit-transform-origin:left center;transform-origin:left center}.track{inset:0;will-change:transform;-webkit-animation:linear infinite var(--_linear-progress-determinate-duration);animation:linear infinite var(--_linear-progress-determinate-duration);-webkit-animation-name:buffering;animation-name:buffering;background:var(--_linear-progress-track-color);-webkit-transition:background-color var(--_linear-progress-theme-transition-duration) var(--_linear-progress-theme-transition-timing);transition:background-color var(--_linear-progress-theme-transition-duration) var(--_linear-progress-theme-transition-timing)}.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(--_linear-progress-indeterminate-duration);animation:linear infinite var(--_linear-progress-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(--_linear-progress-indeterminate-duration);animation:linear infinite var(--_linear-progress-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(--_linear-progress-indeterminate-duration) primary-indeterminate-scale;animation:linear infinite var(--_linear-progress-indeterminate-duration) primary-indeterminate-scale}.forge-linear-progress--indeterminate .secondary-bar>.bar-inner{will-change:transform;-webkit-animation:linear infinite var(--_linear-progress-indeterminate-duration) secondary-indeterminate-scale;animation:linear infinite var(--_linear-progress-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}:host([theme=primary]) .forge-linear-progress{--_linear-progress-indicator-color:var(--forge-linear-progress-indicator-color, var(--forge-theme-primary, #3f51b5));--_linear-progress-track-color:var(--forge-linear-progress-track-color, var(--forge-theme-primary-container, #d1d5ed))}:host([theme=secondary]) .forge-linear-progress{--_linear-progress-indicator-color:var(--forge-linear-progress-indicator-color, var(--forge-theme-secondary, #ffc107));--_linear-progress-track-color:var(--forge-linear-progress-track-color, var(--forge-theme-secondary-container, #fff0c3))}:host([theme=success]) .forge-linear-progress{--_linear-progress-indicator-color:var(--forge-linear-progress-indicator-color, var(--forge-theme-success, #2e7d32));--_linear-progress-track-color:var(--forge-linear-progress-track-color, var(--forge-theme-success-container, #cde0ce))}:host([theme=error]) .forge-linear-progress{--_linear-progress-indicator-color:var(--forge-linear-progress-indicator-color, var(--forge-theme-error, #b00020));--_linear-progress-track-color:var(--forge-linear-progress-track-color, var(--forge-theme-error-container, #ecc2c9))}:host([theme=warning]) .forge-linear-progress{--_linear-progress-indicator-color:var(--forge-linear-progress-indicator-color, var(--forge-theme-warning, #d14900));--_linear-progress-track-color:var(--forge-linear-progress-track-color, var(--forge-theme-warning-container, #f4d3c2))}:host([theme=info]) .forge-linear-progress{--_linear-progress-indicator-color:var(--forge-linear-progress-indicator-color, var(--forge-theme-info, #1565c0));--_linear-progress-track-color:var(--forge-linear-progress-track-color, var(--forge-theme-info-container, #c7daf0))}@media screen and (forced-colors:active){.forge-linear-progress{--_linear-progress-indicator-color:var(--forge-linear-progress-indicator-color, CanvasText);--_linear-progress-track-color:var(--forge-linear-progress-track-color, GrayText);border:1px solid CanvasText}.forge-linear-progress.forge-linear-progress--indeterminate{--_linear-progress-track-color:var(--forge-linear-progress-track-color, Canvas)}}@-webkit-keyframes buffering{0%{-webkit-transform:translateX(calc(1 * var(--_linear-progress-track-background-width)));transform:translateX(calc(1 * var(--_linear-progress-track-background-width)))}}@keyframes buffering{0%{-webkit-transform:translateX(calc(1 * var(--_linear-progress-track-background-width)));transform:translateX(calc(1 * var(--_linear-progress-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(--_linear-progress-track-background-width)));transform:translateX(calc(-1 * var(--_linear-progress-track-background-width)))}}@keyframes buffering-rtl{0%{-webkit-transform:translateX(calc(-1 * var(--_linear-progress-track-background-width)));transform:translateX(calc(-1 * var(--_linear-progress-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
  *
@@ -25,20 +25,23 @@ const styles = ':host{display:block;position:relative;min-inline-size:80px;block
  * @property {boolean} determinate - Controls the determinate state.
  * @property {boolean} progress - Controls the progress while in a determinate state. Accepts values from `0` to `1`.
  * @property {boolean} buffer - Controls the buffer progress while in a determinate state. Accepts values from `0` to `1`.
+ * @property {string} theme - Sets the theme.
  *
  * @attribute {boolean} determinate - Controls the determinate state.
  * @attribute {number} progress - Controls the progress while in a determinate state. Accepts values from `0` to `1`.
  * @attribute {number} buffer - Controls the buffer progress while in a determinate state. Accepts values from `0` to `1`.
- * @attribute {string} data-aria-label - Propagates an `aria-label` to the underlying progress bar element.
+ * @attribute {string} theme - Sets the theme.
  *
  * @cssproperty --forge-linear-progress-height - The height of the element.
  * @cssproperty --forge-linear-progress-track-color - The background color of the indicator.
- * @cssproperty --forge-linear-progress-indicator-color - The color of the indicator.
  * @cssproperty --forge-linear-progress-track-shape - The shape of the indicator.
+ * @cssproperty --forge-linear-progress-indicator-color - The color of the indicator.
  * @cssproperty --forge-linear-progress-indicator-height - The height of the indicator only.
  * @cssproperty --forge-linear-progress-determinate-duration - The duration of the determinate animation.
  * @cssproperty --forge-linear-progress-indeterminate-duration - The duration of the indeterminate animation.
  * @cssproperty --forge-linear-progress-determinate-easing - The easing function to use for the determinate animation.
+ * @cssproperty --forge-linear-progress-theme-transition-duration - The duration of the theme transition.
+ * @cssproperty --forge-linear-progress-theme-transition-timing - The easing function to use for the theme transition.
  *
  * @csspart progressbar - Styles the progress bar container element
  */
@@ -48,7 +51,7 @@ let LinearProgressComponent = class LinearProgressComponent extends BaseComponen
             LINEAR_PROGRESS_CONSTANTS.attributes.DETERMINATE,
             LINEAR_PROGRESS_CONSTANTS.attributes.PROGRESS,
             LINEAR_PROGRESS_CONSTANTS.attributes.BUFFER,
-            LINEAR_PROGRESS_CONSTANTS.attributes.ARIA_LABEL
+            LINEAR_PROGRESS_CONSTANTS.attributes.THEME
         ];
     }
     constructor() {
@@ -56,6 +59,9 @@ let LinearProgressComponent = class LinearProgressComponent extends BaseComponen
         attachShadowTemplate(this, template, styles);
         this._foundation = new LinearProgressFoundation(new LinearProgressAdapter(this));
     }
+    connectedCallback() {
+        this._foundation.initialize();
+    }
     attributeChangedCallback(name, oldValue, newValue) {
         switch (name) {
             case LINEAR_PROGRESS_CONSTANTS.attributes.DETERMINATE:
@@ -67,8 +73,8 @@ let LinearProgressComponent = class LinearProgressComponent extends BaseComponen
             case LINEAR_PROGRESS_CONSTANTS.attributes.BUFFER:
                 this.buffer = coerceNumber(newValue);
                 break;
-            case LINEAR_PROGRESS_CONSTANTS.attributes.ARIA_LABEL:
-                this._foundation.ariaLabel = newValue;
+            case LINEAR_PROGRESS_CONSTANTS.attributes.THEME:
+                this.theme = newValue;
                 break;
         }
     }
@@ -82,6 +88,9 @@ __decorate([
 __decorate([
     FoundationProperty()
 ], LinearProgressComponent.prototype, "buffer", void 0);
+__decorate([
+    FoundationProperty()
+], LinearProgressComponent.prototype, "theme", void 0);
 LinearProgressComponent = __decorate([
     CustomElement({
         name: LINEAR_PROGRESS_CONSTANTS.elementName

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

@@ -21,7 +21,6 @@ export class ListAdapter extends BaseAdapter {
         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({ preventScroll: true });

package/esm/list/list/list.js

@@ -10,7 +10,7 @@ import { ListAdapter } from './list-adapter';
 import { ListFoundation } from './list-foundation';
 import { LIST_CONSTANTS } from './list-constants';
 const template = '<template><div class=\"forge-list\" part=\"root\"><slot></slot></div></template>';
-const styles = ':host{display:block}:host([hidden]){display:none}:host([navlist]){--forge-list-item-height:40px;--forge-list-item-margin:4px 8px;--forge-list-item-shape:4px;--forge-list-item-supporting-text-font-size:0.875rem;--forge-list-item-supporting-text-font-weight:500}.forge-list{--_container-color:var(--forge-list-container-color, transparent);--_block-padding:var(--forge-list-block-padding, 8px);--_inline-padding:var(--forge-list-inline-padding, 0);display:block;outline:0;background-color:var(--_container-color);padding:var(--_block-padding) var(--_inline-padding);margin:0;border-radius:inherit;min-width:inherit}';
+const styles = ':host{display:block}:host([hidden]){display:none}:host([navlist]){--forge-list-item-height:40px;--forge-list-item-margin:4px 8px;--forge-list-item-shape:4px;--forge-list-item-supporting-text-font-size:0.875rem;--forge-list-item-supporting-text-font-weight:500}.forge-list{--_list-container-color:var(--forge-list-container-color, transparent);--_list-block-padding:var(--forge-list-block-padding, 8px);--_list-inline-padding:var(--forge-list-inline-padding, 0)}.forge-list{display:block;outline:0;background-color:var(--_list-container-color);padding:var(--_list-block-padding) var(--_list-inline-padding);margin:0;border-radius:inherit;min-width:inherit}';
 import { ListItemComponent } from '../list-item';
 /**
  * @tag forge-list

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

@@ -7,8 +7,10 @@ import { BaseAdapter, IBaseAdapter } from '../../core/base/base-adapter';
 import { IListItemComponent } from './list-item';
 export interface IListItemAdapter extends IBaseAdapter<IListItemComponent> {
     initialize(): void;
-    setHref(href: string, target: string): void;
-    setHrefTarget(target: string): void;
+    setHref(href: string): void;
+    setAnchorTarget(target: string): void;
+    setAnchorDownload(download: string): void;
+    setAnchorRel(rel: string): void;
     setNonInteractive(value: boolean): void;
     setDisabled(value: boolean): void;
     setActive(value: boolean): void;
@@ -17,6 +19,8 @@ export interface IListItemAdapter extends IBaseAdapter<IListItemComponent> {
     isFocused(): boolean;
     setFocus(): void;
     animateStateLayer(): void;
+    clickAnchor(): void;
+    clickHost(): void;
 }
 export declare class ListItemAdapter extends BaseAdapter<IListItemComponent> implements IListItemAdapter {
     private _rootElement;
@@ -24,8 +28,10 @@ export declare class ListItemAdapter extends BaseAdapter<IListItemComponent> imp
     private _stateLayerElement;
     constructor(component: IListItemComponent);
     initialize(): void;
-    setHref(href: string, target: string): void;
-    setHrefTarget(target: string): void;
+    setHref(href: string): void;
+    setAnchorTarget(target: string): void;
+    setAnchorDownload(download: string): void;
+    setAnchorRel(rel: string): void;
     setNonInteractive(value: boolean): void;
     setDisabled(value: boolean): void;
     setActive(value: boolean): void;
@@ -42,6 +48,8 @@ export declare class ListItemAdapter extends BaseAdapter<IListItemComponent> imp
     isFocused(): boolean;
     setFocus(): void;
     animateStateLayer(): void;
+    clickAnchor(): void;
+    clickHost(): void;
     private _createAnchorRootElement;
     private _createDefaultRootElement;
     private _getParentList;

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

@@ -28,10 +28,10 @@ export class ListItemAdapter extends BaseAdapter {
             this._setRole(list);
         }
     }
-    setHref(href, target) {
+    setHref(href) {
         if (href) {
             if (this._rootElement.tagName !== 'A') {
-                const anchor = this._createAnchorRootElement(target);
+                const anchor = this._createAnchorRootElement();
                 this._rootElement = replaceElement(this._rootElement, anchor);
             }
             this._rootElement.href = href;
@@ -41,11 +41,21 @@ export class ListItemAdapter extends BaseAdapter {
             this._rootElement = replaceElement(this._rootElement, defaultEl);
         }
     }
-    setHrefTarget(target) {
+    setAnchorTarget(target) {
         if (this._rootElement.tagName === 'A') {
             this._rootElement.target = target;
         }
     }
+    setAnchorDownload(download) {
+        if (this._rootElement.tagName === 'A') {
+            this._rootElement.download = download;
+        }
+    }
+    setAnchorRel(rel) {
+        if (this._rootElement.tagName === 'A') {
+            this._rootElement.rel = rel;
+        }
+    }
     setNonInteractive(value) {
         this._rootElement.tabIndex = value ? -1 : 0;
         if (value) {
@@ -125,11 +135,32 @@ export class ListItemAdapter extends BaseAdapter {
     animateStateLayer() {
         this._stateLayerElement.playAnimation();
     }
-    _createAnchorRootElement(target) {
+    clickAnchor() {
+        if (this._rootElement.tagName === 'A') {
+            this._rootElement.click();
+        }
+    }
+    clickHost() {
+        // Calling click() on the prototype ensures we don't end up in an infinite
+        // recursion since the host overrides the HTMLElement.click() method
+        HTMLElement.prototype.click.call(this._component);
+    }
+    _createAnchorRootElement() {
         const a = document.createElement('a');
         a.classList.add(LIST_ITEM_CONSTANTS.classes.ROOT);
         a.setAttribute('part', 'root');
-        a.target = target;
+        if (this._component.href) {
+            a.href = this._component.href;
+        }
+        if (this._component.target) {
+            a.target = this._component.target;
+        }
+        if (this._component.download) {
+            a.download = this._component.download;
+        }
+        if (this._component.rel) {
+            a.rel = this._component.rel;
+        }
         return a;
     }
     _createDefaultRootElement() {

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

@@ -9,6 +9,8 @@ export declare const LIST_ITEM_CONSTANTS: {
     observedAttributes: {
         HREF: string;
         TARGET: string;
+        DOWNLOAD: string;
+        REL: string;
         STATIC: string;
         NON_INTERACTIVE: string;
         DISABLED: string;
@@ -25,6 +27,8 @@ export declare const LIST_ITEM_CONSTANTS: {
     attributes: {
         HREF: string;
         TARGET: string;
+        DOWNLOAD: string;
+        REL: string;
         STATIC: string;
         NON_INTERACTIVE: string;
         DISABLED: string;

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

@@ -8,6 +8,8 @@ const elementName = `${COMPONENT_NAME_PREFIX}list-item`;
 const observedAttributes = {
     HREF: 'href',
     TARGET: 'target',
+    DOWNLOAD: 'download',
+    REL: 'rel',
     STATIC: 'static',
     NON_INTERACTIVE: 'non-interactive',
     DISABLED: 'disabled',
@@ -27,7 +29,7 @@ const classes = {
 };
 const selectors = {
     ROOT: `.${classes.ROOT}`,
-    CHECKBOX_RADIO_SELECTOR: 'input[type=checkbox]:not(:disabled):not([forge-ignore]),input[type=radio]:not(:disabled):not([forge-ignore])',
+    CHECKBOX_RADIO_SELECTOR: ':is(input[type=checkbox], input[type=radio], forge-checkbox):not(:disabled):not([forge-ignore])',
     SWITCH_SELECTOR: 'forge-switch:not([disabled]):not([forge-ignore])',
     IGNORE: '[forge-ignore],[data-forge-ignore]'
 };

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

@@ -8,6 +8,8 @@ import { IListItemAdapter } from './list-item-adapter';
 export interface IListItemFoundation extends ICustomElementFoundation {
     href: string;
     target: string;
+    download: string;
+    rel: string;
     static: boolean;
     nonInteractive: boolean;
     disabled: boolean;
@@ -26,6 +28,8 @@ export declare class ListItemFoundation implements IListItemFoundation {
     private _adapter;
     private _href;
     private _target;
+    private _download;
+    private _rel;
     private _nonInteractive;
     private _disabled;
     private _selected;
@@ -44,6 +48,7 @@ export declare class ListItemFoundation implements IListItemFoundation {
     initialize(): void;
     disconnect(): void;
     setFocus(): void;
+    click(): void;
     private _onPointerDown;
     private _onKeydown;
     private _onClick;
@@ -52,6 +57,10 @@ export declare class ListItemFoundation implements IListItemFoundation {
     set href(value: string);
     get target(): string;
     set target(value: string);
+    get download(): string;
+    set download(value: string);
+    get rel(): string;
+    set rel(value: string);
     get static(): boolean;
     set static(value: boolean);
     get nonInteractive(): boolean;

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

@@ -7,7 +7,9 @@ import { LIST_ITEM_CONSTANTS } from './list-item-constants';
 export class ListItemFoundation {
     constructor(_adapter) {
         this._adapter = _adapter;
-        this._target = '_blank';
+        this._target = '';
+        this._download = '';
+        this._rel = '';
         this._nonInteractive = false;
         this._disabled = false;
         this._selected = false;
@@ -40,6 +42,14 @@ export class ListItemFoundation {
     setFocus() {
         this._adapter.setFocus();
     }
+    click() {
+        if (this._href) {
+            this._adapter.clickAnchor();
+        }
+        else {
+            this._adapter.clickHost();
+        }
+    }
     _onPointerDown(evt) {
         if (this._adapter.isFocused()) {
             evt.preventDefault();
@@ -47,7 +57,7 @@ export class ListItemFoundation {
     }
     _onKeydown(evt) {
         if (evt.key === 'Enter' || evt.key === ' ') {
-            if (evt.key === ' ') {
+            if (!this._href && evt.key === ' ') {
                 evt.preventDefault();
             }
             this._adapter.animateStateLayer();
@@ -81,7 +91,7 @@ export class ListItemFoundation {
     set href(value) {
         if (this._href !== value) {
             this._href = value;
-            this._adapter.setHref(this._href, this._target);
+            this._adapter.setHref(this._href);
             this._adapter.toggleHostAttribute(LIST_ITEM_CONSTANTS.attributes.HREF, !!this._href, this._href);
         }
     }
@@ -92,11 +102,31 @@ export class ListItemFoundation {
         if (this._target !== value) {
             this._target = value;
             if (this._href) {
-                this._adapter.setHrefTarget(this._target);
+                this._adapter.setAnchorTarget(this._target);
             }
             this._adapter.toggleHostAttribute(LIST_ITEM_CONSTANTS.attributes.TARGET, !!this._target, this._target);
         }
     }
+    get download() {
+        return this._download;
+    }
+    set download(value) {
+        if (this._download !== value) {
+            this._download = value;
+            this._adapter.setAnchorDownload(this._download);
+            this._adapter.toggleHostAttribute(LIST_ITEM_CONSTANTS.attributes.DOWNLOAD, !!this._download, this._download);
+        }
+    }
+    get rel() {
+        return this._rel;
+    }
+    set rel(value) {
+        if (this._rel !== value) {
+            this._rel = value;
+            this._adapter.setAnchorRel(this._rel);
+            this._adapter.toggleHostAttribute(LIST_ITEM_CONSTANTS.attributes.REL, !!this._rel, this._rel);
+        }
+    }
     get static() {
         return this.nonInteractive;
     }

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

@@ -8,6 +8,8 @@ import { IListItemSelectEventData } from './list-item-constants';
 export interface IListItemComponent<T = unknown> extends ICustomElement {
     href: string;
     target: string;
+    download: string;
+    rel: string;
     /** @deprecated Use nonInteractive instead. */
     static: boolean;
     nonInteractive: boolean;
@@ -35,7 +37,10 @@ declare global {
  *
  * @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} href - The href of the anchor. This forces the list item to render as an anchor element.
+ * @property {string} target - The target of the anchor when an `href` is set. Defaults to `'_blank'`.
+ * @property {boolean} download - The anchor download attribute.
+ * @property {boolean} rel - The anchor rel attribute.
  * @property {string} target - The target of the list item when an `href` is set. Defaults to `'_blank'`.
  * @property {boolean} nonInteractive - If true, the list item will not be interactive.
  * @property {boolean} static - If true, the list item will not be interactive. Deprecated use `nonInteractive` instead.
@@ -50,7 +55,10 @@ declare global {
  * @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} href - The href of the anchor This forces the list item to render as an anchor element.
+ * @attribute {string} target - The target of the anchor when an `href` is set. Defaults to `'_blank'`.
+ * @attribute {boolean} download - The anchor download attribute.
+ * @attribute {boolean} rel - The anchor rel attribute.
  * @attribute {string} target - The target of the list item when an `href` is set. Defaults to `'_blank'`.
  * @attribute {boolean} non-interactive - If true, the list item will not be interactive.
  * @attribute {boolean} static - If true, the list item will not be interactive. Deprecated use `non-interactive` instead.
@@ -80,8 +88,8 @@ declare global {
  *
  * @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.
+ * @csspart focus-indicator - The forwarded focus indicator's internal indicator element.
+ * @csspart state-layer - The forwarded state layer's internal surface element.
  *
  * @cssprop --forge-list-item-background-color - The background color.
  * @cssprop --forge-list-item-shape - The shape of the list item.
@@ -132,6 +140,8 @@ export declare class ListItemComponent extends HTMLElement implements IListItemC
     focus(): void;
     href: string;
     target: string;
+    download: string;
+    rel: string;
     /** @deprecated Use nonInteractive instead. */
     static: boolean;
     nonInteractive: boolean;
@@ -145,4 +155,5 @@ export declare class ListItemComponent extends HTMLElement implements IListItemC
     twoLine: boolean;
     threeLine: boolean;
     wrap: boolean;
+    click(): void;
 }