@tylertech/forge 3.4.2 → 3.5.1

package/esm/meter/meter/meter.js

@@ -0,0 +1,359 @@
+/**
+ * @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 { styleMap } from 'lit/directives/style-map.js';
+import { setDefaultAria, toggleState } from '../../core/utils/a11y-utils';
+const styles = ':host{display:inline}.forge-meter{--_meter-background:var(--forge-meter-background, var(--forge-theme-tertiary-container-low, #e8ebff));--_meter-color:var(--forge-meter-color, var(--forge-theme-tertiary, #3d5afe));--_meter-height:var(--forge-meter-height, var(--forge-spacing-medium, 16px));--_meter-shape:var(--forge-meter-shape, calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1)));--_meter-inner-shape:var(--forge-meter-inner-shape, 0);--_meter-inner-elevation:var(--forge-meter-inner-elevation, 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12));--_meter-tickmarks:var(--forge-meter-tickmarks, 10);--_meter-tickmark-opacity:var(--forge-meter-tickmark-opacity, 54%);--_meter-transition-duration:var(--forge-meter-transition-duration, var(--forge-animation-duration-short4, 200ms));--_meter-transition-timing:var(--forge-meter-transition-timing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)))}.forge-meter{box-sizing:border-box}.forge-meter .heading{-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);display:flex;align-items:center;justify-content:space-between;line-height:normal}.forge-meter .heading.not-empty{margin-bottom:var(--forge-spacing-xxsmall,4px)}.forge-meter .label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.forge-meter .value{color:var(--forge-theme-text-medium,rgba(0,0,0,.6))}.forge-meter .track{position:relative;block-size:var(--_meter-height);border-radius:var(--_meter-shape);overflow:hidden;background:var(--_meter-background)}.forge-meter .track.segmented{--_meter-background:var(--forge-meter-background, var(--forge-theme-warning-container-low, #f9e9e0));--_meter-color:var(--forge-meter-color, var(--forge-theme-warning, #d14900));transition-property:background;transition-duration:var(--_meter-transition-duration);transition-timing-function:var(--_meter-transition-timing)}.forge-meter .track.segmented.least-optimal{--_meter-background:var(--forge-meter-background, var(--forge-theme-error-container-low, #f6e0e4));--_meter-color:var(--forge-meter-color, var(--forge-theme-error, #b00020))}.forge-meter .track.segmented.optimal{--_meter-background:var(--forge-meter-background, var(--forge-theme-success-container-low, #e6efe6));--_meter-color:var(--forge-meter-color, var(--forge-theme-success, #2e7d32))}.forge-meter .track.segmented .bar{transition-property:translate,box-shadow,background;transition-duration:var(--_meter-transition-duration);transition-timing-function:var(--_meter-transition-timing)}.forge-meter .track.lowest{--_meter-inner-elevation:var(--forge-meter-inner-elevation, 0)}.forge-meter .track.tickmarks::after{content:\"\";position:relative;display:block;width:100%;height:100%;margin-left:2px;background:repeating-linear-gradient(90deg,var(--_meter-color) 0,var(--_meter-color) 1px,var(--_meter-background) 1px,var(--_meter-background) 2px,transparent 2px,transparent calc(100% / (var(--_meter-tickmarks) + 1) + 0px));background-position-x:-2px;opacity:var(--_meter-tickmark-opacity);pointer-events:none;transition-property:background;transition-duration:var(--_meter-transition-duration);transition-timing-function:var(--_meter-transition-timing)}.forge-meter .bar{position:absolute;left:-100%;width:100%;height:100%;border-radius:var(--_meter-inner-shape);box-shadow:var(--_meter-inner-elevation);background:var(--_meter-color);translate:var(--_meter-percentage) 0;transition-property:translate,box-shadow;transition-duration:var(--_meter-transition-duration);transition-timing-function:var(--_meter-transition-timing)}.forge-meter.grouped{display:block;position:absolute;z-index:var(--_meter-z-index);top:0;left:var(--_meter-inset);width:calc(var(--_meter-percentage) + var(--_meter-group-height) * .5);height:100%;border-radius:var(--_meter-inner-shape);border-top-left-radius:0;border-bottom-left-radius:0;margin-left:calc(-1 * var(--_meter-group-height) * .5);background:var(--_meter-color);box-shadow:var(--_meter-inner-elevation)}.forge-meter.grouped.muted{--_meter-color:var(--forge-meter-color, var(--forge-theme-tertiary-container-high, #b5c0ff))}.forge-meter.density--small{--_meter-height:var(--forge-meter-height, var(--forge-spacing-xsmall, 8px))}.forge-meter.density--medium{--_meter-height:var(--forge-meter-height, var(--forge-spacing-medium, 16px))}.forge-meter.density--large{--_meter-height:var(--forge-meter-height, var(--forge-spacing-large, 24px))}.forge-meter.shape--default{--_meter-shape:var(--forge-meter-shape, calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1)))}.forge-meter.shape--rounded{--_meter-shape:var(--forge-meter-shape, calc(var(--forge-shape-full, 9999px) * var(--forge-shape-factor, 1)))}.forge-meter.shape--squared{--_meter-shape:var(--forge-meter-shape, 0)}.forge-meter.inner-shape--inherit{--_meter-inner-shape:var(--_meter-shape)}.forge-meter.muted .track{--_meter-background:var(--forge-meter-background, var(--forge-theme-tertiary-container-minimum, #f7f8ff));--_meter-color:var(--forge-meter-color, var(--forge-theme-tertiary-container-high, #b5c0ff))}.forge-meter.muted .track.segmented{--_meter-background:var(--forge-meter-background, var(--forge-theme-warning-container-minimum, #fdf8f5));--_meter-color:var(--forge-meter-color, var(--forge-theme-warning-container-high, #eeba9e))}.forge-meter.muted .track.segmented.least-optimal{--_meter-background:var(--forge-meter-background, var(--forge-theme-error-container-minimum, #fcf5f6));--_meter-color:var(--forge-meter-color, var(--forge-theme-error-container-high, #e19eaa))}.forge-meter.muted .track.segmented.optimal{--_meter-background:var(--forge-meter-background, var(--forge-theme-success-container-minimum, #f7faf7));--_meter-color:var(--forge-meter-color, var(--forge-theme-success-container-high, #b0ceb1))}:host(:is(:state(vertical),:--vertical)){display:block}:host(:is(:state(vertical),:--vertical)) .forge-meter{display:flex;flex-direction:row-reverse;align-items:end;width:fit-content;height:100%;max-width:100%}:host(:is(:state(vertical),:--vertical)) .forge-meter .heading{flex-direction:column;align-items:start}:host(:is(:state(vertical),:--vertical)) .forge-meter .heading.not-empty{margin-bottom:0;margin-left:var(--forge-spacing-xsmall,8px)}:host(:is(:state(vertical),:--vertical)) .forge-meter .track{width:var(--_meter-height);height:100%}:host(:is(:state(vertical),:--vertical)) .forge-meter .track.tickmarks::after{margin-top:-2px;margin-left:0;background:repeating-linear-gradient(0,var(--_meter-color) 0,var(--_meter-color) 1px,var(--_meter-background) 1px,var(--_meter-background) 2px,transparent 2px,transparent calc(100% / (var(--_meter-tickmarks) + 1) + 0px));background-position-x:0;background-position-y:2px}:host(:is(:state(vertical),:--vertical)) .forge-meter .bar{left:initial;top:100%;translate:0 calc(-1 * var(--_meter-percentage))}:host(:is(:state(vertical),:--vertical)) .forge-meter.grouped{display:block;top:calc(100% - var(--_meter-percentage) - var(--_meter-inset));left:0;width:100%;height:calc(var(--_meter-percentage) + var(--_meter-group-height) * .5);max-width:initial;border-radius:var(--_meter-inner-shape);border-bottom-left-radius:0;border-bottom-right-radius:0;margin-left:0;margin-bottom:calc(-1 * var(--_meter-group-height) * .5)}.theme--primary:not(.muted) .track:not(.segmented){--_meter-background:var(--forge-meter-background, var(--forge-theme-primary-container-low, #e8eaf6));--_meter-color:var(--forge-meter-color, var(--forge-theme-primary, #3f51b5))}.theme--primary:not(.muted).grouped{--_meter-background:var(--forge-meter-background, var(--forge-theme-primary-container-low, #e8eaf6));--_meter-color:var(--forge-meter-color, var(--forge-theme-primary, #3f51b5))}.theme--primary.muted .track:not(.segmented){--_meter-background:var(--forge-meter-background, var(--forge-theme-primary-container-minimum, #f7f8fc));--_meter-color:var(--forge-meter-color, var(--forge-theme-primary-container-high, #b6bde3))}.theme--primary.muted .grouped{--_meter-background:var(--forge-meter-background, var(--forge-theme-primary-container-minimum, #f7f8fc));--_meter-color:var(--forge-meter-color, var(--forge-theme-primary-container-high, #b6bde3))}.theme--secondary:not(.muted) .track:not(.segmented){--_meter-background:var(--forge-meter-background, var(--forge-theme-secondary-container-low, #fff8e1));--_meter-color:var(--forge-meter-color, var(--forge-theme-secondary, #ffc107))}.theme--secondary:not(.muted).grouped{--_meter-background:var(--forge-meter-background, var(--forge-theme-secondary-container-low, #fff8e1));--_meter-color:var(--forge-meter-color, var(--forge-theme-secondary, #ffc107))}.theme--secondary.muted .track:not(.segmented){--_meter-background:var(--forge-meter-background, var(--forge-theme-secondary-container-minimum, #fffdf5));--_meter-color:var(--forge-meter-color, var(--forge-theme-secondary-container-high, #ffe7a1))}.theme--secondary.muted .grouped{--_meter-background:var(--forge-meter-background, var(--forge-theme-secondary-container-minimum, #fffdf5));--_meter-color:var(--forge-meter-color, var(--forge-theme-secondary-container-high, #ffe7a1))}.theme--tertiary:not(.muted) .track:not(.segmented){--_meter-background:var(--forge-meter-background, var(--forge-theme-tertiary-container-low, #e8ebff));--_meter-color:var(--forge-meter-color, var(--forge-theme-tertiary, #3d5afe))}.theme--tertiary:not(.muted).grouped{--_meter-background:var(--forge-meter-background, var(--forge-theme-tertiary-container-low, #e8ebff));--_meter-color:var(--forge-meter-color, var(--forge-theme-tertiary, #3d5afe))}.theme--tertiary.muted .track:not(.segmented){--_meter-background:var(--forge-meter-background, var(--forge-theme-tertiary-container-minimum, #f7f8ff));--_meter-color:var(--forge-meter-color, var(--forge-theme-tertiary-container-high, #b5c0ff))}.theme--tertiary.muted .grouped{--_meter-background:var(--forge-meter-background, var(--forge-theme-tertiary-container-minimum, #f7f8ff));--_meter-color:var(--forge-meter-color, var(--forge-theme-tertiary-container-high, #b5c0ff))}.theme--success:not(.muted) .track:not(.segmented){--_meter-background:var(--forge-meter-background, var(--forge-theme-success-container-low, #e6efe6));--_meter-color:var(--forge-meter-color, var(--forge-theme-success, #2e7d32))}.theme--success:not(.muted).grouped{--_meter-background:var(--forge-meter-background, var(--forge-theme-success-container-low, #e6efe6));--_meter-color:var(--forge-meter-color, var(--forge-theme-success, #2e7d32))}.theme--success.muted .track:not(.segmented){--_meter-background:var(--forge-meter-background, var(--forge-theme-success-container-minimum, #f7faf7));--_meter-color:var(--forge-meter-color, var(--forge-theme-success-container-high, #b0ceb1))}.theme--success.muted .grouped{--_meter-background:var(--forge-meter-background, var(--forge-theme-success-container-minimum, #f7faf7));--_meter-color:var(--forge-meter-color, var(--forge-theme-success-container-high, #b0ceb1))}.theme--warning:not(.muted) .track:not(.segmented){--_meter-background:var(--forge-meter-background, var(--forge-theme-warning-container-low, #f9e9e0));--_meter-color:var(--forge-meter-color, var(--forge-theme-warning, #d14900))}.theme--warning:not(.muted).grouped{--_meter-background:var(--forge-meter-background, var(--forge-theme-warning-container-low, #f9e9e0));--_meter-color:var(--forge-meter-color, var(--forge-theme-warning, #d14900))}.theme--warning.muted .track:not(.segmented){--_meter-background:var(--forge-meter-background, var(--forge-theme-warning-container-minimum, #fdf8f5));--_meter-color:var(--forge-meter-color, var(--forge-theme-warning-container-high, #eeba9e))}.theme--warning.muted .grouped{--_meter-background:var(--forge-meter-background, var(--forge-theme-warning-container-minimum, #fdf8f5));--_meter-color:var(--forge-meter-color, var(--forge-theme-warning-container-high, #eeba9e))}.theme--error:not(.muted) .track:not(.segmented){--_meter-background:var(--forge-meter-background, var(--forge-theme-error-container-low, #f6e0e4));--_meter-color:var(--forge-meter-color, var(--forge-theme-error, #b00020))}.theme--error:not(.muted).grouped{--_meter-background:var(--forge-meter-background, var(--forge-theme-error-container-low, #f6e0e4));--_meter-color:var(--forge-meter-color, var(--forge-theme-error, #b00020))}.theme--error.muted .track:not(.segmented){--_meter-background:var(--forge-meter-background, var(--forge-theme-error-container-minimum, #fcf5f6));--_meter-color:var(--forge-meter-color, var(--forge-theme-error-container-high, #e19eaa))}.theme--error.muted .grouped{--_meter-background:var(--forge-meter-background, var(--forge-theme-error-container-minimum, #fcf5f6));--_meter-color:var(--forge-meter-color, var(--forge-theme-error-container-high, #e19eaa))}.theme--info:not(.muted) .track:not(.segmented){--_meter-background:var(--forge-meter-background, var(--forge-theme-info-container-low, #e3edf7));--_meter-color:var(--forge-meter-color, var(--forge-theme-info, #1565c0))}.theme--info:not(.muted).grouped{--_meter-background:var(--forge-meter-background, var(--forge-theme-info-container-low, #e3edf7));--_meter-color:var(--forge-meter-color, var(--forge-theme-info, #1565c0))}.theme--info.muted .track:not(.segmented){--_meter-background:var(--forge-meter-background, var(--forge-theme-info-container-minimum, #f6f9fc));--_meter-color:var(--forge-meter-color, var(--forge-theme-info-container-high, #a6c4e7))}.theme--info.muted .grouped{--_meter-background:var(--forge-meter-background, var(--forge-theme-info-container-minimum, #f6f9fc));--_meter-color:var(--forge-meter-color, var(--forge-theme-info-container-high, #a6c4e7))}@media (prefers-reduced-motion:reduce){.track{--_meter-transition-duration:var(--forge-meter-transition-duration, 0)}}@media (forced-colors:active){.track{border:1px solid CanvasText}.track .bar{background:CanvasText}.grouped{border-inline-end:1px solid Canvas!important;background:CanvasText!important}:host(:is(:state(vertical),:--vertical)) .grouped{border-block-start:1px solid CanvasText!important;border-inline-end:initial!important}}';
+const VALUE_STATE_MAP = new Map([
+    ['optimal', 'optimum-value'],
+    ['suboptimal', 'suboptimum-value'],
+    ['least-optimal', 'least-optimum-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.
+ */
+let MeterComponent = class MeterComponent extends LitElement {
+    /**
+     * Gets the percentage of the meter that's filled.
+     * @readonly
+     */
+    get percentage() {
+        return this._percentage;
+    }
+    get labels() {
+        return this._internals.labels;
+    }
+    get form() {
+        return this._internals.form;
+    }
+    constructor() {
+        super();
+        /**
+         * The current value of the meter.
+         * @default 0
+         * @attribute
+         */
+        this.value = 0;
+        /**
+         * The minimum value of the meter.
+         * @default 0
+         * @attribute
+         */
+        this.min = 0;
+        /**
+         * The maximum value of the meter.
+         * @default 1
+         * @attribute
+         */
+        this.max = 1;
+        /**
+         * Whether to display tickmarks.
+         * @default false
+         * @attribute
+         */
+        this.tickmarks = false;
+        /**
+         * 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
+         */
+        this.valueMode = 'manual';
+        /**
+         * Whether the meter is oriented horizontally or vertically.
+         * @default 'horizontal'
+         * @attribute
+         */
+        this.direction = 'horizontal';
+        /**
+         * The shape of the meter.
+         * @default 'default'
+         * @attribute
+         */
+        this.shape = 'default';
+        /**
+         * The shape of the bar.
+         * @default 'default'
+         * @attribute inner-shape
+         */
+        this.innerShape = 'default';
+        /**
+         * The density of the meter.
+         * @default 'medium'
+         * @attribute
+         */
+        this.density = 'medium';
+        /**
+         * The theme of the meter.
+         * @default 'default'
+         * @attribute
+         */
+        this.theme = 'default';
+        /**
+         * Whether the theme is muted.
+         * @default false
+         * @attribute
+         */
+        this.muted = false;
+        this._percentage = 0;
+        this._status = 'optimal';
+        this._segmented = false;
+        this._grouped = false;
+        this._hasSlottedContent = false;
+        this._internals = this.attachInternals();
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        setDefaultAria(this, this._internals, {
+            role: 'meter',
+            ariaValueNow: `${this.value}`,
+            ariaValueMin: `${this.min}`,
+            ariaValueMax: `${this.max}`
+        });
+        this._getGrouped();
+    }
+    willUpdate(changedProperties) {
+        const keys = Array.from(changedProperties.keys());
+        if (keys.some(key => ['value', 'min', 'max', 'low', 'high', 'optimum'].includes(key.toString()))) {
+            this._getStatus();
+        }
+        if (keys.some(key => ['low', 'high'].includes(key.toString()))) {
+            this._getSegmented();
+        }
+        // Update default ARIA when the current, min, or max value changes. Set the state when the
+        // direction changes.
+        changedProperties.forEach((_, key) => {
+            switch (key) {
+                case 'value':
+                    setDefaultAria(this, this._internals, { ariaValueNow: `${this.value}` });
+                    break;
+                case 'min':
+                    setDefaultAria(this, this._internals, { ariaValueMin: `${this.min}` });
+                    break;
+                case 'max':
+                    setDefaultAria(this, this._internals, { ariaValueMax: `${this.max}` });
+                    break;
+                case 'direction':
+                    toggleState(this._internals, 'vertical', this.direction === 'vertical');
+                    break;
+            }
+        });
+    }
+    render() {
+        const classes = {
+            'inner-shape--inherit': this.innerShape === 'inherit',
+            muted: this.muted,
+            [`density--${this.density}`]: true,
+            [`shape--${this.shape}`]: true,
+            [`theme--${this.theme}`]: true
+        };
+        return this._grouped
+            ? html `
+          <div
+            part="root"
+            class=${classMap({ 'forge-meter': true, grouped: true, ...classes })}
+            style=${styleMap({ '--_meter-percentage': this._percentage + '%' })}></div>
+        `
+            : html `
+          <div part="root" class=${classMap({ 'forge-meter': true, ...classes })}>
+            <div class=${classMap({ heading: true, 'not-empty': this._hasSlottedContent })} @slotchange=${this._handleSlotChange}>
+              <div class="label"><slot></slot></div>
+              <div class="value">
+                <slot name="value">${this.valueMode !== 'manual' ? html `${this.valueMode === 'percentage' ? `${this._percentage}%` : this.value}` : ''}</slot>
+              </div>
+            </div>
+            <div
+              part="track"
+              class=${classMap({
+                track: true,
+                segmented: this._segmented,
+                optimal: this._status === 'optimal',
+                suboptimal: this._status === 'suboptimal',
+                'least-optimal': this._status === 'least-optimal',
+                lowest: this._percentage === 0,
+                tickmarks: this.tickmarks
+            })}>
+              <div part="bar" class="bar" style=${styleMap({ '--_meter-percentage': this._percentage + '%' })}></div>
+            </div>
+          </div>
+        `;
+    }
+    /**
+     * Determines the percentage of the meter that's filled and whether the value is optimal,
+     * suboptimal, or least optimal.
+     */
+    _getStatus() {
+        const range = this.max - this.min;
+        this._percentage = range ? ((this.value - this.min) / range) * 100 : 0;
+        // Clamp the percentage between 0 and 100. Round to 3 decimal places to avoid floating point errors.
+        this._percentage = +Math.max(0, Math.min(100, this._percentage)).toFixed(3);
+        // Fallback to 0 if the percentage is NaN.
+        if (isNaN(this._percentage)) {
+            this._percentage = 0;
+        }
+        // Dispatch an event to the parent group.
+        if (this._grouped) {
+            const event = new Event('change', { bubbles: true, composed: true });
+            this.dispatchEvent(event);
+        }
+        // Use working values in case the properties are not set.
+        const low = this.low ?? this.min;
+        const high = this.high ?? this.max;
+        const optimum = this.optimum ?? this.max;
+        // The region that contains the optimum value is optimal. A region is suboptimal if it
+        // neighbors the optimal region and least-optimal otherwise.
+        if (optimum < low) {
+            this._status = this.value < low ? 'optimal' : this.value < high ? 'suboptimal' : 'least-optimal';
+        }
+        else if (optimum > high) {
+            this._status = this.value > high ? 'optimal' : this.value > low ? 'suboptimal' : 'least-optimal';
+        }
+        else {
+            this._status = this.value < low ? 'suboptimal' : this.value > high ? 'suboptimal' : 'optimal';
+        }
+        this._setValueState();
+    }
+    /**
+     * 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.
+     */
+    _getSegmented() {
+        this._segmented = this.low != null || this.high != null;
+    }
+    /**
+     * Checks if the meter is part of a group and inherits the min and max values.
+     */
+    async _getGrouped() {
+        const group = this.closest('forge-meter-group');
+        this._grouped = !!group;
+        if (group) {
+            await group.updateComplete;
+            this.direction = group.direction;
+            this.min = group.min;
+            this.max = group.max;
+        }
+    }
+    /**
+     * Checks whether the meter has any slotted content.
+     */
+    _handleSlotChange() {
+        const nodes = [...this._defaultNodes, ...this._valueNodes].filter(node => !!node.textContent?.trim());
+        this._hasSlottedContent = !!nodes.length;
+    }
+    /**
+     * Updates the internal state of the meter based on the current status.
+     */
+    _setValueState() {
+        VALUE_STATE_MAP.forEach((value, status) => toggleState(this._internals, value, this._status === status));
+    }
+};
+MeterComponent.styles = unsafeCSS(styles);
+MeterComponent.formAssociated = true;
+__decorate([
+    property({ type: Number })
+], MeterComponent.prototype, "value", void 0);
+__decorate([
+    property({ type: Number })
+], MeterComponent.prototype, "min", void 0);
+__decorate([
+    property({ type: Number })
+], MeterComponent.prototype, "max", void 0);
+__decorate([
+    property({ type: Number })
+], MeterComponent.prototype, "low", void 0);
+__decorate([
+    property({ type: Number })
+], MeterComponent.prototype, "high", void 0);
+__decorate([
+    property({ type: Number })
+], MeterComponent.prototype, "optimum", void 0);
+__decorate([
+    property({ type: Boolean })
+], MeterComponent.prototype, "tickmarks", void 0);
+__decorate([
+    property({ attribute: 'value-mode' })
+], MeterComponent.prototype, "valueMode", void 0);
+__decorate([
+    property()
+], MeterComponent.prototype, "direction", void 0);
+__decorate([
+    property()
+], MeterComponent.prototype, "shape", void 0);
+__decorate([
+    property({ attribute: 'inner-shape' })
+], MeterComponent.prototype, "innerShape", void 0);
+__decorate([
+    property()
+], MeterComponent.prototype, "density", void 0);
+__decorate([
+    property()
+], MeterComponent.prototype, "theme", void 0);
+__decorate([
+    property({ type: Boolean })
+], MeterComponent.prototype, "muted", void 0);
+__decorate([
+    state()
+], MeterComponent.prototype, "_percentage", void 0);
+__decorate([
+    state()
+], MeterComponent.prototype, "_status", void 0);
+__decorate([
+    state()
+], MeterComponent.prototype, "_segmented", void 0);
+__decorate([
+    state()
+], MeterComponent.prototype, "_grouped", void 0);
+__decorate([
+    state()
+], MeterComponent.prototype, "_hasSlottedContent", void 0);
+__decorate([
+    queryAssignedNodes()
+], MeterComponent.prototype, "_defaultNodes", void 0);
+__decorate([
+    queryAssignedNodes({ slot: 'value' })
+], MeterComponent.prototype, "_valueNodes", void 0);
+MeterComponent = __decorate([
+    customElement('forge-meter')
+], MeterComponent);
+export { MeterComponent };

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

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

package/esm/meter/meter-group/index.js

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

package/esm/meter/meter-group/meter-group.d.ts

@@ -0,0 +1,108 @@
+/**
+ * @license
+ * Copyright Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { LitElement, PropertyValues, TemplateResult } from 'lit';
+import { MeterDensity, MeterDirection, MeterInnerShape, MeterShape } from '../meter/meter';
+/**
+ * @tag forge-meter-group
+ *
+ * @summary Meter groups display several meters together on one track.
+ *
+ * @state vertical - Applied when the meter group is oriented vertically.
+ *
+ * @cssproperty --forge-meter-group-background - The background color of the meter group.
+ * @cssproperty --forge-meter-group-height - The block size of the meter group.
+ * @cssproperty --forge-meter-group-shape - The border radius of the meter group.
+ * @cssproperty --forge-meter-group-tickmarks - The number of tickmarks to display.
+ * @cssproperty --forge-meter-group-tickmark-color - The color of the tickmarks.
+ * @cssproperty --forge-meter-group-tickmark-opacity - The opacity of the tickmarks.
+ *
+ * @csspart root - The root container element.
+ * @csspart track - The element comprising the meter group's background.
+ *
+ * @slot - The default slot for grouped `<forge-meter>` elements.
+ * @slot label - Positions a label above the meter group.
+ * @slot value - A textual representation of the meter's value.
+ */
+export declare class MeterGroupComponent extends LitElement {
+    static styles: import("lit").CSSResult;
+    static formAssociated: boolean;
+    /**
+     * The minimum value of each meter in the group.
+     * @default 0
+     * @attribute
+     */
+    min: number;
+    /**
+     * The maximum value of each meter in the group.
+     * @default 1
+     * @attribute
+     */
+    max: number;
+    /**
+     * Whether to display tickmarks.
+     * @default false
+     * @attribute
+     */
+    tickmarks: boolean;
+    /**
+     * Whether the meter is oriented horizontally or vertically.
+     * @default 'horizontal'
+     * @attribute
+     */
+    direction: MeterDirection;
+    /**
+     * The density of the meter group.
+     * @default 'default'
+     * @attribute
+     */
+    density: MeterDensity;
+    /**
+     * The shape of the meter group.
+     * @default 'default'
+     * @attribute
+     */
+    shape: MeterShape;
+    /**
+     * The shape of each meter in the group.
+     * @default 'default'
+     * @attribute inner-shape
+     */
+    innerShape: MeterInnerShape;
+    get labels(): NodeList;
+    get form(): HTMLFormElement | null;
+    private _hasSlottedHeadingContent;
+    private _labelNodes;
+    private _valueNodes;
+    private _meters;
+    private _internals;
+    constructor();
+    connectedCallback(): void;
+    willUpdate(changedProperties: PropertyValues<this>): void;
+    render(): TemplateResult;
+    /**
+     * Applies the min and max values to each meter in the group. These should always be set on the
+     * meter group component to ensure that all meters are in sync.
+     */
+    private _syncMeters;
+    /**
+     * Debounce the handler to reduce the number of times it's called during rapid changes,
+     * especially when the component is first connected.
+     */
+    private _debounceMeterChange;
+    /**
+     * Handles changes to the meters in the group, updating their arrangement relative to each other.
+     */
+    private _handleMeterChange;
+    /**
+     * Checks whether the meter group has any slotted heading content.
+     */
+    private _handleHeadingSlotChange;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'forge-meter-group': MeterGroupComponent;
+    }
+}