genesys-spark-components 4.139.0 → 4.141.0

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-e321455d.js');
-const usage = require('./usage-b4888c7f.js');
+const usage = require('./usage-dd8d82d3.js');
 const logError = require('./log-error-7b9d4b57.js');
 
 const legacyIconNames = [
@@ -554,7 +554,7 @@ const GuxIcon = class {
         return svgElement.outerHTML;
     }
     render() {
-        return (this.svgHtml && (index.h("div", { key: '4cee2f5e075acfa120f017ad2fc1f6fefd901949', class: "gux-icon-container", innerHTML: this.svgHtml })));
+        return (this.svgHtml && (index.h("div", { key: '48732c4782a70319ea4be66ab109aa9af91678a8', class: "gux-icon-container", innerHTML: this.svgHtml })));
     }
     static get assetsDirs() { return ["icons"]; }
     get root() { return index.getElement(this); }

package/dist/cjs/gux-inline-alert.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-e321455d.js');
 const index$1 = require('./index-aa48ea67.js');
-const usage = require('./usage-b4888c7f.js');
+const usage = require('./usage-dd8d82d3.js');
 require('./get-closest-element-9e41d6b9.js');
 
 const info = "Information alert with message";
@@ -45,10 +45,10 @@ const GuxAlert = class {
         this.i18n = await index$1.buildI18nForComponent(this.root, translationResources);
     }
     render() {
-        return (index.h("div", { key: '1415fdf4b452c8a7265a9ba3f87cb8b4268dbb5d', class: {
+        return (index.h("div", { key: 'e38a052abde5bdb85f668e7a56d3735704755f03', class: {
                 'gux-inline-alert': true,
                 [`gux-${this.accent}`]: true
-            } }, index.h("div", { key: '8babcd543b6ffb15f223f364a89a95809526bebc', class: "gux-message-wrapper" }, index.h("gux-icon", { key: 'a3894fef628e1eebc22f3acb2a5037aaf4656590', "icon-name": this.getIcon(this.accent), decorative: true, size: "small" }), index.h("gux-screen-reader-beta", { key: 'c6dcc56496a3c4ed8b105cbeab080f163c2e8e43' }, this.i18n(this.accent)), index.h("div", { key: '1db5fd900c4cf4dde8826b3254f8da1831316c12', class: "gux-content" }, index.h("slot", { key: '58726e3bce9ae06959d67478249b7cdbab9d890f', name: "content" }, index.h("slot", { key: '44766ba8e0dab916d5f3666ae47e9befcb62dc66' }))))));
+            } }, index.h("div", { key: '3685211e79104b9158b6d373998c77f2476f5a95', class: "gux-message-wrapper" }, index.h("gux-icon", { key: '3b332a38888504f9dfa1c05de9886c094ef9e183', "icon-name": this.getIcon(this.accent), decorative: true, size: "small" }), index.h("gux-screen-reader-beta", { key: 'c7718994a9bd5b94e6d2bddadfe7bb3a6996733f' }, this.i18n(this.accent)), index.h("div", { key: 'd0a29d8e5a44d2d18b480b75fcfa426a99067b55', class: "gux-content" }, index.h("slot", { key: '162d617ab2c483968f6118ffb9ad043333695bbf', name: "content" }, index.h("slot", { key: 'e0b6e888bdc70bf18e6271c18993c30f532be7e9' }))))));
     }
     get root() { return index.getElement(this); }
 };

package/dist/cjs/gux-inline-dropdown-beta.cjs.entry.js

@@ -0,0 +1,274 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-e321455d.js');
+const onClickOutside = require('./on-click-outside-8a2d3a8e.js');
+const index$1 = require('./index-aa48ea67.js');
+const simulateNativeEvent = require('./simulate-native-event-e88bf64f.js');
+const afterNextRender = require('./after-next-render-162425fe.js');
+const usage = require('./usage-dd8d82d3.js');
+const onMutation = require('./on-mutation-6d71ec1a.js');
+const guxListbox_service = require('./gux-listbox.service-700ba659.js');
+const hasSlot = require('./has-slot-3edae188.js');
+require('./get-closest-element-9e41d6b9.js');
+
+const filterResults = "Type to filter dropdown results";
+const noSelection = "Select...";
+const dropdown = "Dropdown";
+const translationResources = {
+	filterResults: filterResults,
+	noSelection: noSelection,
+	dropdown: dropdown
+};
+
+const guxInlineDropdownCss = ":host{box-sizing:border-box}::slotted(gux-listbox){inline-size:fit-content}.gux-field,.gux-target-container-expanded{all:unset;box-sizing:border-box;display:inline-flex;flex-direction:row;flex-wrap:nowrap;place-content:stretch center;align-items:center;block-size:var(--gse-ui-formControl-input-textfield-height);font-family:var(--gse-ui-dataTableItems-inlineDropdown-label-fontFamily);font-size:var(--gse-ui-dataTableItems-inlineDropdown-label-fontSize);font-weight:var(--gse-ui-dataTableItems-inlineDropdown-label-fontWeight);line-height:var(--gse-ui-dataTableItems-inlineDropdown-label-lineHeight);cursor:pointer;background-color:var(--gse-ui-formControl-input-backgroundColor)}.gux-target-container-expanded,.gux-target-container-collapsed .gux-field{padding-block:4px;padding-inline:8px}.gux-target-container-collapsed .gux-field-button:hover,.gux-target-container-expanded:hover{background-color:var(--gse-ui-dataTableItems-statusIndicator-hover)}.gux-field.gux-input-field{block-size:var(--gse-ui-dataTableItems-inlineDropdown-label-lineHeight)}.gux-field .gux-field-content{--gux-zindex-tooltip:3;display:inline-flex;flex:1 1 0;flex-direction:row;flex-wrap:nowrap;place-content:stretch flex-start;align-items:flex-start;min-inline-size:0;block-size:var(--gse-ui-dataTableItems-inlineDropdown-label-lineHeight)}.gux-field .gux-field-content .gux-filter,.gux-field .gux-field-content .gux-selected-option,.gux-field .gux-field-content .gux-placeholder{flex:1 1 auto;align-self:auto;order:0;padding:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.gux-field .gux-field-content .gux-placeholder{color:var(--gse-ui-dataTableItems-inlineDropdown-text)}.gux-field .gux-expand-icon{flex:0 0 auto;align-self:auto;order:0;padding-inline-start:var(--gse-ui-dataTableItems-inlineDropdown-gap);color:var(--gse-ui-dataTableItems-inlineDropdown-chevron-default)}.gux-target-container-expanded{background-color:var(--gse-ui-dataTableItems-inlineDropdown-active);border-radius:var(--gse-ui-dataTableItems-statusIndicator-borderRadius)}.gux-target-container-expanded:focus-visible{outline:var(--gse-ui-formControl-input-focus-border-width) var(--gse-ui-formControl-input-focus-border-style) var(--gse-ui-formControl-input-focus-border-color);outline-offset:var(--gse-semantic-focusOutline-offset)}.gux-target-container-expanded:focus-within:has(:focus-visible){outline:var(--gse-ui-formControl-input-focus-border-width) var(--gse-ui-formControl-input-focus-border-style) var(--gse-ui-formControl-input-focus-border-color);outline-offset:var(--gse-semantic-focusOutline-offset)}.gux-target-container-expanded .gux-filter-input{background-color:inherit;border:none}.gux-target-container-expanded .gux-filter-input:focus{outline:none;border:none}.gux-target-container-expanded .gux-field-button{inline-size:auto;block-size:var(--gse-ui-dataTableItems-inlineDropdown-label-lineHeight);margin:0;outline:none;background:inherit;border:none;box-shadow:none}.gux-target-container-expanded .gux-field-button:focus{outline:none}.gux-target-container-collapsed .gux-field-button{border-radius:var(--gse-ui-dataTableItems-statusIndicator-borderRadius)}.gux-target-container-collapsed .gux-field-button:focus-visible{outline:var(--gse-ui-formControl-input-focus-border-width) var(--gse-ui-formControl-input-focus-border-style) var(--gse-ui-formControl-input-focus-border-color);outline-offset:var(--gse-semantic-focusOutline-offset)}.gux-target-container-collapsed .gux-field-button:focus-within:has(:focus-visible){outline:var(--gse-ui-formControl-input-focus-border-width) var(--gse-ui-formControl-input-focus-border-style) var(--gse-ui-formControl-input-focus-border-color);outline-offset:var(--gse-semantic-focusOutline-offset)}::slotted(gux-listbox){outline:none;box-shadow:var(--gse-ui-menu-boxShadow)}.gux-selected-icon{display:flex;flex-direction:row;align-items:center}.gux-selected-icon.gux-icon-position-end{flex-direction:row-reverse}.gux-selected-icon gux-icon{padding-inline-end:var(--gse-ui-dataTableItems-inlineDropdown-gap)}.gux-status-indicator{display:inline-flex;gap:var(--gse-ui-dataTableItems-statusIndicator-gap);align-items:center}.gux-status-icon{display:inline-flex}.gux-status-icon::before{content:\"\"}.gux-status-icon-info::before{-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' %3E%3Cpath d='M6 0C7.59 0 9.12 0.629997 10.245 1.755C11.37 2.88 12 4.41 12 6C12 7.59 11.37 9.12 10.245 10.245C9.12 11.37 7.59 12 6 12C4.41 12 2.88 11.37 1.755 10.245C0.629997 9.12 0 7.59 0 6C0 4.41 0.629997 2.88 1.755 1.755C2.88 0.629997 4.41 0 6 0Z' /%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' %3E%3Cpath d='M6 0C7.59 0 9.12 0.629997 10.245 1.755C11.37 2.88 12 4.41 12 6C12 7.59 11.37 9.12 10.245 10.245C9.12 11.37 7.59 12 6 12C4.41 12 2.88 11.37 1.755 10.245C0.629997 9.12 0 7.59 0 6C0 4.41 0.629997 2.88 1.755 1.755C2.88 0.629997 4.41 0 6 0Z' /%3E%3C/svg%3E\");inline-size:var(--gse-ui-dataTableItems-statusIndicator-label-fontSize);block-size:var(--gse-ui-dataTableItems-statusIndicator-label-fontSize);background:var(--gse-ui-statusGlyph-information)}.gux-status-icon-warning::before{inline-size:var(--gse-ui-dataTableItems-statusIndicator-label-fontSize);block-size:var(--gse-ui-dataTableItems-statusIndicator-label-fontSize);-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' %3E%3Cpath d='M6.16516 0.749268C6.49521 0.749268 6.80275 0.921791 6.97527 1.21434L12.0386 9.8407C12.2111 10.1332 12.2111 10.4933 12.0386 10.7783C11.8735 11.0709 11.5585 11.2509 11.2285 11.2509H1.10186C0.764303 11.2509 0.456764 11.0709 0.291738 10.7783C0.126712 10.4858 0.126712 10.1257 0.291738 9.8407L5.35504 1.21434C5.52757 0.929292 5.8276 0.749268 6.16516 0.749268Z' /%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' %3E%3Cpath d='M6.16516 0.749268C6.49521 0.749268 6.80275 0.921791 6.97527 1.21434L12.0386 9.8407C12.2111 10.1332 12.2111 10.4933 12.0386 10.7783C11.8735 11.0709 11.5585 11.2509 11.2285 11.2509H1.10186C0.764303 11.2509 0.456764 11.0709 0.291738 10.7783C0.126712 10.4858 0.126712 10.1257 0.291738 9.8407L5.35504 1.21434C5.52757 0.929292 5.8276 0.749268 6.16516 0.749268Z' /%3E%3C/svg%3E\");background:var(--gse-ui-statusGlyph-neutral)}.gux-status-icon-error::before{inline-size:var(--gse-ui-dataTableItems-statusIndicator-label-fontSize);block-size:var(--gse-ui-dataTableItems-statusIndicator-label-fontSize);-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' %3E%3Cpath d='M0.236102 6.88C-0.0787008 6.33785 -0.0787008 5.66215 0.236102 5.12L2.36477 1.38C2.67957 0.837853 3.24922 0.5 3.87133 0.5H8.12867C8.75078 0.5 9.32043 0.837853 9.63523 1.38L11.7639 5.12C12.0787 5.66215 12.0787 6.33785 11.7639 6.88L9.63523 10.62C9.32043 11.1621 8.75078 11.5 8.12867 11.5H3.87133C3.24922 11.5 2.67957 11.1621 2.36477 10.62L0.236102 6.88Z' /%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' %3E%3Cpath d='M0.236102 6.88C-0.0787008 6.33785 -0.0787008 5.66215 0.236102 5.12L2.36477 1.38C2.67957 0.837853 3.24922 0.5 3.87133 0.5H8.12867C8.75078 0.5 9.32043 0.837853 9.63523 1.38L11.7639 5.12C12.0787 5.66215 12.0787 6.33785 11.7639 6.88L9.63523 10.62C9.32043 11.1621 8.75078 11.5 8.12867 11.5H3.87133C3.24922 11.5 2.67957 11.1621 2.36477 10.62L0.236102 6.88Z' /%3E%3C/svg%3E\");background:var(--gse-ui-statusGlyph-negative)}.gux-status-icon-success::before{inline-size:var(--gse-ui-dataTableItems-statusIndicator-label-fontSize);block-size:var(--gse-ui-dataTableItems-statusIndicator-label-fontSize);-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' %3E%3Cpath d='M6 0C7.59 0 9.12 0.629997 10.245 1.755C11.37 2.88 12 4.41 12 6C12 7.59 11.37 9.12 10.245 10.245C9.12 11.37 7.59 12 6 12C4.41 12 2.88 11.37 1.755 10.245C0.629997 9.12 0 7.59 0 6C0 4.41 0.629997 2.88 1.755 1.755C2.88 0.629997 4.41 0 6 0Z' /%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' %3E%3Cpath d='M6 0C7.59 0 9.12 0.629997 10.245 1.755C11.37 2.88 12 4.41 12 6C12 7.59 11.37 9.12 10.245 10.245C9.12 11.37 7.59 12 6 12C4.41 12 2.88 11.37 1.755 10.245C0.629997 9.12 0 7.59 0 6C0 4.41 0.629997 2.88 1.755 1.755C2.88 0.629997 4.41 0 6 0Z' /%3E%3C/svg%3E\");background:var(--gse-ui-statusGlyph-positive)}";
+const GuxInlineDropdownBetaStyle0 = guxInlineDropdownCss;
+
+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 GuxDropdown = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.guxexpanded = index.createEvent(this, "guxexpanded", 7);
+        this.guxcollapsed = index.createEvent(this, "guxcollapsed", 7);
+        this.required = false;
+        this.expanded = false;
+    }
+    watchValue(newValue) {
+        this.validateValue(newValue, this.listboxElement);
+    }
+    onKeydown(event) {
+        switch (event.key) {
+            case 'Escape':
+                this.collapseListbox('focusFieldButton');
+                return;
+            case 'Tab':
+                this.collapseListbox('noFocusChange');
+                return;
+            case 'ArrowDown':
+                if (this.activeElementNotListbox()) {
+                    event.preventDefault();
+                    this.expanded = true;
+                    guxListbox_service.setInitialActiveOption(this.listboxElement);
+                }
+                return;
+        }
+    }
+    onInternallistboxoptionsupdated(event) {
+        event.stopPropagation();
+        index.forceUpdate(this.root);
+    }
+    onBlur(event) {
+        this.stopPropagationOfInternalFocusEvents(event);
+    }
+    onFocus(event) {
+        this.stopPropagationOfInternalFocusEvents(event);
+    }
+    onFocusout(event) {
+        this.stopPropagationOfInternalFocusEvents(event);
+    }
+    onFocusin(event) {
+        this.stopPropagationOfInternalFocusEvents(event);
+    }
+    onClickOutside() {
+        this.collapseListbox('noFocusChange');
+    }
+    onMutation() {
+        var _a;
+        if (this.listboxElement) {
+            return;
+        }
+        this.listboxElement = (_a = this.root) === null || _a === void 0 ? void 0 : _a.querySelector('gux-listbox');
+        this.applyListboxEventListeners();
+    }
+    onInternalExpanded(event) {
+        event.stopPropagation();
+        this.guxexpanded.emit();
+        if (this.listboxElement) {
+            afterNextRender.afterNextRender(() => {
+                this.listboxElement.focus();
+            });
+        }
+    }
+    onInternalCollapsed(event) {
+        event.stopPropagation();
+        this.guxcollapsed.emit();
+    }
+    connectedCallback() {
+        var _a;
+        this.listboxElement = (_a = this.root) === null || _a === void 0 ? void 0 : _a.querySelector('gux-listbox');
+        if (this.listboxElement) {
+            this.validateValue(this.value, this.listboxElement);
+        }
+    }
+    async componentWillLoad() {
+        usage.trackComponent(this.root);
+        this.i18n = await index$1.buildI18nForComponent(this.root, translationResources);
+    }
+    componentDidLoad() {
+        this.applyListboxEventListeners();
+    }
+    componentWillRender() {
+        if (this.listboxElement) {
+            this.validateValue(this.value, this.listboxElement);
+        }
+    }
+    showTooltip() {
+        var _a;
+        void ((_a = this.truncateElement) === null || _a === void 0 ? void 0 : _a.setShowTooltip());
+    }
+    hideTooltip() {
+        var _a;
+        void ((_a = this.truncateElement) === null || _a === void 0 ? void 0 : _a.setHideTooltip());
+    }
+    validateValue(newValue, listboxElement) {
+        if (newValue === undefined) {
+            if (listboxElement) {
+                listboxElement.value = newValue;
+            }
+            return;
+        }
+        const selectedListboxOptionElement = this.getOptionElementByValue(newValue);
+        if (selectedListboxOptionElement) {
+            listboxElement.value = newValue;
+            return;
+        }
+    }
+    applyListboxEventListeners() {
+        var _a, _b;
+        (_a = this.listboxElement) === null || _a === void 0 ? void 0 : _a.addEventListener('input', (event) => {
+            event.stopPropagation();
+            this.updateValue(event.target.value);
+        });
+        (_b = this.listboxElement) === null || _b === void 0 ? void 0 : _b.addEventListener('change', (event) => {
+            event.stopPropagation();
+        });
+    }
+    stopPropagationOfInternalFocusEvents(event) {
+        if (this.root.contains(event.relatedTarget)) {
+            return event.stopImmediatePropagation();
+        }
+    }
+    get optionElements() {
+        return guxListbox_service.getListOptions(this.listboxElement);
+    }
+    getOptionElementByValue(value) {
+        return this.optionElements.find(optionElement => {
+            return optionElement.value === value;
+        });
+    }
+    fieldButtonClick() {
+        this.expanded = !this.expanded;
+    }
+    activeElementNotListbox() {
+        return document.activeElement !== this.listboxElement;
+    }
+    collapseListbox(focusChange) {
+        if (this.expanded) {
+            this.expanded = false;
+        }
+        if (focusChange === 'focusFieldButton') {
+            this.fieldButtonElement.focus();
+        }
+    }
+    updateValue(newValue) {
+        if (this.value !== newValue) {
+            this.value = newValue;
+            simulateNativeEvent.simulateNativeEvent(this.root, 'input');
+            simulateNativeEvent.simulateNativeEvent(this.root, 'change');
+        }
+        this.collapseListbox('focusFieldButton');
+    }
+    renderTargetDisplay() {
+        const selectedListboxOptionElement = this.getOptionElementByValue(this.value);
+        if (selectedListboxOptionElement) {
+            return (index.h("div", { class: "gux-selected-option" }, this.renderSelectedItem(selectedListboxOptionElement)));
+        }
+        return (index.h("div", { class: "gux-placeholder" }, this.placeholder || this.i18n('noSelection')));
+    }
+    /**
+     * Renders the selection display for the selected item. This function needs a branch to handle
+     * each type defined in GuxDropdownOptionType
+     *
+     * @param item The selected item. This can be any of the node types defined in GuxDropdownOptionType.
+     * @returns Rendered selection details.
+     */
+    renderSelectedItem(item) {
+        const tag = item.tagName.toLowerCase();
+        switch (tag) {
+            case 'gux-option':
+                return this.renderOption(item);
+            case 'gux-option-icon':
+                return this.renderIconOption(item);
+            case 'gux-option-status-beta':
+                return this.renderStatusOption(item);
+            default:
+                // eslint-disable-next-line no-case-declarations
+                const _exhaustiveCheck = tag;
+                return _exhaustiveCheck;
+        }
+    }
+    renderOption(option) {
+        let optionText = option.textContent;
+        if (hasSlot.hasSlot(option, 'subtext')) {
+            const subtext = option.querySelector('[slot=subtext]');
+            optionText = optionText.substring(0, optionText.length - subtext.textContent.length);
+        }
+        return (index.h("gux-truncate", { ref: el => (this.truncateElement = el), dir: "auto" }, optionText));
+    }
+    renderIconOption(iconOption) {
+        let iconStyle = null;
+        if (iconOption.iconColor !== null) {
+            iconStyle = { color: iconOption.iconColor };
+        }
+        return (index.h("span", { class: {
+                'gux-selected-icon': true,
+                'gux-icon-position-end': iconOption.iconPosition === 'end'
+            } }, index.h("gux-icon", { "icon-name": iconOption.iconName, style: iconStyle, decorative: true, size: "small" }), index.h("gux-truncate", { ref: el => (this.truncateElement = el) }, iconOption.textContent)));
+    }
+    renderStatusOption(statusOption) {
+        const optionText = statusOption.textContent;
+        return (index.h("div", { class: "gux-status-indicator" }, index.h("span", { class: `gux-status-icon gux-status-icon-${statusOption.accent}` }), index.h("div", { class: "gux-status-indicator-text" }, optionText)));
+    }
+    renderPopup() {
+        return (index.h("slot", { slot: "popup" }));
+    }
+    renderTarget() {
+        return (index.h("div", { class: {
+                'gux-target-container-collapsed': true
+            }, slot: "target" }, index.h("button", { type: "button", class: "gux-field gux-field-button", onClick: this.fieldButtonClick.bind(this), onFocusin: this.showTooltip.bind(this), onFocusout: this.hideTooltip.bind(this), ref: el => (this.fieldButtonElement = el), "aria-haspopup": "listbox", "aria-expanded": this.expanded.toString() }, this.renderTargetContent(), index.h("gux-icon", { class: {
+                'gux-expand-icon': true
+            }, "screenreader-text": this.i18n('dropdown'), size: "small", iconName: this.expanded
+                ? 'custom/chevron-up-small-regular'
+                : 'custom/chevron-down-small-regular' }))));
+    }
+    renderTargetContent() {
+        return (index.h("div", { class: "gux-field-content" }, this.renderTargetDisplay()));
+    }
+    render() {
+        return (index.h("gux-popup", { key: '6f566a720410ee762c917adc41daddd5270fc70c', expanded: this.expanded, inline: true }, this.renderTarget(), this.renderPopup()));
+    }
+    static get delegatesFocus() { return true; }
+    get root() { return index.getElement(this); }
+    static get watchers() { return {
+        "value": ["watchValue"]
+    }; }
+};
+__decorate([
+    onClickOutside.OnClickOutside({ triggerEvents: 'mousedown' })
+], GuxDropdown.prototype, "onClickOutside", null);
+__decorate([
+    onMutation.OnMutation({ childList: true, subtree: true })
+], GuxDropdown.prototype, "onMutation", null);
+GuxDropdown.style = GuxInlineDropdownBetaStyle0;
+
+exports.gux_inline_dropdown_beta = GuxDropdown;

package/dist/cjs/gux-label-info-beta.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-e321455d.js');
-const usage = require('./usage-b4888c7f.js');
+const usage = require('./usage-dd8d82d3.js');
 const getSlotTextContent = require('./get-slot-text-content-83cb3c6d.js');
 
 const guxLabelInfoCss = ".gux-label-info{inline-size:fit-content;padding:0;line-height:0;background-color:transparent;border:none;border-radius:var(--gse-ui-formControl-label-tooltipTrigger-borderRadius)}.gux-label-info gux-tooltip{padding-inline-start:0}.gux-label-info gux-icon{vertical-align:bottom;color:var(--gse-ui-formControl-label-tooltipTrigger-color)}";
@@ -36,7 +36,7 @@ const GuxLabelInfo = class {
         return await this.tooltipElement.hideTooltip();
     }
     render() {
-        return (index.h("div", { key: '56d47ce5f2b632072104e8cd5e9367d9abb73097', class: "gux-label-info" }, index.h("gux-screen-reader-beta", { key: 'a720884b1bb912502416c10087878d16885e6431' }, getSlotTextContent.getSlotTextContent(this.root, 'content')), index.h("gux-icon", { key: 'd998e3257efcfe68159cd3bbe1ea5fedac6d56f2', "icon-name": this.getVariantIcon(this.variant), size: "small", decorative: true }), index.h("gux-tooltip-beta", { key: 'bb243c88b2c7ad7217cf88c156f7a7e01617b38c', placement: this.placement, ref: el => (this.tooltipElement = el) }, index.h("slot", { key: 'c15c6233b298c2f03cb0a6a9d4b6c3d62c062a2a', name: "content" }))));
+        return (index.h("div", { key: 'b76ff06369ed70fd75e794f96f74be8e3f8a76b5', class: "gux-label-info" }, index.h("gux-screen-reader-beta", { key: '454ab062488bc37d73fb88b769236ce243cd38f4' }, getSlotTextContent.getSlotTextContent(this.root, 'content')), index.h("gux-icon", { key: '27713594a6c58c34b262f6eb22605bacc63d8fcd', "icon-name": this.getVariantIcon(this.variant), size: "small", decorative: true }), index.h("gux-tooltip-beta", { key: 'bf484212d4525b01e8b448ef2b7ff90d7299a4c3', placement: this.placement, ref: el => (this.tooltipElement = el) }, index.h("slot", { key: 'a3c28acb003422167bc32707208f5539081bbed1', name: "content" }))));
     }
     get root() { return index.getElement(this); }
 };

package/dist/cjs/gux-link-beta.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-e321455d.js');
-const usage = require('./usage-b4888c7f.js');
+const usage = require('./usage-dd8d82d3.js');
 const getClosestElement = require('./get-closest-element-9e41d6b9.js');
 
 const guxLinkCss = ":host{padding-block:var(--gse-ui-links-inLine-padding)}:host ::slotted(a){inline-size:fit-content;font-family:var(--gse-ui-links-inLine-medium-text-fontFamily), var(--gse-semantic-theme-fontFamily-body), sans-serif;font-size:var(--gse-ui-links-inLine-medium-text-fontSize);font-weight:var(--gse-ui-links-inLine-medium-text-fontWeight);line-height:var(--gse-ui-links-inLine-medium-text-lineHeight);color:var(--gse-ui-links-default-foregroundColor) !important;border-radius:var(--gse-ui-links-focusOutline-borderRadius) !important}:host ::slotted(a:hover){color:var(--gse-ui-links-hover-foregroundColor) !important}:host ::slotted(a:active){color:var(--gse-ui-links-active-foregroundColor) !important}:host ::slotted(a:visited){color:var(--gse-ui-links-visited-foregroundColor) !important}:host ::slotted(a:focus-visible){outline:var(--gse-semantic-focusOutline-md-borderWidth) solid var(--gse-semantic-border-focus);outline-offset:var(--gse-semantic-focusOutline-offset)}:host([size=small]) ::slotted(a){font-family:var(--gse-ui-links-inLine-small-text-fontFamily), var(--gse-semantic-theme-fontFamily-body), sans-serif;font-size:var(--gse-ui-links-inLine-small-text-fontSize);font-weight:var(--gse-ui-links-inLine-small-text-fontWeight);line-height:var(--gse-ui-links-inLine-small-text-lineHeight)}:host([standalone]){display:block;padding-block:var(--gse-ui-links-standalone-padding)}:host([standalone]) ::slotted(a){display:flex;gap:var(--gse-ui-links-standalone-gap);align-items:center;inline-size:fit-content;font-family:var(--gse-ui-links-standalone-medium-text-fontFamily), var(--gse-semantic-theme-fontFamily-body), sans-serif;font-size:var(--gse-ui-links-standalone-medium-text-fontSize);font-weight:var(--gse-ui-links-standalone-medium-text-fontWeight);line-height:var(--gse-ui-links-standalone-medium-text-lineHeight);text-decoration:none !important}:host([standalone]) ::slotted(a:hover){font-family:var(--gse-ui-links-standalone-medium-underlinedText-fontFamily), var(--gse-semantic-theme-fontFamily-body), sans-serif;font-size:var(--gse-ui-links-standalone-medium-underlinedText-fontSize);font-weight:var(--gse-ui-links-standalone-medium-underlinedText-fontWeight);line-height:var(--gse-ui-links-standalone-medium-underlinedText-lineHeight);text-decoration:var(--gse-ui-links-standalone-medium-underlinedText-textDecoration) !important}:host([standalone]) ::slotted(a:active){text-decoration:none !important}:host([size=small][standalone]) ::slotted(a){font-family:var(--gse-ui-links-standalone-small-text-fontFamily), var(--gse-semantic-theme-fontFamily-body), sans-serif;font-size:var(--gse-ui-links-standalone-small-text-fontSize);font-weight:var(--gse-ui-links-standalone-small-text-fontWeight);line-height:var(--gse-ui-links-standalone-small-text-lineHeight)}:host([size=small][standalone]) ::slotted(a:hover){font-family:var(--gse-ui-links-standalone-small-underlinedText-fontFamily), var(--gse-semantic-theme-fontFamily-body), sans-serif;font-size:var(--gse-ui-links-standalone-small-underlinedText-fontSize);font-weight:var(--gse-ui-links-standalone-small-underlinedText-fontWeight);line-height:var(--gse-ui-links-standalone-small-underlinedText-lineHeight);text-decoration:var(--gse-ui-links-standalone-small-underlinedText-textDecoration) !important}:host([standalone][class=gux-breadcrumb-link]){padding:0}";
@@ -24,7 +24,7 @@ const GuxLink = class {
         return !!getClosestElement.getClosestElement('.gux-breadcrumb-generation', this.root);
     }
     render() {
-        return (index.h(index.Host, { key: '996dc79252fa45084deaeab08b443c48af84dd61', size: this.size, standalone: this.standalone, class: { 'gux-breadcrumb-link': this.checkBreadcrumbParent() } }, index.h("slot", { key: '1732fcfa0f80733efc1d62cdce523e5b070808f1' })));
+        return (index.h(index.Host, { key: '9bf00be3f4e8906b91364d00f28a6bd5d2fa2f7e', size: this.size, standalone: this.standalone, class: { 'gux-breadcrumb-link': this.checkBreadcrumbParent() } }, index.h("slot", { key: '519c3642d33eeac030274ba7d3516d6a6cc6edff' })));
     }
     get root() { return index.getElement(this); }
 };

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

@@ -12,7 +12,7 @@ const GuxListDivider = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '47874f242f9441edc3ad4139542262c0cd6e0189', role: "presentation" }));
+        return (index.h(index.Host, { key: 'ba070e6345303b885411921d2862a67734bc11b1', role: "presentation" }));
     }
 };
 GuxListDivider.style = GuxListDividerStyle0;

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

@@ -13,7 +13,7 @@ const GuxListItem = class {
         this.disabled = false;
     }
     render() {
-        return (index.h(index.Host, { key: 'b6fa93d98979ed2916d0a2d0268e57634540f6c6', role: "listitem" }, index.h("button", { key: '9f5234aeec44769ea23e46d04a6042e8cd78b3b7', type: "button", tabIndex: -1, disabled: this.disabled }, index.h("slot", { key: '0bce73acc9aba33f936e853e1c3225d9393a8cd3' }))));
+        return (index.h(index.Host, { key: 'f55b7ab9bb6afab9f46c88a8c7c0d0f87d20a6ef', role: "listitem" }, index.h("button", { key: '481088d0eadfecbb2654eb76ad8145127e04f50f', type: "button", tabIndex: -1, disabled: this.disabled }, index.h("slot", { key: 'd2103640154fef9b2320a1d1f20f067e601b3def' }))));
     }
     static get delegatesFocus() { return true; }
     get root() { return index.getElement(this); }

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-e321455d.js');
 const guxList_service = require('./gux-list.service-cf8447cb.js');
-const usage = require('./usage-b4888c7f.js');
+const usage = require('./usage-dd8d82d3.js');
 
 const guxListCss = ":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 GuxListStyle0 = guxListCss;
@@ -57,7 +57,7 @@ const GuxList = class {
         guxList_service.last(this.root, validFocusableItems);
     }
     render() {
-        return (index.h(index.Host, { key: '82adb429fd4ef3143f82756c5bcf8a0abeb5f3c8', tabindex: "-1", role: "list" }, index.h("slot", { key: '9089f367dae30117a5d81271a45795cbf72f71b4' })));
+        return (index.h(index.Host, { key: '4645a18e635b14651b82d84fde98c61099e12a70', tabindex: "-1", role: "list" }, index.h("slot", { key: '22a08227bb9ecad9277e0153a362bbad5cdbd7e6' })));
     }
     get root() { return index.getElement(this); }
 };

package/dist/cjs/gux-listbox-multi.cjs.entry.js

@@ -3,12 +3,13 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-e321455d.js');
-const guxListbox_service = require('./gux-listbox.service-27157877.js');
+const guxListbox_service = require('./gux-listbox.service-700ba659.js');
 const index$1 = require('./index-aa48ea67.js');
 const whenEventIsFrom = require('./when-event-is-from-dd77a8d3.js');
 const simulateNativeEvent = require('./simulate-native-event-e88bf64f.js');
-const usage = require('./usage-b4888c7f.js');
+const usage = require('./usage-dd8d82d3.js');
 const afterNextRender = require('./after-next-render-162425fe.js');
+const onMutation = require('./on-mutation-6d71ec1a.js');
 require('./get-closest-element-9e41d6b9.js');
 
 const add = "Add {name}";
@@ -23,6 +24,16 @@ const translationResources = {
 const guxListboxMultiCss = ":host{box-sizing:border-box;display:block;max-block-size:var(--gse-ui-menu-maxHeight);padding:var(--gse-ui-menu-padding);overflow:hidden auto;outline:none;scrollbar-color:var(--gse-ui-menu-scrollbar-foregroundColor);background:var(--gse-ui-menu-backgroundColor);border:var(--gse-ui-menu-border-width) var(--gse-ui-menu-border-style) var(--gse-ui-menu-border-color);border-radius:var(--gse-ui-menu-borderRadius);box-shadow:var(--gse-ui-menu-boxShadow)}.gux-message-container{display:flex;flex-direction:column;flex-wrap:nowrap;place-content:stretch center;align-items:center}.gux-message-container .gux-no-matches{box-sizing:border-box;block-size:var(--gse-ui-menu-option-height);padding-block:var(--gse-ui-dropdown-gap);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);color:var(--gse-ui-menu-option-label-foregroundColor)}";
 const GuxListboxMultiStyle0 = guxListboxMultiCss;
 
+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 GuxListboxMulti = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
@@ -36,6 +47,11 @@ const GuxListboxMulti = class {
         this.listboxOptions = [];
         this.hasExactMatch = false;
     }
+    onMutation() {
+        afterNextRender.afterNextRender(() => {
+            this.updateOnSlotChange();
+        });
+    }
     onBlur() {
         guxListbox_service.clearActiveOptions(this.root);
     }
@@ -233,6 +249,9 @@ const GuxListboxMulti = class {
         "textInput": ["updateOptionMultiCreateValue"]
     }; }
 };
+__decorate([
+    onMutation.OnMutation({ childList: true, subtree: true })
+], GuxListboxMulti.prototype, "onMutation", null);
 GuxListboxMulti.style = GuxListboxMultiStyle0;
 
 exports.gux_listbox_multi = GuxListboxMulti;

package/dist/cjs/{gux-listbox.service-27157877.js → gux-listbox.service-700ba659.js}

@@ -22,7 +22,12 @@ function isOptionGroup(item) {
     return item.tagName === 'GUX-OPTION-GROUP-BETA';
 }
 function isOption(item) {
-    const optionTypes = ['GUX-OPTION', 'GUX-OPTION-ICON', 'GUX-OPTION-MULTI'];
+    const optionTypes = [
+        'GUX-OPTION',
+        'GUX-OPTION-ICON',
+        'GUX-OPTION-MULTI',
+        'GUX-OPTION-STATUS-BETA'
+    ];
     return optionTypes.includes(item.tagName);
 }
 function getFirstSelectedOption(list) {

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-e321455d.js');
-const usage = require('./usage-b4888c7f.js');
+const usage = require('./usage-dd8d82d3.js');
 
 const guxLoadingMessageCss = ":host {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  container-type: inline-size;\n}\n\n.gux-container {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  max-inline-size: var(--gse-ui-progressAndLoading-loadingState-large-width);\n  color: var(--gse-ui-progressAndLoading-textColor);\n  text-align: center;\n}\n\n@container (width > 400px) {\n  .gux-container .gux-primary-message {\n    margin-block-start: var(--gse-ui-progressAndLoading-large-gap);\n    font-family: var(--gse-ui-progressAndLoading-loadingState-large-header-fontFamily);\n    font-size: var(--gse-ui-progressAndLoading-loadingState-large-header-fontSize);\n    font-weight: var(--gse-ui-progressAndLoading-loadingState-large-header-fontWeight);\n    line-height: var(--gse-ui-progressAndLoading-loadingState-large-header-lineHeight);\n  }\n  .gux-container .gux-additional-guidance {\n    margin-block-start: var(--gse-ui-progressAndLoading-large-gapText);\n    font-family: var(--gse-ui-progressAndLoading-loadingState-large-subheader-fontFamily);\n    font-size: var(--gse-ui-progressAndLoading-loadingState-large-subheader-fontSize);\n    font-weight: var(--gse-ui-progressAndLoading-loadingState-large-subheader-fontWeight);\n    line-height: var(--gse-ui-progressAndLoading-loadingState-large-subheader-lineHeight);\n  }\n}\n@container (width > 200px) and (width <=400px) {\n  .gux-container .gux-primary-message {\n    margin-block-start: var(--gse-ui-progressAndLoading-medium-gap);\n    font-family: var(--gse-ui-progressAndLoading-loadingState-medium-header-fontFamily);\n    font-size: var(--gse-ui-progressAndLoading-loadingState-medium-header-fontSize);\n    font-weight: var(--gse-ui-progressAndLoading-loadingState-medium-header-fontWeight);\n    line-height: var(--gse-ui-progressAndLoading-loadingState-medium-header-lineHeight);\n  }\n  .gux-container .gux-additional-guidance {\n    margin-block-start: var(--gse-ui-progressAndLoading-medium-gapText);\n    font-family: var(--gse-ui-progressAndLoading-loadingState-medium-subheader-fontFamily);\n    font-size: var(--gse-ui-progressAndLoading-loadingState-medium-subheader-fontSize);\n    font-weight: var(--gse-ui-progressAndLoading-loadingState-medium-subheader-fontWeight);\n    line-height: var(--gse-ui-progressAndLoading-loadingState-medium-subheader-lineHeight);\n  }\n}\n@container (width <=200px) {\n  .gux-container .gux-primary-message {\n    margin-block-start: var(--gse-ui-progressAndLoading-small-gap);\n    font-family: var(--gse-ui-progressAndLoading-loadingState-small-header-fontFamily);\n    font-size: var(--gse-ui-progressAndLoading-loadingState-small-header-fontSize);\n    font-weight: var(--gse-ui-progressAndLoading-loadingState-small-header-fontWeight);\n    line-height: var(--gse-ui-progressAndLoading-loadingState-small-header-lineHeight);\n  }\n  .gux-container .gux-additional-guidance {\n    margin-block-start: var(--gse-ui-progressAndLoading-small-gapText);\n    font-family: var(--gse-ui-progressAndLoading-loadingState-small-subheader-fontFamily);\n    font-size: var(--gse-ui-progressAndLoading-loadingState-small-subheader-fontSize);\n    font-weight: var(--gse-ui-progressAndLoading-loadingState-small-subheader-fontWeight);\n    line-height: var(--gse-ui-progressAndLoading-loadingState-small-subheader-lineHeight);\n  }\n}";
 const GuxLoadingMessageStyle0 = guxLoadingMessageCss;
@@ -16,7 +16,7 @@ const GuxLoadingMessage = class {
         usage.trackComponent(this.root);
     }
     render() {
-        return (index.h("div", { key: '70356553906bdd63057fa0e9c5ad6e715b470f81', class: "gux-container", role: "alert", "aria-live": "assertive" }, index.h("div", { key: '281eb24bc1f0853d940a0847728bccd75dca5866', class: "gux-progress" }, index.h("slot", { key: 'a7be4b136d00b4a8c5b2ec81e298d1e95fd4d241', name: "progress" })), index.h("div", { key: '2b48c115e728d70408a3dbff44d5146270f923df', class: "gux-primary-message" }, index.h("slot", { key: '14ba47c353fe1dd986eb21641214d8454aaead96', name: "primary-message" })), index.h("div", { key: '3fb5684b3856f933cac3c1839f5b05e361308f16', class: "gux-additional-guidance" }, index.h("slot", { key: '62c4adfbe16f3aad8d7139a75ba8b68788ecbc0f', name: "additional-guidance" }))));
+        return (index.h("div", { key: '70a1f38dabb0b81325300cf8d9b3ac6992b0eda7', class: "gux-container", role: "alert", "aria-live": "assertive" }, index.h("div", { key: 'd404fed4ae8e9cfc825c0f71c78177a43bd3af9e', class: "gux-progress" }, index.h("slot", { key: 'cdc6631eda3b12ae30d68de764d5ed6144d61a62', name: "progress" })), index.h("div", { key: 'a0afed75afb859cbc001b51024323b17be002e18', class: "gux-primary-message" }, index.h("slot", { key: 'cb0d650c97439f3f17ab25915699a7d3913814e4', name: "primary-message" })), index.h("div", { key: 'cce443b19801997783ead52f3a8eb56ea9423c7c', class: "gux-additional-guidance" }, index.h("slot", { key: '6d7a23a11048e128a8cc7382c2b1d7b36b469819', name: "additional-guidance" }))));
     }
     get root() { return index.getElement(this); }
 };

package/dist/cjs/gux-menu-option.cjs.entry.js

@@ -46,7 +46,7 @@ const GuxMenuOption = class {
         }
     }
     render() {
-        return (index.h("button", { key: '9ce49328409af89cd7a1c6b94ac6007b59456824', type: "button", class: "gux-menu-option-button", "aria-haspopup": "false", tabIndex: -1, ref: el => (this.buttonElement = el) }, index.h("span", { key: '654d588f7bcbf38138ae543c03c3f89cad7102d5', class: "gux-menu-option-button-text" }, index.h("slot", { key: '2494d0b57c69ee80fd24b52cb97abf74fba868c3' }))));
+        return (index.h("button", { key: '4b065ce574fe36728b28d769da26d1d5eb7e7143', type: "button", class: "gux-menu-option-button", "aria-haspopup": "false", tabIndex: -1, ref: el => (this.buttonElement = el) }, index.h("span", { key: '3c8cd5af00d1df520e074b16cde9d787ca43d3d0', class: "gux-menu-option-button-text" }, index.h("slot", { key: 'f1d189749e2f670e42772f5c48b14e99aacf350b' }))));
     }
     static get formAssociated() { return true; }
     get root() { return index.getElement(this); }

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

@@ -12,7 +12,7 @@ const GuxMenu = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '7e4f1568e688d0b8011da0ff05391e306324fecf', role: "menu" }, index.h("slot", { key: 'ee2398acd2b5542994a7d142ecf3d5a06b36b66e' })));
+        return (index.h(index.Host, { key: '19c52f15d965c7aa60ce0e67ed4abd249a272acf', role: "menu" }, index.h("slot", { key: '21552d0d24e41b7030f51e69543246d017c2f21a' })));
     }
 };
 GuxMenu.style = GuxMenuStyle0;

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-e321455d.js');
 const randomHtmlId = require('./random-html-id-71c43d5a.js');
-const usage = require('./usage-b4888c7f.js');
+const usage = require('./usage-dd8d82d3.js');
 
 const guxModalLegacyCss = "::slotted(button:active:enabled){color:var(--gse-ui-links-active-foregroundColor);text-decoration:underline;background:none}slot[name=left-align-buttons]::slotted(:not(button,gux-button)){display:flex;flex-direction:row;gap:var(--gse-ui-modal-buttonBar-gap);align-content:flex-start;align-items:center}:host .gux-modal{position:fixed;inset:0;z-index:var(--gse-semantic-zIndex-modal);display:flex;align-items:center;justify-content:center;color:var(--gse-semantic-foreground-container-highEmphasis);background:var(--gse-ui-modal-shroudColor)}:host .gux-modal .gux-modal-container{position:relative;box-sizing:border-box;display:flex;flex-direction:column;justify-content:space-between;padding:var(--gse-ui-modal-padding) 0;background:var(--gse-ui-modal-backgroundColor);border:1px solid var(--gse-semantic-border-container-edges-default);border-radius:var(--gse-ui-modal-borderRadius);box-shadow:var(--gse-ui-modal-boxShadow)}:host .gux-modal .gux-modal-container.gux-small{width:var(--gse-ui-modal-small-width);max-height:min(368px, 100vh - 2 * 24px)}:host .gux-modal .gux-modal-container.gux-medium{width:var(--gse-ui-modal-medium-width);max-height:min(640px, 100vh - 2 * 24px)}:host .gux-modal .gux-modal-container.gux-large{width:var(--gse-ui-modal-large-width);max-height:min(640px, 100vh - 2 * 24px)}:host .gux-modal .gux-modal-container.gux-dynamic{max-width:calc(100vw - 48px);max-height:calc(100vh - 48px)}:host .gux-modal .gux-modal-container.gux-dynamic .gux-modal-content{max-height:none}:host .gux-modal .gux-modal-container .gux-modal-header{padding:0 var(--gse-ui-modal-padding);margin:0;font-family:var(--gse-ui-modal-heading-fontFamily);font-size:var(--gse-ui-modal-heading-fontSize);font-weight:var(--gse-ui-modal-heading-fontWeight);line-height:var(--gse-ui-modal-heading-fontFamily);color:var(--gse-ui-modal-headerColor);font-family:var(--gse-semantic-heading-xl-bold-fontFamily), var(--gse-semantic-theme-fontFamily-headings), sans-serif;font-size:var(--gse-semantic-heading-xl-bold-fontSize);line-height:var(--gse-semantic-heading-xl-bold-lineHeight);font-weight:var(--gse-semantic-heading-xl-bold-fontWeight)}:host .gux-modal .gux-modal-container .gux-modal-content{max-height:432px;padding:0 var(--gse-ui-modal-padding);margin-top:var(--gse-ui-modal-gap);margin-bottom:var(--gse-ui-modal-gap);overflow-y:auto}:host .gux-modal .gux-modal-container .gux-modal-content.gux-no-buttons{margin-bottom:0}:host .gux-modal .gux-modal-container .gux-button-footer{display:flex;justify-content:space-between;padding:0 var(--gse-ui-modal-padding)}@media (max-width: 416px){:host .gux-modal .gux-modal-container.gux-small,:host .gux-modal .gux-modal-container.gux-medium,:host .gux-modal .gux-modal-container.gux-large{width:100%;height:100%}}";
 const GuxModalLegacyStyle0 = guxModalLegacyCss;
@@ -48,10 +48,10 @@ const GuxModalLegacy = class {
         const hasModalTitleSlot = this.hasModalTitleSlot();
         const hasFooterButtons = this.hasFooterButtons();
         const titleID = randomHtmlId.randomHTMLId();
-        return (index.h("div", { key: '2d18a0bb73e802287f7276f624620318c58cf240', class: "gux-modal", role: "dialog", "aria-modal": "true", "aria-labelledby": hasModalTitleSlot ? titleID : null }, index.h("div", { key: 'f9a6082c0d4472e6cbf484221ed41d287c119683', class: `gux-modal-container gux-${this.size}` }, this.renderModalTrapFocusEl(), hasModalTitleSlot && (index.h("h1", { key: '63ce16a375f2d5d374df0efaf65f026333f054f3', class: "gux-modal-header", id: titleID }, index.h("slot", { key: 'c8c78b89fd771fe39a7bbc513385ee11b7da474e', name: "title" }))), index.h("gux-dismiss-button", { key: '2b6e4165d02dca606879da5a6dd947dbeef8533c', onClick: this.onDismissHandler.bind(this), ref: el => (this.dismissButton = el) }), index.h("div", { key: 'b37f23a11378eb9ce1264bd81b79a0726d6eed10', class: {
+        return (index.h("div", { key: 'b77a732864c86ebcae03af05ae0ef397d4490ed6', class: "gux-modal", role: "dialog", "aria-modal": "true", "aria-labelledby": hasModalTitleSlot ? titleID : null }, index.h("div", { key: '5a24f48ac7da1f40bd7d84084e4c8226efbafcb9', class: `gux-modal-container gux-${this.size}` }, this.renderModalTrapFocusEl(), hasModalTitleSlot && (index.h("h1", { key: '681568d7abf31705c4a7764e1ff22300532b4719', class: "gux-modal-header", id: titleID }, index.h("slot", { key: '15de5d20625efa25956d73ad7a271f480144404a', name: "title" }))), index.h("gux-dismiss-button", { key: 'fe03afc6b74e298513ab2d38b24ede83fb9d8e10', onClick: this.onDismissHandler.bind(this), ref: el => (this.dismissButton = el) }), index.h("div", { key: '6a29fbab6fd5772f2aac70974108361d32b72cd0', class: {
                 'gux-modal-content': true,
                 'gux-no-buttons': !hasFooterButtons
-            } }, index.h("p", { key: '30f622b062ed43b6fef5e7e2bbf68ac56bf98730' }, index.h("slot", { key: 'dc09cef7c9d6ec04ea7a3f896e0e7ddf3ed5cac0', name: "content" }))), hasFooterButtons && (index.h("div", { key: '6f67c283914532196a52369fb1b84cd4e948f462', class: "gux-button-footer" }, index.h("div", { key: '3299634c7f06b9e41ee607d383df3bb1b2e7c93b', class: "gux-left-align-buttons" }, index.h("slot", { key: '3890a90f49ab497b9713f5e20086e5adfdb0cc9c', name: "left-align-buttons" })), index.h("div", { key: '101d214018e9f8da983b074d5aeaa2c81d096912', class: "gux-right-align-buttons" }, index.h("slot", { key: '9e353e0aad1df37cfeee2bc944285308294a44c2', name: "right-align-buttons" })))), this.renderModalTrapFocusEl())));
+            } }, index.h("p", { key: '19a127ab0f7e22919908a54a9b5024973c6a38c7' }, index.h("slot", { key: 'bdd59bfa68e9697e0768c81720f030a803cb0e87', name: "content" }))), hasFooterButtons && (index.h("div", { key: '3e310ebdcadfb4d47d9c97d71f76f12c6faf9fb8', class: "gux-button-footer" }, index.h("div", { key: 'cc76bed3bacad99b0d41cb053f4849accac87f94', class: "gux-left-align-buttons" }, index.h("slot", { key: '6b41add8283be84a314a0106836071494ab393b5', name: "left-align-buttons" })), index.h("div", { key: '18bfaeecfa3e77c2c9fe8759359fd1d51fc048c0', class: "gux-right-align-buttons" }, index.h("slot", { key: '5cbb524146d92efc70cdfd3ce1efa9c6efb8282e', name: "right-align-buttons" })))), this.renderModalTrapFocusEl())));
     }
     // When trap-focus is enabled, focusing this element
     // will immediately redirect focus back to the dismiss button at the top of the modal.

package/dist/cjs/gux-modal-side-panel-beta.cjs.entry.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-e321455d.js');
 const randomHtmlId = require('./random-html-id-71c43d5a.js');
 const hasSlot = require('./has-slot-3edae188.js');
-const usage = require('./usage-b4888c7f.js');
+const usage = require('./usage-dd8d82d3.js');
 
 const guxModalSidePanelCss = "dialog{inset-inline-start:auto;block-size:100%;min-block-size:100%;padding:0;margin:unset;border:none}dialog::backdrop{background:var(--gse-ui-sidePanel-shroudColor);opacity:var(--gse-ui-sidePanel-shroud-opacity)}slot[name=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}";
 const GuxModalSidePanelBetaStyle0 = guxModalSidePanelCss;
@@ -56,7 +56,7 @@ const GuxModalSidePanel = class {
     }
     render() {
         const titleID = randomHtmlId.randomHTMLId();
-        return (index.h("dialog", { key: 'eea0c737e4c43a0d621fee32ff4dad60bd784151', ref: el => (this.dialogElement = el), "aria-labelledby": titleID }, index.h("gux-side-panel-beta", { key: '11156f4073f0db092f01db1175fa3ca7c91d60a8', size: this.size }, index.h("div", { key: 'ea76626936c93f966c7593f3040a165f8a540359', slot: "heading", id: titleID }, index.h("slot", { key: '436910dde97d5b06676c8b16d2f727d371dbf9a5', name: "heading" })), hasSlot.hasSlot(this.root, 'description') && (index.h("div", { key: 'f251f7fff64fbcc70d69d0e9a6ac107cc02b619b', slot: "description" }, index.h("slot", { key: 'f8bf46aa948c66e33a18b5b1cee6243f98085b0c', name: "description" }))), index.h("div", { key: '6951c9381dd820845cb677742ab4901bd43b9504', slot: "content" }, index.h("slot", { key: 'fce1aac4a2799c90cfa2a0d26116f48c13563117', name: "content" })), index.h("div", { key: 'b0497481f705825507f461acaaf8eefc8f8e7959', slot: "footer" }, index.h("slot", { key: 'd7c224fd5279bb3ecf749a0610f71313061a5be1', name: "footer" })))));
+        return (index.h("dialog", { key: '5942094702a7d5bae430507f6e09e9a630253996', ref: el => (this.dialogElement = el), "aria-labelledby": titleID }, index.h("gux-side-panel-beta", { key: 'cb9581b8714a4f91a478dbbfb3059230905ff641', size: this.size }, index.h("div", { key: 'a7febca3dcd0efdcb29cd7406171690dfcd0976b', slot: "heading", id: titleID }, index.h("slot", { key: 'a2a77354ae8689e446e9e5c314f5c9344e8c5bbc', name: "heading" })), hasSlot.hasSlot(this.root, 'description') && (index.h("div", { key: '4f5db854a6b9680ed2b75198785971a2d83491c6', slot: "description" }, index.h("slot", { key: '7df7f2873a7bb805d544efa75998559c30e24ce4', name: "description" }))), index.h("div", { key: 'b8034484bf051d7a701545655b51b599397833cd', slot: "content" }, index.h("slot", { key: 'b98853b74adac243248fbb13939b6270c3dafa62', name: "content" })), index.h("div", { key: '2a15fcdba494b6aacb3faf341ef8239a64bc37c5', slot: "footer" }, index.h("slot", { key: '18e176956b6c3c0df2ee425d21ed004dc91ab5f1', name: "footer" })))));
     }
     get root() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-e321455d.js');
 const randomHtmlId = require('./random-html-id-71c43d5a.js');
-const usage = require('./usage-b4888c7f.js');
+const usage = require('./usage-dd8d82d3.js');
 const hasSlot = require('./has-slot-3edae188.js');
 
 const guxModalCss = "::slotted(button:active:enabled){color:var(--gse-ui-links-active-foregroundColor);text-decoration:underline;background:none}slot[name=start-align-buttons]::slotted(:not(button,gux-button-slot)){display:flex;flex-direction:row;gap:var(--gse-ui-modal-buttonBar-gap);align-content:flex-start;align-items:center}:host dialog{box-sizing:border-box;justify-content:space-between;padding:0;overflow:hidden;background-color:var(--gse-ui-modal-backgroundColor);border:none;border-radius:var(--gse-ui-modal-borderRadius);box-shadow:var(--gse-ui-modal-boxShadow)}:host dialog::backdrop{background:var(--gse-ui-modal-shroudColor)}:host dialog .gux-modal-container{display:flex;flex-direction:column}:host dialog .gux-modal-container.gux-small{inline-size:var(--gse-ui-modal-small-width);max-block-size:min(368px, 100vh - 2 * 24px)}:host dialog .gux-modal-container.gux-medium{inline-size:min(var(--gse-ui-modal-medium-width), 100vw - 48px);max-block-size:min(640px, 100vh - 2 * 24px)}:host dialog .gux-modal-container.gux-large{inline-size:min(var(--gse-ui-modal-large-width), 100vw - 48px);max-block-size:min(640px, 100vh - 2 * 24px)}:host dialog .gux-modal-container.gux-dynamic{max-inline-size:calc(100vw - 48px);max-block-size:calc(100vh - 48px)}:host dialog .gux-modal-container.gux-dynamic .gux-modal-content{max-block-size:none}:host dialog .gux-modal-container .gux-modal-header{padding-block-start:var(--gse-ui-modal-padding);padding-inline:var(--gse-ui-modal-padding);margin:0;font-family:var(--gse-ui-modal-heading-fontFamily);font-size:var(--gse-ui-modal-heading-fontSize);font-weight:var(--gse-ui-modal-heading-fontWeight);line-height:var(--gse-ui-modal-heading-lineHeight);color:var(--gse-ui-modal-headerColor)}:host dialog .gux-modal-container .gux-modal-content{max-block-size:432px;padding-inline:var(--gse-ui-modal-padding);margin-block-start:var(--gse-ui-modal-gap);overflow-y:auto;color:var(--gse-semantic-foreground-container-highEmphasis)}:host dialog .gux-modal-container .gux-button-footer{display:flex;justify-content:space-between;padding-block-end:var(--gse-ui-modal-padding);padding-inline:var(--gse-ui-modal-padding);margin-block-start:var(--gse-ui-modal-gap)}:host dialog .gux-modal-container .gux-button-footer.gux-no-buttons{display:none}:host dialog .gux-modal-container footer{padding-block-end:var(--gse-ui-modal-padding);padding-inline:var(--gse-ui-modal-padding);margin-block-start:var(--gse-ui-modal-gap)}@media (max-width: 416px){:host dialog .gux-modal-container.gux-small,:host dialog .gux-modal-container.gux-medium,:host dialog .gux-modal-container.gux-large{inline-size:100%;block-size:100%}}";
@@ -86,7 +86,7 @@ const GuxModal = class {
     render() {
         const hasModalTitleSlot = this.hasModalTitleSlot();
         const titleID = randomHtmlId.randomHTMLId();
-        return (index.h("dialog", { key: 'bab5ac656e94ff0937fd128c414ed9f1cae8b46c', onClose: this.onCloseHandler.bind(this), ref: el => (this.dialogElement = el), "aria-labelledby": hasModalTitleSlot ? titleID : null }, index.h("div", { key: 'b6080248a5a89f5c9e8cb5110358b65d6ef043d0', class: `gux-modal-container gux-${this.size}` }, index.h("gux-dismiss-button", { key: 'd28c34313e211024a1ad97a4b3be79bcedf52437', onClick: this.onDismissHandler.bind(this) }), hasModalTitleSlot && this.renderTitle(titleID), index.h("div", { key: '8ef94027f690c637df01edcc97639cb28b12f013', class: "gux-modal-content" }, index.h("p", { key: 'c3055a822887fa16f11fa3d38747b116dd26ea90' }, index.h("slot", { key: '951d14406c48af76ba8bc0efd277eabc7a0744b7', name: "content" }))), this.renderFooter())));
+        return (index.h("dialog", { key: '4b61b7e4e7c9d059732c1933f9784dda0e90cdbe', onClose: this.onCloseHandler.bind(this), ref: el => (this.dialogElement = el), "aria-labelledby": hasModalTitleSlot ? titleID : null }, index.h("div", { key: '66a7ac7efa0210ead6e402bf7420380439e03373', class: `gux-modal-container gux-${this.size}` }, index.h("gux-dismiss-button", { key: '46161b5e3471dbe6f9575e4077ab4c6a20d68bfc', onClick: this.onDismissHandler.bind(this) }), hasModalTitleSlot && this.renderTitle(titleID), index.h("div", { key: 'a3598b51fe5ed50f1754e0d1d9b745dac6d8210e', class: "gux-modal-content" }, index.h("p", { key: '4ea4feae5814a7cd369f2588b0604766cb0c0c9e' }, index.h("slot", { key: 'd68607a3d8b03f2ad152b5f978f923b0a2f20ee7', name: "content" }))), this.renderFooter())));
     }
     renderTitle(titleID) {
         return (index.h("h1", { class: "gux-modal-header", id: titleID }, index.h("slot", { name: "title" })));