genesys-spark-components 4.111.5 → 4.112.0

package/dist/cjs/gux-avatar-group-beta.cjs.entry.js

@@ -3,39 +3,66 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-2dd05ef3.js');
-const usage = require('./usage-3519371c.js');
+const usage = require('./usage-3dcfa17c.js');
 const logError = require('./log-error-7b9d4b57.js');
-const guxAvatarGroup_service = require('./gux-avatar-group.service-c18a548f.js');
+const guxAvatarGroup_service = require('./gux-avatar-group.service-245cf1b7.js');
+require('./get-closest-element-9e41d6b9.js');
 
-const guxAvatarGroupCss = ":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}";
+const guxAvatarGroupCss = ":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:var(--gse-semantic-focusOutline-md-borderWidth) solid var(--gse-semantic-border-focus);outline-offset:var(--gse-semantic-focusOutline-offset)}";
 const GuxAvatarGroupBetaStyle0 = guxAvatarGroupCss;
 
 const GuxAvatarGroup = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        this.processedGroupItems = [];
+        this.quantity = 7;
     }
     async componentWillLoad() {
-        usage.trackComponent(this.root);
-        if (this.root.querySelectorAll('gux-avatar-group-item-beta').length === 0) {
-            logError.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.');
-        }
+        usage.trackComponent(this.root, { variant: this.quantity.toString() });
     }
     componentDidLoad() {
         this.setInitialFocusTarget();
     }
+    componentWillRender() {
+        this.processGroupItems();
+        this.hideOverflowGroupItems();
+    }
+    onMouseOver(event) {
+        this.hideCurrentTooltip(event);
+    }
+    getGroupItems() {
+        return Array.from(this.root.children);
+    }
     setInitialFocusTarget() {
-        const groupItems = Array.from(this.root.children);
+        const groupItems = this.getGroupItems();
         if (groupItems.length > 0) {
             const firstGroupItem = groupItems[0];
             guxAvatarGroup_service.setFocusTarget(firstGroupItem);
         }
     }
-    onMouseOver(event) {
-        this.hideCurrentTooltip(event);
+    processGroupItems() {
+        const groupItems = this.getGroupItems();
+        this.validateChildElements(groupItems);
+        this.processedGroupItems = groupItems.map((item, index) => {
+            var _a, _b, _c;
+            return {
+                img: (_a = item.querySelector('img')) !== null && _a !== void 0 ? _a : null,
+                name: (_b = item === null || item === void 0 ? void 0 : item.name) !== null && _b !== void 0 ? _b : '',
+                accent: (_c = item === null || item === void 0 ? void 0 : item.accent) !== null && _c !== void 0 ? _c : null,
+                isOverflow: index >= this.quantity,
+                groupItem: item
+            };
+        });
+    }
+    hideOverflowGroupItems() {
+        const overflowItems = this.processedGroupItems.filter(item => item.isOverflow);
+        overflowItems.forEach(item => {
+            item.groupItem.setAttribute('hidden', '');
+        });
     }
     hideCurrentTooltip(event) {
         const target = event.target;
-        const groupItems = Array.from(this.root.children);
+        const groupItems = this.getGroupItems();
         const focusedChild = groupItems.find(child => child.matches(':focus-within'));
         if (focusedChild && focusedChild !== target) {
             focusedChild.hideTooltip();
@@ -43,13 +70,37 @@ const GuxAvatarGroup = class {
     }
     handleClick(event) {
         const clickedElement = event.target;
-        guxAvatarGroup_service.resetFocusableSibling(clickedElement);
-        guxAvatarGroup_service.setFocusTarget(clickedElement);
+        if (clickedElement.tagName === 'GUX-AVATAR-GROUP-ITEM-BETA' &&
+            !clickedElement.hasAttribute('hidden')) {
+            guxAvatarGroup_service.resetFocusableSibling(clickedElement);
+            guxAvatarGroup_service.setFocusTarget(clickedElement);
+        }
+    }
+    validateChildElements(childElements) {
+        if (childElements.length === 0) {
+            logError.logWarn(this.root, 'gux-avatar-group-beta: No child elements detected. Please add some gux-avatar-item-beta tags to slot');
+        }
+        const validTagNames = ['GUX-AVATAR-GROUP-ITEM-BETA'];
+        const invalidElements = childElements.some(el => !validTagNames.includes(el.tagName));
+        if (invalidElements) {
+            logError.logWarn(this.root, 'gux-avatar-group-beta: Invalid child element detected. All child elements must be either buttons, anchor tags or gux-avatar-beta components');
+        }
+    }
+    renderOverflowMenu() {
+        if (this.root.children.length > this.quantity) {
+            const overflowItems = this.processedGroupItems.filter(item => item.isOverflow);
+            return (index.h("gux-avatar-overflow-beta", null, overflowItems.map(item => {
+                var _a, _b;
+                return (index.h("gux-avatar-overflow-item-beta", { name: item.name, accent: item.accent, onClick: () => item.groupItem.click() }, item.img ? (index.h("img", { slot: "image", src: (_a = item.img) === null || _a === void 0 ? void 0 : _a.src, alt: (_b = item.img) === null || _b === void 0 ? void 0 : _b.alt })) : null));
+            })));
+        }
+        else {
+            return null;
+        }
     }
     render() {
-        return (index.h(index.Host, { key: 'a0c74e33fa71e345201ab4c1f0cea37fd767f40a', role: "menu", onClick: this.handleClick.bind(this) }, index.h("slot", { key: '761b86e5d15febdb0334abd3bf390042643e7d68' })));
+        return (index.h(index.Host, { key: 'fd252cb40f60c329c1c8330a8df415e3fe0ce86a', role: "menu", onClick: this.handleClick.bind(this) }, index.h("slot", { key: '754b66b2e4024abba062e2a9aa0cbe3933b75139' }), this.renderOverflowMenu()));
     }
-    static get delegatesFocus() { return true; }
     get root() { return index.getElement(this); }
 };
 GuxAvatarGroup.style = GuxAvatarGroupBetaStyle0;

package/dist/cjs/gux-avatar-group-item-beta.cjs.entry.js

@@ -3,10 +3,11 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-2dd05ef3.js');
-const usage = require('./usage-3519371c.js');
+const usage = require('./usage-3dcfa17c.js');
 const logError = require('./log-error-7b9d4b57.js');
-const guxAvatarGroup_service = require('./gux-avatar-group.service-c18a548f.js');
-const generateInitials = require('./generate-initials-5571e9d5.js');
+const guxAvatarGroup_service = require('./gux-avatar-group.service-245cf1b7.js');
+const guxAvatar_service = require('./gux-avatar.service-b4dcfcab.js');
+require('./get-closest-element-9e41d6b9.js');
 
 const guxAvatarGroupItemCss = "::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-focusOutline-md-borderWidth) solid var(--gse-semantic-border-focus);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}";
 const GuxAvatarGroupItemBetaStyle0 = guxAvatarGroupItemCss;
@@ -23,13 +24,6 @@ const GuxAvatarGroupItem = class {
     componentDidLoad() {
         this.validatingInputs();
     }
-    /*
-     * Focus button element
-     */
-    // eslint-disable-next-line @typescript-eslint/require-await
-    async guxFocus() {
-        this.buttonElement.focus();
-    }
     /*
      * Hide tooltip
      */
@@ -45,16 +39,6 @@ const GuxAvatarGroupItem = class {
         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) {
@@ -65,12 +49,13 @@ const GuxAvatarGroupItem = class {
         }
     }
     render() {
-        return (index.h("button", { key: '5ac64c971a6d31b621ec5949bebd51eca93f5b6b', type: "button", role: "menuitem", "aria-label": this.name, tabIndex: -1, ref: el => (this.buttonElement = el), class: {
+        return (index.h(index.Host, { key: '2ecedaa5f3705fcece1c0bba087e960d3c0e8393', role: "menuitem" }, index.h("button", { key: '0e2f5760551f46ca5ec394a87c85c5bb962f664e', type: "button", "aria-label": this.name, tabIndex: -1, class: {
                 'gux-avatar': true,
-                [this.getAccent()]: true,
+                [guxAvatar_service.getAvatarAccentClass(this.accent, this.name)]: true,
                 'gux-last-item': this.isLastItemInGroup()
-            } }, index.h("slot", { key: '58ec799cad023f20bc43fe4dc9b18320155f0613', name: "image" }, index.h("span", { key: '59104f19f6c9aab2771354bb4a39cc3aa88f45bd', class: "gux-avatar-initials", "aria-hidden": "true" }, generateInitials.generateInitials(this.name))), index.h("gux-tooltip-beta", { key: '2adbb48a98e4669be0f7f18d2312b5c7018b35a6', "aria-hidden": "true", "visual-only": true, placement: "top", ref: el => (this.tooltip = el) }, index.h("div", { key: 'e5b40f15d921448fe87089c48938172c0d2f96c0', slot: "content" }, this.name))));
+            } }, index.h("slot", { key: 'c1542da304401940307eb9fced69479bce16a966', name: "image" }, index.h("span", { key: '4d951124cb550e7c0fad0764779720a87072f0a7', class: "gux-avatar-initials", "aria-hidden": "true" }, guxAvatar_service.generateInitials(this.name))), index.h("gux-tooltip-beta", { key: '4c575880347af40da4f888cbe16557eda28a349f', "aria-hidden": "true", "visual-only": true, placement: "top", ref: el => (this.tooltip = el) }, index.h("div", { key: '486bea5b6ff4cc0a260a49fe0b5488619090414f', slot: "content" }, this.name)))));
     }
+    static get delegatesFocus() { return true; }
     get root() { return index.getElement(this); }
 };
 GuxAvatarGroupItem.style = GuxAvatarGroupItemBetaStyle0;

package/dist/cjs/{gux-avatar-group.service-c18a548f.js → gux-avatar-group.service-245cf1b7.js}

@@ -1,13 +1,18 @@
 'use strict';
 
+const getClosestElement = require('./get-closest-element-9e41d6b9.js');
+const logError = require('./log-error-7b9d4b57.js');
+
 function groupKeyboardNavigation(event, currentElement) {
     switch (event.key) {
         case 'ArrowLeft':
+        case 'ArrowUp':
             event.stopPropagation();
             event.preventDefault();
             focusPreviousSiblingLoop(currentElement);
             break;
         case 'ArrowRight':
+        case 'ArrowDown':
             event.stopPropagation();
             event.preventDefault();
             focusNextSiblingLoop(currentElement);
@@ -25,7 +30,7 @@ function groupKeyboardNavigation(event, currentElement) {
     }
 }
 function resetFocusableSibling(element) {
-    const focusableSibling = getSiblings(element).find((sibling) => {
+    const focusableSibling = getGroupItems(element).find((sibling) => {
         const button = getGroupItemButton(sibling);
         return button && button.tabIndex !== -1;
     });
@@ -39,24 +44,27 @@ function setFocusTarget(element) {
 function focusFirstSibling(currentElement) {
     const firstFocusableElement = getFirstFocusableElement(currentElement);
     if (firstFocusableElement) {
-        void firstFocusableElement.guxFocus();
-        void setItemTabIndex(firstFocusableElement, 0);
+        void firstFocusableElement.focus();
         void resetFocusableSibling(firstFocusableElement);
+        void setItemTabIndex(firstFocusableElement, 0);
     }
 }
 function focusLastSibling(currentElement) {
     const lastFocusableElement = getLastFocusableElement(currentElement);
     if (lastFocusableElement) {
-        void lastFocusableElement.guxFocus();
-        void setItemTabIndex(lastFocusableElement, 0);
+        void lastFocusableElement.focus();
         void resetFocusableSibling(lastFocusableElement);
+        void setItemTabIndex(lastFocusableElement, 0);
     }
 }
 function focusPreviousSiblingLoop(currentElement) {
-    const previousFocusableElement = currentElement.previousElementSibling;
+    const groupItems = getGroupItems(currentElement);
+    const currentElementIndex = groupItems.findIndex((item) => item === currentElement);
+    const previousIndex = (currentElementIndex - 1) % groupItems.length;
+    const previousFocusableElement = groupItems[previousIndex];
     setItemTabIndex(currentElement, -1);
     if (previousFocusableElement) {
-        void previousFocusableElement.guxFocus();
+        void previousFocusableElement.focus();
         void setItemTabIndex(previousFocusableElement, 0);
     }
     else {
@@ -64,41 +72,38 @@ function focusPreviousSiblingLoop(currentElement) {
     }
 }
 function focusNextSiblingLoop(currentElement) {
-    const nextFocusableElement = currentElement.nextElementSibling;
+    const groupItems = getGroupItems(currentElement);
+    const currentElementIndex = groupItems.findIndex((item) => item === currentElement);
+    const nextIndex = (currentElementIndex + 1) % groupItems.length;
+    if (nextIndex === 0) {
+        focusFirstSibling(currentElement);
+    }
+    const nextFocusableElement = groupItems[nextIndex];
     setItemTabIndex(currentElement, -1);
-    if (nextFocusableElement) {
-        void nextFocusableElement.guxFocus();
+    if (nextFocusableElement !== null) {
+        void nextFocusableElement.focus();
         void setItemTabIndex(nextFocusableElement, 0);
     }
-    else {
-        focusFirstSibling(currentElement);
-    }
 }
 function getFirstFocusableElement(currentElement) {
-    let firstFocusableElement = currentElement;
-    while (firstFocusableElement.previousElementSibling !== null) {
-        firstFocusableElement = firstFocusableElement.previousElementSibling;
-    }
-    return firstFocusableElement;
+    return getGroupItems(currentElement)[0];
 }
 function getLastFocusableElement(currentElement) {
-    let lastFocusableElement = currentElement;
-    while (lastFocusableElement.nextElementSibling !== null) {
-        lastFocusableElement = lastFocusableElement.nextElementSibling;
-    }
-    return lastFocusableElement;
+    const groupItems = getGroupItems(currentElement);
+    return groupItems[groupItems.length - 1];
 }
 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 [];
+function getGroupItems(element) {
+    const group = getClosestElement.getClosestElement('gux-avatar-group-beta', element);
+    const slottedItems = Array.from(group.querySelectorAll('gux-avatar-group-item-beta')).filter(child => !isHidden(child));
+    const overflow = group.shadowRoot.querySelector('gux-avatar-overflow-beta');
+    if (overflow) {
+        slottedItems.push(overflow);
     }
-    return siblings.filter(child => child !== element);
+    return slottedItems;
 }
 function setItemTabIndex(element, newIndex) {
     const button = getGroupItemButton(element);
@@ -106,9 +111,12 @@ function setItemTabIndex(element, newIndex) {
         button.tabIndex = newIndex;
     }
     else {
-        console.log('No button found in the gux-avatar-group-item element');
+        logError.logWarn(element, 'gux-avatar-group-beta: No button found in the element');
     }
 }
+function isHidden(element) {
+    return element.hasAttribute('hidden');
+}
 
 exports.groupKeyboardNavigation = groupKeyboardNavigation;
 exports.resetFocusableSibling = resetFocusableSibling;

package/dist/cjs/gux-avatar-overflow-beta_2.cjs.entry.js

@@ -0,0 +1,285 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-2dd05ef3.js');
+const floatingUi_dom_esm = require('./floating-ui.dom.esm-471324c9.js');
+const onClickOutside = require('./on-click-outside-bb55ad5e.js');
+const usage = require('./usage-3dcfa17c.js');
+const logError = require('./log-error-7b9d4b57.js');
+const guxAvatarGroup_service = require('./gux-avatar-group.service-245cf1b7.js');
+const afterNextRender = require('./after-next-render-162425fe.js');
+const guxAvatar_service = require('./gux-avatar.service-b4dcfcab.js');
+require('./get-closest-element-9e41d6b9.js');
+
+const guxAvatarOverflowCss = ":host{display:block;margin-inline-end:var(--gse-ui-avatar-groupSet-gap)}.gux-avatar-overflow{position:relative;box-sizing:border-box;inline-size:100%;padding:0;margin:0;line-height:0px;cursor:pointer;background:none;border:none;border-radius:50%}.gux-avatar-overflow:focus-visible{outline:var(--gse-semantic-focusOutline-md-borderWidth) solid var(--gse-semantic-border-focus);outline-offset:var(--gse-semantic-focusOutline-offset)}.gux-avatar-overflow:hover,.gux-avatar-overflow:focus{z-index:var(--gse-semantic-zIndex-showFocus)}.gux-avatar-overflow .gux-avatar-overflow-wrapper{position:relative;display:flex}.gux-avatar-overflow .gux-avatar-overflow-wrapper .gux-avatar-overflow-content{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);overflow:hidden;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-core-lineHeight-matchFontSize);color:var(--gse-ui-avatar-media-initialsForeground-default);background-color:var(--gse-ui-avatar-media-initialsBackground-overflowCount);border-radius:50%}.gux-menu-wrapper{position:fixed;inset-block-start:0;inset-inline-start:0;z-index:var(--gse-semantic-zIndex-popup);flex-direction:column;max-block-size:var(--gse-ui-menu-maxHeight);padding:var(--gse-ui-menu-padding);margin:0;overflow-y:auto;visibility:hidden;background-color:var(--gse-ui-menu-backgroundColor);border:none;border:var(--gse-semantic-container-edges-borderWidth) solid var(--gse-semantic-border-container-edges-default);border-radius:var(--gse-ui-menu-borderRadius);box-shadow:var(--gse-ui-menu-boxShadow-offsetX) var(--gse-ui-menu-boxShadow-offsetY) var(--gse-ui-menu-boxShadow-blur) var(--gse-ui-menu-boxShadow-spread) var(--gse-ui-menu-boxShadow-color)}.gux-menu-wrapper.gux-shown{visibility:visible}";
+const GuxAvatarOverflowBetaStyle0 = guxAvatarOverflowCss;
+
+var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                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;
+};
+const GuxAvatarOverflow = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.delayTime = 250;
+        this.count = 0;
+        this.expanded = false;
+    }
+    async componentWillLoad() {
+        usage.trackComponent(this.root);
+    }
+    componentDidLoad() {
+        if (this.expanded) {
+            this.runUpdatePosition();
+        }
+    }
+    componentDidUpdate() {
+        if (this.expanded) {
+            this.runUpdatePosition();
+        }
+        else if (this.cleanupUpdatePosition) {
+            this.cleanupUpdatePosition();
+        }
+    }
+    disconnectedCallback() {
+        clearTimeout(this.focusDelayTimeout);
+        clearTimeout(this.hideDelayTimeout);
+        if (this.cleanupUpdatePosition) {
+            this.cleanupUpdatePosition();
+        }
+    }
+    onClickOutside() {
+        this.expanded = false;
+    }
+    onKeydown(event) {
+        guxAvatarGroup_service.groupKeyboardNavigation(event, this.root);
+        switch (event.key) {
+            case 'Escape': {
+                this.hide();
+                const target = event.target;
+                if (target.tagName === 'GUX-AVATAR-OVERFLOW-ITEM-BETA') {
+                    this.focusDelayTimeout = afterNextRender.afterNextRenderTimeout(() => {
+                        var _a;
+                        (_a = this.overflowButtonElement) === null || _a === void 0 ? void 0 : _a.focus();
+                    });
+                }
+                break;
+            }
+            case 'Tab':
+                this.hide();
+                break;
+        }
+    }
+    onClick(e) {
+        e.stopPropagation();
+        const target = e.target;
+        if (target.tagName === 'GUX-AVATAR-OVERFLOW-ITEM-BETA') {
+            // Reset scroll on menu when clicked to avoid scroll jump when reopened
+            this.menuElement.scrollTop = 0;
+            this.expanded = false;
+        }
+    }
+    // eslint-disable-next-line @typescript-eslint/require-await
+    async guxClose() {
+        this.hide();
+    }
+    runUpdatePosition() {
+        if (this.root.isConnected) {
+            this.cleanupUpdatePosition = floatingUi_dom_esm.autoUpdate(this.overflowButtonElement, this.menuElement, () => this.updatePosition(), {
+                ancestorScroll: true,
+                elementResize: true,
+                animationFrame: true,
+                ancestorResize: true
+            });
+        }
+        else {
+            this.disconnectedCallback();
+        }
+    }
+    updatePosition() {
+        if (this.root) {
+            void floatingUi_dom_esm.computePosition(this.overflowButtonElement, this.menuElement, {
+                placement: 'bottom-start',
+                strategy: 'fixed',
+                middleware: [
+                    floatingUi_dom_esm.offset({
+                        mainAxis: 4,
+                        crossAxis: 4
+                    })
+                ]
+            }).then(({ x, y }) => {
+                Object.assign(this.menuElement.style, {
+                    left: `${x}px`,
+                    top: `${y}px`
+                });
+            });
+        }
+    }
+    getCount() {
+        const menuItems = Array.from(this.root.children);
+        if (menuItems.some(item => item.tagName !== 'GUX-AVATAR-OVERFLOW-ITEM-BETA')) {
+            logError.logWarn(this.root, 'Only gux-avatar-overflow-item-beta elements are allowed as children.');
+        }
+        if (menuItems) {
+            return menuItems.length;
+        }
+    }
+    toggleOverflowMenu() {
+        if (!this.expanded) {
+            this.show();
+        }
+        else {
+            this.hide();
+        }
+    }
+    show() {
+        clearTimeout(this.hideDelayTimeout);
+        this.expanded = true;
+        this.hideDelayTimeout = afterNextRender.afterNextRenderTimeout(() => {
+            this.focusOnMenu();
+        });
+    }
+    hide() {
+        if (this.expanded) {
+            this.hideDelayTimeout = setTimeout(() => {
+                this.expanded = false;
+            }, this.delayTime);
+        }
+    }
+    focusOnMenu() {
+        const overflowItems = Array.from(this.root.children);
+        const nextFocusableElement = overflowItems[0];
+        void nextFocusableElement.focus();
+    }
+    render() {
+        return (index.h(index.Host, { key: '1eca1d8373f1f8bce38195b234b2aa6c85489d66', role: "menuitem" }, index.h("button", { key: '52681498cf89bd86b0d0e906009feccf49254424', class: "gux-avatar-overflow", ref: el => (this.overflowButtonElement = el), onClick: () => this.toggleOverflowMenu(), tabIndex: -1, "aria-haspopup": "true", "aria-expanded": this.expanded.toString() }, index.h("span", { key: 'e542e692be6b5e40794526311b35647dafa77a5a', class: "gux-avatar-overflow-wrapper" }, index.h("span", { key: 'fcf9797285a72682a4a676f980f9da0ebf98ff55', class: "gux-avatar-overflow-content" }, " +", this.getCount()))), index.h("div", { key: '390fe4b03689c2390022d871bcdf46cfeae773c3', class: {
+                'gux-menu-wrapper': true,
+                'gux-shown': this.expanded
+            }, ref: el => (this.menuElement = el) }, index.h("div", { key: 'e9775de055cf867360eb43ef87b56c1e4846d283', role: "menu", class: "gux-menu-content" }, index.h("slot", { key: 'f87d83d682723774826e175ddac0142daa5340f5' })))));
+    }
+    static get delegatesFocus() { return true; }
+    get root() { return index.getElement(this); }
+};
+__decorate([
+    onClickOutside.OnClickOutside({ triggerEvents: 'mousedown' })
+], GuxAvatarOverflow.prototype, "onClickOutside", null);
+GuxAvatarOverflow.style = GuxAvatarOverflowBetaStyle0;
+
+function overflowNavigation(event, currentElement) {
+    switch (event.key) {
+        case 'ArrowUp':
+        case 'ArrowLeft':
+            event.stopPropagation();
+            event.preventDefault();
+            focusPreviousSiblingLoop(currentElement);
+            break;
+        case 'ArrowDown':
+        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;
+    }
+}
+function focusFirstSibling(currentElement) {
+    const firstFocusableElement = getFirstFocusableElement(currentElement);
+    if (firstFocusableElement) {
+        void firstFocusableElement.focus();
+    }
+}
+function focusLastSibling(currentElement) {
+    const lastFocusableElement = getLastFocusableElement(currentElement);
+    if (lastFocusableElement) {
+        void lastFocusableElement.focus();
+    }
+}
+function focusPreviousSiblingLoop(currentElement) {
+    const previousFocusableElement = currentElement.previousElementSibling;
+    if (previousFocusableElement) {
+        void previousFocusableElement.focus();
+    }
+    else {
+        focusLastSibling(currentElement);
+    }
+}
+function focusNextSiblingLoop(currentElement) {
+    const nextFocusableElement = currentElement.nextElementSibling;
+    if (nextFocusableElement) {
+        void nextFocusableElement.focus();
+    }
+    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;
+}
+
+const guxAvatarOverflowItemCss = "::slotted(img){inline-size:100%;block-size:100%;object-fit:cover}button{all:unset;box-sizing:border-box;display:flex;gap:var(--gse-ui-menu-option-gap);align-items:center;inline-size:100%;min-block-size:var(--gse-ui-menu-option-height);padding:var(--gse-ui-menu-option-padding);font-family:var(--gse-ui-menu-option-label-default-text-fontFamily);font-size:var(--gse-ui-menu-option-label-default-text-fontSize);font-weight:var(--gse-ui-menu-option-label-default-text-fontWeight);line-height:var(--gse-ui-menu-option-label-default-text-lineHeight);color:var(--gse-ui-menu-option-label-foregroundColor);word-wrap:break-word;cursor:pointer;background-color:var(--gse-ui-menu-option-default-backgroundColor);border:none;outline:none;outline-offset:calc(var(--gse-ui-menu-option-focus-border-width) * -1)}button:focus-visible{border-radius:var(--gse-semantic-focusOutline-sm-borderRadius);outline:var(--gse-ui-menu-option-focus-border-width) var(--gse-ui-menu-option-focus-border-style) var(--gse-ui-menu-option-focus-border-color)}button:hover{background:var(--gse-ui-menu-option-hover-backgroundColor)}button:active{font-family:var(--gse-ui-menu-option-label-active-text-fontFamily);font-size:var(--gse-ui-menu-option-label-active-text-fontSize);font-weight:var(--gse-ui-menu-option-label-active-text-fontWeight);line-height:var(--gse-ui-menu-option-label-active-text-lineHeight);background:var(--gse-ui-menu-option-selected-backgroundColor)}button .gux-avatar{box-sizing:border-box;display:flex;align-items:center;justify-content:center;inline-size:var(--gse-ui-avatar-xsmall-content-size);block-size:var(--gse-ui-avatar-xsmall-content-size);padding:0;margin:0;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%}button .gux-avatar .gux-avatar-initials{font-family:var(--gse-ui-avatar-small-initials-fontFamily);font-size:var(--gse-ui-avatar-xsmall-initials-fontSize);font-weight:var(--gse-ui-avatar-xsmall-initials-fontWeight);line-height:var(--gse-ui-avatar-small-initials-lineHeight);text-transform:uppercase}button .gux-avatar.gux-accent-1{color:var(--gse-ui-avatar-media-initialsForeground-inverse);background-color:var(--gse-ui-avatar-media-initialsBackground-accent1)}button .gux-avatar.gux-accent-2{color:var(--gse-ui-avatar-media-initialsForeground-default);background-color:var(--gse-ui-avatar-media-initialsBackground-accent2)}button .gux-avatar.gux-accent-3{color:var(--gse-ui-avatar-media-initialsForeground-inverse);background-color:var(--gse-ui-avatar-media-initialsBackground-accent3)}button .gux-avatar.gux-accent-4{color:var(--gse-ui-avatar-media-initialsForeground-inverse);background-color:var(--gse-ui-avatar-media-initialsBackground-accent4)}button .gux-avatar.gux-accent-5{color:var(--gse-ui-avatar-media-initialsForeground-default);background-color:var(--gse-ui-avatar-media-initialsBackground-accent5)}button .gux-avatar.gux-accent-6{color:var(--gse-ui-avatar-media-initialsForeground-default);background-color:var(--gse-ui-avatar-media-initialsBackground-accent6)}button .gux-avatar.gux-accent-7{color:var(--gse-ui-avatar-media-initialsForeground-inverse);background-color:var(--gse-ui-avatar-media-initialsBackground-accent7)}button .gux-avatar.gux-accent-8{color:var(--gse-ui-avatar-media-initialsForeground-default);background-color:var(--gse-ui-avatar-media-initialsBackground-accent8)}button .gux-avatar.gux-accent-9{color:var(--gse-ui-avatar-media-initialsForeground-default);background-color:var(--gse-ui-avatar-media-initialsBackground-accent9)}button .gux-avatar.gux-accent-10{color:var(--gse-ui-avatar-media-initialsForeground-default);background-color:var(--gse-ui-avatar-media-initialsBackground-accent10)}button .gux-avatar.gux-accent-11{color:var(--gse-ui-avatar-media-initialsForeground-default);background-color:var(--gse-ui-avatar-media-initialsBackground-accent11)}button .gux-avatar.gux-accent-12{color:var(--gse-ui-avatar-media-initialsForeground-inverse);background-color:var(--gse-ui-avatar-media-initialsBackground-accent12)}button .gux-avatar.gux-accent-inherit{color:inherit;background-color:inherit}";
+const GuxAvatarOverflowItemBetaStyle0 = guxAvatarOverflowItemCss;
+
+const GuxAvatarOverflowItem = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.name = undefined;
+        this.accent = 'auto';
+    }
+    async componentWillLoad() {
+        usage.trackComponent(this.root);
+    }
+    componentDidLoad() {
+        this.validatingInputs();
+    }
+    onKeydown(event) {
+        overflowNavigation(event, this.root);
+    }
+    validatingInputs() {
+        const avatarImage = this.root.querySelector('img');
+        if (!this.name) {
+            logError.logWarn(this.root, 'Name prop is required');
+        }
+        if (avatarImage && !avatarImage.getAttribute('alt')) {
+            logError.logWarn(this.root, 'Alt attribute is required for slotted image.');
+        }
+    }
+    render() {
+        return (index.h(index.Host, { key: '9a482a55db83dd77b4275313b5e91e6e35abbf67', role: "menuitem" }, index.h("button", { key: 'efb50ab018339921fff8605f18e94e3e1bb6bd85', type: "button", "aria-label": this.name, tabIndex: -1 }, index.h("span", { key: 'a9c32970cd2550b834c176f8552fe50d3c8db595', class: {
+                'gux-avatar': true,
+                [guxAvatar_service.getAvatarAccentClass(this.accent, this.name)]: true
+            } }, index.h("slot", { key: 'c8268952f6531f9b3cdaf11b54bb5ca209c6df6b', name: "image" }, index.h("span", { key: '143d09b06886a32bae9343b5de8474ce4f036c85', class: "gux-avatar-initials", "aria-hidden": "true" }, guxAvatar_service.generateInitials(this.name)))), index.h("span", { key: '530801a4712419301043e9303544266dc5f7b021' }, this.name))));
+    }
+    static get delegatesFocus() { return true; }
+    get root() { return index.getElement(this); }
+};
+GuxAvatarOverflowItem.style = GuxAvatarOverflowItemBetaStyle0;
+
+exports.gux_avatar_overflow_beta = GuxAvatarOverflow;
+exports.gux_avatar_overflow_item_beta = GuxAvatarOverflowItem;

package/dist/cjs/gux-avatar.service-b4dcfcab.js

@@ -0,0 +1,25 @@
+'use strict';
+
+function generateInitials(name) {
+    var _a, _b, _c;
+    const nameArray = (_a = name === null || name === void 0 ? void 0 : name.split(' ')) !== null && _a !== void 0 ? _a : [];
+    if (nameArray.length > 1) {
+        return nameArray[0].charAt(0) + nameArray[nameArray.length - 1].charAt(0);
+    }
+    return ((_b = nameArray[0]) === null || _b === void 0 ? void 0 : _b.charAt(0)) + ((_c = nameArray[0]) === null || _c === void 0 ? void 0 : _c.charAt(1));
+}
+
+const GUX_AVATAR_AUTO_ACCENT = [
+    0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12
+];
+function getAvatarAccentClass(accent, name) {
+    if (accent !== 'auto') {
+        return `gux-accent-${accent}`;
+    }
+    const hashedName = name === null || name === void 0 ? void 0 : name.split('').reduce((acc, char) => acc + char.charCodeAt(0), 0);
+    const hashedNameAccent = (hashedName % Math.max(...GUX_AVATAR_AUTO_ACCENT)).toString();
+    return `gux-accent-${hashedNameAccent}`;
+}
+
+exports.generateInitials = generateInitials;
+exports.getAvatarAccentClass = getAvatarAccentClass;

package/dist/cjs/gux-badge.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-2dd05ef3.js');
-const usage = require('./usage-3519371c.js');
+const usage = require('./usage-3dcfa17c.js');
 const index$1 = require('./index-d7208697.js');
 require('./get-closest-element-9e41d6b9.js');
 
@@ -63,7 +63,7 @@ const GuxBadge = class {
         this.i18n = await index$1.buildI18nForComponent(this.root, translationResources);
     }
     render() {
-        return (index.h("div", { key: '647320e4db9893f221b3b8bb99d9b090d7837d61', class: {
+        return (index.h("div", { key: 'edf253557ca4599511a35bb4509e502001b661d4', class: {
                 'gux-badge': true,
                 [`gux-${this.accent}`]: true,
                 'gux-bold': this.bold