@watermarkinsights/ripple 3.7.0 → 3.8.0-2

package/dist/collection/components/wm-navigation/wm-navigation-item.js

@@ -0,0 +1,101 @@
+import { h, Component, Prop, Host, State, Listen } from "@stencil/core";
+export class NavigationItem {
+  constructor() {
+    this.isTabbing = false;
+  }
+  toggleTabbingOn() {
+    this.isTabbing = true;
+  }
+  toggleTabbingOff() {
+    this.isTabbing = false;
+  }
+  componentWillLoad() {
+    if (document.body.classList.contains("wmcl-user-is-tabbing")) {
+      this.toggleTabbingOn();
+    }
+  }
+  render() {
+    return (h(Host, { role: "listitem" },
+      h("a", { class: `link ${this.active ? "active" : ""} ${this.isTabbing ? "user-is-tabbing" : ""}`, href: this.href },
+        h("div", { class: "icon" },
+          h("slot", null)),
+        h("div", { class: "text" }, this.text))));
+  }
+  static get is() { return "wm-navigation-item"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["wm-navigation-item.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["wm-navigation-item.css"]
+  }; }
+  static get properties() { return {
+    "href": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "href",
+      "reflect": false
+    },
+    "text": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "text",
+      "reflect": false
+    },
+    "active": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean | undefined",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "active",
+      "reflect": false
+    }
+  }; }
+  static get states() { return {
+    "isTabbing": {}
+  }; }
+  static get listeners() { return [{
+      "name": "wmUserIsTabbing",
+      "method": "toggleTabbingOn",
+      "target": "window",
+      "capture": false,
+      "passive": false
+    }, {
+      "name": "wmUserIsNotTabbing",
+      "method": "toggleTabbingOff",
+      "target": "window",
+      "capture": false,
+      "passive": false
+    }]; }
+}

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

@@ -0,0 +1,117 @@
+/* --------------------------------------
+   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 */
+/********************************************************************************************/
+/* BELOW IS BEFORE WE HAD THE COLOR PALETTE FROM UI */
+/* TODO: replace with vars above whenever possible */
+/* Buttons */
+/* VIA */
+.nav {
+  -webkit-box-shadow: 0 0 14px 0 rgba(0, 0, 0, 0.14);
+  -moz-box-shadow: 0 0 14px 0 rgba(0, 0, 0, 0.14);
+  box-shadow: 0 0 14px 0 rgba(0, 0, 0, 0.14);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 7.5625rem;
+  background-color: #fff;
+  overflow-x: hidden;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+  font-size: 0.875rem;
+  height: 100%;
+  z-index: 10;
+}
+
+.navlist {
+  margin: 0;
+  padding: 0;
+}
+
+.toggle-wrapper {
+  display: none;
+}
+
+/* COLLAPSIBLE STYLES */
+@media screen and (max-width: 1023px) {
+  .nav {
+    -ms-transition: transform 0.33s ease;
+    -webkit-transition: transform 0.33s ease;
+    -moz-transition: transform 0.33s ease;
+    transition: transform 0.33s ease;
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 100;
+    transform: translateX(-100%);
+  }
+  .nav ul {
+    visibility: hidden;
+  }
+  .nav[aria-expanded=true] {
+    transform: translateX(0);
+  }
+  .nav[aria-expanded=true] ul {
+    visibility: visible;
+  }
+  .nav .toggle-wrapper {
+    display: inline-block;
+    min-height: 5rem;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .overlay {
+    width: 100vw;
+    height: 100vh;
+    max-width: none;
+    max-height: none;
+    position: fixed !important;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    transform: translate(0%, 0%);
+    background-color: rgba(25, 25, 25, 0.4);
+    -ms-transition: opacity 0.5s ease-out;
+    -webkit-transition: opacity 0.5s ease-out;
+    -moz-transition: opacity 0.5s ease-out;
+    transition: opacity 0.5s ease-out;
+  }
+}

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

@@ -0,0 +1,142 @@
+import { h, Component, Element, Prop, State, Listen, Host, Watch, Event } from "@stencil/core";
+import { intl } from "../../global/functions";
+export class Navigation {
+  constructor() {
+    this.open = false;
+    this.isTabbing = false;
+    this.openTooltipMessage = intl.formatMessage({
+      id: "global.openVerb",
+      defaultMessage: "Open",
+      description: "For a button, to open a user interface element",
+    });
+    this.closeTooltipMessage = intl.formatMessage({
+      id: "global.closeVerb",
+      defaultMessage: "Close",
+      description: "For a button, to close a user interface element",
+    });
+  }
+  get ariaExpanded() {
+    return window.innerWidth < 1024
+      ? // if component is in collapsible mode, set aria-expanded according to expanded state
+        this.open.toString()
+      : // otherwise, do not render attr at all
+        undefined;
+  }
+  toggleTabbingOn() {
+    this.isTabbing = true;
+  }
+  toggleTabbingOff() {
+    this.isTabbing = false;
+  }
+  componentWillLoad() {
+    if (document.body.classList.contains("wmcl-user-is-tabbing")) {
+      this.toggleTabbingOn();
+    }
+    this.el.focus = function () {
+      this.shadowRoot.querySelector(".toggle").focus();
+      /*
+      // prevent tooltip from showing on programmatic focus
+      requestAnimationFrame(() => {
+        this.tooltipVisible = false;
+      });
+       */
+    };
+  }
+  componentDidLoad() {
+    // Should fail silently if not found as devs may decide not to use the hamburger component.
+    this.hamburgerBtn = document.querySelector("wm-navigation-hamburger");
+  }
+  updateHamburgerState() {
+    this.wmNavigationStateChanged.emit({ open: this.open });
+    if (this.open) {
+      // wait for nav to be expanded otherwise tooltip will be misplaced.
+      // also btn can't be focused right away.
+      setTimeout(() => this.toggleEl.focus(), 250);
+    }
+    else {
+      // should fail silently if el doesn't exist
+      this.hamburgerBtn && this.hamburgerBtn.focus();
+    }
+  }
+  renderOverlay() {
+    return (h("div", { class: "overlay", onClick: () => {
+        this.open = false;
+      } }));
+  }
+  render() {
+    return (h(Host, null,
+      this.open ? this.renderOverlay() : "",
+      h("nav", { class: "nav", "aria-expanded": this.ariaExpanded },
+        h("div", { class: "toggle-wrapper" },
+          h("wm-button", { ref: (el) => (this.toggleEl = el), class: `toggle ${this.isTabbing ? "user-is-tabbing" : ""}`, "button-type": "navigational", icon: this.open ? "f156" : "f35c", "icon-size": "2rem", tooltip: this.open ? this.closeTooltipMessage : this.openTooltipMessage, "tooltip-position": "left", tabIndex: this.open ? undefined : -1, onClick: () => {
+              this.open = !this.open;
+            } })),
+        h("ul", { class: "navlist" },
+          h("slot", null)))));
+  }
+  static get is() { return "wm-navigation"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["wm-navigation.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["wm-navigation.css"]
+  }; }
+  static get properties() { return {
+    "open": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "open",
+      "reflect": true,
+      "defaultValue": "false"
+    }
+  }; }
+  static get states() { return {
+    "isTabbing": {}
+  }; }
+  static get events() { return [{
+      "method": "wmNavigationStateChanged",
+      "name": "wmNavigationStateChanged",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+  static get elementRef() { return "el"; }
+  static get watchers() { return [{
+      "propName": "open",
+      "methodName": "updateHamburgerState"
+    }]; }
+  static get listeners() { return [{
+      "name": "wmUserIsTabbing",
+      "method": "toggleTabbingOn",
+      "target": "window",
+      "capture": false,
+      "passive": false
+    }, {
+      "name": "wmUserIsNotTabbing",
+      "method": "toggleTabbingOff",
+      "target": "window",
+      "capture": false,
+      "passive": false
+    }]; }
+}

package/dist/collection/components/wm-navigator/priv-navigator-button/priv-navigator-button.css

@@ -35,7 +35,6 @@
 /********************************************************************************************/
 /* 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 */

package/dist/collection/components/wm-navigator/priv-navigator-item/priv-navigator-item.css

@@ -35,7 +35,6 @@
 /********************************************************************************************/
 /* 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 */

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

@@ -35,7 +35,6 @@
 /********************************************************************************************/
 /* 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 */

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

@@ -1,4 +1,3 @@
-@charset "UTF-8";
 /* --------------------------------------
    1. Box-shadow
    -------------------------------------- */
@@ -36,7 +35,6 @@
 /********************************************************************************************/
 /* 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 */
@@ -77,7 +75,7 @@ wm-option.icon {
   line-height: inherit;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  content: "";
+  content: "\f131";
   display: inline;
   margin-right: 0.25rem;
   color: #575195;
@@ -90,7 +88,7 @@ wm-option[aria-selected=true] {
 }
 :host([aria-selected=true]) .checkbox:before,
 wm-option[aria-selected=true] .checkbox:before {
-  content: "";
+  content: "\f132";
 }
 
 :host([aria-disabled=true]),

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

@@ -35,7 +35,6 @@
 /********************************************************************************************/
 /* 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 */

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

@@ -35,7 +35,6 @@
 /********************************************************************************************/
 /* 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 */

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

@@ -1,4 +1,3 @@
-@charset "UTF-8";
 /* --------------------------------------
    1. Box-shadow
    -------------------------------------- */
@@ -36,7 +35,6 @@
 /********************************************************************************************/
 /* 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 */
@@ -115,7 +113,7 @@
   line-height: inherit;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  content: "";
+  content: "\f026";
   margin-left: 0.3125rem;
 }
 [dir=RTL] .wrapper.invalid .label:after {
@@ -172,7 +170,7 @@
   line-height: inherit;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  content: "";
+  content: "\f140";
   position: absolute;
   right: 0.5625rem;
   pointer-events: none;

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

@@ -1,4 +1,3 @@
-@charset "UTF-8";
 /* --------------------------------------
    1. Box-shadow
    -------------------------------------- */
@@ -36,7 +35,6 @@
 /********************************************************************************************/
 /* 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 */
@@ -138,7 +136,7 @@ wm-snackbar .wm-snackbars .wm-snack-wrapper .wm-snackbar .link.new-window::after
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   display: inline;
-  content: "";
+  content: "\f137";
   margin-left: 0.25rem;
 }
 :host .wm-snackbars .wm-snack-wrapper .wm-snackbar .link:hover,
@@ -223,7 +221,7 @@ wm-snackbar .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closes
   line-height: inherit;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  content: "";
+  content: "\f156";
 }
 :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 {

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

@@ -35,7 +35,6 @@
 /********************************************************************************************/
 /* 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 */

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

@@ -35,7 +35,6 @@
 /********************************************************************************************/
 /* 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 */

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

@@ -35,7 +35,6 @@
 /********************************************************************************************/
 /* 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 */

package/dist/collection/components/wm-tag-input/wm-tag-input.css

@@ -1,4 +1,3 @@
-@charset "UTF-8";
 /* --------------------------------------
    1. Box-shadow
    -------------------------------------- */
@@ -36,7 +35,6 @@
 /********************************************************************************************/
 /* 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 */
@@ -115,7 +113,7 @@ wm-tag-input .wrapper.invalid .label:after {
   line-height: inherit;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  content: "";
+  content: "\f026";
   margin-left: 0.3125rem;
 }
 [dir=RTL] :host .wrapper.invalid .label:after,
@@ -267,7 +265,7 @@ wm-tag-input .tag-area [role=option] .remove-btn:before {
   line-height: inherit;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  content: "";
+  content: "\f156";
 }
 :host input,
 wm-tag-input input {

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

@@ -76,6 +76,15 @@ export class TagInput {
     if (!this.label) {
       console.error("wm-tag-input must have a label property");
     }
+    this.el.focus = function () {
+      // if present, send focus to the selected tags list
+      if (this.selectedTags) {
+        this.shadowRoot.querySelector("ul.tag-area").focus();
+      }
+      else {
+        this.shadowRoot.querySelector("input").focus();
+      }
+    };
     this.consolidateSelectedTags();
   }
   componentDidLoad() {

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

@@ -1,4 +1,3 @@
-@charset "UTF-8";
 /* --------------------------------------
    1. Box-shadow
    -------------------------------------- */
@@ -36,7 +35,6 @@
 /********************************************************************************************/
 /* 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 */
@@ -126,7 +124,7 @@ wm-timepicker .wrapper.invalid .label:after {
   line-height: inherit;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  content: "";
+  content: "\f026";
   margin-left: 0.3125rem;
 }
 [dir=RTL] :host .wrapper.invalid .label:after,
@@ -216,7 +214,7 @@ wm-timepicker .wrapper .inner-wrapper button .clock::after {
   line-height: inherit;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  content: "";
+  content: "\f150";
   color: #575195;
   font-size: 1.5rem;
   padding: 0;

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

@@ -18,7 +18,7 @@ export class Timepicker {
     this.buttonAriaLabel = intl.formatMessage({
       id: "time.selectTime",
       defaultMessage: "Select time",
-      description: "Button text for screen readers."
+      description: "Button text for screen readers.",
     });
   }
   toggleTabbingOn() {
@@ -377,7 +377,10 @@ export class Timepicker {
             h("button", { id: `btn-${this.uid}`, class: this.isTabbing ? "user-is-tabbing" : "", ref: (el) => (this.buttonEl = el), disabled: this.disabled, "aria-controls": `list-${this.uid}`, "aria-expanded": this.isExpanded ? "true" : "false", "aria-label": this.buttonAriaLabel, "aria-describedby": `time-input-${this.uid}`, onClick: () => (this.isExpanded ? this.close() : this.open()), 
               // This addresses an issue in Safari, where clicking buttons does not focus them
               // if the button does not receive focus when clicked, Timepicker incorrectly emits a blur event
-              onMouseDown: () => this.buttonEl.focus(), onBlur: (ev) => ev.stopPropagation() },
+              onMouseDown: (ev) => {
+                ev.preventDefault();
+                this.buttonEl.focus();
+              } },
               h("span", { class: "clock" })),
             h("ul", { class: `options ${this.isExpanded ? "open" : ""}  ${this.openUp ? "upwards" : ""}`, id: `list-${this.uid}`, role: "listbox", "aria-labelledby": `label-${this.uid}`, "aria-describedby": this.isExpanded ? "collapsed" : null, tabindex: -1, ref: (el) => (this.optionsEl = el) }, this.renderOptions())),
           h("div", { id: `error-${this.uid}`, class: "error", "aria-live": "assertive", "aria-atomic": "true" }, this.displayedErrorMessage)))));

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

@@ -1,4 +1,3 @@
-@charset "UTF-8";
 /* --------------------------------------
    1. Box-shadow
    -------------------------------------- */
@@ -36,7 +35,6 @@
 /********************************************************************************************/
 /* 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 */
@@ -71,7 +69,7 @@ wm-toggletip .button:before {
   line-height: inherit;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  content: "";
+  content: "\f2fc";
   font-size: 16px;
   color: #4a4a4a;
   background: radial-gradient(white 40%, transparent 0%);

package/dist/collection/components/wm-uploader/wm-network-uploader/wm-network-uploader.css

@@ -1,4 +1,3 @@
-@charset "UTF-8";
 /* --------------------------------------
    1. Box-shadow
    -------------------------------------- */
@@ -36,7 +35,6 @@
 /********************************************************************************************/
 /* 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 */
@@ -420,7 +418,7 @@ wm-network-uploader .wm-button.-selectoronly:before {
   line-height: inherit;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  content: "";
+  content: "\f140";
   position: absolute;
   right: 0.5625rem;
   top: 50%;