@viasat/beam-web-components 2.0.0

package/local/wip/Form/Form.js

@@ -0,0 +1,288 @@
+import { e as $ } from "../../chunks/provide.i2FlUkOu.js";
+import { a as V, x as z } from "../../chunks/lit-element.CJtt9wj5.js";
+import { n as p, c as L } from "../../chunks/register-custom-element.vod7zfGv.js";
+import { r as S } from "../../chunks/state.CqiuSzAl.js";
+import { e as H, n as q } from "../../chunks/ref.B7e1Hu4F.js";
+import { bmFormContext as G, bmFormInitials as P } from "./Form.context.js";
+const K = async (t, e) => (await Promise.all(
+  e.map(
+    async (s) => {
+      const { validator: o } = s;
+      return o(t);
+    }
+  )
+)).reduce(
+  (s, o) => {
+    const { error: n, message: a } = o;
+    return n ? [...s, a] : s;
+  },
+  []
+), F = (t) => {
+  const { type: e, checked: r } = t, s = e === "checkbox";
+  if (s)
+    return {
+      isCheckBoxGroup: s,
+      selectedBoxes: r ? [t] : []
+    };
+  const o = Array.from(t), n = o.every((m) => {
+    const { type: u } = m;
+    return u === "checkbox";
+  }), a = !!o.length && n;
+  if (!a) return { isCheckBoxGroup: a, selectedBoxes: [] };
+  const d = o.filter(
+    ({ checked: m }) => m
+  );
+  return { isCheckBoxGroup: a, selectedBoxes: d };
+}, E = (t) => {
+  const { type: e, multiple: r, options: s } = t, o = e === "select-multiple" && r;
+  if (!o) return { isMultiSelect: o, selectedOptions: [] };
+  const n = [].filter.call(
+    s,
+    ({ selected: a }) => a
+  );
+  return { isMultiSelect: o, 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("")
+), A = (t) => ({
+  name: "min",
+  validator: (e) => {
+    const { value: r, message: s } = t, { value: o } = e;
+    return { error: !!o && Number(o) < r, message: s };
+  }
+}), D = (t) => ({
+  name: "max",
+  validator: (e) => {
+    const { value: r, message: s } = t, { value: o } = e;
+    return { error: !!o && Number(o) > r, message: s };
+  }
+}), R = (t) => ({
+  name: "email",
+  validator: (e) => {
+    const { message: r } = t || {}, { value: s } = e;
+    return { error: !!s && !j.test(s), message: r };
+  }
+}), U = (t) => ({
+  name: "pattern",
+  validator: (e) => {
+    const { pattern: r, message: s } = t, { value: o } = e;
+    return { error: !!o && !o.match(r), message: s };
+  }
+}), I = (t) => ({
+  name: "required",
+  validator: (e) => {
+    const { message: r } = t || {}, { value: s } = e, {
+      isCheckBoxGroup: o,
+      selectedBoxes: { length: n }
+    } = F(e);
+    if (o) return { error: !n, message: r };
+    const {
+      isMultiSelect: a,
+      selectedOptions: { length: d }
+    } = E(e);
+    return a ? { error: !d, message: r } : { error: !s, message: r };
+  }
+}), T = (t) => ({
+  name: "minLength",
+  validator: (e) => {
+    const { length: r, message: s } = t, { value: o } = e, n = !!o && o.length < r, {
+      isCheckBoxGroup: a,
+      selectedBoxes: { length: d }
+    } = F(e);
+    if (a)
+      return { error: !!d && d < r, message: s };
+    const {
+      isMultiSelect: m,
+      selectedOptions: { length: u }
+    } = E(e);
+    return m ? { error: !!u && u < r, message: s } : { error: n, message: s };
+  }
+}), Z = (t) => ({
+  name: "maxLength",
+  validator: (e) => {
+    const { length: r, message: s } = t, { value: o } = e, n = !!o && o.length > r, {
+      isCheckBoxGroup: a,
+      selectedBoxes: { length: d }
+    } = F(e);
+    if (a)
+      return { error: !!d && d > r, message: s };
+    const {
+      isMultiSelect: m,
+      selectedOptions: { length: u }
+    } = E(e);
+    return m ? { error: !!u && u > r, message: s } : { error: n, message: s };
+  }
+}), J = (t) => ({
+  name: "define",
+  validator: (e) => t(e)
+}), ne = {
+  min: A,
+  max: D,
+  email: R,
+  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, s) => {
+  for (var o = s > 1 ? void 0 : s ? Q(e, r) : e, n = t.length - 1, a; n >= 0; n--)
+    (a = t[n]) && (o = (s ? a(e, r, o) : a(o)) || o);
+  return s && o && N(e, r, o), o;
+}, 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, x, y, w, f, _, v, k, B, C, b, O;
+let l = class extends V {
+  constructor() {
+    super(...arguments), this.validationMode = "onBlur", this.initialValues = {}, this.required = !1, this.disabled = !1, this.readOnly = !1, this.formMeta = {}, this.formRef = H(), this._actionFired = !1, c(this, g, () => !!this._actionFired), this.formContext = P, c(this, x, (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, w, () => {
+      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: s } = this.formMeta[t] || {}, { disabled: o } = e || {};
+      if (!(r != null && r.length) || o) return [];
+      const n = await K(e, r);
+      return s(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, s) => {
+            const {
+              [s]: { field: o }
+            } = this.formMeta, { value: n, disabled: a } = o;
+            return a ? r : { ...r, [s]: 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, w).call(this);
+        case "submit":
+          return i(this, v).call(this);
+      }
+    }), c(this, b, async (t) => {
+      const { target: e, key: r } = t, { name: s } = e;
+      r === "Enter" && this.formMeta[s] && await i(this, v).call(this);
+    }), c(this, O, (t) => {
+      const e = t.target, { name: r } = document.activeElement || {}, s = e.closest("[type=reset]") || e.closest("[type=submit]");
+      this.formMeta[r] && (this._actionFired = !!s);
+    });
+  }
+  willUpdate(t) {
+    Object.keys(this.formContext).some((s) => t.has(s)) && (this.formContext = {
+      required: this.required,
+      readOnly: this.readOnly,
+      disabled: this.disabled,
+      initialValues: this.initialValues,
+      registerField: i(this, x),
+      formBlurHandler: i(this, k),
+      formChangeHandler: i(this, B)
+    });
+  }
+  render() {
+    return z`
+      <form
+        novalidate
+        ${q(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();
+x = /* @__PURE__ */ new WeakMap();
+y = /* @__PURE__ */ new WeakMap();
+w = /* @__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([
+  $({ context: G }),
+  S()
+], l.prototype, "formContext", 2);
+l = h([
+  L("bm-form")
+], l);
+export {
+  l as BmForm,
+  ne as validators
+};

package/local/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/local/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/local/wip/Label/Label.js

@@ -0,0 +1,86 @@
+import { r as g, a as x, x as u } from "../../chunks/lit-element.CJtt9wj5.js";
+import { n as m, c as S } from "../../chunks/register-custom-element.vod7zfGv.js";
+import { n as P } from "../../chunks/query-assigned-nodes.Dgvsf6BR.js";
+import { n as $, c as f, g as C } from "../../chunks/classNames.C6fNrXWF.js";
+import { t as w } from "../../chunks/constants.jOWREYQE.js";
+const k = ':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 q = Object.defineProperty, O = Object.getOwnPropertyDescriptor, _ = (e) => {
+  throw TypeError(e);
+}, r = (e, a, o, b) => {
+  for (var l = b > 1 ? void 0 : b ? O(a, o) : a, p = e.length - 1, n; p >= 0; p--)
+    (n = e[p]) && (l = (b ? n(a, o, l) : n(l)) || l);
+  return b && l && q(a, o, l), l;
+}, E = (e, a, o) => a.has(e) || _("Cannot " + o), s = (e, a, o) => (E(e, a, "read from private field"), o ? o.call(e) : a.get(e)), i = (e, a, o) => a.has(e) ? _("Cannot add the same private member more than once") : a instanceof WeakSet ? a.add(e) : a.set(e, o), c, h, v, y;
+const { baseClassNamePrefix: z, subElementClassPrefix: M, classModifierPrefix: d } = C("label");
+let t = class extends x {
+  constructor() {
+    super(...arguments), this.disabled = !1, this.required = !1, i(this, c, () => !!(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(
+      `${M}optional`,
+      !s(this, c).call(this) && `${d}no-box`
+    )}"
+      >
+        <slot name="optional" @slotchange=${s(this, h)}>
+          ${this.optional}
+        </slot>
+      </span>
+    `);
+  }
+  get hasOptionalSlot() {
+    return $(this.optionalNodes);
+  }
+  render() {
+    const e = f(
+      z,
+      this.theme && w(this.theme),
+      this.disabled && `${d}disabled`,
+      this.required && !s(this, c).call(this) && `${d}required`
+    );
+    return u`
+      <div class="${e}">
+        <label @click="${s(this, v)}">
+          <slot name="text">${this.text}</slot>
+          ${s(this, y).call(this)}
+        </label>
+        <slot name="tooltip"></slot>
+      </div>
+    `;
+  }
+};
+c = /* @__PURE__ */ new WeakMap();
+h = /* @__PURE__ */ new WeakMap();
+v = /* @__PURE__ */ new WeakMap();
+y = /* @__PURE__ */ new WeakMap();
+t.styles = g(k);
+r([
+  m({ type: Boolean })
+], t.prototype, "disabled", 2);
+r([
+  m({ type: Boolean })
+], t.prototype, "required", 2);
+r([
+  m({ type: String })
+], t.prototype, "text", 2);
+r([
+  m({ type: String })
+], t.prototype, "optional", 2);
+r([
+  m({ type: String })
+], t.prototype, "theme", 2);
+r([
+  P({ slot: "optional", flatten: !0 })
+], t.prototype, "optionalNodes", 2);
+t = r([
+  S("bm-label")
+], t);
+export {
+  t as BmLabel
+};

package/local/wip/Label/index.js

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

package/local/wip/NativeSelect/NativeSelect.js

@@ -0,0 +1,162 @@
+import { r as I, x as C } from "../../chunks/lit-element.CJtt9wj5.js";
+import { n as s, c as O } from "../../chunks/register-custom-element.vod7zfGv.js";
+import { o as y } from "../../chunks/query-assigned-elements.Drkgpk9q.js";
+import { n as T } from "../../chunks/ref.B7e1Hu4F.js";
+import { i as k, p as u, a as w, c as N, g as S } from "../../chunks/classNames.C6fNrXWF.js";
+import { t as L } from "../../chunks/constants.jOWREYQE.js";
+import { r as E } from "../../chunks/delegate.baxDQosr.js";
+import { b as Q } from "../../chunks/helpers.BWcXAteC.js";
+import { FormField as _ } from "../Form/Form.decorator.js";
+import "../../chunks/index.Bz1Jq4c2.js";
+const U = (e, o) => {
+  if (!k() || !e) return;
+  const { options: r = [] } = e;
+  Array.prototype.forEach.call(r, (i) => {
+    const { disabled: m, dataset: l } = i, { disabled: p } = l;
+    p || (i.dataset.disabled = String(m));
+    const { disabled: v } = l;
+    i.disabled = o || v === String(!0);
+  });
+}, $ = (e) => {
+  const o = !!e.match(new RegExp("^\\p{L}$", "u")), r = [" ", "ArrowUp", "ArrowDown"].includes(e);
+  return o || r;
+}, Y = (e) => (o) => {
+  const r = o instanceof HTMLOptionElement, i = o instanceof HTMLOptGroupElement;
+  (r || i) && e.add(o);
+}, B = ':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-native-select{--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-native-select--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-native-select--fluid{max-width:100%}.bm-native-select--ellipsis .bm-native-select__field .bm-native-select__input{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.bm-native-select__field{position:relative;cursor:var(--bm-text-field-cursor, default)}.bm-native-select__field:after{content:"";position:absolute;pointer-events:none;width:.625rem;height:.3125rem;-webkit-mask-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iNSIgdmlld0JveD0iMCAwIDEwIDUiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0wLjE4MjgzMiAwLjMxMjQ2NEMwLjExNDQwOSAwLjM5NzkxNSAwLjA2MzQ5MzEgMC40OTYwMSAwLjAzMjk5NCAwLjYwMTE0NUMwLjAwMjQ5NDk0IDAuNzA2MjggLTAuMDA2OTg5NjIgMC44MTYzOTUgMC4wMDUwODIyOCAwLjkyNTE5NkMwLjAxNzE1NDIgMS4wMzQgMC4wNTA1NDU5IDEuMTM5MzYgMC4xMDMzNSAxLjIzNTI1QzAuMTU2MTUzIDEuMzMxMTQgMC4yMjczMzQgMS40MTU2OSAwLjMxMjgyNSAxLjQ4NDA2TDQuNDc5MjUgNC44MTcyQzQuNjI3MDQgNC45MzU1MyA0LjgxMDcyIDUgNS4wMDAwNSA1QzUuMTg5MzcgNSA1LjM3MzA2IDQuOTM1NTMgNS41MjA4NSA0LjgxNzJMOS42ODcyNyAxLjQ4NDA2QzkuODU5ODcgMS4zNDU5NCA5Ljk3MDU0IDEuMTQ0OSA5Ljk5NDkxIDAuOTI1MTg1QzEwLjAxOTMgMC43MDU0NjggOS45NTUzOSAwLjQ4NTA2NiA5LjgxNzI2IDAuMzEyNDY0QzkuNjc5MTQgMC4xMzk4NjMgOS40NzgxIDAuMDI5MjAwNyA5LjI1ODM5IDAuMDA0ODIyNDJDOS4wMzg2NyAtMC4wMTk1NTU5IDguODE4MjcgMC4wNDQzNDY1IDguNjQ1NjcgMC4xODI0NzJMNS4wMDAwNSAzLjA5ODk3TDEuMzU0NDMgMC4xODI0NzJDMS4yNjg5OCAwLjExNDA0OCAxLjE3MDg4IDAuMDYzMTMzIDEuMDY1NzUgMC4wMzI2MzM5QzAuOTYwNjE0IDAuMDAyMTM0ODEgMC44NTA1IC0wLjAwNzM1MDQgMC43NDE2OTggMC4wMDQ3MjE1QzAuNjMyODk2IDAuMDE2NzkzNCAwLjUyNzUzOSAwLjA1MDE4NTggMC40MzE2NDYgMC4xMDI5ODlDMC4zMzU3NTQgMC4xNTU3OTMgMC4yNTEyMDYgMC4yMjY5NzQgMC4xODI4MzIgMC4zMTI0NjRWMC4zMTI0NjRaIiBmaWxsPSJibGFjayIvPgo8L3N2Zz4K);-webkit-mask-size:cover;-webkit-mask-position:center;-webkit-mask-repeat:no-repeat;mask-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iNSIgdmlld0JveD0iMCAwIDEwIDUiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0wLjE4MjgzMiAwLjMxMjQ2NEMwLjExNDQwOSAwLjM5NzkxNSAwLjA2MzQ5MzEgMC40OTYwMSAwLjAzMjk5NCAwLjYwMTE0NUMwLjAwMjQ5NDk0IDAuNzA2MjggLTAuMDA2OTg5NjIgMC44MTYzOTUgMC4wMDUwODIyOCAwLjkyNTE5NkMwLjAxNzE1NDIgMS4wMzQgMC4wNTA1NDU5IDEuMTM5MzYgMC4xMDMzNSAxLjIzNTI1QzAuMTU2MTUzIDEuMzMxMTQgMC4yMjczMzQgMS40MTU2OSAwLjMxMjgyNSAxLjQ4NDA2TDQuNDc5MjUgNC44MTcyQzQuNjI3MDQgNC45MzU1MyA0LjgxMDcyIDUgNS4wMDAwNSA1QzUuMTg5MzcgNSA1LjM3MzA2IDQuOTM1NTMgNS41MjA4NSA0LjgxNzJMOS42ODcyNyAxLjQ4NDA2QzkuODU5ODcgMS4zNDU5NCA5Ljk3MDU0IDEuMTQ0OSA5Ljk5NDkxIDAuOTI1MTg1QzEwLjAxOTMgMC43MDU0NjggOS45NTUzOSAwLjQ4NTA2NiA5LjgxNzI2IDAuMzEyNDY0QzkuNjc5MTQgMC4xMzk4NjMgOS40NzgxIDAuMDI5MjAwNyA5LjI1ODM5IDAuMDA0ODIyNDJDOS4wMzg2NyAtMC4wMTk1NTU5IDguODE4MjcgMC4wNDQzNDY1IDguNjQ1NjcgMC4xODI0NzJMNS4wMDAwNSAzLjA5ODk3TDEuMzU0NDMgMC4xODI0NzJDMS4yNjg5OCAwLjExNDA0OCAxLjE3MDg4IDAuMDYzMTMzIDEuMDY1NzUgMC4wMzI2MzM5QzAuOTYwNjE0IDAuMDAyMTM0ODEgMC44NTA1IC0wLjAwNzM1MDQgMC43NDE2OTggMC4wMDQ3MjE1QzAuNjMyODk2IDAuMDE2NzkzNCAwLjUyNzUzOSAwLjA1MDE4NTggMC40MzE2NDYgMC4xMDI5ODlDMC4zMzU3NTQgMC4xNTU3OTMgMC4yNTEyMDYgMC4yMjY5NzQgMC4xODI4MzIgMC4zMTI0NjRWMC4zMTI0NjRaIiBmaWxsPSJibGFjayIvPgo8L3N2Zz4K);mask-size:cover;mask-position:center;mask-repeat:no-repeat;background-color:var(--bm-comp-input-color-icon);inset-inline-end:var(--bm-comp-input-space-field-x);inset-block-start:calc(var(--bm-comp-input-space-field-x) + .3125rem / 2)}.bm-native-select--error .bm-native-select__field:after{background-color:var(--bm-comp-input-color-icon)}.bm-native-select--error .bm-native-select__field .bm-native-select__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-native-select--read-only .bm-native-select__field:after{background-color:var(--bm-comp-input-color-icon-disabled)}.bm-native-select--read-only .bm-native-select__field .bm-native-select__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-native-select--disabled .bm-native-select__field:after{background-color:var(--bm-comp-input-color-icon-disabled)}.bm-native-select--disabled .bm-native-select__field .bm-native-select__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-native-select__field .bm-native-select__input{width:100%;display:block;appearance:none;-moz-appearance:none;-webkit-appearance:none;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, pointer);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);transform:translate3d(var(--bm-sem-space-0),var(--bm-sem-space-0),var(--bm-sem-space-0));padding-block:var(--bm-comp-input-space-field-y);padding-inline:var(--bm-comp-input-space-field-x) calc(.625rem + var(--bm-comp-input-space-field-gap) + var(--bm-comp-input-space-field-x))}.bm-native-select__field .bm-native-select__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 P = Object.defineProperty, R = Object.getOwnPropertyDescriptor, A = (e) => {
+  throw TypeError(e);
+}, a = (e, o, r, i) => {
+  for (var m = i > 1 ? void 0 : i ? R(o, r) : o, l = e.length - 1, p; l >= 0; l--)
+    (p = e[l]) && (m = (i ? p(o, r, m) : p(m)) || m);
+  return i && m && P(o, r, m), m;
+}, G = (e, o, r) => o.has(e) || A("Cannot " + r), t = (e, o, r) => (G(e, o, "read from private field"), r ? r.call(e) : o.get(e)), b = (e, o, r) => o.has(e) ? A("Cannot add the same private member more than once") : o instanceof WeakSet ? o.add(e) : o.set(e, r), n, d, M, f, g, D;
+const { baseClassNamePrefix: W, subElementClassPrefix: z, classModifierPrefix: h } = S("native-select");
+let c = class extends _ {
+  constructor() {
+    super(...arguments), this.required = !1, this.readOnly = !1, this.disabled = !1, this.fluid = !1, this.ellipse = !0, this.hideRequiredMarker = !1, b(this, n, () => {
+      var e;
+      return !!(this.disabled || (e = this.formContext) != null && e.disabled);
+    }), b(this, d, () => {
+      var e;
+      return !!(this.readOnly || (e = this.formContext) != null && e.readOnly);
+    }), b(this, M, () => {
+      var e;
+      return !!(this.required || (e = this.formContext) != null && e.required);
+    }), b(this, f, (e) => {
+      const { key: o } = e;
+      this.submitFormByEnter(e), t(this, d).call(this) && $(o) && e.preventDefault();
+    }), b(this, g, (e) => {
+      t(this, d).call(this) && (e.preventDefault(), this.forwardLabelFocus());
+    }), b(this, D, ({ target: e }) => {
+      const { value: o } = this.formFieldRef;
+      Q(e).forEach(Y(o));
+      const { value: i } = o;
+      this.contextBrowserValue = i, this.setContextValue(), U(o, t(this, d).call(this));
+    });
+  }
+  updated(e) {
+    const [o] = this._selectLabel, [r] = this._selectHelperText, { decorate: i } = w(o), { decorate: m } = w(r), l = u(e, ["value"]), p = u(e, ["validationRules"]), v = u(e, ["formContext", "disabled"]), x = u(e, [
+      "formContext",
+      "required",
+      "hideRequiredMarker"
+    ]), j = u(e, ["formContext"]) && this.contextInitialsChanged();
+    (l || j) && this.setContextValue(), v && (i({ disabled: t(this, n).call(this) }), m({ disabled: t(this, n).call(this) })), p && this.setContextValidation(), x && i({ required: t(this, M).call(this) && !this.hideRequiredMarker });
+  }
+  finalizeAssociatedCallback(e) {
+    return {
+      ctxValue: e || this.contextBrowserValue
+    };
+  }
+  render() {
+    const { ariaInvalid: e } = this, { length: o } = this.validationErrors(), r = typeof this.error == "string" || !!o, i = N(
+      this.helperTextId,
+      this.error && this.errorId,
+      this.validationErrorShown() && this.validationErrorsId
+    ), m = N(
+      W,
+      r && `${h}error`,
+      this.theme && L(this.theme),
+      this.fluid && `${h}fluid`,
+      this.ellipse && `${h}ellipsis`,
+      t(this, n).call(this) && `${h}disabled`,
+      t(this, d).call(this) && `${h}read-only`
+    );
+    return C`
+      <div class="${m}" style="max-width: ${this.width}">
+        <slot name="label" id="${this.labelId}"></slot>
+        <div class="${z}field">
+          <select
+            id="${this.id}"
+            name="${this.name}"
+            ${T(this.formFieldRef)}
+            ?required="${t(this, M).call(this)}"
+            ?disabled="${t(this, n).call(this)}"
+            @keydown="${t(this, f)}"
+            aria-labelledby="${this.labelId}"
+            aria-label="${this.inputAriaLabel}"
+            aria-readonly="${t(this, d).call(this)}"
+            @blur="${this.validateFieldOnBlur}"
+            aria-describedby="${i}"
+            class="${z}input"
+            @mousedown="${t(this, g)}"
+            @change="${this.validateFieldOnChange}"
+            aria-invalid="${e || r}"
+            aria-disabled="${t(this, n).call(this) || t(this, d).call(this)}"
+          ></select>
+          <slot @slotchange="${t(this, D)}"></slot>
+        </div>
+        <slot name="helper-text" id="${this.helperTextId}"></slot>
+        ${this.renderError(this.error, t(this, n).call(this))}
+        ${this.renderValidationErrors()}
+      </div>
+    `;
+  }
+};
+n = /* @__PURE__ */ new WeakMap();
+d = /* @__PURE__ */ new WeakMap();
+M = /* @__PURE__ */ new WeakMap();
+f = /* @__PURE__ */ new WeakMap();
+g = /* @__PURE__ */ new WeakMap();
+D = /* @__PURE__ */ new WeakMap();
+E(c);
+c.styles = I(B);
+a([
+  s({ type: Boolean })
+], c.prototype, "required", 2);
+a([
+  s({ type: Boolean })
+], c.prototype, "readOnly", 2);
+a([
+  s({ type: Boolean })
+], c.prototype, "disabled", 2);
+a([
+  s({ type: String })
+], c.prototype, "error", 2);
+a([
+  s({ type: Boolean })
+], c.prototype, "fluid", 2);
+a([
+  s({ type: String })
+], c.prototype, "width", 2);
+a([
+  s({ type: Boolean })
+], c.prototype, "ellipse", 2);
+a([
+  s({ type: Boolean })
+], c.prototype, "hideRequiredMarker", 2);
+a([
+  s({ type: String })
+], c.prototype, "theme", 2);
+a([
+  y({ slot: "label" })
+], c.prototype, "_selectLabel", 2);
+a([
+  y({ slot: "helper-text" })
+], c.prototype, "_selectHelperText", 2);
+c = a([
+  O("bm-native-select")
+], c);
+export {
+  c as BmNativeSelect
+};

package/local/wip/NativeSelect/index.js

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