genesys-spark-components 4.112.0 → 4.113.0

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-3dcfa17c.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-list.cjs.entry.js

@@ -3,16 +3,19 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-2dd05ef3.js');
-const usage = require('./usage-3dcfa17c.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: 'f60bbf326d56d09966e30e65c0214dc768d1eb92', role: "list" }, this.renderFocusTarget(), index.h("slot", { key: 'd051268767b1dd2699dd853ac73b66d473f03262', 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: 'b70161262f093549ef33a5eb158c714252cfed22', "label-position": "screenreader" }, index.h("input", { key: 'e3ec39309951847955de7c6275b03d137043740e', 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: 'b87f15962a9085f96ab485f45a8cc7121e518585', slot: "label", htmlFor: this.id }, "\u200B", index.h("span", { key: '1eef5b44455a177b76218e75ff7d485a0b7bcd29' }, 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-3dcfa17c.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: 'd6e9ea3346748552b842eec3d7372e4858d57600', class: "gux-sr-only" }, index.h("slot", { key: 'b71530227353d207a91aeb97e04d4134b40dc678' })));
+        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-3dcfa17c.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: 'e3b863ec63f3ed141054510a12abc9698276cbf8', role: "group" }, index.h("slot", { key: 'c1455dc8f4e7d4277cb4dd224c3ab4821f6a9507', 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: '261316a7f87955a042558814115ae6d1cadc4e7e', 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: '494f73e902ddeb6a7b12667ee2694b60a259fb85', 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: '71ed098d70c082a741a3b329ddefe8fedfbe1563', 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: 'db9e2f956a947dc589b8f42e2a41dc9ba718265e', 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-3dcfa17c.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: '7c112a83ce91acd72642236e8c5df9245093342d', class: {
+        return (index.h("div", { key: 'b28ce59bdb9d5150a30f8df1a211b46ee9848a2e', class: {
                 'gux-selector-card': true,
                 [`gux-${this.variant}`]: true,
                 'gux-disabled': this.disabled
-            } }, index.h("div", { key: '69319f5cfd116658933e3ee79588dcec424d9b80', class: "gux-content" }, index.h("div", { key: '06c02cbb0f7776b5a38c12908c8580b0247a367c', class: "gux-icon" }, index.h("slot", { key: '554753afc15103a7d0851212e857c98d02863e58', name: "icon" })), index.h("div", { key: '07ca6c7d3b3ed89bc46cb11e8d02ee4d2e910822', class: "gux-label-container" }, index.h("slot", { key: 'a1243a3ab078ad5f47de654b12c0ddbaae8fbe6c', name: "label" })), index.h("slot", { key: '9a0892f589441ea448cb638c1563660837704a0d', 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-3dcfa17c.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: 'cb736ddeee5adc41842e4299cdd2191af9c6df70', class: "gux-selector-cards" }, index.h("slot", { key: '15a16a1506809169aba8e8ff22508923ed63e048' })));
+        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-3dcfa17c.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: 'fe15fc9684a90b4c4f4b79b72ece6e8e2ab84fcc', class: {
+        return (index.h("div", { key: '57b407cfe2e84ea6b951e141aebbf530f612e9bf', class: {
                 'gux-side-panel': true,
                 [`gux-side-panel-${this.size}`]: true
-            } }, index.h("header", { key: 'f2553f09a7fca68c18f777b4d5082785a694b842' }, index.h("gux-dismiss-button", { key: '7fa2d7e44a1b3bc4542b70d2d9d3d1aa7043edbc', position: "inherit", onClick: this.onDismissHandler.bind(this) }), index.h("slot", { key: '74b3408d9172e89d5d2ba85a3f23ce3fe2f2326d', name: "heading" })), this.renderDescription(), index.h("div", { key: '4a0091296ceb436228d3a593724546a019081809', class: "gux-side-panel-content" }, index.h("slot", { key: '7b3cd27f12bf98de4577975aa694dc281d209aa8', name: "content" })), index.h("footer", { key: '3be53e263307674af5d377ac0e4527e7e7df3fd1' }, index.h("slot", { key: 'cf348aa5ca03675861f8067cb1bb007fe9f3888c', 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-3dcfa17c.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: '11afaac2e2d86375ca5fd349e07254c6f707a324' }, this.iconName && (index.h("gux-icon", { key: 'e78843ec51b91f7d76e55c442cf5241f31b68a0e', decorative: true, size: "medium", "icon-name": this.iconName })), index.h("gux-truncate", { key: '8a1b1c2d5c2681670049b3063fb3ced12aafaf6a' }, index.h("slot", { key: 'cba8f4d6944945444a5a8ac4633fde70d2ebdc99' }))));
+        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-3dcfa17c.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: '7281e807502a73f3e4cabaed4d3300e86d5243fa' }, index.h("div", { key: '0c2c815e815546de6f31099f2936429eb950869e', class: `gux-icon gux-${this.accent}` }, index.h("slot", { key: '42ed2b55cb7bbb84ab11e29b28a226a58e3a1c56', name: "icon" })), index.h("gux-truncate", { key: 'a4a4921005124f982d0bc411ec21b2f1aa1e8d91', class: "gux-message", "max-lines": 2 }, index.h("slot", { key: 'b5cbfe22c5cb3efd01b23572458130c50c2a769e', name: "message" })), index.h("gux-dismiss-button", { key: 'd28e17276a23d79bb1e5011fd6b44a418947e956', 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: '1912d21df9e2afe41a33b1b6fb103449d59965a1', role: "listitem" }, index.h("slot", { key: '77348b37a47b34dee7dc81de349aca9eafb1ac33' })));
+        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-3dcfa17c.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: '5777bb9f5132da330f41d91182a6a0ff8c1805b0', class: "gux-container" }, index.h("nav", { key: '3df5dcd2f086460ada400406351949c758f3c4a3', "aria-label": this.i18n('navigationName') }, index.h("ul", { key: '07b41a02aa3faa421b1c65629a8035ecacf7fa63', role: "list" }, index.h("slot", { key: '27abd28938500c62fca0f2c5885c84fcd73407fb' })))));
+        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-3dcfa17c.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: '46a83b98fca68c01dc9ceeefa39de6010ef01f6f', class: "gux-container" }, index.h("button", { key: '486bf38c577bddfadaef697394e2799f87c80be1', 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: 'c7951b59fb4740330e71ae1325662ed8367a23fb', 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: '16ef9bc423397832fe1c1cd1e7b283f947b2352a', 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); }

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

@@ -146,13 +146,13 @@ const GuxSubmenu = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '37554bdbd5cda270ee692781c16d9cf4e88eee5f' }, index.h("button", { key: '6ff5813ccf2954164223f91b5dd9751278e45ac7', type: "button", class: {
+        return (index.h(index.Host, { key: '73451d05dd8ab24de76795663c9406f1be70b9ea' }, index.h("button", { key: '043ad200c28c4fa9f476488e3789e43859af5f0c', 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: '8dbb3254bb9f4af7ed4b44a807b442bc49fbcc6a', class: "gux-submenu-button-text" }, this.label), index.h("gux-icon", { key: 'c155723afcd5a52c3917f7d2eb1f7a3e0d7c46c9', class: "gux-submenu-open-icon", "icon-name": "custom/chevron-right-small-regular", decorative: true })), index.h("div", { key: 'ac66eb504c60a7745f66ea65926378c4fb75e030', 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: '4f8522dde576ae710c435b2bba48e2849719c23e', class: "gux-submenu-button-text" }, this.label), index.h("gux-icon", { key: '1a71c1fea4aaa8f08a4f091e6ae6d71f0b6b7c2c', class: "gux-submenu-open-icon", "icon-name": "custom/chevron-right-small-regular", decorative: true })), index.h("div", { key: '7269a1ff721903054b32e754f60b68541a864e50', ref: el => (this.submenuElement = el), class: {
                 'gux-submenu-wrapper': true,
                 'gux-shown': this.isShown
-            } }, index.h("div", { key: 'e019e00a09313a5da7eb74199e1f471d4a2e95b0', role: "menu", class: "gux-submenu-content", ref: el => (this.submenuContentElement = el) }, index.h("slot", { key: '079239f688e2a4cfd15382b76fab089361fddce0' })))));
+            } }, index.h("div", { key: '1961d7534de93f3f9a13df268da591cc19debd07', role: "menu", class: "gux-submenu-content", ref: el => (this.submenuContentElement = el) }, index.h("slot", { key: 'dbdf8e962df400f3a8aaddd46cffde5d92675db4' })))));
     }
     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: 'c1d1e3dba23cbd8e909d3e6a224c26bf968b2236', class: { 'gux-selected': this.selected } }, index.h("button", { key: 'c36e6fd1fdb59c62be6c99d31bfddd7827b23439', type: "button", class: "gux-switch-item", disabled: this.disabled }, index.h("slot", { key: 'baf9f3bf51df4214aa809739a7a93e7d31544f37' }))));
+        return (index.h(index.Host, { key: '2ed33e7c7c9bc10a95fe58ddac40aa92d3baf6fc', class: { 'gux-selected': this.selected } }, index.h("button", { key: '18dd54fc6020bc33af1fdb3291ed467ce24c337c', type: "button", class: "gux-switch-item", disabled: this.disabled }, index.h("slot", { key: 'ed50cc2aed32e97a7340496f303493967f03708b' }))));
     }
 };
 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-2dd05ef3.js');
 const simulateNativeEvent = require('./simulate-native-event-e88bf64f.js');
-const usage = require('./usage-3dcfa17c.js');
+const usage = require('./usage-e8717c7d.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: '5793de8a92c7b9024eba2ffe2ebf04d348dc2bd5', role: "group", class: `gux-${this.layout}` }, index.h("slot", { key: '791850207d34628aeeb28df51e8288c2997d1bec', onSlotchange: this.slotChanged.bind(this) })));
+        return (index.h(index.Host, { key: '2a5f7a42ae51622f621083945722d55b21c61c95', role: "group", class: `gux-${this.layout}` }, index.h("slot", { key: 'ad155fd665ccca61c80cf77cd5da7e5ab45f899b', onSlotchange: this.slotChanged.bind(this) })));
     }
     get root() { return index.getElement(this); }
 };

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

@@ -3091,7 +3091,7 @@ const GuxTabAdvancedList = class {
     render() {
         return [
             this.renderAlert(),
-            index$1.h("div", { key: '791bc59f2f7f61d700fcace8826fd2d314df595f', class: "gux-tab-container" }, this.renderScrollButton('scrollLeft'), index$1.h("div", { key: '21104e2f4091950985f4b5d78a34dc7b9904fef9', class: "gux-scrollable-section" }, index$1.h("div", { key: '91b7d3091d10d34983d2fc85ab43015c3a3bd73a', class: "gux-tablist", role: "tablist", "data-gux-tab-sorting": this.keyboardSort, "aria-owns": this.triggerIds }, index$1.h("slot", { key: '3d79a8d8c667cbee0d0684e2cf30a72bbdcdc633' })), this.renderAddButton()), this.renderScrollButton('scrollRight'))
+            index$1.h("div", { key: '3141c7d26950d26eccfd136d7aee263963f0ef14', class: "gux-tab-container" }, this.renderScrollButton('scrollLeft'), index$1.h("div", { key: 'f5d4ef90168f0e44933ca388d6f49e120cabf26a', class: "gux-scrollable-section" }, index$1.h("div", { key: 'dcffc6d1f7336e040a7ad612789627f4556eadc0', class: "gux-tablist", role: "tablist", "data-gux-tab-sorting": this.keyboardSort, "aria-owns": this.triggerIds }, index$1.h("slot", { key: '4b705d1ce564196a4feaf2698b057acab03b9f8a' })), 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: 'ee73f5339033c75ff1e3713911d8feca6d8503c9', 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: '23164fb72bbd2e7f28fb2e638f9c39c1f963994a' })));
+        return (index.h("div", { key: 'dd60d64de9b8c2a878ce7f184178f0db9bc26f8b', 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: 'c75ec6be40fccc1bbb4f8fd3ce9bf49e002b8d94' })));
     }
     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: '3905bc31a425b05a52b185f292a8ff85a1c88190', class: {
+            index.h("div", { key: '0e343cc92069df18ddce7fe8a09ac777a2720a6d', class: {
                     'gux-tab': true,
                     'gux-selected': this.active,
                     'gux-dropdown-options': this.hasDropdownOptions,
                     'gux-disabled': this.guxDisabled
-                } }, index.h("div", { key: '4cd7de5a927b72ed747e1a7228f3e4aef67624e1', class: "gux-buttons" }, this.renderTabButton(), this.renderTabOptions()), index.h("div", { key: '9987aafc82f4e49830c8bf05407eb6c59914af02', class: "gux-divider" }))
+                } }, index.h("div", { key: 'ffadffc758858a51d2cd1b2c0c76192b51e9669e', class: "gux-buttons" }, this.renderTabButton(), this.renderTabOptions()), index.h("div", { key: '17a463fb81b36408c98fc8d8360a01001a35e39b', 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: 'a4304463518dd6806364a892b6d97275960a62b6', class: "gux-tab-container" }, this.hasHorizontalScrollbar
+        return (index.h("div", { key: 'ecab317da926fe598cbd45656a66d47a8025d82c', class: "gux-tab-container" }, this.hasHorizontalScrollbar
             ? this.renderScrollButton('scrollLeft')
-            : this.renderScrollButton('scrollUp'), index.h("div", { key: '6db31968ab06415f2171ee098c49714003ad0a8f', role: "tablist", class: "gux-scrollable-section", "aria-owns": this.triggerIds }, index.h("slot", { key: '9c36f6e3f3f8e7668090eca21227bf6700f29b4f' })), this.hasHorizontalScrollbar
+            : this.renderScrollButton('scrollUp'), index.h("div", { key: '30558d63099364be9df4f07277cdc0cf1be119f8', role: "tablist", class: "gux-scrollable-section", "aria-owns": this.triggerIds }, index.h("slot", { key: 'd3cff0548fa8d528e2ede57d7d339aff47a535e2' })), 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: '8a50b73c31c7e01a83f371ce21d42d999e6ec472', id: `gux-${this.tabId}-panel`, role: "tabpanel", "aria-labelledby": `gux-${this.tabId}-tab`, tabIndex: 0, hidden: !this.active }, index.h("slot", { key: '819cdd549c11cd5c6b87b048c0ea379ef24bb5b9' })));
+        return (index.h(index.Host, { key: 'b8720f9f1622ff96097b0ed50312b81e050ab0ed', id: `gux-${this.tabId}-panel`, role: "tabpanel", "aria-labelledby": `gux-${this.tabId}-tab`, tabIndex: 0, hidden: !this.active }, index.h("slot", { key: 'ddce6c3dcd36a2cbaacf3b7ac4e7eb80bb5730c8' })));
     }
     static get watchers() { return {
         "active": ["watchActivePanel"]