@watermarkinsights/ripple 5.7.0-10 → 5.7.0-12

package/dist/collection/components/wm-modal-pss/wm-modal-pss.css

@@ -34,8 +34,17 @@ wm-modal-pss {
   --wmcolor-modal-border: var(--wmcolor-border);
   --wmcolor-modal-heading: var(--wmcolor-text);
   --wmcolor-modal-overlay: var(--wmcolor-overlay);
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
   display: flex;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
   justify-content: center;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+  -ms-flex-align: center;
   align-items: center;
   flex-direction: column;
   position: fixed;
@@ -46,6 +55,8 @@ wm-modal-pss {
   width: 80vw;
   max-width: 750px;
   max-height: 80vh;
+  -webkit-box-shadow: 0px 11px 15px 0px rgba(0, 0, 0, 0.2), 0px 9px 46px 8px rgba(0, 0, 0, 0.12), 0px 24px 38px 3px rgba(0, 0, 0, 0.14);
+  -moz-box-shadow: 0px 11px 15px 0px rgba(0, 0, 0, 0.2), 0px 9px 46px 8px rgba(0, 0, 0, 0.12), 0px 24px 38px 3px rgba(0, 0, 0, 0.14);
   box-shadow: 0px 11px 15px 0px rgba(0, 0, 0, 0.2), 0px 9px 46px 8px rgba(0, 0, 0, 0.12), 0px 24px 38px 3px rgba(0, 0, 0, 0.14);
 }
 wm-modal-pss * {
@@ -61,7 +72,7 @@ wm-modal-pss > *:focus {
 }
 wm-modal-pss wm-modal-pss-header,
 wm-modal-pss wm-modal-pss-footer {
-  padding: 20px 30px;
+  padding: 1.25rem 1.875rem;
 }
 wm-modal-pss wm-modal-pss-header {
   z-index: 2003;
@@ -96,7 +107,7 @@ wm-modal-pss.wm-modal wm-modal-pss-footer {
   }
 }
 wm-modal-pss.wm-dialog > :not(wm-modal-pss-header):not(wm-modal-pss-footer) {
-  padding: 0 30px 20px 30px;
+  padding: 0 1.875rem 1.25rem 1.875rem;
   font-size: 0.875rem;
   border: none;
 }
@@ -112,6 +123,9 @@ wm-modal-pss .overlay {
   right: 1;
   transform: translate(0%, 0%);
   background-color: var(--wmcolor-modal-overlay);
+  -ms-transition: opacity 0.5s ease-out;
+  -webkit-transition: opacity 0.5s ease-out;
+  -moz-transition: opacity 0.5s ease-out;
   transition: opacity 0.5s ease-out;
   z-index: 2000;
 }

package/dist/collection/components/wm-modal-pss/wm-modal-pss.js

@@ -1,5 +1,7 @@
 import { h, Host } from "@stencil/core";
-export class Modal {
+import { checkForActiveElInShadow } from "../../global/functions";
+import { generateId } from "../../global/functions";
+export class ModalPss {
     constructor() {
         this.bodyFocusListener = () => this.redirectFocusFromBody();
         this.open = false;
@@ -24,6 +26,12 @@ export class Modal {
     toggleModal() {
         this.open ? this.showModal() : this.hideModal();
     }
+    //The below not implemented in light of the fact that the app does often need to keep track of the modal's state itself so that it can update the data displayed in the body:
+    //App can also open modal by emitting wmShowModal event. Event needs to include the modal's unique id as the event detail, or else all modals on the page will open when wmShowModal event is dispatched.
+    // @Listen("wmShowModal", { target: "window" })
+    // doesEventMatchId(ev: CustomEvent) {
+    //   ev.detail === this.uid && this.showModal();
+    // }
     handleClick(ev) {
         this.open && ev.target === this.overlayEl && this.focusOnOpenEl.focus();
     }
@@ -58,14 +66,13 @@ export class Modal {
     componentWillLoad() {
         if (this.elementToFocus === "primary" || this.elementToFocus === "secondary") {
             if (!this.el.id) {
-                console.error("For accessibility purposes, you need to set the modal content wrapper's id to 'content-[id of wm-modal-pss]'.");
+                console.error("You are telling the modal to focus an element in the footer when it opens. That's fine! But when you do that, you also need to give the wm-modal-wrapper an ID and set the ID of the modal body to 'content-[id of wm-modal-wrapper]. This is for accessibility purposes.");
             }
         }
         this.el.focus = () => {
             this.focusOnOpenEl.focus();
         };
-        const generatedId = "wmcl-" + Math.random().toString(36).substr(2, 10);
-        this.uid = this.el.id ? this.el.id : generatedId;
+        this.uid = this.el.id ? this.el.id : generateId();
     }
     componentDidLoad() {
         if (this.open) {
@@ -96,13 +103,7 @@ export class Modal {
             this.focusOnCloseEl = elToFocus.parentElement;
         }
         else {
-            let el;
-            while (elToFocus && elToFocus.shadowRoot) {
-                el = elToFocus.shadowRoot.activeElement;
-            }
-            if (el) {
-                this.focusOnCloseEl = el;
-            }
+            this.focusOnCloseEl = checkForActiveElInShadow(elToFocus);
         }
     }
     redirectFocusFromBody() {
@@ -111,9 +112,9 @@ export class Modal {
         }
     }
     render() {
-        return (h(Host, { class: `${this.open ? "" : "hide "}${"wm-" + this.modalType}`, role: "dialog", "aria-describedby": `wm-modal-heading-text-${this.uid}`, "aria-modal": "true", tabindex: this.open ? 0 : null, onFocus: () => {
+        return (h(Host, { key: '95cba8f98f359a1bf9fa8ffa1f1b808e4057fd13', class: `${this.open ? "" : "hide "}${"wm-" + this.modalType}`, role: "dialog", "aria-describedby": `wm-modal-heading-text-${this.uid}`, "aria-modal": "true", tabindex: this.open ? 0 : null, onFocus: () => {
                 this.focusLastElement.emit();
-            } }, h("div", { class: "overlay", ref: (el) => (this.overlayEl = el) }), h("div", { class: "sr-only", tabIndex: 0, onFocus: () => {
+            } }, h("div", { key: '7ff7bb8191f9ce9c20a40e43ea302ed79f485369', class: "overlay", ref: (el) => (this.overlayEl = el) }), h("div", { key: 'b646215d4ce43b477784d5c4285fcae624fb092b', class: "sr-only", tabIndex: 0, onFocus: () => {
                 this.focusFirstElement.emit();
             } })));
     }

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: 'cec5d76701a7994ed1c399036b9f712e2243aba6', class: `hamburger ${this.open ? "nav-open" : "nav-closed"}` }, h("button", { key: '361bddc1e8c6640919e01718ea831d1f66b6021f', "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: '74e61eef336884c3dd646f431e95db47739c5841', 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: 'fa1c38ce497c4332f878c383bfcce4b2ee33bcef', role: "listitem" }, h("a", { key: 'f285af446d3a06ffb22c618b5f95fb0b1419b4ec', class: `link ${this.active ? "active" : ""}`, href: this.href, onClick: () => this.wmNavigationItemClicked.emit() }, h("div", { key: '688d0f2d35cbc14e7a6402ddf4cbd466ba19eecb', class: "icon", "aria-hidden": "true" }, h("slot", { key: '356b2720b53c0e313ebebae77b5851d78f9f9aff' })), h("div", { key: '9fd50c3c4e41d8c1c034a57bcb394cdf5bbd4557', 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: 'f40466fff74f6a00b404951bb266a628c8b32c07', role: "navigation", "aria-expanded": this.ariaExpanded, "aria-label": this.mainNavigationMessage }, this.open ? this.renderOverlay() : "", this.isCollapsible && (h("div", { key: 'aac52d10b84470dc6b30f4ee9bf445460a80b16f', class: "trapfocus", tabindex: this.open ? 0 : undefined, onFocus: () => this.focusLastItem() })), h("div", { key: '167657cf8f574fe2900572edeaa996ab6545c17e', class: "tray" }, h("div", { key: '66648b75a130b603a00043fa0f58d64afe3b2601', class: "toggle-wrapper" }, h("wm-button", { key: '3c90d7f7f7940e3fbdc529fe6702a4e00f454e84', 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: 'de126d3aa8a9eba6eba34e4c2c96d881784a6fa0', class: "navlist" }, h("slot", { key: '3303c9d08f0f99d30709aa55e1d2509eb3eef559' }))), this.isCollapsible && (h("div", { key: 'deea47af7ea71f340d6254400c01efa1a9cfeaee', 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: '73893a867aa202e3e18017d9d22b533ab1d445fb', "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: '3cdcf5b5342bc9cdb88bc84dc370e1f0c2b71e24', class: `navoption ${selectedClass} ${focusedClass}` }, h("slot", { key: '3e47c1cc1bb5acbc79232b14e94eeafc59ef7bc3' })));
     }
     static get is() { return "priv-navigator-item"; }
     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: '63c466506ec66587e30679201369b272078e75c5', "aria-label": `Pagination Navigation. ${this.getCurrentPagesInView()}. Current page, ${this.currentPage}.` }, this.isLargeSize ? this.renderLarge() : this.renderSmall(), h("div", { key: '949e8b5ab870166b1aed5681a6169c297f1602d8', 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: '76bb66886291c31583f250fd0be96af46a6df62d' }, h("div", { key: '5c8977d2729452a32fedbafc0cc99f9cbd855da5', id: "wm-search-wrapper", class: `wm-search-wrapper ${this.searchType}` }, h("input", { key: '33f513d7b915802db202b10f5ee44254148ddb20', 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: 'd7344cf2e71c8550830e2a189d71958eec7e377c', class: "mdi search-icon" }, String.fromCodePoint(parseInt(`0xf349`))), this.searchType === "find" && this.renderResultsAndBrowseButtons(), h("div", { key: 'ec8c38009642cc41db096e24f28250527c032eec', 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-snackbar/wm-snackbar.js

@@ -150,11 +150,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(Host, null, h("div", { ref: (el) => (this.snackAreaEl = el), class: {
+        return (h(Host, { key: 'a70ff73f29da54fb2ac7053a703376487a5c63c7' }, h("div", { key: '1d8af83ac7850425f7c055e0febdf48ad9c06147', ref: (el) => (this.snackAreaEl = el), class: {
                 "list-wrapper": true,
                 "user-is-tabbing": this.isTabbing,
                 empty: this.parsedNotifications.length == 0,
-            } }, this.renderSnackbars()), 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: '3a5581614b29f465c468ffb0410d9674e9bd8e77', class: "sr-only", "aria-live": "polite", "aria-atomic": "false", id: `wm-live-region-${this.uid}`, ref: (el) => (this.liveRegionEl = el) }, this.announcement)));
     }
     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: '338aeaac2b375e4d54f91ceaf59fc982bdd8d0c9', role: "presentation" }, h("li", { key: '4fc9b22d082ca8671fbca4fa0aea008b489f4839', class: "tab-item", role: "presentation" }, h("a", { key: '5ebadc382cb413b64d7f0a28ac778d4762babbb8', 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: 'bd3afb70af3a6c7cbdbc068b1e0426064539bd21' })))));
     }
     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: 'e3a4554e5cc7cba0b7adfcdb02e0c3516b7aa4c4', 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: '226ef677c8182f0ebdc250cc6f65f00de0a957c5', 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: '6058b8a56991ad05ba4d76a5104f633dce54cf3c', class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: '72df6b2d37ee02e3d360f2e1fed73cb900ee7729', class: "label-wrapper" }, h("label", { key: '7489177598b1ef1a430534885d9d7f1980e0a8a4', class: "label", htmlFor: "input" }, this.label, this.requiredField && (h("span", { key: '50a038aa296251c6889c01606029f920bc71f67c', class: "required", "aria-hidden": "true" }, "*")))), h("div", { key: 'd0f5891cef75462680b996d89dee75e287c2ad3a', class: `field-wrapper ${this.el.shadowRoot.activeElement === this.inputEl ? "focused" : ""} ${this.errorMessage ? "invalid" : ""}`, ref: (el) => (this.fieldWrapperEl = el) }, h("div", { key: '785f948e8cb93584cbed16b68c1d2ad806f33d28', class: "upper-row" }, h("div", { key: 'b9d48f1f7f21944eb613c07713de588e41821cca', class: `tags-and-input-wrapper ${this.inModal ? "in-modal" : ""}` }, h("ul", { key: 'b03ebefd19f78a3c36ca5206ac7a34cc305945d5', 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: 'b3a7284087955857816e4fbafefaf0dc3bb8a651', 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: 'e049fab182d913b956e6d125a1d7f624c3234cd3', class: "character-count" }, this.charCount, "/", this.characterLimit))), this.renderTagCounter(), this.isDropdown && this.renderDropdown()), this.info && (h("div", { key: '1162f7e874d40ff6f7ffef2f5abb6a3a8352563d', id: "info", class: "info-text" }, this.info)), h("div", { key: '512f2df413919649bbd4836cb4caa002cd975c90', id: "error" }, this.errorMessage), h("div", { key: '5c364c12b80d6e917acbf56f8659b32908b2b3ea', 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: 'b11ff0259cd7c4e2a5d2dd21528b3da7d6d47728', class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: 'de349496453b9cbb002c8935b67eb0aa97302ec2', class: "label-wrapper" }, h("label", { key: '46088245bcf4cb1d03327e797f84086352f32afc', htmlFor: "inputfield", class: "label" }, this.label, this.characterLimit && (h("span", { key: 'ad52c4c2560035673ad2f937104f1582a89ca2b3', class: "sr-only" }, " ", globalMessages.getCharacterLimit(this.characterLimit))), this.requiredField && (h("span", { key: '825895eb97edd8207ca02885b1ecd6f2a96e3222', class: "required", "aria-hidden": "true" }, "*")))), h("div", { key: '4e8b1cd57485457bc85b2f72f77d90d8f1440db0', class: "inner-wrapper" }, h("div", { key: '7b9d4d8bb6759d84c92d13db82635f74e831687d', class: `inputfield-wrapper ${this.errorMessage ? "invalid" : ""}`, style: this.inputWidth ? { width: this.inputWidth } : {} }, h("textarea", { key: 'cccf7d17c7874d7f5ba381b993f182f80844133f', 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: 'f95e4caea4c75c4b4f5b2651698d59cdb52b36d9', id: "info", class: "info" }, this.info)), h("div", { key: 'ab82e8439ea6e306d20a68a8ea5758d887578eaf', id: "error", class: "error-message" }, this.errorMessage), h("div", { key: '2723fe5a5dd340ff42067ebeb69db51f24a29ddd', 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: '89d1f25419ff7fc00f2bb61587f3642229fdc676', onBlur: () => this.close(false) }, h("div", { key: 'f23e818daa1b5c9568562c3a3f9ebade07159c90', class: `wrapper label-${this.labelPosition} ${!!this.errorMessage ? "invalid" : ""}`, ref: (t) => (this.tpWrapper = t) }, h("div", { key: '05196632217fe821f336f36cb5c3a1a882d6648c', class: "label-wrapper" }, this.labelPosition !== "none" && (h("label", { key: 'f8b1e4d218c3e1a4ec39f8a940e5b705d4d45004', id: "label", class: "label", htmlFor: "time-input" }, this.label, this.requiredField && (h("span", { key: 'bc6fb4479e7dbd8a19a1cd7a2b5167feec97dd42', class: "required", "aria-hidden": "true" }, "*"))))), h("div", { key: '3e1fcdd5e8a26a1ef3cab06740017d13692db47f' }, h("div", { key: '9015f4954369f7d9518e57888d26ab4caa3d976c', class: "inner-wrapper" }, h("input", { key: 'ff083fa436f904fc36a20a6eb4aad5a7883cd2db', 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: '1ba99ff64c13f701984a6e26332d89de5160b8a0', 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: '22dbb195e4854a8b90d5a0dfd4f961918da5e879', class: "clock" })), h("ul", { key: '8a91f59d26722bf3365f505391ce7126bb05ffe1', 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: '65872cffe047c854775349326e393bc720c3e4ca', id: "error", class: "error" }, this.errorMessage)), h("div", { key: '61afdc5c5d7097d558c20b13d71e64507f40e234', 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: '5f0302e10656ceb9a40ac96c3720900fd89ddbfb', class: `size-${this.targetSize}` }, h("button", { key: 'dae548b98a778deb84cf8ae0bed4c0b30687360e', 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: '0cbcdd2c3103c9c4c53b72d160270ef2b3edd853', ref: (el) => (this.toggletipEl = el), class: `toggletip ${this.isOpen ? "" : "hidden"} ${this.tooltipPosition}` }, this.tooltip), h("div", { key: '6033c7693d770c6f5c55fc67c60167ee0b63e704', 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: '8dc6e65405a6fda6c898d89c8db9de62305f9c5b' }, this.label && this.renderLabel(), this.renderHeader(), this.renderListContainer(), h("div", { key: 'cdfb1fbb0bac15b8910ee6b63781cf2c472304cc', 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: '37d81932b7fe8b33bb3b87bd88471035dd25ede6', 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/pss-modal.js

@@ -0,0 +1,8 @@
+setTimeout(() => {
+  const modals = document.querySelectorAll(["wm-modal", "wm-modal-pss"]);
+  modals.forEach((modal) => {
+    modal.addEventListener("wmModalCloseTriggered", (ev) => closeModal(ev));
+    modal.addEventListener("wmModalPrimaryTriggered", (ev) => closeModal(ev));
+    modal.addEventListener("wmModalSecondaryTriggered", (ev) => closeModal(ev));
+  });
+}, 50);

package/dist/collection/dev/scripts.js

@@ -1,18 +1,3 @@
-function openModal() {
-  document.querySelector("wm-modal").open = "true";
-}
-
-function closeModal() {
-  document.querySelector("wm-modal").open = "false";
-}
-
-evNames = ["wmModalCloseTriggered", "wmModalPrimaryTriggered", "wmModalSecondaryTriggered"];
-evNames.forEach((evName) =>
-  document.addEventListener(evName, () => {
-    closeModal();
-  })
-);
-
 const snackbar = document.getElementById("info");
 let notifications = snackbar && JSON.parse(snackbar.notifications || "[]");
 
@@ -50,3 +35,15 @@ function dismissSnack(ev) {
 }
 
 snackbar.addEventListener("wmSnackbarSnackFinished", dismissSnack);
+
+function openModal(id) {
+  console.log("open modal", id);
+  const modal = document.getElementById(id);
+  modal.open = true;
+}
+
+function closeModal(ev) {
+  const modal = ev.target;
+  console.log("close modal", modal);
+  modal.open = false;
+}

package/dist/{cjs/global-d1944ab2.js → esm/app-globals-f82e2e43.js}

@@ -1,6 +1,6 @@
-'use strict';
+import './index-130e07bb.js';
 
-const version = "5.7.0-10";
+const version = "5.7.0-12";
 
 // PRINT RIPPLE VERSION IN CONSOLE
 // test envs return 0 for plugin.length
@@ -83,3 +83,8 @@ tooltipStyles.textContent = `
 document.head.appendChild(tooltipStyles);
 tooltipContainer.appendChild(tooltipEl);
 document.querySelector("body").appendChild(tooltipContainer);
+const globalFn = () => { };
+
+const globalScripts = globalFn;
+
+export { globalScripts as g };

package/dist/esm/{chartFunctions-dfcb1edf.js → chartFunctions-580870de.js}

@@ -1,5 +1,5 @@
-import { h } from './index-558b5a82.js';
-import { i as intl, c as safeMultiplyFloat, e as getPosition, f as checkForActiveElInShadow } from './functions-b791a892.js';
+import { h } from './index-130e07bb.js';
+import { i as intl, c as checkForActiveElInShadow, e as safeMultiplyFloat, f as getPosition } from './functions-f39e6177.js';
 
 const colors = {
     salmon: "#ff5f4e",
@@ -69,7 +69,7 @@ const allChartsDetails = {
     bar5: {
         size: 400,
         colors: [
-            colors.gray,
+            colors.gray, // this is only used if prop notStartedColor is set
             colors.lavender,
             colors.midnight,
             "#0089e4",