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

package/dist/components/radio/Radio.spec.js

@@ -0,0 +1,60 @@
+import { describe, it, expect } from 'vitest';
+import { render, fireEvent } from '@testing-library/svelte';
+import Radio from './Radio.svelte';
+describe('m-radio component', () => {
+    const baseProps = {
+        id: 'test-radio',
+        name: 'group1',
+        label: 'Option 1',
+    };
+    it('renders radio input and label correctly', () => {
+        const { container } = render(Radio, { props: baseProps });
+        const input = container.querySelector('input[type="radio"]');
+        const label = container.querySelector('label');
+        expect(input).toBeTruthy();
+        expect(label).toBeTruthy();
+        expect(label?.textContent).toBe('Option 1');
+        expect(label?.getAttribute('for')).toBe('test-radio');
+    });
+    it('sets the checked prop when true', () => {
+        const { container } = render(Radio, {
+            props: { ...baseProps, checked: true },
+        });
+        const input = container.querySelector('input');
+        expect(input.checked).toBe(true);
+    });
+    it('responds to click and toggles checked state', async () => {
+        const { container } = render(Radio, {
+            props: { ...baseProps, checked: false },
+        });
+        const input = container.querySelector('input');
+        expect(input.checked).toBe(false);
+        await fireEvent.click(input);
+    });
+    it('applies disabled prop', () => {
+        const { container } = render(Radio, {
+            props: { ...baseProps, disabled: true },
+        });
+        const input = container.querySelector('input');
+        expect(input.disabled).toBe(true);
+    });
+    it('applies invalid class when isinvalid is true', () => {
+        const { container } = render(Radio, {
+            props: { ...baseProps, isinvalid: true },
+        });
+        const input = container.querySelector('input');
+        expect(input.classList.contains('is-invalid')).toBe(true);
+    });
+    it('sets name attribute correctly', () => {
+        const { container } = render(Radio, { props: baseProps });
+        const input = container.querySelector('input');
+        expect(input.getAttribute('name')).toBe('group1');
+    });
+    it('reflects checked as an attribute on the custom element', () => {
+        const { container } = render(Radio, {
+            props: { ...baseProps, checked: true },
+        });
+        const input = container.querySelector('input');
+        expect(input.checked).toBe(true);
+    });
+});

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

@@ -1,14 +1,10 @@
-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 `MRadio` 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/).
- */
-declare const _default: Meta<unknown>;
-export default _default;
-export declare const Default: any;
-export declare const Checked: any;
-export declare const Disabled: 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;
+export declare const Checked: Story;
+export declare const Invalid: Story;
+export declare const Disabled: Story;
+export declare const CheckedDisabled: Story;
 //# sourceMappingURL=Radio.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Radio.stories.d.ts","sourceRoot":"","sources":["../../../src/components/radio/Radio.stories.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAW,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAE1D;;;;;GAKG;wBA2CE,IAAI,CAAC,OAAO,CAAC;AAzClB,wBAyCmB;AAgBnB,eAAO,MAAM,OAAO,KAAoB,CAAC;AAEzC,eAAO,MAAM,OAAO,KAAoB,CAAC;AAKzC,eAAO,MAAM,QAAQ,KAAoB,CAAC;AAK1C,eAAO,MAAM,OAAO,KAAoB,CAAC"}
+{"version":3,"file":"Radio.stories.d.ts","sourceRoot":"","sources":["../../../src/components/radio/Radio.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAKrE,QAAA,MAAM,IAAI,EAAE,IAgCX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAM7B,CAAC"}

package/dist/components/radio/Radio.stories.js

@@ -1,78 +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 `MRadio` 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/).
- */
-export default {
+const meta = {
     title: 'Form Elements/Radio',
-    tags: ['autodocs', 'beta'],
-    argTypes: {
-        id: {
-            description: 'Specifiy the readio id',
-            control: 'text',
-        },
-        name: {
-            description: 'Specifiy the radio button name',
-            control: 'text',
-        },
-        label: {
-            description: 'Specifiy the radio button label',
-            control: 'text',
-        },
-        checked: {
-            description: 'Specifiy wether the radio button is selected',
-            control: 'text',
-        },
-        isvalid: {
-            description: 'Specifiy wether the text input is valid',
-            control: 'boolean',
-        },
-        isinvalid: {
-            description: 'Specifiy wether the text input is invalid',
-            control: 'boolean',
-        },
-        disabled: {
-            description: 'Specifiy wether the text input is disabled',
-            control: 'boolean',
-        },
-        onClick: {
-            name: 'click',
-            description: 'On radio change',
-            action: 'click',
-            table: {
-                category: 'Events',
-            },
-        },
+    component: 'm-radio',
+    args: {
+        id: 'RadioId',
+        label: 'Label',
+    },
+    render: (args) => {
+        const onChange = action('change');
+        const onFocus = action('focus');
+        const onBlur = action('blur');
+        return html `
+      <m-radio
+        id=${ifDefined(args.id)}
+        name=${ifDefined(args.name)}
+        label=${ifDefined(args.label)}
+        checked=${ifDefined(args.checked)}
+        isinvalid=${ifDefined(args.isinvalid)}
+        disabled=${ifDefined(args.disabled)}
+        @change=${(event) => {
+            onChange(event);
+        }}
+        @focus=${(event) => {
+            onFocus(event);
+        }}
+        @blur=${(event) => {
+            onBlur(event);
+        }}
+      ></m-radio>
+    `;
     },
 };
-const Template = (args) => {
-    const component = document.createElement('m-radio');
-    component.setAttribute('label', 'This is a radio');
-    component.setAttribute('id', 'radio');
-    component.setAttribute('name', 'Radio');
-    if (args.checked)
-        component.setAttribute('checked', args.checked);
-    if (args.isvalid)
-        component.setAttribute('isvalid', args.isvalid);
-    if (args.isinvalid)
-        component.setAttribute('isinvalid', args.isinvalid);
-    if (args.disabled)
-        component.setAttribute('disabled', args.disabled);
-    component.addEventListener('click', action('onClick'));
-    return component;
+export default meta;
+export const Default = {};
+export const Checked = {
+    args: {
+        checked: true,
+        id: 'checkedId',
+    },
 };
-export const Default = Template.bind({});
-export const Checked = Template.bind({});
-Checked.args = {
-    checked: true,
+export const Invalid = {
+    args: {
+        isinvalid: true,
+        id: 'invalidId',
+    },
 };
-export const Disabled = Template.bind({});
-Disabled.args = {
-    disabled: true,
+export const Disabled = {
+    args: {
+        disabled: true,
+        id: 'disabledId',
+    },
 };
-export const Invalid = Template.bind({});
-Invalid.args = {
-    isinvalid: true,
+export const CheckedDisabled = {
+    args: {
+        checked: true,
+        disabled: true,
+        id: 'checkedDisabledId',
+    },
 };

package/dist/components/radio/Radio.svelte

@@ -1,41 +1,63 @@
 <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;AAgCH,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,i as C}from"../../each.js";import{r as H,s as b}from"../../attributes.js";import{b as I}from"../../input.js";import{c as J}from"../../custom-element-forward-events.js";var K=E('<div class="mc-radio mc-field__item svelte-clvmul"><input type="radio"/> <label class="mc-radio__label svelte-clvmul"> </label></div>'),L=E("<div></div>");const M={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 N(p,a){F(a,!0),G(p,M);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=L();return B(n,21,d,C,(e,l)=>{var u=K(),r=y(u);H(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)}),I(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(N,{options:{attribute:"options",type:"Array"},value:{},name:{},inline:{},isinvalid:{}},[],[],!0,J));
 //# 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 {\n    value = $bindable(),\n    name,\n    options,\n    inline,\n    isinvalid,\n  }: Props = $props();\n</script>\n\n<div class={['mc-field__content', inline && 'mc-field__content--inline']}>\n  {#each options as option}\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,+BA4CIA,EAAKC,EAAAC,EAAA,QAAA,EAAA,EACLC,EAAIF,EAAAC,EAAA,OAAA,CAAA,EACJE,EAAOH,EAAAC,EAAA,UAAA,CAAA,EACPG,EAAMJ,EAAAC,EAAA,SAAA,CAAA,EACNI,EAASL,EAAAC,EAAA,YAAA,CAAA,uQAKJK,OAAAA,EAAAC,EAAA,GAAAJ,OAAWK,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,yIA5CYY"}

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"}