@tylertech/forge 3.6.2 → 3.6.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/expansion-panel/forge-expansion-panel.css +2 -0
- package/dist/lib.js +3 -3
- package/dist/lib.js.map +2 -2
- package/esm/dialog/dialog-adapter.js +3 -1
- package/esm/dialog/dialog.d.ts +1 -1
- package/esm/dialog/dialog.js +3 -3
- package/esm/expansion-panel/expansion-panel.js +1 -1
- package/esm/field/field.js +1 -1
- package/esm/split-view/split-view-panel/split-view-panel.js +1 -1
- package/package.json +1 -1
- package/sass/expansion-panel/_core.scss +3 -0
- package/sass/field/_core.slotted.scss +5 -0
- package/sass/field/field.scss +8 -7
|
@@ -94,7 +94,9 @@ export class DialogAdapter extends BaseAdapter {
|
|
|
94
94
|
window.requestAnimationFrame(() => {
|
|
95
95
|
const alreadyHasFocus = this._component.matches(':focus-within');
|
|
96
96
|
if (!alreadyHasFocus) {
|
|
97
|
-
this.
|
|
97
|
+
if (this._component.mode === 'modal') {
|
|
98
|
+
this._dialogElement.focus();
|
|
99
|
+
}
|
|
98
100
|
if (this._component.open && this._dialogElement.isConnected) {
|
|
99
101
|
const autofocusElement = this._component.querySelector(DIALOG_CONSTANTS.selectors.AUTOFOCUS);
|
|
100
102
|
autofocusElement?.focus();
|
package/esm/dialog/dialog.d.ts
CHANGED
|
@@ -6,8 +6,8 @@
|
|
|
6
6
|
import { BaseComponent } from '../core/base/base-component';
|
|
7
7
|
import { IWithDefaultAria } from '../core/mixins/internals/with-default-aria';
|
|
8
8
|
import { IWithElementInternals } from '../core/mixins/internals/with-element-internals';
|
|
9
|
-
import { DialogAnimationType, DialogMode, DialogPlacement, DialogPositionStrategy, DialogPreset, DialogSizeStrategy, dialogStack, DialogType, hideBackdrop, IDialogMoveEventData, IDialogMoveStartEventData, showBackdrop } from './dialog-constants';
|
|
10
9
|
import { IDismissible, IDismissibleStackState, tryDismiss } from '../core/utils/dismissible-stack';
|
|
10
|
+
import { DialogAnimationType, DialogMode, DialogPlacement, DialogPositionStrategy, DialogPreset, DialogSizeStrategy, DialogType, IDialogMoveEventData, IDialogMoveStartEventData, dialogStack, hideBackdrop, showBackdrop } from './dialog-constants';
|
|
11
11
|
export interface IDialogProperties {
|
|
12
12
|
open: boolean;
|
|
13
13
|
mode: DialogMode;
|
package/esm/dialog/dialog.js
CHANGED
|
@@ -5,15 +5,15 @@
|
|
|
5
5
|
*/
|
|
6
6
|
var _a;
|
|
7
7
|
import { __decorate } from "tslib";
|
|
8
|
-
import { attachShadowTemplate, coerceBoolean,
|
|
8
|
+
import { attachShadowTemplate, coerceBoolean, coerceNumber, coreProperty, customElement } from '@tylertech/forge-core';
|
|
9
9
|
import { BackdropComponent } from '../backdrop';
|
|
10
10
|
import { BaseComponent } from '../core/base/base-component';
|
|
11
11
|
import { WithDefaultAria } from '../core/mixins/internals/with-default-aria';
|
|
12
12
|
import { WithElementInternals } from '../core/mixins/internals/with-element-internals';
|
|
13
|
+
import { tryDismiss } from '../core/utils/dismissible-stack';
|
|
13
14
|
import { DialogAdapter } from './dialog-adapter';
|
|
15
|
+
import { DIALOG_CONSTANTS, dialogStack, hideBackdrop, showBackdrop } from './dialog-constants';
|
|
14
16
|
import { DialogCore } from './dialog-core';
|
|
15
|
-
import { dialogStack, DIALOG_CONSTANTS, hideBackdrop, showBackdrop } from './dialog-constants';
|
|
16
|
-
import { tryDismiss } from '../core/utils/dismissible-stack';
|
|
17
17
|
const template = '<template><dialog class=\"forge-dialog\" part=\"root\"><forge-backdrop exportparts=\"root:backdrop\"></forge-backdrop><div class=\"surface\" part=\"surface\"><div class=\"move-handle-container\" part=\"move-handle-container\"><div class=\"move-handle\" part=\"move-handle\"><slot name=\"move-handle\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" aria-hidden=\"true\" part=\"move-handle-icon\"><path d=\"M3 15v-2h2v2H3m0-4V9h2v2H3m4 4v-2h2v2H7m0-4V9h2v2H7m4 4v-2h2v2h-2m0-4V9h2v2h-2m4 4v-2h2v2h-2m0-4V9h2v2h-2m4 4v-2h2v2h-2m0-4V9h2v2h-2z\"/></svg></slot></div></div><slot></slot></div></dialog></template>';
|
|
18
18
|
const styles = '@keyframes forge-dialog-zoom-in{from{opacity:var(--_dialog-zoom-opacity);scale:var(--_dialog-zoom-scale)}to{opacity:1;scale:1}}@keyframes forge-dialog-zoom-out{from{opacity:1;scale:1}to{opacity:var(--_dialog-zoom-opacity);scale:var(--_dialog-zoom-scale)}}@keyframes forge-dialog-fade-in{from{opacity:var(--_dialog-fade-opacity)}to{opacity:1}}@keyframes forge-dialog-fade-out{from{opacity:1}to{opacity:var(--_dialog-fade-opacity)}}@keyframes forge-dialog-slide-in{from{opacity:var(--_dialog-slide-opacity);translate:var(--_dialog-slide-translate)}to{opacity:1;translate:0 0}}@keyframes forge-dialog-slide-out{from{opacity:1;translate:0 0}to{opacity:var(--_dialog-slide-opacity);translate:var(--_dialog-slide-translate)}}@layer base,nonmodal,animation,placement,size-strategy,preset,fullscreen,position-strategy,media; @layer base{:host{display:none;--forge-theme-surface:var(--forge-theme-surface-bright, #ffffff)}:host([hidden]){display:none}.forge-dialog{--_dialog-background:var(--forge-dialog-background, var(--forge-theme-surface-bright, #ffffff));--_dialog-shape:var(--forge-dialog-shape, calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1)));--_dialog-elevation:var(--forge-dialog-elevation, 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12));--_dialog-spacing:var(--forge-dialog-spacing, auto);--_dialog-block-start-spacing:var(--forge-dialog-block-start-spacing, var(--_dialog-spacing));--_dialog-block-end-spacing:var(--forge-dialog-block-end-spacing, var(--_dialog-spacing));--_dialog-inline-start-spacing:var(--forge-dialog-inline-start-spacing, var(--_dialog-spacing));--_dialog-inline-end-spacing:var(--forge-dialog-inline-end-spacing, var(--_dialog-spacing));--_dialog-padding:var(--forge-dialog-padding, 0);--_dialog-width:var(--forge-dialog-width, fit-content);--_dialog-height:var(--forge-dialog-height, fit-content);--_dialog-min-width:var(--forge-dialog-min-width, 0);--_dialog-max-width:var(--forge-dialog-max-width, calc(100% - var(--forge-spacing-xxlarge, 48px)));--_dialog-min-height:var(--forge-dialog-min-height, 0);--_dialog-max-height:var(--forge-dialog-max-height, calc(100% - var(--forge-spacing-xxlarge, 48px)));--_dialog-z-index:var(--forge-dialog-z-index, var(--forge-z-index-dialog, 8));--_dialog-move-handle-color:var(--forge-dialog-move-handle-color, currentColor);--_dialog-move-handle-size:var(--forge-dialog-move-handle-size, 24px);--_dialog-move-handle-hover-cursor:var(--forge-dialog-move-handle-hover-cursor, grab);--_dialog-move-handle-active-cursor:var(--forge-dialog-move-handle-active-cursor, grabbing);--_dialog-move-handle-spacing:var(--forge-dialog-move-handle-spacing, calc(var(--forge-spacing-xxsmall, 4px) * -1) 0 0);--_dialog-move-transition-duration:var(--forge-dialog-move-transition-duration, var(--forge-animation-duration-short4, 200ms));--_dialog-move-transition-easing:var(--forge-dialog-move-transition-easing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_dialog-moving-opacity:var(--forge-dialog-moving-opacity, 0.54);--_dialog-enter-animation-duration:var(--forge-dialog-enter-animation-duration, var(--forge-animation-duration-medium1, 250ms));--_dialog-enter-animation-easing:var(--forge-dialog-enter-animation-easing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_dialog-exit-animation-duration:var(--forge-dialog-exit-animation-duration, var(--forge-animation-duration-short2, 100ms));--_dialog-exit-animation-easing:var(--forge-dialog-exit-animation-easing, var(--forge-animation-easing-emphasized-accelerate, cubic-bezier(0.3, 0, 0.8, 0.15)));--_dialog-zoom-opacity:var(--forge-dialog-zoom-opacity, 0);--_dialog-zoom-scale:var(--forge-dialog-zoom-scale, 0.8);--_dialog-fade-opacity:var(--forge-dialog-fade-opacity, 0);--_dialog-slide-opacity:var(--forge-dialog-slide-opacity, 0);--_dialog-slide-translate:var(--forge-dialog-slide-translate, 0 -30%);--_dialog-backdrop-opacity:var(--forge-dialog-backdrop-opacity, var(--forge-backdrop-opacity, 0.54));--_dialog-nonmodal-elevation:var(--forge-dialog-nonmodal-elevation, 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12));--_dialog-fullscreen-enter-animation-duration:var(--forge-dialog-fullscreen-enter-animation-duration, var(--forge-animation-duration-medium1, 250ms));--_dialog-fullscreen-exit-animation-duration:var(--forge-dialog-fullscreen-exit-animation-duration, var(--forge-animation-duration-short2, 100ms));--_dialog-position-x:var(--forge-dialog-position-x, 0);--_dialog-position-y:var(--forge-dialog-position-y, 0);--_dialog-preset-sheet-enter-animation-duration:var(--forge-dialog-preset-sheet-enter-animation-duration, var(--forge-animation-duration-medium1, 250ms));--_dialog-preset-sheet-exit-animation-duration:var(--forge-dialog-preset-sheet-exit-animation-duration, var(--forge-animation-duration-short3, 150ms))}.forge-dialog{position:fixed;inset:0;z-index:var(--_dialog-z-index);background-color:transparent;color:inherit;border:none;width:auto;height:auto;padding:0;margin:0;overflow:visible;max-width:100%;max-height:100%;box-sizing:border-box}.container{display:flex;justify-content:center;align-items:center;width:100%;height:100%}.surface{position:absolute;inset:0;display:flex;background:var(--_dialog-background);box-shadow:var(--_dialog-elevation);z-index:var(--_dialog-z-index);overflow:hidden;border-radius:var(--_dialog-shape);margin-block-start:var(--_dialog-block-start-spacing);margin-block-end:var(--_dialog-block-end-spacing);margin-inline-start:var(--_dialog-inline-start-spacing);margin-inline-end:var(--_dialog-inline-end-spacing);padding:var(--_dialog-padding);width:var(--_dialog-width);height:var(--_dialog-height);min-width:var(--_dialog-min-width);max-width:var(--_dialog-max-width);min-height:var(--_dialog-min-height);max-height:var(--_dialog-max-height);box-sizing:border-box}.visually-hidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:fixed;width:1px;outline:0;-webkit-appearance:none;-moz-appearance:none}dialog.forge-dialog::backdrop{display:none}forge-backdrop{--forge-backdrop-opacity:var(--_dialog-backdrop-opacity);--forge-backdrop-enter-animation-duration:var(--_dialog-enter-animation-duration);--forge-backdrop-enter-animation-easing:var(--_dialog-enter-animation-easing);--forge-backdrop-exit-animation-duration:var(--_dialog-exit-animation-duration);--forge-backdrop-exit-animation-easing:var(--_dialog-exit-animation-easing)}:host(:not([moveable])) .move-handle{display:none}:host([moveable]:not([fullscreen])) .surface{user-select:none;transition-property:opacity;transition-duration:var(--_dialog-move-transition-duration);transition-timing-function:var(--_dialog-move-transition-easing)}:host([moveable]:not([fullscreen])) .surface:not(:hover) .move-handle-container{display:none}:host([moveable]:not([fullscreen])) .surface.moved{margin:0}:host([moveable]:not([fullscreen])) .surface.moving{opacity:var(--_dialog-moving-opacity)}:host([moveable]:not([fullscreen])) .move-handle-container{position:absolute;top:0;z-index:1;display:flex;justify-content:center;width:100%}:host([moveable]:not([fullscreen])) .move-handle-container .move-handle{fill:var(--_dialog-move-handle-color);height:var(--_dialog-move-handle-size);width:var(--_dialog-move-handle-size);margin:var(--_dialog-move-handle-spacing);touch-action:none}:host([moveable]:not([fullscreen])) .move-handle-container .move-handle:hover{cursor:var(--_dialog-move-handle-hover-cursor)}:host([moveable]:not([fullscreen])) .move-handle-container .move-handle:active{cursor:var(--_dialog-move-handle-active-cursor)}:host([moveable]:not([fullscreen])) .move-handle-container .move-handle svg{fill:currentColor}:host([visible]){display:contents}}@layer nonmodal{:host([mode=nonmodal]) .forge-dialog{pointer-events:none}:host([mode=nonmodal]) .container{display:contents}:host([mode=nonmodal]) .surface{--_dialog-elevation:var(--_dialog-nonmodal-elevation);pointer-events:all}:host([mode=nonmodal]) forge-backdrop{display:none}}@layer animation{:host([visible]:not([animation-type=none])) dialog.forge-dialog[open] .surface{animation-duration:var(--_dialog-enter-animation-duration);animation-timing-function:var(--_dialog-enter-animation-easing)}:host([visible]:not([animation-type=none])) dialog.forge-dialog[open] .surface.exiting{animation-duration:var(--_dialog-exit-animation-duration);animation-timing-function:var(--_dialog-exit-animation-easing)}:host([visible]:not([animation-type=none]):is(:not([animation-type]),[animation-type=zoom])) dialog.forge-dialog[open] .surface{animation-name:forge-dialog-zoom-in}:host([visible]:not([animation-type=none]):is(:not([animation-type]),[animation-type=zoom])) dialog.forge-dialog[open] .surface.exiting{animation-name:forge-dialog-zoom-out}:host([visible]:not([animation-type=none])[animation-type=fade]) dialog.forge-dialog[open] .surface{animation-name:forge-dialog-fade-in}:host([visible]:not([animation-type=none])[animation-type=fade]) dialog.forge-dialog[open] .surface.exiting{animation-name:forge-dialog-fade-out}:host([visible]:not([animation-type=none])[animation-type=slide]) dialog.forge-dialog[open] .surface{animation-name:forge-dialog-slide-in}:host([visible]:not([animation-type=none])[animation-type=slide]) dialog.forge-dialog[open] .surface.exiting{animation-name:forge-dialog-slide-out}}@layer placement{:host([placement=custom]) .surface{margin:0;top:var(--_dialog-position-x);left:var(--_dialog-position-y)}:host([placement=top]) .surface{--_dialog-block-start-spacing:var(--forge-dialog-block-start-spacing, 0);top:0;bottom:auto}:host([placement=top-right]) .surface{--_dialog-spacing:var(--forge-dialog-spacing, 0);top:0;left:auto;right:0;bottom:auto}:host([placement=top-left]) .surface{--_dialog-spacing:var(--forge-dialog-spacing, 0);top:0;left:0;right:auto;bottom:auto}:host([placement=bottom]) .surface{--_dialog-block-end-spacing:var(--forge-dialog-block-end-spacing, 0);top:auto;bottom:0}:host([placement=bottom-right]) .surface{--_dialog-spacing:var(--forge-dialog-spacing, 0);top:auto;left:auto;right:0;bottom:0}:host([placement=bottom-left]) .surface{--_dialog-spacing:var(--forge-dialog-spacing, 0);top:auto;left:0;right:auto;bottom:0}}@layer size-strategy{:host([size-strategy=container-inline]) .surface{width:100%}:host([size-strategy=container-block]) .surface{height:100%}}@layer preset{:host([visible]:not([animation-type=none]):is([preset=left-sheet],[preset=right-sheet],[preset=top-sheet],[preset=bottom-sheet])) .forge-dialog{--_dialog-enter-animation-duration:var(--_dialog-preset-sheet-enter-animation-duration);--_dialog-exit-animation-duration:var(--_dialog-preset-sheet-exit-animation-duration)}:host([visible]:not([animation-type=none]):is([preset=left-sheet],[preset=right-sheet],[preset=top-sheet],[preset=bottom-sheet])) .surface{animation-name:forge-dialog-slide-in}:host([visible]:not([animation-type=none]):is([preset=left-sheet],[preset=right-sheet],[preset=top-sheet],[preset=bottom-sheet])) .surface.exiting{animation-name:forge-dialog-slide-out}:host(:is([preset=left-sheet],[preset=right-sheet],[preset=top-sheet],[preset=bottom-sheet])) .surface{--_dialog-max-width:var(--forge-dialog-max-width, none);--_dialog-max-height:var(--forge-dialog-max-height, none);inset:auto;display:inline-flex}:host([preset=left-sheet]) .forge-dialog{--_dialog-slide-translate:var(--forge-dialog-slide-translate, -100% 0)}:host([preset=left-sheet]) .surface{left:0;bottom:0;top:0;height:100%;border-top-left-radius:0;border-bottom-left-radius:0}:host([preset=right-sheet]) .forge-dialog{--_dialog-slide-translate:var(--forge-dialog-slide-translate, 100% 0)}:host([preset=right-sheet]) .surface{right:0;bottom:0;top:0;height:100%;border-top-right-radius:0;border-bottom-right-radius:0}:host([preset=top-sheet]) .forge-dialog{--_dialog-slide-translate:var(--forge-dialog-slide-translate, 0 -100%)}:host([preset=top-sheet]) .surface{top:0;left:0;right:0;border-top-left-radius:0;border-top-right-radius:0}:host([preset=bottom-sheet]) .forge-dialog{--_dialog-slide-translate:var(--forge-dialog-slide-translate, 0 100%)}:host([preset=bottom-sheet]) .surface{bottom:0;left:0;right:0;border-bottom-left-radius:0;border-bottom-right-radius:0}}@layer fullscreen{:host([fullscreen]) .forge-dialog{--_dialog-enter-animation-duration:var(--_dialog-fullscreen-enter-animation-duration);--_dialog-exit-animation-duration:var(--_dialog-fullscreen-exit-animation-duration)}:host([fullscreen]) .surface{height:100%;width:100%;max-width:none;max-height:none;border-radius:0;box-shadow:none}:host([fullscreen]) forge-backdrop{display:none}}@layer position-strategy{:host([position-strategy=viewport]) .forge-dialog{position:fixed}:host([position-strategy=container]) .forge-dialog{position:absolute}:host([position-strategy=container][preset$=-sheet]) .forge-dialog{contain:content}}@layer media{@media (prefers-reduced-motion:reduce){.surface{animation-name:forge-dialog-fade-in}.surface.exiting{animation-name:forge-dialog-fade-out}}}';
|
|
19
19
|
/**
|
|
@@ -10,7 +10,7 @@ import { ExpansionPanelAdapter } from './expansion-panel-adapter';
|
|
|
10
10
|
import { EXPANSION_PANEL_CONSTANTS, emulateUserToggle } from './expansion-panel-constants';
|
|
11
11
|
import { ExpansionPanelCore } from './expansion-panel-core';
|
|
12
12
|
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>';
|
|
13
|
-
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}';
|
|
13
|
+
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;transform:translate3d(0,0,0);backface-visibility:hidden}.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}';
|
|
14
14
|
/**
|
|
15
15
|
* @tag forge-expansion-panel
|
|
16
16
|
*
|
package/esm/field/field.js
CHANGED
|
@@ -11,7 +11,7 @@ import { FieldAdapter } from './field-adapter';
|
|
|
11
11
|
import { FIELD_CONSTANTS } from './field-constants';
|
|
12
12
|
import { FieldCore } from './field-core';
|
|
13
13
|
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\" aria-hidden=\"true\"><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>';
|
|
14
|
-
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 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-short2, 100ms));--_field-floating-animation-timing:var(--forge-field-floating-animation-timing, var(--forge-animation-easing-linear, cubic-bezier(0, 0, 1, 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:fixed;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%;min-inline-size:0;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:fixed;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 ::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]))[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]))[float-label][multiline]) .has-label ::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: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)!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:\"\"}:host([multiline]:where([label-position=inset],:not([label-position]))[float-label]:not(:where([density=extra-small],[dense]))) .forge-field:not(.has-label) .label::after{display:none}.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;padding-block-start:0;padding-block-end:0;transition:padding-block var(--_field-floating-animation-duration) var(--_field-floating-animation-timing);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)) + (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)}: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)}}';
|
|
14
|
+
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 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-short2, 100ms));--_field-floating-animation-timing:var(--forge-field-floating-animation-timing, var(--forge-animation-easing-linear, cubic-bezier(0, 0, 1, 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:fixed;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([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(.container:hover){--_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(: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%;min-inline-size:0;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:fixed;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 ::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]))[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]))[float-label][multiline]) .has-label ::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: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)!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:\"\"}:host([multiline]:where([label-position=inset],:not([label-position]))[float-label]:not(:where([density=extra-small],[dense]))) .forge-field:not(.has-label) .label::after{display:none}.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;padding-block-start:0;padding-block-end:0;transition:padding-block var(--_field-floating-animation-duration) var(--_field-floating-animation-timing);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)}.forge-field ::slotted(:where([slot=support-text],[slot=helper-text])){display:block;min-height:.875rem}: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)) + (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)}: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)}}';
|
|
15
15
|
/**
|
|
16
16
|
* @tag forge-field
|
|
17
17
|
*
|
|
@@ -13,7 +13,7 @@ import { SplitViewPanelCore } from './split-view-panel-core';
|
|
|
13
13
|
import { SplitViewPanelAdapter } from './split-view-panel-adapter';
|
|
14
14
|
import { IconComponent, IconRegistry } from '../../icon';
|
|
15
15
|
const template = '<template><div class=\"forge-split-view-panel\" id=\"root\" part=\"root\"><div class=\"forge-split-view-panel__handle\" id=\"handle\" part=\"handle\" role=\"separator\" aria-controls=\"content\" aria-grabbed=\"false\" tabindex=\"0\"><forge-icon class=\"forge-split-view-panel__icon\" id=\"icon\" part=\"icon\"></forge-icon><forge-state-layer target=\"handle\" id=\"state-layer\" exportparts=\"surface:state-layer\"></forge-state-layer><forge-focus-indicator inward target=\"handle\" part=\"focus-indicator\"></forge-focus-indicator></div><div class=\"forge-split-view-panel__content\" id=\"content\" part=\"content\" role=\"group\"><slot></slot></div></div></template>';
|
|
16
|
-
const styles = '.forge-split-view-panel{display:flex;width:100%;height:100%;overflow:hidden}.forge-split-view-panel__handle{color:var(--forge-theme-text-medium,rgba(0,0,0,.6));background-color:var(--forge-theme-outline,#e0e0e0);position:relative;display:flex;flex-shrink:0;justify-content:center;align-items:center;outline:0}.forge-split-view-panel__content{flex:1;overflow:hidden}.forge-split-view-panel--closed{display:none}.forge-split-view-panel--disabled #handle{pointer-events:none}.forge-split-view-panel--disabled .forge-split-view-panel__icon{display:none}.forge-split-view-panel[orientation=horizontal]{min-width:var(--forge-split-view-handle-width,8px);width:calc(var(--forge-split-view-panel-size,unset) + var(--forge-split-view-handle-width,8px));flex-direction:row}.forge-split-view-panel[orientation=horizontal] .forge-split-view-panel__handle{width:var(--forge-split-view-handle-width,8px);cursor:var(--forge-split-view-panel-cursor)}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--closing[resizable=end]{position:absolute;top:0;left:0;animation-name:
|
|
16
|
+
const styles = '.forge-split-view-panel{display:flex;width:100%;height:100%;overflow:hidden}.forge-split-view-panel__handle{color:var(--forge-theme-text-medium,rgba(0,0,0,.6));background-color:var(--forge-theme-outline,#e0e0e0);position:relative;display:flex;flex-shrink:0;justify-content:center;align-items:center;outline:0}.forge-split-view-panel__content{flex:1;overflow:hidden}.forge-split-view-panel--closed{display:none}.forge-split-view-panel--disabled #handle{pointer-events:none}.forge-split-view-panel--disabled .forge-split-view-panel__icon{display:none}.forge-split-view-panel[orientation=horizontal]{min-width:var(--forge-split-view-handle-width,8px);width:calc(var(--forge-split-view-panel-size,unset) + var(--forge-split-view-handle-width,8px));flex-direction:row}.forge-split-view-panel[orientation=horizontal] .forge-split-view-panel__handle{width:var(--forge-split-view-handle-width,8px);cursor:var(--forge-split-view-panel-cursor)}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--closing[resizable=end]{position:absolute;top:0;left:0;animation-name:udvzwcb;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes udvzwcb{from{transform:none}to{transform:translateX(-100%)}}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--closing[resizable=start]{position:absolute;top:0;right:0;animation-name:udvzwcy;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes udvzwcy{from{transform:none}to{transform:translateX(100%)}}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--opening[resizable=end]{position:absolute;top:0;left:0;animation-name:udvzwdl;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1));animation-direction:reverse}@keyframes udvzwdl{from{transform:none}to{transform:translateX(-100%)}}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--opening[resizable=start]{position:absolute;top:0;right:0;animation-name:udvzwdu;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1));animation-direction:reverse}@keyframes udvzwdu{from{transform:none}to{transform:translateX(100%)}}.forge-split-view-panel[orientation=vertical]{min-height:var(--forge-split-view-handle-width,8px);height:calc(var(--forge-split-view-panel-size,unset) + var(--forge-split-view-handle-width,8px));flex-direction:column}.forge-split-view-panel[orientation=vertical] .forge-split-view-panel__handle{height:var(--forge-split-view-handle-width,8px);cursor:var(--forge-split-view-panel-cursor)}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--closing[resizable=end]{position:absolute;top:0;left:0;animation-name:udvzwej;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes udvzwej{from{transform:none}to{transform:translateY(-100%)}}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--closing[resizable=start]{position:absolute;bottom:0;left:0;animation-name:udvzwfg;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes udvzwfg{from{transform:none}to{transform:translateY(100%)}}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--opening[resizable=end]{position:absolute;top:0;left:0;animation-name:udvzwfh;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1));animation-direction:reverse}@keyframes udvzwfh{from{transform:none}to{transform:translateY(-100%)}}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--opening[resizable=start]{position:absolute;bottom:0;left:0;animation-name:udvzwfx;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1));animation-direction:reverse}@keyframes udvzwfx{from{transform:none}to{transform:translateY(100%)}}:host{z-index:var(--forge-split-view-animating-layer)!important;display:block;position:relative;height:100%;width:100%;flex:0}:host([hidden]){display:none}:host(:not([resizable=start],[resizable=end])){flex:1}:host(:not([resizable=start],[resizable=end])) .forge-split-view-panel{width:100%;height:100%;min-width:0;min-height:0}:host(:not([resizable=start],[resizable=end])) .forge-split-view-panel__handle{display:none}forge-focus-indicator{--forge-focus-indicator-active-width:2px}';
|
|
17
17
|
import { StateLayerComponent } from '../../state-layer';
|
|
18
18
|
import { FocusIndicatorComponent } from '../../focus-indicator';
|
|
19
19
|
/**
|
package/package.json
CHANGED
package/sass/field/field.scss
CHANGED
|
@@ -13,7 +13,6 @@
|
|
|
13
13
|
@use './token-utils' as *;
|
|
14
14
|
|
|
15
15
|
$focus: ':not([disabled]):focus-within';
|
|
16
|
-
$hover: ':not([disabled]):hover';
|
|
17
16
|
$invalid: ':not([disabled])[invalid]';
|
|
18
17
|
|
|
19
18
|
$first-slotted-element: '::slotted(:is([data-forge-field-input], *:first-of-type:is(input, textarea)))';
|
|
@@ -163,12 +162,6 @@ $variants: (
|
|
|
163
162
|
// State
|
|
164
163
|
//
|
|
165
164
|
|
|
166
|
-
:host(#{$hover}) {
|
|
167
|
-
.forge-field {
|
|
168
|
-
@include core.hover;
|
|
169
|
-
}
|
|
170
|
-
}
|
|
171
|
-
|
|
172
165
|
:host([disabled]) {
|
|
173
166
|
.forge-field {
|
|
174
167
|
@include core.disabled;
|
|
@@ -187,6 +180,10 @@ $variants: (
|
|
|
187
180
|
}
|
|
188
181
|
|
|
189
182
|
:host(:not([disabled])) {
|
|
183
|
+
.forge-field:has(.container:hover) {
|
|
184
|
+
@include core.hover;
|
|
185
|
+
}
|
|
186
|
+
|
|
190
187
|
.forge-field:has(.input:focus-within) {
|
|
191
188
|
@include core.focus;
|
|
192
189
|
}
|
|
@@ -602,6 +599,10 @@ $variants: (
|
|
|
602
599
|
@include core.item-padding(end, inner);
|
|
603
600
|
}
|
|
604
601
|
}
|
|
602
|
+
|
|
603
|
+
::slotted(:where([slot='support-text'], [slot='helper-text'])) {
|
|
604
|
+
@include core.slotted-support-text;
|
|
605
|
+
}
|
|
605
606
|
}
|
|
606
607
|
|
|
607
608
|
/* Add padding between the end and accessory elements in the plain variant */
|