@tylertech/forge 3.4.1 → 3.5.0

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/split-view.js

@@ -11,7 +11,7 @@ import { SplitViewCore } from './split-view-core';
 import { SPLIT_VIEW_CONSTANTS } from './split-view-constants';
 import { SplitViewPanelComponent } from '../split-view-panel';
 const template = '<template><div class=\"forge-split-view\" id=\"root\" part=\"root\"><slot></slot></div></template>';
-const styles = '.forge-split-view{display:flex;width:100%;height:100%}:host{--forge-split-view-handle-width:8px;display:block;height:100%;width:100%;overflow:hidden;contain:paint size}:host([hidden]){display:none}:host([orientation=horizontal]) .forge-split-view{flex-direction:row}:host([orientation=vertical]) .forge-split-view{flex-direction:column}';
+const styles = '.forge-split-view{display:flex;width:100%;height:100%}:host{--forge-split-view-handle-width:8px;display:block;height:100%;width:100%;overflow:hidden}:host([hidden]){display:none}:host([orientation=horizontal]) .forge-split-view{flex-direction:row}:host([orientation=vertical]) .forge-split-view{flex-direction:column}';
 /**
  * @tag forge-split-view
  */

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;contain:paint size}.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:unique-id;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes unique-id{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:unique-id;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes unique-id{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:unique-id;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 unique-id{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:unique-id;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 unique-id{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:unique-id;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes unique-id{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:unique-id;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes unique-id{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:unique-id;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 unique-id{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:unique-id;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 unique-id{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:u5bwqam;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes u5bwqam{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:u5bwqbl;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes u5bwqbl{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:u5bwqbz;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 u5bwqbz{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:u5bwqcx;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 u5bwqcx{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:u5bwqdh;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes u5bwqdh{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:u5bwqdw;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes u5bwqdw{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:u5bwqeg;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 u5bwqeg{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:u5bwqer;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 u5bwqer{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/esm/toolbar/toolbar.d.ts

@@ -27,8 +27,8 @@ declare global {
  * @attribute {boolean} no-padding - Sets the internal padding style to 0.
  * @attribute {boolean} auto-height - Forces the internal container to use `height: auto` for dynamic content that doesn't fit the static height.
  *
- * @cssproperty --forge-theme-height - Controls the height.
- * @cssproperty --forge-theme-min-height - Controls the minimum height.
+ * @cssproperty --forge-toolbar-height - Controls the height.
+ * @cssproperty --forge-toolbar-min-height - Controls the minimum height. Defaults to the toolbar height.
  * @cssproperty --forge-theme-surface - Controls the background-color of the toolbar.
  * @cssproperty --forge-toolbar-divider-width - Controls the divider width.
  * @cssproperty --forge-toolbar-divider-style - Controls the divider style.

package/esm/toolbar/toolbar.js

@@ -8,7 +8,7 @@ import { customElement, attachShadowTemplate, coerceBoolean } from '@tylertech/f
 import { BaseComponent } from '../core/base/base-component';
 import { TOOLBAR_CONSTANTS } from './toolbar-constants';
 const template = '<template><div class=\"forge-toolbar\" part=\"root\"><div class=\"section\" part=\"before-section-start\"><slot name=\"before-start\"></slot></div><div class=\"inner center\" part=\"inner\"><div class=\"section\" part=\"section-start\"><slot name=\"start\"></slot><slot></slot></div><div class=\"section center\" part=\"section-center\"><slot name=\"center\"></slot></div><div class=\"section end\" part=\"section-end\"><slot name=\"end\"></slot></div></div><div class=\"section end\" part=\"after-section-end\"><slot name=\"after-end\"></slot></div></div></template>';
-const styles = ':host{display:block;contain:layout}:host([hidden]){display:none}.forge-toolbar{--_toolbar-background:var(--forge-toolbar-background, var(--forge-theme-surface, #ffffff));--_toolbar-height:var(--forge-toolbar-height, 56px);--_toolbar-min-height:var(--forge-toolbar-min-height, var(--_toolbar-height));--_toolbar-divider-width:var(--forge-toolbar-divider-width, var(--forge-border-thin, 1px));--_toolbar-divider-style:var(--forge-toolbar-divider-style, solid);--_toolbar-divider-color:var(--forge-toolbar-divider-color, var(--forge-theme-outline, #e0e0e0));--_toolbar-shape:var(--forge-toolbar-shape, calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1)));--_toolbar-start-start-shape:var(--forge-toolbar-start-start-shape, var(--_toolbar-shape));--_toolbar-start-end-shape:var(--forge-toolbar-start-end-shape, var(--_toolbar-shape));--_toolbar-end-start-shape:var(--forge-toolbar-end-start-shape, 0);--_toolbar-end-end-shape:var(--forge-toolbar-end-end-shape, 0);--_toolbar-padding:var(--forge-toolbar-padding, var(--forge-spacing-medium, 16px));--_toolbar-padding-block:var(--forge-toolbar-padding-block, 0);--_toolbar-padding-inline:var(--forge-toolbar-padding-inline, var(--_toolbar-padding));--_toolbar-columns:var(--forge-toolbar-columns, auto 1fr auto)}.forge-toolbar{display:grid;grid-template-columns:var(--_toolbar-columns);height:var(--_toolbar-height);min-height:var(--_toolbar-min-height);box-sizing:border-box;padding-inline:0;border-block-end-width:var(--_toolbar-divider-width);border-block-end-style:var(--_toolbar-divider-style);border-block-end-color:var(--_toolbar-divider-color);border-start-start-radius:var(--_toolbar-start-start-shape);border-start-end-radius:var(--_toolbar-start-end-shape);border-end-start-radius:var(--_toolbar-end-start-shape);border-end-end-radius:var(--_toolbar-end-end-shape);background:var(--_toolbar-background)}.inner{display:grid;grid-template-columns:var(--_toolbar-columns);padding-inline:var(--_toolbar-padding-inline);padding-block:var(--_toolbar-padding-block);box-sizing:border-box}.section{display:flex;align-items:center;width:100%;box-sizing:border-box}.section.center{justify-content:center}.section.end{justify-content:end}:host([inverted]) .forge-toolbar{--_toolbar-start-start-shape:var(--forge-toolbar-start-start-shape, 0);--_toolbar-start-end-shape:var(--forge-toolbar-start-end-shape, 0);--_toolbar-end-start-shape:var(--_toolbar-shape);--_toolbar-end-end-shape:var(--_toolbar-shape);border-block-end:none;border-block-start-width:var(--_toolbar-divider-width);border-block-start-style:var(--_toolbar-divider-style);border-block-start-color:var(--_toolbar-divider-color)}:host(:is([no-divider],[no-border])) .forge-toolbar{border:none}:host([no-padding]) .forge-toolbar{--_toolbar-padding:var(--forge-toolbar-padding, 0)}:host([auto-height]) .forge-toolbar{--_toolbar-height:var(--forge-toolbar-height, auto)}::slotted(:is(h1,h2,h3,h4,h5,h6,p)){margin:0}';
+const styles = ':host{display:block}:host([hidden]){display:none}.forge-toolbar{--_toolbar-background:var(--forge-toolbar-background, var(--forge-theme-surface, #ffffff));--_toolbar-height:var(--forge-toolbar-height, 56px);--_toolbar-min-height:var(--forge-toolbar-min-height, var(--_toolbar-height));--_toolbar-divider-width:var(--forge-toolbar-divider-width, var(--forge-border-thin, 1px));--_toolbar-divider-style:var(--forge-toolbar-divider-style, solid);--_toolbar-divider-color:var(--forge-toolbar-divider-color, var(--forge-theme-outline, #e0e0e0));--_toolbar-shape:var(--forge-toolbar-shape, calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1)));--_toolbar-start-start-shape:var(--forge-toolbar-start-start-shape, var(--_toolbar-shape));--_toolbar-start-end-shape:var(--forge-toolbar-start-end-shape, var(--_toolbar-shape));--_toolbar-end-start-shape:var(--forge-toolbar-end-start-shape, 0);--_toolbar-end-end-shape:var(--forge-toolbar-end-end-shape, 0);--_toolbar-padding:var(--forge-toolbar-padding, var(--forge-spacing-medium, 16px));--_toolbar-padding-block:var(--forge-toolbar-padding-block, 0);--_toolbar-padding-inline:var(--forge-toolbar-padding-inline, var(--_toolbar-padding));--_toolbar-columns:var(--forge-toolbar-columns, auto 1fr auto)}.forge-toolbar{display:grid;grid-template-columns:var(--_toolbar-columns);height:var(--_toolbar-height);min-height:var(--_toolbar-min-height);box-sizing:border-box;padding-inline:0;border-block-end-width:var(--_toolbar-divider-width);border-block-end-style:var(--_toolbar-divider-style);border-block-end-color:var(--_toolbar-divider-color);border-start-start-radius:var(--_toolbar-start-start-shape);border-start-end-radius:var(--_toolbar-start-end-shape);border-end-start-radius:var(--_toolbar-end-start-shape);border-end-end-radius:var(--_toolbar-end-end-shape);background:var(--_toolbar-background)}.inner{display:grid;grid-template-columns:var(--_toolbar-columns);padding-inline:var(--_toolbar-padding-inline);padding-block:var(--_toolbar-padding-block);box-sizing:border-box}.section{display:flex;align-items:center;width:100%;box-sizing:border-box}.section.center{justify-content:center}.section.end{justify-content:end}:host([inverted]) .forge-toolbar{--_toolbar-start-start-shape:var(--forge-toolbar-start-start-shape, 0);--_toolbar-start-end-shape:var(--forge-toolbar-start-end-shape, 0);--_toolbar-end-start-shape:var(--_toolbar-shape);--_toolbar-end-end-shape:var(--_toolbar-shape);border-block-end:none;border-block-start-width:var(--_toolbar-divider-width);border-block-start-style:var(--_toolbar-divider-style);border-block-start-color:var(--_toolbar-divider-color)}:host(:is([no-divider],[no-border])) .forge-toolbar{border:none}:host([no-padding]) .forge-toolbar{--_toolbar-padding:var(--forge-toolbar-padding, 0)}:host([auto-height]) .forge-toolbar{--_toolbar-height:var(--forge-toolbar-height, auto)}::slotted(:is(h1,h2,h3,h4,h5,h6,p)){margin:0}';
 /**
  * @tag forge-toolbar
  *
@@ -24,8 +24,8 @@ const styles = ':host{display:block;contain:layout}:host([hidden]){display:none}
  * @attribute {boolean} no-padding - Sets the internal padding style to 0.
  * @attribute {boolean} auto-height - Forces the internal container to use `height: auto` for dynamic content that doesn't fit the static height.
  *
- * @cssproperty --forge-theme-height - Controls the height.
- * @cssproperty --forge-theme-min-height - Controls the minimum height.
+ * @cssproperty --forge-toolbar-height - Controls the height.
+ * @cssproperty --forge-toolbar-min-height - Controls the minimum height. Defaults to the toolbar height.
  * @cssproperty --forge-theme-surface - Controls the background-color of the toolbar.
  * @cssproperty --forge-toolbar-divider-width - Controls the divider width.
  * @cssproperty --forge-toolbar-divider-style - Controls the divider style.

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tylertech/forge",
   "description": "Tyler Forge™ Web Components library",
-  "version": "3.4.1",
+  "version": "3.5.0",
   "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/avatar/_core.scss

@@ -9,8 +9,6 @@
 @forward './token-utils';
 
 @mixin host() {
-  contain: content;
-
   display: inline-block;
 }
 

package/sass/backdrop/_core.scss

@@ -14,7 +14,6 @@
 @mixin base {
   position: absolute;
   inset: 0;
-  contain: content;
 
   z-index: #{token(z-index)};
 

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/drawer/mini/_tokens.scss

@@ -12,6 +12,7 @@
 
 $tokens: (
   width: utils.module-val(mini-drawer, width, 56px),
+  min-width: utils.module-ref(mini-drawer, min-width, width),
   hover-width: utils.module-val(mini-drawer, hover-width, base-tokens.get(width)),
   transition-duration: utils.module-val(mini-drawer, transition-duration, animation.variable(duration-short4)),
   transition-easing: utils.module-val(mini-drawer, transition-easing, animation.variable(easing-standard)),

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/divider/_core.scss

@@ -9,7 +9,6 @@
 
 @mixin host {
   display: block;
-  contain: content;
   margin: #{token(margin)};
 }
 

package/sass/drawer/base/_core.scss

@@ -60,8 +60,7 @@
 }
 
 @mixin host() {
-  display: flex;
-  flex-direction: column;
+  display: grid;
   box-sizing: border-box;
   height: 100%;
   overflow: hidden !important; // Using important to ensure that it overrides the scaffold overflow style

package/sass/drawer/drawer/drawer.scss

@@ -25,13 +25,7 @@
 
 @include base-core.core-styles;
 
-//
-// Safari fix for triggering reflow after transition completes (as of Safari 14)
-//
-@media not all and (min-resolution: 0.001dpcm) {
-  @supports (-webkit-appearance: none) and (stroke-color: transparent) {
-    :host([open]) {
-      transform: translateZ(0);
-    }
-  }
+:host([open]) {
+  // Safari fix for triggering reflow after transition completes (as of Safari 17.6)
+  transform: translateZ(0);
 }

package/sass/drawer/mini-drawer/_core.scss

@@ -27,6 +27,7 @@
 @mixin root() {
   z-index: #{elevation.z-index-variable(surface)};
   height: 100%;
+  min-width: #{token(min-width)};
 }
 
 @mixin hover() {

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;
+}