wcs-core 2.5.3 → 2.8.0

package/dist/collection/components/radio/radio.css

@@ -1,32 +1,27 @@
-:host([mode=radio]) input {
+:host([mode=radio]) input,
+:host([mode=horizontal]) input {
   display: none;
 }
-:host([mode=radio]) label {
-  padding: 0.125rem 0 0;
+:host([mode=radio]) label,
+:host([mode=horizontal]) label {
   margin-bottom: 0;
   color: var(--wcs-text-medium);
-  cursor: pointer;
   background-color: transparent;
-  border: none;
   font-weight: 500 !important;
-  transition: 0.175s ease-in-out;
 }
-:host([mode=radio]) label:before {
-  transition: 0.175s ease-in-out;
+:host([mode=radio]) label:before,
+:host([mode=horizontal]) label:before {
   border-radius: 50%;
-  margin-right: var(--wcs-base-margin);
   border: 2px solid var(--wcs-text-disabled);
   position: relative;
-  display: inline-block;
-  top: 3px;
   width: 1.125rem;
   height: 1.125rem;
   pointer-events: none;
   content: "";
   background-color: var(--wcs-white);
-  box-sizing: border-box;
 }
-:host([mode=radio]) label:after {
+:host([mode=radio]) label:after,
+:host([mode=horizontal]) label:after {
   transition: 0.175s ease-in-out;
   position: relative;
   width: 1.125rem;
@@ -35,21 +30,52 @@
   background: no-repeat 50%/50% 50%;
 }
 
-:host([mode=radio][checked]) label {
+:host([disabled]) label {
+  color: var(--wcs-text-disabled);
+}
+
+:host(:not([disabled])) label {
+  cursor: pointer;
+}
+
+:host([mode=radio][checked]) label,
+:host([mode=horizontal][checked]) label {
   color: var(--wcs-primary);
 }
-:host([mode=radio][checked]) label:before {
+:host([mode=radio][checked]) label:before,
+:host([mode=horizontal][checked]) label:before {
   border-color: var(--wcs-primary);
   background-color: var(--wcs-primary);
 }
 
-:host([mode=radio]:hover) label {
+:host([mode=radio]:hover):not([disabled]) label,
+:host([mode=horizontal]:hover):not([disabled]) label {
   color: var(--wcs-primary);
 }
-:host([mode=radio]:hover) label:before {
+:host([mode=radio]:hover):not([disabled]) label:before,
+:host([mode=horizontal]:hover):not([disabled]) label:before {
   border-color: var(--wcs-primary);
 }
 
+:host([mode=radio]) label {
+  padding: 0.125rem 0 0;
+  border: none;
+  transition: 0.175s ease-in-out;
+}
+:host([mode=radio]) label:before {
+  transition: 0.175s ease-in-out;
+  margin-right: var(--wcs-base-margin);
+  display: inline-block;
+  top: 3px;
+  box-sizing: border-box;
+}
+
+:host([mode=horizontal]) label:before {
+  transition: background-color 0.175s ease-in-out;
+  margin: auto auto var(--wcs-base-margin);
+  display: block;
+}
+
 :host([mode=option]) {
   padding: var(--wcs-base-margin) calc(var(--wcs-base-margin) / 2);
   font-weight: 500 !important;
@@ -66,7 +92,6 @@
   margin-bottom: 0;
   color: var(--wcs-white);
   white-space: nowrap;
-  cursor: pointer;
   border-radius: 0.4375rem;
 }
 

package/dist/collection/components/radio-group/radio-group.css

@@ -22,4 +22,8 @@
   padding: calc(var(--wcs-base-margin) / 2);
   background-color: #4d4f53;
   border-radius: 0.6875rem;
+}
+
+:host([mode=horizontal]) {
+  justify-content: space-between;
 }

package/dist/collection/components/radio-group/radio-group.js

@@ -10,9 +10,9 @@ export class RadioGroup {
     if (this.value) {
       this.updateOptionsState(this.value, true);
     }
-    if (this.mode === 'option') {
+    if (this.mode === 'option' || this.mode === 'horizontal') {
       for (const option of this.options) {
-        option.mode = 'option';
+        option.mode = this.mode;
       }
     }
   }
@@ -94,9 +94,14 @@ export class RadioGroup {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "'radio' | 'option'",
-        "resolved": "\"option\" | \"radio\"",
-        "references": {}
+        "original": "RadioGroupMode",
+        "resolved": "\"horizontal\" | \"option\" | \"radio\"",
+        "references": {
+          "RadioGroupMode": {
+            "location": "import",
+            "path": "./radio-group-interface"
+          }
+        }
       },
       "required": false,
       "optional": false,

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

@@ -25,14 +25,6 @@
     opacity: 0;
   }
 }
-.mdc-ripple-surface--test-edge-var-bug {
-  --mdc-ripple-surface-test-edge-var: 1px solid #000;
-  visibility: hidden;
-}
-.mdc-ripple-surface--test-edge-var-bug::before {
-  border: var(--mdc-ripple-surface-test-edge-var);
-}
-
 .mdc-ripple-surface {
   --mdc-ripple-fg-size: 0;
   --mdc-ripple-left: 0;
@@ -46,6 +38,7 @@
   outline: none;
   overflow: hidden;
 }
+
 .mdc-ripple-surface::before, .mdc-ripple-surface::after {
   position: absolute;
   border-radius: 50%;
@@ -53,135 +46,128 @@
   pointer-events: none;
   content: "";
 }
+
 .mdc-ripple-surface::before {
   transition: opacity 15ms linear, background-color 15ms linear;
   z-index: 1;
+  /* @alternate */
+  z-index: var(--mdc-ripple-z-index, 1);
+}
+
+.mdc-ripple-surface::after {
+  z-index: 0;
+  /* @alternate */
+  z-index: var(--mdc-ripple-z-index, 0);
 }
+
 .mdc-ripple-surface.mdc-ripple-upgraded::before {
   transform: scale(var(--mdc-ripple-fg-scale, 1));
 }
+
 .mdc-ripple-surface.mdc-ripple-upgraded::after {
   top: 0;
   /* @noflip */
+  /*rtl:ignore*/
   left: 0;
   transform: scale(0);
   transform-origin: center center;
 }
+
 .mdc-ripple-surface.mdc-ripple-upgraded--unbounded::after {
   top: var(--mdc-ripple-top, 0);
   /* @noflip */
+  /*rtl:ignore*/
   left: var(--mdc-ripple-left, 0);
 }
+
 .mdc-ripple-surface.mdc-ripple-upgraded--foreground-activation::after {
   animation: mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards;
 }
+
 .mdc-ripple-surface.mdc-ripple-upgraded--foreground-deactivation::after {
   animation: mdc-ripple-fg-opacity-out 150ms;
   transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
 }
-.mdc-ripple-surface::before, .mdc-ripple-surface::after {
-  background-color: #000;
-}
-.mdc-ripple-surface:hover::before {
-  opacity: 0.04;
-}
-.mdc-ripple-surface:not(.mdc-ripple-upgraded):focus::before, .mdc-ripple-surface.mdc-ripple-upgraded--background-focused::before {
-  transition-duration: 75ms;
-  opacity: 0.12;
-}
-.mdc-ripple-surface:not(.mdc-ripple-upgraded)::after {
-  transition: opacity 150ms linear;
-}
-.mdc-ripple-surface:not(.mdc-ripple-upgraded):active::after {
-  transition-duration: 75ms;
-  opacity: 0.12;
-}
-.mdc-ripple-surface.mdc-ripple-upgraded {
-  --mdc-ripple-fg-opacity: 0.12;
-}
+
 .mdc-ripple-surface::before, .mdc-ripple-surface::after {
   top: calc(50% - 100%);
   /* @noflip */
+  /*rtl:ignore*/
   left: calc(50% - 100%);
   width: 200%;
   height: 200%;
 }
+
 .mdc-ripple-surface.mdc-ripple-upgraded::after {
   width: var(--mdc-ripple-fg-size, 100%);
   height: var(--mdc-ripple-fg-size, 100%);
 }
-.mdc-ripple-surface[data-mdc-ripple-is-unbounded] {
+
+.mdc-ripple-surface[data-mdc-ripple-is-unbounded],
+.mdc-ripple-upgraded--unbounded {
   overflow: visible;
 }
-.mdc-ripple-surface[data-mdc-ripple-is-unbounded]::before, .mdc-ripple-surface[data-mdc-ripple-is-unbounded]::after {
+
+.mdc-ripple-surface[data-mdc-ripple-is-unbounded]::before, .mdc-ripple-surface[data-mdc-ripple-is-unbounded]::after,
+.mdc-ripple-upgraded--unbounded::before,
+.mdc-ripple-upgraded--unbounded::after {
   top: calc(50% - 50%);
   /* @noflip */
+  /*rtl:ignore*/
   left: calc(50% - 50%);
   width: 100%;
   height: 100%;
 }
-.mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::before, .mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::after {
+
+.mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::before, .mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::after,
+.mdc-ripple-upgraded--unbounded.mdc-ripple-upgraded::before,
+.mdc-ripple-upgraded--unbounded.mdc-ripple-upgraded::after {
   top: var(--mdc-ripple-top, calc(50% - 50%));
   /* @noflip */
+  /*rtl:ignore*/
   left: var(--mdc-ripple-left, calc(50% - 50%));
   width: var(--mdc-ripple-fg-size, 100%);
   height: var(--mdc-ripple-fg-size, 100%);
 }
-.mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::after {
+
+.mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::after,
+.mdc-ripple-upgraded--unbounded.mdc-ripple-upgraded::after {
   width: var(--mdc-ripple-fg-size, 100%);
   height: var(--mdc-ripple-fg-size, 100%);
 }
-.mdc-ripple-surface--primary::before, .mdc-ripple-surface--primary::after {
-  background-color: #6200ee;
-}
-@supports not (-ms-ime-align: auto) {
-  .mdc-ripple-surface--primary::before, .mdc-ripple-surface--primary::after {
-    /* @alternate */
-    background-color: var(--mdc-theme-primary, #6200ee);
-  }
-}
-.mdc-ripple-surface--primary:hover::before {
-  opacity: 0.04;
-}
-.mdc-ripple-surface--primary:not(.mdc-ripple-upgraded):focus::before, .mdc-ripple-surface--primary.mdc-ripple-upgraded--background-focused::before {
-  transition-duration: 75ms;
-  opacity: 0.12;
-}
-.mdc-ripple-surface--primary:not(.mdc-ripple-upgraded)::after {
-  transition: opacity 150ms linear;
-}
-.mdc-ripple-surface--primary:not(.mdc-ripple-upgraded):active::after {
-  transition-duration: 75ms;
-  opacity: 0.12;
-}
-.mdc-ripple-surface--primary.mdc-ripple-upgraded {
-  --mdc-ripple-fg-opacity: 0.12;
-}
-.mdc-ripple-surface--accent::before, .mdc-ripple-surface--accent::after {
-  background-color: #018786;
-}
-@supports not (-ms-ime-align: auto) {
-  .mdc-ripple-surface--accent::before, .mdc-ripple-surface--accent::after {
-    /* @alternate */
-    background-color: var(--mdc-theme-secondary, #018786);
-  }
+
+.mdc-ripple-surface::before, .mdc-ripple-surface::after {
+  background-color: #000;
+  /* @alternate */
+  background-color: var(--mdc-ripple-color, #000);
 }
-.mdc-ripple-surface--accent:hover::before {
+
+.mdc-ripple-surface:hover::before, .mdc-ripple-surface.mdc-ripple-surface--hover::before {
   opacity: 0.04;
+  /* @alternate */
+  opacity: var(--mdc-ripple-hover-opacity, 0.04);
 }
-.mdc-ripple-surface--accent:not(.mdc-ripple-upgraded):focus::before, .mdc-ripple-surface--accent.mdc-ripple-upgraded--background-focused::before {
+
+.mdc-ripple-surface.mdc-ripple-upgraded--background-focused::before, .mdc-ripple-surface:not(.mdc-ripple-upgraded):focus::before {
   transition-duration: 75ms;
   opacity: 0.12;
+  /* @alternate */
+  opacity: var(--mdc-ripple-focus-opacity, 0.12);
 }
-.mdc-ripple-surface--accent:not(.mdc-ripple-upgraded)::after {
+
+.mdc-ripple-surface:not(.mdc-ripple-upgraded)::after {
   transition: opacity 150ms linear;
 }
-.mdc-ripple-surface--accent:not(.mdc-ripple-upgraded):active::after {
+
+.mdc-ripple-surface:not(.mdc-ripple-upgraded):active::after {
   transition-duration: 75ms;
   opacity: 0.12;
+  /* @alternate */
+  opacity: var(--mdc-ripple-press-opacity, 0.12);
 }
-.mdc-ripple-surface--accent.mdc-ripple-upgraded {
-  --mdc-ripple-fg-opacity: 0.12;
+
+.mdc-ripple-surface.mdc-ripple-upgraded {
+  --mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.12);
 }
 
 :host {
@@ -292,6 +278,13 @@ label {
 .wcs-select-control::before {
   transition: opacity 15ms linear, background-color 15ms linear;
   z-index: 1;
+  /* @alternate */
+  z-index: var(--mdc-ripple-z-index, 1);
+}
+.wcs-select-control::after {
+  z-index: 0;
+  /* @alternate */
+  z-index: var(--mdc-ripple-z-index, 0);
 }
 .wcs-select-control.mdc-ripple-upgraded::before {
   transform: scale(var(--mdc-ripple-fg-scale, 1));
@@ -299,6 +292,7 @@ label {
 .wcs-select-control.mdc-ripple-upgraded::after {
   top: 0;
   /* @noflip */
+  /*rtl:ignore*/
   left: 0;
   transform: scale(0);
   transform-origin: center center;
@@ -306,6 +300,7 @@ label {
 .wcs-select-control.mdc-ripple-upgraded--unbounded::after {
   top: var(--mdc-ripple-top, 0);
   /* @noflip */
+  /*rtl:ignore*/
   left: var(--mdc-ripple-left, 0);
 }
 .wcs-select-control.mdc-ripple-upgraded--foreground-activation::after {
@@ -318,6 +313,7 @@ label {
 .wcs-select-control::before, .wcs-select-control::after {
   top: calc(50% - 100%);
   /* @noflip */
+  /*rtl:ignore*/
   left: calc(50% - 100%);
   width: 200%;
   height: 200%;
@@ -328,13 +324,19 @@ label {
 }
 .wcs-select-control::before, .wcs-select-control::after {
   background-color: #999;
+  /* @alternate */
+  background-color: var(--mdc-ripple-color, #999);
 }
-.wcs-select-control:hover::before {
+.wcs-select-control:hover::before, .wcs-select-control.mdc-ripple-surface--hover::before {
   opacity: 0.1;
+  /* @alternate */
+  opacity: var(--mdc-ripple-hover-opacity, 0.1);
 }
-.wcs-select-control:not(.mdc-ripple-upgraded):focus::before, .wcs-select-control.mdc-ripple-upgraded--background-focused::before {
+.wcs-select-control.mdc-ripple-upgraded--background-focused::before, .wcs-select-control:not(.mdc-ripple-upgraded):focus::before {
   transition-duration: 75ms;
   opacity: 0.2;
+  /* @alternate */
+  opacity: var(--mdc-ripple-focus-opacity, 0.2);
 }
 .wcs-select-control:not(.mdc-ripple-upgraded)::after {
   transition: opacity 150ms linear;
@@ -342,9 +344,11 @@ label {
 .wcs-select-control:not(.mdc-ripple-upgraded):active::after {
   transition-duration: 75ms;
   opacity: 0.3;
+  /* @alternate */
+  opacity: var(--mdc-ripple-press-opacity, 0.3);
 }
 .wcs-select-control.mdc-ripple-upgraded {
-  --mdc-ripple-fg-opacity: 0.3;
+  --mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, 0.3);
 }
 
 .wcs-select-placeholder {
@@ -364,8 +368,8 @@ label {
   border-radius: 0.75rem;
   display: flex;
   align-items: center;
-  margin: calc(var(--wcs-base-margin)/2);
-  padding: calc(calc(var(--wcs-padding) - 8px) / 2) var(--wcs-padding);
+  margin: calc(var(--wcs-base-margin) / 2);
+  padding: calc((var(--wcs-padding) - 8px) / 2) var(--wcs-padding);
   overflow: initial;
 }
 

package/dist/collection/components/select/select.js

@@ -1,10 +1,10 @@
 import { Component, Element, Event, h, Host, Listen, Method, Prop, State, Watch } from '@stencil/core';
 import _ from 'lodash';
-import * as MDCRipple from '@material/ripple';
 import { interpret, Machine } from 'xstate';
 import { SelectArrow } from './select-arrow';
 import { isElement } from '../../utils/helpers';
 import { SelectChips } from './select-chips';
+import { MDCRipple } from '@material/ripple';
 const SELECT_MACHINE_CONFIG = {
   key: 'select',
   initial: 'closed',
@@ -277,7 +277,7 @@ export class Select {
   }
   addRippleEffect() {
     // TODO: wrap MDCRipple dependency so we can eventually write our own or at least decouple a bit.
-    const ripple = new MDCRipple.MDCRipple(this.controlEl);
+    const ripple = new MDCRipple(this.controlEl);
     ripple.unbounded = false;
   }
   get hasValue() {