genesys-spark-components 4.111.6 → 4.112.0

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-8b693ae3.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-8b693ae3.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

package/dist/cjs/gux-blank-state.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-2dd05ef3.js');
-const usage = require('./usage-8b693ae3.js');
+const usage = require('./usage-3dcfa17c.js');
 const onMutation = require('./on-mutation-c0879d47.js');
 const hasSlot = require('./has-slot-3edae188.js');
 
@@ -38,7 +38,7 @@ const GuxBlankState = class {
         this.hasCallToAction = hasSlot.hasSlot(this.root, 'call-to-action');
     }
     render() {
-        return (index.h("div", { key: 'e0628d9ef55d8fa3426b38430badf3101fbde541', class: "gux-container" }, index.h("div", { key: '969a0e63592b70ba3a6811479fdd7da14107bb6b', class: "gux-image" }, index.h("slot", { key: 'd4e1d398541c72d2e12916363d44074b7faf3f07', name: "image" })), index.h("div", { key: '3005b7deddd32fcabf46d33016538acefe1a1bf7', class: "gux-message" }, index.h("slot", { key: 'c7e9bbf5fc2bad5cb4fafea86289d44e2347f683', name: "primary-message" })), index.h("div", { key: '3f19b0a5e14f338f2d87a0cc6eb866d813c0dcea', class: "gux-guidance" }, index.h("slot", { key: '5e11d90e072cd83d348ff2ea6ed443d2585dcc55', name: "additional-guidance" })), this.renderCallToActionSlot()));
+        return (index.h("div", { key: 'a220741844984e366216f60674e938e0f4f3ffb8', class: "gux-container" }, index.h("div", { key: 'de8d1e5ec8016d4b2681e9378e53fcea0a0c24e6', class: "gux-image" }, index.h("slot", { key: '7e5780364ad8a7705c56c72fcb577ef3e6da8cf9', name: "image" })), index.h("div", { key: '7973a888728d065ac4d3ff83390bd4a4bb297359', class: "gux-message" }, index.h("slot", { key: '54a663cb1a3c8fd656764eb03dfcd3d20a92a122', name: "primary-message" })), index.h("div", { key: '42da9b7d883f41e8f62beeafeb44b45133856390', class: "gux-guidance" }, index.h("slot", { key: '9d2a4c5af66dc7ca84600d093f26150bdfbc9b71', name: "additional-guidance" })), this.renderCallToActionSlot()));
     }
     get root() { return index.getElement(this); }
 };

package/dist/cjs/gux-breadcrumb-item.cjs.entry.js

@@ -44,7 +44,7 @@ const GuxBreadcrumbItem = class {
     }
     render() {
         const accent = this.getAccent();
-        return (index.h(index.Host, { key: '3cb0fc71079bb297438cf8097fb603ffaea32ab3', role: "listitem" }, index.h("span", { key: '6b234449ad078ee665a8c330e5d195ce54279bd3', class: `gux-breadcrumb-generation gux-${accent}` }, this.getBreadcrumb(accent), this.getSeparatorIcon())));
+        return (index.h(index.Host, { key: '61936fb9123f607cce1e7515a65025f0ceb49c26', role: "listitem" }, index.h("span", { key: 'a8c7fb4dfec59d3356ca5e101287aa023e16568d', class: `gux-breadcrumb-generation gux-${accent}` }, this.getBreadcrumb(accent), this.getSeparatorIcon())));
     }
     get root() { return index.getElement(this); }
 };

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-2dd05ef3.js');
 const index$1 = require('./index-d7208697.js');
-const usage = require('./usage-8b693ae3.js');
+const usage = require('./usage-3dcfa17c.js');
 require('./get-closest-element-9e41d6b9.js');
 
 const breadcrumbs = "Breadcrumbs";
@@ -30,7 +30,7 @@ const GuxBreadcrumbs = class {
         Array.from(this.root.children).forEach(child => index.forceUpdate(child));
     }
     render() {
-        return (index.h("nav", { key: '5afd74dc10dd0adc6cd46e3e9a0b6b77d79c0b5d', "aria-label": this.i18n('breadcrumbs') }, index.h("ol", { key: 'beadf863a24399bd6ce6c3daa49a5936c5f864cb' }, index.h("slot", { key: 'a7e00b34840416c06a51052021d779e38e86fc74', onSlotchange: this.onSlotChange.bind(this) }))));
+        return (index.h("nav", { key: '119b3fa8ee5e78bf3b0d1499e7cb983939181220', "aria-label": this.i18n('breadcrumbs') }, index.h("ol", { key: 'e1e65d2af720de448a5754d955c90e03f010c044' }, index.h("slot", { key: '7c8ef3d9fa757d30769e0fead31fcf7eeb03b86a', onSlotchange: this.onSlotChange.bind(this) }))));
     }
     get root() { return index.getElement(this); }
 };

package/dist/cjs/gux-button-multi.cjs.entry.js

@@ -6,7 +6,7 @@ const index = require('./index-2dd05ef3.js');
 const onClickOutside = require('./on-click-outside-bb55ad5e.js');
 const whenEventIsFrom = require('./when-event-is-from-dd77a8d3.js');
 const afterNextRender = require('./after-next-render-162425fe.js');
-const usage = require('./usage-8b693ae3.js');
+const usage = require('./usage-3dcfa17c.js');
 
 const guxButtonMultiAccent = ['primary', 'secondary', 'tertiary'];
 function getGuxButtonMultiAccent(maybeGuxButtonMultiAccent) {
@@ -119,7 +119,7 @@ const GuxButtonMulti = class {
         usage.trackComponent(this.root, { variant: this.accent });
     }
     render() {
-        return (index.h("gux-popup", { key: '10d1528af7efd00e7c4415726bc57c352ef5284b', expanded: this.isOpen, "exceed-target-width": true, placement: "bottom-end" }, index.h("div", { key: 'c7de7004a3f4aa2d9659bbc022173da8ec10c97e', slot: "target", class: "gux-button-multi-container" }, index.h("gux-button-slot", { key: 'de8a229b7291253e8cfb2534228ee4bcf60d326c', class: "gux-dropdown-button", accent: getGuxButtonMultiAccent(this.accent) }, index.h("button", { key: '90afedc920703e2f9e63f50548d22d993ddf9ecc', type: "button", disabled: this.disabled, ref: el => (this.dropdownButton = el), onMouseUp: () => this.toggle(), "aria-haspopup": "true", "aria-expanded": this.isOpen.toString() }, index.h("slot", { key: '0f6cd99b832d3bc9550a6615133b6662dd931170', name: "title" }), index.h("gux-icon", { key: '950eaf6afd882dd38acaf6d4b609731384cdb6bd', size: "small", decorative: true, "icon-name": "custom/chevron-down-small-regular" })))), index.h("div", { key: '2609713522b28c3a69bb4718f543adce3afad2cf', class: "gux-list-container", slot: "popup" }, index.h("gux-list", { key: 'd9514712693d016ed0f11bbdbcd8d438401e8a28', onClick: (e) => this.onListClick(e), ref: el => (this.listElement = el) }, index.h("slot", { key: '006fa1bf3cf0e1635d20343eb4b187a5b40f8680' })))));
+        return (index.h("gux-popup", { key: 'c083b95a647399a7cd916c0a087af6cc4fc5bc1d', expanded: this.isOpen, "exceed-target-width": true, placement: "bottom-end" }, index.h("div", { key: 'ea62ec5f77c58b4f3a3f25e97070bd8c15cfa0bf', slot: "target", class: "gux-button-multi-container" }, index.h("gux-button-slot", { key: '6f978c23343e2af4754a96dc524605ae67edfe1b', class: "gux-dropdown-button", accent: getGuxButtonMultiAccent(this.accent) }, index.h("button", { key: '97eed2c9c1a6f9c8f0e22734d07ed6efd819473c', type: "button", disabled: this.disabled, ref: el => (this.dropdownButton = el), onMouseUp: () => this.toggle(), "aria-haspopup": "true", "aria-expanded": this.isOpen.toString() }, index.h("slot", { key: '3e9192a4fbedaa88005049ed522215c88155420b', name: "title" }), index.h("gux-icon", { key: '0a1ee4870f819e8cb8c6d9b434d68bba5875308c', size: "small", decorative: true, "icon-name": "custom/chevron-down-small-regular" })))), index.h("div", { key: '45bf0d049e55d413a3fd1c965c3983e41334c68a', class: "gux-list-container", slot: "popup" }, index.h("gux-list", { key: '7f457dcba160830324f8e0a78a70608f7d322967', onClick: (e) => this.onListClick(e), ref: el => (this.listElement = el) }, index.h("slot", { key: '660248167197a447fcac9348a0226073cddaa01a' })))));
     }
     static get delegatesFocus() { return true; }
     get root() { return index.getElement(this); }

package/dist/cjs/gux-button-slot.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-2dd05ef3.js');
-const usage = require('./usage-8b693ae3.js');
+const usage = require('./usage-3dcfa17c.js');
 const logError = require('./log-error-7b9d4b57.js');
 
 const guxButtonSlotCss = ":host{display:inline-block;pointer-events:none}::slotted(input[type=button]),::slotted(input[type=submit]),::slotted(button){font-family:var(--gse-ui-button-text-fontFamily);font-size:var(--gse-ui-button-text-fontSize);font-weight:var(--gse-ui-button-text-fontWeight);line-height:var(--gse-ui-button-text-lineHeight);inline-size:100%;min-inline-size:var(--gse-ui-button-iconOnly-width);block-size:var(--gse-ui-button-default-height);padding:var(--gse-ui-button-default-padding);overflow:hidden;color:var(--gse-ui-button-secondary-default-foregroundColor);text-overflow:ellipsis;white-space:nowrap;pointer-events:auto;cursor:pointer;background-color:var(--gse-ui-button-secondary-default-backgroundColor);border:none;border-radius:var(--gse-ui-button-borderRadius)}:host([icon-only]) ::slotted(input[type=button]),:host([icon-only]) ::slotted(input[type=submit]),:host([icon-only]) ::slotted(button){padding:var(--gse-ui-button-default-paddingIconOnly)}::slotted(input[type=button][disabled]),::slotted(input[type=submit][disabled]),::slotted(button[disabled]){cursor:default;opacity:var(--gse-ui-button-disabled-opacity)}::slotted(input[type=button]:focus),::slotted(input[type=submit]:focus),::slotted(button:focus){outline:none}::slotted(input[type=button]:focus-visible:enabled),::slotted(input[type=submit]:focus-visible:enabled),::slotted(button:focus-visible:enabled){outline:var(--gse-semantic-focusOutline-md-borderWidth) solid var(--gse-semantic-border-focus);outline-offset:var(--gse-semantic-focusOutline-offset)}::slotted(input[type=button]:hover:enabled),::slotted(input[type=submit]:hover:enabled),::slotted(button:hover:enabled){color:var(--gse-ui-button-secondary-hover-foregroundColor);background-color:var(--gse-ui-button-secondary-hover-backgroundColor)}::slotted(input[type=button]:active:enabled),::slotted(input[type=submit]:active:enabled),::slotted(button:active:enabled){color:var(--gse-ui-button-secondary-active-foregroundColor);background-color:var(--gse-ui-button-secondary-active-backgroundColor)}:host([accent=primary]) ::slotted(input[type=button]),:host([accent=primary]) ::slotted(input[type=submit]),:host([accent=primary]) ::slotted(button){color:var(--gse-ui-button-primary-default-foregroundColor);background-color:var(--gse-ui-button-primary-default-backgroundColor)}:host([accent=primary]) ::slotted(input[type=button]:hover:enabled),:host([accent=primary]) ::slotted(input[type=submit]:hover:enabled),:host([accent=primary]) ::slotted(button:hover:enabled){color:var(--gse-ui-button-primary-hover-foregroundColor);background-color:var(--gse-ui-button-primary-hover-backgroundColor)}:host([accent=primary]) ::slotted(input[type=button]:active:enabled),:host([accent=primary]) ::slotted(input[type=submit]:active:enabled),:host([accent=primary]) ::slotted(button:active:enabled){color:var(--gse-ui-button-primary-active-foregroundColor);background-color:var(--gse-ui-button-primary-active-backgroundColor)}:host([accent=tertiary]) ::slotted(input[type=button]),:host([accent=tertiary]) ::slotted(input[type=submit]),:host([accent=tertiary]) ::slotted(button){color:var(--gse-ui-button-tertiary-default-foregroundColor);background-color:var(--gse-ui-button-tertiary-default-backgroundColor);border-color:var(--gse-ui-button-tertiary-default-border-color);border-style:var(--gse-ui-button-tertiary-default-border-style);border-width:var(--gse-ui-button-tertiary-default-border-width)}:host([accent=tertiary]) ::slotted(input[type=button]:hover:enabled),:host([accent=tertiary]) ::slotted(input[type=submit]:hover:enabled),:host([accent=tertiary]) ::slotted(button:hover:enabled){color:var(--gse-ui-button-tertiary-hover-foregroundColor);background-color:var(--gse-ui-button-tertiary-hover-backgroundColor)}:host([accent=tertiary]) ::slotted(input[type=button]:active:enabled),:host([accent=tertiary]) ::slotted(input[type=submit]:active:enabled),:host([accent=tertiary]) ::slotted(button:active:enabled){color:var(--gse-ui-button-tertiary-active-foregroundColor);background-color:var(--gse-ui-button-tertiary-active-backgroundColor)}:host([accent=ghost]) ::slotted(input[type=button]),:host([accent=ghost]) ::slotted(input[type=submit]),:host([accent=ghost]) ::slotted(button){color:var(--gse-ui-button-ghost-default-foregroundColor);background-color:var(--gse-ui-button-ghost-default-backgroundColor)}:host([accent=ghost]) ::slotted(input[type=button]:hover:enabled),:host([accent=ghost]) ::slotted(input[type=submit]:hover:enabled),:host([accent=ghost]) ::slotted(button:hover:enabled){color:var(--gse-ui-button-ghost-hover-foregroundColor);background-color:var(--gse-ui-button-ghost-hover-backgroundColor)}:host([accent=ghost]) ::slotted(input[type=button]:active:enabled),:host([accent=ghost]) ::slotted(input[type=submit]:active:enabled),:host([accent=ghost]) ::slotted(button:active:enabled){color:var(--gse-ui-button-ghost-active-foregroundColor);background-color:var(--gse-ui-button-ghost-active-backgroundColor)}:host([accent=danger]) ::slotted(input[type=button]),:host([accent=danger]) ::slotted(input[type=submit]),:host([accent=danger]) ::slotted(button){color:var(--gse-ui-button-danger-default-foregroundColor);background-color:var(--gse-ui-button-danger-default-backgroundColor)}:host([accent=danger]) ::slotted(input[type=button]:hover:enabled),:host([accent=danger]) ::slotted(input[type=submit]:hover:enabled),:host([accent=danger]) ::slotted(button:hover:enabled){color:var(--gse-ui-button-danger-hover-foregroundColor);background-color:var(--gse-ui-button-danger-hover-backgroundColor)}:host([accent=danger]) ::slotted(input[type=button]:active:enabled),:host([accent=danger]) ::slotted(input[type=submit]:active:enabled),:host([accent=danger]) ::slotted(button:active:enabled){color:var(--gse-ui-button-danger-active-foregroundColor);background-color:var(--gse-ui-button-danger-active-backgroundColor)}:host([accent=inline]){min-inline-size:initial}:host([accent=inline]) ::slotted(input[type=button]),:host([accent=inline]) ::slotted(input[type=submit]),:host([accent=inline]) ::slotted(button){block-size:initial;padding:0;color:var(--gse-ui-links-default-foregroundColor);background:none;border:none}:host([accent=inline]) ::slotted(input[type=button][disabled]),:host([accent=inline]) ::slotted(input[type=submit][disabled]),:host([accent=inline]) ::slotted(button[disabled]){color:var(--gse-ui-links-disabled-foregroundColor)}:host([accent=inline]) ::slotted(input[type=button]:hover:enabled),:host([accent=inline]) ::slotted(input[type=submit]:hover:enabled),:host([accent=inline]) ::slotted(button:hover:enabled){color:var(--gse-ui-links-hover-foregroundColor);text-decoration:underline;background:none}:host([accent=inline]) ::slotted(input[type=button]:active:enabled),:host([accent=inline]) ::slotted(input[type=submit]:active:enabled),:host([accent=inline]) ::slotted(button:active:enabled){color:var(--gse-ui-links-active-foregroundColor);text-decoration:underline;background:none}";
@@ -38,7 +38,7 @@ const GuxButtonSlot = class {
         this.validateSlotContent();
     }
     render() {
-        return (index.h(index.Host, { key: '7db719be511ad4cebf0f36159ce7c2ccfb89bb13', accent: this.accent, "icon-only": this.iconOnly }, index.h("slot", { key: '274e551e90e870ae178d9f0d241711eca7658653' })));
+        return (index.h(index.Host, { key: 'f006b3f67f24b741ad71daa8e98f3d028f3ec0b6', accent: this.accent, "icon-only": this.iconOnly }, index.h("slot", { key: '82bee185b230368e595c833cdfad36e977931efc' })));
     }
     get root() { return index.getElement(this); }
 };