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

package/dist/components/toaster/Toaster.stories.js

@@ -5,92 +5,24 @@ import { action } from 'storybook/actions';
 const meta = {
     title: 'Overlay/Toaster',
     component: 'm-toaster',
+    tags: ['v2'],
     parameters: {
         layout: 'fullscreen',
         docs: {
             story: { height: '300px' },
-            description: {
-                component: 'A toaster is a temporary notification that appears briefly on the screen to provide feedback or updates without interrupting the user’s workflow. It is commonly used for success messages, warnings, errors, or informational updates. Toasters can disappear automatically after a few seconds, be dismissed manually via a close button, or be removed when the user performs a relevant action. They typically include an icon, a short message, and an optional close button for better usability.',
-            },
         },
     },
     argTypes: {
-        open: {
-            control: 'boolean',
-            description: 'If true, displays the toaster.',
-            table: {
-                type: { summary: 'boolean' },
-                category: 'attributes',
-            },
-        },
         position: {
-            description: 'Position of the toaster.',
-            control: { type: 'radio' },
+            control: 'radio',
             options: ['top', 'bottom', 'top-center', 'bottom-center'],
-            table: {
-                type: { summary: `'top' | 'bottom' | 'top-center' | 'bottom-center'` },
-                defaultValue: { summary: "'top'" },
-                category: 'attributes',
-            },
-        },
-        description: {
-            control: 'text',
-            description: 'Description/message of the toaster.',
-            table: {
-                type: { summary: 'string' },
-                category: 'attributes',
-            },
         },
         status: {
-            control: { type: 'radio' },
-            options: ['warning', 'error', 'success', 'info'],
-            description: 'Status (determines icon and style).',
-            table: {
-                type: { summary: `'info' | 'success' | 'warning' | 'error'` },
-                defaultValue: { summary: "'info'" },
-                category: 'attributes',
-            },
-        },
-        closable: {
-            control: 'boolean',
-            description: 'If true, shows a close button.',
-            table: {
-                type: { summary: 'boolean' },
-                defaultValue: { summary: 'true' },
-                category: 'attributes',
-            },
-        },
-        progress: {
-            control: 'boolean',
-            description: 'If true, shows the progress indicator.',
-            table: {
-                type: { summary: 'boolean' },
-                category: 'attributes',
-            },
-        },
-        timeout: {
-            control: 'number',
-            description: 'Auto-dismiss timeout in milliseconds.',
-            table: {
-                type: { summary: 'number' },
-                category: 'attributes',
-            },
-        },
-        action: {
-            control: 'text',
-            description: 'Use this slot to insert a button or a link in the toaster',
-            table: {
-                type: { summary: 'any' },
-                category: 'slots',
-            },
+            control: 'radio',
+            options: ['info', 'success', 'warning', 'error'],
         },
         'update:open': {
-            control: 'text',
-            description: 'Emits when the checkbox value changes, updating the modelValue prop.',
-            table: {
-                type: { summary: 'boolean' },
-                category: 'events',
-            },
+            control: false,
         },
         '--toaster-z-index': {
             description: 'Customise the z-index of the toaster',

package/dist/components/toaster/Toaster.svelte

@@ -9,6 +9,9 @@
   import Cross20 from '@mozaic-ds/icons-svelte/svelte/Cross20/Cross20.svelte';
   /**
    * A toaster is a temporary notification that appears briefly on the screen to provide feedback or updates without interrupting the user’s workflow. It is commonly used for success messages, warnings, errors, or informational updates. Toasters can disappear automatically after a few seconds, be dismissed manually via a close button, or be removed when the user performs a relevant action. They typically include an icon, a short message, and an optional close button for better usability.
+   *
+   * @slot action - Use this slot to insert a button or a link in the toaster
+   * @event update:open {CustomEvent<boolean>} - Fired when the open state changes.
    */
   interface Props {
     /**
@@ -50,6 +53,7 @@
     progress,
     timeout,
   }: Props = $props();
+  let element: HTMLElement;
 
   const iconMap = [
     { status: 'info', component: InfoCircleFilled32 },
@@ -76,8 +80,7 @@
       bubbles: true,
       composed: true,
     });
-    // @ts-ignore: `this` is the custom element instance
-    this.dispatchEvent(event);
+    element.dispatchEvent(event);
   };
 
   onMount(() => {
@@ -109,14 +112,20 @@
   });
 </script>
 
-<section 
-  class={["mc-toaster", open && 'is-open', `mc-toaster--${status}`, `mc-toaster--${position}`]} 
+<section
+  class={[
+    'mc-toaster',
+    open && 'is-open',
+    `mc-toaster--${status}`,
+    `mc-toaster--${position}`,
+  ]}
   role="status"
   tabindex="-1"
   aria-hidden={!open}
+  bind:this={element}
 >
   <span class="mc-toaster__icon" aria-hidden="true">
-    <selected.component/>
+    <selected.component />
   </span>
 
   <div class="mc-toaster__content">
@@ -128,8 +137,9 @@
   </div>
 
   {#if closable}
-    <button class="mc-toaster__close mc-button mc-button--icon-button mc-button--inverse mc-button--s mc-button--ghost" 
-      type="button" 
+    <button
+      class="mc-toaster__close mc-button mc-button--icon-button mc-button--inverse mc-button--s mc-button--ghost"
+      type="button"
       aria-label="Close"
       onclick={onClose}
     >

package/dist/components/toaster/Toaster.svelte.d.ts

@@ -1,5 +1,8 @@
 /**
  * A toaster is a temporary notification that appears briefly on the screen to provide feedback or updates without interrupting the user’s workflow. It is commonly used for success messages, warnings, errors, or informational updates. Toasters can disappear automatically after a few seconds, be dismissed manually via a close button, or be removed when the user performs a relevant action. They typically include an icon, a short message, and an optional close button for better usability.
+ *
+ * @slot action - Use this slot to insert a button or a link in the toaster
+ * @event update:open {CustomEvent<boolean>} - Fired when the open state changes.
  */
 interface Props {
     /**

package/dist/components/toaster/Toaster.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Toaster.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/toaster/Toaster.svelte.ts"],"names":[],"mappings":"AAUE;;GAEG;AACH,UAAU,KAAK;IACb;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,YAAY,GAAG,eAAe,CAAC;IAC7D;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;IAClD;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AA8GH,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;AAUD,QAAA,MAAM,OAAO;;;;UAAqF,CAAC;AACjF,KAAK,OAAO,GAAG,YAAY,CAAC,OAAO,OAAO,CAAC,CAAC;AAC9C,eAAe,OAAO,CAAC"}
+{"version":3,"file":"Toaster.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/toaster/Toaster.svelte.ts"],"names":[],"mappings":"AAUE;;;;;GAKG;AACH,UAAU,KAAK;IACb;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,YAAY,GAAG,eAAe,CAAC;IAC7D;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;IAClD;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAmHH,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;AAUD,QAAA,MAAM,OAAO;;;;UAAqF,CAAC;AACjF,KAAK,OAAO,GAAG,YAAY,CAAC,OAAO,OAAO,CAAC,CAAC;AAC9C,eAAe,OAAO,CAAC"}

package/dist/components/toggle/README.md

@@ -0,0 +1,15 @@
+# `m-toggle`
+
+A toggle is a switch component that allows users to enable or disable a setting, representing a binary state such as on/off or active/inactive. It provides a quick and intuitive way to control preferences or system settings. Toggles are commonly used in settings menus, dark mode switches, and feature activations, offering an alternative to checkboxes for immediate visual feedback.
+
+## Props
+
+| Name | Description | Type | Default |
+|------|-------------|------|---------|
+| `id*` | A unique identifier for the toggle, used to associate the label with the form element. | `string` |   |
+| `name` | The name attribute for the toggle element, typically used for form submission. | `string` |   |
+| `label` | The text label displayed next to the toggle. | `string` |   |
+| `checked` | The toggle's checked state. | `boolean` | `$bindable(false)` |
+| `size` | Determines the size of the toggle. | `'s'` `'m'` | `s` |
+| `disabled` | If `true`, disables the toggle, making it non-interactive. | `boolean` |   |
+

package/dist/components/toggle/Toggle.js

@@ -1,4 +1,4 @@
-import{n as M,c as P,p as B,a as H,b as r,f as _,d as v,t as b,e as y,o as j,h as E,i as D,j as d,s as F,r as f,g as S}from"../../custom-element.js";import{i as T}from"../../if.js";import{s as C,r as Y}from"../../attributes.js";import{a as q}from"../../input.js";import{c as A}from"../../custom-element-forward-events.js";var G=_('<span class="mc-toggle__label svelte-26wadt"> </span>'),I=_('<div><label class="mc-toggle__container svelte-26wadt"><input class="mc-toggle__input svelte-26wadt" type="checkbox"/> <!></label></div>');const J={hash:"svelte-26wadt",code:`/**
+import{c as z,p as L,a as M,b as l,f as C,t as p,i as E,j as P,d as f,k as r,s as B,r as v,e as H,g as y,h as j}from"../../custom-element.js";import{i as D}from"../../if.js";import{r as F,s as w}from"../../attributes.js";import{a as S}from"../../input.js";import{c as T}from"../../custom-element-forward-events.js";var Y=C('<span class="mc-toggle__label svelte-26wadt"> </span>'),q=C('<div><label class="mc-toggle__container svelte-26wadt"><input type="checkbox" class="mc-toggle__input svelte-26wadt"/> <!></label></div>');const A={hash:"svelte-26wadt",code:`/**
  * Do not edit directly, this file was auto-generated.
- */.mc-toggle.svelte-26wadt {width:fit-content;}.mc-toggle__container.svelte-26wadt {display:flex;align-items:center;cursor:pointer;gap:0.5rem;position:relative;padding:0.25rem;}.mc-toggle__container.svelte-26wadt::before, .mc-toggle__container.svelte-26wadt::after {content:"";}.mc-toggle__container.svelte-26wadt::before {transition:box-shadow 200ms ease;height:1.5rem;width:2.5rem;background-color:var(--forms-color-background-unchecked, #666666);border-radius:var(--radius-l, 1rem);flex-shrink:0;}.mc-toggle__container.svelte-26wadt::after {height:1.25rem;width:1.25rem;background-color:var(--forms-color-icon-inverse, #ffffff);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(--forms-color-background-unchecked, %23666666)' viewBox='0 0 20 20'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M14.697 6.364a.75.75 0 1 0-1.06-1.061L10 8.939 6.364 5.303a.75.75 0 0 0-1.06 1.06L8.94 10l-3.637 3.636a.75.75 0 1 0 1.06 1.06L10 11.062l3.636 3.636a.75.75 0 0 0 1.061-1.06L11.061 10z'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h20v20H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");border-radius:var(--radius-full, 100%);background-position:center;left:0.375rem;position:absolute;top:50%;transform:translateY(-50%);}.mc-toggle__input.svelte-26wadt {clip-path:inset(100%);clip:rect(1px, 1px, 1px, 1px);height:1px;overflow:hidden;position:absolute;white-space:nowrap;padding:0;width:1px;}.mc-toggle__label.svelte-26wadt {color:var(--forms-color-text-default, #000000);font-size:var(--font-size-150, 1rem);font-weight:var(--font-weight-regular, 400);line-height:var(--line-height-m, 1.5);}.mc-toggle.svelte-26wadt:has(:where(.svelte-26wadt):checked) .mc-toggle__container:where(.svelte-26wadt)::before {background-color:var(--forms-color-background-checked, #117f03);}.mc-toggle.svelte-26wadt:has(:where(.svelte-26wadt):checked) .mc-toggle__container:where(.svelte-26wadt)::after {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(--forms-color-background-checked, %23117f03)' viewBox='0 0 20 20'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M14.697 6.553a.75.75 0 0 1 0 1.06l-5.833 5.834a.75.75 0 0 1-1.06 0l-2.5-2.5a.75.75 0 0 1 1.06-1.06l1.97 1.97 5.303-5.304a.75.75 0 0 1 1.06 0'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h20v20H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");transform:translate(1rem, -50%);}.mc-toggle.svelte-26wadt:has(:where(.svelte-26wadt):disabled) .mc-toggle__container:where(.svelte-26wadt) {cursor:not-allowed;}.mc-toggle.svelte-26wadt:has(:where(.svelte-26wadt):disabled) .mc-toggle__container:where(.svelte-26wadt)::before {background-color:var(--forms-color-background-disabled, #d9d9d9);}.mc-toggle.svelte-26wadt:has(:where(.svelte-26wadt):disabled) .mc-toggle__container:where(.svelte-26wadt)::after {background-color:var(--forms-color-icon-disabled, #737373);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(--forms-color-background-disabled, %23d9d9d9)' viewBox='0 0 20 20'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M14.697 6.364a.75.75 0 1 0-1.06-1.061L10 8.939 6.364 5.303a.75.75 0 0 0-1.06 1.06L8.94 10l-3.637 3.636a.75.75 0 1 0 1.06 1.06L10 11.062l3.636 3.636a.75.75 0 0 0 1.061-1.06L11.061 10z'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h20v20H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");}.mc-toggle.svelte-26wadt:has(:where(.svelte-26wadt):disabled) .mc-toggle__label:where(.svelte-26wadt) {color:var(--forms-color-text-disabled, #737373);}.mc-toggle.svelte-26wadt:has(:where(.svelte-26wadt):disabled:checked) .mc-toggle__container:where(.svelte-26wadt)::after {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(--forms-color-background-disabled, %23d9d9d9)' viewBox='0 0 20 20'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M14.697 6.553a.75.75 0 0 1 0 1.06l-5.833 5.834a.75.75 0 0 1-1.06 0l-2.5-2.5a.75.75 0 0 1 1.06-1.06l1.97 1.97 5.303-5.304a.75.75 0 0 1 1.06 0'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h20v20H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");}.mc-toggle.svelte-26wadt:has(:where(.svelte-26wadt):focus-visible) .mc-toggle__container:where(.svelte-26wadt)::before {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-toggle--m.svelte-26wadt .mc-toggle__container:where(.svelte-26wadt)::before {height:2rem;width:3.5rem;}.mc-toggle--m.svelte-26wadt .mc-toggle__container:where(.svelte-26wadt)::after {height:1.5rem;width:1.5rem;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' fill='var(--forms-color-background-unchecked, %23666666)' viewBox='0 0 24 24'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M17.707 7.707a1 1 0 0 0-1.414-1.414L12 10.586 7.707 6.293a1 1 0 0 0-1.414 1.414L10.586 12l-4.293 4.293a1 1 0 1 0 1.414 1.414L12 13.414l4.293 4.293a1 1 0 0 0 1.414-1.414L13.414 12z'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");left:0.5rem;}.mc-toggle--m.svelte-26wadt:has(:where(.svelte-26wadt):checked) .mc-toggle__container:where(.svelte-26wadt)::after {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' fill='var(--forms-color-background-checked, %23117f03)' viewBox='0 0 24 24'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M17.707 7.793a1 1 0 0 1 0 1.414l-7 7a1 1 0 0 1-1.414 0l-3-3a1 1 0 1 1 1.414-1.414L10 14.086l6.293-6.293a1 1 0 0 1 1.414 0'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");transform:translate(1.5rem, -50%);}.mc-toggle--m.svelte-26wadt:has(:where(.svelte-26wadt):disabled) .mc-toggle__container:where(.svelte-26wadt)::after {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' fill='var(--forms-color-background-disabled, %23d9d9d9)' viewBox='0 0 24 24'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M17.707 7.707a1 1 0 0 0-1.414-1.414L12 10.586 7.707 6.293a1 1 0 0 0-1.414 1.414L10.586 12l-4.293 4.293a1 1 0 1 0 1.414 1.414L12 13.414l4.293 4.293a1 1 0 0 0 1.414-1.414L13.414 12z'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");}.mc-toggle--m.svelte-26wadt:has(:where(.svelte-26wadt):disabled:checked) .mc-toggle__container:where(.svelte-26wadt)::after {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' fill='var(--forms-color-background-disabled, %23d9d9d9)' viewBox='0 0 24 24'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M17.707 7.793a1 1 0 0 1 0 1.414l-7 7a1 1 0 0 1-1.414 0l-3-3a1 1 0 1 1 1.414-1.414L10 14.086l6.293-6.293a1 1 0 0 1 1.414 0'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");}.mc-toggle--hide-label.svelte-26wadt .mc-toggle__label:where(.svelte-26wadt) {clip-path:inset(100%);clip:rect(1px, 1px, 1px, 1px);height:1px;overflow:hidden;position:absolute;white-space:nowrap;padding:0;width:1px;}`};function K(w,a){B(a,!0),H(w,J);let s=r(a,"name",7),g=r(a,"checked",15),c=r(a,"disabled",7,!1),n=r(a,"size",7,"m"),o=r(a,"label",7),h=r(a,"onchange",7),m=r(a,"onblur",7);var x={get name(){return s()},set name(e){s(e),d()},get checked(){return g()},set checked(e){g(e),d()},get disabled(){return c()},set disabled(e=!1){c(e),d()},get size(){return n()},set size(e="m"){n(e),d()},get label(){return o()},set label(e){o(e),d()},get onchange(){return h()},set onchange(e){h(e),d()},get onblur(){return m()},set onblur(e){m(e),d()}},i=I();let u;var p=v(i),l=v(p);Y(l),l.__change=function(...e){var t;(t=h())==null||t.apply(this,e)};var k=F(l,2);{var z=e=>{var t=G(),L=v(t,!0);f(t),b(()=>S(L,o())),E(e,t)};T(k,e=>{o()&&e(z)})}return f(p),f(i),b(e=>{u=y(i,1,"mc-toggle svelte-26wadt",null,u,e),C(l,"id",s()),C(l,"name",s()),l.disabled=c()},[()=>({"mc-toggle--hide-label":!o(),"mc-toggle--m":n()==="m"})]),j("blur",l,function(...e){var t;(t=m())==null||t.apply(this,e)}),q(l,g),E(w,i),D(x)}M(["change"]);customElements.define("m-toggle",P(K,{name:{},checked:{},disabled:{},size:{},label:{},onchange:{},onblur:{}},[],[],!0,A));
+ */.mc-toggle.svelte-26wadt {width:fit-content;}.mc-toggle__container.svelte-26wadt {display:flex;align-items:center;cursor:pointer;gap:0.5rem;position:relative;padding:0.25rem;}.mc-toggle__container.svelte-26wadt::before, .mc-toggle__container.svelte-26wadt::after {content:"";}.mc-toggle__container.svelte-26wadt::before {transition:box-shadow 200ms ease;height:1.5rem;width:2.5rem;background-color:var(--forms-color-background-unchecked, #666666);border-radius:var(--radius-l, 1rem);flex-shrink:0;}.mc-toggle__container.svelte-26wadt::after {height:1.25rem;width:1.25rem;background-color:var(--forms-color-icon-inverse, #ffffff);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(--forms-color-background-unchecked, %23666666)' viewBox='0 0 20 20'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M14.697 6.364a.75.75 0 1 0-1.06-1.061L10 8.939 6.364 5.303a.75.75 0 0 0-1.06 1.06L8.94 10l-3.637 3.636a.75.75 0 1 0 1.06 1.06L10 11.062l3.636 3.636a.75.75 0 0 0 1.061-1.06L11.061 10z'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h20v20H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");border-radius:var(--radius-full, 100%);background-position:center;left:0.375rem;position:absolute;top:50%;transform:translateY(-50%);}.mc-toggle__input.svelte-26wadt {clip-path:inset(100%);clip:rect(1px, 1px, 1px, 1px);height:1px;overflow:hidden;position:absolute;white-space:nowrap;padding:0;width:1px;}.mc-toggle__label.svelte-26wadt {color:var(--forms-color-text-default, #000000);font-size:var(--font-size-150, 1rem);font-weight:var(--font-weight-regular, 400);line-height:var(--line-height-m, 1.5);}.mc-toggle.svelte-26wadt:has(:where(.svelte-26wadt):checked) .mc-toggle__container:where(.svelte-26wadt)::before {background-color:var(--forms-color-background-checked, #117f03);}.mc-toggle.svelte-26wadt:has(:where(.svelte-26wadt):checked) .mc-toggle__container:where(.svelte-26wadt)::after {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(--forms-color-background-checked, %23117f03)' viewBox='0 0 20 20'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M14.697 6.553a.75.75 0 0 1 0 1.06l-5.833 5.834a.75.75 0 0 1-1.06 0l-2.5-2.5a.75.75 0 0 1 1.06-1.06l1.97 1.97 5.303-5.304a.75.75 0 0 1 1.06 0'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h20v20H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");transform:translate(1rem, -50%);}.mc-toggle.svelte-26wadt:has(:where(.svelte-26wadt):disabled) .mc-toggle__container:where(.svelte-26wadt) {cursor:not-allowed;}.mc-toggle.svelte-26wadt:has(:where(.svelte-26wadt):disabled) .mc-toggle__container:where(.svelte-26wadt)::before {background-color:var(--forms-color-background-disabled, #d9d9d9);}.mc-toggle.svelte-26wadt:has(:where(.svelte-26wadt):disabled) .mc-toggle__container:where(.svelte-26wadt)::after {background-color:var(--forms-color-icon-disabled, #737373);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(--forms-color-background-disabled, %23d9d9d9)' viewBox='0 0 20 20'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M14.697 6.364a.75.75 0 1 0-1.06-1.061L10 8.939 6.364 5.303a.75.75 0 0 0-1.06 1.06L8.94 10l-3.637 3.636a.75.75 0 1 0 1.06 1.06L10 11.062l3.636 3.636a.75.75 0 0 0 1.061-1.06L11.061 10z'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h20v20H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");}.mc-toggle.svelte-26wadt:has(:where(.svelte-26wadt):disabled) .mc-toggle__label:where(.svelte-26wadt) {color:var(--forms-color-text-disabled, #737373);}.mc-toggle.svelte-26wadt:has(:where(.svelte-26wadt):disabled:checked) .mc-toggle__container:where(.svelte-26wadt)::after {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(--forms-color-background-disabled, %23d9d9d9)' viewBox='0 0 20 20'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M14.697 6.553a.75.75 0 0 1 0 1.06l-5.833 5.834a.75.75 0 0 1-1.06 0l-2.5-2.5a.75.75 0 0 1 1.06-1.06l1.97 1.97 5.303-5.304a.75.75 0 0 1 1.06 0'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h20v20H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");}.mc-toggle.svelte-26wadt:has(:where(.svelte-26wadt):focus-visible) .mc-toggle__container:where(.svelte-26wadt)::before {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-toggle--m.svelte-26wadt .mc-toggle__container:where(.svelte-26wadt)::before {height:2rem;width:3.5rem;}.mc-toggle--m.svelte-26wadt .mc-toggle__container:where(.svelte-26wadt)::after {height:1.5rem;width:1.5rem;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' fill='var(--forms-color-background-unchecked, %23666666)' viewBox='0 0 24 24'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M17.707 7.707a1 1 0 0 0-1.414-1.414L12 10.586 7.707 6.293a1 1 0 0 0-1.414 1.414L10.586 12l-4.293 4.293a1 1 0 1 0 1.414 1.414L12 13.414l4.293 4.293a1 1 0 0 0 1.414-1.414L13.414 12z'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");left:0.5rem;}.mc-toggle--m.svelte-26wadt:has(:where(.svelte-26wadt):checked) .mc-toggle__container:where(.svelte-26wadt)::after {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' fill='var(--forms-color-background-checked, %23117f03)' viewBox='0 0 24 24'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M17.707 7.793a1 1 0 0 1 0 1.414l-7 7a1 1 0 0 1-1.414 0l-3-3a1 1 0 1 1 1.414-1.414L10 14.086l6.293-6.293a1 1 0 0 1 1.414 0'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");transform:translate(1.5rem, -50%);}.mc-toggle--m.svelte-26wadt:has(:where(.svelte-26wadt):disabled) .mc-toggle__container:where(.svelte-26wadt)::after {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' fill='var(--forms-color-background-disabled, %23d9d9d9)' viewBox='0 0 24 24'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M17.707 7.707a1 1 0 0 0-1.414-1.414L12 10.586 7.707 6.293a1 1 0 0 0-1.414 1.414L10.586 12l-4.293 4.293a1 1 0 1 0 1.414 1.414L12 13.414l4.293 4.293a1 1 0 0 0 1.414-1.414L13.414 12z'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");}.mc-toggle--m.svelte-26wadt:has(:where(.svelte-26wadt):disabled:checked) .mc-toggle__container:where(.svelte-26wadt)::after {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' fill='var(--forms-color-background-disabled, %23d9d9d9)' viewBox='0 0 24 24'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M17.707 7.793a1 1 0 0 1 0 1.414l-7 7a1 1 0 0 1-1.414 0l-3-3a1 1 0 1 1 1.414-1.414L10 14.086l6.293-6.293a1 1 0 0 1 1.414 0'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");}.mc-toggle--hide-label.svelte-26wadt .mc-toggle__label:where(.svelte-26wadt) {clip-path:inset(100%);clip:rect(1px, 1px, 1px, 1px);height:1px;overflow:hidden;position:absolute;white-space:nowrap;padding:0;width:1px;}`};function G(u,t){L(t,!0),M(u,A);let d=l(t,"id",7),i=l(t,"name",7),o=l(t,"label",7),g=l(t,"checked",15,!1),c=l(t,"disabled",7),h=l(t,"size",7,"s");var b={get id(){return d()},set id(e){d(e),r()},get name(){return i()},set name(e){i(e),r()},get label(){return o()},set label(e){o(e),r()},get checked(){return g()},set checked(e=!1){g(e),r()},get disabled(){return c()},set disabled(e){c(e),r()},get size(){return h()},set size(e="s"){h(e),r()}},s=q(),n=f(s),a=f(n);F(a);var _=B(a,2);{var k=e=>{var m=Y(),x=f(m,!0);v(m),p(()=>j(x,o())),E(e,m)};D(_,e=>{o()&&e(k)})}return v(n),v(s),p(()=>{H(s,1,y(["mc-toggle",`mc-toggle--${h()}`]),"svelte-26wadt"),w(n,"for",d()),w(a,"id",d()),w(a,"name",i()),a.disabled=c()}),S(a,g),E(u,s),P(b)}customElements.define("m-toggle",z(G,{checked:{attribute:"checked",reflect:!0,type:"Boolean"},id:{},name:{},label:{},disabled:{},size:{}},[],[],!0,T));
 //# sourceMappingURL=Toggle.js.map

package/dist/components/toggle/Toggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toggle.js","sources":["../../../src/components/toggle/Toggle.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-toggle',\n    extend: customElementForwardEvents,\n  }}\n/>\n\n<script lang=\"ts\">\n  import type { ToggleSize } from './toggle.types';\n  import { customElementForwardEvents } from '../../utils';\n\n  interface Props {\n    name: string;\n    checked: boolean;\n    disabled?: boolean;\n    size?: ToggleSize;\n    label: string;\n    onchange?: (event: Event) => void;\n    onblur?: (event: FocusEvent) => void;\n  }\n\n  let {\n    name,\n    checked = $bindable(),\n    disabled = false,\n    size = 'm',\n    label,\n    onchange,\n    onblur\n  }: Props = $props();\n</script>\n\n<div\n  class=\"mc-toggle\"\n  class:mc-toggle--hide-label={!label}\n  class:mc-toggle--m={size === 'm'}\n>\n  <label class=\"mc-toggle__container\">\n    <input\n      class=\"mc-toggle__input\"\n      id={name}\n      {name}\n      type=\"checkbox\"\n      bind:checked\n      {disabled}\n      {onchange}\n      {onblur}\n    />\n    {#if label}\n      <span class=\"mc-toggle__label\">{label}</span>\n    {/if}\n  </label>\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/toggle';\n</style>\n"],"names":["name","$.prop","$$props","checked","disabled","size","label","onchange","onblur","$$render","consequent","customElementForwardEvents"],"mappings":";;srPAAA,oBAsBIA,EAAIC,EAAAC,EAAA,OAAA,CAAA,EACJC,EAAOF,EAAAC,EAAA,UAAA,EAAA,EACPE,mBAAW,EAAK,EAChBC,eAAO,GAAG,EACVC,EAAKL,EAAAC,EAAA,QAAA,CAAA,EACLK,EAAQN,EAAAC,EAAA,WAAA,CAAA,EACRM,EAAAP,EAAAC,EAAA,SAAA,CAAA,mJAJW,GAAK,6CACT,IAAG,+TAwBwBI,EAAK,CAAA,CAAA,kBADlCA,EAAK,GAAAG,EAAAC,CAAA,gFARJV,GAAI,kEANkBM,EAAK,EACf,eAAAD,EAAI,IAAK,2FAL/B,qIA3BYM"}
+{"version":3,"file":"Toggle.js","sources":["../../../src/components/toggle/Toggle.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-toggle',\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 toggle is a switch component that allows users to enable or disable a setting, representing a binary state such as on/off or active/inactive. It provides a quick and intuitive way to control preferences or system settings. Toggles are commonly used in settings menus, dark mode switches, and feature activations, offering an alternative to checkboxes for immediate visual feedback.\n   */\n  interface Props {\n    /**\n     * A unique identifier for the toggle, used to associate the label with the form element.\n     */\n    id: string;\n    /**\n     * The name attribute for the toggle element, typically used for form submission.\n     */\n    name?: string;\n    /**\n     * The text label displayed next to the toggle.\n     */\n    label?: string;\n    /**\n     * The toggle's checked state.\n     */\n    checked?: boolean;\n    /**\n     * Determines the size of the toggle.\n     */\n    size?: 's' | 'm';\n    /**\n     * If `true`, disables the toggle, making it non-interactive.\n     */\n    disabled?: boolean;\n  }\n\n  let {\n    id,\n    name,\n    label,\n    checked = $bindable(false),\n    disabled,\n    size = 's',\n  }: Props = $props();\n</script>\n\n<div class={['mc-toggle', `mc-toggle--${size}`]}>\n  <label class=\"mc-toggle__container\" for={id}>\n    <input\n      {id}\n      type=\"checkbox\"\n      class=\"mc-toggle__input\"\n      {name}\n      {disabled}\n      bind:checked\n    />\n    {#if label}\n      <span class=\"mc-toggle__label\">{label}</span>\n    {/if}\n  </label>\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/toggle';\n</style>\n"],"names":["id","$.prop","$$props","name","label","checked","disabled","size","$$render","consequent","$.set_class","div","$.clsx","customElementForwardEvents"],"mappings":";;srPAAA,oBA2CIA,EAAEC,EAAAC,EAAA,KAAA,CAAA,EACFC,EAAIF,EAAAC,EAAA,OAAA,CAAA,EACJE,EAAKH,EAAAC,EAAA,QAAA,CAAA,EACLG,mBAAoB,EAAK,EACzBC,EAAQL,EAAAC,EAAA,WAAA,CAAA,EACRK,eAAO,GAAG,sLAFU,GAAK,kGAElB,IAAG,gGAewBH,EAAK,CAAA,CAAA,kBADlCA,EAAK,GAAAI,EAAAC,CAAA,4BAVDC,EAAAC,EAAA,EAAAC,EAAA,CAAA,0BAA2BL,EAAI,CAAA,EAAA,CAAA,EAAA,eAAA,YACDP,GAAE,mEAH7C,oJA5CYa"}

package/dist/components/toggle/Toggle.spec.js

@@ -0,0 +1,69 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, fireEvent } from '@testing-library/svelte';
+import Toggle from './Toggle.svelte';
+describe('m-toggle component', () => {
+    it('renders with label and proper classes', () => {
+        const { container, getByLabelText } = render(Toggle, {
+            props: {
+                id: 'toggle-id',
+                label: 'Enable feature',
+                size: 'm',
+            },
+        });
+        const toggleContainer = container.querySelector('.mc-toggle');
+        expect(toggleContainer).toBeTruthy();
+        expect(toggleContainer.classList.contains('mc-toggle--m')).toBe(true);
+        const input = getByLabelText('Enable feature');
+        expect(input.type).toBe('checkbox');
+        expect(input.checked).toBe(false);
+    });
+    it('sets initial checked state correctly', () => {
+        const { getByLabelText } = render(Toggle, {
+            props: {
+                id: 'toggle-id',
+                label: 'Enable setting',
+                checked: true,
+            },
+        });
+        const input = getByLabelText('Enable setting');
+        expect(input.checked).toBe(true);
+    });
+    it('toggles checked state when clicked', async () => {
+        const { getByLabelText } = render(Toggle, {
+            props: {
+                id: 'toggle-id',
+                label: 'Toggle me',
+                checked: false,
+            },
+        });
+        const input = getByLabelText('Toggle me');
+        expect(input.checked).toBe(false);
+        await fireEvent.click(input);
+        expect(input.checked).toBe(true);
+    });
+    it('emits DOM "change" event when toggled', async () => {
+        const { getByLabelText } = render(Toggle, {
+            props: {
+                id: 'toggle-id',
+                label: 'Notify me',
+                checked: false,
+            },
+        });
+        const input = getByLabelText('Notify me');
+        const changeHandler = vi.fn();
+        input.addEventListener('change', changeHandler);
+        await fireEvent.click(input);
+        expect(changeHandler).toHaveBeenCalledTimes(1);
+    });
+    it('is disabled when disabled prop is true', () => {
+        const { getByLabelText } = render(Toggle, {
+            props: {
+                id: 'toggle-id',
+                label: 'Disabled toggle',
+                disabled: true,
+            },
+        });
+        const input = getByLabelText('Disabled toggle');
+        expect(input.disabled).toBe(true);
+    });
+});

package/dist/components/toggle/Toggle.stories.d.ts

@@ -1,15 +1,10 @@
-import type { Meta } from '@storybook/html-vite';
-/**
- * A toggle is used to choose between two possibilities and when the user needs instant feedback.
- * It is commonly used to show or hide content and act as an "on/off" switch.
- *
- * The `MToggle` component is the **Svelte / WebComponent** implementation of the **Toggle** component of Mozaic Design System.
- * The full specification of this component is available in [the associated documentation](https://mozaic.adeo.cloud/components/form/toggle/).
- */
-declare const _default: Meta;
-export default _default;
-export declare const Default: any;
-export declare const Checked: any;
-export declare const Disabled: any;
-export declare const Small: 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 Disabled: Story;
+export declare const Size: Story;
+export declare const HideLabel: Story;
 //# sourceMappingURL=Toggle.stories.d.ts.map

package/dist/components/toggle/Toggle.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Toggle.stories.d.ts","sourceRoot":"","sources":["../../../src/components/toggle/Toggle.stories.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAW,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAG1D;;;;;;GAMG;wBA2BE,IAAI;AAzBT,wBAyBU;AAaV,eAAO,MAAM,OAAO,KAAoB,CAAC;AAUzC,eAAO,MAAM,OAAO,KAAoB,CAAC;AAQzC,eAAO,MAAM,QAAQ,KAAoB,CAAC;AAO1C,eAAO,MAAM,KAAK,KAAoB,CAAC"}
+{"version":3,"file":"Toggle.stories.d.ts","sourceRoot":"","sources":["../../../src/components/toggle/Toggle.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAKrE,QAAA,MAAM,IAAI,EAAE,IAsCX,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,QAAQ,EAAE,KAKtB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KAKlB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAKvB,CAAC"}

package/dist/components/toggle/Toggle.stories.js

@@ -1,76 +1,67 @@
+import { html } from 'lit';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
 import { action } from 'storybook/actions';
-import { userEvent, expect } from 'storybook/test';
-/**
- * A toggle is used to choose between two possibilities and when the user needs instant feedback.
- * It is commonly used to show or hide content and act as an "on/off" switch.
- *
- * The `MToggle` component is the **Svelte / WebComponent** implementation of the **Toggle** component of Mozaic Design System.
- * The full specification of this component is available in [the associated documentation](https://mozaic.adeo.cloud/components/form/toggle/).
- */
-export default {
+const meta = {
     title: 'Form Elements/Toggle',
+    component: 'm-toggle',
     argTypes: {
-        name: {
-            description: 'Specify the input name for the toggle',
-            control: 'text',
-        },
-        label: {
-            description: 'Specify the input label for the toggle',
-            control: 'text',
-        },
         size: {
-            description: 'Specify the size for the toggle',
-            control: { type: 'radio' },
+            control: 'radio',
             options: ['s', 'm'],
         },
-        disabled: {
-            description: 'Specify whether the toggle is disabled',
-            control: 'boolean',
-        },
-        checked: {
-            description: 'Specify whether the toggle is checked',
-            control: 'boolean',
-        },
+    },
+    args: {
+        id: 'ToggleId',
+        label: 'Toggle Label',
+    },
+    render: (args) => {
+        const onChange = action('change');
+        const onFocus = action('focus');
+        const onBlur = action('blur');
+        return html `
+      <m-toggle
+        id=${ifDefined(args.id)}
+        name=${ifDefined(args.name)}
+        label=${ifDefined(args.label)}
+        checked=${ifDefined(args.checked)}
+        disabled=${ifDefined(args.disabled)}
+        size=${ifDefined(args.size)}
+        @change=${(event) => {
+            onChange(event);
+        }}
+        @focus=${(event) => {
+            onFocus(event);
+        }}
+        @blur=${(event) => {
+            onBlur(event);
+        }}
+      ></m-toggle>
+    `;
     },
 };
-const Template = (args) => {
-    const MToggle = document.createElement('m-toggle');
-    MToggle.setAttribute('name', args.name || 'form-toggle');
-    MToggle.setAttribute('label', args.label || 'Label');
-    if (args.size)
-        MToggle.setAttribute('size', args.size);
-    if (args.disabled)
-        MToggle.setAttribute('disabled', 'true');
-    if (args.checked)
-        MToggle.setAttribute('checked', 'true');
-    MToggle.addEventListener('change', action('change'));
-    return MToggle;
-};
-export const Default = Template.bind({});
-Default.args = {};
-Default.play = async ({ canvasElement }) => {
-    const toggle = canvasElement.querySelector('m-toggle');
-    const input = toggle?.shadowRoot.querySelector('input');
-    expect(toggle).not.toBeNull();
-    await userEvent.click(input);
-    expect(input).toBeChecked();
+export default meta;
+export const Default = {};
+export const Checked = {
+    args: {
+        checked: true,
+        id: 'checkedId',
+    },
 };
-export const Checked = Template.bind({});
-Checked.args = { checked: true };
-Checked.play = async ({ canvasElement }) => {
-    const toggle = canvasElement.querySelector('m-toggle');
-    const input = toggle?.shadowRoot.querySelector('input');
-    expect(input).toBeChecked();
+export const Disabled = {
+    args: {
+        disabled: true,
+        id: 'disabledId',
+    },
 };
-export const Disabled = Template.bind({});
-Disabled.args = { disabled: true };
-Disabled.play = async ({ canvasElement }) => {
-    const toggle = canvasElement.querySelector('m-toggle');
-    expect(toggle).toBeDisabled();
+export const Size = {
+    args: {
+        id: 'sizeId',
+        size: 'm',
+    },
 };
-export const Small = Template.bind({});
-Small.args = { size: 's' };
-Small.play = async ({ canvasElement }) => {
-    const toggle = canvasElement.querySelector('m-toggle');
-    expect(toggle).toHaveAttribute('size', 's');
+export const HideLabel = {
+    args: {
+        id: 'hideLabelId',
+        label: undefined,
+    },
 };

package/dist/components/toggle/Toggle.svelte

@@ -1,50 +1,64 @@
 <svelte:options
   customElement={{
     tag: 'm-toggle',
+    props: {
+      checked: { reflect: true, type: 'Boolean', attribute: 'checked' },
+    },
     extend: customElementForwardEvents,
   }}
 />
 
 <script lang="ts">
-  import type { ToggleSize } from './toggle.types';
   import { customElementForwardEvents } from '../../utils';
-
+  /**
+   * A toggle is a switch component that allows users to enable or disable a setting, representing a binary state such as on/off or active/inactive. It provides a quick and intuitive way to control preferences or system settings. Toggles are commonly used in settings menus, dark mode switches, and feature activations, offering an alternative to checkboxes for immediate visual feedback.
+   */
   interface Props {
-    name: string;
-    checked: boolean;
+    /**
+     * A unique identifier for the toggle, used to associate the label with the form element.
+     */
+    id: string;
+    /**
+     * The name attribute for the toggle element, typically used for form submission.
+     */
+    name?: string;
+    /**
+     * The text label displayed next to the toggle.
+     */
+    label?: string;
+    /**
+     * The toggle's checked state.
+     */
+    checked?: boolean;
+    /**
+     * Determines the size of the toggle.
+     */
+    size?: 's' | 'm';
+    /**
+     * If `true`, disables the toggle, making it non-interactive.
+     */
     disabled?: boolean;
-    size?: ToggleSize;
-    label: string;
-    onchange?: (event: Event) => void;
-    onblur?: (event: FocusEvent) => void;
   }
 
   let {
+    id,
     name,
-    checked = $bindable(),
-    disabled = false,
-    size = 'm',
     label,
-    onchange,
-    onblur
+    checked = $bindable(false),
+    disabled,
+    size = 's',
   }: Props = $props();
 </script>
 
-<div
-  class="mc-toggle"
-  class:mc-toggle--hide-label={!label}
-  class:mc-toggle--m={size === 'm'}
->
-  <label class="mc-toggle__container">
+<div class={['mc-toggle', `mc-toggle--${size}`]}>
+  <label class="mc-toggle__container" for={id}>
     <input
+      {id}
+      type="checkbox"
       class="mc-toggle__input"
-      id={name}
       {name}
-      type="checkbox"
-      bind:checked
       {disabled}
-      {onchange}
-      {onblur}
+      bind:checked
     />
     {#if label}
       <span class="mc-toggle__label">{label}</span>

package/dist/components/toggle/Toggle.svelte.d.ts

@@ -1,12 +1,31 @@
-import type { ToggleSize } from './toggle.types';
+/**
+ * A toggle is a switch component that allows users to enable or disable a setting, representing a binary state such as on/off or active/inactive. It provides a quick and intuitive way to control preferences or system settings. Toggles are commonly used in settings menus, dark mode switches, and feature activations, offering an alternative to checkboxes for immediate visual feedback.
+ */
 interface Props {
-    name: string;
-    checked: boolean;
+    /**
+     * A unique identifier for the toggle, used to associate the label with the form element.
+     */
+    id: string;
+    /**
+     * The name attribute for the toggle element, typically used for form submission.
+     */
+    name?: string;
+    /**
+     * The text label displayed next to the toggle.
+     */
+    label?: string;
+    /**
+     * The toggle's checked state.
+     */
+    checked?: boolean;
+    /**
+     * Determines the size of the toggle.
+     */
+    size?: 's' | 'm';
+    /**
+     * If `true`, disables the toggle, making it non-interactive.
+     */
     disabled?: boolean;
-    size?: ToggleSize;
-    label: string;
-    onchange?: (event: Event) => void;
-    onblur?: (event: FocusEvent) => void;
 }
 declare const Toggle: import("svelte").Component<Props, {}, "checked">;
 type Toggle = ReturnType<typeof Toggle>;