@justeattakeaway/pie-radio-group 1.2.1 → 1.2.3

package/README.md

@@ -118,41 +118,9 @@ import { PieFormLabel } from '@justeattakeaway/pie-webc/react/form-label.js';
 
 ### List items in a radio group
 
-For a list-style layout (each option on its own row with primary and secondary text, and dividers between rows), wrap each `pie-radio` in a [`pie-list-item`](https://webc.pie.design/?path=/docs/components-list--overview) with `selection-type="radio"`. The radio goes in the item's `leading` (or `trailing`) slot, and you provide the label through the item's `primaryText` rather than as the radio's content. The group lays the rows out as a divided list automatically when its children are `pie-list-item`s.
+For a list-style layout (each option on its own row with primary and secondary text, and dividers between rows), wrap each `pie-radio` in a `pie-list-item` with `interactionType="radio"` and place them inside the group. The radio goes in the item's `leading` (or `trailing`) slot, and you provide the label through the item's `primaryText` rather than as the radio's content.
 
-`selection-type="radio"` on each **item** makes that row a selectable target:
-
-- the item takes a `presentation` role, so the group still owns its `radio` children directly;
-- the item's `primaryText` becomes the radio's accessible name (`aria-label`), and its `secondaryText` and `metaText` its `aria-description`, so you do not pass label text to the radio itself;
-- the visible item text is hidden from assistive technology so it is not announced twice;
-- clicking anywhere on a row selects that row's radio.
-
-Keyboard navigation, focus management and selection are identical to a standard radio group.
-
-```js
-import '@justeattakeaway/pie-webc/components/radio-group.js';
-import '@justeattakeaway/pie-webc/components/radio.js';
-import '@justeattakeaway/pie-webc/components/form-label.js';
-import '@justeattakeaway/pie-webc/components/list-item.js';
-```
-
-```html
-<pie-radio-group name="delivery">
-  <pie-form-label slot="label">Delivery method</pie-form-label>
-  <pie-list-item selection-type="radio" primaryText="Standard delivery" secondaryText="3 to 5 working days" metaText="Free">
-    <pie-radio slot="leading" value="standard"></pie-radio>
-  </pie-list-item>
-  <pie-list-item selection-type="radio" primaryText="Express delivery" secondaryText="Next working day" metaText="£4.99">
-    <pie-radio slot="leading" value="express"></pie-radio>
-  </pie-list-item>
-  <pie-list-item selection-type="radio" disabled primaryText="Collection" secondaryText="Collect from a nearby store">
-    <pie-radio slot="leading" value="collection" disabled></pie-radio>
-  </pie-list-item>
-  <pie-list-item selection-type="radio" primaryText="Locker" secondaryText="Pick up from a parcel locker" metaText="£1.99">
-    <pie-radio slot="leading" value="locker"></pie-radio>
-  </pie-list-item>
-</pie-radio-group>
-```
+For full usage details and code examples, see the [`pie-list` documentation](https://webc.pie.design/?path=/docs/components-list--overview).
 
 ## Questions and Support
 

package/dist/index.js

@@ -1,4 +1,4 @@
-import { LitElement as x, isServer as C, html as p, nothing as m, unsafeCSS as y } from "lit";
+import { LitElement as x, isServer as C, html as p, nothing as g, unsafeCSS as y } from "lit";
 import { state as _, property as u } from "lit/decorators.js";
 import { FormControlMixin as w, RtlMixin as T, parentDisabledContext as R, wrapNativeEvent as S, validPropertyValues as E, safeCustomElement as I } from "@justeattakeaway/pie-webc-core";
 import { ifDefined as L } from "lit/directives/if-defined.js";
@@ -9,7 +9,7 @@ const b = class b extends x {
     this.getAttribute("v") || this.setAttribute("v", b.v);
   }
 };
-b.v = "1.2.1";
+b.v = "1.2.3";
 let f = b;
 /**
  * @license
@@ -85,7 +85,7 @@ class F extends D {
     this.host.dispatchEvent(new N(this.context, this.host));
   }
 }
-const P = "*,*:after,*:before{box-sizing:inherit}:host{display:block}:host ::slotted(pie-list-item:not(:last-of-type)){--list-item-size-modifier: 1px;--list-item-border: var(--list-item-size-modifier) solid var(--dt-color-divider-default)}.c-radioGroup{--radio-group-gap: var(--dt-spacing-c);--radio-group-gap--inline: var(--dt-spacing-c) var(--dt-spacing-e);margin:0;padding:0;border:0;min-width:0;display:flex;flex-flow:column wrap}.c-radioGroup>legend{margin-block-end:var(--dt-spacing-b)}.c-radioGroup.c-radioGroup--inline{flex-flow:row wrap;gap:var(--radio-group-gap--inline)}.c-radioGroup.c-radioGroup--hasAssistiveText{margin-block-end:var(--dt-spacing-a)}.c-radioGroup:not(.c-radioGroup--inline) ::slotted(pie-radio:not(:first-of-type)){margin-block-start:var(--radio-group-gap)}", G = ["default", "success", "error"], $ = "pie-radio-group-disabled", c = {
+const P = "*,*:after,*:before{box-sizing:inherit}:host{display:block}.c-radioGroup{--radio-group-gap: var(--dt-spacing-c);--radio-group-gap--inline: var(--dt-spacing-c) var(--dt-spacing-e);margin:0;padding:0;border:0;min-width:0;display:flex;flex-flow:column wrap}.c-radioGroup>legend{margin-block-end:var(--dt-spacing-b)}.c-radioGroup.c-radioGroup--inline{flex-flow:row wrap;gap:var(--radio-group-gap--inline)}.c-radioGroup.c-radioGroup--hasAssistiveText{margin-block-end:var(--dt-spacing-a)}.c-radioGroup:not(.c-radioGroup--inline) ::slotted(pie-radio:not(:first-of-type)){margin-block-start:var(--radio-group-gap)}", G = ["default", "success", "error"], $ = "pie-radio-group-disabled", c = {
   status: "default",
   disabled: !1,
   isInline: !1,
@@ -96,7 +96,7 @@ var k = Object.defineProperty, B = Object.getOwnPropertyDescriptor, d = (t, e, s
     (a = t[r]) && (o = (i ? a(e, s, o) : a(o)) || o);
   return i && o && k(e, s, o), o;
 };
-const q = "pie-radio-group", g = "assistive-text";
+const q = "pie-radio-group", m = "assistive-text";
 let l = class extends w(T(f)) {
   constructor() {
     super(...arguments), this._hasLabel = !1, this._fieldSetTabIndex = 0, this._allRadiosDisabled = !1, this.value = c.value, this.isInline = c.isInline, this.disabled = c.disabled, this._disabledProvider = C ? void 0 : new F(this, { context: R, initialValue: c.disabled }), this.status = c.status;
@@ -320,18 +320,18 @@ let l = class extends w(T(f)) {
                 name=${L(t)}
                 ?disabled=${s}
                 data-test-id="pie-radio-group-fieldset"
-                aria-describedby=${n ? g : m}
+                aria-describedby=${n ? m : g}
                 class="${O(h)}">
                     ${this._renderWrappedLabel()}
                 <slot @slotchange=${this._handleRadioSlotChange}></slot>
             </fieldset>
             ${n ? p`
                 <pie-assistive-text
-                    id=${g}
+                    id=${m}
                     variant=${i}
                     message=${o}
                     data-test-id="pie-radio-group-assistive-text">
-                    </pie-assistive-text>` : m}
+                    </pie-assistive-text>` : g}
         `;
   }
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-radio-group",
   "description": "PIE Design System Radio Group built using Web Components",
-  "version": "1.2.1",
+  "version": "1.2.3",
   "repository": {
     "type": "git",
     "url": "https://github.com/justeattakeaway/pie",
@@ -44,13 +44,13 @@
   "license": "Apache-2.0",
   "devDependencies": {
     "@justeattakeaway/pie-components-config": "0.21.3",
-    "@justeattakeaway/pie-css": "1.3.1",
+    "@justeattakeaway/pie-css": "1.3.3",
     "@justeattakeaway/pie-monorepo-utils": "0.9.8",
-    "@justeattakeaway/pie-radio": "1.2.0"
+    "@justeattakeaway/pie-radio": "1.2.1"
   },
   "dependencies": {
-    "@justeattakeaway/pie-assistive-text": "1.0.6",
-    "@justeattakeaway/pie-webc-core": "16.1.0",
+    "@justeattakeaway/pie-assistive-text": "1.0.7",
+    "@justeattakeaway/pie-webc-core": "16.1.1",
     "@lit/context": "1.1.6"
   },
   "customElements": "custom-elements.json",

package/src/radio-group.scss

@@ -2,10 +2,6 @@
 
 :host {
     display: block;
-
-    // Applies the divider between adjacent `pie-list-item`s when radios are wrapped in them.
-    // Direct-child radios are unaffected (the selector only matches `pie-list-item`).
-    @include p.list-item-divider;
 }
 
 .c-radioGroup {