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

package/dist/collection/components/beta/gux-segmented-control/gux-segmented-control-item/gux-segmented-control-item.css

@@ -1,42 +1,3 @@
-.gux-focus-ring-focused:focus {
-  outline-width: var(--gse-semantic-focusRing-default-border-width);
-  outline-style: var(--gse-semantic-focusRing-default-border-style);
-  outline-color: var(--gse-semantic-focusRing-default-border-color);
-  outline-offset: var(--gse-semantic-focusRing-offset);
-}
-
-.gux-focus-ring-focused-within:focus-within {
-  outline-width: var(--gse-semantic-focusRing-default-border-width);
-  outline-style: var(--gse-semantic-focusRing-default-border-style);
-  outline-color: var(--gse-semantic-focusRing-default-border-color);
-  outline-offset: var(--gse-semantic-focusRing-offset);
-}
-
-.gux-focus-ring-focused-visible:focus-visible {
-  outline-width: var(--gse-semantic-focusRing-default-border-width);
-  outline-style: var(--gse-semantic-focusRing-default-border-style);
-  outline-color: var(--gse-semantic-focusRing-default-border-color);
-  outline-offset: var(--gse-semantic-focusRing-offset);
-}
-
-.gux-focus-ring-small-focused:focus {
-  outline-width: var(--gse-semantic-focusRing-small-border-width);
-  outline-style: var(--gse-semantic-focusRing-small-border-style);
-  outline-color: var(--gse-semantic-focusRing-small-border-color);
-}
-
-.gux-focus-ring-small-focused-within:focus-within {
-  outline-width: var(--gse-semantic-focusRing-small-border-width);
-  outline-style: var(--gse-semantic-focusRing-small-border-style);
-  outline-color: var(--gse-semantic-focusRing-small-border-color);
-}
-
-.gux-focus-ring-small-focused-visible:focus-visible {
-  outline-width: var(--gse-semantic-focusRing-small-border-width);
-  outline-style: var(--gse-semantic-focusRing-small-border-style);
-  outline-color: var(--gse-semantic-focusRing-small-border-color);
-}
-
 /**
   * @prop --gse-ui-segmentedControl-button-padding
   * @prop --gse-ui-segmentedControl-border-color : //TODO https://inindca.atlassian.net/browse/COMUI-2294
@@ -65,38 +26,36 @@ button {
 
 .gux-container {
   height: var(--gse-ui-segmentedControl-height);
-  border-width: var(--gse-ui-segmentedControl-border-width);
-  border-style: var(--gse-ui-segmentedControl-border-style);
   border-color: #a3a7b0;
-  border-radius: var(--gse-ui-segmentedControl-button-middle-borderRadius);
-  border-left-color: var(--gse-ui-segmentedControl-button-active-backgroundColor);
+  border-style: var(--gse-ui-segmentedControl-border-style);
+  border-width: var(--gse-ui-segmentedControl-border-width);
   border-right: none;
+  border-left-color: var(--gse-ui-segmentedControl-button-active-backgroundColor);
+  border-radius: var(--gse-ui-segmentedControl-button-middle-borderRadius);
 }
 .gux-container.gux-start {
-  border-radius: var(--gse-ui-segmentedControl-button-start-borderRadius);
   border-left-color: #a3a7b0;
+  border-radius: var(--gse-ui-segmentedControl-button-start-borderRadius);
 }
 .gux-container.gux-end {
+  border-right: var(--gse-ui-segmentedControl-border-width) var(--gse-ui-segmentedControl-border-style) #a3a7b0;
   border-radius: var(--gse-ui-segmentedControl-button-end-borderRadius);
-  border-right-width: var(--gse-ui-segmentedControl-border-width);
-  border-right-style: var(--gse-ui-segmentedControl-border-style);
-  border-right-color: #a3a7b0;
 }
 .gux-container.gux-start.gux-end {
   border-radius: 4px;
 }
 .gux-container .gux-segmented-control-item {
-  padding: var(--gse-ui-segmentedControl-button-padding);
-  height: 100%;
-  background-color: var(--gse-ui-segmentedControl-button-default-backgroundColor);
-  color: var(--gse-ui-segmentedControl-button-default-foregroundColor);
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
-  justify-content: flex-start;
+  gap: var(--gse-ui-segmentedControl-button-gap);
   align-content: stretch;
   align-items: center;
-  gap: var(--gse-ui-segmentedControl-button-gap);
+  justify-content: flex-start;
+  height: 100%;
+  padding: var(--gse-ui-segmentedControl-button-padding);
+  color: var(--gse-ui-segmentedControl-button-default-foregroundColor);
+  background-color: var(--gse-ui-segmentedControl-button-default-backgroundColor);
 }
 .gux-container .gux-segmented-control-item.gux-icon-only {
   padding: 0 8px;
@@ -111,29 +70,27 @@ button {
   white-space: nowrap;
 }
 .gux-container .gux-segmented-control-item:hover {
-  background-color: var(--gse-ui-segmentedControl-button-hover-backgroundColor);
   color: var(--gse-ui-segmentedControl-button-hover-foregroundColor);
+  background-color: var(--gse-ui-segmentedControl-button-hover-backgroundColor);
 }
 .gux-container .gux-segmented-control-item[disabled] {
+  color: var(--gse-ui-segmentedControl-button-disabled-foregroundColor);
   pointer-events: none;
-  opacity: var(--gse-ui-segmentedControl-button-disabled-opacity);
   background-color: var(--gse-ui-segmentedControl-button-disabled-backgroundColor);
-  color: var(--gse-ui-segmentedControl-button-disabled-foregroundColor);
+  opacity: var(--gse-ui-segmentedControl-button-disabled-opacity);
 }
 .gux-container .gux-segmented-control-item.gux-selected {
-  background-color: var(--gse-ui-segmentedControl-button-active-backgroundColor);
   color: var(--gse-ui-segmentedControl-button-active-foregroundColor);
+  background-color: var(--gse-ui-segmentedControl-button-active-backgroundColor);
   border-color: var(--gse-ui-segmentedControl-button-active-backgroundColor);
 }
 .gux-container .gux-segmented-control-item:focus-visible {
   position: relative;
   z-index: 1;
   border-radius: var(--gse-ui-segmentedControl-borderRadius);
-  outline-width: var(--gse-semantic-focusRing-default-border-width);
-  outline-style: var(--gse-semantic-focusRing-default-border-style);
-  outline-color: var(--gse-semantic-focusRing-default-border-color);
+  outline: var(--gse-semantic-focusRing-default-border-color) var(--gse-semantic-focusRing-default-border-style) var(--gse-semantic-focusRing-default-border-width);
   outline-offset: var(--gse-semantic-focusRing-offset);
-  outline-offset: 0px;
+  outline-offset: 0;
 }
 .gux-container .gux-segmented-control-item .gux-icon slot[name=icon]::slotted(gux-icon) {
   width: var(--gse-ui-icon-size-sm);

package/dist/collection/components/beta/gux-segmented-control/gux-segmented-control-item/gux-segmented-control-item.js

@@ -1,7 +1,7 @@
-import { h } from '@stencil/core';
-import { getClosestElement } from '@utils/dom/get-closest-element';
-import { getSlotTextContent } from '@utils/dom/get-slot-text-content';
-import { hasSlot } from '@utils/dom/has-slot';
+import { h } from "@stencil/core";
+import { getClosestElement } from "../../../../utils/dom/get-closest-element";
+import { getSlotTextContent } from "../../../../utils/dom/get-slot-text-content";
+import { hasSlot } from "../../../../utils/dom/has-slot";
 /**
  * @slot icon - optional slot for an icon
  * @slot text - required slot for text

package/dist/collection/components/beta/gux-segmented-control/gux-segmented-control.js

@@ -1,6 +1,6 @@
-import { h, Host } from '@stencil/core';
-import simulateNativeEvent from '../../../utils/dom/simulate-native-event';
-import { trackComponent } from '@utils/tracking/usage';
+import { h, Host } from "@stencil/core";
+import simulateNativeEvent from "../../../utils/dom/simulate-native-event";
+import { trackComponent } from "../../../utils/tracking/usage";
 /**
  * @slot - list of gux-segmented-control-item elements
  */

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

@@ -0,0 +1,108 @@
+import { newSparkE2EPage, a11yCheck } from "../../../../test/e2eTestUtils";
+describe('gux-segmented-control-beta', () => {
+  const html = `
+  <gux-segmented-control-beta lang="en" value="day">
+    <gux-segmented-control-item value="month">
+      <div slot="text">Month</div>
+    </gux-segmented-control-item>
+    <gux-segmented-control-item value="week">
+      <div slot="text">Week</div>
+    </gux-segmented-control-item>
+    <gux-segmented-control-item value="day">
+      <div slot="text">Day</div>
+    </gux-segmented-control-item>
+    <gux-segmented-control-item value="hour" disabled>
+      <div slot="text">Hour</div>
+    </gux-segmented-control-item>
+    <gux-segmented-control-item value="minute">
+      <div slot="text">Minute</div>
+    </gux-segmented-control-item>
+  </gux-segmented-control-beta>
+`;
+  describe('#render', () => {
+    it(`should render as expected`, async () => {
+      const page = await newSparkE2EPage({ html });
+      const element = await page.find('gux-segmented-control-beta');
+      await a11yCheck(page);
+      expect(element.outerHTML).toMatchSnapshot();
+    });
+  });
+  describe('#interactions', () => {
+    it(`should change value on gux-segmented-control-item click`, async () => {
+      const page = await newSparkE2EPage({ html });
+      const element = await page.find('gux-segmented-control-beta');
+      const guxSegmentedControlItemMinute = await page.find('gux-segmented-control-item[value=minute]');
+      expect(await element.getProperty('value')).toBe('day');
+      await guxSegmentedControlItemMinute.click();
+      await page.waitForChanges();
+      expect(await element.getProperty('value')).toBe(await guxSegmentedControlItemMinute.getProperty('value'));
+    });
+    it(`should not change value on gux-segmented-control-item click if it is disabled`, async () => {
+      const page = await newSparkE2EPage({ html });
+      const element = await page.find('gux-segmented-control-beta');
+      const guxSegmentedControlItemHour = await page.find('gux-segmented-control-item[value=hour]');
+      const currentValue = await element.getProperty('value');
+      expect(currentValue).toBe('day');
+      await guxSegmentedControlItemHour.click();
+      await page.waitForChanges();
+      expect(await element.getProperty('value')).toBe(currentValue);
+    });
+    it(`should emit a 'change' and 'input' event when a new item is selected`, async () => {
+      const page = await newSparkE2EPage({ html });
+      const element = await page.find('gux-segmented-control-beta');
+      const guxSegmentedControlItemMinute = await page.find('gux-segmented-control-item[value=minute]');
+      const spyOnInputEvent = await element.spyOnEvent('input');
+      const spyOnChangeEvent = await element.spyOnEvent('change');
+      await guxSegmentedControlItemMinute.click();
+      await page.waitForChanges();
+      expect(spyOnInputEvent.length).toBe(1);
+      expect(spyOnChangeEvent.length).toBe(1);
+    });
+    it(`should not emit a 'change' or 'input' event when a disabled item is selected`, async () => {
+      const page = await newSparkE2EPage({ html });
+      const element = await page.find('gux-segmented-control-beta');
+      const guxSegmentedControlItemHour = await page.find('gux-segmented-control-item[value=hour]');
+      const spyOnInputEvent = await element.spyOnEvent('input');
+      const spyOnChangeEvent = await element.spyOnEvent('change');
+      await guxSegmentedControlItemHour.click();
+      await page.waitForChanges();
+      expect(spyOnInputEvent.length).toBe(0);
+      expect(spyOnChangeEvent.length).toBe(0);
+    });
+  });
+  describe('onSlotchange', () => {
+    it(`should set selected item as expected`, async () => {
+      const page = await newSparkE2EPage({
+        html: `
+        <gux-segmented-control-beta lang-"en" value="month">
+          <gux-segmented-control-item value="week">
+            <div slot="text">Week</div>
+          </gux-segmented-control-item>
+          <gux-segmented-control-item value="day">
+            <div slot="text">Day</div>
+          </gux-segmented-control-item>
+          <gux-segmented-control-item value="hour" disabled>
+            <div slot="text">Hour</div>
+          </gux-segmented-control-item>
+          <gux-segmented-control-item value="minute">
+            <div slot="text">Minute</div>
+          </gux-segmented-control-item>
+        </gux-segmented-control-beta>
+      `
+      });
+      const element = await page.find('gux-segmented-control-beta');
+      await page.evaluate(() => {
+        const weekElement = document.querySelector('gux-segmented-control-item[value=week]');
+        const monthElement = document.createElement('gux-segmented-control-item');
+        const textElement = document.createElement('div');
+        textElement.setAttribute('slot', 'text');
+        textElement.appendChild(document.createTextNode('Month'));
+        monthElement.appendChild(textElement);
+        monthElement.setAttribute('value', 'month');
+        weekElement.insertAdjacentElement('beforebegin', monthElement);
+      });
+      await page.waitForChanges();
+      expect(element.outerHTML).toMatchSnapshot();
+    });
+  });
+});

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

@@ -0,0 +1,126 @@
+import { newSpecPage } from "../../../../test/specTestUtils";
+import { GuxSegmentedControl } from "../gux-segmented-control";
+import { GuxSegmentedControlItem } from "../gux-segmented-control-item/gux-segmented-control-item";
+const components = [GuxSegmentedControl, GuxSegmentedControlItem];
+const html = `
+  <gux-segmented-control-beta value="day">
+    <gux-segmented-control-item value="month">
+      <div slot="text">Month</div>
+    </gux-segmented-control-item>
+    <gux-segmented-control-item value="week">
+      <div slot="text">Week</div>
+    </gux-segmented-control-item>
+    <gux-segmented-control-item value="day">
+      <div slot="text">Day</div>
+    </gux-segmented-control-item>
+    <gux-segmented-control-item value="hour" disabled>
+      <div slot="text">Hour</div>
+    </gux-segmented-control-item>
+    <gux-segmented-control-item value="minute">
+      <div slot="text">Minute</div>
+    </gux-segmented-control-item>
+  </gux-segmented-control-beta>
+`;
+const language = 'en';
+describe('gux-segmented-control-beta', () => {
+  describe('#render', () => {
+    it(`should render as expected`, async () => {
+      const page = await newSpecPage({ components, html, language });
+      expect(page.rootInstance).toBeInstanceOf(GuxSegmentedControl);
+      expect(page.root).toMatchSnapshot();
+    });
+  });
+  describe('#interactions', () => {
+    it(`should change value on gux-segmented-control-item click`, async () => {
+      const page = await newSpecPage({ components, html, language });
+      const element = page.root;
+      const guxSegmentedControlItemMinute = page.root.querySelector('gux-segmented-control-item[value=minute]');
+      expect(element.value).toBe('day');
+      guxSegmentedControlItemMinute.click();
+      await page.waitForChanges();
+      expect(element.value).toBe(guxSegmentedControlItemMinute.value);
+    });
+    it(`should not change value on gux-segmented-control-item click if it is disabled`, async () => {
+      const page = await newSpecPage({ components, html, language });
+      const element = page.root;
+      const guxSegmentedControlItemHour = page.root.querySelector('gux-segmented-control-item[value=hour]');
+      const currentValue = element.value;
+      expect(currentValue).toBe('day');
+      guxSegmentedControlItemHour.click();
+      await page.waitForChanges();
+      expect(element.value).toBe(currentValue);
+    });
+    it(`should emit a 'change' and 'input' event when a new item is selected`, async () => {
+      const page = await newSpecPage({ components, html, language });
+      const element = page.root;
+      const guxSegmentedControlItemMinute = page.root.querySelector('gux-segmented-control-item[value=minute]');
+      const changeEventSpy = jest.fn();
+      const inputEventSpy = jest.fn();
+      element.addEventListener('change', () => {
+        changeEventSpy();
+      });
+      element.addEventListener('input', () => {
+        inputEventSpy();
+      });
+      guxSegmentedControlItemMinute.click();
+      await page.waitForChanges();
+      expect(changeEventSpy).toHaveBeenCalledWith();
+      expect(inputEventSpy).toHaveBeenCalledWith();
+    });
+    it(`should not emit a 'change' and 'input' event when the selected item is reselected`, async () => {
+      const page = await newSpecPage({ components, html, language });
+      const element = page.root;
+      const guxSegmentedControlItemDay = page.root.querySelector('gux-segmented-control-item[value=day]');
+      const changeEventSpy = jest.fn();
+      const inputEventSpy = jest.fn();
+      element.addEventListener('change', () => {
+        changeEventSpy();
+      });
+      element.addEventListener('input', () => {
+        inputEventSpy();
+      });
+      guxSegmentedControlItemDay.click();
+      await page.waitForChanges();
+      expect(changeEventSpy).not.toHaveBeenCalled();
+      expect(inputEventSpy).not.toHaveBeenCalled();
+    });
+    it(`should not emit a 'change' or 'input' event when a disabled item is selected`, async () => {
+      const page = await newSpecPage({ components, html, language });
+      const element = page.root;
+      const guxSegmentedControlItemHour = page.root.querySelector('gux-segmented-control-item[value=hour]');
+      const changeEventSpy = jest.fn();
+      const inputEventSpy = jest.fn();
+      element.addEventListener('change', () => {
+        changeEventSpy();
+      });
+      element.addEventListener('input', () => {
+        inputEventSpy();
+      });
+      guxSegmentedControlItemHour.click();
+      await page.waitForChanges();
+      expect(changeEventSpy).not.toHaveBeenCalled();
+      expect(inputEventSpy).not.toHaveBeenCalled();
+    });
+  });
+  describe('onSlotchange', () => {
+    it(`should set selected items as expected`, async () => {
+      const page = await newSpecPage({ components, html, language });
+      const element = document.querySelector('gux-segmented-control-beta');
+      const newItem = document.createElement('gux-segmented-control-item');
+      newItem.appendChild(document.createTextNode('Second'));
+      newItem.setAttribute('value', 'second');
+      element.appendChild(newItem);
+      await page.waitForChanges();
+      expect(page.root).toMatchSnapshot();
+    });
+    // onSlotchange is not getting called as expected in the unit tests so it tested manually below
+    it('manually call onSlotchange methods', async () => {
+      const page = await newSpecPage({ components, html, language });
+      const elementController = page.rootInstance;
+      expect(elementController.items).toHaveLength(0);
+      elementController.slotChanged();
+      elementController.componentWillRender();
+      expect(elementController.items).toHaveLength(5);
+    });
+  });
+});

package/dist/collection/components/beta/gux-time/gux-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 GuxTime {
   constructor() {
     this.datetime = new Date().toISOString();
@@ -49,7 +49,8 @@ export class GuxTime {
           "references": {
             "GuxDateTimeFormat": {
               "location": "import",
-              "path": "../../../i18n/DateTimeFormatter"
+              "path": "../../../i18n/DateTimeFormatter",
+              "id": "src/i18n/DateTimeFormatter.ts::GuxDateTimeFormat"
             }
           }
         },
@@ -72,7 +73,8 @@ export class GuxTime {
           "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-time/tests/gux-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-time-beta', () => {
+  describe('#render', () => {
+    [
+      `<gux-time-beta datetime=${date} format="short"></gux-time-beta>`,
+      `<gux-time-beta datetime=${date} format="medium"></gux-time-beta>`,
+      `<gux-time-beta datetime=${date} format="long"></gux-time-beta>`,
+      `<gux-time-beta datetime=${date} format="full"></gux-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-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-time-beta time-zone=${timeZone} datetime="2022-07-07T12:00:00.000Z" format="full"></gux-time-beta>`;
+        const page = await newSparkE2EPage({ html });
+        const element = await page.find('gux-time-beta');
+        expect(element.outerHTML).toMatchSnapshot();
+      });
+    });
+  });
+});

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

@@ -0,0 +1,30 @@
+import { newSpecPage } from "../../../../test/specTestUtils";
+import { GuxTime } from "../gux-time";
+import { timeZoneIdentifiers } from "../../../../i18n/time-zone/identifiers";
+const components = [GuxTime];
+const language = 'en';
+const date = '2022-07-07T13:35:30.100Z';
+describe('gux-time', () => {
+  describe('#render different time formats eg(short,medium,full,long)', () => {
+    [
+      `<gux-time-beta datetime=${date} format="short"></gux-time-beta>`,
+      `<gux-time-beta datetime=${date} format="medium"></gux-time-beta>`,
+      `<gux-time-beta datetime=${date} format="full"></gux-time-beta>`,
+      `<gux-time-beta datetime=${date} format="long"></gux-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-time-beta time-zone=${timeZone} datetime="2022-07-07T12:00:00.000Z" format="full"></gux-time-beta>`;
+        const page = await newSpecPage({ components, html, language });
+        expect(page.root).toMatchSnapshot();
+      });
+    });
+  });
+});

package/dist/collection/components/beta/gux-time-zone-picker/gux-time-zone-picker.js

@@ -1,10 +1,10 @@
-import { h } from '@stencil/core';
-import { getTimeZones } from '@vvo/tzdb';
-import { buildI18nForComponent } from '../../../i18n';
-import translationResources from './i18n/en.json';
-import { trackComponent } from '@utils/tracking/usage';
-import simulateNativeEvent from '../../../utils/dom/simulate-native-event';
-import { genericTimeZones } from './generic-zones';
+import { h } from "@stencil/core";
+import { getTimeZones } from "@vvo/tzdb";
+import { buildI18nForComponent } from "../../../i18n";
+import translationResources from "./i18n/en.json";
+import { trackComponent } from "../../../utils/tracking/usage";
+import simulateNativeEvent from "../../../utils/dom/simulate-native-event";
+import { genericTimeZones } from "./generic-zones";
 export class GuxTimeZonePickerBeta {
   constructor() {
     this.value = undefined;

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

@@ -0,0 +1,53 @@
+import { newSparkE2EPage, a11yCheck } from "../../../../test/e2eTestUtils";
+async function openWithClick(page) {
+  const dropdownButtonElement = await page.find('pierce/.gux-field');
+  await dropdownButtonElement.click();
+  await page.waitForChanges();
+}
+async function unfilteredOptions(page) {
+  const element = await page.find('gux-time-zone-picker-beta');
+  return element.shadowRoot.querySelectorAll(`gux-dropdown gux-listbox gux-option:not(.gux-filtered)`);
+}
+describe('gux-time-zone-picker-beta', () => {
+  describe('#render', () => {
+    it('renders', async () => {
+      const html = `<gux-time-zone-picker-beta></gux-time-zone-picker-beta>`;
+      const page = await newSparkE2EPage({ html });
+      const element = await page.find('gux-time-zone-picker-beta');
+      expect(element).toHaveAttribute('hydrated');
+    });
+  });
+  it('filters the list', async () => {
+    const html = `<gux-time-zone-picker-beta></gux-time-zone-picker-beta>`;
+    const page = await newSparkE2EPage({ html });
+    await a11yCheck(page);
+    await openWithClick(page);
+    await a11yCheck(page);
+    let visibleItems = await unfilteredOptions(page);
+    expect(visibleItems.length).toBe(462);
+    await page.keyboard.press('a');
+    await page.keyboard.press('d');
+    await page.keyboard.press('a');
+    await page.keyboard.press('k');
+    await page.waitForChanges();
+    visibleItems = await unfilteredOptions(page);
+    expect(visibleItems.length).toBe(1);
+  });
+  it('includes generic zones', async () => {
+    const html = `<gux-time-zone-picker-beta></gux-time-zone-picker-beta>`;
+    const page = await newSparkE2EPage({ html });
+    await a11yCheck(page);
+    await openWithClick(page);
+    await a11yCheck(page);
+    let visibleItems = await unfilteredOptions(page);
+    expect(visibleItems.length).toBe(462);
+    await page.keyboard.press('e');
+    await page.keyboard.press('t');
+    await page.keyboard.press('c');
+    await page.keyboard.press('/');
+    await page.waitForChanges();
+    visibleItems = await unfilteredOptions(page);
+    expect(visibleItems.length).toBe(27);
+    expect(visibleItems[0].textContent).toBe('Etc/GMT (UTC+00:00)');
+  });
+});

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

@@ -0,0 +1,15 @@
+import { newSpecPage } from "../../../../test/specTestUtils";
+import { GuxTimeZonePickerBeta } from "../gux-time-zone-picker";
+const components = [GuxTimeZonePickerBeta];
+describe('#render ', () => {
+  [
+    `<gux-time-zone-picker-beta><gux-time-zone-picker-beta>`,
+    `<gux-time-zone-picker-beta value="Etc/GMT+1"><gux-time-zone-picker-beta>`
+  ].forEach((html, index) => {
+    // COMUI-2173update node version for latest time zones
+    it.skip(`should render component as expected (${index + 1})`, async () => {
+      const page = await newSpecPage({ components, html });
+      expect(page.root).toMatchSnapshot();
+    });
+  });
+});

package/dist/collection/components/legacy/gux-action-toast-legacy/gux-action-toast.css

@@ -1,42 +1,3 @@
-.gux-focus-ring-focused:focus {
-  outline-width: var(--gse-semantic-focusRing-default-border-width);
-  outline-style: var(--gse-semantic-focusRing-default-border-style);
-  outline-color: var(--gse-semantic-focusRing-default-border-color);
-  outline-offset: var(--gse-semantic-focusRing-offset);
-}
-
-.gux-focus-ring-focused-within:focus-within {
-  outline-width: var(--gse-semantic-focusRing-default-border-width);
-  outline-style: var(--gse-semantic-focusRing-default-border-style);
-  outline-color: var(--gse-semantic-focusRing-default-border-color);
-  outline-offset: var(--gse-semantic-focusRing-offset);
-}
-
-.gux-focus-ring-focused-visible:focus-visible {
-  outline-width: var(--gse-semantic-focusRing-default-border-width);
-  outline-style: var(--gse-semantic-focusRing-default-border-style);
-  outline-color: var(--gse-semantic-focusRing-default-border-color);
-  outline-offset: var(--gse-semantic-focusRing-offset);
-}
-
-.gux-focus-ring-small-focused:focus {
-  outline-width: var(--gse-semantic-focusRing-small-border-width);
-  outline-style: var(--gse-semantic-focusRing-small-border-style);
-  outline-color: var(--gse-semantic-focusRing-small-border-color);
-}
-
-.gux-focus-ring-small-focused-within:focus-within {
-  outline-width: var(--gse-semantic-focusRing-small-border-width);
-  outline-style: var(--gse-semantic-focusRing-small-border-style);
-  outline-color: var(--gse-semantic-focusRing-small-border-color);
-}
-
-.gux-focus-ring-small-focused-visible:focus-visible {
-  outline-width: var(--gse-semantic-focusRing-small-border-width);
-  outline-style: var(--gse-semantic-focusRing-small-border-style);
-  outline-color: var(--gse-semantic-focusRing-small-border-color);
-}
-
 /*
  * Typography styles and mixins.
  */
@@ -44,10 +5,6 @@
 /* Base typography */
 /* Headings */
 /* Anchor */
-.gux-icon-anchor gux-icon {
-  padding-right: var(--gse-ui-links-inLine-padding);
-}
-
 /* Custom Styles */
 :host {
   display: flex;
@@ -77,8 +34,8 @@
   justify-content: flex-start;
   order: 0;
   font-family: var(--gse-core-fontFamily-heading), var(--gse-core-fontFamily-body), sans-serif;
-  font-weight: var(--gse-core-fontWeight-semiBold);
   font-size: var(--gse-core-fontSize-lg);
+  font-weight: var(--gse-core-fontWeight-semiBold);
   line-height: var(--gse-lineHeight-md);
 }
 .gux-header .gux-icon {

package/dist/collection/components/legacy/gux-action-toast-legacy/gux-action-toast.js

@@ -1,5 +1,5 @@
-import { h, Host } from '@stencil/core';
-import { trackComponent } from '@utils/tracking/usage';
+import { h, Host } from "@stencil/core";
+import { trackComponent } from "../../../utils/tracking/usage";
 /**
  * @slot icon - Required slot for gux-icon
  * @slot title - Required slot for the action toast title