@mozaic-ds/web-components 1.0.0-beta.7 → 1.1.0

package/dist/components/radio/Radio.svelte

@@ -1,41 +1,56 @@
 <svelte:options
   customElement={{
     tag: 'm-radio',
+    props: {
+      checked: { reflect: true, type: 'Boolean', attribute: 'checked' },
+    },
     extend: customElementForwardEvents,
   }}
 />
 
 <script lang="ts">
   import { customElementForwardEvents } from '../../utils';
-  let {
-    id = '',
-    name = '',
-    checked = false,
-    disabled = false,
-    isinvalid = false,
-    label = '',
-    ...events
-  } = $props();
-
-  function getClasses(isInvalid: boolean): string {
-    const classes = ['mc-radio__input'];
-    if (isInvalid) {
-      classes.push('is-invalid');
-    }
-    return classes.join(' ');
+  /**
+   * A radio button is a selection control that allows users to choose a single option from a list of mutually exclusive choices. Unlike checkboxes, only one option can be selected at a time within the same group. Radio Buttons are commonly used in forms, surveys, and settings where a single choice must be made.
+   */
+  interface Props {
+    /**
+     * A unique identifier for the radio, used to associate the label with the form element.
+     */
+    id: string;
+    /**
+     * The name attribute for the radio element, typically used for form submission.
+     */
+    name?: string;
+    /**
+     * The text label displayed next to the radio.
+     */
+    label?: string;
+    /**
+     * The radio's checked state.
+     */
+    checked?: boolean;
+    /**
+     * If `true`, applies an invalid state to the radio.
+     */
+    isinvalid?: boolean;
+    /**
+     * If `true`, disables the radio, making it non-interactive.
+     */
+    disabled?: boolean;
   }
+
+  let { id, name, label, checked = $bindable(false), disabled, isinvalid }: Props = $props();
 </script>
 
-<!-- svelte-ignore a11y_click_events_have_key_events -->
 <div class="mc-radio">
   <input
     {id}
     type="radio"
-    class={getClasses(isinvalid)}
+    class={['mc-radio__input', isinvalid && 'is-invalid']}
     {name}
-    {checked}
     {disabled}
-    {...events}
+    {checked}
   />
   <label for={id} class="mc-radio__label">{label}</label>
 </div>

package/dist/components/radio/Radio.svelte.d.ts

@@ -1,11 +1,33 @@
-declare const Radio: import("svelte").Component<{
-    id?: string;
+/**
+ * A radio button is a selection control that allows users to choose a single option from a list of mutually exclusive choices. Unlike checkboxes, only one option can be selected at a time within the same group. Radio Buttons are commonly used in forms, surveys, and settings where a single choice must be made.
+ */
+interface Props {
+    /**
+     * A unique identifier for the radio, used to associate the label with the form element.
+     */
+    id: string;
+    /**
+     * The name attribute for the radio element, typically used for form submission.
+     */
     name?: string;
+    /**
+     * The text label displayed next to the radio.
+     */
+    label?: string;
+    /**
+     * The radio's checked state.
+     */
     checked?: boolean;
-    disabled?: boolean;
+    /**
+     * If `true`, applies an invalid state to the radio.
+     */
     isinvalid?: boolean;
-    label?: string;
-} & Record<string, any>, {}, "">;
+    /**
+     * If `true`, disables the radio, making it non-interactive.
+     */
+    disabled?: boolean;
+}
+declare const Radio: import("svelte").Component<Props, {}, "checked">;
 type Radio = ReturnType<typeof Radio>;
 export default Radio;
 //# sourceMappingURL=Radio.svelte.d.ts.map

package/dist/components/radio/Radio.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/radio/Radio.svelte.ts"],"names":[],"mappings":"AAyCA,QAAA,MAAM,KAAK;SAnCyC,MAAM;WAAS,MAAM;cAAY,OAAO;eAAa,OAAO;gBAAc,OAAO;YAAU,MAAM;gCAmClG,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Radio.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/radio/Radio.svelte.ts"],"names":[],"mappings":"AAKE;;GAEG;AACH,UAAU,KAAK;IACb;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IACX;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAyBH,QAAA,MAAM,KAAK,kDAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}

package/dist/components/radiogroup/README.md

@@ -0,0 +1,14 @@
+# `m-radio-group`
+
+A radio button is a selection control that allows users to choose a single option from a list of mutually exclusive choices. Unlike checkboxes, only one option can be selected at a time within the same group. Radio Buttons are commonly used in forms, surveys, and settings where a single choice must be made.
+
+## Props
+
+| Name | Description | Type | Default |
+|------|-------------|------|---------|
+| `name*` | The name attribute for the radio element, typically used for form submission. | `string` |   |
+| `value` | The current value of the radio group. | `string` | `$bindable()` |
+| `options*` | list of properties of each radio button of the radio group | `Array<{ id: string; label: string; value: string; disabled?: boolean; }>` |   |
+| `isinvalid` | If `true`, applies an invalid state to the radio group. | `boolean` |   |
+| `inline` | If `true`, make the form element of the group inline. | `boolean` |   |
+

package/dist/components/radiogroup/RadioGroup.js

@@ -1,8 +1,8 @@
-import{n as K,c as L,p as M,a as N,b as i,f as j,s as S,d as u,t as z,h as E,i as O,j as t,r as n,e as q,g as B,m as a,o as P}from"../../custom-element.js";import{i as Q}from"../../if.js";import{e as T}from"../../each.js";import{s as _,r as U}from"../../attributes.js";import{b as V}from"../../input.js";import{c as W}from"../../custom-element-forward-events.js";var X=j('<legend class="mc-field__legend svelte-clvmul"> </legend>'),Y=j('<div class="mc-radio mc-field__item svelte-clvmul"><input type="radio"/> <label class="mc-radio__label svelte-clvmul"> </label></div>'),Z=j('<div class="radio-group-container"><fieldset class="mc-field mc-field--group svelte-clvmul"><!> <div></div></fieldset></div>');const $={hash:"svelte-clvmul",code:`/**
+import{c as D,p as F,a as G,b as i,f as E,t as g,i as k,j as R,k as t,r as _,e as w,g as x,d as y,s as S,m as o,h as q}from"../../custom-element.js";import{e as B}from"../../each.js";import{r as C,s as b}from"../../attributes.js";import{b as H}from"../../input.js";import{c as I}from"../../custom-element-forward-events.js";var J=E('<div class="mc-radio mc-field__item svelte-clvmul"><input type="radio"/> <label class="mc-radio__label svelte-clvmul"> </label></div>'),K=E("<div></div>");const L={hash:"svelte-clvmul",code:`/**
  * Do not edit directly, this file was auto-generated.
  */.mc-radio.svelte-clvmul {align-items:center;display:flex;gap:0.5rem;padding:0.375rem;}.mc-radio__label.svelte-clvmul {font-size:var(--font-size-150, 1rem);line-height:var(--line-height-s, 1.3);color:var(--forms-color-text-default, #000000);cursor:pointer;}.mc-radio__input.svelte-clvmul {appearance:none;margin:0;cursor:pointer;flex-shrink:0;transition:box-shadow 200ms ease;background-color:var(--forms-color-background-default, #ffffff);border:var(--border-m, 0.125rem) solid var(--forms-color-border-default, #666666);border-radius:100%;transition:all ease 200ms;height:1.25rem;width:1.25rem;position:relative;}.mc-radio__input.svelte-clvmul::before {border-radius:var(--radius-full, 100%);content:"";display:block;height:0.5rem;left:50%;position:absolute;top:50%;transform:translate(-50%, -50%);width:0.5rem;}.mc-radio__input.svelte-clvmul:hover {border-color:var(--forms-color-border-hover, #4d4d4d);}.mc-radio__input.svelte-clvmul:focus-visible {box-shadow:0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)), 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline:0.125rem solid transparent;outline-offset:0.125rem;}.mc-radio__input.svelte-clvmul:checked {background-color:var(--forms-color-background-checked, #117f03);}.mc-radio__input.svelte-clvmul:checked::before {background-color:var(--forms-color-background-default, #ffffff);}.mc-radio__input.svelte-clvmul:checked, .mc-radio__input.svelte-clvmul:disabled {border-color:transparent;}.mc-radio__input.svelte-clvmul:disabled {background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed;}.mc-radio__input.svelte-clvmul:disabled:checked::before {background-color:var(--forms-color-icon-disabled, #737373);}.mc-radio__input.svelte-clvmul:disabled + .mc-radio__label:where(.svelte-clvmul) {color:var(--forms-color-text-disabled, #737373);cursor:not-allowed;}.mc-radio__input.svelte-clvmul:not(:disabled):checked:hover {background-color:var(--forms-color-background-checked-hover, #006902);}.mc-radio__input.is-invalid.svelte-clvmul:not(:checked) {border-color:var(--forms-color-border-invalid, #ea302d);}.mc-radio__input.is-invalid.svelte-clvmul:not(:checked):hover {border-color:var(--forms-color-border-invalid-hover, #c61112);}
 
-/* stylelint-disable string-no-newline */ .mc-field__legend.svelte-clvmul {font-size:var(--font-size-100, 0.875rem);line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-regular, 400);color:var(--field-color-label, #000000);}.mc-field__legend.svelte-clvmul {padding-inline:0;}.mc-field__content.svelte-clvmul {margin-top:0.5rem;}.mc-field--group.svelte-clvmul {border-width:0;margin-inline:0;padding:0;}.mc-field--group.svelte-clvmul .mc-field__content:where(.svelte-clvmul) {display:flex;flex-direction:column;flex-shrink:0;gap:0.25rem;}.mc-field--group.svelte-clvmul .mc-field__content:where(.svelte-clvmul):where(.mc-field__content--inline:where(.svelte-clvmul)) {flex-flow:row wrap;gap:0.25rem 1rem;}
+/* stylelint-disable string-no-newline */.mc-field__content.svelte-clvmul {margin-top:0.5rem;}
 
-/* stylelint-enable string-no-newline */`};function ee(A,o){M(o,!0),N(A,$);const C=[];let g=i(o,"id",7),m=i(o,"selectedvalue",15),b=i(o,"options",7),d=i(o,"legend",7),h=i(o,"inline",7),p=i(o,"isinvalid",7,!1),k=i(o,"onchange",7),w=i(o,"onblur",7);var H={get id(){return g()},set id(e){g(e),t()},get selectedvalue(){return m()},set selectedvalue(e){m(e),t()},get options(){return b()},set options(e){b(e),t()},get legend(){return d()},set legend(e){d(e),t()},get inline(){return h()},set inline(e){h(e),t()},get isinvalid(){return p()},set isinvalid(e=!1){p(e),t()},get onchange(){return k()},set onchange(e){k(e),t()},get onblur(){return w()},set onblur(e){w(e),t()}},f=Z(),D=u(f),F=u(D);{var I=e=>{var l=X(),s=u(l,!0);n(l),z(()=>B(s,d())),E(e,l)};Q(F,e=>{d()&&d().length&&e(I)})}var x=S(F,2);return T(x,21,b,e=>e.id,(e,l)=>{var s=Y(),r=u(s);U(r);let G;r.__change=function(...c){var v;(v=k())==null||v.apply(this,c)};var R,y=S(r,2),J=u(y,!0);n(y),n(s),z(c=>{G=q(r,1,"mc-radio__input svelte-clvmul",null,G,c),_(r,"id",a(l).id),_(r,"name",a(l).name),r.disabled=a(l).disabled,R!==(R=a(l).value)&&(r.value=(r.__value=a(l).value)??""),_(y,"for",a(l).id),B(J,a(l).label)},[()=>({"is-invalid":p()})]),P("blur",r,function(...c){var v;(v=w())==null||v.apply(this,c)}),V(C,[],r,()=>(a(l).value,m()),m),E(e,s)}),n(x),n(D),n(f),z(()=>{_(f,"id",g()),q(x,1,`mc-field__content ${h()?"mc-field__content--inline":""}`,"svelte-clvmul")}),E(A,f),O(H)}K(["change"]);customElements.define("m-radio-group",L(ee,{options:{attribute:"options",type:"Array"},id:{},selectedvalue:{},legend:{},inline:{},isinvalid:{},onchange:{},onblur:{}},[],[],!0,W));
+/* stylelint-enable string-no-newline */.mc-field__content.svelte-clvmul:where(.mc-field__content--inline:where(.svelte-clvmul)) {display:flex;flex-flow:row wrap;gap:0.25rem 1rem;}`};function M(p,a){F(a,!0),G(p,L);const z=[];let s=i(a,"value",15),c=i(a,"name",7),d=i(a,"options",7),m=i(a,"inline",7),v=i(a,"isinvalid",7);var j={get value(){return s()},set value(e){s(e),t()},get name(){return c()},set name(e){c(e),t()},get options(){return d()},set options(e){d(e),t()},get inline(){return m()},set inline(e){m(e),t()},get isinvalid(){return v()},set isinvalid(e){v(e),t()}},n=K();return B(n,21,d,e=>e.id,(e,l)=>{var u=J(),r=y(u);C(r);var h,f=S(r,2),A=y(f,!0);_(f),_(u),g(()=>{w(r,1,x(["mc-radio__input",v()&&"is-invalid"]),"svelte-clvmul"),b(r,"id",o(l).id),b(r,"name",c()),r.disabled=o(l).disabled,h!==(h=o(l).value)&&(r.value=(r.__value=o(l).value)??""),b(f,"for",o(l).id),q(A,o(l).label)}),H(z,[],r,()=>(o(l).value,s()),s),k(e,u)}),_(n),g(()=>w(n,1,x(["mc-field__content",m()&&"mc-field__content--inline"]),"svelte-clvmul")),k(p,n),R(j)}customElements.define("m-radio-group",D(M,{options:{attribute:"options",type:"Array"},value:{},name:{},inline:{},isinvalid:{}},[],[],!0,I));
 //# sourceMappingURL=RadioGroup.js.map

package/dist/components/radiogroup/RadioGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup.js","sources":["../../../src/components/radiogroup/RadioGroup.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-radio-group',\n    props: {\n      options: { type: 'Array', attribute: 'options' },\n    },\n    extend: customElementForwardEvents,\n  }}\n/>\n\n<script lang=\"ts\">\n  import { customElementForwardEvents } from '../../utils';\n  import type { RadioGroupOption } from './radioGroup.types';\n\n  interface Props {\n    id: string;\n    selectedvalue?: string;\n    options: Array<RadioGroupOption>;\n    legend: string;\n    inline: boolean;\n    isinvalid?: boolean;\n    onchange?: (event: Event) => void;\n    onblur?: (event: FocusEvent) => void;\n  }\n\n  let {\n    id,\n    selectedvalue = $bindable(),\n    options,\n    legend,\n    inline,\n    isinvalid = false,\n    onchange,\n    onblur,\n  }: Props = $props();\n</script>\n\n<div {id} class=\"radio-group-container\">\n  <fieldset class=\"mc-field mc-field--group\">\n    {#if legend && legend.length}\n      <legend class=\"mc-field__legend\">\n        {legend}\n      </legend>\n    {/if}\n\n    <div class=\"mc-field__content {inline ? 'mc-field__content--inline' : ''}\">\n      {#each options as opt (opt.id)}\n        <div class=\"mc-radio mc-field__item\">\n          <input\n            type=\"radio\"\n            class=\"mc-radio__input\"\n            class:is-invalid={isinvalid}\n            id={opt.id}\n            name={opt.name}\n            bind:group={selectedvalue}\n            value={opt.value}\n            disabled={opt.disabled}\n            {onchange}\n            {onblur}\n          />\n          <label for={opt.id} class=\"mc-radio__label\">{opt.label}</label>\n        </div>\n      {/each}\n    </div>\n  </fieldset>\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/radio';\n  @use '@mozaic-ds/styles/components/field';\n</style>\n"],"names":["id","$.prop","$$props","selectedvalue","options","legend","inline","isinvalid","onchange","onblur","$$render","consequent","$.each","div_1","opt","$.set_attribute","input","$.get","input_value","label","$.set_text","text_1","customElementForwardEvents"],"mappings":";;;;;;2DAAA,+BA0BIA,EAAEC,EAAAC,EAAA,KAAA,CAAA,EACFC,EAAaF,EAAAC,EAAA,gBAAA,EAAA,EACbE,EAAOH,EAAAC,EAAA,UAAA,CAAA,EACPG,EAAMJ,EAAAC,EAAA,SAAA,CAAA,EACNI,EAAML,EAAAC,EAAA,SAAA,CAAA,EACNK,oBAAY,EAAK,EACjBC,EAAQP,EAAAC,EAAA,WAAA,CAAA,EACRO,EAAMR,EAAAC,EAAA,SAAA,CAAA,kTAFM,GAAK,oLAUZG,EAAM,CAAA,CAAA,kBAFNA,EAAM,GAAIA,EAAM,EAAC,QAAMK,EAAAC,CAAA,iBAOnBC,OAAAA,EAAAC,EAAA,GAAAT,EAAWU,GAAKA,EAAI,MAATA,IAAG,wLAMXC,EAAAC,EAAA,KAAAC,EAAAH,CAAG,EAAC,EAAE,EACJC,EAAAC,EAAA,OAAAC,EAAAH,CAAG,EAAC,IAAI,EAGJE,EAAA,SAAAC,EAAAH,CAAG,EAAC,SADPI,KAAAA,EAAAD,EAAAH,CAAG,EAAC,SAAJE,EAAA,OAAAA,EAAA,QAAAC,EAAAH,CAAG,EAAC,QAAK,IAKNC,EAAAI,EAAA,MAAAF,EAAAH,CAAG,EAAC,EAAE,EAA2BM,EAAAC,EAAAJ,EAAAH,CAAG,EAAC,KAAK,uBATlCP,EAAS,GAAA,kFAIpBU,EAAAH,CAAG,EAAC,MADCX,EAAa,GAAbA,2EATWG,EAAM,EAAG,4BAA8B,EAAE,GAAA,eAAA,eAV5E,8LA7BYgB"}
+{"version":3,"file":"RadioGroup.js","sources":["../../../src/components/radiogroup/RadioGroup.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-radio-group',\n    props: {\n      options: { type: 'Array', attribute: 'options' },\n    },\n    extend: customElementForwardEvents,\n  }}\n/>\n\n<script lang=\"ts\">\n  import { customElementForwardEvents } from '../../utils';\n  /**\n   * A radio button is a selection control that allows users to choose a single option from a list of mutually exclusive choices. Unlike checkboxes, only one option can be selected at a time within the same group. Radio Buttons are commonly used in forms, surveys, and settings where a single choice must be made.\n   */\n  interface Props {\n    /**\n     * The name attribute for the radio element, typically used for form submission.\n     */\n    name: string;\n    /**\n     * The current value of the radio group.\n     */\n    value?: string;\n    /**\n     * list of properties of each radio button of the radio group\n     */\n    options: Array<{\n      id: string;\n      label: string;\n      value: string;\n      disabled?: boolean;\n    }>;\n    /**\n     * If `true`, applies an invalid state to the radio group.\n     */\n    isinvalid?: boolean;\n    /**\n     * If `true`, make the form element of the group inline.\n     */\n    inline?: boolean;\n  }\n\n  let { value = $bindable(), name, options, inline, isinvalid }: Props = $props();\n</script>\n\n<div class={['mc-field__content', inline && 'mc-field__content--inline']}>\n  {#each options as option (option.id)}\n    <div class=\"mc-radio mc-field__item\">\n      <input\n        type=\"radio\"\n        class={['mc-radio__input', isinvalid && 'is-invalid']}\n        id={option.id}\n        {name}\n        bind:group={value}\n        value={option.value}\n        disabled={option.disabled}\n      />\n      <label for={option.id} class=\"mc-radio__label\">{option.label}</label>\n    </div>\n  {/each}\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/radio';\n  @use '@mozaic-ds/styles/components/field';\n\n  .mc-field__content:where(.mc-field__content--inline) {\n    display: flex;\n    flex-flow: row wrap;\n    gap: 0.25rem 1rem;\n  }\n</style>\n"],"names":["value","$.prop","$$props","name","options","inline","isinvalid","$.each","div","option","$.set_attribute","input","$.get","input_value","label","$.set_text","text","customElementForwardEvents"],"mappings":";;;;;;sMAAA,+BA2CQA,EAAKC,EAAAC,EAAA,QAAA,EAAA,EAAgBC,EAAIF,EAAAC,EAAA,OAAA,CAAA,EAAEE,EAAOH,EAAAC,EAAA,UAAA,CAAA,EAAEG,EAAMJ,EAAAC,EAAA,SAAA,CAAA,EAAEI,EAASL,EAAAC,EAAA,YAAA,CAAA,uQAIpDK,OAAAA,EAAAC,EAAA,GAAAJ,EAAWK,GAAQA,EAAO,MAAfA,IAAM,0EAIV,kBAAmBH,KAAa,YAAY,CAAA,EAAA,eAAA,EAChDI,EAAAC,EAAA,KAAAC,EAAAH,CAAM,EAAC,EAAE,kBAIHE,EAAA,SAAAC,EAAAH,CAAM,EAAC,SADVI,KAAAA,EAAAD,EAAAH,CAAM,EAAC,SAAPE,EAAA,OAAAA,EAAA,QAAAC,EAAAH,CAAM,EAAC,QAAK,IAGTC,EAAAI,EAAA,MAAAF,EAAAH,CAAM,EAAC,EAAE,EAA2BM,EAAAC,EAAAJ,EAAAH,CAAM,EAAC,KAAK,kBAHnDG,EAAAH,CAAM,EAAC,MADFT,EAAK,GAALA,gCARP,oBAAqBK,EAAM,GAAI,2BAA2B,CAAA,EAAA,eAAA,CAAA,aAFvE,yIAtCYY"}

package/dist/components/radiogroup/RadioGroup.spec.js

@@ -0,0 +1,65 @@
+import { describe, it, expect } from 'vitest';
+import { render, fireEvent } from '@testing-library/svelte';
+import RadioGroup from './RadioGroup.svelte';
+describe('m-radio-group component', () => {
+    const baseProps = {
+        name: 'test-group',
+        options: [
+            { id: 'radio-1', label: 'Option 1', value: '1' },
+            { id: 'radio-2', label: 'Option 2', value: '2' },
+            { id: 'radio-3', label: 'Option 3', value: '3', disabled: true },
+        ],
+    };
+    it('renders all radio options', () => {
+        const { container } = render(RadioGroup, { props: baseProps });
+        const radios = container.querySelectorAll('input[type="radio"]');
+        const labels = container.querySelectorAll('label');
+        expect(radios.length).toBe(3);
+        expect(labels.length).toBe(3);
+        baseProps.options.forEach((option, index) => {
+            expect(radios[index].getAttribute('id')).toBe(option.id);
+            expect(radios[index].getAttribute('value')).toBe(option.value);
+            expect(labels[index].textContent).toBe(option.label);
+        });
+    });
+    it('sets initial value as checked', () => {
+        const { container } = render(RadioGroup, {
+            props: { ...baseProps, value: '2' },
+        });
+        const radios = container.querySelectorAll('input[type="radio"]');
+        expect(radios[1].checked).toBe(true);
+    });
+    it('only one radio is checked at a time (bind:group behavior)', async () => {
+        const { container } = render(RadioGroup, {
+            props: { ...baseProps, value: '1' },
+        });
+        const radios = container.querySelectorAll('input[type="radio"]');
+        expect(radios[0].checked).toBe(true);
+        expect(radios[1].checked).toBe(false);
+        await fireEvent.click(radios[1]);
+        expect(radios[1].checked).toBe(true);
+        expect(radios[0].checked).toBe(false);
+    });
+    it('applies disabled prop to correct radio', () => {
+        const { container } = render(RadioGroup, { props: baseProps });
+        const radios = container.querySelectorAll('input[type="radio"]');
+        expect(radios[2].disabled).toBe(true);
+        expect(radios[0].disabled).toBe(false);
+    });
+    it('adds is-invalid class when isinvalid is true', () => {
+        const { container } = render(RadioGroup, {
+            props: { ...baseProps, isinvalid: true },
+        });
+        const radios = container.querySelectorAll('input[type="radio"]');
+        radios.forEach((radio) => {
+            expect(radio.classList.contains('is-invalid')).toBe(true);
+        });
+    });
+    it('applies inline class to container when inline is true', () => {
+        const { container } = render(RadioGroup, {
+            props: { ...baseProps, inline: true },
+        });
+        const wrapper = container.querySelector('.mc-field__content');
+        expect(wrapper?.classList.contains('mc-field__content--inline')).toBe(true);
+    });
+});

package/dist/components/radiogroup/RadioGroup.stories.d.ts

@@ -1,13 +1,6 @@
-import type { Meta } from '@storybook/html-vite';
-/**
- * > A radio button is used to offer a unique choice to your user in a form. Unlike checkboxes, it can not be used alone.
- *
- * The `MRadioGroup` component is the **Svelte / WebComponent** implementation of the **Radio** component of Mozaic Design System.<br/>
- * The full specification of this component is available in [the associated documentation](https://mozaic.adeo.cloud/components/form/radio/code/#implement-as-a-group).
- */
-declare const _default: Meta<unknown>;
-export default _default;
-export declare const Default: any;
-export declare const Inline: any;
-export declare const Invalid: any;
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Default: Story;
 //# sourceMappingURL=RadioGroup.stories.d.ts.map

package/dist/components/radiogroup/RadioGroup.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup.stories.d.ts","sourceRoot":"","sources":["../../../src/components/radiogroup/RadioGroup.stories.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAW,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAG1D;;;;;GAKG;wBA+CE,IAAI,CAAC,OAAO,CAAC;AA7ClB,wBA6CmB;AAoBnB,eAAO,MAAM,OAAO,KAAoB,CAAC;AA8BzC,eAAO,MAAM,MAAM,KAAoB,CAAC;AAgCxC,eAAO,MAAM,OAAO,KAAoB,CAAC"}
+{"version":3,"file":"RadioGroup.stories.d.ts","sourceRoot":"","sources":["../../../src/components/radiogroup/RadioGroup.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAKrE,QAAA,MAAM,IAAI,EAAE,IAyDX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC"}

package/dist/components/radiogroup/RadioGroup.stories.js

@@ -1,157 +1,62 @@
+import { html } from 'lit';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
 import { action } from 'storybook/actions';
-/**
- * > A radio button is used to offer a unique choice to your user in a form. Unlike checkboxes, it can not be used alone.
- *
- * The `MRadioGroup` component is the **Svelte / WebComponent** implementation of the **Radio** component of Mozaic Design System.<br/>
- * The full specification of this component is available in [the associated documentation](https://mozaic.adeo.cloud/components/form/radio/code/#implement-as-a-group).
- */
-export default {
+const meta = {
     title: 'Form Elements/Radio Group',
-    tags: ['autodocs', 'beta'],
-    argTypes: {
-        legend: {
-            description: 'Specify the label of the group.',
-            control: { type: 'text' },
-        },
-        id: {
-            description: 'Specifiy the radio group id',
-            control: { type: 'text' },
-        },
-        selectedvalue: {
-            description: 'Specifiy the value of the selected element',
-            control: { type: 'text' },
-        },
-        inline: {
-            description: 'Render radio group horizontally',
-            control: { type: 'boolean' },
-        },
-        isinvalid: {
-            description: 'Render radio group invalid',
-            control: { type: 'boolean' },
-        },
-        options: {
-            description: 'Specify the select options. It needs to be `JSON.stringify(options)`',
-            control: { type: 'array' },
-        },
-        onChange: {
-            name: 'change',
-            description: 'On radio change',
-            action: 'change',
-            table: {
-                category: 'Events',
+    component: 'm-radio-group',
+    args: {
+        name: 'radioGroupName',
+        value: 'radio2',
+        options: [
+            {
+                id: 'radio-01',
+                label: 'Radio button Label',
+                value: 'radio1',
             },
-        },
-        onBlur: {
-            description: 'On radio blurred',
-            action: 'blur',
-            table: {
-                category: 'Events',
+            {
+                id: 'radio-02',
+                label: 'Radio button Label',
+                value: 'radio2',
             },
-        },
+            {
+                id: 'radio-03',
+                label: 'Radio button Label',
+                value: 'radio3',
+            },
+            {
+                id: 'radio-04',
+                label: 'Radio button Label',
+                value: 'radio4',
+            },
+        ],
+    },
+    render: (args) => {
+        const onInput = action('input');
+        const onChange = action('change');
+        const onFocus = action('focus');
+        const onBlur = action('blur');
+        return html `
+      <m-radio-group
+        name=${ifDefined(args.name)}
+        .options=${ifDefined(args.options)}
+        value=${ifDefined(args.value)}
+        isinvalid=${ifDefined(args.isinvalid)}
+        inline=${ifDefined(args.inline)}
+        @input=${(event) => {
+            onInput(event);
+        }}
+        @change=${(event) => {
+            onChange(event);
+        }}
+        @focus=${(event) => {
+            onFocus(event);
+        }}
+        @blur=${(event) => {
+            onBlur(event);
+        }}
+      ></m-radio-group>
+    `;
     },
 };
-const Template = (args) => {
-    const MRadioGroup = document.createElement('m-radio-group');
-    const options = [];
-    MRadioGroup.setAttribute('id', args.id || 'radio-group-id');
-    MRadioGroup.setAttribute('selectedvalue', args.selectedvalue || 'option2');
-    MRadioGroup.isinvalid = args.isinvalid || false;
-    if (args.inline)
-        MRadioGroup.setAttribute('inline', args.inline);
-    MRadioGroup.setAttribute('legend', args.legend || 'Group radio Title');
-    if (args.options || options) {
-        MRadioGroup.options = args.options || options;
-    }
-    MRadioGroup.addEventListener('change', action('onChange'));
-    MRadioGroup.addEventListener('blur', action('onBlur'));
-    return MRadioGroup;
-};
-export const Default = Template.bind({});
-Default.args = {
-    options: [
-        {
-            id: 'option1',
-            name: 'Option name 1',
-            label: 'Option 1',
-            value: 'option1',
-            disabled: false,
-            checked: true,
-        },
-        {
-            id: 'option2',
-            name: 'Option name 2',
-            label: 'Option 2',
-            value: 'option2',
-            disabled: false,
-            checked: false,
-        },
-        {
-            id: 'option3',
-            name: 'Option name 3',
-            label: 'Option 3',
-            value: 'option3',
-            disabled: false,
-            checked: false,
-        },
-    ],
-};
-export const Inline = Template.bind({});
-Inline.args = {
-    inline: true,
-    options: [
-        {
-            id: 'option1',
-            name: 'Option name 1',
-            label: 'Option 1',
-            value: 'option1',
-            disabled: false,
-            checked: true,
-        },
-        {
-            id: 'option2',
-            name: 'Option name 2',
-            label: 'Option 2',
-            value: 'option2',
-            disabled: false,
-            checked: false,
-        },
-        {
-            id: 'option3',
-            name: 'Option name 3',
-            label: 'Option 3',
-            value: 'option3',
-            disabled: false,
-            checked: false,
-        },
-    ],
-};
-export const Invalid = Template.bind({});
-Invalid.args = {
-    isinvalid: true,
-    options: [
-        {
-            id: 'option1',
-            name: 'Option name 1',
-            label: 'Option 1',
-            value: 'option1',
-            disabled: false,
-            checked: true,
-        },
-        {
-            id: 'option2',
-            name: 'Option name 2',
-            label: 'Option 2',
-            value: 'option2',
-            disabled: false,
-            checked: false,
-        },
-        {
-            id: 'option3',
-            name: 'Option name 3',
-            label: 'Option 3',
-            value: 'option3',
-            disabled: false,
-            checked: false,
-        },
-    ],
-};
+export default meta;
+export const Default = {};

package/dist/components/radiogroup/RadioGroup.svelte

@@ -10,59 +10,55 @@
 
 <script lang="ts">
   import { customElementForwardEvents } from '../../utils';
-  import type { RadioGroupOption } from './radioGroup.types';
-
+  /**
+   * A radio button is a selection control that allows users to choose a single option from a list of mutually exclusive choices. Unlike checkboxes, only one option can be selected at a time within the same group. Radio Buttons are commonly used in forms, surveys, and settings where a single choice must be made.
+   */
   interface Props {
-    id: string;
-    selectedvalue?: string;
-    options: Array<RadioGroupOption>;
-    legend: string;
-    inline: boolean;
+    /**
+     * The name attribute for the radio element, typically used for form submission.
+     */
+    name: string;
+    /**
+     * The current value of the radio group.
+     */
+    value?: string;
+    /**
+     * list of properties of each radio button of the radio group
+     */
+    options: Array<{
+      id: string;
+      label: string;
+      value: string;
+      disabled?: boolean;
+    }>;
+    /**
+     * If `true`, applies an invalid state to the radio group.
+     */
     isinvalid?: boolean;
-    onchange?: (event: Event) => void;
-    onblur?: (event: FocusEvent) => void;
+    /**
+     * If `true`, make the form element of the group inline.
+     */
+    inline?: boolean;
   }
 
-  let {
-    id,
-    selectedvalue = $bindable(),
-    options,
-    legend,
-    inline,
-    isinvalid = false,
-    onchange,
-    onblur,
-  }: Props = $props();
+  let { value = $bindable(), name, options, inline, isinvalid }: Props = $props();
 </script>
 
-<div {id} class="radio-group-container">
-  <fieldset class="mc-field mc-field--group">
-    {#if legend && legend.length}
-      <legend class="mc-field__legend">
-        {legend}
-      </legend>
-    {/if}
-
-    <div class="mc-field__content {inline ? 'mc-field__content--inline' : ''}">
-      {#each options as opt (opt.id)}
-        <div class="mc-radio mc-field__item">
-          <input
-            type="radio"
-            class="mc-radio__input"
-            class:is-invalid={isinvalid}
-            id={opt.id}
-            name={opt.name}
-            bind:group={selectedvalue}
-            value={opt.value}
-            disabled={opt.disabled}
-            {onchange}
-            {onblur}
-          />
-          <label for={opt.id} class="mc-radio__label">{opt.label}</label>
-        </div>
-      {/each}
+<div class={['mc-field__content', inline && 'mc-field__content--inline']}>
+  {#each options as option (option.id)}
+    <div class="mc-radio mc-field__item">
+      <input
+        type="radio"
+        class={['mc-radio__input', isinvalid && 'is-invalid']}
+        id={option.id}
+        {name}
+        bind:group={value}
+        value={option.value}
+        disabled={option.disabled}
+      />
+      <label for={option.id} class="mc-radio__label">{option.label}</label>
     </div>
-  </fieldset>
+  {/each}
 </div>
 
 <style>/**
@@ -210,4 +206,9 @@
   gap: 0.25rem 1rem;
 }
 
-/* stylelint-enable string-no-newline */</style>
+/* stylelint-enable string-no-newline */
+.mc-field__content:where(.mc-field__content--inline) {
+  display: flex;
+  flex-flow: row wrap;
+  gap: 0.25rem 1rem;
+}</style>