@viasat/beam-web-components 2.0.0

package/wip/NativeSelect/NativeSelect.js

@@ -0,0 +1,163 @@
+import { unsafeCSS as I, html as C } from "lit";
+import { property as s, queryAssignedElements as y } from "lit/decorators.js";
+import { ref as O } from "lit/directives/ref.js";
+import w from "clsx";
+import { i as T, p as u, a as N, g as k } from "../../chunks/classNames.Cq_tbDRp.js";
+import { t as S } from "../../chunks/constants.jOWREYQE.js";
+import { r as L } from "../../chunks/delegate.baxDQosr.js";
+import { c as E } from "../../chunks/register-custom-element.DHGKOhmA.js";
+import { g as Q } from "../../chunks/helpers.AwJwaZvv.js";
+import { FormField as _ } from "../Form/Form.decorator.js";
+import "../../chunks/HelperText.CcVVOtA3.js";
+const U = (e, o) => {
+  if (!T() || !e) return;
+  const { options: r = [] } = e;
+  Array.prototype.forEach.call(r, (i) => {
+    const { disabled: m, dataset: l } = i, { disabled: d } = l;
+    d || (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, d; l >= 0; l--)
+    (d = e[l]) && (m = (i ? d(o, r, m) : d(m)) || m);
+  return i && m && P(o, r, m), m;
+}, q = (e, o, r) => o.has(e) || A("Cannot " + r), t = (e, o, r) => (q(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, p, M, f, g, D;
+const { baseClassNamePrefix: G, subElementClassPrefix: z, classModifierPrefix: h } = k("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, p, () => {
+      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, p).call(this) && $(o) && e.preventDefault();
+    }), b(this, g, (e) => {
+      t(this, p).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, p).call(this));
+    });
+  }
+  updated(e) {
+    const [o] = this._selectLabel, [r] = this._selectHelperText, { decorate: i } = N(o), { decorate: m } = N(r), l = u(e, ["value"]), d = 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) })), d && 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 = w(
+      this.helperTextId,
+      this.error && this.errorId,
+      this.validationErrorShown() && this.validationErrorsId
+    ), m = w(
+      G,
+      r && `${h}error`,
+      this.theme && S(this.theme),
+      this.fluid && `${h}fluid`,
+      this.ellipse && `${h}ellipsis`,
+      t(this, n).call(this) && `${h}disabled`,
+      t(this, p).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}"
+            ${O(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, p).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, p).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();
+p = /* @__PURE__ */ new WeakMap();
+M = /* @__PURE__ */ new WeakMap();
+f = /* @__PURE__ */ new WeakMap();
+g = /* @__PURE__ */ new WeakMap();
+D = /* @__PURE__ */ new WeakMap();
+L(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([
+  E("bm-native-select")
+], c);
+export {
+  c as BmNativeSelect
+};

package/wip/NativeSelect/index.d.ts

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

package/wip/NativeSelect/index.js

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

package/wip/RadioButton/RadioButton.d.ts

@@ -0,0 +1,56 @@
+import { LitElement } from 'lit';
+import { ThemeTypes } from '@viasat/beam-shared/utils/constants';
+import { InputChoiceGroupContextProps } from '../../InputChoiceGroup/InputChoiceGroup.context';
+/**
+ * `bm-radio-button`
+ */
+export declare class BmRadioButton extends LitElement {
+    #private;
+    static styles: import('lit').CSSResult;
+    /**
+     * Specify the text for the label
+     */
+    label?: string;
+    /**
+     * Specify error text and display error state of a RadioButton
+     */
+    error?: boolean;
+    /**
+     * Specify if RadioButton displays in a read-only state
+     */
+    readOnly?: boolean;
+    /**
+     * Specify if RadioButton displays in a disabled state
+     */
+    disabled?: boolean;
+    /**
+     * Specify the theme of the RadioButton. By default it inherits the theme from the parent
+     */
+    theme?: ThemeTypes;
+    /**
+     * The value attribute for the input element
+     */
+    value?: string;
+    /**
+     * The checked attribute for the input element
+     */
+    checked: boolean;
+    /**
+     * A user-defined function to handle keydown events
+     */
+    onKeyDown?: (event: KeyboardEvent) => void;
+    inputChoiceGroupContext: InputChoiceGroupContextProps;
+    radioButtonRef: import('lit-html/directives/ref').Ref<HTMLInputElement>;
+    focus(): void;
+    private handleForwardedEvents;
+    updated(changedProperties: Map<string | number | symbol, unknown>): void;
+    private _handleChange;
+    private _handleKeyDown;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'bm-radio-button': BmRadioButton;
+    }
+}
+//# sourceMappingURL=RadioButton.d.ts.map

package/wip/RadioButton/RadioButton.js

@@ -0,0 +1,125 @@
+import { consume as g } from "@lit/context";
+import { unsafeCSS as y, LitElement as _, nothing as s, html as l } from "lit";
+import { property as a } from "lit/decorators.js";
+import { createRef as w, ref as x } from "lit/directives/ref.js";
+import k from "clsx";
+import { g as z } from "../../chunks/classNames.Cq_tbDRp.js";
+import { t as C } from "../../chunks/constants.jOWREYQE.js";
+import { r as $ } from "../../chunks/delegate.baxDQosr.js";
+import { c as S } from "../../chunks/register-custom-element.DHGKOhmA.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)), R = (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: K, subElementClassPrefix: u, classModifierPrefix: p } = z("radio-button");
+let i = class extends _ {
+  constructor() {
+    super(...arguments), this.checked = !1, R(this, d, () => this.label ? l`<span>${this.label}</span>` : s), this.radioButtonRef = w();
+  }
+  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 = k(
+      K,
+      (this.error || m) && `${p}error`,
+      this.label && `${p}with-label`,
+      (this.disabled || n) && `${p}disabled`,
+      (this.readOnly || b) && `${p}read-only`,
+      this.theme && C(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`}
+            ${x(this.radioButtonRef)}
+            aria-label=${o}
+          />
+          ${E(this, d).call(this)}
+        </label>
+      </div>
+    `;
+  }
+};
+d = /* @__PURE__ */ new WeakMap();
+$(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([
+  S("bm-radio-button")
+], i);
+export {
+  i as BmRadioButton
+};

package/wip/RadioButton/RadioButtonGroup/RadioButtonGroup.d.ts

@@ -0,0 +1,23 @@
+import { InputChoiceGroup } from '../../../InputChoiceGroup/InputChoiceGroup';
+export declare class BmRadioButtonGroup extends InputChoiceGroup {
+    protected updateSelectedValue(value: string): void;
+    private getAllRadioButtons;
+    private getCheckedRadioButton;
+    private syncRadioButtons;
+    private setTabIndex;
+    private focusRadioButton;
+    private selectRadioButton;
+    updated(): void;
+    protected handleKeyDown(event: KeyboardEvent): void;
+    /**
+     * NOTE:
+     * This will help to ensure the correct button is focused after any interaction
+     */
+    protected handleClick(event: MouseEvent): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'bm-radio-button-group': BmRadioButtonGroup;
+    }
+}
+//# sourceMappingURL=RadioButtonGroup.d.ts.map

package/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.DHGKOhmA.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/wip/RadioButton/index.d.ts

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

package/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/wip/Switch/Switch.d.ts

@@ -0,0 +1,62 @@
+import { LitElement } from 'lit';
+import { TextPosition } from '@viasat/beam-shared/components/switch';
+import { ThemeTypes } from '@viasat/beam-shared/utils/constants';
+import { InputChoiceGroupContextProps } from '../../InputChoiceGroup/InputChoiceGroup.context';
+/**
+ * `bm-switch`
+ *
+ * @slot onText - Specify a side label for the “on” position. If onText is not specified, side label defaults to offText value.
+ * @slot offText - Specify a side label for the “off” position. If offText is not specified, side label defaults to onText value.
+ */
+export declare class BmSwitch extends LitElement {
+    #private;
+    static styles: import('lit').CSSResult;
+    inputChoiceGroupContext: InputChoiceGroupContextProps;
+    /**
+     * Specify a side label for the “on” position. If onText is not specified, side label defaults to offText value.
+     */
+    onText?: string;
+    private _hasOnTextSlotContent;
+    /**
+     * Specify a side label for the “off” position. If offText is not specified, side label defaults to onText value.
+     */
+    offText?: string;
+    private _hasOffTextSlotContent;
+    /**
+     * Specify the theme of the Switch. By default it inherits the theme from the parent
+     */
+    theme?: ThemeTypes;
+    /**
+     * Specify the position of the side label
+     * @default 'after'
+     */
+    textPosition: TextPosition;
+    /**
+     * Specify if Switch displays in a read-only state
+     * @default false
+     *
+     */
+    readOnly: boolean;
+    /**
+     * Specify if Switch displays in a disabled state
+     * @default false
+     */
+    disabled: boolean;
+    checked: boolean;
+    /**
+     * The value attribute for the input element
+     */
+    value?: string;
+    switchRef: import('lit-html/directives/ref').Ref<HTMLInputElement>;
+    updated(changedProperties: Map<string | number | symbol, unknown>): void;
+    private handleForwardedEvents;
+    private onChange;
+    private _updateDisplayedSlot;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'bm-switch': BmSwitch;
+    }
+}
+//# sourceMappingURL=Switch.d.ts.map