@watermarkinsights/ripple 5.11.0-9 → 5.12.0-0

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

@@ -34,7 +34,7 @@ export class NavigationHamburger {
         this.wmNavigationHamburgerClicked.emit();
     }
     render() {
-        return (h(Host, { class: `hamburger ${this.open ? "nav-open" : "nav-closed"}` }, h("button", { "aria-expanded": this.open, "aria-label": this.showNavMessage, onMouseEnter: () => showTooltip("right", this.el, this.showNavMessage), onMouseLeave: () => hideTooltip(), onFocus: () => this.isTabbing && showTooltip("right", this.el, this.showNavMessage), onBlur: () => hideTooltip(), onClick: () => this.handleClick() }, h("span", { class: "svg-icon svg-menu" }))));
+        return (h(Host, { key: '9d77aca16635656920d082498162a927e78680bd', class: `hamburger ${this.open ? "nav-open" : "nav-closed"}` }, h("button", { key: 'd4cf4f5abc0a1065bbf19fceb0b3eab0b51f2e91', "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: 'd9d3bbb877f541f1809df790776f42c8f8ee4390', class: "svg-icon svg-menu" }))));
     }
     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: '9a55adf58c46f162f8a1c8aa2349585353471235', role: "listitem" }, h("a", { key: '629ff3389f4878307d70a6602237cb0e11851430', class: `link ${this.active ? "active" : ""}`, href: this.href, onClick: () => this.wmNavigationItemClicked.emit() }, h("div", { key: '08c82bbb9a9ee82d3c5a152527beb1a45f3bfe37', class: "icon", "aria-hidden": "true" }, h("slot", { key: '1f84ab5e6da8642f8d2c1bfe1d7b1341c25a3bcf' })), h("div", { key: '6ee1fba226110dee9b4194bb6fae93e19e2efc62', 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 ? "#close" : "#menu", "icon-size": "2rem", tooltip: this.open ? globalMessages.close : globalMessages.open, "tooltip-position": "right", tabIndex: this.open ? undefined : -1, onClick: () => {
+        return (h(Host, { key: '07715708e3ce55d682922a541a2eb3ebc344e3f8', role: "navigation", "aria-expanded": this.ariaExpanded, "aria-label": this.mainNavigationMessage }, this.open ? this.renderOverlay() : "", this.isCollapsible && (h("div", { key: 'dc1605e10718db381d62277212075d66c449203a', class: "trapfocus", tabindex: this.open ? 0 : undefined, onFocus: () => this.focusLastItem() })), h("div", { key: '5eac009e3b8ca72758876ba2854f08c0b628272e', class: "tray" }, h("div", { key: 'e55a956593076b1256dc2f9b5afff29bbb6ee02a', class: "toggle-wrapper" }, h("wm-button", { key: '87206deed2d58e192644a29f79b7e43c62cd9527', ref: (el) => (this.toggleEl = el), class: "toggle", "button-type": "navigational", icon: this.open ? "#close" : "#menu", "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: 'd556f415a4e448737cdd4330ee3b491bdb92406d', class: "navlist" }, h("slot", { key: '4afb84723d83cff39fba23769f84cfc03ee0b83d' }))), this.isCollapsible && (h("div", { key: '2b28fde2e59ffe93d48173f30682ace5297b9266', 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: '36fe285b1142a492a6f41a7d4427f62dbd4ca938', "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: 'c0120a6e1efa71fea0ebf431fa5b8db4cd284676', class: `navoption ${selectedClass} ${focusedClass}` }, h("slot", { key: '0a76e5acbd234f0c92983a24324a7e10f53bd893' })));
     }
     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: '4a9b64a4bbfa5da2d26b64c639054985826fc968', "aria-label": `Pagination Navigation. ${this.getCurrentPagesInView()}. Current page, ${this.currentPage}.` }, this.isLargeSize ? this.renderLarge() : this.renderSmall(), h("div", { key: '98de85ef66a0861f2f1997c7881b17f0a50509b9', 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: '1ffec56e18aeda2b15741dd86adb2a0d2d131dfc' }, h("div", { key: '1253a6ac6923653d7bc5daceb3fa83f3eb3f45ea', id: "wm-search-wrapper", class: `wm-search-wrapper ${this.searchType}` }, h("input", { key: '20d3c4520fdf0fc511f7e2b7866e4089a4a58a71', 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: "svg-icon svg-search" }), 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: '410a1c3e881bbdf76f9b8c3a6aaf3064e200c776', class: "svg-icon svg-search" }), this.searchType === "find" && this.renderResultsAndBrowseButtons(), h("div", { key: '51a68b524397adab5278394479a5059708629f2c', 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), 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) })))));
     }
     render() {
-        return (h(Host, null, h("div", { ref: (el) => (this.snackAreaEl = el), class: {
+        return (h(Host, { key: '4a20ad18b5f35266c9bb1b2000c6dd4a56260850' }, h("div", { key: 'c732bd432d88c8522096491c4e28750e18912832', 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: '88d92b97479e3914bd99958c3045e95048e527c2', 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: '03f7157e9d97d75d964bcf74bd3b22a6d4b134f7', role: "presentation" }, h("li", { key: '4c2f0e96555a70677c07e27a93bc8b32da016044', class: "tab-item", role: "presentation" }, h("a", { key: 'f433630cab179818bd2193b2fdac45a794e9f241', 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: 'cbfdd92ef027ae9c1b73ffe9bbce37ab71007521' })))));
     }
     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: '226fe27325450249c54dd968e987b830a6a9b2ef', 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: '0f98f2483566f5c10062cf2413ef5a03417f2e6e', 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.css

@@ -911,6 +911,9 @@
 :host .wrapper.invalid .label:after {
   display: inline-block;
   margin-inline-start: 0.25rem;
+  vertical-align: middle;
+  flex-shrink: 0;
+  transform: translateY(-1px);
 }
 :host .wrapper.rtl.label-left .label {
   margin-right: 0;

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: "svg-icon svg-search" }), 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: 'af231128d260623c879ef2089b09027063499160', class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: '2f59f083c55296c78ed525a58d029bfc9b9529ee', class: "label-wrapper" }, h("label", { key: '635e5dd747f1d4efde1a69263852783233b2a5f0', class: "label", htmlFor: "input" }, this.label, this.requiredField && (h("span", { key: 'd320313704264ea92481fe5949dd7bb6d05c2a0d', class: "required", "aria-hidden": "true" }, "*")))), h("div", { key: '0b4ba6ae8448bc0163400f6491afd3d9698e229e', class: `field-wrapper ${this.el.shadowRoot.activeElement === this.inputEl ? "focused" : ""} ${this.errorMessage ? "invalid" : ""}`, ref: (el) => (this.fieldWrapperEl = el) }, h("div", { key: '2a88752b7448ea96bb22f810f4eb836eb8c46396', class: "upper-row" }, h("div", { key: '2a651303dd7ae11a1d4b69ec8d2238858c60db70', class: "svg-icon svg-search" }), h("div", { key: '91bee9d946319fc824b7e8d16044b94b25d69a52', class: `tags-and-input-wrapper ${this.inModal ? "in-modal" : ""}` }, h("ul", { key: '60e54382a3449bbc4cbeef5de986679201e4d019', 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: 'e967fb3dd1543cc71e689127a3ff4de287e63122', 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: '75b899bc274fd826a49dd70faa502ec2812e7ff7', class: "character-count" }, this.charCount, "/", this.characterLimit))), this.renderTagCounter(), this.isDropdown && this.renderDropdown()), this.info && (h("div", { key: '94b40202dce3a7f9e28e2ef7efcfc696c5613ac7', id: "info", class: "info-text" }, this.info)), h("div", { key: '1351786b25c5c28c65a646393c8f93a2a9bdf2c1', id: "error" }, this.errorMessage), h("div", { key: '6704903361bdfd1412df5d95d28b1569d0b303ad', 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.css

@@ -885,6 +885,9 @@
 :host .wrapper.invalid .label:after {
   display: inline-block;
   margin-inline-start: 0.25rem;
+  vertical-align: middle;
+  flex-shrink: 0;
+  transform: translateY(-1px);
 }
 :host .wrapper.rtl.label-left .label {
   margin-right: 0;

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: 'e2d740d8479a2c7fceafb2cd68d9f97eb876f785', class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: '2f410dc0729e16d0b18e614f376825f2046df597', class: "label-wrapper" }, h("label", { key: '42478a23be2991709f1225d29fc5b70f1c265e60', htmlFor: "inputfield", class: "label" }, this.label, this.characterLimit && (h("span", { key: '075b4662280aca2fd60c0d9c1c5c55943432fa40', class: "sr-only" }, " ", globalMessages.getCharacterLimit(this.characterLimit))), this.requiredField && (h("span", { key: '04170738af7aed5c0c1c93e0514a0820ce95f45d', class: "required", "aria-hidden": "true" }, "*")))), h("div", { key: '8c95a78fc48323b507f698b7a60e23ee695eafd5', class: "inner-wrapper" }, h("div", { key: 'f2d97022f110d272158a4b66b99823855e9446ee', class: `inputfield-wrapper ${this.errorMessage ? "invalid" : ""}`, style: this.inputWidth ? { width: this.inputWidth } : {} }, h("textarea", { key: '53c1dfdeaee25b4ead90e5077df55c5e75860510', 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: 'e6752b037381940fd2c02fc994b018bff40d0160', id: "info", class: "info" }, this.info)), h("div", { key: '207fc1dd5736e9c9a401daab3334e52f2dbdb7b5', id: "error", class: "error-message" }, this.errorMessage), h("div", { key: 'a310af56a1bf1b1ba045707ee1b5b8fb7a0bd770', 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.css

@@ -906,6 +906,9 @@
 :host .wrapper.invalid .label:after {
   display: inline-block;
   margin-inline-start: 0.25rem;
+  vertical-align: middle;
+  flex-shrink: 0;
+  transform: translateY(-1px);
 }
 :host .wrapper.rtl.label-left .label {
   margin-right: 0;

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: '6c9babdf2a8237a46321cc7fbb9185f23b6e73ee', onBlur: () => this.close(false) }, h("div", { key: '214da15a53ada6e5e1dbfb2d1d6bf73d9e0231b2', class: `wrapper label-${this.labelPosition} ${!!this.errorMessage ? "invalid" : ""}`, ref: (t) => (this.tpWrapper = t) }, h("div", { key: '3179f94028e1645d63b047e33efe756cd337ce17', class: "label-wrapper" }, this.labelPosition !== "none" && (h("label", { key: '9d490705cd32b26bf5de757e6fd5889473a7c4c4', id: "label", class: "label", htmlFor: "time-input" }, this.label, this.requiredField && (h("span", { key: '8e54d504e4ab76a03ef7a01cdf8e1fb161c37016', class: "required", "aria-hidden": "true" }, "*"))))), h("div", { key: '22b7b8c33679f6f7c194e9d3bc3c6794af4ddedd' }, h("div", { key: '4eb746fae7776b906053429059cec00c47ce31c4', class: "inner-wrapper" }, h("input", { key: '7f17b1dfedbf3d2f574247c0fa71b256ac094a79', 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: '1c3f6a403417b9baa4e0f17644cac84d7d6ea1af', 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: "svg-icon svg-time" })), 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: 'd679e16b6d81f07ecf96a76a5adac12ac41d75a0', class: "svg-icon svg-time" })), h("ul", { key: 'cc793abe39ce5de00299e8d03051424b43cd8bcc', 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: '3a82aa292fe4d5bfa374d7bcdb8a22bf9f7b3e45', id: "error", class: "error" }, this.errorMessage)), h("div", { key: '11c037ef9b0e95bd6262a34cbdf86be79ef23beb', 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.css

@@ -810,6 +810,8 @@
 
 :host {
   --button-size: 16px;
+  --offset-x: 0px;
+  --offset-y: 0px;
 }
 
 :host(.size-small) {
@@ -853,6 +855,7 @@
   align-items: center;
   position: relative;
   cursor: pointer;
+  anchor-name: --button;
 }
 :host .button .svg-info {
   color: var(--wmcolor-toggletip-icon-background);
@@ -895,12 +898,25 @@
   position: absolute;
   max-width: 13.75rem;
   width: max-content;
+  overflow: visible;
+  inset: auto;
+  margin: 0;
   padding: 0.5rem 0.75rem;
+  border: none;
   border-radius: 0.1875rem;
   background: var(--wmcolor-toggletip-background);
   color: var(--wmcolor-toggletip-text);
-  font-size: 14px;
-  z-index: 30;
+  font-size: 0.875rem;
+  position-anchor: --button;
+}
+:host .toggletip.hidden {
+  visibility: hidden;
+}
+:host .toggletip.top {
+  position-area: block-start center;
+}
+:host .toggletip.top.small {
+  translate: 0 -0.75rem;
 }
 :host .toggletip.top:before {
   content: "";
@@ -917,6 +933,12 @@
   margin-left: -0.375rem;
   left: 50%;
 }
+:host .toggletip.bottom {
+  position-area: block-end center;
+}
+:host .toggletip.bottom.small {
+  translate: 0 0.75rem;
+}
 :host .toggletip.bottom:before {
   content: "";
   position: absolute;
@@ -932,6 +954,12 @@
   margin-left: -0.375rem;
   left: 50%;
 }
+:host .toggletip.right {
+  position-area: center inline-end;
+}
+:host .toggletip.right.small {
+  translate: 0.75rem 0;
+}
 :host .toggletip.right:before {
   content: "";
   position: absolute;
@@ -948,6 +976,12 @@
   top: calc(50% - 6px);
   left: -0.1875rem;
 }
+:host .toggletip.left {
+  position-area: center inline-start;
+}
+:host .toggletip.left.small {
+  translate: -0.75rem 0;
+}
 :host .toggletip.left:before {
   content: "";
   position: absolute;
@@ -964,6 +998,15 @@
   top: calc(50% - 6px);
   right: -0.1875rem;
 }
+:host .toggletip.bottom-right {
+  position-area: end;
+}
+:host .toggletip.bottom-right.small {
+  translate: -1.75rem 0.75rem;
+}
+:host .toggletip.bottom-right.large {
+  translate: -2.5rem 0;
+}
 :host .toggletip.bottom-right:before {
   content: "";
   position: absolute;
@@ -981,6 +1024,15 @@
   margin-left: unset;
   left: 0.875rem;
 }
+:host .toggletip.bottom-left {
+  position-area: block-end inline-start;
+}
+:host .toggletip.bottom-left.small {
+  translate: 1.75rem 0.75rem;
+}
+:host .toggletip.bottom-left.large {
+  translate: 2.5rem 0;
+}
 :host .toggletip.bottom-left:before {
   content: "";
   position: absolute;
@@ -999,6 +1051,15 @@
   margin-left: unset;
   right: 0.875rem;
 }
+:host .toggletip.top-right {
+  position-area: block-start inline-end;
+}
+:host .toggletip.top-right.small {
+  translate: -1.75rem -0.75rem;
+}
+:host .toggletip.top-right.large {
+  translate: -2.5rem 0;
+}
 :host .toggletip.top-right:before {
   content: "";
   position: absolute;
@@ -1016,6 +1077,15 @@
   margin-left: unset;
   left: 0.875rem;
 }
+:host .toggletip.top-left {
+  position-area: start;
+}
+:host .toggletip.top-left.small {
+  translate: 1.75rem -0.75rem;
+}
+:host .toggletip.top-left.large {
+  translate: 2.5rem 0;
+}
 :host .toggletip.top-left:before {
   content: "";
   position: absolute;
@@ -1034,38 +1104,6 @@
   margin-left: unset;
   right: 0.875rem;
 }
-:host .toggletip.hidden {
-  transform: scale(0, 0) !important;
-  visibility: hidden;
-}
-:host .toggletip {
-  top: calc(var(--button-size) / 2);
-  left: calc(var(--button-size) / 2);
-}
-:host .toggletip.top {
-  transform: translate(-50%, calc(-100% - 18px));
-}
-:host .toggletip.bottom {
-  transform: translate(-50%, 18px);
-}
-:host .toggletip.right {
-  transform: translate(18px, -50%);
-}
-:host .toggletip.left {
-  transform: translate(calc(-100% - 18px), -50%);
-}
-:host .toggletip.bottom-right {
-  transform: translate(-20px, 18px);
-}
-:host .toggletip.bottom-left {
-  transform: translate(calc(-100% + 20px), 18px);
-}
-:host .toggletip.top-right {
-  transform: translate(-20px, calc(-100% - 18px));
-}
-:host .toggletip.top-left {
-  transform: translate(calc(-100% + 20px), calc(-100% - 18px));
-}
 :host .sr-only {
   position: absolute !important;
   width: 1px !important;
@@ -1077,4 +1115,39 @@
   clip-path: inset(50%) !important;
   white-space: nowrap !important;
   margin: -1px !important;
+}
+
+@supports not (top: anchor(bottom)) {
+  :host {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  :host .toggletip {
+    z-index: 30;
+  }
+  :host .toggletip.top.small, :host .toggletip.top.large {
+    translate: var(--offset-x) calc(-50% - 1.25rem + var(--offset-y));
+  }
+  :host .toggletip.bottom.small, :host .toggletip.bottom.large {
+    translate: var(--offset-x) calc(50% + 1.25rem + var(--offset-y));
+  }
+  :host .toggletip.right.small, :host .toggletip.right.large {
+    translate: calc(50% + 1.25rem + var(--offset-x)) var(--offset-y);
+  }
+  :host .toggletip.left.small, :host .toggletip.left.large {
+    translate: calc(-50% - 1.25rem + var(--offset-x)) var(--offset-y);
+  }
+  :host .toggletip.bottom-right.small, :host .toggletip.bottom-right.large {
+    translate: calc(50% - 1.25rem + var(--offset-x)) calc(50% + 1.25rem + var(--offset-y));
+  }
+  :host .toggletip.bottom-left.small, :host .toggletip.bottom-left.large {
+    translate: calc(-50% + 1.25rem + var(--offset-x)) calc(50% + 1.25rem + var(--offset-y));
+  }
+  :host .toggletip.top-right.small, :host .toggletip.top-right.large {
+    translate: calc(50% - 1.25rem + var(--offset-x)) calc(-50% - 1.25rem + var(--offset-y));
+  }
+  :host .toggletip.top-left.small, :host .toggletip.top-left.large {
+    translate: calc(-50% + 1.25rem + var(--offset-x)) calc(-50% - 1.25rem + var(--offset-y));
+  }
 }