genesys-spark-components 4.136.0 → 4.137.1

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

@@ -6,7 +6,7 @@ const index = require('./index-1337610f.js');
 const onClickOutside = require('./on-click-outside-bfd599ca.js');
 const whenEventIsFrom = require('./when-event-is-from-dd77a8d3.js');
 const afterNextRender = require('./after-next-render-162425fe.js');
-const usage = require('./usage-bbd900ad.js');
+const usage = require('./usage-47b5afb6.js');
 
 const guxButtonMultiAccent = ['primary', 'secondary', 'tertiary'];
 function getGuxButtonMultiAccent(maybeGuxButtonMultiAccent) {
@@ -111,7 +111,7 @@ const GuxButtonMulti = class {
         usage.trackComponent(this.root, { variant: this.accent });
     }
     render() {
-        return (index.h("gux-popup", { key: 'b93c218e443b7708675aecf20b5d4b2965a4ae0f', expanded: this.isOpen, "exceed-target-width": true, placement: "bottom-end" }, index.h("div", { key: '71544f057474bfa38d99eab121ae7873f08d0c9c', slot: "target", class: "gux-button-multi-container" }, index.h("gux-button-slot", { key: '52cd56065cd383def92e7cc56a852707360e5ff5', class: "gux-dropdown-button", accent: getGuxButtonMultiAccent(this.accent) }, index.h("button", { key: 'cfac597b81a709fd3be4b439414a116e4abc4f5c', type: "button", disabled: this.disabled, ref: el => (this.dropdownButton = el), onMouseUp: () => this.toggle(), "aria-haspopup": "true", "aria-expanded": this.isOpen.toString() }, index.h("slot", { key: 'b33d0ab04060158058b68936c1a1b3414814b5b3', name: "title" }), index.h("gux-icon", { key: 'e33e7b198e6e5c5b9a64c3a562ca66c27234a18e', size: "small", decorative: true, "icon-name": "custom/chevron-down-small-regular" })))), index.h("div", { key: 'efaf834bfe079d12f87726dd891fc5e0ba466b21', class: "gux-list-container", slot: "popup" }, index.h("gux-list", { key: 'bf3ece40db97ea59634fbdd73a454ea10d59bdd9', onClick: (e) => this.onListClick(e), ref: el => (this.listElement = el) }, index.h("slot", { key: 'c3bb4fb2aadee21dc89a5968130a3ffe1af7c648' })))));
+        return (index.h("gux-popup", { key: '37d3a840914a457cfc41be16404d46f2e87d1914', expanded: this.isOpen, "exceed-target-width": true, placement: "bottom-end" }, index.h("div", { key: '261cfdbe101f17ddd7493f11c33f49f3b39eec87', slot: "target", class: "gux-button-multi-container" }, index.h("gux-button-slot", { key: '4d074a5db751c1969d4d1826aa046422cc64950a', class: "gux-dropdown-button", accent: getGuxButtonMultiAccent(this.accent) }, index.h("button", { key: '0aacd40c9e4e469c6fe7ca725de1974e6d61f90a', type: "button", disabled: this.disabled, ref: el => (this.dropdownButton = el), onMouseUp: () => this.toggle(), "aria-haspopup": "true", "aria-expanded": this.isOpen.toString() }, index.h("slot", { key: '892695d6b5cf16b035b67475a9908220af1761f0', name: "title" }), index.h("gux-icon", { key: 'ca3d7ea120bee12d21efb83a85fd5da372c5d033', size: "small", decorative: true, "icon-name": "custom/chevron-down-small-regular" })))), index.h("div", { key: '66d97b939e4692d380d44d8a1bea3300b654434d', class: "gux-list-container", slot: "popup" }, index.h("gux-list", { key: '18a890500116e6bb8f808eefbd384de161bd5b6d', onClick: (e) => this.onListClick(e), ref: el => (this.listElement = el) }, index.h("slot", { key: '693bd27986f05edee01e9c346d4364b1ec1b01b6' })))));
     }
     static get delegatesFocus() { return true; }
     get root() { return index.getElement(this); }

package/dist/cjs/gux-button-slot.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-1337610f.js');
-const usage = require('./usage-bbd900ad.js');
+const usage = require('./usage-47b5afb6.js');
 const logError = require('./log-error-7b9d4b57.js');
 
 const guxButtonSlotCss = ":host{display:inline-block;pointer-events:none}::slotted(input[type=button]),::slotted(input[type=submit]),::slotted(button){font-family:var(--gse-ui-button-text-fontFamily);font-size:var(--gse-ui-button-text-fontSize);font-weight:var(--gse-ui-button-text-fontWeight);line-height:var(--gse-ui-button-text-lineHeight);inline-size:100%;min-inline-size:var(--gse-ui-button-iconOnly-width);block-size:var(--gse-ui-button-default-height);padding:var(--gse-ui-button-default-padding);overflow:hidden;text-overflow:ellipsis;color:var(--gse-ui-button-secondary-default-foregroundColor);white-space:nowrap;pointer-events:auto;cursor:pointer;background-color:var(--gse-ui-button-secondary-default-backgroundColor);border:none;border-radius:var(--gse-ui-button-borderRadius)}:host([icon-only]) ::slotted(input[type=button]),:host([icon-only]) ::slotted(input[type=submit]),:host([icon-only]) ::slotted(button){padding:var(--gse-ui-button-default-paddingIconOnly)}::slotted(input[type=button][disabled]),::slotted(input[type=submit][disabled]),::slotted(button[disabled]){cursor:default;opacity:var(--gse-ui-button-disabled-opacity)}::slotted(input[type=button]:focus),::slotted(input[type=submit]:focus),::slotted(button:focus){outline:none}::slotted(input[type=button]:focus-visible:enabled),::slotted(input[type=submit]:focus-visible:enabled),::slotted(button:focus-visible:enabled){outline:var(--gse-semantic-focusOutline-md-borderWidth) solid var(--gse-semantic-border-focus);outline-offset:var(--gse-semantic-focusOutline-offset)}::slotted(input[type=button]:hover:enabled),::slotted(input[type=submit]:hover:enabled),::slotted(button:hover:enabled){color:var(--gse-ui-button-secondary-hover-foregroundColor);background-color:var(--gse-ui-button-secondary-hover-backgroundColor)}::slotted(input[type=button]:active:enabled),::slotted(input[type=submit]:active:enabled),::slotted(button:active:enabled){color:var(--gse-ui-button-secondary-active-foregroundColor);background-color:var(--gse-ui-button-secondary-active-backgroundColor)}:host([accent=primary]) ::slotted(input[type=button]),:host([accent=primary]) ::slotted(input[type=submit]),:host([accent=primary]) ::slotted(button){color:var(--gse-ui-button-primary-default-foregroundColor);background-color:var(--gse-ui-button-primary-default-backgroundColor)}:host([accent=primary]) ::slotted(input[type=button]:hover:enabled),:host([accent=primary]) ::slotted(input[type=submit]:hover:enabled),:host([accent=primary]) ::slotted(button:hover:enabled){color:var(--gse-ui-button-primary-hover-foregroundColor);background-color:var(--gse-ui-button-primary-hover-backgroundColor)}:host([accent=primary]) ::slotted(input[type=button]:active:enabled),:host([accent=primary]) ::slotted(input[type=submit]:active:enabled),:host([accent=primary]) ::slotted(button:active:enabled){color:var(--gse-ui-button-primary-active-foregroundColor);background-color:var(--gse-ui-button-primary-active-backgroundColor)}:host([accent=tertiary]) ::slotted(input[type=button]),:host([accent=tertiary]) ::slotted(input[type=submit]),:host([accent=tertiary]) ::slotted(button){color:var(--gse-ui-button-tertiary-default-foregroundColor);background-color:var(--gse-ui-button-tertiary-default-backgroundColor);border-color:var(--gse-ui-button-tertiary-default-border-color);border-style:var(--gse-ui-button-tertiary-default-border-style);border-width:var(--gse-ui-button-tertiary-default-border-width)}:host([accent=tertiary]) ::slotted(input[type=button]:hover:enabled),:host([accent=tertiary]) ::slotted(input[type=submit]:hover:enabled),:host([accent=tertiary]) ::slotted(button:hover:enabled){color:var(--gse-ui-button-tertiary-hover-foregroundColor);background-color:var(--gse-ui-button-tertiary-hover-backgroundColor)}:host([accent=tertiary]) ::slotted(input[type=button]:active:enabled),:host([accent=tertiary]) ::slotted(input[type=submit]:active:enabled),:host([accent=tertiary]) ::slotted(button:active:enabled){color:var(--gse-ui-button-tertiary-active-foregroundColor);background-color:var(--gse-ui-button-tertiary-active-backgroundColor)}:host([accent=ghost]) ::slotted(input[type=button]),:host([accent=ghost]) ::slotted(input[type=submit]),:host([accent=ghost]) ::slotted(button){color:var(--gse-ui-button-ghost-default-foregroundColor);background-color:var(--gse-ui-button-ghost-default-backgroundColor)}:host([accent=ghost]) ::slotted(input[type=button]:hover:enabled),:host([accent=ghost]) ::slotted(input[type=submit]:hover:enabled),:host([accent=ghost]) ::slotted(button:hover:enabled){color:var(--gse-ui-button-ghost-hover-foregroundColor);background-color:var(--gse-ui-button-ghost-hover-backgroundColor)}:host([accent=ghost]) ::slotted(input[type=button]:active:enabled),:host([accent=ghost]) ::slotted(input[type=submit]:active:enabled),:host([accent=ghost]) ::slotted(button:active:enabled){color:var(--gse-ui-button-ghost-active-foregroundColor);background-color:var(--gse-ui-button-ghost-active-backgroundColor)}:host([accent=danger]) ::slotted(input[type=button]),:host([accent=danger]) ::slotted(input[type=submit]),:host([accent=danger]) ::slotted(button){color:var(--gse-ui-button-danger-default-foregroundColor);background-color:var(--gse-ui-button-danger-default-backgroundColor)}:host([accent=danger]) ::slotted(input[type=button]:hover:enabled),:host([accent=danger]) ::slotted(input[type=submit]:hover:enabled),:host([accent=danger]) ::slotted(button:hover:enabled){color:var(--gse-ui-button-danger-hover-foregroundColor);background-color:var(--gse-ui-button-danger-hover-backgroundColor)}:host([accent=danger]) ::slotted(input[type=button]:active:enabled),:host([accent=danger]) ::slotted(input[type=submit]:active:enabled),:host([accent=danger]) ::slotted(button:active:enabled){color:var(--gse-ui-button-danger-active-foregroundColor);background-color:var(--gse-ui-button-danger-active-backgroundColor)}:host([accent=inline]){min-inline-size:initial}:host([accent=inline]) ::slotted(input[type=button]),:host([accent=inline]) ::slotted(input[type=submit]),:host([accent=inline]) ::slotted(button){block-size:initial;padding:0;color:var(--gse-ui-links-default-foregroundColor);background:none;border:none}:host([accent=inline]) ::slotted(input[type=button][disabled]),:host([accent=inline]) ::slotted(input[type=submit][disabled]),:host([accent=inline]) ::slotted(button[disabled]){color:var(--gse-ui-links-disabled-foregroundColor)}:host([accent=inline]) ::slotted(input[type=button]:hover:enabled),:host([accent=inline]) ::slotted(input[type=submit]:hover:enabled),:host([accent=inline]) ::slotted(button:hover:enabled){color:var(--gse-ui-links-hover-foregroundColor);text-decoration:underline;background:none}:host([accent=inline]) ::slotted(input[type=button]:active:enabled),:host([accent=inline]) ::slotted(input[type=submit]:active:enabled),:host([accent=inline]) ::slotted(button:active:enabled){color:var(--gse-ui-links-active-foregroundColor);text-decoration:underline;background:none}";
@@ -38,7 +38,7 @@ const GuxButtonSlot = class {
         this.validateSlotContent();
     }
     render() {
-        return (index.h(index.Host, { key: '427a1d34e7b47ed888ff59ec452655c1fb40f468', accent: this.accent, "icon-only": this.iconOnly }, index.h("slot", { key: '333a16b4e6b114ba5ab7ef50ebd348661c73fe18' })));
+        return (index.h(index.Host, { key: 'd4a087a28166a6762c5dba93d6db6b7943b188d6', accent: this.accent, "icon-only": this.iconOnly }, index.h("slot", { key: '1474b37d951f1311b3b778e1b9549c3085d331c3' })));
     }
     get root() { return index.getElement(this); }
 };

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-1337610f.js');
-const usage = require('./usage-bbd900ad.js');
+const usage = require('./usage-47b5afb6.js');
 const randomHtmlId = require('./random-html-id-71c43d5a.js');
 const floatingUi_dom_esm = require('./floating-ui.dom.esm-471324c9.js');
 const onClickOutside = require('./on-click-outside-bfd599ca.js');
@@ -32,10 +32,10 @@ const GuxButton = class {
     }
     render() {
         return [
-            index.h("button", { key: '24dbbdfe3e039dea0cbdc2d452cb0cf5da7f9d9b', id: this.buttonId, type: this.type, disabled: this.disabled, class: {
+            index.h("button", { key: 'bb8f1bdb849e1d65957f95e9def0251929afc02b', id: this.buttonId, type: this.type, disabled: this.disabled, class: {
                     [`gux-${this.accent}`]: true,
                     'gux-icon-only': this.iconOnly
-                }, "aria-label": this.guxTitle, autofocus: this.autofocus }, index.h("slot", { key: '3cdf6222d210ad14536037885d5d6b54f684a209', onSlotchange: this.slotChanged.bind(this) })),
+                }, "aria-label": this.guxTitle, autofocus: this.autofocus }, index.h("slot", { key: '4040a4ee4754711f157db46b44c9cc8060b14d75', onSlotchange: this.slotChanged.bind(this) })),
             this.renderTooltip()
         ];
     }
@@ -118,7 +118,7 @@ const GuxPopover = class {
         this.guxdismiss = index.createEvent(this, "guxdismiss", 7);
         this.for = undefined;
         this.position = 'bottom';
-        this.displayDismissButton = undefined;
+        this.displayDismissButton = false;
         this.closeOnClickOutside = false;
         this.isOpen = false;
     }
@@ -245,16 +245,11 @@ const GuxPopover = class {
             this.cleanupUpdatePosition();
         }
     }
-    renderDismissButton() {
-        if (this.displayDismissButton) {
-            return (index.h("gux-dismiss-button", { onClick: this.dismiss.bind(this), position: "inherit" }));
-        }
-    }
     render() {
-        return (index.h("div", { key: 'b0002a28ec5128deee1a4818eae6ff432b989787', ref: (el) => (this.popupElement = el), class: {
+        return (index.h("div", { key: '7ce7fb05a6b0fb15e1847c631173ace759e34c07', ref: (el) => (this.popupElement = el), class: {
                 'gux-hidden': !this.isOpen,
                 'gux-popover-wrapper': true
-            }, "data-placement": true }, index.h("div", { key: 'b348410fbe256b2b1919817df3c93e1e9566604a', ref: (el) => (this.arrowElement = el), class: "gux-arrow" }, index.h("div", { key: '2fba39c9a49775e5fca309603b33f63e69cfd737', class: "gux-arrow-caret" })), index.h("div", { key: 'a9fd319dd71aafc0a4064f98cb80400f982e0eca', class: { 'gux-popover-header': Boolean(this.titleSlot) } }, index.h("slot", { key: 'ab97d1d3a55505d8968830a54222f5f64a830c34', name: "title" }), this.renderDismissButton()), index.h("div", { key: '5499605686f9e3760d6330b286f0fdf721135ee8', class: "gux-popover-content" }, index.h("slot", { key: '98a79c9477ff7cba76b6d41ed272c9c87feee01d' }))));
+            }, "data-placement": true }, index.h("div", { key: 'ad9fd496c4066842e0c59bf06d19984f7cbddbac', ref: (el) => (this.arrowElement = el), class: "gux-arrow" }, index.h("div", { key: '00f208084c889784f1f63e9fc883be1496fc8d80', class: "gux-arrow-caret" })), this.displayDismissButton && (index.h("gux-dismiss-button", { key: 'fc710debcabb025cfc16e17459149dc788c0b41b', onClick: this.dismiss.bind(this) })), index.h("div", { key: 'bda24003547cf31e5dbe0118b46264df7a6a602a', class: { 'gux-popover-header': Boolean(this.titleSlot) } }, index.h("slot", { key: '4da6d63b51c5c855b9adb8306741769fd6a29be4', name: "title" })), index.h("div", { key: 'd0ea719a8ea2bae4bd198d8333ecc7a0d04b4baa', class: "gux-popover-content" }, index.h("slot", { key: '5fd95c02d7eb2d4445eea04aba6889134d1558d4' }))));
     }
     get root() { return index.getElement(this); }
 };

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

@@ -3,16 +3,23 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-1337610f.js');
-const isoDates = require('./iso-dates-2daf4199.js');
-const capitalizeFirstLetter = require('./capitalize-first-letter-424667dc.js');
-const index$1 = require('./index-c7d87150.js');
+const index_umd = require('./index.umd-5b362f2d.js');
+const index$1 = require('./index-3ee995a4.js');
 const afterNextRender = require('./after-next-render-162425fe.js');
 const logError = require('./log-error-7b9d4b57.js');
 const simulateNativeEvent = require('./simulate-native-event-e88bf64f.js');
+require('./_commonjsHelpers-0192c5b3.js');
 require('./get-closest-element-9e41d6b9.js');
 
+/**
+ * Given a date, return the first day of the month that date is in.
+ */
 function getFirstOfMonth(date) {
-    return new Date(date.getFullYear(), date.getMonth(), 1, 0, 0, 0);
+    return index_umd.index_umd.exports.Temporal.PlainDate.from({
+        day: 1,
+        month: date.month,
+        year: date.year
+    });
 }
 function getWeekdays(locale, startDayOfWeek) {
     const days = [];
@@ -25,20 +32,72 @@ function getWeekdays(locale, startDayOfWeek) {
     }
     return rotateArray(days, startDayOfWeek);
 }
-function getDateAsMonthYear(date, locale) {
-    return capitalizeFirstLetter.capitalizeFirstLetter(date.toLocaleDateString(locale, { year: 'numeric', month: 'long' }));
-}
 function rotateArray(arr, n) {
     const times = n % arr.length;
     return arr.concat(arr.splice(0, times));
 }
-function firstDateInMonth(month, year, startDayOfWeek) {
-    const startDate = new Date(year, month, 1, 0, 0, 0, 0);
-    const firstDayOfMonth = startDate.getDay();
-    const firstDayOffset = (-1 * (startDayOfWeek - firstDayOfMonth - 7)) % 7;
-    const firstDateInMonth = new Date(startDate.getTime() - firstDayOffset * (86400 * 1000));
-    firstDateInMonth.setHours(0, 0, 0, 0);
-    return firstDateInMonth;
+function localizedYearMonth(date, locale) {
+    return date.toLocaleString(locale, { year: 'numeric', month: 'long' });
+}
+/**
+ * Given a starting date and the first day of the week, find the first date of
+ * the week of the provided date. For example, February 1st 2025 is a Saturday.
+ * If the first day of the week is considered Monday (1), this function would
+ * return a date of 2027-01-27.
+ * @param date The date we want to find the start of the week for
+ * @param startDayOfWeek The day that should be considered the first day of the week
+ * @returns The first day of the first week of the provided month
+ */
+function firstDateInWeek(date, startDayOfWeek) {
+    let dayDelta = startDayOfWeek - date.dayOfWeek;
+    if (dayDelta > 0) {
+        dayDelta = dayDelta - 7;
+    }
+    return date.add({ days: dayDelta });
+}
+class AttributeSynchronizer {
+    constructor(options) {
+        this.writeTarget = options.writeTo;
+        this.mappings = options.mappings;
+        this.observer = new MutationObserver(changes => {
+            changes.forEach(change => {
+                const name = change.attributeName;
+                this.syncAttribute(name);
+            });
+        });
+        this.setSourceElement(options.readFrom);
+    }
+    /**
+     * Changes the source element attributes are copied from. Usually called in
+     * response to a `slotchange` event.
+     * @param sourceElement
+     */
+    setSourceElement(sourceElement) {
+        this.observer.disconnect(); // Stop observing any previously observed element
+        this.sourceElement = sourceElement; // Start reading from the new source
+        this.syncAll(); // Sync data from the new source
+        // Start the observer back up with the new source
+        this.observer.observe(sourceElement, {
+            attributes: true,
+            attributeFilter: Object.keys(this.mappings)
+        });
+    }
+    /**
+     * Disconnects the synchronization between the source and destination elements.
+     * Should be called to clean up when the relationship is no longer needed,
+     * typically on `disconnectedCallback`.
+     */
+    disconnect() {
+        this.observer.disconnect();
+    }
+    syncAll() {
+        Object.keys(this.mappings).forEach(name => {
+            this.writeTarget[name] = this.mappings[name](this.sourceElement[name]);
+        });
+    }
+    syncAttribute(name) {
+        this.writeTarget[name] = this.mappings[name](this.sourceElement[name]);
+    }
 }
 
 const previousMonth = "Previous month: {localizedPreviousMonthAndYear}";
@@ -48,7 +107,7 @@ const translationResources = {
 	nextMonth: nextMonth
 };
 
-const guxCalendarCss = ".gux-calendar-beta{box-sizing:border-box;display:inline-flex;flex-direction:column;font-family:var(--gse-ui-calendarMenu-month-defaultText-fontFamily);font-size:var(--gse-ui-calendarMenu-month-defaultText-fontSize);background:var(--gse-ui-calendarMenu-date-selected-foregroundColor);border-radius:8px;box-shadow:var(--gse-ui-calendarMenu-boxShadow)}.gux-calendar-beta .gux-header{display:flex;align-items:center;justify-content:space-between;block-size:var(--gse-ui-calendarMenu-month-single-header-height);padding:var(--gse-ui-calendarMenu-header-padding);font-style:normal;font-weight:var(--gse-ui-calendarMenu-month-currentText-fontWeight);color:var(--gse-ui-calendarMenu-header-foregroundColor);text-align:center;background-color:var(--gse-ui-calendarMenu-header-backgroundColor);border-radius:var(--gse-ui-calendarMenu-single-header-borderRadius)}.gux-calendar-beta .gux-header .gux-header-month-and-year{inline-size:var(--gse-ui-calendarMenu-month-single-header-textWidth);font-family:var(--gse-ui-calendarMenu-month-headerText-fontFamily);font-size:var(--gse-ui-calendarMenu-month-headerText-fontSize);line-height:var(--gse-ui-calendarMenu-month-headerText-lineHeight);color:var(--gse-ui-calendarMenu-month-selected-foregroundColor)}.gux-calendar-beta .gux-header .gux-left,.gux-calendar-beta .gux-header .gux-right{block-size:100%;color:var(--gse-ui-calendarMenu-header-foregroundColor);cursor:pointer;outline:none;background:none;border:none}.gux-calendar-beta .gux-header .gux-left:focus-visible,.gux-calendar-beta .gux-header .gux-right:focus-visible{outline:var(--gse-semantic-focusOutline-md-borderWidth) solid var(--gse-semantic-border-focus);outline-offset:var(--gse-semantic-focusOutline-offset)}.gux-calendar-beta .gux-content{display:flex;flex-direction:column;gap:var(--gse-ui-calendarMenu-dateBody-gap);padding:var(--gse-ui-calendarMenu-dateBody-padding);color:var(--gse-ui-calendarMenu-date-default-foregroundColor);background-color:var(--gse-ui-calendarMenu-backgroundColor);border-radius:var(--gse-ui-calendarMenu-single-body-borderRadius)}.gux-calendar-beta .gux-content .gux-week-days{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);color:var(--gse-ui-calendarMenu-month-default-foregroundColor);text-align:center}.gux-calendar-beta .gux-content .gux-week-days .gux-week-day{display:inline-block;inline-size:var(--gse-ui-calendarMenu-day-range-height);block-size:var(--gse-ui-calendarMenu-day-range-width)}.gux-calendar-beta .gux-content .gux-content-week .gux-content-date{display:inline-block;inline-size:var(--gse-ui-calendarMenu-day-date-size);block-size:var(--gse-ui-calendarMenu-day-input-height);font-family:var(--gse-ui-calendarMenu-date-currentText-fontFamily);font-size:var(--gse-ui-calendarMenu-date-defaultText-fontSize);font-style:normal;font-weight:var(--gse-ui-calendarMenu-date-defaultText-fontWeight);line-height:32px;vertical-align:middle;text-align:center;outline:none;border:none;opacity:var(--gse-ui-calendarMenu-disabled-opacity)}.gux-calendar-beta .gux-content .gux-content-week .gux-content-date.gux-current-month{color:var(--gse-ui-calendarMenu-month-default-foregroundColor);opacity:1}.gux-calendar-beta .gux-content .gux-content-week .gux-content-date.gux-hidden{display:none}.gux-calendar-beta .gux-content .gux-content-week .gux-content-date.gux-disabled{pointer-events:none}.gux-calendar-beta .gux-content .gux-content-week .gux-content-date.gux-selected{color:var(--gse-ui-calendarMenu-date-selected-foregroundColor);outline:none;background-color:var(--gse-ui-calendarMenu-date-selected-backgroundColor);border:none;border-radius:var(--gse-ui-calendarMenu-month-borderRadius)}.gux-calendar-beta .gux-content .gux-content-week .gux-content-date.gux-selected:hover{background-color:var(--gse-ui-calendarMenu-date-selected-hoverBackgroundColor)}.gux-calendar-beta .gux-content .gux-content-week .gux-content-date:hover{cursor:pointer;background-color:var(--gse-ui-calendarMenu-date-hover-backgroundColor);border-radius:var(--gse-ui-calendarMenu-month-borderRadius)}.gux-calendar-beta .gux-content .gux-content-week .gux-content-date:focus-visible{border-radius:var(--gse-ui-calendarMenu-month-focusBorderRadius);outline:var(--gse-semantic-focusOutline-md-borderWidth) solid var(--gse-semantic-border-focus);outline-offset:var(--gse-semantic-focusOutline-offset)}.gux-calendar-beta .gux-content .gux-content-week .gux-content-date .gux-sr-only:not(:focus):not(:active){position:absolute;width:1px;height:1px;overflow:hidden;white-space:nowrap;clip:rect(0 0 0 0);clip-path:inset(50%)}.gux-calendar-beta .gux-content .gux-content-week .gux-content-date.gux-current-date{font-family:var(--gse-ui-calendarMenu-month-currentText-fontFamily);font-size:var(--gse-ui-calendarMenu-date-currentText-fontSize);font-weight:var(--gse-ui-calendarMenu-date-currentText-fontWeight)}";
+const guxCalendarCss = ".gux-calendar-beta.gux-disabled{pointer-events:none;opacity:var(--gse-ui-calendarMenu-disabled-opacity)}.gux-calendar-beta{box-sizing:border-box;display:inline-flex;flex-direction:column;font-family:var(--gse-ui-calendarMenu-month-defaultText-fontFamily);font-size:var(--gse-ui-calendarMenu-month-defaultText-fontSize);background:var(--gse-ui-calendarMenu-date-selected-foregroundColor);border-radius:8px;box-shadow:var(--gse-ui-calendarMenu-boxShadow)}.gux-calendar-beta .gux-header{display:flex;align-items:center;justify-content:space-between;block-size:var(--gse-ui-calendarMenu-month-single-header-height);padding:var(--gse-ui-calendarMenu-header-padding);font-style:normal;font-weight:var(--gse-ui-calendarMenu-month-currentText-fontWeight);color:var(--gse-ui-calendarMenu-header-foregroundColor);text-align:center;background-color:var(--gse-ui-calendarMenu-header-backgroundColor);border-radius:var(--gse-ui-calendarMenu-single-header-borderRadius)}.gux-calendar-beta .gux-header .gux-header-month-and-year{inline-size:var(--gse-ui-calendarMenu-month-single-header-textWidth);font-family:var(--gse-ui-calendarMenu-month-headerText-fontFamily);font-size:var(--gse-ui-calendarMenu-month-headerText-fontSize);line-height:var(--gse-ui-calendarMenu-month-headerText-lineHeight);color:var(--gse-ui-calendarMenu-month-selected-foregroundColor)}.gux-calendar-beta .gux-header .gux-left,.gux-calendar-beta .gux-header .gux-right{block-size:100%;color:var(--gse-ui-calendarMenu-header-foregroundColor);cursor:pointer;outline:none;background:none;border:none}.gux-calendar-beta .gux-header .gux-left:focus-visible,.gux-calendar-beta .gux-header .gux-right:focus-visible{outline:var(--gse-semantic-focusOutline-md-borderWidth) solid var(--gse-semantic-border-focus);outline-offset:var(--gse-semantic-focusOutline-offset)}.gux-calendar-beta .gux-content{display:flex;flex-direction:column;gap:var(--gse-ui-calendarMenu-dateBody-gap);padding:var(--gse-ui-calendarMenu-dateBody-padding);color:var(--gse-ui-calendarMenu-date-default-foregroundColor);background-color:var(--gse-ui-calendarMenu-backgroundColor);border-radius:var(--gse-ui-calendarMenu-single-body-borderRadius)}.gux-calendar-beta .gux-week-days{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);color:var(--gse-ui-calendarMenu-month-default-foregroundColor);text-align:center}.gux-calendar-beta .gux-week-days .gux-week-day{display:inline-block;inline-size:var(--gse-ui-calendarMenu-day-range-height);block-size:var(--gse-ui-calendarMenu-day-range-width)}";
 const GuxCalendarBetaStyle0 = guxCalendarCss;
 
 const GuxCalendar = class {
@@ -57,9 +116,14 @@ const GuxCalendar = class {
         this.locale = 'en';
         // Total number of dates that will display for each month in the calendar
         this.MONTH_DATE_COUNT = 42;
-        this.focusedValue = undefined;
-        this.minValue = undefined;
-        this.maxValue = undefined;
+        this.startDayOfWeek = undefined;
+        this.focusDate = index_umd.index_umd.exports.Temporal.Now.plainDateISO();
+        this.min = undefined;
+        this.max = undefined;
+        this.disabled = false;
+    }
+    async guxForceUpdate() {
+        index.forceUpdate(this.root);
     }
     get slottedInput() {
         return this.root.querySelector('input[type="date"]');
@@ -70,172 +134,193 @@ const GuxCalendar = class {
         }
         this.locale = index$1.getDesiredLocale(this.root);
         // Set start day of week
-        const startDayOfWeek = this.slottedInput.getAttribute('start-day-of-week');
-        if (startDayOfWeek === null || startDayOfWeek === void 0 ? void 0 : startDayOfWeek.length) {
-            this.startDayOfWeek = parseInt(startDayOfWeek, 10);
-        }
-        this.startDayOfWeek = this.startDayOfWeek || index$1.getStartOfWeek(this.locale);
+        this.startDayOfWeek = this.startDayOfWeek || index$1.getFirstDayOfWeek(this.locale);
         this.i18n = await index$1.buildI18nForComponent(this.root, translationResources);
-        if (this.slottedInput.value) {
-            this.focusedValue = isoDates.fromIsoDate(this.slottedInput.value);
+        const selectedDate = this.getSelectedDate();
+        if (selectedDate) {
+            this.focusDate = selectedDate;
         }
-        // Set min value from the "min" input prop
-        if (this.slottedInput.min) {
-            this.minValue = new Date(this.slottedInput.min);
-            this.minValue.setHours(0, 0, 0, 0);
-        }
-        // Set max value from the "max" input prop
-        if (this.slottedInput.max) {
-            this.maxValue = new Date(this.slottedInput.max);
-            this.maxValue.setHours(0, 0, 0, 0);
+        this.attributeSynchronizer = new AttributeSynchronizer({
+            readFrom: this.slottedInput,
+            writeTo: this,
+            mappings: {
+                min: (val) => {
+                    return val ? index_umd.index_umd.exports.Temporal.PlainDate.from(val) : undefined;
+                },
+                max: (val) => {
+                    return val ? index_umd.index_umd.exports.Temporal.PlainDate.from(val) : undefined;
+                },
+                disabled: val => val
+            }
+        });
+    }
+    onSlotChange() {
+        this.attributeSynchronizer.setSourceElement(this.slottedInput);
+    }
+    async disconnectedCallback() {
+        this.attributeSynchronizer.disconnect();
+    }
+    detectDayClick(event) {
+        if (!(event.target.tagName === 'GUX-DAY-BETA')) {
+            return;
         }
+        const dayElement = event.target;
+        const selectedDate = index_umd.index_umd.exports.Temporal.PlainDate.from(dayElement.day);
+        this.selectDate(selectedDate);
+        event.stopPropagation();
+    }
+    /**
+     * Finds the `gux-day` element corresponding to the provided
+     * date string.
+     * @param dateStr The date to find in ISO format
+     */
+    getGuxDayForDate(dateStr) {
+        return this.root.shadowRoot.querySelector(`.day-${dateStr}`);
     }
-    onDateClick(date) {
+    selectDate(date) {
         if (this.isInvalidDate(date)) {
             return;
         }
-        this.focusedValue = new Date(date.getTime());
-        this.slottedInput.value = isoDates.asIsoDate(date);
+        const newDateStr = date.toString();
+        this.slottedInput.value = newDateStr;
+        this.focusDate = date;
+        this.focusOnFocusDate();
         simulateNativeEvent.simulateNativeEvent(this.root, 'input');
-    }
-    setDateAfterArrowKeyPress(event, newDayValue) {
-        event.preventDefault();
-        this.focusedValue = new Date(this.getFocusedValue().getFullYear(), this.getFocusedValue().getMonth(), this.getFocusedValue().getDate() + newDayValue, 0, 0, 0);
-        afterNextRender.afterNextRenderTimeout(() => {
-            this.focusDate();
-        });
+        simulateNativeEvent.simulateNativeEvent(this.root, 'change');
     }
     /**
-     * Focus the focused date
+     * Shifts the focused date by the provided interval
+     * @param interval A Temporal-compatible interval definition
      */
-    focusDate() {
-        const target = this.root.shadowRoot.querySelector(`.gux-content-date[data-date="${this.focusedValue.getTime()}"]`);
-        if (target) {
-            target.focus();
+    shiftFocusDate(interval) {
+        const shiftInterval = index_umd.index_umd.exports.Temporal.Duration.from(interval);
+        let newFocusedValue = this.focusDate.add(shiftInterval);
+        // Clamp to the valid range
+        if (this.min &&
+            index_umd.index_umd.exports.Temporal.PlainDate.compare(newFocusedValue, this.min) == -1) {
+            newFocusedValue = this.min;
         }
+        else if (this.max &&
+            index_umd.index_umd.exports.Temporal.PlainDate.compare(newFocusedValue, this.max) == 1) {
+            newFocusedValue = this.max;
+        }
+        this.focusDate = newFocusedValue;
+    }
+    /**
+     * Directs browser focus to the element corresponding to the `.focusDate` date.
+     */
+    focusOnFocusDate() {
+        // Wait for render in case the displayed month just changed with the focus date
+        afterNextRender.afterNextRenderTimeout(() => {
+            const isoDateStr = this.focusDate.toString();
+            const target = this.getGuxDayForDate(isoDateStr);
+            if (target) {
+                target.focus();
+            }
+        });
     }
     onKeyDown(event) {
         switch (event.key) {
             case ' ':
                 break;
-            case 'Enter':
-                event.preventDefault();
-                this.onDateClick(this.getFocusedValue());
-                afterNextRender.afterNextRenderTimeout(() => {
-                    this.focusDate();
-                });
-                break;
             case 'ArrowDown':
-                this.setDateAfterArrowKeyPress(event, 7);
+                event.preventDefault();
+                this.shiftFocusDate({ weeks: 1 });
+                this.focusOnFocusDate();
                 break;
             case 'ArrowUp':
-                this.setDateAfterArrowKeyPress(event, -7);
+                event.preventDefault();
+                this.shiftFocusDate({ weeks: -1 });
+                this.focusOnFocusDate();
                 break;
             case 'ArrowLeft':
-                this.setDateAfterArrowKeyPress(event, -1);
+                event.preventDefault();
+                this.shiftFocusDate({ days: -1 });
+                this.focusOnFocusDate();
                 break;
             case 'ArrowRight':
-                this.setDateAfterArrowKeyPress(event, 1);
+                event.preventDefault();
+                this.shiftFocusDate({ days: 1 });
+                this.focusOnFocusDate();
                 break;
             case 'PageUp':
                 event.preventDefault();
-                this.setNewFocusedMonth(1);
-                afterNextRender.afterNextRenderTimeout(() => {
-                    this.focusDate();
-                });
+                this.shiftFocusDate({ months: 1 });
+                this.focusOnFocusDate();
                 break;
             case 'PageDown':
                 event.preventDefault();
-                this.setNewFocusedMonth(-1);
-                afterNextRender.afterNextRenderTimeout(() => {
-                    this.focusDate();
-                });
+                this.shiftFocusDate({ months: -1 });
+                this.focusOnFocusDate();
                 break;
         }
     }
+    /**
+     * Returns true if the date is less than the min date or greater than the max date
+     */
     isInvalidDate(date) {
-        return ((this.minValue && date.getTime() <= this.minValue.getTime()) ||
-            (this.maxValue && date.getTime() > this.maxValue.getTime()));
+        return ((this.min && index_umd.index_umd.exports.Temporal.PlainDate.compare(date, this.min) == -1) ||
+            (this.max && index_umd.index_umd.exports.Temporal.PlainDate.compare(date, this.max) == 1));
     }
     getMonthDays() {
-        var _a, _b;
-        const firstOfMonth = getFirstOfMonth(this.getFocusedValue());
+        const today = index_umd.index_umd.exports.Temporal.Now.plainDateISO();
+        const firstOfMonth = getFirstOfMonth(this.getFocusDate());
         const weeks = [];
         let currentWeek = { dates: [] };
         let weekDayIndex = 0;
-        const currentMonth = firstOfMonth.getMonth();
-        const selectedValue = this.getSelectedValue();
-        const firstOfMonthDate = new Date(firstOfMonth.getTime());
-        const currentDate = firstDateInMonth(currentMonth, firstOfMonthDate.getFullYear(), this.startDayOfWeek);
+        const currentMonth = firstOfMonth.month;
+        const selectedValue = this.getSelectedDate();
+        let currentDate = firstDateInWeek(firstOfMonth, this.startDayOfWeek);
         // Generate all of the dates in the current month
         for (let d = 0; d < this.MONTH_DATE_COUNT + 1; d += 1) {
-            const selected = selectedValue.getTime() === currentDate.getTime() &&
-                this.focusedValue !== undefined;
             if (weekDayIndex > 0 && weekDayIndex % 7 === 0) {
                 weeks.push(currentWeek);
                 currentWeek = {
                     dates: []
                 };
             }
-            // Check if a date is outside the defined date range boundaries
-            const disabled = this.isInvalidDate(currentDate);
-            const focused = ((_a = this.getFocusedValue()) === null || _a === void 0 ? void 0 : _a.getTime()) === currentDate.getTime() &&
-                ((_b = this.getFocusedValue()) === null || _b === void 0 ? void 0 : _b.getTime()) !== selectedValue.getTime(); // Do not show preview value for date if it's already selected
-            const today = new Date();
             currentWeek.dates.push({
-                date: new Date(currentDate),
-                disabled,
-                inCurrentMonth: currentMonth === currentDate.getMonth() && !disabled,
-                selected: selected && selectedValue,
-                focused,
-                isCurrentDate: currentDate.getDate() === today.getDate() &&
-                    currentDate.getMonth() === today.getMonth() &&
-                    currentDate.getFullYear() === today.getFullYear()
+                date: index_umd.index_umd.exports.Temporal.PlainDate.from(currentDate),
+                disabled: this.isInvalidDate(currentDate),
+                inCurrentMonth: currentMonth === currentDate.month,
+                selected: selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.equals(currentDate),
+                focused: this.getFocusDate().equals(currentDate),
+                isCurrentDate: currentDate.equals(today)
             });
             weekDayIndex += 1;
-            currentDate.setDate(currentDate.getDate() + 1);
+            currentDate = currentDate.add({ days: 1 });
         }
         return weeks;
     }
-    getFocusedValue() {
-        if (this.focusedValue) {
-            return this.focusedValue;
-        }
-        return this.getSelectedValue();
-    }
-    changeMonth(newMonthValue) {
-        return new Date(this.getFocusedValue().getFullYear(), this.getFocusedValue().getMonth() + newMonthValue, 1, 0, 0, 0);
-    }
-    setNewFocusedMonth(newMonthValue) {
-        this.focusedValue = this.changeMonth(newMonthValue);
+    getFocusDate() {
+        return this.focusDate;
     }
-    getSelectedValue() {
+    getSelectedDate() {
         if (this.slottedInput.value) {
-            const value = isoDates.fromIsoDate(this.slottedInput.value);
-            return value;
+            return index_umd.index_umd.exports.Temporal.PlainDate.from(this.slottedInput.value);
         }
-        const now = new Date();
-        now.setHours(0, 0, 0, 0);
-        return now;
+        return null;
     }
     renderHeader() {
         return (index.h("div", { class: "gux-header" }, index.h("button", { type: "button", class: "gux-left", "aria-label": this.i18n('previousMonth', {
-                localizedPreviousMonthAndYear: getDateAsMonthYear(this.changeMonth(-1), this.locale)
-            }), onClick: () => this.setNewFocusedMonth(-1) }, index.h("gux-icon", { size: "small", decorative: true, "icon-name": "custom/chevron-left-small-regular" })), index.h("span", { class: "gux-header-month-and-year" }, getDateAsMonthYear(this.getFocusedValue(), this.locale)), index.h("button", { type: "button", class: "gux-right", "aria-label": this.i18n('nextMonth', {
-                localizedNextMonthAndYear: getDateAsMonthYear(this.changeMonth(1), this.locale)
-            }), onClick: () => this.setNewFocusedMonth(1) }, index.h("gux-icon", { size: "small", decorative: true, "icon-name": "custom/chevron-right-small-regular" }))));
+                localizedPreviousMonthAndYear: localizedYearMonth(this.getFocusDate().add({ months: -1 }), this.locale)
+            }), onClick: () => this.shiftFocusDate({ months: -1 }) }, index.h("gux-icon", { size: "small", decorative: true, "icon-name": "custom/chevron-left-small-regular" })), index.h("span", { class: "gux-header-month-and-year" }, localizedYearMonth(this.getFocusDate(), this.locale)), index.h("button", { type: "button", class: "gux-right", "aria-label": this.i18n('nextMonth', {
+                localizedNextMonthAndYear: localizedYearMonth(this.getFocusDate().add({ months: 1 }), this.locale)
+            }), onClick: () => this.shiftFocusDate({ months: 1 }) }, index.h("gux-icon", { size: "small", decorative: true, "icon-name": "custom/chevron-right-small-regular" }))));
     }
     renderContent() {
-        return (index.h("div", { class: "gux-content" }, index.h("div", { class: "gux-week-days" }, getWeekdays(this.locale, this.startDayOfWeek).map(day => (index.h("div", { class: "gux-week-day" }, day)))), index.h("div", null, this.getMonthDays().map(week => (index.h("div", { class: "gux-content-week" }, week.dates.map(day => (index.h("div", { "data-date": day.date.getTime(), onClick: () => this.onDateClick(day.date), role: "button", "aria-current": day.selected ? 'true' : 'false', tabindex: day.selected || day.focused ? '0' : '-1', onKeyDown: e => void this.onKeyDown(e), "aria-disabled": day.disabled ? 'true' : 'false', class: {
-                'gux-content-date': true,
-                'gux-disabled': day.disabled,
-                'gux-current-month': day.inCurrentMonth,
-                'gux-selected': day.selected,
-                'gux-current-date': day.isCurrentDate
-            } }, index.h("span", { class: "gux-non-sr", "aria-hidden": "true" }, day.date.getDate()), index.h("span", { class: "gux-sr-only" }, index.h("gux-date-beta", { datetime: day.date.toISOString(), format: "long" })))))))))));
+        return (index.h("div", { onKeyDown: e => void this.onKeyDown(e), onClick: e => void this.detectDayClick(e) }, index.h("div", { class: "gux-content" }, index.h("div", { class: "gux-week-days" }, getWeekdays(this.locale, this.startDayOfWeek).map(day => (index.h("div", { class: "gux-week-day" }, day)))), index.h("div", null, this.getMonthDays().map(week => (index.h("div", { class: "gux-content-week" }, week.dates.map(day => {
+            const isoDateStr = day.date.toString();
+            return (index.h("gux-day-beta", { day: isoDateStr, "aria-current": day.selected ? 'true' : 'false', disabled: day.disabled ? true : false, tabindex: day.selected || day.focused ? '0' : '-1', class: `
+                            ${!day.inCurrentMonth || day.disabled ? 'gux-muted' : ''}
+                            day-${isoDateStr}  
+                          ` }));
+        }))))))));
     }
     render() {
-        return (index.h("div", { key: 'fe589082cfba8016996a368ed45f95d718774fc1', class: "gux-calendar-beta" }, index.h("slot", { key: '2b12cdfc0b4487b103691766dcb6adfa30ed2b23' }), this.renderHeader(), this.renderContent()));
+        return (index.h("div", { key: '1da41ece22aace32e14be09942b85ed17a92ee60', class: `gux-calendar-beta ${this.disabled ? 'gux-disabled' : ''}` }, index.h("slot", { key: '6ab2911fc37e3157a24a4e1c746e8b5de0d2c769', onSlotchange: () => {
+                this.onSlotChange();
+            } }), this.renderHeader(), this.renderContent()));
     }
     get root() { return index.getElement(this); }
 };

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

@@ -5,10 +5,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-1337610f.js');
 const afterNextRender = require('./after-next-render-162425fe.js');
 const isoDates = require('./iso-dates-2daf4199.js');
-const usage = require('./usage-bbd900ad.js');
-const index$1 = require('./index-c7d87150.js');
+const usage = require('./usage-47b5afb6.js');
+const index$1 = require('./index-3ee995a4.js');
 const capitalizeFirstLetter = require('./capitalize-first-letter-424667dc.js');
-const useRegionalDates = require('./use-regional-dates-c23a8a39.js');
+const intl = require('./intl-ed89316c.js');
+const useRegionalDates = require('./use-regional-dates-4d3f1b9d.js');
 require('./get-closest-element-9e41d6b9.js');
 require('./get-closest-element-26170ce0.js');
 
@@ -54,7 +55,7 @@ function getOffsetMonthDate(baseDate, monthDelta) {
 }
 function getDateMonthAndYearString(date, locale) {
     if (useRegionalDates.useRegionalDates()) {
-        return capitalizeFirstLetter.capitalizeFirstLetter(useRegionalDates.dateTimeFormat(locale, {
+        return capitalizeFirstLetter.capitalizeFirstLetter(intl.dateTimeFormat(locale, {
             year: 'numeric',
             month: 'long'
         })
@@ -387,7 +388,7 @@ const GuxCalendar = class {
         return (index.h("table", null, index.h("tr", null, getWeekdays(this.locale, this.startDayOfWeek).map(day => (index.h("th", null, day)))), this.getMonthDays(index$1).map(week => (index.h("tr", null, week.map(day => (index.h("td", { tabindex: this.isFocusableDate(day) ? '0' : '-1', class: day.class, "aria-hidden": day.hidden ? 'true' : 'false', "aria-disabled": day.disabled ? 'true' : 'false', "data-date": day.date.getTime(), onClick: () => void this.onDateClick(day.date), onMouseEnter: () => this.onDateMouseEnter(day.date), onKeyDown: e => void this.onKeyDown(e) }, index.h("div", { class: "gux-date" }, day.date.getDate(), index.h("span", { class: "gux-sr-only" }, getDateMonthAndYearString(day.date, this.locale)))))))))));
     }
     render() {
-        return (index.h("div", { key: '8c2735faadd06a9810b3b0f48abc0d2be8c29c6f', class: "gux-calendar" }, index.h("div", { key: 'ded34ebeead1c0a4df65cf51906e9c7d514fa93e', class: "gux-header" }, index.h("button", { key: 'cedfad47d44db1003806ed47a32b9fd4327751fc', type: "button", class: "gux-left", onClick: () => this.incrementPreviewDateByMonth(-1), tabindex: "-1", "aria-hidden": "true" }, index.h("gux-icon", { key: '36e0f9d505339ae11bbb6b7f2548cde68abc7741', size: "small", decorative: true, "icon-name": "custom/chevron-left-small-regular" })), this.renderMonthHeader(), index.h("button", { key: 'f56e6ff0c1261e7c51e0639b26680a70f5205e3d', type: "button", class: "gux-right", onClick: () => this.incrementPreviewDateByMonth(1), tabindex: "-1", "aria-hidden": "true" }, index.h("gux-icon", { key: '959ebaa13f1a7e435782d38bdde87e4e4f56a2c0', size: "small", decorative: true, "icon-name": "custom/chevron-right-small-regular" }))), index.h("div", { key: '4c63e229090bcd6eab870ea8dac3bead564744a5', class: "gux-content" }, Array.from(Array(this.numberOfMonths).keys()).map(index => this.renderCalendarTable(index)))));
+        return (index.h("div", { key: 'af6dd3690b06c19240a626487b8b416ce278ecfa', class: "gux-calendar" }, index.h("div", { key: '89b901890c7c1f00cf94b9e9773ebe46ec9f81e9', class: "gux-header" }, index.h("button", { key: '67c40070fc2227d8b79e0d6e2e21d77380b9a5d0', type: "button", class: "gux-left", onClick: () => this.incrementPreviewDateByMonth(-1), tabindex: "-1", "aria-hidden": "true" }, index.h("gux-icon", { key: '2bd8edc3755d8d3783be87b49d8405cbc197ef2f', size: "small", decorative: true, "icon-name": "custom/chevron-left-small-regular" })), this.renderMonthHeader(), index.h("button", { key: 'f3a75968f96e3f475503c6fe56af5c7534aae4f7', type: "button", class: "gux-right", onClick: () => this.incrementPreviewDateByMonth(1), tabindex: "-1", "aria-hidden": "true" }, index.h("gux-icon", { key: 'e5c8e7c5af77082d5cf6ed69ebcd38ef5b0911d5', size: "small", decorative: true, "icon-name": "custom/chevron-right-small-regular" }))), index.h("div", { key: '148e5592ae9a3762d2195c51119130fb1e0f87ff', class: "gux-content" }, Array.from(Array(this.numberOfMonths).keys()).map(index => this.renderCalendarTable(index)))));
     }
     get root() { return index.getElement(this); }
 };

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-1337610f.js');
-const usage = require('./usage-bbd900ad.js');
+const usage = require('./usage-47b5afb6.js');
 
 const guxCardCss = ":host{display:block;inline-size:fit-content}.gux-card{box-sizing:border-box;padding:var(--gse-ui-card-padding);background-color:var(--gse-ui-card-backgroundColor);border:var(--gse-ui-card-default-border-width) var(--gse-ui-card-default-border-style) var(--gse-ui-card-default-border-color);border-radius:var(--gse-ui-card-borderRadius)}.gux-card.gux-bordered{border:var(--gse-ui-card-default-border-width) var(--gse-ui-card-default-border-style) var(--gse-ui-card-default-border-color)}.gux-card.gux-raised{border:var(--gse-ui-card-raised-border-width) var(--gse-ui-card-raised-border-style) var(--gse-ui-card-raised-border-color);box-shadow:var(--gse-ui-card-raised-boxShadow)}.gux-card.gux-borderless{border:var(--gse-ui-card-borderless-border-width) var(--gse-ui-card-borderless-border-style) var(--gse-ui-card-borderless-border-color)}";
 const GuxCardStyle0 = guxCardCss;
@@ -17,10 +17,10 @@ const GuxCard = class {
         usage.trackComponent(this.root, { variant: this.accent });
     }
     render() {
-        return (index.h("div", { key: '1a85dcf2fa992904b3e187d0bd6f3f6d5219db0b', class: {
+        return (index.h("div", { key: '95cc3325babcec3a310c5a80188a7e878769e99d', class: {
                 'gux-card': true,
                 [`gux-${this.accent}`]: true
-            } }, index.h("slot", { key: '1675843012bddd80e09c7e5adcc636609fb7465a' })));
+            } }, index.h("slot", { key: '71af33737da9ff5c4f2b5d070455bdc4ece8ebde' })));
     }
     get root() { return index.getElement(this); }
 };