genesys-spark-components 4.67.0 → 4.69.0

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

@@ -0,0 +1,185 @@
+/* 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 */
+/* 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-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;
+}
+
+.gux-form-field-visual-label {
+  display: inline-flex;
+  flex: 1 0 auto;
+}
+.gux-form-field-visual-label ::slotted(gux-label-info-beta) {
+  padding-inline-start: var(--gse-ui-formControl-label-gap);
+}
+.gux-form-field-visual-label.gux-required gux-form-field-label-indicator {
+  padding-inline-start: var(--gse-ui-formControl-label-gap);
+}
+.gux-form-field-visual-label.gux-beside {
+  position: relative;
+  top: var(--gse-ui-formControl-input-top);
+  width: fit-content;
+  min-width: var(--gse-ui-formControl-input-textfield-minWidth);
+  max-width: fit-content;
+  margin-right: var(--gse-ui-formControl-group-gapItems);
+}
+.gux-form-field-visual-label.gux-above {
+  padding: var(--gse-ui-formControl-label-padding);
+}
+.gux-form-field-visual-label.gux-screenreader {
+  display: none;
+}
+
+.gux-form-field-screenreader-label {
+  position: absolute;
+  top: auto;
+  left: -10000px;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+}
+
+:host {
+  display: block;
+}
+
+:host([disabled]) .gux-form-field-legend-label {
+  opacity: var(--gse-ui-formControl-input-disabled-opacity);
+}
+
+::slotted(gux-form-field-checkbox) {
+  padding-top: var(--gse-ui-formControl-group-gapItems);
+}
+
+::slotted(gux-form-field-checkbox:first-of-type) {
+  padding-top: 0;
+}
+
+:host(.gux-group-checkbox) ::slotted(gux-form-field-checkbox) {
+  padding-left: 24px;
+}
+:host(.gux-group-checkbox) slot[name=group-checkbox]::slotted(gux-form-field-checkbox) {
+  padding-left: 0;
+}
+
+.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-checkbox-group/gux-form-field-checkbox-group.js

@@ -0,0 +1,191 @@
+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 { forceUpdate, h } from "@stencil/core";
+import { OnMutation } from "../../../../../utils/decorator/on-mutation";
+import { hasSlot } from "../../../../../utils/dom/has-slot";
+import { logWarn } from "../../../../../utils/error/log-error";
+import { setAllCheckboxInputs, setParentCheckboxElementCheckedState } from "./gux-form-field-checkbox-group.service";
+import { GuxFormFieldError, GuxFormFieldHelp, GuxFormFieldScreenreaderLabel, GuxFormFieldVisualLabel, 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-checkbox - Optional slot
+ * @slot group-error - Optional slot for error message
+ * @slot group-help - Optional slot for help message
+ */
+export class GuxFormFieldCheckboxGroupBeta {
+    constructor() {
+        this.hasGroupError = false;
+        this.hasGroupHelp = false;
+        this.hasGroupLabelInfo = false;
+        this.disabled = false;
+    }
+    watchGroupError(hasGroupError) {
+        const checkboxSlots = this.root.querySelectorAll('gux-form-field-checkbox');
+        if (checkboxSlots) {
+            checkboxSlots.forEach(item => {
+                item.hasGroupError = hasGroupError;
+            });
+        }
+    }
+    watchDisabled() {
+        this.setDisabledCheckboxes();
+    }
+    onMutation() {
+        this.hasGroupError = hasSlot(this.root, 'group-error');
+        this.hasGroupHelp = hasSlot(this.root, 'group-help');
+        this.hasGroupLabelInfo = hasSlot(this.root, 'group-label-info');
+    }
+    componentWillLoad() {
+        this.hasGroupError = hasSlot(this.root, 'group-error');
+        this.hasGroupHelp = hasSlot(this.root, 'group-help');
+        this.hasGroupLabelInfo = hasSlot(this.root, 'group-label-info');
+        this.setLabel();
+        this.setDisabledCheckboxes();
+        trackComponent(this.root);
+    }
+    componentDidLoad() {
+        setParentCheckboxElementCheckedState(this.root, this.root.querySelector('gux-form-field-checkbox[slot="group-checkbox"] input'));
+    }
+    disconnectedCallback() {
+        if (this.disabledObserver) {
+            this.disabledObserver.disconnect();
+        }
+    }
+    getGroupCheckboxElement() {
+        return this.root.querySelector('gux-form-field-checkbox[slot="group-checkbox"] input');
+    }
+    setDisabledCheckboxes() {
+        const checkboxSlots = this.root.querySelectorAll('gux-form-field-checkbox');
+        if (checkboxSlots) {
+            checkboxSlots.forEach(item => {
+                item.hasGroupDisabled = this.disabled;
+            });
+        }
+    }
+    onMainCheckboxChange() {
+        const groupCheckbox = this.getGroupCheckboxElement();
+        setAllCheckboxInputs(this.root, groupCheckbox.checked);
+        forceUpdate(this.root);
+    }
+    setupNestedCheckboxes() {
+        this.warnMultipleGroupCheckbox();
+        this.warnGroupCheckboxNameAttr();
+        const groupCheckbox = this.getGroupCheckboxElement();
+        if (groupCheckbox) {
+            this.root.classList.add('gux-group-checkbox');
+        }
+        else {
+            this.root.classList.remove('gux-group-checkbox');
+        }
+        groupCheckbox === null || groupCheckbox === void 0 ? void 0 : groupCheckbox.addEventListener('change', () => {
+            this.onMainCheckboxChange();
+        });
+        this.initialSetNestedCheckboxes(groupCheckbox === null || groupCheckbox === void 0 ? void 0 : groupCheckbox.checked);
+    }
+    initialSetNestedCheckboxes(groupCheckboxChecked) {
+        const checkboxSlots = Array.from(this.root.querySelectorAll('gux-form-field-checkbox input:not(gux-form-field-checkbox[slot="group-checkbox"] input)'));
+        if (checkboxSlots === null || checkboxSlots === void 0 ? void 0 : checkboxSlots.length) {
+            checkboxSlots.forEach(item => {
+                item.addEventListener('change', () => {
+                    this.updateMainCheckbox();
+                });
+                if (groupCheckboxChecked && !item.disabled) {
+                    item.checked = true;
+                }
+            });
+        }
+    }
+    warnMultipleGroupCheckbox() {
+        const groupCheckboxList = this.root.querySelectorAll('gux-form-field-checkbox[slot="group-checkbox"] input');
+        if ((groupCheckboxList === null || groupCheckboxList === void 0 ? void 0 : groupCheckboxList.length) > 1) {
+            logWarn(this.root, 'Can only have one group checkbox');
+        }
+    }
+    warnGroupCheckboxNameAttr() {
+        const groupCheckbox = this.getGroupCheckboxElement();
+        if (groupCheckbox === null || groupCheckbox === void 0 ? void 0 : groupCheckbox.hasAttribute('name')) {
+            logWarn(this.root, 'Group checkbox should not have a name attribute');
+        }
+    }
+    updateMainCheckbox() {
+        setParentCheckboxElementCheckedState(this.root, this.root.querySelector('gux-form-field-checkbox[slot="group-checkbox"] input'));
+        forceUpdate(this.root);
+    }
+    renderText(text, condition = false) {
+        if (condition) {
+            return ' ' + text;
+        }
+    }
+    render() {
+        var _a;
+        return (h(GuxFormFieldFieldsetContainer, { key: '71fd89d19477a795bcb43caedf9841294f179ea3', labelPosition: "above" }, h(GuxFormFieldScreenreaderLabel, { key: 'a6ddbcf86c5145d1b207e600ce6f8fbf85bba3b4' }, (_a = this.label) === null || _a === void 0 ? void 0 :
+            _a.textContent, 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: '2e1931fb4633b12231f96e974fb3cee990487d1b', position: "above", required: false }, h("slot", { key: 'eaf4cdc9230123ff75052e40246115b369342d61', name: "group-label", onSlotchange: () => this.setLabel() }), h("slot", { key: '308d9770d17ee92aa96314c85ba09b0296af3866', name: "group-label-info" })), h("slot", { key: '1244cae1a7294cf0a559517d6da489d803840604', onSlotchange: () => this.setupNestedCheckboxes(), name: "group-checkbox" }), h("slot", { key: 'c08f355f65c1fa0111b710b04293d32f4a77cb4f', onSlotchange: () => this.updateMainCheckbox() }), h(GuxFormFieldError, { key: 'be714daba2e9e9ea7396558e7b0fde5b894eef85', show: this.hasGroupError }, h("slot", { key: 'b34898b5a5b075d3b7bf4c70fe61ab43e3500478', name: "group-error" })), h(GuxFormFieldHelp, { key: 'a204e871f9fb6b1642a245b5ea619b9b91608e8a', show: !this.hasGroupError && this.hasGroupHelp }, h("slot", { key: '6398b2e744a7368e6fc7873c715d137f6e4bcd7a', name: "group-help" }))));
+    }
+    setLabel() {
+        this.label = this.root.querySelector('label[slot="group-label"]');
+    }
+    static get is() { return "gux-form-field-checkbox-group-beta"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["gux-form-field-checkbox-group.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["gux-form-field-checkbox-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 checkboxes in the group."
+                },
+                "attribute": "disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "hasGroupError": {},
+            "hasGroupHelp": {},
+            "hasGroupLabelInfo": {}
+        };
+    }
+    static get elementRef() { return "root"; }
+    static get watchers() {
+        return [{
+                "propName": "hasGroupError",
+                "methodName": "watchGroupError"
+            }, {
+                "propName": "disabled",
+                "methodName": "watchDisabled"
+            }];
+    }
+}
+__decorate([
+    OnMutation({ childList: true, subtree: true })
+], GuxFormFieldCheckboxGroupBeta.prototype, "onMutation", null);

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

@@ -0,0 +1,38 @@
+import simulateNativeEvent from "../../../../../utils/dom/simulate-native-event";
+export function setAllCheckboxInputs(root, checked) {
+    getNestedCheckboxInputs(root).forEach(checkboxInput => {
+        if (checkboxInput.checked !== checked && !checkboxInput.disabled) {
+            checkboxInput.checked = checked;
+            simulateNativeEvent(checkboxInput, 'input');
+            simulateNativeEvent(checkboxInput, 'change');
+        }
+    });
+}
+export function setParentCheckboxElementCheckedState(root, mainCheckboxElement) {
+    if (mainCheckboxElement) {
+        const { checkedCheckboxes, totalCheckboxes } = getSelectedColumnCount(root);
+        if (checkedCheckboxes === 0) {
+            mainCheckboxElement.indeterminate = false;
+            mainCheckboxElement.checked = false;
+        }
+        else if (checkedCheckboxes === totalCheckboxes) {
+            mainCheckboxElement.indeterminate = false;
+            mainCheckboxElement.checked = true;
+        }
+        else {
+            mainCheckboxElement.indeterminate = true;
+        }
+    }
+}
+export function getSelectedColumnCount(root) {
+    const totalCheckboxes = getNestedCheckboxInputs(root).length;
+    const checkedCheckboxes = getCheckedCheckboxInputs(root).length;
+    return { checkedCheckboxes, totalCheckboxes };
+}
+function getNestedCheckboxInputs(root) {
+    return Array.from(root.querySelectorAll('gux-form-field-checkbox input:not(gux-form-field-checkbox[slot="group-checkbox"] input'));
+}
+function getCheckedCheckboxInputs(root) {
+    const checkboxInputs = getNestedCheckboxInputs(root);
+    return checkboxInputs.filter(x => x.checked);
+}

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

@@ -0,0 +1,207 @@
+import { newE2EPage } from "@stencil/core/testing";
+import { newSparkE2EPage, a11yCheck } from "../../../../../../test/e2eTestUtils";
+const axeExclusions = [
+    {
+        issueId: 'color-contrast',
+        target: 'gux-form-field-checkbox-group-beta,span',
+        exclusionReason: 'WCAG 1.4.3 Contrast (Minimum), inactive user interface components do not need to meet contrast minimum'
+    },
+    {
+        issueId: 'color-contrast',
+        target: 'gux-form-field-checkbox-group-beta,span[role="presentation"]',
+        exclusionReason: 'WCAG 1.4.3 Contrast (Minimum), inactive user interface components do not need to meet contrast minimum'
+    }
+];
+async function newNonrandomE2EPage({ html }) {
+    const page = await newE2EPage();
+    await page.evaluateOnNewDocument(() => {
+        Math.random = () => 0.5;
+    });
+    await page.setContent(html);
+    await page.waitForChanges();
+    return page;
+}
+describe('gux-form-field-checkbox-group-beta', () => {
+    describe('#render', () => {
+        [
+            `
+      <gux-form-field-checkbox-group-beta>
+        <label slot="group-label">Food</label>
+        <gux-form-field-checkbox>
+          <input slot="input" type="checkbox" name="food-1" value="pizza"/>
+          <label slot="label">Pizza</label>
+        </gux-form-field-checkbox>
+      </gux-form-field-checkbox-group-beta>
+       `,
+            `
+       <gux-form-field-checkbox-group-beta>
+       <label slot="group-label">Food</label>
+   
+       <gux-form-field-checkbox>
+         <input slot="input" type="checkbox" name="food-1" value="pizza" />
+         <label slot="label">Pizza</label>
+       </gux-form-field-checkbox>
+   
+       <gux-form-field-checkbox>
+         <input
+           slot="input"
+           type="checkbox"
+           name="food-1"
+           value="sandwich"
+           disabled
+         />
+         <label slot="label">Sandwich</label>
+       </gux-form-field-checkbox>
+   
+       <gux-form-field-checkbox>
+         <input slot="input" type="checkbox" name="food-1" value="spaghetti" />
+         <label slot="label">Spaghetti</label>
+         <span slot="help">This is a help message</span>
+       </gux-form-field-checkbox>
+       <span slot="group-error">Subject to availibility</span>
+     </gux-form-field-checkbox-group-beta>
+       `,
+            `<gux-form-field-checkbox-group-beta>
+       <label slot="group-label">Food</label>
+   
+       <gux-form-field-checkbox>
+         <input slot="input" type="checkbox" name="food-1" value="pizza" />
+         <label slot="label">Pizza</label>
+       </gux-form-field-checkbox>
+   
+       <gux-form-field-checkbox>
+         <input
+           slot="input"
+           type="checkbox"
+           name="food-1"
+           value="sandwich"
+           disabled
+         />
+         <label slot="label">Sandwich</label>
+       </gux-form-field-checkbox>
+   
+       <gux-form-field-checkbox>
+         <input slot="input" type="checkbox" name="food-1" value="sushi" />
+         <label slot="label">Sushi</label>
+         <span slot="error">Subject to availibility</span>
+       </gux-form-field-checkbox>
+   
+       <gux-form-field-checkbox>
+         <input slot="input" type="checkbox" name="food-1" value="spaghetti" />
+         <label slot="label">Spaghetti</label>
+         <span slot="help">This is a help message</span>
+       </gux-form-field-checkbox>
+       <span slot="group-help">This is a group help message</span>
+     </gux-form-field-checkbox-group-beta>`,
+            ` <gux-form-field-checkbox-group-beta disabled>
+         <label slot="group-label">Food</label>
+
+         <gux-form-field-checkbox>
+           <input slot="input" type="checkbox" name="food-1" value="pizza" />
+           <label slot="label">Pizza</label>
+         </gux-form-field-checkbox>
+
+         <gux-form-field-checkbox>
+           <input
+             slot="input"
+             type="checkbox"
+             name="food-1"
+             value="sandwich"
+             disabled
+           />
+           <label slot="label">Sandwich</label>
+         </gux-form-field-checkbox>
+
+         <gux-form-field-checkbox>
+           <input slot="input" type="checkbox" name="food-1" value="sushi" />
+           <label slot="label">Sushi</label>
+         </gux-form-field-checkbox>
+
+         <gux-form-field-checkbox>
+           <input slot="input" type="checkbox" name="food-1" value="spaghetti" />
+           <label slot="label">Spaghetti</label>
+         </gux-form-field-checkbox>
+       </gux-form-field-checkbox-group-beta>`
+        ].forEach((html, index) => {
+            it(`should render component as expected (${index + 1})`, async () => {
+                const page = await newNonrandomE2EPage({ html });
+                const element = await page.find('gux-form-field-checkbox');
+                const elementShadowDom = await element.find('pierce/.gux-form-field-container');
+                expect(element.outerHTML).toMatchSnapshot();
+                expect(elementShadowDom).toMatchSnapshot();
+            });
+            it(`should be accessible (${index + 1})`, async () => {
+                const page = await newSparkE2EPage({ html });
+                await a11yCheck(page, axeExclusions);
+            });
+        });
+    });
+    it('switches between states when clicked', async () => {
+        const page = await newSparkE2EPage({
+            html: `
+      <gux-form-field-checkbox-group-beta>
+        <label slot="label">Food</label>
+        <gux-form-field-checkbox id="pizza">
+          <input slot="input" type="checkbox" name="food-1" value="pizza"/>
+          <label slot="label">Pizza</label>
+        </gux-form-field-checkbox>
+        <gux-form-field-checkbox id="pasta">
+          <input slot="input" type="checkbox" name="food-1" value="pasta"/>
+          <label slot="label">Pasta</label>
+        </gux-form-field-checkbox>
+      </gux-form-field-checkbox-group-beta>
+
+      `
+        });
+        const pizzaElement = await page.find('#pizza');
+        const pizzaLabel = await pizzaElement.find('label');
+        const pizzaInput = await pizzaElement.find('input');
+        const pastaElement = await page.find('#pasta');
+        const pastaLabel = await pastaElement.find('label');
+        const pastaInput = await pastaElement.find('input');
+        await a11yCheck(page, axeExclusions, 'Before checking checkbox');
+        await pizzaLabel.click();
+        await page.waitForChanges();
+        expect(await pizzaInput.getProperty('checked')).toBe(true);
+        expect(await pastaInput.getProperty('checked')).toBe(false);
+        await a11yCheck(page, axeExclusions, 'After checking checkbox');
+        await pastaLabel.click();
+        await page.waitForChanges();
+        expect(await pizzaInput.getProperty('checked')).toBe(true);
+        expect(await pastaInput.getProperty('checked')).toBe(true);
+    });
+    it('disables the slotted form field checkbox inputs', async () => {
+        const page = await newSparkE2EPage({
+            html: `
+      <gux-form-field-checkbox-group-beta disabled>
+        <label slot="label">Food</label>
+        <gux-form-field-checkbox id="pizza">
+          <input slot="input" type="checkbox" name="food-1" value="pizza"/>
+          <label slot="label">Pizza</label>
+        </gux-form-field-checkbox>
+        <gux-form-field-checkbox id="pasta">
+          <input slot="input" type="checkbox" name="food-1" value="pasta"/>
+          <label slot="label">Pasta</label>
+        </gux-form-field-checkbox>
+      </gux-form-field-checkbox-group-beta>
+
+      `
+        });
+        const pizzaElement = await page.find('#pizza');
+        const pizzaLabel = await pizzaElement.find('label');
+        const pizzaInput = await pizzaElement.find('input');
+        const pastaElement = await page.find('#pasta');
+        const pastaLabel = await pastaElement.find('label');
+        const pastaInput = await pastaElement.find('input');
+        await a11yCheck(page, axeExclusions, 'Before checking checkbox');
+        await pizzaLabel.click();
+        await page.waitForChanges();
+        expect(await pizzaInput.getProperty('checked')).toBe(false);
+        expect(await pastaInput.getProperty('checked')).toBe(false);
+        await a11yCheck(page, axeExclusions, 'After checking checkbox');
+        await pastaLabel.click();
+        await page.waitForChanges();
+        expect(await pizzaInput.getProperty('checked')).toBe(false);
+        expect(await pastaInput.getProperty('checked')).toBe(false);
+    });
+});