@viasat/beam-web-components 2.68.0 → 2.70.0

package/local/TextField/TextField.js

@@ -1,27 +1,27 @@
-import { r as F, E as n, x as g } from "../chunks/lit-element.CJtt9wj5.js";
-import { n as c, p as f, e as _, c as q } from "../chunks/register-custom-element.AOEv8hcs.js";
+import { r as q, E as n, x as g } from "../chunks/lit-element.CJtt9wj5.js";
+import { n as c, p as f, e as _, c as E } from "../chunks/register-custom-element.AOEv8hcs.js";
 import { r as $ } from "../chunks/state.Dr3yBpId.js";
 import { o as S } from "../chunks/query-assigned-elements.Drkgpk9q.js";
 import { n as M } from "../chunks/ref.B7e1Hu4F.js";
-import { c as w, g as P } from "../chunks/classNames.Ciobzb4w.js";
+import { c as w, g as O } from "../chunks/classNames.Ciobzb4w.js";
 import { d as z } from "../chunks/input.D7RpzZmn.js";
-import { t as O } from "../chunks/constants.ZIKMMCJH.js";
+import { t as P } from "../chunks/constants.ZIKMMCJH.js";
 import { r as I } from "../chunks/delegate.baxDQosr.js";
-import { s as T } from "../chunks/helpers.y-1K1Ev-.js";
-import { FormField as A } from "../wip/Form/Form.decorator.js";
+import { e as T, s as A } from "../chunks/helpers.y-1K1Ev-.js";
+import { FormField as L } from "../wip/Form/Form.decorator.js";
 import "../chunks/index.BoeGm2HZ.js";
-const L = ':root,:host,.bm-light,.bm-dark .bm-inverse,.bm-dark.bm-inverse,[data-bm-theme~=bm-dark] .bm-inverse,[data-bm-theme~=bm-dark].bm-inverse,.bm-enterprise,.bm-consumer,[data-bm-theme~=bm-light]{--bm-comp-input-color-bg: var(--bm-sem-color-surface-01, #ffffff);--bm-comp-input-color-bg-disabled: var( --bm-sem-color-surface-highlight, rgba(159, 175, 188, .16) );--bm-comp-input-color-border: var(--bm-sem-color-border-strong, #8697a5);--bm-comp-input-color-border-error: var( --bm-sem-color-border-negative-strong, #cc2429 );--bm-comp-input-color-border-disabled: rgba(134, 151, 165, .4);--bm-comp-input-color-text: var(--bm-sem-color-text-primary, #141d24);--bm-comp-input-color-text-placeholder: var( --bm-sem-color-text-secondary, #576775 );--bm-comp-input-color-text-disabled: var( --bm-sem-color-text-disabled, rgba(87, 103, 117, .4) );--bm-comp-input-color-icon-disabled: var( --bm-sem-color-text-disabled, rgba(87, 103, 117, .4) );--bm-comp-input-color-icon: var(--bm-sem-color-icon-secondary, #576775);--bm-comp-input-color-icon-error: var( --bm-sem-color-icon-negative-strong, #cc2429 );--bm-comp-input-color-divider: var(--bm-sem-color-border-02, #d1dae0);--bm-comp-input-color-choice-checkbox-selected-bg: var( --bm-alias-color-brand-primary-default, #00768f );--bm-comp-input-color-choice-checkbox-selected-icon: var( --bm-sem-color-icon-primary-inverse, #ffffff );--bm-comp-input-color-choice-checkbox-selected-bg-error: var( --bm-sem-color-surface-negative-strong, #cc2429 );--bm-comp-input-color-choice-checkbox-selected-border: var( --bm-sem-color-none, #ffffff00 );--bm-comp-input-color-choice-switch-selected-bg: var( --bm-alias-color-brand-primary-default, #00768f );--bm-comp-input-color-choice-switch-selected-icon: var( --bm-sem-color-icon-primary-inverse, #ffffff );--bm-comp-input-color-choice-switch-selected-border: var( --bm-sem-color-none, #ffffff00 );--bm-comp-input-color-choice-radio-selected-bg: var( --bm-sem-color-surface-01, #ffffff );--bm-comp-input-color-choice-radio-selected-border: var( --bm-alias-color-brand-primary-default, #00768f );--bm-comp-input-color-choice-radio-selected-inner-circle: var( --bm-alias-color-brand-primary-default, #00768f );--bm-comp-input-color-choice-radio-selected-bg-error: var( --bm-sem-color-surface-01, #ffffff );--bm-comp-input-color-choice-radio-selected-border-error: var( --bm-sem-color-surface-negative-strong, #cc2429 );--bm-comp-input-color-choice-radio-selected-inner-circle-error: var( --bm-sem-color-surface-negative-strong, #cc2429 );--bm-comp-input-typo-sm: var( --bm-sem-typo-compact-body-sm, 400 .875rem/1rem "Source Sans Pro" );--bm-comp-input-typo-md: var( --bm-sem-typo-compact-body-md, 400 1rem/1.25rem "Source Sans Pro" );--bm-comp-input-typo-lg: var( --bm-sem-typo-compact-body-md, 400 1rem/1.25rem "Source Sans Pro" );--bm-comp-input-typo-character-count: var( --bm-sem-typo-body-sm, 400 .875rem/1.25rem "Source Sans Pro" );--bm-comp-input-typo-label-choice: var( --bm-sem-typo-body-md, 400 1rem/1.5rem "Source Sans Pro" );--bm-comp-input-space-field-x-sm: var(--bm-sem-space-75, .75rem);--bm-comp-input-space-field-x-md: var(--bm-sem-space-100, 1rem);--bm-comp-input-space-field-x-lg: var(--bm-sem-space-125, 1.25rem);--bm-comp-input-space-field-y-sm: var(--bm-sem-space-25, .25rem);--bm-comp-input-space-field-y-md: var(--bm-sem-space-50, .5rem);--bm-comp-input-space-field-y-lg: var(--bm-sem-space-75, .75rem);--bm-comp-input-space-field-gap: var(--bm-sem-space-50, .5rem);--bm-comp-input-space-choice-gap-inside: var(--bm-sem-space-50, .5rem);--bm-comp-input-space-choice-gap-items-y: var(--bm-sem-space-50, .5rem);--bm-comp-input-space-choice-gap-items-x: var(--bm-sem-space-100, 1rem);--bm-comp-input-space-choice-nudge: var( --bm-primitive-dimension-12, .125rem );--bm-comp-input-size-field-height-sm: var(--bm-sem-size-height-sm, 2rem);--bm-comp-input-size-field-height-md: var(--bm-sem-size-height-md, 2.5rem);--bm-comp-input-size-field-height-lg: var(--bm-sem-size-height-lg, 3rem);--bm-comp-input-size-field-width: var(--bm-primitive-dimension-1800, 18rem);--bm-comp-input-size-field-icon-sm: var(--bm-sem-size-icon-sm, 1rem);--bm-comp-input-size-field-icon-md: var(--bm-sem-size-icon-md, 1.25rem);--bm-comp-input-size-field-icon-lg: var(--bm-sem-size-icon-md, 1.25rem);--bm-comp-input-size-field-text-area-height: var( --bm-primitive-dimension-475, 4.75rem );--bm-comp-input-size-choice-checkbox: var(--bm-sem-size-icon-sm, 1rem);--bm-comp-input-size-choice-radio: var(--bm-sem-size-icon-sm, 1rem);--bm-comp-input-size-choice-radio-inside: var( --bm-primitive-dimension-50, .5rem );--bm-comp-input-size-choice-switch-height: var( --bm-sem-size-icon-md, 1.25rem );--bm-comp-input-size-choice-switch-width: var( --bm-primitive-dimension-250, 2.5rem );--bm-comp-input-size-choice-switch-knob: var( --bm-primitive-dimension-87, .875rem );--bm-comp-input-radius-field: var(--bm-sem-radius-input-md, .25rem);--bm-comp-input-radius-choice-checkbox: var( --bm-sem-radius-input-sm, .125rem );--bm-comp-input-radius-choice-radio: var( --bm-sem-radius-input-lg, 624.938rem );--bm-comp-input-radius-choice-switch: var( --bm-sem-radius-input-lg, 624.938rem );--bm-comp-input-border-width-field-default: var( --bm-sem-border-width-input, .063rem );--bm-comp-input-border-width-field-error: var( --bm-sem-border-width-lg, .125rem );--bm-comp-input-border-width-choice: var( --bm-sem-border-width-input, .063rem );--bm-comp-input-shadow-field: var( --bm-sem-shadow-none, 0 0 0 0 rgb(0, 0, 0, 0) )}:host,.bm-dark,.bm-light .bm-inverse,.bm-light.bm-inverse,[data-bm-theme~=bm-light] .bm-inverse,[data-bm-theme~=bm-light].bm-inverse,.bm-enterprise,.bm-consumer,[data-bm-theme~=bm-dark]{--bm-comp-input-color-bg: var(--bm-sem-color-surface-01, #202e39);--bm-comp-input-color-bg-disabled: var( --bm-sem-color-surface-highlight, rgba(134, 151, 165, .16) );--bm-comp-input-color-border: var(--bm-sem-color-border-strong, #9fafbc);--bm-comp-input-color-border-error: var( --bm-sem-color-border-negative-strong, #f67378 );--bm-comp-input-color-border-disabled: rgba(159, 175, 188, .4);--bm-comp-input-color-text: var(--bm-sem-color-text-primary, #ffffff);--bm-comp-input-color-text-placeholder: var( --bm-sem-color-text-secondary, #c3cdd5 );--bm-comp-input-color-text-disabled: var( --bm-sem-color-text-disabled, rgba(195, 205, 213, .4) );--bm-comp-input-color-icon-disabled: var( --bm-sem-color-text-disabled, rgba(195, 205, 213, .4) );--bm-comp-input-color-icon: var(--bm-sem-color-icon-secondary, #c3cdd5);--bm-comp-input-color-icon-error: var( --bm-sem-color-icon-negative-strong, #f67378 );--bm-comp-input-color-divider: var(--bm-sem-color-border-02, #465967);--bm-comp-input-color-choice-checkbox-selected-bg: var( --bm-alias-color-brand-primary-default, #43bfd6 );--bm-comp-input-color-choice-checkbox-selected-icon: var( --bm-sem-color-icon-primary-inverse, #141d24 );--bm-comp-input-color-choice-checkbox-selected-bg-error: var( --bm-sem-color-surface-negative-strong, #f67378 );--bm-comp-input-color-choice-checkbox-selected-border: var( --bm-sem-color-none, #ffffff00 );--bm-comp-input-color-choice-switch-selected-bg: var( --bm-alias-color-brand-primary-default, #43bfd6 );--bm-comp-input-color-choice-switch-selected-icon: var( --bm-sem-color-icon-primary-inverse, #141d24 );--bm-comp-input-color-choice-switch-selected-border: var( --bm-sem-color-none, #ffffff00 );--bm-comp-input-color-choice-radio-selected-bg: var( --bm-sem-color-surface-01, #202e39 );--bm-comp-input-color-choice-radio-selected-border: var( --bm-alias-color-brand-primary-default, #43bfd6 );--bm-comp-input-color-choice-radio-selected-inner-circle: var( --bm-alias-color-brand-primary-default, #43bfd6 );--bm-comp-input-color-choice-radio-selected-bg-error: var( --bm-sem-color-surface-01, #202e39 );--bm-comp-input-color-choice-radio-selected-border-error: var( --bm-sem-color-surface-negative-strong, #f67378 );--bm-comp-input-color-choice-radio-selected-inner-circle-error: var( --bm-sem-color-surface-negative-strong, #f67378 );--bm-comp-input-typo-sm: var( --bm-sem-typo-compact-body-sm, 400 .875rem/1rem "Source Sans Pro" );--bm-comp-input-typo-md: var( --bm-sem-typo-compact-body-md, 400 1rem/1.25rem "Source Sans Pro" );--bm-comp-input-typo-lg: var( --bm-sem-typo-compact-body-md, 400 1rem/1.25rem "Source Sans Pro" );--bm-comp-input-typo-character-count: var( --bm-sem-typo-body-sm, 400 .875rem/1.25rem "Source Sans Pro" );--bm-comp-input-typo-label-choice: var( --bm-sem-typo-body-md, 400 1rem/1.5rem "Source Sans Pro" );--bm-comp-input-space-field-x-sm: var(--bm-sem-space-75, .75rem);--bm-comp-input-space-field-x-md: var(--bm-sem-space-100, 1rem);--bm-comp-input-space-field-x-lg: var(--bm-sem-space-125, 1.25rem);--bm-comp-input-space-field-y-sm: var(--bm-sem-space-25, .25rem);--bm-comp-input-space-field-y-md: var(--bm-sem-space-50, .5rem);--bm-comp-input-space-field-y-lg: var(--bm-sem-space-75, .75rem);--bm-comp-input-space-field-gap: var(--bm-sem-space-50, .5rem);--bm-comp-input-space-choice-gap-inside: var(--bm-sem-space-50, .5rem);--bm-comp-input-space-choice-gap-items-y: var(--bm-sem-space-50, .5rem);--bm-comp-input-space-choice-gap-items-x: var(--bm-sem-space-100, 1rem);--bm-comp-input-space-choice-nudge: var( --bm-primitive-dimension-12, .125rem );--bm-comp-input-size-field-height-sm: var(--bm-sem-size-height-sm, 2rem);--bm-comp-input-size-field-height-md: var(--bm-sem-size-height-md, 2.5rem);--bm-comp-input-size-field-height-lg: var(--bm-sem-size-height-lg, 3rem);--bm-comp-input-size-field-width: var(--bm-primitive-dimension-1800, 18rem);--bm-comp-input-size-field-icon-sm: var(--bm-sem-size-icon-sm, 1rem);--bm-comp-input-size-field-icon-md: var(--bm-sem-size-icon-md, 1.25rem);--bm-comp-input-size-field-icon-lg: var(--bm-sem-size-icon-md, 1.25rem);--bm-comp-input-size-field-text-area-height: var( --bm-primitive-dimension-475, 4.75rem );--bm-comp-input-size-choice-checkbox: var(--bm-sem-size-icon-sm, 1rem);--bm-comp-input-size-choice-radio: var(--bm-sem-size-icon-sm, 1rem);--bm-comp-input-size-choice-radio-inside: var( --bm-primitive-dimension-50, .5rem );--bm-comp-input-size-choice-switch-height: var( --bm-sem-size-icon-md, 1.25rem );--bm-comp-input-size-choice-switch-width: var( --bm-primitive-dimension-250, 2.5rem );--bm-comp-input-size-choice-switch-knob: var( --bm-primitive-dimension-87, .875rem );--bm-comp-input-radius-field: var(--bm-sem-radius-input-md, .25rem);--bm-comp-input-radius-choice-checkbox: var( --bm-sem-radius-input-sm, .125rem );--bm-comp-input-radius-choice-radio: var( --bm-sem-radius-input-lg, 624.938rem );--bm-comp-input-radius-choice-switch: var( --bm-sem-radius-input-lg, 624.938rem );--bm-comp-input-border-width-field-default: var( --bm-sem-border-width-input, .063rem );--bm-comp-input-border-width-field-error: var( --bm-sem-border-width-lg, .125rem );--bm-comp-input-border-width-choice: var( --bm-sem-border-width-input, .063rem );--bm-comp-input-shadow-field: var( --bm-sem-shadow-none, 0 0 0 0 rgb(0, 0, 0, 0) )}.bm-text-field{--bm-label-cursor: pointer;max-width:var(--bm-comp-input-size-field-width);--bm-label-space-bottom: var(--bm-comp-label-space-bottom);--bm-helper-text-space-top: var(--bm-comp-helper-text-space-top)}.bm-text-field--disabled{--bm-label-cursor: not-allowed;--bm-label-pointer-events: auto;--bm-text-field-cursor: not-allowed;--bm-text-field-input-cursor: not-allowed}.bm-text-field--sm .bm-text-field__field{--bm-input-field-height: var(--bm-comp-input-size-field-height-sm);--bm-input-field-padding-y: var(--bm-comp-input-space-field-y-sm);--bm-input-field-padding-x: var(--bm-comp-input-space-field-x-sm);--bm-input-field-font: var(--bm-comp-input-typo-sm);--bm-input-field-icon-size: var(--bm-comp-input-size-field-icon-sm)}.bm-text-field--md .bm-text-field__field{--bm-input-field-height: var(--bm-comp-input-size-field-height-md);--bm-input-field-padding-y: var(--bm-comp-input-space-field-y-md);--bm-input-field-padding-x: var(--bm-comp-input-space-field-x-md);--bm-input-field-font: var(--bm-comp-input-typo-md);--bm-input-field-icon-size: var(--bm-comp-input-size-field-icon-md)}.bm-text-field--lg .bm-text-field__field{--bm-input-field-height: var(--bm-comp-input-size-field-height-lg);--bm-input-field-padding-y: var(--bm-comp-input-space-field-y-lg);--bm-input-field-padding-x: var(--bm-comp-input-space-field-x-lg);--bm-input-field-font: var(--bm-comp-input-typo-lg);--bm-input-field-icon-size: var(--bm-comp-input-size-field-icon-lg)}.bm-text-field--error .bm-text-field__field{border-color:var(--bm-comp-input-color-border-error);background-color:var(--bm-comp-input-color-bg);outline-offset:calc(0px - var(--bm-comp-input-border-width-field-error));outline:var(--bm-comp-input-border-width-field-error) solid var(--bm-comp-input-color-border-error)}.bm-text-field--error .bm-text-field__field .bm-text-field__input{color:var(--bm-comp-input-color-text)}.bm-text-field--error .bm-text-field__field .bm-text-field__input::placeholder{color:var(--bm-comp-input-color-text-placeholder)}.bm-text-field--read-only .bm-text-field__field{border-color:var(--bm-comp-input-color-border-disabled);background-color:var(--bm-comp-input-color-bg-disabled)}.bm-text-field--read-only .bm-text-field__field .bm-text-field__input{color:var(--bm-comp-input-color-text)}.bm-text-field--read-only .bm-text-field__field .bm-text-field__input::placeholder{color:var(--bm-comp-input-color-text-placeholder)}.bm-text-field--read-only .bm-text-field__field .bm-text-field__content svg,.bm-text-field--read-only .bm-text-field__field .bm-text-field__content ::slotted([slot*=content]){color:var(--bm-comp-input-color-icon)}.bm-text-field--disabled .bm-text-field__field{border-color:var(--bm-comp-input-color-border-disabled);background-color:var(--bm-comp-input-color-bg-disabled)}.bm-text-field--disabled .bm-text-field__field .bm-text-field__input{color:var(--bm-comp-input-color-text-disabled)}.bm-text-field--disabled .bm-text-field__field .bm-text-field__input::placeholder{color:var(--bm-comp-input-color-text-disabled)}.bm-text-field--disabled .bm-text-field__field .bm-text-field__content{opacity:var(--bm-sem-opacity-disabled)}.bm-text-field--disabled .bm-text-field__field .bm-text-field__content svg,.bm-text-field--disabled .bm-text-field__field .bm-text-field__content ::slotted([slot*=content]){color:var(--bm-comp-input-color-text-disabled)}.bm-text-field--fluid{max-width:100%}.bm-text-field--ellipsis .bm-text-field__field .bm-text-field__input{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.bm-text-field__field{display:flex;flex-wrap:nowrap;align-items:center;box-sizing:border-box;transform:translate3d(var(--bm-sem-space-0),var(--bm-sem-space-0),var(--bm-sem-space-0));border-style:solid;border-color:var(--bm-comp-input-color-border);border-radius:var(--bm-comp-input-radius-field);border-width:var(--bm-comp-input-border-width-field-default);cursor:var(--bm-text-field-cursor, default);gap:var(--bm-comp-input-space-field-gap);box-shadow:var(--bm-comp-input-shadow-field);background-color:var(--bm-comp-input-color-bg);height:var(--bm-input-field-height);padding:var(--bm-input-field-padding-y) var(--bm-input-field-padding-x)}.bm-text-field__field:focus-within{outline-offset:calc(0px - var(--bm-sem-size-focus-offset));outline:var(--bm-sem-border-width-focus) solid var(--bm-sem-color-border-focus)}.bm-text-field__field .bm-text-field__input{border:none;outline:none;background:none;width:100%;padding:var(--bm-sem-space-0);color:var(--bm-comp-input-color-text);font:var(--bm-input-field-font);cursor:var(--bm-text-field-input-cursor, text)}.bm-text-field__field .bm-text-field__input:-webkit-autofill{caret-color:var(--bm-comp-input-color-text);-webkit-text-fill-color:var(--bm-comp-input-color-text);box-shadow:0 0 0 var(--bm-input-field-height) var(--bm-comp-input-color-bg) inset}.bm-text-field__field .bm-text-field__input::placeholder{color:var(--bm-comp-input-color-text-placeholder)}.bm-text-field__field .bm-text-field__content{display:flex;align-items:center}.bm-text-field__field .bm-text-field__content svg,.bm-text-field__field .bm-text-field__content ::slotted([slot*=content]){color:var(--bm-comp-input-color-icon);height:var(--bm-sem-size-icon-sm)}.bm-text-field__field .bm-text-field__content .bm-icon{width:var(--bm-input-field-icon-size);height:var(--bm-input-field-icon-size)}';
-var R = Object.defineProperty, W = Object.getOwnPropertyDescriptor, C = (e) => {
+const R = ':root,:host,.bm-light,.bm-dark .bm-inverse,.bm-dark.bm-inverse,[data-bm-theme~=bm-dark] .bm-inverse,[data-bm-theme~=bm-dark].bm-inverse,.bm-enterprise,.bm-consumer,[data-bm-theme~=bm-light]{--bm-comp-input-color-bg: var(--bm-sem-color-surface-01, #ffffff);--bm-comp-input-color-bg-disabled: var( --bm-sem-color-surface-highlight, rgba(159, 175, 188, .16) );--bm-comp-input-color-border: var(--bm-sem-color-border-strong, #8697a5);--bm-comp-input-color-border-error: var( --bm-sem-color-border-negative-strong, #cc2429 );--bm-comp-input-color-border-disabled: rgba(134, 151, 165, .4);--bm-comp-input-color-text: var(--bm-sem-color-text-primary, #141d24);--bm-comp-input-color-text-placeholder: var( --bm-sem-color-text-secondary, #576775 );--bm-comp-input-color-text-disabled: var( --bm-sem-color-text-disabled, rgba(87, 103, 117, .4) );--bm-comp-input-color-icon-disabled: var( --bm-sem-color-text-disabled, rgba(87, 103, 117, .4) );--bm-comp-input-color-icon: var(--bm-sem-color-icon-secondary, #576775);--bm-comp-input-color-icon-error: var( --bm-sem-color-icon-negative-strong, #cc2429 );--bm-comp-input-color-divider: var(--bm-sem-color-border-02, #d1dae0);--bm-comp-input-color-choice-checkbox-selected-bg: var( --bm-alias-color-brand-primary-default, #00768f );--bm-comp-input-color-choice-checkbox-selected-icon: var( --bm-sem-color-icon-primary-inverse, #ffffff );--bm-comp-input-color-choice-checkbox-selected-bg-error: var( --bm-sem-color-surface-negative-strong, #cc2429 );--bm-comp-input-color-choice-checkbox-selected-border: var( --bm-sem-color-none, #ffffff00 );--bm-comp-input-color-choice-switch-selected-bg: var( --bm-alias-color-brand-primary-default, #00768f );--bm-comp-input-color-choice-switch-selected-icon: var( --bm-sem-color-icon-primary-inverse, #ffffff );--bm-comp-input-color-choice-switch-selected-border: var( --bm-sem-color-none, #ffffff00 );--bm-comp-input-color-choice-radio-selected-bg: var( --bm-sem-color-surface-01, #ffffff );--bm-comp-input-color-choice-radio-selected-border: var( --bm-alias-color-brand-primary-default, #00768f );--bm-comp-input-color-choice-radio-selected-inner-circle: var( --bm-alias-color-brand-primary-default, #00768f );--bm-comp-input-color-choice-radio-selected-bg-error: var( --bm-sem-color-surface-01, #ffffff );--bm-comp-input-color-choice-radio-selected-border-error: var( --bm-sem-color-surface-negative-strong, #cc2429 );--bm-comp-input-color-choice-radio-selected-inner-circle-error: var( --bm-sem-color-surface-negative-strong, #cc2429 );--bm-comp-input-typo-sm: var( --bm-sem-typo-compact-body-sm, 400 .875rem/1rem "Source Sans Pro" );--bm-comp-input-typo-md: var( --bm-sem-typo-compact-body-md, 400 1rem/1.25rem "Source Sans Pro" );--bm-comp-input-typo-lg: var( --bm-sem-typo-compact-body-md, 400 1rem/1.25rem "Source Sans Pro" );--bm-comp-input-typo-character-count: var( --bm-sem-typo-body-sm, 400 .875rem/1.25rem "Source Sans Pro" );--bm-comp-input-typo-label-choice: var( --bm-sem-typo-body-md, 400 1rem/1.5rem "Source Sans Pro" );--bm-comp-input-space-field-x-sm: var(--bm-sem-space-75, .75rem);--bm-comp-input-space-field-x-md: var(--bm-sem-space-100, 1rem);--bm-comp-input-space-field-x-lg: var(--bm-sem-space-125, 1.25rem);--bm-comp-input-space-field-y-sm: var(--bm-sem-space-25, .25rem);--bm-comp-input-space-field-y-md: var(--bm-sem-space-50, .5rem);--bm-comp-input-space-field-y-lg: var(--bm-sem-space-75, .75rem);--bm-comp-input-space-field-gap: var(--bm-sem-space-50, .5rem);--bm-comp-input-space-choice-gap-inside: var(--bm-sem-space-50, .5rem);--bm-comp-input-space-choice-gap-items-y: var(--bm-sem-space-50, .5rem);--bm-comp-input-space-choice-gap-items-x: var(--bm-sem-space-100, 1rem);--bm-comp-input-space-choice-nudge: var( --bm-primitive-dimension-12, .125rem );--bm-comp-input-size-field-height-sm: var(--bm-sem-size-height-sm, 2rem);--bm-comp-input-size-field-height-md: var(--bm-sem-size-height-md, 2.5rem);--bm-comp-input-size-field-height-lg: var(--bm-sem-size-height-lg, 3rem);--bm-comp-input-size-field-width: var(--bm-primitive-dimension-1800, 18rem);--bm-comp-input-size-field-icon-sm: var(--bm-sem-size-icon-sm, 1rem);--bm-comp-input-size-field-icon-md: var(--bm-sem-size-icon-md, 1.25rem);--bm-comp-input-size-field-icon-lg: var(--bm-sem-size-icon-md, 1.25rem);--bm-comp-input-size-field-text-area-height: var( --bm-primitive-dimension-475, 4.75rem );--bm-comp-input-size-choice-checkbox: var(--bm-sem-size-icon-sm, 1rem);--bm-comp-input-size-choice-radio: var(--bm-sem-size-icon-sm, 1rem);--bm-comp-input-size-choice-radio-inside: var( --bm-primitive-dimension-50, .5rem );--bm-comp-input-size-choice-switch-height: var( --bm-sem-size-icon-md, 1.25rem );--bm-comp-input-size-choice-switch-width: var( --bm-primitive-dimension-250, 2.5rem );--bm-comp-input-size-choice-switch-knob: var( --bm-primitive-dimension-87, .875rem );--bm-comp-input-radius-field: var(--bm-sem-radius-input-md, .25rem);--bm-comp-input-radius-choice-checkbox: var( --bm-sem-radius-input-sm, .125rem );--bm-comp-input-radius-choice-radio: var( --bm-sem-radius-input-lg, 624.938rem );--bm-comp-input-radius-choice-switch: var( --bm-sem-radius-input-lg, 624.938rem );--bm-comp-input-border-width-field-default: var( --bm-sem-border-width-input, .063rem );--bm-comp-input-border-width-field-error: var( --bm-sem-border-width-lg, .125rem );--bm-comp-input-border-width-choice: var( --bm-sem-border-width-input, .063rem );--bm-comp-input-shadow-field: var( --bm-sem-shadow-none, 0 0 0 0 rgb(0, 0, 0, 0) )}:host,.bm-dark,.bm-light .bm-inverse,.bm-light.bm-inverse,[data-bm-theme~=bm-light] .bm-inverse,[data-bm-theme~=bm-light].bm-inverse,.bm-enterprise,.bm-consumer,[data-bm-theme~=bm-dark]{--bm-comp-input-color-bg: var(--bm-sem-color-surface-01, #202e39);--bm-comp-input-color-bg-disabled: var( --bm-sem-color-surface-highlight, rgba(134, 151, 165, .16) );--bm-comp-input-color-border: var(--bm-sem-color-border-strong, #9fafbc);--bm-comp-input-color-border-error: var( --bm-sem-color-border-negative-strong, #f67378 );--bm-comp-input-color-border-disabled: rgba(159, 175, 188, .4);--bm-comp-input-color-text: var(--bm-sem-color-text-primary, #ffffff);--bm-comp-input-color-text-placeholder: var( --bm-sem-color-text-secondary, #c3cdd5 );--bm-comp-input-color-text-disabled: var( --bm-sem-color-text-disabled, rgba(195, 205, 213, .4) );--bm-comp-input-color-icon-disabled: var( --bm-sem-color-text-disabled, rgba(195, 205, 213, .4) );--bm-comp-input-color-icon: var(--bm-sem-color-icon-secondary, #c3cdd5);--bm-comp-input-color-icon-error: var( --bm-sem-color-icon-negative-strong, #f67378 );--bm-comp-input-color-divider: var(--bm-sem-color-border-02, #465967);--bm-comp-input-color-choice-checkbox-selected-bg: var( --bm-alias-color-brand-primary-default, #43bfd6 );--bm-comp-input-color-choice-checkbox-selected-icon: var( --bm-sem-color-icon-primary-inverse, #141d24 );--bm-comp-input-color-choice-checkbox-selected-bg-error: var( --bm-sem-color-surface-negative-strong, #f67378 );--bm-comp-input-color-choice-checkbox-selected-border: var( --bm-sem-color-none, #ffffff00 );--bm-comp-input-color-choice-switch-selected-bg: var( --bm-alias-color-brand-primary-default, #43bfd6 );--bm-comp-input-color-choice-switch-selected-icon: var( --bm-sem-color-icon-primary-inverse, #141d24 );--bm-comp-input-color-choice-switch-selected-border: var( --bm-sem-color-none, #ffffff00 );--bm-comp-input-color-choice-radio-selected-bg: var( --bm-sem-color-surface-01, #202e39 );--bm-comp-input-color-choice-radio-selected-border: var( --bm-alias-color-brand-primary-default, #43bfd6 );--bm-comp-input-color-choice-radio-selected-inner-circle: var( --bm-alias-color-brand-primary-default, #43bfd6 );--bm-comp-input-color-choice-radio-selected-bg-error: var( --bm-sem-color-surface-01, #202e39 );--bm-comp-input-color-choice-radio-selected-border-error: var( --bm-sem-color-surface-negative-strong, #f67378 );--bm-comp-input-color-choice-radio-selected-inner-circle-error: var( --bm-sem-color-surface-negative-strong, #f67378 );--bm-comp-input-typo-sm: var( --bm-sem-typo-compact-body-sm, 400 .875rem/1rem "Source Sans Pro" );--bm-comp-input-typo-md: var( --bm-sem-typo-compact-body-md, 400 1rem/1.25rem "Source Sans Pro" );--bm-comp-input-typo-lg: var( --bm-sem-typo-compact-body-md, 400 1rem/1.25rem "Source Sans Pro" );--bm-comp-input-typo-character-count: var( --bm-sem-typo-body-sm, 400 .875rem/1.25rem "Source Sans Pro" );--bm-comp-input-typo-label-choice: var( --bm-sem-typo-body-md, 400 1rem/1.5rem "Source Sans Pro" );--bm-comp-input-space-field-x-sm: var(--bm-sem-space-75, .75rem);--bm-comp-input-space-field-x-md: var(--bm-sem-space-100, 1rem);--bm-comp-input-space-field-x-lg: var(--bm-sem-space-125, 1.25rem);--bm-comp-input-space-field-y-sm: var(--bm-sem-space-25, .25rem);--bm-comp-input-space-field-y-md: var(--bm-sem-space-50, .5rem);--bm-comp-input-space-field-y-lg: var(--bm-sem-space-75, .75rem);--bm-comp-input-space-field-gap: var(--bm-sem-space-50, .5rem);--bm-comp-input-space-choice-gap-inside: var(--bm-sem-space-50, .5rem);--bm-comp-input-space-choice-gap-items-y: var(--bm-sem-space-50, .5rem);--bm-comp-input-space-choice-gap-items-x: var(--bm-sem-space-100, 1rem);--bm-comp-input-space-choice-nudge: var( --bm-primitive-dimension-12, .125rem );--bm-comp-input-size-field-height-sm: var(--bm-sem-size-height-sm, 2rem);--bm-comp-input-size-field-height-md: var(--bm-sem-size-height-md, 2.5rem);--bm-comp-input-size-field-height-lg: var(--bm-sem-size-height-lg, 3rem);--bm-comp-input-size-field-width: var(--bm-primitive-dimension-1800, 18rem);--bm-comp-input-size-field-icon-sm: var(--bm-sem-size-icon-sm, 1rem);--bm-comp-input-size-field-icon-md: var(--bm-sem-size-icon-md, 1.25rem);--bm-comp-input-size-field-icon-lg: var(--bm-sem-size-icon-md, 1.25rem);--bm-comp-input-size-field-text-area-height: var( --bm-primitive-dimension-475, 4.75rem );--bm-comp-input-size-choice-checkbox: var(--bm-sem-size-icon-sm, 1rem);--bm-comp-input-size-choice-radio: var(--bm-sem-size-icon-sm, 1rem);--bm-comp-input-size-choice-radio-inside: var( --bm-primitive-dimension-50, .5rem );--bm-comp-input-size-choice-switch-height: var( --bm-sem-size-icon-md, 1.25rem );--bm-comp-input-size-choice-switch-width: var( --bm-primitive-dimension-250, 2.5rem );--bm-comp-input-size-choice-switch-knob: var( --bm-primitive-dimension-87, .875rem );--bm-comp-input-radius-field: var(--bm-sem-radius-input-md, .25rem);--bm-comp-input-radius-choice-checkbox: var( --bm-sem-radius-input-sm, .125rem );--bm-comp-input-radius-choice-radio: var( --bm-sem-radius-input-lg, 624.938rem );--bm-comp-input-radius-choice-switch: var( --bm-sem-radius-input-lg, 624.938rem );--bm-comp-input-border-width-field-default: var( --bm-sem-border-width-input, .063rem );--bm-comp-input-border-width-field-error: var( --bm-sem-border-width-lg, .125rem );--bm-comp-input-border-width-choice: var( --bm-sem-border-width-input, .063rem );--bm-comp-input-shadow-field: var( --bm-sem-shadow-none, 0 0 0 0 rgb(0, 0, 0, 0) )}.bm-text-field{--bm-label-cursor: pointer;max-width:var(--bm-comp-input-size-field-width);--bm-label-space-bottom: var(--bm-comp-label-space-bottom);--bm-helper-text-space-top: var(--bm-comp-helper-text-space-top)}.bm-text-field--disabled{--bm-label-cursor: not-allowed;--bm-label-pointer-events: auto;--bm-text-field-cursor: not-allowed;--bm-text-field-input-cursor: not-allowed}.bm-text-field--sm .bm-text-field__field{--bm-input-field-height: var(--bm-comp-input-size-field-height-sm);--bm-input-field-padding-y: var(--bm-comp-input-space-field-y-sm);--bm-input-field-padding-x: var(--bm-comp-input-space-field-x-sm);--bm-input-field-font: var(--bm-comp-input-typo-sm);--bm-input-field-icon-size: var(--bm-comp-input-size-field-icon-sm)}.bm-text-field--md .bm-text-field__field{--bm-input-field-height: var(--bm-comp-input-size-field-height-md);--bm-input-field-padding-y: var(--bm-comp-input-space-field-y-md);--bm-input-field-padding-x: var(--bm-comp-input-space-field-x-md);--bm-input-field-font: var(--bm-comp-input-typo-md);--bm-input-field-icon-size: var(--bm-comp-input-size-field-icon-md)}.bm-text-field--lg .bm-text-field__field{--bm-input-field-height: var(--bm-comp-input-size-field-height-lg);--bm-input-field-padding-y: var(--bm-comp-input-space-field-y-lg);--bm-input-field-padding-x: var(--bm-comp-input-space-field-x-lg);--bm-input-field-font: var(--bm-comp-input-typo-lg);--bm-input-field-icon-size: var(--bm-comp-input-size-field-icon-lg)}.bm-text-field--error .bm-text-field__field{border-color:var(--bm-comp-input-color-border-error);background-color:var(--bm-comp-input-color-bg);outline-offset:calc(0px - var(--bm-comp-input-border-width-field-error));outline:var(--bm-comp-input-border-width-field-error) solid var(--bm-comp-input-color-border-error)}.bm-text-field--error .bm-text-field__field .bm-text-field__input{color:var(--bm-comp-input-color-text)}.bm-text-field--error .bm-text-field__field .bm-text-field__input::placeholder{color:var(--bm-comp-input-color-text-placeholder)}.bm-text-field--read-only .bm-text-field__field{border-color:var(--bm-comp-input-color-border-disabled);background-color:var(--bm-comp-input-color-bg-disabled)}.bm-text-field--read-only .bm-text-field__field .bm-text-field__input{color:var(--bm-comp-input-color-text)}.bm-text-field--read-only .bm-text-field__field .bm-text-field__input::placeholder{color:var(--bm-comp-input-color-text-placeholder)}.bm-text-field--read-only .bm-text-field__field .bm-text-field__content svg,.bm-text-field--read-only .bm-text-field__field .bm-text-field__content ::slotted([slot*=content]){color:var(--bm-comp-input-color-icon)}.bm-text-field--disabled .bm-text-field__field{border-color:var(--bm-comp-input-color-border-disabled);background-color:var(--bm-comp-input-color-bg-disabled)}.bm-text-field--disabled .bm-text-field__field .bm-text-field__input{color:var(--bm-comp-input-color-text-disabled)}.bm-text-field--disabled .bm-text-field__field .bm-text-field__input::placeholder{color:var(--bm-comp-input-color-text-disabled)}.bm-text-field--disabled .bm-text-field__field .bm-text-field__content{opacity:var(--bm-sem-opacity-disabled)}.bm-text-field--disabled .bm-text-field__field .bm-text-field__content svg,.bm-text-field--disabled .bm-text-field__field .bm-text-field__content ::slotted([slot*=content]){color:var(--bm-comp-input-color-text-disabled)}.bm-text-field--fluid{max-width:100%}.bm-text-field--ellipsis .bm-text-field__field .bm-text-field__input{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.bm-text-field__field{display:flex;flex-wrap:nowrap;align-items:center;box-sizing:border-box;transform:translate3d(var(--bm-sem-space-0),var(--bm-sem-space-0),var(--bm-sem-space-0));border-style:solid;border-color:var(--bm-comp-input-color-border);border-radius:var(--bm-comp-input-radius-field);border-width:var(--bm-comp-input-border-width-field-default);cursor:var(--bm-text-field-cursor, default);gap:var(--bm-comp-input-space-field-gap);box-shadow:var(--bm-comp-input-shadow-field);background-color:var(--bm-comp-input-color-bg);height:var(--bm-input-field-height);padding:var(--bm-input-field-padding-y) var(--bm-input-field-padding-x)}.bm-text-field__field:focus-within{outline-offset:calc(0px - var(--bm-sem-size-focus-offset));outline:var(--bm-sem-border-width-focus) solid var(--bm-sem-color-border-focus)}.bm-text-field__field .bm-text-field__input{border:none;outline:none;background:none;width:100%;padding:var(--bm-sem-space-0);color:var(--bm-comp-input-color-text);font:var(--bm-input-field-font);cursor:var(--bm-text-field-input-cursor, text)}.bm-text-field__field .bm-text-field__input:-webkit-autofill{caret-color:var(--bm-comp-input-color-text);-webkit-text-fill-color:var(--bm-comp-input-color-text);box-shadow:0 0 0 var(--bm-input-field-height) var(--bm-comp-input-color-bg) inset}.bm-text-field__field .bm-text-field__input::placeholder{color:var(--bm-comp-input-color-text-placeholder)}.bm-text-field__field .bm-text-field__content{display:flex;align-items:center}.bm-text-field__field .bm-text-field__content svg,.bm-text-field__field .bm-text-field__content ::slotted([slot*=content]){color:var(--bm-comp-input-color-icon);height:var(--bm-sem-size-icon-sm)}.bm-text-field__field .bm-text-field__content .bm-icon{width:var(--bm-input-field-icon-size);height:var(--bm-input-field-icon-size)}';
+var W = Object.defineProperty, D = Object.getOwnPropertyDescriptor, k = (e) => {
   throw TypeError(e);
-}, t = (e, i, r, a) => {
-  for (var m = a > 1 ? void 0 : a ? W(i, r) : i, l = e.length - 1, b; l >= 0; l--)
-    (b = e[l]) && (m = (a ? b(i, r, m) : b(m)) || m);
-  return a && m && R(i, r, m), m;
-}, D = (e, i, r) => i.has(e) || C("Cannot " + r), s = (e, i, r) => (D(e, i, "read from private field"), r ? r.call(e) : i.get(e)), u = (e, i, r) => i.has(e) ? C("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(e) : i.set(e, r), d, h, v, x;
-const { baseClassNamePrefix: H, subElementClassPrefix: y, classModifierPrefix: p } = P("text-field");
-let o = class extends A {
+}, t = (e, o, r, a) => {
+  for (var m = a > 1 ? void 0 : a ? D(o, r) : o, l = e.length - 1, d; l >= 0; l--)
+    (d = e[l]) && (m = (a ? d(o, r, m) : d(m)) || m);
+  return a && m && W(o, r, m), m;
+}, H = (e, o, r) => o.has(e) || k("Cannot " + r), s = (e, o, r) => (H(e, o, "read from private field"), r ? r.call(e) : o.get(e)), u = (e, o, r) => o.has(e) ? k("Cannot add the same private member more than once") : o instanceof WeakSet ? o.add(e) : o.set(e, r), p, h, v, x;
+const { baseClassNamePrefix: N, subElementClassPrefix: y, classModifierPrefix: b } = O("text-field");
+let i = class extends L {
   constructor() {
-    super(...arguments), this.required = !1, this.hideRequiredMarker = !1, this.readOnly = !1, this.disabled = !1, this.fluid = !1, this.size = z, this.ellipse = !1, this.type = "text", this.inputMode = "text", this._hasContentBeforeSlot = !1, this._hasContentAfterSlot = !1, u(this, d, () => {
+    super(...arguments), this.required = !1, this.hideRequiredMarker = !1, this.readOnly = !1, this.disabled = !1, this.fluid = !1, this.size = z, this.ellipse = !1, this.type = "text", this.inputMode = "text", this.autofocus = !1, this.spellcheck = !0, this._hasContentBeforeSlot = !1, this._hasContentAfterSlot = !1, u(this, p, () => {
       var e;
       return !!(this.disabled || (e = this.formContext) != null && e.disabled);
     }), u(this, h, () => {
@@ -31,40 +31,42 @@ let o = class extends A {
       var e;
       return !!(this.required || (e = this.formContext) != null && e.required);
     }), u(this, x, (e) => {
-      const i = e === "before" ? "_hasContentBeforeSlot" : "_hasContentAfterSlot", a = g`<slot
+      const o = e === "before" ? "_hasContentBeforeSlot" : "_hasContentAfterSlot", a = g`<slot
       name="content-${e}"
       @slotchange="${({ target: m }) => {
-        this[i] = T(m);
+        this[o] = A(m);
       }}"
     ></slot>`;
-      return this[i] ? g`<div class="${y}content">${a}</div>` : a;
+      return this[o] ? g`<div class="${y}content">${a}</div>` : a;
     });
   }
   updated(e) {
-    const [i] = this._textFieldLabel, [r] = this._textFieldHelperText, { decorate: a } = _(i), { decorate: m } = _(r), l = f(e, ["value"]), b = f(e, ["validationRules"]), k = f(e, ["formContext", "disabled"]), B = f(e, [
+    super.updated(e);
+    const [o] = this._textFieldLabel, [r] = this._textFieldHelperText, { decorate: a } = _(o), { decorate: m } = _(r), l = f(e, ["value"]), d = f(e, ["validationRules"]), C = f(e, ["formContext", "disabled"]), B = f(e, [
       "formContext",
       "required",
       "hideRequiredMarker"
-    ]), E = f(e, ["formContext"]) && this.contextInitialsChanged();
-    (l || E) && this.setContextValue(), k && (a({ disabled: s(this, d).call(this) }), m({ disabled: s(this, d).call(this) })), b && this.setContextValidation(), B && a({ required: s(this, v).call(this) && !this.hideRequiredMarker });
+    ]), F = f(e, ["formContext"]) && this.contextInitialsChanged();
+    (l || F) && this.setContextValue(), C && (a({ disabled: s(this, p).call(this) }), m({ disabled: s(this, p).call(this) })), d && this.setContextValidation(), B && a({ required: s(this, v).call(this) && !this.hideRequiredMarker });
   }
   render() {
-    const { ariaInvalid: e } = this, { length: i } = this.validationErrors(), r = typeof this.error == "string" || !!i, a = this.helperTextId, m = this.error || this.validationErrorShown() ? w(
-      this.error && this.errorId,
+    const { ariaInvalid: e } = this, { length: o } = this.validationErrors(), { invalid: r, errorMessage: a } = this.resolveError(), m = r || !!o, l = w(
+      this.helperTextId,
+      !!a && this.errorId,
       this.validationErrorShown() && this.validationErrorsId
-    ) : void 0, l = w(
-      H,
-      r && `${p}error`,
-      this.theme && O(this.theme),
-      `${p}${this.size || z}`,
-      this.fluid && `${p}fluid`,
-      this.ellipse && `${p}ellipsis`,
-      s(this, d).call(this) && `${p}disabled`,
-      s(this, h).call(this) && `${p}read-only`
+    ), d = w(
+      N,
+      m && `${b}error`,
+      this.theme && P(this.theme),
+      `${b}${this.size || z}`,
+      this.fluid && `${b}fluid`,
+      this.ellipse && `${b}ellipsis`,
+      s(this, p).call(this) && `${b}disabled`,
+      s(this, h).call(this) && `${b}read-only`
     );
     return g`
       <div
-        class="${l}"
+        class="${d}"
         style="${this.width ? `max-width: ${this.width}` : n}"
       >
         <slot name="label" id="${this.labelId}"></slot>
@@ -76,89 +78,93 @@ let o = class extends A {
             type="${this.type}"
             ${M(this.formFieldRef)}
             inputmode="${this.inputMode}"
+            ?autofocus="${this.autofocus}"
+            spellcheck="${this.spellcheck}"
             ?required="${s(this, v).call(this)}"
             ?readonly="${s(this, h).call(this)}"
-            ?disabled="${s(this, d).call(this)}"
+            ?disabled="${s(this, p).call(this)}"
             placeholder="${this.placeholder ?? n}"
             aria-labelledby="${this.labelId}"
             aria-label="${this.inputAriaLabel ?? n}"
             @blur="${this.validateFieldOnBlur}"
             @keydown="${this.submitFormByEnter}"
-            aria-describedby="${a ?? n}"
-            aria-errormessage="${m ?? n}"
+            aria-describedby="${l ?? n}"
             class="${y}input"
             @input="${this.validateFieldOnChange}"
-            aria-invalid="${e || r}"
+            aria-invalid="${m || e || n}"
           />
           ${s(this, x).call(this, "after")}
         </div>
         <slot name="helper-text" id="${this.helperTextId}"></slot>
-        ${this.renderError(this.error, s(this, d).call(this))}
+        ${this.renderError(a, s(this, p).call(this))}
         ${this.renderValidationErrors()}
       </div>
     `;
   }
 };
-d = /* @__PURE__ */ new WeakMap();
+p = /* @__PURE__ */ new WeakMap();
 h = /* @__PURE__ */ new WeakMap();
 v = /* @__PURE__ */ new WeakMap();
 x = /* @__PURE__ */ new WeakMap();
-I(o);
-o.styles = F(L);
+I(i);
+i.styles = q(R);
 t([
   c({ type: String })
-], o.prototype, "placeholder", 2);
+], i.prototype, "placeholder", 2);
 t([
   c({ type: Boolean })
-], o.prototype, "required", 2);
+], i.prototype, "required", 2);
 t([
   c({ type: Boolean })
-], o.prototype, "hideRequiredMarker", 2);
-t([
-  c({ type: String })
-], o.prototype, "error", 2);
+], i.prototype, "hideRequiredMarker", 2);
 t([
   c({ type: Boolean })
-], o.prototype, "readOnly", 2);
+], i.prototype, "readOnly", 2);
 t([
   c({ type: Boolean })
-], o.prototype, "disabled", 2);
+], i.prototype, "disabled", 2);
 t([
   c({ type: Boolean })
-], o.prototype, "fluid", 2);
+], i.prototype, "fluid", 2);
 t([
   c({ type: String })
-], o.prototype, "size", 2);
+], i.prototype, "size", 2);
 t([
   c({ type: String })
-], o.prototype, "width", 2);
+], i.prototype, "width", 2);
 t([
   c({ type: Boolean })
-], o.prototype, "ellipse", 2);
+], i.prototype, "ellipse", 2);
 t([
   c({ type: String })
-], o.prototype, "theme", 2);
+], i.prototype, "theme", 2);
 t([
   c({ type: String })
-], o.prototype, "type", 2);
+], i.prototype, "type", 2);
 t([
   c({ type: String })
-], o.prototype, "inputMode", 2);
+], i.prototype, "inputMode", 2);
+t([
+  c({ type: Boolean })
+], i.prototype, "autofocus", 2);
+t([
+  c({ type: Boolean, converter: T })
+], i.prototype, "spellcheck", 2);
 t([
   S({ slot: "label" })
-], o.prototype, "_textFieldLabel", 2);
+], i.prototype, "_textFieldLabel", 2);
 t([
   S({ slot: "helper-text" })
-], o.prototype, "_textFieldHelperText", 2);
+], i.prototype, "_textFieldHelperText", 2);
 t([
   $()
-], o.prototype, "_hasContentBeforeSlot", 2);
+], i.prototype, "_hasContentBeforeSlot", 2);
 t([
   $()
-], o.prototype, "_hasContentAfterSlot", 2);
-o = t([
-  q("bm-text-field")
-], o);
+], i.prototype, "_hasContentAfterSlot", 2);
+i = t([
+  E("bm-text-field")
+], i);
 export {
-  o as BmTextField
+  i as BmTextField
 };

package/local/wip/Form/Form.decorator.js

@@ -1,66 +1,89 @@
-var V = (r) => {
-  throw TypeError(r);
+var C = (e) => {
+  throw TypeError(e);
 };
-var y = (r, a, t) => a.has(r) || V("Cannot " + t);
-var f = (r, a, t) => (y(r, a, "read from private field"), t ? t.call(r) : a.get(r)), b = (r, a, t) => a.has(r) ? V("Cannot add the same private member more than once") : a instanceof WeakSet ? a.add(r) : a.set(r, t), m = (r, a, t, e) => (y(r, a, "write to private field"), e ? e.call(r, t) : a.set(r, t), t);
-import { c as E } from "../../chunks/consume.Ce9k1-wN.js";
-import { a as k, E as v, x } from "../../chunks/lit-element.CJtt9wj5.js";
-import { n as d } from "../../chunks/register-custom-element.AOEv8hcs.js";
+var E = (e, s, t) => s.has(e) || C("Cannot " + t);
+var h = (e, s, t) => (E(e, s, "read from private field"), t ? t.call(e) : s.get(e)), y = (e, s, t) => s.has(e) ? C("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(e) : s.set(e, t), f = (e, s, t, i) => (E(e, s, "write to private field"), i ? i.call(e, t) : s.set(e, t), t);
+import { c as k } from "../../chunks/consume.Ce9k1-wN.js";
+import { a as F, E as V, x as g } from "../../chunks/lit-element.CJtt9wj5.js";
+import { n as u } from "../../chunks/register-custom-element.AOEv8hcs.js";
 import { r as A } from "../../chunks/state.Dr3yBpId.js";
-import { e as F } from "../../chunks/ref.B7e1Hu4F.js";
-import { b as I } from "../../chunks/tokens.CTW8Tt94.js";
-import { bmFormInitials as u, bmFormContext as S } from "./Form.context.js";
-import { createId as p } from "./Form.utils.js";
+import { e as I } from "../../chunks/ref.B7e1Hu4F.js";
+import { b as S } from "../../chunks/tokens.CTW8Tt94.js";
+import { bmFormInitials as p, bmFormContext as w } from "./Form.context.js";
+import { createId as b } from "./Form.utils.js";
 import "../../chunks/index.BoeGm2HZ.js";
-var R = Object.defineProperty, l = (r, a, t, e) => {
-  for (var i = void 0, s = r.length - 1, c; s >= 0; s--)
-    (c = r[s]) && (i = c(a, t, i) || i);
-  return i && R(a, t, i), i;
-}, n, h;
-const C = class C extends k {
+var R = Object.defineProperty, l = (e, s, t, i) => {
+  for (var r = void 0, a = e.length - 1, n; a >= 0; a--)
+    (n = e[a]) && (r = n(s, t, r) || r);
+  return r && R(s, t, r), r;
+}, d, c, m;
+const x = class x extends F {
   constructor() {
     super(...arguments);
-    b(this, n);
-    b(this, h);
-    this.labelId = p(), this.errorId = p(), this.helperTextId = p(), this.validationErrorsId = p(), this.internals = this.attachInternals(), this.formFieldRef = F(), this.id = "", this.name = "", this.value = "", this.validationRules = [], this._validationErrors = [], this.validationErrors = () => this._validationErrors, m(this, n, !1), this.setValidationErrors = (t) => {
-      this._validationErrors = t;
-    }, this.validationErrorShown = () => this.validationErrors().some((t) => !!(t != null && t.length)), m(this, h, /* @__PURE__ */ new WeakMap()), this.submitFormByEnter = ({ key: t }) => {
+    y(this, d);
+    // Captured once, on first form association. Native reset restores this
+    // value; bm-form's initialValues seed is a separate concern, handled in
+    // formResetCallback below.
+    y(this, c);
+    y(this, m);
+    this.labelId = b(), this.errorId = b(), this.helperTextId = b(), this.validationErrorsId = b(), this.internals = this.attachInternals(), this.formFieldRef = I(), this.id = "", this.name = "", this.value = "", this.validationRules = [], this._validationErrors = [], this.validationErrors = () => this._validationErrors, this.resolveError = () => ({
+      invalid: !!this.error,
+      errorMessage: typeof this.error == "string" && this.error.length ? this.error : void 0
+    }), f(this, d, !1), this.setValidationErrors = (t) => {
+      this._validationErrors = t, this.syncValidity();
+    }, this.validationErrorShown = () => this.validationErrors().some((t) => !!(t != null && t.length)), f(this, m, /* @__PURE__ */ new WeakMap()), this.submitFormByEnter = ({ key: t }) => {
       t === "Enter" && this.requestAssociatedSubmit();
     }, this.forwardLabelFocus = () => {
       const { value: t } = this.formFieldRef;
       t.focus();
     }, this.validateFieldOnBlur = (t) => {
-      const { formBlurHandler: e } = this.formContext || u;
-      e(t);
+      const { formBlurHandler: i } = this.formContext || p;
+      i(t);
     }, this.validateFieldOnChange = (t) => {
-      const { value: e } = t.target, { formChangeHandler: i } = this.formContext || u;
-      i(t), this.setAssociatedValue(e);
+      const { value: i } = t.target, { formChangeHandler: r } = this.formContext || p;
+      r(t), this.setAssociatedValue(i), this.syncValidity();
+    }, this.syncValidity = () => {
+      const { value: t } = this.formFieldRef;
+      if (!t) return;
+      const i = t, { validity: r, validationMessage: a } = i;
+      if (!r.valid) {
+        this.internals.setValidity(r, a, i);
+        return;
+      }
+      const n = this.validationErrors().find(
+        (v) => !!v
+      );
+      if (n) {
+        this.internals.setValidity({ customError: !0 }, n, i);
+        return;
+      }
+      this.internals.setValidity({});
     }, this.getContextValue = () => {
-      const { initialValues: t } = this.formContext || u;
+      const { initialValues: t } = this.formContext || p;
       return (t == null ? void 0 : t[this.name]) || this.value;
     }, this.setContextValue = () => {
-      const { value: t } = this.formFieldRef, { ctxValue: e, finalizeCallback: i = () => {
-      } } = this.finalizeAssociatedCallback(this.getContextValue()), s = t;
-      s.value !== e && (s.value = e), this.setAssociatedValue(e), i();
+      const { value: t } = this.formFieldRef, { ctxValue: i, finalizeCallback: r = () => {
+      } } = this.finalizeAssociatedCallback(this.getContextValue()), a = t;
+      a.value !== i && (a.value = i, r()), this.setAssociatedValue(i), this.syncValidity();
     }, this.setContextValidation = () => {
-      const { value: t } = this.formFieldRef, { registerField: e } = this.formContext || u;
-      e({
+      const { value: t } = this.formFieldRef, { registerField: i } = this.formContext || p;
+      i({
         field: t,
         validators: this.validationRules,
         initializer: this.setContextValue,
         errorSetter: this.setValidationErrors
       });
     }, this.contextInitialsChanged = () => {
-      const { initialValues: t } = this.formContext || u, e = t == null ? void 0 : t[this.name], i = e !== this.contextInitialValue;
-      return i && (this.contextInitialValue = e), i;
-    }, this.renderError = (t, e) => t ? x`
+      const { initialValues: t } = this.formContext || p, i = t == null ? void 0 : t[this.name], r = i !== this.contextInitialValue;
+      return r && (this.contextInitialValue = i), r;
+    }, this.renderError = (t, i) => t ? g`
           <bm-helper-text
             text="${t}"
             id="${this.errorId}"
             appearance="negative"
-            .disabled="${e}"
+            .disabled="${i}"
           ></bm-helper-text>
-        ` : v, this.renderValidationErrors = () => this.validationErrorShown() ? x`
+        ` : V, this.renderValidationErrors = () => this.validationErrorShown() ? g`
           <div
             role="log"
             aria-live="polite"
@@ -69,78 +92,111 @@ const C = class C extends k {
             id="${this.validationErrorsId}"
           >
             ${this.validationErrors().map(
-      (t) => t ? x`
+      (t) => t ? g`
                     <bm-helper-text
                       text="${t}"
                       appearance="negative"
-                      style="display: block; margin-top: ${I};"
+                      style="display: block; margin-top: ${S};"
                     ></bm-helper-text>
-                  ` : v
+                  ` : V
     )}
           </div>
-        ` : v;
+        ` : V;
   }
   setAssociatedValue(t) {
     if (typeof t == "string") {
-      if (this.value === t && f(this, n)) return;
+      if (this.value === t && h(this, d)) return;
       this.value = t;
     }
-    let e = null;
+    let i = null;
     if (typeof t == "boolean")
-      e = t ? "on" : null;
+      i = t ? "on" : null;
     else if (typeof t == "number")
-      e = t.toString();
+      i = t.toString();
     else if (Array.isArray(t)) {
-      const i = new FormData();
-      t.forEach((s) => i.append(this.name, s.toString())), e = i;
+      const r = new FormData();
+      t.forEach((a) => r.append(this.name, a.toString())), i = r;
     } else
-      e = t;
-    m(this, n, !0), this.internals.form && this.internals.setFormValue(e);
+      i = t;
+    f(this, d, !0), this.internals.form && this.internals.setFormValue(i);
   }
   requestAssociatedSubmit() {
     this.internals.form && this.internals.form.requestSubmit();
   }
+  // ElementInternals holds the real validity state, but nothing exposes it
+  // on the element unless we delegate it. Without this, field.checkValidity()
+  // and field.validity.valueMissing throw, even though :invalid CSS and
+  // native form submission already work.
+  get validity() {
+    return this.internals.validity;
+  }
+  get validationMessage() {
+    return this.internals.validationMessage;
+  }
+  get willValidate() {
+    return this.internals.willValidate;
+  }
+  checkValidity() {
+    return this.internals.checkValidity();
+  }
+  reportValidity() {
+    return this.internals.reportValidity();
+  }
   connectedCallback() {
     super.connectedCallback(), this.addEventListener("bm-label-click", this.forwardLabelFocus);
   }
-  ctxValueChanged(t, e) {
-    const { value: i } = e, s = f(this, h).get(i), { initialValues: { [this.name]: c } = {} } = t, g = c !== s;
-    return g && f(this, h).set(i, c), g;
+  ctxValueChanged(t, i) {
+    const { value: r } = i, a = h(this, m).get(r), { initialValues: { [this.name]: n } = {} } = t, v = n !== a;
+    return v && h(this, m).set(r, n), v;
   }
   disconnectedCallback() {
     super.disconnectedCallback(), this.removeEventListener("bm-label-click", this.forwardLabelFocus);
   }
   formAssociatedCallback() {
-    m(this, n, !1), this.setAssociatedValue(this.value);
+    f(this, d, !1), h(this, c) === void 0 && f(this, c, this.value), this.setAssociatedValue(this.value), this.syncValidity();
   }
   formResetCallback() {
-    this.setContextValue();
+    !this.formContext && h(this, c) !== void 0 && (this.value = h(this, c)), this.setContextValue();
   }
   finalizeAssociatedCallback(t) {
     return { ctxValue: t, finalizeCallback: () => {
     } };
   }
+  // Any reactive prop can change what's valid (required, minLength,
+  // maxLength), not just a keystroke. Owning this here, not in each
+  // subclass's updated(), means every FormField subclass that opts in
+  // gets it as long as it calls super.updated(cP) — see TextField.ts/TextArea.ts.
+  updated(t) {
+    super.updated(t), this.syncValidity();
+  }
 };
-n = new WeakMap(), h = new WeakMap(), C.formAssociated = !0;
-let o = C;
+d = new WeakMap(), c = new WeakMap(), m = new WeakMap(), x.formAssociated = !0;
+let o = x;
 l([
-  d({ type: String })
+  u({ type: String })
 ], o.prototype, "id");
 l([
-  d({ type: String, reflect: !0 })
+  u({ type: String, reflect: !0 })
 ], o.prototype, "name");
 l([
-  d({ type: String })
+  u({ type: String })
 ], o.prototype, "value");
 l([
-  d({ type: Array })
+  u({ type: Array })
 ], o.prototype, "validationRules");
 l([
-  d({ type: String, attribute: "input-aria-label" })
+  u({ type: String, attribute: "input-aria-label" })
 ], o.prototype, "inputAriaLabel");
 l([
-  E({ context: S, subscribe: !0 }),
-  d({ attribute: !1 })
+  u({
+    converter: {
+      fromAttribute: (e) => e === null ? void 0 : e === "" ? !0 : e
+    }
+  })
+], o.prototype, "error");
+l([
+  k({ context: w, subscribe: !0 }),
+  u({ attribute: !1 })
 ], o.prototype, "formContext");
 l([
   A()