genesys-spark-components 4.109.0 → 4.109.1

package/dist/cjs/{gux-button_4.cjs.entry.js → gux-form-field-number_2.cjs.entry.js}

@@ -3,8 +3,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-2dd05ef3.js');
-const usage = require('./usage-5cabc35e.js');
-const randomHtmlId = require('./random-html-id-71c43d5a.js');
 const index$1 = require('./index-d7208697.js');
 const onInputDisabledStateChange = require('./on-input-disabled-state-change-660a5191.js');
 const onMutation = require('./on-mutation-c0879d47.js');
@@ -15,86 +13,15 @@ const simulateNativeEvent = require('./simulate-native-event-e88bf64f.js');
 const hasSlot = require('./has-slot-3edae188.js');
 const guxFormFieldError = require('./gux-form-field-error-c55f1055.js');
 const guxFormFieldContainer = require('./gux-form-field-container-ad5588d7.js');
+const usage = require('./usage-069a2035.js');
 const focusInputElement = require('./focus-input-element-3a0c1858.js');
 const en = require('./en-66d2b744.js');
 const onClickOutside = require('./on-click-outside-bb55ad5e.js');
 const afterNextRender = require('./after-next-render-162425fe.js');
-const floatingUi_dom_esm = require('./floating-ui.dom.esm-471324c9.js');
-const getSlot = require('./get-slot-676aebf2.js');
-const findElementById = require('./find-element-by-id-fde17c92.js');
 require('./get-closest-element-9e41d6b9.js');
+require('./random-html-id-71c43d5a.js');
 require('./log-error-7b9d4b57.js');
 
-const guxButtonCss = ":host{display:inline-block;pointer-events:none;-webkit-user-select:none;user-select:none}:host(:focus){outline:none}:host(:focus) button{outline:none}::slotted(gux-icon){inline-size:var(--gse-ui-button-icon-size);block-size:var(--gse-ui-button-icon-size)}::slotted(*){padding-inline-start:8px;vertical-align:middle}::slotted(gux-tooltip),::slotted(gux-tooltip-beta){padding-inline-start:0}::slotted(*:first-child){padding:0}button{font-family:var(--gse-ui-button-text-fontFamily);font-size:var(--gse-ui-button-text-fontSize);font-weight:var(--gse-ui-button-text-fontWeight);line-height:var(--gse-ui-button-text-lineHeight);inline-size:100%;min-inline-size:var(--gse-ui-button-iconOnly-width);block-size:var(--gse-ui-button-default-height);padding:var(--gse-ui-button-default-padding);overflow:hidden;color:var(--gse-ui-button-secondary-default-foregroundColor);text-overflow:ellipsis;white-space:nowrap;pointer-events:auto;cursor:pointer;background-color:var(--gse-ui-button-secondary-default-backgroundColor);border:none;border-radius:var(--gse-ui-button-borderRadius)}button.gux-icon-only{display:inline-flex;padding:var(--gse-ui-button-default-paddingIconOnly)}button[disabled]{pointer-events:none;cursor:default;opacity:var(--gse-ui-button-disabled-opacity)}button:hover:enabled{color:var(--gse-ui-button-secondary-hover-foregroundColor);background-color:var(--gse-ui-button-secondary-hover-backgroundColor)}button:active:enabled{color:var(--gse-ui-button-secondary-active-foregroundColor);background-color:var(--gse-ui-button-secondary-active-backgroundColor)}button:focus-visible:enabled{outline:var(--gse-semantic-focusOutline-md-borderWidth) solid var(--gse-semantic-border-focus);outline-offset:var(--gse-semantic-focusOutline-offset);border-radius:var(--gse-semantic-focusOutline-sm-borderRadius)}button.gux-primary{color:var(--gse-ui-button-primary-default-foregroundColor);background-color:var(--gse-ui-button-primary-default-backgroundColor)}button.gux-primary:hover:enabled{color:var(--gse-ui-button-primary-hover-foregroundColor);background-color:var(--gse-ui-button-primary-hover-backgroundColor)}button.gux-primary:active:enabled{color:var(--gse-ui-button-primary-active-foregroundColor);background-color:var(--gse-ui-button-primary-active-backgroundColor)}button.gux-tertiary{color:var(--gse-ui-button-tertiary-default-foregroundColor);background-color:var(--gse-ui-button-tertiary-default-backgroundColor);border-color:var(--gse-ui-button-tertiary-default-border-color);border-style:var(--gse-ui-button-tertiary-default-border-style);border-width:var(--gse-ui-button-tertiary-default-border-width)}button.gux-tertiary.gux-icon-only{padding:calc(var(--gse-ui-button-default-paddingIconOnly) - var(--gse-ui-button-tertiary-default-border-width))}button.gux-tertiary:hover:enabled{color:var(--gse-ui-button-tertiary-hover-foregroundColor);background-color:var(--gse-ui-button-tertiary-hover-backgroundColor)}button.gux-tertiary:active:enabled{color:var(--gse-ui-button-tertiary-active-foregroundColor);background-color:var(--gse-ui-button-tertiary-active-backgroundColor)}button.gux-ghost{color:var(--gse-ui-button-ghost-default-foregroundColor);background-color:var(--gse-ui-button-ghost-default-backgroundColor)}button.gux-ghost:hover:enabled{color:var(--gse-ui-button-ghost-hover-foregroundColor);background-color:var(--gse-ui-button-ghost-hover-backgroundColor)}button.gux-ghost:active:enabled{color:var(--gse-ui-button-ghost-active-foregroundColor);background-color:var(--gse-ui-button-ghost-active-backgroundColor)}button.gux-danger{color:var(--gse-ui-button-danger-default-foregroundColor);background-color:var(--gse-ui-button-danger-default-backgroundColor)}button.gux-danger:hover:enabled{color:var(--gse-ui-button-danger-hover-foregroundColor);background-color:var(--gse-ui-button-danger-hover-backgroundColor)}button.gux-danger:active:enabled{color:var(--gse-ui-button-danger-active-foregroundColor);background-color:var(--gse-ui-button-danger-active-backgroundColor)}button.gux-inline{min-inline-size:initial;block-size:initial;padding:0;color:var(--gse-ui-links-default-foregroundColor);background:none;border:none;border-radius:0}button.gux-inline[disabled]{color:var(--gse-ui-links-disabled-foregroundColor)}button.gux-inline:hover:enabled{color:var(--gse-ui-links-hover-foregroundColor);text-decoration:underline;background:none}button.gux-inline:active:enabled{color:var(--gse-ui-links-active-foregroundColor);text-decoration:underline;background:none}";
-const GuxButtonStyle0 = guxButtonCss;
-
-const GuxButton = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.buttonId = randomHtmlId.randomHTMLId('button');
-        this.type = 'button';
-        this.guxTitle = undefined;
-        this.disabled = false;
-        this.accent = 'secondary';
-        this.iconOnly = undefined;
-    }
-    connectedCallback() {
-        this.slotChanged();
-    }
-    componentWillLoad() {
-        usage.trackComponent(this.root, { variant: this.accent });
-    }
-    render() {
-        return [
-            index.h("button", { key: 'd146c87036f53d21c9936f3c8704f89975acb10d', id: this.buttonId, type: this.type, disabled: this.disabled, class: {
-                    [`gux-${this.accent}`]: true,
-                    'gux-icon-only': this.iconOnly
-                }, "aria-label": this.guxTitle }, index.h("slot", { key: 'ea93ad931802e11cc5186a2b6ecda0e4cec95476', onSlotchange: this.slotChanged.bind(this) })),
-            this.renderTooltip()
-        ];
-    }
-    renderTooltip() {
-        return this.guxTitle
-            ? (index.h("gux-tooltip-beta", { for: this.buttonId, visualOnly: true }, index.h("div", { slot: "content" }, this.guxTitle)))
-            : '';
-    }
-    stopEventIfDisabled(event) {
-        if (this.disabled) {
-            event.stopImmediatePropagation();
-            event.stopPropagation();
-            event.preventDefault();
-        }
-    }
-    makeSlotContentDisableable() {
-        this.root.shadowRoot.addEventListener('click', (event) => this.stopEventIfDisabled(event));
-        Array.from(this.root.children).forEach(slotElement => {
-            slotElement.addEventListener('click', (event) => this.stopEventIfDisabled(event));
-        });
-    }
-    hasIconOnly() {
-        const children = Array.from(this.root.children);
-        if (children.length === 1) {
-            const child = children[0];
-            if (child.tagName === 'GUX-ICON') {
-                return true;
-            }
-        }
-        else if (children.length === 2 &&
-            children[0].tagName === 'GUX-ICON' &&
-            ['GUX-TOOLTIP', 'GUX-TOOLTIP-BETA'].includes(children[1].tagName)) {
-            return true;
-        }
-        return false;
-    }
-    slotChanged() {
-        this.makeSlotContentDisableable();
-        this.iconOnly = this.hasIconOnly();
-    }
-    static get delegatesFocus() { return true; }
-    get root() { return index.getElement(this); }
-};
-GuxButton.style = GuxButtonStyle0;
-
 const increment = "Increment";
 const decrement = "Decrement";
 const componentResources = {
@@ -105,7 +32,7 @@ const componentResources = {
 const guxFormFieldNumberCss = ".gux-form-field-container.gux-beside{display:flex;flex-direction:row}.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;order:0;min-inline-size:var(--gse-ui-icon-small-size);min-block-size:var(--gse-ui-icon-small-size);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-label{display:inline-flex;flex:1 0 auto}.gux-form-field-label ::slotted(gux-label-info-beta){padding-inline-start:var(--gse-ui-formControl-formField-gap)}.gux-form-field-label.gux-beside{position:relative;inset-block-start:var(--gse-ui-formControl-input-top);inline-size:fit-content;min-inline-size:var(--gse-ui-formControl-input-textfield-minWidth);max-inline-size:fit-content;margin-inline-end:var(--gse-ui-formControl-group-gapItems)}.gux-form-field-label.gux-above{padding-block-end:var(--gse-ui-formControl-formField-gap)}.gux-form-field-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-block-start:var(--gse-ui-formControl-formField-gap);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}:host{display:block}::slotted(label){font-family:var(--gse-ui-formControl-label-textBold-fontFamily);font-size:var(--gse-ui-formControl-label-textBold-fontSize);font-weight:var(--gse-ui-formControl-label-textBold-fontWeight);line-height:var(--gse-ui-formControl-label-textBold-lineHeight);color:var(--gse-ui-formControl-label-labelColor)}::slotted(input){flex:1 1 auto;align-self:auto;order:0;inline-size:100%;padding-block-end:0;overflow:hidden;font-size:var(--gse-ui-formControl-input-contentText-fontSize);color:var(--gse-ui-formControl-input-populatedColor);text-align:end;text-overflow:ellipsis;background-color:var(--gse-ui-formControl-input-backgroundColor);border:none;outline:none}::slotted(input)::placeholder{color:var(--gse-ui-formControl-input-placeholderColor);opacity:1}.gux-input-and-error-container{flex-grow:1}.gux-input-and-error-container .gux-input{display:flex;flex-direction:row;flex-wrap:nowrap;align-content:stretch;align-items:center;inline-size:100%}.gux-input-and-error-container .gux-input .gux-input-container{box-sizing:border-box;display:flex;flex:1 1 auto;flex-direction:row;flex-wrap:nowrap;gap:var(--gse-ui-formControl-input-gap);place-content:stretch center;align-items:center;align-self:auto;order:0;inline-size:100%;block-size:var(--gse-ui-formControl-input-textfield-height);padding:var(--gse-ui-formControl-input-padding);font-family:var(--gse-ui-formControl-input-contentText-fontFamily);font-size:var(--gse-ui-formControl-input-contentText-fontSize);line-height:var(--gse-ui-formControl-input-contentText-lineHeight);color:var(--gse-ui-formControl-input-populatedColor);cursor:text;background-color:var(--gse-ui-formControl-input-backgroundColor);background-image:none;border:var(--gse-ui-formControl-input-default-border-width) var(--gse-ui-formControl-input-default-border-style) var(--gse-ui-formControl-input-default-border-color);border-radius:var(--gse-ui-formControl-input-borderRadius)}.gux-input-and-error-container .gux-input .gux-input-container.gux-disabled{cursor:default;opacity:var(--gse-ui-formControl-input-disabled-opacity)}.gux-input-and-error-container .gux-input .gux-input-container:focus-within{border:var(--gse-ui-formControl-input-active-border-width) var(--gse-ui-formControl-input-active-border-style) var(--gse-ui-formControl-input-active-border-color);border-radius:var(--gse-ui-formControl-focusRing-borderRadius);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-input-and-error-container .gux-input.gux-input-error .gux-input-container{border-color:var(--gse-ui-formControl-input-error-border-color)}.gux-step-buttons-container{flex:0 1 14px;align-self:auto;order:0;margin-inline-start:var(--gse-ui-formControl-spinButton-gap)}.gux-step-buttons-container .gux-step-button{display:flex;flex:0 1 auto;align-items:center;align-self:auto;justify-content:center;order:0;padding:0;color:var(--gse-ui-formControl-input-inputIcon-defaultColor);background:transparent;border:var(--gse-ui-formControl-input-default-border-width) var(--gse-ui-formControl-input-default-border-style) transparent}.gux-step-buttons-container .gux-step-button:not(:disabled):focus-visible,.gux-step-buttons-container .gux-step-button:not(:disabled):hover{cursor:pointer;border:var(--gse-ui-formControl-input-hover-border-width) var(--gse-ui-formControl-input-hover-border-style) var(--gse-ui-formControl-input-hover-border-color)}.gux-step-buttons-container .gux-step-button gux-icon{flex:0 0 auto;inline-size:14px;block-size:14px}";
 const GuxFormFieldNumberStyle0 = guxFormFieldNumberCss;
 
-var __decorate$2 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$1 = (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);
@@ -186,14 +113,14 @@ const GuxFormFieldNumber = class {
     }
     render() {
         const showClearButton = this.clearable && this.hasContent && !this.disabled;
-        return (index.h(guxFormFieldContainer.GuxFormFieldContainer, { key: '49ed3e1102b18b0afd80fa7f2dbdbe650183d7b5', labelPosition: this.computedLabelPosition }, index.h(guxFormFieldContainer.GuxFormFieldLabel, { key: '49b896abc67f8daf23f39cfdb538bd0bfd24f5a3', required: this.required, position: this.computedLabelPosition }, index.h("slot", { key: '07b6bb0098735cdb93670bdd4239f70c87a4c403', name: "label", onSlotchange: () => this.setLabel() }), index.h("gux-form-field-label-indicator", { key: '2846f8347b8bfb90982fb7c8a286f9dc28db6db8', variant: this.indicatorMark, required: this.required }), index.h("slot", { key: '5ff63629608ee4c64b5c93b8ea2f591ed992403b', name: "label-info" })), index.h("div", { key: 'a63425de0f0116dc85790e8377e45605273ce18b', class: "gux-input-and-error-container" }, index.h("div", { key: 'd67c396e117112b44e028d189ba6b6a45e2142b1', class: {
+        return (index.h(guxFormFieldContainer.GuxFormFieldContainer, { key: '2dca8aa2abb0497f5090a714028ba6d1fa630088', labelPosition: this.computedLabelPosition }, index.h(guxFormFieldContainer.GuxFormFieldLabel, { key: 'f4c17fcc0ae2f19f45dd55fa6c097d78a476f4ff', required: this.required, position: this.computedLabelPosition }, index.h("slot", { key: 'e6dc3fabe7a640a0093f22dd2733cc857732a7b6', name: "label", onSlotchange: () => this.setLabel() }), index.h("gux-form-field-label-indicator", { key: '069e3a4d7e94cea66162a16b970afcc958dd8402', variant: this.indicatorMark, required: this.required }), index.h("slot", { key: '9d88d18f741c6138aa307cb1f84501d52a2773dc', name: "label-info" })), index.h("div", { key: '75ba061e437806f3f2aa2fbf4eaad335108de757', class: "gux-input-and-error-container" }, index.h("div", { key: '17ef4d8e144a27d7d354cf5145714e3f62d9e58f', class: {
                 'gux-input': true,
                 'gux-input-error': this.hasError
-            }, part: "input-section" }, index.h("div", { key: '7ecb0947167b2c51672754448517d757238047d6', class: {
+            }, part: "input-section" }, index.h("div", { key: '92962c0ffc9a051adaa57644230831827151091b', class: {
                 'gux-input-container': true,
                 'gux-disabled': this.disabled,
                 'gux-clear': showClearButton
-            }, onClick: () => focusInputElement.focusInputElement(this.input) }, index.h("slot", { key: '56ca0045044f88985e4505ce00627fadbe816291', name: "input", onSlotchange: () => this.setInput() }), showClearButton && (index.h("gux-form-field-input-clear-button", { key: '2ada074e5e27e541104a746d2b1e55c2dfee850b', onClick: () => guxFormField_service.clearInput(this.input) }))), this.renderStepButtons(this.input, this.getI18nValue, this.disabled)), index.h(guxFormFieldError.GuxFormFieldError, { key: '8e3b2c7c8f93b4a2e9eaaa57872876541b938f75', show: this.hasError }, index.h("slot", { key: 'fe815006fe7e240c834d021e3c0058fe7bcb2688', name: "error" })), index.h(guxFormFieldError.GuxFormFieldHelp, { key: '0a648c9e9a1b238439f414ec7977f7e2b307f382', show: !this.hasError && this.hasHelp }, index.h("slot", { key: '7c39e14dd4d8715b99fa8f07bf44157e24f61e04', name: "help" })))));
+            }, onClick: () => focusInputElement.focusInputElement(this.input) }, index.h("slot", { key: 'c241cc42c48cd5d34158f6fa1c2192ca3c70ba17', name: "input", onSlotchange: () => this.setInput() }), showClearButton && (index.h("gux-form-field-input-clear-button", { key: '8cfab4c1ec5250e9f48428d4fd1a1edb6a2e10d6', onClick: () => guxFormField_service.clearInput(this.input) }))), this.renderStepButtons(this.input, this.getI18nValue, this.disabled)), index.h(guxFormFieldError.GuxFormFieldError, { key: '90a29f49e15ec2bdee95b677b1a8b68059ac8de1', show: this.hasError }, index.h("slot", { key: '8f59274c1bb04ec269b4b697661c3a2a8eb0cc25', name: "error" })), index.h(guxFormFieldError.GuxFormFieldHelp, { key: 'a29417b5568b8291bb90c789a1cd8f1e2e6779f7', show: !this.hasError && this.hasHelp }, index.h("slot", { key: 'd885ba710032f61db188caa0c0a5692eb8283b47', name: "help" })))));
     }
     get variant() {
         const labelPositionVariant = this.labelPosition
@@ -251,7 +178,7 @@ const GuxFormFieldNumber = class {
     static get delegatesFocus() { return true; }
     get root() { return index.getElement(this); }
 };
-__decorate$2([
+__decorate$1([
     onMutation.OnMutation({ childList: true, subtree: true })
 ], GuxFormFieldNumber.prototype, "onMutation", null);
 GuxFormFieldNumber.style = GuxFormFieldNumberStyle0;
@@ -259,7 +186,7 @@ GuxFormFieldNumber.style = GuxFormFieldNumberStyle0;
 const guxPaginationEllipsisButtonCss = "gux-button gux-icon{inline-size:var(--gse-ui-icon-small-size);block-size:var(--gse-ui-icon-small-size);padding-block-start:4px}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{margin:0;-webkit-appearance:none}input[type=number]{-moz-appearance:textfield}";
 const GuxPaginationEllipsisButtonStyle0 = guxPaginationEllipsisButtonCss;
 
-var __decorate$1 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+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);
@@ -354,10 +281,10 @@ const GuxPaginationEllipsisButton = class {
     }
     render() {
         return [
-            index.h("gux-button", { key: '79a4948c8592bd3c1c5e3b5e14e95f7e12b37000', accent: "ghost", id: "popover-target", type: "button", disabled: this.disabled, ref: el => (this.ellipsisButton = el), onClick: () => this.toggle(), "aria-haspopup": "true", "aria-expanded": this.isOpen.toString() }, index.h("gux-icon", { key: 'ffc5926c1509895c262f6d76c42b3c769c5c5ab7', screenreaderText: this.i18n('goToPage'), "icon-name": "fa/ellipsis-regular" })),
-            index.h("gux-tooltip", { key: '6a88654b0c0c301eac58834528cf2d6e7d0b9e21', for: "popover-target" }, index.h("div", { key: '9e7b0d62ade18fd7763f4ac724c50c3a9254187e', slot: "content" }, this.i18n('goToPage'))),
-            index.h("gux-popover", { key: '01cb8d263f49370950e9aa8f5e3e450a440771cf', "is-open": this.isOpen, for: "popover-target" }, index.h("span", { key: '02b0525f7e9e680d423e0ab7fe6a8052ce960cea', slot: "title" }, this.i18n('goToPage')), index.h("gux-form-field-number", { key: 'dcdc71ea7b41e4d7e784219827f8a0fe8402fd8c' }, index.h("input", { key: 'df5141479f7734a6b7722c94717a7f356fffd3ff', slot: "input", type: "number", ref: el => (this.inputElement = el), min: "1", max: this.totalPages, value: "1", onKeyDown: evt => ['e', 'E', '+', '-', '.'].includes(evt.key) &&
-                    evt.preventDefault() }), index.h("label", { key: '6e69eafad13b5dcce4b051557a0e1a8d4c149e68', slot: "label" })))
+            index.h("gux-button", { key: '2f7a6977176ccccb3ae443026ffcb4891513ce0e', accent: "ghost", id: "popover-target", type: "button", disabled: this.disabled, ref: el => (this.ellipsisButton = el), onClick: () => this.toggle(), "aria-haspopup": "true", "aria-expanded": this.isOpen.toString() }, index.h("gux-icon", { key: '218ccaac850d7e32b8626b700d8f93b0e1c45644', screenreaderText: this.i18n('goToPage'), "icon-name": "fa/ellipsis-regular" })),
+            index.h("gux-tooltip", { key: '59b211c13d14acb3983475c52002bf8a8bb57eec', for: "popover-target" }, index.h("div", { key: '62fea561a307ca2273fc9c744037de013c976e04', slot: "content" }, this.i18n('goToPage'))),
+            index.h("gux-popover", { key: '4472db40293ff8b2c674c6d6cd55edf19a1e16d7', "is-open": this.isOpen, for: "popover-target" }, index.h("span", { key: 'caff6871edd709751a2b65b39688409f75f83dd7', slot: "title" }, this.i18n('goToPage')), index.h("gux-form-field-number", { key: '4a4914a788331cfcf967e2dc20a5985ba87a01b8' }, index.h("input", { key: '0debcb668428fe389ef0c436b23748509460067f', slot: "input", type: "number", ref: el => (this.inputElement = el), min: "1", max: this.totalPages, value: "1", onKeyDown: evt => ['e', 'E', '+', '-', '.'].includes(evt.key) &&
+                    evt.preventDefault() }), index.h("label", { key: '56d4b2617175ed5691e9ac15e142a943d7a2574d', slot: "label" })))
         ];
     }
     get root() { return index.getElement(this); }
@@ -365,197 +292,10 @@ const GuxPaginationEllipsisButton = class {
         "disabled": ["watchIsDisabled"]
     }; }
 };
-__decorate$1([
+__decorate([
     onClickOutside.OnClickOutside({ triggerEvents: 'mousedown' })
 ], GuxPaginationEllipsisButton.prototype, "onClickOutside", null);
 GuxPaginationEllipsisButton.style = GuxPaginationEllipsisButtonStyle0;
 
-function ThrottleMethod(duration) {
-    let wait = false;
-    let timeoutRef = null;
-    return (_target, _propertyKey, descriptor) => {
-        const original = descriptor.value;
-        descriptor.value = function (...args) {
-            if (!wait) {
-                original.apply(this, args);
-                wait = true;
-                clearTimeout(timeoutRef);
-                timeoutRef = setTimeout(() => {
-                    wait = false;
-                }, duration);
-            }
-        };
-    };
-}
-
-const guxPopoverCss = ".gux-popover-wrapper{position:absolute;inset-block-start:0;inset-inline-start:0;z-index:var(--gse-semantic-zIndex-popover);display:inline-block;min-inline-size:280px;padding:var(--gse-ui-popover-gap);background-color:var(--gse-ui-popover-backgroundColor);border-radius:var(--gse-ui-popover-borderRadius);box-shadow:var(--gse-ui-popover-boxShadow-offsetX) var(--gse-ui-popover-boxShadow-offsetY) var(--gse-ui-popover-boxShadow-blur) var(--gse-ui-popover-boxShadow-spread) var(--gse-ui-popover-boxShadow-color)}.gux-popover-wrapper.gux-hidden{display:none}.gux-popover-wrapper .gux-arrow{position:absolute;inline-size:var(--gse-ui-popover-anchor-width);block-size:var(--gse-ui-popover-anchor-height);padding-block-end:4px;overflow:hidden}.gux-popover-wrapper .gux-arrow-caret{inline-size:0;block-size:0;filter:drop-shadow(var(--gse-ui-popover-boxShadow-offsetX) var(--gse-ui-popover-boxShadow-offsetY) calc(var(--gse-ui-popover-boxShadow-blur) / 2) var(--gse-ui-popover-boxShadow-color));border-block-start:calc(var(--gse-ui-popover-anchor-width) / 2) solid var(--gse-ui-popover-backgroundColor);border-inline-start:calc(var(--gse-ui-popover-anchor-width) / 2) solid transparent;border-inline-end:calc(var(--gse-ui-popover-anchor-width) / 2) solid transparent}.gux-popover-wrapper .gux-popover-header{display:flex;flex-direction:row;place-content:center space-between;align-items:center;padding-block-end:var(--gse-ui-popover-gap);font-family:var(--gse-ui-popover-title-text-fontFamily);font-size:var(--gse-ui-popover-title-text-fontSize);font-weight:var(--gse-ui-popover-title-text-fontWeight);line-height:var(--gse-ui-popover-title-text-lineHeight);color:var(--gse-ui-popover-headerColor)}.gux-popover-wrapper gux-dismiss-button{float:inline-end}";
-const GuxPopoverStyle0 = guxPopoverCss;
-
-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 GuxPopover = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.guxdismiss = index.createEvent(this, "guxdismiss", 7);
-        this.for = undefined;
-        this.position = 'bottom';
-        this.displayDismissButton = undefined;
-        this.closeOnClickOutside = false;
-        this.isOpen = false;
-    }
-    onKeyDown(event) {
-        switch (event.key) {
-            case 'Escape':
-                this.dismiss();
-                break;
-        }
-    }
-    onFocusout(event) {
-        if (!this.closeOnClickOutside && this.displayDismissButton) {
-            return;
-        }
-        const focusIsOutsidePopover = event.relatedTarget && !this.root.contains(event.relatedTarget);
-        if (focusIsOutsidePopover) {
-            this.dismiss();
-        }
-    }
-    checkForClickOutside(event) {
-        const clickPath = event.composedPath();
-        const forElement = findElementById.findElementById(this.root, this.for);
-        const clickedForElement = clickPath.includes(forElement);
-        if ((this.closeOnClickOutside || !this.displayDismissButton) &&
-            this.isOpen &&
-            !clickedForElement) {
-            this.dismiss();
-        }
-    }
-    get titleSlot() {
-        return getSlot.getSlot(this.root, 'title');
-    }
-    runUpdatePosition() {
-        if (this.root.isConnected) {
-            this.cleanupUpdatePosition = floatingUi_dom_esm.autoUpdate(findElementById.findElementById(this.root, this.for), this.popupElement, () => this.updatePosition(), {
-                ancestorScroll: true,
-                elementResize: true,
-                animationFrame: true,
-                ancestorResize: true
-            });
-        }
-        else {
-            this.disconnectedCallback();
-        }
-    }
-    updatePosition() {
-        const forElement = findElementById.findElementById(this.root, this.for);
-        if (this.popupElement && forElement) {
-            void floatingUi_dom_esm.computePosition(forElement, this.popupElement, {
-                placement: this.position,
-                middleware: [
-                    floatingUi_dom_esm.offset(7),
-                    floatingUi_dom_esm.flip(),
-                    floatingUi_dom_esm.shift(),
-                    floatingUi_dom_esm.arrow({
-                        element: this.arrowElement,
-                        padding: 16
-                    })
-                ]
-            }).then(({ x, y, middlewareData, placement }) => {
-                Object.assign(this.popupElement.style, {
-                    left: `${x}px`,
-                    top: `${y}px`
-                });
-                const side = placement.split('-')[0];
-                const staticSide = {
-                    top: 'bottom',
-                    right: 'left',
-                    bottom: 'top',
-                    left: 'right'
-                }[side];
-                const arrowRotation = {
-                    top: 0,
-                    right: 90,
-                    bottom: 180,
-                    left: -90
-                }[side];
-                // This is 13 because this makes the arrow look aligned when horizontal
-                // or 15 if vertical due to extra padding needed to show the shadow.
-                const arrowLen = side === 'left' || side === 'right' ? 15 : 13;
-                if (middlewareData.arrow) {
-                    let x = middlewareData.arrow.x;
-                    const y = middlewareData.arrow.y;
-                    if (side === 'left' || side === 'right') {
-                        x = x + 4;
-                    }
-                    this.popupElement.setAttribute('data-placement', placement);
-                    Object.assign(this.arrowElement.style, {
-                        left: x != null ? `${x}px` : '',
-                        top: y != null ? `${y}px` : '',
-                        right: '',
-                        bottom: '',
-                        [staticSide]: `${-arrowLen}px`,
-                        transform: `rotate(${arrowRotation}deg)`
-                    });
-                }
-            });
-        }
-    }
-    dismiss() {
-        const dismissEvent = this.guxdismiss.emit();
-        if (!dismissEvent.defaultPrevented) {
-            this.isOpen = false;
-        }
-    }
-    connectedCallback() {
-        usage.trackComponent(this.root, { variant: this.position });
-    }
-    componentDidLoad() {
-        if (this.isOpen) {
-            this.runUpdatePosition();
-        }
-    }
-    componentDidUpdate() {
-        if (this.isOpen) {
-            this.runUpdatePosition();
-        }
-        else if (this.cleanupUpdatePosition) {
-            this.cleanupUpdatePosition();
-        }
-    }
-    disconnectedCallback() {
-        if (this.cleanupUpdatePosition) {
-            this.cleanupUpdatePosition();
-        }
-    }
-    renderDismissButton() {
-        if (this.displayDismissButton) {
-            return (index.h("gux-dismiss-button", { onClick: this.dismiss.bind(this), position: "inherit" }));
-        }
-    }
-    render() {
-        return (index.h("div", { key: '7f9fccc133020af77cf5c074773c89a4b2f20c37', ref: (el) => (this.popupElement = el), class: {
-                'gux-hidden': !this.isOpen,
-                'gux-popover-wrapper': true
-            }, "data-placement": true }, index.h("div", { key: '6a74b4ba58750b8cda24aea578976f131bf41b13', ref: (el) => (this.arrowElement = el), class: "gux-arrow" }, index.h("div", { key: 'e7dd29cb3df94fa9fc8db003aa0bec5383a68aff', class: "gux-arrow-caret" })), index.h("div", { key: 'c2406a2c1dbc68ce7b23bb8d951ff389ec0640ee', class: { 'gux-popover-header': Boolean(this.titleSlot) } }, index.h("slot", { key: '247552e8de2da3b30d616bad7931ea97f8856887', name: "title" }), this.renderDismissButton()), index.h("div", { key: '62e5ae2b86329d8d9ac78a04673a5378db57f4b4', class: "gux-popover-content" }, index.h("slot", { key: 'd292319ee8b6f4f8965e64cb2cf0211bfa65dcdf' }))));
-    }
-    get root() { return index.getElement(this); }
-};
-__decorate([
-    onClickOutside.OnClickOutside({ triggerEvents: 'mousedown' })
-], GuxPopover.prototype, "checkForClickOutside", null);
-__decorate([
-    ThrottleMethod(100)
-], GuxPopover.prototype, "dismiss", null);
-GuxPopover.style = GuxPopoverStyle0;
-
-exports.gux_button = GuxButton;
 exports.gux_form_field_number = GuxFormFieldNumber;
 exports.gux_pagination_ellipsis_button = GuxPaginationEllipsisButton;
-exports.gux_popover = GuxPopover;

package/dist/cjs/gux-form-field-phone.cjs.entry.js

@@ -6,7 +6,7 @@ const index = require('./index-2dd05ef3.js');
 const index$1 = require('./index-d7208697.js');
 const onMutation = require('./on-mutation-c0879d47.js');
 const onAttributeChange = require('./on-attribute-change-321d434b.js');
-const usage = require('./usage-5cabc35e.js');
+const usage = require('./usage-069a2035.js');
 const guxFormFieldError = require('./gux-form-field-error-c55f1055.js');
 const guxFormFieldFieldsetContainer = require('./gux-form-field-fieldset-container-48d63d04.js');
 const hasSlot = require('./has-slot-3edae188.js');
@@ -102,14 +102,14 @@ const GuxFormFieldPhone = class {
     }
     render() {
         var _a;
-        return (index.h(guxFormFieldFieldsetContainer.GuxFormFieldFieldsetContainer, { key: '33fe0fc8c809b55349fa51aa7d80a285a2788edd', labelPosition: this.computedLabelPosition }, index.h(guxFormFieldFieldsetContainer.GuxFormFieldScreenreaderLabel, { key: 'eb56dd16bd5820f58481ac506e9aa5001ec470f7' }, (_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: '074c11f16f051c6f00198989c73e265fbc76e28f', position: this.computedLabelPosition, required: this.required }, index.h("slot", { key: 'e8fc15414ce78419b8f5556b25575799eab4501c', name: "label", onSlotchange: () => this.setLabel() }), index.h("gux-form-field-label-indicator", { key: '075f6120f5985fcbac369b15e6d4d3890547022b', variant: this.indicatorMark, required: this.required }), index.h("slot", { key: 'c08bbf1c0247f0cec8f13d7dbfc8a1f189c17c58', name: "label-info" })), index.h("div", { key: '4f73ec6078aa6cf796b9c9d8fcbe23bed8a39c72', class: "gux-input-and-error-container" }, index.h("div", { key: 'f9b6da0b9a11f8af494846f09b0d3640e1919112', class: {
+        return (index.h(guxFormFieldFieldsetContainer.GuxFormFieldFieldsetContainer, { key: 'bf0f99c7fb1988270aac46885f05056acfb5ace3', labelPosition: this.computedLabelPosition }, index.h(guxFormFieldFieldsetContainer.GuxFormFieldScreenreaderLabel, { key: '3a2ed1f594e510a0893a1b6cf2875f569e3b214b' }, (_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: 'a418ea46f52c128efae5b8052ffd7263758f4b74', position: this.computedLabelPosition, required: this.required }, index.h("slot", { key: '746b564401c7f95082efa8a57c021a9b5274fd91', name: "label", onSlotchange: () => this.setLabel() }), index.h("gux-form-field-label-indicator", { key: '419a8cf07f877224feaeee135eb8b5f875f08673', variant: this.indicatorMark, required: this.required }), index.h("slot", { key: '0c875513bb322b176e338009e0b0f822f6de01af', name: "label-info" })), index.h("div", { key: 'edc690502abbbaef94ed27c7286bebb0e0854146', class: "gux-input-and-error-container" }, index.h("div", { key: '823636811f866f2f3dbdc5dda1f7c06ce87c8a73', class: {
                 'gux-input': true,
                 'gux-input-error': this.hasError
-            } }, index.h("div", { key: '9ed48adf358623e4175e30e32b00c59be6df02bd', class: {
+            } }, index.h("div", { key: '7ff6839b8e9fa38a57cd1f8bc6cdfeda7118f9ed', class: {
                 'gux-input-container': true,
                 'gux-disabled': this.disabled
-            } }, index.h("slot", { key: '9d648cc3ae68f9cb2f7ab93e1fc829cbe083ad06' }))), index.h(guxFormFieldError.GuxFormFieldError, { key: '22296a416c1da45479a209608c1f48ccbd529244', show: this.hasError }, index.h("slot", { key: '5deb14f2838dcaaca697cfd3aa091bc263c8128e', name: "error" })), index.h(guxFormFieldError.GuxFormFieldHelp, { key: '47c4d90105b9b46c8a856173b41a61b9d00ef19f', show: !this.hasError && this.hasHelp }, index.h("slot", { key: '039f3beaa6aebf7415c1d16be0a633ac406f4b17', name: "help" })))));
+            } }, index.h("slot", { key: 'b6eda7d48027904a51e6837b38ecdc96b37275a0' }))), index.h(guxFormFieldError.GuxFormFieldError, { key: 'a9dbe2bc290803a4d984b099fc1e3831094bf09d', show: this.hasError }, index.h("slot", { key: '9eea544b091d3a8e8d0bffd43ee4015f0dd6ea12', name: "error" })), index.h(guxFormFieldError.GuxFormFieldHelp, { key: 'c1d8557481352e50a0c925e6b544c6d2a119fb72', show: !this.hasError && this.hasHelp }, index.h("slot", { key: '50dd1b9097809d6e98eee330b1ced249cf06e48b', name: "help" })))));
     }
     renderText(text, condition = false) {
         if (condition) {

package/dist/cjs/gux-form-field-radio-group-beta.cjs.entry.js

@@ -9,7 +9,7 @@ const index$1 = require('./index-d7208697.js');
 const guxFormFieldError = require('./gux-form-field-error-c55f1055.js');
 const guxFormFieldFieldsetContainer = require('./gux-form-field-fieldset-container-48d63d04.js');
 const getSlotTextContent = require('./get-slot-text-content-83cb3c6d.js');
-const usage = require('./usage-5cabc35e.js');
+const usage = require('./usage-069a2035.js');
 require('./get-closest-element-9e41d6b9.js');
 
 const required = "Required";
@@ -113,8 +113,8 @@ const GuxFormFieldRadioGroupBeta = class {
     }
     render() {
         var _a;
-        return (index.h(guxFormFieldFieldsetContainer.GuxFormFieldFieldsetContainer, { key: '901bbf005bca412c1a435e535583155725ed5296', labelPosition: "above", disabled: this.disabled }, index.h(guxFormFieldFieldsetContainer.GuxFormFieldScreenreaderLabel, { key: '1d6bf900cc576bfee106b073afe09f0a97022d87' }, (_a = this.label) === null || _a === void 0 ? void 0 :
-            _a.textContent, this.renderText(this.getI18nValue('required'), this.required), this.renderText(getSlotTextContent.getSlotTextContent(this.root, 'group-error'), this.hasGroupError), this.renderText(getSlotTextContent.getSlotTextContent(this.root, 'group-help'), this.hasGroupHelp), this.renderText(getSlotTextContent.getSlotTextContent(this.root, 'group-label-info'), this.hasGroupLabelInfo)), index.h(guxFormFieldFieldsetContainer.GuxFormFieldVisualLabel, { key: '21ee4f534fff08e51dae8030faa8a1d78226f2fb', position: "above", required: this.required }, index.h("slot", { key: '0afa63140278375301a0de0263055195008662f9', name: "group-label", onSlotchange: () => this.setLabel() }), index.h("gux-form-field-label-indicator", { key: 'dd422f39ad5e082ab184350265f37c678cf06b68', variant: this.indicatorMark, required: this.required }), index.h("slot", { key: '3b2fe0b59bdd8591a08ea076280aa57a28c10b3a', name: "group-label-info" })), index.h("slot", { key: 'ee6540334797f3c1982f5af98e445c5b0a7c4531' }), index.h(guxFormFieldError.GuxFormFieldError, { key: '0158fec3eee96f854076c57bb20b9f893697d6e7', show: this.hasGroupError }, index.h("slot", { key: '8c2a42b6fc072fe4d16d25d2f4f79c9f7dffed45', name: "group-error" })), index.h(guxFormFieldError.GuxFormFieldHelp, { key: '9a40da4a5449db9784e3fd656b9611c31c9f7fea', show: !this.hasGroupError && this.hasGroupHelp }, index.h("slot", { key: '7c2cbec4c5e3bc907eb3782f2af38a24589cab29', name: "group-help" }))));
+        return (index.h(guxFormFieldFieldsetContainer.GuxFormFieldFieldsetContainer, { key: '742135aff98e36413891ad18dbb15c090675f23f', labelPosition: "above", disabled: this.disabled }, index.h(guxFormFieldFieldsetContainer.GuxFormFieldScreenreaderLabel, { key: '30635ac86b7863480fef9cf7f37a606dc1b4f4fc' }, (_a = this.label) === null || _a === void 0 ? void 0 :
+            _a.textContent, this.renderText(this.getI18nValue('required'), this.required), this.renderText(getSlotTextContent.getSlotTextContent(this.root, 'group-error'), this.hasGroupError), this.renderText(getSlotTextContent.getSlotTextContent(this.root, 'group-help'), this.hasGroupHelp), this.renderText(getSlotTextContent.getSlotTextContent(this.root, 'group-label-info'), this.hasGroupLabelInfo)), index.h(guxFormFieldFieldsetContainer.GuxFormFieldVisualLabel, { key: '7b9c845ae16bc9a1beee4da9ec7523df00e8755d', position: "above", required: this.required }, index.h("slot", { key: '85ebd77341d7da78299ced98dd3e061c4f88d134', name: "group-label", onSlotchange: () => this.setLabel() }), index.h("gux-form-field-label-indicator", { key: '2de99230cc040d17c733834a4280525815247e91', variant: this.indicatorMark, required: this.required }), index.h("slot", { key: '74631a79c1cc64610db5bce90acc46212f68cd9e', name: "group-label-info" })), index.h("slot", { key: '9e106a4bc8ae0081e95e5f6b5115687f49bb49a3' }), index.h(guxFormFieldError.GuxFormFieldError, { key: '4acdd6b77538b5e750a293b68f32ab56a043dcea', show: this.hasGroupError }, index.h("slot", { key: '33be5090281cd1c4651bab821d6945a94682340f', name: "group-error" })), index.h(guxFormFieldError.GuxFormFieldHelp, { key: '4f1ee1bfb25b698b3ec8cd0429dbec324d8eb703', show: !this.hasGroupError && this.hasGroupHelp }, index.h("slot", { key: 'f92d62095d17d51a4e7f383750e78112a679fa75', name: "group-help" }))));
     }
     setLabel() {
         this.label = this.root.querySelector('label[slot="group-label"]');

package/dist/cjs/gux-form-field-radio.cjs.entry.js

@@ -9,7 +9,7 @@ const preventBrowserValidationStyling = require('./prevent-browser-validation-st
 const hasSlot = require('./has-slot-3edae188.js');
 const guxFormFieldError = require('./gux-form-field-error-c55f1055.js');
 const guxFormField_service = require('./gux-form-field.service-42c9f800.js');
-const usage = require('./usage-5cabc35e.js');
+const usage = require('./usage-069a2035.js');
 require('./random-html-id-71c43d5a.js');
 require('./log-error-7b9d4b57.js');
 require('./simulate-native-event-e88bf64f.js');
@@ -52,10 +52,10 @@ const GuxFormFieldRadio = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '49ef8bdb9e7268f6ed72d138596e30d2942df483', class: {
+        return (index.h(index.Host, { key: '5829a29503922aa840a6c86d25c4634a45c6738e', class: {
                 'gux-input-error': this.hasError || this.hasGroupError,
                 'gux-disabled': this.disabled
-            } }, index.h("div", { key: '6a26a205570eb6ff11e77f81d01d44261d21e072', class: "gux-form-field-container", "aria-disabled": this.disabled ? 'true' : 'false' }, index.h("div", { key: 'b77bc44125eaa97141430489ac2eb184ba7df709', class: "gux-input-label" }, index.h("div", { key: 'd4186aef6e7b7a0ebfe645344d5a745e16cc9614', class: "gux-input" }, index.h("slot", { key: '2fc89568cc4659ff4838799e5278baa273085d2a', name: "input", onSlotchange: () => this.setInput() })), index.h("div", { key: '61ff648660ef9c6c37ebdea28bbb35d7f6c14d0e', class: "gux-label" }, index.h("slot", { key: '6ff9554ebb06ff5c11b68b784b24a834dc7837e5', name: "label" }))), index.h("div", { key: 'ac51eb19dfe44b8069ce7e29edb9e97073d8c75f', class: "error-and-help-text" }, index.h(guxFormFieldError.GuxFormFieldError, { key: '6d27501b269cad64a8c4f1fb78545a5c6e512254', show: this.hasError }, index.h("slot", { key: 'bada69224c02868f8541a2895218fb392cc46d59', name: "error" })), index.h(guxFormFieldError.GuxFormFieldHelp, { key: 'a3d3221e309a5c891ac5beb1c50ed3f8cddfbb86', show: !this.hasError && this.hasHelp }, index.h("slot", { key: '7794ca8ee2cc4b82d761c37e2868ff0a776864cd', name: "help" }))))));
+            } }, index.h("div", { key: '392320cdc23d1d7b7b3e29a6b387047c1b0d7da1', class: "gux-form-field-container", "aria-disabled": this.disabled ? 'true' : 'false' }, index.h("div", { key: '7b6c4325955bfee9bbe80e0355a34925d22d0385', class: "gux-input-label" }, index.h("div", { key: 'eddd63e27d578211eedc5f19a99aafe46d46cdbc', class: "gux-input" }, index.h("slot", { key: '3e15b66aa91b62bbd2df984620aeb8e0e978c16e', name: "input", onSlotchange: () => this.setInput() })), index.h("div", { key: 'eeaf32695daf81da1e9dd080763e022ceb2ba314', class: "gux-label" }, index.h("slot", { key: '9b40dd274ca11305fafe9c41192a97017d9e53a3', name: "label" }))), index.h("div", { key: '0e4236ae2b2bb6b398ef237b0551773a9715c988', class: "error-and-help-text" }, index.h(guxFormFieldError.GuxFormFieldError, { key: '0623cb317fb2057b41d591970801aaff99956b04', show: this.hasError }, index.h("slot", { key: '4a5999da8179383db795fc71b2a17cd840c5c450', name: "error" })), index.h(guxFormFieldError.GuxFormFieldHelp, { key: 'a15a295f957e2e3be96f6b98f4146c8d5f5c88d0', show: !this.hasError && this.hasHelp }, index.h("slot", { key: '8dee0e2237865934da855624f51ff811f4b310cc', name: "help" }))))));
     }
     setInput() {
         this.input = guxFormField_service.getSlottedInput(this.root, 'input[type="radio"][slot="input"]');

package/dist/cjs/gux-form-field-range.cjs.entry.js

@@ -11,7 +11,7 @@ const hasSlot = require('./has-slot-3edae188.js');
 const guxFormFieldError = require('./gux-form-field-error-c55f1055.js');
 const guxFormFieldContainer = require('./gux-form-field-container-ad5588d7.js');
 const guxFormField_service = require('./gux-form-field.service-42c9f800.js');
-const usage = require('./usage-5cabc35e.js');
+const usage = require('./usage-069a2035.js');
 const onResize = require('./on-resize-62f7838d.js');
 require('./random-html-id-71c43d5a.js');
 require('./log-error-7b9d4b57.js');
@@ -119,9 +119,9 @@ const GuxFormField = class {
         clearInterval(this.valueWatcherId);
     }
     render() {
-        return (index.h(index.Host, { key: '10dc378e629a8849da1a892210e7958a8470ce43', class: {
+        return (index.h(index.Host, { key: 'ef7f5f4e578f3300a3d50455cf13502b18db197a', class: {
                 'gux-active': this.active
-            } }, index.h(guxFormFieldContainer.GuxFormFieldContainer, { key: '9d46076ea44be2971e14250654b2f40cd0df0677', labelPosition: this.computedLabelPosition }, index.h(guxFormFieldContainer.GuxFormFieldLabel, { key: 'c55006d31378d6a1643f039f2cfa4bd55311bea9', required: this.required, position: this.computedLabelPosition }, index.h("slot", { key: 'e48fdca477e8261992afc9430d0f4f005d0746b7', name: "label", onSlotchange: () => this.setLabel() }), index.h("gux-form-field-label-indicator", { key: 'a75ef1657cd9618109dcfebc0130feb99897c17a', variant: this.indicatorMark, required: this.required }), index.h("slot", { key: '43cfbcbfa92a4a05b2686ddc214e1807b7cd721a', name: "label-info" })), index.h("div", { key: 'd43b71f759820db1bf395db7c22e304c5c8d268e', class: "gux-input-and-error-container" }, this.renderRangeInput(), index.h(guxFormFieldError.GuxFormFieldError, { key: '2c250ef63c41033ab24925ab4d24b2492c9d2927', show: this.hasError }, index.h("slot", { key: '4ecfa3f9770e5f483d3676f32b631f814025d35d', name: "error" })), index.h(guxFormFieldError.GuxFormFieldHelp, { key: 'acfe671b39a300314b9fd8d139ab028a20495b29', show: !this.hasError && this.hasHelp }, index.h("slot", { key: '2b220e6169e6ec487705a6047137f2c7536be970', name: "help" }))))));
+            } }, index.h(guxFormFieldContainer.GuxFormFieldContainer, { key: '6d1a08b443afa21aad87a4e3bf08ee099a700cc8', labelPosition: this.computedLabelPosition }, index.h(guxFormFieldContainer.GuxFormFieldLabel, { key: '21c729f31a0c0a6d5daf0f2d19af7f51d219d98f', required: this.required, position: this.computedLabelPosition }, index.h("slot", { key: 'b9ff63bfd18deb65229ac12a595368d91b9fb5a4', name: "label", onSlotchange: () => this.setLabel() }), index.h("gux-form-field-label-indicator", { key: 'bf68bcd9cf4f2e140abd4dba68ba945700a0ec51', variant: this.indicatorMark, required: this.required }), index.h("slot", { key: 'f7c2314979b81e97f36e6ac8e1a5ce7d206eee3a', name: "label-info" })), index.h("div", { key: 'ec4abb76b38879bc5332b9d008ac2084d5aed76f', class: "gux-input-and-error-container" }, this.renderRangeInput(), index.h(guxFormFieldError.GuxFormFieldError, { key: 'e90fc6505581c5fc53bd38e765c83253ca16c414', show: this.hasError }, index.h("slot", { key: '021df5dbbe4892d500ff706dca44e2c0c9aa7923', name: "error" })), index.h(guxFormFieldError.GuxFormFieldHelp, { key: '5a428db334f7a07fef43e7c9d11838d269664c80', show: !this.hasError && this.hasHelp }, index.h("slot", { key: 'fe23748ec9fe1efc05275c6af81a8b03be147e6c', name: "help" }))))));
     }
     get variant() {
         return this.labelPosition ? this.labelPosition.toLowerCase() : 'none';

package/dist/cjs/gux-form-field-search.cjs.entry.js

@@ -11,7 +11,7 @@ const hasSlot = require('./has-slot-3edae188.js');
 const guxFormFieldError = require('./gux-form-field-error-c55f1055.js');
 const guxFormFieldContainer = require('./gux-form-field-container-ad5588d7.js');
 const guxFormField_service = require('./gux-form-field.service-42c9f800.js');
-const usage = require('./usage-5cabc35e.js');
+const usage = require('./usage-069a2035.js');
 const focusInputElement = require('./focus-input-element-3a0c1858.js');
 require('./random-html-id-71c43d5a.js');
 require('./log-error-7b9d4b57.js');
@@ -99,13 +99,13 @@ const GuxFormFieldSearch = class {
         }
     }
     render() {
-        return (index.h(guxFormFieldContainer.GuxFormFieldContainer, { key: '4a9ef410dae67b430409d3ecd7143f779d5d6d76', labelPosition: this.computedLabelPosition }, index.h(guxFormFieldContainer.GuxFormFieldLabel, { key: '23f4292311d8d4d09cc9abd8ea410c564189feb6', required: this.required, position: this.computedLabelPosition }, index.h("slot", { key: '0a8392e9de5c4c107219340946c5d986b14a0e79', name: "label", onSlotchange: () => this.setLabel() }), index.h("gux-form-field-label-indicator", { key: 'a5485bcf989d6cee36f56f38df6e3779097b3c9b', variant: this.indicatorMark, required: this.required }), index.h("slot", { key: '3bd66abfbaabd6154769732b10ec2a0234e168f6', name: "label-info" })), index.h("div", { key: '0824538640f07a080d7feabb9bd380d08fee6fec', class: "gux-input-and-error-container" }, index.h("div", { key: '7b56736d1214a53dd52d9f71bf5557a1e212144d', class: {
+        return (index.h(guxFormFieldContainer.GuxFormFieldContainer, { key: '7bec4add10bbe1198348e515d7f94010d5ff696c', labelPosition: this.computedLabelPosition }, index.h(guxFormFieldContainer.GuxFormFieldLabel, { key: 'ecf79409780b4ace9146efa04f23d7766110d1c8', required: this.required, position: this.computedLabelPosition }, index.h("slot", { key: '71a8801fc3f2a5f153888118cdabb167f7ed1331', name: "label", onSlotchange: () => this.setLabel() }), index.h("gux-form-field-label-indicator", { key: '5e4e040cebc2ed53e4afbe21ad63a30d8905cd71', variant: this.indicatorMark, required: this.required }), index.h("slot", { key: 'fb1f57f3a8a828c7335acd368b14e8fe38e4759f', name: "label-info" })), index.h("div", { key: '93b1c819fdae53a41f1f282654fd3121d323fdd0', class: "gux-input-and-error-container" }, index.h("div", { key: 'cf4f4dc142ab086fcbc299621934984d8eec2161', class: {
                 'gux-input': true,
                 'gux-input-error': this.hasError
-            } }, index.h("div", { key: 'a34519a64680d176ea13b2084b394f807021ca44', class: {
+            } }, index.h("div", { key: 'ec2d3615952e770ab4315f05bcd81453ad74dccc', class: {
                 'gux-input-container': true,
                 'gux-disabled': this.disabled
-            }, onClick: () => focusInputElement.focusInputElement(this.input) }, index.h("gux-icon", { key: '6609df36d361839721fb45ab6252664697587cef', "icon-name": "fa/magnifying-glass-regular", decorative: true }), index.h("slot", { key: '99167c46f703671d1d9985100e39e8d9844a28ce', name: "input" }), this.clearable && this.hasContent && !this.disabled && (index.h("gux-form-field-input-clear-button", { key: '9f31a3d43b814c8d150d2a0b7a6bd829e953d163', onClick: () => guxFormField_service.clearInput(this.input) })))), index.h(guxFormFieldError.GuxFormFieldError, { key: 'adf9c25f7529abbd1138ba954905ea6365c13f1b', show: this.hasError }, index.h("slot", { key: '88533ba9ae394f9d3d61213d8d1856abd370850b', name: "error" })), index.h(guxFormFieldError.GuxFormFieldHelp, { key: '775b434f3eb50601ab4379ba3fae1fa28cbc3f08', show: !this.hasError && this.hasHelp }, index.h("slot", { key: '79df589a292ea5da8a717fecd029085e445625ff', name: "help" })))));
+            }, onClick: () => focusInputElement.focusInputElement(this.input) }, index.h("gux-icon", { key: 'b557d0aa914ce07cbc79ddec522d3f1c97106bc9', "icon-name": "fa/magnifying-glass-regular", decorative: true }), index.h("slot", { key: '6a9717b43d217991f1d8049a1af8eee7faa9ea4a', name: "input" }), this.clearable && this.hasContent && !this.disabled && (index.h("gux-form-field-input-clear-button", { key: '99a100ed958a7a88fbc48d2cb2be1cbd3fc9fd94', onClick: () => guxFormField_service.clearInput(this.input) })))), index.h(guxFormFieldError.GuxFormFieldError, { key: '5a22ccf008831c793ef6e3bd88c48cda54783bbc', show: this.hasError }, index.h("slot", { key: '8b5d65d5da1744243d9e3bfb07131b6aae948dae', name: "error" })), index.h(guxFormFieldError.GuxFormFieldHelp, { key: '48515debb5e75c62988b3cd8e85ac3d3a5abd5ca', show: !this.hasError && this.hasHelp }, index.h("slot", { key: '8124c307378e5e34bd6384f8a753ef69d33aa583', name: "help" })))));
     }
     get variant() {
         const labelPositionVariant = this.labelPosition

package/dist/cjs/gux-form-field-select.cjs.entry.js

@@ -11,7 +11,7 @@ const hasSlot = require('./has-slot-3edae188.js');
 const guxFormFieldError = require('./gux-form-field-error-c55f1055.js');
 const guxFormFieldContainer = require('./gux-form-field-container-ad5588d7.js');
 const guxFormField_service = require('./gux-form-field.service-42c9f800.js');
-const usage = require('./usage-5cabc35e.js');
+const usage = require('./usage-069a2035.js');
 require('./random-html-id-71c43d5a.js');
 require('./log-error-7b9d4b57.js');
 require('./simulate-native-event-e88bf64f.js');
@@ -89,13 +89,13 @@ const GuxFormFieldSelect = class {
         }
     }
     render() {
-        return (index.h(guxFormFieldContainer.GuxFormFieldContainer, { key: 'b928031f683999046e3cc9bed38ad760c236e9e9', labelPosition: this.computedLabelPosition }, index.h(guxFormFieldContainer.GuxFormFieldLabel, { key: 'e07c87117a539fecf347b8edb8ca56fa1dd54a7e', required: this.required, position: this.computedLabelPosition }, index.h("slot", { key: '7289cde4c59f1fe8b1e28356d9cb721305ae8fe9', name: "label", onSlotchange: () => this.setLabel() }), index.h("gux-form-field-label-indicator", { key: '205d12d026049867610b2bf5a700aa6a1c1d35c2', variant: this.indicatorMark, required: this.required }), index.h("slot", { key: '07d62929f16393fde084434f488889ef97ffeca5', name: "label-info" })), index.h("div", { key: '542540171c3e6ce101e974707c36d44b827884cd', class: "gux-input-and-error-container" }, index.h("div", { key: '9486afc4de383775409ec2b9d126798a03deda29', class: {
+        return (index.h(guxFormFieldContainer.GuxFormFieldContainer, { key: 'c15ab0395de23384134e2dc43b74eafc8e68ea2a', labelPosition: this.computedLabelPosition }, index.h(guxFormFieldContainer.GuxFormFieldLabel, { key: '23532015d31f5bcbab28b2b57c308ac1691180fd', required: this.required, position: this.computedLabelPosition }, index.h("slot", { key: '2a18ab75ead6d769bf781e2b108a87601817dd9b', name: "label", onSlotchange: () => this.setLabel() }), index.h("gux-form-field-label-indicator", { key: '892f003c7374cc9f46fd6de2f12824c1d575add6', variant: this.indicatorMark, required: this.required }), index.h("slot", { key: '1348fe6e39643e583d683a1aa0aaea6684ad5c69', name: "label-info" })), index.h("div", { key: 'c46ac0c7b45155504b633717fe33cb7e7b5c498e', class: "gux-input-and-error-container" }, index.h("div", { key: '81ac871570edbe781d0bf1dbf5214d0efaf89791', class: {
                 'gux-input': true,
                 'gux-input-error': this.hasError
-            } }, index.h("div", { key: '6a05e35a061b711b3edb8bec261223aa0a4ae335', class: {
+            } }, index.h("div", { key: '9cae3297e8db17669c58dfeffed20d72a932bcca', class: {
                 'gux-input-container': true,
                 'gux-disabled': this.disabled
-            } }, index.h("slot", { key: '7d2a610b542a165fac36caf3f737c38b1af844b2', name: "input" }), index.h("gux-icon", { key: '15be1be18f83f14f23555df075a4c2f35f52d813', "icon-name": "custom/chevron-down-small-regular", decorative: true }))), index.h(guxFormFieldError.GuxFormFieldError, { key: '751b065232ef2e12cc98b897fc6cf07edafdfb11', show: this.hasError }, index.h("slot", { key: '4ff01e5d20eb7fcc1079116bc813fd4d2d0d18c2', name: "error" })), index.h(guxFormFieldError.GuxFormFieldHelp, { key: '2d78511124551d897983bc577cf0f0da3cef02f3', show: !this.hasError && this.hasHelp }, index.h("slot", { key: '14890b954cea5d3452bf1a1352224ee6d36a5324', name: "help" })))));
+            } }, index.h("slot", { key: '2e86072aba8f4026f5d10ffc018067c7e9871698', name: "input" }), index.h("gux-icon", { key: '8bf6384b6c96fa6e7d67fc6c96696faff22c542c', "icon-name": "custom/chevron-down-small-regular", decorative: true }))), index.h(guxFormFieldError.GuxFormFieldError, { key: '85619d945103f146957c4074fe0caf8a63b81579', show: this.hasError }, index.h("slot", { key: '2e95b049dbb5d3df73ba048f4019543810a742e1', name: "error" })), index.h(guxFormFieldError.GuxFormFieldHelp, { key: '59585203e681fc154bd64e8b8b2904e150e38517', show: !this.hasError && this.hasHelp }, index.h("slot", { key: 'b7447f0a5ca5c7bd62de473d4adbae36d9e2da12', name: "help" })))));
     }
     get variant() {
         const labelPositionVariant = this.labelPosition

package/dist/cjs/gux-form-field-text-like.cjs.entry.js

@@ -11,7 +11,7 @@ const hasSlot = require('./has-slot-3edae188.js');
 const guxFormFieldError = require('./gux-form-field-error-c55f1055.js');
 const guxFormFieldContainer = require('./gux-form-field-container-ad5588d7.js');
 const guxFormField_service = require('./gux-form-field.service-42c9f800.js');
-const usage = require('./usage-5cabc35e.js');
+const usage = require('./usage-069a2035.js');
 const focusInputElement = require('./focus-input-element-3a0c1858.js');
 require('./random-html-id-71c43d5a.js');
 require('./log-error-7b9d4b57.js');
@@ -115,15 +115,15 @@ const GuxFormFieldTextLike = class {
         }
     }
     render() {
-        return (index.h(guxFormFieldContainer.GuxFormFieldContainer, { key: '4bfc2c90ceda36b591173fb005c270f212c519f4', labelPosition: this.computedLabelPosition }, index.h(guxFormFieldContainer.GuxFormFieldLabel, { key: '6cb86ea988e2381b54fd73c257702b4cb4833393', required: this.required, position: this.computedLabelPosition }, index.h("slot", { key: '6aae331a3446da315706bf381a6943fbceed9695', name: "label", onSlotchange: () => this.setLabel() }), index.h("gux-form-field-label-indicator", { key: '6c13dbbd39696396243fc84221d24f8adb612d88', variant: this.indicatorMark, required: this.required }), index.h("slot", { key: 'd7d696dd7029f2ef13b571434ff2e2c4b9ae44ee', name: "label-info" })), index.h("div", { key: '4adebc576047a0b0df4bec53e8d0e520c28caccc', class: "gux-input-and-error-container" }, index.h("div", { key: 'b3c47ca1858946defb5c5bf0a5e96eefc45bb287', class: {
+        return (index.h(guxFormFieldContainer.GuxFormFieldContainer, { key: '1ca223257c2c32f7d9b4916ba256271dd5b1d078', labelPosition: this.computedLabelPosition }, index.h(guxFormFieldContainer.GuxFormFieldLabel, { key: '891622b154066f89ef432137514222bdb0c7b8cd', required: this.required, position: this.computedLabelPosition }, index.h("slot", { key: '07ebbf4da32bfb7c043bae5db05a3a0d86117873', name: "label", onSlotchange: () => this.setLabel() }), index.h("gux-form-field-label-indicator", { key: '2cf8c5e3c5f12d028ece1309a7817f667b06c265', variant: this.indicatorMark, required: this.required }), index.h("slot", { key: '1f9b6aaf0a37c44792af82940545e92c97834c64', name: "label-info" })), index.h("div", { key: 'fb69f8031c90def7c837b9d78742bcbf61550c27', class: "gux-input-and-error-container" }, index.h("div", { key: 'ff2d9d7e483c05e625893a0f5850982cdd92c55b', class: {
                 'gux-input': true,
                 'gux-input-error': this.hasError
-            } }, index.h("div", { key: '66923b721b025485284a666eeabda9d8ddf38a8f', class: {
+            } }, index.h("div", { key: 'd449698a1223c5d827a07761385d16c72cbdd89a', class: {
                 'gux-input-container': true,
                 'gux-disabled': this.disabled,
                 'gux-has-prefix': this.hasPrefix,
                 'gux-has-suffix': this.hasSuffix
-            }, onClick: () => focusInputElement.focusInputElement(this.input) }, index.h("slot", { key: '6d30e93d1772b718346d6335e23e9f38b812419a', name: "prefix" }), index.h("slot", { key: '449f84eb06fa74a0fd1acaa33ff016b1ec45f550', name: "input" }), this.renderRadialLoading(), index.h("slot", { key: 'b3b67a15ecf829a143f052f51f1c95fb2d3e04ce', name: "suffix" }), this.clearable && this.hasContent && !this.disabled && (index.h("gux-form-field-input-clear-button", { key: 'c8869108f24091264f38748e2d3f41846cd7291d', onClick: () => guxFormField_service.clearInput(this.input) })))), index.h(guxFormFieldError.GuxFormFieldError, { key: 'ad45607c9fd01891cd0023959a5b5de5213e741f', show: this.hasError }, index.h("slot", { key: '52f46539c187533b54522b185bb5ba084c52e70a', name: "error" })), index.h(guxFormFieldError.GuxFormFieldHelp, { key: 'f91d1eb88f117e1cbe451b23565921b9dad0710b', show: !this.hasError && this.hasHelp }, index.h("slot", { key: 'c907e53165909fea45e0d4cca3aed992dada7a6b', name: "help" })))));
+            }, onClick: () => focusInputElement.focusInputElement(this.input) }, index.h("slot", { key: '7cdc2f7fa447aef0e718d3dea1c217b05738fec0', name: "prefix" }), index.h("slot", { key: 'e54caf74962d08fcdddaff8b8608c3d6e943bbdd', name: "input" }), this.renderRadialLoading(), index.h("slot", { key: '05332b5ca75369f96ee6ebbd57a3f44a6050c3fa', name: "suffix" }), this.clearable && this.hasContent && !this.disabled && (index.h("gux-form-field-input-clear-button", { key: 'dbcef6499ddde4169e89c920c5a021dc1a375362', onClick: () => guxFormField_service.clearInput(this.input) })))), index.h(guxFormFieldError.GuxFormFieldError, { key: '5527c143efb4e9e4bb97ffbd52d407c7c86b3864', show: this.hasError }, index.h("slot", { key: '532d5e81c1a39cab499766e7fc5951195c092dd5', name: "error" })), index.h(guxFormFieldError.GuxFormFieldHelp, { key: '7f7e8243c8b23da439f373250e2d86f030774433', show: !this.hasError && this.hasHelp }, index.h("slot", { key: '633bccea0610149a1efdb19c9ec7098f33412eb7', name: "help" })))));
     }
     get variant() {
         const labelPositionVariant = this.labelPosition