@verdocs/web-sdk 1.2.0 → 1.4.0

package/dist/cjs/verdocs-web-sdk.cjs.js

@@ -1,19 +1,131 @@
 'use strict';
 
-const index = require('./index-01e27102.js');
+const index = require('./index-a24f3b6a.js');
+const appGlobals = require('./app-globals-3a1e7e63.js');
 
 /*
- Stencil Client Patch Browser v2.12.1 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Browser v2.17.0 | MIT Licensed | https://stenciljs.com
  */
+const getDynamicImportFunction = (namespace) => `__sc_import_${namespace.replace(/\s|-/g, '_')}`;
 const patchBrowser = () => {
+    // NOTE!! This fn cannot use async/await!
+    if (index.BUILD.isDev && !index.BUILD.isTesting) {
+        index.consoleDevInfo('Running in development mode.');
+    }
+    if (index.BUILD.cssVarShim) {
+        // shim css vars
+        index.plt.$cssShim$ = index.win.__cssshim;
+    }
+    if (index.BUILD.cloneNodeFix) {
+        // opted-in to polyfill cloneNode() for slot polyfilled components
+        patchCloneNodeFix(index.H.prototype);
+    }
+    if (index.BUILD.profile && !performance.mark) {
+        // not all browsers support performance.mark/measure (Safari 10)
+        // because the mark/measure APIs are designed to write entries to a buffer in the browser that does not exist,
+        // simply stub the implementations out.
+        // TODO(STENCIL-323): Remove this patch when support for older browsers is removed (breaking)
+        // @ts-ignore
+        performance.mark = performance.measure = () => {
+            /*noop*/
+        };
+        performance.getEntriesByName = () => [];
+    }
+    // @ts-ignore
+    const scriptElm = index.BUILD.scriptDataOpts || index.BUILD.safari10 || index.BUILD.dynamicImportShim
+        ? Array.from(index.doc.querySelectorAll('script')).find((s) => new RegExp(`\/${index.NAMESPACE}(\\.esm)?\\.js($|\\?|#)`).test(s.src) ||
+            s.getAttribute('data-stencil-namespace') === index.NAMESPACE)
+        : null;
     const importMeta = (typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('verdocs-web-sdk.cjs.js', document.baseURI).href));
-    const opts = {};
-    if (importMeta !== '') {
+    const opts = index.BUILD.scriptDataOpts ? scriptElm['data-opts'] || {} : {};
+    if (index.BUILD.safari10 && 'onbeforeload' in scriptElm && !history.scrollRestoration /* IS_ESM_BUILD */) {
+        // Safari < v11 support: This IF is true if it's Safari below v11.
+        // This fn cannot use async/await since Safari didn't support it until v11,
+        // however, Safari 10 did support modules. Safari 10 also didn't support "nomodule",
+        // so both the ESM file and nomodule file would get downloaded. Only Safari
+        // has 'onbeforeload' in the script, and "history.scrollRestoration" was added
+        // to Safari in v11. Return a noop then() so the async/await ESM code doesn't continue.
+        // IS_ESM_BUILD is replaced at build time so this check doesn't happen in systemjs builds.
+        return {
+            then() {
+                /* promise noop */
+            },
+        };
+    }
+    if (!index.BUILD.safari10 && importMeta !== '') {
         opts.resourcesUrl = new URL('.', importMeta).href;
     }
+    else if (index.BUILD.dynamicImportShim || index.BUILD.safari10) {
+        opts.resourcesUrl = new URL('.', new URL(scriptElm.getAttribute('data-resources-url') || scriptElm.src, index.win.location.href)).href;
+        if (index.BUILD.dynamicImportShim) {
+            patchDynamicImport(opts.resourcesUrl, scriptElm);
+        }
+        if (index.BUILD.dynamicImportShim && !index.win.customElements) {
+            // module support, but no custom elements support (Old Edge)
+            // @ts-ignore
+            return Promise.resolve().then(function () { return require(/* webpackChunkName: "polyfills-dom" */ './dom-7fb93981.js'); }).then(() => opts);
+        }
+    }
     return index.promiseResolve(opts);
 };
+const patchDynamicImport = (base, orgScriptElm) => {
+    const importFunctionName = getDynamicImportFunction(index.NAMESPACE);
+    try {
+        // test if this browser supports dynamic imports
+        // There is a caching issue in V8, that breaks using import() in Function
+        // By generating a random string, we can workaround it
+        // Check https://bugs.chromium.org/p/chromium/issues/detail?id=990810 for more info
+        index.win[importFunctionName] = new Function('w', `return import(w);//${Math.random()}`);
+    }
+    catch (e) {
+        // this shim is specifically for browsers that do support "esm" imports
+        // however, they do NOT support "dynamic" imports
+        // basically this code is for old Edge, v18 and below
+        const moduleMap = new Map();
+        index.win[importFunctionName] = (src) => {
+            const url = new URL(src, base).href;
+            let mod = moduleMap.get(url);
+            if (!mod) {
+                const script = index.doc.createElement('script');
+                script.type = 'module';
+                script.crossOrigin = orgScriptElm.crossOrigin;
+                script.src = URL.createObjectURL(new Blob([`import * as m from '${url}'; window.${importFunctionName}.m = m;`], {
+                    type: 'application/javascript',
+                }));
+                mod = new Promise((resolve) => {
+                    script.onload = () => {
+                        resolve(index.win[importFunctionName].m);
+                        script.remove();
+                    };
+                });
+                moduleMap.set(url, mod);
+                index.doc.head.appendChild(script);
+            }
+            return mod;
+        };
+    }
+};
+const patchCloneNodeFix = (HTMLElementPrototype) => {
+    const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;
+    HTMLElementPrototype.cloneNode = function (deep) {
+        if (this.nodeName === 'TEMPLATE') {
+            return nativeCloneNodeFn.call(this, deep);
+        }
+        const clonedNode = nativeCloneNodeFn.call(this, false);
+        const srcChildNodes = this.childNodes;
+        if (deep) {
+            for (let i = 0; i < srcChildNodes.length; i++) {
+                // Node.ATTRIBUTE_NODE === 2, and checking because IE11
+                if (srcChildNodes[i].nodeType !== 2) {
+                    clonedNode.appendChild(srcChildNodes[i].cloneNode(true));
+                }
+            }
+        }
+        return clonedNode;
+    };
+};
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["verdocs-sign.cjs",[[0,"verdocs-sign",{"documentid":[1],"roleid":[1],"invitecode":[1],"endpoint":[32],"recipient":[32],"signerToken":[32],"pdfUrl":[32],"recipientIndex":[32],"document":[32],"fields":[32],"pdfPageInfo":[32],"hasSignature":[32],"nextButtonLabel":[32],"focusedField":[32]}]]],["verdocs-auth.cjs",[[0,"verdocs-auth",{"visible":[4],"logo":[1],"debug":[4],"isAuthenticated":[32],"displayMode":[32],"username":[32],"password":[32],"loggingIn":[32],"activeSession":[32],"loginError":[32]}]]],["verdocs-search.cjs",[[0,"verdocs-search"]]],["verdocs-document-status.cjs",[[0,"verdocs-document-status",{"status":[1]}]]],["verdocs-organization-card.cjs",[[0,"verdocs-organization-card",{"organization":[16]}]]],["verdocs-quick-functions.cjs",[[0,"verdocs-quick-functions"]]],["verdocs-search-tabs.cjs",[[0,"verdocs-search-tabs",{"selected":[32]}]]],["verdocs-template-card.cjs",[[0,"verdocs-template-card",{"template":[16]}]]],["verdocs-template-tags.cjs",[[0,"verdocs-template-tags",{"tags":[16]}]]],["verdocs-toggle.cjs",[[0,"verdocs-toggle",{"options":[16],"theme":[1]},[[6,"click","handleClick"]]]]],["verdocs-button_2.cjs",[[0,"verdocs-text-input",{"value":[1],"label":[1],"placeholder":[1],"autocomplete":[1],"type":[1],"disabled":[4],"_value":[32]}],[0,"verdocs-button",{"label":[1],"type":[1],"variant":[1],"disabled":[4]}]]],["verdocs-ok-dialog.cjs",[[0,"verdocs-ok-dialog",{"heading":[1],"message":[1],"open":[4],"cancel":[4]}]]],["verdocs-initial-dialog.cjs",[[0,"verdocs-initial-dialog",{"fullname":[1],"open":[4],"fontLoaded":[32],"enteredInitials":[32],"mode":[32]}]]],["verdocs-signature-dialog.cjs",[[0,"verdocs-signature-dialog",{"fullname":[1],"open":[4],"fontLoaded":[32],"enteredName":[32],"mode":[32]}]]],["verdocs-upload-dialog.cjs",[[0,"verdocs-upload-dialog",{"open":[4],"draggingOver":[32],"decodedFiles":[32]}]]],["verdocs-search-activity_2.cjs",[[0,"verdocs-search-activity",{"type":[1],"options":[8],"emptyMessage":[32],"authFailure":[32],"title":[32],"recent":[32],"saved":[32],"starred":[32]}],[0,"verdocs-search-box",{"placeholder":[1],"type":[1],"query":[1]}]]],["verdocs-loader.cjs",[[0,"verdocs-loader"]]],["verdocs-dropdown_12.cjs",[[0,"verdocs-field-initial",{"required":[4],"fullName":[1,"full-name"],"value":[1],"focusField":[64]}],[0,"verdocs-field-signature",{"required":[4],"fullName":[1,"full-name"],"value":[1],"focusField":[64]}],[0,"verdocs-field-attachment",{"order":[2],"value":[1],"required":[4],"disabled":[4],"focusField":[64]}],[0,"verdocs-view",{"rotation":[2],"source":[1],"token":[1],"loadProgress":[32]}],[0,"verdocs-dropdown",{"options":[16],"open":[4],"isOpen":[32]}],[0,"verdocs-field-checkbox",{"order":[2],"value":[4],"required":[4],"disabled":[4]}],[0,"verdocs-field-date",{"placeholder":[1],"order":[2],"value":[1],"required":[4],"disabled":[4],"focused":[32],"focusField":[64]}],[0,"verdocs-field-dropdown",{"options":[16],"required":[4],"order":[2],"disabled":[4],"value":[1],"focused":[32],"focusField":[64]}],[0,"verdocs-field-payment",{"field":[16],"fields":[16],"pageNum":[2,"page-num"],"roleName":[1,"role-name"],"fieldId":[1,"field-id"],"recipients":[8],"selectedRoleName":[1,"selected-role-name"],"pdfPages":[16],"currentSignature":[1,"current-signature"],"currentSignatureId":[1,"current-signature-id"],"currentInitial":[1,"current-initial"],"currentInitialId":[1,"current-initial-id"],"focused":[4],"signed":[4],"preparedMessage":[32],"signatureUrl":[32]}],[0,"verdocs-field-radio-button",{"order":[2],"checked":[4],"value":[1],"name":[1],"required":[4],"disabled":[4]}],[0,"verdocs-field-textarea",{"placeholder":[1],"order":[2],"value":[1],"required":[4],"disabled":[4],"focused":[32],"focusField":[64]}],[0,"verdocs-field-textbox",{"placeholder":[1],"order":[2],"value":[1],"required":[4],"disabled":[4],"focused":[32],"focusField":[64]}]]]], options);
+  appGlobals.globalScripts();
+  return index.bootstrapLazy([["verdocs-sign.cjs",[[0,"verdocs-sign",{"documentid":[1],"roleid":[1],"invitecode":[1],"endpoint":[32],"recipient":[32],"signerToken":[32],"pdfUrl":[32],"recipientIndex":[32],"document":[32],"fields":[32],"pdfPageInfo":[32],"hasSignature":[32],"nextButtonLabel":[32],"focusedField":[32]}]]],["verdocs-auth.cjs",[[0,"verdocs-auth",{"visible":[4],"logo":[1],"debug":[4],"isAuthenticated":[32],"displayMode":[32],"username":[32],"password":[32],"loggingIn":[32],"activeSession":[32],"loginError":[32]}]]],["verdocs-search.cjs",[[0,"verdocs-search"]]],["verdocs-kba-dialog.cjs",[[0,"verdocs-kba-dialog",{"step":[2],"steps":[2],"helptitle":[1],"helptext":[1],"mode":[1],"label":[1],"placeholder":[1],"choices":[16],"open":[4],"response":[32]}]]],["verdocs-organization-card.cjs",[[0,"verdocs-organization-card",{"organization":[16]}]]],["verdocs-quick-functions.cjs",[[0,"verdocs-quick-functions"]]],["verdocs-search-tabs.cjs",[[0,"verdocs-search-tabs",{"selected":[32]}]]],["verdocs-status-indicator.cjs",[[0,"verdocs-status-indicator",{"size":[1],"theme":[1],"status":[1],"document":[16],"isOpen":[32],"recipientStatusIcons":[32]}]]],["verdocs-template-card.cjs",[[0,"verdocs-template-card",{"template":[16]}]]],["verdocs-template-tags.cjs",[[0,"verdocs-template-tags",{"tags":[16]}]]],["verdocs-toggle.cjs",[[0,"verdocs-toggle",{"options":[16],"theme":[1]},[[6,"click","handleClick"]]]]],["verdocs-field-initial.cjs",[[0,"verdocs-field-initial",{"required":[4],"fullName":[1,"full-name"],"value":[1],"focusField":[64]}]]],["verdocs-field-signature.cjs",[[0,"verdocs-field-signature",{"required":[4],"fullName":[1,"full-name"],"value":[1],"focusField":[64]}]]],["verdocs-field-attachment.cjs",[[0,"verdocs-field-attachment",{"order":[2],"value":[1],"required":[4],"disabled":[4],"focusField":[64]}]]],["verdocs-ok-dialog.cjs",[[0,"verdocs-ok-dialog",{"heading":[1],"message":[1],"open":[4],"cancel":[4]}]]],["verdocs-view.cjs",[[0,"verdocs-view",{"rotation":[2],"source":[1],"token":[1],"loadProgress":[32]}]]],["verdocs-dropdown.cjs",[[0,"verdocs-dropdown",{"options":[16],"open":[4],"isOpen":[32]}]]],["verdocs-field-checkbox.cjs",[[0,"verdocs-field-checkbox",{"order":[2],"value":[4],"required":[4],"disabled":[4]}]]],["verdocs-field-date.cjs",[[0,"verdocs-field-date",{"placeholder":[1],"order":[2],"value":[1],"required":[4],"disabled":[4],"focused":[32],"focusField":[64]}]]],["verdocs-field-dropdown.cjs",[[0,"verdocs-field-dropdown",{"options":[16],"required":[4],"order":[2],"disabled":[4],"value":[1],"focused":[32],"focusField":[64]}]]],["verdocs-field-payment.cjs",[[0,"verdocs-field-payment",{"field":[16],"fields":[16],"pageNum":[2,"page-num"],"roleName":[1,"role-name"],"fieldId":[1,"field-id"],"recipients":[8],"selectedRoleName":[1,"selected-role-name"],"pdfPages":[16],"currentSignature":[1,"current-signature"],"currentSignatureId":[1,"current-signature-id"],"currentInitial":[1,"current-initial"],"currentInitialId":[1,"current-initial-id"],"focused":[4],"signed":[4],"preparedMessage":[32],"signatureUrl":[32]}]]],["verdocs-field-radio-button.cjs",[[0,"verdocs-field-radio-button",{"order":[2],"checked":[4],"value":[1],"name":[1],"required":[4],"disabled":[4]}]]],["verdocs-field-textarea.cjs",[[0,"verdocs-field-textarea",{"placeholder":[1],"order":[2],"value":[1],"required":[4],"disabled":[4],"focused":[32],"focusField":[64]}]]],["verdocs-field-textbox.cjs",[[0,"verdocs-field-textbox",{"placeholder":[1],"order":[2],"value":[1],"required":[4],"disabled":[4],"focused":[32],"focusField":[64]}]]],["verdocs-search-activity.cjs",[[0,"verdocs-search-activity",{"type":[1],"options":[8],"emptyMessage":[32],"authFailure":[32],"title":[32],"recent":[32],"saved":[32],"starred":[32]}]]],["verdocs-search-box.cjs",[[0,"verdocs-search-box",{"placeholder":[1],"type":[1],"query":[1]}]]],["verdocs-text-input.cjs",[[0,"verdocs-text-input",{"value":[1],"label":[1],"placeholder":[1],"autocomplete":[1],"type":[1],"disabled":[4],"_value":[32]}]]],["verdocs-button.cjs",[[0,"verdocs-button",{"label":[1],"startIcon":[1,"start-icon"],"endIcon":[1,"end-icon"],"size":[1],"type":[1],"variant":[1],"disabled":[4]}]]],["verdocs-initial-dialog.cjs",[[0,"verdocs-initial-dialog",{"fullname":[1],"open":[4],"fontLoaded":[32],"enteredInitials":[32],"mode":[32]}]]],["verdocs-signature-dialog.cjs",[[0,"verdocs-signature-dialog",{"fullname":[1],"open":[4],"fontLoaded":[32],"enteredName":[32],"mode":[32]}]]],["verdocs-upload-dialog.cjs",[[0,"verdocs-upload-dialog",{"open":[4],"draggingOver":[32],"decodedFiles":[32]}]]],["verdocs-loader.cjs",[[0,"verdocs-loader"]]]], options);
 });

package/dist/collection/collection-manifest.json

@@ -6,13 +6,14 @@
     "./components/controls/verdocs-toggle/verdocs-toggle.js",
     "./components/embeds/verdocs-view/verdocs-view.js",
     "./components/controls/verdocs-button/verdocs-button.js",
-    "./components/controls/verdocs-document-status/verdocs-document-status.js",
     "./components/controls/verdocs-loader/verdocs-loader.js",
     "./components/controls/verdocs-organization-card/verdocs-organization-card.js",
+    "./components/controls/verdocs-status-indicator/verdocs-status-indicator.js",
     "./components/controls/verdocs-template-card/verdocs-template-card.js",
     "./components/controls/verdocs-template-tags/verdocs-template-tags.js",
     "./components/controls/verdocs-text-input/verdocs-text-input.js",
     "./components/dialogs/verdocs-initial-dialog/verdocs-initial-dialog.js",
+    "./components/dialogs/verdocs-kba-dialog/verdocs-kba-dialog.js",
     "./components/dialogs/verdocs-ok-dialog/verdocs-ok-dialog.js",
     "./components/dialogs/verdocs-signature-dialog/verdocs-signature-dialog.js",
     "./components/dialogs/verdocs-upload-dialog/verdocs-upload-dialog.js",
@@ -34,8 +35,8 @@
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "2.12.1",
-    "typescriptVersion": "4.3.5"
+    "version": "2.17.0",
+    "typescriptVersion": "4.5.4"
   },
   "collections": [],
   "bundles": []

package/dist/collection/components/controls/verdocs-button/verdocs-button.css

@@ -1,64 +1,140 @@
 verdocs-button button {
-  font-family: sans-serif;
-  font-family: var(--verdocs-font);
+  font-family: "Barlow", sans-serif;
   text-transform: uppercase;
+  justify-content: center;
+  display: inline-flex;
+  align-items: center;
+  font-weight: 700;
   cursor: pointer;
-  font-weight: 500;
+  margin: 0;
+}
+verdocs-button button .icon {
+  margin: 0 12px;
+}
+verdocs-button button .icon svg {
+  fill: #fff;
+  display: block;
+}
+verdocs-button button .label {
+  padding: 0 12px;
 }
 verdocs-button button:disabled {
   cursor: none;
 }
-verdocs-button.standard button {
-  background: var(--verdocs-primary-color);
-  border-radius: 4px;
+verdocs-button button.small {
+  height: 34px;
+  font-size: 13px;
+}
+verdocs-button button.small .icon {
+  margin: 0 4px;
+}
+verdocs-button button.small .icon svg {
+  margin: 2px 0 0 0;
+  height: 20px;
+}
+verdocs-button button.small .label {
+  padding: 0 4px;
+}
+verdocs-button button.normal {
+  height: 44px;
   font-size: 14px;
-  color: white;
-  border: none;
-  outline: none;
-  height: 32px;
-  margin: 0;
-  display: block;
+}
+verdocs-button button.normal .icon.start {
+  margin: 0 4px 0 8px;
+}
+verdocs-button button.normal .icon.end {
+  margin: 0 8px 0 4px;
+}
+verdocs-button button.normal .icon svg {
+  margin: 2px 0 0 0;
+  height: 22px;
+}
+verdocs-button button.normal .label {
+  padding: 0 10px;
+}
+verdocs-button button.medium {
+  height: 52px;
+  font-size: 16px;
+}
+verdocs-button button.medium .icon.start {
+  margin: 0 0 0 18px;
+}
+verdocs-button button.medium .icon.end {
+  margin: 0 18px 0 0;
+}
+verdocs-button button.medium .icon svg {
+  margin: 2px 0 0 0;
+  height: 26px;
+}
+verdocs-button button.medium .label {
   padding: 0 20px;
 }
-verdocs-button.standard button:disabled {
-  background-color: #999;
+verdocs-button button.large {
+  height: 60px;
+  font-size: 20px;
+}
+verdocs-button button.large .icon.start {
+  margin: 0 0 0 24px;
+}
+verdocs-button button.large .icon.end {
+  margin: 0 24px 0 0;
+}
+verdocs-button button.large .icon svg {
+  margin: 2px 0 0 0;
+  height: 32px;
+}
+verdocs-button button.large .label {
+  padding: 0 34px;
+}
+verdocs-button button.standard {
+  background: #55bc81;
+  border-radius: 4px;
+  outline: none;
+  border: none;
+  color: white;
+}
+verdocs-button button.standard:disabled {
+  background-color: #999999;
   cursor: default;
 }
-verdocs-button.standard button:active {
+verdocs-button button.standard:active:not([disabled]) {
   filter: brightness(110%);
 }
-verdocs-button.text button {
-  border: none;
-  font-size: 14px;
-  color: var(--verdocs-secondary-color);
-  font-weight: 400;
-  outline: none;
+verdocs-button button.text {
+  color: #4c56cb;
   background: transparent;
+  font-weight: 500;
   padding: 0 4px;
+  outline: none;
+  border: none;
 }
-verdocs-button.text button:disabled {
-  color: #999;
+verdocs-button button.text:disabled {
+  color: #999999;
   cursor: none;
 }
-verdocs-button.text button:active {
+verdocs-button button.text:active:not([disabled]) {
   filter: brightness(130%);
 }
-verdocs-button.outline button {
-  font-size: 14px;
-  border: 1px solid var(--verdocs-secondary-color);
-  color: var(--verdocs-secondary-color);
+verdocs-button button.text .icon svg {
+  fill: #4c56cb;
+}
+verdocs-button button.outline {
+  border: 1px solid #4c56cb;
+  color: #4c56cb;
   outline: none;
   background: transparent;
-  height: 32px;
   border-radius: 4px;
   padding: 0 20px;
 }
-verdocs-button.outline button:disabled {
-  color: #999;
+verdocs-button button.outline:disabled {
+  color: #999999;
   cursor: none;
-  border: 1px solid #999;
+  border: 1px solid #999999;
 }
-verdocs-button.outline button:active {
-  background: var(--verdocs-secondary-color);
+verdocs-button button.outline:active {
+  background: #4c56cb;
   color: white;
+}
+verdocs-button button.outline .icon svg {
+  fill: #4c56cb;
 }

package/dist/collection/components/controls/verdocs-button/verdocs-button.js

@@ -1,15 +1,33 @@
-import { Component, Prop, h, Host, Event } from '@stencil/core';
+import { Component, Prop, h, Event } from '@stencil/core';
 /**
- * Display a simple button. Three variants are supported. Standard and Outline buttons look like traditional form buttons and are
- * ideal candidates for 'Ok' and 'Cancel' options in most cases. Text buttons are intended to be used inline in content blocks or
- * for more subtle button options. (Auth uses text buttons for the Forgot Password and Sign Up options.)
+ * Display a simple button.
+ *
+ * Three variants are supported. `standard` and `outline` buttons look like traditional form buttons and are ideal candidates for 'Ok' and
+ * 'Cancel' options in most cases. `text` buttons are intended to be used inline in content blocks or for more subtle button options.
+ * (Auth uses text buttons for the Forgot Password and Sign Up options.)
+ *
+ * Four sizes are also supported. Most use cases will call for the `normal` size, but a `small` size is ideal for more subtle controls, such
+ * as pagination or other secondary functions. `medium` buttons are slightly larger to provide balance in forms where other items are also
+ * bigger, and `large` buttons are for cases where the page has mostly white-space and the buttons need to fill more space.
+ *
+ * Icons may be placed either before ("start") or after ("end") the button label. Icons should be SVG objects passed as strings and will
+ * be rendered as HTML inside the button label area. It is important that the root <SVG> tag contains a default `fill="#ffffff"` setting
+ * for the base color, and that child elements below it do not. This allows the button color to carry into the icon properly.
  */
 export class VerdocsButton {
   constructor() {
     /**
-     * The label for the  button.
+     * If desired, a prefix icon for the button
      */
-    this.label = '';
+    this.startIcon = null;
+    /**
+     * If desired, a suffix icon for the button
+     */
+    this.endIcon = null;
+    /**
+     * The size (height) of the button.
+     */
+    this.size = 'normal';
     /**
      * The type of the button.
      */
@@ -23,15 +41,16 @@ export class VerdocsButton {
      */
     this.disabled = false;
   }
-  componentWillLoad() { }
-  componentDidLoad() { }
   handleClick(e) {
     e.preventDefault();
     this.press.emit();
   }
   render() {
-    return (h(Host, { class: `${this.variant}` },
-      h("button", { disabled: this.disabled, type: this.type, onClick: e => this.handleClick(e) }, this.label)));
+    console.log('Rendering button', this.startIcon);
+    return (h("button", { disabled: this.disabled, type: this.type, onClick: e => this.handleClick(e), class: `${this.variant} ${this.size} ${this.type}` },
+      this.startIcon ? h("span", { class: "icon start", innerHTML: this.startIcon }) : null,
+      h("span", { class: "label" }, this.label),
+      this.endIcon ? h("span", { class: "icon end", innerHTML: this.endIcon }) : null));
   }
   static get is() { return "verdocs-button"; }
   static get originalStyleUrls() { return {
@@ -49,15 +68,68 @@ export class VerdocsButton {
         "resolved": "string",
         "references": {}
       },
-      "required": false,
+      "required": true,
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "The label for the  button."
+        "text": "The label for the button."
       },
       "attribute": "label",
+      "reflect": false
+    },
+    "startIcon": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string | null",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "If desired, a prefix icon for the button"
+      },
+      "attribute": "start-icon",
+      "reflect": false,
+      "defaultValue": "null"
+    },
+    "endIcon": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string | null",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "If desired, a suffix icon for the button"
+      },
+      "attribute": "end-icon",
+      "reflect": false,
+      "defaultValue": "null"
+    },
+    "size": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'small' | 'normal' | 'medium' | 'large'",
+        "resolved": "\"large\" | \"medium\" | \"normal\" | \"small\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The size (height) of the button."
+      },
+      "attribute": "size",
       "reflect": false,
-      "defaultValue": "''"
+      "defaultValue": "'normal'"
     },
     "type": {
       "type": "string",

package/dist/collection/components/controls/verdocs-button/verdocs-button.stories.js

@@ -1,14 +1,45 @@
 import { html } from 'lit-html';
+// Circle with three dots in it
+const CircleIcon = `
+  <svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#ffffff">
+    <g>
+      <rect fill="none" height="24" width="24"/>
+    </g>
+    <g>
+      <g>
+        <path d="M12,2C6.48,2,2,6.48,2,12c0,5.52,4.48,10,10,10s10-4.48,10-10C22,6.48,17.52,2,12,2z M12,20c-4.42,0-8-3.58-8-8 c0-4.42,3.58-8,8-8s8,3.58,8,8C20,16.42,16.42,20,12,20z"/>
+        <circle cx="7" cy="12" r="1.5"/>
+        <circle cx="12" cy="12" r="1.5"/>
+        <circle cx="17" cy="12" r="1.5"/>
+      </g>
+    </g>
+  </svg>
+`;
+const ArrowIcon = `
+<svg width="10" height="26" viewBox="0 0 10 26" fill="#ffffff" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_31568_3647)">
+<path d="M9.64682 13.431L2.10645 20.9466C1.86503 21.1853 1.47466 21.1853 1.23324 20.9466L0.216218 19.9411C-0.0251976 19.7025 -0.0251976 19.3165 0.216218 19.0778L6.30296 12.9993L0.216218 6.9208C-0.0251976 6.68213 -0.0251976 6.29619 0.216218 6.05752L1.23324 5.05205C1.47466 4.81338 1.86503 4.81338 2.10645 5.05205L9.64682 12.5677C9.88824 12.8064 9.88824 13.1923 9.64682 13.431Z"/>
+</g>
+<defs>
+<clipPath id="clip0_31568_3647">
+<rect width="9.86207" height="26"/>
+</clipPath>
+</defs>
+</svg>
+`;
 export default {
   title: 'Controls/Button',
   component: 'verdocs-button',
   args: {
     label: 'Click Me',
     type: 'button',
+    size: 'normal',
+    variant: 'standard',
     disabled: false,
   },
   argTypes: {
-    variant: { defaultValue: 'standard' },
+    startIcon: { defaultValue: false, control: { type: 'boolean' } },
+    endIcon: { defaultValue: false, control: { type: 'boolean' } },
     press: {
       action: 'press',
       table: {
@@ -17,4 +48,12 @@ export default {
     },
   },
 };
-export const Button = ({ label, variant, disabled, press }) => html `<verdocs-button .label=${label} .variant=${variant} .disabled=${disabled} @press=${press} />`;
+export const Button = ({ label, size, variant, disabled, startIcon, endIcon, press }) => html `<verdocs-button
+    .label=${label}
+    .startIcon=${startIcon ? CircleIcon : null}
+    .endIcon=${endIcon ? ArrowIcon : null}
+    .size=${size}
+    .variant=${variant}
+    .disabled=${disabled}
+    @press=${press}
+  />`;

package/dist/collection/components/controls/verdocs-dropdown/verdocs-dropdown.css

@@ -1,7 +1,5 @@
 verdocs-dropdown {
-  /* Fallback font for old browsers */
-  font-family: sans-serif;
-  font-family: var(--verdocs-font);
+  font-family: "Barlow", sans-serif;
   display: block;
 }
 verdocs-dropdown .arrow {
@@ -12,11 +10,11 @@ verdocs-dropdown .arrow {
   border-radius: 4px;
   align-items: center;
   display: inline-flex;
-  border: 1px solid #ccc;
+  border: 1px solid #cccccc;
   justify-content: center;
 }
 verdocs-dropdown .arrow svg {
-  fill: var(--verdocs-primary-color);
+  fill: #55bc81;
   transition: 0.3s;
 }
 verdocs-dropdown .items {
@@ -24,7 +22,7 @@ verdocs-dropdown .items {
   display: none;
   z-index: 10000;
   border-radius: 5px;
-  background: #33364b;
+  background: #33354c;
   border: 1px solid #654dcb;
 }
 verdocs-dropdown .items[data-show] {
@@ -41,13 +39,13 @@ verdocs-dropdown .option {
 }
 verdocs-dropdown .option:hover {
   cursor: pointer;
-  background: var(--verdocs-primary-color);
+  background: #55bc81;
 }
 verdocs-dropdown .option[disabled] {
-  color: #aaa;
+  color: #aaaaaa;
 }
 verdocs-dropdown .option[disabled]:hover {
-  color: #aaa;
+  color: #aaaaaa;
   cursor: inherit;
   background: transparent;
 }
@@ -59,7 +57,6 @@ verdocs-dropdown.open .arrow {
   border: 1px solid #707ae5;
 }
 verdocs-dropdown.open .arrow svg {
-  /*transform: rotate(180deg);*/
   transform: scaleY(-1);
   fill: #fff;
 }

package/dist/collection/components/controls/verdocs-dropdown/verdocs-dropdown.js

@@ -5,20 +5,6 @@ import SortDown from './down-arrow.svg';
 /**
  * Display a drop-down menu button. A menu of the specified options will be displayed when the button is pressed. The menu will be hidden
  * when the button is pressed again, or an option is selected.
- *
- * ```typescript
- * interface IMenuOption {
- *   // The label to display on the menu option.
- *   label: string;
- *   // Optional icon to display next to the option's label. Specify icons as SVG strings.
- *   icon?: string;
- *   // If true, the option will be shown disabled (dimmed and not clickable).
- *   disabled?: boolean;
- *   // Optional additional fields such as IDs or other data. When a menu option is clicked/tapped, the associated
- *   // IMenuOptionwill be passed to the event handler. This data may be used to help identify the option selected.
- *   [key: string]: any;
- * }
- * ```
  */
 export class VerdocsDropdown {
   constructor() {
@@ -31,7 +17,7 @@ export class VerdocsDropdown {
     this.isOpen = !!this.open;
   }
   componentDidLoad() {
-    this.popper = createPopper(this.dropdownButton, this.dropdownMenu, { placement: 'bottom-start', modifiers: [{ name: 'offset', options: { offset: [0, 10] } }] });
+    this.popper = createPopper(this.dropdownButton, this.dropdownMenu, { placement: 'bottom-start', modifiers: [{ name: 'offset', options: { offset: [0, 6] } }] });
   }
   handleSelectOption(option) {
     this.isOpen = false;

package/dist/collection/components/controls/verdocs-loader/verdocs-loader.js

@@ -1,4 +1,7 @@
 import { Component, h, Host } from '@stencil/core';
+/**
+ * Animated loader placeholder. There are currently no configuration options for this control.
+ */
 export class VerdocsLoader {
   render() {
     return h(Host, null);