genesys-spark-components 4.111.6 → 4.113.0

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: 'ffe8dc89c851b4d23b95039a658ce5ac6d7c19f8' }, index.h("div", { key: 'bf21c1a4977b2635d7f04e30be05b110de52d1b6', class: "gux-action-group-container" }, index.h("slot", { key: '49e7caf93ceb05b11ddddf5a64696782e2d04577' })), this.renderActionGroupDivider()));
+        return (index.h(index.Host, { key: '0b8535ac364ff932423814854e72b91e9c85c3bd' }, index.h("div", { key: '6894ddec02c878e577d54a67a78d7614c1074976', class: "gux-action-group-container" }, index.h("slot", { key: 'd437c37fd5ff3b10b009eb69e4c11f8616209361' })), this.renderActionGroupDivider()));
     }
     get root() { return index.getElement(this); }
 };

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

@@ -4,9 +4,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-2dd05ef3.js');
 const onClickOutside = require('./on-click-outside-bb55ad5e.js');
-const usage = require('./usage-8b693ae3.js');
+const usage = require('./usage-e8717c7d.js');
 const index$1 = require('./index-d7208697.js');
-const en = require('./en-93832113.js');
+const en = require('./en-b47b8378.js');
 const afterNextRender = require('./after-next-render-162425fe.js');
 require('./get-closest-element-9e41d6b9.js');
 
@@ -28,6 +28,7 @@ const GuxRichTextEditorActionLink = class {
         index.registerInstance(this, hostRef);
         this.linkOptions = index.createEvent(this, "linkOptions", 7);
         this.disabled = false;
+        this.isActive = false;
         this.isOpen = false;
     }
     onClickOutside() {
@@ -80,11 +81,11 @@ const GuxRichTextEditorActionLink = class {
     }
     renderTooltip() {
         if (!this.disabled) {
-            return (index.h("gux-tooltip", null, index.h("div", { slot: "content" }, this.i18n('link'))));
+            return (index.h("gux-tooltip-beta", null, index.h("div", { slot: "content" }, this.i18n('link'))));
         }
     }
     render() {
-        return (index.h(index.Host, { key: '166f87e1bb3c3565cb3dd4e05099a83cfa23f80a' }, index.h("gux-button-slot", { key: '15b8d3f16c91c7d601e3859cabc7fb71871f4533', accent: "ghost", "icon-only": true }, index.h("button", { key: '8349fa9d8d15f1f820035d1669ef60d10829022d', id: "popover-target", class: { 'gux-is-pressed': this.isOpen }, onClick: () => this.togglePopover(), ref: el => (this.actionButton = el), type: "button", disabled: this.disabled, "aria-label": this.i18n('link'), "aria-haspopup": "true", "aria-expanded": this.isOpen.toString() }, index.h("gux-icon", { key: 'c98e7654129a3160adbc03b9c08c4109122fff21', size: "small", "icon-name": "fa/link-simple-regular", decorative: true })), this.renderTooltip()), index.h("gux-popover", { key: 'd9c70c9f4ad55ebb955751d349d9242b88a16ab1', "is-open": this.isOpen, for: "popover-target" }, index.h("div", { key: '156f243b70d8cf32e237ea751dd274cb7b764176', class: "gux-popover-content-wrapper" }, index.h("gux-form-field-text-like", { key: '819c53504c6e99da78637c9a0cdebac0c19cccb2' }, index.h("input", { key: '7e11f6f5c0032c99cda31355b0b8b757dccbea47', id: "textToDisplay", ref: el => (this.textToDisplayInputElement = el), slot: "input", type: "text" }), index.h("label", { key: '3f66bb54612a3cac364a8f43025bcd7f095656f7', slot: "label" }, this.i18n('textToDisplay'))), index.h("gux-form-field-text-like", { key: '842113a08dbcc053ac64726c87fb5a2d89b259de' }, index.h("input", { key: '836db888c19706a4b14dc7d35eb55e902fcd45a5', ref: el => (this.linkAddressInputElement = el), slot: "input", type: "text" }), index.h("label", { key: 'aaf0d14cccb4b44bf1a7c32bad1302975244fc5b', slot: "label" }, this.i18n('linkAddress'))), index.h("gux-cta-group", { key: '8e3a45cb60f5b7d99504518ccc88f0d6a57e4d53', align: "end" }, index.h("gux-button", { key: 'a8893b5a2265d48e07eeb154d19b4ccebc6e7147', onClick: () => this.emitLinkOptions(), slot: "primary" }, this.i18n('insert')), index.h("gux-button", { key: '34855e70fa26628fd9f64420acb6b654bdbaf9ab', onClick: () => this.togglePopover(), slot: "dismiss" }, this.i18n('cancel')))))));
+        return (index.h(index.Host, { key: 'c51c67c1063f35575b11db91781763b1a54f9bb1' }, index.h("gux-button-slot", { key: '921372b56a841e108352fe26722d3455e3fcf799', accent: "ghost", "icon-only": true }, index.h("button", { key: '1fad4601444c237ae0931950b0bbe031ed265d7f', id: "popover-target", class: { 'gux-is-pressed': this.isActive || this.isOpen }, onClick: () => this.togglePopover(), ref: el => (this.actionButton = el), type: "button", disabled: this.disabled, "aria-label": this.i18n('link'), "aria-haspopup": "true", "aria-expanded": this.isOpen.toString(), "aria-pressed": this.isActive.toString() }, index.h("gux-icon", { key: 'aed90b615e1e1c4ff08113cfa08a08ee2289f663', size: "small", "icon-name": "fa/link-simple-regular", decorative: true })), this.renderTooltip()), index.h("gux-popover", { key: '4bf2e0f0c8d8e4b55b814fb45f654cc3a4aea66d', "is-open": this.isOpen, for: "popover-target" }, index.h("div", { key: '1238ca6fe3ca06e12d822a4d4e83e91181e8a44a', class: "gux-popover-content-wrapper" }, index.h("gux-form-field-text-like", { key: 'bd7adba7b234b2ee11fd48429757c5e4b8e4cbac' }, index.h("input", { key: '4e04b841b194fb92674af30148c9e6d843caaf56', id: "textToDisplay", ref: el => (this.textToDisplayInputElement = el), slot: "input", type: "text" }), index.h("label", { key: '239b6f659d59a85db2137691c9a4d7a05c003b83', slot: "label" }, this.i18n('textToDisplay'))), index.h("gux-form-field-text-like", { key: 'fe15940a60b7e196f24d578d101f1ef5caf0650c' }, index.h("input", { key: 'ad8a588ed0433b112929bbac1ee3a9371a467671', ref: el => (this.linkAddressInputElement = el), slot: "input", type: "text" }), index.h("label", { key: 'ed65192ef701827a4ed60579c51164aa1e4f15dd', slot: "label" }, this.i18n('linkAddress'))), index.h("gux-cta-group", { key: '6369a6d6bd4a5268c955d12a81b05de28a974f63', align: "end" }, index.h("gux-button", { key: '468ccc4f482e7a622d2ca3b4fee2b1aae413d831', onClick: () => this.emitLinkOptions(), slot: "primary" }, this.i18n('insert')), index.h("gux-button", { key: '8f46d9f041a70f747a56f398eaa62d346b86559f', onClick: () => this.togglePopover(), slot: "dismiss" }, this.i18n('cancel')))))));
     }
     get root() { return index.getElement(this); }
 };

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

@@ -3,12 +3,12 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-2dd05ef3.js');
-const usage = require('./usage-8b693ae3.js');
+const usage = require('./usage-e8717c7d.js');
 const guxRichTextEditor_service = require('./gux-rich-text-editor.service-fd5edfcf.js');
 const onClickOutside = require('./on-click-outside-bb55ad5e.js');
 const afterNextRender = require('./after-next-render-162425fe.js');
 const index$1 = require('./index-d7208697.js');
-const en = require('./en-93832113.js');
+const en = require('./en-b47b8378.js');
 require('./get-closest-element-26170ce0.js');
 require('./get-closest-element-9e41d6b9.js');
 
@@ -142,6 +142,11 @@ const GuxRichTextEditorActionRichStyle = class {
     renderListItem(item) {
         return (index.h("gux-truncate", { "max-lines": 1 }, item.textContent));
     }
+    renderTooltip() {
+        if (!this.disabled && !this.expanded) {
+            return (index.h("gux-tooltip-beta", null, index.h("div", { slot: "content" }, this.i18n('richStyle'))));
+        }
+    }
     onActionButtonClick() {
         this.expanded = !this.expanded;
         if (this.expanded) {
@@ -166,12 +171,12 @@ const GuxRichTextEditorActionRichStyle = class {
         return (index.h("div", { class: "gux-list-container", slot: "popup" }, index.h("gux-rich-text-editor-list", { ref: el => (this.listElement = el), onClick: e => this.onListClick(e) }, index.h("slot", null))));
     }
     renderTarget() {
-        return (index.h("gux-button-slot", { accent: "ghost", slot: "target" }, index.h("button", { type: "button", ref: el => (this.actionButton = el), class: { 'gux-is-pressed': this.expanded }, onClick: () => this.onActionButtonClick(), disabled: this.disabled || guxRichTextEditor_service.hasDisabledParent(this.root), "aria-haspopup": "true", "aria-expanded": this.expanded.toString() }, this.renderTargetDisplay(), index.h("gux-icon", { "icon-name": this.expanded
+        return (index.h("gux-button-slot", { accent: "ghost", slot: "target" }, index.h("button", { type: "button", ref: el => (this.actionButton = el), class: { 'gux-is-pressed': this.expanded }, onClick: () => this.onActionButtonClick(), disabled: this.disabled || guxRichTextEditor_service.hasDisabledParent(this.root), "aria-haspopup": "true", "aria-expanded": this.expanded.toString() }, this.renderTargetDisplay(), index.h("gux-icon", { size: "small", "icon-name": this.expanded
                 ? 'custom/chevron-up-small-regular'
-                : 'custom/chevron-down-small-regular', "screenreader-text": this.i18n('richStyleDropdown') }))));
+                : 'custom/chevron-down-small-regular', "screenreader-text": this.i18n('richStyleDropdown') })), this.renderTooltip()));
     }
     render() {
-        return (index.h("gux-popup", { key: 'f08a0a259e66577c1d0efd652ef0ade412b54963', expanded: this.expanded, exceedTargetWidth: true, placement: "bottom-start" }, this.renderTarget(), this.renderPopup()));
+        return (index.h("gux-popup", { key: '40e3c24df747dea627240ba4604c7d7c595a83b5', expanded: this.expanded, exceedTargetWidth: true, placement: "bottom-start" }, this.renderTarget(), this.renderPopup()));
     }
     static get delegatesFocus() { return true; }
     get root() { return index.getElement(this); }

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

@@ -0,0 +1,132 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-2dd05ef3.js');
+const onClickOutside = require('./on-click-outside-bb55ad5e.js');
+const usage = require('./usage-e8717c7d.js');
+const index$1 = require('./index-d7208697.js');
+const en = require('./en-b47b8378.js');
+const guxRichTextEditor_service = require('./gux-rich-text-editor.service-fd5edfcf.js');
+const whenEventIsFrom = require('./when-event-is-from-dd77a8d3.js');
+const afterNextRender = require('./after-next-render-162425fe.js');
+const eventIsFrom = require('./event-is-from-3ab90a6c.js');
+require('./get-closest-element-9e41d6b9.js');
+require('./get-closest-element-26170ce0.js');
+
+const guxRichTextEditorActionTextHighlightCss = ":host{display:block}.gux-text-highlight-popup{display:flex;flex-direction:column;gap:var(--gse-ui-rte-colorPalette-gap);inline-size:104px;padding:12px;margin:0;overflow-y:auto;background:var(--gse-ui-menu-backgroundColor);border-color:var(--gse-ui-menu-border-color);border-style:var(--gse-ui-menu-border-style);border-width:var(--gse-ui-menu-border-width);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-text-highlight-popup gux-rich-text-editor-list{display:flex;flex-direction:row;flex-wrap:wrap;gap:var(--gse-ui-rte-colorPalette-gap);align-items:flex-start;justify-content:flex-start;padding:0}.gux-text-highlight-popup gux-button-slot{align-self:center;block-size:var(--gse-ui-rte-menuButton-height)}.gux-text-highlight-popup gux-button-slot button{block-size:var(--gse-ui-rte-menuButton-height)}gux-button-slot button.gux-is-pressed{color:var(--gse-ui-button-ghost-active-foregroundColor);background-color:var(--gse-ui-button-ghost-active-backgroundColor)}";
+const GuxRichTextEditorActionTextHighlightStyle0 = guxRichTextEditorActionTextHighlightCss;
+
+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 GuxRichTextEditorActionTextHighlight = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.noHighlightAction = index.createEvent(this, "noHighlightAction", 7);
+        this.disabled = false;
+        this.isActive = false;
+        this.expanded = false;
+    }
+    onClickOutside() {
+        this.expanded = false;
+    }
+    watchDisabled(disabled) {
+        if (disabled) {
+            this.expanded = false;
+        }
+    }
+    handleKeydown(event) {
+        const isHighlightItemEvent = eventIsFrom.eventIsFrom('gux-rich-highlight-list-item', event);
+        const composedPath = event.composedPath();
+        switch (event.key) {
+            case 'Escape':
+                this.expanded = false;
+                this.actionButton.focus();
+                break;
+            case 'ArrowDown':
+            case 'Enter':
+                if (composedPath.includes(this.actionButton)) {
+                    event.preventDefault();
+                    this.expanded = true;
+                    this.focusNoHighlightActionButton();
+                }
+                break;
+            case 'Tab':
+                if (event.shiftKey) {
+                    return;
+                }
+                if (isHighlightItemEvent) {
+                    this.expanded = false;
+                }
+                break;
+        }
+    }
+    async componentWillLoad() {
+        usage.trackComponent(this.root);
+        this.i18n = await index$1.buildI18nForComponent(this.root, en.translationResources);
+    }
+    togglePopup() {
+        this.expanded = !this.expanded;
+        if (this.expanded) {
+            this.focusNoHighlightActionButton();
+        }
+        else {
+            this.actionButton.focus();
+        }
+    }
+    focusNoHighlightActionButton() {
+        afterNextRender.afterNextRender(() => {
+            this.noHighlightActionButton.focus();
+        });
+    }
+    renderTooltip() {
+        if (!this.disabled && !this.expanded) {
+            return (index.h("gux-tooltip-beta", null, index.h("div", { slot: "content" }, this.i18n('textHighlight'))));
+        }
+    }
+    renderPopup() {
+        return (index.h("div", { class: "gux-text-highlight-popup", slot: "popup" }, this.renderNoHighlightAction(), this.renderTextHighlightColors()));
+    }
+    renderNoHighlightAction() {
+        return (index.h("gux-button-slot", { accent: "tertiary" }, index.h("button", { type: "button", ref: el => (this.noHighlightActionButton = el), onClick: () => this.emitNoHighlightAction() }, index.h("gux-truncate", { "max-lines": 1 }, this.i18n('noHighlight')))));
+    }
+    onListClick(event) {
+        whenEventIsFrom.whenEventIsFrom('gux-rich-highlight-list-item', event, () => {
+            this.expanded = false;
+            this.actionButton.focus();
+        });
+    }
+    renderTextHighlightColors() {
+        return (index.h("gux-rich-text-editor-list", { onClick: (e) => this.onListClick(e) }, index.h("slot", null)));
+    }
+    emitNoHighlightAction() {
+        this.noHighlightAction.emit();
+        this.expanded = false;
+        this.actionButton.focus();
+    }
+    renderTarget() {
+        return (index.h("gux-button-slot", { accent: "ghost", "icon-only": true, slot: "target" }, index.h("button", { type: "button", ref: el => (this.actionButton = el), onClick: () => this.togglePopup(), disabled: this.disabled || guxRichTextEditor_service.hasDisabledParent(this.root), class: { 'gux-is-pressed': this.isActive || this.expanded }, "aria-haspopup": "true", "aria-expanded": this.expanded.toString(), "aria-pressed": this.isActive.toString() }, index.h("gux-icon", { size: "small", "icon-name": "fa/highlighter-line-regular", "screenreader-text": this.i18n('textHighlight') })), this.renderTooltip()));
+    }
+    render() {
+        return (index.h("gux-popup", { key: '5ab33be4e0c45633f0e14de414429c818b81e6ed', disabled: this.disabled, expanded: this.expanded, exceedTargetWidth: true, placement: "bottom-start" }, this.renderTarget(), this.renderPopup()));
+    }
+    static get delegatesFocus() { return true; }
+    get root() { return index.getElement(this); }
+    static get watchers() { return {
+        "disabled": ["watchDisabled"]
+    }; }
+};
+__decorate([
+    onClickOutside.OnClickOutside({ triggerEvents: 'mousedown' })
+], GuxRichTextEditorActionTextHighlight.prototype, "onClickOutside", null);
+GuxRichTextEditorActionTextHighlight.style = GuxRichTextEditorActionTextHighlightStyle0;
+
+exports.gux_rich_text_editor_action_text_highlight = GuxRichTextEditorActionTextHighlight;

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

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-2dd05ef3.js');
-const usage = require('./usage-8b693ae3.js');
+const usage = require('./usage-e8717c7d.js');
 const index$1 = require('./index-d7208697.js');
-const en = require('./en-93832113.js');
+const en = require('./en-b47b8378.js');
 const guxRichTextEditor_service = require('./gux-rich-text-editor.service-fd5edfcf.js');
 require('./get-closest-element-9e41d6b9.js');
 require('./get-closest-element-26170ce0.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: '1df220d4192bc1e04cd74c7283ee90421f0ce2e0', class: {
+        return (index.h("div", { key: '3ec3c4adf65ef5a7f5ff4ea3ac18002b28fa1009', class: {
                 'gux-rich-text-editor-container': true,
                 'gux-disabled': this.disabled
-            } }, index.h("div", { key: '8cb67dbf9f8f8eba7f48a838ad88835681100d62', class: "gux-rich-text-editor-toolbar-container" }, this.renderTypographicalEmphasis(), this.renderTextStyling(), this.renderListsIndentation(), this.renderInserting(), this.renderGlobalAction()), index.h("slot", { key: 'ef749f768106064cf77217139f0b191a3d07f35f', name: "editor" })));
+            } }, index.h("div", { key: '44dacd9cf2d5686e0f10242df4c95a93cbc463d2', class: "gux-rich-text-editor-toolbar-container" }, this.renderTypographicalEmphasis(), this.renderTextStyling(), this.renderListsIndentation(), this.renderInserting(), this.renderGlobalAction()), index.h("slot", { key: 'f3393a71c2d917f89a9b2d98aae0cb22b1f054c2', name: "editor" })));
     }
     get root() { return index.getElement(this); }
 };

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

@@ -3,16 +3,19 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-2dd05ef3.js');
-const usage = require('./usage-8b693ae3.js');
+const usage = require('./usage-e8717c7d.js');
 const guxList_service = require('./gux-list.service-cf8447cb.js');
 
 const guxRichTextEditorListCss = ":host{display:flex;flex-direction:column;flex-wrap:nowrap;place-content:stretch flex-start;align-items:flex-start;padding:var(--gse-ui-menu-padding)}";
 const GuxRichTextEditorListStyle0 = guxRichTextEditorListCss;
 
 /**
- * @slot - collection of gux-rich-style-list-item elements
+ * @slot - collection of gux-rich-style-list-item or gux-rich-highlight-list-item elements.
  */
-const validFocusableItems = ['gux-rich-style-list-item'];
+const validFocusableItems = [
+    'gux-rich-style-list-item',
+    'gux-rich-highlight-list-item'
+];
 const GuxRichTextEditorList = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
@@ -31,6 +34,18 @@ const GuxRichTextEditorList = class {
         }
         return [];
     }
+    //Set the first gux-rich-highlight-list-item tab-index to 0 so we can tab to the list of colors.
+    handleHighlighItemsNavigation() {
+        if (this.listItemsSlot) {
+            const firstHighlightItem = this.listItemsSlot
+                .assignedElements()
+                .find(el => el.tagName.toLowerCase() === 'gux-rich-highlight-list-item');
+            if (firstHighlightItem) {
+                const buttonElement = firstHighlightItem.shadowRoot.querySelector('button');
+                buttonElement.tabIndex = 0;
+            }
+        }
+    }
     setListItems() {
         this.listItems = this.listItemElements;
         this.internallistitemsupdated.emit();
@@ -38,25 +53,29 @@ const GuxRichTextEditorList = class {
     async componentWillLoad() {
         usage.trackComponent(this.root);
         this.setListItems();
+        this.handleHighlighItemsNavigation();
     }
     onKeyDown(event) {
-        switch (event.key) {
-            case 'ArrowUp':
-                event.preventDefault();
-                guxList_service.previous(this.root, validFocusableItems);
-                break;
-            case 'Home':
-                event.preventDefault();
-                guxList_service.first(this.root, validFocusableItems);
-                break;
-            case 'ArrowDown':
-                event.preventDefault();
-                guxList_service.next(this.root, validFocusableItems);
-                break;
-            case 'End':
-                event.preventDefault();
-                guxList_service.last(this.root, validFocusableItems);
-                break;
+        const target = event.target;
+        if (!target) {
+            return;
+        }
+        const keyHandlers = {
+            ArrowUp: () => guxList_service.previous(this.root, validFocusableItems),
+            ArrowDown: () => guxList_service.next(this.root, validFocusableItems),
+            Home: () => guxList_service.first(this.root, validFocusableItems),
+            End: () => guxList_service.last(this.root, validFocusableItems)
+        };
+        if (target.matches('gux-rich-highlight-list-item')) {
+            Object.assign(keyHandlers, {
+                ArrowLeft: () => guxList_service.previous(this.root, validFocusableItems),
+                ArrowRight: () => guxList_service.next(this.root, validFocusableItems)
+            });
+        }
+        const handler = keyHandlers[event.key];
+        if (handler) {
+            event.preventDefault();
+            handler();
         }
     }
     // eslint-disable-next-line @typescript-eslint/require-await
@@ -67,11 +86,8 @@ const GuxRichTextEditorList = class {
     async guxFocusLastItem() {
         guxList_service.last(this.root, validFocusableItems);
     }
-    renderFocusTarget() {
-        return (index.h("span", { tabindex: "-1", "aria-hidden": "true" }));
-    }
     render() {
-        return (index.h(index.Host, { key: '7157211c43c642991e48acb643a307180692b689', role: "list" }, this.renderFocusTarget(), index.h("slot", { key: '86a09fcf4cd759973b4c256356890800ecea5945', onSlotchange: () => this.setListItems() })));
+        return (index.h(index.Host, { key: 'a9e2c6054a4069423aab4b7ab97812efe2a3bbd0', role: "list" }, index.h("slot", { key: '8559c06a39a7094a91fcf4ddf8a61769c58df922', onSlotchange: () => this.setListItems() })));
     }
     static get delegatesFocus() { return true; }
     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: '1f2d87cc59ffc24eafa3e7baccc965dee3eea0d1', "label-position": "screenreader" }, index.h("input", { key: '07931cc1dbf5040210c1b76b08dbfe4dd244adae', ref: el => (this.inputElement = el), class: this.selected
+        return (index.h("gux-form-field-checkbox", { key: 'c534d256cb8e4a8f637b43313b13238678ddc4ab', "label-position": "screenreader" }, index.h("input", { key: '8e8b98b748d829dd2bd546a1e0bc4a47c202b59b', 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: '1316c55d43b132eb216dbb279c2b57ab4185ea2d', slot: "label", htmlFor: this.id }, "\u200B", index.h("span", { key: 'da6ea49692acbe96531eb37f1e1b6d220db93cc5' }, 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: 'a214f6f5ad4563fe306184372b575dcf6589da92', slot: "label", htmlFor: this.id }, "\u200B", index.h("span", { key: 'dbe29e2cb86d9a437357e8d292fa059d670a5a94' }, 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-2dd05ef3.js');
-const usage = require('./usage-8b693ae3.js');
+const usage = require('./usage-e8717c7d.js');
 
 const guxScreenReaderCss = ":host{position:relative}.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: '45a49c75e52bbc4c7bcaf8870118fdaf50b48f25', class: "gux-sr-only" }, index.h("slot", { key: 'c1cc69187d4562bfde469ce092fb11bab7869c59' })));
+        return (index.h("span", { key: 'c0c226cfc59cc8dabfcf12adeb882183b579dae9', class: "gux-sr-only" }, index.h("slot", { key: 'f3fb06e5682aa51f889fc5b9651dc6198a1b2360' })));
     }
     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-2dd05ef3.js');
 const simulateNativeEvent = require('./simulate-native-event-e88bf64f.js');
-const usage = require('./usage-8b693ae3.js');
+const usage = require('./usage-e8717c7d.js');
 
 const guxSegmentedControlCss = ":host{display:inline-flex}";
 const GuxSegmentedControlBetaStyle0 = guxSegmentedControlCss;
@@ -42,7 +42,7 @@ const GuxSegmentedControl = class {
         });
     }
     render() {
-        return (index.h(index.Host, { key: '2a8ead16000faec75121dfa0d27c6f0853098d8b', role: "group" }, index.h("slot", { key: '7395d3bdec9be3277357227825eb20bc20f0d648', onSlotchange: this.slotChanged.bind(this) })));
+        return (index.h(index.Host, { key: 'c57afa576033c08c059035fb3338e9a4049dc699', role: "group" }, index.h("slot", { key: 'ef8243fc3fef43c3e680f8772d2aeafd1f638896', onSlotchange: this.slotChanged.bind(this) })));
     }
     get root() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -53,19 +53,19 @@ const GuxSegmentedControlItem = class {
         }
     }
     render() {
-        return (index.h("div", { key: 'c8996164a4408dc94091f51e370ae642ee176f1b', class: {
+        return (index.h("div", { key: '4d6b0dfc7a78260ea7a18864aec9cc24a6976aef', class: {
                 'gux-container': true,
                 'gux-parent-disabled': this.hasDisabledParent(),
                 'gux-start': this.isInStartPosition(),
                 'gux-end': this.isInEndPosition()
-            } }, index.h("button", { key: '732bb008028e2bd3eea43b72913aa449aab750ea', class: {
+            } }, index.h("button", { key: 'a002a787ba83ce7c157849394375f278cf75a688', 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: 'c454e906a3c90f59adbfee0639b3493540021164', class: {
+            }, type: "button", disabled: this.disabled || this.hasDisabledParent() }, this.renderIconSlot(), index.h("div", { key: '29d7dafbb784a7acbb3aa430edd6df86c5b185f8', class: {
                 'gux-text': true,
                 'gux-icon-only': this.iconOnly
-            } }, index.h("slot", { key: 'be804d2c015dc75e438fecf5736e311678beee44', name: "text" }))), this.renderTooltip()));
+            } }, index.h("slot", { key: 'a0ec031b8d638331e30c9a3f6df5bf9525d2e36d', 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-2dd05ef3.js');
-const usage = require('./usage-8b693ae3.js');
+const usage = require('./usage-e8717c7d.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: '15bb201be48f8b5e0ea8130b8f571a342ec6e768', class: {
+        return (index.h("div", { key: 'b28ce59bdb9d5150a30f8df1a211b46ee9848a2e', class: {
                 'gux-selector-card': true,
                 [`gux-${this.variant}`]: true,
                 'gux-disabled': this.disabled
-            } }, index.h("div", { key: 'ee44e33a9b94c112161a1e44ea5d252d269082b6', class: "gux-content" }, index.h("div", { key: 'fcd3bc9d28281a9a4fa12dd0b3d0c12fa5441fa8', class: "gux-icon" }, index.h("slot", { key: '542a0ec6a7c218e36edab8d73fe7f1d45fec5b57', name: "icon" })), index.h("div", { key: 'c242c933b45b05bcdbd94c24ebb2200d4f6c0743', class: "gux-label-container" }, index.h("slot", { key: '873201da7e0ddeefc56bd2ea6d23e240d08473d7', name: "label" })), index.h("slot", { key: '953ef926caa01e09dd695232df7c49271aac855e', name: "input" }), this.renderDescription(), this.renderBadge())));
+            } }, index.h("div", { key: 'f14e0a4f22356a2a5b1cbfca9f7d249f5a8b5011', class: "gux-content" }, index.h("div", { key: '6fc4a7a04e1c53033d0902014e56a50b2a7cc1ad', class: "gux-icon" }, index.h("slot", { key: '1c1551e4058b56057a54816bb1a5377335540e7e', name: "icon" })), index.h("div", { key: '00277bd34a649eff6331404cd65c8715c3ad2407', class: "gux-label-container" }, index.h("slot", { key: '8fb89b7d2dfdb37574316cf31605aa2199b70b09', name: "label" })), index.h("slot", { key: 'd6bc13694aba6883ed8e3240c9c917d5a0a0be4d', 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-2dd05ef3.js');
-const usage = require('./usage-8b693ae3.js');
+const usage = require('./usage-e8717c7d.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: '5fa8e13dd7c5a6c681cd098d652d3804e74148ed', class: "gux-selector-cards" }, index.h("slot", { key: '7e7822a514bc74deb4335a779592cb380d51d7c1' })));
+        return (index.h("div", { key: '69e50b437e17b14b8e0fd5dbd3d3c3167bdb9b70', class: "gux-selector-cards" }, index.h("slot", { key: 'c8719a29b42c4241f72f67f45ae4c30605976ae4' })));
     }
     get root() { return index.getElement(this); }
 };

package/dist/cjs/gux-side-panel-beta.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-e8717c7d.js');
 const hasSlot = require('./has-slot-3edae188.js');
 
 const guxSidePanelCss = ":host{display:block;inline-size:fit-content;block-size:100%}:host([size=large]){max-inline-size:50%}.gux-side-panel{position:relative;display:flex;flex-direction:column;inline-size:calc(100vw - var(--gse-ui-sidePanel-shoud-minWidth));block-size:inherit;background-color:var(--gse-ui-sidePanel-backgroundColor);box-shadow:var(--gse-ui-sidePanel-boxShadow-offsetX) var(--gse-ui-sidePanel-boxShadow-offsetY) var(--gse-ui-sidePanel-boxShadow-blur) var(--gse-ui-sidePanel-boxShadow-spread) var(--gse-ui-sidePanel-boxShadow-color)}.gux-side-panel.gux-side-panel-small{max-inline-size:var(--gse-ui-sidePanel-widthSize-sm)}.gux-side-panel.gux-side-panel-medium{max-inline-size:var(--gse-ui-sidePanel-widthSize-md)}.gux-side-panel.gux-side-panel-large{max-inline-size:var(--gse-ui-sidePanel-widthSize-lg)}.gux-side-panel>header{position:relative;padding:var(--gse-ui-sidePanel-header-padding);border-block-end:var(--gse-ui-sidePanel-divider-width) var(--gse-ui-sidePanel-divider-style) var(--gse-ui-sidePanel-divider-color)}.gux-side-panel>header gux-dismiss-button{position:absolute;inset-block-start:calc(var(--gse-ui-sidePanel-header-dismiss-padding) - var(--gse-ui-modal-dismissButton-paddingTop));inset-inline-end:calc(var(--gse-ui-modal-dismissButton-paddingRight) - var(--gse-ui-sidePanel-header-dismiss-padding));display:block}.gux-side-panel .gux-side-panel-description{margin:var(--gse-ui-sidePanel-description-padding) !important}.gux-side-panel .gux-side-panel-content{display:flex;flex:1 1 100%;padding:var(--gse-ui-sidePanel-body-padding);overflow-y:auto;font-family:var(--gse-ui-sidePanel-description-text-fontFamily);font-size:var(--gse-ui-sidePanel-description-text-fontSize);font-weight:var(--gse-ui-sidePanel-description-text-fontWeight);line-height:var(--gse-ui-sidePanel-description-text-lineHeight);color:var(--gse-ui-sidePanel-descriptionColor)}.gux-side-panel>footer{flex:0 0 auto;padding:var(--gse-ui-sidePanel-footer-padding);border-block-start:var(--gse-ui-sidePanel-divider-width) var(--gse-ui-sidePanel-divider-style) var(--gse-ui-sidePanel-divider-color)}.gux-side-panel-description ::slotted(*){margin:0;font-family:var(--gse-ui-sidePanel-description-text-fontFamily) !important;font-size:var(--gse-ui-sidePanel-description-text-fontSize) !important;font-weight:var(--gse-ui-sidePanel-description-text-fontWeight) !important;line-height:var(--gse-ui-sidePanel-description-text-lineHeight) !important;color:var(--gse-ui-sidePanel-descriptionColor) !important}";
@@ -28,10 +28,10 @@ const GuxSidePanel = class {
         return null;
     }
     render() {
-        return (index.h("div", { key: 'af77c2638a4012bb9014eb781e4f1ddbeb470524', class: {
+        return (index.h("div", { key: '57b407cfe2e84ea6b951e141aebbf530f612e9bf', class: {
                 'gux-side-panel': true,
                 [`gux-side-panel-${this.size}`]: true
-            } }, index.h("header", { key: 'bf503719a742bcbfdf413d5484b642bf94aa01da' }, index.h("gux-dismiss-button", { key: 'b2c863f556557fb9610506914704db7df3aa1aa4', position: "inherit", onClick: this.onDismissHandler.bind(this) }), index.h("slot", { key: 'fec67433e32f8a04d0967c01e428fc3cd685956f', name: "heading" })), this.renderDescription(), index.h("div", { key: '84a5ce20f69e6c72d6720b9d9f23e45f5319f9ed', class: "gux-side-panel-content" }, index.h("slot", { key: '385b27ec2ff15d5600bc6e3cfe5e8b3ba74bc3f0', name: "content" })), index.h("footer", { key: '6f68ecac5d92194128ac63cb25cfe9fea08417ef' }, index.h("slot", { key: '74cba793bd0ed40eb39033691c74b220852ba86f', name: "footer" }))));
+            } }, index.h("header", { key: 'd3fcabb1691d927364ccb34d37fd1be467511893' }, index.h("gux-dismiss-button", { key: '353bb0e5806f0528ca0f67ab3e9d9b864039a61e', position: "inherit", onClick: this.onDismissHandler.bind(this) }), index.h("slot", { key: 'ab3775392ab44d8ca086d2bdfd2b0d966f6f3628', name: "heading" })), this.renderDescription(), index.h("div", { key: '50fcbb0c2ba3e786eb378567eb7d81d4f1abacc6', class: "gux-side-panel-content" }, index.h("slot", { key: 'e74c5df75f1a338a9b677152c4a043c0feaa6a95', name: "content" })), index.h("footer", { key: '0be81160f37eac32e60a311f1702a853ea1c97bd' }, index.h("slot", { key: '6e848313a8c01e537eda3726f47ec4c0d5ff5aa1', name: "footer" }))));
     }
     get root() { return index.getElement(this); }
 };

package/dist/cjs/gux-side-panel-heading.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-e8717c7d.js');
 
 const guxSidePanelHeadingCss = ":host{display:block}h1,h2,h3,h4,h5,h6{display:flex;flex:0 0 auto;gap:var(--gse-ui-sidePanel-header-iconGap);align-items:center;inline-size:100%;padding:0;margin:0;font-family:var(--gse-ui-sidePanel-heading-text-fontFamily);font-size:var(--gse-ui-sidePanel-heading-text-fontSize);font-weight:var(--gse-ui-sidePanel-heading-text-fontWeight);line-height:var(--gse-ui-sidePanel-heading-text-lineHeight);color:var(--gse-ui-sidePanel-headerColor)}";
 const GuxSidePanelHeadingStyle0 = guxSidePanelHeadingCss;
@@ -19,7 +19,7 @@ const GuxSidePanelHeading = class {
         this.headingTag = `h${this.level}`;
     }
     render() {
-        return (index.h(this.headingTag, { key: 'ff53c59d253918dfbcd0cce3753b685848219228' }, this.iconName && (index.h("gux-icon", { key: '8afa45c317bc351515410454d9df2521c0c4ed2d', decorative: true, size: "medium", "icon-name": this.iconName })), index.h("gux-truncate", { key: 'a8fc9bcca8822d879120ba30ce5f10b3781293b8' }, index.h("slot", { key: '94b3a0995967f7cd135448f5d42ba53e4b9dd6a5' }))));
+        return (index.h(this.headingTag, { key: '47d23d1a3be238352e2ae4ff212f64dd60b6feb3' }, this.iconName && (index.h("gux-icon", { key: '4b642ba678b527d3b5484ff42bc637f013a69d85', decorative: true, size: "medium", "icon-name": this.iconName })), index.h("gux-truncate", { key: 'e33010961d0b994342eba916d1127b78d2b53d4f' }, index.h("slot", { key: '8ad7d7fee07aa2853719b0077962280c364c13d1' }))));
     }
     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-2dd05ef3.js');
-const usage = require('./usage-8b693ae3.js');
+const usage = require('./usage-e8717c7d.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: 'f78b00d5665f300cc2adc698b7f131cea9223600' }, index.h("div", { key: '2cd61b35ccc4fcda835ea3f1d27a4ac7c46627be', class: `gux-icon gux-${this.accent}` }, index.h("slot", { key: 'be49762bc22596f08eb5a068a0d065e380ea79b1', name: "icon" })), index.h("gux-truncate", { key: 'efce6ca5575e2bef8b477bd8073dedc5e6bc3438', class: "gux-message", "max-lines": 2 }, index.h("slot", { key: '62458d2641d4c386ea9b7b3c4ddfb2703f8e2e9f', name: "message" })), index.h("gux-dismiss-button", { key: 'b2dec7283745e1d1902271c182062b620a60e119', class: "gux-dismiss", position: "inherit", onClick: this.onDismissClickHandler.bind(this) })));
+        return (index.h(index.Host, { key: 'cd12b491d684eb81457698877ce95c28b38c0e7d' }, index.h("div", { key: '38c6178c912e8ba8e6ba2f0e568ff7839ae39bcf', class: `gux-icon gux-${this.accent}` }, index.h("slot", { key: '2d9a870749e1d07dfb4e6046c6016b40aa4e0e53', name: "icon" })), index.h("gux-truncate", { key: '55dc46c17c39f744fadee4239d7d2c85a8f0d23a', class: "gux-message", "max-lines": 2 }, index.h("slot", { key: 'f2bf7698cc8ee194826b73054a3afde88b1c1cd8', name: "message" })), index.h("gux-dismiss-button", { key: 'c98371ac3aacfa923f2b5a5e4c07f548835d32bc', 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: 'ef70bd3877e5cfb77ad8b5168ae0698616dbb33a', role: "listitem" }, index.h("slot", { key: 'f214f9afeb9f25f1b111ba8dfe7ad13d8c217725' })));
+        return (index.h(index.Host, { key: '3c8aaad2cd2a56c2ed713309682158614b50303d', role: "listitem" }, index.h("slot", { key: '23ffd6b3a9df82ee4670b526ec533fe37008f323' })));
     }
     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-2dd05ef3.js');
 const index$1 = require('./index-d7208697.js');
-const usage = require('./usage-8b693ae3.js');
+const usage = require('./usage-e8717c7d.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: '7652e11f7dc3b9743c872007c1ba51b1f2fd7ab6', class: "gux-container" }, index.h("nav", { key: 'fdfeda3734364ddce3a91503be54221f8d7d3d43', "aria-label": this.i18n('navigationName') }, index.h("ul", { key: '5c004a96f12ba8a8f1ad3de094e00dc6f685a87c', role: "list" }, index.h("slot", { key: 'b24323868de0fc2319bc6d0bbfd868290ac6c872' })))));
+        return (index.h("div", { key: 'bb91becef173b8b90e74d2dce5caf373e4667ef0', class: "gux-container" }, index.h("nav", { key: '8d5b6b733d8ae57ff396cc38c3dd84d734a763f6', "aria-label": this.i18n('navigationName') }, index.h("ul", { key: '33842a24ff4b5dfd565a30f9ae96b1c6a31fd084', role: "list" }, index.h("slot", { key: '086607b5104eab954331811ab1d1a7ebb2ca889d' })))));
     }
     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-2dd05ef3.js');
 const index$1 = require('./index-d7208697.js');
-const usage = require('./usage-8b693ae3.js');
+const usage = require('./usage-e8717c7d.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: '8ab9f64c50cefd9099eb51890591925232c6e255', class: "gux-container" }, index.h("button", { key: '26b063fafb21d08aa433119075e3fb6e612fc211', class: {
+        return (index.h("div", { key: '41618b0fa200ec41e575e4215c8c9ff4b93f52a7', class: "gux-container" }, index.h("button", { key: '08cb53e567347837a35d6f2455d8ac9708e5d289', 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: 'eb62e21cd33928e73a2d23c5d9e7a4313403ba71', class: {
+            }, type: "button", onClick: () => this.onClick(), "aria-label": this.getSRText(this.sort) }, index.h("gux-icon", { key: '9e03046b50443c4bf51228e753119db87fda9648', class: {
                 'gux-sort-icon': true,
                 'gux-left': this.isLeftAlignIcon
-            }, "icon-name": this.getIconName(this.sort), decorative: true })), index.h("div", { key: '1e8c1aaf3e40c3c8a10ee975ba0fb49c300dbcf1', class: "gux-resize-spacer" })));
+            }, "icon-name": this.getIconName(this.sort), decorative: true })), index.h("div", { key: '2e88fea67e3e121b792fa7a9acc254d13749d77a', class: "gux-resize-spacer" })));
     }
     static get delegatesFocus() { return true; }
     get root() { return index.getElement(this); }