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

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

@@ -89,13 +89,13 @@ export class GuxColumnManager {
     return (h("div", null, h("span", { "aria-hidden": "true" }, this.i18n('selectedColumnCount', { count, total })), h("span", { class: "gux-sr-only" }, count === total ? (h("span", null, ": ", this.i18n('unselectAllColumnsScreenReader', { count, total }))) : (h("span", null, ": ", this.i18n('selectAllColumnsScreenReader', { count, total }))))));
   }
   render() {
-    return (h("div", { class: "gux-container" }, h("div", { class: "gux-search" }, h("gux-content-search", { "match-count": this.highlightResults.matchCount, "current-match": this.highlightResults.currentMatch, onGuxcurrentmatchchanged: event => this.onGuxCurrentMatchChanged(event) }, h("input", { type: "text", placeholder: this.i18n('search'), onInput: () => this.onSearchInput(), ref: el => (this.searchElement = el) }))), h("div", { class: "gux-select" }, h("gux-form-field-checkbox", null, h("input", { slot: "input", type: "checkbox", ref: el => (this.mainCheckboxElement = el), onChange: () => this.onMainCheckboxChange() }), h("label", { slot: "label" }, this.renderSelectedColumnCount()))), h("div", { class: "gux-list", onChange: () => this.onListChange() }, h("slot", { onSlotchange: () => this.onSlotChange() })), h("gux-announce-beta", { ref: el => (this.announceElement = el) })));
+    return (h("div", { class: "gux-container" }, h("div", { class: "gux-sr-only", "aria-live": "polite" }, `${this.highlightResults.matchCount} ${this.i18n('searchResults')}`), h("div", { class: "gux-search" }, h("gux-content-search", { "match-count": this.highlightResults.matchCount, "current-match": this.highlightResults.currentMatch, onGuxcurrentmatchchanged: event => this.onGuxCurrentMatchChanged(event) }, h("input", { type: "search", placeholder: this.i18n('search'), onInput: () => this.onSearchInput(), ref: el => (this.searchElement = el) }))), h("div", { class: "gux-select" }, h("gux-form-field-checkbox", null, h("input", { slot: "input", type: "checkbox", ref: el => (this.mainCheckboxElement = el), onChange: () => this.onMainCheckboxChange() }), h("label", { slot: "label" }, this.renderSelectedColumnCount()))), h("div", { class: "gux-list", onChange: () => this.onListChange() }, h("slot", { onSlotchange: () => this.onSlotChange() })), h("gux-announce-beta", { ref: el => (this.announceElement = el) })));
   }
-  static get is() { return "gux-column-manager-beta"; }
+  static get is() { return "gux-column-manager"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
-      "$": ["gux-column-manager.less"]
+      "$": ["gux-column-manager.scss"]
     };
   }
   static get styleUrls() {

package/dist/collection/components/stable/gux-content-search/gux-content-search.css

@@ -48,7 +48,7 @@
   flex-direction: row;
   width: 100%;
   height: 32px;
-  padding: 4px 0 4px 0;
+  padding: 4px 0;
   margin: 4px 0;
   background-color: #f6f7f9;
   background-image: none;
@@ -94,6 +94,10 @@
   padding: 0;
   line-height: 1.6667;
 }
+.gux-content-search .gux-content-control-panel gux-icon {
+  width: 16px;
+  height: 16px;
+}
 .gux-content-search .gux-content-control-panel button {
   display: block;
   align-items: center;
@@ -114,16 +118,12 @@
 .gux-content-search .gux-content-control-panel button:not(:disabled):focus-visible {
   color: #2e394c;
 }
-.gux-content-search .gux-content-control-panel button:focus-visible:enabled {
+.gux-content-search .gux-content-control-panel button:not(.gux-clear-button):focus-visible:enabled {
   outline: 3px solid #aac9ff;
   outline-offset: 1px;
   box-shadow: 0 0 0 1px #fdfdfd;
 }
-.gux-content-search .gux-content-control-panel button gux-icon {
-  width: 16px;
-  height: 16px;
-}
-.gux-content-search .gux-content-control-panel .gux-clear-button {
+.gux-content-search .gux-content-control-panel button.gux-clear-button {
   flex-shrink: 0;
   align-items: center;
   padding-right: 0;
@@ -131,6 +131,10 @@
   margin-right: 8px;
   margin-left: 8px;
 }
+.gux-content-search .gux-content-control-panel button.gux-clear-button gux-icon {
+  width: 16px;
+  height: 16px;
+}
 .gux-content-search .gux-content-control-panel .gux-navigation-disabled {
   pointer-events: auto;
   cursor: default;

package/dist/collection/components/stable/gux-content-search/gux-content-search.js

@@ -26,6 +26,7 @@ export class GuxContentSearch {
     this.value = '';
     this.resetInputSlottedElement();
     this.emitCurrentMatchChanged();
+    this.inputSlottedElement.focus();
   }
   async componentWillLoad() {
     trackComponent(this.root);
@@ -55,10 +56,10 @@ export class GuxContentSearch {
       return (h("div", { class: "gux-content-control-panel" }, h("div", { class: {
           'gux-navigation-panel': true,
           'gux-navigation-disabled': disableNavigationPanel
-        }, title: this.matchCountResult() }, h("span", { class: {
+        } }, h("span", { class: {
           'gux-navigation-result': true,
           'gux-navigation-result-disabled': disableNavigationPanel
-        }, "aria-label": this.matchCountResult() }, this.matchCountResult()), h("button", { type: "button", class: "gux-previous-button", title: this.i18n('navigatePreviousBtn'), "aria-label": this.i18n('navigatePreviousBtn'), onClick: () => this.previousClick(), disabled: disableNavigationPanel }, h("gux-icon", { decorative: true, "icon-name": "arrow-solid-up" })), h("button", { type: "button", class: "gux-next-button", title: this.i18n('navigateNextBtn'), "aria-label": this.i18n('navigateNextBtn'), onClick: () => this.nextClick(), disabled: disableNavigationPanel }, h("gux-icon", { decorative: true, "icon-name": "arrow-solid-down" }))), h("button", { type: "button", class: "gux-clear-button", title: this.i18n('eraseBtnAria'), "aria-label": this.i18n('eraseBtnAria'), onClick: () => void this.clear(), disabled: this.disabled }, h("gux-icon", { decorative: true, "icon-name": "close" }))));
+        } }, this.matchCountResult()), h("button", { type: "button", class: "gux-previous-button", title: this.i18n('navigatePreviousBtn'), "aria-label": this.i18n('navigatePreviousBtn'), onClick: () => this.previousClick(), disabled: disableNavigationPanel }, h("gux-icon", { decorative: true, "icon-name": "arrow-solid-up" })), h("button", { type: "button", class: "gux-next-button", title: this.i18n('navigateNextBtn'), "aria-label": this.i18n('navigateNextBtn'), onClick: () => this.nextClick(), disabled: disableNavigationPanel }, h("gux-icon", { decorative: true, "icon-name": "arrow-solid-down" }))), h("button", { class: "gux-clear-button", tabIndex: -1, type: "button", title: this.i18n('clear'), onClick: () => void this.clear() }, h("gux-icon", { "icon-name": "close", decorative: true }))));
     }
     return null;
   }

package/dist/collection/components/stable/gux-context-menu/gux-context-menu.css

@@ -0,0 +1,48 @@
+:host {
+  display: block;
+  max-width: fit-content;
+}
+
+gux-icon {
+  width: var(--gse-ui-icon-size-sm);
+  height: var(--gse-ui-icon-size-sm);
+  color: var(--gse-ui-contextMenu-states-default-foregroundColor);
+}
+
+button {
+  border-radius: var(--gse-ui-contextMenu-borderRadius);
+  height: var(--gse-ui-contextMenu-button-default);
+  padding: 0 8px;
+}
+
+button:hover:enabled {
+  background-color: var(--gse-ui-contextMenu-states-hover-backgroundColor);
+}
+button:hover:enabled gux-icon {
+  color: var(--gse-ui-contextMenu-states-hover-foregroundColor);
+}
+
+button:active:enabled {
+  background-color: var(--gse-ui-contextMenu-states-active-backgroundColor);
+}
+button:active:enabled gux-icon {
+  color: var(--gse-ui-contextMenu-states-active-foregroundColor);
+}
+
+button[disabled] {
+  opacity: var(--gse-ui-contextMenu-disabled-opacity);
+}
+
+.gux-list-container {
+  width: 220px;
+  max-height: 330px;
+  overflow-y: auto;
+  padding: var(--gse-ui-menu-padding);
+  margin: 0;
+  text-align: left;
+  list-style: none;
+  background-color: var(--gse-ui-menu-backgroundColor);
+  border: var(--gse-ui-menu-border-width) var(--gse-ui-menu-border-style) var(--gse-ui-menu-border-color);
+  border-radius: var(--gse-ui-menu-borderRadius);
+  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);
+}

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

@@ -20,6 +20,7 @@ export class GuxContextMenu {
   constructor() {
     this.buttonId = randomHTMLId();
     this.screenreaderText = '';
+    this.disabled = false;
     this.isOpen = false;
   }
   /**
@@ -105,15 +106,15 @@ export class GuxContextMenu {
     this.i18n = await buildI18nForComponent(this.root, translationResources);
   }
   render() {
-    return (h(Host, null, h("gux-popup", { expanded: this.isOpen }, h("div", { slot: "target", class: "gux-button-container" }, h("gux-button-slot-beta", { accent: "ghost" }, h("button", { type: "button", onClick: () => this.onButtonClick(), id: this.buttonId, ref: el => (this.button = el), "aria-haspopup": "true", "aria-expanded": this.isOpen.toString() }, h("gux-icon", { "icon-name": "menu-kebab-vertical", "screenreader-text": this.screenreaderText ||
+    return (h(Host, null, h("gux-popup", { expanded: this.isOpen }, h("div", { slot: "target", class: "gux-button-container" }, h("gux-button-slot", { accent: "ghost" }, h("button", { type: "button", onClick: () => this.onButtonClick(), id: this.buttonId, ref: el => (this.button = el), "aria-haspopup": "true", "aria-expanded": this.isOpen.toString(), disabled: this.disabled }, h("gux-icon", { "icon-name": "menu-kebab-vertical", "screenreader-text": this.screenreaderText ||
         this.i18n('contextMenuScreenreaderText') })))), h("div", { slot: "popup", class: "gux-list-container" }, h("gux-list", { onClick: e => this.onListClick(e), ref: el => (this.listElement = el) }, h("slot", null))))));
   }
-  static get is() { return "gux-context-menu-beta"; }
+  static get is() { return "gux-context-menu"; }
   static get encapsulation() { return "shadow"; }
   static get delegatesFocus() { return true; }
   static get originalStyleUrls() {
     return {
-      "$": ["gux-context-menu.less"]
+      "$": ["gux-context-menu.scss"]
     };
   }
   static get styleUrls() {
@@ -140,6 +141,24 @@ export class GuxContextMenu {
         "attribute": "screenreader-text",
         "reflect": false,
         "defaultValue": "''"
+      },
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Controls the disabled state of the internal button"
+        },
+        "attribute": "disabled",
+        "reflect": false,
+        "defaultValue": "false"
       }
     };
   }

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

@@ -59,7 +59,7 @@
   justify-content: center;
   width: 100%;
   height: 32px;
-  padding: 4px 8px 4px 8px;
+  padding: 4px 8px;
   font-family: inherit;
   font-size: 12px;
   line-height: 1.6667;

package/dist/collection/components/stable/gux-dismiss-button/gux-dismiss-button.css

@@ -1,35 +1,25 @@
-button {
+gux-button-slot {
   position: absolute;
   top: 0;
   right: 0;
-  padding: 2px;
-  color: #596373;
-  background: transparent;
-  border: none;
-  border-radius: 4px;
 }
-button.gux-inherit {
+gux-button-slot.gux-inherit {
   position: inherit;
 }
-button:not(:disabled):focus-visible,
-button:not(:disabled):hover {
-  color: #2e394c;
-  cursor: pointer;
+gux-button-slot .gux-icon-container {
+  width: 8px;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  justify-content: center;
+  align-content: stretch;
+  align-items: center;
 }
-button gux-icon {
+gux-button-slot .gux-icon-container gux-icon {
   width: 16px;
   height: 16px;
-  margin: 4px;
-  border-radius: 4px;
-}
-button:focus {
-  outline: none;
-}
-button:focus gux-icon {
-  outline: none;
-}
-button:focus-visible:enabled gux-icon {
-  outline: 3px solid #aac9ff;
-  outline-offset: 1px;
-  box-shadow: 0 0 0 1px #fdfdfd;
-}
+  order: 0;
+  flex: 0 0 auto;
+  align-self: auto;
+  color: var(--gse-ui-toast-closeButtonColor);
+}

package/dist/collection/components/stable/gux-dismiss-button/gux-dismiss-button.js

@@ -11,14 +11,14 @@ export class GuxDismissButton {
     this.i18n = await buildI18nForComponent(this.root, translationResources);
   }
   render() {
-    return (h("button", { class: this.position == 'inherit' ? 'gux-inherit' : undefined, type: "button", title: this.i18n('dismiss') }, h("gux-icon", { "icon-name": "close", "screenreader-text": this.i18n('dismiss') })));
+    return (h("gux-button-slot", { accent: "ghost", class: this.position == 'inherit' ? 'gux-inherit' : undefined }, h("button", { type: "button", title: this.i18n('dismiss') }, h("div", { class: "gux-icon-container" }, h("gux-icon", { "icon-name": "close", decorative: true })))));
   }
   static get is() { return "gux-dismiss-button"; }
   static get encapsulation() { return "shadow"; }
   static get delegatesFocus() { return true; }
   static get originalStyleUrls() {
     return {
-      "$": ["gux-dismiss-button.less"]
+      "$": ["gux-dismiss-button.scss"]
     };
   }
   static get styleUrls() {

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

@@ -1,6 +1,8 @@
 :host {
-  color: #2e394c;
+  color: var(--gse-ui-formControl-input-populatedColor);
+  box-sizing: border-box;
 }
+
 .gux-field,
 .gux-target-container-expanded {
   all: unset;
@@ -12,20 +14,35 @@
   align-items: center;
   justify-content: center;
   width: 100%;
-  height: 32px;
-  padding: 6px 8px;
-  font-family: inherit;
-  font-size: 12px;
-  line-height: 1.6667;
+  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: #f6f7f9;
+  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-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-error.gux-target-container-collapsed .gux-field-button,
-.gux-error.gux-target-container-expanded {
-  border-color: #ea0b0b;
+
+.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-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: 30px;
+  height: calc(var(--gse-ui-formControl-input-textfield-height) - var(--gse-ui-formControl-input-default-border-width) * 2);
 }
 .gux-field .gux-field-content {
   --gux-zindex-tooltip: 3;
@@ -37,7 +54,7 @@
   align-items: flex-start;
   justify-content: flex-start;
   min-width: 0;
-  height: 100%;
+  height: 60%;
 }
 .gux-field .gux-field-content .gux-filter,
 .gux-field .gux-field-content .gux-selected-option,
@@ -58,43 +75,41 @@
   all: unset;
   width: 100%;
   color: transparent;
-  caret-color: #2e394c;
+  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: #2e394c;
+  color: var(--gse-ui-formControl-input-populatedColor);
 }
 .gux-field .gux-field-content .gux-filter .gux-filter-display .gux-filter-suggestion {
-  color: #596373;
+  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: #596373;
+  color: var(--gse-ui-formControl-input-placeholderColor);
 }
 .gux-field .gux-expand-icon {
   flex: 0 0 auto;
   align-self: auto;
   order: 0;
-  width: 16px;
-  height: 16px;
-  padding-left: 8px;
-  color: #596373;
+  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: 1px solid #6b7585;
-  border-radius: 4px;
-  box-shadow: inset 0 0 4px rgba(32, 41, 55, 0.16);
+  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: 3px solid #aac9ff;
-  outline-offset: 1px;
-  box-shadow: 0 0 0 1px #fdfdfd;
+.gux-target-container-expanded:focus-visible, .gux-target-container-expanded:focus-within {
+  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);
+  outline-offset: var(--gse-semantic-focusRing-offset);
 }
 .gux-target-container-expanded .gux-filter-input {
   background-color: inherit;
@@ -106,8 +121,7 @@
 }
 .gux-target-container-expanded .gux-field-button {
   width: auto;
-  height: 30px;
-  padding: 0 0 0 8px;
+  height: calc(var(--gse-ui-formControl-input-textfield-height) - var(--gse-ui-formControl-input-default-border-width) * 2);
   margin: 0;
   background: inherit;
   border: none;
@@ -117,31 +131,31 @@
 .gux-target-container-expanded .gux-field-button:focus {
   outline: none;
 }
+
 .gux-target-container-collapsed .gux-field-button {
-  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-target-container-collapsed .gux-field-button:focus-visible,
-.gux-target-container-collapsed .gux-field-button:focus-within {
-  outline: 3px solid #aac9ff;
-  outline-offset: 1px;
-  box-shadow: 0 0 0 1px #fdfdfd;
+.gux-target-container-collapsed .gux-field-button:focus-visible, .gux-target-container-collapsed .gux-field-button:focus-within {
+  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);
+  outline-offset: var(--gse-semantic-focusRing-offset);
 }
+
 .gux-listbox-container {
   box-sizing: border-box;
   margin: 0;
-  color: #2e394c;
 }
+
 gux-popup::part(gux-popup-container) {
   width: inherit;
 }
+
 .gux-selected-icon {
   display: flex;
   align-items: center;
 }
 .gux-selected-icon gux-icon {
-  width: 16px;
-  height: 16px;
-  padding-right: 8px;
-}
+  width: var(--gse-ui-formControl-input-inputIcon-size);
+  height: var(--gse-ui-formControl-input-inputIcon-size);
+  padding-right: var(--gse-ui-dropdown-gap);
+}

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

@@ -9,12 +9,12 @@ 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 { calculateInputDisabledState } from '../../../utils/dom/calculate-input-disabled-state';
-import { onInputDisabledStateChange } from '../../../utils/dom/on-input-disabled-state-change';
-import { afterNextRender } from '../../../utils/dom/after-next-render';
+import { calculateInputDisabledState } from '@utils/dom/calculate-input-disabled-state';
+import { onInputDisabledStateChange } from '@utils/dom/on-input-disabled-state-change';
+import { afterNextRender } from '@utils/dom/after-next-render';
 import { trackComponent } from '@utils/tracking/usage';
 import { OnMutation } from '@utils/decorator/on-mutation';
 import translationResources from './i18n/en.json';
@@ -34,7 +34,6 @@ export class GuxDropdown {
     this.required = false;
     this.loading = false;
     this.placeholder = undefined;
-    this.filterable = false;
     this.filterType = 'none';
     this.hasError = false;
     this.expanded = false;
@@ -187,9 +186,7 @@ export class GuxDropdown {
     }
   }
   isFilterable() {
-    return (this.filterable ||
-      this.filterType === 'starts-with' ||
-      this.filterType === 'custom');
+    return this.filterType === 'starts-with' || this.filterType === 'custom';
   }
   get optionElements() {
     return getListOptions(this.listboxElement);
@@ -312,10 +309,11 @@ export class GuxDropdown {
     return (h("div", { class: {
         'gux-target-container-expanded': this.expanded && this.isFilterable(),
         'gux-target-container-collapsed': !(this.expanded && this.isFilterable()),
-        '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: calculateInputDisabledState(this.root), onClick: this.fieldButtonClick.bind(this), onFocusin: this.showTooltip.bind(this), onFocusout: this.hideTooltip.bind(this), ref: el => (this.fieldButtonElement = el), "aria-haspopup": "listbox", "aria-expanded": this.expanded.toString() }, this.renderTargetContent(), this.renderRadialLoading(), h("gux-icon", { class: {
         'gux-expand-icon': true
-      }, "screenreader-text": this.i18n('dropdown'), iconName: "chevron-small-down" }))));
+      }, "screenreader-text": this.i18n('dropdown'), iconName: this.expanded ? 'chevron-small-up' : 'chevron-small-down' }))));
   }
   renderTargetContent() {
     if (!(this.expanded && this.isFilterable())) {
@@ -335,7 +333,7 @@ export class GuxDropdown {
   static get delegatesFocus() { return true; }
   static get originalStyleUrls() {
     return {
-      "$": ["gux-dropdown.less"]
+      "$": ["gux-dropdown.scss"]
     };
   }
   static get styleUrls() {
@@ -433,24 +431,6 @@ export class GuxDropdown {
         "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,

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

@@ -0,0 +1,91 @@
+.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 {
+  display: inline-block;
+}
+
+.gux-tag {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-content: stretch;
+  align-items: center;
+  justify-content: flex-start;
+  height: var(--gse-ui-tag-height);
+  padding: var(--gse-ui-tag-removable-padding);
+  font-family: var(--gse-ui-tag-text-fontFamily);
+  font-size: var(--gse-ui-tag-text-fontSize);
+  line-height: var(--gse-ui-tag-text-lineHeight);
+  color: var(--gse-ui-tag-accent1-foregroundColor);
+  background-color: var(--gse-ui-tag-accent1-backgroundColor);
+  border-radius: var(--gse-ui-tag-borderRadius);
+}
+.gux-tag .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-tag .gux-tag-remove-button {
+  all: unset;
+  display: flex;
+  align-content: center;
+  align-items: center;
+  justify-content: center;
+  margin-left: var(--gse-ui-tag-removable-gap);
+}
+.gux-tag .gux-tag-remove-button:not(:disabled):hover {
+  cursor: pointer;
+}
+.gux-tag .gux-tag-remove-button .gux-tag-remove-icon {
+  width: var(--gse-ui-tag-button-size);
+  height: var(--gse-ui-tag-button-size);
+}
+.gux-tag .gux-tag-remove-button:focus-within .gux-tag-remove-icon {
+  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-tag.gux-disabled {
+  opacity: 0.5;
+}

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

@@ -38,7 +38,7 @@ export class GuxDropdownMultiTag {
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
-      "$": ["gux-dropdown-multi-tag.less"]
+      "$": ["gux-dropdown-multi-tag.scss"]
     };
   }
   static get styleUrls() {