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

package/esm/label/label-aware.js

@@ -0,0 +1,13 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+/**
+ * Determines if an object is label aware.
+ * @param obj - The object to check.
+ * @returns True if the object is label aware, false otherwise.
+ */
+export const isLabelAware = (obj) => {
+    return typeof obj.labelClickedCallback === 'function' && typeof obj.labelChangedCallback === 'function';
+};

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

@@ -0,0 +1,17 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+export declare const LABEL_CONSTANTS: {
+    elementName: "forge-label";
+    selectors: {
+        ROOT: string;
+        SLOT: string;
+    };
+    attributes: {
+        FOR: string;
+        DYNAMIC: string;
+    };
+    labelableChildSelectors: ("forge-switch" | "forge-icon-button" | "forge-checkbox" | "forge-button")[];
+};

package/esm/label/label-constants.js

@@ -0,0 +1,31 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { BUTTON_CONSTANTS } from '../button';
+import { CHECKBOX_CONSTANTS } from '../checkbox';
+import { COMPONENT_NAME_PREFIX } from '../constants';
+import { ICON_BUTTON_CONSTANTS } from '../icon-button';
+import { SWITCH_CONSTANTS } from '../switch';
+const elementName = `${COMPONENT_NAME_PREFIX}label`;
+const attributes = {
+    FOR: 'for',
+    DYNAMIC: 'dynamic'
+};
+const selectors = {
+    ROOT: '.forge-label',
+    SLOT: 'slot'
+};
+const labelableChildSelectors = [
+    CHECKBOX_CONSTANTS.elementName,
+    SWITCH_CONSTANTS.elementName,
+    BUTTON_CONSTANTS.elementName,
+    ICON_BUTTON_CONSTANTS.elementName
+];
+export const LABEL_CONSTANTS = {
+    elementName,
+    selectors,
+    attributes,
+    labelableChildSelectors
+};

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

@@ -0,0 +1,40 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { ICustomElementFoundation } from '@tylertech/forge-core';
+import { ILabelAdapter } from './label-adapter';
+export interface ILabelFoundation extends ICustomElementFoundation {
+    for: string | null | undefined;
+    forElement: HTMLElement | null | undefined;
+    dynamic: boolean;
+    disconnect(): void;
+    update(): void;
+}
+export declare class LabelFoundation implements ILabelFoundation {
+    private _adapter;
+    private _for;
+    private _forElement;
+    private _dynamic;
+    private _isConnected;
+    private readonly _clickListener;
+    private readonly _slotChangeListener;
+    private readonly _mutationCallback;
+    constructor(_adapter: ILabelAdapter);
+    initialize(): void;
+    disconnect(): void;
+    update(): void;
+    private _handleClick;
+    private _handleSlotChange;
+    private _handleMutation;
+    private _connect;
+    private _disconnect;
+    private _tryConnect;
+    get for(): string | null | undefined;
+    set for(value: string | null | undefined);
+    get forElement(): HTMLElement | null | undefined;
+    set forElement(value: HTMLElement | null | undefined);
+    get dynamic(): boolean;
+    set dynamic(value: boolean);
+}

package/esm/label/label-foundation.js

@@ -0,0 +1,106 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { LABEL_CONSTANTS } from './label-constants';
+export class LabelFoundation {
+    constructor(_adapter) {
+        this._adapter = _adapter;
+        this._dynamic = false;
+        this._isConnected = false;
+        this._clickListener = (evt) => this._handleClick(evt);
+        this._slotChangeListener = () => this._handleSlotChange();
+        this._mutationCallback = () => this._handleMutation();
+    }
+    initialize() {
+        var _a;
+        this._adapter.addSlotChangeListener(this._slotChangeListener);
+        this._adapter.trySetTarget((_a = this._for) !== null && _a !== void 0 ? _a : null);
+        if (this._adapter.hasTargetElement()) {
+            this._connect();
+        }
+    }
+    disconnect() {
+        this._disconnect();
+        this._adapter.destroy();
+    }
+    update() {
+        this._adapter.updateTargetLabel();
+    }
+    _handleClick(evt) {
+        // Prevent duplicate clicks from a nested target element
+        if (evt.target === this._adapter.getTargetElement()) {
+            return;
+        }
+        this._adapter.clickTarget();
+    }
+    _handleSlotChange() {
+        if (!this._for && !this._forElement) {
+            this._adapter.trySetTarget(null);
+            this._tryConnect();
+        }
+    }
+    _handleMutation() {
+        this._adapter.updateTargetLabel();
+    }
+    _connect() {
+        this._adapter.addHostListener('click', this._clickListener);
+        this._adapter.updateTargetLabel();
+        if (this._dynamic) {
+            this._adapter.addMutationObserver(this._mutationCallback);
+        }
+        this._isConnected = true;
+    }
+    _disconnect() {
+        this._adapter.removeHostListener('click', this._clickListener);
+        this._adapter.removeMutationObserver();
+        this._isConnected = false;
+    }
+    _tryConnect() {
+        if (!this._adapter.hasTargetElement()) {
+            this._disconnect();
+        }
+        else if (!this._isConnected) {
+            this._connect();
+        }
+    }
+    get for() {
+        return this._for;
+    }
+    set for(value) {
+        var _a, _b;
+        if (this._for !== value) {
+            this._for = value;
+            this._adapter.toggleHostAttribute(LABEL_CONSTANTS.attributes.FOR, !!this.for, (_a = this.for) !== null && _a !== void 0 ? _a : undefined);
+            this._adapter.trySetTarget((_b = this._for) !== null && _b !== void 0 ? _b : null);
+            this._tryConnect();
+        }
+    }
+    get forElement() {
+        return this._forElement;
+    }
+    set forElement(value) {
+        var _a;
+        if (this._forElement !== value) {
+            this._forElement = value;
+            this._adapter.setTargetElement((_a = this._forElement) !== null && _a !== void 0 ? _a : null);
+            this._tryConnect();
+        }
+    }
+    get dynamic() {
+        return this._dynamic;
+    }
+    set dynamic(value) {
+        if (this._dynamic !== value) {
+            this._dynamic = value;
+            this._adapter.toggleHostAttribute(LABEL_CONSTANTS.attributes.DYNAMIC, this._dynamic);
+            if (!this._dynamic) {
+                this._adapter.removeMutationObserver();
+            }
+            else if (this._adapter.hasTargetElement()) {
+                this._adapter.addMutationObserver(this._mutationCallback);
+            }
+        }
+    }
+}

package/esm/label/label.d.ts

@@ -0,0 +1,49 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { BaseComponent, IBaseComponent } from '../core';
+export interface ILabelComponent extends IBaseComponent {
+    for: string | null | undefined;
+    forElement: HTMLElement | null | undefined;
+    dynamic: boolean;
+    update(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'forge-label': ILabelComponent;
+    }
+}
+/**
+ * @tag forge-label
+ *
+ * @summary The Forge Label component is used to associate a text label with a compatible Forge
+ * component.
+ *
+ * @property {string | null | undefined} for - The id of the associated element.
+ * @property {HTMLElement | null | undefined} forElement - The associated element.
+ * @property {boolean} dynamic - Propagates changes in the label's text content to the associated element.
+ *
+ * @attribute {string} for - The id of the associated form component.
+ * @attribute {boolean} dynamic - Propagates changes in the label's text content to the associated element.
+ *
+ * @method update - Updates the targetted element with the label's current text content.
+ *
+ * @csspart label - Styles the label's root element.
+ */
+export declare class LabelComponent extends BaseComponent implements ILabelComponent {
+    static get observedAttributes(): string[];
+    private _foundation;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+    for: string | null | undefined;
+    forElement: HTMLElement | null | undefined;
+    dynamic: boolean;
+    /**
+     * Updates the targetted element with the label's current text content.
+     */
+    update(): void;
+}

package/esm/label/label.js

@@ -0,0 +1,80 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import { CustomElement, FoundationProperty, attachShadowTemplate, coerceBoolean } from '@tylertech/forge-core';
+import { BaseComponent } from '../core';
+import { LabelAdapter } from './label-adapter';
+import { LABEL_CONSTANTS } from './label-constants';
+import { LabelFoundation } from './label-foundation';
+const template = '<template><span class=\"forge-label\" part=\"label\"><slot></slot></span></template>';
+const style = ':host{display:inline-block}:host([hidden]){display:none}.forge-label{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-label-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-label-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-font-size-scale, .75)));font-weight:var(--forge-typography-label-font-weight,400);line-height:var(--forge-typography-label-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-line-height-scale, 1.25)));letter-spacing:var(--forge-typography-label-letter-spacing, .0357142857em);text-transform:var(--forge-typography-label-text-transform,inherit);-webkit-text-decoration:var(--forge-typography-label-text-decoration,inherit);text-decoration:var(--forge-typography-label-text-decoration,inherit);display:contents;cursor:default}';
+/**
+ * @tag forge-label
+ *
+ * @summary The Forge Label component is used to associate a text label with a compatible Forge
+ * component.
+ *
+ * @property {string | null | undefined} for - The id of the associated element.
+ * @property {HTMLElement | null | undefined} forElement - The associated element.
+ * @property {boolean} dynamic - Propagates changes in the label's text content to the associated element.
+ *
+ * @attribute {string} for - The id of the associated form component.
+ * @attribute {boolean} dynamic - Propagates changes in the label's text content to the associated element.
+ *
+ * @method update - Updates the targetted element with the label's current text content.
+ *
+ * @csspart label - Styles the label's root element.
+ */
+let LabelComponent = class LabelComponent extends BaseComponent {
+    static get observedAttributes() {
+        return [
+            LABEL_CONSTANTS.attributes.FOR,
+            LABEL_CONSTANTS.attributes.DYNAMIC
+        ];
+    }
+    constructor() {
+        super();
+        attachShadowTemplate(this, template, style);
+        this._foundation = new LabelFoundation(new LabelAdapter(this));
+    }
+    connectedCallback() {
+        this._foundation.initialize();
+    }
+    disconnectedCallback() {
+        this._foundation.disconnect();
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        switch (name) {
+            case LABEL_CONSTANTS.attributes.FOR:
+                this.for = newValue;
+                break;
+            case LABEL_CONSTANTS.attributes.DYNAMIC:
+                this.dynamic = coerceBoolean(newValue);
+                break;
+        }
+    }
+    /**
+     * Updates the targetted element with the label's current text content.
+     */
+    update() {
+        this._foundation.update();
+    }
+};
+__decorate([
+    FoundationProperty()
+], LabelComponent.prototype, "for", void 0);
+__decorate([
+    FoundationProperty()
+], LabelComponent.prototype, "forElement", void 0);
+__decorate([
+    FoundationProperty()
+], LabelComponent.prototype, "dynamic", void 0);
+LabelComponent = __decorate([
+    CustomElement({
+        name: LABEL_CONSTANTS.elementName
+    })
+], LabelComponent);
+export { LabelComponent };

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

@@ -3,6 +3,7 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
+import { Theme } from '../constants';
 export declare const LINEAR_PROGRESS_CONSTANTS: {
     elementName: "forge-linear-progress";
     classes: {
@@ -17,6 +18,8 @@ export declare const LINEAR_PROGRESS_CONSTANTS: {
         DETERMINATE: string;
         PROGRESS: string;
         BUFFER: string;
+        THEME: string;
         ARIA_LABEL: string;
     };
 };
+export type LinearProgressTheme = Theme;

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

@@ -17,6 +17,7 @@ const attributes = {
     DETERMINATE: 'determinate',
     PROGRESS: 'progress',
     BUFFER: 'buffer',
+    THEME: 'theme',
     ARIA_LABEL: 'data-aria-label'
 };
 export const LINEAR_PROGRESS_CONSTANTS = {

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

@@ -5,16 +5,19 @@
  */
 import { ICustomElementFoundation } from '@tylertech/forge-core';
 import { ILinearProgressAdapter } from './linear-progress-adapter';
+import { LinearProgressTheme } from './linear-progress-constants';
 export interface ICircularProgressFoundation extends ICustomElementFoundation {
     determinate: boolean;
     progress: number;
     buffer: number;
+    theme: LinearProgressTheme;
 }
 export declare class LinearProgressFoundation {
     private _adapter;
     private _determinate;
     private _progress;
     private _buffer;
+    private _theme;
     constructor(_adapter: ILinearProgressAdapter);
     set ariaLabel(value: string);
     get determinate(): boolean;
@@ -23,4 +26,6 @@ export declare class LinearProgressFoundation {
     set progress(value: number);
     get buffer(): number;
     set buffer(value: number);
+    get theme(): LinearProgressTheme;
+    set theme(value: LinearProgressTheme);
 }

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

@@ -10,6 +10,7 @@ export class LinearProgressFoundation {
         this._determinate = false;
         this._progress = 0;
         this._buffer = 1;
+        this._theme = 'primary';
     }
     set ariaLabel(value) {
         this._adapter.setAriaLabel(value);
@@ -23,7 +24,7 @@ export class LinearProgressFoundation {
             this._adapter.setBuffer(this._determinate ? this._buffer : 1);
             this._adapter.setProgress(this._determinate ? this._progress : 0);
             this._adapter.setDeterminate(this._determinate);
-            this._adapter.toggleHostAttribute(LINEAR_PROGRESS_CONSTANTS.attributes.DETERMINATE, value);
+            this._adapter.toggleHostAttribute(LINEAR_PROGRESS_CONSTANTS.attributes.DETERMINATE, this._determinate);
         }
     }
     get progress() {
@@ -35,7 +36,7 @@ export class LinearProgressFoundation {
             if (this._determinate) {
                 this._adapter.setProgress(this._progress);
             }
-            this._adapter.setHostAttribute(LINEAR_PROGRESS_CONSTANTS.attributes.PROGRESS, value.toString());
+            this._adapter.setHostAttribute(LINEAR_PROGRESS_CONSTANTS.attributes.PROGRESS, this._progress.toString());
         }
     }
     get buffer() {
@@ -47,7 +48,16 @@ export class LinearProgressFoundation {
             if (this._determinate) {
                 this._adapter.setBuffer(this._buffer);
             }
-            this._adapter.setHostAttribute(LINEAR_PROGRESS_CONSTANTS.attributes.BUFFER, value.toString());
+            this._adapter.setHostAttribute(LINEAR_PROGRESS_CONSTANTS.attributes.BUFFER, this._buffer.toString());
+        }
+    }
+    get theme() {
+        return this._theme;
+    }
+    set theme(value) {
+        if (this._theme !== value) {
+            this._theme = value;
+            this._adapter.toggleHostAttribute(LINEAR_PROGRESS_CONSTANTS.attributes.THEME, !!this._theme, this._theme);
         }
     }
 }

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,24 @@ 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} theme - Sets the theme.
  * @attribute {string} data-aria-label - Propagates an `aria-label` to the underlying progress bar element.
  *
  * @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
  */
@@ -53,4 +59,5 @@ export declare class LinearProgressComponent extends BaseComponent implements IL
     determinate: boolean;
     progress: number;
     buffer: number;
+    theme: LinearProgressTheme;
 }

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-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 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,24 @@ 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} theme - Sets the theme.
  * @attribute {string} data-aria-label - Propagates an `aria-label` to the underlying progress bar element.
  *
  * @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,6 +52,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.THEME,
             LINEAR_PROGRESS_CONSTANTS.attributes.ARIA_LABEL
         ];
     }
@@ -67,6 +72,9 @@ let LinearProgressComponent = class LinearProgressComponent extends BaseComponen
             case LINEAR_PROGRESS_CONSTANTS.attributes.BUFFER:
                 this.buffer = coerceNumber(newValue);
                 break;
+            case LINEAR_PROGRESS_CONSTANTS.attributes.THEME:
+                this.theme = newValue;
+                break;
             case LINEAR_PROGRESS_CONSTANTS.attributes.ARIA_LABEL:
                 this._foundation.ariaLabel = newValue;
                 break;
@@ -82,6 +90,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