From d3d974c76a5ee1e800c30b59e81002d089b5a26d Mon Sep 17 00:00:00 2001
From: Ashley Watson-Nolan <ashley.watson-nolan@justeattakeaway.com>
Date: Wed, 24 Jul 2024 15:49:14 +0100
Subject: [PATCH 1/4] feat(pie-button): DSW-000 Changing styles to use classmap
 (#1587)

* refactor(pie-button): DSW-000 updated styles to use classmap

* format(pie-button): DSW-000 formatting updates for PR comments

* fix(pie-button): DSW-000 change loading attribute to class
---
 .changeset/modern-melons-draw.md              |   6 +
 .../components/pie-button/src/button.scss     | 120 +++++++++++-------
 packages/components/pie-button/src/index.ts   |  22 ++--
 .../test/component/pie-button.spec.ts         |  10 +-
 .../scss/mixins/_buttonInteractiveStates.scss |   2 +-
 .../mixins/buttonInteractiveStates.spec.ts    |   6 +-
 6 files changed, 103 insertions(+), 63 deletions(-)
 create mode 100644 .changeset/modern-melons-draw.md

diff --git a/.changeset/modern-melons-draw.md b/.changeset/modern-melons-draw.md
new file mode 100644
index 0000000000..8c7dfa0c17
--- /dev/null
+++ b/.changeset/modern-melons-draw.md
@@ -0,0 +1,6 @@
+---
+"@justeattakeaway/pie-button": minor
+---
+
+[Changed] - Styles now use classmap
+[Fixed] - Fixed background colour when button is in `xsmall` or `small` size and responsive mode is true, where the bg-color wasn't updating to orange as required
diff --git a/packages/components/pie-button/src/button.scss b/packages/components/pie-button/src/button.scss
index 632e407ac4..ed949dd725 100644
--- a/packages/components/pie-button/src/button.scss
+++ b/packages/components/pie-button/src/button.scss
@@ -1,14 +1,13 @@
 @use '@justeattakeaway/pie-css/scss' as p;
-
-$breakpoint-wide: 768px;
+@use '@justeattakeaway/pie-css/scss/settings' as *;
 
 /**
 * Mixin for adding the responsive behaviour.
 * Takes in the the particular settings for the wide breakpoint.
 */
 @mixin responsive-wide {
-    &[isResponsive] {
-        @media (min-width: $breakpoint-wide) {
+    &.o-btn--responsive {
+        @include media('>md') {
             @content;
         }
     }
@@ -94,12 +93,14 @@ $breakpoint-wide: 768px;
     // used to specify whether the button should be full width or not
     inline-size: var(--btn-inline-size);
 
-    // Variant
-    &[variant='primary'] {
+    // ************************
+    // Button Variant Modifiers
+    // ************************
+    &.o-btn--primary {
         @include p.button-interactive-states('--dt-color-interactive-brand');
 
-        &[size='xsmall'],
-        &[size='small-productive'] {
+        &.o-btn--xsmall,
+        &.o-btn--small-productive {
             /**
             * Where the font-size is smaller,
             * update the button backgrounds so that the text is accessible
@@ -108,16 +109,27 @@ $breakpoint-wide: 768px;
 
             @include p.button-interactive-states('--dt-color-interactive-primary', 'inverse');
         }
+
+        // This is to handle the background colour change getting overridden above, but then being put in responsive mode
+        // can't use :not for this unfortunately, as then the smaller narrow state would lose its background colour too
+        &.o-btn--xsmall.o-btn--expressive,
+        &.o-btn--small-productive {
+            @include responsive-wide {
+                --btn-bg-color: var(--dt-color-interactive-brand);
+
+                @include p.button-interactive-states('--dt-color-interactive-brand');
+            }
+        }
     }
 
-    &[variant='secondary'] {
+    &.o-btn--secondary {
         --btn-bg-color: var(--dt-color-interactive-secondary);
         --btn-text-color: var(--dt-color-content-interactive-secondary);
 
         @include p.button-interactive-states('--dt-color-interactive-secondary');
     }
 
-    &[variant='outline'] {
+    &.o-btn--outline {
         --btn-bg-color: transparent;
         --btn-text-color: var(--dt-color-content-interactive-secondary);
 
@@ -128,7 +140,7 @@ $breakpoint-wide: 768px;
         @include p.button-interactive-states('--dt-color-black', 'transparent');
     }
 
-    &[variant='ghost'] {
+    &.o-btn--ghost {
         --btn-bg-color: transparent;
         --btn-text-color: var(--dt-color-content-link);
 
@@ -137,15 +149,15 @@ $breakpoint-wide: 768px;
         @include p.button-interactive-states('--dt-color-black', 'transparent');
     }
 
-    &[variant='inverse'] {
+    &.o-btn--inverse {
         --btn-bg-color: var(--dt-color-interactive-inverse);
         --btn-text-color: var(--dt-color-content-interactive-secondary);
 
         @include p.button-interactive-states('--dt-color-interactive-inverse');
     }
 
-    &[variant='ghost-inverse'],
-    &[variant='outline-inverse'] {
+    &.o-btn--ghost-inverse,
+    &.o-btn--outline-inverse {
         --btn-bg-color: transparent;
         --btn-text-color: var(--dt-color-content-interactive-primary);
 
@@ -154,17 +166,17 @@ $breakpoint-wide: 768px;
         @include p.button-interactive-states('--dt-color-container-default', 'transparent');
     }
 
-    &[variant='outline-inverse']:not([disabled]) {
+    &.o-btn--outline-inverse:not([disabled]) {
         border: 1px solid var(--dt-color-border-strong);
     }
 
-    &[variant='destructive'] {
+    &.o-btn--destructive {
         --btn-bg-color: var(--dt-color-support-error);
 
         @include p.button-interactive-states('--dt-color-support-error');
     }
 
-    &[variant='destructive-ghost'] {
+    &.o-btn--destructive-ghost {
         --btn-bg-color: transparent;
         --btn-text-color: var(--dt-color-content-interactive-error);
 
@@ -173,65 +185,80 @@ $breakpoint-wide: 768px;
         @include p.button-interactive-states('--dt-color-black', 'transparent');
     }
 
-    // Additional modifiers
-    &[isFullWidth] {
-        --btn-inline-size: 100%;
-    }
-
-    &[disabled] {
-        --btn-text-color: var(--dt-color-content-disabled) !important;
-
-        cursor: not-allowed;
-
-        // For every variant (except ghost variants) set the disabled background color
-        &:not([variant='ghost'], [variant='ghost-inverse'], [variant='destructive-ghost']) {
-            --btn-bg-color: var(--dt-color-disabled-01) !important;
-        }
-
-        // For outline variants, set the border to the disabled color
-        &[variant='outline'] {
-            border-color: var(--dt-color-disabled-01) !important;
-        }
-    }
-
-    &[size='xsmall'] {
+    // *********************
+    // Button Size Modifiers
+    // *********************
+    &.o-btn--xsmall {
         @include button-size(xsmall);
+
         @include responsive-wide {
             // productive is the default size when responsive is enabled
             @include button-size(small-productive);
 
-            &[responsiveSize='expressive'] {
+            &.o-btn--expressive {
                 @include button-size(small-expressive);
             }
         }
     }
 
-    &[size='small-expressive'] {
+    &.o-btn--small-expressive {
         @include button-size(small-expressive);
+
         @include responsive-wide {
             @include button-size(medium);
         }
     }
 
-    &[size='small-productive'] {
+    &.o-btn--small-productive {
         @include button-size(small-productive);
+
         @include responsive-wide {
             @include button-size(medium);
         }
     }
 
-    &[size='medium'] {
+    &.o-btn--medium {
         @include button-size(medium);
+
         @include responsive-wide {
             @include button-size(large);
         }
     }
 
-    &[size='large'] {
+    &.o-btn--large {
         @include button-size(large);
     }
 
-    &[isLoading] {
+    // ******************************
+    // Additional component modifiers
+    // ******************************
+    &.o-btn--fullWidth {
+        --btn-inline-size: 100%;
+    }
+
+    // **************
+    // Disabled state
+    // **************
+    &[disabled] {
+        --btn-text-color: var(--dt-color-content-disabled) !important;
+
+        cursor: not-allowed;
+
+        // For every variant (except ghost variants) set the disabled background color
+        &:not(.o-btn--ghost, .o-btn--ghost-inverse, .o-btn--destructive-ghost) {
+            --btn-bg-color: var(--dt-color-disabled-01) !important;
+        }
+
+        // For outline variants, set the border to the disabled color
+        &.o-btn--outline {
+            border-color: var(--dt-color-disabled-01) !important;
+        }
+    }
+
+    // *************
+    // Loading state
+    // *************
+    &.is-loading {
         & > *:not(pie-spinner) {
             visibility: hidden;
         }
@@ -241,6 +268,9 @@ $breakpoint-wide: 768px;
         }
     }
 
+    // ************
+    // Focus styles
+    // ************
     &:focus-visible {
         @include p.focus;
     }
diff --git a/packages/components/pie-button/src/index.ts b/packages/components/pie-button/src/index.ts
index a0806de40e..fa7079dbf0 100644
--- a/packages/components/pie-button/src/index.ts
+++ b/packages/components/pie-button/src/index.ts
@@ -1,8 +1,8 @@
 import {
     LitElement, html, unsafeCSS, nothing, PropertyValues, TemplateResult,
 } from 'lit';
+import { classMap } from 'lit/directives/class-map.js';
 import { property } from 'lit/decorators.js';
-import { ifDefined } from 'lit/directives/if-defined.js';
 import { validPropertyValues, defineCustomElement, FormControlMixin } from '@justeattakeaway/pie-webc-core';
 import {
     ButtonProps, sizes, types, variants, iconPlacements, defaultProps,
@@ -226,18 +226,22 @@ export class PieButton extends FormControlMixin(LitElement) implements ButtonPro
             responsiveSize,
         } = this;
 
+        const classes = {
+            'o-btn': true,
+            'o-btn--fullWidth': isFullWidth,
+            'o-btn--responsive': isResponsive,
+            [`o-btn--${responsiveSize}`]: Boolean(isResponsive && responsiveSize),
+            [`o-btn--${variant}`]: true,
+            [`o-btn--${size}`]: true,
+            'is-loading': isLoading,
+        };
+
         return html`
             <button
                 @click=${this._handleClick}
-                class="o-btn"
+                class=${classMap(classes)}
                 type=${type || 'submit'}
-                variant=${variant || 'primary'}
-                size=${size || 'medium'}
-                responsiveSize=${ifDefined(responsiveSize)}
-                ?disabled=${disabled}
-                ?isFullWidth=${isFullWidth}
-                ?isResponsive=${isResponsive}
-                ?isLoading=${isLoading}>
+                ?disabled=${disabled}>
                     ${isLoading ? this.renderSpinner() : nothing}
                     ${iconPlacement === 'leading' ? html`<slot name="icon"></slot>` : nothing}
                     <slot></slot>
diff --git a/packages/components/pie-button/test/component/pie-button.spec.ts b/packages/components/pie-button/test/component/pie-button.spec.ts
index 3a92b4a698..1641e4ae41 100644
--- a/packages/components/pie-button/test/component/pie-button.spec.ts
+++ b/packages/components/pie-button/test/component/pie-button.spec.ts
@@ -555,7 +555,7 @@ test.describe('props', () => {
                 );
 
                 await expect(component.locator('button'))
-                    .not.toHaveAttribute('isResponsive', ''); // TODO: Remove the empty argument once we upgrade Playwright to 1.39 or above
+                    .not.toHaveClass(/o-btn--responsive/);
             });
         });
         test.describe('when set to true', () => {
@@ -577,7 +577,7 @@ test.describe('props', () => {
                 );
 
                 await expect(component.locator('button'))
-                    .toHaveAttribute('isResponsive', ''); // TODO: Remove the empty argument once we upgrade Playwright to 1.39 or above
+                    .toHaveClass(/o-btn--responsive/);
             });
 
             sizes.forEach(({ sizeName, responsiveSize }) => {
@@ -617,7 +617,7 @@ test.describe('props', () => {
                 );
 
                 await expect(component.locator('button'))
-                    .not.toHaveAttribute('responsiveSize', ''); // TODO: Remove the empty argument once we upgrade Playwright to 1.39 or above
+                    .not.toHaveClass([/o-btn--productive/, /o-btn--expressive/]);
             });
         });
 
@@ -642,7 +642,7 @@ test.describe('props', () => {
                     );
 
                     await expect(component.locator('button'))
-                        .toHaveAttribute('responsiveSize', 'expressive');
+                        .toHaveClass([/o-btn--expressive/]);
                 });
             });
         });
@@ -667,7 +667,7 @@ test.describe('props', () => {
                 );
 
                 await expect(component.locator('button'))
-                    .toHaveAttribute('responsiveSize', 'productive');
+                    .toHaveClass(/o-btn--productive/);
             });
         });
     });
diff --git a/packages/tools/pie-css/scss/mixins/_buttonInteractiveStates.scss b/packages/tools/pie-css/scss/mixins/_buttonInteractiveStates.scss
index 116e0f1abc..72c02d893b 100644
--- a/packages/tools/pie-css/scss/mixins/_buttonInteractiveStates.scss
+++ b/packages/tools/pie-css/scss/mixins/_buttonInteractiveStates.scss
@@ -28,7 +28,7 @@
     }
 
     &:active:not(:disabled),
-    &[isLoading]:not(:disabled) {
+    &.is-loading:not(:disabled) {
         @if $mode == 'alt' {
             --active-modifier: calc(-1 * var(--dt-color-active-02));
         } @else if $mode == 'inverse' {
diff --git a/packages/tools/pie-css/test/scss/unit/mixins/buttonInteractiveStates.spec.ts b/packages/tools/pie-css/test/scss/unit/mixins/buttonInteractiveStates.spec.ts
index 7f7c06462e..85449ddad4 100644
--- a/packages/tools/pie-css/test/scss/unit/mixins/buttonInteractiveStates.spec.ts
+++ b/packages/tools/pie-css/test/scss/unit/mixins/buttonInteractiveStates.spec.ts
@@ -24,7 +24,7 @@ describe('mixins.button-interactive-states', () => {
         }
 
         .button:active:not(:disabled),
-        .button[isLoading]:not(:disabled) {
+        .button.is-loading:not(:disabled) {
           --active-modifier: calc(-1 * var(--dt-color-active-01));
           --btn-bg-color: hsl(var(primary-h), var(primary-s), calc(var(primary-l) + var(--active-modifier)));
         }
@@ -54,7 +54,7 @@ describe('mixins.button-interactive-states', () => {
         }
 
         .button:active:not(:disabled),
-        .button[isLoading]:not(:disabled) {
+        .button.is-loading:not(:disabled) {
           --active-modifier: calc(-1 * var(--dt-color-active-02));
           --btn-bg-color: hsl(var(primary-h), var(primary-s), calc(var(primary-l) + var(--active-modifier)));
         }
@@ -85,7 +85,7 @@ describe('mixins.button-interactive-states', () => {
         }
 
         .button:active:not(:disabled),
-        .button[isLoading]:not(:disabled) {
+        .button.is-loading:not(:disabled) {
           --active-modifier: calc(-1 * var(--dt-color-active-01));
           --active-modifier: var(--dt-color-active-01);
           --btn-bg-color: hsl(var(primary-h), var(primary-s), var(primary-l), var(--active-modifier));

From d47b4cc02465db340b8be94f5e24a09d363713c8 Mon Sep 17 00:00:00 2001
From: Mariya Radchuk <maryia.radchuk@justeattakeaway.com>
Date: Wed, 24 Jul 2024 17:10:34 +0200
Subject: [PATCH 2/4] feat(pie-checkbox-group): DSW-2182 checkbox group styling
 (#1618)

---
 .changeset/light-badgers-suffer.md            |   7 +
 .changeset/polite-carpets-mix.md              |   7 +
 .../stories/pie-checkbox-group.stories.ts     |  50 +++---
 .../stories/pie-checkbox.stories.ts           |  26 ++-
 .../components/pie-checkbox-group/README.md   |  30 +---
 .../src/checkbox-group.scss                   |  52 ++++++
 .../components/pie-checkbox-group/src/defs.ts |   8 +-
 .../pie-checkbox-group/src/index.ts           |  15 +-
 .../test/visual/pie-checkbox-group.spec.ts    | 161 +++++++++++++++++-
 packages/components/pie-checkbox/README.md    |  15 +-
 .../components/pie-checkbox/src/checkbox.scss |  12 +-
 packages/components/pie-checkbox/src/defs.ts  |   7 +-
 packages/components/pie-checkbox/src/index.ts |  12 +-
 .../test/visual/pie-checkbox.spec.ts          |  35 ++--
 14 files changed, 330 insertions(+), 107 deletions(-)
 create mode 100644 .changeset/light-badgers-suffer.md
 create mode 100644 .changeset/polite-carpets-mix.md

diff --git a/.changeset/light-badgers-suffer.md b/.changeset/light-badgers-suffer.md
new file mode 100644
index 0000000000..b1a24cd8e0
--- /dev/null
+++ b/.changeset/light-badgers-suffer.md
@@ -0,0 +1,7 @@
+---
+"@justeattakeaway/pie-checkbox": minor
+---
+
+[Changed] - Replaced label prop with a slot to give consumers the option to easily customize the label.
+[Changed] - Fixed the rtl styles for the tick/dash for checked/indeterminate state.
+[Changed] - Updated visual tests.
diff --git a/.changeset/polite-carpets-mix.md b/.changeset/polite-carpets-mix.md
new file mode 100644
index 0000000000..509537dbfb
--- /dev/null
+++ b/.changeset/polite-carpets-mix.md
@@ -0,0 +1,7 @@
+---
+"@justeattakeaway/pie-checkbox-group": minor
+---
+
+[Added] - New `isInline` prop.
+[Added] - Styling for Checkbox Group.
+[Added] - Visual tests.
diff --git a/apps/pie-storybook/stories/pie-checkbox-group.stories.ts b/apps/pie-storybook/stories/pie-checkbox-group.stories.ts
index 4d46b694eb..6b9c1ae268 100644
--- a/apps/pie-storybook/stories/pie-checkbox-group.stories.ts
+++ b/apps/pie-storybook/stories/pie-checkbox-group.stories.ts
@@ -29,6 +29,13 @@ const checkboxGroupStoryMeta: CheckboxGroupStoryMeta = {
             description: 'The visible label for the checkbox group.',
             control: 'text',
         },
+        isInline: {
+            description: 'Inline (horizontal) positioning of checkbox items.',
+            control: 'boolean',
+            defaultValue: {
+                summary: defaultArgs.isInline,
+            },
+        },
         status: {
             description: 'The status of the checkbox group component / assistive text. Can be default, success or error.',
             control: 'select',
@@ -66,32 +73,31 @@ export default checkboxGroupStoryMeta;
 const Template = ({
     name,
     label,
+    isInline,
     assistiveText,
     status,
     disabled,
 }: CheckboxGroupProps) => html`
-    <p>Please note, the checkboxes are separate components. See
-    <pie-link href="/?path=/story/checkbox--default">pie-checkbox</pie-link>.</p>
-    <pie-checkbox-group
-        name="${ifDefined(name)}"
-        label="${ifDefined(label)}"
-        assistiveText="${ifDefined(assistiveText)}"
-        status=${ifDefined(status)}
-        ?disabled="${disabled}"
-    >
-        <pie-checkbox
-            name="checkbox-one"
-            label="checkbox 1">
-        </pie-checkbox>
-        <pie-checkbox
-            name="checkbox-two"
-            label="checkbox 2">
-        </pie-checkbox>
-        <pie-checkbox
-            name="checkbox-three"
-            label="checkbox 3">
-        </pie-checkbox>
-    </pie-checkbox-group>
+    <div style="max-width: 400px">
+        <p>Please note, the checkboxes are separate components. See
+        <pie-link href="/?path=/story/checkbox--default">pie-checkbox</pie-link>.</p>
+        <pie-checkbox-group
+            name="${ifDefined(name)}"
+            label="${ifDefined(label)}"
+            assistiveText="${ifDefined(assistiveText)}"
+            ?isInline=${isInline}
+            status=${ifDefined(status)}
+            ?disabled="${disabled}"
+        >
+            <pie-checkbox name="checkbox-one">checkbox 1</pie-checkbox>
+            <pie-checkbox name="checkbox-two">checkbox 2</pie-checkbox>
+            <pie-checkbox name="checkbox-three">checkbox 3 longer label</pie-checkbox>
+            <pie-checkbox name="checkbox-three">checkbox 4</pie-checkbox>
+            <pie-checkbox name="checkbox-three">checkbox 5 even longer label: Lorem ipsum dolor sit amet,
+            consectetur adipiscing elit.</pie-checkbox>
+            <pie-checkbox name="checkbox-three">checkbox 6</pie-checkbox>
+        </pie-checkbox-group>
+    </div>
 `;
 
 export const Default = createStory<CheckboxGroupProps>(Template, defaultArgs)();
diff --git a/apps/pie-storybook/stories/pie-checkbox.stories.ts b/apps/pie-storybook/stories/pie-checkbox.stories.ts
index 6d25ff131c..2a1b577ebc 100644
--- a/apps/pie-storybook/stories/pie-checkbox.stories.ts
+++ b/apps/pie-storybook/stories/pie-checkbox.stories.ts
@@ -7,19 +7,14 @@ import { CheckboxProps, defaultProps, statusTypes } from '@justeattakeaway/pie-c
 
 import { action } from '@storybook/addon-actions';
 import { type StoryMeta } from '../types';
-import { createStory, type TemplateFunction } from '../utilities';
+import { createStory, type TemplateFunction, sanitizeAndRenderHTML } from '../utilities';
 
 type CheckboxStoryMeta = StoryMeta<CheckboxProps>;
 
 const defaultArgs: CheckboxProps = {
     ...defaultProps,
     name: 'name',
-    label: 'Label',
-    checked: false,
-    defaultChecked: false,
-    disabled: false,
-    indeterminate: false,
-    required: false,
+    slot: 'Label',
 };
 
 const checkboxStoryMeta: CheckboxStoryMeta = {
@@ -39,12 +34,9 @@ const checkboxStoryMeta: CheckboxStoryMeta = {
             },
         },
 
-        label: {
-            description: 'The visible label for the checkbox',
+        slot: {
+            description: 'Content to place as a checkbox label',
             control: 'text',
-            defaultValue: {
-                summary: defaultArgs.label,
-            },
         },
 
         checked: {
@@ -118,7 +110,6 @@ export default checkboxStoryMeta;
 const Template = ({
     value,
     name,
-    label,
     checked,
     defaultChecked,
     disabled,
@@ -126,6 +117,7 @@ const Template = ({
     required,
     assistiveText,
     status,
+    slot,
 }: CheckboxProps) => {
     function onChange (event: CustomEvent) {
         action('change')({
@@ -137,7 +129,6 @@ const Template = ({
         <pie-checkbox
             .value="${value}"
             name="${ifDefined(name)}"
-            label="${ifDefined(label)}"
             ?checked="${checked}"
             ?defaultChecked="${defaultChecked}"
             ?disabled="${disabled}"
@@ -146,6 +137,7 @@ const Template = ({
             @change="${onChange}"
             assistiveText="${ifDefined(assistiveText)}"
             status=${ifDefined(status)}>
+            ${sanitizeAndRenderHTML(slot)}
         </pie-checkbox>
     `;
 };
@@ -160,6 +152,7 @@ const ExampleFormTemplate: TemplateFunction<CheckboxProps> = ({
     required,
     assistiveText,
     status,
+    slot,
 }: CheckboxProps) => {
     function onChange (event: CustomEvent) {
         action('change')({
@@ -172,7 +165,6 @@ const ExampleFormTemplate: TemplateFunction<CheckboxProps> = ({
         <pie-checkbox
             .value="${value}"
             name="${ifDefined(name)}"
-            label="Pie Checkbox"
             ?checked="${checked}"
             ?defaultChecked="${defaultChecked}"
             ?disabled="${disabled}"
@@ -180,7 +172,9 @@ const ExampleFormTemplate: TemplateFunction<CheckboxProps> = ({
             ?required="${required}"
             @change="${onChange}"
             assistiveText="${ifDefined(assistiveText)}"
-            status=${ifDefined(status)}></pie-checkbox>
+            status=${ifDefined(status)}>
+            ${sanitizeAndRenderHTML(slot)}
+        </pie-checkbox>
         <button type="reset">Reset</button>
         <button type="submit">Submit</button>
         <script>
diff --git a/packages/components/pie-checkbox-group/README.md b/packages/components/pie-checkbox-group/README.md
index f1f9e571c3..8d8c69814e 100644
--- a/packages/components/pie-checkbox-group/README.md
+++ b/packages/components/pie-checkbox-group/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>
 ```
 
diff --git a/packages/components/pie-checkbox-group/src/checkbox-group.scss b/packages/components/pie-checkbox-group/src/checkbox-group.scss
index 6ffaedad64..fbc720967e 100644
--- a/packages/components/pie-checkbox-group/src/checkbox-group.scss
+++ b/packages/components/pie-checkbox-group/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)));
+    }
+}
diff --git a/packages/components/pie-checkbox-group/src/defs.ts b/packages/components/pie-checkbox-group/src/defs.ts
index 90a9b7b329..f102911a9a 100644
--- a/packages/components/pie-checkbox-group/src/defs.ts
+++ b/packages/components/pie-checkbox-group/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.
      */
@@ -36,9 +41,10 @@ export interface CheckboxGroupProps {
  */
 export const ON_CHECKBOX_GROUP_DISABLED = 'pie-checkbox-group-disabled';
 
-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,
 };
diff --git a/packages/components/pie-checkbox-group/src/index.ts b/packages/components/pie-checkbox-group/src/index.ts
index 9d302749c5..48f3501e7a 100644
--- a/packages/components/pie-checkbox-group/src/index.ts
+++ b/packages/components/pie-checkbox-group/src/index.ts
@@ -9,6 +9,7 @@ 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,
@@ -26,6 +27,7 @@ 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.
  */
 export class PieCheckboxGroup extends FormControlMixin(RtlMixin(LitElement)) implements CheckboxGroupProps {
@@ -38,6 +40,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;
@@ -75,18 +80,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`
diff --git a/packages/components/pie-checkbox-group/test/visual/pie-checkbox-group.spec.ts b/packages/components/pie-checkbox-group/test/visual/pie-checkbox-group.spec.ts
index 57e9c5c0a9..ae3cdf77ed 100644
--- a/packages/components/pie-checkbox-group/test/visual/pie-checkbox-group.spec.ts
+++ b/packages/components/pie-checkbox-group/test/visual/pie-checkbox-group.spec.ts
@@ -1,14 +1,159 @@
 
 import { test } from '@sand4rt/experimental-ct-web';
 import percySnapshot from '@percy/playwright';
-import { PieCheckboxGroup, CheckboxGroupProps } from '../../src/index.ts';
+import type {
+    PropObject, WebComponentPropValues, WebComponentTestInput,
+} from '@justeattakeaway/pie-webc-testing/src/helpers/defs.ts';
+import {
+    getAllPropCombinations, splitCombinationsByPropertyValue,
+} from '@justeattakeaway/pie-webc-testing/src/helpers/get-all-prop-combos.ts';
+import { createTestWebComponent } from '@justeattakeaway/pie-webc-testing/src/helpers/rendering.ts';
+import { WebComponentTestWrapper } from '@justeattakeaway/pie-webc-testing/src/helpers/components/web-component-test-wrapper/WebComponentTestWrapper.ts';
+import { percyWidths } from '@justeattakeaway/pie-webc-testing/src/percy/breakpoints.ts';
+import { setRTL } from '@justeattakeaway/pie-webc-testing/src/helpers/set-rtl-direction.ts';
+import { PieAssistiveText } from '@justeattakeaway/pie-assistive-text';
+import { PieCheckbox } from '@justeattakeaway/pie-checkbox';
+import { PieCheckboxGroup } from '../../src/index.ts';
+import { statusTypes } from '../../src/defs.ts';
 
-test.describe('PieCheckboxGroup - Visual tests`', () => {
-    test('should display the PieCheckboxGroup component successfully', async ({ page, mount }) => {
-        await mount(PieCheckboxGroup, {
-            props: {} as CheckboxGroupProps,
-        });
+const readingDirections = ['LTR', 'RTL'];
 
-        await percySnapshot(page, 'PieCheckboxGroup - Visual Test');
-    });
+const props: PropObject = {
+    label: ['Group Label', ''],
+    status: statusTypes,
+    isInline: [true, false],
+    disabled: [true, false],
+};
+
+const renderTestPieCheckboxGroup = (propVals: WebComponentPropValues) => {
+    let attributes = '';
+
+    if (propVals.label) attributes += ` label="${propVals.label}"`;
+    if (propVals.assistiveText) attributes += ` assistiveText="${propVals.assistiveText}"`;
+    if (propVals.isInline) attributes += ` isInline="${propVals.isInline}"`;
+    if (propVals.disabled) attributes += ` disabled="${propVals.disabled}"`;
+
+    return `
+    <pie-checkbox-group ${attributes} status="${propVals.status}">
+        <pie-checkbox>Label</pie-checkbox>
+        <pie-checkbox checked>Label</pie-checkbox>
+        <pie-checkbox>Label</pie-checkbox>
+    </pie-checkbox-group>`;
+};
+
+const componentPropsMatrix: WebComponentPropValues[] = getAllPropCombinations(props);
+const componentPropsMatrixByInlineState: Record<string, WebComponentPropValues[]> = splitCombinationsByPropertyValue(componentPropsMatrix, 'isInline');
+const componentVariants: string[] = Object.keys(componentPropsMatrixByInlineState);
+
+test.beforeEach(async ({ mount }, testInfo) => {
+    testInfo.setTimeout(testInfo.timeout + 40000);
+
+    // This ensures the checkbox component is registered in the DOM for each test.
+    // It appears to add them to a Playwright cache which we understand is required for the tests to work correctly.
+    const checkboxPropComponent = await mount(PieCheckboxGroup);
+    await checkboxPropComponent.unmount();
+
+    const assistiveTextComponent = await mount(PieAssistiveText);
+    await assistiveTextComponent.unmount();
+
+    const checkboxComponent = await mount(PieCheckbox);
+    await checkboxComponent.unmount();
 });
+
+componentVariants.forEach((variant) => test(`should render all prop variations for the isInline state: ${variant}`, async ({ page, mount }) => {
+    for (const combo of componentPropsMatrixByInlineState[variant]) {
+        const testComponent: WebComponentTestInput = createTestWebComponent(combo, renderTestPieCheckboxGroup);
+        const propKeyValues = `
+            isInline: ${testComponent.propValues.isInline},
+            disabled: ${testComponent.propValues.disabled},
+            label: ${testComponent.propValues.label ? 'with label' : 'no label'},
+            status: ${testComponent.propValues.status}`;
+
+        await mount(
+            WebComponentTestWrapper,
+            {
+                props: { propKeyValues },
+                slots: {
+                    component: testComponent.renderedString.trim(),
+                },
+            },
+        );
+    }
+
+    await percySnapshot(page, `PIE Checkbox Group - isInline: ${variant}`, percyWidths);
+}));
+
+for (const dir of readingDirections) {
+    test(`Assistive text and statuses - ${dir}`, async ({ mount, page }) => {
+        if (dir === 'RTL') {
+            setRTL(page);
+        }
+
+        // Assistive text with no status
+        let testComponent: WebComponentTestInput = createTestWebComponent({ assistiveText: 'Assistive text', label: 'Group label' }, renderTestPieCheckboxGroup);
+        let propKeyValues = `assistiveText: ${testComponent.propValues.assistiveText}, label: ${testComponent.propValues.label}`;
+
+        await mount(
+            WebComponentTestWrapper,
+            {
+                props: { propKeyValues },
+                slots: {
+                    component: testComponent.renderedString.trim(),
+                },
+            },
+        );
+
+        // Error + assistive text
+        testComponent = createTestWebComponent({ assistiveText: 'Error text', label: 'Group label', status: 'error' }, renderTestPieCheckboxGroup);
+        propKeyValues = `assistiveText: ${testComponent.propValues.assistiveText}, label: ${testComponent.propValues.label}, status: ${testComponent.propValues.status}`;
+
+        await mount(
+            WebComponentTestWrapper,
+            {
+                props: { propKeyValues },
+                slots: {
+                    component: testComponent.renderedString.trim(),
+                },
+            },
+        );
+
+        // Success + assistive text
+        testComponent = createTestWebComponent({ assistiveText: 'Success text', label: 'Group label', status: 'success' }, renderTestPieCheckboxGroup);
+        propKeyValues = `assistiveText: ${testComponent.propValues.assistiveText}, label: ${testComponent.propValues.label}, status: ${testComponent.propValues.status}`;
+
+        await mount(
+            WebComponentTestWrapper,
+            {
+                props: { propKeyValues },
+                slots: {
+                    component: testComponent.renderedString.trim(),
+                },
+            },
+        );
+
+        // Success + assistive text + isInline
+        testComponent = createTestWebComponent({
+            assistiveText: 'Success text',
+            label: 'Group label',
+            status: 'success',
+            isInline: true,
+        }, renderTestPieCheckboxGroup);
+        propKeyValues = `
+            assistiveText: ${testComponent.propValues.assistiveText},
+            label: ${testComponent.propValues.label},
+            status: ${testComponent.propValues.status},
+            isInline: ${testComponent.propValues.isInline}`;
+
+        await mount(
+            WebComponentTestWrapper,
+            {
+                props: { propKeyValues },
+                slots: {
+                    component: testComponent.renderedString.trim(),
+                },
+            },
+        );
+
+        await percySnapshot(page, `PIE Checkbox Group - Assistive text and statuses - ${dir}`, percyWidths);
+    });
+}
diff --git a/packages/components/pie-checkbox/README.md b/packages/components/pie-checkbox/README.md
index 611d22d104..3f0f714335 100644
--- a/packages/components/pie-checkbox/README.md
+++ b/packages/components/pie-checkbox/README.md
@@ -77,7 +77,6 @@ import { PieCheckbox } from '@justeattakeaway/pie-checkbox/dist/react';
 | `name` | `string` | - | The name of the checkbox (used as a key/value pair with `value`). This is required in order to work properly with forms. |
 | `value` | `string`  `'on'` | The value of the input (used as a key/value pair in HTML forms with `name`). If not passed falls back to the html default value "on". |
 | `required` | `boolean` | `false` | If true, the checkbox is required to be checked before submitting the form. If it is not in checked state, the component validity state will be invalid. |
-| `label` | `string` | `''` | Text associated with the checkbox. If there is no label to provide, make sure to pass aria-label, aria-labelledby or aria-describedby attributes instead. |
 | `disabled` | `boolean` | `false` | Indicates whether or not the checkbox is disabled. |
 | `checked` | `boolean` | `false` | Controls whether or not the checkbox is checked. |
 | `defaultChecked` | `boolean` | `false` | Sets the default checked state for the checkbox. This does not directly set the initial checked state when the page loads, use `checked` for that. If the checkbox is inside a form which is reset, the `checked` state will be updated to match `defaultChecked`. |
@@ -89,16 +88,14 @@ In your markup or JSX, you can then use these to set the properties for the `pie
 
 ```html
 <!-- Native HTML -->
-<pie-checkbox
-    name="mycheckbox"
-    label="Checkbox Label">
-</pie-checkbox>
+<pie-checkbox name="mycheckbox">Label</pie-checkbox>
+
+<!-- Without a label it is necessary to pass aria-label or aria-labelledby attributes to the component  -->
+<pie-checkbox name="mycheckbox" aria-label="Label"></pie-checkbox>
 
 <!-- JSX -->
-<PieCheckbox
-    name="mycheckbox"
-    label="Checkbox Label">
-</PieCheckbox>
+<PieCheckbox name="mycheckbox">Label</PieCheckbox>
+<PieCheckbox name="mycheckbox" aria-label="Label"></PieCheckbox>
 ```
 
 ## Events
diff --git a/packages/components/pie-checkbox/src/checkbox.scss b/packages/components/pie-checkbox/src/checkbox.scss
index dc3cfe75f4..7755e1b787 100644
--- a/packages/components/pie-checkbox/src/checkbox.scss
+++ b/packages/components/pie-checkbox/src/checkbox.scss
@@ -134,6 +134,11 @@
         }
     }
 
+    &[data-pie-checked][isRtl]:before {
+        left: unset;
+        right: 50%;
+    }
+
     &[data-pie-indeterminate] {
         &:not([data-pie-disabled]) {
             --checkbox-bg-color: var(--dt-color-interactive-brand);
@@ -179,13 +184,18 @@
     background-color: white;
 }
 
+.c-checkbox-tick[isRtl]:after {
+    left: unset;
+    right: 14%;
+}
+
 .c-checkbox {
     --checkbox-height: 24px;
     --checkbox-width: 24px;
     --checkbox-radius: var(--dt-radius-rounded-a);
     --checkbox-margin: 1px;
     --checkbox-gap: var(--dt-spacing-b);
-    --checkbox-font-size: var(--dt-font-body-l-size);
+    --checkbox-font-size: p.font-size(--dt-font-body-l-size);
     --checkbox-font-weight: var(--dt-font-weight-regular);
     --checkbox-bg-color: var(--dt-color-container-default);
     --checkbox-border-color: var(--dt-color-interactive-form);
diff --git a/packages/components/pie-checkbox/src/defs.ts b/packages/components/pie-checkbox/src/defs.ts
index 9d12830ac7..2c585b5f62 100644
--- a/packages/components/pie-checkbox/src/defs.ts
+++ b/packages/components/pie-checkbox/src/defs.ts
@@ -7,11 +7,6 @@ export interface CheckboxProps {
      */
     value?: string;
 
-    /**
-     * The label value of the component
-     */
-    label?: string;
-
     /**
      * The name of the checkbox (used as a key/value pair with `value`). This is required in order to work properly with forms.
      */
@@ -54,7 +49,7 @@ export interface CheckboxProps {
     status?: typeof statusTypes[number];
 }
 
-export type DefaultProps = ComponentDefaultProps<CheckboxProps, keyof Omit<CheckboxProps, 'label' | 'name' | 'assistiveText'>>;
+export type DefaultProps = ComponentDefaultProps<CheckboxProps, keyof Omit<CheckboxProps, 'name' | 'assistiveText'>>;
 
 export const defaultProps: DefaultProps = {
     // a default value for the html <input type="checkbox" /> value attribute.
diff --git a/packages/components/pie-checkbox/src/index.ts b/packages/components/pie-checkbox/src/index.ts
index 1ade8ef93b..6b2c850f9e 100644
--- a/packages/components/pie-checkbox/src/index.ts
+++ b/packages/components/pie-checkbox/src/index.ts
@@ -1,5 +1,5 @@
 import {
-    LitElement, html, unsafeCSS, PropertyValues, nothing,
+    LitElement, html, unsafeCSS, nothing,
 } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
@@ -25,6 +25,7 @@ const assistiveTextIdValue = 'assistive-text';
 
 /**
  * @tagname pie-checkbox
+ * @slot - Default slot
  * @event {CustomEvent} change - when checked state is changed.
  */
 export class PieCheckbox extends FormControlMixin(RtlMixin(LitElement)) implements CheckboxProps {
@@ -36,9 +37,6 @@ export class PieCheckbox extends FormControlMixin(RtlMixin(LitElement)) implemen
     @property({ type: String })
     public value = defaultProps.value;
 
-    @property({ type: String })
-    public label?: CheckboxProps['label'];
-
     @property({ type: String })
     public name?: CheckboxProps['name'];
 
@@ -149,7 +147,6 @@ export class PieCheckbox extends FormControlMixin(RtlMixin(LitElement)) implemen
             checked,
             value,
             name,
-            label,
             disabled,
             disabledByParent,
             required,
@@ -183,11 +180,14 @@ export class PieCheckbox extends FormControlMixin(RtlMixin(LitElement)) implemen
             <label for="inputId" data-test-id="checkbox-component">
                 <span
                     class="c-checkbox-tick"
+                    ?isRTL=${this.isRTL}
                     ?data-pie-checked=${checked}
                     ?data-pie-disabled=${componentDisabled}
                     data-pie-status=${!componentDisabled && status}
                     ?data-pie-indeterminate=${indeterminate && !checked}></span>
-                <span class="c-checkbox-text">${label}</span>
+                <span class="c-checkbox-text">
+                    <slot></slot>
+                </span>
             </label>
             ${assistiveText ? html`
                 <pie-assistive-text
diff --git a/packages/components/pie-checkbox/test/visual/pie-checkbox.spec.ts b/packages/components/pie-checkbox/test/visual/pie-checkbox.spec.ts
index 75713a228d..31fe4c3916 100644
--- a/packages/components/pie-checkbox/test/visual/pie-checkbox.spec.ts
+++ b/packages/components/pie-checkbox/test/visual/pie-checkbox.spec.ts
@@ -27,20 +27,17 @@ const props: PropObject = {
     checked: [true, false],
     disabled: [true, false],
     indeterminate: [true, false],
-    label: ['Label', ''],
-    assistiveText: ['Assistive text', ''],
 };
 
 const renderTestPieCheckbox = (propVals: WebComponentPropValues) => {
     let attributes = '';
 
-    if (propVals.label) attributes += ` label="${propVals.label}"`;
     if (propVals.assistiveText) attributes += ` assistiveText="${propVals.assistiveText}"`;
     if (propVals.indeterminate) attributes += ` indeterminate="${propVals.indeterminate}"`;
     if (propVals.disabled) attributes += ` disabled="${propVals.disabled}"`;
     if (propVals.checked) attributes += ` checked="${propVals.checked}"`;
 
-    return `<pie-checkbox${attributes} status="${propVals.status}"></pie-checkbox>`;
+    return `<pie-checkbox${attributes} status="${propVals.status}">Label</pie-checkbox>`;
 };
 
 const componentPropsMatrix: WebComponentPropValues[] = getAllPropCombinations(props);
@@ -65,10 +62,8 @@ componentVariants.forEach((variant) => test(`should render all prop variations f
         const propKeyValues = `
             checked: ${testComponent.propValues.checked},
             disabled: ${testComponent.propValues.disabled},
-            label: ${testComponent.propValues.label ? 'with label' : 'no label'},
             status: ${testComponent.propValues.status},
-            indeterminate: ${testComponent.propValues.indeterminate},
-            assistiveText: ${testComponent.propValues.assistiveText ? 'with assistive text' : 'no assistive text'}`;
+            indeterminate: ${testComponent.propValues.indeterminate}`;
 
         await mount(
             WebComponentTestWrapper,
@@ -91,8 +86,22 @@ for (const dir of readingDirections) {
         }
 
         // Assistive text with no status
-        let testComponent: WebComponentTestInput = createTestWebComponent({ assistiveText: 'Assistive text', label: 'String' }, renderTestPieCheckbox);
-        let propKeyValues = `assistiveText: ${testComponent.propValues.assistiveText}, label: ${testComponent.propValues.label}`;
+        let testComponent: WebComponentTestInput = createTestWebComponent({ assistiveText: 'Assistive text' }, renderTestPieCheckbox);
+        let propKeyValues = `assistiveText: ${testComponent.propValues.assistiveText}`;
+
+        await mount(
+            WebComponentTestWrapper,
+            {
+                props: { propKeyValues },
+                slots: {
+                    component: testComponent.renderedString.trim(),
+                },
+            },
+        );
+
+        // Assistive text with no status + indeterminate
+        testComponent = createTestWebComponent({ assistiveText: 'Assistive text', indeterminate: true }, renderTestPieCheckbox);
+        propKeyValues = `assistiveText: ${testComponent.propValues.assistiveText}, indeterminate: ${testComponent.propValues.indeterminate}`;
 
         await mount(
             WebComponentTestWrapper,
@@ -105,8 +114,8 @@ for (const dir of readingDirections) {
         );
 
         // Error + assistive text
-        testComponent = createTestWebComponent({ assistiveText: 'Error text', label: 'String', status: 'error' }, renderTestPieCheckbox);
-        propKeyValues = `assistiveText: ${testComponent.propValues.assistiveText}, label: ${testComponent.propValues.label}, status: ${testComponent.propValues.status}`;
+        testComponent = createTestWebComponent({ assistiveText: 'Error text', status: 'error' }, renderTestPieCheckbox);
+        propKeyValues = `assistiveText: ${testComponent.propValues.assistiveText}, status: ${testComponent.propValues.status}`;
 
         await mount(
             WebComponentTestWrapper,
@@ -119,8 +128,8 @@ for (const dir of readingDirections) {
         );
 
         // Success + assistive text
-        testComponent = createTestWebComponent({ assistiveText: 'Success text', label: 'String', status: 'success' }, renderTestPieCheckbox);
-        propKeyValues = `assistiveText: ${testComponent.propValues.assistiveText}, label: ${testComponent.propValues.label}, status: ${testComponent.propValues.status}`;
+        testComponent = createTestWebComponent({ assistiveText: 'Success text', status: 'success', checked: true }, renderTestPieCheckbox);
+        propKeyValues = `assistiveText: ${testComponent.propValues.assistiveText}, status: ${testComponent.propValues.status}, checked: ${testComponent.propValues.checked}`;
 
         await mount(
             WebComponentTestWrapper,

From 927b800ed2456c6db299694fbf850dea4aed34bd Mon Sep 17 00:00:00 2001
From: Mariya Radchuk <maryia.radchuk@justeattakeaway.com>
Date: Wed, 24 Jul 2024 17:33:57 +0200
Subject: [PATCH 3/4] feat(pie-webc): DSW-2182 isRtl attr changed to
 data-is-rtl (#1625)

* feat(pie-checkbox-group): DSW-2182 enabling/disabling children + aria attr updates

* feat(pie-checkbox-group): DSW-2182 checkbox-group styling

* feat(pie-webc): DSW-2182 isRtl attr changed to data-is-rtl
---
 .changeset/neat-cooks-pay.md                               | 7 +++++++
 packages/components/pie-checkbox/src/checkbox.scss         | 4 ++--
 packages/components/pie-checkbox/src/index.ts              | 3 ++-
 packages/components/pie-switch/src/index.ts                | 2 +-
 packages/components/pie-switch/src/switch.scss             | 2 +-
 .../components/pie-webc-core/src/mixins/rtl/rtlMixin.ts    | 6 +++---
 6 files changed, 16 insertions(+), 8 deletions(-)
 create mode 100644 .changeset/neat-cooks-pay.md

diff --git a/.changeset/neat-cooks-pay.md b/.changeset/neat-cooks-pay.md
new file mode 100644
index 0000000000..54ce33184a
--- /dev/null
+++ b/.changeset/neat-cooks-pay.md
@@ -0,0 +1,7 @@
+---
+"@justeattakeaway/pie-checkbox": patch
+"@justeattakeaway/pie-switch": patch
+"@justeattakeaway/pie-webc": patch
+---
+
+[Changed] - isRtl attr changed to data-is-rtl
diff --git a/packages/components/pie-checkbox/src/checkbox.scss b/packages/components/pie-checkbox/src/checkbox.scss
index 7755e1b787..b922f317ee 100644
--- a/packages/components/pie-checkbox/src/checkbox.scss
+++ b/packages/components/pie-checkbox/src/checkbox.scss
@@ -134,7 +134,7 @@
         }
     }
 
-    &[data-pie-checked][isRtl]:before {
+    &[data-pie-checked][data-is-rtl]:before {
         left: unset;
         right: 50%;
     }
@@ -184,7 +184,7 @@
     background-color: white;
 }
 
-.c-checkbox-tick[isRtl]:after {
+.c-checkbox-tick[data-is-rtl]:after {
     left: unset;
     right: 14%;
 }
diff --git a/packages/components/pie-checkbox/src/index.ts b/packages/components/pie-checkbox/src/index.ts
index 6b2c850f9e..f6cc18d52d 100644
--- a/packages/components/pie-checkbox/src/index.ts
+++ b/packages/components/pie-checkbox/src/index.ts
@@ -153,6 +153,7 @@ export class PieCheckbox extends FormControlMixin(RtlMixin(LitElement)) implemen
             indeterminate,
             assistiveText,
             status,
+            isRTL,
         } = this;
 
         const componentDisabled = disabled || disabledByParent;
@@ -180,7 +181,7 @@ export class PieCheckbox extends FormControlMixin(RtlMixin(LitElement)) implemen
             <label for="inputId" data-test-id="checkbox-component">
                 <span
                     class="c-checkbox-tick"
-                    ?isRTL=${this.isRTL}
+                    ?data-is-rtl=${isRTL}
                     ?data-pie-checked=${checked}
                     ?data-pie-disabled=${componentDisabled}
                     data-pie-status=${!componentDisabled && status}
diff --git a/packages/components/pie-switch/src/index.ts b/packages/components/pie-switch/src/index.ts
index 5ca99f66a0..adb93e19cf 100644
--- a/packages/components/pie-switch/src/index.ts
+++ b/packages/components/pie-switch/src/index.ts
@@ -181,7 +181,7 @@ export class PieSwitch extends FormControlMixin(RtlMixin(LitElement)) implements
         return html`
             <label
                 class="c-switch-wrapper"
-                ?isRTL=${isRTL}
+                ?data-is-rtl=${isRTL}
                 ?disabled=${disabled}>
                 ${labelPlacement === 'leading' ? this.renderSwitchLabel() : nothing}
                 <div
diff --git a/packages/components/pie-switch/src/switch.scss b/packages/components/pie-switch/src/switch.scss
index 19c7925266..84c256f3e7 100644
--- a/packages/components/pie-switch/src/switch.scss
+++ b/packages/components/pie-switch/src/switch.scss
@@ -136,7 +136,7 @@
     @include p.visually-hidden;
 }
 
-.c-switch-wrapper[isRTL] {
+.c-switch-wrapper[data-is-rtl] {
     .c-switch-control {
         position: absolute;
         left: initial;
diff --git a/packages/components/pie-webc-core/src/mixins/rtl/rtlMixin.ts b/packages/components/pie-webc-core/src/mixins/rtl/rtlMixin.ts
index 67ab3e3250..010d45d607 100644
--- a/packages/components/pie-webc-core/src/mixins/rtl/rtlMixin.ts
+++ b/packages/components/pie-webc-core/src/mixins/rtl/rtlMixin.ts
@@ -41,16 +41,16 @@ export interface RTLInterface {
  *
  * class MyStyledElement extends RtlMixin(LitElement) {
  *   render() {
- *     return html`<div class="foo" ?isRTL=${this.isRTL}>Content</div>`;
+ *     return html`<div class="foo" ?data-is-rtl=${this.isRTL}>Content</div>`;
  *   }
  * }
  *
  * customElements.define('my-styled-element', MyStyledElement);
  * ```
  *
- * The corresponding SCSS to leverage the `isRTL` attribute:
+ * The corresponding SCSS to leverage the `data-is-rtl` attribute:
  * ```scss
- * .foo[isRTL] {
+ * .foo[data-is-rtl] {
  *   background-color: red;
  *   text-align: right;
  * }

From e0c81fc92491f6aecfb95dcc347456305c7e1b4d Mon Sep 17 00:00:00 2001
From: pie-bot <136586628+pie-design-system-bot@users.noreply.github.com>
Date: Thu, 25 Jul 2024 10:42:20 +0100
Subject: [PATCH 4/4] Version Packages (#1623)

release: release packages with 'latest' tag

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 .changeset/light-badgers-suffer.md                 |  7 -------
 .changeset/modern-melons-draw.md                   |  6 ------
 .changeset/neat-cooks-pay.md                       |  7 -------
 .changeset/nervous-singers-give.md                 |  5 -----
 .changeset/polite-carpets-mix.md                   |  7 -------
 .changeset/six-ducks-kneel.md                      |  5 -----
 apps/examples/wc-angular12/CHANGELOG.md            |  7 +++++++
 apps/examples/wc-angular12/package.json            |  4 ++--
 apps/examples/wc-next10/CHANGELOG.md               |  7 +++++++
 apps/examples/wc-next10/package.json               |  4 ++--
 apps/examples/wc-next13/CHANGELOG.md               |  7 +++++++
 apps/examples/wc-next13/package.json               |  4 ++--
 apps/examples/wc-nuxt2/CHANGELOG.md                |  7 +++++++
 apps/examples/wc-nuxt2/package.json                |  4 ++--
 apps/examples/wc-nuxt3/CHANGELOG.md                |  7 +++++++
 apps/examples/wc-nuxt3/package.json                |  4 ++--
 apps/examples/wc-react17/CHANGELOG.md              | 11 +++++++++++
 apps/examples/wc-react17/package.json              |  4 ++--
 apps/examples/wc-react18/CHANGELOG.md              | 11 +++++++++++
 apps/examples/wc-react18/package.json              |  4 ++--
 apps/examples/wc-vanilla/CHANGELOG.md              |  7 +++++++
 apps/examples/wc-vanilla/package.json              |  4 ++--
 apps/examples/wc-vue3/CHANGELOG.md                 |  7 +++++++
 apps/examples/wc-vue3/package.json                 |  4 ++--
 apps/pie-storybook/CHANGELOG.md                    | 12 ++++++++++++
 apps/pie-storybook/package.json                    | 14 +++++++-------
 packages/components/pie-button/CHANGELOG.md        |  8 ++++++++
 packages/components/pie-button/package.json        |  2 +-
 .../components/pie-checkbox-group/CHANGELOG.md     |  9 +++++++++
 .../components/pie-checkbox-group/package.json     |  2 +-
 packages/components/pie-checkbox/CHANGELOG.md      | 13 +++++++++++++
 packages/components/pie-checkbox/package.json      |  2 +-
 packages/components/pie-cookie-banner/CHANGELOG.md |  9 +++++++++
 packages/components/pie-cookie-banner/package.json |  8 ++++----
 packages/components/pie-form-label/package.json    |  2 +-
 packages/components/pie-modal/CHANGELOG.md         |  7 +++++++
 packages/components/pie-modal/package.json         |  4 ++--
 packages/components/pie-switch/CHANGELOG.md        |  6 ++++++
 packages/components/pie-switch/package.json        |  2 +-
 packages/components/pie-webc/CHANGELOG.md          | 14 ++++++++++++++
 packages/components/pie-webc/package.json          | 14 +++++++-------
 41 files changed, 192 insertions(+), 80 deletions(-)
 delete mode 100644 .changeset/light-badgers-suffer.md
 delete mode 100644 .changeset/modern-melons-draw.md
 delete mode 100644 .changeset/neat-cooks-pay.md
 delete mode 100644 .changeset/nervous-singers-give.md
 delete mode 100644 .changeset/polite-carpets-mix.md
 delete mode 100644 .changeset/six-ducks-kneel.md

diff --git a/.changeset/light-badgers-suffer.md b/.changeset/light-badgers-suffer.md
deleted file mode 100644
index b1a24cd8e0..0000000000
--- a/.changeset/light-badgers-suffer.md
+++ /dev/null
@@ -1,7 +0,0 @@
----
-"@justeattakeaway/pie-checkbox": minor
----
-
-[Changed] - Replaced label prop with a slot to give consumers the option to easily customize the label.
-[Changed] - Fixed the rtl styles for the tick/dash for checked/indeterminate state.
-[Changed] - Updated visual tests.
diff --git a/.changeset/modern-melons-draw.md b/.changeset/modern-melons-draw.md
deleted file mode 100644
index 8c7dfa0c17..0000000000
--- a/.changeset/modern-melons-draw.md
+++ /dev/null
@@ -1,6 +0,0 @@
----
-"@justeattakeaway/pie-button": minor
----
-
-[Changed] - Styles now use classmap
-[Fixed] - Fixed background colour when button is in `xsmall` or `small` size and responsive mode is true, where the bg-color wasn't updating to orange as required
diff --git a/.changeset/neat-cooks-pay.md b/.changeset/neat-cooks-pay.md
deleted file mode 100644
index 54ce33184a..0000000000
--- a/.changeset/neat-cooks-pay.md
+++ /dev/null
@@ -1,7 +0,0 @@
----
-"@justeattakeaway/pie-checkbox": patch
-"@justeattakeaway/pie-switch": patch
-"@justeattakeaway/pie-webc": patch
----
-
-[Changed] - isRtl attr changed to data-is-rtl
diff --git a/.changeset/nervous-singers-give.md b/.changeset/nervous-singers-give.md
deleted file mode 100644
index a658957e79..0000000000
--- a/.changeset/nervous-singers-give.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"wc-react18": minor
----
-
-[Added] - pie-webc integration and switch to using vite to resolve bundling error
diff --git a/.changeset/polite-carpets-mix.md b/.changeset/polite-carpets-mix.md
deleted file mode 100644
index 509537dbfb..0000000000
--- a/.changeset/polite-carpets-mix.md
+++ /dev/null
@@ -1,7 +0,0 @@
----
-"@justeattakeaway/pie-checkbox-group": minor
----
-
-[Added] - New `isInline` prop.
-[Added] - Styling for Checkbox Group.
-[Added] - Visual tests.
diff --git a/.changeset/six-ducks-kneel.md b/.changeset/six-ducks-kneel.md
deleted file mode 100644
index 95da7c130f..0000000000
--- a/.changeset/six-ducks-kneel.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"wc-react17": minor
----
-
-[Added] - pie-webc integration to react app
diff --git a/apps/examples/wc-angular12/CHANGELOG.md b/apps/examples/wc-angular12/CHANGELOG.md
index 8ab2659a00..60d1fc6283 100644
--- a/apps/examples/wc-angular12/CHANGELOG.md
+++ b/apps/examples/wc-angular12/CHANGELOG.md
@@ -1,5 +1,12 @@
 # wc-angular12
 
+## 0.5.1
+
+### Patch Changes
+
+- Updated dependencies [[`927b800ed`](https://github.com/justeattakeaway/pie/commit/927b800ed2456c6db299694fbf850dea4aed34bd)]:
+  - @justeattakeaway/pie-webc@0.5.15
+
 ## 0.5.0
 
 ### Minor Changes
diff --git a/apps/examples/wc-angular12/package.json b/apps/examples/wc-angular12/package.json
index a7f8f57a21..122e2be6b5 100644
--- a/apps/examples/wc-angular12/package.json
+++ b/apps/examples/wc-angular12/package.json
@@ -1,6 +1,6 @@
 {
     "name": "wc-angular12",
-    "version": "0.5.0",
+    "version": "0.5.1",
     "private": true,
     "scripts": {
         "ng": "ng",
@@ -18,7 +18,7 @@
         "@angular/platform-browser-dynamic": "15.2.0",
         "@angular/router": "15.2.0",
         "@justeattakeaway/pie-css": "0.12.1",
-        "@justeattakeaway/pie-webc": "0.5.14",
+        "@justeattakeaway/pie-webc": "0.5.15",
         "rxjs": "7.8.0",
         "tslib": "2.3.0",
         "zone.js": "0.12.0"
diff --git a/apps/examples/wc-next10/CHANGELOG.md b/apps/examples/wc-next10/CHANGELOG.md
index 2c12f119ff..03d08dd3f9 100644
--- a/apps/examples/wc-next10/CHANGELOG.md
+++ b/apps/examples/wc-next10/CHANGELOG.md
@@ -1,5 +1,12 @@
 # wc-next10
 
+## 0.6.1
+
+### Patch Changes
+
+- Updated dependencies [[`927b800ed`](https://github.com/justeattakeaway/pie/commit/927b800ed2456c6db299694fbf850dea4aed34bd)]:
+  - @justeattakeaway/pie-webc@0.5.15
+
 ## 0.6.0
 
 ### Minor Changes
diff --git a/apps/examples/wc-next10/package.json b/apps/examples/wc-next10/package.json
index 9428044590..436b281ebb 100644
--- a/apps/examples/wc-next10/package.json
+++ b/apps/examples/wc-next10/package.json
@@ -1,6 +1,6 @@
 {
   "name": "wc-next10",
-  "version": "0.6.0",
+  "version": "0.6.1",
   "private": true,
   "scripts": {
     "dev": "next dev",
@@ -11,7 +11,7 @@
   },
   "dependencies": {
     "@justeattakeaway/pie-css": "0.12.1",
-    "@justeattakeaway/pie-webc": "0.5.14",
+    "@justeattakeaway/pie-webc": "0.5.15",
     "@lit/react": "1.0.2",
     "next": "10.2.3",
     "next-transpile-modules": "4.1.0",
diff --git a/apps/examples/wc-next13/CHANGELOG.md b/apps/examples/wc-next13/CHANGELOG.md
index 789fb59f76..6bcdbd1b69 100644
--- a/apps/examples/wc-next13/CHANGELOG.md
+++ b/apps/examples/wc-next13/CHANGELOG.md
@@ -1,5 +1,12 @@
 # wc-next13
 
+## 0.4.1
+
+### Patch Changes
+
+- Updated dependencies [[`927b800ed`](https://github.com/justeattakeaway/pie/commit/927b800ed2456c6db299694fbf850dea4aed34bd)]:
+  - @justeattakeaway/pie-webc@0.5.15
+
 ## 0.4.0
 
 ### Minor Changes
diff --git a/apps/examples/wc-next13/package.json b/apps/examples/wc-next13/package.json
index 4dd29ffe93..80b61f01cf 100644
--- a/apps/examples/wc-next13/package.json
+++ b/apps/examples/wc-next13/package.json
@@ -1,7 +1,7 @@
 {
   "name": "wc-next13",
   "private": true,
-  "version": "0.4.0",
+  "version": "0.4.1",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -11,7 +11,7 @@
   },
   "dependencies": {
     "@justeattakeaway/pie-css": "0.12.1",
-    "@justeattakeaway/pie-webc": "0.5.14",
+    "@justeattakeaway/pie-webc": "0.5.15",
     "@lit-labs/nextjs": "0.2.0",
     "@lit/react": "1.0.5",
     "next": "13.5.5",
diff --git a/apps/examples/wc-nuxt2/CHANGELOG.md b/apps/examples/wc-nuxt2/CHANGELOG.md
index ab95966b98..afda699ffb 100644
--- a/apps/examples/wc-nuxt2/CHANGELOG.md
+++ b/apps/examples/wc-nuxt2/CHANGELOG.md
@@ -1,5 +1,12 @@
 # wc-nuxt2
 
+## 0.7.2
+
+### Patch Changes
+
+- Updated dependencies [[`927b800ed`](https://github.com/justeattakeaway/pie/commit/927b800ed2456c6db299694fbf850dea4aed34bd)]:
+  - @justeattakeaway/pie-webc@0.5.15
+
 ## 0.7.1
 
 ### Patch Changes
diff --git a/apps/examples/wc-nuxt2/package.json b/apps/examples/wc-nuxt2/package.json
index 4267f9a009..cf174d32b1 100644
--- a/apps/examples/wc-nuxt2/package.json
+++ b/apps/examples/wc-nuxt2/package.json
@@ -1,7 +1,7 @@
 {
   "name": "wc-nuxt2",
   "author": "Just Eat Takeaway.com - Design System Team",
-  "version": "0.7.1",
+  "version": "0.7.2",
   "private": true,
   "scripts": {
     "dev": "nuxt",
@@ -11,7 +11,7 @@
   },
   "dependencies": {
     "@justeattakeaway/pie-css": "0.12.1",
-    "@justeattakeaway/pie-webc": "0.5.14",
+    "@justeattakeaway/pie-webc": "0.5.15",
     "core-js": "3.30.0",
     "nuxt": "2.17.0",
     "vue": "2.7.16",
diff --git a/apps/examples/wc-nuxt3/CHANGELOG.md b/apps/examples/wc-nuxt3/CHANGELOG.md
index 7a20f4d133..5c1001f621 100644
--- a/apps/examples/wc-nuxt3/CHANGELOG.md
+++ b/apps/examples/wc-nuxt3/CHANGELOG.md
@@ -1,5 +1,12 @@
 # wc-nuxt3
 
+## 0.6.2
+
+### Patch Changes
+
+- Updated dependencies [[`927b800ed`](https://github.com/justeattakeaway/pie/commit/927b800ed2456c6db299694fbf850dea4aed34bd)]:
+  - @justeattakeaway/pie-webc@0.5.15
+
 ## 0.6.1
 
 ### Patch Changes
diff --git a/apps/examples/wc-nuxt3/package.json b/apps/examples/wc-nuxt3/package.json
index 48ea93b492..6cb111937c 100644
--- a/apps/examples/wc-nuxt3/package.json
+++ b/apps/examples/wc-nuxt3/package.json
@@ -1,6 +1,6 @@
 {
   "name": "wc-nuxt3",
-  "version": "0.6.1",
+  "version": "0.6.2",
   "private": true,
   "scripts": {
     "build:examples": "nuxt build",
@@ -11,7 +11,7 @@
   },
   "dependencies": {
     "@justeattakeaway/pie-css": "0.12.1",
-    "@justeattakeaway/pie-webc": "0.5.14",
+    "@justeattakeaway/pie-webc": "0.5.15",
     "nuxt-ssr-lit": "1.6.5"
   },
   "devDependencies": {
diff --git a/apps/examples/wc-react17/CHANGELOG.md b/apps/examples/wc-react17/CHANGELOG.md
index 3745d80fd9..b2509b1637 100644
--- a/apps/examples/wc-react17/CHANGELOG.md
+++ b/apps/examples/wc-react17/CHANGELOG.md
@@ -1,5 +1,16 @@
 # wc-react17
 
+## 0.5.0
+
+### Minor Changes
+
+- [Added] - pie-webc integration to react app ([#1610](https://github.com/justeattakeaway/pie/pull/1610)) by [@kevinrodrigues](https://github.com/kevinrodrigues)
+
+### Patch Changes
+
+- Updated dependencies [[`927b800ed`](https://github.com/justeattakeaway/pie/commit/927b800ed2456c6db299694fbf850dea4aed34bd)]:
+  - @justeattakeaway/pie-webc@0.5.15
+
 ## 0.4.43
 
 ### Patch Changes
diff --git a/apps/examples/wc-react17/package.json b/apps/examples/wc-react17/package.json
index 8bccf45c0f..f2c562a7dc 100644
--- a/apps/examples/wc-react17/package.json
+++ b/apps/examples/wc-react17/package.json
@@ -1,7 +1,7 @@
 {
   "name": "wc-react17",
   "private": true,
-  "version": "0.4.43",
+  "version": "0.5.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -11,7 +11,7 @@
   },
   "dependencies": {
     "@justeattakeaway/pie-css": "0.12.1",
-    "@justeattakeaway/pie-webc": "0.5.13",
+    "@justeattakeaway/pie-webc": "0.5.15",
     "@lit/react": "1.0.5",
     "react": "17.0.2",
     "react-dom": "17.0.2"
diff --git a/apps/examples/wc-react18/CHANGELOG.md b/apps/examples/wc-react18/CHANGELOG.md
index 6154b00bbe..58ee163476 100644
--- a/apps/examples/wc-react18/CHANGELOG.md
+++ b/apps/examples/wc-react18/CHANGELOG.md
@@ -1,5 +1,16 @@
 # wc-react18
 
+## 0.6.0
+
+### Minor Changes
+
+- [Added] - pie-webc integration and switch to using vite to resolve bundling error ([#1609](https://github.com/justeattakeaway/pie/pull/1609)) by [@kevinrodrigues](https://github.com/kevinrodrigues)
+
+### Patch Changes
+
+- Updated dependencies [[`927b800ed`](https://github.com/justeattakeaway/pie/commit/927b800ed2456c6db299694fbf850dea4aed34bd)]:
+  - @justeattakeaway/pie-webc@0.5.15
+
 ## 0.5.42
 
 ### Patch Changes
diff --git a/apps/examples/wc-react18/package.json b/apps/examples/wc-react18/package.json
index 87a5f25eb4..7797ff4de4 100644
--- a/apps/examples/wc-react18/package.json
+++ b/apps/examples/wc-react18/package.json
@@ -1,7 +1,7 @@
 {
   "name": "wc-react18",
   "private": true,
-  "version": "0.5.42",
+  "version": "0.6.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -11,7 +11,7 @@
   },
   "dependencies": {
     "@justeattakeaway/pie-css": "0.12.1",
-    "@justeattakeaway/pie-webc": "0.5.13",
+    "@justeattakeaway/pie-webc": "0.5.15",
     "@lit/react": "1.0.5",
     "react": "18.3.1",
     "react-dom": "18.3.1"
diff --git a/apps/examples/wc-vanilla/CHANGELOG.md b/apps/examples/wc-vanilla/CHANGELOG.md
index 0bb6b66248..cd010800a3 100644
--- a/apps/examples/wc-vanilla/CHANGELOG.md
+++ b/apps/examples/wc-vanilla/CHANGELOG.md
@@ -1,5 +1,12 @@
 # wc-vanilla
 
+## 0.5.2
+
+### Patch Changes
+
+- Updated dependencies [[`927b800ed`](https://github.com/justeattakeaway/pie/commit/927b800ed2456c6db299694fbf850dea4aed34bd)]:
+  - @justeattakeaway/pie-webc@0.5.15
+
 ## 0.5.1
 
 ### Patch Changes
diff --git a/apps/examples/wc-vanilla/package.json b/apps/examples/wc-vanilla/package.json
index d4764a9484..c87c95e3b6 100644
--- a/apps/examples/wc-vanilla/package.json
+++ b/apps/examples/wc-vanilla/package.json
@@ -1,6 +1,6 @@
 {
   "name": "wc-vanilla",
-  "version": "0.5.1",
+  "version": "0.5.2",
   "private": true,
   "type": "module",
   "scripts": {
@@ -15,7 +15,7 @@
     "@justeat/pie-design-tokens": "6.3.1",
     "@justeattakeaway/pie-css": "0.12.1",
     "@justeattakeaway/pie-icons-webc": "0.24.2",
-    "@justeattakeaway/pie-webc": "0.5.14"
+    "@justeattakeaway/pie-webc": "0.5.15"
   },
   "installConfig": {
     "hoistingLimits": "workspaces"
diff --git a/apps/examples/wc-vue3/CHANGELOG.md b/apps/examples/wc-vue3/CHANGELOG.md
index 24c686c599..5572001b30 100644
--- a/apps/examples/wc-vue3/CHANGELOG.md
+++ b/apps/examples/wc-vue3/CHANGELOG.md
@@ -1,5 +1,12 @@
 # wc-vue3
 
+## 0.5.2
+
+### Patch Changes
+
+- Updated dependencies [[`927b800ed`](https://github.com/justeattakeaway/pie/commit/927b800ed2456c6db299694fbf850dea4aed34bd)]:
+  - @justeattakeaway/pie-webc@0.5.15
+
 ## 0.5.1
 
 ### Patch Changes
diff --git a/apps/examples/wc-vue3/package.json b/apps/examples/wc-vue3/package.json
index 7bd9488b7f..271a7a23b1 100644
--- a/apps/examples/wc-vue3/package.json
+++ b/apps/examples/wc-vue3/package.json
@@ -1,6 +1,6 @@
 {
   "name": "wc-vue3",
-  "version": "0.5.1",
+  "version": "0.5.2",
   "private": true,
   "scripts": {
     "dev": "vite",
@@ -11,7 +11,7 @@
   },
   "dependencies": {
     "@justeattakeaway/pie-css": "0.12.1",
-    "@justeattakeaway/pie-webc": "0.5.14",
+    "@justeattakeaway/pie-webc": "0.5.15",
     "@vitejs/plugin-vue": "4.0.0",
     "vite": "4.5.3",
     "vue": "3.2.47"
diff --git a/apps/pie-storybook/CHANGELOG.md b/apps/pie-storybook/CHANGELOG.md
index a899a1976c..7bb1836fb6 100644
--- a/apps/pie-storybook/CHANGELOG.md
+++ b/apps/pie-storybook/CHANGELOG.md
@@ -1,5 +1,17 @@
 # Changelog
 
+## 0.81.5
+
+### Patch Changes
+
+- Updated dependencies [[`d47b4cc02`](https://github.com/justeattakeaway/pie/commit/d47b4cc02465db340b8be94f5e24a09d363713c8), [`d3d974c76`](https://github.com/justeattakeaway/pie/commit/d3d974c76a5ee1e800c30b59e81002d089b5a26d), [`927b800ed`](https://github.com/justeattakeaway/pie/commit/927b800ed2456c6db299694fbf850dea4aed34bd), [`d47b4cc02`](https://github.com/justeattakeaway/pie/commit/d47b4cc02465db340b8be94f5e24a09d363713c8)]:
+  - @justeattakeaway/pie-checkbox@0.9.0
+  - @justeattakeaway/pie-button@0.48.0
+  - @justeattakeaway/pie-switch@0.29.11
+  - @justeattakeaway/pie-checkbox-group@0.3.0
+  - @justeattakeaway/pie-cookie-banner@0.22.1
+  - @justeattakeaway/pie-modal@0.43.5
+
 ## 0.81.4
 
 ### Patch Changes
diff --git a/apps/pie-storybook/package.json b/apps/pie-storybook/package.json
index 6b9e528166..041f353847 100644
--- a/apps/pie-storybook/package.json
+++ b/apps/pie-storybook/package.json
@@ -1,6 +1,6 @@
 {
   "name": "pie-storybook",
-  "version": "0.81.4",
+  "version": "0.81.5",
   "private": true,
   "description": "Storybook for PIE Design System components",
   "scripts": {
@@ -15,22 +15,22 @@
   "dependencies": {
     "@justeat/pie-design-tokens": "6.3.1",
     "@justeattakeaway/pie-assistive-text": "0.5.1",
-    "@justeattakeaway/pie-button": "0.47.8",
+    "@justeattakeaway/pie-button": "0.48.0",
     "@justeattakeaway/pie-card": "0.19.7",
-    "@justeattakeaway/pie-checkbox": "0.8.0",
-    "@justeattakeaway/pie-checkbox-group": "0.2.0",
+    "@justeattakeaway/pie-checkbox": "0.9.0",
+    "@justeattakeaway/pie-checkbox-group": "0.3.0",
     "@justeattakeaway/pie-chip": "0.7.1",
-    "@justeattakeaway/pie-cookie-banner": "0.22.0",
+    "@justeattakeaway/pie-cookie-banner": "0.22.1",
     "@justeattakeaway/pie-css": "0.12.1",
     "@justeattakeaway/pie-divider": "0.13.7",
     "@justeattakeaway/pie-form-label": "0.13.6",
     "@justeattakeaway/pie-icon-button": "0.28.9",
     "@justeattakeaway/pie-icons-webc": "0.24.2",
     "@justeattakeaway/pie-link": "0.17.7",
-    "@justeattakeaway/pie-modal": "0.43.4",
+    "@justeattakeaway/pie-modal": "0.43.5",
     "@justeattakeaway/pie-notification": "0.9.3",
     "@justeattakeaway/pie-spinner": "0.6.6",
-    "@justeattakeaway/pie-switch": "0.29.10",
+    "@justeattakeaway/pie-switch": "0.29.11",
     "@justeattakeaway/pie-tag": "0.9.8",
     "@justeattakeaway/pie-text-input": "0.23.1",
     "@justeattakeaway/pie-textarea": "0.4.0",
diff --git a/packages/components/pie-button/CHANGELOG.md b/packages/components/pie-button/CHANGELOG.md
index a65cd6688b..f2651bb061 100644
--- a/packages/components/pie-button/CHANGELOG.md
+++ b/packages/components/pie-button/CHANGELOG.md
@@ -1,5 +1,13 @@
 # Changelog
 
+## 0.48.0
+
+### Minor Changes
+
+- [Changed] - Styles now use classmap ([#1587](https://github.com/justeattakeaway/pie/pull/1587)) by [@ashleynolan](https://github.com/ashleynolan)
+
+  [Fixed] - Fixed background colour when button is in `xsmall` or `small` size and responsive mode is true, where the bg-color wasn't updating to orange as required
+
 ## 0.47.8
 
 ### Patch Changes
diff --git a/packages/components/pie-button/package.json b/packages/components/pie-button/package.json
index 6da54712a6..6d097e5110 100644
--- a/packages/components/pie-button/package.json
+++ b/packages/components/pie-button/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@justeattakeaway/pie-button",
-  "version": "0.47.8",
+  "version": "0.48.0",
   "description": "PIE design system button built using web components",
   "type": "module",
   "main": "dist/index.js",
diff --git a/packages/components/pie-checkbox-group/CHANGELOG.md b/packages/components/pie-checkbox-group/CHANGELOG.md
index 70f276f9b0..bc60c19df3 100644
--- a/packages/components/pie-checkbox-group/CHANGELOG.md
+++ b/packages/components/pie-checkbox-group/CHANGELOG.md
@@ -1,5 +1,14 @@
 # @justeattakeaway/pie-checkbox-group
 
+## 0.3.0
+
+### Minor Changes
+
+- [Added] - New `isInline` prop. ([#1618](https://github.com/justeattakeaway/pie/pull/1618)) by [@dandel10n](https://github.com/dandel10n)
+
+  [Added] - Styling for Checkbox Group.
+  [Added] - Visual tests.
+
 ## 0.2.0
 
 ### Minor Changes
diff --git a/packages/components/pie-checkbox-group/package.json b/packages/components/pie-checkbox-group/package.json
index 300762670c..e47d14970b 100644
--- a/packages/components/pie-checkbox-group/package.json
+++ b/packages/components/pie-checkbox-group/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.3.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
diff --git a/packages/components/pie-checkbox/CHANGELOG.md b/packages/components/pie-checkbox/CHANGELOG.md
index e3b2998bd2..953a57e490 100644
--- a/packages/components/pie-checkbox/CHANGELOG.md
+++ b/packages/components/pie-checkbox/CHANGELOG.md
@@ -1,5 +1,18 @@
 # @justeattakeaway/pie-checkbox
 
+## 0.9.0
+
+### Minor Changes
+
+- [Changed] - Replaced label prop with a slot to give consumers the option to easily customize the label. ([#1618](https://github.com/justeattakeaway/pie/pull/1618)) by [@dandel10n](https://github.com/dandel10n)
+
+  [Changed] - Fixed the rtl styles for the tick/dash for checked/indeterminate state.
+  [Changed] - Updated visual tests.
+
+### Patch Changes
+
+- [Changed] - isRtl attr changed to data-is-rtl ([#1625](https://github.com/justeattakeaway/pie/pull/1625)) by [@dandel10n](https://github.com/dandel10n)
+
 ## 0.8.0
 
 ### Minor Changes
diff --git a/packages/components/pie-checkbox/package.json b/packages/components/pie-checkbox/package.json
index e40feb0269..140cfed547 100644
--- a/packages/components/pie-checkbox/package.json
+++ b/packages/components/pie-checkbox/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-checkbox",
   "description": "PIE Design System Checkbox built using Web Components",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
diff --git a/packages/components/pie-cookie-banner/CHANGELOG.md b/packages/components/pie-cookie-banner/CHANGELOG.md
index 8f771b6534..78ed3426cb 100644
--- a/packages/components/pie-cookie-banner/CHANGELOG.md
+++ b/packages/components/pie-cookie-banner/CHANGELOG.md
@@ -1,5 +1,14 @@
 # @justeattakeaway/pie-cookie-banner
 
+## 0.22.1
+
+### Patch Changes
+
+- Updated dependencies [[`d3d974c76`](https://github.com/justeattakeaway/pie/commit/d3d974c76a5ee1e800c30b59e81002d089b5a26d), [`927b800ed`](https://github.com/justeattakeaway/pie/commit/927b800ed2456c6db299694fbf850dea4aed34bd)]:
+  - @justeattakeaway/pie-button@0.48.0
+  - @justeattakeaway/pie-switch@0.29.11
+  - @justeattakeaway/pie-modal@0.43.5
+
 ## 0.22.0
 
 ### Minor Changes
diff --git a/packages/components/pie-cookie-banner/package.json b/packages/components/pie-cookie-banner/package.json
index 211ba1e4a6..4c2311dc17 100644
--- a/packages/components/pie-cookie-banner/package.json
+++ b/packages/components/pie-cookie-banner/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-cookie-banner",
   "description": "PIE Design System Cookie Banner built using Web Components",
-  "version": "0.22.0",
+  "version": "0.22.1",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -43,12 +43,12 @@
     "cem-plugin-module-file-extensions": "0.0.5"
   },
   "dependencies": {
-    "@justeattakeaway/pie-button": "0.47.8",
+    "@justeattakeaway/pie-button": "0.48.0",
     "@justeattakeaway/pie-divider": "0.13.7",
     "@justeattakeaway/pie-icon-button": "0.28.9",
     "@justeattakeaway/pie-link": "0.17.7",
-    "@justeattakeaway/pie-modal": "0.43.4",
-    "@justeattakeaway/pie-switch": "0.29.10",
+    "@justeattakeaway/pie-modal": "0.43.5",
+    "@justeattakeaway/pie-switch": "0.29.11",
     "@justeattakeaway/pie-webc-core": "0.24.0"
   },
   "volta": {
diff --git a/packages/components/pie-form-label/package.json b/packages/components/pie-form-label/package.json
index 9b3b2f14fb..a72cd1e586 100644
--- a/packages/components/pie-form-label/package.json
+++ b/packages/components/pie-form-label/package.json
@@ -37,7 +37,7 @@
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "0.9.0",
     "@justeattakeaway/pie-components-config": "0.16.0",
-    "@justeattakeaway/pie-switch": "0.29.10",
+    "@justeattakeaway/pie-switch": "0.29.11",
     "@justeattakeaway/pie-text-input": "0.23.1",
     "@justeattakeaway/pie-wrapper-react": "0.14.1",
     "cem-plugin-module-file-extensions": "0.0.5"
diff --git a/packages/components/pie-modal/CHANGELOG.md b/packages/components/pie-modal/CHANGELOG.md
index 055c6845c9..ec11387936 100644
--- a/packages/components/pie-modal/CHANGELOG.md
+++ b/packages/components/pie-modal/CHANGELOG.md
@@ -1,5 +1,12 @@
 # @justeattakeaway/pie-modal
 
+## 0.43.5
+
+### Patch Changes
+
+- Updated dependencies [[`d3d974c76`](https://github.com/justeattakeaway/pie/commit/d3d974c76a5ee1e800c30b59e81002d089b5a26d)]:
+  - @justeattakeaway/pie-button@0.48.0
+
 ## 0.43.4
 
 ### Patch Changes
diff --git a/packages/components/pie-modal/package.json b/packages/components/pie-modal/package.json
index 91452ae6a8..8c52355487 100644
--- a/packages/components/pie-modal/package.json
+++ b/packages/components/pie-modal/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@justeattakeaway/pie-modal",
-  "version": "0.43.4",
+  "version": "0.43.5",
   "description": "PIE design system modal built using web components",
   "type": "module",
   "main": "dist/index.js",
@@ -46,7 +46,7 @@
     "extends": "../../../package.json"
   },
   "dependencies": {
-    "@justeattakeaway/pie-button": "0.47.8",
+    "@justeattakeaway/pie-button": "0.48.0",
     "@justeattakeaway/pie-icon-button": "0.28.9",
     "@justeattakeaway/pie-icons-webc": "0.24.2",
     "@justeattakeaway/pie-spinner": "0.6.6",
diff --git a/packages/components/pie-switch/CHANGELOG.md b/packages/components/pie-switch/CHANGELOG.md
index 957bb898ee..126842ca27 100644
--- a/packages/components/pie-switch/CHANGELOG.md
+++ b/packages/components/pie-switch/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @justeattakeaway/pie-switch
 
+## 0.29.11
+
+### Patch Changes
+
+- [Changed] - isRtl attr changed to data-is-rtl ([#1625](https://github.com/justeattakeaway/pie/pull/1625)) by [@dandel10n](https://github.com/dandel10n)
+
 ## 0.29.10
 
 ### Patch Changes
diff --git a/packages/components/pie-switch/package.json b/packages/components/pie-switch/package.json
index c55704b764..72ff13423b 100644
--- a/packages/components/pie-switch/package.json
+++ b/packages/components/pie-switch/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-switch",
   "description": "PIE Design System Switch built using Web Components",
-  "version": "0.29.10",
+  "version": "0.29.11",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
diff --git a/packages/components/pie-webc/CHANGELOG.md b/packages/components/pie-webc/CHANGELOG.md
index 9c8c7a340e..fe6e682c47 100644
--- a/packages/components/pie-webc/CHANGELOG.md
+++ b/packages/components/pie-webc/CHANGELOG.md
@@ -1,5 +1,19 @@
 # @justeattakeaway/pie-webc
 
+## 0.5.15
+
+### Patch Changes
+
+- [Changed] - isRtl attr changed to data-is-rtl ([#1625](https://github.com/justeattakeaway/pie/pull/1625)) by [@dandel10n](https://github.com/dandel10n)
+
+- Updated dependencies [[`d47b4cc02`](https://github.com/justeattakeaway/pie/commit/d47b4cc02465db340b8be94f5e24a09d363713c8), [`d3d974c76`](https://github.com/justeattakeaway/pie/commit/d3d974c76a5ee1e800c30b59e81002d089b5a26d), [`927b800ed`](https://github.com/justeattakeaway/pie/commit/927b800ed2456c6db299694fbf850dea4aed34bd), [`d47b4cc02`](https://github.com/justeattakeaway/pie/commit/d47b4cc02465db340b8be94f5e24a09d363713c8)]:
+  - @justeattakeaway/pie-checkbox@0.9.0
+  - @justeattakeaway/pie-button@0.48.0
+  - @justeattakeaway/pie-switch@0.29.11
+  - @justeattakeaway/pie-checkbox-group@0.3.0
+  - @justeattakeaway/pie-cookie-banner@0.22.1
+  - @justeattakeaway/pie-modal@0.43.5
+
 ## 0.5.14
 
 ### Patch Changes
diff --git a/packages/components/pie-webc/package.json b/packages/components/pie-webc/package.json
index 35993d63fd..b2c37d4ca9 100644
--- a/packages/components/pie-webc/package.json
+++ b/packages/components/pie-webc/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-webc",
   "description": "Component bundle containing all PIE web components",
-  "version": "0.5.14",
+  "version": "0.5.15",
   "type": "module",
   "files": [
     "**/*.js",
@@ -218,20 +218,20 @@
   },
   "dependencies": {
     "@justeattakeaway/pie-assistive-text": "0.5.1",
-    "@justeattakeaway/pie-button": "0.47.8",
+    "@justeattakeaway/pie-button": "0.48.0",
     "@justeattakeaway/pie-card": "0.19.7",
-    "@justeattakeaway/pie-checkbox": "0.8.0",
-    "@justeattakeaway/pie-checkbox-group": "0.2.0",
+    "@justeattakeaway/pie-checkbox": "0.9.0",
+    "@justeattakeaway/pie-checkbox-group": "0.3.0",
     "@justeattakeaway/pie-chip": "0.7.1",
-    "@justeattakeaway/pie-cookie-banner": "0.22.0",
+    "@justeattakeaway/pie-cookie-banner": "0.22.1",
     "@justeattakeaway/pie-divider": "0.13.7",
     "@justeattakeaway/pie-form-label": "0.13.6",
     "@justeattakeaway/pie-icon-button": "0.28.9",
     "@justeattakeaway/pie-link": "0.17.7",
-    "@justeattakeaway/pie-modal": "0.43.4",
+    "@justeattakeaway/pie-modal": "0.43.5",
     "@justeattakeaway/pie-notification": "0.9.3",
     "@justeattakeaway/pie-spinner": "0.6.6",
-    "@justeattakeaway/pie-switch": "0.29.10",
+    "@justeattakeaway/pie-switch": "0.29.11",
     "@justeattakeaway/pie-tag": "0.9.8",
     "@justeattakeaway/pie-text-input": "0.23.1",
     "@justeattakeaway/pie-textarea": "0.4.0",