@m3e/web 2.5.11 → 2.5.12

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.
Files changed (49) hide show
  1. package/dist/all.js +92 -42
  2. package/dist/all.js.map +1 -1
  3. package/dist/all.min.js +56 -56
  4. package/dist/all.min.js.map +1 -1
  5. package/dist/autocomplete.js +23 -5
  6. package/dist/autocomplete.js.map +1 -1
  7. package/dist/autocomplete.min.js +1 -1
  8. package/dist/autocomplete.min.js.map +1 -1
  9. package/dist/breadcrumb.js +1 -1
  10. package/dist/breadcrumb.js.map +1 -1
  11. package/dist/breadcrumb.min.js +1 -1
  12. package/dist/breadcrumb.min.js.map +1 -1
  13. package/dist/core.js +27 -23
  14. package/dist/core.js.map +1 -1
  15. package/dist/core.min.js +1 -1
  16. package/dist/core.min.js.map +1 -1
  17. package/dist/custom-elements.json +74 -42
  18. package/dist/fab.js +1 -1
  19. package/dist/fab.js.map +1 -1
  20. package/dist/fab.min.js +1 -1
  21. package/dist/fab.min.js.map +1 -1
  22. package/dist/form-field.js +1 -1
  23. package/dist/form-field.js.map +1 -1
  24. package/dist/form-field.min.js +2 -2
  25. package/dist/form-field.min.js.map +1 -1
  26. package/dist/option.js +12 -2
  27. package/dist/option.js.map +1 -1
  28. package/dist/option.min.js +1 -1
  29. package/dist/option.min.js.map +1 -1
  30. package/dist/select.js +18 -2
  31. package/dist/select.js.map +1 -1
  32. package/dist/select.min.js +1 -1
  33. package/dist/select.min.js.map +1 -1
  34. package/dist/src/autocomplete/AutocompleteElement.d.ts.map +1 -1
  35. package/dist/src/core/shared/mixins/LinkButton.d.ts.map +1 -1
  36. package/dist/src/core/shared/tokens/DesignToken.d.ts +3 -0
  37. package/dist/src/core/shared/tokens/DesignToken.d.ts.map +1 -1
  38. package/dist/src/core/shared/tokens/MeasurementToken.d.ts +13 -7
  39. package/dist/src/core/shared/tokens/MeasurementToken.d.ts.map +1 -1
  40. package/dist/src/form-field/FormFieldElement.d.ts.map +1 -1
  41. package/dist/src/option/OptionElement.d.ts.map +1 -1
  42. package/dist/src/option/OptionPanelElement.d.ts.map +1 -1
  43. package/dist/src/select/SelectElement.d.ts.map +1 -1
  44. package/dist/src/theme/ThemeElement.d.ts.map +1 -1
  45. package/dist/theme.js +10 -7
  46. package/dist/theme.js.map +1 -1
  47. package/dist/theme.min.js +6 -6
  48. package/dist/theme.min.js.map +1 -1
  49. package/package.json +1 -1
package/dist/form-field.js CHANGED
@@ -450,7 +450,7 @@ _M3eFormFieldElement_handleErrorChange = function _M3eFormFieldElement_handleErr
450
450
  M3eFormFieldElement.styles = css`:host { display: inline-flex; flex-direction: column; vertical-align: middle; font-size: var(--m3e-form-field-font-size, ${DesignToken.typescale.standard.body.large.fontSize}); font-weight: var(--m3e-form-field-font-weight, ${DesignToken.typescale.standard.body.large.fontWeight}); line-height: var(--m3e-form-field-line-height, ${DesignToken.typescale.standard.body.large.lineHeight}); letter-spacing: var(--m3e-form-field-tracking, ${DesignToken.typescale.standard.body.large.tracking}); width: var(--m3e-form-field-width, 14.5rem); color: var(--_form-field-color); } :host(:not(:is(:state(--disabled), :--disabled))) .base { cursor: var(--_form-field-cursor); } .base { display: flex; align-items: center; position: relative; min-height: calc(3.5rem + ${DesignToken.density.calc(-3)}); --_form-field-label-font-size: var( --m3e-form-field-label-font-size, ${DesignToken.typescale.standard.body.small.fontSize} ); --_form-field-label-line-height: var( --m3e-form-field-label-line-height, ${DesignToken.typescale.standard.body.small.lineHeight} ); } .content { display: flex; align-items: center; position: relative; flex: 1 1 auto; min-width: 0; min-height: var(--m3e-form-field-icon-size, 1.5rem); } .prefix, .suffix { display: flex; align-items: center; position: relative; user-select: none; flex: none; font-size: var(--m3e-form-field-icon-size, 1.5rem); } .prefix-text, .suffix-text { opacity: 1; transition: opacity ${DesignToken.motion.duration.extraLong1}; user-select: none; flex: none; } .input { display: inline-flex; flex-wrap: wrap; flex: 1 1 auto; min-width: 0; } .label { display: flex; position: absolute; pointer-events: none; user-select: none; top: 0; left: 0; right: 0; font-size: var(--m3e-form-field-label-font-size, ${DesignToken.typescale.standard.body.small.fontSize}); font-weight: var(--m3e-form-field-label-font-weight, ${DesignToken.typescale.standard.body.small.fontWeight}); line-height: var(--m3e-form-field-label-line-height, ${DesignToken.typescale.standard.body.small.lineHeight}); letter-spacing: var(--m3e-form-field-label-tracking, ${DesignToken.typescale.standard.body.small.tracking}); color: var(--_form-field-label-color, inherit); transition: ${unsafeCSS(`top ${DesignToken.motion.duration.short4},
451
451
  font-size ${DesignToken.motion.duration.short4},
452
452
  line-height ${DesignToken.motion.duration.short4}`)}; } :host(:is(:state(--with-select), :--with-select)) .label { margin-inline-end: 1.5rem; } ::slotted([slot="label"]) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .subscript { display: inline-flex; width: 100%; margin-top: 0.25rem; font-size: var(--m3e-form-field-subscript-font-size, ${DesignToken.typescale.standard.body.small.fontSize}); font-weight: var(--m3e-form-field-subscript-font-weight, ${DesignToken.typescale.standard.body.small.fontWeight}); line-height: var(--m3e-form-field-subscript-line-height, ${DesignToken.typescale.standard.body.small.lineHeight}); letter-spacing: var(--m3e-form-field-subscript-tracking, ${DesignToken.typescale.standard.body.small.tracking}); min-height: var(--m3e-form-field-subscript-line-height, ${DesignToken.typescale.standard.body.small.lineHeight}); color: var(--m3e-form-field-subscript-color, ${DesignToken.color.onSurfaceVariant}); } .error, .hint { flex: 1 1 auto; } :host([hide-subscript="always"]) .subscript { display: none; } :host([hide-subscript="auto"]:not(:is(:state(--invalid), :--invalid))) .subscript { opacity: 0; margin-top: 0.25rem; transform: translateY(-0.25rem); transition: ${unsafeCSS(`opacity ${DesignToken.motion.duration.short4},
453
- transform ${DesignToken.motion.duration.short4}`)}; } :host([hide-subscript="auto"]:not(:is(:state(--invalid), :--invalid)):focus-within) .subscript, :host([hide-subscript="auto"]:not(:is(:state(--invalid), :--invalid)):is(:state(--pressed), :--pressed)) .subscript { opacity: 1; transform: translateY(0); } :host(:is(:state(--invalid), :--invalid)) .hint { display: none; } :host(:not(:is(:state(--invalid), :--invalid))) .error { display: none; } ::slotted(input), ::slotted(textarea), ::slotted(select) { outline: unset; border: unset; background-color: transparent; box-shadow: none; font-family: inherit; font-size: inherit; line-height: inherit; letter-spacing: inherit; color: var(--_form-field-input-color, inherit); flex: 1 1 auto; min-width: 0; padding: unset; } ::slotted(textarea) { scrollbar-width: ${DesignToken.scrollbar.thinWidth}; scrollbar-color: ${DesignToken.scrollbar.color}; } ::slotted(m3e-select), ::slotted(m3e-input-chip-set) { flex: 1 1 auto; min-width: 0; } :host([float-label="auto"]:not(:is(:state(--float-label), :--float-label)):not(:is(:state(--pressed), :--pressed))) .label { font-size: inherit; } :host([float-label="auto"]:not(:is(:state(--float-label), :--float-label)):is(:state(--with-label), :--with-label)) .prefix-text, :host([float-label="auto"]:not(:is(:state(--float-label), :--float-label)):is(:state(--with-label), :--with-label)) .suffix-text { opacity: 0; transition: opacity 0s; } .prefix { margin-inline-start: 1rem; } :host(:is(:state(--with-prefix), :--with-prefix)) .prefix { margin-inline-end: 1rem; margin-inline-start: 0.75rem; } .suffix { margin-inline-end: 1rem; } :host(:is(:state(--with-suffix), :--with-suffix)) .suffix { margin-inline-start: 0.25rem; margin-inline-end: 0.5rem; } :host(:is(:state(--with-suffix), :--with-suffix):is(:state(--with-select), :--with-select)) .suffix { margin-inline-start: unset; } :host(:is(:state(--with-select), :--with-select)) .suffix-text { display: none; } :host([variant="outlined"]) .label { margin-top: calc(0px - var(--_form-field-label-line-height) / 2); } :host([variant="outlined"]) .outline { position: absolute; display: flex; pointer-events: none; left: 0; top: 0; bottom: 0; right: 0; } :host([variant="outlined"]) .pseudo-label { visibility: hidden; margin-inline-end: 0.5rem; font-size: var(--_form-field-label-font-size); line-height: var(--_form-field-label-line-height); letter-spacing: var(--_form-field-label-tracking); max-width: 100%; transition-property: max-width, margin-inline-end; transition-duration: 1ms; } :host([variant="outlined"]:is(:state(--required), :--required):not([hide-required-marker])) .pseudo-label { margin-inline-end: 0.25rem; } :host( [variant="outlined"][float-label="auto"]:not(:is(:state(--float-label), :--float-label)):not( :is(:state(--pressed), :--pressed) ) ) .pseudo-label { max-width: 0; margin-inline-end: 0px; transition-delay: ${DesignToken.motion.duration.short2}; } :host([variant="outlined"]) .outline-start, :host([variant="outlined"]) .outline-notch, :host([variant="outlined"]) .outline-end { box-sizing: border-box; border-width: var(--_form-field-outline-size, 1px); border-color: var(--_form-field-outline-color); transition: border-color ${DesignToken.motion.duration.short4}; } :host([variant="outlined"]:not(:is(:state(--with-label), :--with-label))) .outline-notch { display: none; } :host([variant="outlined"]) .outline-start { min-width: 0.75rem; border-top-style: solid; border-inline-start-style: solid; border-bottom-style: solid; border-start-start-radius: var(--m3e-outlined-form-field-container-shape, ${DesignToken.shape.corner.extraSmall}); border-end-start-radius: var(--m3e-outlined-form-field-container-shape, ${DesignToken.shape.corner.extraSmall}); } :host([variant="outlined"]) .outline-notch { border-bottom-style: solid; } :host([variant="outlined"]) .outline-end { flex-grow: 1; min-width: 1rem; border-top-style: solid; border-inline-end-style: solid; border-bottom-style: solid; border-start-end-radius: var(--m3e-outlined-form-field-container-shape, ${DesignToken.shape.corner.extraSmall}); border-end-end-radius: var(--m3e-outlined-form-field-container-shape, ${DesignToken.shape.corner.extraSmall}); } :host([variant="outlined"]:is(:state(--with-prefix), :--with-prefix)) .outline-start { min-width: calc(1.25rem + var(--_prefix-width, 0px) + 0.25rem); } :host([variant="outlined"]:not(:is(:state(--disabled), :--disabled))) .base:hover .outline, :host([variant="outlined"]:not(:is(:state(--disabled), :--disabled)):focus-within) .outline, :host([variant="outlined"]:not(:is(:state(--disabled), :--disabled)):is(:state(--pressed), :--pressed)) .outline { --_form-field-outline-size: 2px; } :host([variant="outlined"]) .subscript { margin-inline: 1rem; width: calc(100% - 2rem); } :host([variant="outlined"]) .content { min-height: calc(3.5rem + ${DesignToken.density.calc(-3)}); --_form-field-label-font-size: var( --m3e-form-field-label-font-size, ${DesignToken.typescale.standard.body.small.fontSize} ); } :host( [variant="outlined"][float-label="auto"]:not(:is(:state(--float-label), :--float-label)):not( :is(:state(--pressed), :--pressed) ) ) .label { margin-top: unset; line-height: calc(3.5rem + ${DesignToken.density.calc(-3)}); --_form-field-label-font-size: var( --m3e-form-field-label-font-size, ${DesignToken.typescale.standard.body.small.fontSize} ); } :host([variant="filled"]) .base { --_select-arrow-margin-top: calc( 0px - calc(1rem / max(calc(0 - calc(var(--md-sys-density-scale, 0) + var(--md-sys-density-scale, 0))), 1)) ); } :host([variant="filled"]) .base::before { content: ""; box-sizing: border-box; position: absolute; pointer-events: none; top: 0; left: 0; right: 0; bottom: 0; border-bottom-style: solid; border-width: 1px; border-radius: var(--m3e-form-field-container-shape, ${DesignToken.shape.corner.extraSmallTop}); border-color: var(--_form-field-outline-color); background-color: var(--_form-field-container-color); } :host([variant="filled"]:not(:is(:state(--disabled), :--disabled))) .base:hover::before, :host([variant="filled"]:not(:is(:state(--disabled), :--disabled)):focus-within) .base::before, :host([variant="filled"]:not(:is(:state(--disabled), :--disabled)):is(:state(--pressed), :--pressed)) .base::before { border-width: 3px; } :host([variant="filled"]) .base::after { content: ""; box-sizing: border-box; position: absolute; pointer-events: none; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--_form-field-hover-container-color); transition: background-color ${DesignToken.motion.duration.short4}; } :host([variant="filled"]) .subscript { margin-inline: 1rem; width: calc(100% - 2rem); } :host([variant="filled"]) .content { padding-top: calc(1.5rem + ${DesignToken.density.calc(-3)}); margin-bottom: 0.5rem; } :host([variant="filled"]) .label { top: max(0px, calc(0.5rem + ${DesignToken.density.calc(-3)})); } :host( [variant="filled"][float-label="auto"]:not(:is(:state(--float-label), :--float-label)):not( :is(:state(--pressed), :--pressed) ) ) .label { top: 0px; line-height: calc(3.5rem + ${DesignToken.density.calc(-3)} - 0.0625rem); --_form-field-label-font-size: var( --m3e-form-field-label-font-size, ${DesignToken.typescale.standard.body.small.fontSize} ); } :host(:not(:is(:state(--disabled), :--disabled)):not(:focus-within):not(:is(:state(--pressed), :--pressed))) .base:hover { --_form-field-hover-container-color: color-mix( in srgb, var(--m3e-form-field-hover-container-color, ${DesignToken.color.onSurface}) var(--m3e-form-field-hover-container-opacity, 8%), transparent ); } :host(:not(:is(:state(--disabled), :--disabled)):not(:is(:state(--invalid), :--invalid))) { color: var(--m3e-form-field-color, ${DesignToken.color.onSurface}); } :host([variant="outlined"]:not(:is(:state(--disabled), :--disabled)):not(:is(:state(--invalid), :--invalid))) .base { --_form-field-outline-color: var(--m3e-form-field-outline-color, ${DesignToken.color.outline}); } :host([variant="filled"]:not(:is(:state(--disabled), :--disabled)):not(:is(:state(--invalid), :--invalid))) .base { --_form-field-outline-color: var(--m3e-form-field-outline-color, ${DesignToken.color.onSurfaceVariant}); } :host( [variant="outlined"]:not(:is(:state(--disabled), :--disabled)):not( :is(:state(--invalid), :--invalid) ):focus-within ) .base, :host( [variant="outlined"]:not(:is(:state(--disabled), :--disabled)):not(:is(:state(--invalid), :--invalid)):is( :state(--pressed), :--pressed ) ) .base, :host( [variant="filled"]:not(:is(:state(--disabled), :--disabled)):not( :is(:state(--invalid), :--invalid) ):focus-within ) .base, :host( [variant="filled"]:not(:is(:state(--disabled), :--disabled)):not(:is(:state(--invalid), :--invalid)):is( :state(--pressed), :--pressed ) ) .base { --_form-field-outline-color: var(--m3e-form-field-focused-outline-color, ${DesignToken.color.primary}); --_form-field-label-color: var(--m3e-form-field-focused-color, ${DesignToken.color.primary}); } :host(:not(:is(:state(--disabled), :--disabled))) .base { --_form-field-container-color: var( --m3e-form-field-container-color, ${DesignToken.color.surfaceContainerHighest} ); } :host(:not(:is(:state(--disabled), :--disabled)):is(:state(--invalid), :--invalid)) .base { --_form-field-label-color: var(--m3e-form-field-invalid-color, ${DesignToken.color.error}); --_form-field-outline-color: var(--m3e-form-field-invalid-color, ${DesignToken.color.error}); } :host(:not(:is(:state(--disabled), :--disabled)):is(:state(--invalid), :--invalid)) .subscript { color: var(--m3e-form-field-invalid-color, ${DesignToken.color.error}); } :host(:is(:state(--disabled), :--disabled)) { color: color-mix( in srgb, var(--m3e-form-field-disabled-color, ${DesignToken.color.onSurface}) var(--m3e-form-field-disabled-opacity, 38%), transparent ); } :host(:is(:state(--disabled), :--disabled)) .base { --_form-field-container-color: color-mix( in srgb, var(--m3e-form-field-disabled-container-color, ${DesignToken.color.onSurface}) var(--m3e-form-field-disabled-container-opacity, 4%), transparent ); } :host(:is(:state(--no-animate), :--no-animate)) *, :host(:is(:state(--no-animate), :--no-animate)) *::before, :host(:is(:state(--no-animate), :--no-animate)) *::after { transition: none !important; } @media (forced-colors: active) { :host([variant="filled"]) .base::after { transition: none; } :host { --_form-field-outline-color: CanvasText; } :host(:is(:state(--disabled), :--disabled)) { --_form-field-input-color: GrayText; --_form-field-color: GrayText; --_form-field-label-color: GrayText; --_form-field-outline-color: GrayText; } } @media (prefers-reduced-motion) { .base::before, .prefix-text, .suffix-text, .label, .subscript, .outline-start, .outline-notch, .outline-end, .pseudo-label { transition: none !important; } }`;
453
+ transform ${DesignToken.motion.duration.short4}`)}; } :host([hide-subscript="auto"]:not(:is(:state(--invalid), :--invalid)):focus-within) .subscript, :host([hide-subscript="auto"]:not(:is(:state(--invalid), :--invalid)):is(:state(--pressed), :--pressed)) .subscript { opacity: 1; transform: translateY(0); } :host(:is(:state(--invalid), :--invalid)) .hint { display: none; } :host(:not(:is(:state(--invalid), :--invalid))) .error { display: none; } ::slotted(input), ::slotted(textarea), ::slotted(select) { outline: unset; border: unset; background-color: transparent; box-shadow: none; font-family: inherit; font-size: inherit; line-height: inherit; letter-spacing: inherit; color: var(--_form-field-input-color, inherit); flex: 1 1 auto; min-width: 0; padding: unset; } ::slotted(textarea) { scrollbar-width: ${DesignToken.scrollbar.thinWidth}; scrollbar-color: ${DesignToken.scrollbar.color}; } ::slotted(m3e-select), ::slotted(m3e-input-chip-set) { flex: 1 1 auto; min-width: 0; } :host([float-label="auto"]:not(:is(:state(--float-label), :--float-label)):not(:is(:state(--pressed), :--pressed))) .label { font-size: inherit; } :host([float-label="auto"]:not(:is(:state(--float-label), :--float-label)):is(:state(--with-label), :--with-label)) .prefix-text, :host([float-label="auto"]:not(:is(:state(--float-label), :--float-label)):is(:state(--with-label), :--with-label)) .suffix-text { opacity: 0; transition: opacity 0s; } .prefix { margin-inline-start: 1rem; } :host(:is(:state(--with-prefix), :--with-prefix)) .prefix { margin-inline-end: 1rem; margin-inline-start: 0.75rem; } .suffix { margin-inline-end: 1rem; } :host(:is(:state(--with-suffix), :--with-suffix)) .suffix { margin-inline-start: 0.25rem; margin-inline-end: 0.5rem; } :host(:is(:state(--with-suffix), :--with-suffix):is(:state(--with-select), :--with-select)) .suffix { margin-inline-start: unset; } :host(:is(:state(--with-select), :--with-select)) .suffix-text { display: none; } :host([variant="outlined"]) .label { margin-top: calc(0px - var(--_form-field-label-line-height) / 2); } :host([variant="outlined"]) .outline { position: absolute; display: flex; pointer-events: none; left: 0; top: 0; bottom: 0; right: 0; } :host([variant="outlined"]) .pseudo-label { visibility: hidden; margin-inline-end: 0.5rem; font-size: var(--_form-field-label-font-size); line-height: var(--_form-field-label-line-height); letter-spacing: var(--_form-field-label-tracking); max-width: 100%; transition-property: max-width, margin-inline-end; transition-duration: 1ms; } :host( :is(:state(--required), :--required):not([hide-required-marker]):not(:is(:state(--with-label), :--with-label)) ) .pseudo-label, :host( :is(:state(--required), :--required):not([hide-required-marker]):not(:is(:state(--with-label), :--with-label)) ) .required-marker { display: none; } :host([variant="outlined"]:is(:state(--required), :--required):not([hide-required-marker])) .pseudo-label { margin-inline-end: 0.25rem; } :host( [variant="outlined"][float-label="auto"]:not(:is(:state(--float-label), :--float-label)):not( :is(:state(--pressed), :--pressed) ) ) .pseudo-label { max-width: 0; margin-inline-end: 0px; transition-delay: ${DesignToken.motion.duration.short2}; } :host([variant="outlined"]) .outline-start, :host([variant="outlined"]) .outline-notch, :host([variant="outlined"]) .outline-end { box-sizing: border-box; border-width: var(--_form-field-outline-size, 1px); border-color: var(--_form-field-outline-color); transition: border-color ${DesignToken.motion.duration.short4}; } :host([variant="outlined"]:not(:is(:state(--with-label), :--with-label))) .outline-notch { display: none; } :host([variant="outlined"]) .outline-start { min-width: 0.75rem; border-top-style: solid; border-inline-start-style: solid; border-bottom-style: solid; border-start-start-radius: var(--m3e-outlined-form-field-container-shape, ${DesignToken.shape.corner.extraSmall}); border-end-start-radius: var(--m3e-outlined-form-field-container-shape, ${DesignToken.shape.corner.extraSmall}); } :host([variant="outlined"]) .outline-notch { border-bottom-style: solid; } :host([variant="outlined"]) .outline-end { flex-grow: 1; min-width: 1rem; border-top-style: solid; border-inline-end-style: solid; border-bottom-style: solid; border-start-end-radius: var(--m3e-outlined-form-field-container-shape, ${DesignToken.shape.corner.extraSmall}); border-end-end-radius: var(--m3e-outlined-form-field-container-shape, ${DesignToken.shape.corner.extraSmall}); } :host([variant="outlined"]:is(:state(--with-prefix), :--with-prefix)) .outline-start { min-width: calc(1.25rem + var(--_prefix-width, 0px) + 0.25rem); } :host([variant="outlined"]:not(:is(:state(--disabled), :--disabled))) .base:hover .outline, :host([variant="outlined"]:not(:is(:state(--disabled), :--disabled)):focus-within) .outline, :host([variant="outlined"]:not(:is(:state(--disabled), :--disabled)):is(:state(--pressed), :--pressed)) .outline { --_form-field-outline-size: 2px; } :host([variant="outlined"]) .subscript { margin-inline: 1rem; width: calc(100% - 2rem); } :host([variant="outlined"]) .content { min-height: calc(3.5rem + ${DesignToken.density.calc(-3)}); --_form-field-label-font-size: var( --m3e-form-field-label-font-size, ${DesignToken.typescale.standard.body.small.fontSize} ); } :host( [variant="outlined"][float-label="auto"]:not(:is(:state(--float-label), :--float-label)):not( :is(:state(--pressed), :--pressed) ) ) .label { margin-top: unset; line-height: calc(3.5rem + ${DesignToken.density.calc(-3)}); --_form-field-label-font-size: var( --m3e-form-field-label-font-size, ${DesignToken.typescale.standard.body.small.fontSize} ); } :host([variant="filled"]) .base { --_select-arrow-margin-top: calc( 0px - calc(1rem / max(calc(0 - calc(var(--md-sys-density-scale, 0) + var(--md-sys-density-scale, 0))), 1)) ); } :host([variant="filled"]) .base::before { content: ""; box-sizing: border-box; position: absolute; pointer-events: none; top: 0; left: 0; right: 0; bottom: 0; border-bottom-style: solid; border-width: 1px; border-radius: var(--m3e-form-field-container-shape, ${DesignToken.shape.corner.extraSmallTop}); border-color: var(--_form-field-outline-color); background-color: var(--_form-field-container-color); } :host([variant="filled"]:not(:is(:state(--disabled), :--disabled))) .base:hover::before, :host([variant="filled"]:not(:is(:state(--disabled), :--disabled)):focus-within) .base::before, :host([variant="filled"]:not(:is(:state(--disabled), :--disabled)):is(:state(--pressed), :--pressed)) .base::before { border-width: 3px; } :host([variant="filled"]) .base::after { content: ""; box-sizing: border-box; position: absolute; pointer-events: none; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--_form-field-hover-container-color); transition: background-color ${DesignToken.motion.duration.short4}; } :host([variant="filled"]) .subscript { margin-inline: 1rem; width: calc(100% - 2rem); } :host([variant="filled"]) .content { padding-top: calc(1.5rem + ${DesignToken.density.calc(-3)}); margin-bottom: 0.5rem; } :host([variant="filled"]) .label { top: max(0px, calc(0.5rem + ${DesignToken.density.calc(-3)})); } :host( [variant="filled"][float-label="auto"]:not(:is(:state(--float-label), :--float-label)):not( :is(:state(--pressed), :--pressed) ) ) .label { top: 0px; line-height: calc(3.5rem + ${DesignToken.density.calc(-3)} - 0.0625rem); --_form-field-label-font-size: var( --m3e-form-field-label-font-size, ${DesignToken.typescale.standard.body.small.fontSize} ); } :host(:not(:is(:state(--disabled), :--disabled)):not(:focus-within):not(:is(:state(--pressed), :--pressed))) .base:hover { --_form-field-hover-container-color: color-mix( in srgb, var(--m3e-form-field-hover-container-color, ${DesignToken.color.onSurface}) var(--m3e-form-field-hover-container-opacity, 8%), transparent ); } :host(:not(:is(:state(--disabled), :--disabled)):not(:is(:state(--invalid), :--invalid))) { color: var(--m3e-form-field-color, ${DesignToken.color.onSurface}); } :host([variant="outlined"]:not(:is(:state(--disabled), :--disabled)):not(:is(:state(--invalid), :--invalid))) .base { --_form-field-outline-color: var(--m3e-form-field-outline-color, ${DesignToken.color.outline}); } :host([variant="filled"]:not(:is(:state(--disabled), :--disabled)):not(:is(:state(--invalid), :--invalid))) .base { --_form-field-outline-color: var(--m3e-form-field-outline-color, ${DesignToken.color.onSurfaceVariant}); } :host( [variant="outlined"]:not(:is(:state(--disabled), :--disabled)):not( :is(:state(--invalid), :--invalid) ):focus-within ) .base, :host( [variant="outlined"]:not(:is(:state(--disabled), :--disabled)):not(:is(:state(--invalid), :--invalid)):is( :state(--pressed), :--pressed ) ) .base, :host( [variant="filled"]:not(:is(:state(--disabled), :--disabled)):not( :is(:state(--invalid), :--invalid) ):focus-within ) .base, :host( [variant="filled"]:not(:is(:state(--disabled), :--disabled)):not(:is(:state(--invalid), :--invalid)):is( :state(--pressed), :--pressed ) ) .base { --_form-field-outline-color: var(--m3e-form-field-focused-outline-color, ${DesignToken.color.primary}); --_form-field-label-color: var(--m3e-form-field-focused-color, ${DesignToken.color.primary}); } :host(:not(:is(:state(--disabled), :--disabled))) .base { --_form-field-container-color: var( --m3e-form-field-container-color, ${DesignToken.color.surfaceContainerHighest} ); } :host(:not(:is(:state(--disabled), :--disabled)):is(:state(--invalid), :--invalid)) .base { --_form-field-label-color: var(--m3e-form-field-invalid-color, ${DesignToken.color.error}); --_form-field-outline-color: var(--m3e-form-field-invalid-color, ${DesignToken.color.error}); } :host(:not(:is(:state(--disabled), :--disabled)):is(:state(--invalid), :--invalid)) .subscript { color: var(--m3e-form-field-invalid-color, ${DesignToken.color.error}); } :host(:is(:state(--disabled), :--disabled)) { color: color-mix( in srgb, var(--m3e-form-field-disabled-color, ${DesignToken.color.onSurface}) var(--m3e-form-field-disabled-opacity, 38%), transparent ); } :host(:is(:state(--disabled), :--disabled)) .base { --_form-field-container-color: color-mix( in srgb, var(--m3e-form-field-disabled-container-color, ${DesignToken.color.onSurface}) var(--m3e-form-field-disabled-container-opacity, 4%), transparent ); } :host(:is(:state(--no-animate), :--no-animate)) *, :host(:is(:state(--no-animate), :--no-animate)) *::before, :host(:is(:state(--no-animate), :--no-animate)) *::after { transition: none !important; } @media (forced-colors: active) { :host([variant="filled"]) .base::after { transition: none; } :host { --_form-field-outline-color: CanvasText; } :host(:is(:state(--disabled), :--disabled)) { --_form-field-input-color: GrayText; --_form-field-color: GrayText; --_form-field-label-color: GrayText; --_form-field-outline-color: GrayText; } } @media (prefers-reduced-motion) { .base::before, .prefix-text, .suffix-text, .label, .subscript, .outline-start, .outline-notch, .outline-end, .pseudo-label { transition: none !important; } }`;
454
454
  __decorate([query(".base")], M3eFormFieldElement.prototype, "_base", void 0);
455
455
  __decorate([query(".prefix")], M3eFormFieldElement.prototype, "_prefix", void 0);
456
456
  __decorate([query(".error")], M3eFormFieldElement.prototype, "_error", void 0);
package/dist/form-field.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"form-field.js","sources":["../../src/form-field/FormFieldControl.ts","../../src/form-field/FormFieldElement.ts"],"sourcesContent":["/**\r\n * Adapted from Angular Material Form Field Control\r\n * Source: https://github.com/angular/components/blob/main/src/material/form-field/form-field-control.ts\r\n *\r\n * @license MIT\r\n * Copyright (c) 2025 Google LLC\r\n * See LICENSE file in the project root for full license text.\r\n */\r\n\r\n/** An interface which allows a control to work inside of a `M3eFormField`. */\r\nexport interface FormFieldControl extends HTMLElement {\r\n /** A value indicating whether the control is disabled. */\r\n disabled: boolean;\r\n\r\n /** The value of the control. */\r\n value?: unknown;\r\n\r\n /** A value indicating whether the control is required. */\r\n required?: boolean;\r\n\r\n /** A value indicated whether the content of the control is read-only. */\r\n readonly?: boolean;\r\n\r\n /** A value indicating whether the form field's label should try to float. */\r\n readonly shouldLabelFloat?: boolean;\r\n\r\n /** The error message that would be displayed if the user submits the form, or an empty string if no error message. */\r\n readonly validationMessage?: string;\r\n\r\n /** The `HTMLFormElement` associated with this element. */\r\n readonly form?: HTMLFormElement | null;\r\n\r\n /**\r\n * Handles the click event on the control's container.\r\n * @param {MouseEvent} event The `MouseEvent`.\r\n */\r\n onContainerClick?: (event: MouseEvent) => void;\r\n\r\n /**\r\n * Returns `true` if the element has no validity problems; otherwise,\r\n * returns `false`, fires an invalid event.\r\n */\r\n checkValidity?: () => boolean;\r\n}\r\n\r\nconst KNOWN_FORM_FIELD_TAGS = [\"m3e-input-chip-set\", \"m3e-select\"];\r\n\r\n/**\r\n * Determines whether a value is a `FormFieldControl`.\r\n * @param {unknown} value The value to test.\r\n * @returns {value is FormFieldControl} A value indicating whether `value` is a `FormFieldControl`.\r\n */\r\nexport function isFormFieldControl(value: unknown): value is FormFieldControl {\r\n return (\r\n value instanceof HTMLElement &&\r\n (value instanceof HTMLInputElement ||\r\n value instanceof HTMLTextAreaElement ||\r\n value instanceof HTMLSelectElement ||\r\n KNOWN_FORM_FIELD_TAGS.includes(value.tagName.toLowerCase()))\r\n );\r\n}\r\n\r\n/**\r\n * Locates the first `FormFieldControl` in a given slot.\r\n * @param {HTMLSlotElement} slot The slot in which to locate a `FormFieldControl`.\r\n * @returns {FormFieldControl | null} The `FormFieldControl` located in `slot`.\r\n */\r\nexport function findFormFieldControl(slot: HTMLSlotElement): FormFieldControl | null {\r\n for (const element of slot.assignedElements({ flatten: true })) {\r\n if (isFormFieldControl(element)) {\r\n return element;\r\n }\r\n\r\n const walker = document.createTreeWalker(element, NodeFilter.SHOW_ELEMENT);\r\n while (walker.nextNode()) {\r\n if (isFormFieldControl(walker.currentNode)) {\r\n return walker.currentNode;\r\n }\r\n }\r\n }\r\n\r\n return null;\r\n}\r\n","/**\r\n * Adapted from Angular Material Form Field\r\n * Source: https://github.com/angular/components/blob/main/src/material/form-field/form-field.ts\r\n *\r\n * @license MIT\r\n * Copyright (c) 2025 Google LLC\r\n * See LICENSE file in the project root for full license text.\r\n */\r\n\r\nimport { css, CSSResultGroup, html, LitElement, nothing, PropertyValues, unsafeCSS } from \"lit\";\r\nimport { property, query, state } from \"lit/decorators.js\";\r\n\r\nimport {\r\n AttachInternals,\r\n customElement,\r\n DesignToken,\r\n FocusController,\r\n getTextContent,\r\n hasAssignedNodes,\r\n hasCustomState,\r\n HoverController,\r\n interceptProperty,\r\n isReadOnlyMixin,\r\n MutationController,\r\n PressedController,\r\n ReconnectedCallback,\r\n registerStyleSheet,\r\n ResizeController,\r\n setCustomState,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { M3eAriaDescriber } from \"@m3e/web/core/a11y\";\r\n\r\nimport { findFormFieldControl, FormFieldControl } from \"./FormFieldControl\";\r\nimport { FormFieldVariant } from \"./FormFieldVariant\";\r\nimport { HideSubscriptType } from \"./HideSubscriptType\";\r\nimport { FloatLabelType } from \"./FloatLabelType\";\r\n\r\n/**\r\n * A container for form controls that applies Material Design styling and behavior.\r\n *\r\n * @description\r\n * The `m3e-form-field` component is a semantic, expressive container for form controls that anchors\r\n * label behavior, subscript messaging, and variant-specific layout. Designed according to Material Design 3\r\n * guidelines, it supports two visual variants—`outlined` and `filled`—each with dynamic elevation,\r\n * shape transitions, and adaptive color theming. The component responds to control state changes\r\n * (focus, hover, press, disabled, invalid) with smooth motion and semantic clarity, ensuring\r\n * visual hierarchy and emotional resonance.\r\n\r\n * The component is accessible by default, with ARIA annotations, contrast-safe color tokens,\r\n * and dynamic descriptions for hint and error messaging. It supports prefix and suffix content,\r\n * floating labels, and adaptive subscript visibility. When hosting a control with validation,\r\n * error messages are surfaced with `aria-invalid` and described for assistive technology.\r\n\r\n * Native form controls may not expose full state or messaging on their own. `m3e-form-field` bridges\r\n * these gaps by coordinating label floating, container styling, and subscript feedback.\r\n *\r\n * @example\r\n * The following example illustrates a basic usage of the `m3e-form-field`.\r\n * ```html\r\n * <m3e-form-field>\r\n * <label slot=\"label\" for=\"field\">Text field</label>\r\n * <input id=\"field\" />\r\n * </m3e-form-field>\r\n * ```\r\n * \r\n * @tag m3e-form-field\r\n *\r\n * @slot - Renders the control of the field.\r\n * @slot prefix - Renders content before the fields's control.\r\n * @slot prefix-text - Renders text before the fields's control.\r\n * @slot suffix - Renders content after the fields's control.\r\n * @slot suffix-text - Renders text after the fields's control.\r\n * @slot hint - Renders hint text in the fields's subscript, when the control is valid.\r\n * @slot error - Renders error text in the fields's subscript, when the control is invalid.\r\n *\r\n * @attr float-label - Specifies whether the label should float always or only when necessary.\r\n * @attr hide-required-marker - Whether the required marker should be hidden.\r\n * @attr hide-subscript - Whether subscript content is hidden.\r\n * @attr variant - The appearance variant of the field.\r\n *\r\n * @cssprop --m3e-form-field-font-size - Font size for the form field container text.\r\n * @cssprop --m3e-form-field-font-weight - Font weight for the form field container text.\r\n * @cssprop --m3e-form-field-line-height - Line height for the form field container text.\r\n * @cssprop --m3e-form-field-tracking - Letter spacing for the form field container text.\r\n * @cssprop --m3e-form-field-label-font-size - Font size for the floating label.\r\n * @cssprop --m3e-form-field-label-font-weight - Font weight for the floating label.\r\n * @cssprop --m3e-form-field-label-line-height - Line height for the floating label.\r\n * @cssprop --m3e-form-field-label-tracking - Letter spacing for the floating label.\r\n * @cssprop --m3e-form-field-subscript-font-size - Font size for hint and error text.\r\n * @cssprop --m3e-form-field-subscript-font-weight - Font weight for hint and error text.\r\n * @cssprop --m3e-form-field-subscript-line-height - Line height for hint and error text.\r\n * @cssprop --m3e-form-field-subscript-tracking - Letter spacing for hint and error text.\r\n * @cssprop --m3e-form-field-color - Text color for the form field container.\r\n * @cssprop --m3e-form-field-subscript-color - Color for hint and error text.\r\n * @cssprop --m3e-form-field-invalid-color - Color used when the control is invalid.\r\n * @cssprop --m3e-form-field-focused-outline-color - Outline color when focused.\r\n * @cssprop --m3e-form-field-focused-color - Label color when focused.\r\n * @cssprop --m3e-form-field-outline-color - Outline color in outlined variant.\r\n * @cssprop --m3e-form-field-container-color - Background color in filled variant.\r\n * @cssprop --m3e-form-field-hover-container-color - Hover background color in filled variant.\r\n * @cssprop --m3e-form-field-width - Width of the form field container.\r\n * @cssprop --m3e-form-field-icon-size - Size of prefix and suffix icons.\r\n * @cssprop --m3e-outlined-form-field-container-shape - Corner radius for outlined container.\r\n * @cssprop --m3e-form-field-container-shape - Corner radius for filled container.\r\n * @cssprop --m3e-form-field-hover-container-opacity - Opacity for hover background in filled variant.\r\n * @cssprop --m3e-form-field-disabled-opacity - Opacity for disabled text.\r\n * @cssprop --m3e-form-field-disabled-container-opacity - Opacity for disabled container background.\r\n */\r\n@customElement(\"m3e-form-field\")\r\nexport class M3eFormFieldElement extends ReconnectedCallback(AttachInternals(LitElement)) {\r\n static {\r\n registerStyleSheet(css`\r\n m3e-form-field input::placeholder,\r\n m3e-form-field textarea::placeholder {\r\n user-select: none;\r\n color: currentColor;\r\n transition: opacity ${DesignToken.motion.duration.extraLong1};\r\n }\r\n m3e-form-field[float-label=\"auto\"]:not(:is(:state(--float-label), :--float-label)):is(\r\n :state(--with-label),\r\n :--with-label\r\n )\r\n input::placeholder,\r\n m3e-form-field[float-label=\"auto\"]:not(:is(:state(--float-label), :--float-label)):is(\r\n :state(--with-label),\r\n :--with-label\r\n )\r\n textarea::placeholder {\r\n opacity: 0;\r\n transition: opacity 0s;\r\n }\r\n m3e-form-field[variant=\"outlined\"] m3e-input-chip-set {\r\n margin-block: calc(calc(3.5rem + ${DesignToken.density.calc(-3)}) / 4);\r\n }\r\n @media (prefers-reduced-motion) {\r\n m3e-form-field input::placeholder,\r\n m3e-form-field textarea::placeholder {\r\n transition: none !important;\r\n }\r\n }\r\n `);\r\n }\r\n /** The styles of the element. */\r\n static override styles: CSSResultGroup = css`\r\n :host {\r\n display: inline-flex;\r\n flex-direction: column;\r\n vertical-align: middle;\r\n font-size: var(--m3e-form-field-font-size, ${DesignToken.typescale.standard.body.large.fontSize});\r\n font-weight: var(--m3e-form-field-font-weight, ${DesignToken.typescale.standard.body.large.fontWeight});\r\n line-height: var(--m3e-form-field-line-height, ${DesignToken.typescale.standard.body.large.lineHeight});\r\n letter-spacing: var(--m3e-form-field-tracking, ${DesignToken.typescale.standard.body.large.tracking});\r\n width: var(--m3e-form-field-width, 14.5rem);\r\n color: var(--_form-field-color);\r\n }\r\n :host(:not(:is(:state(--disabled), :--disabled))) .base {\r\n cursor: var(--_form-field-cursor);\r\n }\r\n .base {\r\n display: flex;\r\n align-items: center;\r\n position: relative;\r\n min-height: calc(3.5rem + ${DesignToken.density.calc(-3)});\r\n --_form-field-label-font-size: var(\r\n --m3e-form-field-label-font-size,\r\n ${DesignToken.typescale.standard.body.small.fontSize}\r\n );\r\n --_form-field-label-line-height: var(\r\n --m3e-form-field-label-line-height,\r\n ${DesignToken.typescale.standard.body.small.lineHeight}\r\n );\r\n }\r\n .content {\r\n display: flex;\r\n align-items: center;\r\n position: relative;\r\n flex: 1 1 auto;\r\n min-width: 0;\r\n min-height: var(--m3e-form-field-icon-size, 1.5rem);\r\n }\r\n .prefix,\r\n .suffix {\r\n display: flex;\r\n align-items: center;\r\n position: relative;\r\n user-select: none;\r\n flex: none;\r\n font-size: var(--m3e-form-field-icon-size, 1.5rem);\r\n }\r\n .prefix-text,\r\n .suffix-text {\r\n opacity: 1;\r\n transition: opacity ${DesignToken.motion.duration.extraLong1};\r\n user-select: none;\r\n flex: none;\r\n }\r\n .input {\r\n display: inline-flex;\r\n flex-wrap: wrap;\r\n flex: 1 1 auto;\r\n min-width: 0;\r\n }\r\n .label {\r\n display: flex;\r\n position: absolute;\r\n pointer-events: none;\r\n user-select: none;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n font-size: var(--m3e-form-field-label-font-size, ${DesignToken.typescale.standard.body.small.fontSize});\r\n font-weight: var(--m3e-form-field-label-font-weight, ${DesignToken.typescale.standard.body.small.fontWeight});\r\n line-height: var(--m3e-form-field-label-line-height, ${DesignToken.typescale.standard.body.small.lineHeight});\r\n letter-spacing: var(--m3e-form-field-label-tracking, ${DesignToken.typescale.standard.body.small.tracking});\r\n color: var(--_form-field-label-color, inherit);\r\n transition: ${unsafeCSS(\r\n `top ${DesignToken.motion.duration.short4}, \r\n font-size ${DesignToken.motion.duration.short4}, \r\n line-height ${DesignToken.motion.duration.short4}`,\r\n )};\r\n }\r\n :host(:is(:state(--with-select), :--with-select)) .label {\r\n margin-inline-end: 1.5rem;\r\n }\r\n ::slotted([slot=\"label\"]) {\r\n white-space: nowrap;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n }\r\n .subscript {\r\n display: inline-flex;\r\n width: 100%;\r\n margin-top: 0.25rem;\r\n font-size: var(--m3e-form-field-subscript-font-size, ${DesignToken.typescale.standard.body.small.fontSize});\r\n font-weight: var(--m3e-form-field-subscript-font-weight, ${DesignToken.typescale.standard.body.small.fontWeight});\r\n line-height: var(--m3e-form-field-subscript-line-height, ${DesignToken.typescale.standard.body.small.lineHeight});\r\n letter-spacing: var(--m3e-form-field-subscript-tracking, ${DesignToken.typescale.standard.body.small.tracking});\r\n min-height: var(--m3e-form-field-subscript-line-height, ${DesignToken.typescale.standard.body.small.lineHeight});\r\n color: var(--m3e-form-field-subscript-color, ${DesignToken.color.onSurfaceVariant});\r\n }\r\n .error,\r\n .hint {\r\n flex: 1 1 auto;\r\n }\r\n :host([hide-subscript=\"always\"]) .subscript {\r\n display: none;\r\n }\r\n :host([hide-subscript=\"auto\"]:not(:is(:state(--invalid), :--invalid))) .subscript {\r\n opacity: 0;\r\n margin-top: 0.25rem;\r\n transform: translateY(-0.25rem);\r\n transition: ${unsafeCSS(\r\n `opacity ${DesignToken.motion.duration.short4}, \r\n transform ${DesignToken.motion.duration.short4}`,\r\n )};\r\n }\r\n :host([hide-subscript=\"auto\"]:not(:is(:state(--invalid), :--invalid)):focus-within) .subscript,\r\n :host([hide-subscript=\"auto\"]:not(:is(:state(--invalid), :--invalid)):is(:state(--pressed), :--pressed))\r\n .subscript {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n :host(:is(:state(--invalid), :--invalid)) .hint {\r\n display: none;\r\n }\r\n :host(:not(:is(:state(--invalid), :--invalid))) .error {\r\n display: none;\r\n }\r\n ::slotted(input),\r\n ::slotted(textarea),\r\n ::slotted(select) {\r\n outline: unset;\r\n border: unset;\r\n background-color: transparent;\r\n box-shadow: none;\r\n font-family: inherit;\r\n font-size: inherit;\r\n line-height: inherit;\r\n letter-spacing: inherit;\r\n color: var(--_form-field-input-color, inherit);\r\n flex: 1 1 auto;\r\n min-width: 0;\r\n padding: unset;\r\n }\r\n ::slotted(textarea) {\r\n scrollbar-width: ${DesignToken.scrollbar.thinWidth};\r\n scrollbar-color: ${DesignToken.scrollbar.color};\r\n }\r\n ::slotted(m3e-select),\r\n ::slotted(m3e-input-chip-set) {\r\n flex: 1 1 auto;\r\n min-width: 0;\r\n }\r\n :host([float-label=\"auto\"]:not(:is(:state(--float-label), :--float-label)):not(:is(:state(--pressed), :--pressed)))\r\n .label {\r\n font-size: inherit;\r\n }\r\n\r\n :host([float-label=\"auto\"]:not(:is(:state(--float-label), :--float-label)):is(:state(--with-label), :--with-label))\r\n .prefix-text,\r\n :host([float-label=\"auto\"]:not(:is(:state(--float-label), :--float-label)):is(:state(--with-label), :--with-label))\r\n .suffix-text {\r\n opacity: 0;\r\n transition: opacity 0s;\r\n }\r\n .prefix {\r\n margin-inline-start: 1rem;\r\n }\r\n :host(:is(:state(--with-prefix), :--with-prefix)) .prefix {\r\n margin-inline-end: 1rem;\r\n margin-inline-start: 0.75rem;\r\n }\r\n .suffix {\r\n margin-inline-end: 1rem;\r\n }\r\n :host(:is(:state(--with-suffix), :--with-suffix)) .suffix {\r\n margin-inline-start: 0.25rem;\r\n margin-inline-end: 0.5rem;\r\n }\r\n :host(:is(:state(--with-suffix), :--with-suffix):is(:state(--with-select), :--with-select)) .suffix {\r\n margin-inline-start: unset;\r\n }\r\n :host(:is(:state(--with-select), :--with-select)) .suffix-text {\r\n display: none;\r\n }\r\n :host([variant=\"outlined\"]) .label {\r\n margin-top: calc(0px - var(--_form-field-label-line-height) / 2);\r\n }\r\n :host([variant=\"outlined\"]) .outline {\r\n position: absolute;\r\n display: flex;\r\n pointer-events: none;\r\n left: 0;\r\n top: 0;\r\n bottom: 0;\r\n right: 0;\r\n }\r\n :host([variant=\"outlined\"]) .pseudo-label {\r\n visibility: hidden;\r\n margin-inline-end: 0.5rem;\r\n font-size: var(--_form-field-label-font-size);\r\n line-height: var(--_form-field-label-line-height);\r\n letter-spacing: var(--_form-field-label-tracking);\r\n max-width: 100%;\r\n transition-property: max-width, margin-inline-end;\r\n transition-duration: 1ms;\r\n }\r\n :host([variant=\"outlined\"]:is(:state(--required), :--required):not([hide-required-marker])) .pseudo-label {\r\n margin-inline-end: 0.25rem;\r\n }\r\n :host(\r\n [variant=\"outlined\"][float-label=\"auto\"]:not(:is(:state(--float-label), :--float-label)):not(\r\n :is(:state(--pressed), :--pressed)\r\n )\r\n )\r\n .pseudo-label {\r\n max-width: 0;\r\n margin-inline-end: 0px;\r\n transition-delay: ${DesignToken.motion.duration.short2};\r\n }\r\n :host([variant=\"outlined\"]) .outline-start,\r\n :host([variant=\"outlined\"]) .outline-notch,\r\n :host([variant=\"outlined\"]) .outline-end {\r\n box-sizing: border-box;\r\n border-width: var(--_form-field-outline-size, 1px);\r\n border-color: var(--_form-field-outline-color);\r\n transition: border-color ${DesignToken.motion.duration.short4};\r\n }\r\n :host([variant=\"outlined\"]:not(:is(:state(--with-label), :--with-label))) .outline-notch {\r\n display: none;\r\n }\r\n :host([variant=\"outlined\"]) .outline-start {\r\n min-width: 0.75rem;\r\n border-top-style: solid;\r\n border-inline-start-style: solid;\r\n border-bottom-style: solid;\r\n border-start-start-radius: var(--m3e-outlined-form-field-container-shape, ${DesignToken.shape.corner.extraSmall});\r\n border-end-start-radius: var(--m3e-outlined-form-field-container-shape, ${DesignToken.shape.corner.extraSmall});\r\n }\r\n :host([variant=\"outlined\"]) .outline-notch {\r\n border-bottom-style: solid;\r\n }\r\n :host([variant=\"outlined\"]) .outline-end {\r\n flex-grow: 1;\r\n min-width: 1rem;\r\n border-top-style: solid;\r\n border-inline-end-style: solid;\r\n border-bottom-style: solid;\r\n border-start-end-radius: var(--m3e-outlined-form-field-container-shape, ${DesignToken.shape.corner.extraSmall});\r\n border-end-end-radius: var(--m3e-outlined-form-field-container-shape, ${DesignToken.shape.corner.extraSmall});\r\n }\r\n :host([variant=\"outlined\"]:is(:state(--with-prefix), :--with-prefix)) .outline-start {\r\n min-width: calc(1.25rem + var(--_prefix-width, 0px) + 0.25rem);\r\n }\r\n :host([variant=\"outlined\"]:not(:is(:state(--disabled), :--disabled))) .base:hover .outline,\r\n :host([variant=\"outlined\"]:not(:is(:state(--disabled), :--disabled)):focus-within) .outline,\r\n :host([variant=\"outlined\"]:not(:is(:state(--disabled), :--disabled)):is(:state(--pressed), :--pressed)) .outline {\r\n --_form-field-outline-size: 2px;\r\n }\r\n :host([variant=\"outlined\"]) .subscript {\r\n margin-inline: 1rem;\r\n width: calc(100% - 2rem);\r\n }\r\n :host([variant=\"outlined\"]) .content {\r\n min-height: calc(3.5rem + ${DesignToken.density.calc(-3)});\r\n --_form-field-label-font-size: var(\r\n --m3e-form-field-label-font-size,\r\n ${DesignToken.typescale.standard.body.small.fontSize}\r\n );\r\n }\r\n :host(\r\n [variant=\"outlined\"][float-label=\"auto\"]:not(:is(:state(--float-label), :--float-label)):not(\r\n :is(:state(--pressed), :--pressed)\r\n )\r\n )\r\n .label {\r\n margin-top: unset;\r\n line-height: calc(3.5rem + ${DesignToken.density.calc(-3)});\r\n --_form-field-label-font-size: var(\r\n --m3e-form-field-label-font-size,\r\n ${DesignToken.typescale.standard.body.small.fontSize}\r\n );\r\n }\r\n :host([variant=\"filled\"]) .base {\r\n --_select-arrow-margin-top: calc(\r\n 0px - calc(1rem / max(calc(0 - calc(var(--md-sys-density-scale, 0) + var(--md-sys-density-scale, 0))), 1))\r\n );\r\n }\r\n :host([variant=\"filled\"]) .base::before {\r\n content: \"\";\r\n box-sizing: border-box;\r\n position: absolute;\r\n pointer-events: none;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n border-bottom-style: solid;\r\n border-width: 1px;\r\n border-radius: var(--m3e-form-field-container-shape, ${DesignToken.shape.corner.extraSmallTop});\r\n border-color: var(--_form-field-outline-color);\r\n background-color: var(--_form-field-container-color);\r\n }\r\n :host([variant=\"filled\"]:not(:is(:state(--disabled), :--disabled))) .base:hover::before,\r\n :host([variant=\"filled\"]:not(:is(:state(--disabled), :--disabled)):focus-within) .base::before,\r\n :host([variant=\"filled\"]:not(:is(:state(--disabled), :--disabled)):is(:state(--pressed), :--pressed))\r\n .base::before {\r\n border-width: 3px;\r\n }\r\n :host([variant=\"filled\"]) .base::after {\r\n content: \"\";\r\n box-sizing: border-box;\r\n position: absolute;\r\n pointer-events: none;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n background-color: var(--_form-field-hover-container-color);\r\n transition: background-color ${DesignToken.motion.duration.short4};\r\n }\r\n :host([variant=\"filled\"]) .subscript {\r\n margin-inline: 1rem;\r\n width: calc(100% - 2rem);\r\n }\r\n :host([variant=\"filled\"]) .content {\r\n padding-top: calc(1.5rem + ${DesignToken.density.calc(-3)});\r\n margin-bottom: 0.5rem;\r\n }\r\n :host([variant=\"filled\"]) .label {\r\n top: max(0px, calc(0.5rem + ${DesignToken.density.calc(-3)}));\r\n }\r\n :host(\r\n [variant=\"filled\"][float-label=\"auto\"]:not(:is(:state(--float-label), :--float-label)):not(\r\n :is(:state(--pressed), :--pressed)\r\n )\r\n )\r\n .label {\r\n top: 0px;\r\n line-height: calc(3.5rem + ${DesignToken.density.calc(-3)} - 0.0625rem);\r\n --_form-field-label-font-size: var(\r\n --m3e-form-field-label-font-size,\r\n ${DesignToken.typescale.standard.body.small.fontSize}\r\n );\r\n }\r\n :host(:not(:is(:state(--disabled), :--disabled)):not(:focus-within):not(:is(:state(--pressed), :--pressed)))\r\n .base:hover {\r\n --_form-field-hover-container-color: color-mix(\r\n in srgb,\r\n var(--m3e-form-field-hover-container-color, ${DesignToken.color.onSurface})\r\n var(--m3e-form-field-hover-container-opacity, 8%),\r\n transparent\r\n );\r\n }\r\n :host(:not(:is(:state(--disabled), :--disabled)):not(:is(:state(--invalid), :--invalid))) {\r\n color: var(--m3e-form-field-color, ${DesignToken.color.onSurface});\r\n }\r\n :host([variant=\"outlined\"]:not(:is(:state(--disabled), :--disabled)):not(:is(:state(--invalid), :--invalid)))\r\n .base {\r\n --_form-field-outline-color: var(--m3e-form-field-outline-color, ${DesignToken.color.outline});\r\n }\r\n :host([variant=\"filled\"]:not(:is(:state(--disabled), :--disabled)):not(:is(:state(--invalid), :--invalid))) .base {\r\n --_form-field-outline-color: var(--m3e-form-field-outline-color, ${DesignToken.color.onSurfaceVariant});\r\n }\r\n :host(\r\n [variant=\"outlined\"]:not(:is(:state(--disabled), :--disabled)):not(\r\n :is(:state(--invalid), :--invalid)\r\n ):focus-within\r\n )\r\n .base,\r\n :host(\r\n [variant=\"outlined\"]:not(:is(:state(--disabled), :--disabled)):not(:is(:state(--invalid), :--invalid)):is(\r\n :state(--pressed),\r\n :--pressed\r\n )\r\n )\r\n .base,\r\n :host(\r\n [variant=\"filled\"]:not(:is(:state(--disabled), :--disabled)):not(\r\n :is(:state(--invalid), :--invalid)\r\n ):focus-within\r\n )\r\n .base,\r\n :host(\r\n [variant=\"filled\"]:not(:is(:state(--disabled), :--disabled)):not(:is(:state(--invalid), :--invalid)):is(\r\n :state(--pressed),\r\n :--pressed\r\n )\r\n )\r\n .base {\r\n --_form-field-outline-color: var(--m3e-form-field-focused-outline-color, ${DesignToken.color.primary});\r\n --_form-field-label-color: var(--m3e-form-field-focused-color, ${DesignToken.color.primary});\r\n }\r\n :host(:not(:is(:state(--disabled), :--disabled))) .base {\r\n --_form-field-container-color: var(\r\n --m3e-form-field-container-color,\r\n ${DesignToken.color.surfaceContainerHighest}\r\n );\r\n }\r\n :host(:not(:is(:state(--disabled), :--disabled)):is(:state(--invalid), :--invalid)) .base {\r\n --_form-field-label-color: var(--m3e-form-field-invalid-color, ${DesignToken.color.error});\r\n --_form-field-outline-color: var(--m3e-form-field-invalid-color, ${DesignToken.color.error});\r\n }\r\n :host(:not(:is(:state(--disabled), :--disabled)):is(:state(--invalid), :--invalid)) .subscript {\r\n color: var(--m3e-form-field-invalid-color, ${DesignToken.color.error});\r\n }\r\n :host(:is(:state(--disabled), :--disabled)) {\r\n color: color-mix(\r\n in srgb,\r\n var(--m3e-form-field-disabled-color, ${DesignToken.color.onSurface}) var(--m3e-form-field-disabled-opacity, 38%),\r\n transparent\r\n );\r\n }\r\n :host(:is(:state(--disabled), :--disabled)) .base {\r\n --_form-field-container-color: color-mix(\r\n in srgb,\r\n var(--m3e-form-field-disabled-container-color, ${DesignToken.color.onSurface})\r\n var(--m3e-form-field-disabled-container-opacity, 4%),\r\n transparent\r\n );\r\n }\r\n :host(:is(:state(--no-animate), :--no-animate)) *,\r\n :host(:is(:state(--no-animate), :--no-animate)) *::before,\r\n :host(:is(:state(--no-animate), :--no-animate)) *::after {\r\n transition: none !important;\r\n }\r\n @media (forced-colors: active) {\r\n :host([variant=\"filled\"]) .base::after {\r\n transition: none;\r\n }\r\n :host {\r\n --_form-field-outline-color: CanvasText;\r\n }\r\n :host(:is(:state(--disabled), :--disabled)) {\r\n --_form-field-input-color: GrayText;\r\n --_form-field-color: GrayText;\r\n --_form-field-label-color: GrayText;\r\n --_form-field-outline-color: GrayText;\r\n }\r\n }\r\n @media (prefers-reduced-motion) {\r\n .base::before,\r\n .prefix-text,\r\n .suffix-text,\r\n .label,\r\n .subscript,\r\n .outline-start,\r\n .outline-notch,\r\n .outline-end,\r\n .pseudo-label {\r\n transition: none !important;\r\n }\r\n }\r\n `;\r\n\r\n /** @private */ #control: FormFieldControl | null = null;\r\n /** @private */ #removeValueInterceptor?: () => void;\r\n /** @private */ readonly #formResetHandler = () => this.#handleFormReset();\r\n /** @private */ readonly #controlInvalidHandler = () => this.#handleControlInvalid();\r\n\r\n /** @private */\r\n readonly #controlMutationController = new MutationController(this, {\r\n target: null,\r\n config: { attributeFilter: [\"disabled\", \"readonly\", \"required\"] },\r\n callback: () => this.notifyControlStateChange(),\r\n });\r\n\r\n /** @private */\r\n readonly #resizeController = new ResizeController(this, {\r\n target: null,\r\n callback: () => this.#handlePrefixResize(),\r\n });\r\n\r\n /** @private */\r\n readonly #focusController = new FocusController(this, {\r\n target: null,\r\n callback: (focused) => {\r\n focused = focused && !(this.#control?.disabled ?? true);\r\n setCustomState(this, \"--no-animate\", false);\r\n this.#focused = focused;\r\n if (focused) {\r\n setCustomState(this, \"--float-label\", true);\r\n } else {\r\n this._invalid = !(this.#control?.checkValidity?.() ?? true);\r\n this.notifyControlStateChange();\r\n }\r\n },\r\n });\r\n\r\n /** @private */ @query(\".base\") private readonly _base!: HTMLElement;\r\n /** @private */ @query(\".prefix\") private readonly _prefix!: HTMLElement;\r\n /** @private */ @query(\".error\") private readonly _error!: HTMLElement;\r\n /** @private */ @query(\".hint\") private readonly _hint!: HTMLElement;\r\n\r\n /** @private */\r\n readonly #hintMutationController = new MutationController(this, {\r\n target: null,\r\n config: { childList: true, subtree: true },\r\n callback: () => this.#handleHintChange(),\r\n });\r\n\r\n /** @private */\r\n readonly #errorMutationController = new MutationController(this, {\r\n target: null,\r\n config: { childList: true, subtree: true },\r\n callback: () => this.#handleErrorChange(),\r\n });\r\n\r\n /** @private */\r\n readonly #pressedController = new PressedController(this, {\r\n target: null,\r\n callback: (pressed) => setCustomState(this, \"--pressed\", pressed && !(this.#control?.disabled ?? true)),\r\n });\r\n\r\n /** @private */ #focused = false;\r\n /** @private */ @state() private _pseudoLabel = \"\";\r\n /** @private */ @state() private _required = false;\r\n /** @private */ @state() private _invalid = false;\r\n /** @private */ @state() private _validationMessage = \"\";\r\n /** @private */ #hintText = \"\";\r\n /** @private */ #errorText = \"\";\r\n\r\n constructor() {\r\n super();\r\n\r\n new HoverController(this, { callback: () => setCustomState(this, \"--no-animate\", false) });\r\n }\r\n\r\n /** @private */\r\n get #shouldFloatLabel(): boolean {\r\n return this.#control?.shouldLabelFloat !== undefined\r\n ? this.#control.shouldLabelFloat === true\r\n : typeof this.#control?.value == \"string\" && this.#control.value.length > 0;\r\n }\r\n\r\n /** A reference to the element used to anchor dropdown menus. */\r\n get menuAnchor() {\r\n return this._base;\r\n }\r\n\r\n /** A reference to the hosted form field control. */\r\n get control() {\r\n return this.#control;\r\n }\r\n\r\n /**\r\n * The appearance variant of the field.\r\n * @default \"outlined\"\r\n */\r\n @property({ reflect: true }) variant: FormFieldVariant = \"outlined\";\r\n\r\n /**\r\n * Whether the required marker should be hidden.\r\n * @default false\r\n */\r\n @property({ attribute: \"hide-required-marker\", type: Boolean, reflect: true }) hideRequiredMarker = false;\r\n\r\n /**\r\n * Whether subscript content is hidden.\r\n * @default \"auto\"\r\n */\r\n @property({ attribute: \"hide-subscript\", reflect: true }) hideSubscript: HideSubscriptType = \"auto\";\r\n\r\n /**\r\n * Specifies whether the label should float always or only when necessary.\r\n * @default \"auto\"\r\n */\r\n @property({ attribute: \"float-label\", reflect: true }) floatLabel: FloatLabelType = \"auto\";\r\n\r\n /**\r\n * Notifies the form field that the state of the hosted `control` has changed.\r\n * @param {boolean} [checkValidity=false] Whether to check validity.\r\n */\r\n notifyControlStateChange(checkValidity: boolean = false): void {\r\n this._required = this.#control?.required === true;\r\n setCustomState(this, \"--required\", this._required);\r\n setCustomState(this, \"--disabled\", this.#control?.disabled === true);\r\n setCustomState(this, \"--readonly\", isReadOnlyMixin(this.#control) && this.#control.readOnly === true);\r\n if (this.floatLabel === \"auto\") {\r\n setCustomState(this, \"--float-label\", this.#shouldFloatLabel || this.#focused);\r\n }\r\n\r\n if (checkValidity) {\r\n this._invalid = !(this.#control?.checkValidity?.() ?? true);\r\n }\r\n\r\n setCustomState(this, \"--invalid\", this._invalid);\r\n\r\n this._validationMessage = this.#control?.validationMessage ?? \"\";\r\n if (!this.isUpdatePending) {\r\n this.performUpdate();\r\n }\r\n }\r\n\r\n /** @inheritdoc */\r\n override connectedCallback(): void {\r\n super.connectedCallback();\r\n // Label animations are disabled on initial paint.\r\n setCustomState(this, \"--no-animate\", true);\r\n }\r\n\r\n /** @inheritdoc */\r\n override disconnectedCallback(): void {\r\n super.disconnectedCallback();\r\n this.#changeControl(null);\r\n }\r\n\r\n /** @inheritdoc */\r\n override reconnectedCallback(): void {\r\n super.reconnectedCallback();\r\n this.#initialize();\r\n }\r\n\r\n /** @inheritdoc */\r\n protected override firstUpdated(_changedProperties: PropertyValues): void {\r\n super.firstUpdated(_changedProperties);\r\n this.#initialize();\r\n }\r\n\r\n /** @inheritdoc */\r\n protected override update(changedProperties: PropertyValues): void {\r\n super.update(changedProperties);\r\n\r\n if (changedProperties.has(\"_invalid\") && this.#control) {\r\n this.#control.ariaInvalid = this._invalid ? \"true\" : null;\r\n\r\n if (this.#errorText) {\r\n if (this._invalid) {\r\n M3eAriaDescriber.describe(this.#control, this.#errorText);\r\n } else {\r\n M3eAriaDescriber.removeDescription(this.#control, this.#errorText);\r\n }\r\n }\r\n }\r\n }\r\n\r\n /** @inheritdoc */\r\n protected override render(): unknown {\r\n return html`<div class=\"base\" @click=\"${this.#handleContainerClick}\">\r\n ${this.variant === \"outlined\"\r\n ? html`<div class=\"outline\" aria-hidden=\"true\">\r\n <div class=\"outline-start\"></div>\r\n <div class=\"outline-notch\">\r\n <div class=\"pseudo-label\">\r\n ${this._pseudoLabel} ${!this.hideRequiredMarker && this._required ? html`&nbsp;*` : nothing}\r\n </div>\r\n </div>\r\n <div class=\"outline-end\"></div>\r\n </div>`\r\n : nothing}\r\n <div class=\"prefix\">\r\n <slot name=\"prefix\" @slotchange=\"${this.#handlePrefixSlotChange}\"></slot>\r\n </div>\r\n <div class=\"content\">\r\n <span class=\"prefix-text\"><slot name=\"prefix-text\"></slot></span>\r\n <span class=\"input\">\r\n <slot @slotchange=\"${this.#handleSlotChange}\" @change=\"${this.#handleControlChange}\"></slot>\r\n </span>\r\n <span class=\"suffix-text\"><slot name=\"suffix-text\"></slot></span>\r\n <span class=\"label\">\r\n <slot name=\"label\" @slotchange=\"${this.#handleLabelSlotChange}\"></slot>\r\n ${!this.hideRequiredMarker && this._required\r\n ? html`<span class=\"required-marker\" aria-hidden=\"true\">&nbsp;*</span>`\r\n : nothing}\r\n </span>\r\n </div>\r\n <div\r\n class=\"suffix\"\r\n @click=\"${this.#stopPropagation}\"\r\n @focusin=\"${this.#stopPropagation}\"\r\n @focusout=\"${this.#stopPropagation}\"\r\n @pointerdown=\"${this.#stopPropagation}\"\r\n @keydown=\"${this.#stopPropagation}\"\r\n @keyup=\"${this.#stopPropagation}\"\r\n >\r\n <slot name=\"suffix\" @slotchange=\"${this.#handleSuffixSlotChange}\"></slot>\r\n </div>\r\n </div>\r\n <span class=\"subscript\" aria-hidden=\"true\">\r\n <span class=\"error\"><slot name=\"error\">${this._validationMessage}</slot></span>\r\n <span class=\"hint\"><slot name=\"hint\"></slot></span>\r\n </span>`;\r\n }\r\n\r\n /** @private */\r\n #initialize(): void {\r\n this.#focusController.observe(this._base);\r\n this.#pressedController.observe(this._base);\r\n\r\n this.#hintMutationController.observe(this._hint);\r\n this.#handleHintChange();\r\n\r\n this.#errorMutationController.observe(this._error);\r\n this.#handleErrorChange();\r\n }\r\n\r\n /** @private */\r\n #stopPropagation(e: Event): void {\r\n e.stopImmediatePropagation();\r\n e.stopPropagation();\r\n }\r\n\r\n /** @private */\r\n #handleLabelSlotChange(e: Event): void {\r\n const assignedElements = (<HTMLSlotElement>e.target).assignedElements({ flatten: true });\r\n setCustomState(this, \"--with-label\", assignedElements.length > 0);\r\n this._pseudoLabel = assignedElements[0]?.textContent ?? \"\";\r\n }\r\n\r\n /** @private */\r\n #handlePrefixSlotChange(e: Event): void {\r\n setCustomState(this, \"--with-prefix\", hasAssignedNodes(<HTMLSlotElement>e.target));\r\n this.#resizeController.observe(this._prefix);\r\n }\r\n\r\n /** @private */\r\n #handleSuffixSlotChange(e: Event): void {\r\n setCustomState(this, \"--with-suffix\", hasAssignedNodes(<HTMLSlotElement>e.target));\r\n }\r\n\r\n /** @private */\r\n #handlePrefixResize(): void {\r\n if (this.variant === \"outlined\") {\r\n this._base.style.setProperty(\"--_prefix-width\", `${this._prefix.clientWidth}px`);\r\n }\r\n }\r\n\r\n /** @private */\r\n #handleSlotChange(e: Event): void {\r\n this.#changeControl(findFormFieldControl(<HTMLSlotElement>e.target));\r\n }\r\n\r\n /** @private */\r\n #handleContainerClick(e: MouseEvent): void {\r\n if (this.#control && !this.#focused && !this.#control.disabled) {\r\n if (this.#control.onContainerClick) {\r\n this.#control.onContainerClick(e);\r\n } else {\r\n this.#control.focus();\r\n }\r\n }\r\n }\r\n\r\n /** @private */\r\n #handleControlInvalid(): void {\r\n this._invalid = true;\r\n this.notifyControlStateChange();\r\n }\r\n\r\n /** @private */\r\n #handleControlChange(): void {\r\n this._invalid = !(this.#control?.checkValidity?.() ?? true);\r\n this.notifyControlStateChange();\r\n }\r\n\r\n /** @private */\r\n #handleFormReset(): void {\r\n this._invalid = false;\r\n setTimeout(() => this.notifyControlStateChange());\r\n }\r\n\r\n /** @private */\r\n #changeControl(control: FormFieldControl | null): void {\r\n if (this.#control === control) return;\r\n if (this.#control) {\r\n if (this.#hintText) {\r\n M3eAriaDescriber.removeDescription(this.#control, this.#hintText);\r\n }\r\n if (this.#errorText) {\r\n M3eAriaDescriber.removeDescription(this.#control, this.#errorText);\r\n }\r\n\r\n this.#controlMutationController.unobserve(this.#control);\r\n this.#control.removeEventListener(\"invalid\", this.#controlInvalidHandler);\r\n this.#control.form?.removeEventListener(\"reset\", this.#formResetHandler);\r\n this.#removeValueInterceptor?.();\r\n this.#removeValueInterceptor = undefined;\r\n }\r\n this.#control = control;\r\n\r\n if ([\"INPUT\", \"TEXTAREA\"].includes(this.#control?.tagName ?? \"\")) {\r\n this._base.style.setProperty(\"--_form-field-cursor\", \"text\");\r\n } else {\r\n this._base.style.removeProperty(\"--_form-field-cursor\");\r\n }\r\n\r\n setCustomState(this, \"--with-select\", this.#control?.tagName === \"M3E-SELECT\");\r\n if (hasCustomState(this, \"--with-select\")) {\r\n this._base.style.setProperty(\"--_form-field-cursor\", \"pointer\");\r\n }\r\n\r\n if (this.#control) {\r\n this.#controlMutationController.observe(this.#control);\r\n this.#control.addEventListener(\"invalid\", this.#controlInvalidHandler);\r\n this.#control.form?.addEventListener(\"reset\", this.#formResetHandler);\r\n this.#control.removeAttribute(\"aria-invalid\");\r\n\r\n if (this.#hintText) {\r\n M3eAriaDescriber.describe(this.#control, this.#hintText);\r\n }\r\n\r\n this.notifyControlStateChange();\r\n\r\n const tagname = this.#control.tagName.toLowerCase();\r\n if (tagname.startsWith(\"m3e-\") && !customElements.get(tagname)) {\r\n customElements.whenDefined(tagname).then(() => this.#bindValueInterceptor());\r\n } else {\r\n this.#bindValueInterceptor();\r\n }\r\n }\r\n }\r\n\r\n /** @private */\r\n #bindValueInterceptor(): void {\r\n if (!this.#control) return;\r\n this.#removeValueInterceptor = interceptProperty(this.#control, \"value\", {\r\n set: (value, setter) => {\r\n setter(value);\r\n this.notifyControlStateChange(true);\r\n },\r\n });\r\n }\r\n\r\n /** @private */\r\n #handleHintChange(): void {\r\n const hintText = getTextContent(this._hint, true);\r\n if (hintText === this.#hintText) return;\r\n\r\n if (this.#control && this.#hintText) {\r\n M3eAriaDescriber.removeDescription(this.#control, this.#hintText);\r\n }\r\n\r\n this.#hintText = hintText;\r\n\r\n if (this.#control && this.#hintText) {\r\n M3eAriaDescriber.describe(this.#control, this.#hintText);\r\n }\r\n }\r\n\r\n /** @private */\r\n #handleErrorChange(): void {\r\n const errorText = getTextContent(this._error, true);\r\n if (errorText === this.#errorText) return;\r\n\r\n if (this.#control && this.#errorText) {\r\n M3eAriaDescriber.removeDescription(this.#control, this.#errorText);\r\n }\r\n\r\n this.#errorText = errorText;\r\n\r\n if (this.#control && this.#errorText && this._invalid) {\r\n M3eAriaDescriber.describe(this.#control, this.#errorText);\r\n }\r\n }\r\n}\r\n\r\ndeclare global {\r\n interface HTMLElementTagNameMap {\r\n \"m3e-form-field\": M3eFormFieldElement;\r\n }\r\n}\r\n"],"names":["KNOWN_FORM_FIELD_TAGS","isFormFieldControl","value","HTMLElement","HTMLInputElement","HTMLTextAreaElement","HTMLSelectElement","includes","tagName","toLowerCase","findFormFieldControl","slot","element","assignedElements","flatten","walker","document","createTreeWalker","NodeFilter","SHOW_ELEMENT","nextNode","currentNode","M3eFormFieldElement","ReconnectedCallback","AttachInternals","LitElement","constructor","_M3eFormFieldElement_control","set","_M3eFormFieldElement_removeValueInterceptor","_M3eFormFieldElement_formResetHandler","__classPrivateFieldGet","_M3eFormFieldElement_instances","_M3eFormFieldElement_handleFormReset","call","_M3eFormFieldElement_controlInvalidHandler","_M3eFormFieldElement_handleControlInvalid","_M3eFormFieldElement_controlMutationController","MutationController","target","config","attributeFilter","callback","notifyControlStateChange","_M3eFormFieldElement_resizeController","ResizeController","_M3eFormFieldElement_handlePrefixResize","_M3eFormFieldElement_focusController","FocusController","focused","disabled","setCustomState","__classPrivateFieldSet","_M3eFormFieldElement_focused","_invalid","checkValidity","_M3eFormFieldElement_hintMutationController","childList","subtree","_M3eFormFieldElement_handleHintChange","_M3eFormFieldElement_errorMutationController","_M3eFormFieldElement_handleErrorChange","_M3eFormFieldElement_pressedController","PressedController","pressed","_pseudoLabel","_required","_validationMessage","_M3eFormFieldElement_hintText","_M3eFormFieldElement_errorText","variant","hideRequiredMarker","hideSubscript","floatLabel","HoverController","menuAnchor","_base","control","required","isReadOnlyMixin","readOnly","_M3eFormFieldElement_shouldFloatLabel_get","validationMessage","isUpdatePending","performUpdate","connectedCallback","disconnectedCallback","_M3eFormFieldElement_changeControl","reconnectedCallback","_M3eFormFieldElement_initialize","firstUpdated","_changedProperties","update","changedProperties","has","ariaInvalid","M3eAriaDescriber","describe","removeDescription","render","html","_M3eFormFieldElement_handleContainerClick","nothing","_M3eFormFieldElement_handlePrefixSlotChange","_M3eFormFieldElement_handleSlotChange","_M3eFormFieldElement_handleControlChange","_M3eFormFieldElement_handleLabelSlotChange","_M3eFormFieldElement_stopPropagation","_M3eFormFieldElement_handleSuffixSlotChange","shouldLabelFloat","undefined","length","observe","_hint","_error","e","stopImmediatePropagation","stopPropagation","textContent","hasAssignedNodes","_prefix","style","setProperty","clientWidth","onContainerClick","focus","setTimeout","unobserve","removeEventListener","form","removeProperty","hasCustomState","addEventListener","removeAttribute","tagname","startsWith","customElements","get","whenDefined","then","_M3eFormFieldElement_bindValueInterceptor","interceptProperty","setter","hintText","getTextContent","errorText","registerStyleSheet","css","DesignToken","motion","duration","extraLong1","density","calc","styles","typescale","standard","body","large","fontSize","fontWeight","lineHeight","tracking","small","unsafeCSS","short4","color","onSurfaceVariant","scrollbar","thinWidth","short2","shape","corner","extraSmall","extraSmallTop","onSurface","outline","primary","surfaceContainerHighest","error","__decorate","query","prototype","state","property","reflect","attribute","type","Boolean","customElement"],"mappings":"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"}
1
+ {"version":3,"file":"form-field.js","sources":["../../src/form-field/FormFieldControl.ts","../../src/form-field/FormFieldElement.ts"],"sourcesContent":["/**\r\n * Adapted from Angular Material Form Field Control\r\n * Source: https://github.com/angular/components/blob/main/src/material/form-field/form-field-control.ts\r\n *\r\n * @license MIT\r\n * Copyright (c) 2025 Google LLC\r\n * See LICENSE file in the project root for full license text.\r\n */\r\n\r\n/** An interface which allows a control to work inside of a `M3eFormField`. */\r\nexport interface FormFieldControl extends HTMLElement {\r\n /** A value indicating whether the control is disabled. */\r\n disabled: boolean;\r\n\r\n /** The value of the control. */\r\n value?: unknown;\r\n\r\n /** A value indicating whether the control is required. */\r\n required?: boolean;\r\n\r\n /** A value indicated whether the content of the control is read-only. */\r\n readonly?: boolean;\r\n\r\n /** A value indicating whether the form field's label should try to float. */\r\n readonly shouldLabelFloat?: boolean;\r\n\r\n /** The error message that would be displayed if the user submits the form, or an empty string if no error message. */\r\n readonly validationMessage?: string;\r\n\r\n /** The `HTMLFormElement` associated with this element. */\r\n readonly form?: HTMLFormElement | null;\r\n\r\n /**\r\n * Handles the click event on the control's container.\r\n * @param {MouseEvent} event The `MouseEvent`.\r\n */\r\n onContainerClick?: (event: MouseEvent) => void;\r\n\r\n /**\r\n * Returns `true` if the element has no validity problems; otherwise,\r\n * returns `false`, fires an invalid event.\r\n */\r\n checkValidity?: () => boolean;\r\n}\r\n\r\nconst KNOWN_FORM_FIELD_TAGS = [\"m3e-input-chip-set\", \"m3e-select\"];\r\n\r\n/**\r\n * Determines whether a value is a `FormFieldControl`.\r\n * @param {unknown} value The value to test.\r\n * @returns {value is FormFieldControl} A value indicating whether `value` is a `FormFieldControl`.\r\n */\r\nexport function isFormFieldControl(value: unknown): value is FormFieldControl {\r\n return (\r\n value instanceof HTMLElement &&\r\n (value instanceof HTMLInputElement ||\r\n value instanceof HTMLTextAreaElement ||\r\n value instanceof HTMLSelectElement ||\r\n KNOWN_FORM_FIELD_TAGS.includes(value.tagName.toLowerCase()))\r\n );\r\n}\r\n\r\n/**\r\n * Locates the first `FormFieldControl` in a given slot.\r\n * @param {HTMLSlotElement} slot The slot in which to locate a `FormFieldControl`.\r\n * @returns {FormFieldControl | null} The `FormFieldControl` located in `slot`.\r\n */\r\nexport function findFormFieldControl(slot: HTMLSlotElement): FormFieldControl | null {\r\n for (const element of slot.assignedElements({ flatten: true })) {\r\n if (isFormFieldControl(element)) {\r\n return element;\r\n }\r\n\r\n const walker = document.createTreeWalker(element, NodeFilter.SHOW_ELEMENT);\r\n while (walker.nextNode()) {\r\n if (isFormFieldControl(walker.currentNode)) {\r\n return walker.currentNode;\r\n }\r\n }\r\n }\r\n\r\n return null;\r\n}\r\n","/**\r\n * Adapted from Angular Material Form Field\r\n * Source: https://github.com/angular/components/blob/main/src/material/form-field/form-field.ts\r\n *\r\n * @license MIT\r\n * Copyright (c) 2025 Google LLC\r\n * See LICENSE file in the project root for full license text.\r\n */\r\n\r\nimport { css, CSSResultGroup, html, LitElement, nothing, PropertyValues, unsafeCSS } from \"lit\";\r\nimport { property, query, state } from \"lit/decorators.js\";\r\n\r\nimport {\r\n AttachInternals,\r\n customElement,\r\n DesignToken,\r\n FocusController,\r\n getTextContent,\r\n hasAssignedNodes,\r\n hasCustomState,\r\n HoverController,\r\n interceptProperty,\r\n isReadOnlyMixin,\r\n MutationController,\r\n PressedController,\r\n ReconnectedCallback,\r\n registerStyleSheet,\r\n ResizeController,\r\n setCustomState,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { M3eAriaDescriber } from \"@m3e/web/core/a11y\";\r\n\r\nimport { findFormFieldControl, FormFieldControl } from \"./FormFieldControl\";\r\nimport { FormFieldVariant } from \"./FormFieldVariant\";\r\nimport { HideSubscriptType } from \"./HideSubscriptType\";\r\nimport { FloatLabelType } from \"./FloatLabelType\";\r\n\r\n/**\r\n * A container for form controls that applies Material Design styling and behavior.\r\n *\r\n * @description\r\n * The `m3e-form-field` component is a semantic, expressive container for form controls that anchors\r\n * label behavior, subscript messaging, and variant-specific layout. Designed according to Material Design 3\r\n * guidelines, it supports two visual variants—`outlined` and `filled`—each with dynamic elevation,\r\n * shape transitions, and adaptive color theming. The component responds to control state changes\r\n * (focus, hover, press, disabled, invalid) with smooth motion and semantic clarity, ensuring\r\n * visual hierarchy and emotional resonance.\r\n\r\n * The component is accessible by default, with ARIA annotations, contrast-safe color tokens,\r\n * and dynamic descriptions for hint and error messaging. It supports prefix and suffix content,\r\n * floating labels, and adaptive subscript visibility. When hosting a control with validation,\r\n * error messages are surfaced with `aria-invalid` and described for assistive technology.\r\n\r\n * Native form controls may not expose full state or messaging on their own. `m3e-form-field` bridges\r\n * these gaps by coordinating label floating, container styling, and subscript feedback.\r\n *\r\n * @example\r\n * The following example illustrates a basic usage of the `m3e-form-field`.\r\n * ```html\r\n * <m3e-form-field>\r\n * <label slot=\"label\" for=\"field\">Text field</label>\r\n * <input id=\"field\" />\r\n * </m3e-form-field>\r\n * ```\r\n * \r\n * @tag m3e-form-field\r\n *\r\n * @slot - Renders the control of the field.\r\n * @slot prefix - Renders content before the fields's control.\r\n * @slot prefix-text - Renders text before the fields's control.\r\n * @slot suffix - Renders content after the fields's control.\r\n * @slot suffix-text - Renders text after the fields's control.\r\n * @slot hint - Renders hint text in the fields's subscript, when the control is valid.\r\n * @slot error - Renders error text in the fields's subscript, when the control is invalid.\r\n *\r\n * @attr float-label - Specifies whether the label should float always or only when necessary.\r\n * @attr hide-required-marker - Whether the required marker should be hidden.\r\n * @attr hide-subscript - Whether subscript content is hidden.\r\n * @attr variant - The appearance variant of the field.\r\n *\r\n * @cssprop --m3e-form-field-font-size - Font size for the form field container text.\r\n * @cssprop --m3e-form-field-font-weight - Font weight for the form field container text.\r\n * @cssprop --m3e-form-field-line-height - Line height for the form field container text.\r\n * @cssprop --m3e-form-field-tracking - Letter spacing for the form field container text.\r\n * @cssprop --m3e-form-field-label-font-size - Font size for the floating label.\r\n * @cssprop --m3e-form-field-label-font-weight - Font weight for the floating label.\r\n * @cssprop --m3e-form-field-label-line-height - Line height for the floating label.\r\n * @cssprop --m3e-form-field-label-tracking - Letter spacing for the floating label.\r\n * @cssprop --m3e-form-field-subscript-font-size - Font size for hint and error text.\r\n * @cssprop --m3e-form-field-subscript-font-weight - Font weight for hint and error text.\r\n * @cssprop --m3e-form-field-subscript-line-height - Line height for hint and error text.\r\n * @cssprop --m3e-form-field-subscript-tracking - Letter spacing for hint and error text.\r\n * @cssprop --m3e-form-field-color - Text color for the form field container.\r\n * @cssprop --m3e-form-field-subscript-color - Color for hint and error text.\r\n * @cssprop --m3e-form-field-invalid-color - Color used when the control is invalid.\r\n * @cssprop --m3e-form-field-focused-outline-color - Outline color when focused.\r\n * @cssprop --m3e-form-field-focused-color - Label color when focused.\r\n * @cssprop --m3e-form-field-outline-color - Outline color in outlined variant.\r\n * @cssprop --m3e-form-field-container-color - Background color in filled variant.\r\n * @cssprop --m3e-form-field-hover-container-color - Hover background color in filled variant.\r\n * @cssprop --m3e-form-field-width - Width of the form field container.\r\n * @cssprop --m3e-form-field-icon-size - Size of prefix and suffix icons.\r\n * @cssprop --m3e-outlined-form-field-container-shape - Corner radius for outlined container.\r\n * @cssprop --m3e-form-field-container-shape - Corner radius for filled container.\r\n * @cssprop --m3e-form-field-hover-container-opacity - Opacity for hover background in filled variant.\r\n * @cssprop --m3e-form-field-disabled-opacity - Opacity for disabled text.\r\n * @cssprop --m3e-form-field-disabled-container-opacity - Opacity for disabled container background.\r\n */\r\n@customElement(\"m3e-form-field\")\r\nexport class M3eFormFieldElement extends ReconnectedCallback(AttachInternals(LitElement)) {\r\n static {\r\n registerStyleSheet(css`\r\n m3e-form-field input::placeholder,\r\n m3e-form-field textarea::placeholder {\r\n user-select: none;\r\n color: currentColor;\r\n transition: opacity ${DesignToken.motion.duration.extraLong1};\r\n }\r\n m3e-form-field[float-label=\"auto\"]:not(:is(:state(--float-label), :--float-label)):is(\r\n :state(--with-label),\r\n :--with-label\r\n )\r\n input::placeholder,\r\n m3e-form-field[float-label=\"auto\"]:not(:is(:state(--float-label), :--float-label)):is(\r\n :state(--with-label),\r\n :--with-label\r\n )\r\n textarea::placeholder {\r\n opacity: 0;\r\n transition: opacity 0s;\r\n }\r\n m3e-form-field[variant=\"outlined\"] m3e-input-chip-set {\r\n margin-block: calc(calc(3.5rem + ${DesignToken.density.calc(-3)}) / 4);\r\n }\r\n @media (prefers-reduced-motion) {\r\n m3e-form-field input::placeholder,\r\n m3e-form-field textarea::placeholder {\r\n transition: none !important;\r\n }\r\n }\r\n `);\r\n }\r\n /** The styles of the element. */\r\n static override styles: CSSResultGroup = css`\r\n :host {\r\n display: inline-flex;\r\n flex-direction: column;\r\n vertical-align: middle;\r\n font-size: var(--m3e-form-field-font-size, ${DesignToken.typescale.standard.body.large.fontSize});\r\n font-weight: var(--m3e-form-field-font-weight, ${DesignToken.typescale.standard.body.large.fontWeight});\r\n line-height: var(--m3e-form-field-line-height, ${DesignToken.typescale.standard.body.large.lineHeight});\r\n letter-spacing: var(--m3e-form-field-tracking, ${DesignToken.typescale.standard.body.large.tracking});\r\n width: var(--m3e-form-field-width, 14.5rem);\r\n color: var(--_form-field-color);\r\n }\r\n :host(:not(:is(:state(--disabled), :--disabled))) .base {\r\n cursor: var(--_form-field-cursor);\r\n }\r\n .base {\r\n display: flex;\r\n align-items: center;\r\n position: relative;\r\n min-height: calc(3.5rem + ${DesignToken.density.calc(-3)});\r\n --_form-field-label-font-size: var(\r\n --m3e-form-field-label-font-size,\r\n ${DesignToken.typescale.standard.body.small.fontSize}\r\n );\r\n --_form-field-label-line-height: var(\r\n --m3e-form-field-label-line-height,\r\n ${DesignToken.typescale.standard.body.small.lineHeight}\r\n );\r\n }\r\n .content {\r\n display: flex;\r\n align-items: center;\r\n position: relative;\r\n flex: 1 1 auto;\r\n min-width: 0;\r\n min-height: var(--m3e-form-field-icon-size, 1.5rem);\r\n }\r\n .prefix,\r\n .suffix {\r\n display: flex;\r\n align-items: center;\r\n position: relative;\r\n user-select: none;\r\n flex: none;\r\n font-size: var(--m3e-form-field-icon-size, 1.5rem);\r\n }\r\n .prefix-text,\r\n .suffix-text {\r\n opacity: 1;\r\n transition: opacity ${DesignToken.motion.duration.extraLong1};\r\n user-select: none;\r\n flex: none;\r\n }\r\n .input {\r\n display: inline-flex;\r\n flex-wrap: wrap;\r\n flex: 1 1 auto;\r\n min-width: 0;\r\n }\r\n .label {\r\n display: flex;\r\n position: absolute;\r\n pointer-events: none;\r\n user-select: none;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n font-size: var(--m3e-form-field-label-font-size, ${DesignToken.typescale.standard.body.small.fontSize});\r\n font-weight: var(--m3e-form-field-label-font-weight, ${DesignToken.typescale.standard.body.small.fontWeight});\r\n line-height: var(--m3e-form-field-label-line-height, ${DesignToken.typescale.standard.body.small.lineHeight});\r\n letter-spacing: var(--m3e-form-field-label-tracking, ${DesignToken.typescale.standard.body.small.tracking});\r\n color: var(--_form-field-label-color, inherit);\r\n transition: ${unsafeCSS(\r\n `top ${DesignToken.motion.duration.short4}, \r\n font-size ${DesignToken.motion.duration.short4}, \r\n line-height ${DesignToken.motion.duration.short4}`,\r\n )};\r\n }\r\n :host(:is(:state(--with-select), :--with-select)) .label {\r\n margin-inline-end: 1.5rem;\r\n }\r\n ::slotted([slot=\"label\"]) {\r\n white-space: nowrap;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n }\r\n .subscript {\r\n display: inline-flex;\r\n width: 100%;\r\n margin-top: 0.25rem;\r\n font-size: var(--m3e-form-field-subscript-font-size, ${DesignToken.typescale.standard.body.small.fontSize});\r\n font-weight: var(--m3e-form-field-subscript-font-weight, ${DesignToken.typescale.standard.body.small.fontWeight});\r\n line-height: var(--m3e-form-field-subscript-line-height, ${DesignToken.typescale.standard.body.small.lineHeight});\r\n letter-spacing: var(--m3e-form-field-subscript-tracking, ${DesignToken.typescale.standard.body.small.tracking});\r\n min-height: var(--m3e-form-field-subscript-line-height, ${DesignToken.typescale.standard.body.small.lineHeight});\r\n color: var(--m3e-form-field-subscript-color, ${DesignToken.color.onSurfaceVariant});\r\n }\r\n .error,\r\n .hint {\r\n flex: 1 1 auto;\r\n }\r\n :host([hide-subscript=\"always\"]) .subscript {\r\n display: none;\r\n }\r\n :host([hide-subscript=\"auto\"]:not(:is(:state(--invalid), :--invalid))) .subscript {\r\n opacity: 0;\r\n margin-top: 0.25rem;\r\n transform: translateY(-0.25rem);\r\n transition: ${unsafeCSS(\r\n `opacity ${DesignToken.motion.duration.short4}, \r\n transform ${DesignToken.motion.duration.short4}`,\r\n )};\r\n }\r\n :host([hide-subscript=\"auto\"]:not(:is(:state(--invalid), :--invalid)):focus-within) .subscript,\r\n :host([hide-subscript=\"auto\"]:not(:is(:state(--invalid), :--invalid)):is(:state(--pressed), :--pressed))\r\n .subscript {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n :host(:is(:state(--invalid), :--invalid)) .hint {\r\n display: none;\r\n }\r\n :host(:not(:is(:state(--invalid), :--invalid))) .error {\r\n display: none;\r\n }\r\n ::slotted(input),\r\n ::slotted(textarea),\r\n ::slotted(select) {\r\n outline: unset;\r\n border: unset;\r\n background-color: transparent;\r\n box-shadow: none;\r\n font-family: inherit;\r\n font-size: inherit;\r\n line-height: inherit;\r\n letter-spacing: inherit;\r\n color: var(--_form-field-input-color, inherit);\r\n flex: 1 1 auto;\r\n min-width: 0;\r\n padding: unset;\r\n }\r\n ::slotted(textarea) {\r\n scrollbar-width: ${DesignToken.scrollbar.thinWidth};\r\n scrollbar-color: ${DesignToken.scrollbar.color};\r\n }\r\n ::slotted(m3e-select),\r\n ::slotted(m3e-input-chip-set) {\r\n flex: 1 1 auto;\r\n min-width: 0;\r\n }\r\n :host([float-label=\"auto\"]:not(:is(:state(--float-label), :--float-label)):not(:is(:state(--pressed), :--pressed)))\r\n .label {\r\n font-size: inherit;\r\n }\r\n\r\n :host([float-label=\"auto\"]:not(:is(:state(--float-label), :--float-label)):is(:state(--with-label), :--with-label))\r\n .prefix-text,\r\n :host([float-label=\"auto\"]:not(:is(:state(--float-label), :--float-label)):is(:state(--with-label), :--with-label))\r\n .suffix-text {\r\n opacity: 0;\r\n transition: opacity 0s;\r\n }\r\n .prefix {\r\n margin-inline-start: 1rem;\r\n }\r\n :host(:is(:state(--with-prefix), :--with-prefix)) .prefix {\r\n margin-inline-end: 1rem;\r\n margin-inline-start: 0.75rem;\r\n }\r\n .suffix {\r\n margin-inline-end: 1rem;\r\n }\r\n :host(:is(:state(--with-suffix), :--with-suffix)) .suffix {\r\n margin-inline-start: 0.25rem;\r\n margin-inline-end: 0.5rem;\r\n }\r\n :host(:is(:state(--with-suffix), :--with-suffix):is(:state(--with-select), :--with-select)) .suffix {\r\n margin-inline-start: unset;\r\n }\r\n :host(:is(:state(--with-select), :--with-select)) .suffix-text {\r\n display: none;\r\n }\r\n :host([variant=\"outlined\"]) .label {\r\n margin-top: calc(0px - var(--_form-field-label-line-height) / 2);\r\n }\r\n :host([variant=\"outlined\"]) .outline {\r\n position: absolute;\r\n display: flex;\r\n pointer-events: none;\r\n left: 0;\r\n top: 0;\r\n bottom: 0;\r\n right: 0;\r\n }\r\n :host([variant=\"outlined\"]) .pseudo-label {\r\n visibility: hidden;\r\n margin-inline-end: 0.5rem;\r\n font-size: var(--_form-field-label-font-size);\r\n line-height: var(--_form-field-label-line-height);\r\n letter-spacing: var(--_form-field-label-tracking);\r\n max-width: 100%;\r\n transition-property: max-width, margin-inline-end;\r\n transition-duration: 1ms;\r\n }\r\n :host(\r\n :is(:state(--required), :--required):not([hide-required-marker]):not(:is(:state(--with-label), :--with-label))\r\n )\r\n .pseudo-label,\r\n :host(\r\n :is(:state(--required), :--required):not([hide-required-marker]):not(:is(:state(--with-label), :--with-label))\r\n )\r\n .required-marker {\r\n display: none;\r\n }\r\n :host([variant=\"outlined\"]:is(:state(--required), :--required):not([hide-required-marker])) .pseudo-label {\r\n margin-inline-end: 0.25rem;\r\n }\r\n :host(\r\n [variant=\"outlined\"][float-label=\"auto\"]:not(:is(:state(--float-label), :--float-label)):not(\r\n :is(:state(--pressed), :--pressed)\r\n )\r\n )\r\n .pseudo-label {\r\n max-width: 0;\r\n margin-inline-end: 0px;\r\n transition-delay: ${DesignToken.motion.duration.short2};\r\n }\r\n :host([variant=\"outlined\"]) .outline-start,\r\n :host([variant=\"outlined\"]) .outline-notch,\r\n :host([variant=\"outlined\"]) .outline-end {\r\n box-sizing: border-box;\r\n border-width: var(--_form-field-outline-size, 1px);\r\n border-color: var(--_form-field-outline-color);\r\n transition: border-color ${DesignToken.motion.duration.short4};\r\n }\r\n :host([variant=\"outlined\"]:not(:is(:state(--with-label), :--with-label))) .outline-notch {\r\n display: none;\r\n }\r\n :host([variant=\"outlined\"]) .outline-start {\r\n min-width: 0.75rem;\r\n border-top-style: solid;\r\n border-inline-start-style: solid;\r\n border-bottom-style: solid;\r\n border-start-start-radius: var(--m3e-outlined-form-field-container-shape, ${DesignToken.shape.corner.extraSmall});\r\n border-end-start-radius: var(--m3e-outlined-form-field-container-shape, ${DesignToken.shape.corner.extraSmall});\r\n }\r\n :host([variant=\"outlined\"]) .outline-notch {\r\n border-bottom-style: solid;\r\n }\r\n :host([variant=\"outlined\"]) .outline-end {\r\n flex-grow: 1;\r\n min-width: 1rem;\r\n border-top-style: solid;\r\n border-inline-end-style: solid;\r\n border-bottom-style: solid;\r\n border-start-end-radius: var(--m3e-outlined-form-field-container-shape, ${DesignToken.shape.corner.extraSmall});\r\n border-end-end-radius: var(--m3e-outlined-form-field-container-shape, ${DesignToken.shape.corner.extraSmall});\r\n }\r\n :host([variant=\"outlined\"]:is(:state(--with-prefix), :--with-prefix)) .outline-start {\r\n min-width: calc(1.25rem + var(--_prefix-width, 0px) + 0.25rem);\r\n }\r\n :host([variant=\"outlined\"]:not(:is(:state(--disabled), :--disabled))) .base:hover .outline,\r\n :host([variant=\"outlined\"]:not(:is(:state(--disabled), :--disabled)):focus-within) .outline,\r\n :host([variant=\"outlined\"]:not(:is(:state(--disabled), :--disabled)):is(:state(--pressed), :--pressed)) .outline {\r\n --_form-field-outline-size: 2px;\r\n }\r\n :host([variant=\"outlined\"]) .subscript {\r\n margin-inline: 1rem;\r\n width: calc(100% - 2rem);\r\n }\r\n :host([variant=\"outlined\"]) .content {\r\n min-height: calc(3.5rem + ${DesignToken.density.calc(-3)});\r\n --_form-field-label-font-size: var(\r\n --m3e-form-field-label-font-size,\r\n ${DesignToken.typescale.standard.body.small.fontSize}\r\n );\r\n }\r\n :host(\r\n [variant=\"outlined\"][float-label=\"auto\"]:not(:is(:state(--float-label), :--float-label)):not(\r\n :is(:state(--pressed), :--pressed)\r\n )\r\n )\r\n .label {\r\n margin-top: unset;\r\n line-height: calc(3.5rem + ${DesignToken.density.calc(-3)});\r\n --_form-field-label-font-size: var(\r\n --m3e-form-field-label-font-size,\r\n ${DesignToken.typescale.standard.body.small.fontSize}\r\n );\r\n }\r\n :host([variant=\"filled\"]) .base {\r\n --_select-arrow-margin-top: calc(\r\n 0px - calc(1rem / max(calc(0 - calc(var(--md-sys-density-scale, 0) + var(--md-sys-density-scale, 0))), 1))\r\n );\r\n }\r\n :host([variant=\"filled\"]) .base::before {\r\n content: \"\";\r\n box-sizing: border-box;\r\n position: absolute;\r\n pointer-events: none;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n border-bottom-style: solid;\r\n border-width: 1px;\r\n border-radius: var(--m3e-form-field-container-shape, ${DesignToken.shape.corner.extraSmallTop});\r\n border-color: var(--_form-field-outline-color);\r\n background-color: var(--_form-field-container-color);\r\n }\r\n :host([variant=\"filled\"]:not(:is(:state(--disabled), :--disabled))) .base:hover::before,\r\n :host([variant=\"filled\"]:not(:is(:state(--disabled), :--disabled)):focus-within) .base::before,\r\n :host([variant=\"filled\"]:not(:is(:state(--disabled), :--disabled)):is(:state(--pressed), :--pressed))\r\n .base::before {\r\n border-width: 3px;\r\n }\r\n :host([variant=\"filled\"]) .base::after {\r\n content: \"\";\r\n box-sizing: border-box;\r\n position: absolute;\r\n pointer-events: none;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n background-color: var(--_form-field-hover-container-color);\r\n transition: background-color ${DesignToken.motion.duration.short4};\r\n }\r\n :host([variant=\"filled\"]) .subscript {\r\n margin-inline: 1rem;\r\n width: calc(100% - 2rem);\r\n }\r\n :host([variant=\"filled\"]) .content {\r\n padding-top: calc(1.5rem + ${DesignToken.density.calc(-3)});\r\n margin-bottom: 0.5rem;\r\n }\r\n :host([variant=\"filled\"]) .label {\r\n top: max(0px, calc(0.5rem + ${DesignToken.density.calc(-3)}));\r\n }\r\n :host(\r\n [variant=\"filled\"][float-label=\"auto\"]:not(:is(:state(--float-label), :--float-label)):not(\r\n :is(:state(--pressed), :--pressed)\r\n )\r\n )\r\n .label {\r\n top: 0px;\r\n line-height: calc(3.5rem + ${DesignToken.density.calc(-3)} - 0.0625rem);\r\n --_form-field-label-font-size: var(\r\n --m3e-form-field-label-font-size,\r\n ${DesignToken.typescale.standard.body.small.fontSize}\r\n );\r\n }\r\n :host(:not(:is(:state(--disabled), :--disabled)):not(:focus-within):not(:is(:state(--pressed), :--pressed)))\r\n .base:hover {\r\n --_form-field-hover-container-color: color-mix(\r\n in srgb,\r\n var(--m3e-form-field-hover-container-color, ${DesignToken.color.onSurface})\r\n var(--m3e-form-field-hover-container-opacity, 8%),\r\n transparent\r\n );\r\n }\r\n :host(:not(:is(:state(--disabled), :--disabled)):not(:is(:state(--invalid), :--invalid))) {\r\n color: var(--m3e-form-field-color, ${DesignToken.color.onSurface});\r\n }\r\n :host([variant=\"outlined\"]:not(:is(:state(--disabled), :--disabled)):not(:is(:state(--invalid), :--invalid)))\r\n .base {\r\n --_form-field-outline-color: var(--m3e-form-field-outline-color, ${DesignToken.color.outline});\r\n }\r\n :host([variant=\"filled\"]:not(:is(:state(--disabled), :--disabled)):not(:is(:state(--invalid), :--invalid))) .base {\r\n --_form-field-outline-color: var(--m3e-form-field-outline-color, ${DesignToken.color.onSurfaceVariant});\r\n }\r\n :host(\r\n [variant=\"outlined\"]:not(:is(:state(--disabled), :--disabled)):not(\r\n :is(:state(--invalid), :--invalid)\r\n ):focus-within\r\n )\r\n .base,\r\n :host(\r\n [variant=\"outlined\"]:not(:is(:state(--disabled), :--disabled)):not(:is(:state(--invalid), :--invalid)):is(\r\n :state(--pressed),\r\n :--pressed\r\n )\r\n )\r\n .base,\r\n :host(\r\n [variant=\"filled\"]:not(:is(:state(--disabled), :--disabled)):not(\r\n :is(:state(--invalid), :--invalid)\r\n ):focus-within\r\n )\r\n .base,\r\n :host(\r\n [variant=\"filled\"]:not(:is(:state(--disabled), :--disabled)):not(:is(:state(--invalid), :--invalid)):is(\r\n :state(--pressed),\r\n :--pressed\r\n )\r\n )\r\n .base {\r\n --_form-field-outline-color: var(--m3e-form-field-focused-outline-color, ${DesignToken.color.primary});\r\n --_form-field-label-color: var(--m3e-form-field-focused-color, ${DesignToken.color.primary});\r\n }\r\n :host(:not(:is(:state(--disabled), :--disabled))) .base {\r\n --_form-field-container-color: var(\r\n --m3e-form-field-container-color,\r\n ${DesignToken.color.surfaceContainerHighest}\r\n );\r\n }\r\n :host(:not(:is(:state(--disabled), :--disabled)):is(:state(--invalid), :--invalid)) .base {\r\n --_form-field-label-color: var(--m3e-form-field-invalid-color, ${DesignToken.color.error});\r\n --_form-field-outline-color: var(--m3e-form-field-invalid-color, ${DesignToken.color.error});\r\n }\r\n :host(:not(:is(:state(--disabled), :--disabled)):is(:state(--invalid), :--invalid)) .subscript {\r\n color: var(--m3e-form-field-invalid-color, ${DesignToken.color.error});\r\n }\r\n :host(:is(:state(--disabled), :--disabled)) {\r\n color: color-mix(\r\n in srgb,\r\n var(--m3e-form-field-disabled-color, ${DesignToken.color.onSurface}) var(--m3e-form-field-disabled-opacity, 38%),\r\n transparent\r\n );\r\n }\r\n :host(:is(:state(--disabled), :--disabled)) .base {\r\n --_form-field-container-color: color-mix(\r\n in srgb,\r\n var(--m3e-form-field-disabled-container-color, ${DesignToken.color.onSurface})\r\n var(--m3e-form-field-disabled-container-opacity, 4%),\r\n transparent\r\n );\r\n }\r\n :host(:is(:state(--no-animate), :--no-animate)) *,\r\n :host(:is(:state(--no-animate), :--no-animate)) *::before,\r\n :host(:is(:state(--no-animate), :--no-animate)) *::after {\r\n transition: none !important;\r\n }\r\n @media (forced-colors: active) {\r\n :host([variant=\"filled\"]) .base::after {\r\n transition: none;\r\n }\r\n :host {\r\n --_form-field-outline-color: CanvasText;\r\n }\r\n :host(:is(:state(--disabled), :--disabled)) {\r\n --_form-field-input-color: GrayText;\r\n --_form-field-color: GrayText;\r\n --_form-field-label-color: GrayText;\r\n --_form-field-outline-color: GrayText;\r\n }\r\n }\r\n @media (prefers-reduced-motion) {\r\n .base::before,\r\n .prefix-text,\r\n .suffix-text,\r\n .label,\r\n .subscript,\r\n .outline-start,\r\n .outline-notch,\r\n .outline-end,\r\n .pseudo-label {\r\n transition: none !important;\r\n }\r\n }\r\n `;\r\n\r\n /** @private */ #control: FormFieldControl | null = null;\r\n /** @private */ #removeValueInterceptor?: () => void;\r\n /** @private */ readonly #formResetHandler = () => this.#handleFormReset();\r\n /** @private */ readonly #controlInvalidHandler = () => this.#handleControlInvalid();\r\n\r\n /** @private */\r\n readonly #controlMutationController = new MutationController(this, {\r\n target: null,\r\n config: { attributeFilter: [\"disabled\", \"readonly\", \"required\"] },\r\n callback: () => this.notifyControlStateChange(),\r\n });\r\n\r\n /** @private */\r\n readonly #resizeController = new ResizeController(this, {\r\n target: null,\r\n callback: () => this.#handlePrefixResize(),\r\n });\r\n\r\n /** @private */\r\n readonly #focusController = new FocusController(this, {\r\n target: null,\r\n callback: (focused) => {\r\n focused = focused && !(this.#control?.disabled ?? true);\r\n setCustomState(this, \"--no-animate\", false);\r\n this.#focused = focused;\r\n if (focused) {\r\n setCustomState(this, \"--float-label\", true);\r\n } else {\r\n this._invalid = !(this.#control?.checkValidity?.() ?? true);\r\n this.notifyControlStateChange();\r\n }\r\n },\r\n });\r\n\r\n /** @private */ @query(\".base\") private readonly _base!: HTMLElement;\r\n /** @private */ @query(\".prefix\") private readonly _prefix!: HTMLElement;\r\n /** @private */ @query(\".error\") private readonly _error!: HTMLElement;\r\n /** @private */ @query(\".hint\") private readonly _hint!: HTMLElement;\r\n\r\n /** @private */\r\n readonly #hintMutationController = new MutationController(this, {\r\n target: null,\r\n config: { childList: true, subtree: true },\r\n callback: () => this.#handleHintChange(),\r\n });\r\n\r\n /** @private */\r\n readonly #errorMutationController = new MutationController(this, {\r\n target: null,\r\n config: { childList: true, subtree: true },\r\n callback: () => this.#handleErrorChange(),\r\n });\r\n\r\n /** @private */\r\n readonly #pressedController = new PressedController(this, {\r\n target: null,\r\n callback: (pressed) => setCustomState(this, \"--pressed\", pressed && !(this.#control?.disabled ?? true)),\r\n });\r\n\r\n /** @private */ #focused = false;\r\n /** @private */ @state() private _pseudoLabel = \"\";\r\n /** @private */ @state() private _required = false;\r\n /** @private */ @state() private _invalid = false;\r\n /** @private */ @state() private _validationMessage = \"\";\r\n /** @private */ #hintText = \"\";\r\n /** @private */ #errorText = \"\";\r\n\r\n constructor() {\r\n super();\r\n\r\n new HoverController(this, { callback: () => setCustomState(this, \"--no-animate\", false) });\r\n }\r\n\r\n /** @private */\r\n get #shouldFloatLabel(): boolean {\r\n return this.#control?.shouldLabelFloat !== undefined\r\n ? this.#control.shouldLabelFloat === true\r\n : typeof this.#control?.value == \"string\" && this.#control.value.length > 0;\r\n }\r\n\r\n /** A reference to the element used to anchor dropdown menus. */\r\n get menuAnchor() {\r\n return this._base;\r\n }\r\n\r\n /** A reference to the hosted form field control. */\r\n get control() {\r\n return this.#control;\r\n }\r\n\r\n /**\r\n * The appearance variant of the field.\r\n * @default \"outlined\"\r\n */\r\n @property({ reflect: true }) variant: FormFieldVariant = \"outlined\";\r\n\r\n /**\r\n * Whether the required marker should be hidden.\r\n * @default false\r\n */\r\n @property({ attribute: \"hide-required-marker\", type: Boolean, reflect: true }) hideRequiredMarker = false;\r\n\r\n /**\r\n * Whether subscript content is hidden.\r\n * @default \"auto\"\r\n */\r\n @property({ attribute: \"hide-subscript\", reflect: true }) hideSubscript: HideSubscriptType = \"auto\";\r\n\r\n /**\r\n * Specifies whether the label should float always or only when necessary.\r\n * @default \"auto\"\r\n */\r\n @property({ attribute: \"float-label\", reflect: true }) floatLabel: FloatLabelType = \"auto\";\r\n\r\n /**\r\n * Notifies the form field that the state of the hosted `control` has changed.\r\n * @param {boolean} [checkValidity=false] Whether to check validity.\r\n */\r\n notifyControlStateChange(checkValidity: boolean = false): void {\r\n this._required = this.#control?.required === true;\r\n setCustomState(this, \"--required\", this._required);\r\n setCustomState(this, \"--disabled\", this.#control?.disabled === true);\r\n setCustomState(this, \"--readonly\", isReadOnlyMixin(this.#control) && this.#control.readOnly === true);\r\n if (this.floatLabel === \"auto\") {\r\n setCustomState(this, \"--float-label\", this.#shouldFloatLabel || this.#focused);\r\n }\r\n\r\n if (checkValidity) {\r\n this._invalid = !(this.#control?.checkValidity?.() ?? true);\r\n }\r\n\r\n setCustomState(this, \"--invalid\", this._invalid);\r\n\r\n this._validationMessage = this.#control?.validationMessage ?? \"\";\r\n if (!this.isUpdatePending) {\r\n this.performUpdate();\r\n }\r\n }\r\n\r\n /** @inheritdoc */\r\n override connectedCallback(): void {\r\n super.connectedCallback();\r\n // Label animations are disabled on initial paint.\r\n setCustomState(this, \"--no-animate\", true);\r\n }\r\n\r\n /** @inheritdoc */\r\n override disconnectedCallback(): void {\r\n super.disconnectedCallback();\r\n this.#changeControl(null);\r\n }\r\n\r\n /** @inheritdoc */\r\n override reconnectedCallback(): void {\r\n super.reconnectedCallback();\r\n this.#initialize();\r\n }\r\n\r\n /** @inheritdoc */\r\n protected override firstUpdated(_changedProperties: PropertyValues): void {\r\n super.firstUpdated(_changedProperties);\r\n this.#initialize();\r\n }\r\n\r\n /** @inheritdoc */\r\n protected override update(changedProperties: PropertyValues): void {\r\n super.update(changedProperties);\r\n\r\n if (changedProperties.has(\"_invalid\") && this.#control) {\r\n this.#control.ariaInvalid = this._invalid ? \"true\" : null;\r\n\r\n if (this.#errorText) {\r\n if (this._invalid) {\r\n M3eAriaDescriber.describe(this.#control, this.#errorText);\r\n } else {\r\n M3eAriaDescriber.removeDescription(this.#control, this.#errorText);\r\n }\r\n }\r\n }\r\n }\r\n\r\n /** @inheritdoc */\r\n protected override render(): unknown {\r\n return html`<div class=\"base\" @click=\"${this.#handleContainerClick}\">\r\n ${this.variant === \"outlined\"\r\n ? html`<div class=\"outline\" aria-hidden=\"true\">\r\n <div class=\"outline-start\"></div>\r\n <div class=\"outline-notch\">\r\n <div class=\"pseudo-label\">\r\n ${this._pseudoLabel} ${!this.hideRequiredMarker && this._required ? html`&nbsp;*` : nothing}\r\n </div>\r\n </div>\r\n <div class=\"outline-end\"></div>\r\n </div>`\r\n : nothing}\r\n <div class=\"prefix\">\r\n <slot name=\"prefix\" @slotchange=\"${this.#handlePrefixSlotChange}\"></slot>\r\n </div>\r\n <div class=\"content\">\r\n <span class=\"prefix-text\"><slot name=\"prefix-text\"></slot></span>\r\n <span class=\"input\">\r\n <slot @slotchange=\"${this.#handleSlotChange}\" @change=\"${this.#handleControlChange}\"></slot>\r\n </span>\r\n <span class=\"suffix-text\"><slot name=\"suffix-text\"></slot></span>\r\n <span class=\"label\">\r\n <slot name=\"label\" @slotchange=\"${this.#handleLabelSlotChange}\"></slot>\r\n ${!this.hideRequiredMarker && this._required\r\n ? html`<span class=\"required-marker\" aria-hidden=\"true\">&nbsp;*</span>`\r\n : nothing}\r\n </span>\r\n </div>\r\n <div\r\n class=\"suffix\"\r\n @click=\"${this.#stopPropagation}\"\r\n @focusin=\"${this.#stopPropagation}\"\r\n @focusout=\"${this.#stopPropagation}\"\r\n @pointerdown=\"${this.#stopPropagation}\"\r\n @keydown=\"${this.#stopPropagation}\"\r\n @keyup=\"${this.#stopPropagation}\"\r\n >\r\n <slot name=\"suffix\" @slotchange=\"${this.#handleSuffixSlotChange}\"></slot>\r\n </div>\r\n </div>\r\n <span class=\"subscript\" aria-hidden=\"true\">\r\n <span class=\"error\"><slot name=\"error\">${this._validationMessage}</slot></span>\r\n <span class=\"hint\"><slot name=\"hint\"></slot></span>\r\n </span>`;\r\n }\r\n\r\n /** @private */\r\n #initialize(): void {\r\n this.#focusController.observe(this._base);\r\n this.#pressedController.observe(this._base);\r\n\r\n this.#hintMutationController.observe(this._hint);\r\n this.#handleHintChange();\r\n\r\n this.#errorMutationController.observe(this._error);\r\n this.#handleErrorChange();\r\n }\r\n\r\n /** @private */\r\n #stopPropagation(e: Event): void {\r\n e.stopImmediatePropagation();\r\n e.stopPropagation();\r\n }\r\n\r\n /** @private */\r\n #handleLabelSlotChange(e: Event): void {\r\n const assignedElements = (<HTMLSlotElement>e.target).assignedElements({ flatten: true });\r\n setCustomState(this, \"--with-label\", assignedElements.length > 0);\r\n this._pseudoLabel = assignedElements[0]?.textContent ?? \"\";\r\n }\r\n\r\n /** @private */\r\n #handlePrefixSlotChange(e: Event): void {\r\n setCustomState(this, \"--with-prefix\", hasAssignedNodes(<HTMLSlotElement>e.target));\r\n this.#resizeController.observe(this._prefix);\r\n }\r\n\r\n /** @private */\r\n #handleSuffixSlotChange(e: Event): void {\r\n setCustomState(this, \"--with-suffix\", hasAssignedNodes(<HTMLSlotElement>e.target));\r\n }\r\n\r\n /** @private */\r\n #handlePrefixResize(): void {\r\n if (this.variant === \"outlined\") {\r\n this._base.style.setProperty(\"--_prefix-width\", `${this._prefix.clientWidth}px`);\r\n }\r\n }\r\n\r\n /** @private */\r\n #handleSlotChange(e: Event): void {\r\n this.#changeControl(findFormFieldControl(<HTMLSlotElement>e.target));\r\n }\r\n\r\n /** @private */\r\n #handleContainerClick(e: MouseEvent): void {\r\n if (this.#control && !this.#focused && !this.#control.disabled) {\r\n if (this.#control.onContainerClick) {\r\n this.#control.onContainerClick(e);\r\n } else {\r\n this.#control.focus();\r\n }\r\n }\r\n }\r\n\r\n /** @private */\r\n #handleControlInvalid(): void {\r\n this._invalid = true;\r\n this.notifyControlStateChange();\r\n }\r\n\r\n /** @private */\r\n #handleControlChange(): void {\r\n this._invalid = !(this.#control?.checkValidity?.() ?? true);\r\n this.notifyControlStateChange();\r\n }\r\n\r\n /** @private */\r\n #handleFormReset(): void {\r\n this._invalid = false;\r\n setTimeout(() => this.notifyControlStateChange());\r\n }\r\n\r\n /** @private */\r\n #changeControl(control: FormFieldControl | null): void {\r\n if (this.#control === control) return;\r\n if (this.#control) {\r\n if (this.#hintText) {\r\n M3eAriaDescriber.removeDescription(this.#control, this.#hintText);\r\n }\r\n if (this.#errorText) {\r\n M3eAriaDescriber.removeDescription(this.#control, this.#errorText);\r\n }\r\n\r\n this.#controlMutationController.unobserve(this.#control);\r\n this.#control.removeEventListener(\"invalid\", this.#controlInvalidHandler);\r\n this.#control.form?.removeEventListener(\"reset\", this.#formResetHandler);\r\n this.#removeValueInterceptor?.();\r\n this.#removeValueInterceptor = undefined;\r\n }\r\n this.#control = control;\r\n\r\n if ([\"INPUT\", \"TEXTAREA\"].includes(this.#control?.tagName ?? \"\")) {\r\n this._base.style.setProperty(\"--_form-field-cursor\", \"text\");\r\n } else {\r\n this._base.style.removeProperty(\"--_form-field-cursor\");\r\n }\r\n\r\n setCustomState(this, \"--with-select\", this.#control?.tagName === \"M3E-SELECT\");\r\n if (hasCustomState(this, \"--with-select\")) {\r\n this._base.style.setProperty(\"--_form-field-cursor\", \"pointer\");\r\n }\r\n\r\n if (this.#control) {\r\n this.#controlMutationController.observe(this.#control);\r\n this.#control.addEventListener(\"invalid\", this.#controlInvalidHandler);\r\n this.#control.form?.addEventListener(\"reset\", this.#formResetHandler);\r\n this.#control.removeAttribute(\"aria-invalid\");\r\n\r\n if (this.#hintText) {\r\n M3eAriaDescriber.describe(this.#control, this.#hintText);\r\n }\r\n\r\n this.notifyControlStateChange();\r\n\r\n const tagname = this.#control.tagName.toLowerCase();\r\n if (tagname.startsWith(\"m3e-\") && !customElements.get(tagname)) {\r\n customElements.whenDefined(tagname).then(() => this.#bindValueInterceptor());\r\n } else {\r\n this.#bindValueInterceptor();\r\n }\r\n }\r\n }\r\n\r\n /** @private */\r\n #bindValueInterceptor(): void {\r\n if (!this.#control) return;\r\n this.#removeValueInterceptor = interceptProperty(this.#control, \"value\", {\r\n set: (value, setter) => {\r\n setter(value);\r\n this.notifyControlStateChange(true);\r\n },\r\n });\r\n }\r\n\r\n /** @private */\r\n #handleHintChange(): void {\r\n const hintText = getTextContent(this._hint, true);\r\n if (hintText === this.#hintText) return;\r\n\r\n if (this.#control && this.#hintText) {\r\n M3eAriaDescriber.removeDescription(this.#control, this.#hintText);\r\n }\r\n\r\n this.#hintText = hintText;\r\n\r\n if (this.#control && this.#hintText) {\r\n M3eAriaDescriber.describe(this.#control, this.#hintText);\r\n }\r\n }\r\n\r\n /** @private */\r\n #handleErrorChange(): void {\r\n const errorText = getTextContent(this._error, true);\r\n if (errorText === this.#errorText) return;\r\n\r\n if (this.#control && this.#errorText) {\r\n M3eAriaDescriber.removeDescription(this.#control, this.#errorText);\r\n }\r\n\r\n this.#errorText = errorText;\r\n\r\n if (this.#control && this.#errorText && this._invalid) {\r\n M3eAriaDescriber.describe(this.#control, this.#errorText);\r\n }\r\n }\r\n}\r\n\r\ndeclare global {\r\n interface HTMLElementTagNameMap {\r\n \"m3e-form-field\": M3eFormFieldElement;\r\n }\r\n}\r\n"],"names":["KNOWN_FORM_FIELD_TAGS","isFormFieldControl","value","HTMLElement","HTMLInputElement","HTMLTextAreaElement","HTMLSelectElement","includes","tagName","toLowerCase","findFormFieldControl","slot","element","assignedElements","flatten","walker","document","createTreeWalker","NodeFilter","SHOW_ELEMENT","nextNode","currentNode","M3eFormFieldElement","ReconnectedCallback","AttachInternals","LitElement","constructor","_M3eFormFieldElement_control","set","_M3eFormFieldElement_removeValueInterceptor","_M3eFormFieldElement_formResetHandler","__classPrivateFieldGet","_M3eFormFieldElement_instances","_M3eFormFieldElement_handleFormReset","call","_M3eFormFieldElement_controlInvalidHandler","_M3eFormFieldElement_handleControlInvalid","_M3eFormFieldElement_controlMutationController","MutationController","target","config","attributeFilter","callback","notifyControlStateChange","_M3eFormFieldElement_resizeController","ResizeController","_M3eFormFieldElement_handlePrefixResize","_M3eFormFieldElement_focusController","FocusController","focused","disabled","setCustomState","__classPrivateFieldSet","_M3eFormFieldElement_focused","_invalid","checkValidity","_M3eFormFieldElement_hintMutationController","childList","subtree","_M3eFormFieldElement_handleHintChange","_M3eFormFieldElement_errorMutationController","_M3eFormFieldElement_handleErrorChange","_M3eFormFieldElement_pressedController","PressedController","pressed","_pseudoLabel","_required","_validationMessage","_M3eFormFieldElement_hintText","_M3eFormFieldElement_errorText","variant","hideRequiredMarker","hideSubscript","floatLabel","HoverController","menuAnchor","_base","control","required","isReadOnlyMixin","readOnly","_M3eFormFieldElement_shouldFloatLabel_get","validationMessage","isUpdatePending","performUpdate","connectedCallback","disconnectedCallback","_M3eFormFieldElement_changeControl","reconnectedCallback","_M3eFormFieldElement_initialize","firstUpdated","_changedProperties","update","changedProperties","has","ariaInvalid","M3eAriaDescriber","describe","removeDescription","render","html","_M3eFormFieldElement_handleContainerClick","nothing","_M3eFormFieldElement_handlePrefixSlotChange","_M3eFormFieldElement_handleSlotChange","_M3eFormFieldElement_handleControlChange","_M3eFormFieldElement_handleLabelSlotChange","_M3eFormFieldElement_stopPropagation","_M3eFormFieldElement_handleSuffixSlotChange","shouldLabelFloat","undefined","length","observe","_hint","_error","e","stopImmediatePropagation","stopPropagation","textContent","hasAssignedNodes","_prefix","style","setProperty","clientWidth","onContainerClick","focus","setTimeout","unobserve","removeEventListener","form","removeProperty","hasCustomState","addEventListener","removeAttribute","tagname","startsWith","customElements","get","whenDefined","then","_M3eFormFieldElement_bindValueInterceptor","interceptProperty","setter","hintText","getTextContent","errorText","registerStyleSheet","css","DesignToken","motion","duration","extraLong1","density","calc","styles","typescale","standard","body","large","fontSize","fontWeight","lineHeight","tracking","small","unsafeCSS","short4","color","onSurfaceVariant","scrollbar","thinWidth","short2","shape","corner","extraSmall","extraSmallTop","onSurface","outline","primary","surfaceContainerHighest","error","__decorate","query","prototype","state","property","reflect","attribute","type","Boolean","customElement"],"mappings":"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"}
package/dist/form-field.min.js CHANGED
@@ -11,7 +11,7 @@ import{__classPrivateFieldGet as t,__classPrivateFieldSet as e,__decorate as i}f
11
11
  * @license MIT
12
12
  * Copyright (c) 2025 Google LLC
13
13
  * See LICENSE file in the project root for full license text.
14
- */const M=["m3e-input-chip-set","m3e-select"];function L(t){return t instanceof HTMLElement&&(t instanceof HTMLInputElement||t instanceof HTMLTextAreaElement||t instanceof HTMLSelectElement||M.includes(t.tagName.toLowerCase()))}function W(t){for(const e of t.assignedElements({flatten:!0})){if(L(e))return e;const t=document.createTreeWalker(e,NodeFilter.SHOW_ELEMENT);for(;t.nextNode();)if(L(t.currentNode))return t.currentNode}return null}
14
+ */const M=["m3e-input-chip-set","m3e-select"];function q(t){return t instanceof HTMLElement&&(t instanceof HTMLInputElement||t instanceof HTMLTextAreaElement||t instanceof HTMLSelectElement||M.includes(t.tagName.toLowerCase()))}function L(t){for(const e of t.assignedElements({flatten:!0})){if(q(e))return e;const t=document.createTreeWalker(e,NodeFilter.SHOW_ELEMENT);for(;t.nextNode();)if(q(t.currentNode))return t.currentNode}return null}
15
15
  /**
16
16
  * Adapted from Angular Material Form Field
17
17
  * Source: https://github.com/angular/components/blob/main/src/material/form-field/form-field.ts
@@ -19,5 +19,5 @@ import{__classPrivateFieldGet as t,__classPrivateFieldSet as e,__decorate as i}f
19
19
  * @license MIT
20
20
  * Copyright (c) 2025 Google LLC
21
21
  * See LICENSE file in the project root for full license text.
22
- */var E,q,T,H,N,P,D,A,R,U,V,F,G,I,O,Y,j,B,X,J,K,Q,Z,tt,et,it,st,at,ot,lt;let rt=class extends(h(c(s))){constructor(){super(),E.add(this),q.set(this,null),T.set(this,void 0),H.set(this,()=>t(this,E,"m",it).call(this)),N.set(this,()=>t(this,E,"m",tt).call(this)),P.set(this,new m(this,{target:null,config:{attributeFilter:["disabled","readonly","required"]},callback:()=>this.notifyControlStateChange()})),D.set(this,new b(this,{target:null,callback:()=>t(this,E,"m",K).call(this)})),A.set(this,new p(this,{target:null,callback:i=>{i=i&&!(t(this,q,"f")?.disabled??1),u(this,"--no-animate",!1),e(this,F,i,"f"),i?u(this,"--float-label",!0):(this._invalid=!(t(this,q,"f")?.checkValidity?.()??1),this.notifyControlStateChange())}})),R.set(this,new m(this,{target:null,config:{childList:!0,subtree:!0},callback:()=>t(this,E,"m",ot).call(this)})),U.set(this,new m(this,{target:null,config:{childList:!0,subtree:!0},callback:()=>t(this,E,"m",lt).call(this)})),V.set(this,new v(this,{target:null,callback:e=>u(this,"--pressed",e&&!(t(this,q,"f")?.disabled??1))})),F.set(this,!1),this._pseudoLabel="",this._required=!1,this._invalid=!1,this._validationMessage="",G.set(this,""),I.set(this,""),this.variant="outlined",this.hideRequiredMarker=!1,this.hideSubscript="auto",this.floatLabel="auto",new g(this,{callback:()=>u(this,"--no-animate",!1)})}get menuAnchor(){return this._base}get control(){return t(this,q,"f")}notifyControlStateChange(e=!1){this._required=!0===t(this,q,"f")?.required,u(this,"--required",this._required),u(this,"--disabled",!0===t(this,q,"f")?.disabled),u(this,"--readonly",y(t(this,q,"f"))&&!0===t(this,q,"f").readOnly),"auto"===this.floatLabel&&u(this,"--float-label",t(this,E,"a",O)||t(this,F,"f")),e&&(this._invalid=!(t(this,q,"f")?.checkValidity?.()??1)),u(this,"--invalid",this._invalid),this._validationMessage=t(this,q,"f")?.validationMessage??"",this.isUpdatePending||this.performUpdate()}connectedCallback(){super.connectedCallback(),u(this,"--no-animate",!0)}disconnectedCallback(){super.disconnectedCallback(),t(this,E,"m",st).call(this,null)}reconnectedCallback(){super.reconnectedCallback(),t(this,E,"m",Y).call(this)}firstUpdated(e){super.firstUpdated(e),t(this,E,"m",Y).call(this)}update(e){super.update(e),e.has("_invalid")&&t(this,q,"f")&&(t(this,q,"f").ariaInvalid=this._invalid?"true":null,t(this,I,"f")&&(this._invalid?S.describe(t(this,q,"f"),t(this,I,"f")):S.removeDescription(t(this,q,"f"),t(this,I,"f"))))}render(){return o`<div class="base" @click="${t(this,E,"m",Z)}">${"outlined"===this.variant?o`<div class="outline" aria-hidden="true"><div class="outline-start"></div><div class="outline-notch"><div class="pseudo-label">${this._pseudoLabel} ${!this.hideRequiredMarker&&this._required?o`&nbsp;*`:a}</div></div><div class="outline-end"></div></div>`:a}<div class="prefix"><slot name="prefix" @slotchange="${t(this,E,"m",X)}"></slot></div><div class="content"><span class="prefix-text"><slot name="prefix-text"></slot></span><span class="input"><slot @slotchange="${t(this,E,"m",Q)}" @change="${t(this,E,"m",et)}"></slot></span><span class="suffix-text"><slot name="suffix-text"></slot></span><span class="label"><slot name="label" @slotchange="${t(this,E,"m",B)}"></slot>${!this.hideRequiredMarker&&this._required?o`<span class="required-marker" aria-hidden="true">&nbsp;*</span>`:a}</span></div><div class="suffix" @click="${t(this,E,"m",j)}" @focusin="${t(this,E,"m",j)}" @focusout="${t(this,E,"m",j)}" @pointerdown="${t(this,E,"m",j)}" @keydown="${t(this,E,"m",j)}" @keyup="${t(this,E,"m",j)}"><slot name="suffix" @slotchange="${t(this,E,"m",J)}"></slot></div></div><span class="subscript" aria-hidden="true"><span class="error"><slot name="error">${this._validationMessage}</slot></span><span class="hint"><slot name="hint"></slot></span></span>`}};q=new WeakMap,T=new WeakMap,H=new WeakMap,N=new WeakMap,P=new WeakMap,D=new WeakMap,A=new WeakMap,R=new WeakMap,U=new WeakMap,V=new WeakMap,F=new WeakMap,G=new WeakMap,I=new WeakMap,E=new WeakSet,O=function(){return void 0!==t(this,q,"f")?.shouldLabelFloat?!0===t(this,q,"f").shouldLabelFloat:"string"==typeof t(this,q,"f")?.value&&t(this,q,"f").value.length>0},Y=function(){t(this,A,"f").observe(this._base),t(this,V,"f").observe(this._base),t(this,R,"f").observe(this._hint),t(this,E,"m",ot).call(this),t(this,U,"f").observe(this._error),t(this,E,"m",lt).call(this)},j=function(t){t.stopImmediatePropagation(),t.stopPropagation()},B=function(t){const e=t.target.assignedElements({flatten:!0});u(this,"--with-label",e.length>0),this._pseudoLabel=e[0]?.textContent??""},X=function(e){u(this,"--with-prefix",x(e.target)),t(this,D,"f").observe(this._prefix)},J=function(t){u(this,"--with-suffix",x(t.target))},K=function(){"outlined"===this.variant&&this._base.style.setProperty("--_prefix-width",`${this._prefix.clientWidth}px`)},Q=function(e){t(this,E,"m",st).call(this,W(e.target))},Z=function(e){!t(this,q,"f")||t(this,F,"f")||t(this,q,"f").disabled||(t(this,q,"f").onContainerClick?t(this,q,"f").onContainerClick(e):t(this,q,"f").focus())},tt=function(){this._invalid=!0,this.notifyControlStateChange()},et=function(){this._invalid=!(t(this,q,"f")?.checkValidity?.()??1),this.notifyControlStateChange()},it=function(){this._invalid=!1,setTimeout(()=>this.notifyControlStateChange())},st=function(i){if(t(this,q,"f")!==i&&(t(this,q,"f")&&(t(this,G,"f")&&S.removeDescription(t(this,q,"f"),t(this,G,"f")),t(this,I,"f")&&S.removeDescription(t(this,q,"f"),t(this,I,"f")),t(this,P,"f").unobserve(t(this,q,"f")),t(this,q,"f").removeEventListener("invalid",t(this,N,"f")),t(this,q,"f").form?.removeEventListener("reset",t(this,H,"f")),t(this,T,"f")?.call(this),e(this,T,void 0,"f")),e(this,q,i,"f"),["INPUT","TEXTAREA"].includes(t(this,q,"f")?.tagName??"")?this._base.style.setProperty("--_form-field-cursor","text"):this._base.style.removeProperty("--_form-field-cursor"),u(this,"--with-select","M3E-SELECT"===t(this,q,"f")?.tagName),w(this,"--with-select")&&this._base.style.setProperty("--_form-field-cursor","pointer"),t(this,q,"f"))){t(this,P,"f").observe(t(this,q,"f")),t(this,q,"f").addEventListener("invalid",t(this,N,"f")),t(this,q,"f").form?.addEventListener("reset",t(this,H,"f")),t(this,q,"f").removeAttribute("aria-invalid"),t(this,G,"f")&&S.describe(t(this,q,"f"),t(this,G,"f")),this.notifyControlStateChange();const e=t(this,q,"f").tagName.toLowerCase();e.startsWith("m3e-")&&!customElements.get(e)?customElements.whenDefined(e).then(()=>t(this,E,"m",at).call(this)):t(this,E,"m",at).call(this)}},at=function(){t(this,q,"f")&&e(this,T,_(t(this,q,"f"),"value",{set:(t,e)=>{e(t),this.notifyControlStateChange(!0)}}),"f")},ot=function(){const i=$(this._hint,!0);i!==t(this,G,"f")&&(t(this,q,"f")&&t(this,G,"f")&&S.removeDescription(t(this,q,"f"),t(this,G,"f")),e(this,G,i,"f"),t(this,q,"f")&&t(this,G,"f")&&S.describe(t(this,q,"f"),t(this,G,"f")))},lt=function(){const i=$(this._error,!0);i!==t(this,I,"f")&&(t(this,q,"f")&&t(this,I,"f")&&S.removeDescription(t(this,q,"f"),t(this,I,"f")),e(this,I,i,"f"),t(this,q,"f")&&t(this,I,"f")&&this._invalid&&S.describe(t(this,q,"f"),t(this,I,"f")))},k(l`m3e-form-field input::placeholder, m3e-form-field textarea::placeholder { user-select: none; color: currentColor; transition: opacity ${z.motion.duration.extraLong1}; } m3e-form-field[float-label="auto"]:not(:is(:state(--float-label), :--float-label)):is( :state(--with-label), :--with-label ) input::placeholder, m3e-form-field[float-label="auto"]:not(:is(:state(--float-label), :--float-label)):is( :state(--with-label), :--with-label ) textarea::placeholder { opacity: 0; transition: opacity 0s; } m3e-form-field[variant="outlined"] m3e-input-chip-set { margin-block: calc(calc(3.5rem + ${z.density.calc(-3)}) / 4); } @media (prefers-reduced-motion) { m3e-form-field input::placeholder, m3e-form-field textarea::placeholder { transition: none !important; } }`),rt.styles=l`:host { display: inline-flex; flex-direction: column; vertical-align: middle; font-size: var(--m3e-form-field-font-size, ${z.typescale.standard.body.large.fontSize}); font-weight: var(--m3e-form-field-font-weight, ${z.typescale.standard.body.large.fontWeight}); line-height: var(--m3e-form-field-line-height, ${z.typescale.standard.body.large.lineHeight}); letter-spacing: var(--m3e-form-field-tracking, ${z.typescale.standard.body.large.tracking}); width: var(--m3e-form-field-width, 14.5rem); color: var(--_form-field-color); } :host(:not(:is(:state(--disabled), :--disabled))) .base { cursor: var(--_form-field-cursor); } .base { display: flex; align-items: center; position: relative; min-height: calc(3.5rem + ${z.density.calc(-3)}); --_form-field-label-font-size: var( --m3e-form-field-label-font-size, ${z.typescale.standard.body.small.fontSize} ); --_form-field-label-line-height: var( --m3e-form-field-label-line-height, ${z.typescale.standard.body.small.lineHeight} ); } .content { display: flex; align-items: center; position: relative; flex: 1 1 auto; min-width: 0; min-height: var(--m3e-form-field-icon-size, 1.5rem); } .prefix, .suffix { display: flex; align-items: center; position: relative; user-select: none; flex: none; font-size: var(--m3e-form-field-icon-size, 1.5rem); } .prefix-text, .suffix-text { opacity: 1; transition: opacity ${z.motion.duration.extraLong1}; user-select: none; flex: none; } .input { display: inline-flex; flex-wrap: wrap; flex: 1 1 auto; min-width: 0; } .label { display: flex; position: absolute; pointer-events: none; user-select: none; top: 0; left: 0; right: 0; font-size: var(--m3e-form-field-label-font-size, ${z.typescale.standard.body.small.fontSize}); font-weight: var(--m3e-form-field-label-font-weight, ${z.typescale.standard.body.small.fontWeight}); line-height: var(--m3e-form-field-label-line-height, ${z.typescale.standard.body.small.lineHeight}); letter-spacing: var(--m3e-form-field-label-tracking, ${z.typescale.standard.body.small.tracking}); color: var(--_form-field-label-color, inherit); transition: ${r(`top ${z.motion.duration.short4}, \n font-size ${z.motion.duration.short4}, \n line-height ${z.motion.duration.short4}`)}; } :host(:is(:state(--with-select), :--with-select)) .label { margin-inline-end: 1.5rem; } ::slotted([slot="label"]) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .subscript { display: inline-flex; width: 100%; margin-top: 0.25rem; font-size: var(--m3e-form-field-subscript-font-size, ${z.typescale.standard.body.small.fontSize}); font-weight: var(--m3e-form-field-subscript-font-weight, ${z.typescale.standard.body.small.fontWeight}); line-height: var(--m3e-form-field-subscript-line-height, ${z.typescale.standard.body.small.lineHeight}); letter-spacing: var(--m3e-form-field-subscript-tracking, ${z.typescale.standard.body.small.tracking}); min-height: var(--m3e-form-field-subscript-line-height, ${z.typescale.standard.body.small.lineHeight}); color: var(--m3e-form-field-subscript-color, ${z.color.onSurfaceVariant}); } .error, .hint { flex: 1 1 auto; } :host([hide-subscript="always"]) .subscript { display: none; } :host([hide-subscript="auto"]:not(:is(:state(--invalid), :--invalid))) .subscript { opacity: 0; margin-top: 0.25rem; transform: translateY(-0.25rem); transition: ${r(`opacity ${z.motion.duration.short4}, \n transform ${z.motion.duration.short4}`)}; } :host([hide-subscript="auto"]:not(:is(:state(--invalid), :--invalid)):focus-within) .subscript, :host([hide-subscript="auto"]:not(:is(:state(--invalid), :--invalid)):is(:state(--pressed), :--pressed)) .subscript { opacity: 1; transform: translateY(0); } :host(:is(:state(--invalid), :--invalid)) .hint { display: none; } :host(:not(:is(:state(--invalid), :--invalid))) .error { display: none; } ::slotted(input), ::slotted(textarea), ::slotted(select) { outline: unset; border: unset; background-color: transparent; box-shadow: none; font-family: inherit; font-size: inherit; line-height: inherit; letter-spacing: inherit; color: var(--_form-field-input-color, inherit); flex: 1 1 auto; min-width: 0; padding: unset; } ::slotted(textarea) { scrollbar-width: ${z.scrollbar.thinWidth}; scrollbar-color: ${z.scrollbar.color}; } ::slotted(m3e-select), ::slotted(m3e-input-chip-set) { flex: 1 1 auto; min-width: 0; } :host([float-label="auto"]:not(:is(:state(--float-label), :--float-label)):not(:is(:state(--pressed), :--pressed))) .label { font-size: inherit; } :host([float-label="auto"]:not(:is(:state(--float-label), :--float-label)):is(:state(--with-label), :--with-label)) .prefix-text, :host([float-label="auto"]:not(:is(:state(--float-label), :--float-label)):is(:state(--with-label), :--with-label)) .suffix-text { opacity: 0; transition: opacity 0s; } .prefix { margin-inline-start: 1rem; } :host(:is(:state(--with-prefix), :--with-prefix)) .prefix { margin-inline-end: 1rem; margin-inline-start: 0.75rem; } .suffix { margin-inline-end: 1rem; } :host(:is(:state(--with-suffix), :--with-suffix)) .suffix { margin-inline-start: 0.25rem; margin-inline-end: 0.5rem; } :host(:is(:state(--with-suffix), :--with-suffix):is(:state(--with-select), :--with-select)) .suffix { margin-inline-start: unset; } :host(:is(:state(--with-select), :--with-select)) .suffix-text { display: none; } :host([variant="outlined"]) .label { margin-top: calc(0px - var(--_form-field-label-line-height) / 2); } :host([variant="outlined"]) .outline { position: absolute; display: flex; pointer-events: none; left: 0; top: 0; bottom: 0; right: 0; } :host([variant="outlined"]) .pseudo-label { visibility: hidden; margin-inline-end: 0.5rem; font-size: var(--_form-field-label-font-size); line-height: var(--_form-field-label-line-height); letter-spacing: var(--_form-field-label-tracking); max-width: 100%; transition-property: max-width, margin-inline-end; transition-duration: 1ms; } :host([variant="outlined"]:is(:state(--required), :--required):not([hide-required-marker])) .pseudo-label { margin-inline-end: 0.25rem; } :host( [variant="outlined"][float-label="auto"]:not(:is(:state(--float-label), :--float-label)):not( :is(:state(--pressed), :--pressed) ) ) .pseudo-label { max-width: 0; margin-inline-end: 0px; transition-delay: ${z.motion.duration.short2}; } :host([variant="outlined"]) .outline-start, :host([variant="outlined"]) .outline-notch, :host([variant="outlined"]) .outline-end { box-sizing: border-box; border-width: var(--_form-field-outline-size, 1px); border-color: var(--_form-field-outline-color); transition: border-color ${z.motion.duration.short4}; } :host([variant="outlined"]:not(:is(:state(--with-label), :--with-label))) .outline-notch { display: none; } :host([variant="outlined"]) .outline-start { min-width: 0.75rem; border-top-style: solid; border-inline-start-style: solid; border-bottom-style: solid; border-start-start-radius: var(--m3e-outlined-form-field-container-shape, ${z.shape.corner.extraSmall}); border-end-start-radius: var(--m3e-outlined-form-field-container-shape, ${z.shape.corner.extraSmall}); } :host([variant="outlined"]) .outline-notch { border-bottom-style: solid; } :host([variant="outlined"]) .outline-end { flex-grow: 1; min-width: 1rem; border-top-style: solid; border-inline-end-style: solid; border-bottom-style: solid; border-start-end-radius: var(--m3e-outlined-form-field-container-shape, ${z.shape.corner.extraSmall}); border-end-end-radius: var(--m3e-outlined-form-field-container-shape, ${z.shape.corner.extraSmall}); } :host([variant="outlined"]:is(:state(--with-prefix), :--with-prefix)) .outline-start { min-width: calc(1.25rem + var(--_prefix-width, 0px) + 0.25rem); } :host([variant="outlined"]:not(:is(:state(--disabled), :--disabled))) .base:hover .outline, :host([variant="outlined"]:not(:is(:state(--disabled), :--disabled)):focus-within) .outline, :host([variant="outlined"]:not(:is(:state(--disabled), :--disabled)):is(:state(--pressed), :--pressed)) .outline { --_form-field-outline-size: 2px; } :host([variant="outlined"]) .subscript { margin-inline: 1rem; width: calc(100% - 2rem); } :host([variant="outlined"]) .content { min-height: calc(3.5rem + ${z.density.calc(-3)}); --_form-field-label-font-size: var( --m3e-form-field-label-font-size, ${z.typescale.standard.body.small.fontSize} ); } :host( [variant="outlined"][float-label="auto"]:not(:is(:state(--float-label), :--float-label)):not( :is(:state(--pressed), :--pressed) ) ) .label { margin-top: unset; line-height: calc(3.5rem + ${z.density.calc(-3)}); --_form-field-label-font-size: var( --m3e-form-field-label-font-size, ${z.typescale.standard.body.small.fontSize} ); } :host([variant="filled"]) .base { --_select-arrow-margin-top: calc( 0px - calc(1rem / max(calc(0 - calc(var(--md-sys-density-scale, 0) + var(--md-sys-density-scale, 0))), 1)) ); } :host([variant="filled"]) .base::before { content: ""; box-sizing: border-box; position: absolute; pointer-events: none; top: 0; left: 0; right: 0; bottom: 0; border-bottom-style: solid; border-width: 1px; border-radius: var(--m3e-form-field-container-shape, ${z.shape.corner.extraSmallTop}); border-color: var(--_form-field-outline-color); background-color: var(--_form-field-container-color); } :host([variant="filled"]:not(:is(:state(--disabled), :--disabled))) .base:hover::before, :host([variant="filled"]:not(:is(:state(--disabled), :--disabled)):focus-within) .base::before, :host([variant="filled"]:not(:is(:state(--disabled), :--disabled)):is(:state(--pressed), :--pressed)) .base::before { border-width: 3px; } :host([variant="filled"]) .base::after { content: ""; box-sizing: border-box; position: absolute; pointer-events: none; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--_form-field-hover-container-color); transition: background-color ${z.motion.duration.short4}; } :host([variant="filled"]) .subscript { margin-inline: 1rem; width: calc(100% - 2rem); } :host([variant="filled"]) .content { padding-top: calc(1.5rem + ${z.density.calc(-3)}); margin-bottom: 0.5rem; } :host([variant="filled"]) .label { top: max(0px, calc(0.5rem + ${z.density.calc(-3)})); } :host( [variant="filled"][float-label="auto"]:not(:is(:state(--float-label), :--float-label)):not( :is(:state(--pressed), :--pressed) ) ) .label { top: 0px; line-height: calc(3.5rem + ${z.density.calc(-3)} - 0.0625rem); --_form-field-label-font-size: var( --m3e-form-field-label-font-size, ${z.typescale.standard.body.small.fontSize} ); } :host(:not(:is(:state(--disabled), :--disabled)):not(:focus-within):not(:is(:state(--pressed), :--pressed))) .base:hover { --_form-field-hover-container-color: color-mix( in srgb, var(--m3e-form-field-hover-container-color, ${z.color.onSurface}) var(--m3e-form-field-hover-container-opacity, 8%), transparent ); } :host(:not(:is(:state(--disabled), :--disabled)):not(:is(:state(--invalid), :--invalid))) { color: var(--m3e-form-field-color, ${z.color.onSurface}); } :host([variant="outlined"]:not(:is(:state(--disabled), :--disabled)):not(:is(:state(--invalid), :--invalid))) .base { --_form-field-outline-color: var(--m3e-form-field-outline-color, ${z.color.outline}); } :host([variant="filled"]:not(:is(:state(--disabled), :--disabled)):not(:is(:state(--invalid), :--invalid))) .base { --_form-field-outline-color: var(--m3e-form-field-outline-color, ${z.color.onSurfaceVariant}); } :host( [variant="outlined"]:not(:is(:state(--disabled), :--disabled)):not( :is(:state(--invalid), :--invalid) ):focus-within ) .base, :host( [variant="outlined"]:not(:is(:state(--disabled), :--disabled)):not(:is(:state(--invalid), :--invalid)):is( :state(--pressed), :--pressed ) ) .base, :host( [variant="filled"]:not(:is(:state(--disabled), :--disabled)):not( :is(:state(--invalid), :--invalid) ):focus-within ) .base, :host( [variant="filled"]:not(:is(:state(--disabled), :--disabled)):not(:is(:state(--invalid), :--invalid)):is( :state(--pressed), :--pressed ) ) .base { --_form-field-outline-color: var(--m3e-form-field-focused-outline-color, ${z.color.primary}); --_form-field-label-color: var(--m3e-form-field-focused-color, ${z.color.primary}); } :host(:not(:is(:state(--disabled), :--disabled))) .base { --_form-field-container-color: var( --m3e-form-field-container-color, ${z.color.surfaceContainerHighest} ); } :host(:not(:is(:state(--disabled), :--disabled)):is(:state(--invalid), :--invalid)) .base { --_form-field-label-color: var(--m3e-form-field-invalid-color, ${z.color.error}); --_form-field-outline-color: var(--m3e-form-field-invalid-color, ${z.color.error}); } :host(:not(:is(:state(--disabled), :--disabled)):is(:state(--invalid), :--invalid)) .subscript { color: var(--m3e-form-field-invalid-color, ${z.color.error}); } :host(:is(:state(--disabled), :--disabled)) { color: color-mix( in srgb, var(--m3e-form-field-disabled-color, ${z.color.onSurface}) var(--m3e-form-field-disabled-opacity, 38%), transparent ); } :host(:is(:state(--disabled), :--disabled)) .base { --_form-field-container-color: color-mix( in srgb, var(--m3e-form-field-disabled-container-color, ${z.color.onSurface}) var(--m3e-form-field-disabled-container-opacity, 4%), transparent ); } :host(:is(:state(--no-animate), :--no-animate)) *, :host(:is(:state(--no-animate), :--no-animate)) *::before, :host(:is(:state(--no-animate), :--no-animate)) *::after { transition: none !important; } @media (forced-colors: active) { :host([variant="filled"]) .base::after { transition: none; } :host { --_form-field-outline-color: CanvasText; } :host(:is(:state(--disabled), :--disabled)) { --_form-field-input-color: GrayText; --_form-field-color: GrayText; --_form-field-label-color: GrayText; --_form-field-outline-color: GrayText; } } @media (prefers-reduced-motion) { .base::before, .prefix-text, .suffix-text, .label, .subscript, .outline-start, .outline-notch, .outline-end, .pseudo-label { transition: none !important; } }`,i([n(".base")],rt.prototype,"_base",void 0),i([n(".prefix")],rt.prototype,"_prefix",void 0),i([n(".error")],rt.prototype,"_error",void 0),i([n(".hint")],rt.prototype,"_hint",void 0),i([d()],rt.prototype,"_pseudoLabel",void 0),i([d()],rt.prototype,"_required",void 0),i([d()],rt.prototype,"_invalid",void 0),i([d()],rt.prototype,"_validationMessage",void 0),i([f({reflect:!0})],rt.prototype,"variant",void 0),i([f({attribute:"hide-required-marker",type:Boolean,reflect:!0})],rt.prototype,"hideRequiredMarker",void 0),i([f({attribute:"hide-subscript",reflect:!0})],rt.prototype,"hideSubscript",void 0),i([f({attribute:"float-label",reflect:!0})],rt.prototype,"floatLabel",void 0),rt=i([C("m3e-form-field")],rt);export{rt as M3eFormFieldElement,W as findFormFieldControl,L as isFormFieldControl};
22
+ */var W,E,T,H,N,P,D,A,R,U,V,F,G,I,O,Y,j,B,X,J,K,Q,Z,tt,et,it,st,at,ot,lt;let rt=class extends(h(c(s))){constructor(){super(),W.add(this),E.set(this,null),T.set(this,void 0),H.set(this,()=>t(this,W,"m",it).call(this)),N.set(this,()=>t(this,W,"m",tt).call(this)),P.set(this,new m(this,{target:null,config:{attributeFilter:["disabled","readonly","required"]},callback:()=>this.notifyControlStateChange()})),D.set(this,new b(this,{target:null,callback:()=>t(this,W,"m",K).call(this)})),A.set(this,new p(this,{target:null,callback:i=>{i=i&&!(t(this,E,"f")?.disabled??1),u(this,"--no-animate",!1),e(this,F,i,"f"),i?u(this,"--float-label",!0):(this._invalid=!(t(this,E,"f")?.checkValidity?.()??1),this.notifyControlStateChange())}})),R.set(this,new m(this,{target:null,config:{childList:!0,subtree:!0},callback:()=>t(this,W,"m",ot).call(this)})),U.set(this,new m(this,{target:null,config:{childList:!0,subtree:!0},callback:()=>t(this,W,"m",lt).call(this)})),V.set(this,new v(this,{target:null,callback:e=>u(this,"--pressed",e&&!(t(this,E,"f")?.disabled??1))})),F.set(this,!1),this._pseudoLabel="",this._required=!1,this._invalid=!1,this._validationMessage="",G.set(this,""),I.set(this,""),this.variant="outlined",this.hideRequiredMarker=!1,this.hideSubscript="auto",this.floatLabel="auto",new g(this,{callback:()=>u(this,"--no-animate",!1)})}get menuAnchor(){return this._base}get control(){return t(this,E,"f")}notifyControlStateChange(e=!1){this._required=!0===t(this,E,"f")?.required,u(this,"--required",this._required),u(this,"--disabled",!0===t(this,E,"f")?.disabled),u(this,"--readonly",y(t(this,E,"f"))&&!0===t(this,E,"f").readOnly),"auto"===this.floatLabel&&u(this,"--float-label",t(this,W,"a",O)||t(this,F,"f")),e&&(this._invalid=!(t(this,E,"f")?.checkValidity?.()??1)),u(this,"--invalid",this._invalid),this._validationMessage=t(this,E,"f")?.validationMessage??"",this.isUpdatePending||this.performUpdate()}connectedCallback(){super.connectedCallback(),u(this,"--no-animate",!0)}disconnectedCallback(){super.disconnectedCallback(),t(this,W,"m",st).call(this,null)}reconnectedCallback(){super.reconnectedCallback(),t(this,W,"m",Y).call(this)}firstUpdated(e){super.firstUpdated(e),t(this,W,"m",Y).call(this)}update(e){super.update(e),e.has("_invalid")&&t(this,E,"f")&&(t(this,E,"f").ariaInvalid=this._invalid?"true":null,t(this,I,"f")&&(this._invalid?S.describe(t(this,E,"f"),t(this,I,"f")):S.removeDescription(t(this,E,"f"),t(this,I,"f"))))}render(){return o`<div class="base" @click="${t(this,W,"m",Z)}">${"outlined"===this.variant?o`<div class="outline" aria-hidden="true"><div class="outline-start"></div><div class="outline-notch"><div class="pseudo-label">${this._pseudoLabel} ${!this.hideRequiredMarker&&this._required?o`&nbsp;*`:a}</div></div><div class="outline-end"></div></div>`:a}<div class="prefix"><slot name="prefix" @slotchange="${t(this,W,"m",X)}"></slot></div><div class="content"><span class="prefix-text"><slot name="prefix-text"></slot></span><span class="input"><slot @slotchange="${t(this,W,"m",Q)}" @change="${t(this,W,"m",et)}"></slot></span><span class="suffix-text"><slot name="suffix-text"></slot></span><span class="label"><slot name="label" @slotchange="${t(this,W,"m",B)}"></slot>${!this.hideRequiredMarker&&this._required?o`<span class="required-marker" aria-hidden="true">&nbsp;*</span>`:a}</span></div><div class="suffix" @click="${t(this,W,"m",j)}" @focusin="${t(this,W,"m",j)}" @focusout="${t(this,W,"m",j)}" @pointerdown="${t(this,W,"m",j)}" @keydown="${t(this,W,"m",j)}" @keyup="${t(this,W,"m",j)}"><slot name="suffix" @slotchange="${t(this,W,"m",J)}"></slot></div></div><span class="subscript" aria-hidden="true"><span class="error"><slot name="error">${this._validationMessage}</slot></span><span class="hint"><slot name="hint"></slot></span></span>`}};E=new WeakMap,T=new WeakMap,H=new WeakMap,N=new WeakMap,P=new WeakMap,D=new WeakMap,A=new WeakMap,R=new WeakMap,U=new WeakMap,V=new WeakMap,F=new WeakMap,G=new WeakMap,I=new WeakMap,W=new WeakSet,O=function(){return void 0!==t(this,E,"f")?.shouldLabelFloat?!0===t(this,E,"f").shouldLabelFloat:"string"==typeof t(this,E,"f")?.value&&t(this,E,"f").value.length>0},Y=function(){t(this,A,"f").observe(this._base),t(this,V,"f").observe(this._base),t(this,R,"f").observe(this._hint),t(this,W,"m",ot).call(this),t(this,U,"f").observe(this._error),t(this,W,"m",lt).call(this)},j=function(t){t.stopImmediatePropagation(),t.stopPropagation()},B=function(t){const e=t.target.assignedElements({flatten:!0});u(this,"--with-label",e.length>0),this._pseudoLabel=e[0]?.textContent??""},X=function(e){u(this,"--with-prefix",x(e.target)),t(this,D,"f").observe(this._prefix)},J=function(t){u(this,"--with-suffix",x(t.target))},K=function(){"outlined"===this.variant&&this._base.style.setProperty("--_prefix-width",`${this._prefix.clientWidth}px`)},Q=function(e){t(this,W,"m",st).call(this,L(e.target))},Z=function(e){!t(this,E,"f")||t(this,F,"f")||t(this,E,"f").disabled||(t(this,E,"f").onContainerClick?t(this,E,"f").onContainerClick(e):t(this,E,"f").focus())},tt=function(){this._invalid=!0,this.notifyControlStateChange()},et=function(){this._invalid=!(t(this,E,"f")?.checkValidity?.()??1),this.notifyControlStateChange()},it=function(){this._invalid=!1,setTimeout(()=>this.notifyControlStateChange())},st=function(i){if(t(this,E,"f")!==i&&(t(this,E,"f")&&(t(this,G,"f")&&S.removeDescription(t(this,E,"f"),t(this,G,"f")),t(this,I,"f")&&S.removeDescription(t(this,E,"f"),t(this,I,"f")),t(this,P,"f").unobserve(t(this,E,"f")),t(this,E,"f").removeEventListener("invalid",t(this,N,"f")),t(this,E,"f").form?.removeEventListener("reset",t(this,H,"f")),t(this,T,"f")?.call(this),e(this,T,void 0,"f")),e(this,E,i,"f"),["INPUT","TEXTAREA"].includes(t(this,E,"f")?.tagName??"")?this._base.style.setProperty("--_form-field-cursor","text"):this._base.style.removeProperty("--_form-field-cursor"),u(this,"--with-select","M3E-SELECT"===t(this,E,"f")?.tagName),w(this,"--with-select")&&this._base.style.setProperty("--_form-field-cursor","pointer"),t(this,E,"f"))){t(this,P,"f").observe(t(this,E,"f")),t(this,E,"f").addEventListener("invalid",t(this,N,"f")),t(this,E,"f").form?.addEventListener("reset",t(this,H,"f")),t(this,E,"f").removeAttribute("aria-invalid"),t(this,G,"f")&&S.describe(t(this,E,"f"),t(this,G,"f")),this.notifyControlStateChange();const e=t(this,E,"f").tagName.toLowerCase();e.startsWith("m3e-")&&!customElements.get(e)?customElements.whenDefined(e).then(()=>t(this,W,"m",at).call(this)):t(this,W,"m",at).call(this)}},at=function(){t(this,E,"f")&&e(this,T,_(t(this,E,"f"),"value",{set:(t,e)=>{e(t),this.notifyControlStateChange(!0)}}),"f")},ot=function(){const i=$(this._hint,!0);i!==t(this,G,"f")&&(t(this,E,"f")&&t(this,G,"f")&&S.removeDescription(t(this,E,"f"),t(this,G,"f")),e(this,G,i,"f"),t(this,E,"f")&&t(this,G,"f")&&S.describe(t(this,E,"f"),t(this,G,"f")))},lt=function(){const i=$(this._error,!0);i!==t(this,I,"f")&&(t(this,E,"f")&&t(this,I,"f")&&S.removeDescription(t(this,E,"f"),t(this,I,"f")),e(this,I,i,"f"),t(this,E,"f")&&t(this,I,"f")&&this._invalid&&S.describe(t(this,E,"f"),t(this,I,"f")))},k(l`m3e-form-field input::placeholder, m3e-form-field textarea::placeholder { user-select: none; color: currentColor; transition: opacity ${z.motion.duration.extraLong1}; } m3e-form-field[float-label="auto"]:not(:is(:state(--float-label), :--float-label)):is( :state(--with-label), :--with-label ) input::placeholder, m3e-form-field[float-label="auto"]:not(:is(:state(--float-label), :--float-label)):is( :state(--with-label), :--with-label ) textarea::placeholder { opacity: 0; transition: opacity 0s; } m3e-form-field[variant="outlined"] m3e-input-chip-set { margin-block: calc(calc(3.5rem + ${z.density.calc(-3)}) / 4); } @media (prefers-reduced-motion) { m3e-form-field input::placeholder, m3e-form-field textarea::placeholder { transition: none !important; } }`),rt.styles=l`:host { display: inline-flex; flex-direction: column; vertical-align: middle; font-size: var(--m3e-form-field-font-size, ${z.typescale.standard.body.large.fontSize}); font-weight: var(--m3e-form-field-font-weight, ${z.typescale.standard.body.large.fontWeight}); line-height: var(--m3e-form-field-line-height, ${z.typescale.standard.body.large.lineHeight}); letter-spacing: var(--m3e-form-field-tracking, ${z.typescale.standard.body.large.tracking}); width: var(--m3e-form-field-width, 14.5rem); color: var(--_form-field-color); } :host(:not(:is(:state(--disabled), :--disabled))) .base { cursor: var(--_form-field-cursor); } .base { display: flex; align-items: center; position: relative; min-height: calc(3.5rem + ${z.density.calc(-3)}); --_form-field-label-font-size: var( --m3e-form-field-label-font-size, ${z.typescale.standard.body.small.fontSize} ); --_form-field-label-line-height: var( --m3e-form-field-label-line-height, ${z.typescale.standard.body.small.lineHeight} ); } .content { display: flex; align-items: center; position: relative; flex: 1 1 auto; min-width: 0; min-height: var(--m3e-form-field-icon-size, 1.5rem); } .prefix, .suffix { display: flex; align-items: center; position: relative; user-select: none; flex: none; font-size: var(--m3e-form-field-icon-size, 1.5rem); } .prefix-text, .suffix-text { opacity: 1; transition: opacity ${z.motion.duration.extraLong1}; user-select: none; flex: none; } .input { display: inline-flex; flex-wrap: wrap; flex: 1 1 auto; min-width: 0; } .label { display: flex; position: absolute; pointer-events: none; user-select: none; top: 0; left: 0; right: 0; font-size: var(--m3e-form-field-label-font-size, ${z.typescale.standard.body.small.fontSize}); font-weight: var(--m3e-form-field-label-font-weight, ${z.typescale.standard.body.small.fontWeight}); line-height: var(--m3e-form-field-label-line-height, ${z.typescale.standard.body.small.lineHeight}); letter-spacing: var(--m3e-form-field-label-tracking, ${z.typescale.standard.body.small.tracking}); color: var(--_form-field-label-color, inherit); transition: ${r(`top ${z.motion.duration.short4}, \n font-size ${z.motion.duration.short4}, \n line-height ${z.motion.duration.short4}`)}; } :host(:is(:state(--with-select), :--with-select)) .label { margin-inline-end: 1.5rem; } ::slotted([slot="label"]) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .subscript { display: inline-flex; width: 100%; margin-top: 0.25rem; font-size: var(--m3e-form-field-subscript-font-size, ${z.typescale.standard.body.small.fontSize}); font-weight: var(--m3e-form-field-subscript-font-weight, ${z.typescale.standard.body.small.fontWeight}); line-height: var(--m3e-form-field-subscript-line-height, ${z.typescale.standard.body.small.lineHeight}); letter-spacing: var(--m3e-form-field-subscript-tracking, ${z.typescale.standard.body.small.tracking}); min-height: var(--m3e-form-field-subscript-line-height, ${z.typescale.standard.body.small.lineHeight}); color: var(--m3e-form-field-subscript-color, ${z.color.onSurfaceVariant}); } .error, .hint { flex: 1 1 auto; } :host([hide-subscript="always"]) .subscript { display: none; } :host([hide-subscript="auto"]:not(:is(:state(--invalid), :--invalid))) .subscript { opacity: 0; margin-top: 0.25rem; transform: translateY(-0.25rem); transition: ${r(`opacity ${z.motion.duration.short4}, \n transform ${z.motion.duration.short4}`)}; } :host([hide-subscript="auto"]:not(:is(:state(--invalid), :--invalid)):focus-within) .subscript, :host([hide-subscript="auto"]:not(:is(:state(--invalid), :--invalid)):is(:state(--pressed), :--pressed)) .subscript { opacity: 1; transform: translateY(0); } :host(:is(:state(--invalid), :--invalid)) .hint { display: none; } :host(:not(:is(:state(--invalid), :--invalid))) .error { display: none; } ::slotted(input), ::slotted(textarea), ::slotted(select) { outline: unset; border: unset; background-color: transparent; box-shadow: none; font-family: inherit; font-size: inherit; line-height: inherit; letter-spacing: inherit; color: var(--_form-field-input-color, inherit); flex: 1 1 auto; min-width: 0; padding: unset; } ::slotted(textarea) { scrollbar-width: ${z.scrollbar.thinWidth}; scrollbar-color: ${z.scrollbar.color}; } ::slotted(m3e-select), ::slotted(m3e-input-chip-set) { flex: 1 1 auto; min-width: 0; } :host([float-label="auto"]:not(:is(:state(--float-label), :--float-label)):not(:is(:state(--pressed), :--pressed))) .label { font-size: inherit; } :host([float-label="auto"]:not(:is(:state(--float-label), :--float-label)):is(:state(--with-label), :--with-label)) .prefix-text, :host([float-label="auto"]:not(:is(:state(--float-label), :--float-label)):is(:state(--with-label), :--with-label)) .suffix-text { opacity: 0; transition: opacity 0s; } .prefix { margin-inline-start: 1rem; } :host(:is(:state(--with-prefix), :--with-prefix)) .prefix { margin-inline-end: 1rem; margin-inline-start: 0.75rem; } .suffix { margin-inline-end: 1rem; } :host(:is(:state(--with-suffix), :--with-suffix)) .suffix { margin-inline-start: 0.25rem; margin-inline-end: 0.5rem; } :host(:is(:state(--with-suffix), :--with-suffix):is(:state(--with-select), :--with-select)) .suffix { margin-inline-start: unset; } :host(:is(:state(--with-select), :--with-select)) .suffix-text { display: none; } :host([variant="outlined"]) .label { margin-top: calc(0px - var(--_form-field-label-line-height) / 2); } :host([variant="outlined"]) .outline { position: absolute; display: flex; pointer-events: none; left: 0; top: 0; bottom: 0; right: 0; } :host([variant="outlined"]) .pseudo-label { visibility: hidden; margin-inline-end: 0.5rem; font-size: var(--_form-field-label-font-size); line-height: var(--_form-field-label-line-height); letter-spacing: var(--_form-field-label-tracking); max-width: 100%; transition-property: max-width, margin-inline-end; transition-duration: 1ms; } :host( :is(:state(--required), :--required):not([hide-required-marker]):not(:is(:state(--with-label), :--with-label)) ) .pseudo-label, :host( :is(:state(--required), :--required):not([hide-required-marker]):not(:is(:state(--with-label), :--with-label)) ) .required-marker { display: none; } :host([variant="outlined"]:is(:state(--required), :--required):not([hide-required-marker])) .pseudo-label { margin-inline-end: 0.25rem; } :host( [variant="outlined"][float-label="auto"]:not(:is(:state(--float-label), :--float-label)):not( :is(:state(--pressed), :--pressed) ) ) .pseudo-label { max-width: 0; margin-inline-end: 0px; transition-delay: ${z.motion.duration.short2}; } :host([variant="outlined"]) .outline-start, :host([variant="outlined"]) .outline-notch, :host([variant="outlined"]) .outline-end { box-sizing: border-box; border-width: var(--_form-field-outline-size, 1px); border-color: var(--_form-field-outline-color); transition: border-color ${z.motion.duration.short4}; } :host([variant="outlined"]:not(:is(:state(--with-label), :--with-label))) .outline-notch { display: none; } :host([variant="outlined"]) .outline-start { min-width: 0.75rem; border-top-style: solid; border-inline-start-style: solid; border-bottom-style: solid; border-start-start-radius: var(--m3e-outlined-form-field-container-shape, ${z.shape.corner.extraSmall}); border-end-start-radius: var(--m3e-outlined-form-field-container-shape, ${z.shape.corner.extraSmall}); } :host([variant="outlined"]) .outline-notch { border-bottom-style: solid; } :host([variant="outlined"]) .outline-end { flex-grow: 1; min-width: 1rem; border-top-style: solid; border-inline-end-style: solid; border-bottom-style: solid; border-start-end-radius: var(--m3e-outlined-form-field-container-shape, ${z.shape.corner.extraSmall}); border-end-end-radius: var(--m3e-outlined-form-field-container-shape, ${z.shape.corner.extraSmall}); } :host([variant="outlined"]:is(:state(--with-prefix), :--with-prefix)) .outline-start { min-width: calc(1.25rem + var(--_prefix-width, 0px) + 0.25rem); } :host([variant="outlined"]:not(:is(:state(--disabled), :--disabled))) .base:hover .outline, :host([variant="outlined"]:not(:is(:state(--disabled), :--disabled)):focus-within) .outline, :host([variant="outlined"]:not(:is(:state(--disabled), :--disabled)):is(:state(--pressed), :--pressed)) .outline { --_form-field-outline-size: 2px; } :host([variant="outlined"]) .subscript { margin-inline: 1rem; width: calc(100% - 2rem); } :host([variant="outlined"]) .content { min-height: calc(3.5rem + ${z.density.calc(-3)}); --_form-field-label-font-size: var( --m3e-form-field-label-font-size, ${z.typescale.standard.body.small.fontSize} ); } :host( [variant="outlined"][float-label="auto"]:not(:is(:state(--float-label), :--float-label)):not( :is(:state(--pressed), :--pressed) ) ) .label { margin-top: unset; line-height: calc(3.5rem + ${z.density.calc(-3)}); --_form-field-label-font-size: var( --m3e-form-field-label-font-size, ${z.typescale.standard.body.small.fontSize} ); } :host([variant="filled"]) .base { --_select-arrow-margin-top: calc( 0px - calc(1rem / max(calc(0 - calc(var(--md-sys-density-scale, 0) + var(--md-sys-density-scale, 0))), 1)) ); } :host([variant="filled"]) .base::before { content: ""; box-sizing: border-box; position: absolute; pointer-events: none; top: 0; left: 0; right: 0; bottom: 0; border-bottom-style: solid; border-width: 1px; border-radius: var(--m3e-form-field-container-shape, ${z.shape.corner.extraSmallTop}); border-color: var(--_form-field-outline-color); background-color: var(--_form-field-container-color); } :host([variant="filled"]:not(:is(:state(--disabled), :--disabled))) .base:hover::before, :host([variant="filled"]:not(:is(:state(--disabled), :--disabled)):focus-within) .base::before, :host([variant="filled"]:not(:is(:state(--disabled), :--disabled)):is(:state(--pressed), :--pressed)) .base::before { border-width: 3px; } :host([variant="filled"]) .base::after { content: ""; box-sizing: border-box; position: absolute; pointer-events: none; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--_form-field-hover-container-color); transition: background-color ${z.motion.duration.short4}; } :host([variant="filled"]) .subscript { margin-inline: 1rem; width: calc(100% - 2rem); } :host([variant="filled"]) .content { padding-top: calc(1.5rem + ${z.density.calc(-3)}); margin-bottom: 0.5rem; } :host([variant="filled"]) .label { top: max(0px, calc(0.5rem + ${z.density.calc(-3)})); } :host( [variant="filled"][float-label="auto"]:not(:is(:state(--float-label), :--float-label)):not( :is(:state(--pressed), :--pressed) ) ) .label { top: 0px; line-height: calc(3.5rem + ${z.density.calc(-3)} - 0.0625rem); --_form-field-label-font-size: var( --m3e-form-field-label-font-size, ${z.typescale.standard.body.small.fontSize} ); } :host(:not(:is(:state(--disabled), :--disabled)):not(:focus-within):not(:is(:state(--pressed), :--pressed))) .base:hover { --_form-field-hover-container-color: color-mix( in srgb, var(--m3e-form-field-hover-container-color, ${z.color.onSurface}) var(--m3e-form-field-hover-container-opacity, 8%), transparent ); } :host(:not(:is(:state(--disabled), :--disabled)):not(:is(:state(--invalid), :--invalid))) { color: var(--m3e-form-field-color, ${z.color.onSurface}); } :host([variant="outlined"]:not(:is(:state(--disabled), :--disabled)):not(:is(:state(--invalid), :--invalid))) .base { --_form-field-outline-color: var(--m3e-form-field-outline-color, ${z.color.outline}); } :host([variant="filled"]:not(:is(:state(--disabled), :--disabled)):not(:is(:state(--invalid), :--invalid))) .base { --_form-field-outline-color: var(--m3e-form-field-outline-color, ${z.color.onSurfaceVariant}); } :host( [variant="outlined"]:not(:is(:state(--disabled), :--disabled)):not( :is(:state(--invalid), :--invalid) ):focus-within ) .base, :host( [variant="outlined"]:not(:is(:state(--disabled), :--disabled)):not(:is(:state(--invalid), :--invalid)):is( :state(--pressed), :--pressed ) ) .base, :host( [variant="filled"]:not(:is(:state(--disabled), :--disabled)):not( :is(:state(--invalid), :--invalid) ):focus-within ) .base, :host( [variant="filled"]:not(:is(:state(--disabled), :--disabled)):not(:is(:state(--invalid), :--invalid)):is( :state(--pressed), :--pressed ) ) .base { --_form-field-outline-color: var(--m3e-form-field-focused-outline-color, ${z.color.primary}); --_form-field-label-color: var(--m3e-form-field-focused-color, ${z.color.primary}); } :host(:not(:is(:state(--disabled), :--disabled))) .base { --_form-field-container-color: var( --m3e-form-field-container-color, ${z.color.surfaceContainerHighest} ); } :host(:not(:is(:state(--disabled), :--disabled)):is(:state(--invalid), :--invalid)) .base { --_form-field-label-color: var(--m3e-form-field-invalid-color, ${z.color.error}); --_form-field-outline-color: var(--m3e-form-field-invalid-color, ${z.color.error}); } :host(:not(:is(:state(--disabled), :--disabled)):is(:state(--invalid), :--invalid)) .subscript { color: var(--m3e-form-field-invalid-color, ${z.color.error}); } :host(:is(:state(--disabled), :--disabled)) { color: color-mix( in srgb, var(--m3e-form-field-disabled-color, ${z.color.onSurface}) var(--m3e-form-field-disabled-opacity, 38%), transparent ); } :host(:is(:state(--disabled), :--disabled)) .base { --_form-field-container-color: color-mix( in srgb, var(--m3e-form-field-disabled-container-color, ${z.color.onSurface}) var(--m3e-form-field-disabled-container-opacity, 4%), transparent ); } :host(:is(:state(--no-animate), :--no-animate)) *, :host(:is(:state(--no-animate), :--no-animate)) *::before, :host(:is(:state(--no-animate), :--no-animate)) *::after { transition: none !important; } @media (forced-colors: active) { :host([variant="filled"]) .base::after { transition: none; } :host { --_form-field-outline-color: CanvasText; } :host(:is(:state(--disabled), :--disabled)) { --_form-field-input-color: GrayText; --_form-field-color: GrayText; --_form-field-label-color: GrayText; --_form-field-outline-color: GrayText; } } @media (prefers-reduced-motion) { .base::before, .prefix-text, .suffix-text, .label, .subscript, .outline-start, .outline-notch, .outline-end, .pseudo-label { transition: none !important; } }`,i([n(".base")],rt.prototype,"_base",void 0),i([n(".prefix")],rt.prototype,"_prefix",void 0),i([n(".error")],rt.prototype,"_error",void 0),i([n(".hint")],rt.prototype,"_hint",void 0),i([d()],rt.prototype,"_pseudoLabel",void 0),i([d()],rt.prototype,"_required",void 0),i([d()],rt.prototype,"_invalid",void 0),i([d()],rt.prototype,"_validationMessage",void 0),i([f({reflect:!0})],rt.prototype,"variant",void 0),i([f({attribute:"hide-required-marker",type:Boolean,reflect:!0})],rt.prototype,"hideRequiredMarker",void 0),i([f({attribute:"hide-subscript",reflect:!0})],rt.prototype,"hideSubscript",void 0),i([f({attribute:"float-label",reflect:!0})],rt.prototype,"floatLabel",void 0),rt=i([C("m3e-form-field")],rt);export{rt as M3eFormFieldElement,L as findFormFieldControl,q as isFormFieldControl};
23
23
  //# sourceMappingURL=form-field.min.js.map