genesys-spark-components 4.137.1 → 4.138.0

package/dist/esm/gux-flyout-menu.entry.js

@@ -1,7 +1,7 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-21889d5d.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-1f4f2f77.js';
 import { a as autoUpdate, c as computePosition, o as offset, f as flip, s as shift, b as arrow } from './floating-ui.dom.esm-17bec7ce.js';
 import { a as afterNextRenderTimeout } from './after-next-render-07a41f53.js';
-import { t as trackComponent } from './usage-66b031b6.js';
+import { t as trackComponent } from './usage-82f4ed22.js';
 import { h as hideDelay } from './gux-menu.common-b2a4d472.js';
 
 const guxFlyoutMenuCss = ":host{z-index:var(--gse-semantic-zIndex-popover);color:var(--gse-ui-menu-option-label-foregroundColor);cursor:default}:host(:focus){outline:none}:host(:focus-visible){outline:var(--gse-semantic-focusOutline-md-borderWidth) solid var(--gse-semantic-border-focus);outline-offset:var(--gse-semantic-focusOutline-offset)}.gux-flyout-menu-content{position:fixed;display:none;border:none;border-radius:var(--gse-ui-menu-borderRadius)}.gux-flyout-menu-content.gux-shown{display:flex}.gux-flyout-menu-content .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-flyout-menu-content .gux-arrow-caret{inline-size:0;block-size:0;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;filter:drop-shadow(0 0 4px var(--gse-semantic-effects-boxShadow))}";
@@ -172,10 +172,10 @@ const GuxFlyoutMenu = class {
         }
     }
     render() {
-        return (h(Host, { key: 'c0a99b249f62a659b82e12a95b3a8d0aafba87de', tabIndex: 0, "aria-haspopup": "true" }, h("span", { key: '54129363fc206a7b4e0d50cd57fabd02a8456dab', ref: el => (this.targetElement = el) }, h("slot", { key: '3df58d730adcbf46197c2add6020edb107e41320', name: "target" })), h("div", { key: '36eb0e806f69fde8bfe30a6bb7f2e7d4305647c9', class: {
+        return (h(Host, { key: 'fa1d610e066e43e6a025b4a9301ebd079a1a0459', tabIndex: 0, "aria-haspopup": "true" }, h("span", { key: '326c7ff30a22066eabce87d3b7a8d4f7218a90c0', ref: el => (this.targetElement = el) }, h("slot", { key: '9c0296a10351beadb7b244bac865a6bf8f22317a', name: "target" })), h("div", { key: 'f08abd040753a89b68d09fdd5b41de488e2127b0', class: {
                 'gux-flyout-menu-content': true,
                 'gux-shown': this.isShown
-            }, ref: el => (this.menuContentElement = el) }, h("div", { key: 'c336ce3add65a8972f2c59d5883d65ec69b84ea8', ref: (el) => (this.arrowElement = el), class: "gux-arrow" }, h("div", { key: 'fb036aee8bc4baffc34e2e644a4c0096fb44ed9d', class: "gux-arrow-caret" })), h("slot", { key: 'c1c6db91ef749880505d454c26cee5be6649ef17', name: "menu" }))));
+            }, ref: el => (this.menuContentElement = el) }, h("div", { key: 'c2012c91e07d8096d67dce88517278a482648499', ref: (el) => (this.arrowElement = el), class: "gux-arrow" }, h("div", { key: 'a96a744afb7f76549f4213651aa1f04d294b5141', class: "gux-arrow-caret" })), h("slot", { key: 'f65fff57bc2b65fa7f358d08d400cd9e638f7505', name: "menu" }))));
     }
     get root() { return getElement(this); }
 };

package/dist/esm/gux-form-beta.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-21889d5d.js';
+import { r as registerInstance, h } from './index-1f4f2f77.js';
 
 const GuxForm = class {
     constructor(hostRef) {

package/dist/esm/gux-form-description.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-21889d5d.js';
+import { r as registerInstance, h } from './index-1f4f2f77.js';
 
 const guxFormDescriptionCss = "::slotted(*){margin:0 !important;font-family:var(--gse-semantic-body-sm-regular-fontFamily) !important;font-size:var(--gse-semantic-body-sm-regular-fontSize) !important;font-weight:var(--gse-semantic-body-sm-regular-fontWeight) !important;line-height:var(--gse-semantic-body-sm-regular-lineHeight) !important;color:var(--gse-semantic-foreground-container-midEmphasis) !important}";
 const GuxFormDescriptionStyle0 = guxFormDescriptionCss;

package/dist/esm/gux-form-field-checkbox-group-beta.entry.js

@@ -1,13 +1,13 @@
-import { r as registerInstance, f as forceUpdate, h, g as getElement } from './index-21889d5d.js';
-import { O as OnMutation } from './on-mutation-bf72b518.js';
+import { r as registerInstance, f as forceUpdate, h, g as getElement } from './index-1f4f2f77.js';
+import { O as OnMutation } from './on-mutation-751e68e4.js';
 import { h as hasSlot } from './has-slot-f24a46a6.js';
 import { a as logWarn } from './log-error-274efeb7.js';
-import { b as buildI18nForComponent } from './index-0faa8b4b.js';
+import { b as buildI18nForComponent } from './index-4f1356d9.js';
 import { s as simulateNativeEvent } from './simulate-native-event-e0631897.js';
-import { G as GuxFormFieldHelp, a as GuxFormFieldError } from './gux-form-field-error-a340fbff.js';
-import { G as GuxFormFieldVisualLabel, a as GuxFormFieldScreenreaderLabel, b as GuxFormFieldFieldsetContainer } from './gux-form-field-fieldset-container-15aeb3b3.js';
+import { G as GuxFormFieldHelp, a as GuxFormFieldError } from './gux-form-field-error-acb40a19.js';
+import { G as GuxFormFieldVisualLabel, a as GuxFormFieldScreenreaderLabel, b as GuxFormFieldFieldsetContainer } from './gux-form-field-fieldset-container-6cb3610f.js';
 import { g as getSlotTextContent } from './get-slot-text-content-95a85429.js';
-import { t as trackComponent } from './usage-66b031b6.js';
+import { t as trackComponent } from './usage-82f4ed22.js';
 import './get-closest-element-728b9f18.js';
 
 function setAllCheckboxInputs(root, checked) {
@@ -69,11 +69,28 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, ta
 const GuxFormFieldCheckboxGroupBeta = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        /**
+         * Field indicator mark which can show *, (optional) or blank
+         * Defaults to required. When set to required, the component will display * for required fields and blank for optional
+         * When set to optional, the component will display (optional) for optional and blank for required.
+         */
         this.indicatorMark = 'required';
         this.required = false;
+        /**
+         *  Checkbox group has error text.
+         */
         this.hasGroupError = false;
+        /**
+         *  Checkbox group has help text.
+         */
         this.hasGroupHelp = false;
+        /**
+         *  radio group has label info tooltip
+         */
         this.hasGroupLabelInfo = false;
+        /**
+         * Disables the checkboxes in the group.
+         */
         this.disabled = false;
     }
     watchGroupError(hasGroupError) {
@@ -176,8 +193,8 @@ const GuxFormFieldCheckboxGroupBeta = class {
     }
     render() {
         var _a;
-        return (h(GuxFormFieldFieldsetContainer, { key: '2b688ef5b43bf5ae957f8bdfbc8f7eff58011c7e', labelPosition: "above" }, h(GuxFormFieldScreenreaderLabel, { key: '20402cfcc442d3c6173d5ef27094849c41f60a85' }, (_a = this.label) === null || _a === void 0 ? void 0 :
-            _a.textContent, this.renderText(this.getI18nValue('required'), this.required), this.renderText(getSlotTextContent(this.root, 'group-error'), this.hasGroupError), this.renderText(getSlotTextContent(this.root, 'group-help'), this.hasGroupHelp), this.renderText(getSlotTextContent(this.root, 'group-label-info'), this.hasGroupLabelInfo)), h(GuxFormFieldVisualLabel, { key: '672e11ccc7213a93673e44175f46f435d18f108a', position: "above", required: this.required }, h("slot", { key: '1f4b628852e3f2d403e0ab0eb450a87a224651ec', name: "group-label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: '1231ada7c7f84d70fc172659cf59fa5c2c99b5b4', variant: this.indicatorMark, required: this.required }), h("slot", { key: '4b891ae4996f3e604c82986208b4dcdff6e80983', name: "group-label-info" })), h("slot", { key: 'ba2729cb4feea24fbf35cae13d5cb1792bb983ac', onSlotchange: () => this.setupNestedCheckboxes(), name: "group-checkbox" }), h("slot", { key: 'eb0121b5ba00f3ffe084571ca56f6a1011c5bb6b', onSlotchange: () => this.updateMainCheckbox() }), h(GuxFormFieldError, { key: 'f4a63bae223f931d659194932d0b96d93b41f651', show: this.hasGroupError }, h("slot", { key: '406399ffba0dfc810e699ffd45b4c8e82dde60eb', name: "group-error" })), h(GuxFormFieldHelp, { key: 'c68edce36ca0fd6292862cd161b5182a208ab319', show: !this.hasGroupError && this.hasGroupHelp }, h("slot", { key: 'db1320fa4ba0c1137585f1825d2824a8c6d264b1', name: "group-help" }))));
+        return (h(GuxFormFieldFieldsetContainer, { key: '3b33199d0852a92df23c59b5843f5f48282a136f', labelPosition: "above" }, h(GuxFormFieldScreenreaderLabel, { key: 'd6933ee5c5fdc1e76876e13ba26c1659c9112971' }, (_a = this.label) === null || _a === void 0 ? void 0 :
+            _a.textContent, this.renderText(this.getI18nValue('required'), this.required), this.renderText(getSlotTextContent(this.root, 'group-error'), this.hasGroupError), this.renderText(getSlotTextContent(this.root, 'group-help'), this.hasGroupHelp), this.renderText(getSlotTextContent(this.root, 'group-label-info'), this.hasGroupLabelInfo)), h(GuxFormFieldVisualLabel, { key: 'a3831908a9f0c3c36e37d0b0a780c7c92f7c1dce', position: "above", required: this.required }, h("slot", { key: 'deed6591b098259b1f8890a1a3da8031aec1191f', name: "group-label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: 'd4848d9b2733dc0000b911d28b4e09a6b0e382f6', variant: this.indicatorMark, required: this.required }), h("slot", { key: 'db792150cc8c6b4436b557933250beb231a717fa', name: "group-label-info" })), h("slot", { key: 'a60e9d4d0ccc580b5752ba871a33a953d27fd41c', onSlotchange: () => this.setupNestedCheckboxes(), name: "group-checkbox" }), h("slot", { key: '3efd3470ff4da294d814ea367261921e5d8d3017', onSlotchange: () => this.updateMainCheckbox() }), h(GuxFormFieldError, { key: 'fc6db71f68f2763d88208b9b9550cbbbbfb45068', show: this.hasGroupError }, h("slot", { key: 'a9ffb37ace5fea4c8f47e73693efbeea58b76ada', name: "group-error" })), h(GuxFormFieldHelp, { key: '0e03a0d08e8af6215c3e793688a6db90c02a4a4d', show: !this.hasGroupError && this.hasGroupHelp }, h("slot", { key: 'a5e7d149c584db70e9b7ad3dc87c1258e461bb60', name: "group-help" }))));
     }
     setLabel() {
         this.label = this.root.querySelector('label[slot="group-label"]');

package/dist/esm/gux-form-field-checkbox.entry.js

@@ -1,10 +1,10 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-21889d5d.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-1f4f2f77.js';
 import { c as calculateInputDisabledState, o as onInputDisabledStateChange } from './on-input-disabled-state-change-27395154.js';
-import { O as OnMutation } from './on-mutation-bf72b518.js';
+import { O as OnMutation } from './on-mutation-751e68e4.js';
 import { p as preventBrowserValidationStyling } from './prevent-browser-validation-styling-3983eb0a.js';
 import { h as hasSlot } from './has-slot-f24a46a6.js';
-import { a as GuxFormFieldError, G as GuxFormFieldHelp } from './gux-form-field-error-a340fbff.js';
-import { t as trackComponent } from './usage-66b031b6.js';
+import { a as GuxFormFieldError, G as GuxFormFieldHelp } from './gux-form-field-error-acb40a19.js';
+import { t as trackComponent } from './usage-82f4ed22.js';
 import { g as getSlottedInput, v as validateFormIds } from './gux-form-field.service-173b5dfc.js';
 import './random-html-id-81ac821b.js';
 import './log-error-274efeb7.js';
@@ -27,7 +27,6 @@ const GuxFormFieldCheckbox = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.labelPosition = 'beside';
-        this.disabled = undefined;
         this.hasHelp = false;
         this.hasError = false;
         this.hasGroupError = false;
@@ -49,10 +48,10 @@ const GuxFormFieldCheckbox = class {
         }
     }
     render() {
-        return (h(Host, { key: 'b50ef075fe3518e381b9e96f2ab4dad6706882d8', class: {
+        return (h(Host, { key: '0c2e94a0639b7a9a0d33da50bd3061c7f7e2d7b7', class: {
                 'gux-input-error': this.hasError || this.hasGroupError,
                 'gux-disabled': this.disabled
-            } }, h("div", { key: '8b190350ea28db072c104036709f65f86f8ee7f2', class: "gux-form-field-container" }, h("div", { key: 'a5e8941b463e227dbde7cc56f4ce53cdcff397de', class: "gux-input-label" }, h("div", { key: '7054952122bd9bdc8ac574b5bb1a25ca9accbf2c', class: "gux-input" }, h("slot", { key: '9f3b321585f6067d8b4014304b783369e4f2bc98', name: "input", onSlotchange: () => this.setInput() })), h("div", { key: 'fa2e3fe91a20b865c4f4b87815cd53fff1fc06f2', class: `gux-label-${this.labelPosition}`, "aria-disabled": this.disabled ? 'true' : 'false' }, h("slot", { key: '52bc35532eb8f3a2ebc745f459324688a497c178', name: "label" }))), h("div", { key: 'ed5e839d314d483e3e3cdd6e3dfe2f2540125d11', class: "error-and-help-text" }, h(GuxFormFieldError, { key: '1a45479156c57be2c6a131e5fc60651286aea53b', show: this.hasError }, h("slot", { key: '9e2f8f13fdd665d5fdbbc52582c984d7488ce2cf', name: "error" })), h(GuxFormFieldHelp, { key: '799d78bafcdce6c6dc269e296625a338ae41c193', show: !this.hasError && this.hasHelp }, h("slot", { key: 'bd60f8b646e36ac3e1dfd33beee4c45902f6e217', name: "help" }))))));
+            } }, h("div", { key: 'f0e07d2cca513c52f20a6fb67cc394059733ec41', class: "gux-form-field-container" }, h("div", { key: '89ac566d1648fcd48b3fce1fe31600e282020360', class: "gux-input-label" }, h("div", { key: '7aaac55e931fbfc26dbcf4018009879005878b60', class: "gux-input" }, h("slot", { key: '9c93787dc7d0464e848780ae34a76ff69c43eec8', name: "input", onSlotchange: () => this.setInput() })), h("div", { key: '1864d76877c5a710262df6acf00a9108bf887d81', class: `gux-label-${this.labelPosition}`, "aria-disabled": this.disabled ? 'true' : 'false' }, h("slot", { key: 'ac092d51b91c6568ffb708387529c8a46ea68cec', name: "label" }))), h("div", { key: '320fd3438c3be63936113ec3a141b3b9d0a3568c', class: "error-and-help-text" }, h(GuxFormFieldError, { key: '5bbe724e9768404d6ed538c863cb001c5366593f', show: this.hasError }, h("slot", { key: '2fe8cb4c939bbe76194893fe61633ca4fa7df62f', name: "error" })), h(GuxFormFieldHelp, { key: 'c4fb397bf418dab936527aaf8bda72d2c898fd31', show: !this.hasError && this.hasHelp }, h("slot", { key: 'ee99d4774ad72f4ed796088c45f6f7d91c26a10a', name: "help" }))))));
     }
     get variant() {
         return this.labelPosition.toLowerCase();

package/dist/esm/gux-form-field-color.entry.js

@@ -1,13 +1,13 @@
-import { r as registerInstance, h, g as getElement } from './index-21889d5d.js';
+import { r as registerInstance, h, g as getElement } from './index-1f4f2f77.js';
 import { c as calculateInputDisabledState, o as onInputDisabledStateChange } from './on-input-disabled-state-change-27395154.js';
-import { O as OnMutation } from './on-mutation-bf72b518.js';
+import { O as OnMutation } from './on-mutation-751e68e4.js';
 import { o as onRequiredChange } from './on-attribute-change-33919964.js';
 import { p as preventBrowserValidationStyling } from './prevent-browser-validation-styling-3983eb0a.js';
 import { h as hasSlot } from './has-slot-f24a46a6.js';
-import { a as GuxFormFieldError, G as GuxFormFieldHelp } from './gux-form-field-error-a340fbff.js';
-import { G as GuxFormFieldLabel, a as GuxFormFieldContainer } from './gux-form-field-container-007ab28f.js';
+import { a as GuxFormFieldError, G as GuxFormFieldHelp } from './gux-form-field-error-acb40a19.js';
+import { G as GuxFormFieldLabel, a as GuxFormFieldContainer } from './gux-form-field-container-3dd7c6ff.js';
 import { g as getSlottedInput, v as validateFormIds, a as getComputedLabelPosition } from './gux-form-field.service-173b5dfc.js';
-import { t as trackComponent } from './usage-66b031b6.js';
+import { t as trackComponent } from './usage-82f4ed22.js';
 import './random-html-id-81ac821b.js';
 import './log-error-274efeb7.js';
 import './simulate-native-event-e0631897.js';
@@ -28,11 +28,12 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, ta
 const GuxFormFieldColor = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.labelPosition = undefined;
+        /**
+         * Field indicator mark which can show *, (optional) or blank
+         * Defaults to required. When set to required, the component will display * for required fields and blank for optional
+         * When set to optional, the component will display (optional) for optional and blank for required.
+         */
         this.indicatorMark = 'required';
-        this.computedLabelPosition = undefined;
-        this.disabled = undefined;
-        this.required = undefined;
         this.hasError = false;
         this.hasHelp = false;
     }
@@ -85,13 +86,13 @@ const GuxFormFieldColor = class {
         }
     }
     render() {
-        return (h(GuxFormFieldContainer, { key: 'a1abac99f9987c8c9ec8b170c0263a6dc6fb858a', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: 'ad5e1415cc2fce44313e4226bae1184d939cb166', required: this.required, position: this.computedLabelPosition }, h("slot", { key: 'd99f872271f62a3890992d4bbfbbab067b004dac', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: 'af675e82fc0cc79c1f91399855ba1a05792f90b6', variant: this.indicatorMark, required: this.required }), h("slot", { key: '3d5c5a2fa8fa17c42ddaf8e74505278e9b2811a6', name: "label-info" })), h("div", { key: '8f9c103ce1c08c656c2ede3bdca168769a270aff', class: "gux-input-and-error-container" }, h("div", { key: '4b730244582e6b92e011d5b91fdda4b4edf7909a', class: {
+        return (h(GuxFormFieldContainer, { key: '50b798eab2ffec2de253631cc955735822fb1af9', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: '243f5f76c6be675bcce6d1a77d4127d27d62c509', required: this.required, position: this.computedLabelPosition }, h("slot", { key: 'c2e698839a5b377d3ace2598e73bce4f4511feef', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: 'cf4eca811a47ad397fb7b223012c0e9765b06b54', variant: this.indicatorMark, required: this.required }), h("slot", { key: 'bba4efb9c91106cbcccb28425081b766ef0773ff', name: "label-info" })), h("div", { key: 'bd8e56487b500d1a93f4fd51126b624dc507d11e', class: "gux-input-and-error-container" }, h("div", { key: '09050e3d83cb9d2b6463cc250db56c91004c4de4', class: {
                 'gux-input': true,
                 'gux-input-error': this.hasError
-            } }, h("div", { key: '4e91a98be9dee52f5a5ec3d2ae9bc1bda29d4d45', class: {
+            } }, h("div", { key: '768582927565bbe1df7111f1582d984fbcbefac6', class: {
                 'gux-input-container': true,
                 'gux-disabled': this.disabled
-            } }, h("slot", { key: 'b48f16c281011415b0743156e0b104321d9b785e', name: "input", onSlotchange: () => this.setInput() }))), h(GuxFormFieldError, { key: 'd0e61d8d14cb5ed23b07e3659ad72ede73fd65a0', show: this.hasError }, h("slot", { key: '717deea7a203590366bccca8bffc9137fdf2a757', name: "error" })), h(GuxFormFieldHelp, { key: '81da66b21ab922e3af1d96d23674ada26ef8e311', show: !this.hasError && this.hasHelp }, h("slot", { key: 'b3859aae1522dfe81c65a72d32d7b6e6d38560a6', name: "help" })))));
+            } }, h("slot", { key: '2b9b68cf05c516ea01caf971317bbed6a876c792', name: "input", onSlotchange: () => this.setInput() }))), h(GuxFormFieldError, { key: 'c0901866c04c9ff738324b36870bcb0e3be62e79', show: this.hasError }, h("slot", { key: '3ad27f64c30686b62d11735feaae817eb11c8b61', name: "error" })), h(GuxFormFieldHelp, { key: 'b9077472ee08d0708c0e20b2de93f44000a475da', show: !this.hasError && this.hasHelp }, h("slot", { key: '32578a641faf50d6392577305e929a63ca4524e2', name: "help" })))));
     }
     get variant() {
         return this.labelPosition ? this.labelPosition.toLowerCase() : 'none';

package/dist/esm/{gux-form-field-container-007ab28f.js → gux-form-field-container-3dd7c6ff.js}

@@ -1,4 +1,4 @@
-import { h } from './index-21889d5d.js';
+import { h } from './index-1f4f2f77.js';
 
 const GuxFormFieldLabel = ({ position, required }, children) => {
     return (h("div", { class: {

package/dist/esm/gux-form-field-dropdown.entry.js

@@ -1,13 +1,13 @@
-import { r as registerInstance, h, g as getElement } from './index-21889d5d.js';
-import { b as buildI18nForComponent } from './index-0faa8b4b.js';
-import { O as OnMutation } from './on-mutation-bf72b518.js';
+import { r as registerInstance, h, g as getElement } from './index-1f4f2f77.js';
+import { b as buildI18nForComponent } from './index-4f1356d9.js';
+import { O as OnMutation } from './on-mutation-751e68e4.js';
 import { o as onRequiredChange } from './on-attribute-change-33919964.js';
 import { h as hasSlot } from './has-slot-f24a46a6.js';
-import { a as GuxFormFieldError, G as GuxFormFieldHelp } from './gux-form-field-error-a340fbff.js';
-import { G as GuxFormFieldVisualLabel, a as GuxFormFieldScreenreaderLabel, b as GuxFormFieldFieldsetContainer } from './gux-form-field-fieldset-container-15aeb3b3.js';
+import { a as GuxFormFieldError, G as GuxFormFieldHelp } from './gux-form-field-error-acb40a19.js';
+import { G as GuxFormFieldVisualLabel, a as GuxFormFieldScreenreaderLabel, b as GuxFormFieldFieldsetContainer } from './gux-form-field-fieldset-container-6cb3610f.js';
 import { g as getSlotTextContent } from './get-slot-text-content-95a85429.js';
 import { s as setSlotAriaLabelledby, b as setSlotAriaDescribedby, a as getComputedLabelPosition } from './gux-form-field.service-173b5dfc.js';
-import { t as trackComponent } from './usage-66b031b6.js';
+import { t as trackComponent } from './usage-82f4ed22.js';
 import './get-closest-element-728b9f18.js';
 import './random-html-id-81ac821b.js';
 import './log-error-274efeb7.js';
@@ -34,10 +34,13 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, ta
 const GuxFormFieldDropdown = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.labelPosition = undefined;
+        /**
+         * Field indicator mark which can show *, (optional) or blank
+         * Defaults to required. When set to required, the component will display * for required fields and blank for optional
+         * When set to optional, the component will display (optional) for optional and blank for required.
+         */
         this.indicatorMark = 'required';
         this.computedLabelPosition = 'above';
-        this.required = undefined;
         this.hasError = false;
         this.hasHelp = false;
         this.hasLabelInfo = false;
@@ -103,11 +106,11 @@ const GuxFormFieldDropdown = class {
     }
     render() {
         var _a;
-        return (h(GuxFormFieldFieldsetContainer, { key: 'c13c59959080bf1b47237f726cd85413fbe8fea1', labelPosition: this.computedLabelPosition }, h(GuxFormFieldScreenreaderLabel, { key: 'd17cf870ac1ba7d66453626cbaebf85468ded335' }, (_a = this.label) === null || _a === void 0 ? void 0 :
-            _a.textContent, this.renderText(this.getI18nValue('required'), this.required), this.renderText(getSlotTextContent(this.root, 'error'), this.hasError), this.renderText(getSlotTextContent(this.root, 'help'), this.hasHelp), this.renderText(getSlotTextContent(this.root, 'label-info'), this.hasLabelInfo)), h(GuxFormFieldVisualLabel, { key: 'f3090303f5561ab32f1f4287c48cf37882787c03', position: this.computedLabelPosition, required: this.required }, h("slot", { key: 'c9d35b40c798f4d11b3c6ff02203eea538e069c9', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: '61220d59ca17068f66e02bacccbaf9908b1a068c', variant: this.indicatorMark, required: this.required }), h("slot", { key: '6fda0eb253ae60502a4cb85efba750cc237a4234', name: "label-info" })), h("div", { key: '9d9f1f0155bad09e169ad158479f81bf76f2577d', class: "gux-input-and-error-container" }, h("div", { key: '971e8d486fbc6312de11336020103a668d8fa58b', class: {
+        return (h(GuxFormFieldFieldsetContainer, { key: '4caa607e6f52c90a77986ff7a6edf13984db3245', labelPosition: this.computedLabelPosition }, h(GuxFormFieldScreenreaderLabel, { key: 'd9793de4036bd153a491e15bf0de314efa0d8a61' }, (_a = this.label) === null || _a === void 0 ? void 0 :
+            _a.textContent, this.renderText(this.getI18nValue('required'), this.required), this.renderText(getSlotTextContent(this.root, 'error'), this.hasError), this.renderText(getSlotTextContent(this.root, 'help'), this.hasHelp), this.renderText(getSlotTextContent(this.root, 'label-info'), this.hasLabelInfo)), h(GuxFormFieldVisualLabel, { key: '698ed26015f7a62ba80a3c27d9b3aec008bd852c', position: this.computedLabelPosition, required: this.required }, h("slot", { key: '86c036453fae43c9d18ddc87cad4858b6c76e254', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: '06d251db205e0a291c553c2cbf4b1ae3f2e3fe31', variant: this.indicatorMark, required: this.required }), h("slot", { key: '952f0d59f587e67561b93ee2659ed16a0c55e29e', name: "label-info" })), h("div", { key: 'db32cfdcaa0c081b053f0e828198c03eef6e1e76', class: "gux-input-and-error-container" }, h("div", { key: '4fd4aafc19f0cf122a9a8d32d17d171812029342', class: {
                 'gux-input': true,
                 'gux-input-error': this.hasError
-            } }, h("slot", { key: 'f2b170a7089530b95d2a882b73fe66ff695df3f6' })), h(GuxFormFieldError, { key: '2ef3b063873723523af52043e53101479caa1564', show: this.hasError }, h("slot", { key: '9f8f7abf0e255267a1d2f779a33753aaf078b358', name: "error" })), h(GuxFormFieldHelp, { key: 'e5d07a45daca87084120681b62ce8407782bedb1', show: !this.hasError && this.hasHelp }, h("slot", { key: '1c77a99461629206fe50a3aeeb2dad80a649c853', name: "help" })))));
+            } }, h("slot", { key: 'd2fed5431a315a019a6f6d93e47e68f7075f6358' })), h(GuxFormFieldError, { key: '368eb5e214e7d4963d9723df8ec0ec021e6dd581', show: this.hasError }, h("slot", { key: 'd061d9c878960c3ab36ee426c616168a277c4ac2', name: "error" })), h(GuxFormFieldHelp, { key: 'f7c475fe48499cf1565833015a0e994e5e793a99', show: !this.hasError && this.hasHelp }, h("slot", { key: '7817cb51713b84bab801d4254805523d135f9710', name: "help" })))));
     }
     get variant() {
         const labelPositionVariant = this.labelPosition

package/dist/esm/{gux-form-field-error-a340fbff.js → gux-form-field-error-acb40a19.js}

@@ -1,4 +1,4 @@
-import { h } from './index-21889d5d.js';
+import { h } from './index-1f4f2f77.js';
 
 const GuxFormFieldHelp = ({ show }, children) => {
     return (h("div", { class: {

package/dist/esm/{gux-form-field-fieldset-container-15aeb3b3.js → gux-form-field-fieldset-container-6cb3610f.js}

@@ -1,4 +1,4 @@
-import { h } from './index-21889d5d.js';
+import { h } from './index-1f4f2f77.js';
 
 const GuxFormFieldVisualLabel = ({ position, required }, children) => {
     return (h("div", { class: {

package/dist/esm/gux-form-field-file-beta.entry.js

@@ -1,10 +1,10 @@
-import { r as registerInstance, h, f as forceUpdate, g as getElement } from './index-21889d5d.js';
-import { b as buildI18nForComponent } from './index-0faa8b4b.js';
-import { O as OnMutation } from './on-mutation-bf72b518.js';
+import { r as registerInstance, h, f as forceUpdate, g as getElement } from './index-1f4f2f77.js';
+import { b as buildI18nForComponent } from './index-4f1356d9.js';
+import { O as OnMutation } from './on-mutation-751e68e4.js';
 import { h as hasSlot } from './has-slot-f24a46a6.js';
-import { t as trackComponent } from './usage-66b031b6.js';
-import { G as GuxFormFieldHelp, a as GuxFormFieldError } from './gux-form-field-error-a340fbff.js';
-import { G as GuxFormFieldLabel, a as GuxFormFieldContainer } from './gux-form-field-container-007ab28f.js';
+import { t as trackComponent } from './usage-82f4ed22.js';
+import { G as GuxFormFieldHelp, a as GuxFormFieldError } from './gux-form-field-error-acb40a19.js';
+import { G as GuxFormFieldLabel, a as GuxFormFieldContainer } from './gux-form-field-container-3dd7c6ff.js';
 import { g as getSlottedInput, v as validateFormIds } from './gux-form-field.service-173b5dfc.js';
 import { p as preventBrowserValidationStyling } from './prevent-browser-validation-styling-3983eb0a.js';
 import { a as onDisabledChange, o as onRequiredChange, b as onMultipleChange } from './on-attribute-change-33919964.js';
@@ -46,6 +46,11 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, ta
 const GuxFormFieldFileBeta = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        /**
+         * Field indicator mark which can show *, (optional) or blank
+         * Defaults to required. When set to required, the component will display * for required fields and blank for optional
+         * When set to optional, the component will display (optional) for optional and blank for required.
+         */
         this.indicatorMark = 'required';
         this.dragAndDrop = false;
         this.disabled = false;
@@ -104,7 +109,7 @@ const GuxFormFieldFileBeta = class {
         (_c = this.multipleObserver) === null || _c === void 0 ? void 0 : _c.disconnect();
     }
     render() {
-        return (h(GuxFormFieldContainer, { key: 'f49395fbf627974ce18e0dd84e66915778beba67', labelPosition: "above" }, h(GuxFormFieldLabel, { key: '2939741d702bb9b1c6d280d0b20b9a464acc4cdb', position: "above", required: this.required }, h("slot", { key: '82ac483008e9309a793eea123e7b1f1e15d6c8fd', name: "label" }), h("gux-form-field-label-indicator", { key: '6b188446276f05e553ad52b4adb20ebf433788ee', variant: this.indicatorMark, required: this.required }), h("slot", { key: 'c3e0bb581111375386c60f87c05bfaaada99d753', name: "label-info" })), h("div", { key: 'aeb311a235ee3bd2cb1c123c5d3ed0f0a7c2c6e5', class: "gux-input-and-error-container" }, h(GuxFormFieldHelp, { key: 'f6e371315226687aec983ae1b50e8510cbfa2308', show: this.hasHelp }, h("slot", { key: 'db630f997f316f9df1d2af9faa435078d66a156c', name: "help" })), this.renderInputSlot(), h(GuxFormFieldError, { key: 'cf357ba92b82f590588a3ed63bec065b9193d764', show: this.hasError }, h("slot", { key: '8c867f24169bca608c3b9df07b3dcd81028b6eba', name: "error" })), this.renderFileList())));
+        return (h(GuxFormFieldContainer, { key: '9d887e6c4512a8391dde9846c231bf4e22187e84', labelPosition: "above" }, h(GuxFormFieldLabel, { key: '492fa13142a4be8adb255ed97a2c2f3c8c5873c5', position: "above", required: this.required }, h("slot", { key: '7e5b0a6e5d16df5d61091e591d736e3c9b70757e', name: "label" }), h("gux-form-field-label-indicator", { key: '3093588796cfa6f643351d922886606afd8d9f85', variant: this.indicatorMark, required: this.required }), h("slot", { key: '8f114a5c512df1976c51f41c5d17b55e14559338', name: "label-info" })), h("div", { key: 'f903f9374864c2a92de3e41d6ef1f63531a8af30', class: "gux-input-and-error-container" }, h(GuxFormFieldHelp, { key: '4a8ad0368308fdd0e95463b239bcd4bef60a2ace', show: this.hasHelp }, h("slot", { key: '2f61a4eaef1b9e29079fa562b42a00117951e117', name: "help" })), this.renderInputSlot(), h(GuxFormFieldError, { key: '835ba7fc9d59bb8f6b13a354eb98236d25bbf967', show: this.hasError }, h("slot", { key: 'e77e38555dd9f11f8fc97e6d0f85b079acb86a1d', name: "error" })), this.renderFileList())));
     }
     setInput() {
         this.input = getSlottedInput(this.root, 'input[type="file"][slot="input"]');

package/dist/esm/gux-form-field-file.entry.js

@@ -1,9 +1,9 @@
-import { r as registerInstance, h, g as getElement } from './index-21889d5d.js';
-import { O as OnMutation } from './on-mutation-bf72b518.js';
+import { r as registerInstance, h, g as getElement } from './index-1f4f2f77.js';
+import { O as OnMutation } from './on-mutation-751e68e4.js';
 import { h as hasSlot } from './has-slot-f24a46a6.js';
-import { t as trackComponent } from './usage-66b031b6.js';
-import { a as GuxFormFieldError, G as GuxFormFieldHelp } from './gux-form-field-error-a340fbff.js';
-import { G as GuxFormFieldLabel, a as GuxFormFieldContainer } from './gux-form-field-container-007ab28f.js';
+import { t as trackComponent } from './usage-82f4ed22.js';
+import { a as GuxFormFieldError, G as GuxFormFieldHelp } from './gux-form-field-error-acb40a19.js';
+import { G as GuxFormFieldLabel, a as GuxFormFieldContainer } from './gux-form-field-container-3dd7c6ff.js';
 import { a as getComputedLabelPosition, g as getSlottedInput, v as validateFormIds } from './gux-form-field.service-173b5dfc.js';
 import { p as preventBrowserValidationStyling } from './prevent-browser-validation-styling-3983eb0a.js';
 import { o as onRequiredChange } from './on-attribute-change-33919964.js';
@@ -27,7 +27,11 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, ta
 const GuxFormFieldFile = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.labelPosition = undefined;
+        /**
+         * Field indicator mark which can show *, (optional) or blank
+         * Defaults to required. When set to required, the component will display * for required fields and blank for optional
+         * When set to optional, the component will display (optional) for optional and blank for required.
+         */
         this.indicatorMark = 'required';
         this.computedLabelPosition = 'above';
         this.hasError = false;
@@ -100,7 +104,7 @@ const GuxFormFieldFile = class {
         return `${type}-${labelPositionVariant}`;
     }
     render() {
-        return (h(GuxFormFieldContainer, { key: 'da72ca8b8a24411863a23e1a7ac942af3c90b647', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: 'a920219662a7f7c0fdf16480415c283a1f2b44f7', position: this.computedLabelPosition, required: this.required }, h("slot", { key: '2506d700f4f23dca8970dc6f4035a0172889d041', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: '1063d2e80bed6a81b381774f9907ee1991a8b869', variant: this.indicatorMark, required: this.required }), h("slot", { key: '0f8316ef158c01fa2f9a6f442b066a32de39bb85', name: "label-info" })), h("div", { key: '61fcc04b2a319867034a684b4b04220d4cda2226', class: "gux-input-and-error-container" }, h("slot", { key: '80f96c848c29ffed9ed0bdbc0e09136fb12bca0c', name: "input", onSlotchange: () => this.setInput() }), h(GuxFormFieldError, { key: '73618bd90f0c4d81f2ce7cad6a32be0d2c3d2822', show: this.hasError }, h("slot", { key: '1b5ae7e0e7c89104007a4e437d12269b2dd0b288', name: "error" })), h(GuxFormFieldHelp, { key: '24e9fe52c481161da20dd3e1473af1bfc75499e8', show: !this.hasError && this.hasHelp }, h("slot", { key: 'e0eef8f5cf26428dc99c0a98c033da5c67b28636', name: "help" })))));
+        return (h(GuxFormFieldContainer, { key: '81a76e19d2642450f6700473fbf980e991a2cc2f', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: 'ae087d7a1287e9ef62d5ecb58135cb4ef62bf364', position: this.computedLabelPosition, required: this.required }, h("slot", { key: '0fde915ee6993a85f70cff079bc2bbc317b13f8e', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: '36dfd2da6ed5728d7255b12098e3ab5f49320d0e', variant: this.indicatorMark, required: this.required }), h("slot", { key: '806f91102853273d48b484ee806a0ed700b27a49', name: "label-info" })), h("div", { key: '582f7cf93e0befe3f5ff66217af574128c11307d', class: "gux-input-and-error-container" }, h("slot", { key: 'c1d06dfc8938b86a4d34776c16ccafe33a97a4e7', name: "input", onSlotchange: () => this.setInput() }), h(GuxFormFieldError, { key: '17ab9fee479aadd9db3a3c5e4f07c66364231476', show: this.hasError }, h("slot", { key: '7aaa8bebe1a8d4a80387d36af4cf4a1f748c510c', name: "error" })), h(GuxFormFieldHelp, { key: '37df349655001e8542aec879c6da1d2962c4b0eb', show: !this.hasError && this.hasHelp }, h("slot", { key: '40d12e88fc9aceae27428d06be4426a58d9cc8ac', name: "help" })))));
     }
     get root() { return getElement(this); }
 };

package/dist/esm/gux-form-field-input-clear-button.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, h, g as getElement } from './index-21889d5d.js';
-import { t as trackComponent } from './usage-66b031b6.js';
-import { b as buildI18nForComponent } from './index-0faa8b4b.js';
+import { r as registerInstance, h, g as getElement } from './index-1f4f2f77.js';
+import { t as trackComponent } from './usage-82f4ed22.js';
+import { b as buildI18nForComponent } from './index-4f1356d9.js';
 import './get-closest-element-728b9f18.js';
 
 const clear = "Clear";
@@ -20,7 +20,7 @@ const GuxFormFieldInputClearButton = class {
         this.i18n = await buildI18nForComponent(this.root, translationResources);
     }
     render() {
-        return (h("button", { key: 'f78832fce4d4b1004c91b56bc59ff74db4e0c7f7', tabIndex: -1, type: "button", title: this.i18n('clear') }, h("gux-icon", { key: 'aa86d66232abf818c07fb6264cd046df00051961', "icon-name": "fa/xmark-large-regular", decorative: true, size: "small" })));
+        return (h("button", { key: '77f84eb9a74cd779b81ab929a801b444779f0eab', tabIndex: -1, type: "button", title: this.i18n('clear') }, h("gux-icon", { key: '832e3b4435a02295473dd443b37757b818098d05', "icon-name": "fa/xmark-large-regular", decorative: true, size: "small" })));
     }
     static get delegatesFocus() { return true; }
     get root() { return getElement(this); }

package/dist/esm/gux-form-field-label-indicator.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, h, g as getElement } from './index-21889d5d.js';
-import { t as trackComponent } from './usage-66b031b6.js';
-import { b as buildI18nForComponent } from './index-0faa8b4b.js';
+import { r as registerInstance, h, g as getElement } from './index-1f4f2f77.js';
+import { t as trackComponent } from './usage-82f4ed22.js';
+import { b as buildI18nForComponent } from './index-4f1356d9.js';
 import './get-closest-element-728b9f18.js';
 
 const optional = "optional";

package/dist/esm/gux-form-field-number_2.entry.js

@@ -1,18 +1,18 @@
-import { r as registerInstance, f as forceUpdate, h, g as getElement, c as createEvent } from './index-21889d5d.js';
-import { b as buildI18nForComponent } from './index-0faa8b4b.js';
+import { r as registerInstance, f as forceUpdate, h, g as getElement, c as createEvent } from './index-1f4f2f77.js';
+import { b as buildI18nForComponent } from './index-4f1356d9.js';
 import { c as calculateInputDisabledState, o as onInputDisabledStateChange } from './on-input-disabled-state-change-27395154.js';
-import { O as OnMutation } from './on-mutation-bf72b518.js';
+import { O as OnMutation } from './on-mutation-751e68e4.js';
 import { o as onRequiredChange } from './on-attribute-change-33919964.js';
 import { p as preventBrowserValidationStyling } from './prevent-browser-validation-styling-3983eb0a.js';
 import { h as hasContent, c as clearInput, g as getSlottedInput, v as validateFormIds, a as getComputedLabelPosition, d as setInputValue } from './gux-form-field.service-173b5dfc.js';
 import { s as simulateNativeEvent } from './simulate-native-event-e0631897.js';
 import { h as hasSlot } from './has-slot-f24a46a6.js';
-import { a as GuxFormFieldError, G as GuxFormFieldHelp } from './gux-form-field-error-a340fbff.js';
-import { G as GuxFormFieldLabel, a as GuxFormFieldContainer } from './gux-form-field-container-007ab28f.js';
-import { t as trackComponent } from './usage-66b031b6.js';
+import { a as GuxFormFieldError, G as GuxFormFieldHelp } from './gux-form-field-error-acb40a19.js';
+import { G as GuxFormFieldLabel, a as GuxFormFieldContainer } from './gux-form-field-container-3dd7c6ff.js';
+import { t as trackComponent } from './usage-82f4ed22.js';
 import { f as focusInputElement } from './focus-input-element-8a137b12.js';
 import { t as translationResources } from './en-25a315a0.js';
-import { O as OnClickOutside } from './on-click-outside-ae4fe543.js';
+import { O as OnClickOutside } from './on-click-outside-6c2e399b.js';
 import { b as afterNextRender } from './after-next-render-07a41f53.js';
 import './get-closest-element-728b9f18.js';
 import './random-html-id-81ac821b.js';
@@ -41,12 +41,13 @@ var __decorate$1 = (undefined && undefined.__decorate) || function (decorators,
 const GuxFormFieldNumber = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.clearable = undefined;
-        this.labelPosition = undefined;
+        /**
+         * Field indicator mark which can show *, (optional) or blank
+         * Defaults to required. When set to required, the component will display * for required fields and blank for optional
+         * When set to optional, the component will display (optional) for optional and blank for required.
+         */
         this.indicatorMark = 'required';
         this.computedLabelPosition = 'above';
-        this.disabled = undefined;
-        this.required = undefined;
         this.hasContent = false;
         this.hasError = false;
         this.hasHelp = false;
@@ -109,14 +110,14 @@ const GuxFormFieldNumber = class {
     }
     render() {
         const showClearButton = this.clearable && this.hasContent && !this.disabled;
-        return (h(GuxFormFieldContainer, { key: '77761848659dfc40e4b60582937aeba94773d078', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: 'a0d1f6ad5d325d8087abcb763f78e7b1185c6d3b', required: this.required, position: this.computedLabelPosition }, h("slot", { key: '341099b5fbc78f70e1d97f58de7516919fd8f3da', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: '275a70ffd8ca1a30908c3106e214eac5cbe13653', variant: this.indicatorMark, required: this.required }), h("slot", { key: '97f210ff1b1d05c5f305a1f69584c04554cc5a95', name: "label-info" })), h("div", { key: 'deb928d9faf220ee8f2647634fa66a7dbb7a2f01', class: "gux-input-and-error-container" }, h("div", { key: '280dcd53f717d05a60744c80f6792c9b5041d66d', class: {
+        return (h(GuxFormFieldContainer, { key: '12dc2779919b1b02ffa27892b0dd0a618fbe11a7', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: '687d9ab3416d421cef725504497650b179143827', required: this.required, position: this.computedLabelPosition }, h("slot", { key: '22a8650e52351a1fd9d55b644975f435b78e5f23', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: '42a582daaa9d37ed3abd22ca00757ff5f0b40119', variant: this.indicatorMark, required: this.required }), h("slot", { key: '31fdad12b44a87f24c8c139ba8c4aeadaf879228', name: "label-info" })), h("div", { key: '7933d9233db513e5c370b0d25fffebcae3f62d98', class: "gux-input-and-error-container" }, h("div", { key: '77ccdb3e33e3b52c6685028ff2ef5d585a5460a5', class: {
                 'gux-input': true,
                 'gux-input-error': this.hasError
-            }, part: "input-section" }, h("div", { key: '2123b69a048f35a757f4b019b0964da36519b6dd', class: {
+            }, part: "input-section" }, h("div", { key: '8d7b02afda8b8dbe83bb1397a2af6e5e3a3aa826', class: {
                 'gux-input-container': true,
                 'gux-disabled': this.disabled,
                 'gux-clear': showClearButton
-            }, onClick: () => focusInputElement(this.input) }, h("slot", { key: '503aa94021e17f90a1194bcbc76f2fea4bd80173', name: "input", onSlotchange: () => this.setInput() }), showClearButton && (h("gux-form-field-input-clear-button", { key: '1aff88a342acc535555526a9bd58bdae73e75e3e', onClick: () => clearInput(this.input) }))), this.renderStepButtons(this.input, this.getI18nValue, this.disabled)), h(GuxFormFieldError, { key: 'b4149447835189cc28bd9561c19a25f6b699dfe5', show: this.hasError }, h("slot", { key: '688ff4b6041a6b0bc7940473e256275b500ecd60', name: "error" })), h(GuxFormFieldHelp, { key: '7cdcef3b9163a5fe2d184933ba23e20bb1a527e4', show: !this.hasError && this.hasHelp }, h("slot", { key: 'd6c2efe1d3021c56e152f8120db9ee78973c0a46', name: "help" })))));
+            }, onClick: () => focusInputElement(this.input) }, h("slot", { key: '50df4de53dd69305bf3104f0f741b8236c9d62f2', name: "input", onSlotchange: () => this.setInput() }), showClearButton && (h("gux-form-field-input-clear-button", { key: '8437b6e737c34f18308195eeb60ae0eade8f5cb1', onClick: () => clearInput(this.input) }))), this.renderStepButtons(this.input, this.getI18nValue, this.disabled)), h(GuxFormFieldError, { key: 'bfefc2accf2de30da422472da670cbd5b25804dd', show: this.hasError }, h("slot", { key: '4e2bfc741b61f5e5bfe4fe8bb2f1106376c69220', name: "error" })), h(GuxFormFieldHelp, { key: '80177d9422eeb189d1a6a2b90b1bb6dfc8d824f6', show: !this.hasError && this.hasHelp }, h("slot", { key: '917ef57b398d13e25aebf5d34bb91cbcde943151', name: "help" })))));
     }
     get variant() {
         const labelPositionVariant = this.labelPosition
@@ -197,7 +198,6 @@ const GuxPaginationEllipsisButton = class {
         registerInstance(this, hostRef);
         this.goToPage = createEvent(this, "goToPage", 7);
         this.isOpen = false;
-        this.totalPages = undefined;
         this.disabled = false;
     }
     handleKeyDown(event) {
@@ -277,10 +277,10 @@ const GuxPaginationEllipsisButton = class {
     }
     render() {
         return [
-            h("gux-button", { key: '59acca64f876f72f5253cbaf0b366b85e8f1aa6c', 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() }, h("gux-icon", { key: 'beef0ccc42e1a690c860ff09c8923d0ca85fe75a', screenreaderText: this.i18n('goToPage'), "icon-name": "fa/ellipsis-regular", size: "small" })),
-            h("gux-tooltip", { key: 'ebeccbc5d2a13998175c3e8fe8547f76cb53d9ee', for: "popover-target" }, h("div", { key: 'e47e1e4c293f2658404862928005fef30e5266f8', slot: "content" }, this.i18n('goToPage'))),
-            h("gux-popover", { key: '4433372a1f7d44557e8b7f221365600eaddcf966', "is-open": this.isOpen, for: "popover-target" }, h("span", { key: '698b6cd9f09d13329df276a13c1dc0b21882c84b', slot: "title" }, this.i18n('goToPage')), h("gux-form-field-number", { key: 'a0c36be7bf1ce789a5d59a7d4d642f9bded9d952' }, h("input", { key: '383b799e507e16722ec699eb9892a26b7c4af921', 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() }), h("label", { key: 'd79fcc3617f99f64003afe653ab49d3c8f1c1a2c', slot: "label" })))
+            h("gux-button", { key: '36985a051239ecb27a5a7f8ebdd58d266311e6ae', 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() }, h("gux-icon", { key: '015dd7d23b3e45d8d526d568cf2dcfdcf0b4f285', screenreaderText: this.i18n('goToPage'), "icon-name": "fa/ellipsis-regular", size: "small" })),
+            h("gux-tooltip", { key: '31fb8d209a0a7d1359739984aeb6ec7c3ad8e48d', for: "popover-target" }, h("div", { key: '8cd090daee18ef9b221e2a31b6df147af174a996', slot: "content" }, this.i18n('goToPage'))),
+            h("gux-popover", { key: '71aa010b988fdfa78aecf6698d3fab22f1100fa5', "is-open": this.isOpen, for: "popover-target" }, h("span", { key: '3d5e610300b17f93546365df3cba7daa0fff07fb', slot: "title" }, this.i18n('goToPage')), h("gux-form-field-number", { key: 'babc6464e1d60a1ba11d924c1c23d3e678a41828' }, h("input", { key: '8785c8665e2572e9530b49ef4d5f58ba5bdd4691', 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() }), h("label", { key: '4fc1d7c66dd62cb88711eb657944f595f6e22011', slot: "label" })))
         ];
     }
     get root() { return getElement(this); }

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

@@ -1,10 +1,10 @@
-import { r as registerInstance, h, g as getElement } from './index-21889d5d.js';
-import { b as buildI18nForComponent } from './index-0faa8b4b.js';
-import { O as OnMutation } from './on-mutation-bf72b518.js';
+import { r as registerInstance, h, g as getElement } from './index-1f4f2f77.js';
+import { b as buildI18nForComponent } from './index-4f1356d9.js';
+import { O as OnMutation } from './on-mutation-751e68e4.js';
 import { a as onDisabledChange, o as onRequiredChange } from './on-attribute-change-33919964.js';
-import { t as trackComponent } from './usage-66b031b6.js';
-import { a as GuxFormFieldError, G as GuxFormFieldHelp } from './gux-form-field-error-a340fbff.js';
-import { G as GuxFormFieldVisualLabel, a as GuxFormFieldScreenreaderLabel, b as GuxFormFieldFieldsetContainer } from './gux-form-field-fieldset-container-15aeb3b3.js';
+import { t as trackComponent } from './usage-82f4ed22.js';
+import { a as GuxFormFieldError, G as GuxFormFieldHelp } from './gux-form-field-error-acb40a19.js';
+import { G as GuxFormFieldVisualLabel, a as GuxFormFieldScreenreaderLabel, b as GuxFormFieldFieldsetContainer } from './gux-form-field-fieldset-container-6cb3610f.js';
 import { h as hasSlot } from './has-slot-f24a46a6.js';
 import { g as getSlotTextContent } from './get-slot-text-content-95a85429.js';
 import { v as validateFormIds, a as getComputedLabelPosition } from './gux-form-field.service-173b5dfc.js';
@@ -34,10 +34,13 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, ta
 const GuxFormFieldPhone = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.labelPosition = undefined;
+        /**
+         * Field indicator mark which can show *, (optional) or blank
+         * Defaults to required. When set to required, the component will display * for required fields and blank for optional
+         * When set to optional, the component will display (optional) for optional and blank for required.
+         */
         this.indicatorMark = 'required';
         this.computedLabelPosition = 'above';
-        this.disabled = undefined;
         this.required = false;
         this.hasError = false;
         this.hasHelp = false;
@@ -98,14 +101,14 @@ const GuxFormFieldPhone = class {
     }
     render() {
         var _a;
-        return (h(GuxFormFieldFieldsetContainer, { key: '4b5ef6c7dabe330d233a32b89e3ac711c883f681', labelPosition: this.computedLabelPosition }, h(GuxFormFieldScreenreaderLabel, { key: 'ec4ee08f9ae45062b656a10880745816bfb52e5b' }, (_a = this.label) === null || _a === void 0 ? void 0 :
-            _a.textContent, this.renderText(this.getI18nValue('required'), this.required), this.renderText(getSlotTextContent(this.root, 'error'), this.hasError), this.renderText(getSlotTextContent(this.root, 'label-info'), this.hasLabelInfo)), h(GuxFormFieldVisualLabel, { key: 'f1af723b1531b0bb9dec2341410192ec8d388a0a', position: this.computedLabelPosition, required: this.required }, h("slot", { key: '49ddbc409cea59b430562d5b0b03a2805e3a8845', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: '55efdcefc9bd65d87028fb3f036516a1fa5aee45', variant: this.indicatorMark, required: this.required }), h("slot", { key: '85e78a0b43be24690cc131987bdc1e28d06a6ffa', name: "label-info" })), h("div", { key: '5cde3c375f165b6a09f904529027c6170e439760', class: "gux-input-and-error-container" }, h("div", { key: 'e40b9674afb15307dc17eb23327872941f35335b', class: {
+        return (h(GuxFormFieldFieldsetContainer, { key: '4cf726af903c7be3b333f632330a91f543ef6684', labelPosition: this.computedLabelPosition }, h(GuxFormFieldScreenreaderLabel, { key: '3362298599464d52a448a4ad5e73e47e0b162a48' }, (_a = this.label) === null || _a === void 0 ? void 0 :
+            _a.textContent, this.renderText(this.getI18nValue('required'), this.required), this.renderText(getSlotTextContent(this.root, 'error'), this.hasError), this.renderText(getSlotTextContent(this.root, 'label-info'), this.hasLabelInfo)), h(GuxFormFieldVisualLabel, { key: 'a53166b5171edfd9db4a9fca89f9fcab58797ee8', position: this.computedLabelPosition, required: this.required }, h("slot", { key: 'a58e3699c16daf7a302c610e443b12b207cc53fa', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: 'cb7097d5a031f680624bc2dcea9181247b1fa3c3', variant: this.indicatorMark, required: this.required }), h("slot", { key: 'a0dc10a0c043e891f226c16c88c7cb866b7c80b9', name: "label-info" })), h("div", { key: '4a5308add4085fe534b2d6bba3c61b370a29f4f1', class: "gux-input-and-error-container" }, h("div", { key: '7b325104e32aea1dc06673a0bee9a2f62c96e326', class: {
                 'gux-input': true,
                 'gux-input-error': this.hasError
-            } }, h("div", { key: '4010ea331f1d41c44a684f7b3c3a9da88e1c339c', class: {
+            } }, h("div", { key: '4878c0512fc9cae7bad1201aafac835ceb07e644', class: {
                 'gux-input-container': true,
                 'gux-disabled': this.disabled
-            } }, h("slot", { key: '90da5212f26c62d516c5d97055dbabae3a5bb8c7' }))), h(GuxFormFieldError, { key: '38b0229a49ae2ac680ce6b80e118446be9be0e58', show: this.hasError }, h("slot", { key: 'd8ee703e5d873c1047a9300641c17ad9900d8a4d', name: "error" })), h(GuxFormFieldHelp, { key: '33815959f2c346c55976465765323defcf30e3da', show: !this.hasError && this.hasHelp }, h("slot", { key: '534a4809dbbd4b4e6f1736b21d8e3307528a1557', name: "help" })))));
+            } }, h("slot", { key: '0f64e70da67a4289fb0d609defc6418e74733928' }))), h(GuxFormFieldError, { key: 'dab561c39953b59676ed2d5664dae2667c271a8d', show: this.hasError }, h("slot", { key: 'cdc5539e17a8700b0aa23b4c963c5835bde680d0', name: "error" })), h(GuxFormFieldHelp, { key: 'f2953b9d4935909b3eca68b4d8a41b9c418f6ca5', show: !this.hasError && this.hasHelp }, h("slot", { key: 'a18968d4a0106583b2f2724b4da0f5b9d3ac876d', name: "help" })))));
     }
     renderText(text, condition = false) {
         if (condition) {