@viasat/beam-web-components 2.0.0

package/wip/Form/Form.decorator.js

@@ -0,0 +1,144 @@
+var x = (a) => {
+  throw TypeError(a);
+};
+var C = (a, r, t) => r.has(a) || x("Cannot " + t);
+var u = (a, r, t) => (C(a, r, "read from private field"), t ? t.call(a) : r.get(a)), g = (a, r, t) => r.has(a) ? x("Cannot add the same private member more than once") : r instanceof WeakSet ? r.add(a) : r.set(a, t), V = (a, r, t, e) => (C(a, r, "write to private field"), e ? e.call(a, t) : r.set(a, t), t);
+import { consume as y } from "@lit/context";
+import { LitElement as E, nothing as f, html as p } from "lit";
+import { property as h, state as k } from "lit/decorators.js";
+import { createRef as A } from "lit/directives/ref.js";
+import { b as F } from "../../chunks/tokens.CTW8Tt94.js";
+import { bmFormInitials as c, bmFormContext as I } from "./Form.context.js";
+import { createId as m } from "./Form.utils.js";
+import "../../chunks/HelperText.CcVVOtA3.js";
+var S = Object.defineProperty, n = (a, r, t, e) => {
+  for (var i = void 0, o = a.length - 1, d; o >= 0; o--)
+    (d = a[o]) && (i = d(r, t, i) || i);
+  return i && S(r, t, i), i;
+}, l;
+const b = class b extends E {
+  constructor() {
+    super(...arguments);
+    g(this, l);
+    this.labelId = m(), this.errorId = m(), this.helperTextId = m(), this.validationErrorsId = m(), this.internals = this.attachInternals(), this.formFieldRef = A(), this.id = "", this.name = "", this.value = "", this.validationRules = [], this._validationErrors = [], this.validationErrors = () => this._validationErrors, this.setValidationErrors = (t) => {
+      this._validationErrors = t;
+    }, this.validationErrorShown = () => this.validationErrors().some((t) => !!(t != null && t.length)), V(this, l, /* @__PURE__ */ new WeakMap()), this.submitFormByEnter = ({ key: t }) => {
+      t === "Enter" && this.requestAssociatedSubmit();
+    }, this.forwardLabelFocus = () => {
+      const { value: t } = this.formFieldRef;
+      t.focus();
+    }, this.validateFieldOnBlur = (t) => {
+      const { formBlurHandler: e } = this.formContext || c;
+      e(t);
+    }, this.validateFieldOnChange = (t) => {
+      const { value: e } = t.target, { formChangeHandler: i } = this.formContext || c;
+      i(t), this.setAssociatedValue(e);
+    }, this.getContextValue = () => {
+      const { initialValues: t } = this.formContext || c;
+      return (t == null ? void 0 : t[this.name]) || this.value;
+    }, this.setContextValue = () => {
+      const { value: t } = this.formFieldRef, { ctxValue: e, finalizeCallback: i = () => {
+      } } = this.finalizeAssociatedCallback(this.getContextValue());
+      t.value = e, this.setAssociatedValue(e), i();
+    }, this.setContextValidation = () => {
+      const { value: t } = this.formFieldRef, { registerField: e } = this.formContext || c;
+      e({
+        field: t,
+        validators: this.validationRules,
+        initializer: this.setContextValue,
+        errorSetter: this.setValidationErrors
+      });
+    }, this.contextInitialsChanged = () => {
+      const { initialValues: t } = this.formContext || c, e = t == null ? void 0 : t[this.name], i = e !== this.contextInitialValue;
+      return i && (this.contextInitialValue = e), i;
+    }, this.renderError = (t, e) => t ? p`
+          <bm-helper-text
+            text="${t}"
+            id="${this.errorId}"
+            appearance="negative"
+            .disabled="${e}"
+          ></bm-helper-text>
+        ` : f, this.renderValidationErrors = () => this.validationErrorShown() ? p`
+          <div
+            role="log"
+            aria-live="polite"
+            aria-atomic="true"
+            aria-relevant="additions"
+            id="${this.validationErrorsId}"
+          >
+            ${this.validationErrors().map(
+      (t) => t ? p`
+                    <bm-helper-text
+                      text="${t}"
+                      appearance="negative"
+                      style="display: block; margin-top: ${F};"
+                    ></bm-helper-text>
+                  ` : f
+    )}
+          </div>
+        ` : f;
+  }
+  setAssociatedValue(t) {
+    let e = null;
+    if (typeof t == "boolean")
+      e = t ? "on" : null;
+    else if (typeof t == "number")
+      e = t.toString();
+    else if (Array.isArray(t)) {
+      const i = new FormData();
+      t.forEach((o) => i.append(this.name, o.toString())), e = i;
+    } else
+      e = t;
+    this.internals.form && this.internals.setFormValue(e);
+  }
+  requestAssociatedSubmit() {
+    this.internals.form && this.internals.form.requestSubmit();
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.addEventListener("bm-label-click", this.forwardLabelFocus);
+  }
+  ctxValueChanged(t, e) {
+    const { value: i } = e, o = u(this, l).get(i), { initialValues: { [this.name]: d } = {} } = t, v = d !== o;
+    return v && u(this, l).set(i, d), v;
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.removeEventListener("bm-label-click", this.forwardLabelFocus);
+  }
+  formAssociatedCallback() {
+    this.setAssociatedValue(this.value);
+  }
+  formResetCallback() {
+    this.setContextValue();
+  }
+  finalizeAssociatedCallback(t) {
+    return { ctxValue: t, finalizeCallback: () => {
+    } };
+  }
+};
+l = new WeakMap(), b.formAssociated = !0;
+let s = b;
+n([
+  h({ type: String })
+], s.prototype, "id");
+n([
+  h({ type: String })
+], s.prototype, "name");
+n([
+  h({ type: String })
+], s.prototype, "value");
+n([
+  h({ type: Array })
+], s.prototype, "validationRules");
+n([
+  h({ type: String, attribute: "input-aria-label" })
+], s.prototype, "inputAriaLabel");
+n([
+  y({ context: I, subscribe: !0 }),
+  h({ attribute: !1 })
+], s.prototype, "formContext");
+n([
+  k()
+], s.prototype, "_validationErrors");
+export {
+  s as FormField
+};

package/wip/Form/Form.js

@@ -0,0 +1,288 @@
+import { provide as V } from "@lit/context";
+import { LitElement as z, html as L } from "lit";
+import { property as p, state as S } from "lit/decorators.js";
+import { createRef as $, ref as H } from "lit/directives/ref.js";
+import { c as q } from "../../chunks/register-custom-element.DHGKOhmA.js";
+import { bmFormContext as G, bmFormInitials as P } from "./Form.context.js";
+const K = async (t, e) => (await Promise.all(
+  e.map(
+    async (o) => {
+      const { validator: s } = o;
+      return s(t);
+    }
+  )
+)).reduce(
+  (o, s) => {
+    const { error: n, message: a } = s;
+    return n ? [...o, a] : o;
+  },
+  []
+), F = (t) => {
+  const { type: e, checked: r } = t, o = e === "checkbox";
+  if (o)
+    return {
+      isCheckBoxGroup: o,
+      selectedBoxes: r ? [t] : []
+    };
+  const s = Array.from(t), n = s.every((m) => {
+    const { type: u } = m;
+    return u === "checkbox";
+  }), a = !!s.length && n;
+  if (!a) return { isCheckBoxGroup: a, selectedBoxes: [] };
+  const d = s.filter(
+    ({ checked: m }) => m
+  );
+  return { isCheckBoxGroup: a, selectedBoxes: d };
+}, E = (t) => {
+  const { type: e, multiple: r, options: o } = t, s = e === "select-multiple" && r;
+  if (!s) return { isMultiSelect: s, selectedOptions: [] };
+  const n = [].filter.call(
+    o,
+    ({ selected: a }) => a
+  );
+  return { isMultiSelect: s, selectedOptions: n };
+}, j = new RegExp(
+  [
+    "(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:",
+    "\\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|\"(?:",
+    "[
-\b\v\f-!#-[]-]",
+    '|\\\\[
-	\v\f-])*")@(?:(?:',
+    "[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\\.)+[a-z0-9](?:",
+    "[a-z0-9-]*[a-z0-9])?|\\[(?:(?:(2(5[0-5]|",
+    "[0-4][0-9])|1[0-9][0-9]|[1-9]?[0-9]))\\.){3}(?:",
+    "(2(5[0-5]|[0-4][0-9])|1[0-9][0-9]|[1-9]?",
+    "[0-9])|[a-z0-9-]*[a-z0-9]:(?:",
+    "[
-\b\v\f-!-ZS-]|\\\\[
-",
+    "	\v\f-])+)\\])"
+  ].join("")
+), R = (t) => ({
+  name: "min",
+  validator: (e) => {
+    const { value: r, message: o } = t, { value: s } = e;
+    return { error: !!s && Number(s) < r, message: o };
+  }
+}), A = (t) => ({
+  name: "max",
+  validator: (e) => {
+    const { value: r, message: o } = t, { value: s } = e;
+    return { error: !!s && Number(s) > r, message: o };
+  }
+}), D = (t) => ({
+  name: "email",
+  validator: (e) => {
+    const { message: r } = t || {}, { value: o } = e;
+    return { error: !!o && !j.test(o), message: r };
+  }
+}), U = (t) => ({
+  name: "pattern",
+  validator: (e) => {
+    const { pattern: r, message: o } = t, { value: s } = e;
+    return { error: !!s && !s.match(r), message: o };
+  }
+}), I = (t) => ({
+  name: "required",
+  validator: (e) => {
+    const { message: r } = t || {}, { value: o } = e, {
+      isCheckBoxGroup: s,
+      selectedBoxes: { length: n }
+    } = F(e);
+    if (s) return { error: !n, message: r };
+    const {
+      isMultiSelect: a,
+      selectedOptions: { length: d }
+    } = E(e);
+    return a ? { error: !d, message: r } : { error: !o, message: r };
+  }
+}), T = (t) => ({
+  name: "minLength",
+  validator: (e) => {
+    const { length: r, message: o } = t, { value: s } = e, n = !!s && s.length < r, {
+      isCheckBoxGroup: a,
+      selectedBoxes: { length: d }
+    } = F(e);
+    if (a)
+      return { error: !!d && d < r, message: o };
+    const {
+      isMultiSelect: m,
+      selectedOptions: { length: u }
+    } = E(e);
+    return m ? { error: !!u && u < r, message: o } : { error: n, message: o };
+  }
+}), Z = (t) => ({
+  name: "maxLength",
+  validator: (e) => {
+    const { length: r, message: o } = t, { value: s } = e, n = !!s && s.length > r, {
+      isCheckBoxGroup: a,
+      selectedBoxes: { length: d }
+    } = F(e);
+    if (a)
+      return { error: !!d && d > r, message: o };
+    const {
+      isMultiSelect: m,
+      selectedOptions: { length: u }
+    } = E(e);
+    return m ? { error: !!u && u > r, message: o } : { error: n, message: o };
+  }
+}), J = (t) => ({
+  name: "define",
+  validator: (e) => t(e)
+}), ne = {
+  min: R,
+  max: A,
+  email: D,
+  define: J,
+  pattern: U,
+  required: I,
+  minLength: T,
+  maxLength: Z
+};
+var N = Object.defineProperty, Q = Object.getOwnPropertyDescriptor, W = (t) => {
+  throw TypeError(t);
+}, h = (t, e, r, o) => {
+  for (var s = o > 1 ? void 0 : o ? Q(e, r) : e, n = t.length - 1, a; n >= 0; n--)
+    (a = t[n]) && (s = (o ? a(e, r, s) : a(s)) || s);
+  return o && s && N(e, r, s), s;
+}, X = (t, e, r) => e.has(t) || W("Cannot " + r), i = (t, e, r) => (X(t, e, "read from private field"), r ? r.call(t) : e.get(t)), c = (t, e, r) => e.has(t) ? W("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, r), g, w, y, x, f, _, v, k, B, C, b, O;
+let l = class extends z {
+  constructor() {
+    super(...arguments), this.validationMode = "onBlur", this.initialValues = {}, this.required = !1, this.disabled = !1, this.readOnly = !1, this.formMeta = {}, this.formRef = $(), this._actionFired = !1, c(this, g, () => !!this._actionFired), this.formContext = P, c(this, w, (t) => {
+      const { field: e } = t, { name: r } = e;
+      r && (this.formMeta = { ...this.formMeta, [r]: t });
+    }), c(this, y, (t) => {
+      const { validators: e, errorSetter: r } = this.formMeta[t] || {};
+      e != null && e.length && r([]);
+    }), c(this, x, () => {
+      Object.keys(this.formMeta).forEach((t) => {
+        const { initializer: e } = this.formMeta[t];
+        e(), i(this, y).call(this, t);
+      });
+    }), c(this, f, async (t) => {
+      const { field: e, validators: r, errorSetter: o } = this.formMeta[t] || {}, { disabled: s } = e || {};
+      if (!(r != null && r.length) || s) return [];
+      const n = await K(e, r);
+      return o(n), n;
+    }), c(this, _, async () => await Promise.all(
+      Object.keys(this.formMeta).map(
+        async (t) => await i(this, f).call(this, t)
+      )
+    )), c(this, v, async () => {
+      (await i(this, _).call(this)).some((r) => !!r.length) || this.dispatchEvent(
+        new CustomEvent("submit", {
+          bubbles: !0,
+          composed: !0,
+          detail: Object.keys(this.formMeta).reduce((r, o) => {
+            const {
+              [o]: { field: s }
+            } = this.formMeta, { value: n, disabled: a } = s;
+            return a ? r : { ...r, [o]: n };
+          }, {})
+        })
+      );
+    }), c(this, k, async ({ target: t }) => {
+      if (i(this, g).call(this)) {
+        this._actionFired = !i(this, g).call(this);
+        return;
+      }
+      const { name: e } = t;
+      this.validationMode === "onBlur" && await i(this, f).call(this, e);
+    }), c(this, B, async ({ target: t }) => {
+      const { name: e } = t;
+      this.validationMode === "onChange" ? await i(this, f).call(this, e) : i(this, y).call(this, e);
+    }), c(this, C, async ({ target: t }) => {
+      const { type: e } = t;
+      switch (e) {
+        case "reset":
+          return i(this, x).call(this);
+        case "submit":
+          return i(this, v).call(this);
+      }
+    }), c(this, b, async (t) => {
+      const { target: e, key: r } = t, { name: o } = e;
+      r === "Enter" && this.formMeta[o] && await i(this, v).call(this);
+    }), c(this, O, (t) => {
+      const e = t.target, { name: r } = document.activeElement || {}, o = e.closest("[type=reset]") || e.closest("[type=submit]");
+      this.formMeta[r] && (this._actionFired = !!o);
+    });
+  }
+  willUpdate(t) {
+    Object.keys(this.formContext).some((o) => t.has(o)) && (this.formContext = {
+      required: this.required,
+      readOnly: this.readOnly,
+      disabled: this.disabled,
+      initialValues: this.initialValues,
+      registerField: i(this, w),
+      formBlurHandler: i(this, k),
+      formChangeHandler: i(this, B)
+    });
+  }
+  render() {
+    return L`
+      <form
+        novalidate
+        ${H(this.formRef)}
+        action="${this.action}"
+        method="${this.method}"
+        target="${this.target}"
+        enctype="${this.enctype}"
+        @click="${i(this, C)}"
+        @keydown="${i(this, b)}"
+        @mousedown="${i(this, O)}"
+      >
+        <slot></slot>
+      </form>
+    `;
+  }
+};
+g = /* @__PURE__ */ new WeakMap();
+w = /* @__PURE__ */ new WeakMap();
+y = /* @__PURE__ */ new WeakMap();
+x = /* @__PURE__ */ new WeakMap();
+f = /* @__PURE__ */ new WeakMap();
+_ = /* @__PURE__ */ new WeakMap();
+v = /* @__PURE__ */ new WeakMap();
+k = /* @__PURE__ */ new WeakMap();
+B = /* @__PURE__ */ new WeakMap();
+C = /* @__PURE__ */ new WeakMap();
+b = /* @__PURE__ */ new WeakMap();
+O = /* @__PURE__ */ new WeakMap();
+h([
+  p({ type: String })
+], l.prototype, "validationMode", 2);
+h([
+  p({ type: Object })
+], l.prototype, "initialValues", 2);
+h([
+  p({ type: Boolean })
+], l.prototype, "required", 2);
+h([
+  p({ type: Boolean })
+], l.prototype, "disabled", 2);
+h([
+  p({ type: Boolean })
+], l.prototype, "readOnly", 2);
+h([
+  p({ type: String })
+], l.prototype, "action", 2);
+h([
+  p({ type: String })
+], l.prototype, "method", 2);
+h([
+  p({ type: String })
+], l.prototype, "target", 2);
+h([
+  p({ type: String })
+], l.prototype, "enctype", 2);
+h([
+  S()
+], l.prototype, "_actionFired", 2);
+h([
+  V({ context: G }),
+  S()
+], l.prototype, "formContext", 2);
+l = h([
+  q("bm-form")
+], l);
+export {
+  l as BmForm,
+  ne as validators
+};

package/wip/Form/Form.utils.d.ts

@@ -0,0 +1,2 @@
+export declare const createId: () => string;
+//# sourceMappingURL=Form.utils.d.ts.map

package/wip/Form/Form.utils.js

@@ -0,0 +1,8 @@
+import { p as t } from "../../chunks/constants.jOWREYQE.js";
+const o = () => {
+  const r = Math.random().toString().slice(-5);
+  return `${t}description--${r}`;
+};
+export {
+  o as createId
+};

package/wip/Form/index.d.ts

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

package/wip/Form/index.js

@@ -0,0 +1,7 @@
+import { BmForm as m, validators as e } from "./Form.js";
+import { FormField as F } from "./Form.decorator.js";
+export {
+  m as BmForm,
+  F as FormField,
+  e as validators
+};

package/wip/Label/Label.d.ts

@@ -0,0 +1,43 @@
+import { LitElement } from 'lit';
+import { ThemeTypes } from '@viasat/beam-shared/utils/constants';
+import { Optional } from '@viasat/beam-shared/utils/types';
+/**
+ * @summary `bm-label`
+ *
+ * @slot text - Specify the text for Label
+ * @slot optional - Specify if the Label displays as optional
+ * @slot tooltip - Specify if the icon displays to add a Tooltip
+ */
+export declare class BmLabel extends LitElement {
+    #private;
+    /**
+     * Specify if the Label displays disabled
+     */
+    disabled: boolean;
+    /**
+     * Specify if the Label displays as required
+     */
+    required: boolean;
+    /**
+     * Specify the text for Label
+     */
+    text: Optional<string>;
+    /**
+     * Specify the text for Label
+     */
+    optional: Optional<string>;
+    /**
+     * Specify the theme of the Label. By default it inherits the theme from the parent
+     */
+    theme: Optional<ThemeTypes>;
+    static styles: import('lit').CSSResult;
+    private optionalNodes?;
+    private get hasOptionalSlot();
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'bm-label': BmLabel;
+    }
+}
+//# sourceMappingURL=Label.d.ts.map

package/wip/Label/Label.js

@@ -0,0 +1,87 @@
+import { unsafeCSS as _, LitElement as S, html as u } from "lit";
+import { property as s, queryAssignedNodes as x } from "lit/decorators.js";
+import f from "clsx";
+import { n as P, g as C } from "../../chunks/classNames.Cq_tbDRp.js";
+import { t as $ } from "../../chunks/constants.jOWREYQE.js";
+import { c as q } from "../../chunks/register-custom-element.DHGKOhmA.js";
+const w = ':root,:host,.bm-light,.bm-dark .bm-inverse,[data-bm-theme~=bm-light]{--bm-comp-label-color-text: var(--bm-sem-color-text-secondary, #576775);--bm-comp-label-color-icon: var(--bm-sem-color-icon-secondary, #576775);--bm-comp-label-typo-default: var( --bm-sem-typo-label-sm, 600 .875rem/1.25rem "Source Sans Pro" );--bm-comp-label-typo-optional: var( --bm-sem-typo-body-sm, 400 .875rem/1.25rem "Source Sans Pro" );--bm-comp-label-typo-character-count: var( --bm-sem-typo-body-sm, 400 .875rem/1.25rem "Source Sans Pro" );--bm-comp-label-space-gap: var(--bm-sem-space-25, .25rem);--bm-comp-label-space-bottom: var(--bm-sem-space-50, .5rem);--bm-comp-label-size-icon: var(--bm-sem-size-icon-sm, 1rem)}:host,.bm-dark,.bm-light .bm-inverse,[data-bm-theme~=bm-dark]{--bm-comp-label-color-text: var(--bm-sem-color-text-secondary, #c3cdd5);--bm-comp-label-color-icon: var(--bm-sem-color-icon-secondary, #c3cdd5);--bm-comp-label-typo-default: var( --bm-sem-typo-label-sm, 600 .875rem/1.25rem "Source Sans Pro" );--bm-comp-label-typo-optional: var( --bm-sem-typo-body-sm, 400 .875rem/1.25rem "Source Sans Pro" );--bm-comp-label-typo-character-count: var( --bm-sem-typo-body-sm, 400 .875rem/1.25rem "Source Sans Pro" );--bm-comp-label-space-gap: var(--bm-sem-space-25, .25rem);--bm-comp-label-space-bottom: var(--bm-sem-space-50, .5rem);--bm-comp-label-size-icon: var(--bm-sem-size-icon-sm, 1rem)}.bm-label{color:var(--bm-comp-label-color-text);font:var(--bm-comp-label-typo-default);margin-bottom:var(--bm-comp-label-space-bottom, var(--bm-sem-space-0))}.bm-label label{cursor:var(--bm-comp-label-cursor, default);pointer-events:var(--bm-comp-label-pointer-events, inherit)}.bm-label--disabled label{opacity:var(--bm-sem-opacity-disabled)}.bm-label--required label:after{content:"*";color:var(--bm-sem-color-text-negative)}.bm-label--required label:has(:last-child):after{content:""}.bm-label--required label:has(:last-child)>*:last-child:after{content:"*";color:var(--bm-sem-color-text-negative)}.bm-label__optional{font:var(--bm-comp-label-typo-optional);margin-left:var(--bm-comp-label-space-gap)}.bm-label__tooltip{vertical-align:top;display:inline-block;margin-inline-start:var(--bm-comp-label-space-gap)}.bm-label__tooltip button{color:var(--bm-comp-tooltip-color-icon-trigger)}.bm-label__tooltip svg{height:var(--bm-comp-label-size-icon);width:var(--bm-comp-label-size-icon)}.bm-label--no-box{display:contents}';
+var k = Object.defineProperty, E = Object.getOwnPropertyDescriptor, g = (e) => {
+  throw TypeError(e);
+}, r = (e, a, o, b) => {
+  for (var l = b > 1 ? void 0 : b ? E(a, o) : a, c = e.length - 1, n; c >= 0; c--)
+    (n = e[c]) && (l = (b ? n(a, o, l) : n(l)) || l);
+  return b && l && k(a, o, l), l;
+}, O = (e, a, o) => a.has(e) || g("Cannot " + o), m = (e, a, o) => (O(e, a, "read from private field"), o ? o.call(e) : a.get(e)), i = (e, a, o) => a.has(e) ? g("Cannot add the same private member more than once") : a instanceof WeakSet ? a.add(e) : a.set(e, o), p, h, v, y;
+const { baseClassNamePrefix: N, subElementClassPrefix: z, classModifierPrefix: d } = C("label");
+let t = class extends S {
+  constructor() {
+    super(...arguments), this.disabled = !1, this.required = !1, i(this, p, () => !!(this.hasOptionalSlot || this.optional)), i(this, h, () => this.requestUpdate()), i(this, v, () => {
+      this.dispatchEvent(
+        new CustomEvent("bm-label-click", {
+          bubbles: !0,
+          composed: !0
+        })
+      );
+    }), i(this, y, () => u`
+      <span
+        class="${f(
+      `${z}optional`,
+      !m(this, p).call(this) && `${d}no-box`
+    )}"
+      >
+        <slot name="optional" @slotchange=${m(this, h)}>
+          ${this.optional}
+        </slot>
+      </span>
+    `);
+  }
+  get hasOptionalSlot() {
+    return P(this.optionalNodes);
+  }
+  render() {
+    const e = f(
+      N,
+      this.theme && $(this.theme),
+      this.disabled && `${d}disabled`,
+      this.required && !m(this, p).call(this) && `${d}required`
+    );
+    return u`
+      <div class="${e}">
+        <label @click="${m(this, v)}">
+          <slot name="text">${this.text}</slot>
+          ${m(this, y).call(this)}
+        </label>
+        <slot name="tooltip"></slot>
+      </div>
+    `;
+  }
+};
+p = /* @__PURE__ */ new WeakMap();
+h = /* @__PURE__ */ new WeakMap();
+v = /* @__PURE__ */ new WeakMap();
+y = /* @__PURE__ */ new WeakMap();
+t.styles = _(w);
+r([
+  s({ type: Boolean })
+], t.prototype, "disabled", 2);
+r([
+  s({ type: Boolean })
+], t.prototype, "required", 2);
+r([
+  s({ type: String })
+], t.prototype, "text", 2);
+r([
+  s({ type: String })
+], t.prototype, "optional", 2);
+r([
+  s({ type: String })
+], t.prototype, "theme", 2);
+r([
+  x({ slot: "optional", flatten: !0 })
+], t.prototype, "optionalNodes", 2);
+t = r([
+  q("bm-label")
+], t);
+export {
+  t as BmLabel
+};

package/wip/Label/index.d.ts

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

package/wip/Label/index.js

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

package/wip/NativeSelect/NativeSelect.d.ts

@@ -0,0 +1,69 @@
+import { TemplateResult } from 'lit';
+import { ThemeTypes } from '@viasat/beam-shared/utils/constants';
+import { Optional } from '@viasat/beam-shared/utils/types';
+import { FinalizeAssociatedResult } from '../../../utils/mixins/types';
+import { FormField } from '../Form/Form.decorator';
+/**
+ * @summary `bm-native-select`
+ *
+ * @slot slot - Specify Options for NativeSelect
+ * @slot label - Specify Label for NativeSelect
+ * @slot helper-text - Specify HelperText for NativeSelect
+ */
+export declare class BmNativeSelect extends FormField {
+    #private;
+    /**
+     * Specify if NativeSelect is a required input
+     * @default false
+     */
+    required: boolean;
+    /**
+     * Specify if NativeSelect displays in a read-only state
+     * @default false
+     */
+    readOnly: boolean;
+    /**
+     * Specify if NativeSelect displays in a disabled state
+     * @default false
+     */
+    disabled: boolean;
+    /**
+     * Specify error text and display error state of a NativeSelect
+     */
+    error: Optional<string>;
+    /**
+     * Specify if NativeSelect is fluid
+     * @default false
+     */
+    fluid: boolean;
+    /**
+     * Specify the width of NativeSelect
+     */
+    width: Optional<string>;
+    /**
+     * Specify if overflow displays ellipsis
+     * @default true
+     */
+    ellipse: boolean;
+    /**
+     * Specify if the NativeSelect displays with an asterisk
+     * @default false
+     */
+    hideRequiredMarker: boolean;
+    /**
+     * Specify the theme of the NativeSelect. By default it inherits the theme from the parent
+     */
+    theme: Optional<ThemeTypes>;
+    static styles: import('lit').CSSResult;
+    private _selectLabel;
+    private _selectHelperText;
+    updated(cP: Map<string, unknown>): void;
+    finalizeAssociatedCallback(value: string): FinalizeAssociatedResult;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'bm-native-select': BmNativeSelect;
+    }
+}
+//# sourceMappingURL=NativeSelect.d.ts.map