genesys-spark-components 4.121.0 → 4.123.0

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

@@ -14,6 +14,7 @@ import { trackComponent } from "../../../../../utils/tracking/usage";
 import { buildI18nForComponent } from "../../../../../i18n/index";
 import translationResources from "../i18n/en.json";
 import { afterNextRender } from "../../../../../utils/dom/after-next-render";
+import { hasDisabledParent } from "../../gux-rich-text-editor.service";
 export class GuxRichTextEditorActionLink {
     constructor() {
         this.disabled = false;
@@ -74,7 +75,7 @@ export class GuxRichTextEditorActionLink {
         }
     }
     render() {
-        return (h(Host, { key: 'c51c67c1063f35575b11db91781763b1a54f9bb1' }, h("gux-button-slot", { key: '921372b56a841e108352fe26722d3455e3fcf799', accent: "ghost", "icon-only": true }, 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() }, h("gux-icon", { key: 'aed90b615e1e1c4ff08113cfa08a08ee2289f663', size: "small", "icon-name": "fa/link-simple-regular", decorative: true })), this.renderTooltip()), h("gux-popover", { key: '4bf2e0f0c8d8e4b55b814fb45f654cc3a4aea66d', "is-open": this.isOpen, for: "popover-target" }, h("div", { key: '1238ca6fe3ca06e12d822a4d4e83e91181e8a44a', class: "gux-popover-content-wrapper" }, h("gux-form-field-text-like", { key: 'bd7adba7b234b2ee11fd48429757c5e4b8e4cbac' }, h("input", { key: '4e04b841b194fb92674af30148c9e6d843caaf56', id: "textToDisplay", ref: el => (this.textToDisplayInputElement = el), slot: "input", type: "text" }), h("label", { key: '239b6f659d59a85db2137691c9a4d7a05c003b83', slot: "label" }, this.i18n('textToDisplay'))), h("gux-form-field-text-like", { key: 'fe15940a60b7e196f24d578d101f1ef5caf0650c' }, h("input", { key: 'ad8a588ed0433b112929bbac1ee3a9371a467671', ref: el => (this.linkAddressInputElement = el), slot: "input", type: "text" }), h("label", { key: 'ed65192ef701827a4ed60579c51164aa1e4f15dd', slot: "label" }, this.i18n('linkAddress'))), h("gux-cta-group", { key: '6369a6d6bd4a5268c955d12a81b05de28a974f63', align: "end" }, h("gux-button", { key: '468ccc4f482e7a622d2ca3b4fee2b1aae413d831', onClick: () => this.emitLinkOptions(), slot: "primary" }, this.i18n('insert')), h("gux-button", { key: '8f46d9f041a70f747a56f398eaa62d346b86559f', onClick: () => this.togglePopover(), slot: "dismiss" }, this.i18n('cancel')))))));
+        return (h(Host, { key: 'a52d8e6349d4b6fc33f9b45e14aee9818589a56b' }, h("gux-button-slot", { key: '01932efb7f846d04279bbef7425c8c420e11226a', accent: "ghost", "icon-only": true }, h("button", { key: 'ceee1786a52a0cf6c8ac79433d0c5a0b9375bea8', id: "popover-target", class: { 'gux-is-pressed': this.isActive || this.isOpen }, onClick: () => this.togglePopover(), ref: el => (this.actionButton = el), type: "button", disabled: this.disabled || hasDisabledParent(this.root), "aria-label": this.i18n('link'), "aria-haspopup": "true", "aria-expanded": this.isOpen.toString(), "aria-pressed": this.isActive.toString() }, h("gux-icon", { key: '3356d333fc7b6f2cda7d72b97196648af125f3ed', size: "small", "icon-name": "fa/link-simple-regular", decorative: true })), this.renderTooltip()), h("gux-popover", { key: '0ab02cd9b64fdd8d16379041d054457a65c5f9ae', "is-open": this.isOpen, for: "popover-target" }, h("div", { key: 'e7832a550bce5968ab722f9c7a67599d2b73924d', class: "gux-popover-content-wrapper" }, h("gux-form-field-text-like", { key: '97ecdbdb6b2e03bc4d187088b5f7196d437d47d6' }, h("input", { key: '39e5ad15e4c18074e5a90fcedfef76bb29730469', id: "textToDisplay", ref: el => (this.textToDisplayInputElement = el), slot: "input", type: "text" }), h("label", { key: 'd87abf3d276e9243251714c1e8b4e1dfe5c8cda6', slot: "label" }, this.i18n('textToDisplay'))), h("gux-form-field-text-like", { key: 'c87795f31d0d954fe0c7cb740acbd8460c710728' }, h("input", { key: '78bcbcefe6a2c1a9fcd5c6796beb6d50176eb69e', ref: el => (this.linkAddressInputElement = el), slot: "input", type: "text" }), h("label", { key: '632ba33b6ae356917bca3b60d1ca00668a1ed60c', slot: "label" }, this.i18n('linkAddress'))), h("gux-cta-group", { key: '2008fabff6da53e39b5d4fcfe1a7b17b529a3aec', align: "end" }, h("gux-button", { key: '028dee824f38d29abd96c891797ca78f682373ac', onClick: () => this.emitLinkOptions(), slot: "primary" }, this.i18n('insert')), h("gux-button", { key: '670e16d66a2294a61f9e6e96eb35d08067778aba', onClick: () => this.togglePopover(), slot: "dismiss" }, this.i18n('cancel')))))));
     }
     static get is() { return "gux-rich-text-editor-action-link"; }
     static get encapsulation() { return "shadow"; }

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

@@ -2,7 +2,7 @@
   display: block;
 }
 
-gux-button-slot button {
+gux-button-slot button .gux-target-display {
   display: flex;
   flex-direction: row;
   gap: 4px;

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

@@ -131,6 +131,11 @@ export class GuxRichTextEditorActionRichStyle {
             }
         }
     }
+    renderMenu() {
+        return (h("div", { class: "gux-target-display" }, this.renderTargetDisplay(), h("gux-icon", { "icon-name": this.expanded
+                ? 'custom/chevron-up-small-regular'
+                : 'custom/chevron-down-small-regular', "screenreader-text": this.i18n('richStyleDropdown') })));
+    }
     renderListItem(item) {
         return (h("gux-truncate", { "max-lines": 1 }, item.textContent));
     }
@@ -163,12 +168,10 @@ export class GuxRichTextEditorActionRichStyle {
         return (h("div", { class: "gux-list-container", slot: "popup" }, h("gux-rich-text-editor-list", { ref: el => (this.listElement = el), onClick: e => this.onListClick(e) }, h("slot", null))));
     }
     renderTarget() {
-        return (h("gux-button-slot", { accent: "ghost", slot: "target" }, h("button", { type: "button", ref: el => (this.actionButton = el), class: { 'gux-is-pressed': this.expanded }, onClick: () => this.onActionButtonClick(), disabled: this.disabled || hasDisabledParent(this.root), "aria-haspopup": "true", "aria-expanded": this.expanded.toString() }, this.renderTargetDisplay(), h("gux-icon", { size: "small", "icon-name": this.expanded
-                ? 'custom/chevron-up-small-regular'
-                : 'custom/chevron-down-small-regular', "screenreader-text": this.i18n('richStyleDropdown') })), this.renderTooltip()));
+        return (h("gux-button-slot", { accent: "ghost", slot: "target", "icon-only": true }, h("button", { type: "button", ref: el => (this.actionButton = el), class: { 'gux-is-pressed': this.expanded }, onClick: () => this.onActionButtonClick(), disabled: this.disabled || hasDisabledParent(this.root), "aria-haspopup": "true", "aria-expanded": this.expanded.toString() }, this.renderMenu()), this.renderTooltip()));
     }
     render() {
-        return (h("gux-popup", { key: '40e3c24df747dea627240ba4604c7d7c595a83b5', expanded: this.expanded, exceedTargetWidth: true, placement: "bottom-start" }, this.renderTarget(), this.renderPopup()));
+        return (h("gux-popup", { key: 'a0ab8d22aeefe6381bc2aa164aa88719f83ae884', expanded: this.expanded, exceedTargetWidth: true, placement: "bottom-start" }, this.renderTarget(), this.renderPopup()));
     }
     static get is() { return "gux-rich-text-editor-action-rich-style"; }
     static get encapsulation() { return "shadow"; }

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

@@ -107,7 +107,7 @@ export class GuxRichTextEditorActionTextHighlight {
         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()));
+        return (h("gux-popup", { key: 'f786209a85a13554c1cb186a57be60241cb1a4e0', 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"; }

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

@@ -3,6 +3,13 @@
   flex-direction: row;
 }
 
+:host(.gux-hidden) .gux-divider {
+  display: none;
+}
+:host(.gux-hidden) ::slotted(:not(gux-rich-text-editor-action-link)) {
+  display: none;
+}
+
 .gux-action-group-container {
   display: flex;
   flex-direction: row;

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: '0b8535ac364ff932423814854e72b91e9c85c3bd' }, h("div", { key: '6894ddec02c878e577d54a67a78d7614c1074976', class: "gux-action-group-container" }, h("slot", { key: 'd437c37fd5ff3b10b009eb69e4c11f8616209361' })), this.renderActionGroupDivider()));
+        return (h(Host, { key: 'a35f7ec5b917b7e8bce41629baa118c98fbec1a4' }, h("div", { key: '4efa85c4228ef1e1b83fcc4011dbeccb8dbb80a7', class: "gux-action-group-container" }, h("slot", { key: '7636078e38b86dbb24df707a2f88eeeeee672472' })), 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

@@ -1,5 +1,20 @@
-import { h } from "@stencil/core";
+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, readTask } from "@stencil/core";
+import { OnResize } from "../../../utils/decorator/on-resize";
 import { hasSlot } from "../../../utils/dom/has-slot";
+import { trackComponent } from "../../../utils/tracking/usage";
+import { getActionsFromGroup } from "./gux-rich-text-editor.service";
+import { buildI18nForComponent } from "../../../i18n/index";
+import translationResources from "./gux-rich-text-editor-action/i18n/en.json";
 /**
  * @slot typographical-emphasis - Slot for typographical actions.
  * @slot text-styling - Slot for text-styling actions.
@@ -11,6 +26,122 @@ import { hasSlot } from "../../../utils/dom/has-slot";
 export class GuxRichTextEditor {
     constructor() {
         this.disabled = false;
+        this.typographicalEmphasisActions = [];
+        this.textStylingActions = [];
+        this.listsAndIndentationActions = [];
+        this.insertingActions = [];
+    }
+    checkResponsiveLayout() {
+        readTask(() => {
+            this.handleOverflow();
+            this.getHiddenActions();
+        });
+    }
+    async componentWillLoad() {
+        trackComponent(this.root);
+        this.i18n = await buildI18nForComponent(this.root, translationResources);
+    }
+    componentDidLoad() {
+        this.checkResponsiveLayout();
+    }
+    componentDidUpdate() {
+        this.handleOverflow();
+    }
+    isOverFlowing() {
+        var _a;
+        const container = (_a = this.root) === null || _a === void 0 ? void 0 : _a.shadowRoot.querySelector('.gux-rich-text-editor-toolbar-container');
+        // A group of gux-rich-text-editor-action-group.
+        const children = Array.from(container.children);
+        // Calculate the total width of all children excluding hidden (gux-rich-text-editor-action-groups).
+        const totalWidth = children
+            .filter(child => !child.classList.contains('gux-hidden'))
+            .reduce((sum, child) => sum + child.clientWidth, 0);
+        return totalWidth > container.clientWidth;
+    }
+    handleOverflow() {
+        const actionGroups = Array.from(this.root.querySelectorAll('gux-rich-text-editor-action-group'));
+        // Hide last visible action group until there's no overflow.
+        while (this.isOverFlowing()) {
+            let hidden = false;
+            for (let i = actionGroups.length - 1; i >= 0; i--) {
+                if (!actionGroups[i].classList.contains('gux-hidden')) {
+                    actionGroups[i].classList.add('gux-hidden');
+                    hidden = true;
+                    break;
+                }
+            }
+            // If no more action groups to hide, exit loop
+            if (!hidden) {
+                break;
+            }
+        }
+        // Show previously hidden groups if space is available
+        for (const group of actionGroups) {
+            if (group.classList.contains('gux-hidden')) {
+                group.classList.remove('gux-hidden');
+                // If it causes overflow again, re-hide the group and stop the loop
+                if (this.isOverFlowing()) {
+                    group.classList.add('gux-hidden');
+                    break;
+                }
+            }
+        }
+    }
+    getHiddenActions() {
+        this.typographicalEmphasisActions = getActionsFromGroup(this.root, 'gux-rich-text-editor-action-group[slot="typographical-emphasis"]', 'gux-hidden');
+        this.listsAndIndentationActions = getActionsFromGroup(this.root, 'gux-rich-text-editor-action-group[slot="lists-indentation"]', 'gux-hidden');
+        this.textStylingActions = getActionsFromGroup(this.root, 'gux-rich-text-editor-action-group[slot="text-styling"]', 'gux-hidden');
+        this.insertingActions = getActionsFromGroup(this.root, 'gux-rich-text-editor-action-group[slot="inserting"]', 'gux-hidden');
+    }
+    getAllActions() {
+        return [
+            ...this.textStylingActions,
+            ...this.typographicalEmphasisActions,
+            ...this.listsAndIndentationActions,
+            ...this.insertingActions
+        ];
+    }
+    categorizeActions(allActions) {
+        const richStylePrefix = 'rich-style-';
+        const highlightPrefix = 'highlight-';
+        const richStyleActions = [];
+        const highlightActions = [];
+        const filteredActions = [];
+        allActions.forEach(action => {
+            if (action.startsWith(richStylePrefix)) {
+                richStyleActions.push(action.slice(richStylePrefix.length));
+            }
+            else if (action.startsWith(highlightPrefix)) {
+                highlightActions.push(action.slice(highlightPrefix.length));
+            }
+            else {
+                filteredActions.push(action);
+            }
+        });
+        return { richStyleActions, highlightActions, filteredActions };
+    }
+    renderListItems(actions, useInnerHTML = false) {
+        return actions.map((action, index) => {
+            const actionText = action.replace(/<\/?[^>]+(>|$)/g, ''); // Remove HTML tags
+            return (h("gux-rich-style-list-item", Object.assign({ onClick: () => this.guxToggleAction.emit(actionText), key: index, value: actionText }, (useInnerHTML ? { innerHTML: action } : {})), !useInnerHTML && (this.i18n(actionText) || actionText)));
+        });
+    }
+    renderSubList(labelKey, actions, useInnerHTML = false) {
+        if (actions.length > 0) {
+            return (h("gux-rich-text-editor-sub-list", { label: this.i18n(labelKey) }, this.renderListItems(actions, useInnerHTML)));
+        }
+    }
+    renderHighlightSubList(actions) {
+        if (actions.length > 0) {
+            return (h("gux-rich-text-editor-sub-list", { label: this.i18n('textHighlight') }, this.renderListItems(actions), h("gux-rich-style-list-item", { onClick: () => this.guxToggleAction.emit('noHighlightAction'), value: "noHighlight" }, h("gux-truncate", { "max-lines": 1 }, this.i18n('noHighlight')))));
+        }
+    }
+    renderTextEditorMenu() {
+        const allActions = this.getAllActions();
+        if (allActions.length > 0) {
+            const { richStyleActions, highlightActions, filteredActions } = this.categorizeActions(allActions);
+            return (h("gux-rich-text-editor-menu", null, this.renderListItems(filteredActions), this.renderSubList('richStyle', richStyleActions, true), this.renderHighlightSubList(highlightActions)));
+        }
     }
     renderSlot(slotName, containerClass) {
         if (hasSlot(this.root, slotName)) {
@@ -34,10 +165,10 @@ export class GuxRichTextEditor {
         return this.renderSlot('global-action', 'gux-global-action-container');
     }
     render() {
-        return (h("div", { key: '3ec3c4adf65ef5a7f5ff4ea3ac18002b28fa1009', class: {
+        return (h("div", { key: '40a431abfae4b59ab2cb5d6858669d95d67dd70f', class: {
                 'gux-rich-text-editor-container': true,
                 'gux-disabled': this.disabled
-            } }, 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" })));
+            } }, h("div", { key: 'd69396356a78fe4f3af77c5d0da2d475085cb57b', class: "gux-rich-text-editor-toolbar-container" }, this.renderTypographicalEmphasis(), this.renderTextStyling(), this.renderListsIndentation(), this.renderInserting(), this.renderTextEditorMenu(), this.renderGlobalAction()), h("slot", { key: '8346fe65a8764fc084dfb38857cd2309f4f89835', name: "editor" })));
     }
     static get is() { return "gux-rich-text-editor-beta"; }
     static get encapsulation() { return "shadow"; }
@@ -73,5 +204,34 @@ export class GuxRichTextEditor {
             }
         };
     }
+    static get states() {
+        return {
+            "typographicalEmphasisActions": {},
+            "textStylingActions": {},
+            "listsAndIndentationActions": {},
+            "insertingActions": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "guxToggleAction",
+                "name": "guxToggleAction",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
     static get elementRef() { return "root"; }
 }
+__decorate([
+    OnResize()
+], GuxRichTextEditor.prototype, "checkResponsiveLayout", null);

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

@@ -34,10 +34,10 @@ export class GuxRichHighlightListItem {
         }
     }
     render() {
-        return (h("div", { key: 'c30f320ff38c903e13eb69fc493ba73815153579', class: {
+        return (h("div", { key: 'e800e2d6432d1b54bb126bbff56f9977a0fd83ff', 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()));
+            }, role: "listitem" }, h("button", { key: '40073a6d93f2ee28e0f681892e60865cd7ab3686', 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"; }

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: '4a15b295e8a77a8760dd96c780a34b67a8301d94', role: "listitem" }, h("button", { key: '3c7a10f99083a85d960da1b686ade1c67ddf78e9', type: "button", tabIndex: -1, disabled: this.disabled }, h("slot", { key: '7b5cb370a7064593b28952969e50baf59e021bca' }))));
+        return (h(Host, { key: 'f2d80e9cf8d1bf69014227cf2f8b4bb13dded203', role: "listitem" }, h("button", { key: '969f6af3077c1efa32f9716358ff0d5b5cd42ee8', type: "button", tabIndex: -1, disabled: this.disabled }, h("gux-truncate", { key: 'c04cb2acc8c21dba949be2287748bb5b348840fe', "max-lines": 1 }, h("slot", { key: 'e567c7d7443cc743d3c96a1dd14715f591c6ad2d' })))));
     }
     static get is() { return "gux-rich-style-list-item"; }
     static get encapsulation() { return "shadow"; }
@@ -78,7 +78,7 @@ export class GuxRichStyleListItem {
                     "text": ""
                 },
                 "attribute": "value",
-                "reflect": false
+                "reflect": true
             }
         };
     }

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

@@ -2,11 +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 or gux-rich-highlight-list-item elements.
+ * @slot - collection of gux-rich-style-list-item, gux-rich-highlight-list-item or gux-rich-text-editor-sub-list elements.
  */
 const validFocusableItems = [
     'gux-rich-style-list-item',
-    'gux-rich-highlight-list-item'
+    'gux-rich-highlight-list-item',
+    'gux-rich-text-editor-sub-list'
 ];
 export class GuxRichTextEditorList {
     constructor() {
@@ -77,7 +78,7 @@ export class GuxRichTextEditorList {
         last(this.root, validFocusableItems);
     }
     render() {
-        return (h(Host, { key: 'a9e2c6054a4069423aab4b7ab97812efe2a3bbd0', role: "list" }, h("slot", { key: '8559c06a39a7094a91fcf4ddf8a61769c58df922', onSlotchange: () => this.setListItems() })));
+        return (h(Host, { key: '61a6b27bba3f4b2f0d7a773e8dfcb9096c915ef6', role: "list" }, h("slot", { key: '9bdb11b67705953e6d39b7075cfcd6226f58cc91', onSlotchange: () => this.setListItems() })));
     }
     static get is() { return "gux-rich-text-editor-list"; }
     static get encapsulation() { return "shadow"; }

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

@@ -0,0 +1,89 @@
+:host {
+  inline-size: 100%;
+  text-align: start;
+  outline: none;
+}
+
+:host([disabled]) {
+  pointer-events: none;
+}
+
+:host([disabled=false]) {
+  pointer-events: auto;
+}
+
+::slotted(gux-icon) {
+  inline-size: var(--gse-ui-menu-option-startIcon-height);
+  block-size: var(--gse-ui-menu-option-startIcon-height);
+  margin-inline-end: var(--gse-ui-menu-option-gap);
+  vertical-align: middle;
+}
+
+button {
+  all: unset;
+  box-sizing: border-box;
+  inline-size: 100%;
+  min-block-size: var(--gse-ui-menu-option-height);
+  padding: var(--gse-ui-menu-option-padding);
+  font-family: var(--gse-ui-menu-option-label-default-text-fontFamily);
+  font-size: var(--gse-ui-menu-option-label-default-text-fontSize);
+  font-weight: var(--gse-ui-menu-option-label-default-text-fontWeight);
+  line-height: var(--gse-ui-menu-option-label-default-text-lineHeight);
+  color: var(--gse-ui-menu-option-label-foregroundColor);
+  word-wrap: break-word;
+  cursor: pointer;
+  outline: none;
+  outline-offset: calc(var(--gse-ui-menu-option-focus-border-width) * -1);
+  background-color: var(--gse-ui-menu-option-default-backgroundColor);
+  border: none;
+}
+button:focus-visible:not(:disabled) {
+  outline: var(--gse-ui-menu-option-focus-border-width) var(--gse-ui-menu-option-focus-border-style) var(--gse-ui-menu-option-focus-border-color);
+  border-radius: var(--gse-semantic-focusOutline-sm-borderRadius);
+}
+button:hover:not(:disabled) {
+  background: var(--gse-ui-menu-option-hover-backgroundColor);
+}
+button:active:not(:disabled) {
+  font-family: var(--gse-ui-menu-option-label-active-text-fontFamily);
+  font-size: var(--gse-ui-menu-option-label-active-text-fontSize);
+  font-weight: var(--gse-ui-menu-option-label-active-text-fontWeight);
+  line-height: var(--gse-ui-menu-option-label-active-text-lineHeight);
+  background: var(--gse-ui-menu-option-selected-backgroundColor);
+}
+button:disabled {
+  cursor: default;
+  opacity: var(--gse-ui-menu-option-disabled-opacity);
+}
+
+::slotted(*) {
+  margin: 0;
+}
+
+button.gux-sub-list-button {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+button gux-icon {
+  align-self: center;
+  color: var(--gse-ui-menu-option-parentIcon-selected-foregroundColor);
+}
+
+.gux-sub-list-wrapper {
+  position: fixed;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  visibility: hidden;
+  flex-direction: column;
+  inline-size: 130px;
+  padding: var(--gse-ui-menu-padding);
+  margin: 0;
+  background-color: var(--gse-ui-menu-backgroundColor);
+  border: none;
+  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-sub-list-wrapper.gux-shown {
+  visibility: visible;
+}

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

@@ -0,0 +1,213 @@
+import { autoUpdate, computePosition, flip, offset, shift } from "@floating-ui/dom";
+import { Host, h } from "@stencil/core";
+import { next, previous } from "../../../../stable/gux-list/gux-list.service";
+/**
+ * @slot - collection of gux-rich-style-list-item elements.
+ */
+export class GuxRichTextEditorSubList {
+    constructor() {
+        this.label = undefined;
+        this.isShown = false;
+    }
+    onKeydown(event) {
+        switch (event.key) {
+            case 'Enter':
+                event.stopPropagation();
+                this.focusOnSubList();
+                break;
+            case 'ArrowUp':
+                if (!(this.root === event.target)) {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    previous(this.root, ['gux-rich-style-list-item']);
+                }
+                break;
+            case 'ArrowDown':
+                if (!(this.root === event.target)) {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    next(this.root, ['gux-rich-style-list-item']);
+                }
+                break;
+            case 'ArrowRight':
+                event.stopPropagation();
+                this.show();
+                this.focusOnSubList();
+                break;
+            case 'ArrowLeft':
+            case 'Escape':
+                if (!(this.root === event.target)) {
+                    event.stopPropagation();
+                }
+                this.buttonElement.focus();
+                break;
+        }
+    }
+    onMouseEnter() {
+        this.show();
+    }
+    onMouseLeave() {
+        this.hide();
+    }
+    onClick(event) {
+        if (event.target.nodeName === 'GUX-RICH-STYLE-LIST-ITEM') {
+            this.hide();
+            return;
+        }
+    }
+    onFocusIn() {
+        this.show();
+    }
+    onFocusOut() {
+        this.hide();
+    }
+    componentDidLoad() {
+        if (this.isShown) {
+            this.runUpdatePosition();
+        }
+    }
+    componentDidUpdate() {
+        if (this.isShown) {
+            this.runUpdatePosition();
+        }
+        else if (this.cleanupUpdatePosition) {
+            this.cleanupUpdatePosition();
+        }
+    }
+    disconnectedCallback() {
+        if (this.cleanupUpdatePosition) {
+            this.cleanupUpdatePosition();
+        }
+    }
+    focusOnSubList() {
+        if (this.subListContentElement.contains(document.activeElement)) {
+            return;
+        }
+        const listItems = Array.from(this.root.children);
+        const nextFocusableElement = listItems[0];
+        void nextFocusableElement.focus();
+    }
+    show() {
+        this.isShown = true;
+    }
+    hide() {
+        if (this.isShown) {
+            this.isShown = false;
+        }
+    }
+    runUpdatePosition() {
+        if (this.root.isConnected) {
+            this.cleanupUpdatePosition = autoUpdate(this.buttonElement, this.subListElement, () => this.updatePosition(), {
+                ancestorScroll: true,
+                elementResize: true,
+                animationFrame: true,
+                ancestorResize: true
+            });
+        }
+        else {
+            this.disconnectedCallback();
+        }
+    }
+    updatePosition() {
+        if (this.subListElement) {
+            void computePosition(this.buttonElement, this.subListElement, {
+                placement: 'right-start',
+                strategy: 'fixed',
+                middleware: [offset(4), flip(), shift()]
+            }).then(({ x, y }) => {
+                Object.assign(this.subListElement.style, {
+                    left: `${x}px`,
+                    top: `${y}px`
+                });
+            });
+        }
+    }
+    render() {
+        return (h(Host, { key: '7deaeb8403bc4d3387465109f394c5b94735289a' }, h("button", { key: '092cc834b5320deda9548b44f306877be2145227', type: "button", class: {
+                'gux-sub-list-button': true,
+                'gux-sub-list-button-active': this.isShown
+            }, tabIndex: -1, role: "listitem", ref: el => (this.buttonElement = el), "aria-haspopup": "true", "aria-expanded": this.isShown.toString() }, h("span", { key: 'db24795cdd7d2f486c4fd7891f3098c08c1114a5', class: "gux-sub-list-button-text" }, this.label), h("gux-icon", { key: '4e5cab880869b185f9220d90e6501baf625e3b55', size: "small", "icon-name": "custom/chevron-right-small-regular", decorative: true })), h("div", { key: '52f98219440f57cab0de72417632769cf96f248d', ref: el => (this.subListElement = el), class: {
+                'gux-sub-list-wrapper': true,
+                'gux-shown': this.isShown
+            } }, h("div", { key: '38e81a94cfc2ef6e5cb8460507412ade83254de1', role: "list", class: "gux-sub-list-content", ref: el => (this.subListContentElement = el) }, h("slot", { key: '27f2f932530bd1abaedccb992bf5cd75afc5277e' })))));
+    }
+    static get is() { return "gux-rich-text-editor-sub-list"; }
+    static get encapsulation() { return "shadow"; }
+    static get delegatesFocus() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["gux-rich-text-editor-sub-list.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["gux-rich-text-editor-sub-list.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "label",
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isShown": {}
+        };
+    }
+    static get elementRef() { return "root"; }
+    static get listeners() {
+        return [{
+                "name": "keydown",
+                "method": "onKeydown",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "mouseenter",
+                "method": "onMouseEnter",
+                "target": undefined,
+                "capture": false,
+                "passive": true
+            }, {
+                "name": "mouseleave",
+                "method": "onMouseLeave",
+                "target": undefined,
+                "capture": false,
+                "passive": true
+            }, {
+                "name": "click",
+                "method": "onClick",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "focusin",
+                "method": "onFocusIn",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "focusout",
+                "method": "onFocusOut",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}