genesys-spark-components 4.37.0 → 4.39.0

package/dist/cjs/usage-208820ba.js

@@ -0,0 +1,229 @@
+'use strict';
+
+const name = "genesys-spark-components";
+const version = "4.39.0";
+const description = "Common webcomponents";
+const license = "MIT";
+const main = "dist/stencil-wrapper.js";
+const files = [
+	"dist/"
+];
+const scripts = {
+	build: "npm run clean && npm run i18n && npm run generate-gux-icon-types-file && npm run copy-genesys-spark-utils && npm run stencil && npm run build-wrapper",
+	"build-i18n": "./scripts/build-i18n.js",
+	"build-wrapper": "./scripts/wrap-stencil.js",
+	"check-a11y": "node ./scripts/check-a11y.mjs",
+	"check-readmes": "./scripts/check-readmes.sh",
+	clean: "rm -r ./dist ./build || true",
+	"copy-genesys-spark-utils": "node ./scripts/copy-genesys-spark-utils.mjs",
+	predev: "npm run i18n && npm run generate-gux-icon-types-file ",
+	dev: "npm run stencil.dev",
+	eslint: "eslint --fix .",
+	"generate-flags-sprite-file": "./scripts/generate-flags-sprite-file.js",
+	"generate-gux-icon-types-file": "./scripts/generate-gux-icon-types-file.js",
+	"generate-start-of-week-file": "./scripts/generate-start-of-week-file.js",
+	"generate-versions-file": "./scripts/generate-versions-file.mjs",
+	i18n: "npm run update-en-i18n && npm run build-i18n && npm run generate-start-of-week-file",
+	"lint-all": "npm-run-all \"stylelint\" \"eslint\" \"prettier\" \"prettier-package-json\" \"svgo\"",
+	"lint-staged": "lint-staged --concurrent false",
+	"list-checked-a11y-components": "node scripts/list-checked-a11y-components.js",
+	"list-component-tracking": "./scripts/list-component-tracking.js",
+	"list-i18n-files": "./scripts/list-i18n-files.js",
+	"list-light-dom-components": "./scripts/list-light-dom-components.js",
+	"list-shadow-explicitly-set": "./scripts/list-shadow-explicitly-set.js",
+	"predev.public": "npm run predev",
+	prepare: "npm run i18n",
+	prettier: "prettier --log-level silent --ignore-unknown --write .",
+	"prettier-package-json": "prettier-package-json --write ./package.json",
+	stencil: "stencil build --prod",
+	"stencil.dev": "stencil build --dev --watch --serve --no-open",
+	stylelint: "stylelint --fix \"**/*.{css,html,scss}\"",
+	svgo: "find ./src/components/stable/gux-icon/icons/**/*.svg -type f ! -path '*/legacy/*' -exec svgo {} +",
+	test: "TZ=UTC stencil test --spec --e2e",
+	"test.ci": "TZ=UTC npm run test.ci.spec",
+	"test.ci.e2e": "TZ=UTC stencil test --e2e --max-workers=1",
+	"test.ci.spec": "TZ=UTC stencil test --spec --max-workers=1",
+	"test.e2e": "TZ=UTC stencil test --e2e",
+	"test.e2e.update-snapshot": "TZ=UTC stencil test --e2e --updateSnapshot",
+	"test.screenshot": "TZ=UTC stencil test --e2e --screenshot",
+	"test.unit": "TZ=UTC stencil build dev && stencil test --spec",
+	"test.unit.update-snapshot": "TZ=UTC stencil test --spec --updateSnapshot",
+	"test.update-snapshot": "TZ=UTC stencil test --spec --e2e --updateSnapshot",
+	"test.watch": "TZ=UTC stencil test --spec --e2e --watch",
+	"update-en-i18n": "./scripts/update-en-i18n.js",
+	"version-sync": "npm version --no-git-tag-version --allow-same-version"
+};
+const config = {
+	commitizen: {
+		path: "git-cz"
+	}
+};
+const types = "dist/types/index.d.ts";
+const dependencies = {
+	"@floating-ui/dom": "^1.6.3",
+	"@vvo/tzdb": "^6.125.0",
+	"google-libphonenumber": "^3.2.34",
+	"intl-messageformat": "^10.5.4",
+	"requestanimationframe-timer": "^3.0.3",
+	sortablejs: "^1.15.2"
+};
+const devDependencies = {
+	"@babel/core": "^7.24.0",
+	"@babel/preset-env": "^7.24.0",
+	"@stencil/core": "^4.12.6",
+	"@stencil/react-output-target": "^0.5.3",
+	"@stencil/sass": "^3.0.10",
+	"@types/google-libphonenumber": "^7.4.30",
+	"@types/jest": "^29.5.12",
+	"@types/new-relic-browser": "^0.1118.2",
+	"@types/puppeteer": "^5.4.7",
+	"@types/resize-observer-browser": "^0.1.9",
+	"@types/sortablejs": "^1.15.8",
+	"@typescript-eslint/eslint-plugin": "^7.1.1",
+	"@typescript-eslint/parser": "^7.1.1",
+	"axe-core": "^4.8.4",
+	"axe-live": "^1.0.1",
+	eslint: "^8.57.0",
+	"eslint-config-genesys-spark-components": "file:../../shared-configs/eslint-config-genesys-spark-components",
+	"eslint-config-prettier": "^9.1.0",
+	"file-loader": "^6.2.0",
+	"genesys-spark-tokens": "file:../genesys-spark-tokens",
+	glob: "^10.3.0",
+	handlebars: "^4.7.8",
+	inquirer: "^9.2.15",
+	jest: "^29.7.0",
+	"jest-cli": "^29.7.0",
+	"jest-config": "^29.7.0",
+	"jest-environment-node": "^29.7.0",
+	"jest-junit": "^16.0.0",
+	"jest-silent-reporter": "^0.5.0",
+	jsdom: "^22.1.0",
+	"lint-staged": "^15.2.2",
+	marked: "^12.0.1",
+	"mutation-observer": "^1.0.3",
+	"node-fetch": "^3.3.2",
+	"npm-run-all": "^4.1.5",
+	"postcss-html": "^1.6.0",
+	"postcss-less": "^6.0.0",
+	"postcss-scss": "^4.0.9",
+	prettier: "^3.2.5",
+	"prettier-config-genesys-spark-components": "file:../../shared-configs/prettier-config-genesys-spark-components",
+	"prettier-package-json": "^2.8.0",
+	puppeteer: "^14.4.1",
+	"resize-observer-polyfill": "^1.5.1",
+	"rollup-plugin-copy": "^3.5.0",
+	"semver-sort": "^1.0.0",
+	"spritesheet-templates": "^10.5.2",
+	spritesmith: "^3.4.1",
+	stylelint: "^16.2.1",
+	"stylelint-config-genesys-spark-components": "file:../../shared-configs/stylelint-config-genesys-spark-components",
+	"stylelint-config-html": "^1.1.0",
+	"stylelint-config-recess-order": "^5.0.0",
+	"stylelint-config-standard": "^36.0.0",
+	"stylelint-scss": "^6.2.1",
+	"stylelint-use-logical": "^2.1.2",
+	"stylelint-use-logical-spec": "^5.0.1",
+	svgo: "^3.2.0",
+	"ts-loader": "^9.5.1",
+	typescript: "^4.9.5",
+	weekstart: "^2.0.0",
+	xmldom: "^0.6.0"
+};
+const publishConfig = {
+	registry: "https://registry.npmjs.org/"
+};
+const collection = "dist/collection/collection-manifest.json";
+const prettier = "prettier-config-genesys-spark-components";
+const volta = {
+	node: "18.16.1"
+};
+const packageInfo = {
+	name: name,
+	version: version,
+	description: description,
+	license: license,
+	main: main,
+	files: files,
+	scripts: scripts,
+	config: config,
+	types: types,
+	dependencies: dependencies,
+	devDependencies: devDependencies,
+	publishConfig: publishConfig,
+	collection: collection,
+	prettier: prettier,
+	volta: volta
+};
+
+// The number of actions to process every interval
+const ACTION_BATCH_SIZE = 20;
+const NR_LIMIT_INTERVAL = 30000; // 30s
+/**
+ * A queue of events that should be tracked by NewRelic.
+ * We initialize it with the library version to make sure that's always reported.
+ */
+const actionQueue = [
+    getVersionEvent(packageInfo.version)
+];
+/**
+ * Process the next batch items in the queue, set a timeout to recur.
+ * We use a recurring timeout instead of an interval because it guarantees
+ * a minimum of NR_LMIT_INTERVAL between batches, even if the browser is
+ * held up by processing elsewhere.
+ */
+function processActionQueue() {
+    const newrelic = window.newrelic;
+    if (!newrelic) {
+        return;
+    }
+    for (let i = 0; i < ACTION_BATCH_SIZE; i++) {
+        if (actionQueue.length == 0) {
+            setTimeout(processActionQueue, NR_LIMIT_INTERVAL);
+            return;
+        }
+        const action = actionQueue.shift();
+        newrelic.addPageAction(action.name, Object.assign(Object.assign({}, action.metadata), { queueDepth: actionQueue.length }));
+    }
+    setTimeout(processActionQueue, NR_LIMIT_INTERVAL);
+}
+let trackingStarted = false;
+/**
+ * Begin action processing loop if it hasn't started.
+ */
+function ensureTracking() {
+    if (!trackingStarted) {
+        trackingStarted = true;
+        processActionQueue();
+    }
+}
+/**
+ * Submits a component for tracking by NewRelic.
+ */
+function trackComponent(element, metadata) {
+    if (!window.newrelic) {
+        return;
+    }
+    ensureTracking();
+    // Ignore components in the shadow DOM of another component
+    // e.g. Only track components used directly by the app
+    if (!document.contains(element)) {
+        return;
+    }
+    actionQueue.push({
+        name: 'spark-component',
+        metadata: Object.assign(Object.assign({}, metadata), { component: element.tagName.toLowerCase(), version: packageInfo.version })
+    });
+}
+function getVersionEvent(packageInfoVersion) {
+    const [major, minor, ...patch] = packageInfoVersion.split('.');
+    return {
+        name: 'spark-library',
+        metadata: {
+            fullVersion: `${major}.${minor}.${patch.join('.')}`,
+            majorVersion: major,
+            minorVersion: `${major}.${minor}`
+        }
+    };
+}
+
+exports.trackComponent = trackComponent;

package/dist/collection/collection-manifest.json

@@ -2,6 +2,7 @@
   "entries": [
     "components/beta/gux-announce/gux-announce.js",
     "components/beta/gux-avatar/gux-avatar.js",
+    "components/beta/gux-avatar-change-photo/gux-avatar-change-photo.js",
     "components/beta/gux-avatar-focusable/gux-avatar-focusable.js",
     "components/beta/gux-calendar-beta/components/single/gux-calendar.js",
     "components/beta/gux-cta-group/gux-cta-group.js",

package/dist/collection/components/beta/gux-avatar/gux-avatar.css

@@ -152,6 +152,7 @@
   position: absolute;
   top: calc(var(--gse-ui-avatar-content-large-border-width) * -1);
   right: calc(var(--gse-ui-avatar-content-large-border-width) * -1);
+  z-index: var(--gse-semantic-zIndex-showFocus);
   display: flex;
   align-items: center;
   justify-content: center;

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

@@ -20,11 +20,15 @@ describe('gux-avatar', () => {
                 expect(logWarn).not.toHaveBeenCalled();
             });
         });
-        it(`component with image`, async () => {
-            const html = `<gux-avatar-beta name="John Doe"><img slot="image" alt="John Doe Image" src="https://i.pravatar.cc/300" /></gux-avatar-beta>`;
-            const page = await newSpecPage({ components: [GuxAvatar], html });
-            expect(page.root).toMatchSnapshot();
-            expect(logWarn).not.toHaveBeenCalled();
+        [
+            `<gux-avatar-beta name="John Doe"><img slot="image" alt="John Doe Image" src="https://i.pravatar.cc/300" /></gux-avatar-beta>`,
+            `<gux-avatar-beta name="John Doe" change-photo><img slot="image" alt="John Doe Image" src="https://i.pravatar.cc/300" /></gux-avatar-beta>`
+        ].forEach((html, index) => {
+            it(`component with image type (${index + 1}) for valid markup`, async () => {
+                const page = await newSpecPage({ components: [GuxAvatar], html });
+                expect(page.root).toMatchSnapshot();
+                expect(logWarn).not.toHaveBeenCalled();
+            });
         });
     });
     describe('warnings', () => {
@@ -133,5 +137,6 @@ describe('gux-avatar', () => {
                 expect(page.root).toMatchSnapshot();
             });
         });
+        //TODO: Add tests for change photo once format agreed
     });
 });

package/dist/collection/components/beta/gux-avatar-change-photo/gux-avatar-change-photo.css

@@ -0,0 +1,42 @@
+.gux-change-photo {
+  position: relative;
+  padding: 0;
+  margin: 0;
+  line-height: 0px;
+  cursor: pointer;
+  background: none;
+  border: none;
+  border-radius: 50%;
+}
+.gux-change-photo .gux-change-photo-icon {
+  display: none;
+}
+.gux-change-photo:hover, .gux-change-photo:focus-visible {
+  cursor: pointer;
+}
+.gux-change-photo:hover .gux-change-photo-icon, .gux-change-photo:focus-visible .gux-change-photo-icon {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  z-index: var(--gse-semantic-zIndex-showFocus);
+  display: inline-block;
+  color: var(--gse-ui-avatar-hoverModal-foregroundColor);
+  transform: translate(-50%, -50%);
+}
+.gux-change-photo:hover::after, .gux-change-photo:focus-visible::after {
+  position: absolute;
+  top: var(--gse-ui-avatar-large-presenceRing-width);
+  left: var(--gse-ui-avatar-large-presenceRing-width);
+  width: var(--gse-ui-avatar-addChangeImage-hoverModal-shroudSize);
+  height: var(--gse-ui-avatar-addChangeImage-hoverModal-shroudSize);
+  content: "";
+  background-color: var(--gse-ui-avatar-hoverModal-shroudColor);
+  border: var(--gse-ui-avatar-content-large-border-width) var(--gse-ui-avatar-content-default-border-style) var(--gse-ui-avatar-content-default-border-color);
+  border-radius: 50%;
+  opacity: var(--gse-ui-avatar-hoverModal-opacity);
+  transition: background-color 0.5s ease;
+}
+.gux-change-photo:focus-visible {
+  outline: var(--gse-semantic-focusRing-default-border-color) var(--gse-semantic-focusRing-default-border-style) var(--gse-semantic-focusRing-default-border-width);
+  outline-offset: var(--gse-semantic-focusRing-offset);
+}

package/dist/collection/components/beta/gux-avatar-change-photo/gux-avatar-change-photo.js

@@ -0,0 +1,55 @@
+import { h } from "@stencil/core";
+import { logWarn } from "../../../utils/error/log-error";
+import { buildI18nForComponent } from "../../../i18n";
+import defaultResources from "./i18n/en.json";
+import { trackComponent } from "../../../utils/tracking/usage";
+/**
+ * @slot avatar - gux-avatar-beta tag
+ */
+export class GuxAvatarChangePhoto {
+    async componentWillLoad() {
+        this.validateSlot();
+        trackComponent(this.root);
+        this.i18n = await buildI18nForComponent(this.root, defaultResources);
+    }
+    validateSlot() {
+        const slottedElement = this.root.querySelector('gux-avatar-beta');
+        if (!slottedElement) {
+            logWarn(this.root, 'Slotted element must be gux-avatar-beta');
+        }
+    }
+    render() {
+        return (h("button", { key: 'c65d1b4a17529e34905b3d92cd09360f051355b6', class: "gux-change-photo", onClick: () => this.guxchangephoto.emit(), "aria-describedby": "gux-change-photo-icon" }, h("gux-icon", { key: 'a238548e311792690e9e80353d6158c1e03d4d01', id: "gux-change-photo-icon", class: "gux-change-photo-icon", "icon-name": "fa/camera-solid", size: "small", screenreaderText: this.i18n('changePhoto') }), h("slot", { key: '6050422d4d3f42fc62d5480912040480d85165e7', name: "avatar" })));
+    }
+    static get is() { return "gux-avatar-change-photo-beta"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["gux-avatar-change-photo.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["gux-avatar-change-photo.css"]
+        };
+    }
+    static get events() {
+        return [{
+                "method": "guxchangephoto",
+                "name": "guxchangephoto",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "root"; }
+}

package/dist/collection/components/beta/gux-avatar-change-photo/tests/gux-avatar-change-photo.e2e.js

@@ -0,0 +1,14 @@
+import { newSparkE2EPage, a11yCheck } from "../../../../test/e2eTestUtils";
+describe('gux-avatar', () => {
+    describe('#render', () => {
+        it(`should log warning for gux-avatar-change-photo without avatar`, async () => {
+            const html = `<gux-avatar-change-photo-beta>
+        <gux-avatar-beta slot="avatar" name="Conor Darcy"></gux-avatar-beta>
+      </gux-avatar-change-photo-beta>`;
+            const page = await newSparkE2EPage({ html });
+            const element = await page.find('gux-avatar-change-photo-beta');
+            await a11yCheck(page);
+            expect(element.outerHTML).toMatchSnapshot();
+        });
+    });
+});

package/dist/collection/components/beta/gux-avatar-change-photo/tests/gux-avatar-change-photo.spec.js

@@ -0,0 +1,29 @@
+jest.mock('../../../../utils/error/log-error', () => ({
+    __esModule: true,
+    logWarn: jest.fn()
+}));
+import { newSpecPage } from "../../../../test/specTestUtils";
+import { GuxAvatarChangePhoto } from "../gux-avatar-change-photo";
+import { logWarn } from "../../../../utils/error/log-error";
+describe('gux-avatar', () => {
+    describe('#render', () => {
+        it(`component with valid markup`, async () => {
+            const html = `<gux-avatar-change-photo-beta>
+        <gux-avatar-beta slot="avatar" name="Conor Darcy"></gux-avatar-beta>
+      </gux-avatar-change-photo-beta>`;
+            const page = await newSpecPage({
+                components: [GuxAvatarChangePhoto],
+                html
+            });
+            expect(page.root).toMatchSnapshot();
+            expect(logWarn).not.toHaveBeenCalled();
+        });
+    });
+    describe('warnings', () => {
+        it(`should log warning for gux-avatar-change-photo without avatar`, async () => {
+            const html = `<gux-avatar-change-photo-beta></gux-avatar-change-photo-beta>`;
+            await newSpecPage({ components: [GuxAvatarChangePhoto], html });
+            expect(logWarn).toHaveBeenCalled();
+        });
+    });
+});

package/dist/collection/components/beta/gux-avatar-focusable/gux-avatar-focusable.e2e.js

@@ -0,0 +1,29 @@
+import { newSparkE2EPage, a11yCheck } from "../../../test/e2eTestUtils";
+describe('gux-avatar', () => {
+    describe('#render', () => {
+        [
+            `<gux-avatar-focusable-beta>
+        <button>
+          <gux-avatar-beta name="Conor Darcy"></gux-avatar-beta>
+        </button>
+      </gux-avatar-focusable-beta>`,
+            `<gux-avatar-focusable-beta>
+        <a href="#">
+          <gux-avatar-beta name="Conor Darcy"></gux-avatar-beta>
+        </a>
+      </gux-avatar-focusable-beta>`,
+            `<gux-avatar-focusable-beta>
+        <gux-avatar-change-photo-beta>
+          <gux-avatar-beta slot="avatar" name="Conor Darcy"></gux-avatar-beta>
+        </gux-avatar-change-photo-beta>
+      </gux-avatar-focusable-beta>`
+        ].forEach((html, index) => {
+            it(`should render component as expected (${index + 1})`, async () => {
+                const page = await newSparkE2EPage({ html });
+                const element = await page.find('gux-avatar-focusable-beta');
+                await a11yCheck(page);
+                expect(element.outerHTML).toMatchSnapshot();
+            });
+        });
+    });
+});

package/dist/collection/components/beta/gux-avatar-focusable/gux-avatar-focusable.js

@@ -8,7 +8,7 @@ export class GuxAvatarFocusable {
         this.validateSlot();
     }
     validateSlot() {
-        const slottedElement = this.root.querySelector('a, button');
+        const slottedElement = this.root.querySelector('a, button, gux-avatar-change-photo-beta');
         if (slottedElement) {
             this.avatarElement = slottedElement.querySelector('gux-avatar-beta');
             if (!this.avatarElement) {
@@ -16,12 +16,12 @@ export class GuxAvatarFocusable {
             }
         }
         else {
-            logWarn(this.root, 'An anchor tag or button tag must be slotted into gux-avatar-focusable');
+            logWarn(this.root, 'An anchor tag, gux-avatar-change-photo-beta tag or button tag must be slotted into gux-avatar-focusable');
         }
     }
     render() {
         var _a, _b;
-        return (h(Host, { key: '243eebb506593c0d40bd92e7933ba5eb7dcc7d1c', "gs-avatar-size": (_b = (_a = this.avatarElement) === null || _a === void 0 ? void 0 : _a.size) !== null && _b !== void 0 ? _b : 'large' }, h("slot", { key: '6d700bff94c920471a6a9eabfd3349dedbf286ef' })));
+        return (h(Host, { key: '294d7069610101ba31483a12230293a10f9ddb04', "gs-avatar-size": (_b = (_a = this.avatarElement) === null || _a === void 0 ? void 0 : _a.size) !== null && _b !== void 0 ? _b : 'large' }, h("slot", { key: 'd72dac1ad291288f87358f4348430e7a37d9e7c8' })));
     }
     static get is() { return "gux-avatar-focusable-beta"; }
     static get encapsulation() { return "shadow"; }

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

@@ -17,6 +17,11 @@ describe('gux-avatar-focusable', () => {
         <a href="#">
           <gux-avatar-beta name="Conor Darcy"></gux-avatar-beta>
         </a>
+      </gux-avatar-focusable-beta>`,
+            `<gux-avatar-focusable-beta>
+        <gux-avatar-change-photo-beta>
+          <gux-avatar-beta slot="avatar" name="Conor Darcy"></gux-avatar-beta>
+        </gux-avatar-change-photo-beta>
       </gux-avatar-focusable-beta>`
         ].forEach((html, index) => {
             it(`component type (${index + 1}) with valid markup`, async () => {
@@ -45,9 +50,14 @@ describe('gux-avatar-focusable', () => {
         <div>
           <gux-avatar-beta name="Conor Darcy"></gux-avatar-beta>
         </div>
+      </gux-avatar-focusable-beta>`,
+            `<gux-avatar-focusable-beta>
+        <gux-avatar-change-photo-beta>
+          <gux-avatar-beta slot="avatar" name="Conor Darcy"></gux-avatar-beta>
+        </gux-avatar-change-photo-beta>
       </gux-avatar-focusable-beta>`
         ].forEach((html, index) => {
-            it(`should log warning for gux-avatar-focusable without anchor or button tags type (${index + 1})`, async () => {
+            it(`should log warning for gux-avatar-focusable without anchor, gux-change-photo-beta or button tags type (${index + 1})`, async () => {
                 await newSpecPage({ components: [GuxAvatarFocusable], html });
                 expect(logWarn).toHaveBeenCalled();
             });

package/dist/collection/components/beta/gux-calendar-beta/components/single/gux-calendar.js

@@ -176,9 +176,9 @@ export class GuxCalendar {
     renderHeader() {
         return (h("div", { class: "gux-header" }, h("button", { type: "button", class: "gux-left", "aria-label": this.i18n('previousMonth', {
                 localizedPreviousMonthAndYear: getDateAsMonthYear(this.changeMonth(-1), this.locale)
-            }), onClick: () => this.setNewFocusedMonth(-1) }, h("gux-icon", { decorative: true, "icon-name": "chevron-small-left" })), h("span", { class: "gux-header-month-and-year" }, getDateAsMonthYear(this.getFocusedValue(), this.locale)), h("button", { type: "button", class: "gux-right", "aria-label": this.i18n('nextMonth', {
+            }), onClick: () => this.setNewFocusedMonth(-1) }, h("gux-icon", { decorative: true, "icon-name": "custom/chevron-left-small-regular" })), h("span", { class: "gux-header-month-and-year" }, getDateAsMonthYear(this.getFocusedValue(), this.locale)), h("button", { type: "button", class: "gux-right", "aria-label": this.i18n('nextMonth', {
                 localizedNextMonthAndYear: getDateAsMonthYear(this.changeMonth(1), this.locale)
-            }), onClick: () => this.setNewFocusedMonth(1) }, h("gux-icon", { decorative: true, "icon-name": "chevron-small-right" }))));
+            }), onClick: () => this.setNewFocusedMonth(1) }, h("gux-icon", { decorative: true, "icon-name": "custom/chevron-right-small-regular" }))));
     }
     renderContent() {
         return (h("div", null, h("div", { class: "gux-week-days" }, getWeekdays(this.locale, this.startDayOfWeek).map(day => (h("div", { class: "gux-week-day" }, day)))), h("div", { class: "gux-content" }, this.getMonthDays().map(week => (h("div", { class: "gux-content-week" }, week.dates.map(day => (h("div", { "data-date": day.date.getTime(), onClick: () => this.onDateClick(day.date), role: "button", "aria-current": day.selected ? 'true' : 'false', tabindex: day.selected || day.focused ? '0' : '-1', onKeyDown: e => void this.onKeyDown(e), "aria-disabled": day.disabled ? 'true' : 'false', class: {
@@ -190,7 +190,7 @@ export class GuxCalendar {
             } }, h("span", { class: "gux-non-sr", "aria-hidden": "true" }, day.date.getDate()), h("span", { class: "gux-sr-only" }, h("gux-date-beta", { datetime: day.date.toISOString(), format: "long" })))))))))));
     }
     render() {
-        return (h("div", { key: '21bec94aa840d48119fa33756a944e85b97d73f3', class: "gux-calendar-beta" }, h("slot", { key: '570f0c89199732101f40dfe270460d65b231114b' }), this.renderHeader(), this.renderContent()));
+        return (h("div", { key: 'e2f9a107ee91621f919e080a6c10341ded7389be', class: "gux-calendar-beta" }, h("slot", { key: 'f773c2600908c44ff26b2e89e61e1d9afedf4337' }), this.renderHeader(), this.renderContent()));
     }
     static get is() { return "gux-calendar-beta"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/beta/gux-cta-group/gux-cta-group.js

@@ -62,7 +62,7 @@ export class GuxCTAGroup {
         this.validateDismissSlot(this.root.querySelector('[slot=dismiss]'));
     }
     render() {
-        return (h("div", { key: 'b016ee7bdd8aa8f9137b5f005d826908a192c570', class: `gux-cta-group gux-${this.align}-align` }, h("slot", { key: 'a90406043d4c7d232de8054a3bd45a3c43b1cdf6', name: "primary" }), h("slot", { key: '6b710696e87676444c61d6337f02077b674cd6f6', name: "secondary" }), h("slot", { key: '5b66c14ef3fa4844c0a361418bd08289b387480c', name: "dismiss" })));
+        return (h("div", { key: '8173069370a108be86e6ece1bb2d9883ff5aa881', class: `gux-cta-group gux-${this.align}-align` }, h("slot", { key: '864f1941fa2a66ff658cdd56d5e0c5082709333b', name: "primary" }), h("slot", { key: '74d7d31bb9f327577ce1f639231a79ce84b759ce', name: "secondary" }), h("slot", { key: '3d97c644a3911d97cdb23469347ac898ac141a08', name: "dismiss" })));
     }
     static get is() { return "gux-cta-group"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/beta/gux-date/gux-date.js

@@ -38,7 +38,7 @@ export class GuxDate {
         }
     }
     render() {
-        return (h(Host, { key: 'a9ca02bca11221f4e53aa65807f1291c8a834048' }, this.renderDate()));
+        return (h(Host, { key: '79f6d22c05b5530f617b7db412af44f0e2a374b7' }, this.renderDate()));
     }
     static get is() { return "gux-date-beta"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/beta/gux-date-time/gux-date-time.js

@@ -39,7 +39,7 @@ export class GuxDateTime {
         }
     }
     render() {
-        return (h(Host, { key: '1c2c99ca32a68dba35b0a37756305154a5151a6b' }, this.renderDateTime()));
+        return (h(Host, { key: 'f2ebb999dcafa729f19f28c28c45f33c98f21085' }, this.renderDateTime()));
     }
     static get is() { return "gux-date-time-beta"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/beta/gux-flag-icon/gux-flag-icon.js

@@ -11,7 +11,7 @@ export class GuxFlagIconBeta {
     }
     render() {
         var _a;
-        return (h("span", { key: '93fa048d24c1fabe06941516e434a8cbef36ebc3', role: this.screenreaderText ? 'img' : '', class: 'gux-flag-' + ((_a = this.flag) === null || _a === void 0 ? void 0 : _a.toLowerCase()), style: { backgroundImage: `url(${spritesheetDataUrl})` }, "aria-label": this.screenreaderText }));
+        return (h("span", { key: '4ca12c762b2d54ea82364c372a8e4b91ab2494e5', role: this.screenreaderText ? 'img' : '', class: 'gux-flag-' + ((_a = this.flag) === null || _a === void 0 ? void 0 : _a.toLowerCase()), style: { backgroundImage: `url(${spritesheetDataUrl})` }, "aria-label": this.screenreaderText }));
     }
     static get is() { return "gux-flag-icon-beta"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/beta/gux-month-picker/gux-month-calendar/gux-month-calendar.js

@@ -109,10 +109,10 @@ export class GuxMonthCalendar {
         this.monthListElement.focus();
     }
     renderHeader() {
-        return (h("div", { class: "gux-year-header" }, h("button", { type: "button", class: "gux-year-change", onClick: () => this.changeYear(-1), disabled: this.isPreviousYearLessThanMinYear(this.year, this.min), ref: (el) => (this.previousYearElement = el) }, h("gux-icon", { "icon-name": "chevron-small-left", "screenreader-text": this.i18n('changeYear', {
+        return (h("div", { class: "gux-year-header" }, h("button", { type: "button", class: "gux-year-change", onClick: () => this.changeYear(-1), disabled: this.isPreviousYearLessThanMinYear(this.year, this.min), ref: (el) => (this.previousYearElement = el) }, h("gux-icon", { "icon-name": "custom/chevron-left-small-regular", "screenreader-text": this.i18n('changeYear', {
                 currentYear: parseInt(this.year),
                 changeYear: parseInt(this.year) - 1
-            }) })), h("div", null, this.getYearLabel(this.year)), h("button", { type: "button", class: "gux-year-change", onClick: () => this.changeYear(1), disabled: this.isNextYearGreaterThanMaxYear(this.year, this.max), ref: (el) => (this.nextYearElement = el) }, h("gux-icon", { "icon-name": "chevron-small-right", "screenreader-text": this.i18n('changeYear', {
+            }) })), h("div", null, this.getYearLabel(this.year)), h("button", { type: "button", class: "gux-year-change", onClick: () => this.changeYear(1), disabled: this.isNextYearGreaterThanMaxYear(this.year, this.max), ref: (el) => (this.nextYearElement = el) }, h("gux-icon", { "icon-name": "custom/chevron-right-small-regular", "screenreader-text": this.i18n('changeYear', {
                 currentYear: parseInt(this.year),
                 changeYear: parseInt(this.year) + 1
             }) }))));
@@ -128,7 +128,7 @@ export class GuxMonthCalendar {
         return (h("span", { onFocus: () => this.doFocusTrap(), tabindex: "0" }));
     }
     render() {
-        return (h("div", { key: '8a7dfc5ae27c1259e18cc9068247893d5f9de3e8', class: "gux-month-calendar" }, this.renderHeader(), this.renderMonths(), this.renderTrapFocusEl()));
+        return (h("div", { key: 'a2ec84632e69c6e7005796a8ff6edb5fd1ba4b7f', class: "gux-month-calendar" }, this.renderHeader(), this.renderMonths(), this.renderTrapFocusEl()));
     }
     static get is() { return "gux-month-calendar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/beta/gux-month-picker/gux-month-calendar/gux-month-list/gux-month-list-item/gux-month-list-item.js

@@ -20,7 +20,7 @@ export class GuxMonthListItem {
         }
     }
     render() {
-        return (h(Host, { key: '1b11ecf35e494fa8302d3810b04d4b100a9bce37', role: "listitem", value: this.value }, h("div", { key: '5fc08521ca860aeeaf42010ce21dcc8ae50da5fd', class: "gux-container" }, h("button", { key: 'e6d138f95ab92cb8e1d55414da9323d7d8aa8f55', class: { 'gux-selected': this.selected }, type: "button", tabIndex: -1, disabled: this.disabled }, h("slot", { key: '6cbc61ab3709e030469581f693ac0e57bc800710' })))));
+        return (h(Host, { key: '1318dfd3ecd31ec2d792b7f0aaa04af6e2d2588a', role: "listitem", value: this.value }, h("div", { key: 'ac39e1e4a73a946a4b06392c6d11ec88a3545228', class: "gux-container" }, h("button", { key: '9b1c74b547c78b50ec88e42398f617c3f3b6aeaf', class: { 'gux-selected': this.selected }, type: "button", tabIndex: -1, disabled: this.disabled }, h("slot", { key: '35a3642488917660657784d2a38406a88ae6997f' })))));
     }
     static get is() { return "gux-month-list-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/beta/gux-month-picker/gux-month-calendar/gux-month-list/gux-month-list.js

@@ -38,7 +38,7 @@ export class GuxMonthList {
         first(this.root, validFocusableItems);
     }
     render() {
-        return (h(Host, { key: '147bb32f8c74fbe3541c516b546d3445537a4130', role: "list" }, h("slot", { key: '98919214c3f0cd9649d2f936b6b87d801f0b71be' })));
+        return (h(Host, { key: '3a21309c58f73ea7bfdac59a945a4a107d938219', role: "list" }, h("slot", { key: '0e9d862171ce091b513b72e8f6aa81d6e0ba9d7a' })));
     }
     static get is() { return "gux-month-list"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/beta/gux-month-picker/gux-month-picker.js

@@ -185,7 +185,7 @@ export class GuxMonthPicker {
         return (h("button", { class: {
                 'gux-popup-toggle': true,
                 'gux-expanded': this.expanded
-            }, ref: (el) => (this.calendarToggleButtonElement = el), type: "button", onClick: () => this.toggleCalendar(), disabled: this.disabled }, h("gux-icon", { "icon-name": "calendar", "screenreader-text": this.i18n('toggleCalendar') })));
+            }, ref: (el) => (this.calendarToggleButtonElement = el), type: "button", onClick: () => this.toggleCalendar(), disabled: this.disabled }, h("gux-icon", { "icon-name": "fa/calendar-regular", "screenreader-text": this.i18n('toggleCalendar') })));
     }
     renderTarget() {
         return (h("div", { class: "gux-target", slot: "target" }, this.renderSpinnerButtons(), this.renderCalendarToggleButton()));
@@ -194,7 +194,7 @@ export class GuxMonthPicker {
         return (h("gux-month-calendar", { slot: "popup", ref: (el) => (this.monthCalendarElement = el), onInput: () => this.onMonthCalendarInput(), value: this.value, min: this.min, max: this.max }));
     }
     render() {
-        return (h("gux-popup", { key: '492a16fac791b598113f43953d9235e2b0b58ecd', expanded: this.expanded, disabled: this.disabled, "exceed-target-width": true }, this.renderTarget(), this.renderPopup()));
+        return (h("gux-popup", { key: '2ebbd58561728576b2c322260ebfeb16d4464e8b', expanded: this.expanded, disabled: this.disabled, "exceed-target-width": true }, this.renderTarget(), this.renderPopup()));
     }
     static get is() { return "gux-month-picker-beta"; }
     static get encapsulation() { return "shadow"; }