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

package/dist/collection/components/stable/gux-listbox-multi/gux-listbox-multi.js

@@ -1,11 +1,11 @@
-import { h, Host } from '@stencil/core';
-import { actOnActiveOption, clearActiveOptions, goToOption, hasPreviousOption, hasNextOption, onClickedOption, setFirstOptionActive, setInitialActiveOption, setLastOptionActive, setNextOptionActive, setPreviousOptionActive } from '../gux-listbox/gux-listbox.service';
-import { buildI18nForComponent } from '../../../i18n';
-import { whenEventIsFrom } from '@utils/dom/when-event-is-from';
-import simulateNativeEvent from '@utils/dom/simulate-native-event';
-import { trackComponent } from '@utils/tracking/usage';
-import { afterNextRender } from '@utils/dom/after-next-render';
-import translationResources from './i18n/en.json';
+import { h, Host } from "@stencil/core";
+import { actOnActiveOption, clearActiveOptions, goToOption, hasPreviousOption, hasNextOption, onClickedOption, setFirstOptionActive, setInitialActiveOption, setLastOptionActive, setNextOptionActive, setPreviousOptionActive } from "../gux-listbox/gux-listbox.service";
+import { buildI18nForComponent } from "../../../i18n";
+import { whenEventIsFrom } from "../../../utils/dom/when-event-is-from";
+import simulateNativeEvent from "../../../utils/dom/simulate-native-event";
+import { trackComponent } from "../../../utils/tracking/usage";
+import { afterNextRender } from "../../../utils/dom/after-next-render";
+import translationResources from "./i18n/en.json";
 /**
  * @slot - collection of gux-option-multi elements
  */
@@ -313,7 +313,8 @@ export class GuxListboxMulti {
           "references": {
             "GuxFilterTypes": {
               "location": "import",
-              "path": "../gux-dropdown/gux-dropdown.types"
+              "path": "../gux-dropdown/gux-dropdown.types",
+              "id": "src/components/stable/gux-dropdown/gux-dropdown.types.ts::GuxFilterTypes"
             }
           }
         },
@@ -396,7 +397,8 @@ export class GuxListboxMulti {
           "parameters": [],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             }
           },
           "return": "Promise<void>"

package/dist/collection/components/stable/gux-listbox-multi/gux-option-multi/gux-option-multi.css

@@ -3,16 +3,16 @@
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
+  gap: var(--gse-ui-menu-option-gap);
   align-content: stretch;
   align-items: center;
   min-height: var(--gse-ui-menu-option-height);
   padding: var(--gse-ui-menu-option-padding);
   font-family: var(--gse-ui-menu-option-label-default-text-fontFamily);
+  font-size: var(--gse-ui-menu-option-label-default-text-fontSize);
   font-weight: var(--gse-ui-menu-option-label-default-text-fontWeight);
   line-height: var(--gse-ui-menu-option-label-default-text-lineHeight);
-  font-size: var(--gse-ui-menu-option-label-default-text-fontSize);
   color: var(--gse-ui-menu-option-label-foregroundColor);
-  gap: var(--gse-ui-menu-option-gap);
   word-wrap: break-word;
   cursor: pointer;
 }
@@ -33,17 +33,17 @@
 }
 :host:host(.gux-selected) {
   font-family: var(--gse-ui-menu-option-label-active-text-fontFamily);
+  font-size: var(--gse-ui-menu-option-label-active-text-fontSize);
   font-weight: var(--gse-ui-menu-option-label-active-text-fontWeight);
   line-height: var(--gse-ui-menu-option-label-active-text-lineHeight);
-  font-size: var(--gse-ui-menu-option-label-active-text-fontSize);
   background-color: var(--gse-ui-menu-option-selected-backgroundColor);
 }
 :host:host(.gux-selected) .gux-checkbox-container > path {
   fill: var(--gse-ui-menu-option-checkbox-checked-default-foregroundColor);
 }
 :host:host(.gux-active) {
-  outline: var(--gse-ui-menu-option-focus-border-width) var(--gse-ui-menu-option-focus-border-style) var(--gse-ui-menu-option-focus-border-color);
   border-radius: var(--gse-semantic-focusRing-cornerRadius);
+  outline: var(--gse-ui-menu-option-focus-border-width) var(--gse-ui-menu-option-focus-border-style) var(--gse-ui-menu-option-focus-border-color);
 }
 :host:host(.gux-hovered:not([disabled])) {
   background-color: var(--gse-ui-menu-option-hover-backgroundColor);

package/dist/collection/components/stable/gux-listbox-multi/gux-option-multi/gux-option-multi.js

@@ -1,7 +1,7 @@
-import { h, Host } from '@stencil/core';
-import { randomHTMLId } from '@utils/dom/random-html-id';
-import { buildI18nForComponent } from '../../../../i18n';
-import translationResources from './i18n/en.json';
+import { h, Host } from "@stencil/core";
+import { randomHTMLId } from "../../../../utils/dom/random-html-";
+import { buildI18nForComponent } from "../../../../i18n";
+import translationResources from "./i18n/en.json";
 /**
  * @slot - text
  */

package/dist/collection/components/stable/gux-loading-message/gux-loading-message.css

@@ -56,47 +56,47 @@
   .gux-container .gux-primary-message {
     margin-top: var(--gse-ui-progressAndLoading-large-gap);
     font-family: var(--gse-ui-progressAndLoading-loadingState-large-header-fontFamily);
+    font-size: var(--gse-ui-progressAndLoading-loadingState-large-header-fontSize);
     font-weight: var(--gse-ui-progressAndLoading-loadingState-large-header-fontWeight);
     line-height: var(--gse-ui-progressAndLoading-loadingState-large-header-lineHeight);
-    font-size: var(--gse-ui-progressAndLoading-loadingState-large-header-fontSize);
   }
   .gux-container .gux-additional-guidance {
     margin-top: var(--gse-ui-progressAndLoading-large-gapText);
     font-family: var(--gse-ui-progressAndLoading-loadingState-large-subheader-fontFamily);
+    font-size: var(--gse-ui-progressAndLoading-loadingState-large-subheader-fontSize);
     font-weight: var(--gse-ui-progressAndLoading-loadingState-large-subheader-fontWeight);
     line-height: var(--gse-ui-progressAndLoading-loadingState-large-subheader-lineHeight);
-    font-size: var(--gse-ui-progressAndLoading-loadingState-large-subheader-fontSize);
   }
 }
 @container (width > 200px) and (width <=400px) {
   .gux-container .gux-primary-message {
     margin-top: var(--gse-ui-progressAndLoading-medium-gap);
     font-family: var(--gse-ui-progressAndLoading-loadingState-medium-header-fontFamily);
+    font-size: var(--gse-ui-progressAndLoading-loadingState-medium-header-fontSize);
     font-weight: var(--gse-ui-progressAndLoading-loadingState-medium-header-fontWeight);
     line-height: var(--gse-ui-progressAndLoading-loadingState-medium-header-lineHeight);
-    font-size: var(--gse-ui-progressAndLoading-loadingState-medium-header-fontSize);
   }
   .gux-container .gux-additional-guidance {
     margin-top: var(--gse-ui-progressAndLoading-medium-gapText);
     font-family: var(--gse-ui-progressAndLoading-loadingState-medium-subheader-fontFamily);
+    font-size: var(--gse-ui-progressAndLoading-loadingState-medium-subheader-fontSize);
     font-weight: var(--gse-ui-progressAndLoading-loadingState-medium-subheader-fontWeight);
     line-height: var(--gse-ui-progressAndLoading-loadingState-medium-subheader-lineHeight);
-    font-size: var(--gse-ui-progressAndLoading-loadingState-medium-subheader-fontSize);
   }
 }
 @container (width <=200px) {
   .gux-container .gux-primary-message {
     margin-top: var(--gse-ui-progressAndLoading-small-gap);
     font-family: var(--gse-ui-progressAndLoading-loadingState-small-header-fontFamily);
+    font-size: var(--gse-ui-progressAndLoading-loadingState-small-header-fontSize);
     font-weight: var(--gse-ui-progressAndLoading-loadingState-small-header-fontWeight);
     line-height: var(--gse-ui-progressAndLoading-loadingState-small-header-lineHeight);
-    font-size: var(--gse-ui-progressAndLoading-loadingState-small-header-fontSize);
   }
   .gux-container .gux-additional-guidance {
     margin-top: var(--gse-ui-progressAndLoading-small-gapText);
     font-family: var(--gse-ui-progressAndLoading-loadingState-small-subheader-fontFamily);
+    font-size: var(--gse-ui-progressAndLoading-loadingState-small-subheader-fontSize);
     font-weight: var(--gse-ui-progressAndLoading-loadingState-small-subheader-fontWeight);
     line-height: var(--gse-ui-progressAndLoading-loadingState-small-subheader-lineHeight);
-    font-size: var(--gse-ui-progressAndLoading-loadingState-small-subheader-fontSize);
   }
 }

package/dist/collection/components/stable/gux-loading-message/gux-loading-message.js

@@ -1,5 +1,5 @@
-import { h } from '@stencil/core';
-import { trackComponent } from '@utils/tracking/usage';
+import { h } from "@stencil/core";
+import { trackComponent } from "../../../utils/tracking/usage";
 /**
  * @slot progress - Required slot for progress.
  * @slot primary-guidance - Required slot for primary guidance.

package/dist/collection/components/stable/gux-loading-message/tests/gux-loading-message.e2e.js

@@ -0,0 +1,14 @@
+import { newSparkE2EPage, a11yCheck } from "../../../../test/e2eTestUtils";
+describe('gux-loading-message', () => {
+  it('renders', async () => {
+    const html = `<gux-loading-message>
+        <span slot="primary-message">The content is loading...</span>
+        <span slot="additional-guidance">Thank you for waiting.</span>
+        <gux-radial-progress slot="progress" />
+        </gux-loading-message>`;
+    const page = await newSparkE2EPage({ html });
+    const element = await page.find('gux-loading-message');
+    await a11yCheck(page);
+    expect(element.innerHTML).toMatchSnapshot();
+  });
+});

package/dist/collection/components/stable/gux-loading-message/tests/gux-loading-message.spec.js

@@ -0,0 +1,27 @@
+import { newSpecPage } from "../../../../test/specTestUtils";
+import { GuxLoadingMessage } from "../gux-loading-message";
+const components = [GuxLoadingMessage];
+const language = 'en';
+describe('gux-loading-message', () => {
+  it('should build', async () => {
+    const html = `<gux-loading-message>
+        <span slot="primary-message">The content is loading...</span>
+        <span slot="additional-guidance">Thank you for waiting.</span>
+        <gux-radial-progress slot="progress" />
+        </gux-loading-message>`;
+    const page = await newSpecPage({ components, language, html });
+    const component = page.rootInstance;
+    expect(component).toBeInstanceOf(GuxLoadingMessage);
+  });
+  describe('#render', () => {
+    it(`should render the component as expected`, async () => {
+      const html = `<gux-loading-message>
+            <span slot="primary-message">The content is loading...</span>
+            <span slot="additional-guidance">Thank you for waiting.</span>
+            <gux-radial-progress slot="progress" />
+            </gux-loading-message>`;
+      const page = await newSpecPage({ components, language, html });
+      expect(page.root).toMatchSnapshot();
+    });
+  });
+});

package/dist/collection/components/stable/gux-modal/gux-modal.css

@@ -1,3 +1,11 @@
+/*
+ * Typography styles and mixins.
+ */
+/* Helpers */
+/* Base typography */
+/* Headings */
+/* Anchor */
+/* Custom Styles */
 /*
 @prop $gse-ui-modal-closeButtonColor // TODO: COMUI-2300 - follow up later when dismiss button has been tokenized
 @prop $gse-ui-modal-headerColor
@@ -15,7 +23,7 @@
 @prop $gse-ui-modal-small-width
 @prop $gse-ui-modal-medium-width
 @prop $gse-ui-modal-large-width
-@prop $gse-ui-modal-buttonBar-gap 
+@prop $gse-ui-modal-buttonBar-gap
 @prop $gse-ui-modal-boxShadow-x
 @prop $gse-ui-modal-boxShadow-y
 @prop $gse-ui-modal-boxShadow-blur
@@ -25,60 +33,9 @@
 @prop $gse-ui-modal-borderRadius
 @prop $gse-ui-modal-opacity - Skipped (this is incoporated into the gse-ui-modal-shroudColor token and is no longer needed. Thinking about asking design team to remove this token to avoid confusion)
 */
-.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.
- */
-/* Helpers */
-/* Base typography */
-/* Headings */
-/* Anchor */
-.gux-icon-anchor gux-icon {
-  padding-right: var(--gse-ui-links-inLine-padding);
-}
-
-/* Custom Styles */
 ::slotted(button:active:enabled) {
-  text-decoration: underline;
   color: var(--gse-ui-link-active-color);
+  text-decoration: underline;
   background: none;
 }
 
@@ -101,7 +58,6 @@ slot[name=left-align-buttons]::slotted(:not(button, gux-button)) {
   background: var(--gse-ui-modal-shroudColor);
 }
 :host .gux-modal .gux-modal-container {
-  box-shadow: var(--gse-ui-modal-boxShadow-x) var(--gse-ui-modal-boxShadow-y) var(--gse-ui-modal-boxShadow-blur) var(--gse-ui-modal-boxShadow-spread) var(--gse-ui-modal-boxShadow-color);
   position: relative;
   box-sizing: border-box;
   display: flex;
@@ -111,6 +67,7 @@ slot[name=left-align-buttons]::slotted(:not(button, gux-button)) {
   background: var(--gse-ui-modal-backgroundColor);
   border: 1px solid #b4bccb;
   border-radius: var(--gse-ui-modal-borderRadius);
+  box-shadow: var(--gse-ui-modal-boxShadow-x) var(--gse-ui-modal-boxShadow-y) var(--gse-ui-modal-boxShadow-blur) var(--gse-ui-modal-boxShadow-spread) var(--gse-ui-modal-boxShadow-color);
 }
 :host .gux-modal .gux-modal-container.gux-small {
   width: var(--gse-ui-modal-small-width);
@@ -133,15 +90,15 @@ slot[name=left-align-buttons]::slotted(:not(button, gux-button)) {
 }
 :host .gux-modal .gux-modal-container .gux-modal-header {
   margin: 0;
-  color: var(--gse-ui-modal-headerColor);
-  line-height: var(--gse-ui-modal-heading-fontFamily);
   font-family: var(--gse-ui-modal-heading-fontFamily);
   font-size: var(--gse-ui-modal-heading-fontSize);
   font-weight: var(--gse-ui-modal-heading-fontWeight);
+  line-height: var(--gse-ui-modal-heading-fontFamily);
+  color: var(--gse-ui-modal-headerColor);
   letter-spacing: var(--gse-ui-modal-heading-letterSpacing);
   font-family: var(--gse-core-fontFamily-heading), var(--gse-core-fontFamily-body), sans-serif;
-  font-weight: var(--gse-core-fontWeight-bold);
   font-size: var(--gse-core-fontSize-xl);
+  font-weight: var(--gse-core-fontWeight-bold);
   line-height: var(--gse-core-lineHeight-xl);
 }
 :host .gux-modal .gux-modal-container .gux-modal-content {

package/dist/collection/components/stable/gux-modal/gux-modal.js

@@ -1,6 +1,6 @@
-import { h } from '@stencil/core';
-import { randomHTMLId } from '@utils/dom/random-html-id';
-import { trackComponent } from '@utils/tracking/usage';
+import { h } from "@stencil/core";
+import { randomHTMLId } from "../../../utils/dom/random-html-";
+import { trackComponent } from "../../../utils/tracking/usage";
 /**
  * @slot content - Required slot for the modal content
  * @slot left-align-buttons - Optional slot to set gux-buttons aligned to the left of the modal
@@ -98,7 +98,8 @@ export class GuxModal {
           "references": {
             "GuxModalSize": {
               "location": "import",
-              "path": "./gux-modal.types"
+              "path": "./gux-modal.types",
+              "id": "src/components/stable/gux-modal/gux-modal.types.ts::GuxModalSize"
             }
           }
         },

package/dist/collection/components/stable/gux-modal/tests/gux-modal.e2e.js

@@ -0,0 +1,300 @@
+import { newSparkE2EPage, a11yCheck } from "../../../../test/e2eTestUtils";
+describe('gux-modal', () => {
+  describe('#render', () => {
+    [
+      {
+        description: 'should render small modal',
+        html: `
+          <gux-modal lang="en" size="small">
+            <div slot="title">Modal Title</div>
+            <div slot="content">This contains the modal content.</div>
+            <div slot="left-align-buttons">
+                <gux-button>Cancel</gux-button>
+            </div>
+            <div slot="right-align-buttons">
+              <gux-button accent="primary">Accept</gux-button>
+            </div>
+          </gux-modal>
+        `
+      },
+      {
+        description: 'should render medium modal',
+        html: `
+          <gux-modal lang="en" size="medium">
+            <div slot="title">Modal Title</div>
+            <div slot="content">This contains the modal content.</div>
+            <div slot="left-align-buttons">
+                <gux-button>Cancel</gux-button>
+            </div>
+            <div slot="right-align-buttons">
+              <gux-button accent="primary">Accept</gux-button>
+            </div>
+          </gux-modal>
+        `
+      },
+      {
+        description: 'should render large modal',
+        html: `
+          <gux-modal lang="en" size="large">
+            <div slot="title">Modal Title</div>
+            <div slot="content">This contains the modal content.</div>
+            <div slot="left-align-buttons">
+                <gux-button>Cancel</gux-button>
+            </div>
+            <div slot="right-align-buttons">
+              <gux-button accent="primary">Accept</gux-button>
+            </div>
+          </gux-modal>
+        `
+      },
+      {
+        description: 'should render modal without a title',
+        html: `
+          <gux-modal lang="en" size="large">
+            <div slot="content">This contains the modal content.</div>
+            <div slot="left-align-buttons">
+                <gux-button>Cancel</gux-button>
+            </div>
+            <div slot="right-align-buttons">
+              <gux-button accent="primary">Accept</gux-button>
+            </div>
+          </gux-modal>
+        `
+      },
+      {
+        description: 'should render modal without buttons',
+        html: `
+          <gux-modal lang="en" size="small">
+            <div slot="title">Modal Title</div>
+            <div slot="content">This contains the modal content.</div>
+          </gux-modal>
+        `
+      },
+      {
+        description: 'should render modal with just left align buttons',
+        html: `
+          <gux-modal lang="en" size="small">
+            <div slot="title">Modal Title</div>
+            <div slot="content">This contains the modal content.</div>
+            <div slot="left-align-buttons">
+                <gux-button>Cancel</gux-button>
+            </div>
+          </gux-modal>
+        `
+      },
+      {
+        description: 'should render modal with just right align buttons',
+        html: `
+          <gux-modal lang="en" size="small">
+            <div slot="title">Modal Title</div>
+            <div slot="content">This contains the modal content.</div>
+            <div slot="right-align-buttons">
+              <gux-button accent="primary">Accept</gux-button>
+            </div>
+          </gux-modal>
+        `
+      },
+      {
+        description: 'should render small modal by default',
+        html: `
+          <gux-modal lang="en">
+            <div slot="title">Modal Title</div>
+            <div slot="content">This contains the modal content.</div>
+            <div slot="left-align-buttons">
+                <gux-button>Cancel</gux-button>
+            </div>
+            <div slot="right-align-buttons">
+              <gux-button accent="primary">Accept</gux-button>
+            </div>
+          </gux-modal>
+        `
+      }
+    ].forEach(({ description, html }) => {
+      it(description, async () => {
+        const page = await newSparkE2EPage({ html });
+        const element = await page.find('gux-modal');
+        expect(element.outerHTML).toMatchSnapshot();
+        element.setAttribute('hidden', true);
+        await page.waitForChanges();
+        await a11yCheck(page);
+        expect(element.outerHTML).toMatchSnapshot();
+      });
+    });
+  });
+  describe('dismiss', () => {
+    it('click dismiss button', async () => {
+      const html = `
+        <gux-modal lang="en" size="small">
+          <div slot="title">Modal Title</div>
+          <div slot="content">This contains the modal content.</div>
+          <div slot="left-align-buttons">
+              <gux-button>Cancel</gux-button>
+          </div>
+          <div slot="right-align-buttons">
+            <gux-button accent="primary">Accept</gux-button>
+          </div>
+        </gux-modal>
+      `;
+      const page = await newSparkE2EPage({ html });
+      const element = await page.find('gux-modal');
+      const dismissButtonElement = await element.find('pierce/gux-dismiss-button');
+      const dismissButton = await dismissButtonElement.find('pierce/button');
+      const guxdismissSpy = await page.spyOnEvent('guxdismiss');
+      const clickSpy = await page.spyOnEvent('click');
+      expect(guxdismissSpy).not.toHaveReceivedEvent();
+      expect(clickSpy).not.toHaveReceivedEvent();
+      expect(await page.find('gux-modal')).not.toBeNull();
+      await dismissButton.click();
+      await page.waitForChanges();
+      expect(guxdismissSpy).toHaveReceivedEvent();
+      expect(clickSpy).not.toHaveReceivedEvent();
+      expect(await page.find('gux-modal')).toBeNull();
+    });
+    it('click dismiss button and prevent default', async () => {
+      const html = `
+        <gux-modal lang="en" size="small">
+          <div slot="title">Modal Title</div>
+          <div slot="content">This contains the modal content.</div>
+          <div slot="left-align-buttons">
+              <gux-button>Cancel</gux-button>
+          </div>
+          <div slot="right-align-buttons">
+            <gux-button accent="primary">Accept</gux-button>
+          </div>
+        </gux-modal>
+      `;
+      const page = await newSparkE2EPage({ html });
+      const element = await page.find('gux-modal');
+      const dismissButtonElement = await element.find('pierce/gux-dismiss-button');
+      const dismissButton = await dismissButtonElement.find('pierce/button');
+      const guxdismissSpy = await page.spyOnEvent('guxdismiss');
+      const clickSpy = await page.spyOnEvent('click');
+      await page.evaluate(() => {
+        document.addEventListener('guxdismiss', event => {
+          event.preventDefault();
+        });
+      });
+      expect(guxdismissSpy).not.toHaveReceivedEvent();
+      expect(clickSpy).not.toHaveReceivedEvent();
+      expect(await page.find('gux-modal')).not.toBeNull();
+      await dismissButton.click();
+      await page.waitForChanges();
+      expect(guxdismissSpy).toHaveReceivedEvent();
+      expect(clickSpy).not.toHaveReceivedEvent();
+      expect(await page.find('gux-modal')).not.toBeNull();
+    });
+    it('escape key dismiss', async () => {
+      const html = `
+        <gux-modal lang="en" size="small">
+          <div slot="title">Modal Title</div>
+          <div slot="content">This contains the modal content.</div>
+          <div slot="left-align-buttons">
+              <gux-button>Cancel</gux-button>
+          </div>
+          <div slot="right-align-buttons">
+            <gux-button accent="primary">Accept</gux-button>
+          </div>
+        </gux-modal>
+      `;
+      const page = await newSparkE2EPage({ html });
+      const modalEl = await page.find('gux-modal');
+      const guxdismissSpy = await page.spyOnEvent('guxdismiss');
+      expect(guxdismissSpy).not.toHaveReceivedEvent();
+      expect(modalEl).not.toBeNull();
+      await page.keyboard.down('Escape');
+      await page.waitForChanges();
+      expect(guxdismissSpy).toHaveReceivedEvent();
+      expect(await page.find('gux-modal')).toBeNull();
+    });
+  });
+  describe('focus', () => {
+    const focusModalHtml = (props = '') => `
+      <gux-modal lang="en" size="small" trap-focus="true" ${props}>
+        <div slot="title">Modal Title</div>
+        <div slot="content">This contains the modal content.</div>
+        <div slot="left-align-buttons">
+            <gux-button id="cancel-button">Cancel</gux-button>
+        </div>
+        <div slot="right-align-buttons">
+          <gux-button id="accept-button" accent="primary">Accept</gux-button>
+        </div>
+      </gux-modal>
+    `;
+    const modalContainerHtml = `
+      <div id="modal-container"></div>
+      <button id="other-button">Do Nothing</button>
+      <button id="modal-trigger">Open Modal</button>
+    `;
+    const setupContainerPage = async (modalHtml) => {
+      const page = await newSparkE2EPage({ html: modalContainerHtml });
+      await page.evaluate(html => {
+        var _a;
+        (_a = document
+          .getElementById('modal-trigger')) === null || _a === void 0 ? void 0 : _a.addEventListener('click', () => {
+          if (document.getElementById('modal-container'))
+            document.getElementById('modal-container').innerHTML = html;
+        });
+      }, modalHtml);
+      return page;
+    };
+    const getFocusedElementText = (page) => page.evaluate(() => document.activeElement.textContent);
+    const getFocusedShadowElementText = (page) => page.evaluate(() => document.querySelector('gux-modal').shadowRoot.activeElement
+      .textContent);
+    const getFocusedShadowElementTagName = (page) => page.evaluate(() => document.querySelector('gux-modal').shadowRoot.activeElement.tagName);
+    it('focuses the dismiss button by defualt', async () => {
+      const page = await setupContainerPage(focusModalHtml());
+      await page.click('#modal-trigger');
+      await page.waitForChanges();
+      expect(await page.find('gux-modal')).not.toBeNull();
+      expect(await getFocusedShadowElementText(page)).toBe('');
+      expect(await getFocusedShadowElementTagName(page)).toBe('GUX-DISMISS-BUTTON');
+    });
+    test('can focus a specific focusable element', async () => {
+      const page = await setupContainerPage(focusModalHtml('initial-focus="#accept-button"'));
+      await page.click('#modal-trigger');
+      await page.waitForChanges();
+      expect(await page.find('gux-modal')).not.toBeNull();
+      expect(await getFocusedElementText(page)).toBe('Accept');
+    });
+    test('focuses the dismiss button if there are no other focusable elements', async () => {
+      const page = await setupContainerPage(`
+        <gux-modal lang="en" size="small">
+          <div slot="content">This contains the modal content.</div>
+        </gux-modal>
+      `);
+      await page.click('#modal-trigger');
+      await page.waitForChanges();
+      expect(await page.find('gux-modal')).not.toBeNull();
+      expect(await getFocusedShadowElementText(page)).toBe('');
+      expect(await getFocusedShadowElementTagName(page)).toBe('GUX-DISMISS-BUTTON');
+    });
+    test('traps focus in the modal', async () => {
+      const page = await setupContainerPage(focusModalHtml());
+      await page.click('#modal-trigger');
+      await page.waitForChanges();
+      expect(await getFocusedShadowElementText(page)).toBe('');
+      expect(await getFocusedShadowElementTagName(page)).toBe('GUX-DISMISS-BUTTON');
+      await page.keyboard.press('Tab');
+      expect(await getFocusedElementText(page)).toBe('Cancel');
+      await page.keyboard.press('Tab');
+      expect(await getFocusedElementText(page)).toBe('Accept');
+      await page.keyboard.press('Tab');
+      expect(await getFocusedShadowElementText(page)).toBe('');
+      expect(await getFocusedShadowElementTagName(page)).toBe('GUX-DISMISS-BUTTON');
+      await page.keyboard.down('Shift');
+      await page.keyboard.press('Tab');
+      expect(await getFocusedShadowElementText(page)).toBe('');
+      expect(await getFocusedShadowElementTagName(page)).toBe('GUX-DISMISS-BUTTON');
+    });
+    test('returns focus to the originally focused element when the modal closes', async () => {
+      const page = await setupContainerPage(focusModalHtml());
+      await page.click('#modal-trigger');
+      await page.waitForChanges();
+      expect(await getFocusedShadowElementText(page)).toBe('');
+      expect(await getFocusedShadowElementTagName(page)).toBe('GUX-DISMISS-BUTTON');
+      await page.keyboard.down('Escape');
+      await page.waitForChanges();
+      expect(await getFocusedElementText(page)).toBe('Open Modal');
+    });
+  });
+});