@watermarkinsights/ripple 5.2.0 → 5.2.1-0

package/dist/collection/components/wm-navigation/wm-navigation-hamburger.js

@@ -34,7 +34,7 @@ export class NavigationHamburger {
         this.wmNavigationHamburgerClicked.emit();
     }
     render() {
-        return (h(Host, { class: `hamburger ${this.open ? "nav-open" : "nav-closed"}` }, h("button", { "aria-expanded": this.open, "aria-label": this.showNavMessage, onMouseEnter: () => showTooltip("right", this.el, this.showNavMessage), onMouseLeave: () => hideTooltip(), onFocus: () => this.isTabbing && showTooltip("right", this.el, this.showNavMessage), onBlur: () => hideTooltip(), onClick: () => this.handleClick() }, h("span", { class: "icon" }))));
+        return (h(Host, { key: 'bb783acfebdfcf8ac95b2afc89f073896ea9b7e4', class: `hamburger ${this.open ? "nav-open" : "nav-closed"}` }, h("button", { key: '708812a3c933396c95185d6622f9d5d52b270ff0', "aria-expanded": this.open, "aria-label": this.showNavMessage, onMouseEnter: () => showTooltip("right", this.el, this.showNavMessage), onMouseLeave: () => hideTooltip(), onFocus: () => this.isTabbing && showTooltip("right", this.el, this.showNavMessage), onBlur: () => hideTooltip(), onClick: () => this.handleClick() }, h("span", { key: 'f1f34d7ed178f4f609e5adf2122399cffdd76a68', class: "icon" }))));
     }
     static get is() { return "wm-navigation-hamburger"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/wm-navigation/wm-navigation-item.js

@@ -6,7 +6,7 @@ export class NavigationItem {
         this.active = undefined;
     }
     render() {
-        return (h(Host, { role: "listitem" }, h("a", { class: `link ${this.active ? "active" : ""}`, href: this.href, onClick: () => this.wmNavigationItemClicked.emit() }, h("div", { class: "icon", "aria-hidden": "true" }, h("slot", null)), h("div", { class: "text" }, this.text))));
+        return (h(Host, { key: '33217bc2b481b331425cbc7ece6195cb436e7bf0', role: "listitem" }, h("a", { key: 'a7b6d4e959a2ca4773f70859cf10789f5d97a4a4', class: `link ${this.active ? "active" : ""}`, href: this.href, onClick: () => this.wmNavigationItemClicked.emit() }, h("div", { key: 'f0d37d22d32fb7659adc2a3a9911f9e68928fc93', class: "icon", "aria-hidden": "true" }, h("slot", { key: '8678da1761b5192c821a3fcb736c1ac96b2ce43c' })), h("div", { key: 'a21f01425d6adc2da148449b34733c9e6ed39be5', class: "text" }, this.text))));
     }
     static get is() { return "wm-navigation-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/wm-navigation/wm-navigation.js

@@ -96,9 +96,9 @@ export class Navigation {
             } }));
     }
     render() {
-        return (h(Host, { role: "navigation", "aria-expanded": this.ariaExpanded, "aria-label": this.mainNavigationMessage }, this.open ? this.renderOverlay() : "", this.isCollapsible && (h("div", { class: "trapfocus", tabindex: this.open ? 0 : undefined, onFocus: () => this.focusLastItem() })), h("div", { class: "tray" }, h("div", { class: "toggle-wrapper" }, h("wm-button", { ref: (el) => (this.toggleEl = el), class: "toggle", "button-type": "navigational", icon: this.open ? "f156" : "f35c", "icon-size": "2rem", tooltip: this.open ? globalMessages.close : globalMessages.open, "tooltip-position": "right", tabIndex: this.open ? undefined : -1, onClick: () => {
+        return (h(Host, { key: '438a0fb1164b8ce7ce05d3032a03cbc14b6dbbf9', role: "navigation", "aria-expanded": this.ariaExpanded, "aria-label": this.mainNavigationMessage }, this.open ? this.renderOverlay() : "", this.isCollapsible && (h("div", { key: '05214ccbadf96b315e0b35cd5c6fa5299582ac08', class: "trapfocus", tabindex: this.open ? 0 : undefined, onFocus: () => this.focusLastItem() })), h("div", { key: 'f9b8092df608206c64251abe889ead679fd91e8b', class: "tray" }, h("div", { key: '23ab4007600faafd5e159400c7950c6da27f6fc6', class: "toggle-wrapper" }, h("wm-button", { key: '08626268ecd50d66fca80f0081af427c9902742a', ref: (el) => (this.toggleEl = el), class: "toggle", "button-type": "navigational", icon: this.open ? "f156" : "f35c", "icon-size": "2rem", tooltip: this.open ? globalMessages.close : globalMessages.open, "tooltip-position": "right", tabIndex: this.open ? undefined : -1, onClick: () => {
                 this.open = !this.open;
-            } })), h("ul", { class: "navlist" }, h("slot", null))), this.isCollapsible && (h("div", { class: "trapfocus", tabindex: this.open ? 0 : undefined, onFocus: () => this.toggleEl.focus() }))));
+            } })), h("ul", { key: 'c50bb2f99877871b6ba28ded7e78f74f8c8c5d1f', class: "navlist" }, h("slot", { key: '50c4f79ab19f853abeb9ba8e41caf180d04a605c' }))), this.isCollapsible && (h("div", { key: '87b371694aab525291eb397521140087d2b0c9f3', class: "trapfocus", tabindex: this.open ? 0 : undefined, onFocus: () => this.toggleEl.focus() }))));
     }
     static get is() { return "wm-navigation"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/wm-navigator/priv-navigator-button/priv-navigator-button.js

@@ -9,7 +9,7 @@ export class PrivNavigatorButton {
     }
     render() {
         const { handleClick, altText } = this;
-        return (h("button", { "aria-expanded": this.expanded.toString(), class: "navigator", onClick: handleClick.bind(this), "aria-label": altText }));
+        return (h("button", { key: 'a3581aedd9455ccc209a083465be4015306288aa', "aria-expanded": this.expanded.toString(), class: "navigator", onClick: handleClick.bind(this), "aria-label": altText }));
     }
     static get is() { return "priv-navigator-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/wm-navigator/priv-navigator-item/priv-navigator-item.js

@@ -16,7 +16,7 @@ export class PrivNavigatorItem {
     render() {
         const selectedClass = this.selected ? "selected" : "";
         const focusedClass = this.focused ? "focused" : "";
-        return (h("div", { class: `navoption ${selectedClass} ${focusedClass}` }, h("slot", null)));
+        return (h("div", { key: '0eb72db17cdc3631eb2febb8f69cad9f27c92ab3', class: `navoption ${selectedClass} ${focusedClass}` }, h("slot", { key: '8d32384ba6f921a248db3f5c1a05cb70dc96645c' })));
     }
     static get is() { return "priv-navigator-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/wm-option/wm-option.js

@@ -137,7 +137,7 @@ export class Option {
         this.parentSelectEl.addEventListener("wmSelectSearchChanged", (ev) => this.handleSearch(ev));
     }
     render() {
-        return (h(Host, { role: "option", tabindex: this.focused ? 0 : -1, class: this.hostClasses }, h("div", { class: `option-wrapper ${this.parentSelectEl.multiple ? "checkbox" : ""}` }, h("span", { class: "option-text", "aria-hidden": "true", ref: (el) => (this.textEl = el) }, this.el.textContent), h("span", { class: "sr-only" }, this.el.textContent)), h("div", { class: "subinfo" }, this.subinfo)));
+        return (h(Host, { key: '8cbc11751fd37bc0e031c25e4bd17664332b60a7', role: "option", tabindex: this.focused ? 0 : -1, class: this.hostClasses }, h("div", { key: '497bc52a071d74ad08650fbec15c75f4826a301a', class: `option-wrapper ${this.parentSelectEl.multiple ? "checkbox" : ""}` }, h("span", { key: '926aa9bd609bdb9d66b881f2a1e9f94fb209f209', class: "option-text", "aria-hidden": "true", ref: (el) => (this.textEl = el) }, this.el.textContent), h("span", { key: 'e5fc6d405291a4845b2aae00d403f611640be4cd', class: "sr-only" }, this.el.textContent)), h("div", { key: '2b2210bc34b97efe6e4b2c6803e6d1071f123e47', class: "subinfo" }, this.subinfo)));
     }
     static get is() { return "wm-option"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/wm-pagination/wm-pagination.js

@@ -151,7 +151,7 @@ export class Pagination {
     render() {
         return (
         // do not render the component if there's only one page
-        this.totalItems > this.itemsPerPage && (h("nav", { "aria-label": `Pagination Navigation. ${this.getCurrentPagesInView()}. Current page, ${this.currentPage}.` }, this.isLargeSize ? this.renderLarge() : this.renderSmall(), h("div", { id: "status", class: "sr-only", "aria-live": "polite", "aria-relevant": "text", "aria-atomic": "true" }, this.srAnnouncement))));
+        this.totalItems > this.itemsPerPage && (h("nav", { key: '5dd60b67a0af0e874e3f5cf4889ec47ad315a8aa', "aria-label": `Pagination Navigation. ${this.getCurrentPagesInView()}. Current page, ${this.currentPage}.` }, this.isLargeSize ? this.renderLarge() : this.renderSmall(), h("div", { key: 'c79dbda4859575587c59f32eb4a8972441393cea', id: "status", class: "sr-only", "aria-live": "polite", "aria-relevant": "text", "aria-atomic": "true" }, this.srAnnouncement))));
     }
     static get is() { return "wm-pagination"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/wm-search/wm-search.js

@@ -166,10 +166,10 @@ export class Search {
      * End search and find render helpers
      */
     render() {
-        return (h(Host, null, h("div", { id: "wm-search-wrapper", class: `wm-search-wrapper ${this.searchType}` }, h("input", { disabled: this.isDisabled, id: "wm-search-input", placeholder: this.placeholder, "aria-label": `${this.label ? this.label + ". " : ""}${intl.formatMessage({
+        return (h(Host, { key: '280b47dbcf6eb02dedfdbe3e10b91598c650bd08' }, h("div", { key: 'd66f5a5a1cb14843623e900ceea640c8d300642f', id: "wm-search-wrapper", class: `wm-search-wrapper ${this.searchType}` }, h("input", { key: 'a03aaf36657e05595e69ba93df05d4d7f24caefc', disabled: this.isDisabled, id: "wm-search-input", placeholder: this.placeholder, "aria-label": `${this.label ? this.label + ". " : ""}${intl.formatMessage({
                 id: "search.typeToFilterResults",
                 defaultMessage: "Type to filter the results",
-            })}`, onInput: (ev) => this.updateValue(ev.target.value), onBlur: () => this.handleBlur(), "aria-autocomplete": "none", autocomplete: "off", value: this.value }), h("span", { class: "mdi search-icon" }, String.fromCodePoint(parseInt(`0xf349`))), this.searchType === "find" && this.renderResultsAndBrowseButtons(), h("div", { id: "wm-search-live", class: "sr-only", "aria-live": "polite", "aria-atomic": "true", ref: (el) => (this.resultsLiveRegion = el) }, this.announcement)), this.searchType === "find" && this.renderJumpToLink()));
+            })}`, onInput: (ev) => this.updateValue(ev.target.value), onBlur: () => this.handleBlur(), "aria-autocomplete": "none", autocomplete: "off", value: this.value }), h("span", { key: '15150abbffc25d3675d7886fb74e624f54d9feb7', class: "mdi search-icon" }, String.fromCodePoint(parseInt(`0xf349`))), this.searchType === "find" && this.renderResultsAndBrowseButtons(), h("div", { key: '9750983b8b70aa6d83bee49aead3fcddb128c094', id: "wm-search-live", class: "sr-only", "aria-live": "polite", "aria-atomic": "true", ref: (el) => (this.resultsLiveRegion = el) }, this.announcement)), this.searchType === "find" && this.renderJumpToLink()));
     }
     static get is() { return "wm-search"; }
     static get encapsulation() { return "shadow"; }
@@ -380,8 +380,9 @@ export class Search {
                 "complexType": {
                     "signature": "(value: string) => Promise<void>",
                     "parameters": [{
-                            "tags": [],
-                            "text": ""
+                            "name": "value",
+                            "type": "string",
+                            "docs": ""
                         }],
                     "references": {
                         "Promise": {

package/dist/collection/components/wm-select/wm-select.js

@@ -553,9 +553,9 @@ export class Select {
             ["aria-expanded"]: this.isExpanded ? "true" : "false",
             onClick: () => (this.isExpanded ? this.close() : this.open()),
         };
-        return (h(Host, { onBlur: (ev) => this.handleComponentBlur(ev) }, h("div", { class: `wrapper ${getTextDir()} label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { class: "label-wrapper" }, h("label", { class: "label", id: "label", htmlFor: "selectbtn" }, this.label, 
+        return (h(Host, { key: 'b8656f0d3d1b17b617b3eb15e1ee29181d4bc1ea', onBlur: (ev) => this.handleComponentBlur(ev) }, h("div", { key: '66bf9599c8b862d3218432603c19473348cfdee0', class: `wrapper ${getTextDir()} label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: 'db74941a314ab811607cfec02b29b5828de3e8c2', class: "label-wrapper" }, h("label", { key: 'd2d29ab1b29b3ad46f580b5e209d57e8bc81544a', class: "label", id: "label", htmlFor: "selectbtn" }, this.label, 
         // we can't use aria-required or required attributes because it's invalid on the elements we're using (button controlling a listbox)
-        this.requiredField ? (h("span", { class: "required" }, h("span", { class: "sr-only" }, globalMessages.requiredField), h("span", { "aria-hidden": "true" }, "*"))) : (""))), h("div", { class: "button-wrapper" }, h("button", Object.assign({}, buttonProps, { class: "displayedoption", ref: (el) => (this.buttonEl = el), onBlur: (ev) => this.handleButtonBlur(ev), onFocus: () => this.close() }), h("span", { class: `overflowcontrol ${showSubinfo ? "hassubinfo" : ""}` }, h("span", { class: "button-text" }, this.renderButtonText()), showSubinfo && h("span", { class: "subinfo" }, this.selectedOptions[0].subinfo)), this.renderOverflowCount()), h("div", { class: `dropdown ${this.isExpanded ? "open" : ""} ${this.openUp ? "upwards" : ""}`, ref: (el) => (this.dropdownEl = el) }, this.search && this.renderSearchField(), this.visibleSelectAllButton && this.renderSelectAllButton(), h("div", { id: "list", class: "options-wrapper", tabindex: -1, role: "listbox", "aria-multiselectable": this.multiple ? "true" : null, "aria-labelledby": "label", ref: (el) => (this.listboxEl = el) }, this.search && this.filteredOptions.length === 0 && this.renderSearchFailedMessage(), this.multiple && this.renderCloneOptions(), h("slot", null))), h("div", { id: "error", class: this.errorMessage ? "error-message" : "" }, this.errorMessage), h("div", { id: "announcement", "aria-live": "polite", "aria-atomic": "true", class: "sr-only", ref: (el) => (this.liveRegionEl = el) }, this.announcement)))));
+        this.requiredField ? (h("span", { class: "required" }, h("span", { class: "sr-only" }, globalMessages.requiredField), h("span", { "aria-hidden": "true" }, "*"))) : (""))), h("div", { key: 'aafa5ae03c194944d996eb72f49e74efc9e90a52', class: "button-wrapper" }, h("button", Object.assign({ key: '3b750d66778ce5bd221f1abd391ed8bd612c7735' }, buttonProps, { class: "displayedoption", ref: (el) => (this.buttonEl = el), onBlur: (ev) => this.handleButtonBlur(ev), onFocus: () => this.close() }), h("span", { key: 'd8a89fe774a7dc779270ff774a831ceea0973465', class: `overflowcontrol ${showSubinfo ? "hassubinfo" : ""}` }, h("span", { key: '6c895b0e0d8d14eb00746c0d21664a7b8b8dcd8c', class: "button-text" }, this.renderButtonText()), showSubinfo && h("span", { key: 'c2ebabdaffa8cdef1c17de42e06d2ada3eba56f0', class: "subinfo" }, this.selectedOptions[0].subinfo)), this.renderOverflowCount()), h("div", { key: '63482f1de9aa5ab82187844d15fa88a890978c1c', class: `dropdown ${this.isExpanded ? "open" : ""} ${this.openUp ? "upwards" : ""}`, ref: (el) => (this.dropdownEl = el) }, this.search && this.renderSearchField(), this.visibleSelectAllButton && this.renderSelectAllButton(), h("div", { key: 'ca643cd551f6cd0fac7c9d047e13891648eac2da', id: "list", class: "options-wrapper", tabindex: -1, role: "listbox", "aria-multiselectable": this.multiple ? "true" : null, "aria-labelledby": "label", ref: (el) => (this.listboxEl = el) }, this.search && this.filteredOptions.length === 0 && this.renderSearchFailedMessage(), this.multiple && this.renderCloneOptions(), h("slot", { key: '3bfc9e9167a7fe7c367b2f6f1c358b5ba01e5951' }))), h("div", { key: 'ae150866a2cdf9f7c82fd8eec3e96f75e5658efe', id: "error", class: this.errorMessage ? "error-message" : "" }, this.errorMessage), h("div", { key: 'b631744fa098439b91d37d48f91d3ed095bf03cd', id: "announcement", "aria-live": "polite", "aria-atomic": "true", class: "sr-only", ref: (el) => (this.liveRegionEl = el) }, this.announcement)))));
     }
     static get is() { return "wm-select"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/wm-snackbar/wm-snackbar.js

@@ -105,11 +105,11 @@ export class Snackbar {
             }, onKeyDown: (ev) => ev.key === "Enter" && this.snackLinkClicked(notification) }, h("span", { "aria-hidden": "true" }, notification.link)))), h("button", { id: `close-button-${notification.id}`, "aria-label": "Close this notification", class: "closesnack", tabindex: notification.link ? 0 : -1, onClick: () => this.snackDismissed(notification), onMouseEnter: (ev) => showTooltip("bottom", ev.target, globalMessages.close), onMouseLeave: () => hideTooltip(), onFocus: (ev) => this.isTabbing && showTooltip("bottom", ev.target, globalMessages.close), onBlur: () => hideTooltip() })), h("div", { class: "sr-only", tabindex: notification.link ? 0 : -1, onFocus: () => notification.link && this.snackDismissed(notification) })))));
     }
     render() {
-        return (h("div", { class: {
+        return (h("div", { key: '617193748c9598e9174afd35040ee1e5e2fe30a7', class: {
                 "wm-snackbars": true,
                 empty: this.parsedNotifications.length === 0,
                 "user-is-tabbing": this.isTabbing,
-            } }, h("div", { class: "sr-only", "aria-live": "polite", "aria-atomic": "false", id: `wm-live-region-${this.uid}`, ref: (el) => (this.liveRegionEl = el) }, this.announcement), this.renderSnackbars()));
+            } }, h("div", { key: '378271fcda38d38b9df1f89f54cf28e46ce0b0e7', class: "sr-only", "aria-live": "polite", "aria-atomic": "false", id: `wm-live-region-${this.uid}`, ref: (el) => (this.liveRegionEl = el) }, this.announcement), this.renderSnackbars()));
     }
     static get is() { return "wm-snackbar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/wm-tabs/wm-tab-item/wm-tab-item.js

@@ -40,7 +40,7 @@ export class TabItem {
                 "background-size": `calc(100% - ${bkgSize}${units}) 3px`,
             };
         }
-        return (h(Host, { role: "presentation" }, h("li", { class: "tab-item", role: "presentation" }, h("a", { class: `tab ${classes}`, style: styles, role: "tab", ref: (el) => (this.linkEl = el), onClick: this.tabClicked, id: `tab-link-${this.tabId}`, onKeyDown: (ev) => this.tabPressed(ev), "aria-selected": this.selected ? "true" : "false", tabindex: this.selected ? 0 : -1 }, h("slot", null)))));
+        return (h(Host, { key: 'd5abb94af87c1969ffaa8bb1230910b9455e0279', role: "presentation" }, h("li", { key: '030939b9181461260624ddd8ec36b6838891918b', class: "tab-item", role: "presentation" }, h("a", { key: 'deadcc1ab9a77f852a11ce5d38f4afe088572da4', class: `tab ${classes}`, style: styles, role: "tab", ref: (el) => (this.linkEl = el), onClick: this.tabClicked, id: `tab-link-${this.tabId}`, onKeyDown: (ev) => this.tabPressed(ev), "aria-selected": this.selected ? "true" : "false", tabindex: this.selected ? 0 : -1 }, h("slot", { key: '92c6e1c0f86c69ce39570efec458f4015f2f4f29' })))));
     }
     static get is() { return "wm-tab-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/wm-tabs/wm-tab-list/wm-tab-list.js

@@ -155,7 +155,7 @@ export class TabList {
             } }, t.textContent)));
     }
     render() {
-        return h(Host, { class: this.menuLayout ? "menu" : "" }, this.renderMenuOrTabs());
+        return h(Host, { key: 'ae6a2b38bbbc22a06e52d5971850d197bec72187', class: this.menuLayout ? "menu" : "" }, this.renderMenuOrTabs());
     }
     static get is() { return "wm-tab-list"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/wm-tabs/wm-tab-panel/wm-tab-panel.js

@@ -12,7 +12,7 @@ export class TabPanel {
         this.tabPanelLoaded.emit({ tabId: this.tabId });
     }
     render() {
-        return h(Host, { role: "tabpanel", class: { "tab-hidden": !this.active } });
+        return h(Host, { key: '7c85919cac0154edb77c7148c49b2f6079b4cb44', role: "tabpanel", class: { "tab-hidden": !this.active } });
     }
     static get is() { return "wm-tab-panel"; }
     static get originalStyleUrls() {

package/dist/collection/components/wm-tag-input/wm-tag-input.js

@@ -858,12 +858,12 @@ export class TagInput {
         }
     }
     render() {
-        return (h("div", { class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { class: "label-wrapper" }, h("label", { class: "label", htmlFor: "input" }, this.label, this.requiredField && (h("span", { class: "required", "aria-hidden": "true" }, "*")))), h("div", { class: `field-wrapper ${this.el.shadowRoot.activeElement === this.inputEl ? "focused" : ""} ${this.errorMessage ? "invalid" : ""}`, ref: (el) => (this.fieldWrapperEl = el) }, h("div", { class: "upper-row" }, h("div", { class: `tags-and-input-wrapper ${this.inModal ? "in-modal" : ""}` }, h("ul", { ref: (el) => (this.tagAreaEl = el), class: `tag-area ${this.taggedOptions.length === 0 && "empty"} ${this.isKeying ? "user-is-keying" : ""}`, role: "listbox", "aria-activedescendant": this.focusedTag ? this.focusedTag.id : null, "aria-orientation": "horizontal", "aria-label": `${this.label} ${this.tagAreaInstructions}`, tabindex: this._tagEls.length > 0 ? 0 : -1, "aria-describedby": `info max-tags`, onFocus: (ev) => this.handleTagAreaFocus(ev), onBlur: (ev) => {
+        return (h("div", { key: '42689cfb6470742fa6cbdada937940b6e51edf4e', class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: '1cebc78175238c435c61144af94c38e2e21c62b2', class: "label-wrapper" }, h("label", { key: 'a009c754cae8b9051bbe34877a3b1ab2b3da00fd', class: "label", htmlFor: "input" }, this.label, this.requiredField && (h("span", { key: 'dc7088f601b9cfc761dca448761d6500e7bcaadb', class: "required", "aria-hidden": "true" }, "*")))), h("div", { key: '10b3e8e2e44ca41e3a7a894c5fdbb6378a697a6d', class: `field-wrapper ${this.el.shadowRoot.activeElement === this.inputEl ? "focused" : ""} ${this.errorMessage ? "invalid" : ""}`, ref: (el) => (this.fieldWrapperEl = el) }, h("div", { key: '43a3cb290af6011ee72a8b56a957506b53cdc321', class: "upper-row" }, h("div", { key: '43c32f316b8584b16b7428c68217bd906582e083', class: `tags-and-input-wrapper ${this.inModal ? "in-modal" : ""}` }, h("ul", { key: '15e56a242f297fb39024fc98f68c7157b2d890f1', ref: (el) => (this.tagAreaEl = el), class: `tag-area ${this.taggedOptions.length === 0 && "empty"} ${this.isKeying ? "user-is-keying" : ""}`, role: "listbox", "aria-activedescendant": this.focusedTag ? this.focusedTag.id : null, "aria-orientation": "horizontal", "aria-label": `${this.label} ${this.tagAreaInstructions}`, tabindex: this._tagEls.length > 0 ? 0 : -1, "aria-describedby": `info max-tags`, onFocus: (ev) => this.handleTagAreaFocus(ev), onBlur: (ev) => {
                 this.focusedTagIndex = undefined;
                 this.handleBlur(ev);
-            }, onKeyDown: (ev) => this.handleTagAreaKeyDown(ev) }, this.renderTags()), h("input", { id: "input", class: "input", role: "combobox", ref: (el) => (this.inputEl = el), autocomplete: "off", "aria-required": this.requiredField ? "true" : null, "aria-controls": this.tagInputType, "aria-describedby": `help-text${this.errorMessage ? " error " : ""} max-tags`, "aria-label": `${this.label} ${this.isDropdown ? globalMessages.getCharacterLimit(this.characterLimit) : ""}`, "aria-expanded": this.isDropdown ? this.isExpanded.toString() : null, "aria-activedescendant": this.inputActiveDescendantId, placeholder: this.placeholder, maxLength: this.isDropdown ? this.characterLimit : undefined, onInput: (ev) => this.handleInputChanged(ev), onBlur: (ev) => {
+            }, onKeyDown: (ev) => this.handleTagAreaKeyDown(ev) }, this.renderTags()), h("input", { key: 'eb8ac481f3d8aa8f384598ceb3ab111309c4db37', id: "input", class: "input", role: "combobox", ref: (el) => (this.inputEl = el), autocomplete: "off", "aria-required": this.requiredField ? "true" : null, "aria-controls": this.tagInputType, "aria-describedby": `help-text${this.errorMessage ? " error " : ""} max-tags`, "aria-label": `${this.label} ${this.isDropdown ? globalMessages.getCharacterLimit(this.characterLimit) : ""}`, "aria-expanded": this.isDropdown ? this.isExpanded.toString() : null, "aria-activedescendant": this.inputActiveDescendantId, placeholder: this.placeholder, maxLength: this.isDropdown ? this.characterLimit : undefined, onInput: (ev) => this.handleInputChanged(ev), onBlur: (ev) => {
                 this.handleBlur(ev);
-            }, onFocus: () => this.handleInputFocus(), onKeyDown: (ev) => this.handleInputKeyDown(ev) })), this.isDropdown && (h("div", { class: "character-count" }, this.charCount, "/", this.characterLimit))), this.renderTagCounter(), this.isDropdown && this.renderDropdown()), this.info && (h("div", { id: "info", class: "info-text" }, this.info)), h("div", { id: "error" }, this.errorMessage), h("div", { class: "sr-only", "aria-live": "polite", ref: (el) => (this.liveRegionEl = el), "aria-atomic": "true" }, this.liveRegionMessage), this.isTable && this.renderTable()));
+            }, onFocus: () => this.handleInputFocus(), onKeyDown: (ev) => this.handleInputKeyDown(ev) })), this.isDropdown && (h("div", { key: '6f9616ab086ef5ceaa443dc990866403c30025bf', class: "character-count" }, this.charCount, "/", this.characterLimit))), this.renderTagCounter(), this.isDropdown && this.renderDropdown()), this.info && (h("div", { key: '62598c8911b5160d499feca29d7e1408b13fbff4', id: "info", class: "info-text" }, this.info)), h("div", { key: '36b6e15fc893c8e147f072ea61b4036c4d542823', id: "error" }, this.errorMessage), h("div", { key: '1dce155e6ea79b47fbb4b21e5d08b8eb1ac81a11', class: "sr-only", "aria-live": "polite", ref: (el) => (this.liveRegionEl = el), "aria-atomic": "true" }, this.liveRegionMessage), this.isTable && this.renderTable()));
     }
     static get is() { return "wm-tag-input"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/wm-textarea/wm-textarea.js

@@ -65,7 +65,7 @@ export class Textarea {
         this.announcement = message;
     }
     render() {
-        return (h("div", { class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { class: "label-wrapper" }, h("label", { htmlFor: "inputfield", class: "label" }, this.label, this.characterLimit && (h("span", { class: "sr-only" }, " ", globalMessages.getCharacterLimit(this.characterLimit))), this.requiredField && (h("span", { class: "required", "aria-hidden": "true" }, "*")))), h("div", { class: "inner-wrapper" }, h("div", { class: `inputfield-wrapper ${this.errorMessage ? "invalid" : ""}`, style: this.inputWidth ? { width: this.inputWidth } : {} }, h("textarea", { id: "inputfield", disabled: this.isDisabled, "aria-describedby": "info error", onInput: (ev) => this.handleInput(ev), onBlur: () => this.handleBlur(), placeholder: this.placeholder, autocomplete: "off", "aria-required": this.requiredField ? "true" : null, value: this.value, rows: 3, style: { height: this.inputHeight } }), this.characterLimit && typeof this.characterLimit === "number" ? (h("div", { class: `character-count ${this.value.length > this.characterLimit ? "exceeded" : ""}` }, this.charCount, "/", this.characterLimit)) : ("")), this.info && (h("div", { id: "info", class: "info" }, this.info)), h("div", { id: "error", class: "error-message" }, this.errorMessage), h("div", { id: "live-polite", class: "sr-only", "aria-live": "polite", "aria-atomic": "true", ref: (el) => (this.liveRegionEl = el) }, this.announcement))));
+        return (h("div", { key: 'ad77d3d9220eb010252ccedb8add52e7d141774e', class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: '4be11635c42e30517ea66775a164f2be12c7065c', class: "label-wrapper" }, h("label", { key: '0770600c79c77c5d14f863bcdd118e8250548cd9', htmlFor: "inputfield", class: "label" }, this.label, this.characterLimit && (h("span", { key: '3b8559fe869fcdda34f3d03fb4c80c410d4d05a1', class: "sr-only" }, " ", globalMessages.getCharacterLimit(this.characterLimit))), this.requiredField && (h("span", { key: 'a4333b22a989b92d0d189f8098586c3a6191d5d2', class: "required", "aria-hidden": "true" }, "*")))), h("div", { key: 'c3e21a23da93afaacc9f7492802c9db0b956b9de', class: "inner-wrapper" }, h("div", { key: '9a0b7a597bfd4803f6287d8443eda286bb25e093', class: `inputfield-wrapper ${this.errorMessage ? "invalid" : ""}`, style: this.inputWidth ? { width: this.inputWidth } : {} }, h("textarea", { key: '7ec44610539244fb4c8f66321d36361bef94ba6f', id: "inputfield", disabled: this.isDisabled, "aria-describedby": "info error", onInput: (ev) => this.handleInput(ev), onBlur: () => this.handleBlur(), placeholder: this.placeholder, autocomplete: "off", "aria-required": this.requiredField ? "true" : null, value: this.value, rows: 3, style: { height: this.inputHeight } }), this.characterLimit && typeof this.characterLimit === "number" ? (h("div", { class: `character-count ${this.value.length > this.characterLimit ? "exceeded" : ""}` }, this.charCount, "/", this.characterLimit)) : ("")), this.info && (h("div", { key: '51c2c404d55b271d603a26e8e91bf7b100dd4491', id: "info", class: "info" }, this.info)), h("div", { key: 'ab404e1446c00ea66700b97f9a68d13e65274cfd', id: "error", class: "error-message" }, this.errorMessage), h("div", { key: '797b7c6014e378c0e1b54cbbb87e648785071ad0', id: "live-polite", class: "sr-only", "aria-live": "polite", "aria-atomic": "true", ref: (el) => (this.liveRegionEl = el) }, this.announcement))));
     }
     static get is() { return "wm-textarea"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/wm-timepicker/wm-timepicker.js

@@ -275,13 +275,13 @@ export class Timepicker {
         return this.times.map((time, index) => (h("li", { id: `option${index + 1}`, "data-time": time, role: "option", onClick: () => this.handleOptionClick(time) }, this.reformatTimeInternal("12", time))));
     }
     render() {
-        return (h(Host, { onBlur: () => this.close(false) }, h("div", { class: `wrapper label-${this.labelPosition} ${!!this.errorMessage ? "invalid" : ""}`, ref: (t) => (this.tpWrapper = t) }, h("div", { class: "label-wrapper" }, this.labelPosition !== "none" && (h("label", { id: "label", class: "label", htmlFor: "time-input" }, this.label, this.requiredField && (h("span", { class: "required", "aria-hidden": "true" }, "*"))))), h("div", null, h("div", { class: "inner-wrapper" }, h("input", { id: "time-input", "aria-label": this.label, "aria-describedby": "error", ref: (el) => (this.inputEl = el), onBlur: () => this.handleInputBlur(), onInput: () => (this.value = this.inputEl.value), disabled: this.isDisabled, "aria-required": this.requiredField ? "true" : null, placeholder: this.timeFormat, autocomplete: "off", value: this.value, onFocus: () => this.tpWrapper.classList.add("focus") }), h("button", { id: "btn", ref: (el) => (this.buttonEl = el), disabled: this.isDisabled, "aria-controls": "list", "aria-expanded": this.isExpanded ? "true" : "false", "aria-label": this.buttonAriaLabel, "aria-describedby": "time-input", onClick: () => (this.isExpanded ? this.close() : this.open()),
+        return (h(Host, { key: 'ee9e14b112e3b11d9f1628c078a164e270ce70e2', onBlur: () => this.close(false) }, h("div", { key: '3f8af029d41f9f73296c86ac79589dd088df6434', class: `wrapper label-${this.labelPosition} ${!!this.errorMessage ? "invalid" : ""}`, ref: (t) => (this.tpWrapper = t) }, h("div", { key: 'dd554b5e654effab5cabeb6100e17572606ebcd9', class: "label-wrapper" }, this.labelPosition !== "none" && (h("label", { key: '0aba4e99183eacc07319241ca9f039e05b38c417', id: "label", class: "label", htmlFor: "time-input" }, this.label, this.requiredField && (h("span", { key: '062f38199696172947ce372516f17cad7f98c734', class: "required", "aria-hidden": "true" }, "*"))))), h("div", { key: 'bab8b143036dacfc44bab8876fd07a74ad5c82b4' }, h("div", { key: 'fdce06d1c033ca52d675266fc22c425088ca1344', class: "inner-wrapper" }, h("input", { key: 'f431f927cf50efa38e4c4e28371015908758a8e1', id: "time-input", "aria-label": this.label, "aria-describedby": "error", ref: (el) => (this.inputEl = el), onBlur: () => this.handleInputBlur(), onInput: () => (this.value = this.inputEl.value), disabled: this.isDisabled, "aria-required": this.requiredField ? "true" : null, placeholder: this.timeFormat, autocomplete: "off", value: this.value, onFocus: () => this.tpWrapper.classList.add("focus") }), h("button", { key: 'bb948a432dacab0a5e26be08a8ac12c346e46f5b', id: "btn", ref: (el) => (this.buttonEl = el), disabled: this.isDisabled, "aria-controls": "list", "aria-expanded": this.isExpanded ? "true" : "false", "aria-label": this.buttonAriaLabel, "aria-describedby": "time-input", onClick: () => (this.isExpanded ? this.close() : this.open()),
             // This addresses an issue in Safari, where clicking buttons does not focus them
             // if the button does not receive focus when clicked, Timepicker incorrectly emits a blur event
             onMouseDown: (ev) => {
                 ev.preventDefault();
                 this.buttonEl.focus();
-            } }, h("span", { class: "clock" })), h("ul", { class: `options ${this.isExpanded ? "open" : ""}  ${this.openUp ? "upwards" : ""}`, id: "list", role: "listbox", "aria-labelledby": "label", "aria-describedby": this.isExpanded ? "collapsed" : null, tabindex: -1, ref: (el) => (this.optionsEl = el) }, this.renderOptions())), h("div", { id: "error", class: "error" }, this.errorMessage)), h("div", { id: "live-polite", class: "sr-only", "aria-live": "polite", "aria-atomic": "true", ref: (el) => (this.liveRegionEl = el) }))));
+            } }, h("span", { key: '9fa145496b91b3e202f4e844814a3983c4383ead', class: "clock" })), h("ul", { key: 'a507114d7751047b3ebac56e806c96bb03ead231', class: `options ${this.isExpanded ? "open" : ""}  ${this.openUp ? "upwards" : ""}`, id: "list", role: "listbox", "aria-labelledby": "label", "aria-describedby": this.isExpanded ? "collapsed" : null, tabindex: -1, ref: (el) => (this.optionsEl = el) }, this.renderOptions())), h("div", { key: '754203e8529db486370254e09643342add95a7b6', id: "error", class: "error" }, this.errorMessage)), h("div", { key: '7847cbb2f4a4eb170815eee2a7c49a2b5f9351a5', id: "live-polite", class: "sr-only", "aria-live": "polite", "aria-atomic": "true", ref: (el) => (this.liveRegionEl = el) }))));
     }
     static get is() { return "wm-timepicker"; }
     static get encapsulation() { return "shadow"; }
@@ -468,8 +468,9 @@ export class Timepicker {
                 "complexType": {
                     "signature": "(input: string) => Promise<boolean>",
                     "parameters": [{
-                            "tags": [],
-                            "text": ""
+                            "name": "input",
+                            "type": "string",
+                            "docs": ""
                         }],
                     "references": {
                         "Promise": {
@@ -488,11 +489,13 @@ export class Timepicker {
                 "complexType": {
                     "signature": "(format: \"12\" | \"24\", time: TimeFormat12 | TimeFormat24) => Promise<string>",
                     "parameters": [{
-                            "tags": [],
-                            "text": ""
+                            "name": "format",
+                            "type": "\"12\" | \"24\"",
+                            "docs": ""
                         }, {
-                            "tags": [],
-                            "text": ""
+                            "name": "time",
+                            "type": "string",
+                            "docs": ""
                         }],
                     "references": {
                         "Promise": {

package/dist/collection/components/wm-toggletip/wm-toggletip.js

@@ -97,9 +97,9 @@ export class Toggletip {
         }
     }
     render() {
-        return (h(Host, { class: `size-${this.targetSize}` }, h("button", { class: "button", type: "button", "aria-label": this.label, onClick: () => this.open(),
+        return (h(Host, { key: '643fbf2de6e3b8438f6899557532008c4c7a342b', class: `size-${this.targetSize}` }, h("button", { key: '8e7e0025c2dd12361a68c86e48e514e3c817ce3b', class: "button", type: "button", "aria-label": this.label, onClick: () => this.open(),
             // In order to position the tooltip identically to the toggletip, it's presence is determined by these four events
-            onMouseEnter: () => showTooltip(this.tooltipPosition, this.el, this.tooltipMessage), onMouseLeave: () => hideTooltip(), onFocus: () => showTooltip(this.tooltipPosition, this.el, this.tooltipMessage), onBlur: () => this.handleBlur() }), h("div", { ref: (el) => (this.toggletipEl = el), class: `toggletip ${this.isOpen ? "" : "hidden"} ${this.tooltipPosition}` }, this.tooltip), h("div", { ref: (el) => (this.liveRegionEl = el), class: "live-region sr-only", role: "status", "aria-live": "polite", "aria-atomic": "true" })));
+            onMouseEnter: () => showTooltip(this.tooltipPosition, this.el, this.tooltipMessage), onMouseLeave: () => hideTooltip(), onFocus: () => showTooltip(this.tooltipPosition, this.el, this.tooltipMessage), onBlur: () => this.handleBlur() }), h("div", { key: '77bddadb74b49f5c46631c160a95597a1fe432d0', ref: (el) => (this.toggletipEl = el), class: `toggletip ${this.isOpen ? "" : "hidden"} ${this.tooltipPosition}` }, this.tooltip), h("div", { key: '5037247de94493cfe9ef7644fe18144f4e046327', ref: (el) => (this.liveRegionEl = el), class: "live-region sr-only", role: "status", "aria-live": "polite", "aria-atomic": "true" })));
     }
     static get is() { return "wm-toggletip"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/wm-uploader/wm-uploader.js

@@ -195,9 +195,9 @@ export class Uploader {
         return (h("div", { class: `wrapper ${this.errorMessage ? "invalid" : ""}` }, h("div", { id: "label", class: `label` }, this.label, this.requiredField && (h("span", { class: "required", "aria-hidden": "true" }, "*")))));
     }
     render() {
-        return (h(Host, null, this.label && this.renderLabel(), this.renderHeader(), this.renderListContainer(), h("div", { ref: (el) => (this.assertiveLiveRegionEl = el), class: "live-region sr-only", "aria-live": "assertive" // since it's directly linked to the action the user took, it should be read in priority. With polite, some messages get dismissed in favor of the page title
+        return (h(Host, { key: 'bd3db6cd234170ccd16da6868a672489a7ee207f' }, this.label && this.renderLabel(), this.renderHeader(), this.renderListContainer(), h("div", { key: 'aaf03bc1b068d79b1e9c9a8bae78ca560c25412c', ref: (el) => (this.assertiveLiveRegionEl = el), class: "live-region sr-only", "aria-live": "assertive" // since it's directly linked to the action the user took, it should be read in priority. With polite, some messages get dismissed in favor of the page title
             ,
-            "aria-atomic": "true" }), h("div", { ref: (el) => (this.politeLiveRegionEl = el), class: "live-region sr-only", "aria-live": "polite", "aria-atomic": "true" })));
+            "aria-atomic": "true" }), h("div", { key: '1a0c1343c241c9e257b52b41973940cc75145b7a', ref: (el) => (this.politeLiveRegionEl = el), class: "live-region sr-only", "aria-live": "polite", "aria-atomic": "true" })));
     }
     static get is() { return "wm-uploader"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/dev/chart-small.js

@@ -0,0 +1,56 @@
+function chartAction() {
+  function getRandomColor() {
+    return `hsl(${Math.round(Math.random() * 360)}, ${Math.round(Math.random() * 50) + 50}%, ${
+      Math.round(Math.random() * 30) + 50
+    }%)`;
+  }
+  document.querySelector("body").style.backgroundColor = getRandomColor();
+}
+
+let counter = 1;
+function makeChart(amounts) {
+  const target = document.querySelector("#autochart");
+  if (target) {
+    const chart = document.createElement("wm-chart");
+    chart.id = `generated-4${counter}`;
+    counter++;
+    chart.setAttribute("chart-type", "doughnut3");
+    chart.setAttribute("label", "auto chart");
+    const bigindex = Math.floor(Math.random() * 7);
+    const total = amounts.reduce((total, newval) => (total += newval), 0);
+    for (var i = 0; i < 7; i++) {
+      const chartSlice = document.createElement("wm-chart-slice");
+      chartSlice.setAttribute("amount", amounts[i]);
+      chartSlice.setAttribute("legend", `slice ${i + 1}`);
+      chartSlice.setAttribute("popover-title", `${amounts[i]} / ${total}`);
+      chartSlice.setAttribute("popover-text", (i % 2 ? "" : "Not ") + ["Boiled", "Washed", "Rinsed", "Roasted"][i % 4]);
+      chart.appendChild(chartSlice);
+    }
+    target.appendChild(chart);
+  }
+}
+
+function spawnCharts() {
+  makeChart([1, 1, 1, 1, 1, 1, 94]);
+  makeChart([1, 2, 1, 2, 1, 2, 91]);
+  makeChart([2, 3, 2, 3, 2, 3, 85]);
+  makeChart([3, 4, 3, 79, 4, 3, 4]);
+  makeChart([3, 4, 5, 76, 3, 4, 5]);
+  makeChart([4, 4, 4, 4, 76, 4, 4]);
+  makeChart([70, 4, 5, 6, 4, 5, 6]);
+  for (var i = 0; i < 5; i++) {
+    const amounts = [];
+    for (var j = 0; j < 7; j++) {
+      if (Math.random() > 0.9) {
+        // 10% chance of a big number
+        amounts.push(Math.floor(Math.random() * 5000));
+      } else {
+        amounts.push(Math.floor(Math.random() * 100));
+      }
+    }
+    makeChart(amounts);
+  }
+}
+spawnCharts();
+
+

package/dist/collection/dev/chart.js

@@ -0,0 +1,37 @@
+function changeBkgColor() {
+  function getRandomColor() {
+    return `hsl(${Math.round(Math.random() * 360)}, ${Math.round(Math.random() * 50) + 50}%, ${
+        Math.round(Math.random() * 30) + 50
+      }%)`;
+  }
+  document.querySelector("body").style.backgroundColor = getRandomColor();
+}
+
+function toggleSubinfo() {
+  document
+    .querySelectorAll("wm-chart")
+    .forEach((chart) => (chart.subinfo = chart.subinfo ? "" : "My subinfo text"));
+}
+
+function createDropdownOptions() {
+  const select = document.querySelector("#prog-focus-select");
+  document.querySelectorAll("wm-chart").forEach((c, i) => {
+    const optn = document.createElement("option");
+    optn.textContent = "#" + (i + 1) + " (" + c.chartType + ")";
+    select.appendChild(optn);
+  });
+}
+
+createDropdownOptions();
+
+window.addEventListener("wmChartPopoverButtonTriggered", (e) =>
+  console.log("wmChartPopoverButtonTriggered event", e)
+);
+
+function focusChart(num) {
+  const select = document.getElementById("prog-focus-select");
+  const charts = document.querySelectorAll("wm-chart");
+  charts[select.selectedIndex].focus();
+  console.log(document.activeElement);
+}
+

package/dist/collection/dev/datepicker.js

@@ -0,0 +1,46 @@
+function customizedError() {
+  let dp = document.getElementById("firstDP");
+  if (dp) {
+    if (dp.value.includes("2013")) {
+      dp.errorMessage = "Year cannot be 2013!";
+    } else {
+      dp.errorMessage = "";
+    }
+  }
+}
+customizedError();
+
+document.querySelectorAll("wm-datepicker").forEach((datepicker) => {
+  // this is flexible to test for many types of date formats, but this is typically uniform across datepicker instances
+  const dateFormat = datepicker.getAttribute("date-format");
+  const dateFormatUnit =
+    dateFormat === "mm/dd/yyyy" || dateFormat === null ? "US" : dateFormat === "dd/mm/yyyy" ? "INT" : "ISO";
+
+  datepicker.addEventListener("wmDatepickerInputBlurred", async (ev) => {
+    if (datepicker.value) {
+      const isoDate = await datepicker.reformatDate(dateFormatUnit, "ISO", datepicker.value);
+
+      if (await datepicker.isValidIso(isoDate)) {
+        // if valid date, clean up formatting and set properties
+        const displayDate = await datepicker.reformatDate("ISO", dateFormatUnit, isoDate);
+
+        datepicker.value = displayDate;
+        datepicker.errorMessage = "";
+      } else {
+        // if invalid date, leave value and display error
+        datepicker.errorMessage = `Please enter a valid date in the format ${dateFormat ? dateFormat : "mm/dd/yyyy"}`;
+      }
+    }
+  });
+
+  datepicker.addEventListener("wmDatepickerDateSelected", async (ev) => {
+    datepicker.errorMessage = "";
+    datepicker.value = await datepicker.reformatDate("ISO", dateFormatUnit, ev.detail.date);
+  });
+
+  datepicker.addEventListener("blur", (ev) => {
+    if (datepicker.requiredField && datepicker.value === "") {
+      datepicker.errorMessage = "A date is required";
+    }
+  });
+});

package/dist/collection/dev/file-list.js

@@ -0,0 +1,16 @@
+/* FILE LIST */
+const fileLists = document.querySelectorAll("wm-file-list");
+fileLists &&
+  fileLists.forEach((fileList) => {
+    fileList.addEventListener("wmFileDownload", (ev) => {
+      alert("downloading", ev.target.id);
+    });
+    fileList.addEventListener("wmFilePreview", (ev) => {
+      alert("previewing", ev.target.id);
+    });
+    fileList.addEventListener("wmFileDelete", (ev) => {
+      alert("deleting", ev.target.id);
+    });
+  });
+
+

package/dist/collection/dev/input.js

@@ -0,0 +1,6 @@
+function changeValue() {
+  const values = ["Gomez", "Morticia", "Wednesday", "Pugsley", "Uncle Fester", "Lurch", "Aristotle", "Thing"];
+  const randomValue = () => values[~~(Math.random() * values.length)];
+  document.querySelector("wm-input").setAttribute("value", randomValue());
+}
+

package/dist/collection/dev/modal.js

@@ -0,0 +1,75 @@
+function showModal(id) {
+  const modal = document.getElementById(id);
+  modal.open = true;
+}
+
+function showDialog(id) {
+  const event = new Event("wmShowModal");
+  event.detail = "dialog";
+  window.dispatchEvent(event);
+  const dialog = document.getElementById(id);
+  dialog.open = true;
+}
+
+const modal = document.getElementById("modal");
+const innerModal = document.getElementById("inner-modal");
+const innerDialog = document.getElementById("inner-dialog");
+const nestedModal = document.getElementById("nested-modal");
+
+const modalInput = document.getElementById("modal-input");
+const count = document.getElementById("count");
+const modalFooter = document.getElementById("modal-footer");
+
+modalInput &&
+  modalInput.addEventListener("change", function () {
+    if (modalInput.value !== "") {
+      modalFooter.primaryActionDisabled = false;
+    } else {
+      modalFooter.primaryActionDisabled = true;
+    }
+  });
+
+count &&
+  count.addEventListener("change", (ev) => {
+    modalFooter.setAttribute("info-text", ev.target.value + " things ready to launch");
+  });
+
+const nestingModals = [modal, innerModal, innerDialog, nestedModal];
+
+nestingModals.forEach((modal) => {
+  modal && modal.addEventListener("wmModalPrimaryTriggered", actionTriggered);
+  modal && modal.addEventListener("wmModalSecondaryTriggered", modalDismissed);
+  modal && modal.addEventListener("wmModalCloseTriggered", modalDismissed);
+});
+
+function actionTriggered(element) {
+  modalInput.value = "";
+  console.log("Changes saved");
+  modalFooter.actionDisabled = true;
+  this.open = false;
+}
+
+function modalDismissed(element) {
+  this.open = false;
+}
+
+const dialog = document.getElementById("dialog");
+
+dialog &&
+  dialog.addEventListener("wmModalCloseTriggered", function () {
+    dialog.open = false;
+  });
+
+dialog &&
+  dialog.addEventListener("wmModalSecondaryTriggered", function () {
+    dialog.open = false;
+    alert("Secondary clicked!");
+  });
+
+dialog &&
+  dialog.addEventListener("wmModalPrimaryTriggered", function () {
+    console.log("Deleted");
+    dialog.open = false;
+  });
+
+

package/dist/collection/dev/navigation.js

@@ -0,0 +1,13 @@
+// page is reloaded on click, so we can't setup onclick funcs like we would in real situation.
+// for testing purposes we just set a url param and read that on load
+function setActiveOnLoad() {
+  Array.from(document.querySelectorAll("wm-navigation-item")).map((el, index) => {
+    const urlParams = new URLSearchParams(window.location.search);
+    const indexParam = urlParams.get("item");
+    if (indexParam) {
+      el.active = index == indexParam;
+    }
+  });
+}
+
+setActiveOnLoad();