@watermarkinsights/ripple 5.7.0-7 → 5.7.0-8

package/dist/collection/components/wm-action-menu/wm-action-menu.js

@@ -190,7 +190,7 @@ export class ActionMenu {
         return null;
     }
     render() {
-        return (h(Host, { onBlur: () => this.close(false) }, h("div", { class: getTextDir() }, h("wm-button", { "button-type": this.internalButtonType, tooltip: this.tooltip, "custom-background": this.darkMode ? "dark" : undefined, "label-for-identical-buttons": this.labelForIdenticalButtons, icon: this.actionMenuType === "icon" ? "f1d9" : "", iconSize: this.actionMenuType === "icon" ? "24px" : undefined, id: "menubtn", onClick: () => (this.isExpanded ? this.close() : this.open()), onBlur: (ev) => this.handleButtonBlur(ev), disabled: this.disabled, ref: (el) => (this.wmButtonEl = el), "tooltip-position": this.tooltipPosition || this.horizontalPosition, "aria-haspopup": "true", "aria-expanded": this.isExpanded ? "true" : "false", "aria-controls": "menu" }, this.buttonText), h("div", { class: `dropdown ${this.openUp ? "open-up" : ""} ${this.horizontalPosition} ${this.isExpanded ? "open" : ""} hidden`, id: "menu", tabindex: -1, role: "menu", ref: (el) => (this.itemsEl = el) }, h("slot", null)))));
+        return (h(Host, { key: 'b75950ee267a98f778d177cbaed7a41de95e8379', onBlur: () => this.close(false) }, h("div", { key: '8b97b76a8f778b3aaf118eff3964a8aad40c143d', class: getTextDir() }, h("wm-button", { key: 'be740593e2363de51c3885ff854a0cba54b749ad', "button-type": this.internalButtonType, tooltip: this.tooltip, "custom-background": this.darkMode ? "dark" : undefined, "label-for-identical-buttons": this.labelForIdenticalButtons, icon: this.actionMenuType === "icon" ? "f1d9" : "", iconSize: this.actionMenuType === "icon" ? "24px" : undefined, id: "menubtn", onClick: () => (this.isExpanded ? this.close() : this.open()), onBlur: (ev) => this.handleButtonBlur(ev), disabled: this.disabled, ref: (el) => (this.wmButtonEl = el), "tooltip-position": this.tooltipPosition || this.horizontalPosition, "aria-haspopup": "true", "aria-expanded": this.isExpanded ? "true" : "false", "aria-controls": "menu" }, this.buttonText), h("div", { key: 'ce93ba5b4b5b0e9212bbc29d967c9aa2e064620c', class: `dropdown ${this.openUp ? "open-up" : ""} ${this.horizontalPosition} ${this.isExpanded ? "open" : ""} hidden`, id: "menu", tabindex: -1, role: "menu", ref: (el) => (this.itemsEl = el) }, h("slot", { key: 'fd67977302dfed4bc95cd1b376271bd1dcda7695' })))));
     }
     static get is() { return "wm-action-menu"; }
     static get encapsulation() { return "shadow"; }

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

@@ -166,7 +166,7 @@ export class Button {
         }
     }
     render() {
-        return (h(Host, { class: `${this.isDisabled ? "button-disabled" : ""} -${this.buttonType}` }, h("button", { id: this.id, class: `${this.buttonClasses}`, disabled: this.isDisabled, ref: (el) => (this.buttonEl = el), "aria-label": this.getAriaLabel(), "aria-hasPopup": this.ariaPopup ? "menu" : null, onMouseEnter: (ev) => this.handleMouseEnter(ev), onMouseLeave: () => hideTooltip(), onFocus: (ev) => this.handleFocus(ev), onBlur: () => hideTooltip(), onClick: () => hideTooltip() }, this.icon && (h("span", { class: "mdi", style: this.iconStyles, "aria-hidden": "true" }, String.fromCodePoint(parseInt(`0x${this.icon}`)))), h("span", { class: "button-text" }, h("slot", null)))));
+        return (h(Host, { key: 'b1ed71ecca544fba862d06d0c8f2775a086bdb3c', class: `${this.isDisabled ? "button-disabled" : ""} -${this.buttonType}` }, h("button", { key: '2bc05b2b393abbbc78b1b852c32a9bdc01d23c5c', id: this.id, class: `${this.buttonClasses}`, disabled: this.isDisabled, ref: (el) => (this.buttonEl = el), "aria-label": this.getAriaLabel(), "aria-hasPopup": this.ariaPopup ? "menu" : null, onMouseEnter: (ev) => this.handleMouseEnter(ev), onMouseLeave: () => hideTooltip(), onFocus: (ev) => this.handleFocus(ev), onBlur: () => hideTooltip(), onClick: () => hideTooltip() }, this.icon && (h("span", { key: '1ed7a2664f9d1e8e85e70fe4c563207e4b4ba2e2', class: "mdi", style: this.iconStyles, "aria-hidden": "true" }, String.fromCodePoint(parseInt(`0x${this.icon}`)))), h("span", { key: '32f73514ebe4e3ff91ad85073391878a3a35c036', class: "button-text" }, h("slot", { key: 'a34897ad0e0a883371c9545e2657548e4013e2d0' })))));
     }
     static get is() { return "wm-button"; }
     static get encapsulation() { return "shadow"; }

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

@@ -168,7 +168,7 @@ export class File {
         return (h("div", { class: `file-wrapper ${this.progress === 100 ? "checked" : ""}` }, h("div", { class: `file ${this.errorMessage ? "--error" : ""}` }, this.renderFileName(), !this.errorMessage && (h("div", { class: `right-group ${this.isCondensed ? "condensed" : ""}` }, this.renderFileInfo(), this.fileActions !== "" && this.renderFileControls())), this.errorMessage && (h("wm-button", { "permanently-delete": true, "button-type": "textonly", "label-for-identical-buttons": this.generateClearButtonLabel(this.name), onClick: () => this.wmFileErrorCleared.emit() }, this.clearButtonText))), this.errorMessage && h("div", { class: "error-message" }, this.errorMessage)));
     }
     render() {
-        return h(Host, { role: "listitem" }, this.isUploading ? this.renderFileInProgress() : this.renderFile());
+        return h(Host, { key: '8529291be433de9ec130478379b338332a60c8aa', role: "listitem" }, this.isUploading ? this.renderFileInProgress() : this.renderFile());
     }
     static get is() { return "wm-file"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/wm-file-list/wm-file-list.js

@@ -4,7 +4,7 @@ export class FileList {
         this.showInfo = "last-updated";
     }
     render() {
-        return (h("div", { role: "list", class: "list-wrapper" }, h("slot", null)));
+        return (h("div", { key: 'fcb41e7c2690ba176bdfe8439f13589d61f9c307', role: "list", class: "list-wrapper" }, h("slot", { key: '5263cd37c2f18f0d9d381ecd291a304b1bb190d3' })));
     }
     static get is() { return "wm-file-list"; }
     static get encapsulation() { return "shadow"; }

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

@@ -101,7 +101,7 @@ export class Input {
             : `info error`;
     }
     render() {
-        return (h("div", { class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}`, ref: (el) => (this.inputWrapperEl = el) }, h("div", { class: "label-wrapper" }, h("label", { htmlFor: "inputfield", class: "label" }, this.label, this.characterLimit && (h("span", { class: "sr-only" }, " ", globalMessages.getCharacterLimit(this.characterLimit))), this.requiredField && (h("span", { class: "required", "aria-hidden": "true" }, "*")))), h("div", { class: "inner-wrapper" }, h("div", { class: "text-after-wrapper" }, h("div", { class: `inputfield-wrapper ${this.isDisabled ? "disabled" : ""}`, style: this.getInputWidth() }, this.symbolBefore && (h("span", { class: "symbol", id: "symbol-before" }, this.symbolBefore)), h("input", { ref: (el) => (this.inputEl = el), id: "inputfield", disabled: this.isDisabled, "aria-describedby": this.descriptors(), onInput: (ev) => this.handleInput(ev), onKeyDown: (ev) => this.handleKeyDown(ev), onBlur: () => this.handleBlur(), onFocus: () => this.handleFocus(), placeholder: this.placeholder, autocomplete: "off", "aria-required": this.requiredField ? "true" : null, maxLength: this.characterLimit || undefined, type: this.type, step: this.step, max: this.max, min: this.min, value: this.el.value }), this.symbolAfter && (h("span", { class: "symbol", id: "symbol-after" }, this.symbolAfter)), this.characterLimit && typeof this.characterLimit === "number" ? (h("div", { class: "character-count" }, this.charCount, "/", this.characterLimit)) : ("")), this.textAfter && (h("span", { class: "text-after", id: "text-after" }, this.textAfter))), this.info && (h("div", { id: "info", class: "info" }, this.info)), h("div", { id: "error", class: "error-message" }, this.errorMessage), h("div", { class: "sr-only", "aria-live": "polite", "aria-atomic": "true", ref: (el) => (this.liveRegionEl = el) }, this.announcement))));
+        return (h("div", { key: 'a4ed30774991347ed2527ed0d39cd81e735705b4', class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}`, ref: (el) => (this.inputWrapperEl = el) }, h("div", { key: 'ef4543a1bbfbd87eee99dd858a8998035ee6c4cd', class: "label-wrapper" }, h("label", { key: 'c48b54495c1b4794b204bb24ee6e7be1eb1e7615', htmlFor: "inputfield", class: "label" }, this.label, this.characterLimit && (h("span", { key: '0d83432f4e7b6969cc488337a4fc7292ac3572fc', class: "sr-only" }, " ", globalMessages.getCharacterLimit(this.characterLimit))), this.requiredField && (h("span", { key: '9c54222eb2d2688999cb368a99ba4d1eb51bf24b', class: "required", "aria-hidden": "true" }, "*")))), h("div", { key: 'ce599f26b4a6eca9df812957d9415a29b35d5f82', class: "inner-wrapper" }, h("div", { key: 'c8f6a0e3ed7ad4f3e9573a8d35ab77c29b223f98', class: "text-after-wrapper" }, h("div", { key: '284be94dbaece4b71797c16c9ebf343ea67b7bbe', class: `inputfield-wrapper ${this.isDisabled ? "disabled" : ""}`, style: this.getInputWidth() }, this.symbolBefore && (h("span", { key: 'cc6e6accf64b363a97251caef699b3846353d45a', class: "symbol", id: "symbol-before" }, this.symbolBefore)), h("input", { key: 'ffac59d6adf8f5c924d0bc923cdfd8621c7f6973', ref: (el) => (this.inputEl = el), id: "inputfield", disabled: this.isDisabled, "aria-describedby": this.descriptors(), onInput: (ev) => this.handleInput(ev), onKeyDown: (ev) => this.handleKeyDown(ev), onBlur: () => this.handleBlur(), onFocus: () => this.handleFocus(), placeholder: this.placeholder, autocomplete: "off", "aria-required": this.requiredField ? "true" : null, maxLength: this.characterLimit || undefined, type: this.type, step: this.step, max: this.max, min: this.min, value: this.el.value }), this.symbolAfter && (h("span", { key: '83a12456be6c94a4f12ab3fd546aa9ba2cf52a1c', class: "symbol", id: "symbol-after" }, this.symbolAfter)), this.characterLimit && typeof this.characterLimit === "number" ? (h("div", { class: "character-count" }, this.charCount, "/", this.characterLimit)) : ("")), this.textAfter && (h("span", { key: '237c5fdd1887de92654d7f6d3a44b4c3e91c9655', class: "text-after", id: "text-after" }, this.textAfter))), this.info && (h("div", { key: 'cab125b1888b27a3afcadc1f6bb9270fa824200e', id: "info", class: "info" }, this.info)), h("div", { key: '3fd688e066f97f2a0bc6f2019eace1a610c3e423', id: "error", class: "error-message" }, this.errorMessage), h("div", { key: '5eae388fe6ab62c780634d9584a3989b1386930e', class: "sr-only", "aria-live": "polite", "aria-atomic": "true", ref: (el) => (this.liveRegionEl = el) }, this.announcement))));
     }
     static get is() { return "wm-input"; }
     static get encapsulation() { return "shadow"; }

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

@@ -88,7 +88,7 @@ export class Menuitem {
         }
     }
     render() {
-        return (h(Host, { tabindex: -1, role: "menuitem", "aria-disabled": this.disabled ? "true" : null }, h("div", { class: "wrapper", "aria-disabled": this.disabled ? "true" : null }, h("span", { ref: (el) => (this.iconEl = el) }), this.el.textContent, this.description ? h("div", { class: "description" }, this.description) : "")));
+        return (h(Host, { key: 'eb00ddaeac66fa383ea823bc6d3e0e4d39ed38eb', tabindex: -1, role: "menuitem", "aria-disabled": this.disabled ? "true" : null }, h("div", { key: '49dcdbd9cafce775bba1f5833521d798f1943c29', class: "wrapper", "aria-disabled": this.disabled ? "true" : null }, h("span", { key: '02c6fd810be4c8376754d0b1acb68020a7b49f4c', ref: (el) => (this.iconEl = el) }), this.el.textContent, this.description ? h("div", { class: "description" }, this.description) : "")));
     }
     static get is() { return "wm-menuitem"; }
     static get encapsulation() { return "shadow"; }

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

@@ -30,7 +30,7 @@ export class ModalFooter {
         }
     }
     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) : undefined) }, 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) : undefined) }, this.primaryText))));
+        return (h("div", { key: '38b6b1759d4bdb628259acbf229a1d634df2dbf5', class: `wm-wrapper ${this.infoText ? " footer-text" : ""}` }, h("div", { key: '4259692e664739723e3895e8ec8d00ef00ef79f0', class: "wm-info", "aria-live": "polite" }, this.infoText), h("div", { key: '6ffea66fdfd257e754a9012e9471848037e92a52', class: "wm-button-collection" }, this.secondaryText && (h("wm-button", { key: '679eef458298304564cd365f15c8253796158ed8', onClick: () => this.emitParentSecondaryEvent(), id: `wm-secondary-${this.uid}`, ref: (el) => (this.primaryActionDisabled ? (this.lastElement = el) : undefined) }, this.secondaryText)), h("wm-button", { key: 'a6e02b671dbfbacba79aa483b8d6ab8dc9232166', "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) : undefined) }, this.primaryText))));
     }
     static get is() { return "wm-modal-footer"; }
     static get originalStyleUrls() {

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

@@ -21,7 +21,7 @@ export class ModalHeader {
         parentModal.emitCloseEvent();
     }
     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, { key: 'f178a3e4b95a12286b3364efbebe22b3a389f24c' }, h("div", { key: '8a6589a653e28aa5eb926f50695fe129c57548d6', class: "wm-wrapper" }, h("div", { key: '33ca649393f628c8ab5160c5e11e208812dad450' }, h("h2", { key: 'e171bcaa0424e97401db3002bbc3ebaf9c66458d', class: "title", id: `wm-modal-heading-text-${this.uid}` }, this.heading, h("span", { key: 'aacf128010d3416ca788d2110240991dcf36fd17', class: "subtitle" }, this.subheading))), h("wm-button", { key: '1a7342cd0ed7aa024b52af067ec9ed33c7a63b04', "button-type": "navigational", icon: "f156", tooltip: globalMessages.close, "tooltip-position": "left", id: `wm-modal-close-${this.uid}`, ref: (el) => (this.closeButtonEl = el), onClick: () => this.emitParentCloseEvent() }))));
     }
     static get is() { return "wm-modal-header"; }
     static get originalStyleUrls() {

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

@@ -108,11 +108,11 @@ export class Modal {
         }
     }
     render() {
-        return (h("dialog", { class: `${"wm-" + this.modalType}`, ref: (el) => (this.dialogEl = el), onKeyDown: (ev) => this.handleKeyDown(ev) }, h("div", { class: "tabtrap sr-only", tabindex: "0", onFocus: (ev) => {
+        return (h("dialog", { key: '013cab28a1dba3a63ab8c350bfac543520254e63', class: `${"wm-" + this.modalType}`, ref: (el) => (this.dialogEl = el), onKeyDown: (ev) => this.handleKeyDown(ev) }, h("div", { key: '0bedae272d1154b61fbd7ebac59020d6c5b6b3b9', class: "tabtrap sr-only", tabindex: "0", onFocus: (ev) => {
                 const focusedFromCloseButton = ev.relatedTarget && ev.relatedTarget == this.closeButtonEl;
                 // no related target means we're coming from outside the page (browser chrome), and first element should be focused instead
                 focusedFromCloseButton ? this.focusLastElement.emit() : this.focusFirstElement.emit();
-            } }), !this.hasBrowserPopoverSupport && h("div", { class: "wm-tooltip" }), h("slot", null), h("div", { class: "tabtrap sr-only", tabindex: "0", onFocus: () => {
+            } }), !this.hasBrowserPopoverSupport && h("div", { key: '732a9e8edb3302a2d17dd9af6c8bf65ce73fc5d1', class: "wm-tooltip" }), h("slot", { key: '0ee3e5372886db1eb3f814d3f72d422771bbce27' }), h("div", { key: '197477a1dd69b1f5d2cb910fd01e1b3b247bafda', class: "tabtrap sr-only", tabindex: "0", onFocus: () => {
                 this.focusFirstElement.emit();
             } })));
     }

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;
+}