@viasat/beam-web-components 2.0.0

package/wip/Switch/Switch.js

@@ -0,0 +1,155 @@
+import { consume as _ } from "@lit/context";
+import { unsafeCSS as C, LitElement as z, html as n, nothing as w } from "lit";
+import { property as a } from "lit/decorators.js";
+import { createRef as S, ref as T } from "lit/directives/ref.js";
+import $ from "clsx";
+import { g as O, d as y } from "../../chunks/classNames.Cq_tbDRp.js";
+import { t as B } from "../../chunks/constants.jOWREYQE.js";
+import { r as L } from "../../chunks/delegate.baxDQosr.js";
+import { c as E } from "../../chunks/register-custom-element.DHGKOhmA.js";
+import { inputChoiceGroupContext as P } from "../../InputChoiceGroup/InputChoiceGroup.context.js";
+const D = `: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-switch--read-only{--bm-input-choice-cursor: default;--bm-input-choice-label-cursor: default;--bm-input-choice-label-pointer-events: none}.bm-switch--disabled{--bm-input-choice-cursor: not-allowed;--bm-input-choice-label-cursor: not-allowed}.bm-switch__label{display:flex;position:relative;width:fit-content;align-items:start;gap:var(--bm-comp-input-space-choice-gap-inside);min-width:var(--bm-comp-input-size-choice-switch-width);min-height:var(--bm-comp-input-size-choice-switch-height);font:var(--bm-comp-input-typo-default);color:var(--bm-comp-input-color-text);cursor:var(--bm-input-choice-label-cursor, pointer);pointer-events:var(--bm-input-choice-label-pointer-events, auto)}.bm-switch input{-webkit-appearance:none;-moz-appearance:none;appearance:none;--webkit-appearance: none;--moz-appearance: none;position:relative;display:inline-block;flex-shrink:0;width:var(--bm-comp-input-size-choice-switch-width);height:var(--bm-comp-input-size-choice-switch-height);margin:var(--bm-sem-space-0);cursor:var(--bm-input-choice-cursor, pointer)}.bm-switch input+.bm-switch__switchBackground{position:absolute;box-sizing:border-box;width:var(--bm-comp-input-size-choice-switch-width);height:var(--bm-comp-input-size-choice-switch-height);border:var(--bm-comp-input-border-width-choice) solid var(--bm-comp-input-color-border);border-radius:var(--bm-comp-input-radius-choice-switch);background-color:var(--bm-comp-input-color-bg);transition:background-color .2s ease-in-out,box-shadow .2s ease-in}.bm-switch input+.bm-switch__switchBackground:before,.bm-switch input+.bm-switch__switchBackground:after{content:"";position:absolute;height:var(--bm-sem-size-icon-xs);width:var(--bm-sem-size-icon-xs);top:50%;transform:translateY(-50%)}.bm-switch input+.bm-switch__switchBackground:before{display:none;mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9 16.1698L4.83 11.9998L3.41 13.4098L9 18.9998L21 6.99984L19.59 5.58984L9 16.1698Z' fill='currentColor'/%3E%3C/svg%3E");left:.3125rem;background-color:var(--bm-comp-input-color-icon)}.bm-switch input+.bm-switch__switchBackground:after{display:block;mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12L19 6.41Z' fill='currentColor'/%3E%3C/svg%3E");right:.3125rem;background-color:var(--bm-comp-input-color-icon)}.bm-switch input:after{z-index:1;position:absolute;box-sizing:border-box;content:"";width:var(--bm-comp-input-size-choice-switch-knob);height:var(--bm-comp-input-size-choice-switch-knob);top:50%;transform:translate(0) translateY(-50%);left:.1875rem;background-color:var(--bm-comp-input-color-icon);border-radius:var(--bm-sem-radius-round);transition:left .2s ease-in-out}.bm-switch input:checked+.bm-switch__switchBackground{background-color:var(--bm-comp-input-color-choice-switch-selected-bg);border-color:var(--bm-comp-input-color-choice-switch-selected-border)}.bm-switch input:checked+.bm-switch__switchBackground:before{display:block;background-color:var(--bm-comp-input-color-choice-switch-selected-icon)}.bm-switch input:checked+.bm-switch__switchBackground:after{display:none;background-color:var(--bm-comp-input-color-choice-switch-selected-bg)}.bm-switch input:checked:after{background-color:var(--bm-comp-input-color-choice-switch-selected-icon);left:calc(var(--bm-comp-input-size-choice-switch-width) - (.1875rem + var(--bm-comp-input-size-choice-switch-knob)))}.bm-switch input:focus-visible{outline:none}.bm-switch input:focus-visible+.bm-switch__switchBackground{outline-offset:var(--bm-sem-size-focus-offset);outline:var(--bm-sem-border-width-focus) solid var(--bm-sem-color-border-focus)}.bm-switch--read-only .bm-switch__label span{color:var(--bm-comp-input-color-text)}.bm-switch--read-only input:read-only+.bm-switch__switchBackground{background-color:var(--bm-comp-input-color-bg-disabled);border-color:var(--bm-comp-input-color-border-disabled)}.bm-switch--read-only input:read-only+.bm-switch__switchBackground:after,.bm-switch--read-only input:read-only+.bm-switch__switchBackground:before{background-color:var(--bm-comp-input-color-icon)}.bm-switch--read-only input:read-only:after{background-color:var(--bm-comp-input-color-icon)}.bm-switch--disabled .bm-switch__label span{color:var(--bm-comp-input-color-text-disabled)}.bm-switch--disabled input:disabled+.bm-switch__switchBackground{background-color:var(--bm-comp-input-color-bg-disabled);border-color:var(--bm-comp-input-color-border-disabled)}.bm-switch--disabled input:disabled+.bm-switch__switchBackground:after,.bm-switch--disabled input:disabled+.bm-switch__switchBackground:before{background-color:var(--bm-comp-input-color-icon-disabled)}.bm-switch--disabled input:disabled:after{background-color:var(--bm-comp-input-color-icon-disabled)}.bm-switch--before .bm-switch__label{flex-direction:row-reverse}.bm-switch--after .bm-switch__label{flex-direction:row}`;
+var R = Object.defineProperty, M = Object.getOwnPropertyDescriptor, k = (e) => {
+  throw TypeError(e);
+}, m = (e, o, i, c) => {
+  for (var t = c > 1 ? void 0 : c ? M(o, i) : o, s = e.length - 1, p; s >= 0; s--)
+    (p = e[s]) && (t = (c ? p(o, i, t) : p(t)) || t);
+  return c && t && R(o, i, t), t;
+}, G = (e, o, i) => o.has(e) || k("Cannot " + i), l = (e, o, i) => (G(e, o, "read from private field"), i ? i.call(e) : o.get(e)), d = (e, o, i) => o.has(e) ? k("Cannot add the same private member more than once") : o instanceof WeakSet ? o.add(e) : o.set(e, i), u, f, v;
+const { baseClassNamePrefix: N, subElementClassPrefix: x, classModifierPrefix: h } = O("switch");
+let r = class extends z {
+  constructor() {
+    super(...arguments), this.onText = void 0, this._hasOnTextSlotContent = !1, this.offText = void 0, this._hasOffTextSlotContent = !1, this.theme = void 0, this.textPosition = "after", this.readOnly = !1, this.disabled = !1, this.checked = !1, this.switchRef = S(), d(this, u, () => n` <span class=${`${x}switchBackground`}></span> `), d(this, f, () => {
+      var g;
+      const e = ((g = this.switchRef.value) == null ? void 0 : g.checked) || this.checked;
+      this._updateDisplayedSlot(e);
+      const o = this._hasOnTextSlotContent ? w : this.onText || this.offText, i = this._hasOffTextSlotContent ? w : this.offText || this.onText, c = (b) => {
+        this._hasOnTextSlotContent = y(b), this._updateDisplayedSlot(e);
+      }, t = (b) => {
+        this._hasOffTextSlotContent = y(b), this._updateDisplayedSlot(e);
+      }, s = n`
+      <slot name="onText" id="onText" @slotchange=${c}>${o}</slot>
+    `, p = n`<slot
+      name="offText"
+      id="offText"
+      @slotchange=${t}
+      >${i}</slot
+    > `;
+      return n`<span> ${p} ${s} </span>`;
+    }), d(this, v, () => {
+      const { ariaLabel: e } = this, {
+        readOnly: o,
+        disabled: i,
+        name: c
+      } = this.inputChoiceGroupContext || {}, t = this.disabled || i, s = this.readOnly || o;
+      return n`<input
+      role="switch"
+      type="checkbox"
+      name=${c}
+      id=${this.id}
+      ?value=${this.value}
+      ?readOnly=${s}
+      ?disabled=${t}
+      .checked=${this.checked}
+      .aria-checked=${this.checked}
+      .aria-disabled=${t}
+      .aria-readonly=${s}
+      aria-label=${e}
+      @click=${this.onChange}
+      ${T(this.switchRef)}
+    />`;
+    });
+  }
+  updated(e) {
+    e.has("checked") && this.requestUpdate();
+  }
+  handleForwardedEvents(e) {
+    e.target === this.switchRef.value && (e.preventDefault(), e.stopPropagation());
+  }
+  onChange(e) {
+    var i;
+    if (this.readOnly || (i = this.inputChoiceGroupContext) != null && i.readOnly) {
+      e.preventDefault();
+      return;
+    }
+    const o = e.target;
+    this.checked = o.checked, this._updateDisplayedSlot(o.checked);
+  }
+  _updateDisplayedSlot(e) {
+    var c, t;
+    const o = (c = this == null ? void 0 : this.shadowRoot) == null ? void 0 : c.getElementById("onText"), i = (t = this == null ? void 0 : this.shadowRoot) == null ? void 0 : t.getElementById("offText");
+    if (!(!o || !i)) {
+      if (e) {
+        if (!this._hasOnTextSlotContent && this._hasOffTextSlotContent) {
+          i.style.display = "contents";
+          return;
+        }
+        o.style.display = "contents", i.style.display = "none";
+      }
+      if (!e) {
+        if (!this._hasOffTextSlotContent && this._hasOnTextSlotContent) {
+          o.style.display = "contents";
+          return;
+        }
+        i.style.display = "contents", o.style.display = "none";
+      }
+    }
+  }
+  render() {
+    const { readOnly: e, disabled: o } = this.inputChoiceGroupContext || {}, i = this.disabled || o, c = this.readOnly || e, t = $(
+      N,
+      this.theme && B(this.theme),
+      this.textPosition && `${h}${this.textPosition}`,
+      i && `${h}disabled`,
+      c && `${h}read-only`
+    );
+    return n`
+      <div class=${t}>
+        <label
+          tabindex="-1"
+          class=${`${x}label`}
+          @blur=${this.handleForwardedEvents}
+          @focus=${this.handleForwardedEvents}
+        >
+          ${l(this, v).call(this)} ${l(this, u).call(this)} ${l(this, f).call(this)}
+        </label>
+      </div>
+    `;
+  }
+};
+u = /* @__PURE__ */ new WeakMap();
+f = /* @__PURE__ */ new WeakMap();
+v = /* @__PURE__ */ new WeakMap();
+r.styles = C(D);
+L(r);
+m([
+  _({ context: P, subscribe: !0 }),
+  a({ attribute: !1 })
+], r.prototype, "inputChoiceGroupContext", 2);
+m([
+  a({ type: String })
+], r.prototype, "onText", 2);
+m([
+  a({ type: String })
+], r.prototype, "offText", 2);
+m([
+  a({ type: String })
+], r.prototype, "textPosition", 2);
+m([
+  a({ type: Boolean })
+], r.prototype, "readOnly", 2);
+m([
+  a({ type: Boolean })
+], r.prototype, "disabled", 2);
+m([
+  a({ type: Boolean })
+], r.prototype, "checked", 2);
+m([
+  a({ type: String })
+], r.prototype, "value", 2);
+r = m([
+  E("bm-switch")
+], r);
+export {
+  r as BmSwitch
+};

package/wip/Switch/SwitchGroup/SwitchGroup.d.ts

@@ -0,0 +1,15 @@
+import { InputChoiceGroup } from '../../../InputChoiceGroup/InputChoiceGroup';
+/**
+ * `bm-switch-group`
+ *
+ * @slot label - Slot for the label of the SwitchGroup
+ * @slot helperText - Slot for the helper text of the SwitchGroup
+ */
+export declare class BmSwitchGroup extends InputChoiceGroup {
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'bm-switch-group': BmSwitchGroup;
+    }
+}
+//# sourceMappingURL=SwitchGroup.d.ts.map

package/wip/Switch/SwitchGroup/SwitchGroup.js

@@ -0,0 +1,15 @@
+import { c as u } from "../../../chunks/register-custom-element.DHGKOhmA.js";
+import { InputChoiceGroup as l } from "../../../InputChoiceGroup/InputChoiceGroup.js";
+var n = Object.getOwnPropertyDescriptor, a = (t, o, m, p) => {
+  for (var r = p > 1 ? void 0 : p ? n(o, m) : o, e = t.length - 1, s; e >= 0; e--)
+    (s = t[e]) && (r = s(r) || r);
+  return r;
+};
+let c = class extends l {
+};
+c = a([
+  u("bm-switch-group")
+], c);
+export {
+  c as BmSwitchGroup
+};

package/wip/Switch/index.d.ts

@@ -0,0 +1,3 @@
+export * from './Switch';
+export * from './SwitchGroup/SwitchGroup';
+//# sourceMappingURL=index.d.ts.map

package/wip/Switch/index.js

@@ -0,0 +1,6 @@
+import { BmSwitch as m } from "./Switch.js";
+import { BmSwitchGroup as p } from "./SwitchGroup/SwitchGroup.js";
+export {
+  m as BmSwitch,
+  p as BmSwitchGroup
+};

package/wip/TextArea/TextArea.d.ts

@@ -0,0 +1,89 @@
+import { ThemeTypes } from '@viasat/beam-shared/utils/constants';
+import { Optional } from '@viasat/beam-shared/utils/types';
+import { NullableTemplate, FinalizeAssociatedResult } from '../../../utils/mixins/types';
+import { FormField } from '../Form/Form.decorator';
+/**
+ * @summary `bm-text-area`
+ *
+ * @slot label - Specify the label for TextArea
+ * @slot helper-text - Specify the helper text for TextArea
+ */
+export declare class BmTextArea extends FormField {
+    #private;
+    /**
+     * Specify the height of TextArea
+     */
+    rows: Optional<number>;
+    /**
+     * Specify the width of TextArea
+     */
+    cols: Optional<number>;
+    /**
+     * Specify placeholder text for TextArea
+     */
+    placeholder: Optional<string>;
+    /**
+     * Specify if TextArea is a required input
+     * @default false
+     */
+    required: boolean;
+    /**
+     * Specify if the TextArea displays with an asterisk
+     * @default false
+     */
+    hideRequiredMarker: boolean;
+    /**
+     * Specify error text and display error state of a TextArea
+     */
+    error: Optional<string>;
+    /**
+     * Specify if TextArea displays in a read-only state
+     * @default false
+     */
+    readOnly: boolean;
+    /**
+     * Specify if TextArea displays in a disabled state
+     * @default false
+     */
+    disabled: boolean;
+    /**
+     * Specify if TextArea is fluid
+     * @default false
+     */
+    fluid: boolean;
+    /**
+     * Specify the width of TextArea
+     */
+    width: Optional<string>;
+    /**
+     * Specify if TextArea can be manually resized
+     * @default false
+     */
+    hideResize: boolean;
+    /**
+     * Specify the maximum character count for the TextArea
+     */
+    maxCount: Optional<number>;
+    /**
+     * Specify if the TextArea automatically resizes to fit the text
+     * @default false
+     */
+    autoResize: boolean;
+    /**
+     * Specify the theme of the TextArea. By default it inherits the theme from the parent
+     */
+    theme: Optional<ThemeTypes>;
+    static styles: import('lit').CSSResult;
+    formFieldCounterRef: import('lit-html/directives/ref').Ref<HTMLSpanElement>;
+    private _textAreaLabel;
+    private _textAreaHelperText;
+    updated(cP: Map<string, unknown>): void;
+    finalizeAssociatedCallback(value: string): FinalizeAssociatedResult;
+    render(): NullableTemplate;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'bm-text-area': BmTextArea;
+    }
+}
+//# sourceMappingURL=TextArea.d.ts.map

package/wip/TextArea/TextArea.js

@@ -0,0 +1,193 @@
+import { unsafeCSS as R, html as _, nothing as D } from "lit";
+import { property as m, queryAssignedElements as k } from "lit/decorators.js";
+import { createRef as L, ref as N } from "lit/directives/ref.js";
+import I from "clsx";
+import { p as d, a as C, g as W } from "../../chunks/classNames.Cq_tbDRp.js";
+import { t as V } from "../../chunks/constants.jOWREYQE.js";
+import { r as G } from "../../chunks/delegate.baxDQosr.js";
+import { c as B } from "../../chunks/register-custom-element.DHGKOhmA.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 q = Object.defineProperty, U = Object.getOwnPropertyDescriptor, S = (e) => {
+  throw TypeError(e);
+}, a = (e, r, t, s) => {
+  for (var c = s > 1 ? void 0 : s ? U(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 && q(r, t, c), c;
+}, X = (e, r, t) => r.has(e) || S("Cannot " + t), o = (e, r, t) => (X(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 } = W("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 = L(), 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 } = C(r), { decorate: c } = C(t), b = d(e, ["value"]), u = d(e, ["maxCount"]), T = d(e, ["autoResize"]), Y = d(e, ["validationRules"]), E = d(e, ["formContext", "disabled"]), $ = d(e, [
+      "formContext",
+      "required",
+      "hideRequiredMarker"
+    ]), P = d(e, ["formContext"]) && this.contextInitialsChanged();
+    (b || P) && this.setContextValue(), E && (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(), $ && 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 = I(
+      this.helperTextId,
+      this.error && this.errorId,
+      this.validationErrorShown() && this.validationErrorsId
+    ), c = I(
+      F,
+      t && `${n}error`,
+      this.theme && V(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();
+G(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([
+  B("bm-text-area")
+], i);
+export {
+  i as BmTextArea
+};

package/wip/TextArea/index.d.ts

@@ -0,0 +1,2 @@
+export * from './TextArea';
+//# sourceMappingURL=index.d.ts.map

package/wip/TextArea/index.js

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

package/wip/TextField/TextField.d.ts

@@ -0,0 +1,70 @@
+import { ThemeTypes } from '@viasat/beam-shared/utils/constants';
+import { Optional } from '@viasat/beam-shared/utils/types';
+import { NullableTemplate } from '../../../utils/mixins/types';
+import { FormField } from '../Form/Form.decorator';
+/**
+ * @summary `bm-text-field`
+ *
+ * @slot label - Specify the label for TextField
+ * @slot helper-text - Specify the helper text for TextField
+ * @slot content-after - Specify content to display after input
+ * @slot content-before - Specify content to display before input
+ */
+export declare class BmTextField extends FormField {
+    #private;
+    /**
+     * Specify placeholder text for TextField
+     */
+    placeholder: Optional<string>;
+    /**
+     * Specify if TextField is a required input
+     */
+    required: boolean;
+    /**
+     * Specify if the TextField displays with an asterisk
+     */
+    hideRequiredMarker: boolean;
+    /**
+     * Specify error text and display error state of a TextField
+     */
+    error: Optional<string>;
+    /**
+     * Specify if TextField displays in a read-only state
+     */
+    readOnly: boolean;
+    /**
+     * Specify if TextField displays in a disabled state
+     */
+    disabled: boolean;
+    /**
+     * Specify if TextField is fluid
+     */
+    fluid: boolean;
+    /**
+     * Specify the width of TextField
+     */
+    width: Optional<string>;
+    /**
+     * Specify if overflow displays ellipsis
+     */
+    ellipse: boolean;
+    /**
+     * Specify the theme of the TextField. By default it inherits the theme from the parent
+     */
+    theme: Optional<ThemeTypes>;
+    type: string;
+    inputMode: string;
+    static styles: import('lit').CSSResult;
+    private _textFieldLabel;
+    private _textFieldHelperText;
+    private _hasContentBeforeSlot;
+    private _hasContentAfterSlot;
+    updated(cP: Map<string, unknown>): void;
+    render(): NullableTemplate;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'bm-text-field': BmTextField;
+    }
+}
+//# sourceMappingURL=TextField.d.ts.map