feat: dsw-4118-radio-list-item integration

nextjs-app-v14/package.json

@@ -15,8 +15,8 @@
   },
   "dependencies": {
     "@justeattakeaway/pie-css": "1.2.0",
-    "@justeattakeaway/pie-icons-webc": "1.25.1",
-    "@justeattakeaway/pie-webc": "0.10.28",
+    "@justeattakeaway/pie-icons-webc": "0.0.0-snapshot-release-20260721170837",
+    "@justeattakeaway/pie-webc": "0.0.0-snapshot-release-20260721170837",
     "@lit-labs/nextjs": "0.2.3",
     "@lit/react": "1.0.7",
     "next": "14.2.33",

nextjs-app-v14/src/app/components/home-page.tsx

@@ -44,6 +44,7 @@ export default function HomePage() {
         <li><PieLink onClick={() => router.push('/components/notification')} tag="button">Notification</PieLink></li>
         <li><PieLink onClick={() => router.push('/components/radio')} tag="button">Radio</PieLink></li>
         <li><PieLink onClick={() => router.push('/components/radio-group')} tag="button">Radio Group</PieLink></li>
+        <li><PieLink onClick={() => router.push('/components/list-item-radio-selection')} tag="button">List Item Radio Selection</PieLink></li>
         <li><PieLink onClick={() => router.push('/components/spinner')} tag="button">Spinner</PieLink></li>
         <li><PieLink onClick={() => router.push('/components/switch')} tag="button">Switch</PieLink></li>
         <li><PieLink onClick={() => router.push('/components/select')} tag="button">Select</PieLink></li>

nextjs-app-v14/src/app/components/list-item-radio-selection/list-item-radio-selection.tsx

@@ -0,0 +1,66 @@
+'use client';
+
+import { useState } from "react";
+import NavigationLayout from "@/app/layout/navigation";
+import { PieRadioGroup } from "@justeattakeaway/pie-webc/react/radio-group.js";
+import { PieRadio } from "@justeattakeaway/pie-webc/react/radio.js";
+import { PieListItem } from "@justeattakeaway/pie-webc/react/list-item.js";
+import { PieFormLabel } from "@justeattakeaway/pie-webc/react/form-label.js";
+import { PieButton } from "@justeattakeaway/pie-webc/react/button.js";
+
+export default function ListItemRadioSelection() {
+    const [deliveryLeading, setDeliveryLeading] = useState('express');
+    const [deliveryTrailing, setDeliveryTrailing] = useState('locker');
+
+    const handleDeliveryLeadingChange = (event: CustomEvent) => {
+        setDeliveryLeading((event.target as HTMLInputElement).value);
+    };
+
+    const handleDeliveryTrailingChange = (event: CustomEvent) => {
+        setDeliveryTrailing((event.target as HTMLInputElement).value);
+    };
+
+    return (
+        <NavigationLayout title="List Item Radio Selection">
+
+            <h2 id="radio-leading-heading" style={{ padding: '8px 0' }}>Radio group - leading control (pre-selected)</h2>
+            <PieRadioGroup name="deliveryLeading" value={deliveryLeading} onChange={handleDeliveryLeadingChange} variant="list">
+                <PieFormLabel slot="label">Select a delivery option: {deliveryLeading}</PieFormLabel>
+                <PieListItem selectionType="radio" primaryText="Standard" secondaryText="3 to 5 days" metaText="Free">
+                    <PieRadio slot="leading" value="standard" />
+                </PieListItem>
+                <PieListItem selectionType="radio" primaryText="Express" secondaryText="Next day" metaText="£2.99">
+                    <PieRadio slot="leading" value="express" />
+                </PieListItem>
+                <PieListItem selectionType="radio" disabled primaryText="Collection" secondaryText="Pick up in store">
+                    <PieRadio slot="leading" value="collection" disabled />
+                </PieListItem>
+                <PieListItem selectionType="radio" primaryText="Locker" secondaryText="Collect at your convenience" metaText="Free">
+                    <PieRadio slot="leading" value="locker" />
+                </PieListItem>
+            </PieRadioGroup>
+
+            <PieButton>Some focusable element after leading radio list</PieButton>
+
+            <h2 id="radio-trailing-heading" style={{ padding: '8px 0' }}>Radio group - trailing control (pre-selected)</h2>
+            <PieRadioGroup name="deliveryTrailing" value={deliveryTrailing} onChange={handleDeliveryTrailingChange} variant="list">
+                <PieFormLabel slot="label">Select a delivery option: {deliveryTrailing}</PieFormLabel>
+                <PieListItem selectionType="radio" primaryText="Standard" secondaryText="3 to 5 days">
+                    <PieRadio slot="trailing" value="standard" />
+                </PieListItem>
+                <PieListItem selectionType="radio" primaryText="Express" secondaryText="Next day">
+                    <PieRadio slot="trailing" value="express" />
+                </PieListItem>
+                <PieListItem selectionType="radio" disabled primaryText="Collection" secondaryText="Pick up in store">
+                    <PieRadio slot="trailing" value="collection" disabled />
+                </PieListItem>
+                <PieListItem selectionType="radio" primaryText="Locker" secondaryText="Collect at your convenience">
+                    <PieRadio slot="trailing" value="locker" />
+                </PieListItem>
+            </PieRadioGroup>
+
+            <PieButton>Some focusable element after trailing radio list</PieButton>
+
+        </NavigationLayout>
+    );
+}

nextjs-app-v14/src/app/components/list-item-radio-selection/page.tsx

@@ -0,0 +1,10 @@
+import ListItemRadioSelection from './list-item-radio-selection';
+import { type Metadata } from 'next';
+
+export const metadata: Metadata = {
+    title: 'List Item Radio Selection',
+}
+
+export default function ListItemRadioSelectionPage() {
+    return <ListItemRadioSelection />;
+}

nextjs-app-v14/test/visual/nextjs.spec.js

@@ -32,6 +32,7 @@ describe('NextJS Aperture App', () => {
         { url: '/components/notification', name: 'Notification' },
         { url: '/components/radio', name: 'Radio' },
         { url: '/components/radio-group', name: 'Radio Group' },
+        { url: '/components/list-item-radio-selection', name: 'List Item Radio Selection' },
         { url: '/components/spinner', name: 'Spinner' },
         { url: '/components/switch', name: 'Switch' },
         { url: '/components/select', name: 'Select' },

nextjs-app-v15/package.json

@@ -15,8 +15,8 @@
   },
   "dependencies": {
     "@justeattakeaway/pie-css": "1.2.0",
-    "@justeattakeaway/pie-icons-webc": "1.25.1",
-    "@justeattakeaway/pie-webc": "0.10.28",
+    "@justeattakeaway/pie-icons-webc": "0.0.0-snapshot-release-20260721170837",
+    "@justeattakeaway/pie-webc": "0.0.0-snapshot-release-20260721170837",
     "@lit-labs/nextjs": "0.2.4",
     "@lit/react": "1.0.8",
     "next": "15.5.7",

nextjs-app-v15/src/app/components/home-page.tsx

@@ -45,6 +45,7 @@ export default function HomePage() {
     <li><PieLink onClick={() => router.push('/components/notification')} tag="button">Notification</PieLink></li>
     <li><PieLink onClick={() => router.push('/components/radio')} tag="button">Radio</PieLink></li>
     <li><PieLink onClick={() => router.push('/components/radio-group')} tag="button">Radio Group</PieLink></li>
+    <li><PieLink onClick={() => router.push('/components/list-item-radio-selection')} tag="button">List Item Radio Selection</PieLink></li>
     <li><PieLink onClick={() => router.push('/components/select')} tag="button">Select</PieLink></li>
     <li><PieLink onClick={() => router.push('/components/spinner')} tag="button">Spinner</PieLink></li>
     <li><PieLink onClick={() => router.push('/components/switch')} tag="button">Switch</PieLink></li>

nextjs-app-v15/src/app/components/list-item-radio-selection/list-item-radio-selection.tsx

@@ -0,0 +1,66 @@
+'use client';
+
+import { useState } from "react";
+import NavigationLayout from "@/app/layout/navigation";
+import { PieRadioGroup } from "@justeattakeaway/pie-webc/react/radio-group.js";
+import { PieRadio } from "@justeattakeaway/pie-webc/react/radio.js";
+import { PieListItem } from "@justeattakeaway/pie-webc/react/list-item.js";
+import { PieFormLabel } from "@justeattakeaway/pie-webc/react/form-label.js";
+import { PieButton } from "@justeattakeaway/pie-webc/react/button.js";
+
+export default function ListItemRadioSelection() {
+    const [deliveryLeading, setDeliveryLeading] = useState('express');
+    const [deliveryTrailing, setDeliveryTrailing] = useState('locker');
+
+    const handleDeliveryLeadingChange = (event: CustomEvent) => {
+        setDeliveryLeading((event.target as HTMLInputElement).value);
+    };
+
+    const handleDeliveryTrailingChange = (event: CustomEvent) => {
+        setDeliveryTrailing((event.target as HTMLInputElement).value);
+    };
+
+    return (
+        <NavigationLayout title="List Item Radio Selection">
+
+            <h2 id="radio-leading-heading" style={{ padding: '8px 0' }}>Radio group - leading control (pre-selected)</h2>
+            <PieRadioGroup name="deliveryLeading" value={deliveryLeading} onChange={handleDeliveryLeadingChange} variant="list">
+                <PieFormLabel slot="label">Select a delivery option: {deliveryLeading}</PieFormLabel>
+                <PieListItem selectionType="radio" primaryText="Standard" secondaryText="3 to 5 days" metaText="Free">
+                    <PieRadio slot="leading" value="standard" />
+                </PieListItem>
+                <PieListItem selectionType="radio" primaryText="Express" secondaryText="Next day" metaText="£2.99">
+                    <PieRadio slot="leading" value="express" />
+                </PieListItem>
+                <PieListItem selectionType="radio" disabled primaryText="Collection" secondaryText="Pick up in store">
+                    <PieRadio slot="leading" value="collection" disabled />
+                </PieListItem>
+                <PieListItem selectionType="radio" primaryText="Locker" secondaryText="Collect at your convenience" metaText="Free">
+                    <PieRadio slot="leading" value="locker" />
+                </PieListItem>
+            </PieRadioGroup>
+
+            <PieButton>Some focusable element after leading radio list</PieButton>
+
+            <h2 id="radio-trailing-heading" style={{ padding: '8px 0' }}>Radio group - trailing control (pre-selected)</h2>
+            <PieRadioGroup name="deliveryTrailing" value={deliveryTrailing} onChange={handleDeliveryTrailingChange} variant="list">
+                <PieFormLabel slot="label">Select a delivery option: {deliveryTrailing}</PieFormLabel>
+                <PieListItem selectionType="radio" primaryText="Standard" secondaryText="3 to 5 days">
+                    <PieRadio slot="trailing" value="standard" />
+                </PieListItem>
+                <PieListItem selectionType="radio" primaryText="Express" secondaryText="Next day">
+                    <PieRadio slot="trailing" value="express" />
+                </PieListItem>
+                <PieListItem selectionType="radio" disabled primaryText="Collection" secondaryText="Pick up in store">
+                    <PieRadio slot="trailing" value="collection" disabled />
+                </PieListItem>
+                <PieListItem selectionType="radio" primaryText="Locker" secondaryText="Collect at your convenience">
+                    <PieRadio slot="trailing" value="locker" />
+                </PieListItem>
+            </PieRadioGroup>
+
+            <PieButton>Some focusable element after trailing radio list</PieButton>
+
+        </NavigationLayout>
+    );
+}

nextjs-app-v15/src/app/components/list-item-radio-selection/page.tsx

@@ -0,0 +1,10 @@
+import ListItemRadioSelection from './list-item-radio-selection';
+import { type Metadata } from 'next';
+
+export const metadata: Metadata = {
+    title: 'List Item Radio Selection',
+}
+
+export default function ListItemRadioSelectionPage() {
+    return <ListItemRadioSelection />;
+}

nextjs-app-v15/test/visual/nextjs.spec.js

@@ -31,6 +31,7 @@ describe('NextJS Aperture App', () => {
         { url: '/components/notification', name: 'Notification' },
         { url: '/components/radio', name: 'Radio' },
         { url: '/components/radio-group', name: 'Radio Group' },
+        { url: '/components/list-item-radio-selection', name: 'List Item Radio Selection' },
         { url: '/components/select', name: 'Select' },
         { url: '/components/spinner', name: 'Spinner', pauseBeforeScreenshot: true },
         { url: '/components/switch', name: 'Switch' },

nuxt-app/package.json

@@ -21,10 +21,10 @@
   },
   "dependencies": {
     "@justeattakeaway/pie-css": "1.2.0",
-    "@justeattakeaway/pie-icons-webc": "1.25.1",
-    "@justeattakeaway/pie-webc": "0.10.28",
+    "@justeattakeaway/pie-icons-webc": "0.0.0-snapshot-release-20260721170837",
+    "@justeattakeaway/pie-webc": "0.0.0-snapshot-release-20260721170837",
     "just-kebab-case": "4.2.0",
-    "nuxt-ssr-lit": "1.6.27"
+    "nuxt-ssr-lit": "1.6.33"
   },
   "installConfig": {
     "hoistingLimits": "workspaces"

nuxt-app/pages/components/list-item-radio-selection.vue

@@ -0,0 +1,58 @@
+<template>
+    <div>
+        <h2 id="radio-leading-heading" style="padding: 8px 0;">Radio group - leading control (pre-selected)</h2>
+        <pie-radio-group name="deliveryLeading" :value="deliveryLeading" @change="deliveryLeading = $event.target.value" variant="list">
+            <pie-form-label slot="label">Select a delivery option: {{ deliveryLeading }}</pie-form-label>
+            <pie-list-item selection-type="radio" primaryText="Standard" secondaryText="3 to 5 days" metaText="Free">
+                <pie-radio slot="leading" value="standard"></pie-radio>
+            </pie-list-item>
+            <pie-list-item selection-type="radio" primaryText="Express" secondaryText="Next day" metaText="£2.99">
+                <pie-radio slot="leading" value="express"></pie-radio>
+            </pie-list-item>
+            <pie-list-item selection-type="radio" disabled primaryText="Collection" secondaryText="Pick up in store">
+                <pie-radio slot="leading" value="collection" disabled></pie-radio>
+            </pie-list-item>
+            <pie-list-item selection-type="radio" primaryText="Locker" secondaryText="Collect at your convenience" metaText="Free">
+                <pie-radio slot="leading" value="locker"></pie-radio>
+            </pie-list-item>
+        </pie-radio-group>
+
+        <pie-button>Some focusable element after leading radio list</pie-button>
+
+        <h2 id="radio-trailing-heading" style="padding: 8px 0;">Radio group - trailing control (pre-selected)</h2>
+        <pie-radio-group name="deliveryTrailing" :value="deliveryTrailing" @change="deliveryTrailing = $event.target.value" variant="list">
+            <pie-form-label slot="label">Select a delivery option: {{ deliveryTrailing }}</pie-form-label>
+            <pie-list-item selection-type="radio" primaryText="Standard" secondaryText="3 to 5 days">
+                <pie-radio slot="trailing" value="standard"></pie-radio>
+            </pie-list-item>
+            <pie-list-item selection-type="radio" primaryText="Express" secondaryText="Next day">
+                <pie-radio slot="trailing" value="express"></pie-radio>
+            </pie-list-item>
+            <pie-list-item selection-type="radio" disabled primaryText="Collection" secondaryText="Pick up in store">
+                <pie-radio slot="trailing" value="collection" disabled></pie-radio>
+            </pie-list-item>
+            <pie-list-item selection-type="radio" primaryText="Locker" secondaryText="Collect at your convenience">
+                <pie-radio slot="trailing" value="locker"></pie-radio>
+            </pie-list-item>
+        </pie-radio-group>
+
+        <pie-button>Some focusable element after trailing radio list</pie-button>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { definePageMeta } from '#imports';
+import '@justeattakeaway/pie-webc/components/radio.js';
+import '@justeattakeaway/pie-webc/components/radio-group.js';
+import '@justeattakeaway/pie-webc/components/list-item.js';
+import '@justeattakeaway/pie-webc/components/form-label.js';
+import '@justeattakeaway/pie-webc/components/button.js';
+
+definePageMeta({
+    title: 'List Item Radio Selection',
+});
+
+const deliveryLeading = ref('express');
+const deliveryTrailing = ref('locker');
+</script>

nuxt-app/pages/index.vue

@@ -33,6 +33,7 @@
             <li><pie-link href="/components/notification">Notification</pie-link></li>
             <li><pie-link href="/components/radio">Radio</pie-link></li>
             <li><pie-link href="/components/radio-group">Radio Group</pie-link></li>
+            <li><pie-link href="/components/list-item-radio-selection">List Item Radio Selection</pie-link></li>
             <li><pie-link href="/components/spinner">Spinner</pie-link></li>
             <li><pie-link href="/components/switch">Switch</pie-link></li>
             <li><pie-link href="/components/select">Select</pie-link></li>

nuxt-app/test/visual/nuxt.spec.js

@@ -31,6 +31,7 @@ describe('Nuxt Aperture App', () => {
         { url: '/components/notification', name: 'Notification' },
         { url: '/components/radio', name: 'Radio' },
         { url: '/components/radio-group', name: 'Radio Group' },
+        { url: '/components/list-item-radio-selection', name: 'List Item Radio Selection' },
         { url: '/components/spinner', name: 'Spinner' },
         { url: '/components/switch', name: 'Switch' },
         { url: '/components/select', name: 'Select' },

package.json

@@ -20,7 +20,7 @@
     "upgrade-pie-packages": "turbo run upgrade-pie-packages && yarn"
   },
   "dependencies": {
-    "@justeattakeaway/pie-webc": "0.10.28",
+    "@justeattakeaway/pie-webc": "0.0.0-snapshot-release-20260721170837",
     "commitizen": "4.3.1",
     "cz-customizable": "7.5.1"
   },

test/ssr/ssr.spec.ts

@@ -121,4 +121,29 @@ test.describe('SSR - Components render with shadow dom and styles', () => {
             expect(pieComponentHtml).toMatch(styleRegex);
         });
     });
+
+    // The selectable-list pages are multi-component (a `pie-radio-group` hosting `pie-list-item`
+    // rows), so the page URL does not match a single `pie-<tag>` like the entries above. Assert
+    // directly that the `pie-list-item` server-renders with shadow DOM and styles - this is the
+    // component that carries the `@lit/context` provider/consumer whose SSR safety we care about.
+    test(`SSR: ${APP_NAME}: list-item-radio-selection`, async () => {
+        // Arrange
+        const shadowDomRegex = /<template\s+([^>]*shadowroot="open"[^>]*shadowrootmode="open"[^>]*|[^>]*shadowrootmode="open"[^>]*shadowroot="open"[^>]*)>/;
+        const styleRegex = /<style>[\s\S]*?<\/style>/;
+
+        // Act
+        const rawHtml = await fetchHtml(getComponentPageUrl('list-item-radio-selection', baseUrl));
+        const pieComponentMatch = rawHtml.match(createComponentRegex('list-item'));
+
+        if (!pieComponentMatch) {
+            console.warn('Failed to find pie-list-item in the SSR html:', rawHtml);
+        }
+
+        const pieComponentHtml = pieComponentMatch ? pieComponentMatch[0] : null;
+
+        // Assert
+        expect(pieComponentHtml).not.toBeNull();
+        expect(pieComponentHtml).toMatch(shadowDomRegex);
+        expect(pieComponentHtml).toMatch(styleRegex);
+    });
 });

vanilla-app/components/list-item-radio-selection.html

@@ -0,0 +1,5 @@
+<load
+    src="partials/page.html"
+    title="List Item Radio Selection"
+    module="../js/list-item-radio-selection.js"
+/>

vanilla-app/js/index.js

@@ -35,6 +35,7 @@ document.querySelector('#navigation').innerHTML = `
         <li><pie-link href="/components/notification.html">Notification</pie-link></li>
         <li><pie-link href="/components/radio.html">Radio</pie-link></li>
         <li><pie-link href="/components/radio-group.html">Radio Group</pie-link></li>
+        <li><pie-link href="/components/list-item-radio-selection.html">List Item Radio Selection</pie-link></li>
         <li><pie-link href="/components/spinner.html">Spinner</pie-link></li>
         <li><pie-link href="/components/switch.html">Switch</pie-link></li>
         <li><pie-link href="/components/select.html">Select</pie-link></li>