genesys-spark-components 4.65.2 → 4.67.0

package/dist/cjs/gux-form-field-time-zone-picker.cjs.entry.js

@@ -9,9 +9,9 @@ const onAttributeChange = require('./on-attribute-change-321d434b.js');
 const hasSlot = require('./has-slot-3edae188.js');
 const getSlotTextContent = require('./get-slot-text-content-83cb3c6d.js');
 const guxFormFieldError = require('./gux-form-field-error-4e1d6772.js');
-const guxFormFieldFieldsetContainer = require('./gux-form-field-fieldset-container-51f42694.js');
-const guxFormField_service = require('./gux-form-field.service-f5697509.js');
-const usage = require('./usage-2de21825.js');
+const guxFormFieldFieldsetContainer = require('./gux-form-field-fieldset-container-bf86cba7.js');
+const guxFormField_service = require('./gux-form-field.service-57a00684.js');
+const usage = require('./usage-d382fd1a.js');
 require('./get-closest-element-9e41d6b9.js');
 require('./random-html-id-71c43d5a.js');
 require('./log-error-7b9d4b57.js');
@@ -22,7 +22,7 @@ const componentResources = {
 	required: required
 };
 
-const guxFormFieldTimeZonePickerCss = ".gux-form-field-fieldset-container{display:flex;min-width:0;padding:0;margin:0;border:none}.gux-form-field-fieldset-container.gux-beside{flex-direction:row}.gux-form-field-fieldset-container.gux-above{flex-direction:column}.gux-form-field-error{display:none;flex-direction:row;flex-wrap:nowrap;gap:var(--gse-ui-formControl-helper-gap);place-content:stretch flex-start;align-items:center;padding:var(--gse-ui-formControl-helper-errorPadding);font-family:var(--gse-ui-formControl-helper-helperText-fontFamily);font-size:var(--gse-ui-formControl-helper-helperText-fontSize);line-height:var(--gse-ui-formControl-helper-helperText-lineHeight);color:var(--gse-ui-formControl-helper-errorColor)}.gux-form-field-error.gux-show{display:flex}.gux-form-field-error gux-icon{flex:0 1 auto;align-self:start;order:0;min-width:var(--gse-ui-icon-size-sm);min-height:var(--gse-ui-icon-size-sm);color:var(--gse-ui-formControl-helper-errorColor)}.gux-form-field-error .gux-message{flex:0 1 auto;align-self:auto;order:0}.gux-form-field-legend-label ::slotted(label){white-space:nowrap}.gux-form-field-legend-label.gux-required::after{color:var(--gse-ui-formControl-label-indicator-requiredColor);content:\" *\"}.gux-form-field-legend-label.gux-beside{position:relative;top:var(--gse-ui-formControl-input-top);float:left;width:fit-content;min-width:45px;margin-right:var(--gse-ui-formControl-label-gap)}.gux-form-field-legend-label.gux-above{padding:var(--gse-ui-formControl-label-padding)}.gux-form-field-legend-label.gux-screenreader{position:absolute;top:auto;left:-10000px;width:1px;height:1px;overflow:hidden}.gux-form-field-help{display:none;flex-direction:row;flex-wrap:nowrap;place-content:stretch flex-start;align-items:flex-start;justify-content:flex-start;padding:var(--gse-ui-formControl-helper-paddingSmall);font-family:var(--gse-ui-formControl-helper-helperText-fontFamily);font-size:var(--gse-ui-formControl-helper-helperText-fontSize);line-height:var(--gse-ui-formControl-helper-helperText-lineHeight);color:var(--gse-ui-formControl-helper-defaultColor)}.gux-form-field-help.gux-show{display:flex}.gux-form-field-help .gux-message{flex:0 1 auto;align-self:none;order:0}::slotted(label){font-family:var(--gse-ui-formControl-label-text-fontFamily);font-size:var(--gse-ui-formControl-label-text-fontSize);font-weight:var(--gse-ui-formControl-label-text-fontWeight);line-height:var(--gse-ui-formControl-label-text-lineHeight);color:var(--gse-ui-formControl-label-labelColor)}.gux-input-and-error-container{flex-grow:1}";
+const guxFormFieldTimeZonePickerCss = ".gux-form-field-fieldset-container{display:flex;min-width:0;padding:0;margin:0;border:none}.gux-form-field-fieldset-container.gux-beside{flex-direction:row}.gux-form-field-fieldset-container.gux-above{flex-direction:column}.gux-form-field-error{display:none;flex-direction:row;flex-wrap:nowrap;gap:var(--gse-ui-formControl-helper-gap);place-content:stretch flex-start;align-items:center;padding:var(--gse-ui-formControl-helper-errorPadding);font-family:var(--gse-ui-formControl-helper-helperText-fontFamily);font-size:var(--gse-ui-formControl-helper-helperText-fontSize);line-height:var(--gse-ui-formControl-helper-helperText-lineHeight);color:var(--gse-ui-formControl-helper-errorColor)}.gux-form-field-error.gux-show{display:flex}.gux-form-field-error gux-icon{flex:0 1 auto;align-self:start;order:0;min-width:var(--gse-ui-icon-size-sm);min-height:var(--gse-ui-icon-size-sm);color:var(--gse-ui-formControl-helper-errorColor)}.gux-form-field-error .gux-message{flex:0 1 auto;align-self:auto;order:0}.gux-form-field-help{display:none;flex-direction:row;flex-wrap:nowrap;place-content:stretch flex-start;align-items:flex-start;justify-content:flex-start;padding:var(--gse-ui-formControl-helper-paddingSmall);font-family:var(--gse-ui-formControl-helper-helperText-fontFamily);font-size:var(--gse-ui-formControl-helper-helperText-fontSize);line-height:var(--gse-ui-formControl-helper-helperText-lineHeight);color:var(--gse-ui-formControl-helper-defaultColor)}.gux-form-field-help.gux-show{display:flex}.gux-form-field-help .gux-message{flex:0 1 auto;align-self:none;order:0}.gux-form-field-visual-label{display:inline-flex;flex:1 0 auto}.gux-form-field-visual-label ::slotted(gux-label-info-beta){padding-inline-start:var(--gse-ui-formControl-label-gap)}.gux-form-field-visual-label.gux-required gux-form-field-label-indicator{padding-inline-start:var(--gse-ui-formControl-label-gap)}.gux-form-field-visual-label.gux-beside{position:relative;top:var(--gse-ui-formControl-input-top);width:fit-content;min-width:var(--gse-ui-formControl-input-textfield-minWidth);max-width:fit-content;margin-right:var(--gse-ui-formControl-group-gapItems)}.gux-form-field-visual-label.gux-above{padding:var(--gse-ui-formControl-label-padding)}.gux-form-field-visual-label.gux-screenreader{display:none}.gux-form-field-screenreader-label{position:absolute;top:auto;left:-10000px;width:1px;height:1px;overflow:hidden}::slotted(label){font-family:var(--gse-ui-formControl-label-text-fontFamily);font-size:var(--gse-ui-formControl-label-text-fontSize);font-weight:var(--gse-ui-formControl-label-text-fontWeight);line-height:var(--gse-ui-formControl-label-text-lineHeight);color:var(--gse-ui-formControl-label-labelColor)}.gux-input-and-error-container{flex-grow:1}";
 const GuxFormFieldTimeZonePickerStyle0 = guxFormFieldTimeZonePickerCss;
 
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
@@ -44,6 +44,7 @@ const GuxFormFieldTimeZonePicker = class {
         this.required = undefined;
         this.hasError = false;
         this.hasHelp = false;
+        this.hasLabelInfo = false;
     }
     watchValue(hasError) {
         const timeZonePickerSlot = this.root.querySelector('gux-time-zone-picker-beta');
@@ -52,15 +53,45 @@ const GuxFormFieldTimeZonePicker = class {
         }
     }
     onMutation() {
+        this.labelInfo = this.root.querySelector('[slot=label-info]');
         this.hasError = hasSlot.hasSlot(this.root, 'error');
         this.hasHelp = hasSlot.hasSlot(this.root, 'help');
     }
+    handleKeyup(event) {
+        var _a, _b;
+        switch (event.key) {
+            case 'Tab': {
+                if (this.input.matches(':focus-within')) {
+                    void ((_a = this.labelInfo) === null || _a === void 0 ? void 0 : _a.showTooltip());
+                    this.hideLabelInfoTimeout = setTimeout(() => {
+                        var _a;
+                        void ((_a = this.labelInfo) === null || _a === void 0 ? void 0 : _a.hideTooltip());
+                    }, 6000);
+                }
+                break;
+            }
+            default: {
+                if (this.input.matches(':focus-within')) {
+                    void ((_b = this.labelInfo) === null || _b === void 0 ? void 0 : _b.hideTooltip());
+                    clearTimeout(this.hideLabelInfoTimeout);
+                }
+                break;
+            }
+        }
+    }
+    onFocusout() {
+        var _a;
+        void ((_a = this.labelInfo) === null || _a === void 0 ? void 0 : _a.hideTooltip());
+        clearTimeout(this.hideLabelInfoTimeout);
+    }
     async componentWillLoad() {
         this.getI18nValue = await index$1.buildI18nForComponent(this.root, componentResources);
         this.setInput();
         this.setLabel();
+        this.labelInfo = this.root.querySelector('[slot=label-info]');
         this.hasError = hasSlot.hasSlot(this.root, 'error');
         this.hasHelp = hasSlot.hasSlot(this.root, 'help');
+        this.hasLabelInfo = hasSlot.hasSlot(this.root, 'label-info');
         usage.trackComponent(this.root, { variant: this.variant });
     }
     disconnectedCallback() {
@@ -73,16 +104,17 @@ const GuxFormFieldTimeZonePicker = class {
     }
     render() {
         var _a;
-        return (index.h(guxFormFieldFieldsetContainer.GuxFormFieldFieldsetContainer, { key: '15ffed26b936f5d57f7839012009e29a5612b2ae', labelPosition: this.computedLabelPosition }, index.h(guxFormFieldFieldsetContainer.GuxFormFieldLegendLabel, { key: '721b5ad0a2679aed79890808338c940b30d479c2', position: this.computedLabelPosition, required: this.required, labelText: (_a = this.label) === null || _a === void 0 ? void 0 : _a.textContent }, index.h("slot", { key: '9906b0708f0361f70d92dac5a7da230afd851fa6', name: "label", onSlotchange: () => this.setLabel() }), this.renderScreenReaderText(this.getI18nValue('required'), this.required), this.renderScreenReaderText(getSlotTextContent.getSlotTextContent(this.root, 'error'), this.hasError)), index.h("div", { key: '4e6870799ce3cfc28dc0009ad72486e1574f4bc6', class: "gux-input-and-error-container" }, index.h("div", { key: '2104167a9235bfeb76a5f8b893982c32501214f5', class: {
+        return (index.h(guxFormFieldFieldsetContainer.GuxFormFieldFieldsetContainer, { key: 'cd7a52de8202d9e8e96ed0ae2fb91e3d828e0057', labelPosition: this.computedLabelPosition }, index.h(guxFormFieldFieldsetContainer.GuxFormFieldScreenreaderLabel, { key: 'c1e0a47c46fa60b6b85709f7d37534d569879dc1' }, (_a = this.label) === null || _a === void 0 ? void 0 :
+            _a.textContent, this.renderText(this.getI18nValue('required'), this.required), this.renderText(getSlotTextContent.getSlotTextContent(this.root, 'error'), this.hasError), this.renderText(getSlotTextContent.getSlotTextContent(this.root, 'label-info'), this.hasLabelInfo)), index.h(guxFormFieldFieldsetContainer.GuxFormFieldVisualLabel, { key: '3f689034df08073eca1f35b0e13e712bbc128fa2', position: this.computedLabelPosition, required: this.required }, index.h("slot", { key: 'bd7c6b19318c913dbe2aa81c679d5c8771185447', name: "label", onSlotchange: () => this.setLabel() }), index.h("gux-form-field-label-indicator", { key: 'e851d78b940f5f7acfa3a5204df16a2bc63d5b82', variant: "required", required: this.required }), index.h("slot", { key: '40b42c8fe3f164a20c1908b24dc801005360e732', name: "label-info" })), index.h("slot", { key: '3e566ee0225e91891d53bfc7af5144d92389ba09', name: "label-info" }), index.h("div", { key: '43014eb26b0393aeae60fcf8f35c9a721dea08a9', class: "gux-input-and-error-container" }, index.h("div", { key: 'f4f45913f2a8226ab5760af4ff13be713c3901fc', class: {
                 'gux-input': true,
                 'gux-input-error': this.hasError,
                 'gux-time-zone-picker-container': true,
                 'gux-disabled': this.disabled
-            } }, index.h("slot", { key: 'b486aa93ebb8c1cefe20aa8e387717ba73ac4514' })), index.h(guxFormFieldError.GuxFormFieldError, { key: '994796fc6a3b3e504d57ca44812638934b63e2ac', show: this.hasError }, index.h("slot", { key: '5adf48d91774ab8ab67b2606d05079d8ba186635', name: "error" })), index.h(guxFormFieldError.GuxFormFieldHelp, { key: 'b5bd31ce326bfe81663c08cb341f0117b97cdc83', show: !this.hasError && this.hasHelp }, index.h("slot", { key: 'a57644c2e2771833535ccd85c284442ffcf890a2', name: "help" })))));
+            } }, index.h("slot", { key: '81b73b33dca30f5d6c5f063255a7993e6624e028' })), index.h(guxFormFieldError.GuxFormFieldError, { key: 'd64cd9cb465aade7d6dae6c627c64005d57fb3ee', show: this.hasError }, index.h("slot", { key: '6b65ea0a3f59e25b8a82ddad9bc88ba1284fb0ef', name: "error" })), index.h(guxFormFieldError.GuxFormFieldHelp, { key: '2a511ab56e7abc242a58aadb1de277ce757a0f8e', show: !this.hasError && this.hasHelp }, index.h("slot", { key: '8c7093c30053111c12a4a1127f6feef81b6c646b', name: "help" })))));
     }
-    renderScreenReaderText(text, condition = true) {
+    renderText(text, condition = false) {
         if (condition) {
-            return (index.h("gux-screen-reader-beta", null, text));
+            return ' ' + text;
         }
     }
     get variant() {
@@ -93,16 +125,16 @@ const GuxFormFieldTimeZonePicker = class {
         return `${type}-${labelPositionVariant}`;
     }
     setInput() {
-        this.timeZonePickerElement = this.root.querySelector('gux-time-zone-picker-beta');
-        this.disabled = this.timeZonePickerElement.disabled;
-        this.required = this.timeZonePickerElement.required;
-        this.disabledObserver = onAttributeChange.onDisabledChange(this.timeZonePickerElement, (disabled) => {
+        this.input = this.root.querySelector('gux-time-zone-picker-beta');
+        this.disabled = this.input.disabled;
+        this.required = this.input.required;
+        this.disabledObserver = onAttributeChange.onDisabledChange(this.input, (disabled) => {
             this.disabled = disabled;
         });
-        this.requiredObserver = onAttributeChange.onRequiredChange(this.timeZonePickerElement, (required) => {
+        this.requiredObserver = onAttributeChange.onRequiredChange(this.input, (required) => {
             this.required = required;
         });
-        guxFormField_service.validateFormIds(this.root, this.timeZonePickerElement);
+        guxFormField_service.validateFormIds(this.root, this.input);
     }
     setLabel() {
         this.label = this.root.querySelector('label[slot="label"]');

package/dist/cjs/{gux-form-field.service-f5697509.js → gux-form-field.service-57a00684.js}

@@ -34,7 +34,7 @@ function getComputedLabelPosition(label, labelPosition) {
     }
 }
 function validateFormIds(root, input) {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e, _f;
     if (hasLabelSlot(root)) {
         const label = root.querySelector('label[slot="label"]');
         const inputHasId = Boolean(input.hasAttribute('id'));
@@ -90,6 +90,21 @@ function validateFormIds(root, input) {
             .getAttribute('aria-describedby')) === null || _d === void 0 ? void 0 : _d.split(' ').filter(id => !id.startsWith(`gux-form-field-help`))) || [];
         input.setAttribute('aria-describedby', describedByIds.join(' '));
     }
+    if (hasSlot.hasSlot(root, 'label-info')) {
+        const labelInfo = root.querySelector('[slot="label-info"]');
+        const labelInfoId = randomHtmlId.randomHTMLId('gux-label-info-beta');
+        const describedByIds = ((_e = input
+            .getAttribute('aria-describedby')) === null || _e === void 0 ? void 0 : _e.split(' ').filter(id => !id.startsWith(`gux-label-info-beta`))) || [];
+        labelInfo.setAttribute('id', labelInfoId);
+        describedByIds.push(labelInfoId);
+        describedByIds &&
+            input.setAttribute('aria-describedby', describedByIds.join(' '));
+    }
+    else if (input.getAttribute('aria-describedby')) {
+        const describedByIds = ((_f = input
+            .getAttribute('aria-describedby')) === null || _f === void 0 ? void 0 : _f.split(' ').filter(id => !id.startsWith(`gux-label-info-beta`))) || [];
+        input.setAttribute('aria-describedby', describedByIds.join(' '));
+    }
 }
 function setSlotAriaAttribute(root, attribute, input, slotName) {
     var _a;

package/dist/cjs/gux-form-footer.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-7fb02c8c.js');
-const usage = require('./usage-2de21825.js');
+const usage = require('./usage-d382fd1a.js');
 
 const guxFormFooterCss = ":host ::slotted(footer){display:flex;align-items:center;justify-content:flex-start;padding:var(--gse-semantic-forms-formFooter-verticalPadding) var(--gse-semantic-forms-margin);margin-top:var(--gse-semantic-forms-formBody-paddingBottom);border-top:var(--gse-ui-formFooter-separator-width) var(--gse-ui-formFooter-separator-style) var(--gse-ui-formFooter-separator-color)}:host(.gux-form-footer-page-desktop) ::slotted(footer){gap:var(--gse-ui-formFooter-page-desktop-gap);padding:var(--gse-ui-formFooter-page-desktop-topPadding) var(--gse-ui-formFooter-page-desktop-horizontalPadding) var(--gse-ui-formFooter-page-desktop-bottomPadding) var(--gse-ui-formFooter-page-desktop-horizontalPadding)}:host(.gux-form-footer-page-mobile) ::slotted(footer){flex-direction:column;gap:var(--gse-ui-formFooter-page-mobile-gap);align-items:stretch;justify-content:center;padding:var(--gse-ui-formFooter-page-mobile-topPadding) var(--gse-ui-formFooter-page-mobile-horizontalPadding) var(--gse-ui-formFooter-page-mobile-bottomPadding) var(--gse-ui-formFooter-page-mobile-horizontalPadding)}:host(.gux-form-footer-side-sheet-desktop) ::slotted(footer){gap:var(--gse-ui-formFooter-sideSheet-desktop-gap);padding:var(--gse-ui-formFooter-sideSheet-desktop-topPadding) var(--gse-ui-formFooter-sideSheet-desktop-horizontalPadding) var(--gse-ui-formFooter-sideSheet-desktop-bottomPadding) var(--gse-ui-formFooter-sideSheet-desktop-horizontalPadding)}:host(.gux-form-footer-modal-desktop) ::slotted(footer){gap:var(--gse-ui-formFooter-sideSheet-desktop-gap);justify-content:flex-end;padding:var(--gse-ui-formFooter-modal-desktop-topPadding) var(--gse-ui-formFooter-modal-desktop-horizontalPadding) var(--gse-ui-formFooter-modal-desktop-bottomPadding) var(--gse-ui-formFooter-modal-desktop-horizontalPadding)}";
 const GuxFormFooterStyle0 = guxFormFooterCss;

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

@@ -0,0 +1,40 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-7fb02c8c.js');
+const usage = require('./usage-d382fd1a.js');
+const getSlotTextContent = require('./get-slot-text-content-83cb3c6d.js');
+
+const guxIconTooltipCss = ".gux-icon-tooltip{width:fit-content;padding:0;line-height:0;background-color:transparent;border:none;border-radius:var(--gse-ui-formControl-label-tooltipTrigger-borderRadius)}.gux-icon-tooltip gux-tooltip{padding-inline-start:0}.gux-icon-tooltip gux-icon{color:var(--gse-ui-formControl-label-tooltipTrigger-optionalColor);vertical-align:bottom}";
+const GuxIconTooltipBetaStyle0 = guxIconTooltipCss;
+
+const GuxIconTooltip = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.iconName = undefined;
+        this.placement = 'right';
+    }
+    componentWillLoad() {
+        usage.trackComponent(this.root);
+    }
+    /*
+     * Show tooltip
+     */
+    async showTooltip() {
+        return await this.tooltip.showTooltip();
+    }
+    /*
+     * Hide tooltip
+     */
+    async hideTooltip() {
+        return await this.tooltip.hideTooltip();
+    }
+    render() {
+        return (index.h("div", { key: '3f75501370f8559bb18fc29ca3d9e37aa0a45255', class: "gux-icon-tooltip" }, index.h("gux-screen-reader-beta", { key: '20a8c51282437c0ef07e3016786e8f7c4fa8e6b0' }, index.h("slot", { key: 'da380d60ce08aa86220dbec37865f08d267b5ced', name: "content" })), index.h("gux-icon", { key: '3761341ef5966ef321e8eb8a251e87d76d6fd480', "icon-name": this.iconName, size: "small", decorative: true }), index.h("gux-tooltip-beta", { key: '66cd0158ffe6bc4bb47ff089c68a6bbfd85c06a4', placement: this.placement, ref: el => (this.tooltip = el) }, index.h("div", { key: 'bec88a9f896f9756ded8219a92924c35c94d9fab', slot: "content" }, getSlotTextContent.getSlotTextContent(this.root, 'content')))));
+    }
+    get root() { return index.getElement(this); }
+};
+GuxIconTooltip.style = GuxIconTooltipBetaStyle0;
+
+exports.gux_icon_tooltip_beta = GuxIconTooltip;

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-7fb02c8c.js');
-const usage = require('./usage-2de21825.js');
+const usage = require('./usage-d382fd1a.js');
 const logError = require('./log-error-7b9d4b57.js');
 
 const legacyIconNames = [
@@ -549,7 +549,7 @@ const GuxIcon = class {
         return svgElement.outerHTML;
     }
     render() {
-        return (this.svgHtml && (index.h("div", { key: 'c9f06d9670d3832359a62fa531e82c17e40caf2c', class: "gux-icon-container", innerHTML: this.svgHtml })));
+        return (this.svgHtml && (index.h("div", { key: '4de002dd6d2408b201277c6d3665e1825e899e96', 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-7fb02c8c.js');
 const index$1 = require('./index-a1a48d79.js');
-const usage = require('./usage-2de21825.js');
+const usage = require('./usage-d382fd1a.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: '441d71a8c6cfe5e0c7c1dfe62b70d7a607503d32', class: {
+        return (index.h("div", { key: '3f7a988f3399a0ed980c388d6c3c0f366e1be9f1', class: {
                 'gux-inline-alert': true,
                 [`gux-${this.accent}`]: true
-            } }, index.h("div", { key: 'aec305145d4cc0c58fe7b3762a6cd77fb4551787', class: "gux-message-wrapper" }, index.h("gux-icon", { key: '636814087e9f5d3acb4228cccd1aa28f59ec2966', "icon-name": this.getIcon(this.accent), decorative: true }), index.h("div", { key: '50a2b862dabc781d586b46e8ee8e3a2a5f39c114', class: "gux-sr-only" }, this.i18n(this.accent)), index.h("div", { key: '89980c218894c919fc1577f1d330458b007df78b', class: "gux-content" }, index.h("slot", { key: 'd083d3e2d5cdabf5b19f4b92ff2202dadccc7cd2', name: "content" }, index.h("slot", { key: '76ce00860b2058b3993a759a30c92e40b944db54' }))))));
+            } }, index.h("div", { key: 'ba1716c5cd54ed2c59613e2f3688f12973a047f6', class: "gux-message-wrapper" }, index.h("gux-icon", { key: 'f8e371d3e4fecc7704083ae7467f2b39f4bc53d1', "icon-name": this.getIcon(this.accent), decorative: true }), index.h("div", { key: '5dcddaaa4459358757b1f7d0751521d31e40510a', class: "gux-sr-only" }, this.i18n(this.accent)), index.h("div", { key: '82fb28d33dd951506a1b2fbaf51e36c123364ff5', class: "gux-content" }, index.h("slot", { key: '20d27aee6d02d133f5fdfac4379ae15897f66321', name: "content" }, index.h("slot", { key: '2e24cd792085c73b1cb0d413d0d17024b9bce856' }))))));
     }
     get root() { return index.getElement(this); }
 };

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

@@ -0,0 +1,45 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-7fb02c8c.js');
+const usage = require('./usage-d382fd1a.js');
+const getSlotTextContent = require('./get-slot-text-content-83cb3c6d.js');
+
+const guxLabelInfoCss = ".gux-label-info{width: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{color:var(--gse-ui-formControl-label-tooltipTrigger-optionalColor);vertical-align:bottom}";
+const GuxLabelInfoBetaStyle0 = guxLabelInfoCss;
+
+const GuxLabelInfo = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.variant = 'info';
+        this.placement = 'right';
+    }
+    componentWillLoad() {
+        usage.trackComponent(this.root, { variant: this.variant });
+    }
+    getVariantIcon(variant) {
+        return variant === 'question'
+            ? 'fa/circle-question-regular'
+            : 'fa/circle-info-regular';
+    }
+    /*
+     * Show tooltip
+     */
+    async showTooltip() {
+        return await this.tooltipElement.showTooltip();
+    }
+    /*
+     * Hide tooltip
+     */
+    async hideTooltip() {
+        return await this.tooltipElement.hideTooltip();
+    }
+    render() {
+        return (index.h("div", { key: 'f56fdc67d5b30e7c016c639866ae6d5f40ec471d', class: "gux-label-info" }, index.h("gux-screen-reader-beta", { key: 'ded370a046fb9d44e8f52b33ba01fcc6d4d87eda' }, index.h("slot", { key: '2c6f1f2169b4c2ef33d44775f528bad18b0ee56f', name: "content" })), index.h("gux-icon", { key: 'c9a6804917af87db6b31e176bb959f4069c3cc8b', "icon-name": this.getVariantIcon(this.variant), size: "small", decorative: true }), index.h("gux-tooltip-beta", { key: '02ad7525239d5b8d3f8586e51e09ff1fcc9c4afd', placement: this.placement, ref: el => (this.tooltipElement = el) }, index.h("div", { key: 'e05d2217932b1f9bb1472a19225808a0cabe0b5b', slot: "content" }, getSlotTextContent.getSlotTextContent(this.root, 'content')))));
+    }
+    get root() { return index.getElement(this); }
+};
+GuxLabelInfo.style = GuxLabelInfoBetaStyle0;
+
+exports.gux_label_info_beta = GuxLabelInfo;

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: 'afb8a02891446c21b8f96ae006fb508b8500d323', role: "presentation" }));
+        return (index.h(index.Host, { key: '8beda4b11721cb284a8c56523299a8bc413d0499', role: "presentation" }));
     }
 };
 GuxListDivider.style = GuxListDividerStyle0;

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

@@ -29,7 +29,7 @@ const GuxListItem = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: 'e37174b73e9c2259ddd2e3c72c1b8ed47253855c', role: "listitem" }, index.h("button", { key: 'e0ae42e776f5adb848d0708737a8ad79ee6c06f4', type: "button", tabIndex: -1, disabled: this.disabled }, index.h("slot", { key: 'ab2ecdbde9d9370bf993d3c2922a6d25a3df0263' }))));
+        return (index.h(index.Host, { key: 'c8a719f4050cff60a334b822e2451abfdc8b8b27', role: "listitem" }, index.h("button", { key: '1cd3d6d13ab45e1c63b0961e0964681a584e8109', type: "button", tabIndex: -1, disabled: this.disabled }, index.h("slot", { key: '40b64c6675c898a536fbd38848518a47bc305e27' }))));
     }
     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-7fb02c8c.js');
 const guxList_service = require('./gux-list.service-cf8447cb.js');
-const usage = require('./usage-2de21825.js');
+const usage = require('./usage-d382fd1a.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;
@@ -60,7 +60,7 @@ const GuxList = class {
         return (index.h("span", { tabindex: "-1", "aria-hidden": "true" }));
     }
     render() {
-        return (index.h(index.Host, { key: '99291b87f24f730948663237e24e203ac2ab2c97', role: "list" }, this.renderFocusTarget(), index.h("slot", { key: '0f35ae3b243d6ef003df8c57aa9a92a40f6159f8' })));
+        return (index.h(index.Host, { key: 'b45097132ad7c6a08b47dde9dbb303ab590543ce', role: "list" }, this.renderFocusTarget(), index.h("slot", { key: '4387406713febefac8de4aa79bf700e463f8db1e' })));
     }
     static get delegatesFocus() { return true; }
     get root() { return index.getElement(this); }

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

@@ -7,7 +7,7 @@ const guxListbox_service = require('./gux-listbox.service-a91f8bd2.js');
 const index$1 = require('./index-a1a48d79.js');
 const whenEventIsFrom = require('./when-event-is-from-dd77a8d3.js');
 const simulateNativeEvent = require('./simulate-native-event-e88bf64f.js');
-const usage = require('./usage-2de21825.js');
+const usage = require('./usage-d382fd1a.js');
 const afterNextRender = require('./after-next-render-162425fe.js');
 require('./get-closest-element-9e41d6b9.js');
 

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-7fb02c8c.js');
-const usage = require('./usage-2de21825.js');
+const usage = require('./usage-d382fd1a.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-width: 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-top: 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-top: 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-top: 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-top: 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-top: 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-top: 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: '33277af46593927d8973743ddcbded04e4b4783a', class: "gux-container", role: "alert", "aria-live": "assertive" }, index.h("div", { key: '68bbcba983f3ac24cf94fcc6605b6dc41dbf5b73', class: "gux-progress" }, index.h("slot", { key: 'e3f43dd8df60f685f870c62de67c615276cd52fc', name: "progress" })), index.h("div", { key: '0c8feb14ba005c1a3805bbf71167d7d7ab155ab1', class: "gux-primary-message" }, index.h("slot", { key: '083bbe256926363be8fc00f094ab8f31e048d717', name: "primary-message" })), index.h("div", { key: '2852d9fbc9623912ff43259a499d81a14d29bbef', class: "gux-additional-guidance" }, index.h("slot", { key: '3ba735caeb77b462151e71c1652fdfdc064c2a13', name: "additional-guidance" }))));
+        return (index.h("div", { key: 'c65e377f8b666a8693d3af1a4b7aeead5543c1da', class: "gux-container", role: "alert", "aria-live": "assertive" }, index.h("div", { key: '294c3b9db4d7b6a640bf47fb4ef67ed15a78a3c3', class: "gux-progress" }, index.h("slot", { key: '604778080f30fffece0a877de04102a6ff324d9c', name: "progress" })), index.h("div", { key: '5f5b14263b0ff0d4e194827a311dd214d2b99ded', class: "gux-primary-message" }, index.h("slot", { key: '90f1d2278a6334268e8b7c84e4dd61bdac9a0075', name: "primary-message" })), index.h("div", { key: '631070cdb3d4e4c7daf0d035d540ac6293f6e6e1', class: "gux-additional-guidance" }, index.h("slot", { key: '9ef13d691d3cdf9c50af001c40bb34854d8d60e7', name: "additional-guidance" }))));
     }
     get root() { return index.getElement(this); }
 };

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

@@ -36,7 +36,7 @@ const GuxMenuOption = class {
         }
     }
     render() {
-        return (index.h("button", { key: 'ac8ea23303f5089f7c2d56472dffc63d00457f5f', type: "button", class: "gux-menu-option-button", role: "menuitem", "aria-haspopup": "false", tabIndex: -1, ref: el => (this.buttonElement = el) }, index.h("span", { key: 'c2d1ff7e89e8607517824ee4be06a633fff6b635', class: "gux-menu-option-button-text" }, index.h("slot", { key: 'ca0610c34b2bdcdb674e1424089172acc2a429d4' }))));
+        return (index.h("button", { key: '7eaa2c60009f7124629c80433eb9e06b59c3269e', type: "button", class: "gux-menu-option-button", role: "menuitem", "aria-haspopup": "false", tabIndex: -1, ref: el => (this.buttonElement = el) }, index.h("span", { key: '5558db7a9a4baceed7fe02227f9d566b997b0c14', class: "gux-menu-option-button-text" }, index.h("slot", { key: 'dffb8a6afbf64593926a60f744d538c38d73c412' }))));
     }
     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: '50356084eb65059628148b0070b8b36e32bdbf8e', role: "menu" }, index.h("slot", { key: 'ce1e2974c0a4ee1db57a4a6d8f2f232087fdeea3' })));
+        return (index.h(index.Host, { key: '06abf6932fb8b2be9d9fa983a94c422e199c4241', role: "menu" }, index.h("slot", { key: '50b3ddd9c2447c92f253db00ab3b9e7507cb36e1' })));
     }
 };
 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-7fb02c8c.js');
 const randomHtmlId = require('./random-html-id-71c43d5a.js');
-const usage = require('./usage-2de21825.js');
+const usage = require('./usage-d382fd1a.js');
 
 const guxModalLegacyCss = "::slotted(button:active:enabled){color:var(--gse-ui-link-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:#2e394c;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);background:var(--gse-ui-modal-backgroundColor);border:1px solid #b4bccb;border-radius:var(--gse-ui-modal-borderRadius);box-shadow:var(--gse-ui-modal-boxShadow-x) var(--gse-ui-modal-boxShadow-y) var(--gse-ui-modal-boxShadow-blur) var(--gse-ui-modal-boxShadow-spread) var(--gse-ui-modal-boxShadow-color)}: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{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);letter-spacing:var(--gse-ui-modal-heading-letterSpacing);font-family:var(--gse-core-typography-heading-xl-fontFamily), var(--gse-core-fontFamily-heading), sans-serif;font-size:var(--gse-core-typography-heading-xl-fontSize);line-height:var(--gse-core-typography-heading-xl-lineHeight);font-weight:var(--gse-core-fontWeight-bold)}:host .gux-modal .gux-modal-container .gux-modal-content{max-height:432px;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}@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;
@@ -46,10 +46,10 @@ const GuxModalLegacy = class {
         const hasModalTitleSlot = this.hasModalTitleSlot();
         const hasFooterButtons = this.hasFooterButtons();
         const titleID = randomHtmlId.randomHTMLId();
-        return (index.h("div", { key: '3daad0ffabba648d738f54b040b904fd1ee55627', class: "gux-modal", role: "dialog", "aria-modal": "true", "aria-labelledby": hasModalTitleSlot ? titleID : null }, index.h("div", { key: '6327b850582b671096469837f42bb83bca21c9bc', class: `gux-modal-container gux-${this.size}` }, this.renderModalTrapFocusEl(), hasModalTitleSlot && (index.h("h1", { class: "gux-modal-header", id: titleID }, index.h("slot", { name: "title" }))), index.h("gux-dismiss-button", { key: '733bf40eef00a7a6670232d65d3884f67fde36d4', onClick: this.onDismissHandler.bind(this), ref: el => (this.dismissButton = el) }), index.h("div", { key: 'b1cb4e2e26e5740b386d056e271adf66e1ebf5c1', class: {
+        return (index.h("div", { key: '77fc74b786057ebb6149abfd46a49e928640b9c4', class: "gux-modal", role: "dialog", "aria-modal": "true", "aria-labelledby": hasModalTitleSlot ? titleID : null }, index.h("div", { key: '36b916d9151212710ae60d78b23fcc10268a482a', class: `gux-modal-container gux-${this.size}` }, this.renderModalTrapFocusEl(), hasModalTitleSlot && (index.h("h1", { class: "gux-modal-header", id: titleID }, index.h("slot", { name: "title" }))), index.h("gux-dismiss-button", { key: '0a72154aed65dfc7c712a4edc4fb658119f462ba', onClick: this.onDismissHandler.bind(this), ref: el => (this.dismissButton = el) }), index.h("div", { key: '09252332710631002af73e1e1fdc4dd62446f2d1', class: {
                 'gux-modal-content': true,
                 'gux-no-buttons': !hasFooterButtons
-            } }, index.h("p", { key: '0f392adf40c71849062c9bd59e1d787dcbaffab2' }, index.h("slot", { key: '71b43af6aa19a21e091c886610dda186921195b6', name: "content" }))), hasFooterButtons && (index.h("div", { class: "gux-button-footer" }, index.h("div", { class: "gux-left-align-buttons" }, index.h("slot", { name: "left-align-buttons" })), index.h("div", { class: "gux-right-align-buttons" }, index.h("slot", { name: "right-align-buttons" })))), this.renderModalTrapFocusEl())));
+            } }, index.h("p", { key: '73fa02a2a43dbea545c5f0cbc834e5c467f2d198' }, index.h("slot", { key: '6bd97279379e90a57f4cfddceb4da78df019b31f', name: "content" }))), hasFooterButtons && (index.h("div", { class: "gux-button-footer" }, index.h("div", { class: "gux-left-align-buttons" }, index.h("slot", { name: "left-align-buttons" })), index.h("div", { class: "gux-right-align-buttons" }, index.h("slot", { 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.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-7fb02c8c.js');
 const randomHtmlId = require('./random-html-id-71c43d5a.js');
-const usage = require('./usage-2de21825.js');
+const usage = require('./usage-d382fd1a.js');
 
 const guxModalCss = "::slotted(button:active:enabled){color:var(--gse-ui-link-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;border:none;border-radius:var(--gse-ui-modal-borderRadius);box-shadow:var(--gse-ui-modal-boxShadow-x) var(--gse-ui-modal-boxShadow-y) var(--gse-ui-modal-boxShadow-blur) var(--gse-ui-modal-boxShadow-spread) var(--gse-ui-modal-boxShadow-color)}:host dialog::backdrop{background:rgba(77, 97, 130, 0.8)}:host dialog .gux-modal-container{display:flex;flex-direction:column;padding-top:var(--gse-ui-modal-padding);padding-bottom:var(--gse-ui-modal-padding)}:host dialog .gux-modal-container.gux-small{width:var(--gse-ui-modal-small-width);max-height:min(368px, 100vh - 2 * 24px)}:host dialog .gux-modal-container.gux-medium{width:var(--gse-ui-modal-medium-width);max-height:min(640px, 100vh - 2 * 24px)}:host dialog .gux-modal-container.gux-large{width:var(--gse-ui-modal-large-width);max-height:min(640px, 100vh - 2 * 24px)}:host dialog .gux-modal-container.gux-dynamic{max-width:calc(100vw - 48px);max-height:calc(100vh - 48px)}:host dialog .gux-modal-container.gux-dynamic .gux-modal-content{max-height:none}:host dialog .gux-modal-container .gux-modal-header{padding-right:var(--gse-ui-modal-padding);padding-left: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);letter-spacing:var(--gse-ui-modal-heading-letterSpacing);font-family:var(--gse-core-typography-heading-xl-fontFamily), var(--gse-core-fontFamily-heading), sans-serif;font-size:var(--gse-core-typography-heading-xl-fontSize);line-height:var(--gse-core-typography-heading-xl-lineHeight);font-weight:var(--gse-core-fontWeight-bold)}:host dialog .gux-modal-container .gux-modal-content{max-height:432px;padding-right:var(--gse-ui-modal-padding);padding-left:var(--gse-ui-modal-padding);margin-top:var(--gse-ui-modal-gap);overflow-y:auto}:host dialog .gux-modal-container .gux-button-footer{display:flex;justify-content:space-between;padding-right:var(--gse-ui-modal-padding);padding-left:var(--gse-ui-modal-padding);margin-top:var(--gse-ui-modal-gap)}:host dialog .gux-modal-container .gux-button-footer.gux-no-buttons{display:none}@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{width:100%;height:100%}}";
 const GuxModalStyle0 = guxModalCss;
@@ -69,7 +69,7 @@ const GuxModal = class {
     render() {
         const hasModalTitleSlot = this.hasModalTitleSlot();
         const titleID = randomHtmlId.randomHTMLId();
-        return (index.h("dialog", { key: '66b7450c9c38cc5f603467019298f72b5d14e492', onClose: this.onCloseHandler.bind(this), ref: el => (this.dialogElement = el), "aria-labelledby": hasModalTitleSlot ? titleID : null }, index.h("div", { key: 'e2e631b581883a894de6b346cc0f660bd1325f31', class: `gux-modal-container gux-${this.size}` }, index.h("gux-dismiss-button", { key: 'b37df71b42ac758cd0453d0a40d3c3830eaebf1c', onClick: this.onDismissHandler.bind(this) }), hasModalTitleSlot && this.renderTitle(titleID), index.h("div", { key: 'd35158e367ab833f9aa69ebbb233a936cd917f07', class: "gux-modal-content" }, index.h("p", { key: 'a5a1d2c2323cfd0d4774e342dec073ea813e4dbc' }, index.h("slot", { key: 'd8254893056105c3fd6e5e480d580d3315e4e80d', name: "content" }))), this.renderButtonFooter())));
+        return (index.h("dialog", { key: '24ae7dd6de4f4ba26b35c995b1f42490cf375d21', onClose: this.onCloseHandler.bind(this), ref: el => (this.dialogElement = el), "aria-labelledby": hasModalTitleSlot ? titleID : null }, index.h("div", { key: '38df4baaa7fe2cd14ca1e92765e24d4ee32ba28e', class: `gux-modal-container gux-${this.size}` }, index.h("gux-dismiss-button", { key: '0526938327e68d8f9bb9a271b0abdb08e5aa2fca', onClick: this.onDismissHandler.bind(this) }), hasModalTitleSlot && this.renderTitle(titleID), index.h("div", { key: 'c5d3c90d1d98f298bb0e0493b5966a65eb3adc21', class: "gux-modal-content" }, index.h("p", { key: '92a64eca59ce6708743f92194c55026e50a2ce73' }, index.h("slot", { key: 'e59e65ca1d17a64ff85641018c9ed17171279ca7', name: "content" }))), this.renderButtonFooter())));
     }
     renderTitle(titleID) {
         return (index.h("h1", { class: "gux-modal-header", id: titleID }, index.h("slot", { name: "title" })));

package/dist/cjs/gux-month-calendar.cjs.entry.js

@@ -140,7 +140,7 @@ const GuxMonthCalendar = class {
         return (index.h("span", { onFocus: () => this.doFocusTrap(), tabindex: "0" }));
     }
     render() {
-        return (index.h("div", { key: '7779da6a0844737396b0275636f38d2cea6e49e4', class: "gux-month-calendar" }, this.renderHeader(), this.renderMonths(), this.renderTrapFocusEl()));
+        return (index.h("div", { key: '387aadfc1d099c08f72a36b417dc0db683e38b29', class: "gux-month-calendar" }, this.renderHeader(), this.renderMonths(), this.renderTrapFocusEl()));
     }
     static get delegatesFocus() { return true; }
     get root() { return index.getElement(this); }

package/dist/cjs/gux-month-list_2.cjs.entry.js

@@ -47,7 +47,7 @@ const GuxMonthList = class {
         guxList_service.first(this.root, validFocusableItems);
     }
     render() {
-        return (index.h(index.Host, { key: '98c8984c53ebbc2b5cc5c51420565e4559abff78', role: "list" }, index.h("slot", { key: '5abeb539983936671adbd78b4876aa06e30cfc1b' })));
+        return (index.h(index.Host, { key: 'f583b2aa07f86a63396a76a4b21e77a22a1fbc9d', role: "list" }, index.h("slot", { key: '2d5f9e86f85332b8e1f6107f2fe29dc02e765840' })));
     }
     static get delegatesFocus() { return true; }
     get root() { return index.getElement(this); }
@@ -78,7 +78,7 @@ const GuxMonthListItem = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: 'e9c6b86867d88fa44b26d36a97d4d25d4dc7cf2d', role: "listitem", value: this.value }, index.h("div", { key: '520ca63e02ee81721a24b4ae36c62a5deec3e9d4', class: "gux-container" }, index.h("button", { key: '0dd40d84e2390042a04d3b72d64ee611f7c8efef', class: { 'gux-selected': this.selected }, type: "button", tabIndex: -1, disabled: this.disabled }, index.h("slot", { key: '47a91af6a384fcac1e45e1b5fa65379f596eac1a' })))));
+        return (index.h(index.Host, { key: '20264b60771afe08d5639262ac2d79b75cd105d0', role: "listitem", value: this.value }, index.h("div", { key: '78e37c338c9057276be144db17138fa9e049b0ad', class: "gux-container" }, index.h("button", { key: '45ac3509d341a2b649e92a00e685e3b56a8f0610', class: { 'gux-selected': this.selected }, type: "button", tabIndex: -1, disabled: this.disabled }, index.h("slot", { key: 'c6e7143b18d0ec51d171f99c24e9cd6c87929fc5' })))));
     }
     static get delegatesFocus() { return true; }
     get root() { return index.getElement(this); }

package/dist/cjs/gux-month-picker-beta.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-7fb02c8c.js');
-const usage = require('./usage-2de21825.js');
+const usage = require('./usage-d382fd1a.js');
 const onClickOutside = require('./on-click-outside-6db914c3.js');
 const index$1 = require('./index-a1a48d79.js');
 const useRegionalDates = require('./use-regional-dates-34243a86.js');
@@ -212,7 +212,7 @@ const GuxMonthPicker = class {
         return (index.h("gux-month-calendar", { slot: "popup", ref: (el) => (this.monthCalendarElement = el), onInput: () => this.onMonthCalendarInput(), value: this.value, min: this.min, max: this.max }));
     }
     render() {
-        return (index.h("gux-popup", { key: '0cec690f0cf6289c761678fe22bea1ee16de27d6', expanded: this.expanded, disabled: this.disabled, "exceed-target-width": true }, this.renderTarget(), this.renderPopup()));
+        return (index.h("gux-popup", { key: '8b81b04549dcaee143f159327745e7eab0008f91', expanded: this.expanded, disabled: this.disabled, "exceed-target-width": true }, this.renderTarget(), this.renderPopup()));
     }
     get root() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/gux-notification-toast-legacy.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-7fb02c8c.js');
-const usage = require('./usage-2de21825.js');
+const usage = require('./usage-d382fd1a.js');
 
 const guxNotificationToastCss = ":host{position:relative;display:flex;flex-direction:row;flex-wrap:nowrap;place-content:stretch flex-start;align-items:flex-start;width:294px;padding:16px 8px 16px 16px;margin-bottom:4px;color:#2e394c;background:#f6f7f9;border:1px solid #b4bccb;border-color:#b4bccb;border-radius:4px;box-shadow:0 2px 4px rgba(32, 41, 55, 0.24)}.gux-icon{flex:0 1 auto;align-self:auto;order:0;margin:4px}.gux-icon ::slotted(gux-icon){width:24px !important;height:24px !important}.gux-icon.gux-alert{color:#ea0b0b}.gux-icon.gux-warning{color:#ffae00}.gux-icon.gux-positive{color:#3c8527}.gux-icon.gux-neutral{color:#203b73}.gux-content{display:flex;flex:1 1 auto;flex-direction:column;flex-wrap:nowrap;place-content:stretch flex-start;align-items:flex-start;align-self:auto;order:0;margin:0 12px 0 8px;color:#2e394c}.gux-content .gux-title,.gux-content .gux-message{flex:1 1 auto;align-self:auto;order:0}.gux-content .gux-title{font-family:var(--gse-core-typography-heading-sm-fontFamily), var(--gse-core-fontFamily-heading), sans-serif;font-size:var(--gse-core-typography-heading-sm-fontSize);line-height:var(--gse-core-typography-heading-sm-lineHeight);font-weight:var(--gse-core-fontWeight-bold)}";
 const GuxNotificationToastLegacyStyle0 = guxNotificationToastCss;
@@ -18,7 +18,7 @@ const GuxNotificationToast = class {
         usage.trackComponent(this.root, { variant: this.accent });
     }
     render() {
-        return (index.h(index.Host, { key: 'dd3f82e5f6d3e30f6274a7d8516e14e54bfddd77' }, index.h("div", { key: '45c42bac3cfc491412264e04896ad49d85742674', class: `gux-icon gux-${this.accent}` }, index.h("slot", { key: 'f339419ee8a2b3efea0b5d3606b378411a326bdc', name: "icon" })), index.h("div", { key: 'f60970d8f351033ab5d7187ef3f2d65acdec57db', class: "gux-content" }, index.h("gux-truncate", { key: 'f00c78bed1662a5ae09b974376de008e5ffe867e', class: "gux-title", "max-lines": 1 }, index.h("slot", { key: 'ea6459822ee0e0ac7d2a6a676b29fa26f052d308', name: "title" })), index.h("gux-truncate", { key: '7fe8347095376531e50834066cb4b7ed6e27c70d', class: "gux-message", "max-lines": 2 }, index.h("slot", { key: 'e7d8b71c77714363595d516eb51bec01184cfd22', name: "message" }))), index.h("gux-dismiss-button", { key: 'b2ffdcd5b20f6ccfccedf10b6f992fadb452a3be', onClick: this.onDismissClickHandler.bind(this) })));
+        return (index.h(index.Host, { key: '0bc313de21af1a183397a7dc1d94c3eade04717f' }, index.h("div", { key: '3c905009c80a0252c3da38d517074c4aa1bdd6b8', class: `gux-icon gux-${this.accent}` }, index.h("slot", { key: '66ff04aba2077e88dfdb4556305eef3f40649aed', name: "icon" })), index.h("div", { key: 'be7901838930d5f1f2cee6c0033a3e4979bafa90', class: "gux-content" }, index.h("gux-truncate", { key: '514fedddbf39d5cdce2150dba72f72a8cb4b5f14', class: "gux-title", "max-lines": 1 }, index.h("slot", { key: 'bc154f35ebc48ddbe204324674e9b2410152092d', name: "title" })), index.h("gux-truncate", { key: '384149f5d063e1831896d935c4873fb0f70510f7', class: "gux-message", "max-lines": 2 }, index.h("slot", { key: '726a59aa75ad571363e08aea67b7e49d37032132', name: "message" }))), index.h("gux-dismiss-button", { key: 'a1e4145c7be48dc64ad1b3b35083cc983c3ce02a', onClick: this.onDismissClickHandler.bind(this) })));
     }
     onDismissClickHandler(event) {
         event.stopPropagation();

package/dist/cjs/gux-option-group-beta.cjs.entry.js

@@ -54,7 +54,7 @@ const GuxOptionGroup = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '9c2e3431b77d45760ea329e9d44df20f8eaba888', class: { 'gux-filtered': this.filtered } }, index.h("div", { key: '55f01060f7e5822f4489d71f8738319527cbdb39', class: "gux-option-group" }, index.h("div", { key: 'b74880e7d3c3d331437152a138268d5d145d596c', class: "gux-option-group-label", role: "presentation" }, this.label), index.h("div", { key: '3e239c1c3aa9cdcbd47456a77717e6f3329d069a', role: "group" }, index.h("slot", { key: '3bd3fd24263c5ea7fb185bdc41574c4f8ff3168d' })), this.renderDivider())));
+        return (index.h(index.Host, { key: '1c3da15d9ec8a6787b80c0a80e12442d0cede4a7', class: { 'gux-filtered': this.filtered } }, index.h("div", { key: '706f033518c24c9358748dab4d152a6789698c91', class: "gux-option-group" }, index.h("div", { key: '5d657b64e1ee84453dd9db16fa75d67288055c88', class: "gux-option-group-label", role: "presentation" }, this.label), index.h("div", { key: '05c34d586310fb5b3e9088572cf05e023ac14c1b', role: "group" }, index.h("slot", { key: '18f556017e313057673cd4611f5d8bb07af8feab' })), this.renderDivider())));
     }
     get root() { return index.getElement(this); }
 };

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

@@ -58,14 +58,14 @@ const GuxOptionIcon = class {
         if (this.iconColor !== null && !(this.hovered || this.active)) {
             iconStyle = { color: this.iconColor };
         }
-        return (index.h(index.Host, { key: '59aff8c98c8cfde6ee21ef401431ceea51d9cc2d', role: "option", class: {
+        return (index.h(index.Host, { key: '6f429152e15139e30a50e90ac06ed48f7c555673', role: "option", class: {
                 'gux-active': this.active,
                 'gux-disabled': this.disabled,
                 'gux-filtered': this.filtered,
                 'gux-hovered': this.hovered,
                 'gux-selected': this.selected,
                 'gux-show-subtext': this.hasSubtext
-            }, "aria-selected": this.getAriaSelected(), "aria-disabled": this.disabled.toString() }, index.h("gux-icon", { key: 'c5033a3d25c57635d50231c91a6b2da05cace359', decorative: this.iconSrText == null, "screenreader-text": this.iconSrText, "icon-name": this.iconName, style: iconStyle }), index.h("div", { key: '30d9ed8400a979bd463182b1914fb6a13554fcd3', class: "gux-option-wrapper" }, index.h("gux-truncate", { key: '5faccb1f2880db690afa2f3ceb09a00978553df2', ref: el => (this.truncateElement = el) }, index.h("slot", { key: 'dc7e70a8d7b453c8c88862fd3cf14eb0ec5223f5' })), index.h("slot", { key: '7fa351ac58391774c1bd2103e0b51edc9deb54dd', onSlotchange: () => this.onSubtextChange(), name: "subtext" }))));
+            }, "aria-selected": this.getAriaSelected(), "aria-disabled": this.disabled.toString() }, index.h("gux-icon", { key: '134da8e01132119c5bbc1454d49ab62e7d84acb5', decorative: this.iconSrText == null, "screenreader-text": this.iconSrText, "icon-name": this.iconName, style: iconStyle }), index.h("div", { key: 'e380e11a047a8f972641236036e6567fc1d93c60', class: "gux-option-wrapper" }, index.h("gux-truncate", { key: 'f49a005a360ed05bc81959bfd2a70e111be7aea4', ref: el => (this.truncateElement = el) }, index.h("slot", { key: '447ab05d6c47d252ad1a0c69638fef8c05ef0d56' })), index.h("slot", { key: '5a628c675c0ac1797bdf65488d32f976ec33aaae', onSlotchange: () => this.onSubtextChange(), name: "subtext" }))));
     }
     get root() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -66,13 +66,13 @@ const GuxOptionMulti = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '13617ec6f657e0cfbe107a4a94f5e47e52a6cb19', role: "option", class: {
+        return (index.h(index.Host, { key: '26f74ac330d738ac01119c81505f4a472dee3711', role: "option", class: {
                 'gux-active': this.active,
                 'gux-disabled': this.disabled,
                 'gux-filtered': this.filtered,
                 'gux-selected': this.selected,
                 'gux-show-subtext': this.hasSubtext
-            }, "aria-selected": this.selected.toString(), "aria-disabled": this.disabled.toString() }, this.renderSVGCheckbox(), index.h("div", { key: '7856b48111c3471f4f6c33a387d022e29719240b', class: "gux-option-wrapper" }, index.h("gux-truncate", { key: '818443317377072e83967c4bfc64943421c4bf68', ref: el => (this.truncateElement = el) }, index.h("slot", { key: '048f3087c6e4f0c2544134b899b133563c44045d' })), index.h("slot", { key: 'd17f2f6a5e01d94c2e630bd16d77df93f6764a6b', onSlotchange: () => this.onSubtextChange(), name: "subtext" })), this.renderCustomOptionInstructions()));
+            }, "aria-selected": this.selected.toString(), "aria-disabled": this.disabled.toString() }, this.renderSVGCheckbox(), index.h("div", { key: '91646c7ee2054f8dbabdd0a9df8a655386d2f1d8', class: "gux-option-wrapper" }, index.h("gux-truncate", { key: '4ef49a5f4d0e4b8672f5b806f1b01a0e171c986a', ref: el => (this.truncateElement = el) }, index.h("slot", { key: '43aadbe104fa7f9e6991b276bc3bab20c09931f3' })), index.h("slot", { key: 'cc9a573d680b1979acce992d7a28ddb01d2a933d', onSlotchange: () => this.onSubtextChange(), name: "subtext" })), this.renderCustomOptionInstructions()));
     }
     get root() { return index.getElement(this); }
     static get watchers() { return {