genesys-spark-components 4.155.0 → 4.156.0

package/dist/collection/components/stable/gux-dismiss-button/gux-dismiss-button.js

@@ -34,6 +34,7 @@ export class GuxDismissButton {
         return {
             "position": {
                 "type": "string",
+                "attribute": "position",
                 "mutable": false,
                 "complexType": {
                     "original": "GuxDismissButtonPosition",
@@ -54,12 +55,12 @@ export class GuxDismissButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "position",
                 "reflect": false,
                 "defaultValue": "'absolute'"
             },
             "size": {
                 "type": "string",
+                "attribute": "size",
                 "mutable": false,
                 "complexType": {
                     "original": "GuxDismissButtonSize",
@@ -80,7 +81,6 @@ export class GuxDismissButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "size",
                 "reflect": false,
                 "defaultValue": "'medium'"
             }

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

@@ -387,6 +387,7 @@ export class GuxDropdown {
         return {
             "value": {
                 "type": "string",
+                "attribute": "value",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -401,11 +402,11 @@ export class GuxDropdown {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "value",
                 "reflect": false
             },
             "disabled": {
                 "type": "boolean",
+                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -420,12 +421,12 @@ export class GuxDropdown {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "disabled",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "required": {
                 "type": "boolean",
+                "attribute": "required",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -440,12 +441,12 @@ export class GuxDropdown {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "required",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "loading": {
                 "type": "boolean",
+                "attribute": "loading",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -460,12 +461,12 @@ export class GuxDropdown {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "loading",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "placeholder": {
                 "type": "string",
+                "attribute": "placeholder",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -480,11 +481,11 @@ export class GuxDropdown {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "placeholder",
                 "reflect": false
             },
             "filterType": {
                 "type": "string",
+                "attribute": "filter-type",
                 "mutable": false,
                 "complexType": {
                     "original": "GuxFilterTypes",
@@ -505,12 +506,12 @@ export class GuxDropdown {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "filter-type",
                 "reflect": false,
                 "defaultValue": "'none'"
             },
             "hasError": {
                 "type": "boolean",
+                "attribute": "has-error",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -525,12 +526,12 @@ export class GuxDropdown {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "has-error",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "exceedTargetWidth": {
                 "type": "boolean",
+                "attribute": "exceed-target-width",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -545,7 +546,6 @@ export class GuxDropdown {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "exceed-target-width",
                 "reflect": false,
                 "defaultValue": "false"
             }

package/dist/collection/components/stable/gux-dropdown-multi/gux-dropdown-multi-tag/gux-dropdown-multi-tag.js

@@ -54,6 +54,7 @@ export class GuxDropdownMultiTag {
         return {
             "disabled": {
                 "type": "boolean",
+                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -68,12 +69,12 @@ export class GuxDropdownMultiTag {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "disabled",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "numberSelected": {
                 "type": "number",
+                "attribute": "number-selected",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -88,7 +89,6 @@ export class GuxDropdownMultiTag {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "number-selected",
                 "reflect": false,
                 "defaultValue": "0"
             }

package/dist/collection/components/stable/gux-dropdown-multi/gux-dropdown-multi.js

@@ -427,6 +427,7 @@ export class GuxDropdownMulti {
         return {
             "value": {
                 "type": "string",
+                "attribute": "value",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -441,11 +442,11 @@ export class GuxDropdownMulti {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "value",
                 "reflect": false
             },
             "disabled": {
                 "type": "boolean",
+                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -460,12 +461,12 @@ export class GuxDropdownMulti {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "disabled",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "required": {
                 "type": "boolean",
+                "attribute": "required",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -480,12 +481,12 @@ export class GuxDropdownMulti {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "required",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "loading": {
                 "type": "boolean",
+                "attribute": "loading",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -500,12 +501,12 @@ export class GuxDropdownMulti {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "loading",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "placeholder": {
                 "type": "string",
+                "attribute": "placeholder",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -520,11 +521,11 @@ export class GuxDropdownMulti {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "placeholder",
                 "reflect": false
             },
             "filterType": {
                 "type": "string",
+                "attribute": "filter-type",
                 "mutable": false,
                 "complexType": {
                     "original": "GuxFilterTypes",
@@ -545,12 +546,12 @@ export class GuxDropdownMulti {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "filter-type",
                 "reflect": false,
                 "defaultValue": "'none'"
             },
             "hasError": {
                 "type": "boolean",
+                "attribute": "has-error",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -565,12 +566,12 @@ export class GuxDropdownMulti {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "has-error",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "exceedTargetWidth": {
                 "type": "boolean",
+                "attribute": "exceed-target-width",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -585,7 +586,6 @@ export class GuxDropdownMulti {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "exceed-target-width",
                 "reflect": false,
                 "defaultValue": "false"
             }

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

@@ -3,6 +3,8 @@ import { autoUpdate, computePosition, arrow, flip, offset, shift } from "@floati
 import { afterNextRenderTimeout } from "../../../utils/dom/after-next-render";
 import { trackComponent } from "../../../utils/tracking/usage";
 import { hideDelay } from "./gux-menu/gux-menu.common";
+import translationResources from "./i18n/en.json";
+import { buildI18nForComponent } from "../../../i18n";
 /**
  * @slot target - target element
  * @slot menu - gux-menu element
@@ -62,6 +64,9 @@ export class GuxFlyoutMenu {
         this.root.focus();
     }
     onFocusin() {
+        if (!this.isShown) {
+            void this.announceElement.guxAnnounce(this.i18n('onTargetFocus'));
+        }
         this.show();
     }
     onFocusout() {
@@ -147,13 +152,17 @@ export class GuxFlyoutMenu {
         if (this.menuContentElement.contains(document.activeElement)) {
             return;
         }
+        this.hideDelayTimeout = afterNextRenderTimeout(() => {
+            void this.announceElement.guxAnnounce(this.i18n('onMenuFocus'));
+        });
         const menu = this.root.querySelector('gux-menu');
         const menuItems = Array.from(menu.children);
         const nextFocusableElement = menuItems[0];
         void nextFocusableElement.guxFocus();
     }
-    componentWillLoad() {
+    async componentWillLoad() {
         trackComponent(this.root);
+        this.i18n = await buildI18nForComponent(this.root, translationResources);
     }
     componentDidLoad() {
         if (this.isShown) {
@@ -174,10 +183,10 @@ export class GuxFlyoutMenu {
         }
     }
     render() {
-        return (h(Host, { key: '2351ad3d650d9d219d7272d1462bc4896b027b12', tabIndex: 0, "aria-haspopup": "true" }, h("span", { key: 'a00f3834b35a503a64d4beca6638e9fe34ac0d14', ref: el => (this.targetElement = el) }, h("slot", { key: '53f5b8d5562cd648cabc0ea4860cc1c473796ac5', name: "target" })), h("div", { key: 'a8245bae6e65405ed733d3332ccbe6e0fd994098', class: {
+        return (h(Host, { key: '7ad3efd714c201938298cf87b5acc6e86a4618c0', tabIndex: 0, "aria-haspopup": "true" }, h("gux-announce-beta", { key: 'f2c96a97da0e807e8a0506b12b01e7d9dc4e03f1', ref: el => (this.announceElement = el) }), h("span", { key: '92702bfb121a185695edac754f6bc29371b7f635', ref: el => (this.targetElement = el) }, h("slot", { key: '6b6e3221ea75d5f498466c178e1229f1eb27e675', name: "target" })), h("div", { key: '701eb459b5a0f71395b55c5785f549bef720d23d', class: {
                 'gux-flyout-menu-content': true,
                 'gux-shown': this.isShown
-            }, ref: el => (this.menuContentElement = el) }, h("div", { key: '5972fa797f392f3c300ea50d61c41d2ed747db07', ref: (el) => (this.arrowElement = el), class: "gux-arrow" }, h("div", { key: 'c6a1f06a0928b002b0a43f2bec0ea04bac0e96cc', class: "gux-arrow-caret" })), h("slot", { key: '01054f699549e0b63b63d36b0d8f5d6cfa26e752', name: "menu" }))));
+            }, ref: el => (this.menuContentElement = el) }, h("div", { key: 'acf809c3553c47e9c7807695dd4598251268ed7a', ref: (el) => (this.arrowElement = el), class: "gux-arrow" }, h("div", { key: 'efea8e265eee0be91e5a95867b869fe0d7c92f6d', class: "gux-arrow-caret" })), h("slot", { key: '7ab7ae4ec3ade19ff50e2eec0d0fc1b20d3d7c93', name: "menu" }))));
     }
     static get is() { return "gux-flyout-menu"; }
     static get encapsulation() { return "shadow"; }

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

@@ -31,7 +31,7 @@ export class GuxMenuOption {
         }
     }
     render() {
-        return (h("button", { key: '2de491d39c836b2f319b6c96b87b31e408b3ecee', type: "button", class: "gux-menu-option-button", "aria-haspopup": "false", tabIndex: -1, ref: el => (this.buttonElement = el) }, h("span", { key: 'ec9cfa62ddd1a747a7121a22f1de50acbde01fe7', class: "gux-menu-option-button-text" }, h("slot", { key: '6557fc3a2b2c38890e3e8ee8304f9e5b05a09f46' }))));
+        return (h("button", { key: 'a6e20affe6260ec5c17148cefdbfebe4a53ad9c6', type: "button", class: "gux-menu-option-button", "aria-haspopup": "false", tabIndex: -1, ref: el => (this.buttonElement = el) }, h("span", { key: '446395c2040c00b76ea1ce85e5f5599cae769aa7', class: "gux-menu-option-button-text" }, h("slot", { key: '4cd4228be9a88d2c02e9ec1431eb3128b72c02e5' }))));
     }
     static get is() { return "gux-menu-option"; }
     static get encapsulation() { return "shadow"; }

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

@@ -4,7 +4,7 @@ import { h, Host } from "@stencil/core";
  */
 export class GuxMenu {
     render() {
-        return (h(Host, { key: 'cdb799dedd8b4e21a5d201b09a66cf7e58e33cbc', role: "menu" }, h("slot", { key: 'df78d0a5df60760b818c32898e70d9a0aeab9033' })));
+        return (h(Host, { key: '0e69a50f9eaaed2e1ed5b8d9f612101dad7d7282', role: "menu" }, h("slot", { key: '37cb104c320d31ddf8770b323a9c72ff3e7bdf53' })));
     }
     static get is() { return "gux-menu"; }
     static get encapsulation() { return "shadow"; }

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

@@ -142,13 +142,13 @@ export class GuxSubmenu {
         }
     }
     render() {
-        return (h(Host, { key: '1ad11a00e017b984c136796e2ba9dd69130acbfb' }, h("button", { key: 'f038445901d006e5418d0383c1b90007ebc7d0c0', type: "button", class: {
+        return (h(Host, { key: '6b7e91ec42d7960b344d59407c9a89ea8666e32a' }, h("button", { key: 'e5b59a39c084eff76454799bdc799b05aca52959', 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: '6df82dc2463debb73e1d6a9012a2693bc0472303', class: "gux-submenu-button-text" }, this.label), h("gux-icon", { key: 'd133d35ecf42ff9605f29c0eed4510df49470877', class: "gux-submenu-open-icon", "icon-name": "custom/chevron-right-small-regular", decorative: true, size: "small" })), h("div", { key: '837cb55663cdc8815aaea972d898848e61be5a67', 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: '63c7252401b34b26ecd67994c590edcbbb18776b', class: "gux-submenu-button-text" }, this.label), h("gux-icon", { key: '7b3ac1e4a44b6e2e0d827d458ab5a9f6ba9daa3e', class: "gux-submenu-open-icon", "icon-name": "custom/chevron-right-small-regular", decorative: true, size: "small" })), h("div", { key: '0678dc9499e9b927f4a0212832407bbe06785bba', ref: el => (this.submenuElement = el), class: {
                 'gux-submenu-wrapper': true,
                 'gux-shown': this.isShown
-            } }, h("div", { key: '23e5beec4ba73ff41118d0b0c2cfbd32a233f6aa', role: "menu", class: "gux-submenu-content", ref: el => (this.submenuContentElement = el) }, h("slot", { key: 'df488b3d36386e2a31ac8172c74f801a5adee2af' })))));
+            } }, h("div", { key: '0e361310e24daaecfa946fce6b06696a06a43d7c', role: "menu", class: "gux-submenu-content", ref: el => (this.submenuContentElement = el) }, h("slot", { key: '19f8cd9928b11e23a103f8f6cb91a496fe4e77b5' })))));
     }
     static get is() { return "gux-submenu"; }
     static get encapsulation() { return "shadow"; }
@@ -166,6 +166,7 @@ export class GuxSubmenu {
         return {
             "label": {
                 "type": "string",
+                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -180,7 +181,6 @@ export class GuxSubmenu {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "label",
                 "reflect": false
             }
         };

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

@@ -47,10 +47,10 @@ export class GuxFormFieldCheckbox {
         }
     }
     render() {
-        return (h(Host, { key: 'e33c81e5ebf0d6384e70c9dbebd425818b629b05', class: {
+        return (h(Host, { key: '9b37ae14b5aa5d2904c22ffcf8393a2d845dc4d4', class: {
                 'gux-input-error': this.hasError || this.hasGroupError,
                 'gux-disabled': this.disabled
-            } }, h("div", { key: 'c0b7b7cd778f53bac8d86714fc4717e5529a4bbf', class: "gux-form-field-container" }, h("div", { key: '67a1fb1fe64d980bbaf270863fdf7ca3ce40e55e', class: "gux-input-label" }, h("div", { key: '412e3c06405f31ffbcd018ce4d11b3a535a02dee', class: "gux-input" }, h("slot", { key: '201f531bb890e6c0d607f4b5f4d8a7449c11707f', name: "input", onSlotchange: () => this.setInput() })), h("div", { key: 'ceec62d559b90a0d73e5c72b64fdfb67466fc85b', class: `gux-label-${this.labelPosition}`, "aria-disabled": this.disabled ? 'true' : 'false' }, h("slot", { key: 'ca0dd77a35a4efdc20dac88259fc54662082bb5b', name: "label" }))), h("div", { key: '84de835f978c2fb17d6c28b7f8f17bc55bb5152c', class: "error-and-help-text" }, h(GuxFormFieldError, { key: 'a042683304e69c33f29d1e35f60bc689398ee3f0', show: this.hasError }, h("slot", { key: '45285c03bcf42723bba20c92063b60db0cbfb449', name: "error" })), h(GuxFormFieldHelp, { key: '0430f5040a211df1c350acde8f1c77163f47cea7', show: !this.hasError && this.hasHelp }, h("slot", { key: 'dea14136220f341ba6649a6ebdebe7f18539d19b', name: "help" }))))));
+            } }, h("div", { key: '2e17696291cdc811675563fbd99096784c0d8d13', class: "gux-form-field-container" }, h("div", { key: '9437488b97202380453b4ce4599262ee55eb1848', class: "gux-input-label" }, h("div", { key: 'f5f4cfbc9add601c6cd3a668468deebf22c79032', class: "gux-input" }, h("slot", { key: '7d2563cfe7d5fb645f6200da43528743c6d18f66', name: "input", onSlotchange: () => this.setInput() })), h("div", { key: '91047391d4a93e0101c23348738166b9a879891a', class: `gux-label-${this.labelPosition}`, "aria-disabled": this.disabled ? 'true' : 'false' }, h("slot", { key: '6b6288cd053446a5500fd259028f8f357bd9cb95', name: "label" }))), h("div", { key: '7ca2cd22c659755cf46cb72ed8925ff4e23105f9', class: "error-and-help-text" }, h(GuxFormFieldError, { key: '53bc3cd91b30776ca37071a1591d75adef860b1a', show: this.hasError }, h("slot", { key: '6f5b4a935ad5f4149f3608bd8b90fd1f568baf35', name: "error" })), h(GuxFormFieldHelp, { key: 'c1fcbeb423ee9e8c902933bca6a09358b7498071', show: !this.hasError && this.hasHelp }, h("slot", { key: '0200774d9d227bf123e68c9cda5277b1d3284171', name: "help" }))))));
     }
     get variant() {
         return this.labelPosition.toLowerCase();
@@ -83,6 +83,7 @@ export class GuxFormFieldCheckbox {
         return {
             "labelPosition": {
                 "type": "string",
+                "attribute": "label-position",
                 "mutable": false,
                 "complexType": {
                     "original": "'beside' | 'screenreader'",
@@ -97,12 +98,12 @@ export class GuxFormFieldCheckbox {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "label-position",
                 "reflect": false,
                 "defaultValue": "'beside'"
             },
             "hasGroupError": {
                 "type": "boolean",
+                "attribute": "has-group-error",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -117,12 +118,12 @@ export class GuxFormFieldCheckbox {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "has-group-error",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "hasGroupDisabled": {
                 "type": "boolean",
+                "attribute": "has-group-disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -137,7 +138,6 @@ export class GuxFormFieldCheckbox {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "has-group-disabled",
                 "reflect": false,
                 "defaultValue": "false"
             }

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

@@ -150,8 +150,8 @@ export class GuxFormFieldCheckboxGroupBeta {
     }
     render() {
         var _a;
-        return (h(GuxFormFieldFieldsetContainer, { key: '98d0690d8c1fd17b434f8946cd7f93c394b9b9f4', labelPosition: "above" }, h(GuxFormFieldScreenreaderLabel, { key: '298fe9be8fbbb3b7f7ff7749d0ce873bfa219995' }, (_a = this.label) === null || _a === void 0 ? void 0 :
-            _a.textContent, this.renderText(this.getI18nValue('required'), this.required), this.renderText(getSlotTextContent(this.root, 'group-error'), this.hasGroupError), this.renderText(getSlotTextContent(this.root, 'group-help'), this.hasGroupHelp), this.renderText(getSlotTextContent(this.root, 'group-label-info'), this.hasGroupLabelInfo)), h(GuxFormFieldVisualLabel, { key: 'a94e7153bacb115cf63ed0b4dc4603b8347229cd', position: "above", required: this.required }, h("slot", { key: 'd30a5befd3fd15213c284d0c7af243d6d07bc780', name: "group-label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: '6449f6c04cdfcdfcd80d75a9b9f229f445b7b7d5', variant: this.indicatorMark, required: this.required }), h("slot", { key: '4eab381a152e8baf40bfb4adcda5bf81937a262a', name: "group-label-info" })), h("slot", { key: '8c988a909db54ff6e9dc294d7dc9e0c4a5d702bd', onSlotchange: () => this.setupNestedCheckboxes(), name: "group-checkbox" }), h("slot", { key: '286b30b7358d9715e8c1b9e0bb2a90b259305f59', onSlotchange: () => this.updateMainCheckbox() }), h(GuxFormFieldError, { key: 'b7aafae8f77cf32e153591bcb0670384aafc1bb2', show: this.hasGroupError }, h("slot", { key: 'a35123dda49a72c62deb59e18f29a9d829a28ff3', name: "group-error" })), h(GuxFormFieldHelp, { key: '4969a7009d6f8bf513394cf60297c6b5b499afb2', show: !this.hasGroupError && this.hasGroupHelp }, h("slot", { key: 'a377111d6f5816316189e5b9fda971311af68c8d', name: "group-help" }))));
+        return (h(GuxFormFieldFieldsetContainer, { key: 'e510f0c0fcf9fd76c3c391bd66ec2fef75b7be9a', labelPosition: "above" }, h(GuxFormFieldScreenreaderLabel, { key: 'bc4bb057d2d535f204cefe85ad27d9b6217dec46' }, (_a = this.label) === null || _a === void 0 ? void 0 :
+            _a.textContent, this.renderText(this.getI18nValue('required'), this.required), this.renderText(getSlotTextContent(this.root, 'group-error'), this.hasGroupError), this.renderText(getSlotTextContent(this.root, 'group-help'), this.hasGroupHelp), this.renderText(getSlotTextContent(this.root, 'group-label-info'), this.hasGroupLabelInfo)), h(GuxFormFieldVisualLabel, { key: '5e5164adc2563d6d3bab22188a5d75440c572e27', position: "above", required: this.required }, h("slot", { key: '0906ef1243947d52d9c3d2618c0c88a62b94b945', name: "group-label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: '19e888030a5c2078c38dab9b5685e6c8e4dcb4f9', variant: this.indicatorMark, required: this.required }), h("slot", { key: '5dd452934445d8269cd667ae910f1533aee27f75', name: "group-label-info" })), h("slot", { key: '4155cf7d2f092ffe73188f573c04b62a50aacdc2', onSlotchange: () => this.setupNestedCheckboxes(), name: "group-checkbox" }), h("slot", { key: '34ef875c9dc46ff37eb3574ef94b065e44199c21', onSlotchange: () => this.updateMainCheckbox() }), h(GuxFormFieldError, { key: 'e367804623750343279f24afbb6030c7405f0360', show: this.hasGroupError }, h("slot", { key: 'e140d2c5cf27f58464cabc70f7f49023061696ec', name: "group-error" })), h(GuxFormFieldHelp, { key: '6828d92569eee8d5fdadbe1fbcd93910091ae9b0', show: !this.hasGroupError && this.hasGroupHelp }, h("slot", { key: '2b5e8829043e90f7f55c13ec14842436ce6dfa29', name: "group-help" }))));
     }
     setLabel() {
         this.label = this.root.querySelector('label[slot="group-label"]');
@@ -172,6 +172,7 @@ export class GuxFormFieldCheckboxGroupBeta {
         return {
             "indicatorMark": {
                 "type": "string",
+                "attribute": "indicator-mark",
                 "mutable": false,
                 "complexType": {
                     "original": "GuxFormFieldIndicatorMark",
@@ -192,12 +193,12 @@ export class GuxFormFieldCheckboxGroupBeta {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "indicator-mark",
                 "reflect": false,
                 "defaultValue": "'required'"
             },
             "required": {
                 "type": "boolean",
+                "attribute": "required",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -212,12 +213,12 @@ export class GuxFormFieldCheckboxGroupBeta {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "required",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "disabled": {
                 "type": "boolean",
+                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -232,7 +233,6 @@ export class GuxFormFieldCheckboxGroupBeta {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "disabled",
                 "reflect": false,
                 "defaultValue": "false"
             }

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

@@ -85,13 +85,13 @@ export class GuxFormFieldColor {
         }
     }
     render() {
-        return (h(GuxFormFieldContainer, { key: '2b294a491cedc62325544ae31f7ca0e32ae3441b', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: '5b9714407a6faaeb26502007efc73c59ec87cf60', required: this.required, position: this.computedLabelPosition }, h("slot", { key: '46c9249b6a3dd4f697c8ea296d236726fb345121', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: 'c170cbb3cc937ed4c9b6d1d26ba04f3c87266e2c', variant: this.indicatorMark, required: this.required }), h("slot", { key: 'dfad3c6d0fbe5fb49a88d26dd926d193e7359a5f', name: "label-info" })), h("div", { key: 'e67d83ced521d1b46ae7d61074d4a9b9c51b98d5', class: "gux-input-and-error-container" }, h("div", { key: 'd220d60f0b54edc579177651823855d63165f7ec', class: {
+        return (h(GuxFormFieldContainer, { key: '9bb0ee43e91d6bc55f14c79bf205615caef36b6f', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: '94e0d29db2d749880f35701ce99aa22015d23325', required: this.required, position: this.computedLabelPosition }, h("slot", { key: '97a0e24aea02d952179317e1453cea220738733e', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: '9efa9064b0e6270f48f756de90d71e5081b6eb3a', variant: this.indicatorMark, required: this.required }), h("slot", { key: 'ea8cce3efc4e54fbb18ca9b498f684457f16166d', name: "label-info" })), h("div", { key: '85730bcafa56972ec24edfff30b7cba3e22e4f7d', class: "gux-input-and-error-container" }, h("div", { key: 'b64c5aaea6f3f16dc9dd05aaca7e4ba4e558a55e', class: {
                 'gux-input': true,
                 'gux-input-error': this.hasError
-            } }, h("div", { key: '02de15bef4a1e5b206e8abe595c7353f73f93295', class: {
+            } }, h("div", { key: '41c6dcd864d396fd51ef29c381ffe6d157a950c8', class: {
                 'gux-input-container': true,
                 'gux-disabled': this.disabled
-            } }, h("slot", { key: '98f63dfef469bc8ed7e4990d5ce2a82b33f213f9', name: "input", onSlotchange: () => this.setInput() }))), h(GuxFormFieldError, { key: 'e7973a26ae9c40a79142180782f9c2d8a21eb00f', show: this.hasError }, h("slot", { key: '892a55dfd1c972e2bb1cea9375b071b167e6ccd5', name: "error" })), h(GuxFormFieldHelp, { key: '0429c9be3c92067b61bd8c2bffb9da4402ad0d9e', show: !this.hasError && this.hasHelp }, h("slot", { key: '85fbf1c590a2d5b99d4bf4bc19212d6baabba4bd', name: "help" })))));
+            } }, h("slot", { key: '0b967d0efd9eca208a40369679725389f4feccb9', name: "input", onSlotchange: () => this.setInput() }))), h(GuxFormFieldError, { key: '03c36ee06dc975ee41dbe176e4c225cf520d3145', show: this.hasError }, h("slot", { key: '5f39c0b374eab15bdc51bcc8d4b66d8099a1bae2', name: "error" })), h(GuxFormFieldHelp, { key: '308153f1fa7f016ea9e724626e335a48171b8722', show: !this.hasError && this.hasHelp }, h("slot", { key: '13d012116faf9688ba1d98b080c545c286d3cb6c', name: "help" })))));
     }
     get variant() {
         return this.labelPosition ? this.labelPosition.toLowerCase() : 'none';
@@ -129,6 +129,7 @@ export class GuxFormFieldColor {
         return {
             "labelPosition": {
                 "type": "string",
+                "attribute": "label-position",
                 "mutable": false,
                 "complexType": {
                     "original": "GuxFormFieldLabelPosition",
@@ -149,11 +150,11 @@ export class GuxFormFieldColor {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "label-position",
                 "reflect": false
             },
             "indicatorMark": {
                 "type": "string",
+                "attribute": "indicator-mark",
                 "mutable": false,
                 "complexType": {
                     "original": "GuxFormFieldIndicatorMark",
@@ -174,7 +175,6 @@ export class GuxFormFieldColor {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "indicator-mark",
                 "reflect": false,
                 "defaultValue": "'required'"
             }

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

@@ -99,11 +99,11 @@ export class GuxFormFieldDropdown {
     }
     render() {
         var _a;
-        return (h(GuxFormFieldFieldsetContainer, { key: 'f2f4e9a8ff7f9e22045a4be75a5d3b41447ae71d', labelPosition: this.computedLabelPosition }, h(GuxFormFieldScreenreaderLabel, { key: '00ed473cf198a45a2cef8ba110780d2caa71b03f' }, (_a = this.label) === null || _a === void 0 ? void 0 :
-            _a.textContent, this.renderText(this.getI18nValue('required'), this.required), this.renderText(getSlotTextContent(this.root, 'error'), this.hasError), this.renderText(getSlotTextContent(this.root, 'help'), this.hasHelp), this.renderText(getSlotTextContent(this.root, 'label-info'), this.hasLabelInfo)), h(GuxFormFieldVisualLabel, { key: 'e18eb380e152e014acf011e2858e4e1f802073b3', position: this.computedLabelPosition, required: this.required }, h("slot", { key: 'fb18e487b41ad436918342653f1d7642d6530074', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: '27c7ca59d34e537eeda039c95c4b119232c1fe9e', variant: this.indicatorMark, required: this.required }), h("slot", { key: 'cd7efd152a6c02f115a5953e57d8a5f0333ffbf5', name: "label-info" })), h("div", { key: '021d1706cabb39b8dc9402ab8d531aed533fb57d', class: "gux-input-and-error-container" }, h("div", { key: '2c5117c5e441a28dd9bc270d5a45cd3e1d7b8f00', class: {
+        return (h(GuxFormFieldFieldsetContainer, { key: '9020a7db668f3cb5c6ef3db9a230e008ace4bed1', labelPosition: this.computedLabelPosition }, h(GuxFormFieldScreenreaderLabel, { key: '52a423218fba63fa959e8563b323e23316da0ea2' }, (_a = this.label) === null || _a === void 0 ? void 0 :
+            _a.textContent, this.renderText(this.getI18nValue('required'), this.required), this.renderText(getSlotTextContent(this.root, 'error'), this.hasError), this.renderText(getSlotTextContent(this.root, 'help'), this.hasHelp), this.renderText(getSlotTextContent(this.root, 'label-info'), this.hasLabelInfo)), h(GuxFormFieldVisualLabel, { key: '61d0d48c3ed153d93c4973615b1285dabc474847', position: this.computedLabelPosition, required: this.required }, h("slot", { key: 'cf6a6a962503f69bc33bb8fe4dbe633561e29985', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: '9d529f92d0fc5977033217a41faf43dcb57bdaf4', variant: this.indicatorMark, required: this.required }), h("slot", { key: '5a93d1502c8337f4037c65fa06870c1244f574ec', name: "label-info" })), h("div", { key: '19ee8d6085059cc637cb46ffee99279c2481ddb8', class: "gux-input-and-error-container" }, h("div", { key: '179346ac87f748081e7a591612f5a69de233e9f1', class: {
                 'gux-input': true,
                 'gux-input-error': this.hasError
-            } }, h("slot", { key: '6faca4e188336a14f3ca7ed945ccce9531157a86' })), h(GuxFormFieldError, { key: 'e60dab8fbe562ea703d869b08684672a372a19a5', show: this.hasError }, h("slot", { key: '4fbe80625cb1c8e4e6ecc6c7e7e0fbd01c1353fd', name: "error" })), h(GuxFormFieldHelp, { key: 'd97ecff22998058888377877b40574a40bcbcccc', show: !this.hasError && this.hasHelp }, h("slot", { key: '4516800cc56bb7203f18c752689d5ba266578b41', name: "help" })))));
+            } }, h("slot", { key: '7a91ec18082348fc7334733f22a36738d74b6d0b' })), h(GuxFormFieldError, { key: 'bb4687aed62b3ba2246967125884897861afdc03', show: this.hasError }, h("slot", { key: '1a7d9292bb9afdfef87cadfd73c042f4ca223ecf', name: "error" })), h(GuxFormFieldHelp, { key: '600311438afad613d07e99aced9b948809b430ae', show: !this.hasError && this.hasHelp }, h("slot", { key: '7590cb2f825a03586d6b4375479cd7c25abbf620', name: "help" })))));
     }
     get variant() {
         const labelPositionVariant = this.labelPosition
@@ -147,6 +147,7 @@ export class GuxFormFieldDropdown {
         return {
             "labelPosition": {
                 "type": "string",
+                "attribute": "label-position",
                 "mutable": false,
                 "complexType": {
                     "original": "GuxFormFieldLabelPosition",
@@ -167,11 +168,11 @@ export class GuxFormFieldDropdown {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "label-position",
                 "reflect": false
             },
             "indicatorMark": {
                 "type": "string",
+                "attribute": "indicator-mark",
                 "mutable": false,
                 "complexType": {
                     "original": "GuxFormFieldIndicatorMark",
@@ -192,7 +193,6 @@ export class GuxFormFieldDropdown {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "indicator-mark",
                 "reflect": false,
                 "defaultValue": "'required'"
             }