@justeattakeaway/pie-checkbox-group 0.4.0 → 0.6.0

package/README.md

@@ -8,15 +8,6 @@
   </a>
 </p>
 
-# Table of Contents
-
-1. [Introduction](#pie-checkbox-group)
-2. [Installation](#installation)
-3. [Importing the component](#importing-the-component)
-4. [Peer Dependencies](#peer-dependencies)
-5. [Props](#props)
-6. [Contributing](#contributing)
-
 ## pie-checkbox-group
 
 `pie-checkbox-group` is a Web Component built using the Lit library.
@@ -40,72 +31,14 @@ $ yarn add @justeattakeaway/pie-checkbox-group
 For full information on using PIE components as part of an application, check out the [Getting Started Guide](https://github.com/justeattakeaway/pie/wiki/Getting-started-with-PIE-Web-Components).
 
 
-### Importing the component
-
-#### JavaScript
-```js
-// Default – for Native JS Applications, Vue, Angular, Svelte, etc.
-import { PieCheckboxGroup } from '@justeattakeaway/pie-checkbox-group';
-
-// If you don't need to reference the imported object, you can simply
-// import the module which registers the component as a custom element.
-import '@justeattakeaway/pie-checkbox-group';
-```
-
-#### React
-```js
-// React
-// For React, you will need to import our React-specific component build
-// which wraps the web component using ​@lit/react
-import { PieCheckboxGroup } from '@justeattakeaway/pie-checkbox-group/dist/react';
-```
-
-> [!NOTE]
-> When using the React version of the component, please make sure to also
-> include React as a [peer dependency](#peer-dependencies) in your project.
-
+## Documentation
 
-## Peer Dependencies
+Visit  [Checkbox Group | PIE Design System](https://pie.design/components/checkbox-group/) to view more information on this component.
 
-> [!IMPORTANT]
-> When using `pie-checkbox-group`, you will also need to include a couple of dependencies to ensure the component renders as expected. See [the PIE Wiki](https://github.com/justeattakeaway/pie/wiki/Getting-started-with-PIE-Web-Components#expected-dependencies) for more information and how to include these in your application.
-
-
-## Props
-
-| Property | Type | Default | Description |
-|---|---|---|---|
-| `name` | string | - | The name associated with the group. |
-| `label` | string | - | The label value of the component |
-| `disabled` | boolean | - | Same as the HTML disabled attribute - indicates whether or not the checkbox group is disabled. |
-| `assistiveText` | `string` | - | Allows assistive text to be displayed below the checkbox group. |
-| `status` | `'default'`, `'error'`, `'success'` | `'default'` | The status of the checkbox group / assistive text. If you use `status` you must provide an `assistiveText` prop value for accessibility purposes. |
-
-
-In your markup or JSX, you can then use these to set the properties for the `pie-checkbox-group` component:
-
-```html
-<!-- Native HTML -->
-<pie-checkbox-group name="TESTNAME">
-  <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">Checkbox Label 1</PieCheckbox>
-  <PieCheckbox name="my-checkbox-two">Checkbox Label 2</PieCheckbox>
-  <PieCheckbox name="my-checkbox-three">Checkbox Label 3</PieCheckbox>
-</PieCheckboxGroup>
-```
+## Questions
 
-## Events
-| 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. |
+Please head to [FAQs | PIE Design System](https://pie.design/support/contact-us/) to see our FAQs and get in touch.
 
 ## Contributing
 
-Check out our [contributing guide](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide) for more information on [local development](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide#local-development) and how to run specific [component tests](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide#testing).
+Check out our [contributing guide](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide) for more information on [local development](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide#local-development) and how to run specific [component tests](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide#testing).

package/custom-elements.json

@@ -93,26 +93,29 @@
             {
               "description": "Default slot",
               "name": ""
+            },
+            {
+              "description": "The label slot",
+              "name": "label"
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "name",
+              "name": "hasLabel",
               "type": {
-                "text": "CheckboxGroupProps['name'] | undefined"
+                "text": "boolean"
               },
-              "privacy": "public",
-              "attribute": "name"
+              "default": "false"
             },
             {
               "kind": "field",
-              "name": "label",
+              "name": "name",
               "type": {
-                "text": "CheckboxGroupProps['label'] | undefined"
+                "text": "CheckboxGroupProps['name'] | undefined"
               },
               "privacy": "public",
-              "attribute": "label"
+              "attribute": "name"
             },
             {
               "kind": "field",
@@ -149,6 +152,13 @@
                 "text": "Array<HTMLElement> | undefined"
               }
             },
+            {
+              "kind": "field",
+              "name": "_labelSlot",
+              "type": {
+                "text": "Array<HTMLElement>"
+              }
+            },
             {
               "kind": "method",
               "name": "_handleDisabled",
@@ -168,6 +178,31 @@
                   "text": "void"
                 }
               }
+            },
+            {
+              "kind": "method",
+              "name": "handleSlotChange",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "{ target: HTMLSlotElement; }"
+                  }
+                }
+              ],
+              "description": "Function that updates the local `hasLabel` state in case\nwhen the label slot receives content."
+            },
+            {
+              "kind": "method",
+              "name": "renderWrappedLabel",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "TemplateResult | typeof nothing"
+                }
+              },
+              "description": "Template for the label slot to correctly wrap it into a legend element when it has content.\nCalled within the main render function."
             }
           ],
           "events": [
@@ -194,13 +229,6 @@
               },
               "fieldName": "name"
             },
-            {
-              "name": "label",
-              "type": {
-                "text": "CheckboxGroupProps['label'] | undefined"
-              },
-              "fieldName": "label"
-            },
             {
               "name": "assistiveText",
               "type": {

package/dist/index.d.ts

@@ -5,17 +5,13 @@ import type { GenericConstructor } from '@justeattakeaway/pie-webc-core';
 import type { LitElement } from 'lit';
 import type { PropertyValues } from 'lit';
 import type { RTLInterface } from '@justeattakeaway/pie-webc-core';
-import type { TemplateResult } from 'lit-html';
+import type { TemplateResult } from 'lit';
 
 export declare interface CheckboxGroupProps {
     /**
      * The name associated with the group.
      */
     name?: string;
-    /**
-     * The label value of the component
-     */
-    label?: string;
     /**
      * Inline (horizontal) positioning of checkbox items
      */
@@ -50,19 +46,33 @@ export declare const ON_CHECKBOX_GROUP_ERROR = "pie-checkbox-group-error";
 /**
  * @tagname pie-checkbox-group
  * @slot - Default slot
+ * @slot label - The label 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 {
+    hasLabel: boolean;
     name?: CheckboxGroupProps['name'];
-    label?: CheckboxGroupProps['label'];
     assistiveText?: CheckboxGroupProps['assistiveText'];
     isInline: boolean;
     status: "default" | "error" | "success";
     disabled: boolean;
     _slottedChildren: Array<HTMLElement> | undefined;
+    _labelSlot: Array<HTMLElement>;
     private _handleDisabled;
     private _handleStatus;
+    /**
+     * Function that updates the local `hasLabel` state in case
+     * when the label slot receives content.
+     * @private
+     */
+    private handleSlotChange;
+    /**
+     * Template for the label slot to correctly wrap it into a legend element when it has content.
+     * Called within the main render function.
+     * @private
+     */
+    private renderWrappedLabel;
     protected updated(_changedProperties: PropertyValues<this>): void;
     render(): TemplateResult<1>;
     static styles: CSSResult;

package/dist/index.js

@@ -1,28 +1,28 @@
-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 { LitElement as x, html as n, unsafeCSS as g } from "lit";
+import { state as k, property as l, queryAssignedElements as u } from "lit/decorators.js";
+import { FormControlMixin as v, RtlMixin as m, 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 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 = {
+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 ::slotted(pie-form-label){display:block;padding-block-end:var(--checkbox-group-label-offset)}.c-checkboxGroup:not(.c-checkboxGroup--inline) ::slotted(pie-checkbox:not(:last-child)){margin-block-end:var(--checkbox-group-offset)}.c-checkboxGroup--inline{display:flex;align-items:flex-start;flex-wrap:wrap}.c-checkboxGroup.c-checkboxGroup--inline{margin:calc(-1 * var(--checkbox-group-offset) / 2) calc(-1 * var(--checkbox-group-offset--inline) / 2)}.c-checkboxGroup.c-checkboxGroup--inline ::slotted(pie-checkbox){margin:calc(var(--checkbox-group-offset) / 2) calc(var(--checkbox-group-offset--inline) / 2)}.c-checkboxGroup.c-checkboxGroup--inline ::slotted(pie-form-label){margin:0 calc(var(--checkbox-group-offset--inline) / 2) calc(-1 * (var(--checkbox-group-offset) / 2 - var(--checkbox-group-label-offset)));padding-block-end:0}.c-checkboxGroup-assistiveText{--checkbox-group-assistive-text-offset: var(--dt-spacing-a);display:block;margin-block-start:var(--checkbox-group-assistive-text-offset)}
+`, E = ["default", "success", "error"], S = "pie-checkbox-group-disabled", O = "pie-checkbox-group-error", p = {
   status: "default",
   disabled: !1,
   isInline: !1
 };
-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;
+var $ = Object.defineProperty, T = Object.getOwnPropertyDescriptor, a = (d, e, t, i) => {
+  for (var o = i > 1 ? void 0 : i ? T(e, t) : e, c = d.length - 1, r; c >= 0; c--)
+    (r = d[c]) && (o = (i ? r(e, t, o) : r(o)) || o);
+  return i && o && $(e, t, o), o;
 };
-const u = "pie-checkbox-group", h = "assistive-text";
-class o extends m(k(x)) {
+const f = "pie-checkbox-group", h = "assistive-text";
+class s extends v(m(x)) {
   constructor() {
-    super(...arguments), this.isInline = n.isInline, this.status = n.status, this.disabled = n.disabled;
+    super(...arguments), this.hasLabel = !1, this.isInline = p.isInline, this.status = p.status, this.disabled = p.disabled;
   }
   _handleDisabled() {
     var e;
-    (e = this._slottedChildren) == null || e.forEach((t) => t.dispatchEvent(new CustomEvent(w, {
+    (e = this._slottedChildren) == null || e.forEach((t) => t.dispatchEvent(new CustomEvent(S, {
       bubbles: !1,
       composed: !1,
       detail: { disabled: this.disabled }
@@ -34,70 +34,90 @@ class o extends m(k(x)) {
       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 } })));
     });
   }
+  /**
+   * Function that updates the local `hasLabel` state in case
+   * when the label slot receives content.
+   * @private
+   */
+  handleSlotChange(e) {
+    const t = e.target.assignedNodes({ flatten: !0 });
+    this.hasLabel = t.length > 0;
+  }
+  /**
+   * Template for the label slot to correctly wrap it into a legend element when it has content.
+   * Called within the main render function.
+   * @private
+   */
+  renderWrappedLabel() {
+    return this.hasLabel ? n`<legend><slot name='label' @slotchange=${this.handleSlotChange}></slot></legend>` : n`<slot name='label' @slotchange=${this.handleSlotChange}></slot>`;
+  }
   updated(e) {
     e.has("disabled") && this._handleDisabled(), e.has("status") && this._handleStatus();
   }
   render() {
     const {
       name: e,
-      label: t,
-      isInline: c,
-      assistiveText: s,
-      status: a,
-      disabled: l
-    } = this, f = {
+      isInline: t,
+      assistiveText: i,
+      status: o,
+      disabled: c
+    } = this, r = {
       "c-checkboxGroup": !0,
-      "c-checkboxGroup--inline": c
+      "c-checkboxGroup--inline": t
     };
-    return d`
+    return n`
             <fieldset
                 name=${b(e)}
-                ?disabled=${l}
-                aria-describedby="${b(s ? h : void 0)}"
+                ?disabled=${c}
+                aria-describedby="${b(i ? h : void 0)}"
                 data-test-id="pie-checkbox-group"
-                class="${_(f)}"
+                class="${_(r)}"
             >
-                ${t && d`<legend class="c-checkboxGroup-label">${t}</legend>`}
+                ${this.renderWrappedLabel()}
                 <slot></slot>
             </fieldset>
-            ${s && d`
+            ${i && n`
                 <pie-assistive-text
                     id="${h}"
-                    variant=${a}
+                    variant=${o}
+                    class="c-checkboxGroup-assistiveText"
                     data-test-id="pie-checkbox-group-assistive-text">
-                        ${s}
+                        ${i}
                 </pie-assistive-text>`}
         `;
   }
 }
-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);
+s.styles = g(C);
+a([
+  k()
+], s.prototype, "hasLabel", 2);
+a([
+  l({ type: String })
+], s.prototype, "name", 2);
+a([
+  l({ type: String })
+], s.prototype, "assistiveText", 2);
+a([
+  l({ type: Boolean })
+], s.prototype, "isInline", 2);
+a([
+  l({ type: String }),
+  y(f, E, p.status)
+], s.prototype, "status", 2);
+a([
+  l({ type: Boolean, reflect: !0 })
+], s.prototype, "disabled", 2);
+a([
+  u({ selector: "pie-checkbox" })
+], s.prototype, "_slottedChildren", 2);
+a([
+  u({ slot: "label" })
+], s.prototype, "_labelSlot", 2);
+G(f, s);
 export {
-  w as ON_CHECKBOX_GROUP_DISABLED,
+  S as ON_CHECKBOX_GROUP_DISABLED,
   O as ON_CHECKBOX_GROUP_ERROR,
-  o as PieCheckboxGroup,
-  n as defaultProps,
+  s as PieCheckboxGroup,
+  p as defaultProps,
   E as statusTypes
 };

package/dist/react.d.ts

@@ -6,17 +6,13 @@ import type { LitElement } from 'lit';
 import type { PropertyValues } from 'lit';
 import * as React_2 from 'react';
 import type { RTLInterface } from '@justeattakeaway/pie-webc-core';
-import type { TemplateResult } from 'lit-html';
+import type { TemplateResult } from 'lit';
 
 export declare interface CheckboxGroupProps {
     /**
      * The name associated with the group.
      */
     name?: string;
-    /**
-     * The label value of the component
-     */
-    label?: string;
     /**
      * Inline (horizontal) positioning of checkbox items
      */
@@ -53,19 +49,33 @@ export declare const PieCheckboxGroup: React_2.ForwardRefExoticComponent<Checkbo
 /**
  * @tagname pie-checkbox-group
  * @slot - Default slot
+ * @slot label - The label 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 {
+    hasLabel: boolean;
     name?: CheckboxGroupProps['name'];
-    label?: CheckboxGroupProps['label'];
     assistiveText?: CheckboxGroupProps['assistiveText'];
     isInline: boolean;
     status: "default" | "error" | "success";
     disabled: boolean;
     _slottedChildren: Array<HTMLElement> | undefined;
+    _labelSlot: Array<HTMLElement>;
     private _handleDisabled;
     private _handleStatus;
+    /**
+     * Function that updates the local `hasLabel` state in case
+     * when the label slot receives content.
+     * @private
+     */
+    private handleSlotChange;
+    /**
+     * Template for the label slot to correctly wrap it into a legend element when it has content.
+     * Called within the main render function.
+     * @private
+     */
+    private renderWrappedLabel;
     protected updated(_changedProperties: PropertyValues<this>): void;
     render(): TemplateResult<1>;
     static styles: CSSResult;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-checkbox-group",
   "description": "PIE Design System Checkbox Group built using Web Components",
-  "version": "0.4.0",
+  "version": "0.6.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -36,11 +36,12 @@
   "license": "Apache-2.0",
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "0.9.0",
-    "@justeattakeaway/pie-components-config": "0.16.0",
+    "@justeattakeaway/pie-components-config": "0.17.0",
+    "@justeattakeaway/pie-css": "0.12.1",
     "cem-plugin-module-file-extensions": "0.0.5"
   },
   "dependencies": {
-    "@justeattakeaway/pie-assistive-text": "0.6.0",
+    "@justeattakeaway/pie-assistive-text": "0.6.1",
     "@justeattakeaway/pie-webc-core": "0.24.0"
   },
   "volta": {

package/src/checkbox-group.scss

@@ -14,9 +14,14 @@
         display: flex;
     }
 
+    ::slotted(pie-form-label) {
+        display: block;
+        padding-block-end: var(--checkbox-group-label-offset);
+    }
+
     &:not(.c-checkboxGroup--inline) {
-        ::slotted(pie-checkbox:not(:first-child)) {
-            margin-block-start: var(--checkbox-group-offset);
+        ::slotted(pie-checkbox:not(:last-child)) {
+            margin-block-end: var(--checkbox-group-offset);
         }
     }
 }
@@ -28,26 +33,22 @@
     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);
+    margin: calc(-1 * var(--checkbox-group-offset) / 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);
+        margin: calc(var(--checkbox-group-offset) / 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)));
+    ::slotted(pie-form-label) {
+        margin: 0 calc(var(--checkbox-group-offset--inline) / 2) calc(-1 * (var(--checkbox-group-offset) / 2 - var(--checkbox-group-label-offset)));
+        padding-block-end: 0;
     }
 }
+
+.c-checkboxGroup-assistiveText {
+    --checkbox-group-assistive-text-offset: var(--dt-spacing-a);
+
+    display: block;
+    margin-block-start: var(--checkbox-group-assistive-text-offset);
+}

package/src/defs.ts

@@ -8,11 +8,6 @@ export interface CheckboxGroupProps {
     */
     name?: string;
 
-    /**
-     * The label value of the component
-     */
-    label?: string;
-
     /**
      * Inline (horizontal) positioning of checkbox items
      */

package/src/index.ts

@@ -1,7 +1,7 @@
 import {
-    LitElement, html, unsafeCSS, PropertyValues,
+    LitElement, html, unsafeCSS, PropertyValues, nothing, type TemplateResult,
 } from 'lit';
-import { property, queryAssignedElements } from 'lit/decorators.js';
+import { property, queryAssignedElements, state } from 'lit/decorators.js';
 import {
     RtlMixin,
     defineCustomElement,
@@ -29,15 +29,16 @@ const assistiveTextId = 'assistive-text';
 /**
  * @tagname pie-checkbox-group
  * @slot - Default slot
+ * @slot label - The label 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 })
-    public name?: CheckboxGroupProps['name'];
+    @state()
+        hasLabel = false;
 
     @property({ type: String })
-    public label?: CheckboxGroupProps['label'];
+    public name?: CheckboxGroupProps['name'];
 
     @property({ type: String })
     public assistiveText?: CheckboxGroupProps['assistiveText'];
@@ -54,6 +55,8 @@ export class PieCheckboxGroup extends FormControlMixin(RtlMixin(LitElement)) imp
 
     @queryAssignedElements({ selector: 'pie-checkbox' }) _slottedChildren: Array<HTMLElement> | undefined;
 
+    @queryAssignedElements({ slot: 'label' }) _labelSlot!: Array<HTMLElement>;
+
     private _handleDisabled () : void {
         this._slottedChildren?.forEach((child) => child.dispatchEvent(new CustomEvent(ON_CHECKBOX_GROUP_DISABLED, {
             bubbles: false, composed: false, detail: { disabled: this.disabled },
@@ -71,6 +74,25 @@ export class PieCheckboxGroup extends FormControlMixin(RtlMixin(LitElement)) imp
         });
     }
 
+    /**
+     * Function that updates the local `hasLabel` state in case
+     * when the label slot receives content.
+     * @private
+     */
+    private handleSlotChange (e: { target: HTMLSlotElement; }) {
+        const childNodes = e.target.assignedNodes({ flatten: true });
+        this.hasLabel = childNodes.length > 0;
+    }
+
+    /**
+     * Template for the label slot to correctly wrap it into a legend element when it has content.
+     * Called within the main render function.
+     * @private
+     */
+    private renderWrappedLabel (): TemplateResult | typeof nothing {
+        return this.hasLabel ? html`<legend><slot name='label' @slotchange=${this.handleSlotChange}></slot></legend>` : html`<slot name='label' @slotchange=${this.handleSlotChange}></slot>`;
+    }
+
     protected updated (_changedProperties: PropertyValues<this>): void {
         if (_changedProperties.has('disabled')) {
             this._handleDisabled();
@@ -84,7 +106,6 @@ export class PieCheckboxGroup extends FormControlMixin(RtlMixin(LitElement)) imp
     render () {
         const {
             name,
-            label,
             isInline,
             assistiveText,
             status,
@@ -104,13 +125,14 @@ export class PieCheckboxGroup extends FormControlMixin(RtlMixin(LitElement)) imp
                 data-test-id="pie-checkbox-group"
                 class="${classMap(classes)}"
             >
-                ${label && html`<legend class="c-checkboxGroup-label">${label}</legend>`}
+                ${this.renderWrappedLabel()}
                 <slot></slot>
             </fieldset>
             ${assistiveText && html`
                 <pie-assistive-text
                     id="${assistiveTextId}"
                     variant=${status}
+                    class="c-checkboxGroup-assistiveText"
                     data-test-id="pie-checkbox-group-assistive-text">
                         ${assistiveText}
                 </pie-assistive-text>`}