@solid-design-system/components 1.0.0

package/dist/versioned-package/components/icon/library.d.ts

@@ -0,0 +1,16 @@
+import type SdIcon from '../icon/icon';
+export type IconLibraryResolver = (name: string) => string;
+export type IconLibraryMutator = (svg: SVGElement) => void;
+export interface IconLibrary {
+    name: string;
+    resolver: IconLibraryResolver;
+    mutator?: IconLibraryMutator;
+}
+export declare function watchIcon(icon: SdIcon): void;
+export declare function unwatchIcon(icon: SdIcon): void;
+export declare function getIconLibrary(name?: string): IconLibrary | undefined;
+export declare function registerIconLibrary(name: string, options: {
+    resolver: IconLibraryResolver;
+    mutator?: IconLibraryMutator;
+}): void;
+export declare function unregisterIconLibrary(name: string): void;

package/dist/versioned-package/components/icon/library.js

@@ -0,0 +1,17 @@
+import systemLibrary from "./library.system.js";
+let registry = [systemLibrary];
+let watchedIcons = [];
+function watchIcon(icon) {
+  watchedIcons.push(icon);
+}
+function unwatchIcon(icon) {
+  watchedIcons = watchedIcons.filter((el) => el !== icon);
+}
+function getIconLibrary(name) {
+  return registry.find((lib) => lib.name === name);
+}
+export {
+  getIconLibrary,
+  unwatchIcon,
+  watchIcon
+};

package/dist/versioned-package/components/icon/library.system.d.ts

@@ -0,0 +1,7 @@
+import type { IconLibrary } from './library';
+export declare const icons: {
+    'chevron-down': string;
+    'chevron-up': string;
+};
+declare const systemLibrary: IconLibrary;
+export default systemLibrary;

package/dist/versioned-package/components/icon/library.system.js

@@ -0,0 +1,26 @@
+const icons = {
+  "chevron-down": `
+    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+      <path d="M20.257 6.333l-8.257 9.173-8.257-9.173c-0.181-0.181-0.431-0.292-0.707-0.292-0.552 0-1 0.448-1 1 0 0.238 0.083 0.456 0.222 0.628l-0.001-0.002 9 10c0.184 0.204 0.449 0.331 0.743 0.331s0.56-0.127 0.743-0.33l0.001-0.001 9-10c0.137-0.17 0.22-0.388 0.22-0.626 0-0.552-0.448-1-1-1-0.276 0-0.526 0.112-0.707 0.293v0z"></path>
+    </svg>
+  `,
+  "chevron-up": `
+    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+      <path d="M12.743 6.333c-0.188-0.195-0.452-0.316-0.743-0.316s-0.555 0.121-0.743 0.315l-0 0-9 10c-0.137 0.17-0.22 0.388-0.22 0.626 0 0.552 0.448 1 1 1 0.276 0 0.526-0.112 0.707-0.293v0l8.257-9.173 8.257 9.173c0.181 0.181 0.431 0.292 0.707 0.292 0.552 0 1-0.448 1-1 0-0.238-0.083-0.456-0.222-0.628l0.001 0.002z"></path>
+    </svg>
+  `
+};
+const systemLibrary = {
+  name: "system",
+  resolver: (name) => {
+    if (name in icons) {
+      return `data:image/svg+xml,${encodeURIComponent(icons[name])}`;
+    }
+    return "";
+  },
+  mutator: (svg) => svg.setAttribute("fill", "currentColor")
+};
+export {
+  systemLibrary as default,
+  icons
+};

package/dist/versioned-package/components/icon/request.d.ts

@@ -0,0 +1,11 @@
+type IconFile = {
+    ok: true;
+    status: number;
+    svg: string;
+} | {
+    ok: false;
+    status: number;
+    svg: null;
+};
+export declare function requestIcon(url: string): Promise<IconFile>;
+export {};

package/dist/versioned-package/components/icon/request.js

@@ -0,0 +1,24 @@
+import { requestInclude } from "../include/request.js";
+const iconFiles = /* @__PURE__ */ new Map();
+async function requestIcon(url) {
+  if (iconFiles.has(url)) {
+    return iconFiles.get(url);
+  }
+  const fileData = await requestInclude(url);
+  const iconFileData = {
+    ok: fileData.ok,
+    status: fileData.status,
+    svg: null
+  };
+  if (fileData.ok) {
+    const div = document.createElement("div");
+    div.innerHTML = fileData.html;
+    const svg = div.firstElementChild;
+    iconFileData.svg = (svg == null ? void 0 : svg.tagName.toLowerCase()) === "svg" ? svg.outerHTML : "";
+  }
+  iconFiles.set(url, iconFileData);
+  return iconFileData;
+}
+export {
+  requestIcon
+};

package/dist/versioned-package/components/include/include.d.ts

@@ -0,0 +1,16 @@
+import SolidElement from '../../internal/solid-element';
+import type { CSSResultGroup } from 'lit';
+export default class SdInclude extends SolidElement {
+    static styles: CSSResultGroup;
+    src: string;
+    mode: 'cors' | 'no-cors' | 'same-origin';
+    allowScripts: boolean;
+    private executeScript;
+    handleSrcChange(): Promise<void>;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sd-1-0-0-include': SdInclude;
+    }
+}

package/dist/versioned-package/components/include/include.js

@@ -0,0 +1,72 @@
+import { property, customElement } from "lit/decorators.js";
+import { html } from "lit";
+import { requestInclude } from "./request.js";
+import { watch } from "../../internal/watch.js";
+import SolidElement from "../../internal/solid-element.js";
+import styles from "./include.styles.js";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result)
+    __defProp(target, key, result);
+  return result;
+};
+let SdInclude = class extends SolidElement {
+  constructor() {
+    super(...arguments);
+    this.mode = "cors";
+    this.allowScripts = false;
+  }
+  executeScript(script) {
+    const newScript = document.createElement("script");
+    [...script.attributes].forEach((attr) => newScript.setAttribute(attr.name, attr.value));
+    newScript.textContent = script.textContent;
+    script.parentNode.replaceChild(newScript, script);
+  }
+  async handleSrcChange() {
+    try {
+      const src = this.src;
+      const file = await requestInclude(src, this.mode);
+      if (src !== this.src) {
+        return;
+      }
+      if (!file.ok) {
+        this.emit("sd-error", { detail: { status: file.status } });
+        return;
+      }
+      this.innerHTML = file.html;
+      if (this.allowScripts) {
+        [...this.querySelectorAll("script")].forEach((script) => this.executeScript(script));
+      }
+      this.emit("sd-load");
+    } catch {
+      this.emit("sd-error", { detail: { status: -1 } });
+    }
+  }
+  render() {
+    return html`<slot></slot>`;
+  }
+};
+SdInclude.styles = styles;
+__decorateClass([
+  property()
+], SdInclude.prototype, "src", 2);
+__decorateClass([
+  property()
+], SdInclude.prototype, "mode", 2);
+__decorateClass([
+  property({ attribute: "allow-scripts", type: Boolean })
+], SdInclude.prototype, "allowScripts", 2);
+__decorateClass([
+  watch("src")
+], SdInclude.prototype, "handleSrcChange", 1);
+SdInclude = __decorateClass([
+  customElement("sd-1-0-0-include")
+], SdInclude);
+export {
+  SdInclude as default
+};

package/dist/versioned-package/components/include/include.styles.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult;
+export default _default;

package/dist/versioned-package/components/include/include.styles.js

@@ -0,0 +1,6 @@
+import { css } from "lit";
+import componentStyles from "../../styles/component.styles.js";
+const styles = css`${componentStyles}:host{display:block}`;
+export {
+  styles as default
+};

package/dist/versioned-package/components/include/request.d.ts

@@ -0,0 +1,7 @@
+interface IncludeFile {
+    ok: boolean;
+    status: number;
+    html: string;
+}
+export declare function requestInclude(src: string, mode?: 'cors' | 'no-cors' | 'same-origin'): Promise<IncludeFile>;
+export {};

package/dist/versioned-package/components/include/request.js

@@ -0,0 +1,18 @@
+const includeFiles = /* @__PURE__ */ new Map();
+function requestInclude(src, mode = "cors") {
+  if (includeFiles.has(src)) {
+    return includeFiles.get(src);
+  }
+  const fileDataPromise = fetch(src, { mode }).then(async (response) => {
+    return {
+      ok: response.ok,
+      status: response.status,
+      html: await response.text()
+    };
+  });
+  includeFiles.set(src, fileDataPromise);
+  return fileDataPromise;
+}
+export {
+  requestInclude
+};

package/dist/versioned-package/components/link/link.d.ts

@@ -0,0 +1,22 @@
+import SolidElement from '../../internal/solid-element';
+export default class SdLink extends SolidElement {
+    private readonly hasSlotController;
+    button: HTMLButtonElement | HTMLLinkElement;
+    size: 'inherit' | 'lg' | 'sm';
+    inverted: boolean;
+    standalone: boolean;
+    href: string;
+    target: '_blank' | '_parent' | '_self' | '_top';
+    download?: string;
+    private handleBlur;
+    private handleFocus;
+    focus(options?: FocusOptions): void;
+    blur(): void;
+    render(): import("lit").TemplateResult<1>;
+    static styles: import("lit").CSSResultGroup[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sd-1-0-0-link': SdLink;
+    }
+}

package/dist/versioned-package/components/link/link.js

@@ -0,0 +1,107 @@
+import { css, html } from "lit";
+import { query, property, customElement } from "lit/decorators.js";
+import { HasSlotController } from "../../internal/slot.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import cx from "classix";
+import SolidElement from "../../internal/solid-element.js";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result)
+    __defProp(target, key, result);
+  return result;
+};
+let SdLink = class extends SolidElement {
+  constructor() {
+    super(...arguments);
+    this.hasSlotController = new HasSlotController(this, "[default]", "icon-left", "icon-right");
+    this.size = "inherit";
+    this.inverted = false;
+    this.standalone = false;
+    this.href = "";
+  }
+  handleBlur() {
+    this.emit("sd-blur");
+  }
+  handleFocus() {
+    this.emit("sd-focus");
+  }
+  /** Sets focus on the button. */
+  focus(options) {
+    this.button.focus(options);
+  }
+  /** Removes focus from the button. */
+  blur() {
+    this.button.blur();
+  }
+  render() {
+    const slots = {
+      label: this.hasSlotController.test("[default]"),
+      "icon-left": this.hasSlotController.test("icon-left"),
+      "icon-right": this.hasSlotController.test("icon-right")
+    };
+    return html`<a part="base" class="${cx(
+      "inline",
+      this.href ? "cursor-pointer" : "",
+      {
+        sm: "text-sm",
+        lg: "text-base",
+        inherit: ""
+      }[this.size],
+      {
+        disabled: !this.inverted ? "text-neutral-500" : "text-neutral-600",
+        enabled: !this.inverted ? ` text-primary hover:text-primary-500 active:text-primary-800 focus-visible:focus-outline` : `text-white hover:text-primary-200 active:text-primary-400 focus-visible:focus-outline-inverted`
+      }[this.href ? "enabled" : "disabled"],
+      this.standalone && "flex items-start"
+    )}" href="${ifDefined(this.href || void 0)}" target="${ifDefined(this.target || void 0)}" download="${ifDefined(this.download || void 0)}" rel="${ifDefined(this.target ? "noreferrer noopener" : void 0)}" aria-disabled="${!this.href ? "true" : "false"}" tabindex="${!this.href ? "-1" : "0"}" @blur="${this.handleBlur}" @focus="${this.handleFocus}"><slot name="icon-left" part="icon-left" class="${cx(
+      "inline",
+      slots["icon-left"] && (!this.standalone ? "mr-[0.25em]" : {
+        sm: "mr-1",
+        lg: "mr-2",
+        inherit: "mr-[0.5em]"
+      }[this.size])
+    )}"></slot><span part="label" class="inline underline underline-offset-2"><slot></slot></span><slot name="icon-right" part="icon-right" class="${cx(
+      "inline",
+      slots["icon-right"] && (!this.standalone ? "ml-[0.25em]" : {
+        sm: "ml-1",
+        lg: "ml-2",
+        inherit: "ml-[0.5em]"
+      }[this.size])
+    )}"></slot></a>`;
+  }
+};
+SdLink.styles = [
+  SolidElement.styles,
+  css`::slotted(sd-1-0-0-icon){font-size:1.25em;margin-bottom:-.25em}:host([size=sm][standalone]) ::slotted(sd-1-0-0-icon){font-size:1rem}:host([size=lg][standalone]) ::slotted(sd-1-0-0-icon){font-size:1.5rem}`
+];
+__decorateClass([
+  query("a")
+], SdLink.prototype, "button", 2);
+__decorateClass([
+  property({ reflect: true })
+], SdLink.prototype, "size", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SdLink.prototype, "inverted", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SdLink.prototype, "standalone", 2);
+__decorateClass([
+  property()
+], SdLink.prototype, "href", 2);
+__decorateClass([
+  property()
+], SdLink.prototype, "target", 2);
+__decorateClass([
+  property()
+], SdLink.prototype, "download", 2);
+SdLink = __decorateClass([
+  customElement("sd-1-0-0-link")
+], SdLink);
+export {
+  SdLink as default
+};

package/dist/versioned-package/components/spinner/spinner.d.ts

@@ -0,0 +1,12 @@
+import SolidElement from '../../internal/solid-element';
+export default class SdSpinner extends SolidElement {
+    color: 'primary' | 'white' | 'currentColor';
+    private readonly localize;
+    render(): import("lit").TemplateResult<1>;
+    static styles: import("lit").CSSResultGroup[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sd-1-0-0-spinner': SdSpinner;
+    }
+}

package/dist/versioned-package/components/spinner/spinner.js

@@ -0,0 +1,46 @@
+import { css, html } from "lit";
+import { property, customElement } from "lit/decorators.js";
+import { LocalizeController } from "../../utilities/localize.js";
+import cx from "classix";
+import SolidElement from "../../internal/solid-element.js";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result)
+    __defProp(target, key, result);
+  return result;
+};
+let SdSpinner = class extends SolidElement {
+  constructor() {
+    super(...arguments);
+    this.color = "currentColor";
+    this.localize = new LocalizeController(this);
+  }
+  render() {
+    return html`<svg role="progressbar" viewBox="0 0 24 24" class="${cx(
+      "animate-spin",
+      {
+        primary: "text-primary",
+        white: "text-white",
+        currentColor: ""
+      }[this.color]
+    )}" aria-valuetext="${this.localize.term("loading")}"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22ZM24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12Z" class="opacity-20" fill="currentColor"/><mask id="mask0_5273_25391" style="mask-type:alpha" maskUnits="userSpaceOnUse"><path d="M24 12C24 5.37258 18.6274 0 12 0V12H24Z" fill="currentColor"/></mask><g mask="url(#mask0_5273_25391)"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22ZM24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12Z" fill="currentColor"/></g></svg>`;
+  }
+};
+SdSpinner.styles = [
+  SolidElement.styles,
+  css`:host{display:inline-block;width:1em;height:1em}`
+];
+__decorateClass([
+  property({ reflect: true })
+], SdSpinner.prototype, "color", 2);
+SdSpinner = __decorateClass([
+  customElement("sd-1-0-0-spinner")
+], SdSpinner);
+export {
+  SdSpinner as default
+};

package/dist/versioned-package/internal/form.d.ts

@@ -0,0 +1,35 @@
+import type { ReactiveController, ReactiveControllerHost } from 'lit';
+import type { SolidFormControl } from '../internal/solid-element';
+import type SdButton from '../components/button/button';
+export declare const formCollections: WeakMap<HTMLFormElement, Set<SolidFormControl>>;
+export interface FormControlControllerOptions {
+    form: (input: SolidFormControl) => HTMLFormElement | null;
+    name: (input: SolidFormControl) => string;
+    value: (input: SolidFormControl) => unknown | unknown[];
+    defaultValue: (input: SolidFormControl) => unknown | unknown[];
+    disabled: (input: SolidFormControl) => boolean;
+    reportValidity: (input: SolidFormControl) => boolean;
+    setValue: (input: SolidFormControl, value: unknown) => void;
+}
+export declare class FormControlController implements ReactiveController {
+    host: SolidFormControl & ReactiveControllerHost;
+    form?: HTMLFormElement | null;
+    options: FormControlControllerOptions;
+    constructor(host: ReactiveControllerHost & SolidFormControl, options?: Partial<FormControlControllerOptions>);
+    hostConnected(): void;
+    hostDisconnected(): void;
+    hostUpdated(): void;
+    private attachForm;
+    private detachForm;
+    private handleFormData;
+    private handleFormSubmit;
+    private handleFormReset;
+    private handleUserInput;
+    private reportFormValidity;
+    private setUserInteracted;
+    private doAction;
+    reset(invoker?: HTMLInputElement | SdButton): void;
+    submit(invoker?: HTMLInputElement | SdButton): void;
+    setValidity(isValid: boolean): void;
+    updateValidity(): void;
+}

package/dist/versioned-package/internal/form.js

@@ -0,0 +1,212 @@
+const formCollections = /* @__PURE__ */ new WeakMap();
+const userInteractedControls = /* @__PURE__ */ new WeakMap();
+const reportValidityOverloads = /* @__PURE__ */ new WeakMap();
+class FormControlController {
+  constructor(host, options) {
+    (this.host = host).addController(this);
+    this.options = {
+      form: (input) => {
+        if (input.hasAttribute("form") && input.getAttribute("form") !== "") {
+          const root = input.getRootNode();
+          const formId = input.getAttribute("form");
+          if (formId) {
+            return root.getElementById(formId);
+          }
+        }
+        return input.closest("form");
+      },
+      name: (input) => input.name,
+      value: (input) => input.value,
+      defaultValue: (input) => input.defaultValue,
+      disabled: (input) => input.disabled ?? false,
+      reportValidity: (input) => typeof input.reportValidity === "function" ? input.reportValidity() : true,
+      setValue: (input, value) => input.value = value,
+      ...options
+    };
+    this.handleFormData = this.handleFormData.bind(this);
+    this.handleFormSubmit = this.handleFormSubmit.bind(this);
+    this.handleFormReset = this.handleFormReset.bind(this);
+    this.reportFormValidity = this.reportFormValidity.bind(this);
+    this.handleUserInput = this.handleUserInput.bind(this);
+  }
+  hostConnected() {
+    const form = this.options.form(this.host);
+    if (form) {
+      this.attachForm(form);
+    }
+    this.host.addEventListener("sd-input", this.handleUserInput);
+  }
+  hostDisconnected() {
+    this.detachForm();
+    this.host.removeEventListener("sd-input", this.handleUserInput);
+  }
+  hostUpdated() {
+    const form = this.options.form(this.host);
+    if (!form) {
+      this.detachForm();
+    }
+    if (form && this.form !== form) {
+      this.detachForm();
+      this.attachForm(form);
+    }
+    if (this.host.hasUpdated) {
+      this.setValidity(this.host.checkValidity());
+    }
+  }
+  attachForm(form) {
+    if (form) {
+      this.form = form;
+      if (formCollections.has(this.form)) {
+        formCollections.get(this.form).add(this.host);
+      } else {
+        formCollections.set(this.form, /* @__PURE__ */ new Set([this.host]));
+      }
+      this.form.addEventListener("formdata", this.handleFormData);
+      this.form.addEventListener("submit", this.handleFormSubmit);
+      this.form.addEventListener("reset", this.handleFormReset);
+      if (!reportValidityOverloads.has(this.form)) {
+        reportValidityOverloads.set(this.form, this.form.reportValidity);
+        this.form.reportValidity = () => this.reportFormValidity();
+      }
+    } else {
+      this.form = void 0;
+    }
+  }
+  detachForm() {
+    var _a;
+    if (this.form) {
+      (_a = formCollections.get(this.form)) == null ? void 0 : _a.delete(this.host);
+      this.form.removeEventListener("formdata", this.handleFormData);
+      this.form.removeEventListener("submit", this.handleFormSubmit);
+      this.form.removeEventListener("reset", this.handleFormReset);
+      if (reportValidityOverloads.has(this.form)) {
+        this.form.reportValidity = reportValidityOverloads.get(this.form);
+        reportValidityOverloads.delete(this.form);
+      }
+    }
+    this.form = void 0;
+  }
+  handleFormData(event) {
+    const disabled = this.options.disabled(this.host);
+    const name = this.options.name(this.host);
+    const value = this.options.value(this.host);
+    const isButton = this.host.tagName.toLowerCase() === "sd-1-0-0-button";
+    if (!disabled && !isButton && typeof name === "string" && name.length > 0 && typeof value !== "undefined") {
+      if (Array.isArray(value)) {
+        value.forEach((val) => {
+          event.formData.append(name, val.toString());
+        });
+      } else {
+        event.formData.append(name, value.toString());
+      }
+    }
+  }
+  handleFormSubmit(event) {
+    var _a;
+    const disabled = this.options.disabled(this.host);
+    const reportValidity = this.options.reportValidity;
+    if (this.form && !this.form.noValidate) {
+      (_a = formCollections.get(this.form)) == null ? void 0 : _a.forEach((control) => {
+        this.setUserInteracted(control, true);
+      });
+    }
+    if (this.form && !this.form.noValidate && !disabled && !reportValidity(this.host)) {
+      event.preventDefault();
+      event.stopImmediatePropagation();
+    }
+  }
+  handleFormReset() {
+    this.options.setValue(this.host, this.options.defaultValue(this.host));
+    this.setUserInteracted(this.host, false);
+  }
+  async handleUserInput() {
+    await this.host.updateComplete;
+    this.setUserInteracted(this.host, true);
+  }
+  reportFormValidity() {
+    if (this.form && !this.form.noValidate) {
+      const elements = this.form.querySelectorAll("*");
+      for (const element of elements) {
+        if (typeof element.reportValidity === "function") {
+          if (!element.reportValidity()) {
+            return false;
+          }
+        }
+      }
+    }
+    return true;
+  }
+  setUserInteracted(el, hasInteracted) {
+    userInteractedControls.set(el, hasInteracted);
+    el.requestUpdate();
+  }
+  doAction(type, invoker) {
+    if (this.form) {
+      const button = document.createElement("button");
+      button.type = type;
+      button.style.position = "absolute";
+      button.style.width = "0";
+      button.style.height = "0";
+      button.style.clipPath = "inset(50%)";
+      button.style.overflow = "hidden";
+      button.style.whiteSpace = "nowrap";
+      if (invoker) {
+        button.name = invoker.name;
+        button.value = invoker.value;
+        ["formaction", "formenctype", "formmethod", "formnovalidate", "formtarget"].forEach((attr) => {
+          if (invoker.hasAttribute(attr)) {
+            button.setAttribute(attr, invoker.getAttribute(attr));
+          }
+        });
+      }
+      this.form.append(button);
+      button.click();
+      button.remove();
+    }
+  }
+  /** Resets the form, restoring all the control to their default value */
+  reset(invoker) {
+    this.doAction("reset", invoker);
+  }
+  /** Submits the form, triggering validation and form data injection. */
+  submit(invoker) {
+    this.doAction("submit", invoker);
+  }
+  /**
+   * Synchronously sets the form control's validity. Call this when you know the future validity but need to update
+   * the host element immediately, i.e. before Lit updates the component in the next update.
+   */
+  setValidity(isValid) {
+    var _a;
+    const host = this.host;
+    const hasInteracted = Boolean(userInteractedControls.get(host));
+    const required = Boolean(host.required);
+    if ((_a = this.form) == null ? void 0 : _a.noValidate) {
+      host.removeAttribute("data-required");
+      host.removeAttribute("data-optional");
+      host.removeAttribute("data-invalid");
+      host.removeAttribute("data-valid");
+      host.removeAttribute("data-user-invalid");
+      host.removeAttribute("data-user-valid");
+    } else {
+      host.toggleAttribute("data-required", required);
+      host.toggleAttribute("data-optional", !required);
+      host.toggleAttribute("data-invalid", !isValid);
+      host.toggleAttribute("data-valid", isValid);
+      host.toggleAttribute("data-user-invalid", !isValid && hasInteracted);
+      host.toggleAttribute("data-user-valid", isValid && hasInteracted);
+    }
+  }
+  /**
+   * Updates the form control's validity based on the current value of `host.checkValidity()`. Call this when anything
+   * that affects constraint validation changes so the component receives the correct validity states.
+   */
+  updateValidity() {
+    const host = this.host;
+    this.setValidity(host.checkValidity());
+  }
+}
+export {
+  FormControlController,
+  formCollections
+};