genesys-spark-components 4.0.0-beta.8 → 4.0.1

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

@@ -0,0 +1,85 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-75c9f0d9.js');
+const randomHtmlId = require('./random-html-id-32ef8847.js');
+const usage = require('./usage-bfcc4d96.js');
+
+const guxModalLegacyCss = "::slotted(button:active:enabled){color:var(--gse-ui-link-active-foregroundColor);text-decoration:underline;background:none}slot[name=left-align-buttons]::slotted(:not(button,gux-button)){display:flex;flex-direction:row;gap:var(--gse-ui-modal-buttonBar-gap);align-content:flex-start;align-items:center}:host .gux-modal{position:fixed;inset:0;z-index:var(--gse-semantic-zIndex-modal);display:flex;align-items:center;justify-content:center;color:#2e394c;background:var(--gse-ui-modal-shroudColor)}:host .gux-modal .gux-modal-container{position:relative;box-sizing:border-box;display:flex;flex-direction:column;justify-content:space-between;padding:var(--gse-ui-modal-padding);background:var(--gse-ui-modal-backgroundColor);border:1px solid #b4bccb;border-radius:var(--gse-ui-modal-borderRadius);box-shadow:var(--gse-ui-modal-boxShadow-x) var(--gse-ui-modal-boxShadow-y) var(--gse-ui-modal-boxShadow-blur) var(--gse-ui-modal-boxShadow-spread) var(--gse-ui-modal-boxShadow-color)}:host .gux-modal .gux-modal-container.gux-small{width:var(--gse-ui-modal-small-width);max-height:min(368px, 100vh - 2 * 24px)}:host .gux-modal .gux-modal-container.gux-medium{width:var(--gse-ui-modal-medium-width);max-height:min(640px, 100vh - 2 * 24px)}:host .gux-modal .gux-modal-container.gux-large{width:var(--gse-ui-modal-large-width);max-height:min(640px, 100vh - 2 * 24px)}:host .gux-modal .gux-modal-container.gux-dynamic{max-width:calc(100vw - 48px);max-height:calc(100vh - 48px)}:host .gux-modal .gux-modal-container.gux-dynamic .gux-modal-content{max-height:none}:host .gux-modal .gux-modal-container .gux-modal-header{margin:0;font-family:var(--gse-ui-modal-heading-fontFamily);font-size:var(--gse-ui-modal-heading-fontSize);font-weight:var(--gse-ui-modal-heading-fontWeight);line-height:var(--gse-ui-modal-heading-fontFamily);color:var(--gse-ui-modal-headerColor);letter-spacing:var(--gse-ui-modal-heading-letterSpacing);font-family:var(--gse-core-typography-heading-xl-fontFamily), var(--gse-core-fontFamily-heading), sans-serif;font-size:var(--gse-core-typography-heading-xl-fontSize);line-height:var(--gse-core-typography-heading-xl-lineHeight);font-weight:var(--gse-core-fontWeight-bold)}:host .gux-modal .gux-modal-container .gux-modal-content{max-height:432px;margin-top:var(--gse-ui-modal-gap);margin-bottom:var(--gse-ui-modal-gap);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}@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%}}";
+
+const GuxModalLegacy = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.guxdismiss = index.createEvent(this, "guxdismiss", 7);
+    this.size = 'dynamic';
+    this.trapFocus = true;
+    this.initialFocus = undefined;
+  }
+  handleKeyEvent(event) {
+    if (event.key === 'Escape') {
+      this.onDismissHandler(event);
+    }
+  }
+  connectedCallback() {
+    this.triggerElement = document.activeElement;
+  }
+  componentWillLoad() {
+    const trapFocusVariant = this.trapFocus ? 'trapfocuson' : 'trapfocusoff';
+    const componentVariant = `${this.size}-${trapFocusVariant}`;
+    usage.trackComponent(this.root, { variant: componentVariant });
+  }
+  componentDidLoad() {
+    var _a, _b, _c;
+    const initialFocusElement = this.getInitialFocusElement();
+    if (initialFocusElement) {
+      // using .focus?.() instead of .focus() as a workaround for a Stencil bug in unit tests
+      // https://github.com/ionic-team/stencil/issues/1964
+      (_a = initialFocusElement.focus) === null || _a === void 0 ? void 0 : _a.call(initialFocusElement);
+    }
+    else if (this.dismissButton) {
+      (_c = (_b = this.dismissButton).focus) === null || _c === void 0 ? void 0 : _c.call(_b);
+    }
+  }
+  render() {
+    const hasModalTitleSlot = this.hasModalTitleSlot();
+    const hasFooterButtons = this.hasFooterButtons();
+    const titleID = randomHtmlId.randomHTMLId();
+    return (index.h("div", { class: "gux-modal", role: "dialog", "aria-modal": "true", "aria-labelledby": hasModalTitleSlot ? titleID : null }, index.h("div", { class: `gux-modal-container gux-${this.size}` }, this.renderModalTrapFocusEl(), hasModalTitleSlot && (index.h("h1", { class: "gux-modal-header", id: titleID }, index.h("slot", { name: "title" }))), index.h("gux-dismiss-button", { onClick: this.onDismissHandler.bind(this), ref: el => (this.dismissButton = el) }), index.h("div", { class: {
+        'gux-modal-content': true,
+        'gux-no-buttons': !hasFooterButtons
+      } }, index.h("p", null, index.h("slot", { name: "content" }))), hasFooterButtons && (index.h("div", { class: "gux-button-footer" }, index.h("div", { class: "gux-left-align-buttons" }, index.h("slot", { name: "left-align-buttons" })), index.h("div", { class: "gux-right-align-buttons" }, index.h("slot", { name: "right-align-buttons" })))), this.renderModalTrapFocusEl())));
+  }
+  // When trap-focus is enabled, focusing this element
+  // will immediately redirect focus back to the dismiss button at the top of the modal.
+  renderModalTrapFocusEl() {
+    if (this.trapFocus) {
+      return (index.h("span", { onFocus: () => this.dismissButton.focus(), tabindex: "0" }));
+    }
+  }
+  getInitialFocusElement() {
+    return this.initialFocus
+      ? this.root.querySelector(this.initialFocus)
+      : undefined;
+  }
+  hasModalTitleSlot() {
+    return Boolean(this.root.querySelector('[slot="title"]'));
+  }
+  hasFooterButtons() {
+    return (Boolean(this.root.querySelector('[slot="left-align-buttons"]')) ||
+      Boolean(this.root.querySelector('[slot="right-align-buttons"]')));
+  }
+  onDismissHandler(event) {
+    var _a;
+    event.stopPropagation();
+    const dismissEvent = this.guxdismiss.emit();
+    if (!dismissEvent.defaultPrevented) {
+      this.root.remove();
+      (_a = this.triggerElement) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+  }
+  get root() { return index.getElement(this); }
+};
+GuxModalLegacy.style = guxModalLegacyCss;
+
+exports.gux_modal_legacy = GuxModalLegacy;

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

@@ -2,83 +2,77 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-0d0fdb85.js');
-const randomHtmlId = require('./random-html-id-b86b61c0.js');
-const usage = require('./usage-24342df6.js');
+const index = require('./index-75c9f0d9.js');
+const randomHtmlId = require('./random-html-id-32ef8847.js');
+const usage = require('./usage-bfcc4d96.js');
 
-const guxModalCss = ":host .gux-modal{position:fixed;inset: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%}}";
+const guxModalCss = "::slotted(button:active:enabled){color:var(--gse-ui-link-active-foregroundColor);text-decoration:underline;background:none}slot[name=start-align-buttons]::slotted(:not(button,gux-button-slot)){display:flex;flex-direction:row;gap:var(--gse-ui-modal-buttonBar-gap);align-content:flex-start;align-items:center}:host dialog{box-sizing:border-box;justify-content:space-between;border:1px solid #b4bccb;border-radius:var(--gse-ui-modal-borderRadius);box-shadow:var(--gse-ui-modal-boxShadow-x) var(--gse-ui-modal-boxShadow-y) var(--gse-ui-modal-boxShadow-blur) var(--gse-ui-modal-boxShadow-spread) var(--gse-ui-modal-boxShadow-color)}:host dialog::backdrop{background:rgba(77, 97, 130, 0.8)}:host dialog .gux-modal-container{display:flex;flex-direction:column;padding:var(--gse-ui-modal-padding)}:host dialog .gux-modal-container.gux-small{width:var(--gse-ui-modal-small-width);max-height:min(368px, 100vh - 2 * 24px)}:host dialog .gux-modal-container.gux-medium{width:var(--gse-ui-modal-medium-width);max-height:min(640px, 100vh - 2 * 24px)}:host dialog .gux-modal-container.gux-large{width:var(--gse-ui-modal-large-width);max-height:min(640px, 100vh - 2 * 24px)}:host dialog .gux-modal-container.gux-dynamic{max-width:calc(100vw - 48px);max-height:calc(100vh - 48px)}:host dialog .gux-modal-container.gux-dynamic .gux-modal-content{max-height:none}:host dialog .gux-modal-container .gux-modal-header{margin:0;font-family:var(--gse-ui-modal-heading-fontFamily);font-size:var(--gse-ui-modal-heading-fontSize);font-weight:var(--gse-ui-modal-heading-fontWeight);line-height:var(--gse-ui-modal-heading-fontFamily);color:var(--gse-ui-modal-headerColor);letter-spacing:var(--gse-ui-modal-heading-letterSpacing);font-family:var(--gse-core-typography-heading-xl-fontFamily), var(--gse-core-fontFamily-heading), sans-serif;font-size:var(--gse-core-typography-heading-xl-fontSize);line-height:var(--gse-core-typography-heading-xl-lineHeight);font-weight:var(--gse-core-fontWeight-bold)}:host dialog .gux-modal-container .gux-modal-content{max-height:432px;margin-top:var(--gse-ui-modal-gap);margin-bottom:var(--gse-ui-modal-gap);overflow-y:auto}:host dialog .gux-modal-container .gux-modal-content.gux-no-buttons{margin-bottom:0}:host dialog .gux-modal-container .gux-button-footer{display:flex;justify-content:space-between}@media (max-width: 416px){:host dialog .gux-modal-container.gux-small,:host dialog .gux-modal-container.gux-medium,:host dialog .gux-modal-container.gux-large{width:100%;height:100%}}";
 
 const GuxModal = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.guxdismiss = index.createEvent(this, "guxdismiss", 7);
     this.size = 'dynamic';
-    this.trapFocus = true;
-    this.initialFocus = undefined;
+    this.open = false;
   }
-  handleKeyEvent(event) {
-    if (event.key === 'Escape') {
-      this.onDismissHandler(event);
+  /**
+   * "Renders" the open state of the modal
+   */
+  syncOpenState() {
+    if (this.open) {
+      this.dialogElement.showModal();
     }
+    else {
+      this.dialogElement.close();
+    }
+  }
+  // eslint-disable-next-line @typescript-eslint/require-await
+  async showModal() {
+    this.open = true;
   }
-  connectedCallback() {
-    this.triggerElement = document.activeElement;
+  // eslint-disable-next-line @typescript-eslint/require-await
+  async close() {
+    this.open = false;
   }
   componentWillLoad() {
-    const trapFocusVariant = this.trapFocus ? 'trapfocuson' : 'trapfocusoff';
-    const componentVariant = `${this.size}-${trapFocusVariant}`;
-    usage.trackComponent(this.root, { variant: componentVariant });
+    usage.trackComponent(this.root, { variant: `${this.size}` });
   }
   componentDidLoad() {
-    var _a, _b, _c;
-    const initialFocusElement = this.getInitialFocusElement();
-    if (initialFocusElement) {
-      // using .focus?.() instead of .focus() as a workaround for a Stencil bug in unit tests
-      // https://github.com/ionic-team/stencil/issues/1964
-      (_a = initialFocusElement.focus) === null || _a === void 0 ? void 0 : _a.call(initialFocusElement);
-    }
-    else if (this.dismissButton) {
-      (_c = (_b = this.dismissButton).focus) === null || _c === void 0 ? void 0 : _c.call(_b);
-    }
+    this.syncOpenState();
+  }
+  hasModalTitleSlot() {
+    return Boolean(this.root.querySelector('[slot="title"]'));
+  }
+  hasFooterButtons() {
+    return (Boolean(this.root.querySelector('[slot="start-align-buttons"]')) ||
+      Boolean(this.root.querySelector('[slot="end-align-buttons"]')));
   }
   render() {
     const hasModalTitleSlot = this.hasModalTitleSlot();
     const hasFooterButtons = this.hasFooterButtons();
     const titleID = randomHtmlId.randomHTMLId();
-    return (index.h("div", { class: "gux-modal", role: "dialog", "aria-modal": "true", "aria-labelledby": hasModalTitleSlot ? titleID : null }, index.h("div", { class: `gux-modal-container gux-${this.size}` }, this.renderModalTrapFocusEl(), hasModalTitleSlot && (index.h("h1", { class: "gux-modal-header", id: titleID }, index.h("slot", { name: "title" }))), index.h("gux-dismiss-button", { onClick: this.onDismissHandler.bind(this), ref: el => (this.dismissButton = el) }), index.h("div", { class: {
+    return (index.h("dialog", { onClose: this.onCloseHandler.bind(this), ref: el => (this.dialogElement = el), "aria-labelledby": hasModalTitleSlot ? titleID : null }, index.h("div", { class: `gux-modal-container gux-${this.size}` }, index.h("gux-dismiss-button", { onClick: this.onDismissHandler.bind(this) }), hasModalTitleSlot && this.renderTitle(titleID), index.h("div", { class: {
         'gux-modal-content': true,
         'gux-no-buttons': !hasFooterButtons
-      } }, index.h("p", null, index.h("slot", { name: "content" }))), hasFooterButtons && (index.h("div", { class: "gux-button-footer" }, index.h("div", { class: "gux-left-align-buttons" }, index.h("slot", { name: "left-align-buttons" })), index.h("div", { class: "gux-right-align-buttons" }, index.h("slot", { name: "right-align-buttons" })))), this.renderModalTrapFocusEl())));
+      } }, index.h("p", null, index.h("slot", { name: "content" }))), hasFooterButtons && this.renderButtonFooter())));
   }
-  // When trap-focus is enabled, focusing this element
-  // will immediately redirect focus back to the dismiss button at the top of the modal.
-  renderModalTrapFocusEl() {
-    if (this.trapFocus) {
-      return (index.h("span", { onFocus: () => this.dismissButton.focus(), tabindex: "0" }));
-    }
+  renderTitle(titleID) {
+    return (index.h("h1", { class: "gux-modal-header", id: titleID }, index.h("slot", { name: "title" })));
   }
-  getInitialFocusElement() {
-    return this.initialFocus
-      ? this.root.querySelector(this.initialFocus)
-      : undefined;
+  renderButtonFooter() {
+    return (index.h("div", { class: "gux-button-footer" }, index.h("div", { class: "gux-start-align-buttons" }, index.h("slot", { name: "start-align-buttons" })), index.h("div", { class: "gux-end-align-buttons" }, index.h("slot", { name: "end-align-buttons" }))));
   }
-  hasModalTitleSlot() {
-    return Boolean(this.root.querySelector('[slot="title"]'));
+  onCloseHandler() {
+    this.guxdismiss.emit();
   }
-  hasFooterButtons() {
-    return (Boolean(this.root.querySelector('[slot="left-align-buttons"]')) ||
-      Boolean(this.root.querySelector('[slot="right-align-buttons"]')));
-  }
-  onDismissHandler(event) {
-    var _a;
-    event.stopPropagation();
-    const dismissEvent = this.guxdismiss.emit();
-    if (!dismissEvent.defaultPrevented) {
-      this.root.remove();
-      (_a = this.triggerElement) === null || _a === void 0 ? void 0 : _a.focus();
-    }
+  onDismissHandler() {
+    this.dialogElement.close();
   }
+  static get delegatesFocus() { return true; }
   get root() { return index.getElement(this); }
+  static get watchers() { return {
+    "open": ["syncOpenState"]
+  }; }
 };
 GuxModal.style = guxModalCss;
 

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

@@ -2,19 +2,19 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-0d0fdb85.js');
-const index$1 = require('./index-9bbde1aa.js');
-const simulateNativeEvent = require('./simulate-native-event-fe3e62da.js');
-const afterNextRender = require('./after-next-render-a09f528a.js');
-const yearMonthValues = require('./year-month-values-f387f8d8.js');
-require('./get-closest-element-ab4b2eee.js');
+const index = require('./index-75c9f0d9.js');
+const index$1 = require('./index-dee802be.js');
+const simulateNativeEvent = require('./simulate-native-event-8209a457.js');
+const afterNextRender = require('./after-next-render-a023ef47.js');
+const yearMonthValues = require('./year-month-values-6028ce26.js');
+require('./get-closest-element-26894e5a.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-visible{border-radius:4px;outline:3px solid #aac9ff;outline-offset:1px;box-shadow:0 0 0 1px #fdfdfd}.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-visible{outline:3px solid #aac9ff;outline-offset:1px;box-shadow:0 0 0 1px #fdfdfd}.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 guxMonthCalendarCss = ".gux-month-calendar{flex-wrap:wrap;width:var(--gse-ui-calendarMenu-width);height:var(--gse-ui-calendarMenu-height);box-shadow:var(--gse-ui-calendarMenu-boxShadow-x) var(--gse-ui-calendarMenu-boxShadow-y) var(--gse-ui-calendarMenu-boxShadow-blur) var(--gse-ui-calendarMenu-boxShadow-spread) var(--gse-ui-calendarMenu-boxShadow-color)}.gux-month-calendar .gux-current-month{font-family:var(--gse-ui-calendarMenu-month-currentText-fontFamily);font-size:var(--gse-ui-calendarMenu-month-currentText-fontSize);font-weight:var(--gse-ui-calendarMenu-month-currentText-fontWeight);line-height:var(--gse-ui-calendarMenu-month-currentText-lineHeight);color:var(--gse-ui-calendarMenu-month-default-foregroundColor)}.gux-month-calendar .gux-year-header{position:relative;display:flex;align-items:center;justify-content:space-between;height:var(--gse-ui-calendarMenu-month-single-header-height);padding:var(--gse-ui-calendarMenu-header-padding);font-family:var(--gse-ui-calendarMenu-day-headerText-fontFamily);font-size:var(--gse-ui-calendarMenu-day-headerText-fontSize);font-weight:var(--gse-ui-calendarMenu-day-headerText-fontWeight);line-height:var(--gse-ui-calendarMenu-day-headerText-lineHeight);color:var(--gse-ui-calendarMenu-header-foregroundColor);background-color:var(--gse-ui-calendarMenu-header-backgroundColor);border-radius:var(--gse-ui-calendarMenu-single-header-borderRadius)}.gux-month-calendar .gux-year-header button{padding:var(--gse-ui-calendarMenu-header-arrow-padding);color:inherit;cursor:pointer;background:none;border:none;outline:none}.gux-month-calendar .gux-year-header button:focus-visible{border-radius:calc(var(--gse-semantic-focusRing-cornerRadius) - var(--gse-semantic-focusRing-offset));outline:var(--gse-semantic-focusRing-width) var(--gse-semantic-focusRing-default-border-style) var(--gse-semantic-color-focus);outline-offset:var(--gse-semantic-focusRing-offset)}.gux-month-calendar .gux-year-header button.gux-year-change:disabled{cursor:default;opacity:var(--gse-ui-calendarMenu-disabled-opacity)}.gux-month-calendar .gux-year-header button gux-icon{width:var(--gse-ui-icon-size-sm);height:var(--gse-ui-icon-size-sm);pointer-events:none}";
 
 const GuxMonthCalendar = class {
   constructor(hostRef) {
@@ -68,6 +68,10 @@ const GuxMonthCalendar = class {
     }
     this.updateValue(value);
   }
+  isCurrentMonth(month) {
+    return (yearMonthValues.getYearMonthObject(yearMonthValues.getCurrentISOYearMonth()).year == this.year &&
+      yearMonthValues.getYearMonthObject(yearMonthValues.getCurrentISOYearMonth()).month == month);
+  }
   getMonthAriaLabel(value) {
     const { year, month } = yearMonthValues.getYearMonthObject(value);
     return new Date(Number(year), Number(month) - 1).toLocaleDateString(this.locale, { year: 'numeric', month: 'long' });
@@ -113,7 +117,7 @@ const GuxMonthCalendar = class {
     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', {
+      }) })), index.h("div", null, 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
       }) }))));
@@ -121,7 +125,7 @@ const GuxMonthCalendar = class {
   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-item", { class: { 'gux-current-month': this.isCurrentMonth(month) }, 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));
   }

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

@@ -2,11 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-0d0fdb85.js');
-const guxList_service = require('./gux-list.service-763539a2.js');
-const getClosestElement = require('./get-closest-element-ab4b2eee.js');
+const index = require('./index-75c9f0d9.js');
+const guxList_service = require('./gux-list.service-4beaa394.js');
+const getClosestElement = require('./get-closest-element-26894e5a.js');
 
-const guxMonthListCss = ":host{display:flex;flex-direction:row;flex-wrap:wrap;padding:12px 16px;background-color:#fdfdfd;border:1px solid #b4bccb}";
+const guxMonthListCss = ":host{display:flex;flex-direction:row;flex-wrap:wrap;padding:var(--gse-ui-calendarMenu-monthBody-padding);background-color:var(--gse-ui-calendarMenu-backgroundColor);border-radius:var(--gse-ui-calendarMenu-single-body-borderRadius);box-shadow:var(--gse-ui-calendarMenu-boxShadow-x) var(--gse-ui-calendarMenu-boxShadow-y) var(--gse-ui-calendarMenu-boxShadow-blur) var(--gse-ui-calendarMenu-boxShadow-spread) var(--gse-ui-calendarMenu-boxShadow-color)}";
 
 const validFocusableItems = ['gux-month-list-item'];
 const GuxMonthList = class {
@@ -56,7 +56,7 @@ const GuxMonthList = class {
 };
 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-visible:not(:disabled){outline:3px solid #aac9ff;outline-offset:1px;box-shadow:0 0 0 1px #fdfdfd}.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 guxMonthListItemCss = ":host([disabled]){pointer-events:none}:host([disabled=false]){pointer-events:auto}.gux-container{box-sizing:border-box;width:var(--gse-ui-calendarMenu-month-monthCell-width);height:var(--gse-ui-calendarMenu-month-monthCell-height);padding:10px 5px 9px}.gux-container button{all:unset;box-sizing:border-box;width:100%;height:100%;text-align:center;word-wrap:break-word;cursor:pointer;border:none;border-radius:var(--gse-ui-calendarMenu-month-borderRadius);outline:none}.gux-container button.gux-selected{color:var(--gse-ui-calendarMenu-month-selected-foregroundColor);background:var(--gse-ui-calendarMenu-month-selected-backgroundColor)}.gux-container button:focus-visible:not(:disabled){border-radius:var(--gse-ui-calendarMenu-month-focusBorderRadius);outline:var(--gse-ui-monthPicker-calendarStates-focus-border-width) var(--gse-ui-monthPicker-calendarStates-focus-border-style) var(--gse-ui-monthPicker-calendarStates-focus-border-color);outline-offset:var(--gse-semantic-focusRing-offset)}.gux-container button:hover:not(:disabled){color:var(--gse-ui-calendarMenu-month-default-foregroundColor);background:var(--gse-ui-calendarMenu-month-hover-backgroundColor)}.gux-container button:disabled{cursor:default;opacity:var(--gse-ui-calendarMenu-disabled-opacity)}";
 
 const GuxMonthListItem = class {
   constructor(hostRef) {

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

@@ -2,14 +2,14 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-0d0fdb85.js');
-const usage = require('./usage-24342df6.js');
-const onClickOutside = require('./on-click-outside-428f8bbf.js');
-const index$1 = require('./index-9bbde1aa.js');
-const simulateNativeEvent = require('./simulate-native-event-fe3e62da.js');
-const afterNextRender = require('./after-next-render-a09f528a.js');
-const yearMonthValues = require('./year-month-values-f387f8d8.js');
-require('./get-closest-element-ab4b2eee.js');
+const index = require('./index-75c9f0d9.js');
+const usage = require('./usage-bfcc4d96.js');
+const onClickOutside = require('./on-click-outside-3c0f8816.js');
+const index$1 = require('./index-dee802be.js');
+const simulateNativeEvent = require('./simulate-native-event-8209a457.js');
+const afterNextRender = require('./after-next-render-a023ef47.js');
+const yearMonthValues = require('./year-month-values-6028ce26.js');
+require('./get-closest-element-26894e5a.js');
 
 const toggleCalendar = "Toggle month calendar view";
 const month = "Month";
@@ -22,7 +22,7 @@ const translationResources = {
 	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:focus-within{outline:3px solid #aac9ff;outline-offset:1px;box-shadow:0 0 0 1px #fdfdfd}.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-visible{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-visible{outline:3px solid #aac9ff;outline-offset:1px;box-shadow:0 0 0 1px #fdfdfd}.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-visible,.gux-target .gux-popup-toggle.gux-expanded:not(:disabled):hover{color:#2a60c8}";
+const guxMonthPickerCss = ":host{display:inline-block}.gux-target{display:inline-flex;gap:var(--gse-ui-formControl-input-gap);padding:var(--gse-ui-formControl-textarea-padding);cursor:pointer;background-color:var(--gse-ui-calendarMenu-backgroundColor);border:var(--gse-ui-formControl-input-default-border-width) var(--gse-ui-formControl-input-default-border-style) var(--gse-ui-formControl-input-default-border-color);border-radius:var(--gse-ui-formControl-input-borderRadius)}.gux-target:focus-within{border:var(--gse-ui-formControl-input-active-border-width) var(--gse-ui-formControl-input-active-border-style) var(--gse-ui-formControl-input-active-border-color);border-radius:var(--gse-ui-formControl-focusRing-borderRadius);outline:var(--gse-ui-formControl-input-focus-border-width) var(--gse-ui-formControl-input-focus-border-style) var(--gse-ui-formControl-input-focus-border-color);outline-offset:var(--gse-semantic-focusRing-offset)}.gux-target .gux-display{display:inline-flex;min-width:100px;padding-right:var(--gse-ui-formControl-input-gap);font-family:var(--gse-ui-formControl-label-text-fontFamily);font-size:var(--gse-ui-formControl-label-text-fontSize);font-weight:var(--gse-ui-formControl-label-text-fontWeight);line-height:var(--gse-ui-formControl-label-text-lineHeight);color:var(--gse-ui-formControl-label-labelColor)}.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-visible{background:var(--gse-ui-calendarMenu-month-hover-backgroundColor)}.gux-target .gux-popup-toggle{justify-content:right;color:var(--gse-ui-monthPicker-calendarStates-defaultColor);background:transparent;border:none}.gux-target .gux-popup-toggle:focus-visible{border-radius:var(--gse-ui-calendarMenu-month-calendarButton-focusBorderRadius);outline:var(--gse-ui-monthPicker-calendarStates-focus-border-width) var(--gse-ui-monthPicker-calendarStates-focus-border-style) var(--gse-ui-monthPicker-calendarStates-focus-border-color);outline-offset:var(--gse-semantic-focusRing-offset)}.gux-target .gux-popup-toggle:not(:disabled):hover{color:var(--gse-ui-monthPicker-calendarStates-hoverColor);cursor:pointer}.gux-target .gux-popup-toggle:not(:disabled):focus{color:var(--gse-ui-monthPicker-calendarStates-activeColor);cursor:pointer}.gux-target .gux-popup-toggle:disabled{color:var(--gse-ui-monthPicker-calendarStates-disabledColor)}.gux-target .gux-popup-toggle gux-icon{width:var(--gse-ui-icon-size-sm);height:var(--gse-ui-icon-size-sm)}.gux-target .gux-popup-toggle.gux-expanded{color:var(--gse-ui-monthPicker-calendarStates-activeColor)}";
 
 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;
@@ -181,16 +181,10 @@ const GuxMonthPicker = class {
     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')));
+    return (index.h("div", { role: "spinbutton", class: "gux-spinner", 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')));
+    return (index.h("div", { role: "spinbutton", class: "gux-spinner", 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)) {
@@ -211,7 +205,7 @@ const GuxMonthPicker = class {
     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()));
+    return (index.h("gux-popup", { expanded: this.expanded, disabled: this.disabled, "exceed-target-width": true }, this.renderTarget(), this.renderPopup()));
   }
   get root() { return index.getElement(this); }
   static get watchers() { return {

package/dist/cjs/gux-notification-toast-legacy.cjs.entry.js

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-0d0fdb85.js');
-const usage = require('./usage-24342df6.js');
+const index = require('./index-75c9f0d9.js');
+const usage = require('./usage-bfcc4d96.js');
 
-const guxNotificationToastCss = ".gux-focus-ring-focused:focus{outline:3px solid #aac9ff;outline-offset:1px;box-shadow:0 0 0 1px #fdfdfd}.gux-focus-ring-focused-within:focus-within{outline:3px solid #aac9ff;outline-offset:1px;box-shadow:0 0 0 1px #fdfdfd}.gux-focus-ring-focused-visible:focus-visible{outline:3px solid #aac9ff;outline-offset:1px;box-shadow:0 0 0 1px #fdfdfd}.gux-focus-ring-small-focused:focus{outline:2px solid #aac9ff;outline-offset:0}.gux-focus-ring-small-focused-within:focus-within{outline:2px solid #aac9ff;outline-offset:0}.gux-focus-ring-small-focused-visible:focus-visible{outline:2px solid #aac9ff;outline-offset:0}@font-face{font-family:Roboto;font-style:normal;font-weight:300;src:url(\"./fonts/roboto-v20-latin-300.eot\");src:local(\"Roboto Light\"), local(\"Roboto-Light\"), url(\"./fonts/roboto-v20-latin-300.eot?#iefix\") format(\"embedded-opentype\"), url(\"./fonts/roboto-v20-latin-300.woff2\") format(\"woff2\"), url(\"./fonts/roboto-v20-latin-300.woff\") format(\"woff\"), url(\"./fonts/roboto-v20-latin-300.ttf\") format(\"truetype\"), url(\"./fonts/roboto-v20-latin-300.svg#Roboto\") format(\"svg\");}@font-face{font-family:Roboto;font-style:normal;font-weight:400;src:url(\"./fonts/roboto-v20-latin-regular.eot\");src:local(\"Roboto\"), local(\"Roboto-Regular\"), url(\"./fonts/roboto-v20-latin-regular.eot?#iefix\") format(\"embedded-opentype\"), url(\"./fonts/roboto-v20-latin-regular.woff2\") format(\"woff2\"), url(\"./fonts/roboto-v20-latin-regular.woff\") format(\"woff\"), url(\"./fonts/roboto-v20-latin-regular.ttf\") format(\"truetype\"), url(\"./fonts/roboto-v20-latin-regular.svg#Roboto\") format(\"svg\");}@font-face{font-family:Roboto;font-style:italic;font-weight:400;src:url(\"./fonts/roboto-v20-latin-italic.eot\");src:local(\"Roboto Italic\"), local(\"Roboto-Italic\"), url(\"./fonts/roboto-v20-latin-italic.eot?#iefix\") format(\"embedded-opentype\"), url(\"./fonts/roboto-v20-latin-italic.woff2\") format(\"woff2\"), url(\"./fonts/roboto-v20-latin-italic.woff\") format(\"woff\"), url(\"./fonts/roboto-v20-latin-italic.ttf\") format(\"truetype\"), url(\"./fonts/roboto-v20-latin-italic.svg#Roboto\") format(\"svg\");}@font-face{font-family:Roboto;font-style:normal;font-weight:700;src:url(\"./fonts/roboto-v20-latin-700.eot\");src:local(\"Roboto Bold\"), local(\"Roboto-Bold\"), url(\"./fonts/roboto-v20-latin-700.eot?#iefix\") format(\"embedded-opentype\"), url(\"./fonts/roboto-v20-latin-700.woff2\") format(\"woff2\"), url(\"./fonts/roboto-v20-latin-700.woff\") format(\"woff\"), url(\"./fonts/roboto-v20-latin-700.ttf\") format(\"truetype\"), url(\"./fonts/roboto-v20-latin-700.svg#Roboto\") format(\"svg\");}body{font-family:Roboto, sans-serif;font-weight:400;font-size:12px;line-height:20px}h1{font-family:Roboto, sans-serif;font-weight:400;font-weight:300;font-size:24px;line-height:32px}h2{font-family:Roboto, sans-serif;font-weight:400;font-weight:300;font-size:18px;line-height:24px}h3{font-family:Roboto, sans-serif;font-weight:400;font-weight:700;font-size:14px;line-height:20px}h4,h5,h6{font-family:Roboto, sans-serif;font-weight:400;font-size:14px;line-height:20px}.gux-icon-anchor gux-icon{padding-right:8px}a{color:#2a60c8;text-decoration:underline;border-radius:2px}a:hover{color:#2754ac}a:active{color:#23478f}a:focus-visible{outline:3px solid #aac9ff;outline-offset:1px;box-shadow:0 0 0 1px #fdfdfd}table a{color:#2a60c8;text-decoration:underline;border-radius:2px;text-decoration:none}table a:hover{color:#2754ac}table a:active{color:#23478f}table a:focus-visible{outline:3px solid #aac9ff;outline-offset:1px;box-shadow:0 0 0 1px #fdfdfd}: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 fade(#202937, 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;margin:0 12px 0 8px;color:#2e394c}.gux-content .gux-title,.gux-content .gux-message{flex:1 1 auto;align-self:auto;order:0}.gux-content .gux-title{font-family:Roboto, sans-serif;font-weight:400;font-size:14px;line-height:20px}";
+const guxNotificationToastCss = ":host{position:relative;display:flex;flex-direction:row;flex-wrap:nowrap;place-content:stretch flex-start;align-items: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;place-content:stretch flex-start;align-items:flex-start;align-self:auto;order:0;margin:0 12px 0 8px;color:#2e394c}.gux-content .gux-title,.gux-content .gux-message{flex:1 1 auto;align-self:auto;order:0}.gux-content .gux-title{font-family:var(--gse-core-typography-heading-sm-fontFamily), var(--gse-core-fontFamily-heading), sans-serif;font-size:var(--gse-core-typography-heading-sm-fontSize);line-height:var(--gse-core-typography-heading-sm-lineHeight);font-weight:var(--gse-core-fontWeight-bold)}";
 
 const GuxNotificationToast = class {
   constructor(hostRef) {

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

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-0d0fdb85.js');
-const randomHtmlId = require('./random-html-id-b86b61c0.js');
+const index = require('./index-75c9f0d9.js');
+const randomHtmlId = require('./random-html-id-32ef8847.js');
 
-const guxOptionIconCss = "gux-option-icon{box-sizing:border-box;display:flex;height:32px;padding:6px 8px;color:#2e394c;word-wrap:break-word;cursor:pointer;align-items:flex-start}gux-option-icon.gux-disabled{pointer-events:none;cursor:default;opacity:0.5}gux-option-icon.gux-selected{background:#deeaff}gux-option-icon.gux-active,gux-option-icon.gux-hovered:not(:disabled){color:#fdfdfd;background:#2a60c8}gux-option-icon.gux-filtered{display:none}gux-option-icon .gux-slot-container{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}gux-option-icon gux-icon{flex-shrink:0;width:16px;height:16px;margin-block-start:calc((20px - 16px) / 2);margin-inline-end:8px}";
+const guxOptionIconCss = ":host{box-sizing:border-box;display:flex;flex-direction:row;flex-wrap:nowrap;gap:var(--gse-ui-menu-option-gap);place-content:stretch center;align-items:center;height:var(--gse-ui-menu-option-height);padding:var(--gse-ui-menu-option-padding);font-family:var(--gse-ui-menu-option-label-default-text-fontFamily);font-size:var(--gse-ui-menu-option-label-default-text-fontSize);font-weight:var(--gse-ui-menu-option-label-default-text-fontWeight);line-height:var(--gse-ui-menu-option-label-default-text-lineHeight);color:var(--gse-ui-menu-option-label-foregroundColor);word-wrap:break-word;cursor:pointer}:host .gux-slot-container{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host(.gux-disabled){pointer-events:none;cursor:default;opacity:var(--gse-ui-menu-option-disabled-opacity)}:host(.gux-selected){font-family:var(--gse-ui-menu-option-label-active-text-fontFamily);font-size:var(--gse-ui-menu-option-label-active-text-fontSize);font-weight:var(--gse-ui-menu-option-label-active-text-fontWeight);line-height:var(--gse-ui-menu-option-label-active-text-lineHeight);background:var(--gse-ui-menu-option-selected-backgroundColor)}:host(:active:not(:disabled)){font-family:var(--gse-ui-menu-option-label-active-text-fontFamily);font-size:var(--gse-ui-menu-option-label-active-text-fontSize);font-weight:var(--gse-ui-menu-option-label-active-text-fontWeight);line-height:var(--gse-ui-menu-option-label-active-text-lineHeight)}:host(.gux-active){border-radius:var(--gse-semantic-focusRing-cornerRadius);outline:var(--gse-ui-menu-option-focus-border-width) var(--gse-ui-menu-option-focus-border-style) var(--gse-ui-menu-option-focus-border-color);outline-offset:-2px}:host(:hover:not(:disabled)){background:var(--gse-ui-menu-option-hover-backgroundColor)}:host(.gux-filtered){display:none}:host gux-icon{flex-shrink:0;width:var(--gse-ui-menu-option-startIcon-width);height:var(--gse-ui-menu-option-startIcon-height)}";
 
 const GuxOptionIcon = class {
   constructor(hostRef) {

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

@@ -2,17 +2,17 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-0d0fdb85.js');
-const randomHtmlId = require('./random-html-id-b86b61c0.js');
-const index$1 = require('./index-9bbde1aa.js');
-require('./get-closest-element-ab4b2eee.js');
+const index = require('./index-75c9f0d9.js');
+const randomHtmlId = require('./random-html-id-32ef8847.js');
+const index$1 = require('./index-dee802be.js');
+require('./get-closest-element-26894e5a.js');
 
 const removeCustomElementInstructions = ", unselecting this custom option will remove it from the list";
 const translationResources = {
 	removeCustomElementInstructions: removeCustomElementInstructions
 };
 
-const guxOptionMultiCss = "gux-option-multi{box-sizing:border-box;display:flex;min-height:32px;padding:6px 12px;color:#2e394c;word-wrap:break-word;cursor:pointer}gux-option-multi .gux-checkbox-container::before{position:relative;top:2px;display:inline-block;width:13px;height:13px;margin-right:7px;content:'';background-color:white;background-image:url(\"data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' fill-rule='evenodd' clip-rule='evenodd' viewBox='1 1 13 13'%3E%3Cpath d='M11 2.5H4C3.17157 2.5 2.5 3.17157 2.5 4V11C2.5 11.8284 3.17157 12.5 4 12.5H11C11.8284 12.5 12.5 11.8284 12.5 11V4C12.5 3.17157 11.8284 2.5 11 2.5ZM4 1C2.34315 1 1 2.34315 1 4V11C1 12.6569 2.34315 14 4 14H11C12.6569 14 14 12.6569 14 11V4C14 2.34315 12.6569 1 11 1H4Z' fill='%23596373' /%3E%3C/svg%3E\");border-radius:30%}gux-option-multi.gux-disabled{pointer-events:none;cursor:default;opacity:0.5}gux-option-multi.gux-selected .gux-checkbox-container::before{background-image:url(\"data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' fill-rule='evenodd' clip-rule='evenodd' viewBox='1 1 13 13'%3E%3Cpath d='M4 1H11C11.7956 1 12.5587 1.31607 13.1213 1.87868C13.6839 2.44129 14 3.20435 14 4V11C14 11.7956 13.6839 12.5587 13.1213 13.1213C12.5587 13.6839 11.7956 14 11 14H4C3.20435 14 2.44129 13.6839 1.87868 13.1213C1.31607 12.5587 1 11.7956 1 11V4C1 3.20435 1.31607 2.44129 1.87868 1.87868C2.44129 1.31607 3.20435 1 4 1ZM5.57018 10.4198C5.7051 10.5547 5.87599 10.6177 6.04689 10.6177C6.22678 10.6177 6.39767 10.5457 6.52359 10.4198L11.7944 5.14905C12.0552 4.88821 12.0552 4.45647 11.7944 4.19563C11.5335 3.93479 11.1018 3.93479 10.841 4.19563L6.04689 8.9897L4.14905 7.08286C3.88821 6.82202 3.45647 6.82202 3.19563 7.08286C2.93479 7.3437 2.93479 7.77544 3.19563 8.03628L5.57018 10.4198Z' fill='%232a60c8' /%3E%3C/svg%3E\")}gux-option-multi.gux-active,gux-option-multi.gux-hovered:not([disabled]){color:#fdfdfd;background:#2a60c8}gux-option-multi.gux-active.gux-selected .gux-checkbox-container::before,gux-option-multi.gux-hovered:not([disabled]).gux-selected .gux-checkbox-container::before{background-image:url(\"data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' fill-rule='evenodd' clip-rule='evenodd' viewBox='1 1 13 13'%3E%3Cpath d='M5.57018 10.4198C5.7051 10.5547 5.87599 10.6177 6.04689 10.6177C6.22678 10.6177 6.39767 10.5457 6.52359 10.4198L11.7944 5.14905C12.0552 4.88821 12.0552 4.45647 11.7944 4.19563C11.5335 3.93479 11.1018 3.93479 10.841 4.19563L6.04689 8.9897L4.14905 7.08286C3.88821 6.82202 3.45647 6.82202 3.19563 7.08286C2.93479 7.3437 2.93479 7.77544 3.19563 8.03628L5.57018 10.4198Z' fill='%232a60c8' /%3E%3C/svg%3E\")}gux-option-multi.gux-active:not(.gux-selected) .gux-checkbox-container::before,gux-option-multi.gux-hovered:not([disabled]):not(.gux-selected) .gux-checkbox-container::before{background-image:url(\"data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' fill-rule='evenodd' clip-rule='evenodd' viewBox='1 1 13 13'%3E%3Cpath d='M11 2.5H4C3.17157 2.5 2.5 3.17157 2.5 4V11C2.5 11.8284 3.17157 12.5 4 12.5H11C11.8284 12.5 12.5 11.8284 12.5 11V4C12.5 3.17157 11.8284 2.5 11 2.5ZM4 1C2.34315 1 1 2.34315 1 4V11C1 12.6569 2.34315 14 4 14H11C12.6569 14 14 12.6569 14 11V4C14 2.34315 12.6569 1 11 1H4Z' fill='none' /%3E%3C/svg%3E\")}gux-option-multi.gux-filtered{display:none}gux-option-multi .gux-screenreader{position:absolute;top:auto;left:-10000px;width:1px;height:1px;overflow:hidden}";
+const guxOptionMultiCss = ":host{box-sizing:border-box;display:flex;flex-direction:row;flex-wrap:nowrap;gap:var(--gse-ui-menu-option-gap);align-content:stretch;align-items:center;min-height:var(--gse-ui-menu-option-height);padding:var(--gse-ui-menu-option-padding);font-family:var(--gse-ui-menu-option-label-default-text-fontFamily);font-size:var(--gse-ui-menu-option-label-default-text-fontSize);font-weight:var(--gse-ui-menu-option-label-default-text-fontWeight);line-height:var(--gse-ui-menu-option-label-default-text-lineHeight);color:var(--gse-ui-menu-option-label-foregroundColor);word-wrap:break-word;cursor:pointer}:host .gux-checkbox-container{position:relative;display:inline-block;min-width:var(--gse-ui-menu-option-startIcon-width);max-width:var(--gse-ui-menu-option-startIcon-width);height:var(--gse-ui-menu-option-startIcon-height);content:\"\"}:host .gux-checkbox-container>path{fill:var(--gse-ui-menu-option-checkbox-unchecked-default-foregroundColor)}:host:host(.gux-disabled){opacity:var(--gse-ui-menu-option-disabled-opacity);pointer-events:none;cursor:default}:host:host(:active:not(:disabled)){font-family:var(--gse-ui-menu-option-label-active-text-fontFamily);font-size:var(--gse-ui-menu-option-label-active-text-fontSize);font-weight:var(--gse-ui-menu-option-label-active-text-fontWeight);line-height:var(--gse-ui-menu-option-label-active-text-lineHeight)}:host:host(.gux-selected){font-family:var(--gse-ui-menu-option-label-active-text-fontFamily);font-size:var(--gse-ui-menu-option-label-active-text-fontSize);font-weight:var(--gse-ui-menu-option-label-active-text-fontWeight);line-height:var(--gse-ui-menu-option-label-active-text-lineHeight);background-color:var(--gse-ui-menu-option-selected-backgroundColor)}:host:host(.gux-selected) .gux-checkbox-container>path{fill:var(--gse-ui-menu-option-checkbox-checked-default-foregroundColor)}:host:host(.gux-active){border-radius:var(--gse-semantic-focusRing-cornerRadius);outline:var(--gse-ui-menu-option-focus-border-width) var(--gse-ui-menu-option-focus-border-style) var(--gse-ui-menu-option-focus-border-color);outline-offset:-2px}:host:host(:hover:not([disabled])){background-color:var(--gse-ui-menu-option-hover-backgroundColor)}:host:host(:hover:not([disabled])):host(.gux-selected) .gux-checkbox-container>path{fill:var(--gse-ui-menu-option-checkbox-checked-hover-foregroundColor)}:host:host(:hover:not([disabled])):host(:not(.gux-selected)) .gux-checkbox-container>path{fill:var(--gse-ui-menu-option-checkbox-unchecked-hover-foregroundColor)}:host:host(.gux-filtered){display:none}:host .gux-screenreader{position:absolute;top:auto;left:-10000px;width:1px;height:1px;overflow:hidden}";
 
 const GuxOptionMulti = class {
   constructor(hostRef) {
@@ -24,15 +24,8 @@ const GuxOptionMulti = class {
     this.selected = false;
     this.disabled = false;
     this.filtered = false;
-    this.hovered = false;
     this.custom = false;
   }
-  onmouseenter() {
-    this.hovered = true;
-  }
-  onMouseleave() {
-    this.hovered = false;
-  }
   emitRemoveCustomOption() {
     if (!this.selected && this.custom) {
       this.guxremovecustomoption.emit();
@@ -54,6 +47,12 @@ const GuxOptionMulti = class {
       this.internalselectcustomoption.emit(this.value);
     }
   }
+  // SVGs must be in DOM for tokenization to work
+  renderSVGCheckbox() {
+    return this.selected
+      ? (index.h("svg", { class: "gux-checkbox-container", xmlns: "http://www.w3.org/2000/svg", viewBox: "1 1 13 13" }, index.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M4 1H11C11.7956 1 12.5587 1.31607 13.1213 1.87868C13.6839 2.44129 14 3.20435 14 4V11C14 11.7956 13.6839 12.5587 13.1213 13.1213C12.5587 13.6839 11.7956 14 11 14H4C3.20435 14 2.44129 13.6839 1.87868 13.1213C1.31607 12.5587 1 11.7956 1 11V4C1 3.20435 1.31607 2.44129 1.87868 1.87868C2.44129 1.31607 3.20435 1 4 1ZM5.57018 10.4198C5.7051 10.5547 5.87599 10.6177 6.04689 10.6177C6.22678 10.6177 6.39767 10.5457 6.52359 10.4198L11.7944 5.14905C12.0552 4.88821 12.0552 4.45647 11.7944 4.19563C11.5335 3.93479 11.1018 3.93479 10.841 4.19563L6.04689 8.9897L4.14905 7.08286C3.88821 6.82202 3.45647 6.82202 3.19563 7.08286C2.93479 7.3437 2.93479 7.77544 3.19563 8.03628L5.57018 10.4198Z" })))
+      : (index.h("svg", { class: "gux-checkbox-container", xmlns: "http://www.w3.org/2000/svg", viewBox: "1 1 13 13" }, index.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M11 2.5H4C3.17157 2.5 2.5 3.17157 2.5 4V11C2.5 11.8284 3.17157 12.5 4 12.5H11C11.8284 12.5 12.5 11.8284 12.5 11V4C12.5 3.17157 11.8284 2.5 11 2.5ZM4 1C2.34315 1 1 2.34315 1 4V11C1 12.6569 2.34315 14 4 14H11C12.6569 14 14 12.6569 14 11V4C14 2.34315 12.6569 1 11 1H4Z" })));
+  }
   renderCustomOptionInstructions() {
     if (this.custom) {
       return (index.h("span", { class: "gux-screenreader" }, this.i18n('removeCustomElementInstructions')));
@@ -64,9 +63,8 @@ const GuxOptionMulti = class {
         'gux-active': this.active,
         'gux-disabled': this.disabled,
         'gux-filtered': this.filtered,
-        'gux-hovered': this.hovered,
         'gux-selected': this.selected
-      }, "aria-selected": this.selected.toString(), "aria-disabled": this.disabled.toString() }, index.h("span", { class: "gux-checkbox-container" }), index.h("gux-truncate", { "gux-slot-container": true, ref: el => (this.truncateElement = el) }, index.h("slot", null)), this.renderCustomOptionInstructions()));
+      }, "aria-selected": this.selected.toString(), "aria-disabled": this.disabled.toString() }, this.renderSVGCheckbox(), index.h("gux-truncate", { "gux-slot-container": true, ref: el => (this.truncateElement = el) }, index.h("slot", null)), this.renderCustomOptionInstructions()));
   }
   get root() { return index.getElement(this); }
   static get watchers() { return {

package/dist/cjs/gux-page-loading-spinner.cjs.entry.js

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-0d0fdb85.js');
-const usage = require('./usage-24342df6.js');
+const index = require('./index-75c9f0d9.js');
+const usage = require('./usage-bfcc4d96.js');
 
 const guxPageLoadingSpinnerCss = ":host{display:flex}.gux-spinner{margin:auto}";