genesys-spark-components 3.17.1 → 3.20.0

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

@@ -5,8 +5,9 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { Component, Element, h, Host, State } 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 { onDisabledChange } from '../../../../../utils/dom/on-attribute-change';
 import { preventBrowserValidationStyling } from '../../../../../utils/dom/prevent-browser-validation-styling';
 import { trackComponent } from '../../../../../usage-tracking';
 import { GuxFormFieldError } from '../../functional-components/gux-form-field-error/gux-form-field-error';
@@ -46,8 +47,8 @@ export class GuxFormFieldCheckbox {
   setInput() {
     this.input = this.root.querySelector('input[type="checkbox"][slot="input"]');
     preventBrowserValidationStyling(this.input);
-    this.disabled = this.input.disabled;
-    this.disabledObserver = onDisabledChange(this.input, (disabled) => {
+    this.disabled = calculateInputDisabledState(this.input);
+    this.disabledObserver = onInputDisabledStateChange(this.input, (disabled) => {
       this.disabled = disabled;
     });
     validateFormIds(this.root, this.input);

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

@@ -5,15 +5,16 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { Component, Element, h, Prop, State } 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 { onDisabledChange } from '../../../../../utils/dom/on-attribute-change';
 import { onRequiredChange } from '../../../../../utils/dom/on-attribute-change';
 import { preventBrowserValidationStyling } from '../../../../../utils/dom/prevent-browser-validation-styling';
 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';
+import { getComputedLabelPosition, hasErrorSlot, validateFormIds } from '../../gux-form-field.service';
 /**
  * @slot input - Required slot for input tag
  * @slot label - Required slot for label tag
@@ -59,9 +60,9 @@ export class GuxFormFieldColor {
   setInput() {
     this.input = this.root.querySelector('input[type="color"][slot="input"]');
     preventBrowserValidationStyling(this.input);
-    this.disabled = this.input.disabled;
+    this.disabled = calculateInputDisabledState(this.input);
     this.required = this.input.required;
-    this.disabledObserver = onDisabledChange(this.input, (disabled) => {
+    this.disabledObserver = onInputDisabledStateChange(this.input, (disabled) => {
       this.disabled = disabled;
     });
     this.requiredObserver = onRequiredChange(this.input, (required) => {

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

@@ -67,87 +67,13 @@
   font-size: 12px;
   line-height: 16px;
 }
-::slotted(select) {
-  flex: 1 1 auto;
-  align-self: auto;
-  order: 0;
-  height: 32px;
-  padding: 0 32px 0 12px;
-  margin: 0;
-  color: #2e394c;
-  background-color: #f6f7f9;
-  border: none;
-  border-radius: 4px;
-  outline: none;
-  box-shadow: inset 0 0 4px rgba(32, 41, 55, 0.16);
-  -moz-appearance: none;
-  -webkit-appearance: none;
-  appearance: none;
-}
-::slotted(select)::placeholder {
-  color: #596373;
-  opacity: 1;
-}
 .gux-input-and-error-container {
   flex-grow: 1;
 }
-.gux-input-and-error-container .gux-input .gux-input-container {
-  position: relative;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: row;
-  flex-wrap: nowrap;
-  align-content: stretch;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  font-family: inherit;
-  font-size: 12px;
-  line-height: 1.6667;
-  color: #2e394c;
-  background-color: #f6f7f9;
-  background-image: none;
-  border: 1px solid #6b7585;
-  border-radius: 4px;
-}
-.gux-input-and-error-container .gux-input .gux-input-container.gux-disabled {
+.gux-input-and-error-container .gux-input.gux-disabled {
   pointer-events: none;
   opacity: 0.5;
 }
-.gux-input-and-error-container .gux-input .gux-input-container:hover gux-icon {
-  color: #2a60c8;
-}
-.gux-input-and-error-container .gux-input .gux-input-container select {
-  flex: 1 1 auto;
-  align-self: auto;
-  order: 0;
-  height: 32px;
-  padding: 0 32px 0 12px;
-  margin: 0;
-  color: #2e394c;
-  background-color: #f6f7f9;
-  border: none;
-  border-radius: 4px;
-  outline: none;
-  box-shadow: inset 0 0 4px rgba(32, 41, 55, 0.16);
-  -moz-appearance: none;
-  -webkit-appearance: none;
-  appearance: none;
-}
-.gux-input-and-error-container .gux-input .gux-input-container gux-icon {
-  position: absolute;
-  top: 0;
-  right: 0;
-  width: 16px;
-  height: 16px;
-  margin: 8px;
-  pointer-events: none;
-}
-.gux-input-and-error-container .gux-input .gux-input-container:focus-within {
-  border-color: #2a60c8;
-  outline: none;
-  box-shadow: 0 0 0 1px #fdfdfd, 0 0 0 4px #aac9ff;
-}
 .gux-input-and-error-container .gux-input.gux-input-error .gux-input-container {
   border-color: #ea0b0b;
 }

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

@@ -5,8 +5,9 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { Component, Element, h, Prop, State } 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 { onDisabledChange } from '../../../../../utils/dom/on-attribute-change';
 import { onRequiredChange } from '../../../../../utils/dom/on-attribute-change';
 import { trackComponent } from '../../../../../usage-tracking';
 import { GuxFormFieldContainer } from '../../functional-components/gux-form-field-container/gux-form-field-container';
@@ -43,13 +44,10 @@ export class GuxFormFieldDropdown {
       h("div", { class: "gux-input-and-error-container" },
         h("div", { class: {
             'gux-input': true,
-            'gux-input-error': this.hasError
+            'gux-input-error': this.hasError,
+            'gux-disabled': this.disabled
           } },
-          h("div", { class: {
-              'gux-dropdown-container': true,
-              'gux-disabled': this.disabled
-            } },
-            h("slot", null))),
+          h("slot", null)),
         h(GuxFormFieldError, { hasError: this.hasError },
           h("slot", { name: "error" })))));
   }
@@ -67,9 +65,9 @@ export class GuxFormFieldDropdown {
     this.listboxElement =
       this.root.querySelector('gux-listbox') ||
         this.root.querySelector('gux-listbox-multi');
-    this.disabled = this.dropdownElement.disabled;
+    this.disabled = calculateInputDisabledState(this.dropdownElement);
     this.required = this.dropdownElement.required;
-    this.disabledObserver = onDisabledChange(this.dropdownElement, (disabled) => {
+    this.disabledObserver = onInputDisabledStateChange(this.dropdownElement, (disabled) => {
       this.disabled = disabled;
     });
     this.requiredObserver = onRequiredChange(this.dropdownElement, (required) => {

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

@@ -132,7 +132,7 @@
   outline: none;
   box-shadow: 0 0 0 1px #fdfdfd, 0 0 0 4px #aac9ff;
 }
-.gux-input-and-error-container .gux-input .gux-input-container.gux-input-error .gux-input-container {
+.gux-input-and-error-container .gux-input.gux-input-error .gux-input-container {
   border-color: #ea0b0b;
 }
 .gux-step-buttons-container {

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

@@ -6,8 +6,9 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { Component, Element, h, Prop, State } from '@stencil/core';
 import { buildI18nForComponent } from '../../../../../i18n';
+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 { onDisabledChange } from '../../../../../utils/dom/on-attribute-change';
 import { onRequiredChange } from '../../../../../utils/dom/on-attribute-change';
 import { preventBrowserValidationStyling } from '../../../../../utils/dom/prevent-browser-validation-styling';
 import { trackComponent } from '../../../../../usage-tracking';
@@ -16,7 +17,7 @@ import simulateNativeEvent from '../../../../../utils/dom/simulate-native-event'
 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 } from '../../gux-form-field.service';
+import { clearInput, getComputedLabelPosition, hasContent, hasErrorSlot, validateFormIds } from '../../gux-form-field.service';
 import componentResources from './i18n/en.json';
 /**
  * @slot input - Required slot for input tag
@@ -78,9 +79,9 @@ export class GuxFormFieldNumber {
     this.input.addEventListener('input', () => {
       this.hasContent = hasContent(this.input);
     });
-    this.disabled = this.input.disabled;
+    this.disabled = calculateInputDisabledState(this.input);
     this.required = this.input.required;
-    this.disabledObserver = onDisabledChange(this.input, (disabled) => {
+    this.disabledObserver = onInputDisabledStateChange(this.input, (disabled) => {
       this.disabled = disabled;
     });
     this.requiredObserver = onRequiredChange(this.input, (required) => {

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

@@ -5,8 +5,9 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { Component, Element, h, Host, State } 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 { onDisabledChange } from '../../../../../utils/dom/on-attribute-change';
 import { preventBrowserValidationStyling } from '../../../../../utils/dom/prevent-browser-validation-styling';
 import { trackComponent } from '../../../../../usage-tracking';
 import { GuxFormFieldError } from '../../functional-components/gux-form-field-error/gux-form-field-error';
@@ -46,8 +47,8 @@ export class GuxFormFieldRadio {
   setInput() {
     this.input = this.root.querySelector('input[type="radio"][slot="input"]');
     preventBrowserValidationStyling(this.input);
-    this.disabled = this.input.disabled;
-    this.disabledObserver = onDisabledChange(this.input, (disabled) => {
+    this.disabled = calculateInputDisabledState(this.input);
+    this.disabledObserver = onInputDisabledStateChange(this.input, (disabled) => {
       this.disabled = disabled;
     });
     validateFormIds(this.root, this.input);

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

@@ -5,8 +5,9 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { Component, Element, h, Host, Listen, Prop, State } 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 { onDisabledChange } from '../../../../../utils/dom/on-attribute-change';
 import { onRequiredChange } from '../../../../../utils/dom/on-attribute-change';
 import { preventBrowserValidationStyling } from '../../../../../utils/dom/prevent-browser-validation-styling';
 import { trackComponent } from '../../../../../usage-tracking';
@@ -71,10 +72,10 @@ export class GuxFormField {
   setInput() {
     this.input = this.root.querySelector('input[type="range"][slot="input"]');
     preventBrowserValidationStyling(this.input);
-    this.disabled = this.input.disabled;
+    this.disabled = calculateInputDisabledState(this.input);
     this.required = this.input.required;
     this.value = this.input.value;
-    this.disabledObserver = onDisabledChange(this.input, (disabled) => {
+    this.disabledObserver = onInputDisabledStateChange(this.input, (disabled) => {
       this.disabled = disabled;
     });
     this.requiredObserver = onRequiredChange(this.input, (required) => {

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

@@ -5,8 +5,9 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { Component, Element, h, Prop, State } 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 { onDisabledChange } from '../../../../../utils/dom/on-attribute-change';
 import { onRequiredChange } from '../../../../../utils/dom/on-attribute-change';
 import { preventBrowserValidationStyling } from '../../../../../utils/dom/prevent-browser-validation-styling';
 import { trackComponent } from '../../../../../usage-tracking';
@@ -72,9 +73,9 @@ export class GuxFormFieldSearch {
     this.input.addEventListener('input', () => {
       this.hasContent = hasContent(this.input);
     });
-    this.disabled = this.input.disabled;
+    this.disabled = calculateInputDisabledState(this.input);
     this.required = this.input.required;
-    this.disabledObserver = onDisabledChange(this.input, (disabled) => {
+    this.disabledObserver = onInputDisabledStateChange(this.input, (disabled) => {
       this.disabled = disabled;
     });
     this.requiredObserver = onRequiredChange(this.input, (required) => {

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

@@ -5,8 +5,9 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { Component, Element, h, Prop, State } 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 { onDisabledChange } from '../../../../../utils/dom/on-attribute-change';
 import { onRequiredChange } from '../../../../../utils/dom/on-attribute-change';
 import { preventBrowserValidationStyling } from '../../../../../utils/dom/prevent-browser-validation-styling';
 import { trackComponent } from '../../../../../usage-tracking';
@@ -65,9 +66,9 @@ export class GuxFormFieldSelect {
   setInput() {
     this.input = this.root.querySelector('select[slot="input"]');
     preventBrowserValidationStyling(this.input);
-    this.disabled = this.input.disabled;
+    this.disabled = calculateInputDisabledState(this.input);
     this.required = this.input.required;
-    this.disabledObserver = onDisabledChange(this.input, (disabled) => {
+    this.disabledObserver = onInputDisabledStateChange(this.input, (disabled) => {
       this.disabled = disabled;
     });
     this.requiredObserver = onRequiredChange(this.input, (required) => {

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

@@ -84,6 +84,10 @@
   color: #596373;
   opacity: 1;
 }
+::slotted(span) {
+  color: #2e394c;
+  white-space: nowrap;
+}
 .gux-input-and-error-container {
   flex-grow: 1;
 }
@@ -108,6 +112,9 @@
   border-radius: 4px;
   box-shadow: inset 0 0 4px rgba(32, 41, 55, 0.16);
 }
+.gux-input-and-error-container .gux-input .gux-input-container.gux-has-suffix:not(.gux-input-and-error-container .gux-input .gux-input-container.gux-has-prefix) ::slotted(input) {
+  text-align: right;
+}
 .gux-input-and-error-container .gux-input .gux-input-container.gux-disabled {
   opacity: 0.5;
 }

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

@@ -5,18 +5,21 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { Component, Element, h, Prop, State } 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 { onDisabledChange } from '../../../../../utils/dom/on-attribute-change';
 import { onRequiredChange } from '../../../../../utils/dom/on-attribute-change';
 import { preventBrowserValidationStyling } from '../../../../../utils/dom/prevent-browser-validation-styling';
 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 } from '../../gux-form-field.service';
+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
  */
 export class GuxFormFieldTextLike {
@@ -32,6 +35,14 @@ export class GuxFormFieldTextLike {
     this.setInput();
     this.setLabel();
     this.hasError = hasErrorSlot(this.root);
+    this.hasPrefix = Boolean(this.root.querySelector('[slot="prefix"]'));
+    this.hasSuffix = Boolean(this.root.querySelector('[slot="suffix"]'));
+    if (this.hasPrefix) {
+      setSlotAriaDescribedby(this.root, this.input, 'prefix');
+    }
+    if (this.hasSuffix) {
+      setSlotAriaDescribedby(this.root, this.input, 'suffix');
+    }
     trackComponent(this.root, { variant: this.variant });
   }
   disconnectedCallback() {
@@ -49,9 +60,13 @@ export class GuxFormFieldTextLike {
           } },
           h("div", { class: {
               'gux-input-container': true,
-              'gux-disabled': this.disabled
+              '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" })))));
@@ -71,9 +86,9 @@ export class GuxFormFieldTextLike {
     this.input.addEventListener('input', () => {
       this.hasContent = hasContent(this.input);
     });
-    this.disabled = this.input.disabled;
+    this.disabled = calculateInputDisabledState(this.input);
     this.required = this.input.required;
-    this.disabledObserver = onDisabledChange(this.input, (disabled) => {
+    this.disabledObserver = onInputDisabledStateChange(this.input, (disabled) => {
       this.disabled = disabled;
     });
     this.requiredObserver = onRequiredChange(this.input, (required) => {
@@ -135,6 +150,8 @@ export class GuxFormFieldTextLike {
     }
   }; }
   static get states() { return {
+    "hasPrefix": {},
+    "hasSuffix": {},
     "computedLabelPosition": {},
     "disabled": {},
     "required": {},

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

@@ -5,8 +5,9 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { Component, Element, h, Prop, State } 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 { onDisabledChange } from '../../../../../utils/dom/on-attribute-change';
 import { onRequiredChange } from '../../../../../utils/dom/on-attribute-change';
 import { preventBrowserValidationStyling } from '../../../../../utils/dom/prevent-browser-validation-styling';
 import { trackComponent } from '../../../../../usage-tracking';
@@ -69,9 +70,9 @@ export class GuxFormFieldTextarea {
     this.input.addEventListener('input', () => {
       this.updateHeight(this.textareaContainerElement, this.input, this.resize);
     });
-    this.disabled = this.input.disabled;
+    this.disabled = calculateInputDisabledState(this.input);
     this.required = this.input.required;
-    this.disabledObserver = onDisabledChange(this.input, (disabled) => {
+    this.disabledObserver = onInputDisabledStateChange(this.input, (disabled) => {
       this.disabled = disabled;
     });
     this.requiredObserver = onRequiredChange(this.input, (required) => {

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

@@ -24,6 +24,7 @@ export function getComputedLabelPosition(label, labelPosition) {
   }
 }
 export function validateFormIds(root, input) {
+  var _a, _b;
   if (hasLabelSlot(root)) {
     const label = root.querySelector('label[slot="label"]');
     const inputHasId = Boolean(input.hasAttribute('id'));
@@ -52,14 +53,30 @@ export function validateFormIds(root, input) {
   if (hasErrorSlot(root)) {
     const error = root.querySelector('[slot="error"]');
     const errorId = randomHTMLId('gux-form-field-error');
+    const describedByIds = ((_a = input
+      .getAttribute('aria-describedby')) === null || _a === void 0 ? void 0 : _a.split(' ').filter(id => !id.startsWith(`gux-form-field-error`))) || [];
     error.setAttribute('id', errorId);
-    input.setAttribute('aria-describedby', errorId);
+    describedByIds.push(errorId);
+    describedByIds &&
+      input.setAttribute('aria-describedby', describedByIds.join(' '));
   }
-  else if (input.getAttribute('aria-describedby') &&
-    input.getAttribute('aria-describedby').startsWith('gux-form-field-error')) {
-    input.removeAttribute('aria-describedby');
+  else if (input.getAttribute('aria-describedby')) {
+    const describedByIds = ((_b = 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(' '));
   }
 }
+export function setSlotAriaDescribedby(root, input, slotName) {
+  var _a;
+  const slottedElement = root.querySelector(`[slot=${slotName}]`);
+  const randomId = randomHTMLId(`gux-${slotName}`);
+  const describedByIds = ((_a = input
+    .getAttribute('aria-describedby')) === null || _a === void 0 ? void 0 : _a.split(' ').filter(id => !id.startsWith(`gux-${slotName}`))) || [];
+  slottedElement.setAttribute('id', randomId);
+  describedByIds === null || describedByIds === void 0 ? void 0 : describedByIds.push(randomId);
+  describedByIds &&
+    input.setAttribute('aria-describedby', describedByIds.join(' '));
+}
 function hasLabelSlot(root) {
   return Boolean(root.querySelector('label[slot="label"]'));
 }

package/dist/collection/utils/dom/calculate-input-disabled-state.js

@@ -0,0 +1,4 @@
+export function calculateInputDisabledState(element) {
+  const fieldSet = element.closest('fieldset');
+  return element.disabled || (fieldSet === null || fieldSet === void 0 ? void 0 : fieldSet.disabled);
+}

package/dist/collection/utils/dom/on-input-disabled-state-change.js

@@ -0,0 +1,16 @@
+import { calculateInputDisabledState } from './calculate-input-disabled-state';
+export function onInputDisabledStateChange(element, callback) {
+  const fieldSet = element.closest('fieldset');
+  const observer = new MutationObserver(mutations => {
+    mutations.forEach(mutation => {
+      if (mutation.attributeName === 'disabled') {
+        callback(calculateInputDisabledState(element));
+      }
+    });
+  });
+  observer.observe(element, { attributes: true });
+  if (fieldSet) {
+    observer.observe(fieldSet, { attributes: true });
+  }
+  return observer;
+}

package/dist/deploy-info.json

@@ -1,9 +1,9 @@
 {
   "name": "spark-components",
-  "version": "3.17.0",
+  "version": "3.19.0",
   "ecosystem": "pc",
   "team": "Core UI",
   "indexFiles": [],
-  "build": "123",
-  "buildDate": "2022-08-11T09:22:10.426830Z"
+  "build": "129",
+  "buildDate": "2022-08-15T20:29:57.850411Z"
 }