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

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

@@ -0,0 +1,54 @@
+import { newSpecPage } from "../../../../test/specTestUtils";
+import * as floatingUi from "@floating-ui/dom";
+import MutationObserver from "mutation-observer";
+import { GuxPopover } from "../gux-popover";
+const components = [GuxPopover];
+const language = 'en';
+const html = `
+  <div>
+    <div id="popover-target">
+      Example Element
+    </div>
+    <gux-popover id="popover-example" position="top" for="popover-target" is-open>
+      <span slot="title">Title</span>
+      <div>popover content</div>
+    </gux-popover>
+  </div>`;
+describe('gux-popover', () => {
+  beforeEach(async () => {
+    global.MutationObserver = MutationObserver;
+  });
+  afterEach(async () => {
+    jest.spyOn(floatingUi, 'autoUpdate').mockRestore();
+  });
+  describe('#render', () => {
+    it('should render popover', async () => {
+      jest.spyOn(floatingUi, 'autoUpdate').mockReturnValue(jest.fn());
+      const page = await newSpecPage({ components, html, language });
+      expect(page.rootInstance).toBeInstanceOf(GuxPopover);
+      expect(page.root).toMatchSnapshot();
+    });
+  });
+  describe('#interaction', () => {
+    it('should open and close', async () => {
+      const cleanupSpy = jest.fn();
+      const autoUpdateSpy = jest
+        .spyOn(floatingUi, 'autoUpdate')
+        .mockReturnValue(cleanupSpy);
+      const page = await newSpecPage({ components, html, language });
+      const element = page.root;
+      const elementWrapper = element.shadowRoot.querySelector('.gux-popover-wrapper');
+      expect(elementWrapper).not.toHaveClass('gux-hidden');
+      expect(autoUpdateSpy).toBeCalledTimes(1);
+      expect(cleanupSpy).not.toBeCalled();
+      element.isOpen = false;
+      await page.waitForChanges();
+      expect(elementWrapper).toHaveClass('gux-hidden');
+      expect(cleanupSpy).toBeCalledTimes(1);
+      element.isOpen = true;
+      await page.waitForChanges();
+      expect(autoUpdateSpy).toBeCalledTimes(2);
+      expect(cleanupSpy).toBeCalledTimes(1);
+    });
+  });
+});

package/dist/collection/components/stable/gux-popover-list/gux-popover-list.css

@@ -4,7 +4,7 @@
   left: 0;
   z-index: var(--gux-zindex-popover, 2);
   display: inline-block;
-  padding: 8px 0px;
+  padding: 8px 0;
   background-color: var(--gse-ui-popover-backgroundColor);
   border-radius: var(--gse-ui-popover-borderRadius);
   box-shadow: var(--gse-ui-popover-boxShadow-x) var(--gse-ui-popover-boxShadow-y) var(--gse-ui-popover-boxShadow-blur) var(--gse-ui-popover-boxShadow-spread) var(--gse-ui-tooltip-boxShadow-color);

package/dist/collection/components/stable/gux-popover-list/gux-popover-list.js

@@ -8,11 +8,11 @@ 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 { autoUpdate, computePosition, arrow, flip, offset, shift } from '@floating-ui/dom';
-import { OnClickOutside } from '../../../utils/decorator/on-click-outside';
-import { trackComponent } from '@utils/tracking/usage';
-import { findElementById } from '@utils/dom/find-element-by-id';
+import { h } from "@stencil/core";
+import { autoUpdate, computePosition, arrow, flip, offset, shift } from "@floating-ui/dom";
+import { OnClickOutside } from "../../../utils/decorator/on-click-outside";
+import { trackComponent } from "../../../utils/tracking/usage";
+import { findElementById } from "../../../utils/dom/find-element-by-";
 /**
  * @slot - popover content
  */
@@ -163,7 +163,8 @@ export class GuxPopoverList {
           "references": {
             "Placement": {
               "location": "import",
-              "path": "@floating-ui/dom"
+              "path": "@floating-ui/dom",
+              "id": ""
             }
           }
         },

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

@@ -0,0 +1,59 @@
+import { newSparkE2EPage, a11yCheck } from "../../../../test/e2eTestUtils";
+describe('gux-popover-list', () => {
+  it('renders', async () => {
+    const page = await newSparkE2EPage({
+      html: `
+      <div lang="en">
+        <div id="popover-target">
+          Example Element
+        </div>
+        <gux-popover-list position="top" for="popover-target" is-open>
+          <div>popover content</div>
+        </gux-popover-list>
+      </div>
+      `
+    });
+    const element = await page.find('gux-popover-list');
+    await a11yCheck(page);
+    expect(element).toHaveAttribute('hydrated');
+  });
+  it('should trigger guxdismiss event on popover dismiss button click', async () => {
+    const page = await newSparkE2EPage({
+      html: `
+      <div lang="en">
+        <div id="popover-target">
+          Example Element
+        </div>
+        <gux-popover-list position="top" for="popover-target" display-dismiss-button is-open>
+          <div>popover content</div>
+        </gux-popover-list>
+      </div>
+      `
+    });
+    const component = await page.find('gux-popover-list');
+    const guxdismiss = await component.spyOnEvent('guxdismiss');
+    const button = await page.find('pierce/gux-dismiss-button');
+    await button.click();
+    expect(guxdismiss).toHaveReceivedEvent();
+  });
+  it('Supports hiding the close button', async () => {
+    const page = await newSparkE2EPage({
+      html: `
+      <div lang="en">
+        <div id="popover-target">
+          Example Element
+        </div>
+        <gux-popover-list position="top" for="popover-target">
+          <div>popover content</div>
+        </gux-popover-list>
+      </div>
+      `
+    });
+    const component = await page.find('gux-popover-list');
+    component.setProperty('displayDismissDutton', false);
+    await page.waitForChanges();
+    const button = await page.find('pierce/gux-dismiss-button');
+    await a11yCheck(page);
+    expect(button).toBeNull();
+  });
+});

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

@@ -0,0 +1,53 @@
+import { newSpecPage } from "../../../../test/specTestUtils";
+import * as floatingUi from "@floating-ui/dom";
+import MutationObserver from "mutation-observer";
+import { GuxPopoverList } from "../gux-popover-list";
+const components = [GuxPopoverList];
+const language = 'en';
+const html = `
+  <div>
+    <div id="popover-target">
+      Example Element
+    </div>
+    <gux-popover-list id="popover-example" position="top" for="popover-target" is-open>
+      <div>popover content</div>
+    </gux-popover-list>
+  </div>`;
+describe('gux-popover-list', () => {
+  beforeEach(async () => {
+    global.MutationObserver = MutationObserver;
+  });
+  afterEach(async () => {
+    jest.spyOn(floatingUi, 'autoUpdate').mockRestore();
+  });
+  describe('#render', () => {
+    it('should render popover', async () => {
+      jest.spyOn(floatingUi, 'autoUpdate').mockReturnValue(jest.fn());
+      const page = await newSpecPage({ components, html, language });
+      expect(page.rootInstance).toBeInstanceOf(GuxPopoverList);
+      expect(page.root).toMatchSnapshot();
+    });
+  });
+  describe('#interaction', () => {
+    it('should open and close', async () => {
+      const cleanupSpy = jest.fn();
+      const autoUpdateSpy = jest
+        .spyOn(floatingUi, 'autoUpdate')
+        .mockReturnValue(cleanupSpy);
+      const page = await newSpecPage({ components, html, language });
+      const element = page.root;
+      const elementWrapper = element.shadowRoot.querySelector('.gux-popover-wrapper');
+      expect(elementWrapper).not.toHaveClass('gux-hidden');
+      expect(autoUpdateSpy).toBeCalledTimes(1);
+      expect(cleanupSpy).not.toBeCalled();
+      element.isOpen = false;
+      await page.waitForChanges();
+      expect(elementWrapper).toHaveClass('gux-hidden');
+      expect(cleanupSpy).toBeCalledTimes(1);
+      element.isOpen = true;
+      await page.waitForChanges();
+      expect(autoUpdateSpy).toBeCalledTimes(2);
+      expect(cleanupSpy).toBeCalledTimes(1);
+    });
+  });
+});

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

@@ -6,10 +6,10 @@
 
 .gux-popup-container {
   position: fixed;
-  background-color: white;
   z-index: var(--gux-zindex-popup, 1);
   width: max-content;
   visibility: hidden;
+  background-color: white;
 }
 .gux-popup-container.gux-expanded {
   visibility: visible;

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

@@ -1,5 +1,5 @@
-import { h } from '@stencil/core';
-import { autoUpdate, computePosition, flip, offset, size, shift, hide } from '@floating-ui/dom';
+import { h } from "@stencil/core";
+import { autoUpdate, computePosition, flip, offset, size, shift, hide } from "@floating-ui/dom";
 /**
  * @slot target - Required slot for target
  * @slot popup - Required slot for popup

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

@@ -0,0 +1,29 @@
+import { newSparkE2EPage, a11yCheck } from "../../../../test/e2eTestUtils";
+function getGuxPopupHtml(expanded, disabled) {
+  return `
+  <gux-popup ${expanded ? 'expanded' : ''} ${disabled ? 'disabled' : ''}>
+    <gux-button slot="target">Target</gux-button>
+    <gux-list slot="popup">
+      <gux-list-item>Item 1</gux-list-item>
+      <gux-list-item>Item 2</gux-list-item>
+      <gux-list-item>Item 3</gux-list-item>
+    </gux-list>
+  </gux-popup>
+`;
+}
+describe('gux-popup', () => {
+  [
+    { expanded: false, disabled: false },
+    { expanded: true, disabled: false },
+    { expanded: false, disabled: true },
+    { expanded: true, disabled: true }
+  ].forEach(({ expanded, disabled }, index) => {
+    it(`should display component as expected (${index + 1})`, async () => {
+      const html = getGuxPopupHtml(expanded, disabled);
+      const page = await newSparkE2EPage({ html });
+      const element = await page.find('gux-popup');
+      await a11yCheck(page);
+      expect(element.outerHTML).toMatchSnapshot();
+    });
+  });
+});

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

@@ -0,0 +1,41 @@
+import { newSpecPage } from "../../../../test/specTestUtils";
+import * as floatingUi from "@floating-ui/dom";
+import { GuxPopup } from "../gux-popup";
+import MutationObserver from "mutation-observer";
+const components = [GuxPopup];
+const language = 'en';
+function getGuxPopupHtml(expanded, disabled) {
+  return `
+  <gux-popup ${expanded ? 'expanded' : ''} ${disabled ? 'disabled' : ''}>
+    <gux-button slot="target">Target</gux-button>
+    <gux-list slot="popup">
+      <gux-list-item>Item 1</gux-list-item>
+      <gux-list-item>Item 2</gux-list-item>
+      <gux-list-item>Item 3</gux-list-item>
+    </gux-list>
+  </gux-popup>
+`;
+}
+describe('gux-popup', () => {
+  beforeEach(async () => {
+    global.MutationObserver = MutationObserver;
+  });
+  afterEach(async () => {
+    jest.spyOn(floatingUi, 'autoUpdate').mockRestore();
+  });
+  describe('#render', () => {
+    [
+      { expanded: false, disabled: false },
+      { expanded: true, disabled: false },
+      { expanded: false, disabled: true },
+      { expanded: true, disabled: true }
+    ].forEach(({ expanded, disabled }, index) => {
+      it(`should render component as expected (${index + 1})`, async () => {
+        jest.spyOn(floatingUi, 'autoUpdate').mockReturnValue(jest.fn());
+        const html = getGuxPopupHtml(expanded, disabled);
+        const page = await newSpecPage({ components, html, language });
+        expect(page.root).toMatchSnapshot();
+      });
+    });
+  });
+});

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

@@ -18,134 +18,134 @@
 */
 @keyframes largeSpin {
   0% {
-    transform: rotate(0deg);
     stroke-dasharray: 1 68.115038379;
+    transform: rotate(0deg);
   }
   7.5% {
-    transform: rotate(0deg);
     stroke-dasharray: 1 68.115038379;
+    transform: rotate(0deg);
   }
   20% {
-    transform: rotate(90deg);
     stroke-dasharray: 1 68.115038379;
+    transform: rotate(90deg);
   }
   30% {
-    transform: rotate(180deg);
     stroke-dasharray: 34.5575191895;
+    transform: rotate(180deg);
   }
   40% {
     stroke-dasharray: 34.5575191895;
   }
   50% {
-    transform: rotate(450deg);
     stroke-dasharray: 1 68.115038379;
+    transform: rotate(450deg);
   }
   57.5% {
-    transform: rotate(450deg);
     stroke-dasharray: 1 68.115038379;
+    transform: rotate(450deg);
   }
   70% {
-    transform: rotate(540deg);
     stroke-dasharray: 34.5575191895;
+    transform: rotate(540deg);
   }
   80% {
-    transform: rotate(630deg);
     stroke-dasharray: 34.5575191895;
+    transform: rotate(630deg);
   }
   90% {
     stroke-dasharray: 34.5575191895;
   }
   100% {
-    transform: rotate(900deg);
     stroke-dasharray: 1 68.115038379;
+    transform: rotate(900deg);
   }
 }
 @keyframes smallSpin {
   0% {
-    transform: rotate(0deg);
     stroke-dasharray: 1 20.9911485751;
+    transform: rotate(0deg);
   }
   7.5% {
-    transform: rotate(0deg);
     stroke-dasharray: 1 20.9911485751;
+    transform: rotate(0deg);
   }
   20% {
-    transform: rotate(90deg);
     stroke-dasharray: 1 20.9911485751;
+    transform: rotate(90deg);
   }
   30% {
-    transform: rotate(180deg);
     stroke-dasharray: 10.9955742876;
+    transform: rotate(180deg);
   }
   40% {
     stroke-dasharray: 10.9955742876;
   }
   50% {
-    transform: rotate(450deg);
     stroke-dasharray: 1 20.9911485751;
+    transform: rotate(450deg);
   }
   57.5% {
-    transform: rotate(450deg);
     stroke-dasharray: 1 20.9911485751;
+    transform: rotate(450deg);
   }
   70% {
-    transform: rotate(540deg);
     stroke-dasharray: 10.9955742876;
+    transform: rotate(540deg);
   }
   80% {
-    transform: rotate(630deg);
     stroke-dasharray: 10.9955742876;
+    transform: rotate(630deg);
   }
   90% {
     stroke-dasharray: 10.9955742876;
   }
   100% {
-    transform: rotate(900deg);
     stroke-dasharray: 1 20.9911485751;
+    transform: rotate(900deg);
   }
 }
 @keyframes largeThinSpin {
   0% {
-    transform: rotate(0deg);
     stroke-dasharray: 1 72.8274273594;
+    transform: rotate(0deg);
   }
   7.5% {
-    transform: rotate(0deg);
     stroke-dasharray: 1 72.8274273594;
+    transform: rotate(0deg);
   }
   20% {
-    transform: rotate(90deg);
     stroke-dasharray: 1 72.8274273594;
+    transform: rotate(90deg);
   }
   30% {
-    transform: rotate(180deg);
     stroke-dasharray: 36.9137136797;
+    transform: rotate(180deg);
   }
   40% {
     stroke-dasharray: 36.9137136797;
   }
   50% {
-    transform: rotate(450deg);
     stroke-dasharray: 1 72.8274273594;
+    transform: rotate(450deg);
   }
   57.5% {
-    transform: rotate(450deg);
     stroke-dasharray: 1 72.8274273594;
+    transform: rotate(450deg);
   }
   70% {
-    transform: rotate(540deg);
     stroke-dasharray: 36.9137136797;
+    transform: rotate(540deg);
   }
   80% {
-    transform: rotate(630deg);
     stroke-dasharray: 36.9137136797;
+    transform: rotate(630deg);
   }
   90% {
     stroke-dasharray: 36.9137136797;
   }
   100% {
-    transform: rotate(900deg);
     stroke-dasharray: 1 72.8274273594;
+    transform: rotate(900deg);
   }
 }
 :host {
@@ -154,8 +154,8 @@
 
 div[role=progressbar] .gux-svg-container {
   display: block;
-  height: var(--gse-ui-progressAndLoading-spinner-large);
   width: var(--gse-ui-progressAndLoading-spinner-large);
+  height: var(--gse-ui-progressAndLoading-spinner-large);
 }
 div[role=progressbar] .gux-svg-container .gux-dynamic-circle,
 div[role=progressbar] .gux-svg-container .gux-dynamic-circle-mask {
@@ -165,8 +165,8 @@ div[role=progressbar] .gux-svg-container .gux-dynamic-circle-mask {
   transform-origin: 50% 50%;
   animation-name: largeSpin;
   animation-duration: 2s;
-  animation-iteration-count: infinite, infinite;
   animation-timing-function: linear;
+  animation-iteration-count: infinite, infinite;
 }
 div[role=progressbar] .gux-svg-container .gux-dynamic-circle-mask {
   display: none;
@@ -185,8 +185,8 @@ div[role=progressbar].gux-full-page .gux-svg-container .gux-static-circle {
   display: none;
 }
 div[role=progressbar].gux-input .gux-svg-container {
-  height: var(--gse-ui-progressAndLoading-spinner-small);
   width: var(--gse-ui-progressAndLoading-spinner-small);
+  height: var(--gse-ui-progressAndLoading-spinner-small);
 }
 div[role=progressbar].gux-input .gux-svg-container .gux-dynamic-circle {
   fill: none;
@@ -195,8 +195,8 @@ div[role=progressbar].gux-input .gux-svg-container .gux-dynamic-circle {
   transform-origin: 50% 50%;
   animation-name: smallSpin;
   animation-duration: 2s;
-  animation-iteration-count: infinite, infinite;
   animation-timing-function: linear;
+  animation-iteration-count: infinite, infinite;
 }
 div[role=progressbar].gux-input .gux-svg-container .gux-static-circle {
   stroke: var(--gse-ui-progressAndLoading-spinner-base);

package/dist/collection/components/stable/gux-radial-loading/gux-radial-loading.functional.js

@@ -1,5 +1,5 @@
-import { h } from '@stencil/core';
-import { largeSpinner, largeBorder, smallSpinner, smallBorder } from './gux-radial-loading.service';
+import { h } from "@stencil/core";
+import { largeSpinner, largeBorder, smallSpinner, smallBorder } from "./gux-radial-loading.service";
 export const GuxSpinnerState = ({ context = 'modal', screenreaderText }) => {
   let size = largeSpinner;
   let radius = largeSpinner * 0.5 - largeBorder * 0.5;

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

@@ -1,8 +1,8 @@
-import { h } from '@stencil/core';
-import { buildI18nForComponent } from '../../../i18n';
-import { trackComponent } from '@utils/tracking/usage';
-import { GuxSpinnerState } from './gux-radial-loading.functional';
-import modalComponentResources from './i18n/en.json';
+import { h } from "@stencil/core";
+import { buildI18nForComponent } from "../../../i18n";
+import { trackComponent } from "../../../utils/tracking/usage";
+import { GuxSpinnerState } from "./gux-radial-loading.functional";
+import modalComponentResources from "./i18n/en.json";
 export class GuxRadialLoading {
   constructor() {
     this.context = 'modal';
@@ -38,7 +38,8 @@ export class GuxRadialLoading {
           "references": {
             "GuxRadialLoadingContext": {
               "location": "import",
-              "path": "./gux-radial-loading.types"
+              "path": "./gux-radial-loading.types",
+              "id": "src/components/stable/gux-radial-loading/gux-radial-loading.types.ts::GuxRadialLoadingContext"
             }
           }
         },

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

@@ -0,0 +1,33 @@
+import { newSparkE2EPage, a11yCheck } from "../../../../test/e2eTestUtils";
+function getInternalProgressBar(radialLoadingElement) {
+  return radialLoadingElement.shadowRoot.querySelector('div[role="progressbar"]');
+}
+describe('gux-radial-loading', () => {
+  [
+    '<gux-radial-loading lang="en"></gux-radial-loading>',
+    '<gux-radial-loading lang="en" context="modal"></gux-radial-loading>',
+    '<gux-radial-loading lang="en" context="input"></gux-radial-loading>',
+    '<gux-radial-loading lang="en" context="full-page"></gux-radial-loading>'
+  ].forEach((html, index) => {
+    it(`should display component as expected (${index + 1})`, async () => {
+      const page = await newSparkE2EPage({ html });
+      const element = await page.find('gux-radial-loading');
+      await a11yCheck(page);
+      expect(element.innerHTML).toMatchSnapshot();
+    });
+  });
+  it('should add an aria-label with the provided screenreader-text to the progressbar', async () => {
+    const html = '<gux-radial-loading lang="en" screenreader-text="Loading Content"></gux-radial-loading>';
+    const page = await newSparkE2EPage({ html });
+    const element = await page.find('gux-radial-loading');
+    await a11yCheck(page);
+    expect(getInternalProgressBar(element).getAttribute('aria-label')).toEqual('Loading Content');
+  });
+  it('should add the default aria-label text if no screenreader-text is provided', async () => {
+    const html = '<gux-radial-loading lang="en"></gux-radial-loading>';
+    const page = await newSparkE2EPage({ html });
+    const element = await page.find('gux-radial-loading');
+    await a11yCheck(page);
+    expect(getInternalProgressBar(element).getAttribute('aria-label')).toEqual('Loading');
+  });
+});

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

@@ -0,0 +1,33 @@
+import { newSpecPage } from "../../../../test/specTestUtils";
+import { GuxRadialLoading } from "../gux-radial-loading";
+describe('gux-radial-loading', () => {
+  let component;
+  beforeEach(async () => {
+    const page = await newSpecPage({
+      components: [GuxRadialLoading],
+      html: `<gux-radial-loading></gux-radial-loading>`,
+      language: 'en'
+    });
+    component = page.rootInstance;
+  });
+  it('should build', async () => {
+    expect(component).toBeInstanceOf(GuxRadialLoading);
+  });
+  describe('#render', () => {
+    [
+      '<gux-radial-loading screenreader-text="Loading"></gux-radial-loading>',
+      '<gux-radial-loading context="modal" screenreader-text="Loading"></gux-radial-loading>',
+      '<gux-radial-loading context="full-page" screenreader-text="Loading"></gux-radial-loading>',
+      '<gux-radial-loading context="input" screenreader-text="Loading"></gux-radial-loading>'
+    ].forEach((input, index) => {
+      it(`should render component as expected (${index + 1})`, async () => {
+        const page = await newSpecPage({
+          components: [GuxRadialLoading],
+          html: input,
+          language: 'en'
+        });
+        expect(page.root).toMatchSnapshot();
+      });
+    });
+  });
+});

package/dist/collection/components/stable/gux-radial-progress/gux-radial-progress.css

@@ -18,8 +18,8 @@
 
 div[role=progressbar] .gux-svg-container {
   display: block;
-  height: var(--gse-ui-progressAndLoading-spinner-large);
   width: var(--gse-ui-progressAndLoading-spinner-large);
+  height: var(--gse-ui-progressAndLoading-spinner-large);
 }
 div[role=progressbar] .gux-svg-container .gux-dynamic-circle {
   fill: none;
@@ -35,9 +35,9 @@ div[role=progressbar] .gux-svg-container .gux-static-circle {
 }
 div[role=progressbar] .gux-svg-container .gux-percentage {
   font-family: var(--gse-ui-progressAndLoading-spinner-text-fontFamily);
+  font-size: var(--gse-ui-progressAndLoading-spinner-text-fontSize);
   font-weight: var(--gse-ui-progressAndLoading-spinner-text-fontWeight);
   line-height: var(--gse-ui-progressAndLoading-spinner-text-lineHeight);
-  font-size: var(--gse-ui-progressAndLoading-spinner-text-fontSize);
-  fill: var(--gse-ui-progressAndLoading-textColor);
   text-anchor: middle;
+  fill: var(--gse-ui-progressAndLoading-textColor);
 }

package/dist/collection/components/stable/gux-radial-progress/gux-radial-progress.functional.js

@@ -1,5 +1,5 @@
-import { h } from '@stencil/core';
-import { getPercentageString, STROKE_DASH, RADIUS, OVERALL_SIZE } from './gux-radial-progress.service';
+import { h } from "@stencil/core";
+import { getPercentageString, STROKE_DASH, RADIUS, OVERALL_SIZE } from "./gux-radial-progress.service";
 export const GuxPercentageState = ({ value, max, screenreaderText }) => {
   return (h("div", { role: "progressbar", "aria-valuenow": value, "aria-valuemin": "0", "aria-valuemax": max, "aria-label": screenreaderText }, h("svg", { class: "gux-svg-container", viewBox: `0 0 ${OVERALL_SIZE} ${OVERALL_SIZE}`, role: "presentation" }, h("circle", { cx: "50%", cy: "50%", r: RADIUS, class: "gux-static-circle" }), h("circle", { cx: "50%", cy: "50%", r: RADIUS, class: "gux-dynamic-circle", "stroke-dashoffset": STROKE_DASH * (1 - value / max), "stroke-dasharray": STROKE_DASH, "stroke-linecap": "round" }), h("text", { x: "50%", y: "50%", "dominant-baseline": "central", class: "gux-percentage" }, getPercentageString(value, max)))));
 };

package/dist/collection/components/stable/gux-radial-progress/gux-radial-progress.js

@@ -1,8 +1,8 @@
-import { h } from '@stencil/core';
-import { trackComponent } from '@utils/tracking/usage';
-import { logWarn } from '../../../utils/error/log-error';
-import { GuxPercentageState, GuxSpinnerState } from './gux-radial-progress.functional';
-import { canShowPercentageState } from './gux-radial-progress.service';
+import { h } from "@stencil/core";
+import { trackComponent } from "../../../utils/tracking/usage";
+import { logWarn } from "../../../utils/error/log-error";
+import { GuxPercentageState, GuxSpinnerState } from "./gux-radial-progress.functional";
+import { canShowPercentageState } from "./gux-radial-progress.service";
 export class GuxRadialProgress {
   constructor() {
     this.value = undefined;