genesys-spark-components 3.34.2 → 3.34.4

package/dist/collection/components/beta/gux-table/gux-table-select-menu/gux-table-select-menu.js

@@ -1,7 +1,8 @@
 import { h, Host } from '@stencil/core';
+import { afterNextRenderTimeout } from '@utils/dom/after-next-render';
+import { eventIsFrom } from '@utils/dom/event-is-from';
+import { randomHTMLId } from '@utils/dom/random-html-id';
 import { buildI18nForComponent } from '../../../../i18n';
-import { eventIsFrom } from '../../../../utils/dom/event-is-from';
-import { randomHTMLId } from '../../../../utils/dom/random-html-id';
 import tableResources from '../i18n/en.json';
 /**
  * @slot default - Required slot for gux-all-row-select element
@@ -10,16 +11,15 @@ import tableResources from '../i18n/en.json';
 export class GuxTableSelectMenu {
   constructor() {
     this.dropdownOptionsButtonId = randomHTMLId('gux-table-select-menu');
-    this.moveFocusDelay = 100;
     this.hasSelectMenuOptions = false;
     this.dropdownDisabled = false;
     this.popoverHidden = true;
   }
   focusFirstItemInPopupList() {
     const listElement = this.root.querySelector('gux-list');
-    setTimeout(() => {
+    afterNextRenderTimeout(() => {
       void (listElement === null || listElement === void 0 ? void 0 : listElement.guxFocusFirstItem());
-    }, this.moveFocusDelay);
+    });
   }
   async componentWillLoad() {
     this.hasSelectMenuOptions = !!this.root.querySelector('[slot="select-menu-options"]');

package/dist/collection/components/beta/gux-table/gux-table.js

@@ -10,6 +10,7 @@ export class GuxTable {
     this.slotObserver = new MutationObserver(() => forceUpdate(this));
     this.tableId = randomHTMLId('gux-table');
     this.columnsWidths = {};
+    this.tableWidth = this.getElementComputedWidth(this.slottedTable);
     /**
      * Indicates that vertical scroll is presented for table
      */
@@ -39,7 +40,7 @@ export class GuxTable {
      */
     this.objectTable = false;
   }
-  /******************************* Lifcycle Hooks *******************************/
+  /******************************* Lifecycle Hooks *******************************/
   async componentWillLoad() {
     trackComponent(this.root);
     this.i18n = await buildI18nForComponent(this.root, tableResources);
@@ -57,6 +58,7 @@ export class GuxTable {
           this.checkHorizontalScroll();
           this.checkVerticalScroll();
           this.updateScrollState();
+          this.scaleColumnWidths();
         });
       });
     }
@@ -150,7 +152,7 @@ export class GuxTable {
     });
     this.updateSelectAllBoxState();
   }
-  // Update the checked/interminate state of the select all checkbox
+  // Update the checked/indeterminate state of the select all checkbox
   updateSelectAllBoxState() {
     const selectAllCheckbox = this.selectAllCheckbox;
     if (selectAllCheckbox) {
@@ -255,25 +257,56 @@ export class GuxTable {
     const container = this.tableContainer;
     return container ? container.offsetWidth - container.clientWidth : 0;
   }
-  /******************************* Resizeable Columns *******************************/
+  /******************************* Resizable Columns *******************************/
   prepareResizableColumns() {
     const styleElement = document.createElement('style');
     styleElement.id = `${this.tableId}-resizable-styles`;
     document.querySelector('head').appendChild(styleElement);
-    const columns = this.tableColumns;
-    columns.pop();
-    columns.forEach((column) => {
-      this.columnsWidths[column.dataset.columnName] = `${this.getElementComputedWidth(column)}px`;
-    });
+    const columnWidths = this.calculateColumnWidths(this.tableColumns);
+    this.tableWidth = this.getElementComputedWidth(this.slottedTable);
+    columnWidths
+      // Exclude the last column to allow it to fill the remaining space naturally
+      .slice(0, -1)
+      .forEach(c => (this.columnsWidths[c.name] = c.width));
     this.setResizableColumnsStyles();
   }
+  /** Scale column pixel widths equal when a resize is observed */
+  scaleColumnWidths() {
+    if (!this.columnResizeState && this.resizableColumns) {
+      const oldColumnWidths = this.calculateColumnWidths(this.tableColumns);
+      const oldTableWidth = this.tableWidth;
+      const newTableWidth = this.getElementComputedWidth(this.slottedTable);
+      oldColumnWidths
+        .map(col => (Object.assign(Object.assign({}, col), { width: this.calcScaledColWidth(col.width, oldTableWidth, newTableWidth) })))
+        // Exclude the last column to allow it to fill the remaining space naturally
+        .slice(0, -1)
+        .forEach(c => (this.columnsWidths[c.name] = c.width));
+      this.tableWidth = newTableWidth;
+      this.setResizableColumnsStyles();
+    }
+  }
+  calcScaledColWidth(colWidth, oldTableWidth, newTableWidth) {
+    const proposedWidth = Math.round((colWidth / oldTableWidth) * newTableWidth);
+    const minWidth = 1;
+    return Math.max(proposedWidth, minWidth);
+  }
   updateResizeState(event) {
     if (this.columnResizeState) {
+      const minimumWidth = 1;
       const columnName = this.columnResizeState.resizableColumn.dataset.columnName;
-      const columnWidth = this.columnResizeState.resizableColumnInitialWidth +
-        (event.pageX - this.columnResizeState.columnResizeMouseStartX);
-      this.columnsWidths[columnName] = `${columnWidth > 1 ? columnWidth : 1}px`;
+      const delta = event.pageX - this.columnResizeState.columnResizeMouseStartX;
+      const initialWidth = this.columnResizeState.resizableColumnInitialWidth;
+      const proposedWidth = initialWidth + delta;
+      const columnWidth = Math.max(proposedWidth, minimumWidth);
+      const columnWidths = this.calculateColumnWidths(this.tableColumns).map(c => {
+        if (c.name === columnName) {
+          return Object.assign(Object.assign({}, c), { width: columnWidth });
+        }
+        return c;
+      });
+      this.columnsWidths[columnName] = columnWidths.find(c => c.name === columnName).width;
       this.setResizableColumnsStyles();
+      this.tableWidth = this.getElementComputedWidth(this.slottedTable);
     }
     else {
       this.columnResizeHover = false;
@@ -308,7 +341,16 @@ export class GuxTable {
       COL_RESIZE_HANDLE_WIDTH);
   }
   getElementComputedWidth(element) {
-    return parseInt(window.getComputedStyle(element).getPropertyValue('width').split('px')[0], 10);
+    return (element.clientWidth -
+      parseInt(window.getComputedStyle(element).paddingLeft) -
+      parseInt(window.getComputedStyle(element).paddingRight));
+  }
+  /** Calculates column width minus padding in pixels */
+  calculateColumnWidths(columns) {
+    return columns.map(c => ({
+      name: c.dataset.columnName,
+      width: this.getElementComputedWidth(c)
+    }));
   }
   setResizableColumnsStyles() {
     const styleElement = document.getElementById(`${this.tableId}-resizable-styles`);

package/dist/collection/components/beta/gux-time-picker/gux-time-picker.js

@@ -9,15 +9,15 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { h } from '@stencil/core';
+import { OnClickOutside } from '@utils/decorator/on-click-outside';
+import simulateNativeEvent from '@utils/dom/simulate-native-event';
+import { afterNextRenderTimeout } from '@utils/dom/after-next-render';
 import { buildI18nForComponent } from '../../../i18n';
-import translationResources from './i18n/en.json';
-import { OnClickOutside } from '../../../utils/decorator/on-click-outside';
 import { trackComponent } from '../../../usage-tracking';
-import simulateNativeEvent from '../../../utils/dom/simulate-native-event';
+import translationResources from './i18n/en.json';
 import { getHourDisplayValue, getHoursPattern, getLocaleClockType, getMinuteDisplayValue, getMinutesPattern, getTimeDisplayValues, getValidValueHourChange, getValidValueMinuteChange, getValue, incrementHour, incrementMinute, isAm } from './gux-time-picker.service';
 export class GuxTimePickerBeta {
   constructor() {
-    this.moveFocusDelay = 100;
     this.value = '00:00';
     this.interval = 60;
     this.disabled = false;
@@ -62,9 +62,9 @@ export class GuxTimePickerBeta {
     }
   }
   focusFirstItemInPopupList() {
-    setTimeout(() => {
+    afterNextRenderTimeout(() => {
       void this.listElement.guxFocusFirstItem();
-    }, this.moveFocusDelay);
+    });
   }
   toggleDropdown() {
     this.expanded = !this.expanded;

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

@@ -9,14 +9,14 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { h } from '@stencil/core';
+import { OnClickOutside } from '@utils/decorator/on-click-outside';
+import { whenEventIsFrom } from '@utils/dom/when-event-is-from';
+import { afterNextRenderTimeout } from '@utils/dom/after-next-render';
 import { trackComponent } from '../../../usage-tracking';
-import { OnClickOutside } from '../../../utils/decorator/on-click-outside';
-import { whenEventIsFrom } from '../../../utils/dom/when-event-is-from';
 import { buildI18nForComponent } from '../../../i18n';
 import defaultResources from './i18n/en.json';
 export class GuxActionButton {
   constructor() {
-    this.moveFocusDelay = 100;
     /**
      * The component button type
      */
@@ -94,14 +94,14 @@ export class GuxActionButton {
     }
   }
   focusPopupList() {
-    setTimeout(() => {
+    afterNextRenderTimeout(() => {
       this.listElement.focus && this.listElement.focus();
-    }, this.moveFocusDelay);
+    });
   }
   focusFirstItemInPopupList() {
-    setTimeout(() => {
+    afterNextRenderTimeout(() => {
       void this.listElement.guxFocusFirstItem();
-    }, this.moveFocusDelay);
+    });
   }
   onActionClick() {
     if (!this.disabled) {

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

@@ -9,11 +9,12 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { h } from '@stencil/core';
+import { onMutation } from '@utils/dom/on-mutation';
+import { OnClickOutside } from '@utils/decorator/on-click-outside';
+import { afterNextRenderTimeout } from '@utils/dom/after-next-render';
 import { trackComponent } from '../../../usage-tracking';
 import { buildI18nForComponent } from '../../../i18n';
 import advancedDropDownResources from './i18n/en.json';
-import { onMutation } from '../../../utils/dom/on-mutation';
-import { OnClickOutside } from '../../../utils/decorator/on-click-outside';
 export class GuxAdvancedDropdown {
   constructor() {
     /**
@@ -178,7 +179,7 @@ export class GuxAdvancedDropdown {
     }
   }
   changeFocusToSearch() {
-    setTimeout(() => {
+    afterNextRenderTimeout(() => {
       this.searchInput.focus();
     });
   }

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

@@ -9,15 +9,15 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { h } from '@stencil/core';
+import { OnClickOutside } from '@utils/decorator/on-click-outside';
+import { whenEventIsFrom } from '@utils/dom/when-event-is-from';
+import { afterNextRenderTimeout } from '@utils/dom/after-next-render';
 import { trackComponent } from '../../../usage-tracking';
-import { OnClickOutside } from '../../../utils/decorator/on-click-outside';
-import { whenEventIsFrom } from '../../../utils/dom/when-event-is-from';
 /**
  * @slot title - slot for icon and button text
  */
 export class GuxButtonMulti {
   constructor() {
-    this.moveFocusDelay = 100;
     /**
      * Disables the action button.
      */
@@ -89,14 +89,14 @@ export class GuxButtonMulti {
     }
   }
   focusPopupList() {
-    setTimeout(() => {
+    afterNextRenderTimeout(() => {
       this.listElement.focus();
-    }, this.moveFocusDelay);
+    });
   }
   focusFirstItemInPopupList() {
-    setTimeout(() => {
+    afterNextRenderTimeout(() => {
       void this.listElement.guxFocusFirstItem();
-    }, this.moveFocusDelay);
+    });
   }
   onListClick(event) {
     whenEventIsFrom('gux-list-item', event, () => {

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

@@ -1,7 +1,8 @@
 import { h } from '@stencil/core';
+import { afterNextRenderTimeout } from '@utils/dom/after-next-render';
+import { asIsoDateRange, asIsoDate, fromIsoDateRange, fromIsoDate } from '@utils/date/iso-dates';
+import { addClassToElements, removeClassToElements } from '@utils/dom/manipulate-elements-classes';
 import { trackComponent } from '../../../usage-tracking';
-import { asIsoDateRange, asIsoDate, fromIsoDateRange, fromIsoDate } from '../../../utils/date/iso-dates';
-import { addClassToElements, removeClassToElements } from '../../../utils/dom/manipulate-elements-classes';
 import { getDesiredLocale, getStartOfWeek } from '../../../i18n';
 export class GuxCalendar {
   constructor() {
@@ -69,7 +70,7 @@ export class GuxCalendar {
     this.previewValue = new Date(this.previewValue.getFullYear(), this.previewValue.getMonth() + increment, 15, // Don't use the day from the old value, because we'll skip a month on the 31st
     0, 0, 0);
     // Wait for render before focusing preview date
-    setTimeout(() => {
+    afterNextRenderTimeout(() => {
       void this.focusPreviewDate();
     });
   }
@@ -269,7 +270,7 @@ export class GuxCalendar {
         event.preventDefault();
         this.previewValue = new Date(this.previewValue.setDate(this.previewValue.getDate() + 7));
         this.onDateMouseEnter(this.previewValue);
-        setTimeout(() => {
+        afterNextRenderTimeout(() => {
           void this.focusPreviewDate();
         });
         break;
@@ -277,7 +278,7 @@ export class GuxCalendar {
         event.preventDefault();
         this.previewValue = new Date(this.previewValue.setDate(this.previewValue.getDate() - 7));
         this.onDateMouseEnter(this.previewValue);
-        setTimeout(() => {
+        afterNextRenderTimeout(() => {
           void this.focusPreviewDate();
         });
         break;
@@ -285,7 +286,7 @@ export class GuxCalendar {
         event.preventDefault();
         this.previewValue = new Date(this.previewValue.setDate(this.previewValue.getDate() - 1));
         this.onDateMouseEnter(this.previewValue);
-        setTimeout(() => {
+        afterNextRenderTimeout(() => {
           void this.focusPreviewDate();
         });
         break;
@@ -293,7 +294,7 @@ export class GuxCalendar {
         event.preventDefault();
         this.previewValue = new Date(this.previewValue.setDate(this.previewValue.getDate() + 1));
         this.onDateMouseEnter(this.previewValue);
-        setTimeout(() => {
+        afterNextRenderTimeout(() => {
           void this.focusPreviewDate();
         });
         break;

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

@@ -9,14 +9,15 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { h } from '@stencil/core';
+import { createPopper } from '@popperjs/core';
+import { randomHTMLId } from '@utils/dom/random-html-id';
+import { afterNextRenderTimeout } from '@utils/dom/after-next-render';
+import { asIsoDateRange, asIsoDate, fromIsoDateRange, fromIsoDate } from '@utils/date/iso-dates';
+import { OnClickOutside } from '@utils/decorator/on-click-outside';
 import { trackComponent } from '../../../usage-tracking';
-import { randomHTMLId } from '../../../utils/dom/random-html-id';
 import { buildI18nForComponent } from '../../../i18n';
-import { asIsoDateRange, asIsoDate, fromIsoDateRange, fromIsoDate } from '../../../utils/date/iso-dates';
-import { OnClickOutside } from '../../../utils/decorator/on-click-outside';
 import translationResources from './i18n/en.json';
 import { getCalendarLabels, isOutOfBoundsDate, incrementDay, incrementMonth, incrementYear, getFormattedDate, getIntervalLetter, getFormatSeparator, getPreviousIntervalRange, getNextIntervalRange, getIntervalOrder, getIntervalRange } from './gux-datepicker.service';
-import { createPopper } from '@popperjs/core';
 export class GuxDatepicker {
   constructor() {
     this.yearFormat = 'yyyy';
@@ -158,9 +159,9 @@ export class GuxDatepicker {
         case ' ': {
           this.active = false;
           const button = this.root.shadowRoot.querySelector('.gux-calendar-toggle-button');
-          setTimeout(() => {
+          afterNextRenderTimeout(() => {
             button.focus();
-          }, 100);
+          });
           break;
         }
         case 'Tab':
@@ -190,7 +191,7 @@ export class GuxDatepicker {
     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());
+      afterNextRenderTimeout(() => this.setRange());
     }
   }
   onInputFocusOut() {
@@ -386,10 +387,9 @@ export class GuxDatepicker {
   toggleCalendar() {
     this.active = !this.active;
     if (this.active) {
-      // Wait for render before focusing preview date
-      setTimeout(() => {
+      afterNextRenderTimeout(() => {
         void this.calendarElement.focusPreviewDate();
-      }, 100);
+      });
     }
   }
   setIntervalRange(intervalRange) {

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

@@ -9,6 +9,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { h, readTask, writeTask } from '@stencil/core';
+import { afterNextRenderTimeout } from '@utils/dom/after-next-render';
 import { buildI18nForComponent } from '../../../../i18n';
 import { OnMutation } from '../../../../utils/decorator/on-mutation';
 import tabsResources from '../i18n/en.json';
@@ -185,7 +186,7 @@ export class GuxTabList {
         subtree: true
       });
     }
-    setTimeout(() => {
+    afterNextRenderTimeout(() => {
       this.checkForScrollbarHideOrShow();
     }, 500);
   }

package/dist/collection/components/stable/gux-tabs-advanced/gux-tab-advanced/gux-tab-advanced.js

@@ -1,7 +1,8 @@
 import { h, writeTask } from '@stencil/core';
+import { eventIsFrom } from '@utils/dom/event-is-from';
+import { randomHTMLId } from '@utils/dom/random-html-id';
+import { afterNextRenderTimeout } from '@utils/dom/after-next-render';
 import { buildI18nForComponent } from '../../../../i18n';
-import { eventIsFrom } from '../../../../utils/dom/event-is-from';
-import { randomHTMLId } from '../../../../utils/dom/random-html-id';
 import tabsResources from '../i18n/en.json';
 /**
  * @slot default - gux-icon (optional) and text node (required)
@@ -10,7 +11,6 @@ import tabsResources from '../i18n/en.json';
 export class GuxTabAdvanced {
   constructor() {
     this.dropdownOptionsButtonId = randomHTMLId();
-    this.moveFocusDelay = 100;
     this.tabTitle = '';
     this.focusinFromClick = false;
     /**
@@ -49,10 +49,10 @@ export class GuxTabAdvanced {
         if (eventIsFrom('gux-list[slot="dropdown-options"]', event)) {
           event.stopPropagation();
           this.popoverHidden = true;
-          setTimeout(() => {
+          afterNextRenderTimeout(() => {
             var _a;
             (_a = this.tabOptionsButtonElement) === null || _a === void 0 ? void 0 : _a.focus();
-          }, this.moveFocusDelay);
+          });
         }
         break;
     }
@@ -93,9 +93,9 @@ export class GuxTabAdvanced {
   }
   focusFirstItemInPopupList() {
     const listElement = this.root.querySelector('gux-list[slot="dropdown-options"]');
-    setTimeout(() => {
+    afterNextRenderTimeout(() => {
       void (listElement === null || listElement === void 0 ? void 0 : listElement.guxFocusFirstItem());
-    }, this.moveFocusDelay);
+    });
   }
   toggleOptions() {
     this.popoverHidden = !this.popoverHidden;
@@ -103,9 +103,9 @@ export class GuxTabAdvanced {
   onSelectDropdownOption(e) {
     this.popoverHidden = true;
     e.stopPropagation();
-    setTimeout(() => {
+    afterNextRenderTimeout(() => {
       this.tabOptionsButtonElement.focus();
-    }, this.moveFocusDelay);
+    });
   }
   async componentWillLoad() {
     this.i18n = await buildI18nForComponent(this.root, tabsResources, 'gux-tabs-advanced');

package/dist/collection/components/stable/gux-tabs-advanced/gux-tab-advanced-list/gux-tab-advanced-list.js

@@ -10,13 +10,13 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { h, readTask, writeTask } from '@stencil/core';
 import Sortable from 'sortablejs';
-import { OnMutation } from '../../../../utils/decorator/on-mutation';
+import { OnMutation } from '@utils/decorator/on-mutation';
+import { eventIsFrom } from '@utils/dom/event-is-from';
+import { afterNextRenderTimeout } from '@utils/dom/after-next-render';
 import { buildI18nForComponent } from '../../../../i18n';
-import { eventIsFrom } from '../../../../utils/dom/event-is-from';
 import tabsResources from '../i18n/en.json';
 export class GuxTabAdvancedList {
   constructor() {
-    this.moveFocusDelay = 100;
     /**
      * Enable new tab button
      */
@@ -166,9 +166,9 @@ export class GuxTabAdvancedList {
           }
         });
         this.focusTab(this.initialSortIndex);
-        setTimeout(() => {
+        afterNextRenderTimeout(() => {
           this.focusTab(this.initialSortIndex);
-        }, this.moveFocusDelay);
+        });
         break;
       case 'Enter':
         if (this.keyboardSort) {
@@ -390,7 +390,7 @@ export class GuxTabAdvancedList {
         subtree: true
       });
     }
-    setTimeout(() => {
+    afterNextRenderTimeout(() => {
       this.checkForScrollbarHideOrShow();
     }, 500);
   }

package/dist/collection/utils/dom/after-next-render.js

@@ -1,3 +1,6 @@
 export function afterNextRender(callback) {
   requestAnimationFrame(() => requestAnimationFrame(callback));
 }
+export function afterNextRenderTimeout(callback, delay = 100) {
+  return setTimeout(callback, delay);
+}

package/dist/deploy-info.json

@@ -1,9 +1,9 @@
 {
   "name": "spark-components",
-  "version": "3.34.1",
+  "version": "3.34.3",
   "ecosystem": "pc",
   "team": "Core UI",
   "indexFiles": [],
-  "build": "211",
-  "buildDate": "2022-10-05T16:42:15.662298Z"
+  "build": "215",
+  "buildDate": "2022-10-06T09:11:57.913828Z"
 }

package/dist/esm/{DateTimeFormatter-bac9ad67.js → DateTimeFormatter-9021bd61.js}

@@ -1,4 +1,4 @@
-import { l as locales } from './index-3e21de1b.js';
+import { l as locales } from './index-a108e8ae.js';
 
 /**
  * @class A class that implements the method needed to format dates and times depending on locales

package/dist/esm/after-next-render-ed0f7dcd.js

@@ -0,0 +1,8 @@
+function afterNextRender(callback) {
+  requestAnimationFrame(() => requestAnimationFrame(callback));
+}
+function afterNextRenderTimeout(callback, delay = 100) {
+  return setTimeout(callback, delay);
+}
+
+export { afterNextRenderTimeout as a, afterNextRender as b };

package/dist/esm/genesys-webcomponents.js

@@ -1,7 +1,7 @@
-import { p as promiseResolve, b as bootstrapLazy } from './index-738480cf.js';
+import { p as promiseResolve, b as bootstrapLazy } from './index-be334191.js';
 
 /*
- Stencil Client Patch Browser v2.18.0 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Browser v2.18.1 | MIT Licensed | https://stenciljs.com
  */
 const patchBrowser = () => {
     const importMeta = import.meta.url;

package/dist/esm/gux-accordion-legacy.entry.js

@@ -1,5 +1,5 @@
-import { r as registerInstance, h, g as getElement } from './index-738480cf.js';
-import { t as trackComponent } from './usage-tracking-5e1ba7f7.js';
+import { r as registerInstance, h, g as getElement } from './index-be334191.js';
+import { t as trackComponent } from './usage-tracking-f659944d.js';
 
 function getSectionByName(slotName, sections) {
   return sections.find(section => section.slotName === slotName);

package/dist/esm/gux-accordion-section.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-738480cf.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-be334191.js';
 import { r as randomHTMLId } from './random-html-id-8e3f658c.js';
 import { l as logError } from './log-error-b1a1a086.js';
 

package/dist/esm/gux-accordion.entry.js

@@ -1,5 +1,5 @@
-import { r as registerInstance, h, g as getElement } from './index-738480cf.js';
-import { t as trackComponent } from './usage-tracking-5e1ba7f7.js';
+import { r as registerInstance, h, g as getElement } from './index-be334191.js';
+import { t as trackComponent } from './usage-tracking-f659944d.js';
 
 const guxAccordionCss = "gux-accordion{-custom-noop:noop}";
 

package/dist/esm/gux-action-button-legacy.entry.js

@@ -1,7 +1,7 @@
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-738480cf.js';
-import { t as trackComponent } from './usage-tracking-5e1ba7f7.js';
-import { O as OnClickOutside } from './on-click-outside-b20ff612.js';
-import { b as buildI18nForComponent } from './index-3e21de1b.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-be334191.js';
+import { t as trackComponent } from './usage-tracking-f659944d.js';
+import { O as OnClickOutside } from './on-click-outside-d48a73bb.js';
+import { b as buildI18nForComponent } from './index-a108e8ae.js';
 import './get-closest-element-1597503c.js';
 
 const actionButtonDropdown = "Dropdown for {buttonTitle}";

package/dist/esm/gux-action-button.entry.js

@@ -1,8 +1,9 @@
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-738480cf.js';
-import { t as trackComponent } from './usage-tracking-5e1ba7f7.js';
-import { O as OnClickOutside } from './on-click-outside-b20ff612.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-be334191.js';
+import { O as OnClickOutside } from './on-click-outside-d48a73bb.js';
 import { w as whenEventIsFrom } from './when-event-is-from-18667084.js';
-import { b as buildI18nForComponent } from './index-3e21de1b.js';
+import { a as afterNextRenderTimeout } from './after-next-render-ed0f7dcd.js';
+import { t as trackComponent } from './usage-tracking-f659944d.js';
+import { b as buildI18nForComponent } from './index-a108e8ae.js';
 import './get-closest-element-1597503c.js';
 
 const actionButtonDropdown = "Dropdown for {buttonTitle}";
@@ -28,7 +29,6 @@ const GuxActionButton = class {
     this.open = createEvent(this, "open", 7);
     this.close = createEvent(this, "close", 7);
     this.actionClick = createEvent(this, "actionClick", 7);
-    this.moveFocusDelay = 100;
     /**
      * The component button type
      */
@@ -106,14 +106,14 @@ const GuxActionButton = class {
     }
   }
   focusPopupList() {
-    setTimeout(() => {
+    afterNextRenderTimeout(() => {
       this.listElement.focus && this.listElement.focus();
-    }, this.moveFocusDelay);
+    });
   }
   focusFirstItemInPopupList() {
-    setTimeout(() => {
+    afterNextRenderTimeout(() => {
       void this.listElement.guxFocusFirstItem();
-    }, this.moveFocusDelay);
+    });
   }
   onActionClick() {
     if (!this.disabled) {

package/dist/esm/gux-action-item.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-738480cf.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-be334191.js';
 
 const guxActionItemCss = ":host{outline:none}.gux-action-item{display:flex;width:100%;height:max-content;padding:0 16px;font-family:inherit;font-size:inherit;line-height:32px;text-align:left;word-wrap:break-word;cursor:pointer;background-color:inherit;border:none}.gux-action-item:focus-within:not([disabled]),.gux-action-item:active:not([disabled]),.gux-action-item:hover:not([disabled]){color:#fdfdfd;background:#2a60c8;outline:none}.gux-action-item .gux-text{width:100%}.gux-action-item.gux-disabled{pointer-events:none;cursor:default}";
 

package/dist/esm/gux-action-list-divider.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-738480cf.js';
+import { r as registerInstance, h, H as Host } from './index-be334191.js';
 
 const guxActionListDividerCss = ":host{position:relative;display:flex;height:1px;padding:0;margin:16px 0;line-height:32px;pointer-events:none;cursor:pointer;background-color:#c8cfda}";