@watermarkinsights/ripple 3.36.0 → 3.37.0

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

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-670c5d2a.js');
-const functions = require('./functions-45f36418.js');
+const index = require('./index-fae02cd7.js');
+const functions = require('./functions-0c27162e.js');
 
 const wmToggletipCss = ":host{--wmcolor-toggletip-background:var(--wmcolor-background-dark);--wmcolor-toggletip-icon-background:var(--wmcolor-background-dark);--wmcolor-toggletip-icon-text:var(--wmcolor-text-ondark);--wmcolor-toggletip-text:var(--wmcolor-text-ondark);display:inline-block;position:relative;height:40px;width:40px}: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{outline:none}:host .button:focus.user-is-tabbing{-webkit-box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px var(--wmcolor-interactive-focus);-moz-box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px var(--wmcolor-interactive-focus);box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px var(--wmcolor-interactive-focus)}:host .button:focus.user-is-tabbing::-moz-focus-inner{border:0}: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,:host .tooltip.top{-webkit-transform:translate(-50%, 0%);transform:translate(-50%, 0%);bottom:40px;left:20px}:host .toggletip.bottom,:host .tooltip.bottom{-webkit-transform:translate(-50%, 0%);transform:translate(-50%, 0%);top:40px;left:20px}:host .toggletip.right,:host .tooltip.right{-webkit-transform:translate(100%, calc(-50% - 20px));transform:translate(100%, calc(-50% - 20px));right:0px}:host .toggletip.left,:host .tooltip.left{-webkit-transform:translate(-100%, calc(-50% - 20px));transform:translate(-100%, calc(-50% - 20px));left:0px}:host .toggletip.bottom-right,:host .tooltip.bottom-right{top:40px;left:0px}:host .toggletip.bottom-left,:host .tooltip.bottom-left{top:40px;right:0px}:host .toggletip.top-right,:host .tooltip.top-right{bottom:40px;left:0px}:host .toggletip.top-left,:host .tooltip.top-left{bottom:40px;right:0px}: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}";
 

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

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-670c5d2a.js');
-const functions = require('./functions-45f36418.js');
-const intl = require('./intl-a84cd5ef.js');
+const index = require('./index-fae02cd7.js');
+const functions = require('./functions-0c27162e.js');
+const intl = require('./intl-022a42a1.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{outline:none;-webkit-box-shadow:none;box-shadow:none}:host .wm-button::-moz-focus-inner{border:0;outline:none}:host .wm-button.user-is-tabbing:focus:not(.-textonly):not(:disabled):not(.disabled):not(.dark){-webkit-box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px var(--wmcolor-interactive-focus);-moz-box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px var(--wmcolor-interactive-focus);box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px var(--wmcolor-interactive-focus)}:host .wm-button.user-is-tabbing:focus:not(.-textonly):not(:disabled):not(.disabled):not(.dark)::-moz-focus-inner{border:0}:host .wm-button.dark.user-is-tabbing:focus:not(.-textonly):not(:disabled):not(.disabled).dark{-webkit-box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px var(--wmcolor-interactive-focus-ondark);-moz-box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px var(--wmcolor-interactive-focus-ondark);box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px var(--wmcolor-interactive-focus-ondark);outline:none}: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}:host .wm-button.-textonly+.-textonly{margin-left:0.3125rem}:host .wm-button.-textonly:focus{outline:none}:host .wm-button.-textonly::-moz-focus-inner{border:0;outline:none}:host .wm-button.-textonly.user-is-tabbing:focus:not(:disabled):not(.disabled) .button-text{background:-webkit-gradient(linear, left top, right top, color-stop(66%, var(--wmcolor-interactive-focus-textonly)), color-stop(0, transparent)) repeat-x;background:linear-gradient(90deg, var(--wmcolor-interactive-focus-textonly) 66%, transparent 0) repeat-x;background-size:6px 3px;background-position:0 1em;border-radius:0;line-height:normal}:host .wm-button.-textonly.user-is-tabbing:focus:not(:disabled):not(.disabled).dark .button-text{background:-webkit-gradient(linear, left top, right top, color-stop(66%, var(--wmcolor-interactive-focus-textonly-ondark)), color-stop(0, transparent)) repeat-x;background:linear-gradient(90deg, var(--wmcolor-interactive-focus-textonly-ondark) 66%, transparent 0) repeat-x;background-size:6px 3px;background-position:0 1em;border-radius:0;line-height:normal}: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{--wmcolor-uploader-button-focus:var(--wmcolor-interactive-focus);display:block;position:relative;max-width:1140px}:host[dir=RTL] .mdi{margin-left:0.3125rem;margin-right:0}:host input:focus+.wm-button.user-is-tabbing{-webkit-box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px var(--wmcolor-uploader-button-focus) !important;-moz-box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px var(--wmcolor-uploader-button-focus) !important;box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px var(--wmcolor-uploader-button-focus) !important}: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}.header .info-wrapper{-ms-flex-align:center;align-items:center}.header .info-wrapper .info{font-size:0.875rem;margin-left:1rem}.header .accepted-types{font-size:0.875rem}.header .requirements{font-size:0.875rem;margin-left:1rem}.footer{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:end;align-items:flex-end;padding:0.9375rem 1.875rem}.footer .notif-wrapper{-ms-flex-align:end;align-items:flex-end}.footer .filecount-wrapper{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.footer .filecount-wrapper .filecount{font-size:0.875rem;margin-right:1rem}.notif-wrapper{position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;margin-bottom:0.75rem}.notif-wrapper .requirements{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.notif,#error{padding-top:0.25rem;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;margin-top:0.25rem}.info-wrapper{position:relative;display:-ms-flexbox;display:flex}.list-container{overflow-y:unset}.list-container.checkmark-spacer{margin-right:2.75rem}.list-container:has(.error-list,.inprogress-list,.file-list){margin-top:2.5rem}.list-container ul{padding:0;width:100%;margin:0}.list-container ul wm-file{margin-bottom:0.5rem}.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}.empty-block{margin:5rem auto;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center}.empty-block .upload-file{margin-bottom:1.875rem}.empty-block .empty-message{font-size:0.875rem;margin-bottom:0.4375rem}.empty-block .empty-message.large{font-size:1.5rem}.empty-block .info-wrapper{-ms-flex-pack:center;justify-content:center;width:100%}.empty-block .info-wrapper .wm-button{width:auto}.header.type1,.header.type2{margin-bottom:1rem}.header .slot-wrapper{display:-ms-flexbox;display:flex;-ms-flex-pack:start;justify-content:flex-start;-ms-flex-align:start;align-items:flex-start}.notif-wrapper.type1,.notif-wrapper.type2{-ms-flex-direction:column;flex-direction:column;margin-bottom:1rem}.list-container.type1,.list-container.type2{overflow-y:auto}.list-container.type1 ul,.list-container.type2 ul{margin:revert}.list-container.type1 .file-list li,.list-container.type1 .inprogress-list li,.list-container.type2 .file-list li,.list-container.type2 .inprogress-list li{margin-bottom:1.625rem}.list-container.type1 .error-list li,.list-container.type2 .error-list li{margin-bottom:1.25rem}.list-container.type1{padding:0 1.875rem;height:16.25rem}";
 

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

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

package/dist/collection/components/wm-modal/wm-modal-footer.css

@@ -30,11 +30,11 @@
    (they can't be aligned on the baseline because of possible description text and error message)
    -------------------------------------- */
 wm-modal-footer {
+  display: block;
   -webkit-border-radius: 0px 0px 5px 5px;
   -moz-border-radius: 0px 0px 5px 5px;
   -ms-border-radius: 0px 0px 5px 5px;
   border-radius: 0px 0px 5px 5px;
-  margin-top: -1px;
 }
 wm-modal-footer .wm-wrapper {
   display: -webkit-box;

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

@@ -8,26 +8,23 @@ export class ModalFooter {
     this.deleteStyle = false;
   }
   componentWillLoad() {
-    this.uid = this.el.parentElement.uid;
-    // Trap focus when user shift+tabs past first element in modal
-    // NB @Listen doesn't allow to listen on a specific element (the parent modal)
-    // if we listen to the whole doc each modal on the page reacts to every event
-    this.el.parentElement.addEventListener("focusLastElement", () => {
-      this.lastElement.focus();
-    });
+    const parentModal = this.el.closest("wm-modal");
+    this.uid = parentModal.uid;
   }
   emitParentPrimaryEvent() {
-    const parentModal = this.el.parentElement;
-    //@ts-ignore
-    parentModal.emitPrimaryEvent();
+    const parentModal = this.el.closest("wm-modal");
+    if (parentModal) {
+      parentModal.emitPrimaryEvent();
+    }
   }
   emitParentSecondaryEvent() {
-    const parentModal = this.el.parentElement;
-    //@ts-ignore
-    parentModal.emitSecondaryEvent();
+    const parentModal = this.el.closest("wm-modal");
+    if (parentModal) {
+      parentModal.emitSecondaryEvent();
+    }
   }
   render() {
-    return (h("div", { class: `wm-wrapper ${this.infoText ? " footer-text" : ""}` }, h("div", { class: "wm-info", "aria-live": "polite" }, this.infoText), h("div", { class: "wm-button-collection" }, this.secondaryText && (h("wm-button", { onClick: () => this.emitParentSecondaryEvent(), id: `wm-secondary-${this.uid}`, ref: (el) => (this.primaryActionDisabled ? (this.lastElement = el) : null) }, this.secondaryText)), h("wm-button", { "button-type": this.deleteStyle ? "secondary" : "primary", "permanently-delete": this.deleteStyle, onClick: () => this.emitParentPrimaryEvent(), disabled: this.primaryActionDisabled, id: `wm-primary-${this.uid}`, ref: (el) => (!this.primaryActionDisabled ? (this.lastElement = el) : null) }, this.primaryText))));
+    return (h("div", { class: `wm-wrapper ${this.infoText ? " footer-text" : ""}` }, h("div", { class: "wm-info", "aria-live": "polite" }, this.infoText), h("div", { class: "wm-button-collection" }, this.secondaryText && (h("wm-button", { onClick: () => this.emitParentSecondaryEvent(), id: `wm-secondary-${this.uid}` }, this.secondaryText)), h("wm-button", { "button-type": this.deleteStyle ? "secondary" : "primary", "permanently-delete": this.deleteStyle, onClick: () => this.emitParentPrimaryEvent(), disabled: this.primaryActionDisabled, id: `wm-primary-${this.uid}` }, this.primaryText))));
   }
   static get is() { return "wm-modal-footer"; }
   static get originalStyleUrls() {

package/dist/collection/components/wm-modal/wm-modal-header.css

@@ -30,11 +30,11 @@
    (they can't be aligned on the baseline because of possible description text and error message)
    -------------------------------------- */
 wm-modal-header {
+  display: block;
   -webkit-border-radius: 5px 5px 0 0px;
   -moz-border-radius: 5px 5px 0 0px;
   -ms-border-radius: 5px 5px 0 0px;
   border-radius: 5px 5px 0 0px;
-  margin-bottom: -1px;
 }
 wm-modal-header .wm-wrapper {
   display: -webkit-box;

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

@@ -6,26 +6,16 @@ export class ModalHeader {
     this.subheading = "";
   }
   componentWillLoad() {
-    this.uid = this.el.parentElement.uid;
-    // Trap focus when user tabs past last element in modal
-    // NB @Listen doesn't allow to listen on a specific element (the parent modal)
-    // if we listen to the whole doc each modal on the page reacts to every event
-    this.el.parentElement.addEventListener("focusFirstElement", () => {
-      this.closeButtonEl.focus();
-    });
+    const parentModal = this.el.closest("wm-modal");
+    this.uid = parentModal.uid;
   }
   emitParentCloseEvent() {
-    const parentModal = this.el.parentElement;
+    const parentModal = this.el.closest("wm-modal");
     //@ts-ignore
     parentModal.emitCloseEvent();
   }
-  // @Listen("click")
-  // directFocusOnClick() {
-  //   this.headingElement.tabIndex = 0;
-  //   this.headingElement.focus();
-  // }
   render() {
-    return (h(Host, null, h("div", { class: "wm-wrapper" }, h("div", null, h("h2", { class: "title", id: `wm-modal-heading-text-${this.uid}` }, this.heading, h("span", { class: "subtitle" }, this.subheading))), h("wm-button", { "button-type": "navigational", icon: "f156", tooltip: globalMessages.close, "tooltip-position": "left", id: `wm-modal-close-${this.uid}`, ref: (el) => (this.closeButtonEl = el), onClick: () => this.emitParentCloseEvent() }))));
+    return (h(Host, null, h("div", { class: "wm-wrapper" }, h("div", null, h("h2", { class: "title", id: `wm-modal-heading-text-${this.uid}` }, this.heading, h("span", { class: "subtitle" }, this.subheading))), h("wm-button", { "button-type": "navigational", icon: "f156", tooltip: globalMessages.close, "tooltip-position": "left", id: `wm-modal-close-${this.uid}`, onClick: () => this.emitParentCloseEvent() }))));
   }
   static get is() { return "wm-modal-header"; }
   static get originalStyleUrls() {

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

@@ -34,103 +34,65 @@ wm-modal {
   --wmcolor-modal-border: var(--wmcolor-border);
   --wmcolor-modal-heading: var(--wmcolor-text);
   --wmcolor-modal-overlay: var(--wmcolor-overlay);
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  -webkit-box-align: center;
-  -webkit-align-items: center;
-  -ms-flex-align: center;
-  align-items: center;
-  flex-direction: column;
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  z-index: 2001;
-  width: 80vw;
-  max-width: 750px;
-  max-height: 80vh;
-  -webkit-box-shadow: 0px 11px 15px 0px rgba(0, 0, 0, 0.2), 0px 9px 46px 8px rgba(0, 0, 0, 0.12), 0px 24px 38px 3px rgba(0, 0, 0, 0.14);
-  -moz-box-shadow: 0px 11px 15px 0px rgba(0, 0, 0, 0.2), 0px 9px 46px 8px rgba(0, 0, 0, 0.12), 0px 24px 38px 3px rgba(0, 0, 0, 0.14);
-  box-shadow: 0px 11px 15px 0px rgba(0, 0, 0, 0.2), 0px 9px 46px 8px rgba(0, 0, 0, 0.12), 0px 24px 38px 3px rgba(0, 0, 0, 0.14);
 }
 wm-modal * {
   box-sizing: border-box;
 }
-wm-modal > * {
+wm-modal dialog {
+  overflow: hidden;
+  padding: 0;
   width: 80vw;
   max-width: 750px;
+  max-height: 80vh;
+  -webkit-border-radius: 5px 5px 5px 5px;
+  -moz-border-radius: 5px 5px 5px 5px;
+  -ms-border-radius: 5px 5px 5px 5px;
+  border-radius: 5px 5px 5px 5px;
+  border: none;
   background: var(--wmcolor-modal-background);
 }
-wm-modal > *:focus {
-  outline: none;
-}
-wm-modal wm-modal-header,
-wm-modal wm-modal-footer {
-  padding: 1.25rem 1.875rem;
-}
-wm-modal wm-modal-header {
-  z-index: 2003;
+wm-modal dialog > :not(wm-modal-header):not(wm-modal-footer) {
+  max-height: calc(80vh - 166px);
 }
-wm-modal wm-modal-footer {
-  z-index: 2003;
+wm-modal dialog::backdrop {
+  background: rgba(25, 25, 25, 0.4);
 }
-wm-modal > :not(wm-modal-header):not(wm-modal-footer) {
-  max-height: calc(80vh - 166px);
-  z-index: 2002;
+wm-modal dialog[open] {
+  -webkit-box-shadow: 0px 11px 15px 0px rgba(0, 0, 0, 0.2), 0px 9px 46px 8px rgba(0, 0, 0, 0.12), 0px 24px 38px 3px rgba(0, 0, 0, 0.14);
+  -moz-box-shadow: 0px 11px 15px 0px rgba(0, 0, 0, 0.2), 0px 9px 46px 8px rgba(0, 0, 0, 0.12), 0px 24px 38px 3px rgba(0, 0, 0, 0.14);
+  box-shadow: 0px 11px 15px 0px rgba(0, 0, 0, 0.2), 0px 9px 46px 8px rgba(0, 0, 0, 0.12), 0px 24px 38px 3px rgba(0, 0, 0, 0.14);
 }
-wm-modal.wm-modal wm-modal-header {
+wm-modal dialog.wm-modal > wm-modal-header {
   border-bottom: 1px solid var(--wmcolor-modal-border);
 }
-wm-modal.wm-modal wm-modal-footer {
+wm-modal dialog.wm-modal > wm-modal-footer {
   border-top: 1px solid var(--wmcolor-modal-border);
 }
 @media only screen and (max-width: 768px) {
-  wm-modal.wm-modal {
+  wm-modal dialog.wm-modal {
     height: 100%;
     max-height: none;
     max-width: none;
     width: 100vw;
   }
-  wm-modal.wm-modal > * {
+  wm-modal dialog.wm-modal > * {
     max-width: none;
     width: 100vw;
   }
-  wm-modal.wm-modal > *:not(wm-modal-header):not(wm-modal-footer) {
+  wm-modal dialog.wm-modal > *:not(wm-modal-header):not(wm-modal-footer) {
     max-height: none;
     height: calc(100vh - 166px);
   }
 }
-wm-modal.wm-dialog > :not(wm-modal-header):not(wm-modal-footer) {
+wm-modal dialog.wm-dialog > :not(wm-modal-header):not(wm-modal-footer):not(.wm-tooltip) {
   padding: 0 1.875rem 1.25rem 1.875rem;
   font-size: 0.875rem;
   border: none;
 }
-wm-modal .overlay {
-  width: 100vw;
-  height: 100vh;
-  max-width: none;
-  max-height: none;
-  position: fixed !important;
-  top: -1;
-  bottom: 1;
-  left: -1;
-  right: 1;
-  transform: translate(0%, 0%);
-  background-color: var(--wmcolor-modal-overlay);
-  -ms-transition: opacity 0.5s ease-out;
-  -webkit-transition: opacity 0.5s ease-out;
-  -moz-transition: opacity 0.5s ease-out;
-  transition: opacity 0.5s ease-out;
-  z-index: 2000;
-}
-wm-modal.hide {
-  visibility: hidden;
+wm-modal wm-modal-header,
+wm-modal wm-modal-footer {
+  padding: 1.25rem 1.875rem;
+  width: 100%;
 }
 wm-modal .sr-only {
   position: absolute !important;

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

@@ -1,9 +1,7 @@
-import { h, Host } from "@stencil/core";
-import { checkForActiveElInShadow } from "../../global/functions";
+import { h } from "@stencil/core";
 import { generateId } from "../../global/functions";
 export class Modal {
   constructor() {
-    this.bodyFocusListener = () => this.redirectFocusFromBody();
     this.open = false;
     this.isOpen = false;
     this.elementToFocus = "";
@@ -28,50 +26,31 @@ export class Modal {
       !customElementToFocus &&
         console.warn("Ripple Component Library: The modal component couldn't find an element matching the id you passed for 'elementToFocus'. It will fall back to the default and focus the close button when the modal opens.");
     }
-    const closeButtonEl = this.el.querySelector(`#wm-modal-close-${this.uid}`);
-    return customElementToFocus ? customElementToFocus : closeButtonEl;
+    return customElementToFocus;
+  }
+  get hasBrowserPopoverSupport() {
+    // for browsers without popover support, render an additional tooltip in the top-layer so that it can be displayed above the dialog element
+    const tooltipEl = document.getElementById("wm-tooltip");
+    //@ts-ignore
+    return tooltipEl ? !!tooltipEl.showPopover : false;
   }
-  //App can open modal by toggling the prop
   toggleModal() {
     this.tempOpen ? this.showModal() : this.hideModal();
   }
-  //The below not implemented in light of the fact that the app does often need to keep track of the modal's state itself so that it can update the data displayed in the body:
-  //App can also open modal by emitting wmShowModal event. Event needs to include the modal's unique id as the event detail, or else all modals on the page will open when wmShowModal event is dispatched.
-  // @Listen("wmShowModal", { target: "window" })
-  // doesEventMatchId(ev: CustomEvent) {
-  //   ev.detail === this.uid && this.showModal();
-  // }
-  handleClick(ev) {
-    this.tempOpen && ev.target === this.overlayEl && this.focusOnOpenEl.focus();
-  }
-  closeModalOnEscape(ev) {
-    if (ev.key === "Escape") {
-      // stops propagation prevents nested modal from closing all at once
-      ev.stopPropagation();
-      this.wmModalCloseTriggered.emit();
-      this.wmCloseTriggered.emit(); // deprecated
-      this.open = false;
-    }
+  handleDialogClose() {
+    this.open = false;
   }
   showModal() {
     this.setAriaDescribedbyOnModal();
-    this.setElToFocusOnClose(); //Record where the user was before the modal opened so that focus can return to it when the modal closes
     document.body.style.overflow = "hidden"; //Keeps the page below the modal from scrolling
-    //Focus listeners as a general catch for keeping focus in case of errors in finding element with id passed in by dev (element is removed from DOM, etc.) or other scenarios
-    document.body.tabIndex = 0;
-    document.body.removeEventListener("focus", this.bodyFocusListener, true);
-    document.body.addEventListener("focus", this.bodyFocusListener, true);
-    window.requestAnimationFrame(() => {
-      // nested requestAnimationFrames allow all elements to become visible on page before assigning focus
-      window.requestAnimationFrame(() => this.focusOnOpenEl.focus()); //Bring focus to element inside modal
-    });
+    this.dialogEl.showModal();
+    if (this.focusOnOpenEl) {
+      this.focusOnOpenEl.focus();
+    }
   }
-  //Close the modal and focus the triggering element when the modal buttons emit their events
   hideModal() {
     document.body.style.overflow = "visible";
-    document.body.tabIndex = -1;
-    document.body.removeEventListener("focus", this.bodyFocusListener, true);
-    window.requestAnimationFrame(() => this.focusOnCloseEl.focus()); //Return focus
+    this.dialogEl.close();
   }
   componentWillLoad() {
     if (this.isOpen) {
@@ -86,7 +65,13 @@ export class Modal {
       }
     }
     this.el.focus = () => {
-      this.focusOnOpenEl.focus();
+      if (this.focusOnOpenEl) {
+        this.focusOnOpenEl.focus();
+      }
+      else {
+        const closeButton = this.el.querySelector(`#wm-modal-close-${this.uid}`);
+        closeButton.focus();
+      }
     };
     this.uid = this.el.id ? this.el.id : generateId();
   }
@@ -94,6 +79,7 @@ export class Modal {
     if (this.tempOpen) {
       this.showModal();
     }
+    this.dialogEl.addEventListener("close", () => this.handleDialogClose());
   }
   async emitCloseEvent() {
     this.wmModalCloseTriggered.emit();
@@ -116,26 +102,8 @@ export class Modal {
       this.el.setAttribute("aria-describedby", `wm-modal-heading-text-${this.uid} content-${this.uid}`);
     }
   }
-  setElToFocusOnClose() {
-    const elToFocus = document.activeElement;
-    if (elToFocus.tagName === "WM-MENUITEM") {
-      this.focusOnCloseEl = elToFocus.parentElement;
-    }
-    else {
-      this.focusOnCloseEl = checkForActiveElInShadow(elToFocus);
-    }
-  }
-  redirectFocusFromBody() {
-    if (document.activeElement.tagName === "BODY") {
-      this.focusOnOpenEl.focus();
-    }
-  }
   render() {
-    return (h(Host, { class: `${this.tempOpen ? "" : "hide "}${"wm-" + this.tempModalType}`, role: "dialog", "aria-describedby": `wm-modal-heading-text-${this.uid}`, "aria-modal": "true", tabindex: this.tempOpen ? 0 : null, onFocus: () => {
-        this.focusLastElement.emit();
-      } }, h("div", { class: "overlay", ref: (el) => (this.overlayEl = el) }), h("div", { class: "sr-only", tabIndex: 0, onFocus: () => {
-        this.focusFirstElement.emit();
-      } })));
+    return (h("dialog", { class: `${"wm-" + this.modalType}`, ref: (el) => (this.dialogEl = el) }, !this.hasBrowserPopoverSupport && h("div", { class: "wm-tooltip" }), h("slot", null)));
   }
   static get is() { return "wm-modal"; }
   static get originalStyleUrls() {
@@ -444,19 +412,4 @@ export class Modal {
         "methodName": "toggleModal"
       }];
   }
-  static get listeners() {
-    return [{
-        "name": "click",
-        "method": "handleClick",
-        "target": undefined,
-        "capture": false,
-        "passive": false
-      }, {
-        "name": "keydown",
-        "method": "closeModalOnEscape",
-        "target": undefined,
-        "capture": false,
-        "passive": false
-      }];
-  }
 }

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

@@ -28,32 +28,4 @@ describe("wm-modal", () => {
     expect(mockHideModal).toHaveBeenCalledTimes(1);
     jest.resetAllMocks();
   });
-  it("when modal is visible-- changes body style, adds focus listener, focuses modal", () => {
-    //showModal
-    const component = new Modal();
-    const mockSetElToFocusOnClose = (component.setElToFocusOnClose = jest.fn());
-    const mockSetAriaDescribedBy = (component.setAriaDescribedbyOnModal = jest.fn());
-    const mockFocus = jest.fn();
-    const spyFocusOnOpenEl = jest.spyOn(component, "focusOnOpenEl", "get");
-    let mockEl = { focus: mockFocus };
-    spyFocusOnOpenEl.mockReturnValue(mockEl);
-    const removeEventListenerSpy = jest.spyOn(document.body, "removeEventListener");
-    const addEventListenerSpy = jest.spyOn(document.body, "addEventListener");
-    jest
-      .spyOn(window, "requestAnimationFrame")
-      //@ts-ignore
-      .mockImplementation((cb) => cb());
-    component.showModal();
-    expect(mockSetElToFocusOnClose).toHaveBeenCalledTimes(1);
-    expect(document.body.tabIndex).toBe(0);
-    // body focus event listener is removed then attached
-    expect(removeEventListenerSpy).toHaveBeenCalledTimes(1);
-    // @ts-ignore
-    expect(removeEventListenerSpy).toHaveBeenCalledWith("focus", component.bodyFocusListener, true);
-    expect(addEventListenerSpy).toHaveBeenCalledTimes(1);
-    // @ts-ignore
-    expect(addEventListenerSpy).toHaveBeenCalledWith("focus", component.bodyFocusListener, true);
-    expect(mockSetAriaDescribedBy).toHaveBeenCalledTimes(1);
-    expect(mockFocus).toHaveBeenCalledTimes(1);
-  });
 });

package/dist/collection/global/functions.js

@@ -194,30 +194,46 @@ export function adjustTooltipPlacement(placement, anchorEl, tooltipHeight, toolt
   return placement;
 }
 export function showTooltip(placement, anchorEl, tooltipText) {
-  const tooltipEl = document.getElementById("wm-tooltip");
-  tooltipEl.textContent = tooltipText;
-  // tooltip only has a maxWidth if it contains whitespace and can break
-  const hasNoWhitespace = tooltipText.match(/^[^\s]+$/);
-  if (hasNoWhitespace) {
-    tooltipEl.classList.add("single-word");
-    tooltipEl.style.setProperty("--wmTooltipMaxWidth", "none");
-  }
-  else {
-    tooltipEl.classList.remove("single-word");
-    tooltipEl.style.removeProperty("--wmTooltipMaxWidth");
-  }
-  const tooltipRect = tooltipEl.getBoundingClientRect();
-  const anchorRect = anchorEl.getBoundingClientRect();
-  const adjustedPlacement = adjustTooltipPlacement(placement, anchorEl, tooltipRect.height, tooltipRect.width);
-  let verticalPos, horizontalPos;
-  [verticalPos, horizontalPos] = positionTooltip(adjustedPlacement, anchorRect, tooltipRect.height, tooltipRect.width);
-  tooltipEl.style.setProperty("--wmTooltipTop", verticalPos + "px");
-  tooltipEl.style.setProperty("--wmTooltipLeft", horizontalPos + "px");
-  tooltipEl.classList.add("show");
+  // until popover is supported by firefox, we have to check for and position additional tooltip rendered within the modal's dialog element
+  // this additional tooltip is only rendered in browsers that do not support popover
+  const tooltipEls = document.querySelectorAll(".wm-tooltip");
+  tooltipEls.forEach((tooltipEl) => {
+    //@ts-ignore
+    if (!!tooltipEl.showPopover) {
+      //@ts-ignore
+      tooltipEl.showPopover();
+    }
+    tooltipEl.classList.add("show");
+    tooltipEl.textContent = tooltipText;
+    // tooltip only has a maxWidth if it contains whitespace and can break
+    const hasNoWhitespace = tooltipText.match(/^[^\s]+$/);
+    if (hasNoWhitespace) {
+      tooltipEl.classList.add("single-word");
+      tooltipEl.style.setProperty("--wmTooltipMaxWidth", "none");
+    }
+    else {
+      tooltipEl.classList.remove("single-word");
+      tooltipEl.style.removeProperty("--wmTooltipMaxWidth");
+    }
+    const tooltipRect = tooltipEl.getBoundingClientRect();
+    const anchorRect = anchorEl.getBoundingClientRect();
+    const adjustedPlacement = adjustTooltipPlacement(placement, anchorEl, tooltipRect.height, tooltipRect.width);
+    let verticalPos, horizontalPos;
+    [verticalPos, horizontalPos] = positionTooltip(adjustedPlacement, anchorRect, tooltipRect.height, tooltipRect.width);
+    tooltipEl.style.setProperty("--wmTooltipTop", verticalPos + "px");
+    tooltipEl.style.setProperty("--wmTooltipLeft", horizontalPos + "px");
+  });
 }
 export function hideTooltip() {
-  const tooltipEl = document.getElementById("wm-tooltip");
-  tooltipEl.classList.remove("show");
+  const tooltipEls = document.querySelectorAll(".wm-tooltip");
+  tooltipEls.forEach((tooltipEl) => {
+    //@ts-ignore
+    if (!!tooltipEl.hidePopover) {
+      //@ts-ignore
+      tooltipEl.hidePopover();
+    }
+    tooltipEl.classList.remove("show");
+  });
 }
 function positionTooltip(placement, anchorRect, tooltipHeight, tooltipWidth) {
   // to get the center positions, calculate the difference between the button width and the tooltip width

package/dist/collection/global/global.js

@@ -43,10 +43,12 @@ const tooltipContainer = document.createElement("div");
 tooltipContainer.id = "wm-tooltip-container";
 const tooltipEl = document.createElement("div");
 tooltipEl.id = "wm-tooltip";
+tooltipEl.classList.add("wm-tooltip");
+tooltipEl.setAttribute("popover", "manual");
 tooltipEl.setAttribute("aria-hidden", "true");
 const tooltipStyles = document.createElement("style");
 tooltipStyles.textContent = `
-#wm-tooltip {
+.wm-tooltip {
   position: fixed;
   overflow: hidden;
   pointer-events: none;
@@ -64,14 +66,20 @@ tooltipStyles.textContent = `
   transition-property: opacity;
   transition-delay: 0s;
   opacity: 0;
+  inset: unset;
   top: 0;
   left: 0;
   transform: translateZ(0);
   will-change: transform;
   transform: translate(var(--wmTooltipLeft), var(--wmTooltipTop));
+  border: none;
 }
 
-#wm-tooltip.show {
+.wm-tooltip:popover-open {
+  opacity: 0;
+}
+
+.wm-tooltip.show {
   transition-delay: 500ms;
   opacity: 1;
 }

package/dist/esm/{chartFunctions-e539d991.js → chartFunctions-f4f3252e.js}

@@ -1,5 +1,5 @@
-import { h } from './index-294d486f.js';
-import { i as intl, c as checkForActiveElInShadow, e as getPosition, f as findParentWithScrollbar, d as debounce } from './functions-7fc7cf30.js';
+import { h } from './index-7e11ea42.js';
+import { i as intl, c as getPosition, f as findParentWithScrollbar, e as checkForActiveElInShadow, d as debounce } from './functions-d52b728c.js';
 
 const colors = {
   salmon: "#ff5f4e",