@watermarkinsights/ripple 5.16.0-alpha.0 → 5.16.0-alpha.10

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

@@ -4,19 +4,24 @@ import { intl, snakeCaseToCamelCase, getNewIndexToFocus } from "../../global/fun
 import { getRequest } from "../../global/services/http-service";
 export class Navigator {
     constructor() {
+        this.authType = 1; // 1: none or off, 2: username-password or username_password_sso, 3: saml or saml_sso
+        // The new way is to retrieve user info from an endpoint
+        // dev needs to opt-in by setting loadFromUserinfo to true
+        this.loadFromUserinfo = false;
         // comp can check whether the info was successfully retrieved with:
         this.retrievedInfo = !this.loadFromUserinfo; // when in endpoint mode, only render after get request completed
         // used either way to store the products
         this.parsedProducts = [];
-        this.openRight = false; // whether the menu should open on the right side
-        this.userName = undefined;
-        this.email = undefined;
-        this.authType = 1;
-        this.connectionName = undefined;
-        this.logoutUrl = undefined;
-        this.products = undefined;
-        this.loadFromUserinfo = false;
+        /**
+         * Event emitted from child wm-navigator-button updates the state, which is then passed down as a prop by wm-navigator.
+         */
         this.isOpen = false;
+        this.openRight = false; // whether the menu should open on the right side
+        /**
+         * Value is set to the index of the current product on load.
+         * Keyboard navigation updates the state to keep track of focus in the dropdown.
+         * State resets to the index of the current product when the dropdown closes.
+         */
         this.itemIndexToFocus = 0;
     }
     isSafeUrl(url) {
@@ -314,6 +319,7 @@ export class Navigator {
         return {
             "userName": {
                 "type": "string",
+                "attribute": "user-name",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -326,11 +332,13 @@ export class Navigator {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "user-name",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "email": {
                 "type": "string",
+                "attribute": "email",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -343,11 +351,13 @@ export class Navigator {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "email",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "authType": {
                 "type": "number",
+                "attribute": "auth-type",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -360,12 +370,14 @@ export class Navigator {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "auth-type",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "1"
             },
             "connectionName": {
                 "type": "string",
+                "attribute": "connection-name",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -378,11 +390,13 @@ export class Navigator {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "connection-name",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "logoutUrl": {
                 "type": "string",
+                "attribute": "logout-url",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -395,11 +409,13 @@ export class Navigator {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "logout-url",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "products": {
                 "type": "string",
+                "attribute": "products",
                 "mutable": false,
                 "complexType": {
                     "original": "string | []",
@@ -412,11 +428,13 @@ export class Navigator {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "products",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "loadFromUserinfo": {
                 "type": "boolean",
+                "attribute": "load-from-userinfo",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -429,7 +447,8 @@ export class Navigator {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "load-from-userinfo",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             }

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

@@ -847,37 +847,6 @@
   mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,6.47 6.47,2 12,2M15.59,7L12,10.59L8.41,7L7,8.41L10.59,12L7,15.59L8.41,17L12,13.41L15.59,17L17,15.59L13.41,12L17,8.41L15.59,7Z'/%3E%3C/svg%3E%0A");
 }
 
-/* --------------------------------------
-   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)
-   -------------------------------------- */
 :host,
 wm-pagination {
   --wmcolor-pagination-arrow-disabled: var(--wmcolor-interactive-disabled);

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

@@ -3,6 +3,12 @@ import { debounce, intl } from "../../global/functions";
 import { globalMessages } from "../../global/intl";
 export class Pagination {
     constructor() {
+        this.currentPage = 1;
+        this.totalItems = undefined;
+        this.itemsPerPage = undefined;
+        this.value = 1;
+        this.isLargeSize = window.innerWidth > 600; // first estimate is based on window size, then actual measurement takes place on resize
+        this.srAnnouncement = "";
         this.totalPages = 0;
         this.navigationLabel = intl.formatMessage({
             id: "pagination.navLabel",
@@ -34,12 +40,6 @@ export class Pagination {
             }
             return coreBtns;
         };
-        this.currentPage = 1;
-        this.totalItems = undefined;
-        this.itemsPerPage = undefined;
-        this.value = 1;
-        this.isLargeSize = window.innerWidth > 600;
-        this.srAnnouncement = "";
     }
     pageButtonLabel(pageNum) {
         return intl.formatMessage({
@@ -203,7 +203,7 @@ export class Pagination {
     render() {
         return (
         // do not render the component if there's only one page
-        this.totalItems > this.itemsPerPage && (h("nav", { key: 'b560fdf7586a80ce3e117d74d264e56afd7de42e', "aria-label": `${this.navigationLabel} ${this.getCurrentPagesInView()}. ${this.currentPageAnnouncement(this.currentPage)}` }, this.isLargeSize ? this.renderLarge() : this.renderSmall(), h("div", { key: '8d35b0f1049ac65751a14d96daef2cfcd5928765', id: "status", class: "sr-only", "aria-live": "polite", "aria-relevant": "text", "aria-atomic": "true" }, this.srAnnouncement))));
+        this.totalItems > this.itemsPerPage && (h("nav", { key: '4915b3425f35f85d5684893fbc82e6d6a29b9d0f', "aria-label": `${this.navigationLabel} ${this.getCurrentPagesInView()}. ${this.currentPageAnnouncement(this.currentPage)}` }, this.isLargeSize ? this.renderLarge() : this.renderSmall(), h("div", { key: '56b83b74efa2372e03f27ea654c808a2bb86a85b', id: "status", class: "sr-only", "aria-live": "polite", "aria-relevant": "text", "aria-atomic": "true" }, this.srAnnouncement))));
     }
     static get is() { return "wm-pagination"; }
     static get encapsulation() { return "shadow"; }
@@ -222,6 +222,7 @@ export class Pagination {
         return {
             "currentPage": {
                 "type": "number",
+                "attribute": "current-page",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -234,12 +235,14 @@ export class Pagination {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "current-page",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "1"
             },
             "totalItems": {
                 "type": "number",
+                "attribute": "total-items",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -252,12 +255,14 @@ export class Pagination {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "total-items",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "undefined"
             },
             "itemsPerPage": {
                 "type": "number",
+                "attribute": "items-per-page",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -270,12 +275,14 @@ export class Pagination {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "items-per-page",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "undefined"
             },
             "value": {
                 "type": "number",
+                "attribute": "value",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -288,12 +295,14 @@ export class Pagination {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "value",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "1"
             },
             "isLargeSize": {
                 "type": "boolean",
+                "attribute": "is-large-size",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -306,7 +315,8 @@ export class Pagination {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "is-large-size",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "window.innerWidth > 600"
             }

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

@@ -847,37 +847,6 @@
   mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,6.47 6.47,2 12,2M15.59,7L12,10.59L8.41,7L7,8.41L10.59,12L7,15.59L8.41,17L12,13.41L15.59,17L17,15.59L13.41,12L17,8.41L15.59,7Z'/%3E%3C/svg%3E%0A");
 }
 
-/* --------------------------------------
-   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)
-   -------------------------------------- */
 :host * {
   box-sizing: border-box;
 }

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

@@ -3,20 +3,39 @@ import { intl, handleDisabledAttribute, toBool } from "../../global/functions";
 import { globalMessages } from "../../global/intl";
 export class Search {
     constructor() {
-        this.linkEl = null;
         this.searchType = "basic";
         this.disabled = false;
+        /**
+         * Props required for both variants.
+         */
         this.placeholder = "";
         this.label = "";
         this.numResults = 0;
+        /**
+         * This exposes the input's value on the host component so that the app can access it.
+         */
         this.value = "";
+        /**
+         * If the user is tabbing, the search and find variant will display a link to jump to a search result.
+         */
         this.isTabbing = false;
+        /**
+         * Prop specifically for the search and find variant. The id points to the id of the option currently highlighted,
+         * so that tabbing and screen reader users can jump to this option rather than tab through the list to find it.
+         */
         this.highlightedId = "";
         this.highlightedName = null;
+        /**
+         * Indicates which of the search results is currently highlighted. It will be displayed as "[highlightedNum] of [numResults]" next to the input in the search and find variant.
+         * This number updates as the user browses using the buttons.
+         */
         this.highlightedNum = 0;
         this.previousBlurredValue = "";
-        this.parentModal = undefined;
+        /**
+         * Live region announcement
+         */
         this.announcement = "";
+        this.linkEl = null;
     }
     get isDisabled() {
         // string "false" needs to be treated as bool False because react wrappers convert bool to string.
@@ -168,10 +187,10 @@ export class Search {
      * End search and find render helpers
      */
     render() {
-        return (h(Host, { key: 'a6a5d00652d75c3f03ca996c283c0566ad229c68' }, h("div", { key: '1e7e8a9207a2ee1d5412cb2456c1c832060ac77d', id: "wm-search-wrapper", class: `wm-search-wrapper ${this.searchType}` }, h("input", { key: '1f36cf57bcfed0f808ef0b222d8eb65cb6518615', disabled: this.isDisabled, id: "wm-search-input", placeholder: this.placeholder, "aria-label": `${this.label ? this.label + ". " : ""}${intl.formatMessage({
+        return (h(Host, { key: 'cd7f595a342f69a27e507f9110b1bd67ca536b14' }, h("div", { key: '613883fa806fee9b523776e2c81abcc9c7c80eaf', id: "wm-search-wrapper", class: `wm-search-wrapper ${this.searchType}` }, h("input", { key: '5c944cc9756d6bba9396ef768c0d26cdd4fe7b88', disabled: this.isDisabled, id: "wm-search-input", placeholder: this.placeholder, "aria-label": `${this.label ? this.label + ". " : ""}${intl.formatMessage({
                 id: "search.typeToFilterResults",
                 defaultMessage: "Type to filter the results",
-            })}`, onInput: (ev) => this.updateValue(ev.target.value), onBlur: () => this.handleBlur(), "aria-autocomplete": "none", autocomplete: "off", value: this.value }), h("span", { key: 'bf128d74c7fdbd590989d7999b1187d34b01bb31', class: "svg-icon svg-search" }), this.searchType === "find" && this.renderResultsAndBrowseButtons(), h("div", { key: '9898db1a5c0c3c0e13fb32782aa98d88f124798b', id: "wm-search-live", class: "sr-only", "aria-live": "polite", "aria-atomic": "true", ref: (el) => (this.resultsLiveRegion = el) }, this.announcement)), this.searchType === "find" && this.renderJumpToLink()));
+            })}`, onInput: (ev) => this.updateValue(ev.target.value), onBlur: () => this.handleBlur(), "aria-autocomplete": "none", autocomplete: "off", value: this.value }), h("span", { key: 'd6dd15a45a5e449a5b177263e369d5016ae81a4d', class: "svg-icon svg-search" }), this.searchType === "find" && this.renderResultsAndBrowseButtons(), h("div", { key: '4c3d42a0e159512713a54f99c403ca4a06549d06', id: "wm-search-live", class: "sr-only", "aria-live": "polite", "aria-atomic": "true", ref: (el) => (this.resultsLiveRegion = el) }, this.announcement)), this.searchType === "find" && this.renderJumpToLink()));
     }
     static get is() { return "wm-search"; }
     static get encapsulation() { return "shadow"; }
@@ -190,6 +209,7 @@ export class Search {
         return {
             "searchType": {
                 "type": "string",
+                "attribute": "search-type",
                 "mutable": true,
                 "complexType": {
                     "original": "\"basic\" | \"find\"",
@@ -202,12 +222,14 @@ export class Search {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "search-type",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "\"basic\""
             },
             "disabled": {
                 "type": "boolean",
+                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -220,12 +242,14 @@ export class Search {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "disabled",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
                 "defaultValue": "false"
             },
             "placeholder": {
                 "type": "string",
+                "attribute": "placeholder",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -238,12 +262,14 @@ export class Search {
                     "tags": [],
                     "text": "Props required for both variants."
                 },
-                "attribute": "placeholder",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "label": {
                 "type": "string",
+                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -256,12 +282,14 @@ export class Search {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "label",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "numResults": {
                 "type": "number",
+                "attribute": "num-results",
                 "mutable": true,
                 "complexType": {
                     "original": "number",
@@ -274,12 +302,14 @@ export class Search {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "num-results",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "0"
             },
             "value": {
                 "type": "string",
+                "attribute": "value",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -292,12 +322,14 @@ export class Search {
                     "tags": [],
                     "text": "This exposes the input's value on the host component so that the app can access it."
                 },
-                "attribute": "value",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
                 "defaultValue": "\"\""
             },
             "highlightedId": {
                 "type": "string",
+                "attribute": "highlighted-id",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -310,12 +342,14 @@ export class Search {
                     "tags": [],
                     "text": "Prop specifically for the search and find variant. The id points to the id of the option currently highlighted,\nso that tabbing and screen reader users can jump to this option rather than tab through the list to find it."
                 },
-                "attribute": "highlighted-id",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "highlightedName": {
                 "type": "string",
+                "attribute": "highlighted-name",
                 "mutable": false,
                 "complexType": {
                     "original": "string | null",
@@ -328,7 +362,8 @@ export class Search {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "highlighted-name",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "null"
             }

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

@@ -847,37 +847,6 @@
   mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,6.47 6.47,2 12,2M15.59,7L12,10.59L8.41,7L7,8.41L10.59,12L7,15.59L8.41,17L12,13.41L15.59,17L17,15.59L13.41,12L17,8.41L15.59,7Z'/%3E%3C/svg%3E%0A");
 }
 
-/* --------------------------------------
-   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)
-   -------------------------------------- */
 :host * {
   box-sizing: border-box;
   margin: unset;

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

@@ -3,18 +3,19 @@ import { generateId, hideTooltip, intl, showTooltip } from "../../global/functio
 import { globalMessages } from "../../global/intl";
 export class Snackbar {
     constructor() {
+        //Prop receives notifications as JSON string, which is later parsed into an array of objects.
+        this.notifications = "[]";
         this.parsedNotifications = [];
         this.uid = this.el.id ? this.el.id : generateId();
         this.focusOnDismiss = null;
         this.timers = {};
+        this.isTabbing = false;
+        this.announcement = "";
         this.closeSnackMessage = intl.formatMessage({
             id: "snackbar.closeNotification",
             defaultMessage: "Close this notification",
             description: "Notification refers to a notification UI element that can be dismissed",
         });
-        this.notifications = "[]";
-        this.isTabbing = false;
-        this.announcement = "";
     }
     componentDidLoad() {
         const snackObserver = new MutationObserver((snackMutations) => snackMutations.forEach((mutationRecord) => this.handleSnackMutation(mutationRecord)));
@@ -162,11 +163,11 @@ export class Snackbar {
             }, onKeyDown: (ev) => ev.key === "Enter" && this.snackLinkClicked(notification) }, h("span", { "aria-hidden": "true" }, notification.link), notification.newWindow && h("div", { class: "svg-icon svg-open-in-new" })))), h("button", { id: `close-button-${notification.id}`, "aria-label": this.closeSnackMessage, class: "closesnack", tabindex: notification.link ? 0 : -1, onClick: () => this.snackDismissed(notification), onMouseEnter: (ev) => showTooltip("bottom", ev.target, globalMessages.close), onMouseLeave: () => hideTooltip(), onFocus: (ev) => this.isTabbing && showTooltip("bottom", ev.target, globalMessages.close), onBlur: () => hideTooltip() }, h("div", { class: "svg-icon svg-close" }))), h("div", { class: "sr-only", tabindex: notification.link ? 0 : -1, onFocus: () => notification.link && this.snackDismissed(notification) })))));
     }
     render() {
-        return (h(Host, { key: '8c811ca49c66eccb3d4071680bccee7a7b80baf3' }, h("div", { key: '3833104505e54755fd90e25622f5e52207cd04ee', ref: (el) => (this.snackAreaEl = el), class: {
+        return (h(Host, { key: '9b55b8fa05817c3dd826b1318c3b7fdc35d65a51' }, h("div", { key: '8debb1dfc460b20abdc86238a5850e44949364cc', ref: (el) => (this.snackAreaEl = el), class: {
                 "list-wrapper": true,
                 "user-is-tabbing": this.isTabbing,
                 empty: this.parsedNotifications.length == 0,
-            } }, this.renderSnackbars()), h("div", { key: '6d011c99adc5a69e2687014854d324d5e97e06d8', class: "sr-only", "aria-live": "polite", "aria-atomic": "false", id: `wm-live-region-${this.uid}`, ref: (el) => (this.liveRegionEl = el) }, this.announcement)));
+            } }, this.renderSnackbars()), h("div", { key: 'bd51da7d83c448ea676f4f2530dd3ad8ac529c2f', class: "sr-only", "aria-live": "polite", "aria-atomic": "false", id: `wm-live-region-${this.uid}`, ref: (el) => (this.liveRegionEl = el) }, this.announcement)));
     }
     static get is() { return "wm-snackbar"; }
     static get encapsulation() { return "shadow"; }
@@ -184,6 +185,7 @@ export class Snackbar {
         return {
             "notifications": {
                 "type": "string",
+                "attribute": "notifications",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -196,7 +198,8 @@ export class Snackbar {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "notifications",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
                 "defaultValue": "\"[]\""
             }