genesys-spark-components 4.100.0 → 4.101.0

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

@@ -0,0 +1,97 @@
+::slotted(img) {
+  inline-size: 100%;
+  block-size: 100%;
+  object-fit: cover;
+}
+
+button {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: var(--gse-ui-avatar-small-content-size);
+  block-size: var(--gse-ui-avatar-small-content-size);
+  padding: 0;
+  margin: 0;
+  margin-inline-end: var(--gse-ui-avatar-groupSet-gap);
+  overflow: hidden;
+  color: var(--gse-ui-avatar-media-initialsForeground-inverse);
+  cursor: pointer;
+  background: none;
+  background-color: var(--gse-ui-avatar-media-initialsBackground-default);
+  border: none;
+  border-radius: 50%;
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 26 26' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22 13c0-2.6.7-5 1.8-7.2C21.5 2.3 17.5 0 13 0 5.8 0 0 5.8 0 13s5.8 13 13 13c4.5 0 8.5-2.3 10.8-5.8C22.7 18 22 15.6 22 13z' /%3E%3C/svg%3E");
+  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 26 26' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22 13c0-2.6.7-5 1.8-7.2C21.5 2.3 17.5 0 13 0 5.8 0 0 5.8 0 13s5.8 13 13 13c4.5 0 8.5-2.3 10.8-5.8C22.7 18 22 15.6 22 13z' /%3E%3C/svg%3E");
+}
+button:focus-visible, button:hover {
+  position: relative;
+  z-index: var(--gse-semantic-zIndex-showFocus);
+  mask: none;
+}
+button:focus-visible {
+  outline: var(--gse-semantic-border-focus) solid var(--gse-semantic-focusOutline-md-borderWidth);
+  outline-offset: var(--gse-semantic-focusOutline-offset);
+}
+button.gux-last-item {
+  mask: none;
+}
+button .gux-avatar-initials {
+  font-family: var(--gse-ui-avatar-small-initials-fontFamily);
+  font-size: var(--gse-ui-avatar-small-initials-fontSize);
+  font-weight: var(--gse-ui-avatar-small-initials-fontWeight);
+  line-height: var(--gse-ui-avatar-small-initials-lineHeight);
+  text-transform: uppercase;
+}
+button.gux-accent-1 {
+  color: var(--gse-ui-avatar-media-initialsForeground-inverse);
+  background-color: var(--gse-ui-avatar-media-initialsBackground-accent1);
+}
+button.gux-accent-2 {
+  color: var(--gse-ui-avatar-media-initialsForeground-default);
+  background-color: var(--gse-ui-avatar-media-initialsBackground-accent2);
+}
+button.gux-accent-3 {
+  color: var(--gse-ui-avatar-media-initialsForeground-inverse);
+  background-color: var(--gse-ui-avatar-media-initialsBackground-accent3);
+}
+button.gux-accent-4 {
+  color: var(--gse-ui-avatar-media-initialsForeground-inverse);
+  background-color: var(--gse-ui-avatar-media-initialsBackground-accent4);
+}
+button.gux-accent-5 {
+  color: var(--gse-ui-avatar-media-initialsForeground-default);
+  background-color: var(--gse-ui-avatar-media-initialsBackground-accent5);
+}
+button.gux-accent-6 {
+  color: var(--gse-ui-avatar-media-initialsForeground-default);
+  background-color: var(--gse-ui-avatar-media-initialsBackground-accent6);
+}
+button.gux-accent-7 {
+  color: var(--gse-ui-avatar-media-initialsForeground-inverse);
+  background-color: var(--gse-ui-avatar-media-initialsBackground-accent7);
+}
+button.gux-accent-8 {
+  color: var(--gse-ui-avatar-media-initialsForeground-default);
+  background-color: var(--gse-ui-avatar-media-initialsBackground-accent8);
+}
+button.gux-accent-9 {
+  color: var(--gse-ui-avatar-media-initialsForeground-default);
+  background-color: var(--gse-ui-avatar-media-initialsBackground-accent9);
+}
+button.gux-accent-10 {
+  color: var(--gse-ui-avatar-media-initialsForeground-default);
+  background-color: var(--gse-ui-avatar-media-initialsBackground-accent10);
+}
+button.gux-accent-11 {
+  color: var(--gse-ui-avatar-media-initialsForeground-default);
+  background-color: var(--gse-ui-avatar-media-initialsBackground-accent11);
+}
+button.gux-accent-12 {
+  color: var(--gse-ui-avatar-media-initialsForeground-inverse);
+  background-color: var(--gse-ui-avatar-media-initialsBackground-accent12);
+}
+button.gux-accent-inherit {
+  color: inherit;
+  background-color: inherit;
+}

package/dist/collection/components/beta/gux-avatar-group/gux-avatar-group-item/gux-avatar-group-item.js

@@ -0,0 +1,173 @@
+import { h } from "@stencil/core";
+import { trackComponent } from "../../../../utils/tracking/usage";
+import { logWarn } from "../../../../utils/error/log-error";
+import { groupKeyboardNavigation } from "../gux-avatar-group.service";
+import { generateInitials } from "../../../../utils/string/generate-initials";
+/**
+ * @slot image - Avatar photo.
+ */
+export class GuxAvatarGroupItem {
+    constructor() {
+        this.name = undefined;
+        this.accent = 'auto';
+    }
+    async componentWillLoad() {
+        trackComponent(this.root);
+    }
+    componentDidLoad() {
+        this.validatingInputs();
+    }
+    /*
+     * Focus button element
+     */
+    // eslint-disable-next-line @typescript-eslint/require-await
+    async guxFocus() {
+        this.buttonElement.focus();
+    }
+    /*
+     * Hide tooltip
+     */
+    async hideTooltip() {
+        return await this.tooltip.hideTooltip();
+    }
+    onKeydown(event) {
+        groupKeyboardNavigation(event, this.root);
+    }
+    isLastItemInGroup() {
+        const parent = this.root.parentElement;
+        const children = Array.from(parent.children);
+        const index = children.findIndex(i => i === this.root);
+        return index === children.length - 1;
+    }
+    getAccent() {
+        if (this.accent !== 'auto') {
+            return `gux-accent-${this.accent}`;
+        }
+        const hashedName = this.name
+            .split('')
+            .reduce((acc, char) => acc + char.charCodeAt(0), 0);
+        const hashedNameAccent = (hashedName % 12).toString();
+        return `gux-accent-${hashedNameAccent}`;
+    }
+    validatingInputs() {
+        const avatarImage = this.root.querySelector('img');
+        if (!this.name) {
+            logWarn(this.root, 'Name prop is required for accessibility');
+        }
+        if (avatarImage && !avatarImage.getAttribute('alt')) {
+            logWarn(this.root, 'Alt attribute is required for slotted image.');
+        }
+    }
+    render() {
+        return (h("button", { key: '5ac64c971a6d31b621ec5949bebd51eca93f5b6b', type: "button", role: "menuitem", "aria-label": this.name, tabIndex: -1, ref: el => (this.buttonElement = el), class: {
+                'gux-avatar': true,
+                [this.getAccent()]: true,
+                'gux-last-item': this.isLastItemInGroup()
+            } }, h("slot", { key: '58ec799cad023f20bc43fe4dc9b18320155f0613', name: "image" }, h("span", { key: '59104f19f6c9aab2771354bb4a39cc3aa88f45bd', class: "gux-avatar-initials", "aria-hidden": "true" }, generateInitials(this.name))), h("gux-tooltip-beta", { key: '2adbb48a98e4669be0f7f18d2312b5c7018b35a6', "aria-hidden": "true", "visual-only": true, placement: "top", ref: el => (this.tooltip = el) }, h("div", { key: 'e5b40f15d921448fe87089c48938172c0d2f96c0', slot: "content" }, this.name))));
+    }
+    static get is() { return "gux-avatar-group-item-beta"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["gux-avatar-group-item.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["gux-avatar-group-item.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Name which is shown as initials. Should be formatted 'Lastname Firstname' for JA, zhCN and KO names.\nNames without blank space will show first 2 characters of string."
+                },
+                "attribute": "name",
+                "reflect": false
+            },
+            "accent": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "GuxAvatarAccent",
+                    "resolved": "\"0\" | \"1\" | \"10\" | \"11\" | \"12\" | \"2\" | \"3\" | \"4\" | \"5\" | \"6\" | \"7\" | \"8\" | \"9\" | \"auto\" | \"default\" | \"inherit\"",
+                    "references": {
+                        "GuxAvatarAccent": {
+                            "location": "import",
+                            "path": "./gux-avatar-group-item.types",
+                            "id": "src/components/beta/gux-avatar-group/gux-avatar-group-item/gux-avatar-group-item.types.ts::GuxAvatarAccent"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Manually sets avatar accent"
+                },
+                "attribute": "accent",
+                "reflect": false,
+                "defaultValue": "'auto'"
+            }
+        };
+    }
+    static get methods() {
+        return {
+            "guxFocus": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "hideTooltip": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "root"; }
+    static get listeners() {
+        return [{
+                "name": "keydown",
+                "method": "onKeydown",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}

package/dist/collection/components/beta/gux-avatar-group/gux-avatar-group-item/gux-avatar-group-item.types.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,10 @@
+:host {
+  display: flex;
+  align-items: center;
+  inline-size: fit-content;
+  padding-block: var(--gse-semantic-interactive-sm-padding);
+  padding-inline: var(--gse-semantic-interactive-sm-padding) var(--gse-semantic-interactive-md-padding);
+}
+:host:focus-visible {
+  outline: none;
+}

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

@@ -0,0 +1,67 @@
+import { h, Host } from "@stencil/core";
+import { trackComponent } from "../../../utils/tracking/usage";
+import { logWarn } from "../../../utils/error/log-error";
+import { setFocusTarget, resetFocusableSibling } from "./gux-avatar-group.service";
+/**
+ * @slot - slot for gux-avatar-group-item components
+ */
+export class GuxAvatarGroup {
+    async componentWillLoad() {
+        trackComponent(this.root);
+        if (this.root.querySelectorAll('gux-avatar-group-item-beta').length === 0) {
+            logWarn(this.root, 'gux-avatar-group-beta: No gux-avatar-group-item-beta tags found in slot. Please add gux-avatar-group-item-beta tags to the slot.');
+        }
+    }
+    componentDidLoad() {
+        this.setInitialFocusTarget();
+    }
+    setInitialFocusTarget() {
+        const groupItems = Array.from(this.root.children);
+        if (groupItems.length > 0) {
+            const firstGroupItem = groupItems[0];
+            setFocusTarget(firstGroupItem);
+        }
+    }
+    onMouseOver(event) {
+        this.hideCurrentTooltip(event);
+    }
+    hideCurrentTooltip(event) {
+        const target = event.target;
+        const groupItems = Array.from(this.root.children);
+        const focusedChild = groupItems.find(child => child.matches(':focus-within'));
+        if (focusedChild && focusedChild !== target) {
+            focusedChild.hideTooltip();
+        }
+    }
+    handleClick(event) {
+        const clickedElement = event.target;
+        resetFocusableSibling(clickedElement);
+        setFocusTarget(clickedElement);
+    }
+    render() {
+        return (h(Host, { key: 'a0c74e33fa71e345201ab4c1f0cea37fd767f40a', role: "menu", onClick: this.handleClick.bind(this) }, h("slot", { key: '761b86e5d15febdb0334abd3bf390042643e7d68' })));
+    }
+    static get is() { return "gux-avatar-group-beta"; }
+    static get encapsulation() { return "shadow"; }
+    static get delegatesFocus() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["gux-avatar-group.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["gux-avatar-group.css"]
+        };
+    }
+    static get elementRef() { return "root"; }
+    static get listeners() {
+        return [{
+                "name": "mouseover",
+                "method": "onMouseOver",
+                "target": undefined,
+                "capture": false,
+                "passive": true
+            }];
+    }
+}

package/dist/collection/components/beta/gux-avatar-group/gux-avatar-group.service.js

@@ -0,0 +1,109 @@
+export function groupKeyboardNavigation(event, currentElement) {
+    switch (event.key) {
+        case 'ArrowLeft':
+            event.stopPropagation();
+            event.preventDefault();
+            focusPreviousSiblingLoop(currentElement);
+            break;
+        case 'ArrowRight':
+            event.stopPropagation();
+            event.preventDefault();
+            focusNextSiblingLoop(currentElement);
+            break;
+        case 'Home':
+            event.stopPropagation();
+            event.preventDefault();
+            focusFirstSibling(currentElement);
+            break;
+        case 'End':
+            event.stopPropagation();
+            event.preventDefault();
+            focusLastSibling(currentElement);
+            break;
+    }
+}
+export function resetFocusableSibling(element) {
+    const focusableSibling = getSiblings(element).find((sibling) => {
+        const button = getGroupItemButton(sibling);
+        return button && button.tabIndex !== -1;
+    });
+    if (focusableSibling) {
+        setItemTabIndex(focusableSibling, -1);
+    }
+}
+export function setFocusTarget(element) {
+    setItemTabIndex(element, 0);
+}
+function focusFirstSibling(currentElement) {
+    const firstFocusableElement = getFirstFocusableElement(currentElement);
+    if (firstFocusableElement) {
+        void firstFocusableElement.guxFocus();
+        void setItemTabIndex(firstFocusableElement, 0);
+        void resetFocusableSibling(firstFocusableElement);
+    }
+}
+function focusLastSibling(currentElement) {
+    const lastFocusableElement = getLastFocusableElement(currentElement);
+    if (lastFocusableElement) {
+        void lastFocusableElement.guxFocus();
+        void setItemTabIndex(lastFocusableElement, 0);
+        void resetFocusableSibling(lastFocusableElement);
+    }
+}
+function focusPreviousSiblingLoop(currentElement) {
+    const previousFocusableElement = currentElement.previousElementSibling;
+    setItemTabIndex(currentElement, -1);
+    if (previousFocusableElement) {
+        void previousFocusableElement.guxFocus();
+        void setItemTabIndex(previousFocusableElement, 0);
+    }
+    else {
+        focusLastSibling(currentElement);
+    }
+}
+function focusNextSiblingLoop(currentElement) {
+    const nextFocusableElement = currentElement.nextElementSibling;
+    setItemTabIndex(currentElement, -1);
+    if (nextFocusableElement) {
+        void nextFocusableElement.guxFocus();
+        void setItemTabIndex(nextFocusableElement, 0);
+    }
+    else {
+        focusFirstSibling(currentElement);
+    }
+}
+function getFirstFocusableElement(currentElement) {
+    let firstFocusableElement = currentElement;
+    while (firstFocusableElement.previousElementSibling !== null) {
+        firstFocusableElement = firstFocusableElement.previousElementSibling;
+    }
+    return firstFocusableElement;
+}
+function getLastFocusableElement(currentElement) {
+    let lastFocusableElement = currentElement;
+    while (lastFocusableElement.nextElementSibling !== null) {
+        lastFocusableElement = lastFocusableElement.nextElementSibling;
+    }
+    return lastFocusableElement;
+}
+function getGroupItemButton(element) {
+    var _a;
+    return (_a = element.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('button');
+}
+function getSiblings(element) {
+    const siblings = Array.from(element.parentElement.children);
+    // Early return for performance when there are no siblings
+    if (siblings.length <= 1) {
+        return [];
+    }
+    return siblings.filter(child => child !== element);
+}
+function setItemTabIndex(element, newIndex) {
+    const button = getGroupItemButton(element);
+    if (button) {
+        button.tabIndex = newIndex;
+    }
+    else {
+        console.log('No button found in the gux-avatar-group-item element');
+    }
+}

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

@@ -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: '06cea2ee177e04b06cbeb787c5e4d9ca146a120d', class: "gux-calendar-beta" }, h("slot", { key: 'bee83ea56f4f17c14376528fabe878e287e66d4b' }), this.renderHeader(), this.renderContent()));
+        return (h("div", { key: '4810ec697a88feab92ed7bb5f0deb725755de699', class: "gux-calendar-beta" }, h("slot", { key: 'cfde02db14b9d5d3fc68905f86ed4718828e0364' }), 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: 'ea48cb42883a8e129c88d39bc26430bb998f7e6d', class: `gux-cta-group gux-${this.align}-align` }, h("slot", { key: 'b3a420b15d08d01b9f640891228c443f93197497', name: "primary" }), h("slot", { key: 'bb98fe2475fb716dda62cfb887a63c3042a10be3', name: "secondary" }), h("slot", { key: '6bf8a3c8152cda870f7d3036c837918f83dee8e1', name: "dismiss" })));
+        return (h("div", { key: '96b385023ac2c33b01b33349d38914cdb3e6c0f2', class: `gux-cta-group gux-${this.align}-align` }, h("slot", { key: '88ae8d58fcca55a91d335285e71260495a8e804a', name: "primary" }), h("slot", { key: 'bf1a700d4ec8f42216c78f335937853d6cd98e59', name: "secondary" }), h("slot", { key: 'f3894780710aeaa6541f8856b19d4062bc37dce4', 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: '9385c8d0c79a8839c2eb3624d17dbb7aa66f0949' }, this.renderDate()));
+        return (h(Host, { key: '844c1c8ec9d4c871aecdf1668c5f421e48d4fd0c' }, 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: '26d5041890230bf99ff1d98916e54d3838e007e7' }, this.renderDateTime()));
+        return (h(Host, { key: '7dc17d0204f9fabcda004ad2cd414181ba3f6170' }, 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: '4dfa8e7f981b91025eae981d669566ffa1253b1a', 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: '12854828d63a76492b1dab9a28c51c8a2801fc37', 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-form/gux-form-description/gux-form-description.js

@@ -4,7 +4,7 @@ import { h } from "@stencil/core";
  */
 export class GuxFormDescription {
     render() {
-        return (h("slot", { key: '94a9998b9411fbf8b09ecaf98f73c1b9a2e53050' }));
+        return (h("slot", { key: 'e4c4c2e660cac80462fb436b5a903d319335917b' }));
     }
     static get is() { return "gux-form-description"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/beta/gux-form/gux-form-fieldset-heading/gux-form-fieldset-heading.js

@@ -4,7 +4,7 @@ import { h } from "@stencil/core";
  */
 export class GuxFormFieldsetHeading {
     render() {
-        return (h("slot", { key: '955753bff72c465f0e72956388a5b358fff36a18' }));
+        return (h("slot", { key: 'aa3dedf40c53c691c895e818925e1c55dda1808a' }));
     }
     static get is() { return "gux-form-fieldset-heading"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/beta/gux-form/gux-form-footer/gux-form-footer.js

@@ -11,9 +11,9 @@ export class GuxFormFooter {
         trackComponent(this.root, { variant: this.placement });
     }
     render() {
-        return (h(Host, { key: 'e029fc31ed5de0869aa0705225162559c53e0705', class: {
+        return (h(Host, { key: 'a10f053969f6e06355ce6201a4644c60b9f6d257', class: {
                 [`gux-form-footer-${this.placement}`]: true
-            } }, h("slot", { key: '3acdbefafd30f736eeee6ef36f64f6e1ad273211' })));
+            } }, h("slot", { key: 'a510ed08050f3ae9f4b3e6499f7199a9c10b1bc5' })));
     }
     static get is() { return "gux-form-footer"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/beta/gux-form/gux-form-heading/gux-form-heading.js

@@ -4,7 +4,7 @@ import { h } from "@stencil/core";
  */
 export class GuxFormHeading {
     render() {
-        return (h("slot", { key: '3c916a8b2173ae6b53b8046c3f925e13d2cf6d34' }));
+        return (h("slot", { key: 'efd15e7076eee788198c8839a636a1eb8921f3b0' }));
     }
     static get is() { return "gux-form-heading"; }
     static get encapsulation() { return "shadow"; }

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

@@ -4,7 +4,7 @@ import { h } from "@stencil/core";
  */
 export class GuxForm {
     render() {
-        return (h("slot", { key: '5ae86892c61c1db5065ac21ebd14f4e81cfd316a' }));
+        return (h("slot", { key: '972101b460b0688fd2c178532cee9f4b022d1551' }));
     }
     static get is() { return "gux-form-beta"; }
     static get encapsulation() { return "shadow"; }

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

@@ -25,7 +25,7 @@ export class GuxIconTooltip {
         return await this.tooltip.hideTooltip();
     }
     render() {
-        return (h("div", { key: '3b20ccaf0e499e8429c53e8c1fb7797f9670a847', class: "gux-icon-tooltip" }, h("gux-screen-reader-beta", { key: '856479e539bc5fa9d31bbecdb515bb3cb12e3480' }, h("slot", { key: 'b2ba5630a1e21a86cdf1a1c88a288be655caecee', name: "content" })), h("gux-icon", { key: '34df8f3f0d589512db100f7dbffae33f1f0c9886', "icon-name": this.iconName, size: "small", decorative: true }), h("gux-tooltip-beta", { key: '13f395f1bc88341ba85d8f4b7ac6e170d42d339c', placement: this.placement, ref: el => (this.tooltip = el) }, h("div", { key: '903935e57e9c178e07cdb04b798dd5bf473f89b3', slot: "content" }, getSlotTextContent(this.root, 'content')))));
+        return (h("div", { key: '9d7877974b1ec769bbabc36e4e6dcb617fe71f13', class: "gux-icon-tooltip" }, h("gux-screen-reader-beta", { key: 'b775e0d3421511c6ab276cd591bb29775d266595' }, h("slot", { key: '0c0a2538bd60553070dd2935432d9bd844267051', name: "content" })), h("gux-icon", { key: '13303179e2856e5e0ef17a1321e08e58aaac3be1', "icon-name": this.iconName, size: "small", decorative: true }), h("gux-tooltip-beta", { key: 'addd341ed182ec261e5d600d1bd4dc8dab351a92', placement: this.placement, ref: el => (this.tooltip = el) }, h("div", { key: '7439c6f444c757405a2386f6e18c2d36e807f2fc', slot: "content" }, getSlotTextContent(this.root, 'content')))));
     }
     static get is() { return "gux-icon-tooltip-beta"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/beta/gux-label-info/gux-label-info.js

@@ -30,7 +30,7 @@ export class GuxLabelInfo {
         return await this.tooltipElement.hideTooltip();
     }
     render() {
-        return (h("div", { key: '002dd520b8963ca31fe898198c1bc461186c5418', class: "gux-label-info" }, h("gux-screen-reader-beta", { key: 'c3dc8f9f95e6d8c0cf72ae06700dea0433f61dbd' }, getSlotTextContent(this.root, 'content')), h("gux-icon", { key: 'fbd08623e72a315950a3d3664c14850fba79e08c', "icon-name": this.getVariantIcon(this.variant), size: "small", decorative: true }), h("gux-tooltip-beta", { key: 'cc8a5475fd40d8e21add82f1b689251831134fc1', placement: this.placement, ref: el => (this.tooltipElement = el) }, h("slot", { key: 'b84d0f31945c0e924e023694a85c53872004f57f', name: "content" }))));
+        return (h("div", { key: '0a8df28e7c2e878e06faacf935173ae36e71a7e8', class: "gux-label-info" }, h("gux-screen-reader-beta", { key: '16b5a6757748bd53eb6f8c0515ff5219daedc38e' }, getSlotTextContent(this.root, 'content')), h("gux-icon", { key: 'd26ebf1df33c1355e3532f9bc6c04bc9fc560f82', "icon-name": this.getVariantIcon(this.variant), size: "small", decorative: true }), h("gux-tooltip-beta", { key: '3d70e832bacb7c4a1863d197c719440bc191c9b2', placement: this.placement, ref: el => (this.tooltipElement = el) }, h("slot", { key: '5a21e16c4064e7226bec0923f568540fbf113eb1', name: "content" }))));
     }
     static get is() { return "gux-label-info-beta"; }
     static get encapsulation() { return "shadow"; }

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

@@ -166,7 +166,7 @@ export class GuxMonthCalendar {
         return (h("gux-month-list", null, monthButtons));
     }
     render() {
-        return (h("div", { key: '1bf08b790a5cdb3279809536c22f21f25febdbc0', class: {
+        return (h("div", { key: '9caf15653919c98d027292a800265c18ad663ed6', class: {
                 'gux-hidden': !this.expanded,
                 'gux-month-calendar': true
             } }, this.renderHeader(), this.renderMonths()));

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

@@ -22,7 +22,7 @@ export class GuxMonthListItem {
         }
     }
     render() {
-        return (h(Host, { key: '0c1de73e9c85b6f2fc0bdd201a7c488d9be4e012', role: "listitem", value: this.value }, h("div", { key: 'c04537773800e63a7968b7f7d64da46a2c3da07e', class: "gux-container" }, h("button", { key: '4caac77c98d9d7aefb2262b2c5d365fe763fca08', class: { 'gux-selected': this.selected }, type: "button", tabIndex: -1, disabled: this.disabled }, h("slot", { key: 'ccb35f53997ac2d353df127d8dd6208ab2d07727' })))));
+        return (h(Host, { key: '83c6451801cc01f11916968c5a7fbf8268e7fdaa', role: "listitem", value: this.value }, h("div", { key: 'd60137a28ca16e4cbb4750d7e4352da99645b146', class: "gux-container" }, h("button", { key: '2087bf628ae2c59cf72b4507ce1bba3deaf5484b', class: { 'gux-selected': this.selected }, type: "button", tabIndex: -1, disabled: this.disabled }, h("slot", { key: '2271fc3159882a272ca830df30ec18b521867b11' })))));
     }
     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: 'e166432f0a713540f4c1d23e48e0d843adb7161d', role: "list" }, h("slot", { key: 'a378cb4ca462756dccb95f15c991c215d8d436d0' })));
+        return (h(Host, { key: '73337930f8168b2cf3ea19e758840c4d73ede824', role: "list" }, h("slot", { key: '4cb56de3a3999f681f8706eecf1a8311d9aca3f0' })));
     }
     static get is() { return "gux-month-list"; }
     static get encapsulation() { return "shadow"; }

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

@@ -200,7 +200,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: '6d0e344fb180a8d62bc065e373629c47dc097ae5', expanded: this.expanded, disabled: this.disabled, "exceed-target-width": true }, this.renderTarget(), this.renderPopup()));
+        return (h("gux-popup", { key: '3e874f28af6bae4dd53e4f805751401fa48b2fb3', 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"; }

package/dist/collection/components/beta/gux-phone-input/gux-phone-input.js

@@ -364,7 +364,7 @@ export class GuxPhoneInput {
         return (h("div", { slot: "popup", class: "gux-listbox-container" }, h("gux-listbox", { "aria-label": this.i18n('regionDropdown'), value: this.region ? this.region.alpha2Code : '' }, this.regionOptions)));
     }
     render() {
-        return (h("gux-popup", { key: '54e66bedfdede08e3aafa707cd56d996d164b138', expanded: this.expanded, disabled: this.disabled, "exceed-target-width": true }, this.renderTarget(), this.renderPopup()));
+        return (h("gux-popup", { key: '88fda2068da55381d5ac83f0853463c623d79c4a', expanded: this.expanded, disabled: this.disabled, "exceed-target-width": true }, this.renderTarget(), this.renderPopup()));
     }
     static get is() { return "gux-phone-input-beta"; }
     static get encapsulation() { return "shadow"; }