@viasat/beam-web-components 2.0.0

package/local/wip/TextArea/TextArea.js

@@ -0,0 +1,192 @@
+import { r as R, x as _, E as D } from "../../chunks/lit-element.CJtt9wj5.js";
+import { n as m, c as L } from "../../chunks/register-custom-element.vod7zfGv.js";
+import { o as k } from "../../chunks/query-assigned-elements.Drkgpk9q.js";
+import { e as W, n as N } from "../../chunks/ref.B7e1Hu4F.js";
+import { p as d, a as I, c as C, g as V } from "../../chunks/classNames.C6fNrXWF.js";
+import { t as G } from "../../chunks/constants.jOWREYQE.js";
+import { r as B } from "../../chunks/delegate.baxDQosr.js";
+import { FormField as H } from "../Form/Form.decorator.js";
+const j = /* @__PURE__ */ new WeakMap();
+async function Z(e) {
+  const r = e.offsetHeight, t = e.clientHeight, s = r - t;
+  e.style.overflow = "hidden", e.scrollHeight === t && (e.style.height = "0");
+  const c = e.scrollHeight;
+  e.style.height = `${c + s}px`;
+}
+const A = (e, r) => {
+  const t = j.get(e);
+  if (j.set(e, r), !r) {
+    t && (e.style.height = "unset", e.style.overflow = "visible");
+    return;
+  }
+  Z(e);
+}, O = ':root,:host,.bm-light,.bm-dark .bm-inverse,[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-utility-color-accent-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-utility-color-accent-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-utility-color-accent-default, #00768f );--bm-comp-input-color-choice-radio-selected-inner-circle: var( --bm-utility-color-accent-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-default: 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: var(--bm-sem-space-100, 1rem);--bm-comp-input-space-field-y: var(--bm-sem-space-50, .5rem);--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-md-height: var(--bm-sem-size-height-md, 2.5rem);--bm-comp-input-size-field-width: var(--bm-primitive-dimension-1800, 18rem);--bm-comp-input-size-field-icon: 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,[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-utility-color-accent-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-utility-color-accent-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-utility-color-accent-default, #43bfd6 );--bm-comp-input-color-choice-radio-selected-inner-circle: var( --bm-utility-color-accent-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-default: 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: var(--bm-sem-space-100, 1rem);--bm-comp-input-space-field-y: var(--bm-sem-space-50, .5rem);--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-md-height: var(--bm-sem-size-height-md, 2.5rem);--bm-comp-input-size-field-width: var(--bm-primitive-dimension-1800, 18rem);--bm-comp-input-size-field-icon: 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-area{--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-area--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-area--error .bm-text-area__header .bm-text-area__counter{color:var(--bm-comp-input-color-text-placeholder)}.bm-text-area--error .bm-text-area__field .bm-text-area__input{color:var(--bm-comp-input-color-text);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-area--error .bm-text-area__field .bm-text-area__input::placeholder{color:var(--bm-comp-input-color-text-placeholder)}.bm-text-area--read-only .bm-text-area__header .bm-text-area__counter{color:var(--bm-comp-input-color-text-placeholder)}.bm-text-area--read-only .bm-text-area__field .bm-text-area__input{color:var(--bm-comp-input-color-text);border-color:var(--bm-comp-input-color-border-disabled);background-color:var(--bm-comp-input-color-bg-disabled)}.bm-text-area--read-only .bm-text-area__field .bm-text-area__input::placeholder{color:var(--bm-comp-input-color-text-placeholder)}.bm-text-area--disabled .bm-text-area__header .bm-text-area__counter{color:var(--bm-comp-input-color-text-disabled)}.bm-text-area--disabled .bm-text-area__field .bm-text-area__input{color:var(--bm-comp-input-color-text-disabled);border-color:var(--bm-comp-input-color-border-disabled);background-color:var(--bm-comp-input-color-bg-disabled)}.bm-text-area--disabled .bm-text-area__field .bm-text-area__input::placeholder{color:var(--bm-comp-input-color-text-disabled)}.bm-text-area--fluid{max-width:100%}@-moz-document url-prefix(){.bm-text-area__field:after{display:none}}.bm-text-area--hide-resize .bm-text-area__field:after{display:none}.bm-text-area--hide-resize .bm-text-area__field .bm-text-area__input{resize:none}.bm-text-area--cols-width{max-width:fit-content}.bm-text-area--cols-width .bm-text-area__field .bm-text-area__input{width:auto}.bm-text-area__header{display:flex;gap:var(--bm-sem-space-50)}.bm-text-area__header .bm-text-area__counter{margin-block-end:auto;margin-inline-start:auto;font:var(--bm-comp-input-typo-character-count);color:var(--bm-comp-input-color-text-placeholder);padding-block-end:var(--bm-comp-label-space-bottom)}.bm-text-area__field{position:relative;cursor:var(--bm-text-field-cursor, default)}.bm-text-area__field:dir(rtl){--bm-resize-icon-flip: -1}.bm-text-area__field:after{content:"";position:absolute;pointer-events:none;width:var(--bm-sem-space-125);height:var(--bm-sem-space-125);-webkit-mask-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIiBmaWxsPSJub25lIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzY0NjIyXzQ4MzUzKSI+CjxwYXRoIGQ9Ik0xOC4zMzMzIDE4LjMzMzNIMTYuNjY2N1YxNi42NjY3SDE4LjMzMzNWMTguMzMzM1pNMTguMzMzMyAxNUgxNi42NjY3VjEzLjMzMzNIMTguMzMzM1YxNVpNMTUgMTguMzMzM0gxMy4zMzMzVjE2LjY2NjdIMTVWMTguMzMzM1pNMTUgMTVIMTMuMzMzM1YxMy4zMzMzSDE1VjE1Wk0xMS42NjY3IDE4LjMzMzNIMTBWMTYuNjY2N0gxMS42NjY3VjE4LjMzMzNaTTE4LjMzMzMgMTEuNjY2N0gxNi42NjY3VjEwSDE4LjMzMzNWMTEuNjY2N3oiIGZpbGw9IiM0NjU5NjciLz4KPC9nPgo8ZGVmcz4KPGNsaXBQYXRoIGlkPSJjbGlwMF82NDYyMl80ODM1MyI+CjxyZWN0IHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0id2hpdGUiLz4KPC9jbGlwUGF0aD4KPC9kZWZzPgo8L3N2Zz4=);-webkit-mask-size:cover;-webkit-mask-position:center;-webkit-mask-repeat:no-repeat;mask-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIiBmaWxsPSJub25lIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzY0NjIyXzQ4MzUzKSI+CjxwYXRoIGQ9Ik0xOC4zMzMzIDE4LjMzMzNIMTYuNjY2N1YxNi42NjY3SDE4LjMzMzNWMTguMzMzM1pNMTguMzMzMyAxNUgxNi42NjY3VjEzLjMzMzNIMTguMzMzM1YxNVpNMTUgMTguMzMzM0gxMy4zMzMzVjE2LjY2NjdIMTVWMTguMzMzM1pNMTUgMTVIMTMuMzMzM1YxMy4zMzMzSDE1VjE1Wk0xMS42NjY3IDE4LjMzMzNIMTBWMTYuNjY2N0gxMS42NjY3VjE4LjMzMzNaTTE4LjMzMzMgMTEuNjY2N0gxNi42NjY3VjEwSDE4LjMzMzNWMTEuNjY2N3oiIGZpbGw9IiM0NjU5NjciLz4KPC9nPgo8ZGVmcz4KPGNsaXBQYXRoIGlkPSJjbGlwMF82NDYyMl80ODM1MyI+CjxyZWN0IHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0id2hpdGUiLz4KPC9jbGlwUGF0aD4KPC9kZWZzPgo8L3N2Zz4=);mask-size:cover;mask-position:center;mask-repeat:no-repeat;inset-block-end:var(--bm-sem-space-12);inset-inline-end:var(--bm-sem-space-12);transform:scaleX(var(--bm-resize-icon-flip, 1));background-color:var(--bm-sem-color-icon-secondary)}.bm-text-area__field .bm-text-area__input{width:100%;display:block;resize:vertical;box-sizing:border-box;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);color:var(--bm-comp-input-color-text);font:var(--bm-comp-input-typo-default);cursor:var(--bm-text-field-input-cursor, text);box-shadow:var(--bm-comp-input-shadow-field);background-color:var(--bm-comp-input-color-bg);min-height:var(--bm-comp-input-size-field-text-area-height);padding:var(--bm-comp-input-space-field-y) var(--bm-comp-input-space-field-x);transform:translate3d(var(--bm-sem-space-0),var(--bm-sem-space-0),var(--bm-sem-space-0))}.bm-text-area__field .bm-text-area__input::-webkit-resizer{display:none}.bm-text-area__field .bm-text-area__input::placeholder{color:var(--bm-comp-input-color-text-placeholder)}.bm-text-area__field .bm-text-area__input:focus{outline-offset:calc(0px - var(--bm-sem-size-focus-offset));outline:var(--bm-sem-border-width-focus) solid var(--bm-sem-color-border-focus)}';
+var U = Object.defineProperty, X = Object.getOwnPropertyDescriptor, S = (e) => {
+  throw TypeError(e);
+}, a = (e, r, t, s) => {
+  for (var c = s > 1 ? void 0 : s ? X(r, t) : r, b = e.length - 1, u; b >= 0; b--)
+    (u = e[b]) && (c = (s ? u(r, t, c) : u(c)) || c);
+  return s && c && U(r, t, c), c;
+}, q = (e, r, t) => r.has(e) || S("Cannot " + t), o = (e, r, t) => (q(e, r, "read from private field"), t ? t.call(e) : r.get(e)), l = (e, r, t) => r.has(e) ? S("Cannot add the same private member more than once") : r instanceof WeakSet ? r.add(e) : r.set(e, t), p, h, M, f, z, v, x, y, w;
+const { baseClassNamePrefix: F, subElementClassPrefix: g, classModifierPrefix: n } = V("text-area");
+let i = class extends H {
+  constructor() {
+    super(...arguments), this.required = !1, this.hideRequiredMarker = !1, this.readOnly = !1, this.disabled = !1, this.fluid = !1, this.hideResize = !1, this.autoResize = !1, this.formFieldCounterRef = W(), l(this, p, () => {
+      var e;
+      return !!(this.disabled || (e = this.formContext) != null && e.disabled);
+    }), l(this, h, () => {
+      var e;
+      return !!(this.readOnly || (e = this.formContext) != null && e.readOnly);
+    }), l(this, M, () => {
+      var e;
+      return !!(this.required || (e = this.formContext) != null && e.required);
+    }), l(this, f, () => !!this.autoResize), l(this, z, () => o(this, f).call(this) || !!this.hideResize), l(this, v, () => {
+      const { value: e } = this.formFieldCounterRef;
+      if (!e) return;
+      const { value: r } = this.formFieldRef, {
+        value: { length: t }
+      } = r;
+      e.textContent = `${t}`;
+    }), l(this, x, () => {
+      const { value: e } = this.formFieldRef;
+      A(e, o(this, f).call(this));
+    }), l(this, y, (e) => {
+      o(this, v).call(this), o(this, x).call(this), this.validateFieldOnChange(e);
+    }), l(this, w, (e) => e ? _`
+      <div class="${g}counter">
+        <span ${N(this.formFieldCounterRef)}></span>/<span>${e}</span>
+      </div>
+    ` : D);
+  }
+  updated(e) {
+    const [r] = this._textAreaLabel, [t] = this._textAreaHelperText, { decorate: s } = I(r), { decorate: c } = I(t), b = d(e, ["value"]), u = d(e, ["maxCount"]), T = d(e, ["autoResize"]), Y = d(e, ["validationRules"]), $ = d(e, ["formContext", "disabled"]), E = d(e, [
+      "formContext",
+      "required",
+      "hideRequiredMarker"
+    ]), P = d(e, ["formContext"]) && this.contextInitialsChanged();
+    (b || P) && this.setContextValue(), $ && (s({ disabled: o(this, p).call(this) }), c({ disabled: o(this, p).call(this) })), u && o(this, v).call(this), T && o(this, x).call(this), Y && this.setContextValidation(), E && s({ required: o(this, M).call(this) && !this.hideRequiredMarker });
+  }
+  finalizeAssociatedCallback(e) {
+    return {
+      ctxValue: e.slice(0, this.maxCount),
+      finalizeCallback: () => {
+        o(this, v).call(this), o(this, x).call(this);
+      }
+    };
+  }
+  render() {
+    const { ariaInvalid: e } = this, { length: r } = this.validationErrors(), t = typeof this.error == "string" || !!r, s = C(
+      this.helperTextId,
+      this.error && this.errorId,
+      this.validationErrorShown() && this.validationErrorsId
+    ), c = C(
+      F,
+      t && `${n}error`,
+      this.theme && G(this.theme),
+      this.fluid && `${n}fluid`,
+      this.cols && `${n}cols-width`,
+      o(this, p).call(this) && `${n}disabled`,
+      o(this, h).call(this) && `${n}read-only`,
+      o(this, z).call(this) && `${n}hide-resize`,
+      o(this, f).call(this) && `${n}auto-resize`
+    );
+    return _`
+      <div class="${c}" style="max-width: ${this.width}">
+        <div class="${g}header">
+          <slot name="label" id="${this.labelId}"></slot>
+          ${o(this, w).call(this, this.maxCount)}
+        </div>
+        <div class="${g}field">
+          <textarea
+            id="${this.id}"
+            name="${this.name}"
+            rows="${this.rows}"
+            cols="${this.cols}"
+            ${N(this.formFieldRef)}
+            maxlength="${this.maxCount}"
+            @input="${o(this, y)}"
+            ?required="${o(this, M).call(this)}"
+            ?readonly="${o(this, h).call(this)}"
+            ?disabled="${o(this, p).call(this)}"
+            placeholder="${this.placeholder}"
+            aria-labelledby="${this.labelId}"
+            aria-label="${this.inputAriaLabel}"
+            @blur="${this.validateFieldOnBlur}"
+            aria-describedby="${s}"
+            class="${g}input"
+            aria-invalid="${e || t}"
+            aria-disabled="${o(this, p).call(this) || o(this, h).call(this)}"
+          ></textarea>
+        </div>
+        <slot name="helper-text" id="${this.helperTextId}"></slot>
+        ${this.renderError(this.error, o(this, p).call(this))}
+        ${this.renderValidationErrors()}
+      </div>
+    `;
+  }
+};
+p = /* @__PURE__ */ new WeakMap();
+h = /* @__PURE__ */ new WeakMap();
+M = /* @__PURE__ */ new WeakMap();
+f = /* @__PURE__ */ new WeakMap();
+z = /* @__PURE__ */ new WeakMap();
+v = /* @__PURE__ */ new WeakMap();
+x = /* @__PURE__ */ new WeakMap();
+y = /* @__PURE__ */ new WeakMap();
+w = /* @__PURE__ */ new WeakMap();
+B(i);
+i.styles = R(O);
+a([
+  m({ type: Number })
+], i.prototype, "rows", 2);
+a([
+  m({ type: Number })
+], i.prototype, "cols", 2);
+a([
+  m({ type: String })
+], i.prototype, "placeholder", 2);
+a([
+  m({ type: Boolean })
+], i.prototype, "required", 2);
+a([
+  m({ type: Boolean })
+], i.prototype, "hideRequiredMarker", 2);
+a([
+  m({ type: String })
+], i.prototype, "error", 2);
+a([
+  m({ type: Boolean })
+], i.prototype, "readOnly", 2);
+a([
+  m({ type: Boolean })
+], i.prototype, "disabled", 2);
+a([
+  m({ type: Boolean })
+], i.prototype, "fluid", 2);
+a([
+  m({ type: String })
+], i.prototype, "width", 2);
+a([
+  m({ type: Boolean })
+], i.prototype, "hideResize", 2);
+a([
+  m({ type: Number })
+], i.prototype, "maxCount", 2);
+a([
+  m({ type: Boolean })
+], i.prototype, "autoResize", 2);
+a([
+  m({ type: String })
+], i.prototype, "theme", 2);
+a([
+  k({ slot: "label" })
+], i.prototype, "_textAreaLabel", 2);
+a([
+  k({ slot: "helper-text" })
+], i.prototype, "_textAreaHelperText", 2);
+i = a([
+  L("bm-text-area")
+], i);
+export {
+  i as BmTextArea
+};

package/local/wip/TextArea/index.js

@@ -0,0 +1,4 @@
+import { BmTextArea as m } from "./TextArea.js";
+export {
+  m as BmTextArea
+};

package/local/wip/TextField/TextField.js

@@ -0,0 +1,169 @@
+import { r as E, x as b } from "../../chunks/lit-element.CJtt9wj5.js";
+import { n as c, c as O } from "../../chunks/register-custom-element.vod7zfGv.js";
+import { r as k } from "../../chunks/state.CqiuSzAl.js";
+import { o as S } from "../../chunks/query-assigned-elements.Drkgpk9q.js";
+import { n as A } from "../../chunks/ref.B7e1Hu4F.js";
+import { p as f, a as C, c as $, g as P } from "../../chunks/classNames.C6fNrXWF.js";
+import { t as I } from "../../chunks/constants.jOWREYQE.js";
+import { r as T } from "../../chunks/delegate.baxDQosr.js";
+import { s as z } from "../../chunks/helpers.BWcXAteC.js";
+import { FormField as W } from "../Form/Form.decorator.js";
+import "../../chunks/index.Bz1Jq4c2.js";
+const L = ':root,:host,.bm-light,.bm-dark .bm-inverse,[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-utility-color-accent-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-utility-color-accent-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-utility-color-accent-default, #00768f );--bm-comp-input-color-choice-radio-selected-inner-circle: var( --bm-utility-color-accent-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-default: 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: var(--bm-sem-space-100, 1rem);--bm-comp-input-space-field-y: var(--bm-sem-space-50, .5rem);--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-md-height: var(--bm-sem-size-height-md, 2.5rem);--bm-comp-input-size-field-width: var(--bm-primitive-dimension-1800, 18rem);--bm-comp-input-size-field-icon: 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,[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-utility-color-accent-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-utility-color-accent-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-utility-color-accent-default, #43bfd6 );--bm-comp-input-color-choice-radio-selected-inner-circle: var( --bm-utility-color-accent-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-default: 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: var(--bm-sem-space-100, 1rem);--bm-comp-input-space-field-y: var(--bm-sem-space-50, .5rem);--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-md-height: var(--bm-sem-size-height-md, 2.5rem);--bm-comp-input-size-field-width: var(--bm-primitive-dimension-1800, 18rem);--bm-comp-input-size-field-icon: 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--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-comp-input-size-field-md-height);padding:var(--bm-comp-input-space-field-y) var(--bm-comp-input-space-field-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-comp-input-typo-default);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-comp-input-size-field-md-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);width:var(--bm-comp-input-size-field-icon);height:var(--bm-comp-input-size-field-icon)}';
+var R = Object.defineProperty, D = Object.getOwnPropertyDescriptor, B = (e) => {
+  throw TypeError(e);
+}, r = (e, o, i, a) => {
+  for (var l = a > 1 ? void 0 : a ? D(o, i) : o, n = e.length - 1, p; n >= 0; n--)
+    (p = e[n]) && (l = (a ? p(o, i, l) : p(l)) || l);
+  return a && l && R(o, i, l), l;
+}, H = (e, o, i) => o.has(e) || B("Cannot " + i), m = (e, o, i) => (H(e, o, "read from private field"), i ? i.call(e) : o.get(e)), s = (e, o, i) => o.has(e) ? B("Cannot add the same private member more than once") : o instanceof WeakSet ? o.add(e) : o.set(e, i), g, _, d, v, x, y, w;
+const { baseClassNamePrefix: N, subElementClassPrefix: u, classModifierPrefix: h } = P("text-field");
+let t = class extends W {
+  constructor() {
+    super(...arguments), this.required = !1, this.hideRequiredMarker = !1, this.readOnly = !1, this.disabled = !1, this.fluid = !1, this.ellipse = !1, this.type = "text", this.inputMode = "text", this._hasContentBeforeSlot = !1, this._hasContentAfterSlot = !1, s(this, g, () => !!this._hasContentAfterSlot), s(this, _, () => !!this._hasContentBeforeSlot), s(this, d, () => {
+      var e;
+      return !!(this.disabled || (e = this.formContext) != null && e.disabled);
+    }), s(this, v, () => {
+      var e;
+      return !!(this.readOnly || (e = this.formContext) != null && e.readOnly);
+    }), s(this, x, () => {
+      var e;
+      return !!(this.required || (e = this.formContext) != null && e.required);
+    }), s(this, y, () => {
+      const e = ({ target: o }) => {
+        this._hasContentBeforeSlot = z(o);
+      };
+      return m(this, _).call(this) ? b`
+          <div class="${u}content">
+            <slot name="content-before" @slotchange="${e}"></slot>
+          </div>
+        ` : b`<slot name="content-before" @slotchange="${e}"></slot>`;
+    }), s(this, w, () => {
+      const e = ({ target: o }) => {
+        this._hasContentAfterSlot = z(o);
+      };
+      return m(this, g).call(this) ? b`
+          <div class="${u}content">
+            <slot name="content-after" @slotchange="${e}"></slot>
+          </div>
+        ` : b`<slot name="content-after" @slotchange="${e}"></slot>`;
+    });
+  }
+  updated(e) {
+    const [o] = this._textFieldLabel, [i] = this._textFieldHelperText, { decorate: a } = C(o), { decorate: l } = C(i), n = f(e, ["value"]), p = f(e, ["validationRules"]), F = f(e, ["formContext", "disabled"]), M = f(e, [
+      "formContext",
+      "required",
+      "hideRequiredMarker"
+    ]), q = f(e, ["formContext"]) && this.contextInitialsChanged();
+    (n || q) && this.setContextValue(), F && (a({ disabled: m(this, d).call(this) }), l({ disabled: m(this, d).call(this) })), p && this.setContextValidation(), M && a({ required: m(this, x).call(this) && !this.hideRequiredMarker });
+  }
+  render() {
+    const { ariaInvalid: e } = this, { length: o } = this.validationErrors(), i = typeof this.error == "string" || !!o, a = $(
+      this.helperTextId,
+      this.error && this.errorId,
+      this.validationErrorShown() && this.validationErrorsId
+    ), l = $(
+      N,
+      i && `${h}error`,
+      this.theme && I(this.theme),
+      this.fluid && `${h}fluid`,
+      this.ellipse && `${h}ellipsis`,
+      m(this, d).call(this) && `${h}disabled`,
+      m(this, v).call(this) && `${h}read-only`
+    );
+    return b`
+      <div class="${l}" style="max-width: ${this.width}">
+        <slot name="label" id="${this.labelId}"></slot>
+        <div class="${u}field">
+          ${m(this, y).call(this)}
+          <input
+            id="${this.id}"
+            name="${this.name}"
+            type="${this.type}"
+            ${A(this.formFieldRef)}
+            inputmode="${this.inputMode}"
+            ?required="${m(this, x).call(this)}"
+            ?readonly="${m(this, v).call(this)}"
+            ?disabled="${m(this, d).call(this)}"
+            placeholder="${this.placeholder}"
+            aria-labelledby="${this.labelId}"
+            aria-label="${this.inputAriaLabel}"
+            @blur="${this.validateFieldOnBlur}"
+            @keydown="${this.submitFormByEnter}"
+            aria-describedby="${a}"
+            class="${u}input"
+            @input="${this.validateFieldOnChange}"
+            aria-invalid="${e || i}"
+          />
+          ${m(this, w).call(this)}
+        </div>
+        <slot name="helper-text" id="${this.helperTextId}"></slot>
+        ${this.renderError(this.error, m(this, d).call(this))}
+        ${this.renderValidationErrors()}
+      </div>
+    `;
+  }
+};
+g = /* @__PURE__ */ new WeakMap();
+_ = /* @__PURE__ */ new WeakMap();
+d = /* @__PURE__ */ new WeakMap();
+v = /* @__PURE__ */ new WeakMap();
+x = /* @__PURE__ */ new WeakMap();
+y = /* @__PURE__ */ new WeakMap();
+w = /* @__PURE__ */ new WeakMap();
+T(t);
+t.styles = E(L);
+r([
+  c({ type: String })
+], t.prototype, "placeholder", 2);
+r([
+  c({ type: Boolean })
+], t.prototype, "required", 2);
+r([
+  c({ type: Boolean })
+], t.prototype, "hideRequiredMarker", 2);
+r([
+  c({ type: String })
+], t.prototype, "error", 2);
+r([
+  c({ type: Boolean })
+], t.prototype, "readOnly", 2);
+r([
+  c({ type: Boolean })
+], t.prototype, "disabled", 2);
+r([
+  c({ type: Boolean })
+], t.prototype, "fluid", 2);
+r([
+  c({ type: String })
+], t.prototype, "width", 2);
+r([
+  c({ type: Boolean })
+], t.prototype, "ellipse", 2);
+r([
+  c({ type: String })
+], t.prototype, "theme", 2);
+r([
+  c({ type: String })
+], t.prototype, "type", 2);
+r([
+  c({ type: String })
+], t.prototype, "inputMode", 2);
+r([
+  S({ slot: "label" })
+], t.prototype, "_textFieldLabel", 2);
+r([
+  S({ slot: "helper-text" })
+], t.prototype, "_textFieldHelperText", 2);
+r([
+  k()
+], t.prototype, "_hasContentBeforeSlot", 2);
+r([
+  k()
+], t.prototype, "_hasContentAfterSlot", 2);
+t = r([
+  O("bm-text-field")
+], t);
+export {
+  t as BmTextField
+};

package/local/wip/TextField/index.js

@@ -0,0 +1,4 @@
+import { BmTextField as o } from "./TextField.js";
+export {
+  o as BmTextField
+};

package/package.json

@@ -0,0 +1,78 @@
+{
+  "name": "@viasat/beam-web-components",
+  "version": "2.0.0",
+  "description": "Framework-agnostic web components for the Beam Design System built with Lit, compatible with Angular, Vue, Svelte, and vanilla JavaScript",
+  "license": "MIT",
+  "author": "Viasat",
+  "homepage": "https://react.beam.viasat.com/",
+  "repository": {
+    "type": "git",
+    "url": "https://git.viasat.com/vega/beam",
+    "directory": "libs/web-components"
+  },
+  "bugs": {
+    "url": "https://git.viasat.com/vega/beam/issues"
+  },
+  "keywords": [
+    "web-components",
+    "custom-elements",
+    "design-system",
+    "beam",
+    "lit",
+    "angular",
+    "vue",
+    "svelte",
+    "framework-agnostic"
+  ],
+  "type": "module",
+  "main": "./index.js",
+  "module": "./index.js",
+  "types": "./index.d.ts",
+  "customElements": "custom-elements.json",
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "import": "./index.js"
+    },
+    "./*": {
+      "types": "./*/index.d.ts",
+      "import": "./*/index.js"
+    },
+    "./wip/*": {
+      "types": "./wip/*/index.d.ts",
+      "import": "./wip/*/index.js"
+    }
+  },
+  "files": [
+    "**/*.js",
+    "**/*.d.ts",
+    "**/*.css",
+    "custom-elements.json",
+    "vscode.css-custom-data.json",
+    "vscode.html-custom-data.json",
+    "README.md"
+  ],
+  "sideEffects": [
+    "**/*.css",
+    "**/*.js",
+    "**/*.ts"
+  ],
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@viasat/beam-fonts": "2.0.0",
+    "@viasat/beam-shared": "2.0.0",
+    "@viasat/beam-styles": "2.0.0",
+    "@viasat/beam-tokens": "2.0.0",
+    "@viasat/beam-icons": "2.0.0",
+    "clsx": "^1.2.1",
+    "lit": "^3.1.0",
+    "@lit/context": "^1.1.1",
+    "@floating-ui/utils": "^0.2.9",
+    "@floating-ui/dom": "^1.6.13"
+  }
+}

package/vscode.css-custom-data.json

@@ -0,0 +1,6 @@
+{
+  "$schema": "https://raw.githubusercontent.com/microsoft/vscode-css-languageservice/main/docs/customData.schema.json",
+  "version": 1.1,
+  "properties": [],
+  "pseudoElements": []
+}