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

package/dist/components/quantityselector/QuantitySelector.svelte.d.ts

@@ -1,25 +1,57 @@
-import type { QuantitySelectorSize } from './quantitySelector.types';
+/**
+ * A quantity selector is an input component that allows users to increment or decrement a numeric value, typically using plus (+) and minus (−) buttons. It provides a simple and efficient way to adjust quantities without manual typing, ensuring controlled input. This component is commonly used in e-commerce, inventory management, and settings where users need to specify amounts.
+ */
 interface Props {
-    id?: string | undefined;
-    quantity?: number;
+    /**
+     * A unique identifier for the quantity selector element, used to associate the label with the form element.
+     */
+    id: string;
+    /**
+     * The name attribute for the quantity selector element, typically used for form submission.
+     */
+    name?: string;
+    /**
+     * The current value of the quantity selector field.
+     */
+    value?: number;
+    /**
+     * If `true`, applies an invalid state to the quantity selector.
+     */
+    isinvalid?: boolean;
+    /**
+     * If `true`, disables the quantity selector, making it non-interactive.
+     */
+    disabled?: boolean;
+    /**
+     * Determines the size of the quantity selector.
+     */
+    size?: 's' | 'm';
+    /**
+     * Minimum acceptable value for the quantity selector.
+     */
     min?: number;
+    /**
+     * Maximum acceptable value for the quantity selector.
+     */
     max?: number;
-    size?: QuantitySelectorSize;
-    decrementlabel?: string;
-    inputarialabel?: string;
-    incrementlabel?: string;
-    disabled?: boolean;
-    isinvalid?: boolean;
-    required?: boolean;
-    name?: string;
+    /**
+     * Determines how much the value will change per click when the quantity is increased or decreased.
+     */
     step?: number;
-    increment?: (qty: number) => void;
-    decrement?: (qty: number) => void;
-    inputqty?: (qty: number) => void;
-    oninput?: (event: Event) => void;
-    onblur?: (event: FocusEvent) => void;
+    /**
+     * If `true`, the quantity selector is read-only (cannot be edited).
+     */
+    readonly?: boolean;
+    /**
+     * The label text for the increment button.
+     */
+    incrementlabel?: string;
+    /**
+     * The label text for the decrement button.
+     */
+    decrementlabel?: string;
 }
-declare const QuantitySelector: import("svelte").Component<Props, {}, "quantity">;
+declare const QuantitySelector: import("svelte").Component<Props, {}, "value">;
 type QuantitySelector = ReturnType<typeof QuantitySelector>;
 export default QuantitySelector;
 //# sourceMappingURL=QuantitySelector.svelte.d.ts.map

package/dist/components/quantityselector/QuantitySelector.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"QuantitySelector.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/quantityselector/QuantitySelector.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AAEnE,UAAU,KAAK;IACb,EAAE,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,oBAAoB,CAAC;IAC5B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,SAAS,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACjC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;CACtC;AA8FH,QAAA,MAAM,gBAAgB,mDAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"QuantitySelector.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/quantityselector/QuantitySelector.svelte.ts"],"names":[],"mappings":"AAOE;;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,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC;IACjB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAqFH,QAAA,MAAM,gBAAgB,gDAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}

package/dist/components/quantityselector/README.md

@@ -0,0 +1,21 @@
+# `m-quantityselector`
+
+A quantity selector is an input component that allows users to increment or decrement a numeric value, typically using plus (+) and minus (−) buttons. It provides a simple and efficient way to adjust quantities without manual typing, ensuring controlled input. This component is commonly used in e-commerce, inventory management, and settings where users need to specify amounts.
+
+## Props
+
+| Name | Description | Type | Default |
+|------|-------------|------|---------|
+| `id*` | A unique identifier for the quantity selector element, used to associate the label with the form element. | `string` |   |
+| `name` | The name attribute for the quantity selector element, typically used for form submission. | `string` | `quantity-selector-input` |
+| `value` | The current value of the quantity selector field. | `number` | `$bindable(1)` |
+| `isinvalid` | If `true`, applies an invalid state to the quantity selector. | `boolean` | `false` |
+| `disabled` | If `true`, disables the quantity selector, making it non-interactive. | `boolean` |   |
+| `size` | Determines the size of the quantity selector. | `'s'` `'m'` | `m` |
+| `min` | Minimum acceptable value for the quantity selector. | `number` | `1` |
+| `max` | Maximum acceptable value for the quantity selector. | `number` | `100` |
+| `step` | Determines how much the value will change per click when the quantity is increased or decreased. | `number` | `1` |
+| `readonly` | If `true`, the quantity selector is read-only (cannot be edited). | `boolean` |   |
+| `incrementlabel` | The label text for the increment button. | `string` | `Increment` |
+| `decrementlabel` | The label text for the decrement button. | `string` | `Decrement` |
+

package/dist/components/radio/README.md

@@ -0,0 +1,15 @@
+# `m-radio`
+
+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 |
+|------|-------------|------|---------|
+| `id*` | A unique identifier for the radio, used to associate the label with the form element. | `string` |   |
+| `name` | The name attribute for the radio element, typically used for form submission. | `string` |   |
+| `label` | The text label displayed next to the radio. | `string` |   |
+| `checked` | The radio's checked state. | `boolean` | `$bindable(false)` |
+| `isinvalid` | If `true`, applies an invalid state to the radio. | `boolean` |   |
+| `disabled` | If `true`, disables the radio, making it non-interactive. | `boolean` |   |
+

package/dist/components/radio/Radio.js

@@ -1,7 +1,4 @@
-import{c as k,p as w,a as y,b as a,f as x,D,d as b,s as E,t as j,h as z,i as C,j as i,r as _,g as F}from"../../custom-element.js";import{b as R,r as S,s as q}from"../../attributes.js";import{c as A}from"../../custom-element-forward-events.js";var B=x('<div class="mc-radio svelte-8vtfn"><input/> <label class="mc-radio__label svelte-8vtfn"> </label></div>');const G={hash:"svelte-8vtfn",code:`/**
+import{c as k,p as w,a as g,b as a,f as q,s as x,d as f,t as y,i as E,j as z,k as t,r as _,e as j,g as B,h as D}from"../../custom-element.js";import{r as F,s as u,c as R}from"../../attributes.js";import{c as S}from"../../custom-element-forward-events.js";var A=q('<div class="mc-radio svelte-1bwbq3n"><input type="radio"/> <label class="mc-radio__label svelte-1bwbq3n"> </label></div>');const C={hash:"svelte-1bwbq3n",code:`/**
  * Do not edit directly, this file was auto-generated.
- */
-/**
- * Do not edit directly, this file was auto-generated.
- */.mc-radio.svelte-8vtfn {align-items:center;display:flex;gap:0.5rem;padding:0.375rem;}.mc-radio__label.svelte-8vtfn {font-size:1rem;line-height:1.3;color:#000000;cursor:pointer;}.mc-radio__input.svelte-8vtfn {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-8vtfn::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-8vtfn:hover {border-color:#4d4d4d;}.mc-radio__input.svelte-8vtfn: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-8vtfn:checked {background-color:#117f03;}.mc-radio__input.svelte-8vtfn:checked::before {background-color:#ffffff;}.mc-radio__input.svelte-8vtfn:checked, .mc-radio__input.svelte-8vtfn:disabled {border-color:transparent;}.mc-radio__input.svelte-8vtfn:disabled {background-color:#d9d9d9;cursor:not-allowed;}.mc-radio__input.svelte-8vtfn:disabled:checked::before {background-color:#737373;}.mc-radio__input.svelte-8vtfn:disabled + .mc-radio__label:where(.svelte-8vtfn) {color:#737373;cursor:not-allowed;}.mc-radio__input.svelte-8vtfn:not(:disabled):checked:hover {background-color:#006902;}.mc-radio__input.is-invalid.svelte-8vtfn:not(:checked) {border-color:#ea302d;}.mc-radio__input.is-invalid.svelte-8vtfn:not(:checked):hover {border-color:#c61112;}`};function H(m,t){w(t,!0),y(m,G);let r=a(t,"id",7,""),s=a(t,"name",7,""),o=a(t,"checked",7,!1),d=a(t,"disabled",7,!1),l=a(t,"isinvalid",7,!1),n=a(t,"label",7,""),h=D(t,["$$slots","$$events","$$legacy","$$host","id","name","checked","disabled","isinvalid","label"]);function p(e){const u=["mc-radio__input"];return e&&u.push("is-invalid"),u.join(" ")}var c=B(),f=b(c);S(f),R(f,e=>({id:r(),type:"radio",class:e,name:s(),checked:o(),disabled:d(),...h}),[()=>p(l())],void 0,"svelte-8vtfn");var v=E(f,2),g=b(v,!0);return _(v),_(c),j(()=>{q(v,"for",r()),F(g,n())}),z(m,c),C({get id(){return r()},set id(e=""){r(e),i()},get name(){return s()},set name(e=""){s(e),i()},get checked(){return o()},set checked(e=!1){o(e),i()},get disabled(){return d()},set disabled(e=!1){d(e),i()},get isinvalid(){return l()},set isinvalid(e=!1){l(e),i()},get label(){return n()},set label(e=""){n(e),i()}})}customElements.define("m-radio",k(H,{id:{},name:{},checked:{},disabled:{},isinvalid:{},label:{}},[],[],!0,A));
+ */.mc-radio.svelte-1bwbq3n {align-items:center;display:flex;gap:0.5rem;padding:0.375rem;}.mc-radio__label.svelte-1bwbq3n {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-1bwbq3n {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-1bwbq3n::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-1bwbq3n:hover {border-color:var(--forms-color-border-hover, #4d4d4d);}.mc-radio__input.svelte-1bwbq3n: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-1bwbq3n:checked {background-color:var(--forms-color-background-checked, #117f03);}.mc-radio__input.svelte-1bwbq3n:checked::before {background-color:var(--forms-color-background-default, #ffffff);}.mc-radio__input.svelte-1bwbq3n:checked, .mc-radio__input.svelte-1bwbq3n:disabled {border-color:transparent;}.mc-radio__input.svelte-1bwbq3n:disabled {background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed;}.mc-radio__input.svelte-1bwbq3n:disabled:checked::before {background-color:var(--forms-color-icon-disabled, #737373);}.mc-radio__input.svelte-1bwbq3n:disabled + .mc-radio__label:where(.svelte-1bwbq3n) {color:var(--forms-color-text-disabled, #737373);cursor:not-allowed;}.mc-radio__input.svelte-1bwbq3n:not(:disabled):checked:hover {background-color:var(--forms-color-background-checked-hover, #006902);}.mc-radio__input.is-invalid.svelte-1bwbq3n:not(:checked) {border-color:var(--forms-color-border-invalid, #ea302d);}.mc-radio__input.is-invalid.svelte-1bwbq3n:not(:checked):hover {border-color:var(--forms-color-border-invalid-hover, #c61112);}`};function G(v,r){w(r,!0),g(v,C);let i=a(r,"id",7),d=a(r,"name",7),l=a(r,"label",7),s=a(r,"checked",15,!1),n=a(r,"disabled",7),c=a(r,"isinvalid",7);var h={get id(){return i()},set id(e){i(e),t()},get name(){return d()},set name(e){d(e),t()},get label(){return l()},set label(e){l(e),t()},get checked(){return s()},set checked(e=!1){s(e),t()},get disabled(){return n()},set disabled(e){n(e),t()},get isinvalid(){return c()},set isinvalid(e){c(e),t()}},b=A(),o=f(b);F(o);var m=x(o,2),p=f(m,!0);return _(m),_(b),y(()=>{u(o,"id",i()),j(o,1,B(["mc-radio__input",c()&&"is-invalid"]),"svelte-1bwbq3n"),u(o,"name",d()),o.disabled=n(),R(o,s()),u(m,"for",i()),D(p,l())}),E(v,b),z(h)}customElements.define("m-radio",k(G,{checked:{attribute:"checked",reflect:!0,type:"Boolean"},id:{},name:{},label:{},disabled:{},isinvalid:{}},[],[],!0,S));
 //# sourceMappingURL=Radio.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Radio.js","sources":["../../../src/components/radio/Radio.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-radio',\n    extend: customElementForwardEvents,\n  }}\n/>\n\n<script lang=\"ts\">\n  import { customElementForwardEvents } from '../../utils';\n  let {\n    id = '',\n    name = '',\n    checked = false,\n    disabled = false,\n    isinvalid = false,\n    label = '',\n    ...events\n  } = $props();\n\n  function getClasses(isInvalid: boolean): string {\n    const classes = ['mc-radio__input'];\n    if (isInvalid) {\n      classes.push('is-invalid');\n    }\n    return classes.join(' ');\n  }\n</script>\n\n<!-- svelte-ignore a11y_click_events_have_key_events -->\n<div class=\"mc-radio\">\n  <input\n    {id}\n    type=\"radio\"\n    class={getClasses(isinvalid)}\n    {name}\n    {checked}\n    {disabled}\n    {...events}\n  />\n  <label for={id} class=\"mc-radio__label\">{label}</label>\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/radio';\n</style>\n"],"names":["id","name","checked","disabled","isinvalid","label","events","$.rest_props","$$props","getClasses","isInvalid","classes","customElementForwardEvents"],"mappings":";;;;;qpDAAA,gBAUI,IAAAA,aAAK,EAAE,EACPC,eAAO,EAAE,EACTC,kBAAU,EAAK,EACfC,mBAAW,EAAK,EAChBC,oBAAY,EAAK,EACjBC,gBAAQ,EAAE,EACPC,EAAAC,EAAAC,EAAA,0GAGIC,EAAWC,EAA4B,CACxC,MAAAC,GAAW,iBAAiB,EAC9B,OAAAD,GACFC,EAAQ,KAAK,YAAY,EAEpBA,EAAQ,KAAK,GAAG,CACzB,iGAYML,IAJG,CAAA,IAAAG,EAAWL,EAAS,CAAA,CAAA,kFAMjBJ,GAAE,MAA2BK,GAAK,4CA7BvC,GAAE,6CACA,GAAE,mDACC,GAAK,qDACJ,GAAK,uDACJ,GAAK,+CACT,GAAE,YAWd,2GAvBYO"}
+{"version":3,"file":"Radio.js","sources":["../../../src/components/radio/Radio.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-radio',\n    props: {\n      checked: { reflect: true, type: 'Boolean', attribute: 'checked' },\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     * A unique identifier for the radio, used to associate the label with the form element.\n     */\n    id: string;\n    /**\n     * The name attribute for the radio element, typically used for form submission.\n     */\n    name?: string;\n    /**\n     * The text label displayed next to the radio.\n     */\n    label?: string;\n    /**\n     * The radio's checked state.\n     */\n    checked?: boolean;\n    /**\n     * If `true`, applies an invalid state to the radio.\n     */\n    isinvalid?: boolean;\n    /**\n     * If `true`, disables the radio, making it non-interactive.\n     */\n    disabled?: boolean;\n  }\n\n  let {\n    id,\n    name,\n    label,\n    checked = $bindable(false),\n    disabled,\n    isinvalid,\n  }: Props = $props();\n</script>\n\n<div class=\"mc-radio\">\n  <input\n    {id}\n    type=\"radio\"\n    class={['mc-radio__input', isinvalid && 'is-invalid']}\n    {name}\n    {disabled}\n    {checked}\n  />\n  <label for={id} class=\"mc-radio__label\">{label}</label>\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/radio';\n</style>\n"],"names":["id","$.prop","$$props","name","label","checked","disabled","isinvalid","customElementForwardEvents"],"mappings":";;ywEAAA,oBA2CIA,EAAEC,EAAAC,EAAA,KAAA,CAAA,EACFC,EAAIF,EAAAC,EAAA,OAAA,CAAA,EACJE,EAAKH,EAAAC,EAAA,QAAA,CAAA,EACLG,mBAAoB,EAAK,EACzBC,EAAQL,EAAAC,EAAA,WAAA,CAAA,EACRK,EAASN,EAAAC,EAAA,YAAA,CAAA,sLAFW,GAAK,gNAUjB,kBAAmBK,KAAa,YAAY,CAAA,EAAA,gBAAA,oDAK1CP,GAAE,MAA2BI,GAAK,eAXhD,wJA5CYI"}

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>
@@ -43,9 +65,6 @@
 <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;
@@ -53,9 +72,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 {
@@ -64,8 +83,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;
@@ -73,7 +92,7 @@
   position: relative;
 }
 .mc-radio__input::before {
-  border-radius: 100%;
+  border-radius: var(--radius-full, 100%);
   content: "";
   display: block;
   height: 0.5rem;
@@ -84,39 +103,39 @@
   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);
 }</style>

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` |   |
+