genesys-spark-components 3.32.3 → 3.33.0

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

@@ -4,11 +4,12 @@ import { c as calculateInputDisabledState, o as onInputDisabledStateChange } fro
 import { O as OnMutation } from './on-mutation-70eb931c.js';
 import { a as onRequiredChange } from './on-attribute-change-2b01c315.js';
 import { p as preventBrowserValidationStyling } from './prevent-browser-validation-styling-d16c3f4c.js';
-import { t as trackComponent } from './usage-tracking-208cef9e.js';
 import { s as setInputValue } from './set-input-value-5adeaccc.js';
 import { s as simulateNativeEvent } from './simulate-native-event-ac69961f.js';
-import { G as GuxFormFieldLabel, a as GuxFormFieldContainer } from './gux-form-field-label-9c6f4df6.js';
-import { h as hasErrorSlot, a as hasContent, c as clearInput, G as GuxFormFieldError, v as validateFormIds, g as getComputedLabelPosition } from './gux-form-field.service-25a9237e.js';
+import { h as hasSlot } from './has-slot-062ae63a.js';
+import { h as hasContent, c as clearInput, G as GuxFormFieldError, a as GuxFormFieldHelp, v as validateFormIds, g as getComputedLabelPosition } from './gux-form-field.service-e046de13.js';
+import { G as GuxFormFieldLabel, a as GuxFormFieldContainer } from './gux-form-field-container-2d8e8d4e.js';
+import { t as trackComponent } from './usage-tracking-2c66c99e.js';
 import './get-closest-element-1597503c.js';
 import './random-html-id-8e3f658c.js';
 import './log-error-b1a1a086.js';
@@ -20,7 +21,7 @@ const componentResources = {
 	decrement: decrement
 };
 
-const guxFormFieldNumberCss = ".gux-form-field-container{margin:var(--gux-form-field-container-margin-top, 16px) 0 var(--gux-form-field-container-margin-bottom, 16px) 0}.gux-form-field-container.gux-beside{display:flex;flex-direction:row}.gux-form-field-error{display:none;flex-direction:row;flex-wrap:nowrap;align-content:stretch;align-items:flex-start;justify-content:flex-start;margin:4px 0;font-size:11px;line-height:16px;color:#2e394c}.gux-form-field-error.gux-show{display:flex}.gux-form-field-error gux-icon{flex:0 1 auto;align-self:auto;order:0;width:16px;height:16px;margin-right:4px;color:#ea0b0b}.gux-form-field-error .gux-message{flex:0 1 auto;align-self:auto;order:0}.gux-form-field-label.gux-required::after{font-size:12px;color:#ea0b0b;content:' *'}.gux-form-field-label.gux-beside{position:relative;top:8px;width:fit-content;min-width:45px;margin-right:8px}.gux-form-field-label.gux-above{margin-bottom:8px}.gux-form-field-label.gux-screenreader{position:absolute;top:auto;left:-10000px;width:1px;height:1px;overflow:hidden}:host{display:block;color:#2e394c}::slotted(label){font-family:Roboto, sans-serif;font-weight:400;font-weight:700;font-size:12px;line-height:16px}::slotted(input){flex:1 1 auto;align-self:auto;order:0;width:100%;overflow:hidden;font-size:12px;color:#2e394c;text-align:right;text-overflow:ellipsis;background-color:#f6f7f9;border:none;outline:none}::slotted(input)::placeholder{color:#596373;opacity:1}.gux-input-and-error-container{flex-grow:1}.gux-input-and-error-container .gux-input{display:flex;flex-direction:row;flex-wrap:nowrap;align-content:stretch;align-items:center;width:100%}.gux-input-and-error-container .gux-input .gux-input-container{box-sizing:border-box;display:flex;flex:1 1 auto;flex-direction:row;flex-wrap:nowrap;align-content:stretch;align-items:center;align-self:auto;justify-content:center;order:0;width:100%;height:32px;padding:4px 12px;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;box-shadow:inset 0 0 4px rgba(32, 41, 55, 0.16)}.gux-input-and-error-container .gux-input .gux-input-container.gux-disabled{opacity:0.5}.gux-input-and-error-container .gux-input .gux-input-container.gux-clear{padding-right:0}.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}.gux-step-buttons-container{flex:0 1 16px;align-self:auto;order:0;margin:0 4px}.gux-step-buttons-container .gux-step-button{flex:0 1 auto;align-self:auto;order:0;padding:2px;color:#596373;background:transparent;border:none}.gux-step-buttons-container .gux-step-button:not(:disabled):focus,.gux-step-buttons-container .gux-step-button:not(:disabled):hover{color:#2a60c8;cursor:pointer}.gux-step-buttons-container .gux-step-button gux-icon{width:10px;height:10px}";
+const guxFormFieldNumberCss = ".gux-form-field-container{margin:var(--gux-form-field-container-margin-top, 16px) 0 var(--gux-form-field-container-margin-bottom, 16px) 0}.gux-form-field-container.gux-beside{display:flex;flex-direction:row}.gux-form-field-error{display:none;flex-direction:row;flex-wrap:nowrap;align-content:stretch;align-items:flex-start;justify-content:flex-start;margin:4px 0;font-size:11px;line-height:16px;color:#2e394c}.gux-form-field-error.gux-show{display:flex}.gux-form-field-error gux-icon{flex:0 1 auto;align-self:auto;order:0;width:16px;height:16px;margin-right:4px;color:#ea0b0b}.gux-form-field-error .gux-message{flex:0 1 auto;align-self:auto;order:0}.gux-form-field-label.gux-required::after{font-size:12px;color:#ea0b0b;content:' *'}.gux-form-field-label.gux-beside{position:relative;top:8px;width:fit-content;min-width:45px;margin-right:8px}.gux-form-field-label.gux-above{margin-bottom:8px}.gux-form-field-label.gux-screenreader{position:absolute;top:auto;left:-10000px;width:1px;height:1px;overflow:hidden}.gux-form-field-help{display:none;flex-direction:row;flex-wrap:nowrap;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}::slotted(label){font-family:Roboto, sans-serif;font-weight:400;font-weight:700;font-size:12px;line-height:16px}::slotted(input){flex:1 1 auto;align-self:auto;order:0;width:100%;overflow:hidden;font-size:12px;color:#2e394c;text-align:right;text-overflow:ellipsis;background-color:#f6f7f9;border:none;outline:none}::slotted(input)::placeholder{color:#596373;opacity:1}.gux-input-and-error-container{flex-grow:1}.gux-input-and-error-container .gux-input{display:flex;flex-direction:row;flex-wrap:nowrap;align-content:stretch;align-items:center;width:100%}.gux-input-and-error-container .gux-input .gux-input-container{box-sizing:border-box;display:flex;flex:1 1 auto;flex-direction:row;flex-wrap:nowrap;align-content:stretch;align-items:center;align-self:auto;justify-content:center;order:0;width:100%;height:32px;padding:4px 12px;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;box-shadow:inset 0 0 4px rgba(32, 41, 55, 0.16)}.gux-input-and-error-container .gux-input .gux-input-container.gux-disabled{opacity:0.5}.gux-input-and-error-container .gux-input .gux-input-container.gux-clear{padding-right:0}.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}.gux-step-buttons-container{flex:0 1 16px;align-self:auto;order:0;margin:0 4px}.gux-step-buttons-container .gux-step-button{flex:0 1 auto;align-self:auto;order:0;padding:2px;color:#596373;background:transparent;border:none}.gux-step-buttons-container .gux-step-button:not(:disabled):focus,.gux-step-buttons-container .gux-step-button:not(:disabled):hover{color:#2a60c8;cursor:pointer}.gux-step-buttons-container .gux-step-button gux-icon{width:10px;height:10px}";
 
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -38,21 +39,25 @@ const GuxFormFieldNumber = class {
     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);
   }
   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() {
@@ -68,7 +73,7 @@ const GuxFormFieldNumber = class {
         'gux-input-container': true,
         'gux-disabled': this.disabled,
         'gux-clear': showClearButton
-      } }, h("slot", { name: "input", onSlotchange: () => this.setInput() }), showClearButton && (h("gux-form-field-input-clear-button", { onClick: () => clearInput(this.input) }))), this.renderStepButtons(this.input, this.getI18nValue, this.disabled)), h(GuxFormFieldError, { hasError: this.hasError }, h("slot", { name: "error" })))));
+      } }, h("slot", { name: "input", onSlotchange: () => this.setInput() }), showClearButton && (h("gux-form-field-input-clear-button", { onClick: () => clearInput(this.input) }))), this.renderStepButtons(this.input, this.getI18nValue, this.disabled)), 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

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

@@ -2,14 +2,15 @@ import { r as registerInstance, h, H as Host, g as getElement } from './index-73
 import { c as calculateInputDisabledState, o as onInputDisabledStateChange } from './on-input-disabled-state-change-3ea76372.js';
 import { O as OnMutation } from './on-mutation-70eb931c.js';
 import { p as preventBrowserValidationStyling } from './prevent-browser-validation-styling-d16c3f4c.js';
-import { t as trackComponent } from './usage-tracking-208cef9e.js';
-import { h as hasErrorSlot, G as GuxFormFieldError, v as validateFormIds } from './gux-form-field.service-25a9237e.js';
+import { h as hasSlot } from './has-slot-062ae63a.js';
+import { G as GuxFormFieldError, a as GuxFormFieldHelp, v as validateFormIds } from './gux-form-field.service-e046de13.js';
+import { t as trackComponent } from './usage-tracking-2c66c99e.js';
 import './random-html-id-8e3f658c.js';
 import './log-error-b1a1a086.js';
 import './set-input-value-5adeaccc.js';
 import './simulate-native-event-ac69961f.js';
 
-const guxFormFieldRadioCss = ".gux-form-field-error{display:none;flex-direction:row;flex-wrap:nowrap;align-content:stretch;align-items:flex-start;justify-content:flex-start;margin:4px 0;font-size:11px;line-height:16px;color:#2e394c}.gux-form-field-error.gux-show{display:flex}.gux-form-field-error gux-icon{flex:0 1 auto;align-self:auto;order:0;width:16px;height:16px;margin-right:4px;color:#ea0b0b}.gux-form-field-error .gux-message{flex:0 1 auto;align-self:auto;order:0}:host{display:block;color:#2e394c}:host(.gux-disabled){cursor:not-allowed;opacity:0.5}:host(.gux-disabled) ::slotted(label){cursor:not-allowed}.gux-input-label{display:flex;flex-direction:row}.gux-input-label .gux-label{display:flex;flex-direction:column}::slotted(input[type='radio']){display:inline-grid;width:16px;height:16px;margin:4px;text-align:center;vertical-align:middle;cursor:pointer;border:0;-webkit-appearance:none;appearance:none;outline:none}::slotted(input[type='radio'])::before{grid-area:1;content:'';border-radius:50%}::slotted(input[type='radio']:focus-within)::before{outline:none;box-shadow:0 0 0 1px #fdfdfd, 0 0 0 4px #aac9ff}::slotted(input[type='radio']:not(:checked))::before{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 3.062C5.239 3.062 3 5.273 3 8s2.239 4.938 5 4.938c2.762 0 5-2.211 5-4.938s-2.238-4.938-5-4.938zm0 9a4 4 0 1 1 0-8 4 4 0 0 1 0 8z' fill-rule='evenodd' clip-rule='evenodd' fill='%2377828f'/%3E%3C/svg%3E\")}::slotted(input[type='radio']:not(:checked):not(:disabled):hover)::before{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 3.062C5.239 3.062 3 5.273 3 8s2.239 4.938 5 4.938c2.762 0 5-2.211 5-4.938s-2.238-4.938-5-4.938zm0 9a4 4 0 1 1 0-8 4 4 0 0 1 0 8z' fill-rule='evenodd' clip-rule='evenodd' fill='%232a60c8'/%3E%3C/svg%3E\")}::slotted(input[type='radio']:checked)::before{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8.026 5.262a2.8 2.8 0 1 0 .001 5.601 2.8 2.8 0 0 0-.001-5.601zm0-2.2c-2.761 0-5 2.211-5 4.938s2.239 4.938 5 4.938c2.762 0 5-2.211 5-4.938s-2.238-4.938-5-4.938zm0 9a4 4 0 1 1 0-8 4 4 0 0 1 0 8z' fill='%232a60c8'/%3E%3C/svg%3E\")}::slotted(input[type='radio']:disabled)::before{cursor:not-allowed;opacity:0.5}::slotted(label){display:inline-block;font-size:12px;line-height:24px;vertical-align:middle}";
+const guxFormFieldRadioCss = ".gux-form-field-error{display:none;flex-direction:row;flex-wrap:nowrap;align-content:stretch;align-items:flex-start;justify-content:flex-start;margin:4px 0;font-size:11px;line-height:16px;color:#2e394c}.gux-form-field-error.gux-show{display:flex}.gux-form-field-error gux-icon{flex:0 1 auto;align-self:auto;order:0;width:16px;height:16px;margin-right:4px;color:#ea0b0b}.gux-form-field-error .gux-message{flex:0 1 auto;align-self:auto;order:0}.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}:host(.gux-disabled){cursor:not-allowed;opacity:0.5}:host(.gux-disabled) ::slotted(label){cursor:not-allowed}.gux-input-label{display:flex;flex-direction:row}.gux-input-label .gux-label{display:flex;flex-direction:column}::slotted(input[type='radio']){display:inline-grid;width:16px;height:16px;margin:4px;text-align:center;vertical-align:middle;cursor:pointer;border:0;-webkit-appearance:none;appearance:none;outline:none}::slotted(input[type='radio'])::before{grid-area:1;content:'';border-radius:50%}::slotted(input[type='radio']:focus-within)::before{outline:none;box-shadow:0 0 0 1px #fdfdfd, 0 0 0 4px #aac9ff}::slotted(input[type='radio']:not(:checked))::before{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 3.062C5.239 3.062 3 5.273 3 8s2.239 4.938 5 4.938c2.762 0 5-2.211 5-4.938s-2.238-4.938-5-4.938zm0 9a4 4 0 1 1 0-8 4 4 0 0 1 0 8z' fill-rule='evenodd' clip-rule='evenodd' fill='%2377828f'/%3E%3C/svg%3E\")}::slotted(input[type='radio']:not(:checked):not(:disabled):hover)::before{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 3.062C5.239 3.062 3 5.273 3 8s2.239 4.938 5 4.938c2.762 0 5-2.211 5-4.938s-2.238-4.938-5-4.938zm0 9a4 4 0 1 1 0-8 4 4 0 0 1 0 8z' fill-rule='evenodd' clip-rule='evenodd' fill='%232a60c8'/%3E%3C/svg%3E\")}::slotted(input[type='radio']:checked)::before{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8.026 5.262a2.8 2.8 0 1 0 .001 5.601 2.8 2.8 0 0 0-.001-5.601zm0-2.2c-2.761 0-5 2.211-5 4.938s2.239 4.938 5 4.938c2.762 0 5-2.211 5-4.938s-2.238-4.938-5-4.938zm0 9a4 4 0 1 1 0-8 4 4 0 0 1 0 8z' fill='%232a60c8'/%3E%3C/svg%3E\")}::slotted(input[type='radio']:disabled)::before{cursor:not-allowed;opacity:0.5}::slotted(label){display:inline-block;font-size:12px;line-height:24px;vertical-align:middle}";
 
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -25,13 +26,16 @@ const GuxFormFieldRadio = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     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.hasError = hasErrorSlot(this.root);
+    this.hasError = hasSlot(this.root, 'error');
+    this.hasHelp = hasSlot(this.root, 'help');
     trackComponent(this.root);
   }
   disconnectedCallback() {
@@ -41,7 +45,7 @@ const GuxFormFieldRadio = class {
     return (h(Host, { class: {
         'gux-input-error': this.hasError,
         'gux-disabled': this.disabled
-      } }, h("div", { class: "gux-form-field-container" }, h("div", { class: "gux-input-label" }, h("div", { class: "gux-input" }, h("slot", { name: "input", onSlotchange: () => this.setInput() })), h("div", { class: "gux-label" }, h("slot", { name: "label" }), h(GuxFormFieldError, { hasError: this.hasError }, h("slot", { name: "error" })))))));
+      } }, h("div", { class: "gux-form-field-container" }, h("div", { class: "gux-input-label" }, h("div", { class: "gux-input" }, h("slot", { name: "input", onSlotchange: () => this.setInput() })), h("div", { class: "gux-label" }, h("slot", { name: "label" }), h(GuxFormFieldError, { show: this.hasError }, h("slot", { name: "error" })), h(GuxFormFieldHelp, { show: !this.hasError && this.hasHelp }, h("slot", { name: "help" })))))));
   }
   setInput() {
     this.input = this.root.querySelector('input[type="radio"][slot="input"]');

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

@@ -3,15 +3,16 @@ import { c as calculateInputDisabledState, o as onInputDisabledStateChange } fro
 import { O as OnMutation } from './on-mutation-70eb931c.js';
 import { a as onRequiredChange } from './on-attribute-change-2b01c315.js';
 import { p as preventBrowserValidationStyling } from './prevent-browser-validation-styling-d16c3f4c.js';
-import { t as trackComponent } from './usage-tracking-208cef9e.js';
-import { a as GuxFormFieldContainer, G as GuxFormFieldLabel } from './gux-form-field-label-9c6f4df6.js';
-import { h as hasErrorSlot, G as GuxFormFieldError, v as validateFormIds, g as getComputedLabelPosition } from './gux-form-field.service-25a9237e.js';
+import { h as hasSlot } from './has-slot-062ae63a.js';
+import { G as GuxFormFieldError, a as GuxFormFieldHelp, v as validateFormIds, g as getComputedLabelPosition } from './gux-form-field.service-e046de13.js';
+import { a as GuxFormFieldContainer, G as GuxFormFieldLabel } from './gux-form-field-container-2d8e8d4e.js';
+import { t as trackComponent } from './usage-tracking-2c66c99e.js';
 import './random-html-id-8e3f658c.js';
 import './log-error-b1a1a086.js';
 import './set-input-value-5adeaccc.js';
 import './simulate-native-event-ac69961f.js';
 
-const guxFormFieldRangeCss = ".gux-form-field-container{margin:var(--gux-form-field-container-margin-top, 16px) 0 var(--gux-form-field-container-margin-bottom, 16px) 0}.gux-form-field-container.gux-beside{display:flex;flex-direction:row}.gux-form-field-error{display:none;flex-direction:row;flex-wrap:nowrap;align-content:stretch;align-items:flex-start;justify-content:flex-start;margin:4px 0;font-size:11px;line-height:16px;color:#2e394c}.gux-form-field-error.gux-show{display:flex}.gux-form-field-error gux-icon{flex:0 1 auto;align-self:auto;order:0;width:16px;height:16px;margin-right:4px;color:#ea0b0b}.gux-form-field-error .gux-message{flex:0 1 auto;align-self:auto;order:0}.gux-form-field-label.gux-required::after{font-size:12px;color:#ea0b0b;content:' *'}.gux-form-field-label.gux-beside{position:relative;top:8px;width:fit-content;min-width:45px;margin-right:8px}.gux-form-field-label.gux-above{margin-bottom:8px}.gux-form-field-label.gux-screenreader{position:absolute;top:auto;left:-10000px;width:1px;height:1px;overflow:hidden}:host{display:block;color:#2e394c}::slotted(label){font-family:Roboto, sans-serif;font-weight:400;font-weight:700;font-size:12px;line-height:16px}::slotted(input[type='range']){position:absolute;width:100%;height:2px;margin:6px 0;margin-top:calc(-1 * (12px / 2 + 2px));background:transparent;-webkit-appearance:none}.gux-input-and-error-container{flex-grow:1}.gux-input-and-error-container .gux-range-input-container{display:flex;flex-direction:row;flex-wrap:nowrap;align-content:stretch;align-items:center;justify-content:flex-start;height:32px;font-size:12px}.gux-input-and-error-container .gux-range-input-container.gux-disabled{opacity:0.5}.gux-input-and-error-container .gux-range-input-container .gux-range{position:relative;flex:1 1 auto;align-self:center;order:0}.gux-input-and-error-container .gux-range-input-container .gux-range:hover .gux-range-tooltip,.gux-input-and-error-container .gux-range-input-container .gux-range:focus-within .gux-range-tooltip{visibility:visible}.gux-input-and-error-container .gux-range-input-container .gux-range .gux-track{width:100%;height:2px;margin:6px 0;background-color:#8a97ad}.gux-input-and-error-container .gux-range-input-container .gux-range .gux-track .gux-progress{height:2px;background-color:#2a60c8}.gux-input-and-error-container .gux-range-input-container .gux-display{flex:0 1 auto;align-self:auto;order:0;height:32px;margin:0 0 0 16px;line-height:32px;text-align:right}.gux-input-and-error-container .gux-range-input-container .gux-display.gux-hidden{display:none}.gux-input-and-error-container .gux-range-tooltip-container{position:absolute;top:-50px;width:100%;height:32px;pointer-events:none}.gux-input-and-error-container .gux-range-tooltip-container.gux-hidden{display:none}.gux-input-and-error-container .gux-range-tooltip-container .gux-range-tooltip{font-family:Roboto, sans-serif;font-weight:400;font-size:11px;line-height:16px;position:absolute;z-index:var(--gux-zindex-tooltip, 1);display:flex;align-items:center;justify-content:center;width:50px;height:32px;margin-left:-20px;visibility:hidden;background-color:#fdfdfd;border:1px solid #b4bccb;border-radius:4px;box-shadow:0 2px 4px rgba(32, 41, 55, 0.24)}.gux-input-and-error-container .gux-range-tooltip-container .gux-range-tooltip::after,.gux-input-and-error-container .gux-range-tooltip-container .gux-range-tooltip::before{position:absolute;top:100%;left:50%;width:0;height:0;pointer-events:none;content:' ';border:solid transparent}.gux-input-and-error-container .gux-range-tooltip-container .gux-range-tooltip::after{margin-left:-4px;border-width:4px;border-top-color:#fdfdfd}.gux-input-and-error-container .gux-range-tooltip-container .gux-range-tooltip::before{margin-left:-6px;border-width:6px;border-top-color:#b4bccb}";
+const guxFormFieldRangeCss = ".gux-form-field-container{margin:var(--gux-form-field-container-margin-top, 16px) 0 var(--gux-form-field-container-margin-bottom, 16px) 0}.gux-form-field-container.gux-beside{display:flex;flex-direction:row}.gux-form-field-error{display:none;flex-direction:row;flex-wrap:nowrap;align-content:stretch;align-items:flex-start;justify-content:flex-start;margin:4px 0;font-size:11px;line-height:16px;color:#2e394c}.gux-form-field-error.gux-show{display:flex}.gux-form-field-error gux-icon{flex:0 1 auto;align-self:auto;order:0;width:16px;height:16px;margin-right:4px;color:#ea0b0b}.gux-form-field-error .gux-message{flex:0 1 auto;align-self:auto;order:0}.gux-form-field-label.gux-required::after{font-size:12px;color:#ea0b0b;content:' *'}.gux-form-field-label.gux-beside{position:relative;top:8px;width:fit-content;min-width:45px;margin-right:8px}.gux-form-field-label.gux-above{margin-bottom:8px}.gux-form-field-label.gux-screenreader{position:absolute;top:auto;left:-10000px;width:1px;height:1px;overflow:hidden}.gux-form-field-help{display:none;flex-direction:row;flex-wrap:nowrap;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}::slotted(label){font-family:Roboto, sans-serif;font-weight:400;font-weight:700;font-size:12px;line-height:16px}::slotted(input[type='range']){position:absolute;width:100%;height:2px;margin:6px 0;margin-top:calc(-1 * (12px / 2 + 2px));background:transparent;-webkit-appearance:none}.gux-input-and-error-container{flex-grow:1}.gux-input-and-error-container .gux-range-input-container{display:flex;flex-direction:row;flex-wrap:nowrap;align-content:stretch;align-items:center;justify-content:flex-start;height:32px;font-size:12px}.gux-input-and-error-container .gux-range-input-container.gux-disabled{opacity:0.5}.gux-input-and-error-container .gux-range-input-container .gux-range{position:relative;flex:1 1 auto;align-self:center;order:0}.gux-input-and-error-container .gux-range-input-container .gux-range:hover .gux-range-tooltip,.gux-input-and-error-container .gux-range-input-container .gux-range:focus-within .gux-range-tooltip{visibility:visible}.gux-input-and-error-container .gux-range-input-container .gux-range .gux-track{width:100%;height:2px;margin:6px 0;background-color:#8a97ad}.gux-input-and-error-container .gux-range-input-container .gux-range .gux-track .gux-progress{height:2px;background-color:#2a60c8}.gux-input-and-error-container .gux-range-input-container .gux-display{flex:0 1 auto;align-self:auto;order:0;height:32px;margin:0 0 0 16px;line-height:32px;text-align:right}.gux-input-and-error-container .gux-range-input-container .gux-display.gux-hidden{display:none}.gux-input-and-error-container .gux-range-tooltip-container{position:absolute;top:-50px;width:100%;height:32px;pointer-events:none}.gux-input-and-error-container .gux-range-tooltip-container.gux-hidden{display:none}.gux-input-and-error-container .gux-range-tooltip-container .gux-range-tooltip{font-family:Roboto, sans-serif;font-weight:400;font-size:11px;line-height:16px;position:absolute;z-index:var(--gux-zindex-tooltip, 1);display:flex;align-items:center;justify-content:center;width:50px;height:32px;margin-left:-20px;visibility:hidden;background-color:#fdfdfd;border:1px solid #b4bccb;border-radius:4px;box-shadow:0 2px 4px rgba(32, 41, 55, 0.24)}.gux-input-and-error-container .gux-range-tooltip-container .gux-range-tooltip::after,.gux-input-and-error-container .gux-range-tooltip-container .gux-range-tooltip::before{position:absolute;top:100%;left:50%;width:0;height:0;pointer-events:none;content:' ';border:solid transparent}.gux-input-and-error-container .gux-range-tooltip-container .gux-range-tooltip::after{margin-left:-4px;border-width:4px;border-top-color:#fdfdfd}.gux-input-and-error-container .gux-range-tooltip-container .gux-range-tooltip::before{margin-left:-6px;border-width:6px;border-top-color:#b4bccb}";
 
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -28,6 +29,7 @@ const GuxFormField = class {
     registerInstance(this, hostRef);
     this.computedLabelPosition = 'above';
     this.hasError = false;
+    this.hasHelp = false;
   }
   onInput(e) {
     const input = e.target;
@@ -42,12 +44,14 @@ const GuxFormField = class {
     this.active = 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() {
@@ -61,7 +65,7 @@ const GuxFormField = class {
   render() {
     return (h(Host, { class: {
         'gux-active': this.active
-      } }, h(GuxFormFieldContainer, { labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { position: this.computedLabelPosition, required: this.required }, h("slot", { name: "label", onSlotchange: () => this.setLabel() })), h("div", { class: "gux-input-and-error-container" }, this.renderRangeInput(), h(GuxFormFieldError, { hasError: this.hasError }, h("slot", { name: "error" }))))));
+      } }, h(GuxFormFieldContainer, { labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { position: this.computedLabelPosition, required: this.required }, h("slot", { name: "label", onSlotchange: () => this.setLabel() })), h("div", { class: "gux-input-and-error-container" }, this.renderRangeInput(), h(GuxFormFieldError, { show: this.hasError }, h("slot", { name: "error" })), h(GuxFormFieldHelp, { show: !this.hasError && this.hasHelp }, h("slot", { name: "help" }))))));
   }
   get variant() {
     return this.labelPosition ? this.labelPosition.toLowerCase() : 'none';

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

@@ -3,15 +3,16 @@ import { c as calculateInputDisabledState, o as onInputDisabledStateChange } fro
 import { O as OnMutation } from './on-mutation-70eb931c.js';
 import { a as onRequiredChange } from './on-attribute-change-2b01c315.js';
 import { p as preventBrowserValidationStyling } from './prevent-browser-validation-styling-d16c3f4c.js';
-import { t as trackComponent } from './usage-tracking-208cef9e.js';
-import { G as GuxFormFieldLabel, a as GuxFormFieldContainer } from './gux-form-field-label-9c6f4df6.js';
-import { h as hasErrorSlot, c as clearInput, G as GuxFormFieldError, a as hasContent, v as validateFormIds, g as getComputedLabelPosition } from './gux-form-field.service-25a9237e.js';
+import { h as hasSlot } from './has-slot-062ae63a.js';
+import { c as clearInput, G as GuxFormFieldError, a as GuxFormFieldHelp, h as hasContent, v as validateFormIds, g as getComputedLabelPosition } from './gux-form-field.service-e046de13.js';
+import { G as GuxFormFieldLabel, a as GuxFormFieldContainer } from './gux-form-field-container-2d8e8d4e.js';
+import { t as trackComponent } from './usage-tracking-2c66c99e.js';
 import './random-html-id-8e3f658c.js';
 import './log-error-b1a1a086.js';
 import './set-input-value-5adeaccc.js';
 import './simulate-native-event-ac69961f.js';
 
-const guxFormFieldSearchCss = ".gux-form-field-container{margin:var(--gux-form-field-container-margin-top, 16px) 0 var(--gux-form-field-container-margin-bottom, 16px) 0}.gux-form-field-container.gux-beside{display:flex;flex-direction:row}.gux-form-field-error{display:none;flex-direction:row;flex-wrap:nowrap;align-content:stretch;align-items:flex-start;justify-content:flex-start;margin:4px 0;font-size:11px;line-height:16px;color:#2e394c}.gux-form-field-error.gux-show{display:flex}.gux-form-field-error gux-icon{flex:0 1 auto;align-self:auto;order:0;width:16px;height:16px;margin-right:4px;color:#ea0b0b}.gux-form-field-error .gux-message{flex:0 1 auto;align-self:auto;order:0}.gux-form-field-label.gux-required::after{font-size:12px;color:#ea0b0b;content:' *'}.gux-form-field-label.gux-beside{position:relative;top:8px;width:fit-content;min-width:45px;margin-right:8px}.gux-form-field-label.gux-above{margin-bottom:8px}.gux-form-field-label.gux-screenreader{position:absolute;top:auto;left:-10000px;width:1px;height:1px;overflow:hidden}:host{display:block;color:#2e394c}::slotted(label){font-family:Roboto, sans-serif;font-weight:400;font-weight:700;font-size:12px;line-height:16px}::slotted(input){flex:1 1 auto;align-self:auto;order:0;width:100%;overflow:hidden;font-size:12px;color:#2e394c;text-overflow:ellipsis;background-color:#f6f7f9;border:none;outline:none}::slotted(input)::placeholder{color:#596373;opacity:1}.gux-input-and-error-container{flex-grow:1}.gux-input-and-error-container .gux-input{display:flex;flex-direction:row;flex-wrap:nowrap;align-content:stretch;align-items:center}.gux-input-and-error-container .gux-input .gux-input-container{box-sizing:border-box;display:flex;flex:1 1 auto;flex-direction:row;flex-wrap:nowrap;align-content:stretch;align-items:center;align-self:auto;justify-content:center;order:0;width:100%;height:32px;padding:4px 8px;font-size:12px;line-height:1.6667;color:#2e394c;background-color:#f6f7f9;background-image:none;border:1px solid #6b7585;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-disabled{opacity:0.5}.gux-input-and-error-container .gux-input .gux-input-container gux-icon[icon-name='search']{flex:0 0 auto;align-self:auto;order:0;width:16px;height:16px;margin-right:4px;color:#596373}.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}";
+const guxFormFieldSearchCss = ".gux-form-field-container{margin:var(--gux-form-field-container-margin-top, 16px) 0 var(--gux-form-field-container-margin-bottom, 16px) 0}.gux-form-field-container.gux-beside{display:flex;flex-direction:row}.gux-form-field-error{display:none;flex-direction:row;flex-wrap:nowrap;align-content:stretch;align-items:flex-start;justify-content:flex-start;margin:4px 0;font-size:11px;line-height:16px;color:#2e394c}.gux-form-field-error.gux-show{display:flex}.gux-form-field-error gux-icon{flex:0 1 auto;align-self:auto;order:0;width:16px;height:16px;margin-right:4px;color:#ea0b0b}.gux-form-field-error .gux-message{flex:0 1 auto;align-self:auto;order:0}.gux-form-field-label.gux-required::after{font-size:12px;color:#ea0b0b;content:' *'}.gux-form-field-label.gux-beside{position:relative;top:8px;width:fit-content;min-width:45px;margin-right:8px}.gux-form-field-label.gux-above{margin-bottom:8px}.gux-form-field-label.gux-screenreader{position:absolute;top:auto;left:-10000px;width:1px;height:1px;overflow:hidden}.gux-form-field-help{display:none;flex-direction:row;flex-wrap:nowrap;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}::slotted(label){font-family:Roboto, sans-serif;font-weight:400;font-weight:700;font-size:12px;line-height:16px}::slotted(input){flex:1 1 auto;align-self:auto;order:0;width:100%;overflow:hidden;font-size:12px;color:#2e394c;text-overflow:ellipsis;background-color:#f6f7f9;border:none;outline:none}::slotted(input)::placeholder{color:#596373;opacity:1}.gux-input-and-error-container{flex-grow:1}.gux-input-and-error-container .gux-input{display:flex;flex-direction:row;flex-wrap:nowrap;align-content:stretch;align-items:center}.gux-input-and-error-container .gux-input .gux-input-container{box-sizing:border-box;display:flex;flex:1 1 auto;flex-direction:row;flex-wrap:nowrap;align-content:stretch;align-items:center;align-self:auto;justify-content:center;order:0;width:100%;height:32px;padding:4px 8px;font-size:12px;line-height:1.6667;color:#2e394c;background-color:#f6f7f9;background-image:none;border:1px solid #6b7585;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-disabled{opacity:0.5}.gux-input-and-error-container .gux-input .gux-input-container gux-icon[icon-name='search']{flex:0 0 auto;align-self:auto;order:0;width:16px;height:16px;margin-right:4px;color:#596373}.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}";
 
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -30,14 +31,17 @@ const GuxFormFieldSearch = class {
     this.clearable = true;
     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');
   }
   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() {
@@ -51,7 +55,7 @@ const GuxFormFieldSearch = class {
       } }, h("div", { class: {
         'gux-input-container': true,
         'gux-disabled': this.disabled
-      } }, h("gux-icon", { "icon-name": "search", decorative: true }), h("slot", { name: "input" }), 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("gux-icon", { "icon-name": "search", decorative: true }), h("slot", { name: "input" }), 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

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

@@ -3,15 +3,16 @@ import { c as calculateInputDisabledState, o as onInputDisabledStateChange } fro
 import { O as OnMutation } from './on-mutation-70eb931c.js';
 import { a as onRequiredChange } from './on-attribute-change-2b01c315.js';
 import { p as preventBrowserValidationStyling } from './prevent-browser-validation-styling-d16c3f4c.js';
-import { t as trackComponent } from './usage-tracking-208cef9e.js';
-import { G as GuxFormFieldLabel, a as GuxFormFieldContainer } from './gux-form-field-label-9c6f4df6.js';
-import { h as hasErrorSlot, G as GuxFormFieldError, v as validateFormIds, g as getComputedLabelPosition } from './gux-form-field.service-25a9237e.js';
+import { h as hasSlot } from './has-slot-062ae63a.js';
+import { G as GuxFormFieldError, a as GuxFormFieldHelp, v as validateFormIds, g as getComputedLabelPosition } from './gux-form-field.service-e046de13.js';
+import { G as GuxFormFieldLabel, a as GuxFormFieldContainer } from './gux-form-field-container-2d8e8d4e.js';
+import { t as trackComponent } from './usage-tracking-2c66c99e.js';
 import './random-html-id-8e3f658c.js';
 import './log-error-b1a1a086.js';
 import './set-input-value-5adeaccc.js';
 import './simulate-native-event-ac69961f.js';
 
-const guxFormFieldSelectCss = ".gux-form-field-container{margin:var(--gux-form-field-container-margin-top, 16px) 0 var(--gux-form-field-container-margin-bottom, 16px) 0}.gux-form-field-container.gux-beside{display:flex;flex-direction:row}.gux-form-field-error{display:none;flex-direction:row;flex-wrap:nowrap;align-content:stretch;align-items:flex-start;justify-content:flex-start;margin:4px 0;font-size:11px;line-height:16px;color:#2e394c}.gux-form-field-error.gux-show{display:flex}.gux-form-field-error gux-icon{flex:0 1 auto;align-self:auto;order:0;width:16px;height:16px;margin-right:4px;color:#ea0b0b}.gux-form-field-error .gux-message{flex:0 1 auto;align-self:auto;order:0}.gux-form-field-label.gux-required::after{font-size:12px;color:#ea0b0b;content:' *'}.gux-form-field-label.gux-beside{position:relative;top:8px;width:fit-content;min-width:45px;margin-right:8px}.gux-form-field-label.gux-above{margin-bottom:8px}.gux-form-field-label.gux-screenreader{position:absolute;top:auto;left:-10000px;width:1px;height:1px;overflow:hidden}:host{display:block;color:#2e394c}::slotted(label){font-family:Roboto, sans-serif;font-weight:400;font-weight:700;font-size:12px;line-height:16px}::slotted(select){flex:1 1 auto;align-self:auto;order:0;height:30px;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{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}";
+const guxFormFieldSelectCss = ".gux-form-field-container{margin:var(--gux-form-field-container-margin-top, 16px) 0 var(--gux-form-field-container-margin-bottom, 16px) 0}.gux-form-field-container.gux-beside{display:flex;flex-direction:row}.gux-form-field-error{display:none;flex-direction:row;flex-wrap:nowrap;align-content:stretch;align-items:flex-start;justify-content:flex-start;margin:4px 0;font-size:11px;line-height:16px;color:#2e394c}.gux-form-field-error.gux-show{display:flex}.gux-form-field-error gux-icon{flex:0 1 auto;align-self:auto;order:0;width:16px;height:16px;margin-right:4px;color:#ea0b0b}.gux-form-field-error .gux-message{flex:0 1 auto;align-self:auto;order:0}.gux-form-field-label.gux-required::after{font-size:12px;color:#ea0b0b;content:' *'}.gux-form-field-label.gux-beside{position:relative;top:8px;width:fit-content;min-width:45px;margin-right:8px}.gux-form-field-label.gux-above{margin-bottom:8px}.gux-form-field-label.gux-screenreader{position:absolute;top:auto;left:-10000px;width:1px;height:1px;overflow:hidden}.gux-form-field-help{display:none;flex-direction:row;flex-wrap:nowrap;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}::slotted(label){font-family:Roboto, sans-serif;font-weight:400;font-weight:700;font-size:12px;line-height:16px}::slotted(select){flex:1 1 auto;align-self:auto;order:0;height:30px;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{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}";
 
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -28,14 +29,17 @@ const GuxFormFieldSelect = class {
     registerInstance(this, hostRef);
     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 +53,7 @@ const GuxFormFieldSelect = class {
       } }, 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

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

@@ -3,15 +3,16 @@ import { c as calculateInputDisabledState, o as onInputDisabledStateChange } fro
 import { O as OnMutation } from './on-mutation-70eb931c.js';
 import { a as onRequiredChange } from './on-attribute-change-2b01c315.js';
 import { p as preventBrowserValidationStyling } from './prevent-browser-validation-styling-d16c3f4c.js';
-import { t as trackComponent } from './usage-tracking-208cef9e.js';
-import { G as GuxFormFieldLabel, a as GuxFormFieldContainer } from './gux-form-field-label-9c6f4df6.js';
-import { h as hasErrorSlot, a as hasContent, s as setSlotAriaDescribedby, c as clearInput, G as GuxFormFieldError, v as validateFormIds, g as getComputedLabelPosition } from './gux-form-field.service-25a9237e.js';
+import { h as hasSlot } from './has-slot-062ae63a.js';
+import { h as hasContent, s as setSlotAriaDescribedby, c as clearInput, G as GuxFormFieldError, a as GuxFormFieldHelp, v as validateFormIds, g as getComputedLabelPosition } from './gux-form-field.service-e046de13.js';
+import { G as GuxFormFieldLabel, a as GuxFormFieldContainer } from './gux-form-field-container-2d8e8d4e.js';
+import { t as trackComponent } from './usage-tracking-2c66c99e.js';
 import './random-html-id-8e3f658c.js';
 import './log-error-b1a1a086.js';
 import './set-input-value-5adeaccc.js';
 import './simulate-native-event-ac69961f.js';
 
-const guxFormFieldTextLikeCss = ".gux-form-field-container{margin:var(--gux-form-field-container-margin-top, 16px) 0 var(--gux-form-field-container-margin-bottom, 16px) 0}.gux-form-field-container.gux-beside{display:flex;flex-direction:row}.gux-form-field-error{display:none;flex-direction:row;flex-wrap:nowrap;align-content:stretch;align-items:flex-start;justify-content:flex-start;margin:4px 0;font-size:11px;line-height:16px;color:#2e394c}.gux-form-field-error.gux-show{display:flex}.gux-form-field-error gux-icon{flex:0 1 auto;align-self:auto;order:0;width:16px;height:16px;margin-right:4px;color:#ea0b0b}.gux-form-field-error .gux-message{flex:0 1 auto;align-self:auto;order:0}.gux-form-field-label.gux-required::after{font-size:12px;color:#ea0b0b;content:' *'}.gux-form-field-label.gux-beside{position:relative;top:8px;width:fit-content;min-width:45px;margin-right:8px}.gux-form-field-label.gux-above{margin-bottom:8px}.gux-form-field-label.gux-screenreader{position:absolute;top:auto;left:-10000px;width:1px;height:1px;overflow:hidden}:host{display:block;color:#2e394c}::slotted(label){font-family:Roboto, sans-serif;font-weight:400;font-weight:700;font-size:12px;line-height:16px}::slotted(input){flex:1 1 auto;align-self:auto;order:0;width:100%;overflow:hidden;font-size:12px;color:#2e394c;text-overflow:ellipsis;background-color:#f6f7f9;border:none;outline:none}::slotted(input)::placeholder{color:#596373;opacity:1}::slotted(span){color:#2e394c;white-space:nowrap}.gux-input-and-error-container{flex-grow:1}.gux-input-and-error-container .gux-input .gux-input-container{box-sizing:border-box;display:flex;flex-direction:row;flex-wrap:nowrap;align-content:stretch;align-items:center;justify-content:center;width:100%;height:32px;padding:4px 8px 4px 12px;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;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}.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}";
+const guxFormFieldTextLikeCss = ".gux-form-field-container{margin:var(--gux-form-field-container-margin-top, 16px) 0 var(--gux-form-field-container-margin-bottom, 16px) 0}.gux-form-field-container.gux-beside{display:flex;flex-direction:row}.gux-form-field-error{display:none;flex-direction:row;flex-wrap:nowrap;align-content:stretch;align-items:flex-start;justify-content:flex-start;margin:4px 0;font-size:11px;line-height:16px;color:#2e394c}.gux-form-field-error.gux-show{display:flex}.gux-form-field-error gux-icon{flex:0 1 auto;align-self:auto;order:0;width:16px;height:16px;margin-right:4px;color:#ea0b0b}.gux-form-field-error .gux-message{flex:0 1 auto;align-self:auto;order:0}.gux-form-field-label.gux-required::after{font-size:12px;color:#ea0b0b;content:' *'}.gux-form-field-label.gux-beside{position:relative;top:8px;width:fit-content;min-width:45px;margin-right:8px}.gux-form-field-label.gux-above{margin-bottom:8px}.gux-form-field-label.gux-screenreader{position:absolute;top:auto;left:-10000px;width:1px;height:1px;overflow:hidden}.gux-form-field-help{display:none;flex-direction:row;flex-wrap:nowrap;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}::slotted(label){font-family:Roboto, sans-serif;font-weight:400;font-weight:700;font-size:12px;line-height:16px}::slotted(input){flex:1 1 auto;align-self:auto;order:0;width:100%;overflow:hidden;font-size:12px;color:#2e394c;text-overflow:ellipsis;background-color:#f6f7f9;border:none;outline:none}::slotted(input)::placeholder{color:#596373;opacity:1}slot[name='prefix'],slot[name='suffix']{color:#2e394c;white-space:nowrap}.gux-input-and-error-container{flex-grow:1}.gux-input-and-error-container .gux-input .gux-input-container{box-sizing:border-box;display:flex;flex-direction:row;flex-wrap:nowrap;align-content:stretch;align-items:center;justify-content:center;width:100%;height:32px;padding:4px 8px 4px 12px;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;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}.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}";
 
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -29,20 +30,24 @@ const GuxFormFieldTextLike = class {
     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) {
@@ -66,7 +71,7 @@ const GuxFormFieldTextLike = class {
         '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

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

@@ -3,15 +3,16 @@ import { c as calculateInputDisabledState, o as onInputDisabledStateChange } fro
 import { O as OnMutation } from './on-mutation-70eb931c.js';
 import { a as onRequiredChange } from './on-attribute-change-2b01c315.js';
 import { p as preventBrowserValidationStyling } from './prevent-browser-validation-styling-d16c3f4c.js';
-import { t as trackComponent } from './usage-tracking-208cef9e.js';
-import { G as GuxFormFieldLabel, a as GuxFormFieldContainer } from './gux-form-field-label-9c6f4df6.js';
-import { h as hasErrorSlot, G as GuxFormFieldError, v as validateFormIds, g as getComputedLabelPosition } from './gux-form-field.service-25a9237e.js';
+import { h as hasSlot } from './has-slot-062ae63a.js';
+import { G as GuxFormFieldError, a as GuxFormFieldHelp, v as validateFormIds, g as getComputedLabelPosition } from './gux-form-field.service-e046de13.js';
+import { G as GuxFormFieldLabel, a as GuxFormFieldContainer } from './gux-form-field-container-2d8e8d4e.js';
+import { t as trackComponent } from './usage-tracking-2c66c99e.js';
 import './random-html-id-8e3f658c.js';
 import './log-error-b1a1a086.js';
 import './set-input-value-5adeaccc.js';
 import './simulate-native-event-ac69961f.js';
 
-const guxFormFieldTextareaCss = ".gux-form-field-container{margin:var(--gux-form-field-container-margin-top, 16px) 0 var(--gux-form-field-container-margin-bottom, 16px) 0}.gux-form-field-container.gux-beside{display:flex;flex-direction:row}.gux-form-field-error{display:none;flex-direction:row;flex-wrap:nowrap;align-content:stretch;align-items:flex-start;justify-content:flex-start;margin:4px 0;font-size:11px;line-height:16px;color:#2e394c}.gux-form-field-error.gux-show{display:flex}.gux-form-field-error gux-icon{flex:0 1 auto;align-self:auto;order:0;width:16px;height:16px;margin-right:4px;color:#ea0b0b}.gux-form-field-error .gux-message{flex:0 1 auto;align-self:auto;order:0}.gux-form-field-label.gux-required::after{font-size:12px;color:#ea0b0b;content:' *'}.gux-form-field-label.gux-beside{position:relative;top:8px;width:fit-content;min-width:45px;margin-right:8px}.gux-form-field-label.gux-above{margin-bottom:8px}.gux-form-field-label.gux-screenreader{position:absolute;top:auto;left:-10000px;width:1px;height:1px;overflow:hidden}:host{display:block;color:#2e394c}::slotted(label){font-family:Roboto, sans-serif;font-weight:400;font-weight:700;font-size:12px;line-height:16px}::slotted(textarea){flex:1 1 auto;align-self:auto;order:0;font-family:inherit;color:#2e394c;resize:vertical;background-color:#f6f7f9;background-image:none;border:none;border-radius:4px;outline:none;box-shadow:inset 0 0 4px rgba(32, 41, 55, 0.16);font-family:Roboto, sans-serif;font-weight:400;font-size:12px;line-height:20px;min-width:100%;max-width:100%;min-height:90px;padding:4px 12px;margin:0}::slotted(textarea)::placeholder{color:#596373;opacity:1}::slotted(textarea)[disabled]{opacity:0.5}::slotted(textarea)::placeholder{color:#596373;opacity:1}.gux-input-and-error-container{flex-grow:1}.gux-input-and-error-container .gux-input{position:relative;display:block;border:1px solid #6b7585;border-radius:4px;outline:none}.gux-input-and-error-container .gux-input: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{border-color:#ea0b0b}.gux-input-and-error-container .gux-input.gux-disabled{opacity:0.5}.gux-input-and-error-container .gux-input.gux-resize-none ::slotted(textarea){resize:none}.gux-input-and-error-container .gux-input.gux-resize-auto{display:grid;overflow:hidden;word-break:normal;word-break:break-word;overflow-wrap:anywhere}.gux-input-and-error-container .gux-input.gux-resize-auto::after{grid-row-start:1;grid-row-end:2;grid-column-start:1;grid-column-end:2;white-space:pre-wrap;visibility:hidden;content:attr(data-replicated-value) ' ';min-width:100%;max-width:100%;min-height:90px;padding:4px 12px;margin:0}.gux-input-and-error-container .gux-input.gux-resize-auto ::slotted(textarea){grid-row-start:1;grid-row-end:2;grid-column-start:1;grid-column-end:2;overflow-x:hidden;resize:none}";
+const guxFormFieldTextareaCss = ".gux-form-field-container{margin:var(--gux-form-field-container-margin-top, 16px) 0 var(--gux-form-field-container-margin-bottom, 16px) 0}.gux-form-field-container.gux-beside{display:flex;flex-direction:row}.gux-form-field-error{display:none;flex-direction:row;flex-wrap:nowrap;align-content:stretch;align-items:flex-start;justify-content:flex-start;margin:4px 0;font-size:11px;line-height:16px;color:#2e394c}.gux-form-field-error.gux-show{display:flex}.gux-form-field-error gux-icon{flex:0 1 auto;align-self:auto;order:0;width:16px;height:16px;margin-right:4px;color:#ea0b0b}.gux-form-field-error .gux-message{flex:0 1 auto;align-self:auto;order:0}.gux-form-field-label.gux-required::after{font-size:12px;color:#ea0b0b;content:' *'}.gux-form-field-label.gux-beside{position:relative;top:8px;width:fit-content;min-width:45px;margin-right:8px}.gux-form-field-label.gux-above{margin-bottom:8px}.gux-form-field-label.gux-screenreader{position:absolute;top:auto;left:-10000px;width:1px;height:1px;overflow:hidden}.gux-form-field-help{display:none;flex-direction:row;flex-wrap:nowrap;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}::slotted(label){font-family:Roboto, sans-serif;font-weight:400;font-weight:700;font-size:12px;line-height:16px}::slotted(textarea){flex:1 1 auto;align-self:auto;order:0;font-family:inherit;color:#2e394c;resize:vertical;background-color:#f6f7f9;background-image:none;border:none;border-radius:4px;outline:none;box-shadow:inset 0 0 4px rgba(32, 41, 55, 0.16);font-family:Roboto, sans-serif;font-weight:400;font-size:12px;line-height:20px;min-width:100%;max-width:100%;min-height:90px;padding:4px 12px;margin:0}::slotted(textarea)::placeholder{color:#596373;opacity:1}::slotted(textarea)[disabled]{opacity:0.5}::slotted(textarea)::placeholder{color:#596373;opacity:1}.gux-input-and-error-container{flex-grow:1}.gux-input-and-error-container .gux-input{position:relative;display:block;border:1px solid #6b7585;border-radius:4px;outline:none}.gux-input-and-error-container .gux-input: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{border-color:#ea0b0b}.gux-input-and-error-container .gux-input.gux-disabled{opacity:0.5}.gux-input-and-error-container .gux-input.gux-resize-none ::slotted(textarea){resize:none}.gux-input-and-error-container .gux-input.gux-resize-auto{display:grid;overflow:hidden;word-break:normal;word-break:break-word;overflow-wrap:anywhere}.gux-input-and-error-container .gux-input.gux-resize-auto::after{grid-row-start:1;grid-row-end:2;grid-column-start:1;grid-column-end:2;white-space:pre-wrap;visibility:hidden;content:attr(data-replicated-value) ' ';min-width:100%;max-width:100%;min-height:90px;padding:4px 12px;margin:0}.gux-input-and-error-container .gux-input.gux-resize-auto ::slotted(textarea){grid-row-start:1;grid-row-end:2;grid-column-start:1;grid-column-end:2;overflow-x:hidden;resize:none}";
 
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -29,14 +30,17 @@ const GuxFormFieldTextarea = class {
     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 +56,7 @@ const GuxFormFieldTextarea = class {
         [`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

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

@@ -2,21 +2,15 @@ import { h, r as registerInstance, g as getElement } from './index-738480cf.js';
 import { b as buildI18nForComponent } from './index-5b4bc0a0.js';
 import { O as OnMutation } from './on-mutation-70eb931c.js';
 import { o as onDisabledChange, a as onRequiredChange } from './on-attribute-change-2b01c315.js';
-import { t as trackComponent } from './usage-tracking-208cef9e.js';
-import { h as hasErrorSlot, G as GuxFormFieldError, b as getErrorSlotTextContent, v as validateFormIds, g as getComputedLabelPosition } from './gux-form-field.service-25a9237e.js';
+import { h as hasSlot } from './has-slot-062ae63a.js';
+import { G as GuxFormFieldError, a as GuxFormFieldHelp, v as validateFormIds, g as getComputedLabelPosition } from './gux-form-field.service-e046de13.js';
+import { t as trackComponent } from './usage-tracking-2c66c99e.js';
 import './get-closest-element-1597503c.js';
 import './random-html-id-8e3f658c.js';
 import './log-error-b1a1a086.js';
 import './set-input-value-5adeaccc.js';
 import './simulate-native-event-ac69961f.js';
 
-const GuxFormFieldFieldsetContainer = ({ labelPosition }, children) => {
-  return (h("fieldset", { class: {
-      'gux-form-field-fieldset-container': true,
-      [`gux-${labelPosition}`]: true
-    } }, children));
-};
-
 const GuxFormFieldLegendLabel = ({ position, required }, children) => {
   return (h("legend", { class: {
       'gux-form-field-legend-label': true,
@@ -25,12 +19,24 @@ const GuxFormFieldLegendLabel = ({ position, required }, children) => {
     } }, children));
 };
 
+const GuxFormFieldFieldsetContainer = ({ labelPosition }, children) => {
+  return (h("fieldset", { class: {
+      'gux-form-field-fieldset-container': true,
+      [`gux-${labelPosition}`]: true
+    } }, children));
+};
+
+function getSlotTextContent(root, slotName) {
+  var _a;
+  return (_a = root.querySelector(`[slot=${slotName}]`)) === null || _a === void 0 ? void 0 : _a.textContent;
+}
+
 const required = "Required";
 const componentResources = {
 	required: required
 };
 
-const guxFormFieldTimePickerCss = ".gux-form-field-fieldset-container{min-width:0;padding:0;margin:16px 0;border:none}.gux-form-field-error{display:none;flex-direction:row;flex-wrap:nowrap;align-content:stretch;align-items:flex-start;justify-content:flex-start;margin:4px 0;font-size:11px;line-height:16px;color:#2e394c}.gux-form-field-error.gux-show{display:flex}.gux-form-field-error gux-icon{flex:0 1 auto;align-self:auto;order:0;width:16px;height:16px;margin-right:4px;color:#ea0b0b}.gux-form-field-error .gux-message{flex:0 1 auto;align-self:auto;order:0}.gux-form-field-legend-label{padding:0}.gux-form-field-legend-label.gux-required::after{font-size:12px;color:#ea0b0b;content:' *'}.gux-form-field-legend-label.gux-beside{position:relative;top:8px;float:left;width:fit-content;min-width:45px;margin-right:8px}.gux-form-field-legend-label.gux-above{margin-bottom:8px}.gux-form-field-legend-label.gux-screenreader{position:absolute;top:auto;left:-10000px;width:1px;height:1px;overflow:hidden}::slotted(label){font-family:Roboto, sans-serif;font-weight:400;font-weight:700;font-size:12px;line-height:16px}.gux-input-and-error-container{flex-grow:1}";
+const guxFormFieldTimePickerCss = ".gux-form-field-fieldset-container{min-width:0;padding:0;margin:16px 0;border:none}.gux-form-field-error{display:none;flex-direction:row;flex-wrap:nowrap;align-content:stretch;align-items:flex-start;justify-content:flex-start;margin:4px 0;font-size:11px;line-height:16px;color:#2e394c}.gux-form-field-error.gux-show{display:flex}.gux-form-field-error gux-icon{flex:0 1 auto;align-self:auto;order:0;width:16px;height:16px;margin-right:4px;color:#ea0b0b}.gux-form-field-error .gux-message{flex:0 1 auto;align-self:auto;order:0}.gux-form-field-legend-label{padding:0}.gux-form-field-legend-label.gux-required::after{font-size:12px;color:#ea0b0b;content:' *'}.gux-form-field-legend-label.gux-beside{position:relative;top:8px;float:left;width:fit-content;min-width:45px;margin-right:8px}.gux-form-field-legend-label.gux-above{margin-bottom:8px}.gux-form-field-legend-label.gux-screenreader{position:absolute;top:auto;left:-10000px;width:1px;height:1px;overflow:hidden}.gux-form-field-help{display:none;flex-direction:row;flex-wrap:nowrap;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;font-weight:700;font-size:12px;line-height:16px}.gux-input-and-error-container{flex-grow:1}";
 
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -47,6 +53,7 @@ const GuxFormFieldTimePicker = class {
     registerInstance(this, hostRef);
     this.computedLabelPosition = 'above';
     this.hasError = false;
+    this.hasHelp = false;
   }
   watchValue(hasError) {
     const timePickerSlot = this.root.querySelector('gux-time-picker-beta');
@@ -55,13 +62,15 @@ const GuxFormFieldTimePicker = class {
     }
   }
   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() {
@@ -69,13 +78,13 @@ const GuxFormFieldTimePicker = class {
     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) {