@utrecht/web-component-library-stencil 1.0.0-alpha.45 → 1.0.0-alpha.451

package/dist/components/utrecht-table-body.js

@@ -0,0 +1,33 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const tableBodyCss = ":host{vertical-align:baseline;display:table-row-group}";
+
+const TableBody = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+  }
+  render() {
+    return (h(Host, { role: "rowgroup" }, h("slot", null)));
+  }
+  static get style() { return tableBodyCss; }
+}, [1, "utrecht-table-body"]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["utrecht-table-body"];
+  components.forEach(tagName => { switch (tagName) {
+    case "utrecht-table-body":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, TableBody);
+      }
+      break;
+  } });
+}
+
+const UtrechtTableBody = TableBody;
+const defineCustomElement = defineCustomElement$1;
+
+export { UtrechtTableBody, defineCustomElement };

package/dist/components/utrecht-table-caption.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface UtrechtTableCaption extends Components.UtrechtTableCaption, HTMLElement {}
+export const UtrechtTableCaption: {
+  prototype: UtrechtTableCaption;
+  new (): UtrechtTableCaption;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/utrecht-table-caption.js

@@ -0,0 +1,34 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+
+const tableCaptionCss = ":host{color:var(--utrecht-table-caption-color);font-family:var(--utrecht-table-caption-font-family);font-size:var(--utrecht-table-caption-font-size);font-weight:var(--utrecht-table-caption-font-weight);line-height:var(--utrecht-table-caption-line-height);margin-block-end:var(--utrecht-table-caption-margin-block-end);page-break-after:avoid;text-align:var(--utrecht-table-caption-text-align, center);display:table-caption;page-break-after:avoid;page-break-inside:avoid}";
+
+const TableCaption = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+  }
+  render() {
+    // TODO: Associate with parent <utrecht-table> aria-labelledby attribute
+    return h("slot", null);
+  }
+  static get style() { return tableCaptionCss; }
+}, [1, "utrecht-table-caption"]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["utrecht-table-caption"];
+  components.forEach(tagName => { switch (tagName) {
+    case "utrecht-table-caption":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, TableCaption);
+      }
+      break;
+  } });
+}
+
+const UtrechtTableCaption = TableCaption;
+const defineCustomElement = defineCustomElement$1;
+
+export { UtrechtTableCaption, defineCustomElement };

package/dist/components/utrecht-table-cell.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface UtrechtTableCell extends Components.UtrechtTableCell, HTMLElement {}
+export const UtrechtTableCell: {
+  prototype: UtrechtTableCell;
+  new (): UtrechtTableCell;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/utrecht-table-cell.js

@@ -0,0 +1,33 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const tableCellCss = ":host{border-block-end-color:var(--utrecht-table-row-border-block-end-color, transparent);border-block-end-style:solid;border-block-end-width:var(--utrecht-table-row-border-block-end-width, 0);line-height:var(--utrecht-table-cell-line-height, inherit);padding-block-end:var(--utrecht-table-cell-padding-block-end, 0);padding-block-start:var(--utrecht-table-cell-padding-block-start, 0);padding-inline-end:var(--utrecht-table-cell-padding-inline-end, 0);padding-inline-start:var(--utrecht-table-cell-padding-inline-start, 0);text-align:start;display:table-cell}";
+
+const TableCell = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+  }
+  render() {
+    return (h(Host, { role: "cell" }, h("slot", null)));
+  }
+  static get style() { return tableCellCss; }
+}, [1, "utrecht-table-cell"]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["utrecht-table-cell"];
+  components.forEach(tagName => { switch (tagName) {
+    case "utrecht-table-cell":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, TableCell);
+      }
+      break;
+  } });
+}
+
+const UtrechtTableCell = TableCell;
+const defineCustomElement = defineCustomElement$1;
+
+export { UtrechtTableCell, defineCustomElement };

package/dist/components/utrecht-table-footer.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface UtrechtTableFooter extends Components.UtrechtTableFooter, HTMLElement {}
+export const UtrechtTableFooter: {
+  prototype: UtrechtTableFooter;
+  new (): UtrechtTableFooter;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/utrecht-table-footer.js

@@ -0,0 +1,33 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const tableFooterCss = ":host{display:table-footer-group}";
+
+const TableFooter = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+  }
+  render() {
+    return (h(Host, { role: "rowgroup" }, h("slot", null)));
+  }
+  static get style() { return tableFooterCss; }
+}, [1, "utrecht-table-footer"]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["utrecht-table-footer"];
+  components.forEach(tagName => { switch (tagName) {
+    case "utrecht-table-footer":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, TableFooter);
+      }
+      break;
+  } });
+}
+
+const UtrechtTableFooter = TableFooter;
+const defineCustomElement = defineCustomElement$1;
+
+export { UtrechtTableFooter, defineCustomElement };

package/dist/components/utrecht-table-header-cell.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface UtrechtTableHeaderCell extends Components.UtrechtTableHeaderCell, HTMLElement {}
+export const UtrechtTableHeaderCell: {
+  prototype: UtrechtTableHeaderCell;
+  new (): UtrechtTableHeaderCell;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/utrecht-table-header-cell.js

@@ -0,0 +1,36 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const tableHeaderCellCss = ":host{color:var(--utrecht-table-header-cell-color);font-size:var(--utrecht-table-header-cell-font-size);font-weight:var(--utrecht-table-header-cell-font-weight);text-align:start;text-transform:var(--utrecht-table-header-cell-text-transform);display:table-cell}";
+
+const TableHeaderCell = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.scope = undefined;
+  }
+  render() {
+    return (h(Host, { role: this.scope === 'col' ? 'columnheader' : this.scope === 'row' ? 'rowheader' : 'cell' }, h("slot", null)));
+  }
+  static get style() { return tableHeaderCellCss; }
+}, [1, "utrecht-table-header-cell", {
+    "scope": [1]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["utrecht-table-header-cell"];
+  components.forEach(tagName => { switch (tagName) {
+    case "utrecht-table-header-cell":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, TableHeaderCell);
+      }
+      break;
+  } });
+}
+
+const UtrechtTableHeaderCell = TableHeaderCell;
+const defineCustomElement = defineCustomElement$1;
+
+export { UtrechtTableHeaderCell, defineCustomElement };

package/dist/components/utrecht-table-header.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface UtrechtTableHeader extends Components.UtrechtTableHeader, HTMLElement {}
+export const UtrechtTableHeader: {
+  prototype: UtrechtTableHeader;
+  new (): UtrechtTableHeader;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/utrecht-table-header.js

@@ -0,0 +1,33 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const tableHeaderCss = ":host{background-color:var(--utrecht-table-header-background-color);color:var(--utrecht-table-header-color);font-weight:var(--utrecht-table-header-font-weight);page-break-inside:avoid;text-transform:var(--utrecht-table-header-text-transform);vertical-align:bottom;display:table-header-group}";
+
+const TableHeader = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+  }
+  render() {
+    return (h(Host, { role: "rowgroup" }, h("slot", null)));
+  }
+  static get style() { return tableHeaderCss; }
+}, [1, "utrecht-table-header"]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["utrecht-table-header"];
+  components.forEach(tagName => { switch (tagName) {
+    case "utrecht-table-header":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, TableHeader);
+      }
+      break;
+  } });
+}
+
+const UtrechtTableHeader = TableHeader;
+const defineCustomElement = defineCustomElement$1;
+
+export { UtrechtTableHeader, defineCustomElement };

package/dist/components/utrecht-table-row.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface UtrechtTableRow extends Components.UtrechtTableRow, HTMLElement {}
+export const UtrechtTableRow: {
+  prototype: UtrechtTableRow;
+  new (): UtrechtTableRow;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/utrecht-table-row.js

@@ -0,0 +1,33 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const tableRowCss = ":host{page-break-inside:avoid;display:table-row}";
+
+const TableRow = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+  }
+  render() {
+    return (h(Host, { role: "row" }, h("slot", null)));
+  }
+  static get style() { return tableRowCss; }
+}, [1, "utrecht-table-row"]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["utrecht-table-row"];
+  components.forEach(tagName => { switch (tagName) {
+    case "utrecht-table-row":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, TableRow);
+      }
+      break;
+  } });
+}
+
+const UtrechtTableRow = TableRow;
+const defineCustomElement = defineCustomElement$1;
+
+export { UtrechtTableRow, defineCustomElement };

package/dist/components/utrecht-table.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface UtrechtTable extends Components.UtrechtTable, HTMLElement {}
+export const UtrechtTable: {
+  prototype: UtrechtTable;
+  new (): UtrechtTable;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/utrecht-table.js

@@ -0,0 +1,33 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const tableCss = ":host{border-collapse:collapse;border-color:var(--utrecht-table-border-color, 0);border-style:solid;border-width:var(--utrecht-table-border-width, 0);font-family:var(--utrecht-table-font-family, var(--utrecht-document-font-family));font-size:var(--utrecht-table-font-size, inherit);line-height:var(--utrecht-table-line-height, inherit);margin-block-end:calc(var(--utrecht-space-around, 0) * var(--utrecht-table-margin-block-end, 0));margin-block-start:calc(var(--utrecht-space-around, 0) * var(--utrecht-table-margin-block-start, 0));width:100%;display:table}";
+
+const Table = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+  }
+  render() {
+    return (h(Host, { role: "table" }, h("slot", null)));
+  }
+  static get style() { return tableCss; }
+}, [1, "utrecht-table"]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["utrecht-table"];
+  components.forEach(tagName => { switch (tagName) {
+    case "utrecht-table":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Table);
+      }
+      break;
+  } });
+}
+
+const UtrechtTable = Table;
+const defineCustomElement = defineCustomElement$1;
+
+export { UtrechtTable, defineCustomElement };

package/dist/components/utrecht-textbox.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface UtrechtTextbox extends Components.UtrechtTextbox, HTMLElement {}
+export const UtrechtTextbox: {
+  prototype: UtrechtTextbox;
+  new (): UtrechtTextbox;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/utrecht-textbox.js

@@ -0,0 +1,65 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { c as clsx } from './clsx.m.js';
+
+const indexCss = ".utrecht-textbox{background-color:var(--utrecht-textbox-background-color, var(--utrecht-form-input-background-color));border-width:var(--utrecht-textbox-border-width, var(--utrecht-form-input-border-width));border-bottom-width:var(--utrecht-textbox-border-bottom-width, var(--utrecht-textbox-border-width, var(--utrecht-form-input-border-width)));border-color:var(--utrecht-textbox-border-color, var(--utrecht-form-input-border-color));border-radius:var(--utrecht-textbox-border-radius, var(--utrecht-form-input-border-radius, 0));border-style:solid;box-sizing:border-box;color:var(--utrecht-textbox-color, var(--utrecht-form-input-color));font-family:var(--utrecht-textbox-font-family, var(--utrecht-form-input-font-family));font-size:var(--utrecht-textbox-font-size, var(--utrecht-form-input-font-size, 1em));font-weight:initial;height:initial;line-height:initial;max-inline-size:var(--utrecht-textbox-max-inline-size, var(--utrecht-form-input-max-inline-size));padding-block-end:var(--utrecht-textbox-padding-block-end, var(--utrecht-form-input-padding-block-end, 0));padding-block-start:var(--utrecht-textbox-padding-block-start, var(--utrecht-form-input-padding-block-start, 0));padding-inline-end:var(--utrecht-textbox-padding-inline-end, var(--utrecht-form-input-padding-inline-end, initial));padding-inline-start:var(--utrecht-textbox-padding-inline-start, var(--utrecht-form-input-padding-inline-start, initial));width:100%}.utrecht-textbox--invalid{background-color:var(--utrecht-textbox-invalid-background-color, var(--utrecht-form-input-invalid-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-input-background-color))));border-color:var(--utrecht-textbox-invalid-border-color, var(--utrecht-form-input-invalid-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-input-border-color))));border-width:var(--utrecht-textbox-invalid-border-width, var(--utrecht-form-input-invalid-border-width, var(--utrecht-textbox-border-width, var(--utrecht-form-input-border-width))))}.utrecht-textbox--disabled{background-color:var(--utrecht-textbox-disabled-background-color, var(--utrecht-form-input-disabled-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-input-background-color))));border-color:var(--utrecht-textbox-disabled-border-color, var(--utrecht-form-input-disabled-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-input-border-color))));color:var(--utrecht-textbox-disabled-color, var(--utrecht-form-input-disabled-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));cursor:var(--utrecht-action-disabled-cursor)}.utrecht-textbox--focus{background-color:var(--utrecht-textbox-focus-background-color, var(--utrecht-form-input-focus-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-input-background-color))));border-color:var(--utrecht-textbox-focus-border-color, var(--utrecht-form-input-focus-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-input-border-color))));color:var(--utrecht-textbox-focus-color, var(--utrecht-form-input-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))))}.utrecht-textbox--focus-visible{--_utrecht-focus-ring-box-shadow:0 0 0 var(--utrecht-focus-outline-width, 0)\n    var(--utrecht-focus-inverse-outline-color, transparent);box-shadow:var(--_utrecht-focus-ring-box-shadow);outline-color:var(--utrecht-focus-outline-color, revert);outline-offset:var(--utrecht-focus-outline-offset, revert);outline-style:var(--utrecht-focus-outline-style, revert);outline-width:var(--utrecht-focus-outline-width, revert)}.utrecht-textbox--read-only{border-color:var(--utrecht-textbox-read-only-border-color, var(--utrecht-form-input-read-only-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-input-border-color))));color:var(--utrecht-textbox-read-only-color, var(--utrecht-form-input-read-only-color, var(--utrecht-textbox-color, var(--utrecht-form-input-color))))}.utrecht-textbox__placeholder{color:var(--utrecht-textbox-placeholder-color, var(--utrecht-form-input-placeholder-color, var(--utrecht-textbox-color, var(--utrecht-form-input-color))));font-style:var(--utrecht-form-input-placeholder-font-style);opacity:100%}.utrecht-textbox--numeric{-moz-appearance:textfield;font-variant-numeric:lining-nums tabular-nums}.utrecht-textbox--password{font-variant-ligatures:none;font-variant-numeric:slashed-zero}.utrecht-textbox--url{font-variant-ligatures:none}.utrecht-textbox--html-input:disabled{background-color:var(--utrecht-textbox-disabled-background-color, var(--utrecht-form-input-disabled-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-input-background-color))));border-color:var(--utrecht-textbox-disabled-border-color, var(--utrecht-form-input-disabled-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-input-border-color))));color:var(--utrecht-textbox-disabled-color, var(--utrecht-form-input-disabled-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));cursor:var(--utrecht-action-disabled-cursor)}.utrecht-textbox--html-input:focus{background-color:var(--utrecht-textbox-focus-background-color, var(--utrecht-form-input-focus-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-input-background-color))));border-color:var(--utrecht-textbox-focus-border-color, var(--utrecht-form-input-focus-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-input-border-color))));color:var(--utrecht-textbox-focus-color, var(--utrecht-form-input-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));--_utrecht-focus-ring-box-shadow:0 0 0 var(--utrecht-focus-outline-width, 0)\n    var(--utrecht-focus-inverse-outline-color, transparent);box-shadow:var(--_utrecht-focus-ring-box-shadow);outline-color:var(--utrecht-focus-outline-color, revert);outline-offset:var(--utrecht-focus-outline-offset, revert);outline-style:var(--utrecht-focus-outline-style, revert);outline-width:var(--utrecht-focus-outline-width, revert)}.utrecht-textbox--html-input:focus:not(:focus-visible){box-shadow:none;outline-style:revert}.utrecht-textbox--html-input:invalid,.utrecht-textbox--html-input[aria-invalid=true]{background-color:var(--utrecht-textbox-invalid-background-color, var(--utrecht-form-input-invalid-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-input-background-color))));border-color:var(--utrecht-textbox-invalid-border-color, var(--utrecht-form-input-invalid-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-input-border-color))));border-width:var(--utrecht-textbox-invalid-border-width, var(--utrecht-form-input-invalid-border-width, var(--utrecht-textbox-border-width, var(--utrecht-form-input-border-width))))}.utrecht-textbox--html-input:read-only{border-color:var(--utrecht-textbox-read-only-border-color, var(--utrecht-form-input-read-only-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-input-border-color))));color:var(--utrecht-textbox-read-only-color, var(--utrecht-form-input-read-only-color, var(--utrecht-textbox-color, var(--utrecht-form-input-color))))}.utrecht-textbox--html-input::placeholder{color:var(--utrecht-textbox-placeholder-color, var(--utrecht-form-input-placeholder-color, var(--utrecht-textbox-color, var(--utrecht-form-input-color))));font-style:var(--utrecht-form-input-placeholder-font-style);opacity:100%}.utrecht-textbox--html-input[type=password i]{font-variant-ligatures:none;font-variant-numeric:slashed-zero}.utrecht-textbox--html-input[type=url i],.utrecht-textbox--html-input[type=email i],.utrecht-textbox--html-input[inputMode=email i],.utrecht-textbox--html-input[inputMode=url i]{font-variant-ligatures:none}.utrecht-textbox--html-input[pattern=\"\\\\d*\"],.utrecht-textbox--html-input[pattern=\"[0-9]*\"],.utrecht-textbox--html-input[type=number i],.utrecht-textbox--html-input[type=tel i],.utrecht-textbox--html-input[inputMode=numeric i],.utrecht-textbox--html-input[inputMode=decimal i],.utrecht-textbox--html-input[inputMode=tel i]{-moz-appearance:textfield;font-variant-numeric:lining-nums tabular-nums}:host{display:block}:host([hidden]){display:none !important}";
+
+const Textbox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.utrechtBlur = createEvent(this, "utrechtBlur", 7);
+    this.utrechtChange = createEvent(this, "utrechtChange", 7);
+    this.utrechtFocus = createEvent(this, "utrechtFocus", 7);
+    this.utrechtInput = createEvent(this, "utrechtInput", 7);
+    this.autoComplete = '';
+    this.disabled = false;
+    this.invalid = false;
+    this.min = '';
+    this.max = '';
+    this.pattern = '';
+    this.placeholder = '';
+    this.readOnly = false;
+    this.required = false;
+    this.type = '';
+    this.value = '';
+  }
+  render() {
+    const { autoComplete, disabled, invalid, min, max, pattern, placeholder, readOnly, required, type, value } = this;
+    return (h("input", { class: clsx('utrecht-textbox', 'utrecht-textbox--html-input', disabled && 'utrecht-textbox--disabled', invalid && 'utrecht-textbox--invalid', readOnly && 'utrecht-textbox--readonly'), type: type || 'text', autoComplete: autoComplete ? autoComplete : null, disabled: disabled, min: min ? min : null, max: max ? max : null, pattern: pattern ? pattern : null, placeholder: placeholder || null, readonly: readOnly, required: required, value: value, onBlur: (evt) => this.utrechtBlur.emit(evt), onChange: (evt) => this.utrechtChange.emit(evt), onFocus: (evt) => this.utrechtFocus.emit(evt), onInput: (evt) => {
+        this.value = evt.target.value;
+        this.utrechtInput.emit(evt);
+      } }));
+  }
+  static get style() { return indexCss; }
+}, [1, "utrecht-textbox", {
+    "autoComplete": [513, "autocomplete"],
+    "disabled": [516],
+    "invalid": [516],
+    "min": [1],
+    "max": [1],
+    "pattern": [1],
+    "placeholder": [1],
+    "readOnly": [516, "readonly"],
+    "required": [516],
+    "type": [513],
+    "value": [1]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["utrecht-textbox"];
+  components.forEach(tagName => { switch (tagName) {
+    case "utrecht-textbox":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Textbox);
+      }
+      break;
+  } });
+}
+
+const UtrechtTextbox = Textbox;
+const defineCustomElement = defineCustomElement$1;
+
+export { UtrechtTextbox, defineCustomElement };

package/dist/esm/clsx.m-9f200cc0.js

@@ -0,0 +1,3 @@
+function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e))for(t=0;t<e.length;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);else for(t in e)e[t]&&(n&&(n+=" "),n+=t);return n}function clsx(){for(var e,t,f=0,n="";f<arguments.length;)(e=arguments[f++])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
+
+export { clsx as c };