genesys-spark-components 4.0.0-beta.3 → 4.0.0-beta.30

package/dist/collection/components/stable/gux-dropdown-multi/gux-dropdown-multi.css

@@ -0,0 +1,209 @@
+.gux-focus-ring-focused:focus {
+  outline-width: var(--gse-semantic-focusRing-default-border-width);
+  outline-style: var(--gse-semantic-focusRing-default-border-style);
+  outline-color: var(--gse-semantic-focusRing-default-border-color);
+  outline-offset: var(--gse-semantic-focusRing-offset);
+}
+
+.gux-focus-ring-focused-within:focus-within {
+  outline-width: var(--gse-semantic-focusRing-default-border-width);
+  outline-style: var(--gse-semantic-focusRing-default-border-style);
+  outline-color: var(--gse-semantic-focusRing-default-border-color);
+  outline-offset: var(--gse-semantic-focusRing-offset);
+}
+
+.gux-focus-ring-focused-visible:focus-visible {
+  outline-width: var(--gse-semantic-focusRing-default-border-width);
+  outline-style: var(--gse-semantic-focusRing-default-border-style);
+  outline-color: var(--gse-semantic-focusRing-default-border-color);
+  outline-offset: var(--gse-semantic-focusRing-offset);
+}
+
+.gux-focus-ring-small-focused:focus {
+  outline-width: var(--gse-semantic-focusRing-small-border-width);
+  outline-style: var(--gse-semantic-focusRing-small-border-style);
+  outline-color: var(--gse-semantic-focusRing-small-border-color);
+}
+
+.gux-focus-ring-small-focused-within:focus-within {
+  outline-width: var(--gse-semantic-focusRing-small-border-width);
+  outline-style: var(--gse-semantic-focusRing-small-border-style);
+  outline-color: var(--gse-semantic-focusRing-small-border-color);
+}
+
+.gux-focus-ring-small-focused-visible:focus-visible {
+  outline-width: var(--gse-semantic-focusRing-small-border-width);
+  outline-style: var(--gse-semantic-focusRing-small-border-style);
+  outline-color: var(--gse-semantic-focusRing-small-border-color);
+}
+
+:host {
+  color: var(--gse-ui-formControl-input-populatedColor);
+  box-sizing: border-box;
+}
+
+.gux-dropdown-container {
+  position: relative;
+}
+
+.gux-error.gux-target-container-collapsed .gux-field-button, .gux-error.gux-target-container-expanded {
+  border: var(--gse-ui-formControl-input-error-border-width) var(--gse-ui-formControl-input-error-border-style) var(--gse-ui-formControl-input-error-border-color);
+}
+
+.gux-disabled.gux-target-container-collapsed .gux-field-button, .gux-disabled.gux-target-container-expanded {
+  border: var(--gse-ui-formControl-input-disabled-border-width) var(--gse-ui-formControl-input-disabled-border-style) var(--gse-ui-formControl-input-disabled-border-color);
+}
+
+.gux-field,
+.gux-target-container-expanded {
+  all: unset;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-content: stretch;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: var(--gse-ui-formControl-input-textfield-height);
+  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);
+  font-weight: var(--gse-ui-formControl-input-contentText-fontWeight);
+  cursor: pointer;
+  background-color: var(--gse-ui-formControl-input-backgroundColor);
+}
+
+.gux-target-container-expanded,
+.gux-target-container-collapsed .gux-field {
+  padding: var(--gse-ui-formControl-input-padding);
+}
+
+.gux-target-container-collapsed .gux-field-button:hover,
+.gux-target-container-expanded:hover {
+  border: var(--gse-ui-formControl-input-hover-border-width) var(--gse-ui-formControl-input-hover-border-style) var(--gse-ui-formControl-input-hover-border-color);
+}
+
+.gux-field.gux-input-field {
+  height: calc(var(--gse-ui-formControl-input-textfield-height) - var(--gse-ui-formControl-input-default-border-width) * 2);
+}
+.gux-field .gux-field-content {
+  position: relative;
+  display: flex;
+  flex: 1 1 0;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-content: stretch;
+  align-items: flex-start;
+  justify-content: flex-start;
+  min-width: 0;
+  height: 60%;
+}
+.gux-field .gux-field-content .gux-filter,
+.gux-field .gux-field-content .gux-selected-option,
+.gux-field .gux-field-content .gux-placeholder {
+  flex: 1 1 auto;
+  align-self: auto;
+  order: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.gux-field .gux-field-content .gux-filter .gux-sr-only:not(:focus):not(:active),
+.gux-field .gux-field-content .gux-selected-option .gux-sr-only:not(:focus):not(:active),
+.gux-field .gux-field-content .gux-placeholder .gux-sr-only:not(:focus):not(:active) {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+.gux-field .gux-field-content .gux-filter {
+  position: relative;
+  height: 100%;
+  padding-left: 0;
+}
+.gux-field .gux-field-content .gux-filter .gux-filter-input {
+  all: unset;
+  width: 100%;
+  color: transparent;
+  caret-color: var(--gse-ui-formControl-input-populatedColor);
+}
+.gux-field .gux-field-content .gux-filter .gux-filter-display {
+  white-space: pre;
+}
+.gux-field .gux-field-content .gux-filter .gux-filter-display .gux-filter-text {
+  color: var(--gse-ui-formControl-input-populatedColor);
+}
+.gux-field .gux-field-content .gux-filter .gux-filter-display .gux-filter-suggestion {
+  opacity: 50%;
+}
+.gux-field .gux-field-content .gux-filter .gux-filter-input,
+.gux-field .gux-field-content .gux-filter .gux-filter-display {
+  position: absolute;
+}
+.gux-field .gux-field-content .gux-placeholder {
+  color: var(--gse-ui-formControl-input-placeholderColor);
+}
+.gux-field .gux-expand-icon {
+  flex: 0 0 auto;
+  align-self: auto;
+  order: 0;
+  width: var(--gse-ui-formControl-input-inputIcon-size);
+  height: var(--gse-ui-formControl-input-inputIcon-size);
+  padding-left: var(--gse-ui-dropdown-gap);
+  color: var(--gse-ui-formControl-input-inputIcon-iconEndColor);
+}
+
+.gux-target-container-expanded {
+  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-input-borderRadius);
+}
+.gux-target-container-expanded:focus-visible, .gux-target-container-expanded:focus-within {
+  outline-width: var(--gse-semantic-focusRing-default-border-width);
+  outline-style: var(--gse-semantic-focusRing-default-border-style);
+  outline-color: var(--gse-semantic-focusRing-default-border-color);
+  outline-offset: var(--gse-semantic-focusRing-offset);
+}
+.gux-target-container-expanded .gux-filter-input {
+  background-color: inherit;
+  border: none;
+}
+.gux-target-container-expanded .gux-filter-input:focus {
+  border: none;
+  outline: none;
+}
+.gux-target-container-expanded .gux-field-button {
+  width: auto;
+  height: calc(var(--gse-ui-formControl-input-textfield-height) - var(--gse-ui-formControl-input-default-border-width) * 2);
+  margin: 0;
+  background: inherit;
+  border: none;
+  outline: none;
+  box-shadow: none;
+}
+.gux-target-container-expanded .gux-field-button:focus {
+  outline: none;
+}
+
+.gux-target-container-collapsed .gux-field-button {
+  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-target-container-collapsed .gux-field-button:focus-visible, .gux-target-container-collapsed .gux-field-button:focus-within {
+  outline-width: var(--gse-semantic-focusRing-default-border-width);
+  outline-style: var(--gse-semantic-focusRing-default-border-style);
+  outline-color: var(--gse-semantic-focusRing-default-border-color);
+  outline-offset: var(--gse-semantic-focusRing-offset);
+}
+
+.gux-listbox-container {
+  box-sizing: border-box;
+  margin: 0;
+}
+
+gux-popup::part(gux-popup-container) {
+  width: inherit;
+}

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

@@ -9,14 +9,14 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { forceUpdate, h } from '@stencil/core';
-import { OnClickOutside } from '../../../utils/decorator/on-click-outside';
+import { OnClickOutside } from '@utils/decorator/on-click-outside';
 import { buildI18nForComponent } from '../../../i18n';
-import simulateNativeEvent from '../../../utils/dom/simulate-native-event';
-import { afterNextRender } from '../../../utils/dom/after-next-render';
-import { onInputDisabledStateChange } from '../../../utils/dom/on-input-disabled-state-change';
+import simulateNativeEvent from '@utils/dom/simulate-native-event';
+import { afterNextRender } from '@utils/dom/after-next-render';
+import { onInputDisabledStateChange } from '@utils/dom/on-input-disabled-state-change';
 import { trackComponent } from '@utils/tracking/usage';
 import translationResources from './i18n/en.json';
-import { getSearchOption } from '../../stable/gux-listbox/gux-listbox.service';
+import { getSearchOption } from '../gux-listbox/gux-listbox.service';
 import { OnMutation } from '@utils/decorator/on-mutation';
 /**
  * @slot - for a gux-listbox-multi containing gux-option-multi children
@@ -28,7 +28,6 @@ export class GuxDropdownMulti {
     this.required = false;
     this.loading = false;
     this.placeholder = undefined;
-    this.filterable = false;
     this.filterType = 'none';
     this.hasError = false;
     this.hasCreate = false;
@@ -215,9 +214,7 @@ export class GuxDropdownMulti {
     });
   }
   isFilterable() {
-    return (this.filterable ||
-      this.filterType === 'custom' ||
-      this.filterType === 'starts-with');
+    return this.filterType === 'custom' || this.filterType === 'starts-with';
   }
   stopPropagationOfInternalFocusEvents(event) {
     if (this.root.contains(event.relatedTarget)) {
@@ -349,7 +346,8 @@ export class GuxDropdownMulti {
         'gux-target-container': true,
         'gux-target-container-expanded': this.expanded && this.hasTextInput(),
         'gux-target-container-collapsed': !(this.expanded && this.hasTextInput()),
-        'gux-error': this.hasError
+        'gux-error': this.hasError,
+        'gux-disabled': this.disabled
       }, slot: "target" }, this.renderFilterInputField(), h("button", { type: "button", class: "gux-field gux-field-button", disabled: this.disabled, onClick: this.fieldButtonClick.bind(this), ref: el => (this.fieldButtonElement = el), "aria-haspopup": "listbox", "aria-expanded": this.expanded.toString() }, this.renderTargetContent(), this.renderTag(), this.renderRadialLoading(), h("gux-icon", { class: {
         'gux-expand-icon': true
       }, "screenreader-text": this.i18n('dropdown'), iconName: "chevron-small-down" }))));
@@ -369,12 +367,12 @@ export class GuxDropdownMulti {
       h("div", { class: "gux-dropdown-container" }, h("gux-popup", { expanded: this.expanded && (!this.loading || this.isFilterable()), disabled: this.disabled }, this.renderTarget(), this.renderPopup()))
     ];
   }
-  static get is() { return "gux-dropdown-multi-beta"; }
+  static get is() { return "gux-dropdown-multi"; }
   static get encapsulation() { return "shadow"; }
   static get delegatesFocus() { return true; }
   static get originalStyleUrls() {
     return {
-      "$": ["gux-dropdown-multi.less"]
+      "$": ["gux-dropdown-multi.scss"]
     };
   }
   static get styleUrls() {
@@ -472,24 +470,6 @@ export class GuxDropdownMulti {
         "attribute": "placeholder",
         "reflect": false
       },
-      "filterable": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "deprecated will be removed in v4 (COMUI-1369). Use filterType instead"
-        },
-        "attribute": "filterable",
-        "reflect": false,
-        "defaultValue": "false"
-      },
       "filterType": {
         "type": "string",
         "mutable": false,
@@ -499,7 +479,7 @@ export class GuxDropdownMulti {
           "references": {
             "GuxFilterTypes": {
               "location": "import",
-              "path": "../../stable/gux-dropdown/gux-dropdown.types"
+              "path": "../gux-dropdown/gux-dropdown.types"
             }
           }
         },

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-color/gux-form-field-color.css

@@ -1,10 +1,101 @@
-.gux-form-field-container {
-  margin: var(--gux-form-field-container-margin-top, 16px) 0 var(--gux-form-field-container-margin-bottom, 16px) 0;
-}
+.gux-focus-ring-focused:focus {
+  outline-width: var(--gse-semantic-focusRing-default-border-width);
+  outline-style: var(--gse-semantic-focusRing-default-border-style);
+  outline-color: var(--gse-semantic-focusRing-default-border-color);
+  outline-offset: var(--gse-semantic-focusRing-offset);
+}
+
+.gux-focus-ring-focused-within:focus-within {
+  outline-width: var(--gse-semantic-focusRing-default-border-width);
+  outline-style: var(--gse-semantic-focusRing-default-border-style);
+  outline-color: var(--gse-semantic-focusRing-default-border-color);
+  outline-offset: var(--gse-semantic-focusRing-offset);
+}
+
+.gux-focus-ring-focused-visible:focus-visible {
+  outline-width: var(--gse-semantic-focusRing-default-border-width);
+  outline-style: var(--gse-semantic-focusRing-default-border-style);
+  outline-color: var(--gse-semantic-focusRing-default-border-color);
+  outline-offset: var(--gse-semantic-focusRing-offset);
+}
+
+.gux-focus-ring-small-focused:focus {
+  outline-width: var(--gse-semantic-focusRing-small-border-width);
+  outline-style: var(--gse-semantic-focusRing-small-border-style);
+  outline-color: var(--gse-semantic-focusRing-small-border-color);
+}
+
+.gux-focus-ring-small-focused-within:focus-within {
+  outline-width: var(--gse-semantic-focusRing-small-border-width);
+  outline-style: var(--gse-semantic-focusRing-small-border-style);
+  outline-color: var(--gse-semantic-focusRing-small-border-color);
+}
+
+.gux-focus-ring-small-focused-visible:focus-visible {
+  outline-width: var(--gse-semantic-focusRing-small-border-width);
+  outline-style: var(--gse-semantic-focusRing-small-border-style);
+  outline-color: var(--gse-semantic-focusRing-small-border-color);
+}
+
+.gux-focus-ring-focused:focus {
+  outline-width: var(--gse-semantic-focusRing-default-border-width);
+  outline-style: var(--gse-semantic-focusRing-default-border-style);
+  outline-color: var(--gse-semantic-focusRing-default-border-color);
+  outline-offset: var(--gse-semantic-focusRing-offset);
+}
+
+.gux-focus-ring-focused-within:focus-within {
+  outline-width: var(--gse-semantic-focusRing-default-border-width);
+  outline-style: var(--gse-semantic-focusRing-default-border-style);
+  outline-color: var(--gse-semantic-focusRing-default-border-color);
+  outline-offset: var(--gse-semantic-focusRing-offset);
+}
+
+.gux-focus-ring-focused-visible:focus-visible {
+  outline-width: var(--gse-semantic-focusRing-default-border-width);
+  outline-style: var(--gse-semantic-focusRing-default-border-style);
+  outline-color: var(--gse-semantic-focusRing-default-border-color);
+  outline-offset: var(--gse-semantic-focusRing-offset);
+}
+
+.gux-focus-ring-small-focused:focus {
+  outline-width: var(--gse-semantic-focusRing-small-border-width);
+  outline-style: var(--gse-semantic-focusRing-small-border-style);
+  outline-color: var(--gse-semantic-focusRing-small-border-color);
+}
+
+.gux-focus-ring-small-focused-within:focus-within {
+  outline-width: var(--gse-semantic-focusRing-small-border-width);
+  outline-style: var(--gse-semantic-focusRing-small-border-style);
+  outline-color: var(--gse-semantic-focusRing-small-border-color);
+}
+
+.gux-focus-ring-small-focused-visible:focus-visible {
+  outline-width: var(--gse-semantic-focusRing-small-border-width);
+  outline-style: var(--gse-semantic-focusRing-small-border-style);
+  outline-color: var(--gse-semantic-focusRing-small-border-color);
+}
+
+/*
+ * Typography styles and mixins.
+ */
+/* Helpers */
+/* Base typography */
+/* Headings */
+/* Anchor */
+.gux-icon-anchor gux-icon {
+  padding-right: var(--gse-ui-links-inLine-padding);
+}
+
+/* Custom Styles */
+/* stylelint-disable-next-line selector-class-pattern */ /* stylelint-disable-next-line selector-class-pattern */
+/* stylelint-disable-next-line selector-class-pattern */
+/* stylelint-disable-next-line selector-class-pattern */
 .gux-form-field-container.gux-beside {
   display: flex;
   flex-direction: row;
 }
+
 .gux-form-field-error {
   display: none;
   flex-direction: row;
@@ -12,10 +103,11 @@
   align-content: stretch;
   align-items: flex-start;
   justify-content: flex-start;
-  margin: 4px 0;
-  font-size: 12px;
-  line-height: 20px;
-  color: #2e394c;
+  padding: var(--gse-ui-formControl-helper-errorPadding);
+  font-family: var(--gse-ui-formControl-helper-helperText-fontFamily);
+  font-size: var(--gse-ui-formControl-helper-helperText-fontSize);
+  line-height: var(--gse-ui-formControl-helper-helperText-lineHeight);
+  color: var(--gse-ui-formControl-helper-errorColor);
 }
 .gux-form-field-error.gux-show {
   display: flex;
@@ -24,30 +116,30 @@
   flex: 0 1 auto;
   align-self: auto;
   order: 0;
-  min-width: 16px;
-  min-height: 16px;
-  margin: 2px 4px 0 0;
-  color: #ea0b0b;
+  min-width: var(--gse-ui-icon-size-sm);
+  min-height: var(--gse-ui-icon-size-sm);
+  margin-right: var(--gse-ui-formControl-helper-gap);
+  color: var(--gse-ui-formControl-helper-errorColor);
 }
 .gux-form-field-error .gux-message {
   flex: 0 1 auto;
   align-self: auto;
   order: 0;
 }
+
 .gux-form-field-label.gux-required::after {
-  font-size: 12px;
-  color: #ea0b0b;
-  content: ' *';
+  color: var(--gse-ui-formControl-label-indicator-requiredColor);
+  content: " *";
 }
 .gux-form-field-label.gux-beside {
   position: relative;
   top: 8px;
   width: fit-content;
   min-width: 45px;
-  margin-right: 8px;
+  margin-right: var(--gse-ui-formControl-label-gap);
 }
 .gux-form-field-label.gux-above {
-  margin-bottom: 8px;
+  padding: var(--gse-ui-formControl-label-padding);
 }
 .gux-form-field-label.gux-screenreader {
   position: absolute;
@@ -57,6 +149,7 @@
   height: 1px;
   overflow: hidden;
 }
+
 .gux-form-field-help {
   display: none;
   flex-direction: row;
@@ -64,11 +157,11 @@
   align-content: stretch;
   align-items: flex-start;
   justify-content: flex-start;
-  margin: 4px 0;
-  font-size: 12px;
-  font-weight: 400;
-  line-height: 20px;
-  color: #6b7585;
+  padding: var(--gse-ui-formControl-helper-padding);
+  font-family: var(--gse-ui-formControl-helper-helperText-fontFamily);
+  font-size: var(--gse-ui-formControl-helper-helperText-fontSize);
+  line-height: var(--gse-ui-formControl-helper-helperText-lineHeight);
+  color: var(--gse-ui-formControl-helper-defaultColor);
 }
 .gux-form-field-help.gux-show {
   display: flex;
@@ -78,37 +171,40 @@
   align-self: none;
   order: 0;
 }
+
 :host {
   display: block;
-  color: #2e394c;
 }
+
 ::slotted(label) {
-  font-family: Roboto, sans-serif;
-  font-weight: 400;
-  font-weight: 700;
-  font-size: 12px;
-  line-height: 16px;
+  font-family: var(--gse-ui-formControl-label-text-fontFamily);
+  line-height: var(--gse-ui-formControl-label-text-lineHeight);
+  font-size: var(--gse-ui-formControl-label-text-fontSize);
+  color: var(--gse-ui-formControl-label-labelColor);
+  font-weight: var(--gse-ui-formControl-label-text-fontWeight);
 }
+
 ::slotted(input) {
   flex: 1 1 auto;
   align-self: auto;
   order: 0;
   width: 32px;
-  height: 32px;
+  height: var(--gse-ui-formControl-input-textfield-height);
   overflow: hidden;
-  font-size: 12px;
-  color: #2e394c;
+  font-size: var(--gse-ui-formControl-input-contentText-fontSize);
+  color: var(--gse-ui-formControl-input-populatedColor);
   text-align: right;
   text-overflow: ellipsis;
-  background-color: #f6f7f9;
+  background-color: var(--gse-ui-formControl-input-backgroundColor);
   border: none;
-  border-radius: 4px;
+  border-radius: var(--gse-ui-formControl-input-borderRadius);
   outline: none;
 }
 ::slotted(input)::placeholder {
-  color: #596373;
+  color: var(--gse-ui-formControl-input-placeholderColor);
   opacity: 1;
 }
+
 .gux-input-and-error-container {
   flex-grow: 1;
 }
@@ -128,25 +224,25 @@
   align-items: center;
   align-self: auto;
   justify-content: center;
+  gap: var(--gse-ui-formControl-input-gap);
   order: 0;
-  height: 32px;
-  font-family: inherit;
-  font-size: 12px;
-  line-height: 1.6667;
-  color: #2e394c;
-  background-color: #f6f7f9;
+  height: var(--gse-ui-formControl-input-textfield-height);
+  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-radius: 4px;
+  border-radius: var(--gse-ui-formControl-input-borderRadius);
 }
 .gux-input-and-error-container .gux-input .gux-input-container.gux-disabled {
-  opacity: 0.5;
+  opacity: var(--gse-ui-formControl-input-disabled-opacity);
 }
 .gux-input-and-error-container .gux-input .gux-input-container: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-input-and-error-container .gux-input .gux-input-container.gux-input-error .gux-input-container {
-  border-color: #ea0b0b;
-}
+  border-color: var(--gse-ui-formControl-input-error-border-color);
+}

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-color/gux-form-field-color.js

@@ -85,7 +85,7 @@ export class GuxFormFieldColor {
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
-      "$": ["gux-form-field-color.less"]
+      "$": ["gux-form-field-color.scss"]
     };
   }
   static get styleUrls() {

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-dropdown/gux-form-field-dropdown.css

@@ -87,7 +87,7 @@
   color: #2e394c;
 }
 ::slotted(label) {
-  font-family: Roboto, sans-serif;
+  font-family: sans-serif;
   font-weight: 400;
   font-weight: 700;
   font-size: 12px;

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-dropdown/gux-form-field-dropdown.js

@@ -37,7 +37,7 @@ export class GuxFormFieldDropdown {
   }
   watchValue(hasError) {
     const dropdownSlot = this.root.querySelector('gux-dropdown') ||
-      this.root.querySelector('gux-dropdown-multi-beta');
+      this.root.querySelector('gux-dropdown-multi');
     if (dropdownSlot) {
       dropdownSlot.hasError = hasError;
     }
@@ -84,7 +84,7 @@ export class GuxFormFieldDropdown {
   setInput() {
     this.dropdownElement =
       this.root.querySelector('gux-dropdown') ||
-        this.root.querySelector('gux-dropdown-multi-beta');
+        this.root.querySelector('gux-dropdown-multi');
     this.listboxElement =
       this.root.querySelector('gux-listbox') ||
         this.root.querySelector('gux-listbox-multi');