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

package/dist/components/callout/Callout.js

@@ -1,10 +1,7 @@
-import{c as z,p as D,a as j,b as u,f as C,d as t,s as c,t as E,h as S,i as q,j as f,r as a,e as A,u as B,g}from"../../custom-element.js";import{s as v}from"../../slot.js";var F=C('<section role="status"><div class="mc-callout__icon svelte-6ha6wi"><!></div> <div class="mc-callout__content svelte-6ha6wi"><h2 class="mc-callout__title svelte-6ha6wi"> </h2> <p class="mc-callout__message svelte-6ha6wi"> </p> <!> <div class="mc-callout__footer svelte-6ha6wi"><!></div></div></section>');const G={hash:"svelte-6ha6wi",code:`/**
- * Do not edit directly, this file was auto-generated.
- */
-/**
+import{c as j,p as C,a as D,b as m,f as E,d as t,s as r,t as S,i as q,j as A,k as u,r as l,e as B,g as F,h}from"../../custom-element.js";import{s as d}from"../../slot.js";var G=E('<section role="status"><div class="mc-callout__icon svelte-1pnlv3f"><!></div> <div class="mc-callout__content svelte-1pnlv3f"><h2 class="mc-callout__title svelte-1pnlv3f"> </h2> <p class="mc-callout__message svelte-1pnlv3f"> </p> <!> <div class="mc-callout__footer svelte-1pnlv3f"><!></div></div></section>');const H={hash:"svelte-1pnlv3f",code:`/**
  * Do not edit directly, this file was auto-generated.
  */
 /* create columns */
 /* create columns */
-/* create custom named columns with custom content */.mc-callout.svelte-6ha6wi {border-radius:0.5rem;display:flex;flex-flow:row wrap;align-items:flex-start;background:#eff1f6;position:relative;box-sizing:border-box;color:#000000;}.mc-callout__icon.svelte-6ha6wi {width:2rem;height:2rem;margin:0.75rem;color:currentcolor;}.mc-callout__content.svelte-6ha6wi {flex:1 1 0;padding:0.75rem 1rem 0.75rem 0;}.mc-callout__title.svelte-6ha6wi, .mc-callout__message.svelte-6ha6wi {line-height:1.3;margin-block:0;}.mc-callout__title.svelte-6ha6wi {font-weight:600;font-size:1rem;margin-block-end:0.25rem;}.mc-callout__message.svelte-6ha6wi {font-size:0.875rem;}.mc-callout__footer.svelte-6ha6wi {align-items:flex-start;display:flex;flex-flow:row wrap;gap:0.5rem;margin-top:0.75rem;margin-bottom:0.5rem;}.mc-callout--standard.svelte-6ha6wi {background:#eff1f6;}.mc-callout--accent.svelte-6ha6wi {background:#ebf5de;}.mc-callout--tips.svelte-6ha6wi {background:#ffebaf;}.mc-callout--inverse.svelte-6ha6wi {background:#ffffff;}.mc-callout__footer.svelte-6ha6wi:empty {display:none;}`};function H(h,e){D(e,!0),j(h,G);let o=u(e,"title",7),i=u(e,"description",7),r=u(e,"appearance",7,"standard");var s=F(),n=t(s),b=t(n);v(b,e,"icon",{}),a(n);var _=c(n,2),m=t(_),x=t(m,!0);a(m);var d=c(m,2),y=t(d,!0);a(d);var w=c(d,2);v(w,e,"default",{});var p=c(w,2),k=t(p);return v(k,e,"footer",{}),a(p),a(_),a(s),E(()=>{A(s,1,B(["mc-callout",`mc-callout--${r()}`]),"svelte-6ha6wi"),g(x,o()),g(y,i())}),S(h,s),q({get title(){return o()},set title(l){o(l),f()},get description(){return i()},set description(l){i(l),f()},get appearance(){return r()},set appearance(l="standard"){r(l),f()}})}customElements.define("m-callout",z(H,{title:{},description:{},appearance:{}},["icon","default","footer"],[],!0));
+/* create custom named columns with custom content */.mc-callout.svelte-1pnlv3f {border-radius:var(--radius-m, 0.5rem);display:flex;flex-flow:row wrap;align-items:flex-start;background:var(--callout-color-background-standard, #eff1f6);position:relative;box-sizing:border-box;color:var(--callout-color-text, #000000);}.mc-callout__icon.svelte-1pnlv3f {width:2rem;height:2rem;margin:0.75rem;color:currentcolor;}.mc-callout__content.svelte-1pnlv3f {flex:1 1 0;padding:0.75rem 1rem 0.75rem 0;}.mc-callout__title.svelte-1pnlv3f, .mc-callout__message.svelte-1pnlv3f {line-height:var(--line-height-s, 1.3);margin-block:0;}.mc-callout__title.svelte-1pnlv3f {font-weight:var(--font-weight-semi-bold, 600);font-size:var(--font-size-150, 1rem);margin-block-end:0.25rem;}.mc-callout__message.svelte-1pnlv3f {font-size:var(--font-size-100, 0.875rem);}.mc-callout__footer.svelte-1pnlv3f {align-items:flex-start;display:flex;flex-flow:row wrap;gap:0.5rem;margin-top:0.75rem;margin-bottom:0.5rem;}.mc-callout--standard.svelte-1pnlv3f {background:var(--callout-color-background-standard, #eff1f6);}.mc-callout--accent.svelte-1pnlv3f {background:var(--callout-color-background-accent, #ebf5de);}.mc-callout--tips.svelte-1pnlv3f {background:var(--callout-color-background-tips, #ffebaf);}.mc-callout--inverse.svelte-1pnlv3f {background:var(--callout-color-background-inverse, #ffffff);}.mc-callout__footer.svelte-1pnlv3f:empty {display:none;}`};function I(p,e){C(e,!0),D(p,H);let c=m(e,"title",7),s=m(e,"description",7),n=m(e,"appearance",7,"standard");var x={get title(){return c()},set title(a){c(a),u()},get description(){return s()},set description(a){s(a),u()},get appearance(){return n()},set appearance(a="standard"){n(a),u()}},o=G(),i=t(o),k=t(i);d(k,e,"icon",{}),l(i);var _=r(i,2),v=t(_),w=t(v,!0);l(v);var f=r(v,2),y=t(f,!0);l(f);var g=r(f,2);d(g,e,"default",{});var b=r(g,2),z=t(b);return d(z,e,"footer",{}),l(b),l(_),l(o),S(()=>{B(o,1,F(["mc-callout",`mc-callout--${n()}`]),"svelte-1pnlv3f"),h(w,c()),h(y,s())}),q(p,o),A(x)}customElements.define("m-callout",j(I,{title:{},description:{},appearance:{}},["icon","default","footer"],[],!0));
 //# sourceMappingURL=Callout.js.map

package/dist/components/callout/Callout.js.map

@@ -1 +1 @@
-{"version":3,"file":"Callout.js","sources":["../../../src/components/callout/Callout.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-callout' }} />\n\n<script lang=\"ts\">\n  /**\n   * A callout is used to highlight additional information that can assist users with tips, extra details, or helpful guidance, without signaling a critical status or alert. Unlike notifications, callouts are not triggered by user actions and do not correspond to specific system states. They are designed to enhance the user experience by providing contextually relevant information that supports comprehension and usability.\n   */\n  interface Props {\n    /**\n     * Title of the callout.\n     */\n    title: string;\n    /**\n     * Description of the callout.\n     */\n    description: string;\n    /**\n     * Allows to define the callout appearance.\n     */\n    appearance?: 'standard' | 'accent' | 'tips' | 'inverse';\n  }\n\n  let {\n    title,\n    description,\n    appearance = 'standard',\n  }: Props = $props();\n</script>\n\n<section class={[\"mc-callout\", `mc-callout--${appearance}`]} role=\"status\">\n  <div class=\"mc-callout__icon\">\n    <slot name=\"icon\"/>\n  </div>\n  <div class=\"mc-callout__content\">\n    <h2 class=\"mc-callout__title\">{ title }</h2>\n\n    <p class=\"mc-callout__message\">\n      { description }\n    </p>\n\n    <slot/>\n\n    <div class=\"mc-callout__footer\">\n      <slot name=\"footer\"/>\n    </div>\n  </div>\n</section>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/callout';\n\n  .mc-callout__footer:empty {\n    display: none;\n  }\n</style>\n"],"names":["title","$.prop","$$props","description","appearance","$.set_class","section","$.clsx"],"mappings":";;;;;;;;6jCAAA,oBAsBIA,EAAKC,EAAAC,EAAA,QAAA,CAAA,EACLC,EAAWF,EAAAC,EAAA,cAAA,CAAA,EACXE,qBAAa,UAAU,oNAIVC,EAAAC,EAAA,EAAAC,EAAA,CAAA,4BAA6BH,EAAU,CAAA,EAAA,CAAA,EAAA,eAAA,MAKpBJ,GAAK,MAGjCG,GAAW,sKAZF,WAAU,YAE3B"}
+{"version":3,"file":"Callout.js","sources":["../../../src/components/callout/Callout.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-callout' }} />\n\n<script lang=\"ts\">\n  /**\n   * A callout is used to highlight additional information that can assist users with tips, extra details, or helpful guidance, without signaling a critical status or alert. Unlike notifications, callouts are not triggered by user actions and do not correspond to specific system states. They are designed to enhance the user experience by providing contextually relevant information that supports comprehension and usability.\n   *\n   * @slot icon - Use this slot to insert an icon.\n   * @slot default - Use this slot to insert custom content.\n   * @slot footer - Use this slot to insert a button or a link in the footer of the callout.\n   */\n  interface Props {\n    /**\n     * Title of the callout.\n     */\n    title: string;\n    /**\n     * Description of the callout.\n     */\n    description: string;\n    /**\n     * Allows to define the callout appearance.\n     */\n    appearance?: 'standard' | 'accent' | 'tips' | 'inverse';\n  }\n\n  let {\n    title,\n    description,\n    appearance = 'standard',\n  }: Props = $props();\n</script>\n\n<section class={[\"mc-callout\", `mc-callout--${appearance}`]} role=\"status\">\n  <div class=\"mc-callout__icon\">\n    <slot name=\"icon\"/>\n  </div>\n  <div class=\"mc-callout__content\">\n    <h2 class=\"mc-callout__title\">{ title }</h2>\n\n    <p class=\"mc-callout__message\">\n      { description }\n    </p>\n\n    <slot/>\n\n    <div class=\"mc-callout__footer\">\n      <slot name=\"footer\"/>\n    </div>\n  </div>\n</section>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/callout';\n\n  .mc-callout__footer:empty {\n    display: none;\n  }\n</style>\n"],"names":["title","$.prop","$$props","description","appearance","$.set_class","section","$.clsx"],"mappings":";;;;;i6CAAA,oBA0BIA,EAAKC,EAAAC,EAAA,QAAA,CAAA,EACLC,EAAWF,EAAAC,EAAA,cAAA,CAAA,EACXE,qBAAa,UAAU,iKAAV,WAAU,0NAIVC,EAAAC,EAAA,EAAAC,EAAA,CAAA,4BAA6BH,EAAU,CAAA,EAAA,CAAA,EAAA,gBAAA,MAKpBJ,GAAK,MAGjCG,GAAW,eAVnB"}

package/dist/components/callout/Callout.spec.js

@@ -0,0 +1,33 @@
+import { describe, it, expect } from 'vitest';
+import { render } from '@testing-library/svelte';
+import Callout from './Callout.svelte';
+describe('m-callout component', () => {
+    const defaultProps = {
+        title: 'Helpful Tip',
+        description: 'This is a description for the callout.',
+    };
+    it('renders with default appearance "standard"', () => {
+        const { container, getByText } = render(Callout, { props: defaultProps });
+        const section = container.querySelector('section.mc-callout');
+        expect(section).toBeTruthy();
+        expect(section?.classList.contains('mc-callout--standard')).toBe(true);
+        expect(section).toHaveAttribute('role', 'status');
+        expect(getByText(defaultProps.title)).toBeTruthy();
+        expect(getByText(defaultProps.description)).toBeTruthy();
+        const footer = container.querySelector('.mc-callout__footer');
+        expect(footer).toBeTruthy();
+        expect(footer).toBeEmptyDOMElement();
+        expect(getComputedStyle(footer).display).toBe('none');
+    });
+    it('applies correct appearance class', () => {
+        const appearances = ['standard', 'accent', 'tips', 'inverse'];
+        appearances.forEach((appearance) => {
+            const { container, unmount } = render(Callout, {
+                props: { ...defaultProps, appearance },
+            });
+            const section = container.querySelector('section.mc-callout');
+            expect(section?.classList.contains(`mc-callout--${appearance}`)).toBe(true);
+            unmount();
+        });
+    });
+});

package/dist/components/callout/Callout.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Callout.stories.d.ts","sourceRoot":"","sources":["../../../src/components/callout/Callout.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAIrE,OAAO,kEAAkE,CAAC;AAC1E,OAAO,oEAAoE,CAAC;AAE5E,QAAA,MAAM,IAAI,EAAE,IAiFX,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,QAAQ,EAAE,KAAU,CAAC;AAElC,eAAO,MAAM,MAAM,EAAE,KAEpB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KAElB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAIxB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAOzB,CAAC;AAEF,eAAO,MAAM,QAAQ;;;;CAUpB,CAAC"}
+{"version":3,"file":"Callout.stories.d.ts","sourceRoot":"","sources":["../../../src/components/callout/Callout.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAIrE,OAAO,kEAAkE,CAAC;AAC1E,OAAO,oEAAoE,CAAC;AAE5E,QAAA,MAAM,IAAI,EAAE,IA0BX,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,QAAQ,EAAE,KAAU,CAAC;AAElC,eAAO,MAAM,MAAM,EAAE,KAEpB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KAElB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAIxB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAOzB,CAAC;AAEF,eAAO,MAAM,QAAQ;;;;CAUpB,CAAC"}

package/dist/components/callout/Callout.stories.js

@@ -6,64 +6,11 @@ import '@mozaic-ds/icons-svelte/custom-elements/ArrowNext20/ArrowNext20.js';
 const meta = {
     title: 'Content/Callout',
     component: 'm-callout',
-    parameters: {
-        docs: {
-            description: {
-                component: 'A callout is used to highlight additional information that can assist users with tips, extra details, or helpful guidance, without signaling a critical status or alert. Unlike notifications, callouts are not triggered by user actions and do not correspond to specific system states. They are designed to enhance the user experience by providing contextually relevant information that supports comprehension and usability.',
-            },
-        },
-    },
+    tags: ['v2'],
     argTypes: {
-        title: {
-            control: 'text',
-            description: 'Title of the callout.',
-            type: { name: 'string', required: true },
-            table: {
-                category: 'attributes',
-            },
-        },
-        description: {
-            control: 'text',
-            description: 'Description of the callout.',
-            type: { name: 'string', required: true },
-            table: {
-                category: 'attributes',
-            },
-        },
         appearance: {
-            control: { type: 'radio' },
+            control: 'radio',
             options: ['standard', 'accent', 'tips', 'inverse'],
-            description: 'Allows to define the callout appearance.',
-            defaultValue: 'standard',
-            table: {
-                type: { summary: "'standard' | 'accent' | 'tips' | 'inverse'" },
-                defaultValue: { summary: 'standard' },
-                category: 'attributes',
-            },
-        },
-        icon: {
-            description: 'Use this slot to insert an icon.',
-            control: { type: 'text' },
-            table: {
-                type: { summary: 'any' },
-                category: 'slots',
-            },
-        },
-        default: {
-            description: 'Use this slot to display custom content in the callout.',
-            control: { type: 'text' },
-            table: {
-                type: { summary: 'any' },
-                category: 'slots',
-            },
-        },
-        footer: {
-            description: 'Use this slot to insert a button or a link in the footer of the callout.',
-            control: { type: 'text' },
-            table: {
-                type: { summary: 'any' },
-                category: 'slots',
-            },
         },
     },
     args: {

package/dist/components/callout/Callout.svelte

@@ -3,6 +3,10 @@
 <script lang="ts">
   /**
    * A callout is used to highlight additional information that can assist users with tips, extra details, or helpful guidance, without signaling a critical status or alert. Unlike notifications, callouts are not triggered by user actions and do not correspond to specific system states. They are designed to enhance the user experience by providing contextually relevant information that supports comprehension and usability.
+   *
+   * @slot icon - Use this slot to insert an icon.
+   * @slot default - Use this slot to insert custom content.
+   * @slot footer - Use this slot to insert a button or a link in the footer of the callout.
    */
   interface Props {
     /**
@@ -48,21 +52,18 @@
 <style>/**
  * Do not edit directly, this file was auto-generated.
  */
-/**
- * Do not edit directly, this file was auto-generated.
- */
 /* create columns */
 /* create columns */
 /* create custom named columns with custom content */
 .mc-callout {
-  border-radius: 0.5rem;
+  border-radius: var(--radius-m, 0.5rem);
   display: flex;
   flex-flow: row wrap;
   align-items: flex-start;
-  background: #eff1f6;
+  background: var(--callout-color-background-standard, #eff1f6);
   position: relative;
   box-sizing: border-box;
-  color: #000000;
+  color: var(--callout-color-text, #000000);
 }
 .mc-callout__icon {
   width: 2rem;
@@ -75,16 +76,16 @@
   padding: 0.75rem 1rem 0.75rem 0;
 }
 .mc-callout__title, .mc-callout__message {
-  line-height: 1.3;
+  line-height: var(--line-height-s, 1.3);
   margin-block: 0;
 }
 .mc-callout__title {
-  font-weight: 600;
-  font-size: 1rem;
+  font-weight: var(--font-weight-semi-bold, 600);
+  font-size: var(--font-size-150, 1rem);
   margin-block-end: 0.25rem;
 }
 .mc-callout__message {
-  font-size: 0.875rem;
+  font-size: var(--font-size-100, 0.875rem);
 }
 .mc-callout__footer {
   align-items: flex-start;
@@ -95,16 +96,16 @@
   margin-bottom: 0.5rem;
 }
 .mc-callout--standard {
-  background: #eff1f6;
+  background: var(--callout-color-background-standard, #eff1f6);
 }
 .mc-callout--accent {
-  background: #ebf5de;
+  background: var(--callout-color-background-accent, #ebf5de);
 }
 .mc-callout--tips {
-  background: #ffebaf;
+  background: var(--callout-color-background-tips, #ffebaf);
 }
 .mc-callout--inverse {
-  background: #ffffff;
+  background: var(--callout-color-background-inverse, #ffffff);
 }
 
 .mc-callout__footer:empty {

package/dist/components/callout/Callout.svelte.d.ts

@@ -1,5 +1,9 @@
 /**
  * A callout is used to highlight additional information that can assist users with tips, extra details, or helpful guidance, without signaling a critical status or alert. Unlike notifications, callouts are not triggered by user actions and do not correspond to specific system states. They are designed to enhance the user experience by providing contextually relevant information that supports comprehension and usability.
+ *
+ * @slot icon - Use this slot to insert an icon.
+ * @slot default - Use this slot to insert custom content.
+ * @slot footer - Use this slot to insert a button or a link in the footer of the callout.
  */
 interface Props {
     /**

package/dist/components/callout/Callout.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Callout.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/callout/Callout.svelte.ts"],"names":[],"mappings":"AAGE;;GAEG;AACH,UAAU,KAAK;IACb;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,UAAU,CAAC,EAAE,UAAU,GAAG,QAAQ,GAAG,MAAM,GAAG,SAAS,CAAC;CACzD;AAoCH,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AACD,KAAK,gCAAgC,CAAC,KAAK,EAAE,KAAK,IAAI,KAAK,GACvD,CAAC,KAAK,SAAS;IAAE,OAAO,EAAE,GAAG,CAAA;CAAE,GACzB,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,GACnC,GAAG,GACH;IAAE,QAAQ,CAAC,EAAE,GAAG,CAAA;CAAE,GAClB,EAAE,CAAC,CAAC;AAId,QAAA,MAAM,OAAO;;;;;;;;;;UAAqF,CAAC;AACjF,KAAK,OAAO,GAAG,YAAY,CAAC,OAAO,OAAO,CAAC,CAAC;AAC9C,eAAe,OAAO,CAAC"}
+{"version":3,"file":"Callout.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/callout/Callout.svelte.ts"],"names":[],"mappings":"AAGE;;;;;;GAMG;AACH,UAAU,KAAK;IACb;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,UAAU,CAAC,EAAE,UAAU,GAAG,QAAQ,GAAG,MAAM,GAAG,SAAS,CAAC;CACzD;AAoCH,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AACD,KAAK,gCAAgC,CAAC,KAAK,EAAE,KAAK,IAAI,KAAK,GACvD,CAAC,KAAK,SAAS;IAAE,OAAO,EAAE,GAAG,CAAA;CAAE,GACzB,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,GACnC,GAAG,GACH;IAAE,QAAQ,CAAC,EAAE,GAAG,CAAA;CAAE,GAClB,EAAE,CAAC,CAAC;AAId,QAAA,MAAM,OAAO;;;;;;;;;;UAAqF,CAAC;AACjF,KAAK,OAAO,GAAG,YAAY,CAAC,OAAO,OAAO,CAAC,CAAC;AAC9C,eAAe,OAAO,CAAC"}

package/dist/components/callout/README.md

@@ -0,0 +1,20 @@
+# `m-callout`
+
+A callout is used to highlight additional information that can assist users with tips, extra details, or helpful guidance, without signaling a critical status or alert. Unlike notifications, callouts are not triggered by user actions and do not correspond to specific system states. They are designed to enhance the user experience by providing contextually relevant information that supports comprehension and usability.
+
+## Props
+
+| Name | Description | Type | Default |
+|------|-------------|------|---------|
+| `title*` | Title of the callout. | `string` |   |
+| `description*` | Description of the callout. | `string` |   |
+| `appearance` | Allows to define the callout appearance. | `'standard'` `'accent'` `'tips'` `'inverse'` | `standard` |
+
+## Slots
+
+| Name | Description |
+|------|-------------|
+| `icon` | Use this slot to insert an icon. |
+| `default` | Use this slot to insert custom content. |
+| `footer` | Use this slot to insert a button or a link in the footer of the callout. |
+

package/dist/components/checkbox/Checkbox.js

@@ -1,13 +1,10 @@
-import{n as M,c as D,k as H,p as j,a as F,b as n,f as C,d as x,s as S,t as p,e as A,o as G,h as w,i as I,j as r,r as E,g as J}from"../../custom-element.js";import{i as K}from"../../if.js";import{s as o,r as L}from"../../attributes.js";import{a as N}from"../../input.js";import{c as O}from"../../custom-element-forward-events.js";var P=C('<label class="mc-checkbox__label svelte-qeqqg6"> </label>'),Q=C('<div class="mc-checkbox svelte-qeqqg6"><input type="checkbox"/> <!></div>');const R={hash:"svelte-qeqqg6",code:`/**
+import{c as M,p as H,a as j,b as n,f as z,s as D,d as u,t as g,i as _,j as F,k as i,r as x,h as S,e as p,g as w}from"../../custom-element.js";import{i as q}from"../../if.js";import{r as A,s}from"../../attributes.js";import{a as G}from"../../input.js";import{c as I}from"../../custom-element-forward-events.js";var J=z('<label class="mc-checkbox__label svelte-zknfk3"> </label>'),K=z('<div><input type="checkbox"/> <!></div>');const L={hash:"svelte-zknfk3",code:`/**
  * 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.svelte-qeqqg6 {align-items:center;display:flex;gap:0.5rem;padding:0.375rem;}.mc-checkbox__label.svelte-qeqqg6 {font-size:1rem;line-height:1.3;color:#000000;cursor:pointer;}.mc-checkbox__input.svelte-qeqqg6 {appearance:none;margin:0;cursor:pointer;flex-shrink:0;transition:box-shadow 200ms ease;background-color:#ffffff;border:0.125rem solid #666666;border-radius:0.25rem;transition:all ease 200ms;height:1.25rem;width:1.25rem;}.mc-checkbox__input.svelte-qeqqg6:hover {border-color:#4d4d4d;}.mc-checkbox__input.svelte-qeqqg6: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-checkbox__input.svelte-qeqqg6: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");}.mc-checkbox__input.svelte-qeqqg6: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");}.mc-checkbox__input.svelte-qeqqg6:checked, .mc-checkbox__input.svelte-qeqqg6:indeterminate {background-color:#117f03;background-size:1rem 1rem;background-position:center;}.mc-checkbox__input.svelte-qeqqg6:checked, .mc-checkbox__input.svelte-qeqqg6:indeterminate, .mc-checkbox__input.svelte-qeqqg6:disabled {border-color:transparent;}.mc-checkbox__input.svelte-qeqqg6:disabled {background-color:#d9d9d9;cursor:not-allowed;}.mc-checkbox__input.svelte-qeqqg6: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");}.mc-checkbox__input.svelte-qeqqg6: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");}.mc-checkbox__input.svelte-qeqqg6:disabled + .mc-checkbox__label:where(.svelte-qeqqg6) {color:#737373;cursor:not-allowed;}.mc-checkbox__input.svelte-qeqqg6:not(:disabled):checked:hover, .mc-checkbox__input.svelte-qeqqg6:not(:disabled):indeterminate:hover {background-color:#006902;}.mc-checkbox__input.is-invalid.svelte-qeqqg6:not(:checked, :indeterminate) {border-color:#ea302d;}.mc-checkbox__input.is-invalid.svelte-qeqqg6:not(:checked, :indeterminate):hover {border-color:#c61112;}
+/* stylelint-disable string-no-newline */.mc-checkbox.svelte-zknfk3 {align-items:center;display:flex;gap:0.5rem;padding:0.375rem;}.mc-checkbox--indented.svelte-zknfk3 {margin-left:1.75rem;}.mc-checkbox__label.svelte-zknfk3 {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-zknfk3 {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-zknfk3:hover {border-color:var(--forms-color-border-hover, #4d4d4d);}.mc-checkbox__input.svelte-zknfk3: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-zknfk3: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-zknfk3: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-zknfk3:checked, .mc-checkbox__input.svelte-zknfk3:indeterminate {background-color:var(--forms-color-background-checked, #117f03);background-size:1rem 1rem;background-position:center;}.mc-checkbox__input.svelte-zknfk3:checked, .mc-checkbox__input.svelte-zknfk3:indeterminate, .mc-checkbox__input.svelte-zknfk3:disabled {border-color:transparent;}.mc-checkbox__input.svelte-zknfk3:disabled {background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed;}.mc-checkbox__input.svelte-zknfk3: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-zknfk3: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-zknfk3:disabled + .mc-checkbox__label:where(.svelte-zknfk3) {color:var(--forms-color-text-disabled, #737373);cursor:not-allowed;}.mc-checkbox__input.svelte-zknfk3:not(:disabled):checked:hover, .mc-checkbox__input.svelte-zknfk3:not(:disabled):indeterminate:hover {background-color:var(--forms-color-background-checked-hover, #006902);}.mc-checkbox__input.is-invalid.svelte-zknfk3:not(:checked, :indeterminate) {border-color:var(--forms-color-border-invalid, #ea302d);}.mc-checkbox__input.is-invalid.svelte-zknfk3:not(:checked, :indeterminate):hover {border-color:var(--forms-color-border-invalid-hover, #c61112);}
 
 /* stylelint-enable string-no-newline */
 /* stylelint-disable string-no-newline */
 
-/* stylelint-enable string-no-newline */`};function T(f,i){const _=H();j(i,!0),F(f,R);let d=n(i,"name",7,"checkbox"),l=n(i,"id",7,_),s=n(i,"label",7),m=n(i,"indeterminate",7,!1),g=n(i,"disabled",7,!1),c=n(i,"isinvalid",7,!1),h=n(i,"required",7,!1),u=n(i,"checked",15,!1),b=n(i,"onchange",7),q=n(i,"onblur",7);var v=Q(),t=x(v);L(t);let k;t.__change=function(...e){var a;(a=b())==null||a.apply(this,e)};var y=S(t,2);{var z=e=>{var a=P(),B=x(a,!0);E(a),p(()=>{o(a,"for",l()),J(B,s())}),w(e,a)};K(y,e=>{s()&&e(z)})}return E(v),p(e=>{o(t,"id",l()),k=A(t,1,"mc-checkbox__input svelte-qeqqg6",null,k,e),o(t,"aria-invalid",c()),o(t,"name",d()),t.disabled=g(),t.indeterminate=m(),t.required=h()},[()=>({"is-invalid":c()})]),G("blur",t,function(...e){var a;(a=q())==null||a.apply(this,e)}),N(t,u),w(f,v),I({get name(){return d()},set name(e="checkbox"){d(e),r()},get id(){return l()},set id(e=_){l(e),r()},get label(){return s()},set label(e){s(e),r()},get indeterminate(){return m()},set indeterminate(e=!1){m(e),r()},get disabled(){return g()},set disabled(e=!1){g(e),r()},get isinvalid(){return c()},set isinvalid(e=!1){c(e),r()},get required(){return h()},set required(e=!1){h(e),r()},get checked(){return u()},set checked(e=!1){u(e),r()},get onchange(){return b()},set onchange(e){b(e),r()},get onblur(){return q()},set onblur(e){q(e),r()}})}M(["change"]);customElements.define("m-checkbox",D(T,{name:{},id:{},label:{},indeterminate:{},disabled:{},isinvalid:{},required:{},checked:{},onchange:{},onblur:{}},[],[],!0,O));
+/* stylelint-enable string-no-newline */`};function N(h,r){H(r,!0),j(h,L);let a=n(r,"id",7),m=n(r,"name",7),o=n(r,"label",7),k=n(r,"checked",15,!1),f=n(r,"indeterminate",7),v=n(r,"disabled",7),c=n(r,"isinvalid",7),b=n(r,"indented",7);var E={get id(){return a()},set id(e){a(e),i()},get name(){return m()},set name(e){m(e),i()},get label(){return o()},set label(e){o(e),i()},get checked(){return k()},set checked(e=!1){k(e),i()},get indeterminate(){return f()},set indeterminate(e){f(e),i()},get disabled(){return v()},set disabled(e){v(e),i()},get isinvalid(){return c()},set isinvalid(e){c(e),i()},get indented(){return b()},set indented(e){b(e),i()}},l=K(),t=u(l);A(t);var C=D(t,2);{var y=e=>{var d=J(),B=u(d,!0);x(d),g(()=>{s(d,"for",a()),S(B,o())}),_(e,d)};q(C,e=>{o()&&e(y)})}return x(l),g(()=>{p(l,1,w(["mc-checkbox",b()&&"mc-checkbox--indented"]),"svelte-zknfk3"),s(t,"id",a()),p(t,1,w(["mc-checkbox__input",c()&&"is-invalid"]),"svelte-zknfk3"),s(t,"aria-invalid",c()),s(t,"name",m()),t.disabled=v(),t.indeterminate=f()}),G(t,k),_(h,l),F(E)}customElements.define("m-checkbox",M(N,{checked:{attribute:"checked",reflect:!0,type:"Boolean"},id:{},name:{},label:{},indeterminate:{},disabled:{},isinvalid:{},indented:{}},[],[],!0,I));
 //# sourceMappingURL=Checkbox.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sources":["../../../src/components/checkbox/Checkbox.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-checkbox',\n    extend: customElementForwardEvents,\n  }}\n/>\n\n<script lang=\"ts\">\n  import { customElementForwardEvents } from '../../utils';\n\n  interface Props {\n    name: string;\n    label?: string;\n    id?: string;\n    checked?: boolean;\n    indeterminate?: boolean;\n    disabled?: boolean;\n    isinvalid?: boolean;\n    required?: boolean;\n    onchange?: (event: Event) => void;\n    onblur?: (event: FocusEvent) => void;\n  }\n\n  const uid = $props.id();\n  let {\n    name = 'checkbox',\n    id = uid,\n    label,\n    indeterminate = false,\n    disabled = false,\n    isinvalid = false,\n    required = false,\n    checked = $bindable(false),\n    onchange,\n    onblur,\n  }: Props = $props();\n</script>\n\n<div class=\"mc-checkbox\">\n  <input\n    {id}\n    type=\"checkbox\"\n    class=\"mc-checkbox__input\"\n    class:is-invalid={isinvalid}\n    aria-invalid={isinvalid}\n    {name}\n    {disabled}\n    {indeterminate}\n    {required}\n    bind:checked\n    {onchange}\n    {onblur}\n  />\n  {#if label}\n    <label for={id} class=\"mc-checkbox__label\">{label}</label>\n  {/if}\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":["uid","$.props_id","name","id","label","$.prop","$$props","indeterminate","disabled","isinvalid","required","checked","onchange","onblur","$$render","consequent","customElementForwardEvents"],"mappings":";;;;;;;;;;;0DAAA,OAuBQA,EAAGC,EAAA,iBAEP,IAAAC,eAAO,UAAU,EACjBC,aAAKH,CAAG,EACRI,EAAKC,EAAAC,EAAA,QAAA,CAAA,EACLC,wBAAgB,EAAK,EACrBC,mBAAW,EAAK,EAChBC,oBAAY,EAAK,EACjBC,mBAAW,EAAK,EAChBC,mBAAoB,EAAK,EACzBC,EAAQP,EAAAC,EAAA,WAAA,CAAA,EACRO,EAAMR,EAAAC,EAAA,SAAA,CAAA,gKAoBMH,GAAE,MAA8BC,GAAK,oBAD9CA,EAAK,GAAAU,EAAAC,CAAA,4GATMN,GAAS,yFADLA,EAAS,GAAA,uHAlBpB,WAAU,yCACZT,EAAG,8GAEQ,GAAK,qDACV,GAAK,uDACJ,GAAK,qDACN,GAAK,mDACI,GAAK,kHAI7B,+KAjCYgB"}
+{"version":3,"file":"Checkbox.js","sources":["../../../src/components/checkbox/Checkbox.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-checkbox',\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 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.\n   */\n  interface Props {\n    /**\n     * A unique identifier for the checkbox, used to associate the label with the form element.\n     */\n    id: string;\n    /**\n     * The name attribute for the checkbox element, typically used for form submission.\n     */\n    name?: string;\n    /**\n     * The text label displayed next to the checkbox.\n     */\n    label?: string;\n    /**\n     * The checkbox's checked state.\n     */\n    checked?: boolean;\n    /**\n     * Sets the checkbox to an indeterminate state (partially selected).\n     */\n    indeterminate?: boolean;\n    /**\n     * If `true`, applies an invalid state to the checkbox.\n     */\n    isinvalid?: boolean;\n    /**\n     * If `true`, disables the checkbox, making it non-interactive.\n     */\n    disabled?: boolean;\n    /**\n     * If `true`, indent the checkbox.\n     */\n    indented?: boolean;\n  }\n\n  let {\n    id,\n    name,\n    label,\n    checked = $bindable(false),\n    indeterminate,\n    disabled,\n    isinvalid,\n    indented,\n  }: Props = $props();\n</script>\n\n<div class={['mc-checkbox', indented && 'mc-checkbox--indented']}>\n  <input\n    {id}\n    type=\"checkbox\"\n    class={['mc-checkbox__input', isinvalid && 'is-invalid']}\n    aria-invalid={isinvalid}\n    {name}\n    {disabled}\n    {indeterminate}\n    bind:checked\n  />\n  {#if label}\n    <label for={id} class=\"mc-checkbox__label\">{label}</label>\n  {/if}\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":["id","$.prop","$$props","name","label","checked","indeterminate","disabled","isinvalid","indented","$$render","consequent","customElementForwardEvents"],"mappings":";;;;;;;;0DAAA,oBAmDIA,EAAEC,EAAAC,EAAA,KAAA,CAAA,EACFC,EAAIF,EAAAC,EAAA,OAAA,CAAA,EACJE,EAAKH,EAAAC,EAAA,QAAA,CAAA,EACLG,mBAAoB,EAAK,EACzBC,EAAaL,EAAAC,EAAA,gBAAA,CAAA,EACbK,EAAQN,EAAAC,EAAA,WAAA,CAAA,EACRM,EAASP,EAAAC,EAAA,YAAA,CAAA,EACTO,EAAQR,EAAAC,EAAA,WAAA,CAAA,sLAJY,GAAK,gUAoBbF,GAAE,MAA8BI,GAAK,oBAD9CA,EAAK,GAAAM,EAAAC,CAAA,gCAXC,cAAeF,KAAY,uBAAuB,CAAA,EAAA,eAAA,yBAInD,qBAAsBD,KAAa,YAAY,CAAA,EAAA,eAAA,qBACzCA,GAAS,yEAP3B,wLAtDYI"}

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

@@ -0,0 +1,70 @@
+import { describe, it, expect } from 'vitest';
+import { render, fireEvent } from '@testing-library/svelte';
+import Checkbox from './Checkbox.svelte';
+describe('m-checkbox component', () => {
+    const id = 'test-checkbox';
+    const label = 'Accept Terms';
+    it('renders with label and unchecked by default', () => {
+        const { container, getByLabelText } = render(Checkbox, {
+            props: { id, label },
+        });
+        const checkbox = getByLabelText(label);
+        expect(checkbox).toBeTruthy();
+        expect(checkbox.type).toBe('checkbox');
+        expect(checkbox.checked).toBe(false);
+        const labelEl = container.querySelector('label.mc-checkbox__label');
+        expect(labelEl).toBeTruthy();
+        expect(labelEl?.getAttribute('for')).toBe(id);
+        expect(labelEl?.textContent).toBe(label);
+    });
+    it('renders checked when prop is true', () => {
+        const { getByLabelText } = render(Checkbox, {
+            props: { id, label, checked: true },
+        });
+        const checkbox = getByLabelText(label);
+        expect(checkbox.checked).toBe(true);
+    });
+    it('binds checked state and updates on user click', async () => {
+        const { getByLabelText } = render(Checkbox, {
+            props: { id, label, checked: false },
+        });
+        const checkbox = getByLabelText(label);
+        expect(checkbox.checked).toBe(false);
+        await fireEvent.click(checkbox);
+        expect(checkbox.checked).toBe(true);
+    });
+    it('applies "is-invalid" class and aria-invalid when isinvalid=true', () => {
+        const { container, getByLabelText } = render(Checkbox, {
+            props: { id, label, isinvalid: true },
+        });
+        const checkbox = getByLabelText(label);
+        expect(checkbox).toHaveClass('is-invalid');
+        expect(checkbox).toHaveAttribute('aria-invalid', 'true');
+    });
+    it('renders disabled checkbox when disabled=true', () => {
+        const { getByLabelText } = render(Checkbox, {
+            props: { id, label, disabled: true },
+        });
+        const checkbox = getByLabelText(label);
+        expect(checkbox.disabled).toBe(true);
+    });
+    it('renders indeterminate state when indeterminate=true', () => {
+        const { getByLabelText } = render(Checkbox, {
+            props: { id, label, indeterminate: true },
+        });
+        const checkbox = getByLabelText(label);
+        expect(checkbox.indeterminate).toBe(true);
+    });
+    it('applies indented class when indented=true', () => {
+        const { container } = render(Checkbox, {
+            props: { id, indented: true },
+        });
+        const wrapper = container.querySelector('div.mc-checkbox');
+        expect(wrapper).toHaveClass('mc-checkbox--indented');
+    });
+    it('does not render label element if label prop is missing', () => {
+        const { container } = render(Checkbox, { props: { id } });
+        const labelEl = container.querySelector('label.mc-checkbox__label');
+        expect(labelEl).toBeNull();
+    });
+});

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

@@ -1,17 +1,12 @@
-import type { Meta } from '@storybook/html-vite';
-/**
- * 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/).
- */
-declare const _default: Meta;
-export default _default;
-export declare const Default: any;
-export declare const Checked: any;
-export declare const Indeterminate: any;
-export declare const Disabled: any;
-export declare const Invalid: any;
-export declare const Required: 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 Indeterminate: Story;
+export declare const Disabled: Story;
+export declare const Invalid: Story;
+export declare const IndeterminateDisabled: Story;
+export declare const CheckedDisabled: Story;
 //# sourceMappingURL=Checkbox.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.stories.d.ts","sourceRoot":"","sources":["../../../src/components/checkbox/Checkbox.stories.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAW,MAAM,sBAAsB,CAAC;AAG1D;;;;;;GAMG;wBAqDE,IAAI;AAnDT,wBAmDU;AAmBV,eAAO,MAAM,OAAO,KAAoB,CAAC;AASzC,eAAO,MAAM,OAAO,KAAoB,CAAC;AAUzC,eAAO,MAAM,aAAa,KAAoB,CAAC;AAU/C,eAAO,MAAM,QAAQ,KAAoB,CAAC;AAU1C,eAAO,MAAM,OAAO,KAAoB,CAAC;AAUzC,eAAO,MAAM,QAAQ,KAAoB,CAAC"}
+{"version":3,"file":"Checkbox.stories.d.ts","sourceRoot":"","sources":["../../../src/components/checkbox/Checkbox.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAKrE,QAAA,MAAM,IAAI,EAAE,IAkCX,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,aAAa,EAAE,KAK3B,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,KAMnC,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAM7B,CAAC"}