genesys-spark-components 4.0.0-beta.25 → 4.0.0-beta.27

package/dist/collection/components/{beta → stable}/gux-tag/gux-tag.js

@@ -7,9 +7,8 @@ import tagResources from './i18n/en.json';
  */
 export class GuxTag {
   constructor() {
-    this.color = 'default';
-    this.accent = 'default';
     this.value = undefined;
+    this.accent = 'default';
     this.disabled = false;
     this.removable = false;
     this.label = undefined;
@@ -43,9 +42,7 @@ export class GuxTag {
   }
   renderRemoveButton() {
     if (this.removable) {
-      return (h("button", { class: "gux-tag-remove-button", onClick: this.removeTag.bind(this), type: "button", disabled: this.disabled }, h("gux-icon", { class: "gux-tag-remove-icon", "icon-name": "close", "screenreader-text": this.i18n('remove-tag', {
-          label: this.label
-        }) })));
+      return (h("button", { class: "gux-tag-remove-button", onClick: this.removeTag.bind(this), type: "button", disabled: this.disabled }, h("gux-icon", { class: "gux-tag-remove-icon", "icon-name": "close", "screenreader-text": this.i18n('remove-tag', { label: this.label }) })));
     }
   }
   componentWillLoad() {
@@ -59,16 +56,15 @@ export class GuxTag {
   render() {
     return (h("div", { class: {
         'gux-tag': true,
-        [`gux-${this.color}`]: true,
         [`gux-accent-${this.accent}`]: true,
         'gux-disabled': this.disabled
       }, "aria-disabled": this.disabled.toString() }, this.renderTagTitle(), this.renderSrText(), this.renderRemoveButton()));
   }
-  static get is() { return "gux-tag-beta"; }
+  static get is() { return "gux-tag"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
-      "$": ["gux-tag.less"]
+      "$": ["gux-tag.scss"]
     };
   }
   static get styleUrls() {
@@ -78,45 +74,45 @@ export class GuxTag {
   }
   static get properties() {
     return {
-      "color": {
+      "value": {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "GuxTagColor",
-          "resolved": "\"default\" | \"default-subtle\" | \"navy\" | \"blue\" | \"electric-purple\" | \"aqua-green\" | \"fuchsia\" | \"dark-purple\" | \"bubblegum-pink\" | \"olive-green\" | \"lilac\" | \"alert-yellow-green\" | \"blue-10\" | \"blue-20\" | \"blue-30\" | \"blue-40\" | \"blue-50\" | \"blue-60\" | \"blue-70\" | \"blue-80\" | \"blue-90\" | \"blue-100\" | \"alert-red-10\" | \"alert-red-20\" | \"alert-red-30\" | \"alert-red-40\" | \"alert-red-50\" | \"alert-red-60\" | \"alert-red-70\" | \"alert-red-80\" | \"alert-red-90\" | \"alert-red-100\" | \"alert-green-10\" | \"alert-green-20\" | \"alert-green-30\" | \"alert-green-40\" | \"alert-green-50\" | \"alert-green-60\" | \"alert-green-70\" | \"alert-green-80\" | \"alert-green-90\" | \"alert-green-100\" | \"alert-yellow-10\" | \"alert-yellow-20\" | \"alert-yellow-30\" | \"alert-yellow-40\" | \"alert-yellow-50\" | \"alert-yellow-60\" | \"alert-yellow-70\" | \"alert-yellow-80\" | \"alert-yellow-90\" | \"alert-yellow-100\" | \"brand-orange\" | \"brand-teal\" | \"brand-navy\" | \"brand-light-blue\" | \"brand-yellow\"",
-          "references": {
-            "GuxTagColor": {
-              "location": "import",
-              "path": "./gux-tag.types"
-            }
-          }
+          "original": "string",
+          "resolved": "string",
+          "references": {}
         },
         "required": false,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Tag background color"
+          "text": "Index for remove tag"
         },
-        "attribute": "color",
-        "reflect": false,
-        "defaultValue": "'default'"
+        "attribute": "value",
+        "reflect": false
       },
-      "value": {
+      "accent": {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
+          "original": "GuxTagAccent",
+          "resolved": "\"1\" | \"10\" | \"2\" | \"3\" | \"4\" | \"5\" | \"6\" | \"7\" | \"8\" | \"9\" | \"default\" | \"inherit\"",
+          "references": {
+            "GuxTagAccent": {
+              "location": "import",
+              "path": "./gux-tag.types"
+            }
+          }
         },
         "required": false,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Index for remove tag"
+          "text": ""
         },
-        "attribute": "value",
-        "reflect": false
+        "attribute": "accent",
+        "reflect": false,
+        "defaultValue": "'default'"
       },
       "disabled": {
         "type": "boolean",
@@ -130,7 +126,7 @@ export class GuxTag {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Tag is removable."
+          "text": ""
         },
         "attribute": "disabled",
         "reflect": false,
@@ -148,7 +144,7 @@ export class GuxTag {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Tag is removable."
+          "text": ""
         },
         "attribute": "removable",
         "reflect": false,
@@ -158,7 +154,6 @@ export class GuxTag {
   }
   static get states() {
     return {
-      "accent": {},
       "label": {}
     };
   }
@@ -171,7 +166,7 @@ export class GuxTag {
         "composed": true,
         "docs": {
           "tags": [],
-          "text": "Triggered when click on remove button"
+          "text": ""
         },
         "complexType": {
           "original": "string",

package/dist/collection/components/stable/gux-time-picker/gux-time-picker.css

@@ -3,47 +3,43 @@
   display: inline-block;
 }
 .gux-time-picker.gux-error .gux-input-time {
-  border-color: #ea0b0b;
+  border-color: var(--gse-ui-formControl-input-error-border-color);
 }
 .gux-time-picker .gux-input-time {
   box-sizing: border-box;
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
-  gap: 8px;
+  gap: var(--gse-ui-formControl-input-gap);
   align-content: stretch;
   align-items: center;
   justify-content: center;
+  white-space: nowrap;
   width: 100%;
-  height: 32px;
-  padding: 4px 8px;
-  font-family: inherit;
-  font-size: 12px;
-  line-height: 1.6667;
-  color: #2e394c;
-  background-color: #f6f7f9;
+  height: var(--gse-ui-formControl-input-textfield-height);
+  padding: var(--gse-ui-formControl-input-padding);
+  font-family: var(--gse-ui-formControl-input-contentText-fontFamily);
+  font-size: var(--gse-ui-formControl-input-contentText-fontSize);
+  line-height: var(--gse-ui-formControl-input-contentText-lineHeight);
+  color: var(--gse-ui-formControl-input-populatedColor);
+  background-color: var(--gse-ui-formControl-input-backgroundColor);
   background-image: none;
-  border: 1px solid #6b7585;
-  border-radius: 4px;
-  box-shadow: inset 0 0 4px rgba(32, 41, 55, 0.16);
+  border: var(--gse-ui-formControl-input-default-border-width) var(--gse-ui-formControl-input-default-border-style) var(--gse-ui-formControl-input-default-border-color);
+  border-radius: var(--gse-ui-formControl-input-borderRadius);
 }
 .gux-time-picker .gux-input-time:focus-within {
-  border-color: #2a60c8;
-  outline: 3px solid #aac9ff;
-  outline-offset: 1px;
-  box-shadow: 0 0 0 1px #fdfdfd;
+  outline: var(--gse-ui-formControl-input-focus-border-width) var(--gse-ui-formControl-input-focus-border-style) var(--gse-ui-formControl-input-focus-border-color);
+  border: var(--gse-ui-formControl-input-active-border-width) var(--gse-ui-formControl-input-active-border-style) var(--gse-ui-formControl-input-active-border-color);
+  border-radius: var(--gse-ui-formControl-focusRing-borderRadius);
 }
 .gux-time-picker .gux-input-time input {
   flex: 1 1 auto;
   align-self: auto;
   order: 0;
-  width: 20px;
+  width: 2ch;
   padding: 0;
-  font-size: 12px;
-  color: #2e394c;
-  text-align: center;
-  text-align: left;
-  background-color: #f6f7f9;
+  font-size: var(--gse-ui-formControl-label-text-fontSize);
+  background-color: var(--gse-ui-formControl-input-backgroundColor);
   border: none;
   outline: none;
 }
@@ -51,34 +47,31 @@
   text-align: right;
 }
 .gux-time-picker .gux-input-time input::placeholder {
-  color: #596373;
+  color: var(--gse-ui-formControl-input-placeholderColor);
   opacity: 1;
 }
 .gux-time-picker .gux-input-time .gux-input-time-am-pm-selector {
   display: grid;
-  grid-template: auto 1fr / auto 1fr auto;
+  grid-template: auto 1fr/auto 1fr auto;
   place-items: flex-end;
   padding: 0;
-  font-size: 12px;
-  font-weight: bold;
-  color: #2e394c;
+  font-family: var(--gse-ui-formControl-input-prefixSufix-text-fontFamily);
+  font-size: var(--gse-ui-formControl-input-prefixSufix-text-fontSize);
+  line-height: var(--gse-ui-formControl-input-prefixSufix-text-lineHeight);
+  font-weight: var(--gse-ui-formControl-input-prefixSufix-text-fontWeight);
+  color: var(--gse-ui-formControl-input-populatedColor);
   background: transparent;
   border: none;
   outline: none;
 }
-.gux-time-picker .gux-input-time .gux-input-time-am-pm-selector:not(:disabled):hover {
-  color: #2a60c8;
-  cursor: pointer;
-}
 .gux-time-picker .gux-input-time .gux-input-time-am-pm-selector:focus-visible {
-  color: #2a60c8;
-  outline: 2px solid #aac9ff;
-  outline-offset: 0;
-  border-radius: 2px;
+  outline: var(--gse-ui-formControl-input-focus-border-width) var(--gse-ui-formControl-input-focus-border-style) var(--gse-ui-formControl-input-focus-border-color);
+  border: var(--gse-ui-formControl-input-active-border-width) var(--gse-ui-formControl-input-active-border-style) var(--gse-ui-formControl-input-active-border-color);
+  border-radius: var(--gse-ui-formControl-focusRing-borderRadius);
 }
 .gux-time-picker .gux-input-time .gux-input-time-am-pm-selector .gux-meridiem {
-  grid-row: 1;
-  grid-column: 1;
+  grid-row: 1/1;
+  grid-column: 1/1;
   visibility: hidden;
 }
 .gux-time-picker .gux-input-time .gux-input-time-am-pm-selector .gux-meridiem.gux-visible {
@@ -92,43 +85,37 @@
   justify-content: center;
   order: 0;
   padding: 0;
-  color: #596373;
+  color: var(--gse-ui-formControl-input-inputIcon-iconEndColor);
   background: transparent;
   border: none;
 }
 .gux-time-picker .gux-input-time .gux-clock-button.gux-active:not(:disabled) {
-  color: #2a60c8;
-  cursor: pointer;
-}
-.gux-time-picker .gux-input-time .gux-clock-button.gux-active:not(:disabled):hover {
-  color: #2a60c8 !important;
-  cursor: pointer;
-}
-.gux-time-picker .gux-input-time .gux-clock-button:not(:disabled):hover {
-  color: #2e394c;
+  color: #4856cb;
   cursor: pointer;
 }
 .gux-time-picker .gux-input-time .gux-clock-button:focus {
-  border: none;
   outline: none;
 }
-.gux-time-picker .gux-input-time .gux-clock-button:focus-visible gux-icon {
-  outline: 2px solid #aac9ff;
-  outline-offset: 0;
-  border-radius: 2px;
+.gux-time-picker .gux-input-time .gux-clock-button:focus-visible {
+  outline: var(--gse-ui-formControl-input-focus-border-width) var(--gse-ui-formControl-input-focus-border-style) var(--gse-ui-formControl-input-focus-border-color);
+  border: var(--gse-ui-formControl-input-active-border-width) var(--gse-ui-formControl-input-active-border-style) var(--gse-ui-formControl-input-active-border-color);
+  border-radius: var(--gse-ui-formControl-focusRing-borderRadius);
 }
 .gux-time-picker .gux-input-time .gux-clock-button gux-icon {
-  width: 16px;
-  height: 16px;
+  width: var(--gse-ui-icon-size-sm);
+  height: var(--gse-ui-icon-size-sm);
+}
+.gux-time-picker .gux-time-separator {
+  padding: 0 1ch;
 }
 .gux-time-picker .gux-list-container {
   max-height: 150px;
-  padding: 8px 0;
+  padding: var(--gse-ui-menu-padding);
   margin: 0;
   overflow-y: scroll;
   list-style: none;
-  background-color: #fdfdfd;
-  border: 1px solid #b4bccb;
-  border-radius: 4px;
-  box-shadow: 0 2px 4px rgba(32, 41, 55, 0.24);
-}
+  border: var(--gse-ui-menu-border-width) var(--gse-ui-menu-border-style) var(--gse-ui-menu-border-color);
+  background-color: var(--gse-ui-menu-backgroundColor);
+  box-shadow: var(--gse-ui-menu-boxShadow-x) var(--gse-ui-menu-boxShadow-y) var(--gse-ui-menu-boxShadow-blur) var(--gse-ui-menu-boxShadow-spread) var(--gse-ui-menu-boxShadow-color);
+  border-radius: var(--gse-ui-menu-borderRadius);
+}

package/dist/collection/components/stable/gux-time-picker/gux-time-picker.js

@@ -219,7 +219,7 @@ export class GuxTimePicker {
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
-      "$": ["gux-time-picker.less"]
+      "$": ["gux-time-picker.scss"]
     };
   }
   static get styleUrls() {

package/dist/collection/components/stable/gux-toggle/gux-toggle-slider/gux-toggle-slider.css

@@ -1,3 +1,36 @@
+.gux-focus-ring-focused:focus {
+  outline: 3px solid #aac9ff;
+  outline-offset: 1px;
+  box-shadow: 0 0 0 1px #fdfdfd;
+}
+
+.gux-focus-ring-focused-within:focus-within {
+  outline: 3px solid #aac9ff;
+  outline-offset: 1px;
+  box-shadow: 0 0 0 1px #fdfdfd;
+}
+
+.gux-focus-ring-focused-visible:focus-visible {
+  outline: 3px solid #aac9ff;
+  outline-offset: 1px;
+  box-shadow: 0 0 0 1px #fdfdfd;
+}
+
+.gux-focus-ring-small-focused:focus {
+  outline: 2px solid #aac9ff;
+  outline-offset: 0;
+}
+
+.gux-focus-ring-small-focused-within:focus-within {
+  outline: 2px solid #aac9ff;
+  outline-offset: 0;
+}
+
+.gux-focus-ring-small-focused-visible:focus-visible {
+  outline: 2px solid #aac9ff;
+  outline-offset: 0;
+}
+
 gux-toggle-slider {
   display: flex;
   align-items: center;
@@ -38,7 +71,7 @@ gux-toggle-slider .gux-toggle-slider .gux-slider .gux-switch {
   left: 1px;
   width: 14px;
   height: 14px;
-  content: '';
+  content: "";
   background-color: #fdfdfd;
   border-radius: 50%;
   transition: 0.5s;
@@ -64,4 +97,4 @@ gux-toggle-slider .gux-toggle-slider.gux-checked .gux-slider .gux-switch gux-ico
   opacity: 1;
   transition: opacity 0.25s linear;
   transition-delay: 0.25s;
-}
+}

package/dist/collection/components/stable/gux-toggle/gux-toggle-slider/gux-toggle-slider.js

@@ -29,7 +29,7 @@ export class GuxToggleSlider {
   static get is() { return "gux-toggle-slider"; }
   static get originalStyleUrls() {
     return {
-      "$": ["gux-toggle-slider.less"]
+      "$": ["gux-toggle-slider.scss"]
     };
   }
   static get styleUrls() {

package/dist/collection/components/stable/gux-toggle/gux-toggle.css

@@ -4,9 +4,11 @@
   color: #2e394c;
   outline: none;
 }
+
 :host(.gux-display-inline) {
   display: inline-block;
 }
+
 .gux-toggle-container {
   cursor: pointer;
 }
@@ -41,7 +43,7 @@
 }
 .gux-toggle-container .gux-toggle-input .gux-toggle-label .gux-toggle-label-text {
   display: grid;
-  grid-template-areas: 'inner-div';
+  grid-template-areas: "inner-div";
   place-items: start;
 }
 .gux-toggle-container .gux-toggle-input .gux-toggle-label .gux-toggle-label-text .gux-toggle-label-text-inner {
@@ -84,4 +86,4 @@
   flex: 0 1 auto;
   align-self: auto;
   order: 0;
-}
+}

package/dist/collection/components/stable/gux-toggle/gux-toggle.js

@@ -81,7 +81,7 @@ export class GuxToggle {
   static get delegatesFocus() { return true; }
   static get originalStyleUrls() {
     return {
-      "$": ["gux-toggle.less"]
+      "$": ["gux-toggle.scss"]
     };
   }
   static get styleUrls() {