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

package/dist/components/checkbox/Checkbox.stories.js

@@ -1,134 +1,77 @@
+import { html } from 'lit';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
 import { action } from 'storybook/actions';
-import { expect, userEvent } from 'storybook/test';
-/**
- * Checkboxes are used to select one or multiple options in a list.
- * They usually find their place in forms and are also used to accept terms.
- *
- * The `MCheckbox` component is the **Svelte / WebComponent** implementation of the **Checkbox** component of Mozaic Design System.
- * The full specification of this component is available in [the associated documentation](https://mozaic.adeo.cloud/components/form/checkbox/).
- */
-export default {
+const meta = {
     title: 'Form Elements/Checkbox',
-    tags: ['autodocs', 'beta'],
-    argTypes: {
-        label: {
-            description: 'Specify the label of the checkbox',
-            control: 'text',
-        },
-        name: {
-            description: 'Specify the name of the checkbox',
-            control: 'text',
-        },
-        id: {
-            description: 'Specify the id of the checkbox',
-            control: 'text',
-        },
-        checked: {
-            description: 'Determine whether the checkbox is checked',
-            control: 'boolean',
-        },
-        indeterminate: {
-            description: 'Determine whether the checkbox is indeterminate',
-            control: 'boolean',
-        },
-        disabled: {
-            description: 'Determine whether the checkbox is disabled',
-            control: 'boolean',
-        },
-        isinvalid: {
-            description: 'Determine whether the checkbox is invalid',
-            control: 'boolean',
-        },
-        required: {
-            description: 'Determine whether the checkbox is required',
-            control: 'boolean',
-        },
-        onChange: {
-            description: 'Event that occurs when the checkbox state changes',
-            action: 'change',
-            table: {
-                category: 'Events',
-            },
-        },
-        onBlur: {
-            description: 'Event that occurs when the checkbox state is blurred',
-            action: 'blur',
-            table: {
-                category: 'Events',
-            },
-        },
+    component: 'm-checkbox',
+    args: {
+        label: 'Label',
+        id: 'checkboxId',
+    },
+    render: (args) => {
+        const onChange = action('change');
+        const onFocus = action('focus');
+        const onBlur = action('blur');
+        return html `
+      <m-checkbox
+        id=${ifDefined(args.id)}
+        name=${ifDefined(args.name)}
+        label=${ifDefined(args.label)}
+        checked=${ifDefined(args.checked)}
+        indeterminate=${ifDefined(args.indeterminate)}
+        isinvalid=${ifDefined(args.isinvalid)}
+        disabled=${ifDefined(args.disabled)}
+        indented=${ifDefined(args.indented)}
+        @change=${(event) => {
+            onChange(event);
+        }}
+        @focus=${(event) => {
+            onFocus(event);
+        }}
+        @blur=${(event) => {
+            onBlur(event);
+        }}
+      ></m-checkbox>
+    `;
     },
 };
-const Template = (args) => {
-    const checkbox = document.createElement('m-checkbox');
-    checkbox.setAttribute('name', args.name || 'checkbox');
-    checkbox.setAttribute('label', args.label || 'Checkbox label');
-    if (args.id)
-        checkbox.setAttribute('id', args.id);
-    if (args.checked)
-        checkbox.setAttribute('checked', 'true');
-    if (args.indeterminate)
-        checkbox.setAttribute('indeterminate', 'true');
-    if (args.disabled)
-        checkbox.setAttribute('disabled', 'true');
-    if (args.isinvalid)
-        checkbox.setAttribute('isinvalid', 'true');
-    if (args.required)
-        checkbox.setAttribute('required', 'true');
-    checkbox.addEventListener('change', action('onChange'));
-    checkbox.addEventListener('blur', action('onBlur'));
-    return checkbox;
-};
-export const Default = Template.bind({});
-Default.play = async ({ canvasElement }) => {
-    const checkbox = canvasElement.querySelector('m-checkbox');
-    const input = checkbox?.shadowRoot?.querySelector('input');
-    expect(checkbox).not.toBeNull();
-    await userEvent.click(input);
-    expect(input).toBeChecked();
-};
-export const Checked = Template.bind({});
-Checked.args = {
-    checked: true,
-};
-Checked.play = async ({ canvasElement }) => {
-    const checkbox = canvasElement.querySelector('m-checkbox');
-    const input = checkbox?.shadowRoot?.querySelector('input');
-    expect(input).toBeChecked();
-};
-export const Indeterminate = Template.bind({});
-Indeterminate.args = {
-    indeterminate: true,
-};
-Indeterminate.play = async ({ canvasElement }) => {
-    const checkbox = canvasElement.querySelector('m-checkbox');
-    const input = checkbox?.shadowRoot?.querySelector('input');
-    expect(input?.indeterminate).toBeTruthy();
-};
-export const Disabled = Template.bind({});
-Disabled.args = {
-    disabled: true,
+export default meta;
+export const Default = {};
+export const Checked = {
+    args: {
+        checked: true,
+        id: 'checkedId',
+    },
 };
-Disabled.play = async ({ canvasElement }) => {
-    const checkbox = canvasElement.querySelector('m-checkbox');
-    const input = checkbox?.shadowRoot?.querySelector('input');
-    expect(input).toBeDisabled();
+export const Indeterminate = {
+    args: {
+        indeterminate: true,
+        id: 'IndeterminateId',
+    },
 };
-export const Invalid = Template.bind({});
-Invalid.args = {
-    isinvalid: true,
+export const Disabled = {
+    args: {
+        disabled: true,
+        id: 'disabledId',
+    },
 };
-Invalid.play = async ({ canvasElement }) => {
-    const checkbox = canvasElement.querySelector('m-checkbox');
-    const input = checkbox?.shadowRoot?.querySelector('input');
-    expect(input).toHaveAttribute('aria-invalid', 'true');
+export const Invalid = {
+    args: {
+        isinvalid: true,
+        id: 'invalidId',
+    },
 };
-export const Required = Template.bind({});
-Required.args = {
-    required: true,
+export const IndeterminateDisabled = {
+    args: {
+        indeterminate: true,
+        disabled: true,
+        id: 'checkedIndeterminateId',
+    },
 };
-Required.play = async ({ canvasElement }) => {
-    const checkbox = canvasElement.querySelector('m-checkbox');
-    const input = checkbox?.shadowRoot?.querySelector('input');
-    expect(input).toHaveAttribute('required');
+export const CheckedDisabled = {
+    args: {
+        checked: true,
+        disabled: true,
+        id: 'checkedDisabledId',
+    },
 };

package/dist/components/checkbox/Checkbox.svelte

@@ -1,55 +1,75 @@
 <svelte:options
   customElement={{
     tag: 'm-checkbox',
+    props: {
+      checked: { reflect: true, type: 'Boolean', attribute: 'checked' },
+    },
     extend: customElementForwardEvents,
   }}
 />
 
 <script lang="ts">
   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.
+   */
   interface Props {
-    name: string;
+    /**
+     * A unique identifier for the checkbox, used to associate the label with the form element.
+     */
+    id: string;
+    /**
+     * The name attribute for the checkbox element, typically used for form submission.
+     */
+    name?: string;
+    /**
+     * The text label displayed next to the checkbox.
+     */
     label?: string;
-    id?: string;
+    /**
+     * The checkbox's checked state.
+     */
     checked?: boolean;
+    /**
+     * Sets the checkbox to an indeterminate state (partially selected).
+     */
     indeterminate?: boolean;
-    disabled?: boolean;
+    /**
+     * If `true`, applies an invalid state to the checkbox.
+     */
     isinvalid?: boolean;
-    required?: boolean;
-    onchange?: (event: Event) => void;
-    onblur?: (event: FocusEvent) => void;
+    /**
+     * If `true`, disables the checkbox, making it non-interactive.
+     */
+    disabled?: boolean;
+    /**
+     * If `true`, indent the checkbox.
+     */
+    indented?: boolean;
   }
 
-  const uid = $props.id();
   let {
-    name = 'checkbox',
-    id = uid,
+    id,
+    name,
     label,
-    indeterminate = false,
-    disabled = false,
-    isinvalid = false,
-    required = false,
     checked = $bindable(false),
-    onchange,
-    onblur,
+    indeterminate,
+    disabled,
+    isinvalid,
+    indented,
   }: Props = $props();
 </script>
 
-<div class="mc-checkbox">
+<div class={['mc-checkbox', indented && 'mc-checkbox--indented']}>
   <input
     {id}
     type="checkbox"
-    class="mc-checkbox__input"
-    class:is-invalid={isinvalid}
+    class={['mc-checkbox__input', isinvalid && 'is-invalid']}
     aria-invalid={isinvalid}
     {name}
     {disabled}
     {indeterminate}
-    {required}
     bind:checked
-    {onchange}
-    {onblur}
   />
   {#if label}
     <label for={id} class="mc-checkbox__label">{label}</label>

package/dist/components/checkbox/Checkbox.svelte.d.ts

@@ -1,14 +1,39 @@
+/**
+ * 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.
+ */
 interface Props {
-    name: string;
+    /**
+     * A unique identifier for the checkbox, used to associate the label with the form element.
+     */
+    id: string;
+    /**
+     * The name attribute for the checkbox element, typically used for form submission.
+     */
+    name?: string;
+    /**
+     * The text label displayed next to the checkbox.
+     */
     label?: string;
-    id?: string;
+    /**
+     * The checkbox's checked state.
+     */
     checked?: boolean;
+    /**
+     * Sets the checkbox to an indeterminate state (partially selected).
+     */
     indeterminate?: boolean;
-    disabled?: boolean;
+    /**
+     * If `true`, applies an invalid state to the checkbox.
+     */
     isinvalid?: boolean;
-    required?: boolean;
-    onchange?: (event: Event) => void;
-    onblur?: (event: FocusEvent) => void;
+    /**
+     * If `true`, disables the checkbox, making it non-interactive.
+     */
+    disabled?: boolean;
+    /**
+     * If `true`, indent the checkbox.
+     */
+    indented?: boolean;
 }
 declare const Checkbox: import("svelte").Component<Props, {}, "checked">;
 type Checkbox = ReturnType<typeof Checkbox>;

package/dist/components/checkbox/Checkbox.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/checkbox/Checkbox.svelte.ts"],"names":[],"mappings":"AAME,UAAU,KAAK;IACb,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IAClC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;CACtC;AAoCH,QAAA,MAAM,QAAQ,kDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Checkbox.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/checkbox/Checkbox.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,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAoCH,QAAA,MAAM,QAAQ,kDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/dist/components/checkbox/README.md

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

package/dist/components/checkboxgroup/CheckboxGroup.js

@@ -1,10 +1,10 @@
-import{$ as K,a9 as N,c as P,k as Q,p as R,a as T,b as m,l as U,f as E,s as A,d as b,t as x,h as w,i as V,j as u,r as d,g as D,m as r,e as W}from"../../custom-element.js";import{i as F}from"../../if.js";import{e as X}from"../../each.js";import{s as f,r as Y}from"../../attributes.js";import{b as Z}from"../../input.js";import{c as $}from"../../custom-element-forward-events.js";function ee(v,t,i,y,n){var s=()=>{y(i[v])};i.addEventListener(t,s),n?K(()=>{i[v]=n()}):s(),(i===document.body||i===window||i===document)&&N(()=>{i.removeEventListener(t,s)})}var ae=E('<legend class="mc-field__legend svelte-11asba7"> </legend>'),re=E('<label class="mc-checkbox__label svelte-11asba7"> </label>'),oe=E('<div class="mc-checkbox mc-field__item svelte-11asba7"><input type="checkbox"/> <!></div>'),ie=E('<div class="checkbox-group-container"><fieldset class="mc-field mc-field--group svelte-11asba7"><!> <div class="mc-field__container"></div></fieldset></div>');const te={hash:"svelte-11asba7",code:`/**
+import{c as A,p as D,a as F,b as o,l as G,f as k,t as _,i as g,j as S,k as s,r as p,e as E,g as y,d as C,s as q,m as t,h as I}from"../../custom-element.js";import{i as J}from"../../if.js";import{e as K}from"../../each.js";import{r as L,s as m}from"../../attributes.js";import{b as N}from"../../input.js";import{c as O}from"../../custom-element-forward-events.js";var P=k('<label class="mc-checkbox__label svelte-11asba7"> </label>'),Q=k('<div class="mc-checkbox mc-field__item svelte-11asba7"><input type="checkbox"/> <!></div>'),R=k("<div></div>");const T={hash:"svelte-11asba7",code:`/**
  * Do not edit directly, this file was auto-generated.
  */
 /* stylelint-disable string-no-newline */.mc-checkbox.svelte-11asba7 {align-items:center;display:flex;gap:0.5rem;padding:0.375rem;}.mc-checkbox__label.svelte-11asba7 {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.svelte-11asba7 {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:var(--forms-radius-border, 0.25rem);transition:all ease 200ms;height:1.25rem;width:1.25rem;}.mc-checkbox__input.svelte-11asba7:hover {border-color:var(--forms-color-border-hover, #4d4d4d);}.mc-checkbox__input.svelte-11asba7: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-checkbox__input.svelte-11asba7:checked {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.svelte-11asba7:indeterminate {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.svelte-11asba7:checked, .mc-checkbox__input.svelte-11asba7:indeterminate {background-color:var(--forms-color-background-checked, #117f03);background-size:1rem 1rem;background-position:center;}.mc-checkbox__input.svelte-11asba7:checked, .mc-checkbox__input.svelte-11asba7:indeterminate, .mc-checkbox__input.svelte-11asba7:disabled {border-color:transparent;}.mc-checkbox__input.svelte-11asba7:disabled {background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed;}.mc-checkbox__input.svelte-11asba7: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='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.svelte-11asba7: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='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.svelte-11asba7:disabled + .mc-checkbox__label:where(.svelte-11asba7) {color:var(--forms-color-text-disabled, #737373);cursor:not-allowed;}.mc-checkbox__input.svelte-11asba7:not(:disabled):checked:hover, .mc-checkbox__input.svelte-11asba7:not(:disabled):indeterminate:hover {background-color:var(--forms-color-background-checked-hover, #006902);}.mc-checkbox__input.is-invalid.svelte-11asba7:not(:checked, :indeterminate) {border-color:var(--forms-color-border-invalid, #ea302d);}.mc-checkbox__input.is-invalid.svelte-11asba7:not(:checked, :indeterminate):hover {border-color:var(--forms-color-border-invalid-hover, #c61112);}
 
 /* stylelint-enable string-no-newline */
-/* stylelint-disable string-no-newline */ .mc-field__legend.svelte-11asba7 {font-size:var(--font-size-100, 0.875rem);line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-regular, 400);color:var(--field-color-label, #000000);}.mc-field__legend.svelte-11asba7 {padding-inline:0;}.mc-field--group.svelte-11asba7 {border-width:0;margin-inline:0;padding:0;}
+/* stylelint-disable string-no-newline */.mc-field__content.svelte-11asba7 {margin-top:0.5rem;}
 
-/* stylelint-enable string-no-newline */`};function se(v,t){const i=Q();R(t,!0),T(v,te);const y=[];let n=m(t,"name",7),s=m(t,"id",7,i),h=m(t,"options",7),g=m(t,"legend",7),_=m(t,"values",31,()=>U([]));function C(e){var a;return((a=h()[e])==null?void 0:a.id)??`${s()}-${e}`}var G={get name(){return n()},set name(e){n(e),u()},get id(){return s()},set id(e=i){s(e),u()},get options(){return h()},set options(e){h(e),u()},get legend(){return g()},set legend(e){g(e),u()},get values(){return _()},set values(e=[]){_(e),u()}},p=ie(),B=b(p),M=b(B);{var I=e=>{var a=ae(),k=b(a,!0);d(a),x(()=>D(k,g())),w(e,a)};F(M,e=>{g()&&e(I)})}var H=A(M,2);return X(H,23,h,(e,a)=>C(a),(e,a,k)=>{var z=oe(),o=b(z);Y(o);let L;var j,O=A(o,2);{var S=l=>{var c=re(),q=b(c,!0);d(c),x(J=>{f(c,"for",J),D(q,r(a).label)},[()=>C(r(k))]),w(l,c)};F(O,l=>{r(a).label&&l(S)})}d(z),x((l,c)=>{L=W(o,1,"mc-checkbox__input svelte-11asba7",null,L,l),f(o,"id",c),f(o,"name",n()),o.disabled=r(a).disabled,f(o,"aria-invalid",r(a).isinvalid),j!==(j=r(a).value)&&(o.value=(o.__value=r(a).value)??"")},[()=>({"is-invalid":r(a).isinvalid}),()=>C(r(k))]),ee("indeterminate","change",o,l=>r(a).indeterminate=l,()=>r(a).indeterminate),Z(y,[],o,()=>(r(a).value,_()),_),w(e,z)}),d(H),d(B),d(p),x(()=>f(p,"id",s())),w(v,p),V(G)}customElements.define("m-checkbox-group",P(se,{options:{attribute:"options",reflect:!0,type:"Array"},name:{},id:{},legend:{},values:{}},[],[],!0,$));
+/* stylelint-enable string-no-newline */.mc-field__content.svelte-11asba7:where(.mc-field__content--inline:where(.svelte-11asba7)) {display:flex;flex-flow:row wrap;gap:0.25rem 1rem;}`};function U(x,i){D(i,!0),F(x,T);const z=[];let v=o(i,"name",7),b=o(i,"options",7),l=o(i,"value",31,()=>G([])),u=o(i,"inline",7),n=o(i,"isinvalid",7);var B={get name(){return v()},set name(e){v(e),s()},get options(){return b()},set options(e){b(e),s()},get value(){return l()},set value(e=[]){l(e),s()},get inline(){return u()},set inline(e){u(e),s()},get isinvalid(){return n()},set isinvalid(e){n(e),s()}},c=R();return K(c,21,b,e=>e.id,(e,r)=>{var h=Q(),a=C(h);L(a);var w,M=q(a,2);{var H=f=>{var d=P(),j=C(d,!0);p(d),_(()=>{m(d,"for",t(r).id),I(j,t(r).label)}),g(f,d)};J(M,f=>{t(r).label&&f(H)})}p(h),_(()=>{E(a,1,y(["mc-checkbox__input",n()&&"is-invalid"]),"svelte-11asba7"),m(a,"id",t(r).id),m(a,"name",v()),a.disabled=t(r).disabled,a.indeterminate=t(r).indeterminate,m(a,"aria-invalid",n()),w!==(w=t(r).value)&&(a.value=(a.__value=t(r).value)??"")}),N(z,[],a,()=>(t(r).value,l()),l),g(e,h)}),p(c),_(()=>E(c,1,y(["mc-field__content",u()&&"mc-field__content--inline"]),"svelte-11asba7")),g(x,c),S(B)}customElements.define("m-checkbox-group",A(U,{options:{attribute:"options",reflect:!0,type:"Array"},name:{},value:{},inline:{},isinvalid:{}},[],[],!0,O));
 //# sourceMappingURL=CheckboxGroup.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"CheckboxGroup.js","sources":["../../../node_modules/svelte/src/internal/client/dom/elements/bindings/universal.js","../../../src/components/checkboxgroup/CheckboxGroup.svelte"],"sourcesContent":["import { render_effect, teardown } from '../../../reactivity/effects.js';\nimport { listen } from './shared.js';\n\n/**\n * @param {'innerHTML' | 'textContent' | 'innerText'} property\n * @param {HTMLElement} element\n * @param {() => unknown} get\n * @param {(value: unknown) => void} set\n * @returns {void}\n */\nexport function bind_content_editable(property, element, get, set = get) {\n\telement.addEventListener('input', () => {\n\t\t// @ts-ignore\n\t\tset(element[property]);\n\t});\n\n\trender_effect(() => {\n\t\tvar value = get();\n\n\t\tif (element[property] !== value) {\n\t\t\tif (value == null) {\n\t\t\t\t// @ts-ignore\n\t\t\t\tvar non_null_value = element[property];\n\t\t\t\tset(non_null_value);\n\t\t\t} else {\n\t\t\t\t// @ts-ignore\n\t\t\t\telement[property] = value + '';\n\t\t\t}\n\t\t}\n\t});\n}\n\n/**\n * @param {string} property\n * @param {string} event_name\n * @param {Element} element\n * @param {(value: unknown) => void} set\n * @param {() => unknown} [get]\n * @returns {void}\n */\nexport function bind_property(property, event_name, element, set, get) {\n\tvar handler = () => {\n\t\t// @ts-ignore\n\t\tset(element[property]);\n\t};\n\n\telement.addEventListener(event_name, handler);\n\n\tif (get) {\n\t\trender_effect(() => {\n\t\t\t// @ts-ignore\n\t\t\telement[property] = get();\n\t\t});\n\t} else {\n\t\thandler();\n\t}\n\n\t// @ts-ignore\n\tif (element === document.body || element === window || element === document) {\n\t\tteardown(() => {\n\t\t\telement.removeEventListener(event_name, handler);\n\t\t});\n\t}\n}\n\n/**\n * @param {HTMLElement} element\n * @param {(value: unknown) => void} set\n * @returns {void}\n */\nexport function bind_focused(element, set) {\n\tlisten(element, ['focus', 'blur'], () => {\n\t\tset(element === document.activeElement);\n\t});\n}\n","<svelte:options\n  customElement={{\n    tag: 'm-checkbox-group',\n    props: {\n      options: { reflect: true, type: 'Array', attribute: 'options' },\n    },\n    extend: customElementForwardEvents,\n  }}\n/>\n\n<script lang=\"ts\">\n  import type { CheckboxGroupOption } from './checkboxgroup.types';\n  import { customElementForwardEvents } from '../../utils';\n\n  interface Props {\n    options: Array<CheckboxGroupOption>;\n    name: string;\n    id?: string;\n    legend?: string;\n    values?: Array<string | number>;\n  }\n\n  const uid = $props.id();\n  let {\n    name,\n    id = uid,\n    options,\n    legend,\n    values = $bindable([]),\n  }: Props = $props();\n\n  function getOptionId(index: number): string {\n    return options[index]?.id ?? `${id}-${index}`;\n  }\n</script>\n\n<div class=\"checkbox-group-container\" {id}>\n  <fieldset class=\"mc-field mc-field--group\">\n    {#if legend}\n      <legend class=\"mc-field__legend\">\n        {legend}\n      </legend>\n    {/if}\n    <div class=\"mc-field__container\">\n      {#each options as opt, index (getOptionId(index))}\n        <div class=\"mc-checkbox mc-field__item\">\n          <input\n            type=\"checkbox\"\n            class=\"mc-checkbox__input\"\n            class:is-invalid={opt.isinvalid}\n            id={getOptionId(index)}\n            {name}\n            disabled={opt.disabled}\n            bind:indeterminate={opt.indeterminate}\n            aria-invalid={opt.isinvalid}\n            bind:group={values}\n            value={opt.value}\n          />\n          {#if opt.label}\n            <label for={getOptionId(index)} class=\"mc-checkbox__label\"\n              >{opt.label}</label\n            >\n          {/if}\n        </div>\n      {/each}\n    </div>\n  </fieldset>\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/checkbox';\n  @use '@mozaic-ds/styles/components/field';\n</style>\n"],"names":["bind_property","property","event_name","element","set","get","handler","render_effect","teardown","uid","$.props_id","name","$.prop","$$props","id","options","legend","values","$.proxy","getOptionId","index","_a","$$render","consequent","$.each","div_1","opt","$.set_text","text_1","$.get","consequent_1","input","$.set_attribute","input_value","$.bind_property","$$value","customElementForwardEvents"],"mappings":"0XAwCO,SAASA,GAAcC,EAAUC,EAAYC,EAASC,EAAKC,EAAK,CACtE,IAAIC,EAAU,IAAM,CAEnBF,EAAID,EAAQF,CAAQ,CAAC,CACtB,EAEAE,EAAQ,iBAAiBD,EAAYI,CAAO,EAExCD,EACHE,EAAc,IAAM,CAEnBJ,EAAQF,CAAQ,EAAII,EAAG,CACxB,CAAC,EAEDC,EAAO,GAIJH,IAAY,SAAS,MAAQA,IAAY,QAAUA,IAAY,WAClEK,EAAS,IAAM,CACdL,EAAQ,oBAAoBD,EAAYI,CAAO,CAChD,CAAC,CAEH;;;;;;;;2DC/DA,OAsBQG,EAAGC,EAAA,iCAEPC,EAAIC,EAAAC,EAAA,OAAA,CAAA,EACJC,aAAKL,CAAG,EACRM,EAAOH,EAAAC,EAAA,UAAA,CAAA,EACPG,EAAMJ,EAAAC,EAAA,SAAA,CAAA,EACNI,EAAML,EAAAC,EAAA,SAAA,GAAA,IAAAK,EAAA,CAAA,CAAA,CAAA,WAGCC,EAAYC,EAAuB,OACnC,QAAAC,EAAAN,EAAO,EAACK,CAAK,IAAb,YAAAC,EAAgB,KAAE,GAAOP,EAAE,KAAIM,CAAK,EAC7C,mFAROX,EAAG,wOAeHO,EAAM,CAAA,CAAA,kBAFNA,EAAM,GAAAM,EAAAC,CAAA,iBAMFC,OAAAA,EAAAC,EAAA,GAAAV,GAAWW,EAAGN,IAASD,EAAYC,CAAK,KAA7BM,EAAGN,IAAA,qGAgBXO,EAAAC,EAAAC,EAAAH,CAAG,EAAC,KAAK,GADD,CAAA,IAAAP,IAAYC,CAAK,CAAA,CAAA,mBAD1BS,EAAAH,CAAG,EAAC,OAAKJ,EAAAQ,CAAA,qGANFC,EAAA,SAAAF,EAAAH,CAAG,EAAC,SAEAM,EAAAD,EAAA,eAAAF,EAAAH,CAAG,EAAC,SAAS,EAEpBO,KAAAA,EAAAJ,EAAAH,CAAG,EAAC,SAAJK,EAAA,OAAAA,EAAA,QAAAF,EAAAH,CAAG,EAAC,QAAK,MAPE,KAAA,CAAA,aAAAG,EAAAH,CAAG,EAAC,SAAS,GAC3B,IAAAP,IAAYC,CAAK,CAAA,IAGDc,GAAA,gBAAA,SAAAH,EAAAI,GAAAN,EAAAH,CAAG,EAAC,cAAaS,EAAA,IAAAN,EAAjBH,CAAG,EAAC,aAAa,gBAG9BG,EAAAH,CAAG,EAAC,MADCT,EAAM,GAANA,2DArBxB,kJA5BYmB","x_google_ignoreList":[0]}
+{"version":3,"file":"CheckboxGroup.js","sources":["../../../src/components/checkboxgroup/CheckboxGroup.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-checkbox-group',\n    props: {\n      options: { reflect: true, type: 'Array', attribute: 'options' },\n    },\n    extend: customElementForwardEvents,\n  }}\n/>\n\n<script lang=\"ts\">\n  import { customElementForwardEvents } from '../../utils';\n  /**\n   * 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).\n   */\n  interface Props {\n    /**\n     * The name attribute for the checkbox element, typically used for form submission.\n     */\n    name: string;\n    /**\n     * The current value of the checkbox group.\n     */\n    value?: Array<string>;\n    /**\n     * list of properties of each checkbox button of the checkbox group\n     */\n    options: Array<{\n      id: string;\n      label: string;\n      value: string;\n      disabled?: boolean;\n      indeterminate?: boolean;\n      indented?: boolean;\n    }>;\n    /**\n     * If `true`, applies an invalid state to the checkbox 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 { name, options, value = $bindable([]), inline, isinvalid }: Props = $props();\n</script>\n\n<div class={['mc-field__content', inline && 'mc-field__content--inline']}>\n  {#each options as option (option.id)}\n    <div class=\"mc-checkbox mc-field__item\">\n      <input\n        type=\"checkbox\"\n        class={['mc-checkbox__input', isinvalid && 'is-invalid']}\n        id={option.id}\n        {name}\n        disabled={option.disabled}\n        indeterminate={option.indeterminate}\n        aria-invalid={isinvalid}\n        bind:group={value}\n        value={option.value}\n      />\n      {#if option.label}\n        <label for={option.id} class=\"mc-checkbox__label\">{option.label}</label>\n      {/if}\n    </div>\n  {/each}\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/checkbox';\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":["name","$.prop","$$props","options","value","$.proxy","inline","isinvalid","$.each","div","option","$.set_attribute","label","$.get","$.set_text","text","$$render","consequent","input","input_value","customElementForwardEvents"],"mappings":";;;;;;;;wMAAA,+BA6CQA,EAAIC,EAAAC,EAAA,OAAA,CAAA,EAAEC,EAAOF,EAAAC,EAAA,UAAA,CAAA,EAAEE,EAAKH,EAAAC,EAAA,QAAA,GAAA,IAAAG,EAAA,CAAA,CAAA,CAAA,EAAkBC,EAAML,EAAAC,EAAA,SAAA,CAAA,EAAEK,EAASN,EAAAC,EAAA,YAAA,CAAA,0QAItDM,OAAAA,EAAAC,EAAA,GAAAN,EAAWO,GAAQA,EAAO,MAAfA,IAAM,iFAcNC,EAAAC,EAAA,MAAAC,EAAAH,CAAM,EAAC,EAAE,EAA8BI,EAAAC,EAAAF,EAAAH,CAAM,EAAC,KAAK,oBAD5DG,EAAAH,CAAM,EAAC,OAAKM,EAAAC,CAAA,yBATP,qBAAsBV,KAAa,YAAY,CAAA,EAAA,gBAAA,EACnDI,EAAAO,EAAA,KAAAL,EAAAH,CAAM,EAAC,EAAE,kBAEHQ,EAAA,SAAAL,EAAAH,CAAM,EAAC,SACFQ,EAAA,cAAAL,EAAAH,CAAM,EAAC,iCACRH,GAAS,EAEhBY,KAAAA,EAAAN,EAAAH,CAAM,EAAC,SAAPQ,EAAA,OAAAA,EAAA,QAAAL,EAAAH,CAAM,EAAC,QAAK,oBAAZG,EAAAH,CAAM,EAAC,MADFN,EAAK,GAALA,gCAXP,oBAAqBE,EAAM,GAAI,2BAA2B,CAAA,EAAA,gBAAA,CAAA,aAFvE,uJAxCYc"}

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

@@ -0,0 +1,111 @@
+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"}