genesys-spark-components 3.28.0 → 3.29.0

package/dist/cjs/gux-list.service-59f2b3e7.js

@@ -0,0 +1,51 @@
+'use strict';
+
+function getRootChildren(root) {
+  const slot = root.querySelector('slot');
+  return slot ? slot.assignedElements() : Array.from(root.children);
+}
+function getGuxListFocusableItems(root, validFocusableItems) {
+  return getRootChildren(root).filter(cv => {
+    if (validFocusableItems.includes(cv.tagName.toLowerCase())) {
+      return !cv.disabled;
+    }
+    return false;
+  });
+}
+function getCurrentFocusIndex(root, validFocusableItems) {
+  return getGuxListFocusableItems(root, validFocusableItems).findIndex(cv => cv.matches(':focus-within'));
+}
+function focusMove(root, validFocusableItems, delta) {
+  const currentFocusIndex = getCurrentFocusIndex(root, validFocusableItems);
+  const maxIndex = getGuxListFocusableItems(root, validFocusableItems).length;
+  focusIndex(root, validFocusableItems, (currentFocusIndex + delta) % maxIndex);
+}
+function focusIndex(root, validFocusableItems, focusIndex) {
+  var _a;
+  const items = getGuxListFocusableItems(root, validFocusableItems);
+  while (focusIndex < 0) {
+    focusIndex += items.length;
+  }
+  (_a = items[focusIndex]) === null || _a === void 0 ? void 0 : _a.focus();
+}
+function getLastChildIndex(root, validFocusableItems) {
+  return getGuxListFocusableItems(root, validFocusableItems).length - 1;
+}
+function first(root, validFocusableItems) {
+  focusIndex(root, validFocusableItems, 0);
+}
+function last(root, validFocusableItems) {
+  focusIndex(root, validFocusableItems, getLastChildIndex(root, validFocusableItems));
+}
+function next(root, validFocusableItems) {
+  focusMove(root, validFocusableItems, 1);
+}
+function previous(root, validFocusableItems) {
+  focusMove(root, validFocusableItems, -1);
+}
+
+exports.first = first;
+exports.focusMove = focusMove;
+exports.last = last;
+exports.next = next;
+exports.previous = previous;

package/dist/cjs/gux-listbox-multi.cjs.entry.js

@@ -7,7 +7,7 @@ const guxListbox_service = require('./gux-listbox.service-d394da79.js');
 const index$1 = require('./index-13101536.js');
 const whenEventIsFrom = require('./when-event-is-from-69b5ca13.js');
 const simulateNativeEvent = require('./simulate-native-event-fe3e62da.js');
-const usageTracking = require('./usage-tracking-8a0a56ad.js');
+const usageTracking = require('./usage-tracking-a1b34de9.js');
 require('./get-closest-element-ab4b2eee.js');
 
 const noMatches = "No matches";

package/dist/cjs/gux-loading-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');
 
 /**
  * Below are the max-widths for the loading component.

package/dist/cjs/gux-modal.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 guxModalCss = ":host .gux-modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:var(--gux-zindex-modal, 1);display:flex;align-items:center;justify-content:center;color:#2e394c;background:rgba(32, 41, 55, 0.8)}:host .gux-modal .gux-modal-container{box-shadow:0 8px 24px rgba(32, 41, 55, 0.4);position:relative;box-sizing:border-box;display:flex;flex-direction:column;justify-content:space-between;padding:40px;background:#fdfdfd;border:1px solid #b4bccb;border-radius:4px}:host .gux-modal .gux-modal-container.gux-small{width:416px;max-height:min(368px, 100vh - 2 * 24px)}:host .gux-modal .gux-modal-container.gux-medium{width:672px;max-height:min(640px, 100vh - 2 * 24px)}:host .gux-modal .gux-modal-container.gux-large{width:940px;max-height:min(640px, 100vh - 2 * 24px)}:host .gux-modal .gux-modal-container.gux-dynamic{max-width:calc(100vw - 2 * 24px);max-height:calc(100vh - 2 * 24px)}:host .gux-modal .gux-modal-container.gux-dynamic .gux-modal-content{max-height:none}:host .gux-modal .gux-modal-container .gux-modal-header{padding-bottom:24px;margin:0;font-family:Roboto, sans-serif;font-weight:400;font-weight:300;font-size:24px;line-height:32px}:host .gux-modal .gux-modal-container .gux-modal-content{max-height:432px;margin:0 8px 24px;overflow-y:auto}:host .gux-modal .gux-modal-container .gux-modal-content.gux-no-buttons{margin-bottom:0}:host .gux-modal .gux-modal-container .gux-button-footer{display:flex;justify-content:space-between}:host .gux-modal .gux-modal-container .gux-button-footer .gux-left-align-buttons gux-button{padding-right:5px}:host .gux-modal .gux-modal-container .gux-button-footer .gux-right-align-buttons gux-button{padding-left:5px}@media (max-width: 416px){:host .gux-modal .gux-modal-container.gux-small,:host .gux-modal .gux-modal-container.gux-medium,:host .gux-modal .gux-modal-container.gux-large{width:100%;height:100%}}";
 

package/dist/cjs/gux-month-calendar.cjs.entry.js

@@ -0,0 +1,137 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-262c2e3a.js');
+const index$1 = require('./index-13101536.js');
+const simulateNativeEvent = require('./simulate-native-event-fe3e62da.js');
+const yearMonthValues = require('./year-month-values-080373aa.js');
+require('./get-closest-element-ab4b2eee.js');
+
+const changeYear = "Current year is {currentYear}, Click to change year to {changeYear}";
+const translationResources = {
+	changeYear: changeYear
+};
+
+const guxMonthCalendarCss = ".gux-month-calendar{flex-wrap:wrap;width:255px;border:1px solid #b4bccb;border-radius:4px;box-shadow:0 2px 4px rgba(32, 41, 55, 0.24)}.gux-month-calendar .gux-year-header{position:relative;display:flex;align-items:center;justify-content:space-between;height:16px;padding:16px;color:#fdfdfd;background-color:#2a60c8;border-top-left-radius:3px;border-top-right-radius:3px}.gux-month-calendar .gux-year-header button{color:#fdfdfd;cursor:pointer;background:none;border:none;outline:none}.gux-month-calendar .gux-year-header button:focus{border-radius:4px;outline:none;box-shadow:0 0 0 1px #fdfdfd, 0 0 0 4px #aac9ff}.gux-month-calendar .gux-year-header button.gux-year-change:disabled{cursor:default;opacity:0.5}.gux-month-calendar .gux-year-header button gux-icon{width:16px;height:16px;pointer-events:none}.gux-month-calendar .gux-year-header .gux-year{font-family:Roboto, sans-serif;font-weight:400;font-weight:700}.gux-month-calendar .gux-months{padding:24px;background-color:#fdfdfd}.gux-month-calendar .gux-months button{width:65px;height:50px;margin:2px;text-align:center;cursor:pointer;background:none;border:none;border-radius:4px;outline:none;font-family:Roboto, sans-serif;font-weight:400;font-size:12px;line-height:20px}.gux-month-calendar .gux-months button:focus{outline:none;box-shadow:0 0 0 1px #fdfdfd, 0 0 0 4px #aac9ff}.gux-month-calendar .gux-months button.gux-selected,.gux-month-calendar .gux-months button:hover{color:#fdfdfd;background-color:#2a60c8}.gux-month-calendar .gux-months button:disabled{color:#596373;pointer-events:none;background-color:#fdfdfd}";
+
+const GuxMonthCalendar = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  onValueUpdate(newValue) {
+    const { year } = yearMonthValues.getYearMonthObject(newValue);
+    this.year = year;
+  }
+  /**
+   * Focus a month
+   */
+  // eslint-disable-next-line @typescript-eslint/require-await
+  async guxFocus(iSOYearMonth) {
+    iSOYearMonth = iSOYearMonth || yearMonthValues.getCurrentISOYearMonth();
+    const { year } = yearMonthValues.getYearMonthObject(iSOYearMonth);
+    this.year = year;
+    yearMonthValues.afterRender(() => {
+      const target = this.root.shadowRoot.querySelector(`gux-month-list-item[value="${iSOYearMonth}"]`);
+      console.log({ target });
+      if (target) {
+        target.focus();
+      }
+    });
+  }
+  async componentWillLoad() {
+    this.i18n = await index$1.buildI18nForComponent(this.root, translationResources);
+    this.locale = index$1.getDesiredLocale(this.root);
+    if (this.value) {
+      this.year = yearMonthValues.getYearMonthObject(this.value).year;
+    }
+    else {
+      this.year = yearMonthValues.getYearMonthObject(yearMonthValues.getCurrentISOYearMonth()).year;
+    }
+  }
+  updateValue(value) {
+    this.value = value;
+    simulateNativeEvent.simulateNativeEvent(this.root, 'input');
+    simulateNativeEvent.simulateNativeEvent(this.root, 'change');
+  }
+  isOutOfBounds(value) {
+    return (this.max && this.max < value) || (this.min && this.min > value);
+  }
+  onMonthClick(value) {
+    if (this.isOutOfBounds(value)) {
+      return;
+    }
+    this.updateValue(value);
+  }
+  getMonthAriaLabel(value) {
+    const { year, month } = yearMonthValues.getYearMonthObject(value);
+    return new Date(Number(year), Number(month) - 1).toLocaleDateString(this.locale, { year: 'numeric', month: 'long' });
+  }
+  getYearLabel(year) {
+    return new Date(Number(year), 5).toLocaleDateString(this.locale, {
+      year: 'numeric'
+    });
+  }
+  isSelectedMonth(value) {
+    return value === this.value;
+  }
+  isAriaSelectedMonth(value) {
+    if (this.isSelectedMonth(value)) {
+      return 'true';
+    }
+    return false;
+  }
+  changeYear(increment) {
+    this.year = (parseInt(this.year) + increment).toString();
+  }
+  isPreviousYearLessThanMinYear(year, minISOYearMonth) {
+    return ((parseInt(year) - 1).toString() <
+      (minISOYearMonth && yearMonthValues.getYearMonthObject(minISOYearMonth).year));
+  }
+  isNextYearGreaterThanMaxYear(year, maxISOYearMonth) {
+    return ((parseInt(year) + 1).toString() >
+      (maxISOYearMonth && yearMonthValues.getYearMonthObject(maxISOYearMonth).year));
+  }
+  getMonthShortName(year, month) {
+    return new Date(Number(year), Number(month) - 1).toLocaleDateString(this.locale, { month: 'short' });
+  }
+  doFocusTrap() {
+    if (!this.previousYearElement.disabled) {
+      this.previousYearElement.focus();
+    }
+    if (!this.nextYearElement.disabled) {
+      this.nextYearElement.focus();
+    }
+    this.monthListElement.focus();
+  }
+  renderHeader() {
+    return (index.h("div", { class: "gux-year-header" }, index.h("button", { type: "button", class: "gux-year-change", onClick: () => this.changeYear(-1), disabled: this.isPreviousYearLessThanMinYear(this.year, this.min), ref: (el) => (this.previousYearElement = el) }, index.h("gux-icon", { "icon-name": "chevron-small-left", "screenreader-text": this.i18n('changeYear', {
+        currentYear: parseInt(this.year),
+        changeYear: parseInt(this.year) - 1
+      }) })), index.h("div", { class: "gux-year" }, this.getYearLabel(this.year)), index.h("button", { type: "button", class: "gux-year-change", onClick: () => this.changeYear(1), disabled: this.isNextYearGreaterThanMaxYear(this.year, this.max), ref: (el) => (this.nextYearElement = el) }, index.h("gux-icon", { "icon-name": "chevron-small-right", "screenreader-text": this.i18n('changeYear', {
+        currentYear: parseInt(this.year),
+        changeYear: parseInt(this.year) + 1
+      }) }))));
+  }
+  renderMonths() {
+    const monthButtons = Array.from(new Array(12), (_, i) => String(i + 1).padStart(2, '0')).map(month => {
+      const value = yearMonthValues.getISOYearMonth(this.year, month);
+      return (index.h("gux-month-list-item", { value: value, selected: this.isSelectedMonth(value), "aria-selected": this.isAriaSelectedMonth(value), "aria-label": this.getMonthAriaLabel(value), onClick: () => this.onMonthClick(value), disabled: this.isOutOfBounds(value) }, this.getMonthShortName(this.year, month)));
+    });
+    return (index.h("gux-month-list", { tabIndex: 1, ref: (el) => (this.monthListElement = el) }, monthButtons));
+  }
+  renderTrapFocusEl() {
+    return (index.h("span", { onFocus: () => this.doFocusTrap(), tabindex: "0" }));
+  }
+  render() {
+    return (index.h("div", { class: "gux-month-calendar" }, this.renderHeader(), this.renderMonths(), this.renderTrapFocusEl()));
+  }
+  static get delegatesFocus() { return true; }
+  get root() { return index.getElement(this); }
+  static get watchers() { return {
+    "value": ["onValueUpdate"]
+  }; }
+};
+GuxMonthCalendar.style = guxMonthCalendarCss;
+
+exports.gux_month_calendar = GuxMonthCalendar;

package/dist/cjs/gux-month-list_2.cjs.entry.js

@@ -0,0 +1,89 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-262c2e3a.js');
+const guxList_service = require('./gux-list.service-59f2b3e7.js');
+const getClosestElement = require('./get-closest-element-ab4b2eee.js');
+
+const guxMonthListCss = ":host{display:flex;flex-direction:row;flex-wrap:wrap;padding:12px 16px;background-color:#fdfdfd;border:1px solid #b4bccb}";
+
+const validFocusableItems = ['gux-month-list-item'];
+const GuxMonthList = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  onKeyDown(event) {
+    switch (event.key) {
+      case 'ArrowUp':
+        event.preventDefault();
+        guxList_service.focusMove(this.root, validFocusableItems, -3);
+        break;
+      case 'ArrowDown':
+        event.preventDefault();
+        guxList_service.focusMove(this.root, validFocusableItems, 3);
+        break;
+      case 'ArrowLeft':
+        event.preventDefault();
+        guxList_service.previous(this.root, validFocusableItems);
+        break;
+      case 'ArrowRight':
+        event.preventDefault();
+        guxList_service.next(this.root, validFocusableItems);
+        break;
+      case 'Home':
+        event.preventDefault();
+        guxList_service.first(this.root, validFocusableItems);
+        break;
+      case 'End':
+        event.preventDefault();
+        guxList_service.last(this.root, validFocusableItems);
+        break;
+    }
+  }
+  // eslint-disable-next-line @typescript-eslint/require-await
+  async guxFocusFirstItem() {
+    guxList_service.first(this.root, validFocusableItems);
+  }
+  renderFocusTarget() {
+    return (index.h("span", { tabindex: "1" }));
+  }
+  render() {
+    return (index.h(index.Host, { role: "list" }, this.renderFocusTarget(), index.h("slot", null)));
+  }
+  static get delegatesFocus() { return true; }
+  get root() { return index.getElement(this); }
+};
+GuxMonthList.style = guxMonthListCss;
+
+const guxMonthListItemCss = ":host{flex:0 0 33.3%}:host([disabled]){pointer-events:none}:host([disabled='false']){pointer-events:auto}::slotted(gux-icon){width:16px;height:16px;margin-right:8px;vertical-align:middle}.gux-container{padding:4px}.gux-container button{all:unset;box-sizing:border-box;width:100%;height:49px;padding:8px 0;color:#2e394c;text-align:center;word-wrap:break-word;cursor:pointer;border:none;border-radius:4px;outline:none}.gux-container button.gux-selected{color:#fdfdfd;background:#2a60c8}.gux-container button:focus:not(:disabled){outline:none;box-shadow:0 0 0 1px #fdfdfd, 0 0 0 4px #aac9ff}.gux-container button:hover:not(:disabled){color:#fdfdfd;background:#2a60c8}.gux-container button:active:not(:disabled){color:#fdfdfd;background:#2a60c8}.gux-container button:disabled{color:rgba(46, 57, 76, 0.5);cursor:default}";
+
+const GuxMonthListItem = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.disabled = false;
+    this.selected = false;
+  }
+  onMouseup() {
+    this.focusParentList();
+  }
+  onMouseover() {
+    this.focusParentList();
+  }
+  focusParentList() {
+    const parentList = getClosestElement.getClosestElement('gux-month-list', this.root);
+    if (parentList && parentList.shadowRoot.activeElement === null) {
+      this.root.blur();
+      parentList.focus();
+    }
+  }
+  render() {
+    return (index.h(index.Host, { role: "listitem", value: this.value }, index.h("div", { class: "gux-container" }, index.h("button", { class: { 'gux-selected': this.selected }, type: "button", tabIndex: -1, disabled: this.disabled }, index.h("slot", null)))));
+  }
+  static get delegatesFocus() { return true; }
+  get root() { return index.getElement(this); }
+};
+GuxMonthListItem.style = guxMonthListItemCss;
+
+exports.gux_month_list = GuxMonthList;
+exports.gux_month_list_item = GuxMonthListItem;

package/dist/cjs/gux-month-picker-beta.cjs.entry.js

@@ -0,0 +1,222 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-262c2e3a.js');
+const usageTracking = require('./usage-tracking-a1b34de9.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 yearMonthValues = require('./year-month-values-080373aa.js');
+require('./get-closest-element-ab4b2eee.js');
+
+const toggleCalendar = "Toggle month calendar view";
+const month = "Month";
+const year = "Year";
+const unset = "Unset";
+const translationResources = {
+	toggleCalendar: toggleCalendar,
+	month: month,
+	year: year,
+	unset: unset
+};
+
+const guxMonthPickerCss = ":host{display:inline-block}.gux-target{display:inline-flex;padding:4px 8px 4px 12px;cursor:pointer;background-color:#f6f7f9;border:1px solid #6b7585;border-radius:4px;box-shadow:inset 0 0 4px rgba(32, 41, 55, 0.16)}.gux-target .gux-display{display:inline-flex;min-width:100px;padding-right:8px;color:#2e394c}.gux-target .gux-display .gux-spinner{outline:none}.gux-target .gux-display .gux-spinner:not(:first-child){margin-left:4px}.gux-target .gux-display .gux-spinner:focus{background:#deeaff}.gux-target .gux-display .gux-spinner.gux-empty{color:#596373}.gux-target .gux-popup-toggle{justify-content:right;padding:2px;color:#596373;background:transparent;border:none;border-radius:4px}.gux-target .gux-popup-toggle:focus{outline:none;box-shadow:0 0 0 1px #fdfdfd, 0 0 0 4px #aac9ff}.gux-target .gux-popup-toggle:not(:disabled):focus,.gux-target .gux-popup-toggle:not(:disabled):hover{color:#2e394c;cursor:pointer}.gux-target .gux-popup-toggle gux-icon{width:16px;height:16px}.gux-target .gux-popup-toggle.gux-expanded{color:#2a60c8}.gux-target .gux-popup-toggle.gux-expanded:not(:disabled):focus,.gux-target .gux-popup-toggle.gux-expanded:not(:disabled):hover{color:#2a60c8}";
+
+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;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+    r = Reflect.decorate(decorators, target, key, desc);
+  else
+    for (var i = decorators.length - 1; i >= 0; i--)
+      if (d = decorators[i])
+        r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+const DateTimeFormats = { year: 'numeric', month: 'long' };
+const YearFirstLocales = ['ar', 'he', 'ja', 'ko', 'zh-cn', 'zh-tw'];
+const GuxMonthPicker = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.disabled = false;
+    this.expanded = false;
+  }
+  onKeyDown(event) {
+    switch (event.key) {
+      case 'Escape':
+        this.expanded = false;
+        this.calendarToggleButtonElement.focus();
+        break;
+    }
+  }
+  onValueUpdate(newValue) {
+    if (this.isOutOfBounds(newValue)) {
+      if (this.isBeforeMin(newValue)) {
+        this.value = this.min;
+      }
+      else {
+        this.value = this.max;
+      }
+    }
+    else {
+      this.value = newValue;
+    }
+    simulateNativeEvent.simulateNativeEvent(this.root, 'input');
+    simulateNativeEvent.simulateNativeEvent(this.root, 'change');
+  }
+  onClickOutside() {
+    this.expanded = false;
+  }
+  async componentWillLoad() {
+    usageTracking.trackComponent(this.root);
+    this.i18n = await index$1.buildI18nForComponent(this.root, translationResources);
+    this.locale = index$1.getDesiredLocale(this.root);
+  }
+  isOutOfBounds(value) {
+    return this.isBeforeMin(value) || this.isAfterMax(value);
+  }
+  isBeforeMin(value) {
+    return this.min && this.min > value;
+  }
+  isAfterMax(value) {
+    return this.max && this.max < value;
+  }
+  toggleCalendar() {
+    this.expanded = !this.expanded;
+    if (this.expanded) {
+      yearMonthValues.afterRender(() => {
+        void this.monthCalendarElement.guxFocus(this.value);
+      });
+    }
+  }
+  onMonthCalendarInput() {
+    this.value = this.monthCalendarElement.value;
+    this.expanded = false;
+    this.calendarToggleButtonElement.focus();
+  }
+  incrementMonth(delta) {
+    if (this.value) {
+      const { year: currentYear, month: currentMonth } = yearMonthValues.getYearMonthObject(this.value);
+      const newMonth = (((parseInt(currentMonth) + 11 + delta) % 12) + 1)
+        .toString()
+        .padStart(2, '0');
+      this.value = yearMonthValues.getISOYearMonth(currentYear, newMonth);
+    }
+    else {
+      this.value = yearMonthValues.getCurrentISOYearMonth();
+    }
+  }
+  incrementYear(delta) {
+    if (this.value) {
+      const { year: currentYear, month: currentMonth } = yearMonthValues.getYearMonthObject(this.value);
+      const newYear = Math.max(Number(currentYear) + delta, 0).toString();
+      this.value = yearMonthValues.getISOYearMonth(newYear, currentMonth);
+    }
+    else {
+      this.value = yearMonthValues.getCurrentISOYearMonth();
+    }
+  }
+  onSpinnerKeyDown(event, incrementor, nextFocusElement) {
+    switch (event.key) {
+      case 'ArrowDown':
+        event.preventDefault();
+        incrementor(-1);
+        break;
+      case 'ArrowUp':
+        event.preventDefault();
+        incrementor(1);
+        break;
+      case 'ArrowLeft':
+      case 'ArrowRight':
+        event.preventDefault();
+        nextFocusElement.focus();
+        break;
+      case 'Enter':
+        event.preventDefault();
+        this.expanded = true;
+        yearMonthValues.afterRender(() => {
+          void this.monthCalendarElement.guxFocus(this.value);
+        });
+        break;
+      case ' ':
+        event.preventDefault();
+        break;
+    }
+  }
+  onSpinnerKeyUp(event) {
+    event.stopPropagation();
+    switch (event.key) {
+      case ' ':
+        event.preventDefault();
+        this.expanded = true;
+        yearMonthValues.afterRender(() => {
+          void this.monthCalendarElement.guxFocus(this.value);
+        });
+        break;
+    }
+  }
+  onSpinnerClick() {
+    console.log('onSpinnerClick');
+    this.expanded = true;
+  }
+  getSpinnerLabel(period) {
+    if (this.value) {
+      const { year, month } = yearMonthValues.getYearMonthObject(this.value);
+      return new Date(Number(year), Number(month) - 1).toLocaleDateString(this.locale, { [period]: DateTimeFormats[period] });
+    }
+    return this.i18n(period);
+  }
+  getSpinnerValueNow(period) {
+    return this.value ? yearMonthValues.getYearMonthObject(this.value)[period] : '0';
+  }
+  getSpinnerValueText() {
+    if (this.value) {
+      const { year, month } = yearMonthValues.getYearMonthObject(this.value);
+      return new Date(Number(year), Number(month) - 1).toLocaleDateString(this.locale, { year: 'numeric', month: 'long' });
+    }
+    return this.i18n('unset');
+  }
+  renderMonthSpinnerButton() {
+    return (index.h("div", { role: "spinbutton", class: {
+        'gux-spinner': true,
+        'gux-empty': Boolean(!this.value)
+      }, tabIndex: this.disabled ? -1 : 0, onKeyDown: (e) => this.onSpinnerKeyDown(e, d => this.incrementMonth(d), this.yearSpinnerElement), onKeyUp: (e) => this.onSpinnerKeyUp(e), onClick: () => this.onSpinnerClick(), ref: (el) => (this.monthSpinnerElement = el), "aria-valuenow": this.getSpinnerValueNow('month'), "aria-valuetext": this.getSpinnerValueText(), "aria-valuemin": "1", "aria-valuemax": "12", "aria-label": this.i18n('month') }, this.getSpinnerLabel('month')));
+  }
+  renderYearSpinnerButton() {
+    return (index.h("div", { role: "spinbutton", class: {
+        'gux-spinner': true,
+        'gux-empty': Boolean(!this.value)
+      }, tabIndex: this.disabled ? -1 : 0, onKeyDown: (e) => this.onSpinnerKeyDown(e, d => this.incrementYear(d), this.monthSpinnerElement), onKeyUp: (e) => this.onSpinnerKeyUp(e), onClick: () => this.onSpinnerClick(), ref: (el) => (this.yearSpinnerElement = el), "aria-valuenow": this.getSpinnerValueNow('year'), "aria-valuetext": this.getSpinnerValueText(), "aria-valuemin": "0", "aria-label": this.i18n('year') }, this.getSpinnerLabel('year')));
+  }
+  renderSpinnerButtons() {
+    if (YearFirstLocales.includes(this.locale)) {
+      return (index.h("span", { class: "gux-display" }, this.renderYearSpinnerButton(), this.renderMonthSpinnerButton()));
+    }
+    return (index.h("span", { class: "gux-display" }, this.renderMonthSpinnerButton(), this.renderYearSpinnerButton()));
+  }
+  renderCalendarToggleButton() {
+    return (index.h("button", { class: {
+        'gux-popup-toggle': true,
+        'gux-expanded': this.expanded
+      }, ref: (el) => (this.calendarToggleButtonElement = el), type: "button", onClick: () => this.toggleCalendar(), disabled: this.disabled }, index.h("gux-icon", { "icon-name": "calendar", "screenreader-text": this.i18n('toggleCalendar') })));
+  }
+  renderTarget() {
+    return (index.h("div", { class: "gux-target", slot: "target" }, this.renderSpinnerButtons(), this.renderCalendarToggleButton()));
+  }
+  renderPopup() {
+    return (index.h("gux-month-calendar", { slot: "popup", ref: (el) => (this.monthCalendarElement = el), onInput: () => this.onMonthCalendarInput(), value: this.value, min: this.min, max: this.max }));
+  }
+  render() {
+    return (index.h("gux-popup", { expanded: this.expanded, disabled: this.disabled }, this.renderTarget(), this.renderPopup()));
+  }
+  get root() { return index.getElement(this); }
+  static get watchers() { return {
+    "value": ["onValueUpdate"]
+  }; }
+};
+__decorate([
+  onClickOutside.OnClickOutside({ triggerEvents: 'mousedown' })
+], GuxMonthPicker.prototype, "onClickOutside", null);
+GuxMonthPicker.style = guxMonthPickerCss;
+
+exports.gux_month_picker_beta = GuxMonthPicker;

package/dist/cjs/gux-notification-toast.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 guxNotificationToastCss = ":host{position:relative;display:flex;flex-direction:row;flex-wrap:nowrap;align-content:stretch;align-items:flex-start;justify-content:flex-start;width:294px;padding:16px 8px 16px 16px;margin-bottom:4px;color:#2e394c;background:#f6f7f9;border:1px solid #b4bccb;border-color:#b4bccb;border-radius:4px;box-shadow:0 2px 4px rgba(32, 41, 55, 0.24)}.gux-icon{flex:0 1 auto;align-self:auto;order:0;margin:4px}.gux-icon ::slotted(gux-icon){width:24px !important;height:24px !important}.gux-icon.gux-alert{color:#ea0b0b}.gux-icon.gux-warning{color:#ffae00}.gux-icon.gux-positive{color:#3c8527}.gux-icon.gux-neutral{color:#203b73}.gux-content{display:flex;flex:1 1 auto;flex-direction:column;flex-wrap:nowrap;align-content:stretch;align-items:flex-start;align-self:auto;justify-content:flex-start;order:0}.gux-content .gux-title{flex:1 1 auto;align-self:auto;order:0;max-height:48px;margin:0 12px 0 8px;overflow:hidden;font-size:14px;line-height:20px;color:#2e394c;text-overflow:ellipsis}.gux-content .gux-message{flex:1 1 auto;align-self:auto;order:0;max-height:24px;margin:0 12px 0 8px;overflow:hidden;line-height:24px;text-overflow:ellipsis}";
 

package/dist/cjs/gux-page-loading-spinner.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 guxPageLoadingSpinnerCss = ":host{display:flex}.gux-spinner{margin:auto}";
 

package/dist/cjs/gux-pagination-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 guxPaginationBetaCss = ":host{display:block;border-top:1px solid #e2e6ee}.gux-pagination-container{display:flex;flex-direction:row;flex-wrap:nowrap;align-content:stretch;align-items:center;justify-content:space-between;height:40px;margin:12px 12px 0 12px}.gux-pagination-container .gux-pagination-info{display:flex;flex:1 1 auto;flex-direction:row;flex-wrap:nowrap;align-content:stretch;align-items:center;align-self:auto;justify-content:flex-start;order:0}.gux-pagination-container .gux-pagination-info>*{flex:0 1 auto;align-self:auto;order:0}.gux-pagination-container .gux-pagination-change{flex:1 1 auto;align-self:auto;order:0;margin-left:24px}.gux-pagination-container .gux-pagination-change:first-child{margin-left:0}";
 

package/dist/cjs/gux-pagination-cursor.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-pagination.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 guxPaginationCss = ":host{display:block;border-top:1px solid #e2e6ee}.gux-pagination-container{display:flex;flex-direction:row;flex-wrap:nowrap;align-content:stretch;align-items:center;justify-content:space-between;height:32px;margin-top:12px}.gux-pagination-container .gux-pagination-info{display:flex;flex:1 1 auto;flex-direction:row;flex-wrap:nowrap;align-content:stretch;align-items:center;align-self:auto;justify-content:flex-start;order:0}.gux-pagination-container .gux-pagination-info>*{flex:0 1 auto;align-self:auto;order:0}.gux-pagination-container .gux-pagination-change{flex:1 1 auto;align-self:auto;order:0;margin-left:16px}.gux-pagination-container .gux-pagination-change:first-child{margin-left:0}";
 

package/dist/cjs/gux-panel-frame-legacy.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');
 
 function hasSlot(element, slotName) {
   return Boolean(element.querySelector(`[slot=${slotName}]`));

package/dist/cjs/gux-popover-list.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 onAttributeChange = require('./on-attribute-change-37556263.js');
-const usageTracking = require('./usage-tracking-8a0a56ad.js');
+const usageTracking = require('./usage-tracking-a1b34de9.js');
 const popper = require('./popper-11d5f714.js');
 
 const guxPopoverListCss = ":host{color:#2e394c}.gux-popover-wrapper{z-index:var(--gux-zindex-popover, 2);display:inline-block;padding:8px 0;background-color:#fdfdfd;border:1px solid #b4bccb;border-radius:4px;box-shadow:0 2px 4px rgba(32, 41, 55, 0.24)}.gux-popover-wrapper .gux-arrow,.gux-popover-wrapper .gux-arrow::before{position:absolute;width:10px;height:10px;background:inherit}.gux-popover-wrapper .gux-arrow{visibility:hidden}.gux-popover-wrapper .gux-arrow::before{visibility:visible;content:'';transform:rotate(45deg)}.gux-popover-wrapper[data-popper-placement='bottom'] .gux-arrow,.gux-popover-wrapper[data-popper-placement='bottom-start'] .gux-arrow,.gux-popover-wrapper[data-popper-placement='bottom-end'] .gux-arrow{top:-5px}.gux-popover-wrapper[data-popper-placement='bottom'] .gux-arrow::before,.gux-popover-wrapper[data-popper-placement='bottom-start'] .gux-arrow::before,.gux-popover-wrapper[data-popper-placement='bottom-end'] .gux-arrow::before{border-top:1px solid #b4bccb;border-left:1px solid #b4bccb}.gux-popover-wrapper[data-popper-placement='top'] .gux-arrow,.gux-popover-wrapper[data-popper-placement='top-start'] .gux-arrow,.gux-popover-wrapper[data-popper-placement='top-end'] .gux-arrow{bottom:-5px}.gux-popover-wrapper[data-popper-placement='top'] .gux-arrow::before,.gux-popover-wrapper[data-popper-placement='top-start'] .gux-arrow::before,.gux-popover-wrapper[data-popper-placement='top-end'] .gux-arrow::before{border-right:1px solid #b4bccb;border-bottom:1px solid #b4bccb}.gux-popover-wrapper[data-popper-placement='left'] .gux-arrow,.gux-popover-wrapper[data-popper-placement='left-start'] .gux-arrow,.gux-popover-wrapper[data-popper-placement='left-end'] .gux-arrow{right:-5px}.gux-popover-wrapper[data-popper-placement='left'] .gux-arrow::before,.gux-popover-wrapper[data-popper-placement='left-start'] .gux-arrow::before,.gux-popover-wrapper[data-popper-placement='left-end'] .gux-arrow::before{border-top:1px solid #b4bccb;border-right:1px solid #b4bccb}.gux-popover-wrapper[data-popper-placement='right'] .gux-arrow,.gux-popover-wrapper[data-popper-placement='right-start'] .gux-arrow,.gux-popover-wrapper[data-popper-placement='right-end'] .gux-arrow{left:-5px}.gux-popover-wrapper[data-popper-placement='right'] .gux-arrow::before,.gux-popover-wrapper[data-popper-placement='right-start'] .gux-arrow::before,.gux-popover-wrapper[data-popper-placement='right-end'] .gux-arrow::before{border-bottom:1px solid #b4bccb;border-left:1px solid #b4bccb}";

package/dist/cjs/gux-popover.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 onAttributeChange = require('./on-attribute-change-37556263.js');
-const usageTracking = require('./usage-tracking-8a0a56ad.js');
+const usageTracking = require('./usage-tracking-a1b34de9.js');
 const popper = require('./popper-11d5f714.js');
 
 const guxPopoverCss = ":host{color:#2e394c}.gux-popover-wrapper{z-index:var(--gux-zindex-popover, 2);display:inline-block;padding:16px;background-color:#fdfdfd;border:1px solid #b4bccb;border-radius:4px;box-shadow:0 2px 4px rgba(32, 41, 55, 0.24)}.gux-popover-wrapper .gux-arrow,.gux-popover-wrapper .gux-arrow::before{position:absolute;width:10px;height:10px;background:inherit}.gux-popover-wrapper .gux-arrow{visibility:hidden}.gux-popover-wrapper .gux-arrow::before{visibility:visible;content:'';transform:rotate(45deg)}.gux-popover-wrapper[data-popper-placement='bottom'] .gux-arrow,.gux-popover-wrapper[data-popper-placement='bottom-start'] .gux-arrow,.gux-popover-wrapper[data-popper-placement='bottom-end'] .gux-arrow{top:-5px}.gux-popover-wrapper[data-popper-placement='bottom'] .gux-arrow::before,.gux-popover-wrapper[data-popper-placement='bottom-start'] .gux-arrow::before,.gux-popover-wrapper[data-popper-placement='bottom-end'] .gux-arrow::before{border-top:1px solid #b4bccb;border-left:1px solid #b4bccb}.gux-popover-wrapper[data-popper-placement='top'] .gux-arrow,.gux-popover-wrapper[data-popper-placement='top-start'] .gux-arrow,.gux-popover-wrapper[data-popper-placement='top-end'] .gux-arrow{bottom:-5px}.gux-popover-wrapper[data-popper-placement='top'] .gux-arrow::before,.gux-popover-wrapper[data-popper-placement='top-start'] .gux-arrow::before,.gux-popover-wrapper[data-popper-placement='top-end'] .gux-arrow::before{border-right:1px solid #b4bccb;border-bottom:1px solid #b4bccb}.gux-popover-wrapper[data-popper-placement='left'] .gux-arrow,.gux-popover-wrapper[data-popper-placement='left-start'] .gux-arrow,.gux-popover-wrapper[data-popper-placement='left-end'] .gux-arrow{right:-5px}.gux-popover-wrapper[data-popper-placement='left'] .gux-arrow::before,.gux-popover-wrapper[data-popper-placement='left-start'] .gux-arrow::before,.gux-popover-wrapper[data-popper-placement='left-end'] .gux-arrow::before{border-top:1px solid #b4bccb;border-right:1px solid #b4bccb}.gux-popover-wrapper[data-popper-placement='right'] .gux-arrow,.gux-popover-wrapper[data-popper-placement='right-start'] .gux-arrow,.gux-popover-wrapper[data-popper-placement='right-end'] .gux-arrow{left:-5px}.gux-popover-wrapper[data-popper-placement='right'] .gux-arrow::before,.gux-popover-wrapper[data-popper-placement='right-start'] .gux-arrow::before,.gux-popover-wrapper[data-popper-placement='right-end'] .gux-arrow::before{border-bottom:1px solid #b4bccb;border-left:1px solid #b4bccb}";

package/dist/cjs/gux-radial-loading.cjs.entry.js

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

package/dist/cjs/gux-radial-progress.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 randomHtmlId = require('./random-html-id-b86b61c0.js');
 const clamp = require('./clamp-1bb96117.js');