@watermarkinsights/ripple 5.30.0-alpha.4 → 5.30.0

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

@@ -114,11 +114,11 @@ export class Modal {
         }
     }
     render() {
-        return (h("dialog", { key: '266ba77b35464d70bb0bf2e835863b685d2cdfb3', class: `${"wm-" + this.modalType}`, "aria-labelledby": `wm-modal-heading-text-${this.uid}`, ref: (el) => (this.dialogEl = el), onKeyDown: (ev) => this.handleKeyDown(ev) }, h("div", { key: '702e29d46758c64f01d08c9a625500961ebf7ff7', class: "tabtrap sr-only", tabindex: "0", onFocus: (ev) => {
+        return (h("dialog", { key: '6146ea9b86156f864e74e1329db5ff68ea725790', class: `${"wm-" + this.modalType}`, "aria-labelledby": `wm-modal-heading-text-${this.uid}`, ref: (el) => (this.dialogEl = el), onKeyDown: (ev) => this.handleKeyDown(ev) }, h("div", { key: '30f644962a0cb1b84eab05b334548f8ba5bad563', class: "tabtrap sr-only", tabindex: "0", onFocus: (ev) => {
                 const focusedFromCloseButton = ev.relatedTarget && ev.relatedTarget == this.closeButtonEl;
                 // no related target means we're coming from outside the page (browser chrome), and first element should be focused instead
                 focusedFromCloseButton ? this.focusLastElement.emit() : this.focusFirstElement.emit();
-            } }), !this.hasBrowserPopoverSupport && h("div", { key: 'f12991308c795975189262b0e7251406dc337927', class: "wm-tooltip" }), h("slot", { key: '5385795ab099057aa99fcaf0f392d6ce771be6aa' }), h("div", { key: '60b4c4cf43d16771e139ed9268860016dca45138', class: "tabtrap sr-only", tabindex: "0", onFocus: () => {
+            } }), !this.hasBrowserPopoverSupport && h("div", { key: '6adb6d32c0e2a6f40b0925be7135befe886e1656', class: "wm-tooltip" }), h("slot", { key: 'f3f7f22e4a59aa9477c2e93b8775b1e15c6d0340' }), h("div", { key: 'c77444dcd4f59ef2bc235821aa26615520fdb0fa', class: "tabtrap sr-only", tabindex: "0", onFocus: () => {
                 this.focusFirstElement.emit();
             } })));
     }

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

@@ -27,7 +27,7 @@ export class ModalPssFooter {
         parentModal.emitSecondaryEvent();
     }
     render() {
-        return (h("div", { key: '8712573dc0e8cd0c8767ca4419d665d415ce9f5f', class: `wm-wrapper ${this.infoText ? " footer-text" : ""}` }, h("div", { key: '1ef43189d639536ab9661363a73ebb6c76f7b8c1', class: "wm-info", "aria-live": "polite" }, this.infoText), h("div", { key: '4e6c70f5987eab6e444b7c8d2895bfc29d782dff', class: "wm-button-collection" }, this.secondaryText && (h("wm-button", { key: 'dae548a529f36cad5bdd67e3d2abd4a148503be9', onClick: () => this.emitParentSecondaryEvent(), id: `wm-secondary-${this.uid}`, ref: (el) => (this.primaryActionDisabled ? (this.lastElement = el) : null) }, this.secondaryText)), h("wm-button", { key: 'dc7e228b6dd060398c9688d598cc58859b626458', "button-type": this.deleteStyle ? "secondary" : "primary", "permanently-delete": this.deleteStyle, onClick: () => this.emitParentPrimaryEvent(), disabled: this.primaryActionDisabled, id: `wm-primary-${this.uid}`, ref: (el) => (!this.primaryActionDisabled ? (this.lastElement = el) : null) }, this.primaryText))));
+        return (h("div", { key: '2bd45880c74b9cb8c470a2983bf1d46b9acb61a5', class: `wm-wrapper ${this.infoText ? " footer-text" : ""}` }, h("div", { key: 'ce2d231765d334b03d6db9753591e72abf7efe9d', class: "wm-info", "aria-live": "polite" }, this.infoText), h("div", { key: '87a85ac4aa5514082c701111a9ec850d71034236', class: "wm-button-collection" }, this.secondaryText && (h("wm-button", { key: 'fbf829d3fa6ddda8fd8e20a402089258a9065836', onClick: () => this.emitParentSecondaryEvent(), id: `wm-secondary-${this.uid}`, ref: (el) => (this.primaryActionDisabled ? (this.lastElement = el) : null) }, this.secondaryText)), h("wm-button", { key: '06ec8889dcbe183da08c77d35a9a0d37be53510d', "button-type": this.deleteStyle ? "secondary" : "primary", "permanently-delete": this.deleteStyle, onClick: () => this.emitParentPrimaryEvent(), disabled: this.primaryActionDisabled, id: `wm-primary-${this.uid}`, ref: (el) => (!this.primaryActionDisabled ? (this.lastElement = el) : null) }, this.primaryText))));
     }
     static get is() { return "wm-modal-pss-footer"; }
     static get originalStyleUrls() {

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, { key: 'a9bb719b9ec99e44760dd7e70aee29594a1c609b' }, h("div", { key: '07d34fb1eff72f1d8b4ef07b967c6545777dabfd', class: "wm-wrapper" }, h("div", { key: '9728bed2dc47febfc37914ac93e8a22baa4b095b' }, h("h2", { key: '02df4b245d0ed5df6e5e1181de070acebcec6dfb', class: "title", id: `wm-modal-heading-text-${this.uid}` }, this.heading, h("span", { key: 'dd64bc545358b03357db57bb7088f7abd0f45f01', class: "subtitle" }, this.subheading))), h("wm-button", { key: '6474907078665a40d38eec2d70cfbb837ff0ce48', "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: '8de5b12e5695d10dd613903f686539d743659fe9' }, h("div", { key: '64316a6b7e6f254013e99d19f805e2cd9cdd5fa9', class: "wm-wrapper" }, h("div", { key: '24d7e5322e51a03af815ca52d96f97fcc3c248ab' }, h("h2", { key: '77be37c5914b42f32d84c69c1a7129c77612a380', class: "title", id: `wm-modal-heading-text-${this.uid}` }, this.heading, h("span", { key: '17b87f65f5ef154dd04f4e814b54db3c9fefb5c2', class: "subtitle" }, this.subheading))), h("wm-button", { key: 'cb32d3986b79bc75e14ae4cddaa96e8728117e29', "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

@@ -115,9 +115,9 @@ export class ModalPss {
         }
     }
     render() {
-        return (h(Host, { key: '852a0815f1d61abd43f7895f7f0ac80d704179f7', 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: 'f88b5818e0bbd04790ebd3d2ad5ed7365cb4378e', 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", { key: '1b04333d3eba5db57d4ad5daf276c991e7f79dbc', class: "overlay", ref: (el) => (this.overlayEl = el) }), h("div", { key: 'a92b20c28c8255181d9544eae15a10923703efeb', class: "sr-only", tabIndex: 0, onFocus: () => {
+            } }, h("div", { key: '716de7445a0492ff71faf681d58beb801eb985d4', class: "overlay", ref: (el) => (this.overlayEl = el) }), h("div", { key: '311087d52cee10763ed87f5532559dc7fc620a26', 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, { key: 'd949a88d98812cbbd4760ee5bcdbcd21cc1ee2e6', class: `hamburger ${this.open ? "nav-open" : "nav-closed"}` }, h("button", { key: 'f358bf322577176cbba273a8cffc9f19a5d22a84', "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: '413b920cd5d456752b2048d3c192f8c818f6a07e', class: "svg-icon svg-menu" }))));
+        return (h(Host, { key: 'e5fb73423c0af009ee5408853227f9cbd27d0a58', class: `hamburger ${this.open ? "nav-open" : "nav-closed"}` }, h("button", { key: 'c07546a67d2e470b7172485f02f2897af6730745', "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: 'a3ae264912ba81685737ee0f15459a21342b128c', 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, { key: '9145ba02ee430b365ee51010659e7e3f5e87a959', role: "listitem" }, h("a", { key: '6b50caa9596f3e3e74cde51fbb4a20049d176843', class: `link ${this.active ? "active" : ""}`, href: this.href, onClick: () => this.wmNavigationItemClicked.emit() }, h("div", { key: '0efbe38e55dcd3fb99e328f3f9f795828a3fdf28', class: "icon", "aria-hidden": "true" }, h("slot", { key: '77fc57988ff9de1e92325b198f3529121ca29f52' })), h("div", { key: 'b2e52e7c30b989240c5ffeafec068b955fbaf162', class: "text" }, this.text))));
+        return (h(Host, { key: 'cae324324ba502c4e438ed7d95d05b03c6e0abc8', role: "listitem" }, h("a", { key: '357321484d6f9ca76ae76588de0e0245bc429278', class: `link ${this.active ? "active" : ""}`, href: this.href, onClick: () => this.wmNavigationItemClicked.emit() }, h("div", { key: '0c12bdfbb8db550d99cee869e6238bc2f842753f', class: "icon", "aria-hidden": "true" }, h("slot", { key: 'ddd837246f782f9222e0f30d03a18e42d35221fa' })), h("div", { key: 'ca3a038c1b8c4e073fedb84f23a996c1e4556b59', 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, { key: '2e058ee63c607ae1097676900089f8faf0bc16a6', role: "navigation", "aria-expanded": this.ariaExpanded, "aria-label": this.mainNavigationMessage }, this.open ? this.renderOverlay() : "", this.isCollapsible && (h("div", { key: '9735a9ac952c238572ce040fa0bcdefae73c5d3c', class: "trapfocus", tabindex: this.open ? 0 : undefined, onFocus: () => this.focusLastItem() })), h("div", { key: '8ac9f6369607d5f82eb160fc7d7fec78935bb0e4', class: "tray" }, h("div", { key: '6d0fad03888232f74dd14280a784621d52e3086d', class: "toggle-wrapper" }, h("wm-button", { key: '8a178bb3ec097c78c4bc10684a1162bd24e31ef2', 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: '728e290bb93236f900b6cee0ab9a7a864bd514cf', role: "navigation", "aria-expanded": this.ariaExpanded, "aria-label": this.mainNavigationMessage }, this.open ? this.renderOverlay() : "", this.isCollapsible && (h("div", { key: '3997c9b2967adc85b41afc834bcbbe3f4e5c8067', class: "trapfocus", tabindex: this.open ? 0 : undefined, onFocus: () => this.focusLastItem() })), h("div", { key: '960c41a5a0932757de5321ab2e21fe0dbad50f6e', class: "tray" }, h("div", { key: '6aaf6d8d88dbd243c0b84f11ce24d7f0202c6a70', class: "toggle-wrapper" }, h("wm-button", { key: 'e009a82b20fcd5ee7f7d045ba85e1a8265273f65', 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", { key: '282990f8830620a98af2a9fd3a390b2e8fe3b71b', class: "navlist" }, h("slot", { key: '1e4defb3a5ea0a6e16db041f3019648b31c9aaf3' }))), this.isCollapsible && (h("div", { key: '3c3ae44cef9fe39ed11b49da0c995e78b4b61383', class: "trapfocus", tabindex: this.open ? 0 : undefined, onFocus: () => this.toggleEl.focus() }))));
+            } })), h("ul", { key: 'abf01dbc15485f42dfc2fa5c8f87a895d4451c8e', class: "navlist" }, h("slot", { key: 'cc42697807c886c6fbec7b1b446206caa41b34e7' }))), this.isCollapsible && (h("div", { key: '020a258359a5f27cc62a44fb229735ed752eae83', 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.css

@@ -887,37 +887,6 @@
   mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,6.47 6.47,2 12,2M15.59,7L12,10.59L8.41,7L7,8.41L10.59,12L7,15.59L8.41,17L12,13.41L15.59,17L17,15.59L13.41,12L17,8.41L15.59,7Z'/%3E%3C/svg%3E%0A");
 }
 
-/* --------------------------------------
-   1. Box-shadow
-   -------------------------------------- */
-/* --------------------------------------
-   2. Border-radius
-   -------------------------------------- */
-/* --------------------------------------
-   3. Transforms
-   -------------------------------------- */
-/* --------------------------------------
-   4. Button Focus
-   -------------------------------------- */
-/* --------------------------------------
-   5. Flex
-   -------------------------------------- */
-/* --------------------------------------
-   7. Screen Reader Only
-   -------------------------------------- */
-/* --------------------------------------
-   8. Label styles
-   this mixin includes all the styles for the label
-   + flex rules on the parent container to switch between top and left position
-   + srOnly when label is hidden
-   Assumes the following markup:
-   div.wrapper[.label-left.invalid] > div.label-wrapper > label.label > span.required
-   .wrapper is for the flex rules
-   .label-wrapper is to set the height of the label when positioned left so it's the same height as
-   the input. It can't be done directly on .label because of possible line wrapping.
-   When the label is on top there's no line wrapping at all to ensure proper alignment of inlined elements
-   (they can't be aligned on the baseline because of possible description text and error message)
-   -------------------------------------- */
 :host * {
   box-sizing: border-box;
 }

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", { key: '892a219485022239a6db2d07a8549964058d04bc', "aria-expanded": this.expanded.toString(), class: "navigator", onClick: handleClick.bind(this), "aria-label": altText }));
+        return (h("button", { key: 'adfd184468176b7b9c025b5e4db3c86a1e857b4b', "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", { key: '56ad9596d07ebbb7782d0de10e931ab08b4f623f', class: `navoption ${selectedClass} ${focusedClass}` }, h("slot", { key: '76aafba6c6b59c8a2518af6666375ee27473905e' })));
+        return (h("div", { key: 'b79461e5967f3e75c8bb4d4c5e9e66d6b870c84b', class: `navoption ${selectedClass} ${focusedClass}` }, h("slot", { key: '35f83b67f08a1d8fdc3aeaeba1acdef45e85fca1' })));
     }
     static get is() { return "priv-navigator-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -887,37 +887,6 @@
   mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,6.47 6.47,2 12,2M15.59,7L12,10.59L8.41,7L7,8.41L10.59,12L7,15.59L8.41,17L12,13.41L15.59,17L17,15.59L13.41,12L17,8.41L15.59,7Z'/%3E%3C/svg%3E%0A");
 }
 
-/* --------------------------------------
-   1. Box-shadow
-   -------------------------------------- */
-/* --------------------------------------
-   2. Border-radius
-   -------------------------------------- */
-/* --------------------------------------
-   3. Transforms
-   -------------------------------------- */
-/* --------------------------------------
-   4. Button Focus
-   -------------------------------------- */
-/* --------------------------------------
-   5. Flex
-   -------------------------------------- */
-/* --------------------------------------
-   7. Screen Reader Only
-   -------------------------------------- */
-/* --------------------------------------
-   8. Label styles
-   this mixin includes all the styles for the label
-   + flex rules on the parent container to switch between top and left position
-   + srOnly when label is hidden
-   Assumes the following markup:
-   div.wrapper[.label-left.invalid] > div.label-wrapper > label.label > span.required
-   .wrapper is for the flex rules
-   .label-wrapper is to set the height of the label when positioned left so it's the same height as
-   the input. It can't be done directly on .label because of possible line wrapping.
-   When the label is on top there's no line wrapping at all to ensure proper alignment of inlined elements
-   (they can't be aligned on the baseline because of possible description text and error message)
-   -------------------------------------- */
 :host,
 wm-pagination {
   display: block;

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

@@ -204,7 +204,7 @@ export class Pagination {
     render() {
         return (
         // do not render the component if there's only one page
-        this.totalItems > this.itemsPerPage && (h("nav", { key: '35ef44713268e5d3ddf04785881cdbc598f574e1', "aria-label": `${this.label || this.defaultLabel}. ${this.getCurrentPagesInView()}. ${this.currentPageAnnouncement(this.currentPage)}` }, this.isLargeSize ? this.renderLarge() : this.renderSmall(), h("div", { key: '63c5f118738ce00dcd2de4f254e9d45fa3844301', id: "status", class: "sr-only", "aria-live": "polite", "aria-relevant": "text", "aria-atomic": "true" }, this.srAnnouncement))));
+        this.totalItems > this.itemsPerPage && (h("nav", { key: '535581d117f47eb9bf29853901e80554e3f29ea9', "aria-label": `${this.label || this.defaultLabel}. ${this.getCurrentPagesInView()}. ${this.currentPageAnnouncement(this.currentPage)}` }, this.isLargeSize ? this.renderLarge() : this.renderSmall(), h("div", { key: '571b1089d6fe9775168f48c69b489305b1142a77', 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.css

@@ -887,37 +887,6 @@
   mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,6.47 6.47,2 12,2M15.59,7L12,10.59L8.41,7L7,8.41L10.59,12L7,15.59L8.41,17L12,13.41L15.59,17L17,15.59L13.41,12L17,8.41L15.59,7Z'/%3E%3C/svg%3E%0A");
 }
 
-/* --------------------------------------
-   1. Box-shadow
-   -------------------------------------- */
-/* --------------------------------------
-   2. Border-radius
-   -------------------------------------- */
-/* --------------------------------------
-   3. Transforms
-   -------------------------------------- */
-/* --------------------------------------
-   4. Button Focus
-   -------------------------------------- */
-/* --------------------------------------
-   5. Flex
-   -------------------------------------- */
-/* --------------------------------------
-   7. Screen Reader Only
-   -------------------------------------- */
-/* --------------------------------------
-   8. Label styles
-   this mixin includes all the styles for the label
-   + flex rules on the parent container to switch between top and left position
-   + srOnly when label is hidden
-   Assumes the following markup:
-   div.wrapper[.label-left.invalid] > div.label-wrapper > label.label > span.required
-   .wrapper is for the flex rules
-   .label-wrapper is to set the height of the label when positioned left so it's the same height as
-   the input. It can't be done directly on .label because of possible line wrapping.
-   When the label is on top there's no line wrapping at all to ensure proper alignment of inlined elements
-   (they can't be aligned on the baseline because of possible description text and error message)
-   -------------------------------------- */
 :host * {
   box-sizing: border-box;
 }
@@ -957,11 +926,6 @@
   font-family: inherit;
   font-size: 0.875rem;
 }
-@media only screen and (max-width: 768px) {
-  :host .wm-search-wrapper input {
-    height: 44px;
-  }
-}
 :host .wm-search-wrapper:focus-within {
   outline: 2px solid var(--wmcolor-border-focus);
   border-color: var(--wmcolor-border-focus);

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

@@ -168,10 +168,10 @@ export class Search {
      * End search and find render helpers
      */
     render() {
-        return (h(Host, { key: '370f5b4157a3dc89cf25cf53f0383bd2eb2d6d53' }, h("div", { key: '64d1ccd3f9eaffa8eea69ecbb685dad973c28a7c', id: "wm-search-wrapper", class: `wm-search-wrapper ${this.searchType}` }, h("input", { key: '8859cf5ba4df6e00b469976546b72800975708b2', disabled: this.isDisabled, id: "wm-search-input", placeholder: this.placeholder, "aria-label": `${this.label ? this.label + ". " : ""}${intl.formatMessage({
+        return (h(Host, { key: '7bfd505862c5bef72dc333bc22fb99c04c513b3f' }, h("div", { key: '9d7f4cf04c5655df0bf4d9697622182f1eb717c8', id: "wm-search-wrapper", class: `wm-search-wrapper ${this.searchType}` }, h("input", { key: '88da025659c4c5f35ac3b4c7207ad734a115a85a', 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", { key: '7c62ac5ee5b86b8067aa72ca8c48955a7a6531d4', class: "svg-icon svg-search" }), this.searchType === "find" && this.renderResultsAndBrowseButtons(), h("div", { key: '43e37c232ffe7919490312d621d8c4179465f66d', 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: 'c5834f5cc58a1fd6d7c6637604cbbb5a610e2476', class: "svg-icon svg-search" }), this.searchType === "find" && this.renderResultsAndBrowseButtons(), h("div", { key: '243438ee1d91d8875ec3014f6b17532a283e7cdf', 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"; }

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

@@ -887,37 +887,6 @@
   mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,6.47 6.47,2 12,2M15.59,7L12,10.59L8.41,7L7,8.41L10.59,12L7,15.59L8.41,17L12,13.41L15.59,17L17,15.59L13.41,12L17,8.41L15.59,7Z'/%3E%3C/svg%3E%0A");
 }
 
-/* --------------------------------------
-   1. Box-shadow
-   -------------------------------------- */
-/* --------------------------------------
-   2. Border-radius
-   -------------------------------------- */
-/* --------------------------------------
-   3. Transforms
-   -------------------------------------- */
-/* --------------------------------------
-   4. Button Focus
-   -------------------------------------- */
-/* --------------------------------------
-   5. Flex
-   -------------------------------------- */
-/* --------------------------------------
-   7. Screen Reader Only
-   -------------------------------------- */
-/* --------------------------------------
-   8. Label styles
-   this mixin includes all the styles for the label
-   + flex rules on the parent container to switch between top and left position
-   + srOnly when label is hidden
-   Assumes the following markup:
-   div.wrapper[.label-left.invalid] > div.label-wrapper > label.label > span.required
-   .wrapper is for the flex rules
-   .label-wrapper is to set the height of the label when positioned left so it's the same height as
-   the input. It can't be done directly on .label because of possible line wrapping.
-   When the label is on top there's no line wrapping at all to ensure proper alignment of inlined elements
-   (they can't be aligned on the baseline because of possible description text and error message)
-   -------------------------------------- */
 :host * {
   box-sizing: border-box;
   margin: unset;

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

@@ -149,11 +149,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" }))), (!notification.link && notification.action) && (h("button", { id: `action-${notification.id}`, class: "link", onClick: () => this.snackLinkClicked(notification), onKeyDown: (ev) => ev.key === "Enter" && this.snackLinkClicked(notification) }, notification.action))), h("button", { id: `close-button-${notification.id}`, "aria-label": this.closeSnackMessage, class: "closesnack", tabindex: notification.link || notification.action ? 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 || notification.action ? 0 : -1, onFocus: () => (notification.link || notification.action) && this.snackDismissed(notification) })))));
     }
     render() {
-        return (h(Host, { key: '08f8c5ea209d50ba5c9228d3fc0c8869364698d7' }, h("div", { key: '90dc5e7df07cae20d877e5d8e25d511811b682db', ref: (el) => (this.snackAreaEl = el), class: {
+        return (h(Host, { key: '93b6fe6527a434f9639d914c5c835530144c60be' }, h("div", { key: '143acfd90a277c949e9ffbacbe5fc520572be1a7', ref: (el) => (this.snackAreaEl = el), class: {
                 "list-wrapper": true,
                 "user-is-tabbing": this.isTabbing,
                 empty: this.parsedNotifications.length == 0,
-            } }, this.renderSnackbars()), h("div", { key: '3c20d55361fcaa30e50df446aabfefa9c3904113', 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: '44196aa826573f4515efbf23735a1e5f7d663aa6', 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

@@ -27,9 +27,9 @@ export class TabItem {
     }
     render() {
         const isDark = this.parentTabList && this.parentTabList.customBackground == "dark";
-        return (h(Host, { key: '891742e919db16534b5c563925028a581351e380', role: "presentation" }, h("li", { key: '38ea1052f44fd08c75e0dd6c769d829c88498a6c', class: `tab-item ${isDark ? "dark" : ""}`, role: "presentation" }, h("a", { key: '614bd40a4a3255444d4823a13ff3392cf20c51da', class: `tab`, role: "tab", ref: (el) => (this.linkEl = el), id: `tab-link-${this.tabId}`, onKeyDown: (ev) => this.tabPressed(ev), "aria-selected": this.selected ? "true" : "false", tabindex: this.selected ? 0 : -1, onClick: this.tabClicked, onFocus: () => {
+        return (h(Host, { key: '71b3f6dac339c5ece826133f01d6d5f05089456a', role: "presentation" }, h("li", { key: '0823dff1b7394d6bbc34a7d0d932fd19d7c6c8d0', class: `tab-item ${isDark ? "dark" : ""}`, role: "presentation" }, h("a", { key: '9ad3118a0f6bf6741e73e18a3a12d435c4676619', class: `tab`, role: "tab", ref: (el) => (this.linkEl = el), id: `tab-link-${this.tabId}`, onKeyDown: (ev) => this.tabPressed(ev), "aria-selected": this.selected ? "true" : "false", tabindex: this.selected ? 0 : -1, onClick: this.tabClicked, onFocus: () => {
                 this.wmIntTabFocused.emit({ tabItem: this.el });
-            } }, h("slot", { key: 'eaa643697c2c656697ef7b3e71fddd450b8ae9a2' })))));
+            } }, h("slot", { key: '64e9b75227c4294294635d49da0ad49b3c91d541' })))));
     }
     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

@@ -257,15 +257,15 @@ export class TabList {
         this.announcement = message;
     }
     render() {
-        return (h(Host, { key: 'aa8d6dc0176ce800ef13b21945f86944e43e9f46' }, h("div", { key: '3cda965774c460c17410cb8491bcf01e6add3a6c', class: "component-wrapper" }, h("wm-button", { key: '57d892bea4fe36f2e53b82fa719331ed1b7eb343', class: `left-arrow ${this.scrollArrowsVisible ? "visible" : ""}`, "aria-controls": "tablist", customBackground: this.customBackground, buttonType: "navigational", icon: "#previous", tooltip: intl.formatMessage({
+        return (h(Host, { key: 'e5437df047efe61428f2116cbcc9f94042dd84bc' }, h("div", { key: 'd933cd096869ca9d0808cbfcbacca30dfd89a1fc', class: "component-wrapper" }, h("wm-button", { key: '224781b9a7c43fa49ef403484416a6037190bb10', class: `left-arrow ${this.scrollArrowsVisible ? "visible" : ""}`, "aria-controls": "tablist", customBackground: this.customBackground, buttonType: "navigational", icon: "#previous", tooltip: intl.formatMessage({
                 id: "tabs.showPreviousTabs",
                 defaultMessage: "Show previous tabs",
                 description: "Tooltip for button scrolling tab group.",
-            }), onClick: (ev) => this.handleLeftArrowClick(ev) }), h("ul", { key: '641223aa98b944a49b399412fad67628826d7341', id: "tablist", ref: (el) => (this.tabContainerEl = el), class: `tabcontainer ${this.customBackground || ""} ${this.containerFadeLeft ? "fade-left" : ""} ${this.containerFadeRight ? "fade-right" : ""}`, role: "tablist", tabIndex: -1 }, h("slot", { key: '217faee45ff516176797154994dcbf386aa43ba9' })), h("wm-button", { key: 'db599db70069c90f0603117c1adf589e7947c457', class: `right-arrow ${this.scrollArrowsVisible ? "visible" : ""}`, "aria-controls": "tablist", customBackground: this.customBackground, buttonType: "navigational", icon: "#next", tooltip: intl.formatMessage({
+            }), onClick: (ev) => this.handleLeftArrowClick(ev) }), h("ul", { key: '8e826993aa2b0387587357b43250e20bda02acdf', id: "tablist", ref: (el) => (this.tabContainerEl = el), class: `tabcontainer ${this.customBackground || ""} ${this.containerFadeLeft ? "fade-left" : ""} ${this.containerFadeRight ? "fade-right" : ""}`, role: "tablist", tabIndex: -1 }, h("slot", { key: 'c17a7bc0e8fa17e9142de78713cfffa5b340dbb1' })), h("wm-button", { key: '651170ba9e2b4cd4d91256386032a780bfa3cdf2', class: `right-arrow ${this.scrollArrowsVisible ? "visible" : ""}`, "aria-controls": "tablist", customBackground: this.customBackground, buttonType: "navigational", icon: "#next", tooltip: intl.formatMessage({
                 id: "tabs.showNextTabs",
                 defaultMessage: "Show next tabs",
                 description: "Tooltip for button scrolling tab group.",
-            }), onClick: (ev) => this.handleRightArrowClick(ev) }), h("span", { key: 'fd81344659a3baac0d2e5e90ed6d409c311ef38d', "aria-live": "assertive", class: "sr-only", ref: (el) => (this.liveRegionEl = el) }, this.announcement))));
+            }), onClick: (ev) => this.handleRightArrowClick(ev) }), h("span", { key: '83f0f5c60bb02b59e0e163a626be41ac18f1c4e2', "aria-live": "assertive", class: "sr-only", ref: (el) => (this.liveRegionEl = el) }, this.announcement))));
     }
     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, { key: '4dfcedfd63a71a8e7aaff0075dd7f223d74ecaf1', role: "tabpanel", tabIndex: "-1", class: { "tab-hidden": !this.active } });
+        return h(Host, { key: 'd1c5920b5b91b671adb2f1e503a5b6f676fcca5e', role: "tabpanel", tabIndex: "-1", 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

@@ -1021,7 +1021,6 @@
   -moz-border-radius: 3px;
   -ms-border-radius: 3px;
   border-radius: 3px;
-  overflow: clip;
 }
 :host .field-wrapper.focused {
   outline: 2px solid var(--wmcolor-border-focus);
@@ -1040,6 +1039,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  flex: 0 0 fit-content;
   min-width: 5rem;
   background-color: var(--wmcolor-taginput-charcount-background);
   font-size: 0.875rem;
@@ -1058,12 +1058,14 @@
   display: flex;
   flex: 1;
   justify-content: space-between;
+  overflow: clip;
+  border-radius: 2px;
 }
 :host .upper-row .svg-search {
   --icon-size: 1.125rem;
   flex-shrink: 0;
   align-self: center;
-  margin-inline: 0.75rem 0.5rem 0.75rem 0.75rem;
+  margin: 0.75rem 0.5rem 0.75rem 0.75rem;
   color: var(--wmcolor-taginput-icon);
 }
 :host .lower-row {

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

@@ -1,4 +1,4 @@
-import { h, forceUpdate } from "@stencil/core";
+import { h } from "@stencil/core";
 import { csvToArray, debounce, hideTooltip, intl, measureText, shouldOpenUp, showTooltip, truncateText, findPrev, findNext, } from "../../global/functions";
 import { globalMessages } from "../../global/intl";
 export class TagInput {
@@ -33,7 +33,7 @@ export class TagInput {
             defaultMessage: "No results match your search.",
         });
         this.openUp = false;
-        this.debouncedUpdate = debounce(() => forceUpdate(this.el), 30);
+        this.debouncedLayoutChange = debounce(() => this.handleLayoutChange(), 30);
         this.label = undefined;
         this.errorMessage = undefined;
         this.info = undefined;
@@ -229,8 +229,7 @@ export class TagInput {
                 this.inputEl.focus();
             }
         };
-        // on resize of component, trigger componentDidRender -> positionInput
-        const resizeObserver = new ResizeObserver(() => this.debouncedUpdate());
+        const resizeObserver = new ResizeObserver(() => this.debouncedLayoutChange());
         resizeObserver.observe(this.el);
         const lockedTags = [];
         const regularTags = [];
@@ -270,24 +269,27 @@ export class TagInput {
     }
     handleChangeAnnouncement(mutationRecord) {
         const tagOptionEl = mutationRecord.target;
+        let message = null;
         if (mutationRecord.type == "childList" && mutationRecord.removedNodes.length > 0) {
             // announce deselection of user-added tag, whose element removal is picked up
-            this.announce(this.tagRemovedMessage(mutationRecord.removedNodes[0].textContent));
+            message = this.tagRemovedMessage(mutationRecord.removedNodes[0].textContent);
         }
         else if (mutationRecord.type == "attributes") {
             const tagName = this.getTagName(tagOptionEl);
             // announce selection or deselection of all kinds of tags
             if (tagOptionEl.selected) {
-                let changeAnnouncement = this.tagAddedMessage(tagName);
+                message = this.tagAddedMessage(tagName);
                 if (this.tagLimitReached) {
-                    changeAnnouncement += ` ${this.maxTagsReachedMessage}`;
+                    message += ` ${this.maxTagsReachedMessage}`;
                 }
-                this.announce(changeAnnouncement);
             }
             else {
-                this.announce(this.tagRemovedMessage(tagName));
+                message = this.tagRemovedMessage(tagName);
             }
         }
+        if (message) {
+            this.announce(message);
+        }
     }
     handleOptionListChange(record) {
         const addedNodes = Array.from(record.addedNodes);
@@ -307,6 +309,10 @@ export class TagInput {
         const deselOption = ev.target;
         this.tagsList = this.tagsList.filter((t) => t != deselOption);
     }
+    handleTagsListChange() {
+        // when tags are added or removed, input position and truncation needs to be recalculated
+        this.debouncedLayoutChange();
+    }
     handleTagListChange(mutationRecord) {
         const addedTags = Array.from(mutationRecord.addedNodes);
         if (!!addedTags) {
@@ -335,8 +341,7 @@ export class TagInput {
             }
         }
     }
-    componentDidRender() {
-        this.positionInput();
+    handleLayoutChange() {
         // check each tag if truncation is needed
         this._tagEls.forEach((tag) => {
             const textEl = tag.querySelector(".tag-text");
@@ -351,6 +356,7 @@ export class TagInput {
                 textEl.textContent = truncateText(textEl, this.getTagName(optionEl), rightBound - leftBound, 5);
             }
         });
+        this.positionInput();
     }
     createPlaceholderDefault(addNew, hasOptions) {
         const addAndSearchPlaceholder = intl.formatMessage({
@@ -909,7 +915,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: "column-label" }, colHeaders[idx] || `Column ${idx + 1}`), 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 : "")));
+            return (h("td", { id: cellId, key: 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: "column-label" }, colHeaders[idx] || `Column ${idx + 1}`), 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) {
@@ -918,7 +924,7 @@ export class TagInput {
             locked: o.locked,
             focused: this.focusedOption && o === this.focusedOption ? true : false,
         };
-        return (h("tr", { id: o.id, class: classes, onClick: (ev) => this.handleOptionClick(ev) }, this.renderTableCells(o)));
+        return (h("tr", { id: o.id, key: o.id, class: classes, onClick: (ev) => this.handleOptionClick(ev) }, this.renderTableCells(o)));
     }
     renderListItem(o) {
         if (!!this.inputEl) {
@@ -927,10 +933,10 @@ export class TagInput {
         }
     }
     render() {
-        return (h("div", { key: 'b63b8a4dd41e08f72bacfaf65af666cefd38bdfc', class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: '226c7df95b1e97580cd65e134f67502815e0126c', class: "label-wrapper" }, h("label", { key: '71775f8dbd65fbe49a91f06f1f7f9bda10841c9a', class: "label", htmlFor: "input", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => hideTooltip() }, this.label), this.labelPosition !== "none" && this.requiredField && (h("div", { key: 'c3eb17ad24ed4953fe1b1db18de0fff1eb8e6913', class: "required", "aria-hidden": "true" }, "*"))), h("div", { key: '004fa237e9fda96b9b5ad1a978aabe2b23683116', class: `field-wrapper ${this.el.shadowRoot.activeElement === this.inputEl ? "focused" : ""} ${this.errorMessage ? "invalid" : ""}`, ref: (el) => (this.fieldWrapperEl = el) }, h("div", { key: '2c068bd43c777937b93ab5057f09728f062715d9', class: "upper-row" }, h("div", { key: '2abc2ade1365a82ff6a1f325d3afa7bef52524cd', class: "svg-icon svg-search" }), h("div", { key: '5161398ea01ed4d7317148b39feedf680b89f764', class: `tags-and-input-wrapper` }, h("ul", { key: '0738afa86d05fe5f5ef1b9ebe0fa98431931b17f', 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-labelledby": "sr-instructions", tabindex: this._tagEls.length > 0 ? 0 : -1, "aria-describedby": `info max-tags`, onFocus: (ev) => this.handleTagAreaFocus(ev), onBlur: (ev) => {
+        return (h("div", { key: 'c638aeac0c2e0489bf71cd6173b2f90221f7a6ef', class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: '1484441e157e25cd9787023177a2a60ef3c424bc', class: "label-wrapper" }, h("label", { key: 'd03dc310d99b485cf7646f577812d8aea2c6bf3e', class: "label", htmlFor: "input", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => hideTooltip() }, this.label), this.labelPosition !== "none" && this.requiredField && (h("div", { key: '5fa23daa6bc6c89d2b6872cb78c5b95fc00d143c', class: "required", "aria-hidden": "true" }, "*"))), h("div", { key: '3782fc2fd78096ea7c97cdcb6a8f8097c10a7c03', class: `field-wrapper ${this.el.shadowRoot.activeElement === this.inputEl ? "focused" : ""} ${this.errorMessage ? "invalid" : ""}`, ref: (el) => (this.fieldWrapperEl = el) }, h("div", { key: '4ead1f6246e4a20bf0031f9390da66619b1136d4', class: "upper-row" }, h("div", { key: '924ee6f8a8eef661d43ada82a2cd5b790661f1a3', class: "svg-icon svg-search" }), h("div", { key: 'e6e2cc491591c82a08436c9cec5e588a3a6c9e2c', class: `tags-and-input-wrapper` }, h("ul", { key: '30e763dadc1ae2c273053beb67964c45747ef0f6', 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-labelledby": "sr-instructions", 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("div", { key: 'a43eeb89e520f481e969d9a0ba02221101feab07', class: "sr-only", id: "sr-instructions" }, this.label, ". ", this.tagAreaInstructions), this.isDropdown && this.renderDropdownInput(), this.isTable && this.renderTableInput()), this.isDropdown && (h("div", { key: 'a8476f10dc1cacc3f3a60939d7d6bf715d885805', class: "character-count" }, this.charCount, "/", this.characterLimit))), this.renderTagCounter(), this.isDropdown && this.renderDropdown()), this.info && (h("div", { key: '19b8682c2cb7652213051cc60994659c283f70e7', id: "info", class: "info-text" }, this.info)), h("div", { key: '1b41966cbcc17eef4f9dc2e98696fb1a517e3f16', id: "error" }, this.errorMessage), h("div", { key: '60bd71dec90ca0c2cb306518b6d5acb9407bc120', class: "sr-only", "aria-live": "polite", ref: (el) => (this.liveRegionEl = el), "aria-atomic": "true" }, this.liveRegionMessage), this.isTable && this.renderTable()));
+            }, onKeyDown: (ev) => this.handleTagAreaKeyDown(ev) }, this.renderTags()), h("div", { key: 'ad6c4adcc53f4d54d48d018a236a326edf9f9a80', class: "sr-only", id: "sr-instructions" }, this.label, ". ", this.tagAreaInstructions), this.isDropdown && this.renderDropdownInput(), this.isTable && this.renderTableInput()), this.isDropdown && (h("div", { key: 'f44b7837eeebd3234f8fccde00491404c4e7baad', class: "character-count" }, this.charCount, "/", this.characterLimit))), this.renderTagCounter(), this.isDropdown && this.renderDropdown()), this.info && (h("div", { key: 'f952e64ce8f546c8d2ac2d560c377a8431f06b50', id: "info", class: "info-text" }, this.info)), h("div", { key: '5ac26d03049f7f302a7d678b76534339b33c1033', id: "error" }, this.errorMessage), h("div", { key: '27817f3f1e5555220d61e3719e16c492cfca3789', 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"; }
@@ -1224,6 +1230,9 @@ export class TagInput {
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{
+                "propName": "tagsList",
+                "methodName": "handleTagsListChange"
+            }, {
                 "propName": "errorMessage",
                 "methodName": "announceError"
             }];

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

@@ -71,7 +71,7 @@ export class Textarea {
         this.announcement = message;
     }
     render() {
-        return (h("div", { key: '6def62954372e3a1ffd569104e0a4f09dee98925', class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: 'b5af72307427e0e15277d6f7a86666643e619821', class: "label-wrapper" }, h("label", { key: '7c23b4ca018ca4ec89115cd73928a429023a1b09', htmlFor: "inputfield", class: "label", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => hideTooltip() }, this.label, this.characterLimit && (h("span", { key: 'fc373ec0c6582a88c8e0521b96dc8010eff904df', class: "sr-only" }, " ", globalMessages.getCharacterLimit(this.characterLimit)))), this.labelPosition !== "none" && this.requiredField && (h("span", { key: 'af1ea9f4f1d07a98f0be27fed4fa94a37a86e383', class: "required", "aria-hidden": "true" }, "*"))), h("div", { key: 'ee8739a59186eaf2947ae3b8375d2887d9fdc9cb', class: "inner-wrapper" }, h("div", { key: 'a69904d734cc20d14e0dd2fd4c54ef5d2918ec39', class: `inputfield-wrapper ${this.errorMessage ? "invalid" : ""}`, style: this.inputWidth ? { width: this.inputWidth } : {} }, h("textarea", { key: '80a23dcf78ff9144ed63aa15f8fb1341787554d2', 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: 'f26c28e84b4a51f22974b46a4f317fb668fadbf0', id: "info", class: "info" }, this.info)), h("div", { key: '00b3da5bd260ea3b0640837eacfebb8e1dea6e9a', id: "error", class: "error-message" }, this.errorMessage), h("div", { key: 'a7e3e26943dab2b626b7d8a0f2bf449379ef9dfe', id: "live-polite", class: "sr-only", "aria-live": "polite", "aria-atomic": "true", ref: (el) => (this.liveRegionEl = el) }, this.announcement))));
+        return (h("div", { key: '35c5048f918ab18bc0adc8223f2321e363bd12d6', class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: '856cc26989cc86d19274101b0a24827951dfe12a', class: "label-wrapper" }, h("label", { key: '28475801b5c51f4f92efa43a57b68baeb524b64b', htmlFor: "inputfield", class: "label", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => hideTooltip() }, this.label, this.characterLimit && (h("span", { key: '90595c60a3cd63093fc2d8c342a1c496dfdb3f1e', class: "sr-only" }, " ", globalMessages.getCharacterLimit(this.characterLimit)))), this.labelPosition !== "none" && this.requiredField && (h("span", { key: '1399946787ff019b38a5133cfffa48cab48f2acd', class: "required", "aria-hidden": "true" }, "*"))), h("div", { key: '041cdc66b73a247dc0024a025955db41a84c8cef', class: "inner-wrapper" }, h("div", { key: 'b072be6d0a5637eaff95a11210e045931e28aead', class: `inputfield-wrapper ${this.errorMessage ? "invalid" : ""}`, style: this.inputWidth ? { width: this.inputWidth } : {} }, h("textarea", { key: '51a70fd2d2814f66e8d2767b98a78bba9f1c201f', 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: '10e8dffe7fa9ca8a0f2ee1eae1cb64c269ffd525', id: "info", class: "info" }, this.info)), h("div", { key: '8f5a778b2f9d29650b74815b976b98b9eaff2cee', id: "error", class: "error-message" }, this.errorMessage), h("div", { key: 'a1eb19abf2ac8e09bab23e66a52c3b6a0fa7d456', 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"; }