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

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

@@ -0,0 +1,26 @@
+import { newSparkE2EPage, a11yCheck } from "../../../../test/e2eTestUtils";
+describe('gux-action-toast', () => {
+  describe('#render', () => {
+    [
+      {
+        description: 'should render action toast',
+        html: `
+          <gux-action-toast-legacy lang="en" accent="neutral">
+            <gux-icon slot="icon" icon-name="user-add" decorative></gux-icon>
+            <div slot="title">Title</div>
+            <div slot="message">This is the message</div>
+            <gux-button slot="negative-button">Reject</gux-button>
+            <gux-button slot="positive-button" accent="primary">Accept</gux-button>
+          </gux-action-toast-legacy>
+        `
+      }
+    ].forEach(({ description, html }) => {
+      it(description, async () => {
+        const page = await newSparkE2EPage({ html });
+        const element = await page.find('gux-action-toast-legacy');
+        await a11yCheck(page);
+        expect(element.outerHTML).toMatchSnapshot();
+      });
+    });
+  });
+});

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

@@ -0,0 +1,28 @@
+import { newSpecPage } from "../../../../test/specTestUtils";
+import { GuxActionToast } from "../gux-action-toast";
+const components = [GuxActionToast];
+const language = 'en';
+describe('gux-action-toast', () => {
+  describe('#render', () => {
+    [
+      {
+        description: 'should render action toast',
+        html: `
+          <gux-action-toast-legacy accent="neutral">
+            <gux-icon slot="icon" icon-name="user-add" decorative></gux-icon>
+            <div slot="title">Title</div>
+            <div slot="message">This is the message</div>
+            <gux-button slot="negative-button">Reject</gux-button>
+            <gux-button slot="positive-button" accent="primary">Accept</gux-button>
+          </gux-action-toast-legacy>
+        `
+      }
+    ].forEach(({ description, html }) => {
+      it(description, async () => {
+        const page = await newSpecPage({ components, html, language });
+        expect(page.rootInstance).toBeInstanceOf(GuxActionToast);
+        expect(page.root).toMatchSnapshot();
+      });
+    });
+  });
+});

package/dist/collection/components/legacy/gux-advanced-dropdown-legacy/dropdown-option/gux-dropdown-option.js

@@ -1,4 +1,4 @@
-import { h } from '@stencil/core';
+import { h } from "@stencil/core";
 // RegExp escape string from http://stackoverflow.com/a/3561711/23528
 const escapeRegexStr = /[-/\\^$*+?.()|[\]{}]/g;
 function escapeRegex(input) {
@@ -207,7 +207,8 @@ export class GuxDropdownOption {
           "parameters": [],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             }
           },
           "return": "Promise<string>"
@@ -229,7 +230,8 @@ export class GuxDropdownOption {
             }],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             }
           },
           "return": "Promise<boolean>"

package/dist/collection/components/legacy/gux-advanced-dropdown-legacy/dropdown-option/tests/gux-dropdown-option.spec.js

@@ -0,0 +1,47 @@
+import { newSpecPage } from "../../../../../test/specTestUtils";
+import { GuxDropdownOption } from "../gux-dropdown-option";
+const components = [GuxDropdownOption];
+const html = `<gux-dropdown-option text="TestsAreAwesome"></gux-dropdown-option>`;
+const language = 'en';
+describe('gux-dropdown-option', () => {
+  it('should build', async () => {
+    const page = await newSpecPage({ components, html, language });
+    expect(page.root).toMatchSnapshot();
+  });
+  describe('Class Logic', () => {
+    describe('shouldFilter', () => {
+      it('should not filter if no search string is provided', async () => {
+        const page = await newSpecPage({ components, html, language });
+        const component = page.root;
+        const result = await component.shouldFilter('');
+        await page.waitForChanges();
+        expect(result).toBeFalsy();
+        expect(page.root).toMatchSnapshot();
+      });
+      it('should not filter if string is in the text', async () => {
+        const page = await newSpecPage({ components, html, language });
+        const component = page.root;
+        const result = await component.shouldFilter('Are');
+        await page.waitForChanges();
+        expect(result).toBeFalsy();
+        expect(page.root).toMatchSnapshot();
+      });
+      it('should not filter if case-insensitive string is in the text', async () => {
+        const page = await newSpecPage({ components, html, language });
+        const component = page.root;
+        const result = await component.shouldFilter('are');
+        await page.waitForChanges();
+        expect(result).toBeFalsy();
+        expect(page.root).toMatchSnapshot();
+      });
+      it('should filter if string is not in the text', async () => {
+        const page = await newSpecPage({ components, html, language });
+        const component = page.root;
+        const result = await component.shouldFilter('Not');
+        await page.waitForChanges();
+        expect(result).toBeTruthy();
+        expect(page.root).toMatchSnapshot();
+      });
+    });
+  });
+});

package/dist/collection/components/legacy/gux-advanced-dropdown-legacy/gux-advanced-dropdown.css

@@ -1,54 +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.
- */
-/* Helpers */
-/* Base typography */
-/* Headings */
-/* Anchor */
-.gux-icon-anchor gux-icon {
-  padding-right: var(--gse-ui-links-inLine-padding);
-}
-
-/* Custom Styles */
 :host {
   color: #2e394c;
 }
@@ -68,8 +17,8 @@ gux-popup .gux-select-field a.gux-select-input {
   padding: 6px 24px 6px 12px;
   overflow: hidden;
   color: #2e394c;
-  text-overflow: ellipsis;
   text-decoration: none;
+  text-overflow: ellipsis;
   white-space: nowrap;
   cursor: pointer;
   background-color: #f6f7f9;

package/dist/collection/components/legacy/gux-advanced-dropdown-legacy/gux-advanced-dropdown.js

@@ -8,13 +8,13 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
         r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { h } from '@stencil/core';
-import { onMutation } from '@utils/dom/on-mutation';
-import { OnClickOutside } from '@utils/decorator/on-click-outside';
-import { afterNextRenderTimeout } from '@utils/dom/after-next-render';
-import { trackComponent } from '@utils/tracking/usage';
-import { buildI18nForComponent } from '../../../i18n';
-import advancedDropDownResources from './i18n/en.json';
+import { h } from "@stencil/core";
+import { onMutation } from "../../../utils/dom/on-mutation";
+import { OnClickOutside } from "../../../utils/decorator/on-click-outside";
+import { afterNextRenderTimeout } from "../../../utils/dom/after-next-render";
+import { trackComponent } from "../../../utils/tracking/usage";
+import { buildI18nForComponent } from "../../../i18n";
+import advancedDropDownResources from "./i18n/en.json";
 /**
  * @slot - collection of gux-dropdown-option elements
  */
@@ -349,7 +349,8 @@ export class GuxAdvancedDropdownLegacy {
           "parameters": [],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             }
           },
           "return": "Promise<string[]>"
@@ -371,7 +372,8 @@ export class GuxAdvancedDropdownLegacy {
             }],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             }
           },
           "return": "Promise<void>"

package/dist/collection/components/legacy/gux-advanced-dropdown-legacy/tests/gux-advanced-dropdown.e2e.js

@@ -0,0 +1,149 @@
+import { newSparkE2EPage, a11yCheck } from "../../../../test/e2eTestUtils";
+import { asyncFilter } from "../../../../utils/array/async-filter";
+const html = `
+  <div lang="en">
+    <gux-advanced-dropdown-legacy lang="en" filter-debounce-timeout=0>
+      <gux-dropdown-option value="en" text="English"></gux-dropdown-option>
+      <gux-dropdown-option value="nl" text="Dutch"></gux-dropdown-option>
+    </gux-advanced-dropdown-legacy>
+  </div>
+`;
+describe('gux-advanced-dropdown-legacy', () => {
+  it('should render', async () => {
+    const page = await newSparkE2EPage({ html });
+    const element = await page.find('gux-advanced-dropdown-legacy');
+    await a11yCheck(page);
+    expect(element).toHaveAttribute('hydrated');
+  });
+  it('should open the dropdown on click', async () => {
+    const page = await newSparkE2EPage({ html });
+    const element = await page.find('gux-advanced-dropdown-legacy');
+    const dropdownElement = await element.find('pierce/.gux-popup-container');
+    expect(dropdownElement.classList.contains('gux-expanded')).toBe(false);
+    await element.click();
+    await page.waitForChanges();
+    await a11yCheck(page);
+    expect(dropdownElement.classList.contains('gux-expanded')).toBe(true);
+  });
+  it('should select an option and closes the dropdown menu when an option is clicked', async () => {
+    const page = await newSparkE2EPage({ html });
+    const element = await page.find('gux-advanced-dropdown-legacy');
+    const inputSpy = await element.spyOnEvent('input');
+    const dropdownElement = await element.find('pierce/.gux-popup-container');
+    expect(dropdownElement.classList.contains('gux-expanded')).toBe(false);
+    await element.click();
+    await page.waitForChanges();
+    expect(dropdownElement.classList.contains('gux-expanded')).toBe(true);
+    const englishDropdownOption = await element.find('gux-dropdown-option[value="en"]');
+    await englishDropdownOption.click();
+    await page.waitForChanges();
+    expect(inputSpy).toHaveReceivedEventDetail('en');
+    expect(dropdownElement.classList.contains('gux-expanded')).toBe(false);
+  });
+  it('should fire filter event with a delay', async () => {
+    const page = await newSparkE2EPage({ html });
+    const element = await page.find('gux-advanced-dropdown-legacy');
+    const filterSpy = await element.spyOnEvent('filter');
+    const dropdownElement = await element.find('pierce/.gux-popup-container');
+    expect(dropdownElement.classList.contains('gux-expanded')).toBe(false);
+    await element.click();
+    await page.waitForChanges();
+    expect(dropdownElement.classList.contains('gux-expanded')).toBe(true);
+    const input = await element.find('pierce/input');
+    await input.press('KeyE');
+    await input.press('KeyN');
+    await page.waitForChanges();
+    const value = await input.getProperty('value');
+    expect(value).toBe('en');
+    await page.waitForTimeout(1000);
+    expect(filterSpy).toHaveReceivedEventDetail('en');
+    const options = await element.findAll('gux-dropdown-option');
+    const filteredOptions = await asyncFilter(options, async (option) => !(await option.getProperty('filtered')));
+    expect(filteredOptions.length).toBe(1);
+  });
+  it('should not filter if no-filter is true', async () => {
+    const page = await newSparkE2EPage({
+      html: `
+      <gux-advanced-dropdown-legacy lang="en" filter-debounce-timeout="0" no-filter>
+        <gux-dropdown-option value="en" text="English"></gux-dropdown-option>
+        <gux-dropdown-option value="nl" text="Dutch"></gux-dropdown-option>
+      </gux-advanced-dropdown-legacy>
+    `
+    });
+    const element = await page.find('gux-advanced-dropdown-legacy');
+    const filterSpy = await element.spyOnEvent('filter');
+    const dropdownElement = await element.find('pierce/.gux-popup-container');
+    expect(dropdownElement.classList.contains('gux-expanded')).toBe(false);
+    await element.click();
+    await page.waitForChanges();
+    expect(dropdownElement.classList.contains('gux-expanded')).toBe(true);
+    const input = await element.find('pierce/input');
+    await input.press('KeyE');
+    await input.press('KeyN');
+    await page.waitForChanges();
+    const value = await input.getProperty('value');
+    expect(value).toBe('en');
+    await page.waitForTimeout(1000);
+    expect(filterSpy).toHaveReceivedEventDetail('en');
+    const options = await element.findAll('gux-dropdown-option');
+    const filteredOptions = await asyncFilter(options, async (option) => !(await option.getProperty('filtered')));
+    expect(filteredOptions.length).toBe(2);
+  });
+  it('should allow options to be dynamically rendered', async () => {
+    const page = await newSparkE2EPage({ html });
+    const element = await page.find('gux-advanced-dropdown-legacy');
+    await page.evaluate(() => {
+      const guxAdvancedDropdown = document.querySelector('gux-advanced-dropdown-legacy');
+      const guxDropdownOption = document.querySelector('gux-dropdown-option');
+      guxAdvancedDropdown.removeChild(guxDropdownOption);
+      guxAdvancedDropdown.appendChild(guxDropdownOption);
+    });
+    await page.waitForChanges();
+    const options = await element.findAll('gux-dropdown-option');
+    const filteredOptions = await asyncFilter(options, async (option) => !(await option.getProperty('filtered')));
+    expect(filteredOptions.length).toBe(2);
+  });
+  it('should not fire filter event as dropdown is closing', async () => {
+    const page = await newSparkE2EPage({
+      html: `
+      <gux-advanced-dropdown-legacy lang="en">
+        <gux-dropdown-option value="en" text="English"></gux-dropdown-option>
+        <gux-dropdown-option value="nl" text="Dutch"></gux-dropdown-option>
+      </gux-advanced-dropdown-legacy>
+    `
+    });
+    const element = await page.find('gux-advanced-dropdown-legacy');
+    const filterSpy = await element.spyOnEvent('filter');
+    const dropdownElement = await element.find('pierce/.gux-popup-container');
+    expect(dropdownElement.classList.contains('gux-expanded')).toBe(false);
+    await element.click();
+    await page.waitForChanges();
+    expect(dropdownElement.classList.contains('gux-expanded')).toBe(true);
+    const englishDropdownOption = await element.find('gux-dropdown-option[value="en"]');
+    await englishDropdownOption.click();
+    await page.waitForChanges();
+    expect(dropdownElement.classList.contains('gux-expanded')).toBe(false);
+    expect(filterSpy).not.toHaveReceivedEvent();
+  });
+  it('should not select an option or close the dropdown menu when a selected option is clicked', async () => {
+    const page = await newSparkE2EPage({ html });
+    const element = await page.find('gux-advanced-dropdown-legacy');
+    const dropdownElement = await element.find('pierce/.gux-popup-container');
+    const englishDropdownOption = await element.find('gux-dropdown-option[value="en"]');
+    expect(dropdownElement.classList.contains('gux-expanded')).toBe(false);
+    await element.click();
+    await page.waitForChanges();
+    expect(dropdownElement.classList.contains('gux-expanded')).toBe(true);
+    await englishDropdownOption.click();
+    await page.waitForChanges();
+    expect(dropdownElement.classList.contains('gux-expanded')).toBe(false);
+    const inputSpy = await element.spyOnEvent('input');
+    await element.click();
+    await page.waitForChanges();
+    expect(dropdownElement.classList.contains('gux-expanded')).toBe(true);
+    await englishDropdownOption.click();
+    await page.waitForChanges();
+    expect(inputSpy).not.toHaveReceivedEvent();
+    expect(dropdownElement.classList.contains('gux-expanded')).toBe(false);
+  });
+});

package/dist/collection/components/legacy/gux-advanced-dropdown-legacy/tests/gux-advanced-dropdown.spec.js

@@ -0,0 +1,17 @@
+import { newSpecPage } from "../../../../test/specTestUtils";
+import { GuxAdvancedDropdownLegacy } from "../gux-advanced-dropdown";
+describe('gux-advanced-dropdown-legacy', () => {
+  it('should render', async () => {
+    const page = await newSpecPage({
+      components: [GuxAdvancedDropdownLegacy],
+      html: `
+        <gux-advanced-dropdown-legacy>
+          <gux-dropdown-option value="en" text="English"></gux-dropdown-option>
+          <gux-dropdown-option value="nl" text="Dutch"></gux-dropdown-option>
+        </gux-advanced-dropdown-legacy>
+      `,
+      language: 'en'
+    });
+    expect(page.root).toMatchSnapshot();
+  });
+});

package/dist/collection/components/legacy/gux-disclosure-button-legacy/gux-disclosure-button.js

@@ -1,8 +1,8 @@
-import { h } from '@stencil/core';
-import { randomHTMLId } from '../../../utils/dom/random-html-id';
-import { trackComponent } from '@utils/tracking/usage';
-import { buildI18nForComponent } from '../../../i18n';
-import translationResources from './i18n/en.json';
+import { h } from "@stencil/core";
+import { randomHTMLId } from "../../../utils/dom/random-html-";
+import { trackComponent } from "../../../utils/tracking/usage";
+import { buildI18nForComponent } from "../../../i18n";
+import translationResources from "./i18n/en.json";
 /**
  * @slot panel-content - Slot for content of panel
  */
@@ -66,7 +66,8 @@ export class GuxDisclosureButtonLegacy {
           "references": {
             "GuxDisclosureButtonPosition": {
               "location": "import",
-              "path": "./gux-disclosure-button.types"
+              "path": "./gux-disclosure-button.types",
+              "id": "src/components/legacy/gux-disclosure-button-legacy/gux-disclosure-button.types.ts::GuxDisclosureButtonPosition"
             }
           }
         },

package/dist/collection/components/legacy/gux-disclosure-button-legacy/tests/gux-disclosure-button.e2e.js

@@ -0,0 +1,80 @@
+import { newE2EPage } from "@stencil/core/testing";
+import { a11yCheck } from "../../../../test/e2eTestUtils";
+async function newNonrandomE2EPage({ html }) {
+  const page = await newE2EPage();
+  await page.evaluateOnNewDocument(() => {
+    Math.random = () => 0.5;
+  });
+  await page.setContent(html);
+  await page.waitForChanges();
+  await page.addScriptTag({
+    path: '../../node_modules/axe-core/axe.min.js'
+  });
+  await page.waitForChanges();
+  return page;
+}
+describe('gux-disclosure-button-legacy', () => {
+  it('should build', async () => {
+    const page = await newNonrandomE2EPage({
+      html: `<gux-disclosure-button-legacy lang="en"></gux-disclosure-button-legacy>`
+    });
+    const element = await page.find('gux-disclosure-button-legacy');
+    expect(element).toHaveAttribute('hydrated');
+  });
+  describe('#render', () => {
+    [
+      '<gux-disclosure-button-legacy lang="en"></gux-disclosure-button-legacy>',
+      '<gux-disclosure-button-legacy lang="en" is-open></gux-disclosure-button-legacy>',
+      '<gux-disclosure-button-legacy lang="en" position="left"></gux-disclosure-button-legacy>',
+      '<gux-disclosure-button-legacy lang="en" is-open position="left"></gux-disclosure-button-legacy>',
+      '<gux-disclosure-button-legacy lang="en" position="right"></gux-disclosure-button-legacy>',
+      '<gux-disclosure-button-legacy lang="en" is-open position="right"></gux-disclosure-button-legacy>',
+      '<gux-disclosure-button-legacy lang="en" label="More Info"></gux-disclosure-button-legacy>'
+    ].forEach((html, index) => {
+      it(`should render component as expected (${index + 1})`, async () => {
+        const page = await newNonrandomE2EPage({ html });
+        const element = await page.find('gux-disclosure-button-legacy');
+        const elementShadowDom = await element.find('pierce/.gux-disclosure-button-container');
+        expect(element.outerHTML).toMatchSnapshot();
+        expect(elementShadowDom).toMatchSnapshot();
+      });
+    });
+  });
+  describe('events', () => {
+    describe('active', () => {
+      it('should open when clicked', async () => {
+        const page = await newNonrandomE2EPage({
+          html: '<gux-disclosure-button-legacy lang="en"></gux-disclosure-button-legacy>'
+        });
+        const element = await page.find('gux-disclosure-button-legacy');
+        const button = await element.find('pierce/.gux-disclosure-button');
+        const panel = await element.find('pierce/.gux-disclosure-panel');
+        const icon = await element.find('pierce/gux-icon');
+        const onActive = await page.spyOnEvent('active');
+        expect(await element.getProperty('isOpen')).toBe(false);
+        expect(panel).not.toHaveClass('gux-active');
+        expect(icon).toEqualAttribute('icon-name', 'arrow-solid-right');
+        await button.click();
+        await page.waitForChanges();
+        expect(await element.getProperty('isOpen')).toBe(true);
+        expect(panel).toHaveClass('gux-active');
+        expect(icon).toEqualAttribute('icon-name', 'arrow-solid-left');
+        expect(onActive).toHaveReceivedEventDetail(true);
+      });
+    });
+  });
+  describe('A11Y', () => {
+    it('should be accessible when closed', async () => {
+      const page = await newNonrandomE2EPage({
+        html: `<gux-disclosure-button-legacy lang="en"></gux-disclosure-button-legacy>`
+      });
+      await a11yCheck(page);
+    });
+    it('should be accessible when open', async () => {
+      const page = await newNonrandomE2EPage({
+        html: `<gux-disclosure-button-legacy lang="en" is-open></gux-disclosure-button-legacy>`
+      });
+      await a11yCheck(page);
+    });
+  });
+});

package/dist/collection/components/legacy/gux-disclosure-button-legacy/tests/gux-disclosure-button.spec.js

@@ -0,0 +1,82 @@
+import { newSpecPage } from "../../../../test/specTestUtils";
+import { GuxDisclosureButtonLegacy } from "../gux-disclosure-button";
+const components = [GuxDisclosureButtonLegacy];
+const language = 'en';
+describe('gux-disclosure-button', () => {
+  it('should build', async () => {
+    const page = await newSpecPage({
+      components,
+      html: '<gux-disclosure-button-legacy></gux-disclosure-button-legacy>',
+      language
+    });
+    expect(page.rootInstance).toBeInstanceOf(GuxDisclosureButtonLegacy);
+  });
+  describe('#render', () => {
+    [
+      '<gux-disclosure-button-legacy></gux-disclosure-button-legacy>',
+      '<gux-disclosure-button-legacy is-open></gux-disclosure-button-legacy>',
+      '<gux-disclosure-button-legacy position="left"></gux-disclosure-button-legacy>',
+      '<gux-disclosure-button-legacy is-open position="left"></gux-disclosure-button-legacy>',
+      '<gux-disclosure-button-legacy position="right"></gux-disclosure-button-legacy>',
+      '<gux-disclosure-button-legacy is-open position="right"></gux-disclosure-button-legacy>',
+      '<gux-disclosure-button-legacy label="More Info"></gux-disclosure-button-legacy>'
+    ].forEach((html, index) => {
+      it(`should render component as expected (${index + 1})`, async () => {
+        const page = await newSpecPage({ components, html, language });
+        expect(page.root).toMatchSnapshot();
+      });
+    });
+  });
+  describe('events', () => {
+    describe('active', () => {
+      it('should open when clicked', async () => {
+        const page = await newSpecPage({
+          components,
+          html: '<gux-disclosure-button-legacy></gux-disclosure-button-legacy>',
+          language
+        });
+        const element = page.root;
+        const button = element.shadowRoot.querySelector('.gux-disclosure-button');
+        const panel = element.shadowRoot.querySelector('.gux-disclosure-panel');
+        const icon = element.shadowRoot.querySelector('gux-icon');
+        const activeEventSpy = jest.fn();
+        element.addEventListener('active', activeEventSpy);
+        expect(element.isOpen).toBe(false);
+        expect(panel).not.toHaveClass('gux-active');
+        expect(icon).toEqualAttribute('icon-name', 'arrow-solid-right');
+        button.click();
+        await page.waitForChanges();
+        expect(element.isOpen).toBe(true);
+        expect(panel).toHaveClass('gux-active');
+        expect(icon).toEqualAttribute('icon-name', 'arrow-solid-left');
+        expect(activeEventSpy).toHaveBeenCalledWith(expect.objectContaining({
+          detail: true
+        }));
+      });
+      it('should close when clicked', async () => {
+        const page = await newSpecPage({
+          components,
+          html: '<gux-disclosure-button-legacy is-open></gux-disclosure-button-legacy>',
+          language
+        });
+        const element = page.root;
+        const button = element.shadowRoot.querySelector('.gux-disclosure-button');
+        const panel = element.shadowRoot.querySelector('.gux-disclosure-panel');
+        const icon = element.shadowRoot.querySelector('gux-icon');
+        const activeEventSpy = jest.fn();
+        element.addEventListener('active', activeEventSpy);
+        expect(element.isOpen).toBe(true);
+        expect(panel).toHaveClass('gux-active');
+        expect(icon).toEqualAttribute('icon-name', 'arrow-solid-left');
+        button.click();
+        await page.waitForChanges();
+        expect(element.isOpen).toBe(false);
+        expect(panel).not.toHaveClass('gux-active');
+        expect(icon).toEqualAttribute('icon-name', 'arrow-solid-right');
+        expect(activeEventSpy).toHaveBeenCalledWith(expect.objectContaining({
+          detail: false
+        }));
+      });
+    });
+  });
+});

package/dist/collection/components/legacy/gux-notification-toast-legacy/gux-notification-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 {
   position: relative;
@@ -112,7 +69,7 @@
 }
 .gux-content .gux-title {
   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-sm);
+  font-weight: var(--gse-core-fontWeight-semiBold);
   line-height: var(--gse-core-lineHeight-sm);
 }