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

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

@@ -108,12 +108,12 @@ export class GuxContextMenu {
     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() }, 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() {

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

@@ -18,7 +18,6 @@
 @prop $gse-ui-slider-gap
 @prop $gse-ui-slider-focusRing-borderRadius
 **/
-/* stylelint-disable-next-line selector-class-pattern */ /* stylelint-disable-next-line selector-class-pattern */
 .gux-focus-ring-focused:focus {
   outline: 3px solid #aac9ff;
   outline-offset: 1px;
@@ -173,6 +172,7 @@ table a:focus-visible {
 }
 
 /* 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 {

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

@@ -186,160 +186,6 @@ table a:focus-visible {
 
 /* Custom Styles */
 /* stylelint-disable-next-line selector-class-pattern */ /* stylelint-disable-next-line selector-class-pattern */
-.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;
-}
-
-/* Font Definitions. */
-/* From: https://google-webfonts-helper.herokuapp.com */
-/* roboto-300 - latin */
-@font-face {
-  font-family: Roboto;
-  font-style: normal;
-  font-weight: 300;
-  src: url("./fonts/roboto-v20-latin-300.eot"); /* IE9 Compat Modes */
-  src: local("Roboto Light"), local("Roboto-Light"), url("./fonts/roboto-v20-latin-300.eot?#iefix") format("embedded-opentype"), url("./fonts/roboto-v20-latin-300.woff2") format("woff2"), url("./fonts/roboto-v20-latin-300.woff") format("woff"), url("./fonts/roboto-v20-latin-300.ttf") format("truetype"), url("./fonts/roboto-v20-latin-300.svg#Roboto") format("svg"); /* Legacy iOS */
-}
-/* roboto-regular - latin */
-@font-face {
-  font-family: Roboto;
-  font-style: normal;
-  font-weight: 400;
-  src: url("./fonts/roboto-v20-latin-regular.eot"); /* IE9 Compat Modes */
-  src: local("Roboto"), local("Roboto-Regular"), url("./fonts/roboto-v20-latin-regular.eot?#iefix") format("embedded-opentype"), url("./fonts/roboto-v20-latin-regular.woff2") format("woff2"), url("./fonts/roboto-v20-latin-regular.woff") format("woff"), url("./fonts/roboto-v20-latin-regular.ttf") format("truetype"), url("./fonts/roboto-v20-latin-regular.svg#Roboto") format("svg"); /* Legacy iOS */
-}
-/* roboto-italic - latin */
-@font-face {
-  font-family: Roboto;
-  font-style: italic;
-  font-weight: 400;
-  src: url("./fonts/roboto-v20-latin-italic.eot"); /* IE9 Compat Modes */
-  src: local("Roboto Italic"), local("Roboto-Italic"), url("./fonts/roboto-v20-latin-italic.eot?#iefix") format("embedded-opentype"), url("./fonts/roboto-v20-latin-italic.woff2") format("woff2"), url("./fonts/roboto-v20-latin-italic.woff") format("woff"), url("./fonts/roboto-v20-latin-italic.ttf") format("truetype"), url("./fonts/roboto-v20-latin-italic.svg#Roboto") format("svg"); /* Legacy iOS */
-}
-/* roboto-700 - latin */
-@font-face {
-  font-family: Roboto;
-  font-style: normal;
-  font-weight: 700;
-  src: url("./fonts/roboto-v20-latin-700.eot"); /* IE9 Compat Modes */
-  src: local("Roboto Bold"), local("Roboto-Bold"), url("./fonts/roboto-v20-latin-700.eot?#iefix") format("embedded-opentype"), url("./fonts/roboto-v20-latin-700.woff2") format("woff2"), url("./fonts/roboto-v20-latin-700.woff") format("woff"), url("./fonts/roboto-v20-latin-700.ttf") format("truetype"), url("./fonts/roboto-v20-latin-700.svg#Roboto") format("svg"); /* Legacy iOS */
-}
-/*
- * Typography styles and mixins.
- */
-/* Helpers */
-/* Base typography */
-body {
-  font-family: Roboto, sans-serif;
-  font-weight: 400;
-  font-size: 12px;
-  line-height: 20px;
-}
-
-/* Headings */
-h1 {
-  font-family: Roboto, sans-serif;
-  font-weight: 400;
-  font-weight: 300;
-  font-size: 24px;
-  line-height: 32px;
-}
-
-h2 {
-  font-family: Roboto, sans-serif;
-  font-weight: 400;
-  font-weight: 300;
-  font-size: 18px;
-  line-height: 24px;
-}
-
-h3 {
-  font-family: Roboto, sans-serif;
-  font-weight: 400;
-  font-weight: 700;
-  font-size: 14px;
-  line-height: 20px;
-}
-
-h4,
-h5,
-h6 {
-  font-family: Roboto, sans-serif;
-  font-weight: 400;
-  font-size: 14px;
-  line-height: 20px;
-}
-
-/* Anchor */
-.gux-icon-anchor gux-icon {
-  padding-right: 2px;
-}
-
-a {
-  color: #2a60c8;
-  text-decoration: underline;
-  border-radius: 2px;
-}
-a:hover {
-  color: #2754ac;
-}
-a:active {
-  color: #23478f;
-}
-a:focus-visible {
-  outline: 3px solid #aac9ff;
-  outline-offset: 1px;
-  box-shadow: 0 0 0 1px #fdfdfd;
-}
-
-table a {
-  color: #2a60c8;
-  text-decoration: underline;
-  border-radius: 2px;
-  text-decoration: none;
-}
-table a:hover {
-  color: #2754ac;
-}
-table a:active {
-  color: #23478f;
-}
-table a:focus-visible {
-  outline: 3px solid #aac9ff;
-  outline-offset: 1px;
-  box-shadow: 0 0 0 1px #fdfdfd;
-}
-
-/* Custom Styles */
 /* stylelint-disable-next-line selector-class-pattern */
 /* stylelint-disable-next-line selector-class-pattern */
 .gux-form-field-container.gux-beside {

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

@@ -186,160 +186,6 @@ table a:focus-visible {
 
 /* Custom Styles */
 /* stylelint-disable-next-line selector-class-pattern */ /* stylelint-disable-next-line selector-class-pattern */
-.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;
-}
-
-/* Font Definitions. */
-/* From: https://google-webfonts-helper.herokuapp.com */
-/* roboto-300 - latin */
-@font-face {
-  font-family: Roboto;
-  font-style: normal;
-  font-weight: 300;
-  src: url("./fonts/roboto-v20-latin-300.eot"); /* IE9 Compat Modes */
-  src: local("Roboto Light"), local("Roboto-Light"), url("./fonts/roboto-v20-latin-300.eot?#iefix") format("embedded-opentype"), url("./fonts/roboto-v20-latin-300.woff2") format("woff2"), url("./fonts/roboto-v20-latin-300.woff") format("woff"), url("./fonts/roboto-v20-latin-300.ttf") format("truetype"), url("./fonts/roboto-v20-latin-300.svg#Roboto") format("svg"); /* Legacy iOS */
-}
-/* roboto-regular - latin */
-@font-face {
-  font-family: Roboto;
-  font-style: normal;
-  font-weight: 400;
-  src: url("./fonts/roboto-v20-latin-regular.eot"); /* IE9 Compat Modes */
-  src: local("Roboto"), local("Roboto-Regular"), url("./fonts/roboto-v20-latin-regular.eot?#iefix") format("embedded-opentype"), url("./fonts/roboto-v20-latin-regular.woff2") format("woff2"), url("./fonts/roboto-v20-latin-regular.woff") format("woff"), url("./fonts/roboto-v20-latin-regular.ttf") format("truetype"), url("./fonts/roboto-v20-latin-regular.svg#Roboto") format("svg"); /* Legacy iOS */
-}
-/* roboto-italic - latin */
-@font-face {
-  font-family: Roboto;
-  font-style: italic;
-  font-weight: 400;
-  src: url("./fonts/roboto-v20-latin-italic.eot"); /* IE9 Compat Modes */
-  src: local("Roboto Italic"), local("Roboto-Italic"), url("./fonts/roboto-v20-latin-italic.eot?#iefix") format("embedded-opentype"), url("./fonts/roboto-v20-latin-italic.woff2") format("woff2"), url("./fonts/roboto-v20-latin-italic.woff") format("woff"), url("./fonts/roboto-v20-latin-italic.ttf") format("truetype"), url("./fonts/roboto-v20-latin-italic.svg#Roboto") format("svg"); /* Legacy iOS */
-}
-/* roboto-700 - latin */
-@font-face {
-  font-family: Roboto;
-  font-style: normal;
-  font-weight: 700;
-  src: url("./fonts/roboto-v20-latin-700.eot"); /* IE9 Compat Modes */
-  src: local("Roboto Bold"), local("Roboto-Bold"), url("./fonts/roboto-v20-latin-700.eot?#iefix") format("embedded-opentype"), url("./fonts/roboto-v20-latin-700.woff2") format("woff2"), url("./fonts/roboto-v20-latin-700.woff") format("woff"), url("./fonts/roboto-v20-latin-700.ttf") format("truetype"), url("./fonts/roboto-v20-latin-700.svg#Roboto") format("svg"); /* Legacy iOS */
-}
-/*
- * Typography styles and mixins.
- */
-/* Helpers */
-/* Base typography */
-body {
-  font-family: Roboto, sans-serif;
-  font-weight: 400;
-  font-size: 12px;
-  line-height: 20px;
-}
-
-/* Headings */
-h1 {
-  font-family: Roboto, sans-serif;
-  font-weight: 400;
-  font-weight: 300;
-  font-size: 24px;
-  line-height: 32px;
-}
-
-h2 {
-  font-family: Roboto, sans-serif;
-  font-weight: 400;
-  font-weight: 300;
-  font-size: 18px;
-  line-height: 24px;
-}
-
-h3 {
-  font-family: Roboto, sans-serif;
-  font-weight: 400;
-  font-weight: 700;
-  font-size: 14px;
-  line-height: 20px;
-}
-
-h4,
-h5,
-h6 {
-  font-family: Roboto, sans-serif;
-  font-weight: 400;
-  font-size: 14px;
-  line-height: 20px;
-}
-
-/* Anchor */
-.gux-icon-anchor gux-icon {
-  padding-right: 2px;
-}
-
-a {
-  color: #2a60c8;
-  text-decoration: underline;
-  border-radius: 2px;
-}
-a:hover {
-  color: #2754ac;
-}
-a:active {
-  color: #23478f;
-}
-a:focus-visible {
-  outline: 3px solid #aac9ff;
-  outline-offset: 1px;
-  box-shadow: 0 0 0 1px #fdfdfd;
-}
-
-table a {
-  color: #2a60c8;
-  text-decoration: underline;
-  border-radius: 2px;
-  text-decoration: none;
-}
-table a:hover {
-  color: #2754ac;
-}
-table a:active {
-  color: #23478f;
-}
-table a:focus-visible {
-  outline: 3px solid #aac9ff;
-  outline-offset: 1px;
-  box-shadow: 0 0 0 1px #fdfdfd;
-}
-
-/* Custom Styles */
 /* stylelint-disable-next-line selector-class-pattern */
 /* stylelint-disable-next-line selector-class-pattern */
 .gux-form-field-container.gux-beside {

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

@@ -2,20 +2,21 @@
   box-sizing: border-box;
   display: block;
   max-height: 20rem;
-  padding: 8px 0;
+  padding: var(--gse-ui-menu-padding);
   margin: 0;
   overflow-y: auto;
-  color: #2e394c;
-  background: #fdfdfd;
-  border: 1px solid #b4bccb;
-  border-radius: 4px;
+  background: 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);
   outline: none;
 }
+
 :host(:focus) {
-  outline: 3px solid #aac9ff;
-  outline-offset: 1px;
-  box-shadow: 0 0 0 1px #fdfdfd;
+  outline: var(--gse-semantic-focusRing-width) solid var(--gse-semantic-color-focus);
+  outline-offset: var(--gse-semantic-focusRing-offset);
 }
+
 .gux-message-container {
   display: flex;
   flex-direction: column;
@@ -23,10 +24,21 @@
   align-content: stretch;
   align-items: center;
   justify-content: center;
+  text-align: center;
 }
 .gux-message-container .gux-no-matches {
   box-sizing: border-box;
   height: 32px;
-  padding: 8px 16px;
-  color: #2e394c;
+  font-family: var(--gse-ui-dropdown-menu-emptyState-subheader-text-fontFamily);
+  font-weight: var(--gse-ui-dropdown-menu-emptyState-subheader-text-fontWeight);
+  line-height: var(--gse-ui-dropdown-menu-emptyState-subheader-text-lineHeight);
+  font-size: var(--gse-ui-dropdown-menu-emptyState-subheader-text-fontSize);
+  color: var(--gse-ui-dropdown-menu-emptyState-subheader-foregroundColor);
 }
+.gux-message-container .gux-no-matches .gux-no-matches-header {
+  font-family: var(--gse-ui-dropdown-menu-emptyState-header-text-fontFamily);
+  font-weight: var(--gse-ui-dropdown-menu-emptyState-header-text-fontWeight);
+  line-height: var(--gse-ui-dropdown-menu-emptyState-header-text-lineHeight);
+  font-size: var(--gse-ui-dropdown-menu-emptyState-header-text-fontSize);
+  color: var(--gse-ui-dropdown-menu-emptyState-header-foregroundColor);
+}

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

@@ -2,8 +2,8 @@ import { h, Host } from '@stencil/core';
 import { actOnActiveOption, clearActiveOptions, goToOption, hasPreviousOption, hasNextOption, onClickedOption, setFirstOptionActive, setInitialActiveOption, setLastOptionActive, setNextOptionActive, setPreviousOptionActive, matchOption } from './gux-listbox.service';
 import { optionTagSelector } from './options/option-types';
 import { buildI18nForComponent } from '../../../i18n';
-import { whenEventIsFrom } from '../../../utils/dom/when-event-is-from';
-import simulateNativeEvent from '../../../utils/dom/simulate-native-event';
+import { whenEventIsFrom } from '@utils/dom/when-event-is-from';
+import simulateNativeEvent from '@utils/dom/simulate-native-event';
 import { trackComponent } from '@utils/tracking/usage';
 import translationResources from './i18n/en.json';
 /**
@@ -144,7 +144,10 @@ export class GuxListbox {
   }
   renderAllListboxOptionsFiltered() {
     return [
-      h("div", { class: "gux-message-container" }, h("div", { class: "gux-no-matches" }, this.emptyMessage || this.i18n('noMatches'))),
+      h("div", { class: "gux-message-container" }, h("div", { class: "gux-no-matches" }, this.emptyMessage || [
+        h("div", { class: "gux-no-matches-header" }, this.i18n('noMatchesHeader')),
+        h("div", null, this.i18n('noMatchesMessage'))
+      ])),
       this.renderHiddenSlot()
     ];
   }
@@ -161,7 +164,7 @@ export class GuxListbox {
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
-      "$": ["gux-listbox.less"]
+      "$": ["gux-listbox.scss"]
     };
   }
   static get styleUrls() {

package/dist/collection/components/stable/gux-listbox/options/gux-option/gux-option.css

@@ -1,30 +1,51 @@
-gux-option {
+:host {
   box-sizing: border-box;
   display: flex;
-  height: 32px;
-  padding: 6px 8px;
-  color: #2e394c;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-content: stretch;
+  align-items: center;
+  justify-content: center;
+  height: var(--gse-ui-menu-option-height);
+  padding: var(--gse-ui-menu-option-padding);
+  color: var(--gse-ui-menu-option-label-foregroundColor);
   word-wrap: break-word;
   cursor: pointer;
+  font-family: var(--gse-ui-menu-option-label-default-text-fontFamily);
+  font-weight: var(--gse-ui-menu-option-label-default-text-fontWeight);
+  line-height: var(--gse-ui-menu-option-label-default-text-lineHeight);
+  font-size: var(--gse-ui-menu-option-label-default-text-fontSize);
+  gap: var(--gse-ui-menu-option-gap);
 }
-gux-option.gux-disabled {
+:host .gux-slot-container {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+:host(.gux-disabled) {
   pointer-events: none;
   cursor: default;
-  opacity: 0.5;
-}
-gux-option.gux-selected {
-  background: #deeaff;
+  opacity: var(--gse-ui-menu-option-disabled-opacity);
 }
-gux-option.gux-active,
-gux-option.gux-hovered:not(:disabled) {
-  color: #fdfdfd;
-  background: #2a60c8;
+
+:host(.gux-selected) {
+  font-family: var(--gse-ui-menu-option-label-active-text-fontFamily);
+  font-weight: var(--gse-ui-menu-option-label-active-text-fontWeight);
+  line-height: var(--gse-ui-menu-option-label-active-text-lineHeight);
+  font-size: var(--gse-ui-menu-option-label-active-text-fontSize);
+  background: var(--gse-ui-menu-option-selected-backgroundColor);
 }
-gux-option.gux-filtered {
-  display: none;
+
+:host(.gux-active) {
+  outline: var(--gse-ui-menu-option-focus-border-width) var(--gse-ui-menu-option-focus-border-style) var(--gse-ui-menu-option-focus-border-color);
+  border-radius: var(--gse-semantic-focusRing-cornerRadius);
 }
-gux-option .gux-slot-container {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+
+:host(.gux-hovered:not(:disabled)) {
+  background: var(--gse-ui-menu-option-hover-backgroundColor);
 }
+
+:host(.gux-filtered) {
+  display: none;
+}

package/dist/collection/components/stable/gux-listbox/options/gux-option/gux-option.js

@@ -1,5 +1,5 @@
 import { h, Host } from '@stencil/core';
-import { randomHTMLId } from '../../../../../utils/dom/random-html-id';
+import { randomHTMLId } from '@utils/dom/random-html-id';
 /**
  * @slot - text
  */
@@ -46,9 +46,10 @@ export class GuxOption {
       }, "aria-selected": this.getAriaSelected(), "aria-disabled": this.disabled.toString() }, h("gux-truncate", { ref: el => (this.truncateElement = el) }, h("slot", null))));
   }
   static get is() { return "gux-option"; }
+  static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
-      "$": ["gux-option.less"]
+      "$": ["gux-option.scss"]
     };
   }
   static get styleUrls() {

package/dist/collection/components/stable/gux-listbox/options/gux-option-icon/gux-option-icon.css

@@ -1,38 +1,57 @@
-gux-option-icon {
+:host {
   box-sizing: border-box;
   display: flex;
-  height: 32px;
-  padding: 6px 8px;
-  color: #2e394c;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-content: stretch;
+  align-items: center;
+  justify-content: center;
+  height: var(--gse-ui-menu-option-height);
+  padding: var(--gse-ui-menu-option-padding);
+  color: var(--gse-ui-menu-option-label-foregroundColor);
   word-wrap: break-word;
   cursor: pointer;
-  align-items: flex-start;
+  font-family: var(--gse-ui-menu-option-label-default-text-fontFamily);
+  font-weight: var(--gse-ui-menu-option-label-default-text-fontWeight);
+  line-height: var(--gse-ui-menu-option-label-default-text-lineHeight);
+  font-size: var(--gse-ui-menu-option-label-default-text-fontSize);
+  gap: var(--gse-ui-menu-option-gap);
 }
-gux-option-icon.gux-disabled {
+:host .gux-slot-container {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+:host(.gux-disabled) {
   pointer-events: none;
   cursor: default;
-  opacity: 0.5;
+  opacity: var(--gse-ui-menu-option-disabled-opacity);
 }
-gux-option-icon.gux-selected {
-  background: #deeaff;
+
+:host(.gux-selected) {
+  font-family: var(--gse-ui-menu-option-label-active-text-fontFamily);
+  font-weight: var(--gse-ui-menu-option-label-active-text-fontWeight);
+  line-height: var(--gse-ui-menu-option-label-active-text-lineHeight);
+  font-size: var(--gse-ui-menu-option-label-active-text-fontSize);
+  background: var(--gse-ui-menu-option-selected-backgroundColor);
 }
-gux-option-icon.gux-active,
-gux-option-icon.gux-hovered:not(:disabled) {
-  color: #fdfdfd;
-  background: #2a60c8;
+
+:host(.gux-active) {
+  outline: var(--gse-ui-menu-option-focus-border-width) var(--gse-ui-menu-option-focus-border-style) var(--gse-ui-menu-option-focus-border-color);
+  border-radius: var(--gse-semantic-focusRing-cornerRadius);
 }
-gux-option-icon.gux-filtered {
-  display: none;
+
+:host(.gux-hovered:not(:disabled)) {
+  background: var(--gse-ui-menu-option-hover-backgroundColor);
 }
-gux-option-icon .gux-slot-container {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+
+:host(.gux-filtered) {
+  display: none;
 }
-gux-option-icon gux-icon {
+
+:host gux-icon {
   flex-shrink: 0;
-  width: 16px;
-  height: 16px;
-  margin-block-start: calc((20px - 16px) / 2);
-  margin-inline-end: 8px;
-}
+  width: var(--gse-ui-menu-option-startIcon-width);
+  height: var(--gse-ui-menu-option-startIcon-height);
+}

package/dist/collection/components/stable/gux-listbox/options/gux-option-icon/gux-option-icon.js

@@ -1,5 +1,5 @@
 import { h, Host } from '@stencil/core';
-import { randomHTMLId } from '../../../../../utils/dom/random-html-id';
+import { randomHTMLId } from '@utils/dom/random-html-id';
 /**
  * @slot - text
  */
@@ -55,9 +55,10 @@ export class GuxOptionIcon {
       }, "aria-selected": this.getAriaSelected(), "aria-disabled": this.disabled.toString() }, h("gux-icon", { decorative: this.iconSrText == null, "screenreader-text": this.iconSrText, "icon-name": this.iconName, style: iconStyle }), h("gux-truncate", { ref: el => (this.truncateElement = el) }, h("slot", null))));
   }
   static get is() { return "gux-option-icon"; }
+  static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
-      "$": ["gux-option-icon.less"]
+      "$": ["gux-option-icon.scss"]
     };
   }
   static get styleUrls() {