@watermarkinsights/ripple 3.0.1-0 → 3.0.2-0

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

@@ -0,0 +1,331 @@
+@charset "UTF-8";
+/* --------------------------------------
+   1. Box-shadow
+   -------------------------------------- */
+/* --------------------------------------
+   2. Border-radius
+   -------------------------------------- */
+/* --------------------------------------
+   3. Transforms
+   -------------------------------------- */
+/* --------------------------------------
+   4. Button Focus
+   -------------------------------------- */
+/* --------------------------------------
+   5. Flex
+   -------------------------------------- */
+/* --------------------------------------
+   6. Button Hover
+   -------------------------------------- */
+/* --------------------------------------
+   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)
+   -------------------------------------- */
+/********************************************************************************************/
+/* DO NOT USE THESE DIRECTLY, ASSIGN THEM TO VARIABLES NAMED AFTER FUNCTIONALITY, SEE BELOW */
+/********************************************************************************************/
+/* USAGE */
+/* BELOW IS BEFORE WE HAD THE COLOR PALETTE FROM UI */
+/* TODO: replace with vars above whenever possible */
+/* Buttons */
+/* VIA */
+.user-is-tabbing .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack:focus:not(:active) {
+  -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 #c6b4e3;
+  -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 #c6b4e3;
+  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 #c6b4e3;
+  outline: none;
+}
+
+:host *,
+wm-snackbar * {
+  box-sizing: border-box;
+  margin: unset;
+}
+:host .wm-snackbars,
+wm-snackbar .wm-snackbars {
+  position: fixed;
+  bottom: 0;
+  left: 1.25rem;
+  right: 1.25rem;
+  padding: 0.25rem 0.625rem 1.875rem;
+  z-index: 2001;
+  max-width: 35.5rem;
+  max-height: 17.5rem;
+  -webkit-overflow-scrolling: touch;
+  overflow: auto;
+}
+:host .wm-snackbars.empty,
+wm-snackbar .wm-snackbars.empty {
+  -ms-transition: all 0.25s 0ms cubic-bezier(0.4, 0, 1, 1);
+  -webkit-transition: all 0.25s 0ms cubic-bezier(0.4, 0, 1, 1);
+  -moz-transition: all 0.25s 0ms cubic-bezier(0.4, 0, 1, 1);
+  transition: all 0.25s 0ms cubic-bezier(0.4, 0, 1, 1);
+  padding-top: 0;
+  padding-bottom: 0;
+}
+:host .wm-snackbars .wm-snack-wrapper,
+wm-snackbar .wm-snackbars .wm-snack-wrapper {
+  width: 100%;
+  height: 100%;
+}
+:host .wm-snackbars .wm-snack-wrapper:not(:last-child),
+wm-snackbar .wm-snackbars .wm-snack-wrapper:not(:last-child) {
+  margin-bottom: 1.25rem;
+}
+:host .wm-snackbars .wm-snack-wrapper .wm-snackbar,
+wm-snackbar .wm-snackbars .wm-snack-wrapper .wm-snackbar {
+  -webkit-box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 3px rgba(0, 0, 0, 0.12), 0 4px 15px 0 rgba(0, 0, 0, 0.2);
+  -moz-box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 3px rgba(0, 0, 0, 0.12), 0 4px 15px 0 rgba(0, 0, 0, 0.2);
+  box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 3px rgba(0, 0, 0, 0.12), 0 4px 15px 0 rgba(0, 0, 0, 0.2);
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -ms-transition: all 0.25s 0ms cubic-bezier(0.4, 0, 1, 1);
+  -webkit-transition: all 0.25s 0ms cubic-bezier(0.4, 0, 1, 1);
+  -moz-transition: all 0.25s 0ms cubic-bezier(0.4, 0, 1, 1);
+  transition: all 0.25s 0ms cubic-bezier(0.4, 0, 1, 1);
+  font-size: 0.875rem;
+  color: #fff;
+  padding: 0.9375rem 1.875rem;
+  background: #4a4a4a;
+  opacity: 0;
+  left: 0;
+  position: relative;
+  font-family: inherit;
+}
+:host .wm-snackbars .wm-snack-wrapper .wm-snackbar .link,
+wm-snackbar .wm-snackbars .wm-snack-wrapper .wm-snackbar .link {
+  letter-spacing: 0;
+  text-transform: none;
+  font-size: 0.875rem;
+  border: none;
+  background: transparent;
+  padding-left: 0;
+  padding-right: 0;
+  height: auto;
+  border-radius: 0;
+  line-height: 1;
+  color: #85dadf;
+  margin: 0 3.125rem 0 0.625rem;
+  text-decoration: none;
+  font-weight: 600;
+}
+:host .wm-snackbars .wm-snack-wrapper .wm-snackbar .link:hover,
+wm-snackbar .wm-snackbars .wm-snack-wrapper .wm-snackbar .link:hover {
+  text-decoration: underline;
+}
+:host .wm-snackbars .wm-snack-wrapper .wm-snackbar .link:focus,
+wm-snackbar .wm-snackbars .wm-snack-wrapper .wm-snackbar .link:focus {
+  outline: none;
+  border: none;
+}
+:host .wm-snackbars .wm-snack-wrapper .wm-snackbar .link::-moz-focus-inner,
+wm-snackbar .wm-snackbars .wm-snack-wrapper .wm-snackbar .link::-moz-focus-inner {
+  border: 0;
+  outline: none;
+}
+:host .wm-snackbars .wm-snack-wrapper .wm-snackbar:not(:last-child),
+wm-snackbar .wm-snackbars .wm-snack-wrapper .wm-snackbar:not(:last-child) {
+  margin-bottom: 1.25rem;
+}
+:host .wm-snackbars .wm-snack-wrapper .wm-snackbar.active:not(button),
+wm-snackbar .wm-snackbars .wm-snack-wrapper .wm-snackbar.active:not(button) {
+  opacity: 1;
+}
+:host .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg,
+wm-snackbar .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -ms-flex-pack: justify;
+  -webkit-justify-content: space-between;
+  justify-content: space-between;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+  -ms-flex-align: center;
+  align-items: center;
+  width: 100%;
+  position: relative;
+  padding: 0;
+}
+:host .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .msgtext,
+wm-snackbar .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .msgtext {
+  width: 100%;
+}
+:host .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack,
+wm-snackbar .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack {
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  box-shadow: none;
+  -webkit-border-radius: 50%;
+  -moz-border-radius: 50%;
+  -ms-border-radius: 50%;
+  border-radius: 50%;
+  background-color: #3b3b3b;
+  color: #ffffff;
+  cursor: pointer;
+  border: none;
+  font-size: 1rem;
+  padding: 0;
+  height: auto;
+  line-height: 1;
+  min-width: 2.75rem;
+  min-height: 2.75rem;
+  text-align: center;
+  letter-spacing: normal;
+}
+@media screen and (min-width: 48rem) {
+  :host .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack,
+wm-snackbar .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack {
+    min-width: 1.875rem;
+    min-height: 1.875rem;
+  }
+}
+:host .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack:before,
+wm-snackbar .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack: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: "";
+}
+:host .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack:hover,
+wm-snackbar .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack:hover {
+  background-color: #fff;
+  color: #4a4a4a;
+}
+:host .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack:focus,
+wm-snackbar .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack:focus {
+  outline: none;
+}
+:host .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack::-moz-focus-inner,
+wm-snackbar .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack::-moz-focus-inner {
+  border: 0;
+  outline: none;
+}
+:host .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack:active,
+wm-snackbar .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack:active {
+  -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-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack > .tooltip,
+wm-snackbar .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack > .tooltip {
+  position: absolute;
+  opacity: 0;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  font-size: 0.875rem;
+  text-transform: none;
+  font-weight: normal;
+  background: black;
+  color: #fff;
+  padding: 0;
+  line-height: normal;
+  z-index: 30;
+}
+:host .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack:hover > .tooltip, :host .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack.user-is-tabbing:focus > .tooltip,
+wm-snackbar .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack:hover > .tooltip,
+wm-snackbar .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack.user-is-tabbing:focus > .tooltip {
+  clip: auto;
+  width: auto;
+  height: auto;
+  opacity: 1;
+  transition: opacity 500ms 500ms;
+  padding: 0.375rem;
+  top: 2.75rem;
+  left: 2.75rem;
+  white-space: nowrap;
+  transform: translateX(-50%);
+}
+@media screen and (min-width: 48rem) {
+  :host .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack:hover > .tooltip, :host .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack.user-is-tabbing:focus > .tooltip,
+wm-snackbar .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack:hover > .tooltip,
+wm-snackbar .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack.user-is-tabbing:focus > .tooltip {
+    top: 2.0625rem;
+    left: auto;
+  }
+}
+:host .wm-snackbars .wm-snack-wrapper .wm-snackbar .sr-only,
+wm-snackbar .wm-snackbars .wm-snack-wrapper .wm-snackbar .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;
+}
+:host .sr-only,
+wm-snackbar .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;
+}
+
+.user-is-tabbing .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack:focus:not(:active) > .tooltip {
+  clip: auto;
+  width: auto;
+  height: auto;
+  opacity: 1;
+  transition: opacity 500ms 500ms;
+  padding: 0.375rem;
+  top: 2.75rem;
+  left: 2.75rem;
+  white-space: nowrap;
+  transform: translateX(-50%);
+}
+@media screen and (min-width: 48rem) {
+  .user-is-tabbing .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack:focus:not(:active) > .tooltip {
+    top: 2.0625rem;
+    left: auto;
+  }
+}
+
+.user-is-tabbing .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .link:focus:not(:active) {
+  outline: none;
+  background: linear-gradient(90deg, #85dadf 66%, transparent 0) repeat-x;
+  background-size: 0.375rem 0.1875rem;
+  background-position: 0 1em;
+  border-radius: 0;
+  line-height: normal;
+}

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

@@ -0,0 +1,240 @@
+import { h, Component, Element, Prop, Event, Watch, Listen } from "@stencil/core";
+import { generateId } from "../../global/functions";
+export class Snackbar {
+  constructor() {
+    //Prop receives notifications as JSON string, which is later parsed into an array of objects.
+    this.notifications = "[]";
+    this.parsedNotifications = []; //Holds the parsed array
+    this.isTabbing = false; //For screenreader purposes, to ensure link receives focus even after screenreader interprets "enter" as a "click"
+    this.timers = [];
+    this.newNotification = false;
+  }
+  updateSnacks(newValue) {
+    const parsedData = JSON.parse(newValue);
+    const length = parsedData.length;
+    const prevNotificationsLength = this.parsedNotifications.length;
+    this.parsedNotifications = [];
+    //Parse notifications received as props and store a reference to them
+    for (let i = 0; i < length; i++) {
+      let newNotification = {
+        id: parsedData[i].id.toString(),
+        message: parsedData[i].message.toString(),
+        link: parsedData[i].link.toString(),
+      };
+      this.parsedNotifications = [...this.parsedNotifications, newNotification];
+    }
+    //If a new notification was added, set a timer and store a reference to the current active element so that if focus must move to the notification, it can return the user where they were once they dismiss the notification.
+    if (prevNotificationsLength < this.parsedNotifications.length) {
+      const newTimer = window.setTimeout(() => this.snackExpired(), 20000);
+      this.timers = [newTimer, ...this.timers];
+      this.storeElToFocusOnDismiss();
+      this.newNotification = true;
+    }
+    else {
+      this.newNotification = false;
+    }
+  }
+  componentWillLoad() {
+    this.uid = this.el.id ? this.el.id : generateId();
+  }
+  //A change in the notificaiton prop will trigger the update function. The update's only role is to determine how focus should be managed when a notification is added.
+  componentDidUpdate() {
+    //If the user is tabbing and there's a new notification, focus the link and disable timer.
+    this.isTabbing && this.newNotification && this.focusLinkAndDisableTimer();
+    this.newNotification = false;
+  }
+  checkForTabbing(ev) {
+    if (ev.keyCode === 9) {
+      this.toggleTabbingOn();
+    }
+  }
+  //Workaround for screenreader's triggering click event on "enter".
+  handleMouse() {
+    this.toggleTabbingOff();
+  }
+  focusLinkAndDisableTimer() {
+    //If the new notification has a link, focus the link and clear the timeout. This is for accessibility purposes, for keyboard/screenreader users.
+    const latestNotification = this.parsedNotifications[0];
+    if (latestNotification.link) {
+      let link = this.el.shadowRoot.querySelector(`#action-${latestNotification.id}`);
+      link.focus();
+      this.stopTimer(latestNotification);
+    }
+  }
+  toggleTabbingOn() {
+    this.isTabbing = true;
+    this.snackbarEl && this.snackbarEl.classList.add("user-is-tabbing");
+  }
+  toggleTabbingOff() {
+    this.isTabbing = false;
+    this.snackbarEl && this.snackbarEl.classList.remove("user-is-tabbing");
+  }
+  storeElToFocusOnDismiss() {
+    let triggeringButton = document.activeElement;
+    while (triggeringButton && triggeringButton.shadowRoot) {
+      triggeringButton = triggeringButton.shadowRoot.activeElement;
+    }
+    this.focusOnDismiss = triggeringButton;
+  }
+  snackDismissed(notification) {
+    this.endSnack(notification);
+    //Focus should only be returned if it was moved in the first place, i.e., there was a link and the user was tabbing. Otherwise, for a mouse user, the user's focus would jump back to the triggering element.
+    notification.link && this.isTabbing && this.focusOnDismiss.focus();
+  }
+  //Remove snack from notification list once timer runs out
+  snackExpired() {
+    const notification = this.parsedNotifications[this.parsedNotifications.length - 1];
+    this.endSnack(notification);
+  }
+  endSnack(notification) {
+    //App listens for userFinishedSnack event and deletes the emitted notification.
+    this.stopTimer(notification);
+    this.userFinishedSnack.emit({
+      id: notification.id,
+      message: notification.message,
+      link: notification.link,
+    });
+  }
+  snackLinkClicked(notification) {
+    //App listens for userTriggeredAction event, deletes emitted notification, and takes over focus.
+    this.stopTimer(notification);
+    this.userTriggeredAction.emit({
+      id: notification.id,
+      message: notification.message,
+      link: notification.link,
+    });
+  }
+  //Delete the timer corresponding to the dismissed notification
+  stopTimer(notification) {
+    this.parsedNotifications.forEach((notif, index) => {
+      if (notif.id === notification.id) {
+        clearTimeout(this.timers[index]);
+        this.timers = this.timers.filter((timer, ind) => {
+          if (ind !== index) {
+            return timer;
+          }
+        });
+      }
+    });
+  }
+  renderSnackbars() {
+    return this.parsedNotifications.map((notification) => (h("div", { class: "wm-snack-wrapper" },
+      h("div", { id: `snack-${this.uid}`, class: "wm-snackbar active neutral" },
+        h("div", { class: "sr-only", tabindex: notification.link ? 0 : -1, onFocus: () => notification.link && this.snackDismissed(notification) }),
+        h("div", { class: "wm-snackbarmsg" },
+          h("div", { class: "msgtext" },
+            h("span", null, notification.message),
+            notification.link && (h("a", { id: `action-${notification.id}`, class: "link", "aria-label": `Click to ${notification.link}...`, tabindex: 0, onClick: () => {
+                this.snackLinkClicked(notification);
+              }, onKeyDown: (ev) => ev.keyCode === 13 && this.snackLinkClicked(notification) },
+              h("span", { "aria-hidden": "true" }, notification.link)))),
+          h("button", { id: `close-button-${notification.id}`, "aria-label": "Close this notification", class: "closesnack", tabindex: notification.link ? 0 : -1, onClick: () => this.snackDismissed(notification) },
+            h("span", { class: "tooltip", "aria-hidden": "true" }, "Close"))),
+        h("div", { class: "sr-only", tabindex: notification.link ? 0 : -1, onFocus: () => notification.link && this.snackDismissed(notification) })))));
+  }
+  renderLiveRegion() {
+    const latestNotification = this.parsedNotifications[0];
+    const link = this.isTabbing ? "" : latestNotification.link;
+    const srAnnouncement = `${latestNotification.message} ${link}`;
+    const region = this.el.shadowRoot.querySelector(`#wm-live-region-${this.uid}`);
+    if (region) {
+      region.innerHTML = "";
+      const wrapper = document.createElement("span");
+      wrapper.innerHTML = srAnnouncement;
+      region.appendChild(wrapper);
+    }
+  }
+  render() {
+    this.newNotification && this.renderLiveRegion();
+    const snackbars = this.renderSnackbars();
+    const wrappingClass = this.parsedNotifications.length === 0 ? "empty" : "";
+    return (h("div", { ref: (el) => (this.snackbarEl = el), class: `wm-snackbars ${wrappingClass}` },
+      h("div", { class: "sr-only", "aria-live": "polite", "aria-atomic": "false", id: `wm-live-region-${this.uid}` }),
+      snackbars));
+  }
+  static get is() { return "wm-snackbar"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["wm-snackbar.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["wm-snackbar.css"]
+  }; }
+  static get properties() { return {
+    "notifications": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "notifications",
+      "reflect": true,
+      "defaultValue": "\"[]\""
+    }
+  }; }
+  static get events() { return [{
+      "method": "userFinishedSnack",
+      "name": "userFinishedSnack",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "Object",
+        "resolved": "Object",
+        "references": {
+          "Object": {
+            "location": "global"
+          }
+        }
+      }
+    }, {
+      "method": "userTriggeredAction",
+      "name": "userTriggeredAction",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "Object",
+        "resolved": "Object",
+        "references": {
+          "Object": {
+            "location": "global"
+          }
+        }
+      }
+    }]; }
+  static get elementRef() { return "el"; }
+  static get watchers() { return [{
+      "propName": "notifications",
+      "methodName": "updateSnacks"
+    }]; }
+  static get listeners() { return [{
+      "name": "keydown",
+      "method": "checkForTabbing",
+      "target": "document",
+      "capture": false,
+      "passive": false
+    }, {
+      "name": "mouseover",
+      "method": "handleMouse",
+      "target": "document",
+      "capture": false,
+      "passive": true
+    }]; }
+}

package/dist/collection/components/wm-tabs/wm-tab-item/wm-tab-item.css

@@ -0,0 +1,104 @@
+/* --------------------------------------
+   1. Box-shadow
+   -------------------------------------- */
+/* --------------------------------------
+   2. Border-radius
+   -------------------------------------- */
+/* --------------------------------------
+   3. Transforms
+   -------------------------------------- */
+/* --------------------------------------
+   4. Button Focus
+   -------------------------------------- */
+/* --------------------------------------
+   5. Flex
+   -------------------------------------- */
+/* --------------------------------------
+   6. Button Hover
+   -------------------------------------- */
+/* --------------------------------------
+   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)
+   -------------------------------------- */
+/********************************************************************************************/
+/* DO NOT USE THESE DIRECTLY, ASSIGN THEM TO VARIABLES NAMED AFTER FUNCTIONALITY, SEE BELOW */
+/********************************************************************************************/
+/* USAGE */
+/* BELOW IS BEFORE WE HAD THE COLOR PALETTE FROM UI */
+/* TODO: replace with vars above whenever possible */
+/* Buttons */
+/* VIA */
+:host {
+  font-family: inherit;
+  display: inline-block;
+}
+:host * {
+  box-sizing: border-box;
+}
+:host .tab-item {
+  list-style-type: none;
+  height: 100%;
+  display: inline-block;
+}
+:host .tab-item .tab {
+  -webkit-border-radius: 0;
+  -moz-border-radius: 0;
+  -ms-border-radius: 0;
+  border-radius: 0;
+  color: #575195;
+  text-decoration: none;
+  letter-spacing: 0.7px;
+  font-size: 0.875rem;
+  font-weight: 500;
+  opacity: 1;
+  position: relative;
+  text-transform: uppercase;
+  display: inline-block;
+  height: 3.3333333333em;
+  line-height: 3.3333333333em;
+  padding-right: 1.5rem;
+  padding-left: 1.5rem;
+}
+:host .tab-item .tab[aria-selected=true] {
+  font-weight: 700;
+  opacity: 1;
+  background: linear-gradient(currentColor, currentColor) bottom/0 0 no-repeat;
+  background-size: calc(100% - 50px) 3px;
+}
+:host .tab-item .tab[aria-selected=true].dark {
+  color: #fff;
+}
+:host .tab-item .tab, :host .tab-item .tab:hover, :host .tab-item .tab:active {
+  outline: none;
+}
+:host .tab-item .tab:focus {
+  outline: none;
+}
+:host .tab-item .tab.dark:not([aria-selected=true]) {
+  opacity: 0.8;
+  color: #fff;
+}
+:host .tab-item .tab.user-is-tabbing:focus:not(:active) {
+  outline: none;
+  -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 #61279e;
+  -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 #61279e;
+  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 #61279e;
+}
+:host .tab-item .tab.user-is-tabbing:focus:not(:active)::-moz-focus-inner {
+  border: 0;
+}
+:host.hide {
+  display: none;
+}