@tylertech/forge 3.3.0 → 3.3.2

package/esm/expansion-panel/expansion-panel-adapter.js

@@ -13,6 +13,7 @@ export class ExpansionPanelAdapter extends BaseAdapter {
         this._transitionEndListener = this._onTransitionEnd.bind(this);
         this._headerElement = getShadowElement(this._component, EXPANSION_PANEL_CONSTANTS.selectors.HEADER);
         this._contentElement = getShadowElement(this._component, EXPANSION_PANEL_CONSTANTS.selectors.CONTENT);
+        this._innerElement = getShadowElement(this._component, EXPANSION_PANEL_CONSTANTS.selectors.INNER);
     }
     setAnimationCompleteListener(listener) {
         this._transitionCompleteListener = listener;
@@ -42,4 +43,10 @@ export class ExpansionPanelAdapter extends BaseAdapter {
             this._transitionCompleteListener();
         }
     }
+    animationStart() {
+        this._innerElement.style.overflow = 'hidden';
+    }
+    animationEnd() {
+        this._innerElement.style.removeProperty('overflow');
+    }
 }

package/esm/expansion-panel/expansion-panel-constants.d.ts

@@ -22,6 +22,7 @@ export declare const EXPANSION_PANEL_CONSTANTS: {
     selectors: {
         HEADER: string;
         CONTENT: string;
+        INNER: string;
         IGNORE: string;
         OPEN_ICON: string;
     };
@@ -32,3 +33,4 @@ export declare const EXPANSION_PANEL_CONSTANTS: {
 };
 export type ExpansionPanelOrientation = 'horizontal' | 'vertical';
 export type ExpansionPanelAnimationType = 'default' | 'none';
+export declare const emulateUserToggle: unique symbol;

package/esm/expansion-panel/expansion-panel-constants.js

@@ -21,6 +21,7 @@ const classes = {
 const selectors = {
     HEADER: '.header',
     CONTENT: '.content',
+    INNER: '.inner',
     IGNORE: ':is([data-forge-ignore],[forge-ignore])',
     OPEN_ICON: `:is([slot=header] ${OPEN_ICON_CONSTANTS.elementName}, ${OPEN_ICON_CONSTANTS.elementName}[slot^=header])`
 };
@@ -36,3 +37,4 @@ export const EXPANSION_PANEL_CONSTANTS = {
     selectors,
     events
 };
+export const emulateUserToggle = Symbol('emulateUserToggle');

package/esm/expansion-panel/expansion-panel-core.d.ts

@@ -9,6 +9,7 @@ export interface IExpansionPanelCore {
     open: boolean;
     orientation: ExpansionPanelOrientation;
     animationType: ExpansionPanelAnimationType;
+    dispatchToggleEvent(): void;
 }
 export declare class ExpansionPanelCore implements IExpansionPanelCore {
     private _adapter;
@@ -24,7 +25,7 @@ export declare class ExpansionPanelCore implements IExpansionPanelCore {
     private _onKeydown;
     private _onAnimationComplete;
     private _togglePanel;
-    private _dispatchToggleEvent;
+    dispatchToggleEvent(): void;
     private _toggle;
     get open(): boolean;
     set open(value: boolean);

package/esm/expansion-panel/expansion-panel-core.js

@@ -28,30 +28,36 @@ export class ExpansionPanelCore {
         }
         evt.stopPropagation();
         this._toggle();
-        this._dispatchToggleEvent();
+        this.dispatchToggleEvent();
     }
     _onKeydown(evt) {
         if (evt.key === ' ' || evt.key === 'Enter') {
             evt.stopPropagation();
             evt.preventDefault();
             this._toggle();
-            this._dispatchToggleEvent();
+            this.dispatchToggleEvent();
         }
     }
     _onAnimationComplete() {
         if (!this._open) {
             this._adapter.setContentVisibility(false);
         }
+        else if (this._animationType !== 'none') {
+            this._adapter.animationEnd();
+        }
         this._adapter.dispatchHostEvent(new CustomEvent(EXPANSION_PANEL_CONSTANTS.events.ANIMATION_COMPLETE, { detail: this._open }));
     }
     _togglePanel() {
         this._adapter.toggleHostAttribute(EXPANSION_PANEL_CONSTANTS.attributes.OPEN, this._open);
         this._adapter.tryToggleOpenIcon(this._open);
         if (this._open) {
+            if (this._animationType !== 'none') {
+                this._adapter.animationStart();
+            }
             this._adapter.setContentVisibility(true);
         }
     }
-    _dispatchToggleEvent() {
+    dispatchToggleEvent() {
         const evt = new CustomEvent(EXPANSION_PANEL_CONSTANTS.events.TOGGLE, {
             detail: this._open,
             bubbles: true,

package/esm/expansion-panel/expansion-panel.d.ts

@@ -4,7 +4,7 @@
  * License: Apache-2.0
  */
 import { BaseComponent, IBaseComponent } from '../core/base/base-component';
-import { ExpansionPanelAnimationType, ExpansionPanelOrientation } from './expansion-panel-constants';
+import { ExpansionPanelAnimationType, ExpansionPanelOrientation, emulateUserToggle } from './expansion-panel-constants';
 export interface IExpansionPanelComponent extends IBaseComponent {
     open: boolean;
     orientation: ExpansionPanelOrientation;
@@ -63,4 +63,10 @@ export declare class ExpansionPanelComponent extends BaseComponent implements IE
      * Toggles the open state of the panel.
      */
     toggle(): void;
+    /**
+     * @internal
+     *
+     * Emulates a user toggle of the panel, by also dispatching the toggle event.
+     */
+    [emulateUserToggle](open: boolean): void;
 }

package/esm/expansion-panel/expansion-panel.js

@@ -7,10 +7,10 @@ import { __decorate } from "tslib";
 import { attachShadowTemplate, coerceBoolean, customElement, coreProperty } from '@tylertech/forge-core';
 import { BaseComponent } from '../core/base/base-component';
 import { ExpansionPanelAdapter } from './expansion-panel-adapter';
-import { EXPANSION_PANEL_CONSTANTS } from './expansion-panel-constants';
+import { EXPANSION_PANEL_CONSTANTS, emulateUserToggle } from './expansion-panel-constants';
 import { ExpansionPanelCore } from './expansion-panel-core';
 const template = '<template><div class=\"forge-expansion-panel\" part=\"root\"><div class=\"header\" part=\"header\"><slot name=\"header\"></slot></div><div class=\"content hidden\" part=\"content\"><div class=\"inner\"><slot></slot></div></div></div></template>';
-const styles = ':host{display:block}:host([hidden]){display:none}.forge-expansion-panel{--_expansion-panel-animation-duration:var(--forge-expansion-panel-animation-duration, var(--forge-animation-duration-medium4, 400ms));--_expansion-panel-animation-easing:var(--forge-expansion-panel-animation-easing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)))}.header{outline:0;-webkit-tap-highlight-color:transparent;cursor:pointer}.content{display:grid;grid-template-rows:0fr;transition-property:visibility,opacity,grid-template-rows;transition-duration:var(--_expansion-panel-animation-duration);transition-timing-function:var(--_expansion-panel-animation-easing);min-height:0;overflow:hidden;opacity:0}.content .inner{display:grid;grid-template-rows:1fr;overflow:hidden}.hidden{visibility:hidden}@media (prefers-reduced-motion:reduce){.content{transition:none}}:host([open]) .content{opacity:1}:host([open]:is(:not([orientation]),[orientation=vertical])) .content{grid-template-rows:1fr}:host([open][orientation=horizontal]) .content{grid-template-columns:1fr}:host([orientation=horizontal]) .forge-expansion-panel{display:grid;grid-template-columns:auto 1fr}:host([orientation=horizontal]) .content{transition-property:opacity,grid-template-columns;grid-template-rows:none;grid-template-columns:0fr}:host([animation-type=none]) .content{transition:none}';
+const styles = ':host{display:block}:host([hidden]){display:none}.forge-expansion-panel{--_expansion-panel-animation-duration:var(--forge-expansion-panel-animation-duration, var(--forge-animation-duration-medium4, 400ms));--_expansion-panel-animation-easing:var(--forge-expansion-panel-animation-easing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)))}.header{outline:0;-webkit-tap-highlight-color:transparent;cursor:pointer}.content{display:grid;grid-template-rows:0fr;transition-property:visibility,opacity,grid-template-rows;transition-duration:var(--_expansion-panel-animation-duration);transition-timing-function:var(--_expansion-panel-animation-easing);min-height:0;opacity:0}.content .inner{display:grid;grid-template-rows:1fr}.hidden{visibility:hidden}@media (prefers-reduced-motion:reduce){.content{transition:none}}:host(:not([open])) .inner{overflow:hidden}:host([open]) .content{opacity:1}:host([open]:is(:not([orientation]),[orientation=vertical])) .content{grid-template-rows:1fr}:host([open][orientation=horizontal]) .content{grid-template-columns:1fr}:host([orientation=horizontal]) .forge-expansion-panel{display:grid;grid-template-columns:auto 1fr}:host([orientation=horizontal]) .content{transition-property:opacity,grid-template-columns;grid-template-rows:none;grid-template-columns:0fr}:host([animation-type=none]) .content{transition:none}';
 /**
  * @tag forge-expansion-panel
  *
@@ -72,6 +72,18 @@ let ExpansionPanelComponent = class ExpansionPanelComponent extends BaseComponen
     toggle() {
         this.open = !this.open;
     }
+    /**
+     * @internal
+     *
+     * Emulates a user toggle of the panel, by also dispatching the toggle event.
+     */
+    [emulateUserToggle](open) {
+        if (this.open === open) {
+            return;
+        }
+        this.open = open;
+        this._core.dispatchToggleEvent();
+    }
 };
 __decorate([
     coreProperty()

package/esm/field/field-adapter.d.ts

@@ -20,6 +20,7 @@ export interface IFieldAdapter extends IBaseAdapter<IFieldComponent> {
 export declare class FieldAdapter extends BaseAdapter<IFieldComponent> implements IFieldAdapter {
     private readonly _rootElement;
     private readonly _containerElement;
+    private readonly _inputContainerElement;
     private readonly _labelElement;
     private readonly _popoverIconElement;
     private readonly _focusIndicatorElement;

package/esm/field/field-adapter.js

@@ -15,6 +15,7 @@ export class FieldAdapter extends BaseAdapter {
         super(component);
         this._rootElement = getShadowElement(component, FIELD_CONSTANTS.selectors.ROOT);
         this._containerElement = getShadowElement(component, FIELD_CONSTANTS.selectors.CONTAINER);
+        this._inputContainerElement = getShadowElement(component, FIELD_CONSTANTS.selectors.INPUT_CONTAINER);
         this._labelElement = getShadowElement(component, FIELD_CONSTANTS.selectors.LABEL);
         this._popoverIconElement = getShadowElement(component, FIELD_CONSTANTS.selectors.POPOVER_ICON);
         this._focusIndicatorElement = getShadowElement(component, FOCUS_INDICATOR_CONSTANTS.elementName);
@@ -48,11 +49,17 @@ export class FieldAdapter extends BaseAdapter {
         if (skipAnimation) {
             return;
         }
+        // Temporarily lock the input container element width to its current width before the animation starts
+        // to ensure that the element cannot collapse while the animation is executing. The width will be
+        // removed after the animation completes.
+        const { width: inputContainerWidth } = this._inputContainerElement.getBoundingClientRect();
+        this._inputContainerElement.style.setProperty('width', `${inputContainerWidth}px`);
         const className = value ? FIELD_CONSTANTS.classes.FLOATING_IN : FIELD_CONSTANTS.classes.FLOATING_OUT;
         const animationName = value ? FIELD_CONSTANTS.animations.FLOAT_IN_LABEL : FIELD_CONSTANTS.animations.FLOAT_OUT_LABEL;
         const animationEndListener = (evt) => {
             if (evt.animationName === animationName) {
                 removeClass(className, this._rootElement);
+                this._inputContainerElement.style.removeProperty('width');
                 this._rootElement.removeEventListener('animationend', animationEndListener);
             }
         };

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

@@ -59,6 +59,7 @@ export declare const FIELD_CONSTANTS: {
     selectors: {
         ROOT: string;
         CONTAINER: string;
+        INPUT_CONTAINER: string;
         LABEL: string;
         POPOVER_ICON: string;
         LABEL_ELEMENTS: string;

package/esm/field/field-constants.js

@@ -30,6 +30,7 @@ const classes = {
 const selectors = {
     ROOT: '#root',
     CONTAINER: '#container',
+    INPUT_CONTAINER: '#input',
     LABEL: '#label',
     POPOVER_ICON: '#popover-icon',
     LABEL_ELEMENTS: `:where(label, ${LABEL_CONSTANTS.elementName})`,

package/esm/field/field.js

@@ -11,7 +11,7 @@ import { FieldAdapter } from './field-adapter';
 import { FIELD_CONSTANTS } from './field-constants';
 import { FieldCore } from './field-core';
 const template = '<template><div id=\"root\" class=\"forge-field\" part=\"root\"><div id=\"label\" class=\"label\" part=\"label\"><slot name=\"label\"></slot></div><div id=\"container\" class=\"container\"><div class=\"popover-target\" aria-hidden=\"true\"></div><div id=\"surface\" class=\"surface\" part=\"surface\"></div><div id=\"start\" class=\"start\" part=\"start\"><slot name=\"start\"></slot></div><div id=\"input\" class=\"input\" part=\"input\"><slot></slot></div><div id=\"end\" class=\"end\" part=\"end\"><slot name=\"end\"></slot></div><div id=\"popover-icon\" class=\"popover-icon\" part=\"popover-icon\"><svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" viewBox=\"0 0 24 24\" width=\"24\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M7 10l5 5 5-5z\" id=\"popover-icon__arrow\"/></svg></div><div id=\"accessory\" class=\"accessory\" part=\"accessory\"><slot name=\"accessory\"></slot></div></div><div class=\"support-text\"><div class=\"support-text-start\" part=\"support-text\"><slot name=\"support-text\"></slot></div><div class=\"support-text-end\" part=\"support-text-end\"><slot name=\"support-text-end\"></slot></div></div><div class=\"outline\"><forge-focus-indicator target=\"input\" part=\"focus-indicator\"></forge-focus-indicator></div></div></template>';
-const styles = '@keyframes float-in-label-animation{from{translate:0;opacity:40%}to{translate:var(--_field-floating-label-translation);opacity:100%}}@keyframes float-out-label-animation{from{translate:var(--_field-floating-label-translation);opacity:40%}to{translate:0;opacity:100%}}@keyframes float-in-input-animation{from{translate:0}to{translate:0 calc(calc(max(var(--forge-typography-body2-line-height,calc(var(--forge-typography-font-size,1rem) * var(--forge-typography-body-line-height-scale,1.375))),var(--forge-typography-label2-line-height,calc(var(--forge-typography-font-size,1rem) * var(--forge-typography-label-line-height-scale,1.25))))/ 2) + calc((var(--_field-height) - 56px)/ 8))}}@keyframes float-out-input-animation{from{translate:0 calc(calc(max(var(--forge-typography-body2-line-height,calc(var(--forge-typography-font-size,1rem) * var(--forge-typography-body-line-height-scale,1.375))),var(--forge-typography-label2-line-height,calc(var(--forge-typography-font-size,1rem) * var(--forge-typography-label-line-height-scale,1.25))))/ 2) + calc((var(--_field-height) - 56px)/ 8))}to{translate:0}}@keyframes multiline-inset-label-background-animation{from{opacity:0%}to{opacity:100%}}@layer base,theme,variant,shape,density; @layer base{:host{display:block}:host([hidden]){display:none}.forge-field{--_field-background:var(--forge-field-background, transparent);--_field-tonal-background:var(--forge-field-tonal-background, var(--forge-theme-surface-container-low, #ebebeb));--_field-tonal-background-hover:var(--forge-field-tonal-background-hover, var(--forge-theme-surface-container-minimum, #f5f5f5));--_field-filled-background:var(--forge-field-filled-background, var(--forge-theme-surface-bright, #ffffff));--_field-outline-style:var(--forge-field-outline-style, solid);--_field-outline-width:var(--forge-field-outline-width, var(--forge-border-thin, 1px));--_field-shape:var(--forge-field-shape, calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1)));--_field-height:var(--forge-field-height, 40px);--_field-inset-height:var(--forge-field-inset-height, 48px);--_field-padding-inline:var(--forge-field-padding-inline, 12px);--_field-padding-inline-start:var(--forge-field-padding-inline-start, var(--_field-padding-inline));--_field-padding-inline-end:var(--forge-field-padding-inline-end, var(--_field-padding-inline));--_field-inner-padding-inline:var(--forge-field-inner-padding-inline, 8px);--_field-rounded-container-padding-inline:var(--forge-field-rounded-container-padding-inline, calc(var(--_field-height) / 2));--_field-rounded-container-padding-inline-start:var(--forge-field-rounded-container-padding-inline-start, var(--_field-rounded-container-padding-inline));--_field-rounded-container-padding-inline-end:var(--forge-field-rounded-container-padding-inline-end, var(--_field-rounded-container-padding-inline));--_field-support-text-margin-block:var(--forge-field-support-text-margin-block, 4px);--_field-support-text-gap:var(--forge-field-support-text-gap, 8px);--_field-support-text-padding-inline:var(--forge-field-support-text-padding-inline, var(--_field-padding-inline));--_field-support-text-padding-inline-start:var(--forge-field-support-text-padding-inline-start, var(--_field-support-text-padding-inline));--_field-support-text-padding-inline-end:var(--forge-field-support-text-padding-inline-end, var(--_field-support-text-padding-inline));--_field-label-margin-inline:var(--forge-field-label-margin-inline, 8px);--_field-label-margin-block:var(--forge-field-label-margin-block, 4px);--_field-required-padding:var(--forge-field-required-padding, 0.35ch);--_field-required-content:var(--forge-field-required-content, \"*\");--_field-optional-padding:var(--forge-field-optional-padding, 0.5ch);--_field-optional-content:var(--forge-field-optional-content, \"(optional)\");--_field-multiline-resize:var(--forge-field-multiline-resize, block);--_field-multiline-min-inline-size:var(--forge-field-multiline-min-inline-size, initial);--_field-multiline-max-inline-size:var(--forge-field-multiline-max-inline-size, initial);--_field-multiline-min-block-size:var(--forge-field-multiline-min-block-size, var(--_field-height));--_field-multiline-max-block-size:var(--forge-field-multiline-max-block-size, initial);--_field-popover-icon-transition-duration:var(--forge-field-popover-icon-transition-duration, var(--forge-animation-duration-short3, 150ms));--_field-popover-icon-transition-timing:var(--forge-field-popover-icon-transition-timing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_field-popover-icon-open-rotation:var(--forge-field-popover-icon-open-rotation, 180deg);--_field-surface-animation-duration:var(--forge-field-surface-animation-duration, var(--forge-animation-duration-short4, 200ms));--_field-surface-animation-timing:var(--forge-field-surface-animation-timing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_field-floating-animation-duration:var(--forge-field-floating-animation-duration, var(--forge-animation-duration-short4, 200ms));--_field-floating-animation-timing:var(--forge-field-floating-animation-timing, var(--forge-animation-easing-decelerate, cubic-bezier(0, 0, 0, 1)));--_field-focus-indicator-width:var(--forge-field-focus-indicator-width, var(--forge-focus-indicator-width, var(--forge-border-medium, 2px)));--_field-disabled-opacity:var(--forge-field-disabled-opacity, 0.38);--_field-disabled-background:var(--forge-field-disabled-background, var(--forge-theme-surface-container-low, #ebebeb));--_field-font-size:var(--forge-field-font-size, inherit);--_field-dense-font-size:var(--forge-field-dense-font-size, 0.875rem);--_field-placeholder-color:var(--forge-field-placeholder-color, var(--forge-theme-text-medium, rgba(0, 0, 0, 0.6)))}.forge-field{--_field-disableable-cursor:var(--forge-field-disableable-cursor, unset);--_field-disableable-opacity:var(--forge-field-disableable-opacity, 1);--_field-inner-border-block-size:var(--forge-field-inner-border-block-size, 100%);--_field-inner-border-color:var(--forge-field-inner-border-color, var(--_field-outline-color));--_field-inner-border-color-hover:var(--forge-field-inner-border-color-hover, var(--_field-outline-color-hover));--_field-inner-border-display:var(--forge-field-inner-border-display, block);--_field-label-color:var(--forge-field-label-color, var(--forge-theme-text-high, rgba(0, 0, 0, 0.87)));--_field-label-grid-area:var(--forge-field-label-grid-area, \"label\");--_field-multiline-inset-label-background:var(--forge-field-multiline-inset-label-background, var(--forge-theme-surface, #ffffff));--_field-multiline-inset-label-background-hover:var(--forge-field-multiline-inset-label-background-hover, var(--_field-multiline-inset-label-background));--_field-surface-display:var(--forge-field-surface-display, block);position:relative;display:grid}}@layer theme{:host(:where([theme=default],:not([theme]))) .forge-field{--_field-focus-indicator-color:var(--forge-field-focus-indicator-color, var(--forge-theme-primary, #3f51b5));--_field-content-color:var(--forge-field-content-color, var(--forge-theme-text-high, rgba(0, 0, 0, 0.87)));--_field-inner-border-color:var(--forge-field-inner-border-color, var(--forge-theme-outline-low, #9e9e9e));--_field-inner-border-color-hover:var(--forge-field-inner-border-color-hover, var(--forge-theme-outline-high, #212121));--_field-inset-label-color:var(--forge-field-inset-label-color, var(--forge-theme-text-medium, rgba(0, 0, 0, 0.6)));--_field-multiline-inset-label-background:var(--forge-field-multiline-inset-label-background, var(--_field-filled-background));--_field-multiline-inset-label-tonal-background:var(--forge-field-multiline-inset-label-tonal-background, var(--_field-tonal-background));--_field-multiline-inset-label-tonal-background-hover:var(--forge-field-multiline-inset-label-tonal-background-hover, var(--_field-tonal-background-hover));--_field-outline-color:var(--forge-field-outline-color, var(--forge-theme-outline-low, #9e9e9e));--_field-outline-color-hover:var(--forge-field-outline-color-hover, var(--forge-theme-outline-high, #212121))}:host(:where([label-position=inset],:not([label-position])):where([theme=default],:not([theme]))) .forge-field{--_field-label-color:var(--forge-field-label-color, var(--forge-theme-text-medium, rgba(0, 0, 0, 0.6)))}:host([theme=primary]) .forge-field{--_field-filled-background:var(--forge-field-filled-background, var(--forge-theme-primary-container-minimum, #f7f8fc));--_field-focus-indicator-color:var(--forge-field-focus-indicator-color, var(--forge-theme-primary, #3f51b5));--_field-tonal-background:var(--forge-field-tonal-background, var(--forge-theme-primary-container-low, #e8eaf6));--_field-tonal-background-hover:var(--forge-field-tonal-background-hover, var(--forge-theme-primary-container-minimum, #f7f8fc));--_field-content-color:var(--forge-field-content-color, var(--forge-theme-on-primary-container, #222c62));--_field-inner-border-color:var(--forge-field-inner-border-color, var(--forge-theme-primary, #3f51b5));--_field-inner-border-color-hover:var(--forge-field-inner-border-color-hover, var(--forge-theme-on-primary-container, #222c62));--_field-inset-label-color:var(--forge-field-inset-label-color, var(--forge-theme-on-primary-container-low, #222c62));--_field-multiline-inset-label-background:var(--forge-field-multiline-inset-label-background, var(--forge-theme-primary-container-minimum, #f7f8fc));--_field-multiline-inset-label-tonal-background:var(--forge-field-multiline-inset-label-tonal-background, var(--forge-theme-primary-container-low, #e8eaf6));--_field-multiline-inset-label-tonal-background-hover:var(--forge-field-multiline-inset-label-tonal-background-hover, var(--forge-theme-primary-container-minimum, #f7f8fc));--_field-outline-color:var(--forge-field-outline-color, var(--forge-theme-primary, #3f51b5));--_field-outline-color-hover:var(--forge-field-outline-color-hover, var(--forge-theme-on-primary-container, #222c62))}:host(:where([label-position=inset],:not([label-position]))[theme=primary]) .forge-field{--_field-label-color:var(--forge-field-label-color, var(--forge-theme-on-primary-container-low, #222c62))}:host([theme=secondary]) .forge-field{--_field-filled-background:var(--forge-field-filled-background, var(--forge-theme-secondary-container-minimum, #fffdf5));--_field-focus-indicator-color:var(--forge-field-focus-indicator-color, var(--forge-theme-secondary, #ffc107));--_field-tonal-background:var(--forge-field-tonal-background, var(--forge-theme-secondary-container-low, #fff8e1));--_field-tonal-background-hover:var(--forge-field-tonal-background-hover, var(--forge-theme-secondary-container-minimum, #fffdf5));--_field-content-color:var(--forge-field-content-color, var(--forge-theme-on-secondary-container, #8a6804));--_field-inner-border-color:var(--forge-field-inner-border-color, var(--forge-theme-on-secondary-container, #8a6804));--_field-inner-border-color-hover:var(--forge-field-inner-border-color-hover, var(--forge-theme-on-secondary-container, #8a6804));--_field-inset-label-color:var(--forge-field-inset-label-color, var(--forge-theme-on-secondary-container-low, #8a6804));--_field-multiline-inset-label-background:var(--forge-field-multiline-inset-label-background, var(--forge-theme-secondary-container-minimum, #fffdf5));--_field-multiline-inset-label-tonal-background:var(--forge-field-multiline-inset-label-tonal-background, var(--forge-theme-secondary-container-low, #fff8e1));--_field-multiline-inset-label-tonal-background-hover:var(--forge-field-multiline-inset-label-tonal-background-hover, var(--forge-theme-secondary-container-minimum, #fffdf5));--_field-outline-color:var(--forge-field-outline-color, var(--forge-theme-on-secondary-container, #8a6804));--_field-outline-color-hover:var(--forge-field-outline-color-hover, var(--forge-theme-on-secondary-container, #8a6804))}:host(:where([label-position=inset],:not([label-position]))[theme=secondary]) .forge-field{--_field-label-color:var(--forge-field-label-color, var(--forge-theme-on-secondary-container-low, #8a6804))}:host([theme=tertiary]) .forge-field{--_field-filled-background:var(--forge-field-filled-background, var(--forge-theme-tertiary-container-minimum, #f7f8ff));--_field-focus-indicator-color:var(--forge-field-focus-indicator-color, var(--forge-theme-tertiary, #3d5afe));--_field-tonal-background:var(--forge-field-tonal-background, var(--forge-theme-tertiary-container-low, #e8ebff));--_field-tonal-background-hover:var(--forge-field-tonal-background-hover, var(--forge-theme-tertiary-container-minimum, #f7f8ff));--_field-content-color:var(--forge-field-content-color, var(--forge-theme-on-tertiary-container, #213189));--_field-inner-border-color:var(--forge-field-inner-border-color, var(--forge-theme-tertiary, #3d5afe));--_field-inner-border-color-hover:var(--forge-field-inner-border-color-hover, var(--forge-theme-on-tertiary-container, #213189));--_field-inset-label-color:var(--forge-field-inset-label-color, var(--forge-theme-on-tertiary-container-low, #213189));--_field-multiline-inset-label-background:var(--forge-field-multiline-inset-label-background, var(--forge-theme-tertiary-container-minimum, #f7f8ff));--_field-multiline-inset-label-tonal-background:var(--forge-field-multiline-inset-label-tonal-background, var(--forge-theme-tertiary-container-low, #e8ebff));--_field-multiline-inset-label-tonal-background-hover:var(--forge-field-multiline-inset-label-tonal-background-hover, var(--forge-theme-tertiary-container-minimum, #f7f8ff));--_field-outline-color:var(--forge-field-outline-color, var(--forge-theme-tertiary, #3d5afe));--_field-outline-color-hover:var(--forge-field-outline-color-hover, var(--forge-theme-on-tertiary-container, #213189))}:host(:where([label-position=inset],:not([label-position]))[theme=tertiary]) .forge-field{--_field-label-color:var(--forge-field-label-color, var(--forge-theme-on-tertiary-container-low, #213189))}:host([theme=success]) .forge-field{--_field-filled-background:var(--forge-field-filled-background, var(--forge-theme-success-container-minimum, #f7faf7));--_field-focus-indicator-color:var(--forge-field-focus-indicator-color, var(--forge-theme-success, #2e7d32));--_field-tonal-background:var(--forge-field-tonal-background, var(--forge-theme-success-container-low, #e6efe6));--_field-tonal-background-hover:var(--forge-field-tonal-background-hover, var(--forge-theme-success-container-minimum, #f7faf7));--_field-content-color:var(--forge-field-content-color, var(--forge-theme-on-success-container, #19441b));--_field-inner-border-color:var(--forge-field-inner-border-color, var(--forge-theme-success, #2e7d32));--_field-inner-border-color-hover:var(--forge-field-inner-border-color-hover, var(--forge-theme-on-success-container, #19441b));--_field-inset-label-color:var(--forge-field-inset-label-color, var(--forge-theme-on-success-container-low, #19441b));--_field-multiline-inset-label-background:var(--forge-field-multiline-inset-label-background, var(--forge-theme-success-container-minimum, #f7faf7));--_field-multiline-inset-label-tonal-background:var(--forge-field-multiline-inset-label-tonal-background, var(--forge-theme-success-container-low, #e6efe6));--_field-multiline-inset-label-tonal-background-hover:var(--forge-field-multiline-inset-label-tonal-background-hover, var(--forge-theme-success-container-minimum, #f7faf7));--_field-outline-color:var(--forge-field-outline-color, var(--forge-theme-success, #2e7d32));--_field-outline-color-hover:var(--forge-field-outline-color-hover, var(--forge-theme-on-success-container, #19441b))}:host(:where([label-position=inset],:not([label-position]))[theme=success]) .forge-field{--_field-label-color:var(--forge-field-label-color, var(--forge-theme-on-success-container-low, #19441b))}:host([theme=error]) .forge-field{--_field-filled-background:var(--forge-field-filled-background, var(--forge-theme-error-container-minimum, #fcf5f6));--_field-focus-indicator-color:var(--forge-field-focus-indicator-color, var(--forge-theme-error, #b00020));--_field-tonal-background:var(--forge-field-tonal-background, var(--forge-theme-error-container-low, #f6e0e4));--_field-tonal-background-hover:var(--forge-field-tonal-background-hover, var(--forge-theme-error-container-minimum, #fcf5f6));--_field-content-color:var(--forge-field-content-color, var(--forge-theme-on-error-container, #5f0011));--_field-inner-border-color:var(--forge-field-inner-border-color, var(--forge-theme-error, #b00020));--_field-inner-border-color-hover:var(--forge-field-inner-border-color-hover, var(--forge-theme-on-error-container, #5f0011));--_field-inset-label-color:var(--forge-field-inset-label-color, var(--forge-theme-on-error-container-low, #5f0011));--_field-multiline-inset-label-background:var(--forge-field-multiline-inset-label-background, var(--forge-theme-error-container-minimum, #fcf5f6));--_field-multiline-inset-label-tonal-background:var(--forge-field-multiline-inset-label-tonal-background, var(--forge-theme-error-container-low, #f6e0e4));--_field-multiline-inset-label-tonal-background-hover:var(--forge-field-multiline-inset-label-tonal-background-hover, var(--forge-theme-error-container-minimum, #fcf5f6));--_field-outline-color:var(--forge-field-outline-color, var(--forge-theme-error, #b00020));--_field-outline-color-hover:var(--forge-field-outline-color-hover, var(--forge-theme-on-error-container, #5f0011))}:host(:where([label-position=inset],:not([label-position]))[theme=error]) .forge-field{--_field-label-color:var(--forge-field-label-color, var(--forge-theme-on-error-container-low, #5f0011))}:host([theme=warning]) .forge-field{--_field-filled-background:var(--forge-field-filled-background, var(--forge-theme-warning-container-minimum, #fdf8f5));--_field-focus-indicator-color:var(--forge-field-focus-indicator-color, var(--forge-theme-warning, #d14900));--_field-tonal-background:var(--forge-field-tonal-background, var(--forge-theme-warning-container-low, #f9e9e0));--_field-tonal-background-hover:var(--forge-field-tonal-background-hover, var(--forge-theme-warning-container-minimum, #fdf8f5));--_field-content-color:var(--forge-field-content-color, var(--forge-theme-on-warning-container, #712700));--_field-inner-border-color:var(--forge-field-inner-border-color, var(--forge-theme-warning, #d14900));--_field-inner-border-color-hover:var(--forge-field-inner-border-color-hover, var(--forge-theme-on-warning-container, #712700));--_field-inset-label-color:var(--forge-field-inset-label-color, var(--forge-theme-on-warning-container-low, #712700));--_field-multiline-inset-label-background:var(--forge-field-multiline-inset-label-background, var(--forge-theme-warning-container-minimum, #fdf8f5));--_field-multiline-inset-label-tonal-background:var(--forge-field-multiline-inset-label-tonal-background, var(--forge-theme-warning-container-low, #f9e9e0));--_field-multiline-inset-label-tonal-background-hover:var(--forge-field-multiline-inset-label-tonal-background-hover, var(--forge-theme-warning-container-minimum, #fdf8f5));--_field-outline-color:var(--forge-field-outline-color, var(--forge-theme-warning, #d14900));--_field-outline-color-hover:var(--forge-field-outline-color-hover, var(--forge-theme-on-warning-container, #712700))}:host(:where([label-position=inset],:not([label-position]))[theme=warning]) .forge-field{--_field-label-color:var(--forge-field-label-color, var(--forge-theme-on-warning-container-low, #712700))}:host([theme=info]) .forge-field{--_field-filled-background:var(--forge-field-filled-background, var(--forge-theme-info-container-minimum, #f6f9fc));--_field-focus-indicator-color:var(--forge-field-focus-indicator-color, var(--forge-theme-info, #1565c0));--_field-tonal-background:var(--forge-field-tonal-background, var(--forge-theme-info-container-low, #e3edf7));--_field-tonal-background-hover:var(--forge-field-tonal-background-hover, var(--forge-theme-info-container-minimum, #f6f9fc));--_field-content-color:var(--forge-field-content-color, var(--forge-theme-on-info-container, #0b3768));--_field-inner-border-color:var(--forge-field-inner-border-color, var(--forge-theme-info, #1565c0));--_field-inner-border-color-hover:var(--forge-field-inner-border-color-hover, var(--forge-theme-on-info-container, #0b3768));--_field-inset-label-color:var(--forge-field-inset-label-color, var(--forge-theme-on-info-container-low, #0b3768));--_field-multiline-inset-label-background:var(--forge-field-multiline-inset-label-background, var(--forge-theme-info-container-minimum, #f6f9fc));--_field-multiline-inset-label-tonal-background:var(--forge-field-multiline-inset-label-tonal-background, var(--forge-theme-info-container-low, #e3edf7));--_field-multiline-inset-label-tonal-background-hover:var(--forge-field-multiline-inset-label-tonal-background-hover, var(--forge-theme-info-container-minimum, #f6f9fc));--_field-outline-color:var(--forge-field-outline-color, var(--forge-theme-info, #1565c0));--_field-outline-color-hover:var(--forge-field-outline-color-hover, var(--forge-theme-on-info-container, #0b3768))}:host(:where([label-position=inset],:not([label-position]))[theme=info]) .forge-field{--_field-label-color:var(--forge-field-label-color, var(--forge-theme-on-info-container-low, #0b3768))}}@layer variant{:host([variant=plain]) .forge-field{--_field-multiline-inset-label-background:var(--forge-field-multiline-inset-label-background, var(--forge-theme-surface, #ffffff));--_field-multiline-inset-label-background-hover:var(--forge-field-multiline-inset-label-background-hover, var(--forge-theme-surface, #ffffff));--_field-outline-color:var(--forge-field-outline-color, transparent);--_field-outline-color-hover:var(--forge-field-outline-color-hover, transparent);--_field-inner-border-display:var(--forge-field-inner-border-display, none);--_field-padding-inline:var(--forge-field-padding-inline, 0);--_field-surface-display:var(--forge-field-surface-display, none)}:host(:where([variant=outlined],:not([variant]))) .forge-field{--_field-multiline-inset-label-background:var(--forge-field-multiline-inset-label-background, var(--forge-theme-surface, #ffffff));--_field-multiline-inset-label-background-hover:var(--forge-field-multiline-inset-label-background-hover, var(--forge-theme-surface, #ffffff))}:host([variant=tonal]) .forge-field{--_field-outline-color:var(--forge-field-outline-color, transparent);--_field-outline-color-hover:var(--forge-field-outline-color-hover, transparent);--_field-inner-border-block-size:var(--forge-field-inner-border-block-size, calc(100% - 8px));--_field-background:var(--_field-tonal-background);--_field-multiline-inset-label-background:var(--forge-field-multiline-inset-label-background, var(--_field-background));--_field-hover-background:var(--forge-field-hover-background, tonal-background-hover);--_field-multiline-inset-label-background:var(--forge-field-multiline-inset-label-background, var(--_field-multiline-inset-label-tonal-background))}:host([variant=filled]) .forge-field{--_field-background:var(--_field-filled-background);--_field-multiline-inset-label-background:var(--forge-field-multiline-inset-label-background, var(--_field-background))}:host([variant=raised]) .forge-field{--_field-elevation:var(--forge-field-elevation, 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12));--_field-elevation-active:var(--forge-field-elevation-active, 0px 3px 3px -2px rgba(0, 0, 0, 0.2), 0px 3px 4px 0px rgba(0, 0, 0, 0.14), 0px 1px 8px 0px rgba(0, 0, 0, 0.12));--_field-outline-color:var(--forge-field-outline-color, transparent);--_field-outline-color-hover:var(--forge-field-outline-color-hover, transparent);--_field-inner-border-block-size:var(--forge-field-inner-border-block-size, calc(100% - 8px));--_field-background:var(--_field-filled-background);--_field-multiline-inset-label-background:var(--forge-field-multiline-inset-label-background, var(--_field-background))}}@layer shape{:host([shape=squared]) .forge-field{--_field-shape:var(--forge-field-shape, 0)}:host([shape=rounded]) .forge-field{--_field-shape:var(--forge-field-shape, calc(var(--forge-shape-full, 9999px) * var(--forge-shape-factor, 1)));--_field-padding-inline:var(--forge-field-padding-inline, var(--_field-rounded-container-padding-inline-start))}}@layer density{:host(:where([label-position=inset],:not([label-position])):not([dense]):where([density=default],:not([density]))) .forge-field{--_field-height:var(--forge-field-height, var(--_field-inset-height))}:host(:where([density=extra-small],[dense])) .forge-field{--_field-height:var(--forge-field-height, 24px);--_field-padding-inline-start:var(--forge-field-padding-inline-start, 8px);--_field-padding-inline-end:var(--forge-field-padding-inline-end, 4px)}:host(:where([label-position=inset],:not([label-position])):where([density=extra-small],[dense])) .forge-field{--_field-height:var(--forge-field-height, 24px)}:host(:where([label-position=inset],:not([label-position])):where([density=extra-small],[dense])) .label{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;outline:0;-webkit-appearance:none;-moz-appearance:none}:host(:where([label-position=inset],:not([label-position])):where([density=extra-small],[dense])) ::slotted(:where(input,textarea,[data-forge-field-input])){--_field-font-size:var(--_field-dense-font-size)}:host(:not([dense])[density=small]) .forge-field{--_field-height:var(--forge-field-height, 32px)}:host(:where([label-position=inset],:not([label-position])):not([dense])[density=small]) .forge-field{--_field-height:var(--forge-field-height, 40px)}:host(:not([dense])[density=medium]) .forge-field{--_field-height:var(--forge-field-height, 40px)}:host(:where([label-position=inset],:not([label-position])):not([dense])[density=medium]) .forge-field{--_field-height:var(--forge-field-height, 48px)}:host(:not([dense])[density=large]) .forge-field{--_field-height:var(--forge-field-height, 48px)}:host(:where([label-position=inset],:not([label-position])):not([dense])[density=large]) .forge-field{--_field-height:var(--forge-field-height, 56px)}:host(:not([dense])[density=extra-large]) .forge-field{--_field-height:var(--forge-field-height, 56px)}:host(:where([label-position=inset],:not([label-position])):not([dense])[density=extra-large]) .forge-field{--_field-height:var(--forge-field-height, 64px)}}:host(:not([disabled]):hover) .forge-field{--_field-outline-color:var(--forge-field-outline-color, var(--_field-outline-color-hover));--_field-elevation:var(--forge-field-elevation, var(--_field-elevation-active));--_field-tonal-background:var(--_field-tonal-background-hover);--_field-multiline-inset-label-tonal-background:var(--forge-field-multiline-inset-label-tonal-background, var(--_field-multiline-inset-label-tonal-background-hover));--_field-inner-border-color:var(--forge-field-inner-border-color, var(--_field-inner-border-color-hover))}:host([disabled]) .forge-field{--_field-background:var(--_field-disabled-background);--_field-disableable-cursor:var(--forge-field-disableable-cursor, not-allowed);--_field-disableable-opacity:var(--forge-field-disableable-opacity, var(--_field-disabled-opacity))}:host(:not([disabled])[invalid]) .forge-field{--_field-filled-background:var(--forge-field-filled-background, var(--forge-theme-error-container-minimum, #fcf5f6));--_field-focus-indicator-color:var(--forge-field-focus-indicator-color, var(--forge-theme-error, #b00020));--_field-tonal-background:var(--forge-field-tonal-background, var(--forge-theme-error-container-low, #f6e0e4));--_field-tonal-background-hover:var(--forge-field-tonal-background-hover, var(--forge-theme-error-container-minimum, #fcf5f6));--_field-content-color:var(--forge-field-content-color, var(--forge-theme-on-error-container, #5f0011));--_field-inner-border-color:var(--forge-field-inner-border-color, var(--forge-theme-error, #b00020));--_field-inner-border-color-hover:var(--forge-field-inner-border-color-hover, var(--forge-theme-on-error-container, #5f0011));--_field-inset-label-color:var(--forge-field-inset-label-color, var(--forge-theme-on-error-container-low, #5f0011));--_field-multiline-inset-label-background:var(--forge-field-multiline-inset-label-background, var(--forge-theme-error-container-minimum, #fcf5f6));--_field-multiline-inset-label-tonal-background:var(--forge-field-multiline-inset-label-tonal-background, var(--forge-theme-error-container-low, #f6e0e4));--_field-multiline-inset-label-tonal-background-hover:var(--forge-field-multiline-inset-label-tonal-background-hover, var(--forge-theme-error-container-minimum, #fcf5f6));--_field-outline-color:var(--forge-field-outline-color, var(--forge-theme-error, #b00020));--_field-outline-color-hover:var(--forge-field-outline-color-hover, var(--forge-theme-on-error-container, #5f0011));--_field-label-color:var(--forge-field-label-color, var(--forge-theme-error, #b00020))}:host(:not([disabled])) .forge-field:has(.input:focus-within){--_field-elevation:var(--forge-field-elevation, var(--_field-elevation-active))}.forge-field .outline{opacity:var(--_field-disableable-opacity);cursor:var(--_field-disableable-cursor);transition-duration:var(--_field-surface-animation-duration);transition-property:outline-color;transition-timing-function:var(--_field-surface-animation-timing);position:relative;grid-area:main;inline-size:100%;block-size:100%;box-shadow:var(--_field-elevation);border-radius:var(--_field-shape);outline-style:var(--_field-outline-style);outline-width:var(--_field-outline-width);outline-color:var(--_field-outline-color);outline-offset:calc(var(--_field-outline-width) * -1);pointer-events:none}.forge-field .container{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-body2-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-body2-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-font-size-scale, 1)));font-weight:var(--forge-typography-body2-font-weight,400);line-height:var(--forge-typography-body2-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-line-height-scale, 1.375)));letter-spacing:var(--forge-typography-body2-letter-spacing, .015625em);text-transform:var(--forge-typography-body2-text-transform,inherit);text-decoration:var(--forge-typography-body2-text-decoration,inherit);position:relative;display:grid;isolation:isolate;grid-area:main;grid-template-areas:\"start center end popover-icon accessory\";grid-template-columns:auto 1fr auto auto auto;align-items:center;border-radius:var(--_field-shape);inline-size:100%;block-size:var(--_field-height);overflow:hidden}.forge-field .surface{opacity:var(--_field-disableable-opacity);cursor:var(--_field-disableable-cursor);transition-duration:var(--_field-surface-animation-duration);transition-property:background;transition-timing-function:var(--_field-surface-animation-timing);display:var(--_field-surface-display);grid-column:1/-1;grid-row:1/-1;border-radius:var(--_field-shape);inline-size:100%;block-size:100%;background:var(--_field-background);pointer-events:none}.forge-field .input{opacity:var(--_field-disableable-opacity);cursor:var(--_field-disableable-cursor);display:flex;grid-area:center;block-size:100%;inline-size:100%;color:var(--forge-theme-text-high,rgba(0,0,0,.87))}.forge-field .label{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-label2-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-label2-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-font-size-scale, .8125)));font-weight:var(--forge-typography-label2-font-weight,400);line-height:var(--forge-typography-label2-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-line-height-scale, 1.25)));letter-spacing:var(--forge-typography-label2-letter-spacing, .0096153846em);text-transform:var(--forge-typography-label2-text-transform,inherit);text-decoration:var(--forge-typography-label2-text-decoration,inherit);position:relative;display:inline-flex;grid-area:var(--_field-label-grid-area);pointer-events:var(--_field-label-pointer-events);margin-block-end:var(--_field-label-margin-block-end);margin-inline-start:var(--_field-label-margin-inline-start);margin-inline-end:var(--_field-label-margin-inline-end);block-size:fit-content;overflow:hidden;color:var(--_field-label-color);line-height:normal;white-space:var(--_field-label-white-space)}.forge-field .popover-target{position:absolute;inset:calc(var(--_field-focus-indicator-width) * -1);pointer-events:none}.forge-field .popover-icon{display:none}.forge-field .popover-icon__arrow{fill:inherit}.forge-field .accessory,.forge-field .end,.forge-field .start,.forge-field .support-text,.forge-field .support-text-end,.forge-field .support-text-start{display:none}:host([required]) .label::before{margin-inline-end:var(--_field-required-padding);color:var(--forge-theme-error,#b00020);content:var(--_field-required-content)}:host([optional]) .label::after{margin-inline-start:var(--_field-optional-padding);color:inherit;content:var(--_field-optional-content)}:host([popover-icon]) .popover-icon{opacity:var(--_field-disableable-opacity);cursor:var(--_field-disableable-cursor);padding-inline-end:var(--_field-inner-padding-inline);display:flex;align-items:center;grid-area:popover-icon;isolation:isolate;block-size:100%}:host([popover-icon]) .popover-icon>*{transition:rotate var(--_field-popover-icon-transition-duration) var(--_field-popover-icon-transition-timing);fill:var(--_field-content-color)}:host([popover-icon][popover-expanded]) .popover-icon>*{rotate:var(--_field-popover-icon-open-rotation)}.forge-field.has-start .start{opacity:var(--_field-disableable-opacity);cursor:var(--_field-disableable-cursor);padding-inline-start:var(--_field-padding-inline-start);display:flex;grid-area:start;align-items:center;block-size:100%;max-block-size:100%;min-block-size:0;color:var(--_field-content-color)}.forge-field.has-end .end{opacity:var(--_field-disableable-opacity);cursor:var(--_field-disableable-cursor);padding-inline-end:var(--_field-padding-inline-end);display:flex;grid-area:end;align-items:center;block-size:100%;max-block-size:100%;min-block-size:0;color:var(--_field-content-color)}.forge-field.has-accessory .accessory{padding-inline-end:var(--_field-inner-padding-inline);position:relative;display:flex;grid-area:accessory;align-items:center;block-size:100%;max-block-size:100%;min-block-size:0;color:var(--_field-content-color)}.forge-field.has-accessory .accessory::before{opacity:var(--_field-disableable-opacity);cursor:var(--_field-disableable-cursor);transition-duration:var(--_field-surface-animation-duration);transition-property:border-color;transition-timing-function:var(--_field-surface-animation-timing);padding-inline-end:var(--_field-inner-padding-inline);display:var(--_field-inner-border-display);border-inline-start-style:solid;border-inline-start-width:var(--_field-outline-width);border-inline-start-color:var(--_field-inner-border-color);block-size:var(--_field-inner-border-block-size);content:\"\"}.forge-field.has-accessory .forge-field:not(.has-accessory) .popover-icon{padding-inline-end:var(--_field-padding-inline-end)}.forge-field.has-support-text-end .support-text,.forge-field.has-support-text-start .support-text{-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);justify-content:space-between;display:grid;grid-template-areas:\"start end\";grid-template-columns:1fr auto;grid-area:support-text;margin-block-start:var(--_field-support-text-margin-block);line-height:normal}.forge-field.has-support-text-start.has-support-text-end .support-text{gap:var(--_field-support-text-gap)}.forge-field.has-support-text-start .support-text-start{display:inline-block;grid-area:start}.forge-field.has-support-text-end .support-text-end{display:inline-block;grid-area:end}:host(:not([popover-icon])) .forge-field:not(.has-accessory) .end{padding-inline-end:var(--_field-padding-inline-end)}:host([label-position=block-start]) .forge-field{grid-template-areas:\"label\" \"main\" \"support-text\";grid-template-columns:1fr;grid-template-rows:auto auto auto}:host([label-position=block-start]) .label{--_field-label-margin-block-end:var(--forge-field-label-margin-block-end, var(--_field-label-margin-block))}:host([label-position=inline-start]) .forge-field{grid-template-areas:\"label main\" \". support-text\";grid-template-columns:auto 1fr;grid-template-rows:auto auto}:host([label-position=inline-start]) .label{--_field-label-margin-inline-end:var(--forge-field-label-margin-inline-end, var(--_field-label-margin-inline))}:host([label-position=inline-end]) .forge-field{grid-template-areas:\"main label\" \"support-text .\";grid-template-columns:1fr auto;grid-template-rows:auto auto}:host([label-position=inline-end]) .label{--_field-label-margin-inline-start:var(--forge-field-label-margin-inline-start, var(--_field-label-margin-inline))}:host(:where([label-position=inset],:not([label-position]))) .forge-field{grid-template-areas:\"main\" \"support-text\";grid-template-columns:1fr;grid-template-rows:auto auto;--_field-label-grid-area:var(--forge-field-label-grid-area, center);--_field-label-pointer-events:var(--forge-field-label-pointer-events, none);--_field-label-white-space:var(--forge-field-label-white-space, nowrap)}:host(:where([label-position=inset],:not([label-position]))) .label{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-body2-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-body2-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-font-size-scale, 1)));font-weight:var(--forge-typography-body2-font-weight,400);line-height:var(--forge-typography-body2-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-line-height-scale, 1.375)));letter-spacing:var(--forge-typography-body2-letter-spacing, .015625em);text-transform:var(--forge-typography-body2-text-transform,inherit);text-decoration:var(--forge-typography-body2-text-decoration,inherit);padding-inline-start:var(--_field-padding-inline-start);padding-inline-end:var(--_field-padding-inline-end);z-index:999;--_field-floating-label-translation:var(--forge-field-floating-label-translation, 0 calc(calc(calc(max(var(--forge-typography-body2-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-line-height-scale, 1.375))), var(--forge-typography-label2-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-line-height-scale, 1.25)))) / 2) + calc((var(--_field-height) - 56px) / 8)) * -1))}:host([label-position=none]) .forge-field{grid-template-areas:\"main\" \"support-text\";grid-template-columns:1fr;grid-template-rows:auto auto}:host([label-position=none]) .label{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;outline:0;-webkit-appearance:none;-moz-appearance:none}:host([label-position=inline-end][label-alignment=start]) .label,:host([label-position=inline-start][label-alignment=start]) .label{align-self:start}:host([label-position=inline-end]:where([label-alignment=center],[label-alignment=default],:not([label-alignment]))) .label,:host([label-position=inline-start]:where([label-alignment=center],[label-alignment=default],:not([label-alignment]))) .label{align-self:center}:host([label-position=inline-end][label-alignment=end]) .label,:host([label-position=inline-start][label-alignment=end]) .label{align-self:end}:host([label-position=inline-end][label-alignment=baseline]) .label,:host([label-position=inline-start][label-alignment=baseline]) .label{align-self:center;padding-block-start:calc(var(--forge-typography-body2-line-height,calc(var(--forge-typography-font-size,1rem) * var(--forge-typography-body-line-height-scale,1.375))) - var(--forge-typography-label2-line-height,calc(var(--forge-typography-font-size,1rem) * var(--forge-typography-label-line-height-scale,1.25))))}:host([label-position=block-start]:where([label-alignment=start],[label-alignment=default],:not([label-alignment]))) .label{justify-self:start}:host([label-position=block-start][label-alignment=center]) .label{justify-self:center}:host([label-position=block-start][label-alignment=end]) .label{justify-self:end}:host([label-position=block-start][label-alignment=baseline]:not([variant=plain])) .label{justify-self:start;padding-inline-start:var(--_field-padding-inline-start)}:host([label-position=block-start][label-alignment=baseline][variant=plain]) .label{justify-self:start;padding-inline-start:0px}:host(:where([label-position=inset],:not([label-position]))[float-label]:not(:where([density=extra-small],[dense]))) .has-label .label{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-label2-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-label2-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-font-size-scale, .8125)));font-weight:var(--forge-typography-label2-font-weight,400);line-height:var(--forge-typography-label2-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-line-height-scale, 1.25)));letter-spacing:var(--forge-typography-label2-letter-spacing, .0096153846em);text-transform:var(--forge-typography-label2-text-transform,inherit);text-decoration:var(--forge-typography-label2-text-decoration,inherit);translate:var(--_field-floating-label-translation)}:host(:where([label-position=inset],:not([label-position]))[float-label]:not(:where([density=extra-small],[dense]))) .has-label .input{box-sizing:border-box}:host(:where([label-position=inset],:not([label-position]))[float-label]:not(:where([density=extra-small],[dense]))) .has-label.floating-in .label{animation-name:float-in-label-animation;animation-duration:var(--_field-floating-animation-duration);animation-timing-function:var(--_field-floating-animation-timing)}:host(:where([label-position=inset],:not([label-position]))[float-label]:not(:where([density=extra-small],[dense]))) .has-label.floating-in .input{animation-name:float-in-input-animation;animation-duration:var(--_field-floating-animation-duration);animation-timing-function:var(--_field-floating-animation-timing)}:host(:where([label-position=inset],:not([label-position]))[float-label]:not(:where([density=extra-small],[dense]))) .has-label.floating-in .input ::slotted(:is(input,[data-forge-field-input],[data-forge-multi-input-separator])){position:absolute;inset-block-start:calc(var(--_field-height) * -0.5);block-size:100%;padding-block:var(--_field-height)}:host(:where([label-position=inset],:not([label-position]))[float-label]:not(:where([density=extra-small],[dense]))) .has-label:not(.floating-in) .input ::slotted(:is(input,[data-forge-field-input],[data-forge-multi-input-separator])){padding-block-start:calc(calc(calc(max(var(--forge-typography-body2-line-height,calc(var(--forge-typography-font-size,1rem) * var(--forge-typography-body-line-height-scale,1.375))),var(--forge-typography-label2-line-height,calc(var(--forge-typography-font-size,1rem) * var(--forge-typography-label-line-height-scale,1.25))))/ 2) + calc((var(--_field-height) - 56px)/ 8)) * 2)!important}:host(:where([label-position=inset],:not([label-position])):not([float-label])) .has-label.floating-out .label{animation-name:float-out-label-animation;animation-duration:var(--_field-floating-animation-duration);animation-timing-function:var(--_field-floating-animation-timing)}:host(:where([label-position=inset],:not([label-position])):not([float-label])) .has-label.floating-out .input{animation-name:float-out-input-animation;animation-duration:var(--_field-floating-animation-duration);animation-timing-function:var(--_field-floating-animation-timing)}:host(:where([label-position=inset],:not([label-position]))[float-label][multiline]) .has-label:not(.floating-in) ::slotted(textarea){padding-block-start:calc(calc(calc(max(var(--forge-typography-body2-line-height,calc(var(--forge-typography-font-size,1rem) * var(--forge-typography-body-line-height-scale,1.375))),var(--forge-typography-label2-line-height,calc(var(--forge-typography-font-size,1rem) * var(--forge-typography-label-line-height-scale,1.25))))/ 2) + calc((var(--_field-height) - 56px)/ 8)) + (var(--_field-height) - var(--forge-typography-body2-line-height,calc(var(--forge-typography-font-size,1rem) * var(--forge-typography-body-line-height-scale,1.375))))/ 2)!important;padding-block-end:8px!important}:host([support-text-inset=both]) .support-text{padding-inline-start:var(--_field-padding-inline-start);padding-inline-end:var(--_field-padding-inline-end)}:host([support-text-inset=start]) .support-text{padding-inline-start:var(--_field-padding-inline-start)}:host([support-text-inset=end]) .support-text{padding-inline-end:var(--_field-padding-inline-end)}:host([multiline]) .container{align-items:start;block-size:fit-content;min-inline-size:var(--_field-multiline-min-inline-size);max-inline-size:var(--_field-multiline-max-inline-size);min-block-size:var(--_field-multiline-min-block-size);max-block-size:var(--_field-multiline-max-block-size);resize:var(--_field-multiline-resize)}:host([multiline]) .container .end,:host([multiline]) .container .label,:host([multiline]) .container .popover-icon,:host([multiline]) .container .start{align-items:center;block-size:var(--_field-height)}:host([multiline]:where([label-position=inset],:not([label-position]))[float-label]:not(:where([density=extra-small],[dense]))) .label{pointer-events:none;inline-size:fit-content}:host([multiline]:where([label-position=inset],:not([label-position]))[float-label]:not(:where([density=extra-small],[dense]))) .label slot{display:block}:host([multiline]:where([label-position=inset],:not([label-position]))[float-label]:not(:where([density=extra-small],[dense]))) .label::after{animation-name:multiline-inset-label-background-animation;animation-duration:var(--_field-floating-animation-duration);animation-timing-function:var(--_field-floating-animation-timing);position:absolute;z-index:-1;inset-inline-start:var(--_field-outline-width);transition-duration:var(--_field-surface-animation-duration);transition-property:background;transition-timing-function:var(--_field-surface-animation-timing);background:var(--_field-multiline-inset-label-background);inline-size:100%;block-size:3ex;filter:blur(2px);content:\"\"}.forge-field .input ::slotted(*){box-sizing:border-box;margin:0;outline:0;border:none;background-color:transparent;padding-block:0;padding-inline:0;inline-size:100%;block-size:100%;color:inherit;font:inherit;font-size:var(--_field-font-size);text-overflow:ellipsis;cursor:var(--_field-disableable-cursor)}.forge-field .input ::slotted(*)::placeholder{color:var(--_field-placeholder-color)}.forge-field .input ::slotted(textarea){resize:none}.forge-field .input ::slotted(:is([data-forge-field-input],:first-of-type:is(input,textarea))){padding-inline-start:var(--_field-padding-inline-start)}.forge-field .input ::slotted(:is([data-forge-field-input],:last-of-type:is(input,textarea))){padding-inline-end:var(--_field-padding-inline-end)}.forge-field .input ::slotted([data-forge-multi-input-separator]){align-self:center;padding-inline:4px;block-size:fit-content;inline-size:fit-content}.forge-field .label ::slotted(forge-label){font:inherit}.forge-field.has-start .input ::slotted(:is([data-forge-field-input],:first-of-type:is(input,textarea))){padding-inline-start:var(--_field-inner-padding-inline)}.forge-field.has-end .input ::slotted(:is([data-forge-field-input],:last-of-type:is(input,textarea))){padding-inline-end:var(--_field-inner-padding-inline)}.forge-field.has-accessory .end{padding-inline-end:var(--_field-inner-padding-inline)}:host([variant=plain]) .forge-field.has-accessory .end{padding-inline-end:var(--_field-inner-padding-inline)}:host(:where([label-position=inset],:not([label-position]))) .forge-field.has-start .label{padding-inline-start:var(--_field-inner-padding-inline)}:host(:where([label-position=inset],:not([label-position]))) .label ::slotted(*){max-inline-size:100%;overflow:hidden;text-overflow:ellipsis}:host([popover-icon]) .forge-field .input ::slotted(:is([data-forge-field-input],:last-of-type:is(input,textarea))){padding-inline-end:var(--_field-inner-padding-inline)}:host([popover-icon]) .forge-field .end{padding-inline-end:var(--_field-inner-padding-inline)}:host(:not(popover-icon)) .forge-field.has-accessory:not(:is(.has-end)) .input ::slotted(:is([data-forge-field-input],:last-of-type:is(input,textarea))){padding-inline-end:var(--_field-inner-padding-inline)}:host([multiline]) .input ::slotted(:is(input,textarea)){padding-block-start:calc((var(--_field-height) - var(--forge-typography-body2-line-height,calc(var(--forge-typography-font-size,1rem) * var(--forge-typography-body-line-height-scale,1.375))))/ 2);padding-block-end:calc(calc(calc(max(var(--forge-typography-body2-line-height,calc(var(--forge-typography-font-size,1rem) * var(--forge-typography-body-line-height-scale,1.375))),var(--forge-typography-label2-line-height,calc(var(--forge-typography-font-size,1rem) * var(--forge-typography-label-line-height-scale,1.25))))/ 2) + calc((var(--_field-height) - 56px)/ 8)) + 8px)}:host([multiline]) .accessory slot{align-items:center;block-size:var(--_field-height);display:flex;align-self:start}forge-focus-indicator{--forge-focus-indicator-color:var(--_field-focus-indicator-color);--forge-focus-indicator-outward-offset:calc(var(--_field-outline-width) * -1);--forge-focus-indicator-shape:var(--_field-shape);--forge-focus-indicator-width:var(--_field-focus-indicator-width)}:host([variant=plain]) forge-focus-indicator{--forge-focus-indicator-offset-inline:-4px}@media (prefers-reduced-motion:reduce){.forge-field{--_field-floating-animation-duration:var(--forge-field-floating-animation-duration, 0s)}}';
+const styles = '@keyframes float-in-label-animation{from{translate:0;opacity:40%}to{translate:var(--_field-floating-label-translation);opacity:100%}}@keyframes float-out-label-animation{from{translate:var(--_field-floating-label-translation);opacity:40%}to{translate:0;opacity:100%}}@keyframes float-in-input-animation{from{translate:0}to{translate:0 calc(calc(max(var(--forge-typography-body2-line-height,calc(var(--forge-typography-font-size,1rem) * var(--forge-typography-body-line-height-scale,1.375))),var(--forge-typography-label2-line-height,calc(var(--forge-typography-font-size,1rem) * var(--forge-typography-label-line-height-scale,1.25))))/ 2) + calc((var(--_field-height) - 56px)/ 8))}}@keyframes float-out-input-animation{from{translate:0 calc(calc(max(var(--forge-typography-body2-line-height,calc(var(--forge-typography-font-size,1rem) * var(--forge-typography-body-line-height-scale,1.375))),var(--forge-typography-label2-line-height,calc(var(--forge-typography-font-size,1rem) * var(--forge-typography-label-line-height-scale,1.25))))/ 2) + calc((var(--_field-height) - 56px)/ 8))}to{translate:0}}@keyframes multiline-inset-label-background-animation{from{opacity:0%}to{opacity:100%}}@layer base,theme,variant,shape,density; @layer base{:host{display:block}:host([hidden]){display:none}.forge-field{--_field-background:var(--forge-field-background, transparent);--_field-tonal-background:var(--forge-field-tonal-background, var(--forge-theme-surface-container-low, #ebebeb));--_field-tonal-background-hover:var(--forge-field-tonal-background-hover, var(--forge-theme-surface-container-minimum, #f5f5f5));--_field-filled-background:var(--forge-field-filled-background, var(--forge-theme-surface-bright, #ffffff));--_field-outline-style:var(--forge-field-outline-style, solid);--_field-outline-width:var(--forge-field-outline-width, var(--forge-border-thin, 1px));--_field-shape:var(--forge-field-shape, calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1)));--_field-height:var(--forge-field-height, 40px);--_field-inset-height:var(--forge-field-inset-height, 48px);--_field-padding-inline:var(--forge-field-padding-inline, 12px);--_field-padding-inline-start:var(--forge-field-padding-inline-start, var(--_field-padding-inline));--_field-padding-inline-end:var(--forge-field-padding-inline-end, var(--_field-padding-inline));--_field-inner-padding-inline:var(--forge-field-inner-padding-inline, 8px);--_field-rounded-container-padding-inline:var(--forge-field-rounded-container-padding-inline, calc(var(--_field-height) / 2));--_field-rounded-container-padding-inline-start:var(--forge-field-rounded-container-padding-inline-start, var(--_field-rounded-container-padding-inline));--_field-rounded-container-padding-inline-end:var(--forge-field-rounded-container-padding-inline-end, var(--_field-rounded-container-padding-inline));--_field-support-text-margin-block:var(--forge-field-support-text-margin-block, 4px);--_field-support-text-gap:var(--forge-field-support-text-gap, 8px);--_field-support-text-padding-inline:var(--forge-field-support-text-padding-inline, var(--_field-padding-inline));--_field-support-text-padding-inline-start:var(--forge-field-support-text-padding-inline-start, var(--_field-support-text-padding-inline));--_field-support-text-padding-inline-end:var(--forge-field-support-text-padding-inline-end, var(--_field-support-text-padding-inline));--_field-label-margin-inline:var(--forge-field-label-margin-inline, 8px);--_field-label-margin-block:var(--forge-field-label-margin-block, 4px);--_field-required-padding:var(--forge-field-required-padding, 0.35ch);--_field-required-content:var(--forge-field-required-content, \"*\");--_field-optional-padding:var(--forge-field-optional-padding, 0.5ch);--_field-optional-content:var(--forge-field-optional-content, \"(optional)\");--_field-multiline-resize:var(--forge-field-multiline-resize, block);--_field-multiline-min-inline-size:var(--forge-field-multiline-min-inline-size, initial);--_field-multiline-max-inline-size:var(--forge-field-multiline-max-inline-size, initial);--_field-multiline-min-block-size:var(--forge-field-multiline-min-block-size, var(--_field-height));--_field-multiline-max-block-size:var(--forge-field-multiline-max-block-size, initial);--_field-popover-icon-transition-duration:var(--forge-field-popover-icon-transition-duration, var(--forge-animation-duration-short3, 150ms));--_field-popover-icon-transition-timing:var(--forge-field-popover-icon-transition-timing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_field-popover-icon-open-rotation:var(--forge-field-popover-icon-open-rotation, 180deg);--_field-surface-animation-duration:var(--forge-field-surface-animation-duration, var(--forge-animation-duration-short4, 200ms));--_field-surface-animation-timing:var(--forge-field-surface-animation-timing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_field-floating-animation-duration:var(--forge-field-floating-animation-duration, var(--forge-animation-duration-short4, 200ms));--_field-floating-animation-timing:var(--forge-field-floating-animation-timing, var(--forge-animation-easing-decelerate, cubic-bezier(0, 0, 0, 1)));--_field-focus-indicator-width:var(--forge-field-focus-indicator-width, var(--forge-focus-indicator-width, var(--forge-border-medium, 2px)));--_field-disabled-opacity:var(--forge-field-disabled-opacity, 0.38);--_field-disabled-background:var(--forge-field-disabled-background, var(--forge-theme-surface-container-low, #ebebeb));--_field-font-size:var(--forge-field-font-size, inherit);--_field-dense-font-size:var(--forge-field-dense-font-size, 0.875rem);--_field-placeholder-color:var(--forge-field-placeholder-color, var(--forge-theme-text-medium, rgba(0, 0, 0, 0.6)))}.forge-field{--_field-disableable-cursor:var(--forge-field-disableable-cursor, unset);--_field-disableable-opacity:var(--forge-field-disableable-opacity, 1);--_field-inner-border-block-size:var(--forge-field-inner-border-block-size, 100%);--_field-inner-border-color:var(--forge-field-inner-border-color, var(--_field-outline-color));--_field-inner-border-color-hover:var(--forge-field-inner-border-color-hover, var(--_field-outline-color-hover));--_field-inner-border-display:var(--forge-field-inner-border-display, block);--_field-label-color:var(--forge-field-label-color, var(--forge-theme-text-high, rgba(0, 0, 0, 0.87)));--_field-label-grid-area:var(--forge-field-label-grid-area, \"label\");--_field-multiline-inset-label-background:var(--forge-field-multiline-inset-label-background, var(--forge-theme-surface, #ffffff));--_field-multiline-inset-label-background-hover:var(--forge-field-multiline-inset-label-background-hover, var(--_field-multiline-inset-label-background));--_field-surface-display:var(--forge-field-surface-display, block);position:relative;display:grid}}@layer theme{:host(:where([theme=default],:not([theme]))) .forge-field{--_field-focus-indicator-color:var(--forge-field-focus-indicator-color, var(--forge-theme-primary, #3f51b5));--_field-content-color:var(--forge-field-content-color, var(--forge-theme-text-high, rgba(0, 0, 0, 0.87)));--_field-inner-border-color:var(--forge-field-inner-border-color, var(--forge-theme-outline-low, #9e9e9e));--_field-inner-border-color-hover:var(--forge-field-inner-border-color-hover, var(--forge-theme-outline-high, #212121));--_field-inset-label-color:var(--forge-field-inset-label-color, var(--forge-theme-text-medium, rgba(0, 0, 0, 0.6)));--_field-multiline-inset-label-background:var(--forge-field-multiline-inset-label-background, var(--_field-filled-background));--_field-multiline-inset-label-tonal-background:var(--forge-field-multiline-inset-label-tonal-background, var(--_field-tonal-background));--_field-multiline-inset-label-tonal-background-hover:var(--forge-field-multiline-inset-label-tonal-background-hover, var(--_field-tonal-background-hover));--_field-outline-color:var(--forge-field-outline-color, var(--forge-theme-outline-low, #9e9e9e));--_field-outline-color-hover:var(--forge-field-outline-color-hover, var(--forge-theme-outline-high, #212121))}:host(:where([label-position=inset],:not([label-position])):where([theme=default],:not([theme]))) .forge-field{--_field-label-color:var(--forge-field-label-color, var(--forge-theme-text-medium, rgba(0, 0, 0, 0.6)))}:host([theme=primary]) .forge-field{--_field-filled-background:var(--forge-field-filled-background, var(--forge-theme-primary-container-minimum, #f7f8fc));--_field-focus-indicator-color:var(--forge-field-focus-indicator-color, var(--forge-theme-primary, #3f51b5));--_field-tonal-background:var(--forge-field-tonal-background, var(--forge-theme-primary-container-low, #e8eaf6));--_field-tonal-background-hover:var(--forge-field-tonal-background-hover, var(--forge-theme-primary-container-minimum, #f7f8fc));--_field-content-color:var(--forge-field-content-color, var(--forge-theme-on-primary-container, #222c62));--_field-inner-border-color:var(--forge-field-inner-border-color, var(--forge-theme-primary, #3f51b5));--_field-inner-border-color-hover:var(--forge-field-inner-border-color-hover, var(--forge-theme-on-primary-container, #222c62));--_field-inset-label-color:var(--forge-field-inset-label-color, var(--forge-theme-on-primary-container-low, #222c62));--_field-multiline-inset-label-background:var(--forge-field-multiline-inset-label-background, var(--forge-theme-primary-container-minimum, #f7f8fc));--_field-multiline-inset-label-tonal-background:var(--forge-field-multiline-inset-label-tonal-background, var(--forge-theme-primary-container-low, #e8eaf6));--_field-multiline-inset-label-tonal-background-hover:var(--forge-field-multiline-inset-label-tonal-background-hover, var(--forge-theme-primary-container-minimum, #f7f8fc));--_field-outline-color:var(--forge-field-outline-color, var(--forge-theme-primary, #3f51b5));--_field-outline-color-hover:var(--forge-field-outline-color-hover, var(--forge-theme-on-primary-container, #222c62))}:host(:where([label-position=inset],:not([label-position]))[theme=primary]) .forge-field{--_field-label-color:var(--forge-field-label-color, var(--forge-theme-on-primary-container-low, #222c62))}:host([theme=secondary]) .forge-field{--_field-filled-background:var(--forge-field-filled-background, var(--forge-theme-secondary-container-minimum, #fffdf5));--_field-focus-indicator-color:var(--forge-field-focus-indicator-color, var(--forge-theme-secondary, #ffc107));--_field-tonal-background:var(--forge-field-tonal-background, var(--forge-theme-secondary-container-low, #fff8e1));--_field-tonal-background-hover:var(--forge-field-tonal-background-hover, var(--forge-theme-secondary-container-minimum, #fffdf5));--_field-content-color:var(--forge-field-content-color, var(--forge-theme-on-secondary-container, #8a6804));--_field-inner-border-color:var(--forge-field-inner-border-color, var(--forge-theme-on-secondary-container, #8a6804));--_field-inner-border-color-hover:var(--forge-field-inner-border-color-hover, var(--forge-theme-on-secondary-container, #8a6804));--_field-inset-label-color:var(--forge-field-inset-label-color, var(--forge-theme-on-secondary-container-low, #8a6804));--_field-multiline-inset-label-background:var(--forge-field-multiline-inset-label-background, var(--forge-theme-secondary-container-minimum, #fffdf5));--_field-multiline-inset-label-tonal-background:var(--forge-field-multiline-inset-label-tonal-background, var(--forge-theme-secondary-container-low, #fff8e1));--_field-multiline-inset-label-tonal-background-hover:var(--forge-field-multiline-inset-label-tonal-background-hover, var(--forge-theme-secondary-container-minimum, #fffdf5));--_field-outline-color:var(--forge-field-outline-color, var(--forge-theme-on-secondary-container, #8a6804));--_field-outline-color-hover:var(--forge-field-outline-color-hover, var(--forge-theme-on-secondary-container, #8a6804))}:host(:where([label-position=inset],:not([label-position]))[theme=secondary]) .forge-field{--_field-label-color:var(--forge-field-label-color, var(--forge-theme-on-secondary-container-low, #8a6804))}:host([theme=tertiary]) .forge-field{--_field-filled-background:var(--forge-field-filled-background, var(--forge-theme-tertiary-container-minimum, #f7f8ff));--_field-focus-indicator-color:var(--forge-field-focus-indicator-color, var(--forge-theme-tertiary, #3d5afe));--_field-tonal-background:var(--forge-field-tonal-background, var(--forge-theme-tertiary-container-low, #e8ebff));--_field-tonal-background-hover:var(--forge-field-tonal-background-hover, var(--forge-theme-tertiary-container-minimum, #f7f8ff));--_field-content-color:var(--forge-field-content-color, var(--forge-theme-on-tertiary-container, #213189));--_field-inner-border-color:var(--forge-field-inner-border-color, var(--forge-theme-tertiary, #3d5afe));--_field-inner-border-color-hover:var(--forge-field-inner-border-color-hover, var(--forge-theme-on-tertiary-container, #213189));--_field-inset-label-color:var(--forge-field-inset-label-color, var(--forge-theme-on-tertiary-container-low, #213189));--_field-multiline-inset-label-background:var(--forge-field-multiline-inset-label-background, var(--forge-theme-tertiary-container-minimum, #f7f8ff));--_field-multiline-inset-label-tonal-background:var(--forge-field-multiline-inset-label-tonal-background, var(--forge-theme-tertiary-container-low, #e8ebff));--_field-multiline-inset-label-tonal-background-hover:var(--forge-field-multiline-inset-label-tonal-background-hover, var(--forge-theme-tertiary-container-minimum, #f7f8ff));--_field-outline-color:var(--forge-field-outline-color, var(--forge-theme-tertiary, #3d5afe));--_field-outline-color-hover:var(--forge-field-outline-color-hover, var(--forge-theme-on-tertiary-container, #213189))}:host(:where([label-position=inset],:not([label-position]))[theme=tertiary]) .forge-field{--_field-label-color:var(--forge-field-label-color, var(--forge-theme-on-tertiary-container-low, #213189))}:host([theme=success]) .forge-field{--_field-filled-background:var(--forge-field-filled-background, var(--forge-theme-success-container-minimum, #f7faf7));--_field-focus-indicator-color:var(--forge-field-focus-indicator-color, var(--forge-theme-success, #2e7d32));--_field-tonal-background:var(--forge-field-tonal-background, var(--forge-theme-success-container-low, #e6efe6));--_field-tonal-background-hover:var(--forge-field-tonal-background-hover, var(--forge-theme-success-container-minimum, #f7faf7));--_field-content-color:var(--forge-field-content-color, var(--forge-theme-on-success-container, #19441b));--_field-inner-border-color:var(--forge-field-inner-border-color, var(--forge-theme-success, #2e7d32));--_field-inner-border-color-hover:var(--forge-field-inner-border-color-hover, var(--forge-theme-on-success-container, #19441b));--_field-inset-label-color:var(--forge-field-inset-label-color, var(--forge-theme-on-success-container-low, #19441b));--_field-multiline-inset-label-background:var(--forge-field-multiline-inset-label-background, var(--forge-theme-success-container-minimum, #f7faf7));--_field-multiline-inset-label-tonal-background:var(--forge-field-multiline-inset-label-tonal-background, var(--forge-theme-success-container-low, #e6efe6));--_field-multiline-inset-label-tonal-background-hover:var(--forge-field-multiline-inset-label-tonal-background-hover, var(--forge-theme-success-container-minimum, #f7faf7));--_field-outline-color:var(--forge-field-outline-color, var(--forge-theme-success, #2e7d32));--_field-outline-color-hover:var(--forge-field-outline-color-hover, var(--forge-theme-on-success-container, #19441b))}:host(:where([label-position=inset],:not([label-position]))[theme=success]) .forge-field{--_field-label-color:var(--forge-field-label-color, var(--forge-theme-on-success-container-low, #19441b))}:host([theme=error]) .forge-field{--_field-filled-background:var(--forge-field-filled-background, var(--forge-theme-error-container-minimum, #fcf5f6));--_field-focus-indicator-color:var(--forge-field-focus-indicator-color, var(--forge-theme-error, #b00020));--_field-tonal-background:var(--forge-field-tonal-background, var(--forge-theme-error-container-low, #f6e0e4));--_field-tonal-background-hover:var(--forge-field-tonal-background-hover, var(--forge-theme-error-container-minimum, #fcf5f6));--_field-content-color:var(--forge-field-content-color, var(--forge-theme-on-error-container, #5f0011));--_field-inner-border-color:var(--forge-field-inner-border-color, var(--forge-theme-error, #b00020));--_field-inner-border-color-hover:var(--forge-field-inner-border-color-hover, var(--forge-theme-on-error-container, #5f0011));--_field-inset-label-color:var(--forge-field-inset-label-color, var(--forge-theme-on-error-container-low, #5f0011));--_field-multiline-inset-label-background:var(--forge-field-multiline-inset-label-background, var(--forge-theme-error-container-minimum, #fcf5f6));--_field-multiline-inset-label-tonal-background:var(--forge-field-multiline-inset-label-tonal-background, var(--forge-theme-error-container-low, #f6e0e4));--_field-multiline-inset-label-tonal-background-hover:var(--forge-field-multiline-inset-label-tonal-background-hover, var(--forge-theme-error-container-minimum, #fcf5f6));--_field-outline-color:var(--forge-field-outline-color, var(--forge-theme-error, #b00020));--_field-outline-color-hover:var(--forge-field-outline-color-hover, var(--forge-theme-on-error-container, #5f0011))}:host(:where([label-position=inset],:not([label-position]))[theme=error]) .forge-field{--_field-label-color:var(--forge-field-label-color, var(--forge-theme-on-error-container-low, #5f0011))}:host([theme=warning]) .forge-field{--_field-filled-background:var(--forge-field-filled-background, var(--forge-theme-warning-container-minimum, #fdf8f5));--_field-focus-indicator-color:var(--forge-field-focus-indicator-color, var(--forge-theme-warning, #d14900));--_field-tonal-background:var(--forge-field-tonal-background, var(--forge-theme-warning-container-low, #f9e9e0));--_field-tonal-background-hover:var(--forge-field-tonal-background-hover, var(--forge-theme-warning-container-minimum, #fdf8f5));--_field-content-color:var(--forge-field-content-color, var(--forge-theme-on-warning-container, #712700));--_field-inner-border-color:var(--forge-field-inner-border-color, var(--forge-theme-warning, #d14900));--_field-inner-border-color-hover:var(--forge-field-inner-border-color-hover, var(--forge-theme-on-warning-container, #712700));--_field-inset-label-color:var(--forge-field-inset-label-color, var(--forge-theme-on-warning-container-low, #712700));--_field-multiline-inset-label-background:var(--forge-field-multiline-inset-label-background, var(--forge-theme-warning-container-minimum, #fdf8f5));--_field-multiline-inset-label-tonal-background:var(--forge-field-multiline-inset-label-tonal-background, var(--forge-theme-warning-container-low, #f9e9e0));--_field-multiline-inset-label-tonal-background-hover:var(--forge-field-multiline-inset-label-tonal-background-hover, var(--forge-theme-warning-container-minimum, #fdf8f5));--_field-outline-color:var(--forge-field-outline-color, var(--forge-theme-warning, #d14900));--_field-outline-color-hover:var(--forge-field-outline-color-hover, var(--forge-theme-on-warning-container, #712700))}:host(:where([label-position=inset],:not([label-position]))[theme=warning]) .forge-field{--_field-label-color:var(--forge-field-label-color, var(--forge-theme-on-warning-container-low, #712700))}:host([theme=info]) .forge-field{--_field-filled-background:var(--forge-field-filled-background, var(--forge-theme-info-container-minimum, #f6f9fc));--_field-focus-indicator-color:var(--forge-field-focus-indicator-color, var(--forge-theme-info, #1565c0));--_field-tonal-background:var(--forge-field-tonal-background, var(--forge-theme-info-container-low, #e3edf7));--_field-tonal-background-hover:var(--forge-field-tonal-background-hover, var(--forge-theme-info-container-minimum, #f6f9fc));--_field-content-color:var(--forge-field-content-color, var(--forge-theme-on-info-container, #0b3768));--_field-inner-border-color:var(--forge-field-inner-border-color, var(--forge-theme-info, #1565c0));--_field-inner-border-color-hover:var(--forge-field-inner-border-color-hover, var(--forge-theme-on-info-container, #0b3768));--_field-inset-label-color:var(--forge-field-inset-label-color, var(--forge-theme-on-info-container-low, #0b3768));--_field-multiline-inset-label-background:var(--forge-field-multiline-inset-label-background, var(--forge-theme-info-container-minimum, #f6f9fc));--_field-multiline-inset-label-tonal-background:var(--forge-field-multiline-inset-label-tonal-background, var(--forge-theme-info-container-low, #e3edf7));--_field-multiline-inset-label-tonal-background-hover:var(--forge-field-multiline-inset-label-tonal-background-hover, var(--forge-theme-info-container-minimum, #f6f9fc));--_field-outline-color:var(--forge-field-outline-color, var(--forge-theme-info, #1565c0));--_field-outline-color-hover:var(--forge-field-outline-color-hover, var(--forge-theme-on-info-container, #0b3768))}:host(:where([label-position=inset],:not([label-position]))[theme=info]) .forge-field{--_field-label-color:var(--forge-field-label-color, var(--forge-theme-on-info-container-low, #0b3768))}}@layer variant{:host([variant=plain]) .forge-field{--_field-multiline-inset-label-background:var(--forge-field-multiline-inset-label-background, var(--forge-theme-surface, #ffffff));--_field-multiline-inset-label-background-hover:var(--forge-field-multiline-inset-label-background-hover, var(--forge-theme-surface, #ffffff));--_field-outline-color:var(--forge-field-outline-color, transparent);--_field-outline-color-hover:var(--forge-field-outline-color-hover, transparent);--_field-inner-border-display:var(--forge-field-inner-border-display, none);--_field-padding-inline:var(--forge-field-padding-inline, 0);--_field-surface-display:var(--forge-field-surface-display, none)}:host(:where([variant=outlined],:not([variant]))) .forge-field{--_field-multiline-inset-label-background:var(--forge-field-multiline-inset-label-background, var(--forge-theme-surface, #ffffff));--_field-multiline-inset-label-background-hover:var(--forge-field-multiline-inset-label-background-hover, var(--forge-theme-surface, #ffffff))}:host([variant=tonal]) .forge-field{--_field-outline-color:var(--forge-field-outline-color, transparent);--_field-outline-color-hover:var(--forge-field-outline-color-hover, transparent);--_field-inner-border-block-size:var(--forge-field-inner-border-block-size, calc(100% - 8px));--_field-background:var(--_field-tonal-background);--_field-multiline-inset-label-background:var(--forge-field-multiline-inset-label-background, var(--_field-background));--_field-hover-background:var(--forge-field-hover-background, tonal-background-hover);--_field-multiline-inset-label-background:var(--forge-field-multiline-inset-label-background, var(--_field-multiline-inset-label-tonal-background))}:host([variant=filled]) .forge-field{--_field-background:var(--_field-filled-background);--_field-multiline-inset-label-background:var(--forge-field-multiline-inset-label-background, var(--_field-background))}:host([variant=raised]) .forge-field{--_field-elevation:var(--forge-field-elevation, 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12));--_field-elevation-active:var(--forge-field-elevation-active, 0px 3px 3px -2px rgba(0, 0, 0, 0.2), 0px 3px 4px 0px rgba(0, 0, 0, 0.14), 0px 1px 8px 0px rgba(0, 0, 0, 0.12));--_field-outline-color:var(--forge-field-outline-color, transparent);--_field-outline-color-hover:var(--forge-field-outline-color-hover, transparent);--_field-inner-border-block-size:var(--forge-field-inner-border-block-size, calc(100% - 8px));--_field-background:var(--_field-filled-background);--_field-multiline-inset-label-background:var(--forge-field-multiline-inset-label-background, var(--_field-background))}}@layer shape{:host([shape=squared]) .forge-field{--_field-shape:var(--forge-field-shape, 0)}:host([shape=rounded]) .forge-field{--_field-shape:var(--forge-field-shape, calc(var(--forge-shape-full, 9999px) * var(--forge-shape-factor, 1)));--_field-padding-inline:var(--forge-field-padding-inline, var(--_field-rounded-container-padding-inline-start))}}@layer density{:host(:where([label-position=inset],:not([label-position])):not([dense]):where([density=default],:not([density]))) .forge-field{--_field-height:var(--forge-field-height, var(--_field-inset-height))}:host(:where([density=extra-small],[dense])) .forge-field{--_field-height:var(--forge-field-height, 24px);--_field-padding-inline-start:var(--forge-field-padding-inline-start, 8px);--_field-padding-inline-end:var(--forge-field-padding-inline-end, 4px)}:host(:where([label-position=inset],:not([label-position])):where([density=extra-small],[dense])) .forge-field{--_field-height:var(--forge-field-height, 24px)}:host(:where([label-position=inset],:not([label-position])):where([density=extra-small],[dense])) .label,:host(:where([label-position=inset],:not([label-position])):where([density=extra-small],[dense])) .label::before{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;outline:0;-webkit-appearance:none;-moz-appearance:none}:host(:where([label-position=inset],:not([label-position])):where([density=extra-small],[dense])) ::slotted(:where(input,textarea,[data-forge-field-input])){--_field-font-size:var(--_field-dense-font-size)}:host(:not([dense])[density=small]) .forge-field{--_field-height:var(--forge-field-height, 32px)}:host(:where([label-position=inset],:not([label-position])):not([dense])[density=small]) .forge-field{--_field-height:var(--forge-field-height, 40px)}:host(:not([dense])[density=medium]) .forge-field{--_field-height:var(--forge-field-height, 40px)}:host(:where([label-position=inset],:not([label-position])):not([dense])[density=medium]) .forge-field{--_field-height:var(--forge-field-height, 48px)}:host(:not([dense])[density=large]) .forge-field{--_field-height:var(--forge-field-height, 48px)}:host(:where([label-position=inset],:not([label-position])):not([dense])[density=large]) .forge-field{--_field-height:var(--forge-field-height, 56px)}:host(:not([dense])[density=extra-large]) .forge-field{--_field-height:var(--forge-field-height, 56px)}:host(:where([label-position=inset],:not([label-position])):not([dense])[density=extra-large]) .forge-field{--_field-height:var(--forge-field-height, 64px)}}:host(:not([disabled]):hover) .forge-field{--_field-outline-color:var(--forge-field-outline-color, var(--_field-outline-color-hover));--_field-elevation:var(--forge-field-elevation, var(--_field-elevation-active));--_field-tonal-background:var(--_field-tonal-background-hover);--_field-multiline-inset-label-tonal-background:var(--forge-field-multiline-inset-label-tonal-background, var(--_field-multiline-inset-label-tonal-background-hover));--_field-inner-border-color:var(--forge-field-inner-border-color, var(--_field-inner-border-color-hover))}:host([disabled]) .forge-field{--_field-background:var(--_field-disabled-background);--_field-disableable-cursor:var(--forge-field-disableable-cursor, not-allowed);--_field-disableable-opacity:var(--forge-field-disableable-opacity, var(--_field-disabled-opacity))}:host(:not([disabled])[invalid]) .forge-field{--_field-filled-background:var(--forge-field-filled-background, var(--forge-theme-error-container-minimum, #fcf5f6));--_field-focus-indicator-color:var(--forge-field-focus-indicator-color, var(--forge-theme-error, #b00020));--_field-tonal-background:var(--forge-field-tonal-background, var(--forge-theme-error-container-low, #f6e0e4));--_field-tonal-background-hover:var(--forge-field-tonal-background-hover, var(--forge-theme-error-container-minimum, #fcf5f6));--_field-content-color:var(--forge-field-content-color, var(--forge-theme-on-error-container, #5f0011));--_field-inner-border-color:var(--forge-field-inner-border-color, var(--forge-theme-error, #b00020));--_field-inner-border-color-hover:var(--forge-field-inner-border-color-hover, var(--forge-theme-on-error-container, #5f0011));--_field-inset-label-color:var(--forge-field-inset-label-color, var(--forge-theme-on-error-container-low, #5f0011));--_field-multiline-inset-label-background:var(--forge-field-multiline-inset-label-background, var(--forge-theme-error-container-minimum, #fcf5f6));--_field-multiline-inset-label-tonal-background:var(--forge-field-multiline-inset-label-tonal-background, var(--forge-theme-error-container-low, #f6e0e4));--_field-multiline-inset-label-tonal-background-hover:var(--forge-field-multiline-inset-label-tonal-background-hover, var(--forge-theme-error-container-minimum, #fcf5f6));--_field-outline-color:var(--forge-field-outline-color, var(--forge-theme-error, #b00020));--_field-outline-color-hover:var(--forge-field-outline-color-hover, var(--forge-theme-on-error-container, #5f0011));--_field-label-color:var(--forge-field-label-color, var(--forge-theme-error, #b00020))}:host(:not([disabled])[invalid]) .forge-field .support-text{color:var(--forge-theme-error,#b00020)}:host(:not([disabled])) .forge-field:has(.input:focus-within){--_field-elevation:var(--forge-field-elevation, var(--_field-elevation-active))}.forge-field .outline{opacity:var(--_field-disableable-opacity);cursor:var(--_field-disableable-cursor);transition-duration:var(--_field-surface-animation-duration);transition-property:outline-color;transition-timing-function:var(--_field-surface-animation-timing);position:relative;grid-area:main;inline-size:100%;block-size:100%;box-shadow:var(--_field-elevation);border-radius:var(--_field-shape);outline-style:var(--_field-outline-style);outline-width:var(--_field-outline-width);outline-color:var(--_field-outline-color);outline-offset:calc(var(--_field-outline-width) * -1);pointer-events:none}.forge-field .container{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-body2-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-body2-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-font-size-scale, 1)));font-weight:var(--forge-typography-body2-font-weight,400);line-height:var(--forge-typography-body2-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-line-height-scale, 1.375)));letter-spacing:var(--forge-typography-body2-letter-spacing, .015625em);text-transform:var(--forge-typography-body2-text-transform,inherit);text-decoration:var(--forge-typography-body2-text-decoration,inherit);position:relative;display:grid;isolation:isolate;grid-area:main;grid-template-areas:\"start center end popover-icon accessory\";grid-template-columns:auto 1fr auto auto auto;align-items:center;border-radius:var(--_field-shape);inline-size:100%;block-size:var(--_field-height);overflow:hidden}.forge-field .surface{opacity:var(--_field-disableable-opacity);cursor:var(--_field-disableable-cursor);transition-duration:var(--_field-surface-animation-duration);transition-property:background;transition-timing-function:var(--_field-surface-animation-timing);display:var(--_field-surface-display);grid-column:1/-1;grid-row:1/-1;border-radius:var(--_field-shape);inline-size:100%;block-size:100%;background:var(--_field-background);pointer-events:none}.forge-field .input{opacity:var(--_field-disableable-opacity);cursor:var(--_field-disableable-cursor);display:flex;grid-area:center;block-size:100%;inline-size:100%;color:var(--forge-theme-text-high,rgba(0,0,0,.87))}.forge-field .label{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-label2-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-label2-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-font-size-scale, .8125)));font-weight:var(--forge-typography-label2-font-weight,400);line-height:var(--forge-typography-label2-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-line-height-scale, 1.25)));letter-spacing:var(--forge-typography-label2-letter-spacing, .0096153846em);text-transform:var(--forge-typography-label2-text-transform,inherit);text-decoration:var(--forge-typography-label2-text-decoration,inherit);position:relative;display:inline-flex;grid-area:var(--_field-label-grid-area);pointer-events:var(--_field-label-pointer-events);margin-block-end:var(--_field-label-margin-block-end);margin-inline-start:var(--_field-label-margin-inline-start);margin-inline-end:var(--_field-label-margin-inline-end);block-size:fit-content;overflow:hidden;color:var(--_field-label-color);line-height:normal;white-space:var(--_field-label-white-space)}.forge-field .popover-target{position:absolute;inset:calc(var(--_field-focus-indicator-width) * -1);pointer-events:none}.forge-field .popover-icon{display:none}.forge-field .popover-icon__arrow{fill:inherit}.forge-field .accessory,.forge-field .end,.forge-field .start,.forge-field .support-text,.forge-field .support-text-end,.forge-field .support-text-start{display:none}:host([required]) .label::before{margin-inline-end:var(--_field-required-padding);color:var(--forge-theme-error,#b00020);content:var(--_field-required-content)}:host([optional]) .label::after{margin-inline-start:var(--_field-optional-padding);color:inherit;content:var(--_field-optional-content)}:host([popover-icon]) .popover-icon{opacity:var(--_field-disableable-opacity);cursor:var(--_field-disableable-cursor);padding-inline-end:var(--_field-inner-padding-inline);display:flex;align-items:center;grid-area:popover-icon;isolation:isolate;block-size:100%}:host([popover-icon]) .popover-icon>*{transition:rotate var(--_field-popover-icon-transition-duration) var(--_field-popover-icon-transition-timing);fill:var(--_field-content-color)}:host([popover-icon][popover-expanded]) .popover-icon>*{rotate:var(--_field-popover-icon-open-rotation)}.forge-field.has-start .start{opacity:var(--_field-disableable-opacity);cursor:var(--_field-disableable-cursor);padding-inline-start:var(--_field-padding-inline-start);display:flex;grid-area:start;align-items:center;block-size:100%;max-block-size:100%;min-block-size:0;color:var(--_field-content-color)}.forge-field.has-end .end{opacity:var(--_field-disableable-opacity);cursor:var(--_field-disableable-cursor);padding-inline-end:var(--_field-padding-inline-end);display:flex;grid-area:end;align-items:center;block-size:100%;max-block-size:100%;min-block-size:0;color:var(--_field-content-color)}.forge-field.has-accessory .accessory{padding-inline-end:var(--_field-inner-padding-inline);position:relative;display:flex;grid-area:accessory;align-items:center;block-size:100%;max-block-size:100%;min-block-size:0;color:var(--_field-content-color)}.forge-field.has-accessory .accessory::before{opacity:var(--_field-disableable-opacity);cursor:var(--_field-disableable-cursor);transition-duration:var(--_field-surface-animation-duration);transition-property:border-color;transition-timing-function:var(--_field-surface-animation-timing);padding-inline-end:var(--_field-inner-padding-inline);display:var(--_field-inner-border-display);border-inline-start-style:solid;border-inline-start-width:var(--_field-outline-width);border-inline-start-color:var(--_field-inner-border-color);block-size:var(--_field-inner-border-block-size);content:\"\"}.forge-field.has-accessory .forge-field:not(.has-accessory) .popover-icon{padding-inline-end:var(--_field-padding-inline-end)}.forge-field.has-support-text-end .support-text,.forge-field.has-support-text-start .support-text{-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);justify-content:space-between;display:grid;grid-template-areas:\"start end\";grid-template-columns:1fr auto;grid-area:support-text;margin-block-start:var(--_field-support-text-margin-block);line-height:normal}.forge-field.has-support-text-start.has-support-text-end .support-text{gap:var(--_field-support-text-gap)}.forge-field.has-support-text-start .support-text-start{display:inline-block;grid-area:start}.forge-field.has-support-text-end .support-text-end{display:inline-block;grid-area:end}:host(:not([popover-icon])) .forge-field:not(.has-accessory) .end{padding-inline-end:var(--_field-padding-inline-end)}:host([label-position=block-start]) .forge-field{grid-template-areas:\"label\" \"main\" \"support-text\";grid-template-columns:1fr;grid-template-rows:auto auto auto}:host([label-position=block-start]) .label{--_field-label-margin-block-end:var(--forge-field-label-margin-block-end, var(--_field-label-margin-block))}:host([label-position=inline-start]) .forge-field{grid-template-areas:\"label main\" \". support-text\";grid-template-columns:auto 1fr;grid-template-rows:auto auto}:host([label-position=inline-start]) .label{--_field-label-margin-inline-end:var(--forge-field-label-margin-inline-end, var(--_field-label-margin-inline))}:host([label-position=inline-end]) .forge-field{grid-template-areas:\"main label\" \"support-text .\";grid-template-columns:1fr auto;grid-template-rows:auto auto}:host([label-position=inline-end]) .label{--_field-label-margin-inline-start:var(--forge-field-label-margin-inline-start, var(--_field-label-margin-inline))}:host(:where([label-position=inset],:not([label-position]))) .forge-field{grid-template-areas:\"main\" \"support-text\";grid-template-columns:1fr;grid-template-rows:auto auto;--_field-label-grid-area:var(--forge-field-label-grid-area, center);--_field-label-pointer-events:var(--forge-field-label-pointer-events, none);--_field-label-white-space:var(--forge-field-label-white-space, nowrap)}:host(:where([label-position=inset],:not([label-position]))) .label{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-body2-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-body2-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-font-size-scale, 1)));font-weight:var(--forge-typography-body2-font-weight,400);line-height:var(--forge-typography-body2-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-line-height-scale, 1.375)));letter-spacing:var(--forge-typography-body2-letter-spacing, .015625em);text-transform:var(--forge-typography-body2-text-transform,inherit);text-decoration:var(--forge-typography-body2-text-decoration,inherit);padding-inline-start:var(--_field-padding-inline-start);padding-inline-end:var(--_field-padding-inline-end);z-index:999;--_field-floating-label-translation:var(--forge-field-floating-label-translation, 0 calc(calc(calc(max(var(--forge-typography-body2-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-line-height-scale, 1.375))), var(--forge-typography-label2-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-line-height-scale, 1.25)))) / 2) + calc((var(--_field-height) - 56px) / 8)) * -1))}:host([label-position=none]) .forge-field{grid-template-areas:\"main\" \"support-text\";grid-template-columns:1fr;grid-template-rows:auto auto}:host([label-position=none]) .label{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;outline:0;-webkit-appearance:none;-moz-appearance:none}:host([label-position=inline-end][label-alignment=start]) .label,:host([label-position=inline-start][label-alignment=start]) .label{align-self:start}:host([label-position=inline-end]:where([label-alignment=center],[label-alignment=default],:not([label-alignment]))) .label,:host([label-position=inline-start]:where([label-alignment=center],[label-alignment=default],:not([label-alignment]))) .label{align-self:center}:host([label-position=inline-end][label-alignment=end]) .label,:host([label-position=inline-start][label-alignment=end]) .label{align-self:end}:host([label-position=inline-end][label-alignment=baseline]) .label,:host([label-position=inline-start][label-alignment=baseline]) .label{align-self:center;padding-block-start:calc(var(--forge-typography-body2-line-height,calc(var(--forge-typography-font-size,1rem) * var(--forge-typography-body-line-height-scale,1.375))) - var(--forge-typography-label2-line-height,calc(var(--forge-typography-font-size,1rem) * var(--forge-typography-label-line-height-scale,1.25))))}:host([label-position=block-start]:where([label-alignment=start],[label-alignment=default],:not([label-alignment]))) .label{justify-self:start}:host([label-position=block-start][label-alignment=center]) .label{justify-self:center}:host([label-position=block-start][label-alignment=end]) .label{justify-self:end}:host([label-position=block-start][label-alignment=baseline]:not([variant=plain])) .label{justify-self:start;padding-inline-start:var(--_field-padding-inline-start)}:host([label-position=block-start][label-alignment=baseline][variant=plain]) .label{justify-self:start;padding-inline-start:0px}:host(:where([label-position=inset],:not([label-position]))[float-label]:not(:where([density=extra-small],[dense]))) .has-label .label{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-label2-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-label2-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-font-size-scale, .8125)));font-weight:var(--forge-typography-label2-font-weight,400);line-height:var(--forge-typography-label2-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-line-height-scale, 1.25)));letter-spacing:var(--forge-typography-label2-letter-spacing, .0096153846em);text-transform:var(--forge-typography-label2-text-transform,inherit);text-decoration:var(--forge-typography-label2-text-decoration,inherit);translate:var(--_field-floating-label-translation)}:host(:where([label-position=inset],:not([label-position]))[float-label]:not(:where([density=extra-small],[dense]))) .has-label .input{box-sizing:border-box}:host(:where([label-position=inset],:not([label-position]))[float-label]:not(:where([density=extra-small],[dense]))) .has-label.floating-in .label{animation-name:float-in-label-animation;animation-duration:var(--_field-floating-animation-duration);animation-timing-function:var(--_field-floating-animation-timing)}:host(:where([label-position=inset],:not([label-position]))[float-label]:not(:where([density=extra-small],[dense]))) .has-label.floating-in .input{animation-name:float-in-input-animation;animation-duration:var(--_field-floating-animation-duration);animation-timing-function:var(--_field-floating-animation-timing)}:host(:where([label-position=inset],:not([label-position]))[float-label]:not(:where([density=extra-small],[dense]))) .has-label.floating-in .input ::slotted(:is(input,[data-forge-field-input],[data-forge-multi-input-separator])){position:absolute;inset-block-start:calc(var(--_field-height) * -0.5);block-size:100%;padding-block:var(--_field-height)}:host(:where([label-position=inset],:not([label-position]))[float-label]:not(:where([density=extra-small],[dense]))) .has-label:not(.floating-in) .input ::slotted(:is(input,[data-forge-field-input],[data-forge-multi-input-separator])){padding-block-start:calc(calc(calc(max(var(--forge-typography-body2-line-height,calc(var(--forge-typography-font-size,1rem) * var(--forge-typography-body-line-height-scale,1.375))),var(--forge-typography-label2-line-height,calc(var(--forge-typography-font-size,1rem) * var(--forge-typography-label-line-height-scale,1.25))))/ 2) + calc((var(--_field-height) - 56px)/ 8)) * 2)!important}:host(:where([label-position=inset],:not([label-position])):not([float-label])) .has-label.floating-out .label{animation-name:float-out-label-animation;animation-duration:var(--_field-floating-animation-duration);animation-timing-function:var(--_field-floating-animation-timing)}:host(:where([label-position=inset],:not([label-position])):not([float-label])) .has-label.floating-out .input{animation-name:float-out-input-animation;animation-duration:var(--_field-floating-animation-duration);animation-timing-function:var(--_field-floating-animation-timing)}:host(:where([label-position=inset],:not([label-position]))[float-label][multiline]) .has-label:not(.floating-in) ::slotted(textarea){padding-block-start:calc(calc(calc(max(var(--forge-typography-body2-line-height,calc(var(--forge-typography-font-size,1rem) * var(--forge-typography-body-line-height-scale,1.375))),var(--forge-typography-label2-line-height,calc(var(--forge-typography-font-size,1rem) * var(--forge-typography-label-line-height-scale,1.25))))/ 2) + calc((var(--_field-height) - 56px)/ 8)) + (var(--_field-height) - var(--forge-typography-body2-line-height,calc(var(--forge-typography-font-size,1rem) * var(--forge-typography-body-line-height-scale,1.375))))/ 2)!important;padding-block-end:8px!important}:host([support-text-inset=both]) .support-text{padding-inline-start:var(--_field-padding-inline-start);padding-inline-end:var(--_field-padding-inline-end)}:host([support-text-inset=start]) .support-text{padding-inline-start:var(--_field-padding-inline-start)}:host([support-text-inset=end]) .support-text{padding-inline-end:var(--_field-padding-inline-end)}:host([multiline]) .container{align-items:start;block-size:fit-content;min-inline-size:var(--_field-multiline-min-inline-size);max-inline-size:var(--_field-multiline-max-inline-size);min-block-size:var(--_field-multiline-min-block-size);max-block-size:var(--_field-multiline-max-block-size);resize:var(--_field-multiline-resize)}:host([multiline]) .container .end,:host([multiline]) .container .label,:host([multiline]) .container .popover-icon,:host([multiline]) .container .start{align-items:center;block-size:var(--_field-height)}:host([multiline]:where([label-position=inset],:not([label-position]))[float-label]:not(:where([density=extra-small],[dense]))) .label{pointer-events:none;inline-size:fit-content}:host([multiline]:where([label-position=inset],:not([label-position]))[float-label]:not(:where([density=extra-small],[dense]))) .label slot{display:block}:host([multiline]:where([label-position=inset],:not([label-position]))[float-label]:not(:where([density=extra-small],[dense]))) .label::after{animation-name:multiline-inset-label-background-animation;animation-duration:var(--_field-floating-animation-duration);animation-timing-function:var(--_field-floating-animation-timing);position:absolute;z-index:-1;inset-inline-start:var(--_field-outline-width);transition-duration:var(--_field-surface-animation-duration);transition-property:background;transition-timing-function:var(--_field-surface-animation-timing);background:var(--_field-multiline-inset-label-background);inline-size:100%;block-size:3ex;filter:blur(2px);content:\"\"}.forge-field .input ::slotted(*){box-sizing:border-box;margin:0;outline:0;border:none;background-color:transparent;padding-block:0;padding-inline:0;inline-size:100%;block-size:100%;color:inherit;font:inherit;font-size:var(--_field-font-size);text-overflow:ellipsis;cursor:var(--_field-disableable-cursor)}.forge-field .input ::slotted(*)::placeholder{color:var(--_field-placeholder-color)}.forge-field .input ::slotted(textarea){resize:none}.forge-field .input ::slotted(:is([data-forge-field-input],:first-of-type:is(input,textarea))){padding-inline-start:var(--_field-padding-inline-start)}.forge-field .input ::slotted(:is([data-forge-field-input],:last-of-type:is(input,textarea))){padding-inline-end:var(--_field-padding-inline-end)}.forge-field .input ::slotted([data-forge-multi-input-separator]){align-self:center;padding-inline:4px;block-size:fit-content;inline-size:fit-content}.forge-field .label ::slotted(forge-label){font:inherit}.forge-field.has-start .input ::slotted(:is([data-forge-field-input],:first-of-type:is(input,textarea))){padding-inline-start:var(--_field-inner-padding-inline)}.forge-field.has-end .input ::slotted(:is([data-forge-field-input],:last-of-type:is(input,textarea))){padding-inline-end:var(--_field-inner-padding-inline)}.forge-field.has-accessory .end{padding-inline-end:var(--_field-inner-padding-inline)}:host([variant=plain]) .forge-field.has-accessory .end{padding-inline-end:var(--_field-inner-padding-inline)}:host(:where([label-position=inset],:not([label-position]))) .forge-field.has-start .label{padding-inline-start:var(--_field-inner-padding-inline)}:host(:where([label-position=inset],:not([label-position]))) .label ::slotted(*){max-inline-size:100%;overflow:hidden;text-overflow:ellipsis}:host([popover-icon]) .forge-field .input ::slotted(:is([data-forge-field-input],:last-of-type:is(input,textarea))){padding-inline-end:var(--_field-inner-padding-inline)}:host([popover-icon]) .forge-field .end{padding-inline-end:var(--_field-inner-padding-inline)}:host(:not(popover-icon)) .forge-field.has-accessory:not(:is(.has-end)) .input ::slotted(:is([data-forge-field-input],:last-of-type:is(input,textarea))){padding-inline-end:var(--_field-inner-padding-inline)}:host([multiline]) .input ::slotted(:is(input,textarea)){padding-block-start:calc((var(--_field-height) - var(--forge-typography-body2-line-height,calc(var(--forge-typography-font-size,1rem) * var(--forge-typography-body-line-height-scale,1.375))))/ 2);padding-block-end:calc(calc(calc(max(var(--forge-typography-body2-line-height,calc(var(--forge-typography-font-size,1rem) * var(--forge-typography-body-line-height-scale,1.375))),var(--forge-typography-label2-line-height,calc(var(--forge-typography-font-size,1rem) * var(--forge-typography-label-line-height-scale,1.25))))/ 2) + calc((var(--_field-height) - 56px)/ 8)) + 8px)}:host([multiline]) .accessory slot{align-items:center;block-size:var(--_field-height);display:flex;align-self:start}forge-focus-indicator{--forge-focus-indicator-color:var(--_field-focus-indicator-color);--forge-focus-indicator-outward-offset:calc(var(--_field-outline-width) * -1);--forge-focus-indicator-shape:var(--_field-shape);--forge-focus-indicator-width:var(--_field-focus-indicator-width)}:host([variant=plain]) forge-focus-indicator{--forge-focus-indicator-offset-inline:-4px}@media (prefers-reduced-motion:reduce){.forge-field{--_field-floating-animation-duration:var(--forge-field-floating-animation-duration, 0s)}}';
 /**
  * @tag forge-field
  *

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

@@ -50,6 +50,7 @@ export function createPopupDropdown(config, targetElement) {
     popoverElement.anchorElement = targetElement;
     popoverElement.placement = config.popupPlacement || 'bottom-start';
     popoverElement.persistent = Boolean(config.popupStatic);
+    popoverElement.triggerType = 'manual';
     if (config.popupFallbackPlacements?.length) {
         popoverElement.fallbackPlacements = config.popupFallbackPlacements;
     }

package/esm/popover/popover-core.js

@@ -248,7 +248,7 @@ export class PopoverCore extends WithLongpressListener((OverlayAwareCore)) {
      *
      * Only called when using the "click" (default) trigger type.
      */
-    _onAnchorClick(evt) {
+    _onAnchorClick(_evt) {
         if (!this.open) {
             this._openPopover();
         }

package/esm/scaffold/scaffold.js

@@ -8,7 +8,7 @@ import { customElement, attachShadowTemplate } from '@tylertech/forge-core';
 import { BaseComponent } from '../core/base/base-component';
 import { SCAFFOLD_CONSTANTS } from './scaffold-constants';
 const template = '<template><div class=\"forge-scaffold\" part=\"root\"><slot name=\"left\"></slot><div class=\"header\" part=\"header\"><slot name=\"header\"></slot></div><div class=\"body\" part=\"body\"><slot name=\"body-left\"></slot><slot name=\"body-header\"></slot><slot name=\"body\"></slot><slot name=\"body-footer\"></slot><slot name=\"body-right\"></slot></div><slot name=\"footer\"></slot><slot name=\"right\"></slot></div></template>';
-const styles = ':host{--_scaffold-height:var(--forge-scaffold-height, 100%);--_scaffold-width:var(--forge-scaffold-width, 100%)}:host{display:block;width:var(--_scaffold-width);height:var(--_scaffold-height)}:host([hidden]){display:none}.forge-scaffold{--_scaffold-overflow:var(--forge-scaffold-overflow, hidden);--_scaffold-body-position:var(--forge-scaffold-body-position, relative)}.forge-scaffold{position:relative;display:grid;grid-template-areas:\"left header right\" \"left body right\" \"left footer right\";grid-template-rows:auto 1fr auto;grid-template-columns:auto 1fr auto;height:var(--_scaffold-height);width:var(--_scaffold-width);overflow:var(--_scaffold-overflow)}.header{grid-area:header;min-width:0;min-height:0}.body{position:var(--_scaffold-body-position);display:grid;grid-area:body;grid-template-areas:\"body-left body-header body-right\" \"body-left body-inner body-right\" \"body-left body-footer body-right\";grid-template-rows:auto 1fr auto;grid-template-columns:auto 1fr auto;width:var(--_scaffold-width);min-width:0;min-height:0;overflow:hidden}::slotted(*){min-width:0;min-height:0}::slotted([slot=left]){grid-area:left}::slotted([slot=right]){grid-area:right}::slotted([slot=body-left]){grid-area:body-left}::slotted([slot=body-right]){grid-area:body-right}::slotted([slot=body-header]){grid-area:body-header}::slotted([slot=body]){overflow:auto;grid-area:body-inner}::slotted([slot=body-footer]){grid-area:body-footer}::slotted([slot=footer]){grid-area:footer}::slotted([slot=body-left]),::slotted([slot=body-right]),::slotted([slot=body]),::slotted([slot=left]),::slotted([slot=right]){overflow:auto}:host([viewport]){--_scaffold-height:var(--forge-scaffold-height, 100dvh);--_scaffold-width:var(--forge-scaffold-width, 100dvw)}';
+const styles = ':host{--_scaffold-height:var(--forge-scaffold-height, 100%);--_scaffold-width:var(--forge-scaffold-width, 100%)}:host{display:block;width:var(--_scaffold-width);height:var(--_scaffold-height)}:host([hidden]){display:none}.forge-scaffold{--_scaffold-overflow:var(--forge-scaffold-overflow, initial);--_scaffold-body-position:var(--forge-scaffold-body-position, relative)}.forge-scaffold{position:relative;display:grid;grid-template-areas:\"left header right\" \"left body right\" \"left footer right\";grid-template-rows:auto 1fr auto;grid-template-columns:auto 1fr auto;height:var(--_scaffold-height);width:var(--_scaffold-width);overflow:var(--_scaffold-overflow)}.header{grid-area:header;min-width:0;min-height:0}.body{position:var(--_scaffold-body-position);display:grid;grid-area:body;grid-template-areas:\"body-left body-header body-right\" \"body-left body-inner body-right\" \"body-left body-footer body-right\";grid-template-rows:auto 1fr auto;grid-template-columns:auto 1fr auto;width:var(--_scaffold-width);min-width:0;min-height:0;overflow:var(--_scaffold-overflow)}::slotted(*){min-width:0;min-height:0}::slotted([slot=left]){grid-area:left}::slotted([slot=right]){grid-area:right}::slotted([slot=body-left]){grid-area:body-left}::slotted([slot=body-right]){grid-area:body-right}::slotted([slot=body-header]){grid-area:body-header}::slotted([slot=body]){overflow:auto;grid-area:body-inner}::slotted([slot=body-footer]){grid-area:body-footer}::slotted([slot=footer]){grid-area:footer}::slotted([slot=body-left]),::slotted([slot=body-right]),::slotted([slot=body]),::slotted([slot=left]),::slotted([slot=right]){overflow:auto}:host([viewport]){--_scaffold-height:var(--forge-scaffold-height, 100dvh);--_scaffold-width:var(--forge-scaffold-width, 100dvw)}';
 /**
  * @tag forge-scaffold
  *

package/esm/text-field/text-field-component-delegate.js

@@ -16,9 +16,6 @@ export class TextFieldComponentDelegate extends FormFieldComponentDelegate {
         return textField;
     }
     _configure() {
-        if (this._config.options?.id) {
-            this._element.id = this._config.options.id;
-        }
         if (this._config.options?.label) {
             this._createLabel(this._config.options.label);
         }

package/esm/toolbar/toolbar.js

@@ -7,7 +7,7 @@ import { __decorate } from "tslib";
 import { customElement, attachShadowTemplate, coerceBoolean } from '@tylertech/forge-core';
 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=\"before-section-start\"><slot name=\"after-end\"></slot></div></div></template>';
+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))}.forge-toolbar{display:grid;grid-template-columns:auto 1fr auto;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:auto 1fr auto;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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tylertech/forge",
   "description": "Tyler Forge™ Web Components library",
-  "version": "3.3.0",
+  "version": "3.3.2",
   "author": "Tyler Technologies, Inc.",
   "license": "Apache-2.0",
   "repository": {

package/sass/button/_core.scss

@@ -12,6 +12,7 @@
   display: #{token(display)};
   position: relative;
   outline: none;
+  vertical-align: middle;
   -webkit-tap-highlight-color: transparent;
 }
 
@@ -101,6 +102,10 @@
   text-decoration: none;
 }
 
+@mixin text {
+  @include override(padding-inline, text-padding-inline);
+}
+
 @mixin filled {
   @include override(background, filled-background);
   @include override(color, filled-color);

package/sass/button/button.scss

@@ -136,6 +136,12 @@ forge-focus-indicator {
 // Variants
 //
 
+:host(:where(:not([variant]), [variant='text'])) {
+  .forge-button {
+    @include text;
+  }
+}
+
 :host([variant='filled']) {
   .forge-button {
     @include filled;

package/sass/button/forge-button.scss

@@ -43,6 +43,11 @@
     pointer-events: initial;
   }
 
+  &:where(:not(.forge-button--outlined, .forge-button--tonal, .forge-button--filled, .forge-button--raised, .forge-button--link)),
+  &--text {
+    @include core.text;
+  }
+
   &--outlined {
     @include core.outlined;
 

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

@@ -18,7 +18,7 @@ $tokens: (
   primary-color: utils.module-val(button, primary-color, theme.variable(primary)),
   text-color: utils.module-ref(button, text-color, primary-color),
   disabled-color: utils.module-val(button, disabled-color, theme.variable(surface-container)),
-  padding: utils.module-val(button, padding, 8px),
+  padding: utils.module-val(button, padding, spacing.variable(medium)),
   display: utils.module-val(button, display, inline-flex),
   justify: utils.module-val(button, justify, center),
   shape: utils.module-val(button, shape, shape.variable(medium)),
@@ -46,6 +46,8 @@ $tokens: (
   cursor: utils.module-val(button, cursor, pointer),
   transition-duration: utils.module-val(button, transition-duration, animation.variable(duration-short3)),
   transition-timing: utils.module-val(button, transition-timing, animation.variable(easing-standard)),
+  // Text
+  text-padding-inline: utils.module-val(button, text-padding-inline, spacing.variable(xsmall)),
   // Outlined
   outlined-background: utils.module-val(button, outlined-background, transparent),
   outlined-color: utils.module-ref(button, outlined-color, primary-color),

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

@@ -21,7 +21,7 @@ $tokens: (
   elevation: utils.module-val(card, elevation, none),
   padding: utils.module-val(card, padding, spacing.variable(medium)),
   shape: utils.module-val(card, shape, shape.variable(medium)),
-  overflow: utils.module-val(card, overflow, hidden),
+  overflow: utils.module-val(card, overflow, initial),
   // Raised
   raised-elevation: utils.module-val(card, raised-elevation, elevation.value(1)),
   raised-outline-width: utils.module-val(card, raised-outline-width, 0)