@tylertech/forge 3.4.1 → 3.5.0

package/esm/key/key-item/key-item.js

@@ -0,0 +1,86 @@
+/**
+ * @license
+ * Copyright Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import { LitElement, html, unsafeCSS } from 'lit';
+import { customElement, property, queryAssignedNodes, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { setDefaultAria } from '../../core/utils/a11y-utils';
+const styles = ':host{display:inline}.forge-key-item{--_key-item-icon-color:var(--forge-key-item-icon-color, var(--forge-theme-tertiary, #3d5afe));--_key-item-label-color:var(--forge-key-item-label-color, var(--forge-theme-text-high, rgba(0, 0, 0, 0.87)));--_key-item-value-color:var(--forge-key-item-value-color, var(--forge-theme-text-medium, rgba(0, 0, 0, 0.6)));--_key-item-gap:var(--forge-key-item-gap, var(--forge-spacing-xsmall, 8px));--_key-item-icon-size:var(--forge-key-item-icon-size, calc(var(--forge-typography-font-size, 1rem) * 1))}.forge-key-item{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-label1-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-label1-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-font-size-scale, .75)));font-weight:var(--forge-typography-label1-font-weight,400);line-height:var(--forge-typography-label1-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-line-height-scale, 1.25)));letter-spacing:var(--forge-typography-label1-letter-spacing, .0357142857em);text-transform:var(--forge-typography-label1-text-transform,inherit);text-decoration:var(--forge-typography-label1-text-decoration,inherit);box-sizing:border-box;display:grid;grid-template:\"icon label\" \"icon value\";column-gap:var(--_key-item-gap);inline-size:fit-content;line-height:normal}.forge-key-item.inline{grid-template:\"icon label value\";grid-template-columns:auto 1fr auto;align-items:center;inline-size:auto}.forge-key-item.no-value{grid-template:\"icon label\";align-items:center}.forge-key-item.no-value .value{display:none}.forge-key-item:not(.inline,.no-value) .label{padding-block-start:1px}.icon{--forge-icon-size:var(--_key-item-icon-size);grid-area:icon;color:var(--_key-item-icon-color)}.label{grid-area:label;color:var(--_key-item-label-color)}.value{grid-area:value;color:var(--_key-item-value-color)}.default-icon{block-size:calc(var(--_key-item-icon-size) - 1px);inline-size:calc(var(--_key-item-icon-size) - 1px);border-radius:50%;background:currentColor}';
+/**
+ * @tag forge-key-item
+ *
+ * @summary Key items label a chart or data visualization.
+ *
+ * @slot - The default slot for the label.
+ * @slot icon - The icon to display.
+ * @slot value - The value to display.
+ *
+ * @cssproperty --forge-key-item-icon-color - The color of the icon.
+ * @cssproperty --forge-key-item-label-color - The color of the label.
+ * @cssproperty --forge-key-item-value-color - The color of the value.
+ * @cssproperty --forge-key-item-gap - The spacing between the icon and label.
+ * @cssproperty --forge-key-item-icon-size - The size of the icon.
+ *
+ * @csspart root - The root element.
+ * @csspart icon - The icon element.
+ * @csspart label - The label element.
+ * @csspart value - The value element.
+ */
+let KeyItemComponent = class KeyItemComponent extends LitElement {
+    constructor() {
+        super();
+        /**
+         * Whether the label and value dislay on one line.
+         * @default false
+         * @attribute
+         */
+        this.inline = false;
+        this._hasValue = false;
+        this._internals = this.attachInternals();
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        setDefaultAria(this, this._internals, {
+            role: 'listitem'
+        });
+        this._handleSlotChange();
+    }
+    render() {
+        return html `
+      <div part="root" class=${classMap({ 'forge-key-item': true, inline: this.inline, 'no-value': !this._hasValue })}>
+        <div part="icon" class="icon">
+          <slot name="icon">
+            <div class="default-icon"></div>
+          </slot>
+        </div>
+        <div part="label" class="label">
+          <slot></slot>
+        </div>
+        <div part="value" class="value" @slotchange=${this._handleSlotChange}>
+          <slot name="value"></slot>
+        </div>
+      </div>
+    `;
+    }
+    _handleSlotChange() {
+        const nodes = this._valueNodes.filter(node => !!node.textContent?.trim());
+        this._hasValue = !!nodes.length;
+    }
+};
+KeyItemComponent.styles = unsafeCSS(styles);
+__decorate([
+    property({ type: Boolean })
+], KeyItemComponent.prototype, "inline", void 0);
+__decorate([
+    state()
+], KeyItemComponent.prototype, "_hasValue", void 0);
+__decorate([
+    queryAssignedNodes({ slot: 'value' })
+], KeyItemComponent.prototype, "_valueNodes", void 0);
+KeyItemComponent = __decorate([
+    customElement('forge-key-item')
+], KeyItemComponent);
+export { KeyItemComponent };

package/esm/label-value/label-value.js

@@ -8,7 +8,7 @@ import { customElement, attachShadowTemplate, coerceBoolean } from '@tylertech/f
 import { LABEL_VALUE_CONSTANTS } from './label-value-constants';
 import { BaseComponent } from '../core/base/base-component';
 const template = '<template><div class=\"forge-label-value\" part=\"root\"><div class=\"icon\" part=\"icon\"><slot name=\"icon\"></slot></div><div class=\"label\" part=\"label\"><slot name=\"label\"></slot></div><div class=\"value\" part=\"value\"><slot name=\"value\"></slot></div></div></template>';
-const styles = ':host{display:inline-block;min-width:0}:host([hidden]){display:none}.forge-label-value{--_label-value-align:var(--forge-label-value-align, start);--_label-value-label-spacing:var(--forge-label-value-label-spacing, var(--forge-spacing-xxsmall, 4px));--_label-value-label-block-start-spacing:var(--forge-label-value-label-block-start-spacing, var(--_label-value-label-spacing));--_label-value-label-block-end-spacing:var(--forge-label-value-label-block-end-spacing, var(--_label-value-label-spacing));--_label-value-label-color:var(--forge-label-value-label-color, var(--forge-theme-text-medium, rgba(0, 0, 0, 0.6)));--_label-value-icon-spacing:var(--forge-label-value-icon-spacing, var(--forge-spacing-xxsmall, 4px));--_label-value-inline-label-spacing:var(--forge-label-value-inline-label-spacing, var(--forge-spacing-xsmall, 8px));--_label-value-empty-color:var(--forge-label-value-empty-color, var(--forge-theme-text-medium, rgba(0, 0, 0, 0.6)));--_label-value-empty-style:var(--forge-label-value-empty-style, italic)}.forge-label-value{display:grid;grid-template-columns:auto 1fr;grid-template-areas:\"icon label\" \"icon value\"}.label{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-label2-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-label2-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-font-size-scale, .8125)));font-weight:var(--forge-typography-label2-font-weight,400);line-height:var(--forge-typography-label2-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-line-height-scale, 1.25)));letter-spacing:var(--forge-typography-label2-letter-spacing, .0096153846em);text-transform:var(--forge-typography-label2-text-transform,inherit);text-decoration:var(--forge-typography-label2-text-decoration,inherit);grid-area:label;justify-self:var(--_label-value-align);margin-block-start:var(--_label-value-label-block-start-spacing);margin-block-end:var(--_label-value-label-block-end-spacing);line-height:normal;text-align:var(--_label-value-align);color:var(--_label-value-label-color)}.value{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-body2-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-body2-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-font-size-scale, 1)));font-weight:var(--forge-typography-body2-font-weight,400);line-height:var(--forge-typography-body2-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-line-height-scale, 1.375)));letter-spacing:var(--forge-typography-body2-letter-spacing, .015625em);text-transform:var(--forge-typography-body2-text-transform,inherit);text-decoration:var(--forge-typography-body2-text-decoration,inherit);grid-area:value;display:grid;align-items:center;justify-self:var(--_label-value-align);line-height:normal;text-align:var(--_label-value-align)}.icon{display:inline-flex;grid-area:icon}::slotted([slot=icon]){margin-inline-end:var(--_label-value-icon-spacing)}:host(:is([inline],[dense])) .forge-label-value{display:flex;align-items:center}:host(:is([inline],[dense])) .label{margin-block:0;margin-inline-end:var(--_label-value-inline-label-spacing)}:host([ellipsis]) ::slotted([slot=value]){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host([empty]) .value{color:var(--_label-value-empty-color);font-style:var(--_label-value-empty-style)}';
+const styles = ':host{display:inline-block;min-width:0}:host([hidden]){display:none}.forge-label-value{--_label-value-align:var(--forge-label-value-align, start);--_label-value-label-spacing:var(--forge-label-value-label-spacing, var(--forge-spacing-xxsmall, 4px));--_label-value-label-block-start-spacing:var(--forge-label-value-label-block-start-spacing, var(--_label-value-label-spacing));--_label-value-label-block-end-spacing:var(--forge-label-value-label-block-end-spacing, var(--_label-value-label-spacing));--_label-value-label-color:var(--forge-label-value-label-color, var(--forge-theme-text-medium, rgba(0, 0, 0, 0.6)));--_label-value-icon-spacing:var(--forge-label-value-icon-spacing, var(--forge-spacing-xxsmall, 4px));--_label-value-inline-label-spacing:var(--forge-label-value-inline-label-spacing, var(--forge-spacing-xsmall, 8px));--_label-value-empty-color:var(--forge-label-value-empty-color, var(--forge-theme-text-medium, rgba(0, 0, 0, 0.6)));--_label-value-empty-style:var(--forge-label-value-empty-style, italic)}.forge-label-value{display:grid;grid-template-columns:auto 1fr;grid-template-areas:\"icon label\" \"icon value\"}.label{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-label2-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-label2-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-font-size-scale, .8125)));font-weight:var(--forge-typography-label2-font-weight,400);line-height:var(--forge-typography-label2-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-line-height-scale, 1.25)));letter-spacing:var(--forge-typography-label2-letter-spacing, .0096153846em);text-transform:var(--forge-typography-label2-text-transform,inherit);text-decoration:var(--forge-typography-label2-text-decoration,inherit);grid-area:label;justify-self:var(--_label-value-align);margin-block-start:var(--_label-value-label-block-start-spacing);margin-block-end:var(--_label-value-label-block-end-spacing);line-height:normal;text-align:var(--_label-value-align);overflow-wrap:anywhere;color:var(--_label-value-label-color)}.value{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-body2-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-body2-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-font-size-scale, 1)));font-weight:var(--forge-typography-body2-font-weight,400);line-height:var(--forge-typography-body2-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-line-height-scale, 1.375)));letter-spacing:var(--forge-typography-body2-letter-spacing, .015625em);text-transform:var(--forge-typography-body2-text-transform,inherit);text-decoration:var(--forge-typography-body2-text-decoration,inherit);grid-area:value;display:grid;align-items:center;justify-self:var(--_label-value-align);line-height:normal;text-align:var(--_label-value-align);overflow-wrap:anywhere}.icon{display:inline-flex;grid-area:icon}::slotted([slot=icon]){margin-inline-end:var(--_label-value-icon-spacing)}:host(:is([inline],[dense])) .forge-label-value{display:flex;align-items:center}:host(:is([inline],[dense])) .label{margin-block:0;margin-inline-end:var(--_label-value-inline-label-spacing)}:host([ellipsis]) ::slotted([slot=value]){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host([empty]) .value{color:var(--_label-value-empty-color);font-style:var(--_label-value-empty-style)}';
 /**
  * @tag forge-label-value
  *

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

@@ -12,7 +12,7 @@ import { LinearProgressAdapter } from './linear-progress-adapter';
 import { LINEAR_PROGRESS_CONSTANTS } from './linear-progress-constants';
 import { LinearProgressCore } from './linear-progress-core';
 const template = '<template><div class=\"forge-linear-progress forge-linear-progress--indeterminate\" part=\"progressbar\"><div class=\"dots\"></div><div class=\"track\"></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, calc(var(--forge-shape-full, 9999px) * var(--forge-shape-factor, 1)));--_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-buffer-duration:var(--forge-linear-progress-buffer-duration, var(--forge-animation-duration-short4, 200ms));--_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:flex;align-items:center}.bar,.bar-inner,.dots,.forge-linear-progress,.track{position:absolute}.dots{inset:0;animation:linear infinite var(--_linear-progress-buffer-duration);animation-name:buffering;background-color:var(--_linear-progress-track-color);background-repeat:repeat-x;mask-image:url(\"data:image/svg+xml,%3Csvg version=\'1.1\' xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 5 2\' preserveAspectRatio=\'xMinYMin slice\'%3E%3Ccircle cx=\'1\' cy=\'1\' r=\'1\'/%3E%3C/svg%3E\");z-index:-1}.bar{animation:none;inline-size:100%;block-size:var(--_linear-progress-indicator-height);transform-origin:left center;will-change:transform;transition:transform var(--_linear-progress-determinate-duration) var(--_linear-progress-determinate-easing)}.secondary-bar{display:none}.bar-inner{inset:0;animation:none;transition:background-color var(--_linear-progress-theme-transition-duration) var(--_linear-progress-theme-transition-timing);background:var(--_linear-progress-indicator-color)}.track{inset:0;will-change:transform;background:var(--_linear-progress-track-color);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);transform-origin:left center}.forge-linear-progress--indeterminate .bar{transition:none}.forge-linear-progress--indeterminate .primary-bar{inset-inline-start:-145.167%;will-change:transform;animation:linear infinite var(--_linear-progress-indeterminate-duration);animation-name:primary-indeterminate-translate}.forge-linear-progress--indeterminate .secondary-bar{inset-inline-start:-54.8889%;display:block;will-change:transform;animation:linear infinite var(--_linear-progress-indeterminate-duration);animation-name:secondary-indeterminate-translate}.forge-linear-progress--indeterminate .dots{display:none}.forge-linear-progress--indeterminate .primary-bar>.bar-inner{will-change:transform;animation:linear infinite var(--_linear-progress-indeterminate-duration) primary-indeterminate-scale}.forge-linear-progress--indeterminate .secondary-bar>.bar-inner{will-change:transform;animation:linear infinite var(--_linear-progress-indeterminate-duration) secondary-indeterminate-scale}:host-context([dir=rtl]) .forge-linear-progress .bar{transform-origin:right center}:host-context([dir=rtl]) .forge-linear-progress .track{transform-origin:right center}:host-context([dir=rtl]) .forge-linear-progress .dots{animation-name:buffering-rtl}:host-context([dir=rtl]) .forge-linear-progress.forge-linear-progress--indeterminate .primary-bar{animation-name:primary-indeterminate-translate-rtl}:host-context([dir=rtl]) .forge-linear-progress.forge-linear-progress--indeterminate .secondary-bar{animation-name:secondary-indeterminate-translate-rtl}:host([dir=rtl]) .forge-linear-progress .bar{transform-origin:right center}:host([dir=rtl]) .forge-linear-progress .track{transform-origin:right center}:host([dir=rtl]) .forge-linear-progress .dots{animation-name:buffering-rtl}:host([dir=rtl]) .forge-linear-progress.forge-linear-progress--indeterminate .primary-bar{animation-name:primary-indeterminate-translate-rtl}:host([dir=rtl]) .forge-linear-progress.forge-linear-progress--indeterminate .secondary-bar{animation-name:secondary-indeterminate-translate-rtl}.forge-linear-progress:dir(rtl) .bar{transform-origin:right center}.forge-linear-progress:dir(rtl) .track{transform-origin:right center}.forge-linear-progress:dir(rtl) .dots{animation-name:buffering-rtl}.forge-linear-progress:dir(rtl).forge-linear-progress--indeterminate .primary-bar{animation-name:primary-indeterminate-translate-rtl}.forge-linear-progress:dir(rtl).forge-linear-progress--indeterminate .secondary-bar{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)}}@keyframes buffering{0%{transform:translateX(calc(1 * var(--_linear-progress-track-background-width)))}}@keyframes primary-indeterminate-translate{0%{transform:translateX(0)}20%{animation-timing-function:cubic-bezier(0.5,0,0.701732,0.495819);transform:translateX(0)}59.15%{animation-timing-function:cubic-bezier(0.302435,0.381352,0.55,0.956352);transform:translateX(calc(1 * 83.6714%))}100%{transform:translateX(calc(1 * 200.611%))}}@keyframes secondary-indeterminate-translate{0%{animation-timing-function:cubic-bezier(0.15,0,0.515058,0.409685);transform:translateX(0)}25%{animation-timing-function:cubic-bezier(0.31033,0.284058,0.8,0.733712);transform:translateX(calc(1 * 37.6519%))}48.35%{animation-timing-function:cubic-bezier(0.4,0.627035,0.6,0.902026);transform:translateX(calc(1 * 84.3862%))}100%{transform:translateX(calc(1 * 160.278%))}}@keyframes buffering-rtl{0%{transform:translateX(calc(-1 * var(--_linear-progress-track-background-width)))}}@keyframes primary-indeterminate-translate-rtl{0%{transform:translateX(0)}20%{animation-timing-function:cubic-bezier(0.5,0,0.701732,0.495819);transform:translateX(0)}59.15%{animation-timing-function:cubic-bezier(0.302435,0.381352,0.55,0.956352);transform:translateX(calc(-1 * 83.6714%))}100%{transform:translateX(calc(-1 * 200.611%))}}@keyframes secondary-indeterminate-translate-rtl{0%{animation-timing-function:cubic-bezier(0.15,0,0.515058,0.409685);transform:translateX(0)}25%{animation-timing-function:cubic-bezier(0.31033,0.284058,0.8,0.733712);transform:translateX(calc(-1 * 37.6519%))}48.35%{animation-timing-function:cubic-bezier(0.4,0.627035,0.6,0.902026);transform:translateX(calc(-1 * 84.3862%))}100%{transform:translateX(calc(-1 * 160.278%))}}@keyframes primary-indeterminate-scale{0%{transform:scaleX(.08)}36.65%{animation-timing-function:cubic-bezier(0.334731,0.12482,0.785844,1);transform:scaleX(.08)}69.15%{animation-timing-function:cubic-bezier(0.06,0.11,0.6,1);transform:scaleX(.661479)}100%{transform:scaleX(.08)}}@keyframes secondary-indeterminate-scale{0%{animation-timing-function:cubic-bezier(0.205028,0.057051,0.57661,0.453971);transform:scaleX(.08)}19.15%{animation-timing-function:cubic-bezier(0.152313,0.196432,0.648374,1.00432);transform:scaleX(.457104)}44.15%{animation-timing-function:cubic-bezier(0.257759,-0.003163,0.211762,1.38179);transform:scaleX(.72796)}100%{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);contain:strict;content-visibility:auto}: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, calc(var(--forge-shape-full, 9999px) * var(--forge-shape-factor, 1)));--_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-buffer-duration:var(--forge-linear-progress-buffer-duration, var(--forge-animation-duration-short4, 200ms));--_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:flex;align-items:center}.bar,.bar-inner,.dots,.forge-linear-progress,.track{position:absolute}.dots{inset:0;animation:linear infinite var(--_linear-progress-buffer-duration);animation-name:buffering;background-color:var(--_linear-progress-track-color);background-repeat:repeat-x;mask-image:url(\"data:image/svg+xml,%3Csvg version=\'1.1\' xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 5 2\' preserveAspectRatio=\'xMinYMin slice\'%3E%3Ccircle cx=\'1\' cy=\'1\' r=\'1\'/%3E%3C/svg%3E\");z-index:-1}.bar{animation:none;inline-size:100%;block-size:var(--_linear-progress-indicator-height);transform-origin:left center;will-change:transform;transition:transform var(--_linear-progress-determinate-duration) var(--_linear-progress-determinate-easing)}.secondary-bar{display:none}.bar-inner{inset:0;animation:none;transition:background-color var(--_linear-progress-theme-transition-duration) var(--_linear-progress-theme-transition-timing);background:var(--_linear-progress-indicator-color)}.track{inset:0;will-change:transform;background:var(--_linear-progress-track-color);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);transform-origin:left center}.forge-linear-progress--indeterminate .bar{transition:none}.forge-linear-progress--indeterminate .primary-bar{inset-inline-start:-145.167%;will-change:transform;animation:linear infinite var(--_linear-progress-indeterminate-duration);animation-name:primary-indeterminate-translate}.forge-linear-progress--indeterminate .secondary-bar{inset-inline-start:-54.8889%;display:block;will-change:transform;animation:linear infinite var(--_linear-progress-indeterminate-duration);animation-name:secondary-indeterminate-translate}.forge-linear-progress--indeterminate .dots{display:none}.forge-linear-progress--indeterminate .primary-bar>.bar-inner{will-change:transform;animation:linear infinite var(--_linear-progress-indeterminate-duration) primary-indeterminate-scale}.forge-linear-progress--indeterminate .secondary-bar>.bar-inner{will-change:transform;animation:linear infinite var(--_linear-progress-indeterminate-duration) secondary-indeterminate-scale}:host-context([dir=rtl]) .forge-linear-progress .bar{transform-origin:right center}:host-context([dir=rtl]) .forge-linear-progress .track{transform-origin:right center}:host-context([dir=rtl]) .forge-linear-progress .dots{animation-name:buffering-rtl}:host-context([dir=rtl]) .forge-linear-progress.forge-linear-progress--indeterminate .primary-bar{animation-name:primary-indeterminate-translate-rtl}:host-context([dir=rtl]) .forge-linear-progress.forge-linear-progress--indeterminate .secondary-bar{animation-name:secondary-indeterminate-translate-rtl}:host([dir=rtl]) .forge-linear-progress .bar{transform-origin:right center}:host([dir=rtl]) .forge-linear-progress .track{transform-origin:right center}:host([dir=rtl]) .forge-linear-progress .dots{animation-name:buffering-rtl}:host([dir=rtl]) .forge-linear-progress.forge-linear-progress--indeterminate .primary-bar{animation-name:primary-indeterminate-translate-rtl}:host([dir=rtl]) .forge-linear-progress.forge-linear-progress--indeterminate .secondary-bar{animation-name:secondary-indeterminate-translate-rtl}.forge-linear-progress:dir(rtl) .bar{transform-origin:right center}.forge-linear-progress:dir(rtl) .track{transform-origin:right center}.forge-linear-progress:dir(rtl) .dots{animation-name:buffering-rtl}.forge-linear-progress:dir(rtl).forge-linear-progress--indeterminate .primary-bar{animation-name:primary-indeterminate-translate-rtl}.forge-linear-progress:dir(rtl).forge-linear-progress--indeterminate .secondary-bar{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)}}@keyframes buffering{0%{transform:translateX(calc(1 * var(--_linear-progress-track-background-width)))}}@keyframes primary-indeterminate-translate{0%{transform:translateX(0)}20%{animation-timing-function:cubic-bezier(0.5,0,0.701732,0.495819);transform:translateX(0)}59.15%{animation-timing-function:cubic-bezier(0.302435,0.381352,0.55,0.956352);transform:translateX(calc(1 * 83.6714%))}100%{transform:translateX(calc(1 * 200.611%))}}@keyframes secondary-indeterminate-translate{0%{animation-timing-function:cubic-bezier(0.15,0,0.515058,0.409685);transform:translateX(0)}25%{animation-timing-function:cubic-bezier(0.31033,0.284058,0.8,0.733712);transform:translateX(calc(1 * 37.6519%))}48.35%{animation-timing-function:cubic-bezier(0.4,0.627035,0.6,0.902026);transform:translateX(calc(1 * 84.3862%))}100%{transform:translateX(calc(1 * 160.278%))}}@keyframes buffering-rtl{0%{transform:translateX(calc(-1 * var(--_linear-progress-track-background-width)))}}@keyframes primary-indeterminate-translate-rtl{0%{transform:translateX(0)}20%{animation-timing-function:cubic-bezier(0.5,0,0.701732,0.495819);transform:translateX(0)}59.15%{animation-timing-function:cubic-bezier(0.302435,0.381352,0.55,0.956352);transform:translateX(calc(-1 * 83.6714%))}100%{transform:translateX(calc(-1 * 200.611%))}}@keyframes secondary-indeterminate-translate-rtl{0%{animation-timing-function:cubic-bezier(0.15,0,0.515058,0.409685);transform:translateX(0)}25%{animation-timing-function:cubic-bezier(0.31033,0.284058,0.8,0.733712);transform:translateX(calc(-1 * 37.6519%))}48.35%{animation-timing-function:cubic-bezier(0.4,0.627035,0.6,0.902026);transform:translateX(calc(-1 * 84.3862%))}100%{transform:translateX(calc(-1 * 160.278%))}}@keyframes primary-indeterminate-scale{0%{transform:scaleX(.08)}36.65%{animation-timing-function:cubic-bezier(0.334731,0.12482,0.785844,1);transform:scaleX(.08)}69.15%{animation-timing-function:cubic-bezier(0.06,0.11,0.6,1);transform:scaleX(.661479)}100%{transform:scaleX(.08)}}@keyframes secondary-indeterminate-scale{0%{animation-timing-function:cubic-bezier(0.205028,0.057051,0.57661,0.453971);transform:scaleX(.08)}19.15%{animation-timing-function:cubic-bezier(0.152313,0.196432,0.648374,1.00432);transform:scaleX(.457104)}44.15%{animation-timing-function:cubic-bezier(0.257759,-0.003163,0.211762,1.38179);transform:scaleX(.72796)}100%{transform:scaleX(.08)}}';
 /**
  * @tag forge-linear-progress
  *

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

@@ -17,6 +17,7 @@ export interface IListDropdownAware extends IBaseComponent {
     wrapOptionText: boolean;
 }
 export declare class ListDropdownAware extends BaseComponent {
+    static get observedAttributes(): string[];
     constructor();
     attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
     /**

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

@@ -8,6 +8,17 @@ import { coreProperty, coerceNumber, coerceBoolean } from '@tylertech/forge-core
 import { BaseComponent } from '../core/base/base-component';
 import { LIST_DROPDOWN_CONSTANTS } from './list-dropdown-constants';
 export class ListDropdownAware extends BaseComponent {
+    static get observedAttributes() {
+        return [
+            LIST_DROPDOWN_CONSTANTS.attributes.POPUP_CLASSES,
+            LIST_DROPDOWN_CONSTANTS.attributes.OPTION_LIMIT,
+            LIST_DROPDOWN_CONSTANTS.attributes.OBSERVE_SCROLL,
+            LIST_DROPDOWN_CONSTANTS.attributes.OBSERVE_SCROLL_THRESHOLD,
+            LIST_DROPDOWN_CONSTANTS.attributes.SYNC_POPUP_WIDTH,
+            LIST_DROPDOWN_CONSTANTS.attributes.CONSTRAIN_POPUP_WIDTH,
+            LIST_DROPDOWN_CONSTANTS.attributes.WRAP_OPTION_TEXT
+        ];
+    }
     constructor() {
         super();
     }

package/esm/meter/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * @license
+ * Copyright Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+export * from './meter';
+export * from './meter-group';

package/esm/meter/index.js

@@ -0,0 +1,7 @@
+/**
+ * @license
+ * Copyright Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+export * from './meter';
+export * from './meter-group';

package/esm/meter/meter/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * @license
+ * Copyright Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+export * from './meter';
+export declare function defineMeterComponent(): void;

package/esm/meter/meter/index.js

@@ -0,0 +1,11 @@
+/**
+ * @license
+ * Copyright Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { tryDefine } from '@tylertech/forge-core';
+import { MeterComponent } from './meter';
+export * from './meter';
+export function defineMeterComponent() {
+    tryDefine('forge-meter', MeterComponent);
+}

package/esm/meter/meter/meter.d.ts

@@ -0,0 +1,187 @@
+/**
+ * @license
+ * Copyright Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { LitElement, PropertyValues, TemplateResult } from 'lit';
+import { Theme } from '../../constants';
+export type MeterDirection = 'horizontal' | 'vertical';
+export type MeterDensity = 'default' | 'small' | 'medium' | 'large';
+export type MeterShape = 'default' | 'round' | 'squared';
+export type MeterInnerShape = 'default' | 'inherit';
+export type MeterStatus = 'optimal' | 'suboptimal' | 'least-optimal';
+export type MeterTheme = Theme | 'default';
+export type MeterValueMode = 'manual' | 'percentage' | 'value';
+/**
+ * @tag forge-meter
+ *
+ * @summary Meters display a scalar value within a defined range.
+ *
+ * @attribute {string} aria-valuetext - Defines a text alternative for the current value. Set this if it would be inaccurate to read the value as a percentage.
+ *
+ * @state vertical - Applied when the meter is oriented vertically.
+ * @state optimum-value - Applied when the value is within the optimum range.
+ * @state suboptimum-value - Applied when the value is within the suboptimum range.
+ * @state least-optimum-value - Applied when the value is within the least optimum range.
+ *
+ * @cssproperty --forge-meter-background - The background color of the meter.
+ * @cssproperty --forge-meter-color - The color of the meter's bar.
+ * @cssproperty --forge-meter-height - The block size of the meter.
+ * @cssproperty --forge-meter-shape - The border radius of the meter.
+ * @cssproperty --forge-meter-bar-inner-shape - The border radius of the meter's bar.
+ * @cssproperty --forge-meter-tickmarks - The number of tickmarks to display.
+ * @cssproperty --forge-meter-tickmark-opacity - The opacity of the tickmarks.
+ * @cssproperty --forge-meter-transition-duration - The duration of transitions.
+ * @cssproperty --forge-meter-transition-timing - The timing function of transitions.
+ * @cssproperty --forge-theme-success - The color of the bar when the value is optimal.
+ * @cssproperty --forge-theme-success-container-low - The color of the track when the value is optimal.
+ * @cssproperty --forge-theme-warning - The color of the bar when the value is suboptimal.
+ * @cssproperty --forge-theme-warning-container-low - The color of the track when the value is suboptimal.
+ * @cssproperty --forge-theme-error - The color of the bar when the value is least optimal.
+ * @cssproperty --forge-theme-error-container-low - The color of the track when the value is least optimal.
+ *
+ * @csspart root - The root container element.
+ * @csspart track - The element comprising the meter's background.
+ * @csspart bar - The bar representing the value.
+ *
+ * @slot - The default slot for the meter's label.
+ * @slot value - A textual representation of the meter's value.
+ */
+export declare class MeterComponent extends LitElement {
+    static styles: import("lit").CSSResult;
+    static formAssociated: boolean;
+    /**
+     * The current value of the meter.
+     * @default 0
+     * @attribute
+     */
+    value: number;
+    /**
+     * The minimum value of the meter.
+     * @default 0
+     * @attribute
+     */
+    min: number;
+    /**
+     * The maximum value of the meter.
+     * @default 1
+     * @attribute
+     */
+    max: number;
+    /**
+     * The low value threshold.
+     * @default 0
+     * @attribute
+     */
+    low: number | null | undefined;
+    /**
+     * The high value threshold.
+     * @default 1
+     * @attribute
+     */
+    high: number | null | undefined;
+    /**
+     * Indicates the region of the optimum value.
+     * @default 1
+     * @attribute
+     */
+    optimum: number | null | undefined;
+    /**
+     * Whether to display tickmarks.
+     * @default false
+     * @attribute
+     */
+    tickmarks: boolean;
+    /**
+     * Whether the current value is displayed as a percentage or raw value. When set to `'manual'`
+     * the value text is not shown automatically but can still be set manually via the value slot.
+     * @default 'manual'
+     * @attribute value-mode
+     */
+    valueMode: MeterValueMode;
+    /**
+     * Whether the meter is oriented horizontally or vertically.
+     * @default 'horizontal'
+     * @attribute
+     */
+    direction: MeterDirection;
+    /**
+     * The shape of the meter.
+     * @default 'default'
+     * @attribute
+     */
+    shape: MeterShape;
+    /**
+     * The shape of the bar.
+     * @default 'default'
+     * @attribute inner-shape
+     */
+    innerShape: MeterInnerShape;
+    /**
+     * The density of the meter.
+     * @default 'medium'
+     * @attribute
+     */
+    density: MeterDensity;
+    /**
+     * The theme of the meter.
+     * @default 'default'
+     * @attribute
+     */
+    theme: MeterTheme;
+    /**
+     * Whether the theme is muted.
+     * @default false
+     * @attribute
+     */
+    muted: boolean;
+    /**
+     * Gets the percentage of the meter that's filled.
+     * @readonly
+     */
+    get percentage(): number;
+    get labels(): NodeList;
+    get form(): HTMLFormElement | null;
+    private _percentage;
+    private _status;
+    private _segmented;
+    private _grouped;
+    private _hasSlottedContent;
+    private _defaultNodes;
+    private _valueNodes;
+    private _internals;
+    constructor();
+    connectedCallback(): void;
+    willUpdate(changedProperties: PropertyValues<this>): void;
+    render(): TemplateResult;
+    /**
+     * Determines the percentage of the meter that's filled and whether the value is optimal,
+     * suboptimal, or least optimal.
+     */
+    private _getStatus;
+    /**
+     * Determines whether low and high ranges are set. The meter is segmented if either the low or
+     * high property is defined.
+     *
+     * When the meter is segmented the default or themed color scheme is replaced by semantic colors
+     * corresponding to optimal, suboptimal, and least optimal values.
+     */
+    private _getSegmented;
+    /**
+     * Checks if the meter is part of a group and inherits the min and max values.
+     */
+    private _getGrouped;
+    /**
+     * Checks whether the meter has any slotted content.
+     */
+    private _handleSlotChange;
+    /**
+     * Updates the internal state of the meter based on the current status.
+     */
+    private _setValueState;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'forge-meter': MeterComponent;
+    }
+}