genesys-spark-components 4.232.2 → 4.233.1

package/dist/collection/components/stable/gux-calendar/gux-calendar.js

@@ -258,6 +258,8 @@ export class GuxCalendar {
     async onKeyDown(event) {
         switch (event.key) {
             case ' ':
+                event.preventDefault();
+                break;
             case 'Enter':
                 event.preventDefault();
                 await this.onDateClick(this.previewValue);
@@ -314,6 +316,13 @@ export class GuxCalendar {
                 break;
         }
     }
+    async onKeyUp(event) {
+        switch (event.key) {
+            case ' ':
+                await this.onDateClick(this.previewValue);
+                break;
+        }
+    }
     async componentWillLoad() {
         trackComponent(this.root, { variant: this.mode });
         this.i18n = await buildI18nForComponent(this.root, translationResources);
@@ -341,10 +350,10 @@ export class GuxCalendar {
         })));
     }
     renderCalendarTable(index) {
-        return (h("table", null, h("tr", null, getWeekdays(this.locale, this.startDayOfWeek).map(day => (h("th", null, day)))), this.getMonthDays(index).map(week => (h("tr", null, week.map(day => (h("td", { tabindex: this.isFocusableDate(day) ? '0' : '-1', class: day.class, "aria-hidden": day.hidden ? 'true' : 'false', "aria-disabled": day.disabled ? 'true' : 'false', "data-date": day.date.getTime(), onClick: () => void this.onDateClick(day.date), onMouseEnter: () => this.onDateMouseEnter(day.date), onKeyDown: e => void this.onKeyDown(e) }, h("div", { class: "gux-date" }, day.date.getDate(), h("gux-screen-reader-beta", null, getDateMonthAndYearString(day.date, this.locale)))))))))));
+        return (h("table", null, h("tr", null, getWeekdays(this.locale, this.startDayOfWeek).map(day => (h("th", null, day)))), this.getMonthDays(index).map(week => (h("tr", null, week.map(day => (h("td", { tabindex: this.isFocusableDate(day) ? '0' : '-1', class: day.class, "aria-hidden": day.hidden ? 'true' : 'false', "aria-disabled": day.disabled ? 'true' : 'false', "data-date": day.date.getTime(), onClick: () => void this.onDateClick(day.date), onMouseEnter: () => this.onDateMouseEnter(day.date), onKeyDown: e => void this.onKeyDown(e), onKeyUp: e => void this.onKeyUp(e) }, h("div", { class: "gux-date" }, day.date.getDate(), h("gux-screen-reader-beta", null, getDateMonthAndYearString(day.date, this.locale)))))))))));
     }
     render() {
-        return (h("div", { key: 'ecb01e2825c556c8452007d537131ca352583705', class: "gux-calendar" }, h("div", { key: '7d4cfa2b4aa4e1a3299150b104f017221741f402', class: "gux-header" }, h("button", { key: 'c4d8974ea4be39048f51ddaa053e22390c685770', type: "button", class: "gux-left", "aria-label": this.i18n('previousMonth'), onClick: () => this.incrementPreviewDateByMonth(-1) }, h("gux-icon", { key: '31d234e14c57567aeaf52e1700ec5598dc626a4b', size: "small", decorative: true, "icon-name": "custom/chevron-left-small-regular" })), this.renderMonthHeader(), h("button", { key: '5335f29f046387ccbd3d4e0b464868f576d1fb21', type: "button", class: "gux-right", "aria-label": this.i18n('nextMonth'), onClick: () => this.incrementPreviewDateByMonth(1) }, h("gux-icon", { key: '95219ca612e3f73a14ac8593a3c92f64ebcc8a91', size: "small", decorative: true, "icon-name": "custom/chevron-right-small-regular" }))), h("div", { key: '13e1fa1158eb1ba160842cc084b54df69fffe2bf', class: "gux-content" }, Array.from(Array(this.numberOfMonths).keys()).map(index => this.renderCalendarTable(index)))));
+        return (h("div", { key: '99b9cbae49cda8b12095262936aaf771584deedb', class: "gux-calendar" }, h("div", { key: '880293b814d68fcf502de7492eb50ae791e9979b', class: "gux-header" }, h("button", { key: 'a022434e3785e83dda88d686add6c689ab99dab9', type: "button", class: "gux-left", "aria-label": this.i18n('previousMonth'), onClick: () => this.incrementPreviewDateByMonth(-1) }, h("gux-icon", { key: '062da9e8f65bb32d3314b1da4040d1ab8cc6f1d9', size: "small", decorative: true, "icon-name": "custom/chevron-left-small-regular" })), this.renderMonthHeader(), h("button", { key: '9452372be93bbf116fed3b353eb7b553e886166c', type: "button", class: "gux-right", "aria-label": this.i18n('nextMonth'), onClick: () => this.incrementPreviewDateByMonth(1) }, h("gux-icon", { key: 'd701501f7c195f40464bee99c2bf7dc913d06f88', size: "small", decorative: true, "icon-name": "custom/chevron-right-small-regular" }))), h("div", { key: 'fcecfdc89455c2aac68bcb507e421b99f4cab562', class: "gux-content" }, Array.from(Array(this.numberOfMonths).keys()).map(index => this.renderCalendarTable(index)))));
     }
     static get is() { return "gux-calendar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/stable/gux-datepicker/gux-datepicker.js

@@ -168,8 +168,7 @@ export class GuxDatepicker {
         else {
             switch (event.key) {
                 case 'Enter':
-                case 'Escape':
-                case ' ': {
+                case 'Escape': {
                     this.active = false;
                     const button = this.root.shadowRoot.querySelector('.gux-calendar-toggle-button');
                     afterNextRenderTimeout(() => {
@@ -185,6 +184,20 @@ export class GuxDatepicker {
             }
         }
     }
+    onKeyUp(event) {
+        if (!this.isInputFieldEvent(event)) {
+            switch (event.key) {
+                case ' ': {
+                    this.active = false;
+                    const button = this.root.shadowRoot.querySelector('.gux-calendar-toggle-button');
+                    afterNextRenderTimeout(() => {
+                        button.focus();
+                    });
+                    break;
+                }
+            }
+        }
+    }
     onMouseDown(event) {
         if (this.isInputFieldEvent(event)) {
             this.isSelectingRangeWithMouse = true;
@@ -573,7 +586,7 @@ export class GuxDatepicker {
             } }, this.getCalendarLabels()[1]), h("div", { class: "gux-datepicker-field-input" }, h("div", { class: "gux-datepicker-field-text-input" }, h("input", { id: this.endInputId, type: "text", ref: (el) => (this.toInputElement = el), onMouseUp: e => this.onInputMouseUp(e), onFocusin: e => this.onInputFocusIn(e), onFocusout: () => this.onInputFocusOut(), value: this.toFormattedValue, disabled: this.disabled }), this.renderCalendarToggleButton()))));
     }
     render() {
-        return (h("div", { key: 'd9a0fa114334489ab841a6ea49c0c6516c780ed7', class: {
+        return (h("div", { key: 'f7a5a09df3bf8fae6b76de91040e6c2c09b6328a', class: {
                 'gux-datepicker': true,
                 'gux-active': this.active,
                 'gux-disabled': this.disabled
@@ -861,6 +874,12 @@ export class GuxDatepicker {
                 "target": undefined,
                 "capture": false,
                 "passive": false
+            }, {
+                "name": "keyup",
+                "method": "onKeyUp",
+                "target": undefined,
+                "capture": false,
+                "passive": false
             }, {
                 "name": "mousedown",
                 "method": "onMouseDown",

package/dist/collection/components/stable/gux-dropdown/gux-dropdown.js

@@ -65,6 +65,7 @@ export class GuxDropdown {
         switch (event.key) {
             case 'Escape':
                 if (this.expanded) {
+                    event.preventDefault();
                     event.stopPropagation();
                 }
                 if (this.isFilterable()) {
@@ -94,12 +95,6 @@ export class GuxDropdown {
                     setInitialActiveOption(this.listboxElement);
                 }
                 return;
-            case 'Enter':
-            case ' ':
-                if (!this.expanded && !this.isFilterable()) {
-                    setInitialActiveOption(this.listboxElement);
-                }
-                return;
         }
     }
     onInternallistboxoptionsupdated(event) {
@@ -374,7 +369,7 @@ export class GuxDropdown {
         }
     }
     render() {
-        return (h("gux-popup", { key: 'cde100c4f62afffb5f98c24d007820479fdb1b5c', expanded: this.expanded && (!this.loading || this.isFilterable()), disabled: this.disabled || (this.loading && !this.isFilterable()), exceedTargetWidth: this.exceedTargetWidth }, this.renderTarget(), this.renderPopup()));
+        return (h("gux-popup", { key: '9403f04e1ff6553daa9e2ad499a3ec1b95da893f', expanded: this.expanded && (!this.loading || this.isFilterable()), disabled: this.disabled || (this.loading && !this.isFilterable()), exceedTargetWidth: this.exceedTargetWidth }, this.renderTarget(), this.renderPopup()));
     }
     static get is() { return "gux-dropdown"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/stable/gux-dropdown-multi/gux-dropdown-multi.js

@@ -133,14 +133,6 @@ export class GuxDropdownMulti {
                 if (this.canCreateNewOption() && this.isActiveElement()) {
                     this.emitCreateOption();
                 }
-                if (!this.expanded && !this.isFilterable()) {
-                    setInitialActiveOption(this.listboxElement);
-                }
-                return;
-            case ' ':
-                if (!this.expanded && !this.isFilterable()) {
-                    setInitialActiveOption(this.listboxElement);
-                }
                 return;
         }
     }
@@ -423,7 +415,7 @@ export class GuxDropdownMulti {
     }
     render() {
         return [
-            h("div", { key: '8218431fc220e7712c78a3149a1411f580a0bafc', class: "gux-dropdown-container" }, h("gux-popup", { key: '4cc022881fff6f407fce2f92d5cdf7b086077a29', expanded: this.expanded && (!this.loading || this.isFilterable()), disabled: this.disabled || (this.loading && !this.isFilterable()), exceedTargetWidth: this.exceedTargetWidth }, this.renderTarget(), this.renderPopup()))
+            h("div", { key: '37ab468fc107c07366ee5de94eb6e6bb20319a39', class: "gux-dropdown-container" }, h("gux-popup", { key: 'b6d3f364b061b25d0a57a9da9ec0c91f1eb8b155', expanded: this.expanded && (!this.loading || this.isFilterable()), disabled: this.disabled || (this.loading && !this.isFilterable()), exceedTargetWidth: this.exceedTargetWidth }, this.renderTarget(), this.renderPopup()))
         ];
     }
     static get is() { return "gux-dropdown-multi"; }

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

@@ -85,6 +85,11 @@ export class GuxFormFieldTextLike {
         void ((_a = this.labelInfo) === null || _a === void 0 ? void 0 : _a.hideTooltip());
         clearTimeout(this.hideLabelInfoTimeout);
     }
+    handleCharacterLimitChange(newValue) {
+        if (newValue > 0) {
+            setCharacterCountAriaDescribedBy(this.root, this.input);
+        }
+    }
     // eslint-disable-next-line @typescript-eslint/require-await
     async guxForceUpdate() {
         this.hasContent = hasContent(this.input);
@@ -114,13 +119,15 @@ 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 });
     }
+    componentDidLoad() {
+        if (this.characterLimit > 0) {
+            setCharacterCountAriaDescribedBy(this.root, this.input);
+        }
+    }
     connectedCallback() {
         this.hasError = hasSlot(this.root, 'error');
         this.hasHelp = hasSlot(this.root, 'help');
@@ -149,15 +156,15 @@ export class GuxFormFieldTextLike {
         }
     }
     render() {
-        return (h(GuxFormFieldContainer, { key: '54f478dab0e45dc3efb156e9dad965823d697142', labelPosition: this.computedLabelPosition, characterLimit: this.characterLimit }, this.renderCharacterCount(), h(GuxFormFieldLabel, { key: 'e35eb1052c0d557eee144ba38b1816fa604b44d7', required: this.required, position: this.computedLabelPosition }, h("slot", { key: 'ed1e4e6d559032736dc33e4b892aaf940eb9b92c', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: '7a8fd45e5ceea884025f99f7db466a05a02187e1', variant: this.indicatorMark, required: this.required }), h("slot", { key: '67c39e022a9da3a8f75ccfa15249ea5c8cd8873b', name: "label-info" })), h("div", { key: '9228ae0c610a42cee8023248086ba93991ea70e6', class: "gux-input-and-error-container" }, h("div", { key: 'b16ef72f6d37515dd75d8d105b23ad51eb3fcb56', class: {
+        return (h(GuxFormFieldContainer, { key: 'b2ed2e7d4c7fff9893d6dee379080ca52d031ef1', labelPosition: this.computedLabelPosition, characterLimit: this.characterLimit }, this.renderCharacterCount(), h(GuxFormFieldLabel, { key: '122783f3db7cd87ccb0d2f80980a430585a671a4', required: this.required, position: this.computedLabelPosition }, h("slot", { key: 'f76fe506ce23fc3122d15c407d82157052c409d8', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: '94f07e7a96d9fcdee42392b5752a93ceeac7c9f8', variant: this.indicatorMark, required: this.required }), h("slot", { key: '895956e8428af1323048ea607a87c4473c8f2420', name: "label-info" })), h("div", { key: '3cf5758f17af06b5153f8ea1a6c664780d0836b4', class: "gux-input-and-error-container" }, h("div", { key: '0680bba11cd441fe0cd0d07843c78b4513e5729b', class: {
                 'gux-input': true,
                 'gux-input-error': this.hasError || this.charactersExceeding
-            } }, h("div", { key: '5b35de154169a5156e250368fb59e04dcfbe6d52', class: {
+            } }, h("div", { key: 'fb969700f0ed4b2142624f87192c343d1b913f3e', 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: '414d14434e78f53c60ed6a848ff480cc1a68ceeb', name: "prefix" }), h("slot", { key: '02439dc0de64d46424f3ca9f6204907068880ef4', name: "input" }), this.renderRadialLoading(), h("slot", { key: '764b47c1c92236f2ed9202fd1a1366c7c65a47cf', name: "suffix" }), this.clearable && this.hasContent && !this.disabled && (h("gux-form-field-input-clear-button", { key: '498b9980be2675ed774e9f8b522d0bbebe772127', onClick: () => clearInput(this.input) })))), h(GuxFormFieldError, { key: 'e7f599a692bb32129e4d0f928792145825ec148f', show: this.hasError }, h("slot", { key: '0793fd2e095d43d3ee735c9a862acfc0a03567f9', name: "error" })), h(GuxFormFieldHelp, { key: '0730b3990836f489372a6eb56d600d1542b2220a', show: !this.hasError && this.hasHelp }, h("slot", { key: 'f04d4b50de99a1e0ed9ebae1f63116907f32a986', name: "help" })))));
+            }, onClick: () => focusInputElement(this.input) }, h("slot", { key: '4350d6a1831572318816f3c0c6a7b2142737a6f9', name: "prefix" }), h("slot", { key: 'ba4a8b2e0b36baced2c3f2e98fb12a6a633af9de', name: "input" }), this.renderRadialLoading(), h("slot", { key: '88171a8cc0200335928f8c541a149ff194d29b5b', name: "suffix" }), this.clearable && this.hasContent && !this.disabled && (h("gux-form-field-input-clear-button", { key: 'cf7723e5f7aca860cb410ea83967846a9b122fbc', onClick: () => clearInput(this.input) })))), h(GuxFormFieldError, { key: 'bdf9693fb9636c8c8a9957b579eca0ad9a4a6144', show: this.hasError }, h("slot", { key: '4cb5a1a5e0957119cee638e1536243bf4bc8bc16', name: "error" })), h(GuxFormFieldHelp, { key: '473f71b6d52d7b777d8d13877fca55cc1c6dd14b', show: !this.hasError && this.hasHelp }, h("slot", { key: 'fcbfc494952b6fd1b1438e723e2c743880d0fa23', name: "help" })))));
     }
     get variant() {
         const labelPositionVariant = this.labelPosition
@@ -176,12 +183,11 @@ export class GuxFormFieldTextLike {
         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.guxcharacterlimitexceeded.emit(isExceeding);
             this.charactersExceeding = isExceeding;
         }
     }
@@ -351,8 +357,8 @@ export class GuxFormFieldTextLike {
     }
     static get events() {
         return [{
-                "method": "characterLimitChange",
-                "name": "characterLimitChange",
+                "method": "guxcharacterlimitexceeded",
+                "name": "guxcharacterlimitexceeded",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
@@ -389,6 +395,12 @@ export class GuxFormFieldTextLike {
         };
     }
     static get elementRef() { return "root"; }
+    static get watchers() {
+        return [{
+                "propName": "characterLimit",
+                "methodName": "handleCharacterLimitChange"
+            }];
+    }
     static get listeners() {
         return [{
                 "name": "keyup",

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

@@ -129,6 +129,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-textarea/gux-form-field-textarea.js

@@ -8,7 +8,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
                 r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { h } from "@stencil/core";
+import { forceUpdate, h } from "@stencil/core";
 import { calculateInputDisabledState } from "../../../../../utils/dom/calculate-input-disabled-state";
 import { onInputDisabledStateChange } from "../../../../../utils/dom/on-input-disabled-state-change";
 import { OnMutation } from "../../../../../utils/decorator/on-mutation";
@@ -16,8 +16,11 @@ 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 { getComputedLabelPosition, validateFormIds } from "../../gux-form-field.service";
+import { getComputedLabelPosition, validateFormIds, setCharacterCountAriaDescribedBy } from "../../gux-form-field.service";
 import { trackComponent } from "../../../../../utils/tracking/usage";
+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
@@ -33,10 +36,15 @@ export class GuxFormFieldTextarea {
          * 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 textarea.
+         */
+        this.characterLimit = 0;
         this.computedLabelPosition = 'above';
         this.required = true;
         this.hasError = false;
         this.hasHelp = false;
+        this.charactersExceeding = false;
     }
     onMutation() {
         this.labelInfo = this.root.querySelector('[slot=label-info]');
@@ -73,16 +81,26 @@ export class GuxFormFieldTextarea {
         void ((_a = this.labelInfo) === null || _a === void 0 ? void 0 : _a.hideTooltip());
         clearTimeout(this.hideLabelInfoTimeout);
     }
-    componentWillLoad() {
+    handleCharacterLimitChange(newValue) {
+        if (newValue > 0) {
+            setCharacterCountAriaDescribedBy(this.root, this.input);
+        }
+    }
+    async componentWillLoad() {
         this.setInput();
         this.setLabel();
         this.labelInfo = this.root.querySelector('[slot=label-info]');
         this.hasError = hasSlot(this.root, 'error');
         this.hasHelp = hasSlot(this.root, 'help');
+        this.checkCharacterLimitExceeded();
+        this.i18n = await buildI18nForComponent(this.root, translationResources);
         trackComponent(this.root, { variant: this.variant });
     }
     componentDidLoad() {
         this.updateHeight(this.textareaContainerElement, this.input, this.resize);
+        if (this.characterLimit > 0) {
+            setCharacterCountAriaDescribedBy(this.root, this.input);
+        }
     }
     connectedCallback() {
         this.hasError = hasSlot(this.root, 'error');
@@ -97,12 +115,12 @@ export class GuxFormFieldTextarea {
         }
     }
     render() {
-        return (h(GuxFormFieldContainer, { key: '722954a835efdce0c0c011633cd01b07e36299d4', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: '9bdb9adec4c6b5f36866cd55c3ba6df8e9ca322f', required: this.required, position: this.computedLabelPosition }, h("slot", { key: '65412b24ea0257da33ef92f38bf85dcf0e9d4761', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: '1e17a44042e29484818e39eeff38ff35dc35bad6', variant: this.indicatorMark, required: this.required }), h("slot", { key: '172571cb3b79326bc4772c88ac91a945ddf252e6', name: "label-info" })), h("div", { key: 'c69b8d80fa6e1c1fa6d1baf365bb9a91ee3e6214', class: "gux-input-and-error-container" }, h("div", { key: '27c69e1bdba6cf73eccdef0ee90f432f74e79252', ref: el => (this.textareaContainerElement = el), class: {
+        return (h(GuxFormFieldContainer, { key: '966d5f51f4a532fa66595c58c849bb376c182561', labelPosition: this.computedLabelPosition, characterLimit: this.characterLimit }, this.renderCharacterCount(), h(GuxFormFieldLabel, { key: 'ef89834d796dc504a4c4bd33c10e07530fcd3a52', required: this.required, position: this.computedLabelPosition }, h("slot", { key: '7138084d4eaa129dfa43e9cf921118d47fda9349', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: 'fb4573bb813fcb0561c4101d929ab556c0e84405', variant: this.indicatorMark, required: this.required }), h("slot", { key: '47ee46d298e0a78c9d727c6259c4d3986de2a172', name: "label-info" })), h("div", { key: '641c6eda7d57fdb238f5d1051251f7478fc608bb', class: "gux-input-and-error-container" }, h("div", { key: 'c8cef431082346b5baa14045bca7610ec07ac0ee', 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: '3354320b3579ad47ed30155a179ab00e649b46a7', name: "input" })), h(GuxFormFieldError, { key: '3aae26fec5a70756720875fbd60a492a3ba5ef90', show: this.hasError }, h("slot", { key: '1ccfe7af52ab155d94b12f22dc712e8ed82fc6d6', name: "error" })), h(GuxFormFieldHelp, { key: '59c6e92d0ac2e49855543291cdd0fd0ee43fb742', show: !this.hasError && this.hasHelp }, h("slot", { key: '98bea039d5bc0c32e36aef4f508927c95ae45dc7', name: "help" })))));
+                'gux-input-error': this.hasError || this.charactersExceeding
+            } }, h("slot", { key: 'e248eb1d2d6ae1b247a79f0e6459592bc6f274f9', name: "input" })), h(GuxFormFieldError, { key: '23d512884a5eb6c3219fb61675cf473725e9fa3b', show: this.hasError }, h("slot", { key: 'a7288182fef55fe7fe90e65069c9755e67ae3600', name: "error" })), h(GuxFormFieldHelp, { key: '3613542fb4ecd45db886a0d8fa9cde94198e5cdb', show: !this.hasError && this.hasHelp }, h("slot", { key: 'f65391fd86031e21b9c93b711507aafda1254c73', name: "help" })))));
     }
     get variant() {
         const labelPositionVariant = this.labelPosition
@@ -110,12 +128,39 @@ export class GuxFormFieldTextarea {
             : 'none';
         return `${this.resize}-${labelPositionVariant}`;
     }
+    get characterCount() {
+        var _a, _b;
+        return (_b = (_a = this.input) === null || _a === void 0 ? void 0 : _a.value) === null || _b === void 0 ? void 0 : _b.length;
+    }
+    renderCharacterCount() {
+        if (this.characterLimit > 0) {
+            return (h(GuxFormFieldCharacterCount, { i18n: this.i18n, characterCount: this.characterCount, characterLimit: this.characterLimit, labelPosition: this.computedLabelPosition }));
+        }
+    }
+    checkCharacterLimitExceeded() {
+        if (this.characterLimit <= 0) {
+            return;
+        }
+        const isExceeding = this.characterCount > this.characterLimit;
+        if (isExceeding !== this.charactersExceeding) {
+            if (isExceeding) {
+                this.input.setAttribute('aria-invalid', 'true');
+            }
+            else {
+                this.input.removeAttribute('aria-invalid');
+            }
+            this.guxcharacterlimitexceeded.emit(isExceeding);
+            this.charactersExceeding = isExceeding;
+        }
+    }
     setInput() {
         this.input = this.root.querySelector('textarea[slot="input"]');
         preventBrowserValidationStyling(this.input);
         this.updateHeight(this.textareaContainerElement, this.input, this.resize);
         this.input.addEventListener('input', () => {
             this.updateHeight(this.textareaContainerElement, this.input, this.resize);
+            this.checkCharacterLimitExceeded();
+            forceUpdate(this.root);
         });
         this.disabled = calculateInputDisabledState(this.input);
         this.required = this.input.required;
@@ -231,6 +276,26 @@ export class GuxFormFieldTextarea {
                 "reflect": false,
                 "attribute": "indicator-mark",
                 "defaultValue": "'required'"
+            },
+            "characterLimit": {
+                "type": "number",
+                "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 textarea."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "character-limit",
+                "defaultValue": "0"
             }
         };
     }
@@ -240,10 +305,35 @@ export class GuxFormFieldTextarea {
             "disabled": {},
             "required": {},
             "hasError": {},
-            "hasHelp": {}
+            "hasHelp": {},
+            "charactersExceeding": {}
         };
     }
+    static get events() {
+        return [{
+                "method": "guxcharacterlimitexceeded",
+                "name": "guxcharacterlimitexceeded",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }];
+    }
     static get elementRef() { return "root"; }
+    static get watchers() {
+        return [{
+                "propName": "characterLimit",
+                "methodName": "handleCharacterLimitChange"
+            }];
+    }
     static get listeners() {
         return [{
                 "name": "keyup",

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

@@ -34,6 +34,54 @@ const indicatorMarkRenderConfigs = ['optional', 'required'].map(indicatorMark =>
     </gux-form-field-textarea>
   `
 }));
+const characterLimitRenderConfigs = [
+    {
+        description: 'should render component with character count when character-limit is set',
+        html: `
+      <gux-form-field-textarea character-limit="100">
+        <textarea slot="input">Sample text</textarea>
+        <label slot="label">Label</label>
+      </gux-form-field-textarea>
+    `
+    },
+    {
+        description: 'should render component with exceeded character count',
+        html: `
+      <gux-form-field-textarea character-limit="5">
+        <textarea slot="input">Sample text</textarea>
+        <label slot="label">Label</label>
+      </gux-form-field-textarea>
+    `
+    },
+    {
+        description: 'should render component with character count and label-position beside',
+        html: `
+      <gux-form-field-textarea character-limit="100" label-position="beside">
+        <textarea slot="input">Sample text</textarea>
+        <label slot="label">Label</label>
+      </gux-form-field-textarea>
+    `
+    },
+    {
+        description: 'should render component with character count and label-position screenreader',
+        html: `
+      <gux-form-field-textarea character-limit="100" label-position="screenreader">
+        <textarea slot="input"></textarea>
+        <label slot="label">Label</label>
+      </gux-form-field-textarea>
+    `
+    },
+    {
+        description: 'should render component with character count and error message',
+        html: `
+      <gux-form-field-textarea character-limit="2">
+        <textarea slot="input">Sample text</textarea>
+        <label slot="label">Label</label>
+        <span slot="error">This is an error message</span>
+      </gux-form-field-textarea>
+    `
+    }
+];
 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>` },
@@ -58,5 +106,6 @@ export const renderConfigs = [
     ...labelPositionRenderConfigs,
     ...inputAttributeRenderConfigs,
     ...indicatorMarkRenderConfigs,
-    ...optionalSlotRenderConfigs
+    ...optionalSlotRenderConfigs,
+    ...characterLimitRenderConfigs
 ];

package/dist/collection/components/stable/gux-modal/tests/gux-modal.common.js

@@ -109,5 +109,18 @@ export const renderConfigs = [
         </gux-cta-group>
       </gux-modal>
     `
+    },
+    {
+        description: 'should render small modal with RTL direction',
+        html: `
+      <gux-modal lang="ar" dir="rtl" size="small" open>
+        <div slot="title">عنوان النافذة</div>
+        <div slot="content">هذا يحتوي على محتوى النافذة.</div>
+        <gux-cta-group slot="footer" align="end">
+            <gux-button slot="primary">قبول</gux-button>
+            <gux-button slot="dismiss">إلغاء</gux-button>
+        </gux-cta-group>
+      </gux-modal>
+    `
     }
 ];

package/dist/collection/components/stable/gux-pagination/gux-pagination-buttons/gux-pagination-ellipsis-button/gux-pagination-ellipsis-button.js

@@ -60,10 +60,10 @@ export class GuxPaginationEllipsisButton {
         });
     }
     applyInputListener() {
-        var _a;
+        var _a, _b;
         (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.addEventListener('keydown', (event) => {
-            const inputValue = event.target.value.trim();
-            if (event.key == 'Enter' || event.key == ' ') {
+            if (event.key == 'Enter') {
+                const inputValue = event.target.value.trim();
                 if (inputValue == '') {
                     event.preventDefault();
                 }
@@ -73,6 +73,18 @@ export class GuxPaginationEllipsisButton {
                     this.isOpen = false;
                 }
             }
+            if (event.key == ' ') {
+                event.preventDefault();
+            }
+        });
+        (_b = this.inputElement) === null || _b === void 0 ? void 0 : _b.addEventListener('keyup', (event) => {
+            if (event.key == ' ') {
+                const inputValue = event.target.value.trim();
+                if (inputValue !== '') {
+                    this.goToPage.emit(event.target.value);
+                    this.isOpen = false;
+                }
+            }
         });
     }
     async componentWillLoad() {
@@ -84,10 +96,10 @@ export class GuxPaginationEllipsisButton {
     }
     render() {
         return [
-            h("gux-button", { key: 'ff6dcd0bae24038f98cc27378ba1bef960e60e05', accent: "ghost", id: "popover-target", type: "button", disabled: this.disabled, ref: el => (this.ellipsisButton = el), onClick: () => this.toggle(), "aria-haspopup": "true", "aria-expanded": this.isOpen.toString() }, h("gux-icon", { key: '055829d5888c36475f37059908094f22af6a25c4', screenreaderText: this.i18n('goToPage'), "icon-name": "fa/ellipsis-regular", size: "small" })),
-            h("gux-tooltip", { key: '5f1df57f1cff0666f733dccc8130535cf4fd40ce', for: "popover-target", contrast: this.tooltipContrast }, h("div", { key: 'f4ed00cb8451c0146ba5d9d7be341e7c93f671e6', slot: "content" }, this.i18n('goToPage'))),
-            h("gux-popover", { key: 'ed915ce2be82fd556b386a95f88b20fb54a34ea0', "is-open": this.isOpen, for: "popover-target" }, h("span", { key: '30db7911d089beaaabdfb0b07b52bdd771ed1afd', slot: "title" }, this.i18n('goToPage')), h("gux-form-field-number", { key: 'cc22605c48e7d5c6cde99b3a3143b64cc2eac5d8' }, h("input", { key: 'dc268d752b9e60bc394785b689fb8a3c04f59b50', slot: "input", type: "number", ref: el => (this.inputElement = el), min: "1", max: this.totalPages, value: "1", onKeyDown: evt => ['e', 'E', '+', '-', '.'].includes(evt.key) &&
-                    evt.preventDefault() }), h("label", { key: '27f5a09573883f22a8ecdb689dd7964aeb0923f9', slot: "label" })))
+            h("gux-button", { key: 'b631a4246b19b84fc191b9b5c6f7fae670255e43', accent: "ghost", id: "popover-target", type: "button", disabled: this.disabled, ref: el => (this.ellipsisButton = el), onClick: () => this.toggle(), "aria-haspopup": "true", "aria-expanded": this.isOpen.toString() }, h("gux-icon", { key: '3ffdcb461da9348f92d7908263911ba4535b378b', screenreaderText: this.i18n('goToPage'), "icon-name": "fa/ellipsis-regular", size: "small" })),
+            h("gux-tooltip", { key: 'a856c74d80b5668a9c49d975d661089c808d17ba', for: "popover-target", contrast: this.tooltipContrast }, h("div", { key: 'b4d55e585ecbda4ce9f103e5f7038548a218b24a', slot: "content" }, this.i18n('goToPage'))),
+            h("gux-popover", { key: '53f5da420aab2eeddea8ed7865d6b9f7dce153ef', "is-open": this.isOpen, for: "popover-target" }, h("span", { key: 'bd21532e024e2d364ea3cfb2b7354f7f5fc8112a', slot: "title" }, this.i18n('goToPage')), h("gux-form-field-number", { key: 'ab04f822948994eec49d6defe9474e3bde38e333' }, h("input", { key: '3db719f9308bc1233966d4db61a251bc7872383b', slot: "input", type: "number", ref: el => (this.inputElement = el), min: "1", max: this.totalPages, value: "1", onKeyDown: evt => ['e', 'E', '+', '-', '.'].includes(evt.key) &&
+                    evt.preventDefault() }), h("label", { key: '487bf2a035afe6c078256849d7be4388167e72fd', slot: "label" })))
         ];
     }
     static get is() { return "gux-pagination-ellipsis-button"; }

package/dist/collection/components/stable/gux-pagination/gux-pagination.js

@@ -62,6 +62,9 @@ export class GuxPagination {
             const container = this.root.shadowRoot.querySelector('.gux-pagination-container');
             const spacer = this.root.shadowRoot.querySelector('.gux-pagination-spacer');
             const containerWidth = container.clientWidth;
+            if (containerWidth === 0) {
+                return;
+            }
             const spacerWidth = spacer.clientWidth;
             if (spacerWidth < minAdvancedSpacerWidth &&
                 this.displayedLayout !== 'simple') {
@@ -76,6 +79,7 @@ export class GuxPagination {
     }
     componentWillLoad() {
         trackComponent(this.root, { variant: this.layout });
+        this.displayedLayout = this.layout;
     }
     componentWillRender() {
         this.totalPages = this.calculateTotalPages(this.totalItems, this.itemsPerPage);
@@ -99,7 +103,7 @@ export class GuxPagination {
     }
     render() {
         var _a;
-        return (h("div", { key: 'aff73521b29fcafc73ce87cb7798fc0745164b5d', class: "gux-pagination-container" }, h("div", { key: 'adfd12ec2a6687b657d92c22bbb3ef74ea8b2e27', class: "gux-pagination-info" }, h("gux-pagination-item-counts", { key: 'aab1f413cde27415a851f633bc7df7ecc412a9a2', "total-items": this.totalItems, "current-page": this.currentPage, "items-per-page": this.itemsPerPage }), ((_a = this.showItemsPerPage) !== null && _a !== void 0 ? _a : this.displayedLayout === 'advanced') && (h("gux-pagination-items-per-page", { key: '716cb8efda374652ed163f5c40e854c35ce590ee', disabled: this.disabled, "items-per-page": this.itemsPerPage, onInternalitemsperpagechange: this.handleInternalitemsperpagechange.bind(this) }))), h("div", { key: '454345dfe4901a179fd3faaa1ac92d8de36d32e5', class: "gux-pagination-spacer" }), h("div", { key: 'df9ad6137910cd1f21561404fa498b57848b515c', class: "gux-pagination-change" }, h("gux-pagination-buttons", { key: '562987cec97742412059eac5fe764876277eff37', disabled: this.disabled, layout: this.displayedLayout, "current-page": this.currentPage, "total-pages": this.totalPages, onInternalcurrentpagechange: this.handleInternalcurrentpagechange.bind(this) }))));
+        return (h("div", { key: '30d2f3a4ed3a123f75839bc90a9ad011b2eb2207', class: "gux-pagination-container" }, h("div", { key: '22f2e6125c1b94f0dcc4cc1c9c7c4e2aae43d40f', class: "gux-pagination-info" }, h("gux-pagination-item-counts", { key: 'b05725a5a36217f084a8fbf6e3940a0539656d44', "total-items": this.totalItems, "current-page": this.currentPage, "items-per-page": this.itemsPerPage }), ((_a = this.showItemsPerPage) !== null && _a !== void 0 ? _a : this.displayedLayout === 'advanced') && (h("gux-pagination-items-per-page", { key: 'd72fce79e0c28c92510e0ad32125058b10c414c8', disabled: this.disabled, "items-per-page": this.itemsPerPage, onInternalitemsperpagechange: this.handleInternalitemsperpagechange.bind(this) }))), h("div", { key: '05ae76ba80ed31a0e0fab5021f8d0c5e3b49bfdb', class: "gux-pagination-spacer" }), h("div", { key: 'f42ad091086a6a7901f95b8db638663b541da04f', class: "gux-pagination-change" }, h("gux-pagination-buttons", { key: 'ec0e33949371442d7f885d2fc3092e4dcc1d2ac9', disabled: this.disabled, layout: this.displayedLayout, "current-page": this.currentPage, "total-pages": this.totalPages, onInternalcurrentpagechange: this.handleInternalcurrentpagechange.bind(this) }))));
     }
     static get is() { return "gux-pagination"; }
     static get encapsulation() { return "shadow"; }