@tylertech/forge 3.4.2 → 3.5.1

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

@@ -0,0 +1,198 @@
+/**
+ * @license
+ * Copyright Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import { debounce } from '@tylertech/forge-core';
+import { html, LitElement, unsafeCSS } from 'lit';
+import { customElement, property, queryAssignedElements, queryAssignedNodes, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { setDefaultAria, toggleState } from '../../core/utils/a11y-utils';
+const styles = ':host{display:inline}.forge-meter-group{--_meter-group-background:var(--forge-meter-group-background, var(--forge-theme-surface-container-low, #ebebeb));--_meter-group-height:var(--forge-meter-group-height, var(--forge-spacing-medium, 16px));--_meter-group-shape:var(--forge-meter-group-shape, calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1)));--_meter-group-tickmarks:var(--forge-meter-group-tickmarks, 10);--_meter-group-tickmark-color:var(--forge-meter-group-tickmark-color, var(--forge-theme-outline-high, #212121));--_meter-group-tickmark-opacity:var(--forge-meter-group-tickmark-opacity, 54%)}.forge-meter-group{box-sizing:border-box}.forge-meter-group .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-group .heading.not-empty{margin-bottom:var(--forge-spacing-xxsmall,4px)}.forge-meter-group .label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.forge-meter-group .value{color:var(--forge-theme-text-medium,rgba(0,0,0,.6))}.forge-meter-group .track{position:relative;height:var(--_meter-group-height);border-radius:var(--_meter-group-shape);overflow:hidden;background:var(--_meter-group-background)}.forge-meter-group .track.tickmarks::after{content:\"\";position:relative;display:block;z-index:9999;width:100%;height:100%;margin-left:-1px;background:repeating-linear-gradient(90deg,var(--_meter-group-tickmark-color) 0,var(--_meter-group-tickmark-color) 1px,transparent 1px,transparent calc(100% / (var(--_meter-group-tickmarks) + 1) + 0px));opacity:var(--_meter-group-tickmark-opacity);pointer-events:none}.forge-meter-group .track.inner-shape--inherit{--forge-meter-inner-shape:var(--_meter-group-shape)}.forge-meter-group .track.shape--default{--_meter-group-shape:var(--forge-meter-group-shape, calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1)))}.forge-meter-group .track.shape--rounded{--_meter-group-shape:var(--forge-meter-group-shape, calc(var(--forge-shape-full, 9999px) * var(--forge-shape-factor, 1)))}.forge-meter-group .track.shape--squared{--_meter-group-shape:var(--forge-meter-group-shape, 0)}.forge-meter-group .track.density--small{--_meter-group-height:var(--forge-meter-group-height, var(--forge-spacing-xsmall, 8px))}.forge-meter-group .track.density--medium{--_meter-group-height:var(--forge-meter-group-height, var(--forge-spacing-medium, 16px))}.forge-meter-group .track.density--large{--_meter-group-height:var(--forge-meter-group-height, var(--forge-spacing-large, 24px))}:host(:is(:state(vertical),:--vertical)){display:block}:host(:is(:state(vertical),:--vertical)) .forge-meter-group{display:flex;flex-direction:row-reverse;align-items:end;width:fit-content;height:100%;max-width:100%}:host(:is(:state(vertical),:--vertical)) .forge-meter-group .heading{flex-direction:column;align-items:start}:host(:is(:state(vertical),:--vertical)) .forge-meter-group .heading.not-empty{margin-bottom:0;margin-left:var(--forge-spacing-xsmall,8px)}:host(:is(:state(vertical),:--vertical)) .forge-meter-group .track{width:var(--_meter-group-height);height:100%}:host(:is(:state(vertical),:--vertical)) .forge-meter-group .track.tickmarks::after{margin-top:1px;margin-left:0;background:repeating-linear-gradient(90deg,var(--_meter-group-tickmark-color),true 0,var(--_meter-group-tickmark-color),true 1px,transparent 1px,transparent calc(100% / (var(--_meter-group-tickmarks) + 1) + 0px))}@media (forced-colors:active){.track{border:1px solid CanvasText}}';
+/**
+ * @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.
+ */
+let MeterGroupComponent = class MeterGroupComponent extends LitElement {
+    get labels() {
+        return this._internals.labels;
+    }
+    get form() {
+        return this._internals.form;
+    }
+    constructor() {
+        super();
+        /**
+         * The minimum value of each meter in the group.
+         * @default 0
+         * @attribute
+         */
+        this.min = 0;
+        /**
+         * The maximum value of each meter in the group.
+         * @default 1
+         * @attribute
+         */
+        this.max = 1;
+        /**
+         * Whether to display tickmarks.
+         * @default false
+         * @attribute
+         */
+        this.tickmarks = false;
+        /**
+         * Whether the meter is oriented horizontally or vertically.
+         * @default 'horizontal'
+         * @attribute
+         */
+        this.direction = 'horizontal';
+        /**
+         * The density of the meter group.
+         * @default 'default'
+         * @attribute
+         */
+        this.density = 'default';
+        /**
+         * The shape of the meter group.
+         * @default 'default'
+         * @attribute
+         */
+        this.shape = 'default';
+        /**
+         * The shape of each meter in the group.
+         * @default 'default'
+         * @attribute inner-shape
+         */
+        this.innerShape = 'default';
+        this._hasSlottedHeadingContent = false;
+        /**
+         * Debounce the handler to reduce the number of times it's called during rapid changes,
+         * especially when the component is first connected.
+         */
+        this._debounceMeterChange = debounce(this._handleMeterChange.bind(this), 0);
+        this._internals = this.attachInternals();
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        setDefaultAria(this, this._internals, { role: 'group' });
+    }
+    willUpdate(changedProperties) {
+        const keys = Array.from(changedProperties.keys());
+        if (keys.includes('direction')) {
+            toggleState(this._internals, 'vertical', this.direction === 'vertical');
+        }
+        if (keys.some(key => ['direction', 'min', 'max'].includes(key.toString()))) {
+            this._syncMeters();
+        }
+    }
+    render() {
+        return html `
+      <div part="root" class="forge-meter-group" @change=${this._debounceMeterChange}>
+        <div class=${classMap({ heading: true, 'not-empty': this._hasSlottedHeadingContent })} @slotchange=${this._handleHeadingSlotChange}>
+          <div class="label"><slot name="label"></slot></div>
+          <div class="value"><slot name="value"></slot></div>
+        </div>
+        <div
+          part="track"
+          class=${classMap({
+            track: true,
+            tickmarks: this.tickmarks,
+            [`density--${this.density}`]: true,
+            [`inner-shape--${this.innerShape}`]: true,
+            [`shape--${this.shape}`]: true
+        })}>
+          <slot @slotchange=${this._debounceMeterChange}></slot>
+        </div>
+      </div>
+    `;
+    }
+    /**
+     * 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.
+     */
+    _syncMeters() {
+        this._meters.forEach(meter => {
+            meter.direction = this.direction;
+            meter.min = this.min;
+            meter.max = this.max;
+        });
+    }
+    /**
+     * Handles changes to the meters in the group, updating their arrangement relative to each other.
+     */
+    _handleMeterChange(evt) {
+        evt.stopPropagation();
+        // Iterate through each slotted meter, applying z-indices based on their order and setting an
+        // inset equal to the widths of all preceding meters.
+        this._meters.reduce((inset, meter, index, meters) => {
+            meter.style.setProperty('--_meter-z-index', `${meters.length - index}`);
+            meter.style.setProperty('--_meter-inset', `${inset}%`);
+            return inset + meter.percentage;
+        }, 0);
+    }
+    /**
+     * Checks whether the meter group has any slotted heading content.
+     */
+    _handleHeadingSlotChange() {
+        const nodes = [...this._labelNodes, ...this._valueNodes].filter(node => !!node.textContent?.trim());
+        this._hasSlottedHeadingContent = !!nodes.length;
+    }
+};
+/* @ignore */
+MeterGroupComponent.styles = unsafeCSS(styles);
+MeterGroupComponent.formAssociated = true;
+__decorate([
+    property({ type: Number })
+], MeterGroupComponent.prototype, "min", void 0);
+__decorate([
+    property({ type: Number })
+], MeterGroupComponent.prototype, "max", void 0);
+__decorate([
+    property({ type: Boolean })
+], MeterGroupComponent.prototype, "tickmarks", void 0);
+__decorate([
+    property()
+], MeterGroupComponent.prototype, "direction", void 0);
+__decorate([
+    property()
+], MeterGroupComponent.prototype, "density", void 0);
+__decorate([
+    property()
+], MeterGroupComponent.prototype, "shape", void 0);
+__decorate([
+    property({ attribute: 'inner-shape' })
+], MeterGroupComponent.prototype, "innerShape", void 0);
+__decorate([
+    state()
+], MeterGroupComponent.prototype, "_hasSlottedHeadingContent", void 0);
+__decorate([
+    queryAssignedNodes({ slot: 'label' })
+], MeterGroupComponent.prototype, "_labelNodes", void 0);
+__decorate([
+    queryAssignedNodes({ slot: 'value' })
+], MeterGroupComponent.prototype, "_valueNodes", void 0);
+__decorate([
+    queryAssignedElements({ selector: 'forge-meter' })
+], MeterGroupComponent.prototype, "_meters", void 0);
+MeterGroupComponent = __decorate([
+    customElement('forge-meter-group')
+], MeterGroupComponent);
+export { MeterGroupComponent };

package/esm/select/select/select.d.ts

@@ -29,7 +29,9 @@ declare global {
         change: CustomEvent<any>;
     }
 }
-declare const SelectComponent_base: import("../../constants").AbstractConstructor<import("../../core/mixins/form/with-form-associated").WithFormAssociationContract> & import("../../constants").AbstractConstructor<import("../../core/mixins/label/with-label-aware").WithLabelAwarenessContract> & import("../../constants").AbstractConstructor<import("../../core/mixins/focus/with-focusable").WithFocusableContract> & import("../../constants").AbstractConstructor<import("../../core/mixins/internals/with-default-aria").WithDefaultAriaContract> & import("../../constants").AbstractConstructor<import("../../core/mixins/internals/with-element-internals").WithElementInternalsContract> & import("../../constants").AbstractConstructor<import("../../field/base/with-base-field").WithBaseFieldContract> & (abstract new () => BaseSelectComponent<SelectCore>);
+declare const SelectComponent_base: import("../../constants").AbstractConstructor<import("../../core/mixins/form/with-form-associated").WithFormAssociationContract> & import("../../constants").AbstractConstructor<import("../../core/mixins/label/with-label-aware").WithLabelAwarenessContract> & import("../../constants").AbstractConstructor<import("../../core/mixins/focus/with-focusable").WithFocusableContract> & import("../../constants").AbstractConstructor<import("../../core/mixins/internals/with-default-aria").WithDefaultAriaContract> & import("../../constants").AbstractConstructor<import("../../core/mixins/internals/with-element-internals").WithElementInternalsContract> & import("../../constants").AbstractConstructor<import("../../field/base/with-base-field").WithBaseFieldContract> & ((abstract new () => BaseSelectComponent<SelectCore>) & {
+    readonly observedAttributes: string[];
+});
 /**
  * @tag forge-select
  *

package/esm/split-view/split-view-panel/split-view-panel.js

@@ -13,7 +13,7 @@ import { SplitViewPanelCore } from './split-view-panel-core';
 import { SplitViewPanelAdapter } from './split-view-panel-adapter';
 import { IconComponent, IconRegistry } from '../../icon';
 const template = '<template><div class=\"forge-split-view-panel\" id=\"root\" part=\"root\"><div class=\"forge-split-view-panel__handle\" id=\"handle\" part=\"handle\" role=\"separator\" aria-controls=\"content\" aria-grabbed=\"false\" tabindex=\"0\"><forge-icon class=\"forge-split-view-panel__icon\" id=\"icon\" part=\"icon\"></forge-icon><forge-state-layer target=\"handle\" id=\"state-layer\" exportparts=\"surface:state-layer\"></forge-state-layer><forge-focus-indicator inward target=\"handle\" part=\"focus-indicator\"></forge-focus-indicator></div><div class=\"forge-split-view-panel__content\" id=\"content\" part=\"content\" role=\"group\"><slot></slot></div></div></template>';
-const styles = '.forge-split-view-panel{display:flex;width:100%;height:100%;overflow:hidden}.forge-split-view-panel__handle{color:var(--forge-theme-text-medium,rgba(0,0,0,.6));background-color:var(--forge-theme-outline,#e0e0e0);position:relative;display:flex;flex-shrink:0;justify-content:center;align-items:center;outline:0}.forge-split-view-panel__content{flex:1;overflow:hidden}.forge-split-view-panel--closed{display:none}.forge-split-view-panel--disabled #handle{pointer-events:none}.forge-split-view-panel--disabled .forge-split-view-panel__icon{display:none}.forge-split-view-panel[orientation=horizontal]{min-width:var(--forge-split-view-handle-width,8px);width:calc(var(--forge-split-view-panel-size,unset) + var(--forge-split-view-handle-width,8px));flex-direction:row}.forge-split-view-panel[orientation=horizontal] .forge-split-view-panel__handle{width:var(--forge-split-view-handle-width,8px);cursor:var(--forge-split-view-panel-cursor)}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--closing[resizable=end]{position:absolute;top:0;left:0;animation-name:umwsp8b;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes umwsp8b{from{transform:none}to{transform:translateX(-100%)}}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--closing[resizable=start]{position:absolute;top:0;right:0;animation-name:umwsp8r;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes umwsp8r{from{transform:none}to{transform:translateX(100%)}}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--opening[resizable=end]{position:absolute;top:0;left:0;animation-name:umwsp92;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1));animation-direction:reverse}@keyframes umwsp92{from{transform:none}to{transform:translateX(-100%)}}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--opening[resizable=start]{position:absolute;top:0;right:0;animation-name:umwsp96;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1));animation-direction:reverse}@keyframes umwsp96{from{transform:none}to{transform:translateX(100%)}}.forge-split-view-panel[orientation=vertical]{min-height:var(--forge-split-view-handle-width,8px);height:calc(var(--forge-split-view-panel-size,unset) + var(--forge-split-view-handle-width,8px));flex-direction:column}.forge-split-view-panel[orientation=vertical] .forge-split-view-panel__handle{height:var(--forge-split-view-handle-width,8px);cursor:var(--forge-split-view-panel-cursor)}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--closing[resizable=end]{position:absolute;top:0;left:0;animation-name:umwspa3;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes umwspa3{from{transform:none}to{transform:translateY(-100%)}}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--closing[resizable=start]{position:absolute;bottom:0;left:0;animation-name:umwspac;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes umwspac{from{transform:none}to{transform:translateY(100%)}}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--opening[resizable=end]{position:absolute;top:0;left:0;animation-name:umwspba;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1));animation-direction:reverse}@keyframes umwspba{from{transform:none}to{transform:translateY(-100%)}}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--opening[resizable=start]{position:absolute;bottom:0;left:0;animation-name:umwspbd;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1));animation-direction:reverse}@keyframes umwspbd{from{transform:none}to{transform:translateY(100%)}}:host{z-index:var(--forge-split-view-animating-layer)!important;display:block;position:relative;height:100%;width:100%;flex:0}:host([hidden]){display:none}:host(:not([resizable=start],[resizable=end])){flex:1}:host(:not([resizable=start],[resizable=end])) .forge-split-view-panel{width:100%;height:100%;min-width:0;min-height:0}:host(:not([resizable=start],[resizable=end])) .forge-split-view-panel__handle{display:none}forge-focus-indicator{--forge-focus-indicator-active-width:2px}';
+const styles = '.forge-split-view-panel{display:flex;width:100%;height:100%;overflow:hidden}.forge-split-view-panel__handle{color:var(--forge-theme-text-medium,rgba(0,0,0,.6));background-color:var(--forge-theme-outline,#e0e0e0);position:relative;display:flex;flex-shrink:0;justify-content:center;align-items:center;outline:0}.forge-split-view-panel__content{flex:1;overflow:hidden}.forge-split-view-panel--closed{display:none}.forge-split-view-panel--disabled #handle{pointer-events:none}.forge-split-view-panel--disabled .forge-split-view-panel__icon{display:none}.forge-split-view-panel[orientation=horizontal]{min-width:var(--forge-split-view-handle-width,8px);width:calc(var(--forge-split-view-panel-size,unset) + var(--forge-split-view-handle-width,8px));flex-direction:row}.forge-split-view-panel[orientation=horizontal] .forge-split-view-panel__handle{width:var(--forge-split-view-handle-width,8px);cursor:var(--forge-split-view-panel-cursor)}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--closing[resizable=end]{position:absolute;top:0;left:0;animation-name:ufuft4t;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes ufuft4t{from{transform:none}to{transform:translateX(-100%)}}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--closing[resizable=start]{position:absolute;top:0;right:0;animation-name:ufuft5a;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes ufuft5a{from{transform:none}to{transform:translateX(100%)}}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--opening[resizable=end]{position:absolute;top:0;left:0;animation-name:ufuft5g;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1));animation-direction:reverse}@keyframes ufuft5g{from{transform:none}to{transform:translateX(-100%)}}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--opening[resizable=start]{position:absolute;top:0;right:0;animation-name:ufuft5z;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1));animation-direction:reverse}@keyframes ufuft5z{from{transform:none}to{transform:translateX(100%)}}.forge-split-view-panel[orientation=vertical]{min-height:var(--forge-split-view-handle-width,8px);height:calc(var(--forge-split-view-panel-size,unset) + var(--forge-split-view-handle-width,8px));flex-direction:column}.forge-split-view-panel[orientation=vertical] .forge-split-view-panel__handle{height:var(--forge-split-view-handle-width,8px);cursor:var(--forge-split-view-panel-cursor)}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--closing[resizable=end]{position:absolute;top:0;left:0;animation-name:ufuft67;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes ufuft67{from{transform:none}to{transform:translateY(-100%)}}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--closing[resizable=start]{position:absolute;bottom:0;left:0;animation-name:ufuft6a;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes ufuft6a{from{transform:none}to{transform:translateY(100%)}}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--opening[resizable=end]{position:absolute;top:0;left:0;animation-name:ufuft70;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1));animation-direction:reverse}@keyframes ufuft70{from{transform:none}to{transform:translateY(-100%)}}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--opening[resizable=start]{position:absolute;bottom:0;left:0;animation-name:ufuft75;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1));animation-direction:reverse}@keyframes ufuft75{from{transform:none}to{transform:translateY(100%)}}:host{z-index:var(--forge-split-view-animating-layer)!important;display:block;position:relative;height:100%;width:100%;flex:0}:host([hidden]){display:none}:host(:not([resizable=start],[resizable=end])){flex:1}:host(:not([resizable=start],[resizable=end])) .forge-split-view-panel{width:100%;height:100%;min-width:0;min-height:0}:host(:not([resizable=start],[resizable=end])) .forge-split-view-panel__handle{display:none}forge-focus-indicator{--forge-focus-indicator-active-width:2px}';
 import { StateLayerComponent } from '../../state-layer';
 import { FocusIndicatorComponent } from '../../focus-indicator';
 /**

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tylertech/forge",
   "description": "Tyler Forge™ Web Components library",
-  "version": "3.4.2",
+  "version": "3.5.1",
   "author": "Tyler Technologies, Inc.",
   "license": "Apache-2.0",
   "repository": {
@@ -17,6 +17,7 @@
     "@tylertech/forge-core": "^3.1.0",
     "@tylertech/tyler-icons": "^1.12.0",
     "imask": "^6.6.1",
+    "lit": "^3.2.1",
     "tslib": "^2.8.1"
   },
   "customElements": "custom-elements.json"

package/sass/core/styles/tokens/app-bar/search/_tokens.scss

@@ -16,7 +16,7 @@ $tokens: (
   shape: utils.module-val(app-bar-search, shape, shape.variable(small)),
   gap: utils.module-val(app-bar-search, gap, 4px),
   input-placeholder-color: utils.module-ref(app-bar-search, input-placeholder-color, color),
-  input-placeholder-opacity: utils.module-val(app-bar-search, input-placeholder-opacity, theme.emphasis(medium-low)),
+  input-placeholder-opacity: utils.module-val(app-bar-search, input-placeholder-opacity, theme.emphasis(higher)),
   background-color: utils.module-ref(app-bar-search, background-color, color),
   background-color-opacity: utils.module-val(app-bar-search, background-color-opacity, theme.emphasis(lowest)),
   border-color: utils.module-ref(app-bar-search, border-color, color),

package/sass/core/styles/tokens/key/key/_tokens.scss

@@ -0,0 +1,17 @@
+/**
+ * @license
+ * Copyright Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use 'sass:map';
+@use '../../../spacing';
+@use '../../../utils';
+
+$tokens: (
+  gap: utils.module-val(key, gap, spacing.variable(medium)),
+  direction: utils.module-val(key, direction, row)
+) !default;
+
+@function get($key) {
+  @return map.get($tokens, $key);
+}

package/sass/core/styles/tokens/key/key-item/_tokens.scss

@@ -0,0 +1,22 @@
+/**
+ * @license
+ * Copyright Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use 'sass:map';
+@use '../../../spacing';
+@use '../../../theme';
+@use '../../../typography';
+@use '../../../utils';
+
+$tokens: (
+  icon-color: utils.module-val(key-item, icon-color, theme.variable(tertiary)),
+  label-color: utils.module-val(key-item, label-color, theme.variable(text-high)),
+  value-color: utils.module-val(key-item, value-color, theme.variable(text-medium)),
+  gap: utils.module-val(key-item, gap, spacing.variable(xsmall)),
+  icon-size: utils.module-val(key-item, icon-size, typography.font-size-relative('1000'))
+) !default;
+
+@function get($key) {
+  @return map.get($tokens, $key);
+}

package/sass/core/styles/tokens/meter/meter/_tokens.scss

@@ -0,0 +1,30 @@
+/**
+ * @license
+ * Copyright Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use 'sass:map';
+@use '../../theme/color-emphasis';
+@use '../../../animation';
+@use '../../../elevation';
+@use '../../../shape';
+@use '../../../spacing';
+@use '../../../theme';
+@use '../../../utils';
+
+$tokens: (
+  background: utils.module-val(meter, background, theme.variable(tertiary-container-low)),
+  color: utils.module-val(meter, color, theme.variable(tertiary)),
+  height: utils.module-val(meter, height, spacing.variable(medium)),
+  shape: utils.module-val(meter, shape, shape.variable(medium)),
+  inner-shape: utils.module-val(meter, inner-shape, 0),
+  inner-elevation: utils.module-val(meter, inner-elevation, elevation.value(4)),
+  tickmarks: utils.module-val(meter, tickmarks, 10),
+  tickmark-opacity: utils.module-val(meter, tickmark-opacity, color-emphasis.value(medium)),
+  transition-duration: utils.module-val(meter, transition-duration, animation.variable(duration-short4)),
+  transition-timing: utils.module-val(meter, transition-timing, animation.variable(easing-standard))
+);
+
+@function get($key) {
+  @return map.get($tokens, $key);
+}

package/sass/core/styles/tokens/meter/meter-group/_tokens.scss

@@ -0,0 +1,26 @@
+/**
+ * @license
+ * Copyright Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use 'sass:map';
+@use '../../theme/color-emphasis';
+@use '../../../animation';
+@use '../../../elevation';
+@use '../../../shape';
+@use '../../../spacing';
+@use '../../../theme';
+@use '../../../utils';
+
+$tokens: (
+  background: utils.module-val(meter-group, background, theme.variable(surface-container-low)),
+  height: utils.module-val(meter-group, height, spacing.variable(medium)),
+  shape: utils.module-val(meter-group, shape, shape.variable(medium)),
+  tickmarks: utils.module-val(meter-group, tickmarks, 10),
+  tickmark-color: utils.module-val(meter-group, tickmark-color, theme.variable(outline-high)),
+  tickmark-opacity: utils.module-val(meter-group, tickmark-opacity, color-emphasis.value(medium))
+);
+
+@function get($key) {
+  @return map.get($tokens, $key);
+}

package/sass/core/styles/typography/index.scss

@@ -166,7 +166,7 @@
     @if not map.get($style-tokens, $key) {
       @error 'Invalid token "#{$key}" for style "#{$style}"';
     }
-    --#{config.$prefix}-typography-#{$key}: #{$value};
+    --#{config.$prefix}-typography-#{$style}-#{$key}: #{$value};
   }
 }
 

package/sass/icon-button/icon-button.scss

@@ -4,9 +4,11 @@
  * License: Apache-2.0
  */
 @use './core' as *;
-@use '../core/styles/theme';
+@use '../theme';
+@use '../typography';
 @use '../state-layer';
 @use '../focus-indicator';
+@use '../badge';
 @use '../circular-progress';
 
 //
@@ -203,6 +205,23 @@ forge-state-layer {
   }
 }
 
+:host(:is([dense], [density='small'])) {
+  // We reduce the size of the badge when the density is small
+  ::slotted(forge-badge[slot='badge']) {
+    @include typography.provide(
+      label1,
+      (
+        line-height: normal
+      )
+    );
+    @include badge.provide-theme(
+      (
+        height: auto
+      )
+    );
+  }
+}
+
 //
 // Circular progress
 //

package/sass/key/key/_core.scss

@@ -0,0 +1,20 @@
+/**
+ * @license
+ * Copyright Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use './token-utils' as *;
+
+@forward './token-utils';
+
+@mixin host {
+  display: block;
+}
+
+@mixin base {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: #{token(direction)};
+  gap: #{token(gap)};
+  flex-wrap: wrap;
+}

package/sass/key/key/_token-utils.scss

@@ -0,0 +1,30 @@
+/**
+ * @license
+ * Copyright Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use '../../core/styles/tokens/key/key/tokens';
+@use '../../core/styles/tokens/token-utils';
+
+$_module: key;
+$_tokens: tokens.$tokens;
+
+@mixin provide-theme($theme) {
+  @include token-utils.provide-theme($_module, $_tokens, $theme);
+}
+
+@function token($name, $type: token) {
+  @return token-utils.token($_module, $_tokens, $name, $type);
+}
+
+@function declare($token) {
+  @return token-utils.declare($_module, $token);
+}
+
+@mixin override($token, $token-or-value, $type: token) {
+  @include token-utils.override($_module, $_tokens, $token, $token-or-value, $type);
+}
+
+@mixin tokens($includes: null, $excludes: null) {
+  @include token-utils.tokens($_module, $_tokens, $includes, $excludes);
+}

package/sass/key/key/index.scss

@@ -0,0 +1,6 @@
+/**
+ * @license
+ * Copyright Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@forward './core';

package/sass/key/key/key.scss

@@ -0,0 +1,26 @@
+/**
+ * @license
+ * Copyright Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use './core';
+
+//
+// Host
+//
+
+:host {
+  @include core.host;
+}
+
+//
+// Base
+//
+
+.forge-key {
+  @include core.tokens;
+}
+
+.forge-key {
+  @include core.base;
+}

package/sass/key/key-item/_core.scss

@@ -0,0 +1,69 @@
+/**
+ * @license
+ * Copyright Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use '../../core/styles/theme';
+@use '../../core/styles/typography';
+@use '../../icon';
+@use './token-utils' as *;
+
+@forward './token-utils';
+
+@mixin host {
+  display: inline;
+}
+
+@mixin base {
+  @include typography.style(label1);
+
+  box-sizing: border-box;
+  display: grid;
+  grid-template:
+    'icon label'
+    'icon value';
+  column-gap: #{token(gap)};
+  inline-size: fit-content;
+  line-height: normal;
+}
+
+@mixin icon {
+  @include icon.provide-theme(
+    (
+      size: #{token(icon-size)}
+    )
+  );
+
+  grid-area: icon;
+  color: #{token(icon-color)};
+}
+
+@mixin label {
+  grid-area: label;
+  color: #{token(label-color)};
+}
+
+@mixin value {
+  grid-area: value;
+  color: #{token(value-color)};
+}
+
+@mixin default-icon {
+  // Subtract a pixel from the default icon's size to better match the size of a slotted icon
+  block-size: calc(#{token(icon-size)} - 1px);
+  inline-size: calc(#{token(icon-size)} - 1px);
+  border-radius: 50%;
+  background: currentColor;
+}
+
+@mixin inline {
+  grid-template: 'icon label value';
+  grid-template-columns: auto 1fr auto;
+  align-items: center;
+  inline-size: auto;
+}
+
+@mixin no-value {
+  grid-template: 'icon label';
+  align-items: center;
+}

package/sass/key/key-item/_token-utils.scss

@@ -0,0 +1,30 @@
+/**
+ * @license
+ * Copyright Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use '../../core/styles/tokens/key/key-item/tokens';
+@use '../../core/styles/tokens/token-utils';
+
+$_module: key-item;
+$_tokens: tokens.$tokens;
+
+@mixin provide-theme($theme) {
+  @include token-utils.provide-theme($_module, $_tokens, $theme);
+}
+
+@function token($name, $type: token) {
+  @return token-utils.token($_module, $_tokens, $name, $type);
+}
+
+@function declare($token) {
+  @return token-utils.declare($_module, $token);
+}
+
+@mixin override($token, $token-or-value, $type: token) {
+  @include token-utils.override($_module, $_tokens, $token, $token-or-value, $type);
+}
+
+@mixin tokens($includes: null, $excludes: null) {
+  @include token-utils.tokens($_module, $_tokens, $includes, $excludes);
+}

package/sass/key/key-item/index.scss

@@ -0,0 +1,6 @@
+/**
+ * @license
+ * Copyright Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@forward './core';