@verdocs/web-sdk 4.0.8 → 4.1.2

package/dist/types/components.d.ts

@@ -12,7 +12,6 @@ import { TVerdocsBuildStep } from "./components/embeds/verdocs-build/verdocs-bui
 import { IContactSearchEvent, IContactSelectEvent, IEmailContact, IPhoneContact } from "./components/envelopes/verdocs-contact-picker/verdocs-contact-picker";
 import { IMenuOption } from "./components/controls/verdocs-dropdown/verdocs-dropdown";
 import { IDocumentPageInfo, IPageLayer } from "./utils/Types";
-import { IOption } from "./components/controls/verdocs-floating-menu/verdocs-floating-menu";
 import { IFilterOption } from "./components/controls/verdocs-quick-filter/verdocs-quick-filter";
 import { ISearchEvent, TContentType } from "./components/elements/verdocs-search-box/verdocs-search-box";
 import { IContactSearchEvent as IContactSearchEvent1 } from "./components/envelopes/verdocs-contact-picker/verdocs-contact-picker";
@@ -29,7 +28,6 @@ export { TVerdocsBuildStep } from "./components/embeds/verdocs-build/verdocs-bui
 export { IContactSearchEvent, IContactSelectEvent, IEmailContact, IPhoneContact } from "./components/envelopes/verdocs-contact-picker/verdocs-contact-picker";
 export { IMenuOption } from "./components/controls/verdocs-dropdown/verdocs-dropdown";
 export { IDocumentPageInfo, IPageLayer } from "./utils/Types";
-export { IOption } from "./components/controls/verdocs-floating-menu/verdocs-floating-menu";
 export { IFilterOption } from "./components/controls/verdocs-quick-filter/verdocs-quick-filter";
 export { ISearchEvent, TContentType } from "./components/elements/verdocs-search-box/verdocs-search-box";
 export { IContactSearchEvent as IContactSearchEvent1 } from "./components/envelopes/verdocs-contact-picker/verdocs-contact-picker";
@@ -64,26 +62,15 @@ export namespace Components {
         "view"?: 'completed' | 'action' | 'waiting';
     }
     /**
-     * Display an authentication dialog that allows the user to login or sign up. Callbacks are provided for events that
-     * occur during the process (especially successful completion). If the user is already authenticated with a valid
-     * session, this component will hide itself and fire the success callback immediately. It is up to the host application
-     * to render the next appropriate view for the application.
-     * To simplify some types of authentication flows, a visibility flag can force this component to never display. This
-     * allows you to susbcribe to notifications from the
+     * Display an authentication dialog that allows the user to login or sign up. If the user is already authenticated
+     * with a valid session, this component will hide itself and fire the success callback immediately. It is up to the
+     * host application to render the next appropriate view for the application.
+     * To simplify UI development, a visibility flag can force this component to never display. This
+     * allows you to susbcribe to notifications from client apps without calling the lower-level JS SDK.
      * This embed is responsive / mobile-friendly, but the calling application should provide at least a 300px wide
      * container to allow sufficient space for the required forms.
-     * As noted below, the primary event is `authenticated`. This will always be fired at least once, immediately after
-     * the widget is rendered and the user's status has been checked. It may be fired again as the user completes (or
-     * cancels) authentication steps.
-     * Authentication is required to demonstrate this Element. You may do this in Storybook by using the Auth
-     * embed. This Element will reuse the same session produced by logging in via that Embed.
-     * ```typescript
-     * interface IAuthStatus {
-     *   // If true, the user is authenticated with a valid session
-     *   authenticated: boolean;
-     *   // Details for the user's session
-     *   session: IActiveSession | null;
-     * }
+     * ```ts
+     * <verdocs-auth onAuthenticated={e => console.log('Authentication state:', e.detail)} />
      * ```
      */
     interface VerdocsAuth {
@@ -102,6 +89,9 @@ export namespace Components {
     }
     /**
      * Display a template building experience.
+     * ```ts
+     * <verdocs-build templateId={templateId} />
+     * ```
      */
     interface VerdocsBuild {
         /**
@@ -117,6 +107,12 @@ export namespace Components {
          */
         "templateId": string | null;
     }
+    /**
+     * A simple button, with consistent styling to other controls in the design system.
+     * ```ts
+     * <verdocs-button label="Click Me" size="normal" variant="standard" />
+     * ```
+     */
     interface VerdocsButton {
         /**
           * Whether the button should be disabled.
@@ -147,6 +143,21 @@ export namespace Components {
          */
         "variant": 'standard' | 'text' | 'outline';
     }
+    /**
+     * Display an icon button that triggers a drop-down panel that can display
+     * arbitrary child content, such as metadata, forms, or other controls.
+     * ```ts
+     *   <verdocs-button-panel .icon=${icon}>
+     *     <h6>Field Settings</h6>
+     *     <form>
+     *     <p>
+     *       <label>Field Name</label>
+     *       <input type="text" placeholder="Field Name..." />
+     *     </p>
+     *     </form>
+     *   </verdocs-button-panel>
+     * ```
+     */
     interface VerdocsButtonPanel {
         "hidePanel": () => Promise<void>;
         /**
@@ -162,7 +173,7 @@ export namespace Components {
      * box for UI displays e.g. dialog boxes.
      * This control encapsulates a standard HTML checkbox. To subscribe to change events, connect an `onChange`
      * handler. Sample usage:
-     * ```html
+     * ```ts
      * <verdocs-checkbox
      *    value="on"
      *    name="thingEnabled"
@@ -233,6 +244,21 @@ export namespace Components {
      */
     interface VerdocsDialog {
     }
+    /**
+     * 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. Separators may be created by supplying an entry with an empty label.
+     * ```ts
+     * <verdocs-dropdown
+     *   options={[
+     *     {label: 'Option 1', disabled: true},
+     *     {label: 'Option 2', id: '2'}
+     *     {label: ''}
+     *     {label: 'Option 3', id: '2'}
+     *    ]}
+     *   label="OK" onClick={() => (console.log('OK clicked'))}
+     * />
+     * ```
+     */
     interface VerdocsDropdown {
         /**
           * The menu options to display.
@@ -385,6 +411,10 @@ export namespace Components {
           * If set, a settings icon will be displayed on hover. The settings shown allow the field's recipient and other settings to be changed, so it should typically only be enabled in the Builder.
          */
         "editable"?: boolean;
+        /**
+          * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used. This component self-manages its resize (width) behavior when in edit-template mode, and uses this endpoint to save changes.
+         */
+        "endpoint": VerdocsEndpoint;
         /**
           * The name of the field to display.
          */
@@ -509,8 +539,7 @@ export namespace Components {
         "yscale"?: number;
     }
     /**
-     * Displays a signature field. Various field types are supported, including traditional Signature and Initials types as well as
-     * input types like text and checkbox.
+     * Displays a dropdown field that allows the user to choose one of a list of options.
      */
     interface VerdocsFieldDropdown {
         /**
@@ -554,8 +583,12 @@ export namespace Components {
         "yscale"?: number;
     }
     /**
-     * Displays an initial field. If an initial already exists, it will be displayed and the field will be disabled. Otherwise, a placeholder
-     * button will be shown. Clicking the button will show a dialog to adopt an initial.
+     * Displays an initial field. If an initial already exists, it will be displayed and the field
+     * will be disabled. Otherwise, a placeholder button will be shown. Clicking the button will
+     * show a dialog to adopt an initial.
+     * NOTE: When initial fields are completed they will be filled with an initial "stamp".
+     * This requires operation against a live, valid envelope. If you are testing this component
+     * in Storybook, it will not be visible here.
      */
     interface VerdocsFieldInitial {
         /**
@@ -699,8 +732,12 @@ export namespace Components {
         "yscale"?: number;
     }
     /**
-     * Displays a signature field. If a signature already exists, it will be displayed and the field will be disabled. Otherwise, a placeholder
-     * button will be shown. Clicking the button will show a dialog to adopt a signature.
+     * Displays a signature field. If a signature already exists, it will be displayed and the field
+     * will be disabled. Otherwise, a placeholder button will be shown. Clicking the button will
+     * show a dialog to adopt a signature.
+     * NOTE: When signature fields are completed they will be filled with a signature "stamp".
+     * This requires operation against a live, valid envelope. If you are testing this component
+     * in Storybook, it will not be visible here.
      */
     interface VerdocsFieldSignature {
         /**
@@ -748,7 +785,8 @@ export namespace Components {
         "yscale"?: number;
     }
     /**
-     * Display a multi-line text input field.
+     * Display a multi-line text input field. Reminder: the "position" of the field is specified
+     * as the BOTTOM-LEFT corner.
      */
     interface VerdocsFieldTextarea {
         /**
@@ -796,7 +834,7 @@ export namespace Components {
         "yscale"?: number;
     }
     /**
-     * Display a text input field.
+     * Display a simple 1-line text input field.
      */
     interface VerdocsFieldTextbox {
         /**
@@ -844,7 +882,8 @@ export namespace Components {
         "yscale"?: number;
     }
     /**
-     * Display a timestamp field.
+     * Display a timestamp. Timestamps are not editable by signers. Instead, they are automatically
+     * filled when the signer submits the document.
      */
     interface VerdocsFieldTimestamp {
         /**
@@ -887,18 +926,25 @@ export namespace Components {
          */
         "yscale"?: number;
     }
+    /**
+     * Displays a file picker to upload an attachment. This component is just the picker - the host application or component should
+     * provide the actual upload functionality.
+     * ```ts
+     * <verdocs-file-chooser onFileSelected={(e) => console.log('File Selected', e.detail)} />
+     * ```
+     */
     interface VerdocsFileChooser {
         /**
           * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used.
          */
         "endpoint": VerdocsEndpoint;
     }
-    interface VerdocsFloatingMenu {
-        /**
-          * The role that this contact will be assigned to.
-         */
-        "options": IOption[];
-    }
+    /**
+     * Displays a simple help icon. Upon hover or focus, a tooltip will be displayed with help text.
+     * ```ts
+     * <verdocs-help-icon text="Sample help text" />
+     * ```
+     */
     interface VerdocsHelpIcon {
         /**
           * Optional icon to display. If not supplied, a standard help icon will be shown.
@@ -920,9 +966,7 @@ export namespace Components {
         "initials": string;
     }
     /**
-     * Display a text input field. This adds a partially-transparent overlay and screen-centered dialog
-     * box with a message and optional header/title. An OK button is shown that will dismiss the message.
-     * It can also be dismissed by clicking the background overlay.
+     * Prompt the user to confirm their identity with a series of questions.
      */
     interface VerdocsKbaDialog {
         /**
@@ -958,6 +1002,12 @@ export namespace Components {
          */
         "steps": number;
     }
+    /**
+     * Animated loader placeholder. There are currently no configuration options for this control.
+     * ```ts
+     * <verdocs-loader />
+     * ```
+     */
     interface VerdocsLoader {
     }
     /**
@@ -983,12 +1033,29 @@ export namespace Components {
          */
         "showCancel": boolean;
     }
+    /**
+     * Display a small summary card describing an organization.
+     * ```ts
+     * <verdocs-organization-card organization={organization} />
+     * ```
+     */
     interface VerdocsOrganizationCard {
         /**
           * The organization to display
          */
         "organization": IOrganization;
     }
+    /**
+     * Display a simple pagination control with individual buttons to move through the data set.
+     * ```ts
+     * <verdocs-pagination
+     *   selectedPage={1}
+     *   itemCount={50}
+     *   perPage={10}
+     *   onSelectPage={(e) => {setSelectedpage(e.detail.selectedPage)}}
+     * />
+     * ```
+     */
     interface VerdocsPagination {
         /**
           * The total number of items.
@@ -1003,6 +1070,24 @@ export namespace Components {
          */
         "selectedPage": number;
     }
+    /**
+     * Display a child component in a "portal", popping it out of the main DOM tree
+     * to allow it to escape the bounds set by its parent.
+     * @credit https://github.com/tomas-teston/stencil-portal for the basic
+     * technique. This has been altered in a few ways to make it more friendly
+     * to cases where there may be multiple portals on the page and provide more
+     * alignment options for the child to be displayed.
+     * ```ts
+     * <div style="padding: 40px">
+     * <div id="sample-tooltip" style="border: 1px solid green; padding: 3px 10px;">
+     * Tooltip Anchor
+     * <verdocs-portal anchor="sample-tooltip" .align=${align} .voffset=${voffset}>
+     * <div style="border: 1px solid red; padding: 3px 10px;">Tooltip</div>
+     * </verdocs-portal>
+     * </div>
+     * </div>
+     * ```
+     */
     interface VerdocsPortal {
         /**
           * Horizontal alignment.
@@ -1021,6 +1106,9 @@ export namespace Components {
      * Display a template preview experience. This will display the template's attached
      * documents with signing fields overlaid on each page. Fields will be color-coded
      * by recipient, and will be read-only (cannot be filled, moved, or altered).
+     * ```ts
+     * <verdocs-preview templateId={templateId} />
+     * ```
      */
     interface VerdocsPreview {
         /**
@@ -1032,6 +1120,12 @@ export namespace Components {
          */
         "templateId": string | null;
     }
+    /**
+     * Display a simple progress bar in a style consistent with the design system.
+     * ```ts
+     * <verdocs-progress-bar label="Uploading..." showPercent={true} percent={54} />
+     * ```
+     */
     interface VerdocsProgressBar {
         /**
           * Optional label to display above the bar
@@ -1048,6 +1142,9 @@ export namespace Components {
     }
     /**
      * Display a drop-down menu of quick filter options.
+     * ```ts
+     * <verdocs-quick-filter options={[...options]} value={1} label="Filter" placeholder="All" />
+     * ```
      */
     interface VerdocsQuickFilter {
         "label": string;
@@ -1075,7 +1172,7 @@ export namespace Components {
      * simple radio button for UI displays e.g. dialog boxes.
      * This control encapsulates a standard HTML radio button. To subscribe to change events, connect an `onChange`
      * handler. Sample usage:
-     * ```html
+     * ```ts
      * <verdocs-radio-button
      *    value="val1"
      *    name="someProperty"
@@ -1142,7 +1239,11 @@ export namespace Components {
     /**
      * Display a text input field. This is just a standard HTML input field with minimal markup to fit the
      * visual styles of the other components. Note that events "bubble" from the input field to the container,
-     * so you can subscribe to the same DOM events (input, blur, etc) that a normal input would emmit.
+     * so you can subscribe to the same DOM events (input, blur, etc) that a normal input would emit.
+     * ```ts
+     * <verdocs-select-input label="Select:" label="Select" options={[...options]}
+     * @input ={() => {}} />
+     * ```
      */
     interface VerdocsSelectInput {
         /**
@@ -1163,12 +1264,18 @@ export namespace Components {
         "value": string;
     }
     /**
-     * Display a form to collect recipient information for a new Envelope. If used anonymously, the specified `templateId` must be public.
-     * Because most applications have custom workflow requirements to trigger after sending an Envelope, this component does not actually
-     * perform that operation. Parent applications should listen for the `onSend` event, and can pass the contents of `event.detail`
-     * directly to the `createEnvelope()` call in JS-SDK.
-     * Host applications should ensure the template is "sendable" before displaying this component. To be sendable, a template must have
-     * at least one document attached, at least one participant defined, and at least one field assigned to every "signer" participant.
+     * Display a form to send a template to one or more recipients in an envelope for signing. Note
+     * that because most applications have custom workflow requirements to trigger after sending an
+     * Envelope, this component does not actually perform that operation. Parent applications should
+     * listen for the `onSend` event, and can pass the contents of `event.detail` directly to the
+     * `createEnvelope()` call in JS-SDK.
+     * Host applications should ensure the template is "sendable" before displaying this component.
+     * To be sendable, a template must have at least one document attached, at least one participant
+     * defined, and at least one field assigned to every "signer" participant. This component will
+     * hide itself if the template is not sendable.
+     * ```ts
+     * <verdocs-send templateId={templateId} />
+     * ```
      */
     interface VerdocsSend {
         /**
@@ -1189,6 +1296,9 @@ export namespace Components {
      * Display a template preview experience. This will display the template's attached
      * documents with signing fields overlaid on each page. Fields will be color-coded
      * by recipient, and will be read-only (cannot be filled, moved, or altered).
+     * ```ts
+     * <verdocs-settings />
+     * ```
      */
     interface VerdocsSettings {
         /**
@@ -1277,6 +1387,9 @@ export namespace Components {
     }
     /**
      * Display a small loading spinner.
+     * ```ts
+     * <verdocs-spinner />
+     * ```
      */
     interface VerdocsSpinner {
         "mode": 'light' | 'dark';
@@ -1310,6 +1423,9 @@ export namespace Components {
     /**
      * Display a simple table of data. Columns and data cells may have custom renderers defined to
      * support creating interactive table layouts.
+     * ```ts
+     * <verdocs-table columns={[...columns]} data={[...data]} />
+     * ```
      */
     interface VerdocsTable {
         /**
@@ -1324,6 +1440,9 @@ export namespace Components {
     /**
      * Display a simple row of selectable tabs. This is a controlled element.
      * The parent must adjust selectedTab as selection events are fired.
+     * ```ts
+     * <verdocs-tabs tabs={[...tabs]} />
+     * ```
      */
     interface VerdocsTabs {
         /**
@@ -1627,7 +1746,10 @@ export namespace Components {
     /**
      * Display a text input field. This is just a standard HTML input field with minimal markup to fit the
      * visual styles of the other components. Note that events "bubble" from the input field to the container,
-     * so you can subscribe to the same DOM events (input, blur, etc) that a normal input would emmit.
+     * so you can subscribe to the same DOM events (input, blur, etc) that a normal input would emit.
+     * ```ts
+     * <verdocs-text-input type="text" label="Name" placeholder="Enter your name..." value="" />
+     * ```
      */
     interface VerdocsTextInput {
         /**
@@ -1672,7 +1794,10 @@ export namespace Components {
         "value": string;
     }
     /**
-     * Displays a label and a set of buttons, also allowing a default selection of a button
+     * Displays a label and a set of buttons, also allowing a default selection of a button.
+     * ```ts
+     * <verdocs-toggle options={[...options]} theme="light"></verdocs-toggle>
+     * ```
      */
     interface VerdocsToggle {
         /**
@@ -1686,6 +1811,9 @@ export namespace Components {
     }
     /**
      * Displays a single button that can be toggled on or off by clicking it.
+     * ```ts
+     * <verdocs-toggle-button icon={MessageIcon} size="normal" active={true} />
+     * ```
      */
     interface VerdocsToggleButton {
         "active": boolean;
@@ -1704,6 +1832,9 @@ export namespace Components {
     }
     /**
      * Displays a simple help icon. Upon hover or focus, a tooltip will be displayed with help text.
+     * ```ts
+     * <verdocs-toolbar-icon text="Sample tooltip text" icon={CalendarIcon} />
+     * ```
      */
     interface VerdocsToolbarIcon {
         /**
@@ -1836,10 +1967,6 @@ export interface VerdocsFileChooserCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLVerdocsFileChooserElement;
 }
-export interface VerdocsFloatingMenuCustomEvent<T> extends CustomEvent<T> {
-    detail: T;
-    target: HTMLVerdocsFloatingMenuElement;
-}
 export interface VerdocsInitialDialogCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLVerdocsInitialDialogElement;
@@ -2014,26 +2141,15 @@ declare global {
         "sdkError": SDKError;
     }
     /**
-     * Display an authentication dialog that allows the user to login or sign up. Callbacks are provided for events that
-     * occur during the process (especially successful completion). If the user is already authenticated with a valid
-     * session, this component will hide itself and fire the success callback immediately. It is up to the host application
-     * to render the next appropriate view for the application.
-     * To simplify some types of authentication flows, a visibility flag can force this component to never display. This
-     * allows you to susbcribe to notifications from the
+     * Display an authentication dialog that allows the user to login or sign up. If the user is already authenticated
+     * with a valid session, this component will hide itself and fire the success callback immediately. It is up to the
+     * host application to render the next appropriate view for the application.
+     * To simplify UI development, a visibility flag can force this component to never display. This
+     * allows you to susbcribe to notifications from client apps without calling the lower-level JS SDK.
      * This embed is responsive / mobile-friendly, but the calling application should provide at least a 300px wide
      * container to allow sufficient space for the required forms.
-     * As noted below, the primary event is `authenticated`. This will always be fired at least once, immediately after
-     * the widget is rendered and the user's status has been checked. It may be fired again as the user completes (or
-     * cancels) authentication steps.
-     * Authentication is required to demonstrate this Element. You may do this in Storybook by using the Auth
-     * embed. This Element will reuse the same session produced by logging in via that Embed.
-     * ```typescript
-     * interface IAuthStatus {
-     *   // If true, the user is authenticated with a valid session
-     *   authenticated: boolean;
-     *   // Details for the user's session
-     *   session: IActiveSession | null;
-     * }
+     * ```ts
+     * <verdocs-auth onAuthenticated={e => console.log('Authentication state:', e.detail)} />
      * ```
      */
     interface HTMLVerdocsAuthElement extends Components.VerdocsAuth, HTMLStencilElement {
@@ -2060,6 +2176,9 @@ declare global {
     }
     /**
      * Display a template building experience.
+     * ```ts
+     * <verdocs-build templateId={templateId} />
+     * ```
      */
     interface HTMLVerdocsBuildElement extends Components.VerdocsBuild, HTMLStencilElement {
         addEventListener<K extends keyof HTMLVerdocsBuildElementEventMap>(type: K, listener: (this: HTMLVerdocsBuildElement, ev: VerdocsBuildCustomEvent<HTMLVerdocsBuildElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -2075,12 +2194,33 @@ declare global {
         prototype: HTMLVerdocsBuildElement;
         new (): HTMLVerdocsBuildElement;
     };
+    /**
+     * A simple button, with consistent styling to other controls in the design system.
+     * ```ts
+     * <verdocs-button label="Click Me" size="normal" variant="standard" />
+     * ```
+     */
     interface HTMLVerdocsButtonElement extends Components.VerdocsButton, HTMLStencilElement {
     }
     var HTMLVerdocsButtonElement: {
         prototype: HTMLVerdocsButtonElement;
         new (): HTMLVerdocsButtonElement;
     };
+    /**
+     * Display an icon button that triggers a drop-down panel that can display
+     * arbitrary child content, such as metadata, forms, or other controls.
+     * ```ts
+     *   <verdocs-button-panel .icon=${icon}>
+     *     <h6>Field Settings</h6>
+     *     <form>
+     *     <p>
+     *       <label>Field Name</label>
+     *       <input type="text" placeholder="Field Name..." />
+     *     </p>
+     *     </form>
+     *   </verdocs-button-panel>
+     * ```
+     */
     interface HTMLVerdocsButtonPanelElement extends Components.VerdocsButtonPanel, HTMLStencilElement {
     }
     var HTMLVerdocsButtonPanelElement: {
@@ -2093,7 +2233,7 @@ declare global {
      * box for UI displays e.g. dialog boxes.
      * This control encapsulates a standard HTML checkbox. To subscribe to change events, connect an `onChange`
      * handler. Sample usage:
-     * ```html
+     * ```ts
      * <verdocs-checkbox
      *    value="on"
      *    name="thingEnabled"
@@ -2167,6 +2307,21 @@ declare global {
     interface HTMLVerdocsDropdownElementEventMap {
         "optionSelected": IMenuOption;
     }
+    /**
+     * 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. Separators may be created by supplying an entry with an empty label.
+     * ```ts
+     * <verdocs-dropdown
+     *   options={[
+     *     {label: 'Option 1', disabled: true},
+     *     {label: 'Option 2', id: '2'}
+     *     {label: ''}
+     *     {label: 'Option 3', id: '2'}
+     *    ]}
+     *   label="OK" onClick={() => (console.log('OK clicked'))}
+     * />
+     * ```
+     */
     interface HTMLVerdocsDropdownElement extends Components.VerdocsDropdown, HTMLStencilElement {
         addEventListener<K extends keyof HTMLVerdocsDropdownElementEventMap>(type: K, listener: (this: HTMLVerdocsDropdownElement, ev: VerdocsDropdownCustomEvent<HTMLVerdocsDropdownElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
         addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
@@ -2301,7 +2456,7 @@ declare global {
     interface HTMLVerdocsFieldAttachmentElementEventMap {
         "settingsChanged": {fieldName: string; settings: ITemplateFieldSetting; field: ITemplateField};
         "deleted": {fieldName: string};
-        "attached": {data: string; lastModified: number; name: string; size: number; type: string};
+        "attached": ISelectedFile;
     }
     /**
      * Displays an attachment field.
@@ -2369,8 +2524,7 @@ declare global {
         "deleted": {fieldName: string};
     }
     /**
-     * Displays a signature field. Various field types are supported, including traditional Signature and Initials types as well as
-     * input types like text and checkbox.
+     * Displays a dropdown field that allows the user to choose one of a list of options.
      */
     interface HTMLVerdocsFieldDropdownElement extends Components.VerdocsFieldDropdown, HTMLStencilElement {
         addEventListener<K extends keyof HTMLVerdocsFieldDropdownElementEventMap>(type: K, listener: (this: HTMLVerdocsFieldDropdownElement, ev: VerdocsFieldDropdownCustomEvent<HTMLVerdocsFieldDropdownElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -2395,8 +2549,12 @@ declare global {
         "deleted": {fieldName: string};
     }
     /**
-     * Displays an initial field. If an initial already exists, it will be displayed and the field will be disabled. Otherwise, a placeholder
-     * button will be shown. Clicking the button will show a dialog to adopt an initial.
+     * Displays an initial field. If an initial already exists, it will be displayed and the field
+     * will be disabled. Otherwise, a placeholder button will be shown. Clicking the button will
+     * show a dialog to adopt an initial.
+     * NOTE: When initial fields are completed they will be filled with an initial "stamp".
+     * This requires operation against a live, valid envelope. If you are testing this component
+     * in Storybook, it will not be visible here.
      */
     interface HTMLVerdocsFieldInitialElement extends Components.VerdocsFieldInitial, HTMLStencilElement {
         addEventListener<K extends keyof HTMLVerdocsFieldInitialElementEventMap>(type: K, listener: (this: HTMLVerdocsFieldInitialElement, ev: VerdocsFieldInitialCustomEvent<HTMLVerdocsFieldInitialElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -2464,8 +2622,12 @@ declare global {
         "deleted": {fieldName: string};
     }
     /**
-     * Displays a signature field. If a signature already exists, it will be displayed and the field will be disabled. Otherwise, a placeholder
-     * button will be shown. Clicking the button will show a dialog to adopt a signature.
+     * Displays a signature field. If a signature already exists, it will be displayed and the field
+     * will be disabled. Otherwise, a placeholder button will be shown. Clicking the button will
+     * show a dialog to adopt a signature.
+     * NOTE: When signature fields are completed they will be filled with a signature "stamp".
+     * This requires operation against a live, valid envelope. If you are testing this component
+     * in Storybook, it will not be visible here.
      */
     interface HTMLVerdocsFieldSignatureElement extends Components.VerdocsFieldSignature, HTMLStencilElement {
         addEventListener<K extends keyof HTMLVerdocsFieldSignatureElementEventMap>(type: K, listener: (this: HTMLVerdocsFieldSignatureElement, ev: VerdocsFieldSignatureCustomEvent<HTMLVerdocsFieldSignatureElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -2486,7 +2648,8 @@ declare global {
         "deleted": {fieldName: string};
     }
     /**
-     * Display a multi-line text input field.
+     * Display a multi-line text input field. Reminder: the "position" of the field is specified
+     * as the BOTTOM-LEFT corner.
      */
     interface HTMLVerdocsFieldTextareaElement extends Components.VerdocsFieldTextarea, HTMLStencilElement {
         addEventListener<K extends keyof HTMLVerdocsFieldTextareaElementEventMap>(type: K, listener: (this: HTMLVerdocsFieldTextareaElement, ev: VerdocsFieldTextareaCustomEvent<HTMLVerdocsFieldTextareaElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -2507,7 +2670,7 @@ declare global {
         "deleted": {fieldName: string};
     }
     /**
-     * Display a text input field.
+     * Display a simple 1-line text input field.
      */
     interface HTMLVerdocsFieldTextboxElement extends Components.VerdocsFieldTextbox, HTMLStencilElement {
         addEventListener<K extends keyof HTMLVerdocsFieldTextboxElementEventMap>(type: K, listener: (this: HTMLVerdocsFieldTextboxElement, ev: VerdocsFieldTextboxCustomEvent<HTMLVerdocsFieldTextboxElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -2528,7 +2691,8 @@ declare global {
         "deleted": {fieldName: string};
     }
     /**
-     * Display a timestamp field.
+     * Display a timestamp. Timestamps are not editable by signers. Instead, they are automatically
+     * filled when the signer submits the document.
      */
     interface HTMLVerdocsFieldTimestampElement extends Components.VerdocsFieldTimestamp, HTMLStencilElement {
         addEventListener<K extends keyof HTMLVerdocsFieldTimestampElementEventMap>(type: K, listener: (this: HTMLVerdocsFieldTimestampElement, ev: VerdocsFieldTimestampCustomEvent<HTMLVerdocsFieldTimestampElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -2547,6 +2711,13 @@ declare global {
     interface HTMLVerdocsFileChooserElementEventMap {
         "fileSelected": {file: File | null};
     }
+    /**
+     * Displays a file picker to upload an attachment. This component is just the picker - the host application or component should
+     * provide the actual upload functionality.
+     * ```ts
+     * <verdocs-file-chooser onFileSelected={(e) => console.log('File Selected', e.detail)} />
+     * ```
+     */
     interface HTMLVerdocsFileChooserElement extends Components.VerdocsFileChooser, HTMLStencilElement {
         addEventListener<K extends keyof HTMLVerdocsFileChooserElementEventMap>(type: K, listener: (this: HTMLVerdocsFileChooserElement, ev: VerdocsFileChooserCustomEvent<HTMLVerdocsFileChooserElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
         addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
@@ -2561,23 +2732,12 @@ declare global {
         prototype: HTMLVerdocsFileChooserElement;
         new (): HTMLVerdocsFileChooserElement;
     };
-    interface HTMLVerdocsFloatingMenuElementEventMap {
-        "optionSelected": IOption;
-    }
-    interface HTMLVerdocsFloatingMenuElement extends Components.VerdocsFloatingMenu, HTMLStencilElement {
-        addEventListener<K extends keyof HTMLVerdocsFloatingMenuElementEventMap>(type: K, listener: (this: HTMLVerdocsFloatingMenuElement, ev: VerdocsFloatingMenuCustomEvent<HTMLVerdocsFloatingMenuElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
-        removeEventListener<K extends keyof HTMLVerdocsFloatingMenuElementEventMap>(type: K, listener: (this: HTMLVerdocsFloatingMenuElement, ev: VerdocsFloatingMenuCustomEvent<HTMLVerdocsFloatingMenuElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
-    }
-    var HTMLVerdocsFloatingMenuElement: {
-        prototype: HTMLVerdocsFloatingMenuElement;
-        new (): HTMLVerdocsFloatingMenuElement;
-    };
+    /**
+     * Displays a simple help icon. Upon hover or focus, a tooltip will be displayed with help text.
+     * ```ts
+     * <verdocs-help-icon text="Sample help text" />
+     * ```
+     */
     interface HTMLVerdocsHelpIconElement extends Components.VerdocsHelpIcon, HTMLStencilElement {
     }
     var HTMLVerdocsHelpIconElement: {
@@ -2611,9 +2771,7 @@ declare global {
         "next": string;
     }
     /**
-     * Display a text input field. This adds a partially-transparent overlay and screen-centered dialog
-     * box with a message and optional header/title. An OK button is shown that will dismiss the message.
-     * It can also be dismissed by clicking the background overlay.
+     * Prompt the user to confirm their identity with a series of questions.
      */
     interface HTMLVerdocsKbaDialogElement extends Components.VerdocsKbaDialog, HTMLStencilElement {
         addEventListener<K extends keyof HTMLVerdocsKbaDialogElementEventMap>(type: K, listener: (this: HTMLVerdocsKbaDialogElement, ev: VerdocsKbaDialogCustomEvent<HTMLVerdocsKbaDialogElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -2629,6 +2787,12 @@ declare global {
         prototype: HTMLVerdocsKbaDialogElement;
         new (): HTMLVerdocsKbaDialogElement;
     };
+    /**
+     * Animated loader placeholder. There are currently no configuration options for this control.
+     * ```ts
+     * <verdocs-loader />
+     * ```
+     */
     interface HTMLVerdocsLoaderElement extends Components.VerdocsLoader, HTMLStencilElement {
     }
     var HTMLVerdocsLoaderElement: {
@@ -2658,6 +2822,12 @@ declare global {
         prototype: HTMLVerdocsOkDialogElement;
         new (): HTMLVerdocsOkDialogElement;
     };
+    /**
+     * Display a small summary card describing an organization.
+     * ```ts
+     * <verdocs-organization-card organization={organization} />
+     * ```
+     */
     interface HTMLVerdocsOrganizationCardElement extends Components.VerdocsOrganizationCard, HTMLStencilElement {
     }
     var HTMLVerdocsOrganizationCardElement: {
@@ -2667,6 +2837,17 @@ declare global {
     interface HTMLVerdocsPaginationElementEventMap {
         "selectPage": {selectedPage: number};
     }
+    /**
+     * Display a simple pagination control with individual buttons to move through the data set.
+     * ```ts
+     * <verdocs-pagination
+     *   selectedPage={1}
+     *   itemCount={50}
+     *   perPage={10}
+     *   onSelectPage={(e) => {setSelectedpage(e.detail.selectedPage)}}
+     * />
+     * ```
+     */
     interface HTMLVerdocsPaginationElement extends Components.VerdocsPagination, HTMLStencilElement {
         addEventListener<K extends keyof HTMLVerdocsPaginationElementEventMap>(type: K, listener: (this: HTMLVerdocsPaginationElement, ev: VerdocsPaginationCustomEvent<HTMLVerdocsPaginationElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
         addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
@@ -2684,6 +2865,24 @@ declare global {
     interface HTMLVerdocsPortalElementEventMap {
         "clickAway": void;
     }
+    /**
+     * Display a child component in a "portal", popping it out of the main DOM tree
+     * to allow it to escape the bounds set by its parent.
+     * @credit https://github.com/tomas-teston/stencil-portal for the basic
+     * technique. This has been altered in a few ways to make it more friendly
+     * to cases where there may be multiple portals on the page and provide more
+     * alignment options for the child to be displayed.
+     * ```ts
+     * <div style="padding: 40px">
+     * <div id="sample-tooltip" style="border: 1px solid green; padding: 3px 10px;">
+     * Tooltip Anchor
+     * <verdocs-portal anchor="sample-tooltip" .align=${align} .voffset=${voffset}>
+     * <div style="border: 1px solid red; padding: 3px 10px;">Tooltip</div>
+     * </verdocs-portal>
+     * </div>
+     * </div>
+     * ```
+     */
     interface HTMLVerdocsPortalElement extends Components.VerdocsPortal, HTMLStencilElement {
         addEventListener<K extends keyof HTMLVerdocsPortalElementEventMap>(type: K, listener: (this: HTMLVerdocsPortalElement, ev: VerdocsPortalCustomEvent<HTMLVerdocsPortalElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
         addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
@@ -2705,6 +2904,9 @@ declare global {
      * Display a template preview experience. This will display the template's attached
      * documents with signing fields overlaid on each page. Fields will be color-coded
      * by recipient, and will be read-only (cannot be filled, moved, or altered).
+     * ```ts
+     * <verdocs-preview templateId={templateId} />
+     * ```
      */
     interface HTMLVerdocsPreviewElement extends Components.VerdocsPreview, HTMLStencilElement {
         addEventListener<K extends keyof HTMLVerdocsPreviewElementEventMap>(type: K, listener: (this: HTMLVerdocsPreviewElement, ev: VerdocsPreviewCustomEvent<HTMLVerdocsPreviewElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -2720,6 +2922,12 @@ declare global {
         prototype: HTMLVerdocsPreviewElement;
         new (): HTMLVerdocsPreviewElement;
     };
+    /**
+     * Display a simple progress bar in a style consistent with the design system.
+     * ```ts
+     * <verdocs-progress-bar label="Uploading..." showPercent={true} percent={54} />
+     * ```
+     */
     interface HTMLVerdocsProgressBarElement extends Components.VerdocsProgressBar, HTMLStencilElement {
     }
     var HTMLVerdocsProgressBarElement: {
@@ -2731,6 +2939,9 @@ declare global {
     }
     /**
      * Display a drop-down menu of quick filter options.
+     * ```ts
+     * <verdocs-quick-filter options={[...options]} value={1} label="Filter" placeholder="All" />
+     * ```
      */
     interface HTMLVerdocsQuickFilterElement extends Components.VerdocsQuickFilter, HTMLStencilElement {
         addEventListener<K extends keyof HTMLVerdocsQuickFilterElementEventMap>(type: K, listener: (this: HTMLVerdocsQuickFilterElement, ev: VerdocsQuickFilterCustomEvent<HTMLVerdocsQuickFilterElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -2775,7 +2986,7 @@ declare global {
      * simple radio button for UI displays e.g. dialog boxes.
      * This control encapsulates a standard HTML radio button. To subscribe to change events, connect an `onChange`
      * handler. Sample usage:
-     * ```html
+     * ```ts
      * <verdocs-radio-button
      *    value="val1"
      *    name="someProperty"
@@ -2830,7 +3041,11 @@ declare global {
     /**
      * Display a text input field. This is just a standard HTML input field with minimal markup to fit the
      * visual styles of the other components. Note that events "bubble" from the input field to the container,
-     * so you can subscribe to the same DOM events (input, blur, etc) that a normal input would emmit.
+     * so you can subscribe to the same DOM events (input, blur, etc) that a normal input would emit.
+     * ```ts
+     * <verdocs-select-input label="Select:" label="Select" options={[...options]}
+     * @input ={() => {}} />
+     * ```
      */
     interface HTMLVerdocsSelectInputElement extends Components.VerdocsSelectInput, HTMLStencilElement {
     }
@@ -2846,12 +3061,18 @@ declare global {
         "searchContacts": IContactSearchEvent1;
     }
     /**
-     * Display a form to collect recipient information for a new Envelope. If used anonymously, the specified `templateId` must be public.
-     * Because most applications have custom workflow requirements to trigger after sending an Envelope, this component does not actually
-     * perform that operation. Parent applications should listen for the `onSend` event, and can pass the contents of `event.detail`
-     * directly to the `createEnvelope()` call in JS-SDK.
-     * Host applications should ensure the template is "sendable" before displaying this component. To be sendable, a template must have
-     * at least one document attached, at least one participant defined, and at least one field assigned to every "signer" participant.
+     * Display a form to send a template to one or more recipients in an envelope for signing. Note
+     * that because most applications have custom workflow requirements to trigger after sending an
+     * Envelope, this component does not actually perform that operation. Parent applications should
+     * listen for the `onSend` event, and can pass the contents of `event.detail` directly to the
+     * `createEnvelope()` call in JS-SDK.
+     * Host applications should ensure the template is "sendable" before displaying this component.
+     * To be sendable, a template must have at least one document attached, at least one participant
+     * defined, and at least one field assigned to every "signer" participant. This component will
+     * hide itself if the template is not sendable.
+     * ```ts
+     * <verdocs-send templateId={templateId} />
+     * ```
      */
     interface HTMLVerdocsSendElement extends Components.VerdocsSend, HTMLStencilElement {
         addEventListener<K extends keyof HTMLVerdocsSendElementEventMap>(type: K, listener: (this: HTMLVerdocsSendElement, ev: VerdocsSendCustomEvent<HTMLVerdocsSendElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -2874,6 +3095,9 @@ declare global {
      * Display a template preview experience. This will display the template's attached
      * documents with signing fields overlaid on each page. Fields will be color-coded
      * by recipient, and will be read-only (cannot be filled, moved, or altered).
+     * ```ts
+     * <verdocs-settings />
+     * ```
      */
     interface HTMLVerdocsSettingsElement extends Components.VerdocsSettings, HTMLStencilElement {
         addEventListener<K extends keyof HTMLVerdocsSettingsElementEventMap>(type: K, listener: (this: HTMLVerdocsSettingsElement, ev: VerdocsSettingsCustomEvent<HTMLVerdocsSettingsElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -3035,6 +3259,9 @@ declare global {
     };
     /**
      * Display a small loading spinner.
+     * ```ts
+     * <verdocs-spinner />
+     * ```
      */
     interface HTMLVerdocsSpinnerElement extends Components.VerdocsSpinner, HTMLStencilElement {
     }
@@ -3062,6 +3289,9 @@ declare global {
     /**
      * Display a simple table of data. Columns and data cells may have custom renderers defined to
      * support creating interactive table layouts.
+     * ```ts
+     * <verdocs-table columns={[...columns]} data={[...data]} />
+     * ```
      */
     interface HTMLVerdocsTableElement extends Components.VerdocsTable, HTMLStencilElement {
         addEventListener<K extends keyof HTMLVerdocsTableElementEventMap>(type: K, listener: (this: HTMLVerdocsTableElement, ev: VerdocsTableCustomEvent<HTMLVerdocsTableElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -3083,6 +3313,9 @@ declare global {
     /**
      * Display a simple row of selectable tabs. This is a controlled element.
      * The parent must adjust selectedTab as selection events are fired.
+     * ```ts
+     * <verdocs-tabs tabs={[...tabs]} />
+     * ```
      */
     interface HTMLVerdocsTabsElement extends Components.VerdocsTabs, HTMLStencilElement {
         addEventListener<K extends keyof HTMLVerdocsTabsElementEventMap>(type: K, listener: (this: HTMLVerdocsTabsElement, ev: VerdocsTabsCustomEvent<HTMLVerdocsTabsElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -3438,7 +3671,10 @@ declare global {
     /**
      * Display a text input field. This is just a standard HTML input field with minimal markup to fit the
      * visual styles of the other components. Note that events "bubble" from the input field to the container,
-     * so you can subscribe to the same DOM events (input, blur, etc) that a normal input would emmit.
+     * so you can subscribe to the same DOM events (input, blur, etc) that a normal input would emit.
+     * ```ts
+     * <verdocs-text-input type="text" label="Name" placeholder="Enter your name..." value="" />
+     * ```
      */
     interface HTMLVerdocsTextInputElement extends Components.VerdocsTextInput, HTMLStencilElement {
     }
@@ -3447,7 +3683,10 @@ declare global {
         new (): HTMLVerdocsTextInputElement;
     };
     /**
-     * Displays a label and a set of buttons, also allowing a default selection of a button
+     * Displays a label and a set of buttons, also allowing a default selection of a button.
+     * ```ts
+     * <verdocs-toggle options={[...options]} theme="light"></verdocs-toggle>
+     * ```
      */
     interface HTMLVerdocsToggleElement extends Components.VerdocsToggle, HTMLStencilElement {
     }
@@ -3460,6 +3699,9 @@ declare global {
     }
     /**
      * Displays a single button that can be toggled on or off by clicking it.
+     * ```ts
+     * <verdocs-toggle-button icon={MessageIcon} size="normal" active={true} />
+     * ```
      */
     interface HTMLVerdocsToggleButtonElement extends Components.VerdocsToggleButton, HTMLStencilElement {
         addEventListener<K extends keyof HTMLVerdocsToggleButtonElementEventMap>(type: K, listener: (this: HTMLVerdocsToggleButtonElement, ev: VerdocsToggleButtonCustomEvent<HTMLVerdocsToggleButtonElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -3477,6 +3719,9 @@ declare global {
     };
     /**
      * Displays a simple help icon. Upon hover or focus, a tooltip will be displayed with help text.
+     * ```ts
+     * <verdocs-toolbar-icon text="Sample tooltip text" icon={CalendarIcon} />
+     * ```
      */
     interface HTMLVerdocsToolbarIconElement extends Components.VerdocsToolbarIcon, HTMLStencilElement {
     }
@@ -3559,7 +3804,6 @@ declare global {
         "verdocs-field-textbox": HTMLVerdocsFieldTextboxElement;
         "verdocs-field-timestamp": HTMLVerdocsFieldTimestampElement;
         "verdocs-file-chooser": HTMLVerdocsFileChooserElement;
-        "verdocs-floating-menu": HTMLVerdocsFloatingMenuElement;
         "verdocs-help-icon": HTMLVerdocsHelpIconElement;
         "verdocs-initial-dialog": HTMLVerdocsInitialDialogElement;
         "verdocs-kba-dialog": HTMLVerdocsKbaDialogElement;
@@ -3650,26 +3894,15 @@ declare namespace LocalJSX {
         "view"?: 'completed' | 'action' | 'waiting';
     }
     /**
-     * Display an authentication dialog that allows the user to login or sign up. Callbacks are provided for events that
-     * occur during the process (especially successful completion). If the user is already authenticated with a valid
-     * session, this component will hide itself and fire the success callback immediately. It is up to the host application
-     * to render the next appropriate view for the application.
-     * To simplify some types of authentication flows, a visibility flag can force this component to never display. This
-     * allows you to susbcribe to notifications from the
+     * Display an authentication dialog that allows the user to login or sign up. If the user is already authenticated
+     * with a valid session, this component will hide itself and fire the success callback immediately. It is up to the
+     * host application to render the next appropriate view for the application.
+     * To simplify UI development, a visibility flag can force this component to never display. This
+     * allows you to susbcribe to notifications from client apps without calling the lower-level JS SDK.
      * This embed is responsive / mobile-friendly, but the calling application should provide at least a 300px wide
      * container to allow sufficient space for the required forms.
-     * As noted below, the primary event is `authenticated`. This will always be fired at least once, immediately after
-     * the widget is rendered and the user's status has been checked. It may be fired again as the user completes (or
-     * cancels) authentication steps.
-     * Authentication is required to demonstrate this Element. You may do this in Storybook by using the Auth
-     * embed. This Element will reuse the same session produced by logging in via that Embed.
-     * ```typescript
-     * interface IAuthStatus {
-     *   // If true, the user is authenticated with a valid session
-     *   authenticated: boolean;
-     *   // Details for the user's session
-     *   session: IActiveSession | null;
-     * }
+     * ```ts
+     * <verdocs-auth onAuthenticated={e => console.log('Authentication state:', e.detail)} />
      * ```
      */
     interface VerdocsAuth {
@@ -3682,7 +3915,7 @@ declare namespace LocalJSX {
          */
         "logo"?: string;
         /**
-          * Event fired when session authentication process has completed. Check the event contents for completion status.
+          * Event fired when session authentication process has completed. Check the event contents for completion status. This event will always be called at least once, when the component is first rendered.
          */
         "onAuthenticated"?: (event: VerdocsAuthCustomEvent<IAuthStatus>) => void;
         /**
@@ -3696,6 +3929,9 @@ declare namespace LocalJSX {
     }
     /**
      * Display a template building experience.
+     * ```ts
+     * <verdocs-build templateId={templateId} />
+     * ```
      */
     interface VerdocsBuild {
         /**
@@ -3735,6 +3971,12 @@ declare namespace LocalJSX {
          */
         "templateId"?: string | null;
     }
+    /**
+     * A simple button, with consistent styling to other controls in the design system.
+     * ```ts
+     * <verdocs-button label="Click Me" size="normal" variant="standard" />
+     * ```
+     */
     interface VerdocsButton {
         /**
           * Whether the button should be disabled.
@@ -3765,6 +4007,21 @@ declare namespace LocalJSX {
          */
         "variant"?: 'standard' | 'text' | 'outline';
     }
+    /**
+     * Display an icon button that triggers a drop-down panel that can display
+     * arbitrary child content, such as metadata, forms, or other controls.
+     * ```ts
+     *   <verdocs-button-panel .icon=${icon}>
+     *     <h6>Field Settings</h6>
+     *     <form>
+     *     <p>
+     *       <label>Field Name</label>
+     *       <input type="text" placeholder="Field Name..." />
+     *     </p>
+     *     </form>
+     *   </verdocs-button-panel>
+     * ```
+     */
     interface VerdocsButtonPanel {
         /**
           * SVG icon to display
@@ -3777,7 +4034,7 @@ declare namespace LocalJSX {
      * box for UI displays e.g. dialog boxes.
      * This control encapsulates a standard HTML checkbox. To subscribe to change events, connect an `onChange`
      * handler. Sample usage:
-     * ```html
+     * ```ts
      * <verdocs-checkbox
      *    value="on"
      *    name="thingEnabled"
@@ -3864,6 +4121,21 @@ declare namespace LocalJSX {
          */
         "onExit"?: (event: VerdocsDialogCustomEvent<any>) => void;
     }
+    /**
+     * 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. Separators may be created by supplying an entry with an empty label.
+     * ```ts
+     * <verdocs-dropdown
+     *   options={[
+     *     {label: 'Option 1', disabled: true},
+     *     {label: 'Option 2', id: '2'}
+     *     {label: ''}
+     *     {label: 'Option 3', id: '2'}
+     *    ]}
+     *   label="OK" onClick={() => (console.log('OK clicked'))}
+     * />
+     * ```
+     */
     interface VerdocsDropdown {
         /**
           * Event fired when a menu option is clicked. Web Component events need to be "composed" to cross the Shadow DOM and be received by parent frameworks.
@@ -4092,6 +4364,10 @@ declare namespace LocalJSX {
           * If set, a settings icon will be displayed on hover. The settings shown allow the field's recipient and other settings to be changed, so it should typically only be enabled in the Builder.
          */
         "editable"?: boolean;
+        /**
+          * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used. This component self-manages its resize (width) behavior when in edit-template mode, and uses this endpoint to save changes.
+         */
+        "endpoint"?: VerdocsEndpoint;
         /**
           * The name of the field to display.
          */
@@ -4103,7 +4379,7 @@ declare namespace LocalJSX {
         /**
           * Event fired when the field is deleted.
          */
-        "onAttached"?: (event: VerdocsFieldAttachmentCustomEvent<{data: string; lastModified: number; name: string; size: number; type: string}>) => void;
+        "onAttached"?: (event: VerdocsFieldAttachmentCustomEvent<ISelectedFile>) => void;
         /**
           * Event fired when the field is deleted.
          */
@@ -4240,8 +4516,7 @@ declare namespace LocalJSX {
         "yscale"?: number;
     }
     /**
-     * Displays a signature field. Various field types are supported, including traditional Signature and Initials types as well as
-     * input types like text and checkbox.
+     * Displays a dropdown field that allows the user to choose one of a list of options.
      */
     interface VerdocsFieldDropdown {
         /**
@@ -4294,8 +4569,12 @@ declare namespace LocalJSX {
         "yscale"?: number;
     }
     /**
-     * Displays an initial field. If an initial already exists, it will be displayed and the field will be disabled. Otherwise, a placeholder
-     * button will be shown. Clicking the button will show a dialog to adopt an initial.
+     * Displays an initial field. If an initial already exists, it will be displayed and the field
+     * will be disabled. Otherwise, a placeholder button will be shown. Clicking the button will
+     * show a dialog to adopt an initial.
+     * NOTE: When initial fields are completed they will be filled with an initial "stamp".
+     * This requires operation against a live, valid envelope. If you are testing this component
+     * in Storybook, it will not be visible here.
      */
     interface VerdocsFieldInitial {
         /**
@@ -4471,8 +4750,12 @@ declare namespace LocalJSX {
         "yscale"?: number;
     }
     /**
-     * Displays a signature field. If a signature already exists, it will be displayed and the field will be disabled. Otherwise, a placeholder
-     * button will be shown. Clicking the button will show a dialog to adopt a signature.
+     * Displays a signature field. If a signature already exists, it will be displayed and the field
+     * will be disabled. Otherwise, a placeholder button will be shown. Clicking the button will
+     * show a dialog to adopt a signature.
+     * NOTE: When signature fields are completed they will be filled with a signature "stamp".
+     * This requires operation against a live, valid envelope. If you are testing this component
+     * in Storybook, it will not be visible here.
      */
     interface VerdocsFieldSignature {
         /**
@@ -4533,7 +4816,8 @@ declare namespace LocalJSX {
         "yscale"?: number;
     }
     /**
-     * Display a multi-line text input field.
+     * Display a multi-line text input field. Reminder: the "position" of the field is specified
+     * as the BOTTOM-LEFT corner.
      */
     interface VerdocsFieldTextarea {
         /**
@@ -4586,7 +4870,7 @@ declare namespace LocalJSX {
         "yscale"?: number;
     }
     /**
-     * Display a text input field.
+     * Display a simple 1-line text input field.
      */
     interface VerdocsFieldTextbox {
         /**
@@ -4639,7 +4923,8 @@ declare namespace LocalJSX {
         "yscale"?: number;
     }
     /**
-     * Display a timestamp field.
+     * Display a timestamp. Timestamps are not editable by signers. Instead, they are automatically
+     * filled when the signer submits the document.
      */
     interface VerdocsFieldTimestamp {
         /**
@@ -4687,6 +4972,13 @@ declare namespace LocalJSX {
          */
         "yscale"?: number;
     }
+    /**
+     * Displays a file picker to upload an attachment. This component is just the picker - the host application or component should
+     * provide the actual upload functionality.
+     * ```ts
+     * <verdocs-file-chooser onFileSelected={(e) => console.log('File Selected', e.detail)} />
+     * ```
+     */
     interface VerdocsFileChooser {
         /**
           * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used.
@@ -4697,16 +4989,12 @@ declare namespace LocalJSX {
          */
         "onFileSelected"?: (event: VerdocsFileChooserCustomEvent<{file: File | null}>) => void;
     }
-    interface VerdocsFloatingMenu {
-        /**
-          * Event fired when a menu option is clicked. Web Component events need to be "composed" to cross the Shadow DOM and be received by parent frameworks.
-         */
-        "onOptionSelected"?: (event: VerdocsFloatingMenuCustomEvent<IOption>) => void;
-        /**
-          * The role that this contact will be assigned to.
-         */
-        "options"?: IOption[];
-    }
+    /**
+     * Displays a simple help icon. Upon hover or focus, a tooltip will be displayed with help text.
+     * ```ts
+     * <verdocs-help-icon text="Sample help text" />
+     * ```
+     */
     interface VerdocsHelpIcon {
         /**
           * Optional icon to display. If not supplied, a standard help icon will be shown.
@@ -4736,9 +5024,7 @@ declare namespace LocalJSX {
         "onNext"?: (event: VerdocsInitialDialogCustomEvent<string>) => void;
     }
     /**
-     * Display a text input field. This adds a partially-transparent overlay and screen-centered dialog
-     * box with a message and optional header/title. An OK button is shown that will dismiss the message.
-     * It can also be dismissed by clicking the background overlay.
+     * Prompt the user to confirm their identity with a series of questions.
      */
     interface VerdocsKbaDialog {
         /**
@@ -4782,6 +5068,12 @@ declare namespace LocalJSX {
          */
         "steps"?: number;
     }
+    /**
+     * Animated loader placeholder. There are currently no configuration options for this control.
+     * ```ts
+     * <verdocs-loader />
+     * ```
+     */
     interface VerdocsLoader {
     }
     /**
@@ -4815,12 +5107,29 @@ declare namespace LocalJSX {
          */
         "showCancel"?: boolean;
     }
+    /**
+     * Display a small summary card describing an organization.
+     * ```ts
+     * <verdocs-organization-card organization={organization} />
+     * ```
+     */
     interface VerdocsOrganizationCard {
         /**
           * The organization to display
          */
         "organization"?: IOrganization;
     }
+    /**
+     * Display a simple pagination control with individual buttons to move through the data set.
+     * ```ts
+     * <verdocs-pagination
+     *   selectedPage={1}
+     *   itemCount={50}
+     *   perPage={10}
+     *   onSelectPage={(e) => {setSelectedpage(e.detail.selectedPage)}}
+     * />
+     * ```
+     */
     interface VerdocsPagination {
         /**
           * The total number of items.
@@ -4839,6 +5148,24 @@ declare namespace LocalJSX {
          */
         "selectedPage"?: number;
     }
+    /**
+     * Display a child component in a "portal", popping it out of the main DOM tree
+     * to allow it to escape the bounds set by its parent.
+     * @credit https://github.com/tomas-teston/stencil-portal for the basic
+     * technique. This has been altered in a few ways to make it more friendly
+     * to cases where there may be multiple portals on the page and provide more
+     * alignment options for the child to be displayed.
+     * ```ts
+     * <div style="padding: 40px">
+     * <div id="sample-tooltip" style="border: 1px solid green; padding: 3px 10px;">
+     * Tooltip Anchor
+     * <verdocs-portal anchor="sample-tooltip" .align=${align} .voffset=${voffset}>
+     * <div style="border: 1px solid red; padding: 3px 10px;">Tooltip</div>
+     * </verdocs-portal>
+     * </div>
+     * </div>
+     * ```
+     */
     interface VerdocsPortal {
         /**
           * Horizontal alignment.
@@ -4858,6 +5185,9 @@ declare namespace LocalJSX {
      * Display a template preview experience. This will display the template's attached
      * documents with signing fields overlaid on each page. Fields will be color-coded
      * by recipient, and will be read-only (cannot be filled, moved, or altered).
+     * ```ts
+     * <verdocs-preview templateId={templateId} />
+     * ```
      */
     interface VerdocsPreview {
         /**
@@ -4873,6 +5203,12 @@ declare namespace LocalJSX {
          */
         "templateId"?: string | null;
     }
+    /**
+     * Display a simple progress bar in a style consistent with the design system.
+     * ```ts
+     * <verdocs-progress-bar label="Uploading..." showPercent={true} percent={54} />
+     * ```
+     */
     interface VerdocsProgressBar {
         /**
           * Optional label to display above the bar
@@ -4889,6 +5225,9 @@ declare namespace LocalJSX {
     }
     /**
      * Display a drop-down menu of quick filter options.
+     * ```ts
+     * <verdocs-quick-filter options={[...options]} value={1} label="Filter" placeholder="All" />
+     * ```
      */
     interface VerdocsQuickFilter {
         "label"?: string;
@@ -4928,7 +5267,7 @@ declare namespace LocalJSX {
      * simple radio button for UI displays e.g. dialog boxes.
      * This control encapsulates a standard HTML radio button. To subscribe to change events, connect an `onChange`
      * handler. Sample usage:
-     * ```html
+     * ```ts
      * <verdocs-radio-button
      *    value="val1"
      *    name="someProperty"
@@ -5006,7 +5345,11 @@ declare namespace LocalJSX {
     /**
      * Display a text input field. This is just a standard HTML input field with minimal markup to fit the
      * visual styles of the other components. Note that events "bubble" from the input field to the container,
-     * so you can subscribe to the same DOM events (input, blur, etc) that a normal input would emmit.
+     * so you can subscribe to the same DOM events (input, blur, etc) that a normal input would emit.
+     * ```ts
+     * <verdocs-select-input label="Select:" label="Select" options={[...options]}
+     * @input ={() => {}} />
+     * ```
      */
     interface VerdocsSelectInput {
         /**
@@ -5027,12 +5370,18 @@ declare namespace LocalJSX {
         "value"?: string;
     }
     /**
-     * Display a form to collect recipient information for a new Envelope. If used anonymously, the specified `templateId` must be public.
-     * Because most applications have custom workflow requirements to trigger after sending an Envelope, this component does not actually
-     * perform that operation. Parent applications should listen for the `onSend` event, and can pass the contents of `event.detail`
-     * directly to the `createEnvelope()` call in JS-SDK.
-     * Host applications should ensure the template is "sendable" before displaying this component. To be sendable, a template must have
-     * at least one document attached, at least one participant defined, and at least one field assigned to every "signer" participant.
+     * Display a form to send a template to one or more recipients in an envelope for signing. Note
+     * that because most applications have custom workflow requirements to trigger after sending an
+     * Envelope, this component does not actually perform that operation. Parent applications should
+     * listen for the `onSend` event, and can pass the contents of `event.detail` directly to the
+     * `createEnvelope()` call in JS-SDK.
+     * Host applications should ensure the template is "sendable" before displaying this component.
+     * To be sendable, a template must have at least one document attached, at least one participant
+     * defined, and at least one field assigned to every "signer" participant. This component will
+     * hide itself if the template is not sendable.
+     * ```ts
+     * <verdocs-send templateId={templateId} />
+     * ```
      */
     interface VerdocsSend {
         /**
@@ -5072,6 +5421,9 @@ declare namespace LocalJSX {
      * Display a template preview experience. This will display the template's attached
      * documents with signing fields overlaid on each page. Fields will be color-coded
      * by recipient, and will be read-only (cannot be filled, moved, or altered).
+     * ```ts
+     * <verdocs-settings />
+     * ```
      */
     interface VerdocsSettings {
         /**
@@ -5232,6 +5584,9 @@ declare namespace LocalJSX {
     }
     /**
      * Display a small loading spinner.
+     * ```ts
+     * <verdocs-spinner />
+     * ```
      */
     interface VerdocsSpinner {
         "mode"?: 'light' | 'dark';
@@ -5265,6 +5620,9 @@ declare namespace LocalJSX {
     /**
      * Display a simple table of data. Columns and data cells may have custom renderers defined to
      * support creating interactive table layouts.
+     * ```ts
+     * <verdocs-table columns={[...columns]} data={[...data]} />
+     * ```
      */
     interface VerdocsTable {
         /**
@@ -5287,6 +5645,9 @@ declare namespace LocalJSX {
     /**
      * Display a simple row of selectable tabs. This is a controlled element.
      * The parent must adjust selectedTab as selection events are fired.
+     * ```ts
+     * <verdocs-tabs tabs={[...tabs]} />
+     * ```
      */
     interface VerdocsTabs {
         /**
@@ -5783,7 +6144,10 @@ declare namespace LocalJSX {
     /**
      * Display a text input field. This is just a standard HTML input field with minimal markup to fit the
      * visual styles of the other components. Note that events "bubble" from the input field to the container,
-     * so you can subscribe to the same DOM events (input, blur, etc) that a normal input would emmit.
+     * so you can subscribe to the same DOM events (input, blur, etc) that a normal input would emit.
+     * ```ts
+     * <verdocs-text-input type="text" label="Name" placeholder="Enter your name..." value="" />
+     * ```
      */
     interface VerdocsTextInput {
         /**
@@ -5828,7 +6192,10 @@ declare namespace LocalJSX {
         "value"?: string;
     }
     /**
-     * Displays a label and a set of buttons, also allowing a default selection of a button
+     * Displays a label and a set of buttons, also allowing a default selection of a button.
+     * ```ts
+     * <verdocs-toggle options={[...options]} theme="light"></verdocs-toggle>
+     * ```
      */
     interface VerdocsToggle {
         /**
@@ -5842,6 +6209,9 @@ declare namespace LocalJSX {
     }
     /**
      * Displays a single button that can be toggled on or off by clicking it.
+     * ```ts
+     * <verdocs-toggle-button icon={MessageIcon} size="normal" active={true} />
+     * ```
      */
     interface VerdocsToggleButton {
         "active"?: boolean;
@@ -5864,6 +6234,9 @@ declare namespace LocalJSX {
     }
     /**
      * Displays a simple help icon. Upon hover or focus, a tooltip will be displayed with help text.
+     * ```ts
+     * <verdocs-toolbar-icon text="Sample tooltip text" icon={CalendarIcon} />
+     * ```
      */
     interface VerdocsToolbarIcon {
         /**
@@ -5959,7 +6332,6 @@ declare namespace LocalJSX {
         "verdocs-field-textbox": VerdocsFieldTextbox;
         "verdocs-field-timestamp": VerdocsFieldTimestamp;
         "verdocs-file-chooser": VerdocsFileChooser;
-        "verdocs-floating-menu": VerdocsFloatingMenu;
         "verdocs-help-icon": VerdocsHelpIcon;
         "verdocs-initial-dialog": VerdocsInitialDialog;
         "verdocs-kba-dialog": VerdocsKbaDialog;
@@ -6024,34 +6396,47 @@ declare module "@stencil/core" {
              */
             "verdocs-activity-box": LocalJSX.VerdocsActivityBox & JSXBase.HTMLAttributes<HTMLVerdocsActivityBoxElement>;
             /**
-             * Display an authentication dialog that allows the user to login or sign up. Callbacks are provided for events that
-             * occur during the process (especially successful completion). If the user is already authenticated with a valid
-             * session, this component will hide itself and fire the success callback immediately. It is up to the host application
-             * to render the next appropriate view for the application.
-             * To simplify some types of authentication flows, a visibility flag can force this component to never display. This
-             * allows you to susbcribe to notifications from the
+             * Display an authentication dialog that allows the user to login or sign up. If the user is already authenticated
+             * with a valid session, this component will hide itself and fire the success callback immediately. It is up to the
+             * host application to render the next appropriate view for the application.
+             * To simplify UI development, a visibility flag can force this component to never display. This
+             * allows you to susbcribe to notifications from client apps without calling the lower-level JS SDK.
              * This embed is responsive / mobile-friendly, but the calling application should provide at least a 300px wide
              * container to allow sufficient space for the required forms.
-             * As noted below, the primary event is `authenticated`. This will always be fired at least once, immediately after
-             * the widget is rendered and the user's status has been checked. It may be fired again as the user completes (or
-             * cancels) authentication steps.
-             * Authentication is required to demonstrate this Element. You may do this in Storybook by using the Auth
-             * embed. This Element will reuse the same session produced by logging in via that Embed.
-             * ```typescript
-             * interface IAuthStatus {
-             *   // If true, the user is authenticated with a valid session
-             *   authenticated: boolean;
-             *   // Details for the user's session
-             *   session: IActiveSession | null;
-             * }
+             * ```ts
+             * <verdocs-auth onAuthenticated={e => console.log('Authentication state:', e.detail)} />
              * ```
              */
             "verdocs-auth": LocalJSX.VerdocsAuth & JSXBase.HTMLAttributes<HTMLVerdocsAuthElement>;
             /**
              * Display a template building experience.
+             * ```ts
+             * <verdocs-build templateId={templateId} />
+             * ```
              */
             "verdocs-build": LocalJSX.VerdocsBuild & JSXBase.HTMLAttributes<HTMLVerdocsBuildElement>;
+            /**
+             * A simple button, with consistent styling to other controls in the design system.
+             * ```ts
+             * <verdocs-button label="Click Me" size="normal" variant="standard" />
+             * ```
+             */
             "verdocs-button": LocalJSX.VerdocsButton & JSXBase.HTMLAttributes<HTMLVerdocsButtonElement>;
+            /**
+             * Display an icon button that triggers a drop-down panel that can display
+             * arbitrary child content, such as metadata, forms, or other controls.
+             * ```ts
+             *   <verdocs-button-panel .icon=${icon}>
+             *     <h6>Field Settings</h6>
+             *     <form>
+             *     <p>
+             *       <label>Field Name</label>
+             *       <input type="text" placeholder="Field Name..." />
+             *     </p>
+             *     </form>
+             *   </verdocs-button-panel>
+             * ```
+             */
             "verdocs-button-panel": LocalJSX.VerdocsButtonPanel & JSXBase.HTMLAttributes<HTMLVerdocsButtonPanelElement>;
             /**
              * Displays a check box. Note that this is different from the `verdocs-field-checkbox` component, which is designed
@@ -6059,7 +6444,7 @@ declare module "@stencil/core" {
              * box for UI displays e.g. dialog boxes.
              * This control encapsulates a standard HTML checkbox. To subscribe to change events, connect an `onChange`
              * handler. Sample usage:
-             * ```html
+             * ```ts
              * <verdocs-checkbox
              *    value="on"
              *    name="thingEnabled"
@@ -6086,6 +6471,21 @@ declare module "@stencil/core" {
              * Display a simple dialog where the contents are provided via slots.
              */
             "verdocs-dialog": LocalJSX.VerdocsDialog & JSXBase.HTMLAttributes<HTMLVerdocsDialogElement>;
+            /**
+             * 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. Separators may be created by supplying an entry with an empty label.
+             * ```ts
+             * <verdocs-dropdown
+             *   options={[
+             *     {label: 'Option 1', disabled: true},
+             *     {label: 'Option 2', id: '2'}
+             *     {label: ''}
+             *     {label: 'Option 3', id: '2'}
+             *    ]}
+             *   label="OK" onClick={() => (console.log('OK clicked'))}
+             * />
+             * ```
+             */
             "verdocs-dropdown": LocalJSX.VerdocsDropdown & JSXBase.HTMLAttributes<HTMLVerdocsDropdownElement>;
             /**
              * Represents one document page. This is primarily a layout container used to coordinate positions of
@@ -6124,13 +6524,16 @@ declare module "@stencil/core" {
              */
             "verdocs-field-date": LocalJSX.VerdocsFieldDate & JSXBase.HTMLAttributes<HTMLVerdocsFieldDateElement>;
             /**
-             * Displays a signature field. Various field types are supported, including traditional Signature and Initials types as well as
-             * input types like text and checkbox.
+             * Displays a dropdown field that allows the user to choose one of a list of options.
              */
             "verdocs-field-dropdown": LocalJSX.VerdocsFieldDropdown & JSXBase.HTMLAttributes<HTMLVerdocsFieldDropdownElement>;
             /**
-             * Displays an initial field. If an initial already exists, it will be displayed and the field will be disabled. Otherwise, a placeholder
-             * button will be shown. Clicking the button will show a dialog to adopt an initial.
+             * Displays an initial field. If an initial already exists, it will be displayed and the field
+             * will be disabled. Otherwise, a placeholder button will be shown. Clicking the button will
+             * show a dialog to adopt an initial.
+             * NOTE: When initial fields are completed they will be filled with an initial "stamp".
+             * This requires operation against a live, valid envelope. If you are testing this component
+             * in Storybook, it will not be visible here.
              */
             "verdocs-field-initial": LocalJSX.VerdocsFieldInitial & JSXBase.HTMLAttributes<HTMLVerdocsFieldInitialElement>;
             /**
@@ -6143,24 +6546,42 @@ declare module "@stencil/core" {
              */
             "verdocs-field-radio-button": LocalJSX.VerdocsFieldRadioButton & JSXBase.HTMLAttributes<HTMLVerdocsFieldRadioButtonElement>;
             /**
-             * Displays a signature field. If a signature already exists, it will be displayed and the field will be disabled. Otherwise, a placeholder
-             * button will be shown. Clicking the button will show a dialog to adopt a signature.
+             * Displays a signature field. If a signature already exists, it will be displayed and the field
+             * will be disabled. Otherwise, a placeholder button will be shown. Clicking the button will
+             * show a dialog to adopt a signature.
+             * NOTE: When signature fields are completed they will be filled with a signature "stamp".
+             * This requires operation against a live, valid envelope. If you are testing this component
+             * in Storybook, it will not be visible here.
              */
             "verdocs-field-signature": LocalJSX.VerdocsFieldSignature & JSXBase.HTMLAttributes<HTMLVerdocsFieldSignatureElement>;
             /**
-             * Display a multi-line text input field.
+             * Display a multi-line text input field. Reminder: the "position" of the field is specified
+             * as the BOTTOM-LEFT corner.
              */
             "verdocs-field-textarea": LocalJSX.VerdocsFieldTextarea & JSXBase.HTMLAttributes<HTMLVerdocsFieldTextareaElement>;
             /**
-             * Display a text input field.
+             * Display a simple 1-line text input field.
              */
             "verdocs-field-textbox": LocalJSX.VerdocsFieldTextbox & JSXBase.HTMLAttributes<HTMLVerdocsFieldTextboxElement>;
             /**
-             * Display a timestamp field.
+             * Display a timestamp. Timestamps are not editable by signers. Instead, they are automatically
+             * filled when the signer submits the document.
              */
             "verdocs-field-timestamp": LocalJSX.VerdocsFieldTimestamp & JSXBase.HTMLAttributes<HTMLVerdocsFieldTimestampElement>;
+            /**
+             * Displays a file picker to upload an attachment. This component is just the picker - the host application or component should
+             * provide the actual upload functionality.
+             * ```ts
+             * <verdocs-file-chooser onFileSelected={(e) => console.log('File Selected', e.detail)} />
+             * ```
+             */
             "verdocs-file-chooser": LocalJSX.VerdocsFileChooser & JSXBase.HTMLAttributes<HTMLVerdocsFileChooserElement>;
-            "verdocs-floating-menu": LocalJSX.VerdocsFloatingMenu & JSXBase.HTMLAttributes<HTMLVerdocsFloatingMenuElement>;
+            /**
+             * Displays a simple help icon. Upon hover or focus, a tooltip will be displayed with help text.
+             * ```ts
+             * <verdocs-help-icon text="Sample help text" />
+             * ```
+             */
             "verdocs-help-icon": LocalJSX.VerdocsHelpIcon & JSXBase.HTMLAttributes<HTMLVerdocsHelpIconElement>;
             /**
              * Display a dialog that allows the user to specify an initials image, either by using a signature-font-generated image
@@ -6168,11 +6589,15 @@ declare module "@stencil/core" {
              */
             "verdocs-initial-dialog": LocalJSX.VerdocsInitialDialog & JSXBase.HTMLAttributes<HTMLVerdocsInitialDialogElement>;
             /**
-             * Display a text input field. This adds a partially-transparent overlay and screen-centered dialog
-             * box with a message and optional header/title. An OK button is shown that will dismiss the message.
-             * It can also be dismissed by clicking the background overlay.
+             * Prompt the user to confirm their identity with a series of questions.
              */
             "verdocs-kba-dialog": LocalJSX.VerdocsKbaDialog & JSXBase.HTMLAttributes<HTMLVerdocsKbaDialogElement>;
+            /**
+             * Animated loader placeholder. There are currently no configuration options for this control.
+             * ```ts
+             * <verdocs-loader />
+             * ```
+             */
             "verdocs-loader": LocalJSX.VerdocsLoader & JSXBase.HTMLAttributes<HTMLVerdocsLoaderElement>;
             /**
              * Display a simple text dialog box with an Ok button. This adds a partially-transparent overlay and screen-centered dialog
@@ -6180,18 +6605,65 @@ declare module "@stencil/core" {
              * It can also be dismissed by clicking the background overlay.
              */
             "verdocs-ok-dialog": LocalJSX.VerdocsOkDialog & JSXBase.HTMLAttributes<HTMLVerdocsOkDialogElement>;
+            /**
+             * Display a small summary card describing an organization.
+             * ```ts
+             * <verdocs-organization-card organization={organization} />
+             * ```
+             */
             "verdocs-organization-card": LocalJSX.VerdocsOrganizationCard & JSXBase.HTMLAttributes<HTMLVerdocsOrganizationCardElement>;
+            /**
+             * Display a simple pagination control with individual buttons to move through the data set.
+             * ```ts
+             * <verdocs-pagination
+             *   selectedPage={1}
+             *   itemCount={50}
+             *   perPage={10}
+             *   onSelectPage={(e) => {setSelectedpage(e.detail.selectedPage)}}
+             * />
+             * ```
+             */
             "verdocs-pagination": LocalJSX.VerdocsPagination & JSXBase.HTMLAttributes<HTMLVerdocsPaginationElement>;
+            /**
+             * Display a child component in a "portal", popping it out of the main DOM tree
+             * to allow it to escape the bounds set by its parent.
+             * @credit https://github.com/tomas-teston/stencil-portal for the basic
+             * technique. This has been altered in a few ways to make it more friendly
+             * to cases where there may be multiple portals on the page and provide more
+             * alignment options for the child to be displayed.
+             * ```ts
+             * <div style="padding: 40px">
+             * <div id="sample-tooltip" style="border: 1px solid green; padding: 3px 10px;">
+             * Tooltip Anchor
+             * <verdocs-portal anchor="sample-tooltip" .align=${align} .voffset=${voffset}>
+             * <div style="border: 1px solid red; padding: 3px 10px;">Tooltip</div>
+             * </verdocs-portal>
+             * </div>
+             * </div>
+             * ```
+             */
             "verdocs-portal": LocalJSX.VerdocsPortal & JSXBase.HTMLAttributes<HTMLVerdocsPortalElement>;
             /**
              * Display a template preview experience. This will display the template's attached
              * documents with signing fields overlaid on each page. Fields will be color-coded
              * by recipient, and will be read-only (cannot be filled, moved, or altered).
+             * ```ts
+             * <verdocs-preview templateId={templateId} />
+             * ```
              */
             "verdocs-preview": LocalJSX.VerdocsPreview & JSXBase.HTMLAttributes<HTMLVerdocsPreviewElement>;
+            /**
+             * Display a simple progress bar in a style consistent with the design system.
+             * ```ts
+             * <verdocs-progress-bar label="Uploading..." showPercent={true} percent={54} />
+             * ```
+             */
             "verdocs-progress-bar": LocalJSX.VerdocsProgressBar & JSXBase.HTMLAttributes<HTMLVerdocsProgressBarElement>;
             /**
              * Display a drop-down menu of quick filter options.
+             * ```ts
+             * <verdocs-quick-filter options={[...options]} value={1} label="Filter" placeholder="All" />
+             * ```
              */
             "verdocs-quick-filter": LocalJSX.VerdocsQuickFilter & JSXBase.HTMLAttributes<HTMLVerdocsQuickFilterElement>;
             /**
@@ -6206,7 +6678,7 @@ declare module "@stencil/core" {
              * simple radio button for UI displays e.g. dialog boxes.
              * This control encapsulates a standard HTML radio button. To subscribe to change events, connect an `onChange`
              * handler. Sample usage:
-             * ```html
+             * ```ts
              * <verdocs-radio-button
              *    value="val1"
              *    name="someProperty"
@@ -6228,22 +6700,35 @@ declare module "@stencil/core" {
             /**
              * Display a text input field. This is just a standard HTML input field with minimal markup to fit the
              * visual styles of the other components. Note that events "bubble" from the input field to the container,
-             * so you can subscribe to the same DOM events (input, blur, etc) that a normal input would emmit.
+             * so you can subscribe to the same DOM events (input, blur, etc) that a normal input would emit.
+             * ```ts
+             * <verdocs-select-input label="Select:" label="Select" options={[...options]}
+             * @input ={() => {}} />
+             * ```
              */
             "verdocs-select-input": LocalJSX.VerdocsSelectInput & JSXBase.HTMLAttributes<HTMLVerdocsSelectInputElement>;
             /**
-             * Display a form to collect recipient information for a new Envelope. If used anonymously, the specified `templateId` must be public.
-             * Because most applications have custom workflow requirements to trigger after sending an Envelope, this component does not actually
-             * perform that operation. Parent applications should listen for the `onSend` event, and can pass the contents of `event.detail`
-             * directly to the `createEnvelope()` call in JS-SDK.
-             * Host applications should ensure the template is "sendable" before displaying this component. To be sendable, a template must have
-             * at least one document attached, at least one participant defined, and at least one field assigned to every "signer" participant.
+             * Display a form to send a template to one or more recipients in an envelope for signing. Note
+             * that because most applications have custom workflow requirements to trigger after sending an
+             * Envelope, this component does not actually perform that operation. Parent applications should
+             * listen for the `onSend` event, and can pass the contents of `event.detail` directly to the
+             * `createEnvelope()` call in JS-SDK.
+             * Host applications should ensure the template is "sendable" before displaying this component.
+             * To be sendable, a template must have at least one document attached, at least one participant
+             * defined, and at least one field assigned to every "signer" participant. This component will
+             * hide itself if the template is not sendable.
+             * ```ts
+             * <verdocs-send templateId={templateId} />
+             * ```
              */
             "verdocs-send": LocalJSX.VerdocsSend & JSXBase.HTMLAttributes<HTMLVerdocsSendElement>;
             /**
              * Display a template preview experience. This will display the template's attached
              * documents with signing fields overlaid on each page. Fields will be color-coded
              * by recipient, and will be read-only (cannot be filled, moved, or altered).
+             * ```ts
+             * <verdocs-settings />
+             * ```
              */
             "verdocs-settings": LocalJSX.VerdocsSettings & JSXBase.HTMLAttributes<HTMLVerdocsSettingsElement>;
             /**
@@ -6285,6 +6770,9 @@ declare module "@stencil/core" {
             "verdocs-signature-dialog": LocalJSX.VerdocsSignatureDialog & JSXBase.HTMLAttributes<HTMLVerdocsSignatureDialogElement>;
             /**
              * Display a small loading spinner.
+             * ```ts
+             * <verdocs-spinner />
+             * ```
              */
             "verdocs-spinner": LocalJSX.VerdocsSpinner & JSXBase.HTMLAttributes<HTMLVerdocsSpinnerElement>;
             /**
@@ -6298,11 +6786,17 @@ declare module "@stencil/core" {
             /**
              * Display a simple table of data. Columns and data cells may have custom renderers defined to
              * support creating interactive table layouts.
+             * ```ts
+             * <verdocs-table columns={[...columns]} data={[...data]} />
+             * ```
              */
             "verdocs-table": LocalJSX.VerdocsTable & JSXBase.HTMLAttributes<HTMLVerdocsTableElement>;
             /**
              * Display a simple row of selectable tabs. This is a controlled element.
              * The parent must adjust selectedTab as selection events are fired.
+             * ```ts
+             * <verdocs-tabs tabs={[...tabs]} />
+             * ```
              */
             "verdocs-tabs": LocalJSX.VerdocsTabs & JSXBase.HTMLAttributes<HTMLVerdocsTabsElement>;
             /**
@@ -6377,19 +6871,31 @@ declare module "@stencil/core" {
             /**
              * Display a text input field. This is just a standard HTML input field with minimal markup to fit the
              * visual styles of the other components. Note that events "bubble" from the input field to the container,
-             * so you can subscribe to the same DOM events (input, blur, etc) that a normal input would emmit.
+             * so you can subscribe to the same DOM events (input, blur, etc) that a normal input would emit.
+             * ```ts
+             * <verdocs-text-input type="text" label="Name" placeholder="Enter your name..." value="" />
+             * ```
              */
             "verdocs-text-input": LocalJSX.VerdocsTextInput & JSXBase.HTMLAttributes<HTMLVerdocsTextInputElement>;
             /**
-             * Displays a label and a set of buttons, also allowing a default selection of a button
+             * Displays a label and a set of buttons, also allowing a default selection of a button.
+             * ```ts
+             * <verdocs-toggle options={[...options]} theme="light"></verdocs-toggle>
+             * ```
              */
             "verdocs-toggle": LocalJSX.VerdocsToggle & JSXBase.HTMLAttributes<HTMLVerdocsToggleElement>;
             /**
              * Displays a single button that can be toggled on or off by clicking it.
+             * ```ts
+             * <verdocs-toggle-button icon={MessageIcon} size="normal" active={true} />
+             * ```
              */
             "verdocs-toggle-button": LocalJSX.VerdocsToggleButton & JSXBase.HTMLAttributes<HTMLVerdocsToggleButtonElement>;
             /**
              * Displays a simple help icon. Upon hover or focus, a tooltip will be displayed with help text.
+             * ```ts
+             * <verdocs-toolbar-icon text="Sample tooltip text" icon={CalendarIcon} />
+             * ```
              */
             "verdocs-toolbar-icon": LocalJSX.VerdocsToolbarIcon & JSXBase.HTMLAttributes<HTMLVerdocsToolbarIconElement>;
             /**