genesys-spark-components 4.199.2 → 4.201.0

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

@@ -1,19 +1,19 @@
-import { r as registerInstance, f as forceUpdate, h, H as Host, a as getElement } from './index-CiOdbrOB.js';
+import { r as registerInstance, f as forceUpdate, h, H as Host, a as getElement } from './index-C1fW4ajX.js';
 import { c as calculateInputDisabledState, o as onInputDisabledStateChange } from './on-input-disabled-state-change-Cb3FOYGS.js';
-import { O as OnMutation } from './on-mutation-27bBUUXS.js';
+import { O as OnMutation } from './on-mutation-DkNnZcKZ.js';
 import { o as onRequiredChange } from './on-attribute-change-De1NnCmO.js';
 import { p as preventBrowserValidationStyling } from './prevent-browser-validation-styling-PYfNAK8p.js';
 import { h as hasSlot } from './has-slot-qzV3vtOw.js';
-import { G as GuxFormFieldError, a as GuxFormFieldHelp } from './gux-form-field-error-DkGIka65.js';
-import { a as GuxFormFieldContainer, G as GuxFormFieldLabel } from './gux-form-field-container-DgY6gSC7.js';
-import { g as getSlottedInput, v as validateFormIds, a as getComputedLabelPosition } from './gux-form-field.service-C3WKbzwR.js';
-import { t as trackComponent } from './usage-DhyuCthg.js';
-import { O as OnResize } from './on-resize-ElTdnUfE.js';
+import { G as GuxFormFieldError, a as GuxFormFieldHelp } from './gux-form-field-error-DeVGvgGb.js';
+import { a as GuxFormFieldContainer, G as GuxFormFieldLabel } from './gux-form-field-container-CskVsi_X.js';
+import { g as getSlottedInput, v as validateFormIds, a as getComputedLabelPosition } from './gux-form-field.service-Nq3AAQGS.js';
+import { t as trackComponent } from './usage-7uJ-gUB2.js';
+import { O as OnResize } from './on-resize-C6aTOc9Y.js';
 import './random-html-id-D9jKBqIb.js';
 import './log-error-DxtJDeL9.js';
 import './simulate-native-event-BMRf5pjV.js';
 
-const guxFormFieldRangeCss = ".gux-form-field-container{display:flex;flex-direction:column}.gux-form-field-container.gux-beside{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;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 0 auto;order:0;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(label){min-inline-size:0}.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[type=range]){position:absolute;inline-size:100%;block-size:var(--gse-ui-rangeSlider-bar-height);margin-block:calc(var(--gse-ui-rangeSlider-handle-height) / 2);margin-block-start:calc(-1 * (calc(var(--gse-ui-rangeSlider-handle-height) / 2) + var(--gse-ui-rangeSlider-bar-height)));margin-inline:0;-webkit-appearance:none;background:transparent}.gux-input-and-error-container{flex-grow:1}.gux-input-and-error-container.gux-hidden{display:none}.gux-input-and-error-container .gux-range-input-container{display:flex;flex-direction:row;flex-wrap:nowrap;gap:var(--gse-ui-rangeSlider-gap);place-content:stretch flex-start;align-items:center;block-size:var(--gse-ui-rangeSlider-set-height);font-size:var(--gse-ui-rangeSlider-label-text-fontSize)}.gux-input-and-error-container .gux-range-input-container.gux-disabled{opacity:var(--gse-ui-rangeSlider-disabled-opacity)}.gux-input-and-error-container .gux-range-input-container .gux-range{position:relative;flex:1 1 auto;align-self:center;order:0}.gux-input-and-error-container .gux-range-input-container .gux-range:hover .gux-range-tooltip,.gux-input-and-error-container .gux-range-input-container .gux-range:focus-within .gux-range-tooltip{visibility:visible}.gux-input-and-error-container .gux-range-input-container .gux-range .gux-track{inline-size:100%;block-size:var(--gse-ui-rangeSlider-bar-height);margin-block:6px;margin-inline:0;background:var(--gse-ui-rangeSlider-bar-default-backgroundColor);border-radius:var(--gse-ui-rangeSlider-track-borderRadius)}.gux-input-and-error-container .gux-range-input-container .gux-range .gux-track .gux-progress{block-size:var(--gse-ui-rangeSlider-bar-height);background-color:var(--gse-ui-rangeSlider-bar-selected-backgroundColor);border-radius:var(--gse-ui-rangeSlider-track-borderRadius)}.gux-input-and-error-container .gux-range-input-container .gux-display{flex:0 1 auto;align-self:auto;order:0;margin-block:0;margin-inline:var(--gux-spacing-medium) 0;font-family:var(--gse-ui-rangeSlider-label-text-fontFamily);font-size:var(--gse-ui-rangeSlider-label-text-fontSize);font-weight:var(--gse-ui-rangeSlider-label-text-fontWeight);line-height:var(--gse-ui-rangeSlider-label-text-lineHeight);text-align:end}.gux-input-and-error-container .gux-range-input-container .gux-display.gux-hidden{display:none}.gux-form-field-label.gux-beside{inset-block-start:0}";
+const guxFormFieldRangeCss = ".gux-form-field-container{display:flex;flex-direction:column}.gux-form-field-container.gux-beside{flex-direction:row}.gux-character-counter{display:grid;grid-template-rows:auto auto auto;grid-template-columns:1fr 1fr}.gux-character-counter :nth-child(1){grid-row:1/2;grid-column:2/3}.gux-character-counter :nth-child(2){grid-row:1/2;grid-column:1/2}.gux-character-counter :nth-child(3){grid-row:2/3;grid-column:1/-1}.gux-character-counter :nth-child(4){grid-row:3/4;grid-column:1/-1}.gux-character-counter.gux-beside{grid-template-columns:min-content 1fr}.gux-character-counter.gux-beside :nth-child(1){grid-row:1/2;grid-column:1/-1}.gux-character-counter.gux-beside :nth-child(2){grid-row:2/3;grid-column:1/2}.gux-character-counter.gux-beside :nth-child(3){grid-row:2/3;grid-column:2/3}.gux-character-counter.gux-beside :nth-child(4){grid-row:3/4;grid-column:1/-1}.gux-form-field-error{display:none;flex-direction:row;flex-wrap:nowrap;gap:var(--gse-ui-formControl-helper-gap);place-content:stretch flex-start;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 0 auto;order:0;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(label){min-inline-size:0}.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{display:flex;inline-size:50%;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[type=range]){position:absolute;inline-size:100%;block-size:var(--gse-ui-rangeSlider-bar-height);margin-block:calc(var(--gse-ui-rangeSlider-handle-height) / 2);margin-block-start:calc(-1 * (calc(var(--gse-ui-rangeSlider-handle-height) / 2) + var(--gse-ui-rangeSlider-bar-height)));margin-inline:0;-webkit-appearance:none;background:transparent}.gux-input-and-error-container{flex-grow:1}.gux-input-and-error-container.gux-hidden{display:none}.gux-input-and-error-container .gux-range-input-container{display:flex;flex-direction:row;flex-wrap:nowrap;gap:var(--gse-ui-rangeSlider-gap);place-content:stretch flex-start;align-items:center;block-size:var(--gse-ui-rangeSlider-set-height);font-size:var(--gse-ui-rangeSlider-label-text-fontSize)}.gux-input-and-error-container .gux-range-input-container.gux-disabled{opacity:var(--gse-ui-rangeSlider-disabled-opacity)}.gux-input-and-error-container .gux-range-input-container .gux-range{position:relative;flex:1 1 auto;align-self:center;order:0}.gux-input-and-error-container .gux-range-input-container .gux-range:hover .gux-range-tooltip,.gux-input-and-error-container .gux-range-input-container .gux-range:focus-within .gux-range-tooltip{visibility:visible}.gux-input-and-error-container .gux-range-input-container .gux-range .gux-track{inline-size:100%;block-size:var(--gse-ui-rangeSlider-bar-height);margin-block:6px;margin-inline:0;background:var(--gse-ui-rangeSlider-bar-default-backgroundColor);border-radius:var(--gse-ui-rangeSlider-track-borderRadius)}.gux-input-and-error-container .gux-range-input-container .gux-range .gux-track .gux-progress{block-size:var(--gse-ui-rangeSlider-bar-height);background-color:var(--gse-ui-rangeSlider-bar-selected-backgroundColor);border-radius:var(--gse-ui-rangeSlider-track-borderRadius)}.gux-input-and-error-container .gux-range-input-container .gux-display{flex:0 1 auto;align-self:auto;order:0;margin-block:0;margin-inline:var(--gux-spacing-medium) 0;font-family:var(--gse-ui-rangeSlider-label-text-fontFamily);font-size:var(--gse-ui-rangeSlider-label-text-fontSize);font-weight:var(--gse-ui-rangeSlider-label-text-fontWeight);line-height:var(--gse-ui-rangeSlider-label-text-lineHeight);text-align:end}.gux-input-and-error-container .gux-range-input-container .gux-display.gux-hidden{display:none}.gux-form-field-label.gux-beside{inset-block-start:0}";
 
 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;
@@ -114,9 +114,9 @@ const GuxFormFieldRange = class {
         clearInterval(this.valueWatcherId);
     }
     render() {
-        return (h(Host, { key: 'ab4702d8fbd679c42b62b92492fe520d15bb4ae1', class: {
+        return (h(Host, { key: 'a71c428b667ac9ad6f2df614b2b9d6ec1d1a0288', class: {
                 'gux-active': this.active
-            } }, h(GuxFormFieldContainer, { key: 'ed3c22c3a06e1be5d34b6db8c318f17160b56f34', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: 'c1bf9980e9061948adf39cc65341c37a836ea957', required: this.required, position: this.computedLabelPosition }, h("slot", { key: 'baf7e6ea89b65d3f35e3cc920032e47919f6f64b', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: '3945354b2582627b5df484dd56a2cc8bb7790ade', variant: this.indicatorMark, required: this.required }), h("slot", { key: 'f8ae2f6f15d3b604e4443bb0569a9fae5b50b42e', name: "label-info" })), h("div", { key: '0732d11e5ba3cc3eb0a2000fc7c28514cc5d5f29', class: "gux-input-and-error-container" }, this.renderRangeInput(), h(GuxFormFieldError, { key: '5480154884dfb0ddad58bb62b8a7ab9263ffcdbf', show: this.hasError }, h("slot", { key: '14b19b68d851790426b8c96250f390eed7bfc7a2', name: "error" })), h(GuxFormFieldHelp, { key: 'b474b4c75f3a188e989116aee10cfb9035256238', show: !this.hasError && this.hasHelp }, h("slot", { key: '0696024395cb20c3f4606b0f4b94e423b4563b68', name: "help" }))))));
+            } }, h(GuxFormFieldContainer, { key: '6923db6cae4a65bb5b96ea2d02f6bcfafdb5ac96', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: 'fc0fe9b7d185a8f762a2b176fcb7c3a045ace9bc', required: this.required, position: this.computedLabelPosition }, h("slot", { key: '8452f38889b077c24125f6e33b795bec5c3bff62', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: '8d922fdf2ac1ed388e3a3a9ba200990636ab0354', variant: this.indicatorMark, required: this.required }), h("slot", { key: 'c1231bd9c2dd2943c45bbed163955837c89dc287', name: "label-info" })), h("div", { key: '296393f95d8412f21928d87ef318aef8f66a37f4', class: "gux-input-and-error-container" }, this.renderRangeInput(), h(GuxFormFieldError, { key: '9c2fca9ebf6cafba768261686d3b8a41d48d8e2a', show: this.hasError }, h("slot", { key: '7389b4a595d9e675fc68a3756b3c4abb4cda050f', name: "error" })), h(GuxFormFieldHelp, { key: '0dfb2474aa895dd7324ea58d2425d471f66bd377', show: !this.hasError && this.hasHelp }, h("slot", { key: 'd0f1a86127a31c996982682480c3910c29c5088d', name: "help" }))))));
     }
     get variant() {
         return this.labelPosition ? this.labelPosition.toLowerCase() : 'none';

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

@@ -1,19 +1,19 @@
-import { r as registerInstance, f as forceUpdate, h, a as getElement } from './index-CiOdbrOB.js';
+import { r as registerInstance, f as forceUpdate, h, a as getElement } from './index-C1fW4ajX.js';
 import { c as calculateInputDisabledState, o as onInputDisabledStateChange } from './on-input-disabled-state-change-Cb3FOYGS.js';
-import { O as OnMutation } from './on-mutation-27bBUUXS.js';
+import { O as OnMutation } from './on-mutation-DkNnZcKZ.js';
 import { o as onRequiredChange } from './on-attribute-change-De1NnCmO.js';
 import { p as preventBrowserValidationStyling } from './prevent-browser-validation-styling-PYfNAK8p.js';
 import { h as hasSlot } from './has-slot-qzV3vtOw.js';
-import { G as GuxFormFieldError, a as GuxFormFieldHelp } from './gux-form-field-error-DkGIka65.js';
-import { G as GuxFormFieldLabel, a as GuxFormFieldContainer } from './gux-form-field-container-DgY6gSC7.js';
-import { h as hasContent, c as clearInput, g as getSlottedInput, v as validateFormIds, a as getComputedLabelPosition } from './gux-form-field.service-C3WKbzwR.js';
-import { t as trackComponent } from './usage-DhyuCthg.js';
+import { G as GuxFormFieldError, a as GuxFormFieldHelp } from './gux-form-field-error-DeVGvgGb.js';
+import { G as GuxFormFieldLabel, a as GuxFormFieldContainer } from './gux-form-field-container-CskVsi_X.js';
+import { h as hasContent, c as clearInput, g as getSlottedInput, v as validateFormIds, a as getComputedLabelPosition } from './gux-form-field.service-Nq3AAQGS.js';
+import { t as trackComponent } from './usage-7uJ-gUB2.js';
 import { f as focusInputElement } from './focus-input-element-JHLuJ8Pb.js';
 import './random-html-id-D9jKBqIb.js';
 import './log-error-DxtJDeL9.js';
 import './simulate-native-event-BMRf5pjV.js';
 
-const guxFormFieldSearchCss = ".gux-form-field-container{display:flex;flex-direction:column}.gux-form-field-container.gux-beside{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;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 0 auto;order:0;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(label){min-inline-size:0}.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%;overflow:hidden;text-overflow:ellipsis;font-family:var(--gse-ui-formControl-input-contentText-fontFamily);font-size:var(--gse-ui-formControl-input-contentText-fontSize);font-weight:var(--gse-ui-formControl-input-contentText-fontWeight);line-height:var(--gse-ui-formControl-input-contentText-lineHeight);color:var(--gse-ui-formControl-input-populatedColor);outline:none;background-color:var(--gse-ui-formControl-input-backgroundColor);border: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}.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);font-weight:var(--gse-ui-formControl-input-contentText-fontWeight);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 gux-icon[icon-name=\"fa/magnifying-glass-regular\"]{flex:0 0 auto;align-self:auto;order:0;color:var(--gse-ui-formControl-input-inputIcon-defaultColor)}.gux-input-and-error-container .gux-input .gux-input-container:focus-within{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);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)}.gux-input-and-error-container .gux-input .gux-input-container:hover:not(.gux-disabled){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-input-and-error-container .gux-input.gux-input-error .gux-input-container{border-color:var(--gse-ui-formControl-input-error-border-color)}";
+const guxFormFieldSearchCss = ".gux-form-field-container{display:flex;flex-direction:column}.gux-form-field-container.gux-beside{flex-direction:row}.gux-character-counter{display:grid;grid-template-rows:auto auto auto;grid-template-columns:1fr 1fr}.gux-character-counter :nth-child(1){grid-row:1/2;grid-column:2/3}.gux-character-counter :nth-child(2){grid-row:1/2;grid-column:1/2}.gux-character-counter :nth-child(3){grid-row:2/3;grid-column:1/-1}.gux-character-counter :nth-child(4){grid-row:3/4;grid-column:1/-1}.gux-character-counter.gux-beside{grid-template-columns:min-content 1fr}.gux-character-counter.gux-beside :nth-child(1){grid-row:1/2;grid-column:1/-1}.gux-character-counter.gux-beside :nth-child(2){grid-row:2/3;grid-column:1/2}.gux-character-counter.gux-beside :nth-child(3){grid-row:2/3;grid-column:2/3}.gux-character-counter.gux-beside :nth-child(4){grid-row:3/4;grid-column:1/-1}.gux-form-field-error{display:none;flex-direction:row;flex-wrap:nowrap;gap:var(--gse-ui-formControl-helper-gap);place-content:stretch flex-start;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 0 auto;order:0;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(label){min-inline-size:0}.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{display:flex;inline-size:50%;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%;overflow:hidden;text-overflow:ellipsis;font-family:var(--gse-ui-formControl-input-contentText-fontFamily);font-size:var(--gse-ui-formControl-input-contentText-fontSize);font-weight:var(--gse-ui-formControl-input-contentText-fontWeight);line-height:var(--gse-ui-formControl-input-contentText-lineHeight);color:var(--gse-ui-formControl-input-populatedColor);outline:none;background-color:var(--gse-ui-formControl-input-backgroundColor);border: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}.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);font-weight:var(--gse-ui-formControl-input-contentText-fontWeight);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 gux-icon[icon-name=\"fa/magnifying-glass-regular\"]{flex:0 0 auto;align-self:auto;order:0;color:var(--gse-ui-formControl-input-inputIcon-defaultColor)}.gux-input-and-error-container .gux-input .gux-input-container:focus-within{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);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)}.gux-input-and-error-container .gux-input .gux-input-container:hover:not(.gux-disabled){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-input-and-error-container .gux-input.gux-input-error .gux-input-container{border-color:var(--gse-ui-formControl-input-error-border-color)}";
 
 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;
@@ -99,13 +99,13 @@ const GuxFormFieldSearch = class {
         }
     }
     render() {
-        return (h(GuxFormFieldContainer, { key: '3cc20f3ef9b2640e7b15797965b122f9b06dea4b', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: 'f0f61cf789d1600cd34cddc21a0ae1602c13e898', required: this.required, position: this.computedLabelPosition }, h("slot", { key: '9ce422a06e603ce31416ec0c1ba81942351c3b66', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: 'c1d022f5bffc5f18d8ebb2fd3fb6d56792759e2e', variant: this.indicatorMark, required: this.required }), h("slot", { key: '7b22ef8aabaf23f47b89fd32f8db58f72b469f7e', name: "label-info" })), h("div", { key: '7fde3d3417e1d53ed3a2d23c30b49bd53f526a47', class: "gux-input-and-error-container" }, h("div", { key: '44ed53dffef4cd0bcf90f57e7d2555384fa364bc', class: {
+        return (h(GuxFormFieldContainer, { key: 'de84038be46d2a47bfc328499e30cd06df286b87', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: '061dcfab1cc8eb715f43d57329c9912d0a19f69a', required: this.required, position: this.computedLabelPosition }, h("slot", { key: 'a5bbb599ae2898f4e617140494562122af069989', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: 'fde40cddc62331b06c74617e10585e9f2670dd5b', variant: this.indicatorMark, required: this.required }), h("slot", { key: 'bd3ac05b74cfbd90f934fe9820e48eb8316c3942', name: "label-info" })), h("div", { key: '7ca74d43009a1baceacc93c5d49bc74f2c6d0d13', class: "gux-input-and-error-container" }, h("div", { key: '9121ed6866ed88fda81bdde16a76139aee9cef88', class: {
                 'gux-input': true,
                 'gux-input-error': this.hasError
-            } }, h("div", { key: '46aa44f6c7e1401b8fa671be0798ab0f4067f653', class: {
+            } }, h("div", { key: 'd51ebba09f5b81514568572757af02b747ff2efd', class: {
                 'gux-input-container': true,
                 'gux-disabled': this.disabled
-            }, onClick: () => focusInputElement(this.input) }, h("gux-icon", { key: '532298e11fcc46ffd14d8470e4877f2050954b31', "icon-name": "fa/magnifying-glass-regular", decorative: true, size: "small" }), h("slot", { key: '3ade933bcbb71001a8851f5e7aaae3944a203535', name: "input" }), this.clearable && this.hasContent && !this.disabled && (h("gux-form-field-input-clear-button", { key: 'd7e2e144e858871e88644d5d32dc66d8848595ad', onClick: () => clearInput(this.input) })))), h(GuxFormFieldError, { key: '1373603af9f884b6c4d832cc9b1337c9a3ac6af4', show: this.hasError }, h("slot", { key: 'ac0dc681cdb6fbe7ad05bacc5e223a5bff1f93c8', name: "error" })), h(GuxFormFieldHelp, { key: '17de0a427a62d9fcf55b21b023852cd0e693f673', show: !this.hasError && this.hasHelp }, h("slot", { key: '567d4ae2f8ec19b3cc5188ed2b328f92774bf957', name: "help" })))));
+            }, onClick: () => focusInputElement(this.input) }, h("gux-icon", { key: 'a5529361eb395b53de6bd35d3dfafb256538d549', "icon-name": "fa/magnifying-glass-regular", decorative: true, size: "small" }), h("slot", { key: '278bc243bba819071ab666f189856d53aa3f3acc', name: "input" }), this.clearable && this.hasContent && !this.disabled && (h("gux-form-field-input-clear-button", { key: '2204353c42274afc975a03818a16bad3923e616b', onClick: () => clearInput(this.input) })))), h(GuxFormFieldError, { key: '919554780ca3bd1dba247f1996db7b3c1b5e1fd6', show: this.hasError }, h("slot", { key: '38905caf21c202cde018aae6a133cc29abb65f19', name: "error" })), h(GuxFormFieldHelp, { key: '6ee33348ab4a5e01dcbeba62cdf60f42eed8e8c6', show: !this.hasError && this.hasHelp }, h("slot", { key: '2d97d03d7520f54659b9d9d4e206b3574febb331', name: "help" })))));
     }
     get variant() {
         const labelPositionVariant = this.labelPosition

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

@@ -1,18 +1,18 @@
-import { r as registerInstance, h, a as getElement } from './index-CiOdbrOB.js';
+import { r as registerInstance, h, a as getElement } from './index-C1fW4ajX.js';
 import { c as calculateInputDisabledState, o as onInputDisabledStateChange } from './on-input-disabled-state-change-Cb3FOYGS.js';
-import { O as OnMutation } from './on-mutation-27bBUUXS.js';
+import { O as OnMutation } from './on-mutation-DkNnZcKZ.js';
 import { o as onRequiredChange } from './on-attribute-change-De1NnCmO.js';
 import { p as preventBrowserValidationStyling } from './prevent-browser-validation-styling-PYfNAK8p.js';
 import { h as hasSlot } from './has-slot-qzV3vtOw.js';
-import { G as GuxFormFieldError, a as GuxFormFieldHelp } from './gux-form-field-error-DkGIka65.js';
-import { G as GuxFormFieldLabel, a as GuxFormFieldContainer } from './gux-form-field-container-DgY6gSC7.js';
-import { v as validateFormIds, a as getComputedLabelPosition } from './gux-form-field.service-C3WKbzwR.js';
-import { t as trackComponent } from './usage-DhyuCthg.js';
+import { G as GuxFormFieldError, a as GuxFormFieldHelp } from './gux-form-field-error-DeVGvgGb.js';
+import { G as GuxFormFieldLabel, a as GuxFormFieldContainer } from './gux-form-field-container-CskVsi_X.js';
+import { v as validateFormIds, a as getComputedLabelPosition } from './gux-form-field.service-Nq3AAQGS.js';
+import { t as trackComponent } from './usage-7uJ-gUB2.js';
 import './random-html-id-D9jKBqIb.js';
 import './log-error-DxtJDeL9.js';
 import './simulate-native-event-BMRf5pjV.js';
 
-const guxFormFieldSelectCss = ".gux-form-field-container{display:flex;flex-direction:column}.gux-form-field-container.gux-beside{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;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 0 auto;order:0;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(label){min-inline-size:0}.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(select){flex:1 1 auto;align-self:auto;order:0;inline-size:100%;block-size:var(--gse-ui-formControl-input-textfield-height);padding-inline:var(--gse-ui-formControl-input-gap) calc(var(--gse-ui-formControl-input-gap) * 2 + var(--gse-ui-formControl-input-inputIcon-size));overflow:hidden;text-overflow:ellipsis;color:var(--gse-ui-formControl-input-populatedColor);white-space:nowrap;-moz-appearance:none;-webkit-appearance:none;appearance:none;outline:none;background-color:var(--gse-ui-formControl-input-backgroundColor);border:none;border-radius:var(--gse-ui-formControl-input-borderRadius)}::slotted(select)::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 .gux-input-container{position:relative;box-sizing:border-box;display:flex;flex-direction:row;flex-wrap:nowrap;gap:var(--gse-ui-formControl-input-gap);place-content:stretch center;align-items:center;inline-size:100%;font-family:var(--gse-ui-formControl-input-contentText-fontFamily);font-size:var(--gse-ui-formControl-input-contentText-fontSize);font-weight:var(--gse-ui-formControl-input-contentText-fontWeight);line-height:var(--gse-ui-formControl-input-contentText-lineHeight);color:var(--gse-ui-formControl-input-populatedColor);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{pointer-events:none;opacity:var(--gse-ui-formControl-input-disabled-opacity)}.gux-input-and-error-container .gux-input .gux-input-container:hover gux-icon{color:var(--gse-ui-formControl-input-inputIcon-iconEndColor)}.gux-input-and-error-container .gux-input .gux-input-container gux-icon{position:absolute;inset-block-start:0;inset-inline-end:0;margin:var(--gse-ui-formControl-input-padding);pointer-events:none}.gux-input-and-error-container .gux-input .gux-input-container:focus-within{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);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)}.gux-input-and-error-container .gux-input.gux-input-error .gux-input-container{border-color:var(--gse-ui-formControl-input-error-border-color)}";
+const guxFormFieldSelectCss = ".gux-form-field-container{display:flex;flex-direction:column}.gux-form-field-container.gux-beside{flex-direction:row}.gux-character-counter{display:grid;grid-template-rows:auto auto auto;grid-template-columns:1fr 1fr}.gux-character-counter :nth-child(1){grid-row:1/2;grid-column:2/3}.gux-character-counter :nth-child(2){grid-row:1/2;grid-column:1/2}.gux-character-counter :nth-child(3){grid-row:2/3;grid-column:1/-1}.gux-character-counter :nth-child(4){grid-row:3/4;grid-column:1/-1}.gux-character-counter.gux-beside{grid-template-columns:min-content 1fr}.gux-character-counter.gux-beside :nth-child(1){grid-row:1/2;grid-column:1/-1}.gux-character-counter.gux-beside :nth-child(2){grid-row:2/3;grid-column:1/2}.gux-character-counter.gux-beside :nth-child(3){grid-row:2/3;grid-column:2/3}.gux-character-counter.gux-beside :nth-child(4){grid-row:3/4;grid-column:1/-1}.gux-form-field-error{display:none;flex-direction:row;flex-wrap:nowrap;gap:var(--gse-ui-formControl-helper-gap);place-content:stretch flex-start;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 0 auto;order:0;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(label){min-inline-size:0}.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{display:flex;inline-size:50%;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(select){flex:1 1 auto;align-self:auto;order:0;inline-size:100%;block-size:var(--gse-ui-formControl-input-textfield-height);padding-inline:var(--gse-ui-formControl-input-gap) calc(var(--gse-ui-formControl-input-gap) * 2 + var(--gse-ui-formControl-input-inputIcon-size));overflow:hidden;text-overflow:ellipsis;color:var(--gse-ui-formControl-input-populatedColor);white-space:nowrap;-moz-appearance:none;-webkit-appearance:none;appearance:none;outline:none;background-color:var(--gse-ui-formControl-input-backgroundColor);border:none;border-radius:var(--gse-ui-formControl-input-borderRadius)}::slotted(select)::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 .gux-input-container{position:relative;box-sizing:border-box;display:flex;flex-direction:row;flex-wrap:nowrap;gap:var(--gse-ui-formControl-input-gap);place-content:stretch center;align-items:center;inline-size:100%;font-family:var(--gse-ui-formControl-input-contentText-fontFamily);font-size:var(--gse-ui-formControl-input-contentText-fontSize);font-weight:var(--gse-ui-formControl-input-contentText-fontWeight);line-height:var(--gse-ui-formControl-input-contentText-lineHeight);color:var(--gse-ui-formControl-input-populatedColor);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{pointer-events:none;opacity:var(--gse-ui-formControl-input-disabled-opacity)}.gux-input-and-error-container .gux-input .gux-input-container:hover gux-icon{color:var(--gse-ui-formControl-input-inputIcon-iconEndColor)}.gux-input-and-error-container .gux-input .gux-input-container gux-icon{position:absolute;inset-block-start:0;inset-inline-end:0;margin:var(--gse-ui-formControl-input-padding);pointer-events:none}.gux-input-and-error-container .gux-input .gux-input-container:focus-within{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);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)}.gux-input-and-error-container .gux-input.gux-input-error .gux-input-container{border-color:var(--gse-ui-formControl-input-error-border-color)}";
 
 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;
@@ -89,13 +89,13 @@ const GuxFormFieldSelect = class {
         }
     }
     render() {
-        return (h(GuxFormFieldContainer, { key: '3402ab1b309475e280788aeddc1655d6c98bbb0f', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: 'd1c6f668fcd33c262ee379108fac64805a566709', required: this.required, position: this.computedLabelPosition }, h("slot", { key: 'f5777b301b592514ad90603dc9bb99408abf0394', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: '32ba4ab2cef8afbf106f361be16f5199230cb36d', variant: this.indicatorMark, required: this.required }), h("slot", { key: '532c771fd2061b1dd558f3dd37894035b8ce46da', name: "label-info" })), h("div", { key: 'b965ec78affd82385648fd7bc0a630e2db006ba4', class: "gux-input-and-error-container" }, h("div", { key: '356e7f24566c455a858d1817030af36547ff4233', class: {
+        return (h(GuxFormFieldContainer, { key: '886cd27efcaae0589043616acec990874bb22075', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: '473f10d508393bc87e866c7c619c3d078dcb64d9', required: this.required, position: this.computedLabelPosition }, h("slot", { key: 'fc91a75d620f860e9a097784c26ced9cd2ed9b62', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: 'f69dc6e5c564b9627a892b2e6e043bfe20945fbc', variant: this.indicatorMark, required: this.required }), h("slot", { key: 'e340f3d885ff95f3410a3cd00fdcb5c7d677b9eb', name: "label-info" })), h("div", { key: '658e325c58e4c96777a345378829a39cfe57a483', class: "gux-input-and-error-container" }, h("div", { key: '24c193506d7440d76a917360b81d68c491157772', class: {
                 'gux-input': true,
                 'gux-input-error': this.hasError
-            } }, h("div", { key: '664f0dfb99da5793c7ff9e280c04b1bc890b7a6f', class: {
+            } }, h("div", { key: 'b34e82cd56cc9ce53bcc11554d8e0fd931f3ac5e', class: {
                 'gux-input-container': true,
                 'gux-disabled': this.disabled
-            } }, h("slot", { key: '040b99334fad644a71b1a3aeb1091c52d7b7b6d5', name: "input" }), h("gux-icon", { key: '8dae3067bd9c40566e6cf6be9f8a90da68424f3c', "icon-name": "custom/chevron-down-small-regular", decorative: true, size: "small" }))), h(GuxFormFieldError, { key: '6a6050352d4b9334a7a6e7c96e0669de7662f512', show: this.hasError }, h("slot", { key: '416f7e2f55c07d2a5e75d6af96f92de1c0112820', name: "error" })), h(GuxFormFieldHelp, { key: 'e687dd057a1ed398eb1cbb1ca1ebb134f7815d99', show: !this.hasError && this.hasHelp }, h("slot", { key: '010dc853ef4c78f12be27d066989374101f35616', name: "help" })))));
+            } }, h("slot", { key: '10cf79ec0e6442f80a9d5f0655014d1658227a0f', name: "input" }), h("gux-icon", { key: '417232a40fbc65634a59e4032d5243e44599d380', "icon-name": "custom/chevron-down-small-regular", decorative: true, size: "small" }))), h(GuxFormFieldError, { key: '30b923cceac5137cdcb22969ba0a5d0da2754cd3', show: this.hasError }, h("slot", { key: 'a5fb45bc8d78f070f5d36387a614e9ba4539daea', name: "error" })), h(GuxFormFieldHelp, { key: 'd3fcd1959b234cedf1cf7dafad94ad3c7e5d8f43', show: !this.hasError && this.hasHelp }, h("slot", { key: 'ac5f49fb23115f75ec50d9d093426bb1e388f075', name: "help" })))));
     }
     get variant() {
         const labelPositionVariant = this.labelPosition

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

@@ -1,19 +1,39 @@
-import { r as registerInstance, f as forceUpdate, h, a as getElement } from './index-CiOdbrOB.js';
+import { h, r as registerInstance, c as createEvent, f as forceUpdate, a as getElement } from './index-C1fW4ajX.js';
 import { c as calculateInputDisabledState, o as onInputDisabledStateChange } from './on-input-disabled-state-change-Cb3FOYGS.js';
-import { O as OnMutation } from './on-mutation-27bBUUXS.js';
+import { O as OnMutation } from './on-mutation-DkNnZcKZ.js';
 import { o as onRequiredChange } from './on-attribute-change-De1NnCmO.js';
 import { p as preventBrowserValidationStyling } from './prevent-browser-validation-styling-PYfNAK8p.js';
 import { h as hasSlot } from './has-slot-qzV3vtOw.js';
-import { G as GuxFormFieldError, a as GuxFormFieldHelp } from './gux-form-field-error-DkGIka65.js';
-import { G as GuxFormFieldLabel, a as GuxFormFieldContainer } from './gux-form-field-container-DgY6gSC7.js';
-import { h as hasContent, s as setSlotAriaDescribedby, c as clearInput, g as getSlottedInput, v as validateFormIds, a as getComputedLabelPosition } from './gux-form-field.service-C3WKbzwR.js';
-import { t as trackComponent } from './usage-DhyuCthg.js';
+import { G as GuxFormFieldError, a as GuxFormFieldHelp } from './gux-form-field-error-DeVGvgGb.js';
+import { G as GuxFormFieldLabel, a as GuxFormFieldContainer } from './gux-form-field-container-CskVsi_X.js';
+import { h as hasContent, s as setSlotAriaDescribedby, d as setCharacterCountAriaDescribedBy, c as clearInput, g as getSlottedInput, v as validateFormIds, a as getComputedLabelPosition } from './gux-form-field.service-Nq3AAQGS.js';
+import { t as trackComponent } from './usage-7uJ-gUB2.js';
 import { f as focusInputElement } from './focus-input-element-JHLuJ8Pb.js';
+import { b as buildI18nForComponent } from './index-Cq0qTC7D.js';
 import './random-html-id-D9jKBqIb.js';
 import './log-error-DxtJDeL9.js';
 import './simulate-native-event-BMRf5pjV.js';
+import './get-closest-element-Cd4R0amv.js';
 
-const guxFormFieldTextLikeCss = ".gux-form-field-container{display:flex;flex-direction:column}.gux-form-field-container.gux-beside{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;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 0 auto;order:0;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(label){min-inline-size:0}.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%;overflow:hidden;text-overflow:ellipsis;font-family:var(--gse-ui-formControl-input-contentText-fontFamily);font-size:var(--gse-ui-formControl-input-contentText-fontSize);font-weight:var(--gse-ui-formControl-input-contentText-fontWeight);line-height:var(--gse-ui-formControl-input-contentText-lineHeight);color:var(--gse-ui-formControl-input-populatedColor);outline:none;background-color:var(--gse-ui-formControl-input-backgroundColor);border:none}::slotted(input)::placeholder{color:var(--gse-ui-formControl-input-placeholderColor);opacity:1}slot[name=prefix],slot[name=suffix]{font-family:var(--gse-ui-formControl-input-prefixSufix-text-fontFamily);font-size:var(--gse-ui-formControl-input-prefixSufix-text-fontSize);line-height:var(--gse-ui-formControl-input-prefixSufix-text-lineHeight);color:var(--gse-ui-formControl-input-prefixSufix-defaultColor);text-align:center;white-space:nowrap;text-decoration:none}.gux-input-and-error-container{flex-grow:1}.gux-input-and-error-container .gux-input .gux-input-container{box-sizing:border-box;display:flex;flex-direction:row;flex-wrap:nowrap;gap:var(--gse-ui-formControl-input-gap);place-content:stretch center;align-items:center;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);font-weight:var(--gse-ui-formControl-input-contentText-fontWeight);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-has-suffix:not(.gux-input-and-error-container .gux-input .gux-input-container.gux-has-prefix) ::slotted(input){text-align:end}.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{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);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)}.gux-input-and-error-container .gux-input .gux-input-container:hover:not(.gux-disabled){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-input-and-error-container .gux-input.gux-input-error .gux-input-container{border-color:var(--gse-ui-formControl-input-error-border-color)}";
+const GuxFormFieldCharacterCount = ({ characterLimit, characterCount, labelPosition, i18n }) => {
+    return (h("div", { class: {
+            'gux-form-field-character-count': true,
+            'gux-label-above': labelPosition === 'above',
+            'gux-exceeded': characterCount > characterLimit
+        }, "data-testid": "gux-form-field-character-count" },
+        h("span", { "aria-hidden": "true", "data-testid": "gux-form-field-character-count-display" }, characterCount + '/' + characterLimit),
+        h("gux-screen-reader-beta", { "aria-live": "polite" }, i18n('charactersRemaining', {
+            characterCount: characterCount,
+            characterLimit: characterLimit
+        }))));
+};
+
+const charactersRemaining = "{characterCount, number} of {characterLimit, number} characters remaining";
+var translationResources = {
+	charactersRemaining: charactersRemaining
+};
+
+const guxFormFieldTextLikeCss = ".gux-form-field-container{display:flex;flex-direction:column}.gux-form-field-container.gux-beside{flex-direction:row}.gux-character-counter{display:grid;grid-template-rows:auto auto auto;grid-template-columns:1fr 1fr}.gux-character-counter :nth-child(1){grid-row:1/2;grid-column:2/3}.gux-character-counter :nth-child(2){grid-row:1/2;grid-column:1/2}.gux-character-counter :nth-child(3){grid-row:2/3;grid-column:1/-1}.gux-character-counter :nth-child(4){grid-row:3/4;grid-column:1/-1}.gux-character-counter.gux-beside{grid-template-columns:min-content 1fr}.gux-character-counter.gux-beside :nth-child(1){grid-row:1/2;grid-column:1/-1}.gux-character-counter.gux-beside :nth-child(2){grid-row:2/3;grid-column:1/2}.gux-character-counter.gux-beside :nth-child(3){grid-row:2/3;grid-column:2/3}.gux-character-counter.gux-beside :nth-child(4){grid-row:3/4;grid-column:1/-1}.gux-form-field-error{display:none;flex-direction:row;flex-wrap:nowrap;gap:var(--gse-ui-formControl-helper-gap);place-content:stretch flex-start;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 0 auto;order:0;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(label){min-inline-size:0}.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{display:flex;inline-size:50%;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}.gux-form-field-character-count{display:flex;justify-content:flex-end;padding-block-end:var(--gse-ui-formControl-formField-gap);font-family:var(--gse-ui-formControl-helper-helperText-fontFamily);font-size:var(--gse-ui-formControl-helper-helperText-fontSize);font-weight:var(--gse-ui-formControl-helper-helperText-fontWeight);line-height:var(--gse-ui-formControl-helper-helperText-lineHeight);color:var(--gse-ui-formControl-helper-defaultColor)}.gux-form-field-character-count.gux-exceeded{color:var(--gse-ui-formControl-helper-errorColor)}: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%;overflow:hidden;text-overflow:ellipsis;font-family:var(--gse-ui-formControl-input-contentText-fontFamily);font-size:var(--gse-ui-formControl-input-contentText-fontSize);font-weight:var(--gse-ui-formControl-input-contentText-fontWeight);line-height:var(--gse-ui-formControl-input-contentText-lineHeight);color:var(--gse-ui-formControl-input-populatedColor);outline:none;background-color:var(--gse-ui-formControl-input-backgroundColor);border:none}::slotted(input)::placeholder{color:var(--gse-ui-formControl-input-placeholderColor);opacity:1}slot[name=prefix],slot[name=suffix]{font-family:var(--gse-ui-formControl-input-prefixSufix-text-fontFamily);font-size:var(--gse-ui-formControl-input-prefixSufix-text-fontSize);line-height:var(--gse-ui-formControl-input-prefixSufix-text-lineHeight);color:var(--gse-ui-formControl-input-prefixSufix-defaultColor);text-align:center;white-space:nowrap;text-decoration:none}.gux-input-and-error-container{flex-grow:1}.gux-input-and-error-container .gux-input .gux-input-container{box-sizing:border-box;display:flex;flex-direction:row;flex-wrap:nowrap;gap:var(--gse-ui-formControl-input-gap);place-content:stretch center;align-items:center;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);font-weight:var(--gse-ui-formControl-input-contentText-fontWeight);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-has-suffix:not(.gux-input-and-error-container .gux-input .gux-input-container.gux-has-prefix) ::slotted(input){text-align:end}.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{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);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)}.gux-input-and-error-container .gux-input .gux-input-container:hover:not(.gux-disabled){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-input-and-error-container .gux-input.gux-input-error .gux-input-container{border-color:var(--gse-ui-formControl-input-error-border-color)}";
 
 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;
@@ -28,6 +48,7 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, ta
 const GuxFormFieldTextLike = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        this.characterLimitChange = createEvent(this, "characterLimitChange", 7);
         this.loading = false;
         /**
          * Field indicator mark which can show *, (optional) or blank
@@ -35,10 +56,15 @@ const GuxFormFieldTextLike = class {
          * When set to optional, the component will display (optional) for optional and blank for required.
          */
         this.indicatorMark = 'required';
+        /**
+         * The characterLimit property defines the max character limit for the input.
+         */
+        this.characterLimit = 0;
         this.computedLabelPosition = 'above';
         this.hasContent = false;
         this.hasError = false;
         this.hasHelp = false;
+        this.charactersExceeding = false;
     }
     onMutation() {
         this.labelInfo = this.root.querySelector('[slot=label-info]');
@@ -82,12 +108,15 @@ const GuxFormFieldTextLike = class {
         this.hasHelp = hasSlot(this.root, 'help');
         forceUpdate(this.root);
     }
+    get characterCount() {
+        return this.input.value.length;
+    }
     renderRadialLoading() {
         if (this.loading) {
             return (h("div", { role: "status" }, h("gux-radial-loading", { context: "input" })));
         }
     }
-    componentWillLoad() {
+    async componentWillLoad() {
         this.setInput();
         this.setLabel();
         this.labelInfo = this.root.querySelector('[slot=label-info]');
@@ -101,6 +130,11 @@ const GuxFormFieldTextLike = class {
         if (this.hasSuffix) {
             setSlotAriaDescribedby(this.root, this.input, 'suffix');
         }
+        if (this.characterLimit > 0) {
+            setCharacterCountAriaDescribedBy(this.root, this.input);
+        }
+        this.checkCharacterLimitExceeded();
+        this.i18n = await buildI18nForComponent(this.root, translationResources);
         trackComponent(this.root, { variant: this.variant });
     }
     disconnectedCallback() {
@@ -111,16 +145,21 @@ const GuxFormFieldTextLike = class {
             this.requiredObserver.disconnect();
         }
     }
+    renderCharacterCount() {
+        if (this.characterLimit > 0) {
+            return (h(GuxFormFieldCharacterCount, { i18n: this.i18n, characterCount: this.characterCount, characterLimit: this.characterLimit, labelPosition: this.computedLabelPosition }));
+        }
+    }
     render() {
-        return (h(GuxFormFieldContainer, { key: '9bfc30b8843eb183867a476354293e9bc9921e82', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: 'a3d0c387d0c3f0cc855b358004af9cac17dbe524', required: this.required, position: this.computedLabelPosition }, h("slot", { key: '1f9e53a84a931b6b970edf0f83ae00f01b67f27d', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: '5e331521e6e947c80c0cd67ce364774fe63e136e', variant: this.indicatorMark, required: this.required }), h("slot", { key: '90ba86260175ae34c5da2a3c28eb56e95dc83c70', name: "label-info" })), h("div", { key: '571f7ad84e3daa205c311e5c46cb4e1ac2aa06ad', class: "gux-input-and-error-container" }, h("div", { key: '1ba0aa3aa2b23ff3ec0d7cad06ff4854049e9728', class: {
+        return (h(GuxFormFieldContainer, { key: '7289f2fa5ee5d17a266236ef3aec2144f4f2b0ae', labelPosition: this.computedLabelPosition, characterLimit: this.characterLimit }, this.renderCharacterCount(), h(GuxFormFieldLabel, { key: '5b1d5cde497e5fa9cda42159c2c99468cdcd6a91', required: this.required, position: this.computedLabelPosition }, h("slot", { key: '028716c2f3e6a9944bc7783f55ced185c1f02d45', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: 'f6a5ef8f8ab01c3b97ec1a137e5ab4b769b99182', variant: this.indicatorMark, required: this.required }), h("slot", { key: '762b27415783c9ce197ff81bfbb5f718047e95f4', name: "label-info" })), h("div", { key: '8d4b43018b24ff170507026e46b192c068465cc4', class: "gux-input-and-error-container" }, h("div", { key: '637626703dbbf80cc918a6e254e1b7cfa206f247', class: {
                 'gux-input': true,
-                'gux-input-error': this.hasError
-            } }, h("div", { key: 'c7425d80c410708dd2b34118e9fb9e6226051e03', class: {
+                'gux-input-error': this.hasError || this.charactersExceeding
+            } }, h("div", { key: 'aa17af854f2789d346d6ec7c2dad813a19e4a6bc', class: {
                 'gux-input-container': true,
                 'gux-disabled': this.disabled,
                 'gux-has-prefix': this.hasPrefix,
                 'gux-has-suffix': this.hasSuffix
-            }, onClick: () => focusInputElement(this.input) }, h("slot", { key: 'e8aa16a816ea9a27fc5ad7bfd9476ebe4ed19660', name: "prefix" }), h("slot", { key: '0b95bdb5aa1b8cbd31a6bc547b9c66f0ac5af156', name: "input" }), this.renderRadialLoading(), h("slot", { key: '9d13b92dcdcd8c4ef2735f262a3d5769c186242a', name: "suffix" }), this.clearable && this.hasContent && !this.disabled && (h("gux-form-field-input-clear-button", { key: 'cde944bf5ba83096a41877937f13204e4aef00a8', onClick: () => clearInput(this.input) })))), h(GuxFormFieldError, { key: 'b4d7cf6c07ffc120d0e74a49c4afcd6fdcfc7a0a', show: this.hasError }, h("slot", { key: 'e2ee4593c6d00882409c531761733087fae0664a', name: "error" })), h(GuxFormFieldHelp, { key: 'bd8fccfbd3606b2bf8f4e4671c1b9d7f4b329ca5', show: !this.hasError && this.hasHelp }, h("slot", { key: '887dfb1fafe8c52067ef181bf13e06e7195afdcf', name: "help" })))));
+            }, onClick: () => focusInputElement(this.input) }, h("slot", { key: 'd2f3d1cc26a724ca9579fa4b8ea0ab174c6e6a5c', name: "prefix" }), h("slot", { key: '7830b592bc68fd010896c817366f61698c68ad32', name: "input" }), this.renderRadialLoading(), h("slot", { key: 'a108aa1b48180b435fc3060dcc868c86fa199d26', name: "suffix" }), this.clearable && this.hasContent && !this.disabled && (h("gux-form-field-input-clear-button", { key: '0ac5664077476b3233d43aa0a21730683a8ff532', onClick: () => clearInput(this.input) })))), h(GuxFormFieldError, { key: 'b82173f426a333b5da96f563aa7e3d4a77c7e74e', show: this.hasError }, h("slot", { key: '3e30fd1588df1ad0a664ddd5b51176068e5fe27d', name: "error" })), h(GuxFormFieldHelp, { key: '1b7dbc734d98cf6c14f3bbaa4dfc9141111305b9', show: !this.hasError && this.hasHelp }, h("slot", { key: 'e759dee9387087d2c2cc8a610ba942bdac65af67', name: "help" })))));
     }
     get variant() {
         const labelPositionVariant = this.labelPosition
@@ -130,12 +169,32 @@ const GuxFormFieldTextLike = class {
         const clearableVariant = this.clearable ? 'clearable' : 'unclearable';
         return `${typeVariant}-${clearableVariant}-${labelPositionVariant}`;
     }
+    checkCharacterLimitExceeded() {
+        if (this.characterLimit <= 0) {
+            return;
+        }
+        const isExceeding = this.characterCount > this.characterLimit;
+        // Checking if exceeding state has changes since last checking.
+        if (isExceeding !== this.charactersExceeding) {
+            if (isExceeding) {
+                this.input.setAttribute('aria-invalid', 'true');
+                this.characterLimitChange.emit(isExceeding);
+            }
+            else {
+                this.input.removeAttribute('aria-invalid');
+                this.characterLimitChange.emit(isExceeding);
+            }
+            this.charactersExceeding = isExceeding;
+        }
+    }
     setInput() {
         this.input = getSlottedInput(this.root, 'input[type="email"][slot="input"], input[type="number"][slot="input"], input[type="password"][slot="input"], input[type="text"][slot="input"]');
         this.hasContent = hasContent(this.input);
         preventBrowserValidationStyling(this.input);
         this.input.addEventListener('input', () => {
             this.hasContent = hasContent(this.input);
+            this.checkCharacterLimitExceeded();
+            forceUpdate(this.root);
         });
         this.disabled = calculateInputDisabledState(this.input);
         this.required = this.input.required;

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

@@ -1,18 +1,18 @@
-import { r as registerInstance, h, a as getElement } from './index-CiOdbrOB.js';
+import { r as registerInstance, h, a as getElement } from './index-C1fW4ajX.js';
 import { c as calculateInputDisabledState, o as onInputDisabledStateChange } from './on-input-disabled-state-change-Cb3FOYGS.js';
-import { O as OnMutation } from './on-mutation-27bBUUXS.js';
+import { O as OnMutation } from './on-mutation-DkNnZcKZ.js';
 import { o as onRequiredChange } from './on-attribute-change-De1NnCmO.js';
 import { p as preventBrowserValidationStyling } from './prevent-browser-validation-styling-PYfNAK8p.js';
 import { h as hasSlot } from './has-slot-qzV3vtOw.js';
-import { G as GuxFormFieldError, a as GuxFormFieldHelp } from './gux-form-field-error-DkGIka65.js';
-import { G as GuxFormFieldLabel, a as GuxFormFieldContainer } from './gux-form-field-container-DgY6gSC7.js';
-import { v as validateFormIds, a as getComputedLabelPosition } from './gux-form-field.service-C3WKbzwR.js';
-import { t as trackComponent } from './usage-DhyuCthg.js';
+import { G as GuxFormFieldError, a as GuxFormFieldHelp } from './gux-form-field-error-DeVGvgGb.js';
+import { G as GuxFormFieldLabel, a as GuxFormFieldContainer } from './gux-form-field-container-CskVsi_X.js';
+import { v as validateFormIds, a as getComputedLabelPosition } from './gux-form-field.service-Nq3AAQGS.js';
+import { t as trackComponent } from './usage-7uJ-gUB2.js';
 import './random-html-id-D9jKBqIb.js';
 import './log-error-DxtJDeL9.js';
 import './simulate-native-event-BMRf5pjV.js';
 
-const guxFormFieldTextareaCss = ".gux-form-field-container{display:flex;flex-direction:column}.gux-form-field-container.gux-beside{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;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 0 auto;order:0;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(label){min-inline-size:0}.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(textarea){flex:1 1 auto;align-self:auto;order:0;font-family:inherit;font-family:var(--gse-ui-formControl-input-contentText-fontFamily);font-size:var(--gse-ui-formControl-input-contentText-fontSize);font-weight:var(--gse-ui-formControl-input-contentText-fontWeight);line-height:var(--gse-ui-formControl-input-contentText-lineHeight);color:var(--gse-ui-formControl-input-populatedColor);resize:vertical;outline:none;background-color:var(--gse-ui-formControl-input-backgroundColor);background-image:none;border:none;border-radius:var(--gse-ui-formControl-input-borderRadius);padding:var(--gse-ui-formControl-textarea-padding);margin:0}::slotted(textarea)::placeholder{color:var(--gse-ui-formControl-input-placeholderColor);opacity:1}::slotted(textarea)[disabled]{opacity:var(--gse-ui-formControl-input-disabled-opacity)}.gux-input-and-error-container{flex-grow:1}.gux-input-and-error-container .gux-input{position:relative;display:flex;outline: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:focus-within{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);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)}.gux-input-and-error-container .gux-input:hover:not(.gux-disabled){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-input-and-error-container .gux-input.gux-input-error{border-color:var(--gse-ui-formControl-input-error-border-color)}.gux-input-and-error-container .gux-input.gux-disabled{opacity:var(--gse-ui-formControl-input-disabled-opacity)}.gux-input-and-error-container .gux-input.gux-resize-none ::slotted(textarea){resize:none}.gux-input-and-error-container .gux-input.gux-resize-auto{display:grid;overflow:hidden;word-break:normal;word-break:break-word;overflow-wrap:anywhere}.gux-input-and-error-container .gux-input.gux-resize-auto::after{visibility:hidden;grid-row-start:1;grid-row-end:2;grid-column-start:1;grid-column-end:2;white-space:pre-wrap;content:attr(data-replicated-value) \" \";padding:var(--gse-ui-formControl-textarea-padding);margin:0}.gux-input-and-error-container .gux-input.gux-resize-auto ::slotted(textarea){grid-row-start:1;grid-row-end:2;grid-column-start:1;grid-column-end:2;overflow-x:hidden;resize:none}";
+const guxFormFieldTextareaCss = ".gux-form-field-container{display:flex;flex-direction:column}.gux-form-field-container.gux-beside{flex-direction:row}.gux-character-counter{display:grid;grid-template-rows:auto auto auto;grid-template-columns:1fr 1fr}.gux-character-counter :nth-child(1){grid-row:1/2;grid-column:2/3}.gux-character-counter :nth-child(2){grid-row:1/2;grid-column:1/2}.gux-character-counter :nth-child(3){grid-row:2/3;grid-column:1/-1}.gux-character-counter :nth-child(4){grid-row:3/4;grid-column:1/-1}.gux-character-counter.gux-beside{grid-template-columns:min-content 1fr}.gux-character-counter.gux-beside :nth-child(1){grid-row:1/2;grid-column:1/-1}.gux-character-counter.gux-beside :nth-child(2){grid-row:2/3;grid-column:1/2}.gux-character-counter.gux-beside :nth-child(3){grid-row:2/3;grid-column:2/3}.gux-character-counter.gux-beside :nth-child(4){grid-row:3/4;grid-column:1/-1}.gux-form-field-error{display:none;flex-direction:row;flex-wrap:nowrap;gap:var(--gse-ui-formControl-helper-gap);place-content:stretch flex-start;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 0 auto;order:0;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(label){min-inline-size:0}.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{display:flex;inline-size:50%;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(textarea){flex:1 1 auto;align-self:auto;order:0;font-family:inherit;font-family:var(--gse-ui-formControl-input-contentText-fontFamily);font-size:var(--gse-ui-formControl-input-contentText-fontSize);font-weight:var(--gse-ui-formControl-input-contentText-fontWeight);line-height:var(--gse-ui-formControl-input-contentText-lineHeight);color:var(--gse-ui-formControl-input-populatedColor);resize:vertical;outline:none;background-color:var(--gse-ui-formControl-input-backgroundColor);background-image:none;border:none;border-radius:var(--gse-ui-formControl-input-borderRadius);padding:var(--gse-ui-formControl-textarea-padding);margin:0}::slotted(textarea)::placeholder{color:var(--gse-ui-formControl-input-placeholderColor);opacity:1}::slotted(textarea)[disabled]{opacity:var(--gse-ui-formControl-input-disabled-opacity)}.gux-input-and-error-container{flex-grow:1}.gux-input-and-error-container .gux-input{position:relative;display:flex;outline: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:focus-within{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);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)}.gux-input-and-error-container .gux-input:hover:not(.gux-disabled){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-input-and-error-container .gux-input.gux-input-error{border-color:var(--gse-ui-formControl-input-error-border-color)}.gux-input-and-error-container .gux-input.gux-disabled{opacity:var(--gse-ui-formControl-input-disabled-opacity)}.gux-input-and-error-container .gux-input.gux-resize-none ::slotted(textarea){resize:none}.gux-input-and-error-container .gux-input.gux-resize-auto{display:grid;overflow:hidden;word-break:normal;word-break:break-word;overflow-wrap:anywhere}.gux-input-and-error-container .gux-input.gux-resize-auto::after{visibility:hidden;grid-row-start:1;grid-row-end:2;grid-column-start:1;grid-column-end:2;white-space:pre-wrap;content:attr(data-replicated-value) \" \";padding:var(--gse-ui-formControl-textarea-padding);margin:0}.gux-input-and-error-container .gux-input.gux-resize-auto ::slotted(textarea){grid-row-start:1;grid-row-end:2;grid-column-start:1;grid-column-end:2;overflow-x:hidden;resize:none}";
 
 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;
@@ -93,12 +93,12 @@ const GuxFormFieldTextarea = class {
         }
     }
     render() {
-        return (h(GuxFormFieldContainer, { key: '4b1f3a3849b6531be680a2e92a78dba1d0f84140', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: 'a0e84d7b02eb4f05147118adeea7f01ff579af64', required: this.required, position: this.computedLabelPosition }, h("slot", { key: '0ee1e048db694ebf27f192afef5541f112cefd50', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: '11451983bdf4ea3996e2a1f78c6c52e5b1cdd0f6', variant: this.indicatorMark, required: this.required }), h("slot", { key: '66c180e6fd82c8cecb91efb110540dcf87469b6a', name: "label-info" })), h("div", { key: '843388f86d120a49e9e350dc3beb1bc5b2b7f67a', class: "gux-input-and-error-container" }, h("div", { key: '754b49d553cfba9f480eae90b023e4abf4cecd1a', ref: el => (this.textareaContainerElement = el), class: {
+        return (h(GuxFormFieldContainer, { key: '85aebd536e58112721d561faa61e69ba85799920', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: '7d09e03efb5b36a42e0f2ae8c5725480ae7c0e35', required: this.required, position: this.computedLabelPosition }, h("slot", { key: 'b322969c7e5be7ea9187955f033591998bf7f3aa', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: '1db04327abc722066c4d44a7693e37416c099971', variant: this.indicatorMark, required: this.required }), h("slot", { key: '773033f5c1ea09e6545821ca4ce769f3019ff678', name: "label-info" })), h("div", { key: '474e197ef328cc222fec17d60d9c6952b937b116', class: "gux-input-and-error-container" }, h("div", { key: 'edb10c87a93d8915f1c18138a12f613017a07cd4', ref: el => (this.textareaContainerElement = el), class: {
                 'gux-input': true,
                 [`gux-resize-${this.resize}`]: true,
                 'gux-disabled': this.disabled,
                 'gux-input-error': this.hasError
-            } }, h("slot", { key: '595174105f304eb67df65ecc5b8096b113955534', name: "input" })), h(GuxFormFieldError, { key: '2da19cb23e97dab99cbee4dbeeff7df9514350b6', show: this.hasError }, h("slot", { key: '8d22ad4a8bbe0b08c607d8a80f73f68a56014351', name: "error" })), h(GuxFormFieldHelp, { key: '7974826c93a50268fa795e1ded407f62c0aa350a', show: !this.hasError && this.hasHelp }, h("slot", { key: '75fe9c7988bf8ef1e76488eab2c420c6f4fbc1d2', name: "help" })))));
+            } }, h("slot", { key: 'd49a85eae02c1af2e33cde3534190132cbe8a591', name: "input" })), h(GuxFormFieldError, { key: 'df6c36a16a7b3e6facc0b11b530a7cce01a254d8', show: this.hasError }, h("slot", { key: '290f0ce6fa3f1a113d8d0c32addba7d8fbfa65f4', name: "error" })), h(GuxFormFieldHelp, { key: '5c31320412e44262d97d6c3d09dba4c133e16ca8', show: !this.hasError && this.hasHelp }, h("slot", { key: '680e0b229058a79298ac97400aefa4861bee1286', name: "help" })))));
     }
     get variant() {
         const labelPositionVariant = this.labelPosition

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

@@ -1,13 +1,13 @@
-import { r as registerInstance, h, a as getElement } from './index-CiOdbrOB.js';
-import { b as buildI18nForComponent } from './index-CQoOheQV.js';
-import { O as OnMutation } from './on-mutation-27bBUUXS.js';
+import { r as registerInstance, h, a as getElement } from './index-C1fW4ajX.js';
+import { b as buildI18nForComponent } from './index-Cq0qTC7D.js';
+import { O as OnMutation } from './on-mutation-DkNnZcKZ.js';
 import { a as onDisabledChange, o as onRequiredChange } from './on-attribute-change-De1NnCmO.js';
 import { h as hasSlot } from './has-slot-qzV3vtOw.js';
 import { g as getSlotTextContent } from './get-slot-text-content-MAoEg4ig.js';
-import { G as GuxFormFieldError, a as GuxFormFieldHelp } from './gux-form-field-error-DkGIka65.js';
-import { G as GuxFormFieldVisualLabel, a as GuxFormFieldScreenreaderLabel, b as GuxFormFieldFieldsetContainer } from './gux-form-field-fieldset-container-DpnuZ0dL.js';
-import { v as validateFormIds, a as getComputedLabelPosition } from './gux-form-field.service-C3WKbzwR.js';
-import { t as trackComponent } from './usage-DhyuCthg.js';
+import { G as GuxFormFieldError, a as GuxFormFieldHelp } from './gux-form-field-error-DeVGvgGb.js';
+import { G as GuxFormFieldVisualLabel, a as GuxFormFieldScreenreaderLabel, b as GuxFormFieldFieldsetContainer } from './gux-form-field-fieldset-container-Dr8DNQiJ.js';
+import { v as validateFormIds, a as getComputedLabelPosition } from './gux-form-field.service-Nq3AAQGS.js';
+import { t as trackComponent } from './usage-7uJ-gUB2.js';
 import './get-closest-element-Cd4R0amv.js';
 import './random-html-id-D9jKBqIb.js';
 import './log-error-DxtJDeL9.js';
@@ -104,14 +104,14 @@ const GuxFormFieldTimePicker = class {
     }
     render() {
         var _a;
-        return (h(GuxFormFieldFieldsetContainer, { key: '02cb96a3ca56e49c1f55adc9c336748f1458986d', labelPosition: this.computedLabelPosition }, h(GuxFormFieldScreenreaderLabel, { key: '0b98d730bf9f6e7db0ff21f474ebd81d09ca7ff3' }, (_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: '309face0b7993819eb29eaa33f25e76164024787', position: this.computedLabelPosition, required: this.required }, h("slot", { key: '75cecfe1b3dc23aa84ffd25bb03ea0f16f767eeb', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: 'fba9d6637f29831a71837604a633f219455875d8', variant: this.indicatorMark, required: this.required }), h("slot", { key: 'aaeb75dae86048147d44f759674e70d217a24ac4', name: "label-info" })), h("div", { key: 'd184479d25644cbae2bda07dd93b9cdcf6a4c3b3', class: "gux-input-and-error-container" }, h("div", { key: '37b5c4911f4506c5e45a470335f0c71d7a427275', class: {
+        return (h(GuxFormFieldFieldsetContainer, { key: '21e8399f25c2482448463567b989e369186c12b5', labelPosition: this.computedLabelPosition }, h(GuxFormFieldScreenreaderLabel, { key: '9cb7b47d3d67e87cefa911d225115783b8cb6d84' }, (_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: 'fa9f7748ea47396c757da01696bba5a78afb666b', position: this.computedLabelPosition, required: this.required }, h("slot", { key: 'f43759d10b227d4ece87b2e040dd7abfcc814074', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: '52e7360229a5b8225dd30ea61cdd0b6cfdcfcb88', variant: this.indicatorMark, required: this.required }), h("slot", { key: '07a07f01033abd5bde1bb36cb6f4bb6558994d69', name: "label-info" })), h("div", { key: 'd400154bdef2033885accb84bbe9925c739809b0', class: "gux-input-and-error-container" }, h("div", { key: '1480f29b283a94582cdacfb83fc9e24d28866343', class: {
                 'gux-input': true,
                 'gux-input-error': this.hasError
-            } }, h("div", { key: 'c18bd8c95fa643829ac7ef4e5a332a4d977f35a6', class: {
+            } }, h("div", { key: 'f4b9f594deff983080c65090463de9af268028f8', class: {
                 'gux-time-picker-container': true,
                 'gux-disabled': this.disabled
-            } }, h("slot", { key: '6f8619955a235511f54fbb68983031cb50be6ddd' }))), h(GuxFormFieldError, { key: '6110a244d25e03ca657d14ddb9f989af3e9d2e81', show: this.hasError }, h("slot", { key: 'ba589609cbc48c647afb6f4c05b55afff726e030', name: "error" })), h(GuxFormFieldHelp, { key: '12c1b379f3dbec23bb49da5a1871d1e19d990118', show: !this.hasError && this.hasHelp }, h("slot", { key: '7c34107baef4d238e601c6e46020d9ad38fbb985', name: "help" })))));
+            } }, h("slot", { key: '0390341d9d25ee9931be3571c4bc8d0b3b505be7' }))), h(GuxFormFieldError, { key: 'ed90284efcf34aa3f48fb685dcc6088e29c24785', show: this.hasError }, h("slot", { key: 'ea77b5e9ac41ae846104d44839ec825995cb31cf', name: "error" })), h(GuxFormFieldHelp, { key: '8c1267cf45a65119764ef91db9496e98d4afa5d2', show: !this.hasError && this.hasHelp }, h("slot", { key: '11e1ac355b8ded171a64009d1bc94f89fcbe955d', name: "help" })))));
     }
     renderText(text, condition = false) {
         if (condition) {

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

@@ -1,13 +1,13 @@
-import { r as registerInstance, h, a as getElement } from './index-CiOdbrOB.js';
-import { b as buildI18nForComponent } from './index-CQoOheQV.js';
-import { O as OnMutation } from './on-mutation-27bBUUXS.js';
+import { r as registerInstance, h, a as getElement } from './index-C1fW4ajX.js';
+import { b as buildI18nForComponent } from './index-Cq0qTC7D.js';
+import { O as OnMutation } from './on-mutation-DkNnZcKZ.js';
 import { a as onDisabledChange, o as onRequiredChange } from './on-attribute-change-De1NnCmO.js';
 import { h as hasSlot } from './has-slot-qzV3vtOw.js';
 import { g as getSlotTextContent } from './get-slot-text-content-MAoEg4ig.js';
-import { G as GuxFormFieldError, a as GuxFormFieldHelp } from './gux-form-field-error-DkGIka65.js';
-import { G as GuxFormFieldVisualLabel, a as GuxFormFieldScreenreaderLabel, b as GuxFormFieldFieldsetContainer } from './gux-form-field-fieldset-container-DpnuZ0dL.js';
-import { v as validateFormIds, a as getComputedLabelPosition } from './gux-form-field.service-C3WKbzwR.js';
-import { t as trackComponent } from './usage-DhyuCthg.js';
+import { G as GuxFormFieldError, a as GuxFormFieldHelp } from './gux-form-field-error-DeVGvgGb.js';
+import { G as GuxFormFieldVisualLabel, a as GuxFormFieldScreenreaderLabel, b as GuxFormFieldFieldsetContainer } from './gux-form-field-fieldset-container-Dr8DNQiJ.js';
+import { v as validateFormIds, a as getComputedLabelPosition } from './gux-form-field.service-Nq3AAQGS.js';
+import { t as trackComponent } from './usage-7uJ-gUB2.js';
 import './get-closest-element-Cd4R0amv.js';
 import './random-html-id-D9jKBqIb.js';
 import './log-error-DxtJDeL9.js';
@@ -105,13 +105,13 @@ const GuxFormFieldTimeZonePicker = class {
     }
     render() {
         var _a;
-        return (h(GuxFormFieldFieldsetContainer, { key: '3e57a459ac9b8b1c73c1f9251a5333ddda22f26d', labelPosition: this.computedLabelPosition }, h(GuxFormFieldScreenreaderLabel, { key: 'a14c148a2d4eb9745bce1edaa8ace4aae5f39a64' }, (_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: '4e227677b726d48bf2d6a7af38bb09c05e4a6aa1', position: this.computedLabelPosition, required: this.required }, h("slot", { key: '21fb69c6ff257ddaf1f6864c9ac00a765eee18f9', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: '0c7e44ef498bbfe7e27ddd0ad5bedd8bb4c44940', variant: this.indicatorMark, required: this.required }), h("slot", { key: '72257b3c88d9ef5864a5604b5ed69bfc4962bbac', name: "label-info" })), h("slot", { key: 'b89bdb0b384b306f77375b42dd211bd746d90d5a', name: "label-info" }), h("div", { key: 'e7a9a969bc79200c26ffd310d4ab6f49db2c2c21', class: "gux-input-and-error-container" }, h("div", { key: '84b2420673c503a0edcb05ce019666926805153c', class: {
+        return (h(GuxFormFieldFieldsetContainer, { key: '52f9aadb26a0ec8aad7a7017f1b7de656fd916a1', labelPosition: this.computedLabelPosition }, h(GuxFormFieldScreenreaderLabel, { key: '906e1c2c238d46813ac0bba58a01c16213e72abb' }, (_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: 'fe953a34afc986d6fedbc5bbd21bf31fef5f3e4b', position: this.computedLabelPosition, required: this.required }, h("slot", { key: 'aa269f867b9a9a163bebe7c42a4da6faf767b126', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: 'b26f07392794e15da05491f6b2c03f3635dd255b', variant: this.indicatorMark, required: this.required }), h("slot", { key: '435b02a6bbb5eaf3cd5103d6f4929d8c9c78a561', name: "label-info" })), h("slot", { key: '7efd43713a114b96b74d10dae0b967cbe6ddcd4d', name: "label-info" }), h("div", { key: '56da9c25e86f32cbdeb76043c0e751f2a72269b2', class: "gux-input-and-error-container" }, h("div", { key: '92dfe9f601463b0a175e2f7473bc0e5938c5d428', class: {
                 'gux-input': true,
                 'gux-input-error': this.hasError,
                 'gux-time-zone-picker-container': true,
                 'gux-disabled': this.disabled
-            } }, h("slot", { key: 'bf2cf24a4d1942586aae892662edd28c2999c11e' })), h(GuxFormFieldError, { key: 'be587a3c75b395b4290e20513232baf1a8c53d35', show: this.hasError }, h("slot", { key: 'e5a4d2eff6229c9362519828af3ca2ad581b54f5', name: "error" })), h(GuxFormFieldHelp, { key: '11e61027c09cd59d7f006c219ef3d870b6ec532b', show: !this.hasError && this.hasHelp }, h("slot", { key: 'cfd6a9363d800337c91cd53061400f55e957c80d', name: "help" })))));
+            } }, h("slot", { key: '43366c9da6e7ada0792def009c6f2f6b60f65ff2' })), h(GuxFormFieldError, { key: '82856e290ad916147e65088c5c855bf152f33ff5', show: this.hasError }, h("slot", { key: 'e3d3dae86fd2781eb1e44b12352b026df92fa91c', name: "error" })), h(GuxFormFieldHelp, { key: 'f6224887bb83b8a30472a661258123f5de07bf38', show: !this.hasError && this.hasHelp }, h("slot", { key: '567e70213ea6ead60ddb49e5fd3e6ac45b039505', name: "help" })))));
     }
     renderText(text, condition = false) {
         if (condition) {