@watermarkinsights/ripple 5.12.0-11 → 5.12.0-12

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

@@ -1,8 +1,24 @@
 import { h } from "@stencil/core";
-import { debounce } from "../../global/functions";
+import { debounce, intl } from "../../global/functions";
+import { globalMessages } from "../../global/intl";
 export class Pagination {
     constructor() {
         this.totalPages = 0;
+        this.navigationLabel = intl.formatMessage({
+            id: "pagination.navLabel",
+            defaultMessage: "Pagination navigation.",
+            description: "Label for a navigation HTML element within a pagination UI element",
+        });
+        this.nextPageButtonLabel = intl.formatMessage({
+            id: "pagination.nextPageButtonLabel",
+            defaultMessage: "Go to next page",
+            description: "Page refers to a paginated list of items",
+        });
+        this.previousPageButtonLabel = intl.formatMessage({
+            id: "pagination.previousPageButtonLabel",
+            defaultMessage: "Go to previous page",
+            description: "Page refers to a paginated list of items",
+        });
         this.debouncedResize = debounce(() => (this.isLargeSize = this.el.clientWidth > 500), 100);
         this.getMiddlePageNums = () => {
             let coreBtns;
@@ -25,6 +41,33 @@ export class Pagination {
         this.isLargeSize = window.innerWidth > 600;
         this.srAnnouncement = "";
     }
+    pageButtonLabel(pageNum) {
+        return intl.formatMessage({
+            id: "pagination.pageButtonLabel",
+            defaultMessage: `Go to page {pageNum}`,
+            description: "Page refers to a paginated list of items",
+        }, {
+            pageNum: pageNum,
+        });
+    }
+    lastPageButtonLabel(totalPages) {
+        return intl.formatMessage({
+            id: "pagination.lastPageButtonLabel",
+            defaultMessage: `Go to last page, page {totalPages}`,
+            description: "Page refers to a paginated list of items",
+        }, {
+            totalPages: totalPages,
+        });
+    }
+    currentPageAnnouncement(currentPage) {
+        return intl.formatMessage({
+            id: "pagination.currentPageAnnouncement",
+            defaultMessage: "Current page, {currentPage}.",
+            description: "Page refers to a paginated list of items",
+        }, {
+            currentPage: currentPage,
+        });
+    }
     maintainFocusOnNumberChange(el) {
         window.requestAnimationFrame(() => {
             switch (el) {
@@ -73,7 +116,7 @@ export class Pagination {
     updatePageDisplayed(pageNum) {
         this.value = pageNum;
         this.wmPaginationPageClicked.emit();
-        this.srAnnouncement = `Current page, ${this.currentPage}. ${this.getCurrentPagesInView()}`;
+        this.srAnnouncement = `${this.currentPageAnnouncement(this.currentPage)} ${this.getCurrentPagesInView()}`;
     }
     displayShortPagination() {
         let pages = [];
@@ -97,7 +140,7 @@ export class Pagination {
                 this.currentPage = pageNum;
                 this.updatePageDisplayed(pageNum);
                 this.maintainFocusOnNumberChange("page");
-            }, value: pageNum, "aria-label": this.currentPage !== pageNum ? `Go to page ${pageNum}` : "", "aria-current": this.currentPage === pageNum ? "page" : undefined }, pageNum));
+            }, value: pageNum, "aria-label": this.currentPage !== pageNum ? this.pageButtonLabel(pageNum) : "", "aria-current": this.currentPage === pageNum ? "page" : undefined }, pageNum));
     }
     displayEllipsis() {
         return h("span", { class: "ellipsis" }, "...");
@@ -116,42 +159,51 @@ export class Pagination {
         if (end > this.totalItems) {
             end = this.totalItems;
         }
-        return "Viewing " + (begin === end ? `${begin}` : `${begin}–${end} of ${this.totalItems}`);
+        return intl.formatMessage({
+            id: "pagination.pagesInView",
+            defaultMessage: "Viewing {atEnd, select, true {{itemStart}} other {{itemStart}-{itemEnd} of {totalItems}}}",
+            description: "Text indicating the range of items displayed in a list, and the total amount of items the list contains",
+        }, {
+            atEnd: begin === end,
+            itemStart: begin,
+            itemEnd: end,
+            totalItems: this.totalItems,
+        });
     }
     renderLarge() {
         return (h("div", { class: "largescreen" }, h("div", { class: "pageview" }, this.getCurrentPagesInView()), h("div", { class: "pagebtncontainer" }, h("button", { id: "previous", class: "paginationbtn previousbtn", onClick: () => {
                 this.currentPage = this.currentPage - 1;
                 this.updatePageDisplayed(this.currentPage);
                 this.maintainFocusOnNumberChange("previous");
-            }, disabled: this.currentPage === 1, "aria-label": "Go to previous page", "aria-controls": "status" }, "Previous"), this.totalPages < 6 ? this.displayShortPagination() : this.displayLongPagination(), h("button", { id: "next", class: "paginationbtn nextbtn", onClick: () => {
+            }, disabled: this.currentPage === 1, "aria-label": this.previousPageButtonLabel, "aria-controls": "status" }, globalMessages.previous), this.totalPages < 6 ? this.displayShortPagination() : this.displayLongPagination(), h("button", { id: "next", class: "paginationbtn nextbtn", onClick: () => {
                 this.currentPage = this.currentPage + 1;
                 this.updatePageDisplayed(this.currentPage);
                 this.maintainFocusOnNumberChange("next");
-            }, disabled: this.currentPage === this.totalPages, "aria-label": "Go to next page", "aria-controls": "status" }, "Next"))));
+            }, disabled: this.currentPage === this.totalPages, "aria-label": this.nextPageButtonLabel, "aria-controls": "status" }, globalMessages.next))));
     }
     renderSmall() {
         return (h("div", { class: "smallscreen" }, h("div", { class: "pagebtncontainer" }, h("button", { id: "wm-1-arw", class: "paginationbtn", onClick: () => {
                 this.currentPage = 1;
                 this.updatePageDisplayed(1);
                 this.maintainFocusOnNumberChange("prev-arrow");
-            }, value: 1, "aria-current": this.currentPage === 1 ? "page" : undefined, "aria-label": `Go to page 1`, "aria-controls": "status", disabled: this.currentPage === 1 }, h("svg", { width: "16", height: "12", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M7.41 10.59L2.83 6l4.58-4.59L6 0 0 6l6 6zM15.41 10.59L10.83 6l4.58-4.59L14 0 8 6l6 6z" }))), h("button", { id: "previous-arw", class: "paginationbtn previousbtn", onClick: () => {
+            }, value: 1, "aria-current": this.currentPage === 1 ? "page" : undefined, "aria-label": this.pageButtonLabel(1), "aria-controls": "status", disabled: this.currentPage === 1 }, h("svg", { width: "16", height: "12", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M7.41 10.59L2.83 6l4.58-4.59L6 0 0 6l6 6zM15.41 10.59L10.83 6l4.58-4.59L14 0 8 6l6 6z" }))), h("button", { id: "previous-arw", class: "paginationbtn previousbtn", onClick: () => {
                 this.currentPage -= 1;
                 this.updatePageDisplayed(this.currentPage);
                 this.maintainFocusOnNumberChange("prev-arrow");
-            }, disabled: this.currentPage === 1, "aria-label": "Go to previous page" }, h("svg", { width: "8", height: "12", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M7.41 10.59L2.83 6l4.58-4.59L6 0 0 6l6 6z" }))), "Page ", this.currentPage, " of ", this.totalPages, h("button", { id: "next-arw", class: "paginationbtn nextbtn", onClick: () => {
+            }, disabled: this.currentPage === 1, "aria-label": this.previousPageButtonLabel }, h("svg", { width: "8", height: "12", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M7.41 10.59L2.83 6l4.58-4.59L6 0 0 6l6 6z" }))), "Page ", this.currentPage, " of ", this.totalPages, h("button", { id: "next-arw", class: "paginationbtn nextbtn", onClick: () => {
                 this.currentPage += 1;
                 this.updatePageDisplayed(this.currentPage);
                 this.maintainFocusOnNumberChange("next-arrow");
-            }, disabled: this.currentPage === this.totalPages, "aria-label": "Go to next page" }, h("svg", { width: "8", height: "12", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M.59 10.59L5.17 6 .59 1.41 2 0l6 6-6 6z" }))), h("button", { id: `wm-${this.totalPages}-arw`, class: "paginationbtn", onClick: () => {
+            }, disabled: this.currentPage === this.totalPages, "aria-label": this.nextPageButtonLabel }, h("svg", { width: "8", height: "12", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M.59 10.59L5.17 6 .59 1.41 2 0l6 6-6 6z" }))), h("button", { id: `wm-${this.totalPages}-arw`, class: "paginationbtn", onClick: () => {
                 this.currentPage = this.totalPages;
                 this.updatePageDisplayed(this.totalPages);
                 this.maintainFocusOnNumberChange("next-arrow");
-            }, value: this.totalPages, "aria-current": this.currentPage === this.totalPages ? "page" : undefined, "aria-label": `Go to last page, page ${this.totalPages}`, "aria-controls": "status", disabled: this.currentPage === this.totalPages }, h("svg", { width: "17", height: "12", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M.59 10.59L5.17 6 .59 1.41 2 0l6 6-6 6zM9.59 10.59L14.17 6 9.59 1.41 11 0l6 6-6 6z" }))))));
+            }, value: this.totalPages, "aria-current": this.currentPage === this.totalPages ? "page" : undefined, "aria-label": this.lastPageButtonLabel(this.totalPages), "aria-controls": "status", disabled: this.currentPage === this.totalPages }, h("svg", { width: "17", height: "12", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M.59 10.59L5.17 6 .59 1.41 2 0l6 6-6 6zM9.59 10.59L14.17 6 9.59 1.41 11 0l6 6-6 6z" }))))));
     }
     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", { "aria-label": `${this.navigationLabel} ${this.getCurrentPagesInView()}. ${this.currentPageAnnouncement(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))));
     }
     static get is() { return "wm-pagination"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,5 +1,5 @@
 import { h, Host } from "@stencil/core";
-import { generateId, hideTooltip, showTooltip } from "../../global/functions";
+import { generateId, hideTooltip, intl, showTooltip } from "../../global/functions";
 import { globalMessages } from "../../global/intl";
 export class Snackbar {
     constructor() {
@@ -7,6 +7,11 @@ export class Snackbar {
         this.uid = this.el.id ? this.el.id : generateId();
         this.focusOnDismiss = null;
         this.timers = {};
+        this.closeSnackMessage = intl.formatMessage({
+            id: "snackbar.closeNotification",
+            defaultMessage: "Close this notification",
+            description: "Notification refers to a notification UI element that can be dismissed",
+        });
         this.notifications = "[]";
         this.isTabbing = false;
         this.announcement = "";
@@ -145,9 +150,9 @@ export class Snackbar {
         this.announcement = message;
     }
     renderSnackbars() {
-        return this.parsedNotifications.map((notification) => (h("div", { class: "wm-snack-wrapper", key: `snack-${notification.id}` }, h("div", { id: `snack-${notification.id}`, class: "wm-snackbar active neutral" }, h("div", { class: "sr-only", tabindex: notification.link ? 0 : -1, onFocus: () => notification.link && this.snackDismissed(notification) }), h("div", { class: "content-wrapper" }, h("div", { class: "msg-wrapper" }, h("span", { class: "msg" }, notification.message), notification.link && (h("a", { id: `action-${notification.id}`, class: `link ${notification.newWindow ? "new-window" : ""}`, "aria-label": `Click to ${notification.link}...${notification.newWindow ? " " + globalMessages.newWindow : ""}`, tabindex: 0, onClick: () => {
+        return this.parsedNotifications.map((notification) => (h("div", { class: "wm-snack-wrapper", key: `snack-${notification.id}` }, h("div", { id: `snack-${notification.id}`, class: "wm-snackbar active neutral" }, h("div", { class: "sr-only", tabindex: notification.link ? 0 : -1, onFocus: () => notification.link && this.snackDismissed(notification) }), h("div", { class: "content-wrapper" }, h("div", { class: "msg-wrapper" }, h("span", { class: "msg" }, notification.message), notification.link && (h("a", { id: `action-${notification.id}`, class: `link ${notification.newWindow ? "new-window" : ""}`, "aria-label": `${notification.link}${notification.newWindow ? " " + globalMessages.newWindow : ""}`, tabindex: 0, onClick: () => {
                 this.snackLinkClicked(notification);
-            }, onKeyDown: (ev) => ev.key === "Enter" && this.snackLinkClicked(notification) }, h("span", { "aria-hidden": "true" }, notification.link), notification.newWindow && h("div", { class: "svg-icon svg-open-in-new" })))), 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: "svg-icon svg-close" }))), h("div", { class: "sr-only", tabindex: notification.link ? 0 : -1, onFocus: () => notification.link && this.snackDismissed(notification) })))));
+            }, onKeyDown: (ev) => ev.key === "Enter" && this.snackLinkClicked(notification) }, h("span", { "aria-hidden": "true" }, notification.link), notification.newWindow && h("div", { class: "svg-icon svg-open-in-new" })))), h("button", { id: `close-button-${notification.id}`, "aria-label": this.closeSnackMessage, 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: "svg-icon svg-close" }))), 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: {

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

@@ -1,7 +1,12 @@
 import { forceUpdate, h, Host } from "@stencil/core";
-import { debounce } from "../../../global/functions";
+import { debounce, intl } from "../../../global/functions";
 export class TabList {
     constructor() {
+        this.selectLabel = intl.formatMessage({
+            id: "tab.selectLabel",
+            defaultMessage: "Choose a tab",
+            description: "Tab refers to a tab UI element",
+        });
         this.debouncedSetLayout = debounce(() => {
             if (!this.listWidth) {
                 this.setListWidth();
@@ -135,7 +140,7 @@ export class TabList {
     renderMenuOrTabs() {
         if (this.menuLayout) {
             this.hideItems();
-            return (h("wm-select", { label: "Choose a tab", "label-position": "none" }, this.renderOptions()));
+            return (h("wm-select", { label: this.selectLabel, "label-position": "none" }, this.renderOptions()));
         }
         else {
             this.showItems();

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

@@ -6,25 +6,31 @@ export class TagInput {
         this.addNewHelpText = intl.formatMessage({
             id: "tagInput.addNewHelpText",
             defaultMessage: "Press the Enter or Comma key to add a new tag.",
-            description: "Help text appearing in a dropdown. Use imperative",
+            description: "Instructional text, where tag refers to a tag UI element that can be added to a list. Use imperative",
         });
         this.selectionHelpText = intl.formatMessage({
             id: "tagInput.selectionHelpText",
             defaultMessage: "Search and select a tag.",
-            description: "Help text appearing in a dropdown. Use imperative",
+            description: "Instructional text, where tag refers to a tag UI element that can be added to a list. Use imperative",
         });
         this.maxTagsReachedMessage = intl.formatMessage({
             id: "tagInput.maxTagsReached",
             defaultMessage: "No more tags can be added because the limit has been reached.",
+            description: "Tag refers to a tag UI element that can be added to a list.",
         });
         this.tagAreaInstructions = intl.formatMessage({
             id: "tagInput.tagAreaInstructions",
             defaultMessage: "tag selection. Press Backspace or Delete to remove a tag.",
+            description: "Label for a UI element where a user can select from a list of tags.",
         });
         this.tagsAddedMessage = intl.formatMessage({
             id: "tagInput.tagsAdded",
             defaultMessage: "Tags added",
-            description: "Full message for context: 'Tags added: x/y",
+            description: "Tag refers to a tag UI element that can be added to a list. Full message for context: 'Tags added: x/y",
+        });
+        this.noResultsMessage = intl.formatMessage({
+            id: "tagInput.noResults",
+            defaultMessage: "No results match your search.",
         });
         this.openUp = false;
         this.inModal = false;
@@ -51,6 +57,13 @@ export class TagInput {
         this.focusedTagIndex = undefined;
         this.tagsList = [];
     }
+    addNewTagMessage(newTagName) {
+        return intl.formatMessage({
+            id: "tagInput.addNewTag",
+            defaultMessage: "Add {newTagName}",
+            description: "Button text to add a new tag to a list of tags",
+        }, { newTagName: newTagName });
+    }
     toggleKeyingOn() {
         this.isKeying = true;
     }
@@ -142,13 +155,6 @@ export class TagInput {
     get tagLimitReached() {
         return !!(this.maxTags && this.taggedOptions.length >= this.maxTags);
     }
-    get noResultsMessage() {
-        return intl.formatMessage({
-            id: "tagInput.noResults",
-            defaultMessage: "No results match your search.",
-            description: "Message displayed when a user's search returns empty.",
-        });
-    }
     get inputMinimumWidth() {
         if (this._tagEls) {
             // 150px is the minimum width of the input field, or the length of the placeholder text
@@ -180,28 +186,28 @@ export class TagInput {
         return intl.formatMessage({
             id: "tagInput.tagAdded",
             defaultMessage: "{tagName} added.",
-            description: "A confirmation for adding a tag.",
+            description: "Confirmation for adding a tag UI element to a list of tags.",
         }, { tagName: tag });
     }
     tagRemovedMessage(tag) {
         return intl.formatMessage({
             id: "tagInput.tagRemoved",
             defaultMessage: "{tagName} removed.",
-            description: "A confirmation for removing a tag.",
+            description: "Confirmation for removing a tag UI element from a list of tags.",
         }, { tagName: tag });
     }
     tagAlreadyAddedMessage(tag) {
         return intl.formatMessage({
             id: "tagInput.tagAlreadyAdded",
             defaultMessage: "{tagName} has already been added.",
-            description: "An alert for adding a tag that is already present.",
+            description: "Alert for adding a tag UI element that is already included in the list.",
         }, { tagName: tag });
     }
     tagLockedMessage(tag) {
         return intl.formatMessage({
             id: "tagInput.tagLocked",
             defaultMessage: "{tagName} is locked and cannot be removed.",
-            description: "An alert for when a user tries to remove a tag that is locked.",
+            description: "Alert indicating a tag UI element cannot be removed from its list.",
         }, { tagName: tag });
     }
     isElOrChild(el) {
@@ -779,7 +785,7 @@ export class TagInput {
         const optionAlreadyExists = this.isExistingTag(this.inputEl.value.trim());
         return (this.addNew &&
             hasNonWhiteSpaceCharacters &&
-            !optionAlreadyExists && (h("li", { ref: (el) => (this.addNewButton = el), id: "add-new-btn", class: "add-new-btn", onClick: () => this.addTags(inputValue) }, "Add " + inputValue)));
+            !optionAlreadyExists && (h("li", { ref: (el) => (this.addNewButton = el), id: "add-new-btn", class: "add-new-btn", onClick: () => this.addTags(inputValue) }, this.addNewTagMessage(inputValue))));
     }
     renderTable() {
         return (h("div", { class: "table-wrapper", onScroll: () => this.dismissTooltip() }, h("table", { id: "table", role: "grid", class: `${this.colWidths ? "fixed-widths" : ""}`, "aria-label": this.label, "aria-multiselectable": "true" }, this.renderTableHeaders(), this.filteredOptionEls.length ? (this.filteredOptionEls.map((o) => this.renderTableRow(o))) : (h("div", { class: "no-results" }, this.noResultsMessage)))));
@@ -840,7 +846,7 @@ export class TagInput {
             const classes = {
                 focused: !!this._focusedCell && cellId === this._focusedCell.id,
             };
-            return (h("td", { id: cellId, class: classes, role: "gridcell", "aria-describedby": `${cellId}-description`, "aria-selected": o.selected ? "true" : "false", "aria-readonly": o.locked ? "true" : null, onMouseEnter: (ev) => this.handleCellMouseEnter(ev), onMouseLeave: () => hideTooltip() }, h("div", { class: `cell-content-wrapper ${overflowRule}` }, o.locked && idx == 0 && h("div", { class: "svg-icon svg-locked" }), val), h("div", { class: "description", id: `${cellId}-description` }, o.locked ? "locked" : "")));
+            return (h("td", { id: cellId, class: classes, role: "gridcell", "aria-describedby": `${cellId}-description`, "aria-selected": o.selected ? "true" : "false", "aria-readonly": o.locked ? "true" : null, onMouseEnter: (ev) => this.handleCellMouseEnter(ev), onMouseLeave: () => hideTooltip() }, h("div", { class: `cell-content-wrapper ${overflowRule}` }, o.locked && idx == 0 && h("div", { class: "svg-icon svg-locked" }), val), h("div", { class: "description", id: `${cellId}-description` }, o.locked ? globalMessages.locked : "")));
         });
     }
     renderTableRow(o) {

package/dist/collection/global/intl.js

@@ -19,6 +19,11 @@ export const globalMessages = {
         defaultMessage: "Hide",
         description: "For a button, to hide something",
     }),
+    locked: intl.formatMessage({
+        id: "global.locked",
+        defaultMessage: "locked",
+        description: "For an interactive element, indicating its state cannot be changed",
+    }),
     newWindow: intl.formatMessage({
         id: "global.newWindowLink",
         defaultMessage: "Opens in a new window.",
@@ -159,6 +164,11 @@ export const lineChartMessages = {
         defaultMessage: "No Data",
         description: "Message displayed when a data point has missing data",
     }),
+    highlightQualifier: intl.formatMessage({
+        id: "linechart.highlightQualifier",
+        defaultMessage: "highlighted",
+        description: "Descriptor for highlighted areas of a chart",
+    }),
     // -------------------------------------------------------------------------- //
     //                             Functions                                      //
     // -------------------------------------------------------------------------- //
@@ -169,4 +179,96 @@ export const lineChartMessages = {
     }, {
         time: prevXValue,
     }),
+    getToggleButtonLabel: (itemCount) => intl.formatMessage({
+        id: "linechart.toggleButtonLabel",
+        defaultMessage: "Toggle line visibility, list with {itemCount} items",
+    }, {
+        itemCount: itemCount,
+    }),
+    getToggleButtonState: (isPressed) => intl.formatMessage({
+        id: "linechart.toggleButtonState",
+        defaultMessage: "toggle {isPressed, select, true {pressed} other {}}",
+        description: "Descriptor and state for a toggle button UI element",
+    }, {
+        isPressed: isPressed,
+    }),
+    getLineFocusAnnouncement: (label, lineNumber, lineTotal, lineLength) => intl.formatMessage({
+        id: "linechart.getLineFocusAnnouncement",
+        defaultMessage: `{label}, line {lineNumber} of {lineTotal} with {lineLength} data points`,
+    }, {
+        label: label,
+        lineNumber: lineNumber,
+        lineTotal: lineTotal,
+        lineLength: lineLength,
+    }),
+};
+export const selectMessages = {
+    multiPlaceholder: intl.formatMessage({
+        id: "select.multiPlaceholder",
+        defaultMessage: "Make a selection",
+    }),
+    singlePlaceholder: intl.formatMessage({
+        id: "select.singlePlaceholder",
+        defaultMessage: "Select an Option",
+    }),
+    multiClearSelection: intl.formatMessage({
+        id: "select.multiClearSelection",
+        defaultMessage: "Clear all Selections",
+        description: "Clear as in remove. Use imperative",
+    }),
+    singleClearSelection: intl.formatMessage({
+        id: "select.singleClearSelection",
+        defaultMessage: "Clear Selection",
+        description: "Clear as in remove. Use imperative",
+    }),
+    selectionCleared: intl.formatMessage({
+        id: "select.selectionCleared",
+        defaultMessage: "Selection cleared",
+    }),
+    searchPlaceholder: intl.formatMessage({
+        id: "select.searchPlaceholder",
+        defaultMessage: "Search",
+        description: "Appears in a search field UI element",
+    }),
+    allSelected: intl.formatMessage({
+        id: "select.allSelected",
+        defaultMessage: "All selected",
+        description: "Indicates all possible options have been selected",
+    }),
+    selectAllMessage: intl.formatMessage({
+        id: "select.selectAll",
+        defaultMessage: "Select All",
+    }),
+    deselectAllMessage: intl.formatMessage({
+        id: "select.deselectAll",
+        defaultMessage: "Deselect All",
+    }),
+    allOptionsSelectedMessage: intl.formatMessage({
+        id: "select.allOptionsSelected",
+        defaultMessage: "All options selected",
+    }),
+    allOptionsDeselectedMessage: intl.formatMessage({
+        id: "select.allOptionsDeselected",
+        defaultMessage: "All options deselected",
+    }),
+    noSearchResults: intl.formatMessage({
+        id: "select.noSearchResults",
+        defaultMessage: "No results found. Please try your search again.",
+    }),
+    optgroupSingleSelectionCount: () => intl.formatMessage({
+        id: "select.optgroupSingleSelectionCount",
+        defaultMessage: "Item Selected",
+        description: "Item refers to an option in a list",
+    }),
+    // -------------------------------------------------------------------------- //
+    //                             Functions                                      //
+    // -------------------------------------------------------------------------- //
+    getOptgroupMultipleSelectionCount: (selectionCount) => intl.formatMessage({
+        id: "select.optgroupMultipleSelectionCount",
+        defaultMessage: "{numberSelected} selected",
+    }, { numberSelected: selectionCount }),
+    getSearchResultsFound: (numResults) => intl.formatMessage({
+        id: "select.searchResultsFound",
+        defaultMessage: "{numberResults, plural, one {1 option found} other {# options found}}",
+    }, { numberResults: numResults }),
 };

package/dist/collection/lang/piglatin.js

@@ -83,11 +83,19 @@ function pigLatinize(word) {
   return specialKBefore + word + specialKAfter;
 }
 
+function pigifyIgnoringTags(word) {
+  const tagPattern = /<\/?[^>]+>/g;
+
+  const strippedText = word.replace(tagPattern, "");
+  const pigifiedText = pigLatinize(strippedText);
+  return word.replace(strippedText, pigifiedText);
+}
+
 function translateSentence(string) {
   let words = string.split(" ");
   return words
     .reduce((acc, word) => {
-      return acc + " " + pigLatinize(word);
+      return acc + " " + pigifyIgnoringTags(word);
     }, "")
     .substring(1); // rm leading space
 }

package/dist/esm/{chartFunctions-7a2b7a90.js → chartFunctions-9099c7e9.js}

@@ -1,5 +1,5 @@
 import { h } from './index-558b5a82.js';
-import { i as intl, c as checkForActiveElInShadow, e as safeMultiplyFloat, f as getPosition } from './functions-899cea51.js';
+import { i as intl, c as checkForActiveElInShadow, e as safeMultiplyFloat, f as getPosition } from './functions-00e1916b.js';
 
 const colors = {
     salmon: "#ff5f4e",