@watermarkinsights/ripple 5.6.0-1 → 5.6.0-3

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

@@ -2,12 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-788526f5.js');
-const intl = require('./intl-2b550151.js');
-require('./functions-05e7ad5a.js');
+const index = require('./index-e86c28b6.js');
+const intl = require('./intl-4a3a3a94.js');
+require('./functions-a70fcff7.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) {
@@ -206,9 +205,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, { key: '4f9a5f1221aa84bad9e734bfba6a87f89fcdfd84' }, this.label && this.renderLabel(), this.renderHeader(), this.renderListContainer(), index.h("div", { key: '59f21688992efe6da96d837efee78d65db18f8d4', 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, 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
             ,
-            "aria-atomic": "true" }), index.h("div", { key: '1e68b8375c3d41706c5b84af7485d75f99e35dd9', ref: (el) => (this.politeLiveRegionEl = el), class: "live-region sr-only", "aria-live": "polite", "aria-atomic": "true" })));
+            "aria-atomic": "true" }), index.h("div", { 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); }
@@ -216,6 +215,6 @@ const Uploader = class {
         "errorMessage": ["announceError"]
     }; }
 };
-Uploader.style = WmUploaderStyle0;
+Uploader.style = wmUploaderCss;
 
 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-788526f5.js');
+const index = require('./index-e86c28b6.js');
 
 const Wrapper = class {
     constructor(hostRef) {

package/dist/collection/collection-manifest.json

@@ -10,6 +10,11 @@
     "components/datepickers/wm-date-range.js",
     "components/datepickers/wm-datepicker.js",
     "components/datepickers/priv-calendar/priv-calendar.js",
+    "components/selects/priv-option-list/priv-option-list.js",
+    "components/selects/wm-nested-select/wm-nested-select.js",
+    "components/selects/wm-optgroup/wm-optgroup.js",
+    "components/selects/wm-select/wm-select.js",
+    "components/wm-option/wm-option.js",
     "components/wm-action-menu/wm-action-menu.js",
     "components/wm-menuitem/wm-menuitem.js",
     "components/wm-button/wm-button.js",
@@ -25,8 +30,6 @@
     "components/wm-navigator/wm-navigator.js",
     "components/wm-navigator/priv-navigator-button/priv-navigator-button.js",
     "components/wm-navigator/priv-navigator-item/priv-navigator-item.js",
-    "components/wm-option/wm-option.js",
-    "components/wm-select/wm-select.js",
     "components/wm-pagination/wm-pagination.js",
     "components/wm-search/wm-search.js",
     "components/wm-snackbar/wm-snackbar.js",
@@ -43,8 +46,8 @@
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.21.0",
-    "typescriptVersion": "5.5.3"
+    "version": "4.8.2",
+    "typescriptVersion": "5.2.2"
   },
   "collections": [],
   "bundles": [

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

@@ -68,7 +68,7 @@ export const allChartsDetails = {
     bar5: {
         size: 400,
         colors: [
-            colors.gray, // this is only used if prop notStartedColor is set
+            colors.gray,
             colors.lavender,
             colors.midnight,
             "#0089e4",
@@ -471,7 +471,7 @@ export function removeSegmentInfoHighlight(infoEls) {
 }
 function renderPath(s, chartType) {
     const percentageValue = amountToPercent(s.amount, this.total, true) + "%";
-    return !isNaN(s.amount) && (h("g", { transform: `translate(${this.chartDetails.padding / 2}, ${this.chartDetails.padding / 2})` }, h("path", { id: s.id, class: "segment doughnut-segment", fill: s.amount ? s.color : "transparent", d: getPathData.call(this, s.amount, s.offset, chartType), onClick: (ev) => handleSliceClick.call(this, ev, s), onFocus: (ev) => handleSliceFocus.call(this, ev, s), onKeyDown: (ev) => handleSliceKeyDown.call(this, ev), role: "img", "aria-label": `${s.legend}, ${percentageValue}`, "data-segmentindex": s.index })));
+    return (!isNaN(s.amount) && (h("g", { transform: `translate(${this.chartDetails.padding / 2}, ${this.chartDetails.padding / 2})` }, h("path", { id: s.id, class: "segment doughnut-segment", fill: s.amount ? s.color : "transparent", d: getPathData.call(this, s.amount, s.offset, chartType), onClick: (ev) => handleSliceClick.call(this, ev, s), onFocus: (ev) => handleSliceFocus.call(this, ev, s), onKeyDown: (ev) => handleSliceKeyDown.call(this, ev), role: "img", "aria-label": `${s.legend}, ${percentageValue}`, "data-segmentindex": s.index }))));
 }
 function renderFocusOutline() {
     return this.isTabbing ? (h("g", { transform: `translate(${this.chartDetails.padding / 2}, ${this.chartDetails.padding / 2})` }, h("use", { tabindex: -1, id: "kfbg1", xlinkHref: `#${this.focusedSliceId}` }), h("use", { tabindex: -1, id: "kfstroke", xlinkHref: `#${this.focusedSliceId}` }), h("use", { tabindex: -1, id: "kfbg2", xlinkHref: `#${this.focusedSliceId}` }))) : ("");
@@ -520,7 +520,7 @@ export function renderStackedBar(chartType) {
             (this.isBar || this.isDoughnut) && this.showHiddenValuesMessage(showMsg);
         });
     }
-    return (h("div", { class: "chart-wrapper bar-wrapper" }, isHybridBar ? (h("div", { class: "single-perc" }, amountToPercent(this.slicesDetails[0].amount, this.total, true) + "%")) : (""), this.chartType === "bar3" && this.drawAxis(), h("div", { class: `inner-stacked-bar-wrapper ${showValue(this.valueFormat)}` }, !isHybridBar ? (h("div", { class: "values" }, this.slicesDetails.map((s) => this.renderBarText(s, 5)))) : (""), h("div", { class: "stacked-bar-segments-wrapper" }, this.slicesDetails.map((s) => renderStackedBarSegment.call(this, s, 5))), isHybridBar ? renderCompletionMessage.call(this) : "")));
+    return (h("div", { class: "chart-wrapper bar-wrapper" }, isHybridBar ? (h("div", { class: "single-perc" }, amountToPercent(this.slicesDetails[0].amount, this.total, true) + "%")) : (""), this.chartType === "bar3" && this.drawAxis(), h("div", { class: `inner-stacked-bar-wrapper ${showValue(this.valueFormat)}` }, !isHybridBar ? (h("div", { class: `values ${this.valueFormat}` }, this.slicesDetails.map((s) => this.renderBarText(s, 5)))) : (""), h("div", { class: "stacked-bar-segments-wrapper" }, this.slicesDetails.map((s) => renderStackedBarSegment.call(this, s, 5))), isHybridBar ? renderCompletionMessage.call(this) : ""), this.chartType === "bar3" ? (h("div", { class: "bar3-axis-label", "aria-hidden": "true" }, h("span", null, "0%"), h("span", null, "100%"))) : ("")));
 }
 function renderStackedBarSegment(s, minimumWidth) {
     const segmentPercentage = amountToPercent(s.amount, this.total, false);

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

@@ -0,0 +1,16 @@
+import { amountToDegree, amountToPercent, polarToCartesian, toFixed } from "./chartFunctions";
+describe("Chart functions", () => {
+    it("truncates", () => {
+        expect(toFixed(3.34872348)).toEqual(3.34);
+    });
+    it("converts polar coords to cartesian", () => {
+        // args: half, radius, startAngle, endAngle?
+        expect(polarToCartesian(12, 5, 34, 45)).toStrictEqual({ x1: 61.74, x2: 54.42, y1: 45.55, y2: 54.42 });
+        expect(polarToCartesian(77, 25, 4)).toStrictEqual({ x: 1997.31, y: 211.28 });
+    });
+    it("calculates percentages and degrees", () => {
+        expect(amountToPercent(3, 9, true)).toBe(33); // last arg is whether output should be int vs float
+        expect(amountToPercent(3, 9, false)).toBe(33.33);
+        expect(amountToDegree(3, 9)).toBe(120);
+    });
+});

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

@@ -0,0 +1,81 @@
+import { newE2EPage } from "@stencil/core/testing";
+import { AxePuppeteer } from "@axe-core/puppeteer";
+describe("priv-chart-popover", () => {
+    let page, 
+    // chart: any,
+    // paths: any,
+    host, liveRegion;
+    beforeEach(async () => {
+        page = await newE2EPage();
+        await page.setContent(`<html lang='en'><head><title>Page</title></head><body><main style="height: 3000px"><h1>Title</h1>
+      <wm-chart label="the label">
+      <wm-chart-slice amount="2" legend="Realized" popover-title="2/10" popover-text="Dreams Realized" popover-button-text="Click for bucket list"></wm-chart-slice>
+      <wm-chart-slice amount="8" legend="Not Realized" popover-title="8/10" popover-text="Dreams Not Realized" popover-button-text="Click for bucket list"></wm-chart-slice>
+      </wm-chart>
+      </main></body></html>`);
+        // chart = await page.find("wm-chart");
+        // paths = await page.findAll("wm-chart >>> path");
+        host = await page.find("wm-chart >>> priv-chart-popover");
+        liveRegion = await page.find("wm-chart >>> .live-region");
+        // firstRect = await page.evaluate(() => {
+        //   document.querySelector("wm-chart")!.shadowRoot!.querySelectorAll("rect")
+        // })
+        await page.waitForChanges();
+    });
+    it("passes Axe checks", async () => {
+        const results = await new AxePuppeteer(page).analyze();
+        expect(results.violations.length).toBe(0);
+    });
+    it("renders", async () => {
+        expect(host).not.toBeNull();
+    });
+    it("is has a live region", async () => {
+        expect(liveRegion).toEqualAttribute("aria-live", "polite");
+    });
+    // keyboard actions are handled from wm-chart. popover never actually receives focus
+    it("shows and hide the popover", async () => {
+        // initially div.popover is not there (content is not rendered when it is closed)
+        let popover = await page.find("wm-chart >>> .popover");
+        expect(popover).toBeNull();
+        // it opens / renders content when path is focused
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        await page.keyboard.press("ArrowDown");
+        await page.waitForChanges();
+        popover = await page.find("wm-chart >>> .popover");
+        expect(popover).not.toBeNull();
+        // closes on click away
+        await page.click("h1"); // click out of the component or slice
+        await page.waitForChanges();
+        popover = await page.find("wm-chart >>> .popover");
+        expect(popover).toBeNull();
+    });
+    it("hides the popover on scroll", async () => {
+        // initially div.popover is not there (content is not rendered when it is closed)
+        let popover = await page.find("wm-chart >>> .popover");
+        expect(popover).toBeNull();
+        // it opens / renders content when path is focused
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        await page.keyboard.press("ArrowDown");
+        await page.waitForChanges();
+        popover = await page.find("wm-chart >>> .popover");
+        expect(popover).not.toBeNull();
+        // closes on scroll
+        page.evaluate(() => {
+            window.scrollBy(0, 2000);
+        });
+        await page.waitForTimeout(300); // waitForChanges alone doesn't always work
+        await page.waitForChanges(); // but somehow both are needed
+        popover = await page.find("wm-chart >>> .popover");
+        expect(popover).toBeNull();
+    });
+    // button fires event wmPopoverButtonClicked when clicked, but I can't figure out how to test if the event has fired
+});
+// Not tested:
+// Screen readers should re-announce the content when the button is clicked a second time (or more). Otherwise the parent element looks interactive but is inert.
+// Sources:
+// https://inclusive-components.design/tooltips-toggletips/
+// https://www.w3.org/WAI/PF/aria/roles#status
+// https://watermarkinsights.atlassian.net/wiki/spaces/WDS/pages/51938711/Popovers
+// https://watermarkinsights.atlassian.net/secure/RapidBoard.jspa?rapidView=26&projectKey=DS&modal=detail&selectedIssue=DS-12

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, { key: 'cf297947c1ddcfb70f303a0b2dc7bf787c4eb3eb' }, !!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, 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 ? (
         // @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", { key: 'a797c755a77ea252b20238735a4b10957897a897', 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", { 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/screenshots.e2e.js

@@ -0,0 +1,96 @@
+import { newE2EPage } from "@stencil/core/testing";
+// split into different tests because screenshot functionality currently has a non-customizable, 600x600px viewport
+// see https://stenciljs.com/docs/screenshot-visual-diff
+describe("wm-chart", () => {
+    it("doughnut1 doesn't change", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`<wm-chart id="doughnut1" chart-type="doughnut1" label="Type: doughnut1">
+      <wm-chart-slice amount="9" legend="Direct" popover-title="9/10" popover-text="Direct Measures"></wm-chart-slice>
+      <wm-chart-slice amount="1" legend="Indirect" popover-title="1/10" popover-text="Indirect Measures"></wm-chart-slice>
+      <wm-chart-slice amount="0" legend="Unspecified" popover-title="0/10" popover-text="Unspecified Measures"></wm-chart-slice>
+    </wm-chart>`);
+        const results = await page.compareScreenshot();
+        expect(results).toMatchScreenshot({ allowableMismatchedPixels: 10 });
+    });
+    it("doughnut2 & doughnut2b don't change", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`<wm-chart id="doughnut2" chart-type="doughnut2" label="Type: doughnut2">
+      <wm-chart-slice amount="4" legend="Met" popover-title="4/15" popover-text="Objectives Met" popover-button-text="Direct Details"></wm-chart-slice>
+      <wm-chart-slice amount="5" legend="Not Met" popover-title="5/15" popover-text="Objectives Not Met" popover-button-text="Indirect Details"></wm-chart-slice>
+      <wm-chart-slice amount="6" legend="Not started" popover-title="6/15" popover-text="Objectives Not Started"></wm-chart-slice>
+    </wm-chart>
+
+    <wm-chart id="doughnut2b" chart-type="doughnut2" label="Type: doughnut2">
+      <wm-chart-slice amount="10" legend="Low Risk" popover-title="10/200" popover-text="Students at Low Risk"></wm-chart-slice>
+      <wm-chart-slice amount="115" legend="Medium Risk" popover-title="115/200" popover-text="Students at Medium Risk"></wm-chart-slice>
+      <wm-chart-slice amount="35" legend="High Risk" popover-title="35/200" popover-text="Students at High Risk"></wm-chart-slice>
+      <wm-chart-slice amount="40" legend="Not Indicated" popover-title="40/200" popover-text="Students Not Indicated"></wm-chart-slice>
+    </wm-chart>`);
+        const results = await page.compareScreenshot();
+        expect(results).toMatchScreenshot({ allowableMismatchedPixels: 10 });
+    });
+    it("doughnut3 doesn't change", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`<wm-chart id="doughnut3" chart-type="doughnut3" label="Type: doughnut3">
+      <wm-chart-slice amount="1" legend="Non risus" popover-title="1/15" popover-text="Lorem"></wm-chart-slice>
+      <wm-chart-slice amount="2" legend="Non mi mattis" popover-title="2/15" popover-text="Ispum"></wm-chart-slice>
+      <wm-chart-slice amount="3" legend="Pulvinar" popover-title="3/15" popover-text="Dolor sit amet"></wm-chart-slice>
+      <wm-chart-slice amount="4" legend="Cras ut" popover-title="4/15" popover-text="Consectetur"></wm-chart-slice>
+      <wm-chart-slice amount="1" legend="Dui congue" popover-title="1/15" popover-text="Adipiscing elit"></wm-chart-slice>
+      <wm-chart-slice amount="2" legend="Ante faucibus" popover-title="2/15" popover-text="Duis vitae dapidus erat"></wm-chart-slice>
+      <wm-chart-slice amount="3" legend="Finibus" popover-title="3/15" popover-text="Cras"></wm-chart-slice>
+    </wm-chart>`);
+        const results = await page.compareScreenshot();
+        expect(results).toMatchScreenshot({ allowableMismatchedPixels: 10 });
+    });
+    it("bar2-5 don't change", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`
+  <wm-chart chart-type="bar2" label="An Example of a bar2 Chart" value-format="percentage">
+    <wm-chart-slice amount="4" legend="Not Started" popover-title="4/10" popover-text="Outcomes Not Started"></wm-chart-slice>
+    <wm-chart-slice amount="3" legend="In Progress" popover-title="3/10" popover-text="Outcomes In Progress"></wm-chart-slice>
+    <wm-chart-slice amount="1" legend="Met" popover-title="1/10" popover-text="Outcomes Met"></wm-chart-slice>
+    <wm-chart-slice amount="2" legend="Not Met" popover-title="2/10" popover-text="Outcomes Not Met"></wm-chart-slice>
+  </wm-chart>
+
+  <wm-chart chart-type="bar3" label="An Example of a bar3 Chart" value-format="percentage">
+    <wm-chart-slice amount="1" legend="Exceeded" popover-title="1/10" popover-text="Outcomes Exceeded" popover-button-text="Exceeded Details"></wm-chart-slice>
+    <wm-chart-slice amount="2" legend="Met" popover-title="2/10" popover-text="Outcomes Met" popover-button-text="Met Details"></wm-chart-slice>
+    <wm-chart-slice amount="3" legend="Approached" popover-title="3/10" popover-text="Outcomes Approached"></wm-chart-slice>
+    <wm-chart-slice amount="4" legend="Not Met" popover-title="4/10" popover-text="Outcomes Not Met"></wm-chart-slice>
+  </wm-chart>
+
+  <wm-chart chart-type="bar4" label="An Example of a bar4 Chart" value-format="none">
+    <wm-chart-slice amount="1" legend="Not started" popover-title="1/10" popover-text="Outcomes Not Started"></wm-chart-slice>
+    <wm-chart-slice amount="3" legend="In Progress" popover-title="3/10" popover-text="Outcomes In Progress"></wm-chart-slice>
+    <wm-chart-slice amount="6" legend="Completed" popover-title="6/10" popover-text="Completed Outcomes"></wm-chart-slice>
+  </wm-chart>
+
+  <wm-chart chart-type="bar5" label="An Example of a bar5 Chart" value-format="amount">
+    <wm-chart-slice amount="1" legend="Non risus" popover-title="1/15" popover-text="Lorem"></wm-chart-slice>
+    <wm-chart-slice amount="2" legend="Non mi mattis" popover-title="2/15" popover-text="Ispum"></wm-chart-slice>
+    <wm-chart-slice amount="3" legend="Pulvinar" popover-title="3/15" popover-text="Dolor sit amet"></wm-chart-slice>
+    <wm-chart-slice amount="4" legend="Cras ut" popover-title="4/15" popover-text="Consectetur"></wm-chart-slice>
+    <wm-chart-slice amount="1" legend="Dui congue" popover-title="1/15" popover-text="Adipiscing elit"></wm-chart-slice>
+    <wm-chart-slice amount="2" legend="Ante faucibus" popover-title="2/15" popover-text="Duis vitae dapidus erat"></wm-chart-slice>
+    <wm-chart-slice amount="3" legend="Finibus" popover-title="3/15" popover-text="Cras"></wm-chart-slice>
+  </wm-chart>`);
+        const results = await page.compareScreenshot();
+        expect(results).toMatchScreenshot({ allowableMismatchedPixels: 10 });
+    });
+    it("progress monitor doesn't change", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`<wm-progress-monitor id="organization-progress" group-legend="Complete,Incomplete">
+  <wm-progress-indicator label="Learning Outcomes">
+    <wm-progress-slice amount="12" popover-title="12/20" popover-text="Organizations with outcomes" legend="Created"></wm-progress-slice>
+    <wm-progress-slice amount="8" popover-title="8/20" popover-text="Organizations without outcomes" legend="Not created"></wm-progress-slice>
+  </wm-progress-indicator>
+  <wm-progress-indicator label="Mapped to ILOs" completion-message="All mapped!">
+    <wm-progress-slice amount="20" popover-title="20/20" popover-text="Programs with a curriculum map" legend="Mapped"></wm-progress-slice>
+    <wm-progress-slice amount="0" popover-title="0/20" popover-text="Programs without a curriculum map" legend="Not mapped"></wm-progress-slice>
+  </wm-progress-indicator>
+</wm-progress-monitor>`);
+        const results = await page.compareScreenshot();
+        expect(results).toMatchScreenshot({ allowableMismatchedPixels: 10 });
+    });
+});

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

@@ -87,6 +87,9 @@
   gap: 2px;
   margin-bottom: 8px;
 }
+:host .component-wrapper .bar-wrapper .inner-stacked-bar-wrapper .values.none {
+  margin: 0;
+}
 :host .component-wrapper .bar-wrapper .inner-stacked-bar-wrapper .stacked-bar-segments-wrapper {
   display: flex;
   gap: 2px;
@@ -262,7 +265,7 @@
 }
 :host .component-wrapper.bar3 .chart-wrapper {
   position: relative;
-  height: 100px;
+  height: 116px;
 }
 :host .component-wrapper.bar3 .chart-wrapper .inner-stacked-bar-wrapper {
   position: absolute;
@@ -276,22 +279,24 @@
   position: absolute;
   top: 0;
   left: 0;
-  height: 90px;
-  width: 100%;
+  width: calc(100% + 4px);
   overflow: visible;
-  transform: translateY(90px);
+  transform: translate(-4px, 96px);
 }
 :host .component-wrapper.bar3 .chart-wrapper .axis line {
   stroke: var(--wmcolor-chart-gridline);
   stroke-width: 1px;
 }
-:host .component-wrapper.bar3 .chart-wrapper .axis text {
-  transform: translate(4px, 24px);
-  text-anchor: middle;
-}
 :host .component-wrapper.bar3 .hidden-values-warning {
   margin-top: 1.25rem;
 }
+:host .component-wrapper.bar3 .bar3-axis-label {
+  position: absolute;
+  bottom: 0px;
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+}
 :host .component-wrapper.bar6, :host .component-wrapper.bar7 {
   --chartPadding: 48px;
   align-items: flex-start;