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

package/dist/components/checkboxgroup/CheckboxGroup.spec.js

@@ -0,0 +1,113 @@
+import { describe, it, expect } from 'vitest';
+import { render, fireEvent } from '@testing-library/svelte';
+import CheckboxGroup from './CheckboxGroup.svelte';
+const baseOptions = [
+    { id: 'cb1', label: 'Option 1', value: 'opt1' },
+    { id: 'cb2', label: 'Option 2', value: 'opt2' },
+    { id: 'cb3', label: 'Option 3', value: 'opt3' },
+];
+describe('m-checkbox-group component', () => {
+    it('renders all checkbox options', () => {
+        const { getByLabelText } = render(CheckboxGroup, {
+            props: {
+                name: 'choices',
+                options: baseOptions,
+                value: [],
+            },
+        });
+        baseOptions.forEach((opt) => {
+            const checkbox = getByLabelText(opt.label);
+            expect(checkbox).toBeTruthy();
+            expect(checkbox.name).toBe('choices');
+            expect(checkbox.value).toBe(opt.value);
+            expect(checkbox.checked).toBe(false);
+        });
+    });
+    it('pre-selects values from the value prop', () => {
+        const { getByLabelText } = render(CheckboxGroup, {
+            props: {
+                name: 'choices',
+                options: baseOptions,
+                value: ['opt2'],
+            },
+        });
+        const cb1 = getByLabelText('Option 1');
+        const cb2 = getByLabelText('Option 2');
+        const cb3 = getByLabelText('Option 3');
+        expect(cb1.checked).toBe(false);
+        expect(cb2.checked).toBe(true);
+        expect(cb3.checked).toBe(false);
+    });
+    it('updates value when user toggles checkboxes', async () => {
+        const { getByLabelText } = render(CheckboxGroup, {
+            props: {
+                name: 'choices',
+                options: baseOptions,
+                value: [],
+            },
+        });
+        const cb1 = getByLabelText('Option 1');
+        const cb2 = getByLabelText('Option 2');
+        await fireEvent.click(cb1);
+        expect(cb1.checked).toBe(true);
+        await fireEvent.click(cb2);
+        expect(cb2.checked).toBe(true);
+        await fireEvent.click(cb1);
+        expect(cb1.checked).toBe(false);
+    });
+    it('applies invalid class and aria-invalid when isinvalid=true', () => {
+        const { container, getByLabelText } = render(CheckboxGroup, {
+            props: {
+                name: 'choices',
+                options: baseOptions,
+                isinvalid: true,
+            },
+        });
+        const inputs = container.querySelectorAll('input[type="checkbox"]');
+        inputs.forEach((input) => {
+            expect(input).toHaveClass('is-invalid');
+            expect(input).toHaveAttribute('aria-invalid', 'true');
+        });
+        const cb1 = getByLabelText('Option 1');
+        expect(cb1).toHaveClass('is-invalid');
+    });
+    it('applies inline layout when inline=true', () => {
+        const { container } = render(CheckboxGroup, {
+            props: {
+                name: 'choices',
+                options: baseOptions,
+                inline: true,
+            },
+        });
+        const wrapper = container.querySelector('.mc-field__content');
+        expect(wrapper).toHaveClass('mc-field__content--inline');
+    });
+    it('renders disabled checkboxes properly', () => {
+        const disabledOptions = [
+            { id: 'cb1', label: 'Option 1', value: 'opt1', disabled: true },
+            { id: 'cb2', label: 'Option 2', value: 'opt2' },
+        ];
+        const { getByLabelText } = render(CheckboxGroup, {
+            props: {
+                name: 'choices',
+                options: disabledOptions,
+            },
+        });
+        const cb1 = getByLabelText('Option 1');
+        const cb2 = getByLabelText('Option 2');
+        expect(cb1.disabled).toBe(true);
+        expect(cb2.disabled).toBe(false);
+    });
+    it('sets indeterminate checkboxes', () => {
+        const { container } = render(CheckboxGroup, {
+            props: {
+                name: 'choices',
+                options: [
+                    { id: 'cb1', label: 'Option 1', value: 'opt1', indeterminate: true },
+                ],
+            },
+        });
+        const input = container.querySelector('input[type="checkbox"]');
+        expect(input.indeterminate).toBe(true);
+    });
+});

package/dist/components/checkboxgroup/CheckboxGroup.stories.d.ts

@@ -1,14 +1,6 @@
-import type { Meta } from '@storybook/html-vite';
-/**
- * Checkbox Groups are used to manage multiple checkbox selections within a group.
- * They usually find their place in forms and allow users to choose multiple options.
- *
- * The `MCheckboxGroup` component is the **Svelte / WebComponent** implementation of the **Checkbox group** component of Mozaic Design System.
- * The full specification of this component is available in [the associated documentation](https://mozaic.adeo.cloud/components/form/checkbox/#checkbox-group).
- */
-declare const _default: Meta;
-export default _default;
-export declare const Default: any;
-export declare const AllChecked: any;
-export declare const SomeDisabled: 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=CheckboxGroup.stories.d.ts.map

package/dist/components/checkboxgroup/CheckboxGroup.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxGroup.stories.d.ts","sourceRoot":"","sources":["../../../src/components/checkboxgroup/CheckboxGroup.stories.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAW,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAG1D;;;;;;GAMG;wBAuCE,IAAI;AArCT,wBAqCU;AAaV,eAAO,MAAM,OAAO,KAAoB,CAAC;AAiCzC,eAAO,MAAM,UAAU,KAAoB,CAAC;AA+B5C,eAAO,MAAM,YAAY,KAAoB,CAAC"}
+{"version":3,"file":"CheckboxGroup.stories.d.ts","sourceRoot":"","sources":["../../../src/components/checkboxgroup/CheckboxGroup.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/checkboxgroup/CheckboxGroup.stories.js

@@ -1,146 +1,62 @@
+import { html } from 'lit';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
 import { action } from 'storybook/actions';
-import { userEvent, expect } from 'storybook/test';
-/**
- * Checkbox Groups are used to manage multiple checkbox selections within a group.
- * They usually find their place in forms and allow users to choose multiple options.
- *
- * The `MCheckboxGroup` component is the **Svelte / WebComponent** implementation of the **Checkbox group** component of Mozaic Design System.
- * The full specification of this component is available in [the associated documentation](https://mozaic.adeo.cloud/components/form/checkbox/#checkbox-group).
- */
-export default {
+const meta = {
     title: 'Form Elements/Checkbox Group',
-    tags: ['autodocs', 'beta'],
-    argTypes: {
-        legend: {
-            description: 'Specify the legend of the group.',
-            control: { type: 'text' },
-        },
-        id: {
-            description: 'Specify the checkbox group id',
-            control: { type: 'text' },
-        },
-        options: {
-            description: 'Specify the checkbox options in JSON format. ```{ value: string; id?: string; label?: string; disabled?: boolean; indeterminate?: boolean; isinvalid?: boolean; }[]```',
-            control: { type: 'object' },
-        },
-        values: {
-            description: 'Specify the select items selected values in checkbox options',
-            control: { type: 'object' },
-        },
-        onChange: {
-            description: 'Event that occurs when the checkbox state changes',
-            action: 'change',
-            table: {
-                category: 'Events',
+    component: 'm-checkbox-group',
+    args: {
+        name: 'checkboxGroupName',
+        value: ['checkbox2'],
+        options: [
+            {
+                id: 'checkbox-01',
+                label: 'checkbox Label',
+                value: 'checkbox1',
             },
-        },
-        onBlur: {
-            description: 'Event that occurs when the checkbox group is blurred',
-            action: 'blur',
-            table: {
-                category: 'Events',
+            {
+                id: 'checkbox-02',
+                label: 'checkbox Label',
+                value: 'checkbox2',
             },
-        },
+            {
+                id: 'checkbox-03',
+                label: 'checkbox Label',
+                value: 'checkbox3',
+            },
+            {
+                id: 'checkbox-04',
+                label: 'checkbox Label',
+                value: 'checkbox4',
+            },
+        ],
+    },
+    render: (args) => {
+        const onInput = action('input');
+        const onChange = action('change');
+        const onFocus = action('focus');
+        const onBlur = action('blur');
+        return html `
+      <m-checkbox-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-checkbox-group>
+    `;
     },
 };
-const Template = (args) => {
-    const checkboxGroup = document.createElement('m-checkbox-group');
-    checkboxGroup.setAttribute('id', args.id || 'checkbox-group-id');
-    checkboxGroup.setAttribute('legend', args.legend || 'Checkbox Group Title');
-    checkboxGroup.setAttribute('options', JSON.stringify(args.options || []));
-    checkboxGroup.setAttribute('values', JSON.stringify(args.values || []));
-    checkboxGroup.onchange = action('onChange');
-    checkboxGroup.onblur = action('onBlur');
-    return checkboxGroup;
-};
-export const Default = Template.bind({});
-Default.args = {
-    options: [
-        {
-            id: 'option1',
-            name: 'option1',
-            label: 'Option 1',
-            value: 'option1',
-        },
-        {
-            id: 'option2',
-            name: 'option2',
-            label: 'Option 2',
-            value: 'option2',
-        },
-        {
-            id: 'option3',
-            name: 'option3',
-            label: 'Option 3',
-            value: 'option3',
-        },
-    ],
-    values: ['option2'],
-};
-Default.play = async ({ canvasElement }) => {
-    const group = canvasElement.querySelector('m-checkbox-group');
-    const checkboxGroup = group?.shadowRoot?.querySelectorAll('input');
-    expect(group).not.toBeNull();
-    expect(checkboxGroup?.length).toBe(3);
-    await userEvent.click(checkboxGroup[0]);
-    expect(checkboxGroup?.[0]).toBeChecked();
-};
-export const AllChecked = Template.bind({});
-AllChecked.args = {
-    options: [
-        {
-            id: 'option1',
-            name: 'option1',
-            label: 'Option 1',
-            value: 'option1',
-        },
-        {
-            id: 'option2',
-            name: 'option2',
-            label: 'Option 2',
-            value: 'option2',
-        },
-        {
-            id: 'option3',
-            name: 'option3',
-            label: 'Option 3',
-            value: 'option3',
-        },
-    ],
-    values: ['option1', 'option2', 'option3'],
-};
-AllChecked.play = async ({ canvasElement }) => {
-    const group = canvasElement.querySelector('m-checkbox-group');
-    const checkboxGroup = group?.shadowRoot?.querySelectorAll('input');
-    expect(checkboxGroup?.length).toBe(3);
-    checkboxGroup?.forEach((checkbox) => expect(checkbox).toBeChecked());
-};
-export const SomeDisabled = Template.bind({});
-SomeDisabled.args = {
-    options: [
-        {
-            id: 'option1',
-            name: 'option1',
-            label: 'Option 1',
-            value: 'option1',
-            disabled: true,
-        },
-        {
-            id: 'option2',
-            name: 'option2',
-            label: 'Option 2',
-            checked: true,
-        },
-        {
-            id: 'option3',
-            name: 'option3',
-            label: 'Option 3',
-            checked: false,
-        },
-    ],
-};
-SomeDisabled.play = async ({ canvasElement }) => {
-    const group = canvasElement.querySelector('m-checkbox-group');
-    const checkboxGroup = group?.shadowRoot?.querySelectorAll('input');
-    expect(checkboxGroup?.[0]).toBeDisabled();
-};
+export default meta;
+export const Default = {};

package/dist/components/checkboxgroup/CheckboxGroup.svelte

@@ -9,70 +9,73 @@
 />
 
 <script lang="ts">
-  import type { CheckboxGroupOption } from './checkboxgroup.types';
   import { customElementForwardEvents } from '../../utils';
-
+  /**
+   * A checkbox is an interactive component used to select or deselect an option, typically within a list of choices. It allows users to make multiple selections independently and is often accompanied by a label for clarity. Checkboxes are commonly used in forms, filters, settings, and preference selections to provide a simple and intuitive way to enable or disable specific options. <br><br> To put a label, requierement text, help text or to apply a valid or invalid message, the examples are available in the [Field section](/docs/form-elements-field--docs#input).
+   */
   interface Props {
-    options: Array<CheckboxGroupOption>;
+    /**
+     * The name attribute for the checkbox element, typically used for form submission.
+     */
     name: string;
-    id?: string;
-    legend?: string;
-    values?: Array<string | number>;
+    /**
+     * The current value of the checkbox group.
+     */
+    value?: Array<string>;
+    /**
+     * list of properties of each checkbox button of the checkbox group
+     */
+    options: Array<{
+      id: string;
+      label: string;
+      value: string;
+      disabled?: boolean;
+      indeterminate?: boolean;
+      indented?: boolean;
+    }>;
+    /**
+     * If `true`, applies an invalid state to the checkbox group.
+     */
+    isinvalid?: boolean;
+    /**
+     * If `true`, make the form element of the group inline.
+     */
+    inline?: boolean;
   }
 
-  const uid = $props.id();
   let {
     name,
-    id = uid,
     options,
-    legend,
-    values = $bindable([]),
+    value = $bindable([]),
+    inline,
+    isinvalid,
   }: Props = $props();
-
-  function getOptionId(index: number): string {
-    return options[index]?.id ?? `${id}-${index}`;
-  }
 </script>
 
-<div class="checkbox-group-container" {id}>
-  <fieldset class="mc-field mc-field--group">
-    {#if legend}
-      <legend class="mc-field__legend">
-        {legend}
-      </legend>
-    {/if}
-    <div class="mc-field__container">
-      {#each options as opt, index (getOptionId(index))}
-        <div class="mc-checkbox mc-field__item">
-          <input
-            type="checkbox"
-            class="mc-checkbox__input"
-            class:is-invalid={opt.isinvalid}
-            id={getOptionId(index)}
-            {name}
-            disabled={opt.disabled}
-            bind:indeterminate={opt.indeterminate}
-            aria-invalid={opt.isinvalid}
-            bind:group={values}
-            value={opt.value}
-          />
-          {#if opt.label}
-            <label for={getOptionId(index)} class="mc-checkbox__label"
-              >{opt.label}</label
-            >
-          {/if}
-        </div>
-      {/each}
+<div class={['mc-field__content', inline && 'mc-field__content--inline']}>
+  {#each options as option}
+    <div class="mc-checkbox mc-field__item">
+      <input
+        type="checkbox"
+        class={['mc-checkbox__input', isinvalid && 'is-invalid']}
+        id={option.id}
+        {name}
+        disabled={option.disabled}
+        indeterminate={option.indeterminate}
+        aria-invalid={isinvalid}
+        bind:group={value}
+        value={option.value}
+      />
+      {#if option.label}
+        <label for={option.id} class="mc-checkbox__label">{option.label}</label>
+      {/if}
     </div>
-  </fieldset>
+  {/each}
 </div>
 
 <style>/**
  * Do not edit directly, this file was auto-generated.
  */
-/**
- * Do not edit directly, this file was auto-generated.
- */
 /* stylelint-disable string-no-newline */
 .mc-checkbox {
   align-items: center;
@@ -84,9 +87,9 @@
   margin-left: 1.75rem;
 }
 .mc-checkbox__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-checkbox__input {
@@ -95,29 +98,29 @@
   cursor: pointer;
   flex-shrink: 0;
   transition: box-shadow 200ms ease;
-  background-color: #ffffff;
-  border: 0.125rem solid #666666;
-  border-radius: 0.25rem;
+  background-color: var(--forms-color-background-default, #ffffff);
+  border: var(--border-m, 0.125rem) solid var(--forms-color-border-default, #666666);
+  border-radius: var(--forms-radius-border, 0.25rem);
   transition: all ease 200ms;
   height: 1.25rem;
   width: 1.25rem;
 }
 .mc-checkbox__input:hover {
-  border-color: #4d4d4d;
+  border-color: var(--forms-color-border-hover, #4d4d4d);
 }
 .mc-checkbox__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-checkbox__input:checked {
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='%23ffffff' viewBox='0 0 16 16'%3E%3Cpath d='M7.63 11.21a1 1 0 0 1-1.38 0l-2.92-2.6a1 1 0 1 1 1.34-1.48l2.22 2 4.41-4.34a1 1 0 1 1 1.4 1.42z'/%3E%3C/svg%3E");
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='var(--forms-color-icon-inverse, %23ffffff)' viewBox='0 0 16 16'%3E%3Cpath d='M7.63 11.21a1 1 0 0 1-1.38 0l-2.92-2.6a1 1 0 1 1 1.34-1.48l2.22 2 4.41-4.34a1 1 0 1 1 1.4 1.42z'/%3E%3C/svg%3E");
 }
 .mc-checkbox__input:indeterminate {
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='%23ffffff' viewBox='0 0 16 16'%3E%3Cpath d='M12 9H4a1 1 0 010-2h8a1 1 0 010 2z'/%3E%3C/svg%3E");
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='var(--forms-color-icon-inverse, %23ffffff)' viewBox='0 0 16 16'%3E%3Cpath d='M12 9H4a1 1 0 010-2h8a1 1 0 010 2z'/%3E%3C/svg%3E");
 }
 .mc-checkbox__input:checked, .mc-checkbox__input:indeterminate {
-  background-color: #117f03;
+  background-color: var(--forms-color-background-checked, #117f03);
   background-size: 1rem 1rem;
   background-position: center;
 }
@@ -125,46 +128,46 @@
   border-color: transparent;
 }
 .mc-checkbox__input:disabled {
-  background-color: #d9d9d9;
+  background-color: var(--forms-color-background-disabled, #d9d9d9);
   cursor: not-allowed;
 }
 .mc-checkbox__input:disabled:checked {
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='%23737373' viewBox='0 0 16 16'%3E%3Cpath d='M7.63 11.21a1 1 0 0 1-1.38 0l-2.92-2.6a1 1 0 1 1 1.34-1.48l2.22 2 4.41-4.34a1 1 0 1 1 1.4 1.42z'/%3E%3C/svg%3E");
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='var(--forms-color-icon-disabled, %23737373)' viewBox='0 0 16 16'%3E%3Cpath d='M7.63 11.21a1 1 0 0 1-1.38 0l-2.92-2.6a1 1 0 1 1 1.34-1.48l2.22 2 4.41-4.34a1 1 0 1 1 1.4 1.42z'/%3E%3C/svg%3E");
 }
 .mc-checkbox__input:disabled:indeterminate {
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='%23737373' viewBox='0 0 16 16'%3E%3Cpath d='M12 9H4a1 1 0 010-2h8a1 1 0 010 2z'/%3E%3C/svg%3E");
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='var(--forms-color-icon-disabled, %23737373)' viewBox='0 0 16 16'%3E%3Cpath d='M12 9H4a1 1 0 010-2h8a1 1 0 010 2z'/%3E%3C/svg%3E");
 }
 .mc-checkbox__input:disabled + .mc-checkbox__label {
-  color: #737373;
+  color: var(--forms-color-text-disabled, #737373);
   cursor: not-allowed;
 }
 .mc-checkbox__input:not(:disabled):checked:hover, .mc-checkbox__input:not(:disabled):indeterminate:hover {
-  background-color: #006902;
+  background-color: var(--forms-color-background-checked-hover, #006902);
 }
 .mc-checkbox__input.is-invalid:not(:checked, :indeterminate) {
-  border-color: #ea302d;
+  border-color: var(--forms-color-border-invalid, #ea302d);
 }
 .mc-checkbox__input.is-invalid:not(:checked, :indeterminate):hover {
-  border-color: #c61112;
+  border-color: var(--forms-color-border-invalid-hover, #c61112);
 }
 
 /* stylelint-enable string-no-newline */
 /* 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;
@@ -174,8 +177,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;
@@ -186,19 +189,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;
@@ -216,4 +219,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>

package/dist/components/checkboxgroup/CheckboxGroup.svelte.d.ts

@@ -1,12 +1,36 @@
-import type { CheckboxGroupOption } from './checkboxgroup.types';
+/**
+ * A checkbox is an interactive component used to select or deselect an option, typically within a list of choices. It allows users to make multiple selections independently and is often accompanied by a label for clarity. Checkboxes are commonly used in forms, filters, settings, and preference selections to provide a simple and intuitive way to enable or disable specific options. <br><br> To put a label, requierement text, help text or to apply a valid or invalid message, the examples are available in the [Field section](/docs/form-elements-field--docs#input).
+ */
 interface Props {
-    options: Array<CheckboxGroupOption>;
+    /**
+     * The name attribute for the checkbox element, typically used for form submission.
+     */
     name: string;
-    id?: string;
-    legend?: string;
-    values?: Array<string | number>;
+    /**
+     * The current value of the checkbox group.
+     */
+    value?: Array<string>;
+    /**
+     * list of properties of each checkbox button of the checkbox group
+     */
+    options: Array<{
+        id: string;
+        label: string;
+        value: string;
+        disabled?: boolean;
+        indeterminate?: boolean;
+        indented?: boolean;
+    }>;
+    /**
+     * If `true`, applies an invalid state to the checkbox group.
+     */
+    isinvalid?: boolean;
+    /**
+     * If `true`, make the form element of the group inline.
+     */
+    inline?: boolean;
 }
-declare const CheckboxGroup: import("svelte").Component<Props, {}, "values">;
+declare const CheckboxGroup: import("svelte").Component<Props, {}, "value">;
 type CheckboxGroup = ReturnType<typeof CheckboxGroup>;
 export default CheckboxGroup;
 //# sourceMappingURL=CheckboxGroup.svelte.d.ts.map