@solid-design-system/components 1.0.0

package/dist/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-include")
+], SdInclude);
+export {
+  SdInclude as default
+};

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

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

package/dist/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/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/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/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-link': SdLink;
+    }
+}

package/dist/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-icon){font-size:1.25em;margin-bottom:-.25em}:host([size=sm][standalone]) ::slotted(sd-icon){font-size:1rem}:host([size=lg][standalone]) ::slotted(sd-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-link")
+], SdLink);
+export {
+  SdLink as default
+};

package/dist/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-spinner': SdSpinner;
+    }
+}

package/dist/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-spinner")
+], SdSpinner);
+export {
+  SdSpinner as default
+};

package/dist/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/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-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
+};

package/dist/package/internal/slot.d.ts

@@ -0,0 +1,14 @@
+import type { ReactiveController, ReactiveControllerHost } from 'lit';
+export declare class HasSlotController implements ReactiveController {
+    host: ReactiveControllerHost & Element;
+    slotNames: string[];
+    constructor(host: ReactiveControllerHost & Element, ...slotNames: string[]);
+    private hasDefaultSlot;
+    private hasNamedSlot;
+    test(slotName: string): boolean;
+    hostConnected(): void;
+    hostDisconnected(): void;
+    handleSlotChange(event: Event): void;
+}
+export declare function getInnerHTML(slot: HTMLSlotElement): string;
+export declare function getTextContent(slot: HTMLSlotElement | undefined | null): string;

package/dist/package/internal/slot.js

@@ -0,0 +1,47 @@
+class HasSlotController {
+  constructor(host, ...slotNames) {
+    this.slotNames = [];
+    (this.host = host).addController(this);
+    this.slotNames = slotNames;
+    this.handleSlotChange = this.handleSlotChange.bind(this);
+  }
+  hasDefaultSlot() {
+    return [...this.host.childNodes].some((node) => {
+      if (node.nodeType === node.TEXT_NODE && node.textContent.trim() !== "") {
+        return true;
+      }
+      if (node.nodeType === node.ELEMENT_NODE) {
+        const el = node;
+        const tagName = el.tagName.toLowerCase();
+        if (tagName === "sd-visually-hidden") {
+          return false;
+        }
+        if (!el.hasAttribute("slot")) {
+          return true;
+        }
+      }
+      return false;
+    });
+  }
+  hasNamedSlot(name) {
+    return this.host.querySelector(`:scope > [slot="${name}"]`) !== null;
+  }
+  test(slotName) {
+    return slotName === "[default]" ? this.hasDefaultSlot() : this.hasNamedSlot(slotName);
+  }
+  hostConnected() {
+    this.host.shadowRoot.addEventListener("slotchange", this.handleSlotChange);
+  }
+  hostDisconnected() {
+    this.host.shadowRoot.removeEventListener("slotchange", this.handleSlotChange);
+  }
+  handleSlotChange(event) {
+    const slot = event.target;
+    if (this.slotNames.includes("[default]") && !slot.name || slot.name && this.slotNames.includes(slot.name)) {
+      this.host.requestUpdate();
+    }
+  }
+}
+export {
+  HasSlotController
+};

package/dist/package/internal/solid-element.d.ts

@@ -0,0 +1,26 @@
+import { LitElement } from 'lit';
+import type { CSSResultGroup } from 'lit';
+export default class SolidElement extends LitElement {
+    dir: string;
+    lang: string;
+    static styles: CSSResultGroup;
+    emit(name: string, options?: CustomEventInit): CustomEvent<any>;
+}
+export interface SolidFormControl extends SolidElement {
+    name: string;
+    value: unknown;
+    disabled?: boolean;
+    defaultValue?: unknown;
+    defaultChecked?: boolean;
+    form?: string;
+    pattern?: string;
+    min?: number | Date;
+    max?: number | Date;
+    step?: number | 'any';
+    required?: boolean;
+    minlength?: number;
+    maxlength?: number;
+    checkValidity: () => boolean;
+    reportValidity: () => boolean;
+    setCustomValidity: (message: string) => void;
+}

package/dist/package/internal/solid-element.js

@@ -0,0 +1,38 @@
+import { unsafeCSS, LitElement } from "lit";
+import { property } from "lit/decorators.js";
+import tailwind from "../styles/tailwind.css.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;
+};
+class SolidElement extends LitElement {
+  /** Emits a custom event with more convenient defaults. */
+  emit(name, options) {
+    const event = new CustomEvent(name, {
+      bubbles: true,
+      cancelable: false,
+      composed: true,
+      detail: {},
+      ...options
+    });
+    this.dispatchEvent(event);
+    return event;
+  }
+}
+SolidElement.styles = unsafeCSS(tailwind);
+__decorateClass([
+  property()
+], SolidElement.prototype, "dir", 2);
+__decorateClass([
+  property()
+], SolidElement.prototype, "lang", 2);
+export {
+  SolidElement as default
+};