@xplortech/apollo-core 0.0.7 → 0.1.0

package/dist/cjs/{xpl-button_3.cjs.entry.js → xpl-avatar_7.cjs.entry.js}

@@ -2,7 +2,37 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-d0d9877d.js');
+const index = require('./index-716d8f57.js');
+
+const XplAvatar = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.disabled = false;
+  }
+  render() {
+    let className = "xpl-avatar";
+    if (this.size)
+      className += ` xpl-avatar--${this.size}`;
+    if (this.color)
+      className += ` xpl-avatar--${this.color}`;
+    const inner = (index.h("div", null, this.src ? (index.h("img", { alt: this.name, src: this.src })) : (index.h("div", { class: "xpl-avatar__placeholder" }, index.h("slot", null))), this.status && index.h("div", { class: `xpl-avatar__dot--${this.status}` })));
+    return (index.h(index.Host, null, this.href && !this.disabled ? (index.h("a", { href: this.href, class: className, target: this.target }, inner)) : this.href && this.disabled ? (index.h("div", { class: className + " xpl-avatar--disabled" }, inner)) : (index.h("div", { class: className }, inner))));
+  }
+};
+
+const XplBadge = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  render() {
+    let className = "xpl-badge";
+    if (this.dot)
+      className += " xpl-badge--dot";
+    if (this.variant)
+      className += " xpl-badge--" + this.variant;
+    return (index.h(index.Host, null, index.h("div", { class: className }, index.h("slot", null))));
+  }
+};
 
 /*!
  * Font Awesome Pro 5.15.3 by @fontawesome - https://fontawesome.com
@@ -16049,7 +16079,6 @@ const index = require('./index-d0d9877d.js');
 const XplButton = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
-    this.disabled = undefined;
     this.size = "default";
     this.variant = "primary";
   }
@@ -16073,76 +16102,101 @@ const XplButton = class {
      * Conditionally render either an <a> or <button> element
      * depending on if there's an `href` or not
      */
-    this.href ? (index.h("a", { class: className, href: this.href, role: "button" }, !this.iconTrailing && icon, this.iconOnly ? (index.h("span", { class: "sr-only" }, index.h("slot", null))) : (index.h("slot", null)), this.iconTrailing && icon)) : (index.h("button", { class: className, disabled: this.disabled, type: this.type }, !this.iconTrailing && icon, this.iconOnly ? (index.h("span", { class: "sr-only" }, index.h("slot", null))) : (index.h("slot", null)), this.iconTrailing && icon))));
+    this.href ? (index.h("a", { class: className, href: this.href, role: "button" }, !this.iconTrailing && icon, this.iconOnly ? (index.h("span", { class: "sr-only" }, index.h("slot", null))) : (index.h("slot", null)), this.iconTrailing && icon)) : (index.h("button", { class: className, disabled: this.disabled, name: this.name, type: this.type, value: this.value }, !this.iconTrailing && icon, this.iconOnly ? (index.h("span", { class: "sr-only" }, index.h("slot", null))) : (index.h("slot", null)), this.iconTrailing && icon))));
   }
 };
 
-const XplPagination = class {
+// Unique ID creation requires a high quality random # generator. In the browser we therefore
+// require the crypto API and do not support built-in fallback to lower quality random number
+// generators (like Math.random()).
+var getRandomValues;
+var rnds8 = new Uint8Array(16);
+function rng() {
+  // lazy load so that environments that need to polyfill have a chance to do so
+  if (!getRandomValues) {
+    // getRandomValues needs to be invoked in a context where "this" is a Crypto implementation. Also,
+    // find the complete implementation of crypto (msCrypto) on IE11.
+    getRandomValues = typeof crypto !== 'undefined' && crypto.getRandomValues && crypto.getRandomValues.bind(crypto) || typeof msCrypto !== 'undefined' && typeof msCrypto.getRandomValues === 'function' && msCrypto.getRandomValues.bind(msCrypto);
+
+    if (!getRandomValues) {
+      throw new Error('crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported');
+    }
+  }
+
+  return getRandomValues(rnds8);
+}
+
+const REGEX = /^(?:[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}|00000000-0000-0000-0000-000000000000)$/i;
+
+function validate(uuid) {
+  return typeof uuid === 'string' && REGEX.test(uuid);
+}
+
+/**
+ * Convert array of 16 byte values to UUID string format of the form:
+ * XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX
+ */
+
+var byteToHex = [];
+
+for (var i = 0; i < 256; ++i) {
+  byteToHex.push((i + 0x100).toString(16).substr(1));
+}
+
+function stringify(arr) {
+  var offset = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+  // Note: Be careful editing this code!  It's been tuned for performance
+  // and works in ways you may not expect. See https://github.com/uuidjs/uuid/pull/434
+  var uuid = (byteToHex[arr[offset + 0]] + byteToHex[arr[offset + 1]] + byteToHex[arr[offset + 2]] + byteToHex[arr[offset + 3]] + '-' + byteToHex[arr[offset + 4]] + byteToHex[arr[offset + 5]] + '-' + byteToHex[arr[offset + 6]] + byteToHex[arr[offset + 7]] + '-' + byteToHex[arr[offset + 8]] + byteToHex[arr[offset + 9]] + '-' + byteToHex[arr[offset + 10]] + byteToHex[arr[offset + 11]] + byteToHex[arr[offset + 12]] + byteToHex[arr[offset + 13]] + byteToHex[arr[offset + 14]] + byteToHex[arr[offset + 15]]).toLowerCase(); // Consistency check for valid UUID.  If this throws, it's likely due to one
+  // of the following:
+  // - One or more input array values don't map to a hex octet (leading to
+  // "undefined" in the uuid)
+  // - Invalid input values for the RFC `version` or `variant` fields
+
+  if (!validate(uuid)) {
+    throw TypeError('Stringified UUID is invalid');
+  }
+
+  return uuid;
+}
+
+function v4(options, buf, offset) {
+  options = options || {};
+  var rnds = options.random || (options.rng || rng)(); // Per 4.4, set bits for version and `clock_seq_hi_and_reserved`
+
+  rnds[6] = rnds[6] & 0x0f | 0x40;
+  rnds[8] = rnds[8] & 0x3f | 0x80; // Copy bytes to buffer, if provided
+
+  if (buf) {
+    offset = offset || 0;
+
+    for (var i = 0; i < 16; ++i) {
+      buf[offset + i] = rnds[i];
+    }
+
+    return buf;
+  }
+
+  return stringify(rnds);
+}
+
+const XplCheckbox = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
-    this.page = index.createEvent(this, "page", 7);
-    this.current = 1;
-    /**
-     * Private `_goto` method respects the `waitForCallback` prop --
-     * it will always emit the `page` event, but won't actually update
-     * the state of what the current page is, leaving that to the caller
-     * to update once (presumably) some other data has loaded.
-     */
-    this._goto = (n) => {
-      this.page.emit(n);
-      if (!this.waitForCallback) {
-        this.current = n;
-      }
-    };
-    this.goPrev = () => {
-      if (this.current > 1)
-        this._goto(this.current - 1);
-    };
-    this.goNext = () => {
-      const numPages = Math.ceil(this.total / this.perPage);
-      if (this.current < numPages)
-        this._goto(this.current + 1);
-    };
+    this.id = v4();
   }
-  /**
-   * Calling `goto` with a page number (which should probably be
-   * taken from the `page` event) updates the pagination's state
-   * and re-renders it, showing the appropriate buttons given the current page.
-   * @param n
-   */
-  async goto(n) {
-    this.current = n;
+  render() {
+    return (index.h(index.Host, { class: "xpl-checkbox-container" }, index.h("input", { class: "xpl-checkbox", type: "checkbox", checked: this.checked, disabled: this.disabled, id: this.id, indeterminate: this.indeterminate, name: this.name, required: this.required, value: this.value }), index.h("label", { htmlFor: this.id }, index.h("slot", null), this.description && index.h("small", null, this.description))));
+  }
+};
+
+const XplRadio = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.id = v4();
   }
   render() {
-    const numPages = Math.ceil(this.total / this.perPage);
-    let showing = [1];
-    if (numPages < 7)
-      showing = [1, 2, 3, 4, 5, 6];
-    if (this.current <= 3 || this.current >= numPages - 2) {
-      showing = [1, 2, 3, "...", numPages - 2, numPages - 1, numPages];
-    }
-    else {
-      showing = [
-        1,
-        "...",
-        this.current - 1,
-        this.current,
-        this.current + 1,
-        "...",
-        numPages,
-      ];
-    }
-    const showingFirst = (this.current - 1) * this.perPage + 1;
-    const showingLast = Math.min(showingFirst + this.perPage - 1, this.total);
-    return (index.h(index.Host, null, index.h("div", { class: "xpl-pagination" }, index.h("div", null, index.h("p", null, "Showing ", index.h("span", null, showingFirst), " to ", index.h("span", null, showingLast), " ", "of ", index.h("span", null, this.total), " results")), index.h("div", null, index.h("nav", { "aria-label": "Pagination" }, index.h("button", { onClick: this.goPrev, class: "xpl-pagination-prev" }, index.h("span", null, "Previous"), index.h("svg", { viewBox: "0 0 20 20", "aria-hidden": "true" }, index.h("path", { "fill-rule": "evenodd", d: "M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z", "clip-rule": "evenodd" }))), showing.map((n) => {
-      if (n === "...") {
-        return index.h("span", { class: "xpl-pagination-ellipsis" }, "...");
-      }
-      if (n === this.current) {
-        return (index.h("button", { "aria-current": "page", class: "xpl-pagination-current" }, n));
-      }
-      return index.h("button", { onClick: () => this._goto(n) }, n);
-    }), index.h("button", { onClick: this.goNext, class: "xpl-pagination-next" }, index.h("span", null, "Next"), index.h("svg", { viewBox: "0 0 20 20", "aria-hidden": "true" }, index.h("path", { "fill-rule": "evenodd", d: "M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z", "clip-rule": "evenodd" }))))))));
+    return (index.h(index.Host, { class: "xpl-radio-container" }, index.h("input", { class: "xpl-radio", type: "radio", checked: this.checked, disabled: this.disabled, id: this.id, name: this.name, required: this.required, value: this.value }), index.h("label", { htmlFor: this.id }, index.h("slot", null), this.description && index.h("small", null, this.description))));
   }
 };
 
@@ -16211,19 +16265,36 @@ const XplTable = class {
     if (this.hasScrolled)
       className += " xpl-table--has-scrolled";
     return (index.h(index.Host, null, index.h("div", { class: "xpl-table-container", onScroll: this.onScroll, ref: (el) => (this.container = el) }, index.h("table", { class: className }, this.columns && (index.h("thead", null, this.columns.map((column, i) => {
-      return (index.h("th", null, this.multiselect && i === 0 ? (index.h("label", { htmlFor: "__xpl-table-th" }, index.h("input", { id: "__xpl-table-th", type: "checkbox", onChange: (e) => {
+      return (index.h("th", null, this.multiselect && i === 0 ? (index.h("label", { htmlFor: "__xpl-table-th" }, index.h("input", { checked: this.areAllSelected, id: "__xpl-table-th",
+        // appear indeterminate when at least one but not all
+        // are selected
+        indeterminate: !this.areAllSelected &&
+          this.selected.some((a) => a), onChange: (e) => {
           this.selectAll(e);
-        }, checked: this.areAllSelected }), column)) : (column)));
+        }, type: "checkbox" }), column)) : (column)));
     }))), index.h("tbody", null, this.rowData.map((row, rowNum) => {
       return (index.h("tr", { class: this.selected && this.selected[rowNum]
           ? "xpl-table-row-selected"
           : "" }, row.map((cell, i) => {
-        return (index.h("td", null, this.multiselect && i === 0 ? (index.h("label", { htmlFor: "__xpl-table-row-" + rowNum }, index.h("input", { id: "__xpl-table-row-" + rowNum, checked: this.selected[rowNum], type: "checkbox", onChange: (e) => this.selectOne(e, rowNum) }), cell)) : (cell)));
+        return (index.h("td", null, this.multiselect && i === 0 ? (index.h("label", { htmlFor: "__xpl-table-row-" + rowNum }, index.h("input", { id: "__xpl-table-row-" + rowNum, checked: this.selected[rowNum], type: "checkbox", onChange: (e) => this.selectOne(e, rowNum) }), index.h("div", { innerHTML: cell }))) : (index.h("div", { innerHTML: cell }))));
       })));
     }))))));
   }
 };
 
+const XplUtilityBar = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("nav", { "aria-label": "utility navigation bar", class: "xpl-utility-bar" }, index.h("slot", { name: "main" }), index.h("slot", { name: "aside" }))));
+  }
+};
+
+exports.xpl_avatar = XplAvatar;
+exports.xpl_badge = XplBadge;
 exports.xpl_button = XplButton;
-exports.xpl_pagination = XplPagination;
+exports.xpl_checkbox = XplCheckbox;
+exports.xpl_radio = XplRadio;
 exports.xpl_table = XplTable;
+exports.xpl_utility_bar = XplUtilityBar;

package/dist/cjs/xpl-choicelist.cjs.entry.js

@@ -0,0 +1,16 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-716d8f57.js');
+
+const XplChoicelist = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("slot", null)));
+  }
+};
+
+exports.xpl_choicelist = XplChoicelist;

package/dist/cjs/xpl-pagination.cjs.entry.js

@@ -0,0 +1,76 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-716d8f57.js');
+
+const XplPagination = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.page = index.createEvent(this, "page", 7);
+    this.current = 1;
+    /**
+     * Private `_goto` method respects the `waitForCallback` prop --
+     * it will always emit the `page` event, but won't actually update
+     * the state of what the current page is, leaving that to the caller
+     * to update once (presumably) some other data has loaded.
+     */
+    this._goto = (n) => {
+      this.page.emit(n);
+      if (!this.waitForCallback) {
+        this.current = n;
+      }
+    };
+    this.goPrev = () => {
+      if (this.current > 1)
+        this._goto(this.current - 1);
+    };
+    this.goNext = () => {
+      const numPages = Math.ceil(this.total / this.perPage);
+      if (this.current < numPages)
+        this._goto(this.current + 1);
+    };
+  }
+  /**
+   * Calling `goto` with a page number (which should probably be
+   * taken from the `page` event) updates the pagination's state
+   * and re-renders it, showing the appropriate buttons given the current page.
+   * @param n
+   */
+  async goto(n) {
+    this.current = n;
+  }
+  render() {
+    const numPages = Math.ceil(this.total / this.perPage);
+    let showing = [1];
+    if (numPages < 7)
+      showing = [1, 2, 3, 4, 5, 6];
+    if (this.current <= 3 || this.current >= numPages - 2) {
+      showing = [1, 2, 3, "...", numPages - 2, numPages - 1, numPages];
+    }
+    else {
+      showing = [
+        1,
+        "...",
+        this.current - 1,
+        this.current,
+        this.current + 1,
+        "...",
+        numPages,
+      ];
+    }
+    const showingFirst = (this.current - 1) * this.perPage + 1;
+    const showingLast = Math.min(showingFirst + this.perPage - 1, this.total);
+    return (index.h(index.Host, null, index.h("div", { class: "xpl-pagination" }, index.h("div", null, index.h("p", null, "Showing ", index.h("span", null, showingFirst), " to ", index.h("span", null, showingLast), " ", "of ", index.h("span", null, this.total), " results")), index.h("div", null, index.h("nav", { "aria-label": "Pagination" }, index.h("button", { onClick: this.goPrev, class: "xpl-pagination-prev" }, index.h("span", null, "Previous"), index.h("svg", { viewBox: "0 0 20 20", "aria-hidden": "true" }, index.h("path", { "fill-rule": "evenodd", d: "M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z", "clip-rule": "evenodd" }))), showing.map((n) => {
+      if (n === "...") {
+        return index.h("span", { class: "xpl-pagination-ellipsis" }, "...");
+      }
+      if (n === this.current) {
+        return (index.h("button", { "aria-current": "page", class: "xpl-pagination-current" }, n));
+      }
+      return index.h("button", { onClick: () => this._goto(n) }, n);
+    }), index.h("button", { onClick: this.goNext, class: "xpl-pagination-next" }, index.h("span", null, "Next"), index.h("svg", { viewBox: "0 0 20 20", "aria-hidden": "true" }, index.h("path", { "fill-rule": "evenodd", d: "M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z", "clip-rule": "evenodd" }))))))));
+  }
+};
+
+exports.xpl_pagination = XplPagination;

package/dist/collection/collection-manifest.json

@@ -1,12 +1,18 @@
 {
   "entries": [
+    "./components/xpl-avatar/xpl-avatar.js",
+    "./components/xpl-badge/xpl-badge.js",
     "./components/xpl-button/xpl-button.js",
+    "./components/xpl-checkbox/xpl-checkbox.js",
+    "./components/xpl-choicelist/xpl-choicelist.js",
     "./components/xpl-pagination/xpl-pagination.js",
-    "./components/xpl-table/xpl-table.js"
+    "./components/xpl-radio/xpl-radio.js",
+    "./components/xpl-table/xpl-table.js",
+    "./components/xpl-utility-bar/xpl-utility-bar.js"
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "2.6.0",
+    "version": "2.8.0",
     "typescriptVersion": "4.2.3"
   },
   "collections": [],

package/dist/collection/components/xpl-avatar/xpl-avatar.js

@@ -0,0 +1,158 @@
+import { Component, Host, h, Prop } from "@stencil/core";
+export class XplAvatar {
+  constructor() {
+    this.disabled = false;
+  }
+  render() {
+    let className = "xpl-avatar";
+    if (this.size)
+      className += ` xpl-avatar--${this.size}`;
+    if (this.color)
+      className += ` xpl-avatar--${this.color}`;
+    const inner = (h("div", null,
+      this.src ? (h("img", { alt: this.name, src: this.src })) : (h("div", { class: "xpl-avatar__placeholder" },
+        h("slot", null))),
+      this.status && h("div", { class: `xpl-avatar__dot--${this.status}` })));
+    return (h(Host, null, this.href && !this.disabled ? (h("a", { href: this.href, class: className, target: this.target }, inner)) : this.href && this.disabled ? (h("div", { class: className + " xpl-avatar--disabled" }, inner)) : (h("div", { class: className }, inner))));
+  }
+  static get is() { return "xpl-avatar"; }
+  static get properties() { return {
+    "color": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "\"green\" | \"yellow\" | \"pink\" | \"primary\" | \"secondary\"",
+        "resolved": "\"green\" | \"pink\" | \"primary\" | \"secondary\" | \"yellow\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "color",
+      "reflect": false
+    },
+    "disabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "disabled",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "href": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "href",
+      "reflect": false
+    },
+    "name": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "name",
+      "reflect": false
+    },
+    "size": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "\"md\" | \"sm\"",
+        "resolved": "\"md\" | \"sm\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "size",
+      "reflect": false
+    },
+    "src": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "src",
+      "reflect": false
+    },
+    "status": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "\"active\" | \"warning\" | \"inactive\"",
+        "resolved": "\"active\" | \"inactive\" | \"warning\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "status",
+      "reflect": false
+    },
+    "target": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "target",
+      "reflect": false
+    }
+  }; }
+}

package/dist/collection/components/xpl-badge/xpl-badge.js

@@ -0,0 +1,50 @@
+import { Component, Host, h, Prop } from "@stencil/core";
+export class XplBadge {
+  render() {
+    let className = "xpl-badge";
+    if (this.dot)
+      className += " xpl-badge--dot";
+    if (this.variant)
+      className += " xpl-badge--" + this.variant;
+    return (h(Host, null,
+      h("div", { class: className },
+        h("slot", null))));
+  }
+  static get is() { return "xpl-badge"; }
+  static get properties() { return {
+    "dot": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "dot",
+      "reflect": false
+    },
+    "variant": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "\"success\" | \"warning\" | \"inactive\" | \"error\"",
+        "resolved": "\"error\" | \"inactive\" | \"success\" | \"warning\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "variant",
+      "reflect": false
+    }
+  }; }
+}

package/dist/collection/components/xpl-button/xpl-button.js

@@ -3,7 +3,6 @@ import "../../../font-awesome/fontawesome";
 import "../../../font-awesome/regular";
 export class XplButton {
   constructor() {
-    this.disabled = undefined;
     this.size = "default";
     this.variant = "primary";
   }
@@ -31,7 +30,7 @@ export class XplButton {
       !this.iconTrailing && icon,
       this.iconOnly ? (h("span", { class: "sr-only" },
         h("slot", null))) : (h("slot", null)),
-      this.iconTrailing && icon)) : (h("button", { class: className, disabled: this.disabled, type: this.type },
+      this.iconTrailing && icon)) : (h("button", { class: className, disabled: this.disabled, name: this.name, type: this.type, value: this.value },
       !this.iconTrailing && icon,
       this.iconOnly ? (h("span", { class: "sr-only" },
         h("slot", null))) : (h("slot", null)),
@@ -54,8 +53,7 @@ export class XplButton {
         "text": ""
       },
       "attribute": "disabled",
-      "reflect": false,
-      "defaultValue": "undefined"
+      "reflect": false
     },
     "href": {
       "type": "string",
@@ -125,6 +123,23 @@ export class XplButton {
       "attribute": "icon-trailing",
       "reflect": false
     },
+    "name": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "name",
+      "reflect": false
+    },
     "size": {
       "type": "string",
       "mutable": false,
@@ -144,6 +159,23 @@ export class XplButton {
       "defaultValue": "\"default\""
     },
     "type": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "\"submit\" | \"reset\" | \"button\"",
+        "resolved": "\"button\" | \"reset\" | \"submit\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "type",
+      "reflect": false
+    },
+    "value": {
       "type": "string",
       "mutable": false,
       "complexType": {
@@ -157,7 +189,7 @@ export class XplButton {
         "tags": [],
         "text": ""
       },
-      "attribute": "type",
+      "attribute": "value",
       "reflect": false
     },
     "variant": {