genesys-spark-components 3.28.0 → 3.29.0

package/dist/esm/gux-list.service-66b8540f.js

@@ -0,0 +1,45 @@
+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);
+}
+
+export { focusMove as a, first as f, last as l, next as n, previous as p };

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

@@ -3,7 +3,7 @@ import { s as setInitialActiveOption, c as clearActiveOptions, a as setLastOptio
 import { b as buildI18nForComponent } from './index-b8a25b60.js';
 import { w as whenEventIsFrom } from './when-event-is-from-18667084.js';
 import { s as simulateNativeEvent } from './simulate-native-event-ac69961f.js';
-import { t as trackComponent } from './usage-tracking-3d95bf43.js';
+import { t as trackComponent } from './usage-tracking-3a58b2cb.js';
 import './get-closest-element-1597503c.js';
 
 const noMatches = "No matches";

package/dist/esm/gux-loading-message-beta.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, d as readTask, h, g as getElement } from './index-74e605ae.js';
-import { t as trackComponent } from './usage-tracking-3d95bf43.js';
+import { t as trackComponent } from './usage-tracking-3a58b2cb.js';
 
 /**
  * Below are the max-widths for the loading component.

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

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-74e605ae.js';
-import { t as trackComponent } from './usage-tracking-3d95bf43.js';
+import { t as trackComponent } from './usage-tracking-3a58b2cb.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/esm/gux-month-calendar.entry.js

@@ -0,0 +1,133 @@
+import { r as registerInstance, h, g as getElement } from './index-74e605ae.js';
+import { b as buildI18nForComponent, g as getDesiredLocale } from './index-b8a25b60.js';
+import { s as simulateNativeEvent } from './simulate-native-event-ac69961f.js';
+import { g as getYearMonthObject, c as getCurrentISOYearMonth, a as afterRender, b as getISOYearMonth } from './year-month-values-8f78277c.js';
+import './get-closest-element-1597503c.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) {
+    registerInstance(this, hostRef);
+  }
+  onValueUpdate(newValue) {
+    const { year } = getYearMonthObject(newValue);
+    this.year = year;
+  }
+  /**
+   * Focus a month
+   */
+  // eslint-disable-next-line @typescript-eslint/require-await
+  async guxFocus(iSOYearMonth) {
+    iSOYearMonth = iSOYearMonth || getCurrentISOYearMonth();
+    const { year } = getYearMonthObject(iSOYearMonth);
+    this.year = year;
+    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 buildI18nForComponent(this.root, translationResources);
+    this.locale = getDesiredLocale(this.root);
+    if (this.value) {
+      this.year = getYearMonthObject(this.value).year;
+    }
+    else {
+      this.year = getYearMonthObject(getCurrentISOYearMonth()).year;
+    }
+  }
+  updateValue(value) {
+    this.value = value;
+    simulateNativeEvent(this.root, 'input');
+    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 } = 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 && getYearMonthObject(minISOYearMonth).year));
+  }
+  isNextYearGreaterThanMaxYear(year, maxISOYearMonth) {
+    return ((parseInt(year) + 1).toString() >
+      (maxISOYearMonth && 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 (h("div", { class: "gux-year-header" }, h("button", { type: "button", class: "gux-year-change", onClick: () => this.changeYear(-1), disabled: this.isPreviousYearLessThanMinYear(this.year, this.min), ref: (el) => (this.previousYearElement = el) }, h("gux-icon", { "icon-name": "chevron-small-left", "screenreader-text": this.i18n('changeYear', {
+        currentYear: parseInt(this.year),
+        changeYear: parseInt(this.year) - 1
+      }) })), h("div", { class: "gux-year" }, this.getYearLabel(this.year)), h("button", { type: "button", class: "gux-year-change", onClick: () => this.changeYear(1), disabled: this.isNextYearGreaterThanMaxYear(this.year, this.max), ref: (el) => (this.nextYearElement = el) }, 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 = getISOYearMonth(this.year, month);
+      return (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 (h("gux-month-list", { tabIndex: 1, ref: (el) => (this.monthListElement = el) }, monthButtons));
+  }
+  renderTrapFocusEl() {
+    return (h("span", { onFocus: () => this.doFocusTrap(), tabindex: "0" }));
+  }
+  render() {
+    return (h("div", { class: "gux-month-calendar" }, this.renderHeader(), this.renderMonths(), this.renderTrapFocusEl()));
+  }
+  static get delegatesFocus() { return true; }
+  get root() { return getElement(this); }
+  static get watchers() { return {
+    "value": ["onValueUpdate"]
+  }; }
+};
+GuxMonthCalendar.style = guxMonthCalendarCss;
+
+export { GuxMonthCalendar as gux_month_calendar };

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

@@ -0,0 +1,84 @@
+import { r as registerInstance, h, H as Host, g as getElement } from './index-74e605ae.js';
+import { l as last, f as first, n as next, p as previous, a as focusMove } from './gux-list.service-66b8540f.js';
+import { g as getClosestElement } from './get-closest-element-1597503c.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) {
+    registerInstance(this, hostRef);
+  }
+  onKeyDown(event) {
+    switch (event.key) {
+      case 'ArrowUp':
+        event.preventDefault();
+        focusMove(this.root, validFocusableItems, -3);
+        break;
+      case 'ArrowDown':
+        event.preventDefault();
+        focusMove(this.root, validFocusableItems, 3);
+        break;
+      case 'ArrowLeft':
+        event.preventDefault();
+        previous(this.root, validFocusableItems);
+        break;
+      case 'ArrowRight':
+        event.preventDefault();
+        next(this.root, validFocusableItems);
+        break;
+      case 'Home':
+        event.preventDefault();
+        first(this.root, validFocusableItems);
+        break;
+      case 'End':
+        event.preventDefault();
+        last(this.root, validFocusableItems);
+        break;
+    }
+  }
+  // eslint-disable-next-line @typescript-eslint/require-await
+  async guxFocusFirstItem() {
+    first(this.root, validFocusableItems);
+  }
+  renderFocusTarget() {
+    return (h("span", { tabindex: "1" }));
+  }
+  render() {
+    return (h(Host, { role: "list" }, this.renderFocusTarget(), h("slot", null)));
+  }
+  static get delegatesFocus() { return true; }
+  get root() { return 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) {
+    registerInstance(this, hostRef);
+    this.disabled = false;
+    this.selected = false;
+  }
+  onMouseup() {
+    this.focusParentList();
+  }
+  onMouseover() {
+    this.focusParentList();
+  }
+  focusParentList() {
+    const parentList = getClosestElement('gux-month-list', this.root);
+    if (parentList && parentList.shadowRoot.activeElement === null) {
+      this.root.blur();
+      parentList.focus();
+    }
+  }
+  render() {
+    return (h(Host, { role: "listitem", value: this.value }, h("div", { class: "gux-container" }, h("button", { class: { 'gux-selected': this.selected }, type: "button", tabIndex: -1, disabled: this.disabled }, h("slot", null)))));
+  }
+  static get delegatesFocus() { return true; }
+  get root() { return getElement(this); }
+};
+GuxMonthListItem.style = guxMonthListItemCss;
+
+export { GuxMonthList as gux_month_list, GuxMonthListItem as gux_month_list_item };

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

@@ -0,0 +1,218 @@
+import { r as registerInstance, h, g as getElement } from './index-74e605ae.js';
+import { t as trackComponent } from './usage-tracking-3a58b2cb.js';
+import { O as OnClickOutside } from './on-click-outside-36dcc9e4.js';
+import { b as buildI18nForComponent, g as getDesiredLocale } from './index-b8a25b60.js';
+import { s as simulateNativeEvent } from './simulate-native-event-ac69961f.js';
+import { a as afterRender, g as getYearMonthObject, b as getISOYearMonth, c as getCurrentISOYearMonth } from './year-month-values-8f78277c.js';
+import './get-closest-element-1597503c.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) {
+    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(this.root, 'input');
+    simulateNativeEvent(this.root, 'change');
+  }
+  onClickOutside() {
+    this.expanded = false;
+  }
+  async componentWillLoad() {
+    trackComponent(this.root);
+    this.i18n = await buildI18nForComponent(this.root, translationResources);
+    this.locale = 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) {
+      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 } = getYearMonthObject(this.value);
+      const newMonth = (((parseInt(currentMonth) + 11 + delta) % 12) + 1)
+        .toString()
+        .padStart(2, '0');
+      this.value = getISOYearMonth(currentYear, newMonth);
+    }
+    else {
+      this.value = getCurrentISOYearMonth();
+    }
+  }
+  incrementYear(delta) {
+    if (this.value) {
+      const { year: currentYear, month: currentMonth } = getYearMonthObject(this.value);
+      const newYear = Math.max(Number(currentYear) + delta, 0).toString();
+      this.value = getISOYearMonth(newYear, currentMonth);
+    }
+    else {
+      this.value = 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;
+        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;
+        afterRender(() => {
+          void this.monthCalendarElement.guxFocus(this.value);
+        });
+        break;
+    }
+  }
+  onSpinnerClick() {
+    console.log('onSpinnerClick');
+    this.expanded = true;
+  }
+  getSpinnerLabel(period) {
+    if (this.value) {
+      const { year, month } = 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 ? getYearMonthObject(this.value)[period] : '0';
+  }
+  getSpinnerValueText() {
+    if (this.value) {
+      const { year, month } = getYearMonthObject(this.value);
+      return new Date(Number(year), Number(month) - 1).toLocaleDateString(this.locale, { year: 'numeric', month: 'long' });
+    }
+    return this.i18n('unset');
+  }
+  renderMonthSpinnerButton() {
+    return (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 (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 (h("span", { class: "gux-display" }, this.renderYearSpinnerButton(), this.renderMonthSpinnerButton()));
+    }
+    return (h("span", { class: "gux-display" }, this.renderMonthSpinnerButton(), this.renderYearSpinnerButton()));
+  }
+  renderCalendarToggleButton() {
+    return (h("button", { class: {
+        'gux-popup-toggle': true,
+        'gux-expanded': this.expanded
+      }, ref: (el) => (this.calendarToggleButtonElement = el), type: "button", onClick: () => this.toggleCalendar(), disabled: this.disabled }, h("gux-icon", { "icon-name": "calendar", "screenreader-text": this.i18n('toggleCalendar') })));
+  }
+  renderTarget() {
+    return (h("div", { class: "gux-target", slot: "target" }, this.renderSpinnerButtons(), this.renderCalendarToggleButton()));
+  }
+  renderPopup() {
+    return (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 (h("gux-popup", { expanded: this.expanded, disabled: this.disabled }, this.renderTarget(), this.renderPopup()));
+  }
+  get root() { return getElement(this); }
+  static get watchers() { return {
+    "value": ["onValueUpdate"]
+  }; }
+};
+__decorate([
+  OnClickOutside({ triggerEvents: 'mousedown' })
+], GuxMonthPicker.prototype, "onClickOutside", null);
+GuxMonthPicker.style = guxMonthPickerCss;
+
+export { GuxMonthPicker as gux_month_picker_beta };

package/dist/esm/gux-notification-toast.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-74e605ae.js';
-import { t as trackComponent } from './usage-tracking-3d95bf43.js';
+import { t as trackComponent } from './usage-tracking-3a58b2cb.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/esm/gux-page-loading-spinner.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, g as getElement } from './index-74e605ae.js';
-import { t as trackComponent } from './usage-tracking-3d95bf43.js';
+import { t as trackComponent } from './usage-tracking-3a58b2cb.js';
 
 const guxPageLoadingSpinnerCss = ":host{display:flex}.gux-spinner{margin:auto}";
 

package/dist/esm/gux-pagination-beta.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, d as readTask, h, g as getElement } from './index-74e605ae.js';
-import { t as trackComponent } from './usage-tracking-3d95bf43.js';
+import { t as trackComponent } from './usage-tracking-3a58b2cb.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/esm/gux-pagination-cursor.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-74e605ae.js';
-import { t as trackComponent } from './usage-tracking-3d95bf43.js';
+import { t as trackComponent } from './usage-tracking-3a58b2cb.js';
 import { b as buildI18nForComponent } from './index-b8a25b60.js';
 import './get-closest-element-1597503c.js';
 

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

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-74e605ae.js';
-import { t as trackComponent } from './usage-tracking-3d95bf43.js';
+import { t as trackComponent } from './usage-tracking-3a58b2cb.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/esm/gux-panel-frame-legacy.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, g as getElement } from './index-74e605ae.js';
-import { t as trackComponent } from './usage-tracking-3d95bf43.js';
+import { t as trackComponent } from './usage-tracking-3a58b2cb.js';
 
 function hasSlot(element, slotName) {
   return Boolean(element.querySelector(`[slot=${slotName}]`));

package/dist/esm/gux-popover-list.entry.js

@@ -1,7 +1,7 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-74e605ae.js';
 import { O as OnClickOutside } from './on-click-outside-36dcc9e4.js';
 import { b as onHiddenChange } from './on-attribute-change-2b01c315.js';
-import { t as trackComponent } from './usage-tracking-3d95bf43.js';
+import { t as trackComponent } from './usage-tracking-3a58b2cb.js';
 import { c as createPopper } from './popper-f860750c.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/esm/gux-popover.entry.js

@@ -1,7 +1,7 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-74e605ae.js';
 import { O as OnClickOutside } from './on-click-outside-36dcc9e4.js';
 import { b as onHiddenChange } from './on-attribute-change-2b01c315.js';
-import { t as trackComponent } from './usage-tracking-3d95bf43.js';
+import { t as trackComponent } from './usage-tracking-3a58b2cb.js';
 import { c as createPopper } from './popper-f860750c.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/esm/gux-radial-loading.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, h, g as getElement } from './index-74e605ae.js';
 import { b as buildI18nForComponent } from './index-b8a25b60.js';
-import { t as trackComponent } from './usage-tracking-3d95bf43.js';
+import { t as trackComponent } from './usage-tracking-3a58b2cb.js';
 import './get-closest-element-1597503c.js';
 
 const loading = "Loading";

package/dist/esm/gux-radial-progress.entry.js

@@ -1,5 +1,5 @@
 import { h, r as registerInstance, g as getElement } from './index-74e605ae.js';
-import { t as trackComponent } from './usage-tracking-3d95bf43.js';
+import { t as trackComponent } from './usage-tracking-3a58b2cb.js';
 import { l as logError } from './log-error-b1a1a086.js';
 import { r as randomHTMLId } from './random-html-id-8e3f658c.js';
 import { c as clamp } from './clamp-6bdb0367.js';

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

@@ -1,7 +1,7 @@
 import { r as registerInstance, h, H as Host, g as getElement } from './index-74e605ae.js';
 import { s as simulateNativeEvent } from './simulate-native-event-ac69961f.js';
 import { c as clamp } from './clamp-6bdb0367.js';
-import { t as trackComponent } from './usage-tracking-3d95bf43.js';
+import { t as trackComponent } from './usage-tracking-3a58b2cb.js';
 import { l as logError } from './log-error-b1a1a086.js';
 
 const guxRatingCss = ":host{display:inline-flex;user-select:none}:host:focus{outline:none;box-shadow:0 0 0 3px rgba(117, 168, 255, 0.5)}.gux-rating-star-container{color:#2e394c}.gux-rating-star-container.gux-disabled{opacity:0.5}.gux-rating-star-container gux-icon{width:24px;height:24px}";

package/dist/esm/gux-side-panel-legacy.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, g as getElement } from './index-74e605ae.js';
-import { t as trackComponent } from './usage-tracking-3d95bf43.js';
+import { t as trackComponent } from './usage-tracking-3a58b2cb.js';
 
 const guxSidePanelCss = "gux-side-panel-legacy aside{position:relative;display:flex;flex-direction:row-reverse;width:49px;height:100%;color:#2e394c;background-color:#fdfdfd}gux-side-panel-legacy aside.gux-left{flex-direction:row}gux-side-panel-legacy aside.gux-left .gux-panel-content{left:49px}gux-side-panel-legacy aside.gux-right .gux-panel-content{right:49px}gux-side-panel-legacy aside .gux-panel-icons{border:1px solid #e2e6ee}gux-side-panel-legacy aside .gux-panel-icons gux-side-panel-button{display:flex;flex-direction:column}gux-side-panel-legacy aside .gux-panel-content{position:absolute;width:280px;height:100%}gux-side-panel-legacy aside .gux-panel-content [slot='side-panel-content']{height:100%}gux-side-panel-legacy aside .gux-panel-content.gux-closed{display:none}.gux-side-panel-dark-theme{color:#fdfdfd}.gux-side-panel-dark-theme aside{background-color:#2e394c}.gux-side-panel-dark-theme aside .gux-panel-icons{border-color:#202937}.gux-dark-theme gux-side-panel-legacy{color:#fdfdfd}.gux-dark-theme gux-side-panel-legacy aside{background-color:#2e394c}.gux-dark-theme gux-side-panel-legacy aside .gux-panel-icons{border-color:#202937}gux-side-panel-legacy.gux-dark-theme{color:#fdfdfd}gux-side-panel-legacy.gux-dark-theme aside{background-color:#2e394c}gux-side-panel-legacy.gux-dark-theme aside .gux-panel-icons{border-color:#202937}.gux-side-panel-light-theme{color:#2e394c}.gux-light-theme gux-side-panel-legacy{color:#2e394c}gux-side-panel-legacy.gux-light-theme{color:#2e394c}gux-side-panel-legacy{color:#2e394c}";
 

package/dist/esm/gux-simple-toast.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-74e605ae.js';
-import { t as trackComponent } from './usage-tracking-3d95bf43.js';
+import { t as trackComponent } from './usage-tracking-3a58b2cb.js';
 
 const guxSimpleToastCss = ":host{position:relative;display:flex;flex-direction:row;flex-wrap:nowrap;align-content:stretch;align-items:flex-start;justify-content:flex-start;width:286px;padding:8px 16px;margin-bottom:4px;color:#2e394c;background:#f6f7f9;border:1px solid;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:6px 0}.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-icon gux-icon{width:12px;height:12px}.gux-message{flex:1 1 auto;align-self:auto;order:0;max-height:48px;margin:0 12px 0 8px;overflow:hidden;line-height:24px;text-overflow:ellipsis}";