genesys-spark-components 4.0.0-beta.46 → 4.0.0-beta.48

package/dist/collection/components/stable/gux-context-menu/tests/gux-context-menu.e2e.js

@@ -1,4 +1,11 @@
 import { a11yCheck, newSparkE2EPage } from "../../../../test/e2eTestUtils";
+const axeExclusions = [
+  {
+    issueId: 'aria-required-children',
+    target: 'gux-context-menu,gux-list',
+    exclusionReason: 'To be addressed in COMUI-2388. New violation picked up after upgrading from axe-core v4.4.2 to v4.8.2'
+  }
+];
 const html = `
 <gux-context-menu>
   <gux-list-item id="list-item-1" onclick="notify(event)">Test 1</gux-list-item>
@@ -19,10 +26,10 @@ describe('gux-context-menu', () => {
   });
   it('should be a11y compliant', async () => {
     const element = await page.find('gux-context-menu');
-    await a11yCheck(page, [], 'before opening context menu');
+    await a11yCheck(page, axeExclusions, 'before opening context menu');
     await element.click();
     await page.waitForChanges();
-    await a11yCheck(page, [], 'after opening context menu');
+    await a11yCheck(page, axeExclusions, 'after opening context menu');
   });
   it('should focus first item in list on click', async () => {
     const element = await page.find('gux-context-menu');

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

@@ -107,7 +107,7 @@
   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 {
+.gux-target-container-expanded:focus-visible, .gux-target-container-expanded:focus-within:has(: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);
   outline-offset: var(--gse-semantic-focusRing-offset);
 }
@@ -136,14 +136,13 @@
   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 {
+.gux-target-container-collapsed .gux-field-button:focus-visible, .gux-target-container-collapsed .gux-field-button:focus-within:has(: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);
   outline-offset: var(--gse-semantic-focusRing-offset);
 }
 
-.gux-listbox-container {
-  box-sizing: border-box;
-  margin: 0;
+::slotted(gux-listbox) {
+  outline: none;
 }
 
 .gux-selected-icon {

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

@@ -18,7 +18,7 @@ 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";
-import { getSearchOption, getListOptions } from "../gux-listbox/gux-listbox.service";
+import { getSearchOption, getListOptions, setInitialActiveOption } from "../gux-listbox/gux-listbox.service";
 /**
  * Our Dropdown component. In the most basic case, it's used with `gux-option` to give users
  * a list of text options to select from, but other types of options with different appearance
@@ -77,6 +77,7 @@ export class GuxDropdown {
         if (this.activeElementNotListbox()) {
           event.preventDefault();
           this.expanded = true;
+          setInitialActiveOption(this.listboxElement);
         }
         return;
     }
@@ -303,7 +304,7 @@ export class GuxDropdown {
     }
   }
   renderPopup() {
-    return (h("div", { slot: "popup", class: "gux-listbox-container" }, h("slot", null)));
+    return (h("slot", { slot: "popup" }));
   }
   renderTarget() {
     return (h("div", { class: {

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

@@ -46,5 +46,5 @@
   outline: var(--gse-semantic-focusRing-small-border-color) var(--gse-semantic-focusRing-small-border-style) var(--gse-semantic-focusRing-small-border-width);
 }
 .gux-tag.gux-disabled {
-  opacity: 0.5;
+  opacity: var(--gse-ui-tag-disabled-opacity);
 }

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

@@ -122,7 +122,7 @@
   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 {
+.gux-target-container-expanded:focus-visible, .gux-target-container-expanded:focus-within:has(:focus-visible) {
   outline: var(--gse-semantic-focusRing-default-border-color) var(--gse-semantic-focusRing-default-border-style) var(--gse-semantic-focusRing-default-border-width);
   outline-offset: var(--gse-semantic-focusRing-offset);
 }
@@ -151,7 +151,7 @@
   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 {
+.gux-target-container-collapsed .gux-field-button:focus-visible, .gux-target-container-collapsed .gux-field-button:focus-within:has(:focus-visible) {
   outline: var(--gse-semantic-focusRing-default-border-color) var(--gse-semantic-focusRing-default-border-style) var(--gse-semantic-focusRing-default-border-width);
   outline-offset: var(--gse-semantic-focusRing-offset);
 }

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

@@ -16,7 +16,7 @@ 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 "../gux-listbox/gux-listbox.service";
+import { getSearchOption, setInitialActiveOption } from "../gux-listbox/gux-listbox.service";
 import { OnMutation } from "../../../utils/decorator/on-mutation";
 /**
  * @slot - for a gux-listbox-multi containing gux-option-multi children
@@ -111,6 +111,7 @@ export class GuxDropdownMulti {
         if (this.activeElementNotListbox()) {
           event.preventDefault();
           this.expanded = true;
+          setInitialActiveOption(this.listboxElement);
         }
         return;
       case 'Enter':

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

@@ -106,13 +106,17 @@
 }
 
 .gux-input-label {
-  display: flex;
+  display: inline-flex;
   flex-direction: row;
   gap: var(--gse-ui-checkbox-gap);
 }
-.gux-input-label .gux-label {
-  display: flex;
-  flex-direction: column;
+.gux-input-label .gux-label-screenreader {
+  position: absolute;
+  top: auto;
+  left: -10000px;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
 }
 
 ::slotted(input[type=checkbox]) {

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

@@ -25,6 +25,7 @@ import { validateFormIds, getSlottedInput } from "../../gux-form-field.service";
  */
 export class GuxFormFieldCheckbox {
   constructor() {
+    this.labelPosition = 'beside';
     this.disabled = undefined;
     this.hasError = false;
     this.hasHelp = false;
@@ -37,7 +38,7 @@ export class GuxFormFieldCheckbox {
     this.setInput();
     this.hasError = hasSlot(this.root, 'error');
     this.hasHelp = hasSlot(this.root, 'help');
-    trackComponent(this.root);
+    trackComponent(this.root, { variant: this.variant });
   }
   disconnectedCallback() {
     if (this.disabledObserver) {
@@ -48,7 +49,10 @@ export class GuxFormFieldCheckbox {
     return (h(Host, { class: {
         'gux-input-error': this.hasError,
         'gux-disabled': this.disabled
-      } }, h("div", { class: "gux-form-field-container" }, h("div", { class: "gux-input-label" }, h("div", { class: "gux-input" }, h("slot", { name: "input", onSlotchange: () => this.setInput() })), h("div", { class: "gux-label" }, h("slot", { name: "label" }), h(GuxFormFieldError, { show: this.hasError }, h("slot", { name: "error" })), h(GuxFormFieldHelp, { show: !this.hasError && this.hasHelp }, h("slot", { name: "help" })))))));
+      } }, h("div", { class: "gux-form-field-container" }, h("div", { class: "gux-input-label" }, h("div", { class: "gux-input" }, h("slot", { name: "input", onSlotchange: () => this.setInput() })), h("div", { class: `gux-label-${this.labelPosition}` }, h("slot", { name: "label" }), h(GuxFormFieldError, { show: this.hasError }, h("slot", { name: "error" })), h(GuxFormFieldHelp, { show: !this.hasError && this.hasHelp }, h("slot", { name: "help" })))))));
+  }
+  get variant() {
+    return this.labelPosition.toLowerCase();
   }
   setInput() {
     this.input = getSlottedInput(this.root, 'input[type="checkbox"][slot="input"]');
@@ -71,6 +75,28 @@ export class GuxFormFieldCheckbox {
       "$": ["gux-form-field-checkbox.css"]
     };
   }
+  static get properties() {
+    return {
+      "labelPosition": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'beside' | 'screenreader'",
+          "resolved": "\"beside\" | \"screenreader\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "label-position",
+        "reflect": false,
+        "defaultValue": "'beside'"
+      }
+    };
+  }
   static get states() {
     return {
       "disabled": {},

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

@@ -48,7 +48,7 @@ export class GuxFormFieldRadio {
     return (h(Host, { class: {
         'gux-input-error': this.hasError,
         'gux-disabled': this.disabled
-      } }, h("div", { class: "gux-form-field-container" }, h("div", { class: "gux-input-label" }, h("div", { class: "gux-input" }, h("slot", { name: "input", onSlotchange: () => this.setInput() })), h("div", { class: "gux-label" }, h("slot", { name: "label" }), h(GuxFormFieldError, { show: this.hasError }, h("slot", { name: "error" })), h(GuxFormFieldHelp, { show: !this.hasError && this.hasHelp }, h("slot", { name: "help" })))))));
+      } }, h("div", { class: "gux-form-field-container" }, h("div", { class: "gux-input-label" }, h("div", { class: "gux-input" }, h("slot", { name: "input", onSlotchange: () => this.setInput() })), h("div", { class: "gux-label", "aria-disabled": this.disabled ? 'true' : 'false' }, h("slot", { name: "label" }), h(GuxFormFieldError, { show: this.hasError }, h("slot", { name: "error" })), h(GuxFormFieldHelp, { show: !this.hasError && this.hasHelp }, h("slot", { name: "help" })))))));
   }
   setInput() {
     this.input = getSlottedInput(this.root, 'input[type="radio"][slot="input"]');

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-radio/tests/gux-form-field-radio.e2e.js

@@ -45,11 +45,24 @@ describe('gux-form-field-radio', () => {
           <span slot="error">Error message</span>
         </gux-form-field-radio>
       `,
+      `
+        <gux-form-field-radio>
+          <input slot="input" type="radio" name="food-1" value="pizza" disabled/>
+          <label slot="label">Pizza</label>
+          <span slot="error">Error message</span>
+        </gux-form-field-radio>
+      `,
+      `<gux-form-field-radio>
+        <input slot="input" type="radio" name="food-1" value="spaghetti"/>
+        <label slot="label">Spaghetti</label>
+        <span slot="help">This is a help message</span>
+      </gux-form-field-radio>
+      `,
       `<gux-form-field-radio>
-      <input slot="input" type="radio" name="food-1" value="spaghetti" />
-      <label slot="label">Spaghetti</label>
-      <span slot="help">This is a help message</span>
-    </gux-form-field-radio>`
+        <input slot="input" type="radio" name="food-1" value="spaghetti" disabled/>
+        <label slot="label">Spaghetti</label>
+        <span slot="help">This is a help message</span>
+      </gux-form-field-radio>`
     ].forEach((html, index) => {
       it(`should render component as expected (${index + 1})`, async () => {
         const page = await newNonrandomE2EPage({ html });

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-radio/tests/gux-form-field-radio.spec.js

@@ -47,11 +47,24 @@ describe('gux-form-field-radio', () => {
           <span slot="error">Error message</span>
         </gux-form-field-radio>
       `,
+      `
+        <gux-form-field-radio>
+          <input slot="input" type="radio" name="food-1" value="pizza" disabled/>
+          <label slot="label">Pizza</label>
+          <span slot="error">Error message</span>
+        </gux-form-field-radio>
+      `,
+      `<gux-form-field-radio>
+        <input slot="input" type="radio" name="food-1" value="spaghetti"/>
+        <label slot="label">Spaghetti</label>
+        <span slot="help">This is a help message</span>
+      </gux-form-field-radio>
+      `,
       `<gux-form-field-radio>
-      <input slot="input" type="radio" name="food-1" value="spaghetti" />
-      <label slot="label">Spaghetti</label>
-      <span slot="help">This is a help message</span>
-    </gux-form-field-radio>`
+        <input slot="input" type="radio" name="food-1" value="spaghetti" disabled/>
+        <label slot="label">Spaghetti</label>
+        <span slot="help">This is a help message</span>
+      </gux-form-field-radio>`
     ].forEach((html, index) => {
       it(`should render component as expected (${index + 1})`, async () => {
         const page = await newSpecPage({ components, html, language });

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

@@ -46,7 +46,7 @@ export class GuxList {
     last(this.root, validFocusableItems);
   }
   renderFocusTarget() {
-    return (h("span", { tabindex: "-1" }));
+    return (h("span", { tabindex: "-1", "aria-hidden": "true" }));
   }
   render() {
     return (h(Host, { role: "list" }, this.renderFocusTarget(), h("slot", null)));

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

@@ -4,6 +4,7 @@
   max-height: 20rem;
   padding: var(--gse-ui-menu-padding);
   margin: 0;
+  overflow-x: visible;
   overflow-y: auto;
   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);
@@ -12,7 +13,7 @@
   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);
 }
 
-:host(:focus) {
+:host(:focus-visible:not(:host-context(gux-dropdown))) {
   outline: var(--gse-semantic-focusRing-width) solid var(--gse-semantic-color-focus);
   outline-offset: var(--gse-semantic-focusRing-offset);
 }

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

@@ -1,5 +1,5 @@
 import { h, Host } from "@stencil/core";
-import { actOnActiveOption, clearActiveOptions, goToOption, hasPreviousOption, hasNextOption, onClickedOption, setFirstOptionActive, setInitialActiveOption, setLastOptionActive, setNextOptionActive, setPreviousOptionActive, matchOption } from "./gux-listbox.service";
+import { actOnActiveOption, clearActiveOptions, goToOption, hasActiveOption, 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";
@@ -23,13 +23,15 @@ export class GuxListbox {
     this.listboxOptions = [];
     this.allListboxOptionsFiltered = undefined;
   }
-  onFocus() {
-    setInitialActiveOption(this.root);
-  }
   onBlur() {
     clearActiveOptions(this.root);
   }
   onKeydown(event) {
+    if (!hasActiveOption(this.root)) {
+      event.preventDefault();
+      setInitialActiveOption(this.root);
+      return;
+    }
     switch (event.key) {
       case 'Enter':
         event.preventDefault();
@@ -316,12 +318,6 @@ export class GuxListbox {
   static get elementRef() { return "root"; }
   static get listeners() {
     return [{
-        "name": "focus",
-        "method": "onFocus",
-        "target": undefined,
-        "capture": false,
-        "passive": false
-      }, {
         "name": "blur",
         "method": "onBlur",
         "target": undefined,

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

@@ -3,9 +3,6 @@ export function getListOptions(list) {
     return item.value || item.value === '';
   });
 }
-function getHoveredOption(list) {
-  return getListOptions(list).find(option => option.hovered && !option.disabled && !option.filtered);
-}
 function getFirstSelectedOption(list) {
   return getListOptions(list).find(option => option.selected && !option.disabled && !option.filtered);
 }
@@ -63,7 +60,7 @@ function getLastOption(list) {
   }
   return lastOption;
 }
-function hasActiveOption(list) {
+export function hasActiveOption(list) {
   return Boolean(getActiveOption(list));
 }
 export function getSearchOption(list, searchString) {
@@ -84,9 +81,7 @@ export function clearActiveOptions(list) {
   });
 }
 export function setInitialActiveOption(list) {
-  setActiveOption(list, getHoveredOption(list) ||
-    getFirstSelectedOption(list) ||
-    getFirstOption(list));
+  setActiveOption(list, getFirstSelectedOption(list) || getFirstOption(list));
 }
 export function hasPreviousOption(list) {
   if (hasActiveOption(list)) {

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

@@ -37,12 +37,20 @@
   background: var(--gse-ui-menu-option-selected-backgroundColor);
 }
 
+:host(:active:not(:disabled)) {
+  font-family: var(--gse-ui-menu-option-label-active-text-fontFamily);
+  font-size: var(--gse-ui-menu-option-label-active-text-fontSize);
+  font-weight: var(--gse-ui-menu-option-label-active-text-fontWeight);
+  line-height: var(--gse-ui-menu-option-label-active-text-lineHeight);
+}
+
 :host(.gux-active) {
   border-radius: var(--gse-semantic-focusRing-cornerRadius);
   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);
+  outline-offset: -2px;
 }
 
-:host(.gux-hovered:not(:disabled)) {
+:host(:hover:not(:disabled)) {
   background: var(--gse-ui-menu-option-hover-backgroundColor);
 }
 

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

@@ -10,13 +10,6 @@ export class GuxOption {
     this.selected = false;
     this.disabled = false;
     this.filtered = false;
-    this.hovered = false;
-  }
-  onmouseenter() {
-    this.hovered = true;
-  }
-  onMouseleave() {
-    this.hovered = false;
   }
   handleActive(active) {
     var _a, _b;
@@ -41,7 +34,6 @@ export class GuxOption {
         'gux-active': this.active,
         'gux-disabled': this.disabled,
         'gux-filtered': this.filtered,
-        'gux-hovered': this.hovered,
         'gux-selected': this.selected
       }, "aria-selected": this.getAriaSelected(), "aria-disabled": this.disabled.toString() }, h("gux-truncate", { ref: el => (this.truncateElement = el) }, h("slot", null))));
   }
@@ -147,24 +139,6 @@ export class GuxOption {
         "attribute": "filtered",
         "reflect": false,
         "defaultValue": "false"
-      },
-      "hovered": {
-        "type": "boolean",
-        "mutable": true,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "hovered",
-        "reflect": false,
-        "defaultValue": "false"
       }
     };
   }
@@ -175,19 +149,4 @@ export class GuxOption {
         "methodName": "handleActive"
       }];
   }
-  static get listeners() {
-    return [{
-        "name": "mouseenter",
-        "method": "onmouseenter",
-        "target": undefined,
-        "capture": false,
-        "passive": true
-      }, {
-        "name": "mouseleave",
-        "method": "onMouseleave",
-        "target": undefined,
-        "capture": false,
-        "passive": true
-      }];
-  }
 }

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

@@ -37,12 +37,20 @@
   background: var(--gse-ui-menu-option-selected-backgroundColor);
 }
 
+:host(:active:not(:disabled)) {
+  font-family: var(--gse-ui-menu-option-label-active-text-fontFamily);
+  font-size: var(--gse-ui-menu-option-label-active-text-fontSize);
+  font-weight: var(--gse-ui-menu-option-label-active-text-fontWeight);
+  line-height: var(--gse-ui-menu-option-label-active-text-lineHeight);
+}
+
 :host(.gux-active) {
   border-radius: var(--gse-semantic-focusRing-cornerRadius);
   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);
+  outline-offset: -2px;
 }
 
-:host(.gux-hovered:not(:disabled)) {
+:host(:hover:not(:disabled)) {
   background: var(--gse-ui-menu-option-hover-backgroundColor);
 }
 

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

@@ -23,6 +23,7 @@
 :host:host(.gux-active) {
   border-radius: var(--gse-semantic-focusRing-cornerRadius);
   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);
+  outline-offset: -2px;
 }
 :host:host(.gux-hovered:not([disabled])) {
   background: var(--gse-ui-menu-option-hover-backgroundColor);

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

@@ -12,11 +12,6 @@
   scrollbar-color: var(--gse-ui-menu-scrollbar-foregroundColor);
 }
 
-:host(:focus-visible) {
-  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;

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

@@ -1,5 +1,5 @@
 import { h, Host } from "@stencil/core";
-import { actOnActiveOption, clearActiveOptions, goToOption, hasPreviousOption, hasNextOption, onClickedOption, setFirstOptionActive, setInitialActiveOption, setLastOptionActive, setNextOptionActive, setPreviousOptionActive } from "../gux-listbox/gux-listbox.service";
+import { actOnActiveOption, clearActiveOptions, goToOption, hasPreviousOption, hasNextOption, onClickedOption, setFirstOptionActive, setInitialActiveOption, setLastOptionActive, setNextOptionActive, setPreviousOptionActive, hasActiveOption } from "../gux-listbox/gux-listbox.service";
 import { buildI18nForComponent } from "../../../i18n";
 import { whenEventIsFrom } from "../../../utils/dom/when-event-is-from";
 import simulateNativeEvent from "../../../utils/dom/simulate-native-event";
@@ -21,9 +21,6 @@ export class GuxListboxMulti {
     this.allListboxOptionsFiltered = undefined;
     this.hasExactMatch = false;
   }
-  onFocus() {
-    setInitialActiveOption(this.root);
-  }
   onBlur() {
     clearActiveOptions(this.root);
   }
@@ -32,6 +29,11 @@ export class GuxListboxMulti {
   }
   onKeydown(event) {
     var _a;
+    if (!hasActiveOption(this.root)) {
+      event.preventDefault();
+      setInitialActiveOption(this.root);
+      return;
+    }
     switch (event.key) {
       case 'Enter':
         event.preventDefault();
@@ -146,7 +148,6 @@ export class GuxListboxMulti {
   updateOnSlotChange() {
     this.setListboxOptions();
     this.updateListboxOptions();
-    setInitialActiveOption(this.root);
   }
   getOptionCreateElement() {
     this.optionCreateElement = this.root.querySelector('gux-create-option');
@@ -161,6 +162,7 @@ export class GuxListboxMulti {
       listboxOption.selected = this.getSelectedValues().includes(listboxOption.value);
       if (this.filterType !== 'custom') {
         listboxOption.filtered = !listboxOption.textContent
+          .trim()
           .toLowerCase()
           .startsWith(this.textInput.toLowerCase());
       }
@@ -419,12 +421,6 @@ export class GuxListboxMulti {
   }
   static get listeners() {
     return [{
-        "name": "focus",
-        "method": "onFocus",
-        "target": undefined,
-        "capture": false,
-        "passive": false
-      }, {
         "name": "blur",
         "method": "onBlur",
         "target": undefined,

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

@@ -31,6 +31,12 @@
   pointer-events: none;
   cursor: default;
 }
+:host:host(:active:not(:disabled)) {
+  font-family: var(--gse-ui-menu-option-label-active-text-fontFamily);
+  font-size: var(--gse-ui-menu-option-label-active-text-fontSize);
+  font-weight: var(--gse-ui-menu-option-label-active-text-fontWeight);
+  line-height: var(--gse-ui-menu-option-label-active-text-lineHeight);
+}
 :host:host(.gux-selected) {
   font-family: var(--gse-ui-menu-option-label-active-text-fontFamily);
   font-size: var(--gse-ui-menu-option-label-active-text-fontSize);
@@ -44,14 +50,15 @@
 :host:host(.gux-active) {
   border-radius: var(--gse-semantic-focusRing-cornerRadius);
   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);
+  outline-offset: -2px;
 }
-:host:host(.gux-hovered:not([disabled])) {
+:host:host(:hover:not([disabled])) {
   background-color: var(--gse-ui-menu-option-hover-backgroundColor);
 }
-:host:host(.gux-hovered:not([disabled])):host(.gux-selected) .gux-checkbox-container > path {
+:host:host(:hover:not([disabled])):host(.gux-selected) .gux-checkbox-container > path {
   fill: var(--gse-ui-menu-option-checkbox-checked-hover-foregroundColor);
 }
-:host:host(.gux-hovered:not([disabled])):host(:not(.gux-selected)) .gux-checkbox-container > path {
+:host:host(:hover:not([disabled])):host(:not(.gux-selected)) .gux-checkbox-container > path {
   fill: var(--gse-ui-menu-option-checkbox-unchecked-hover-foregroundColor);
 }
 :host:host(.gux-filtered) {