@viasat/beam-web-components 2.0.0

package/local/wip/RadioButton/RadioButton.js

@@ -0,0 +1,123 @@
+import { c as g } from "../../chunks/consume.Ce9k1-wN.js";
+import { r as y, a as _, E as s, x as l } from "../../chunks/lit-element.CJtt9wj5.js";
+import { n as a, c as w } from "../../chunks/register-custom-element.vod7zfGv.js";
+import { e as x, n as k } from "../../chunks/ref.B7e1Hu4F.js";
+import { c as z, g as C } from "../../chunks/classNames.C6fNrXWF.js";
+import { t as $ } from "../../chunks/constants.jOWREYQE.js";
+import { r as S } from "../../chunks/delegate.baxDQosr.js";
+import { inputChoiceGroupContext as O } from "../../InputChoiceGroup/InputChoiceGroup.context.js";
+const P = ':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-radio-button{display:inline-flex}.bm-radio-button--read-only{--bm-input-choice-cursor: default;--bm-input-choice-label-cursor: default;--bm-input-choice-label-pointer-events: none}.bm-radio-button--disabled{--bm-input-choice-cursor: not-allowed;--bm-input-choice-label-cursor: not-allowed}.bm-radio-button__label{display:inherit;word-break:break-word;color:var(--bm-comp-input-color-text);font:var(--bm-comp-input-typo-default);gap:var(--bm-comp-input-space-choice-gap-inside);cursor:var(--bm-input-choice-label-cursor, pointer);pointer-events:var(--bm-input-choice-label-pointer-events, auto)}.bm-radio-button--error .bm-radio-button__label{color:var(--bm-comp-input-color-text)}.bm-radio-button--error .bm-radio-button__label .bm-radio-button__input,.bm-radio-button--error .bm-radio-button__label .bm-radio-button__input:checked{border-color:var(--bm-comp-input-color-border-error);background-color:var(--bm-comp-input-color-bg)}.bm-radio-button--error .bm-radio-button__label .bm-radio-button__input:checked:after{background-color:var(--bm-comp-input-color-choice-radio-selected-inner-circle-error)}.bm-radio-button--read-only .bm-radio-button__label{color:var(--bm-comp-input-color-text)}.bm-radio-button--read-only .bm-radio-button__label .bm-radio-button__input,.bm-radio-button--read-only .bm-radio-button__label .bm-radio-button__input:checked{border-color:var(--bm-comp-input-color-border-disabled);background-color:var(--bm-comp-input-color-bg-disabled)}.bm-radio-button--read-only .bm-radio-button__label .bm-radio-button__input:checked:after{background-color:var(--bm-comp-input-color-icon)}.bm-radio-button--disabled .bm-radio-button__label{color:var(--bm-comp-input-color-text-disabled)}.bm-radio-button--disabled .bm-radio-button__label .bm-radio-button__input,.bm-radio-button--disabled .bm-radio-button__label .bm-radio-button__input:checked{border-color:var(--bm-comp-input-color-border-disabled);background-color:var(--bm-comp-input-color-bg-disabled)}.bm-radio-button--disabled .bm-radio-button__label .bm-radio-button__input:checked:after{background-color:var(--bm-comp-input-color-icon-disabled)}.bm-radio-button--with-label .bm-radio-button__label .bm-radio-button__input{margin:var(--bm-comp-input-space-choice-nudge) var(--bm-sem-space-0)}.bm-radio-button__label .bm-radio-button__input{appearance:none;-moz-appearance:none;-webkit-appearance:none;position:relative;margin:var(--bm-sem-space-0);flex-shrink:var(--bm-sem-space-0);cursor:var(--bm-input-choice-cursor, pointer);width:var(--bm-comp-input-size-choice-radio);height:var(--bm-comp-input-size-choice-radio);background-color:var(--bm-comp-input-color-bg);border-style:solid;border-color:var(--bm-comp-input-color-border);border-radius:var(--bm-comp-input-radius-choice-radio);border-width:var(--bm-comp-input-border-width-field-default)}.bm-radio-button__label .bm-radio-button__input:focus-visible{outline-offset:var(--bm-sem-size-focus-offset);outline:var(--bm-sem-border-width-focus) solid var(--bm-sem-color-border-focus)}.bm-radio-button__label .bm-radio-button__input:checked{border-color:var(--bm-comp-input-color-choice-radio-selected-border);background-color:var(--bm-comp-input-color-choice-radio-selected-bg)}.bm-radio-button__label .bm-radio-button__input:checked:after{background-color:var(--bm-comp-input-color-choice-radio-selected-inner-circle)}.bm-radio-button__label .bm-radio-button__input:after{content:"";position:absolute;width:var(--bm-comp-input-size-choice-radio-inside);height:var(--bm-comp-input-size-choice-radio-inside);border-radius:var(--bm-comp-input-radius-choice-radio);top:calc(50% - var(--bm-comp-input-size-choice-radio-inside) / 2);left:calc(50% - var(--bm-comp-input-size-choice-radio-inside) / 2)}';
+var B = Object.defineProperty, D = Object.getOwnPropertyDescriptor, h = (e) => {
+  throw TypeError(e);
+}, t = (e, o, r, c) => {
+  for (var m = c > 1 ? void 0 : c ? D(o, r) : o, b = e.length - 1, n; b >= 0; b--)
+    (n = e[b]) && (m = (c ? n(o, r, m) : n(m)) || m);
+  return c && m && B(o, r, m), m;
+}, G = (e, o, r) => o.has(e) || h("Cannot " + r), E = (e, o, r) => (G(e, o, "read from private field"), r ? r.call(e) : o.get(e)), K = (e, o, r) => o.has(e) ? h("Cannot add the same private member more than once") : o instanceof WeakSet ? o.add(e) : o.set(e, r), d;
+const { baseClassNamePrefix: R, subElementClassPrefix: u, classModifierPrefix: p } = C("radio-button");
+let i = class extends _ {
+  constructor() {
+    super(...arguments), this.checked = !1, K(this, d, () => this.label ? l`<span>${this.label}</span>` : s), this.radioButtonRef = x();
+  }
+  focus() {
+    var e;
+    (e = this.radioButtonRef.value) == null || e.focus();
+  }
+  handleForwardedEvents(e) {
+    e.target === this.radioButtonRef.value && (e.preventDefault(), e.stopPropagation());
+  }
+  updated(e) {
+    var o;
+    super.updated(e), ((o = this.inputChoiceGroupContext) == null ? void 0 : o.selectedValue) !== void 0 && (this.checked = this.value === this.inputChoiceGroupContext.selectedValue);
+  }
+  _handleChange(e) {
+    var r, c;
+    if (this.readOnly || (r = this.inputChoiceGroupContext) != null && r.readOnly) {
+      e.preventDefault();
+      return;
+    }
+    e.target.checked && ((c = this.inputChoiceGroupContext) != null && c.updateSelectedValue) && this.inputChoiceGroupContext.updateSelectedValue(this.value);
+  }
+  _handleKeyDown(e) {
+    var o;
+    e.key === " " && (this.readOnly || (o = this.inputChoiceGroupContext) != null && o.readOnly) && e.preventDefault(), this.onKeyDown && this.onKeyDown(e);
+  }
+  render() {
+    const { ariaInvalid: e, ariaLabel: o } = this, r = !!e || !!this.error, { required: c, error: m, readOnly: b, disabled: n, name: v } = this.inputChoiceGroupContext || {}, f = z(
+      R,
+      (this.error || m) && `${p}error`,
+      this.label && `${p}with-label`,
+      (this.disabled || n) && `${p}disabled`,
+      (this.readOnly || b) && `${p}read-only`,
+      this.theme && $(this.theme)
+    );
+    return l`
+      <div class=${f}>
+        <label
+          tabindex="-1"
+          class=${`${u}label`}
+          required=${c}
+          @blur=${this.handleForwardedEvents}
+          @focus=${this.handleForwardedEvents}
+        >
+          <input
+            name=${v}
+            id=${this.id}
+            type="radio"
+            role="radio"
+            aria-checked=${this.checked || !1}
+            value=${this.value}
+            aria-invalid=${r || s}
+            .checked=${this.checked}
+            ?required=${c}
+            ?disabled=${this.disabled || n}
+            ?readOnly=${this.readOnly || b}
+            @change=${this._handleChange}
+            @keydown=${this._handleKeyDown}
+            class=${`${u}input`}
+            ${k(this.radioButtonRef)}
+            aria-label=${o}
+          />
+          ${E(this, d).call(this)}
+        </label>
+      </div>
+    `;
+  }
+};
+d = /* @__PURE__ */ new WeakMap();
+S(i);
+i.styles = y(P);
+t([
+  a({ type: String })
+], i.prototype, "label", 2);
+t([
+  a({ type: Boolean })
+], i.prototype, "error", 2);
+t([
+  a({ type: Boolean })
+], i.prototype, "readOnly", 2);
+t([
+  a({ type: Boolean })
+], i.prototype, "disabled", 2);
+t([
+  a({ type: String })
+], i.prototype, "theme", 2);
+t([
+  a({ type: String })
+], i.prototype, "value", 2);
+t([
+  a({ type: Boolean })
+], i.prototype, "checked", 2);
+t([
+  a({ type: Function })
+], i.prototype, "onKeyDown", 2);
+t([
+  g({ context: O, subscribe: !0 }),
+  a({ attribute: !1 })
+], i.prototype, "inputChoiceGroupContext", 2);
+i = t([
+  w("bm-radio-button")
+], i);
+export {
+  i as BmRadioButton
+};

package/local/wip/RadioButton/RadioButtonGroup/RadioButtonGroup.js

@@ -0,0 +1,96 @@
+import { r as c } from "../../../chunks/delegate.baxDQosr.js";
+import { c as u } from "../../../chunks/register-custom-element.vod7zfGv.js";
+import { InputChoiceGroup as l } from "../../../InputChoiceGroup/InputChoiceGroup.js";
+var h = Object.getOwnPropertyDescriptor, f = (t, e, o, s) => {
+  for (var n = s > 1 ? void 0 : s ? h(e, o) : e, a = t.length - 1, i; a >= 0; a--)
+    (i = t[a]) && (n = i(n) || n);
+  return n;
+};
+let d = class extends l {
+  updateSelectedValue(t) {
+    this.selectedValue = t;
+  }
+  getAllRadioButtons() {
+    return Array.from(this.radioButtons);
+  }
+  getCheckedRadioButton() {
+    return this.getAllRadioButtons().find((t) => t.checked);
+  }
+  syncRadioButtons() {
+    const t = this.getAllRadioButtons();
+    if (t.length > 0) {
+      const e = this.getCheckedRadioButton();
+      e ? this.setTabIndex(e) : this.setTabIndex(t[0]);
+    }
+  }
+  setTabIndex(t) {
+    this.getAllRadioButtons().forEach((e) => {
+      var s;
+      const o = (s = e.shadowRoot) == null ? void 0 : s.querySelector("input");
+      o && (o.tabIndex = e === t ? 0 : -1);
+    });
+  }
+  focusRadioButton(t) {
+    var e;
+    if (!t.disabled && !t.readOnly) {
+      this.setTabIndex(t);
+      const o = (e = t.shadowRoot) == null ? void 0 : e.querySelector("input");
+      o instanceof HTMLElement && o.focus();
+    }
+  }
+  selectRadioButton(t) {
+    if (!t.disabled && !t.readOnly && !t.checked) {
+      this.getAllRadioButtons().forEach((o) => {
+        o.checked = o === t;
+      }), this.setTabIndex(t);
+      const e = new Event("change", { bubbles: !0 });
+      t.dispatchEvent(e);
+    }
+  }
+  updated() {
+    super.updated(), this.syncRadioButtons();
+  }
+  handleKeyDown(t) {
+    if (this.disabled || this.readOnly) return;
+    const e = this.getAllRadioButtons(), o = e.find(
+      (a) => {
+        var i, r;
+        return ((i = a.shadowRoot) == null ? void 0 : i.activeElement) === ((r = a.shadowRoot) == null ? void 0 : r.querySelector("input"));
+      }
+    ) || this.getCheckedRadioButton() || e[0];
+    let s = e.indexOf(o);
+    switch (t.key) {
+      case "ArrowDown":
+      case "ArrowRight":
+        t.preventDefault(), s = (s + 1) % e.length;
+        break;
+      case "ArrowUp":
+      case "ArrowLeft":
+        t.preventDefault(), s = (s - 1 + e.length) % e.length;
+        break;
+      case " ":
+        t.preventDefault(), this.selectRadioButton(o);
+        return;
+      default:
+        return;
+    }
+    const n = e[s];
+    this.focusRadioButton(n), this.selectRadioButton(n);
+  }
+  /**
+   * NOTE:
+   * This will help to ensure the correct button is focused after any interaction
+   */
+  handleClick(t) {
+    var n;
+    const o = t.target.closest("bm-radio-button"), s = (n = o == null ? void 0 : o.shadowRoot) == null ? void 0 : n.querySelector("input");
+    o && !(s != null && s.readOnly) && !(s != null && s.disabled) && (this.selectRadioButton(o), this.focusRadioButton(o));
+  }
+};
+c(d);
+d = f([
+  u("bm-radio-button-group")
+], d);
+export {
+  d as BmRadioButtonGroup
+};

package/local/wip/RadioButton/index.js

@@ -0,0 +1,6 @@
+import { BmRadioButton as r } from "./RadioButton.js";
+import { BmRadioButtonGroup as B } from "./RadioButtonGroup/RadioButtonGroup.js";
+export {
+  r as BmRadioButton,
+  B as BmRadioButtonGroup
+};

package/local/wip/Switch/Switch.js

@@ -0,0 +1,153 @@
+import { c as _ } from "../../chunks/consume.Ce9k1-wN.js";
+import { r as z, a as C, x as n, E as w } from "../../chunks/lit-element.CJtt9wj5.js";
+import { n as a, c as S } from "../../chunks/register-custom-element.vod7zfGv.js";
+import { e as T, n as $ } from "../../chunks/ref.B7e1Hu4F.js";
+import { c as O, g as B, d as x } from "../../chunks/classNames.C6fNrXWF.js";
+import { t as L } from "../../chunks/constants.jOWREYQE.js";
+import { r as E } from "../../chunks/delegate.baxDQosr.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: y, classModifierPrefix: h } = B("switch");
+let r = class extends C {
+  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 = T(), d(this, u, () => n` <span class=${`${y}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 = x(b), this._updateDisplayedSlot(e);
+      }, t = (b) => {
+        this._hasOffTextSlotContent = x(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}
+      ${$(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 = O(
+      N,
+      this.theme && L(this.theme),
+      this.textPosition && `${h}${this.textPosition}`,
+      i && `${h}disabled`,
+      c && `${h}read-only`
+    );
+    return n`
+      <div class=${t}>
+        <label
+          tabindex="-1"
+          class=${`${y}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 = z(D);
+E(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([
+  S("bm-switch")
+], r);
+export {
+  r as BmSwitch
+};

package/local/wip/Switch/SwitchGroup/SwitchGroup.js

@@ -0,0 +1,15 @@
+import { c as u } from "../../../chunks/register-custom-element.vod7zfGv.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/local/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
+};