@viasat/beam-web-components 2.0.0

package/wip/Checkbox/Checkbox.d.ts

@@ -0,0 +1,55 @@
+import { LitElement } from 'lit';
+import { ThemeTypes } from '@viasat/beam-shared/utils/constants';
+import { InputChoiceGroupContextProps } from '../../InputChoiceGroup/InputChoiceGroup.context';
+/**
+ * `bm-checkbox`
+ */
+export declare class BmCheckbox extends LitElement {
+    #private;
+    static styles: import('lit').CSSResult;
+    /**
+     * Specify the theme of the CloseButton. By default it inherits the theme from the parent
+     */
+    theme?: ThemeTypes;
+    /**
+     * Specify the text for the label
+     */
+    label?: string;
+    /**
+     * Specify the checkbox name
+     */
+    name?: string;
+    /**
+     * Specify the checkbox value
+     */
+    value?: string;
+    /**
+     * Specify error text and display error state of a Checkbox
+     */
+    error?: boolean;
+    /**
+     * Specify if Checkbox displays in a read-only state
+     */
+    readOnly?: boolean;
+    /**
+     * Specify if Checkbox displays in an indeterminate state
+     */
+    indeterminate?: boolean;
+    /**
+     * Specify if Checkbox displays in disabled state
+     */
+    disabled?: boolean;
+    /**
+     * Specify if Checkbox is checked
+     */
+    checked?: boolean;
+    inputChoiceGroupContext?: InputChoiceGroupContextProps;
+    clickHandler(event: Event): void;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'bm-checkbox': BmCheckbox;
+    }
+}
+//# sourceMappingURL=Checkbox.d.ts.map

package/wip/Checkbox/Checkbox.js

@@ -0,0 +1,104 @@
+import { consume as k } from "@lit/context";
+import { unsafeCSS as y, LitElement as _, nothing as u, html as h } from "lit";
+import { property as m } from "lit/decorators.js";
+import w from "clsx";
+import { g as z } from "../../chunks/classNames.Cq_tbDRp.js";
+import { t as C } from "../../chunks/constants.jOWREYQE.js";
+import { r as S } from "../../chunks/delegate.baxDQosr.js";
+import { c as $ } from "../../chunks/register-custom-element.DHGKOhmA.js";
+import { inputChoiceGroupContext as P } from "../../InputChoiceGroup/InputChoiceGroup.context.js";
+const O = `:root,:host,.bm-light,.bm-dark .bm-inverse,[data-bm-theme~=bm-light]{--bm-comp-input-color-bg: var(--bm-sem-color-surface-01, #ffffff);--bm-comp-input-color-bg-disabled: var( --bm-sem-color-surface-highlight, rgba(159, 175, 188, .16) );--bm-comp-input-color-border: var(--bm-sem-color-border-strong, #8697a5);--bm-comp-input-color-border-error: var( --bm-sem-color-border-negative-strong, #cc2429 );--bm-comp-input-color-border-disabled: rgba(134, 151, 165, .4);--bm-comp-input-color-text: var(--bm-sem-color-text-primary, #141d24);--bm-comp-input-color-text-placeholder: var( --bm-sem-color-text-secondary, #576775 );--bm-comp-input-color-text-disabled: var( --bm-sem-color-text-disabled, rgba(87, 103, 117, .4) );--bm-comp-input-color-icon-disabled: var( --bm-sem-color-text-disabled, rgba(87, 103, 117, .4) );--bm-comp-input-color-icon: var(--bm-sem-color-icon-secondary, #576775);--bm-comp-input-color-icon-error: var( --bm-sem-color-icon-negative-strong, #cc2429 );--bm-comp-input-color-divider: var(--bm-sem-color-border-02, #d1dae0);--bm-comp-input-color-choice-checkbox-selected-bg: var( --bm-utility-color-accent-default, #00768f );--bm-comp-input-color-choice-checkbox-selected-icon: var( --bm-sem-color-icon-primary-inverse, #ffffff );--bm-comp-input-color-choice-checkbox-selected-bg-error: var( --bm-sem-color-surface-negative-strong, #cc2429 );--bm-comp-input-color-choice-checkbox-selected-border: var( --bm-sem-color-none, #ffffff00 );--bm-comp-input-color-choice-switch-selected-bg: var( --bm-utility-color-accent-default, #00768f );--bm-comp-input-color-choice-switch-selected-icon: var( --bm-sem-color-icon-primary-inverse, #ffffff );--bm-comp-input-color-choice-switch-selected-border: var( --bm-sem-color-none, #ffffff00 );--bm-comp-input-color-choice-radio-selected-bg: var( --bm-sem-color-surface-01, #ffffff );--bm-comp-input-color-choice-radio-selected-border: var( --bm-utility-color-accent-default, #00768f );--bm-comp-input-color-choice-radio-selected-inner-circle: var( --bm-utility-color-accent-default, #00768f );--bm-comp-input-color-choice-radio-selected-bg-error: var( --bm-sem-color-surface-01, #ffffff );--bm-comp-input-color-choice-radio-selected-border-error: var( --bm-sem-color-surface-negative-strong, #cc2429 );--bm-comp-input-color-choice-radio-selected-inner-circle-error: var( --bm-sem-color-surface-negative-strong, #cc2429 );--bm-comp-input-typo-default: var( --bm-sem-typo-compact-body-md, 400 1rem/1.25rem "Source Sans Pro" );--bm-comp-input-typo-character-count: var( --bm-sem-typo-body-sm, 400 .875rem/1.25rem "Source Sans Pro" );--bm-comp-input-typo-label-choice: var( --bm-sem-typo-body-md, 400 1rem/1.5rem "Source Sans Pro" );--bm-comp-input-space-field-x: var(--bm-sem-space-100, 1rem);--bm-comp-input-space-field-y: var(--bm-sem-space-50, .5rem);--bm-comp-input-space-field-gap: var(--bm-sem-space-50, .5rem);--bm-comp-input-space-choice-gap-inside: var(--bm-sem-space-50, .5rem);--bm-comp-input-space-choice-gap-items-y: var(--bm-sem-space-50, .5rem);--bm-comp-input-space-choice-gap-items-x: var(--bm-sem-space-100, 1rem);--bm-comp-input-space-choice-nudge: var( --bm-primitive-dimension-12, .125rem );--bm-comp-input-size-field-md-height: var(--bm-sem-size-height-md, 2.5rem);--bm-comp-input-size-field-width: var(--bm-primitive-dimension-1800, 18rem);--bm-comp-input-size-field-icon: var(--bm-sem-size-icon-md, 1.25rem);--bm-comp-input-size-field-text-area-height: var( --bm-primitive-dimension-475, 4.75rem );--bm-comp-input-size-choice-checkbox: var(--bm-sem-size-icon-sm, 1rem);--bm-comp-input-size-choice-radio: var(--bm-sem-size-icon-sm, 1rem);--bm-comp-input-size-choice-radio-inside: var( --bm-primitive-dimension-50, .5rem );--bm-comp-input-size-choice-switch-height: var( --bm-sem-size-icon-md, 1.25rem );--bm-comp-input-size-choice-switch-width: var( --bm-primitive-dimension-250, 2.5rem );--bm-comp-input-size-choice-switch-knob: var( --bm-primitive-dimension-87, .875rem );--bm-comp-input-radius-field: var(--bm-sem-radius-input-md, .25rem);--bm-comp-input-radius-choice-checkbox: var( --bm-sem-radius-input-sm, .125rem );--bm-comp-input-radius-choice-radio: var( --bm-sem-radius-input-lg, 624.938rem );--bm-comp-input-radius-choice-switch: var( --bm-sem-radius-input-lg, 624.938rem );--bm-comp-input-border-width-field-default: var( --bm-sem-border-width-input, .063rem );--bm-comp-input-border-width-field-error: var( --bm-sem-border-width-lg, .125rem );--bm-comp-input-border-width-choice: var( --bm-sem-border-width-input, .063rem );--bm-comp-input-shadow-field: var( --bm-sem-shadow-none, 0 0 0 0 rgb(0, 0, 0, 0) )}:host,.bm-dark,.bm-light .bm-inverse,[data-bm-theme~=bm-dark]{--bm-comp-input-color-bg: var(--bm-sem-color-surface-01, #202e39);--bm-comp-input-color-bg-disabled: var( --bm-sem-color-surface-highlight, rgba(134, 151, 165, .16) );--bm-comp-input-color-border: var(--bm-sem-color-border-strong, #9fafbc);--bm-comp-input-color-border-error: var( --bm-sem-color-border-negative-strong, #f67378 );--bm-comp-input-color-border-disabled: rgba(159, 175, 188, .4);--bm-comp-input-color-text: var(--bm-sem-color-text-primary, #ffffff);--bm-comp-input-color-text-placeholder: var( --bm-sem-color-text-secondary, #c3cdd5 );--bm-comp-input-color-text-disabled: var( --bm-sem-color-text-disabled, rgba(195, 205, 213, .4) );--bm-comp-input-color-icon-disabled: var( --bm-sem-color-text-disabled, rgba(195, 205, 213, .4) );--bm-comp-input-color-icon: var(--bm-sem-color-icon-secondary, #c3cdd5);--bm-comp-input-color-icon-error: var( --bm-sem-color-icon-negative-strong, #f67378 );--bm-comp-input-color-divider: var(--bm-sem-color-border-02, #465967);--bm-comp-input-color-choice-checkbox-selected-bg: var( --bm-utility-color-accent-default, #43bfd6 );--bm-comp-input-color-choice-checkbox-selected-icon: var( --bm-sem-color-icon-primary-inverse, #141d24 );--bm-comp-input-color-choice-checkbox-selected-bg-error: var( --bm-sem-color-surface-negative-strong, #f67378 );--bm-comp-input-color-choice-checkbox-selected-border: var( --bm-sem-color-none, #ffffff00 );--bm-comp-input-color-choice-switch-selected-bg: var( --bm-utility-color-accent-default, #43bfd6 );--bm-comp-input-color-choice-switch-selected-icon: var( --bm-sem-color-icon-primary-inverse, #141d24 );--bm-comp-input-color-choice-switch-selected-border: var( --bm-sem-color-none, #ffffff00 );--bm-comp-input-color-choice-radio-selected-bg: var( --bm-sem-color-surface-01, #202e39 );--bm-comp-input-color-choice-radio-selected-border: var( --bm-utility-color-accent-default, #43bfd6 );--bm-comp-input-color-choice-radio-selected-inner-circle: var( --bm-utility-color-accent-default, #43bfd6 );--bm-comp-input-color-choice-radio-selected-bg-error: var( --bm-sem-color-surface-01, #202e39 );--bm-comp-input-color-choice-radio-selected-border-error: var( --bm-sem-color-surface-negative-strong, #f67378 );--bm-comp-input-color-choice-radio-selected-inner-circle-error: var( --bm-sem-color-surface-negative-strong, #f67378 );--bm-comp-input-typo-default: var( --bm-sem-typo-compact-body-md, 400 1rem/1.25rem "Source Sans Pro" );--bm-comp-input-typo-character-count: var( --bm-sem-typo-body-sm, 400 .875rem/1.25rem "Source Sans Pro" );--bm-comp-input-typo-label-choice: var( --bm-sem-typo-body-md, 400 1rem/1.5rem "Source Sans Pro" );--bm-comp-input-space-field-x: var(--bm-sem-space-100, 1rem);--bm-comp-input-space-field-y: var(--bm-sem-space-50, .5rem);--bm-comp-input-space-field-gap: var(--bm-sem-space-50, .5rem);--bm-comp-input-space-choice-gap-inside: var(--bm-sem-space-50, .5rem);--bm-comp-input-space-choice-gap-items-y: var(--bm-sem-space-50, .5rem);--bm-comp-input-space-choice-gap-items-x: var(--bm-sem-space-100, 1rem);--bm-comp-input-space-choice-nudge: var( --bm-primitive-dimension-12, .125rem );--bm-comp-input-size-field-md-height: var(--bm-sem-size-height-md, 2.5rem);--bm-comp-input-size-field-width: var(--bm-primitive-dimension-1800, 18rem);--bm-comp-input-size-field-icon: var(--bm-sem-size-icon-md, 1.25rem);--bm-comp-input-size-field-text-area-height: var( --bm-primitive-dimension-475, 4.75rem );--bm-comp-input-size-choice-checkbox: var(--bm-sem-size-icon-sm, 1rem);--bm-comp-input-size-choice-radio: var(--bm-sem-size-icon-sm, 1rem);--bm-comp-input-size-choice-radio-inside: var( --bm-primitive-dimension-50, .5rem );--bm-comp-input-size-choice-switch-height: var( --bm-sem-size-icon-md, 1.25rem );--bm-comp-input-size-choice-switch-width: var( --bm-primitive-dimension-250, 2.5rem );--bm-comp-input-size-choice-switch-knob: var( --bm-primitive-dimension-87, .875rem );--bm-comp-input-radius-field: var(--bm-sem-radius-input-md, .25rem);--bm-comp-input-radius-choice-checkbox: var( --bm-sem-radius-input-sm, .125rem );--bm-comp-input-radius-choice-radio: var( --bm-sem-radius-input-lg, 624.938rem );--bm-comp-input-radius-choice-switch: var( --bm-sem-radius-input-lg, 624.938rem );--bm-comp-input-border-width-field-default: var( --bm-sem-border-width-input, .063rem );--bm-comp-input-border-width-field-error: var( --bm-sem-border-width-lg, .125rem );--bm-comp-input-border-width-choice: var( --bm-sem-border-width-input, .063rem );--bm-comp-input-shadow-field: var( --bm-sem-shadow-none, 0 0 0 0 rgb(0, 0, 0, 0) )}.bm-checkbox{display:inline-flex}.bm-checkbox--read-only{--bm-input-choice-cursor: default;--bm-input-choice-label-cursor: default;--bm-input-choice-label-pointer-events: none}.bm-checkbox--disabled{--bm-input-choice-cursor: not-allowed;--bm-input-choice-label-cursor: not-allowed}.bm-checkbox__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)}.bm-checkbox--with-label .bm-checkbox__label .bm-checkbox__input{margin:var(--bm-comp-input-space-choice-nudge) var(--bm-sem-space-0)}.bm-checkbox--error .bm-checkbox__label{color:var(--bm-comp-input-color-text)}.bm-checkbox--error .bm-checkbox__label .bm-checkbox__input{border-color:var(--bm-comp-input-color-border-error);background-color:var(--bm-comp-input-color-bg)}.bm-checkbox--error .bm-checkbox__label .bm-checkbox__input:checked{background-color:var(--bm-comp-input-color-choice-checkbox-selected-bg-error)}.bm-checkbox--read-only .bm-checkbox__label{color:var(--bm-comp-input-color-text)}.bm-checkbox--read-only .bm-checkbox__label .bm-checkbox__input{border-color:var(--bm-comp-input-color-border-disabled);background-color:var(--bm-comp-input-color-bg-disabled)}.bm-checkbox--read-only .bm-checkbox__label .bm-checkbox__input:checked{background-color:var(--bm-comp-input-color-icon)}.bm-checkbox--disabled .bm-checkbox__label{color:var(--bm-comp-input-color-text-disabled)}.bm-checkbox--disabled .bm-checkbox__label .bm-checkbox__input{border-color:var(--bm-comp-input-color-border-disabled);background-color:var(--bm-comp-input-color-bg-disabled)}.bm-checkbox--disabled .bm-checkbox__label .bm-checkbox__input:checked{background-color:var(--bm-comp-input-color-icon-disabled)}.bm-checkbox__label .bm-checkbox__input{appearance:none;-moz-appearance:none;-webkit-appearance:none;position:relative;margin:var(--bm-sem-space-0);flex-shrink:var(--bm-sem-space-0);width:var(--bm-comp-input-size-choice-checkbox);height:var(--bm-comp-input-size-choice-checkbox);background-color:var(--bm-comp-input-color-bg);cursor:var(--bm-input-choice-cursor, pointer);box-sizing:border-box;border-style:solid;border-color:var(--bm-comp-input-color-border);border-radius:var(--bm-comp-input-radius-choice-checkbox);border-width:var(--bm-comp-input-border-width-field-default)}.bm-checkbox__label .bm-checkbox__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-checkbox__label .bm-checkbox__input:checked{background-color:var(--bm-comp-input-color-choice-checkbox-selected-bg);border-color:var(--bm-comp-input-color-choice-checkbox-selected-border)}.bm-checkbox__label .bm-checkbox__input:checked:after{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.178 7.363.808 4.697 0 5.598l3.178 3.573L10 1.501 9.198.6l-6.02 6.763Z' fill='%23fff'/%3E%3C/svg%3E");-webkit-mask-size:cover;-webkit-mask-position:center;-webkit-mask-repeat:no-repeat;mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.178 7.363.808 4.697 0 5.598l3.178 3.573L10 1.501 9.198.6l-6.02 6.763Z' fill='%23fff'/%3E%3C/svg%3E");mask-size:cover;mask-position:center;mask-repeat:no-repeat;content:"";background-color:var(--bm-comp-input-color-choice-checkbox-selected-icon);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:calc(var(--bm-comp-input-size-choice-checkbox) * 5 / 8);height:calc(var(--bm-comp-input-size-choice-checkbox) * 5 / 8)}.bm-checkbox--indeterminate .bm-checkbox__input:checked:after{height:2px;width:50%;border-radius:var(--bm-comp-input-size-choice-checkbox);-webkit-mask-image:none;mask-image:none}`;
+var E = Object.defineProperty, B = Object.getOwnPropertyDescriptor, f = (e) => {
+  throw TypeError(e);
+}, i = (e, o, r, b) => {
+  for (var t = b > 1 ? void 0 : b ? B(o, r) : o, a = e.length - 1, p; a >= 0; a--)
+    (p = e[a]) && (t = (b ? p(o, r, t) : p(t)) || t);
+  return b && t && E(o, r, t), t;
+}, L = (e, o, r) => o.has(e) || f("Cannot " + r), M = (e, o, r) => (L(e, o, "read from private field"), r ? r.call(e) : o.get(e)), D = (e, o, r) => o.has(e) ? f("Cannot add the same private member more than once") : o instanceof WeakSet ? o.add(e) : o.set(e, r), n;
+const { baseClassNamePrefix: G, subElementClassPrefix: v, classModifierPrefix: s } = z("checkbox");
+let c = class extends _ {
+  constructor() {
+    super(...arguments), this.readOnly = !1, this.indeterminate = !1, this.disabled = !1, this.checked = !1, D(this, n, () => this.label ? h`<span>${this.label}</span>` : u);
+  }
+  clickHandler(e) {
+    this.readOnly && (e.preventDefault(), e.stopPropagation());
+  }
+  render() {
+    const { ariaInvalid: e, ariaLabel: o } = this, r = !!e || !!this.error, {
+      required: b,
+      error: t,
+      readOnly: a,
+      disabled: p,
+      name: g
+    } = this.inputChoiceGroupContext || {}, l = this.disabled || p, d = this.readOnly || a, x = w(
+      G,
+      this.theme && C(this.theme),
+      (this.error || t) && `${s}error`,
+      this.label && `${s}with-label`,
+      l && `${s}disabled`,
+      d && `${s}read-only`,
+      this.indeterminate && `${s}indeterminate`
+    );
+    return h`
+      <div class="${x}">
+        <label tabindex="{-1}" class="${v}label">
+          <input
+            type="checkbox"
+            name=${g}
+            value=${this.value}
+            id=${this.id}
+            ?checked=${this.checked}
+            ?required=${b}
+            ?disabled=${l}
+            ?readOnly=${d}
+            class="${v}input"
+            @click=${this.clickHandler}
+            aria-label=${o}
+            aria-invalid=${r || u}
+          />
+          ${M(this, n).call(this)}
+        </label>
+      </div>
+    `;
+  }
+};
+n = /* @__PURE__ */ new WeakMap();
+S(c);
+c.styles = y(O);
+i([
+  m({ type: String })
+], c.prototype, "theme", 2);
+i([
+  m({ type: String })
+], c.prototype, "label", 2);
+i([
+  m({ type: String })
+], c.prototype, "name", 2);
+i([
+  m({ type: String })
+], c.prototype, "value", 2);
+i([
+  m({ type: Boolean })
+], c.prototype, "error", 2);
+i([
+  m({ type: Boolean })
+], c.prototype, "readOnly", 2);
+i([
+  m({ type: Boolean })
+], c.prototype, "indeterminate", 2);
+i([
+  m({ type: Boolean })
+], c.prototype, "disabled", 2);
+i([
+  m({ type: Boolean })
+], c.prototype, "checked", 2);
+i([
+  k({ context: P, subscribe: !0 }),
+  m({ attribute: !1 })
+], c.prototype, "inputChoiceGroupContext", 2);
+c = i([
+  $("bm-checkbox")
+], c);
+export {
+  c as BmCheckbox
+};

package/wip/Checkbox/CheckboxGroup/CheckboxGroup.d.ts

@@ -0,0 +1,11 @@
+import { InputChoiceGroup } from '../../../InputChoiceGroup/InputChoiceGroup';
+export declare class BmCheckboxGroup extends InputChoiceGroup {
+    protected handleKeyDown(event: KeyboardEvent): void;
+    protected handleClick(event: MouseEvent): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'bm-checkbox-group': BmCheckboxGroup;
+    }
+}
+//# sourceMappingURL=CheckboxGroup.d.ts.map

package/wip/Checkbox/CheckboxGroup/CheckboxGroup.js

@@ -0,0 +1,27 @@
+import { r as i } from "../../../chunks/delegate.baxDQosr.js";
+import { c as p } from "../../../chunks/register-custom-element.DHGKOhmA.js";
+import { InputChoiceGroup as h } from "../../../InputChoiceGroup/InputChoiceGroup.js";
+var u = Object.getOwnPropertyDescriptor, c = (e, a, l, n) => {
+  for (var r = n > 1 ? void 0 : n ? u(a, l) : a, t = e.length - 1, o; t >= 0; t--)
+    (o = e[t]) && (r = o(r) || r);
+  return r;
+};
+let s = class extends h {
+  handleKeyDown(e) {
+    this.readOnly || this.disabled || super.handleKeyDown(e);
+  }
+  handleClick(e) {
+    if (this.readOnly || this.disabled) {
+      e.preventDefault();
+      return;
+    }
+    super.handleClick(e);
+  }
+};
+i(s);
+s = c([
+  p("bm-checkbox-group")
+], s);
+export {
+  s as BmCheckboxGroup
+};

package/wip/Checkbox/index.d.ts

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

package/wip/Checkbox/index.js

@@ -0,0 +1,6 @@
+import { BmCheckbox as e } from "./Checkbox.js";
+import { BmCheckboxGroup as x } from "./CheckboxGroup/CheckboxGroup.js";
+export {
+  e as BmCheckbox,
+  x as BmCheckboxGroup
+};

package/wip/FileUpload/FileUpload.Button.d.ts

@@ -0,0 +1,36 @@
+import { PropertyValues } from 'lit';
+import { BmButton } from '../../Button/Button';
+/**
+ * `bm-file-upload-button`
+ *
+ * @slot default - Specify text for the Button
+ */
+export declare class BmFileUploadButton extends BmButton {
+    static styles: import('lit').CSSResult[];
+    /**
+     * Specify if FileUpload is in error state
+     */
+    error?: boolean;
+    /**
+     * Specify the accepted file types
+     */
+    accept?: string;
+    /**
+     * Specify if multiple files can be uploaded
+     */
+    multiple?: boolean;
+    private fileUploadContext?;
+    private fileInputRef;
+    private handleInputChange;
+    private openFileDialog;
+    constructor();
+    protected willUpdate(changedProperties: PropertyValues): void;
+    private renderBmButtonWithAdditionalClassName;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'bm-file-upload-button': BmFileUploadButton;
+    }
+}
+//# sourceMappingURL=FileUpload.Button.d.ts.map

package/wip/FileUpload/FileUpload.Button.js

@@ -0,0 +1,77 @@
+import { consume as c } from "@lit/context";
+import { unsafeCSS as d, html as h } from "lit";
+import { property as n } from "lit/decorators.js";
+import { createRef as u, ref as C } from "lit/directives/ref.js";
+import { unsafeSVG as b } from "lit/directives/unsafe-svg.js";
+import f from "clsx";
+import { U as g } from "../../chunks/Upload.B9YEyp7b.js";
+import { g as x } from "../../chunks/classNames.Cq_tbDRp.js";
+import { t as y } from "../../chunks/constants.jOWREYQE.js";
+import { f as B } from "../../chunks/fileUpload.module.kN6o64aL.js";
+import { c as _ } from "../../chunks/register-custom-element.DHGKOhmA.js";
+import { BmButton as U } from "../../Button/Button.js";
+import { fileUploadContext as v } from "./FileUploadContext.js";
+var N = Object.defineProperty, O = Object.getOwnPropertyDescriptor, P = Object.getPrototypeOf, $ = Reflect.get, a = (e, t, s, l) => {
+  for (var o = l > 1 ? void 0 : l ? O(t, s) : t, r = e.length - 1, p; r >= 0; r--)
+    (p = e[r]) && (o = (l ? p(t, s, o) : p(o)) || o);
+  return l && o && N(t, s, o), o;
+}, I = (e, t, s) => $(P(e), s, t);
+const { baseClassNamePrefix: R, classModifierPrefix: m } = x("file-upload-button");
+let i = class extends U {
+  constructor() {
+    super(), this.fileUploadContext = {}, this.fileInputRef = u(), this.appearance = "neutral-subtle", this.kind = "outline", this.size = "md", this.iconOnly = !1, this.defaultIcons.iconBefore = b(g), this.addEventListener("click", () => this.openFileDialog());
+  }
+  handleInputChange(e) {
+    var t, s;
+    e.target.files && ((s = (t = this.fileUploadContext) == null ? void 0 : t.ctxAddFiles) == null || s.call(t, e.target.files));
+  }
+  openFileDialog() {
+    var e;
+    (e = this.fileInputRef.value) == null || e.click();
+  }
+  willUpdate(e) {
+    super.willUpdate(e), this.defaultLabel = this.multiple ? "Choose files" : "Choose file";
+  }
+  renderBmButtonWithAdditionalClassName(e) {
+    const t = this.className;
+    this.className = f(e, t);
+    const s = super.render();
+    return this.className = t, s;
+  }
+  render() {
+    const { ctxAccept: e, ctxMultiple: t } = this.fileUploadContext ?? {}, s = this.accept || e, l = this.multiple || t, o = f(
+      R,
+      this.theme && y(this.theme),
+      this.disabled && `${m}disabled`,
+      this.error && `${m}error`
+    ), r = this.renderBmButtonWithAdditionalClassName(o);
+    return h`<input
+        ${C(this.fileInputRef)}
+        hidden
+        type="file"
+        accept=${s}
+        ?multiple=${l}
+        @change=${this.handleInputChange}
+        ?disabled=${this.disabled}
+      />${r}`;
+  }
+};
+i.styles = [...I(i, i, "styles"), d(B)];
+a([
+  n({ type: Boolean })
+], i.prototype, "error", 2);
+a([
+  n({ type: String })
+], i.prototype, "accept", 2);
+a([
+  n({ type: Boolean })
+], i.prototype, "multiple", 2);
+a([
+  c({ context: v, subscribe: !0 })
+], i.prototype, "fileUploadContext", 2);
+i = a([
+  _("bm-file-upload-button")
+], i);
+export {
+  i as BmFileUploadButton
+};

package/wip/FileUpload/FileUpload.Dropzone.d.ts

@@ -0,0 +1,55 @@
+import { LitElement } from 'lit';
+import { ThemeTypes } from '@viasat/beam-shared/utils/constants';
+/**
+ * `bm-file-upload-dropzone`
+ *
+ * @slot default - Specify text for the Dropzone
+ */
+export declare class BmFileUploadDropzone extends LitElement {
+    #private;
+    static styles: import('lit').CSSResult[];
+    /**
+     * Specify if FileUpload is in error state
+     */
+    error?: boolean;
+    /**
+     * Specify the theme of the FileUpload. By default it inherits the theme from the parent
+     */
+    theme?: ThemeTypes;
+    /**
+     * Specify if the FileUpload is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Specify the accepted file types
+     */
+    accept?: string;
+    /**
+     * Specify the name of the FileUpload
+     */
+    name?: string;
+    /**
+     * Specify if multiple files can be uploaded
+     */
+    multiple?: boolean;
+    private fileUploadContext?;
+    private isDragging;
+    private fileInputRef;
+    private handleInputChange;
+    private handleDropFiles;
+    private handleKeyDown;
+    private rootDivRef;
+    focus(): void;
+    private handleClick;
+    private handleDragStart;
+    private handleDragEnter;
+    private handleDragLeave;
+    private handleDragOver;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'bm-file-upload-dropzone': BmFileUploadDropzone;
+    }
+}
+//# sourceMappingURL=FileUpload.Dropzone.d.ts.map

package/wip/FileUpload/FileUpload.Dropzone.js

@@ -0,0 +1,150 @@
+import { consume as y } from "@lit/context";
+import { unsafeCSS as D, LitElement as v, nothing as $, html as x } from "lit";
+import { property as p, state as C } from "lit/decorators.js";
+import { createRef as u, ref as g } from "lit/directives/ref.js";
+import { unsafeSVG as b } from "lit/directives/unsafe-svg.js";
+import E from "clsx";
+import { U as _ } from "../../chunks/Upload.B9YEyp7b.js";
+import { g as R } from "../../chunks/classNames.Cq_tbDRp.js";
+import { t as S } from "../../chunks/constants.jOWREYQE.js";
+import { f as I } from "../../chunks/fileUpload.module.kN6o64aL.js";
+import { c as U } from "../../chunks/register-custom-element.DHGKOhmA.js";
+import { stateLayerStyles as w, stateLayerClassName as P } from "../../StateLayer/StateLayer.js";
+import { fileUploadContext as k } from "./FileUploadContext.js";
+import "../../Icon/Icon.js";
+var T = Object.defineProperty, B = Object.getOwnPropertyDescriptor, m = (e) => {
+  throw TypeError(e);
+}, o = (e, t, a, n) => {
+  for (var s = n > 1 ? void 0 : n ? B(t, a) : t, f = e.length - 1, d; f >= 0; f--)
+    (d = e[f]) && (s = (n ? d(t, a, s) : d(s)) || s);
+  return n && s && T(t, a, s), s;
+}, O = (e, t, a) => t.has(e) || m("Cannot " + a), l = (e, t, a) => (O(e, t, "read from private field"), a ? a.call(e) : t.get(e)), L = (e, t, a) => t.has(e) ? m("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(e) : t.set(e, a), r;
+const { baseClassNamePrefix: N, classModifierPrefix: c, subElementClassPrefix: h } = R("file-upload-dropzone");
+let i = class extends v {
+  constructor() {
+    super(...arguments), this.disabled = !1, this.fileUploadContext = {}, this.isDragging = !1, this.fileInputRef = u(), L(this, r, () => {
+      var e;
+      return !!(this.disabled || (e = this.fileUploadContext) != null && e.ctxDisabled);
+    }), this.rootDivRef = u();
+  }
+  handleInputChange(e) {
+    var t, a;
+    e.target.files && ((a = (t = this.fileUploadContext) == null ? void 0 : t.ctxAddFiles) == null || a.call(t, e.target.files));
+  }
+  handleDropFiles(e) {
+    var a;
+    if (e.preventDefault(), e.stopPropagation(), this.isDragging = !1, l(this, r).call(this) || !this.fileInputRef.value)
+      return;
+    this.fileInputRef.value.value = "", this.fileInputRef.value.files = ((a = e.dataTransfer) == null ? void 0 : a.files) ?? null;
+    const t = new Event("change", {
+      bubbles: !0
+    });
+    this.fileInputRef.value.dispatchEvent(t);
+  }
+  handleKeyDown(e) {
+    var t;
+    l(this, r).call(this) || (e.key === "Enter" || e.key === " ") && (e.preventDefault(), (t = this.fileInputRef.value) == null || t.click());
+  }
+  focus() {
+    var e;
+    (e = this.rootDivRef.value) == null || e.focus();
+  }
+  handleClick(e) {
+    var t;
+    l(this, r).call(this) ? (e.preventDefault(), e.stopPropagation()) : (t = this.fileInputRef.value) == null || t.click();
+  }
+  handleDragStart(e) {
+    e.dataTransfer && (e.dataTransfer.effectAllowed = "copy");
+  }
+  handleDragEnter(e) {
+    this.isDragging = !0, e.dataTransfer && (e.dataTransfer.dropEffect = l(this, r).call(this) ? "none" : "copy");
+  }
+  handleDragLeave() {
+    this.isDragging && (this.isDragging = !1);
+  }
+  handleDragOver(e) {
+    e.preventDefault(), this.isDragging = !0, e.dataTransfer && (e.dataTransfer.dropEffect = l(this, r).call(this) ? "none" : "copy");
+  }
+  render() {
+    const { ctxAccept: e, ctxMultiple: t, ctxError: a } = this.fileUploadContext ?? {}, n = this.accept || e, s = this.multiple || t, f = E(
+      N,
+      this.theme && S(this.theme),
+      l(this, r).call(this) && `${c}disabled`,
+      (this.error ?? a) && `${c}error`,
+      this.isDragging && `${c}dragging`
+    );
+    return x`
+      <div
+        ${g(this.rootDivRef)}
+        class=${f}
+        role="button"
+        ?aria-disabled=${l(this, r).call(this)}
+        tabindex=${l(this, r).call(this) ? $ : 0}
+        @click=${this.handleClick}
+        @dragstart=${this.handleDragStart}
+        @dragenter=${this.handleDragEnter}
+        @dragleave=${this.handleDragLeave}
+        @dragover=${this.handleDragOver}
+        @drop=${this.handleDropFiles}
+        @keydown=${this.handleKeyDown}
+      >
+        <input
+          ${g(this.fileInputRef)}
+          name=${this.name}
+          type="file"
+          hidden
+          accept=${n}
+          ?multiple=${s}
+          @change="${this.handleInputChange}"
+          ?disabled=${l(this, r).call(this)}
+        />
+        <span
+          aria-hidden="true"
+          class=${`${P()} ${h}state-layer`}
+        ></span>
+        <bm-icon class=${`${h}icon`}
+          >${b(_)}</bm-icon
+        >
+        <slot>
+          <span class=${`${h}text`}
+            >Drag and drop or
+            <span class=${`${h}link`}>click</span> to
+            upload</span
+          >
+        </slot>
+      </div>
+    `;
+  }
+};
+r = /* @__PURE__ */ new WeakMap();
+i.styles = [D(I), w];
+o([
+  p({ type: Boolean })
+], i.prototype, "error", 2);
+o([
+  p({ type: String })
+], i.prototype, "theme", 2);
+o([
+  p({ type: Boolean })
+], i.prototype, "disabled", 2);
+o([
+  p({ type: String })
+], i.prototype, "accept", 2);
+o([
+  p({ type: String })
+], i.prototype, "name", 2);
+o([
+  p({ type: Boolean })
+], i.prototype, "multiple", 2);
+o([
+  y({ context: k, subscribe: !0 })
+], i.prototype, "fileUploadContext", 2);
+o([
+  C()
+], i.prototype, "isDragging", 2);
+i = o([
+  U("bm-file-upload-dropzone")
+], i);
+export {
+  i as BmFileUploadDropzone
+};

package/wip/FileUpload/FileUpload.List.Item.d.ts

@@ -0,0 +1,62 @@
+import { LitElement } from 'lit';
+import { FileUploadListItemState, FileUploadListSize } from '@viasat/beam-shared/components/fileUpload';
+import { ThemeTypes } from '@viasat/beam-shared/utils/constants';
+/**
+ * `bm-file-upload-list-item`
+ *
+ * @fires bm-dismiss - Dispatched when the dismiss button is clicked
+ */
+export declare class BmFileUploadListItem extends LitElement {
+    #private;
+    static styles: import('lit').CSSResult;
+    /**
+     * Specify error text and display error state of list item
+     */
+    error?: string;
+    /**
+     * The name of the uploaded file
+     */
+    fileName?: string;
+    /**
+     * The size of the uploaded file
+     */
+    fileSize?: string;
+    /**
+     * Specify the size of the item
+     * @default 'md'
+     */
+    size?: FileUploadListSize;
+    /**
+     * Specify if the item displays a default thumbnail or a preview of the image being uploaded. Image only displays for size lg.
+     * @default false
+     */
+    thumbnail?: string | boolean;
+    /**
+     * Specify the status of the file
+     * @default 'uploaded'
+     */
+    state: FileUploadListItemState;
+    /**
+     * Specify the progress of the file upload
+     * @default 0
+     */
+    progress?: number;
+    /**
+     * Specify the theme of the FileUpload. By default it inherits the theme from the parent
+     */
+    theme?: ThemeTypes;
+    /**
+     * Specify if the FileUpload is disabled
+     */
+    disabled?: boolean;
+    private listContext?;
+    private tooltipRef;
+    private fileNameRef;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'bm-file-upload-list-item': BmFileUploadListItem;
+    }
+}
+//# sourceMappingURL=FileUpload.List.Item.d.ts.map