@justeattakeaway/pie-checkbox-group 0.2.0 → 0.4.0

package/README.md

@@ -87,34 +87,16 @@ In your markup or JSX, you can then use these to set the properties for the `pie
 ```html
 <!-- Native HTML -->
 <pie-checkbox-group name="TESTNAME">
-  <pie-checkbox
-    name="my-checkbox-one"
-    label="Checkbox Label 1">
-  </pie-checkbox>
-  <pie-checkbox
-      name="my-checkbox-two"
-      label="Checkbox Label 2">
-  </pie-checkbox>
-  <pie-checkbox
-      name="my-checkbox-three"
-      label="Checkbox Label 3">
-  </pie-checkbox>
+  <pie-checkbox name="my-checkbox-one">Checkbox Label 1</pie-checkbox>
+  <pie-checkbox name="my-checkbox-two">Checkbox Label 2</pie-checkbox>
+  <pie-checkbox name="my-checkbox-three">Checkbox Label 3</pie-checkbox>
 </pie-checkbox-group>
 
 <!-- JSX -->
 <PieCheckboxGroup name="TESTNAME">
-  <PieCheckbox
-    name="my-checkbox-one"
-    label="Checkbox Label 1">
-  </PieCheckbox>
-  <PieCheckbox
-      name="my-checkbox-two"
-      label="Checkbox Label 2">
-  </PieCheckbox>
-  <PieCheckbox
-      name="my-checkbox-three"
-      label="Checkbox Label 3">
-  </PieCheckbox>
+  <PieCheckbox name="my-checkbox-one">Checkbox Label 1</PieCheckbox>
+  <PieCheckbox name="my-checkbox-two">Checkbox Label 2</PieCheckbox>
+  <PieCheckbox name="my-checkbox-three">Checkbox Label 3</PieCheckbox>
 </PieCheckboxGroup>
 ```
 
@@ -122,6 +104,7 @@ In your markup or JSX, you can then use these to set the properties for the `pie
 | Event | Type | Description |
 |-------|------|-------------|
 | `pie-checkbox-group-disabled` | `CustomEvent` | Triggered after the disabled state of the checkbox group changes. |
+| `pie-checkbox-group-error` | `CustomEvent` | Triggered after the state of the checkbox group changes to error. |
 
 ## Contributing
 

package/custom-elements.json

@@ -29,13 +29,21 @@
           "default": "'pie-checkbox-group-disabled'",
           "description": "Event name for when checkbox group becomes disabled."
         },
+        {
+          "kind": "variable",
+          "name": "ON_CHECKBOX_GROUP_ERROR",
+          "type": {
+            "text": "string"
+          },
+          "default": "'pie-checkbox-group-error'"
+        },
         {
           "kind": "variable",
           "name": "defaultProps",
           "type": {
             "text": "DefaultProps"
           },
-          "default": "{\n    status: 'default',\n    disabled: false,\n}"
+          "default": "{\n    status: 'default',\n    disabled: false,\n    isInline: false,\n}"
         }
       ],
       "exports": [
@@ -55,6 +63,14 @@
             "module": "src/defs.js"
           }
         },
+        {
+          "kind": "js",
+          "name": "ON_CHECKBOX_GROUP_ERROR",
+          "declaration": {
+            "name": "ON_CHECKBOX_GROUP_ERROR",
+            "module": "src/defs.js"
+          }
+        },
         {
           "kind": "js",
           "name": "defaultProps",
@@ -73,6 +89,12 @@
           "kind": "class",
           "description": "",
           "name": "PieCheckboxGroup",
+          "slots": [
+            {
+              "description": "Default slot",
+              "name": ""
+            }
+          ],
           "members": [
             {
               "kind": "field",
@@ -101,6 +123,12 @@
               "privacy": "public",
               "attribute": "assistiveText"
             },
+            {
+              "kind": "field",
+              "name": "isInline",
+              "privacy": "public",
+              "attribute": "isInline"
+            },
             {
               "kind": "field",
               "name": "status",
@@ -118,7 +146,7 @@
               "kind": "field",
               "name": "_slottedChildren",
               "type": {
-                "text": "Array<HTMLElement>"
+                "text": "Array<HTMLElement> | undefined"
               }
             },
             {
@@ -149,6 +177,13 @@
               },
               "description": "triggered after the disabled state of the checkbox group changes.",
               "name": "pie-checkbox-group-disabled"
+            },
+            {
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "triggered after the state of the checkbox group changes to error.",
+              "name": "pie-checkbox-group-error"
             }
           ],
           "attributes": [
@@ -173,6 +208,10 @@
               },
               "fieldName": "assistiveText"
             },
+            {
+              "name": "isInline",
+              "fieldName": "isInline"
+            },
             {
               "name": "status",
               "fieldName": "status"

package/dist/index.d.ts

@@ -16,6 +16,10 @@ export declare interface CheckboxGroupProps {
      * The label value of the component
      */
     label?: string;
+    /**
+     * Inline (horizontal) positioning of checkbox items
+     */
+    isInline?: boolean;
     /**
      * An optional assistive text to display below the checkbox group.
      */
@@ -30,7 +34,7 @@ export declare interface CheckboxGroupProps {
     status?: typeof statusTypes[number];
 }
 
-export declare type DefaultProps = ComponentDefaultProps<CheckboxGroupProps, 'status' | 'disabled'>;
+export declare type DefaultProps = ComponentDefaultProps<CheckboxGroupProps, 'status' | 'disabled' | 'isInline'>;
 
 export declare const defaultProps: DefaultProps;
 
@@ -41,17 +45,22 @@ export declare const defaultProps: DefaultProps;
  */
 export declare const ON_CHECKBOX_GROUP_DISABLED = "pie-checkbox-group-disabled";
 
+export declare const ON_CHECKBOX_GROUP_ERROR = "pie-checkbox-group-error";
+
 /**
  * @tagname pie-checkbox-group
+ * @slot - Default slot
  * @event {CustomEvent} pie-checkbox-group-disabled - triggered after the disabled state of the checkbox group changes.
+ * @event {CustomEvent} pie-checkbox-group-error - triggered after the state of the checkbox group changes to error.
  */
 export declare class PieCheckboxGroup extends PieCheckboxGroup_base implements CheckboxGroupProps {
     name?: CheckboxGroupProps['name'];
     label?: CheckboxGroupProps['label'];
     assistiveText?: CheckboxGroupProps['assistiveText'];
+    isInline: boolean;
     status: "default" | "error" | "success";
     disabled: boolean;
-    _slottedChildren: Array<HTMLElement>;
+    _slottedChildren: Array<HTMLElement> | undefined;
     private _handleDisabled;
     private _handleStatus;
     protected updated(_changedProperties: PropertyValues<this>): void;

package/dist/index.js

@@ -1,86 +1,103 @@
-import { LitElement as b, html as p, unsafeCSS as m } from "lit";
-import { property as l, queryAssignedElements as v } from "lit/decorators.js";
-import { FormControlMixin as y, RtlMixin as x, validPropertyValues as _, defineCustomElement as C } from "@justeattakeaway/pie-webc-core";
-import { ifDefined as h } from "lit/directives/if-defined.js";
+import { LitElement as x, html as d, unsafeCSS as g } from "lit";
+import { property as r, queryAssignedElements as v } from "lit/decorators.js";
+import { FormControlMixin as m, RtlMixin as k, validPropertyValues as y, defineCustomElement as G } from "@justeattakeaway/pie-webc-core";
+import { ifDefined as b } from "lit/directives/if-defined.js";
+import { classMap as _ } from "lit/directives/class-map.js";
 import "@justeattakeaway/pie-assistive-text";
-const g = `*,*:after,*:before{box-sizing:inherit}
-`, S = ["default", "success", "error"], E = "pie-checkbox-group-disabled", u = {
+const C = `*,*:after,*:before{box-sizing:inherit}.c-checkboxGroup{--checkbox-group-offset: var(--dt-spacing-c);--checkbox-group-offset--inline: var(--dt-spacing-e);--checkbox-group-label-offset: var(--dt-spacing-a);margin:0;padding:0;border:0;min-width:0}.c-checkboxGroup ::slotted(pie-checkbox){display:flex}.c-checkboxGroup:not(.c-checkboxGroup--inline) ::slotted(pie-checkbox:not(:first-child)){margin-block-start:var(--checkbox-group-offset)}.c-checkboxGroup--inline{display:flex;align-items:flex-start;flex-wrap:wrap}.c-checkboxGroup-label{max-width:100%;white-space:normal;padding:0;font-size:calc(var(--dt-font-body-strong-s-size) * 1px);line-height:calc(var(--dt-font-body-strong-s-line-height) * 1px);font-weight:var(--dt-font-body-strong-s-weight);color:var(--dt-color-content-default);margin-block-end:var(--checkbox-group-label-offset)}.c-checkboxGroup.c-checkboxGroup--inline{margin:calc(-1 * var(--checkbox-group-offset--inline) / 2) calc(-1 * var(--checkbox-group-offset--inline) / 2)}.c-checkboxGroup.c-checkboxGroup--inline ::slotted(pie-checkbox){margin:calc(var(--checkbox-group-offset--inline) / 2) calc(var(--checkbox-group-offset--inline) / 2)}.c-checkboxGroup.c-checkboxGroup--inline .c-checkboxGroup-label{margin:0 calc(var(--checkbox-group-offset--inline) / 2) calc(-1 * (var(--checkbox-group-offset--inline) / 2 - var(--checkbox-group-label-offset)))}
+`, E = ["default", "success", "error"], w = "pie-checkbox-group-disabled", O = "pie-checkbox-group-error", n = {
   status: "default",
-  disabled: !1
+  disabled: !1,
+  isInline: !1
 };
-var $ = Object.defineProperty, D = Object.getOwnPropertyDescriptor, a = (d, t, o, s) => {
-  for (var e = s > 1 ? void 0 : s ? D(t, o) : t, r = d.length - 1, n; r >= 0; r--)
-    (n = d[r]) && (e = (s ? n(t, o, e) : n(e)) || e);
-  return s && e && $(t, o, e), e;
+var S = Object.defineProperty, $ = Object.getOwnPropertyDescriptor, i = (p, e, t, c) => {
+  for (var s = c > 1 ? void 0 : c ? $(e, t) : e, a = p.length - 1, l; a >= 0; a--)
+    (l = p[a]) && (s = (c ? l(e, t, s) : l(s)) || s);
+  return c && s && S(e, t, s), s;
 };
-const f = "pie-checkbox-group", c = "assistive-text";
-class i extends y(x(b)) {
+const u = "pie-checkbox-group", h = "assistive-text";
+class o extends m(k(x)) {
   constructor() {
-    super(...arguments), this.status = u.status, this.disabled = u.disabled;
+    super(...arguments), this.isInline = n.isInline, this.status = n.status, this.disabled = n.disabled;
   }
   _handleDisabled() {
-    this._slottedChildren && this._slottedChildren.forEach((t) => {
-      t.dispatchEvent(new CustomEvent(E, { bubbles: !1, composed: !1, detail: { disabled: this.disabled } }));
-    });
+    var e;
+    (e = this._slottedChildren) == null || e.forEach((t) => t.dispatchEvent(new CustomEvent(w, {
+      bubbles: !1,
+      composed: !1,
+      detail: { disabled: this.disabled }
+    })));
   }
   _handleStatus() {
-    this._slottedChildren && this._slottedChildren.forEach((t) => t.setAttribute("status", this.status));
+    var e;
+    (e = this._slottedChildren) == null || e.forEach((t) => {
+      t.setAttribute("status", this.status), this.status === "error" && this.assistiveText && (t.setAttribute("assistiveText", this.assistiveText), t.dispatchEvent(new CustomEvent(O, { bubbles: !1, composed: !1, detail: { error: !0 } })));
+    });
   }
-  updated(t) {
-    t.has("disabled") && this._handleDisabled(), t.has("status") && this._handleStatus();
+  updated(e) {
+    e.has("disabled") && this._handleDisabled(), e.has("status") && this._handleStatus();
   }
   render() {
     const {
-      name: t,
-      label: o,
+      name: e,
+      label: t,
+      isInline: c,
       assistiveText: s,
-      status: e,
-      disabled: r
-    } = this;
-    return p`
+      status: a,
+      disabled: l
+    } = this, f = {
+      "c-checkboxGroup": !0,
+      "c-checkboxGroup--inline": c
+    };
+    return d`
             <fieldset
-                name=${h(t)}
-                ?disabled=${r}
-                aria-describedby="${h(s ? c : void 0)}"
+                name=${b(e)}
+                ?disabled=${l}
+                aria-describedby="${b(s ? h : void 0)}"
                 data-test-id="pie-checkbox-group"
+                class="${_(f)}"
             >
-                ${o && p`<legend>${o}</legend>`}
+                ${t && d`<legend class="c-checkboxGroup-label">${t}</legend>`}
                 <slot></slot>
             </fieldset>
-            ${s && p`
+            ${s && d`
                 <pie-assistive-text
-                    id="${c}"
-                    variant=${e}
+                    id="${h}"
+                    variant=${a}
                     data-test-id="pie-checkbox-group-assistive-text">
                         ${s}
                 </pie-assistive-text>`}
         `;
   }
 }
-i.styles = m(g);
-a([
-  l({ type: String })
-], i.prototype, "name", 2);
-a([
-  l({ type: String })
-], i.prototype, "label", 2);
-a([
-  l({ type: String })
-], i.prototype, "assistiveText", 2);
-a([
-  l({ type: String }),
-  _(f, S, u.status)
-], i.prototype, "status", 2);
-a([
-  l({ type: Boolean, reflect: !0 })
-], i.prototype, "disabled", 2);
-a([
-  v({})
-], i.prototype, "_slottedChildren", 2);
-C(f, i);
+o.styles = g(C);
+i([
+  r({ type: String })
+], o.prototype, "name", 2);
+i([
+  r({ type: String })
+], o.prototype, "label", 2);
+i([
+  r({ type: String })
+], o.prototype, "assistiveText", 2);
+i([
+  r({ type: Boolean })
+], o.prototype, "isInline", 2);
+i([
+  r({ type: String }),
+  y(u, E, n.status)
+], o.prototype, "status", 2);
+i([
+  r({ type: Boolean, reflect: !0 })
+], o.prototype, "disabled", 2);
+i([
+  v({ selector: "pie-checkbox" })
+], o.prototype, "_slottedChildren", 2);
+G(u, o);
 export {
-  E as ON_CHECKBOX_GROUP_DISABLED,
-  i as PieCheckboxGroup,
-  u as defaultProps,
-  S as statusTypes
+  w as ON_CHECKBOX_GROUP_DISABLED,
+  O as ON_CHECKBOX_GROUP_ERROR,
+  o as PieCheckboxGroup,
+  n as defaultProps,
+  E as statusTypes
 };

package/dist/react.d.ts

@@ -17,6 +17,10 @@ export declare interface CheckboxGroupProps {
      * The label value of the component
      */
     label?: string;
+    /**
+     * Inline (horizontal) positioning of checkbox items
+     */
+    isInline?: boolean;
     /**
      * An optional assistive text to display below the checkbox group.
      */
@@ -31,7 +35,7 @@ export declare interface CheckboxGroupProps {
     status?: typeof statusTypes[number];
 }
 
-export declare type DefaultProps = ComponentDefaultProps<CheckboxGroupProps, 'status' | 'disabled'>;
+export declare type DefaultProps = ComponentDefaultProps<CheckboxGroupProps, 'status' | 'disabled' | 'isInline'>;
 
 export declare const defaultProps: DefaultProps;
 
@@ -42,19 +46,24 @@ export declare const defaultProps: DefaultProps;
  */
 export declare const ON_CHECKBOX_GROUP_DISABLED = "pie-checkbox-group-disabled";
 
+export declare const ON_CHECKBOX_GROUP_ERROR = "pie-checkbox-group-error";
+
 export declare const PieCheckboxGroup: React_2.ForwardRefExoticComponent<CheckboxGroupProps & React_2.RefAttributes<PieCheckboxGroup_2> & PieCheckboxGroupEvents & ReactBaseType>;
 
 /**
  * @tagname pie-checkbox-group
+ * @slot - Default slot
  * @event {CustomEvent} pie-checkbox-group-disabled - triggered after the disabled state of the checkbox group changes.
+ * @event {CustomEvent} pie-checkbox-group-error - triggered after the state of the checkbox group changes to error.
  */
 declare class PieCheckboxGroup_2 extends PieCheckboxGroup_base implements CheckboxGroupProps {
     name?: CheckboxGroupProps['name'];
     label?: CheckboxGroupProps['label'];
     assistiveText?: CheckboxGroupProps['assistiveText'];
+    isInline: boolean;
     status: "default" | "error" | "success";
     disabled: boolean;
-    _slottedChildren: Array<HTMLElement>;
+    _slottedChildren: Array<HTMLElement> | undefined;
     private _handleDisabled;
     private _handleStatus;
     protected updated(_changedProperties: PropertyValues<this>): void;
@@ -66,6 +75,7 @@ declare const PieCheckboxGroup_base: GenericConstructor<FormControlInterface> &
 
 declare type PieCheckboxGroupEvents = {
     onPieCheckboxGroupDisabled?: (event: CustomEvent) => void;
+    onPieCheckboxGroupError?: (event: CustomEvent) => void;
 };
 
 declare type ReactBaseType = React_2.FieldsetHTMLAttributes<HTMLFieldSetElement>;

package/dist/react.js

@@ -1,11 +1,12 @@
 import * as o from "react";
 import { createComponent as e } from "@lit/react";
 import { PieCheckboxGroup as r } from "./index.js";
-import { ON_CHECKBOX_GROUP_DISABLED as h, defaultProps as k, statusTypes as P } from "./index.js";
+import { ON_CHECKBOX_GROUP_DISABLED as k, ON_CHECKBOX_GROUP_ERROR as P, defaultProps as G, statusTypes as n } from "./index.js";
 import "lit";
 import "lit/decorators.js";
 import "@justeattakeaway/pie-webc-core";
 import "lit/directives/if-defined.js";
+import "lit/directives/class-map.js";
 import "@justeattakeaway/pie-assistive-text";
 const p = e({
   displayName: "PieCheckboxGroup",
@@ -13,13 +14,16 @@ const p = e({
   react: o,
   tagName: "pie-checkbox-group",
   events: {
-    onPieCheckboxGroupDisabled: "pie-checkbox-group-disabled"
+    onPieCheckboxGroupDisabled: "pie-checkbox-group-disabled",
     // triggered after the disabled state of the checkbox group changes.
+    onPieCheckboxGroupError: "pie-checkbox-group-error"
+    // triggered after the state of the checkbox group changes to error.
   }
 }), u = p;
 export {
-  h as ON_CHECKBOX_GROUP_DISABLED,
+  k as ON_CHECKBOX_GROUP_DISABLED,
+  P as ON_CHECKBOX_GROUP_ERROR,
   u as PieCheckboxGroup,
-  k as defaultProps,
-  P as statusTypes
+  G as defaultProps,
+  n as statusTypes
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-checkbox-group",
   "description": "PIE Design System Checkbox Group built using Web Components",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -40,7 +40,7 @@
     "cem-plugin-module-file-extensions": "0.0.5"
   },
   "dependencies": {
-    "@justeattakeaway/pie-assistive-text": "0.5.1",
+    "@justeattakeaway/pie-assistive-text": "0.6.0",
     "@justeattakeaway/pie-webc-core": "0.24.0"
   },
   "volta": {

package/src/checkbox-group.scss

@@ -1 +1,53 @@
 @use '@justeattakeaway/pie-css/scss' as p;
+
+.c-checkboxGroup {
+    --checkbox-group-offset: var(--dt-spacing-c);
+    --checkbox-group-offset--inline: var(--dt-spacing-e);
+    --checkbox-group-label-offset: var(--dt-spacing-a);
+
+    margin: 0;
+    padding: 0;
+    border: 0;
+    min-width: 0;
+
+    ::slotted(pie-checkbox) {
+        display: flex;
+    }
+
+    &:not(.c-checkboxGroup--inline) {
+        ::slotted(pie-checkbox:not(:first-child)) {
+            margin-block-start: var(--checkbox-group-offset);
+        }
+    }
+}
+
+.c-checkboxGroup--inline {
+    display: flex;
+
+    align-items: flex-start;
+    flex-wrap: wrap;
+}
+
+.c-checkboxGroup-label {
+    max-width: 100%;
+    white-space: normal;
+    padding: 0;
+    font-size: p.font-size(--dt-font-body-strong-s-size);
+    line-height: p.line-height(--dt-font-body-strong-s-line-height);
+    font-weight: var(--dt-font-body-strong-s-weight);
+    color: var(--dt-color-content-default);
+
+    margin-block-end: var(--checkbox-group-label-offset);
+}
+
+.c-checkboxGroup.c-checkboxGroup--inline {
+    margin: calc(-1 * var(--checkbox-group-offset--inline) / 2) calc(-1 * var(--checkbox-group-offset--inline) / 2);
+
+    ::slotted(pie-checkbox) {
+        margin: calc(var(--checkbox-group-offset--inline) / 2) calc(var(--checkbox-group-offset--inline) / 2);
+    }
+
+    .c-checkboxGroup-label {
+        margin: 0 calc(var(--checkbox-group-offset--inline) / 2) calc(-1 * (var(--checkbox-group-offset--inline) / 2 - var(--checkbox-group-label-offset)));
+    }
+}

package/src/defs.ts

@@ -13,6 +13,11 @@ export interface CheckboxGroupProps {
      */
     label?: string;
 
+    /**
+     * Inline (horizontal) positioning of checkbox items
+     */
+    isInline?: boolean;
+
     /**
      * An optional assistive text to display below the checkbox group.
      */
@@ -35,10 +40,12 @@ export interface CheckboxGroupProps {
  * @constant
  */
 export const ON_CHECKBOX_GROUP_DISABLED = 'pie-checkbox-group-disabled';
+export const ON_CHECKBOX_GROUP_ERROR = 'pie-checkbox-group-error';
 
-export type DefaultProps = ComponentDefaultProps<CheckboxGroupProps, 'status' | 'disabled'>;
+export type DefaultProps = ComponentDefaultProps<CheckboxGroupProps, 'status' | 'disabled' | 'isInline'>;
 
 export const defaultProps: DefaultProps = {
     status: 'default',
     disabled: false,
+    isInline: false,
 };

package/src/index.ts

@@ -9,9 +9,11 @@ import {
     validPropertyValues,
 } from '@justeattakeaway/pie-webc-core';
 import { ifDefined } from 'lit/directives/if-defined.js';
+import { classMap } from 'lit/directives/class-map.js';
 import styles from './checkbox-group.scss?inline';
 import {
     ON_CHECKBOX_GROUP_DISABLED,
+    ON_CHECKBOX_GROUP_ERROR,
     CheckboxGroupProps,
     defaultProps,
     statusTypes,
@@ -26,7 +28,9 @@ const assistiveTextId = 'assistive-text';
 
 /**
  * @tagname pie-checkbox-group
+ * @slot - Default slot
  * @event {CustomEvent} pie-checkbox-group-disabled - triggered after the disabled state of the checkbox group changes.
+ * @event {CustomEvent} pie-checkbox-group-error - triggered after the state of the checkbox group changes to error.
  */
 export class PieCheckboxGroup extends FormControlMixin(RtlMixin(LitElement)) implements CheckboxGroupProps {
     @property({ type: String })
@@ -38,6 +42,9 @@ export class PieCheckboxGroup extends FormControlMixin(RtlMixin(LitElement)) imp
     @property({ type: String })
     public assistiveText?: CheckboxGroupProps['assistiveText'];
 
+    @property({ type: Boolean })
+    public isInline = defaultProps.isInline;
+
     @property({ type: String })
     @validPropertyValues(componentSelector, statusTypes, defaultProps.status)
     public status = defaultProps.status;
@@ -45,20 +52,23 @@ export class PieCheckboxGroup extends FormControlMixin(RtlMixin(LitElement)) imp
     @property({ type: Boolean, reflect: true })
     public disabled = defaultProps.disabled;
 
-    @queryAssignedElements({}) _slottedChildren!: Array<HTMLElement>;
+    @queryAssignedElements({ selector: 'pie-checkbox' }) _slottedChildren: Array<HTMLElement> | undefined;
 
     private _handleDisabled () : void {
-        if (this._slottedChildren) {
-            this._slottedChildren.forEach((child) => {
-                child.dispatchEvent(new CustomEvent(ON_CHECKBOX_GROUP_DISABLED, { bubbles: false, composed: false, detail: { disabled: this.disabled } }));
-            });
-        }
+        this._slottedChildren?.forEach((child) => child.dispatchEvent(new CustomEvent(ON_CHECKBOX_GROUP_DISABLED, {
+            bubbles: false, composed: false, detail: { disabled: this.disabled },
+        })));
     }
 
     private _handleStatus () : void {
-        if (this._slottedChildren) {
-            this._slottedChildren.forEach((child) => child.setAttribute('status', this.status));
-        }
+        this._slottedChildren?.forEach((child) => {
+            child.setAttribute('status', this.status);
+
+            if (this.status === 'error' && this.assistiveText) {
+                child.setAttribute('assistiveText', this.assistiveText);
+                child.dispatchEvent(new CustomEvent(ON_CHECKBOX_GROUP_ERROR, { bubbles: false, composed: false, detail: { error: true } }));
+            }
+        });
     }
 
     protected updated (_changedProperties: PropertyValues<this>): void {
@@ -75,18 +85,26 @@ export class PieCheckboxGroup extends FormControlMixin(RtlMixin(LitElement)) imp
         const {
             name,
             label,
+            isInline,
             assistiveText,
             status,
             disabled,
         } = this;
+
+        const classes = {
+            'c-checkboxGroup': true,
+            'c-checkboxGroup--inline': isInline,
+        };
+
         return html`
             <fieldset
                 name=${ifDefined(name)}
                 ?disabled=${disabled}
                 aria-describedby="${ifDefined(assistiveText ? assistiveTextId : undefined)}"
                 data-test-id="pie-checkbox-group"
+                class="${classMap(classes)}"
             >
-                ${label && html`<legend>${label}</legend>`}
+                ${label && html`<legend class="c-checkboxGroup-label">${label}</legend>`}
                 <slot></slot>
             </fieldset>
             ${assistiveText && html`

package/src/react.ts

@@ -12,6 +12,7 @@ const PieCheckboxGroupReact = createComponent({
     tagName: 'pie-checkbox-group',
     events: {
         onPieCheckboxGroupDisabled: 'pie-checkbox-group-disabled' as EventName<CustomEvent>, // triggered after the disabled state of the checkbox group changes.
+        onPieCheckboxGroupError: 'pie-checkbox-group-error' as EventName<CustomEvent>, // triggered after the state of the checkbox group changes to error.
     },
 });
 
@@ -19,6 +20,7 @@ type ReactBaseType = React.FieldsetHTMLAttributes<HTMLFieldSetElement>
 
 type PieCheckboxGroupEvents = {
     onPieCheckboxGroupDisabled?: (event: CustomEvent) => void;
+    onPieCheckboxGroupError?: (event: CustomEvent) => void;
 };
 
 export const PieCheckboxGroup = PieCheckboxGroupReact as React.ForwardRefExoticComponent<React.PropsWithoutRef<CheckboxGroupProps>