genesys-spark-components 3.32.2 → 3.33.0

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

@@ -9,33 +9,36 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { 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';
-import { onRequiredChange } from '../../../../../utils/dom/on-attribute-change';
-import { preventBrowserValidationStyling } from '../../../../../utils/dom/prevent-browser-validation-styling';
+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';
+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 { trackComponent } from '../../../../../usage-tracking';
-import { GuxFormFieldContainer } from '../../functional-components/gux-form-field-container/gux-form-field-container';
-import { GuxFormFieldError } from '../../functional-components/gux-form-field-error/gux-form-field-error';
-import { GuxFormFieldLabel } from '../../functional-components/gux-form-field-label/gux-form-field-label';
-import { hasErrorSlot, getComputedLabelPosition, validateFormIds } from '../../gux-form-field.service';
 /**
  * @slot input - Required slot for input tag
  * @slot label - Required slot for label tag
  * @slot error - Optional slot for error message
+ * @slot help - Optional slot for help message
  */
 export class GuxFormFieldSelect {
   constructor() {
     this.computedLabelPosition = 'above';
     this.hasError = false;
+    this.hasHelp = false;
   }
   onMutation() {
-    this.hasError = hasErrorSlot(this.root);
+    this.hasError = hasSlot(this.root, 'error');
+    this.hasHelp = hasSlot(this.root, 'help');
   }
   componentWillLoad() {
     this.setInput();
     this.setLabel();
-    this.hasError = hasErrorSlot(this.root);
+    this.hasError = hasSlot(this.root, 'error');
+    this.hasHelp = hasSlot(this.root, 'help');
     trackComponent(this.root, { variant: this.variant });
   }
   disconnectedCallback() {
@@ -49,7 +52,7 @@ export class GuxFormFieldSelect {
       } }, h("div", { class: {
         'gux-input-container': true,
         'gux-disabled': this.disabled
-      } }, h("slot", { name: "input" }), h("gux-icon", { "icon-name": "ic-dropdown-arrow", decorative: true }))), h(GuxFormFieldError, { hasError: this.hasError }, h("slot", { name: "error" })))));
+      } }, h("slot", { name: "input" }), h("gux-icon", { "icon-name": "ic-dropdown-arrow", decorative: true }))), h(GuxFormFieldError, { show: this.hasError }, h("slot", { name: "error" })), h(GuxFormFieldHelp, { show: !this.hasError && this.hasHelp }, h("slot", { name: "help" })))));
   }
   get variant() {
     const labelPositionVariant = this.labelPosition
@@ -118,7 +121,8 @@ export class GuxFormFieldSelect {
       "computedLabelPosition": {},
       "disabled": {},
       "required": {},
-      "hasError": {}
+      "hasError": {},
+      "hasHelp": {}
     };
   }
   static get elementRef() { return "root"; }

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

@@ -57,6 +57,27 @@
   height: 1px;
   overflow: hidden;
 }
+.gux-form-field-help {
+  display: none;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-content: stretch;
+  align-items: flex-start;
+  justify-content: flex-start;
+  margin: 4px 0;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 20px;
+  color: #6b7585;
+}
+.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;
   color: #2e394c;
@@ -85,7 +106,8 @@
   color: #596373;
   opacity: 1;
 }
-::slotted(span) {
+slot[name='prefix'],
+slot[name='suffix'] {
   color: #2e394c;
   white-space: nowrap;
 }

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

@@ -9,42 +9,46 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 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';
-import { onRequiredChange } from '../../../../../utils/dom/on-attribute-change';
-import { preventBrowserValidationStyling } from '../../../../../utils/dom/prevent-browser-validation-styling';
+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';
+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 } from '../../gux-form-field.service';
 import { trackComponent } from '../../../../../usage-tracking';
-import { GuxFormFieldContainer } from '../../functional-components/gux-form-field-container/gux-form-field-container';
-import { GuxFormFieldError } from '../../functional-components/gux-form-field-error/gux-form-field-error';
-import { GuxFormFieldLabel } from '../../functional-components/gux-form-field-label/gux-form-field-label';
-import { clearInput, hasErrorSlot, hasContent, getComputedLabelPosition, validateFormIds, setSlotAriaDescribedby } from '../../gux-form-field.service';
 /**
  * @slot input - Required slot for input tag
  * @slot label - Required slot for label tag
  * @slot prefix - Optional slot for prefix
  * @slot suffix - Optional slot for suffix
  * @slot error - Optional slot for error message
+ * @slot help - Optional slot for help message
  */
 export class GuxFormFieldTextLike {
   constructor() {
     this.computedLabelPosition = 'above';
     this.hasContent = false;
     this.hasError = false;
+    this.hasHelp = false;
   }
   onMutation() {
-    this.hasError = hasErrorSlot(this.root);
+    this.hasError = hasSlot(this.root, 'error');
+    this.hasHelp = hasSlot(this.root, 'help');
   }
   // eslint-disable-next-line @typescript-eslint/require-await
   async guxForceUpdate() {
     this.hasContent = hasContent(this.input);
-    this.hasError = hasErrorSlot(this.root);
+    this.hasError = hasSlot(this.root, 'error');
+    this.hasHelp = hasSlot(this.root, 'help');
     forceUpdate(this.root);
   }
   componentWillLoad() {
     this.setInput();
     this.setLabel();
-    this.hasError = hasErrorSlot(this.root);
+    this.hasError = hasSlot(this.root, 'error');
+    this.hasHelp = hasSlot(this.root, 'help');
     this.hasPrefix = Boolean(this.root.querySelector('[slot="prefix"]'));
     this.hasSuffix = Boolean(this.root.querySelector('[slot="suffix"]'));
     if (this.hasPrefix) {
@@ -68,7 +72,7 @@ export class GuxFormFieldTextLike {
         'gux-disabled': this.disabled,
         'gux-has-prefix': this.hasPrefix,
         'gux-has-suffix': this.hasSuffix
-      } }, h("slot", { name: "prefix" }), h("slot", { name: "input" }), h("slot", { name: "suffix" }), this.clearable && this.hasContent && !this.disabled && (h("gux-form-field-input-clear-button", { onClick: () => clearInput(this.input) })))), h(GuxFormFieldError, { hasError: this.hasError }, h("slot", { name: "error" })))));
+      } }, h("slot", { name: "prefix" }), h("slot", { name: "input" }), h("slot", { name: "suffix" }), this.clearable && this.hasContent && !this.disabled && (h("gux-form-field-input-clear-button", { onClick: () => clearInput(this.input) })))), h(GuxFormFieldError, { show: this.hasError }, h("slot", { name: "error" })), h(GuxFormFieldHelp, { show: !this.hasError && this.hasHelp }, h("slot", { name: "help" })))));
   }
   get variant() {
     const labelPositionVariant = this.labelPosition
@@ -162,7 +166,8 @@ export class GuxFormFieldTextLike {
       "disabled": {},
       "required": {},
       "hasContent": {},
-      "hasError": {}
+      "hasError": {},
+      "hasHelp": {}
     };
   }
   static get methods() {

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

@@ -57,6 +57,27 @@
   height: 1px;
   overflow: hidden;
 }
+.gux-form-field-help {
+  display: none;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-content: stretch;
+  align-items: flex-start;
+  justify-content: flex-start;
+  margin: 4px 0;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 20px;
+  color: #6b7585;
+}
+.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;
   color: #2e394c;

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

@@ -9,34 +9,37 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { 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';
-import { onRequiredChange } from '../../../../../utils/dom/on-attribute-change';
-import { preventBrowserValidationStyling } from '../../../../../utils/dom/prevent-browser-validation-styling';
+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';
+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 { trackComponent } from '../../../../../usage-tracking';
-import { GuxFormFieldContainer } from '../../functional-components/gux-form-field-container/gux-form-field-container';
-import { GuxFormFieldError } from '../../functional-components/gux-form-field-error/gux-form-field-error';
-import { GuxFormFieldLabel } from '../../functional-components/gux-form-field-label/gux-form-field-label';
-import { hasErrorSlot, getComputedLabelPosition, validateFormIds } from '../../gux-form-field.service';
 /**
  * @slot input - Required slot for input tag
  * @slot label - Required slot for label tag
  * @slot error - Optional slot for error message
+ * @slot help - Optional slot for help message
  */
 export class GuxFormFieldTextarea {
   constructor() {
     this.computedLabelPosition = 'above';
     this.required = true;
     this.hasError = false;
+    this.hasHelp = false;
   }
   onMutation() {
-    this.hasError = hasErrorSlot(this.root);
+    this.hasError = hasSlot(this.root, 'error');
+    this.hasHelp = hasSlot(this.root, 'help');
   }
   componentWillLoad() {
     this.setInput();
     this.setLabel();
-    this.hasError = hasErrorSlot(this.root);
+    this.hasError = hasSlot(this.root, 'error');
+    this.hasHelp = hasSlot(this.root, 'help');
     trackComponent(this.root, { variant: this.variant });
   }
   componentDidLoad() {
@@ -52,7 +55,7 @@ export class GuxFormFieldTextarea {
         [`gux-resize-${this.resize}`]: true,
         'gux-disabled': this.disabled,
         'gux-input-error': this.hasError
-      } }, h("slot", { name: "input" })), h(GuxFormFieldError, { hasError: this.hasError }, h("slot", { name: "error" })))));
+      } }, h("slot", { name: "input" })), h(GuxFormFieldError, { show: this.hasError }, h("slot", { name: "error" })), h(GuxFormFieldHelp, { show: !this.hasError && this.hasHelp }, h("slot", { name: "help" })))));
   }
   get variant() {
     const labelPositionVariant = this.labelPosition
@@ -154,7 +157,8 @@ export class GuxFormFieldTextarea {
       "computedLabelPosition": {},
       "disabled": {},
       "required": {},
-      "hasError": {}
+      "hasError": {},
+      "hasHelp": {}
     };
   }
   static get elementRef() { return "root"; }

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

@@ -60,6 +60,27 @@
   height: 1px;
   overflow: hidden;
 }
+.gux-form-field-help {
+  display: none;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-content: stretch;
+  align-items: flex-start;
+  justify-content: flex-start;
+  margin: 4px 0;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 20px;
+  color: #6b7585;
+}
+.gux-form-field-help.gux-show {
+  display: flex;
+}
+.gux-form-field-help .gux-message {
+  flex: 0 1 auto;
+  align-self: none;
+  order: 0;
+}
 ::slotted(label) {
   font-family: Roboto, sans-serif;
   font-weight: 400;

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

@@ -10,23 +10,25 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { h } from '@stencil/core';
 import { buildI18nForComponent } from '../../../../../i18n';
-import { OnMutation } from '../../../../../utils/decorator/on-mutation';
-import { onDisabledChange, onRequiredChange } from '../../../../../utils/dom/on-attribute-change';
+import { OnMutation } from '@utils/decorator/on-mutation';
+import { onDisabledChange, onRequiredChange } from '@utils/dom/on-attribute-change';
+import { hasSlot } from '@utils/dom/has-slot';
+import { getSlotTextContent } from '@utils/dom/get-slot-text-content';
+import { GuxFormFieldHelp, GuxFormFieldError, GuxFormFieldFieldsetContainer, GuxFormFieldLegendLabel } from '../../functional-components/functional-components';
+import { getComputedLabelPosition, validateFormIds } from '../../gux-form-field.service';
 import { trackComponent } from '../../../../../usage-tracking';
-import { GuxFormFieldFieldsetContainer } from '../../functional-components/gux-form-field-fieldset-container/gux-form-field-fieldset-container';
-import { GuxFormFieldError } from '../../functional-components/gux-form-field-error/gux-form-field-error';
-import { GuxFormFieldLegendLabel } from '../../functional-components/gux-form-field-legend-label/gux-form-field-legend-label';
-import { hasErrorSlot, getComputedLabelPosition, getErrorSlotTextContent, validateFormIds } from '../../gux-form-field.service';
 import componentResources from './i18n/en.json';
 /**
- * @slot - Required slot for gux-time-picker-beta tag
+ * @slot Required slot for gux-time-picker-beta tag
  * @slot label - Required slot for label tag
  * @slot error - Optional slot for error message
+ * @slot help - Optional slot for help message
  */
 export class GuxFormFieldTimePicker {
   constructor() {
     this.computedLabelPosition = 'above';
     this.hasError = false;
+    this.hasHelp = false;
   }
   watchValue(hasError) {
     const timePickerSlot = this.root.querySelector('gux-time-picker-beta');
@@ -35,13 +37,15 @@ export class GuxFormFieldTimePicker {
     }
   }
   onMutation() {
-    this.hasError = hasErrorSlot(this.root);
+    this.hasError = hasSlot(this.root, 'error');
+    this.hasHelp = hasSlot(this.root, 'help');
   }
   async componentWillLoad() {
     this.getI18nValue = await buildI18nForComponent(this.root, componentResources);
     this.setInput();
     this.setLabel();
-    this.hasError = hasErrorSlot(this.root);
+    this.hasError = hasSlot(this.root, 'error');
+    this.hasHelp = hasSlot(this.root, 'help');
     trackComponent(this.root, { variant: this.variant });
   }
   disconnectedCallback() {
@@ -49,13 +53,13 @@ export class GuxFormFieldTimePicker {
     this.requiredObserver.disconnect();
   }
   render() {
-    return (h(GuxFormFieldFieldsetContainer, { labelPosition: this.computedLabelPosition }, h(GuxFormFieldLegendLabel, { position: this.computedLabelPosition, required: this.required }, h("slot", { name: "label", onSlotchange: () => this.setLabel() }), this.renderScreenReaderText(this.getI18nValue('required'), this.required), this.renderScreenReaderText(getErrorSlotTextContent(this.root), this.hasError)), h("div", { class: "gux-input-and-error-container" }, h("div", { class: {
+    return (h(GuxFormFieldFieldsetContainer, { labelPosition: this.computedLabelPosition }, h(GuxFormFieldLegendLabel, { position: this.computedLabelPosition, required: this.required }, h("slot", { name: "label", onSlotchange: () => this.setLabel() }), this.renderScreenReaderText(this.getI18nValue('required'), this.required), this.renderScreenReaderText(getSlotTextContent(this.root, 'error'), this.hasError)), h("div", { class: "gux-input-and-error-container" }, h("div", { class: {
         'gux-input': true,
         'gux-input-error': this.hasError
       } }, h("div", { class: {
         'gux-time-picker-container': true,
         'gux-disabled': this.disabled
-      } }, h("slot", null))), h(GuxFormFieldError, { hasError: this.hasError }, h("slot", { name: "error" })))));
+      } }, h("slot", null))), h(GuxFormFieldError, { show: this.hasError }, h("slot", { name: "error" })), h(GuxFormFieldHelp, { show: !this.hasError && this.hasHelp }, h("slot", { name: "help" })))));
   }
   renderScreenReaderText(text, condition = true) {
     if (condition) {
@@ -128,7 +132,8 @@ export class GuxFormFieldTimePicker {
       "computedLabelPosition": {},
       "disabled": {},
       "required": {},
-      "hasError": {}
+      "hasError": {},
+      "hasHelp": {}
     };
   }
   static get elementRef() { return "root"; }

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

@@ -0,0 +1,7 @@
+import { GuxFormFieldHelp } from './gux-form-field-help/gux-form-field-help';
+import { GuxFormFieldError } from './gux-form-field-error/gux-form-field-error';
+import { GuxFormFieldLabel } from './gux-form-field-label/gux-form-field-label';
+import { GuxFormFieldContainer } from './gux-form-field-container/gux-form-field-container';
+import { GuxFormFieldLegendLabel } from './gux-form-field-legend-label/gux-form-field-legend-label';
+import { GuxFormFieldFieldsetContainer } from './gux-form-field-fieldset-container/gux-form-field-fieldset-container';
+export { GuxFormFieldHelp, GuxFormFieldError, GuxFormFieldLabel, GuxFormFieldContainer, GuxFormFieldLegendLabel, GuxFormFieldFieldsetContainer };

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

@@ -1,7 +1,7 @@
 import { h } from '@stencil/core';
-export const GuxFormFieldError = ({ hasError }, children) => {
+export const GuxFormFieldError = ({ show }, children) => {
   return (h("div", { class: {
       'gux-form-field-error': true,
-      'gux-show': hasError
+      'gux-show': show
     } }, h("gux-icon", { "icon-name": "alert-warning-octogon", decorative: true }), h("div", { class: "gux-message" }, children)));
 };

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

@@ -0,0 +1,7 @@
+import { h } from '@stencil/core';
+export const GuxFormFieldHelp = ({ show }, children) => {
+  return (h("div", { class: {
+      'gux-form-field-help': true,
+      'gux-show': show
+    } }, h("div", { class: "gux-message" }, children)));
+};

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

@@ -1,16 +1,10 @@
 import { randomHTMLId } from '../../../utils/dom/random-html-id';
 import { logError } from '../../../utils/error/log-error';
 import setInputValue from '../../../utils/dom/set-input-value';
+import { hasSlot } from '@utils/dom/has-slot';
 export function clearInput(input) {
   setInputValue(input, '', true);
 }
-export function hasErrorSlot(root) {
-  return Boolean(root.querySelector('[slot="error"]'));
-}
-export function getErrorSlotTextContent(root) {
-  var _a;
-  return (_a = root.querySelector('[slot="error"]')) === null || _a === void 0 ? void 0 : _a.textContent;
-}
 export function hasContent(input) {
   return Boolean(input.value);
 }
@@ -28,7 +22,7 @@ export function getComputedLabelPosition(label, labelPosition) {
   }
 }
 export function validateFormIds(root, input) {
-  var _a, _b;
+  var _a, _b, _c, _d;
   if (hasLabelSlot(root)) {
     const label = root.querySelector('label[slot="label"]');
     const inputHasId = Boolean(input.hasAttribute('id'));
@@ -54,7 +48,7 @@ export function validateFormIds(root, input) {
   else {
     logError(root.tagName.toLowerCase(), 'A label is required for this component. If a visual label is not needed for this use case, please add localized text for a screenreader and set the label-position attribute to "screenreader" to visually hide the label.');
   }
-  if (hasErrorSlot(root)) {
+  if (hasSlot(root, 'error')) {
     const error = root.querySelector('[slot="error"]');
     const errorId = randomHTMLId('gux-form-field-error');
     const describedByIds = ((_a = input
@@ -69,6 +63,21 @@ export function validateFormIds(root, input) {
       .getAttribute('aria-describedby')) === null || _b === void 0 ? void 0 : _b.split(' ').filter(id => !id.startsWith(`gux-form-field-error`))) || [];
     input.setAttribute('aria-describedby', describedByIds.join(' '));
   }
+  if (hasSlot(root, 'help')) {
+    const help = root.querySelector('[slot="help"]');
+    const helpId = randomHTMLId('gux-form-field-help');
+    const describedByIds = ((_c = input
+      .getAttribute('aria-describedby')) === null || _c === void 0 ? void 0 : _c.split(' ').filter(id => !id.startsWith(`gux-form-field-help`))) || [];
+    help.setAttribute('id', helpId);
+    describedByIds.push(helpId);
+    describedByIds &&
+      input.setAttribute('aria-describedby', describedByIds.join(' '));
+  }
+  else if (input.getAttribute('aria-describedby')) {
+    const describedByIds = ((_d = input
+      .getAttribute('aria-describedby')) === null || _d === void 0 ? void 0 : _d.split(' ').filter(id => !id.startsWith(`gux-form-field-help`))) || [];
+    input.setAttribute('aria-describedby', describedByIds.join(' '));
+  }
 }
 export function setSlotAriaDescribedby(root, input, slotName) {
   var _a;

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

@@ -1,5 +1,5 @@
 import { h, Host } from '@stencil/core';
-import { actOnActiveOption, clearActiveOptions, goToOption, hasPreviousOption, hasNextOption, onClickedOption, setFirstOptionActive, setInitialActiveOption, setLastOptionActive, setNextOptionActive, setPreviousOptionActive } from './gux-listbox.service';
+import { actOnActiveOption, clearActiveOptions, goToOption, hasPreviousOption, hasNextOption, onClickedOption, setFirstOptionActive, setInitialActiveOption, setLastOptionActive, setNextOptionActive, setPreviousOptionActive, matchOption } from './gux-listbox.service';
 import { buildI18nForComponent } from '../../../i18n';
 import { whenEventIsFrom } from '../../../utils/dom/when-event-is-from';
 import simulateNativeEvent from '../../../utils/dom/simulate-native-event';
@@ -108,9 +108,7 @@ export class GuxListbox {
   componentWillRender() {
     this.listboxOptions.forEach(listboxOption => {
       listboxOption.selected = listboxOption.value === this.value;
-      listboxOption.filtered = !listboxOption.textContent
-        .toLowerCase()
-        .startsWith(this.filter.toLowerCase());
+      listboxOption.filtered = !matchOption(listboxOption, this.filter);
     });
     this.allListboxOptionsFiltered =
       this.listboxOptions.filter(listboxOption => !listboxOption.filtered)

package/dist/collection/components/stable/gux-listbox/gux-listbox.service.js

@@ -67,7 +67,7 @@ function hasActiveOption(list) {
 export function getSearchOption(list, searchString) {
   return getListOptions(list).find(option => {
     return ((!option.disabled || !option.filtered) &&
-      option.textContent.toLowerCase().startsWith(searchString.toLowerCase()));
+      matchOption(option, searchString));
   });
 }
 function setSearchOptionActive(list, searchString) {
@@ -144,3 +144,10 @@ export function goToOption(list, letter) {
     searchStringState = '';
   }, searchDebounceInterval);
 }
+export function matchOption(option, matchString) {
+  //The text content needs to be trimmed as white space can occur around the textContent if options are populated asynchronously.
+  return option.textContent
+    .trim()
+    .toLowerCase()
+    .startsWith(matchString.toLowerCase());
+}

package/dist/collection/utils/dom/get-slot-text-content.js

@@ -0,0 +1,4 @@
+export function getSlotTextContent(root, slotName) {
+  var _a;
+  return (_a = root.querySelector(`[slot=${slotName}]`)) === null || _a === void 0 ? void 0 : _a.textContent;
+}

package/dist/deploy-info.json

@@ -1,9 +1,9 @@
 {
   "name": "spark-components",
-  "version": "3.32.1",
+  "version": "3.32.3",
   "ecosystem": "pc",
   "team": "Core UI",
   "indexFiles": [],
-  "build": "197",
-  "buildDate": "2022-09-29T08:41:10.457602Z"
+  "build": "201",
+  "buildDate": "2022-09-30T13:42:00.994703Z"
 }