@watermarkinsights/ripple 5.10.0-11 → 5.10.0-13

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

@@ -25,7 +25,7 @@ export class ModalPssHeader {
     //   this.headingElement.focus();
     // }
     render() {
-        return (h(Host, null, h("div", { class: "wm-wrapper" }, h("div", null, h("h2", { class: "title", id: `wm-modal-heading-text-${this.uid}` }, this.heading, h("span", { class: "subtitle" }, this.subheading))), h("wm-button", { "button-type": "navigational", icon: "f156", tooltip: globalMessages.close, "tooltip-position": "left", id: `wm-modal-close-${this.uid}`, ref: (el) => (this.closeButtonEl = el), onClick: () => this.emitParentCloseEvent() }))));
+        return (h(Host, { key: '0fb943252c66ba7d36ae9ddbfbbaaf6ac5381268' }, h("div", { key: '21a1033df88e0bd2c453ce655d78bfcacb11df24', class: "wm-wrapper" }, h("div", { key: '05c83acc83fc80cf680056e70a017f701bd81630' }, h("h2", { key: 'a63570d3b1a69c772d459f1fc2e119c9653f0d50', class: "title", id: `wm-modal-heading-text-${this.uid}` }, this.heading, h("span", { key: 'a67adf6281059c46f6204bcb4632f513c145cd97', class: "subtitle" }, this.subheading))), h("wm-button", { key: 'f65fc5042064e47c213fc2367dd4dd45843fbced', "button-type": "navigational", icon: "f156", tooltip: globalMessages.close, "tooltip-position": "left", id: `wm-modal-close-${this.uid}`, ref: (el) => (this.closeButtonEl = el), onClick: () => this.emitParentCloseEvent() }))));
     }
     static get is() { return "wm-modal-pss-header"; }
     static get originalStyleUrls() {

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

@@ -112,9 +112,9 @@ export class ModalPss {
         }
     }
     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: '0b4403670e30715806d555fdd6c18c3492f3d081', 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: '37095949ff1177b04a57121811d2cd7654130022', class: "overlay", ref: (el) => (this.overlayEl = el) }), h("div", { key: '219c0628e92dde70c08e22c8b61b9cfffc34bcb0', 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: 'd535deeb4a29e31c0755a00d3a2e829891a25415', class: `hamburger ${this.open ? "nav-open" : "nav-closed"}` }, h("button", { key: 'b2603341049cabfc2b7c9f5cc359df7bbf206d9e', "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: '1d01739ff2be5c9ad4120b4bdfb603a2413b5357', 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: '92f203aed8e82e5681736df005dd89cecf37baeb', role: "listitem" }, h("a", { key: '5998e08614626a7f7b940cdc42226e2c0a895553', class: `link ${this.active ? "active" : ""}`, href: this.href, onClick: () => this.wmNavigationItemClicked.emit() }, h("div", { key: '9b7b7a575b9508bba755ae62a9f919b4b1c93f4c', class: "icon", "aria-hidden": "true" }, h("slot", { key: '94493be0b9c48e1282878743e99a9ae38f5dfb34' })), h("div", { key: '9e826c3daeba300f62e791546fe03292b7e61ca1', 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: '4ad0cbfdffb5171218e1b09a3a83af4f90912839', role: "navigation", "aria-expanded": this.ariaExpanded, "aria-label": this.mainNavigationMessage }, this.open ? this.renderOverlay() : "", this.isCollapsible && (h("div", { key: '4bf650ddd5be7354c3be9eed4a04138a6cbd076b', class: "trapfocus", tabindex: this.open ? 0 : undefined, onFocus: () => this.focusLastItem() })), h("div", { key: '21a63a121a517601452be1bce149f5d488c23b61', class: "tray" }, h("div", { key: 'c29ea888eb2c3dc72924805da887fd781435006a', class: "toggle-wrapper" }, h("wm-button", { key: '8bb53efa1b73127a54b1e8305e237c0f301b7c48', 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: '43efec2247f9f31b28255d4722521bb8d4427c55', class: "navlist" }, h("slot", { key: '577800ecc50dacf91802566bfe3a0cae9ce01a5b' }))), this.isCollapsible && (h("div", { key: '97b1005fe4795c309cd18a255e575b2218fdfffe', 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: 'cda82c28e335018746ecbee5bc8bc1b71e61a598', "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: '45bc50a75d0316308b9898a95bbb96fe153fcffe', class: `navoption ${selectedClass} ${focusedClass}` }, h("slot", { key: '7a9db30be9b3ccea16ab5592915463a8ed49a32c' })));
     }
     static get is() { return "priv-navigator-item"; }
     static get encapsulation() { return "shadow"; }
@@ -100,7 +100,7 @@ export class PrivNavigatorItem {
                     "text": ""
                 },
                 "complexType": {
-                    "original": "{\n    navItem: HTMLPrivNavigatorItemElement;\n    key: string;\n  }",
+                    "original": "{\r\n    navItem: HTMLPrivNavigatorItemElement;\r\n    key: string;\r\n  }",
                     "resolved": "{ navItem: HTMLPrivNavigatorItemElement; key: string; }",
                     "references": {
                         "HTMLPrivNavigatorItemElement": {

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: '480072658590ef2679f4fc92f08c5f68a8e700b3', "aria-label": `Pagination Navigation. ${this.getCurrentPagesInView()}. Current page, ${this.currentPage}.` }, this.isLargeSize ? this.renderLarge() : this.renderSmall(), h("div", { key: '7c8dd7e30d6b4d4ea1ff3675a19deb5dc019b7a5', 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: 'd5a43f8f31d5905f64db7ab92465bd79a38fac2a' }, h("div", { key: 'a775c1f1d3c0fec2661b74d82eb32f9919e1d8c8', id: "wm-search-wrapper", class: `wm-search-wrapper ${this.searchType}` }, h("input", { key: '8102a634e8063cd736acd7d821f5807270b92cd3', 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: '60a6363bc26e1f3f029aa37ebd84034ba42d2045', class: "mdi search-icon" }, String.fromCodePoint(parseInt(`0xf349`))), this.searchType === "find" && this.renderResultsAndBrowseButtons(), h("div", { key: '8c8608879655285e7c99246f38f08a7c974c47d6', 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: 'dbcda39e1aca0ea8d69ef62a73920b2dddc1021b' }, h("div", { key: '1c2d2ef390bf95546dd14ff3156b913e0a0600d0', 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: 'e8fd9b90fc6959f6395b93cfaf9a73163f19774f', 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: '83d102ead6be366a5df7db1b09676663d10223e2', role: "presentation" }, h("li", { key: '5dcaaa390f1b89053846e8f04f2d39fe7aea3ef1', class: "tab-item", role: "presentation" }, h("a", { key: '3fd649665a1e2c21bd9976391f00e720bf80143b', 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: '0c445bd57df211dda6d8bdbb14f6ad9d9a93562c' })))));
     }
     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: 'da8982b1541bc45f8ef76f4815984edd8f19c9c5', 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: 'd1c7bf358d9184f22e47b718a69fa1ec7a052e22', 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: '51341c91480a0bd8775351040958472ca3b8e6f4', class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: 'd5093793857d3acaa0804a04ad4700fbf7f7fb86', class: "label-wrapper" }, h("label", { key: 'c93f0345c518adb313f8f5327059075023184c56', class: "label", htmlFor: "input" }, this.label, this.requiredField && (h("span", { key: '9f869a28e6527a81de52187dc8c08c27dba9963b', class: "required", "aria-hidden": "true" }, "*")))), h("div", { key: '181fb132ea36b1d4110350d33c4a2f4d05af068c', class: `field-wrapper ${this.el.shadowRoot.activeElement === this.inputEl ? "focused" : ""} ${this.errorMessage ? "invalid" : ""}`, ref: (el) => (this.fieldWrapperEl = el) }, h("div", { key: '77467753c43ff806af4ac24471fafe4f7eef8e9d', class: "upper-row" }, h("div", { key: '59f80d6730140201dc2f3e9d4f314536fa63cd1e', class: `tags-and-input-wrapper ${this.inModal ? "in-modal" : ""}` }, h("ul", { key: 'ee08bc08d3758af611737d1a161d7966d10c5dae', 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: '6b5e4f09d0b3de33a0c049cc0f1331c0d3c2a680', 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: '5fec93cbea741cab80bdad46097f3b2ed7538d8d', class: "character-count" }, this.charCount, "/", this.characterLimit))), this.renderTagCounter(), this.isDropdown && this.renderDropdown()), this.info && (h("div", { key: 'cc343e8be2c9ad89b7187b4fef79f18c6ac30cda', id: "info", class: "info-text" }, this.info)), h("div", { key: '0079bb76abad9795adf09ca24d5a51e001506ea1', id: "error" }, this.errorMessage), h("div", { key: 'a1d74cef536f2431ef9c3e3c1ae127f6b45faf23', 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: 'da640972074f4fc3559d5f96d38b67ca6e318344', class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: 'e94d0f36b0b3227b373ed28249836de792c1eab6', class: "label-wrapper" }, h("label", { key: 'cb23b31a548b758fedf30d48921ea5a9dc6d448a', htmlFor: "inputfield", class: "label" }, this.label, this.characterLimit && (h("span", { key: '7ff30e1c193960fda58d12d7dd86d1d24c410a29', class: "sr-only" }, " ", globalMessages.getCharacterLimit(this.characterLimit))), this.requiredField && (h("span", { key: '497e378c7f6276a8bf19055385caac60689bc0d7', class: "required", "aria-hidden": "true" }, "*")))), h("div", { key: '9a8ff59bb09e83999547ed1f4f2206eef4050a05', class: "inner-wrapper" }, h("div", { key: '6359e4f7919a6414b49d146b98cedc5bcdc44e4d', class: `inputfield-wrapper ${this.errorMessage ? "invalid" : ""}`, style: this.inputWidth ? { width: this.inputWidth } : {} }, h("textarea", { key: '411f5b3abbd1a0dcde085b5b18b0738ea7f0929f', 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: 'aa2ce03ed1a2ff9731b898c7bc1e71741f3bd780', id: "info", class: "info" }, this.info)), h("div", { key: 'd90b9eca7192178d8267ddaa6ff4d7879d15f349', id: "error", class: "error-message" }, this.errorMessage), h("div", { key: 'f226ad7a61e0f7cfef69f98bcc1b03ee75fa06c8', 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: '11b0fa37194a8dca577356f3e72ec3fc6f0de547', onBlur: () => this.close(false) }, h("div", { key: 'c85ae469c1b7fe7c3ff468b324a6c3d1a00a4e7d', class: `wrapper label-${this.labelPosition} ${!!this.errorMessage ? "invalid" : ""}`, ref: (t) => (this.tpWrapper = t) }, h("div", { key: '3de175cb20e3c901d31a326509e5d274777477d7', class: "label-wrapper" }, this.labelPosition !== "none" && (h("label", { key: '7c91c9e9ec8bc451bf532299ddd684adb7f72d72', id: "label", class: "label", htmlFor: "time-input" }, this.label, this.requiredField && (h("span", { key: '62f5a8c7da6adf689ebb82f018377f1028c32655', class: "required", "aria-hidden": "true" }, "*"))))), h("div", { key: 'bba20dccd397fa27041e75408f8729009ccac1e3' }, h("div", { key: '1f6817a1824d28853e18318510cbf1ba728461dc', class: "inner-wrapper" }, h("input", { key: '61a50f796ac97435ed47f1d0aeca0d21dc524cf5', 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: 'eae83dd641e52e2cc830d64d80e97a152702bb23', 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: '6d366b29839c557e11bbb0d1d8a342d7137fe833', class: "clock" })), h("ul", { key: '87ba66e6e7e04d84b9acdf078cdd5823c974b813', 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: '16cbeeb38724745408322a1beb4ea24887111671', id: "error", class: "error" }, this.errorMessage)), h("div", { key: '845915faa2094776443e6f5930f910a29689d0b1', 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: 'b8b9f19c7c86b2bd241eb38720dc35d556f12d19', class: `size-${this.targetSize}` }, h("button", { key: 'cc509ec78b94f3a9d1652283a6251d312074e9f7', 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: '0a76a514a36d6191ba5155a1edf612472921f4b1', ref: (el) => (this.toggletipEl = el), class: `toggletip ${this.isOpen ? "" : "hidden"} ${this.tooltipPosition}` }, this.tooltip), h("div", { key: '326b3966acf74bcced38af38c9f74bfa78753b4e', 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.css

@@ -692,7 +692,7 @@
 :host {
   display: block;
   position: relative;
-  max-width: 1140px;
+  max-inline-size: min(1140px, 100%);
 }
 :host[dir=RTL] .mdi {
   margin-left: 0.3125rem;

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

@@ -206,9 +206,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: '46d82b5386359d17221f7b7376dbbafcdd245543' }, this.label && this.renderLabel(), this.renderHeader(), this.renderListContainer(), h("div", { key: 'b7f938f7da392db21554228ab4f104a2116ecb44', 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: '1b0a6f5340262caed883ac70a38f76e80f6c0d5c', 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/lang/missing.js

@@ -1,43 +1,43 @@
-/* This script is useful when we translate internally, so we know which keys to translate.
- * Currently Martin Maugeais translates to French and Kristian Manrique to Spanish.
- * This script should be run with `npm run missing`. It may fail otherwise, as fs paths are relative to project root.
- */
-
-const fs = require("fs");
-const en = require("./en.json");
-const fr = require("./fr.json");
-const es = require("./es.json");
-
-const keys = Object.keys(en);
-
-let missingFR = {};
-let missingES = {};
-
-keys.map((key) => {
-  if (!fr[key]) {
-    missingFR[key] = en[key];
-  }
-
-  if (!es[key]) {
-    missingES[key] = en[key];
-  }
-});
-
-const dataFR = JSON.stringify(missingFR, null, 2);
-const dataES = JSON.stringify(missingES, null, 2);
-
-const totalMissingFR = Object.entries(missingFR).length;
-if (totalMissingFR > 0) {
-  fs.writeFile("src/lang/missingTranslationsFR.json", dataFR, (err) => {
-    !!err && console.log(err);
-  });
-  console.log(`${totalMissingFR} french translations missing. See src/lang/missingTranslationsFR.json`);
-}
-
-const totalMissingES = Object.entries(missingES).length;
-if (totalMissingES > 0) {
-  fs.writeFile("src/lang/missingTranslationsES.json", dataES, (err) => {
-    !!err && console.log(err);
-  });
-  console.log(`${totalMissingES} spanish translations missing. See src/lang/missingTranslationsES.json`);
-}
+/* This script is useful when we translate internally, so we know which keys to translate.
+ * Currently Martin Maugeais translates to French and Kristian Manrique to Spanish.
+ * This script should be run with `npm run missing`. It may fail otherwise, as fs paths are relative to project root.
+ */
+
+const fs = require("fs");
+const en = require("./en.json");
+const fr = require("./fr.json");
+const es = require("./es.json");
+
+const keys = Object.keys(en);
+
+let missingFR = {};
+let missingES = {};
+
+keys.map((key) => {
+  if (!fr[key]) {
+    missingFR[key] = en[key];
+  }
+
+  if (!es[key]) {
+    missingES[key] = en[key];
+  }
+});
+
+const dataFR = JSON.stringify(missingFR, null, 2);
+const dataES = JSON.stringify(missingES, null, 2);
+
+const totalMissingFR = Object.entries(missingFR).length;
+if (totalMissingFR > 0) {
+  fs.writeFile("src/lang/missingTranslationsFR.json", dataFR, (err) => {
+    !!err && console.log(err);
+  });
+  console.log(`${totalMissingFR} french translations missing. See src/lang/missingTranslationsFR.json`);
+}
+
+const totalMissingES = Object.entries(missingES).length;
+if (totalMissingES > 0) {
+  fs.writeFile("src/lang/missingTranslationsES.json", dataES, (err) => {
+    !!err && console.log(err);
+  });
+  console.log(`${totalMissingES} spanish translations missing. See src/lang/missingTranslationsES.json`);
+}

package/dist/collection/lang/piglatin.js

@@ -1,93 +1,93 @@
-const fs = require("fs");
-const en = require("./en.json");
-
-const pig = {};
-Object.keys(en).map((k) => {
-  let string = en[k].defaultMessage;
-  const interpStart = string.indexOf("{");
-  const interpEnd = string.lastIndexOf("}") + 1;
-
-  // if there is an interpolation pattern
-  if (interpStart >= 0 && interpEnd > 2) {
-    let translInterp = translateSentence(string.slice(0, interpStart));
-
-    const interp = string.slice(interpStart, interpEnd);
-    // what's inside the braces shouldn't be translated
-    // unless it's in nested translated, and so on
-    // we can set flags to cut the string into pieces
-    // which should or should not be translated
-    const flags = [];
-    for (x = 0; x < interp.length; x++) {
-      if (interp[x] == "{") {
-        flags.push(x);
-      } else if (interp[x] == "}") {
-        flags.push(x);
-      }
-    }
-
-    splits = flags.map((_, i) => {
-      if (i < flags.length) return interp.slice(flags[i], flags[i + 1]);
-    });
-
-    splits.map((split, i) => {
-      translInterp += i % 2 ? translateSentence(split) : split; // only translate even ones (the odd ones are params)
-    });
-
-    translInterp += translateSentence(string.slice(interpEnd, string.length));
-
-    const dm = { defaultMessage: translInterp };
-    pig[k] = dm;
-  } else {
-    const dm = { defaultMessage: translateSentence(string) };
-    pig[k] = dm;
-  }
-});
-data = JSON.stringify(pig, null, 2);
-
-fs.writeFile("src/lang/pig.json", data, (err) => {
-  !!err && console.log(err);
-});
-
-function pigLatinize(word) {
-  const isVowel = (char) => ["a", "e", "i", "o", "u"].includes(char.toLowerCase());
-  const isLetter = (char) => RegExp(/^\p{L}/, "u").test(char);
-
-  const firstLetter = Array.from(word).reduce((l, char, i) => (isLetter(char) && l < 0 ? i : l), -1);
-
-  const lastLetter = Array.from(word).reduce((l, char, i) => (isLetter(char) ? i : l), -1);
-
-  if (firstLetter == -1 && lastLetter == -1) return word; // only special chars, don't translate
-
-  const specialKBefore = word.slice(0, firstLetter) || "";
-  const specialKAfter = word.slice(lastLetter + 1, word.length + 1) || "";
-  word = word.slice(firstLetter, lastLetter + 1) || "";
-
-  if (word) {
-    if (isVowel(word[0])) {
-      word += "yay";
-    } else {
-      const firstVowel = Array.from(word).reduce((firstV, char, i) => {
-        return isVowel(char) && firstV < 0 ? i : firstV;
-      }, -1);
-      if (word[0] == word[0].toUpperCase()) {
-        word =
-          word.substring(firstVowel, firstVowel + 1).toUpperCase() +
-          word.substring(firstVowel + 1, word.length) +
-          word.substring(0, firstVowel).toLowerCase() +
-          "ay";
-      } else {
-        word = word.substring(firstVowel, word.length) + word.substring(0, firstVowel) + "ay";
-      }
-    }
-  }
-  return specialKBefore + word + specialKAfter;
-}
-
-function translateSentence(string) {
-  let words = string.split(" ");
-  return words
-    .reduce((acc, word) => {
-      return acc + " " + pigLatinize(word);
-    }, "")
-    .substring(1); // rm leading space
-}
+const fs = require("fs");
+const en = require("./en.json");
+
+const pig = {};
+Object.keys(en).map((k) => {
+  let string = en[k].defaultMessage;
+  const interpStart = string.indexOf("{");
+  const interpEnd = string.lastIndexOf("}") + 1;
+
+  // if there is an interpolation pattern
+  if (interpStart >= 0 && interpEnd > 2) {
+    let translInterp = translateSentence(string.slice(0, interpStart));
+
+    const interp = string.slice(interpStart, interpEnd);
+    // what's inside the braces shouldn't be translated
+    // unless it's in nested translated, and so on
+    // we can set flags to cut the string into pieces
+    // which should or should not be translated
+    const flags = [];
+    for (x = 0; x < interp.length; x++) {
+      if (interp[x] == "{") {
+        flags.push(x);
+      } else if (interp[x] == "}") {
+        flags.push(x);
+      }
+    }
+
+    splits = flags.map((_, i) => {
+      if (i < flags.length) return interp.slice(flags[i], flags[i + 1]);
+    });
+
+    splits.map((split, i) => {
+      translInterp += i % 2 ? translateSentence(split) : split; // only translate even ones (the odd ones are params)
+    });
+
+    translInterp += translateSentence(string.slice(interpEnd, string.length));
+
+    const dm = { defaultMessage: translInterp };
+    pig[k] = dm;
+  } else {
+    const dm = { defaultMessage: translateSentence(string) };
+    pig[k] = dm;
+  }
+});
+data = JSON.stringify(pig, null, 2);
+
+fs.writeFile("src/lang/pig.json", data, (err) => {
+  !!err && console.log(err);
+});
+
+function pigLatinize(word) {
+  const isVowel = (char) => ["a", "e", "i", "o", "u"].includes(char.toLowerCase());
+  const isLetter = (char) => RegExp(/^\p{L}/, "u").test(char);
+
+  const firstLetter = Array.from(word).reduce((l, char, i) => (isLetter(char) && l < 0 ? i : l), -1);
+
+  const lastLetter = Array.from(word).reduce((l, char, i) => (isLetter(char) ? i : l), -1);
+
+  if (firstLetter == -1 && lastLetter == -1) return word; // only special chars, don't translate
+
+  const specialKBefore = word.slice(0, firstLetter) || "";
+  const specialKAfter = word.slice(lastLetter + 1, word.length + 1) || "";
+  word = word.slice(firstLetter, lastLetter + 1) || "";
+
+  if (word) {
+    if (isVowel(word[0])) {
+      word += "yay";
+    } else {
+      const firstVowel = Array.from(word).reduce((firstV, char, i) => {
+        return isVowel(char) && firstV < 0 ? i : firstV;
+      }, -1);
+      if (word[0] == word[0].toUpperCase()) {
+        word =
+          word.substring(firstVowel, firstVowel + 1).toUpperCase() +
+          word.substring(firstVowel + 1, word.length) +
+          word.substring(0, firstVowel).toLowerCase() +
+          "ay";
+      } else {
+        word = word.substring(firstVowel, word.length) + word.substring(0, firstVowel) + "ay";
+      }
+    }
+  }
+  return specialKBefore + word + specialKAfter;
+}
+
+function translateSentence(string) {
+  let words = string.split(" ");
+  return words
+    .reduce((acc, word) => {
+      return acc + " " + pigLatinize(word);
+    }, "")
+    .substring(1); // rm leading space
+}