genesys-spark-components 4.111.6 → 4.113.0

package/dist/collection/components/beta/gux-rich-text-editor/gux-rich-text-editor-action/gux-rich-text-editor-action-text-highlight/gux-rich-text-editor-action-text-highlight.css

@@ -0,0 +1,40 @@
+: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);
+}

package/dist/collection/components/beta/gux-rich-text-editor/gux-rich-text-editor-action/gux-rich-text-editor-action-text-highlight/gux-rich-text-editor-action-text-highlight.js

@@ -0,0 +1,207 @@
+var __decorate = (this && this.__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;
+};
+import { h } from "@stencil/core";
+import { OnClickOutside } from "../../../../../utils/decorator/on-click-outside";
+import { trackComponent } from "../../../../../utils/tracking/usage";
+import { buildI18nForComponent } from "../../../../../i18n/index";
+import translationResources from "../i18n/en.json";
+import { hasDisabledParent } from "../../gux-rich-text-editor.service";
+import { whenEventIsFrom } from "../../../../../utils/dom/when-event-is-from";
+import { afterNextRender } from "../../../../../utils/dom/after-next-render";
+import { eventIsFrom } from "../../../../../utils/dom/event-is-from";
+/**
+ * @slot - for a collection of gux-rich-highlight-list-item.
+ */
+export class GuxRichTextEditorActionTextHighlight {
+    constructor() {
+        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('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() {
+        trackComponent(this.root);
+        this.i18n = await buildI18nForComponent(this.root, translationResources);
+    }
+    togglePopup() {
+        this.expanded = !this.expanded;
+        if (this.expanded) {
+            this.focusNoHighlightActionButton();
+        }
+        else {
+            this.actionButton.focus();
+        }
+    }
+    focusNoHighlightActionButton() {
+        afterNextRender(() => {
+            this.noHighlightActionButton.focus();
+        });
+    }
+    renderTooltip() {
+        if (!this.disabled && !this.expanded) {
+            return (h("gux-tooltip-beta", null, h("div", { slot: "content" }, this.i18n('textHighlight'))));
+        }
+    }
+    renderPopup() {
+        return (h("div", { class: "gux-text-highlight-popup", slot: "popup" }, this.renderNoHighlightAction(), this.renderTextHighlightColors()));
+    }
+    renderNoHighlightAction() {
+        return (h("gux-button-slot", { accent: "tertiary" }, h("button", { type: "button", ref: el => (this.noHighlightActionButton = el), onClick: () => this.emitNoHighlightAction() }, h("gux-truncate", { "max-lines": 1 }, this.i18n('noHighlight')))));
+    }
+    onListClick(event) {
+        whenEventIsFrom('gux-rich-highlight-list-item', event, () => {
+            this.expanded = false;
+            this.actionButton.focus();
+        });
+    }
+    renderTextHighlightColors() {
+        return (h("gux-rich-text-editor-list", { onClick: (e) => this.onListClick(e) }, h("slot", null)));
+    }
+    emitNoHighlightAction() {
+        this.noHighlightAction.emit();
+        this.expanded = false;
+        this.actionButton.focus();
+    }
+    renderTarget() {
+        return (h("gux-button-slot", { accent: "ghost", "icon-only": true, slot: "target" }, h("button", { type: "button", ref: el => (this.actionButton = el), onClick: () => this.togglePopup(), disabled: this.disabled || hasDisabledParent(this.root), class: { 'gux-is-pressed': this.isActive || this.expanded }, "aria-haspopup": "true", "aria-expanded": this.expanded.toString(), "aria-pressed": this.isActive.toString() }, h("gux-icon", { size: "small", "icon-name": "fa/highlighter-line-regular", "screenreader-text": this.i18n('textHighlight') })), this.renderTooltip()));
+    }
+    render() {
+        return (h("gux-popup", { key: '5ab33be4e0c45633f0e14de414429c818b81e6ed', disabled: this.disabled, expanded: this.expanded, exceedTargetWidth: true, placement: "bottom-start" }, this.renderTarget(), this.renderPopup()));
+    }
+    static get is() { return "gux-rich-text-editor-action-text-highlight"; }
+    static get encapsulation() { return "shadow"; }
+    static get delegatesFocus() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["gux-rich-text-editor-action-text-highlight.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["gux-rich-text-editor-action-text-highlight.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "isActive": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "is-active",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "expanded": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "noHighlightAction",
+                "name": "noHighlightAction",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "root"; }
+    static get watchers() {
+        return [{
+                "propName": "disabled",
+                "methodName": "watchDisabled"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "keydown",
+                "method": "handleKeydown",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+__decorate([
+    OnClickOutside({ triggerEvents: 'mousedown' })
+], GuxRichTextEditorActionTextHighlight.prototype, "onClickOutside", null);

package/dist/collection/components/beta/gux-rich-text-editor/gux-rich-text-editor-action-group/gux-rich-text-editor-action-group.js

@@ -12,7 +12,7 @@ export class GuxRichTextEditorActionGroup {
         }
     }
     render() {
-        return (h(Host, { key: 'ffe8dc89c851b4d23b95039a658ce5ac6d7c19f8' }, h("div", { key: 'bf21c1a4977b2635d7f04e30be05b110de52d1b6', class: "gux-action-group-container" }, h("slot", { key: '49e7caf93ceb05b11ddddf5a64696782e2d04577' })), this.renderActionGroupDivider()));
+        return (h(Host, { key: '0b8535ac364ff932423814854e72b91e9c85c3bd' }, h("div", { key: '6894ddec02c878e577d54a67a78d7614c1074976', class: "gux-action-group-container" }, h("slot", { key: 'd437c37fd5ff3b10b009eb69e4c11f8616209361' })), this.renderActionGroupDivider()));
     }
     static get is() { return "gux-rich-text-editor-action-group"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/beta/gux-rich-text-editor/gux-rich-text-editor-beta.js

@@ -34,10 +34,10 @@ export class GuxRichTextEditor {
         return this.renderSlot('global-action', 'gux-global-action-container');
     }
     render() {
-        return (h("div", { key: '1df220d4192bc1e04cd74c7283ee90421f0ce2e0', class: {
+        return (h("div", { key: '3ec3c4adf65ef5a7f5ff4ea3ac18002b28fa1009', class: {
                 'gux-rich-text-editor-container': true,
                 'gux-disabled': this.disabled
-            } }, h("div", { key: '8cb67dbf9f8f8eba7f48a838ad88835681100d62', class: "gux-rich-text-editor-toolbar-container" }, this.renderTypographicalEmphasis(), this.renderTextStyling(), this.renderListsIndentation(), this.renderInserting(), this.renderGlobalAction()), h("slot", { key: 'ef749f768106064cf77217139f0b191a3d07f35f', name: "editor" })));
+            } }, h("div", { key: '44dacd9cf2d5686e0f10242df4c95a93cbc463d2', class: "gux-rich-text-editor-toolbar-container" }, this.renderTypographicalEmphasis(), this.renderTextStyling(), this.renderListsIndentation(), this.renderInserting(), this.renderGlobalAction()), h("slot", { key: 'f3393a71c2d917f89a9b2d98aae0cb22b1f054c2', name: "editor" })));
     }
     static get is() { return "gux-rich-text-editor-beta"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/beta/gux-rich-text-editor/gux-rich-text-editor-list/gux-rich-highlight-list-item/gux-rich-highlight-list-item.css

@@ -0,0 +1,48 @@
+:host {
+  display: block;
+  border-radius: var(--gse-ui-button-borderRadius);
+}
+
+.gux-highlight {
+  inline-size: var(--gse-ui-rte-colorSwatch-width);
+  block-size: var(--gse-ui-rte-colorSwatch-height);
+  border-radius: var(--gse-ui-button-borderRadius);
+}
+.gux-highlight button {
+  all: unset;
+  inline-size: 100%;
+  block-size: 100%;
+  cursor: pointer;
+}
+.gux-highlight button:focus-visible {
+  outline: var(--gse-semantic-focusOutline-sm-borderWidth) solid var(--gse-semantic-border-focus);
+  border-radius: var(--gse-semantic-focusOutline-sm-borderRadius);
+}
+.gux-highlight.gux-orange {
+  background-color: var(--gse-ui-rte-colorSwatch-orange-default);
+}
+.gux-highlight.gux-coral {
+  background-color: var(--gse-ui-rte-colorSwatch-coral-default);
+}
+.gux-highlight.gux-pear {
+  background-color: var(--gse-ui-rte-colorSwatch-pear-default);
+}
+.gux-highlight.gux-raspberry {
+  background-color: var(--gse-ui-rte-colorSwatch-raspberry-default);
+}
+.gux-highlight.gux-mango {
+  background-color: var(--gse-ui-rte-colorSwatch-mango-default);
+}
+.gux-highlight.gux-blue {
+  background-color: var(--gse-ui-rte-colorSwatch-azure-default);
+}
+.gux-highlight.gux-mineral {
+  background-color: var(--gse-ui-rte-colorSwatch-mineral-default);
+}
+.gux-highlight.gux-island {
+  background-color: var(--gse-ui-rte-colorSwatch-island-default);
+}
+.gux-highlight.gux-inherit {
+  color: inherit;
+  background-color: inherit;
+}

package/dist/collection/components/beta/gux-rich-text-editor/gux-rich-text-editor-list/gux-rich-highlight-list-item/gux-rich-highlight-list-item.js

@@ -0,0 +1,134 @@
+import { h } from "@stencil/core";
+import { trackComponent } from "../../../../../utils/tracking/usage";
+import { buildI18nForComponent } from "../../../../../i18n/index";
+import translationResources from "../../gux-rich-text-editor-action/i18n/en.json";
+import { getClosestElement } from "../../../../../utils/dom/get-closest-element";
+export class GuxRichHighlightListItem {
+    constructor() {
+        this.disabled = false;
+        this.highlight = 'orange';
+        this.value = undefined;
+    }
+    onMouseUp() {
+        this.focusParentList();
+    }
+    onMouseOver() {
+        this.focusParentList();
+    }
+    focusParentList() {
+        const parentList = getClosestElement('gux-rich-text-editor-list', this.root);
+        if (parentList && parentList.shadowRoot.activeElement === null) {
+            this.root.blur();
+            parentList.focus({
+                preventScroll: true
+            });
+        }
+    }
+    async componentWillLoad() {
+        trackComponent(this.root, { variant: this.highlight });
+        this.i18n = await buildI18nForComponent(this.root, translationResources);
+    }
+    renderTooltip() {
+        if (!this.disabled && this.highlight !== 'inherit') {
+            return (h("gux-tooltip-beta", null, h("div", { slot: "content" }, this.i18n(`${this.highlight}`))));
+        }
+    }
+    render() {
+        return (h("div", { key: 'c30f320ff38c903e13eb69fc493ba73815153579', class: {
+                'gux-highlight': true,
+                [`gux-${this.highlight}`]: true
+            }, role: "listitem" }, h("button", { key: '58ba38a6ba5ca8a9f256e055e7217670e87e7d10', type: "button", "aria-label": this.i18n(`${this.highlight}`), tabIndex: -1, disabled: this.disabled }), this.renderTooltip()));
+    }
+    static get is() { return "gux-rich-highlight-list-item"; }
+    static get encapsulation() { return "shadow"; }
+    static get delegatesFocus() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["gux-rich-highlight-list-item.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["gux-rich-highlight-list-item.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "highlight": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "GuxHighlightColor",
+                    "resolved": "\"blue\" | \"coral\" | \"inherit\" | \"island\" | \"mango\" | \"mineral\" | \"orange\" | \"pear\" | \"raspberry\"",
+                    "references": {
+                        "GuxHighlightColor": {
+                            "location": "import",
+                            "path": "./gux-rich-highlight-list-item.types",
+                            "id": "src/components/beta/gux-rich-text-editor/gux-rich-text-editor-list/gux-rich-highlight-list-item/gux-rich-highlight-list-item.types.ts::GuxHighlightColor"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "highlight",
+                "reflect": false,
+                "defaultValue": "'orange'"
+            },
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "value",
+                "reflect": false
+            }
+        };
+    }
+    static get elementRef() { return "root"; }
+    static get listeners() {
+        return [{
+                "name": "mouseup",
+                "method": "onMouseUp",
+                "target": undefined,
+                "capture": false,
+                "passive": true
+            }, {
+                "name": "mouseover",
+                "method": "onMouseOver",
+                "target": undefined,
+                "capture": false,
+                "passive": true
+            }];
+    }
+}

package/dist/collection/components/beta/gux-rich-text-editor/gux-rich-text-editor-list/gux-rich-highlight-list-item/gux-rich-highlight-list-item.types.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/components/beta/gux-rich-text-editor/gux-rich-text-editor-list/gux-rich-style-list-item/gux-rich-style-list-item.js

@@ -28,7 +28,7 @@ export class GuxRichStyleListItem {
         trackComponent(this.root);
     }
     render() {
-        return (h(Host, { key: '4bd7d026d50812a706946d470dbb4e1ef9a6f7b8', role: "listitem" }, h("button", { key: 'ef5f0873f68c1645897c3ba0e616c018042c8561', type: "button", tabIndex: -1, disabled: this.disabled }, h("slot", { key: 'c0ec924cb8797c5d154e3337ce9ab3df7fcbdd16' }))));
+        return (h(Host, { key: '4a15b295e8a77a8760dd96c780a34b67a8301d94', role: "listitem" }, h("button", { key: '3c7a10f99083a85d960da1b686ade1c67ddf78e9', type: "button", tabIndex: -1, disabled: this.disabled }, h("slot", { key: '7b5cb370a7064593b28952969e50baf59e021bca' }))));
     }
     static get is() { return "gux-rich-style-list-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/beta/gux-rich-text-editor/gux-rich-text-editor-list/gux-rich-text-editor-list.js

@@ -2,9 +2,12 @@ import { Host, h } from "@stencil/core";
 import { trackComponent } from "../../../../utils/tracking/usage";
 import { first, last, next, previous } from "../../../stable/gux-list/gux-list.service";
 /**
- * @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'
+];
 export class GuxRichTextEditorList {
     constructor() {
         this.value = undefined;
@@ -21,6 +24,18 @@ export class GuxRichTextEditorList {
         }
         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();
@@ -28,25 +43,29 @@ export class GuxRichTextEditorList {
     async componentWillLoad() {
         trackComponent(this.root);
         this.setListItems();
+        this.handleHighlighItemsNavigation();
     }
     onKeyDown(event) {
-        switch (event.key) {
-            case 'ArrowUp':
-                event.preventDefault();
-                previous(this.root, validFocusableItems);
-                break;
-            case 'Home':
-                event.preventDefault();
-                first(this.root, validFocusableItems);
-                break;
-            case 'ArrowDown':
-                event.preventDefault();
-                next(this.root, validFocusableItems);
-                break;
-            case 'End':
-                event.preventDefault();
-                last(this.root, validFocusableItems);
-                break;
+        const target = event.target;
+        if (!target) {
+            return;
+        }
+        const keyHandlers = {
+            ArrowUp: () => previous(this.root, validFocusableItems),
+            ArrowDown: () => next(this.root, validFocusableItems),
+            Home: () => first(this.root, validFocusableItems),
+            End: () => last(this.root, validFocusableItems)
+        };
+        if (target.matches('gux-rich-highlight-list-item')) {
+            Object.assign(keyHandlers, {
+                ArrowLeft: () => previous(this.root, validFocusableItems),
+                ArrowRight: () => next(this.root, validFocusableItems)
+            });
+        }
+        const handler = keyHandlers[event.key];
+        if (handler) {
+            event.preventDefault();
+            handler();
         }
     }
     // eslint-disable-next-line @typescript-eslint/require-await
@@ -57,11 +76,8 @@ export class GuxRichTextEditorList {
     async guxFocusLastItem() {
         last(this.root, validFocusableItems);
     }
-    renderFocusTarget() {
-        return (h("span", { tabindex: "-1", "aria-hidden": "true" }));
-    }
     render() {
-        return (h(Host, { key: '7157211c43c642991e48acb643a307180692b689', role: "list" }, this.renderFocusTarget(), h("slot", { key: '86a09fcf4cd759973b4c256356890800ecea5945', onSlotchange: () => this.setListItems() })));
+        return (h(Host, { key: 'a9e2c6054a4069423aab4b7ab97812efe2a3bbd0', role: "list" }, h("slot", { key: '8559c06a39a7094a91fcf4ddf8a61769c58df922', onSlotchange: () => this.setListItems() })));
     }
     static get is() { return "gux-rich-text-editor-list"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/beta/gux-screen-reader/gux-screen-reader.js

@@ -8,7 +8,7 @@ export class GuxScreenReader {
         trackComponent(this.root);
     }
     render() {
-        return (h("span", { key: '45a49c75e52bbc4c7bcaf8870118fdaf50b48f25', class: "gux-sr-only" }, h("slot", { key: 'c1cc69187d4562bfde469ce092fb11bab7869c59' })));
+        return (h("span", { key: 'c0c226cfc59cc8dabfcf12adeb882183b579dae9', class: "gux-sr-only" }, h("slot", { key: 'f3fb06e5682aa51f889fc5b9651dc6198a1b2360' })));
     }
     static get is() { return "gux-screen-reader-beta"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/beta/gux-segmented-control/gux-segmented-control-item/gux-segmented-control-item.js

@@ -48,19 +48,19 @@ export class GuxSegmentedControlItem {
         }
     }
     render() {
-        return (h("div", { key: 'c8996164a4408dc94091f51e370ae642ee176f1b', class: {
+        return (h("div", { key: '4d6b0dfc7a78260ea7a18864aec9cc24a6976aef', class: {
                 'gux-container': true,
                 'gux-parent-disabled': this.hasDisabledParent(),
                 'gux-start': this.isInStartPosition(),
                 'gux-end': this.isInEndPosition()
-            } }, h("button", { key: '732bb008028e2bd3eea43b72913aa449aab750ea', class: {
+            } }, 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(), h("div", { key: 'c454e906a3c90f59adbfee0639b3493540021164', class: {
+            }, type: "button", disabled: this.disabled || this.hasDisabledParent() }, this.renderIconSlot(), h("div", { key: '29d7dafbb784a7acbb3aa430edd6df86c5b185f8', class: {
                 'gux-text': true,
                 'gux-icon-only': this.iconOnly
-            } }, h("slot", { key: 'be804d2c015dc75e438fecf5736e311678beee44', name: "text" }))), this.renderTooltip()));
+            } }, h("slot", { key: 'a0ec031b8d638331e30c9a3f6df5bf9525d2e36d', name: "text" }))), this.renderTooltip()));
     }
     static get is() { return "gux-segmented-control-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/beta/gux-segmented-control/gux-segmented-control.js

@@ -36,7 +36,7 @@ export class GuxSegmentedControl {
         });
     }
     render() {
-        return (h(Host, { key: '2a8ead16000faec75121dfa0d27c6f0853098d8b', role: "group" }, h("slot", { key: '7395d3bdec9be3277357227825eb20bc20f0d648', onSlotchange: this.slotChanged.bind(this) })));
+        return (h(Host, { key: 'c57afa576033c08c059035fb3338e9a4049dc699', role: "group" }, h("slot", { key: 'ef8243fc3fef43c3e680f8772d2aeafd1f638896', onSlotchange: this.slotChanged.bind(this) })));
     }
     static get is() { return "gux-segmented-control-beta"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/beta/gux-selector-cards/gux-selector-card/gux-selector-card.js

@@ -50,11 +50,11 @@ export class GuxSelectorCard {
         }
     }
     render() {
-        return (h("div", { key: '15bb201be48f8b5e0ea8130b8f571a342ec6e768', class: {
+        return (h("div", { key: 'b28ce59bdb9d5150a30f8df1a211b46ee9848a2e', class: {
                 'gux-selector-card': true,
                 [`gux-${this.variant}`]: true,
                 'gux-disabled': this.disabled
-            } }, h("div", { key: 'ee44e33a9b94c112161a1e44ea5d252d269082b6', class: "gux-content" }, h("div", { key: 'fcd3bc9d28281a9a4fa12dd0b3d0c12fa5441fa8', class: "gux-icon" }, h("slot", { key: '542a0ec6a7c218e36edab8d73fe7f1d45fec5b57', name: "icon" })), h("div", { key: 'c242c933b45b05bcdbd94c24ebb2200d4f6c0743', class: "gux-label-container" }, h("slot", { key: '873201da7e0ddeefc56bd2ea6d23e240d08473d7', name: "label" })), h("slot", { key: '953ef926caa01e09dd695232df7c49271aac855e', name: "input" }), this.renderDescription(), this.renderBadge())));
+            } }, h("div", { key: 'f14e0a4f22356a2a5b1cbfca9f7d249f5a8b5011', class: "gux-content" }, h("div", { key: '6fc4a7a04e1c53033d0902014e56a50b2a7cc1ad', class: "gux-icon" }, h("slot", { key: '1c1551e4058b56057a54816bb1a5377335540e7e', name: "icon" })), h("div", { key: '00277bd34a649eff6331404cd65c8715c3ad2407', class: "gux-label-container" }, h("slot", { key: '8fb89b7d2dfdb37574316cf31605aa2199b70b09', name: "label" })), h("slot", { key: 'd6bc13694aba6883ed8e3240c9c917d5a0a0be4d', name: "input" }), this.renderDescription(), this.renderBadge())));
     }
     static get is() { return "gux-selector-card-beta"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/beta/gux-selector-cards/gux-selector-cards.js

@@ -8,7 +8,7 @@ export class GuxSelectorCards {
         trackComponent(this.root);
     }
     render() {
-        return (h("div", { key: '5fa8e13dd7c5a6c681cd098d652d3804e74148ed', class: "gux-selector-cards" }, h("slot", { key: '7e7822a514bc74deb4335a779592cb380d51d7c1' })));
+        return (h("div", { key: '69e50b437e17b14b8e0fd5dbd3d3c3167bdb9b70', class: "gux-selector-cards" }, h("slot", { key: 'c8719a29b42c4241f72f67f45ae4c30605976ae4' })));
     }
     static get is() { return "gux-selector-cards-beta"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/beta/gux-side-panel/components/gux-modal-side-panel/gux-modal-side-panel.js

@@ -46,7 +46,7 @@ export class GuxModalSidePanel {
     }
     render() {
         const titleID = randomHTMLId();
-        return (h("dialog", { key: 'a042d52c8c52e8b20433cd50eb16eb9ad1ca903a', ref: el => (this.dialogElement = el), "aria-labelledby": titleID }, h("gux-side-panel-beta", { key: '443af3aa0cf374dff1ab2473f68b2b250d400e49', size: this.size }, h("div", { key: '7760524151fc29f97378790c663739b622fb4202', slot: "heading", id: titleID }, h("slot", { key: 'f179879278ca143a8aeec5b67c0b0b7b4e2aa039', name: "heading" })), hasSlot(this.root, 'description') && (h("div", { key: 'e7a557c185cfb02635b85ba6f180739d7d7f0aba', slot: "description" }, h("slot", { key: '0abc48e56d6fbad1ceb6e82fdc0fdbec349ef543', name: "description" }))), h("div", { key: '84ffb0d9772db212974c5e64291bd665a8320334', slot: "content" }, h("slot", { key: '3ab18e6239389e79f7af652e20402530b7c7595b', name: "content" })), h("div", { key: 'aa9df45e4d3cd5fc05ac3fd2890f4073bfd200ce', slot: "footer" }, h("slot", { key: 'dad47d95365f2c00451bc95c23fcf55f2bca563d', name: "footer" })))));
+        return (h("dialog", { key: '34c80eaee9baf7ce57e6b2be5fd89110fdcd9c94', ref: el => (this.dialogElement = el), "aria-labelledby": titleID }, h("gux-side-panel-beta", { key: '6600729b45885b675c9e0f616d6a0093682de095', size: this.size }, h("div", { key: '55b1ff1f68212734944d034b97d2a748b1aa601a', slot: "heading", id: titleID }, h("slot", { key: '3f26e81930bd086ae4ed6d4307dd16727f0eddb3', name: "heading" })), hasSlot(this.root, 'description') && (h("div", { key: '5baccca5a3e34e9572e202c2ff8a123b6c8033aa', slot: "description" }, h("slot", { key: '4f80ab3460adc54565a48c06c058ea955b371bcc', name: "description" }))), h("div", { key: '6d5bc823ac3eeaf7ba0973886c6b50d138a00c1f', slot: "content" }, h("slot", { key: '2fec75da7efb18f7e51df706dc34689448beb8db', name: "content" })), h("div", { key: 'ee9fd140e4796e54f06214d49ef823e6af85c0a8', slot: "footer" }, h("slot", { key: '27a2b723f3d2eaf03a3d9620954996caecfe1c2d', name: "footer" })))));
     }
     static get is() { return "gux-modal-side-panel-beta"; }
     static get encapsulation() { return "shadow"; }