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

package/dist/components/radiogroup/RadioGroup.js

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

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,67 +10,66 @@
 
 <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(),
+    value = $bindable(),
+    name,
     options,
-    legend,
     inline,
-    isinvalid = false,
-    onchange,
-    onblur,
+    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}
+    <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>/**
  * Do not edit directly, this file was auto-generated.
  */
-/**
- * Do not edit directly, this file was auto-generated.
- */
 .mc-radio {
   align-items: center;
   display: flex;
@@ -78,9 +77,9 @@
   padding: 0.375rem;
 }
 .mc-radio__label {
-  font-size: 1rem;
-  line-height: 1.3;
-  color: #000000;
+  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 {
@@ -89,8 +88,8 @@
   cursor: pointer;
   flex-shrink: 0;
   transition: box-shadow 200ms ease;
-  background-color: #ffffff;
-  border: 0.125rem solid #666666;
+  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;
@@ -98,7 +97,7 @@
   position: relative;
 }
 .mc-radio__input::before {
-  border-radius: 100%;
+  border-radius: var(--radius-full, 100%);
   content: "";
   display: block;
   height: 0.5rem;
@@ -109,59 +108,59 @@
   width: 0.5rem;
 }
 .mc-radio__input:hover {
-  border-color: #4d4d4d;
+  border-color: var(--forms-color-border-hover, #4d4d4d);
 }
 .mc-radio__input:focus-visible {
-  box-shadow: 0 0 0 0.125rem var(--focus-color-mid, #ffffff), 0 0 0 0.25rem var(--focus-color-outer, #000000);
+  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:checked {
-  background-color: #117f03;
+  background-color: var(--forms-color-background-checked, #117f03);
 }
 .mc-radio__input:checked::before {
-  background-color: #ffffff;
+  background-color: var(--forms-color-background-default, #ffffff);
 }
 .mc-radio__input:checked, .mc-radio__input:disabled {
   border-color: transparent;
 }
 .mc-radio__input:disabled {
-  background-color: #d9d9d9;
+  background-color: var(--forms-color-background-disabled, #d9d9d9);
   cursor: not-allowed;
 }
 .mc-radio__input:disabled:checked::before {
-  background-color: #737373;
+  background-color: var(--forms-color-icon-disabled, #737373);
 }
 .mc-radio__input:disabled + .mc-radio__label {
-  color: #737373;
+  color: var(--forms-color-text-disabled, #737373);
   cursor: not-allowed;
 }
 .mc-radio__input:not(:disabled):checked:hover {
-  background-color: #006902;
+  background-color: var(--forms-color-background-checked-hover, #006902);
 }
 .mc-radio__input.is-invalid:not(:checked) {
-  border-color: #ea302d;
+  border-color: var(--forms-color-border-invalid, #ea302d);
 }
 .mc-radio__input.is-invalid:not(:checked):hover {
-  border-color: #c61112;
+  border-color: var(--forms-color-border-invalid-hover, #c61112);
 }
 
 /* stylelint-disable string-no-newline */
 .mc-field__label, .mc-field__legend {
-  font-size: 0.875rem;
-  line-height: 1.3;
-  font-weight: 400;
-  color: #000000;
+  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 {
   padding-inline: 0;
 }
 .mc-field__requirement, .mc-field__help {
-  font-size: 0.75rem;
-  line-height: 1.5;
-  font-weight: 400;
+  font-size: var(--font-size-50, 0.75rem);
+  line-height: var(--line-height-m, 1.5);
+  font-weight: var(--font-weight-regular, 400);
   vertical-align: top;
-  color: #666666;
+  color: var(--field-color-requirement, #666666);
 }
 .mc-field__help {
   display: block;
@@ -171,8 +170,8 @@
   margin-top: 0.5rem;
 }
 .mc-field__validation-message {
-  font-size: 0.875rem;
-  line-height: 1.5;
+  font-size: var(--font-size-100, 0.875rem);
+  line-height: var(--line-height-m, 1.5);
   display: inline-flex;
   gap: 0.25rem;
   margin-top: 0.25rem;
@@ -183,19 +182,19 @@
   width: 1.25rem;
 }
 .mc-field__validation-message.is-valid {
-  color: #117f03;
+  color: var(--field-color-validation-valid, #117f03);
 }
 .mc-field__validation-message.is-valid::before {
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='%23117f03' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M3.25 10c0-3.72792 3.02208-6.75 6.75-6.75 3.7279 0 6.75 3.02208 6.75 6.75 0 3.7279-3.0221 6.75-6.75 6.75-3.72792 0-6.75-3.0221-6.75-6.75ZM10 1.75c-4.55635 0-8.25 3.69365-8.25 8.25 0 4.5563 3.69365 8.25 8.25 8.25 4.5563 0 8.25-3.6937 8.25-8.25 0-4.55635-3.6937-8.25-8.25-8.25Zm4.2803 6.697c.2929-.2929.2929-.76777 0-1.06066-.2929-.2929-.7677-.2929-1.0606 0L9.16667 11.4393 7.197 9.46967c-.2929-.29289-.76777-.29289-1.06066 0-.2929.29289-.2929.76773 0 1.06063l2.5 2.5c.29289.2929.76776.2929 1.06066 0l4.5833-4.5833Z'/%3E%3C/svg%3E");
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--field-color-validation-valid, %23117f03)' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M3.25 10c0-3.72792 3.02208-6.75 6.75-6.75 3.7279 0 6.75 3.02208 6.75 6.75 0 3.7279-3.0221 6.75-6.75 6.75-3.72792 0-6.75-3.0221-6.75-6.75ZM10 1.75c-4.55635 0-8.25 3.69365-8.25 8.25 0 4.5563 3.69365 8.25 8.25 8.25 4.5563 0 8.25-3.6937 8.25-8.25 0-4.55635-3.6937-8.25-8.25-8.25Zm4.2803 6.697c.2929-.2929.2929-.76777 0-1.06066-.2929-.2929-.7677-.2929-1.0606 0L9.16667 11.4393 7.197 9.46967c-.2929-.29289-.76777-.29289-1.06066 0-.2929.29289-.2929.76773 0 1.06063l2.5 2.5c.29289.2929.76776.2929 1.06066 0l4.5833-4.5833Z'/%3E%3C/svg%3E");
 }
 .mc-field__validation-message.is-invalid {
-  color: #c61112;
+  color: var(--field-color-validation-invalid, #c61112);
 }
 .mc-field__validation-message.is-invalid::before {
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='%23c61112' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 3.25c-3.72792 0-6.75 3.02208-6.75 6.75 0 3.7279 3.02208 6.75 6.75 6.75 3.7279 0 6.75-3.0221 6.75-6.75 0-3.72792-3.0221-6.75-6.75-6.75ZM1.75 10c0-4.55635 3.69365-8.25 8.25-8.25 4.5563 0 8.25 3.69365 8.25 8.25 0 4.5563-3.6937 8.25-8.25 8.25-4.55635 0-8.25-3.6937-8.25-8.25ZM10 5.91667c.4142 0 .75.33578.75.75v4.16663c0 .4142-.3358.75-.75.75-.41421 0-.75-.3358-.75-.75V6.66667c0-.41422.33579-.75.75-.75Zm0 8.25003c.4602 0 .8333-.3731.8333-.8334 0-.4602-.3731-.8333-.8333-.8333-.46024 0-.83333.3731-.83333.8333 0 .4603.37309.8334.83333.8334Z'/%3E%3C/svg%3E");
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--field-color-validation-invalid, %23c61112)' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 3.25c-3.72792 0-6.75 3.02208-6.75 6.75 0 3.7279 3.02208 6.75 6.75 6.75 3.7279 0 6.75-3.0221 6.75-6.75 0-3.72792-3.0221-6.75-6.75-6.75ZM1.75 10c0-4.55635 3.69365-8.25 8.25-8.25 4.5563 0 8.25 3.69365 8.25 8.25 0 4.5563-3.6937 8.25-8.25 8.25-4.55635 0-8.25-3.6937-8.25-8.25ZM10 5.91667c.4142 0 .75.33578.75.75v4.16663c0 .4142-.3358.75-.75.75-.41421 0-.75-.3358-.75-.75V6.66667c0-.41422.33579-.75.75-.75Zm0 8.25003c.4602 0 .8333-.3731.8333-.8334 0-.4602-.3731-.8333-.8333-.8333-.46024 0-.83333.3731-.83333.8333 0 .4603.37309.8334.83333.8334Z'/%3E%3C/svg%3E");
 }
 .mc-field__validation-message.is-loading {
-  color: #666666;
+  color: var(--field-color-validation-loading, #666666);
 }
 .mc-field--group {
   border-width: 0;
@@ -213,4 +212,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>