genesys-spark-components 4.0.0-beta.34 → 4.0.0-beta.36

package/dist/collection/components/beta/gux-calendar-beta/tests/gux-calendar.e2e.js

@@ -0,0 +1,202 @@
+import { newSparkE2EPage } from "../../../../test/e2eTestUtils";
+import { goToPreviousMonth, goToNextMonth, validateHeaderMonth, validateSelectedDate, getContentDateElement } from "../services/tests.service";
+describe('gux-calendar', () => {
+  const defaultHtml = `
+    <gux-calendar-beta>
+      <input type="date" value="2023-05-19" min="2023-04-28" max="2023-06-18" />
+    </gux-calendar-beta>
+    `;
+  it('renders', async () => {
+    const page = await newSparkE2EPage({
+      html: defaultHtml
+    });
+    const element = await page.find('gux-calendar-beta');
+    expect(element).toHaveAttribute('hydrated');
+  });
+  describe('header', () => {
+    it('calendar increments by one month after clicking the right arrow button', async () => {
+      const page = await newSparkE2EPage({
+        html: defaultHtml
+      });
+      const element = await page.find('gux-calendar-beta');
+      // Validate that the current month before clicking the right arrow is May, 2023
+      await validateHeaderMonth(element, 'May 2023');
+      await goToNextMonth(element, page);
+      // await a11yCheck(page);
+      // Validate that the new month after clicking the right arrow is June, 2023
+      await validateHeaderMonth(element, 'June 2023');
+    });
+    it('calendar decrements by one month after clicking the left arrow button', async () => {
+      const page = await newSparkE2EPage({
+        html: defaultHtml
+      });
+      const element = await page.find('gux-calendar-beta');
+      // Validate that the current month before clicking the left arrow is May, 2023
+      await validateHeaderMonth(element, 'May 2023');
+      await goToPreviousMonth(element, page);
+      // Validate that the new month after clicking the left arrow  is April, 2023
+      await validateHeaderMonth(element, 'April 2023');
+    });
+  });
+  describe('content', () => {
+    it('selected date on page load is correct', async () => {
+      const page = await newSparkE2EPage({
+        html: defaultHtml
+      });
+      const element = await page.find('gux-calendar-beta');
+      // Validate that the selected date on page load is May 19, 2023
+      await validateSelectedDate(element, 'May 2023', '19');
+    });
+    it('clicking on a date in the current month causes the date to be selected', async () => {
+      const page = await newSparkE2EPage({
+        html: defaultHtml
+      });
+      // Find May 10, 2023 in the calendar and click it so that it will be selected
+      const element = await page.find('gux-calendar-beta');
+      const contentDate = await getContentDateElement(element, 'May 10, 2023');
+      await contentDate.click();
+      await page.waitForChanges();
+      // Validate that clicking on May 10, 2023 causes it to be selected
+      await validateSelectedDate(element, 'May 2023', '10');
+    });
+    it('clicking on a date in the next month causes the date to be selected', async () => {
+      const page = await newSparkE2EPage({
+        html: defaultHtml
+      });
+      // Find June 1, 2023 in the calendar and click it so that it will be selected
+      const element = await page.find('gux-calendar-beta');
+      const contentDate = await getContentDateElement(element, 'June 1, 2023');
+      await contentDate.click();
+      await page.waitForChanges();
+      // Validate that clicking on June 1, 2023 causes it to be selected
+      await validateSelectedDate(element, 'June 2023', '1');
+    });
+    it('clicking on a date in the previous month causes the date to be selected', async () => {
+      const page = await newSparkE2EPage({
+        html: defaultHtml
+      });
+      // Find April 30, 2023 in the calendar and click it so that it will be selected
+      const element = await page.find('gux-calendar-beta');
+      const contentDate = await getContentDateElement(element, 'April 30, 2023');
+      await contentDate.click();
+      await page.waitForChanges();
+      // Validate that clicking on April 30, 2023 causes it to be selected
+      await validateSelectedDate(element, 'April 2023', '30');
+    });
+    describe('arrow key and page up/down navigation', () => {
+      it('pressing the down arrow key and then the enter key cause the selected date to increment by 1 week', async () => {
+        const page = await newSparkE2EPage({
+          html: defaultHtml
+        });
+        const element = await page.find('gux-calendar-beta');
+        // First click the selected date to get focus on the calendar
+        const selectedDate = await element.find('pierce/.gux-selected');
+        await selectedDate.click();
+        // Press the down arrow key and then the enter key
+        await page.keyboard.press('ArrowDown');
+        await page.keyboard.press('Enter');
+        await page.waitForChanges();
+        await validateSelectedDate(element, 'May 2023', '26');
+      });
+      it('pressing the up arrow key and then the enter key cause the selected date to decrement by 1 week', async () => {
+        const page = await newSparkE2EPage({
+          html: defaultHtml
+        });
+        const element = await page.find('gux-calendar-beta');
+        // First click the selected date to get focus on the calendar
+        const selectedDate = await element.find('pierce/.gux-selected');
+        await selectedDate.click();
+        // Press the up arrow key and then the enter key
+        await page.keyboard.press('ArrowUp');
+        await page.keyboard.press('Enter');
+        await page.waitForChanges();
+        await validateSelectedDate(element, 'May 2023', '12');
+      });
+      it('pressing the right arrow key and then the enter key cause the selected date to increment by 1 day', async () => {
+        const page = await newSparkE2EPage({
+          html: defaultHtml
+        });
+        const element = await page.find('gux-calendar-beta');
+        // First click the selected date to get focus on the calendar
+        const selectedDate = await element.find('pierce/.gux-selected');
+        await selectedDate.click();
+        // Press the right arrow key and then the enter key
+        await page.keyboard.press('ArrowRight');
+        await page.keyboard.press('Enter');
+        await page.waitForChanges();
+        await validateSelectedDate(element, 'May 2023', '20');
+      });
+      it('pressing the left arrow key and then the enter key cause the selected date to decrement by 1 day', async () => {
+        const page = await newSparkE2EPage({
+          html: defaultHtml
+        });
+        const element = await page.find('gux-calendar-beta');
+        // First click the selected date to get focus on the calendar
+        const selectedDate = await element.find('pierce/.gux-selected');
+        await selectedDate.click();
+        // Press the left arrow key and then the enter key
+        await page.keyboard.press('ArrowLeft');
+        await page.keyboard.press('Enter');
+        await page.waitForChanges();
+        await validateSelectedDate(element, 'May 2023', '18');
+      });
+      it('pressing the page down key causes the current month to decrement by 1 month', async () => {
+        const page = await newSparkE2EPage({
+          html: defaultHtml
+        });
+        const element = await page.find('gux-calendar-beta');
+        // First click the selected date to get focus on the calendar
+        const selectedDate = await element.find('pierce/.gux-selected');
+        await selectedDate.click();
+        // Press the left arrow key and then the enter key
+        await page.keyboard.press('PageDown');
+        await page.keyboard.press('Enter');
+        await page.waitForChanges();
+        await validateHeaderMonth(element, 'April 2023');
+      });
+      it('pressing the page up key causes the current month to increment by 1 month', async () => {
+        const page = await newSparkE2EPage({
+          html: defaultHtml
+        });
+        const element = await page.find('gux-calendar-beta');
+        // First click the selected date to get focus on the calendar
+        const selectedDate = await element.find('pierce/.gux-selected');
+        await selectedDate.click();
+        // Press the left arrow key and then the enter key
+        await page.keyboard.press('PageUp');
+        await page.keyboard.press('Enter');
+        await page.waitForChanges();
+        await validateHeaderMonth(element, 'June 2023');
+      });
+    });
+    it('setting max prop causes an upper bound range to be implemented correctly', async () => {
+      const page = await newSparkE2EPage({
+        html: defaultHtml
+      });
+      const element = await page.find('gux-calendar-beta');
+      // Go to next month
+      await goToNextMonth(element, page);
+      const contentDate = await getContentDateElement(element, 'June 19, 2023');
+      expect(contentDate.className).toContain('gux-disabled');
+    });
+    it('setting min prop causes a lower bound range to be implemented correctly', async () => {
+      const page = await newSparkE2EPage({
+        html: defaultHtml
+      });
+      const element = await page.find('gux-calendar-beta');
+      await goToPreviousMonth(element, page);
+      const contentDate = await getContentDateElement(element, 'April 27, 2023');
+      expect(contentDate.className).toContain('gux-disabled');
+    });
+    it('tab index is set to 0 for selected date and -1 for non-selected date', async () => {
+      const page = await newSparkE2EPage({
+        html: defaultHtml
+      });
+      const element = await page.find('gux-calendar-beta');
+      const selectedDate = await getContentDateElement(element, 'May 19, 2023');
+      const nonSelectedDate = await getContentDateElement(element, 'May 20, 2023');
+      expect(selectedDate.tabIndex).toBe(0);
+      expect(nonSelectedDate.tabIndex).toBe(-1);
+    });
+  });
+});

package/dist/collection/components/beta/gux-calendar-beta/tests/gux-calendar.spec.js

@@ -0,0 +1,19 @@
+import { newSpecPage } from "../../../../test/specTestUtils";
+import { GuxCalendar } from "../components/single/gux-calendar";
+const components = [GuxCalendar];
+const language = 'en';
+const html = `
+<gux-calendar-beta>
+  <input type="date" value="2023-05-19" min="2023-04-28" max="2023-06-18" />
+</gux-calendar-beta>
+`;
+describe('gux-calendar', () => {
+  it('should build', async () => {
+    const page = await newSpecPage({ components, html, language });
+    expect(page.rootInstance).toBeInstanceOf(GuxCalendar);
+  });
+  it('renders', async () => {
+    const page = await newSpecPage({ components, html, language });
+    expect(page.root).toMatchSnapshot();
+  });
+});

package/dist/collection/components/beta/gux-date/gux-date.js

@@ -1,8 +1,8 @@
-import { h, Host } from '@stencil/core';
-import { trackComponent } from '@utils/tracking/usage';
-import { DateTimeFormatter } from '../../../i18n/DateTimeFormatter';
-import { getDesiredLocale } from '../../../i18n/index';
-import { getValidTimezone } from '../../../utils/date/get-valid-timezone';
+import { h, Host } from "@stencil/core";
+import { trackComponent } from "../../../utils/tracking/usage";
+import { DateTimeFormatter } from "../../../i18n/DateTimeFormatter";
+import { getDesiredLocale } from "../../../i18n/index";
+import { getValidTimezone } from "../../../utils/date/get-valid-timezone";
 export class GuxDate {
   constructor() {
     this.datetime = new Date().toISOString();
@@ -49,7 +49,8 @@ export class GuxDate {
           "references": {
             "GuxDateTimeFormat": {
               "location": "import",
-              "path": "../../../i18n/DateTimeFormatter"
+              "path": "../../../i18n/DateTimeFormatter",
+              "id": "src/i18n/DateTimeFormatter.ts::GuxDateTimeFormat"
             }
           }
         },
@@ -72,7 +73,8 @@ export class GuxDate {
           "references": {
             "GuxTimeZoneIdentifier": {
               "location": "import",
-              "path": "../../../i18n/time-zone/types"
+              "path": "../../../i18n/time-zone/types",
+              "id": "src/i18n/time-zone/types.ts::GuxTimeZoneIdentifier"
             }
           }
         },

package/dist/collection/components/beta/gux-date/tests/gux-date.e2e.js

@@ -0,0 +1,30 @@
+import { newSparkE2EPage, a11yCheck } from "../../../../test/e2eTestUtils";
+import { timeZoneIdentifiers } from "../../../../i18n/time-zone/identifiers";
+const date = '2022-07-07T13:35:30.100Z';
+describe('gux-date-beta', () => {
+  describe('#render', () => {
+    [
+      `<gux-date-beta datetime=${date} format="short"></gux-date-beta>`,
+      `<gux-date-beta datetime=${date} format="medium"></gux-date-beta>`,
+      `<gux-date-beta datetime=${date} format="long"></gux-date-beta>`,
+      `<gux-date-beta datetime=${date} format="full"></gux-date-beta>`
+    ].forEach((html, index) => {
+      it(`should render component as expected (${index + 1})`, async () => {
+        const page = await newSparkE2EPage({ html });
+        await a11yCheck(page);
+        const element = await page.find('gux-date-beta');
+        expect(element.outerHTML).toMatchSnapshot();
+      });
+    });
+  });
+  describe('#render different time zones', () => {
+    timeZoneIdentifiers.forEach((timeZone) => {
+      it(`should work as expected for "${timeZone}"`, async () => {
+        const html = `<gux-date-beta time-zone=${timeZone} datetime="2022-07-07T12:00:00.000Z" format="full"></gux-date-beta>`;
+        const page = await newSparkE2EPage({ html });
+        const element = await page.find('gux-date-beta');
+        expect(element.outerHTML).toMatchSnapshot();
+      });
+    });
+  });
+});

package/dist/collection/components/beta/gux-date/tests/gux-date.spec.js

@@ -0,0 +1,30 @@
+import { newSpecPage } from "../../../../test/specTestUtils";
+import { GuxDate } from "../gux-date";
+import { timeZoneIdentifiers } from "../../../../i18n/time-zone/identifiers";
+const components = [GuxDate];
+const language = 'en';
+const date = '2022-07-07T13:35:30.100Z';
+describe('gux-date', () => {
+  describe('#render different datetime formats eg(short,medium,full,long)', () => {
+    [
+      `<gux-date-beta datetime=${date} format="short"></gux-date-beta>`,
+      `<gux-date-beta datetime=${date} format="medium"></gux-date-beta>`,
+      `<gux-date-beta datetime=${date} format="full"></gux-date-beta>`,
+      `<gux-date-beta datetime=${date} format="long"></gux-date-beta>`
+    ].forEach((html, index) => {
+      it(`should render component as expected (${index + 1})`, async () => {
+        const page = await newSpecPage({ components, html, language });
+        expect(page.root).toMatchSnapshot();
+      });
+    });
+  });
+  describe('#render different time zones', () => {
+    timeZoneIdentifiers.forEach((timeZone) => {
+      it(`should work as expected for "${timeZone}"`, async () => {
+        const html = `<gux-date-beta time-zone=${timeZone} datetime="2022-07-07T12:00:00.000Z" format="full"></gux-date-beta>`;
+        const page = await newSpecPage({ components, html, language });
+        expect(page.root).toMatchSnapshot();
+      });
+    });
+  });
+});

package/dist/collection/components/beta/gux-date-time/gux-date-time.js

@@ -1,8 +1,8 @@
-import { h, Host } from '@stencil/core';
-import { trackComponent } from '@utils/tracking/usage';
-import { DateTimeFormatter } from '../../../i18n/DateTimeFormatter';
-import { getDesiredLocale } from '../../../i18n/index';
-import { getValidTimezone } from '../../../utils/date/get-valid-timezone';
+import { h, Host } from "@stencil/core";
+import { trackComponent } from "../../../utils/tracking/usage";
+import { DateTimeFormatter } from "../../../i18n/DateTimeFormatter";
+import { getDesiredLocale } from "../../../i18n/index";
+import { getValidTimezone } from "../../../utils/date/get-valid-timezone";
 export class GuxDateTime {
   constructor() {
     this.datetime = new Date().toISOString();
@@ -49,7 +49,8 @@ export class GuxDateTime {
           "references": {
             "GuxDateTimeFormat": {
               "location": "import",
-              "path": "../../../i18n/DateTimeFormatter"
+              "path": "../../../i18n/DateTimeFormatter",
+              "id": "src/i18n/DateTimeFormatter.ts::GuxDateTimeFormat"
             }
           }
         },
@@ -72,7 +73,8 @@ export class GuxDateTime {
           "references": {
             "GuxTimeZoneIdentifier": {
               "location": "import",
-              "path": "../../../i18n/time-zone/types"
+              "path": "../../../i18n/time-zone/types",
+              "id": "src/i18n/time-zone/types.ts::GuxTimeZoneIdentifier"
             }
           }
         },

package/dist/collection/components/beta/gux-date-time/tests/gux-date-time.e2e.js

@@ -0,0 +1,30 @@
+import { newSparkE2EPage, a11yCheck } from "../../../../test/e2eTestUtils";
+import { timeZoneIdentifiers } from "../../../../i18n/time-zone/identifiers";
+const date = '2022-07-07T13:35:30.100Z';
+describe('gux-date-time-beta', () => {
+  describe('#render', () => {
+    [
+      `<gux-date-time-beta datetime=${date} format="short"></gux-date-time-beta>`,
+      `<gux-date-time-beta datetime=${date} format="medium"></gux-date-time-beta>`,
+      `<gux-date-time-beta datetime=${date} format="long"></gux-date-time-beta>`,
+      `<gux-date-time-beta datetime=${date} format="full"></gux-date-time-beta>`
+    ].forEach((html, index) => {
+      it(`should render component as expected (${index + 1})`, async () => {
+        const page = await newSparkE2EPage({ html });
+        await a11yCheck(page);
+        const element = await page.find('gux-date-time-beta');
+        expect(element.outerHTML).toMatchSnapshot();
+      });
+    });
+  });
+  describe('#render different time zones', () => {
+    timeZoneIdentifiers.forEach((timeZone) => {
+      it(`should work as expected for "${timeZone}"`, async () => {
+        const html = `<gux-date-time-beta time-zone=${timeZone} datetime="2022-07-07T12:00:00.000Z" format="full"></gux-date-time-beta>`;
+        const page = await newSparkE2EPage({ html });
+        const element = await page.find('gux-date-time-beta');
+        expect(element.outerHTML).toMatchSnapshot();
+      });
+    });
+  });
+});

package/dist/collection/components/beta/gux-date-time/tests/gux-date-time.spec.js

@@ -0,0 +1,30 @@
+import { newSpecPage } from "../../../../test/specTestUtils";
+import { GuxDateTime } from "../gux-date-time";
+import { timeZoneIdentifiers } from "../../../../i18n/time-zone/identifiers";
+const components = [GuxDateTime];
+const language = 'en';
+const date = '2022-07-07T13:35:30.100Z';
+describe('gux-date-time', () => {
+  describe('#render different datetime formats eg(short,medium,full,long)', () => {
+    [
+      `<gux-date-time-beta datetime=${date} format="short"></gux-date-time-beta>`,
+      `<gux-date-time-beta datetime=${date} format="medium"></gux-date-time-beta>`,
+      `<gux-date-time-beta datetime=${date} format="full"></gux-date-time-beta>`,
+      `<gux-date-time-beta datetime=${date} format="long"></gux-date-time-beta>`
+    ].forEach((html, index) => {
+      it(`should render component as expected (${index + 1})`, async () => {
+        const page = await newSpecPage({ components, html, language });
+        expect(page.root).toMatchSnapshot();
+      });
+    });
+  });
+  describe('#render different time zones', () => {
+    timeZoneIdentifiers.forEach((timeZone) => {
+      it(`should work as expected for "${timeZone}"`, async () => {
+        const html = `<gux-date-time-beta time-zone=${timeZone} datetime="2022-07-07T12:00:00.000Z" format="full"></gux-date-time-beta>`;
+        const page = await newSpecPage({ components, html, language });
+        expect(page.root).toMatchSnapshot();
+      });
+    });
+  });
+});

package/dist/collection/components/beta/gux-month-picker/gux-month-calendar/gux-month-calendar.css

@@ -5,39 +5,39 @@
   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 {
-  color: var(--gse-ui-calendarMenu-month-default-foregroundColor);
   font-family: var(--gse-ui-calendarMenu-month-currentText-fontFamily);
   font-size: var(--gse-ui-calendarMenu-month-currentText-fontSize);
-  line-height: var(--gse-ui-calendarMenu-month-currentText-lineHeight);
   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);
-  line-height: var(--gse-ui-calendarMenu-day-headerText-lineHeight);
   font-weight: var(--gse-ui-calendarMenu-day-headerText-fontWeight);
-  height: var(--gse-ui-calendarMenu-month-single-header-height);
-  padding: var(--gse-ui-calendarMenu-header-padding);
+  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: 8px;
   color: inherit;
   cursor: pointer;
   background: none;
   border: none;
   outline: none;
-  padding: 8px;
 }
 .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);
-  border-radius: calc(var(--gse-semantic-focusRing-cornerRadius) - var(--gse-semantic-focusRing-offset));
 }
 .gux-month-calendar .gux-year-header button.gux-year-change:disabled {
   cursor: default;

package/dist/collection/components/beta/gux-month-picker/gux-month-calendar/gux-month-calendar.js

@@ -1,9 +1,9 @@
-import { h } from '@stencil/core';
-import { buildI18nForComponent, getDesiredLocale } from '../../../../i18n';
-import simulateNativeEvent from '../../../../utils/dom/simulate-native-event';
-import { afterNextRender } from '../../../../utils/dom/after-next-render';
-import { getISOYearMonth, getCurrentISOYearMonth, getYearMonthObject } from '../../../../utils/date/year-month-values';
-import translationResources from './i18n/en.json';
+import { h } from "@stencil/core";
+import { buildI18nForComponent, getDesiredLocale } from "../../../../i18n";
+import simulateNativeEvent from "../../../../utils/dom/simulate-native-event";
+import { afterNextRender } from "../../../../utils/dom/after-next-render";
+import { getISOYearMonth, getCurrentISOYearMonth, getYearMonthObject } from "../../../../utils/date/year-month-values";
+import translationResources from "./i18n/en.json";
 export class GuxMonthCalendar {
   constructor() {
     this.value = undefined;
@@ -146,7 +146,8 @@ export class GuxMonthCalendar {
           "references": {
             "GuxISOYearMonth": {
               "location": "import",
-              "path": "../../../../utils/date/year-month-values"
+              "path": "../../../../utils/date/year-month-values",
+              "id": "src/utils/date/year-month-values.ts::GuxISOYearMonth"
             }
           }
         },
@@ -168,7 +169,8 @@ export class GuxMonthCalendar {
           "references": {
             "GuxISOYearMonth": {
               "location": "import",
-              "path": "../../../../utils/date/year-month-values"
+              "path": "../../../../utils/date/year-month-values",
+              "id": "src/utils/date/year-month-values.ts::GuxISOYearMonth"
             }
           }
         },
@@ -190,7 +192,8 @@ export class GuxMonthCalendar {
           "references": {
             "GuxISOYearMonth": {
               "location": "import",
-              "path": "../../../../utils/date/year-month-values"
+              "path": "../../../../utils/date/year-month-values",
+              "id": "src/utils/date/year-month-values.ts::GuxISOYearMonth"
             }
           }
         },
@@ -222,14 +225,17 @@ export class GuxMonthCalendar {
             }],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             },
             "GuxISOYearMonth": {
               "location": "import",
-              "path": "../../../../utils/date/year-month-values"
+              "path": "../../../../utils/date/year-month-values",
+              "id": "src/utils/date/year-month-values.ts::GuxISOYearMonth"
             },
             "HTMLButtonElement": {
-              "location": "global"
+              "location": "global",
+              "id": "global::HTMLButtonElement"
             }
           },
           "return": "Promise<void>"

package/dist/collection/components/beta/gux-month-picker/gux-month-calendar/gux-month-list/gux-month-list-item/gux-month-list-item.css

@@ -11,8 +11,8 @@
 }
 
 .gux-container {
-  padding-left: var(--gse-ui-calendarMenu-monthBody-gap);
   padding-right: var(--gse-ui-calendarMenu-monthBody-gap);
+  padding-left: var(--gse-ui-calendarMenu-monthBody-gap);
 }
 .gux-container button {
   all: unset;
@@ -31,14 +31,14 @@
   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);
-  border-radius: var(--gse-ui-calendarMenu-month-focusBorderRadius);
 }
 .gux-container button:hover:not(:disabled) {
   background: var(--gse-ui-calendarMenu-month-hover-backgroundColor);
 }
 .gux-container button:disabled {
-  opacity: var(--gse-ui-calendarMenu-disabled-opacity);
   cursor: default;
+  opacity: var(--gse-ui-calendarMenu-disabled-opacity);
 }

package/dist/collection/components/beta/gux-month-picker/gux-month-calendar/gux-month-list/gux-month-list-item/gux-month-list-item.js

@@ -1,5 +1,5 @@
-import { h, Host } from '@stencil/core';
-import { getClosestElement } from '../../../../../../utils/dom/get-closest-element';
+import { h, Host } from "@stencil/core";
+import { getClosestElement } from "../../../../../../utils/dom/get-closest-element";
 export class GuxMonthListItem {
   constructor() {
     this.value = undefined;
@@ -46,7 +46,8 @@ export class GuxMonthListItem {
           "references": {
             "GuxISOYearMonth": {
               "location": "import",
-              "path": "../../../../../../utils/date/year-month-values"
+              "path": "../../../../../../utils/date/year-month-values",
+              "id": "src/utils/date/year-month-values.ts::GuxISOYearMonth"
             }
           }
         },

package/dist/collection/components/beta/gux-month-picker/gux-month-calendar/gux-month-list/gux-month-list.js

@@ -1,5 +1,5 @@
-import { h, Host } from '@stencil/core';
-import { first, focusMove, last, next, previous } from '../../../../stable/gux-list/gux-list.service';
+import { h, Host } from "@stencil/core";
+import { first, focusMove, last, next, previous } from "../../../../stable/gux-list/gux-list.service";
 const validFocusableItems = ['gux-month-list-item'];
 /**
  * @slot - month name
@@ -64,7 +64,8 @@ export class GuxMonthList {
           "parameters": [],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             }
           },
           "return": "Promise<void>"

package/dist/collection/components/beta/gux-month-picker/gux-month-picker.css

@@ -4,17 +4,17 @@
 
 .gux-target {
   display: inline-flex;
-  cursor: pointer;
-  padding: var(--gse-ui-formControl-textarea-padding);
   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 {
-  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);
   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);
 }
 .gux-target .gux-display {
   display: inline-flex;
@@ -22,8 +22,8 @@
   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);
-  line-height: var(--gse-ui-formControl-label-text-lineHeight);
   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 {
@@ -42,9 +42,9 @@
   border: none;
 }
 .gux-target .gux-popup-toggle:focus-visible {
+  border-radius: 2px;
   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);
-  border-radius: 2px;
 }
 .gux-target .gux-popup-toggle:not(:disabled):hover {
   color: var(--gse-ui-monthPicker-calendarStates-hoverColor);