genesys-spark-components 4.100.0 → 4.101.1

package/dist/cjs/gux-popover-list-beta.cjs.entry.js

@@ -0,0 +1,165 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-79505d14.js');
+const floatingUi_dom_esm = require('./floating-ui.dom.esm-0b237e01.js');
+const onClickOutside = require('./on-click-outside-31073d32.js');
+const usage = require('./usage-1d93a743.js');
+const findElementById = require('./find-element-by-id-fde17c92.js');
+
+const guxPopoverListCss = ":popover-open{position:absolute;inset:unset}.gux-popover-wrapper{position:fixed;inset-block-start:0;inset-inline-start:0;z-index:var(--gse-semantic-zIndex-popover);display:inline-block;padding-block:8px;padding-inline:0;overflow-y:hidden;background-color:var(--gse-ui-popover-backgroundColor);border:none;border-radius:var(--gse-ui-popover-borderRadius);box-shadow:var(--gse-ui-popover-boxShadow-offsetX) var(--gse-ui-popover-boxShadow-offsetY) var(--gse-ui-popover-boxShadow-blur) var(--gse-ui-popover-boxShadow-spread) var(--gse-ui-popover-boxShadow-color);}.gux-popover-wrapper.gux-hidden{display:none}.gux-popover-wrapper .gux-arrow{position:absolute;inline-size:var(--gse-ui-popover-anchor-width);block-size:var(--gse-ui-popover-anchor-width);background:var(--gse-ui-popover-backgroundColor)}";
+const GuxPopoverListBetaStyle0 = guxPopoverListCss;
+
+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 GuxPopoverList = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.guxdismiss = index.createEvent(this, "guxdismiss", 7);
+        this.for = undefined;
+        this.position = 'bottom';
+        this.displayDismissButton = undefined;
+        this.closeOnClickOutside = false;
+        this.isOpen = false;
+    }
+    onKeyDown(event) {
+        switch (event.key) {
+            case 'Tab':
+            case 'Escape':
+                this.dismiss();
+                break;
+        }
+    }
+    checkForClickOutside(event) {
+        const clickPath = event.composedPath();
+        const forElement = findElementById.findElementById(this.root, this.for);
+        const clickedForElement = clickPath.includes(forElement);
+        if ((this.closeOnClickOutside || !this.displayDismissButton) &&
+            this.isOpen &&
+            !clickedForElement) {
+            this.dismiss();
+        }
+        if (clickedForElement) {
+            this.popupElement.togglePopover();
+            this.isOpen = !this.isOpen;
+            this.runUpdatePosition();
+        }
+    }
+    runUpdatePosition() {
+        if (this.root.isConnected) {
+            this.cleanupUpdatePosition = floatingUi_dom_esm.autoUpdate(findElementById.findElementById(this.root, this.for), this.popupElement, () => this.updatePosition(), {
+                ancestorScroll: true,
+                elementResize: true,
+                animationFrame: true,
+                ancestorResize: true
+            });
+        }
+        else {
+            this.disconnectedCallback();
+        }
+    }
+    updatePosition() {
+        const forElement = findElementById.findElementById(this.root, this.for);
+        // This is 13 because this makes the arrow look aligned
+        const arrowLen = 13;
+        if (this.popupElement) {
+            void floatingUi_dom_esm.computePosition(forElement, this.popupElement, {
+                strategy: 'fixed',
+                placement: this.position,
+                middleware: [
+                    floatingUi_dom_esm.offset(2),
+                    floatingUi_dom_esm.flip(),
+                    floatingUi_dom_esm.shift(),
+                    floatingUi_dom_esm.hide(),
+                    floatingUi_dom_esm.arrow({
+                        element: this.arrowElement,
+                        padding: 16
+                    })
+                ]
+            }).then(({ x, y, middlewareData, placement }) => {
+                Object.assign(this.popupElement.style, {
+                    left: `${x}px`,
+                    top: `${y}px`
+                });
+                const side = placement.split('-')[0];
+                const staticSide = {
+                    top: 'bottom',
+                    right: 'left',
+                    bottom: 'top',
+                    left: 'right'
+                }[side];
+                // TODO: COMUI-3210 - Arrow currently does not show
+                if (middlewareData.arrow) {
+                    const { x, y } = middlewareData.arrow;
+                    this.popupElement.setAttribute('data-placement', placement);
+                    Object.assign(this.arrowElement.style, {
+                        left: x != null ? `${x}px` : '',
+                        top: y != null ? `${y}px` : '',
+                        right: '',
+                        bottom: '',
+                        [staticSide]: `${-arrowLen / 2}px`,
+                        transform: 'rotate(45deg)'
+                    });
+                }
+                if (middlewareData.hide) {
+                    Object.assign(this.popupElement.style, {
+                        visibility: middlewareData.hide.referenceHidden
+                            ? 'hidden'
+                            : 'visible'
+                    });
+                }
+            });
+        }
+    }
+    dismiss() {
+        const dismissEvent = this.guxdismiss.emit();
+        if (!dismissEvent.defaultPrevented) {
+            this.isOpen = false;
+            this.popupElement.togglePopover();
+        }
+    }
+    connectedCallback() {
+        usage.trackComponent(this.root, { variant: this.position });
+    }
+    componentDidLoad() {
+        if (this.isOpen) {
+            this.popupElement.togglePopover();
+            this.runUpdatePosition();
+        }
+    }
+    componentDidUpdate() {
+        if (this.isOpen) {
+            this.runUpdatePosition();
+        }
+        else if (this.cleanupUpdatePosition) {
+            this.cleanupUpdatePosition();
+        }
+    }
+    disconnectedCallback() {
+        if (this.cleanupUpdatePosition) {
+            this.cleanupUpdatePosition();
+        }
+    }
+    render() {
+        return (index.h("div", { key: 'f42b52fb101ae28228a43b1b63380786c96e0ae7', ref: (el) => (this.popupElement = el), class: {
+                'gux-hidden': !this.isOpen,
+                'gux-popover-wrapper': true
+            }, "data-placement": true, popover: "manual" }, index.h("div", { key: '4c56c1d765988e6ab6d780f3531f5268ff8edac1', ref: (el) => (this.arrowElement = el), class: "gux-arrow" }), this.displayDismissButton && (index.h("gux-dismiss-button", { key: '5b57ef382386c628ce0f0f94e1cf6853c73f9331', onClick: this.dismiss.bind(this) })), index.h("div", { key: 'f97d9ab45434408704a6371cafa24899fd151500', class: "gux-popover-content" }, index.h("slot", { key: 'b363ec66ffaaf1e8995d7338097a52de3cc37d38' }))));
+    }
+    get root() { return index.getElement(this); }
+};
+__decorate([
+    onClickOutside.OnClickOutside({ triggerEvents: 'mousedown' })
+], GuxPopoverList.prototype, "checkForClickOutside", null);
+GuxPopoverList.style = GuxPopoverListBetaStyle0;
+
+exports.gux_popover_list_beta = GuxPopoverList;

package/dist/cjs/gux-popover-list.cjs.entry.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-79505d14.js');
 const floatingUi_dom_esm = require('./floating-ui.dom.esm-0b237e01.js');
 const onClickOutside = require('./on-click-outside-31073d32.js');
-const usage = require('./usage-62c2ce66.js');
+const usage = require('./usage-1d93a743.js');
 const findElementById = require('./find-element-by-id-fde17c92.js');
 
 const guxPopoverListCss = ".gux-popover-wrapper{position:fixed;inset-block-start:0;inset-inline-start:0;z-index:var(--gse-semantic-zIndex-popover);display:inline-block;padding-block:8px;padding-inline:0;background-color:var(--gse-ui-popover-backgroundColor);border-radius:var(--gse-ui-popover-borderRadius);box-shadow:var(--gse-ui-popover-boxShadow-offsetX) var(--gse-ui-popover-boxShadow-offsetY) var(--gse-ui-popover-boxShadow-blur) var(--gse-ui-popover-boxShadow-spread) var(--gse-ui-popover-boxShadow-color)}.gux-popover-wrapper.gux-hidden{display:none}.gux-popover-wrapper .gux-arrow{position:absolute;inline-size:var(--gse-ui-popover-anchor-width);block-size:var(--gse-ui-popover-anchor-width);background:var(--gse-ui-popover-backgroundColor)}";
@@ -134,10 +134,10 @@ const GuxPopoverList = class {
         }
     }
     render() {
-        return (index.h("div", { key: 'cea604c908df05372fb7545d45e2ad87db8a3908', ref: (el) => (this.popupElement = el), class: {
+        return (index.h("div", { key: '62c840b648ec05931c79732c2474a09f60151150', ref: (el) => (this.popupElement = el), class: {
                 'gux-hidden': !this.isOpen,
                 'gux-popover-wrapper': true
-            }, "data-placement": true }, index.h("div", { key: '938bfe8ec1dfad9c0d350fb25866db0a83985577', ref: (el) => (this.arrowElement = el), class: "gux-arrow" }), this.displayDismissButton && (index.h("gux-dismiss-button", { key: 'c603b1a39b3d22fa3da5f101268755863f48cbdf', onClick: this.dismiss.bind(this) })), index.h("div", { key: 'a96fd5f86254ec280ae32c78c0862ab70b1b21ac', class: "gux-popover-content" }, index.h("slot", { key: '47724f55cd50afffb589cb22af84f3ba6c831ecd' }))));
+            }, "data-placement": true }, index.h("div", { key: '637eb98eccdb62c740222c79d0dd199c283fc180', ref: (el) => (this.arrowElement = el), class: "gux-arrow" }), this.displayDismissButton && (index.h("gux-dismiss-button", { key: '97cd860cf1ae0c327b2887098db5a9b62f09de57', onClick: this.dismiss.bind(this) })), index.h("div", { key: '5e66f330e3e36b46c6e681a56dea5b7fb2a44adc', class: "gux-popover-content" }, index.h("slot", { key: 'da476056dc52941208f09794d6eb81d3d09deb9c' }))));
     }
     get root() { return index.getElement(this); }
 };

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

@@ -110,13 +110,13 @@ const GuxPopup = class {
         }
     }
     render() {
-        return (index.h("div", { key: '9a88fde4d1576ea9d34959fbb46be13bf6486c8f', class: {
+        return (index.h("div", { key: 'd7bab8d4e2a64fcb4d135121bcdc2676758bd104', class: {
                 'gux-target-container': true,
                 'gux-disabled': this.disabled
-            }, "aria-disabled": this.disabled.toString(), ref: (el) => (this.targetElementContainer = el) }, index.h("slot", { key: 'e5d03a6da381d4a7a4e15b1569bf213283bce38e', name: "target" }), index.h("div", { key: '356135cffa483793c5f51a7df56a4582dc789d41', class: {
+            }, "aria-disabled": this.disabled.toString(), ref: (el) => (this.targetElementContainer = el) }, index.h("slot", { key: 'fc53ee9991e1482dd01ed9a6d1839e3d16042aef', name: "target" }), index.h("div", { key: 'c36558b87567526942788b590439ceac5e19b7a0', class: {
                 'gux-popup-container': true,
                 'gux-expanded': this.expanded && !this.disabled
-            }, ref: (el) => (this.popupElementContainer = el) }, index.h("slot", { key: 'b404b4a53febd0f542457593a7cd3b50aa272a72', name: "popup" }))));
+            }, ref: (el) => (this.popupElementContainer = el) }, index.h("slot", { key: '95783709a3f0597265941aa1493cbf162b5229a3', name: "popup" }))));
     }
     static get watchers() { return {
         "expanded": ["onExpandedChange"]

package/dist/cjs/gux-radial-loading.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-79505d14.js');
 const index$1 = require('./index-16a4179e.js');
-const usage = require('./usage-62c2ce66.js');
+const usage = require('./usage-1d93a743.js');
 require('./get-closest-element-9e41d6b9.js');
 
 const largeSpinner = 48; // Linked to --gse-ui-progressAndLoading-spinner-large
@@ -45,7 +45,7 @@ const GuxRadialLoading = class {
         this.getI18nValue = await index$1.buildI18nForComponent(this.root, modalComponentResources);
     }
     render() {
-        return (index.h(GuxSpinnerState, { key: '8a84d5aea3932beb72543b2c710214e3b0d90862', context: this.context, screenreaderText: this.screenreaderText || this.getI18nValue('loading') }));
+        return (index.h(GuxSpinnerState, { key: 'a1fa21a59bf982056154e4169c23eea4d83cff50', context: this.context, screenreaderText: this.screenreaderText || this.getI18nValue('loading') }));
     }
     get root() { return index.getElement(this); }
 };

package/dist/cjs/gux-radial-progress.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-79505d14.js');
-const usage = require('./usage-62c2ce66.js');
+const usage = require('./usage-1d93a743.js');
 const logError = require('./log-error-7b9d4b57.js');
 
 const OVERALL_SIZE = 48; // Linked to --gse-ui-progressAndLoading-spinner-large

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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-79505d14.js');
 const simulateNativeEvent = require('./simulate-native-event-e88bf64f.js');
 const clamp = require('./clamp-e86a226e.js');
-const usage = require('./usage-62c2ce66.js');
+const usage = require('./usage-1d93a743.js');
 const logError = require('./log-error-7b9d4b57.js');
 
 const guxRatingCss = ":host{display:inline-block;min-inline-size:fit-content;user-select:none}:host(:host:focus-visible){outline:var(--gse-semantic-border-focus) solid var(--gse-semantic-focusOutline-sm-borderWidth);outline-offset:var(--gse-semantic-focusOutline-offset);box-shadow:0 0 0 1px var(--gse-semantic-border-focus)}.gux-rating-star-container{display:flex;gap:var(--gse-ui-rating-star-gap);justify-content:space-between;color:var(--gse-ui-rating-default-color)}.gux-rating-star-container.gux-disabled{color:var(--gse-ui-rating-disabled-color);pointer-events:none;opacity:var(--gse-ui-rating-disabled-opacity)}.gux-rating-star-container gux-icon{flex:0 0 auto;inline-size:var(--gse-ui-rating-size);block-size:var(--gse-ui-rating-size);color:var(--gse-ui-rating-default-color)}.gux-rating-star-container gux-icon:hover:not(.gux-disabled){color:var(--gse-ui-rating-hover-color)}";
@@ -108,7 +108,7 @@ const GuxRating = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '8e27af3a44718f14d2baea420aef09442a02a27b', role: "spinbutton", tabindex: this.getTabIndex(), "aria-readonly": this.readonly.toString(), "aria-valuenow": this.value, "aria-valuemin": "0", "aria-valuemax": this.maxValue }, index.h("div", { key: '6912ba58d4643a87e52a37b6c26efaa85e36134e', ref: (el) => (this.starContainer = el), class: {
+        return (index.h(index.Host, { key: '8e199f0246360309a67e4ae98f733aacc6a022ee', role: "spinbutton", tabindex: this.getTabIndex(), "aria-readonly": this.readonly.toString(), "aria-valuenow": this.value, "aria-valuemin": "0", "aria-valuemax": this.maxValue }, index.h("div", { key: '1821e45b1283b173f6ef1f633fcec13310b9a280', ref: (el) => (this.starContainer = el), class: {
                 'gux-rating-star-container': true,
                 'gux-disabled': this.disabled
             } }, this.getRatingStarElements())));

package/dist/cjs/gux-rich-text-editor-action-group.cjs.entry.js

@@ -18,7 +18,7 @@ const GuxRichTextEditorActionGroup = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '9e62d3e38876b2a5a98463118d7f508ea6381a81' }, index.h("div", { key: 'bc05990ef57f31faaa9f819a7a6e2b78853d12bb', class: "gux-action-group-container" }, index.h("slot", { key: '41db796c677c17fe907129139d9a62c4534032dc' })), this.renderActionGroupDivider()));
+        return (index.h(index.Host, { key: '031a1f2892b46409c272804d96d320fdce1b8776' }, index.h("div", { key: '8966532264cd6124fd123a05ebb429e7a97f8c41', class: "gux-action-group-container" }, index.h("slot", { key: '00a35806cdf7e5e98dec58147262400e7ac59db4' })), this.renderActionGroupDivider()));
     }
     get root() { return index.getElement(this); }
 };

package/dist/cjs/gux-rich-text-editor-action.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-79505d14.js');
-const usage = require('./usage-62c2ce66.js');
+const usage = require('./usage-1d93a743.js');
 const index$1 = require('./index-16a4179e.js');
 const getClosestElement = require('./get-closest-element-26170ce0.js');
 require('./get-closest-element-9e41d6b9.js');

package/dist/cjs/gux-rich-text-editor-beta.cjs.entry.js

@@ -35,10 +35,10 @@ const GuxRichTextEditor = class {
         return this.renderSlot('global-action', 'gux-global-action-container');
     }
     render() {
-        return (index.h("div", { key: 'ca783004e7baf5176ec9bc95229ff642f4c77d9e', class: {
+        return (index.h("div", { key: '6fc5d8f521df5df2178ad338a8d91d339378c74c', class: {
                 'gux-rich-text-editor-container': true,
                 'gux-disabled': this.disabled
-            } }, index.h("div", { key: '045681c4e1d07994986a80d4cba4fb1347dbeb8b', class: "gux-rich-text-editor-toolbar-container" }, this.renderTypographicalEmphasis(), this.renderTextStyling(), this.renderListsIndentation(), this.renderInserting(), this.renderGlobalAction()), index.h("slot", { key: 'f9f932c875385e22be1f9e6b7779fc2153132f52', name: "editor" })));
+            } }, index.h("div", { key: 'eb0173d434352148e9def109cab57539b5768543', class: "gux-rich-text-editor-toolbar-container" }, this.renderTypographicalEmphasis(), this.renderTextStyling(), this.renderListsIndentation(), this.renderInserting(), this.renderGlobalAction()), index.h("slot", { key: '2337bf2949d055f3987ab5a8916df139102b7251', name: "editor" })));
     }
     get root() { return index.getElement(this); }
 };

package/dist/cjs/gux-row-select.cjs.entry.js

@@ -28,9 +28,9 @@ const GuxRowSelect = class {
         this.i18n = await index$1.buildI18nForComponent(this.root, en.tableResources, 'gux-table');
     }
     render() {
-        return (index.h("gux-form-field-checkbox", { key: '5ffbfb46aafca37cdb06cb6398ee9251dac15dd4', "label-position": "screenreader" }, index.h("input", { key: 'cd61e746419279955be82be0026c79bc9bc993ed', ref: el => (this.inputElement = el), class: this.selected
+        return (index.h("gux-form-field-checkbox", { key: '9e49a0496ca642837a732ac24f2852859f590abd', "label-position": "screenreader" }, index.h("input", { key: '6a4fa87b050a4585721b6c9071476a1170080f68', ref: el => (this.inputElement = el), class: this.selected
                 ? 'gux-safari-bug-workaround-1'
-                : 'gux-safari-bug-workaround-2', slot: "input", id: this.id, type: "checkbox", checked: this.selected, disabled: this.disabled }), index.h("label", { key: 'd2631e1b10574666615a836d6f74407298c08ddc', slot: "label", htmlFor: this.id }, "\u200B", index.h("span", { key: 'e5413aacb9c78e6be2bfcc95e29b08952f632d43' }, this.i18n('selectTableRow')))));
+                : 'gux-safari-bug-workaround-2', slot: "input", id: this.id, type: "checkbox", checked: this.selected, disabled: this.disabled }), index.h("label", { key: 'f7288865c1c2384a713ff156dd21f98ece6b55d1', slot: "label", htmlFor: this.id }, "\u200B", index.h("span", { key: '39d82a8218e82153780d28b3e144e29929043e88' }, this.i18n('selectTableRow')))));
     }
     get root() { return index.getElement(this); }
 };

package/dist/cjs/gux-screen-reader-beta.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-79505d14.js');
-const usage = require('./usage-62c2ce66.js');
+const usage = require('./usage-1d93a743.js');
 
 const guxScreenReaderCss = ".gux-sr-only:not(:focus):not(:active){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}";
 const GuxScreenReaderBetaStyle0 = guxScreenReaderCss;
@@ -16,7 +16,7 @@ const GuxScreenReader = class {
         usage.trackComponent(this.root);
     }
     render() {
-        return (index.h("span", { key: '0ecfbe4c440710ff030e763cd2c6ce5a03bc69ed', class: "gux-sr-only" }, index.h("slot", { key: '735e4cd2fa5b1ecc161fca404a6079daf68b6e94' })));
+        return (index.h("span", { key: '99e4b6ac03358bf032ad441c05fae657e45ee221', class: "gux-sr-only" }, index.h("slot", { key: 'de31dc9f2ca539eff7d97714f6d32b803c664d85' })));
     }
     get root() { return index.getElement(this); }
 };

package/dist/cjs/gux-segmented-control-beta.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-79505d14.js');
 const simulateNativeEvent = require('./simulate-native-event-e88bf64f.js');
-const usage = require('./usage-62c2ce66.js');
+const usage = require('./usage-1d93a743.js');
 
 const guxSegmentedControlCss = ":host{display:inline-flex}";
 const GuxSegmentedControlBetaStyle0 = guxSegmentedControlCss;
@@ -37,7 +37,7 @@ const GuxSegmentedControl = class {
         });
     }
     render() {
-        return (index.h(index.Host, { key: '71c29eea98d3129dfed35ced4be237d97dc03f40', role: "group" }, index.h("slot", { key: '7ed26fd5a871bfe2366f66d4c6e278156743e05f', onSlotchange: this.slotChanged.bind(this) })));
+        return (index.h(index.Host, { key: 'ce2a752e70599cae1a95d16712b28b1b067d07a4', role: "group" }, index.h("slot", { key: '783879e721aad7497229b07333bdeb12df7ea29b', onSlotchange: this.slotChanged.bind(this) })));
     }
     get root() { return index.getElement(this); }
 };

package/dist/cjs/gux-segmented-control-item.cjs.entry.js

@@ -53,19 +53,19 @@ const GuxSegmentedControlItem = class {
         }
     }
     render() {
-        return (index.h("div", { key: 'a3163fc7d46abd6ae1b2cb350dc77c019946328e', class: {
+        return (index.h("div", { key: 'aefda8d25da23ee129efbb54a49c058e0d5ec04e', class: {
                 'gux-container': true,
                 'gux-parent-disabled': this.hasDisabledParent(),
                 'gux-start': this.isInStartPosition(),
                 'gux-end': this.isInEndPosition()
-            } }, index.h("button", { key: '188679eafba5acf1d56727a998060ff354b83ff9', class: {
+            } }, index.h("button", { key: '6f23fcc416eec9b564b646bb269c5f1524db2e10', class: {
                 'gux-segmented-control-item': true,
                 'gux-icon-only': this.iconOnly,
                 'gux-selected': this.selected
-            }, type: "button", disabled: this.disabled || this.hasDisabledParent() }, this.renderIconSlot(), index.h("div", { key: '99e6999be7ad20fde5f981b3b26278ba281a02ed', class: {
+            }, type: "button", disabled: this.disabled || this.hasDisabledParent() }, this.renderIconSlot(), index.h("div", { key: 'b98be18ff7f99f52c1fb32890c24f87603c12f0c', class: {
                 'gux-text': true,
                 'gux-icon-only': this.iconOnly
-            } }, index.h("slot", { key: '6a8363cd44d01ad0db3674ce5c15682567c70751', name: "text" }))), this.renderTooltip()));
+            } }, index.h("slot", { key: '641b8fb994d4238b5c32c29b5a10b8cdccf49991', name: "text" }))), this.renderTooltip()));
     }
     static get delegatesFocus() { return true; }
     get root() { return index.getElement(this); }

package/dist/cjs/gux-selector-card-beta.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-79505d14.js');
-const usage = require('./usage-62c2ce66.js');
+const usage = require('./usage-1d93a743.js');
 const guxFormField_service = require('./gux-form-field.service-42c9f800.js');
 const onInputDisabledStateChange = require('./on-input-disabled-state-change-660a5191.js');
 const preventBrowserValidationStyling = require('./prevent-browser-validation-styling-132644ad.js');
@@ -54,11 +54,11 @@ const GuxSelectorCard = class {
         }
     }
     render() {
-        return (index.h("div", { key: '8d1fbba6192ca0a41d87d798d8a2ccc1ba1611ca', class: {
+        return (index.h("div", { key: 'b91fc84d1ce6c64879e00b4a6c1403b44fa35ff4', class: {
                 'gux-selector-card': true,
                 [`gux-${this.variant}`]: true,
                 'gux-disabled': this.disabled
-            } }, index.h("div", { key: '969fbb14f401d400c95c87ff4a26dfb660ffb162', class: "gux-content" }, index.h("div", { key: '4288c5c8d252e632d3ed6d4356973839beb93897', class: "gux-icon" }, index.h("slot", { key: '2f0a59c6652a3113a675651c56eba4101f61789c', name: "icon" })), index.h("div", { key: '046bcd334dcbede5c2aa1d8903c2f033e2e11785', class: "gux-label-container" }, index.h("slot", { key: '6988c4825800b7f7e289058477a243f22651bd66', name: "label" })), index.h("slot", { key: '051809cb3ce91a438ce99c1a0ec6e7783d7764fe', name: "input" }), this.renderDescription(), this.renderBadge())));
+            } }, index.h("div", { key: 'd135d3f37784619d316aa0fa126528e670663051', class: "gux-content" }, index.h("div", { key: 'c42a0ce13b448436a368e3fbf116800e818e8c08', class: "gux-icon" }, index.h("slot", { key: 'd5c7485de055122b2899a3fbc45c48c9f35c9817', name: "icon" })), index.h("div", { key: '153e15767f8fe6887fb0c1917c7f87c1bc3787da', class: "gux-label-container" }, index.h("slot", { key: '452fdce6225a5e912b9bc42d47ddd2eb27a1e77b', name: "label" })), index.h("slot", { key: 'f46300c3bc21ac82c0f4076da7868aa4a3fd3784', name: "input" }), this.renderDescription(), this.renderBadge())));
     }
     get root() { return index.getElement(this); }
 };

package/dist/cjs/gux-selector-cards-beta.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-79505d14.js');
-const usage = require('./usage-62c2ce66.js');
+const usage = require('./usage-1d93a743.js');
 
 const guxSelectorCardsCss = ".gux-selector-cards{display:flex;flex-wrap:wrap;gap:var(--gse-ui-selectorCard-simple-gap)}";
 const GuxSelectorCardsBetaStyle0 = guxSelectorCardsCss;
@@ -16,7 +16,7 @@ const GuxSelectorCards = class {
         usage.trackComponent(this.root);
     }
     render() {
-        return (index.h("div", { key: 'b02f3566386dec3f2dfc060a91386f32db39ac4c', class: "gux-selector-cards" }, index.h("slot", { key: '6334e361281bdc64fd3cd15f387bb7303927819b' })));
+        return (index.h("div", { key: 'f03b6a29a045a76215af8578416743e0287ecd0f', class: "gux-selector-cards" }, index.h("slot", { key: 'd2f29e773aac82a43e511f7e67cbef0f7c20f262' })));
     }
     get root() { return index.getElement(this); }
 };

package/dist/cjs/gux-simple-toast-legacy.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-79505d14.js');
-const usage = require('./usage-62c2ce66.js');
+const usage = require('./usage-1d93a743.js');
 
 const guxSimpleToastCss = ":host{position:relative;display:flex;flex-direction:row;flex-wrap:nowrap;place-content:stretch flex-start;align-items:flex-start;width:286px;margin-bottom:4px;color:#2e394c;background:#f6f7f9;border:1px solid #b4bccb;border-radius:4px;box-shadow:0 2px 4px rgba(32, 41, 55, 0.24)}.gux-icon{flex:0 1 auto;align-self:auto;order:0;padding:8px 12px 8px 16px;margin:2px 0}.gux-icon.gux-alert{color:#ea0b0b}.gux-icon.gux-warning{color:#ffae00}.gux-icon.gux-positive{color:#3c8527}.gux-icon.gux-neutral{color:#203b73}.gux-icon ::slotted(gux-icon){width:16px;height:16px}.gux-message{flex:1 1 auto;align-self:center;order:0;margin:8px 0}.gux-dismiss{margin:4px 0}";
 const GuxSimpleToastLegacyStyle0 = guxSimpleToastCss;
@@ -18,7 +18,7 @@ const GuxSimpleToast = class {
         usage.trackComponent(this.root, { variant: this.accent });
     }
     render() {
-        return (index.h(index.Host, { key: 'f504de9049874db1ef706c042175bed36d423b29' }, index.h("div", { key: '803640396d7fec743592784adf5493fe22e68e0b', class: `gux-icon gux-${this.accent}` }, index.h("slot", { key: '0b68c6cf8e77354ae526bdcdcea5fdd812889a12', name: "icon" })), index.h("gux-truncate", { key: 'e8d7271eae9498077c3b5d59c0032e281db51f84', class: "gux-message", "max-lines": 2 }, index.h("slot", { key: '365a98768b8399f4cdafc97a306c915d0c8fce36', name: "message" })), index.h("gux-dismiss-button", { key: '73fee5a9c5c07c3ee40829bf277000ef71776f47', class: "gux-dismiss", position: "inherit", onClick: this.onDismissClickHandler.bind(this) })));
+        return (index.h(index.Host, { key: 'db2c740647d7a8a67532e31718e0a62d7cd8c27e' }, index.h("div", { key: '7ea3dea9fa72a9db1359a6d38a03cdfb17c8567a', class: `gux-icon gux-${this.accent}` }, index.h("slot", { key: '1383078dee16fc5e9ea9b4f0681f6fa1ecabcc2b', name: "icon" })), index.h("gux-truncate", { key: 'd9d448b6796b1846d0a4c3f3895ee44b2ae7822b', class: "gux-message", "max-lines": 2 }, index.h("slot", { key: 'dfd7532ea190c9fefefbfd7014252727d4f69332', name: "message" })), index.h("gux-dismiss-button", { key: '1c541ed4eaba2bab5421a0931af71582e6f27611', class: "gux-dismiss", position: "inherit", onClick: this.onDismissClickHandler.bind(this) })));
     }
     onDismissClickHandler(event) {
         event.stopPropagation();

package/dist/cjs/gux-skip-navigation-item.cjs.entry.js

@@ -12,7 +12,7 @@ const GuxSkipNavigationItem = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: 'f158dfbf49d774789a5274a03ee812ab596c41d6', role: "listitem" }, index.h("slot", { key: '6b8dff21f46df6853d3aa1a98805efc52f19b6b5' })));
+        return (index.h(index.Host, { key: '3cf239bac6ef3eba065bd98932ac78068ea4682f', role: "listitem" }, index.h("slot", { key: 'a6af5106df3bfcb31e98641ee76e6b92ae042986' })));
     }
     static get delegatesFocus() { return true; }
 };

package/dist/cjs/gux-skip-navigation-list.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-79505d14.js');
 const index$1 = require('./index-16a4179e.js');
-const usage = require('./usage-62c2ce66.js');
+const usage = require('./usage-1d93a743.js');
 require('./get-closest-element-9e41d6b9.js');
 
 const navigationName = "Skip links navigation";
@@ -24,7 +24,7 @@ const GuxSkipNavigationList = class {
         this.i18n = await index$1.buildI18nForComponent(this.root, translationResources);
     }
     render() {
-        return (index.h("div", { key: '4430a3ea7167907ea7ed814ecafeafff0a77e038', class: "gux-container" }, index.h("nav", { key: '784bd8b5088b919e2058136477e1eb4cc4f32e61', "aria-label": this.i18n('navigationName') }, index.h("ul", { key: '74949a63003979e99581b1bc3b916a78331c29d7', role: "list" }, index.h("slot", { key: '86a44bc1bdc0c05165a05cc0306a23972a843951' })))));
+        return (index.h("div", { key: '9abc91504e4e79581481f7f71cd3d1c7f3fa3a9b', class: "gux-container" }, index.h("nav", { key: '2d6f7122c6ab0dd69df810be080e19714a80001d', "aria-label": this.i18n('navigationName') }, index.h("ul", { key: '2341f3691b1ca3fb85553b52eaab343a013d01e0', role: "list" }, index.h("slot", { key: '3f3f0432dfd21f30cd105bd325dde75a1c21fef2' })))));
     }
     static get delegatesFocus() { return true; }
     get root() { return index.getElement(this); }

package/dist/cjs/gux-sort-control.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-79505d14.js');
 const index$1 = require('./index-16a4179e.js');
-const usage = require('./usage-62c2ce66.js');
+const usage = require('./usage-1d93a743.js');
 const getClosestElement = require('./get-closest-element-9e41d6b9.js');
 const onMutation = require('./on-mutation-d800434a.js');
 const en = require('./en-807a354e.js');
@@ -108,13 +108,13 @@ const GuxSortControl = class {
         }
     }
     render() {
-        return (index.h("div", { key: '327d945e3a3cc696f8fd99f3a256bf9b8e6db7c3', class: "gux-container" }, index.h("button", { key: 'a55b78603cccf8d7c0a916710a89f8ced0610931', class: {
+        return (index.h("div", { key: '33a69ff4039ba50b83b4b3ceea8730d89bff1bc5', class: "gux-container" }, index.h("button", { key: 'f8599746413422b2bd01866b29c7ed415ecb6f52', class: {
                 'gux-sort-button': true,
                 'gux-active': this.active
-            }, type: "button", onClick: () => this.onClick(), "aria-label": this.getSRText(this.sort) }, index.h("gux-icon", { key: '8be88af24dc3b94726b7d0ccc40159df14a0cba7', class: {
+            }, type: "button", onClick: () => this.onClick(), "aria-label": this.getSRText(this.sort) }, index.h("gux-icon", { key: 'eeabfbe9a6cdddd036d608160b9194c05e14ff03', class: {
                 'gux-sort-icon': true,
                 'gux-left': this.isLeftAlignIcon
-            }, "icon-name": this.getIconName(this.sort), decorative: true })), index.h("div", { key: '0b9530eae9edc3532e1f41bde7954e89221df061', class: "gux-resize-spacer" })));
+            }, "icon-name": this.getIconName(this.sort), decorative: true })), index.h("div", { key: '0eef282751a202b8e5b244d90a0bd5786b3e4358', class: "gux-resize-spacer" })));
     }
     static get delegatesFocus() { return true; }
     get root() { return index.getElement(this); }

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

@@ -146,13 +146,13 @@ const GuxSubmenu = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: 'a4143a341b3545327854eaf11c6397ca7fd7d48e' }, index.h("button", { key: 'bd9f07eb13501fc00a581168cbe98088a05c8704', type: "button", class: {
+        return (index.h(index.Host, { key: '3bf5bd2a023b20151c61bc3760e2acb74763378a' }, index.h("button", { key: '6243e772096b2add4600fa8021707106386c5de2', type: "button", class: {
                 'gux-submenu-button': true,
                 'gux-submenu-button-active': this.isShown
-            }, role: "menuitem", tabIndex: -1, ref: el => (this.buttonElement = el), "aria-haspopup": "true", "aria-expanded": this.isShown.toString() }, index.h("span", { key: '135c5bf0045d6a46a1a19903794c659a15e9c2c0', class: "gux-submenu-button-text" }, this.label), index.h("gux-icon", { key: '878d00043d57e44acfa41de49851519a9258d291', class: "gux-submenu-open-icon", "icon-name": "custom/chevron-right-small-regular", decorative: true })), index.h("div", { key: '4585cdcee9c9c0613d5dd363d134ee4891655fb5', ref: el => (this.submenuElement = el), class: {
+            }, role: "menuitem", tabIndex: -1, ref: el => (this.buttonElement = el), "aria-haspopup": "true", "aria-expanded": this.isShown.toString() }, index.h("span", { key: 'c108d3332766be36b480ae807ca2efe92e8e5b79', class: "gux-submenu-button-text" }, this.label), index.h("gux-icon", { key: '0eb542761f30daef77e56e2b6de3a24196414fa0', class: "gux-submenu-open-icon", "icon-name": "custom/chevron-right-small-regular", decorative: true })), index.h("div", { key: '9f7e7d13a7f526abbbed057b292c41928bbf0e76', ref: el => (this.submenuElement = el), class: {
                 'gux-submenu-wrapper': true,
                 'gux-shown': this.isShown
-            } }, index.h("div", { key: 'b846d6aa7ba96e9bde27b5608d8849c8a0900f86', role: "menu", class: "gux-submenu-content", ref: el => (this.submenuContentElement = el) }, index.h("slot", { key: '9bd601e3eeed7e455195d438a1c68632f4c69693' })))));
+            } }, index.h("div", { key: 'e693eb0aad3f58230f3783063b788612ea623171', role: "menu", class: "gux-submenu-content", ref: el => (this.submenuContentElement = el) }, index.h("slot", { key: 'ba7183759f74accc328c7f028ebab4525a9124f6' })))));
     }
     get root() { return index.getElement(this); }
 };

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

@@ -20,7 +20,7 @@ const GuxSwitchItem = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: 'ae34392f0292d4d2cc8728911337e787d993b89d', class: { 'gux-selected': this.selected } }, index.h("button", { key: '5a04666a3758787567515f886ec21fdbaa6fec16', type: "button", class: "gux-switch-item", disabled: this.disabled }, index.h("slot", { key: '8b193776a94310ca90d3a1628f88fde7067a414c' }))));
+        return (index.h(index.Host, { key: 'dfec7f615a7355fdad50c1e5cd6e8c78a05cf3fd', class: { 'gux-selected': this.selected } }, index.h("button", { key: '70ca8f456fcfd5655cf46f34d64f014e000542a8', type: "button", class: "gux-switch-item", disabled: this.disabled }, index.h("slot", { key: '7b837c5be672d9323e5a08f4f80ef6f56d5bd654' }))));
     }
 };
 GuxSwitchItem.style = GuxSwitchItemStyle0;

package/dist/cjs/gux-switch-legacy.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-79505d14.js');
 const simulateNativeEvent = require('./simulate-native-event-e88bf64f.js');
-const usage = require('./usage-62c2ce66.js');
+const usage = require('./usage-1d93a743.js');
 
 const guxSwitchCss = ":host{display:flex;align-items:flex-end}";
 const GuxSwitchLegacyStyle0 = guxSwitchCss;
@@ -37,7 +37,7 @@ const GuxSwitch = class {
         });
     }
     render() {
-        return (index.h(index.Host, { key: '5867673a98f3970fba12df7e8e447043462747a0', role: "group", class: `gux-${this.layout}` }, index.h("slot", { key: '014692f4ce3ebe92883d1db66869b00c5c9eb331', onSlotchange: this.slotChanged.bind(this) })));
+        return (index.h(index.Host, { key: 'd31601a61d149eb26c14c6bc184fd33de5da5f6a', role: "group", class: `gux-${this.layout}` }, index.h("slot", { key: 'f743ee37bec5f414c7b06f9145dc42cc8fee4fee', onSlotchange: this.slotChanged.bind(this) })));
     }
     get root() { return index.getElement(this); }
 };

package/dist/cjs/gux-tab-advanced-list.cjs.entry.js

@@ -3076,7 +3076,7 @@ const GuxTabAdvancedList = class {
     render() {
         return [
             this.renderAlert(),
-            index$1.h("div", { key: 'f683884af9cbabe4b10c6a4e85a612e291bd2756', class: "gux-tab-container" }, this.renderScrollButton('scrollLeft'), index$1.h("div", { key: 'a9826f288df1550cd6f2d5d348ea75a8b9068990', class: "gux-scrollable-section" }, index$1.h("div", { key: '4a697a8269c50ab2339324aaea1d07f4483b8ab9', class: "gux-tablist", role: "tablist", "data-gux-tab-sorting": this.keyboardSort, "aria-owns": this.triggerIds }, index$1.h("slot", { key: '8d2cf0beff9dfdc09654855ba744d6da4e2c977c' })), this.renderAddButton()), this.renderScrollButton('scrollRight'))
+            index$1.h("div", { key: '6a862f326119ccd5e902616af11542ea50c6fd52', class: "gux-tab-container" }, this.renderScrollButton('scrollLeft'), index$1.h("div", { key: '156fae07f6ac1099b85d7c7da22eb2714a5915ef', class: "gux-scrollable-section" }, index$1.h("div", { key: '42ec2be4efe5d5b1ef118d886ba2ad4d0e930a38', class: "gux-tablist", role: "tablist", "data-gux-tab-sorting": this.keyboardSort, "aria-owns": this.triggerIds }, index$1.h("slot", { key: '86db5eb583e6b9ed5b94e1d559fb1ad2e85fcf20' })), this.renderAddButton()), this.renderScrollButton('scrollRight'))
         ];
     }
     renderAlert() {

package/dist/cjs/gux-tab-advanced-panel.cjs.entry.js

@@ -24,7 +24,7 @@ const GuxTabAdvancedPanel = class {
         }
     }
     render() {
-        return (index.h("div", { key: 'a12ed07397a7a1a59c7c495e4e42883e959c0e75', id: `gux-${this.tabId}-panel`, class: "gux-tabpanel", role: "tabpanel", "aria-labelledby": `gux-${this.tabId}-tab`, tabIndex: 0, hidden: !this.active, "aria-live": "assertive" }, index.h("slot", { key: 'ccb582d3baf457fd08e0061349f4093c5775798e' })));
+        return (index.h("div", { key: '221df85edd5e14d94b6cfd28e00213a087fd912b', id: `gux-${this.tabId}-panel`, class: "gux-tabpanel", role: "tabpanel", "aria-labelledby": `gux-${this.tabId}-tab`, tabIndex: 0, hidden: !this.active, "aria-live": "assertive" }, index.h("slot", { key: '6eb92809cb614436441d81dcf6f9eaabf0315b7f' })));
     }
     static get watchers() { return {
         "active": ["watchActivePanel"]

package/dist/cjs/gux-tab-advanced.cjs.entry.js

@@ -159,12 +159,12 @@ const GuxTabAdvanced = class {
     }
     render() {
         return [
-            index.h("div", { key: 'f4a2024bbf767e7251a31c033b49ea7f39ed1dfa', class: {
+            index.h("div", { key: '5e66c12d32572392a881877d7a6040db3ffe68f4', class: {
                     'gux-tab': true,
                     'gux-selected': this.active,
                     'gux-dropdown-options': this.hasDropdownOptions,
                     'gux-disabled': this.guxDisabled
-                } }, index.h("div", { key: '5c9d6fdc6aba950faa0e563b96bd0847714466f1', class: "gux-buttons" }, this.renderTabButton(), this.renderTabOptions()), index.h("div", { key: 'a91a5e1fd3af0dce2fd335ad0656d70bb10673e4', class: "gux-divider" }))
+                } }, index.h("div", { key: 'db7a5b68810556abc4e8c9b1f855ae1ffa883c99', class: "gux-buttons" }, this.renderTabButton(), this.renderTabOptions()), index.h("div", { key: '65aa7c26657456ab1003006dcc53eabf2e8f0d07', class: "gux-divider" }))
         ];
     }
     get root() { return index.getElement(this); }

package/dist/cjs/gux-tab-list.cjs.entry.js

@@ -283,9 +283,9 @@ const GuxTabList = class {
         });
     }
     render() {
-        return (index.h("div", { key: '0d57e6fa3082978348ec2536ac2091e491a34bef', class: "gux-tab-container" }, this.hasHorizontalScrollbar
+        return (index.h("div", { key: '1b330be648990865d7f5da8795be6890c4198af4', class: "gux-tab-container" }, this.hasHorizontalScrollbar
             ? this.renderScrollButton('scrollLeft')
-            : this.renderScrollButton('scrollUp'), index.h("div", { key: '723e959d00b452934630e4dbbe56c70b174143e8', role: "tablist", class: "gux-scrollable-section", "aria-owns": this.triggerIds }, index.h("slot", { key: 'bfba363eb894503fd3b38e40ee2427504e2f2510' })), this.hasHorizontalScrollbar
+            : this.renderScrollButton('scrollUp'), index.h("div", { key: 'aae95ecd7710fbbb73cdc0f8ce58e79e7aa9061f', role: "tablist", class: "gux-scrollable-section", "aria-owns": this.triggerIds }, index.h("slot", { key: 'b5a79dd6f97e11b8b5d9691ad135065e0219d00d' })), this.hasHorizontalScrollbar
             ? this.renderScrollButton('scrollRight')
             : this.renderScrollButton('scrollDown')));
     }

package/dist/cjs/gux-tab-panel.cjs.entry.js

@@ -24,7 +24,7 @@ const GuxTabPanel = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: 'a2ccb73193a93dafdac5cf27c7dc99b9eab23502', id: `gux-${this.tabId}-panel`, role: "tabpanel", "aria-labelledby": `gux-${this.tabId}-tab`, tabIndex: 0, hidden: !this.active }, index.h("slot", { key: '9b37b81badd14c3312ff95d11b660728b7fef9b9' })));
+        return (index.h(index.Host, { key: 'c769b04036deeef5591829f068b5e88288620440', id: `gux-${this.tabId}-panel`, role: "tabpanel", "aria-labelledby": `gux-${this.tabId}-tab`, tabIndex: 0, hidden: !this.active }, index.h("slot", { key: '4b3ade9a8d9f15f89f15e96b0e970c15894c51ea' })));
     }
     static get watchers() { return {
         "active": ["watchActivePanel"]