feat(#2936): radio style update 2.0

libs/angular-components/src/lib/components/radio-group/radio-group.ts

@@ -1,6 +1,7 @@
 import {
   GoabRadioGroupOnChangeDetail,
   GoabRadioGroupOrientation,
+  GoabRadioGroupSize,
 } from "@abgov/ui-components-common";
 import {
   CUSTOM_ELEMENTS_SCHEMA,
@@ -22,6 +23,7 @@ import { GoabControlValueAccessor } from "../base.component";
       [attr.value]="value"
       [disabled]="disabled"
       [attr.orientation]="orientation"
+      [attr.size]="size"
       [attr.error]="error"
       [attr.arialabel]="ariaLabel"
       [id]="id"
@@ -47,6 +49,7 @@ import { GoabControlValueAccessor } from "../base.component";
 export class GoabRadioGroup extends GoabControlValueAccessor {
   @Input() name?: string;
   @Input() orientation?: GoabRadioGroupOrientation;
+  @Input() size?: GoabRadioGroupSize;
   @Input() ariaLabel?: string;
 
   @Output() onChange = new EventEmitter<GoabRadioGroupOnChangeDetail>();

libs/common/src/lib/common.ts

@@ -229,12 +229,14 @@ export type GoabSkeletonSize = "1" | "2" | "3" | "4";
 // Radio
 
 export type GoabRadioGroupOrientation = "horizontal" | "vertical";
+export type GoabRadioGroupSize = "normal" | "compact";
 
 export interface GoabRadioGroupProps extends Margins {
   name: string;
   value?: string;
   disabled?: boolean;
   orientation?: GoabRadioGroupOrientation;
+  size?: GoabRadioGroupSize;
   testId?: string;
   error?: boolean;
   ariaLabel?: string;

libs/react-components/src/lib/radio-group/radio-group.tsx

@@ -2,6 +2,7 @@ import { useEffect, useRef, type JSX } from "react";
 import {
   GoabRadioGroupOnChangeDetail,
   GoabRadioGroupOrientation,
+  GoabRadioGroupSize,
   Margins,
 } from "@abgov/ui-components-common";
 
@@ -13,6 +14,7 @@ interface WCProps extends Margins {
   value?: string;
   id?: string;
   orientation?: GoabRadioGroupOrientation;
+  size?: GoabRadioGroupSize;
   disabled?: string;
   error?: string;
   arialabel?: string;
@@ -34,6 +36,7 @@ export interface GoabRadioGroupProps extends Margins {
   id?: string;
   disabled?: boolean;
   orientation?: GoabRadioGroupOrientation;
+  size?: GoabRadioGroupSize;
   testId?: string;
   error?: boolean;
   ariaLabel?: string;
@@ -46,6 +49,7 @@ export function GoabRadioGroup({
   value,
   children,
   orientation,
+  size,
   disabled,
   error,
   id,
@@ -87,6 +91,7 @@ export function GoabRadioGroup({
       name={name}
       value={value}
       orientation={orientation}
+      size={size}
       disabled={disabled ? "true" : undefined}
       error={error ? "true" : undefined}
       arialabel={ariaLabel}

libs/web-components/src/components/radio-group/RadioGroup.svelte

@@ -25,20 +25,26 @@
     FieldsetErrorRelayDetail, FieldsetResetFieldsMsg,
   } from "../../types/relay-types";
 
-  // Validator
+  // Validators
   const [Orientations, validateOrientation] = typeValidator("Radio group orientation", [
     "vertical",
     "horizontal",
   ]);
+  const [Sizes, validateSize] = typeValidator("Radio group size", [
+    "normal",
+    "compact",
+  ]);
 
-  // Type
+  // Types
   type Orientation = (typeof Orientations)[number];
+  type Size = (typeof Sizes)[number];
 
   // Public
 
   export let name: string;
   export let value: string;
   export let orientation: Orientation = "vertical";
+  export let size: Size = "normal";
   export let disabled: string = "false";
   export let error: string = "false";
   export let testid: string = "";
@@ -87,6 +93,7 @@
 
   onMount(async () => {
     validateOrientation(orientation);
+    validateSize(size);
     await tick(); // for angular to register public form name
     addRelayListener();
     sendMountedMessage();
@@ -165,6 +172,7 @@
             name,
             checked: props.value === value,
             revealAriaLabel: props.revealAriaLabel,
+            size,
           },
         }),
       );
@@ -213,7 +221,7 @@
 <div
   bind:this={_rootEl}
   style={calculateMargin(mt, mr, mb, ml)}
-  class={`goa-radio-group--${orientation}`}
+  class={`goa-radio-group--${orientation} goa-radio-group--${size}`}
   data-testid={testid}
   role="radiogroup"
   aria-label={arialabel}
@@ -227,21 +235,36 @@
 
 :host {
     font-family: var(--goa-font-family-sans);
+
+    /* TEMP: Issue #2936 design token overrides - remove when tokens published to npm */
+    --goa-radio-group-gap-horizontal: var(--goa-space-xl); /* Updated: 24px → 32px */
+    --goa-radio-group-gap-vertical: var(--goa-space-m); /* Keep existing: 16px */
+    --goa-radio-group-gap-horizontal-compact: var(--goa-space-l); /* New compact: 24px */
+    --goa-radio-group-gap-vertical-compact: var(--goa-space-s); /* New compact: 12px */
   }
 
   .goa-radio-group--horizontal {
     display: flex;
     flex-direction: row;
-    gap: var(--goa-radio-group-gap-horizontal);
+    gap: var(--goa-radio-group-gap-horizontal, 32px);
   }
 
   .goa-radio-group--vertical {
     display: flex;
     flex-direction: column;  /* Vertical stacking */
-    gap: var(--goa-radio-group-gap-vertical);  /* Adds spacing */
+    gap: var(--goa-radio-group-gap-vertical, 16px);  /* Adds spacing */
     width: 100%;
   }
 
+  /* Compact size variant */
+  .goa-radio-group--horizontal.goa-radio-group--compact {
+    gap: var(--goa-radio-group-gap-horizontal-compact, 24px);
+  }
+
+  .goa-radio-group--vertical.goa-radio-group--compact {
+    gap: var(--goa-radio-group-gap-vertical-compact, 12px);
+  }
+
   /* Focus styles */
   .goa-radio-group--horizontal:focus,
   .goa-radio-group--vertical:focus {