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

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');
+    });
+  });
+});

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

@@ -0,0 +1,200 @@
+import { newSpecPage } from "../../../../test/specTestUtils";
+import { GuxButton } from "../../gux-button/gux-button";
+import { GuxModal } from "../gux-modal";
+import { GuxDismissButton } from "../../../stable/gux-dismiss-button/gux-dismiss-button";
+const components = [GuxButton, GuxModal, GuxDismissButton];
+const language = 'en';
+describe('gux-modal', () => {
+  describe('#render', () => {
+    [
+      {
+        description: 'should render small modal',
+        html: `
+          <gux-modal 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 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 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 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 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 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 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 modal with a specified initial focus element',
+        html: `
+          <gux-modal initial-focus="#cancelButton">
+            <div slot="title">Modal Title</div>
+            <div slot="content">This contains the modal content.</div>
+            <div slot="left-align-buttons">
+                <gux-button id="cancelButton">Cancel</gux-button>
+            </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>
+            <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 newSpecPage({ components, html, language });
+        expect(page.rootInstance).toBeInstanceOf(GuxModal);
+        expect(page.root).toMatchSnapshot();
+        page.rootInstance.hidden = true;
+        await page.waitForChanges();
+        expect(page.root).toMatchSnapshot();
+        // Disconnect so that the focus trap is properly cleaned up
+        page.root.remove();
+      });
+    });
+  });
+  describe('dismiss', () => {
+    it('click dismiss button', async () => {
+      const html = `
+        <gux-modal 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 newSpecPage({ components, html, language });
+      const element = page.root;
+      const dismissButton = page.root.shadowRoot.querySelector('gux-dismiss-button');
+      const guxdismissSpy = jest.fn();
+      const clickSpy = jest.fn();
+      const elementRemoveSpy = jest.spyOn(element, 'remove');
+      page.win.addEventListener('guxdismiss', guxdismissSpy);
+      page.win.addEventListener('click', clickSpy);
+      dismissButton.click();
+      await page.waitForChanges();
+      expect(guxdismissSpy).toHaveBeenCalled();
+      expect(clickSpy).not.toHaveBeenCalled();
+      expect(elementRemoveSpy).toBeCalledWith();
+      page.root.remove();
+    });
+    it('click dismiss button and prevent default', async () => {
+      const html = `
+        <gux-modal 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 newSpecPage({ components, html, language });
+      const element = page.root;
+      const dismissButton = page.root.shadowRoot.querySelector('gux-dismiss-button');
+      const elementRemoveSpy = jest.spyOn(element, 'remove');
+      page.win.addEventListener('guxdismiss', (event) => {
+        event.preventDefault();
+      });
+      dismissButton.click();
+      await page.waitForChanges();
+      expect(elementRemoveSpy).not.toBeCalled();
+      page.root.remove();
+    });
+  });
+});

package/dist/collection/components/stable/gux-page-loading-spinner/gux-page-loading-spinner.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";
 export class GuxPageLoadingSpinner {
   constructor() {
     this.screenreaderText = undefined;

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

@@ -0,0 +1,33 @@
+import { newSparkE2EPage, a11yCheck } from "../../../../test/e2eTestUtils";
+describe('gux-page-loading-spinner', () => {
+  it('renders', async () => {
+    const html = '<gux-page-loading-spinner lang="en"></gux-page-loading-spinner>';
+    const page = await newSparkE2EPage({ html });
+    const element = await page.find('gux-page-loading-spinner');
+    expect(element.outerHTML).toMatchSnapshot();
+  });
+  it('should add an aria-label with the provided screenreader-text to the progressbar', async () => {
+    const html = '<gux-page-loading-spinner lang="en" screenreader-text="Loading Content"></gux-page-loading-spinner>';
+    const page = await newSparkE2EPage({ html });
+    const progressBarAriaLabelValue = await page.evaluate(() => {
+      const element = document.querySelector('gux-page-loading-spinner');
+      const radialLoadingElement = element.shadowRoot.querySelector('gux-radial-loading');
+      const progressBarElement = radialLoadingElement.shadowRoot.querySelector('div[role="progressbar"]');
+      return progressBarElement.getAttribute('aria-label');
+    });
+    await a11yCheck(page);
+    expect(progressBarAriaLabelValue).toEqual('Loading Content');
+  });
+  it('should add the default aria-label text if no screenreader-text is provided', async () => {
+    const html = '<gux-page-loading-spinner lang="en"></gux-page-loading-spinner>';
+    const page = await newSparkE2EPage({ html });
+    const progressBarAriaLabelValue = await page.evaluate(() => {
+      const element = document.querySelector('gux-page-loading-spinner');
+      const radialLoadingElement = element.shadowRoot.querySelector('gux-radial-loading');
+      const progressBarElement = radialLoadingElement.shadowRoot.querySelector('div[role="progressbar"]');
+      return progressBarElement.getAttribute('aria-label');
+    });
+    await a11yCheck(page);
+    expect(progressBarAriaLabelValue).toEqual('Loading');
+  });
+});

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

@@ -0,0 +1,12 @@
+import { newSpecPage } from "../../../../test/specTestUtils";
+import { GuxPageLoadingSpinner } from "../gux-page-loading-spinner";
+describe('gux-page-loading-spinner', () => {
+  it('should render as expected', async () => {
+    const page = await newSpecPage({
+      components: [GuxPageLoadingSpinner],
+      html: `<gux-page-loading-spinner></gux-page-loading-spinner>`,
+      language: 'en'
+    });
+    expect(page.root).toMatchSnapshot();
+  });
+});

package/dist/collection/components/stable/gux-pagination/gux-pagination-buttons/gux-pagination-buttons.css

@@ -2,9 +2,9 @@ gux-pagination-buttons .gux-pagination-buttons-container {
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
+  gap: var(--gse-ui-dataTableItems-tablePagination-recordsetControls-gap);
   align-content: stretch;
   align-items: center;
-  gap: var(--gse-ui-dataTableItems-tablePagination-recordsetControls-gap);
   justify-content: flex-end;
   margin-left: var(--gse-ui-dataTableItems-tablePagination-recordsetControls-gap);
 }
@@ -24,8 +24,8 @@ gux-pagination-buttons .gux-pagination-buttons-container .gux-pagination-buttons
   flex-direction: row;
   flex-shrink: 0;
   flex-wrap: nowrap;
-  align-content: stretch;
   gap: var(--gse-ui-dataTableItems-tablePagination-recordsetControls-gap);
+  align-content: stretch;
   align-items: center;
   justify-content: center;
 }
@@ -33,22 +33,22 @@ gux-pagination-buttons .gux-pagination-buttons-container .gux-pagination-buttons
 gux-pagination-buttons .gux-pagination-buttons-container .gux-pagination-buttons-list-container .gux-pagination-buttons-list-target {
   min-width: 28px;
   min-height: 24px;
-  padding-left: var(--gse-ui-dataTableItems-tablePagination-padding);
   padding-right: var(--gse-ui-dataTableItems-tablePagination-padding);
+  padding-left: var(--gse-ui-dataTableItems-tablePagination-padding);
   margin: 0;
-  background: inherit;
-  border: none;
   font-family: var(--gse-ui-dataTableItems-tablePagination-defaultText-fontFamily);
-  color: var(--gse-ui-dataTableItems-tablePagination-foregroundColor);
   font-size: var(--gse-ui-dataTableItems-tablePagination-defaultText-fontSize);
-  line-height: var(--gse-ui-dataTableItems-tablePagination-defaultText-lineHeight);
   font-weight: var(--gse-ui-dataTableItems-tablePagination-currentResultText-fontWeight);
+  line-height: var(--gse-ui-dataTableItems-tablePagination-defaultText-lineHeight);
+  color: var(--gse-ui-dataTableItems-tablePagination-foregroundColor);
+  background: inherit;
+  border: none;
 }
 gux-pagination-buttons .gux-pagination-buttons-container .gux-pagination-buttons-list-container .gux-pagination-buttons-list-current:focus-visible,
 gux-pagination-buttons .gux-pagination-buttons-container .gux-pagination-buttons-list-container .gux-pagination-buttons-list-target:focus-visible {
+  border-radius: calc(var(--gse-semantic-focusRing-cornerRadius) - var(--gse-semantic-focusRing-offset));
   outline: var(--gse-semantic-focusRing-width) solid 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-pagination-buttons .gux-pagination-buttons-container .gux-pagination-buttons-list-container .gux-pagination-buttons-list-current {
   background-color: var(--gse-ui-button-ghost-active-backgroundColor);

package/dist/collection/components/stable/gux-pagination/gux-pagination-buttons/gux-pagination-buttons.js

@@ -1,8 +1,8 @@
-import { h } from '@stencil/core';
-import { buildI18nForComponent } from '../../../../i18n';
-import paginationResources from './i18n/en.json';
-import { GuxPaginationButtonsService } from './gux-pagination-button.service';
-import { afterNextRender } from '@utils/dom/after-next-render';
+import { h } from "@stencil/core";
+import { buildI18nForComponent } from "../../../../i18n";
+import paginationResources from "./i18n/en.json";
+import { GuxPaginationButtonsService } from "./gux-pagination-button.service";
+import { afterNextRender } from "../../../../utils/dom/after-next-render";
 export class GuxPaginationButtons {
   constructor() {
     this.currentPage = undefined;
@@ -113,7 +113,8 @@ export class GuxPaginationButtons {
           "references": {
             "GuxPaginationLayout": {
               "location": "import",
-              "path": "../gux-pagination.types"
+              "path": "../gux-pagination.types",
+              "id": "src/components/stable/gux-pagination/gux-pagination.types.ts::GuxPaginationLayout"
             }
           }
         },

package/dist/collection/components/stable/gux-pagination/gux-pagination-buttons/gux-pagination-ellipsis-button/gux-pagination-ellipsis-button.css

@@ -8,9 +8,9 @@ button:hover {
   color: var(--gse-ui-button-ghost-hover-foregroundColor);
 }
 button:focus-visible {
+  border-radius: calc(var(--gse-semantic-focusRing-cornerRadius) - var(--gse-semantic-focusRing-offset));
   outline: var(--gse-semantic-focusRing-width) solid 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));
 }
 button gux-icon {
   width: var(--gse-ui-icon-size-sm);

package/dist/collection/components/stable/gux-pagination/gux-pagination-buttons/gux-pagination-ellipsis-button/gux-pagination-ellipsis-button.js

@@ -8,12 +8,12 @@ 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, Host } from '@stencil/core';
-import { trackComponent } from '@utils/tracking/usage';
-import translationResources from '../i18n/en.json';
-import { buildI18nForComponent } from 'i18n';
-import { OnClickOutside } from '@utils/decorator/on-click-outside';
-import { afterNextRender } from '@utils/dom/after-next-render';
+import { h, Host } from "@stencil/core";
+import { trackComponent } from "../../../../../utils/tracking/usage";
+import translationResources from "../i18n/en.json";
+import { buildI18nForComponent } from "../../../../../i18n/index";
+import { OnClickOutside } from "../../../../../utils/decorator/on-click-outside";
+import { afterNextRender } from "../../../../../utils/dom/after-next-render";
 export class GuxPaginationEllipsisButton {
   constructor() {
     this.isOpen = false;