genesys-spark-components 3.28.1 → 3.29.0

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

@@ -4,7 +4,7 @@ import { c as calculateInputDisabledState, o as onInputDisabledStateChange } fro
 import { O as OnMutation } from './on-mutation-26225065.js';
 import { a as onRequiredChange } from './on-attribute-change-2b01c315.js';
 import { p as preventBrowserValidationStyling } from './prevent-browser-validation-styling-d16c3f4c.js';
-import { t as trackComponent } from './usage-tracking-46be00a6.js';
+import { t as trackComponent } from './usage-tracking-3a58b2cb.js';
 import { s as setInputValue } from './set-input-value-5adeaccc.js';
 import { s as simulateNativeEvent } from './simulate-native-event-ac69961f.js';
 import { G as GuxFormFieldLabel, a as GuxFormFieldContainer } from './gux-form-field-label-92550ff3.js';

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

@@ -2,7 +2,7 @@ import { r as registerInstance, h, H as Host, g as getElement } from './index-74
 import { c as calculateInputDisabledState, o as onInputDisabledStateChange } from './on-input-disabled-state-change-3ea76372.js';
 import { O as OnMutation } from './on-mutation-26225065.js';
 import { p as preventBrowserValidationStyling } from './prevent-browser-validation-styling-d16c3f4c.js';
-import { t as trackComponent } from './usage-tracking-46be00a6.js';
+import { t as trackComponent } from './usage-tracking-3a58b2cb.js';
 import { h as hasErrorSlot, G as GuxFormFieldError, v as validateFormIds } from './gux-form-field.service-debdaed0.js';
 import './random-html-id-8e3f658c.js';
 import './log-error-b1a1a086.js';

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

@@ -3,7 +3,7 @@ import { c as calculateInputDisabledState, o as onInputDisabledStateChange } fro
 import { O as OnMutation } from './on-mutation-26225065.js';
 import { a as onRequiredChange } from './on-attribute-change-2b01c315.js';
 import { p as preventBrowserValidationStyling } from './prevent-browser-validation-styling-d16c3f4c.js';
-import { t as trackComponent } from './usage-tracking-46be00a6.js';
+import { t as trackComponent } from './usage-tracking-3a58b2cb.js';
 import { a as GuxFormFieldContainer, G as GuxFormFieldLabel } from './gux-form-field-label-92550ff3.js';
 import { h as hasErrorSlot, G as GuxFormFieldError, v as validateFormIds, g as getComputedLabelPosition } from './gux-form-field.service-debdaed0.js';
 import './random-html-id-8e3f658c.js';

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

@@ -3,7 +3,7 @@ import { c as calculateInputDisabledState, o as onInputDisabledStateChange } fro
 import { O as OnMutation } from './on-mutation-26225065.js';
 import { a as onRequiredChange } from './on-attribute-change-2b01c315.js';
 import { p as preventBrowserValidationStyling } from './prevent-browser-validation-styling-d16c3f4c.js';
-import { t as trackComponent } from './usage-tracking-46be00a6.js';
+import { t as trackComponent } from './usage-tracking-3a58b2cb.js';
 import { G as GuxFormFieldLabel, a as GuxFormFieldContainer } from './gux-form-field-label-92550ff3.js';
 import { h as hasErrorSlot, c as clearInput, G as GuxFormFieldError, a as hasContent, v as validateFormIds, g as getComputedLabelPosition } from './gux-form-field.service-debdaed0.js';
 import './random-html-id-8e3f658c.js';

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

@@ -3,7 +3,7 @@ import { c as calculateInputDisabledState, o as onInputDisabledStateChange } fro
 import { O as OnMutation } from './on-mutation-26225065.js';
 import { a as onRequiredChange } from './on-attribute-change-2b01c315.js';
 import { p as preventBrowserValidationStyling } from './prevent-browser-validation-styling-d16c3f4c.js';
-import { t as trackComponent } from './usage-tracking-46be00a6.js';
+import { t as trackComponent } from './usage-tracking-3a58b2cb.js';
 import { G as GuxFormFieldLabel, a as GuxFormFieldContainer } from './gux-form-field-label-92550ff3.js';
 import { h as hasErrorSlot, G as GuxFormFieldError, v as validateFormIds, g as getComputedLabelPosition } from './gux-form-field.service-debdaed0.js';
 import './random-html-id-8e3f658c.js';

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

@@ -3,7 +3,7 @@ import { c as calculateInputDisabledState, o as onInputDisabledStateChange } fro
 import { O as OnMutation } from './on-mutation-26225065.js';
 import { a as onRequiredChange } from './on-attribute-change-2b01c315.js';
 import { p as preventBrowserValidationStyling } from './prevent-browser-validation-styling-d16c3f4c.js';
-import { t as trackComponent } from './usage-tracking-46be00a6.js';
+import { t as trackComponent } from './usage-tracking-3a58b2cb.js';
 import { G as GuxFormFieldLabel, a as GuxFormFieldContainer } from './gux-form-field-label-92550ff3.js';
 import { h as hasErrorSlot, a as hasContent, s as setSlotAriaDescribedby, c as clearInput, G as GuxFormFieldError, v as validateFormIds, g as getComputedLabelPosition } from './gux-form-field.service-debdaed0.js';
 import './random-html-id-8e3f658c.js';

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

@@ -3,7 +3,7 @@ import { c as calculateInputDisabledState, o as onInputDisabledStateChange } fro
 import { O as OnMutation } from './on-mutation-26225065.js';
 import { a as onRequiredChange } from './on-attribute-change-2b01c315.js';
 import { p as preventBrowserValidationStyling } from './prevent-browser-validation-styling-d16c3f4c.js';
-import { t as trackComponent } from './usage-tracking-46be00a6.js';
+import { t as trackComponent } from './usage-tracking-3a58b2cb.js';
 import { G as GuxFormFieldLabel, a as GuxFormFieldContainer } from './gux-form-field-label-92550ff3.js';
 import { h as hasErrorSlot, G as GuxFormFieldError, v as validateFormIds, g as getComputedLabelPosition } from './gux-form-field.service-debdaed0.js';
 import './random-html-id-8e3f658c.js';

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

@@ -1,5 +1,5 @@
 import { a as getAssetPath, r as registerInstance, h, g as getElement } from './index-74e605ae.js';
-import { t as trackComponent } from './usage-tracking-46be00a6.js';
+import { t as trackComponent } from './usage-tracking-3a58b2cb.js';
 import { l as logError } from './log-error-b1a1a086.js';
 
 const iconNameMap = {

package/dist/esm/gux-list-item-legacy_2.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-46be00a6.js';
+import { t as trackComponent } from './usage-tracking-3a58b2cb.js';
 
 const guxListItemCss = ":host:focus .gux-list-item,:host:active .gux-list-item,:host:hover:not([disabled]) .gux-list-item{color:#fdfdfd;background:#2a60c8}:host(:focus) .gux-list-item,:host(:active) .gux-list-item,:host(:hover:not([disabled])) .gux-list-item{color:#fdfdfd;background:#2a60c8}:host([disabled]) .gux-list-item{pointer-events:none;cursor:default;opacity:0.5}.gux-list-item{display:flex;height:max-content;padding:0 16px;line-height:32px;word-wrap:break-word;cursor:pointer}.gux-list-item .gux-text{width:100%}";
 

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

@@ -1,53 +1,10 @@
 import { r as registerInstance, h, H as Host, g as getElement } from './index-74e605ae.js';
-import { t as trackComponent } from './usage-tracking-46be00a6.js';
-
-const validFocusableItems = ['gux-list-item'];
-function getRootChildren(root) {
-  const slot = root.querySelector('slot');
-  return slot ? slot.assignedElements() : Array.from(root.children);
-}
-function getGuxListFocusableItems(root) {
-  return getRootChildren(root).filter(cv => {
-    if (validFocusableItems.includes(cv.tagName.toLowerCase())) {
-      return !cv.disabled;
-    }
-    return false;
-  });
-}
-function getCurrentFocusIndex(root) {
-  return getGuxListFocusableItems(root).findIndex(cv => cv.matches(':focus-within'));
-}
-function focusMove(root, delta) {
-  const currentFocusIndex = getCurrentFocusIndex(root);
-  const maxIndex = getGuxListFocusableItems(root).length;
-  focusIndex(root, (currentFocusIndex + delta) % maxIndex);
-}
-function focusIndex(root, focusIndex) {
-  var _a;
-  const items = getGuxListFocusableItems(root);
-  while (focusIndex < 0) {
-    focusIndex += items.length;
-  }
-  (_a = items[focusIndex]) === null || _a === void 0 ? void 0 : _a.focus();
-}
-function getLastChildIndex(root) {
-  return getGuxListFocusableItems(root).length - 1;
-}
-function first(root) {
-  focusIndex(root, 0);
-}
-function last(root) {
-  focusIndex(root, getLastChildIndex(root));
-}
-function next(root) {
-  focusMove(root, 1);
-}
-function previous(root) {
-  focusMove(root, -1);
-}
+import { l as last, n as next, f as first, p as previous } from './gux-list.service-66b8540f.js';
+import { t as trackComponent } from './usage-tracking-3a58b2cb.js';
 
 const guxListCss = ":host{display:flex;flex-direction:column;flex-wrap:nowrap;align-content:stretch;align-items:flex-start;justify-content:flex-start}";
 
+const validFocusableItems = ['gux-list-item'];
 const GuxList = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
@@ -59,25 +16,25 @@ const GuxList = class {
     switch (event.key) {
       case 'ArrowUp':
         event.preventDefault();
-        previous(this.root);
+        previous(this.root, validFocusableItems);
         break;
       case 'Home':
         event.preventDefault();
-        first(this.root);
+        first(this.root, validFocusableItems);
         break;
       case 'ArrowDown':
         event.preventDefault();
-        next(this.root);
+        next(this.root, validFocusableItems);
         break;
       case 'End':
         event.preventDefault();
-        last(this.root);
+        last(this.root, validFocusableItems);
         break;
     }
   }
   // eslint-disable-next-line @typescript-eslint/require-await
   async guxFocusFirstItem() {
-    first(this.root);
+    first(this.root, validFocusableItems);
   }
   renderFocusTarget() {
     return (h("span", { tabindex: "-1" }));

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-46be00a6.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-46be00a6.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-46be00a6.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 };