@watermarkinsights/ripple 5.7.0-7 → 5.7.0-8

package/dist/cjs/wm-toggletip.cjs.entry.js

@@ -2,10 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-e86c28b6.js');
-const functions = require('./functions-e24249e6.js');
+const index = require('./index-788526f5.js');
+const functions = require('./functions-5ac8a62f.js');
 
 const wmToggletipCss = ":host{--button-size:16px}:host(.size-small){--button-size:16px}:host(.size-small) .button:focus-visible{outline:3px solid var(--wmcolor-interactive-focus);outline-offset:2px}:host(.size-large){--button-size:40px}:host(.size-large) .button:focus-visible{outline:3px solid var(--wmcolor-interactive-focus);outline-offset:-3px}:host{--wmcolor-toggletip-background:var(--wmcolor-background-dark);--wmcolor-toggletip-icon-background:var(--wmcolor-background-dark);--wmcolor-toggletip-icon-text:var(--wmcolor-icon-ondark);--wmcolor-toggletip-text:var(--wmcolor-text-ondark);display:inline-block;position:relative;height:var(--button-size);width:var(--button-size);text-transform:none;font-weight:normal}:host .button{display:-ms-flexbox;display:flex;background:none;border:none;padding:0;width:inherit;height:inherit;border-radius:50%;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;position:relative;cursor:pointer}:host .button:before{display:inline-block;font:normal normal normal 24px/1 \"Material Design Icons\";font-size:inherit;text-rendering:auto;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:\"\\f2fc\";font-size:16px;color:var(--wmcolor-toggletip-icon-background);background:radial-gradient(var(--wmcolor-toggletip-icon-text) 40%, transparent 0%)}:host .button:focus-visible{outline:3px solid var(--wmcolor-interactive-focus);outline-offset:-3px}:host .tooltip{position:absolute;opacity:0;width:1px;height:1px;overflow:hidden;clip:rect(0, 0, 0, 0);pointer-events:none;font-family:inherit;font-size:0.875rem;text-transform:none;font-weight:normal;background:var(--wmcolor-tooltip-background);color:var(--wmcolor-tooltip-text);padding:0.375rem;line-height:normal;z-index:30;white-space:nowrap}:host .tooltip.hover{clip:auto;width:auto;height:auto;opacity:1;-webkit-transition:opacity 500ms 500ms;transition:opacity 500ms 500ms;padding:0.375rem;white-space:nowrap}:host .toggletip{position:absolute;max-width:13.75rem;width:-webkit-max-content;width:-moz-max-content;width:max-content;padding:0.5rem 0.75rem;border-radius:0.1875rem;background:var(--wmcolor-toggletip-background);color:var(--wmcolor-toggletip-text);font-size:14px;z-index:30}:host .toggletip.top:before{content:\"\";position:absolute;border:solid transparent;height:0;width:0;pointer-events:none;top:100%;border-top-color:var(--wmcolor-toggletip-background);border-top-width:0.25rem;border-left-width:0.375rem;border-right-width:0.375rem;margin-left:-0.375rem;left:50%}:host .toggletip.bottom:before{content:\"\";position:absolute;border:solid transparent;height:0;width:0;pointer-events:none;bottom:100%;border-bottom-color:var(--wmcolor-toggletip-background);border-bottom-width:0.25rem;border-left-width:0.375rem;border-right-width:0.375rem;margin-left:-0.375rem;left:50%}:host .toggletip.right:before{content:\"\";position:absolute;border:solid transparent;height:0;width:0;pointer-events:none;bottom:100%;border-right-color:var(--wmcolor-toggletip-background);border-right-width:0.25rem;border-top-width:0.375rem;border-bottom-width:0.375rem;border-left-width:0px;top:calc(50% - 6px);left:-0.1875rem}:host .toggletip.left:before{content:\"\";position:absolute;border:solid transparent;height:0;width:0;pointer-events:none;bottom:100%;border-left-color:var(--wmcolor-toggletip-background);border-left-width:0.25rem;border-top-width:0.375rem;border-bottom-width:0.375rem;border-right-width:0px;top:calc(50% - 6px);right:-0.1875rem}:host .toggletip.bottom-right:before{content:\"\";position:absolute;border:solid transparent;height:0;width:0;pointer-events:none;bottom:100%;border-bottom-color:var(--wmcolor-toggletip-background);border-bottom-width:0.25rem;border-left-width:0.375rem;border-right-width:0.375rem;margin-left:-0.375rem;left:50%;margin-left:unset;left:0.875rem}:host .toggletip.bottom-left:before{content:\"\";position:absolute;border:solid transparent;height:0;width:0;pointer-events:none;bottom:100%;border-bottom-color:var(--wmcolor-toggletip-background);border-bottom-width:0.25rem;border-left-width:0.375rem;border-right-width:0.375rem;margin-left:-0.375rem;left:50%;left:unset;margin-left:unset;right:0.875rem}:host .toggletip.top-right:before{content:\"\";position:absolute;border:solid transparent;height:0;width:0;pointer-events:none;top:100%;border-top-color:var(--wmcolor-toggletip-background);border-top-width:0.25rem;border-left-width:0.375rem;border-right-width:0.375rem;margin-left:-0.375rem;left:50%;margin-left:unset;left:0.875rem}:host .toggletip.top-left:before{content:\"\";position:absolute;border:solid transparent;height:0;width:0;pointer-events:none;top:100%;border-top-color:var(--wmcolor-toggletip-background);border-top-width:0.25rem;border-left-width:0.375rem;border-right-width:0.375rem;margin-left:-0.375rem;left:50%;left:unset;margin-left:unset;right:0.875rem}:host .toggletip.hidden{-webkit-transform:scale(0, 0) !important;transform:scale(0, 0) !important;visibility:hidden}:host .toggletip{top:calc(var(--button-size) / 2);left:calc(var(--button-size) / 2)}:host .toggletip.top{-webkit-transform:translate(-50%, calc(-100% - 18px));transform:translate(-50%, calc(-100% - 18px))}:host .toggletip.bottom{-webkit-transform:translate(-50%, 18px);transform:translate(-50%, 18px)}:host .toggletip.right{-webkit-transform:translate(18px, -50%);transform:translate(18px, -50%)}:host .toggletip.left{-webkit-transform:translate(calc(-100% - 18px), -50%);transform:translate(calc(-100% - 18px), -50%)}:host .toggletip.bottom-right{-webkit-transform:translate(-20px, 18px);transform:translate(-20px, 18px)}:host .toggletip.bottom-left{-webkit-transform:translate(calc(-100% + 20px), 18px);transform:translate(calc(-100% + 20px), 18px)}:host .toggletip.top-right{-webkit-transform:translate(-20px, calc(-100% - 18px));transform:translate(-20px, calc(-100% - 18px))}:host .toggletip.top-left{-webkit-transform:translate(calc(-100% + 20px), calc(-100% - 18px));transform:translate(calc(-100% + 20px), calc(-100% - 18px))}:host .sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;border:0 !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;white-space:nowrap !important;margin:-1px !important}";
+const WmToggletipStyle0 = wmToggletipCss;
 
 const Toggletip = class {
     constructor(hostRef) {
@@ -105,13 +106,13 @@ const Toggletip = class {
         }
     }
     render() {
-        return (index.h(index.Host, { class: `size-${this.targetSize}` }, index.h("button", { class: "button", type: "button", "aria-label": this.label, onClick: () => this.open(),
+        return (index.h(index.Host, { key: '3649c97b6ed097b840c0fbfaca36233f5c153e98', class: `size-${this.targetSize}` }, index.h("button", { key: '7245bb050268a782fe5ba7dbe5a72b57c5fbb4e8', class: "button", type: "button", "aria-label": this.label, onClick: () => this.open(),
             // In order to position the tooltip identically to the toggletip, it's presence is determined by these four events
-            onMouseEnter: () => functions.showTooltip(this.tooltipPosition, this.el, this.tooltipMessage), onMouseLeave: () => functions.hideTooltip(), onFocus: () => functions.showTooltip(this.tooltipPosition, this.el, this.tooltipMessage), onBlur: () => this.handleBlur() }), index.h("div", { ref: (el) => (this.toggletipEl = el), class: `toggletip ${this.isOpen ? "" : "hidden"} ${this.tooltipPosition}` }, this.tooltip), index.h("div", { ref: (el) => (this.liveRegionEl = el), class: "live-region sr-only", role: "status", "aria-live": "polite", "aria-atomic": "true" })));
+            onMouseEnter: () => functions.showTooltip(this.tooltipPosition, this.el, this.tooltipMessage), onMouseLeave: () => functions.hideTooltip(), onFocus: () => functions.showTooltip(this.tooltipPosition, this.el, this.tooltipMessage), onBlur: () => this.handleBlur() }), index.h("div", { key: '6617109efb830c025bdf8af64144c47e48d851ac', ref: (el) => (this.toggletipEl = el), class: `toggletip ${this.isOpen ? "" : "hidden"} ${this.tooltipPosition}` }, this.tooltip), index.h("div", { key: '305954841b7f92772c778c02907b4740bafdc4d1', ref: (el) => (this.liveRegionEl = el), class: "live-region sr-only", role: "status", "aria-live": "polite", "aria-atomic": "true" })));
     }
     static get delegatesFocus() { return true; }
     get el() { return index.getElement(this); }
 };
-Toggletip.style = wmToggletipCss;
+Toggletip.style = WmToggletipStyle0;
 
 exports.wm_toggletip = Toggletip;

package/dist/cjs/wm-uploader.cjs.entry.js

@@ -2,11 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-e86c28b6.js');
-const intl = require('./intl-5aeba788.js');
-require('./functions-e24249e6.js');
+const index = require('./index-788526f5.js');
+const intl = require('./intl-57d1cfd1.js');
+require('./functions-5ac8a62f.js');
 
 const wmUploaderCss = ":host .wm-button{-ms-transition:background-color 500ms cubic-bezier(0.4, 0, 0.2, 1), color 500ms cubic-bezier(0.4, 0, 0.2, 1), border 500ms cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition:background-color 500ms cubic-bezier(0.4, 0, 0.2, 1), color 500ms cubic-bezier(0.4, 0, 0.2, 1), border 500ms cubic-bezier(0.4, 0, 0.2, 1);-moz-transition:background-color 500ms cubic-bezier(0.4, 0, 0.2, 1), color 500ms cubic-bezier(0.4, 0, 0.2, 1), border 500ms cubic-bezier(0.4, 0, 0.2, 1);transition:background-color 500ms cubic-bezier(0.4, 0, 0.2, 1), color 500ms cubic-bezier(0.4, 0, 0.2, 1), border 500ms cubic-bezier(0.4, 0, 0.2, 1);-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;border-radius:5px;width:100%;border:2px solid transparent;font-family:inherit;font-size:0.75rem;font-weight:700;min-height:2.75rem;padding:12px 1.3333333333em;cursor:pointer;position:relative;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;text-decoration:none;text-transform:uppercase;letter-spacing:0.01875rem;overflow-wrap:break-word;-webkit-box-shadow:none;box-shadow:none}@media screen and (min-width: 48rem){:host .wm-button{min-height:3.3333333333em}}:host .wm-button.nowrap{display:inline-block;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host .wm-button:focus,:host .wm-button:focus-visible{outline:none;-webkit-box-shadow:none;box-shadow:none}:host .wm-button.user-is-tabbing:focus:not(:disabled):not(.disabled){outline:3px solid var(--wmcolor-interactive-focus);outline-offset:2px}:host .wm-button:active:not(:disabled):not(.disabled):not(.-textonly):not(.-actionbutton):not(.displayedoption){-ms-transform:scale(0.9, 0.9);-webkit-transform:scale(0.9, 0.9);-moz-transform:scale(0.9, 0.9);transform:scale(0.9, 0.9)}:host .wm-button .mdi{display:inline-block;font:normal normal normal 24px/1 \"Material Design Icons\";font-size:inherit;text-rendering:auto;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}:host .wm-button:not(.-icononly):not(.-navigational) .mdi{margin-right:0.3125rem;font-size:0.875rem}:host .wm-button[dir=RTL] :not(.-icononly) .mdi{margin-left:0.3125rem;margin-right:0}:host .wm-button.-primary:not(.-textonly){background:var(--wmcolor-button-background-primary);color:var(--wmcolor-button-text-primary)}:host .wm-button.-primary:not(.-textonly):not(:focus){-webkit-box-shadow:0 0 4px 0 rgba(0, 0, 0, 0.14), 0 3px 4px 0 rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);box-shadow:0 0 4px 0 rgba(0, 0, 0, 0.14), 0 3px 4px 0 rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2)}:host .wm-button.-primary:not(.-textonly):hover:not(:disabled):not(.disabled){background:var(--wmcolor-button-background-primary-hover)}:host .wm-button.-primary:not(.-textonly).dark:not(:disabled):not(.disabled){color:var(--wmcolor-button-text-primary-ondark);background:var(--wmcolor-button-background-primary-ondark)}:host .wm-button.-primary:not(.-textonly).dark:not(:disabled):not(.disabled):hover{background:var(--wmcolor-button-background-primary-hover-ondark)}:host .wm-button.-secondary{color:var(--wmcolor-button-text-secondary);border:2px solid var(--wmcolor-button-border-secondary);background:var(--wmcolor-button-background-secondary)}:host .wm-button.-secondary:hover:not(:disabled):not(.disabled){background:var(--wmcolor-button-background-secondary-hover);color:var(--wmcolor-button-text-secondary-hover);border-color:transparent}:host .wm-button.-secondary.dark:not(:disabled):not(.disabled){color:var(--wmcolor-button-text-secondary-ondark);background:var(--wmcolor-button-background-secondary-ondark);border-color:var(--wmcolor-button-border-secondary-ondark)}:host .wm-button.-secondary.dark:not(:disabled):not(.disabled):hover{color:var(--wmcolor-button-text-secondary-hover-ondark);background:var(--wmcolor-button-background-secondary-hover-ondark);border-color:transparent}:host .wm-button.-textonly{color:var(--wmcolor-button-text-textonly);-webkit-box-shadow:none;box-shadow:none;display:inline-block;letter-spacing:0;text-transform:none;text-align:initial;font-size:0.875rem;border:none;background:transparent;padding:0;height:auto;min-height:unset;border-radius:0;line-height:1;overflow-wrap:anywhere;border-radius:2px}:host .wm-button.-textonly+.-textonly{margin-left:0.3125rem}:host .wm-button.-textonly.small{font-size:0.625rem}:host .wm-button.-textonly:hover:not(:disabled):not(.disabled):not(.-permanentlydelete){text-decoration:underline}:host .wm-button.-textonly.dark{color:var(--wmcolor-button-text-textonly-ondark)}:host .wm-button.-textonly.dark:hover:not(:disabled):not(.disabled){text-decoration:underline}:host .wm-button.-textonly.-permanentlydelete{color:var(--wmcolor-button-background-delete)}:host .wm-button.-textonly.-permanentlydelete:hover:not(:disabled):not(.disabled):not(.dark){text-decoration:underline}:host .wm-button.-textonly.-permanentlydelete.dark:not(:disabled):not(.disabled){color:var(--wmcolor-button-text-textonly-ondark)}:host .wm-button.-icononly,:host .wm-button.-navigational{-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;border-radius:50%;font-size:1rem;padding:0;height:auto;line-height:1;min-width:2.75rem;min-height:2.75rem;text-align:center;letter-spacing:normal}:host .wm-button.-icononly:not(:focus),:host .wm-button.-navigational:not(:focus){-webkit-box-shadow:none;box-shadow:none}@media screen and (min-width: 48rem){:host .wm-button.-icononly,:host .wm-button.-navigational{min-width:2.5rem;min-height:2.5rem}}:host .wm-button.-icononly .mdi,:host .wm-button.-navigational .mdi{font-size:1.12rem}:host .wm-button.-icononly{border-width:1px !important;color:var(--wmcolor-button-icon-icononly);border-color:var(--wmcolor-button-border-icononly);background-color:var(--wmcolor-button-background-icononly)}:host .wm-button.-icononly:before{display:inline-block;font:normal normal normal 24px/1 \"Material Design Icons\";font-size:inherit;text-rendering:auto;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}:host .wm-button.-icononly:hover:not(:disabled):not(.disabled){background:var(--wmcolor-button-background-icononly-hover);color:var(--wmcolor-button-icon-icononly-hover);border-color:transparent}:host .wm-button.-icononly.dark:not(:disabled):not(.disabled){color:var(--wmcolor-button-icon-icononly-ondark);background:var(--wmcolor-button-background-icononly-ondark);border-color:var(--wmcolor-button-border-icononly-ondark)}:host .wm-button.-icononly.dark:not(:disabled):not(.disabled):hover{color:var(--wmcolor-button-icon-icononly-hover-ondark);background:var(--wmcolor-button-background-icononly-hover-ondark);border-color:transparent}:host .wm-button.-navigational{border:none !important;background-color:var(--wmcolor-button-background-navigational)}:host .wm-button.-navigational:not(.dark):not(:disabled):not(.disabled){color:var(--wmcolor-button-icon-navigational)}:host .wm-button.-navigational:not(.dark):not(:disabled):not(.disabled):hover,:host .wm-button.-navigational:not(.dark):not(:disabled):not(.disabled).selected{background-color:var(--wmcolor-button-background-navigational-hover)}:host .wm-button.-navigational:before{display:inline-block;font:normal normal normal 24px/1 \"Material Design Icons\";font-size:inherit;text-rendering:auto;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}:host .wm-button.-navigational.dark:not(:disabled):not(.disabled){color:var(--wmcolor-button-icon-navigational-ondark);background:var(--wmcolor-button-background-navigational-ondark)}:host .wm-button.-navigational.dark:not(:disabled):not(.disabled):hover{color:var(--wmcolor-button-icon-navigational-hover-ondark);background:var(--wmcolor-button-background-navigational-hover-ondark)}:host .wm-button.-permanentlydelete:not(.-textonly){background:var(--wmcolor-button-background-delete);border-color:var(--wmcolor-button-background-delete);color:var(--wmcolor-button-text-delete)}:host .wm-button.-permanentlydelete:not(.-textonly):hover:not(:disabled):not(.disabled):not(.dark){background:var(--wmcolor-button-background-delete-hover);border-color:var(--wmcolor-button-background-delete-hover)}:host .wm-button.-permanentlydelete:not(.-textonly).dark:not(:disabled):not(.disabled){background:var(--wmcolor-button-background-delete);border-color:var(--wmcolor-button-background-delete);color:var(--wmcolor-button-text-delete)}:host .wm-button.-permanentlydelete:not(.-textonly).dark:not(:disabled):not(.disabled):hover{background:var(--wmcolor-button-background-delete-hover);border-color:var(--wmcolor-button-background-delete-hover)}:host .wm-button.-pairnegative{background:var(--wmcolor-button-background-negative);border-color:var(--wmcolor-button-background-negative);color:var(--wmcolor-button-text-negative)}:host .wm-button.-pairnegative:hover:not(:disabled):not(.disabled){background:var(--wmcolor-button-background-negative-hover);border-color:var(--wmcolor-button-background-negative-hover)}:host .wm-button.-pairpositive{background:var(--wmcolor-button-background-positive);border-color:var(--wmcolor-button-background-positive);color:var(--wmcolor-button-text-positive)}:host .wm-button.-pairpositive:hover:not(:disabled):not(.disabled){background:var(--wmcolor-button-background-positive-hover);border-color:var(--wmcolor-button-background-positive-hover)}:host .wm-button.-selector,:host .wm-button.-selector-primary{-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;border-radius:3px;display:block;border-radius:3px;height:2.75rem;min-width:11.4375rem;padding:0 1.875rem 0 0.9375rem;line-height:normal;font-family:inherit;font-weight:700;font-size:0.75rem;text-transform:uppercase;letter-spacing:0.01875rem;text-align:left}@media screen and (min-width: 48rem){:host .wm-button.-selector,:host .wm-button.-selector-primary{height:2.5rem}}:host .wm-button.-selector:before,:host .wm-button.-selector-primary:before{display:inline-block;font:normal normal normal 24px/1 \"Material Design Icons\";font-size:inherit;text-rendering:auto;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:\"\\f140\";position:absolute;right:0.5625rem;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);font-size:1.12rem;font-weight:700;pointer-events:none}:host .wm-button.-selector:active,:host .wm-button.-selector-primary:active{-ms-transform:scale(1, 1) !important;-webkit-transform:scale(1, 1) !important;transform:scale(1, 1) !important}:host .wm-button.-selector::-moz-focus-inner,:host .wm-button.-selector-primary::-moz-focus-inner{border:0}:host .wm-button.-selector .overflowcontrol,:host .wm-button.-selector-primary .overflowcontrol{display:block;white-space:nowrap;text-overflow:ellipsis;overflow:visible}:host .wm-button.-selector{background:var(--wmcolor-button-background-selector);color:var(--wmcolor-button-text-selector);border-color:var(--wmcolor-button-border-selector)}:host .wm-button.-selector:hover:not(:disabled):not(.disabled){background:var(--wmcolor-button-background-selector-hover);color:var(--wmcolor-button-text-selector-hover);border-color:transparent}:host .wm-button.-selector.dark:not(:disabled):not(.disabled){color:var(--wmcolor-button-text-selector-ondark);border-color:var(--wmcolor-button-border-selector-ondark);background:var(--wmcolor-button-background-selector-ondark)}:host .wm-button.-selector.dark:not(:disabled):not(.disabled):hover{color:var(--wmcolor-button-text-selector-hover-ondark);background:var(--wmcolor-button-background-selector-hover-ondark);border-color:transparent}:host .wm-button.-selector-primary{background:var(--wmcolor-button-background-selectorprimary);color:var(--wmcolor-button-text-selectorprimary)}:host .wm-button.-selector-primary:hover:not(:disabled):not(.disabled){background:var(--wmcolor-button-background-selectorprimary-hover)}:host .wm-button.-selector-primary.dark:not(:disabled):not(.disabled){color:var(--wmcolor-button-text-selectorprimary-ondark);background:var(--wmcolor-button-background-selectorprimary-ondark)}:host .wm-button.-selector-primary.dark:not(:disabled):not(.disabled):hover{color:var(--wmcolor-button-text-selectorprimary-hover-ondark);background:var(--wmcolor-button-background-selectorprimary-hover-ondark)}:host .wm-button:disabled,:host .wm-button.disabled{cursor:default;pointer-events:none}:host .wm-button:disabled.-secondary:not(.-permanentlydelete),:host .wm-button.disabled.-secondary:not(.-permanentlydelete){-webkit-box-shadow:none;box-shadow:none;border-color:var(--wmcolor-button-border-secondary-disabled);color:var(--wmcolor-button-text-secondary-disabled)}:host .wm-button:disabled.-primary,:host .wm-button.disabled.-primary{background:var(--wmcolor-button-background-primary-disabled);color:var(--wmcolor-button-text-primary-disabled)}:host .wm-button:disabled.-permanentlydelete,:host .wm-button.disabled.-permanentlydelete{background:var(--wmcolor-button-background-delete-disabled);color:var(--wmcolor-button-text-delete-disabled);border-color:var(--wmcolor-button-background-delete-disabled)}:host .wm-button:disabled.-pairnegative,:host .wm-button.disabled.-pairnegative{background:var(--wmcolor-button-background-negative-disabled);border-color:var(--wmcolor-button-background-negative-disabled);color:var(--wmcolor-button-text-negative-disabled)}:host .wm-button:disabled.-pairpositive,:host .wm-button.disabled.-pairpositive{background:var(--wmcolor-button-background-positive-disabled);border-color:var(--wmcolor-button-background-positive-disabled);color:var(--wmcolor-button-text-positive-disabled)}:host .wm-button:disabled.-selector,:host .wm-button.disabled.-selector{color:var(--wmcolor-button-text-selector-disabled);border-color:var(--wmcolor-button-border-selector-disabled)}:host .wm-button:disabled.-selector-primary,:host .wm-button.disabled.-selector-primary{background:var(--wmcolor-button-background-selectorprimary-disabled);color:var(--wmcolor-button-text-selectorprimary-disabled)}:host .wm-button:disabled.-navigational,:host .wm-button.disabled.-navigational{color:var(--wmcolor-button-icon-navigational-disabled)}:host .wm-button:disabled.-icononly,:host .wm-button.disabled.-icononly{color:var(--wmcolor-button-icon-icononly-disabled);border-color:var(--wmcolor-button-border-icononly-disabled)}:host .wm-button:disabled.-textonly,:host .wm-button.disabled.-textonly{color:var(--wmcolor-button-text-textonly-disabled);background:transparent}:host .wm-button:disabled.dark.-icononly,:host .wm-button.disabled.dark.-icononly{background:transparent;color:var(--wmcolor-button-icon-icononly-disabled-ondark);border-color:var(--wmcolor-button-border-icononly-disabled-ondark)}:host .wm-button:disabled.dark.-navigational,:host .wm-button.disabled.dark.-navigational{color:var(--wmcolor-button-icon-navigational-disabled-ondark)}:host .wm-button:disabled.dark.-textonly,:host .wm-button.disabled.dark.-textonly{color:var(--wmcolor-button-text-textonly-disabled-ondark)}:host .wm-button:disabled.dark.-primary,:host .wm-button.disabled.dark.-primary{color:var(--wmcolor-button-text-primary-disabled-ondark);background:var(--wmcolor-button-background-primary-disabled-ondark)}:host .wm-button:disabled.dark.-secondary,:host .wm-button.disabled.dark.-secondary{background:transparent;color:var(--wmcolor-button-text-secondary-disabled-ondark);border-color:var(--wmcolor-button-border-secondary-disabled-ondark)}:host .wm-button:disabled.dark.-selector,:host .wm-button.disabled.dark.-selector{color:var(--wmcolor-button-text-selector-disabled-ondark);border-color:var(--wmcolor-button-border-selector-disabled-ondark);background:var(--wmcolor-button-background-selector-disabled-ondark)}:host .wm-button:disabled.dark.-selector-primary,:host .wm-button.disabled.dark.-selector-primary{color:var(--wmcolor-button-text-selectorprimary-disabled-ondark);background:var(--wmcolor-button-background-selectorprimary-disabled-ondark)}:host .wm-button:disabled.dark.-permanentlydelete:not(.-textonly),:host .wm-button.disabled.dark.-permanentlydelete:not(.-textonly){background:var(--wmcolor-button-background-delete-disabled-ondark);color:var(--wmcolor-button-text-delete-disabled-ondark)}:host a.wm-button,:host label.wm-button{height:auto;padding-top:0.75rem;padding-bottom:0.75rem}:host{display:block;position:relative;max-width:1140px}:host[dir=RTL] .mdi{margin-left:0.3125rem;margin-right:0}:host input:focus-visible+.wm-button{outline:3px solid var(--wmcolor-interactive-focus);outline-offset:2px}:host *{-webkit-box-sizing:border-box;box-sizing:border-box}.wm-button.disabled{pointer-events:initial !important}.wrapper{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;font-size:0.875rem}.wrapper .label{display:block;line-height:normal;font-weight:600;white-space:nowrap;margin-bottom:0.25rem}.wrapper .label .required{color:var(--wmcolor-text-required)}.wrapper.label-left{-ms-flex-direction:row;flex-direction:row}.wrapper.label-left .label-wrapper{line-height:2.5rem}.wrapper.label-left .label-wrapper .label{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;min-height:2.5rem;white-space:normal;margin-bottom:0;margin-right:0.75rem}.wrapper.label-none label{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;border:0 !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;white-space:nowrap !important;margin:-1px !important}.wrapper.invalid .label{color:var(--wmcolor-text-error)}.wrapper.invalid .label:after{display:inline-block;font:normal normal normal 24px/1 \"Material Design Icons\";font-size:inherit;text-rendering:auto;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:\"\\f026\";margin-left:0.3125rem}[dir=RTL] .wrapper.invalid .label:after{margin-left:0;margin-right:0.3125rem}.wrapper.rtl.label-left .label{margin-right:0;margin-left:0.75rem}#label{margin-bottom:0.5rem}.info-wrapper{position:relative;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.info-wrapper .info{font-size:0.875rem;margin-left:1rem}.accepted-types{font-size:0.875rem}.notif-wrapper{position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;margin-bottom:0.75rem}.requirements{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;font-size:0.875rem;margin-left:1rem}.notif,#error{font-size:0.875rem;font-style:italic}.notif#error,#error#error{display:block;font-style:italic;color:var(--wmcolor-text-error);font-size:0.875rem}.notif#error:not(:empty),#error#error:not(:empty){margin-top:0.25rem}.list-container{overflow-y:unset}.list-container.checkmark-spacer{margin-right:2.75rem}.list-container .file-list{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:0.5rem;padding:0;width:100%;margin:0}.sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;border:0 !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;white-space:nowrap !important;margin:-1px !important}::slotted(wm-file:nth-of-type(1)){margin-top:2.5rem}";
+const WmUploaderStyle0 = wmUploaderCss;
 
 const Uploader = class {
     constructor(hostRef) {
@@ -205,9 +206,9 @@ const Uploader = class {
         return (index.h("div", { class: `wrapper ${this.errorMessage ? "invalid" : ""}` }, index.h("div", { id: "label", class: `label` }, this.label, this.requiredField && (index.h("span", { class: "required", "aria-hidden": "true" }, "*")))));
     }
     render() {
-        return (index.h(index.Host, null, this.label && this.renderLabel(), this.renderHeader(), this.renderListContainer(), index.h("div", { ref: (el) => (this.assertiveLiveRegionEl = el), class: "live-region sr-only", "aria-live": "assertive" // since it's directly linked to the action the user took, it should be read in priority. With polite, some messages get dismissed in favor of the page title
+        return (index.h(index.Host, { key: 'd058c5c04f6a22125c54fa4cf076c23bc358b36e' }, this.label && this.renderLabel(), this.renderHeader(), this.renderListContainer(), index.h("div", { key: 'efa1a3c0b1a6258121356a41975b3599b6b575f9', ref: (el) => (this.assertiveLiveRegionEl = el), class: "live-region sr-only", "aria-live": "assertive" // since it's directly linked to the action the user took, it should be read in priority. With polite, some messages get dismissed in favor of the page title
             ,
-            "aria-atomic": "true" }), index.h("div", { ref: (el) => (this.politeLiveRegionEl = el), class: "live-region sr-only", "aria-live": "polite", "aria-atomic": "true" })));
+            "aria-atomic": "true" }), index.h("div", { key: 'c601d1a1a22c4cc77eb0d7af79dda540f8f14940', ref: (el) => (this.politeLiveRegionEl = el), class: "live-region sr-only", "aria-live": "polite", "aria-atomic": "true" })));
     }
     static get delegatesFocus() { return true; }
     get el() { return index.getElement(this); }
@@ -215,6 +216,6 @@ const Uploader = class {
         "errorMessage": ["announceError"]
     }; }
 };
-Uploader.style = wmUploaderCss;
+Uploader.style = WmUploaderStyle0;
 
 exports.wm_uploader = Uploader;

package/dist/cjs/wm-wrapper.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-e86c28b6.js');
+const index = require('./index-788526f5.js');
 
 const Wrapper = class {
     constructor(hostRef) {

package/dist/collection/collection-manifest.json

@@ -24,6 +24,9 @@
     "components/wm-modal/wm-modal-footer.js",
     "components/wm-modal/wm-modal-header.js",
     "components/wm-modal/wm-modal.js",
+    "components/wm-modal-pss/wm-modal-pss-footer.js",
+    "components/wm-modal-pss/wm-modal-pss-header.js",
+    "components/wm-modal-pss/wm-modal-pss.js",
     "components/wm-navigation/wm-navigation-hamburger.js",
     "components/wm-navigation/wm-navigation-item.js",
     "components/wm-navigation/wm-navigation.js",
@@ -46,8 +49,8 @@
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.8.2",
-    "typescriptVersion": "5.2.2"
+    "version": "4.21.0",
+    "typescriptVersion": "5.5.3"
   },
   "collections": [],
   "bundles": [
@@ -81,11 +84,6 @@
         "wm-input"
       ]
     },
-    {
-      "components": [
-        "wm-modal"
-      ]
-    },
     {
       "components": [
         "wm-navigator"
@@ -153,6 +151,20 @@
         "wm-select"
       ]
     },
+    {
+      "components": [
+        "wm-modal",
+        "wm-modal-footer",
+        "wm-modal-header"
+      ]
+    },
+    {
+      "components": [
+        "wm-modal-pss",
+        "wm-modal-pss-footer",
+        "wm-modal-pss-header"
+      ]
+    },
     {
       "components": [
         "wm-navigation",

package/dist/collection/components/charts/chartFunctions.js

@@ -68,7 +68,7 @@ export const allChartsDetails = {
     bar5: {
         size: 400,
         colors: [
-            colors.gray,
+            colors.gray, // this is only used if prop notStartedColor is set
             colors.lavender,
             colors.midnight,
             "#0089e4",

package/dist/collection/components/charts/priv-chart-popover/priv-chart-popover.js

@@ -111,11 +111,11 @@ export class ChartPopover {
         const titleAffordance = this.sliceDetails &&
             this.sliceDetails.title &&
             (this.sliceDetails.title[0] === "-" ? "negative" : this.sliceDetails.title[0] === "+" ? "positive" : "");
-        return (h(Host, null, !!this.open && this.sliceDetails ? (h("div", { "aria-hidden": "true", class: "popover" }, h("h1", { class: `title ${titleAffordance}` }, this.sliceDetails.title), h("p", { class: "text" }, this.sliceDetails.text), this.sliceDetails.buttonText ? (
+        return (h(Host, { key: 'd62b06c6554267fda571e17ec1cab1f38e9749cd' }, !!this.open && this.sliceDetails ? (h("div", { "aria-hidden": "true", class: "popover" }, h("h1", { class: `title ${titleAffordance}` }, this.sliceDetails.title), h("p", { class: "text" }, this.sliceDetails.text), this.sliceDetails.buttonText ? (
         // @ts-ignore
         h("button", { tabindex: "-1",
             // @ts-ignore
-            focusable: "false", class: "popover-button", onClick: () => this.handleButtonClick() }, h("svg", { class: "btn-icon", height: "9", width: "9" }, h("path", { fill: "#575195", d: "M0 3.38v2.25h9V3.38H0zM0 0v2.25h4.5V0H0zm6.19 6.75H0V9h6.19V6.75z" })), h("span", { class: "button-text" }, this.sliceDetails.buttonText))) : (""))) : (""), h("div", { ref: (el) => (this.liveRegion = el), class: "live-region sr-only", "aria-live": "polite", "aria-atomic": "true" }, this.open && this.renderLiveRegion())));
+            focusable: "false", class: "popover-button", onClick: () => this.handleButtonClick() }, h("svg", { class: "btn-icon", height: "9", width: "9" }, h("path", { fill: "#575195", d: "M0 3.38v2.25h9V3.38H0zM0 0v2.25h4.5V0H0zm6.19 6.75H0V9h6.19V6.75z" })), h("span", { class: "button-text" }, this.sliceDetails.buttonText))) : (""))) : (""), h("div", { key: 'fb7f82f2ea6b6b37a6c25fdc542792244aeb3975', ref: (el) => (this.liveRegion = el), class: "live-region sr-only", "aria-live": "polite", "aria-atomic": "true" }, this.open && this.renderLiveRegion())));
     }
     static get is() { return "priv-chart-popover"; }
     static get originalStyleUrls() {

package/dist/collection/components/charts/wm-chart/wm-chart.js

@@ -138,7 +138,7 @@ export class Chart {
         }
     }
     render() {
-        return (h(Host, { onBlur: () => exitChart.call(this) }, h("div", { ref: (el) => (this.componentWrapperEl = el), class: `component-wrapper ${this.currentChartType} ${this.isTabbing && !this.userIsNavigating ? "user-is-tabbing" : ""} ${this.labelPosition === "left" && this.currentChartType === "bar4" ? "left-label" : ""}`, role: "application", "aria-label": this.ariaLabelText, tabindex: 0, "aria-roledescription": chartMessages.interactiveChart, "aria-describedby": "chart-instructions" }, h("label", { id: `label-${this.uid}`, class: `label --${this.labelPosition}`, htmlFor: `graphic-${this.uid}` }, h("span", { class: "label-text" }, this.label), this.subinfo ? h("span", { class: "subinfo" }, this.subinfo) : ""), this.isBar && renderLegend.call(this, this.currentChartType), this.renderChart(), this.isDoughnut && renderLegend.call(this, this.currentChartType), h("priv-chart-popover", { class: this.isTabbing ? "user-is-tabbing" : "", onIntChartPopoverOpenChanged: (ev) => this.handlePopoverOpenChanged(ev) }), this.isBar && !this.printMode && renderHiddenValuesMessage()), renderInstructionsText()));
+        return (h(Host, { key: 'ef9b572d9a621ce353e3a9938f742fcbc112bdaa', onBlur: () => exitChart.call(this) }, h("div", { key: '1986f84f897d79ccf0d0b8553bcd8d10470910f1', ref: (el) => (this.componentWrapperEl = el), class: `component-wrapper ${this.currentChartType} ${this.isTabbing && !this.userIsNavigating ? "user-is-tabbing" : ""} ${this.labelPosition === "left" && this.currentChartType === "bar4" ? "left-label" : ""}`, role: "application", "aria-label": this.ariaLabelText, tabindex: 0, "aria-roledescription": chartMessages.interactiveChart, "aria-describedby": "chart-instructions" }, h("label", { key: 'dce7ee04fed3d9eb491eebf2c90c3b951776b2bb', id: `label-${this.uid}`, class: `label --${this.labelPosition}`, htmlFor: `graphic-${this.uid}` }, h("span", { key: '3a88022a876f5e26861cd38f7770dde825a23928', class: "label-text" }, this.label), this.subinfo ? h("span", { class: "subinfo" }, this.subinfo) : ""), this.isBar && renderLegend.call(this, this.currentChartType), this.renderChart(), this.isDoughnut && renderLegend.call(this, this.currentChartType), h("priv-chart-popover", { key: '3eebb869fd86ef29cce02239139019ba833d1e5f', class: this.isTabbing ? "user-is-tabbing" : "", onIntChartPopoverOpenChanged: (ev) => this.handlePopoverOpenChanged(ev) }), this.isBar && !this.printMode && renderHiddenValuesMessage()), renderInstructionsText()));
     }
     static get is() { return "wm-chart"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/charts/wm-line-chart/wm-line-chart.js

@@ -12,12 +12,12 @@ export class LineChart {
         this.displayedXIntervals = [];
         this.yIntervals = [];
         this.lineStyles = [
-            { color: "#8b86ca", icon: "f536" },
-            { color: "#2e1b46", icon: "f12f" },
-            { color: "#0089e4", icon: "f763" },
-            { color: "#088000", icon: "f4ce" },
-            { color: "#ea8500", icon: "f70a" },
-            { color: "#d54f41", icon: "f536" },
+            { color: "#8b86ca", icon: "f536" }, // lavender, triangle
+            { color: "#2e1b46", icon: "f12f" }, // midnight, circle
+            { color: "#0089e4", icon: "f763" }, // blue, square
+            { color: "#088000", icon: "f4ce" }, // forest, star
+            { color: "#ea8500", icon: "f70a" }, // orange, rhombus
+            { color: "#d54f41", icon: "f536" }, // red, upside down triangle
             { color: "#146ca9", icon: "f6ff" }, // blue, upside down triangle
         ];
         this.debouncedResize = debounce(async () => {
@@ -413,7 +413,7 @@ export class LineChart {
             popoverStyle = {
                 "--leftPosition": `0%`,
                 "--topPosition": "0%",
-                maxWidth: Math.min(this.el.clientWidth - 2, 400) + "px",
+                maxWidth: Math.min(this.el.clientWidth - 2, 400) + "px", // take up no more max-width than is visually available
                 transform: `translateX(calc(${displaceLeft}))`, // align with left edge of component
             };
         }
@@ -453,9 +453,9 @@ export class LineChart {
         return h("div", { class: "highlight", style: highlightStyle });
     }
     render() {
-        return (h(Host, { onBlur: () => this.resetDataPointFocus(), onMouseLeave: () => (this.popoverIndex = -1) }, h("div", { class: "component-wrapper", role: "application", "aria-roledescription": chartMessages.interactiveChart, "aria-label": this.label, "aria-describedby": "chart-description" }, this.renderLegend(), h("div", { class: "chart-wrapper" }, h("div", { class: "chart-label --y-axis", style: { "--labelWidth": this.labelWidth } }, this.yAxisLabel, this.parsedUnits[1] && ` (${this.parsedUnits[1]})`), this.renderYIntervals(), h("div", { ref: (el) => (this.plotAreaEl = el), class: `plot-area ${this.hasPartialInterval ? "" : "right-border"}`, style: {
+        return (h(Host, { key: '9817eea8765cce513a0848cd222a6409c8f1f912', onBlur: () => this.resetDataPointFocus(), onMouseLeave: () => (this.popoverIndex = -1) }, h("div", { key: '60de41437bb425483be4b5a24fc2468c8e8f8d4e', class: "component-wrapper", role: "application", "aria-roledescription": chartMessages.interactiveChart, "aria-label": this.label, "aria-describedby": "chart-description" }, this.renderLegend(), h("div", { key: '2029ed03f09b8c133ee430f7b1d70c9dded326f3', class: "chart-wrapper" }, h("div", { key: '4e9123177b8c02cf1fef010d370b2b1a23b2015c', class: "chart-label --y-axis", style: { "--labelWidth": this.labelWidth } }, this.yAxisLabel, this.parsedUnits[1] && ` (${this.parsedUnits[1]})`), this.renderYIntervals(), h("div", { key: '3cbe51169818095cd830e7b8099d3a10980e3cf2', ref: (el) => (this.plotAreaEl = el), class: `plot-area ${this.hasPartialInterval ? "" : "right-border"}`, style: {
                 "--backgroundSize": `${this.dataPointMatrix[0][this.xIntervals.indexOf(this.displayedXIntervals[1])].xPositionPercent}%`,
-            } }, this.highlightStart && this.renderHighlight(), this.renderData(), this.renderHoverAreas()), this.popoverIndex !== -1 && this.renderHoverIndicator(), this.popoverIndex !== -1 && this.renderPopover(), this.renderXIntervals(), h("div", { class: "chart-label --x-axis" }, this.xAxisLabel, this.parsedUnits[0] && ` (${this.parsedUnits[0]})`)), h("div", { id: "chart-description", class: "sr-only" }, `${lineChartMessages.instructions} ${this.description}`), h("div", { ref: (el) => (this.liveRegionEl = el), "aria-live": "polite", class: "sr-only" }, this.announcement))));
+            } }, this.highlightStart && this.renderHighlight(), this.renderData(), this.renderHoverAreas()), this.popoverIndex !== -1 && this.renderHoverIndicator(), this.popoverIndex !== -1 && this.renderPopover(), this.renderXIntervals(), h("div", { key: 'dad130dfb9063769dd36316cb060c90a8f1c8cb8', class: "chart-label --x-axis" }, this.xAxisLabel, this.parsedUnits[0] && ` (${this.parsedUnits[0]})`)), h("div", { key: 'bb4ffc7fbae6ab63e6f3e16c1d7e8a98c382e243', id: "chart-description", class: "sr-only" }, `${lineChartMessages.instructions} ${this.description}`), h("div", { key: 'de40d0eecd0db387912b45fb2b4576b37e3876aa', ref: (el) => (this.liveRegionEl = el), "aria-live": "polite", class: "sr-only" }, this.announcement))));
     }
     static get is() { return "wm-line-chart"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/charts/wm-progress-monitor/wm-progress-indicator.js

@@ -90,7 +90,7 @@ export class ProgressIndicator {
         }
     }
     render() {
-        return (h(Host, { onBlur: () => exitChart.call(this) }, h("div", { ref: (el) => (this.componentWrapperEl = el), class: `component-wrapper ${this.mode} ${this.isTabbing && !this.userIsNavigating ? "user-is-tabbing" : ""}`, role: "application", "aria-label": this.ariaLabelText, tabindex: "0", "aria-roledescription": this.chartRoleDescription, "aria-describedby": `chart-instructions` }, h("label", { id: `label-${this.uid}`, class: `label ${this.barLabelsWidth && this.mode === "bar" ? "custom-width" : ""}`, style: { "--custom-label-width": this.barLabelsWidth }, htmlFor: `graphic-${this.uid}` }, h("span", { class: "label-text" }, this.label), this.subinfo ? h("span", { class: "subinfo" }, this.subinfo) : ""), this.mode && this.renderBarOrDoughnut(), this.mode === "doughnut" ? renderLegend.call(this, this.mode) : "", h("priv-chart-popover", { class: this.isTabbing ? "user-is-tabbing" : "", onIntChartPopoverOpenChanged: (ev) => this.handlePopoverOpenChanged(ev) }), this.mode === "doughnut" ? renderCompletionMessage.call(this) : ""), renderInstructionsText()));
+        return (h(Host, { key: '16620db2087213bc753d2d757c7790a41670b1ab', onBlur: () => exitChart.call(this) }, h("div", { key: 'c676d6afdd78059bff7ae59f8ee275886e5bf22a', ref: (el) => (this.componentWrapperEl = el), class: `component-wrapper ${this.mode} ${this.isTabbing && !this.userIsNavigating ? "user-is-tabbing" : ""}`, role: "application", "aria-label": this.ariaLabelText, tabindex: "0", "aria-roledescription": this.chartRoleDescription, "aria-describedby": `chart-instructions` }, h("label", { key: '1b863341957baf0839d36be915d0aa632d03873f', id: `label-${this.uid}`, class: `label ${this.barLabelsWidth && this.mode === "bar" ? "custom-width" : ""}`, style: { "--custom-label-width": this.barLabelsWidth }, htmlFor: `graphic-${this.uid}` }, h("span", { key: 'be37ff1bc3863b7603944139fd78a0d7a6884e46', class: "label-text" }, this.label), this.subinfo ? h("span", { class: "subinfo" }, this.subinfo) : ""), this.mode && this.renderBarOrDoughnut(), this.mode === "doughnut" ? renderLegend.call(this, this.mode) : "", h("priv-chart-popover", { key: '8541969e643c69fd8e0090f69efd7c038ea1e2ea', class: this.isTabbing ? "user-is-tabbing" : "", onIntChartPopoverOpenChanged: (ev) => this.handlePopoverOpenChanged(ev) }), this.mode === "doughnut" ? renderCompletionMessage.call(this) : ""), renderInstructionsText()));
     }
     static get is() { return "wm-progress-indicator"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/charts/wm-progress-monitor/wm-progress-monitor.js

@@ -59,7 +59,7 @@ export class ProgressMonitor {
         }))));
     }
     render() {
-        return (h(Host, { class: this.mode === "doughnut" ? "row" : "column" }, this.modeInitialized && this.groupLegend && this.mode === "bar" && this.renderLegend(), this.modeInitialized && h("slot", null)));
+        return (h(Host, { key: '6b654a2da62f9ca402ba16163e1d1497c5c99be8', class: this.mode === "doughnut" ? "row" : "column" }, this.modeInitialized && this.groupLegend && this.mode === "bar" && this.renderLegend(), this.modeInitialized && h("slot", { key: 'd3b70aa0e0c409bc0bcf2d6b20ad2b9c44c8eb11' })));
     }
     static get is() { return "wm-progress-monitor"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/datepickers/priv-calendar/priv-calendar.js

@@ -544,11 +544,11 @@ export class PrivCalendar {
             }), class: "header-btn arw-btn" }, h("span", { class: "mdi" }, "\uF142"))), h("div", { "aria-labelledby": "popup-title-year", role: "grid", class: "months" }, h("div", { role: "row", class: "month-row" }, calendar_months.slice(0, 3).map((month, index) => this.renderMonth(month, index))), h("div", { role: "row", class: "month-row" }, calendar_months.slice(3, 6).map((month, index) => this.renderMonth(month, index + 3))), h("div", { role: "row", class: "month-row" }, calendar_months.slice(6, 9).map((month, index) => this.renderMonth(month, index + 6))), h("div", { role: "row", class: "month-row" }, calendar_months.slice(9).map((month, index) => this.renderMonth(month, index + 9))))));
     }
     render() {
-        return (h(Host, { onMouseOut: (ev) => {
+        return (h(Host, { key: 'bf3b27c085d62d04e59c469103af514a5652ca39', onMouseOut: (ev) => {
                 // @ts-ignore
                 if (!this.el.parentElement.contains(ev.toElement))
                     this.outOfCal.emit();
-            }, role: "application", "aria-describedby": "application" }, this.view === "day" ? this.renderDayView() : this.renderMonthView(), h("div", { id: "application", class: "sr-only" }, this.calName, this.calInstructions)));
+            }, role: "application", "aria-describedby": "application" }, this.view === "day" ? this.renderDayView() : this.renderMonthView(), h("div", { key: '3433d2109b066f3e3446cc6d8c486a5e303d6939', id: "application", class: "sr-only" }, this.calName, this.calInstructions)));
     }
     static get is() { return "priv-calendar"; }
     static get originalStyleUrls() {

package/dist/collection/components/datepickers/wm-date-range.js

@@ -429,23 +429,23 @@ export class DateRange {
         }
     }
     render() {
-        return (h(Host, { "aria-busy": "false" }, h("div", { ref: (d) => (this.wrapperEl = d), class: "wrapper" }, h("div", { class: `range-wrapper ${this.calWidth <= this.availSpace ? "cal" : ""}` }, h("div", { class: "label-wrapper", id: "start-label-wrapper" }, h("label", { ref: (e) => (this.labelEl = e), id: "startlabel", htmlFor: "start-date-input", class: "label", title: `${this.labelStart} (${this.dateFormat})` }, this.labelStart, this.requiredField && (h("span", { "aria-hidden": "true", class: "required" }, "*")))), h("div", { class: "label-wrapper", id: "end-label-wrapper" }, h("label", { id: "endlabel", htmlFor: "end-date-input", class: "label", title: `${this.labelEnd} (${this.dateFormat})` }, this.labelEnd, this.requiredField && (h("span", { "aria-hidden": "true", class: "required" }, "*")))), h("input", { disabled: this._disabled, type: "text", id: "start-date-input", class: `date-input input ${this.invalidStart ? "invalid" : ""}`, name: "start-date", placeholder: this.dateFormat, value: this.valueStart, onFocus: () => this.handleFocus(), onInput: (ev) => this.handleStartInput(ev), onBlur: () => this.handleStartInputBlur(), ref: (input) => (this.startInputEl = input), "aria-describedby": "error", "aria-label": this.labelStart, "aria-required": this.requiredField ? "true" : null }), h("div", { id: "hyphen" }, "\u00A0-\u00A0"), h("input", { disabled: this._disabled, type: "text", id: "end-date-input", class: `date-input input ${this.invalidEnd ? "invalid" : ""}`, name: "end-date", placeholder: this.dateFormat, value: this.valueEnd, onFocus: () => this.handleFocus(), onInput: (ev) => this.handleEndInput(ev), onBlur: () => this.handleEndInputBlur(), ref: (input) => (this.endInputEl = input), "aria-describedby": "error", "aria-label": this.labelEnd, "aria-required": this.requiredField ? "true" : null }), h("div", { class: "toggle-wrapper", id: "toggle-wrapper" }, this.calWidth <= this.availSpace && (h("button", { disabled: this.disabled, onClick: this.togglePopup.bind(this), "aria-describedby": "start-date-input end-date-input", "aria-label": intl.formatMessage({
+        return (h(Host, { key: 'ffe68e278952d867cd9d1bf4945a91a9218aff41', "aria-busy": "false" }, h("div", { key: '256076b4ecb500f80bde6a0f4b74e0e090a8ebba', ref: (d) => (this.wrapperEl = d), class: "wrapper" }, h("div", { key: '1a16aee3f2c90b120fea6c3de7853a5f58f95c2b', class: `range-wrapper ${this.calWidth <= this.availSpace ? "cal" : ""}` }, h("div", { key: '2bf81bc7b7820b71820fa903f612247deb6b8592', class: "label-wrapper", id: "start-label-wrapper" }, h("label", { key: '09e8a0ee78eb5f19f6a3e94ce8c2bfefaff4a909', ref: (e) => (this.labelEl = e), id: "startlabel", htmlFor: "start-date-input", class: "label", title: `${this.labelStart} (${this.dateFormat})` }, this.labelStart, this.requiredField && (h("span", { key: '0deb9d862a52d6b044572a06645408805be1126e', "aria-hidden": "true", class: "required" }, "*")))), h("div", { key: 'ec5368e1736f8b83290238b483965aab0f9f3945', class: "label-wrapper", id: "end-label-wrapper" }, h("label", { key: '6cb070abde6ce9064a030c408894f29af6118984', id: "endlabel", htmlFor: "end-date-input", class: "label", title: `${this.labelEnd} (${this.dateFormat})` }, this.labelEnd, this.requiredField && (h("span", { key: 'e4def58969ee10495955c76ff6df4af0b721d98b', "aria-hidden": "true", class: "required" }, "*")))), h("input", { key: '141c909bdeae5c05fc5ca24bfe3f62c756c59bb1', disabled: this._disabled, type: "text", id: "start-date-input", class: `date-input input ${this.invalidStart ? "invalid" : ""}`, name: "start-date", placeholder: this.dateFormat, value: this.valueStart, onFocus: () => this.handleFocus(), onInput: (ev) => this.handleStartInput(ev), onBlur: () => this.handleStartInputBlur(), ref: (input) => (this.startInputEl = input), "aria-describedby": "error", "aria-label": this.labelStart, "aria-required": this.requiredField ? "true" : null }), h("div", { key: '71e1f4d5bfac5687c6c0dc78b0c7bf0e23963932', id: "hyphen" }, "\u00A0-\u00A0"), h("input", { key: '66da2b524e10f19471dfe98e8088f29223fcf1e5', disabled: this._disabled, type: "text", id: "end-date-input", class: `date-input input ${this.invalidEnd ? "invalid" : ""}`, name: "end-date", placeholder: this.dateFormat, value: this.valueEnd, onFocus: () => this.handleFocus(), onInput: (ev) => this.handleEndInput(ev), onBlur: () => this.handleEndInputBlur(), ref: (input) => (this.endInputEl = input), "aria-describedby": "error", "aria-label": this.labelEnd, "aria-required": this.requiredField ? "true" : null }), h("div", { key: 'd13e35362381766550f1555db5bc86043f29ae55', class: "toggle-wrapper", id: "toggle-wrapper" }, this.calWidth <= this.availSpace && (h("button", { key: '083f289ad53ef80ebf5bcb04f28cb85f4bf1cce6', disabled: this.disabled, onClick: this.togglePopup.bind(this), "aria-describedby": "start-date-input end-date-input", "aria-label": intl.formatMessage({
                 id: "date.selectRange",
                 defaultMessage: "Select range",
                 description: "Button text for screen readers.",
-            }), ref: (el) => (this.toggleEl = el), "aria-expanded": `${this.isExpanded}`, class: "toggle", id: "toggle" }, h("span", { class: "calendar", title: intl.formatMessage({
+            }), ref: (el) => (this.toggleEl = el), "aria-expanded": `${this.isExpanded}`, class: "toggle", id: "toggle" }, h("span", { key: 'c127dd1ac1f883218997250dc0455d2cd67b4e54', class: "calendar", title: intl.formatMessage({
                 id: "date.calendarView",
                 defaultMessage: "Calendar View",
                 description: "Calendar button",
-            }) })))), this.renderCalendars()), h("div", null, h("div", { id: "live-region", "aria-live": "polite", "aria-relevant": "text", class: "sr-only" }), h("div", { id: "month-title", class: "sr-only" }, intl.formatMessage({
+            }) })))), this.renderCalendars()), h("div", { key: 'f73ab32bcf2cebc82a8afd9129a1d3fcf9e0bc2b' }, h("div", { key: '2d7f933a92f36483ecfd801c4ae17bf7baa92c71', id: "live-region", "aria-live": "polite", "aria-relevant": "text", class: "sr-only" }), h("div", { key: 'ca4fd9da247934ff4644b099c883fed0158d0c86', id: "month-title", class: "sr-only" }, intl.formatMessage({
             id: "date.selectMonth",
             defaultMessage: "Activate to select a month.",
             description: "Calendar button",
-        })), h("div", { id: "year-title", class: "sr-only" }, intl.formatMessage({
+        })), h("div", { key: '22d83e68a09a15072afcc3368fdf957838a5da1f', id: "year-title", class: "sr-only" }, intl.formatMessage({
             id: "date.selectYear",
             defaultMessage: "Activate to select a year.",
             description: "Calendar button",
-        }))), h("div", { id: "error", class: "error" }, this.errorMessage), h("div", { ref: (el) => (this.liveRegionEl = el), class: "sr-only", "aria-live": "polite", "aria-atomic": "true" }))));
+        }))), h("div", { key: '6fbc73d0c1d280133b445c9fd4acd14a1be673e0', id: "error", class: "error" }, this.errorMessage), h("div", { key: '4dac5d364845b7a4c656db95e0aae877b902692b', ref: (el) => (this.liveRegionEl = el), class: "sr-only", "aria-live": "polite", "aria-atomic": "true" }))));
     }
     static get is() { return "wm-date-range"; }
     static get encapsulation() { return "shadow"; }
@@ -720,14 +720,17 @@ export class DateRange {
                 "complexType": {
                     "signature": "(inputFormat: string, outputFormat: string, date?: string) => Promise<string>",
                     "parameters": [{
-                            "tags": [],
-                            "text": ""
+                            "name": "inputFormat",
+                            "type": "string",
+                            "docs": ""
                         }, {
-                            "tags": [],
-                            "text": ""
+                            "name": "outputFormat",
+                            "type": "string",
+                            "docs": ""
                         }, {
-                            "tags": [],
-                            "text": ""
+                            "name": "date",
+                            "type": "string | undefined",
+                            "docs": ""
                         }],
                     "references": {
                         "Promise": {
@@ -746,8 +749,9 @@ export class DateRange {
                 "complexType": {
                     "signature": "(input?: string) => Promise<boolean>",
                     "parameters": [{
-                            "tags": [],
-                            "text": ""
+                            "name": "input",
+                            "type": "string | undefined",
+                            "docs": ""
                         }],
                     "references": {
                         "Promise": {

package/dist/collection/components/datepickers/wm-datepicker.js

@@ -212,23 +212,23 @@ export class DatePicker {
         this.liveRegionEl.textContent = message;
     }
     render() {
-        return (h(Host, { "aria-busy": "false", class: `${this.errorMessage ? "invalid" : ""}` }, h("div", { ref: (d) => (this.dpWrapperEl = d), class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { class: "label-wrapper", ref: (e) => (this.labelWrapperEl = e) }, this.labelPosition !== "none" && (h("label", { id: "datepickerLabel", htmlFor: "date-input", class: "label", title: `${this.label} (${this.dateFormat})` }, this.label, this.requiredField && (h("span", { "aria-hidden": "true", class: "required" }, "*"))))), h("div", null, h("div", { class: "single-wrapper input" }, h("input", { disabled: this.isDisabled, type: "text", id: "single-date-input", class: "date-input", name: "date", placeholder: this.dateFormat, value: this.value, onFocus: () => this.handleInputFocus(), onInput: (ev) => this.handleInput(ev), onBlur: () => this.handleInputBlur(), onChange: () => this.handleInputChange(), ref: (input) => (this.inputEl = input), "aria-describedby": "error", "aria-label": this.label, "aria-required": this.requiredField ? "true" : null }), h("div", { class: "container", id: "wm-container" }, h("button", { disabled: this.disabled, onClick: this.togglePopup.bind(this), "aria-label": intl.formatMessage({
+        return (h(Host, { key: 'daac54e642a4c00b37dff5167cf0fd3322b98874', "aria-busy": "false", class: `${this.errorMessage ? "invalid" : ""}` }, h("div", { key: '0633196770bcd3965a8fe60ecd1972653ed3e25c', ref: (d) => (this.dpWrapperEl = d), class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: 'ba80e128d0345635d90c4641c508d05eb4d3794e', class: "label-wrapper", ref: (e) => (this.labelWrapperEl = e) }, this.labelPosition !== "none" && (h("label", { key: '4905e937c7e6249537c5ed43f77331883d006794', id: "datepickerLabel", htmlFor: "date-input", class: "label", title: `${this.label} (${this.dateFormat})` }, this.label, this.requiredField && (h("span", { key: '637e35c7f255629aa75cf177822154a1e6e6e7b3', "aria-hidden": "true", class: "required" }, "*"))))), h("div", { key: '8676b6e03022cd8787d0a77a0b3e6c4dd8419b59' }, h("div", { key: 'e9f24478e3beb32f38ef65aff197d7872e1f3d67', class: "single-wrapper input" }, h("input", { key: '4661fedeafd62c45e1aec2aad699faede4d750b6', disabled: this.isDisabled, type: "text", id: "single-date-input", class: "date-input", name: "date", placeholder: this.dateFormat, value: this.value, onFocus: () => this.handleInputFocus(), onInput: (ev) => this.handleInput(ev), onBlur: () => this.handleInputBlur(), onChange: () => this.handleInputChange(), ref: (input) => (this.inputEl = input), "aria-describedby": "error", "aria-label": this.label, "aria-required": this.requiredField ? "true" : null }), h("div", { key: '0a2afc12a5e44bcb8a9deb92c7171945c67289f4', class: "container", id: "wm-container" }, h("button", { key: 'b6b63ef23dee93ff470de4d5a5d2769086bcb808', disabled: this.disabled, onClick: this.togglePopup.bind(this), "aria-label": intl.formatMessage({
                 id: "date.selectDate",
                 defaultMessage: "Select date",
                 description: "Button text for screen readers.",
-            }), "aria-describedby": "single-date-input", ref: (el) => (this.toggleEl = el), "aria-expanded": `${this.isExpanded}`, class: "toggle", id: "toggle" }, h("span", { class: "calendar", title: intl.formatMessage({
+            }), "aria-describedby": "single-date-input", ref: (el) => (this.toggleEl = el), "aria-expanded": `${this.isExpanded}`, class: "toggle", id: "toggle" }, h("span", { key: 'debb3ae89f32960a7a269b9f6c951f5bb7bfd874', class: "calendar", title: intl.formatMessage({
                 id: "date.calendarView",
                 defaultMessage: "Calendar View",
                 description: "Calendar button",
-            }) })), h("div", { class: `popup-wrapper ${this.calEl && this.calEl.view}-view ${this.openUp ? "expand-upwards" : ""}`, id: "popup-wrapper", ref: (el) => (this.popupEl = el), onClick: () => (this.popupClicked = true) }, h("div", { tabIndex: 0, onFocus: () => this.calEl.focusLastFocusable() }), h("priv-calendar", { ref: (el) => (this.calEl = el), startDate: this.calendarDate, focusDate: this.calendarDate, class: "inside" }), h("div", { tabIndex: 0, onFocus: () => this.calEl.focusFirstFocusable() })), h("div", { id: "live-region", "aria-live": "polite", "aria-relevant": "text", class: "sr-only" }), h("div", { id: "month-title", class: "sr-only" }, intl.formatMessage({
+            }) })), h("div", { key: '87ff9723a2960d5725f5f731dcc0d30719a8bb09', class: `popup-wrapper ${this.calEl && this.calEl.view}-view ${this.openUp ? "expand-upwards" : ""}`, id: "popup-wrapper", ref: (el) => (this.popupEl = el), onClick: () => (this.popupClicked = true) }, h("div", { key: '989a9bc4bd537394bfb2fe1ecd83311bb57187d4', tabIndex: 0, onFocus: () => this.calEl.focusLastFocusable() }), h("priv-calendar", { key: '3253b7e256dc7137aae2c4c2a79099e0093ecc65', ref: (el) => (this.calEl = el), startDate: this.calendarDate, focusDate: this.calendarDate, class: "inside" }), h("div", { key: '9cacded01a3163bebd249d6ed4601ca9a6c3dfd0', tabIndex: 0, onFocus: () => this.calEl.focusFirstFocusable() })), h("div", { key: 'fe890d55779f0619bc6c144d1fd47cc2cb26fe04', id: "live-region", "aria-live": "polite", "aria-relevant": "text", class: "sr-only" }), h("div", { key: '71e28a0c1aaa2c1ddce511bfbf0d9cf6794382ab', id: "month-title", class: "sr-only" }, intl.formatMessage({
             id: "date.selectMonth",
             defaultMessage: "Activate to select a month.",
             description: "Calendar button",
-        })), h("div", { id: "year-title", class: "sr-only" }, intl.formatMessage({
+        })), h("div", { key: '2df13fae273fd2186e35d50ab58d888b45bf0b40', id: "year-title", class: "sr-only" }, intl.formatMessage({
             id: "date.selectYear",
             defaultMessage: "Activate to select a year.",
             description: "Calendar button",
-        })))), h("div", { id: "error", class: "error" }, this.errorMessage), h("div", { ref: (el) => (this.liveRegionEl = el), class: "sr-only", "aria-live": "polite", "aria-atomic": "true" })))));
+        })))), h("div", { key: '71ca47b61c3ffd7e19c273ae3e4c68a7f3ef1afd', id: "error", class: "error" }, this.errorMessage), h("div", { key: '5adc31a91d03cd34d01e48a88617481051905341', ref: (el) => (this.liveRegionEl = el), class: "sr-only", "aria-live": "polite", "aria-atomic": "true" })))));
     }
     static get is() { return "wm-datepicker"; }
     static get encapsulation() { return "shadow"; }
@@ -433,14 +433,17 @@ export class DatePicker {
                 "complexType": {
                     "signature": "(inputFormat: string, outputFormat: string, date?: string) => Promise<string>",
                     "parameters": [{
-                            "tags": [],
-                            "text": ""
+                            "name": "inputFormat",
+                            "type": "string",
+                            "docs": ""
                         }, {
-                            "tags": [],
-                            "text": ""
+                            "name": "outputFormat",
+                            "type": "string",
+                            "docs": ""
                         }, {
-                            "tags": [],
-                            "text": ""
+                            "name": "date",
+                            "type": "string | undefined",
+                            "docs": ""
                         }],
                     "references": {
                         "Promise": {
@@ -459,8 +462,9 @@ export class DatePicker {
                 "complexType": {
                     "signature": "(input?: string) => Promise<boolean>",
                     "parameters": [{
-                            "tags": [],
-                            "text": ""
+                            "name": "input",
+                            "type": "string | undefined",
+                            "docs": ""
                         }],
                     "references": {
                         "Promise": {

package/dist/collection/components/selects/priv-option-list/priv-option-list.js

@@ -391,7 +391,7 @@ export class PrivOptionList {
         });
     }
     render() {
-        return (h("div", { class: "list-wrapper" }, this.isInNestedSelect && this.renderReturnBtn(), this.search && this.renderSearchField(), this.visibleSelectAllButton && this.renderSelectAllButton(), h("div", { id: "list", class: "options-wrapper", tabindex: -1, role: "listbox", "aria-multiselectable": this.multiple ? "true" : null, "aria-labelledby": "label", ref: (el) => (this.listboxEl = el), style: { "--max-height": this.effectiveMaxHeight } }, this.searchTerm && this.filteredOptions.length === 0 && this.renderSearchFailedMessage(), this.multiple && this.renderCloneOptions(), h("slot", null)), h("div", { id: "optionlist-announcement", "aria-live": "polite", "aria-atomic": "true", class: "sr-only", ref: (el) => (this.liveRegionEl = el) }, this.announcement)));
+        return (h("div", { key: '7597806482ea7bf73439a41c22b2dc2d0e3047ff', class: "list-wrapper" }, this.isInNestedSelect && this.renderReturnBtn(), this.search && this.renderSearchField(), this.visibleSelectAllButton && this.renderSelectAllButton(), h("div", { key: '5a74fb5303a7631bf76dc5be9ef637d03f9bc132', id: "list", class: "options-wrapper", tabindex: -1, role: "listbox", "aria-multiselectable": this.multiple ? "true" : null, "aria-labelledby": "label", ref: (el) => (this.listboxEl = el), style: { "--max-height": this.effectiveMaxHeight } }, this.searchTerm && this.filteredOptions.length === 0 && this.renderSearchFailedMessage(), this.multiple && this.renderCloneOptions(), h("slot", { key: 'bcb6e4c35ebd1ee5a9a4295f5eff61072e2dd8a1' })), h("div", { key: 'c1c11fb35beca1207598239727a61939fe996697', id: "optionlist-announcement", "aria-live": "polite", "aria-atomic": "true", class: "sr-only", ref: (el) => (this.liveRegionEl = el) }, this.announcement)));
     }
     static get is() { return "priv-option-list"; }
     static get originalStyleUrls() {
@@ -675,8 +675,9 @@ export class PrivOptionList {
                 "complexType": {
                     "signature": "(option: HTMLElement) => Promise<void>",
                     "parameters": [{
-                            "tags": [],
-                            "text": ""
+                            "name": "option",
+                            "type": "HTMLElement",
+                            "docs": ""
                         }],
                     "references": {
                         "Promise": {
@@ -699,8 +700,9 @@ export class PrivOptionList {
                 "complexType": {
                     "signature": "(optionToSelect?: \"next\" | \"previous\") => Promise<void>",
                     "parameters": [{
-                            "tags": [],
-                            "text": ""
+                            "name": "optionToSelect",
+                            "type": "\"next\" | \"previous\" | undefined",
+                            "docs": ""
                         }],
                     "references": {
                         "Promise": {

package/dist/collection/components/selects/wm-nested-select/wm-nested-select.js

@@ -316,16 +316,16 @@ export class NestedSelect {
                 this.isExpanded ? this.close() : this.open();
             },
         };
-        return (h(Host, { onBlur: (ev) => this.handleComponentBlur(ev) }, h("div", { class: `wrapper ${getTextDir()} label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { class: "label-wrapper" }, h("label", { class: "label", id: "label", htmlFor: "selectbtn" }, this.label, 
+        return (h(Host, { key: '854bfbccf53069ca95a2c7e3beb60ec7cef4fe52', onBlur: (ev) => this.handleComponentBlur(ev) }, h("div", { key: 'db844c36c341b311a1178899c3dd6f75b3cde901', class: `wrapper ${getTextDir()} label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: '57b77d879d3065c2fd6e51c86a4cf9589d2b69dd', class: "label-wrapper" }, h("label", { key: 'd175fa9541a93c22be70143a10b77a087913087e', class: "label", id: "label", htmlFor: "selectbtn" }, this.label, 
         // we can't use aria-required or required attributes because it's invalid on the elements we're using (button controlling a listbox)
-        this.requiredField ? (h("span", { class: "required" }, h("span", { class: "sr-only" }, globalMessages.requiredField), h("span", { "aria-hidden": "true" }, "*"))) : (""))), h("div", { class: "button-wrapper" }, h("button", Object.assign({}, buttonProps, { class: `displayedoption ${this.isExpanded ? "expanded" : ""}`, ref: (el) => (this.buttonEl = el), onBlur: (ev) => this.handleButtonBlur(ev) }), h("span", { class: "overflowcontrol" }, h("span", { class: "button-text" }, this.renderButtonText())), this.renderOverflowCount(), h("div", { ref: (el) => (this.measurementAreaEl = el), class: "measurement-area", "aria-hidden": "true" })), h("div", { class: `dropdown  ${this.openUp ? "upwards" : ""}`, ref: (el) => (this.dropdownEl = el) }, h("div", { ref: (el) => (this.menuEl = el), class: "menu", style: { "--max-height": this.constrainedMaxHeight } }, this.renderClearSelectionButton(), this.optgroupEls.map((optgroupEl) => {
+        this.requiredField ? (h("span", { class: "required" }, h("span", { class: "sr-only" }, globalMessages.requiredField), h("span", { "aria-hidden": "true" }, "*"))) : (""))), h("div", { key: '1e100f81edc7d1dd9c6e1224cd1d5cfeb68e37a7', class: "button-wrapper" }, h("button", Object.assign({ key: 'e8e68bc84666875a5a478aae79d04cc57d231f4b' }, buttonProps, { class: `displayedoption ${this.isExpanded ? "expanded" : ""}`, ref: (el) => (this.buttonEl = el), onBlur: (ev) => this.handleButtonBlur(ev) }), h("span", { key: 'e0dc1adac5cdcb76da590a065b8fc80cead8df69', class: "overflowcontrol" }, h("span", { key: '36427c454c08d30402f50424772c4c3fe6d764e3', class: "button-text" }, this.renderButtonText())), this.renderOverflowCount(), h("div", { key: '2725d1b3b564a3d6a879e598ef5b0bf192dcd1d6', ref: (el) => (this.measurementAreaEl = el), class: "measurement-area", "aria-hidden": "true" })), h("div", { key: '54b75659619de70978e10ab8e3739938686084f8', class: `dropdown  ${this.openUp ? "upwards" : ""}`, ref: (el) => (this.dropdownEl = el) }, h("div", { key: 'a6894d7f78c6eb4a155c2b55f88f43a47377ce7d', ref: (el) => (this.menuEl = el), class: "menu", style: { "--max-height": this.constrainedMaxHeight } }, this.renderClearSelectionButton(), this.optgroupEls.map((optgroupEl) => {
             return (h("button", { class: `menuitem group-btn ${optgroupEl.disabled ? "disabled" : ""}`, role: "menuitem", "data-label": optgroupEl.label, tabindex: -1, "aria-disabled": optgroupEl.disabled, onClick: () => {
                     if (!optgroupEl.disabled) {
                         optgroupEl.isExpanded = !optgroupEl.isExpanded;
                         forceUpdate(this.el);
                     }
                 }, onKeyDown: (ev) => this.handleMenuitemKeydown(ev) }, h("span", null, optgroupEl.label), this.renderSelectionCount(optgroupEl), optgroupEl.disabled && h("div", { class: "disabled-indication" }, "Disabled")));
-        })), h("div", { ref: (el) => (this.optListWrapperEl = el), class: "option-list-wrapper hidden" }, h("slot", null))), h("div", { id: "error", class: this.errorMessage ? "error-message" : "" }, this.errorMessage)))));
+        })), h("div", { key: '52fd5904572fe4691cbae1422ccaf285f4a408dd', ref: (el) => (this.optListWrapperEl = el), class: "option-list-wrapper hidden" }, h("slot", { key: '7e3cf958381b7035914cc7f40bd386b923b1ef31' }))), h("div", { key: '0b4dfb9684d0f61cef7781d3b20d87d0ce7771ee', id: "error", class: this.errorMessage ? "error-message" : "" }, this.errorMessage)))));
     }
     static get is() { return "wm-nested-select"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/selects/wm-optgroup/wm-optgroup.js

@@ -48,7 +48,7 @@ export class Optgroup {
         handleDisabledAttribute(this.el, this.isDisabled);
     }
     render() {
-        return (h(Host, null, h("div", { class: `list-wrapper` }, h("priv-option-list", { ref: (el) => (this.optionListEl = el), multiple: this.parentNestedSelect.multiple, search: this.parentNestedSelect.search, maxHeight: this.parentNestedSelect.constrainedMaxHeight, searchPlaceholder: this.parentNestedSelect.searchPlaceholder, optgroupLabel: this.label, selectAll: this.parentNestedSelect.selectAll, onOptionListAllSelected: () => this.wmOptgroupAllSelected.emit(), onOptionListAllDeselected: () => this.wmOptgroupAllDeselected.emit() }, h("slot", null)))));
+        return (h(Host, { key: '1db6713870fdb7ed53744c5ea7a04f767e404c34' }, h("div", { key: '504d6788ecbe82ac24ab4b7a0231b10be1435d3c', class: `list-wrapper` }, h("priv-option-list", { key: 'f435b5664196850ba254cab7868c9e55eee7be33', ref: (el) => (this.optionListEl = el), multiple: this.parentNestedSelect.multiple, search: this.parentNestedSelect.search, maxHeight: this.parentNestedSelect.constrainedMaxHeight, searchPlaceholder: this.parentNestedSelect.searchPlaceholder, optgroupLabel: this.label, selectAll: this.parentNestedSelect.selectAll, onOptionListAllSelected: () => this.wmOptgroupAllSelected.emit(), onOptionListAllDeselected: () => this.wmOptgroupAllDeselected.emit() }, h("slot", { key: '583dd769b16ba249c6c68618d5431b7b359f69e8' })))));
     }
     static get is() { return "wm-optgroup"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/selects/wm-option/wm-option.js

@@ -143,7 +143,7 @@ export class Option {
         this.parentOptionList.addEventListener("optionListSearchChanged", (ev) => this.handleSearch(ev));
     }
     render() {
-        return (h(Host, { role: "option", tabindex: this.focused ? 0 : -1, class: this.hostClasses }, h("div", { class: `option-wrapper ${this.parentOptionList.multiple ? "checkbox" : ""}` }, h("span", { class: "option-text", "aria-hidden": "true", ref: (el) => (this.textEl = el) }, this.el.textContent), h("span", { class: "sr-only" }, this.el.textContent)), h("div", { class: "subinfo" }, this.subinfo)));
+        return (h(Host, { key: '3dced6efa2b70875a3bb7489ee0cfe5961c628b5', role: "option", tabindex: this.focused ? 0 : -1, class: this.hostClasses }, h("div", { key: '65bb987febc952dfb5960abb0f2cd4f767f00ddc', class: `option-wrapper ${this.parentOptionList.multiple ? "checkbox" : ""}` }, h("span", { key: 'ce1d604a7e8c6107aaf6fefeaec2097c8bdcf214', class: "option-text", "aria-hidden": "true", ref: (el) => (this.textEl = el) }, this.el.textContent), h("span", { key: '1b398c044798828a2689478abc62a83c1ed1057c', class: "sr-only" }, this.el.textContent)), h("div", { key: '3d6a694ab8d006fedfeee03d31ca17ef98f92dc2', class: "subinfo" }, this.subinfo)));
     }
     static get is() { return "wm-option"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/selects/wm-select/wm-select.js

@@ -240,9 +240,9 @@ export class Select {
             ["aria-expanded"]: this.isExpanded ? "true" : "false",
             onClick: () => (this.isExpanded ? this.close() : this.open()),
         };
-        return (h(Host, { onBlur: (ev) => this.handleComponentBlur(ev) }, h("div", { class: `wrapper ${getTextDir()} label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { class: "label-wrapper" }, h("label", { class: "label", id: "label", htmlFor: "selectbtn" }, this.label, 
+        return (h(Host, { key: '7ead860acbbe0ed90df29d8dc1e4983eaae06075', onBlur: (ev) => this.handleComponentBlur(ev) }, h("div", { key: '9c619b9dadd84ac348d576915fe4fddd22043dce', class: `wrapper ${getTextDir()} label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: '1d460bff83458176bdf9c005bd29f95260b25b78', class: "label-wrapper" }, h("label", { key: 'a65b6fd04e2251d1751567716be3637d9c4487d5', class: "label", id: "label", htmlFor: "selectbtn" }, this.label, 
         // we can't use aria-required or required attributes because it's invalid on the elements we're using (button controlling a listbox)
-        this.requiredField ? (h("span", { class: "required" }, h("span", { class: "sr-only" }, globalMessages.requiredField), h("span", { "aria-hidden": "true" }, "*"))) : (""))), h("div", { class: "button-wrapper" }, h("button", Object.assign({}, buttonProps, { class: "displayedoption", ref: (el) => (this.buttonEl = el), onBlur: (ev) => this.handleButtonBlur(ev), onFocus: () => this.close() }), h("span", { class: `overflowcontrol ${showSubinfo ? "hassubinfo" : ""}` }, h("span", { class: "button-text" }, this.renderButtonText()), showSubinfo && h("span", { class: "subinfo" }, this.selectedOptions[0].subinfo)), this.renderOverflowCount(), h("div", { ref: (el) => (this.measurementAreaEl = el), class: "measurement-area", "aria-hidden": "true" })), h("div", { class: `dropdown ${this.isExpanded ? "open" : ""} ${this.openUp ? "upwards" : ""}`, ref: (el) => (this.dropdownEl = el) }, h("priv-option-list", { ref: (el) => (this.optionListEl = el), multiple: this.multiple, search: this.search, selectAll: this.selectAll, maxHeight: this.maxHeight, searchPlaceholder: this.searchPlaceholder, onOptionListCloseRequested: () => this.close(), onOptionListAllSelected: () => this.wmSelectAllSelected.emit(), onOptionListAllDeselected: () => this.wmSelectAllDeselected.emit() }, h("slot", null))), h("div", { id: "error", class: this.errorMessage ? "error-message" : "" }, this.errorMessage), h("div", { id: "announcement", "aria-live": "polite", "aria-atomic": "true", class: "sr-only", ref: (el) => (this.liveRegionEl = el) }, this.announcement)))));
+        this.requiredField ? (h("span", { class: "required" }, h("span", { class: "sr-only" }, globalMessages.requiredField), h("span", { "aria-hidden": "true" }, "*"))) : (""))), h("div", { key: '1c500f55c3ccbb46f208fe09d7a43f1ba6889fcc', class: "button-wrapper" }, h("button", Object.assign({ key: '8e5dbb45e6506e0da669e81803f336bd74514f22' }, buttonProps, { class: "displayedoption", ref: (el) => (this.buttonEl = el), onBlur: (ev) => this.handleButtonBlur(ev), onFocus: () => this.close() }), h("span", { key: '4e74a580783a59697e6f61d424eed93fae07e93f', class: `overflowcontrol ${showSubinfo ? "hassubinfo" : ""}` }, h("span", { key: '6c7bdda7c9791c9b1b7c0778560e82247372d1b2', class: "button-text" }, this.renderButtonText()), showSubinfo && h("span", { key: 'd89591179a495208d8246dc2c4d5c1b8f364e5fc', class: "subinfo" }, this.selectedOptions[0].subinfo)), this.renderOverflowCount(), h("div", { key: 'fbd5082faa1173b35e0b24bfe164fb5101bc411c', ref: (el) => (this.measurementAreaEl = el), class: "measurement-area", "aria-hidden": "true" })), h("div", { key: 'd2008a57cb7af8a681e815a1f975003a3fb6aa2e', class: `dropdown ${this.isExpanded ? "open" : ""} ${this.openUp ? "upwards" : ""}`, ref: (el) => (this.dropdownEl = el) }, h("priv-option-list", { key: '2650eb9ef1436bebe748feef99eb3a8ec38586b8', ref: (el) => (this.optionListEl = el), multiple: this.multiple, search: this.search, selectAll: this.selectAll, maxHeight: this.maxHeight, searchPlaceholder: this.searchPlaceholder, onOptionListCloseRequested: () => this.close(), onOptionListAllSelected: () => this.wmSelectAllSelected.emit(), onOptionListAllDeselected: () => this.wmSelectAllDeselected.emit() }, h("slot", { key: '676ccd44bc1bf4541c6f0f3796a676427d180f5c' }))), h("div", { key: 'ef16f68e3bca6458a92838d9b49f85b1e791a72c', id: "error", class: this.errorMessage ? "error-message" : "" }, this.errorMessage), h("div", { key: '28f5400534f2db8e3122dbe56d7468694bba6fff', id: "announcement", "aria-live": "polite", "aria-atomic": "true", class: "sr-only", ref: (el) => (this.liveRegionEl = el) }, this.announcement)))));
     }
     static get is() { return "wm-select"; }
     static get encapsulation() { return "shadow"; }