genesys-spark-components 3.32.2 → 3.33.0

package/dist/esm/gux-form-field-checkbox.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-a62c779c.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 guxFormFieldCheckboxCss = ".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-input-error) ::slotted(input[type='checkbox']:not(:checked))::before{background-image:url(\"data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.3077 1.84615H3.69231C2.67271 1.84615 1.84615 2.67271 1.84615 3.69231V12.3077C1.84615 13.3273 2.67271 14.1538 3.69231 14.1538H12.3077C13.3273 14.1538 14.1538 13.3273 14.1538 12.3077V3.69231C14.1538 2.67271 13.3273 1.84615 12.3077 1.84615ZM3.69231 0C1.6531 0 0 1.6531 0 3.69231V12.3077C0 14.3469 1.6531 16 3.69231 16H12.3077C14.3469 16 16 14.3469 16 12.3077V3.69231C16 1.6531 14.3469 0 12.3077 0H3.69231Z' fill='%23ea0b0b'/%3E%3C/svg%3E\")}: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='checkbox']){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='checkbox'])::before{grid-area:1;content:'';border-radius:15%}::slotted(input[type='checkbox']:focus-within)::before{outline:none;box-shadow:0 0 0 1px #fdfdfd, 0 0 0 4px #aac9ff}::slotted(input[type='checkbox']:not(:checked))::before{background-image:url(\"data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.3077 1.84615H3.69231C2.67271 1.84615 1.84615 2.67271 1.84615 3.69231V12.3077C1.84615 13.3273 2.67271 14.1538 3.69231 14.1538H12.3077C13.3273 14.1538 14.1538 13.3273 14.1538 12.3077V3.69231C14.1538 2.67271 13.3273 1.84615 12.3077 1.84615ZM3.69231 0C1.6531 0 0 1.6531 0 3.69231V12.3077C0 14.3469 1.6531 16 3.69231 16H12.3077C14.3469 16 16 14.3469 16 12.3077V3.69231C16 1.6531 14.3469 0 12.3077 0H3.69231Z' fill='%2377828f'/%3E%3C/svg%3E\")}::slotted(input[type='checkbox']:not(:checked):not(:disabled):not(:indeterminate):hover)::before{background-image:url(\"data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.3077 1.84615H3.69231C2.67271 1.84615 1.84615 2.67271 1.84615 3.69231V12.3077C1.84615 13.3273 2.67271 14.1538 3.69231 14.1538H12.3077C13.3273 14.1538 14.1538 13.3273 14.1538 12.3077V3.69231C14.1538 2.67271 13.3273 1.84615 12.3077 1.84615ZM3.69231 0C1.6531 0 0 1.6531 0 3.69231V12.3077C0 14.3469 1.6531 16 3.69231 16H12.3077C14.3469 16 16 14.3469 16 12.3077V3.69231C16 1.6531 14.3469 0 12.3077 0H3.69231Z' fill='%232a60c8'/%3E%3C/svg%3E\")}::slotted(input[type='checkbox']:checked)::before{background-image:url(\"data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.69231 0H12.3077C13.287 0 14.2261 0.38901 14.9185 1.08145C15.611 1.77389 16 2.71305 16 3.69231V12.3077C16 13.287 15.611 14.2261 14.9185 14.9185C14.2261 15.611 13.287 16 12.3077 16H3.69231C2.71305 16 1.77389 15.611 1.08145 14.9185C0.38901 14.2261 0 13.287 0 12.3077V3.69231C0 2.71305 0.38901 1.77389 1.08145 1.08145C1.77389 0.38901 2.71305 0 3.69231 0ZM5.62483 11.5936C5.79089 11.7597 6.00122 11.8372 6.21155 11.8372C6.43295 11.8372 6.64329 11.7486 6.79827 11.5936L13.2854 5.10652C13.6064 4.78549 13.6064 4.25412 13.2854 3.93308C12.9643 3.61205 12.433 3.61205 12.1119 3.93308L6.21155 9.83348L3.87575 7.4866C3.55472 7.16557 3.02335 7.16557 2.70231 7.4866C2.38128 7.80764 2.38128 8.339 2.70231 8.66004L5.62483 11.5936Z' fill='%232a60c8'/%3E%3C/svg%3E\")}::slotted(input[type='checkbox']:indeterminate)::before{background-image:url(\"data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.69231 1.84615H12.3077C13.3273 1.84615 14.1538 2.67271 14.1538 3.69231V12.3077C14.1538 13.3273 13.3273 14.1538 12.3077 14.1538H3.69231C2.67271 14.1538 1.84615 13.3273 1.84615 12.3077V3.69231C1.84615 2.67271 2.67271 1.84615 3.69231 1.84615ZM0 3.69231C0 1.6531 1.6531 0 3.69231 0H12.3077C14.3469 0 16 1.6531 16 3.69231V12.3077C16 14.3469 14.3469 16 12.3077 16H3.69231C1.6531 16 0 14.3469 0 12.3077V3.69231ZM4.00028 9.2308H12.0003C12.5049 9.2308 12.9234 8.81234 12.9234 8.30773C12.9234 7.80311 12.5049 7.38465 12.0003 7.38465H4.00028C3.49567 7.38465 3.07721 7.80311 3.07721 8.30773C3.07721 8.81234 3.49567 9.2308 4.00028 9.2308Z' fill='%232a60c8'/%3E%3C/svg%3E\")}::slotted(input[type='checkbox']:disabled)::before{cursor:not-allowed;opacity:0.5}::slotted(label){display:inline-block;font-size:12px;line-height:24px;vertical-align:middle}";
+const guxFormFieldCheckboxCss = ".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-input-error) ::slotted(input[type='checkbox']:not(:checked))::before{background-image:url(\"data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.3077 1.84615H3.69231C2.67271 1.84615 1.84615 2.67271 1.84615 3.69231V12.3077C1.84615 13.3273 2.67271 14.1538 3.69231 14.1538H12.3077C13.3273 14.1538 14.1538 13.3273 14.1538 12.3077V3.69231C14.1538 2.67271 13.3273 1.84615 12.3077 1.84615ZM3.69231 0C1.6531 0 0 1.6531 0 3.69231V12.3077C0 14.3469 1.6531 16 3.69231 16H12.3077C14.3469 16 16 14.3469 16 12.3077V3.69231C16 1.6531 14.3469 0 12.3077 0H3.69231Z' fill='%23ea0b0b'/%3E%3C/svg%3E\")}: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='checkbox']){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='checkbox'])::before{grid-area:1;content:'';border-radius:15%}::slotted(input[type='checkbox']:focus-within)::before{outline:none;box-shadow:0 0 0 1px #fdfdfd, 0 0 0 4px #aac9ff}::slotted(input[type='checkbox']:not(:checked))::before{background-image:url(\"data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.3077 1.84615H3.69231C2.67271 1.84615 1.84615 2.67271 1.84615 3.69231V12.3077C1.84615 13.3273 2.67271 14.1538 3.69231 14.1538H12.3077C13.3273 14.1538 14.1538 13.3273 14.1538 12.3077V3.69231C14.1538 2.67271 13.3273 1.84615 12.3077 1.84615ZM3.69231 0C1.6531 0 0 1.6531 0 3.69231V12.3077C0 14.3469 1.6531 16 3.69231 16H12.3077C14.3469 16 16 14.3469 16 12.3077V3.69231C16 1.6531 14.3469 0 12.3077 0H3.69231Z' fill='%2377828f'/%3E%3C/svg%3E\")}::slotted(input[type='checkbox']:not(:checked):not(:disabled):not(:indeterminate):hover)::before{background-image:url(\"data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.3077 1.84615H3.69231C2.67271 1.84615 1.84615 2.67271 1.84615 3.69231V12.3077C1.84615 13.3273 2.67271 14.1538 3.69231 14.1538H12.3077C13.3273 14.1538 14.1538 13.3273 14.1538 12.3077V3.69231C14.1538 2.67271 13.3273 1.84615 12.3077 1.84615ZM3.69231 0C1.6531 0 0 1.6531 0 3.69231V12.3077C0 14.3469 1.6531 16 3.69231 16H12.3077C14.3469 16 16 14.3469 16 12.3077V3.69231C16 1.6531 14.3469 0 12.3077 0H3.69231Z' fill='%232a60c8'/%3E%3C/svg%3E\")}::slotted(input[type='checkbox']:checked)::before{background-image:url(\"data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.69231 0H12.3077C13.287 0 14.2261 0.38901 14.9185 1.08145C15.611 1.77389 16 2.71305 16 3.69231V12.3077C16 13.287 15.611 14.2261 14.9185 14.9185C14.2261 15.611 13.287 16 12.3077 16H3.69231C2.71305 16 1.77389 15.611 1.08145 14.9185C0.38901 14.2261 0 13.287 0 12.3077V3.69231C0 2.71305 0.38901 1.77389 1.08145 1.08145C1.77389 0.38901 2.71305 0 3.69231 0ZM5.62483 11.5936C5.79089 11.7597 6.00122 11.8372 6.21155 11.8372C6.43295 11.8372 6.64329 11.7486 6.79827 11.5936L13.2854 5.10652C13.6064 4.78549 13.6064 4.25412 13.2854 3.93308C12.9643 3.61205 12.433 3.61205 12.1119 3.93308L6.21155 9.83348L3.87575 7.4866C3.55472 7.16557 3.02335 7.16557 2.70231 7.4866C2.38128 7.80764 2.38128 8.339 2.70231 8.66004L5.62483 11.5936Z' fill='%232a60c8'/%3E%3C/svg%3E\")}::slotted(input[type='checkbox']:indeterminate)::before{background-image:url(\"data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.69231 1.84615H12.3077C13.3273 1.84615 14.1538 2.67271 14.1538 3.69231V12.3077C14.1538 13.3273 13.3273 14.1538 12.3077 14.1538H3.69231C2.67271 14.1538 1.84615 13.3273 1.84615 12.3077V3.69231C1.84615 2.67271 2.67271 1.84615 3.69231 1.84615ZM0 3.69231C0 1.6531 1.6531 0 3.69231 0H12.3077C14.3469 0 16 1.6531 16 3.69231V12.3077C16 14.3469 14.3469 16 12.3077 16H3.69231C1.6531 16 0 14.3469 0 12.3077V3.69231ZM4.00028 9.2308H12.0003C12.5049 9.2308 12.9234 8.81234 12.9234 8.30773C12.9234 7.80311 12.5049 7.38465 12.0003 7.38465H4.00028C3.49567 7.38465 3.07721 7.80311 3.07721 8.30773C3.07721 8.81234 3.49567 9.2308 4.00028 9.2308Z' fill='%232a60c8'/%3E%3C/svg%3E\")}::slotted(input[type='checkbox']: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 GuxFormFieldCheckbox = 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 GuxFormFieldCheckbox = 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="checkbox"][slot="input"]');

package/dist/esm/gux-form-field-color.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-a62c779c.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 guxFormFieldColorCss = ".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}.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;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: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-container.gux-input-error .gux-input-container{border-color:#ea0b0b}";
+const guxFormFieldColorCss = ".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}.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;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: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-container.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;
@@ -27,14 +28,17 @@ const GuxFormFieldColor = 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.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() {
@@ -48,7 +52,7 @@ const GuxFormFieldColor = class {
       } }, h("div", { class: {
         'gux-input-container': true,
         'gux-disabled': this.disabled
-      } }, h("slot", { name: "input", onSlotchange: () => this.setInput() }))), h(GuxFormFieldError, { hasError: this.hasError }, h("slot", { name: "error" })))));
+      } }, h("slot", { name: "input", onSlotchange: () => this.setInput() }))), 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-label-9c6f4df6.js → gux-form-field-container-2d8e8d4e.js}

@@ -1,12 +1,5 @@
 import { h } from './index-738480cf.js';
 
-const GuxFormFieldContainer = ({ labelPosition }, children) => {
-  return (h("div", { class: {
-      'gux-form-field-container': true,
-      [`gux-${labelPosition}`]: true
-    } }, children));
-};
-
 const GuxFormFieldLabel = ({ position, required }, children) => {
   return (h("div", { class: {
       'gux-form-field-label': true,
@@ -15,4 +8,11 @@ const GuxFormFieldLabel = ({ position, required }, children) => {
     } }, children));
 };
 
+const GuxFormFieldContainer = ({ labelPosition }, children) => {
+  return (h("div", { class: {
+      'gux-form-field-container': true,
+      [`gux-${labelPosition}`]: true
+    } }, children));
+};
+
 export { GuxFormFieldLabel as G, GuxFormFieldContainer as a };

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

@@ -2,15 +2,16 @@ import { r as registerInstance, h, g as getElement } from './index-738480cf.js';
 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 { a as onRequiredChange } from './on-attribute-change-2b01c315.js';
-import { t as trackComponent } from './usage-tracking-a62c779c.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 guxFormFieldDropdownCss = ".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}.gux-input-and-error-container{flex-grow:1}.gux-input-and-error-container .gux-input.gux-disabled{pointer-events:none;opacity:0.5}";
+const guxFormFieldDropdownCss = ".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}.gux-input-and-error-container{flex-grow:1}.gux-input-and-error-container .gux-input.gux-disabled{pointer-events:none;opacity:0.5}";
 
 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;
@@ -27,6 +28,7 @@ const GuxFormFieldDropdown = class {
     registerInstance(this, hostRef);
     this.computedLabelPosition = 'above';
     this.hasError = false;
+    this.hasHelp = false;
   }
   watchValue(hasError) {
     const dropdownSlot = this.root.querySelector('gux-dropdown') ||
@@ -36,12 +38,14 @@ const GuxFormFieldDropdown = class {
     }
   }
   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() {
@@ -53,7 +57,7 @@ const GuxFormFieldDropdown = class {
         'gux-input': true,
         'gux-input-error': this.hasError,
         '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" })))));
   }
   get variant() {
     const labelPositionVariant = this.labelPosition

package/dist/esm/gux-form-field-input-clear-button.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, g as getElement } from './index-738480cf.js';
-import { t as trackComponent } from './usage-tracking-a62c779c.js';
+import { t as trackComponent } from './usage-tracking-2c66c99e.js';
 import { b as buildI18nForComponent } from './index-5b4bc0a0.js';
 import './get-closest-element-1597503c.js';
 

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

@@ -4,7 +4,7 @@ import { r as randomHTMLId } from './random-html-id-8e3f658c.js';
 import { l as logError } from './log-error-b1a1a086.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-a62c779c.js';
+import { t as trackComponent } from './usage-tracking-2c66c99e.js';
 
 const guxFormFieldCss = "gux-form-field-legacy{display:block;color:#2e394c}gux-form-field-legacy .gux-label-and-input-and-error-container{margin:16px 0}gux-form-field-legacy .gux-label-and-input-and-error-container label{font-size:12px;font-weight:bold;line-height:20px}gux-form-field-legacy .gux-label-and-input-and-error-container input,gux-form-field-legacy .gux-label-and-input-and-error-container select{width:100%;font-size:12px}gux-form-field-legacy .gux-label-and-input-and-error-container .gux-input-container input{overflow:hidden;text-overflow:ellipsis}gux-form-field-legacy .gux-label-and-input-and-error-container .gux-input-error .gux-input-container{border-color:#ea0b0b}gux-form-field-legacy .gux-label-and-input-and-error-container .gux-input-error textarea{border-color:#ea0b0b}gux-form-field-legacy .gux-label-and-input-and-error-container .gux-input-error .gux-input-color-main-element{border-color:#ea0b0b}gux-form-field-legacy .gux-label-and-input-and-error-container .gux-input-and-error-container{flex-grow:1}gux-form-field-legacy .gux-label-and-input-and-error-container.gux-beside{display:flex;flex-direction:row}gux-form-field-legacy .gux-label-and-input-and-error-container.gux-beside .gux-label-container{position:relative;top:7px;width:fit-content;min-width:45px;margin-right:8px}gux-form-field-legacy .gux-label-and-input-and-error-container.gux-beside gux-input-range,gux-form-field-legacy .gux-label-and-input-and-error-container.gux-beside gux-input-select,gux-form-field-legacy .gux-label-and-input-and-error-container.gux-beside gux-input-text-like,gux-form-field-legacy .gux-label-and-input-and-error-container.gux-beside gux-input-search{flex:1 1 auto}gux-form-field-legacy .gux-label-and-input-and-error-container.gux-screenreader label{position:absolute;top:auto;left:-10000px;width:1px;height:1px;overflow:hidden}gux-form-field-legacy .gux-required::after{font-size:12px;color:#ea0b0b;content:' *'}gux-form-field-legacy .gux-error{display:none;margin:4px 0}gux-form-field-legacy .gux-error.gux-show{display:block}";
 

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-a62c779c.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-a62c779c.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-a62c779c.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-a62c779c.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-a62c779c.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