genesys-spark-components 4.111.6 → 4.112.0

package/dist/esm/gux-avatar-beta.entry.js

@@ -1,8 +1,8 @@
 import { h, r as registerInstance, g as getElement } from './index-feb7be20.js';
-import { t as trackComponent } from './usage-d75e6b4b.js';
+import { t as trackComponent } from './usage-0a3bab03.js';
 import { a as logWarn } from './log-error-274efeb7.js';
 import { b as buildI18nForComponent } from './index-6fa3d266.js';
-import { g as generateInitials } from './generate-initials-4f347529.js';
+import { g as generateInitials, a as getAvatarAccentClass } from './gux-avatar.service-43c1b4e1.js';
 import './get-closest-element-728b9f18.js';
 
 function renderZoomSVG() {
@@ -67,15 +67,6 @@ const GuxAvatar = class {
         this.notifications = false;
         this.ucIntegration = 'none';
     }
-    getAccent() {
-        if (this.accent !== 'auto') {
-            return this.accent;
-        }
-        const hashedName = this.name
-            .split('')
-            .reduce((acc, char) => acc + char.charCodeAt(0), 0);
-        return (hashedName % 12).toString();
-    }
     validatingInputs() {
         const avatarImage = this.root.querySelector('img');
         if (!this.name) {
@@ -197,13 +188,13 @@ const GuxAvatar = class {
     }
     render() {
         return [
-            h("div", { key: '43767407df396560f8f4a827766c6a35a334b389', class: {
+            h("div", { key: 'cef226c15517c37cc2729cecf7bb1e06166d4fa9', class: {
                     'gux-avatar': true,
                     [`gux-${this.presence}`]: this.ring || this.badge,
                     [`gux-${this.size}`]: true,
                     'gux-ring': this.ring,
-                    [`gux-accent-${this.getAccent()}`]: true
-                } }, h("div", { key: '36fdead01ad9c9bfe735b9038bd53ad1d1345f9e', class: "gux-content" }, h("slot", { key: '4f39fd28959ff24f4d019af605f3d949cbb83db3', name: "image" }, h("abbr", { key: '8d5d44fb78c2ba156a5e83614526c731fe21284c', "aria-label": this.getDescriptionText() }, generateInitials(this.name)))), this.renderTooltip()),
+                    [getAvatarAccentClass(this.accent, this.name)]: true
+                } }, h("div", { key: '9cc33a7794aaf2f1853f6f7569a7c5af5d063340', class: "gux-content" }, h("slot", { key: 'b95fd0f65798bf47c959cfdaecea586e8635dbb0', name: "image" }, h("abbr", { key: 'ee135fd29f555c8bf808c69fb33a8d5c224999a7', "aria-label": this.getDescriptionText() }, generateInitials(this.name)))), this.renderTooltip()),
             this.renderBadge(),
             this.renderUcIntegrationBadge()
         ];

package/dist/esm/gux-avatar-change-photo-beta.entry.js

@@ -1,7 +1,7 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-feb7be20.js';
 import { a as logWarn } from './log-error-274efeb7.js';
 import { b as buildI18nForComponent } from './index-6fa3d266.js';
-import { t as trackComponent } from './usage-d75e6b4b.js';
+import { t as trackComponent } from './usage-0a3bab03.js';
 import './get-closest-element-728b9f18.js';
 
 const changePhoto = "Change profile photo";

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

@@ -1,37 +1,64 @@
 import { r as registerInstance, h, H as Host, g as getElement } from './index-feb7be20.js';
-import { t as trackComponent } from './usage-d75e6b4b.js';
+import { t as trackComponent } from './usage-0a3bab03.js';
 import { a as logWarn } from './log-error-274efeb7.js';
-import { s as setFocusTarget, r as resetFocusableSibling } from './gux-avatar-group.service-23d9c11d.js';
+import { s as setFocusTarget, r as resetFocusableSibling } from './gux-avatar-group.service-f9030472.js';
+import './get-closest-element-728b9f18.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) {
         registerInstance(this, hostRef);
+        this.processedGroupItems = [];
+        this.quantity = 7;
     }
     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.');
-        }
+        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];
             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();
@@ -39,13 +66,37 @@ const GuxAvatarGroup = class {
     }
     handleClick(event) {
         const clickedElement = event.target;
-        resetFocusableSibling(clickedElement);
-        setFocusTarget(clickedElement);
+        if (clickedElement.tagName === 'GUX-AVATAR-GROUP-ITEM-BETA' &&
+            !clickedElement.hasAttribute('hidden')) {
+            resetFocusableSibling(clickedElement);
+            setFocusTarget(clickedElement);
+        }
+    }
+    validateChildElements(childElements) {
+        if (childElements.length === 0) {
+            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) {
+            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 (h("gux-avatar-overflow-beta", null, overflowItems.map(item => {
+                var _a, _b;
+                return (h("gux-avatar-overflow-item-beta", { name: item.name, accent: item.accent, onClick: () => item.groupItem.click() }, item.img ? (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 (h(Host, { key: 'a0c74e33fa71e345201ab4c1f0cea37fd767f40a', role: "menu", onClick: this.handleClick.bind(this) }, h("slot", { key: '761b86e5d15febdb0334abd3bf390042643e7d68' })));
+        return (h(Host, { key: 'fd252cb40f60c329c1c8330a8df415e3fe0ce86a', role: "menu", onClick: this.handleClick.bind(this) }, h("slot", { key: '754b66b2e4024abba062e2a9aa0cbe3933b75139' }), this.renderOverflowMenu()));
     }
-    static get delegatesFocus() { return true; }
     get root() { return getElement(this); }
 };
 GuxAvatarGroup.style = GuxAvatarGroupBetaStyle0;

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

@@ -1,8 +1,9 @@
-import { r as registerInstance, h, g as getElement } from './index-feb7be20.js';
-import { t as trackComponent } from './usage-d75e6b4b.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-feb7be20.js';
+import { t as trackComponent } from './usage-0a3bab03.js';
 import { a as logWarn } from './log-error-274efeb7.js';
-import { g as groupKeyboardNavigation } from './gux-avatar-group.service-23d9c11d.js';
-import { g as generateInitials } from './generate-initials-4f347529.js';
+import { g as groupKeyboardNavigation } from './gux-avatar-group.service-f9030472.js';
+import { a as getAvatarAccentClass, g as generateInitials } from './gux-avatar.service-43c1b4e1.js';
+import './get-closest-element-728b9f18.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;
@@ -19,13 +20,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
      */
@@ -41,16 +35,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) {
@@ -61,12 +45,13 @@ const GuxAvatarGroupItem = class {
         }
     }
     render() {
-        return (h("button", { key: '5ac64c971a6d31b621ec5949bebd51eca93f5b6b', type: "button", role: "menuitem", "aria-label": this.name, tabIndex: -1, ref: el => (this.buttonElement = el), class: {
+        return (h(Host, { key: '2ecedaa5f3705fcece1c0bba087e960d3c0e8393', role: "menuitem" }, h("button", { key: '0e2f5760551f46ca5ec394a87c85c5bb962f664e', type: "button", "aria-label": this.name, tabIndex: -1, class: {
                 'gux-avatar': true,
-                [this.getAccent()]: true,
+                [getAvatarAccentClass(this.accent, this.name)]: 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))));
+            } }, h("slot", { key: 'c1542da304401940307eb9fced69479bce16a966', name: "image" }, h("span", { key: '4d951124cb550e7c0fad0764779720a87072f0a7', class: "gux-avatar-initials", "aria-hidden": "true" }, generateInitials(this.name))), h("gux-tooltip-beta", { key: '4c575880347af40da4f888cbe16557eda28a349f', "aria-hidden": "true", "visual-only": true, placement: "top", ref: el => (this.tooltip = el) }, h("div", { key: '486bea5b6ff4cc0a260a49fe0b5488619090414f', slot: "content" }, this.name)))));
     }
+    static get delegatesFocus() { return true; }
     get root() { return getElement(this); }
 };
 GuxAvatarGroupItem.style = GuxAvatarGroupItemBetaStyle0;

package/dist/esm/{gux-avatar-group.service-23d9c11d.js → gux-avatar-group.service-f9030472.js}

@@ -1,11 +1,16 @@
+import { g as getClosestElement } from './get-closest-element-728b9f18.js';
+import { a as logWarn } from './log-error-274efeb7.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);
@@ -23,7 +28,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;
     });
@@ -37,24 +42,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 {
@@ -62,41 +70,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('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);
@@ -104,8 +109,11 @@ function setItemTabIndex(element, newIndex) {
         button.tabIndex = newIndex;
     }
     else {
-        console.log('No button found in the gux-avatar-group-item element');
+        logWarn(element, 'gux-avatar-group-beta: No button found in the element');
     }
 }
+function isHidden(element) {
+    return element.hasAttribute('hidden');
+}
 
 export { groupKeyboardNavigation as g, resetFocusableSibling as r, setFocusTarget as s };

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

@@ -0,0 +1,280 @@
+import { r as registerInstance, h, H as Host, g as getElement } from './index-feb7be20.js';
+import { a as autoUpdate, c as computePosition, o as offset } from './floating-ui.dom.esm-02309983.js';
+import { O as OnClickOutside } from './on-click-outside-4688e1f9.js';
+import { t as trackComponent } from './usage-0a3bab03.js';
+import { a as logWarn } from './log-error-274efeb7.js';
+import { g as groupKeyboardNavigation } from './gux-avatar-group.service-f9030472.js';
+import { a as afterNextRenderTimeout } from './after-next-render-07a41f53.js';
+import { a as getAvatarAccentClass, g as generateInitials } from './gux-avatar.service-43c1b4e1.js';
+import './get-closest-element-728b9f18.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) {
+        registerInstance(this, hostRef);
+        this.delayTime = 250;
+        this.count = 0;
+        this.expanded = false;
+    }
+    async componentWillLoad() {
+        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) {
+        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 = 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 = autoUpdate(this.overflowButtonElement, this.menuElement, () => this.updatePosition(), {
+                ancestorScroll: true,
+                elementResize: true,
+                animationFrame: true,
+                ancestorResize: true
+            });
+        }
+        else {
+            this.disconnectedCallback();
+        }
+    }
+    updatePosition() {
+        if (this.root) {
+            void computePosition(this.overflowButtonElement, this.menuElement, {
+                placement: 'bottom-start',
+                strategy: 'fixed',
+                middleware: [
+                    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')) {
+            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 = 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 (h(Host, { key: '1eca1d8373f1f8bce38195b234b2aa6c85489d66', role: "menuitem" }, 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() }, h("span", { key: 'e542e692be6b5e40794526311b35647dafa77a5a', class: "gux-avatar-overflow-wrapper" }, h("span", { key: 'fcf9797285a72682a4a676f980f9da0ebf98ff55', class: "gux-avatar-overflow-content" }, " +", this.getCount()))), h("div", { key: '390fe4b03689c2390022d871bcdf46cfeae773c3', class: {
+                'gux-menu-wrapper': true,
+                'gux-shown': this.expanded
+            }, ref: el => (this.menuElement = el) }, h("div", { key: 'e9775de055cf867360eb43ef87b56c1e4846d283', role: "menu", class: "gux-menu-content" }, h("slot", { key: 'f87d83d682723774826e175ddac0142daa5340f5' })))));
+    }
+    static get delegatesFocus() { return true; }
+    get root() { return getElement(this); }
+};
+__decorate([
+    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) {
+        registerInstance(this, hostRef);
+        this.name = undefined;
+        this.accent = 'auto';
+    }
+    async componentWillLoad() {
+        trackComponent(this.root);
+    }
+    componentDidLoad() {
+        this.validatingInputs();
+    }
+    onKeydown(event) {
+        overflowNavigation(event, this.root);
+    }
+    validatingInputs() {
+        const avatarImage = this.root.querySelector('img');
+        if (!this.name) {
+            logWarn(this.root, 'Name prop is required');
+        }
+        if (avatarImage && !avatarImage.getAttribute('alt')) {
+            logWarn(this.root, 'Alt attribute is required for slotted image.');
+        }
+    }
+    render() {
+        return (h(Host, { key: '9a482a55db83dd77b4275313b5e91e6e35abbf67', role: "menuitem" }, h("button", { key: 'efb50ab018339921fff8605f18e94e3e1bb6bd85', type: "button", "aria-label": this.name, tabIndex: -1 }, h("span", { key: 'a9c32970cd2550b834c176f8552fe50d3c8db595', class: {
+                'gux-avatar': true,
+                [getAvatarAccentClass(this.accent, this.name)]: true
+            } }, h("slot", { key: 'c8268952f6531f9b3cdaf11b54bb5ca209c6df6b', name: "image" }, h("span", { key: '143d09b06886a32bae9343b5de8474ce4f036c85', class: "gux-avatar-initials", "aria-hidden": "true" }, generateInitials(this.name)))), h("span", { key: '530801a4712419301043e9303544266dc5f7b021' }, this.name))));
+    }
+    static get delegatesFocus() { return true; }
+    get root() { return getElement(this); }
+};
+GuxAvatarOverflowItem.style = GuxAvatarOverflowItemBetaStyle0;
+
+export { GuxAvatarOverflow as gux_avatar_overflow_beta, GuxAvatarOverflowItem as gux_avatar_overflow_item_beta };