genesys-spark-components 4.58.0 → 4.60.0

package/dist/collection/components/stable/gux-flyout-menu/gux-menu/gux-submenu/gux-submenu.js

@@ -140,13 +140,13 @@ export class GuxSubmenu {
         }
     }
     render() {
-        return (h(Host, { key: 'c6d578ef28c638d8eb6ff9a045a3f3687c452f6c' }, h("button", { key: '9533baadd6a001df14d54f41392dbc878b282d57', type: "button", class: {
+        return (h(Host, { key: '7e642bf815750185f8ed4c3629acfdd5fce06db1' }, h("button", { key: 'd383df46f57de9aec3dd18fefde5dd6f369fb7f9', type: "button", class: {
                 'gux-submenu-button': true,
                 'gux-submenu-button-active': this.isShown
-            }, role: "menuitem", tabIndex: -1, ref: el => (this.buttonElement = el), "aria-haspopup": "true", "aria-expanded": this.isShown.toString() }, h("span", { key: '0000fe314ccf0492c064db2299cce925eeb17801', class: "gux-submenu-button-text" }, this.label), h("gux-icon", { key: '5260763fffbf5fd8377d894cc6f8ae42a49ab0d1', class: "gux-submenu-open-icon", "icon-name": "custom/chevron-right-small-regular", decorative: true })), h("div", { key: '0e851a7df5d5e5cda84501971af0fe94b1100202', ref: el => (this.submenuElement = el), class: {
+            }, role: "menuitem", tabIndex: -1, ref: el => (this.buttonElement = el), "aria-haspopup": "true", "aria-expanded": this.isShown.toString() }, h("span", { key: '2a86ac278b7e3066bf60bbe7911ec2baf43a05a0', class: "gux-submenu-button-text" }, this.label), h("gux-icon", { key: '3f0f05fd374f17c1d457af8b70836170a5a09e08', class: "gux-submenu-open-icon", "icon-name": "custom/chevron-right-small-regular", decorative: true })), h("div", { key: 'ad5bb371fb46c2635aa251c739bb953c5d653d58', ref: el => (this.submenuElement = el), class: {
                 'gux-submenu-wrapper': true,
                 'gux-shown': this.isShown
-            } }, h("div", { key: '823b0ae4a3f108b4acfb6091cbd56190a7c685fc', role: "menu", class: "gux-submenu-content", ref: el => (this.submenuContentElement = el) }, h("slot", { key: '3c69f4292ab70e8cc7f5af5461a59ae7afc9a173' })))));
+            } }, h("div", { key: '8ec9163990d5244a36d17ec848d3af0abbb93e45', role: "menu", class: "gux-submenu-content", ref: el => (this.submenuContentElement = el) }, h("slot", { key: 'b12468fb757f0135b25a389894e3ae3a4601c037' })))));
     }
     static get is() { return "gux-submenu"; }
     static get encapsulation() { return "shadow"; }

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

@@ -3,6 +3,7 @@
   display: none;
   flex-direction: row;
   flex-wrap: nowrap;
+  gap: var(--gse-ui-formControl-helper-gap);
   place-content: stretch flex-start;
   align-items: center;
   padding: var(--gse-ui-formControl-helper-errorPadding);
@@ -16,11 +17,10 @@
 }
 .gux-form-field-error gux-icon {
   flex: 0 1 auto;
-  align-self: auto;
+  align-self: start;
   order: 0;
   min-width: var(--gse-ui-icon-size-sm);
   min-height: var(--gse-ui-icon-size-sm);
-  margin-right: var(--gse-ui-formControl-helper-gap);
   color: var(--gse-ui-formControl-helper-errorColor);
 }
 .gux-form-field-error .gux-message {

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

@@ -46,10 +46,10 @@ export class GuxFormFieldCheckbox {
         }
     }
     render() {
-        return (h(Host, { key: '0785cbd054e135fba2b2081762c23dbc4ddb96df', class: {
+        return (h(Host, { key: 'e8c625f6d0687c707e5cefbf0dde2a487faced25', class: {
                 'gux-input-error': this.hasError,
                 'gux-disabled': this.disabled
-            } }, h("div", { key: 'dc90464bfba7e28080a13e29af0c6ff25bc98258', class: "gux-form-field-container" }, h("div", { key: '8672e079535aaaa77491616561602df596922237', class: "gux-input-label" }, h("div", { key: 'e49f0a1d602a5ec989871ec3a90f99e1757b7ac0', class: "gux-input" }, h("slot", { key: 'ab397ae52b464ef5afe3b1974b07b0a55d70a980', name: "input", onSlotchange: () => this.setInput() })), h("div", { key: '13f9dd71621769b546e66913b637d6341160e80c', class: `gux-label-${this.labelPosition}` }, h("slot", { key: 'b1ef2f39d234072936f84b870faf2df4c50bcc5b', name: "label" }), h(GuxFormFieldError, { key: 'f12ae3d745997d6f166cb5c0111c6236d1e6d525', show: this.hasError }, h("slot", { key: 'ba82f51995bc62942d083347750e9a8560abd66c', name: "error" })), h(GuxFormFieldHelp, { key: 'f919293dded6a0e574aad3e963ed4b578dddd889', show: !this.hasError && this.hasHelp }, h("slot", { key: 'cc5bb5ba98c87c4b864a3984f375e8cde34458f6', name: "help" })))))));
+            } }, h("div", { key: '4bc7a46bea73ad5f38b90b47554cb6f330c1f639', class: "gux-form-field-container" }, h("div", { key: 'fa879e9b2b58afb8039fcfe75d453773a9c7e936', class: "gux-input-label" }, h("div", { key: '22620b8d78150ca51fc35596215a66c12f83cbad', class: "gux-input" }, h("slot", { key: '10975f45e08b2c4dea53d7f47c79635cade0593b', name: "input", onSlotchange: () => this.setInput() })), h("div", { key: 'a43b0e44790171037bf32d2a168d630b20dc69b7', class: `gux-label-${this.labelPosition}` }, h("slot", { key: '8e6e825334b3b1257c4a74bac694c1d507a40ba4', name: "label" }), h(GuxFormFieldError, { key: '86efc704457cef828d87b85cd25613724e089820', show: this.hasError }, h("slot", { key: '54c814526388b8a0454a11fb32e144dc4e2b9ccf', name: "error" })), h(GuxFormFieldHelp, { key: 'e669522ef60de3a7fc4f0de374000dea30e34075', show: !this.hasError && this.hasHelp }, h("slot", { key: '4b60f28d27909334be5ed72d048f93359c8101bb', name: "help" })))))));
     }
     get variant() {
         return this.labelPosition.toLowerCase();

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

@@ -10,6 +10,7 @@
   display: none;
   flex-direction: row;
   flex-wrap: nowrap;
+  gap: var(--gse-ui-formControl-helper-gap);
   place-content: stretch flex-start;
   align-items: center;
   padding: var(--gse-ui-formControl-helper-errorPadding);
@@ -23,11 +24,10 @@
 }
 .gux-form-field-error gux-icon {
   flex: 0 1 auto;
-  align-self: auto;
+  align-self: start;
   order: 0;
   min-width: var(--gse-ui-icon-size-sm);
   min-height: var(--gse-ui-icon-size-sm);
-  margin-right: var(--gse-ui-formControl-helper-gap);
   color: var(--gse-ui-formControl-helper-errorColor);
 }
 .gux-form-field-error .gux-message {

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

@@ -53,13 +53,13 @@ export class GuxFormFieldColor {
         }
     }
     render() {
-        return (h(GuxFormFieldContainer, { key: 'e45de896c85521bc05c7af70d4fe1328e7f9f734', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: 'f3c801104d56dbd333a4ec56d74adc8e869cf1a2', position: this.computedLabelPosition, required: this.required }, h("slot", { key: 'ed6380218a1baa734bbc7948c2ff0f82c185f945', name: "label", onSlotchange: () => this.setLabel() })), h("div", { key: 'd0ae690039df9381ad5e5bd0b190511368a4ea4a', class: "gux-input-and-error-container" }, h("div", { key: '15c57746d8e2c0ec53d7048e4219f0db40b4b427', class: {
+        return (h(GuxFormFieldContainer, { key: 'e5a0b01d4c3b3235814e1850f4327bb98001768a', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: 'cbca4a107c820820234cd14320c556a9df736891', position: this.computedLabelPosition, required: this.required }, h("slot", { key: '836415e3ea29a91506f0c26948a390d42c6590be', name: "label", onSlotchange: () => this.setLabel() })), h("div", { key: 'b0b8b99ef9c3e3c02928e5de3030f35419d28d0b', class: "gux-input-and-error-container" }, h("div", { key: '9fa939e177ce359c583ce7a6088e67d2c1ee14bf', class: {
                 'gux-input': true,
                 'gux-input-error': this.hasError
-            } }, h("div", { key: '2673865c6436cec4e81ecd1156a3ace254b946b8', class: {
+            } }, h("div", { key: '2f875ebd3c88a1ae62628d76ced82c09505c9679', class: {
                 'gux-input-container': true,
                 'gux-disabled': this.disabled
-            } }, h("slot", { key: '7bc352e38c21f04405636b9593ddccc56998b3ec', name: "input", onSlotchange: () => this.setInput() }))), h(GuxFormFieldError, { key: '259d8c9e2bb44017236e6bc83685862290754fde', show: this.hasError }, h("slot", { key: '4d85c62dee945f688e717cfab84928af23c395ce', name: "error" })), h(GuxFormFieldHelp, { key: '60b16a907729029227acba25567b6d0576d63c0d', show: !this.hasError && this.hasHelp }, h("slot", { key: '0f90a7ac5c4561997fb55a9b472051c9a6c3fbb2', name: "help" })))));
+            } }, h("slot", { key: '1f902f2c55c5ba07cf30506e7bd549641ae26b99', name: "input", onSlotchange: () => this.setInput() }))), h(GuxFormFieldError, { key: 'b708dd10f62032024f25c0a066c8973ed3f48f8c', show: this.hasError }, h("slot", { key: '5b2e92e9c7d4134ab6c9eefb9af12ea9045e55db', name: "error" })), h(GuxFormFieldHelp, { key: '14dc8c938b39bc4b0ad2b09fac79bf9f5fa65fe7', show: !this.hasError && this.hasHelp }, h("slot", { key: 'bdba018565b235c9bd740560557b83aabfe9ef29', name: "help" })))));
     }
     get variant() {
         return this.labelPosition ? this.labelPosition.toLowerCase() : 'none';

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

@@ -19,6 +19,7 @@
   display: none;
   flex-direction: row;
   flex-wrap: nowrap;
+  gap: var(--gse-ui-formControl-helper-gap);
   place-content: stretch flex-start;
   align-items: center;
   padding: var(--gse-ui-formControl-helper-errorPadding);
@@ -32,11 +33,10 @@
 }
 .gux-form-field-error gux-icon {
   flex: 0 1 auto;
-  align-self: auto;
+  align-self: start;
   order: 0;
   min-width: var(--gse-ui-icon-size-sm);
   min-height: var(--gse-ui-icon-size-sm);
-  margin-right: var(--gse-ui-formControl-helper-gap);
   color: var(--gse-ui-formControl-helper-errorColor);
 }
 .gux-form-field-error .gux-message {

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

@@ -63,10 +63,10 @@ export class GuxFormFieldDropdown {
     }
     render() {
         var _a;
-        return (h(GuxFormFieldFieldsetContainer, { key: 'f46d74411e26cf1c9c03c97fac347bf5dc788ab5', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLegendLabel, { key: 'e371f01108821c7baad0edb1e8e1a46f05073788', position: this.computedLabelPosition, required: this.required, labelText: (_a = this.label) === null || _a === void 0 ? void 0 : _a.textContent }, h("slot", { key: 'a3c0a06a605aa12b1a297730c9f65bd1cbf87e4a', name: "label", onSlotchange: () => this.setLabel() }), this.renderScreenReaderText(this.getI18nValue('required'), this.required), this.renderScreenReaderText(getSlotTextContent(this.root, 'error'), this.hasError), this.renderScreenReaderText(getSlotTextContent(this.root, 'help'), this.hasHelp)), h("div", { key: '9955be931b630d95d9e7e5948897bb9661bb1b43', class: "gux-input-and-error-container" }, h("div", { key: 'c05ea07ab13a20adf3c55e6eded59118fd1a65ae', class: {
+        return (h(GuxFormFieldFieldsetContainer, { key: 'aeeb2cefebcb8d38190eea1e1e52dfbd463b33dd', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLegendLabel, { key: '03966c108b6c4f04ca31ccd142dcd613421d6128', position: this.computedLabelPosition, required: this.required, labelText: (_a = this.label) === null || _a === void 0 ? void 0 : _a.textContent }, h("slot", { key: '3236ab6bb37fdc86691aa665c27ca4c14dd123bb', name: "label", onSlotchange: () => this.setLabel() }), this.renderScreenReaderText(this.getI18nValue('required'), this.required), this.renderScreenReaderText(getSlotTextContent(this.root, 'error'), this.hasError), this.renderScreenReaderText(getSlotTextContent(this.root, 'help'), this.hasHelp)), h("div", { key: '901c931ba1947da0d9b7bcea78721a2d495fd497', class: "gux-input-and-error-container" }, h("div", { key: '285c36b81b6ad581bdade9534c7e20d0fdc37927', class: {
                 'gux-input': true,
                 'gux-input-error': this.hasError
-            } }, h("slot", { key: 'dbd770b3a4f698c9e7fbf292b9ff6c3956f892f0' })), h(GuxFormFieldError, { key: '7946e209f2047d2d55b4c5f8f7e4127a1551fe75', show: this.hasError }, h("slot", { key: '0e63501224440e94a44e0860f9dd4224bd96cb4f', name: "error" })), h(GuxFormFieldHelp, { key: 'd4b22cd40da1f353a303df3b1fa83fbe66091d0a', show: !this.hasError && this.hasHelp }, h("slot", { key: 'c4da27eb02ad0c7a0466278cea429de827261e19', name: "help" })))));
+            } }, h("slot", { key: 'a0967efa3bba07617ec208515444741ec176e3ad' })), h(GuxFormFieldError, { key: '5784c1e5bf572ef0d45778111587eaa208d999a3', show: this.hasError }, h("slot", { key: 'ed5bc11a0c9fc5f388d990c9cf741f14acfe4048', name: "error" })), h(GuxFormFieldHelp, { key: '18028294ee321de7da6bc79f176122bf45df833f', show: !this.hasError && this.hasHelp }, h("slot", { key: 'dfc36754247417129c808d2398ef5859a21e1be5', name: "help" })))));
     }
     get variant() {
         const labelPositionVariant = this.labelPosition

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

@@ -10,6 +10,7 @@
   display: none;
   flex-direction: row;
   flex-wrap: nowrap;
+  gap: var(--gse-ui-formControl-helper-gap);
   place-content: stretch flex-start;
   align-items: center;
   padding: var(--gse-ui-formControl-helper-errorPadding);
@@ -23,11 +24,10 @@
 }
 .gux-form-field-error gux-icon {
   flex: 0 1 auto;
-  align-self: auto;
+  align-self: start;
   order: 0;
   min-width: var(--gse-ui-icon-size-sm);
   min-height: var(--gse-ui-icon-size-sm);
-  margin-right: var(--gse-ui-formControl-helper-gap);
   color: var(--gse-ui-formControl-helper-errorColor);
 }
 .gux-form-field-error .gux-message {

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

@@ -69,14 +69,14 @@ export class GuxFormFieldNumber {
     }
     render() {
         const showClearButton = this.clearable && this.hasContent && !this.disabled;
-        return (h(GuxFormFieldContainer, { key: 'a9a06a2ad9a0b1fb90f9c08e39e412b56724b5e8', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: '48428576ad89dbeef84489a4457548b1eb6fbe89', position: this.computedLabelPosition, required: this.required }, h("slot", { key: '4df79bf4e59801c57f7333414d615ac9afb75f6d', name: "label", onSlotchange: () => this.setLabel() })), h("div", { key: 'ebc55fafb330cdfd68d4c582806887c90b497507', class: "gux-input-and-error-container" }, h("div", { key: 'f47ff506665012da5edd9f798cebde2b1e339740', class: {
+        return (h(GuxFormFieldContainer, { key: 'f8a6263300721fabed1598de265f03f057838f74', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: 'e32c773c643108d62c37d418f9cc6beba83e0e36', position: this.computedLabelPosition, required: this.required }, h("slot", { key: 'efc3fef4d86af9b7790cb230b3a27a11d4d6b907', name: "label", onSlotchange: () => this.setLabel() })), h("div", { key: '2acd69ecc8a21a92936bd585f9e9a4b621231bd9', class: "gux-input-and-error-container" }, h("div", { key: '233fd1e290da8bf45d0e77a0ca43a88677e6cf0a', class: {
                 'gux-input': true,
                 'gux-input-error': this.hasError
-            }, part: "input-section" }, h("div", { key: 'cdc4e655e611a6742538ab5f4eac014a959e6fc8', class: {
+            }, part: "input-section" }, h("div", { key: '7930f9f5df29d0c836d9f4abdc8887b8c3d1cfc2', class: {
                 'gux-input-container': true,
                 'gux-disabled': this.disabled,
                 'gux-clear': showClearButton
-            } }, h("slot", { key: 'aa5b10586faa8e06051477bb6d7dacbad348988a', 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, { key: '1f169dd7cce45f773f094db4ce3da5ef32dda8e5', show: this.hasError }, h("slot", { key: 'eff3e2766fd1881e52c5bfcad5a4e184ac6754d6', name: "error" })), h(GuxFormFieldHelp, { key: '60f31cc749482b4fba9d5d62ca1387869d72399e', show: !this.hasError && this.hasHelp }, h("slot", { key: 'cd49807bb8ef4719e8170445301360185357f758', name: "help" })))));
+            } }, h("slot", { key: '8d33ab29cbea52b965970e80567c0a7c5b70caab', 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, { key: '14856b89f418274dbbd30b39e043c0adfcbe5b99', show: this.hasError }, h("slot", { key: 'a485d17c2c0edb3e4d6c47e9d1989f7de3c1e9d4', name: "error" })), h(GuxFormFieldHelp, { key: '9e5ad524d3593c58845d5d0c9fc2fffb984043b2', show: !this.hasError && this.hasHelp }, h("slot", { key: 'f215b7c1df4b4824bba6e9294eb4360de5a7ef1c', name: "help" })))));
     }
     get variant() {
         const labelPositionVariant = this.labelPosition

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

@@ -19,6 +19,7 @@
   display: none;
   flex-direction: row;
   flex-wrap: nowrap;
+  gap: var(--gse-ui-formControl-helper-gap);
   place-content: stretch flex-start;
   align-items: center;
   padding: var(--gse-ui-formControl-helper-errorPadding);
@@ -32,11 +33,10 @@
 }
 .gux-form-field-error gux-icon {
   flex: 0 1 auto;
-  align-self: auto;
+  align-self: start;
   order: 0;
   min-width: var(--gse-ui-icon-size-sm);
   min-height: var(--gse-ui-icon-size-sm);
-  margin-right: var(--gse-ui-formControl-helper-gap);
   color: var(--gse-ui-formControl-helper-errorColor);
 }
 .gux-form-field-error .gux-message {

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

@@ -60,13 +60,13 @@ export class GuxFormFieldPhone {
     }
     render() {
         var _a;
-        return (h(GuxFormFieldFieldsetContainer, { key: '8ff85b3c03219e2b844e7b061551381e38bba1c8', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLegendLabel, { key: 'dec197eec3d5b8ec3302a86c05b4324f596040cf', position: this.computedLabelPosition, required: this.required, labelText: (_a = this.label) === null || _a === void 0 ? void 0 : _a.textContent }, h("slot", { key: 'a746bf762e53618f705dd499e606b66266c80a6b', name: "label", onSlotchange: () => this.setLabel() }), this.renderScreenReaderText(this.getI18nValue('required'), this.required), this.renderScreenReaderText(getSlotTextContent(this.root, 'error'), this.hasError)), h("div", { key: 'f5fb5c07bc8e4976a388fa0ee3bb1a4937a9a728', class: "gux-input-and-error-container" }, h("div", { key: 'c83de5abdb4de589d6aeafa77b9e77e5996ee640', class: {
+        return (h(GuxFormFieldFieldsetContainer, { key: '6f3dcc2df1e049772e8fa25a9165092bbcb7e37a', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLegendLabel, { key: '5c0ce7b6b7b76052811481e8c0d110600571d176', position: this.computedLabelPosition, required: this.required, labelText: (_a = this.label) === null || _a === void 0 ? void 0 : _a.textContent }, h("slot", { key: 'ce266647a05aa9ea122186d6eae6317756aed01f', name: "label", onSlotchange: () => this.setLabel() }), this.renderScreenReaderText(this.getI18nValue('required'), this.required), this.renderScreenReaderText(getSlotTextContent(this.root, 'error'), this.hasError)), h("div", { key: '5f01ad183044592ddf5141d6109f347a97fae0d3', class: "gux-input-and-error-container" }, h("div", { key: '20dd9d00ffe2aa659ba2d62334454c5feb29c7e9', class: {
                 'gux-input': true,
                 'gux-input-error': this.hasError
-            } }, h("div", { key: 'f502626469f903e2d5b869097dedb04d2883d9d5', class: {
+            } }, h("div", { key: 'e53e678ece01ed35a0d30f8f5634180d7db1daf2', class: {
                 'gux-input-container': true,
                 'gux-disabled': this.disabled
-            } }, h("slot", { key: '3febd3428004a50b99957c42b8dc553912d1d009' }))), h(GuxFormFieldError, { key: '3b43636a5fcc5e36650fb74d0d134f5c013b6d5b', show: this.hasError }, h("slot", { key: '6eafb872935baf54f0b200f7f646cad1188d0867', name: "error" })), h(GuxFormFieldHelp, { key: 'e0a8e0ab155267823fcf382431c99d2a4b314985', show: !this.hasError && this.hasHelp }, h("slot", { key: '0790b4c83d57f68ed0a33f404d1293470ec402d0', name: "help" })))));
+            } }, h("slot", { key: '1a01971423a7a0a5bedd726ce946c37d4f8a7952' }))), h(GuxFormFieldError, { key: '526dbfac1bfcda733f72816852ee529da891207e', show: this.hasError }, h("slot", { key: '04bb439b88d010b43d312b6bf5f95eddb476a216', name: "error" })), h(GuxFormFieldHelp, { key: 'a7f8f06b605800b4d03a9519e053a92cbd4e485c', show: !this.hasError && this.hasHelp }, h("slot", { key: '8242387ab7a043766c6ec74cf20352ca0ed7fa67', name: "help" })))));
     }
     renderScreenReaderText(text, condition = true) {
         if (condition) {

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

@@ -24,6 +24,7 @@
   display: none;
   flex-direction: row;
   flex-wrap: nowrap;
+  gap: var(--gse-ui-formControl-helper-gap);
   place-content: stretch flex-start;
   align-items: center;
   padding: var(--gse-ui-formControl-helper-errorPadding);
@@ -37,11 +38,10 @@
 }
 .gux-form-field-error gux-icon {
   flex: 0 1 auto;
-  align-self: auto;
+  align-self: start;
   order: 0;
   min-width: var(--gse-ui-icon-size-sm);
   min-height: var(--gse-ui-icon-size-sm);
-  margin-right: var(--gse-ui-formControl-helper-gap);
   color: var(--gse-ui-formControl-helper-errorColor);
 }
 .gux-form-field-error .gux-message {

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

@@ -26,8 +26,10 @@ import { trackComponent } from "../../../../../utils/tracking/usage";
 export class GuxFormFieldRadio {
     constructor() {
         this.disabled = undefined;
-        this.hasError = false;
         this.hasHelp = false;
+        this.hasError = false;
+        this.hasGroupError = false;
+        this.hasGroupDisabled = false;
     }
     onMutation() {
         this.hasError = hasSlot(this.root, 'error');
@@ -45,13 +47,16 @@ export class GuxFormFieldRadio {
         }
     }
     render() {
-        return (h(Host, { key: 'd2daead3becf9dfc99d48fd75b4184a0f17a575d', class: {
-                'gux-input-error': this.hasError,
+        return (h(Host, { key: 'e17456ce9b8015838eacb38cd698f3f4877b1a99', class: {
+                'gux-input-error': this.hasError || this.hasGroupError,
                 'gux-disabled': this.disabled
-            } }, h("div", { key: '836a7e83f8f954e4f175979720da3c069c90c66a', class: "gux-form-field-container" }, h("div", { key: '6d8ae39bf560ebcda1998ced209624d5509e6e8e', class: "gux-input-label" }, h("div", { key: '7ed914a1e4c76eaf90f0d49c445b0ede8412a727', class: "gux-input" }, h("slot", { key: '2117ece053b32ad43fbf7aadf343acd1f583b91e', name: "input", onSlotchange: () => this.setInput() })), h("div", { key: 'ac2008218c656bb24828cb465b0e4ecaafb93899', class: "gux-label", "aria-disabled": this.disabled ? 'true' : 'false' }, h("slot", { key: '8f95b8edbcb04cb2635c29b07ad67c6c46159ccd', name: "label" }), h(GuxFormFieldError, { key: 'f613802f6316ff517f24b39a2123afde96b403ed', show: this.hasError }, h("slot", { key: '4947bb510a3423a3e5922ee65f3a3d9ba2c256e5', name: "error" })), h(GuxFormFieldHelp, { key: '6f661b21afb70d1b80cd13c0119016c49a35aa5b', show: !this.hasError && this.hasHelp }, h("slot", { key: '6020ad3b02091f2c485328945be9e87dd2bf435a', name: "help" })))))));
+            } }, h("div", { key: 'fe8d1587dc9d4fc8f018820c71c732744953f207', class: "gux-form-field-container" }, h("div", { key: '808758ed100a768166f5293516deda32a0e43a76', class: "gux-input-label" }, h("div", { key: 'bf76f380a1eef45ddad060fc329692191d8975a7', class: "gux-input" }, h("slot", { key: '50b92448e54b4f8657d6635776797051640797cb', name: "input", onSlotchange: () => this.setInput() })), h("div", { key: '96c770f17e7f9b64a321eedf688b494ff7d21934', class: "gux-label", "aria-disabled": this.disabled ? 'true' : 'false' }, h("slot", { key: '95a58e33847a0f69581dbdb7c5daf85c1f94d920', name: "label" }), h(GuxFormFieldError, { key: 'a55afaef6dce712f6642f32f5062b3390f39bd76', show: this.hasError }, h("slot", { key: '4aa4107d5024de21aa285af17d50be5855636309', name: "error" })), h(GuxFormFieldHelp, { key: '7e01a45a1f0e6d8ee1f72ecf90e890b35ebf3b99', show: !this.hasError && this.hasHelp }, h("slot", { key: '970ad77bfd7ff17c5d48f0786aa23c6af45cb9e2', name: "help" })))))));
     }
     setInput() {
         this.input = getSlottedInput(this.root, 'input[type="radio"][slot="input"]');
+        if (this.hasGroupDisabled) {
+            this.input.disabled = true;
+        }
         preventBrowserValidationStyling(this.input);
         this.disabled = calculateInputDisabledState(this.input);
         this.disabledObserver = onInputDisabledStateChange(this.input, (disabled) => {
@@ -71,11 +76,51 @@ export class GuxFormFieldRadio {
             "$": ["gux-form-field-radio.css"]
         };
     }
+    static get properties() {
+        return {
+            "hasGroupError": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "has-group-error",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "hasGroupDisabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "has-group-disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
     static get states() {
         return {
             "disabled": {},
-            "hasError": {},
-            "hasHelp": {}
+            "hasHelp": {},
+            "hasError": {}
         };
     }
     static get elementRef() { return "root"; }

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

@@ -0,0 +1,163 @@
+/* stylelint-disable-next-line selector-class-pattern */ /* stylelint-disable-next-line selector-class-pattern */
+/* stylelint-disable-next-line selector-class-pattern */
+/* stylelint-disable-next-line selector-class-pattern */
+.gux-form-field-fieldset-container {
+  display: flex;
+  min-width: 0;
+  padding: 0;
+  margin: 0;
+  border: none;
+}
+.gux-form-field-fieldset-container.gux-beside {
+  flex-direction: row;
+}
+.gux-form-field-fieldset-container.gux-above {
+  flex-direction: column;
+}
+
+.gux-form-field-error {
+  display: none;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  gap: var(--gse-ui-formControl-helper-gap);
+  place-content: stretch flex-start;
+  align-items: center;
+  padding: var(--gse-ui-formControl-helper-errorPadding);
+  font-family: var(--gse-ui-formControl-helper-helperText-fontFamily);
+  font-size: var(--gse-ui-formControl-helper-helperText-fontSize);
+  line-height: var(--gse-ui-formControl-helper-helperText-lineHeight);
+  color: var(--gse-ui-formControl-helper-errorColor);
+}
+.gux-form-field-error.gux-show {
+  display: flex;
+}
+.gux-form-field-error gux-icon {
+  flex: 0 1 auto;
+  align-self: start;
+  order: 0;
+  min-width: var(--gse-ui-icon-size-sm);
+  min-height: var(--gse-ui-icon-size-sm);
+  color: var(--gse-ui-formControl-helper-errorColor);
+}
+.gux-form-field-error .gux-message {
+  flex: 0 1 auto;
+  align-self: auto;
+  order: 0;
+}
+
+.gux-form-field-legend-label ::slotted(label) {
+  white-space: nowrap;
+}
+.gux-form-field-legend-label.gux-required::after {
+  color: var(--gse-ui-formControl-label-indicator-requiredColor);
+  content: " *";
+}
+.gux-form-field-legend-label.gux-beside {
+  position: relative;
+  top: var(--gse-ui-formControl-input-top);
+  float: left;
+  width: fit-content;
+  min-width: 45px;
+  margin-right: var(--gse-ui-formControl-label-gap);
+}
+.gux-form-field-legend-label.gux-above {
+  padding: var(--gse-ui-formControl-label-padding);
+}
+.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;
+  place-content: stretch flex-start;
+  align-items: flex-start;
+  justify-content: flex-start;
+  padding: var(--gse-ui-formControl-helper-paddingSmall);
+  font-family: var(--gse-ui-formControl-helper-helperText-fontFamily);
+  font-size: var(--gse-ui-formControl-helper-helperText-fontSize);
+  line-height: var(--gse-ui-formControl-helper-helperText-lineHeight);
+  color: var(--gse-ui-formControl-helper-defaultColor);
+}
+.gux-form-field-help.gux-show {
+  display: flex;
+}
+.gux-form-field-help .gux-message {
+  flex: 0 1 auto;
+  align-self: none;
+  order: 0;
+}
+
+.gux-form-field-error {
+  display: none;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  gap: var(--gse-ui-formControl-helper-gap);
+  place-content: stretch flex-start;
+  align-items: center;
+  padding: var(--gse-ui-formControl-helper-errorPadding);
+  font-family: var(--gse-ui-formControl-helper-helperText-fontFamily);
+  font-size: var(--gse-ui-formControl-helper-helperText-fontSize);
+  line-height: var(--gse-ui-formControl-helper-helperText-lineHeight);
+  color: var(--gse-ui-formControl-helper-errorColor);
+}
+.gux-form-field-error.gux-show {
+  display: flex;
+}
+.gux-form-field-error gux-icon {
+  flex: 0 1 auto;
+  align-self: start;
+  order: 0;
+  min-width: var(--gse-ui-icon-size-sm);
+  min-height: var(--gse-ui-icon-size-sm);
+  color: var(--gse-ui-formControl-helper-errorColor);
+}
+.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;
+  place-content: stretch flex-start;
+  align-items: flex-start;
+  justify-content: flex-start;
+  padding: var(--gse-ui-formControl-helper-paddingSmall);
+  font-family: var(--gse-ui-formControl-helper-helperText-fontFamily);
+  font-size: var(--gse-ui-formControl-helper-helperText-fontSize);
+  line-height: var(--gse-ui-formControl-helper-helperText-lineHeight);
+  color: var(--gse-ui-formControl-helper-defaultColor);
+}
+.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;
+}
+
+:host([disabled]) .gux-form-field-legend-label {
+  opacity: var(--gse-ui-formControl-input-disabled-opacity);
+}
+
+.gux-form-field-legend-label {
+  font-family: var(--gse-ui-formControl-label-text-fontFamily);
+  font-size: var(--gse-ui-formControl-label-text-fontSize);
+  font-weight: var(--gse-ui-formControl-label-text-fontWeight);
+  line-height: var(--gse-ui-formControl-label-text-lineHeight);
+  color: var(--gse-ui-formControl-label-labelColor);
+}

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

@@ -0,0 +1,128 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { h } from "@stencil/core";
+import { OnMutation } from "../../../../../utils/decorator/on-mutation";
+import { hasSlot } from "../../../../../utils/dom/has-slot";
+import { GuxFormFieldError, GuxFormFieldHelp, GuxFormFieldLegendLabel, GuxFormFieldFieldsetContainer } from "../../functional-components/functional-components";
+import { getSlotTextContent } from "../../../../../utils/dom/get-slot-text-content";
+import { trackComponent } from "../../../../../utils/tracking/usage";
+/**
+ * @slot group-label - Required slot for label tag
+ * @slot group-error - Optional slot for error message
+ * @slot group-help - Optional slot for help message
+ */
+export class GuxFormFieldRadioGroupBeta {
+    constructor() {
+        this.hasGroupError = false;
+        this.hasGroupHelp = false;
+        this.disabled = false;
+    }
+    watchGroupError(hasGroupError) {
+        const radioSlots = this.root.querySelectorAll('gux-form-field-radio');
+        if (radioSlots) {
+            radioSlots.forEach(item => {
+                item.hasGroupError = hasGroupError;
+            });
+        }
+    }
+    watchDisabled() {
+        this.setDisabledRadio();
+    }
+    onMutation() {
+        this.hasGroupError = hasSlot(this.root, 'group-error');
+        this.hasGroupHelp = hasSlot(this.root, 'group-help');
+    }
+    componentWillLoad() {
+        this.hasGroupError = hasSlot(this.root, 'group-error');
+        this.hasGroupHelp = hasSlot(this.root, 'group-help');
+        this.setLabel();
+        this.setDisabledRadio();
+        trackComponent(this.root);
+    }
+    disconnectedCallback() {
+        if (this.disabledObserver) {
+            this.disabledObserver.disconnect();
+        }
+    }
+    setDisabledRadio() {
+        const radioSlots = this.root.querySelectorAll('gux-form-field-radio');
+        if (radioSlots) {
+            radioSlots.forEach(item => {
+                item.hasGroupDisabled = this.disabled;
+            });
+        }
+    }
+    renderScreenReaderText(text, condition = false) {
+        if (condition) {
+            return (h("gux-screen-reader-beta", null, text));
+        }
+    }
+    render() {
+        var _a;
+        return (h(GuxFormFieldFieldsetContainer, { key: '8f54b265084eb1c2da7fe3283746c5d7be789492', labelPosition: "above" }, h(GuxFormFieldLegendLabel, { key: 'd3589e14418dea8366238f3c51b9fe733c04ea68', position: "above", required: false, labelText: (_a = this.label) === null || _a === void 0 ? void 0 : _a.textContent }, h("slot", { key: '388c245f668ab9bdf799c6796f2dfd0ec1f3fa6e', name: "group-label", onSlotchange: () => this.setLabel() }), this.renderScreenReaderText(getSlotTextContent(this.root, 'group-error'), this.hasGroupError), this.renderScreenReaderText(getSlotTextContent(this.root, 'group-help'), this.hasGroupHelp)), h("slot", { key: '05ab0e89cb8796d91e744d527fce8f27af0a1707' }), h(GuxFormFieldError, { key: 'cea0ae86c19cf0de7c9606ef53b9371a6cc6311a', show: this.hasGroupError }, h("slot", { key: 'b58ebc4dad34f9b7dc5b3c0c513910e2dc2301ce', name: "group-error" })), h(GuxFormFieldHelp, { key: '567d7d9da1dca56dab2e8611bff268736b2c251c', show: !this.hasGroupError && this.hasGroupHelp }, h("slot", { key: 'ebaa33bca1a7e949e570556da99fe95977446a86', name: "group-help" }))));
+    }
+    setLabel() {
+        this.label = this.root.querySelector('label[slot="label"]');
+    }
+    static get is() { return "gux-form-field-radio-group-beta"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["gux-form-field-radio-group.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["gux-form-field-radio-group.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disables the radio buttons in the group."
+                },
+                "attribute": "disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "hasGroupError": {},
+            "hasGroupHelp": {}
+        };
+    }
+    static get elementRef() { return "root"; }
+    static get watchers() {
+        return [{
+                "propName": "hasGroupError",
+                "methodName": "watchGroupError"
+            }, {
+                "propName": "disabled",
+                "methodName": "watchDisabled"
+            }];
+    }
+}
+__decorate([
+    OnMutation({ childList: true, subtree: true })
+], GuxFormFieldRadioGroupBeta.prototype, "onMutation", null);