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

package/dist/components/toggle/Toggle.js

@@ -1,4 +1,7 @@
-import{n as x,o as k,q as z,u as L,c as P,b as M,d as g,f as C,g as f,t as u,j as p,l as B,a as H,s as D,r as v,i as S,m as n,k as j}from"../../custom-element.js";import{i as q}from"../../if.js";import{r as T,s as E,a as Y}from"../../attributes.js";function A(a,e,{bubbles:l=!1,cancelable:r=!1}={}){return new CustomEvent(a,{detail:e,bubbles:l,cancelable:r})}function F(){const a=k;return a===null&&x(),(e,l,r)=>{var s;const i=(s=a.s.$$events)==null?void 0:s[e];if(i){const d=z(i)?i.slice():[i],h=A(e,l,r);for(const c of d)c.call(a.x,h);return!h.defaultPrevented}return!0}}function G(a,e,l){e(!e()),l("change",e())}var I=C('<span class="mc-toggle__label svelte-wiy2ed"> </span>'),J=C('<div><label class="mc-toggle__container svelte-wiy2ed"><input class="mc-toggle__input svelte-wiy2ed" type="checkbox"/> <!></label></div>');const K={hash:"svelte-wiy2ed",code:`/**
+import{n as L,c as M,p as P,a as y,b as r,f as C,d as m,t as u,e as B,o as H,h as w,i as D,j as i,s as j,r as f,g as F}from"../../custom-element.js";import{i as S}from"../../if.js";import{s as E,r as T}from"../../attributes.js";import{a as Y}from"../../input.js";import{c as q}from"../../custom-element-forward-events.js";var A=C('<span class="mc-toggle__label svelte-10phbx3"> </span>'),G=C('<div><label class="mc-toggle__container svelte-10phbx3"><input class="mc-toggle__input svelte-10phbx3" type="checkbox"/> <!></label></div>');const I={hash:"svelte-10phbx3",code:`/**
  * Do not edit directly, this file was auto-generated.
- */.mc-toggle.svelte-wiy2ed {width:fit-content;}.mc-toggle__container.svelte-wiy2ed {display:flex;align-items:center;cursor:pointer;gap:0.5rem;position:relative;padding:0.25rem;}.mc-toggle__container.svelte-wiy2ed::before, .mc-toggle__container.svelte-wiy2ed::after {content:"";}.mc-toggle__container.svelte-wiy2ed::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-wiy2ed::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-wiy2ed {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-wiy2ed {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-wiy2ed:has(:where(.svelte-wiy2ed):checked) .mc-toggle__container:where(.svelte-wiy2ed)::before {background-color:var(--forms-color-background-checked, #117f03);}.mc-toggle.svelte-wiy2ed:has(:where(.svelte-wiy2ed):checked) .mc-toggle__container:where(.svelte-wiy2ed)::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-wiy2ed:has(:where(.svelte-wiy2ed):disabled) .mc-toggle__container:where(.svelte-wiy2ed) {cursor:not-allowed;}.mc-toggle.svelte-wiy2ed:has(:where(.svelte-wiy2ed):disabled) .mc-toggle__container:where(.svelte-wiy2ed)::before {background-color:var(--forms-color-background-disabled, #d9d9d9);}.mc-toggle.svelte-wiy2ed:has(:where(.svelte-wiy2ed):disabled) .mc-toggle__container:where(.svelte-wiy2ed)::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-wiy2ed:has(:where(.svelte-wiy2ed):disabled) .mc-toggle__label:where(.svelte-wiy2ed) {color:var(--forms-color-text-disabled, #737373);}.mc-toggle.svelte-wiy2ed:has(:where(.svelte-wiy2ed):disabled:checked) .mc-toggle__container:where(.svelte-wiy2ed)::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-wiy2ed:has(:where(.svelte-wiy2ed):focus-visible) .mc-toggle__container:where(.svelte-wiy2ed)::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-wiy2ed .mc-toggle__container:where(.svelte-wiy2ed)::before {height:2rem;width:3.5rem;}.mc-toggle--m.svelte-wiy2ed .mc-toggle__container:where(.svelte-wiy2ed)::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-wiy2ed:has(:where(.svelte-wiy2ed):checked) .mc-toggle__container:where(.svelte-wiy2ed)::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-wiy2ed:has(:where(.svelte-wiy2ed):disabled) .mc-toggle__container:where(.svelte-wiy2ed)::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-wiy2ed:has(:where(.svelte-wiy2ed):disabled:checked) .mc-toggle__container:where(.svelte-wiy2ed)::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-wiy2ed .mc-toggle__label:where(.svelte-wiy2ed) {clip-path:inset(100%);clip:rect(1px, 1px, 1px, 1px);height:1px;overflow:hidden;position:absolute;white-space:nowrap;padding:0;width:1px;}`};function N(a,e){H(e,!0),M(a,K);let l=g(e,"name",7),r=g(e,"checked",15),i=g(e,"disabled",7,!1),s=g(e,"size",7,"m"),d=g(e,"label",7),h=F();var c=J(),w=f(c),o=f(w);T(o),o.__click=[G,r,h];var b=D(o,2);{var _=t=>{var m=I(),y=f(m,!0);v(m),u(()=>j(y,d())),p(t,m)};q(b,t=>{d()&&t(_)})}return v(w),v(c),u(()=>{S(c,1,`mc-toggle ${d()?"":" mc-toggle--hide-label"} ${s()==="m"?" mc-toggle--m":""}`,"svelte-wiy2ed"),E(o,"id",l()),E(o,"name",l()),Y(o,r()),o.disabled=i()}),p(a,c),B({get name(){return l()},set name(t){l(t),n()},get checked(){return r()},set checked(t){r(t),n()},get disabled(){return i()},set disabled(t=!1){i(t),n()},get size(){return s()},set size(t="m"){s(t),n()},get label(){return d()},set label(t){d(t),n()}})}L(["click"]);customElements.define("m-toggle",P(N,{name:{},checked:{},disabled:{},size:{},label:{}},[],[],!0));
+ */
+/**
+ * Do not edit directly, this file was auto-generated.
+ */.mc-toggle.svelte-10phbx3 {width:fit-content;}.mc-toggle__container.svelte-10phbx3 {display:flex;align-items:center;cursor:pointer;gap:0.5rem;position:relative;padding:0.25rem;}.mc-toggle__container.svelte-10phbx3::before, .mc-toggle__container.svelte-10phbx3::after {content:"";}.mc-toggle__container.svelte-10phbx3::before {transition:box-shadow 200ms ease;height:1.5rem;width:2.5rem;background-color:#666666;border-radius:1rem;flex-shrink:0;}.mc-toggle__container.svelte-10phbx3::after {height:1.25rem;width:1.25rem;background-color:#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='%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:100%;background-position:center;left:0.375rem;position:absolute;top:50%;transform:translateY(-50%);}.mc-toggle__input.svelte-10phbx3 {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-10phbx3 {color:#000000;font-size:1rem;font-weight:400;line-height:1.5;}.mc-toggle.svelte-10phbx3:has(:where(.svelte-10phbx3):checked) .mc-toggle__container:where(.svelte-10phbx3)::before {background-color:#117f03;}.mc-toggle.svelte-10phbx3:has(:where(.svelte-10phbx3):checked) .mc-toggle__container:where(.svelte-10phbx3)::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='%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-10phbx3:has(:where(.svelte-10phbx3):disabled) .mc-toggle__container:where(.svelte-10phbx3) {cursor:not-allowed;}.mc-toggle.svelte-10phbx3:has(:where(.svelte-10phbx3):disabled) .mc-toggle__container:where(.svelte-10phbx3)::before {background-color:#d9d9d9;}.mc-toggle.svelte-10phbx3:has(:where(.svelte-10phbx3):disabled) .mc-toggle__container:where(.svelte-10phbx3)::after {background-color:#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='%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-10phbx3:has(:where(.svelte-10phbx3):disabled) .mc-toggle__label:where(.svelte-10phbx3) {color:#737373;}.mc-toggle.svelte-10phbx3:has(:where(.svelte-10phbx3):disabled:checked) .mc-toggle__container:where(.svelte-10phbx3)::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='%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-10phbx3:has(:where(.svelte-10phbx3):focus-visible) .mc-toggle__container:where(.svelte-10phbx3)::before {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-toggle--m.svelte-10phbx3 .mc-toggle__container:where(.svelte-10phbx3)::before {height:2rem;width:3.5rem;}.mc-toggle--m.svelte-10phbx3 .mc-toggle__container:where(.svelte-10phbx3)::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='%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-10phbx3:has(:where(.svelte-10phbx3):checked) .mc-toggle__container:where(.svelte-10phbx3)::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='%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-10phbx3:has(:where(.svelte-10phbx3):disabled) .mc-toggle__container:where(.svelte-10phbx3)::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='%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-10phbx3:has(:where(.svelte-10phbx3):disabled:checked) .mc-toggle__container:where(.svelte-10phbx3)::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='%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-10phbx3 .mc-toggle__label:where(.svelte-10phbx3) {clip-path:inset(100%);clip:rect(1px, 1px, 1px, 1px);height:1px;overflow:hidden;position:absolute;white-space:nowrap;padding:0;width:1px;}`};function J(v,l){P(l,!0),y(v,I);let h=r(l,"name",7),o=r(l,"checked",15),d=r(l,"disabled",7,!1),n=r(l,"size",7,"m"),s=r(l,"label",7),c=r(l,"onchange",7),p=r(l,"onblur",7);var g=G();let b;var x=m(g),a=m(x);T(a),a.__change=function(...e){var t;(t=c())==null||t.apply(this,e)};var _=j(a,2);{var k=e=>{var t=A(),z=m(t,!0);f(t),u(()=>F(z,s())),w(e,t)};S(_,e=>{s()&&e(k)})}return f(x),f(g),u(e=>{b=B(g,1,"mc-toggle svelte-10phbx3",null,b,e),E(a,"id",h()),E(a,"name",h()),a.disabled=d()},[()=>({"mc-toggle--hide-label":!s(),"mc-toggle--m":n()==="m"})]),H("blur",a,function(...e){var t;(t=p())==null||t.apply(this,e)}),Y(a,o),w(v,g),D({get name(){return h()},set name(e){h(e),i()},get checked(){return o()},set checked(e){o(e),i()},get disabled(){return d()},set disabled(e=!1){d(e),i()},get size(){return n()},set size(e="m"){n(e),i()},get label(){return s()},set label(e){s(e),i()},get onchange(){return c()},set onchange(e){c(e),i()},get onblur(){return p()},set onblur(e){p(e),i()}})}L(["change"]);customElements.define("m-toggle",M(J,{name:{},checked:{},disabled:{},size:{},label:{},onchange:{},onblur:{}},[],[],!0,q));
 //# sourceMappingURL=Toggle.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Toggle.js","sources":["../../../node_modules/svelte/src/index-client.js","../../../src/components/toggle/Toggle.svelte"],"sourcesContent":["/** @import { ComponentContext, ComponentContextLegacy } from '#client' */\n/** @import { EventDispatcher } from './index.js' */\n/** @import { NotFunction } from './internal/types.js' */\nimport { active_reaction, untrack } from './internal/client/runtime.js';\nimport { is_array } from './internal/shared/utils.js';\nimport { user_effect } from './internal/client/index.js';\nimport * as e from './internal/client/errors.js';\nimport { legacy_mode_flag } from './internal/flags/index.js';\nimport { component_context } from './internal/client/context.js';\nimport { DEV } from 'esm-env';\n\nif (DEV) {\n\t/**\n\t * @param {string} rune\n\t */\n\tfunction throw_rune_error(rune) {\n\t\tif (!(rune in globalThis)) {\n\t\t\t// TODO if people start adjusting the \"this can contain runes\" config through v-p-s more, adjust this message\n\t\t\t/** @type {any} */\n\t\t\tlet value; // let's hope noone modifies this global, but belts and braces\n\t\t\tObject.defineProperty(globalThis, rune, {\n\t\t\t\tconfigurable: true,\n\t\t\t\t// eslint-disable-next-line getter-return\n\t\t\t\tget: () => {\n\t\t\t\t\tif (value !== undefined) {\n\t\t\t\t\t\treturn value;\n\t\t\t\t\t}\n\n\t\t\t\t\te.rune_outside_svelte(rune);\n\t\t\t\t},\n\t\t\t\tset: (v) => {\n\t\t\t\t\tvalue = v;\n\t\t\t\t}\n\t\t\t});\n\t\t}\n\t}\n\n\tthrow_rune_error('$state');\n\tthrow_rune_error('$effect');\n\tthrow_rune_error('$derived');\n\tthrow_rune_error('$inspect');\n\tthrow_rune_error('$props');\n\tthrow_rune_error('$bindable');\n}\n\n/**\n * Returns an [`AbortSignal`](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal) that aborts when the current [derived](https://svelte.dev/docs/svelte/$derived) or [effect](https://svelte.dev/docs/svelte/$effect) re-runs or is destroyed.\n *\n * Must be called while a derived or effect is running.\n *\n * ```svelte\n * <script>\n * \timport { getAbortSignal } from 'svelte';\n *\n * \tlet { id } = $props();\n *\n * \tasync function getData(id) {\n * \t\tconst response = await fetch(`/items/${id}`, {\n * \t\t\tsignal: getAbortSignal()\n * \t\t});\n *\n * \t\treturn await response.json();\n * \t}\n *\n * \tconst data = $derived(await getData(id));\n * </script>\n * ```\n */\nexport function getAbortSignal() {\n\tif (active_reaction === null) {\n\t\te.get_abort_signal_outside_reaction();\n\t}\n\n\treturn (active_reaction.ac ??= new AbortController()).signal;\n}\n\n/**\n * `onMount`, like [`$effect`](https://svelte.dev/docs/svelte/$effect), schedules a function to run as soon as the component has been mounted to the DOM.\n * Unlike `$effect`, the provided function only runs once.\n *\n * It must be called during the component's initialisation (but doesn't need to live _inside_ the component;\n * it can be called from an external module). If a function is returned _synchronously_ from `onMount`,\n * it will be called when the component is unmounted.\n *\n * `onMount` functions do not run during [server-side rendering](https://svelte.dev/docs/svelte/svelte-server#render).\n *\n * @template T\n * @param {() => NotFunction<T> | Promise<NotFunction<T>> | (() => any)} fn\n * @returns {void}\n */\nexport function onMount(fn) {\n\tif (component_context === null) {\n\t\te.lifecycle_outside_component('onMount');\n\t}\n\n\tif (legacy_mode_flag && component_context.l !== null) {\n\t\tinit_update_callbacks(component_context).m.push(fn);\n\t} else {\n\t\tuser_effect(() => {\n\t\t\tconst cleanup = untrack(fn);\n\t\t\tif (typeof cleanup === 'function') return /** @type {() => void} */ (cleanup);\n\t\t});\n\t}\n}\n\n/**\n * Schedules a callback to run immediately before the component is unmounted.\n *\n * Out of `onMount`, `beforeUpdate`, `afterUpdate` and `onDestroy`, this is the\n * only one that runs inside a server-side component.\n *\n * @param {() => any} fn\n * @returns {void}\n */\nexport function onDestroy(fn) {\n\tif (component_context === null) {\n\t\te.lifecycle_outside_component('onDestroy');\n\t}\n\n\tonMount(() => () => untrack(fn));\n}\n\n/**\n * @template [T=any]\n * @param {string} type\n * @param {T} [detail]\n * @param {any}params_0\n * @returns {CustomEvent<T>}\n */\nfunction create_custom_event(type, detail, { bubbles = false, cancelable = false } = {}) {\n\treturn new CustomEvent(type, { detail, bubbles, cancelable });\n}\n\n/**\n * Creates an event dispatcher that can be used to dispatch [component events](https://svelte.dev/docs/svelte/legacy-on#Component-events).\n * Event dispatchers are functions that can take two arguments: `name` and `detail`.\n *\n * Component events created with `createEventDispatcher` create a\n * [CustomEvent](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent).\n * These events do not [bubble](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#Event_bubbling_and_capture).\n * The `detail` argument corresponds to the [CustomEvent.detail](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/detail)\n * property and can contain any type of data.\n *\n * The event dispatcher can be typed to narrow the allowed event names and the type of the `detail` argument:\n * ```ts\n * const dispatch = createEventDispatcher<{\n *  loaded: null; // does not take a detail argument\n *  change: string; // takes a detail argument of type string, which is required\n *  optional: number | null; // takes an optional detail argument of type number\n * }>();\n * ```\n *\n * @deprecated Use callback props and/or the `$host()` rune instead — see [migration guide](https://svelte.dev/docs/svelte/v5-migration-guide#Event-changes-Component-events)\n * @template {Record<string, any>} [EventMap = any]\n * @returns {EventDispatcher<EventMap>}\n */\nexport function createEventDispatcher() {\n\tconst active_component_context = component_context;\n\tif (active_component_context === null) {\n\t\te.lifecycle_outside_component('createEventDispatcher');\n\t}\n\n\treturn (type, detail, options) => {\n\t\tconst events = /** @type {Record<string, Function | Function[]>} */ (\n\t\t\tactive_component_context.s.$$events\n\t\t)?.[/** @type {any} */ (type)];\n\n\t\tif (events) {\n\t\t\tconst callbacks = is_array(events) ? events.slice() : [events];\n\t\t\t// TODO are there situations where events could be dispatched\n\t\t\t// in a server (non-DOM) environment?\n\t\t\tconst event = create_custom_event(/** @type {string} */ (type), detail, options);\n\t\t\tfor (const fn of callbacks) {\n\t\t\t\tfn.call(active_component_context.x, event);\n\t\t\t}\n\t\t\treturn !event.defaultPrevented;\n\t\t}\n\n\t\treturn true;\n\t};\n}\n\n// TODO mark beforeUpdate and afterUpdate as deprecated in Svelte 6\n\n/**\n * Schedules a callback to run immediately before the component is updated after any state change.\n *\n * The first time the callback runs will be before the initial `onMount`.\n *\n * In runes mode use `$effect.pre` instead.\n *\n * @deprecated Use [`$effect.pre`](https://svelte.dev/docs/svelte/$effect#$effect.pre) instead\n * @param {() => void} fn\n * @returns {void}\n */\nexport function beforeUpdate(fn) {\n\tif (component_context === null) {\n\t\te.lifecycle_outside_component('beforeUpdate');\n\t}\n\n\tif (component_context.l === null) {\n\t\te.lifecycle_legacy_only('beforeUpdate');\n\t}\n\n\tinit_update_callbacks(component_context).b.push(fn);\n}\n\n/**\n * Schedules a callback to run immediately after the component has been updated.\n *\n * The first time the callback runs will be after the initial `onMount`.\n *\n * In runes mode use `$effect` instead.\n *\n * @deprecated Use [`$effect`](https://svelte.dev/docs/svelte/$effect) instead\n * @param {() => void} fn\n * @returns {void}\n */\nexport function afterUpdate(fn) {\n\tif (component_context === null) {\n\t\te.lifecycle_outside_component('afterUpdate');\n\t}\n\n\tif (component_context.l === null) {\n\t\te.lifecycle_legacy_only('afterUpdate');\n\t}\n\n\tinit_update_callbacks(component_context).a.push(fn);\n}\n\n/**\n * Legacy-mode: Init callbacks object for onMount/beforeUpdate/afterUpdate\n * @param {ComponentContext} context\n */\nfunction init_update_callbacks(context) {\n\tvar l = /** @type {ComponentContextLegacy} */ (context).l;\n\treturn (l.u ??= { a: [], b: [], m: [] });\n}\n\nexport { flushSync } from './internal/client/reactivity/batch.js';\nexport { getContext, getAllContexts, hasContext, setContext } from './internal/client/context.js';\nexport { hydrate, mount, unmount } from './internal/client/render.js';\nexport { tick, untrack, settled } from './internal/client/runtime.js';\nexport { createRawSnippet } from './internal/client/dom/blocks/snippet.js';\n","<svelte:options customElement=\"m-toggle\" />\n\n<script lang=\"ts\">\n  import type { ToggleSize } from './toggle.types';\n  import { createEventDispatcher } from 'svelte';\n\n  interface Props {\n    name: string;\n    checked: boolean;\n    disabled?: boolean;\n    size?: ToggleSize;\n    label: string;\n  }\n\n  let {\n    name,\n    checked = $bindable(),\n    disabled = false,\n    size = 'm',\n    label,\n  }: Props = $props();\n\n  let dispatch = createEventDispatcher();\n\n  function handleState(): void {\n    checked = !checked;\n    dispatch('change', checked);\n  }\n</script>\n\n<div\n  class=\"mc-toggle {!label ? ' mc-toggle--hide-label' : ''} {size === 'm'\n    ? ' mc-toggle--m'\n    : ''}\"\n>\n  <label class=\"mc-toggle__container\">\n    <input\n      class=\"mc-toggle__input\"\n      id={name}\n      {name}\n      type=\"checkbox\"\n      {checked}\n      {disabled}\n      onclick={handleState}\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":["create_custom_event","type","detail","bubbles","cancelable","createEventDispatcher","active_component_context","component_context","e.lifecycle_outside_component","options","events","_a","callbacks","is_array","event","fn","handleState","_","checked","dispatch","name","$.prop","$$props","disabled","size","label","$$render","consequent"],"mappings":"yPAiIA,SAASA,EAAoBC,EAAMC,EAAQ,CAAE,QAAAC,EAAU,GAAO,WAAAC,EAAa,EAAO,EAAG,GAAI,CACxF,OAAO,IAAI,YAAYH,EAAM,CAAE,OAAAC,EAAQ,QAAAC,EAAS,WAAAC,EAAY,CAC7D,CAyBO,SAASC,GAAwB,CACvC,MAAMC,EAA2BC,EACjC,OAAID,IAA6B,MAChCE,EAAqD,EAG/C,CAACP,EAAMC,EAAQO,IAAY,OACjC,MAAMC,GACLC,EAAAL,EAAyB,EAAE,WAA3B,YAAAK,EACuBV,GAExB,GAAIS,EAAQ,CACX,MAAME,EAAYC,EAASH,CAAM,EAAIA,EAAO,MAAK,EAAK,CAACA,CAAM,EAGvDI,EAAQd,EAA2CC,EAAOC,EAAQO,CAAO,EAC/E,UAAWM,KAAMH,EAChBG,EAAG,KAAKT,EAAyB,EAAGQ,CAAK,EAE1C,MAAO,CAACA,EAAM,gBACjB,CAEE,MAAO,EACP,CACF,CC5JW,SAAAE,EAAoBC,EAAAC,EAAAC,EAAA,CAC3BD,GAAWA,GAAO,EAClBC,EAAS,SAAUD,GAAO,CAC5B;;srPA3BF,oBAeIE,EAAIC,EAAAC,EAAA,OAAA,CAAA,EACJJ,EAAOG,EAAAC,EAAA,UAAA,EAAA,EACPC,mBAAW,EAAK,EAChBC,eAAO,GAAG,EACVC,EAAKJ,EAAAC,EAAA,QAAA,CAAA,EAGHH,EAAWd,EAAqB,0CAqBvBW,EAAWE,EAAAC,CAAA,6DAGYM,EAAK,CAAA,CAAA,kBADlCA,EAAK,GAAAC,EAAAC,CAAA,+CAdOF,EAAK,EAA8B,GAA3B,wBAA6B,IAAGD,EAAI,IAAK,IAChE,gBACA,EAAE,GAAA,eAAA,WAKEJ,GAAI,gMArBC,GAAK,6CACT,IAAG,2DAUd","x_google_ignoreList":[0]}
+{"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":";;;;;w/NAAA,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,oKAqBkCI,EAAK,CAAA,CAAA,kBADlCA,EAAK,GAAAG,EAAAC,CAAA,iFARJV,GAAI,kEANkBM,EAAK,EACf,eAAAD,EAAI,IAAK,oOAXhB,GAAK,6CACT,IAAG,iKAKd,qIA3BYM"}

package/dist/{stories → components}/toggle/Toggle.stories.d.ts

@@ -1,4 +1,4 @@
-import type { StoryFn, Meta } from '@storybook/html-vite';
+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.
@@ -8,8 +8,8 @@ import type { StoryFn, Meta } from '@storybook/html-vite';
  */
 declare const _default: Meta;
 export default _default;
-export declare const Default: StoryFn;
-export declare const Checked: StoryFn;
-export declare const Disabled: StoryFn;
-export declare const Small: StoryFn;
+export declare const Default: any;
+export declare const Checked: any;
+export declare const Disabled: any;
+export declare const Small: any;
 //# sourceMappingURL=Toggle.stories.d.ts.map

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

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

package/dist/components/toggle/Toggle.svelte

@@ -1,8 +1,13 @@
-<svelte:options customElement="m-toggle" />
+<svelte:options
+  customElement={{
+    tag: 'm-toggle',
+    extend: customElementForwardEvents,
+  }}
+/>
 
 <script lang="ts">
   import type { ToggleSize } from './toggle.types';
-  import { createEventDispatcher } from 'svelte';
+  import { customElementForwardEvents } from '../../utils';
 
   interface Props {
     name: string;
@@ -10,6 +15,8 @@
     disabled?: boolean;
     size?: ToggleSize;
     label: string;
+    onchange?: (event: Event) => void;
+    onblur?: (event: FocusEvent) => void;
   }
 
   let {
@@ -18,20 +25,15 @@
     disabled = false,
     size = 'm',
     label,
+    onchange,
+    onblur
   }: Props = $props();
-
-  let dispatch = createEventDispatcher();
-
-  function handleState(): void {
-    checked = !checked;
-    dispatch('change', checked);
-  }
 </script>
 
 <div
-  class="mc-toggle {!label ? ' mc-toggle--hide-label' : ''} {size === 'm'
-    ? ' mc-toggle--m'
-    : ''}"
+  class="mc-toggle"
+  class:mc-toggle--hide-label={!label}
+  class:mc-toggle--m={size === 'm'}
 >
   <label class="mc-toggle__container">
     <input
@@ -39,9 +41,10 @@
       id={name}
       {name}
       type="checkbox"
-      {checked}
+      bind:checked
       {disabled}
-      onclick={handleState}
+      {onchange}
+      {onblur}
     />
     {#if label}
       <span class="mc-toggle__label">{label}</span>
@@ -52,6 +55,9 @@
 <style>/**
  * Do not edit directly, this file was auto-generated.
  */
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
 .mc-toggle {
   width: fit-content;
 }
@@ -70,16 +76,16 @@
   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);
+  background-color: #666666;
+  border-radius: 1rem;
   flex-shrink: 0;
 }
 .mc-toggle__container::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-color: #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='%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: 100%;
   background-position: center;
   left: 0.375rem;
   position: absolute;
@@ -97,36 +103,36 @@
   width: 1px;
 }
 .mc-toggle__label {
-  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);
+  color: #000000;
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.5;
 }
 .mc-toggle:has(:checked) .mc-toggle__container::before {
-  background-color: var(--forms-color-background-checked, #117f03);
+  background-color: #117f03;
 }
 .mc-toggle:has(:checked) .mc-toggle__container::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");
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='%23117f03' viewBox='0 0 20 20'%3E%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:has(:disabled) .mc-toggle__container {
   cursor: not-allowed;
 }
 .mc-toggle:has(:disabled) .mc-toggle__container::before {
-  background-color: var(--forms-color-background-disabled, #d9d9d9);
+  background-color: #d9d9d9;
 }
 .mc-toggle:has(:disabled) .mc-toggle__container::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");
+  background-color: #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='%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:has(:disabled) .mc-toggle__label {
-  color: var(--forms-color-text-disabled, #737373);
+  color: #737373;
 }
 .mc-toggle:has(:disabled:checked) .mc-toggle__container::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");
+  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='%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:has(:focus-visible) .mc-toggle__container::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));
+  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;
 }
@@ -137,18 +143,18 @@
 .mc-toggle--m .mc-toggle__container::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");
+  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='%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:has(:checked) .mc-toggle__container::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");
+  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='%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:has(:disabled) .mc-toggle__container::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");
+  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='%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:has(:disabled:checked) .mc-toggle__container::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");
+  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='%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 .mc-toggle__label {
   clip-path: inset(100%);

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

@@ -5,25 +5,10 @@ interface Props {
     disabled?: boolean;
     size?: ToggleSize;
     label: string;
+    onchange?: (event: Event) => void;
+    onblur?: (event: FocusEvent) => void;
 }
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const Toggle: $$__sveltets_2_IsomorphicComponent<Props, {
-    change: CustomEvent<any>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "checked">;
-type Toggle = InstanceType<typeof Toggle>;
+declare const Toggle: import("svelte").Component<Props, {}, "checked">;
+type Toggle = ReturnType<typeof Toggle>;
 export default Toggle;
 //# sourceMappingURL=Toggle.svelte.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Toggle.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/toggle/Toggle.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAI/C,UAAU,KAAK;IACb,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;CACf;AAuCH,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;AAKD,QAAA,MAAM,MAAM;;;;qBAA6E,CAAC;AACxE,KAAK,MAAM,GAAG,YAAY,CAAC,OAAO,MAAM,CAAC,CAAC;AAC5C,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Toggle.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/toggle/Toggle.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAI/C,UAAU,KAAK;IACb,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IAClC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;CACtC;AAmCH,QAAA,MAAM,MAAM,kDAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}

package/dist/components/togglegroup/ToggleGroup.js

@@ -1,7 +1,10 @@
-import{c as I,p as O,a as S,b as T,d as s,e as Y,f as p,g as n,s as P,h as a,r as o,t as m,i as q,j as u,k as y,l as J,m as d}from"../../custom-element.js";import{i as B}from"../../if.js";import{e as K}from"../../each.js";import{r as N,s as b}from"../../attributes.js";import{b as Q}from"../../input.js";import{c as R}from"../../custom-element-forward-events.js";var U=p('<legend class="mc-field__legend svelte-7x6fn9"> </legend>'),V=p('<span class="mc-toggle__label svelte-7x6fn9"> </span>'),W=p('<div><label class="mc-toggle__container svelte-7x6fn9"><input class="mc-toggle__input svelte-7x6fn9" type="checkbox"/> <!></label></div>'),X=p('<fieldset class="mc-field mc-field--group svelte-7x6fn9"><!> <div class="mc-field__container svelte-7x6fn9"></div></fieldset>');const Z={hash:"svelte-7x6fn9",code:`/**
+import{c as I,k as O,a as S,b as s,f as b,t as f,h as p,i as T,p as Y,l as q,d,s as P,r,j as o,g as y,m as a,e as J}from"../../custom-element.js";import{i as B}from"../../if.js";import{e as K}from"../../each.js";import{s as C,r as N}from"../../attributes.js";import{b as Q}from"../../input.js";import{c as R}from"../../custom-element-forward-events.js";var U=b('<legend class="mc-field__legend svelte-t87zbg"> </legend>'),V=b('<span class="mc-toggle__label svelte-t87zbg"> </span>'),W=b('<div><label class="mc-toggle__container svelte-t87zbg"><input class="mc-toggle__input svelte-t87zbg" type="checkbox"/> <!></label></div>'),X=b('<fieldset class="mc-field mc-field--group svelte-t87zbg"><!> <div class="mc-field__container svelte-t87zbg"></div></fieldset>');const Z={hash:"svelte-t87zbg",code:`/**
  * Do not edit directly, this file was auto-generated.
  */
-/* stylelint-disable string-no-newline */ .mc-field__legend.svelte-7x6fn9 {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-7x6fn9 {padding-inline:0;}.mc-field--group.svelte-7x6fn9 {border-width:0;margin-inline:0;padding:0;}
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+/* stylelint-disable string-no-newline */ .mc-field__legend.svelte-t87zbg {font-size:0.875rem;line-height:1.3;font-weight:400;color:#000000;}.mc-field__legend.svelte-t87zbg {padding-inline:0;}.mc-field--group.svelte-t87zbg {border-width:0;margin-inline:0;padding:0;}
 
-/* stylelint-enable string-no-newline */.mc-toggle.svelte-7x6fn9 {width:fit-content;}.mc-toggle__container.svelte-7x6fn9 {display:flex;align-items:center;cursor:pointer;gap:0.5rem;position:relative;padding:0.25rem;}.mc-toggle__container.svelte-7x6fn9::before, .mc-toggle__container.svelte-7x6fn9::after {content:"";}.mc-toggle__container.svelte-7x6fn9::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-7x6fn9::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-7x6fn9 {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-7x6fn9 {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-7x6fn9:has(:where(.svelte-7x6fn9):checked) .mc-toggle__container:where(.svelte-7x6fn9)::before {background-color:var(--forms-color-background-checked, #117f03);}.mc-toggle.svelte-7x6fn9:has(:where(.svelte-7x6fn9):checked) .mc-toggle__container:where(.svelte-7x6fn9)::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-7x6fn9:has(:where(.svelte-7x6fn9):disabled) .mc-toggle__container:where(.svelte-7x6fn9) {cursor:not-allowed;}.mc-toggle.svelte-7x6fn9:has(:where(.svelte-7x6fn9):disabled) .mc-toggle__container:where(.svelte-7x6fn9)::before {background-color:var(--forms-color-background-disabled, #d9d9d9);}.mc-toggle.svelte-7x6fn9:has(:where(.svelte-7x6fn9):disabled) .mc-toggle__container:where(.svelte-7x6fn9)::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-7x6fn9:has(:where(.svelte-7x6fn9):disabled) .mc-toggle__label:where(.svelte-7x6fn9) {color:var(--forms-color-text-disabled, #737373);}.mc-toggle.svelte-7x6fn9:has(:where(.svelte-7x6fn9):disabled:checked) .mc-toggle__container:where(.svelte-7x6fn9)::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-7x6fn9:has(:where(.svelte-7x6fn9):focus-visible) .mc-toggle__container:where(.svelte-7x6fn9)::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-7x6fn9 .mc-toggle__container:where(.svelte-7x6fn9)::before {height:2rem;width:3.5rem;}.mc-toggle--m.svelte-7x6fn9 .mc-toggle__container:where(.svelte-7x6fn9)::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-7x6fn9:has(:where(.svelte-7x6fn9):checked) .mc-toggle__container:where(.svelte-7x6fn9)::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-7x6fn9:has(:where(.svelte-7x6fn9):disabled) .mc-toggle__container:where(.svelte-7x6fn9)::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-7x6fn9:has(:where(.svelte-7x6fn9):disabled:checked) .mc-toggle__container:where(.svelte-7x6fn9)::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-7x6fn9 .mc-toggle__label:where(.svelte-7x6fn9) {clip-path:inset(100%);clip:rect(1px, 1px, 1px, 1px);height:1px;overflow:hidden;position:absolute;white-space:nowrap;padding:0;width:1px;}`};function $(C,r){const k=O();S(r,!0),T(C,Z);const H=[];let g=s(r,"name",7),f=s(r,"id",7,k),c=s(r,"options",7),h=s(r,"legend",7),v=s(r,"values",31,()=>Y([]));function j(e){var l;return((l=c()[e])==null?void 0:l.id)??`${f()}-${e}`}var x=X(),L=n(x);{var A=e=>{var l=U(),i=n(l,!0);o(l),m(()=>y(i,h())),u(e,l)};B(L,e=>{h()&&e(A)})}var w=P(L,2);return K(w,23,c,(e,l)=>j(l),(e,l)=>{var i=W(),z=n(i),t=n(z);N(t);var M,D=P(t,2);{var F=E=>{var _=V(),G=n(_,!0);o(_),m(()=>y(G,a(l).label)),u(E,_)};B(D,E=>{a(l).label&&E(F)})}o(z),o(i),m(()=>{q(i,1,`mc-toggle mc-field__item ${a(l).label?"":" mc-toggle--hide-label"} ${a(l).size==="m"?" mc-toggle--m":""}`,"svelte-7x6fn9"),b(t,"id",g()),b(t,"name",g()),t.disabled=a(l).disabled,M!==(M=a(l).value)&&(t.value=(t.__value=a(l).value)??"")}),Q(H,[],t,()=>(a(l).value,v()),v),u(e,i)}),o(w),o(x),m(()=>b(w,"id",f())),u(C,x),J({get name(){return g()},set name(e){g(e),d()},get id(){return f()},set id(e=k){f(e),d()},get options(){return c()},set options(e){c(e),d()},get legend(){return h()},set legend(e){h(e),d()},get values(){return v()},set values(e=[]){v(e),d()}})}customElements.define("m-toggle-group",I($,{options:{attribute:"options",reflect:!0,type:"Array"},name:{},id:{},legend:{},values:{}},[],[],!0,R));
+/* stylelint-enable string-no-newline */.mc-toggle.svelte-t87zbg {width:fit-content;}.mc-toggle__container.svelte-t87zbg {display:flex;align-items:center;cursor:pointer;gap:0.5rem;position:relative;padding:0.25rem;}.mc-toggle__container.svelte-t87zbg::before, .mc-toggle__container.svelte-t87zbg::after {content:"";}.mc-toggle__container.svelte-t87zbg::before {transition:box-shadow 200ms ease;height:1.5rem;width:2.5rem;background-color:#666666;border-radius:1rem;flex-shrink:0;}.mc-toggle__container.svelte-t87zbg::after {height:1.25rem;width:1.25rem;background-color:#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='%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:100%;background-position:center;left:0.375rem;position:absolute;top:50%;transform:translateY(-50%);}.mc-toggle__input.svelte-t87zbg {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-t87zbg {color:#000000;font-size:1rem;font-weight:400;line-height:1.5;}.mc-toggle.svelte-t87zbg:has(:where(.svelte-t87zbg):checked) .mc-toggle__container:where(.svelte-t87zbg)::before {background-color:#117f03;}.mc-toggle.svelte-t87zbg:has(:where(.svelte-t87zbg):checked) .mc-toggle__container:where(.svelte-t87zbg)::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='%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-t87zbg:has(:where(.svelte-t87zbg):disabled) .mc-toggle__container:where(.svelte-t87zbg) {cursor:not-allowed;}.mc-toggle.svelte-t87zbg:has(:where(.svelte-t87zbg):disabled) .mc-toggle__container:where(.svelte-t87zbg)::before {background-color:#d9d9d9;}.mc-toggle.svelte-t87zbg:has(:where(.svelte-t87zbg):disabled) .mc-toggle__container:where(.svelte-t87zbg)::after {background-color:#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='%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-t87zbg:has(:where(.svelte-t87zbg):disabled) .mc-toggle__label:where(.svelte-t87zbg) {color:#737373;}.mc-toggle.svelte-t87zbg:has(:where(.svelte-t87zbg):disabled:checked) .mc-toggle__container:where(.svelte-t87zbg)::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='%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-t87zbg:has(:where(.svelte-t87zbg):focus-visible) .mc-toggle__container:where(.svelte-t87zbg)::before {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-toggle--m.svelte-t87zbg .mc-toggle__container:where(.svelte-t87zbg)::before {height:2rem;width:3.5rem;}.mc-toggle--m.svelte-t87zbg .mc-toggle__container:where(.svelte-t87zbg)::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='%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-t87zbg:has(:where(.svelte-t87zbg):checked) .mc-toggle__container:where(.svelte-t87zbg)::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='%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-t87zbg:has(:where(.svelte-t87zbg):disabled) .mc-toggle__container:where(.svelte-t87zbg)::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='%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-t87zbg:has(:where(.svelte-t87zbg):disabled:checked) .mc-toggle__container:where(.svelte-t87zbg)::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='%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-t87zbg .mc-toggle__label:where(.svelte-t87zbg) {clip-path:inset(100%);clip:rect(1px, 1px, 1px, 1px);height:1px;overflow:hidden;position:absolute;white-space:nowrap;padding:0;width:1px;}`};function $(z,i){const x=O();Y(i,!0),S(z,Z);const H=[];let n=s(i,"name",7),h=s(i,"id",7,x),c=s(i,"options",7),m=s(i,"legend",7),v=s(i,"values",31,()=>q([]));function D(e){var t;return((t=c()[e])==null?void 0:t.id)??`${h()}-${e}`}var u=X(),k=d(u);{var j=e=>{var t=U(),g=d(t,!0);r(t),f(()=>y(g,m())),p(e,t)};B(k,e=>{m()&&e(j)})}var w=P(k,2);return K(w,23,c,(e,t)=>D(t),(e,t)=>{var g=W(),L=d(g),l=d(L);N(l);var M,A=P(l,2);{var F=E=>{var _=V(),G=d(_,!0);r(_),f(()=>y(G,a(t).label)),p(E,_)};B(A,E=>{a(t).label&&E(F)})}r(L),r(g),f(()=>{J(g,1,`mc-toggle mc-field__item ${a(t).label?"":" mc-toggle--hide-label"} ${a(t).size==="m"?" mc-toggle--m":""}`,"svelte-t87zbg"),C(l,"id",n()),C(l,"name",n()),l.disabled=a(t).disabled,M!==(M=a(t).value)&&(l.value=(l.__value=a(t).value)??"")}),Q(H,[],l,()=>(a(t).value,v()),v),p(e,g)}),r(w),r(u),f(()=>C(w,"id",h())),p(z,u),T({get name(){return n()},set name(e){n(e),o()},get id(){return h()},set id(e=x){h(e),o()},get options(){return c()},set options(e){c(e),o()},get legend(){return m()},set legend(e){m(e),o()},get values(){return v()},set values(e=[]){v(e),o()}})}customElements.define("m-toggle-group",I($,{options:{attribute:"options",reflect:!0,type:"Array"},name:{},id:{},legend:{},values:{}},[],[],!0,R));
 //# sourceMappingURL=ToggleGroup.js.map

package/dist/components/togglegroup/ToggleGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleGroup.js","sources":["../../../src/components/togglegroup/ToggleGroup.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-toggle-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  interface ToggleGroupOption {\n    value: string;\n    id?: string;\n    label?: string;\n    disabled?: boolean;\n    indeterminate?: boolean;\n    isinvalid?: boolean;\n    size?: 's' | 'm';\n  }\n\n  interface Props {\n    options: Array<ToggleGroupOption>;\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<fieldset class=\"mc-field mc-field--group\">\n  {#if legend}\n    <legend class=\"mc-field__legend\">\n      {legend}\n    </legend>\n  {/if}\n  <div {id} class=\"mc-field__container\">\n    {#each options as opt, index (getOptionId(index))}\n      <div\n        class=\"mc-toggle mc-field__item {!opt.label\n          ? ' mc-toggle--hide-label'\n          : ''} {opt.size === 'm' ? ' mc-toggle--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:group={values}\n            value={opt.value}\n            disabled={opt.disabled}\n          />\n          {#if opt.label}\n            <span class=\"mc-toggle__label\">{opt.label}</span>\n          {/if}\n        </label>\n      </div>\n    {/each}\n  </div>\n</fieldset>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/field';\n  @use '@mozaic-ds/styles/components/toggle';\n</style>\n"],"names":["uid","$.props_id","name","$.prop","$$props","id","options","legend","values","$.proxy","getOptionId","index","_a","$$render","consequent","$.each","div","opt","$.template_effect","$.set_text","text_1","$.get","consequent_1","$.set_class","div_1","input","input_value","customElementForwardEvents"],"mappings":";;;;;2tPAAA,OA+BQA,EAAGC,EAAA,gCAEPC,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,KAAS,GAAAP,OAAMM,CAAK,EAC7C,gEAMKJ,EAAM,CAAA,CAAA,kBAFNA,EAAM,GAAAM,EAAAC,CAAA,iBAMFC,OAAAA,EAAAC,EAAA,GAAAV,GAAWW,EAAGN,IAASD,EAAYC,CAAK,KAA7BM,IAAG,iFAiBmBC,EAAA,IAAAC,EAAAC,EAAAC,EAAAJ,CAAG,EAAC,KAAK,CAAA,kBADtCI,EAAAJ,CAAG,EAAC,OAAKJ,EAAAS,CAAA,qBAdkBC,EAAAC,EAAA,EAAA,4BAAAH,EAAAJ,CAAG,EAAC,MAElC,GADA,wBACE,IAAGI,EAAAJ,CAAG,EAAC,OAAS,IAAM,gBAAkB,EAAE,GAAA,eAAA,WAKxCf,GAAI,kBAKEuB,EAAA,SAAAJ,EAAAJ,CAAG,EAAC,SADPS,KAAAA,EAAAL,EAAAJ,CAAG,EAAC,SAAJQ,EAAA,OAAAA,EAAA,QAAAJ,EAAAJ,CAAG,EAAC,QAAK,oBAATI,EAAAJ,CAAG,EAAC,MADCT,EAAM,GAANA,gIA9BfR,EAAG,oKASZ,+IArCY2B"}
+{"version":3,"file":"ToggleGroup.js","sources":["../../../src/components/togglegroup/ToggleGroup.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-toggle-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  interface ToggleGroupOption {\n    value: string;\n    id?: string;\n    label?: string;\n    disabled?: boolean;\n    indeterminate?: boolean;\n    isinvalid?: boolean;\n    size?: 's' | 'm';\n  }\n\n  interface Props {\n    options: Array<ToggleGroupOption>;\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<fieldset class=\"mc-field mc-field--group\">\n  {#if legend}\n    <legend class=\"mc-field__legend\">\n      {legend}\n    </legend>\n  {/if}\n  <div {id} class=\"mc-field__container\">\n    {#each options as opt, index (getOptionId(index))}\n      <div\n        class=\"mc-toggle mc-field__item {!opt.label\n          ? ' mc-toggle--hide-label'\n          : ''} {opt.size === 'm' ? ' mc-toggle--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:group={values}\n            value={opt.value}\n            disabled={opt.disabled}\n          />\n          {#if opt.label}\n            <span class=\"mc-toggle__label\">{opt.label}</span>\n          {/if}\n        </label>\n      </div>\n    {/each}\n  </div>\n</fieldset>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/field';\n  @use '@mozaic-ds/styles/components/toggle';\n</style>\n"],"names":["uid","$.props_id","name","$.prop","$$props","id","options","legend","values","$.proxy","getOptionId","index","_a","$$render","consequent","$.each","div","opt","$.template_effect","$.set_text","text_1","$.get","consequent_1","$.set_class","div_1","input","input_value","customElementForwardEvents"],"mappings":";;;;;;;;8+NAAA,OA+BQA,EAAGC,EAAA,gCAEPC,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,KAAS,GAAAP,OAAMM,CAAK,EAC7C,gEAMKJ,EAAM,CAAA,CAAA,kBAFNA,EAAM,GAAAM,EAAAC,CAAA,iBAMFC,OAAAA,EAAAC,EAAA,GAAAV,GAAWW,EAAGN,IAASD,EAAYC,CAAK,KAA7BM,IAAG,iFAiBmBC,EAAA,IAAAC,EAAAC,EAAAC,EAAAJ,CAAG,EAAC,KAAK,CAAA,kBADtCI,EAAAJ,CAAG,EAAC,OAAKJ,EAAAS,CAAA,qBAdkBC,EAAAC,EAAA,EAAA,4BAAAH,EAAAJ,CAAG,EAAC,MAElC,GADA,wBACE,IAAGI,EAAAJ,CAAG,EAAC,OAAS,IAAM,gBAAkB,EAAE,GAAA,eAAA,WAKxCf,GAAI,kBAKEuB,EAAA,SAAAJ,EAAAJ,CAAG,EAAC,SADPS,KAAAA,EAAAL,EAAAJ,CAAG,EAAC,SAAJQ,EAAA,OAAAA,EAAA,QAAAJ,EAAAJ,CAAG,EAAC,QAAK,oBAATI,EAAAJ,CAAG,EAAC,MADCT,EAAM,GAANA,gIA9BfR,EAAG,oKASZ,+IArCY2B"}

package/dist/{stories/toggle-group/Toggle-group.stories.d.ts → components/togglegroup/ToggleGroup.stories.d.ts}

@@ -1,4 +1,4 @@
-import type { StoryFn, Meta } from '@storybook/html-vite';
+import type { Meta } from '@storybook/html-vite';
 /**
  * Toggle Groups are used to manage multiple toggle switches within a group.
  * They allow users to choose multiple options using toggles, typically for preference or feature settings.
@@ -8,7 +8,7 @@ import type { StoryFn, Meta } from '@storybook/html-vite';
  */
 declare const _default: Meta;
 export default _default;
-export declare const Default: StoryFn;
-export declare const AllChecked: StoryFn;
-export declare const SomeDisabled: StoryFn;
-//# sourceMappingURL=Toggle-group.stories.d.ts.map
+export declare const Default: any;
+export declare const AllChecked: any;
+export declare const SomeDisabled: any;
+//# sourceMappingURL=ToggleGroup.stories.d.ts.map

package/dist/components/togglegroup/ToggleGroup.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleGroup.stories.d.ts","sourceRoot":"","sources":["../../../src/components/togglegroup/ToggleGroup.stories.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAW,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAG1D;;;;;;GAMG;wBA+BE,IAAI;AA7BT,wBA6BU;AAaV,eAAO,MAAM,OAAO,KAAoB,CAAC;AA8BzC,eAAO,MAAM,UAAU,KAAoB,CAAC;AAkB5C,eAAO,MAAM,YAAY,KAAoB,CAAC"}

package/dist/{stories/toggle-group/Toggle-group.stories.js → components/togglegroup/ToggleGroup.stories.js}

@@ -8,7 +8,7 @@ import { userEvent, expect } from 'storybook/test';
  * You can refer to the full specification in [the documentation](https://mozaic.adeo.cloud/components/form/toggle).
  */
 export default {
-    title: 'Form Elements/ToggleGroup',
+    title: 'Form Elements/Toggle Group',
     tags: ['autodocs', 'new'],
     argTypes: {
         legend: {