@tylertech/forge 3.9.1 → 3.10.0
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/custom-elements.json +183 -25
- package/dist/badge/forge-badge.css +1 -1
- package/dist/forge.css +0 -1
- package/dist/lib.js +22 -22
- package/dist/lib.js.map +3 -3
- package/dist/table/forge-table.css +0 -1
- package/dist/vscode.html-custom-data.json +20 -0
- package/esm/autocomplete/autocomplete-core.js +9 -12
- package/esm/autocomplete/autocomplete-utils.js +3 -2
- package/esm/badge/badge.js +1 -1
- package/esm/button/base/base-button-adapter.js +6 -5
- package/esm/button/base/base-button-constants.d.ts +2 -2
- package/esm/button-area/button-area-adapter.d.ts +0 -2
- package/esm/button-area/button-area-adapter.js +5 -3
- package/esm/button-area/button-area-core.js +0 -1
- package/esm/button-area/button-area.js +1 -1
- package/esm/button-toggle/button-toggle-group/button-toggle-group-core.js +0 -1
- package/esm/calendar/calendar-core.js +6 -4
- package/esm/calendar/calendar-dropdown/calendar-dropdown.js +1 -1
- package/esm/calendar/calendar-utils.js +1 -3
- package/esm/calendar/calendar.js +1 -1
- package/esm/color-picker/color-picker-core.js +2 -2
- package/esm/core/configuration/global-configuration.js +0 -1
- package/esm/core/mask/date-input-mask.js +18 -1
- package/esm/core/mixins/form/with-form-associated.js +6 -2
- package/esm/core/utils/a11y-utils.d.ts +2 -2
- package/esm/core/utils/date-utils.d.ts +14 -5
- package/esm/core/utils/date-utils.js +229 -70
- package/esm/core/utils/dismissible-stack.js +0 -1
- package/esm/core/utils/feature-detection.js +2 -2
- package/esm/date-picker/base/base-date-picker-adapter.d.ts +2 -1
- package/esm/date-picker/base/base-date-picker-adapter.js +4 -0
- package/esm/date-picker/base/base-date-picker-constants.d.ts +19 -4
- package/esm/date-picker/base/base-date-picker-constants.js +20 -1
- package/esm/date-picker/base/base-date-picker-core.d.ts +11 -3
- package/esm/date-picker/base/base-date-picker-core.js +70 -17
- package/esm/date-picker/base/base-date-picker-utils.d.ts +2 -1
- package/esm/date-picker/base/base-date-picker.d.ts +10 -2
- package/esm/date-picker/base/base-date-picker.js +17 -1
- package/esm/date-picker/date-picker-adapter.js +1 -1
- package/esm/date-picker/date-picker-core.js +3 -2
- package/esm/date-range-picker/date-range-picker-adapter.d.ts +2 -1
- package/esm/date-range-picker/date-range-picker-adapter.js +1 -1
- package/esm/date-range-picker/date-range-picker-core.d.ts +1 -0
- package/esm/date-range-picker/date-range-picker-core.js +18 -9
- package/esm/deprecated/icon-button/deprecated-icon-button-component-delegate.js +2 -1
- package/esm/dialog/dialog.js +1 -1
- package/esm/expansion-panel/expansion-panel-core.d.ts +4 -0
- package/esm/expansion-panel/expansion-panel-core.js +19 -11
- package/esm/field/field-core.js +2 -1
- package/esm/field/field.js +1 -1
- package/esm/file-picker/file-picker-core.js +1 -3
- package/esm/floating-action-button/floating-action-button-adapter.d.ts +0 -4
- package/esm/floating-action-button/floating-action-button-adapter.js +3 -24
- package/esm/floating-action-button/floating-action-button-component-delegate.js +2 -1
- package/esm/floating-action-button/floating-action-button-core.d.ts +0 -1
- package/esm/floating-action-button/floating-action-button-core.js +0 -3
- package/esm/floating-action-button/floating-action-button.d.ts +0 -1
- package/esm/floating-action-button/floating-action-button.js +0 -3
- package/esm/icon/icon-core.js +1 -1
- package/esm/icon/icon-registry.js +1 -1
- package/esm/icon-button/icon-button-component-delegate.js +2 -1
- package/esm/label/label-aware.js +1 -3
- package/esm/list/list/list.js +1 -1
- package/esm/list/list-item/list-item.js +1 -1
- package/esm/list-dropdown/list-dropdown-core.js +4 -2
- package/esm/list-dropdown/list-dropdown-utils.js +5 -2
- package/esm/menu/menu-core.js +5 -6
- package/esm/overlay/overlay-constants.d.ts +1 -1
- package/esm/overlay/overlay-constants.js +1 -1
- package/esm/overlay/overlay.d.ts +2 -2
- package/esm/overlay/overlay.js +2 -2
- package/esm/select/core/base-select-adapter.js +0 -1
- package/esm/select/core/base-select-core.js +70 -74
- package/esm/select/core/select-utils.d.ts +1 -1
- package/esm/select/core/select-utils.js +2 -2
- package/esm/select/select-dropdown/select-dropdown-adapter.js +1 -3
- package/esm/split-view/split-view-panel/split-view-panel.js +1 -1
- package/esm/table/table-utils.js +10 -12
- package/esm/tabs/tab-bar/tab-bar-core.js +2 -1
- package/esm/text-field/text-field-adapter.js +1 -3
- package/esm/time-picker/time-picker-core.js +5 -5
- package/esm/toast/toast-adapter.js +1 -1
- package/esm/toast/toast-core.js +1 -1
- package/esm/toast/toast.js +2 -1
- package/esm/tooltip/tooltip.js +1 -1
- package/esm/view-switcher/view-switcher-core.js +2 -1
- package/package.json +1 -1
- package/sass/core/styles/tokens/badge/_tokens.scss +1 -1
- package/sass/list/list/list.scss +4 -2
- package/sass/list/list-item/list-item.scss +3 -1
- package/sass/table/forge-table.scss +0 -1
- package/sass/utils/_mixins.scss +7 -8
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\" part=\"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, auto);--_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]) .has-label .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)}}';
|
|
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, auto);--_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{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0}: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]) .has-label .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{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0}: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
|
*
|
|
@@ -99,9 +99,7 @@ export class FilePickerCore {
|
|
|
99
99
|
const formats = this._accept ? this._accept.split(',').map(f => f.trim().toLowerCase()) : [''];
|
|
100
100
|
// eslint-disable-next-line @typescript-eslint/prefer-for-of
|
|
101
101
|
for (let i = 0; i < files.length; i++) {
|
|
102
|
-
if (!formats.some(f =>
|
|
103
|
-
return files[i].type.toLowerCase().match(f) || files[i].name.toLowerCase().match('\\' + f);
|
|
104
|
-
}) ||
|
|
102
|
+
if (!formats.some(f => files[i].type.toLowerCase().match(f) || files[i].name.toLowerCase().match('\\' + f)) ||
|
|
105
103
|
(this._maxSize && files[i].size > this._maxSize)) {
|
|
106
104
|
illegalFiles.push(files[i]);
|
|
107
105
|
}
|
|
@@ -6,15 +6,11 @@
|
|
|
6
6
|
import { BaseButtonAdapter, IBaseButtonAdapter } from '../button/base/base-button-adapter';
|
|
7
7
|
import { IFloatingActionButtonComponent } from './floating-action-button';
|
|
8
8
|
export interface IFloatingActionButtonAdapter extends IBaseButtonAdapter<IFloatingActionButtonComponent> {
|
|
9
|
-
destroy(): void;
|
|
10
9
|
}
|
|
11
10
|
export declare class FloatingActionButtonAdapter extends BaseButtonAdapter<IFloatingActionButtonComponent> implements IFloatingActionButtonAdapter {
|
|
12
11
|
private _labelSlotElement;
|
|
13
|
-
private _extendedObserver;
|
|
14
12
|
constructor(component: IFloatingActionButtonComponent);
|
|
15
13
|
initialize(): void;
|
|
16
|
-
destroy(): void;
|
|
17
14
|
toggleDefaultPopoverIcon(value: boolean): void;
|
|
18
|
-
private _startExtendedWatcher;
|
|
19
15
|
private _detectExtendedState;
|
|
20
16
|
}
|
|
@@ -13,36 +13,15 @@ export class FloatingActionButtonAdapter extends BaseButtonAdapter {
|
|
|
13
13
|
}
|
|
14
14
|
initialize() {
|
|
15
15
|
super.initialize();
|
|
16
|
-
|
|
17
|
-
this._startExtendedWatcher();
|
|
18
|
-
}
|
|
16
|
+
this._labelSlotElement.addEventListener('slotchange', () => this._detectExtendedState());
|
|
19
17
|
this._detectExtendedState();
|
|
20
18
|
}
|
|
21
|
-
destroy() {
|
|
22
|
-
this._extendedObserver?.disconnect();
|
|
23
|
-
this._extendedObserver = undefined;
|
|
24
|
-
}
|
|
25
19
|
toggleDefaultPopoverIcon(value) {
|
|
26
20
|
super.toggleDefaultPopoverIcon(value);
|
|
27
21
|
this._detectExtendedState();
|
|
28
22
|
}
|
|
29
|
-
_startExtendedWatcher() {
|
|
30
|
-
this._extendedObserver = new MutationObserver(() => this._detectExtendedState());
|
|
31
|
-
this._extendedObserver.observe(this._component, { childList: true, subtree: true, characterData: true });
|
|
32
|
-
}
|
|
33
23
|
_detectExtendedState() {
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
if (hasLabel) {
|
|
37
|
-
this._rootElement.classList.add(FLOATING_ACTION_BUTTON_CONSTANTS.classes.EXTENDED);
|
|
38
|
-
return;
|
|
39
|
-
}
|
|
40
|
-
// Remove the extended class first so we can compare the width without it affecting the styles
|
|
41
|
-
this._rootElement.classList.remove(FLOATING_ACTION_BUTTON_CONSTANTS.classes.EXTENDED);
|
|
42
|
-
// When the width is greater than the height, we assume the button is in the extended state
|
|
43
|
-
const isExtended = this._component.clientWidth > this._component.clientHeight;
|
|
44
|
-
if (isExtended) {
|
|
45
|
-
this._rootElement.classList.add(FLOATING_ACTION_BUTTON_CONSTANTS.classes.EXTENDED);
|
|
46
|
-
}
|
|
24
|
+
const isExtended = this._labelSlotElement.assignedNodes().length > 0 || this._component.popoverIcon;
|
|
25
|
+
this._rootElement.classList.toggle(FLOATING_ACTION_BUTTON_CONSTANTS.classes.EXTENDED, isExtended);
|
|
47
26
|
}
|
|
48
27
|
}
|
|
@@ -40,11 +40,12 @@ export class FloatingActionButtonComponentDelegate extends BaseComponentDelegate
|
|
|
40
40
|
}
|
|
41
41
|
const type = this._config.options?.iconType || 'component';
|
|
42
42
|
switch (type) {
|
|
43
|
-
case 'font':
|
|
43
|
+
case 'font': {
|
|
44
44
|
const classes = Array.isArray(this._config.options.iconClass) ? this._config.options.iconClass : [ICON_CLASS_NAME];
|
|
45
45
|
addClass(classes, this._element);
|
|
46
46
|
this._element.textContent = this._config.options.iconName;
|
|
47
47
|
break;
|
|
48
|
+
}
|
|
48
49
|
case 'component':
|
|
49
50
|
this._iconElement = document.createElement(ICON_CONSTANTS.elementName);
|
|
50
51
|
this._iconElement.name = this._config.options.iconName;
|
|
@@ -17,7 +17,6 @@ export declare class FloatingActionButtonCore extends BaseButtonCore<IFloatingAc
|
|
|
17
17
|
private _density;
|
|
18
18
|
private _elevation;
|
|
19
19
|
constructor(adapter: IFloatingActionButtonAdapter);
|
|
20
|
-
destroy(): void;
|
|
21
20
|
get theme(): ButtonTheme;
|
|
22
21
|
set theme(value: ButtonTheme);
|
|
23
22
|
get density(): FloatingActionButtonDensity;
|
|
@@ -12,9 +12,6 @@ export class FloatingActionButtonCore extends BaseButtonCore {
|
|
|
12
12
|
this._density = FLOATING_ACTION_BUTTON_CONSTANTS.defaults.DEFAULT_DENSITY;
|
|
13
13
|
this._elevation = FLOATING_ACTION_BUTTON_CONSTANTS.defaults.DEFAULT_ELEVATION;
|
|
14
14
|
}
|
|
15
|
-
destroy() {
|
|
16
|
-
this._adapter.destroy();
|
|
17
|
-
}
|
|
18
15
|
get theme() {
|
|
19
16
|
return this._theme;
|
|
20
17
|
}
|
|
@@ -84,7 +84,6 @@ export declare class FloatingActionButtonComponent extends BaseButton<FloatingAc
|
|
|
84
84
|
static get observedAttributes(): string[];
|
|
85
85
|
protected readonly _core: FloatingActionButtonCore;
|
|
86
86
|
constructor();
|
|
87
|
-
disconnectedCallback(): void;
|
|
88
87
|
attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
|
|
89
88
|
theme: ButtonTheme;
|
|
90
89
|
density: FloatingActionButtonDensity;
|
|
@@ -87,9 +87,6 @@ let FloatingActionButtonComponent = class FloatingActionButtonComponent extends
|
|
|
87
87
|
attachShadowTemplate(this, template, styles);
|
|
88
88
|
this._core = new FloatingActionButtonCore(new FloatingActionButtonAdapter(this));
|
|
89
89
|
}
|
|
90
|
-
disconnectedCallback() {
|
|
91
|
-
this._core.destroy();
|
|
92
|
-
}
|
|
93
90
|
attributeChangedCallback(name, oldValue, newValue) {
|
|
94
91
|
switch (name) {
|
|
95
92
|
case FLOATING_ACTION_BUTTON_CONSTANTS.attributes.THEME:
|
package/esm/icon/icon-core.js
CHANGED
|
@@ -136,7 +136,7 @@ export class IconCore {
|
|
|
136
136
|
set name(value) {
|
|
137
137
|
if (this._name !== value) {
|
|
138
138
|
// We need to remove our listener for the previous name if we have any
|
|
139
|
-
if (
|
|
139
|
+
if (this._registrationListener) {
|
|
140
140
|
this._tryRemoveListener();
|
|
141
141
|
}
|
|
142
142
|
this._name = (value || '').replace(/\s+/, '');
|
|
@@ -99,7 +99,7 @@ export class IconRegistry {
|
|
|
99
99
|
}
|
|
100
100
|
/** Determines if the provided `icon` matches the `IIcon` shape. */
|
|
101
101
|
static _isIconObject(icon) {
|
|
102
|
-
return typeof icon === 'object' &&
|
|
102
|
+
return typeof icon === 'object' && Object.prototype.hasOwnProperty.call(icon, 'name') && Object.prototype.hasOwnProperty.call(icon, 'data');
|
|
103
103
|
}
|
|
104
104
|
}
|
|
105
105
|
IconRegistry._listeners = new Map();
|
|
@@ -42,11 +42,12 @@ export class IconButtonComponentDelegate extends BaseComponentDelegate {
|
|
|
42
42
|
}
|
|
43
43
|
const type = this._config.options?.iconType || 'component';
|
|
44
44
|
switch (type) {
|
|
45
|
-
case 'font':
|
|
45
|
+
case 'font': {
|
|
46
46
|
const classes = Array.isArray(this._config.options.iconClass) ? this._config.options.iconClass : [ICON_CLASS_NAME];
|
|
47
47
|
addClass(classes, this._element);
|
|
48
48
|
this._element.textContent = this._config.options.iconName;
|
|
49
49
|
break;
|
|
50
|
+
}
|
|
50
51
|
case 'component':
|
|
51
52
|
this._iconElement = document.createElement(ICON_CONSTANTS.elementName);
|
|
52
53
|
this._iconElement.name = this._config.options.iconName;
|
package/esm/label/label-aware.js
CHANGED
|
@@ -9,6 +9,4 @@
|
|
|
9
9
|
* @param obj - The object to check.
|
|
10
10
|
* @returns True if the object is label aware, false otherwise.
|
|
11
11
|
*/
|
|
12
|
-
export const isLabelAware = (obj) =>
|
|
13
|
-
return typeof obj.labelChangedCallback === 'function';
|
|
14
|
-
};
|
|
12
|
+
export const isLabelAware = (obj) => typeof obj.labelChangedCallback === 'function';
|
package/esm/list/list/list.js
CHANGED
|
@@ -14,7 +14,7 @@ import { setDefaultAria } from '../../constants';
|
|
|
14
14
|
import { WithElementInternals } from '../../core/mixins/internals/with-element-internals';
|
|
15
15
|
import { WithDefaultAria } from '../../core/mixins/internals/with-default-aria';
|
|
16
16
|
const template = '<template><div class=\"forge-list\" part=\"root\"><div class=\"inner\"><slot></slot></div></div></template>';
|
|
17
|
-
const styles = ':host{--_list-navlist-spacing:var(--forge-list-navlist-spacing, var(--forge-spacing-xxsmall, 4px));--_list-navlist-margin:var(--forge-list-navlist-margin, var(--forge-spacing-xxsmall, 4px) var(--forge-spacing-xsmall, 8px));--_list-navlist-height:var(--forge-list-navlist-height, 40px);--_list-navlist-padding:var(--forge-list-navlist-padding, 0 var(--forge-spacing-xsmall, 8px));--_list-navlist-shape:var(--forge-list-navlist-shape, calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1)));--_list-navlist-font-size:var(--forge-list-navlist-font-size, calc(var(--forge-typography-font-size, 1rem) * 0.875));--_list-navlist-font-weight:var(--forge-list-navlist-font-weight, 500)}:host{display:block}:host([hidden]){display:none}:host([navlist]){
|
|
17
|
+
const styles = ':host{--_list-navlist-spacing:var(--forge-list-navlist-spacing, var(--forge-spacing-xxsmall, 4px));--_list-navlist-margin:var(--forge-list-navlist-margin, var(--forge-spacing-xxsmall, 4px) var(--forge-spacing-xsmall, 8px));--_list-navlist-height:var(--forge-list-navlist-height, 40px);--_list-navlist-padding:var(--forge-list-navlist-padding, 0 var(--forge-spacing-xsmall, 8px));--_list-navlist-shape:var(--forge-list-navlist-shape, calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1)));--_list-navlist-font-size:var(--forge-list-navlist-font-size, calc(var(--forge-typography-font-size, 1rem) * 0.875));--_list-navlist-font-weight:var(--forge-list-navlist-font-weight, 500)}:host{display:block}:host([hidden]){display:none}:host([navlist]){--forge-list-item-height:var(--_list-navlist-height);--forge-list-item-margin:var(--_list-navlist-margin);--forge-list-item-padding:var(--_list-navlist-padding);--forge-list-item-shape:var(--_list-navlist-shape);--forge-list-item-text-font-size:var(--_list-navlist-font-size);--forge-list-item-text-font-weight:var(--_list-navlist-font-weight)}:host([navlist]) .forge-list{margin-block:var(--_list-navlist-spacing)}.forge-list{--_list-spacing:var(--forge-list-spacing, 0);--_list-container-color:var(--forge-list-container-color, transparent)}.forge-list{outline:0;background-color:var(--_list-container-color);margin:0;border-radius:inherit;min-width:inherit}.inner{display:grid;gap:var(--_list-spacing);min-width:0}.inner ::slotted(*){min-width:0}';
|
|
18
18
|
/**
|
|
19
19
|
* @tag forge-list
|
|
20
20
|
*
|
|
@@ -14,7 +14,7 @@ import { WithElementInternals } from '../../core/mixins/internals/with-element-i
|
|
|
14
14
|
import { WithDefaultAria } from '../../core/mixins/internals/with-default-aria';
|
|
15
15
|
import { BaseComponent } from '../../core/base/base-component';
|
|
16
16
|
const template = '<template><div class=\"forge-list-item\" part=\"root\"><slot name=\"start\"><slot name=\"leading\"></slot></slot><div class=\"text-container\" part=\"text-container\"><slot></slot><slot name=\"secondary-text\"></slot><slot name=\"tertiary-text\"></slot></div><slot name=\"end\"><slot name=\"trailing\"></slot></slot></div></template>';
|
|
17
|
-
const styles = ':host{--_list-item-indent:var(--forge-list-item-indent, var(--forge-spacing-xxlarge, 48px));--_list-item-dense-indent:var(--forge-list-item-dense-indent, var(--forge-spacing-xxlarge, 48px));--_list-item-disabled-cursor:var(--forge-list-item-disabled-cursor, not-allowed)}:host{display:block;outline:0}:host([hidden]){display:none}.forge-list-item{--_list-item-background:var(--forge-list-item-background, transparent);--_list-item-shape:var(--forge-list-item-shape, 0);--_list-item-padding:var(--forge-list-item-padding, 0 var(--forge-spacing-medium, 16px));--_list-item-margin:var(--forge-list-item-margin, 0);--_list-item-height:var(--forge-list-item-height, 48px);--_list-item-dense-height:var(--forge-list-item-dense-height, 32px);--_list-item-cursor:var(--forge-list-item-cursor, pointer);--_list-item-gap:var(--forge-list-item-gap, var(--forge-spacing-large, 24px));--_list-item-text-color:var(--forge-list-item-text-color, var(--forge-theme-text-medium, rgba(0, 0, 0, 0.6)));--_list-item-text-font-size:var(--forge-list-item-text-font-size, var(--forge-typography-body2-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-font-size-scale, 1))));--_list-item-text-font-weight:var(--forge-list-item-text-font-weight, var(--forge-typography-body2-font-weight, 400));--_list-item-text-line-height:var(--forge-list-item-text-line-height, 1.5rem);--_list-item-selected-color:var(--forge-list-item-selected-color, var(--forge-theme-primary, #3f51b5));--_list-item-selected-background:var(--forge-list-item-selected-background, var(--_list-item-selected-color));--_list-item-selected-opacity:var(--forge-list-item-selected-opacity, 0.08);--_list-item-selected-start-color:var(--forge-list-item-selected-start-color, var(--_list-item-selected-color));--_list-item-selected-end-color:var(--forge-list-item-selected-end-color, var(--_list-item-selected-color));--_list-item-selected-text-color:var(--forge-list-item-selected-text-color, var(--forge-theme-text-medium, rgba(0, 0, 0, 0.6)));--_list-item-disabled-opacity:var(--forge-list-item-disabled-opacity, 0.38);--_list-item-one-line-height:var(--forge-list-item-one-line-height, var(--_list-item-height));--_list-item-two-line-height:var(--forge-list-item-two-line-height, var(--forge-list-item-height, 72px));--_list-item-three-line-height:var(--forge-list-item-three-line-height, var(--forge-list-item-height, 88px));--_list-item-dense-one-line-height:var(--forge-list-item-dense-one-line-height, var(--_list-item-dense-height));--_list-item-dense-two-line-height:var(--forge-list-item-dense-two-line-height, var(--forge-list-item-dense-height, 56px));--_list-item-dense-three-line-height:var(--forge-list-item-dense-three-line-height, var(--forge-list-item-dense-height, 72px));--_list-item-dense-font-size:var(--forge-list-item-dense-font-size, 0.875rem);--_list-item-dense-gap:var(--forge-list-item-dense-gap, var(--forge-spacing-xsmall, 8px));--_list-item-start-selected-color:var(--forge-list-item-start-selected-color, var(--_list-item-selected-color));--_list-item-end-selected-color:var(--forge-list-item-end-selected-color, var(--_list-item-selected-color));--_list-item-wrap-padding:var(--forge-list-item-wrap-padding, var(--forge-spacing-xsmall, 8px) var(--forge-spacing-medium, 16px))}.forge-list-item{position:relative;display:flex;gap:var(--_list-item-gap);align-items:center;box-sizing:border-box;outline:0;text-decoration:none;border-radius:var(--_list-item-shape);-webkit-tap-highlight-color:transparent;background-color:var(--_list-item-background);height:var(--_list-item-height);min-height:var(--_list-item-height);padding:var(--_list-item-padding);margin:var(--_list-item-margin)}.forge-list-item.interactive{cursor:var(--_list-item-cursor)}.forge-list-item.disabled{cursor:var(--_list-item-disabled-cursor);opacity:var(--_list-item-disabled-opacity)}.forge-list-item.disabled ::slotted(button){cursor:var(--_list-item-disabled-cursor)}.anchor{position:absolute;inset:0}:host([two-line]) .forge-list-item{height:var(--_list-item-two-line-height);min-height:var(--_list-item-two-line-height)}:host([three-line]) .forge-list-item{height:var(--_list-item-three-line-height);min-height:var(--_list-item-three-line-height)}:host([dense]) .forge-list-item{--_list-item-gap:var(--_list-item-dense-gap);height:var(--_list-item-dense-one-line-height);min-height:var(--_list-item-dense-one-line-height)}:host([dense]) .text-container{font-size:var(--_list-item-dense-font-size)}:host([dense][indented]){margin-inline-start:var(--_list-item-dense-indent)}:host([dense][two-line]) .forge-list-item{height:var(--_list-item-dense-two-line-height);min-height:var(--_list-item-dense-two-line-height)}:host([dense][three-line]) .forge-list-item{height:var(--_list-item-dense-three-line-height);min-height:var(--_list-item-dense-three-line-height)}:host([selected]) .forge-list-item{color:var(--_list-item-selected-color)}:host([selected]) .forge-list-item::before{content:\"\";position:absolute;inset:0;border-radius:inherit;opacity:var(--_list-item-selected-opacity);background-color:var(--_list-item-selected-background);pointer-events:none}:host([selected]) .forge-list-item ::slotted([slot=end]),:host([selected]) .forge-list-item ::slotted([slot=leading]),:host([selected]) .forge-list-item ::slotted([slot=start]),:host([selected]) .forge-list-item ::slotted([slot=trailing]){color:var(--_list-item-selected-color);isolation:isolate}:host([selected]) .forge-list-item ::slotted([slot=leading]),:host([selected]) .forge-list-item ::slotted([slot=start]){color:var(--_list-item-start-selected-color)}:host([selected]) .forge-list-item ::slotted([slot=end]),:host([selected]) .forge-list-item ::slotted([slot=trailing]){color:var(--_list-item-end-selected-color)}:host([selected]) .text-container{color:var(--_list-item-selected-color)}:host([selected]) forge-state-layer{--forge-state-layer-color:var(--_list-item-selected-color)}:host([indented]){margin-inline-start:var(--_list-item-indent)}.text-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));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);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box;isolation:isolate;font-size:var(--_list-item-text-font-size);font-weight:var(--_list-item-text-font-weight);line-height:var(--_list-item-text-line-height);flex:1;contain:layout}slot[name=secondary-text]::slotted(*),slot[name=tertiary-text]::slotted(*){-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-body1-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-body1-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-font-size-scale, .875)));font-weight:var(--forge-typography-body1-font-weight,400);line-height:var(--forge-typography-body1-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-line-height-scale, 1.125)));letter-spacing:var(--forge-typography-body1-letter-spacing, .0357142857em);text-transform:var(--forge-typography-body1-text-transform,inherit);text-decoration:var(--forge-typography-body1-text-decoration,inherit);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--_list-item-text-color);display:block}:host([selected]) slot[name=secondary-text]::slotted(*),:host([selected]) slot[name=tertiary-text]::slotted(*){color:var(--_list-item-selected-text-color)}::slotted(:is(button:not([slot]),[forge-list-item-button])){appearance:none;cursor:var(--_list-item-cursor);border:none;padding-block:0;padding-inline:0;margin:0;box-sizing:border-box;width:100%;background:0 0;color:inherit;outline:0;font:inherit;user-select:auto;text-align:inherit;letter-spacing:inherit;word-spacing:inherit;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;display:block}::slotted(a){outline:0;color:inherit!important;text-decoration:none!important}::slotted([slot=end]),::slotted([slot=leading]),::slotted([slot=start]),::slotted([slot=trailing]){color:var(--_list-item-text-color);display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;fill:currentColor}:host(:not([noninteractive])) ::slotted(:is(forge-checkbox,forge-radio,forge-switch):is([slot=start],[slot=end],[slot=leading],[slot=trailing]):not([forge-ignore])){--forge-focus-indicator-display:none;--forge-state-layer-display:none}:host([selected]) ::slotted([slot=leading]),:host([selected]) ::slotted([slot=start]){color:var(--_list-item-start-selected-color)}:host([selected]) ::slotted([slot=end]),:host([selected]) ::slotted([slot=trailing]){color:var(--_list-item-end-selected-color)}:host([wrap]) .forge-list-item{--_list-item-padding:var(--_list-item-wrap-padding);height:auto}:host([wrap]) .text-container{white-space:normal;overflow:visible;text-overflow:clip;line-height:normal}:host([wrap]) ::slotted(:is(button,[role=button][tabindex],[forge-list-item-button])){white-space:normal}:host([wrap]) slot[name=secondary-text]::slotted(*),:host([wrap]) slot[name=tertiary-text]::slotted(*){white-space:normal;overflow:visible;text-overflow:clip;line-height:normal}forge-focus-indicator{z-index:1;--forge-focus-indicator-shape:calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1))}forge-state-layer{border-radius:inherit}';
|
|
17
|
+
const styles = ':host{--_list-item-indent:var(--forge-list-item-indent, var(--forge-spacing-xxlarge, 48px));--_list-item-dense-indent:var(--forge-list-item-dense-indent, var(--forge-spacing-xxlarge, 48px));--_list-item-disabled-cursor:var(--forge-list-item-disabled-cursor, not-allowed)}:host{display:block;outline:0}:host([hidden]){display:none}.forge-list-item{--_list-item-background:var(--forge-list-item-background, transparent);--_list-item-shape:var(--forge-list-item-shape, 0);--_list-item-padding:var(--forge-list-item-padding, 0 var(--forge-spacing-medium, 16px));--_list-item-margin:var(--forge-list-item-margin, 0);--_list-item-height:var(--forge-list-item-height, 48px);--_list-item-dense-height:var(--forge-list-item-dense-height, 32px);--_list-item-cursor:var(--forge-list-item-cursor, pointer);--_list-item-gap:var(--forge-list-item-gap, var(--forge-spacing-large, 24px));--_list-item-text-color:var(--forge-list-item-text-color, var(--forge-theme-text-medium, rgba(0, 0, 0, 0.6)));--_list-item-text-font-size:var(--forge-list-item-text-font-size, var(--forge-typography-body2-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-font-size-scale, 1))));--_list-item-text-font-weight:var(--forge-list-item-text-font-weight, var(--forge-typography-body2-font-weight, 400));--_list-item-text-line-height:var(--forge-list-item-text-line-height, 1.5rem);--_list-item-selected-color:var(--forge-list-item-selected-color, var(--forge-theme-primary, #3f51b5));--_list-item-selected-background:var(--forge-list-item-selected-background, var(--_list-item-selected-color));--_list-item-selected-opacity:var(--forge-list-item-selected-opacity, 0.08);--_list-item-selected-start-color:var(--forge-list-item-selected-start-color, var(--_list-item-selected-color));--_list-item-selected-end-color:var(--forge-list-item-selected-end-color, var(--_list-item-selected-color));--_list-item-selected-text-color:var(--forge-list-item-selected-text-color, var(--forge-theme-text-medium, rgba(0, 0, 0, 0.6)));--_list-item-disabled-opacity:var(--forge-list-item-disabled-opacity, 0.38);--_list-item-one-line-height:var(--forge-list-item-one-line-height, var(--_list-item-height));--_list-item-two-line-height:var(--forge-list-item-two-line-height, var(--forge-list-item-height, 72px));--_list-item-three-line-height:var(--forge-list-item-three-line-height, var(--forge-list-item-height, 88px));--_list-item-dense-one-line-height:var(--forge-list-item-dense-one-line-height, var(--_list-item-dense-height));--_list-item-dense-two-line-height:var(--forge-list-item-dense-two-line-height, var(--forge-list-item-dense-height, 56px));--_list-item-dense-three-line-height:var(--forge-list-item-dense-three-line-height, var(--forge-list-item-dense-height, 72px));--_list-item-dense-font-size:var(--forge-list-item-dense-font-size, 0.875rem);--_list-item-dense-gap:var(--forge-list-item-dense-gap, var(--forge-spacing-xsmall, 8px));--_list-item-start-selected-color:var(--forge-list-item-start-selected-color, var(--_list-item-selected-color));--_list-item-end-selected-color:var(--forge-list-item-end-selected-color, var(--_list-item-selected-color));--_list-item-wrap-padding:var(--forge-list-item-wrap-padding, var(--forge-spacing-xsmall, 8px) var(--forge-spacing-medium, 16px))}.forge-list-item{position:relative;display:flex;gap:var(--_list-item-gap);align-items:center;box-sizing:border-box;outline:0;text-decoration:none;border-radius:var(--_list-item-shape);-webkit-tap-highlight-color:transparent;background-color:var(--_list-item-background);height:var(--_list-item-height);min-height:var(--_list-item-height);padding:var(--_list-item-padding);margin:var(--_list-item-margin)}.forge-list-item.interactive{cursor:var(--_list-item-cursor)}.forge-list-item.disabled{cursor:var(--_list-item-disabled-cursor);opacity:var(--_list-item-disabled-opacity)}.forge-list-item.disabled ::slotted(button){cursor:var(--_list-item-disabled-cursor)}.anchor{position:absolute;inset:0}:host([two-line]) .forge-list-item{height:var(--_list-item-two-line-height);min-height:var(--_list-item-two-line-height)}:host([three-line]) .forge-list-item{height:var(--_list-item-three-line-height);min-height:var(--_list-item-three-line-height)}:host([dense]) .forge-list-item{--_list-item-gap:var(--_list-item-dense-gap);height:var(--_list-item-dense-one-line-height);min-height:var(--_list-item-dense-one-line-height)}:host([dense]) .text-container{font-size:var(--_list-item-dense-font-size)}:host([dense][indented]){margin-inline-start:var(--_list-item-dense-indent)}:host([dense][two-line]) .forge-list-item{height:var(--_list-item-dense-two-line-height);min-height:var(--_list-item-dense-two-line-height)}:host([dense][three-line]) .forge-list-item{height:var(--_list-item-dense-three-line-height);min-height:var(--_list-item-dense-three-line-height)}:host([selected]) .forge-list-item{color:var(--_list-item-selected-color)}:host([selected]) .forge-list-item::before{content:\"\";position:absolute;inset:0;border-radius:inherit;opacity:var(--_list-item-selected-opacity);background-color:var(--_list-item-selected-background);pointer-events:none}:host([selected]) .forge-list-item ::slotted([slot=end]),:host([selected]) .forge-list-item ::slotted([slot=leading]),:host([selected]) .forge-list-item ::slotted([slot=start]),:host([selected]) .forge-list-item ::slotted([slot=trailing]){color:var(--_list-item-selected-color);isolation:isolate}:host([selected]) .forge-list-item ::slotted([slot=leading]),:host([selected]) .forge-list-item ::slotted([slot=start]){color:var(--_list-item-start-selected-color)}:host([selected]) .forge-list-item ::slotted([slot=end]),:host([selected]) .forge-list-item ::slotted([slot=trailing]){color:var(--_list-item-end-selected-color)}:host([selected]) .text-container{color:var(--_list-item-selected-color)}:host([selected]) forge-state-layer{--forge-state-layer-color:var(--_list-item-selected-color)}:host([indented]) .forge-list-item{margin-inline-start:var(--_list-item-indent)}.text-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));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);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box;isolation:isolate;font-size:var(--_list-item-text-font-size);font-weight:var(--_list-item-text-font-weight);line-height:var(--_list-item-text-line-height);flex:1;contain:layout}slot[name=secondary-text]::slotted(*),slot[name=tertiary-text]::slotted(*){-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-body1-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-body1-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-font-size-scale, .875)));font-weight:var(--forge-typography-body1-font-weight,400);line-height:var(--forge-typography-body1-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-line-height-scale, 1.125)));letter-spacing:var(--forge-typography-body1-letter-spacing, .0357142857em);text-transform:var(--forge-typography-body1-text-transform,inherit);text-decoration:var(--forge-typography-body1-text-decoration,inherit);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--_list-item-text-color);display:block}:host([selected]) slot[name=secondary-text]::slotted(*),:host([selected]) slot[name=tertiary-text]::slotted(*){color:var(--_list-item-selected-text-color)}::slotted(:is(button:not([slot]),[forge-list-item-button])){appearance:none;cursor:var(--_list-item-cursor);border:none;padding-block:0;padding-inline:0;margin:0;box-sizing:border-box;width:100%;background:0 0;color:inherit;outline:0;font:inherit;user-select:auto;text-align:inherit;letter-spacing:inherit;word-spacing:inherit;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;display:block}::slotted(a){outline:0;color:inherit!important;text-decoration:none!important}::slotted([slot=end]),::slotted([slot=leading]),::slotted([slot=start]),::slotted([slot=trailing]){color:var(--_list-item-text-color);display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;fill:currentColor}:host(:not([noninteractive])) ::slotted(:is(forge-checkbox,forge-radio,forge-switch):is([slot=start],[slot=end],[slot=leading],[slot=trailing]):not([forge-ignore])){--forge-focus-indicator-display:none;--forge-state-layer-display:none}:host([selected]) ::slotted([slot=leading]),:host([selected]) ::slotted([slot=start]){color:var(--_list-item-start-selected-color)}:host([selected]) ::slotted([slot=end]),:host([selected]) ::slotted([slot=trailing]){color:var(--_list-item-end-selected-color)}:host([wrap]) .forge-list-item{--_list-item-padding:var(--_list-item-wrap-padding);height:auto}:host([wrap]) .text-container{white-space:normal;overflow:visible;text-overflow:clip;line-height:normal}:host([wrap]) ::slotted(:is(button,[role=button][tabindex],[forge-list-item-button])){white-space:normal}:host([wrap]) slot[name=secondary-text]::slotted(*),:host([wrap]) slot[name=tertiary-text]::slotted(*){white-space:normal;overflow:visible;text-overflow:clip;line-height:normal}forge-focus-indicator{z-index:1;--forge-focus-indicator-shape:calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1))}forge-state-layer{border-radius:inherit}';
|
|
18
18
|
/**
|
|
19
19
|
* @tag forge-list-item
|
|
20
20
|
*
|
|
@@ -157,7 +157,7 @@ export class ListDropdownCore {
|
|
|
157
157
|
handleKey(key) {
|
|
158
158
|
switch (key) {
|
|
159
159
|
case 'Enter':
|
|
160
|
-
case 'NumpadEnter':
|
|
160
|
+
case 'NumpadEnter': {
|
|
161
161
|
const activeOptionIndex = this.getActiveOptionIndex();
|
|
162
162
|
const activeOption = this._nonDividerOptions[activeOptionIndex];
|
|
163
163
|
if (this._canSelectOption(activeOption)) {
|
|
@@ -167,10 +167,11 @@ export class ListDropdownCore {
|
|
|
167
167
|
}
|
|
168
168
|
}
|
|
169
169
|
break;
|
|
170
|
+
}
|
|
170
171
|
case 'Up':
|
|
171
172
|
case 'ArrowUp':
|
|
172
173
|
case 'Down':
|
|
173
|
-
case 'ArrowDown':
|
|
174
|
+
case 'ArrowDown': {
|
|
174
175
|
const options = this._nonDividerOptions;
|
|
175
176
|
if (options.length && options.every(o => !this._canSelectOption(o))) {
|
|
176
177
|
return;
|
|
@@ -178,6 +179,7 @@ export class ListDropdownCore {
|
|
|
178
179
|
const index = this._getNextActiveOptionIndex(key);
|
|
179
180
|
this.activateOption(index);
|
|
180
181
|
break;
|
|
182
|
+
}
|
|
181
183
|
case 'Home':
|
|
182
184
|
this.activateFirstOption();
|
|
183
185
|
break;
|
|
@@ -387,8 +387,11 @@ function getOptionsByGroup(options) {
|
|
|
387
387
|
* @param type The type of option to detect.
|
|
388
388
|
*/
|
|
389
389
|
export function isListDropdownOptionType(options, type) {
|
|
390
|
-
const isOptionGroups = options.some((o) => isDefined(o) &&
|
|
391
|
-
|
|
390
|
+
const isOptionGroups = options.some((o) => isDefined(o) &&
|
|
391
|
+
isObject(o) &&
|
|
392
|
+
Object.prototype.hasOwnProperty.call(o, 'options') &&
|
|
393
|
+
(Object.prototype.hasOwnProperty.call(o, 'text') || Object.prototype.hasOwnProperty.call(o, 'builder')));
|
|
394
|
+
const isOptionTypes = options.some((o) => isDefined(o) && isObject(o) && Object.prototype.hasOwnProperty.call(o, 'label') && Object.prototype.hasOwnProperty.call(o, 'value'));
|
|
392
395
|
return (isOptionGroups && type === ListDropdownOptionType.Group) || (isOptionTypes && type === ListDropdownOptionType.Option);
|
|
393
396
|
}
|
|
394
397
|
export function getFlattenedOptions(options) {
|
package/esm/menu/menu-core.js
CHANGED
|
@@ -88,9 +88,7 @@ export class MenuCore extends CascadingListDropdownAwareCore {
|
|
|
88
88
|
}
|
|
89
89
|
_flattenOptions(options) {
|
|
90
90
|
if (isListDropdownOptionType(options, ListDropdownOptionType.Group)) {
|
|
91
|
-
return options.reduce((previousValue, currentValue) =>
|
|
92
|
-
return currentValue.options ? previousValue.concat(currentValue.options) : previousValue;
|
|
93
|
-
}, []);
|
|
91
|
+
return options.reduce((previousValue, currentValue) => (currentValue.options ? previousValue.concat(currentValue.options) : previousValue), []);
|
|
94
92
|
}
|
|
95
93
|
return options;
|
|
96
94
|
}
|
|
@@ -147,7 +145,7 @@ export class MenuCore extends CascadingListDropdownAwareCore {
|
|
|
147
145
|
this._adapter.propagateKey(evt.code);
|
|
148
146
|
}
|
|
149
147
|
break;
|
|
150
|
-
case 'Enter':
|
|
148
|
+
case 'Enter': {
|
|
151
149
|
evt.preventDefault();
|
|
152
150
|
if (!this._open) {
|
|
153
151
|
evt.preventDefault();
|
|
@@ -163,6 +161,7 @@ export class MenuCore extends CascadingListDropdownAwareCore {
|
|
|
163
161
|
this._adapter.toggleChildMenu(activeIndex);
|
|
164
162
|
}
|
|
165
163
|
break;
|
|
164
|
+
}
|
|
166
165
|
case 'ArrowUp':
|
|
167
166
|
case 'ArrowDown':
|
|
168
167
|
if (this._open) {
|
|
@@ -184,7 +183,7 @@ export class MenuCore extends CascadingListDropdownAwareCore {
|
|
|
184
183
|
this._closeDropdown();
|
|
185
184
|
}
|
|
186
185
|
break;
|
|
187
|
-
case 'ArrowRight':
|
|
186
|
+
case 'ArrowRight': {
|
|
188
187
|
if (this._open) {
|
|
189
188
|
evt.stopImmediatePropagation();
|
|
190
189
|
}
|
|
@@ -198,6 +197,7 @@ export class MenuCore extends CascadingListDropdownAwareCore {
|
|
|
198
197
|
return;
|
|
199
198
|
}
|
|
200
199
|
break;
|
|
200
|
+
}
|
|
201
201
|
}
|
|
202
202
|
}
|
|
203
203
|
async _openMenu({ fromKeyboard } = {}) {
|
|
@@ -220,7 +220,6 @@ export class MenuCore extends CascadingListDropdownAwareCore {
|
|
|
220
220
|
const selectedValues = this._persistSelection ? this._getSelectedValues() : [];
|
|
221
221
|
const config = {
|
|
222
222
|
id: this._identifier,
|
|
223
|
-
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
|
224
223
|
referenceElement: this._adapter.targetElement,
|
|
225
224
|
type: ListDropdownType.Menu,
|
|
226
225
|
options: this._options,
|