@watermarkinsights/ripple 5.7.0-6 → 5.7.0-8

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

@@ -123,6 +123,28 @@ export class NestedSelect {
     closePopupOnEscape() {
         this.close();
     }
+    handleKeyDown(ev) {
+        // when shift tabbing but component is still in focus, close dropdown
+        switch (ev.key) {
+            case "Tab":
+                if (ev.shiftKey) {
+                    this.close();
+                }
+                break;
+            case "ArrowDown":
+                if (this.isExpanded === false) {
+                    ev.preventDefault();
+                    this.open();
+                }
+                break;
+            case "ArrowUp":
+                if (this.isExpanded === false) {
+                    ev.preventDefault();
+                    this.open(true);
+                }
+                break;
+        }
+    }
     close(returnFocus = true) {
         if (this.isExpanded) {
             this.isExpanded = false;
@@ -135,7 +157,7 @@ export class NestedSelect {
             }, 150);
         }
     }
-    open() {
+    open(focusLast = false) {
         if (!this.isDisabled) {
             this.showClearSelectionButton = this.childOptions.some((o) => o.selected);
             this.isExpanded = true;
@@ -155,14 +177,16 @@ export class NestedSelect {
                     ? spaceAbove
                     : null;
             });
-            window.requestAnimationFrame(() => {
-                this.focusFirstMenuitem();
-            });
-        }
-    }
-    focusFirstMenuitem() {
-        if (this.menuitemEls.length > 0) {
-            this.menuitemEls[0].focus();
+            // scrollIntoView does not work when the container of the element it's called on is not rendered to the page (in our case the dropdown is still closed and has transform: scaleY(0))
+            // when opening the dropdown, scrollIntoView must be delayed to a point where the browser recognizes content within it as able to be scrolled to
+            // in Safari in particular, the soonest this seems to happen is 20ms. The longest we can wait before any jumping in the open dropdown is noticeable is 60ms
+            window.setTimeout(() => {
+                if (this.menuitemEls.length > 0) {
+                    const menuitemToFocus = this.menuitemEls[focusLast ? this.menuitemEls.length - 1 : 0];
+                    menuitemToFocus.scrollIntoView({ block: "nearest" });
+                    menuitemToFocus.focus();
+                }
+            }, 60);
         }
     }
     moveDown(menuitemEl) {
@@ -292,16 +316,16 @@ export class NestedSelect {
                 this.isExpanded ? this.close() : this.open();
             },
         };
-        return (h(Host, { key: 'ed7b96e7d65c756fbbade7dfb2a8ae03da9d3277', onBlur: (ev) => this.handleComponentBlur(ev) }, h("div", { key: 'a2783684ed70b347fd5081b9679cad00c4c73af9', class: `wrapper ${getTextDir()} label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: 'dc6f0249ebbcd84df9108fdd2af2e3a7778c2a5a', class: "label-wrapper" }, h("label", { key: '6139f82a9c0a4c9ea569b0d6c74e694ca4924932', class: "label", id: "label", htmlFor: "selectbtn" }, this.label, 
+        return (h(Host, { key: '854bfbccf53069ca95a2c7e3beb60ec7cef4fe52', onBlur: (ev) => this.handleComponentBlur(ev) }, h("div", { key: 'db844c36c341b311a1178899c3dd6f75b3cde901', class: `wrapper ${getTextDir()} label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: '57b77d879d3065c2fd6e51c86a4cf9589d2b69dd', class: "label-wrapper" }, h("label", { key: 'd175fa9541a93c22be70143a10b77a087913087e', class: "label", id: "label", htmlFor: "selectbtn" }, this.label, 
         // we can't use aria-required or required attributes because it's invalid on the elements we're using (button controlling a listbox)
-        this.requiredField ? (h("span", { class: "required" }, h("span", { class: "sr-only" }, globalMessages.requiredField), h("span", { "aria-hidden": "true" }, "*"))) : (""))), h("div", { key: '3198a4409abb6d880330ffadd64022835ee94ba6', class: "button-wrapper" }, h("button", Object.assign({ key: '112c79d84e039c8a9044fc86c2d360a3c88acfec' }, buttonProps, { class: `displayedoption ${this.isExpanded ? "expanded" : ""}`, ref: (el) => (this.buttonEl = el), onBlur: (ev) => this.handleButtonBlur(ev), onFocus: () => this.close() }), h("span", { key: 'ab91af492aac319d84cb48dccdb127e5649b658b', class: "overflowcontrol" }, h("span", { key: 'fb0370d92612ee4ae365634e8e7f845ef0d6194a', class: "button-text" }, this.renderButtonText())), this.renderOverflowCount(), h("div", { key: 'e61b2f40ed449bbb679bd4792197eeb34f23d5f9', ref: (el) => (this.measurementAreaEl = el), class: "measurement-area", "aria-hidden": "true" })), h("div", { key: '1490530463cfcdb5d010f722b7f3078e0e036ce0', class: `dropdown  ${this.openUp ? "upwards" : ""}`, ref: (el) => (this.dropdownEl = el) }, h("div", { key: '072c737865ad17a47ff9b70f9ee681542b766674', ref: (el) => (this.menuEl = el), class: "menu", style: { "--max-height": this.constrainedMaxHeight } }, this.renderClearSelectionButton(), this.optgroupEls.map((optgroupEl) => {
+        this.requiredField ? (h("span", { class: "required" }, h("span", { class: "sr-only" }, globalMessages.requiredField), h("span", { "aria-hidden": "true" }, "*"))) : (""))), h("div", { key: '1e100f81edc7d1dd9c6e1224cd1d5cfeb68e37a7', class: "button-wrapper" }, h("button", Object.assign({ key: 'e8e68bc84666875a5a478aae79d04cc57d231f4b' }, buttonProps, { class: `displayedoption ${this.isExpanded ? "expanded" : ""}`, ref: (el) => (this.buttonEl = el), onBlur: (ev) => this.handleButtonBlur(ev) }), h("span", { key: 'e0dc1adac5cdcb76da590a065b8fc80cead8df69', class: "overflowcontrol" }, h("span", { key: '36427c454c08d30402f50424772c4c3fe6d764e3', class: "button-text" }, this.renderButtonText())), this.renderOverflowCount(), h("div", { key: '2725d1b3b564a3d6a879e598ef5b0bf192dcd1d6', ref: (el) => (this.measurementAreaEl = el), class: "measurement-area", "aria-hidden": "true" })), h("div", { key: '54b75659619de70978e10ab8e3739938686084f8', class: `dropdown  ${this.openUp ? "upwards" : ""}`, ref: (el) => (this.dropdownEl = el) }, h("div", { key: 'a6894d7f78c6eb4a155c2b55f88f43a47377ce7d', ref: (el) => (this.menuEl = el), class: "menu", style: { "--max-height": this.constrainedMaxHeight } }, this.renderClearSelectionButton(), this.optgroupEls.map((optgroupEl) => {
             return (h("button", { class: `menuitem group-btn ${optgroupEl.disabled ? "disabled" : ""}`, role: "menuitem", "data-label": optgroupEl.label, tabindex: -1, "aria-disabled": optgroupEl.disabled, onClick: () => {
                     if (!optgroupEl.disabled) {
                         optgroupEl.isExpanded = !optgroupEl.isExpanded;
                         forceUpdate(this.el);
                     }
                 }, onKeyDown: (ev) => this.handleMenuitemKeydown(ev) }, h("span", null, optgroupEl.label), this.renderSelectionCount(optgroupEl), optgroupEl.disabled && h("div", { class: "disabled-indication" }, "Disabled")));
-        })), h("div", { key: '8e57555b287fb08eb92eac959ddd7259d560e33a', ref: (el) => (this.optListWrapperEl = el), class: "option-list-wrapper hidden" }, h("slot", { key: 'c22278aca4bd47298fdffeeb148896180e12da1e' }))), h("div", { key: '3180921d3e8e6a9dc7c7c34b5077e17f3da9ef88', id: "error", class: this.errorMessage ? "error-message" : "" }, this.errorMessage)))));
+        })), h("div", { key: '52fd5904572fe4691cbae1422ccaf285f4a408dd', ref: (el) => (this.optListWrapperEl = el), class: "option-list-wrapper hidden" }, h("slot", { key: '7e3cf958381b7035914cc7f40bd386b923b1ef31' }))), h("div", { key: '0b4dfb9684d0f61cef7781d3b20d87d0ce7771ee', id: "error", class: this.errorMessage ? "error-message" : "" }, this.errorMessage)))));
     }
     static get is() { return "wm-nested-select"; }
     static get encapsulation() { return "shadow"; }
@@ -534,7 +558,7 @@ export class NestedSelect {
             },
             "constrainedMaxHeight": {
                 "type": "string",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "string",
                     "resolved": "string",
@@ -596,6 +620,12 @@ export class NestedSelect {
                 "target": undefined,
                 "capture": false,
                 "passive": false
+            }, {
+                "name": "keydown",
+                "method": "handleKeyDown",
+                "target": undefined,
+                "capture": false,
+                "passive": false
             }, {
                 "name": "click",
                 "method": "handleClick",

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

@@ -151,7 +151,7 @@
   pointer-events: none;
 }
 
-:host(:focus) {
+:host(:focus-visible) {
   outline: none;
   background: var(--wmcolor-select-option-background-focus);
 }

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

@@ -0,0 +1,61 @@
+/* --------------------------------------
+   1. Box-shadow
+   -------------------------------------- */
+/* --------------------------------------
+   2. Border-radius
+   -------------------------------------- */
+/* --------------------------------------
+   3. Transforms
+   -------------------------------------- */
+/* --------------------------------------
+   4. Button Focus
+   -------------------------------------- */
+/* --------------------------------------
+   5. Flex
+   -------------------------------------- */
+/* --------------------------------------
+   7. Screen Reader Only
+   -------------------------------------- */
+/* --------------------------------------
+   8. Label styles
+   this mixin includes all the styles for the label
+   + flex rules on the parent container to switch between top and left position
+   + srOnly when label is hidden
+   Assumes the following markup:
+   div.wrapper[.label-left.invalid] > div.label-wrapper > label.label > span.required
+   .wrapper is for the flex rules
+   .label-wrapper is to set the height of the label when positioned left so it's the same height as
+   the input. It can't be done directly on .label because of possible line wrapping.
+   When the label is on top there's no line wrapping at all to ensure proper alignment of inlined elements
+   (they can't be aligned on the baseline because of possible description text and error message)
+   -------------------------------------- */
+wm-modal-pss-footer {
+  border-radius: 0px 0px 5px 5px;
+  margin-top: -1px;
+}
+wm-modal-pss-footer .wm-wrapper {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+@media only screen and (max-width: 650px) {
+  wm-modal-pss-footer .wm-wrapper.footer-text {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+}
+wm-modal-pss-footer .wm-wrapper wm-button + wm-button {
+  margin-left: 1rem;
+}
+wm-modal-pss-footer .wm-wrapper .wm-info {
+  font-size: 0.875rem;
+  font-style: italic;
+}
+@media only screen and (max-width: 650px) {
+  wm-modal-pss-footer .wm-wrapper .wm-info {
+    padding-bottom: 0.625rem;
+  }
+}
+wm-modal-pss-footer .wm-wrapper .wm-info:focus {
+  outline: none;
+}

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

@@ -0,0 +1,138 @@
+import { h } from "@stencil/core";
+export class ModalFooter {
+    constructor() {
+        this.secondaryText = "";
+        this.primaryText = "";
+        this.infoText = "";
+        this.primaryActionDisabled = false;
+        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();
+        });
+    }
+    emitParentPrimaryEvent() {
+        const parentModal = this.el.parentElement;
+        //@ts-ignore
+        parentModal.emitPrimaryEvent();
+    }
+    emitParentSecondaryEvent() {
+        const parentModal = this.el.parentElement;
+        //@ts-ignore
+        parentModal.emitSecondaryEvent();
+    }
+    render() {
+        return (h("div", { key: '51a2d057d08fee9eb7cb20610b44b5bd9d3300a1', class: `wm-wrapper ${this.infoText ? " footer-text" : ""}` }, h("div", { key: '18b9805744abd577708add4f5c1d6bc0149927fb', class: "wm-info", "aria-live": "polite" }, this.infoText), h("div", { key: 'a449547065cb247a50f859ca5a4a82f070c06399', class: "wm-button-collection" }, this.secondaryText && (h("wm-button", { key: 'd1733ed5fe143f2e65433a667a40694fd5dbad43', onClick: () => this.emitParentSecondaryEvent(), id: `wm-secondary-${this.uid}`, ref: (el) => (this.primaryActionDisabled ? (this.lastElement = el) : null) }, this.secondaryText)), h("wm-button", { key: '2177e7af952bd16fa6cb4cf23dbf2acf18445ebc', "button-type": this.deleteStyle ? "secondary" : "primary", "permanently-delete": this.deleteStyle, onClick: () => this.emitParentPrimaryEvent(), disabled: this.primaryActionDisabled, id: `wm-primary-${this.uid}`, ref: (el) => (!this.primaryActionDisabled ? (this.lastElement = el) : null) }, this.primaryText))));
+    }
+    static get is() { return "wm-modal-pss-footer"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["wm-modal-pss-footer.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["wm-modal-pss-footer.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "secondaryText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "secondary-text",
+                "reflect": false,
+                "defaultValue": "\"\""
+            },
+            "primaryText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "primary-text",
+                "reflect": false,
+                "defaultValue": "\"\""
+            },
+            "infoText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "info-text",
+                "reflect": false,
+                "defaultValue": "\"\""
+            },
+            "primaryActionDisabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "primary-action-disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "deleteStyle": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "delete-style",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}

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

@@ -0,0 +1,55 @@
+/* --------------------------------------
+   1. Box-shadow
+   -------------------------------------- */
+/* --------------------------------------
+   2. Border-radius
+   -------------------------------------- */
+/* --------------------------------------
+   3. Transforms
+   -------------------------------------- */
+/* --------------------------------------
+   4. Button Focus
+   -------------------------------------- */
+/* --------------------------------------
+   5. Flex
+   -------------------------------------- */
+/* --------------------------------------
+   7. Screen Reader Only
+   -------------------------------------- */
+/* --------------------------------------
+   8. Label styles
+   this mixin includes all the styles for the label
+   + flex rules on the parent container to switch between top and left position
+   + srOnly when label is hidden
+   Assumes the following markup:
+   div.wrapper[.label-left.invalid] > div.label-wrapper > label.label > span.required
+   .wrapper is for the flex rules
+   .label-wrapper is to set the height of the label when positioned left so it's the same height as
+   the input. It can't be done directly on .label because of possible line wrapping.
+   When the label is on top there's no line wrapping at all to ensure proper alignment of inlined elements
+   (they can't be aligned on the baseline because of possible description text and error message)
+   -------------------------------------- */
+wm-modal-pss-header {
+  border-radius: 5px 5px 0 0px;
+  margin-bottom: -1px;
+}
+wm-modal-pss-header .wm-wrapper {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+wm-modal-pss-header .wm-wrapper .title {
+  margin: 0;
+  font-weight: 600;
+  font-size: 1.125rem;
+  color: var(--wmcolor-modal-heading);
+  line-height: normal;
+}
+wm-modal-pss-header .wm-wrapper .title .subtitle {
+  display: block;
+  font-size: 0.875rem;
+  font-weight: normal;
+}
+wm-modal-pss-header .wm-wrapper .title:focus {
+  outline: none;
+}

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

@@ -0,0 +1,81 @@
+import { h, Host } from "@stencil/core";
+export class ModalHeader {
+    constructor() {
+        this.heading = "";
+        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();
+        });
+    }
+    emitParentCloseEvent() {
+        const parentModal = this.el.parentElement;
+        //@ts-ignore
+        parentModal.emitCloseEvent();
+    }
+    // @Listen("click")
+    // directFocusOnClick() {
+    //   this.headingElement.tabIndex = 0;
+    //   this.headingElement.focus();
+    // }
+    render() {
+        return (h(Host, { key: '2b2dda4dcd73e99ead055334998d5ef97ea60df4' }, h("div", { key: '8a1f05da81b4663558e962f7b540fac35e2bbfa3', class: "wm-wrapper" }, h("div", { key: '2948adf911680be5ba5a4beb317ddd57303a9a15' }, h("h2", { key: 'f1068bac6d9692a6368f5662bbcde1aad83c3317', class: "title", id: `wm-modal-heading-text-${this.uid}` }, this.heading, h("span", { key: '9452c69404d41425a2bce3fbe15e457fc773a640', class: "subtitle" }, this.subheading))), h("wm-button", { key: '1961750a256f7ad40f8d06345994479b0e3ed541', "button-type": "navigational", icon: "f156", tooltip: "Close", "tooltip-position": "left", id: `wm-modal-close-${this.uid}`, ref: (el) => (this.closeButtonEl = el), onClick: () => this.emitParentCloseEvent() }))));
+    }
+    static get is() { return "wm-modal-pss-header"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["wm-modal-pss-header.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["wm-modal-pss-header.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "heading": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "heading",
+                "reflect": false,
+                "defaultValue": "\"\""
+            },
+            "subheading": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "subheading",
+                "reflect": false,
+                "defaultValue": "\"\""
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}

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

@@ -0,0 +1,134 @@
+/* --------------------------------------
+   1. Box-shadow
+   -------------------------------------- */
+/* --------------------------------------
+   2. Border-radius
+   -------------------------------------- */
+/* --------------------------------------
+   3. Transforms
+   -------------------------------------- */
+/* --------------------------------------
+   4. Button Focus
+   -------------------------------------- */
+/* --------------------------------------
+   5. Flex
+   -------------------------------------- */
+/* --------------------------------------
+   7. Screen Reader Only
+   -------------------------------------- */
+/* --------------------------------------
+   8. Label styles
+   this mixin includes all the styles for the label
+   + flex rules on the parent container to switch between top and left position
+   + srOnly when label is hidden
+   Assumes the following markup:
+   div.wrapper[.label-left.invalid] > div.label-wrapper > label.label > span.required
+   .wrapper is for the flex rules
+   .label-wrapper is to set the height of the label when positioned left so it's the same height as
+   the input. It can't be done directly on .label because of possible line wrapping.
+   When the label is on top there's no line wrapping at all to ensure proper alignment of inlined elements
+   (they can't be aligned on the baseline because of possible description text and error message)
+   -------------------------------------- */
+wm-modal-pss {
+  --wmcolor-modal-background: var(--wmcolor-background);
+  --wmcolor-modal-border: var(--wmcolor-border);
+  --wmcolor-modal-heading: var(--wmcolor-text);
+  --wmcolor-modal-overlay: var(--wmcolor-overlay);
+  display: flex;
+  justify-content: 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;
+  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-pss * {
+  box-sizing: border-box;
+}
+wm-modal-pss > * {
+  width: 80vw;
+  max-width: 750px;
+  background: var(--wmcolor-modal-background);
+}
+wm-modal-pss > *:focus {
+  outline: none;
+}
+wm-modal-pss wm-modal-pss-header,
+wm-modal-pss wm-modal-pss-footer {
+  padding: 20px 30px;
+}
+wm-modal-pss wm-modal-pss-header {
+  z-index: 2003;
+}
+wm-modal-pss wm-modal-pss-footer {
+  z-index: 2003;
+}
+wm-modal-pss > :not(wm-modal-pss-header):not(wm-modal-pss-footer) {
+  max-height: calc(80vh - 166px);
+  z-index: 2002;
+}
+wm-modal-pss.wm-modal wm-modal-pss-header {
+  border-bottom: 1px solid var(--wmcolor-modal-border);
+}
+wm-modal-pss.wm-modal wm-modal-pss-footer {
+  border-top: 1px solid var(--wmcolor-modal-border);
+}
+@media only screen and (max-width: 768px) {
+  wm-modal-pss.wm-modal {
+    height: 100%;
+    max-height: none;
+    max-width: none;
+    width: 100vw;
+  }
+  wm-modal-pss.wm-modal > * {
+    max-width: none;
+    width: 100vw;
+  }
+  wm-modal-pss.wm-modal > *:not(wm-modal-pss-header):not(wm-modal-pss-footer) {
+    max-height: none;
+    height: calc(100vh - 166px);
+  }
+}
+wm-modal-pss.wm-dialog > :not(wm-modal-pss-header):not(wm-modal-pss-footer) {
+  padding: 0 30px 20px 30px;
+  font-size: 0.875rem;
+  border: none;
+}
+wm-modal-pss .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);
+  transition: opacity 0.5s ease-out;
+  z-index: 2000;
+}
+wm-modal-pss.hide {
+  visibility: hidden;
+}
+wm-modal-pss .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;
+  clip-path: inset(50%) !important;
+  white-space: nowrap !important;
+  margin: -1px !important;
+  top: 0;
+  left: 0;
+}