genesys-spark-components 4.200.0 → 4.201.1

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-select/gux-form-field-select.css

@@ -10,6 +10,47 @@
   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;
@@ -55,6 +96,8 @@
   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 {

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-select/gux-form-field-select.js

@@ -89,13 +89,13 @@ export class GuxFormFieldSelect {
         }
     }
     render() {
-        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: {
+        return (h(GuxFormFieldContainer, { key: '99599aab8bc4b078d4fc08347d4d7136961c62fc', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: 'fe91fc3bca9e347f8a148856b20dde2bb285d547', required: this.required, position: this.computedLabelPosition }, h("slot", { key: '5e6c30f4db08459dd0dd06ae03bca7d5cefe78ea', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: '63e5ca11e251efd96b8d894ac36cab219552d74e', variant: this.indicatorMark, required: this.required }), h("slot", { key: 'dc0b66c24ef78a543acf51c1cde0d5aacf236381', name: "label-info" })), h("div", { key: '4accd7d22d3cf8ae0429a8ebce722dc699d34b7a', class: "gux-input-and-error-container" }, h("div", { key: '7ef5717a2faa6de8175ff9142d51730d4252a33d', class: {
                 'gux-input': true,
                 'gux-input-error': this.hasError
-            } }, h("div", { key: 'b34e82cd56cc9ce53bcc11554d8e0fd931f3ac5e', class: {
+            } }, h("div", { key: 'a17b7492bf8682913639e00d9c56e84f43fa7035', class: {
                 'gux-input-container': true,
                 'gux-disabled': this.disabled
-            } }, 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" })))));
+            } }, h("slot", { key: 'db19d752e223e4c8182c9d6d843330c5ed3d6e66', name: "input" }), h("gux-icon", { key: 'ef3fae0f606fc2ad92aa68ec192d1124592e7fdf', "icon-name": "custom/chevron-down-small-regular", decorative: true, size: "small" }))), h(GuxFormFieldError, { key: 'b48571f7d9dc9f97360c5980cd681f80bfc378a5', show: this.hasError }, h("slot", { key: 'bc3f74a715b6a94be5451fece3b808e4526814b5', name: "error" })), h(GuxFormFieldHelp, { key: '26b739daccdccd4b8407fb9387f3614b75914b87', show: !this.hasError && this.hasHelp }, h("slot", { key: '5475cca4a5c47013e19c614e7af43c835c6a0010', name: "help" })))));
     }
     get variant() {
         const labelPositionVariant = this.labelPosition

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-text-like/gux-form-field-text-like.css

@@ -10,6 +10,47 @@
   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;
@@ -55,6 +96,8 @@
   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 {
@@ -88,6 +131,20 @@
   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;
 }

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-text-like/gux-form-field-text-like.js

@@ -16,9 +16,12 @@ import { onRequiredChange } from "../../../../../utils/dom/on-attribute-change";
 import { preventBrowserValidationStyling } from "../../../../../utils/dom/prevent-browser-validation-styling";
 import { hasSlot } from "../../../../../utils/dom/has-slot";
 import { GuxFormFieldHelp, GuxFormFieldError, GuxFormFieldLabel, GuxFormFieldContainer } from "../../functional-components/functional-components";
-import { clearInput, hasContent, getComputedLabelPosition, validateFormIds, setSlotAriaDescribedby, getSlottedInput } from "../../gux-form-field.service";
+import { clearInput, hasContent, getComputedLabelPosition, validateFormIds, setSlotAriaDescribedby, getSlottedInput, setCharacterCountAriaDescribedBy } from "../../gux-form-field.service";
 import { trackComponent } from "../../../../../utils/tracking/usage";
 import { focusInputElement } from "../../../../../utils/dom/focus-input-element";
+import { GuxFormFieldCharacterCount } from "../../functional-components/gux-form-field-character-count/gux-form-field-character-count";
+import { buildI18nForComponent } from "../../../../../i18n";
+import translationResources from "../../functional-components/gux-form-field-character-count/i18n/en.json";
 /**
  * @slot input - Required slot for input tag
  * @slot label - Required slot for label tag
@@ -37,10 +40,15 @@ export class GuxFormFieldTextLike {
          * 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]');
@@ -84,12 +92,15 @@ export class GuxFormFieldTextLike {
         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]');
@@ -103,6 +114,11 @@ export class GuxFormFieldTextLike {
         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() {
@@ -113,16 +129,21 @@ export class GuxFormFieldTextLike {
             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: '3303da09ea9425ab056fe4a1b68a27b0a8eac48f', labelPosition: this.computedLabelPosition, characterLimit: this.characterLimit }, this.renderCharacterCount(), h(GuxFormFieldLabel, { key: '79180bb0329f6f3ff99dcf54f26aaae094c4d196', required: this.required, position: this.computedLabelPosition }, h("slot", { key: 'f0b0c0f98338d06199e08e35fd82bfafc09f4970', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: '1861570726737d109cc18c9ee54a199511d12d1e', variant: this.indicatorMark, required: this.required }), h("slot", { key: '477314b29222b05f8777931ae7b4d02f6403c575', name: "label-info" })), h("div", { key: '3ca1ffe1ff0ab870bafb78270254a245828a56e7', class: "gux-input-and-error-container" }, h("div", { key: '35fa22df1fbc8006639b78d6680bb97310ad4f2c', class: {
                 'gux-input': true,
-                'gux-input-error': this.hasError
-            } }, h("div", { key: 'c7425d80c410708dd2b34118e9fb9e6226051e03', class: {
+                'gux-input-error': this.hasError || this.charactersExceeding
+            } }, h("div", { key: '822baeb7a3e029ca5479070b2219d6aff50b27a0', 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: 'd0169d8906a1702d5bdb6cd352f2ae548fc651ec', name: "prefix" }), h("slot", { key: 'd6a28356341af6b1dc1befbe94f1e1ca35c2ef4a', name: "input" }), this.renderRadialLoading(), h("slot", { key: '4e3562fd280db28885356742e2f942e95ffd9f64', name: "suffix" }), this.clearable && this.hasContent && !this.disabled && (h("gux-form-field-input-clear-button", { key: 'c36543f381b1667742ff6a204a54f90d7ab2e32d', onClick: () => clearInput(this.input) })))), h(GuxFormFieldError, { key: 'e3ef83821314eacc0199e3a073179ae27cc00f30', show: this.hasError }, h("slot", { key: '0811cb0914cdc20a90717d42ec560cc709796e50', name: "error" })), h(GuxFormFieldHelp, { key: '38ccf8162f958d9ea8015c3db3fb6e20f72d3de8', show: !this.hasError && this.hasHelp }, h("slot", { key: 'e2d8b6882876c9daeec6227218efaaa56b690b8e', name: "help" })))));
     }
     get variant() {
         const labelPositionVariant = this.labelPosition
@@ -132,12 +153,32 @@ export class GuxFormFieldTextLike {
         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;
@@ -256,6 +297,26 @@ export class GuxFormFieldTextLike {
                 "setter": false,
                 "reflect": false,
                 "defaultValue": "'required'"
+            },
+            "characterLimit": {
+                "type": "number",
+                "attribute": "character-limit",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The characterLimit property defines the max character limit for the input."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "0"
             }
         };
     }
@@ -268,9 +329,28 @@ export class GuxFormFieldTextLike {
             "required": {},
             "hasContent": {},
             "hasError": {},
-            "hasHelp": {}
+            "hasHelp": {},
+            "charactersExceeding": {}
         };
     }
+    static get events() {
+        return [{
+                "method": "characterLimitChange",
+                "name": "characterLimitChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }];
+    }
     static get methods() {
         return {
             "guxForceUpdate": {

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-text-like/tests/gux-form-field-text-like.common.js

@@ -64,6 +64,54 @@ const indicatorMarkRenderConfigs = ['optional', 'required'].map(indicatorMark =>
       </gux-form-field-text-like>
   `
 }));
+const characterLimitRenderConfigs = [
+    {
+        description: 'should render component with character count when character-limit is set',
+        html: `
+      <gux-form-field-text-like character-limit="100">
+        <input slot="input" type="text" value="Sample text"/>
+        <label slot="label">Label</label>
+      </gux-form-field-text-like>
+    `
+    },
+    {
+        description: 'should render component with exceeded character count',
+        html: `
+      <gux-form-field-text-like character-limit="5">
+        <input slot="input" type="text" value="Sample text"/>
+        <label slot="label">Label</label>
+      </gux-form-field-text-like>
+    `
+    },
+    {
+        description: 'should render component with character count and label-position beside',
+        html: `
+      <gux-form-field-text-like character-limit="100" label-position="beside">
+        <input slot="input" type="text" value="Sample text"/>
+        <label slot="label">Label</label>
+      </gux-form-field-text-like>
+    `
+    },
+    {
+        description: 'should render component with character count without label',
+        html: `
+          <gux-form-field-text-like id="character-count-3" label-position="screenreader" character-limit="100">
+          <input slot="input" type="text" name="e-1" />
+          <label slot="label">Default</label>
+        </gux-form-field-text-like>
+    `
+    },
+    {
+        description: 'should render component with character count and error message',
+        html: `
+          <gux-form-field-text-like id="character-count-3" character-limit="2">
+          <input slot="input" type="text" name="e-1" value="Sample Text" />
+          <label slot="label">Default</label>
+          <span slot="error">This is an error message</span>
+        </gux-form-field-text-like>
+    `
+    }
+];
 const optionalSlotRenderConfigs = [
     { name: 'help', html: `<span slot="help">This is a help message</span>` },
     { name: 'error', html: `<span slot="error">This is an error message</span>` },
@@ -92,5 +140,6 @@ export const renderConfigs = [
     ...inputTypeRenderConfigs,
     ...inputAttributeRenderConfigs,
     ...indicatorMarkRenderConfigs,
-    ...optionalSlotRenderConfigs
+    ...optionalSlotRenderConfigs,
+    ...characterLimitRenderConfigs
 ];

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-textarea/gux-form-field-textarea.css

@@ -10,6 +10,47 @@
   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;
@@ -55,6 +96,8 @@
   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 {

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-textarea/gux-form-field-textarea.js

@@ -93,12 +93,12 @@ export class GuxFormFieldTextarea {
         }
     }
     render() {
-        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: {
+        return (h(GuxFormFieldContainer, { key: 'a8e94705d839e5b516e2ce6e6b1ca23a0003e387', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: '3a3223757c774b672e8061233bd2730ca021c7b5', required: this.required, position: this.computedLabelPosition }, h("slot", { key: 'c3f19df80248c3f2b4c6e961c4fb2a95c78af182', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: 'cc4a9e720556c8da4dbec95489dccef6e0537f61', variant: this.indicatorMark, required: this.required }), h("slot", { key: 'a20d144b51fd294b1c354ba1323e7593c4b8936e', name: "label-info" })), h("div", { key: '99c2be25af913a2f98d7979cb8392a1e32dae1d8', class: "gux-input-and-error-container" }, h("div", { key: 'f69d179feccff16a66338a1b284cfe18791980c1', 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: '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" })))));
+            } }, h("slot", { key: '0f862f1fe7594a4d3ad062eaf6f3cfac08adfcc2', name: "input" })), h(GuxFormFieldError, { key: 'e378321410e2e85fd5c558c3b1baf5ba858c8d5f', show: this.hasError }, h("slot", { key: '06f1c622450d75581b52b2dab7ddd9f4e13bb57e', name: "error" })), h(GuxFormFieldHelp, { key: 'b47d966ddce7b0e2c47e3eb2c53c577d966f7fe5', show: !this.hasError && this.hasHelp }, h("slot", { key: 'db3ae1c179f1d088b657bb35ec5031bb571317e9', name: "help" })))));
     }
     get variant() {
         const labelPositionVariant = this.labelPosition

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-time-picker/gux-form-field-time-picker.js

@@ -98,14 +98,14 @@ export class GuxFormFieldTimePicker {
     }
     render() {
         var _a;
-        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: {
+        return (h(GuxFormFieldFieldsetContainer, { key: 'f54170b5b11e34e45f3fc77c225366f8fcaa8afc', labelPosition: this.computedLabelPosition }, h(GuxFormFieldScreenreaderLabel, { key: 'b7d094345e415a5269fff00a0edf8d7ccb92d586' }, (_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: 'ab829d0eed8b0af4a60b327d487b7de4e34d7c01', position: this.computedLabelPosition, required: this.required }, h("slot", { key: 'ce1fc3f8e86bf8b76b07749e71d91adf59530607', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: 'bf79cecbfe0fde35fa93c1c87291394cf755db59', variant: this.indicatorMark, required: this.required }), h("slot", { key: '90f9ce0f3eed5083728610afc8e5df63afb1b498', name: "label-info" })), h("div", { key: '465963fac249b739dd5b43a9535c2627a4d5faaf', class: "gux-input-and-error-container" }, h("div", { key: 'c73c66adddc4e9a202afcfe22f08ac34867f0f71', class: {
                 'gux-input': true,
                 'gux-input-error': this.hasError
-            } }, h("div", { key: 'f4b9f594deff983080c65090463de9af268028f8', class: {
+            } }, h("div", { key: '223ca6df421127fd7a1741c763bc928cbe97fa60', class: {
                 'gux-time-picker-container': true,
                 'gux-disabled': this.disabled
-            } }, 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" })))));
+            } }, h("slot", { key: '2eab4f41e54ea0f5d1bc493a53953f7ff354c4e4' }))), h(GuxFormFieldError, { key: '24f90205545a2ba2505d389907802709a4aaa540', show: this.hasError }, h("slot", { key: '7aed99f687b04a0d8d54c13ba9df16116a273f41', name: "error" })), h(GuxFormFieldHelp, { key: 'ebc930841ed98b487ce3cca1eb13ca08b29288cf', show: !this.hasError && this.hasHelp }, h("slot", { key: '0d4ca1620fa7e50cfb13f212d8b71df1929531f4', name: "help" })))));
     }
     renderText(text, condition = false) {
         if (condition) {

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-time-zone-picker/gux-form-field-time-zone-picker.js

@@ -99,13 +99,13 @@ export class GuxFormFieldTimeZonePicker {
     }
     render() {
         var _a;
-        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: {
+        return (h(GuxFormFieldFieldsetContainer, { key: 'bb075b3f66c81ea5a8d1e92b109c8608af7c4f80', labelPosition: this.computedLabelPosition }, h(GuxFormFieldScreenreaderLabel, { key: '11631e74407938e08ba072a910ae9fef2fa5e051' }, (_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: '56056f1016982c27107056ce6b1df8023fa85f37', position: this.computedLabelPosition, required: this.required }, h("slot", { key: '6b059128760063d3d74ad16965c2bf2412b8b892', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: 'df4924ae546b8fd079dd368b11e814263841ee83', variant: this.indicatorMark, required: this.required }), h("slot", { key: 'd412138bef40185927bbc3aa0d0505ade7d72c85', name: "label-info" })), h("slot", { key: 'd3633cf36eb1612f7f012d7aa83f2a5944718c3c', name: "label-info" }), h("div", { key: '8e3b8646013a25144fadde0f07f86fa4b86c3f17', class: "gux-input-and-error-container" }, h("div", { key: 'ba8783d219c7d4ecb3e1311f6e7a1a0ca23b4280', class: {
                 'gux-input': true,
                 'gux-input-error': this.hasError,
                 'gux-time-zone-picker-container': true,
                 'gux-disabled': this.disabled
-            } }, 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" })))));
+            } }, h("slot", { key: '87ca9d8bbcf8e7c3649bc466bbad3b2547953ed6' })), h(GuxFormFieldError, { key: '76b2b00bf1499789ae207a605cf6cbcc9f986525', show: this.hasError }, h("slot", { key: '8d220f12c2889dc7eff8548af5aa20a12a4b0ce3', name: "error" })), h(GuxFormFieldHelp, { key: 'a7696a867796a3c65839c9b1fc909b303879633d', show: !this.hasError && this.hasHelp }, h("slot", { key: '5a38f2de6966e3727b8f0dc06ebe90a9f805159f', name: "help" })))));
     }
     renderText(text, condition = false) {
         if (condition) {

package/dist/collection/components/stable/gux-form-field/functional-components/gux-form-field-character-count/gux-form-field-character-count.js

@@ -0,0 +1,11 @@
+import { h } from "@stencil/core";
+export 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
+    }))));
+};

package/dist/collection/components/stable/gux-form-field/functional-components/gux-form-field-container/gux-form-field-container.js

@@ -1,7 +1,8 @@
 import { h } from "@stencil/core";
-export const GuxFormFieldContainer = ({ labelPosition }, children) => {
+export const GuxFormFieldContainer = ({ labelPosition, characterLimit }, children) => {
     return (h("div", { class: {
             'gux-form-field-container': true,
-            [`gux-${labelPosition}`]: true
+            [`gux-${labelPosition}`]: true,
+            'gux-character-counter': characterLimit > 0
         } }, children));
 };

package/dist/collection/components/stable/gux-form-field/gux-form-field.service.js

@@ -132,3 +132,25 @@ export function getSlottedInput(root, inputSelector) {
 function hasLabelSlot(root) {
     return Boolean(root.querySelector('label[slot="label"]'));
 }
+export function setCharacterCountAriaDescribedBy(root, input) {
+    var _a, _b, _c;
+    if (root.hasAttribute('character-limit')) {
+        const characterlimit = (_a = root.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.gux-form-field-character-count');
+        if (characterlimit) {
+            const counterId = randomHTMLId('gux-form-field-character-counter');
+            const describedByIds = ((_b = input
+                .getAttribute('aria-describedby')) === null || _b === void 0 ? void 0 : _b.split(' ').filter(id => !id.startsWith(`gux-form-field-character-counter`))) ||
+                [];
+            characterlimit.setAttribute('id', counterId);
+            describedByIds.push(counterId);
+            if (describedByIds) {
+                input.setAttribute('aria-describedby', describedByIds.join(' '));
+            }
+        }
+    }
+    else if (input.getAttribute('aria-describedby')) {
+        const describedByIds = ((_c = input
+            .getAttribute('aria-describedby')) === null || _c === void 0 ? void 0 : _c.split(' ').filter(id => !id.startsWith(`gux-form-field-character-counter`))) || [];
+        input.setAttribute('aria-describedby', describedByIds.join(' '));
+    }
+}

package/dist/collection/components/stable/gux-form-field/helper-components/gux-form-field-input-clear-button/gux-form-field-input-clear-button.js

@@ -8,7 +8,7 @@ export class GuxFormFieldInputClearButton {
         this.i18n = await buildI18nForComponent(this.root, translationResources);
     }
     render() {
-        return (h("button", { key: 'e796f38dff31b2751a760efa342b22dbd1c24b05', tabIndex: -1, type: "button", "aria-label": this.i18n('clear') }, h("gux-icon", { key: 'd1ad9c79abc513d782310cf497aed0ab88729ef6', "icon-name": "fa/xmark-large-regular", decorative: true, size: "small" }), h("gux-tooltip-beta", { key: 'b8596861059c3ff2475dd01564eb4e9af0cc672d', "visual-only": true }, h("div", { key: '1e47c8e1b4e120f5737c7d5fa5602f99441c0379', slot: "content" }, this.i18n('clear')))));
+        return (h("button", { key: '2844f33beccaa89b1f1a877b048bdfa29d7321bd', tabIndex: -1, type: "button", "aria-label": this.i18n('clear') }, h("gux-icon", { key: '7c910485e8bdd75adbbf473ac61aa2070f5325a9', "icon-name": "fa/xmark-large-regular", decorative: true, size: "small" }), h("gux-tooltip-beta", { key: 'b5431f2e2e26a03e78b17913d14dc1299bdc4e14', "visual-only": true }, h("div", { key: '922e9867b4f6fc5369218898baf7fa23e32f44f2', slot: "content" }, this.i18n('clear')))));
     }
     static get is() { return "gux-form-field-input-clear-button"; }
     static get encapsulation() { return "shadow"; }