genesys-spark-components 3.28.0 → 3.29.0

package/dist/cjs/gux-datepicker.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-262c2e3a.js');
-const usageTracking = require('./usage-tracking-8a0a56ad.js');
+const usageTracking = require('./usage-tracking-a1b34de9.js');
 const randomHtmlId = require('./random-html-id-b86b61c0.js');
 const index$1 = require('./index-13101536.js');
 const isoDates = require('./iso-dates-f78ffb80.js');
@@ -143,7 +143,7 @@ function getIntervalRange(format, intervalLetter) {
   return { selectionStart, selectionEnd };
 }
 
-const guxDatepickerCss = ":host{display:block}.gux-datepicker{display:inline-block}.gux-datepicker.gux-disabled{pointer-events:none;cursor:default}.gux-datepicker.gux-disabled .gux-datepicker-field .gux-datepicker-field-input{opacity:0.5}.gux-datepicker .gux-datepicker-field{display:inline-flex;flex-direction:row;flex-wrap:nowrap;align-content:flex-start;align-items:center;justify-content:flex-start}.gux-datepicker .gux-datepicker-field~.gux-datepicker-field{margin-left:20px}.gux-datepicker .gux-datepicker-field .gux-datepicker-field-label{flex:0 1 auto;align-self:auto;order:0;margin-right:8px;font-size:12px;font-weight:bold;line-height:20px}.gux-datepicker .gux-datepicker-field .gux-datepicker-field-input{position:relative;flex:0 1 auto;align-self:auto;order:0;margin:4px 0}.gux-datepicker .gux-datepicker-field .gux-datepicker-field-input .gux-datepicker-field-text-input{box-sizing:border-box;display:flex;flex-direction:row;flex-wrap:nowrap;gap:4px;align-content:stretch;align-items:center;justify-content:center;width:100%;height:32px;padding:4px 8px 4px 8px;font-family:inherit;font-size:12px;line-height:1.6667;color:#2e394c;background-color:#f6f7f9;background-image:none;border:1px solid #6b7585;border-radius:4px;box-shadow:inset 0 0 4px rgba(32, 41, 55, 0.16)}.gux-datepicker .gux-datepicker-field .gux-datepicker-field-input .gux-datepicker-field-text-input input{flex:1 1 auto;align-self:auto;order:0;width:100px;overflow:hidden;color:#2e394c;background-color:#f6f7f9;border:none;outline:none}.gux-datepicker .gux-datepicker-field .gux-datepicker-field-input .gux-datepicker-field-text-input input::placeholder{color:#596373;opacity:1}.gux-datepicker .gux-datepicker-field .gux-datepicker-field-input .gux-datepicker-field-text-input input::-webkit-search-cancel-button,.gux-datepicker .gux-datepicker-field .gux-datepicker-field-input .gux-datepicker-field-text-input input::-webkit-search-results-button,.gux-datepicker .gux-datepicker-field .gux-datepicker-field-input .gux-datepicker-field-text-input input::-webkit-calendar-picker-indicator{display:none;-webkit-appearance:none}.gux-datepicker .gux-datepicker-field .gux-datepicker-field-input .gux-datepicker-field-text-input button{flex:0 1 auto;align-self:auto;order:0;padding:2px;color:#596373;background:transparent;border:none}.gux-datepicker .gux-datepicker-field .gux-datepicker-field-input .gux-datepicker-field-text-input button:not(:disabled):focus,.gux-datepicker .gux-datepicker-field .gux-datepicker-field-input .gux-datepicker-field-text-input button:not(:disabled):hover{color:#2e394c;cursor:pointer}.gux-datepicker .gux-datepicker-field .gux-datepicker-field-input .gux-datepicker-field-text-input button gux-icon{width:16px;height:16px}.gux-datepicker .gux-datepicker-field .gux-datepicker-field-input gux-calendar{z-index:var(--gux-zindex-popup, 1);display:none}.gux-datepicker.gux-active .gux-datepicker-field .gux-datepicker-field-input .gux-datepicker-field-text-input button{color:#2a60c8}.gux-datepicker.gux-active .gux-datepicker-field .gux-datepicker-field-input .gux-datepicker-field-text-input button:not(:disabled):focus,.gux-datepicker.gux-active .gux-datepicker-field .gux-datepicker-field-input .gux-datepicker-field-text-input button:not(:disabled):hover{color:#2a60c8}.gux-datepicker.gux-active .gux-datepicker-field .gux-datepicker-field-input gux-calendar{display:block}.gux-sr-only{position:absolute;top:auto;left:-10000px;width:1px;height:1px;overflow:hidden}";
+const guxDatepickerCss = ":host{display:block}.gux-datepicker{display:inline-block}.gux-datepicker.gux-disabled{pointer-events:none;cursor:default}.gux-datepicker.gux-disabled .gux-datepicker-field .gux-datepicker-field-input{opacity:0.5}.gux-datepicker .gux-datepicker-field{display:inline-flex;flex-direction:row;flex-wrap:nowrap;align-content:flex-start;align-items:center;justify-content:flex-start}.gux-datepicker .gux-datepicker-field~.gux-datepicker-field{margin-left:20px}.gux-datepicker .gux-datepicker-field .gux-datepicker-field-label{flex:0 1 auto;align-self:auto;order:0;margin-right:8px;font-size:12px;font-weight:bold;line-height:20px}.gux-datepicker .gux-datepicker-field .gux-datepicker-field-input{position:relative;flex:0 1 auto;align-self:auto;order:0;margin:4px 0}.gux-datepicker .gux-datepicker-field .gux-datepicker-field-input .gux-datepicker-field-text-input{box-sizing:border-box;display:flex;flex-direction:row;flex-wrap:nowrap;gap:4px;align-content:stretch;align-items:center;justify-content:center;width:100%;height:32px;padding:4px 8px 4px 8px;font-family:inherit;font-size:12px;line-height:1.6667;color:#2e394c;background-color:#f6f7f9;background-image:none;border:1px solid #6b7585;border-radius:4px;box-shadow:inset 0 0 4px rgba(32, 41, 55, 0.16)}.gux-datepicker .gux-datepicker-field .gux-datepicker-field-input .gux-datepicker-field-text-input:focus-within{border-color:#2a60c8;outline:none;box-shadow:0 0 0 1px #fdfdfd, 0 0 0 4px #aac9ff}.gux-datepicker .gux-datepicker-field .gux-datepicker-field-input .gux-datepicker-field-text-input input{flex:1 1 auto;align-self:auto;order:0;width:100px;overflow:hidden;color:#2e394c;background-color:#f6f7f9;border:none;outline:none}.gux-datepicker .gux-datepicker-field .gux-datepicker-field-input .gux-datepicker-field-text-input input::placeholder{color:#596373;opacity:1}.gux-datepicker .gux-datepicker-field .gux-datepicker-field-input .gux-datepicker-field-text-input input::-webkit-search-cancel-button,.gux-datepicker .gux-datepicker-field .gux-datepicker-field-input .gux-datepicker-field-text-input input::-webkit-search-results-button,.gux-datepicker .gux-datepicker-field .gux-datepicker-field-input .gux-datepicker-field-text-input input::-webkit-calendar-picker-indicator{display:none;-webkit-appearance:none}.gux-datepicker .gux-datepicker-field .gux-datepicker-field-input .gux-datepicker-field-text-input button{flex:0 1 auto;align-self:auto;order:0;padding:2px;color:#596373;background:transparent;border:none}.gux-datepicker .gux-datepicker-field .gux-datepicker-field-input .gux-datepicker-field-text-input button:not(:disabled):focus,.gux-datepicker .gux-datepicker-field .gux-datepicker-field-input .gux-datepicker-field-text-input button:not(:disabled):hover{color:#2e394c;cursor:pointer}.gux-datepicker .gux-datepicker-field .gux-datepicker-field-input .gux-datepicker-field-text-input button gux-icon{width:16px;height:16px}.gux-datepicker .gux-datepicker-field .gux-datepicker-field-input gux-calendar{z-index:var(--gux-zindex-popup, 1);display:none}.gux-datepicker.gux-active .gux-datepicker-field .gux-datepicker-field-input .gux-datepicker-field-text-input button{color:#2a60c8}.gux-datepicker.gux-active .gux-datepicker-field .gux-datepicker-field-input .gux-datepicker-field-text-input button:not(:disabled):focus,.gux-datepicker.gux-active .gux-datepicker-field .gux-datepicker-field-input .gux-datepicker-field-text-input button:not(:disabled):hover{color:#2a60c8}.gux-datepicker.gux-active .gux-datepicker-field .gux-datepicker-field-input gux-calendar{display:block}.gux-sr-only{position:absolute;top:auto;left:-10000px;width:1px;height:1px;overflow:hidden}";
 
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -160,13 +160,16 @@ const GuxDatepicker = class {
     index.registerInstance(this, hostRef);
     this.input = index.createEvent(this, "input", 7);
     this.yearFormat = 'yyyy';
-    this.focusingRange = false;
-    this.isSelectingRange = false;
+    /**
+     * Indicates if the user is selecting the range with the mouse.
+     * This prevents other events from processing on the input range.
+     */
+    this.isSelectingRangeWithMouse = false;
     this.lastYear = new Date().getFullYear();
     this.startInputId = randomHtmlId.randomHTMLId('gux-datepicker');
     this.endInputId = randomHtmlId.randomHTMLId('gux-datepicker');
     /**
-     * The datepicker label (can be a single label, or two seperated by a comma if it's a range datepicker)
+     * The datepicker label (can be a single label, or two separated by a comma if it's a range datepicker)
      */
     this.label = '';
     /**
@@ -196,11 +199,14 @@ const GuxDatepicker = class {
     /**
      * The datepicker current value
      */
-    this.formatedValue = '';
+    this.formattedValue = '';
     /**
      * The datepicker current value
      */
-    this.toFormatedValue = '';
+    this.toFormattedValue = '';
+    /**
+     * Uses styling to control visibility of the calendar element
+     */
     this.active = false;
   }
   watchValue() {
@@ -227,7 +233,7 @@ const GuxDatepicker = class {
       this.yearFormat = 'yy';
     }
     this.intervalOrder = getIntervalOrder(newFormat);
-    this.lastIntervalRange = getIntervalRange(this.format, getIntervalLetter(this.format, 0));
+    this.lastIntervalRange = this.initialIntervalRange;
   }
   watchActiveCalendar(active) {
     if (active === true) {
@@ -237,7 +243,7 @@ const GuxDatepicker = class {
     }
   }
   onKeyDown(event) {
-    if (this.isFocusedFieldEvent(event)) {
+    if (this.isInputFieldEvent(event)) {
       this.focusedField = this.getInputFieldFromEvent(event);
       switch (event.key) {
         case 'Enter':
@@ -246,8 +252,7 @@ const GuxDatepicker = class {
           this.active = false;
           break;
         case 'Tab':
-          this.isSelectingRange = true;
-          this.setRange();
+          // Allow default behavior of tabbing to the next element - the calendar toggle button
           break;
         case 'ArrowDown':
           event.preventDefault();
@@ -275,12 +280,14 @@ const GuxDatepicker = class {
         }
         default:
           event.preventDefault();
-          this.setIntervalRange({
-            selectionStart: this.focusedField.selectionStart,
-            selectionEnd: this.focusedField.selectionEnd
-          });
-          this.updateIntervalValue(event);
-          this.setCursorRange();
+          if (!this.isSelectingRangeWithMouse) {
+            this.setIntervalRange({
+              selectionStart: this.focusedField.selectionStart,
+              selectionEnd: this.focusedField.selectionEnd
+            });
+            this.updateIntervalValue(event);
+            this.setCursorRange();
+          }
           break;
       }
     }
@@ -304,23 +311,9 @@ const GuxDatepicker = class {
       }
     }
   }
-  onFocusIn(event) {
-    if (this.isFocusedFieldEvent(event)) {
-      if (!this.isSelectingRange) {
-        this.focusedField = this.getInputFieldFromEvent(event);
-        this.setRange();
-      }
-    }
-  }
-  onFocusOut(event) {
-    const composedPath = event.composedPath();
-    if (!composedPath.includes(this.root)) {
-      this.lastIntervalRange = getIntervalRange(this.format, getIntervalLetter(this.format, 0));
-    }
-  }
   onMouseDown(event) {
-    if (this.isFocusedFieldEvent(event)) {
-      this.isSelectingRange = true;
+    if (this.isInputFieldEvent(event)) {
+      this.isSelectingRangeWithMouse = true;
     }
     const composedPath = event.composedPath();
     const inDatepicker = composedPath.includes(this.datepickerElement);
@@ -329,22 +322,35 @@ const GuxDatepicker = class {
       this.active = inDatepicker;
     }
   }
-  onMouseUp(event) {
-    event.preventDefault();
-    if (this.isSelectingRange && this.isFocusedFieldEvent(event)) {
-      this.focusedField = this.getInputFieldFromEvent(event);
-      this.lastIntervalRange = getIntervalRange(this.format, getIntervalLetter(this.format, this.focusedField.selectionStart));
-      this.setRange();
-    }
-  }
   onClickOutside() {
     this.active = false;
   }
-  isFocusedFieldEvent(event) {
+  /*********  Event Handlers  **********/
+  onInputFocusIn(event) {
+    this.focusedField = this.getInputFieldFromEvent(event);
+    if (!this.isSelectingRangeWithMouse) {
+      // When focusing the input the Safari browser will fight for control of the cursor unless it is done asynchronously
+      setTimeout(() => this.setRange());
+    }
+  }
+  onInputFocusOut() {
+    this.lastIntervalRange = this.initialIntervalRange;
+  }
+  onInputMouseUp(event) {
+    event.preventDefault();
+    this.lastIntervalRange = getIntervalRange(this.format, getIntervalLetter(this.format, this.focusedField.selectionStart));
+    this.setRange();
+    this.isSelectingRangeWithMouse = false;
+  }
+  /********  Other Methods  **********/
+  isInputFieldEvent(event) {
     const composedPath = event.composedPath();
     return (composedPath.includes(this.inputElement) ||
       composedPath.includes(this.toInputElement));
   }
+  get initialIntervalRange() {
+    return getIntervalRange(this.format, getIntervalLetter(this.format, 0));
+  }
   getInputFieldFromEvent(event) {
     const composedPath = event.composedPath();
     return composedPath[0];
@@ -384,9 +390,9 @@ const GuxDatepicker = class {
     ]);
   }
   stringToDate(stringDate) {
-    const formatSeperator = getFormatSeparator(this.format);
-    const formatItems = this.format.toLowerCase().split(formatSeperator);
-    const dateItems = stringDate.split(formatSeperator);
+    const formatSeparator = getFormatSeparator(this.format);
+    const formatItems = this.format.toLowerCase().split(formatSeparator);
+    const dateItems = stringDate.split(formatSeparator);
     const year = parseInt(dateItems[formatItems.indexOf(this.yearFormat)], 10);
     const month = parseInt(dateItems[formatItems.indexOf('mm')], 10) - 1;
     const day = parseInt(dateItems[formatItems.indexOf('dd')], 10);
@@ -404,9 +410,9 @@ const GuxDatepicker = class {
     inputEvent.stopPropagation(); // Don't let both events bubble.
     this.input.emit(this.value);
     this.updateDate();
-    this.inputElement.value = this.formatedValue;
+    this.inputElement.value = this.formattedValue;
     if (this.mode === "range" /* Range */) {
-      this.toInputElement.value = this.toFormatedValue;
+      this.toInputElement.value = this.toFormattedValue;
     }
     if (document.activeElement !== this.inputElement ||
       document.activeElement !== this.toInputElement) {
@@ -430,7 +436,6 @@ const GuxDatepicker = class {
     this.input.emit(this.value);
   }
   setRange() {
-    this.isSelectingRange = false;
     this.setIntervalRange(this.lastIntervalRange);
     this.setCursorRange();
   }
@@ -492,24 +497,29 @@ const GuxDatepicker = class {
     if (this.mode === "range" /* Range */) {
       const [from, to] = isoDates.fromIsoDateRange(this.value);
       const { map: map1, regexp: regexp1 } = this.getMapAndRegexFromField(from);
-      this.formatedValue = this.format.replace(regexp1, match => {
+      this.formattedValue = this.format.replace(regexp1, match => {
         return map1[match];
       });
       const { map: map2, regexp: regexp2 } = this.getMapAndRegexFromField(to);
-      this.toFormatedValue = this.format.replace(regexp2, match => {
+      this.toFormattedValue = this.format.replace(regexp2, match => {
         return map2[match];
       });
     }
     else {
       const dateValue = isoDates.fromIsoDate(this.value);
       const { map: map3, regexp: regexp3 } = this.getMapAndRegexFromField(dateValue);
-      this.formatedValue = this.format.replace(regexp3, match => {
+      this.formattedValue = this.format.replace(regexp3, match => {
         return map3[match];
       });
     }
   }
+  /** Selects a range of the input text based on the intervalRange property. */
   setCursorRange() {
     if (this.intervalRange) {
+      // If the selection is the same as what you are trying to set, setSelectionRange will deselect it.
+      // To prevent this, the line below sets the selection to the full field before setting the range we actually want.
+      this.focusedField.setSelectionRange(0, 100);
+      // Select the range we want
       this.focusedField.setSelectionRange(this.intervalRange.selectionStart, this.intervalRange.selectionEnd);
     }
   }
@@ -582,9 +592,9 @@ const GuxDatepicker = class {
         this.numberOfMonths = 2;
       }
     }
+    this.updateDate();
   }
   componentDidLoad() {
-    this.updateDate();
     this.popperInstance = popper.createPopper(this.datepickerElement, this.calendarElement, {
       modifiers: [
         {
@@ -598,28 +608,30 @@ const GuxDatepicker = class {
     });
   }
   componentDidUpdate() {
-    this.popperInstance.forceUpdate();
+    var _a;
+    (_a = this.popperInstance) === null || _a === void 0 ? void 0 : _a.forceUpdate();
   }
   disconnectedCallback() {
-    this.popperInstance.destroy();
+    var _a;
+    (_a = this.popperInstance) === null || _a === void 0 ? void 0 : _a.destroy();
   }
   renderCalendarToggleButton() {
     return (index.h("button", { class: "gux-calendar-toggle-button", type: "button", onClick: () => this.toggleCalendar(), "aria-expanded": this.active.toString(), "aria-label": this.i18n('toggleCalendar'), disabled: this.disabled }, index.h("gux-icon", { decorative: true, "icon-name": "calendar" })));
   }
   renderCalendar() {
-    return (index.h("gux-calendar", { ref: (el) => (this.calendarElement = el), value: this.value, mode: this.mode, onInput: (event) => this.onCalendarSelect(event), minDate: this.minDate, maxDate: this.maxDate, numberOfMonths: this.numberOfMonths }));
+    return (index.h("gux-calendar", { tabIndex: -1, ref: (el) => (this.calendarElement = el), value: this.value, mode: this.mode, onInput: (event) => this.onCalendarSelect(event), minDate: this.minDate, maxDate: this.maxDate, numberOfMonths: this.numberOfMonths }));
   }
   renderStartDateField() {
     return (index.h("div", { class: "gux-datepicker-field" }, index.h("label", { htmlFor: this.startInputId, class: {
         'gux-datepicker-field-label': true,
         'gux-sr-only': this.mode === "single" /* Single */ && !this.label
-      } }, this.getCalendarLabels()[0]), index.h("div", { class: "gux-datepicker-field-input" }, index.h("div", { class: "gux-datepicker-field-text-input" }, index.h("input", { id: this.startInputId, type: "text", ref: (el) => (this.inputElement = el), value: this.formatedValue, disabled: this.disabled }), this.renderCalendarToggleButton()), this.renderCalendar())));
+      } }, this.getCalendarLabels()[0]), index.h("div", { class: "gux-datepicker-field-input" }, index.h("div", { class: "gux-datepicker-field-text-input" }, index.h("input", { id: this.startInputId, type: "text", onClick: e => this.onInputMouseUp(e), onFocusin: e => this.onInputFocusIn(e), onFocusout: () => this.onInputFocusOut(), ref: (el) => (this.inputElement = el), value: this.formattedValue, disabled: this.disabled }), this.renderCalendarToggleButton()), this.renderCalendar())));
   }
   renderEndDateField() {
     if (this.mode === "single" /* Single */) {
       return null;
     }
-    return (index.h("div", { class: "gux-datepicker-field" }, index.h("label", { htmlFor: this.endInputId, class: "gux-datepicker-field-label" }, this.getCalendarLabels()[1]), index.h("div", { class: "gux-datepicker-field-input" }, index.h("div", { class: "gux-datepicker-field-text-input" }, index.h("input", { id: this.endInputId, type: "text", ref: (el) => (this.toInputElement = el), value: this.toFormatedValue, disabled: this.disabled }), this.renderCalendarToggleButton()))));
+    return (index.h("div", { class: "gux-datepicker-field" }, index.h("label", { htmlFor: this.endInputId, class: "gux-datepicker-field-label" }, this.getCalendarLabels()[1]), index.h("div", { class: "gux-datepicker-field-input" }, index.h("div", { class: "gux-datepicker-field-text-input" }, index.h("input", { id: this.endInputId, type: "text", ref: (el) => (this.toInputElement = el), onMouseUp: e => this.onInputMouseUp(e), onFocusin: e => this.onInputFocusIn(e), onFocusout: () => this.onInputFocusOut(), value: this.toFormattedValue, disabled: this.disabled }), this.renderCalendarToggleButton()))));
   }
   render() {
     return (index.h("div", { class: {

package/dist/cjs/gux-disclosure-button.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-262c2e3a.js');
 const randomHtmlId = require('./random-html-id-b86b61c0.js');
-const usageTracking = require('./usage-tracking-8a0a56ad.js');
+const usageTracking = require('./usage-tracking-a1b34de9.js');
 const index$1 = require('./index-13101536.js');
 require('./get-closest-element-ab4b2eee.js');
 

package/dist/cjs/gux-dismiss-button.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-262c2e3a.js');
-const usageTracking = require('./usage-tracking-8a0a56ad.js');
+const usageTracking = require('./usage-tracking-a1b34de9.js');
 const index$1 = require('./index-13101536.js');
 require('./get-closest-element-ab4b2eee.js');
 

package/dist/cjs/gux-dropdown-legacy.cjs.entry.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-262c2e3a.js');
 const onClickOutside = require('./on-click-outside-0d16a176.js');
 const whenEventIsFrom = require('./when-event-is-from-69b5ca13.js');
-const usageTracking = require('./usage-tracking-8a0a56ad.js');
+const usageTracking = require('./usage-tracking-a1b34de9.js');
 const onMutation = require('./on-mutation-230d7667.js');
 
 const guxDropdownCss = "gux-dropdown-legacy .gux-hidden{display:none}gux-dropdown-legacy div.gux-dropdown{position:relative;margin:4px 0}gux-dropdown-legacy div.gux-dropdown.gux-disabled{pointer-events:none;cursor:default;opacity:0.5}gux-dropdown-legacy div.gux-dropdown .gux-select-field{position:relative;width:100%;height:32px}gux-dropdown-legacy div.gux-dropdown .gux-select-field .gux-filter-suggestion{position:absolute;box-sizing:border-box;width:100%;height:32px;padding:6px 25px 6px 14px;overflow:hidden;font-size:12px;line-height:1.6667;text-overflow:ellipsis;white-space:nowrap;pointer-events:none}gux-dropdown-legacy div.gux-dropdown .gux-select-field .gux-filter-suggestion .gux-filter-text{color:#2e394c}gux-dropdown-legacy div.gux-dropdown .gux-select-field .gux-filter-suggestion .gux-filter-typeahead{color:#596373}gux-dropdown-legacy div.gux-dropdown .gux-select-field gux-input-text-like>div{margin:0}gux-dropdown-legacy div.gux-dropdown .gux-select-field gux-input-text-like input{width:100%;padding-right:25px;font-size:12px;text-overflow:ellipsis;cursor:pointer;background-color:transparent}gux-dropdown-legacy div.gux-dropdown .gux-select-field gux-input-text-like.gux-unclearable button{display:none}gux-dropdown-legacy div.gux-dropdown .gux-select-field button.gux-dropdown-indicator{position:absolute;top:1px;right:3px;bottom:0;display:block;overflow:hidden;pointer-events:none;cursor:pointer;background:none;border:none;outline:none}gux-dropdown-legacy div.gux-dropdown .gux-select-field button.gux-dropdown-indicator gux-icon{width:16px;height:16px;color:#596373}gux-dropdown-legacy div.gux-dropdown .gux-select-field:hover button.gux-dropdown-indicator gux-icon,gux-dropdown-legacy div.gux-dropdown .gux-select-field:focus-within button.gux-dropdown-indicator gux-icon{color:#2e394c}gux-dropdown-legacy div.gux-dropdown .gux-options{position:absolute;z-index:var(--gux-zindex-popup, 1);display:none;width:100%;padding:8px 0;margin-top:2px;overflow-y:auto;color:#2e394c;background:#fdfdfd;border:1px solid #b4bccb;border-radius:4px;box-shadow:0 2px 4px rgba(32, 41, 55, 0.24)}gux-dropdown-legacy div.gux-dropdown .gux-options.gux-opened{display:block}gux-dropdown-legacy div.gux-dropdown .gux-options>gux-option-legacy{position:relative;display:flex;height:32px;padding:0 16px;line-height:32px;cursor:pointer}gux-dropdown-legacy div.gux-dropdown .gux-options>gux-option-legacy>div{position:relative;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}gux-dropdown-legacy div.gux-dropdown .gux-options>gux-option-legacy>div .gux-filter-suggestion{position:absolute}gux-dropdown-legacy div.gux-dropdown .gux-options>gux-option-legacy[disabled]{pointer-events:none;cursor:default;opacity:0.5}gux-dropdown-legacy div.gux-dropdown .gux-options>gux-option-legacy.gux-filtered{display:none}gux-dropdown-legacy div.gux-dropdown .gux-options>gux-option-legacy:not([disabled])[selected]{color:#2e394c;background:#deeaff}gux-dropdown-legacy div.gux-dropdown .gux-options>gux-option-legacy:not([disabled]):hover,gux-dropdown-legacy div.gux-dropdown .gux-options>gux-option-legacy:not([disabled]):focus{color:#fdfdfd;background:#2a60c8}gux-dropdown-legacy div.gux-dropdown.gux-page .gux-select-field{height:48px}gux-dropdown-legacy div.gux-dropdown.gux-page .gux-select-field .gux-filter-suggestion{height:48px;padding:2px 25px 4px 11px;overflow:hidden;line-height:1.6667;white-space:nowrap;font-family:Roboto, sans-serif;font-weight:400;font-weight:300;font-size:24px;line-height:32px}gux-dropdown-legacy div.gux-dropdown.gux-page .gux-select-field gux-input-text-like div.gux-input-container{height:48px}gux-dropdown-legacy div.gux-dropdown.gux-page .gux-select-field gux-input-text-like input{font-family:Roboto, sans-serif;font-weight:400;font-weight:300;font-size:24px;line-height:32px;height:48px;line-height:1.6667;color:transparent;border:none;border-bottom:2px solid transparent;caret-color:#2e394c}gux-dropdown-legacy div.gux-dropdown.gux-page .gux-select-field gux-input-text-like input:focus{border:none;border-bottom:2px solid rgba(117, 168, 255, 0.5);box-shadow:none}gux-dropdown-legacy div.gux-dropdown.gux-page.gux-active .gux-select-field gux-input-text-like input:focus{border-bottom:1px solid #2a60c8}gux-dropdown-legacy div.gux-dropdown.gux-palette .gux-select-field{height:52px}gux-dropdown-legacy div.gux-dropdown.gux-palette .gux-select-field .gux-filter-suggestion{height:52px;padding:9px 25px 4px 11px;overflow:hidden;line-height:1.6667;white-space:nowrap;font-family:Roboto, sans-serif;font-weight:400;font-weight:300;font-size:18px;line-height:24px}gux-dropdown-legacy div.gux-dropdown.gux-palette .gux-select-field gux-input-text-like div.gux-input-container{height:52px}gux-dropdown-legacy div.gux-dropdown.gux-palette .gux-select-field gux-input-text-like input{font-family:Roboto, sans-serif;font-weight:400;font-weight:300;font-size:18px;line-height:24px;height:52px;line-height:1.6667;border:none;border-bottom:2px solid transparent}gux-dropdown-legacy div.gux-dropdown.gux-palette .gux-select-field gux-input-text-like input:focus{border:none;border-bottom:2px solid rgba(117, 168, 255, 0.5);box-shadow:none}gux-dropdown-legacy div.gux-dropdown.gux-palette.gux-active .gux-select-field gux-input-text-like input:focus{border-bottom:1px solid #2a60c8}gux-dropdown-legacy:hover gux-icon,gux-dropdown-legacy:focus gux-icon{color:#2e394c}.gux-dropdown-light-theme div.gux-dropdown .gux-select-field .gux-filter-suggestion{color:#596373}.gux-dropdown-light-theme div.gux-dropdown .gux-select-field gux-input-text-like input{color:transparent;caret-color:#2e394c;border-color:#6b7585}.gux-dropdown-light-theme div.gux-dropdown .gux-select-field button.gux-dropdown-indicator{color:#596373}.gux-dropdown-light-theme div.gux-dropdown.gux-page .gux-select-field .gux-filter-suggestion{color:#8a97ad;background-color:#fdfdfd}.gux-dropdown-light-theme div.gux-dropdown.gux-page .gux-select-field gux-input-text-like input{border-bottom:1px solid #6b7585}.gux-dropdown-light-theme div.gux-dropdown.gux-page.gux-active gux-input-text-like input{border-bottom:1px solid #75a8ff}.gux-dropdown-light-theme div.gux-dropdown.gux-palette .gux-select-field .gux-filter-suggestion{color:#8a97ad;background-color:#fdfdfd}.gux-dropdown-light-theme div.gux-dropdown.gux-palette .gux-select-field gux-input-text-like input{border-bottom:1px solid #6b7585}.gux-dropdown-light-theme div.gux-dropdown.gux-palette.gux-active gux-input-text-like input{border-bottom:1px solid #75a8ff}gux-dropdown-legacy div.gux-dropdown .gux-select-field .gux-filter-suggestion{color:#596373}gux-dropdown-legacy div.gux-dropdown .gux-select-field gux-input-text-like input{color:transparent;caret-color:#2e394c;border-color:#6b7585}gux-dropdown-legacy div.gux-dropdown .gux-select-field button.gux-dropdown-indicator{color:#596373}gux-dropdown-legacy div.gux-dropdown.gux-page .gux-select-field .gux-filter-suggestion{color:#8a97ad;background-color:#fdfdfd}gux-dropdown-legacy div.gux-dropdown.gux-page .gux-select-field gux-input-text-like input{border-bottom:1px solid #6b7585}gux-dropdown-legacy div.gux-dropdown.gux-page.gux-active gux-input-text-like input{border-bottom:1px solid #75a8ff}gux-dropdown-legacy div.gux-dropdown.gux-palette .gux-select-field .gux-filter-suggestion{color:#8a97ad;background-color:#fdfdfd}gux-dropdown-legacy div.gux-dropdown.gux-palette .gux-select-field gux-input-text-like input{border-bottom:1px solid #6b7585}gux-dropdown-legacy div.gux-dropdown.gux-palette.gux-active gux-input-text-like input{border-bottom:1px solid #75a8ff}";

package/dist/cjs/gux-dropdown-multi-beta.cjs.entry.js

@@ -6,7 +6,7 @@ const index = require('./index-262c2e3a.js');
 const onClickOutside = require('./on-click-outside-0d16a176.js');
 const index$1 = require('./index-13101536.js');
 const simulateNativeEvent = require('./simulate-native-event-fe3e62da.js');
-const usageTracking = require('./usage-tracking-8a0a56ad.js');
+const usageTracking = require('./usage-tracking-a1b34de9.js');
 const guxListbox_service = require('./gux-listbox.service-d394da79.js');
 require('./get-closest-element-ab4b2eee.js');
 

package/dist/cjs/gux-dropdown_3.cjs.entry.js

@@ -7,7 +7,7 @@ const onClickOutside = require('./on-click-outside-0d16a176.js');
 const index$1 = require('./index-13101536.js');
 const simulateNativeEvent = require('./simulate-native-event-fe3e62da.js');
 const onInputDisabledStateChange = require('./on-input-disabled-state-change-d66fb86b.js');
-const usageTracking = require('./usage-tracking-8a0a56ad.js');
+const usageTracking = require('./usage-tracking-a1b34de9.js');
 const guxListbox_service = require('./gux-listbox.service-d394da79.js');
 const whenEventIsFrom = require('./when-event-is-from-69b5ca13.js');
 const randomHtmlId = require('./random-html-id-b86b61c0.js');

package/dist/cjs/gux-error-message-beta.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-262c2e3a.js');
-const usageTracking = require('./usage-tracking-8a0a56ad.js');
+const usageTracking = require('./usage-tracking-a1b34de9.js');
 
 const guxErrorMessageBetaCss = ".gux-container{display:flex;flex-direction:row;flex-wrap:nowrap;align-content:stretch;align-items:flex-start;justify-content:flex-start;font-size:11px;color:#2e394c}.gux-container gux-icon{flex:0 1 auto;align-self:auto;order:0;width:16px;height:16px;margin:0 4px;color:#ea0b0b}.gux-container .gux-message{flex:0 1 auto;align-self:auto;order:0}";
 

package/dist/cjs/gux-flyout-menu-beta.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-262c2e3a.js');
-const usageTracking = require('./usage-tracking-8a0a56ad.js');
+const usageTracking = require('./usage-tracking-a1b34de9.js');
 const guxMenu_common = require('./gux-menu.common-6a6c2b85.js');
 const popper = require('./popper-11d5f714.js');
 

package/dist/cjs/gux-form-field-checkbox.cjs.entry.js

@@ -6,7 +6,7 @@ const index = require('./index-262c2e3a.js');
 const onInputDisabledStateChange = require('./on-input-disabled-state-change-d66fb86b.js');
 const onMutation = require('./on-mutation-230d7667.js');
 const preventBrowserValidationStyling = require('./prevent-browser-validation-styling-d21b1a56.js');
-const usageTracking = require('./usage-tracking-8a0a56ad.js');
+const usageTracking = require('./usage-tracking-a1b34de9.js');
 const guxFormField_service = require('./gux-form-field.service-c1cdde0e.js');
 require('./random-html-id-b86b61c0.js');
 require('./log-error-a57681bf.js');

package/dist/cjs/gux-form-field-color.cjs.entry.js

@@ -7,7 +7,7 @@ const onInputDisabledStateChange = require('./on-input-disabled-state-change-d66
 const onMutation = require('./on-mutation-230d7667.js');
 const onAttributeChange = require('./on-attribute-change-37556263.js');
 const preventBrowserValidationStyling = require('./prevent-browser-validation-styling-d21b1a56.js');
-const usageTracking = require('./usage-tracking-8a0a56ad.js');
+const usageTracking = require('./usage-tracking-a1b34de9.js');
 const guxFormFieldLabel = require('./gux-form-field-label-bc36c597.js');
 const guxFormField_service = require('./gux-form-field.service-c1cdde0e.js');
 require('./random-html-id-b86b61c0.js');

package/dist/cjs/gux-form-field-dropdown.cjs.entry.js

@@ -6,7 +6,7 @@ const index = require('./index-262c2e3a.js');
 const onInputDisabledStateChange = require('./on-input-disabled-state-change-d66fb86b.js');
 const onMutation = require('./on-mutation-230d7667.js');
 const onAttributeChange = require('./on-attribute-change-37556263.js');
-const usageTracking = require('./usage-tracking-8a0a56ad.js');
+const usageTracking = require('./usage-tracking-a1b34de9.js');
 const guxFormFieldLabel = require('./gux-form-field-label-bc36c597.js');
 const guxFormField_service = require('./gux-form-field.service-c1cdde0e.js');
 require('./random-html-id-b86b61c0.js');

package/dist/cjs/gux-form-field-input-clear-button.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-262c2e3a.js');
-const usageTracking = require('./usage-tracking-8a0a56ad.js');
+const usageTracking = require('./usage-tracking-a1b34de9.js');
 const index$1 = require('./index-13101536.js');
 require('./get-closest-element-ab4b2eee.js');
 

package/dist/cjs/gux-form-field-legacy.cjs.entry.js

@@ -8,7 +8,7 @@ const randomHtmlId = require('./random-html-id-b86b61c0.js');
 const logError = require('./log-error-a57681bf.js');
 const onAttributeChange = require('./on-attribute-change-37556263.js');
 const preventBrowserValidationStyling = require('./prevent-browser-validation-styling-d21b1a56.js');
-const usageTracking = require('./usage-tracking-8a0a56ad.js');
+const usageTracking = require('./usage-tracking-a1b34de9.js');
 
 const guxFormFieldCss = "gux-form-field-legacy{display:block;color:#2e394c}gux-form-field-legacy .gux-label-and-input-and-error-container{margin:16px 0}gux-form-field-legacy .gux-label-and-input-and-error-container label{font-size:12px;font-weight:bold;line-height:20px}gux-form-field-legacy .gux-label-and-input-and-error-container input,gux-form-field-legacy .gux-label-and-input-and-error-container select{width:100%;font-size:12px}gux-form-field-legacy .gux-label-and-input-and-error-container .gux-input-container input{overflow:hidden;text-overflow:ellipsis}gux-form-field-legacy .gux-label-and-input-and-error-container .gux-input-error .gux-input-container{border-color:#ea0b0b}gux-form-field-legacy .gux-label-and-input-and-error-container .gux-input-error textarea{border-color:#ea0b0b}gux-form-field-legacy .gux-label-and-input-and-error-container .gux-input-error .gux-input-color-main-element{border-color:#ea0b0b}gux-form-field-legacy .gux-label-and-input-and-error-container .gux-input-and-error-container{flex-grow:1}gux-form-field-legacy .gux-label-and-input-and-error-container.gux-beside{display:flex;flex-direction:row}gux-form-field-legacy .gux-label-and-input-and-error-container.gux-beside .gux-label-container{position:relative;top:7px;width:fit-content;min-width:45px;margin-right:8px}gux-form-field-legacy .gux-label-and-input-and-error-container.gux-beside gux-input-range,gux-form-field-legacy .gux-label-and-input-and-error-container.gux-beside gux-input-select,gux-form-field-legacy .gux-label-and-input-and-error-container.gux-beside gux-input-text-like,gux-form-field-legacy .gux-label-and-input-and-error-container.gux-beside gux-input-search{flex:1 1 auto}gux-form-field-legacy .gux-label-and-input-and-error-container.gux-screenreader label{position:absolute;top:auto;left:-10000px;width:1px;height:1px;overflow:hidden}gux-form-field-legacy .gux-required::after{font-size:12px;color:#ea0b0b;content:' *'}gux-form-field-legacy .gux-error{display:none;margin:4px 0}gux-form-field-legacy .gux-error.gux-show{display:block}";
 

package/dist/cjs/gux-form-field-number.cjs.entry.js

@@ -8,7 +8,7 @@ const onInputDisabledStateChange = require('./on-input-disabled-state-change-d66
 const onMutation = require('./on-mutation-230d7667.js');
 const onAttributeChange = require('./on-attribute-change-37556263.js');
 const preventBrowserValidationStyling = require('./prevent-browser-validation-styling-d21b1a56.js');
-const usageTracking = require('./usage-tracking-8a0a56ad.js');
+const usageTracking = require('./usage-tracking-a1b34de9.js');
 const setInputValue = require('./set-input-value-610d7da3.js');
 const simulateNativeEvent = require('./simulate-native-event-fe3e62da.js');
 const guxFormFieldLabel = require('./gux-form-field-label-bc36c597.js');

package/dist/cjs/gux-form-field-radio.cjs.entry.js

@@ -6,7 +6,7 @@ const index = require('./index-262c2e3a.js');
 const onInputDisabledStateChange = require('./on-input-disabled-state-change-d66fb86b.js');
 const onMutation = require('./on-mutation-230d7667.js');
 const preventBrowserValidationStyling = require('./prevent-browser-validation-styling-d21b1a56.js');
-const usageTracking = require('./usage-tracking-8a0a56ad.js');
+const usageTracking = require('./usage-tracking-a1b34de9.js');
 const guxFormField_service = require('./gux-form-field.service-c1cdde0e.js');
 require('./random-html-id-b86b61c0.js');
 require('./log-error-a57681bf.js');

package/dist/cjs/gux-form-field-range.cjs.entry.js

@@ -7,7 +7,7 @@ const onInputDisabledStateChange = require('./on-input-disabled-state-change-d66
 const onMutation = require('./on-mutation-230d7667.js');
 const onAttributeChange = require('./on-attribute-change-37556263.js');
 const preventBrowserValidationStyling = require('./prevent-browser-validation-styling-d21b1a56.js');
-const usageTracking = require('./usage-tracking-8a0a56ad.js');
+const usageTracking = require('./usage-tracking-a1b34de9.js');
 const guxFormFieldLabel = require('./gux-form-field-label-bc36c597.js');
 const guxFormField_service = require('./gux-form-field.service-c1cdde0e.js');
 require('./random-html-id-b86b61c0.js');

package/dist/cjs/gux-form-field-search.cjs.entry.js

@@ -7,7 +7,7 @@ const onInputDisabledStateChange = require('./on-input-disabled-state-change-d66
 const onMutation = require('./on-mutation-230d7667.js');
 const onAttributeChange = require('./on-attribute-change-37556263.js');
 const preventBrowserValidationStyling = require('./prevent-browser-validation-styling-d21b1a56.js');
-const usageTracking = require('./usage-tracking-8a0a56ad.js');
+const usageTracking = require('./usage-tracking-a1b34de9.js');
 const guxFormFieldLabel = require('./gux-form-field-label-bc36c597.js');
 const guxFormField_service = require('./gux-form-field.service-c1cdde0e.js');
 require('./random-html-id-b86b61c0.js');

package/dist/cjs/gux-form-field-select.cjs.entry.js

@@ -7,7 +7,7 @@ const onInputDisabledStateChange = require('./on-input-disabled-state-change-d66
 const onMutation = require('./on-mutation-230d7667.js');
 const onAttributeChange = require('./on-attribute-change-37556263.js');
 const preventBrowserValidationStyling = require('./prevent-browser-validation-styling-d21b1a56.js');
-const usageTracking = require('./usage-tracking-8a0a56ad.js');
+const usageTracking = require('./usage-tracking-a1b34de9.js');
 const guxFormFieldLabel = require('./gux-form-field-label-bc36c597.js');
 const guxFormField_service = require('./gux-form-field.service-c1cdde0e.js');
 require('./random-html-id-b86b61c0.js');

package/dist/cjs/gux-form-field-text-like.cjs.entry.js

@@ -7,7 +7,7 @@ const onInputDisabledStateChange = require('./on-input-disabled-state-change-d66
 const onMutation = require('./on-mutation-230d7667.js');
 const onAttributeChange = require('./on-attribute-change-37556263.js');
 const preventBrowserValidationStyling = require('./prevent-browser-validation-styling-d21b1a56.js');
-const usageTracking = require('./usage-tracking-8a0a56ad.js');
+const usageTracking = require('./usage-tracking-a1b34de9.js');
 const guxFormFieldLabel = require('./gux-form-field-label-bc36c597.js');
 const guxFormField_service = require('./gux-form-field.service-c1cdde0e.js');
 require('./random-html-id-b86b61c0.js');

package/dist/cjs/gux-form-field-textarea.cjs.entry.js

@@ -7,7 +7,7 @@ const onInputDisabledStateChange = require('./on-input-disabled-state-change-d66
 const onMutation = require('./on-mutation-230d7667.js');
 const onAttributeChange = require('./on-attribute-change-37556263.js');
 const preventBrowserValidationStyling = require('./prevent-browser-validation-styling-d21b1a56.js');
-const usageTracking = require('./usage-tracking-8a0a56ad.js');
+const usageTracking = require('./usage-tracking-a1b34de9.js');
 const guxFormFieldLabel = require('./gux-form-field-label-bc36c597.js');
 const guxFormField_service = require('./gux-form-field.service-c1cdde0e.js');
 require('./random-html-id-b86b61c0.js');

package/dist/cjs/gux-icon.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-262c2e3a.js');
-const usageTracking = require('./usage-tracking-8a0a56ad.js');
+const usageTracking = require('./usage-tracking-a1b34de9.js');
 const logError = require('./log-error-a57681bf.js');
 
 const iconNameMap = {

package/dist/cjs/gux-list-item-legacy_2.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-262c2e3a.js');
-const usageTracking = require('./usage-tracking-8a0a56ad.js');
+const usageTracking = require('./usage-tracking-a1b34de9.js');
 
 const guxListItemCss = ":host:focus .gux-list-item,:host:active .gux-list-item,:host:hover:not([disabled]) .gux-list-item{color:#fdfdfd;background:#2a60c8}:host(:focus) .gux-list-item,:host(:active) .gux-list-item,:host(:hover:not([disabled])) .gux-list-item{color:#fdfdfd;background:#2a60c8}:host([disabled]) .gux-list-item{pointer-events:none;cursor:default;opacity:0.5}.gux-list-item{display:flex;height:max-content;padding:0 16px;line-height:32px;word-wrap:break-word;cursor:pointer}.gux-list-item .gux-text{width:100%}";
 

package/dist/cjs/gux-list.cjs.entry.js

@@ -3,55 +3,12 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-262c2e3a.js');
-const usageTracking = require('./usage-tracking-8a0a56ad.js');
-
-const validFocusableItems = ['gux-list-item'];
-function getRootChildren(root) {
-  const slot = root.querySelector('slot');
-  return slot ? slot.assignedElements() : Array.from(root.children);
-}
-function getGuxListFocusableItems(root) {
-  return getRootChildren(root).filter(cv => {
-    if (validFocusableItems.includes(cv.tagName.toLowerCase())) {
-      return !cv.disabled;
-    }
-    return false;
-  });
-}
-function getCurrentFocusIndex(root) {
-  return getGuxListFocusableItems(root).findIndex(cv => cv.matches(':focus-within'));
-}
-function focusMove(root, delta) {
-  const currentFocusIndex = getCurrentFocusIndex(root);
-  const maxIndex = getGuxListFocusableItems(root).length;
-  focusIndex(root, (currentFocusIndex + delta) % maxIndex);
-}
-function focusIndex(root, focusIndex) {
-  var _a;
-  const items = getGuxListFocusableItems(root);
-  while (focusIndex < 0) {
-    focusIndex += items.length;
-  }
-  (_a = items[focusIndex]) === null || _a === void 0 ? void 0 : _a.focus();
-}
-function getLastChildIndex(root) {
-  return getGuxListFocusableItems(root).length - 1;
-}
-function first(root) {
-  focusIndex(root, 0);
-}
-function last(root) {
-  focusIndex(root, getLastChildIndex(root));
-}
-function next(root) {
-  focusMove(root, 1);
-}
-function previous(root) {
-  focusMove(root, -1);
-}
+const guxList_service = require('./gux-list.service-59f2b3e7.js');
+const usageTracking = require('./usage-tracking-a1b34de9.js');
 
 const guxListCss = ":host{display:flex;flex-direction:column;flex-wrap:nowrap;align-content:stretch;align-items:flex-start;justify-content:flex-start}";
 
+const validFocusableItems = ['gux-list-item'];
 const GuxList = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
@@ -63,25 +20,25 @@ const GuxList = class {
     switch (event.key) {
       case 'ArrowUp':
         event.preventDefault();
-        previous(this.root);
+        guxList_service.previous(this.root, validFocusableItems);
         break;
       case 'Home':
         event.preventDefault();
-        first(this.root);
+        guxList_service.first(this.root, validFocusableItems);
         break;
       case 'ArrowDown':
         event.preventDefault();
-        next(this.root);
+        guxList_service.next(this.root, validFocusableItems);
         break;
       case 'End':
         event.preventDefault();
-        last(this.root);
+        guxList_service.last(this.root, validFocusableItems);
         break;
     }
   }
   // eslint-disable-next-line @typescript-eslint/require-await
   async guxFocusFirstItem() {
-    first(this.root);
+    guxList_service.first(this.root, validFocusableItems);
   }
   renderFocusTarget() {
     return (index.h("span", { tabindex: "-1" }));