@xmesh/system-design 0.0.1

package/dist/lit/components/field/index.js

@@ -0,0 +1,388 @@
+/*
+  field/index.ts — the abstract XmField form-field base.
+
+  XmField is NOT a registered custom element. It is the shared base every
+  form component in Epic 2 subclasses:
+    xm-text-field · xm-textarea · xm-select · xm-checkbox · xm-radio ·
+    xm-switch · xm-slider · xm-file-input
+
+  What the base owns (so ten fields don't hand-roll it ten ways, AD-7/AD-9a):
+    • The field chrome — label row, control wrapper with a shared control
+      height per `size`, helper/error row, required marker.
+    • disabled / readonly / loading visual + ARIA treatment, rendered
+      identically on every subclass.
+    • The focus ring (var(--xm-state-focus-ring) on the control wrapper).
+    • ARIA wiring — label association, aria-invalid, aria-describedby.
+    • The uncontrolled-first value lifecycle (AD-6): the `value` / `checked`
+      attribute is INITIAL only; the base holds live state and exposes emit
+      helpers that fire input/change (bubbles + composed) with typed detail.
+    • Form association (AD-6a): static formAssociated, ElementInternals,
+      `name` attribute, public value/checked getters, and an OR-propagation
+      disabled hook xm-form (Epic 2 Story 2.10) sets later.
+
+  What a subclass supplies — ONLY the concrete control, projected into the
+  fixed `slot="control"`. The subclass authors its control as a light-DOM
+  child:
+
+    <xm-text-field label="Name" size="md">
+      <input slot="control" type="text" />
+    </xm-text-field>
+
+  …or a subclass may override `renderControl()` to render the control into
+  shadow DOM instead. Either way the chrome stays on the base.
+
+  Shadow DOM. Loads its sibling index.css via <link> resolved from the built
+  file location (lit/build/components/field/index.js → ../…).
+  Lit is a bare `import` (peer dep).
+
+  Naming caveat: the base class is XmField; it is *not* an element. The first
+  concrete element is xm-text-field (Epic 2 Story 2.1). The folder is
+  lit/components/field/ per the structural seed.
+*/
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, html, nothing } from "lit";
+import { property, state } from "lit/decorators.js";
+// Resolve CSS relative to the *built* file:
+// lit/build/components/field/index.js → ../field/index.css.
+const FIELD_CSS = new URL("../field/index.css", import.meta.url).href;
+const PRIMITIVES_CSS = new URL("../primitives/index.css", import.meta.url).href;
+let fieldIdSeq = 0;
+/**
+ * Abstract chrome + lifecycle base for every xmesh form field.
+ *
+ * Subclasses register with `@customElement("xm-<name>")`; XmField itself is
+ * never registered (it is not a usable element on its own).
+ */
+export class XmField extends LitElement {
+    // The contract xm-form (AD-6a / AD-12) reads against: a real form-associated
+    // custom element. Subclasses inherit this automatically.
+    static { this.formAssociated = true; }
+    // Forward focus to the inner control so the host participating in a label or
+    // tabindex chain delegates to the real control.
+    static { this.shadowRootOptions = {
+        ...LitElement.shadowRootOptions,
+        delegatesFocus: true,
+    }; }
+    constructor() {
+        super();
+        this.label = "";
+        this.helper = "";
+        /** Severity copy. Non-empty ⇒ the field is in error (icon + copy, never color). */
+        this.error = "";
+        this.size = "md";
+        this.required = false;
+        this.disabled = false;
+        this.readonly = false;
+        this.loading = false;
+        /** Form-control name — mirrors native <input name>. */
+        this.name = "";
+        /** INITIAL value (uncontrolled-first, AD-6): the `value` attribute seeds the
+            live state once, then never overrides user input. Mapped from attribute
+            `value` so authors write `<xm-text-field value="…">`. */
+        this.initialValue = "";
+        /** INITIAL checked for toggle subclasses; mapped from attribute `checked`. */
+        this.initialChecked = false;
+        /** Live value state — seeded from `initialValue`, then owned by the field. */
+        this._value = "";
+        /** Live checked state (toggle subclasses) — seeded from `initialChecked`. */
+        this._checked = false;
+        /** True once a toggle subclass has declared itself, so the form value is
+            submitted as checked-state rather than text. Set eagerly by overriding
+            `isToggle`, or lazily on the first `emitToggle`. */
+        this._toggle = false;
+        /** OR-propagated disabled flag a future xm-form sets — never re-enables a
+            self-disabled field (AD-6a / AD-9a). */
+        this._formDisabled = false;
+        this._seq = ++fieldIdSeq;
+        this._controlId = `xm-field-control-${this._seq}`;
+        this._describedById = `xm-field-desc-${this._seq}`;
+        this._valueSeeded = false;
+        // Flips the first time the user (or a programmatic value/checked set) touches
+        // the field. Once dirty, the initial attribute never re-seeds — so a later
+        // `value`/`checked` attribute change can't clobber a deliberately-cleared
+        // value or a user-unchecked toggle (uncontrolled-first, AD-6). Protected so a
+        // subclass with a bespoke commit path (e.g. xm-select) can mark touched.
+        this._dirty = false;
+        this.internals = this.attachInternals();
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        if (!this._valueSeeded) {
+            this._value = this.initialValue;
+            this._checked = this.initialChecked;
+            this._valueSeeded = true;
+            this._syncFormValue();
+        }
+    }
+    willUpdate(changed) {
+        // Before first paint the attribute seed may arrive after connectedCallback
+        // (declarative attributes parse first, but guard anyway): only re-seed
+        // while still in the initial, UNTOUCHED state. `_dirty` (not `_value === ""`)
+        // is the touched signal — an empty value can be a deliberate user clear, and
+        // re-seeding over that would break uncontrolled-first (AD-6).
+        if (!this._valueSeeded || this._dirty)
+            return;
+        if (changed.has("initialValue")) {
+            this._value = this.initialValue;
+        }
+        if (changed.has("initialChecked")) {
+            this._checked = this.initialChecked;
+        }
+    }
+    /** Whether this field submits checked-state (toggle) rather than text. Toggle
+        subclasses (checkbox / radio / switch) override this to return `true` so
+        their form value is correct from first paint — before any interaction —
+        and is never inferred from `initialChecked` (a declaratively-checked text
+        field must NOT be treated as a toggle, and an untouched unchecked toggle
+        must submit `null`, not `""`). */
+    get isToggle() {
+        return this._toggle;
+    }
+    /** Effective disabled = own disabled OR a future xm-form down-propagation.
+        OR semantics: neither source can re-enable what the other disabled. */
+    get effectiveDisabled() {
+        return this.disabled || this._formDisabled;
+    }
+    /** Non-interactive whenever disabled (either source), readonly, or loading. */
+    get nonInteractive() {
+        return this.effectiveDisabled || this.readonly || this.loading;
+    }
+    get isError() {
+        return this.error.trim().length > 0;
+    }
+    /** True when the message row has helper or error copy to describe. */
+    get hasMessage() {
+        return (this.isError ? this.error : this.helper).length > 0;
+    }
+    /** Public read contract for xm-form (AD-6a/AD-12): live value, no shadow reach. */
+    get value() {
+        return this._value;
+    }
+    /** Programmatic reset support — setting `value` after first paint updates live state. */
+    set value(next) {
+        if (this._valueSeeded) {
+            this._dirty = true;
+            this._value = next;
+            this._syncFormValue();
+        }
+        else {
+            this.initialValue = next;
+        }
+    }
+    /** Public read contract for toggle subclasses (AD-6a). */
+    get checked() {
+        return this._checked;
+    }
+    set checked(next) {
+        if (this._valueSeeded) {
+            this._dirty = true;
+            this._checked = next;
+            this._syncFormValue();
+        }
+        else {
+            this.initialChecked = next;
+        }
+    }
+    /** Down-propagation hook: xm-form (Story 2.10) sets this; it OR's with the
+        field's own disabled and can never re-enable a self-disabled field. */
+    setFormDisabled(disabled) {
+        this._formDisabled = disabled;
+    }
+    // ── Input lifecycle (subclasses call these from their control handlers) ──
+    /** Per-keystroke / per-drag live update. Updates live state, syncs the form
+        value, and emits a composed, bubbling `input` with a typed primitive detail. */
+    emitInput(value) {
+        this._dirty = true;
+        this._value = value;
+        this._syncFormValue();
+        this.dispatchEvent(new CustomEvent("input", {
+            bubbles: true,
+            composed: true,
+            detail: { value },
+        }));
+    }
+    /** Commit. Same payload shape as input; fire on blur / Enter / native change. */
+    emitChange(value) {
+        this._dirty = true;
+        this._value = value;
+        this._syncFormValue();
+        this.dispatchEvent(new CustomEvent("change", {
+            bubbles: true,
+            composed: true,
+            detail: { value },
+        }));
+    }
+    /** Toggle commit — marks the field a toggle and emits `detail.checked` (AD-8a). */
+    emitToggle(checked) {
+        this._dirty = true;
+        this._toggle = true;
+        this._checked = checked;
+        this._syncFormValue();
+        this.dispatchEvent(new CustomEvent("change", {
+            bubbles: true,
+            composed: true,
+            detail: { checked },
+        }));
+    }
+    _syncFormValue() {
+        if (this.isToggle) {
+            // Match native checkbox/radio: checked submits "on" (or a subclass value),
+            // unchecked submits NOTHING (null) — never an empty string.
+            this.internals.setFormValue(this._checked ? "on" : null);
+        }
+        else {
+            this.internals.setFormValue(this._value);
+        }
+    }
+    /**
+     * The ARIA hooks the chrome wires. Subclasses set `id`, `aria-describedby`,
+     * `aria-invalid`, and `aria-required` on their control element from these so
+     * the rendered label associates with the control and the error string is
+     * announced (NFR-13 / UX-DR7).
+     */
+    get controlAria() {
+        return {
+            id: this._controlId,
+            describedBy: this.hasMessage ? this._describedById : undefined,
+            invalid: this.isError ? "true" : undefined,
+            required: this.required ? "true" : undefined,
+        };
+    }
+    /**
+     * Subclasses override to render their concrete control directly into shadow
+     * DOM. The default projects whatever the author slots as `slot="control"`,
+     * so a subclass can also author the control as a light-DOM child. Either
+     * path keeps the chrome on the base (AD-7).
+     */
+    renderControl() {
+        return html `<slot name="control"></slot>`;
+    }
+    render() {
+        const sizeClass = `field--${this.size}`;
+        const stateClass = [
+            this.effectiveDisabled ? "field--disabled" : "",
+            this.readonly ? "field--readonly" : "",
+            this.loading ? "field--loading" : "",
+            this.isError ? "field--error" : "",
+        ]
+            .filter(Boolean)
+            .join(" ");
+        const cls = `field ${sizeClass} ${stateClass}`.replace(/\s+/g, " ").trim();
+        const helperText = this.isError ? this.error : this.helper;
+        const ctrl = this.controlAria;
+        return html `
+      <link rel="stylesheet" href="${PRIMITIVES_CSS}" />
+      <link rel="stylesheet" href="${FIELD_CSS}" />
+      <style>
+        :host {
+          display: block;
+        }
+        :host([hidden]) {
+          display: none;
+        }
+      </style>
+      <div class="${cls}" aria-busy=${this.loading ? "true" : nothing}>
+        ${this.label
+            ? html `<label class="field__label" for="${ctrl.id}">
+              <span class="field__label-text">${this.label}</span>
+              ${this.required
+                ? html `<span class="field__required" aria-hidden="true">*</span>`
+                : nothing}
+            </label>`
+            : nothing}
+
+        <div class="field__control">
+          ${this.loading
+            ? html `<span
+                class="field__loading"
+                role="status"
+                aria-label="Loading"
+              >
+                <xm-spinner size="16"></xm-spinner>
+              </span>`
+            : this.renderControl()}
+        </div>
+
+        ${helperText
+            ? html `<div
+              class="field__message ${this.isError
+                ? "field__message--error"
+                : "field__message--helper"}"
+              id="${this._describedById}"
+              role=${this.isError ? "alert" : nothing}
+            >
+              ${this.isError
+                ? html `<span class="field__error-icon" aria-hidden="true">
+                    <svg
+                      width="14"
+                      height="14"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      stroke-width="1.8"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      class="ds-icon"
+                    >
+                      <circle cx="12" cy="12" r="10" />
+                      <path d="M12 8v5M12 16h.01" />
+                    </svg>
+                  </span>`
+                : nothing}
+              <span class="field__message-text">${helperText}</span>
+            </div>`
+            : html `<div class="field__message field__message--empty"></div>`}
+      </div>
+    `;
+    }
+}
+__decorate([
+    property({ type: String })
+], XmField.prototype, "label", void 0);
+__decorate([
+    property({ type: String })
+], XmField.prototype, "helper", void 0);
+__decorate([
+    property({ type: String })
+], XmField.prototype, "error", void 0);
+__decorate([
+    property({ type: String })
+], XmField.prototype, "size", void 0);
+__decorate([
+    property({ type: Boolean })
+], XmField.prototype, "required", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], XmField.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], XmField.prototype, "readonly", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], XmField.prototype, "loading", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], XmField.prototype, "name", void 0);
+__decorate([
+    property({ type: String, attribute: "value" })
+], XmField.prototype, "initialValue", void 0);
+__decorate([
+    property({ type: Boolean, attribute: "checked" })
+], XmField.prototype, "initialChecked", void 0);
+__decorate([
+    state()
+], XmField.prototype, "_value", void 0);
+__decorate([
+    state()
+], XmField.prototype, "_checked", void 0);
+__decorate([
+    state()
+], XmField.prototype, "_toggle", void 0);
+__decorate([
+    state()
+], XmField.prototype, "_formDisabled", void 0);

package/dist/lit/components/file-input/index.css

@@ -0,0 +1,257 @@
+/* ============================================
+   xm-file-input — generic file picker / dropzone on XmField (Story 2.9).
+
+   Extends XmField for chrome but renders its own layout: a label row, a dropzone
+   surface (the focusable button), the selected-file rows, and the helper/error
+   row. State machinery (disabled / form-association / focus / ARIA) is inherited;
+   this file styles the dropzone, file rows, and the byte-size text.
+
+   Surface & ink (AD-13): the dropzone rides the inverse-surface card tier —
+   primary copy is inverse-on-surface, the secondary hint + size are the muted
+   tier. The icon takes the card ink.
+
+   Borders: the dropzone is a hairline 1px (outline-variant → outline on hover).
+   The DRAG-ACTIVE state is the ONE place a 2px border is allowed — 2px solid the
+   coral --md-sys-color-primary, with the focus-ring halo. Coral here signals the
+   live drop target, never severity (AD-11). Errors are the warn icon + copy.
+
+   BEM block: `file-input`. Registered in scripts/check-bem.sh STRICT_BLOCKS.
+   ============================================ */
+
+.file-input {
+  display: flex;
+  flex-direction: column;
+  gap: var(--s-2);
+  width: 100%;
+}
+
+/* ---------- Label ---------- */
+.file-input__label {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--s-1);
+  color: var(--md-sys-color-inverse-on-surface);
+  font:
+    var(--md-sys-typescale-label-large-weight)
+    var(--md-sys-typescale-label-large-size) /
+    var(--md-sys-typescale-label-large-line-height)
+    var(--md-sys-typescale-label-large-font);
+}
+.file-input__label-text {
+  letter-spacing: 0;
+}
+.file-input__required {
+  color: var(--md-sys-color-primary);
+  font-weight: 700;
+  line-height: 1;
+}
+
+/* ---------- Hidden native input — kept out of layout + tab order ---------- */
+.file-input__native {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* ---------- Dropzone — the focusable button surface ---------- */
+.file-input__dropzone {
+  display: flex;
+  align-items: center;
+  gap: var(--s-3);
+  box-sizing: border-box;
+  padding: var(--s-4) var(--s-4);
+  /* Hairline + a 1px transparent inset so the box does not jump when the
+     drag-active 2px border lands (the inset absorbs the extra 1px). */
+  border: 1px solid var(--md-sys-color-outline-variant);
+  outline: 1px solid transparent;
+  outline-offset: -2px;
+  border-radius: var(--md-sys-shape-corner-button);
+  background: var(--md-sys-color-inverse-surface);
+  color: var(--md-sys-color-inverse-on-surface);
+  cursor: pointer;
+  transition:
+    border-color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard),
+    box-shadow var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
+}
+.file-input__dropzone:hover {
+  border-color: var(--md-sys-color-outline);
+}
+.file-input__dropzone:focus-visible {
+  outline: none;
+  border-color: var(--md-sys-color-primary);
+  box-shadow: var(--xm-state-focus-ring);
+}
+
+.file-input__icon {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  color: var(--md-sys-color-inverse-on-surface);
+}
+.file-input__copy {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  min-width: 0;
+}
+.file-input__primary {
+  color: var(--md-sys-color-inverse-on-surface);
+  font:
+    var(--md-sys-typescale-body-medium-weight)
+    var(--md-sys-typescale-body-medium-size) /
+    var(--md-sys-typescale-body-medium-line-height)
+    var(--md-sys-typescale-body-medium-font);
+}
+.file-input__secondary {
+  color: var(--xm-color-inverse-on-surface-muted);
+  font:
+    var(--md-sys-typescale-body-small-weight)
+    var(--md-sys-typescale-body-small-size) /
+    var(--md-sys-typescale-body-small-line-height)
+    var(--md-sys-typescale-body-small-font);
+}
+
+/* ---------- Drag-active — the ONLY 2px border in the system ---------- */
+.file-input--drag-active .file-input__dropzone {
+  border: 2px solid var(--md-sys-color-primary);
+  box-shadow: var(--xm-state-focus-ring);
+}
+
+/* ---------- Selected-file rows — raised level1 cards ---------- */
+.file-input__files {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--s-2);
+}
+.file-input__file {
+  display: flex;
+  align-items: center;
+  gap: var(--s-2);
+  box-sizing: border-box;
+  padding: var(--s-2) var(--s-3);
+  border: 1px solid var(--md-sys-color-outline-variant);
+  border-radius: var(--md-sys-shape-corner-small);
+  background: var(--md-sys-color-inverse-surface);
+  box-shadow: var(--md-sys-elevation-level1);
+}
+.file-input__file-icon {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  color: var(--md-sys-color-inverse-on-surface);
+}
+.file-input__file-name {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  color: var(--md-sys-color-inverse-on-surface);
+  font:
+    var(--md-sys-typescale-body-medium-weight)
+    var(--md-sys-typescale-body-medium-size) /
+    var(--md-sys-typescale-body-medium-line-height)
+    var(--md-sys-typescale-body-medium-font);
+}
+.file-input__file-size {
+  flex-shrink: 0;
+  color: var(--xm-color-inverse-on-surface-muted);
+  font:
+    var(--xm-typescale-mono-weight)
+    var(--xm-typescale-mono-size) /
+    var(--xm-typescale-mono-line-height)
+    var(--xm-typescale-mono-font);
+}
+.file-input__remove {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 20px;
+  height: 20px;
+  padding: 0;
+  border: none;
+  border-radius: var(--md-sys-shape-corner-full);
+  background: transparent;
+  color: var(--xm-color-inverse-on-surface-muted);
+  cursor: pointer;
+  transition: background var(--md-sys-motion-duration-short3)
+    var(--md-sys-motion-easing-standard);
+}
+.file-input__remove:hover {
+  background: color-mix(
+    in oklab,
+    var(--md-sys-color-inverse-on-surface)
+      var(--md-sys-state-hover-state-layer-opacity),
+    transparent
+  );
+  color: var(--md-sys-color-inverse-on-surface);
+}
+.file-input__remove:focus-visible {
+  outline: none;
+  box-shadow: var(--xm-state-focus-ring);
+}
+
+/* ---------- Disabled — reduced emphasis ----------
+   No opacity (it would dim the copy below AA). The dropzone children
+   (__primary / __secondary / __icon) each set their own color, so the swap
+   must target them directly — they do NOT inherit a color set on __dropzone.
+   A muted container fill restores the visual "disabled" cue the opacity used
+   to give. */
+.file-input--disabled .file-input__dropzone {
+  cursor: not-allowed;
+  background: color-mix(in oklab, var(--md-sys-color-inverse-on-surface) 5%, var(--md-sys-color-inverse-surface));
+  border-color: var(--md-sys-color-outline-variant);
+}
+.file-input--disabled .file-input__dropzone:hover {
+  border-color: var(--md-sys-color-outline-variant);
+}
+.file-input--disabled .file-input__primary,
+.file-input--disabled .file-input__secondary,
+.file-input--disabled .file-input__icon {
+  color: var(--xm-color-inverse-on-surface-disabled);
+}
+.file-input--disabled .file-input__label {
+  color: var(--xm-color-inverse-on-surface-disabled);
+}
+
+/* ---------- Helper / error message row ----------
+   Severity is the warn icon + copy, not a color (rule 3a). */
+.file-input__message {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--s-1);
+  min-height: 1em;
+  font:
+    var(--md-sys-typescale-body-small-weight)
+    var(--md-sys-typescale-body-small-size) /
+    var(--md-sys-typescale-body-small-line-height)
+    var(--md-sys-typescale-body-small-font);
+}
+.file-input__message--helper {
+  color: var(--xm-color-inverse-on-surface-muted);
+}
+.file-input__message--error {
+  color: var(--md-sys-color-inverse-on-surface);
+}
+.file-input__error-icon {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  margin-top: 1px;
+  color: var(--md-sys-color-inverse-on-surface);
+}
+.file-input__message-text {
+  flex: 1;
+  min-width: 0;
+  text-wrap: pretty;
+}

package/dist/lit/components/file-input/index.d.ts

@@ -0,0 +1,30 @@
+import type { TemplateResult } from "lit";
+import { XmField } from "../field/index.js";
+export declare class XmFileInput extends XmField {
+    /** Native accept filter (e.g. ".yml,.json,image/*"). */
+    accept: string;
+    /** Allow selecting more than one file. */
+    multiple: boolean;
+    private _files;
+    private _dragActive;
+    private _native;
+    /** Public read contract (AD-6a) — the selected files. */
+    get files(): File[];
+    private _setFiles;
+    private _openPicker;
+    private _onNativeChange;
+    private _onKeydown;
+    private _onDragOver;
+    private _onDragLeave;
+    /** Does a dropped file satisfy the `accept` list? Mirrors the native picker so
+        drag-drop and click-to-pick enforce the same filter. */
+    private _accepts;
+    private _onDrop;
+    private _removeFile;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "xm-file-input": XmFileInput;
+    }
+}