@verdocs/web-sdk 4.0.9 → 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 {
         /**
@@ -118,9 +108,9 @@ export namespace Components {
         "templateId": string | null;
     }
     /**
-     * A simple button
-     * ```jsx
-     * <verdocs-button label="Click Me" />
+     * 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 {
@@ -156,6 +146,17 @@ export namespace Components {
     /**
      * 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>;
@@ -172,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"
@@ -246,7 +247,7 @@ export namespace Components {
     /**
      * 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.
-     * ```html
+     * ```ts
      * <verdocs-dropdown
      *   options={[
      *     {label: 'Option 1', disabled: true},
@@ -410,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.
          */
@@ -534,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 {
         /**
@@ -579,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 {
         /**
@@ -724,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 {
         /**
@@ -773,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 {
         /**
@@ -821,7 +834,7 @@ export namespace Components {
         "yscale"?: number;
     }
     /**
-     * Display a text input field.
+     * Display a simple 1-line text input field.
      */
     interface VerdocsFieldTextbox {
         /**
@@ -869,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 {
         /**
@@ -915,6 +929,9 @@ export namespace Components {
     /**
      * 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 {
         /**
@@ -922,19 +939,11 @@ export namespace Components {
          */
         "endpoint": VerdocsEndpoint;
     }
-    /**
-     * Floating Action Button style menu. For proper placement, this should be added to the DOM inside a container that is set to
-     * `overflow-y: scroll;`. The component will detect that placement and position itself in the bottom-right corner on top of the
-     * container. It will be absolutely positioned so it will be unaffected by scrolling the container.
-     */
-    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 {
         /**
@@ -957,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 {
         /**
@@ -997,6 +1004,9 @@ export namespace Components {
     }
     /**
      * Animated loader placeholder. There are currently no configuration options for this control.
+     * ```ts
+     * <verdocs-loader />
+     * ```
      */
     interface VerdocsLoader {
     }
@@ -1024,7 +1034,10 @@ export namespace Components {
         "showCancel": boolean;
     }
     /**
-     * Display a small summary card describing an organization
+     * Display a small summary card describing an organization.
+     * ```ts
+     * <verdocs-organization-card organization={organization} />
+     * ```
      */
     interface VerdocsOrganizationCard {
         /**
@@ -1034,6 +1047,14 @@ export namespace Components {
     }
     /**
      * 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 {
         /**
@@ -1056,6 +1077,16 @@ export namespace Components {
      * 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 {
         /**
@@ -1075,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 {
         /**
@@ -1087,7 +1121,10 @@ export namespace Components {
         "templateId": string | null;
     }
     /**
-     * A simple progress bar.
+     * 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 {
         /**
@@ -1105,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;
@@ -1132,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"
@@ -1199,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 {
         /**
@@ -1220,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 {
         /**
@@ -1246,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 {
         /**
@@ -1334,6 +1387,9 @@ export namespace Components {
     }
     /**
      * Display a small loading spinner.
+     * ```ts
+     * <verdocs-spinner />
+     * ```
      */
     interface VerdocsSpinner {
         "mode": 'light' | 'dark';
@@ -1367,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 {
         /**
@@ -1381,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 {
         /**
@@ -1684,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 {
         /**
@@ -1729,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 {
         /**
@@ -1743,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;
@@ -1761,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 {
         /**
@@ -1893,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;
@@ -2071,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 {
@@ -2117,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;
@@ -2133,9 +2195,9 @@ declare global {
         new (): HTMLVerdocsBuildElement;
     };
     /**
-     * A simple button
-     * ```jsx
-     * <verdocs-button label="Click Me" />
+     * 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 {
@@ -2147,6 +2209,17 @@ declare global {
     /**
      * 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 {
     }
@@ -2160,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"
@@ -2237,7 +2310,7 @@ declare global {
     /**
      * 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.
-     * ```html
+     * ```ts
      * <verdocs-dropdown
      *   options={[
      *     {label: 'Option 1', disabled: true},
@@ -2383,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.
@@ -2451,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;
@@ -2477,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;
@@ -2546,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;
@@ -2568,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;
@@ -2589,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;
@@ -2610,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;
@@ -2632,6 +2714,9 @@ declare global {
     /**
      * 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;
@@ -2647,30 +2732,11 @@ declare global {
         prototype: HTMLVerdocsFileChooserElement;
         new (): HTMLVerdocsFileChooserElement;
     };
-    interface HTMLVerdocsFloatingMenuElementEventMap {
-        "optionSelected": IOption;
-    }
-    /**
-     * Floating Action Button style menu. For proper placement, this should be added to the DOM inside a container that is set to
-     * `overflow-y: scroll;`. The component will detect that placement and position itself in the bottom-right corner on top of the
-     * container. It will be absolutely positioned so it will be unaffected by scrolling the container.
-     */
-    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 {
     }
@@ -2705,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;
@@ -2725,6 +2789,9 @@ declare global {
     };
     /**
      * Animated loader placeholder. There are currently no configuration options for this control.
+     * ```ts
+     * <verdocs-loader />
+     * ```
      */
     interface HTMLVerdocsLoaderElement extends Components.VerdocsLoader, HTMLStencilElement {
     }
@@ -2756,7 +2823,10 @@ declare global {
         new (): HTMLVerdocsOkDialogElement;
     };
     /**
-     * Display a small summary card describing an organization
+     * Display a small summary card describing an organization.
+     * ```ts
+     * <verdocs-organization-card organization={organization} />
+     * ```
      */
     interface HTMLVerdocsOrganizationCardElement extends Components.VerdocsOrganizationCard, HTMLStencilElement {
     }
@@ -2769,6 +2839,14 @@ declare global {
     }
     /**
      * 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;
@@ -2794,6 +2872,16 @@ declare global {
      * 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;
@@ -2816,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;
@@ -2832,7 +2923,10 @@ declare global {
         new (): HTMLVerdocsPreviewElement;
     };
     /**
-     * A simple progress bar.
+     * 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 {
     }
@@ -2845,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;
@@ -2889,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"
@@ -2944,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 {
     }
@@ -2960,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;
@@ -2988,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;
@@ -3149,6 +3259,9 @@ declare global {
     };
     /**
      * Display a small loading spinner.
+     * ```ts
+     * <verdocs-spinner />
+     * ```
      */
     interface HTMLVerdocsSpinnerElement extends Components.VerdocsSpinner, HTMLStencilElement {
     }
@@ -3176,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;
@@ -3197,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;
@@ -3552,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 {
     }
@@ -3561,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 {
     }
@@ -3574,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;
@@ -3591,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 {
     }
@@ -3673,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;
@@ -3764,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 {
@@ -3796,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;
         /**
@@ -3810,6 +3929,9 @@ declare namespace LocalJSX {
     }
     /**
      * Display a template building experience.
+     * ```ts
+     * <verdocs-build templateId={templateId} />
+     * ```
      */
     interface VerdocsBuild {
         /**
@@ -3850,9 +3972,9 @@ declare namespace LocalJSX {
         "templateId"?: string | null;
     }
     /**
-     * A simple button
-     * ```jsx
-     * <verdocs-button label="Click Me" />
+     * 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 {
@@ -3888,6 +4010,17 @@ declare namespace LocalJSX {
     /**
      * 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 {
         /**
@@ -3901,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"
@@ -3991,7 +4124,7 @@ declare namespace LocalJSX {
     /**
      * 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.
-     * ```html
+     * ```ts
      * <verdocs-dropdown
      *   options={[
      *     {label: 'Option 1', disabled: true},
@@ -4231,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.
          */
@@ -4242,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.
          */
@@ -4379,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 {
         /**
@@ -4433,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 {
         /**
@@ -4610,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 {
         /**
@@ -4672,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 {
         /**
@@ -4725,7 +4870,7 @@ declare namespace LocalJSX {
         "yscale"?: number;
     }
     /**
-     * Display a text input field.
+     * Display a simple 1-line text input field.
      */
     interface VerdocsFieldTextbox {
         /**
@@ -4778,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 {
         /**
@@ -4829,6 +4975,9 @@ declare namespace LocalJSX {
     /**
      * 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 {
         /**
@@ -4840,23 +4989,11 @@ declare namespace LocalJSX {
          */
         "onFileSelected"?: (event: VerdocsFileChooserCustomEvent<{file: File | null}>) => void;
     }
-    /**
-     * Floating Action Button style menu. For proper placement, this should be added to the DOM inside a container that is set to
-     * `overflow-y: scroll;`. The component will detect that placement and position itself in the bottom-right corner on top of the
-     * container. It will be absolutely positioned so it will be unaffected by scrolling the container.
-     */
-    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 {
         /**
@@ -4887,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 {
         /**
@@ -4935,6 +5070,9 @@ declare namespace LocalJSX {
     }
     /**
      * Animated loader placeholder. There are currently no configuration options for this control.
+     * ```ts
+     * <verdocs-loader />
+     * ```
      */
     interface VerdocsLoader {
     }
@@ -4970,7 +5108,10 @@ declare namespace LocalJSX {
         "showCancel"?: boolean;
     }
     /**
-     * Display a small summary card describing an organization
+     * Display a small summary card describing an organization.
+     * ```ts
+     * <verdocs-organization-card organization={organization} />
+     * ```
      */
     interface VerdocsOrganizationCard {
         /**
@@ -4980,6 +5121,14 @@ declare namespace LocalJSX {
     }
     /**
      * 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 {
         /**
@@ -5006,6 +5155,16 @@ declare namespace LocalJSX {
      * 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 {
         /**
@@ -5026,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 {
         /**
@@ -5042,7 +5204,10 @@ declare namespace LocalJSX {
         "templateId"?: string | null;
     }
     /**
-     * A simple progress bar.
+     * 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 {
         /**
@@ -5060,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;
@@ -5099,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"
@@ -5177,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 {
         /**
@@ -5198,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 {
         /**
@@ -5243,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 {
         /**
@@ -5403,6 +5584,9 @@ declare namespace LocalJSX {
     }
     /**
      * Display a small loading spinner.
+     * ```ts
+     * <verdocs-spinner />
+     * ```
      */
     interface VerdocsSpinner {
         "mode"?: 'light' | 'dark';
@@ -5436,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 {
         /**
@@ -5458,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 {
         /**
@@ -5954,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 {
         /**
@@ -5999,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 {
         /**
@@ -6013,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;
@@ -6035,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 {
         /**
@@ -6130,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;
@@ -6195,43 +6396,46 @@ 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
-             * ```jsx
-             * <verdocs-button label="Click Me" />
+             * 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>;
             /**
@@ -6240,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"
@@ -6270,7 +6474,7 @@ declare module "@stencil/core" {
             /**
              * 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.
-             * ```html
+             * ```ts
              * <verdocs-dropdown
              *   options={[
              *     {label: 'Option 1', disabled: true},
@@ -6320,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>;
             /**
@@ -6339,35 +6546,41 @@ 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>;
-            /**
-             * Floating Action Button style menu. For proper placement, this should be added to the DOM inside a container that is set to
-             * `overflow-y: scroll;`. The component will detect that placement and position itself in the bottom-right corner on top of the
-             * container. It will be absolutely positioned so it will be unaffected by scrolling the container.
-             */
-            "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>;
             /**
@@ -6376,13 +6589,14 @@ 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>;
             /**
@@ -6392,11 +6606,22 @@ declare module "@stencil/core" {
              */
             "verdocs-ok-dialog": LocalJSX.VerdocsOkDialog & JSXBase.HTMLAttributes<HTMLVerdocsOkDialogElement>;
             /**
-             * Display a small summary card describing an organization
+             * 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>;
             /**
@@ -6406,20 +6631,39 @@ declare module "@stencil/core" {
              * 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>;
             /**
-             * A simple progress bar.
+             * 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>;
             /**
@@ -6434,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"
@@ -6456,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>;
             /**
@@ -6513,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>;
             /**
@@ -6526,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>;
             /**
@@ -6605,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>;
             /**