@justeattakeaway/pie-radio-group 1.2.4 → 1.2.6

package/README.md

@@ -122,6 +122,10 @@ For a list-style layout (each option on its own row with primary and secondary t
 
 For full usage details and code examples, see the [`pie-list` documentation](https://webc.pie.design/?path=/docs/components-list--overview).
 
+#### SSR and group-disabled
+
+Group-disabled propagation occurs at runtime via Lit context. If you need disabled styles on page load in an SSR environment, set `disabled` directly on each item rather than relying on the group container.
+
 ## Questions and Support
 
 If you work at Just Eat Takeaway.com, please contact us on **#help-designsystem**. Otherwise, please raise an issue on [Github](https://github.com/justeattakeaway/pie/issues).

package/custom-elements.json

@@ -84,15 +84,6 @@
             }
           ],
           "members": [
-            {
-              "kind": "field",
-              "name": "_hasLabel",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "private",
-              "default": "false"
-            },
             {
               "kind": "field",
               "name": "_fieldSetTabIndex",
@@ -248,26 +239,6 @@
               ],
               "description": "Handles the radio change event, updates the selected value, and emits a change event for consumers."
             },
-            {
-              "kind": "method",
-              "name": "_handleLabelSlotChange",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "e",
-                  "type": {
-                    "text": "Event"
-                  },
-                  "description": "The slotchange event."
-                }
-              ],
-              "description": "Updates the `_hasLabel` state when content is added to the label slot."
-            },
             {
               "kind": "method",
               "name": "_handleRadioSlotChange",
@@ -285,17 +256,6 @@
               "privacy": "private",
               "description": "Prevent radio buttons from receiving focus"
             },
-            {
-              "kind": "method",
-              "name": "_renderWrappedLabel",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "TemplateResult"
-                }
-              },
-              "description": "Renders the label element inside a legend, wrapping the slot content."
-            },
             {
               "kind": "method",
               "name": "_applyNameToChildren",

package/dist/index.d.ts

@@ -5,7 +5,7 @@ import { GenericConstructor } from '@justeattakeaway/pie-webc-core';
 import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
 import { PropertyValues } from 'lit';
 import { RTLInterface } from '@justeattakeaway/pie-webc-core';
-import { TemplateResult } from 'lit';
+import { TemplateResult } from 'lit-html';
 
 export declare type DefaultProps = ComponentDefaultProps<RadioGroupProps, keyof Omit<RadioGroupProps, 'assistiveText' | 'name'>>;
 
@@ -25,7 +25,6 @@ export declare const ON_RADIO_GROUP_DISABLED = "pie-radio-group-disabled";
  * @event {CustomEvent} change - when one of the radios state is changed.
  */
 export declare class PieRadioGroup extends PieRadioGroup_base implements RadioGroupProps {
-    private _hasLabel;
     private _fieldSetTabIndex;
     private _allRadiosDisabled;
     name: RadioGroupProps['name'];
@@ -68,12 +67,6 @@ export declare class PieRadioGroup extends PieRadioGroup_base implements RadioGr
      * @private
      */
     private _handleRadioChange;
-    /**
-     * Updates the `_hasLabel` state when content is added to the label slot.
-     * @param {Event} e - The slotchange event.
-     * @private
-     */
-    private _handleLabelSlotChange;
     /**
      * Ensures all newly added radio buttons are tabbable and inherit the name property
      */
@@ -82,12 +75,6 @@ export declare class PieRadioGroup extends PieRadioGroup_base implements RadioGr
      * Prevent radio buttons from receiving focus
      */
     private _resetButtonsTabIndex;
-    /**
-     * Renders the label element inside a legend, wrapping the slot content.
-     * @returns {TemplateResult } The template for the label slot.
-     * @private
-     */
-    private _renderWrappedLabel;
     private _applyNameToChildren;
     protected updated(_changedProperties: PropertyValues<this>): void;
     connectedCallback(): void;

package/dist/index.js

@@ -1,22 +1,22 @@
-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";
-import { classMap as O } from "lit/directives/class-map.js";
+import { LitElement as x, isServer as C, nothing as v, html as _, unsafeCSS as y } from "lit";
+import { state as m, property as u } from "lit/decorators.js";
+import { FormControlMixin as w, RtlMixin as T, parentDisabledContext as R, wrapNativeEvent as E, validPropertyValues as I, safeCustomElement as S } from "@justeattakeaway/pie-webc-core";
+import { ifDefined as O } from "lit/directives/if-defined.js";
+import { classMap as A } from "lit/directives/class-map.js";
 import "@justeattakeaway/pie-assistive-text";
-const b = class b extends x {
+const p = class p extends x {
   willUpdate() {
-    this.getAttribute("v") || this.setAttribute("v", b.v);
+    this.getAttribute("v") || this.setAttribute("v", p.v);
   }
 };
-b.v = "1.2.4";
-let f = b;
+p.v = "1.2.6";
+let b = p;
 /**
  * @license
  * Copyright 2021 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-let A = class extends Event {
+let D = class extends Event {
   constructor(e, s, i, o) {
     super("context-request", { bubbles: !0, composed: !0 }), this.context = e, this.contextTarget = s, this.callback = i, this.subscribe = o ?? !1;
   }
@@ -26,7 +26,7 @@ let A = class extends Event {
  * Copyright 2021 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-class D {
+class L {
   get value() {
     return this.o;
   }
@@ -64,7 +64,7 @@ class N extends Event {
     super("context-provider", { bubbles: !0, composed: !0 }), this.context = e, this.contextTarget = s;
   }
 }
-class F extends D {
+class G extends L {
   constructor(e, s, i) {
     var o, r;
     super(s.context !== void 0 ? s.initialValue : i), this.onContextRequest = (a) => {
@@ -74,7 +74,7 @@ class F extends D {
     }, this.onProviderRequest = (a) => {
       if (a.context !== this.context || (a.contextTarget ?? a.composedPath()[0]) === this.host) return;
       const n = /* @__PURE__ */ new Set();
-      for (const [h, { consumerHost: v }] of this.subscriptions) n.has(h) || (n.add(h), v.dispatchEvent(new A(this.context, v, h, !0)));
+      for (const [h, { consumerHost: f }] of this.subscriptions) n.has(h) || (n.add(h), f.dispatchEvent(new D(this.context, f, h, !0)));
       a.stopPropagation();
     }, this.host = e, s.context !== void 0 ? this.context = s.context : this.context = s, this.attachListeners(), (r = (o = this.host).addController) == null || r.call(o, this);
   }
@@ -85,21 +85,21 @@ class F extends D {
     this.host.dispatchEvent(new N(this.context, this.host));
   }
 }
-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 = {
+const F = "*,*: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:0;padding:0}.c-radioGroup>legend ::slotted(pie-form-label),.c-radioGroup>legend ::slotted(label){display:block;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--inline>legend{flex-basis:100%}.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)}", P = ["default", "success", "error"], k = "pie-radio-group-disabled", c = {
   status: "default",
   disabled: !1,
   isInline: !1,
   value: ""
 };
-var k = Object.defineProperty, B = Object.getOwnPropertyDescriptor, d = (t, e, s, i) => {
-  for (var o = i > 1 ? void 0 : i ? B(e, s) : e, r = t.length - 1, a; r >= 0; r--)
+var B = Object.defineProperty, $ = Object.getOwnPropertyDescriptor, l = (t, e, s, i) => {
+  for (var o = i > 1 ? void 0 : i ? $(e, s) : e, r = t.length - 1, a; r >= 0; r--)
     (a = t[r]) && (o = (i ? a(e, s, o) : a(o)) || o);
-  return i && o && k(e, s, o), o;
+  return i && o && B(e, s, o), o;
 };
-const q = "pie-radio-group", m = "assistive-text";
-let l = class extends w(T(f)) {
+const q = "pie-radio-group", g = "assistive-text";
+let d = class extends w(T(b)) {
   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;
+    super(...arguments), this._fieldSetTabIndex = 0, this._allRadiosDisabled = !1, this.value = c.value, this.isInline = c.isInline, this.disabled = c.disabled, this._disabledProvider = C ? void 0 : new G(this, { context: R, initialValue: c.disabled }), this.status = c.status;
   }
   /**
    * The radios in the group. This uses a subtree query rather than immediate slotted
@@ -116,7 +116,7 @@ let l = class extends w(T(f)) {
    * @private
    */
   _handleDisabled() {
-    this._slottedChildren.forEach((t) => t.dispatchEvent(new CustomEvent($, {
+    this._slottedChildren.forEach((t) => t.dispatchEvent(new CustomEvent(k, {
       bubbles: !1,
       composed: !1,
       detail: { disabled: this.disabled }
@@ -149,18 +149,9 @@ let l = class extends w(T(f)) {
     t.stopPropagation();
     const e = t.target;
     this._handleRadioSelection(e.value), this._resetButtonsTabIndex();
-    const s = S(t);
+    const s = E(t);
     this.dispatchEvent(s);
   }
-  /**
-   * Updates the `_hasLabel` state when content is added to the label slot.
-   * @param {Event} e - The slotchange event.
-   * @private
-   */
-  _handleLabelSlotChange(t) {
-    const e = t.target.assignedNodes({ flatten: !0 });
-    this._hasLabel = e.length > 0;
-  }
   /**
    * Ensures all newly added radio buttons are tabbable and inherit the name property
    */
@@ -175,14 +166,6 @@ let l = class extends w(T(f)) {
       t.tabIndex = -1;
     });
   }
-  /**
-   * Renders the label element inside a legend, wrapping the slot content.
-   * @returns {TemplateResult } The template for the label slot.
-   * @private
-   */
-  _renderWrappedLabel() {
-    return this._hasLabel ? p`<legend><slot name='label' @slotchange=${this._handleLabelSlotChange}></slot></legend>` : p`<slot name='label' @slotchange=${this._handleLabelSlotChange}></slot>`;
-  }
   _applyNameToChildren() {
     this._slottedChildren.forEach((t) => {
       this.name && t.setAttribute("name", this.name);
@@ -313,63 +296,60 @@ let l = class extends w(T(f)) {
       "c-radioGroup--inline": e,
       "c-radioGroup--hasAssistiveText": n
     };
-    return p`
+    return _`
             <fieldset
                 tabindex=${a ? -1 : r}
                 role="radiogroup"
-                name=${L(t)}
+                name=${O(t)}
                 ?disabled=${s}
                 data-test-id="pie-radio-group-fieldset"
-                aria-describedby=${n ? m : g}
-                class="${O(h)}">
-                    ${this._renderWrappedLabel()}
+                aria-describedby=${n ? g : v}
+                class="${A(h)}">
+                    <legend><slot name='label'></slot></legend>
                 <slot @slotchange=${this._handleRadioSlotChange}></slot>
             </fieldset>
-            ${n ? p`
+            ${n ? _`
                 <pie-assistive-text
-                    id=${m}
+                    id=${g}
                     variant=${i}
                     message=${o}
                     data-test-id="pie-radio-group-assistive-text">
-                    </pie-assistive-text>` : g}
+                    </pie-assistive-text>` : v}
         `;
   }
 };
-l.styles = y(P);
-d([
-  _()
-], l.prototype, "_hasLabel", 2);
-d([
-  _()
-], l.prototype, "_fieldSetTabIndex", 2);
-d([
-  _()
-], l.prototype, "_allRadiosDisabled", 2);
-d([
+d.styles = y(F);
+l([
+  m()
+], d.prototype, "_fieldSetTabIndex", 2);
+l([
+  m()
+], d.prototype, "_allRadiosDisabled", 2);
+l([
   u({ type: String, reflect: !0 })
-], l.prototype, "name", 2);
-d([
+], d.prototype, "name", 2);
+l([
   u({ type: String })
-], l.prototype, "value", 2);
-d([
+], d.prototype, "value", 2);
+l([
   u({ type: Boolean })
-], l.prototype, "isInline", 2);
-d([
+], d.prototype, "isInline", 2);
+l([
   u({ type: Boolean, reflect: !0 })
-], l.prototype, "disabled", 2);
-d([
+], d.prototype, "disabled", 2);
+l([
   u({ type: String })
-], l.prototype, "assistiveText", 2);
-d([
+], d.prototype, "assistiveText", 2);
+l([
   u({ type: String }),
-  E(q, G, c.status)
-], l.prototype, "status", 2);
-l = d([
-  I("pie-radio-group")
-], l);
+  I(q, P, c.status)
+], d.prototype, "status", 2);
+d = l([
+  S("pie-radio-group")
+], d);
 export {
-  $ as ON_RADIO_GROUP_DISABLED,
-  l as PieRadioGroup,
+  k as ON_RADIO_GROUP_DISABLED,
+  d as PieRadioGroup,
   c as defaultProps,
-  G as statusTypes
+  P as statusTypes
 };

package/dist/react.d.ts

@@ -6,7 +6,7 @@ import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElem
 import { PropertyValues } from 'lit';
 import * as React_2 from 'react';
 import { RTLInterface } from '@justeattakeaway/pie-webc-core';
-import { TemplateResult } from 'lit';
+import { TemplateResult } from 'lit-html';
 
 export declare type DefaultProps = ComponentDefaultProps<RadioGroupProps, keyof Omit<RadioGroupProps, 'assistiveText' | 'name'>>;
 
@@ -28,7 +28,6 @@ export declare const PieRadioGroup: React_2.ForwardRefExoticComponent<React_2.Pr
  * @event {CustomEvent} change - when one of the radios state is changed.
  */
 declare class PieRadioGroup_2 extends PieRadioGroup_base implements RadioGroupProps {
-    private _hasLabel;
     private _fieldSetTabIndex;
     private _allRadiosDisabled;
     name: RadioGroupProps['name'];
@@ -71,12 +70,6 @@ declare class PieRadioGroup_2 extends PieRadioGroup_base implements RadioGroupPr
      * @private
      */
     private _handleRadioChange;
-    /**
-     * Updates the `_hasLabel` state when content is added to the label slot.
-     * @param {Event} e - The slotchange event.
-     * @private
-     */
-    private _handleLabelSlotChange;
     /**
      * Ensures all newly added radio buttons are tabbable and inherit the name property
      */
@@ -85,12 +78,6 @@ declare class PieRadioGroup_2 extends PieRadioGroup_base implements RadioGroupPr
      * Prevent radio buttons from receiving focus
      */
     private _resetButtonsTabIndex;
-    /**
-     * Renders the label element inside a legend, wrapping the slot content.
-     * @returns {TemplateResult } The template for the label slot.
-     * @private
-     */
-    private _renderWrappedLabel;
     private _applyNameToChildren;
     protected updated(_changedProperties: PropertyValues<this>): void;
     connectedCallback(): void;

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.4",
+  "version": "1.2.6",
   "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.4.0",
-    "@justeattakeaway/pie-monorepo-utils": "0.9.8",
-    "@justeattakeaway/pie-radio": "1.2.2"
+    "@justeattakeaway/pie-css": "1.5.0",
+    "@justeattakeaway/pie-monorepo-utils": "0.9.9",
+    "@justeattakeaway/pie-radio": "1.2.3"
   },
   "dependencies": {
-    "@justeattakeaway/pie-assistive-text": "1.0.8",
-    "@justeattakeaway/pie-webc-core": "17.0.0",
+    "@justeattakeaway/pie-assistive-text": "1.0.9",
+    "@justeattakeaway/pie-webc-core": "18.0.0",
     "@lit/context": "1.1.6"
   },
   "customElements": "custom-elements.json",

package/src/index.ts

@@ -4,7 +4,6 @@ import {
     unsafeCSS,
     nothing,
     type PropertyValues,
-    type TemplateResult,
 } from 'lit';
 import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
 import {
@@ -44,9 +43,6 @@ const assistiveTextId = 'assistive-text';
  */
 @safeCustomElement('pie-radio-group')
 export class PieRadioGroup extends FormControlMixin(RtlMixin(PieElement)) implements RadioGroupProps {
-    @state()
-    private _hasLabel = false;
-
     @state()
     private _fieldSetTabIndex = 0;
 
@@ -148,16 +144,6 @@ export class PieRadioGroup extends FormControlMixin(RtlMixin(PieElement)) implem
         this.dispatchEvent(changedEvent);
     }
 
-    /**
-     * Updates the `_hasLabel` state when content is added to the label slot.
-     * @param {Event} e - The slotchange event.
-     * @private
-     */
-    private _handleLabelSlotChange (e: { target: HTMLSlotElement }): void {
-        const childNodes = e.target.assignedNodes({ flatten: true });
-        this._hasLabel = childNodes.length > 0;
-    }
-
     /**
      * Ensures all newly added radio buttons are tabbable and inherit the name property
      */
@@ -175,17 +161,6 @@ export class PieRadioGroup extends FormControlMixin(RtlMixin(PieElement)) implem
         });
     }
 
-    /**
-     * Renders the label element inside a legend, wrapping the slot content.
-     * @returns {TemplateResult } The template for the label slot.
-     * @private
-     */
-    private _renderWrappedLabel (): TemplateResult {
-        return this._hasLabel
-            ? html`<legend><slot name='label' @slotchange=${this._handleLabelSlotChange}></slot></legend>`
-            : html`<slot name='label' @slotchange=${this._handleLabelSlotChange}></slot>`;
-    }
-
     private _applyNameToChildren () : void {
         this._slottedChildren.forEach((radio) => {
             if (this.name) {
@@ -462,7 +437,7 @@ export class PieRadioGroup extends FormControlMixin(RtlMixin(PieElement)) implem
                 data-test-id="pie-radio-group-fieldset"
                 aria-describedby=${hasAssistiveText ? assistiveTextId : nothing}
                 class="${classMap(classes)}">
-                    ${this._renderWrappedLabel()}
+                    <legend><slot name='label'></slot></legend>
                 <slot @slotchange=${this._handleRadioSlotChange}></slot>
             </fieldset>
             ${hasAssistiveText ? html`

package/src/radio-group.scss

@@ -16,7 +16,14 @@
     flex-flow: column wrap;
 
     > legend {
-        margin-block-end: var(--dt-spacing-b);
+        margin: 0;
+        padding: 0;
+
+        ::slotted(pie-form-label),
+        ::slotted(label) {
+            display: block;
+            margin-block-end: var(--dt-spacing-b);
+        }
     }
 
     &.c-radioGroup--inline {
@@ -24,6 +31,10 @@
 
         // inline only supported for pie-radio in slots (rather than list-item) so gap can be used here
         gap: var(--radio-group-gap--inline);
+
+        > legend {
+            flex-basis: 100%;
+        }
     }
 
     &.c-radioGroup--hasAssistiveText {